/* dict.tomoshi.app —— 外壳（页头 / 列宽 / 卡片面）对齐 tomoshi.app 主站，
   内容排版沿用桌面应用的词典卡。两套真源各管一段，改动时分别对照：
   - 主站 tomoshi-web/src/styles/global.css：--color-*（暖灯火调）、--maxw、
     --radius、--shadow-*、.site-header 毛玻璃页头、.cta 按钮。主站是**亮色单主题**
     （color-scheme: light，无 prefers-color-scheme 分支），本站随之亦然——否则深色下
     就不是「同一个背景」了。
   - 应用 tomoshi-ja-dict/src/app.css：--dict-* 字号档、--font-ja、语体/JLPT 实心章、
     级别色。这些是内容语义色，与页面底色无关，逐字照抄。 */

:root {
  color-scheme: light;

  /* ── 主站调色板（逐字照抄 global.css :root） ── */
  --color-bg: #fdf3e3; /* 暖灯火底 */
  --color-bg-alt: #fffbf2; /* 交替浅带 */
  --color-surface: #ffffff;
  --color-accent: #f0a63c; /* 灯火金 */
  --color-accent-strong: #b45309; /* 焦糖褐：链接/强调 */
  --color-accent-soft: #f9e5bd; /* chip 底 */
  --radius: 16px;
  --maxw: 1120px;
  --page-pad: clamp(1.25rem, 5vw, 2.5rem);
  --shadow-soft: 0 12px 32px rgba(37, 43, 58, 0.07);
  --shadow-lift: 0 16px 40px rgba(37, 43, 58, 0.1);

  /* ── 应用侧的语义名映射到主站的值：组件规则不必逐条改名 ── */
  --color-primary: var(--color-accent-strong);
  --color-primary-hover: #8f4208;
  --color-primary-bg: var(--color-accent-soft);
  --color-primary-border: #e8c887;
  --color-primary-solid: var(--color-accent);
  --color-primary-solid-hover: var(--color-accent-strong);

  /* 可点词仍用链接蓝：卡片是白底，蓝与暖色强调色分工不同（前者「这个词可以点」，
     后者是站点强调），混用会让例句里每个词都读成强调。 */
  --color-word-link: #0969da;
  --color-word-link-hover: #0550ae;

  /* 中性档：以主站的墨紺与暖褐灰为两端，中间档按亮度插值（原冷灰在暖底上发涩） */
  --color-text-strong: #1b2130;
  --color-text: #252b3a; /* 墨紺 */
  --color-text-soft: #3f4454;
  --color-text-secondary: #5c5646;
  --color-text-muted: #756a54; /* 暖褐灰 */
  --color-text-faint: #9a8f79;
  --color-text-inverse: #fff;
  --color-disabled: #cfc3aa;

  --color-border: #eddfc4; /* 暖底描边 */
  --color-border-light: #f4e9d6;
  --color-bg-muted: #f6ecdb;
  --color-bg-subtle: var(--color-bg-alt);

  /* 级别色（分类色，App app.css 同值） */
  --color-green-600: #16a34a;
  --color-cyan-600: #0891b2;
  --color-yellow-600: #ca8a04;
  --color-orange-600: #ea580c;
  --color-red-600: #dc2626;

  /* 实心章底（App badge 群，色相恒定） */
  --color-badge-blue: #1d4ed8;
  --color-badge-green-strong: #15803d;
  --color-badge-violet: #7c3aed;
  --color-badge-red-strong: #b91c1c;
  --color-badge-orange-strong: #c2410c;
  --color-badge-sky: #0369a1;
  --color-badge-purple: #7e22ce;

  --color-text-orange: #c2410c;
  --color-text-sky: #0369a1;
  --color-pitch-accent: #4a90d9;

  /* 字号档（App --dict-*）；窄屏在文件末尾上调 */
  --dict-title-size: 20px;
  --dict-reading-size: 18px;
  --dict-body-size: 14px;
  --dict-sub-size: 13px;
  --dict-caption-size: 12px;

  /* 界面字体取主站栈（简中）；日语内容仍走应用的 --font-ja 以保日文字形 */
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-ja:
    "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP",
    "Noto Sans SC", "Yu Gothic UI", Meiryo, sans-serif;
}

