/* 配色与分组页面一致：米白底、深蓝强调色；不加载外部字体（大陆访问 Google Fonts 不稳定），用系统字体 */
:root {
  --bg: #f6f5f2; --card: #ffffff; --fg: #22211f; --muted: #6d6a64; --line: #e2dfd8; --accent: #1e50a2;
  --plate: #e8eef9; --tag: #b3401f;
  --new: #1e6fd9; --learn: #c2410c; --review: #15803d;
  /* 学习日历色阶：0 = 灰（--line），学得越多蓝色越深 */
  --heat1: #8db8ec; --heat2: #5a8fd8; --heat3: #2f64b5; --heat4: #163f80;
  --again: #b91c1c; --hard: #a16207; --good: #15803d; --easy: #1e50a2;
  --jp: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --zh: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --en: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #171716; --card: #222120; --fg: #efede8; --muted: #a29e96; --line: #36342f; --accent: #8fb0ea; --plate: #1f2a3d; --tag: #f0936f;
  --new: #6aa7f5; --learn: #f59e66; --review: #5fcf8a; --again: #f87171; --hard: #facc15; --good: #5fcf8a; --easy: #8fb0ea;
  --heat1: #2e5994; --heat2: #4178c8; --heat3: #659de6; --heat4: #a6caf6;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #171716; --card: #222120; --fg: #efede8; --muted: #a29e96; --line: #36342f; --accent: #8fb0ea; --plate: #1f2a3d; --tag: #f0936f;
  --new: #6aa7f5; --learn: #f59e66; --review: #5fcf8a; --again: #f87171; --hard: #facc15; --good: #5fcf8a; --easy: #8fb0ea;
  --heat1: #2e5994; --heat2: #4178c8; --heat3: #659de6; --heat4: #a6caf6;
  color-scheme: dark }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 var(--zh); min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 calc(64px + env(safe-area-inset-bottom)); }
