/* ══════════════════════════════════════════════════════════════
   驾照小助手 · 与主站同一套视觉语言
   块面 + 大圆角 + 克制回弹｜樱红 #e11945 / 天蓝 #0073c0 / 柠檬 #ffe44d
   所有选择器挂在 .drive 下；令牌也挂在 .drive，不碰 :root / body。
   文档级样式（body 背景、margin）用内联 style 属性处理。
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("vendor/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("vendor/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.drive {
  /* 每种彩色只有一个值，填充与文字共用；深底配白字，浅底（柠檬）配墨字 */
  --sakura: #e11945;
  --sky: #0073c0;
  --lemon: #ffe44d;

  --paper: #fff7f8;
  --surface: #ffffff;
  --ink: #14161c;
  --ink-2: #565b66;
  --ink-3: #8a909c;
  --line: rgba(20, 22, 28, .08);
  --line-2: rgba(20, 22, 28, .16);
  --veil: #f4f5f8;

  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-xl: 24px;
  --r-lg: 20px;
  --r-md: 14px;
  --pill: 999px;

  --sh-sm: 0 2px 10px -4px rgba(20, 22, 28, .10);
  --sh-md: 0 18px 36px -20px rgba(20, 22, 28, .30);

  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.drive *,
.drive *::before,
.drive *::after { box-sizing: border-box; }

.drive a { color: inherit; text-decoration: none; }

.drive ::selection { background: var(--sakura); color: #fff; }

.drive :focus-visible {
  outline: 3px solid var(--sakura);
  outline-offset: 3px;
  border-radius: 8px;
}

.drive .mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ── 布局 ─────────────────────────────────────────────────── */

.d-wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 38px) clamp(18px, 4.5vw, 32px) 48px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d-main { flex: 1; }

/* ── 顶栏 ─────────────────────────────────────────────────── */

.d-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: clamp(20px, 3.5vw, 32px);
}

.d-top a { color: var(--ink-2); transition: color .18s ease; }
.d-top a:hover { color: var(--sakura); }

.d-here { color: var(--ink); font-weight: 600; }

.d-sep { color: var(--line-2); }

/* ── 子页切换（学习 / 考试） ──────────────────────────────── */

.d-tabs {
  display: inline-flex;
  /* .d-wrap 是 flex column，不加这条会被拉到整行宽 */
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  margin-bottom: clamp(20px, 3.5vw, 30px);
  border-radius: var(--pill);
  background: #eceef3;
}

.d-tab {
  padding: 6px 18px;
  border-radius: var(--pill);
  font-size: 13px;
  color: var(--ink-2);
  transition: color .18s ease, background .18s ease;
}

.d-tab:hover { color: var(--ink); }

.d-tab[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 8px -3px rgba(20, 22, 28, .28);
}

/* ── 页头 ─────────────────────────────────────────────────── */

.d-head { margin-bottom: clamp(26px, 4vw, 38px); }

.d-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 13px 6px 11px;
  border-radius: var(--pill);
  background: var(--sakura);
  color: #fff;
  font-size: 12px;
  letter-spacing: .02em;
}

.k-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.d-title {
  margin: 14px 0 10px;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.035em;
  color: var(--ink);
}

.d-index .d-title {
  font-size: clamp(38px, 7vw, 62px);
  margin: 16px 0 12px;
}

.d-lede a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  transition: color .16s ease, text-decoration-color .16s ease;
}

.d-lede a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.d-lede {
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-2);
}

/* ── 分节 ─────────────────────────────────────────────────── */

.d-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.d-sec-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.d-sec-head .mono { color: var(--ink-3); }

/* ── 入口卡片 ─────────────────────────────────────────────── */

.d-cards {
  display: grid;
  /* 卡片数量会继续长，列数交给容器自己算 */
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

/* 选项不是主体：白卡承担版面，色只落在编号块这种小面积上 */
.d-card {
  --cat: var(--sakura);
  --cat-fg: #fff;

  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition:
    transform .26s var(--bounce),
    box-shadow .26s var(--out),
    border-color .2s ease;
}

.d-card:nth-child(2) { --cat: var(--sky); }
/* 柠檬是浅底，编号块上的字要转墨色才看得清 */
.d-card:nth-child(3) { --cat: var(--lemon); --cat-fg: var(--ink); }

.d-card:hover,
.d-card:focus-visible {
  transform: translateY(-3px) scale(1.008);
  box-shadow: var(--sh-md);
  border-color: var(--line-2);
}

.d-card-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--cat);
  color: var(--cat-fg);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: transform .26s var(--bounce);
}

.d-card:hover .d-card-no { transform: scale(1.07); }

.d-card-main { flex: 1; min-width: 0; }

.d-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.d-card-top h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.d-card-main p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.d-card-go {
  flex: none;
  align-self: center;
  font-size: 17px;
  color: var(--ink-3);
  transition: transform .24s var(--bounce), color .2s ease;
}

