/* =========================================================
   AURAMOD — PAPER THEME LAYER  (整页白底 + 黑色块)
   ---------------------------------------------------------
   纯覆盖层，不改 site.css / configurator.css /
   stage-studio.css。页面 </head> 前引用：
     <link rel="stylesheet" href="assets/css/theme-paper.css">

   版面逻辑：
   · 纸白页面（#FFFFFF / 暖白 #F7F7F4 交替），黑字
   · 五个「黑块」形成节奏：顶栏 → 信任条 → CTA 横幅 →
     内页 page-hero → 页脚（含底条）
   · 金色留在白底上必须降明度：正文级 #8C6B22，
     线条/图标级 #A9832F；黑块内部反过来用 #E3C88F
   · 卡片在白底上靠 1px 描边 + 极轻投影立起来，
     不靠深色底
   ========================================================= */

/* ---------- 1. 站点令牌 ---------- */
:root{
  --ink:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F6F6F3;
  --surface-3:#EFEFEA;
  --line:rgba(17,17,17,.10);
  --line-strong:rgba(17,17,17,.20);
  --text:#141414;
  --muted:#585858;
  --dim:#8A8A8A;
  --gold:#A9832F;
  --gold-2:#8C6B22;
  --gold-soft:rgba(169,131,47,.34);
  --ok:#2F7D5B;
}

