/* ============================================================================
   tech.css —— 前台「科技皮肤」独立样式表（v1-tech · 2026-10-05）
   ★ 服务范围＝全部科技皮肤整页（这些页**都不加载 app.css / tokens.css**）：
     templates/index_tech.html（首页）· detail_tech.html（详情页）· reader_tech.html（阅读器）
     · me/index_tech.html + me/points_tech.html（个人中心 · v1.80，待接线）。
     另服务版式演示稿 `讲义门户_研发协同\demo-me-tech\demo.html`（渲染成 /static/demo-me*.html）。
   ★ **不修改 app.css / tokens.css**，也不覆盖任何既有类名（本表所有类名都以 t- 前缀，
     避免与 app.css 相互污染）。
   ★ 设计前提（用户 2026-10-05 裁定）：
     ① 视觉**不得依赖封面自身的颜色/构图** —— 封面是真实图片（3:4 / object-fit:cover / 边缘会被裁）；
        因此文字**一律不压在图片上**，图上只保留带深色底衬的角标。
     ② 科技感来自：深色玻璃面板 · 精密排版（等宽数字 + 宽字距小标）· 发光交互态 · 信息密度。
   ★ 数据口径：只用后端真实提供的字段（title / summary / subject_name / meta_line /
     price_points / tags / cover_image / preview_sections / kind / updated_at / 专辑），
     **不编造销量、评分、人数**。
   ========================================================================== */

/* ── 基础重置（★ 必须自带：本表不加载 app.css。缺了会：body 默认 8px 外边距、
      缺 box-sizing 导致横向溢出、sprite 图标集与 skip 链接显形）── */
/* ★ color-scheme：本页**不加载 tokens.css** ⇒ 这条必须在本表自带一份。
   与 tokens.css 同口径：钉死在 data-theme 上（默认浅色，不跟系统 prefers-color-scheme）。 */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
body.t-root{margin:0}
/* ── 基础重置：元素部分一律走 `:where()`（0 特异性），整条只由 `.t-root` 贡献 (0,1,0) ──
   ★★ v1.89 踩过的坑（保留记录，勿再踩）：原先写成 `.t-root h1, .t-root h2, …{margin:0}`
   ＝ (0,1,1)，而任何单类业务规则（如 `.t-d-title`）只有 (0,1,0)
   ⇒ **单类写的 margin / color / font-size / background / border 会被静默压掉**，
   不报错、DevTools 也不高亮，不改 DOM 极难定位。实测到的表现：
     · 「有的区块很松、有的紧贴」——10 条 margin 全部恒为 0：
       `.t-d-title` / `.t-d-spec` / `.t-d-lead-more` / `.t-d-album` / `.t-d-trust` /
       `.t-d-code` / `.t-d-shortfall` / `.t-d-agree` / `.t-modal-t`
     · 「按钮没边框没底色、字号被 inherit 放大」——`.t-metric`（顶栏主题按钮，实测
       16px / 无色 / 无底 / 无框，而同排「登录 / 注册」是 12px 胶囊）、
       `.t-rd-fb`（阅读器右下浮动按钮，实测 16px / 无底 / 无框）
     · 「链接色一律变正文色」——`.t-cta` / `.t-cta-2` / `.t-fopt`（首页筛选芯片）
   ⇒ v1.89 的临时修法是给详情页规则加 `.t-detail` / `.t-modal` 前缀提到 (0,2,0)；
     **v1.90 改为从源头修**：把 reset 的元素部分包进 `:where()` ⇒ 元素部分 0 特异性，
     整条只剩 `.t-root` 的 (0,1,0)，与单类业务规则**同分**，按源码顺序（reset 在最前）自然让位。
   ⇒ 收益：不必给每条业务规则加前缀，也不会再触发「提了特异性就把媒体查询里同名规则反压」
     （v1.89 实测踩过一次：`.t-d-spec` 加前缀后 ≤1080 的两列规则被反压成四列）。
   ⇒ v1.89 已加的那批 `.t-detail` / `.t-modal` 前缀**保留**：更高特异性无害，且写明当时的意图。
   ⇒ 今后新增规则：给 `h1~h4 / p / dl / dd / dt / figure / ul / ol / a / img / svg / button`
     写样式**用单类即可**，不必再加父级前缀。 */
.t-root :where(h1,h2,h3,h4,p,dl,dd,dt,figure){margin:0}
.t-root :where(ul,ol){margin:0;padding:0;list-style:none}
.t-root :where(a){color:inherit;text-decoration:none}
.t-root :where(img,svg){display:block}
.t-root :where(button,input,select){font:inherit;color:inherit}
.t-root :where(button){background:none;border:0;cursor:pointer}
.t-root :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
/* 图标 sprite 只是 symbol 仓库，绝不可见 */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* 跳转链接：默认移出视口，聚焦时出现 */
.t-root .skip{position:absolute;left:-9999px}
.t-root .skip:focus{left:18px;top:16px;z-index:99;background:var(--acc);color:#04121a;padding:10px 16px;border-radius:8px;font-weight:700}

.t-root{
  --bg:#06090f; --bg-2:#0a0f18;
  --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055);
  --fg:#e9eef6; --fg-2:#9aa7b8; --fg-3:#7b8898;
  --acc:#38e1ff; --acc-2:#7c5cff; --acc-3:#5ef2b0; --warn:#ffb454;
  --acc-rgb:56,225,255; --acc-2-rgb:124,92,255; --acc-3-rgb:94,242,176; --shadow-rgb:0,0,0;
  --ok:#4ade80; --ok-rgb:74,222,128; --bad:#f87171; --bad-rgb:248,113,113;
  --cta-b:#1fb6d8; --on-acc:#04121a; --cta-ink:#fff; --fallback-a:#16232e; --fallback-b:#0b1219;
  --glass:blur(14px) saturate(1.2);
  --r:14px; --r-lg:20px;
  --sh:0 24px 60px -30px rgba(var(--shadow-rgb),.9);
  --glow:0 0 0 1px rgba(var(--acc-rgb),.45),0 0 26px -6px rgba(var(--acc-rgb),.5);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,Menlo,monospace;
  /* ★ v1.73：本表**不加载 tokens.css** ⇒ 必须自带 sans 字体栈，否则正文走浏览器默认字体，
     同一份代码在 Windows / macOS / 手机上会是三种字形。此处与 tokens.css 的 --sans 逐字一致。 */
  --sans:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.68,0,1);

  /* ── 字号体系（v1.73 · 2026-10-06 用户拍板"整页统一"）────────────────────
     ★ 只用这 8 档；禁止 0.5px 步进与 14.6 / 14.8 / 15.5 这类怪值。
     ★ 中文不低于 12px；11px 只给「纯拉丁大写微标」。
     ★ mono 只用于数字与纯拉丁；**中文一律 sans，且中文不加 letter-spacing**。 */
  --t-fs-micro:11px;   /* 纯拉丁大写微标：筛选组英文名、品牌副标、页脚栏题 */
  --t-fs-xs:12px;      /* 中文辅助小字下限：卡片 meta/标签/角标、信任行、指标标签、页脚法务 */
  --t-fs-sm:13px;      /* 次级 UI：筛选项、页脚链接、专辑胶囊、清除筛选、区块旁注与链接 */
  --t-fs-md:14px;      /* 正文与控件基准：推荐位简介、搜索框、两个 CTA、卡片按钮 */
  --t-fs-lg:16px;      /* 小标题：卡片标题、专辑名 */
  --t-fs-xl:20px;      /* 区块标题：本辑 / 全部讲义 */
  --t-fs-num:26px;     /* 数字强调：指标数字、卡片价格 */
  --t-fs-price:44px;   /* 推荐位价格 */
}
[data-theme="light"] .t-root{
  --bg:#f2f5f9; --bg-2:#e8edf4; --panel:rgba(255,255,255,.75); --panel-2:#fff;
  --line:rgba(var(--shadow-rgb),.12); --line-2:rgba(var(--shadow-rgb),.07);
  --fg:#0d1622; --fg-2:#4e5d70; --fg-3:#64748b;
  --acc:#0b7f9c; --acc-2:#5b3ce0; --acc-3:#0e9c6b; --warn:#a96500;
  --acc-rgb:11,127,156; --acc-2-rgb:91,60,224; --acc-3-rgb:14,156,107; --shadow-rgb:14,24,38;
  --ok:#16a34a; --ok-rgb:22,163,74; --bad:#dc2626; --bad-rgb:220,38,38;
  --cta-b:#1fb6d8; --on-acc:#ffffff; --cta-ink:#fff; --fallback-a:#16232e; --fallback-b:#0b1219;
  --sh:0 24px 60px -34px rgba(var(--shadow-rgb),.4);
  --glow:0 0 0 1px rgba(var(--acc-rgb),.4),0 0 22px -8px rgba(var(--acc-rgb),.4);
}

/* 页面底色与光晕：加在 body 上（index_tech.html 会给 body 加 .t-root） */
body.t-root{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans);          /* ★ v1.73：显式声明，不再依赖浏览器默认字体 */
  background-image:
    radial-gradient(900px 520px at 82% -8%,rgba(var(--acc-2-rgb),.16),transparent 62%),
    radial-gradient(760px 420px at 8% 4%,rgba(var(--acc-rgb),.12),transparent 60%);
  background-attachment:fixed;
}
.t-wrap{width:100%;max-width:1340px;margin:0 auto;padding:0 22px}
.t-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.t-lbl{font-family:var(--mono);font-size:var(--t-fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3)}

/* ── 顶栏 ── */
.t-top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:var(--glass);border-bottom:1px solid var(--line-2)}
.t-top-in{display:flex;align-items:center;gap:18px;height:70px}
.t-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.t-brand small{display:block;font-family:var(--mono);font-size:var(--t-fs-micro);letter-spacing:.24em;color:var(--fg-3);text-transform:uppercase}
.t-search{position:relative;display:flex;align-items:center;flex:0 1 320px;margin-left:auto}
.t-search input{width:100%;height:40px;padding:0 14px 0 38px;background:var(--panel);border:1px solid var(--line);border-radius:11px;color:var(--fg);font-size:var(--t-fs-md)}
.t-search input::placeholder{color:var(--fg-3)}
.t-search input:focus{outline:none;border-color:var(--acc);box-shadow:var(--glow)}
.t-search .t-ico{position:absolute;left:13px;width:16px;height:16px;color:var(--fg-3)}
.t-top-act{display:flex;align-items:center;gap:9px}
/* ★ 2026-10-05 修（用户报「点数 0 / 个人中心 没居中」）：
   原写法 `align-items:baseline` + 定高 38px —— 定高单行 flex 容器里，baseline 会把整行
   **压在顶部**（真浏览器实测：上留白 1px / 下留白 24px，偏心 −11.5px）⇒ 顶栏 5 个胶囊
   （点数 / 个人中心 / 登录 / 注册 / 换肤按钮）文字全部贴顶。
   改为 center，与本表其它定高胶囊（.t-pill / .t-cta / .t-badge / .t-fopt / .t-fclear …）口径一致。 */
.t-metric{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-metric b{font-family:var(--mono);font-size:var(--t-fs-md);color:var(--fg);letter-spacing:0}

/* ── 通用玻璃面板 ── */
.t-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--sh)}

