/* ==========================================================================
   智道AI梦工场 · 1网站  一期轻量站  网页 V11
   作者：小万（AI 助手）  日期：2026-09-17
   风格：工业风深色 + 琥珀金
   说明：本文件为「初步框架」的公共样式，所有页面共用。
        正式开发时可直接沿用，不需要重写。
   ========================================================================== */

:root{
  --bg:#0e1015;
  --bg-2:#15181f;
  --card:#1a1e27;
  --card-2:#20242e;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#e9ecf1;
  --ink-2:#a8b0bd;
  --ink-3:#6f7889;
  --amber:#e5a53a;
  --amber-2:#b8730a;
  --amber-bg:rgba(229,165,58,.10);
  --green:#3ec38a;
  --red:#e2685f;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --wrap:1180px;
  --r:12px;

  /* ---- 语义别名（V16 补）----
     基础主题只定义了「结构名」--card / --ink / --ink-2；但 V15 的评价浮层、
     V16 的搜索浮层这些新组件用的是「语义名」--surface / --text / --text-dim / --amber-hi。
     以前这几个名字没人定义，组件里只能写 var(--surface,#0d0e15) 硬兜底 ——
     结果在浅色 / 木纹模板下浮层会变成一块黑底，跟整站对不上。
     这里补一层映射。⚠️ 三套主题块里都要各写一遍：
     自定义属性在「声明它的那个元素」上就完成 var() 代入，
     只在 :root 写 var(--card) 是拿不到 body 上覆盖后的值的。 */
  --surface:var(--card);
  --text:var(--ink);
  --text-dim:var(--ink-2);
  --text-mute:var(--ink-3);
  --amber-hi:var(--amber);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:18.5px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* ---------- V11：图片按比例裁切适配（不拉伸、不留白） ---------- */
/* 1) 比例容器统一裁切：图片按比例缩放填满容器，多余的裁掉，绝不强行拉伸 */
.ph,.card__img,.zd-fitimg{overflow:hidden}
.ph{aspect-ratio:4/3}
.ph>img,.ph__img,.card__img>img,.zd-fitimg{width:100%;height:100%;object-fit:cover;object-position:center}
/* 2) 区块独立图（原来只有 width:100%）→ 固定 4:3 比例盒，图片在其中裁切填满 */
.zd-fitimg{display:block;height:auto;aspect-ratio:4/3;border-radius:var(--r)}
/* 3) 窄屏下比例盒放宽，避免竖图被裁太多 */
@media (max-width:560px){.zd-fitimg{aspect-ratio:1/1}}
/* hidden 属性必须压过任何 display 规则，否则按钮该藏藏不住 */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(14,16,21,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top__in{display:flex;align-items:center;gap:20px;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20.5px;letter-spacing:-.01em;white-space:nowrap}
.logo__mark{
  width:32px;height:32px;border-radius:9px;flex:none;overflow:hidden;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:#1a1206;font-size:16.5px;font-weight:900;
}
.logo__mark img{width:100%;height:100%;object-fit:contain}
.nav{display:flex;gap:26px;margin-left:auto;font-size:17px;color:var(--ink-2);white-space:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:6px 0;border-bottom:2px solid transparent;transition:.15s;flex:0 0 auto;white-space:nowrap}
.nav a:hover{color:var(--ink);border-bottom-color:var(--amber)}
.top__cta{
  flex:none;padding:9px 16px;border-radius:8px;font-size:16.5px;font-weight:700;
  background:var(--amber);color:#1a1206;
}
.burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line-2);border-radius:8px;background:transparent;color:var(--ink);font-size:19.5px;cursor:pointer}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:10px;font-size:18px;font-weight:700;
  border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn--p{background:var(--amber);color:#1a1206}
.btn--p:hover{background:#f2b654}
.btn--g{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn--g:hover{border-color:var(--amber);color:var(--amber)}
.btn--sm{padding:9px 16px;font-size:16.5px}

/* ---------- 主视觉 ---------- */
.hero{
  padding:76px 0 66px;
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(229,165,58,.13), transparent 62%),
    linear-gradient(180deg,#11141b 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;
  letter-spacing:.16em;color:var(--amber);text-transform:uppercase;
}
.hero__eyebrow::before{content:"";width:22px;height:2px;background:var(--amber)}
.hero h1{
  margin-top:16px;font-size:clamp(28px,4.4vw,52px);font-weight:900;
  letter-spacing:-.03em;line-height:1.16;max-width:16ch;
}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero__sub{margin-top:18px;max-width:52ch;color:var(--ink-2);font-size:19.5px}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.fact{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:16px;color:var(--ink-2);
}
.fact i{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}

/* ---------- 通用区块 ---------- */
.sec{padding:70px 0}
.sec--tint{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec__h{margin-bottom:34px}
.sec__eyebrow{font-size:14.5px;font-weight:800;letter-spacing:.16em;color:var(--amber);text-transform:uppercase}
.sec__t{margin-top:10px;font-size:clamp(22px,2.6vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.26}
.sec__d{margin-top:12px;max-width:62ch;color:var(--ink-2);font-size:18.5px}

/* ---------- 两条产品线 ---------- */
.lines{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.line{
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:30px;display:flex;flex-direction:column;gap:14px;
}
.line--a{border-color:rgba(229,165,58,.32)}
.line__tag{
  align-self:flex-start;padding:4px 10px;border-radius:6px;font-size:14.5px;font-weight:800;
  background:var(--amber-bg);color:var(--amber);letter-spacing:.04em;
}
.line h3{font-size:23px;font-weight:800;letter-spacing:-.01em}
.line p{color:var(--ink-2);font-size:17.5px}
.line ul{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.line li{position:relative;padding-left:18px;color:var(--ink-2);font-size:17px}
.line li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:2px;background:var(--amber)}
.line__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
.line__price{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--amber)}
.line__unit{font-size:16px;color:var(--ink-3)}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;gap:18px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  overflow:hidden;display:flex;flex-direction:column;min-width:0;
}
.card__img{aspect-ratio:4/3;background:var(--card-2);position:relative;display:flex;align-items:center;justify-content:center}
.card__b{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card__t{font-size:18.5px;font-weight:800;letter-spacing:-.01em}
.card__d{font-size:16px;color:var(--ink-3)}
.card__p{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:8px}
.card__p b{font-family:var(--mono);font-size:21.5px;color:var(--amber);font-weight:800}
.card__p span{font-size:15px;color:var(--ink-3)}

/* 占位图块 */
.ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line-2);border-radius:6px;margin:12px;
  color:var(--ink-3);font-size:15px;text-align:center;padding:12px;line-height:1.6;
}

/* ---------- 流程 ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow__i{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:22px;min-width:0}
.flow__n{font-family:var(--mono);font-size:15.5px;font-weight:800;color:var(--amber)}
.flow__t{margin-top:10px;font-size:19px;font-weight:800}
.flow__d{margin-top:8px;font-size:16.5px;color:var(--ink-2)}

/* ---------- 定制器五步 ---------- */
.cust{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
/* grid 子项默认 min-width:auto，会被内部横向内容撑破容器 —— 必须显式归零 */
.cust>*{min-width:0}
.stepper{min-width:0}
.steps{display:flex;gap:8px;margin-bottom:22px;overflow-x:auto;padding-bottom:4px;min-width:0}
.step{
  flex:1 1 0;min-width:118px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);padding:12px 14px;cursor:pointer;transition:.15s;
}
.step__n{font-family:var(--mono);font-size:14.5px;font-weight:800;color:var(--ink-3)}
.step__t{margin-top:5px;font-size:16.5px;font-weight:700;color:var(--ink-2)}
.step.on{border-color:var(--amber);background:var(--amber-bg)}
.step.on .step__n,.step.on .step__t{color:var(--amber)}
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:26px;min-width:0}
.panel__t{font-size:21.5px;font-weight:800}
.panel__d{margin-top:8px;color:var(--ink-2);font-size:17.5px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.opt{border:1px solid var(--line);border-radius:10px;background:var(--card-2);padding:16px;cursor:pointer;min-width:0}
.opt.on{border-color:var(--amber);background:var(--amber-bg)}
.opt__t{font-size:17.5px;font-weight:800}
.opt__d{margin-top:5px;font-size:15.5px;color:var(--ink-3)}
.opt__p{margin-top:10px;font-family:var(--mono);font-size:16.5px;color:var(--amber);font-weight:800}
.field{margin-top:18px}
.field label{display:block;font-size:16px;color:var(--ink-2);margin-bottom:8px}
.field input[type=range]{width:100%;accent-color:var(--amber)}
.field select,.field input[type=text]{
  width:100%;padding:11px 13px;border-radius:9px;background:var(--card-2);
  border:1px solid var(--line-2);color:var(--ink);font-size:17.5px;font-family:var(--font);
}
.drop{
  margin-top:18px;border:1.5px dashed var(--line-2);border-radius:10px;padding:34px 20px;
  text-align:center;color:var(--ink-3);font-size:16.5px;background:rgba(255,255,255,.02);
}
.nav-btns{display:flex;gap:10px;margin-top:26px}
.nav-btns .btn{flex:1}

/* ---------- 报价面板 ---------- */
.quote{border:1px solid rgba(229,165,58,.34);border-radius:var(--r);background:var(--card);overflow:hidden;position:sticky;top:86px}
.quote__h{padding:13px 20px;background:var(--amber-bg);font-size:16px;font-weight:800;color:var(--amber);letter-spacing:.04em}
.quote__b{padding:18px 20px}
.qrow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:17px;color:var(--ink-2);border-bottom:1px dashed var(--line)}
.qrow span:last-child{font-family:var(--mono);color:var(--ink);flex:none}
.qtotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.qtotal span{font-size:16.5px;color:var(--ink-2)}
.qtotal b{font-family:var(--mono);font-size:31px;font-weight:900;color:var(--amber)}
.quote__note{margin-top:12px;font-size:15px;color:var(--ink-3);line-height:1.65}
.quote__btn{width:100%;margin-top:16px}

/* ---------- 提示条 ---------- */
.note{
  margin-top:20px;padding:14px 18px;border-radius:10px;font-size:16.5px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-2);
}
.note--warn{border-color:rgba(226,104,95,.4);background:rgba(226,104,95,.08);color:#f0c4c0}
.note--ok{border-color:rgba(62,195,138,.4);background:rgba(62,195,138,.08);color:#b9ecd6}
.note b{color:var(--ink)}

/* ---------- 表格 ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin-top:20px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:17px;min-width:520px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:rgba(255,255,255,.03);font-weight:800;font-size:16px;color:var(--ink);white-space:nowrap}
td{color:var(--ink-2)}
tbody tr:last-child td{border-bottom:none}
td b{color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.faq__i{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:18px 22px}
.faq__q{font-size:18.5px;font-weight:800}
.faq__a{margin-top:8px;color:var(--ink-2);font-size:17px}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:44px 0 30px;margin-top:0}
.foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
.foot h4{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:12px}
.foot p,.foot li{font-size:16px;color:var(--ink-3);line-height:1.9}
.foot__bar{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:15px;color:var(--ink-3)}

/* ---------- 骨架标记（正式上线前删除） ---------- */
.skel{
  display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:6px;
  font-size:14.5px;font-weight:800;letter-spacing:.04em;
  background:rgba(229,165,58,.12);color:var(--amber);border:1px solid rgba(229,165,58,.3);
}
.skel--todo{background:rgba(226,104,95,.1);color:var(--red);border-color:rgba(226,104,95,.3)}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .cust{grid-template-columns:1fr}
  .quote{position:static}
}
@media (max-width:860px){
  .nav{display:none}
  .top__cta{display:none}
  .burger{display:block}
  .lines{grid-template-columns:1fr}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr;gap:22px}
  .sec{padding:52px 0}
  .hero{padding:56px 0 48px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  /* 手机 2 列：单列把每张卡撑满一屏，页面拉得老长，看着像没内容 —— 电商标准是手机双列 */
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid--4 .card,.grid--3 .card{border-radius:12px}
  .grid--4 .card__b,.grid--3 .card__b{padding:12px}
  .grid--4 .card__t,.grid--3 .card__t{font-size:15.5px}
  .grid--4 .card__d,.grid--3 .card__d{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .grid--4 .card__p{font-size:15px}
  .flow{grid-template-columns:repeat(2,1fr)}
  .opts{grid-template-columns:repeat(2,1fr)}
  .opt{padding:12px}
  .opt__t{font-size:15.5px}
  .opt__d{font-size:13px}
  .hero h1{max-width:100%}
  .btn{width:100%}
  .nav-btns{flex-direction:column}
  .steps{gap:6px}
  .step{min-width:104px;padding:10px 11px}
}

/* ---------- logo 隐藏入口：连点 5 次进管理后台 ---------- */
.logo{
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;cursor:pointer;
}

/* ---------- 下单弹层（真下单） ---------- */
.zdm{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6,8,12,.74);backdrop-filter:blur(4px);
}
.zdm.is-on{display:flex}
.zdm__box{
  width:100%;max-width:430px;max-height:90vh;overflow:auto;
  background:var(--card);border:1px solid var(--line-2);border-radius:16px;
  padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.zdm__box h3{font-size:21.5px;letter-spacing:-.01em}
.zdm__sub{color:var(--ink-2);font-size:16px;margin-top:6px;line-height:1.7}
.zdm__f{display:block;margin-top:14px}
.zdm__f span{display:block;font-size:15.5px;color:var(--ink-2);margin-bottom:6px}
.zdm__f input{
  width:100%;padding:11px 13px;border-radius:9px;font-size:17.5px;font-family:var(--font);
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);
}
.zdm__f input:focus{outline:none;border-color:var(--amber)}
.zdm__f input:disabled{opacity:.55}
.zdm__hint{font-size:15px;color:var(--ink-3);margin-top:12px;line-height:1.65}
.zdm__ref{
  margin-top:12px;padding:9px 12px;border-radius:9px;font-size:15.5px;line-height:1.6;
  background:var(--amber-bg);border:1px solid rgba(229,165,58,.28);color:var(--amber);
}
.zdm__err{
  margin-top:12px;padding:9px 12px;border-radius:9px;font-size:15.5px;line-height:1.6;
  background:rgba(226,104,95,.12);border:1px solid rgba(226,104,95,.34);color:#f0a29b;
  white-space:pre-wrap;
}
.zdm__act{display:flex;gap:10px;margin-top:20px}
.zdm__act .btn{flex:1}

/* 被推荐进来时的一条提示 */
.zd-invite{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:150;
  display:flex;flex-direction:column;gap:2px;align-items:center;
  padding:11px 20px;border-radius:12px;font-size:15.5px;text-align:center;
  background:rgba(26,30,39,.97);border:1px solid rgba(229,165,58,.34);
  box-shadow:0 12px 34px rgba(0,0,0,.5);color:var(--ink-2);
  transition:opacity .4s,transform .4s;
}
.zd-invite b{color:var(--amber);font-size:16px}
.zd-invite.is-out{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}

/* 商品卡上的下单按钮 */
.card__buy{margin-top:12px;width:100%;padding:10px 16px;font-size:16.5px}

/* =========================================================
   17. 照片预览器（V11 新增：多视角 + 开灯效果 + 确认锁定）
   ========================================================= */
.drop--act{cursor:pointer;transition:border-color .18s,background .18s}
.drop--act:hover{border-color:var(--amber);background:var(--amber-bg)}
.drop.is-over{border-color:var(--amber);background:var(--amber-bg)}

.pv{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:18px}
.pv__bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.pv__views{display:flex;flex-wrap:wrap;gap:8px}
.pv__v{
  font:inherit;font-size:17.5px;padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--card-2);color:var(--ink-2);transition:color .16s,border-color .16s;
}
.pv__v:hover{color:var(--ink);border-color:var(--amber)}
.pv__v.on{background:var(--amber);border-color:var(--amber);color:#151107;font-weight:700}
.pv__lamp{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:17.5px;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;background:var(--card-2);
}
.pv__lamp input{width:19px;height:19px;accent-color:var(--amber)}
.pv__lamp input:checked + span{color:var(--amber);font-weight:700}

.pv__stage{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0b0c0f}
.pv__stage canvas{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}
.pv--locked .pv__stage{border-color:rgba(62,195,138,.55);box-shadow:0 0 0 2px rgba(62,195,138,.12)}

.pv__disclaim{margin-top:14px}
.pv__hint{margin-top:12px;font-size:17px;color:var(--amber)}
.pv__hint--ok{color:var(--green)}
.pv__foot{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.pv__foot .btn{flex:1;min-width:170px}
.pv__lock{
  margin-top:12px;padding:12px 16px;border-radius:10px;font-size:17px;
  border:1px solid rgba(62,195,138,.4);background:rgba(62,195,138,.08);color:#b9ecd6;
}
.pv__lock b{color:var(--green)}

.pv__card{margin-top:16px;border:1px solid var(--amber);border-radius:var(--r);background:var(--amber-bg);padding:18px}
.pv__card-t{font-size:22px;font-weight:800;margin-bottom:10px}
.pv__card-p{font-size:17px;color:var(--ink-2);margin-bottom:12px;line-height:1.7}
.pv__warn{
  border:1px solid rgba(226,104,95,.45);background:rgba(226,104,95,.1);color:#f0c4c0;
  border-radius:10px;padding:14px 16px;font-size:17px;margin-bottom:12px;line-height:1.7;
}
.pv__warn b{color:#ff8b80}
.pv__card-b{display:flex;gap:10px;flex-wrap:wrap}
.pv__card-b .btn{flex:1;min-width:170px}

@media (max-width:560px){
  .pv{padding:14px}
  .pv__bar{gap:10px}
  .pv__v{font-size:16.5px;padding:8px 13px}
  .pv__lamp{font-size:16.5px;padding:8px 13px}
  .pv__foot .btn,.pv__card-b .btn{min-width:100%}
}

/* ---------- 手机端菜单展开态（V11：类名控制，不再写内联样式） ---------- */
@media (max-width:860px){
  .nav--open{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:66px;left:0;right:0;
    background:#15181f;padding:8px 24px 12px;
    border-bottom:1px solid rgba(255,255,255,.09);
    box-shadow:0 20px 44px rgba(0,0,0,.5);z-index:60;
  }
  .nav--open a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav--open a:last-child{border-bottom:0}
}

/* ---------- V11：可改内容相关样式 ---------- */
.ph__img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.qr{width:170px;height:170px;object-fit:contain;border-radius:10px;background:#fff;padding:6px;margin-bottom:10px}
/* .foot__admin 已废弃：V14 起页脚不再放后台入口（后台走 logo 连点 5 次），定义一并清掉 */
@media (max-width:560px){.qr{width:140px;height:140px}}

/* ---------- V14：商品视频 ---------- */
.card__img{position:relative}
.zd-vplay{
  position:absolute;left:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;
  border:1px solid rgba(245,165,36,.5);
  background:rgba(10,11,16,.74);color:var(--amber-hi,#ffc55c);
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.zd-vplay:hover{background:rgba(245,165,36,.22)}
.zd-vmask{
  position:fixed;inset:0;z-index:9000;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(4,4,7,.84);
}
.zd-vmask.is-on{display:flex}
.zd-vmask__box{
  position:relative;width:100%;max-width:720px;padding:14px;
  background:var(--surface,#0d0e15);border:1px solid rgba(255,255,255,.12);border-radius:12px;
}
.zd-vmask__t{
  font-size:14px;color:var(--text,#eceef5);margin-bottom:10px;padding-right:38px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.zd-vmask__x{
  position:absolute;top:8px;right:10px;width:30px;height:30px;
  border-radius:6px;border:1px solid rgba(255,255,255,.14);
  background:transparent;color:var(--text-dim,#9aa2b8);font-size:18px;line-height:1;cursor:pointer;
}
.zd-vmask__x:hover{color:var(--amber-hi,#ffc55c);border-color:rgba(245,165,36,.5)}
.zd-vmask video{display:block;width:100%;max-height:70vh;border-radius:8px;background:#000}
@media (max-width:520px){
  .zd-vmask{padding:12px}
  .zd-vmask video{max-height:56vh}
}

/* ==========================================================================
   V15 评价 / 晒单
   商品卡上那行评分 + 点开的评价浮层。配色全部走主题变量，
   所以在「深色 / 简约浅色」两套模板下都不会出现看不清的字。
   ========================================================================== */

/* ---------- 商品卡评分行 ---------- */
.zd-rvline{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:0 0 8px;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--text-dim,#9aa2b8);text-align:left;
}
.zd-rvline b{color:var(--amber-hi,#ffc55c);font-size:14px;line-height:1;font-weight:800}
.zd-rvline i{color:var(--amber,#f5a524);font-style:normal;letter-spacing:.5px;font-size:12px}
.zd-rvline span{border-bottom:1px dashed rgba(154,162,184,.5)}
.zd-rvline:hover span{color:var(--amber-hi,#ffc55c);border-color:rgba(245,165,36,.7)}
.zd-rvline--none{border:1px dashed var(--line,rgba(255,255,255,.14));border-radius:999px;padding:3px 10px}
.zd-rvline--none:hover{border-color:rgba(245,165,36,.55);color:var(--amber-hi,#ffc55c)}

/* ---------- 评价浮层 ---------- */
.zd-rmask{
  position:fixed;inset:0;z-index:9100;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(4,4,7,.84);
}
.zd-rmask.is-on{display:flex}
.zd-rmask__box{
  position:relative;width:100%;max-width:640px;max-height:86vh;
  display:flex;flex-direction:column;padding:16px;
  background:var(--surface,#0d0e15);
  border:1px solid var(--line,rgba(255,255,255,.12));border-radius:12px;
}
.zd-rmask__t{
  font-size:15px;font-weight:700;color:var(--text,#eceef5);margin-bottom:12px;padding-right:38px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.zd-rmask__body{overflow:auto;-webkit-overflow-scrolling:touch}
.zd-rmask__tip{margin:6px 0;font-size:14px;line-height:1.7;color:var(--text-dim,#9aa2b8)}
.zd-rmask__foot{margin-top:12px;padding-top:11px;border-top:1px solid var(--line,rgba(255,255,255,.1));text-align:center}
.zd-rmask__foot a{font-size:13.5px;color:var(--amber-hi,#ffc55c);text-decoration:none}
.zd-rmask__foot a:hover{text-decoration:underline}

.zd-rvhead{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:var(--card-2,rgba(255,255,255,.04))}
.zd-rvhead--none{display:block;font-size:14px;line-height:1.7;color:var(--text-dim,#9aa2b8)}
.zd-rvhead__s{display:flex;align-items:baseline;gap:3px;color:var(--amber-hi,#ffc55c)}
.zd-rvhead__s b{font-size:30px;line-height:1;font-weight:800}
.zd-rvhead__s span{font-size:13px}
.zd-rvhead__star{color:var(--amber,#f5a524);font-size:15px;letter-spacing:2px}
.zd-rvhead__sub{margin-top:4px;font-size:12.5px;color:var(--text-dim,#9aa2b8)}

.zd-rvdist{margin:12px 0 4px;display:grid;gap:5px}
.zd-rvdist__r{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim,#9aa2b8)}
.zd-rvdist__r>span{width:40px;flex:0 0 40px}
.zd-rvdist__r>i{flex:1;height:6px;border-radius:999px;background:var(--line,rgba(255,255,255,.1));overflow:hidden}
.zd-rvdist__r>i>b{display:block;height:100%;background:var(--amber,#f5a524);border-radius:999px}
.zd-rvdist__r>em{width:26px;flex:0 0 26px;text-align:right;font-style:normal}

.zd-rvlist{margin-top:14px;display:grid;gap:12px}
.zd-rv{padding:12px 14px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:10px}
.zd-rv__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zd-rv__av{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;
  background:var(--amber-bg,rgba(245,165,36,.16));color:var(--amber-hi,#ffc55c);
  font-size:13px;font-weight:700;
}
.zd-rv__nick{font-size:14px;color:var(--text,#eceef5);font-weight:600}
.zd-rv__star{color:var(--amber,#f5a524);font-size:12.5px;letter-spacing:1.5px}
.zd-rv__time{margin-left:auto;font-size:12px;color:var(--text-dim,#9aa2b8)}
.zd-rv__t{margin:9px 0 0;font-size:14.5px;line-height:1.75;color:var(--text,#eceef5);word-break:break-word}
.zd-rv__meta{margin-top:7px}
.zd-rv__spec{display:inline-block;font-size:12px;padding:2px 8px;border-radius:6px;background:var(--card-2,rgba(255,255,255,.05));color:var(--text-dim,#9aa2b8)}
.zd-rv__imgs{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap}
.zd-rv__img{display:block;width:78px;height:78px;border-radius:8px;overflow:hidden;border:1px solid var(--line,rgba(255,255,255,.12))}
.zd-rv__img img{width:100%;height:100%;object-fit:cover;display:block}
.zd-rv__video{
  margin-top:9px;padding:5px 12px;border-radius:999px;cursor:pointer;font-family:inherit;
  border:1px solid rgba(245,165,36,.5);background:transparent;color:var(--amber-hi,#ffc55c);
  font-size:12.5px;font-weight:700;
}
.zd-rv__reply{
  margin-top:10px;padding:9px 11px;border-radius:8px;font-size:13.5px;line-height:1.7;
  background:var(--amber-bg,rgba(245,165,36,.1));color:var(--text,#eceef5);
  border-left:3px solid var(--amber,#f5a524);
}
.zd-rv__reply b{color:var(--amber-hi,#ffc55c);margin-right:6px}
.zd-rv__reply em{display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--text-dim,#9aa2b8)}
@media (max-width:520px){
  .zd-rmask{padding:12px}
  .zd-rmask__box{padding:13px;max-height:90vh}
  .zd-rv__img{width:64px;height:64px}
  .zd-rvhead__s b{font-size:26px}
}


/* ==========================================================================
   V11 模板样式 —— 后台《布局与模板》选哪套，body 上就打哪个 data-tpl
   只换配色和气质，不动结构，所以原来填的内容一个字都不会少
   ========================================================================== */

/* ---------- 模板二：简约浅色 ---------- */
body[data-tpl='light']{
  --bg:#f5f7fb; --bg-2:#ffffff; --card:#ffffff; --card-2:#eef2f8;
  --line:rgba(15,23,42,.12); --line-2:rgba(15,23,42,.22);
  --ink:#101828; --ink-2:#4a5567; --ink-3:#8a94a6;
  --amber:#2563eb; --amber-2:#1d4ed8; --amber-bg:rgba(37,99,235,.08);
  --surface:var(--card); --text:var(--ink); --text-dim:var(--ink-2);
  --text-mute:var(--ink-3); --amber-hi:var(--amber);
}
body[data-tpl='light'] .top{background:rgba(255,255,255,.9)}
body[data-tpl='light'] .hero{background:linear-gradient(180deg,#e8efff 0%,var(--bg) 100%)}
body[data-tpl='light'] .note{background:rgba(37,99,235,.05)}
body[data-tpl='light'] .btn--p,
body[data-tpl='light'] .top__cta{color:#fff}
body[data-tpl='light'] .skel{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.28)}
body[data-tpl='light'] th{background:rgba(15,23,42,.03)}
body[data-tpl='light'] .ph__ph{background:rgba(15,23,42,.04)}

/* ---------- 模板三：暖木质感 ---------- */
body[data-tpl='wood']{
  --bg:#faf5ee; --bg-2:#ffffff; --card:#ffffff; --card-2:#f3ebe0;
  --line:rgba(74,52,30,.14); --line-2:rgba(74,52,30,.24);
  --ink:#2b2016; --ink-2:#6b5847; --ink-3:#9c8b78;
  --amber:#b5762e; --amber-2:#8c5718; --amber-bg:rgba(181,118,46,.10);
  --surface:var(--card); --text:var(--ink); --text-dim:var(--ink-2);
  --text-mute:var(--ink-3); --amber-hi:var(--amber);
}
body[data-tpl='wood'] .top{background:rgba(250,245,238,.92)}
body[data-tpl='wood'] .hero{background:linear-gradient(180deg,#efe3d2 0%,var(--bg) 100%)}
body[data-tpl='wood'] .note{background:rgba(181,118,46,.06)}
body[data-tpl='wood'] .btn--p,
body[data-tpl='wood'] .top__cta{color:#fff}
body[data-tpl='wood'] .skel{background:rgba(181,118,46,.12);border-color:rgba(181,118,46,.30)}
body[data-tpl='wood'] th{background:rgba(74,52,30,.04)}
body[data-tpl='wood'] .ph__ph{background:rgba(74,52,30,.05)}

/* ---------- 新增区块用到的样式 ---------- */
.grid--2{grid-template-columns:1fr 1fr}
@media (max-width:860px){ .grid--2{grid-template-columns:1fr} }

.zd-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.zd-split__txt .sec__t{margin-top:10px}
@media (max-width:860px){ .zd-split{grid-template-columns:1fr;gap:20px} }

/* 通栏背景图：只有真传了背景图才加这个类，没图就不加（免得白底白字） */
.zd-banner{
  background-color:#12161d;background-size:cover;background-position:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.zd-banner .sec__t{color:#fff}
.zd-banner .sec__d{color:rgba(255,255,255,.88)}
.zd-banner .btn--g{color:#fff;border-color:rgba(255,255,255,.5)}


/* ==========================================================================
   V11 新增：自己加的页面（/p/xxx）的大标题条
   ========================================================================== */
.zd-pagehead{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
  padding:46px 0 34px;
}
.zd-pagehead__in{max-width:820px}
.zd-pagehead__t{
  margin:0;font-size:clamp(26px,4.4vw,42px);line-height:1.25;font-weight:800;
  letter-spacing:.5px;color:var(--ink);
}
.zd-pagehead__t em{font-style:normal;color:var(--amber)}
@media (max-width:860px){ .zd-pagehead{padding:32px 0 24px} }

/* ==========================================================================
   V16 新增：站内搜索（顶栏按钮 + 页内浮层 + 结果行）
   配色一律走语义别名 --surface / --text / --text-dim / --amber-hi，
   三套模板（深色 / 浅色 / 木纹）自动跟着变，不用各写一遍。
   ========================================================================== */
.zd-sbtn{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:7px 12px;border-radius:999px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  font-size:13.5px;font-weight:600;transition:border-color .22s,color .22s;
}
.zd-sbtn:hover{border-color:var(--amber);color:var(--amber)}
.zd-sbtn svg{flex:0 0 auto;display:block}

.zd-smask{
  position:fixed;inset:0;z-index:9200;display:none;
  align-items:flex-start;justify-content:center;padding:9vh 24px 24px;
  background:rgba(4,4,7,.84);
}
.zd-smask.is-on{display:flex}
.zd-smask__box{
  width:100%;max-width:660px;max-height:78vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
}
.zd-smask__bar{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.zd-smask__ic{flex:0 0 auto;display:grid;place-items:center;color:var(--ink-3)}
.zd-smask__bar input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:15.5px;color:var(--ink);
}
.zd-smask__bar input::placeholder{color:var(--ink-3)}
.zd-smask__bar input::-webkit-search-cancel-button{-webkit-appearance:none}
.zd-smask__sug{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:11px 14px 0}
.zd-smask__sugt{font-size:12px;color:var(--ink-3)}
.zd-smask__sug{
  padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font-size:12.5px;
}
.zd-smask__sug:hover{border-color:var(--amber);color:var(--amber)}
.zd-smask__body{overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 14px}
.zd-smask__tip{margin:6px 0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.zd-smask__tip a{color:var(--amber)}
.zd-smask__more{margin:12px 0 0;font-size:13px;color:var(--ink-2);text-align:center}
.zd-smask__more a{color:var(--amber);text-decoration:none}
.zd-smask__more a:hover{text-decoration:underline}
.zd-smask__foot{padding:10px 14px;border-top:1px solid var(--line);text-align:center}
.zd-smask__foot a{font-size:13.5px;color:var(--amber);text-decoration:none}
.zd-smask__foot a:hover{text-decoration:underline}

.zd-sgrp__t{
  margin:4px 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.zd-sgrp__t+.zd-slist{margin-bottom:16px}
.zd-slist{display:grid;gap:8px}
.zd-sres{
  display:flex;align-items:center;gap:12px;padding:10px 12px;text-decoration:none;
  border:1px solid var(--line);border-radius:10px;transition:border-color .22s;
}
.zd-sres:hover{border-color:var(--amber)}
.zd-sres__ico{
  width:42px;height:42px;flex:0 0 42px;border-radius:8px;overflow:hidden;
  display:grid;place-items:center;background:var(--card-2);color:var(--ink-3);
}
.zd-sres__ico img{width:100%;height:100%;object-fit:cover;display:block}
.zd-sres__b{flex:1;min-width:0}
.zd-sres__b b{
  display:block;font-size:14.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.zd-sres__b i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--ink-2)}
.zd-sres__p{flex:0 0 auto;text-align:right}
.zd-sres__p b{display:block;font-size:14.5px;font-weight:800;color:var(--amber)}
.zd-sres__p i{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--ink-3)}

/* 搜索页（整页结果） */
.zd-srhead{padding:38px 0 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%)}
.zd-srhead__t{margin:0;font-size:clamp(22px,3.4vw,32px);line-height:1.3;font-weight:800;color:var(--ink)}
.zd-srhead__t em{font-style:normal;color:var(--amber)}
.zd-srhead__d{margin-top:9px;font-size:14px;color:var(--ink-2)}
.zd-srform{display:flex;gap:9px;margin-top:18px;max-width:560px}
.zd-srform input{
  flex:1;min-width:0;padding:11px 13px;border-radius:9px;font-family:inherit;font-size:15px;
  border:1px solid var(--line-2);background:var(--card-2);color:var(--ink);
}
.zd-srform input:focus{outline:0;border-color:var(--amber)}
.zd-srbody{padding:28px 0 8px}

@media (max-width:860px){
  .zd-sbtn{padding:7px 9px}
  .zd-sbtn__t{display:none}
}
@media (max-width:520px){
  .zd-smask{padding:5vh 12px 12px}
  .zd-smask__box{max-height:86vh}
  .zd-sres__ico{width:36px;height:36px;flex:0 0 36px}
  .zd-srform{flex-direction:column}
}

/* ================= V52 前台配色（买家端） =================
   老板在后台「前台展示 → 前台配色」选一套，整站前台跟着变。
   ⚠️ 用独立的 data-theme，不碰 data-tpl —— data-tpl 是「页面模板」在用的
   （cms.js / page.js 会按后台保存的模板 setAttribute / removeAttribute），
   两套挤在一个属性上，后跑的那个会把前一个盖掉，配色就时灵时不灵。
   这一整块放在文件最后：同为 body[属性] 选择器时，写在后面的赢。 */
body[data-theme='dark']{
  --bg:#0e1015; --bg-2:#15181f; --card:#1a1e27; --card-2:#20242e;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --ink:#e9ecf1; --ink-2:#a8b0bd; --ink-3:#6f7889;
  --amber:#e5a53a; --amber-2:#b8730a; --amber-bg:rgba(229,165,58,.10);
  --surface:var(--card); --text:var(--ink); --text-dim:var(--ink-2);
  --text-mute:var(--ink-3); --amber-hi:var(--amber);
}
body[data-theme='dark'] .top{background:rgba(14,16,21,.92)}
body[data-theme='dark'] .hero{background:linear-gradient(180deg,#191d26 0%,var(--bg) 100%)}
body[data-theme='dark'] .note{background:rgba(229,165,58,.07)}
body[data-theme='dark'] th{background:rgba(255,255,255,.03)}
body[data-theme='dark'] .ph__ph{background:rgba(255,255,255,.04)}

body[data-theme='light']{
  --bg:#f5f7fb; --bg-2:#ffffff; --card:#ffffff; --card-2:#eef2f8;
  --line:rgba(15,23,42,.12); --line-2:rgba(15,23,42,.22);
  --ink:#101828; --ink-2:#4a5567; --ink-3:#8a94a6;
  --amber:#2563eb; --amber-2:#1d4ed8; --amber-bg:rgba(37,99,235,.08);
  --surface:var(--card); --text:var(--ink); --text-dim:var(--ink-2);
  --text-mute:var(--ink-3); --amber-hi:var(--amber);
}
body[data-theme='light'] .top{background:rgba(255,255,255,.9)}
body[data-theme='light'] .hero{background:linear-gradient(180deg,#e8efff 0%,var(--bg) 100%)}
body[data-theme='light'] .note{background:rgba(37,99,235,.05)}
body[data-theme='light'] .btn--p,
body[data-theme='light'] .top__cta{color:#fff}
body[data-theme='light'] th{background:rgba(15,23,42,.03)}
body[data-theme='light'] .ph__ph{background:rgba(15,23,42,.04)}

body[data-theme='wood']{
  --bg:#faf5ee; --bg-2:#ffffff; --card:#ffffff; --card-2:#f3ebe0;
  --line:rgba(74,52,30,.14); --line-2:rgba(74,52,30,.24);
  --ink:#2b2016; --ink-2:#6b5847; --ink-3:#9c8b78;
  --amber:#b5762e; --amber-2:#8c5718; --amber-bg:rgba(181,118,46,.10);
  --surface:var(--card); --text:var(--ink); --text-dim:var(--ink-2);
  --text-mute:var(--ink-3); --amber-hi:var(--amber);
}
body[data-theme='wood'] .top{background:rgba(250,245,238,.92)}
body[data-theme='wood'] .hero{background:linear-gradient(180deg,#efe3d2 0%,var(--bg) 100%)}
body[data-theme='wood'] .note{background:rgba(181,118,46,.06)}
body[data-theme='wood'] .btn--p,
body[data-theme='wood'] .top__cta{color:#fff}
body[data-theme='wood'] th{background:rgba(74,52,30,.04)}
body[data-theme='wood'] .ph__ph{background:rgba(74,52,30,.05)}

body[data-theme='tech']{
  --bg:#0b1220; --bg-2:#111c31; --card:#131e33; --card-2:#18243c;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --ink:#e6eefc; --ink-2:#9fb2d0; --ink-3:#6b7f9e;
  --amber:#38bdf8; --amber-2:#0ea5e9; --amber-bg:rgba(56,189,248,.12);
  --surface:var(--card); --text:var(--ink); --text-dim:var(--ink-2);
  --text-mute:var(--ink-3); --amber-hi:var(--amber);
}
body[data-theme='tech'] .top{background:rgba(11,18,32,.92)}
body[data-theme='tech'] .hero{background:linear-gradient(180deg,#12233d 0%,var(--bg) 100%)}
body[data-theme='tech'] .note{background:rgba(56,189,248,.07)}
body[data-theme='tech'] .btn--p,
body[data-theme='tech'] .top__cta{color:#04121f}
body[data-theme='tech'] th{background:rgba(255,255,255,.04)}
body[data-theme='tech'] .ph__ph{background:rgba(255,255,255,.05)}

body[data-theme='jade']{
  --bg:#0f1a17; --bg-2:#14211d; --card:#16241f; --card-2:#1c2c26;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --ink:#e3f0ea; --ink-2:#9db9ad; --ink-3:#6b8579;
  --amber:#34d399; --amber-2:#0f9c72; --amber-bg:rgba(52,211,153,.12);
  --surface:var(--card); --text:var(--ink); --text-dim:var(--ink-2);
  --text-mute:var(--ink-3); --amber-hi:var(--amber);
}
body[data-theme='jade'] .top{background:rgba(15,26,23,.92)}
body[data-theme='jade'] .hero{background:linear-gradient(180deg,#16302a 0%,var(--bg) 100%)}
body[data-theme='jade'] .note{background:rgba(52,211,153,.07)}
body[data-theme='jade'] .btn--p,
body[data-theme='jade'] .top__cta{color:#04170f}
body[data-theme='jade'] th{background:rgba(255,255,255,.04)}
body[data-theme='jade'] .ph__ph{background:rgba(255,255,255,.05)}

body[data-theme='rose']{
  --bg:#180d10; --bg-2:#1f1116; --card:#23141a; --card-2:#2b1a20;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --ink:#f5e9ec; --ink-2:#c0a3aa; --ink-3:#8e737b;
  --amber:#f43f5e; --amber-2:#be123c; --amber-bg:rgba(244,63,94,.12);
  --surface:var(--card); --text:var(--ink); --text-dim:var(--ink-2);
  --text-mute:var(--ink-3); --amber-hi:var(--amber);
}
body[data-theme='rose'] .top{background:rgba(24,13,16,.92)}
body[data-theme='rose'] .hero{background:linear-gradient(180deg,#33161e 0%,var(--bg) 100%)}
body[data-theme='rose'] .note{background:rgba(244,63,94,.07)}
body[data-theme='rose'] .btn--p,
body[data-theme='rose'] .top__cta{color:#fff}
body[data-theme='rose'] th{background:rgba(255,255,255,.04)}
body[data-theme='rose'] .ph__ph{background:rgba(255,255,255,.05)}