:root {
  color-scheme: light;
  --bg: #f3f6f4; --surface: #fff; --surface-2: #e9f0ec; --text: #1d2a26;
  --muted: #5d6b65; --line: #d8e2dc; --accent: #1f6f5c; --accent-contrast: #fff;
  --accent-soft: #dcefe8; --good: #17653f; --good-bg: #e0f3e8; --bad: #a83232;
  --bad-bg: #fae6e4; --warn: #865b08; --warn-bg: #fff1d1; --neutral: #59656a;
  --neutral-bg: #e9edef; --shadow: 0 12px 32px rgb(23 48 38 / 8%); --radius: 18px;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
:root[data-theme="dark"] { color-scheme: dark; --bg:#111b18; --surface:#192621; --surface-2:#22332c; --text:#e6f0eb; --muted:#aebdb5; --line:#34483f; --accent:#62b99d; --accent-contrast:#10231c; --accent-soft:#24483b; --good:#9adeb2; --good-bg:#1f4531; --bad:#ffaaa1; --bad-bg:#512a29; --warn:#f0cb73; --warn-bg:#493b1e; --neutral:#c2cdd2; --neutral-bg:#344149; --shadow:0 12px 32px rgb(0 0 0 / 25%); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] { color-scheme:dark; --bg:#111b18; --surface:#192621; --surface-2:#22332c; --text:#e6f0eb; --muted:#aebdb5; --line:#34483f; --accent:#62b99d; --accent-contrast:#10231c; --accent-soft:#24483b; --good:#9adeb2; --good-bg:#1f4531; --bad:#ffaaa1; --bad-bg:#512a29; --warn:#f0cb73; --warn-bg:#493b1e; --neutral:#c2cdd2; --neutral-bg:#344149; --shadow:0 12px 32px rgb(0 0 0 / 25%); }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { min-width:320px; background:var(--bg); scroll-behavior:smooth; }
body { margin:0; min-width:320px; min-height:100dvh; color:var(--text); background:var(--bg); font-size:16px; line-height:1.5; overflow-x:hidden; }
button, input, select, textarea { font:inherit; color:inherit; }
button, select, input[type="checkbox"], input[type="file"] { cursor:pointer; }
button { min-height:44px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:.65rem 1rem; font-weight:650; transition:transform .12s ease, background .12s ease, border-color .12s ease; }
button:hover { border-color:var(--accent); } button:active { transform:translateY(1px); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { color:var(--accent-contrast); background:var(--accent); border-color:var(--accent); }
button.danger { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, var(--line)); }
button.quiet { background:transparent; }
input, select, textarea { width:100%; min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:.65rem .75rem; }
textarea { min-height:150px; resize:vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 42%, transparent); outline-offset:2px; }
a { color:var(--accent); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.25rem, 3vw, 1.75rem); margin:0; line-height:1.2; }
h2 { font-size:1.2rem; margin-bottom:.7rem; }
h3 { font-size:1rem; margin-bottom:.45rem; }
small,.muted { color:var(--muted); }
.app-shell { min-height:100dvh; }
.topbar { position:sticky; top:0; z-index:10; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:.75rem clamp(1rem, 3vw, 2rem); background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:.7rem; min-width:0; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:14px; color:var(--accent-contrast); background:var(--accent); font-size:1.3rem; font-weight:800; }
.brand-copy { min-width:0; }
.brand-copy small { display:block; margin-top:.12rem; font-size:.76rem; }
.top-tabs { display:flex; gap:.35rem; justify-content:center; overflow:auto; }
.tab-button { display:flex; align-items:center; gap:.5rem; border-color:transparent; background:transparent; white-space:nowrap; }
.tab-button[aria-current="page"] { color:var(--accent); background:var(--accent-soft); }
.tab-icon { font-size:1.12rem; line-height:1; }
.connection { display:flex; align-items:center; gap:.45rem; justify-self:end; color:var(--muted); font-size:.82rem; white-space:nowrap; }
.status-dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--good); }
.connection[data-state="saving"] .status-dot { background:var(--warn); animation:pulse 1s infinite alternate; }
.connection[data-state="offline"] .status-dot,.connection[data-state="error"] .status-dot { background:var(--bad); }
#retry-sync { min-height:36px; padding:.35rem .6rem; font-size:.82rem; }
@keyframes pulse { to { opacity:.35; } }
main { width:min(100% - 2rem, 1420px); margin:0 auto; padding:1.35rem 0 3rem; }
.view { display:none; } .view.active { display:block; }
.view-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1rem, 3vw, 1.5rem); box-shadow:var(--shadow); }
.panel + .panel { margin-top:1rem; }
.row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.stack { display:grid; gap:.85rem; }
.grid-two { display:grid; grid-template-columns:1fr; gap:1rem; }
.field { display:grid; gap:.35rem; min-width:0; }
.field label { font-weight:650; font-size:.9rem; }
.field-help { font-size:.8rem; color:var(--muted); }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.toolbar > * { width:auto; }
.progress-track { width:100%; height:10px; overflow:hidden; background:var(--surface-2); border-radius:999px; }
.progress-fill { width:0; height:100%; background:var(--accent); border-radius:inherit; transition:width .2s ease; }
.progress-meta { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; font-size:.9rem; }
.stats-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin:.9rem 0; }
.stat { background:var(--surface-2); border-radius:13px; padding:.7rem .8rem; }
.stat strong { display:block; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.stat span { color:var(--muted); font-size:.78rem; }
.study-layout,.test-layout { width:min(100%, 720px); margin:0 auto; }
.study-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.8rem; margin-bottom:1rem; }
.study-controls .field { flex:1 1 180px; }
.study-audio-row { display:flex; justify-content:flex-end; margin:.7rem .1rem .4rem; }
.speak-button { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:.4rem; width:auto; min-width:44px; min-height:44px; padding:.45rem .65rem; }
.speak-button-icon { font-size:1.05rem; line-height:1; }
.speak-button-label { font-size:.86rem; }
.switchline { display:flex; align-items:center; gap:.55rem; min-height:44px; }
.switchline input { width:22px; height:22px; min-height:22px; accent-color:var(--accent); }
.flashcard { width:100%; min-height:clamp(300px, 48dvh, 480px); display:grid; place-items:center; padding:1.25rem; text-align:center; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,var(--surface),var(--surface-2)); box-shadow:var(--shadow); user-select:none; }
.flashcard:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.study-example { margin-top:.65rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.study-example summary { display:flex; align-items:center; min-height:44px; padding:.55rem .85rem; cursor:pointer; font-weight:650; }
.study-example-content { display:grid; gap:.3rem; padding:0 .85rem .8rem; }
.study-example-content p { margin:0; overflow-wrap:anywhere; }
.study-example-sentence { font-size:1.08rem; font-weight:650; }
.study-example-translation { color:var(--muted); }
.card-content { width:100%; display:grid; place-items:center; gap:.75rem; }
.card-label { color:var(--muted); font-size:.84rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.card-main { font-size:clamp(2.8rem, 11vw, 5.8rem); line-height:1.18; font-weight:750; overflow-wrap:anywhere; }
.card-meaning { font-size:clamp(1.25rem, 4vw, 2rem); max-width:38rem; overflow-wrap:anywhere; }
.card-pronunciation { font-size:clamp(1rem, 3vw, 1.35rem); color:var(--muted); overflow-wrap:anywhere; }
.study-actions { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem; }
.study-actions button { min-height:54px; }
.empty-state { display:grid; place-items:center; text-align:center; min-height:230px; padding:1.5rem; color:var(--muted); }
.empty-state strong { display:block; color:var(--text); font-size:1.25rem; margin-bottom:.35rem; }
.badge { display:inline-flex; align-items:center; gap:.3rem; border-radius:999px; padding:.25rem .55rem; font-size:.78rem; font-weight:700; white-space:nowrap; }
.badge.learned,.badge.correct { color:var(--good); background:var(--good-bg); }
.badge.wrong { color:var(--bad); background:var(--bad-bg); }
.badge.not-tested { color:var(--neutral); background:var(--neutral-bg); }
.badge.learning { color:var(--warn); background:var(--warn-bg); }
.test-setup-grid { display:grid; grid-template-columns:1fr; gap:.8rem; }
.history-list { display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
.history-list li { display:flex; justify-content:space-between; gap:.8rem; border-bottom:1px solid var(--line); padding:.45rem 0; }
.test-prompt { min-height:170px; display:grid; place-content:center; text-align:center; gap:.5rem; background:var(--surface-2); border-radius:16px; padding:1rem; }
.test-meaning { font-size:clamp(1.35rem, 5vw, 2rem); font-weight:700; overflow-wrap:anywhere; }
.test-answer { font-size:18px; min-height:54px; }
.test-feedback { min-height:3.2rem; padding:.65rem .8rem; border-radius:12px; }
.test-feedback:empty { padding:0; min-height:0; }
.test-feedback.ok { background:var(--good-bg); color:var(--good); }
.test-feedback.no { background:var(--bad-bg); color:var(--bad); }
.test-actions { display:flex; flex-wrap:wrap; gap:.65rem; justify-content:flex-end; margin-top:.8rem; }
.test-actions button { min-width:112px; }
.filters { margin-bottom:1rem; border:1px solid var(--line); border-radius:14px; padding:.75rem; background:var(--surface); }
.filters summary { cursor:pointer; font-weight:700; min-height:36px; }
.filter-grid { display:grid; grid-template-columns:1fr; gap:.7rem; padding-top:.7rem; }
.browse-summary { display:flex; justify-content:space-between; gap:.75rem; align-items:center; flex-wrap:wrap; margin:.7rem 0; }
.browse-cards { display:grid; gap:.7rem; }
.browse-tbcl-search { margin-top:1rem; }
.browse-tbcl-heading { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.browse-tbcl-heading h3 { margin:.1rem 0 .25rem; }
.browse-tbcl-heading p { margin:.2rem 0; }
.browse-tbcl-results { display:grid; gap:.55rem; margin-top:.7rem; }
.browse-tbcl-item { display:grid; gap:.35rem; min-width:0; padding:.75rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.browse-tbcl-item-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.browse-tbcl-item-word { font-size:1.35rem; overflow-wrap:anywhere; }
.browse-tbcl-item p { margin:0; overflow-wrap:anywhere; }
.browse-tbcl-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.browse-tbcl-actions button { min-height:40px; padding:.45rem .7rem; }
.browse-card { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:.8rem; display:grid; gap:.55rem; }
.browse-card-head { display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:.65rem; }
.browse-word-line,.recent-word-line { display:flex; align-items:center; gap:.4rem; min-width:0; }
.browse-word { border:0; background:transparent; padding:0; min-height:36px; text-align:left; font-size:1.45rem; line-height:1.25; font-weight:750; overflow-wrap:anywhere; }
.browse-meta { color:var(--muted); overflow-wrap:anywhere; }
.browse-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.browse-actions button { min-height:40px; padding:.45rem .7rem; }
.browse-table-wrap { display:none; width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; table-layout:fixed; }
th,td { text-align:left; vertical-align:top; padding:.65rem .5rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
th { color:var(--muted); font-size:.8rem; }
.pagination { display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:1rem; }
.pagination span { min-width:7rem; text-align:center; }
.bulk-toolbar { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.bulk-toolbar button { min-height:40px; padding:.4rem .65rem; }
.preview-box { margin-top:.85rem; border:1px solid var(--line); border-radius:14px; padding:.9rem; background:var(--surface-2); }
.preview-scroll { max-width:100%; overflow:auto; }
.preview-scroll table { min-width:580px; }
.line-errors { max-height:200px; overflow:auto; padding-left:1.35rem; color:var(--bad); }
.recent-item { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.5rem; border-bottom:1px solid var(--line); padding:.55rem 0; }
.recent-item strong { font-size:1.2rem; }
.recent-word-line strong { overflow-wrap:anywhere; }
.recent-actions { display:flex; gap:.35rem; }
.recent-actions button { min-height:38px; padding:.35rem .55rem; }
.notice { padding:.75rem .85rem; border-radius:12px; background:var(--accent-soft); color:var(--text); }
.notice.error { background:var(--bad-bg); color:var(--bad); }
.audio-status { width:min(100% - 2rem, 1420px); margin:.7rem auto 0; }
.sample-block { background:var(--surface-2); border-radius:10px; padding:.8rem; overflow:auto; font-family:ui-monospace,Consolas,monospace; font-size:.85rem; }
dialog { width:min(92vw, 560px); max-height:min(88dvh, 760px); overflow:auto; padding:0; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--surface); box-shadow:0 24px 80px rgb(0 0 0 / 28%); }
dialog::backdrop { background:rgb(5 15 10 / 55%); backdrop-filter:blur(2px); }
.dialog-inner { padding:1.25rem; }
.dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem; margin-top:1rem; }
.mobile-tabs { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width:600px) {
  main { width:min(100% - 3rem, 1420px); padding-top:1.8rem; }
  .stats-strip { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .test-setup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .browse-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .study-actions { max-width:600px; margin-left:auto; margin-right:auto; }
}
@media (min-width:1000px) {
  .browse-cards { display:none; }
  .browse-table-wrap { display:block; }
  .filter-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .test-setup-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stats-strip { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (min-width:760px) and (max-width:999px) {
  .topbar { grid-template-columns:auto 1fr; }
  .connection { grid-column:2; grid-row:1; }
  .top-tabs { grid-column:1 / -1; justify-content:flex-start; }
  .top-tabs .tab-button { padding:.45rem .65rem; }
}
@media (max-width:759px) {
  .topbar { grid-template-columns:1fr auto; gap:.45rem .8rem; padding:.6rem .8rem; }
  .top-tabs { display:none; }
  .connection { grid-column:2; grid-row:1; }
  main { width:min(100% - 1.1rem, 760px); padding-top:.9rem; padding-bottom:calc(6rem + env(safe-area-inset-bottom)); }
  .mobile-tabs { position:fixed; inset:auto 0 0; z-index:20; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.1rem; padding:.45rem .25rem calc(.45rem + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--surface) 95%,transparent); border-top:1px solid var(--line); backdrop-filter:blur(14px); }
  .mobile-tabs .tab-button { display:grid; justify-items:center; align-content:center; gap:.15rem; min-height:54px; padding:.3rem .15rem; border-radius:10px; font-size:.68rem; line-height:1.1; }
  .mobile-tabs .tab-icon { font-size:1.25rem; }
  .browse-cards { grid-template-columns:1fr; }
  .test-actions { position:sticky; bottom:calc(4.9rem + env(safe-area-inset-bottom)); z-index:4; padding:.55rem 0; background:linear-gradient(transparent,var(--bg) 30%); }
  .test-answer { font-size:18px; }
  .study-actions { position:sticky; bottom:calc(5rem + env(safe-area-inset-bottom)); z-index:4; padding:.45rem 0; background:linear-gradient(transparent,var(--bg) 30%); }
  .flashcard { min-height:min(48dvh, 390px); }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.browse-mode-switch { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.mode-tab[aria-selected="true"] { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.browse-mode-switch.nested { margin-bottom:0; }
.radical-explorer { display:grid; gap:1rem; }
.radical-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:.45rem; max-height:440px; overflow:auto; margin-top:.75rem; padding:2px; }
.radical-tile { display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto; place-items:center; min-height:78px; padding:.4rem .25rem; gap:.05rem .2rem; }
.radical-tile[aria-pressed="true"] { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.radical-tile-glyph { font-size:1.5rem; line-height:1.2; }
.radical-tile-number { color:var(--muted); font-size:.68rem; font-variant-numeric:tabular-nums; }
.radical-tile-count { grid-column:1/-1; color:var(--muted); font-size:.68rem; font-variant-numeric:tabular-nums; }
.radical-results { margin-top:1rem; }
.radical-results-heading { margin-bottom:.75rem; }
.radical-results-heading p { margin-bottom:.35rem; }
.radical-character-list { display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 1rem; }
.radical-character-chip { min-width:44px; min-height:44px; padding:.35rem .55rem; font-size:1.1rem; }
.radical-word-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:.65rem; margin-top:.8rem; }
.radical-word-card { min-width:0; display:grid; align-content:start; gap:.3rem; padding:.75rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.radical-word-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.radical-word-glyph { min-width:0; font-size:1.4rem; overflow-wrap:anywhere; }
.radical-matched-chars { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; color:var(--muted); font-size:.78rem; }
.radical-matched-chars .radical-character-chip { min-width:36px; min-height:36px; padding:.2rem .4rem; }
@media (min-width:600px) { .radical-grid { grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); } }

/* Learning platform */
.learning-grid { display:grid; gap:1rem; min-width:0; }
.review-setup-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:.7rem; }
.review-status { min-height:1.5em; margin:.75rem 0; color:var(--muted); }
.error-text { color:var(--bad) !important; }
.review-session { display:grid; gap:.75rem; min-width:0; margin-top:.8rem; }
.review-session-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.review-prompt-card { min-width:0; padding:clamp(1rem,3vw,1.6rem); border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.review-prompt { margin:0; font-size:clamp(1.25rem,3.5vw,2rem); font-weight:650; line-height:1.45; overflow-wrap:anywhere; text-wrap:pretty; }
.review-answer-area { display:grid; gap:.5rem; }
.review-answer-area input { min-height:52px; font-size:1.2rem; }
.review-inline-actions,.review-rating-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.review-feedback { margin:.2rem 0; font-weight:650; }
.review-context { padding:.75rem 1rem; border-left:3px solid var(--accent); border-radius:0 10px 10px 0; background:var(--surface-2); overflow-wrap:anywhere; }
.review-context p { margin:.2rem 0; }
.review-hint-status { color:var(--muted); font-size:.82rem; }
.review-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.review-stat-card { min-width:0; padding:.85rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.review-stat-card h4 { margin:0 0 .35rem; font-size:.95rem; }
.metric-number { margin:0; font-size:1.45rem; font-weight:750; font-variant-numeric:tabular-nums; }
.metric-number span { font-size:.84rem; font-weight:550; }
.review-stat-card .muted { margin:.35rem 0 0; font-size:.82rem; overflow-wrap:anywhere; }
.review-weak-heading { margin:.6rem 0 .2rem; font-size:.84rem; font-weight:700; }
.review-weak-list { margin:.2rem 0 0; padding-left:1.2rem; font-size:.82rem; overflow-wrap:anywhere; }
.lesson-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.lesson-form-grid .field { min-width:0; }
.lesson-form-grid .field-wide { grid-column:1/-1; }
#lesson-word-ids { height:13rem; min-height:13rem; padding:.35rem; }
#lesson-word-ids option { padding:.25rem; }
.lesson-selected-count { font-variant-numeric:tabular-nums; }
.lesson-list { display:grid; gap:.75rem; margin-top:1rem; }
.lesson-card { min-width:0; padding:1rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.lesson-card-heading { display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between; gap:.3rem .8rem; }
.lesson-card-heading h4 { margin:0; font-size:1.08rem; overflow-wrap:anywhere; }
.lesson-level { color:var(--muted); font-size:.82rem; }
.lesson-card > p { margin:.45rem 0; overflow-wrap:anywhere; }
.lesson-grammar-note { padding:.65rem .8rem; border-radius:10px; background:var(--accent-soft); white-space:pre-wrap; }
.lesson-word-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin:.4rem 0 .8rem; }
.lesson-word-chip { max-width:100%; padding:.25rem .55rem; border:1px solid var(--line); border-radius:999px; font-size:.82rem; overflow-wrap:anywhere; }
.lesson-actions { margin-top:.65rem; }
.lesson-runner { display:grid; gap:.8rem; margin-top:1rem; scroll-margin-top:1rem; }
.lesson-runner-header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; align-items:center; }
.lesson-runner-note { padding:.75rem; border-radius:10px; background:var(--accent-soft); white-space:pre-wrap; }
.lesson-runner-prompt { font-size:clamp(1.1rem,3vw,1.6rem); font-weight:650; overflow-wrap:anywhere; }
@media (max-width:759px) {
  .review-setup-grid { grid-template-columns:1fr; }
  .review-stat-grid { grid-template-columns:1fr; }
  .lesson-form-grid { grid-template-columns:1fr; }
  .lesson-form-grid .field-wide { grid-column:auto; }
  .mobile-tabs .tab-button { font-size:.64rem; }
}

.tbcl-catalog:not([hidden]) { display:grid; gap:1rem; min-width:0; }
.tbcl-filter-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(11rem,1fr); gap:.8rem; }
.tbcl-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.7rem; margin-top:.65rem; }
.tbcl-toolbar .field-help { margin:0; }
.tbcl-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr)); gap:.8rem; min-width:0; }
.tbcl-entry { min-width:0; padding:1rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.tbcl-entry-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; }
.tbcl-entry-word { margin:0; font-size:clamp(1.5rem,4vw,2rem); line-height:1.2; overflow-wrap:anywhere; }
.tbcl-entry-pronunciation { margin:.25rem 0 0; color:var(--muted); overflow-wrap:anywhere; }
.tbcl-entry-badges { display:flex; flex-wrap:wrap; gap:.35rem; margin:.65rem 0; }
.tbcl-badge { display:inline-flex; align-items:center; padding:.2rem .5rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.76rem; }
.tbcl-entry-pos { margin:.45rem 0; color:var(--muted); }
.tbcl-entry-definitions { margin:.55rem 0; padding-left:1.1rem; }
.tbcl-entry-definitions li { margin:.2rem 0; overflow-wrap:anywhere; }
.tbcl-entry-variants { margin:.45rem 0; overflow-wrap:anywhere; }
.tbcl-entry-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.tbcl-entry-actions button { min-height:40px; }
.tbcl-entry-empty { grid-column:1/-1; }
.tbcl-attribution { margin:0; }
.tbcl-attribution a { overflow-wrap:anywhere; }
@media (max-width:759px) {
  .tbcl-filter-grid { grid-template-columns:1fr; }
  .tbcl-toolbar { align-items:stretch; }
  .tbcl-toolbar button { width:100%; }
}

.login-page { display:grid; place-items:center; min-height:100dvh; padding:1rem; }
.login-shell { width:min(100%, 440px); }
.login-card { display:grid; gap:1rem; }
.login-card form { display:grid; gap:1rem; }
.login-card .field { display:grid; gap:.35rem; }
.login-card input[type="password"] { width:100%; min-height:48px; padding:.65rem .8rem; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.login-card button { width:100%; }
.login-error { margin:0; padding:.7rem .8rem; border-radius:10px; color:var(--bad); background:var(--bad-bg); }
.logout-form { margin:0; }
.logout-form button { min-height:36px; padding:.35rem .6rem; font-size:.82rem; }