html[lang="zh-Hant"] {
  --font-sans:
    "Inter", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* 主站 global.css body 同款：同一个 700 不开平滑会显得更重（笔画外扩） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[lang="ja"],
.ja {
  font-family: var(--font-ja);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ── 页头：复刻主站 .site-header（毛玻璃吸顶，内层对齐内容列）───────────── */
/* 吸顶区容器 = 大陆引导横幅 + 页头（同主站 .site-top）：横幅因此与页头一起
   吸顶而不是被滚走。无横幅的页面（境内站、非大陆访客）容器里只有 header，
   行为与加容器之前一致。
   ⚠️ `.top` **必须保留自己的 sticky**，不能像主站那样把定位全交给容器：
   本站 24 万页，HTML 与 CSS 是两批对象、各有各的边缘缓存，发布期必然出现
   「新 CSS + 旧 HTML（无容器）」的组合——2026-08-20 实际踩到，页头当场不吸顶。
   两层都写 sticky 时，内层在已吸顶的容器里无处可动，视觉上无差别，却让 CSS
   对新旧两种标记都成立（Worker 请求期渲染的消歧页同理受益）。 */
.dict-top {
  position: sticky;
  top: 0;
  z-index: 40;
}
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-bg-alt) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  box-shadow:
    0 1px 2px rgba(37, 43, 58, 0.04),
    0 6px 20px rgba(37, 43, 58, 0.06);
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.85rem var(--page-pad);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}
.brand:hover {
  text-decoration: none;
  color: var(--color-accent-strong);
}
.brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}
.top nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.95rem;
  /* 窄屏下拉菜单以此为定位参照 */
  position: relative;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
/* 「JLPT ▾」触发按钮：只在窄屏出现（见文末媒体查询），桌面用平铺的三条链接 */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.15rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
}
.nav-toggle:hover {
  color: var(--color-accent-strong);
}
.top nav a {
  color: var(--color-text-muted);
}
.top nav a:hover {
  color: var(--color-accent-strong);
  text-decoration: none;
}
/* 下载入口：与主站页头的「下载」同一处理——只加粗、不做实心按钮，
   免得页头出现两个抢眼度相同的主按钮（尾部 CTA 才是主入口）。 */
.nav-cta {
  font-weight: 700;
}

/* ── 列宽：与主站同一条内容列（--maxw + 同一 clamp 内边距）─────────────── */
.page {
  max-width: var(--maxw);
  margin: 2rem auto 0;
  padding: 0 var(--page-pad) 2rem;
}
/* 三个 JLPT 一览页（语法 / 单词 / 汉字）：页头下方紧跟着筛选条，正文不再需要
   2rem 的呼吸位。两个类的选择器优先级高于窄屏媒体查询里的 `.page`，故窄屏
   同样是 10px（这三页的窄屏留白由筛选条自己给）。 */
.k-gindex .page,
.k-windex .page,
.k-kindex .page {
  margin: 10px auto 0;
}

/* ── 速查表索引（对应 routes/tools 的卡片索引）──────────────────────────── */
.index-hint {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 14px;
}
.group {
  margin-bottom: 22px;
}
.group-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-soft);
  margin: 4px 0 10px;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--color-border);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: left;
  color: inherit;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.tool-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
  text-decoration: none;
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-bg);
  color: var(--color-primary-hover);
}
.card-body {
  flex: 1;
  min-width: 0;
}
.card-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.card-desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.card-go {
  flex: none;
  color: var(--color-text-faint);
}