/* ── 主推 ── */
/* ── 主推：**橱窗式推荐位**（★ 刻意不做成详情页：没有规格表、没有目录、没有 meta 网格；
      只有 标签 → 标题 → 一句卖点 → 价格 → 双 CTA → 信任行，右侧是浮起的封面）── */
.t-hero{padding:26px 0 4px}
.t-show{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:34px;align-items:center;
  padding:34px 36px;border-radius:22px;overflow:hidden;
  background:linear-gradient(128deg,rgba(var(--acc-rgb),.10),rgba(var(--acc-2-rgb),.10) 46%,transparent 80%),var(--panel);
  border:1px solid var(--line);backdrop-filter:var(--glass);box-shadow:var(--sh)}
.t-show::after{content:"";position:absolute;right:-90px;bottom:-130px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 36% 36%,rgba(var(--acc-rgb),.20),transparent 62%);pointer-events:none}
.t-show-l{position:relative;z-index:2}
.t-show .t-h1{margin-top:14px}
.t-show .t-lead{margin-top:14px;font-size:var(--t-fs-md);line-height:1.72;color:var(--fg-2)}
.t-show .t-tags{margin-top:16px}
/* 有专辑简介时，事实行降级为一行小字（真实事实仍然可见） */
.t-factline{margin-top:10px;font-size:var(--t-fs-xs);color:var(--fg-3);line-height:1.6}
.t-show .t-buy{margin-top:22px;padding-top:0;border-top:0}
.t-show .t-trust{margin-top:16px}
/* 浮起的封面（背后叠一张、微倾）——首页推荐位的"商品"，不是详情页主图 */
/* ★ v1.77（2026-10-06）：右栏由「横排：扇形封面 + 右侧竖排胶囊」改为**纵排：封面墙 + 通栏信息条**
   （用户报「红框位置太空旷」）。实测右栏填充率 45% → 81%，面板高度不变（458px）。 */
.t-coverstage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.t-coverstack{position:relative;width:min(224px,54%);flex:0 0 auto}
.t-coverstack .back{position:absolute;inset:12px -20px -12px 20px;border-radius:var(--r);
  background:linear-gradient(150deg,rgba(var(--acc-2-rgb),.5),rgba(var(--acc-rgb),.32));transform:rotate(7deg);opacity:.72}
.t-coverstack .front{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 60px -26px rgba(var(--shadow-rgb),.95);transform:rotate(-3deg)}
.t-coverstack .front img{width:100%;height:100%;object-fit:cover}
.t-coverstack .front .t-fallback{position:absolute;inset:0}
/* 整辑封面叠成一套（推荐位是“一套 N 讲”，不是单张主图） */
.t-coverfan{position:relative;width:min(214px,50%);aspect-ratio:3/4;flex:0 0 auto}
.t-coverfan .fan{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 22px 50px -24px rgba(var(--shadow-rgb),.95);background:var(--bg-2)}
.t-coverfan .fan img{width:100%;height:100%;object-fit:cover}
.t-coverfan .fan .t-fallback{position:absolute;inset:0}
.t-coverfan .f2{transform:rotate(4deg) translate(20px,-8px);opacity:.86;z-index:1}
.t-coverfan .f3{transform:rotate(9deg) translate(38px,-15px);opacity:.6;z-index:0}
.t-coverfan .f1{transform:rotate(-4deg);z-index:2}

/* ── v1.77 右栏新版式：三封面平铺墙 + 通栏三等分信息条 ──────────────────────────
   为什么这么写：
   ① **只改宽度、不改高度**：每张封面自带 `aspect-ratio:3/4`，容器宽度一变高度自动跟随
      ⇒ 各断点只需改 `.t-coverfan` 的宽度，不必逐档算高度（旧写法靠绝对定位 + 固定宽高）。
   ② **叠压用百分比**：`width:39.5%` × 3 − `margin-left:-9.5%` × 2 = 99.5%，恰好填满容器宽度
      ⇒ 任何宽度下都刚好占满，不会因换档露出缝或溢出。
   ③ 选择器写到 `.t-coverstage .t-coverfan .fan`（0,3,0）是为了压过上面那三条 `.f1/.f2/.f3`
      的旋转与透明度（同为 0,2,0，靠特异性而非顺序取胜，避免以后调顺序时失效）。
   ④ `.t-fancount`（共 N 讲）在此版式下**隐藏**：信息条第一格「一套 N 讲」已表达同一件事，
      留着会与信息条抢位置。 */
.t-coverstage .t-coverfan{width:min(544px,97%);aspect-ratio:auto;display:flex;justify-content:center;align-items:stretch}
.t-coverstage .t-coverfan .fan{position:static;transform:none;width:39.5%;height:auto;aspect-ratio:3/4;border-radius:14px;opacity:1}
.t-coverstage .t-coverfan .fan + .fan{margin-left:-9.5%}
.t-coverstage .t-fancount{display:none}
.t-coverstage .t-facts{display:flex;width:min(544px,97%);gap:10px}
.t-coverstage .t-facts li{flex:1 1 0;justify-content:center;padding:9px 8px}
.t-fancount{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);z-index:4;
  font-size:var(--t-fs-xs);color:var(--fg);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid rgba(var(--acc-rgb),.45);
  border-radius:999px;padding:4px 12px;box-shadow:0 0 22px -8px rgba(var(--acc-rgb),.7);white-space:nowrap}
.t-facts{display:grid;gap:9px}
.t-facts li{display:flex;align-items:center;gap:9px;font-size:var(--t-fs-xs);color:var(--fg-2);
  background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--line);border-radius:11px;padding:9px 12px;white-space:nowrap}
.t-facts svg{width:14px;height:14px;color:var(--acc-3);flex:0 0 auto}
/* 未上传封面时的兜底（主推与卡片共用） */
.t-fallback{display:grid;place-items:center;
  background:radial-gradient(120% 90% at 20% 0%,rgba(var(--acc-rgb),.22),transparent 60%),linear-gradient(150deg,var(--fallback-a),var(--fallback-b))}
.t-fallback b{font-size:64px;font-weight:800;color:rgba(255,255,255,.14)}
.t-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;font-size:var(--t-fs-xs);text-transform:uppercase;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--fg)}
/* v1.82 · 绝对定位只属于「封面角标」这两个变体，不再留在基础 .t-badge 上
   —— 否则 v1.80 的表格状态胶囊会继承 position:absolute 而脱流，不参与行高、
   被按静态位置摆到行中线下方 11.8px（详见交付件诊断图）。 */
.t-badge.tl{position:absolute;z-index:3;left:12px;top:12px}
.t-badge.tr{position:absolute;z-index:3;right:12px;top:12px}
.t-badge.hot{color:var(--acc);border-color:rgba(var(--acc-rgb),.5);box-shadow:0 0 20px -8px rgba(var(--acc-rgb),.7)}
.t-under{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:var(--t-fs-xs);color:var(--fg-3)}

.t-h1{margin-top:14px;font-size:clamp(28px,3.2vw,44px);line-height:1.12;letter-spacing:-.03em;font-weight:800;word-break:break-word}
.t-h1 em{font-style:normal;color:var(--acc);text-shadow:0 0 26px rgba(var(--acc-rgb),.45)}
.t-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.t-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--t-fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-3)}
.t-live i{width:7px;height:7px;border-radius:50%;background:var(--acc-3);box-shadow:0 0 12px var(--acc-3)}
.t-lead{margin-top:16px;font-size:var(--t-fs-md);color:var(--fg-2);max-width:62ch;white-space:pre-line}
/* （原来的 .t-spec 规格表已删：规格属于详情页，首页推荐位不放） */
.t-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.t-tag{font-size:var(--t-fs-xs);color:var(--fg-2);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.t-tag:hover{border-color:var(--acc);color:var(--fg)}
.t-buy{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-2)}
.t-price{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-weight:700;color:var(--acc)}
.t-price .v{font-size:var(--t-fs-price);line-height:.9;letter-spacing:-.03em;text-shadow:0 0 30px rgba(var(--acc-rgb),.35)}
.t-price .u{font-size:var(--t-fs-sm);font-family:var(--sans)}   /* 「点 · 全辑」是中文 ⇒ 不用 mono */
.t-cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:13px;background:linear-gradient(150deg,var(--acc),var(--cta-b));color:var(--on-acc);font-size:var(--t-fs-md);font-weight:750;box-shadow:0 12px 30px -14px rgba(var(--acc-rgb),.8)}
/* ★ v1.91（用户 2026-10-08 裁定）：浅色主题下 .t-cta 是深青胶囊（--acc #0b7f9c → #1fb6d8），
   #04121a 近黑字压在深底上偏暗 ⇒ 浅色主题改白字；暗色主题 .t-cta 底色是亮青（--acc #38e1ff），
   白字对比度仅 1.57:1 不可读 ⇒ 暗色主题保留黑字。 */