.d-card:hover .d-card-go {
  transform: translateX(4px);
  color: var(--sakura);
}

/* 状态徽标：中性灰，只有真状态才用色 */
.d-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--pill);
  background: #e7e9ee;
  color: #464b56;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.6;
  white-space: nowrap;
}

/* ── 占位槽（内容待定义） ─────────────────────────────────── */

.d-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(260px, 42vh, 400px);
  padding: clamp(30px, 6vw, 56px) clamp(22px, 5vw, 48px);
  text-align: center;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .6);
}

.d-slot-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: #e7e9ee;
  color: #464b56;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.d-slot h2 {
  margin: 4px 0 0;
  font-size: clamp(19px, 2.6vw, 23px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-2);
}

.d-slot p {
  margin: 0;
  max-width: 38ch;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-3);
}

/* ── 页脚 ─────────────────────────────────────────────────── */

.d-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: clamp(36px, 6vw, 56px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}

.d-foot a { color: var(--ink-2); transition: color .18s ease; }
.d-foot a:hover { color: var(--sakura); }

/* ── 入场 ─────────────────────────────────────────────────── */

@keyframes d-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.d-top,
.d-tabs,
.d-head,
.d-sect,
.d-slot {
  animation: d-rise .5s var(--out) both;
}

.d-tabs { animation-delay: .04s; }
.d-head { animation-delay: .08s; }
.d-sect { animation-delay: .16s; }
.d-slot { animation-delay: .12s; }

/* ── 响应式 ───────────────────────────────────────────────── */

@media (max-width: 720px) {
  .d-cards { grid-template-columns: 1fr; }
  .d-card { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .drive *,
  .drive *::before,
  .drive *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   学习页（文档型）
   章节 → 口诀条 → 表格 / 卡片 / 图标网格
   ══════════════════════════════════════════════════════════════ */

.d-head-doc { margin-bottom: clamp(20px, 3vw, 28px); }

/* 全页唯一的整面色块，只给这一页的主体：页面标题 */
.d-head-doc .d-title {
  display: inline-block;
  padding: 10px 26px 13px;
  border-radius: 22px;
  background: var(--sakura);
  color: #fff;
}

/* ── 章节导航 ─────────────────────────────────────────────── */

.d-toc {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  margin: 0 calc(-1 * clamp(18px, 4.5vw, 32px)) clamp(26px, 4vw, 38px);
  padding: 10px clamp(18px, 4.5vw, 32px);
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255, 247, 248, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.d-toc::-webkit-scrollbar { display: none; }

.d-toc a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--pill);
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}

.d-toc a span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.d-toc a:hover { background: #eceef3; color: var(--ink); }
.d-toc a:hover span { color: var(--sakura); }

/* 当前章节：顶起来一块白，和 hover 的灰面区分开 */
.d-toc a.is-on {
  background: var(--surface);
  box-shadow: var(--sh-sm);
  color: var(--ink);
}

.d-toc a.is-on span { color: var(--sakura); }

/* ── 快捷目录：右下角浮层，顶上那条横条的完整版 ───────────────
   横条在手机上只能露出三四章，还得靠划；浮层一次列全，点哪跳哪。
   ────────────────────────────────────────────────────────── */

.d-quick {
  position: fixed;
  right: clamp(14px, 3vw, 24px);
  bottom: clamp(14px, 3vw, 24px);
  z-index: 30;
}

.d-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 13px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: var(--surface);
  box-shadow: var(--sh-md);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s ease, transform .24s var(--bounce);
}

.d-quick-btn:hover { border-color: var(--ink-3); }
.d-quick-btn:active { transform: scale(.97); }

/* 目录图标：三道短横，最后一道短一点，用渐变画，不引图标 */
.d-quick-ico {
  width: 13px;
  height: 9px;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) top left / 13px 1.5px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) center left / 13px 1.5px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) bottom left / 9px 1.5px no-repeat;
}

/* 按钮上的当前章节号，竖线隔开，像一条小注脚 */
.d-quick-no {
  padding-left: 8px;
  border-left: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--sakura);
}

.d-quick-no[hidden] { display: none; }

.d-quick-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 252px;
  max-height: min(64vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .22s var(--out), visibility .18s;
}

.d-quick.is-open .d-quick-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.d-quick-panel a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 13px;
  color: var(--ink-2);
  transition: background .16s ease, color .16s ease;
}

