/* ============================================================
   合规卫士 · Web 体验页样式
   自带深浅双主题：默认深色（作品集展示），data-theme="light" 切浅色。
   不依赖任何 CSS 框架。
   ============================================================ */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* 严重度色板：与风险语义一致（越红越危险） */
  --sev-critical: #e5484d;
  --sev-high: #f0883e;
  --sev-medium: #e3b341;
  --sev-low: #7d8590;
}

/* ---------- 深色（默认） ---------- */
html[data-theme="dark"] {
  --bg: #0d1117;
  --bg-elev: #161b22;
  --bg-elev-2: #1c232c;
  --border: #2a323c;
  --border-strong: #3d4753;
  --text: #e6edf3;
  --text-2: #adb6c0;
  --text-3: #949da8;          /* 原 #6b7580：在深底上只有 3.8:1，验收时被量出来了 */
  --accent: #6cb0ff;          /* 这个变量专供"深底上的蓝字/描边"，要够亮 */
  --accent-soft: rgba(108, 176, 255, 0.13);
  --accent-solid: #1f6feb;    /* 这个专供"蓝色实底按钮"，白字压在上面必须 ≥4.5:1 */
  --ok: #3fb950;
  --sev-critical: #ff6b6b;    /* 原 #e5484d：压在暗红底上只有 3.8:1 */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- 浅色 ---------- */
html[data-theme="light"] {
  --bg: #f6f8fa;
  --bg-elev: #ffffff;
  --bg-elev-2: #f0f3f6;
  --border: #d8dee4;
  --border-strong: #c2cbd4;
  --text: #1f2328;
  --text-2: #4c545c;
  --text-3: #656d76;          /* 原 #818b96：在白底上只有 3.46:1 */
  --accent: #0969da;
  --accent-soft: rgba(9, 105, 218, 0.08);
  --accent-solid: #0969da;
  --ok: #166b2f;              /* 原 #1a7f37：压在 own 浅绿底上只有 4.32:1 */
  --sev-critical: #c11a25;    /* 原 #e5484d 是给深色配的，放浅底上太亮 */
  /* 严重度色是"深色优先"调的，直接搬到白底上会糊成一片：
     黄色 1.7:1、橙色 2.3:1 —— 等于没写。浅色主题必须各自加深一档。 */
  --sev-high: #a84300;
  --sev-medium: #8a6100;
  --sev-low: #6b7580;
  --shadow: 0 1px 2px rgba(31, 35, 40, 0.08);
}

* { box-sizing: border-box; }

/* ------------------------------------------------------------
   hidden 必须是"真的隐藏"

   `[hidden] { display: none }` 来自浏览器默认样式表，优先级只有 (0,1,0)，
   任何作者写的 `.layout { display: grid }` 都能把它盖掉 —— 而属性选择器
   和类选择器**同权重**，作者样式又后于默认样式，于是 hidden 彻底失效。

   真实后果（2026-09-15 体检发现）：标签页的 <main hidden> 依然参与布局，
   点「词库浏览」时目标页被渲染在页面下方 1000px 处 —— **看起来像点击没反应**。
   更糟的是，单条检测页下方一直拖着整个批量检测面板。

   而当时的冒烟测试断言的是 `el.hidden`（属性值），属性明明是对的，
   测试全绿。属性是对的、页面是坏的 —— 所以这里显式兜底，
   并且把测试改成断言"实际可见性"。
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================ 顶栏 */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.brand__mark {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.brand__sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
  border-left: 1px solid var(--border-strong);
  padding-left: 10px;
  margin-left: 2px;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}

.privacy__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

.iconbtn {
  background: var(--bg-elev-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.iconbtn:hover { border-color: var(--border-strong); color: var(--text); }

/* ============================================================ 布局 */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  padding: 16px 24px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; padding: 12px; }
}

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.panel__title {
  margin: 0;
  /* 原为 13px/--text-2：面板标题比正文（14px）还小，
     层级是倒挂的——标题读起来像附注。抬到与正文同级并给足对比，
     靠字重（600 vs 400）和位置区分层级。 */
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
}

/* ============================================================ 输入区 */

.controls { display: flex; gap: 8px; flex-wrap: wrap; }

select {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

textarea#input,
textarea#bInput {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  padding: 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.75;
}
textarea#input::placeholder,
textarea#bInput::placeholder { color: var(--text-3); }

.samples {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 12px;
  font-size: 12px;
  color: var(--text-3);
}

.chip {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-2);
}
.switch input { accent-color: var(--accent); }

