/* ═══════════════════════════════════════════════════════════════════════
   tokens.css —— 全站唯一设计令牌源（DIRECTIVE-04 U0 · 律 13）
   规则：① 本文件是全站唯一允许定义自定义属性的地方（critical.css 内联副本除外，
            构建期断言逐字节比对本块在 5 个出口的一致性）；
         ② 页面级 CSS 只允许 var(--*) 引用：裸色值 / 裸字号 / 裸间距 = 0 处；
         ③ 字阶 6 级（禁止 <12px 与半像素）；间距 8pt 网格 7 级；圆角三级制；
         ④ 语义分层：结构（bg/card/line）· 文字（ink 系）· 语义色（accent/ok/warn/err）
            · HTTP 方法色（docs 保留）· 扩展强调（图表/徽章，统一自 member/radar 旧值）；
         ⑤ --ink3 仅限装饰/占位/禁用态，不得承载正文（亮色下对比度 <4.5:1，U4-5 裁定）；
            --ink2 亮暗两态均 ≥4.5:1（#6e6e73 on #f5f5f7 ≈ 4.6；#98989d on #000 ≈ 5.5）。
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── 结构 ── */
  --bg:#f5f5f7; --bg2:#ffffff;
  --card:#ffffff; --card2:rgba(0,0,0,.03);
  --glass:rgba(255,255,255,.72); --glass2:rgba(255,255,255,.55);
  --line:rgba(0,0,0,.09); --line2:rgba(0,0,0,.16);
  /* ── 文字 ── */
  --ink:#1d1d1f; --ink2:#6e6e73; --ink3:#86868b; /* ink3=装饰/禁用专用（见头注⑤） */
  /* ── 语义色 ── */
  --accent:#0071e3; --accent2:#5e5ce6;
  --ok:#34c759; --warn:#ff9f0a; --err:#ff3b30;
  /* 文本安全色（P54 · U4-5）：语义色直接作文字在亮色下不足 4.5:1 —— 文字一律用 *-ink；
     基础色仅用于边框/背景/图形（装饰通道）。亮色 #1a7f37≈4.9 / #b25000≈4.9 / #d70015≈4.9 on #f5f5f7 */
  --ok-ink:#166b2e; --warn-ink:#a34a00; --err-ink:#c00013; --accent-ink:#0060cc; --accent2-ink:#4b49c9;
  /* ── HTTP 方法色（docs 保留，归入语义层）── */
  --get:#34c759; --post:#0a84ff; --put:#ff9f0a; --del:#ff3b30;
  /* ── 扩展强调（图表/徽章；统一自 member/radar 旧值，全站点同名同值）── */
  --blue:#0a84ff; --cyan:#32ade6; --purple:#bf5af2; --gold:#ffd60a; --orange:#ff9f0a;
  --on-accent:#ffffff; --scrim:rgba(0,0,0,.35); --shade-base:#000000; --shade-inv:#ffffff;
  /* 渐变/徽章扩展层（统一自 member 旧一次性色值；G5 重设计时可直接换这五个 token） */
  --grad-a:#4f46e5; --grad-b:#7c3aed; --grad-c:#ec4899; --grad-d:#0e7490; --gold-deep:#d97706;
  /* ── 字阶（U1：6 级，禁 <12px 与半像素）+ 行高配套 ── */
  --fs-xs:12px;  /* 辅助/时间戳/徽章 */
  --fs-sm:14px;  /* 表格正文/表单/次级 */
  --fs-md:17px;  /* 正文/卡片内容（Apple 基准） */
  --fs-lg:21px;  /* 区块标题 */
  --fs-xl:26px;  /* 页面标题 */
  --fs-2xl:32px; /* 数据大字（配额水位/KPI） */
  --lh-tight:1.2; --lh:1.35; --lh-loose:1.5;
  /* ── 间距（U2：8pt 网格 7 级；卡片内边距 --s5、卡片间距 --s4、区块间距 --s6）── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* ── 圆角（采纳 radar 三级制；--r 为历史别名 = --r-md）── */
  --r-sm:9px; --r-md:16px; --r-lg:20px; --r:16px;
  /* ── 字体 / 阴影 ── */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 8px 32px rgba(0,0,0,.08);
  --shadow-sm:0 6px 20px rgba(0,0,0,.08);

  /* ── 流体展示字号（P54 收纳 docs 英雄区 clamp；仅供展示级大标题，正文严禁使用）── */
  --fs-fluid-sm:clamp(var(--fs-sm), 2.2vw, var(--fs-lg));
  --fs-fluid-lg:clamp(var(--fs-xl), 3.4vw, var(--fs-2xl));
  --fs-fluid-hero:clamp(40px, 6.4vw, 64px);
  /* ── SERP 预览仿真色（设置中心/docs 的 Google 搜索结果模拟卡专用 —— 品牌仿真，不属于站点语义色；暗色下保持浅色仿真）── */
  --serp-bg:#ffffff; --serp-ink:#202124; --serp-link:#1a0dab; --serp-url:#4d5156; --serp-fav-bg:#dfe1e5; --serp-fav-ink:#5f6368;
  /* ── 动效时长（U7：页签切换 120ms 淡入的唯一时长来源）── */
  --dur-tab:120ms;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000; --bg2:#1c1c1e;
    --card:#1c1c1e; --card2:rgba(255,255,255,.06);
    --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.09);
    --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18);
    --ink:#f5f5f7; --ink2:#98989d; --ink3:#6e6e73;
    --accent:#0a84ff; --accent2:#7d7aff;
    --ok:#30d158; --warn:#ff9f0a; --err:#ff453a;
    --ok-ink:#30d158; --warn-ink:#ff9f0a; --err-ink:#ff6961; --accent-ink:#6cb2ff; --accent2-ink:#9d9bff; /* 暗色 on #000 ≥5.9 */
    --get:#30d158; --post:#0a84ff; --put:#ff9f0a; --del:#ff453a;
    --blue:#0a84ff; --cyan:#64d2ff; --purple:#bf5af2; --gold:#ffd60a; --orange:#ff9f0a;
    --on-accent:#ffffff; --scrim:rgba(0,0,0,.5); --shade-base:#000000; --shade-inv:#ffffff;
    --grad-a:#6366f1; --grad-b:#8b5cf6; --grad-c:#f472b6; --grad-d:#22d3ee; --gold-deep:#f59e0b;
    --shadow:0 8px 32px rgba(0,0,0,.45);
    --shadow-sm:0 6px 20px rgba(0,0,0,.35);
  }
}
/* ═══ U4 · 无障碍基线（全站继承）═══ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:disabled,[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 点击目标 ≥24px（WCAG 2.2 SC 2.5.8）；表格行内操作 ≥32px 由 .tbl-actions 承载 */
button:not(.compact),[role="button"]:not(.compact){min-height:24px;min-width:24px}
.tbl-actions button,.tbl-actions [role="button"]{min-height:32px}
/* 未生效徽章：文字+图标双通道（不得仅靠颜色） */
.badge-off{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-xs);color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:0 var(--s2)}