[data-theme="light"] .t-root .t-cta{color:#fff}
.t-cta:hover{filter:brightness(1.07)}
.t-cta-2{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px;border-radius:13px;border:1px solid var(--line);background:var(--panel);font-size:var(--t-fs-md);font-weight:600;color:var(--fg-2)}
.t-cta-2:hover{color:var(--fg);border-color:var(--acc)}
.t-trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-trust span{display:inline-flex;align-items:center;gap:6px}
.t-trust svg{width:13px;height:13px;color:var(--acc-3)}

/* ── 指标（v1.74：由首屏下方那条整幅横条**移入顶栏** —— 品牌与搜索框之间）──
   ★ 横排单行：数字（mono）+ 标签（sans），项间一条发丝竖线。
   ★ 不再用原来那套「26px 大数字 + 上下堆叠 + 4 列格子」：顶栏只有 70px，堆叠会比
     旁边的 38px 胶囊还重；改成单行后与胶囊同高、读起来是一条"站点概览"。
   ★ 窄屏（≤1080px）隐藏 —— 顶栏放不下（见文件末尾媒体查询），此点已在交付件登记。 */
.t-metrics{display:flex;align-items:center;flex:0 1 auto;min-width:0;overflow:hidden}
.t-metrics > div{display:flex;align-items:baseline;gap:5px;white-space:nowrap;padding:0 16px;border-left:1px solid var(--line-2)}
.t-metrics > div:first-child{padding-left:0;border-left:0}
.t-metrics b{font-family:var(--mono);font-size:var(--t-fs-lg);font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.t-metrics span{font-size:var(--t-fs-xs);color:var(--fg-3)}

/* ★ v1.85（用户 2026-10-06 拍板「窄屏指标三选一」→ 取 c「≤1080px 退回正文横条」）：
   桌面显示顶栏那份 `.t-metrics`、隐藏这份；≤1080px 反过来（顶栏放不下 → 退回正文一行）。
   两份内容完全同源（同一组上下文变量），只是位置二选一，不会同时出现。
   `.t-metrics.t-metrics-inline` 特异性 (0,2,0) > 媒体查询里的 `.t-metrics`(0,1,0) ⇒ 不会被误隐藏。 */
.t-metrics.t-metrics-inline{display:none}

/* ── 区块标题 ── */
.t-sec{margin-top:56px}
.t-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.t-sec-head h2{font-size:var(--t-fs-xl);font-weight:750;letter-spacing:-.015em;display:flex;align-items:center;gap:11px}
.t-sec-head h2::before{content:"";width:3px;height:18px;border-radius:2px;background:linear-gradient(180deg,var(--acc),var(--acc-2));box-shadow:0 0 16px rgba(var(--acc-rgb),.6)}
.t-sec-head .t-note{font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-sec-head .t-link{margin-left:auto;font-size:var(--t-fs-sm);color:var(--acc)}

/* ── 学科 / 版本 / 年级：横滑胶囊（数据全部来自后端分类表） ── */
.t-railwrap{display:grid;gap:10px}
.t-rail{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:2px 2px 10px}
.t-rail .t-rl{flex:0 0 auto;font-family:var(--mono);font-size:var(--t-fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);padding-right:4px}
.t-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:11px;background:var(--panel);border:1px solid var(--line);font-size:var(--t-fs-sm);color:var(--fg-2);backdrop-filter:var(--glass);transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
.t-pill:hover{color:var(--fg);border-color:rgba(var(--acc-rgb),.5);transform:translateY(-2px)}
.t-pill[aria-current="true"]{background:linear-gradient(90deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-2-rgb),.14));border-color:rgba(var(--acc-rgb),.45);color:var(--fg);font-weight:650}

/* ── 专辑（系列）行 ── */
.t-alb{margin-top:22px}
.t-alb-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.t-alb-head h3{font-size:var(--t-fs-lg);font-weight:700;letter-spacing:-.015em}
.t-alb-head .t-n{font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-alb-head .t-go{margin-left:auto;font-size:var(--t-fs-sm);color:var(--acc)}

/* ── 全部讲义：左筛选 + 右网格 ── */
.t-catalog{display:grid;grid-template-columns:238px minmax(0,1fr);gap:26px;align-items:start}
.t-filters{position:sticky;top:86px;display:grid;gap:18px;padding:18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);backdrop-filter:var(--glass)}
.t-fgroup h4{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-fs-xs);color:var(--fg-3);margin-bottom:10px}
.t-fgroup h4 span{font-family:var(--mono);font-size:var(--t-fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.t-fgroup .t-opts{display:grid;gap:3px}
.t-fopt{display:flex;align-items:center;justify-content:space-between;gap:8px;height:34px;padding:0 10px;border-radius:9px;font-size:var(--t-fs-sm);color:var(--fg-2);border:1px solid transparent}
.t-fopt:hover{background:var(--panel-2);color:var(--fg)}
.t-fopt[aria-current="true"]{background:linear-gradient(90deg,rgba(var(--acc-rgb),.14),rgba(var(--acc-2-rgb),.12));border-color:rgba(var(--acc-rgb),.4);color:var(--fg);font-weight:650}
/* ★ v1.80：筛选项右侧的数量徽标（个人中心「已购讲义」按用户自己的收藏计数；
   首页不显示数量，故新增此件不影响首页）。 */
.t-fopt .t-fn{font-family:var(--mono);font-size:var(--t-fs-micro);color:var(--fg-3);font-variant-numeric:tabular-nums}
.t-fopt[aria-current="true"] .t-fn{color:var(--fg-2)}
.t-fclear{display:inline-flex;align-items:center;justify-content:center;height:36px;border-radius:9px;border:1px solid var(--line);font-size:var(--t-fs-sm);color:var(--acc)}
.t-fclear:hover{border-color:var(--acc)}
.t-grid-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.t-grid-head p{font-size:var(--t-fs-sm);color:var(--fg-3)}
.t-grid-head p b{color:var(--fg)}

/* 专辑（系列）行：自适应列数，保证同辑尽量一行排满（5 份 ⇒ 5 列，不出现 4+1 换行） */
.t-alb-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(180px,45vw),1fr))}
@media (min-width:1200px){ .t-alb-grid{gap:24px} }

.t-grid{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:820px){ .t-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1200px){ .t-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} }

/* ── 商品卡：图片优先，文字不压图 ── */
.t-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);backdrop-filter:var(--glass);overflow:hidden;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.t-card:hover{transform:translateY(-4px);border-color:rgba(var(--acc-rgb),.45);box-shadow:var(--glow)}
.t-card .t-hit{position:absolute;inset:0;z-index:2;border-radius:inherit}
.t-thumb{position:relative;aspect-ratio:3/4;flex:0 0 auto;overflow:hidden;background:var(--bg-2)}
.t-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.t-card:hover .t-thumb img{transform:scale(1.04)}
.t-thumb .t-fallback{position:absolute;inset:0;display:grid;place-items:center}
.t-thumb .t-fallback b{font-size:52px;font-weight:800;color:rgba(255,255,255,.16)}
/* ★ 2026-10-22（用户拍板）：左上角标改「课程 ｜ 年级」，配色跟皮肤走（原为 `--bg` 玻璃底 + `--line` 边 + `--fg` 字，
   只有明暗变化、没有色相）。现取「玻璃底 + 强调色边/字/圆点」：底仍是页面底色 ⇒ 字与任意封面都不会打架；
   皮肤色通过边线、文字、圆点体现。带 alpha 一律 `rgba(var(--acc-rgb),a)`（纯 hex 无法带 alpha）。 */
.t-thumb .t-subj{position:absolute;left:10px;top:10px;z-index:3;height:26px;display:inline-flex;align-items:center;max-width:calc(100% - 20px);padding:0 9px;border-radius:7px;font-size:var(--t-fs-xs);background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(8px);border:1px solid rgba(var(--acc-rgb),.55);color:var(--acc)}
.t-thumb .t-subj .t-subj-d{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:0 0 auto;margin-right:6px}
/* 两段各自可截断：只给容器 `text-overflow` 在 inline-flex 里不生效，必须落到每段上 */
.t-thumb .t-subj .t-subj-c,.t-thumb .t-subj .t-subj-g{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.t-thumb .t-subj .t-subj-s{width:1px;height:11px;background:currentColor;opacity:.4;margin:0 7px;flex:0 0 auto}
.t-thumb .t-subj .t-subj-g{opacity:.78}
.t-thumb .t-own{position:absolute;right:10px;top:10px;z-index:3;height:26px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-radius:7px;font-size:var(--t-fs-xs);background:rgba(var(--acc-3-rgb),.16);border:1px solid rgba(var(--acc-3-rgb),.5);color:var(--acc-3)}
.t-thumb .t-own svg{width:11px;height:11px}
.t-info{display:flex;flex-direction:column;gap:9px;padding:14px 15px 15px;flex:1}
.t-info h3{font-size:var(--t-fs-lg);font-weight:650;line-height:1.4;letter-spacing:-.008em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.t-info .t-meta{font-size:var(--t-fs-xs);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-info .t-ctags{display:flex;gap:5px;flex-wrap:wrap;margin-top:0}
.t-info .t-ctags a{position:relative;z-index:3;font-style:normal;font-size:var(--t-fs-xs);color:var(--fg-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;text-decoration:none;cursor:pointer}
.t-info .t-ctags a:hover{border-color:var(--acc);color:var(--fg)}
.t-info .t-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line-2)}
.t-info .t-p{font-family:var(--mono);font-weight:700;color:var(--acc);font-size:var(--t-fs-num);line-height:1;letter-spacing:-.02em}
.t-info .t-p .u{font-size:var(--t-fs-sm);font-family:var(--sans);margin-left:3px}   /* 「点」是中文 ⇒ 不用 mono */
.t-info .t-sub{display:block;margin-top:0;font-size:var(--t-fs-xs);color:var(--fg-3);line-height:1.45}
/* ★ v1.76（2026-10-06）：卡片按钮/标签行改专用类名（`t-cbuy` / `t-ctags`），与首屏推荐位的
   「行容器」`.t-buy` / `.t-tags` 彻底分开 —— 详见 templates/_tech_card.html 顶部注释。
   `display:inline-flex` + `align-items:center`：定高 36px 单行，文字必须居中
   （旧写法继承了首屏 `.t-buy{display:flex;align-items:flex-end}` ⇒ 文字贴底 5px）。 */
/* ★ v1.96（2026-10-09）：按钮由 <span> 改为真链接 <a>（地址与整卡热区同源）⇒ 补
   `text-decoration:none`，否则作为 <a> 会带下划线；hover 样式沿用下一行不变。 */
.t-info .t-cbuy{display:inline-flex;align-items:center;justify-content:center;margin:0;flex:0 0 auto;white-space:nowrap;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);font-size:var(--t-fs-md);font-weight:650;color:var(--fg-2);text-decoration:none;position:relative;z-index:3}
.t-info .t-cbuy:hover{border-color:var(--acc);color:var(--fg);box-shadow:var(--glow)}

/* ── 空状态 ── */
.t-empty{margin:40px 0;padding:52px 22px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--panel)}
.t-empty h3{margin-top:16px;font-size:var(--t-fs-xl);font-weight:700}
.t-empty p{margin-top:7px;font-size:var(--t-fs-sm);color:var(--fg-3)}
.t-empty .t-cta{margin-top:20px;height:46px;font-size:var(--t-fs-md)}