/* ============================================================ 评分区 */

.score {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.ring { position: relative; width: 96px; height: 96px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring__track { stroke: var(--bg-elev-2); }
.ring__value {
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
  stroke-linecap: round;
}
.ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.ring__num { font-size: 22px; font-weight: 600; line-height: 1; }
.ring__unit { font-size: 10px; color: var(--text-3); margin-top: 3px; }

.score__meta { flex: 1 1 200px; min-width: 180px; }

.riskline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.risk-badge {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid;
}
.risk-badge[data-risk="高风险"] { color: var(--sev-critical); border-color: var(--sev-critical); background: color-mix(in srgb, var(--sev-critical) 14%, transparent); }
.risk-badge[data-risk="中风险"] { color: var(--sev-high); border-color: var(--sev-high); background: color-mix(in srgb, var(--sev-high) 14%, transparent); }
.risk-badge[data-risk="低风险"] { color: var(--sev-medium); border-color: var(--sev-medium); background: color-mix(in srgb, var(--sev-medium) 14%, transparent); }
.risk-badge[data-risk="基本合规"] { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
/* 空态（还没输入）用中性档，别借用"基本合规"的绿色 —— 那等于替用户下结论 */
.risk-badge[data-risk=""] { color: var(--text-3); border-color: var(--border-strong); background: transparent; }

.risk-sub { font-size: 12px; color: var(--text-3); }

.counts { display: flex; gap: 6px; flex-wrap: wrap; }
.count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-2);
}
.count__dot { width: 6px; height: 6px; border-radius: 50%; }
.count[data-empty="1"] { opacity: 0.4; }

/* ============================================================ 命中列表 */

.findings { max-height: 460px; overflow-y: auto; }

.finding {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.finding:last-child { border-bottom: none; }
.finding[data-sev="critical"] { border-left-color: var(--sev-critical); }
.finding[data-sev="high"] { border-left-color: var(--sev-high); }
.finding[data-sev="medium"] { border-left-color: var(--sev-medium); }
.finding[data-sev="low"] { border-left-color: var(--sev-low); }

.finding__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.sev-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid;
}
.sev-tag[data-sev="critical"] { color: var(--sev-critical); border-color: color-mix(in srgb, var(--sev-critical) 45%, transparent); background: color-mix(in srgb, var(--sev-critical) 12%, transparent); }
.sev-tag[data-sev="high"] { color: var(--sev-high); border-color: color-mix(in srgb, var(--sev-high) 45%, transparent); background: color-mix(in srgb, var(--sev-high) 12%, transparent); }
.sev-tag[data-sev="medium"] { color: var(--sev-medium); border-color: color-mix(in srgb, var(--sev-medium) 45%, transparent); background: color-mix(in srgb, var(--sev-medium) 12%, transparent); }
.sev-tag[data-sev="low"] { color: var(--sev-low); border-color: var(--border-strong); background: var(--bg-elev-2); }

.finding__word {
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-elev-2);
}

.tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.finding__cat { font-size: 12px; color: var(--text-3); margin-left: auto; }

.finding__ctx {
  font-size: 12.5px;
  color: var(--text-2);
  margin: 4px 0 5px;
  font-family: var(--font-mono);
  word-break: break-all;
}
.finding__ctx em {
  font-style: normal;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 3px;
  padding: 0 1px;
}

.finding__tip {
  font-size: 12.5px;
  color: var(--text-2);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.finding__tip b { color: var(--text-3); font-weight: 400; flex: 0 0 auto; }

/* 依据行：把"违反哪一条"作为**可核验的引用**呈现。
   刻意做成一块浅底引用区（而非又一行灰字），因为它是这个工具与
   "违禁词表"的分界线——用户要能选中、复制、拿去跟平台/法务对话。 */
.finding__tip--law {
  margin-top: 6px;
  padding: 5px 9px;
  background: var(--bg-elev-2);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 6px 6px 0;
}
.finding__tip--law b { color: var(--text-2); }
.finding__tip--law code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  color: var(--text-2);
  user-select: text;
}