.d-quick-panel a > span:first-child {
  flex: none;
  width: 15px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.d-quick-panel a:hover { background: var(--veil); color: var(--ink); }

.d-quick-panel a.is-on {
  background: var(--veil);
  color: var(--ink);
  font-weight: 600;
}

.d-quick-panel a.is-on > span:first-child { color: var(--sakura); }

/* 打开时焦点落在当前章节上，描边收在里面，别糊到隔壁几行 */
.d-quick-panel a:focus-visible {
  outline: 2px solid var(--sakura);
  outline-offset: -2px;
  border-radius: 11px;
}

@media (max-width: 560px) {
  .d-quick-panel { width: min(252px, calc(100vw - 28px)); }
}

@media print {
  .d-quick { display: none; }
}

/* ── 章节 ─────────────────────────────────────────────────── */

.d-chapter {
  scroll-margin-top: 64px;
  padding-top: clamp(30px, 5vw, 46px);
  border-top: 1px solid var(--line);
}

.d-chapter:first-child { border-top: none; padding-top: 0; }

/* 章节被目录定位时会拿到 tabindex="-1"，只给读屏落点，不画描边 */
.d-chapter[tabindex="-1"]:focus { outline: none; }

.d-chapter + .d-chapter { margin-top: clamp(34px, 5vw, 52px); }

.d-ch-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  scroll-margin-top: 72px;
}

/* 章节标题：柠檬实心底框。柠檬太亮，只能配墨字，编号也改用墨块白字 */
.d-ch-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 18px 9px 9px;
  border-radius: 15px;
  background: var(--lemon);
  color: var(--ink);
}

.d-ch-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.d-ch-title h2 {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
}

.d-ch-head p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 58ch;
}

.d-sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 30px 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.d-sub::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--sky);
  flex: none;
  transform: translateY(-2px);
}

.d-sub-count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* ── 记分卡 ───────────────────────────────────────────────── */

.d-score {
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.d-score + .d-score { margin-top: 10px; }

.d-score-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.d-score-badge {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.d-score-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.d-score-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.d-keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-keys li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* 关键词是一个独立层级，统一樱红；不按档位做深浅，每条都要记 */
.d-keys b {
  flex: none;
  min-width: 1.6em;
  color: var(--sakura);
  font-weight: 700;
}

.d-keys span { color: #2a2d36; }

/* ── 口诀条 ───────────────────────────────────────────────── */

.d-formula {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 26px 0 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sky);
  border-radius: 14px;
}

.d-formula-key {
  flex: none;
  padding: 2px 9px;
  border-radius: var(--pill);
  background: var(--sky);
  color: #fff;
  font-size: 11px;
  letter-spacing: .02em;
}

.d-formula p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

.d-formula b {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── 表格 ─────────────────────────────────────────────────── */

.d-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
}

/* 两张表并排出现时（号牌 / 逃逸那种），中间留一口气 */
.d-table-wrap + .d-table-wrap { margin-top: 16px; }

.d-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.d-table th {
  padding: 0 12px 8px 0;
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

.d-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  color: #2a2d36;
  vertical-align: middle;
}

.d-table tr:last-child td { border-bottom: none; }

.d-table .num {
  width: 76px;
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}

.d-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 9px;
  background: #e7e9ee;
  color: #464b56;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.d-points.minus { background: var(--sky); color: #fff; }
.d-points.minus::before { content: "−"; margin-right: 1px; }

.d-mono-num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── 规则 / 提示 ──────────────────────────────────────────── */

.d-rules {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.d-rules li {
  position: relative;
  padding: 6px 0 6px 16px;
  font-size: 14px;
  line-height: 1.75;
  color: #2a2d36;
}

.d-rules li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-2);
}

.d-rules b { color: var(--ink); font-weight: 700; }

.d-tip {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.d-tip b { color: var(--ink); }

.d-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}

/* ── 罚款卡 ───────────────────────────────────────────────── */

.d-money {
  padding: 16px 20px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.d-money + .d-money { margin-top: 10px; }

.d-money-head { margin-bottom: 8px; }

.d-money-amt {
  /* 去掉下划线后靠字重和字号立住，卡片标题不该靠装饰色 */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.d-money ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-money li {
  position: relative;
  padding: 5px 0 5px 14px;
  font-size: 14px;
  line-height: 1.7;
  color: #2a2d36;
}

.d-money li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-2);
}

.d-money li b { color: var(--ink); }

/* ── 证件时间 ─────────────────────────────────────────────── */

.d-time {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.d-time li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: #2a2d36;
}

.d-time-k {
  flex: none;
  width: 8.5em;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── 图标网格 ─────────────────────────────────────────────── */

.d-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 14px 8px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  transition: transform .24s var(--bounce), box-shadow .24s var(--out);
}

.d-icons li:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.d-icons img {
  height: 62px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.d-icons span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  word-break: break-word;
}

/* 标线是宽幅图，格子宽一点、图矮一点 */
.d-icons-wide { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }

.d-icons-wide img {
  height: 68px;
  width: 100%;
  border-radius: 8px;
}

/* ── 手势 ─────────────────────────────────────────────────── */

.d-gestures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-gestures li {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.d-gestures img {
  display: block;
  width: 100%;
  height: 140px;
  padding: 10px 12px 0;
  object-fit: contain;
  background: #fff;
}

.d-gestures div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px 11px;
  border-top: 1px solid var(--line);
}

.d-gestures b { font-size: 14px; font-weight: 700; }

.d-gestures span {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ── 仪表灯 ───────────────────────────────────────────────── */

.d-lamps {
  display: grid;
  /* 8 个灯正好两行四列，比 auto-fill 排成 7+1 好看 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-lamps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
}

.d-lamps img {
  height: 46px;
  width: auto;
}

.d-lamps span {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .d-keys { grid-template-columns: 1fr; }
  .d-icons { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .d-icons img { height: 52px; }
  .d-icons-wide { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .d-icons-wide img { height: 46px; }
  .d-time-k { width: 7.5em; }
  .d-table { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   处罚专项页（penalty.html）
   章节、口诀条、表格全部复用学习页那一套，这里只加四样：
   跨页入口条、判定步骤条、竖向链路、可展开的数字卡 / 自测卡
   ══════════════════════════════════════════════════════════════ */

/* ── 跨页入口：lede 下面一枚胶囊，不抢标题 ─────────────────── */

.d-cross {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 4px 13px 4px 5px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease;
}

.d-cross:hover {
  background: #fff;
  border-color: var(--sakura);
}

.d-cross-tag {
  flex: none;
  padding: 2px 9px;
  border-radius: var(--pill);
  background: var(--sakura);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: .04em;
}

.d-cross-b {
  font-weight: 600;
  letter-spacing: -.005em;
}

.d-cross-go {
  font-size: 12px;
  line-height: 1;
  color: var(--ink-3);
  transition: transform .24s var(--bounce), color .18s ease;
}

.d-cross:hover .d-cross-go {
  transform: translateX(3px);
  color: var(--sakura);
}

/* ── 判定步骤条 ───────────────────────────────────────────── */

.d-steps {
  counter-reset: d-step;
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.d-steps li {
  position: relative;
  padding: 12px 16px 12px 50px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.7;
  color: #2a2d36;
}

.d-steps li::before {
  counter-increment: d-step;
  content: counter(d-step);
  position: absolute;
  left: 14px;
  top: 13px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}

.d-steps b { font-weight: 700; color: var(--ink); }

/* ── 术语卡：先认几个词，再看矩阵 ─────────────────────────── */

.d-legend {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.d-legend p {
  display: flex;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* 词条定宽，解释左边对齐，读起来像一张小词表 */
.d-legend b {
  flex: none;
  width: 7.6em;
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 560px) {
  .d-legend p { display: block; }
  .d-legend b { display: block; width: auto; margin-bottom: 1px; }
}

/* ── 竖向链路：把一条违法串成一串后果 ─────────────────────── */

.d-chain {
  position: relative;
  margin: 18px 0 0;
  padding: 2px 0 2px 24px;
  list-style: none;
}

.d-chain::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--line-2);
}

.d-chain li { position: relative; padding-bottom: 15px; }
.d-chain li:last-child { padding-bottom: 0; }

.d-chain li::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--ink);
}

.d-chain-k {
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.d-chain p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ink-2);
}

.d-chain p b {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sakura);
  font-variant-numeric: tabular-nums;
}