/* ── 页脚 ── */
.t-foot{margin-top:70px;border-top:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 82%,transparent)}
.t-foot-in{padding:36px 0 44px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr));gap:30px}
.t-foot h4{font-size:var(--t-fs-xs);color:var(--fg-3);margin-bottom:12px}
.t-foot .t-fl{display:grid;gap:8px;font-size:var(--t-fs-sm);color:var(--fg-2)}
.t-foot .t-fl a:hover{color:var(--acc)}
.t-foot .t-facts{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-foot .t-fine{margin-top:12px;font-size:var(--t-fs-xs);color:var(--fg-3);max-width:58ch}
/* ★ 2026-10-05 预防性同族修正：同 `.beian` 的老毛病 —— `flex-wrap:wrap` + 未声明 align-items
   ⇒ 默认 stretch，窄屏一旦某个 span 因换行变高，同排另一个纯文字 span 会被拉伸而文字贴顶。
   当前两个 span 样式相同、实测无可见偏差，属**预防**；若审核认为超出范围可直接删掉这半句。 */
.t-foot .t-beian{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-foot .t-beian span{border:1px solid var(--line-2);border-radius:6px;padding:2px 8px}

/* ── 窄屏 ── */
@media (max-width:1080px){
  .t-show{grid-template-columns:1fr;gap:26px;padding:26px 22px}
  /* v1.77：首屏改单列后，右栏整幅落到文字下方 ⇒ 封面墙放大到 620 居中，
     信息条吃满整幅宽度（收住这一段的底边，避免整幅两侧留白显得空） */
  .t-coverstage{justify-content:center}
  .t-coverstage .t-coverfan{width:min(620px,100%)}
  .t-coverstage .t-facts{width:100%}
  .t-catalog{grid-template-columns:1fr}
  .t-filters{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ★ v1.74：指标移入顶栏后，≤1080px 顶栏放不下这 4 项（品牌 + 指标 + 搜索 + 账号钮 ≈ 超宽）
     ⇒ 顶栏那份隐藏。
     ★ v1.85（用户 2026-10-06 拍板，三选一取 c）：**不再「窄屏就没有」** —— 顶栏那份隐藏的同时，
     正文里那份 `.t-metrics-inline` 显示出来（渲染位置在首屏推荐位之后、本辑之前）。
     没取 b（顶栏加第二行）的原因：`.t-top` 是 position:sticky，第二行会让吸顶栏永久变高、吃视口。 */
  .t-metrics{display:none}
  .t-metrics.t-metrics-inline{display:flex;flex-wrap:wrap;margin:0 0 26px;padding:12px 16px;
    border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
    backdrop-filter:var(--glass);overflow:visible}
  .t-metrics.t-metrics-inline > div{padding:0 15px}
  .t-metrics.t-metrics-inline b{font-size:var(--t-fs-md)}
  .t-metrics.t-metrics-inline span{font-size:var(--t-fs-micro)}
}
@media (max-width:820px){
  /* v1.77：旧的 `flex-wrap:wrap` 与 `.t-facts{flex:1 1 200px}` 是给「横排：封面+右侧胶囊」写的，
     新右栏是纵排 ⇒ 前者的 wrap 已无意义，后者会把信息条当主轴项目**拉高到 200px**（必须去掉）。 */
  .t-coverstage{gap:14px}
  .t-coverstage .t-coverfan{width:min(520px,100%)}
  .t-coverstage .t-facts{width:100%}
  .t-coverstack{width:min(180px,44%)}
  .t-foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:639px){
  .t-wrap{padding:0 15px}
  .t-top-in{flex-wrap:wrap;height:auto;padding:11px 0;row-gap:10px}
  .t-search{order:3;flex-basis:100%;max-width:none;margin:0}
  .t-brand small{display:none}
  /* v1.85：正文横条在手机上再收一档内距，让 4 项尽量排成一行（320px 视口允许折两行） */
  .t-metrics.t-metrics-inline{margin-bottom:20px;padding:11px 13px;row-gap:6px}
  .t-metrics.t-metrics-inline > div{padding:0 11px}
  .t-h1{font-size:clamp(24px,7.4vw,32px)}
  /* ★★ v2.00（用户 2026-10-11）：原「窄屏收简介为 5 行」的 `-webkit-line-clamp:5`
     已**删除**。理由：截断改由后端 `summary_lead` 按字数做（120 字，桌面/手机同值）
     ⇒ 首屏摘要本身就只有一两百字，不再是当年那条「200 字全文 11 行文字墙」；
     而且 CSS 截行会让「查看完整」按钮的出现条件失真（截了却没有按钮，
     或没截却有按钮），与 v1.86 修过的那个坑同源。 */
  /* v1.77：手机上封面墙与信息条都吃满整幅宽度 */
  .t-coverstage{gap:12px}
  .t-coverstage .t-coverfan,.t-coverstage .t-facts{width:100%}
  .t-price .v{font-size:34px}   /* 显示级窄屏降档（44 → 34）；显示级不属于 UI 文字体系那 8 档 */
  /* ★ v1.78（2026-10-06）：窄屏价格行拆成两行 —— 价格独占一行，两枚 CTA 并排占满下一行。
     根因：原先 price + 两枚 CTA 挤同一行，`flex:1` 把「看这一辑」压到 93px（内容实需 ~135px）
     ⇒ 文字折成竖排（390px 实测 93×48、white-space:normal）。改法三件：
     ① 按钮 nowrap（不再折行）② 收窄内距 26→10 ③ 让价格先占满一行，把整行宽度让给两枚按钮。
     320px 视口下实测两枚并排仍有余量（见交付件 §六）。 */
  .t-show .t-buy{flex-wrap:wrap;row-gap:10px;align-items:center}
  .t-buy .t-price{flex:1 0 100%}
  .t-buy .t-cta,.t-buy .t-cta-2{flex:1 1 0;min-width:0;justify-content:center;height:48px;white-space:nowrap;padding:0 10px}
  .t-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .t-info{padding:11px 11px 12px;gap:7px}
  .t-info h3{font-size:var(--t-fs-md);min-height:2.8em}
  .t-info .t-ctags,.t-info .t-sub{display:none}
  .t-info .t-p{font-size:20px}  /* 卡片价格窄屏降档（26 → 20）；指标条数字仍 26 不动 */
  .t-info .t-cbuy{height:32px;padding:0 11px;font-size:var(--t-fs-xs)}
  /* ★ v1.81（2026-10-06）：手机端筛选栏改「整栏折成一行横向胶囊」（用户拍板方案 B）。
     原 ≤639 是 `grid-template-columns:1fr`：4 组纵排 = 657px ≈ 1.7 屏，且出现在**所有卡片之前**。
     改法＝容器转 flex 横滑（滚动发生在容器内部 ⇒ 页面横向溢出仍为 0）；每组成为一段，
     组名只留中文（隐掉 Subject/Edition 这类英文小标），选项转胶囊。
     ≤1080 档（2 列平铺）不动 —— 那一档与首页表现一致，本次只改手机端。 */
  .t-filters{
    display:flex;flex-wrap:nowrap;align-items:center;gap:0;
    padding:8px 10px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .t-filters::-webkit-scrollbar{display:none}
  .t-fgroup{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:0 11px;scroll-snap-align:start}
  .t-fgroup:first-child{padding-left:2px}
  .t-fgroup + .t-fgroup{border-left:1px solid var(--line-2)}
  .t-fgroup h4{margin:0;flex:0 0 auto;font-size:var(--t-fs-micro);color:var(--fg-3);white-space:nowrap}
  .t-fgroup h4 span{display:none}
  .t-fgroup .t-opts{display:flex;flex-wrap:nowrap;gap:6px}
  .t-fopt{
    flex:0 0 auto;justify-content:center;gap:7px;white-space:nowrap;
    height:34px;padding:0 12px;border-radius:999px;
    border-color:var(--line);background:var(--panel-2);
  }
  .t-fopt .t-fn{font-size:var(--t-fs-xs)}
  .t-fclear{flex:0 0 auto;height:34px;margin-left:11px;padding:0 14px;border-radius:999px;white-space:nowrap}
  .t-foot-in{grid-template-columns:1fr}
}
@media (pointer:coarse){ .t-fopt,.t-buy,.t-cbuy,.t-cta-2,.t-pill,.t-fclear,.t-cta,.t-rd-fb{min-height:44px} }
@media (prefers-reduced-motion:reduce){ .t-card,.t-pill{transition:none!important} .t-card:hover{transform:none} .t-card:hover .t-thumb img{transform:none} }

/* ============================================================================
   ★★ v1-tech · 详情页 + 阅读器（2026-10-06）──────────────────────────────
   作用域：detail_tech.html / reader_tech.html（两个独立整页，共用本表）。
   类名 t-d-*（详情）/ t-rd-*（阅读器）；通用件直接复用 .t-top/.t-panel/.t-cta/
   .t-cta-2/.t-price/.t-foot/.t-card（相关讲义用 _tech_card.tech_card）。
   ========================================================================== */

/* ── 全站通用：.ic 图标（本表此前只给 sprite 隐藏；正文里的 <svg class="ic"> 需要尺寸）── */
.t-root .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ── 阅读器需要 --bar-h（站点顶栏高 70px），供 iframe 自适应脚本换算视口式高度。
   ★ 脚本读的是 `getComputedStyle(document.documentElement)`（= <html>），不是 body ——
     变量必须放在 :root，放 body.t-root 上读不到（实测为空 ⇒ 基准高度会少算顶栏）。 ── */
:root{--bar-h:70px}

/* ── 返回链 ── */
.t-back{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:var(--t-fs-sm);color:var(--fg-2);transition:color .2s var(--ease)}
.t-back:hover{color:var(--fg)}
.t-back .ic{width:16px;height:16px}

/* ── 详情首屏：左大铭牌 + 右成交栏 ── */
.t-detail{display:block}
.t-d-head{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:36px;align-items:start;margin-top:22px}
.t-d-plate{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden}
/* 铭牌内容沿用 _macros.big_plate 的 DOM（.vt/.ptop/.block/.cover/.fig/.tex/.field/.chip），
   但样式全在本表（app.css 不加载）。 */
.t-d-plate .vt{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden}
.t-d-plate .vt img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-d-plate .vt .tex{position:absolute;inset:0;width:100%;height:100%}
.t-d-plate .vt .fig{position:absolute;left:8%;right:8%;top:25%;height:41%;color:rgba(238,243,245,.92);fill:none;stroke:currentColor;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.t-d-plate .vt .ptop{position:absolute;top:13px;left:13px;right:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:4}
.t-d-plate .vt .ptop .field{border:1px solid rgba(238,243,245,.44);border-radius:6px;padding:2px 8px;font-size:var(--t-fs-micro);letter-spacing:.08em;color:#eef3f5}
.t-d-plate .vt .ptop .chip{border:1px solid rgba(238,243,245,.44);border-radius:999px;padding:2px 9px;font-size:var(--t-fs-micro);color:#eef3f5}
.t-d-plate .vt .block{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;font-size:var(--t-fs-xs);color:#eef3f5;background:linear-gradient(180deg,transparent,rgba(9,28,36,.62));z-index:4}
.t-d-plate .vt .block b{font-size:var(--t-fs-lg);font-weight:700}
.t-d-plate .vt.is-owned .fig{color:rgba(238,243,245,.44)}
.t-d-plate .vt.is-owned::after{content:"";position:absolute;inset:0;background:rgba(9,28,36,.18);z-index:2}
.t-d-plate .vt::after{content:"";position:absolute;inset:8px;border:1px solid rgba(238,243,245,.17);border-radius:8px;pointer-events:none;z-index:3}

.t-d-info{min-width:0}
.t-d-title{font-size:clamp(26px,3vw,40px);line-height:1.14;letter-spacing:-.03em;font-weight:800;word-break:break-word}
.t-d-lead{margin-top:16px;font-size:var(--t-fs-md);line-height:1.75;color:var(--fg-2)}
.t-d-lead p{margin:0 0 11px}
.t-d-lead ul{margin:0 0 11px;padding-left:20px;list-style:disc}
/* ★★ v2.01：有序列表（简介里手打的 `1. ` / `2) `）。
   ★ 必需：基础重置里 `:where(ul,ol){…list-style:none}` 会把编号一并抹掉，
     上面又只给 `ul` 补回 `disc` ⇒ **不补这条 `ol` 就完全没有编号**，
     渲染出来与圆点列表长得一模一样，用户会以为功能没生效。
   用 `decimal`（1. 2. 3.），与用户手打的形态一致；缩进/行距与 `ul` 取同值。 */
.t-d-lead ol{margin:0 0 11px;padding-left:20px;list-style:decimal}
.t-d-lead li{margin:0 0 5px;line-height:1.75}
.t-d-lead>:last-child{margin-bottom:0}
/* ★ v1.93（用户 2026-10-08 裁定）：简介前置标签「本讲义介绍：」——
   用正文色 --fg + 750 字重，与摘要正文（--fg-2 / 400）拉开层级。 */
.t-detail .t-d-lead-k{color:var(--fg);font-weight:750}

/* ══ ★★ v1.86 · 详情页改版（用户 2026-10-07 拍板 B/A/B + 简介窗口层）══════════
   首屏新结构：左「铭牌 + 讲义编号（public_id）」／右「状态行 → 渐变大标题 →
   简介首屏摘要（超出 ⇒ 「查看完整讲义介绍」开窗口层）→ SPEC 四宫格 →
   CONTENTS 节列表 → 专辑行 → 标签 → 价格块（划线原价 + N 折）→ CTA → 信任行」。
   全部沿用 `t-d-*` 前缀；窗口层用 `t-modal*`（本站首个模态件，见页尾脚本）。 */

/* 左列：铭牌 + 编号。编号是 `public_id`（12 位 slug），不是自增 id */
.t-d-platecol{min-width:0}
/* ★ v1.89：本段起，凡落在 `<p>/<dl>/<h1>/<figure>` 等被 reset 命中的元素上的 margin，
   一律写成 `.t-detail .t-d-x`（特异性 0,2,0）。原因见文件头 reset 说明：
   `.t-root p{margin:0}` 是 (0,1,1)，单类 `.t-d-x` 是 (0,1,0) —— 单类写 margin 会被静默压掉。 */
.t-detail .t-d-code{display:flex;align-items:baseline;gap:8px;margin-top:14px;padding:0 2px}
.t-detail .t-d-code-k{font-size:var(--t-fs-xs);text-transform:uppercase;color:var(--fg-3)}
.t-d-code-v{font-family:var(--mono);font-size:var(--t-fs-md);font-weight:700;color:var(--fg);word-break:break-all}

/* 状态行：全部真实字段（上架状态 / 更新时间 / 讲义标签）—— v1.88 起不再展示销量 */
.t-d-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:var(--t-fs-sm);color:var(--fg-2)}
.t-d-status b{color:var(--fg);font-weight:650}
.t-d-status .t-d-sep{color:var(--fg-3)}
.t-d-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--acc-3);box-shadow:0 0 0 3px rgba(var(--acc-3-rgb),.2)}
.t-d-dot.off{background:var(--fg-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg-3) 20%,transparent)}
.t-d-own{padding:2px 9px;border-radius:999px;border:1px solid rgba(var(--acc-3-rgb),.5);font-size:var(--t-fs-xs);color:var(--fg)}

/* 渐变大标题（v1.92 用户裁定）：**前 10 字常规色，第 11 字起渐变、以常规色（--fg）为起始色**；
   起始色＝正文色 ⇒ 与前半段无缝衔接；中/末站沿用强调色与品牌紫（暗色 --fg 近白、浅色近黑，均自然过渡） */
.t-detail .t-d-title{margin-top:18px}
.t-d-grad{background:linear-gradient(96deg,var(--fg),var(--acc) 42%,var(--acc-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* 简介首屏摘要 + 「查看完整讲义介绍」（按钮：真 button ⇒ 键盘/读屏可用） */
.t-detail .t-d-lead-more{margin-top:6px}
/* ★ v1.89：**同为特异性陷阱** —— reset 里 `.t-root button{font:inherit;color:inherit}` 是 (0,1,1)，
   单类 `.t-d-more` (0,1,0) 的 `font-size` / `color` 会被它压掉（实测：16px + 正文色，
   既不是 13px 也不是强调色）。加 `.t-detail` 前缀后 (0,2,0) 才生效。
   ★ v1.90：reset 已改 `:where()`（见本表「基础重置」），本前缀**已非必需**；保留是为了不动已验收的版式。 */
.t-detail .t-d-more{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:var(--t-fs-sm);color:var(--acc);cursor:pointer}
.t-d-more:hover{text-decoration:underline}
.t-d-more .ic{width:14px;height:14px}

/* SPEC 四宫格（设计稿口径：英文小标 + 值）。四格共享外框、格间只画分隔线 */
.t-detail .t-d-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);backdrop-filter:var(--glass);overflow:hidden}
.t-d-spec > div{min-width:0;padding:12px 16px;border-left:1px solid var(--line-2)}
.t-d-spec > div:first-child{border-left:0}
.t-d-spec dt{font-family:var(--mono);font-size:var(--t-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.t-d-spec dd{margin-top:6px;font-size:var(--t-fs-md);font-weight:650;color:var(--fg);word-break:break-word}
.t-d-spec dd a{color:var(--acc)}

/* 所属专辑（v1.68 功能，v1.86 从芯片行挪到独立一行） */
.t-detail .t-d-album{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:var(--t-fs-sm);color:var(--fg-3)}
.t-d-album a{display:inline-flex;align-items:center;gap:4px;color:var(--acc)}
.t-d-album .ic{width:14px;height:14px}

/* CONTENTS 节列表（正文真实 `<h2>` 标题；PDF 讲义不渲染这一块） */
.t-d-contents{margin-top:24px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);backdrop-filter:var(--glass)}
.t-d-contents-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.t-d-contents-h h2{display:flex;align-items:baseline;gap:9px;font-size:var(--t-fs-md);font-weight:700;letter-spacing:.02em}
.t-d-contents-h h2 .en{font-size:var(--t-fs-xs);font-weight:400;color:var(--fg-3)}
.t-d-cnum{font-family:var(--mono);font-size:var(--t-fs-xs);color:var(--fg-3);font-variant-numeric:tabular-nums}
/* ★ v1.87（用户裁定）：目录**列全部节**，可视高度固定为「一次 5 行」+ 滚动条 ——
   行高固定 21px（13px × 1.6 ≈ 20.8，取整），行间距 9px
   ⇒ max-height = 21×5 + 9×4 = 141px，恰好 5 整行，不多露第 6 行。
   ★ `align-items:center`（不是 baseline）：本行是「13px 标题 + 12px 序号」两种字号同基线对齐，
   实测 baseline 会让行盒从 21px 涨到 23px（跨字体度量不一致），5 行高度就算不准；
   center 下两个等高行盒对齐 ⇒ 行高恒为 21px（同项目「定高 flex 容器禁用 baseline」的既有结论）。
   ★ 节多时只在面板内滚动（不撑高页面）；`scrollbar-gutter:stable` 保证滚动条出现/消失时文字不左右跳。
   ★ 滚动条必须**看得见**（用户要的就是这个下拉条）⇒ 滑块取 --fg-3 的 60%，
   不用 --line-2（那是 5.5% 白，等于隐形）。 */
.t-detail .t-d-clist{display:grid;gap:9px;margin:0;padding:0 6px 0 0;list-style:none;
  max-height:calc(21px * 5 + 9px * 4);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  --sb:color-mix(in srgb,var(--fg-3) 60%,transparent);
  scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
.t-d-clist::-webkit-scrollbar{width:8px}
.t-d-clist::-webkit-scrollbar-track{background:transparent}
.t-d-clist::-webkit-scrollbar-thumb{background:var(--sb);border-radius:99px}
.t-d-clist::-webkit-scrollbar-thumb:hover{background:var(--acc)}
.t-d-clist li{display:flex;align-items:center;gap:10px;font-size:var(--t-fs-sm);line-height:21px;color:var(--fg-2)}
.t-d-cno{flex:0 0 auto;font-family:var(--mono);font-size:var(--t-fs-xs);color:var(--acc);font-variant-numeric:tabular-nums}

/* 划线原价 + 折扣标签（v1.86 折扣功能；无 discount 时后端不渲染这两个元素） */
.t-d-was{font-size:var(--t-fs-sm);color:var(--fg-3);text-decoration:line-through;text-decoration-thickness:1px}
.t-d-off{padding:3px 9px;border-radius:7px;border:1px solid rgba(var(--acc-rgb),.42);background:linear-gradient(90deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-2-rgb),.14));font-size:var(--t-fs-xs);font-weight:650;color:var(--fg)}

/* 信任行：只列本站真实成立的承诺（设计稿的「修订同步 / 可答疑」未采用） */
.t-detail .t-d-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding:0;list-style:none;font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-d-trust li{display:flex;align-items:center;gap:6px}
.t-d-trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:.75}

/* ── 简介窗口层（v1.86）：遮罩 + 居中面板；X / 点层外 / Esc 三种关法（脚本在模板页尾） ── */
.t-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.t-modal[hidden]{display:none}
.t-modal-bd{position:absolute;inset:0;background:rgba(8,18,24,.62);backdrop-filter:blur(3px)}
.t-modal-panel{position:relative;display:flex;flex-direction:column;width:min(720px,100%);max-height:min(78vh,760px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--sh);overflow:hidden}
.t-modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.t-modal-h h2{font-size:var(--t-fs-lg);font-weight:700}
/* ★ v1.89：同上 —— 关窗 X 是 `<button>`，`color` 与 `border` 都被 reset 的
   `.t-root button{font:inherit;color:inherit;border:0}` (0,1,1) 压掉（实测：无色 + 无边框方框）。
   ★ v1.90：reset 已改 `:where()`，本前缀已非必需，保留。 */
.t-modal .t-modal-x{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg-2);cursor:pointer}
.t-modal-x:hover{color:var(--fg);border-color:var(--acc)}
.t-modal-x .ic{width:16px;height:16px}
.t-modal-b{padding:18px 20px 22px;overflow:auto}
.t-modal .t-modal-t{margin-bottom:12px;font-size:var(--t-fs-sm);color:var(--fg-3)}
.t-modal-b .t-d-lead{margin-top:0;max-width:76ch}
/* 窗口层打开时锁滚动：只关 overflow，不动 body 定位 ⇒ 不产生滚动跳动 */
html.t-lock{overflow:hidden}

/* ══ ★★ v2.00（用户 2026-10-11 拍板）· 专辑简介「首屏截取 + 查看完整」══════════
   背景：专辑简介上限 200 → 1000 字，前台改为与讲义详情页同一套口径。
   三个「非 .t-detail 容器」的页面要用详情页那套简介版式 ⇒ 不靠复制 DOM 结构，
   而是把规则**去前缀**重写一遍（详情页原规则保留不动，两边互不影响）。

   ① `.t-d-lead` 去前缀版：详情页那份是 (0,1,0)，首页/购买页可直接用。
   ② `.t-lead-more` / `.t-more` 去前缀版。★ `.t-more` **必须**写全（不能只写
      单类 `.t-more`），理由有两条：
      · 历史坑：reset 曾为 `.t-root button{font:inherit;color:inherit}` **(0,1,1)**，
        会把单类 (0,1,0) 的 font-size/color 压掉 —— 当年就是这么踩的（见 v1.89 注释）。
        ★ v1.90 已把该 reset 改成 `:where()`（特异性 0，见上方「基础重置」），故这条
        **现已不再构成威胁**；写成 (0,2,0) 是为不依赖 `:where()` 这一层，将来 reset
        若被改回也不会掉样式。
      · 对齐详情页 `.t-detail .t-d-more`（同为 0,2,0），站内形态一致。
      代价为零：不动 reset、不改任何既有规则。
   ③ 首页推荐位与购买页的简介**不再靠 CSS 行数截断**（原窄屏 `-webkit-line-clamp:5`
      已删，见下方窄屏段）：截断改由 `summary_lead` 在**后端按字数**做，
      这样「显示的」与「按钮出现与否」同源同判据 —— CSS 截行是视觉行为，
      JS 无从得知有没有真的被截掉，两者并存必然出现「有按钮但没截断」
      或「截断了却没有按钮」的错位。 */
/* ★ 2026-10-22 去重：本处曾**整族重复**一份 `.t-d-lead` 规则（`/p/ul/ol/li/>:last-child` 六条，
   与 L490–L500 逐字相同），已删冗余副本；口径以 L490 起那组为唯一定义处（同为单类选择器、
   声明逐字相同、顺序在后亦无覆盖效果 ⇒ 删除后渲染零变化）。 */
.t-lead-more{margin-top:6px}
.t-lead-more .t-more{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:var(--t-fs-sm);color:var(--acc);cursor:pointer}
.t-lead-more .t-more:hover{text-decoration:underline}
.t-lead-more .t-more .ic{width:14px;height:14px}

/* ★ 简介首屏摘要的换行口径：`summary_lead` 在块与块之间插入 `\n`（与详情页一致，
   那里靠 normal 空白折叠成空格）。但 `.t-lead` 基础规则带 `white-space:pre-line`
   ⇒ 那个 `\n` 会变成**硬换行**，首屏摘要会比详情页多出若干行。
   这里把带简介的 `.t-lead` 收成 normal，与详情页逐行一致。
   ★ 只作用于**含简介的** `.t-lead`（这两个页面里 `.t-lead` 也用于纯事实行，
   事实行不带 `\n`，pre-line 留着无害 ⇒ 不扩大到所有 `.t-lead`，避免影响事实行版式）。 */
.t-show .t-lead,
.t-lead.has-summary{white-space:normal}
/* ★ 2026-10-22 去重：`.t-factline` 曾在此**重复声明**一次（与 L151 逐字相同），已删冗余副本；
   口径以 L151 为唯一定义处（层级顺序不变，两者相同故删后渲染零变化）。 */
/* 购买页简介块与价格块的间距（无按钮时也要留白，故不靠 `.t-lead-more` 的 margin 兜底） */
.t-lead-block{margin-bottom:20px}
.t-lead-block .t-lead{margin-top:0}

/* SPEC 四宫格：≤1080 折成 2×2（此时右栏已收窄，四格会挤成每格 ~10 字宽） */
@media (max-width:1080px){
  .t-detail .t-d-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-d-spec > div:nth-child(odd){border-left:0}
  .t-d-spec > div:nth-child(n+3){border-top:1px solid var(--line-2)}
}

/* 讲义标签（v1.88：从独立芯片行并入状态行 ⇒ inline-flex、不再自带 margin-top） */
.t-d-tags{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.t-d-tags a{font-size:var(--t-fs-xs);color:var(--fg-2);border:1px solid var(--line);border-radius:7px;padding:4px 10px;text-decoration:none}
.t-d-tags a:hover{color:var(--fg);border-color:var(--acc)}
/* 状态行内更紧凑：该行正文 13px，芯片沿用 4px 上下内边距会把整行明显撑高 */
.t-d-status .t-d-tags a{padding:2px 9px}

/* 提示条（购买成功 / 已拥有 / 无正文） */
.t-d-note{display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel);font-size:var(--t-fs-sm);color:var(--fg-2);line-height:1.6}
.t-d-note.ok{border-color:rgba(var(--acc-3-rgb),.5);color:var(--fg)}
.t-d-note .ic{width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.t-d-note b{color:var(--fg);font-weight:700}

/* 成交区 */
.t-d-buy{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-2)}
/* v1.86：价格 + 划线原价 + 折扣徽标是一组；窄屏整组独占一行（否则它们会和 CTA 抢同一行，
   把 flex:1 1 0 的按钮压到内容宽度以下 —— 按钮文字 nowrap 就会溢出叠在一起） */
.t-d-priceline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.t-d-buy .t-price{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-weight:700;color:var(--acc)}
.t-d-buy .t-price{font-size:var(--t-fs-num);line-height:1;letter-spacing:-.02em}
.t-d-buy .t-price .u{font-size:var(--t-fs-sm);font-family:var(--sans);margin-left:4px}
.t-d-buy .t-cta svg,.t-d-buy .t-cta-2 svg{width:16px;height:16px}
.t-d-bal{font-size:var(--t-fs-sm);color:var(--fg-3);font-variant-numeric:tabular-nums}
.t-d-bal b{color:var(--fg);font-weight:600}

/* 确认下单面板 */
.t-d-confirm{width:100%;margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);backdrop-filter:var(--glass)}
.t-d-confirm-key{font-size:var(--t-fs-sm);color:var(--warn);line-height:1.7;max-width:64ch}
.t-detail .t-d-agree{display:flex;align-items:flex-start;gap:10px;margin:14px 0 6px;font-size:var(--t-fs-sm);color:var(--fg-2);line-height:1.7}
.t-d-agree input[type="checkbox"]{width:16px;height:16px;margin-top:3px;accent-color:var(--acc);flex:0 0 auto}
.t-d-agree a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line-2)}
.t-d-confirm .alert{margin:8px 0 0;font-size:var(--t-fs-sm);color:var(--warn)}
.t-d-confirm .alert[hidden]{display:none}
.t-d-confirm-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}