/* ============================================================ 高亮预览 */

.preview {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 2;
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.preview mark {
  border-radius: 3px;
  padding: 1px 2px;
  color: inherit;
  text-decoration: none;
}
.preview mark[data-sev="critical"] { background: color-mix(in srgb, var(--sev-critical) 32%, transparent); box-shadow: inset 0 -2px 0 var(--sev-critical); }
.preview mark[data-sev="high"] { background: color-mix(in srgb, var(--sev-high) 32%, transparent); box-shadow: inset 0 -2px 0 var(--sev-high); }
.preview mark[data-sev="medium"] { background: color-mix(in srgb, var(--sev-medium) 32%, transparent); box-shadow: inset 0 -2px 0 var(--sev-medium); }
.preview mark[data-sev="low"] { background: color-mix(in srgb, var(--sev-low) 28%, transparent); box-shadow: inset 0 -2px 0 var(--sev-low); }

.safe {
  margin: 0 16px 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
}
.safe__head { font-size: 12px; color: var(--ok); margin-bottom: 6px; font-weight: 600; }

.actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.btn {
  background: var(--accent-solid);
  color: #fff;
  border: 1px solid var(--accent-solid);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-strong);
}
.btn--ghost:hover { color: var(--text); opacity: 1; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.empty__big { font-size: 26px; margin-bottom: 8px; }

/* ============================================================ 页脚 */

.footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 4px 24px 32px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.9;
}
.footer code {
  font-family: var(--font-mono);
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}
.footer__stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }

/* ============================================================ 引导区 */

.hero {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 0;
}
/* 首屏标题是"这工具到底干嘛的"唯一入口。原为 19px —— 只比正文大 5px，
   读起来像一个小节标题，用户扫过去不知道这页在解决什么。 */
.hero h1 {
  margin: 0 0 9px;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.hero p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  /* 收窄行宽：900px 下一行要扫 60+ 个字，读到一半会丢行 */
  max-width: 820px;
  line-height: 1.8;
}
.hero b { color: var(--accent); font-weight: 600; }

/* ============================================================ 严重度分组标题 */

.findings__group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}
.findings__group[data-sev="critical"] { color: var(--sev-critical); }
.findings__group[data-sev="high"] { color: var(--sev-high); }
.findings__group[data-sev="medium"] { color: var(--sev-medium); }
.findings__group[data-sev="low"] { color: var(--sev-low); }
.findings__group span { font-weight: 400; color: var(--text-3); }

/* ---------- 附加徽章 ---------- */

.tag--warn {
  background: color-mix(in srgb, var(--sev-medium) 15%, transparent);
  color: var(--sev-medium);
  border-color: color-mix(in srgb, var(--sev-medium) 40%, transparent);
}
.tag--src {
  background: var(--bg-elev-2);
  color: var(--text-3);
  border-color: var(--border);
}
.tag--var {
  background: color-mix(in srgb, var(--sev-high) 14%, transparent);
  color: var(--sev-high);
  border-color: color-mix(in srgb, var(--sev-high) 38%, transparent);
}

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================ 跨平台对比矩阵 */

.matrix {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  overflow: hidden;
}
.matrix__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}
.matrix__verdict {
  font-weight: 400;
  color: var(--text-3);
  font-size: 12px;
}
.matrix__verdict b { color: var(--accent); }
.matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.matrix th,
.matrix td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.matrix tbody tr:last-child td { border-bottom: none; }
.matrix th {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
}
.matrix td.num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.matrix .plat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.matrix .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* 该平台独有的命中——差异就体现在这里 */
.matrix .only {
  color: var(--sev-high);
  font-size: 12px;
}
.matrix .none { color: var(--text-3); font-size: 12px; }
.matrix tr[data-current="1"] { background: var(--accent-soft); }

/* ============================================================ AI 改写区 */