/* 勘误表：左列是原笔记，要顶对齐才好一行一行对着看 */
.d-table-top td { vertical-align: top; padding-top: 11px; }
.d-table-top td:first-child { color: var(--ink); font-weight: 600; }
.d-table-fix { min-width: 620px; }

/* 「10 日以下」这种短标签不能被挤成两行 */
.d-table-k th:first-child,
.d-table-k td:first-child { white-space: nowrap; }

/* 准驾车型表：证号窄、能开什么车占中、还能开那列要能整串放下 */
.d-table-license th:first-child,
.d-table-license td:first-child {
  width: 54px;
  font-family: var(--mono);
  font-weight: 600;
  white-space: nowrap;
}

.d-table-license th:nth-child(2),
.d-table-license td:nth-child(2) { width: 44%; }

/* 车型示意图贴在说明右边，跟着行高居中 */
.d-lic-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.d-lic-art {
  flex: none;
  width: 88px;
  height: 44px;
}

@media (max-width: 560px) {
  /* 三列 + 车图放不下，宁可整表横向滚，也别把说明挤成四行 */
  .d-table-license { min-width: 560px; }
  .d-table-license th:nth-child(2),
  .d-table-license td:nth-child(2) { width: 52%; }
  .d-lic-cell { gap: 8px; }
  .d-lic-art { width: 72px; height: 36px; }
}

/* 倍数表：谁 / 干了什么 / 罚多少，让金额贴着说明，别被拉到最右边 */
.d-table-mult th:first-child { width: 64px; }
.d-table-mult th:last-child { width: 240px; }

