/* =========================================================
   AURAMOD — STUDIO STAGE  (亮底展示层)
   ---------------------------------------------------------
   目的：页面保持深色原配色，但手表图放在浅色“摄影棚底”上，
   让银色表壳、钢带边缘、表盘刻度的明暗层次读得出来。

   只改「放图 / 看图」的容器：
     .hero-visual        首页首屏
     .model .visual      首页型号卡
     .model-media        收藏页每个型号的主图区
     .stage              配置器预览台
   其余配色、文字、按钮一律不动。

   独立于主题层，切换 dark/noir/light 时本层始终生效。
   ========================================================= */

/* ---------- 通用：亮底面板的材质 ---------- */
:root{
  --studio-top:#F7F8FA;
  --studio-mid:#ECEEF1;
  --studio-bot:#DFE3E8;
  --studio-line:rgba(24,30,38,.10);
  --studio-ink:#1B222A;
  --studio-muted:#5D6874;
}

/* ---------- 1. 首页首屏 ---------- */
.hero-visual{
  margin:40px 0;
  padding:34px 18px;
  border-radius:10px;
  background:
    radial-gradient(58% 46% at 50% 30%,#FFFFFF 0%,rgba(255,255,255,0) 74%),
    linear-gradient(168deg,var(--studio-top) 0%,var(--studio-mid) 58%,var(--studio-bot) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 30px 70px rgba(0,0,0,.46),
    0 2px 0 rgba(255,255,255,.06) inset;
}
/* 圆环改成浅灰发丝线，避免白底上看不见 */
.hero-visual .ring{border-color:rgba(24,30,38,.07)}
.hero-visual .ring:nth-child(2){border-color:rgba(24,30,38,.045)}
/* 原来的金色光斑在白底上会发脏，去掉 */
.hero-visual .halo{background:none;filter:none}
/* 表体加一层落地投影，让它在亮底上“立”起来 */
.hero-visual .watch-figure{filter:drop-shadow(0 22px 26px rgba(20,26,34,.20))}
.hero-visual .watch-figure.lg{max-width:372px}
@media(max-width:1000px){
  .hero-visual{margin:0 0 34px;padding:26px 16px}
  .hero-visual .watch-figure.lg{max-width:300px}
}

/* ---------- 2. 首页型号卡 ---------- */
.model .visual{
  background:
    radial-gradient(64% 54% at 50% 26%,#FFFFFF 0%,rgba(255,255,255,0) 76%),
    linear-gradient(168deg,var(--studio-top) 0%,var(--studio-mid) 62%,var(--studio-bot) 100%);
  border-bottom:1px solid var(--studio-line);
}
.model .visual .watch-figure{filter:drop-shadow(0 16px 20px rgba(20,26,34,.18))}
/* 角标在白底上改用浅底金字 */
.model .visual .badge{
  background:rgba(255,255,255,.92);border-color:rgba(200,164,92,.55);color:#8C6B22;
  box-shadow:0 1px 3px rgba(20,26,34,.10);
}

/* ---------- 3. 收藏页主图区 ---------- */
.model-media{
  background:
    radial-gradient(62% 52% at 50% 26%,#FFFFFF 0%,rgba(255,255,255,0) 78%),
    linear-gradient(168deg,var(--studio-top) 0%,var(--studio-mid) 60%,var(--studio-bot) 100%);
  border-color:var(--studio-line);
}
.model-media .watch-figure{filter:drop-shadow(0 20px 24px rgba(20,26,34,.18))}
.badge-lg{
  background:rgba(255,255,255,.92);border-color:rgba(200,164,92,.55);color:#8C6B22;
  box-shadow:0 1px 3px rgba(20,26,34,.10);
}

/* ---------- 4. 配置器预览台 ---------- */
.stage{
  padding:26px 24px 20px;
  background:
    radial-gradient(56% 44% at 50% 24%,#FFFFFF 0%,rgba(255,255,255,0) 76%),
    linear-gradient(178deg,var(--studio-top) 0%,var(--studio-mid) 54%,var(--studio-bot) 100%);
  border-color:var(--studio-line);
  box-shadow:0 24px 56px rgba(0,0,0,.40);
}
.stage::after{
  background:radial-gradient(58% 34% at 50% 6%,rgba(255,255,255,.95),transparent 72%);
}
/* 收窄画布，让表带两端留出亮底余量，不像被裁断 */
.frames{width:88%;max-height:62vh;filter:drop-shadow(0 22px 26px rgba(20,26,34,.22))}
/* 亮底上的文字必须换成深色，否则看不见 */
.stage-meta{color:var(--studio-muted);border-top-color:var(--studio-line)}
.stage-meta .live{color:#2C6B4F}
.spec{border-top-color:var(--studio-line)}
.spec dt{color:var(--studio-muted)}
.spec dd{color:var(--studio-ink)}
@media(max-width:1020px){
  /* 窄屏 stage 变 static 后，::after 会以整页为定位基准 → 白色渐变糊到页顶。
     改回 relative 并把 top 归零（页面另有 body.page-configurator .stage{top:146px}
     的更高优先级规则，必须一并覆盖，否则 relative 会按 146px 下移） */
  .stage,
  body.page-configurator .stage{position:relative;top:0;box-shadow:0 14px 34px rgba(0,0,0,.32)}
}

/* ---------- 5. 关于页那只表 ---------- */
.figure-stage{
  padding:32px 24px;
  border-radius:10px;
  background:
    radial-gradient(58% 46% at 50% 28%,#FFFFFF 0%,rgba(255,255,255,0) 76%),
    linear-gradient(168deg,var(--studio-top) 0%,var(--studio-mid) 58%,var(--studio-bot) 100%);
  border:1px solid var(--studio-line);
  box-shadow:0 20px 48px rgba(0,0,0,.38);
}
.figure-stage .watch-figure{filter:drop-shadow(0 20px 24px rgba(20,26,34,.20))}
@media(max-width:900px){.figure-stage{padding:24px 16px;margin-top:26px}}