.ai {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  padding: 13px 15px;
}
.ai__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ai__title { font-size: 13px; font-weight: 600; }
.ai__hint { font-size: 11.5px; color: var(--text-3); }
.ai__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.ai__note {
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.75;
}
.ai__note b { color: var(--text-2); }
.ai__result { margin-top: 11px; }
.ai__result pre {
  margin: 0;
  padding: 11px 13px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai__changes { margin-top: 10px; }
.ai__change {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12.5px;
}
.ai__change:last-child { border-bottom: none; }
.ai__change .del { color: var(--sev-critical); text-decoration: line-through; }
.ai__change .add { color: var(--ok); }
.ai__change .why { color: var(--text-3); font-size: 11.5px; }
.ai__unresolved {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sev-medium) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sev-medium) 32%, transparent);
  font-size: 12px;
  line-height: 1.8;
}
.ai__unresolved b { color: var(--sev-medium); }
.ai--wait { color: var(--text-3); font-size: 12.5px; }
.ai--err { color: var(--sev-high); font-size: 12.5px; }

/* ============================================================ 差异说明区 */

.diff {
  max-width: 1440px;
  margin: 0 auto;
  padding: 26px 24px 8px;
  border-top: 1px solid var(--border);
  margin-top: 22px;
}
.diff__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.diff__lead {
  margin: 0;
  max-width: 920px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.85;
}
.diff__lead b { color: var(--text); }
.diff__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 12px;
  margin-top: 15px;
}
.dcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  padding: 14px 16px;
}
.dcard h3 {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.dcard p {
  margin: 0 0 9px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.85;
}
.dcard__fact {
  margin-top: auto !important;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--text-3) !important;
  font-size: 12px !important;
}
.dcard__fact b { color: var(--accent); }
.dcard__demo {
  margin-top: 4px;
  align-self: flex-start;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.dcard__demo:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.dcard__demo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================ 标签页 */

.tabs {
  display: flex;
  gap: 4px;
  /* 与 .hero / .layout 对齐（原先 1240，正文 1440）：
     切页时左边缘会横跳 100px，四个页签看起来像四个不同的站。 */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tabs__btn {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 不许被压缩、不许折行 —— 见下面 .tabs__ico 的说明 */
  flex: 0 0 auto;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tabs__btn:hover { color: var(--text); }
.tabs__btn.is-on { color: var(--text); border-bottom-color: var(--accent); }
.tabs__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tabs__badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}

/* 页签图标必须在这里给尺寸。
   原先尺寸只写在 max-width:720px 的移动端块里，于是 >720px（平板 + 所有桌面）
   下这个 <svg> 既没有 width/height 属性、也没有 CSS 尺寸，浏览器按替换元素的
   默认内在尺寸（300×150，受 viewBox 1:1 约束）参与布局 →
   每个页签的 max-content 被撑到 300px 级 → 一行放不下 → flex 收缩 →
   文字被压到 25px 宽，变成"每行一个字"的竖排字（实测量到：文本 25×72px、
   页签条高 95px）。补上尺寸后：文本 54×18 单行、页签条高 44px。 */
.tabs__ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
}

/* ============================================================ 体验路径 */

.guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.guide li {
  display: flex;
  align-items: baseline;
  gap: 4px 8px;
  flex-wrap: wrap;
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.guide__n {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.guide__t { font-size: 12.5px; font-weight: 600; color: var(--text); }
.guide__d { flex: 1 0 100%; font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* ============================================================ 对照实验 */

/* 这一块是全页最有说服力的地方：同一引擎、同一文案，唯一变量是行业词库。
   不用形容词，直接把两组数字并排放出来。 */
.ab {
  margin: 0 16px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--accent-soft);
  border-radius: 10px;
  overflow: hidden;
}

.ab__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.ab__tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-elev);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 999px;
  padding: 1px 8px;
}

.ab__grid { display: grid; grid-template-columns: 1fr 1fr; }
.ab__col { padding: 11px 13px; min-width: 0; }
.ab__col + .ab__col { border-left: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }

.ab__label { font-size: 11.5px; color: var(--text-2); margin-bottom: 5px; }
.ab__score { font-size: 26px; font-weight: 700; line-height: 1.15; }
.ab__unit { font-size: 11.5px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.ab__verdict { font-size: 12px; margin-top: 3px; color: var(--text-2); }

.ab__list { margin: 7px 0 0; padding-left: 16px; font-size: 12px; color: var(--text-2); }
.ab__list li { margin: 2px 0; }

.ab__note {
  padding: 9px 13px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-2);
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ============================================================ 改前 / 改后迭代 */

/* 内容运营的真实节奏是"检测 → 改 → 再检测"，光有一把尺子不够，
   还得回答"这一轮改干净了没、有没有改出新问题"。
   刻意用中性容器而不是绿色：改完不一定变好，颜色留给里面的数字去说。 */
.iter {
  margin: 0 16px 14px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 10px;
  overflow: hidden;
}

.iter__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.iter__tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

.iter__scores {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 13px 10px;
}

.iter__side { display: flex; align-items: baseline; gap: 6px; }
.iter__lb { font-size: 11.5px; color: var(--text-3); }
.iter__score { font-size: 24px; font-weight: 700; line-height: 1.1; }
.iter__cnt { font-size: 11.5px; color: var(--text-3); }

.iter__arrow { font-size: 14px; font-weight: 600; color: var(--text-3); }
.iter__arrow b { margin-left: 5px; font-size: 13px; }

.iter__rows { display: flex; flex-direction: column; gap: 5px; padding: 0 13px 6px; }
.iter__row { display: flex; align-items: baseline; gap: 9px; min-width: 0; }

.iter__k { flex: 0 0 auto; min-width: 86px; font-size: 11.5px; color: var(--text-2); }
/* 「新引入」是这块最该被看见的一行，给它最重的颜色 */
.iter__row[data-k="added"] .iter__k { color: var(--sev-critical); font-weight: 600; }

.iter__v { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

.iter__chip {
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.iter__chip.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.iter__chip.is-bad { color: var(--sev-critical); border-color: color-mix(in srgb, var(--sev-critical) 34%, transparent); }

.iter__none, .iter__more { font-size: 11.5px; color: var(--text-3); }

.iter__done, .iter__warn {
  padding: 9px 13px;
  font-size: 11.5px;
  line-height: 1.6;
  border-top: 1px solid var(--border);
}
.iter__done { color: var(--ok); }
.iter__warn { color: var(--sev-critical); }

/* 窄屏：分数对比竖排，标签不再占固定宽度 */
@media (max-width: 560px) {
  .iter__scores { gap: 6px 10px; }
  .iter__row { flex-direction: column; gap: 3px; }
  .iter__k { min-width: 0; }
}

/* ============================================================ 词库健康度 */

/* 规则驱动型工具不会"坏掉"，只会过期。这块面板把"规则有没有过期"
   做成页面上可扫一眼的指标，而不是藏在维护者脑子里的约定。 */
.health {
  margin: 0 16px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev-2);
  overflow: hidden;
}
.health__sum {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  user-select: none;
}
.health__sum::-webkit-details-marker { display: none; }
.health__sum b { font-weight: 600; color: var(--text); flex: 0 0 auto; }
.health__brief {
  color: var(--text-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health__chev { color: var(--text-3); font-size: 12px; flex: 0 0 auto; }
.health[open] .health__chev::after { content: " ▾"; }
.health:not([open]) .health__chev::after { content: " ▸"; }

.health__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-3);
}
.health__dot--ok { background: var(--ok); }
.health__dot--warn { background: var(--sev-high); }
.health__dot--bad { background: var(--sev-critical); }

.health__body {
  padding: 0 14px 12px;
  border-top: 1px solid var(--border);
}
.health__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 10px;
}
.health__body th,
.health__body td {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.health__body th { color: var(--text-3); font-weight: 500; }
.health__body td { color: var(--text-2); }
.health__body td.num { font-variant-numeric: tabular-nums; }

.hstat {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-3);
}
.hstat[data-status="ok"] { color: var(--ok); }
.hstat[data-status="due_soon"] { color: var(--sev-high); }
.hstat[data-status="overdue"] { color: var(--sev-critical); font-weight: 600; }

.health__notes { margin-top: 10px; display: grid; gap: 6px; }
.health__note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--text-2);
  padding: 6px 9px;
  border-left: 2px solid var(--border-strong);
  border-radius: 0 6px 6px 0;
  background: var(--bg);
}
.health__note b { color: var(--text); font-weight: 600; }
.health__legend,
.health__empty {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ============================================================ 最近检测 */

.hist {
  border-top: 1px solid var(--border);
  padding: 11px 16px 14px;
}

.hist__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hist__title { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.hist__hint { font-size: 11.5px; color: var(--text-3); margin-top: 6px; line-height: 1.55; }
.hist__list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.hitem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.hitem--click { cursor: pointer; transition: border-color 0.15s ease; }
.hitem--click:hover { border-color: var(--border-strong); }
.hitem--click:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hitem__score { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.hitem__txt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.hitem__time { flex: 0 0 auto; font-size: 11px; color: var(--text-3); }

.linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-3);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--text); }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================ 批量检测 */