.badge-off::before{content:"⊘";font-size:var(--fs-sm)}
/* ═══ U3 · 四态（骨架/空/错误/无权限）═══ */
@keyframes ax-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skl{position:relative;overflow:hidden;background:var(--card2);border-radius:var(--r-sm);min-height:1em}
.skl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 6%,transparent),transparent);background-size:200% 100%;animation:ax-shimmer 1.4s linear infinite}
@media (prefers-reduced-motion:reduce){.skl::after{animation:none;background:none}}
.skl-row{height:calc(var(--fs-sm) * var(--lh-loose));margin:var(--s2) 0}
.skl-title{height:calc(var(--fs-lg) * var(--lh-tight));width:40%;margin:var(--s3) 0}
.skl-card{height:96px;margin:var(--s3) 0}
.state-box{padding:var(--s7) var(--s5);text-align:center;color:var(--ink2)}
.state-box b{display:block;font-size:var(--fs-md);color:var(--ink);margin-bottom:var(--s2)}
.state-box .rid{font-family:var(--mono);font-size:var(--fs-xs);user-select:all;color:var(--ink2)}
.state-box button{margin-top:var(--s4);padding:var(--s2) var(--s4);border:0;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-size:var(--fs-sm);cursor:pointer}
.state-box button:hover{filter:brightness(1.08)}
/* ═══ U6 · 长表格（sticky 表头 + 斑马纹 + 数字列；member/radar 已有做法反哺全站）═══ */
.tbl-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:var(--r-md)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table thead th{position:sticky;top:0;z-index:2;background:var(--bg2);border-bottom:1px solid var(--line);box-shadow:inset 0 -1px 0 var(--line);text-align:left;padding:var(--s2) var(--s3);font-size:var(--fs-xs);color:var(--ink2);white-space:nowrap}
table tbody tr:nth-child(even){background:color-mix(in srgb,var(--ink) 3%,transparent)}
table td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
table td.num,table th.num{text-align:right;font-family:var(--mono)}
table tbody tr:first-child td{border-top:0}
/* 首列 sticky（U6-④）：背景必须不透明 —— inherit 在斑马纹/透明行下会透出滚动内容 */
.tbl-sticky-first td:first-child{background:var(--card);border-right:1px solid var(--line)}
.tbl-sticky-first tbody tr:nth-child(even) td:first-child{background:color-mix(in srgb,var(--ink) 3%,var(--card))}
.tbl-sticky-first tbody tr:hover td:first-child{background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.tbl-sticky-first th:first-child{background:var(--bg2);z-index:3}
@media (min-width:1200px){.tbl-sticky-first td:first-child,.tbl-sticky-first th:first-child{position:sticky;left:0}}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.34;animation:float 20s ease-in-out infinite}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-16vw;background:radial-gradient(circle,var(--grad-a),transparent 65%)}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-10vw;top:14vh;background:radial-gradient(circle,var(--grad-d),transparent 65%);animation-delay:-7s}
.aurora i:nth-child(3){width:40vw;height:40vw;left:26vw;bottom:-18vw;background:radial-gradient(circle,var(--grad-b),transparent 65%);animation-delay:-13s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-4vh) scale(1.08)}}
.wrap{max-width:1020px;margin:0 auto;padding:var(--s5) var(--s4) var(--s7)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:800;font-size:var(--fs-md);letter-spacing:.3px}
.brand-dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 14px var(--accent)}
.hello{font-size:var(--fs-xs);color:var(--ink2)}
.topbtns{display:flex;gap:var(--s2)}
.btn{border:1px solid var(--line);background:var(--glass);color:var(--ink);border-radius:11px;padding:var(--s2) var(--s3);font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:.2s;font-family:inherit;-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--glass2);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--grad-b));border-color:transparent;color:var(--on-accent);box-shadow:0 6px 20px color-mix(in srgb, var(--grad-a) 35%, transparent)}
.btn.gold{background:linear-gradient(135deg,var(--gold-deep),var(--gold-deep));border-color:transparent;color:var(--on-accent);box-shadow:0 6px 20px color-mix(in srgb, var(--gold-deep) 30%, transparent)}
.btn.small{padding:var(--s1) var(--s3);font-size:var(--fs-xs);border-radius:9px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);padding:var(--s4);margin-bottom:var(--s4);animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.lvl{padding:var(--s4);position:relative;overflow:hidden}
.lvl .track{font-size:var(--fs-xs);font-weight:800;letter-spacing:2.2px;text-transform:uppercase;opacity:1;margin-bottom:var(--s1)}
.lvl .num{font-size:var(--fs-2xl);font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.lvl .title{font-size:var(--fs-sm);font-weight:700;margin:var(--s1) 0 var(--s2)}
.lvl .bar{height:7px;border-radius:4px;background:color-mix(in srgb, var(--bg2) 9%, transparent);overflow:hidden}
.lvl .bar i{display:block;height:100%;border-radius:4px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.lvl .meta{font-size:var(--fs-xs);color:var(--ink2);margin-top:var(--s2);font-variant-numeric:tabular-nums}
.lvl.academy .track{color:var(--accent-ink)}.lvl.academy .num{color:var(--accent-ink)}.lvl.academy .bar i{background:linear-gradient(90deg,var(--blue),var(--blue))}
.lvl.community .track{color:var(--accent2-ink)}.lvl.community .num{color:var(--accent2-ink)}.lvl.community .bar i{background:linear-gradient(90deg,var(--purple),var(--grad-c))}
.lvl.overall .track{color:var(--warn-ink)}.lvl.overall .num{color:var(--warn-ink)}.lvl.overall .bar i{background:linear-gradient(90deg,var(--warn),var(--gold))}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.stat{padding:var(--s3);text-align:center}
.stat b{display:block;font-size:var(--fs-lg);font-variant-numeric:tabular-nums;color:var(--ink)}
.stat span{font-size:var(--fs-xs);color:var(--ink2)}
.badges{display:flex;gap:var(--s3);flex-wrap:wrap}
.badge{width:96px;text-align:center;padding:var(--s3) var(--s2);border-radius:14px;background:color-mix(in srgb, var(--bg2) 3%, transparent);border:1px solid var(--line);transition:.25s}
.badge .ico{font-size:var(--fs-xl);filter:grayscale(1);opacity:.35;transition:.25s}
.badge .nm{font-size:var(--fs-xs);color:var(--ink3);margin-top:var(--s1);line-height:1.3}
.badge.on{border-color:color-mix(in srgb, var(--gold) 50%, transparent);background:color-mix(in srgb, var(--gold) 7%, transparent);box-shadow:0 4px 18px color-mix(in srgb, var(--gold) 14%, transparent)}
.badge.on .ico{filter:none;opacity:1;transform:scale(1.06)}
.badge.on .nm{color:var(--warn-ink);font-weight:600}
.tabs{display:flex;gap:var(--s2);margin:var(--s4) 0 var(--s3)}
.tab{padding:var(--s2) var(--s4);border-radius:12px;font-size:var(--fs-sm);font-weight:700;color:var(--ink2);gap:7px;cursor:pointer;border:1px solid transparent;transition:.2s;-webkit-tap-highlight-color:transparent}
.tab.on{color:var(--accent-ink);background:color-mix(in srgb, var(--accent) 12%, var(--card));border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.course{padding:var(--s4);margin-bottom:var(--s3)}
.course .ct{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.course h3{font-size:var(--fs-sm);font-weight:800}
.chip{font-size:var(--fs-xs);font-weight:700;padding:var(--s1) var(--s2);border-radius:999px;border:1px solid var(--line);color:var(--ink2);background:color-mix(in srgb, var(--bg2) 4%, transparent)}
.chip.green{color:var(--ok-ink);border-color:color-mix(in srgb, var(--ok) 40%, transparent);background:color-mix(in srgb, var(--ok) 9%, transparent)}
.chip.blue{color:var(--accent-ink);border-color:color-mix(in srgb, var(--blue) 40%, transparent);background:color-mix(in srgb, var(--blue) 9%, transparent)}
.chip.gold{color:var(--warn-ink);border-color:color-mix(in srgb, var(--gold) 45%, transparent);background:color-mix(in srgb, var(--gold) 10%, transparent)}
.lesson{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3);border-radius:12px;background:color-mix(in srgb, var(--bg2) 3%, transparent);border:1px solid var(--line);margin-top:var(--s2);flex-wrap:wrap}
.lesson .no{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:800;background:color-mix(in srgb, var(--bg2) 7%, transparent);color:var(--ink2);flex-shrink:0}
.lesson.done .no{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok-ink)}
.lesson .lt{font-size:var(--fs-sm);font-weight:600;flex:1;min-width:160px}
.lesson .ld{font-size:var(--fs-xs);color:var(--ink3)}
.empty{padding:var(--s5);text-align:center;color:var(--ink2);font-size:var(--fs-sm)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
th{color:var(--ink2);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1.4px;text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
td{padding:var(--s2) var(--s3);border-bottom:1px solid color-mix(in srgb, var(--bg2) 5%, transparent);vertical-align:middle}
tr:hover td{background:color-mix(in srgb, var(--bg2) 2.5%, transparent)}
.login{max-width:400px;margin:11vh auto 0;padding:var(--s6)}
.login h1{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--s2);text-align:center}
.login .sub{font-size:var(--fs-xs);color:var(--ink2);text-align:center;margin-bottom:var(--s4);line-height:1.6}
.fld{margin-bottom:var(--s3)}
.fld label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink2);margin-bottom:var(--s2);letter-spacing:.5px}
.fld input,.fld textarea,.fld select{width:100%;background:color-mix(in srgb, var(--shade-base) 28%, transparent);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:var(--s3) var(--s3);font-size:var(--fs-sm);outline:none;transition:.2s;font-family:inherit}
.fld input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--grad-a) 18%, transparent)}
.quiz-q{padding:var(--s4);margin-bottom:var(--s3)}
.quiz-q .qh{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.quiz-q .qn{font-size:var(--fs-xs);font-weight:800;color:var(--accent2-ink);letter-spacing:1px}
.quiz-q .qt{font-size:var(--fs-sm);font-weight:700;line-height:1.55}
.opt{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s3);border-radius:12px;background:color-mix(in srgb, var(--bg2) 3%, transparent);border:1px solid var(--line);margin-top:var(--s2);cursor:pointer;transition:.15s;font-size:var(--fs-sm);line-height:1.5}
.opt:hover{background:var(--glass2)}
.opt.sel{border-color:var(--accent);background:color-mix(in srgb, var(--grad-a) 12%, transparent)}
.opt.right{border-color:color-mix(in srgb, var(--ok) 55%, transparent);background:color-mix(in srgb, var(--ok) 10%, transparent)}
.opt.wrong{border-color:color-mix(in srgb, var(--err) 55%, transparent);background:color-mix(in srgb, var(--err) 10%, transparent)}
.opt .ok{font-weight:800;color:var(--ink2);flex-shrink:0}
.opt.sel .ok{color:var(--accent2-ink)}
.expl{margin-top:var(--s2);padding:var(--s3) var(--s3);border-radius:10px;background:color-mix(in srgb, var(--grad-d) 7%, transparent);border:1px solid color-mix(in srgb, var(--grad-d) 25%, transparent);font-size:var(--fs-xs);line-height:1.6;color:var(--accent-ink)}
.score-hero{text-align:center;padding:var(--s5) var(--s4)}
.score-hero .big{font-size:var(--fs-2xl);font-weight:800;font-variant-numeric:tabular-nums}
.score-hero .big.pass{color:var(--ok-ink)}.score-hero .big.fail{color:var(--err-ink)}
.score-hero .msg{font-size:var(--fs-sm);color:var(--ink2);margin-top:var(--s2);line-height:1.6}
.xp-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:color-mix(in srgb, var(--bg2) 92%, transparent);border:1px solid color-mix(in srgb, var(--gold) 50%, transparent);color:var(--warn-ink);padding:var(--s3) var(--s5);border-radius:14px;font-size:var(--fs-sm);font-weight:700;opacity:0;transition:.35s;z-index:99;pointer-events:none;box-shadow:0 10px 30px color-mix(in srgb, var(--shade-base) 50%, transparent)}
.xp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:color-mix(in srgb, var(--card) 95%, transparent);border:1px solid var(--line);padding:var(--s3) var(--s5);border-radius:12px;font-size:var(--fs-sm);z-index:99;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1}
.hint{font-size:var(--fs-xs);color:var(--ink3);line-height:1.6;margin-top:var(--s2)}
@media (max-width:760px){.levels{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.lvl .num{font-size:var(--fs-2xl)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══ P54 · U5：自建模态（原生 dialog；替代原生 confirm）═══ */
dialog.m-dlg{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);padding:var(--s5);max-width:min(420px,92vw);width:100%;box-shadow:var(--shadow)}
dialog.m-dlg.wide{max-width:min(640px,94vw);max-height:88vh;overflow-y:auto}
/* ═══ MEMBERFACE · 头像选择网格 ═══ */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin-top:var(--s2)}
.pf-cell{aspect-ratio:1;border-radius:14px;border:2px solid var(--line);background:var(--card2);cursor:pointer;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s}
.pf-cell svg{width:100%;height:100%;display:block}
.pf-cell.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.pf-lock{color:var(--warn-ink)}
/* ═══ MEMBERFACE-2 · 顶栏会员头像(三态)═══ */
.me-av{width:30px;height:30px;border-radius:10px;overflow:hidden;flex:none;display:inline-flex;align-self:center}
.me-av img{width:100%;height:100%;object-fit:cover;display:block}
.me-av.ltr{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;align-items:center;justify-content:center;font-weight:800;font-size:13px}
/* ═══ DLGX · 弹窗关闭角标(国际标准:显式关闭通道)═══ */
.m-dlg-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--ink2);cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.m-dlg-x:hover{color:var(--ink);border-color:var(--line2)}
dialog.m-dlg::backdrop{background:color-mix(in srgb,var(--shade-base) 55%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
dialog.m-dlg p{font-size:var(--fs-sm);line-height:var(--lh-loose);margin:0 0 var(--s4)}
.m-dlg-f{display:flex;gap:var(--s2);justify-content:flex-end}

/* ── R7ADS-OV · 总览/折叠/栏目卡（信息架构升级）── */
.fold{margin:var(--s3) 0}
.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:650;font-size:var(--fs-sm);color:var(--ink);min-height:44px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"⌄";margin-left:auto;color:var(--ink3);transition:transform .2s ease}
.fold[open]>summary::after{transform:rotate(180deg)}
.fold-body{padding-top:var(--s3)}
.tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;flex:none;min-height:44px;display:inline-flex;align-items:center}
.ov-id{margin:var(--s3) 0}
.ov-id-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ov-pts{font-size:24px;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ov-sub{font-size:var(--fs-xs);color:var(--ink2);margin-top:4px}
.chip.warn{background:rgba(255,159,10,.13);color:#7a5200}
.chip.fire{background:rgba(255,69,58,.10);color:#d70015}
.ovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--s2);margin:var(--s3) 0}
.ovcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;transition:transform .15s ease,border-color .15s ease;font:inherit;color:inherit;min-height:44px}
.ovcard:hover,.ovcard:focus-visible{transform:translateY(-2px);border-color:var(--accent)}
.ovcard .ic{font-size:20px}
.ovcard .ti{font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.ovcard .sb{font-size:var(--fs-xs);color:var(--ink2);line-height:1.45}
.ovcta{width:100%;margin:var(--s2) 0 var(--s4)}
.toppts{font-size:var(--fs-xs);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;margin-top:2px}
@media(prefers-color-scheme:dark){.chip.warn{color:#ffd60a}.chip.fire{color:#ff6961}}
@media(prefers-reduced-motion:reduce){.ovcard,.fold>summary::after{transition:none}}

/* ═══ MEMBERICON · SVG 图标系统(壳内联 sprite · currentColor 全态联动 · 24px 光学网格 1.8px 描边 · 零请求零字体依赖)═══ */
.ic{display:inline-block;vertical-align:-.125em;flex:none}
.ic-tab{width:17px;height:17px}
.ic-gem{width:1em;height:1em}
.ov-pts .ic-gem{width:.86em;height:.86em;vertical-align:-.04em}
.toppts .ic{vertical-align:-.16em}
.ovcard .ic{display:flex}
.ovcard .ic svg{width:20px;height:20px;color:var(--accent-ink)}