body{background:#FFFFFF;color:var(--text)}

/* ---------- 2. 顶栏（黑块 1） ---------- */
.ux-header{background:#0A0A0A;border-bottom-color:rgba(255,255,255,.08)}
.ux-header::after{background:linear-gradient(90deg,transparent,rgba(200,164,92,.45),transparent)}
.ux-ship b{color:#F4F4F4}
.ux-ship small{color:#9C9C9C}
.ux-ship svg{color:#D8B76F}
.ux-logo .name{color:#F6F6F6}
.ux-logo .mark{border-color:#C8A45C}
.ux-tools{color:#BDBDBD}
.ux-ccy{border-left-color:rgba(255,255,255,.14);border-right-color:rgba(255,255,255,.14)}
.ux-ccy button{color:#BDBDBD}
.ux-ccy button:hover,.ux-ccy button[aria-pressed="true"]{color:#E3C88F}
.icon-btn{border-color:rgba(255,255,255,.20);color:#C9C9C9}
.icon-btn:hover{border-color:#C8A45C;color:#E3C88F}
.cart-pill{border-color:rgba(255,255,255,.22);color:#F4F4F4}
.cart-pill:hover{border-color:#C8A45C}
.cart-pill b{background:#C8A45C;color:#14100A}
.ux-navbar{background:#141414;border-top-color:rgba(255,255,255,.06)}
.ux-navbar a{color:#C9C9C9}
.ux-navbar a:hover{color:#FFFFFF}
.ux-navbar a[aria-current="page"]{color:#E3C88F}
.drawer{background:#0D0D0D}
.drawer a,.drawer button{color:#E8E8E8}

/* ---------- 3. 首屏（白，暖金顶光） ---------- */
.hero-at{
  border-bottom-color:rgba(17,17,17,.09);
  background:
    radial-gradient(70% 90% at 78% 18%,rgba(200,164,92,.13),transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#FCFBF7 100%);
}
.hero-at .h1{color:#111111}
.hero-at .h1 em{color:#8C6B22}
.hero-meta{color:#8A8A8A}
.hero-visual .halo{background:radial-gradient(circle,rgba(200,164,92,.18),transparent 66%)}
.hero-visual .ring{border-color:rgba(17,17,17,.07)}
.hero-visual .ring:nth-child(2){border-color:rgba(17,17,17,.045)}

/* ---------- 4. 信任条（黑块 2） ---------- */
.trust{background:#0A0A0A;border-bottom:0}
.trust-t{color:#FFFFFF}
.trust-s{color:rgba(255,255,255,.60)}
.trust-ico{border-color:rgba(200,164,92,.52);color:#E3C88F}

/* ---------- 5. 区块与卡片 ---------- */
.sec{border-bottom-color:rgba(17,17,17,.08)}
.sec.alt{background:#F7F7F4}
.sec-head p{color:#585858}
/* 步骤：白卡 + 细描边（原来是靠深色底区分） */
.steps{background:rgba(17,17,17,.10)}
.step{background:#FFFFFF}
.sec.alt .step{background:#FFFFFF}
.step .num{color:rgba(169,131,47,.30)}
/* 型号卡 */
.model{border-color:rgba(17,17,17,.12);background:#FFFFFF}
.model:hover{border-color:rgba(169,131,47,.55)}
.model .visual{background:linear-gradient(180deg,#FFFFFF 0%,#F4F3EF 100%);border-bottom-color:rgba(17,17,17,.10)}
.model .visual .badge{border-color:rgba(17,17,17,.14);color:#8C6B22;background:rgba(255,255,255,.94)}
.model .info .sub{color:#8A8A8A}
.model .price small{color:#8A8A8A}
.model .foot{background:transparent;border-top:0}
/* 材质竖线 */
.mat{border-left-color:rgba(17,17,17,.16)}
/* 选项格 */
.opts{background:rgba(17,17,17,.12);border-color:rgba(17,17,17,.12)}
.opt{background:#FFFFFF}
.sec.alt .opt{background:#FFFFFF}
.opt .count{color:#8A8A8A}
/* 评价卡 */
.quote{border-color:rgba(17,17,17,.12);background:#FFFFFF}
.quote p{color:#2C2C2C}
.quote .who{border-top-color:rgba(17,17,17,.10)}
/* FAQ */
.faq{border-top-color:rgba(17,17,17,.12)}
.faq details{border-bottom-color:rgba(17,17,17,.10)}
.faq summary::after{border-right-color:#8A8A8A;border-bottom-color:#8A8A8A}

/* ---------- 6. CTA 横幅（黑块 3） ---------- */
.cta{
  background:radial-gradient(60% 100% at 50% 0%,rgba(200,164,92,.14),transparent 60%),#0A0A0A;
  border-bottom:0;
}
.cta .h2{color:#FFFFFF}
.cta-in p{color:rgba(255,255,255,.66)}
.cta .eyebrow{color:#E3C88F}
.cta .btn{border-color:rgba(255,255,255,.30);color:#FFFFFF}
.cta .btn:hover{border-color:#FFFFFF;color:#FFFFFF}
.cta .btn.gold{background:#C8A45C;border-color:#C8A45C;color:#14100A}
.cta .btn.gold:hover{background:#DCBB7C;border-color:#DCBB7C}

/* ---------- 7. 内页头部（黑块 4） ---------- */
.page-hero{
  background:#0A0A0A;
  background-image:radial-gradient(80% 120% at 80% -30%,rgba(200,164,92,.18),transparent 62%);
  border-bottom:0;
}
.page-hero .h1{color:#FFFFFF}
.page-hero p{color:rgba(255,255,255,.70)}
.page-hero .eyebrow{color:#E3C88F}
/* 黑块里的按钮必须反过来，否则描边按钮会隐形 */
.page-hero .btn{border-color:rgba(255,255,255,.32);color:#FFFFFF}
.page-hero .btn:hover{border-color:#FFFFFF;color:#FFFFFF}
.page-hero .btn.gold{background:#C8A45C;border-color:#C8A45C;color:#14100A}
.page-hero .btn.gold:hover{background:#DCBB7C;border-color:#DCBB7C;color:#14100A}
.crumb{color:rgba(255,255,255,.48)}
.crumb a:hover{color:#E3C88F}

/* ---------- 8. 表格 / 关于 / 联系 ---------- */
.table th{color:#141414;border-bottom-color:rgba(17,17,17,.22)}
.table td{color:#585858}
.stat .n{color:#8C6B22}
.stat .l{color:#8A8A8A}
.prose p{color:#585858}
.prose strong{color:#141414}
.field label{color:#6E6E6E}
.field input,.field textarea,.field select{
  background:#FAFAF8;border-color:rgba(17,17,17,.15);color:#141414;
}
.field input::placeholder,.field textarea::placeholder{color:#A6A6A6}
.field select{color:#141414}
.info-card{background:#FAFAF8;border-color:rgba(17,17,17,.12)}
.info-card h4{color:#8C6B22}
.info-row{color:#585858}
.info-row b{color:#141414}
.form-note{color:#8A8A8A}

/* ---------- 9. 页脚（黑块 5） ---------- */
/* 注意：必须用 footer.foot 限定，否则会命中型号卡里的 .model .foot */
footer.foot{background:#0A0A0A;border-top:0}
.foot-trust{border-bottom-color:rgba(255,255,255,.10)}
.foot-col h4,.foot-logo .name{color:#F4F4F4}
.foot-blurb,.foot-contact div,.foot-list a{color:rgba(255,255,255,.62)}
.foot-contact svg,.foot-list a:hover,.foot-contact a:hover,.foot-post:hover .tt{color:#E3C88F}
.foot-social a{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.62)}
.foot-social a:hover{border-color:#C8A45C;color:#E3C88F}
.foot-post .tb{background:#161616;border-color:rgba(255,255,255,.10)}
.foot-post .tt{color:#EDEDED}
.foot-post .td{color:rgba(255,255,255,.45)}
.foot-bottom{background:#000000;border-top-color:rgba(255,255,255,.08)}
.foot-bottom .in{color:rgba(255,255,255,.50)}
.foot-bottom a:hover{color:#E3C88F}
.pay i{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.55)}

/* ---------- 10. 白底上的图片展示区（描边 + 轻投影） ---------- */
:root{
  --studio-top:#FFFFFF;
  --studio-mid:#F8F7F3;
  --studio-bot:#EDECE6;
  --studio-line:rgba(17,17,17,.15);
  --studio-ink:#141414;
  --studio-muted:#5A5A5A;
}
.hero-visual{
  border-color:rgba(17,17,17,.12);
  box-shadow:0 18px 44px rgba(17,17,17,.12);
}
.model-media{border-color:rgba(17,17,17,.14);box-shadow:0 10px 26px rgba(17,17,17,.06)}
.badge-lg{border-color:rgba(17,17,17,.14);color:#8C6B22;background:rgba(255,255,255,.94)}
.stage{border-color:rgba(17,17,17,.16);box-shadow:0 18px 46px rgba(17,17,17,.14)}
.figure-stage{border-color:rgba(17,17,17,.14);box-shadow:0 14px 36px rgba(17,17,17,.12)}

/* ---------- 11. 配置器（configurator.css 自带一套变量） ---------- */
:root{
  --bg:#FFFFFF;
  --bg-2:#FAFAF8;
  --panel:#FFFFFF;
  --panel-2:#F6F6F3;
  --line:#E3E2DC;
  --text:#141414;
  --muted:#5C5C5C;
  --gold:#A9832F;
  --gold-2:#8C6B22;
  --ok:#2F7D5B;
}
/* 配置器顶栏也是黑块，里面的字必须反过来 */
.site-header{background:rgba(10,10,10,.94);border-bottom-color:rgba(255,255,255,.08);color:#F4F4F4}
.site-header .logo{color:#F4F4F4}
.site-header .logo .mark::after{border-color:rgba(200,164,92,.35)}
.site-header .nav{color:#BFBFBF}
.site-header .nav a:hover{color:#FFFFFF}
.site-header .header-tools{color:#BFBFBF}
.site-header .header-tools .lang{border-color:rgba(255,255,255,.18)}

.hero{background:radial-gradient(90% 130% at 12% -10%,#FBF9F3 0%,transparent 60%);border-bottom-color:#E3E2DC}
.chip{background:#FFFFFF;border-color:#E3E2DC}
.chip:hover{border-color:#B9B6AC}
.chip[aria-checked="true"]{border-color:#A9832F;background:#FBF6EA;box-shadow:0 0 0 1px rgba(169,131,47,.18) inset}
.summary{background:#FAFAF8;border-color:#E3E2DC}
.row .k{color:#5C5C5C}
.stage-meta{color:#5A5A5A}
@media(max-width:1020px){
  .stage,
  body.page-configurator .stage{box-shadow:0 12px 30px rgba(17,17,17,.14)}
}