.bstat {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.bcard {
  flex: 1 1 76px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 11px;
}
.bcard b { display: block; font-size: 20px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.bcard span { font-size: 11.5px; color: var(--text-2); }

.btable { overflow-x: auto; }
.btable table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.btable th,
.btable td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.btable th {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-elev-2);
  white-space: nowrap;
}
.btable tbody tr:last-child td { border-bottom: none; }
.btable td.num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.btable td.idx { color: var(--text-3); font-variant-numeric: tabular-nums; width: 34px; }
.btable .btext {
  max-width: 300px;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.btable .bwords { color: var(--text-2); }
.btable .bwords em { font-style: normal; }

/* ============================================================ 词库浏览 */

/* 四个页签的内容容器宽度必须一致，否则切页时左边缘会跳：
   原先 single/batch 是 .layout 的 1440、rules 是 1240、
   my 完全没有规则（.mylib 在样式表里不存在 → 铺满 1440 且左右 0 内边距）。 */
.rules { max-width: 1440px; margin: 0 auto; padding: 20px 24px; }
.mylib { max-width: 1440px; margin: 0 auto; padding: 20px 24px; }

.search {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-family: inherit;
  min-width: 230px;
  flex: 1 1 230px;
}
.search::placeholder { color: var(--text-3); }

.rlist { display: flex; flex-direction: column; }

.ritem {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
}
.rlist .ritem:last-child { border-bottom: none; }

.ritem__k {
  flex: 0 0 180px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
  padding-top: 1px;
}
/* 行内改成"折行流"：标签独占一行，建议与「可改为」并排，
   依据再独占一行 —— 原先四个块各占一行（每行一个 margin-top），
   实测行高 107px，一屏只看得到 3 条规则，1396 条要翻 35 页。 */
.ritem__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}
.ritem__meta {
  flex: 0 0 100%;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.ritem__g { flex: 0 1 auto; font-size: 12px; color: var(--text-2); min-width: 0; }
.ritem__r { flex: 0 1 auto; font-size: 12px; color: var(--ok); }
.ritem__law {
  /* 放得下时与「建议」同一行，放不下才折到下一行：
     依据大多在 30 字内，1392px 宽的行里和一句建议并排放得开。 */
  flex: 0 1 auto;
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
}
.ritem__law code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 11.5px;
  color: var(--text-2);
  user-select: text;
}

/* ============================================================ 分页 */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
}