/* ── 页头筛选条（对应 JLPT 页 .sticky-bar）─────────────────────────────── */
.sticky-bar {
  position: sticky;
  /* 页头高 = 0.85rem×2 内边距 + 1.75rem 品牌行 ≈ 3.45rem；用 rem 跟随字号。
     --cn-hint-h = 大陆引导横幅的实测高度（cn-hint.js 写入，未显示时为 0）——
     不加这一项，横幅显示时筛选条会顶到横幅底下去。 */
  top: calc(3.45rem + var(--cn-hint-h, 0px));
  z-index: 10;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
  margin-bottom: 10px;
}
.sticky-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 13px;
}
.back-btn:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  text-decoration: none;
}
.detail-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.levels,
.registers {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.filter-label {
  font-size: 12px;
  color: var(--color-text-faint);
  margin-right: 2px;
}
/* 级别行与语体行共用一套 filter chip（同 App 2026-07-27 的统一） */
.level-tab,
.register-chip {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.level-tab:hover:not(:disabled),
.register-chip:hover:not(:disabled) {
  background: var(--color-bg-subtle);
}
.level-tab.active,
.register-chip.active {
  background: var(--color-primary-bg);
  color: var(--color-primary-hover);
  border-color: var(--color-primary-border);
  font-weight: 600;
}
.level-tab:disabled,
.register-chip:disabled {
  color: var(--color-disabled);
  cursor: default;
}

.grammar-search {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  width: 280px;
  max-width: 100%;
}
.grammar-search-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-family: var(--font-ja);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}
.grammar-search-input:focus {
  border-color: var(--color-primary);
}
.search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-secondary);
}

/* ── 级别分组 + 简略列表（对应 JLPT 页）─────────────────────────────────── */
.approx-note {
  color: var(--color-text-faint);
  font-size: 12px;
  margin: 10px 1.4rem 0 0;
}
.result-count {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 10px;
}
.state {
  color: var(--color-text-faint);
  padding: 24px 0;
  text-align: center;
}
.level-group {
  margin-bottom: 16px;
}
.level-head {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-soft);
  margin: 4px 0 10px;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--color-border);
}
.level-n5 {
  color: var(--color-green-600);
}
.level-n4 {
  color: var(--color-cyan-600);
}
.level-n3 {
  color: var(--color-yellow-600);
}
.level-n2 {
  color: var(--color-orange-600);
}
.level-n1 {
  color: var(--color-red-600);
}

.compact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: item;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.compact-list > li {
  counter-increment: item;
  border-top: 1px solid var(--color-bg-muted);
}
.compact-list > li:first-child {
  border-top: none;
}
.compact-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  padding: 9px 14px 9px 40px;
  position: relative;
  font-size: 14px;
  color: inherit;
}
.compact-row::before {
  content: counter(item) ".";
  position: absolute;
  left: 12px;
  color: var(--color-text-faint);
  font-size: 13px;
}
.compact-row:hover {
  background: var(--color-accent-soft);
  text-decoration: none;
}
.c-pattern {
  font-family: var(--font-ja);
  font-weight: 600;
  color: var(--color-text);
  flex-shrink: 0;
}
.c-meaning {
  color: var(--color-text-muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 大陆访客引导横幅（照主站 CnHint.astro）─────────────────────────────
   页头上方的一条通栏提示，与页头一起吸顶；不用固定定位/模态——引导性信息不该
   挡住用户本来要看的东西，也不该需要「先处理掉」才能继续读。 */
.cn-hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: var(--color-accent-soft);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}
.cn-hint[hidden] {
  display: none;
}
.cn-hint-text {
  margin: 0;
  flex: 1;
  text-align: center;
}
.cn-hint-link {
  font-weight: 700;
  color: var(--color-accent-strong);
}
.cn-hint-close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.cn-hint-close:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── JLPT 单词 / 汉字一览的网格（照 App jlpt 页的 kanji-grid / word-grid）──
   格内是裸 <b>（词头/汉字）+ <i>（读音/字义），不带 class——单词页 7,777 格，
   省下的属性合计约 700 KB（见 ssg/pages.ts gridIndexPage 头注）。故这里用后代
   选择器，容器内没有别的元素。 */
.kanji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.kanji-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  background: var(--color-surface);
  text-align: center;
  overflow: hidden;
}
/* .kanji-cell 有 display:flex，会盖掉 UA 的 [hidden]{display:none}——过滤脚本
   靠 a.hidden 隐藏，这条不能省（语法页隐藏的是没设 display 的 <li>，故不需要）。 */