/* 点数不足 */
.t-detail .t-d-shortfall{margin-top:14px;font-size:var(--t-fs-sm);color:var(--fg-2);line-height:1.7;max-width:62ch}
.t-d-shortfall b{color:var(--fg);font-variant-numeric:tabular-nums}
.t-d-shortfall a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line-2)}

/* 退款警示（v1.89 用户裁定：「规格与授权」整节删除，六行里唯一不与上方重复的这条上移到信任行下方） */
.t-detail .t-d-warn{margin-top:14px;font-size:var(--t-fs-xs);color:var(--warn);line-height:1.7;max-width:60ch}

/* 分区（同年级相关讲义）—— v1.89 起「规格与授权」已删，本节只剩相关讲义；
   `.t-d-rows/.t-d-row/.t-d-k/.t-d-v` 随之成死代码一并删除 */
.t-d-sec{margin-top:52px}
.t-d-sec-h{display:flex;align-items:center;gap:11px;font-size:var(--t-fs-xl);font-weight:750;letter-spacing:-.015em}
.t-d-sec-h::before{content:"";width:3px;height:18px;border-radius:2px;background:linear-gradient(180deg,var(--acc),var(--acc-2));box-shadow:0 0 16px rgba(var(--acc-rgb),.6)}

/* 相关讲义网格（复用 .t-card 商品卡） */
.t-d-rel{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(180px,45vw),1fr))}