/* ============================================================ 小屏收敛 */

@media (max-width: 980px) {
  .layout--wide { grid-template-columns: 1fr; }
  .rules { padding: 14px; }
  .mylib { padding: 14px; }
  .guide { grid-template-columns: 1fr; }
  .ritem { flex-direction: column; gap: 6px; }
  .ritem__k { flex: 0 0 auto; }
}

@media (max-width: 720px) {
  .tabs { padding: 0 14px; }
  .tabs__badge { display: none; }
  .tabs__btn { padding: 10px 9px; font-size: 13px; }
  .ab { margin: 0 12px 12px; }
  .ab__grid { grid-template-columns: 1fr; }
  .ab__col + .ab__col {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .btable table { font-size: 12px; }
  .btable .btext { max-width: 150px; }
  .bstat { padding: 10px 12px; }
  .hist { padding: 11px 12px 14px; }
  .search { min-width: 0; flex: 1 1 100%; }
}

@media (max-width: 720px) {
  .diff { padding: 20px 14px 8px; }
  .diff__title { font-size: 15px; }
  .matrix th,
  .matrix td { padding: 7px 8px; font-size: 12px; }
  .matrix__head { padding: 8px 10px; }
  .ai { padding: 12px; }
  .ai__actions .btn { flex: 1 1 auto; }
}


/* ============================================================
   v3.4 · 检测设置 / 我的词库 / 移动端重构
   ============================================================
   这一节整体放在文件末尾：小屏覆盖规则必须晚于基础规则出现，
   否则同特异性下会被前面的写法盖掉（这个文件里踩过同类坑）。
   ============================================================ */

/* ------------------------------------------------------------ 检测设置 */

/* 桌面端：summary 藏起来、控件直接平铺；窄屏：summary 变成一行可点的标题 */
.settings { border-bottom: 1px solid var(--border); }
.settings__sum { display: none; }
.settings .controls { padding: 10px 16px; }

/* 带标题的控件。原来只有一排裸下拉，手机上根本看不出哪个是平台、哪个是行业 */
.field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.field__k {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.field--switches { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------------ 我的词库 */

.myhint {
  margin: 12px 16px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-2);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 10px;
}
.myhint b { color: var(--text); }

.myadd {
  margin: 0 16px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev-2);
}
.myadd__sum {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.myadd__sum:hover { color: var(--text); }

.myform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}
.myform .field { flex-direction: column; align-items: stretch; gap: 4px; }
.myform input,
.myform select { width: 100%; }
.field--wide { grid-column: 1 / -1; }
.myform__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.req { color: var(--sev-critical); font-size: 10.5px; font-weight: 500; }

.mybulk { border-top: 1px solid var(--border); padding: 0 12px 12px; }
.mybulk > summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.mybulk > summary:hover { color: var(--text); }
.mybulk textarea {
  width: 100%;
  min-height: 92px;
  margin-bottom: 10px;
}

.myform__msg { font-size: 12px; color: var(--text-3); }
.myform__msg.is-ok { color: var(--ok); }
.myform__msg.is-bad { color: var(--sev-critical); }

.mlist { display: flex; flex-direction: column; }
.ritem--mine { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ritem__ops {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
/* 停用不是删除：词条仍在列表里可找回，但视觉上要一眼看出它不生效 */
.ritem.is-off { opacity: 0.45; }

.tag--mine {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
}
.tag--off {
  color: var(--text-3);
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
}

.switch--sm { font-size: 11.5px; }

/* ------------------------------------------------------------ 词库浏览顶部 */

.rbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px;
  flex-wrap: wrap;
}
.rbar .search { flex: 1 1 240px; }

/* 桌面端用 display:contents 把筛选控件"提"回同一行：
   既保住窄屏的折叠行为，又不额外占一行高度 */
.rfilters { display: contents; }
.rfilters__sum { display: none; }
.rfilters__n {
  display: inline-block;
  min-width: 15px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent-solid);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}

/* ------------------------------------------------------------ 三步引导 */

.guide-wrap > summary { display: none; cursor: pointer; }

/* ============================================================
   窄屏（≤720px）
   ============================================================ */

@media (max-width: 720px) {

  /* ---- 底部导航 ----
     手机上原标签在文档流里，滚到中间想切页得先滚回顶部。换成固定在底部的
     标签栏后，任何时候一次点击就能切换，也在拇指可达范围内。 */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    font-size: 15px;
  }

  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--border);
    border-bottom: 0;
    background: var(--bg-elev);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  }
  html[data-theme="light"] .tabs { box-shadow: 0 -2px 12px rgba(31, 35, 40, 0.08); }

  .tabs__btn {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 500;
    border-bottom: 0;
    border-top: 2px solid transparent;
  }
  .tabs__btn.is-on { border-top-color: var(--accent); }
  .tabs__ico { width: 21px; height: 21px; display: block; }
  .tabs__txt { font-size: 11px; line-height: 1.2; }

  /* 词库总数是个大数字，压在图标上会糊成一片；只保留"我的词库"这个
     可操作的计数，做成角标 */
  .tabs__badge { display: none; }
  #tabMyCount {
    display: block;
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: 5px;
    padding: 0 5px;
    font-size: 9.5px;
    line-height: 15px;
    border-radius: 999px;
    background: var(--accent-solid);
    color: #fff;
    border: 0;
  }
  #tabMyCount[hidden] { display: none !important; }

  /* ---- 首屏收敛 ---- */
  .topbar { padding: 10px 14px; gap: 8px; }
  .brand__sub { display: none; }     /* 副标题在窄屏只会把品牌行挤成两行 */
  .privacy__txt { display: none; }   /* 绿点保留，文字收进 title */

  .hero { padding: 16px 14px 6px; }
  .hero h1 { font-size: 20px; line-height: 1.4; }
  .hero p { font-size: 14px; line-height: 1.75; }

  .guide-wrap { margin-top: 14px; }
  .guide-wrap > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .guide { margin-top: 10px; }

  /* ---- 检测设置：折起来 ---- */
  .settings__sum {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    list-style: none;
  }
  .settings__sum::-webkit-details-marker { display: none; }
  .settings__sum::after {
    content: "\25BE";
    margin-left: auto;
    font-size: 11px;
    color: var(--text-3);
    transition: transform 0.15s ease;
  }
  .settings[open] > .settings__sum::after { transform: rotate(180deg); }
  .settings__label { font-weight: 600; }
  .settings__brief {
    font-size: 11.5px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .settings .controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
  }
  .settings .field { flex-direction: column; align-items: stretch; gap: 3px; }
  .settings .field--switches {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-height: 42px;
  }

  /* ---- 触控尺寸与防缩放 ----
     iOS 对 font-size < 16px 的输入控件会自动放大整页——这是"手机上很难用"
     最直接的来源之一。输入类控件一律 16px 起。

     必须显式带上 `textarea#input` / `textarea#bInput`：基础样式里的选择器
     是 (1,0,1) 特异性，只写元素选择器 (0,0,1) 压不过它 —— 字号会"看着改了
     其实没改"，而且不报错。 */
  select,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  textarea,
  textarea#input,
  textarea#bInput {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { min-height: 150px; line-height: 1.75; }

  .btn,
  .iconbtn,
  .chip,
  .linkbtn { min-height: 42px; }
  .btn { padding: 9px 16px; font-size: 14px; }
  .chip { padding: 8px 12px; font-size: 13px; }
  .linkbtn { padding: 8px 6px; }
  .switch { min-height: 40px; align-items: center; }
  .switch--sm { min-height: 32px; }

  /* ---- 结果区可读性 ---- */
  .panel__head { padding: 11px 14px; }
  .panel__foot { padding: 10px 14px; font-size: 11.5px; }
  .finding { padding: 12px 14px; }
  .finding__word { font-size: 15px; }
  .finding__ctx { font-size: 13.5px; line-height: 1.7; }
  .actions { padding: 12px 14px; gap: 8px; }
  .actions .btn { flex: 1 1 calc(50% - 4px); }
  .empty { padding: 34px 16px; }

  /* ---- 我的词库 ---- */
  .myhint { margin: 10px 14px; }
  .myadd { margin: 0 14px 12px; }
  .myform { grid-template-columns: 1fr; padding: 0 12px 12px; }
  .field--wide { grid-column: auto; }
  .myform__actions .btn { flex: 1 1 auto; }

  .rbar { padding: 0 14px 12px; }
  .rbar .search { flex: 1 1 100%; }
  .rfilters {
    display: block;
    flex: 0 0 auto;
    width: 100%;
  }
  .rfilters__sum {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-2);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
  }
  .rfilters__sum::-webkit-details-marker { display: none; }
  .rfilters[open] > .rfilters__sum { color: var(--text); border-color: var(--border-strong); }
  .rfilters .controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 10px;
  }
  .rfilters .field { flex-direction: column; align-items: stretch; gap: 3px; }

  /* 词条行：关键词 / 元信息 / 操作三段竖排 */
  .ritem { padding: 10px 14px; }
  .ritem__ops { justify-content: flex-end; width: 100%; }

  .diff { padding: 22px 14px 8px; }
}

/* ============================================================
   浅色主题 · 小字对比度补丁
   ------------------------------------------------------------
   11px 这类小字要求 4.5:1。浅色下 --accent 叠在 --accent-soft 上只有 4.34 ——
   差一点点，但门禁该响就得响，所以这里把文字色单独压深一档。

   为什么不去改 --accent 本身：`.sys.*` 子树会把它重映射到图表色，SVG 的
   填充/描边跟着一起变，改一个 token 会连带动到不相干的地方。
   ============================================================ */

html[data-theme="light"] .tag:not(.tag--off),
html[data-theme="light"] .tag--mine {
  color: #0550ae;
  border-color: color-mix(in srgb, #0550ae 34%, transparent);
}

html[data-theme="light"] .sev-tag[data-sev="medium"] {
  color: #7a5600;
}