.kanji-cell[hidden] {
  display: none;
}
.kanji-cell:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-border);
  text-decoration: none;
}
.kanji-grid b {
  font-family: var(--font-ja);
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-text);
}
.kanji-grid i {
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
  color: var(--color-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 单词框：列宽更大以容纳词形；词头小一号且加粗（汉字框那边是单字，故更大）。
   min-height 卡在「词头 + 读音」两行的高度上，让无读音的假名词与有读音的等高。 */
.word-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.word-grid .kanji-cell {
  min-height: 65px;
}
.word-grid b {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.word-grid i {
  font-family: var(--font-ja);
}
/* 只有级别一行时（单词/汉字页无语体行），把下边距补回语法页两行时的观感。 */
.levels-sole {
  margin-bottom: 2px;
}

/* ── 标签章（DictPanel / RegisterTag 的实心章群）────────────────────────── */
.jlpt,
.common,
.trans-tag,
.register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.jlpt {
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  background: var(--color-badge-blue);
  color: var(--color-text-inverse);
  border-radius: 5px;
  cursor: help;
}
.jlpt-approx {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-text-inverse);
}
.common {
  font-size: 11px;
  padding: 4px 6px;
  background: var(--color-badge-green-strong);
  color: var(--color-text-inverse);
  border-radius: 4px;
}
.register {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  cursor: help;
}
/* 语体色按正式度分档（口语=绿 ＜ 中性=紫 ＜ 书面=蓝 ＜ 正式=红），同 RegisterTag。
   类名用罗马字：数据值是简体汉字，繁体页也用同一套键。 */
.register-kougo {
  color: var(--color-text-inverse);
  background: var(--color-badge-green-strong);
  border-color: var(--color-badge-green-strong);
}
.register-chusei {
  color: var(--color-text-inverse);
  background: var(--color-badge-violet);
  border-color: var(--color-badge-violet);
}
.register-shomen {
  color: var(--color-text-inverse);
  background: var(--color-badge-blue);
  border-color: var(--color-badge-blue);
}
.register-seishiki {
  color: var(--color-text-inverse);
  background: var(--color-badge-red-strong);
  border-color: var(--color-badge-red-strong);
}
.trans-tag {
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--color-text-inverse);
}
.trans-vi {
  background: var(--color-badge-orange-strong);
}
.trans-vt {
  background: var(--color-badge-sky);
}

/* ── 结果卡（DictPanel .entry-card / GrammarCard .grammar-card）─────────── */
/* 内容模块 = 主站卡片的面：白底 + 暖描边 + 16px 圆角 + 柔投影 */
.entry-card {
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.entry-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
/* 词头行与右侧标签行**垂直居中**对齐。两处都要动，缺一不可：
   ① align-items: center —— 标签相对词头居中（原为 flex-start，标签贴行顶）；
   ② .word 是 <h1>，UA 默认给 0.67em 上下外边距（≈13px），不清零的话词头会被
      整体压低，看上去比标签低半行——截图里的错位就是它。line-height 钉成 1.3
      让首行高 ≈26px，与标签的 min-height 一致。 */
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.word {
  display: flex;
  flex-wrap: wrap;
  /* 词头与读音字号不同（26px / 20px），**按基线对齐**而不是盒子居中：盒子居中
     会把小字的基线抬到大字基线之上，读音看起来就浮着（2026-08-20 修）。
     分隔条与重音图是图形，仍按盒子居中，见下。 */
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  min-height: 26px;
  margin: 0;
  line-height: 1.3;
}
/* 「|」与重音图（含 [2] 标签）跟着基线走会被拽到底部——它们不是正文文字，
   保持盒子居中。 */
.word > .separator,
.word > .pa {
  align-self: center;
}
.kanji {
  font-family: var(--font-ja);
  font-size: var(--dict-title-size);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.kana {
  font-family: var(--font-ja);
  font-size: var(--dict-reading-size);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.word.kana-headword .kana {
  font-size: var(--dict-title-size);
  font-weight: 600;
  color: var(--color-text);
}
.separator {
  color: var(--color-disabled);
  margin: 0 4px;
}
.alt-sep {
  color: var(--color-disabled);
  font-size: 14px;
  margin: 0 4px;
}
.meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  min-height: 26px;
  flex-wrap: wrap;
}
.readings-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
}
.reading-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.form-tag {
  font-size: 10px;
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
}
.subhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}

/* 内容分区：小灰标题 + 分隔线（DictPanel .def-section） */
.def-section {
  padding: 12px 0 8px;
  border-top: 1px solid var(--color-border);
}
.def-section:first-of-type {
  border-top: none;
}
.def-section-title {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.def-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: def;
}
.def-item {
  display: flex;
  gap: 6px;
  font-size: var(--dict-body-size);
  line-height: 1.6;
  padding: 5px 0;
  counter-increment: def;
}
.def-item::before {
  content: counter(def) ".";
  color: var(--color-text-faint);
  flex: none;
}
.def-body {
  min-width: 0;
  flex: 1;
}
.pos {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--dict-sub-size);
  padding-bottom: 5px;
}
.glosses {
  color: var(--color-text);
}
.sense-note {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--dict-sub-size);
}