/* 吸底购买条（未购且有正文）：窄屏常驻、桌面随流（与旧 buybar 同语义） */
.t-d-buybar{position:sticky;bottom:0;z-index:40;margin-top:34px;border-top:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:var(--glass)}
.t-d-buybar-in{display:flex;align-items:center;gap:14px;max-width:1340px;margin:0 auto;padding:14px 22px}
.t-d-buybar-in .t-d-bal{flex:1 1 auto;min-width:0}
.t-d-buybar-in .t-cta svg{width:16px;height:16px}

/* ── 阅读器 ── */
.t-rd{display:flex;flex-direction:column;min-height:calc(100vh - var(--bar-h))}
.t-rd-bar{border-bottom:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 80%,transparent)}
.t-rd-bar-in{display:flex;align-items:center;gap:10px;height:56px}
.t-rd-back{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:var(--t-fs-sm);color:var(--fg-2);white-space:nowrap;transition:color .2s var(--ease),border-color .2s var(--ease)}
.t-rd-back:hover{color:var(--fg);border-color:var(--acc)}
.t-rd-back .ic{width:15px;height:15px}
.t-rd-title{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-fs-md);font-weight:650;color:var(--fg)}
.t-rd-mode{margin-left:auto;flex:0 0 auto;font-size:var(--t-fs-xs);color:var(--fg-3);white-space:nowrap}
.t-rd-dl{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:var(--t-fs-sm);color:var(--fg-2);white-space:nowrap}
.t-rd-dl:hover{color:var(--fg);border-color:var(--acc)}
.t-rd-dl .ic{width:15px;height:15px}

.t-rd-emptywrap{padding:40px 0}
.t-rd-alt{margin-top:16px}
.t-rd-alt a{color:var(--acc);font-size:var(--t-fs-sm)}

.t-rd-admin{display:flex;align-items:flex-start;gap:9px;margin:16px 0;padding:12px 14px;border:1px solid rgba(var(--acc-3-rgb),.45);border-radius:11px;background:var(--panel);font-size:var(--t-fs-sm);color:var(--fg-2);line-height:1.6}
.t-rd-admin .ic{width:16px;height:16px;margin-top:2px;flex:0 0 auto;color:var(--acc-3)}

/* 正文 iframe：视口式高度 = max(72vh, 100vh - 顶栏 - 100px)，可被 sp-h 只降不升收敛 */
.t-rd-frame{display:block;width:100%;border:0;flex:1 1 auto;
  min-height:72vh;height:calc(100vh - var(--bar-h) - 100px)}
.t-rd-frame{height:min(calc(100vh - var(--bar-h) - 100px),var(--sp-frame-h,calc(100vh - var(--bar-h) - 100px)))}
.t-rd-frame.sp-fit{min-height:0;flex:0 0 auto}
.t-rd-emptywrap .t-rd-frame{min-height:40vh}

/* 预览态购买引导 */
.t-rd-cta{border-top:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 80%,transparent)}
.t-rd-cta-in{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:20px 22px}
.t-rd-cta-txt{flex:1 1 280px;max-width:62ch;font-size:var(--t-fs-md);color:var(--fg-2);line-height:1.75}
.t-rd-cta-in .t-cta svg{width:16px;height:16px}