/* 手机上把「罚多少」收窄，说明列才有一行能放下的宽度；
   金额那列折两行没关系，别让说明碎成每行两三个字 */
@media (max-width: 560px) {
  .d-table-mult th:first-child { width: 62px; }
  .d-table-mult th:last-child { width: 148px; }
}

/* 分值表：第一列只放一个徽标，不必给 .num 那么宽 */
.d-table-score th:first-child,
.d-table-score td:first-child {
  width: 58px;
  padding-right: 0;
  white-space: nowrap;
}

/* ── 二维矩阵：纵轴是行为分类，横轴是处罚档位 ─────────────────
   只在「同一件事会随情节往上升档」的地方用。一行是一个行为的升级
   路线，一列是这一档里都有谁。空格子交给 .d-nil 画一个浅点。
   ────────────────────────────────────────────────────────── */

.d-matrix {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.d-matrix th,
.d-matrix td {
  padding: 9px 10px 9px 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}

/* 横轴：档位做成一整条浅灰表头，跟纵轴分开 */
.d-matrix thead th {
  padding: 7px 10px 7px 0;
  background: var(--veil);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}

.d-matrix thead th:first-child {
  padding-left: 0;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-3);
}

/* 纵轴：行为列钉在左边，横向滚动时还知道自己在哪一行 */
.d-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-right: 16px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.d-matrix tbody td { color: var(--ink-2); }

/* 分类轴分三列：一级 / 二级 / 三级，父级用 rowspan 纵向合并。
   有几级分类就占几列，没有第三级的（超员）跨两列摆平。 */
.d-matrix .d-mx-g1 {
  width: 54px;
  padding: 9px 8px 9px 0;
  background: var(--veil);
  vertical-align: top;
}

.d-matrix .d-mx-g2,
.d-matrix .d-mx-g3,
.d-matrix .d-mx-flat {
  /* 不参与左侧吸顶，否则三列会叠在一起 */
  position: static;
  vertical-align: top;
}

.d-matrix .d-mx-g2 {
  width: 84px;
  padding: 9px 8px 9px 10px;
}

.d-matrix .d-mx-g3 {
  width: 98px;
  padding: 9px 10px;
  font-weight: 600;
  color: var(--ink-2);
}

/* 行头上的口诀标签：紧跟在行为名右边，纯色底 + 白字，一眼区分「标签」和「名字」 */
.d-matrix .d-mx-key {
  display: inline-block;
  margin-left: 7px;
  padding: 0 5px 1px;
  border-radius: 5px;
  background: var(--sakura);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
  vertical-align: 1px;
  white-space: nowrap;
}

/* 一条行为通到底的（号牌、校车……），标题横跨三列 */
.d-matrix .d-mx-flat { padding-right: 10px; }

/* 分类三列之间、以及分类块与档位之间画竖线。
   合并格里不会出现内部竖线，正好说明这一行没有下一级。 */
.d-matrix .d-mx-g1,
.d-matrix .d-mx-g2,
.d-matrix .d-mx-g3,
.d-matrix .d-mx-flat { border-right: 1px solid rgba(20, 22, 28, .2); }

.d-matrix thead th:first-child { border-right: 1px solid rgba(20, 22, 28, .2); }

.d-matrix tbody tr:hover .d-mx-g1 { background: var(--veil); }

/* 空档：不写字，画一个很浅的点，扫行时不会看丢列 */
.d-nil::before {
  content: "·";
  color: #d3d6dd;
}

/* 手机上五档排不下，字号和留白各收一档，尽量少滚一点 */
@media (max-width: 560px) {
  /* 三列分类轴 + 五档 + 行头口诀标签，压到 780 以内就挤不动了 */
  .d-matrix { min-width: 780px; font-size: 11.5px; }
  .d-matrix th,
  .d-matrix td { padding: 7px 8px 7px 0; }
  .d-matrix tbody th { font-size: 11.5px; padding-right: 10px; }
  .d-matrix thead th { font-size: 11px; }
  .d-matrix .d-mx-g1 { width: 46px; padding: 7px 6px 7px 0; }
  .d-matrix .d-mx-g2 { width: 74px; padding: 7px 6px 7px 8px; }
  .d-matrix .d-mx-g3 { width: 88px; padding: 7px 8px; }
  .d-matrix .d-mx-key { margin-left: 5px; padding: 0 4px; font-size: 9px; }
}

/* 正文里的跳转链接：默认和正文同色，只靠下划线区分，不额外造一个色 */
.d-doc a[href] {
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .16s ease;
}

.d-doc a[href]:hover { text-decoration-color: var(--ink); }