/* 例句：左细线 + 译文（DictPanel / GrammarCard） */
.examples {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.example {
  border-left: 2px solid var(--color-border);
  padding-left: 8px;
}
.example-jp {
  font-family: var(--font-ja);
  font-size: var(--dict-body-size);
  line-height: 1.6;
  color: var(--color-text);
}
.example-zh {
  font-size: var(--dict-sub-size);
  color: var(--color-text-soft);
  line-height: 1.4;
  margin-top: 2px;
}
.src {
  margin-left: 4px;
  font-size: 11px;
  color: var(--color-text-faint);
}
.src:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* 可点词：着色不加下划线（FuriganaText .word-link） */
a.wl {
  color: var(--color-word-link);
}
a.wl:hover {
  color: var(--color-word-link-hover);
  text-decoration: none;
}
ruby rt {
  font-size: 0.55em;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* 重音图（PitchAccent.svelte 同款） */
.pitch {
  vertical-align: middle;
  margin-left: 0.15em;
}
.pitch .ln {
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}
.pitch .dot {
  fill: var(--color-pitch-accent);
}
.pitch .dot.lo {
  fill: var(--color-text-muted);
}
.pitch .dot.tr {
  fill: var(--color-surface);
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}
.pl {
  font-size: 12px;
  color: var(--color-text-faint);
}

/* 辨析 / 自他 / 写法辨析 */
.rel-list,
.zh-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rel-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  font-size: var(--dict-body-size);
}
.rel-word {
  font-family: var(--font-ja);
  font-weight: 600;
}
.rel-reading {
  font-family: var(--font-ja);
  font-size: var(--dict-caption-size);
  color: var(--color-text-muted);
}
.rel-note {
  flex-basis: 100%;
  color: var(--color-text-secondary);
  font-size: var(--dict-sub-size);
  line-height: 1.5;
}
.rel-tag {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  flex: none;
}
.rel-tag.ant {
  background: var(--color-badge-red-strong);
  color: var(--color-text-inverse);
}
.sum {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  font-size: var(--dict-sub-size);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.ai-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--color-text-faint);
}

/* 自他对应（DictPanel .vp-*） */
.vp-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--dict-body-size);
  padding-top: 4px;
}
.vp-arrow {
  color: var(--color-text-faint);
}
.vp-card {
  margin: 2px 0 8px;
  padding: 8px 10px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  font-size: var(--dict-sub-size);
}
.vp-ex {
  font-family: var(--font-ja);
  line-height: 1.6;
}
.vp-note {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 写法辨析 */
.variant-row {
  display: flex;
  gap: 6px;
  padding: 5px 0;
  font-size: var(--dict-body-size);
}
.variant-form {
  font-family: var(--font-ja);
  font-weight: 600;
  color: var(--color-text);
  flex: none;
}
.variant-note-text {
  color: var(--color-text-secondary);
}
.variant-recommend {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
  font-size: var(--dict-sub-size);
  color: var(--color-text-muted);
}

/* 相关词 / 汉字 chip 行 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-ja);
  font-size: 13px;
  color: var(--color-text);
}
.chip-link:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-border);
  text-decoration: none;
}
.chip-link .rd {
  font-size: 11px;
  color: var(--color-text-muted);
}
.kanji-chip {
  font-size: 20px;
  padding: 2px 12px;
}

/* 汉字页 */
.khead {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.glyph {
  font-family: var(--font-ja);
  font-size: 64px;
  line-height: 1;
  margin: 0;
  color: var(--color-text);
}
/* 笔顺格（同 App KanjiPanel）：一格一笔、累积描绘，最新一笔标红 */
.strokes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stroke-svg {
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-bg-muted);
  border-radius: 6px;
  background: var(--color-surface);
}
.stroke-path {
  stroke: var(--color-text-faint);
}
.stroke-path.current {
  stroke: var(--color-red-600);
}
.kv {
  font-family: var(--font-ja);
  font-size: var(--dict-body-size);
  color: var(--color-text);
}

/* ── 尾部 CTA：复刻主站 .final-cta.band（通栏浅带 + 居中标题/副标题/按钮）──
   full-bleed 浅带的做法与主站 .band 相同：负 margin 拉满视口、等量 padding 推回，
   内容仍与主内容列对齐。 */
.final-cta {
  margin-top: 0;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--color-bg-alt);
  border-block: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  text-align: center;
}
.final-cta-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.final-cta h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--color-accent-strong);
}
.final-cta-sub {
  margin: 0 0 2rem;
  color: var(--color-text-muted);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}