/* 完整态水印行 */
.t-rd-wm{display:flex;align-items:center;gap:8px;margin:0;padding:12px 22px;border-top:1px solid var(--line-2);font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-rd-wm .ic{width:14px;height:14px;flex:0 0 auto}

/* 浮动操作钮：右下，胶囊两枚；visibility 隐藏不进 Tab 序列 */
.t-rd-float{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:9px;transition:opacity .25s var(--ease),visibility .25s}
.t-rd-float[hidden]{visibility:hidden}
.t-rd-fb{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:var(--glass);font-size:var(--t-fs-sm);color:var(--fg);box-shadow:var(--sh);cursor:pointer}
.t-rd-fb:hover{border-color:var(--acc);color:var(--fg);box-shadow:var(--glow)}
.t-rd-fb .ic{width:15px;height:15px}
.t-rd-fb-tx{white-space:nowrap}

/* ── 详情/阅读器 窄屏 ── */
@media (max-width:960px){
  .t-d-head{grid-template-columns:1fr;gap:22px}
  /* 单列后铭牌收窄并居中：340px 靠左会显得右侧一大块空 */
  .t-d-plate{max-width:340px;margin:0 auto}
  /* v1.86：编号行跟着铭牌一起居中（铭牌 340px，编号文字居中才对齐） */
  .t-d-platecol{width:100%;max-width:340px;margin:0 auto}
  .t-d-code{justify-content:center}
  .t-d-rate{justify-content:center}
}
@media (max-width:820px){
  .t-rd-bar-in{gap:8px}
  .t-rd-frame{min-height:78vh}
  .t-rd-float{right:12px;bottom:12px}
}
@media (max-width:639px){
  .t-d-head{margin-top:16px}
  .t-d-title{font-size:clamp(24px,7.4vw,32px)}
  .t-d-buy{gap:12px;row-gap:12px}
  /* v1.86：价格组整组占一行；余额也单独占一行，把整行留给两枚 CTA（各约半行宽，不再被挤压重叠） */
  .t-d-buy .t-d-priceline{flex:1 0 100%}
  .t-d-priceline .t-price{flex:0 1 auto}
  .t-d-buy .t-d-bal{flex:1 0 100%}
  .t-d-buy .t-cta,.t-d-buy .t-cta-2{flex:1 1 0;min-width:0;justify-content:center;height:48px;white-space:nowrap;padding:0 10px}
  .t-d-rel{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  /* v1.86：CONTENTS 内距收一档；窗口层改为底部贴合（手机上居中面板留白太多） */
  .t-d-contents{padding:15px}
  .t-d-trust{gap:6px 14px}
  .t-modal{align-items:flex-end;padding:14px}
  .t-modal-panel{max-height:86vh}
  .t-rd-mode{display:none}
  .t-rd-title{font-size:var(--t-fs-sm)}
  .t-rd-back .t-rd-b-tx{display:none}
  .t-rd-bar-in{gap:6px}
  .t-rd-cta-in{gap:12px;padding:16px 15px}
  .t-rd-cta-in .t-cta{flex:1 1 100%;justify-content:center}
}

/* ============================================================================
   ★★ v1.80 · 个人中心 /me 与 /me/points（demo · 2026-10-06）──────────────
   作用域：demo-me-tech/demo.html（版式演示稿）；生产接线后服务个人中心两页。
   类名 t-m-*（me 页）+ t-tbl（玻璃面板表格）+ 复用既有 .t-panel/.t-cta/.t-pill。
   已拍板：已购＝前 8 份商品卡 + 「查看全部」；订单/流水＝玻璃面板表格。
   ========================================================================== */
.t-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 页头 ── */
.t-m-head{margin-top:26px}
.t-m-kicker{font-family:var(--mono);font-size:var(--t-fs-xs);color:var(--acc);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.t-m-title{font-size:clamp(26px,3vw,40px);line-height:1.14;letter-spacing:-.03em;font-weight:800;margin:0}
.t-m-sub{margin-top:10px;font-size:var(--t-fs-md);color:var(--fg-2)}
.t-m-sub b{color:var(--fg);font-family:var(--mono);font-weight:700}
.t-m-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.t-m-logout{display:inline-flex}
.t-m-acts .t-cta svg{width:16px;height:16px}
/* 演示稿标记（生产接线时这段 HTML 不出现，样式留着无害） */
.t-m-demo{display:inline-block;margin:12px 0 0;padding:4px 10px;border:1px dashed var(--line);border-radius:8px;font-size:var(--t-fs-xs);color:var(--fg-3)}

/* ── 余额玻璃统计卡 ── */
.t-m-bal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:26px;padding:24px 26px}
.t-m-bal-l{min-width:0}
.t-m-label{margin:0;font-size:var(--t-fs-xs);color:var(--fg-3);letter-spacing:.06em}
.t-m-bignum{display:flex;align-items:baseline;gap:7px;margin:8px 0 0;font-family:var(--mono);font-weight:700;color:var(--acc);line-height:1}
.t-m-bignum b{font-size:clamp(34px,4.6vw,44px);letter-spacing:-.02em}
.t-m-bignum span{font-family:var(--sans);font-size:var(--t-fs-sm);color:var(--fg-3);font-weight:500}
.t-m-hint{margin:10px 0 0;font-size:var(--t-fs-xs);color:var(--fg-3);line-height:1.7}
.t-m-hint b{color:var(--fg);font-family:var(--mono);font-weight:700}
.t-m-bal-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.t-m-bal-r .t-cta svg{width:16px;height:16px}
.t-m-bal-note{font-size:var(--t-fs-xs);color:var(--fg-3);font-variant-numeric:tabular-nums}

/* ── 分节标题 ── */
.t-m-sec{margin-top:52px}
.t-m-sec-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.t-m-sec-h h2{display:flex;align-items:center;gap:11px;margin:0;font-size:var(--t-fs-xl);font-weight:750;letter-spacing:-.015em}
.t-m-sec-h h2::before{content:"";width:3px;height:18px;border-radius:2px;background:linear-gradient(180deg,var(--acc),var(--acc-2));box-shadow:0 0 16px rgba(var(--acc-rgb),.6)}
.t-m-count{font-family:var(--mono);font-size:var(--t-fs-xs);color:var(--fg-3);font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.t-m-more{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:var(--t-fs-sm);color:var(--acc);text-decoration:none;white-space:nowrap}
.t-m-more:hover{text-decoration:underline}
.t-m-more svg{width:15px;height:15px}

/* ── 已购讲义网格：直接复用首页 `.t-grid`（2/3/4 列），不再单列一套 ── */
.t-m-more-rail{display:flex;justify-content:center;margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line-2)}

/* ── 玻璃面板表格 ── */
.t-tblwrap{margin-top:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ★ table-layout:fixed + <colgroup> 显式列宽：长标题才能稳定省略号收尾。
   不用 `td{max-width:0}` —— auto 布局下各浏览器对单元格 max-width 处理不一致。 */
.t-tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--t-fs-sm);min-width:640px}
.t-tbl caption.t-vh{text-align:left}
.t-tbl th,.t-tbl td{padding:13px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
/* v1.82 · 数据行纵向内边距 13→10：状态胶囊回归文档流后会撑行（24px > 17.5px 行高），
   收到 10px 后行高 20+24=44px，与改动前 43.5px 基本一致。表头保持 13px。 */
.t-tbl td{padding-top:10px;padding-bottom:10px}
.t-tbl thead th{font-size:var(--t-fs-xs);font-weight:600;color:var(--fg-3);letter-spacing:.05em;background:color-mix(in srgb,var(--bg) 60%,transparent)}
.t-tbl tbody tr:last-child td{border-bottom:0}
.t-tbl tbody tr:hover td{background:color-mix(in srgb,var(--acc) 5%,transparent)}
.t-tbl .t-num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ★ v1.83 · 纯右对齐（只改对齐，不带 mono 字体）：给「状态」这类非数字列用。
   口径：同一张表里，凡列内是「定长短值」（数字、时间戳、状态徽标）一律右对齐；
   只有「会换行的长文本」（订单号、讲义标题、备注）保持左对齐。 */
.t-tbl .t-end{text-align:right}
/* ★ v1.84 · 等宽数字但左对齐：给「点数流水」表用（该表各列统一左对齐）。
   与 .t-num 只差对齐方向，字体/数字等宽口径一致 —— 用户要的是「只改对齐」。 */
.t-tbl .t-num-l{text-align:left;font-family:var(--mono);font-variant-numeric:tabular-nums}
.t-tbl .t-mono{font-family:var(--mono);font-size:var(--t-fs-xs);color:var(--fg-2);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-tbl tbody td:not(.t-num):not(.t-num-l):not(.t-mono){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-tbl .pos{color:var(--acc-3)}
.t-tbl .neg{color:var(--fg)}

/* 订单状态徽标 —— v1.82 补 vertical-align:middle：胶囊是 inline-flex，默认按 baseline
   对齐会与同排文字错位；显式 middle 才能与「点数」「时间」严格同一水平轴线。 */
.t-badge{display:inline-flex;align-items:center;vertical-align:middle;height:24px;padding:0 9px;border-radius:999px;font-size:var(--t-fs-xs);border:1px solid var(--line);color:var(--fg-2);white-space:nowrap}
.t-badge.ok{border-color:rgba(var(--acc-3-rgb),.5);color:var(--acc-3)}
.t-badge.ref{border-color:var(--line);color:var(--fg-3)}

/* ★ v1.81（2026-10-06）：分页条 —— 订单记录一页 10 条，超出十条即分页（纯 SSR，无 JS）。
   口径：只有 1 页时**整条不渲染**；页码窗口（首、末、当前±1，其余折叠成 …）由服务端/模板算好，
   本件只负责排版。当前页用 `aria-current="page"`，首末页的禁用态用 `aria-disabled="true"`。 */
.t-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:16px}
.t-pager-info{margin-right:auto;font-size:var(--t-fs-xs);color:var(--fg-3);font-variant-numeric:tabular-nums}
.t-pager-info b{color:var(--fg);font-family:var(--mono);font-weight:700}
.t-pg{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:36px;height:36px;padding:0 11px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg-2);font-size:var(--t-fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.t-pg:hover{border-color:var(--acc);color:var(--fg)}
.t-pg svg{width:14px;height:14px}
.t-pg[aria-current]{background:linear-gradient(90deg,rgba(var(--acc-rgb),.14),rgba(var(--acc-2-rgb),.12));border-color:rgba(var(--acc-rgb),.4);color:var(--fg);font-weight:650}
.t-pg[aria-disabled="true"]{opacity:.4;pointer-events:none}
.t-pg-gap{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:36px;color:var(--fg-3);font-size:var(--t-fs-sm)}

/* ── 流水类型筛选（复用首页胶囊） ── */
.t-m-rail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.t-m-rail-label{font-size:var(--t-fs-xs);color:var(--fg-3);margin-right:2px}

/* ── 居中玻璃卡片（卡密充值表单） ── */
.t-m-card{max-width:560px;margin-top:20px;padding:26px}
.t-m-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-top:16px}
.t-fld{flex:1 1 240px;min-width:0;margin:0}
.t-fld label{display:block;font-size:var(--t-fs-xs);color:var(--fg-3);margin-bottom:7px}
.t-fld input{display:block;width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--fg);font-family:var(--mono);font-size:var(--t-fs-md);letter-spacing:.08em;outline:none}
.t-fld input::placeholder{color:var(--fg-3);opacity:.7}
.t-fld input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
.t-hint{display:block;margin-top:7px;font-size:var(--t-fs-xs);color:var(--fg-3);line-height:1.7}
.t-m-form .t-cta{height:46px;flex:0 0 auto}
.t-m-form .t-cta svg{width:16px;height:16px}

/* ── 窄屏 ── */
@media (max-width:820px){
  .t-m-bal{flex-direction:column;align-items:stretch}
  .t-m-bal-r{align-items:stretch;flex-direction:row;flex-wrap:wrap;justify-content:space-between}
  .t-m-sec{margin-top:42px}
}
@media (max-width:639px){
  .t-m-head{margin-top:20px}
  .t-m-title{font-size:clamp(24px,7.4vw,32px)}
  .t-m-more{margin-left:0}
  .t-m-sec-h h2{width:100%}
  .t-m-card{padding:18px}
  .t-m-form .t-cta{flex:1 1 100%;justify-content:center}
  /* v1.81：分页条窄屏 —— 「第 x–y 条 / 共 n 笔」独占一行，页码钮降档 */
  .t-pager{gap:5px}
  .t-pager-info{flex:1 0 100%;margin-right:0}
  .t-pg{min-width:32px;height:32px;padding:0 9px}
  .t-pg-gap{min-width:16px;height:32px}
}
@media (pointer:coarse){ .t-m-form .t-cta,.t-pg{min-height:44px} }

/* ── 推荐返点（我的推广，2026-10-21 视觉稿集成） ── */
.t-ref-code{display:flex;align-items:center;gap:12px;margin-top:10px}
.t-ref-code-v{font-family:var(--mono);font-size:clamp(34px,4.6vw,44px);font-weight:700;letter-spacing:.14em;color:var(--acc);line-height:1}
.t-ref-copy{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:var(--t-fs-xs);color:var(--fg-2);cursor:pointer;font-family:var(--sans)}
.t-ref-copy:hover{border-color:rgba(var(--acc-rgb),.5)}
.t-ref-copy.is-copied{color:var(--acc-3);border-color:rgba(var(--acc-3-rgb),.4)}

.t-ref-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:18px}
.t-ref-stat{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.t-ref-stat-v{display:block;font-family:var(--mono);font-size:var(--t-fs-num);font-weight:700;color:var(--fg);line-height:1}
.t-ref-stat-k{display:block;font-size:var(--t-fs-xs);color:var(--fg-3);margin-top:4px}

.t-ref-tiers{display:flex;gap:8px;margin-top:18px}
.t-ref-tier{flex:1;min-width:0}
.t-ref-tier-bar{display:block;height:9px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line-2)}
.t-ref-tier.is-reached .t-ref-tier-bar{background:rgba(var(--acc-rgb),.55);border-color:rgba(var(--acc-rgb),.55)}
.t-ref-tier.is-current .t-ref-tier-bar{background:linear-gradient(90deg,var(--acc),var(--acc-2));outline:1px dashed rgba(var(--acc-rgb),.55);outline-offset:2px}
.t-ref-tier-lbl{display:block;margin-top:6px;font-size:var(--t-fs-micro);color:var(--fg-3);text-align:center;white-space:nowrap}
.t-ref-tier.is-reached .t-ref-tier-lbl,.t-ref-tier.is-current .t-ref-tier-lbl{color:var(--acc);font-weight:600}

.t-ref-tbl{width:100%;border-collapse:collapse;font-size:var(--t-fs-sm);margin-top:10px}
.t-ref-tbl th{font-family:var(--mono);font-size:var(--t-fs-micro);letter-spacing:.06em;color:var(--fg-3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2);font-weight:500}
.t-ref-tbl td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.t-ref-tbl tr:last-child td{border-bottom:0}
.t-ref-tbl .t-num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.t-ref-tbl .t-pos{color:var(--acc-3)}
.t-ref-tbl .t-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-3)}
@media (max-width:639px){ .t-ref-tbl th,.t-ref-tbl td{padding:8px 6px} }