[lang="ja"] { font-family: var(--jp); }
[lang="en"] { font-family: var(--en); }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
kbd { font: 11px var(--en); opacity: .55; margin-left: 6px; }
.muted { color: var(--muted); } .small { font-size: .82rem; } .err { color: var(--again); }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font: 900 1.15rem var(--jp); color: var(--fg); text-decoration: none; }
.chip { font-size: .75rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.ok { color: var(--review); border-color: currentColor; } .chip.busy { color: var(--accent); }
.chip.warn { color: var(--hard); border-color: currentColor; } .chip.err { color: var(--again); border-color: currentColor; }

main { max-width: 760px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 4px;
  padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.tabs a { flex: 1; max-width: 160px; text-align: center; padding: 8px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
.tabs a.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
body[data-route="study"] .tabs { display: none; }
body[data-route="study"] { padding-bottom: env(safe-area-inset-bottom); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--bg); padding: 9px 18px; text-decoration: none; font-weight: 500; }
.btn.ghost { background: var(--card); color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); }
.btn.sm { padding: 3px 10px; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .play:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h2.group { font-size: .95rem; color: var(--muted); font-weight: 500; margin: 22px 0 10px; }
/* 首页按语言折叠 */
details.lang { margin-top: 18px; }
details.lang > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; padding: 6px 2px; margin-bottom: 8px; color: var(--muted); user-select: none; }
details.lang > summary::-webkit-details-marker { display: none; }
details.lang > summary::before { content: "▸"; display: inline-block; transition: transform .15s; }
details.lang[open] > summary::before { transform: rotate(90deg); }
.lang-name { font-size: .95rem; font-weight: 600; color: var(--fg); }
.lang-meta { font-size: .78rem; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* 首页 */
.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.summary div { display: grid; }
.summary b { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.summary span { font-size: .78rem; color: var(--muted); }
.summary .legend { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); margin-left: auto; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.n-new { color: var(--new); } .n-learn { color: var(--learn); } .n-review { color: var(--review); }
.decks { display: grid; gap: 10px; }
.deck { display: flex; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.deck.done { opacity: .72; }
.deck-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.deck-main:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.deck-title { font-weight: 700; font-size: 1.05rem; }
.deck-desc { grid-column: 1; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-main .counts { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.counts { display: inline-flex; gap: 10px; font-variant-numeric: tabular-nums; }
.counts b { min-width: 1.4em; text-align: right; }
.deck-side { display: grid; border-left: 1px solid var(--line); font-size: .8rem; white-space: nowrap; }
.deck-side a { display: flex; align-items: center; justify-content: center; padding: 0 14px; text-decoration: none; color: var(--muted); }
.deck-side a + a { border-top: 1px solid var(--line); }
.deck-side a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.deck-side .deck-play { color: var(--accent); }
.deck.hard { border-color: color-mix(in srgb, var(--again) 45%, var(--line)); }
.auto-tag { font-size: .68rem; font-weight: 500; padding: 1px 6px; margin-right: 6px; border-radius: 999px; vertical-align: 2px; color: var(--again); border: 1px solid currentColor; }
/* 播放 */
.play-card { min-height: 280px; }
.play-status { text-align: center; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.play-ctrl { display: flex; justify-content: center; gap: 10px; }
.play-ctrl [data-toggle] { min-width: 9em; }

/* 学习 */
.study-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.back { font-size: 1.8rem; line-height: 1; text-decoration: none; color: var(--muted); padding: 0 6px 4px 0; }
.study-title { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flash { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; min-height: 52dvh; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; }
.type-chip { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.face { flex: 1; display: flex; flex-direction: column; }
.prompt { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px 16px; text-align: center; }
.hint { margin: 0; color: var(--muted); font-size: .85rem; }
.zh-big { font-size: 1.9rem; font-weight: 700; }
.head { position: relative; display: grid; justify-items: center; gap: 2px; }
.fig { font: 900 3rem/1.15 var(--jp); overflow-wrap: anywhere; text-align: center; }
.fig[lang="en"] { font-family: var(--en); font-weight: 800; }
.fig.m { font-size: 2.2rem; } .fig.s { font-size: 1.5rem; }
.kj { font: 700 1rem var(--jp); color: var(--muted); }
.tag { font-size: .7rem; font-weight: 700; color: var(--tag); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; }
.answer { padding: 28px 18px 18px; display: grid; gap: 6px; cursor: default; }
.answer .head, .row .head { justify-items: start; }
.answer .fig, .row .fig { text-align: left; }
.head-row, .row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; margin: -28px -18px 6px; background: var(--plate); border-bottom: 1px solid var(--line); }
.row-head { margin: -14px -14px 6px; }
.answer .fig { font-size: 2.2rem; } .answer .fig.s, .row .fig.s { font-size: 1.35rem; } .row .fig { font-size: 1.7rem; }
.reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kana { font: 700 1.3rem var(--jp); } .ipa { font: 1.15rem var(--en); } .ro { color: var(--accent); font-size: .92rem; }
.zh { font-weight: 700; font-size: 1.1rem; }
.example { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; gap: 2px; font-size: .9rem; color: var(--muted); }
.ex-line { display: flex; align-items: center; gap: 8px; }
.ex-line b { color: var(--fg); font-weight: 700; font-size: 1rem; }
.ex-kana { font-family: var(--jp); } .ex-ro { color: var(--accent); font-size: .85rem; }
.an { margin-top: 6px; }
.an summary { cursor: pointer; color: var(--accent); font-size: .82rem; }
.an .parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.part { display: grid; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.part b { font-family: var(--jp); color: var(--fg); } .part i { font-style: normal; color: var(--accent); font-size: .75rem; } .part small { font-size: .75rem; }
.an p { margin: 0; line-height: 1.6; }
.play { flex: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--accent); background: var(--card); color: var(--accent); font-size: .95rem; }
.play.sm { width: 28px; height: 28px; font-size: .7rem; }
.play.big { width: 96px; height: 96px; font-size: 2rem; }
.play:hover { background: var(--accent); color: var(--bg); }
.actions { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--bg); }
.actions .reveal { grid-column: 1 / -1; padding: 14px; font-size: 1.05rem; }
.rate { display: grid; gap: 0; padding: 8px 4px; border-radius: 12px; background: var(--card); color: var(--fg); border-color: var(--line); }
.rate small { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rate kbd { display: none; }
@media (hover: hover) { .rate kbd { display: inline; } }
.rate.again { border-bottom: 3px solid var(--again); } .rate.hard { border-bottom: 3px solid var(--hard); }
.rate.good { border-bottom: 3px solid var(--good); } .rate.easy { border-bottom: 3px solid var(--easy); }
.finished { text-align: center; padding: 48px 0; }
.finished p { font-size: 1.1rem; }

/* 浏览 */
.browse-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.browse-tools input { flex: 1 1 220px; min-width: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; }
.rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 12px; }
.row { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 4px; align-content: start; overflow: hidden; }
.type-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st { font-size: .72rem; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.st.new { color: var(--new); } .st.learn { color: var(--learn); } .st.review { color: var(--review); }

/* 统计 */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); }
.stack { display: flex; height: 14px; background: var(--line); border-radius: 8px; overflow: hidden; font-size: .75rem; }
.stack span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; color: var(--bg); }
.stack .n-new { background: var(--new); } .stack .n-learn { background: var(--learn); } .stack .n-review { background: var(--review); }
/* 未来 30 天到期：单系列柱状图，不需要图例；左上角标出最大值，下方标日期，悬停看每天数字 */
.fc-sum { margin-bottom: 10px; }
.fc { margin: 0; padding: 10px 12px 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.fc-plot { position: relative; height: 120px; padding-top: 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--line), var(--line)) 0 18px / 100% 1px no-repeat; }
.fc-max { position: absolute; top: 0; left: 0; font-size: .72rem; color: var(--muted); }
.fc-bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 100%; align-items: end; }
.fc-bars span { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.fc-bars span:hover i { filter: brightness(1.15); }
.fc-bars i { width: 100%; background: color-mix(in srgb, var(--accent) 55%, var(--card)); border-radius: 4px 4px 0 0; }
.fc-bars .today i { background: var(--accent); }
.fc-axis { display: grid; grid-template-columns: repeat(30, 1fr); font-size: .72rem; color: var(--muted); padding-top: 4px; white-space: nowrap; }

/* 学习日历：宽度占满一行，每列一周（周一到周日），灰 → 浅蓝 → 深蓝 */
.heat-card { margin: 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 4px; }
.heat-months { display: grid; grid-template-columns: repeat(16, 1fr); margin-left: 22px; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.heat-body { display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
.heat-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; font-size: .68rem; color: var(--muted); align-items: center; }
.heat { display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 3px; }
.heat i, .heat-legend i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--line); }
.heat i.future { background: transparent; }
.heat-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; }
.heat-legend { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.heat-legend i { width: 11px; }
.l1 { background: var(--heat1) !important; } .l2 { background: var(--heat2) !important; }
.l3 { background: var(--heat3) !important; } .l4 { background: var(--heat4) !important; }

/* 设置 */
.panel { display: grid; gap: 10px; justify-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.panel p { margin: 0; }
.panel label { display: flex; align-items: center; gap: 10px; }
.panel input:not([type=file]), .panel select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.panel input[type=number] { width: 6em; }
.inline { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.inline input { flex: 1 1 200px; min-width: 0; }
code { font: .9rem ui-monospace, Menlo, monospace; padding: 2px 6px; border-radius: 6px; background: var(--bg); }
code.masked { filter: blur(5px); user-select: none; }
.file { position: relative; }
.qr { width: 200px; max-width: 100%; padding: 8px; background: #fff; border-radius: 8px; line-height: 0; }
.qr svg { width: 100%; height: auto; display: block; }