/* ============================================================================
   雅之林® 前台 v14 · 设计系统（唯一源）        2026-09-29 依参考视频全面重做
   ----------------------------------------------------------------------------
   ⛔ 页面里不再写死颜色/圆角/字号，一律走本文件的令牌与组件。
   🔴 主色＝**栏目色**（下午定稿的四色轴，每页 html[data-tone] 自动取）；柠檬绿已退场，不再当主色。
   🔴 两条硬规则（实测对比度，不是感觉）：
     ① 白字压主色 6.86–10.69:1 ✅｜主色当文字压暖白 6.27–9.77:1 ✅
     ② **墨绿黑深块上要用 --brand-lt（主色浅档）**，深色主色压在深块上读不出来
     ③ 品牌金 #C9A24A 不上浅底（压暖白 2.19:1）⇒ 金只出现在深块上
   🔴 层级靠「明度差」不靠阴影：展示台(黑) → 页底(暖白) → 卡(更白) → 深块(墨绿黑)
   ========================================================================== */

/* ============================== 令牌 ============================== */
:root{
  /* 层：展示台 / 页底 / 卡 / 浅块 / 深块 */
  --stage:#E7EAE3;          /* 手机列以外（桌面展示台）· 2026-09-29 用户：不要纯黑（太像夜间模式） */
  --bg:#F5F5F0;             /* 页面底 · 暖白 */
  --card:#FDFDFD;           /* 卡片 · 更白 */
  --card2:#F3F6EE;          /* 次要卡 · 浅绿 */
  --deep:#131A17;           /* 墨绿黑深块（数据块/反白条） */
  --deep2:#1C2621;
  /* 文字 */
  --ink:#101413; --ink2:#2A3130; --sub:#616966; --mute:#6E7773;
  --on-deep:#EDEFEA; --on-deep-sub:#A9B3AE;
  /* 线 */
  --line:#E4E7E0; --line2:#EDEFE9; --line-d:rgba(255,255,255,.10);
  /* 强调：**主色＝栏目色**（2026-09-29 下午定稿的四色轴），每页按 html[data-tone] 自动取。
     🔴 实测对比度（白字压主色 6.86–10.69:1 ✅；主色当文字压暖白 6.27–9.77:1 ✅）
     --brand-lt 是主色的**浅档**，专给墨绿黑深块上的文字/图标用（深色主色压深块读不出来）。 */
  --brand:#002FA7; --brand-ink:#FFFFFF; --brand-soft:#EDF3FF; --brand-line:#D9E4FF; --brand-lt:#9DB6FF;
  /* 语义色（不动） */
  --ok:#0E7A4A; --warn:#9A6612; --bad:#D1342C; --info:#5B5BD6;
  --gold:#C9A24A;           /* 品牌金：只上深块 */
  /* 形状 */
  --r28:28px; --r22:22px; --r16:16px; --r12:12px; --r999:999px;
  /* 动效：先快后慢 + 轻微过冲 */
  --t-fast:160ms; --t:240ms; --t-slow:380ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.42,.5,1);
  /* 排版 */
  --f:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
}