/* ══════════════════════════════════════════════════════════════════════════
   读者留言 + 星级（2026-10-10，用户拍板新增）

   ★ 打分控件＝原生 radio 组 + 纯 CSS 点亮：**DOM 顺序 5→1**，容器 `row-reverse`
     ⇒ 视觉上 1→5 从左到右，而 `input:checked ~ label` 恰好点亮「所点的那颗及其左侧」。
     无 JS、radio 组自带键盘与屏幕阅读器语义（见用户裁定）。
   ★ 详情页状态行的星级展示用「底灰满格字 + 前景同字按百分比裁切」，支持任意小数（4.6 → 92%）。
   ★ 只使用本表已有的令牌（--panel-2/--line/--fg / --acc/--warn/--mono/--ease/--t-fs-*）；
     注意 `--cyan` 只在 app.css 里，本表没有，焦点环一律用 `--acc`。
   ══════════════════════════════════════════════════════════════════════════ */
.t-root .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}

/* ---------- 讲义图片下方的读者评分（2026-10-10 用户裁定移动） ---------- */
.t-d-rate{display:flex;align-items:center;gap:6px;margin:12px 0 0;padding:0 2px}
.t-d-rate.none{color:var(--fg-3)}
.t-d-rate b{font-family:var(--mono);font-size:var(--t-fs-lg);color:var(--fg)}
.t-d-rate-t{font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-d-stars{position:relative;display:inline-block;line-height:1;letter-spacing:1px;font-size:var(--t-fs-xl)}
.t-d-stars .bg{color:var(--line)}
.t-d-stars .fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--acc)}

/* ---------- 留言区 ---------- */
.t-cmts{margin-top:34px}
.t-cmts-n{font-size:var(--t-fs-xs);color:var(--fg-3);font-weight:400;margin-left:8px}
.t-cmt-msg{margin:10px 0 0;font-size:var(--t-fs-sm);border-left:2px solid var(--line);padding:6px 0 6px 11px}
.t-cmt-msg.ok{border-left-color:var(--acc);color:var(--fg-2)}
.t-cmt-msg.err{border-left-color:var(--warn);color:var(--warn)}
.t-cmt-mine{margin-top:14px;border:1px dashed var(--line);border-radius:10px;padding:12px 14px}
.t-cmt-mine-h{font-size:var(--t-fs-xs);color:var(--fg-3);font-weight:600;margin-bottom:8px}
.t-cmt-list{list-style:none;margin:14px 0 0;padding:0}
.t-cmt{padding:12px 0;border-bottom:1px solid var(--line-2)}
.t-cmt-mine .t-cmt:last-child{border-bottom:0;padding-bottom:0}
.t-cmt-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-cmt-u{color:var(--fg);font-size:var(--t-fs-sm)}
.t-cmt-buy{border:1px solid var(--acc);color:var(--acc);border-radius:4px;padding:0 5px;font-size:var(--t-fs-micro)}
.t-cmt-rate{color:var(--acc);letter-spacing:1px}
.t-cmt-st{border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:var(--t-fs-micro);color:var(--fg-3)}
.t-cmt-st.pending{border-color:var(--acc);color:var(--acc)}
.t-cmt-t{margin-left:auto;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:var(--t-fs-micro)}
.t-cmt-b{margin:6px 0 0;font-size:var(--t-fs-sm);line-height:1.75;color:var(--fg-2);white-space:pre-wrap;word-break:break-word}

/* ---------- 发表区 ---------- */
.t-cmt-form{margin-top:16px}
.t-rate{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.t-rate-k{font-size:var(--t-fs-xs);color:var(--fg-3)}
.t-rate-stars{display:inline-flex;flex-direction:row-reverse;gap:2px}
.t-rate-stars input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.t-rate-stars label{font-size:24px;line-height:1;color:var(--line);cursor:pointer;transition:color .15s var(--ease)}
.t-rate-stars label:hover,
.t-rate-stars label:hover ~ label,
.t-rate-stars input:checked ~ label{color:var(--acc)}
.t-rate-stars input:focus-visible + label{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}
.t-rate-hint{font-size:var(--t-fs-micro);color:var(--fg-3)}
.t-cmt-in{width:100%;box-sizing:border-box;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--fg);font-family:var(--sans);font-size:var(--t-fs-sm);line-height:1.7;padding:10px 12px;resize:vertical;min-height:76px}
.t-cmt-in:focus{outline:none;border-color:var(--acc)}
.t-cmt-in:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.t-cmt-act{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.t-cmt-tip{font-size:var(--t-fs-micro);color:var(--fg-3)}
.t-cmt-login{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
@media (max-width:639px){
  .t-cmt-t{margin-left:0;flex:1 0 100%}
  .t-rate-stars label{font-size:22px}
}

/* ══════════════════════════════════════════════════════════════════════════
   认证 / 条款 / 错误页（★ 2026-10-10 classic 退役时新增）
   —— 登录·注册·找回·重置、三个条款页、404/500 原先共用 classic 外壳
      （base.html + app.css）；退役后统一走 _tech_base.html + 本表。
   —— 类名一律 t- 前缀；只用本表既有令牌（--acc / --fg* / --line* / --panel* /
      --r / --t-fs-*），不引入新色。★ 本注释不得出现注释结束符（星号紧跟斜杠）。
   ══════════════════════════════════════════════════════════════════════════ */
.t-auth{width:50%;min-width:320px;max-width:520px;margin:0 auto;padding:34px 0 26px}
@media (max-width:639px){
  .t-auth{width:100%}
}
.t-auth h1{font-size:var(--t-fs-num);font-weight:750;letter-spacing:-.015em}
.t-auth-sub{margin-top:9px;font-size:var(--t-fs-sm);line-height:1.7;color:var(--fg-3)}
.t-auth .t-panel{margin-top:20px;padding:22px}
/* 复用既有 .t-fld / .t-hint 结构（原为卡密那张表）—— 只覆盖两处不适用：
   ① 卡密输入是 mono + 字距（16 位码），账号/密码/邮箱不该用；
   ② 卡密表是横排 flex，这里是竖排。 */
.t-auth .t-fld{flex:none;width:100%}
.t-auth .t-fld + .t-fld{margin-top:16px}
.t-auth .t-fld input{font-family:var(--sans);letter-spacing:normal}
.t-auth form .t-cta{width:100%;margin-top:20px;justify-content:center}
.t-auth-alt{margin-top:18px;font-size:var(--t-fs-sm);color:var(--fg-3)}
.t-auth-alt a{color:var(--acc);text-decoration:none}
.t-auth-alt a:hover{text-decoration:underline}
.t-auth-alt .dot{margin:0 7px;color:var(--line-2)}
.t-alert{margin-top:16px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-radius:var(--r);background:var(--panel)}
.t-alert b{font-size:var(--t-fs-sm);line-height:1.65;color:var(--warn)}
.t-alert.ok{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.t-alert.ok b{color:var(--acc)}
.t-agree{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:var(--t-fs-xs);line-height:1.65;color:var(--fg-2)}
.t-agree input{flex:0 0 auto;width:16px;height:16px;margin-top:2px;accent-color:var(--acc)}
.t-agree a{color:var(--acc);text-decoration:none}
.t-agree a:hover{text-decoration:underline}
.t-captcha-box{display:flex;align-items:center;gap:10px;width:100%}
.t-captcha-inp{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px}
.t-captcha-inp input{flex:1 1 auto;min-width:0}
.t-captcha-img-btn{flex:0 0 auto;height:44px;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--r);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s,opacity .15s}
.t-captcha-img-btn:hover{border-color:var(--acc)}
.t-captcha-img-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.t-captcha-img-btn:disabled{opacity:.6;cursor:wait}
.t-captcha-img-btn img{display:block;width:auto;height:42px;border-radius:calc(var(--r) - 1px)}
/* 填数实时判定：固定占位，避免 √/× 出现时输入框宽度跳动 */
.t-captcha-mark{flex:0 0 18px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.7);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.t-captcha-mark.on{opacity:1;transform:scale(1)}
.t-captcha-mark.ok{color:var(--ok)}
.t-captcha-mark.bad{color:var(--bad)}
.t-captcha-mark svg{display:block;width:18px;height:18px}
@media (prefers-reduced-motion:reduce){
  .t-captcha-mark{transition:none}
}
@media (max-width:420px){
  .t-captcha-box{flex-direction:column;align-items:stretch;gap:8px}
  .t-captcha-img-btn{width:auto;align-self:flex-start;height:44px}
  .t-captcha-img-btn img{height:42px;width:auto}
}
.t-doc{max-width:820px;padding:30px 0 20px}
.t-doc h1{font-size:var(--t-fs-num);font-weight:750;letter-spacing:-.015em}
.t-doc-meta{margin-top:12px;font-size:var(--t-fs-sm);line-height:1.75;color:var(--fg-3)}
.t-doc h2{margin-top:30px;padding-top:20px;border-top:1px solid var(--line-2);font-size:var(--t-fs-lg);font-weight:700}
.t-doc p{margin-top:11px;font-size:var(--t-fs-md);line-height:1.9;color:var(--fg-2)}
.t-doc ul{margin-top:11px;padding-left:20px;display:grid;gap:9px}
.t-doc li{font-size:var(--t-fs-md);line-height:1.85;color:var(--fg-2)}
.t-doc b{font-weight:650;color:var(--fg)}
.t-doc a{color:var(--acc);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
.t-doc a:hover{border-bottom-color:var(--acc)}
.t-doc-key{margin-top:15px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r);background:var(--panel)}
.t-doc .t-auth-alt a{border-bottom:0}