/* 按钮 = 主站 .cta（灯火金实心胶囊 + 同款投影与抬升） */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 40%, transparent);
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
/* 按钮内的平台后缀：同主站 .cta-os（小一号、常规字重、半透明） */
.cta-os {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.75;
}
.cta:hover {
  background: var(--color-accent-strong);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* 平台徽章行 + 系统要求行：照抄主站 .platform-badges / .badge / .sysreq */
.platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 0;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.badge svg {
  width: 1rem;
  height: 1rem;
}
/* 收藏按钮（同 App DictPanel/GrammarCard .fav-btn）：无底无框、灰星，hover 琥珀。
   静态站上它是指向 #download 的锚链接（见 render/actions.ts）。 */
.fav-btn {
  display: inline-flex;
  align-items: center;
  color: var(--color-disabled);
  line-height: 1;
}
.fav-btn:hover {
  color: var(--color-accent);
  text-decoration: none;
}
/* 从卡片星按钮跳过来时的落点提示：平滑滚动 + 短暂高亮，让人知道为什么到了这里 */
html {
  scroll-behavior: smooth;
}
.final-cta:target {
  animation: cta-flash 1.6s ease-out 1;
}
@keyframes cta-flash {
  0% {
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--color-accent) 18%, transparent);
  }
  100% {
    box-shadow: inset 0 0 0 999px transparent;
  }
}
.foot {
  max-width: var(--maxw);
  margin: 1.75rem auto 2.5rem;
  padding: 0 var(--page-pad);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.foot a {
  color: var(--color-text-muted);
}
/* 「数据来源与许可」折叠块与版权行都居中：summary 是 flex 容器（浏览器默认给它
   list-item 的三角标记），要让标记 + 文字一起居中得把它自身设成 inline-block 再由
   父级 text-align 居中；展开后的清单也居中、去掉左侧缩进与项目符号。 */
.lic {
  text-align: center;
}
.lic summary {
  display: inline-block;
  cursor: pointer;
}
.lic ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
/* 版权行：同主站 BaseLayout 的 .footer-note */
.footer-note {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  text-align: center;
}

/* 窄屏：字号档上调（同 App .platform-mobile），筛选条不再吸顶 */
@media (max-width: 640px) {
  :root {
    --dict-title-size: 22px;
    --dict-reading-size: 18px;
    --dict-body-size: 15px;
    --dict-sub-size: 14px;
    --dict-caption-size: 13px;
  }
  .page {
    margin-top: 1.25rem;
    padding: 0 var(--page-pad) 1.5rem;
  }
  .sticky-bar {
    position: static;
  }
  .entry-card {
    padding: 1.1rem 1.15rem;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  /* 三条 JLPT 导航收进「JLPT ▾」下拉（机制同主站 .nav-links/.nav-toggle）；
     「免费下载」留在外面——窄屏也不该多一次点击才够得到主入口。 */
  .nav-toggle {
    display: inline-flex;
  }
  .nav-links {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 8rem;
    padding: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 20;
  }
  .nav-links.nav-open {
    display: flex;
  }
  .nav-links > a {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
  }
  .nav-links > a:hover {
    background: var(--color-bg-muted);
  }
}