/* ── 四栏目主色（下午定稿的色轴；顺序＝主次：心脑血管(商品中心) > 免疫力 > 血糖 > 痛风）── */
html[data-tone="home"] { --brand:#002FA7; --brand-ink:#FFFFFF; --brand-soft:#EDF3FF; --brand-line:#D9E4FF; --brand-lt:#9DB6FF; }
html[data-tone="clock"]{ --brand:#4A3B8F; --brand-ink:#FFFFFF; --brand-soft:#F1EEFA; --brand-line:#E2DCF3; --brand-lt:#C4B8F5; }
html[data-tone="admin"]{ --brand:#8E2361; --brand-ink:#FFFFFF; --brand-soft:#F9ECF3; --brand-line:#EFD6E3; --brand-lt:#F0A9CD; }
html[data-tone="me"]   { --brand:#A82A3C; --brand-ink:#FFFFFF; --brand-soft:#FBECEE; --brand-line:#F2D5D8; --brand-lt:#F0A6AD; }
/* 深块（墨绿黑）上的强调色：不能用主色深色，改用浅档 */
.kpi .more, .card.deep .more{ color:var(--brand-lt) }
.kpi .hint b{ color:var(--brand-lt) }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  background-color:var(--stage);
  background-image:linear-gradient(rgba(16,20,19,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,20,19,.05) 1px,transparent 1px);
  background-size:36px 36px;
}
body{
  margin:0 auto; max-width:430px; min-height:100vh; background:var(--bg); color:var(--ink);
  font:400 14px/1.7 var(--f);
  box-shadow:0 0 0 1px rgba(16,20,19,.10), 0 18px 44px -16px rgba(16,20,19,.30);
  padding-bottom:0;   /* 2026-09-29 用户：落款要「到底」，底部不要留白；改由 .ux-footer 自己吃下底栏高度 */
  text-size-adjust:100%; -webkit-text-size-adjust:100%;
}
@media (max-width:480px){ body{box-shadow:none} }
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ============================== 排版 ============================== */
.kicker{font:800 11px/1 var(--f);letter-spacing:.16em;color:var(--sub);text-transform:uppercase}
.kicker b{color:var(--brand)}   /* 🔴 2026-09-30 修正：原 --brand-ink 白字 ⇒ 首屏白卡上隐形（三页同中）；主色压暖白 6.27–9.77:1 ✅ */
.h1{font:900 27px/1.24 var(--f);letter-spacing:-.5px;margin:8px 0 4px}
.h1 u{text-decoration:none;box-shadow:inset 0 -.32em 0 var(--brand)}
.h2{font:900 17px/1.3 var(--f);letter-spacing:-.2px;margin:0}
.h3{font:900 14.5px/1.4 var(--f);margin:0}
.sub{font:700 12px/1.6 var(--f);color:var(--sub)}
.en{font:800 10.5px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}
.num{font:900 34px/1.05 var(--f);letter-spacing:-1.4px;font-variant-numeric:tabular-nums}
.num small{font:800 14px/1 var(--f);letter-spacing:0;margin-left:6px;color:var(--on-deep-sub)}

/* ============================== 布局 ============================== */
.wrap{padding:0 14px}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.stack{display:flex;flex-direction:column;gap:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.g2>*{min-width:0}

/* 顶栏：文字商标（品牌规范：无图形 logo） */
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(245,245,240,.86);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.topbar .in{height:52px;padding:0 14px;display:flex;align-items:center;gap:10px}
.logo{font:900 15px/1 var(--f);letter-spacing:.2px}
.logo em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--sub);margin-left:6px}
.iconbtn{width:34px;height:34px;border-radius:var(--r12);display:grid;place-items:center;color:var(--ink2);
  border:1px solid var(--line);background:var(--card)}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ============================== 组件 ============================== */
.card{background:var(--card);border-radius:var(--r22);padding:14px}
.card.line{border:1px solid var(--line)}
.card.deep{background:var(--deep);color:var(--on-deep)}
.card.soft{background:var(--card2)}

/* 数据块（视频里那种墨绿黑块） */
.kpi{background:var(--deep);color:var(--on-deep);border-radius:var(--r22);padding:16px 15px 15px}
.kpi .lab{font:800 9.5px/1 var(--f);letter-spacing:.16em;color:var(--on-deep-sub);text-transform:uppercase}
.kpi .hint{font:700 11.5px/1.5 var(--f);color:var(--on-deep-sub);margin-top:5px}
.kpi .hint b{color:var(--brand-lt)}

/* 列表行 */
.item{display:flex;align-items:center;gap:11px;background:var(--card);border-radius:var(--r16);padding:11px 12px}
.item .ic{width:36px;height:36px;flex:none;border-radius:var(--r12);display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-ink);font-size:16px;font-weight:900}
.item .t{flex:1;min-width:0}
.item .t b{display:block;font:900 13.5px/1.35 var(--f)}
.item .t i{display:block;font:600 11.5px/1.5 var(--f);font-style:normal;color:var(--sub)}
.item .r{font:900 13.5px/1 var(--f);white-space:nowrap;font-variant-numeric:tabular-nums}
.item .r em{font-style:normal;font:700 10.5px/1 var(--f);color:var(--sub);margin-left:3px}
.item:active{transform:scale(.985)}

/* ══ 官方主站落款（唯一源＝`ai-advisor/deploy/shared/footer.css` + `run_deploy.py:build_footer()`）
   类名与结构**与官方完全一致**，只把字号/字距接到 v14 的排版令牌上（用户 2026-09-29：
   「底部的落款要跟官方主站的落款一样，根据现在的页面对字体做相应调整」）。
   官方原值：底 #002FA7／内边距 34 20 30／导航 13／版本 13@800／备案 13／版权 12@.6／免责 11@.45／hover 金 #C9A24A。
   🔴 用户 2026-09-29 追加（四页统一）：
     ① 「落款需要蓝色」—— 底就是克莱因蓝 #002FA7，**不要改色**；
     ② 「©是在右边，不是右上角」—— 见下面 `a sup` 那条，⚠️ 标记仍是官方源的 `<sup>©</sup>`
        （**逐字保持同构**），只把**渲染**改成基线对齐；
     ③ 「收窄一点」＋「红框这部分去掉」—— 底部原本 `26px + 92px`＝118px，
        其中 92px 是给底栏预留的，但底栏实测只占 62+12＝**74px** ⇒
        多出来的 44px 就是用户圈红的那条**空白蓝**。现值＝`12px + 74px`＝86px
        （免责底 → 底栏顶留 12px 呼吸），同时把内部节奏一起收紧。 */
/* 🔴 落款底色＝**按站令牌 --foot**（用户 2026-09-29：「底部的落款改成紫色」→ 打卡站）。
   ⛔ 不能直接用 var(--brand)：深色主题会把 --brand 换成浅档（--brand-lt），
      落款会变成一片淡色。--foot 不参与主题换档，各站独立。
   官方 footer.css 全站是 #002FA7；打卡站按用户最新要求走自己的紫罗兰。 */
:root{ --foot:#002FA7 }
html[data-tone="clock"]{ --foot:#4A3B8F }
html[data-tone="admin"]{ --foot:#8E2361 }
html[data-tone="me"]{ --foot:#A82A3C }
.ux-footer{ background:var(--foot); color:#fff; padding:26px 18px calc(12px + 74px); font:400 12.5px/1.6 var(--f); position:relative }
.ux-footer-inner{ max-width:1000px; margin:0 auto }
.ux-footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px 16px; margin:0 0 13px }
.ux-footer-nav a{ color:rgba(255,255,255,.92); text-decoration:none; font-size:12.5px; font-weight:600; letter-spacing:.2px;
  transition:color .2s var(--ease) }
.ux-footer-nav a:hover{ color:#C9A24A }
/* © 一律落在右边同一行（用户 2026-09-29：「©是在右边，不是右上角！」）。
   ⚠️ 落款里的标记保持官方源的 `<sup>©</sup>`（**与官方源逐字同构**，只改渲染）；
      快捷入口「商学院」方块、以及它的弹窗标题，都用同一条规则 ⇒ 全站 © 只有这一种长相。
   🔴 弹窗那条选择器不能漏：弹窗的 <b id="jName"> 在 `.jump .box` 里、**不在** `.item` 里，
      漏了它就退回 UA 默认的 `vertical-align:super`（实测 17.5px 上标，还会把弹窗**撑高 7px**
      ⇒ 弹窗与卡片不再等比，FLIP 起始帧失配）。
   取值＝官方主站另一处导航的写法：font-size:.85em + vertical-align:baseline + margin-left:2px。 */
.ux-footer-nav a sup, .item b sup, .jump .box b sup{
  font-size:.85em; line-height:1; vertical-align:baseline; margin-left:2px }
.ux-footer-row{ display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:nowrap;
  margin:0 0 8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.18); white-space:nowrap }
.ux-footer-version{ font-weight:800; color:#fff; font-size:12.5px; letter-spacing:.3px }
.ux-footer-record{ color:rgba(255,255,255,.85); font-size:12.5px }
.ux-footer-copy{ color:rgba(255,255,255,.6); font-size:11.5px; margin-bottom:8px; text-align:center; white-space:nowrap }
.ux-footer-disclaimer{ color:rgba(255,255,255,.45); font-size:10.5px; max-width:720px; margin:0 auto;
  line-height:1.6; text-align:center; white-space:normal; overflow-wrap:anywhere }
.ux-footer-tongji{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:flex-end;
  gap:2px; height:14px; color:rgba(255,255,255,.55); text-decoration:none }
.ux-footer-tongji:hover{ opacity:.85 }
.ux-footer-tongji svg{ width:16px; height:16px }

/* 底部小浮层（福利区运费用：卡上不写运费，点开/结算时才提示） */
.sheet{ position:fixed; inset:0; z-index:125; opacity:0; pointer-events:none; transition:opacity 200ms var(--ease) }
.sheet.on{ opacity:1; pointer-events:auto }
.sheet .mask{ position:absolute; inset:0; background:rgba(16,20,19,.32); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px) }
.sheet .box{ position:absolute; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,12px);
  width:min(406px, calc(100% - 24px)); background:var(--card); border-radius:var(--r22); padding:16px 16px 14px;
  box-shadow:0 20px 50px -20px rgba(16,20,19,.45); transition:transform 300ms var(--spring) }
.sheet.on .box{ transform:translate(-50%,0) }
.sheet .box b{ display:block; font:900 14.5px/1.4 var(--f) }
.sheet .box p{ margin:6px 0 13px; font:600 12.5px/1.7 var(--f); color:var(--sub) }
.sheet .box p b{ display:inline; font-weight:900; color:var(--brand) }

/* 主色跳转窗（2026-09-29 用户要求：点快捷入口先弹蓝色窗口，再自动跳转）
   · 遮罩 + 居中方块，从 0.86 弹到 1（spring），主色底白字
   · 进度线用 CSS 动画循环，绝不依赖 JS 计时（JS 只管开与关）
   ⛔ 每次跳转都必须有终点：JS 里 setTimeout 到点就 location.href，不存在卡住。 */
.jump{ position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  background:rgba(16,20,19,.30); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity 200ms var(--ease) }
.jump.on{ opacity:1; pointer-events:auto }
/* 🔴 用户 2026-09-29：「方块的样式，要跟原来的一样，只是同格式放大！！！」
   ⇒ 弹窗**不做第二套设计**，就是快捷入口卡片 .item 的**同一套格式整体放大 --k 倍**：
      底色 / 圆角 / 内边距 / 图标块尺寸与圆角 / 字号行高 全部由同一个 --k 等比推出。
      等比的好处是「起始帧」天然等于卡片本身（scale = 卡片宽 ÷ 窗宽），
      看起来就是这张卡被抬起来放大 —— 而不是另一块东西飞过来。
   ⛔ 曾经做过「蓝底白字、图标居中、文字居中」的版本，与卡片不是一套格式，已被否。 */
.jump .box{ --k:1.45;
  width:calc(196px * var(--k));
  background:var(--card); color:var(--ink);
  border-radius:calc(var(--r16) * var(--k));
  padding:calc(13px * var(--k)) calc(12px * var(--k));
  display:flex; flex-direction:column; align-items:flex-start;
  gap:calc(8px * var(--k));
  transform-origin:center; transform:none; opacity:1;
  transition:transform 340ms var(--spring), opacity 260ms var(--ease) }
.jump .box .ic{ width:calc(36px * var(--k)); height:calc(36px * var(--k)); flex:none;
  border-radius:calc(var(--r12) * var(--k)); background:var(--card2); color:var(--ink);
  display:grid; place-items:center; font:900 calc(16px * var(--k))/1 var(--f) }
.jump .box b{ display:block; font:900 calc(14.5px * var(--k))/calc(20.3px * var(--k)) var(--f);
  letter-spacing:.2px }
@keyframes jumpgo{ from{ transform:translateX(-105%) } to{ transform:translateX(240%) } }

/* 商品图（真实品牌图，独立文件放 img/，不内联） */
.pimg{position:relative;aspect-ratio:4/3;border-radius:var(--r16);overflow:hidden;background:var(--card2)}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pimg .pill{position:absolute;left:9px;top:9px;background:rgba(253,253,253,.92);color:var(--brand);
  font:800 10.5px/1 var(--f);padding:5px 9px;border-radius:var(--r999);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* 数据块 · 主色底白字（2026-09-29 用户要求试效果：原来用墨绿黑） */
.kpi.brand{ background:var(--brand); color:#fff }
.kpi.brand .lab{ color:rgba(255,255,255,.82) }
.kpi.brand .hint{ color:rgba(255,255,255,.88) }
.kpi.brand .hint b{ color:#fff; font-weight:900 }
.kpi.brand .num small{ color:rgba(255,255,255,.86) }
.kpi.brand .more{ color:#fff }
/* 🔴 2026-09-30 修正（三页同中）：dark 主题把 --brand 换成浅档 ⇒ .kpi.brand 变浅粉/浅蓝底+白字，读不清。
   按本文件规则「深块上强调用 --brand-lt」：dark 下整块回深底（deep2），强调/点缀走 --brand（此时已是浅档）。 */
html[data-theme="dark"] .kpi.brand{ background:var(--deep2); color:var(--on-deep) }
html[data-theme="dark"] .kpi.brand .lab{ color:var(--on-deep-sub) }
html[data-theme="dark"] .kpi.brand .hint{ color:var(--on-deep-sub) }
html[data-theme="dark"] .kpi.brand .hint b{ color:var(--brand) }
html[data-theme="dark"] .kpi.brand .num small{ color:var(--on-deep-sub) }
html[data-theme="dark"] .kpi.brand .more{ color:var(--brand) }
html[data-theme="dark"] .kpi.brand .exp p{ color:var(--on-deep) }
html[data-theme="dark"] .kpi.brand .exp p + p{ color:var(--on-deep-sub) }

/* 紧凑商品卡：一行两个（用户要求：不要大图） */
.pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
.pcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r16);
  padding:8px; display:flex; flex-direction:column; gap:7px; min-width:0 }
.pcard .pimg{ aspect-ratio:1/1; border-radius:var(--r12); background:var(--card2);
  position:relative; overflow:hidden }
.pcard .pimg img{ width:100%; height:100%; object-fit:cover; display:block }
.pcard .pimg .pill{ position:absolute; left:6px; top:6px; background:rgba(253,253,253,.92);
  color:var(--brand); font:800 9.5px/1 var(--f); padding:4px 7px; border-radius:var(--r999) }
.pcard h3{ font:900 12.5px/1.35 var(--f); margin:0; min-height:34px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.pcard .spec{ font:600 10.5px/1.4 var(--f); color:var(--sub); margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pcard .pr{ display:flex; align-items:baseline; gap:5px; margin-top:auto }
.pcard .pr b{ font:900 15px/1 var(--f); font-variant-numeric:tabular-nums }
.pcard .pr s{ font:700 10.5px/1 var(--f); color:var(--mute); text-decoration:line-through }
.pcard:active{ transform:scale(.98) }

/* 胶囊标签（交互 10：选中放大 + 相邻让位） */
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;height:31px;padding:0 14px;border-radius:var(--r999);border:1px solid var(--line);
  background:var(--card);color:var(--sub);font:800 12px/29px var(--f);white-space:nowrap;
  transition:transform var(--t) var(--spring),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.chip[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);transform:scale(1.06)}
.chip:active{transform:scale(.95)}

/* 按钮 */
.cta{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:46px;
  border-radius:var(--r16);background:var(--brand);color:var(--brand-ink);font:900 14.5px/1 var(--f);
  transition:transform var(--t-fast) var(--ease);
}
.cta:active{transform:scale(.975)}
.cta.ghost{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.cta.dark{background:var(--deep);color:var(--on-deep)}

/* 进度条（交互 06：推进带回弹） */
.bar{height:6px;border-radius:var(--r999);background:var(--line2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r999);background:var(--brand);
  transition:width var(--t-slow) var(--spring)}

/* 文本展开（交互 05：展开后下方整体让位，而不是挤走已有内容） */
.exp{overflow:hidden;transition:height var(--t-slow) var(--ease)}
.exp[hidden]{display:block;height:0}
.more{font:800 11.5px/1 var(--f);color:var(--brand-ink);display:inline-flex;align-items:center;gap:4px;padding:4px 0}
.more svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;transition:transform var(--t) var(--ease)}
.more[aria-expanded="true"] svg{transform:rotate(180deg)}

/* 底部导航：液态玻璃悬浮胶囊（唯一源） */
#tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));
  width:min(406px, calc(100% - 24px));height:62px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;gap:4px;padding:5px;z-index:70;border-radius:24px;
  background:rgba(253,253,253,.84);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(255,255,255,.34),
             0 18px 40px -18px rgba(18,24,48,.40),0 2px 10px rgba(18,24,48,.08);
}
#tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-radius:19px;color:rgba(48,54,52,.70);font:700 10.5px/1.15 var(--f);transition:color var(--t) var(--ease)}
#tabbar a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tabbar a::before{content:"";position:absolute;inset:0;left:0;top:0;right:0;bottom:0;
  width:auto;height:auto;margin:0;transform:none;border-radius:19px;opacity:0;
  background:var(--brand-soft);transition:opacity var(--t) var(--ease)}
#tabbar a[aria-selected="true"]{color:var(--brand);font-weight:900}
#tabbar a[aria-selected="true"]::before{opacity:1;background:color-mix(in srgb,var(--brand) 18%,#FFFFFF)}
#tabbar a[aria-selected="true"] svg{transform:translateY(-1px) scale(1.06)}
#tabbar a>span{position:relative;z-index:1}
#tabbar a:active{transform:scale(.96)}

/* 主题圆扩散（交互 01：从触点铺满页面） */
#reveal{position:fixed;inset:0;z-index:90;pointer-events:none;
  clip-path:circle(0px at var(--rx,50%) var(--ry,50%));
  transition:clip-path 520ms var(--ease)}
html[data-theme="dark"]{--brand:var(--brand-lt);--brand-soft:#1E2430;--brand-line:#2A3340;
  --bg:#0B110F;--card:#131A17;--card2:#1B211F;--ink:#EDEFEA;--ink2:#D6D5D0;
  --sub:#A9B3AE;--mute:#8A938E;--line:#2A332E;--line2:#333B39;--deep:#050706;--on-deep:#EDEFEA}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .topbar{background:rgba(11,17,15,.86);border-bottom-color:var(--line)}
html[data-theme="dark"] .iconbtn,html[data-theme="dark"] .card,html[data-theme="dark"] .item{background:var(--card)}
html[data-theme="dark"] .chip{background:var(--card);color:var(--sub)}
html[data-theme="dark"] #tabbar{background:rgba(19,26,23,.88)}
html[data-theme="dark"] #tabbar a{color:rgba(237,239,234,.66)}