@media (max-width: 560px) {
  .d-chain { padding-left: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   术语解释：正文里的词挂灰色虚线，点了弹解释
   ══════════════════════════════════════════════════════════════ */

.d-term {
  /* 用 text-decoration 而不是 border-bottom：下划线跟着基线走，不会掉到行框底部 */
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: help;
  text-decoration: underline dashed;
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .16s ease, color .16s ease;
}

.d-term:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.d-term:focus-visible {
  outline: 2px solid var(--sakura);
  outline-offset: 2px;
  border-radius: 3px;
}

.d-term-dialog {
  margin: auto;
  padding: 0;
  border: 0;
  max-width: min(420px, calc(100vw - 32px));
  background: transparent;
  color: var(--ink);
}

.d-term-dialog::backdrop {
  background: rgba(20, 22, 28, .42);
  backdrop-filter: blur(3px);
}

.d-term-dialog[open] { animation: d-term-in .2s var(--out); }

@keyframes d-term-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.d-term-box {
  padding: 20px 22px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px -24px rgba(20, 22, 28, .5);
}

.d-term-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.d-term-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.d-term-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -2px -4px 0 0;
  border: 0;
  border-radius: 9px;
  background: #f0f1f5;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.d-term-close:hover { background: #e4e6ec; color: var(--ink); }

/* 弹窗打开时会自动聚焦到关闭键，焦点环用中性色，别用主色抢视线 */
.d-term-close:focus-visible {
  outline: 2px solid var(--ink-3);
  outline-offset: 2px;
}

.d-term-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #2a2d36;
}

/* 整条口诀可点：下划线铺满，表示「这一整句都能点」 */
.d-formula-q[data-term] {
  cursor: help;
  text-decoration: underline dashed;
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .16s ease;
}

.d-formula-q[data-term]:hover { text-decoration-color: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   考试页
   开始页 → 答题页 → 结果页，靠 [hidden] 切换
   ══════════════════════════════════════════════════════════════ */

.e-view[hidden] { display: none; }

/* ── 开始页 ───────────────────────────────────────────────── */

/* 题量档位：跟顶部 tab 同一套分段控件的样子 */
.e-pick {
  display: inline-flex;
  gap: 4px;
  margin-top: 22px;
  padding: 4px;
  border-radius: var(--pill);
  background: #eceef3;
}

/* 题源 / 题量两排：标签在左，胶囊在右，各自不再吃 margin */
.e-mode {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.e-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 三行标签等宽（按最长的「答对后」算），右边那排按钮才对得齐 */
.e-mode-tag {
  flex: none;
  width: 3.9em;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

.e-mode .e-pick {
  margin-top: 0;
  flex-wrap: wrap;
}

/* 专项的知识块按钮数量多，收窄一档 */
.e-pick-btn.is-thin {
  padding: 8px 14px;
  font-size: 13px;
}

.e-pick-btn {
  padding: 8px 24px;
  border: 0;
  border-radius: var(--pill);
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.e-pick-btn:hover { color: var(--ink); }

.e-pick-btn.is-on {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 8px -3px rgba(20, 22, 28, .28);
}

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

.e-facts li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.e-facts b {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.e-facts span {
  font-size: 13px;
  color: var(--ink-2);
}

.e-rules {
  margin: 22px 0 0;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}

.e-rules p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

.e-rules p + p { margin-top: 8px; }
.e-rules b { color: var(--ink); }

.e-start {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--sakura);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .22s var(--bounce), filter .18s ease;
}

.e-start:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.e-start:disabled {
  background: #d9dce3;
  color: #8a909c;
  cursor: default;
}

/* ── 答题页 ───────────────────────────────────────────────── */

.e-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 calc(-1 * clamp(18px, 4.5vw, 32px)) 18px;
  padding: 12px clamp(18px, 4.5vw, 32px);
  background: rgba(255, 247, 248, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.e-exit {
  flex: none;
  margin-right: 2px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--pill);
  background: #e7e9ee;
  font-family: inherit;
  font-size: 12.5px;
  color: #464b56;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.e-exit:hover { background: #dcdfe6; color: var(--ink); }
.e-exit:active { opacity: .8; }

.e-count {
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.e-count b { color: var(--ink); font-weight: 700; }

.e-timer {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.e-timer.is-urgent { color: var(--sakura); }

.e-quit {
  padding: 7px 15px;
  border: 0;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.e-quit:hover { background: #2a2d36; }

.e-stage {
  padding: clamp(20px, 4vw, 30px);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.e-kind {
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--sky);
  color: #fff;
  font-size: 11px;
  letter-spacing: .04em;
}

.e-q {
  margin: 0 0 20px;
  font-size: clamp(17px, 2.3vw, 20px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -.01em;
}

.e-opts {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.e-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: left;
  color: #2a2d36;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.e-opt:hover { border-color: var(--ink-3); }

.e-opt.is-picked {
  border-color: var(--sakura);
  background: var(--sakura);
  color: #fff;
}

.e-key {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #eceef3;
  color: #464b56;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}

.e-opt.is-picked .e-key { background: rgba(255, 255, 255, .22); color: #fff; }

.e-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  margin-top: 14px;
}

.e-nav-btn {
  padding: 13px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.e-nav-btn:hover:not(:disabled) { border-color: var(--ink-3); }

.e-nav-btn:disabled {
  color: #b9bec8;
  cursor: default;
}

.e-nav-card {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.e-nav-next {
  border-color: transparent;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.e-nav-next:hover:not(:disabled) { background: #2a2d36; }
.e-nav-next:disabled { background: #d9dce3; color: #8a909c; }

/* ── 答题卡 ───────────────────────────────────────────────── */

.e-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 22, 28, .45);
  backdrop-filter: blur(3px);
}

.e-sheet[hidden] { display: none; }

.e-sheet-box {
  width: min(520px, 100%);
  max-height: 80vh;
  overflow: auto;
  padding: 20px 22px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px -24px rgba(20, 22, 28, .5);
}

.e-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.e-sheet-head h3 { margin: 0; font-size: 16px; font-weight: 700; }

.e-sheet-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: #f0f1f5;
  color: var(--ink-2);
  font-size: 12px;
  cursor: pointer;
}

.e-sheet-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}

.e-cell {
  aspect-ratio: 1;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.e-cell.is-done {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.e-cell.is-now {
  border-color: var(--sakura);
  box-shadow: inset 0 0 0 2px var(--sakura);
  color: var(--sakura);
  font-weight: 700;
}

.e-cell.is-done.is-now { color: #fff; }

.e-sheet-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
}

.lg {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: -1px;
}

.lg-done { background: var(--ink); }
.lg-todo { background: #fff; border: 1px solid var(--line-2); }
.lg-now { background: var(--sakura); }

/* ── 结果页 ───────────────────────────────────────────────── */

.e-score-wrap {
  padding: clamp(24px, 5vw, 36px);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}

.e-score {
  font-family: var(--mono);
  font-size: clamp(64px, 14vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.e-score.is-pass { color: var(--sakura); }

.e-verdict {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-3);
}

.e-verdict.is-pass { color: var(--sakura); }

.e-summary {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.e-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.e-actions .e-start { margin-top: 0; flex: 1; }

a.e-link {
  flex: none;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  font-size: 14px;
  color: var(--ink-2);
}

a.e-link:hover { border-color: var(--ink-3); color: var(--ink); }

.e-wrong-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: clamp(30px, 5vw, 42px) 0 14px;
  font-size: 17px;
  font-weight: 700;
}

.e-wrong-title .mono { color: var(--ink-3); }

.e-wrong {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.e-wrong-item {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

.e-wrong-q {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.65;
}

.e-wrong-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.e-wrong-mine { color: #8a909c; }
.e-wrong-mine::before { content: "✕ "; }
.e-wrong-right { color: var(--sakura); font-weight: 600; }
.e-wrong-right::before { content: "✓ "; }

.e-wrong-ex {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}

.e-allright {
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
}

@media (max-width: 560px) {
  .e-facts li { padding: 14px 12px; flex-direction: column; gap: 2px; }
  .e-facts b { font-size: 24px; }
  .e-nav { grid-template-columns: 1fr 1fr; }
  .e-nav-card { grid-column: 1 / -1; order: 3; }
  .e-sheet-grid { grid-template-columns: repeat(8, 1fr); }
  .e-actions { flex-direction: column; align-items: stretch; }
  .e-link { text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   移动端触摸：去掉长按选中和点击时的矩形高亮
   安卓 Chrome 点按会在元素上盖一层灰块，iOS 长按会弹「打开 / 拷贝」菜单
   ══════════════════════════════════════════════════════════════ */

.drive { -webkit-tap-highlight-color: transparent; }

.d-tab,
.d-card,
.d-toc a,
.d-term,
.e-start,
.e-quit,
.e-nav-btn,
.e-opt,
.e-cell,
.e-sheet-close,
.d-term-close {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 高亮去掉后补一点按压反馈，否则点下去像没反应 */
.d-tab:active,
.d-toc a:active,
.e-nav-btn:active,
.e-opt:active,
.e-quit:active,
.d-term-close:active { opacity: .68; }

.d-card:active,
.e-start:active,
.e-cell:active { opacity: .85; }

/* ══════════════════════════════════════════════════════════════
   即时判题：题目头部、对错状态、反馈条
   ══════════════════════════════════════════════════════════════ */

.e-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.e-meta .e-kind { margin: 0; }

.e-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: var(--surface);
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.e-mark:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }

/* 已加入用柠檬：全站唯一允许浅底的地方，且只配墨字 */
.e-mark.is-on {
  border-color: transparent;
  background: var(--lemon);
  color: var(--ink);
  font-weight: 600;
}

.e-mark:disabled { opacity: .45; cursor: default; }

.e-mark-star { font-size: 13px; line-height: 1; }

/* ── 选项的对错态 ─────────────────────────────────────────── */

.e-opt:disabled { cursor: default; }

.e-opt.is-correct {
  border-color: var(--sky);
  background: var(--sky);
  color: #fff;
}

.e-opt.is-wrong {
  border-color: var(--sakura);
  background: var(--sakura);
  color: #fff;
}

.e-opt.is-dim { opacity: .45; }
.e-opt.is-dim .e-key { background: #f2f3f7; }

.e-opt.is-correct .e-key,
.e-opt.is-wrong .e-key { background: rgba(255, 255, 255, .22); color: #fff; }

.e-tag {
  margin-left: auto;
  padding-left: 10px;
  font-size: 10.5px;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: .9;
}

.e-tag:empty { display: none; }

/* ── 判定反馈 ─────────────────────────────────────────────── */

.e-fb {
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--line-2);
  background: #fafbfc;
}

.e-fb[hidden] { display: none; }

.e-fb.is-ok { border-left-color: var(--sky); background: #f5f9fc; }
.e-fb.is-bad { border-left-color: var(--sakura); background: #fdf6f7; }

.e-fb-head {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.e-fb-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}

.e-fb-next {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.e-fb-next:hover { background: #2a2d36; }

/* ── 答题卡：已答分成对错 ─────────────────────────────────── */

.e-cell.is-right {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff;
}

.e-cell.is-wrong {
  background: var(--sakura);
  border-color: var(--sakura);
  color: #fff;
}

.e-cell.is-right.is-now,
.e-cell.is-wrong.is-now { box-shadow: inset 0 0 0 2px var(--ink); color: #fff; }

/* ── 结果页的收藏按钮 ─────────────────────────────────────── */

.e-wrong-mark {
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: var(--surface);
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-2);
  cursor: pointer;
}

.e-wrong-mark:hover { border-color: var(--ink-3); color: var(--ink); }

.e-wrong-mark.is-on {
  border-color: transparent;
  background: var(--lemon);
  color: var(--ink);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   错题集页面
   ══════════════════════════════════════════════════════════════ */

.w-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.w-count {
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.w-count b { color: var(--ink); font-weight: 700; }

.w-actions { display: flex; gap: 8px; }

.w-btn {
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: var(--surface);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.w-btn:hover:not(:disabled) { border-color: var(--ink-3); }

.w-btn:disabled {
  color: #b9bec8;
  border-color: var(--line);
  cursor: default;
}

.w-btn-danger:not(:disabled) { color: var(--sakura); }
.w-btn-danger:not(:disabled):hover { border-color: var(--sakura); }

.w-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: #f5f9fc;
  border-left: 3px solid var(--sky);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.w-note[hidden] { display: none; }
.w-note.is-bad { background: #fdf6f7; border-left-color: var(--sakura); }

.w-empty {
  margin-top: 18px;
  padding: clamp(30px, 6vw, 48px) 24px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .6);
  text-align: center;
}

.w-empty[hidden] { display: none; }

.w-empty-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
}

.w-empty-text {
  margin: 0 auto;
  max-width: 36ch;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-3);
}

/* 带上 a 标签名，权重才压得过 .drive a 的 color: inherit */
a.w-empty-link {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 20px;
  border-radius: var(--pill);
  background: var(--sakura);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.w-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.w-item {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.w-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.w-type {
  padding: 2px 9px;
  border-radius: var(--pill);
  background: var(--sky);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: .03em;
}

.w-del {
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: none;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-3);
  cursor: pointer;
}

.w-del:hover { border-color: var(--sakura); color: var(--sakura); }

.w-q {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
}

.w-opts {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.w-opt {
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}

.w-opt.is-right { color: var(--sky); font-weight: 600; }
.w-opt.is-right::after { content: " ✓"; }

.w-ex {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line-2);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

@media (max-width: 560px) {
  .w-bar { flex-wrap: wrap; }
  .w-actions { width: 100%; }
  .w-btn { flex: 1; }
  .e-mark { padding: 4px 9px; font-size: 11px; }
  .e-mark-text { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   主题标签：考试页题目头部 + 错题集筛选
   ══════════════════════════════════════════════════════════════ */

.e-meta-l {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.e-tagrow {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* 标签是辅助信息，用中性灰，不跟题型的主色抢 */
.e-tagi {
  padding: 2px 9px;
  border-radius: var(--pill);
  background: #eef0f4;
  color: #5a606c;
  font-size: 10.5px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.w-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.w-filter[hidden] { display: none; }

.w-chip {
  padding: 6px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: var(--surface);
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.w-chip:hover { border-color: var(--ink-3); color: var(--ink); }

.w-chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.w-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.w-tagi {
  padding: 2px 9px;
  border-radius: var(--pill);
  background: #eef0f4;
  color: #5a606c;
  font-size: 10.5px;
  white-space: nowrap;
}

.w-none {
  padding: 34px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}