:root {
  color-scheme: light;
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #F1F0EB;
  --surface-3: #EFEEE9;
  --text: #242422;
  --muted: #6F706C;
  --pale: #969791;
  --line: #E4E2DC;
  --line-strong: #CCC9C1;
  --accent: #526D82;
  --accent-strong: #3E5669;
  --accent-soft: #E8EDF0;
  --danger: #A94747;
  --danger-soft: #FAEEEE;
  --success: #4F725F;
  --success-soft: #EEF5F1;
  --warning: #87652E;
  --warning-soft: #F8F2E7;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: none;
  --shadow-md: 0 18px 60px rgba(45, 48, 44, .08);
  --sidebar: 232px;
  --content: 1180px;
  --reading: 720px;
  --ui-font: Inter, "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reading-font: "Noto Serif TC", "Noto Serif JP", "Songti TC", Georgia, serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Production homepage: editorial learning overview */
.editorial-home{max-width:1180px;margin:0 auto;color:#13263a}.editorial-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr);gap:48px;align-items:center;padding:44px 0 54px}.editorial-copy h1{margin:12px 0 18px;font-family:var(--reading-font);font-size:clamp(48px,5.2vw,76px);font-weight:500;line-height:1.15;letter-spacing:-.05em;color:#14263a}.editorial-copy>p{max-width:510px;margin:0;color:#334252;font-size:17px;line-height:1.8}.editorial-actions{display:flex;gap:12px;margin-top:26px}.editorial-actions button,.diagnostic-buttons button{display:inline-flex;justify-content:center;gap:14px;min-width:178px}.editorial-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}.editorial-benefits article{display:grid;gap:6px}.editorial-benefits strong{font-size:14px}.editorial-benefits small{color:#536171;font-size:12px;line-height:1.55}.editorial-mosaic{overflow:hidden;border:1px solid #ddd8ce;border-radius:8px;background:#f6f3ed;box-shadow:0 20px 42px rgba(41,42,39,.08)}.editorial-mosaic img{display:block;width:100%;height:100%;object-fit:cover}.editorial-programs{display:grid;grid-template-columns:1fr 1fr;gap:20px}.program-card{min-height:250px;padding:25px;border:1px solid #dfe3e8;border-radius:9px;background:rgba(255,255,255,.7);text-align:center}.program-card h2{margin:0;font-family:var(--reading-font);font-size:26px;line-height:1.2}.program-card p{margin:9px 0 0;color:#4c5a69;font-size:13px;line-height:1.55}.program-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:26px 0 22px}.program-stats span{display:grid;gap:4px;color:#5b6570;font-size:11px;line-height:1.4}.program-stats b{color:#192c3d;font-size:15px}.program-jlpt .secondary-button{border-color:#8dad92;color:#2f6d3d}.editorial-diagnostic{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-top:24px;padding:21px 25px;border:1px solid #e3ded3;border-radius:8px;background:linear-gradient(100deg,#f7f2e9,#fbfaf8)}.editorial-diagnostic h2{margin:0;font-family:var(--reading-font);font-size:23px;line-height:1.2}.editorial-diagnostic p{margin:6px 0 0;color:#59616d;font-size:13px;line-height:1.55}.diagnostic-buttons{display:flex;gap:14px}.editorial-journal{padding:39px 0 6px}.editorial-journal header{display:flex;justify-content:space-between;align-items:end;margin-bottom:19px}.editorial-journal h2{margin:3px 0 0;font-family:var(--reading-font);font-size:29px;line-height:1.18}.journal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.journal-grid>button{min-height:175px;padding:18px;border:1px solid #e4e1d9;border-radius:8px;background:#fff;text-align:left}.journal-grid small{display:inline-block;padding:2px 6px;border-radius:3px;background:#f1ece3;color:#6a6257;font-size:10px}.journal-grid h3{margin:11px 0 7px;font-family:var(--reading-font);font-size:17px;line-height:1.34}.journal-grid p{margin:0;color:#59616d;font-size:12px;line-height:1.55}.journal-grid span{display:block;margin-top:12px;color:#0f4c7f;font-size:12px}.journal-empty{grid-column:1/-1;color:#59616d}@media(max-width:980px){.editorial-hero{grid-template-columns:1fr;gap:30px}.editorial-mosaic{max-width:680px;width:100%;justify-self:center}.editorial-diagnostic{display:grid;grid-template-columns:1fr}.diagnostic-buttons{justify-content:flex-start}}@media(max-width:700px){.editorial-hero{padding-top:18px}.editorial-copy h1{font-size:clamp(42px,12vw,59px)}.editorial-programs{grid-template-columns:1fr}.editorial-diagnostic{padding:20px}.diagnostic-buttons{display:grid;grid-template-columns:1fr}.diagnostic-buttons button{width:100%}.journal-grid{grid-template-columns:1fr 1fr}.journal-grid>button:nth-child(n+3){display:none}}@media(max-width:420px){.editorial-actions{display:grid;grid-template-columns:1fr}.editorial-actions button{width:100%}.editorial-benefits{grid-template-columns:1fr 1fr}.editorial-benefits article:last-child{grid-column:1/-1}.program-card{padding:19px}.program-stats{grid-template-columns:repeat(3,1fr)}}

/* Batch 2 shared learning loop */
.learning-goal,.diagnostic-flow,.diagnostic-result,.daily-task,.daily-activity,.learning-dashboard,.weekly-report,.review-queue{width:min(100%,980px);margin:0 auto;padding:clamp(20px,4vw,48px);min-width:0}
.learning-goal>div,.dashboard-metrics,.daily-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.learning-goal button,.daily-list article,.dashboard-metrics article,.learning-dashboard>section,.weekly-report>section,.review-queue article{min-width:0;border:1px solid var(--line);background:var(--surface);padding:18px;border-radius:var(--radius)}
.learning-goal button{display:grid;text-align:left;gap:6px;color:var(--text)}
.learning-goal button span,.daily-list article p,.dashboard-metrics span{color:var(--muted)}
.diagnostic-flow header,.daily-task header,.learning-dashboard header,.weekly-report header,.review-queue header{margin-bottom:24px}
.diagnostic-item,.daily-activity{display:grid;gap:18px;min-width:0}
.diagnostic-item article,.daily-activity article{white-space:pre-wrap;overflow-wrap:anywhere;padding:18px;border-left:3px solid var(--accent);background:var(--surface-2)}
.learning-options{display:grid;gap:10px}
.learning-options label{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.learning-options label span{overflow-wrap:anywhere}
.diagnostic-item textarea,.daily-activity textarea,.review-queue textarea{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text)}
.diagnostic-result li{display:grid;gap:3px;margin:.7em 0}.diagnostic-result li span{color:var(--muted)}
.dashboard-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0}.dashboard-metrics article{display:grid;gap:4px}.dashboard-metrics strong{font-size:clamp(1.5rem,4vw,2.4rem)}
.daily-list{grid-template-columns:repeat(2,minmax(0,1fr))}.daily-list article.completed{opacity:.65}.daily-list article span{font-size:.8rem;color:var(--muted)}
.learning-dashboard>section,.weekly-report>section{margin:14px 0}.learning-dashboard nav,.product-learning-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.review-queue>div{display:grid;gap:14px}.review-queue pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.review-queue article button{margin:8px 8px 0 0}
.protected-audio,.writing-workflow,.assessment-questions{display:grid;gap:.75rem;margin:1rem 0;min-width:0}.protected-audio audio{width:100%}.assessment-questions fieldset{min-width:0;border:1px solid var(--line);border-radius:var(--radius);padding:1rem}.writing-workflow textarea{width:100%;box-sizing:border-box}.writing-workflow label{display:grid;gap:.35rem;font-weight:700}
@media(max-width:768px){.learning-goal>div,.dashboard-metrics,.daily-list{grid-template-columns:1fr 1fr}.learning-goal,.diagnostic-flow,.diagnostic-result,.daily-task,.daily-activity,.learning-dashboard,.weekly-report,.review-queue{padding:20px 14px}.product-learning-actions>*{flex:1 1 180px}}
@media(max-width:480px){.learning-goal>div,.dashboard-metrics,.daily-list{grid-template-columns:1fr}.learning-dashboard nav>*{width:100%}}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 18.08px;
  line-height: 1.728;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums tabular-nums;
}
body[data-page-route="reading"] { --content: 1500px; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; opacity: .45; }
::selection { background: color-mix(in srgb, var(--accent) 22%, white); }

.skip-link { position: fixed; left: 16px; top: -90px; z-index: 200; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.skip-link:focus { top: 16px; }
.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; }
.ui-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* App frame */
.app-shell { min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--sidebar); padding: 28px 20px 22px;
  display: flex; flex-direction: column;
  background: #FBFAF7; border-right: 1px solid var(--line);
}
.app-main { min-width: 0; grid-column: 2; display: flex; min-height: 100dvh; flex-direction: column; }
.sidebar-spacer { flex: 1; }
.sidebar-note { margin: 18px 8px 0; color: var(--pale); font-size: 13.56px; line-height: 1.674; }
.brand { display: inline-flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 0; text-align: left; }
.brand-mark { width: 38px; height: 38px; color: var(--accent); flex: 0 0 auto; }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.brand-word strong { display: block; font-size: 19.21px; line-height: 1.242; letter-spacing: -.035em; font-weight: 650; }
.brand-word small { display: block; margin-top: 4px; color: var(--pale); font-size: 11.3px; letter-spacing: .04em; }
.desktop-nav, .sidebar-secondary { display: grid; gap: 4px; margin-top: 40px; }
.sidebar-secondary { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.desktop-nav button, .sidebar-secondary button {
  min-height: 44px; display: flex; align-items: center; gap: 12px;
  padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); text-align: left;
  transition: color 170ms var(--ease), background 170ms var(--ease);
}
.desktop-nav button:hover, .sidebar-secondary button:hover { background: var(--surface-3); color: var(--text); }
.desktop-nav button.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 650; }
.desktop-nav svg, .sidebar-secondary svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.topbar {
  position: sticky; top: 0; z-index: 30; min-height: 66px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 30px; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.mobile-brand { display: none; }
.topbar-context { display: flex; align-items: center; gap: 8px; color: var(--pale); font-size: 13.56px; letter-spacing: .02em; }
.quiet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .62; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.language-switch select, .account-button {
  min-height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text);
}
.language-switch select { padding: 0 32px 0 12px; }
.account-button { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; }
.account-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; }

.main-content { width: min(100%, var(--content)); margin: 0 auto; padding: 42px 44px 72px; flex: 1; }
.bottom-nav { display: none; }

/* Typography */
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; }
.page-title { max-width: 780px; margin: 0 0 36px; }
.page-title h1, .home-primary h1, .reader-title, .article-body h1, .article-body h2, .section-title {
  font-family: var(--reading-font);
  font-weight: 500;
  letter-spacing: -.025em;
}
.page-title h1 { font-size: clamp(38.42px, 4.52vw, 58.76px); line-height: 1.188; }
.page-title p { max-width: 680px; margin: 12px 0 0; color: var(--muted); line-height: 1.944; }
.eyebrow, .section-kicker { color: var(--accent); font-size: 12.43px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }
.pale { color: var(--pale); }
.center { text-align: center; }
.small { font-size: 15.82px; }
.top-gap { margin-top: 18px; }
.spaced { margin-top: 22px; }
.full { width: 100%; }
.divider { height: 1px; background: var(--line); margin: 26px 0; }

/* Buttons */
.primary-button, .secondary-button, .ghost-button, .text-button, .danger-button, .icon-button, .back-button {
  min-height: 44px; border-radius: var(--radius-sm); font-weight: 600; transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: white; padding: 0 18px; }
.primary-button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.secondary-button { border: 1px solid var(--line-strong); background: transparent; color: var(--text); padding: 0 16px; }
.secondary-button:hover { background: var(--surface-3); }
.ghost-button, .text-button, .back-button { border: 0; background: transparent; color: var(--accent-strong); padding: 0 4px; }
.text-button { display: inline-flex; align-items: center; gap: 7px; }
.back-button { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.danger-button { border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--line)); background: var(--danger-soft); color: var(--danger); padding: 0 16px; }
.icon-button { width: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: transparent; }
.primary-button:active, .secondary-button:active, .icon-button:active { transform: translateY(1px); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.icon-text-button { display: inline-flex; align-items: center; gap: 8px; }

/* General sections */
.section { margin-top: 56px; }
.section-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-header h2, .section h2 { margin-top: 5px; font-family: var(--reading-font); font-size: clamp(29.38px, 3.39vw, 38.42px); font-weight: 500; letter-spacing: -.02em; }
.section-header p { margin: 7px 0 0; color: var(--muted); }
.lesson-shell { max-width: 880px; margin: 0 auto; }
.reading-column { max-width: 760px; margin: 0 auto; }
.content-panel { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.notice, .feedback { padding: 16px 18px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 58%, white); color: var(--muted); }
.notice strong, .feedback strong { color: var(--text); }
.badge, .language-pill, .source-note { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13.56px; }
.lesson-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 30px; }

/* Home */
.home-shell { max-width: 1120px; margin: 0 auto; }
.home-primary { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 42px; align-items: stretch; }
.continue-reading {
  min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 42px; border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: linear-gradient(145deg, #FFFFFF 0%, #F2F0EA 100%); border: 1px solid var(--line);
}
.continue-reading::after { content: ""; position: absolute; width: 300px; height: 300px; right: -90px; top: -120px; border: 38px solid color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 50%; }
.continue-reading > * { position: relative; z-index: 1; }
.continue-reading h1 { margin: 12px 0 14px; max-width: 700px; font-size: clamp(42.94px, 5.65vw, 70.06px); line-height: 1.145; }
.continue-reading p { max-width: 610px; margin: 0; color: var(--muted); font-size: 19.21px; line-height: 1.944; }
.continue-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; color: var(--pale); font-size: 14.69px; }
.continue-actions { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.home-today { padding: 30px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-today h2 { margin: 9px 0 8px; font-family: var(--reading-font); font-weight: 500; font-size: 33.9px; }
.home-today p { margin: 0; color: var(--muted); }
.today-count { margin: 34px 0 20px; font-family: var(--reading-font); font-size: 81.36px; line-height: 0.972; color: var(--accent-strong); }
.today-count small { font-family: var(--ui-font); font-size: 15.82px; color: var(--pale); }
.progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.progress-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width 240ms var(--ease); }
.home-list { border-top: 1px solid var(--line); }
.home-list-item { width: 100%; display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.home-list-item:hover { background: color-mix(in srgb, var(--surface-3) 72%, transparent); }
.home-list-media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--surface-3); overflow: hidden; }
.home-list-media img { width: 100%; height: 100%; object-fit: cover; }
.home-list-copy strong { display: block; font-family: var(--reading-font); font-size: 22.6px; font-weight: 500; }
.home-list-copy small { display: block; margin-top: 5px; color: var(--muted); }
.home-list-action { color: var(--accent); }
.home-progress-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-progress-row div { padding: 20px 16px; border-right: 1px solid var(--line); }
.home-progress-row div:last-child { border-right: 0; }
.home-progress-row span { display: block; color: var(--pale); font-size: 13.56px; }
.home-progress-row strong { display: block; margin-top: 6px; font-family: var(--reading-font); font-weight: 500; font-size: 29.38px; }

/* Editorial module lists */
.module-list, .path-list, .settings-list { border-top: 1px solid var(--line); }
.module-card, .path-item, .settings-list > button {
  width: 100%; min-height: 92px; display: flex; align-items: center; gap: 18px;
  padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left;
}
.module-card:hover, .path-item:hover, .settings-list > button:hover { background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.module-mark { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); }
.module-icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.module-copy { min-width: 0; flex: 1; }
.module-copy strong, .path-item strong, .settings-list strong { display: block; font-size: 20.34px; font-weight: 620; }
.module-copy small, .path-item em, .settings-list small { display: block; margin-top: 4px; color: var(--muted); font-style: normal; }
.module-arrow, .mode-arrow, .path-action { color: var(--accent); margin-left: auto; }
.home-module-grid, .learning-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 42px; border-top: 0; }
.home-module-grid .module-card, .learning-module-grid .module-card { border-top: 1px solid var(--line); }
.stat-line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-line span { color: var(--muted); }
.stat-line strong { font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }

/* Reader */
.reader-page { max-width: 1320px; margin: 0 auto; }
.reading-progress-rail { position: fixed; z-index: 60; top: 0; left: var(--sidebar); right: 0; height: 2px; background: transparent; pointer-events: none; }
.reading-progress-rail > span { display: block; width: 0; height: 100%; background: var(--accent); transition: width 100ms linear; }
.reader-layout { display: grid; grid-template-columns: minmax(0, var(--reading)) 0; justify-content: center; gap: 0; transition: grid-template-columns 220ms var(--ease), gap 220ms var(--ease); }
.reader-layout.panel-open { grid-template-columns: minmax(0, var(--reading)) 320px; gap: 56px; }
.reader-document { min-width: 0; }
.reader-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 42px; }
.reader-top-actions { display: flex; gap: 6px; }
.reader-top-actions button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-sm); }
.reader-top-actions button:hover { background: var(--surface-3); color: var(--text); }
.reader-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--pale); font-size: 14.69px; }
.reader-title { max-width: 720px; margin: 18px 0 20px; font-size: clamp(40.68px, 5.65vw, 56.5px); line-height: 1.231; }
.reader-deck { max-width: 670px; margin: 0 0 38px; color: var(--muted); font-size: 20.34px; line-height: 1.89; }
.reader-copy {
  color: #2B2B28; font-family: var(--reading-font); font-size: 21.47px; line-height: 2.03; letter-spacing: .005em;
}
.reader-copy p { margin: 0 0 22px; }
.reader-copy button.reader-word { display: inline; border: 0; padding: 0 1px; margin: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: inherit; }
.reader-copy button.reader-word:hover, .reader-copy button.reader-word:focus-visible { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.reader-copy button.reader-word.learned { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 48%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.reader-tools-inline { display: flex; align-items: center; gap: 10px; margin: 26px 0 34px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reader-tools-inline button { min-height: 38px; }
.reader-question { margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--line); }
.reader-question h2 { margin: 9px 0 18px; font-family: var(--reading-font); font-weight: 500; font-size: 30.51px; }
.reader-study-panel { position: sticky; top: 94px; align-self: start; height: max-content; opacity: 0; transform: translateX(14px); pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.reader-layout.panel-open .reader-study-panel { opacity: 1; transform: none; pointer-events: auto; }
.reader-panel-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.reader-panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.reader-panel-head button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--muted); }
.reader-panel-word { margin: 20px 0 4px; font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }
.reader-panel-reading { color: var(--pale); font-size: 14.69px; }
.reader-panel-meaning { margin: 20px 0 0; font-size: 19.21px; }
.reader-panel-definition { margin: 12px 0 0; color: var(--muted); font-size: 15.82px; line-height: 1.836; }
.reader-panel-example { margin: 18px 0 0; padding: 15px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--reading-font); line-height: 1.858; }
.reader-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.reader-panel-actions button { min-height: 42px; }
.reader-panel-empty { color: var(--muted); font-size: 15.82px; line-height: 1.836; }
.article-end-nav { margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-top: 1px solid var(--line); }
.article-end-nav button { min-height: 48px; padding: 12px 20px; border-radius: var(--radius-sm); text-align: center; font-weight: 700; line-height: 1.3; }
.article-end-nav .secondary-button { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.article-end-nav .primary-button { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.article-end-nav .primary-button:hover { border-color: var(--accent-strong); background: var(--accent-strong); }

/* Questions and practice */
.answer-grid { display: grid; gap: 10px; margin-top: 18px; }
.answer-button { min-height: 54px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: left; }
.answer-button:hover { border-color: var(--line-strong); background: var(--surface-3); }
.answer-button.correct { border-color: var(--success); background: var(--success-soft); }
.answer-button.wrong { border-color: var(--danger); background: var(--danger-soft); }
.question-panel { margin-top: 30px; }
.question-panel h2 { margin-top: 7px; font-family: var(--reading-font); font-weight: 500; }

/* Vocabulary */
.vocab-proof { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 26px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vocab-proof strong { display: block; margin-top: 4px; font-family: var(--reading-font); font-size: 42.94px; font-weight: 500; }
.vocab-proof p { margin: 4px 0 0; color: var(--muted); }
.path-item { min-height: 106px; }
.path-item > span:first-child { min-width: 0; flex: 1; }
.path-item small { display: block; color: var(--accent); font-size: 12.43px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.path-item.selected { background: color-mix(in srgb, var(--accent-soft) 52%, transparent); }
.search-box { display: grid; gap: 8px; }
.search-box label { color: var(--muted); font-size: 14.69px; }
.search-box input, .form-group input, .form-group select, .form-group textarea, .admin-filterbar input, .admin-filterbar select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 11px 12px;
}
.search-results { margin-top: 12px; border-top: 1px solid var(--line); }
.search-results > button { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.7fr); gap: 18px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.search-results strong { font-size: 19.21px; }
.search-results small, .search-results em { display: block; color: var(--muted); font-style: normal; }
.study-card { padding: 46px 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; background: transparent; }
.study-card.compact { padding-block: 30px; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--pale); font-size: 13.56px; }
.study-word { margin: 44px 0 10px; font-family: var(--reading-font); font-size: clamp(56.5px, 9.04vw, 83.62px); line-height: 1.08; }
.kana-word { font-size: 99.44px; }
.phonetic { color: var(--muted); }
.audio-button { margin: 26px auto 0; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--accent); }
.answer-reveal { max-width: 620px; margin: 34px auto 0; text-align: left; }
.meaning { font-size: 23.73px; }
.definition { color: var(--muted); }
.definition span { margin-right: 8px; color: var(--pale); font-size: 12.43px; }
.answer-reveal blockquote { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); font-family: var(--reading-font); font-size: 20.34px; line-height: 1.836; }
.answer-reveal blockquote small { display: block; margin-top: 8px; color: var(--muted); font-family: var(--ui-font); font-size: 14.69px; }
.rating-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 18px; }
.rating-row button { min-height: 66px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; }
.rating-row strong, .rating-row small { display: block; }
.rating-row small { color: var(--muted); font-size: 12.43px; }

/* Review & progress */
.review-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.review-number { font-family: var(--reading-font); font-size: 103.96px; line-height: 0.864; color: var(--accent-strong); }
.review-number small { display: block; margin-top: 12px; color: var(--pale); font-family: var(--ui-font); font-size: 14.69px; }
.review-actions { display: grid; gap: 10px; margin-top: 28px; }
.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-grid > div { padding: 20px; border-right: 1px solid var(--line); }
.summary-grid > div:last-child { border-right: 0; }
.summary-grid span { display: block; color: var(--pale); font-size: 13.56px; }
.summary-grid strong { display: block; margin-top: 6px; font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }
.progress-page-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; }
.progress-chart { min-height: 260px; display: flex; align-items: end; gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.progress-chart span { flex: 1; min-height: 8px; background: var(--accent-soft); border-top: 2px solid var(--accent); }
.progress-chart small { display: block; margin-top: 8px; color: var(--pale); font-size: 11.3px; }
.progress-stat-list { border-top: 1px solid var(--line); }
.progress-stat-list div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.progress-stat-list span { color: var(--muted); }

/* Complete / empty / loading */
.result-panel { max-width: 650px; margin: 50px auto 0; text-align: center; }
.result-level { margin: 20px 0 12px; font-family: var(--reading-font); font-size: 85.88px; line-height: 1.08; color: var(--accent-strong); }
.result-level small { font-size: 22.6px; color: var(--pale); }
.result-panel p { color: var(--muted); line-height: 1.944; }
.completion-summary { display: grid; grid-template-columns: repeat(3,1fr); margin: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.completion-summary div { padding: 18px; border-right: 1px solid var(--line); }
.completion-summary div:last-child { border-right: 0; }
.completion-summary span { display: block; color: var(--pale); font-size: 13.56px; }
.completion-summary strong { display: block; margin-top: 5px; font-size: 27.12px; font-weight: 550; }
.empty-state { padding: 52px 20px; text-align: center; color: var(--muted); }
.empty-state h2 { margin: 18px 0 8px; color: var(--text); font-family: var(--reading-font); font-weight: 500; }
.empty-mark { width: 48px; height: 48px; margin: 0 auto; display: grid; place-items: center; color: var(--accent); }
.empty-inline { padding: 18px 0; color: var(--muted); }
.skeleton-card, .admin-loading { padding: 24px 0; }
.skeleton-line { height: 12px; margin: 12px 0; border-radius: 3px; background: linear-gradient(90deg, var(--surface-3), white, var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }
.skeleton-line.wide { width: 78%; }
.skeleton-line.short { width: 42%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Method explanation */
.method-why { margin: 38px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-why h2 { margin: 7px 0 10px; font-family: var(--reading-font); font-weight: 500; }
.method-why p { margin: 0; color: var(--muted); line-height: 1.922; }
.method-why small { display: block; margin-top: 12px; color: var(--pale); }
.difficulty-switch { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.difficulty-switch-copy strong, .difficulty-switch-copy small { display: block; }
.difficulty-switch-copy small { color: var(--muted); }
.difficulty-options { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.difficulty-options button { min-height: 34px; border: 0; border-radius: 4px; background: transparent; padding: 0 10px; color: var(--muted); }
.difficulty-options button.active { background: var(--accent-soft); color: var(--accent-strong); }
.auth-grid { grid-template-columns:minmax(0,620px); justify-content:center; }
.auth-panel-single { min-height:0; }
.auth-links { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; color:var(--muted); font-size:14px; }
.grammar-hub,.grammar-lesson { max-width: 1080px; margin: 0 auto; }
.grammar-hub-intro { display:flex; justify-content:space-between; align-items:end; gap:28px; padding:8px 0 30px; border-bottom:1px solid var(--line); }
.grammar-hub-intro h2 { margin:8px 0; font-family:var(--reading-font); font-weight:500; }
.grammar-hub-intro p { max-width:680px; margin:0; color:var(--muted); }
.grammar-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px; }
.grammar-topic-grid button { display:grid; grid-template-columns:1fr auto; gap:7px 18px; min-height:150px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); text-align:left; }
.grammar-topic-grid button:hover { border-color:var(--accent); background:var(--accent-soft); }
.grammar-topic-grid small { color:var(--accent-strong); font-weight:650; }
.grammar-topic-grid strong { grid-column:1; font-family:var(--reading-font); font-size:22px; font-weight:500; }
.grammar-topic-grid span { grid-column:1; color:var(--muted); font-size:14px; line-height:1.65; }
.grammar-topic-grid svg { grid-column:2; grid-row:1 / span 3; align-self:center; color:var(--accent); width:20px; }
.grammar-rule-card { margin:22px 0; padding:34px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.grammar-rule-card h2 { max-width:820px; margin:10px 0 28px; font-family:var(--reading-font); font-weight:500; line-height:1.5; }
.grammar-pattern,.grammar-example { padding-top:18px; border-top:1px solid var(--line); }
.grammar-pattern span,.grammar-example span { display:block; color:var(--pale); font-size:13px; margin-bottom:6px; }
.grammar-pattern strong { color:var(--accent-strong); font-size:20px; }
.grammar-example { margin-top:18px; }.grammar-example p { margin:0; font-size:20px; }
@media (max-width:640px) { .grammar-hub-intro { align-items:stretch; flex-direction:column; }.grammar-topic-grid { grid-template-columns:1fr; }.grammar-rule-card { padding:24px 18px; } }
.difficulty-options-jlpt { gap: 4px; }
.difficulty-options-jlpt button { min-width: 48px; font-weight: 650; }

/* Shadowing / Army */
.shadow-mode-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.shadow-mode-card { min-height: 190px; display: flex; align-items: flex-end; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }
.shadow-mode-card:hover { border-color: var(--line-strong); }
.shadow-mode-card strong, .shadow-mode-card small, .shadow-mode-card em { display: block; }
.shadow-mode-card strong { margin-top: 5px; font-family: var(--reading-font); font-size: 27.12px; font-weight: 500; }
.shadow-mode-card small { color: var(--accent); }
.shadow-mode-card em { margin-top: 6px; color: var(--muted); font-style: normal; }
.shadow-mode-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent); }
.method-strip { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-strip > div { padding: 18px; border-right: 1px solid var(--line); }
.method-strip > div:last-child { border-right: 0; }
.method-strip strong, .method-strip span, .method-strip small { display: block; }
.method-strip strong { color: var(--accent); font-size: 13.56px; }
.method-strip span { margin-top: 8px; font-weight: 650; }
.method-strip small { margin-top: 4px; color: var(--muted); }
.shadow-stage, .army-stage, .listening-stage { padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.shadow-text, .army-prompt { margin: 26px auto 12px; max-width: 760px; font-family: var(--reading-font); font-size: clamp(31.64px,5.65vw,47.46px); line-height: 1.458; }
.shadow-toolbar, .shadow-actions, .army-controls, .record-actions, .audio-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.segmented button { min-height: 34px; border: 0; background: transparent; border-radius: 4px; padding: 0 10px; }
.segmented button.active { background: var(--accent-soft); color: var(--accent-strong); }
.loop-settings, .record-panel { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.shadowing-player { max-width: 760px; }
.catalog-more { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.5rem 0 2rem; }
.catalog-more p { margin:0; color:var(--muted); }
.shadowing-settings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0 10px; }
.shadowing-settings label, .shadowing-auto-next { display:grid; gap:6px; color:var(--muted); font-size:.9rem; }
.shadowing-settings select, .shadowing-auto-next select { width:100%; min-height:42px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); padding:0 10px; }
.shadowing-auto-next { display:flex; align-items:center; gap:8px; margin:4px 0 14px; }
.shadowing-auto-next select { width:auto; min-height:36px; }
@media (max-width: 620px) { .shadowing-settings { grid-template-columns:1fr; } .shadowing-auto-next { align-items:flex-start; flex-wrap:wrap; } }

/* Blog */
.blog-hub { max-width: 1180px; margin: 0 auto; }
.blog-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 20px; align-items: center; margin: 28px 0; }
.blog-search { position: relative; }
.blog-search input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.blog-search svg { position: absolute; left: 15px; top: 14px; color: var(--pale); }
.blog-category-row { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-category-row button { min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: 0 12px; color: var(--muted); }
.blog-category-row button.active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px 24px; }
.blog-card { min-width: 0; }
.blog-card-link { display: block; color: inherit; text-decoration: none; }
.blog-card-media { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); background: var(--surface-3); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 260ms var(--ease); }
.blog-card:hover .blog-card-media img { transform: scale(1.018); }
.blog-card-body { padding: 17px 2px 0; }
.blog-card-meta { display: flex; gap: 10px; color: var(--pale); font-size: 13.56px; }
.blog-card h2 { margin: 9px 0 8px; font-family: var(--reading-font); font-weight: 500; font-size: 25.99px; line-height: 1.458; }
.blog-card p { margin: 0; color: var(--muted); }
.blog-card-action { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--accent-strong); font-weight: 600; font-size: 15.82px; }
.blog-detail { max-width: 900px; margin: 0 auto; }
.blog-hero-cover { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; border-radius: var(--radius-lg); margin: 28px 0 38px; background: var(--surface-2); }
.blog-detail-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--pale); font-size: 14.69px; }
.article-body { font-family: var(--reading-font); font-size: 22px; line-height: 1.9; }
.article-body h1 { margin: 0 0 20px; font-size: 47.46px; line-height: 1.296; }
.article-body h2 { margin: 48px 0 16px; font-size: 32.77px; }
.article-body p { margin: 0 0 22px; }
.article-body li { margin: 8px 0; }
.article-tool-cta { margin-top: 42px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tool-link-grid { display: grid; gap: 10px; }
.tool-link-grid button { min-height: 84px; padding: 15px 18px; }
.tool-link-grid strong { font-size: 18px; }
.tool-link-grid small { font-size: 15px; line-height: 1.55; }

/* Forms / account */
.form-group { display: grid; gap: 7px; margin-bottom: 16px; }
.form-group label, .form-group > span { color: var(--muted); font-size: 14.69px; }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-grid, .auth-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.auth-panel { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.auth-panel h2 { font-family: var(--reading-font); font-weight: 500; }
.checkbox-field, .contact-consent { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); }
.contact-form { max-width: 760px; }
.settings-list > button > span:first-child { flex: 1; }

/* CMS */
.admin-shell { max-width: 1240px; margin: 0 auto; }
.admin-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 14px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.admin-tabs button { min-height: 38px; flex: 0 0 auto; border: 0; background: transparent; border-radius: var(--radius-sm); padding: 0 12px; color: var(--muted); }
.admin-tabs button.active { background: var(--accent-soft); color: var(--accent-strong); }
.admin-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0 16px; }
.admin-toolbar strong, .admin-toolbar small { display: block; }
.admin-toolbar small { margin-top: 3px; color: var(--pale); }
.admin-filterbar { display: grid; grid-template-columns: 1fr 190px; gap: 10px; margin-bottom: 14px; }
.admin-filterbar label { position: relative; }
.admin-filterbar label svg { position: absolute; left: 12px; top: 12px; color: var(--pale); }
.admin-filterbar label input { padding-left: 40px; }
.admin-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 15.82px; }
.admin-table th { padding: 13px 14px; background: var(--surface-2); color: var(--muted); font-weight: 600; text-align: left; position: sticky; top: 0; }
.admin-table td { padding: 14px; border-top: 1px solid var(--line); vertical-align: top; }
.admin-table tr:hover td { background: color-mix(in srgb, var(--surface-3) 56%, white); }
.admin-thumb { width: 64px; aspect-ratio: 16/10; object-fit: cover; border-radius: 4px; }
.admin-row-actions { display: flex; gap: 8px; white-space: nowrap; }
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; }
.admin-editor { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 38px; margin-top: 28px; }
.admin-editor-title { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 24px; }
.admin-editor-title h2 { margin-top: 4px; font-family: var(--reading-font); font-weight: 500; }
.autosave-status { color: var(--pale); font-size: 13.56px; }
.admin-editor-side { position: sticky; top: 90px; align-self: start; padding: 20px; border-left: 1px solid var(--line); color: var(--muted); font-size: 14.69px; }
.schedule-box { margin: 26px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); }
.schedule-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sticky-editor-actions { position: sticky; bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); }
.admin-status { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-status span { color: var(--accent); }

/* Theme Studio */
.theme-studio { max-width: 1180px; margin: 0 auto; }
.theme-workspace { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: 42px; margin-top: 28px; }
.theme-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.theme-color-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.theme-color-field { display: grid; grid-template-columns: 1fr 42px auto; gap: 10px; align-items: center; padding: 10px 0; }
.theme-color-field input { width: 42px; height: 32px; border: 0; background: transparent; }
.theme-color-field code { color: var(--pale); }
.theme-select-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.theme-preview { position: sticky; top: 90px; align-self: start; }
.theme-preview-card { margin: 12px 0 24px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.theme-preview-card h2 { margin: 9px 0; font-family: var(--reading-font); font-weight: 500; }

/* Footer / notices */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); background: #FBFAF7; }
.footer-inner { max-width: var(--content); margin: 0 auto; padding: 40px 44px; }
.footer-brand { display: grid; grid-template-columns: 180px minmax(0,520px); gap: 24px; align-items: start; }
.footer-brand strong { font-size: 20.34px; }
.footer-brand p { margin: 0; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; }
.site-footer nav button { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: 14.69px; }
.footer-note { display: flex; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--pale); font-size: 12.43px; }
.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; max-width: 360px; padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--text); color: white; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.toast.show { opacity: 1; transform: none; }
.cookie-banner { position: fixed; z-index: 110; left: calc(var(--sidebar) + 24px); right: 24px; bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; color: var(--muted); }
.cookie-banner div { display: flex; flex: 0 0 auto; gap: 8px; }

/* Misc existing components */
.commerce-panel, .account-bar, .category-feature, .category-index, .category-list, .category-row, .sentence-library-summary, .shadow-word-start, .army-principle, .principle-grid, .army-summary { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.category-row, .category-list button { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; padding: 16px 0; }
.principle-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.principle-mark { color: var(--accent); }
.audio-main { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.audio-main small { display: block; font-size: 11.3px; }

/* Responsive */
@media (max-width: 1180px) {
  :root { --sidebar: 204px; }
  .main-content { padding-inline: 30px; }
  .home-primary { grid-template-columns: 1fr; }
  .home-today { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
  .today-count { margin: 0; }
  .reader-layout.panel-open { grid-template-columns: minmax(0, var(--reading)) 300px; gap: 32px; }
}

@media (max-width: 900px) {
  .app-shell { display: block; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .app-sidebar { display: none; }
  .app-main { min-height: 100dvh; }
  .topbar { padding: 9px 18px; min-height: 60px; }
  .mobile-brand { display: block; }
  .mobile-brand .brand-word small { display: none; }
  .mobile-brand .brand-mark { width: 32px; height: 32px; }
  .topbar-context { display: none; }
  .account-button span { display: none; }
  .account-button { width: 40px; padding: 0; justify-content: center; }
  .main-content { padding: 28px 20px 56px; }
  .bottom-nav {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; min-height: 66px;
    display: grid; grid-template-columns: repeat(5,1fr); padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px);
  }
  .bottom-nav button { min-height: 60px; border: 0; background: transparent; color: var(--pale); }
  .bottom-nav button span { display: grid; place-items: center; }
  .bottom-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; }
  .bottom-nav small { display: block; margin-top: 3px; font-size: 11.3px; }
  .bottom-nav button.active { color: var(--accent-strong); }
  body[data-page-route="reading"] .bottom-nav { transform: translateY(110%); pointer-events: none; }
  .reading-progress-rail { left: 0; }
  .footer-inner { padding: 34px 20px 110px; }
  .cookie-banner { left: 14px; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; }
  .cookie-banner div { flex-wrap: wrap; }
  .home-progress-row { grid-template-columns: repeat(2,1fr); }
  .home-progress-row div:nth-child(2) { border-right: 0; }
  .home-progress-row div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .home-module-grid, .learning-module-grid { grid-template-columns: 1fr; }
  .reader-layout, .reader-layout.panel-open { display: block; }
  .reader-study-panel {
    position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; top: auto; opacity: 0; transform: translateY(102%); pointer-events: none;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .reader-layout.panel-open .reader-study-panel { opacity: 1; transform: none; pointer-events: auto; }
  .reader-panel-card { max-height: min(68dvh, 620px); overflow: auto; border-radius: 16px 16px 10px 10px; }
  .reader-panel-card::before { content:""; display:block; width:42px; height:4px; border-radius:999px; margin:0 auto 16px; background:var(--line-strong); }
  .reader-copy { font-size: 20.34px; line-height: 2.009; }
  .reader-title { font-size: 40.68px; }
  .reader-topline { margin-bottom: 30px; }
  .blog-grid { grid-template-columns: repeat(2,1fr); }
  .progress-page-grid, .theme-workspace, .admin-editor { grid-template-columns: 1fr; }
  .admin-editor-side, .theme-preview { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 20px 0; }
  .schedule-fields { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { padding-inline: 14px; }
  .language-switch select { max-width: 118px; min-height: 38px; }
  .main-content { padding: 22px 20px 50px; }
  .page-title { margin-bottom: 28px; }
  .page-title h1 { font-size: clamp(1.15rem, 5.2vw, 1.5rem); }
  .continue-reading { min-height: 390px; padding: 28px 24px; }
  .continue-reading h1 { font-size: 44.07px; }
  .continue-actions { align-items: stretch; flex-direction: column; }
  .continue-actions button { width: 100%; }
  .home-today { display: block; }
  .today-count { margin: 28px 0 16px; font-size: 72.32px; }
  .home-list-item { grid-template-columns: 74px minmax(0,1fr); }
  .home-list-action { display: none; }
  .home-list-copy strong { font-size: 20.34px; }
  .summary-grid, .completion-summary { grid-template-columns: 1fr; }
  .summary-grid > div, .completion-summary div { border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-grid > div:last-child, .completion-summary div:last-child { border-bottom: 0; }
  .rating-row { grid-template-columns: repeat(2,1fr); }
  .difficulty-switch { align-items: stretch; flex-direction: column; }
  .difficulty-options { display: grid; grid-template-columns: repeat(3,1fr); }
  .difficulty-options-jlpt { grid-template-columns: repeat(5,1fr); }
  .shadow-mode-grid, .blog-grid, .form-grid, .auth-grid, .theme-color-grid, .theme-select-grid, .principle-grid { grid-template-columns: 1fr; }
  .method-strip { grid-template-columns: repeat(2,1fr); }
  .method-strip > div:nth-child(2) { border-right: 0; }
  .method-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .blog-toolbar { grid-template-columns: 1fr; }
  .article-body { font-size: 20.34px; }
  .article-body h1 { font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
  .reader-tools-inline { overflow-x: auto; justify-content: flex-start; }
  .reader-meta { gap: 6px 12px; }
  .reader-topline { position: sticky; top: 58px; z-index: 15; margin-inline: -20px; padding: 8px 20px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); }
  .article-end-nav { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 18px; }
  .article-end-nav button { width: 100%; min-height: 46px; text-align: center; }
  .admin-filterbar { grid-template-columns: 1fr; }
  .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .footer-brand { grid-template-columns: 1fr; }
  .footer-note { flex-direction: column; }
  .toast { left: 14px; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.reader-page[data-font-scale="large"] .reader-copy { font-size: 23.73px; }
.reader-page[data-font-scale="extra"] .reader-copy { font-size: 25.99px; line-height: 2.074; }
.reader-panel-example small { display:block; margin-top:8px; color:var(--pale); font-family:var(--ui-font); font-size:13.56px; }
.progress-chart > div { flex:1; display:flex; flex-direction:column; justify-content:flex-end; min-height:160px; }
.progress-chart > div > span { width:100%; height:100%; }

/* =========================================================
   LexiLoop v5 — Calm Editorial Learning
   Reading-first desktop + purpose-built mobile layouts
   ========================================================= */
:root {
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #F2F0EA;
  --surface-3: #EFEEE9;
  --text: #242422;
  --muted: #6F706C;
  --pale: #969791;
  --line: #E4E2DC;
  --line-strong: #CBC8BF;
  --accent: #526D82;
  --accent-strong: #3F586B;
  --accent-soft: #E8EDF0;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --sidebar: 224px;
  --content: 1240px;
  --reading: 720px;
  --ui-font: Inter, "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --reading-font: "Noto Serif TC", "Noto Serif JP", "Source Han Serif TC", "Songti TC", Georgia, serif;
}

body { letter-spacing: .002em; }
h1, h2, h3 { text-wrap: balance; }
.primary-button, .secondary-button, .danger-button, .icon-button { border-radius: var(--radius-sm); }
.primary-button { box-shadow: none; }
.primary-button:hover { background: #334B5D; }
.main-content { padding-top: 38px; }
.app-sidebar { background: #F2F0EA; padding-inline: 18px; }
.app-sidebar .brand { padding: 2px 8px 18px; }
.brand-mark { width: 36px; height: 36px; }
.brand-mark svg { color: var(--accent); }
.desktop-nav { margin-top: 24px; }
.desktop-nav button, .sidebar-secondary button { border-radius: 6px; padding-inline: 10px; }
.desktop-nav button.active { background: rgba(82,109,130,.09); }
.topbar { background: rgba(255,255,255,.94); box-shadow: none; }
.site-footer { background: #F2F0EA; }

/* Home — editorial hierarchy, not a dashboard */
.editorial-home { max-width: 1120px; }
.editorial-proof{display:grid;grid-template-columns:repeat(4,max-content);gap:4px 11px;align-items:baseline;margin-top:22px;color:#183c5f}.editorial-proof strong{font-size:22px;line-height:1}.editorial-proof span{font-size:11px;color:#59616d}@media(max-width:700px){.editorial-proof{grid-template-columns:repeat(2,max-content)}}
.editorial-loop{margin:0 0 30px;padding:30px;border:1px solid #dfe3e8;border-radius:10px;background:#fff}.editorial-loop h2{max-width:720px;margin:8px 0 24px;font-family:var(--reading-font);font-size:29px;line-height:1.2}.editorial-loop>div{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.editorial-loop article{display:grid;gap:8px;padding-right:14px;border-right:1px solid #e6e1d8}.editorial-loop article:last-child{border:0}.editorial-loop b{font-family:var(--reading-font);font-size:27px;color:#174c78}.editorial-loop strong{font-size:15px}.editorial-loop small{color:#59616d;font-size:12px;line-height:1.6}@media(max-width:700px){.editorial-loop{padding:22px}.editorial-loop h2{font-size:25px}.editorial-loop>div{grid-template-columns:1fr 1fr}.editorial-loop article:nth-child(2){border:0}.editorial-loop article:nth-child(-n+2){border-bottom:1px solid #e6e1d8;padding-bottom:15px}}@media(max-width:420px){.editorial-loop>div{grid-template-columns:1fr}.editorial-loop article{border-right:0;border-bottom:1px solid #e6e1d8;padding-block:12px}.editorial-loop article:last-child{border-bottom:0}}
.home-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 80px;
  align-items: end;
  padding: 24px 0 48px;
  border-bottom: 1px solid var(--line);
}
.home-masthead h1 {
  max-width: 760px;
  margin: 12px 0 18px;
  font-family: var(--reading-font);
  font-size: clamp(51.98px, 6.215vw, 85.88px);
  font-weight: 500;
  line-height: 1.166;
  letter-spacing: -.045em;
}
.home-masthead > div:first-child > p { max-width: 620px; margin: 0; color: var(--muted); font-size: 19.21px; line-height: 1.944; }
.home-level-note { padding: 0 0 4px 24px; border-left: 1px solid var(--line); }
.home-level-note > span, .home-level-note > small { display: block; color: var(--pale); font-size: 13.56px; }
.home-level-note > strong { display: block; margin: 8px 0 4px; font-family: var(--reading-font); font-size: 42.94px; font-weight: 500; color: var(--accent-strong); }
.home-level-note .text-button { margin-top: 16px; font-size: 14.69px; }

.continue-editorial {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: 64px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.continue-cover { margin: 0; }
.continue-cover img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); }
.continue-cover figcaption { margin-top: 10px; color: var(--pale); font-size: 13.56px; letter-spacing: .04em; text-transform: uppercase; }
.continue-story h2 { max-width: 690px; margin: 12px 0 18px; font-family: var(--reading-font); font-size: clamp(42.94px, 4.52vw, 65.54px); font-weight: 500; line-height: 1.21; letter-spacing: -.035em; }
.continue-story > p { max-width: 650px; color: var(--muted); font-size: 19.21px; line-height: 1.998; }
.continue-story .progress-track { margin-top: 18px; }
.continue-story .continue-meta { margin-top: 22px; }

.today-brief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.today-brief h2 { margin: 4px 0; font-family: var(--reading-font); font-size: 29.38px; font-weight: 500; }
.today-brief p { margin: 0; color: var(--muted); }
.editorial-section { margin-top: 64px; }
.editorial-reading-list { border-top: 1px solid var(--line); }
.editorial-reading-row {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: background 170ms var(--ease), padding 170ms var(--ease);
}
.editorial-reading-row:hover { padding-inline: 12px; background: rgba(239,238,233,.72); }
.reading-index { color: var(--pale); font-family: var(--reading-font); font-size: 18.08px; }
.reading-row-copy strong { display: block; font-family: var(--reading-font); font-size: 24.86px; font-weight: 500; }
.reading-row-copy small { display: block; margin-top: 5px; color: var(--muted); }
.reading-row-arrow { color: var(--accent); }
.recommendation-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.recommendation-item { display: block; border: 0; padding: 0; background: transparent; text-align: left; }
.recommendation-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.recommendation-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms var(--ease); }
.recommendation-item:hover img { transform: scale(1.015); }
.recommendation-item small { display: block; margin-top: 14px; color: var(--pale); }
.recommendation-item strong { display: block; margin-top: 5px; font-family: var(--reading-font); font-size: 23.73px; font-weight: 500; line-height: 1.458; }
.recommendation-item em { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--accent); font-style: normal; font-size: 14.69px; }

/* Learning hub */
.learning-hub { max-width: 1120px; margin: 0 auto; }
.learning-resume {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr);
  gap: 40px;
  align-items: center;
  padding: 28px 0 44px;
  border-bottom: 1px solid var(--line);
}
.learning-resume-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); }
.learning-resume-copy h2 { margin: 10px 0 12px; font-family: var(--reading-font); font-size: 42.94px; font-weight: 500; }
.learning-resume-copy p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.944; }
.learning-resume-copy .button-row { margin-top: 22px; }
.learning-hub-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 72px; align-items: start; margin-top: 54px; }
.learning-group + .learning-group { margin-top: 58px; }
.learning-group-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.learning-group-head > span { color: var(--pale); font-family: var(--reading-font); font-size: 16.95px; }
.learning-group-head small { display: block; color: var(--pale); font-size: 12.43px; letter-spacing: .12em; text-transform: uppercase; }
.learning-group-head h2 { margin: 2px 0 0; font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }
.learning-tool-list { border-top: 1px solid var(--line); }
.learning-tool-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto 24px;
  gap: 16px;
  align-items: center;
  min-height: 92px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: background 170ms var(--ease), padding 170ms var(--ease);
}
.learning-tool-row:hover { padding-inline: 10px; background: rgba(239,238,233,.7); }
.learning-tool-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent); }
.learning-tool-icon svg { width: 21px; height: 21px; }
.learning-tool-copy strong { display: block; font-size: 19.21px; font-weight: 620; }
.learning-tool-copy small { display: block; margin-top: 4px; color: var(--muted); }
.learning-tool-meta { color: var(--pale); font-size: 13.56px; white-space: nowrap; }
.learning-tool-arrow { color: var(--accent); }
.learning-plan-aside { position: sticky; top: 96px; padding-left: 28px; border-left: 1px solid var(--line); }
.learning-level { display: flex; align-items: end; justify-content: space-between; margin: 12px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.learning-level small { color: var(--pale); }
.learning-level strong { font-family: var(--reading-font); font-size: 42.94px; font-weight: 500; color: var(--accent-strong); }
.learning-plan-aside .difficulty-switch { display: block; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--line); }
.learning-plan-aside .difficulty-options { margin-top: 13px; display: grid; grid-template-columns: repeat(3,1fr); }
.learning-plan-stats { padding: 18px 0; border-bottom: 1px solid var(--line); }
.learning-plan-stats > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; }
.learning-plan-stats span { color: var(--muted); }
.learning-plan-stats strong { font-weight: 620; }
.learning-plan-note { padding-top: 20px; }
.learning-plan-note p { color: var(--muted); font-size: 14.69px; line-height: 1.836; }

/* Practice pages — focused main task + quiet principle */
.practice-page { max-width: 1080px; margin: 0 auto; }
.practice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 68px; align-items: start; }
.practice-layout-wide { grid-template-columns: minmax(0, 1fr) 300px; }
.practice-main { min-width: 0; }
.practice-aside { position: sticky; top: 96px; padding-left: 24px; border-left: 1px solid var(--line); }
.practice-aside h2 { margin: 8px 0 12px; font-family: var(--reading-font); font-size: 27.12px; font-weight: 500; line-height: 1.404; }
.practice-aside p { color: var(--muted); font-size: 15.82px; line-height: 1.944; }
.practice-fit { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.practice-fit strong, .practice-fit span { display: block; }
.practice-fit strong { font-size: 13.56px; letter-spacing: .08em; text-transform: uppercase; }
.practice-fit span { margin-top: 5px; color: var(--muted); font-size: 14.69px; line-height: 1.836; }
.practice-aside-meta { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.practice-aside-meta span { color: var(--pale); font-size: 13.56px; }
.practice-aside-meta strong { font-weight: 620; }
.practice-progress { margin-bottom: 26px; }
.practice-progress > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 14.69px; }
.editorial-study-card { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px; border: 1px solid var(--line); background: var(--surface); }
.editorial-study-card .study-word { font-family: var(--reading-font); font-size: clamp(54.24px,7.91vw,88.14px); font-weight: 500; letter-spacing: -.035em; }
.editorial-study-card .phonetic { margin-top: 12px; color: var(--muted); }
.editorial-study-card .audio-button { margin-top: 26px; }
.editorial-study-card .answer-reveal { width: min(100%, 610px); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.editorial-question { min-height: 260px; display: flex; flex-direction: column; justify-content: center; padding: 38px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.editorial-question h2 { max-width: 720px; font-family: var(--reading-font); font-size: 38.42px; font-weight: 500; line-height: 1.566; }
.editorial-audio-stage { min-height: 320px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); background: var(--surface); }
.editorial-audio-stage h2 { margin: 8px 0; font-family: var(--reading-font); font-size: 38.42px; font-weight: 500; }
.editorial-audio-stage p { margin: 0; color: var(--muted); }
.answer-grid { margin-top: 18px; }
.answer-button { min-height: 58px; border-radius: 6px; }
.rating-row { margin-top: 14px; }
.rating-row button { border-radius: 6px; }

/* Method pages share the same calm learning language */
.learning-method-page { max-width: 1040px; }
.learning-method-page .method-why, .learning-method-page .method-principle { background: transparent; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 26px 0; }
.learning-method-page .shadow-mode-card { border-radius: 10px; box-shadow: none; }
.practice-session-page .shadow-stage, .practice-session-page .army-stage { background: var(--surface); border: 1px solid var(--line); padding-inline: 32px; }
.practice-session-page .record-panel { margin-top: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Reader refinements */
.reader-title { font-weight: 500; letter-spacing: -.035em; }
.reader-copy { text-wrap: pretty; }
.reader-study-panel .reader-panel-card { box-shadow: 0 18px 50px rgba(40,43,40,.07); }
.reader-panel-word { font-family: var(--reading-font); }
.reader-question .answer-grid { max-width: 720px; }

/* Brand assets display (available to CMS/about without changing main navigation) */
.brand-variant-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.brand-variant { padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.brand-variant img { width: 72px; height: 72px; color: var(--accent); }

@media (max-width: 1180px) {
  .home-masthead { gap: 44px; }
  .continue-editorial { gap: 42px; }
  .learning-hub-layout { gap: 44px; }
  .practice-layout { gap: 42px; }
}

@media (max-width: 900px) {
  .main-content { padding-top: 24px; }
  .home-masthead { grid-template-columns: 1fr; gap: 28px; padding-top: 4px; }
  .home-level-note { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .home-level-note small, .home-level-note .text-button { grid-column: 1 / -1; }
  .continue-editorial { grid-template-columns: minmax(170px,.58fr) minmax(0,1.42fr); gap: 30px; }
  .recommendation-strip { gap: 18px; }
  .learning-hub-layout, .practice-layout, .practice-layout-wide { grid-template-columns: 1fr; gap: 40px; }
  .learning-plan-aside, .practice-aside { position: static; padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .learning-resume { grid-template-columns: 160px minmax(0,1fr); gap: 26px; }
}

@media (max-width: 640px) {
  .home-masthead { padding-bottom: 34px; }
  .home-masthead h1 { font-size: 47.46px; line-height: 1.21; }
  .home-masthead > div:first-child > p { font-size: 18.08px; }
  .continue-editorial { display: block; padding: 38px 0; }
  .continue-cover { width: 46%; max-width: 190px; margin-bottom: 26px; }
  .continue-story h2 { font-size: 40.68px; }
  .continue-story > p { font-size: 18.08px; }
  .today-brief { align-items: stretch; flex-direction: column; }
  .today-brief button { width: 100%; }
  .editorial-section { margin-top: 48px; }
  .editorial-reading-row { grid-template-columns: 38px minmax(0,1fr) 20px; gap: 12px; }
  .reading-row-copy strong { font-size: 21.47px; }
  .recommendation-strip { grid-template-columns: 1fr; gap: 30px; }
  .recommendation-item { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 18px; align-items: center; }
  .recommendation-item small { margin-top: 0; }
  .recommendation-cover { aspect-ratio: 4 / 5; }
  .learning-resume { display: block; padding-top: 0; }
  .learning-resume-art { width: 42%; max-width: 160px; margin-bottom: 24px; }
  .learning-resume-copy h2 { font-size: 36.16px; }
  .learning-hub-layout { margin-top: 40px; }
  .learning-group + .learning-group { margin-top: 46px; }
  .learning-tool-row { grid-template-columns: 38px minmax(0,1fr) 22px; min-height: 86px; gap: 12px; }
  .learning-tool-meta { display: none; }
  .learning-tool-copy strong { font-size: 18.08px; }
  .practice-page .page-title h1 { font-size: 38.42px; }
  .practice-aside { order: 2; }
  .editorial-study-card { min-height: 390px; padding: 32px 22px; }
  .editorial-study-card .study-word { font-size: 58.76px; }
  .editorial-question { min-height: 220px; padding-block: 28px; }
  .editorial-question h2, .editorial-audio-stage h2 { font-size: 31.64px; }
  .editorial-audio-stage { min-height: 280px; padding-inline: 20px; }
  .practice-session-page .shadow-stage, .practice-session-page .army-stage { padding-inline: 18px; }
  .brand-variant-grid { grid-template-columns: 1fr; }
}
body[data-page-route="vocab"] .lesson-shell,
body[data-page-route="shadowing"] .lesson-shell,
body[data-page-route="army"] .lesson-shell,
body[data-page-route="review"] .lesson-shell,
body[data-page-route="progress"] .lesson-shell { max-width: 1040px; }

/* v5.1 product architecture and interaction repair */
html[data-signed-in="false"] .signed-in-only{display:none!important}.public-home,.dashboard-page,.language-portal,.start-page,.exam-page,.reading-library{max-width:1180px;margin:0 auto}.public-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:64px;padding:64px 0 72px;border-bottom:1px solid var(--line)}.public-hero h1{font-family:var(--reading-font);font-weight:500;font-size:clamp(49.72px,5.876vw,81.36px);line-height:1.166;letter-spacing:-.035em;max-width:850px;margin:12px 0 24px}.public-hero p{font-size:21.47px;line-height:1.89;max-width:720px}.public-hero-note{align-self:end;border-left:1px solid var(--line);padding-left:32px}.public-hero-note ol{padding-left:20px;line-height:2.16}.vocab-test-cta{margin-top:32px;width:min(520px,100%);display:flex;gap:18px;align-items:center;text-align:left;padding:20px;border:1px solid var(--accent);background:var(--surface);border-radius:10px;color:var(--text)}.vocab-test-cta>span:first-child{display:grid;place-items:center;width:46px;height:46px;background:var(--accent-soft);color:var(--accent)}.vocab-test-cta .ui-icon{width:22px;height:22px}.vocab-test-cta>span:last-child{display:grid;gap:3px;flex:1}.vocab-test-cta em{color:var(--accent);font-style:normal}.public-methods,.public-features,.public-blog,.public-account-cta{padding:64px 0;border-bottom:1px solid var(--line)}.public-methods>div:last-child{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.public-methods article{padding-top:18px;border-top:1px solid var(--line)}.public-methods article>span{font-size:13.56px;color:var(--pale)}.public-methods h3{font-size:21.47px;margin:18px 0 10px}.public-methods p,.public-features p{color:var(--muted);line-height:1.836}.public-features{display:grid;grid-template-columns:1fr 1fr;gap:64px}.public-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.public-blog-grid>button{background:none;border:0;border-top:1px solid var(--line);padding:22px 0;text-align:left}.public-blog-grid h3{font-family:var(--reading-font);font-weight:500;font-size:27.12px;line-height:1.458}.public-blog-grid p{color:var(--muted);line-height:1.782}.public-blog-grid span{color:var(--accent)}.public-account-cta{display:flex;justify-content:space-between;gap:32px;align-items:center}.public-account-cta p{max-width:760px;color:var(--muted)}
.sidebar-language-entries{display:grid;gap:8px;padding:20px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.sidebar-language-entries>span{font-size:12.43px;text-transform:uppercase;letter-spacing:.12em;color:var(--pale);padding:0 8px}.sidebar-language-entries button,.language-entry-buttons button,.language-mini-actions button,.dashboard-language-actions button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:6px}.sidebar-language-entries button{display:flex;align-items:center;gap:10px;padding:10px}.sidebar-language-entries button strong{display:grid;place-items:center;width:28px;height:28px;background:var(--surface-2);font-size:13.56px}.language-entry-buttons{display:flex;gap:6px}.language-entry-buttons button{padding:8px 12px}.sidebar-note{font-size:12.43px;color:var(--pale);line-height:1.62;padding:10px 18px}.dashboard-head{display:flex;justify-content:space-between;gap:32px;align-items:end;padding:28px 0 32px}.dashboard-head h1{font-family:var(--reading-font);font-weight:500;font-size:45.2px;margin:8px 0}.dashboard-language-actions{display:flex;gap:6px}.dashboard-language-actions button{padding:9px 14px}.dashboard-language-actions .active{background:var(--accent);border-color:var(--accent);color:#fff}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:24px}.dashboard-grid>section,.dashboard-grid>aside{border:1px solid var(--line);background:var(--surface);padding:24px;border-radius:10px}.dashboard-trend{min-height:360px}.dashboard-today{display:flex;flex-direction:column}.dashboard-due-number{font-size:72.32px;font-family:var(--reading-font);margin:20px 0}.dashboard-due-number small{font-family:var(--ui-font);font-size:14.69px;color:var(--muted);margin-left:8px}.dashboard-chart{margin-top:24px}.dashboard-chart svg{width:100%;height:210px;overflow:visible}.dashboard-chart .chart-base{stroke:var(--line);stroke-width:.5}.dashboard-chart .chart-line{fill:none;stroke:var(--accent);stroke-width:1.8;vector-effect:non-scaling-stroke}.dashboard-chart circle{fill:var(--surface);stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke}.dashboard-chart>div{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.dashboard-chart>div span{display:grid;text-align:center;color:var(--muted)}.dashboard-chart strong{font-size:14.69px;color:var(--text)}.dashboard-next{grid-column:1/3;display:flex;justify-content:space-between;align-items:center}.dashboard-recent{grid-column:1/3}.dashboard-reading-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.dashboard-reading-list button{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:none}.dashboard-reading-list span{display:grid;gap:4px}.dashboard-reading-list small{color:var(--muted)}.dashboard-locked{max-width:760px;margin:0 auto}.language-portal-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;padding:48px 0;border-bottom:1px solid var(--line)}.language-code.large{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--accent);color:var(--accent);font-weight:700}.language-portal-hero h2{font-family:var(--reading-font);font-weight:500;font-size:45.2px;line-height:1.35}.language-portal-hero p{font-size:20.34px;line-height:1.89;color:var(--muted)}.language-portal-hero aside{border-left:1px solid var(--line);padding-left:28px;display:flex;flex-direction:column;justify-content:center}.language-portal-hero aside strong{font-family:var(--reading-font);font-size:63.28px}.language-portal-tools{padding:48px 0}.language-portal-tools>div{display:grid;grid-template-columns:1fr 1fr}.language-portal-tools button{display:grid;grid-template-columns:36px 1fr 24px;align-items:center;text-align:left;gap:14px;padding:20px 0;border:0;border-bottom:1px solid var(--line);background:none}.language-portal-tools button>span{color:var(--accent)}.language-portal-tools button strong,.language-portal-tools button small{grid-column:2}.start-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px}.start-layout>main{padding:32px 0}.start-layout>aside{border-left:1px solid var(--line);padding:32px 0 32px 32px}.start-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);color:var(--accent);margin-bottom:28px}.start-layout main>h2{font-family:var(--reading-font);font-weight:500;font-size:40.68px;line-height:1.458}.start-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:32px 0}.start-facts>div{background:var(--surface);padding:18px;display:grid;gap:8px}.start-facts span{font-size:13.56px;color:var(--muted)}.start-options{margin:28px 0}.start-options label{display:flex;padding:16px 0;border-bottom:1px solid var(--line);gap:12px}.start-options label span{display:grid;gap:4px}.start-options small{color:var(--muted)}.start-actions{display:flex;gap:12px;margin-top:24px}.learning-tool-row{cursor:pointer}.reading-library-head,.exam-intro{display:flex;justify-content:space-between;gap:32px;align-items:start;padding:24px 0 32px}.reading-library-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}.reading-library-card{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:28px 0;border-top:1px solid var(--line)}.reading-card-number{font-size:13.56px;color:var(--pale)}.reading-library-card h3{font-family:var(--reading-font);font-weight:500;font-size:27.12px}.reading-library-card p{color:var(--muted);line-height:1.782}.exam-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.exam-form-grid button{display:grid;text-align:left;padding:24px;border:1px solid var(--line);background:var(--surface);border-radius:10px;gap:8px}.exam-form-grid button>span{font-size:12.43px;letter-spacing:.12em;color:var(--pale)}.exam-form-grid button strong{font-family:var(--reading-font);font-size:27.12px}.exam-form-grid button small{color:var(--muted)}.exam-skill{margin-top:24px;color:var(--accent);font-size:13.56px;text-transform:uppercase;letter-spacing:.12em}.test-credentials-panel{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:center;margin:16px 0;padding:18px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:8px}.test-credentials-panel strong,.test-credentials-panel small{grid-column:1/-1}.test-credentials-panel code{background:var(--surface);padding:8px 10px;overflow-wrap:anywhere}.difficulty-options button{cursor:pointer;position:relative;z-index:1}.difficulty-options button:focus-visible,.back-button:focus-visible,[data-route]:focus-visible,[data-action]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}.back-button,[data-route],[data-action],[data-language-entry],[data-start-tool],[data-start-exam],[data-exam-answer]{touch-action:manipulation}.brand-mark svg{width:26px;height:26px}.brand-mark{overflow:visible;display:grid;place-items:center;align-self:center}
@media(max-width:900px){.public-hero,.public-features,.language-portal-hero,.start-layout,.dashboard-grid{grid-template-columns:1fr}.public-methods>div:last-child,.public-blog-grid{grid-template-columns:1fr 1fr}.dashboard-next,.dashboard-recent{grid-column:auto}.dashboard-reading-list,.language-portal-tools>div,.reading-library-grid,.exam-form-grid{grid-template-columns:1fr}.start-layout>aside,.language-portal-hero aside{border-left:0;border-top:1px solid var(--line);padding-left:0}.language-entry-buttons{display:none}}
@media(max-width:640px){.public-home,.dashboard-page,.language-portal,.start-page,.exam-page,.reading-library{padding:0 20px}.public-hero{padding:32px 0 44px;gap:36px}.public-hero h1{font-size:45.2px}.public-methods,.public-features,.public-blog,.public-account-cta{padding:42px 0}.public-methods>div:last-child,.public-blog-grid{grid-template-columns:1fr}.public-account-cta,.dashboard-head,.dashboard-next,.reading-library-head,.exam-intro{align-items:stretch;flex-direction:column}.dashboard-head{display:flex}.dashboard-grid>section,.dashboard-grid>aside{padding:20px}.dashboard-chart svg{height:160px}.dashboard-reading-list{grid-template-columns:1fr}.start-facts{grid-template-columns:1fr}.start-actions{flex-direction:column}.language-portal-hero h2,.start-layout main>h2{font-size:clamp(1.2rem,5.4vw,1.6rem)}.exam-form-grid{grid-template-columns:1fr}.sidebar-language-entries{display:none}.test-credentials-panel{grid-template-columns:1fr}.bottom-nav{padding-bottom:env(safe-area-inset-bottom)}}
.pricing-page{max-width:1180px;margin:0 auto;padding:40px 24px}.pricing-page>header{max-width:760px;margin-bottom:32px}.pricing-page>header h1{font-family:var(--reading-font);font-size:clamp(2rem,5vw,3.8rem);margin:8px 0}.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}.pricing-grid .content-panel{display:grid;gap:12px;min-width:0}.pricing-grid h2{font-size:2rem;margin:0}.pricing-grid button{margin-top:auto}@media(max-width:900px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.pricing-grid{grid-template-columns:1fr}.pricing-page{padding:24px 18px}}

/* Homepage content hierarchy: real course scale and a clear free-to-Premium path. */
.program-card{min-height:280px}.program-label{display:block;margin-bottom:8px;color:#5b768d;font-size:11px;font-weight:700;letter-spacing:.08em}.program-card p{line-height:1.65}.editorial-access{display:flex;justify-content:space-between;gap:32px;align-items:center;margin-top:24px;padding:28px 30px;border:1px solid #dfe3e8;border-radius:10px;background:linear-gradient(100deg,#f7f2e9,#fff)}.editorial-access>div:first-child{max-width:700px}.editorial-access h2{margin:7px 0;font-family:var(--reading-font);font-size:28px;line-height:1.2}.editorial-access p{margin:0;color:#4c5a69;font-size:14px;line-height:1.65}.editorial-access>div:last-child{display:grid;justify-items:center;gap:9px;text-align:center}.editorial-access small{max-width:240px;color:#66707b;font-size:11px;line-height:1.45}@media(max-width:980px){.editorial-access{display:grid;grid-template-columns:1fr}.editorial-access>div:last-child{justify-items:start;text-align:left}}@media(max-width:700px){.editorial-access{padding:20px}}
.nav-group-label{display:block;margin:14px 10px 4px;color:#7d858d;font-size:10px;font-weight:700;letter-spacing:.12em}.desktop-nav>.nav-group-label:first-child{margin-top:0}.sidebar-secondary .nav-group-label{margin-top:0}

/* v5.2 — four-skill navigation and guided writing */
.home-skill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.skill-entry-card {
  min-height: 164px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.skill-entry-card:hover,
.skill-entry-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.skill-entry-card > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent);
}
.skill-entry-card > span svg { width: 21px; height: 21px; }
.skill-entry-card strong { font-size: 19.21px; }
.skill-entry-card small { color: var(--muted); line-height: 1.728; }
.skill-entry-card em {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14.69px;
  font-style: normal;
  font-weight: 650;
}
.skill-entry-card em svg { width: 15px; height: 15px; }

.skill-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin: 12px 0 28px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.skill-hub-header h2 {
  margin: 5px 0 8px;
  font-family: var(--reading-font);
  font-size: clamp(31.64px, 4.52vw, 45.2px);
  font-weight: 500;
}
.skill-hub-header p { margin: 0; color: var(--muted); }
.dashboard-language-actions {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}
.dashboard-language-actions button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.dashboard-language-actions button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.writing-page { max-width: 1120px; margin: 0 auto; }
.writing-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 54px;
  align-items: start;
  margin-top: 30px;
}
.writing-layout-single { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.writing-topic-groups { display: grid; gap: 34px; margin-top: 26px; }
.writing-topic-picker { border-top: 1px solid var(--line); padding-top: 18px; }
.writing-topic-picker h2 { margin: 7px 0 18px; font-family: var(--reading-font); font-size: 32px; font-weight: 500; }
.writing-topic-picker > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.writing-topic-picker .primary-button { margin-top: 12px; }
.writing-topic-picker button { display: grid; gap: 7px; min-height: 136px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; transition: border-color .16s ease, transform .16s ease; }
.writing-topic-picker button:hover { border-color: var(--accent); transform: translateY(-2px); }
.writing-topic-picker small { color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.writing-topic-picker strong { font-size: 20px; }
.writing-topic-picker button span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.ielts-chart { margin: 22px 0; padding: 18px; border: 1px solid var(--line); background: #fbfcfc; }
.ielts-chart figcaption { color: var(--text); font-weight: 650; margin-bottom: 14px; }
.ielts-chart-bar svg { display: block; width: 100%; height: auto; }
.ielts-chart-bar .bar-grid path { fill: none; stroke: #d8d7d0; stroke-width: 1; }
.ielts-chart-bar text { fill: var(--muted); font: 15px var(--ui-font); }
.ielts-chart-bar .bar-legend rect:first-child, .ielts-chart-bar .year-2010 { fill: var(--accent); }
.ielts-chart-bar .bar-legend rect:nth-of-type(2), .ielts-chart-bar .year-2025 { fill: #c4a266; }
.ielts-chart-bar .bar-series text { fill: var(--text); font-size: 16px; font-weight: 650; }
.ielts-chart-bar .bar-axis-title { font-weight: 700; }
.ielts-chart-line svg { display: block; width: 100%; height: auto; }
.ielts-chart-line path { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.ielts-chart-line .north { stroke: var(--accent); stroke-width: 5; }
.ielts-chart-line .central { stroke: #9b9b90; stroke-width: 5; }
.ielts-chart-line .south { stroke: #c4a266; stroke-width: 5; }
.ielts-chart-line .axis text { fill: var(--muted); font: 14px var(--ui-font); }
.writing-prompt-list {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.writing-prompt-list > .section-kicker { padding: 16px 0 10px; }
.writing-prompt-button {
  width: 100%;
  min-height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.writing-prompt-button span { display: grid; gap: 3px; }
.writing-prompt-button small { color: var(--pale); }
.writing-prompt-button strong { font-weight: 620; }
.writing-prompt-button em { color: var(--accent); font-size: 13.56px; font-style: normal; }
.writing-prompt-button svg { width: 16px; height: 16px; color: var(--pale); }
.writing-prompt-button.active { color: var(--accent-strong); }
.writing-prompt-button.active strong { font-weight: 720; }
.writing-workspace { min-width: 0; }
.writing-brief {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.writing-brief > span { color: var(--accent); font-size: 13.56px; font-weight: 700; letter-spacing: .08em; }
.writing-brief h2 { margin: 8px 0 12px; font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }
.writing-brief p { color: var(--text); font-size: 19.21px; line-height: 1.89; }
.writing-brief ul { margin: 18px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.89; }
.writing-editor { display: grid; gap: 10px; margin-top: 24px; }
.writing-editor > span { font-weight: 650; }
.writing-editor textarea {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: 16px/1.8 var(--ui-font);
}
.writing-editor textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); }
.writing-editor small { color: var(--muted); }
.writing-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.writing-reference {
  margin-top: 30px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.writing-reference p { color: var(--text); font-size: 18.08px; line-height: 2.052; }
.writing-reference small { color: var(--muted); }
.writing-lesson { margin-top: 22px; padding: 24px 28px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.writing-lesson h3 { margin: 8px 0 15px; font-family: var(--reading-font); font-size: 25px; font-weight: 500; }
.writing-lesson ol { display: grid; gap: 12px; margin: 0; padding-left: 22px; }
.writing-lesson li { padding-left: 4px; }
.writing-lesson li strong { display: block; color: var(--accent-strong); }
.writing-lesson li span { color: var(--muted); line-height: 1.65; }
.writing-language-bank { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text); line-height: 1.7; }

[data-writing-prompt], [data-start-tool], [data-start-exam], [data-exam-answer] { touch-action: manipulation; }

@media (max-width: 900px) {
  .home-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-hub-header { align-items: start; flex-direction: column; }
  .writing-layout { grid-template-columns: 1fr; gap: 28px; }
  .writing-prompt-list { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .writing-prompt-list > .section-kicker { grid-column: 1 / -1; }

  .bottom-nav {
    display: flex;
    min-height: 68px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .bottom-nav::-webkit-scrollbar { display: none; }
  .bottom-nav button {
    flex: 0 0 72px;
    min-width: 72px;
    scroll-snap-align: start;
  }
}

@media (max-width: 620px) {
  .home-skill-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .skill-entry-card { min-height: 150px; padding: 14px; }
  .writing-prompt-list { grid-template-columns: 1fr; }
  .writing-brief { padding: 20px; }
  .writing-lesson { padding: 18px 20px; }
  .writing-actions { display: grid; grid-template-columns: 1fr; }
  .writing-actions button { width: 100%; }
  .writing-topic-picker > div { grid-template-columns: 1fr; }
  .writing-topic-picker h2 { font-size: 27px; }
  .writing-topic-picker button { min-height: 112px; padding: 16px; }
  .ielts-chart { padding: 13px; }
}


/* v5.2.2 — global interaction hardening */
.app-main,
.main-content,
#routeView,
#routeView > * {
  position: relative;
  pointer-events: auto;
}
#routeView { isolation: isolate; z-index: 1; }
button,
[role="button"],
label,
input,
select,
textarea,
[data-route],
[data-action],
[data-language-entry],
[data-start-tool],
[data-start-exam],
[data-exam-answer],
[data-difficulty],
[data-writing-prompt] {
  pointer-events: auto !important;
  touch-action: manipulation;
}
button,
[role="button"],
[data-route],
[data-action],
[data-language-entry],
[data-start-tool],
[data-start-exam],
[data-exam-answer],
[data-difficulty],
[data-writing-prompt] {
  position: relative;
  z-index: 2;
}
button > *,
[data-route] > *,
[data-action] > * > *,
[data-language-entry] > *,
[data-start-tool] > *,
[data-start-exam] > *,
[data-exam-answer] > *,
[data-difficulty] > *,
[data-writing-prompt] > *,
button svg,
button use {
  pointer-events: none !important;
}
.content-panel,
.learning-tool-list,
.learning-tool-row,
.difficulty-options,
.auth-panel,
.form-group,
.start-actions,
.button-row {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.learning-tool-row,
.difficulty-options button,
.auth-panel button,
.start-actions button,
.button-row button {
  -webkit-tap-highlight-color: rgba(82,109,130,.14);
}

@media (max-width: 900px) {
  html { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .app-shell { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .main-content { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    height: calc(68px + env(safe-area-inset-bottom));
    max-height: calc(68px + env(safe-area-inset-bottom));
    align-items: stretch;
    contain: layout paint;
  }
  .bottom-nav button { height: 67px; max-height: 67px; }
  .learning-tool-row,
  .start-actions,
  .difficulty-switch,
  .auth-panel button,
  .writing-actions {
    scroll-margin-bottom: calc(100px + env(safe-area-inset-bottom));
  }
}

/* v5.2.3 — calmer Army Method overview and clearer account verification */
.learning-method-page { max-width: 1120px; }
.army-principle {
  margin: 30px 0 24px;
  padding: 38px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: var(--surface) !important;
  box-shadow: 0 16px 42px rgba(36,36,34,.045);
}
.army-principle .principle-heading {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}
.army-principle .principle-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.army-principle .principle-mark svg { width: 23px; height: 23px; }
.army-principle .principle-heading h2 {
  max-width: 760px;
  margin: 7px 0 0;
  font-family: var(--reading-font);
  font-size: clamp(30.51px,3.39vw,42.94px);
  font-weight: 520;
  line-height: 1.382;
  letter-spacing: -.025em;
}
.army-principle > p {
  max-width: 880px;
  margin: 0 0 30px 64px;
  color: var(--muted);
  font-size: 18.08px;
  line-height: 2.106;
}
.army-principle .principle-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: 8px;
  padding: 0;
  border: 0;
}
.army-principle .principle-grid > div {
  min-height: 178px;
  padding: 21px 19px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}
.army-principle .principle-grid strong,
.army-principle .principle-grid span,
.army-principle .principle-grid small { display: block; }
.army-principle .principle-grid strong {
  color: var(--accent-strong);
  font-size: 13.56px;
  letter-spacing: .12em;
}
.army-principle .principle-grid span {
  margin-top: 17px;
  font-family: var(--reading-font);
  font-size: 25.99px;
  font-weight: 560;
}
.army-principle .principle-grid small {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.69px;
  line-height: 1.836;
}
.army-principle .method-fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
.army-principle .method-fit > div {
  padding: 20px 22px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
}
.army-principle .method-fit strong,
.army-principle .method-fit span { display: block; }
.army-principle .method-fit strong {
  margin-bottom: 7px;
  color: var(--accent-strong);
  font-size: 13.56px;
  letter-spacing: .08em;
}
.army-principle .method-fit span {
  color: var(--text);
  font-size: 15.82px;
  line-height: 1.89;
}
.army-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin: 0 0 52px;
  padding: 0;
  border: 0;
}
.army-summary > div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 112px;
  padding: 23px 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.army-summary span { color: var(--muted); font-size: 14.69px; }
.army-summary strong {
  font-family: var(--reading-font);
  font-size: 42.94px;
  font-weight: 520;
  line-height: 1.08;
}
.learning-method-page > .section-header {
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.learning-method-page > .section-header h2 {
  margin-top: 7px;
  font-family: var(--reading-font);
  font-size: clamp(35.03px,4.52vw,51.98px);
  font-weight: 500;
  line-height: 1.296;
  letter-spacing: -.03em;
}
.army-category-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  padding: 0;
  border: 0;
}
.army-category-list .category-row {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: start;
  gap: 16px;
  min-height: 164px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.army-category-list .category-row:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 34px rgba(36,36,34,.055);
}
.army-category-list .category-index {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-size: 13.56px;
  font-weight: 700;
}
.army-category-list .category-row > span:nth-child(2) { min-width: 0; }
.army-category-list .category-row strong,
.army-category-list .category-row small,
.army-category-list .category-row em { display: block; }
.army-category-list .category-row strong {
  font-family: var(--reading-font);
  font-size: 24.86px;
  font-weight: 560;
  line-height: 1.458;
}
.army-category-list .category-row small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.69px;
  line-height: 1.782;
}
.army-category-list .category-row em {
  margin-top: 16px;
  color: var(--pale);
  font-size: 13.56px;
  font-style: normal;
}
.army-category-list .category-row > svg {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--accent);
}
.army-category-list .category-feature {
  align-self: start;
  padding: 6px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12.43px;
  white-space: nowrap;
}
.learning-method-page > .notice.top-gap {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.account-auth-page { max-width: 980px; }
.account-auth-page .auth-grid { gap: 24px; }
.account-auth-page .auth-panel {
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(36,36,34,.035);
}
.account-auth-page .auth-panel h2 {
  margin: 7px 0 25px;
  font-size: 35.03px;
}
.account-auth-page .auth-panel > small {
  display: block;
  margin-top: -3px;
  color: var(--muted);
  line-height: 1.782;
}
.verification-page { max-width: 720px; }
.verification-card {
  margin-top: 28px;
  padding: 46px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
  box-shadow: 0 18px 44px rgba(36,36,34,.045);
}
.verification-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.verification-icon svg { width: 27px; height: 27px; }
.verification-card h1 {
  margin: 9px 0 14px;
  font-family: var(--reading-font);
  font-size: clamp(38.42px,5.65vw,54.24px);
  font-weight: 520;
}
.verification-card > p { max-width: 540px; margin: 0 auto 26px; color: var(--muted); line-height: 1.998; }
.verification-resend { max-width: 460px; margin: 26px auto 20px; text-align: left; }
.verification-card > .text-button { margin-top: 10px; }

@media (max-width: 900px) {
  .army-principle .principle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .army-category-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .army-principle { padding: 24px !important; border-radius: 14px !important; }
  .army-principle .principle-heading { gap: 13px; }
  .army-principle .principle-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .army-principle > p { margin-left: 0; font-size: 16.95px; }
  .army-principle .principle-grid,
  .army-principle .method-fit { grid-template-columns: 1fr; }
  .army-principle .principle-grid > div { min-height: auto; }
  .army-summary { grid-template-columns: 1fr; gap: 10px; margin-bottom: 40px; }
  .army-summary > div { min-height: 82px; }
  .army-category-list .category-row { grid-template-columns: 42px minmax(0,1fr); min-height: 0; padding: 19px; }
  .army-category-list .category-row > svg,
  .army-category-list .category-feature { grid-column: 2; justify-self: start; }
  .account-auth-page .auth-panel { padding: 24px; }
  .verification-card { padding: 32px 22px; }
}


.mcq-row { margin-top: 18px; }
.mcq-row button { text-align: left; padding: 14px 16px; }
.mcq-row strong { font-size: 20.34px; margin-bottom: 8px; }
.mcq-row small { font-size: 15.82px; line-height: 1.674; color: var(--text); }
.mcq-row button.is-correct { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 68%, white); }
.mcq-row button.is-wrong { border-color: #c96b6b; background: #fff4f4; }
.mcq-row button:disabled { opacity: 1; }

/* v5.2.6 — spacious Army Method overview */
.army-overview {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr);
  gap: clamp(34px,5vw,76px);
  align-items: stretch;
  margin: 38px 0 34px;
  padding: clamp(34px,5vw,64px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 20px 54px rgba(36,36,34,.045);
}
.army-overview-copy { align-self: center; }
.army-overview-copy h2 {
  max-width: 680px;
  margin: 12px 0 22px;
  font-family: var(--reading-font);
  font-size: clamp(38.42px,5.198vw,65.54px);
  font-weight: 500;
  line-height: 1.231;
  letter-spacing: -.04em;
}
.army-overview-copy > p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 18.08px;
  line-height: 2.106;
}
.army-use-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 32px;
}
.army-use-grid > div {
  min-height: 126px;
  padding: 20px 21px;
  border-radius: 14px;
  background: var(--surface-2);
}
.army-use-grid span,
.army-use-grid strong { display: block; }
.army-use-grid span {
  margin-bottom: 11px;
  color: var(--accent-strong);
  font-size: 13.56px;
  font-weight: 700;
  letter-spacing: .09em;
}
.army-use-grid strong {
  font-size: 16.95px;
  font-weight: 600;
  line-height: 1.782;
}
.army-flow-map {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
  padding: 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-2));
}
.army-flow-map > div {
  position: relative;
  min-height: 202px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.army-flow-map small {
  position: absolute;
  top: 17px;
  right: 18px;
  color: var(--pale);
  font-size: 13.56px;
  font-weight: 700;
  letter-spacing: .12em;
}
.army-flow-map > div > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.army-flow-map svg { width: 22px; height: 22px; }
.army-flow-map strong {
  display: block;
  font-family: var(--reading-font);
  font-size: 28.25px;
  font-weight: 560;
}
.army-flow-map p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14.69px;
  line-height: 1.782;
}
.army-summary { margin-top: 0; }
.army-category-list { gap: 20px; }
.army-category-list .category-row { min-height: 184px; padding: 27px; }
.auth-panel button[disabled] { cursor: wait; opacity: .62; }
@media (max-width: 960px) {
  .army-overview { grid-template-columns: 1fr; padding: 34px; }
  .army-flow-map { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .army-overview { margin-top: 24px; padding: 24px 20px; border-radius: 15px; }
  .army-overview-copy h2 { font-size: 40.68px; }
  .army-use-grid,
  .army-flow-map { grid-template-columns: 1fr; }
  .army-flow-map > div { min-height: 156px; }
}

/* v5.2.9 — independent vocabulary and grammar paths */
.home-core-paths {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.home-core-heading {
  padding-bottom: 8px;
}
.home-core-heading h2 {
  margin: 8px 0 10px;
  font-family: var(--reading-font);
  font-size: clamp(38.42px,4.52vw,58.76px);
  font-weight: 520;
  letter-spacing: -.035em;
}
.home-core-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.836;
}

.home-core-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  padding: clamp(28px,4vw,46px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(36,36,34,.035);
}
.home-core-card h2 {
  max-width: 580px;
  margin: 12px 0 18px;
  font-family: var(--reading-font);
  font-size: clamp(35.03px,3.503vw,50.85px);
  font-weight: 520;
  line-height: 1.274;
  letter-spacing: -.035em;
}
.home-core-card p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: 16.95px;
  line-height: 1.998;
}
.home-level-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.home-level-tags span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.43px;
}
.home-core-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Vocabulary library and difficulty browser */
.vocab-library-page { max-width: 1180px; }
.vocab-library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin: 32px 0 26px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.vocab-library-head h2 {
  margin: 8px 0 8px;
  font-family: var(--reading-font);
  font-size: clamp(35.03px,4.52vw,54.24px);
  font-weight: 520;
}
.vocab-library-head p { margin: 0; color: var(--muted); }
.vocab-library-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.vocab-stage-tabs {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
  margin: 0 0 24px;
}
.vocab-stage-tabs button {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  text-align: left;
}
.vocab-stage-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.vocab-stage-tabs strong,
.vocab-stage-tabs span,
.vocab-stage-tabs small { display: block; }
.vocab-stage-tabs strong { font-size: 16.95px; }
.vocab-stage-tabs span { font-size: 13.56px; }
.vocab-stage-tabs small { color: var(--muted); font-size: 12.43px; }
.vocab-list-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 30px 0 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.vocab-list-toolbar > div { display: grid; gap: 4px; }
.vocab-list-toolbar small { color: var(--muted); }
.vocab-inline-search { min-width: min(390px,100%); display: grid; gap: 7px; }
.vocab-inline-search span { font-size: 13.56px; color: var(--muted); }
.vocab-inline-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.vocab-inline-search em { min-height: 16px; color: var(--muted); font-size: 12.43px; font-style: normal; }
.vocab-search-overlay:not(:empty) {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.vocab-browser-list {
  border-top: 1px solid var(--line);
}
.vocab-browser-row {
  display: grid;
  grid-template-columns: 62px minmax(150px,.7fr) minmax(260px,1.5fr) 126px 42px;
  gap: 18px;
  align-items: center;
  min-height: 84px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.vocab-browser-rank {
  color: var(--pale);
  font-size: 12.43px;
  letter-spacing: .08em;
}
.vocab-browser-word { display: grid; gap: 3px; }
.vocab-browser-word strong {
  font-family: var(--reading-font);
  font-size: 25.99px;
  font-weight: 560;
}
.vocab-browser-word small { color: var(--muted); }
.vocab-browser-row p { margin: 0; color: var(--muted); line-height: 1.674; }
.vocab-browser-level {
  justify-self: start;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-size: 12.43px;
  white-space: nowrap;
}
.vocab-browser-audio {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
}
.vocab-browser-audio svg { width: 17px; height: 17px; }
.vocab-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 28px 0;
}
.vocab-pagination button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
}
.vocab-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.vocab-pagination svg { width: 15px; height: 15px; }
.vocab-pagination span { color: var(--muted); font-size: 13.56px; }
.vocab-library-note {
  margin-top: 20px;
  padding: 22px 24px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
}
.vocab-library-note p { margin: 7px 0 0; color: var(--muted); line-height: 1.836; }

/* Stable vocabulary answer layout: no vertical jump after choosing */
.vocab-question-card {
  height: 430px;
  min-height: 430px;
  justify-content: center;
}
.vocab-next-slot {
  width: min(260px,100%);
  height: 50px;
  display: grid;
  place-items: center;
  margin-top: 15px;
}
.vocab-next-inline {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.vocab-next-inline svg { width: 17px; height: 17px; }
.vocab-next-placeholder { display: block; width: 100%; height: 48px; visibility: hidden; }
.vocab-feedback-shell {
  height: 164px;
  min-height: 164px;
  margin-top: 16px;
  padding: 16px 18px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.vocab-feedback-shell .feedback { padding: 10px 12px; font-size: 16.4px; line-height: 1.58; }
.vocab-feedback-shell .feedback strong { font-size: 14.62px; }
.vocab-feedback-shell .answer-reveal {
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  padding: 0;
  text-align: left;
}
.vocab-feedback-shell .answer-reveal .meaning { font-size: 15.81px; }
.vocab-feedback-shell .answer-reveal .definition,
.vocab-feedback-shell .answer-reveal blockquote { margin-top: 10px; font-size: 13.9px; line-height: 1.65; }
.vocab-feedback-wait {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  color: var(--pale);
  text-align: center;
}

@media (max-width: 900px) {
  .home-core-paths { grid-template-columns: 1fr; }
  .home-core-card { min-height: 0; }
  .vocab-stage-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vocab-browser-row { grid-template-columns: 48px minmax(130px,.8fr) minmax(200px,1.4fr) 40px; }
  .vocab-browser-level { grid-column: 2 / 4; }
}
@media (max-width: 640px) {
  .home-core-paths { padding: 42px 0; }
  .home-core-card { padding: 26px 22px; border-radius: 14px; }
  .home-core-actions > button { width: 100%; }
  .vocab-library-head { align-items: stretch; flex-direction: column; padding: 24px 20px; }
  .vocab-library-actions > button { width: 100%; }
  .vocab-stage-tabs { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .vocab-stage-tabs button { min-width: 145px; }
  .vocab-list-toolbar { align-items: stretch; flex-direction: column; }
  .vocab-inline-search { min-width: 0; }
  /* Word on the left, level and audio pinned right, meaning on its own line.
     The previous three-column split forced the entry into three stacked bands
     and left the level badge sitting under the audio button. */
  .vocab-browser-row {
    grid-template-columns: minmax(0,1fr) auto auto;
    grid-template-areas:
      "word level audio"
      "meaning meaning meaning";
    gap: 2px 8px;
    min-height: 0;
    align-items: center;
  }
  .vocab-browser-word { grid-area: word; }
  .vocab-browser-row p { grid-area: meaning; }
  .vocab-browser-level { grid-area: level; justify-self: end; }
  .vocab-browser-audio { grid-area: audio; justify-self: end; }
  .vocab-browser-audio { grid-column: 3; grid-row: 1; }
  .vocab-question-card { height: 390px; min-height: 390px; }
  .vocab-feedback-shell { height: 178px; min-height: 178px; }
  .vocab-pagination { gap: 8px; }
  .vocab-pagination button { padding-inline: 10px; }
}

.public-hero-method-image{align-self:stretch;border-left:0;padding-left:0;display:flex;align-items:flex-end}
.public-hero-method-image img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;object-position:center bottom;border:1px solid var(--line);background:var(--surface)}
@media (max-width:900px){.public-hero-method-image{align-items:center}.public-hero-method-image img{max-height:none;width:min(100%,620px);margin-inline:auto}}

/* v5.3.2 — larger editorial method visual with a soft lifted shadow */
@media (min-width: 901px) {
  .public-hero {
    grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
    gap: clamp(42px, 4.5vw, 72px);
    align-items: center;
  }
  .public-hero-method-image {
    align-self: center;
    align-items: center;
  }
  .public-hero-method-image img {
    width: 100%;
    max-height: none;
    aspect-ratio: 1122 / 1402;
    object-fit: cover;
    object-position: center;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 3px;
    box-shadow: 0 26px 58px rgba(30, 47, 61, .11), 0 4px 14px rgba(30, 47, 61, .055);
  }
}
@media (max-width: 900px) {
  .public-hero-method-image img {
    width: min(100%, 720px);
    border-radius: 3px;
    box-shadow: 0 18px 42px rgba(30, 47, 61, .10), 0 3px 10px rgba(30, 47, 61, .05);
  }
}

/* v5.3.3 — frameless method visual; ambient foliage shadow only */
.public-hero {
  position: relative;
  isolation: isolate;
}
.public-hero > * {
  position: relative;
  z-index: 1;
}
.public-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: -7%;
  bottom: -4%;
  width: 360px;
  height: 310px;
  opacity: .16;
  filter: blur(14px);
  transform: rotate(-13deg);
  background:
    radial-gradient(ellipse 35px 80px at 25% 72%, rgba(77,88,72,.48) 0 42%, transparent 47%),
    radial-gradient(ellipse 34px 76px at 42% 55%, rgba(77,88,72,.42) 0 42%, transparent 47%),
    radial-gradient(ellipse 31px 69px at 57% 39%, rgba(77,88,72,.34) 0 42%, transparent 47%),
    radial-gradient(ellipse 28px 64px at 70% 24%, rgba(77,88,72,.28) 0 42%, transparent 47%),
    linear-gradient(70deg, transparent 46%, rgba(77,88,72,.22) 48% 51%, transparent 53%);
}
.public-hero-method-image img {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
@media (max-width: 900px) {
  .public-hero::before {
    left: -20%;
    bottom: 0;
    width: 280px;
    height: 230px;
    opacity: .11;
  }
}


/* v5.3.6 — responsive hero and global type rhythm */
@media (max-width: 1480px) {
  .public-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
  }
  .public-hero > div {
    width: min(100%, 920px);
  }
  .public-hero h1 {
    max-width: 880px;
    font-size: clamp(50px, 6.1vw, 76px);
    line-height: 1.1664;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .public-hero p {
    max-width: 860px;
  }
  .public-hero-method-image {
    width: min(100%, 860px);
    justify-self: center;
    align-self: start;
  }
  .public-hero-method-image img {
    width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}
@media (max-width: 900px) {
  .public-hero {
    gap: 38px !important;
  }
  .public-hero h1 {
    max-width: 760px;
    font-size: clamp(43px, 8.2vw, 64px);
    line-height: 1.1664;
  }
}
@media (max-width: 640px) {
  .public-hero h1 {
    font-size: clamp(40px, 11.5vw, 54px) !important;
    line-height: 1.188;
    word-break: normal;
  }
  .public-hero p {
    font-size: 18px;
  }
}


/* v5.3.7 — mobile navigation completeness and compact hero */
@media (max-width: 640px) {
  .public-hero-method-image {
    display: none !important;
  }
  .public-hero {
    gap: 0 !important;
  }
}

/* v5.4.0: expanded Japanese learning methods and content library */
.japanese-method-page { max-width: 1180px; margin-inline: auto; }
.japanese-method-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0 28px; }
.japanese-method-summary > div { padding:20px; border:1px solid var(--line); background:var(--surface); border-radius:10px; }
.japanese-method-summary span,.japanese-method-summary small { display:block; color:var(--muted); }
.japanese-method-summary strong { display:block; margin:6px 0; font-family:var(--reading-font); font-size:clamp(30px,4vw,48px); font-weight:600; }
.japanese-method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.japanese-method-grid > button { position:relative; min-height:230px; padding:26px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-align:left; display:flex; flex-direction:column; align-items:flex-start; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.japanese-method-grid > button:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 14px 32px rgb(32 42 58 / .08); }
.japanese-method-grid > button > span:first-child { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.japanese-method-grid > button > span:first-child svg { width:24px; height:24px; }
.japanese-method-grid small { margin-top:18px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.japanese-method-grid strong { margin-top:7px; font-family:var(--reading-font); font-size:clamp(25px,3vw,36px); font-weight:600; }
.japanese-method-grid p { margin:12px 0 20px; color:var(--muted); line-height:1.75; }
.japanese-method-grid em { margin-top:auto; display:flex; align-items:center; gap:8px; color:var(--accent); font-style:normal; font-weight:700; }
.japanese-method-route { margin-top:28px; padding:28px; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.japanese-method-route ol { margin:0; padding-left:1.3em; display:grid; gap:10px; color:var(--muted); }
.japanese-cue-card,.dictation-card { padding:30px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.japanese-cue-card h2,.dictation-card h2 { margin:10px 0 14px; font-family:var(--reading-font); font-size:clamp(26px,4vw,44px); line-height:1.35; }
.japanese-model-answer { margin-top:22px; padding:20px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--accent-soft) 35%,transparent); }
.japanese-model-answer span,.japanese-model-answer small { display:block; color:var(--muted); }
.japanese-model-answer strong { display:block; margin:8px 0 14px; font-size:clamp(21px,3vw,32px); line-height:1.55; }
.ja-self-rating { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:8px; margin-top:14px; align-items:stretch; }
.ja-self-rating span { display:flex; align-items:center; padding:12px 14px; color:var(--muted); }
.ja-self-rating button { min-height:58px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.dictation-card label { display:grid; gap:8px; margin:22px 0 16px; }
.dictation-card textarea { width:100%; resize:vertical; min-height:120px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--background); color:var(--text); font:inherit; line-height:1.7; }
.japanese-ondoku { margin:24px 0; }
.japanese-method-entry { border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }

@media (max-width: 900px) {
  .japanese-method-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .japanese-method-route { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .japanese-method-grid { grid-template-columns:1fr; }
  .japanese-method-grid > button { min-height:0; }
  .japanese-method-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ja-self-rating { grid-template-columns:1fr; }
  .japanese-cue-card,.dictation-card { padding:20px; }
}

/* v5.4.1 — separated English/Japanese spaces and real level paths */
.nav-divider { display:block; height:1px; margin:9px 10px; background:var(--line); }
.dashboard-language-actions { display:none !important; }

.language-hub { width:min(100%,var(--content)); margin:0 auto; padding:24px 42px 76px; }
.language-hub-hero {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:40px; align-items:end;
  margin:18px 0 34px; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.language-hub-hero h2 { margin:8px 0 0; max-width:780px; font-family:var(--reading-font); font-size:clamp(30px,3vw,50px); line-height:1.24; letter-spacing:-.035em; font-weight:520; }
.language-hub-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.language-hub-stats div { min-width:0; padding:18px 14px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 82%,transparent); }
.language-hub-stats strong,.language-hub-stats span { display:block; }
.language-hub-stats strong { font-size:28px; line-height:1.1; }
.language-hub-stats span { margin-top:7px; color:var(--muted); font-size:13px; }
.language-skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.language-skill-card,
.language-feature-card {
  width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) 22px; gap:18px; align-items:center;
  padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); text-align:left;
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.language-skill-card:hover,.language-feature-card:hover { transform:translateY(-2px); border-color:var(--line-strong); background:#fff; }
.language-skill-card>svg:first-child,.language-feature-card>svg:first-child { width:34px; height:34px; color:var(--accent); }
.language-skill-card>svg:last-child,.language-feature-card>svg:last-child { width:18px; height:18px; color:var(--pale); }
.language-skill-card strong,.language-feature-card strong { display:block; font-size:20px; line-height:1.25; }
.language-skill-card p,.language-feature-card p { margin:7px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.language-feature-card { margin-top:12px; background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface)); }
.language-feature-card small { display:block; margin-bottom:4px; color:var(--accent-strong); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.language-quick-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.language-article-preview { margin-top:58px; padding-top:42px; border-top:1px solid var(--line); }

.level-path-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:22px 0; }
.level-path-tabs button { min-width:0; min-height:86px; padding:14px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); text-align:left; }
.level-path-tabs button.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }
.level-path-tabs strong,.level-path-tabs small { display:block; }
.level-path-tabs strong { font-size:18px; line-height:1.2; }
.level-path-tabs small { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.35; }
.level-difficulty-note { display:flex; align-items:center; gap:12px; margin:12px 0 20px; padding:13px 16px; border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent-soft) 62%,white); }
.level-difficulty-note strong { min-width:42px; font-size:18px; }
.level-difficulty-note span { color:var(--muted); font-size:14px; }

@media (max-width: 1080px) {
  .language-hub-hero { grid-template-columns:1fr; align-items:start; }
  .language-hub-stats { max-width:620px; }
}
@media (max-width: 900px) {
  .language-hub { padding:18px 28px 70px; }
  .language-skill-grid { grid-template-columns:1fr; }
  .level-path-tabs { display:flex; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
  .level-path-tabs button { flex:0 0 172px; scroll-snap-align:start; }
}
@media (max-width: 640px) {
  .language-hub { padding:8px 20px 92px; }
  .language-hub-hero { gap:22px; margin-top:8px; padding:24px 0; }
  .language-hub-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .language-hub-stats div { padding:14px 9px; }
  .language-hub-stats strong { font-size:22px; }
  .language-hub-stats span { font-size:10px; }
  .language-skill-card,.language-feature-card { grid-template-columns:40px minmax(0,1fr) 18px; gap:13px; padding:19px 16px; }
  .language-skill-card strong,.language-feature-card strong { font-size:18px; }
  .language-quick-actions { display:grid; grid-template-columns:1fr 1fr; }
  .language-quick-actions button { width:100%; }
  .level-difficulty-note { align-items:flex-start; }
}


/* v5.4.2: keep Army Method category title and description on separate lines. */
.army-category-list .category-copy { min-width: 0; }
.army-category-list .category-detail-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-top: 8px;
  color: var(--muted);
}
.army-category-list .category-detail-line small {
  min-width: 0;
  margin: 0;
  flex: 1 1 auto;
}
.army-category-list .category-detail-line em {
  flex: 0 0 auto;
  margin: 0;
  color: var(--pale);
  white-space: nowrap;
}
.army-category-list .category-detail-line svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

@media (max-width: 640px) {
  .army-category-list .category-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 20px 4px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
  }
  .army-category-list .category-index {
    display: inline;
    width: auto;
    height: auto;
    margin-right: 5px;
    background: transparent;
    color: var(--text);
    font-family: var(--reading-font);
    font-size: 22px;
    font-weight: 500;
  }
  .army-category-list .category-copy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
  }
  .army-category-list .category-copy > strong {
    grid-column: 2;
    font-size: 22px;
    line-height: 1.35;
  }
  .army-category-list .category-row > .category-index {
    grid-row: 1;
  }
  .army-category-list .category-detail-line {
    grid-column: 1 / -1;
    margin-top: 7px;
    gap: 8px;
    line-height: 1.55;
  }
  .army-category-list .category-detail-line small {
    font-size: 16px;
    line-height: 1.55;
  }
  .army-category-list .category-detail-line em {
    font-size: 15px;
  }
  .army-category-list .category-feature {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}


/* v5.4.3: two-line mobile category layout — number/title above, detail/count/arrow below. */
.shadow-category-list .category-copy,
.army-category-list .category-copy { min-width: 0; }
.shadow-category-list .category-detail-line,
.army-category-list .category-detail-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-top: 8px;
  color: var(--muted);
}
.shadow-category-list .category-detail-line small,
.army-category-list .category-detail-line small { min-width: 0; flex: 1 1 auto; margin: 0; }
.shadow-category-list .category-detail-line em,
.army-category-list .category-detail-line em { flex: 0 0 auto; margin: 0; white-space: nowrap; color: var(--pale); }
.shadow-category-list .category-detail-line svg,
.army-category-list .category-detail-line svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); }

@media (max-width: 640px) {
  .shadow-category-list .category-row,
  .army-category-list .category-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    column-gap: 8px;
    row-gap: 0;
    min-height: 0;
    padding: 20px 4px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
  }
  .shadow-category-list .category-index,
  .army-category-list .category-index {
    grid-column: 1;
    grid-row: 1;
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--reading-font);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.35;
  }
  .shadow-category-list .category-copy,
  .army-category-list .category-copy {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
  }
  .shadow-category-list .category-copy > strong,
  .army-category-list .category-copy > strong {
    display: block;
    font-size: 22px;
    line-height: 1.35;
  }
  .shadow-category-list .category-detail-line,
  .army-category-list .category-detail-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 7px;
    line-height: 1.55;
  }
  .shadow-category-list .category-detail-line small,
  .army-category-list .category-detail-line small {
    font-size: 16px;
    line-height: 1.55;
  }
  .shadow-category-list .category-detail-line em,
  .army-category-list .category-detail-line em { font-size: 15px; }
  .shadow-category-list .category-feature,
  .army-category-list .category-feature { grid-column: 2; margin-top: 8px; }
}

/* Home page language chooser: the site teaches two languages, so the entry
   point asks which one instead of defaulting to English. */
.public-hero-choose { margin-top: 18px; color: var(--muted); font-size: .95rem; }
.language-choice { padding-top: 8px; }
.language-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.language-choice-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 26px 26px 22px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.language-choice-card:hover, .language-choice-card:focus-visible {
  border-color: var(--accent); box-shadow: 0 10px 28px rgba(36,36,34,.08); transform: translateY(-2px);
}
.language-choice-icon { display: inline-flex; margin-bottom: 6px; color: var(--accent); }
.language-choice-icon svg { width: 30px; height: 30px; }
.language-choice-card strong { font-size: 1.45rem; line-height: 1.2; }
.language-choice-card small { color: var(--pale); font-size: .85rem; letter-spacing: .04em; }
.language-choice-card p { margin: 8px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.language-choice-card em {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  font-style: normal; font-weight: 600; font-size: .9rem; color: var(--accent-strong);
}
.language-choice-note { margin: 16px 0 0; color: var(--muted); font-size: .88rem; }
.text-button.inline { padding: 0; font-size: inherit; color: var(--accent-strong); text-decoration: underline; }
/* Two stacked full-height cards pushed the fold down and left a large blank
   band above them. Side by side with the descriptive paragraph dropped keeps
   the choice on the first screen. */
@media (max-width: 720px) {
  .language-choice-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .language-choice-card { padding: 16px 12px 14px; gap: 2px; }
  .language-choice-icon { margin-bottom: 2px; }
  .language-choice-icon svg { width: 24px; height: 24px; }
  .language-choice-card strong { font-size: 1.1rem; }
  .language-choice-card small { font-size: .74rem; }
  .language-choice-card p { display: none; }
  .language-choice-card em { margin-top: 10px; font-size: .8rem; }
  .language-choice-note { margin-top: 12px; font-size: .82rem; }
}

/* Account access is intentionally one task per page: sign in, register, or
   reset a password. This overrides the older two-panel auth layout. */
.account-auth-page .auth-grid { display:grid; grid-template-columns:minmax(0,620px); justify-content:center; }
.account-auth-page .auth-panel-single { min-height:0; }
.account-auth-page .auth-links { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; color:var(--muted); font-size:14px; }
@media (max-width: 520px) { .account-auth-page .auth-links { align-items:flex-start; flex-direction:column; } }

/* Account form fields used to inherit an old inline-label rule, so labels and
   inputs collided on wide screens. Keep the form intentionally narrow and
   give every field a stable label/input stack. */
.account-auth-page .auth-panel-single {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}
.account-auth-page .auth-panel-single > label {
  display:grid;
  gap:8px;
  min-width:0;
  color:var(--text);
  font-size:14px;
  font-weight:600;
}
.account-auth-page .auth-panel-single > label input {
  width:100%;
  min-width:0;
  min-height:46px;
  margin:0;
}
.account-auth-page .auth-panel-single > .primary-button,
.account-auth-page .auth-panel-single > .api-status,
.account-auth-page .auth-panel-single > p,
.account-auth-page .auth-panel-single > .text-button {
  grid-column:1/-1;
}
.account-auth-page .auth-panel-single > p { margin:0; }
@media (max-width:640px) {
  .account-auth-page .auth-panel-single { grid-template-columns:1fr; gap:15px; }
}

/* Keep the editorial home headline prominent without taking over the first
   mobile screen. 45.2px × 85% = 38.42px. */
@media (max-width: 640px) { .public-hero h1 { font-size:38.42px; } }

/* The method illustration is taller than the copy on wide screens. Keeping
   the copy vertically centred created an empty band above the headline. */
@media (min-width: 901px) { .public-hero > div:first-child { align-self:start; } }

/* .desktop-nav / .bottom-nav buttons set display:flex, which overrides the
   [hidden] attribute's default display:none. Without this the current zone's
   own language button stays visible next to the switch. */
.desktop-nav button[hidden], .bottom-nav button[hidden] { display: none !important; }

/* Answer feedback used to render from nothing, so the page grew the moment a
   question was answered and the action button landed wherever the reflow put
   it — often below the fold on a phone. Every drill now reserves the space up
   front, and on small screens the active button sticks above the bottom nav so
   it is reachable without scrolling. */
#feedback {
  display: block;
  min-height: 132px;
}
#feedback:empty::after {
  content: "作答後，這裡會顯示解析與下一題。";
  display: block;
  padding: 16px 18px;
  color: var(--pale);
  font-size: .88rem;
  border-left: 3px solid var(--line);
  background: var(--bg);
}
.practice-feedback-shell {
  display: block;
  min-height: 132px;
}
.practice-feedback-wait {
  margin: 0;
  padding: 16px 18px;
  color: var(--pale);
  font-size: .88rem;
  border-left: 3px solid var(--line);
  background: var(--bg);
}
/* the action button sits at the bottom of the white card, same slot every time */
.practice-action-slot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  min-height: 64px;
  display: flex;
  align-items: center;
}
.practice-action-slot .primary-button,
.practice-action-slot .text-button { width: 100%; justify-content: center; }
.practice-action-placeholder { display: block; width: 100%; height: 48px; visibility: hidden; }

@media (max-width: 720px) {
  #feedback, .practice-feedback-shell { min-height: 156px; }
  /* A practice page runs about three screens tall on a phone, so the answered
     state's button sat far below the fold. sticky cannot help once its whole
     container is off-screen, so the button is pinned to the viewport instead
     and sits just above the bottom nav. */
  .feedback .text-button,
  .practice-action-slot .primary-button,
  .practice-action-slot .text-button {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--bottom-nav-height, 64px) + 10px);
    z-index: 40;
    width: auto;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--accent-strong);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(36,36,34,.22);
  }
  .feedback .text-button svg,
  .practice-action-slot .text-button svg { color: #fff; }
}

/* Matches .bottom-nav button min-height plus the iOS home-indicator inset, so
   the sticky action button clears the nav instead of covering it. */
@media (max-width: 720px) {
  :root { --bottom-nav-height: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* The fixed action button overlays the page, so practice pages need room at the
   end for it plus the bottom nav; otherwise it covers the last card. */
@media (max-width: 720px) {
  .practice-page, .lesson-shell {
    padding-bottom: calc(var(--bottom-nav-height, 64px) + 92px);
  }
}

/* Five fixed destinations share the width evenly, so the bar no longer scrolls. */
@media (max-width: 720px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow-x: visible;
  }
  .bottom-nav button {
    min-width: 0;
    padding-inline: 2px;
    display: grid;
    grid-template-rows: 22px auto;
    justify-items: center;
    align-content: center;
  }
  .bottom-nav button > span,
  .bottom-nav button > small { width: 100%; text-align: center; }
  .bottom-nav button > span { display: grid; place-items: center; }
  .bottom-nav small { white-space: nowrap; }
}
/* Language switch lives in the top bar: low-frequency, so it does not deserve
   a permanent slot in the bottom bar. */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.language-switch:hover { border-color: var(--accent); color: var(--accent-strong); }
.language-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.language-switch[hidden] { display: none !important; }
.top-actions { display: flex; align-items: center; gap: 8px; }
/* Keeping the label matters here: the icon alone (a kana glyph) reads as
   "Japanese", which is misleading while standing in the English zone. */
@media (max-width: 480px) {
  .language-switch { padding: 7px 10px; font-size: .78rem; }
  .language-switch svg { width: 15px; height: 15px; }
}

/* Inside a drill the heading is orientation, not instruction. The "how to do
   this" line is already shown on the pre-start screen, so repeating it above
   every question just pushes the answer options further down — on a phone the
   options already started around 950px. Title stays (you need to know where
   you are after navigating back); the repeated instruction goes. */
.practice-page .page-title,
.japanese-method-page .page-title {
  margin-bottom: 14px;
}
.practice-page .page-title h1,
.japanese-method-page .page-title h1 {
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  line-height: 1.25;
}
.practice-page .page-title p,
.japanese-method-page .page-title p {
  display: none;
}


/* The question card reserves 430px minimum plus 42px padding, which is fine on
   a desktop but on a phone it pushed the answer options past the fold — you
   had to scroll before you could answer. Tightened on small screens only; the
   word stays large enough to read kanji strokes clearly. */
@media (max-width: 720px) {
  .editorial-study-card { min-height: 0; padding: 22px 18px; }
  .study-card { padding: 24px 18px; }
  .study-card.compact { padding-block: 18px; }
  .study-word { margin: 14px 0 6px; }
  .editorial-study-card .study-word { font-size: clamp(44px, 13vw, 62px); }
  .kana-word { font-size: clamp(52px, 16vw, 76px); }
  .audio-button { margin-top: 14px; }
  .difficulty-switch { margin: 14px 0; padding: 10px 0; }
}

/* The home page left roughly 100px of empty band on each side of the language
   chooser: the hero's own bottom padding plus the 56px gap between sections,
   then the same again before the journal. Tightened so the choice sits closer
   to the copy that introduces it. */
.public-hero { padding-bottom: 24px; }
.language-choice { margin-top: 20px; padding-top: 0; }
.language-choice + .public-blog,
.language-choice ~ .public-blog { margin-top: 24px; }

@media (max-width: 720px) {
  .public-hero { padding-bottom: 14px; }
  .language-choice { margin-top: 10px; }
  .language-choice ~ .public-blog { margin-top: 16px; padding-top: 24px; }
}

/* On a phone the hero headline alone ran about 400px, and with two paragraphs
   under it the language choice — the one action this page exists for — landed
   below the fold. The copy is still there, just sized so the choice is not
   pushed off the first screen. */
@media (max-width: 720px) {
  .public-hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.5rem); line-height: 1.22; margin: 8px 0 14px; }
  .public-hero p { font-size: .95rem; line-height: 1.65; }
  .public-hero .lead { margin-bottom: 10px; }
  .public-hero-choose { display: none; }
  .public-hero { padding-top: 16px; }
  .public-hero-method-image { display: none; }
}

/* ---- Compact the language hub and practice chrome ---------------------
   Both pages led with an oversized headline block, so the actual content —
   the skill list, or the question — started well past the fold. */

/* Language hub: smaller headings, and skills as a grid instead of one tall
   row each, so all six fit without a long scroll. */
.language-hub-hero h2 { font-size: clamp(22px, 2.2vw, 34px); }
.language-hub { padding-top: 14px; }

/* Practice pages: the header block above a question is orientation only. */


/* Six skills in two columns of tall cards ran well past the fold. Three across
   with tighter copy keeps the whole set visible. */
.language-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.language-skill-card { padding: 16px 14px; }
.language-skill-card strong, .language-feature-card strong { font-size: 1rem; }
.language-skill-card p { font-size: .8rem; line-height: 1.5; margin-top: 4px; }

@media (max-width: 900px) {
  .language-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .language-hub { padding: 10px 16px 76px; }
  .language-hub-hero h2 { font-size: 1.3rem; line-height: 1.3; }
  .language-hub-stats div { padding: 10px 8px; }
  .language-hub-stats strong { font-size: 20px; }
  .language-hub-stats span { margin-top: 3px; font-size: 11px; }
  /* Three columns on a 375px screen leaves ~105px per card, which forced the
     Chinese labels to break one character per line. Drop the "日文/英文"
     prefix and shrink the type so each label sits on one line. */
  .language-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .language-skill-card { padding: 12px 4px; text-align: center; display: grid; justify-items: center; gap: 6px; }
  .language-skill-card > svg:first-child { width: 22px; height: 22px; }
  .language-skill-card > svg:last-child { display: none; }
  /* You are already inside a language zone, so repeating 日文/英文 on every
     card only costs width. Swap to the bare skill name on small screens. */
  .language-skill-card strong { font-size: 0; line-height: 1.25; }
  .language-skill-card strong::after {
    content: attr(data-short);
    font-size: .82rem;
    white-space: nowrap;
  }
  .language-skill-card p { display: none; }
}

/* Same pattern on the vocabulary library page: a large title plus a three-line
   disclaimer pushed the start button past the fold. */


/* ---- One page header rule for every screen ---------------------------
   Each page opened with a back row, a large title and a paragraph, which on a
   phone consumed most of the first screen before any content appeared. This
   replaces the per-page tweaks that were accumulating for practice, the
   language hubs and the vocabulary library. */
@media (max-width: 720px) {
  .lesson-head { margin-bottom: 8px; }
  .back-button { font-size: .9rem; }
  .language-pill { font-size: .74rem; padding: 4px 10px; }

  .page-title { margin-bottom: 12px; }
  .page-title h1 { font-size: clamp(1.15rem, 5.2vw, 1.5rem); line-height: 1.28; }
  .page-title p { margin-top: 6px; font-size: .84rem; line-height: 1.6; }

  .language-hub-hero { gap: 10px; }
  .language-hub-hero h2 { font-size: 1.25rem; line-height: 1.3; }
  .section-kicker { font-size: .68rem; letter-spacing: .1em; }

  .practice-progress { margin: 4px 0 10px; font-size: .78rem; }
  .lesson-shell, .practice-page, .learning-hub { padding-top: 8px; }

  .content-panel, .study-card, .vocab-library-page .content-panel { padding: 16px 14px; }
  h2 { font-size: 1.12rem; line-height: 1.32; }
}

/* The mark and the wordmark are centred on the same line, but the glyph was
   32px against 19px type, so it read as oversized rather than paired. Sizing
   it to the text's own line box balances the lockup. */

/* The pre-start screen still opened with a 40px headline, which pushed the
   explanation and the start button down the page. */
@media (max-width: 720px) {
  .start-layout main > h2 { font-size: 1.2rem; line-height: 1.35; }
  .start-layout > main { padding: 14px 0; }
  .start-icon { width: 34px; height: 34px; margin-bottom: 12px; }
  .start-icon svg { width: 18px; height: 18px; }
  .start-facts { margin: 14px 0; }
  .start-facts > div { padding: 10px; }
  .start-options { margin: 14px 0; }
  .start-options label { padding: 10px 0; }
  .start-actions { margin-top: 14px; }
}

/* Completion screens used the desktop result rhythm on a phone: a large gap
   before the score and three full-width statistic rows made a short result
   need several screens. Keep the outcome prominent, but make it scan like a
   compact receipt. */
@media (max-width: 720px) {
  .result-panel { max-width: none; margin-top: 20px; }
  .result-panel .eyebrow { font-size: .72rem; letter-spacing: .13em; }
  .result-level { margin: 8px 0 6px; font-size: clamp(52px, 17vw, 68px); line-height: 1; }
  .result-level small { font-size: .95rem; }
  .result-panel h2 { margin: 8px 0; font-size: 1.3rem; line-height: 1.35; }
  .result-panel p { margin: 12px auto 0; font-size: .94rem; line-height: 1.65; }
  .completion-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0; }
  .completion-summary div { min-width: 0; padding: 10px 4px; border-right: 1px solid var(--line); border-bottom: 0; }
  .completion-summary div:last-child { border-right: 0; }
  .completion-summary span { font-size: .7rem; white-space: nowrap; }
  .completion-summary strong { margin-top: 2px; font-size: clamp(1rem, 5vw, 1.25rem); line-height: 1.25; overflow-wrap: anywhere; }
  .result-panel .button-row { gap: 8px; margin-top: 4px; }
  .result-panel .button-row button { min-height: 42px; padding: 9px 12px; font-size: .88rem; }
}


/* Shrinking the glyph to 26px left .brand-mark still sized at 32px, and the
   svg sat at the top of that box — so the mark rendered 3px above the centre
   of the name. Size the box to its contents instead of adding more alignment
   rules on top. */
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; }

/* The vocabulary card reserved a tall block for one word and its phonetic, so
   the answer options sat below the fold — the same problem already fixed for
   the other drills. */
@media (max-width: 720px) {
  .vocab-question-card { height: auto; min-height: 240px; padding: 18px 14px; }
  .vocab-question-card .study-word { margin: 10px 0 4px; font-size: clamp(2rem, 11vw, 2.6rem); }
  .vocab-question-card .phonetic { font-size: .9rem; }
  .vocab-question-card .card-meta { font-size: .74rem; }
  .vocab-question-card .audio-button { margin-top: 10px; }
  .vocab-next-slot { margin-top: 10px; }
  .vocab-next-placeholder { height: 40px; }
}

/* An empty title still renders an h1 box, so collapse it on screens that pass
   no title rather than leaving a gap where the heading used to be. */
.is-titleless .page-title { margin: 0; }
.is-titleless .page-title h1:empty { display: none; }

/* Answer options: the letter sat on its own line above the meaning, which made
   each option a tall block and pushed the set past the fold. */
.mcq-row .mcq-choice,
.answer-grid button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  text-align: left;
}
.mcq-row .mcq-choice strong,
.answer-grid button strong { font-size: .95rem; line-height: 1.4; }
.mcq-row .mcq-choice small,
.answer-grid button small { font-size: .88rem; line-height: 1.5; }

/* The next button now sits under the options instead of inside the card. */
.vocab-next-slot { margin-top: 14px; }

@media (max-width: 720px) {
  .vocab-question-card { padding: 14px 12px; }
  .vocab-question-card .study-word { margin: 6px 0 2px; font-size: clamp(1.8rem, 9.5vw, 2.2rem); }
  .vocab-question-card .phonetic { font-size: .85rem; }
  .vocab-question-card .audio-button { margin-top: 8px; }
  .mcq-row .mcq-choice,
  .answer-grid button { padding: 10px 12px; gap: 8px; }
  .mcq-row .mcq-choice strong,
  .answer-grid button strong { font-size: .85rem; }
  .mcq-row .mcq-choice small,
  .answer-grid button small { font-size: .8rem; line-height: 1.45; }
  .vocab-feedback-shell { min-height: 96px; }
  .vocab-next-slot { margin-top: 10px; }
}

/* Some phones report a wide layout viewport, so the usual 720px breakpoint
   did not reach their completion screen. Apply the compact result rhythm to
   every narrow/tablet layout as well, and override the earlier one-column
   summary rule. */
@media (max-width: 1100px) {
  .main-content { padding-top: 14px; }
  .public-hero { padding-top: 22px; }
  .lesson-shell:has(> .result-panel) .page-title { margin-bottom: 12px; }
  .lesson-shell:has(> .result-panel) .page-title h1 { font-size: clamp(1.55rem, 4.5vw, 2.15rem); line-height: 1.2; }
  .result-panel { margin-top: 20px; }
  .result-panel .eyebrow { font-size: .7rem; letter-spacing: .12em; }
  .result-level { margin: 10px 0; font-size: clamp(48px, 9vw, 64px); line-height: 1; }
  .result-level small { font-size: 1rem; }
  .result-panel h2 { margin: 10px 0; font-size: 1.2rem; line-height: 1.3; }
  .result-panel p { margin: 14px auto 0; font-size: .92rem; line-height: 1.62; }
  .completion-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0; }
  .completion-summary div { min-width: 0; padding: 12px 5px; border-right: 1px solid var(--line); border-bottom: 0; }
  .completion-summary div:last-child { border-right: 0; }
  .completion-summary span { font-size: .68rem; white-space: nowrap; }
  .completion-summary strong { margin-top: 2px; font-size: clamp(1rem, 3.8vw, 1.18rem); line-height: 1.2; overflow-wrap: anywhere; }
  .result-panel .button-row { margin-top: 8px; gap: 8px; }
}

/* Every English and Japanese tool starts through the shared start page. Keep
   its icon beside the introduction rather than spending a full line above it. */
.start-intro { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 18px; }
.start-intro .start-icon { margin: 0; }
.start-intro h2 { margin: 8px 0 0; font-family: var(--reading-font); font-size: 40.68px; font-weight: 500; line-height: 1.458; }
.writing-prompt-list { padding: 16px 0; }
.writing-prompt-select { display: grid; gap: 8px; }
.writing-prompt-select select { min-width: 220px; padding: 11px 36px 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.blog-content-count { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.article-learning-visual { margin: 24px 0 30px; border: 1px solid var(--line); background: var(--surface); }
.article-learning-visual img { display: block; width: 100%; height: auto; }
.article-learning-visual figcaption { padding: 9px 13px; color: var(--muted); font-size: .88rem; }
.article-learning-visual-bottom { margin-top: 34px; }
.article-body .article-table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--line); }
.article-body table { width: 100%; min-width: 480px; border-collapse: collapse; }
.article-body th,.article-body td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.article-body th { background: var(--pale); font-weight: 700; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-faq { margin-top: 46px; border-top: 1px solid var(--line); }
.article-faq h2 { margin-top: 30px; }
.article-faq-item { border-bottom: 1px solid var(--line); }
.article-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 2px; cursor: pointer; font-family: var(--ui-font); font-size: 18px; font-weight: 650; list-style: none; }
.article-faq-item summary::-webkit-details-marker { display: none; }
.article-faq-item summary span { flex: 0 0 auto; color: var(--accent); font-size: 23px; transition: transform .18s ease; }
.article-faq-item[open] summary span { transform: rotate(45deg); }
.article-faq-item > div { padding: 0 2px 17px; color: var(--muted); }
.article-faq-item > div p { margin-bottom: 0; }
@media (max-width: 720px) {
  .start-intro { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .start-intro .start-icon { width: 34px; height: 34px; margin: 0; }
  .start-intro h2 { margin-top: 5px; font-size: 1.2rem; line-height: 1.35; }
  .blog-content-count { font-size: .82rem; }
  .article-learning-visual { margin: 16px 0 22px; }
  .article-body { font-size: 18px; line-height: 1.78; }
  .article-body h2 { margin-top: 36px; font-size: 27px; }
}


/* ---- Folded in from article-nav-fix.css and start-intro-fix.css ------
   These shipped as separate stylesheets to dodge a cached styles.css. That
   costs two extra requests on every page load and splits the source of truth,
   so they live here now and the version query handles cache busting. */
.article-end-nav {
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.article-end-nav button {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
}

.article-end-nav button:last-child {
  text-align: center;
}

.article-end-nav .secondary-button {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

.article-end-nav .primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

.article-end-nav .primary-button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

@media (max-width: 720px) {
  .article-end-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 18px;
  }

  .article-end-nav button {
    width: 100%;
    min-height: 46px;
    text-align: center;
  }
}

.start-intro .start-icon {
  align-self: center;
}

@media (max-width: 640px) {
  .start-intro .start-icon {
    align-self: center;
  }
}

/* ---- Touch targets and minimum type ---------------------------------
   Footer links measured 59x25 and several labels rendered under 11px. Apple
   and Material both put the minimum comfortable target near 44px, and small
   type is the first thing to fail for older eyes — a real audience for a
   language-learning site. */
.site-footer nav button {
  min-height: 44px;
  padding: 10px 4px;
  display: inline-flex;
  align-items: center;
}
.section-kicker { font-size: 12px; }
.sidebar-note, .footer-note span { font-size: 12.5px; }
.bottom-nav small { font-size: 11.5px; }

@media (max-width: 720px) {
  .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
  .site-footer nav button { justify-content: flex-start; }
  /* the brand lockup is a link too, so give it a real target height */
  .mobile-brand .brand { min-height: 44px; }
}

/* Long lists should not render the entire archive at once. */
.blog-more { margin-top: 20px; display: flex; justify-content: center; }
.blog-more button { min-height: 46px; padding: 12px 22px; }

:root {
  color-scheme: light;
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #F1F0EB;
  --surface-3: #EFEEE9;
  --text: #242422;
  --muted: #6F706C;
  --pale: #969791;
  --line: #E4E2DC;
  --line-strong: #CCC9C1;
  --accent: #526D82;
  --accent-strong: #3E5669;
  --accent-soft: #E8EDF0;
  --danger: #A94747;
  --danger-soft: #FAEEEE;
  --success: #4F725F;
  --success-soft: #EEF5F1;
  --warning: #87652E;
  --warning-soft: #F8F2E7;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: none;
  --shadow-md: 0 18px 60px rgba(45, 48, 44, .08);
  --sidebar: 232px;
  --content: 1180px;
  --reading: 720px;
  --ui-font: Inter, "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reading-font: "Noto Serif TC", "Noto Serif JP", "Songti TC", Georgia, serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 18.08px;
  line-height: 1.728;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums tabular-nums;
}
body[data-page-route="reading"] { --content: 1500px; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; opacity: .45; }
::selection { background: color-mix(in srgb, var(--accent) 22%, white); }

.skip-link { position: fixed; left: 16px; top: -90px; z-index: 200; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.skip-link:focus { top: 16px; }
.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; }
.ui-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* App frame */
.app-shell { min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--sidebar); padding: 28px 20px 22px;
  display: flex; flex-direction: column;
  background: #FBFAF7; border-right: 1px solid var(--line);
}
.app-main { min-width: 0; grid-column: 2; display: flex; min-height: 100dvh; flex-direction: column; }
.sidebar-spacer { flex: 1; }
.sidebar-note { margin: 18px 8px 0; color: var(--pale); font-size: 13.56px; line-height: 1.674; }
.brand { display: inline-flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 0; text-align: left; }
.brand-mark { width: 38px; height: 38px; color: var(--accent); flex: 0 0 auto; }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.brand-word strong { display: block; font-size: 19.21px; line-height: 1.242; letter-spacing: -.035em; font-weight: 650; }
.brand-word small { display: block; margin-top: 4px; color: var(--pale); font-size: 11.3px; letter-spacing: .04em; }
.desktop-nav, .sidebar-secondary { display: grid; gap: 4px; margin-top: 40px; }
.sidebar-secondary { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.desktop-nav button, .sidebar-secondary button {
  min-height: 44px; display: flex; align-items: center; gap: 12px;
  padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); text-align: left;
  transition: color 170ms var(--ease), background 170ms var(--ease);
}
.desktop-nav button:hover, .sidebar-secondary button:hover { background: var(--surface-3); color: var(--text); }
.desktop-nav button.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 650; }
.desktop-nav svg, .sidebar-secondary svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.topbar {
  position: sticky; top: 0; z-index: 30; min-height: 66px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 30px; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.mobile-brand { display: none; }
.topbar-context { display: flex; align-items: center; gap: 8px; color: var(--pale); font-size: 13.56px; letter-spacing: .02em; }
.quiet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .62; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.language-switch select, .account-button {
  min-height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text);
}
.language-switch select { padding: 0 32px 0 12px; }
.account-button { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; }
.account-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; }

.main-content { width: min(100%, var(--content)); margin: 0 auto; padding: 42px 44px 72px; flex: 1; }
.bottom-nav { display: none; }

/* Typography */
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; }
.page-title { max-width: 780px; margin: 0 0 36px; }
.page-title h1, .home-primary h1, .reader-title, .article-body h1, .article-body h2, .section-title {
  font-family: var(--reading-font);
  font-weight: 500;
  letter-spacing: -.025em;
}
.page-title h1 { font-size: clamp(38.42px, 4.52vw, 58.76px); line-height: 1.188; }
.page-title p { max-width: 680px; margin: 12px 0 0; color: var(--muted); line-height: 1.944; }
.eyebrow, .section-kicker { color: var(--accent); font-size: 12.43px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }
.pale { color: var(--pale); }
.center { text-align: center; }
.small { font-size: 15.82px; }
.top-gap { margin-top: 18px; }
.spaced { margin-top: 22px; }
.full { width: 100%; }
.divider { height: 1px; background: var(--line); margin: 26px 0; }

/* Buttons */
.primary-button, .secondary-button, .ghost-button, .text-button, .danger-button, .icon-button, .back-button {
  min-height: 44px; border-radius: var(--radius-sm); font-weight: 600; transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: white; padding: 0 18px; }
.primary-button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.secondary-button { border: 1px solid var(--line-strong); background: transparent; color: var(--text); padding: 0 16px; }
.secondary-button:hover { background: var(--surface-3); }
.ghost-button, .text-button, .back-button { border: 0; background: transparent; color: var(--accent-strong); padding: 0 4px; }
.text-button { display: inline-flex; align-items: center; gap: 7px; }
.back-button { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.danger-button { border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--line)); background: var(--danger-soft); color: var(--danger); padding: 0 16px; }
.icon-button { width: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: transparent; }
.primary-button:active, .secondary-button:active, .icon-button:active { transform: translateY(1px); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.icon-text-button { display: inline-flex; align-items: center; gap: 8px; }

/* General sections */
.section { margin-top: 56px; }
.section-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-header h2, .section h2 { margin-top: 5px; font-family: var(--reading-font); font-size: clamp(29.38px, 3.39vw, 38.42px); font-weight: 500; letter-spacing: -.02em; }
.section-header p { margin: 7px 0 0; color: var(--muted); }
.lesson-shell { max-width: 880px; margin: 0 auto; }
.reading-column { max-width: 760px; margin: 0 auto; }
.content-panel { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.notice, .feedback { padding: 16px 18px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 58%, white); color: var(--muted); }
.notice strong, .feedback strong { color: var(--text); }
.badge, .language-pill, .source-note { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13.56px; }
.lesson-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 30px; }

/* Home */
.home-shell { max-width: 1120px; margin: 0 auto; }
.home-primary { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 42px; align-items: stretch; }
.continue-reading {
  min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 42px; border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: linear-gradient(145deg, #FFFFFF 0%, #F2F0EA 100%); border: 1px solid var(--line);
}
.continue-reading::after { content: ""; position: absolute; width: 300px; height: 300px; right: -90px; top: -120px; border: 38px solid color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 50%; }
.continue-reading > * { position: relative; z-index: 1; }
.continue-reading h1 { margin: 12px 0 14px; max-width: 700px; font-size: clamp(42.94px, 5.65vw, 70.06px); line-height: 1.145; }
.continue-reading p { max-width: 610px; margin: 0; color: var(--muted); font-size: 19.21px; line-height: 1.944; }
.continue-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; color: var(--pale); font-size: 14.69px; }
.continue-actions { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.home-today { padding: 30px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-today h2 { margin: 9px 0 8px; font-family: var(--reading-font); font-weight: 500; font-size: 33.9px; }
.home-today p { margin: 0; color: var(--muted); }
.today-count { margin: 34px 0 20px; font-family: var(--reading-font); font-size: 81.36px; line-height: 0.972; color: var(--accent-strong); }
.today-count small { font-family: var(--ui-font); font-size: 15.82px; color: var(--pale); }
.progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.progress-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width 240ms var(--ease); }
.home-list { border-top: 1px solid var(--line); }
.home-list-item { width: 100%; display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.home-list-item:hover { background: color-mix(in srgb, var(--surface-3) 72%, transparent); }
.home-list-media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--surface-3); overflow: hidden; }
.home-list-media img { width: 100%; height: 100%; object-fit: cover; }
.home-list-copy strong { display: block; font-family: var(--reading-font); font-size: 22.6px; font-weight: 500; }
.home-list-copy small { display: block; margin-top: 5px; color: var(--muted); }
.home-list-action { color: var(--accent); }
.home-progress-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-progress-row div { padding: 20px 16px; border-right: 1px solid var(--line); }
.home-progress-row div:last-child { border-right: 0; }
.home-progress-row span { display: block; color: var(--pale); font-size: 13.56px; }
.home-progress-row strong { display: block; margin-top: 6px; font-family: var(--reading-font); font-weight: 500; font-size: 29.38px; }

/* Editorial module lists */
.module-list, .path-list, .settings-list { border-top: 1px solid var(--line); }
.module-card, .path-item, .settings-list > button {
  width: 100%; min-height: 92px; display: flex; align-items: center; gap: 18px;
  padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left;
}
.module-card:hover, .path-item:hover, .settings-list > button:hover { background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.module-mark { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); }
.module-icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.module-copy { min-width: 0; flex: 1; }
.module-copy strong, .path-item strong, .settings-list strong { display: block; font-size: 20.34px; font-weight: 620; }
.module-copy small, .path-item em, .settings-list small { display: block; margin-top: 4px; color: var(--muted); font-style: normal; }
.module-arrow, .mode-arrow, .path-action { color: var(--accent); margin-left: auto; }
.home-module-grid, .learning-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 42px; border-top: 0; }
.home-module-grid .module-card, .learning-module-grid .module-card { border-top: 1px solid var(--line); }
.stat-line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-line span { color: var(--muted); }
.stat-line strong { font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }

/* Reader */
.reader-page { max-width: 1320px; margin: 0 auto; }
.reading-progress-rail { position: fixed; z-index: 60; top: 0; left: var(--sidebar); right: 0; height: 2px; background: transparent; pointer-events: none; }
.reading-progress-rail > span { display: block; width: 0; height: 100%; background: var(--accent); transition: width 100ms linear; }
.reader-layout { display: grid; grid-template-columns: minmax(0, var(--reading)) 0; justify-content: center; gap: 0; transition: grid-template-columns 220ms var(--ease), gap 220ms var(--ease); }
.reader-layout.panel-open { grid-template-columns: minmax(0, var(--reading)) 320px; gap: 56px; }
.reader-document { min-width: 0; }
.reader-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 42px; }
.reader-top-actions { display: flex; gap: 6px; }
.reader-top-actions button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-sm); }
.reader-top-actions button:hover { background: var(--surface-3); color: var(--text); }
.reader-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--pale); font-size: 14.69px; }
.reader-title { max-width: 720px; margin: 18px 0 20px; font-size: clamp(40.68px, 5.65vw, 56.5px); line-height: 1.231; }
.reader-deck { max-width: 670px; margin: 0 0 38px; color: var(--muted); font-size: 20.34px; line-height: 1.89; }
.reader-copy {
  color: #2B2B28; font-family: var(--reading-font); font-size: 21.47px; line-height: 2.03; letter-spacing: .005em;
}
.reader-copy p { margin: 0 0 22px; }
.reader-copy button.reader-word { display: inline; border: 0; padding: 0 1px; margin: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: inherit; }
.reader-copy button.reader-word:hover, .reader-copy button.reader-word:focus-visible { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.reader-copy button.reader-word.learned { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 48%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.reader-tools-inline { display: flex; align-items: center; gap: 10px; margin: 26px 0 34px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reader-tools-inline button { min-height: 38px; }
.reader-question { margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--line); }
.reader-question h2 { margin: 9px 0 18px; font-family: var(--reading-font); font-weight: 500; font-size: 30.51px; }
.reader-study-panel { position: sticky; top: 94px; align-self: start; height: max-content; opacity: 0; transform: translateX(14px); pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.reader-layout.panel-open .reader-study-panel { opacity: 1; transform: none; pointer-events: auto; }
.reader-panel-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.reader-panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.reader-panel-head button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--muted); }
.reader-panel-word { margin: 20px 0 4px; font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }
.reader-panel-reading { color: var(--pale); font-size: 14.69px; }
.reader-panel-meaning { margin: 20px 0 0; font-size: 19.21px; }
.reader-panel-definition { margin: 12px 0 0; color: var(--muted); font-size: 15.82px; line-height: 1.836; }
.reader-panel-example { margin: 18px 0 0; padding: 15px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--reading-font); line-height: 1.858; }
.reader-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.reader-panel-actions button { min-height: 42px; }
.reader-panel-empty { color: var(--muted); font-size: 15.82px; line-height: 1.836; }
.article-end-nav { margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-top: 1px solid var(--line); }
.article-end-nav button { min-height: 48px; padding: 12px 20px; border-radius: var(--radius-sm); text-align: center; font-weight: 700; line-height: 1.3; }
.article-end-nav .secondary-button { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.article-end-nav .primary-button { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.article-end-nav .primary-button:hover { border-color: var(--accent-strong); background: var(--accent-strong); }

/* Questions and practice */
.answer-grid { display: grid; gap: 10px; margin-top: 18px; }
.answer-button { min-height: 54px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: left; }
.answer-button:hover { border-color: var(--line-strong); background: var(--surface-3); }
.answer-button.correct { border-color: var(--success); background: var(--success-soft); }
.answer-button.wrong { border-color: var(--danger); background: var(--danger-soft); }
.question-panel { margin-top: 30px; }
.question-panel h2 { margin-top: 7px; font-family: var(--reading-font); font-weight: 500; }

/* Vocabulary */
.vocab-proof { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 26px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vocab-proof strong { display: block; margin-top: 4px; font-family: var(--reading-font); font-size: 42.94px; font-weight: 500; }
.vocab-proof p { margin: 4px 0 0; color: var(--muted); }
.path-item { min-height: 106px; }
.path-item > span:first-child { min-width: 0; flex: 1; }
.path-item small { display: block; color: var(--accent); font-size: 12.43px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.path-item.selected { background: color-mix(in srgb, var(--accent-soft) 52%, transparent); }
.search-box { display: grid; gap: 8px; }
.search-box label { color: var(--muted); font-size: 14.69px; }
.search-box input, .form-group input, .form-group select, .form-group textarea, .admin-filterbar input, .admin-filterbar select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 11px 12px;
}
.search-results { margin-top: 12px; border-top: 1px solid var(--line); }
.search-results > button { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.7fr); gap: 18px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.search-results strong { font-size: 19.21px; }
.search-results small, .search-results em { display: block; color: var(--muted); font-style: normal; }
.study-card { padding: 46px 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; background: transparent; }
.study-card.compact { padding-block: 30px; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--pale); font-size: 13.56px; }
.study-word { margin: 44px 0 10px; font-family: var(--reading-font); font-size: clamp(56.5px, 9.04vw, 83.62px); line-height: 1.08; }
.kana-word { font-size: 99.44px; }
.phonetic { color: var(--muted); }
.audio-button { margin: 26px auto 0; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--accent); }
.answer-reveal { max-width: 620px; margin: 34px auto 0; text-align: left; }
.meaning { font-size: 23.73px; }
.definition { color: var(--muted); }
.definition span { margin-right: 8px; color: var(--pale); font-size: 12.43px; }
.answer-reveal blockquote { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); font-family: var(--reading-font); font-size: 20.34px; line-height: 1.836; }
.answer-reveal blockquote small { display: block; margin-top: 8px; color: var(--muted); font-family: var(--ui-font); font-size: 14.69px; }
.rating-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 18px; }
.rating-row button { min-height: 66px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; }
.rating-row strong, .rating-row small { display: block; }
.rating-row small { color: var(--muted); font-size: 12.43px; }

/* Review & progress */
.review-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.review-number { font-family: var(--reading-font); font-size: 103.96px; line-height: 0.864; color: var(--accent-strong); }
.review-number small { display: block; margin-top: 12px; color: var(--pale); font-family: var(--ui-font); font-size: 14.69px; }
.review-actions { display: grid; gap: 10px; margin-top: 28px; }
.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-grid > div { padding: 20px; border-right: 1px solid var(--line); }
.summary-grid > div:last-child { border-right: 0; }
.summary-grid span { display: block; color: var(--pale); font-size: 13.56px; }
.summary-grid strong { display: block; margin-top: 6px; font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }
.progress-page-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; }
.progress-chart { min-height: 260px; display: flex; align-items: end; gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.progress-chart span { flex: 1; min-height: 8px; background: var(--accent-soft); border-top: 2px solid var(--accent); }
.progress-chart small { display: block; margin-top: 8px; color: var(--pale); font-size: 11.3px; }
.progress-stat-list { border-top: 1px solid var(--line); }
.progress-stat-list div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.progress-stat-list span { color: var(--muted); }

/* Complete / empty / loading */
.result-panel { max-width: 650px; margin: 50px auto 0; text-align: center; }
.result-level { margin: 20px 0 12px; font-family: var(--reading-font); font-size: 85.88px; line-height: 1.08; color: var(--accent-strong); }
.result-level small { font-size: 22.6px; color: var(--pale); }
.result-panel p { color: var(--muted); line-height: 1.944; }
.completion-summary { display: grid; grid-template-columns: repeat(3,1fr); margin: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.completion-summary div { padding: 18px; border-right: 1px solid var(--line); }
.completion-summary div:last-child { border-right: 0; }
.completion-summary span { display: block; color: var(--pale); font-size: 13.56px; }
.completion-summary strong { display: block; margin-top: 5px; font-size: 27.12px; font-weight: 550; }
.empty-state { padding: 52px 20px; text-align: center; color: var(--muted); }
.empty-state h2 { margin: 18px 0 8px; color: var(--text); font-family: var(--reading-font); font-weight: 500; }
.empty-mark { width: 48px; height: 48px; margin: 0 auto; display: grid; place-items: center; color: var(--accent); }
.empty-inline { padding: 18px 0; color: var(--muted); }
.skeleton-card, .admin-loading { padding: 24px 0; }
.skeleton-line { height: 12px; margin: 12px 0; border-radius: 3px; background: linear-gradient(90deg, var(--surface-3), white, var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }
.skeleton-line.wide { width: 78%; }
.skeleton-line.short { width: 42%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Method explanation */
.method-why { margin: 38px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-why h2 { margin: 7px 0 10px; font-family: var(--reading-font); font-weight: 500; }
.method-why p { margin: 0; color: var(--muted); line-height: 1.922; }
.method-why small { display: block; margin-top: 12px; color: var(--pale); }
.difficulty-switch { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.difficulty-switch-copy strong, .difficulty-switch-copy small { display: block; }
.difficulty-switch-copy small { color: var(--muted); }
.difficulty-options { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.difficulty-options button { min-height: 34px; border: 0; border-radius: 4px; background: transparent; padding: 0 10px; color: var(--muted); }
.difficulty-options button.active { background: var(--accent-soft); color: var(--accent-strong); }
.auth-grid { grid-template-columns:minmax(0,620px); justify-content:center; }
.auth-panel-single { min-height:0; }
.auth-links { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; color:var(--muted); font-size:14px; }
.grammar-hub,.grammar-lesson { max-width: 1080px; margin: 0 auto; }
.grammar-hub-intro { display:flex; justify-content:space-between; align-items:end; gap:28px; padding:8px 0 30px; border-bottom:1px solid var(--line); }
.grammar-hub-intro h2 { margin:8px 0; font-family:var(--reading-font); font-weight:500; }
.grammar-hub-intro p { max-width:680px; margin:0; color:var(--muted); }
.grammar-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px; }
.grammar-topic-grid button { display:grid; grid-template-columns:1fr auto; gap:7px 18px; min-height:150px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); text-align:left; }
.grammar-topic-grid button:hover { border-color:var(--accent); background:var(--accent-soft); }
.grammar-topic-grid small { color:var(--accent-strong); font-weight:650; }
.grammar-topic-grid strong { grid-column:1; font-family:var(--reading-font); font-size:22px; font-weight:500; }
.grammar-topic-grid span { grid-column:1; color:var(--muted); font-size:14px; line-height:1.65; }
.grammar-topic-grid svg { grid-column:2; grid-row:1 / span 3; align-self:center; color:var(--accent); width:20px; }
.grammar-rule-card { margin:22px 0; padding:34px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.grammar-rule-card h2 { max-width:820px; margin:10px 0 28px; font-family:var(--reading-font); font-weight:500; line-height:1.5; }
.grammar-pattern,.grammar-example { padding-top:18px; border-top:1px solid var(--line); }
.grammar-pattern span,.grammar-example span { display:block; color:var(--pale); font-size:13px; margin-bottom:6px; }
.grammar-pattern strong { color:var(--accent-strong); font-size:20px; }
.grammar-example { margin-top:18px; }.grammar-example p { margin:0; font-size:20px; }
@media (max-width:640px) { .grammar-hub-intro { align-items:stretch; flex-direction:column; }.grammar-topic-grid { grid-template-columns:1fr; }.grammar-rule-card { padding:24px 18px; } }
.difficulty-options-jlpt { gap: 4px; }
.difficulty-options-jlpt button { min-width: 48px; font-weight: 650; }

/* Shadowing / Army */
.shadow-mode-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.shadow-mode-card { min-height: 190px; display: flex; align-items: flex-end; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }
.shadow-mode-card:hover { border-color: var(--line-strong); }
.shadow-mode-card strong, .shadow-mode-card small, .shadow-mode-card em { display: block; }
.shadow-mode-card strong { margin-top: 5px; font-family: var(--reading-font); font-size: 27.12px; font-weight: 500; }
.shadow-mode-card small { color: var(--accent); }
.shadow-mode-card em { margin-top: 6px; color: var(--muted); font-style: normal; }
.shadow-mode-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent); }
.method-strip { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-strip > div { padding: 18px; border-right: 1px solid var(--line); }
.method-strip > div:last-child { border-right: 0; }
.method-strip strong, .method-strip span, .method-strip small { display: block; }
.method-strip strong { color: var(--accent); font-size: 13.56px; }
.method-strip span { margin-top: 8px; font-weight: 650; }
.method-strip small { margin-top: 4px; color: var(--muted); }
.shadow-stage, .army-stage, .listening-stage { padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.shadow-text, .army-prompt { margin: 26px auto 12px; max-width: 760px; font-family: var(--reading-font); font-size: clamp(31.64px,5.65vw,47.46px); line-height: 1.458; }
.shadow-toolbar, .shadow-actions, .army-controls, .record-actions, .audio-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.segmented button { min-height: 34px; border: 0; background: transparent; border-radius: 4px; padding: 0 10px; }
.segmented button.active { background: var(--accent-soft); color: var(--accent-strong); }
.loop-settings, .record-panel { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* Blog */
.blog-hub { max-width: 1180px; margin: 0 auto; }
.blog-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 20px; align-items: center; margin: 28px 0; }
.blog-search { position: relative; }
.blog-search input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.blog-search svg { position: absolute; left: 15px; top: 14px; color: var(--pale); }
.blog-category-row { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-category-row button { min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: 0 12px; color: var(--muted); }
.blog-category-row button.active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px 24px; }
.blog-card { min-width: 0; }
.blog-card-link { display: block; color: inherit; text-decoration: none; }
.blog-card-media { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); background: var(--surface-3); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 260ms var(--ease); }
.blog-card:hover .blog-card-media img { transform: scale(1.018); }
.blog-card-body { padding: 17px 2px 0; }
.blog-card-meta { display: flex; gap: 10px; color: var(--pale); font-size: 13.56px; }
.blog-card h2 { margin: 9px 0 8px; font-family: var(--reading-font); font-weight: 500; font-size: 25.99px; line-height: 1.458; }
.blog-card p { margin: 0; color: var(--muted); }
.blog-card-action { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--accent-strong); font-weight: 600; font-size: 15.82px; }
.blog-detail { max-width: 900px; margin: 0 auto; }
.blog-hero-cover { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; border-radius: var(--radius-lg); margin: 28px 0 38px; background: var(--surface-2); }
.blog-detail-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--pale); font-size: 14.69px; }
.article-body { font-family: var(--reading-font); font-size: 22px; line-height: 1.9; }
.article-body h1 { margin: 0 0 20px; font-size: 47.46px; line-height: 1.296; }
.article-body h2 { margin: 48px 0 16px; font-size: 32.77px; }
.article-body p { margin: 0 0 22px; }
.article-body li { margin: 8px 0; }
.article-tool-cta { margin-top: 42px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tool-link-grid { display: grid; gap: 10px; }
.tool-link-grid button { min-height: 84px; padding: 15px 18px; }
.tool-link-grid strong { font-size: 18px; }
.tool-link-grid small { font-size: 15px; line-height: 1.55; }

/* Forms / account */
.form-group { display: grid; gap: 7px; margin-bottom: 16px; }
.form-group label, .form-group > span { color: var(--muted); font-size: 14.69px; }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-grid, .auth-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.auth-panel { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.auth-panel h2 { font-family: var(--reading-font); font-weight: 500; }
.checkbox-field, .contact-consent { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); }
.contact-form { max-width: 760px; }
.settings-list > button > span:first-child { flex: 1; }

/* CMS */
.admin-shell { max-width: 1240px; margin: 0 auto; }
.admin-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 14px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.admin-tabs button { min-height: 38px; flex: 0 0 auto; border: 0; background: transparent; border-radius: var(--radius-sm); padding: 0 12px; color: var(--muted); }
.admin-tabs button.active { background: var(--accent-soft); color: var(--accent-strong); }
.admin-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0 16px; }
.admin-toolbar strong, .admin-toolbar small { display: block; }
.admin-toolbar small { margin-top: 3px; color: var(--pale); }
.admin-filterbar { display: grid; grid-template-columns: 1fr 190px; gap: 10px; margin-bottom: 14px; }
.admin-filterbar label { position: relative; }
.admin-filterbar label svg { position: absolute; left: 12px; top: 12px; color: var(--pale); }
.admin-filterbar label input { padding-left: 40px; }
.admin-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 15.82px; }
.admin-table th { padding: 13px 14px; background: var(--surface-2); color: var(--muted); font-weight: 600; text-align: left; position: sticky; top: 0; }
.admin-table td { padding: 14px; border-top: 1px solid var(--line); vertical-align: top; }
.admin-table tr:hover td { background: color-mix(in srgb, var(--surface-3) 56%, white); }
.admin-thumb { width: 64px; aspect-ratio: 16/10; object-fit: cover; border-radius: 4px; }
.admin-row-actions { display: flex; gap: 8px; white-space: nowrap; }
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; }
.admin-editor { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 38px; margin-top: 28px; }
.admin-editor-title { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 24px; }
.admin-editor-title h2 { margin-top: 4px; font-family: var(--reading-font); font-weight: 500; }
.autosave-status { color: var(--pale); font-size: 13.56px; }
.admin-editor-side { position: sticky; top: 90px; align-self: start; padding: 20px; border-left: 1px solid var(--line); color: var(--muted); font-size: 14.69px; }
.schedule-box { margin: 26px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); }
.schedule-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sticky-editor-actions { position: sticky; bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); }
.admin-status { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-status span { color: var(--accent); }

/* Theme Studio */
.theme-studio { max-width: 1180px; margin: 0 auto; }
.theme-workspace { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: 42px; margin-top: 28px; }
.theme-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.theme-color-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.theme-color-field { display: grid; grid-template-columns: 1fr 42px auto; gap: 10px; align-items: center; padding: 10px 0; }
.theme-color-field input { width: 42px; height: 32px; border: 0; background: transparent; }
.theme-color-field code { color: var(--pale); }
.theme-select-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.theme-preview { position: sticky; top: 90px; align-self: start; }
.theme-preview-card { margin: 12px 0 24px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.theme-preview-card h2 { margin: 9px 0; font-family: var(--reading-font); font-weight: 500; }

/* Footer / notices */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); background: #FBFAF7; }
.footer-inner { max-width: var(--content); margin: 0 auto; padding: 40px 44px; }
.footer-brand { display: grid; grid-template-columns: 180px minmax(0,520px); gap: 24px; align-items: start; }
.footer-brand strong { font-size: 20.34px; }
.footer-brand p { margin: 0; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; }
.site-footer nav button { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: 14.69px; }
.footer-note { display: flex; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--pale); font-size: 12.43px; }
.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; max-width: 360px; padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--text); color: white; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.toast.show { opacity: 1; transform: none; }
.cookie-banner { position: fixed; z-index: 110; left: calc(var(--sidebar) + 24px); right: 24px; bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; color: var(--muted); }
.cookie-banner div { display: flex; flex: 0 0 auto; gap: 8px; }

/* Misc existing components */
.commerce-panel, .account-bar, .category-feature, .category-index, .category-list, .category-row, .sentence-library-summary, .shadow-word-start, .army-principle, .principle-grid, .army-summary { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.category-row, .category-list button { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; padding: 16px 0; }
.principle-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.principle-mark { color: var(--accent); }
.audio-main { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.audio-main small { display: block; font-size: 11.3px; }

/* Responsive */
@media (max-width: 1180px) {
  :root { --sidebar: 204px; }
  .main-content { padding-inline: 30px; }
  .home-primary { grid-template-columns: 1fr; }
  .home-today { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
  .today-count { margin: 0; }
  .reader-layout.panel-open { grid-template-columns: minmax(0, var(--reading)) 300px; gap: 32px; }
}

@media (max-width: 900px) {
  .app-shell { display: block; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .app-sidebar { display: none; }
  .app-main { min-height: 100dvh; }
  .topbar { padding: 9px 18px; min-height: 60px; }
  .mobile-brand { display: block; }
  .mobile-brand .brand-word small { display: none; }
  .mobile-brand .brand-mark { width: 32px; height: 32px; }
  .topbar-context { display: none; }
  .account-button span { display: none; }
  .account-button { width: 40px; padding: 0; justify-content: center; }
  .main-content { padding: 28px 20px 56px; }
  .bottom-nav {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; min-height: 66px;
    display: grid; grid-template-columns: repeat(5,1fr); padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px);
  }
  .bottom-nav button { min-height: 60px; border: 0; background: transparent; color: var(--pale); }
  .bottom-nav button span { display: grid; place-items: center; }
  .bottom-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; }
  .bottom-nav small { display: block; margin-top: 3px; font-size: 11.3px; }
  .bottom-nav button.active { color: var(--accent-strong); }
  body[data-page-route="reading"] .bottom-nav { transform: translateY(110%); pointer-events: none; }
  .reading-progress-rail { left: 0; }
  .footer-inner { padding: 34px 20px 110px; }
  .cookie-banner { left: 14px; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; }
  .cookie-banner div { flex-wrap: wrap; }
  .home-progress-row { grid-template-columns: repeat(2,1fr); }
  .home-progress-row div:nth-child(2) { border-right: 0; }
  .home-progress-row div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .home-module-grid, .learning-module-grid { grid-template-columns: 1fr; }
  .reader-layout, .reader-layout.panel-open { display: block; }
  .reader-study-panel {
    position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; top: auto; opacity: 0; transform: translateY(102%); pointer-events: none;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .reader-layout.panel-open .reader-study-panel { opacity: 1; transform: none; pointer-events: auto; }
  .reader-panel-card { max-height: min(68dvh, 620px); overflow: auto; border-radius: 16px 16px 10px 10px; }
  .reader-panel-card::before { content:""; display:block; width:42px; height:4px; border-radius:999px; margin:0 auto 16px; background:var(--line-strong); }
  .reader-copy { font-size: 20.34px; line-height: 2.009; }
  .reader-title { font-size: 40.68px; }
  .reader-topline { margin-bottom: 30px; }
  .blog-grid { grid-template-columns: repeat(2,1fr); }
  .progress-page-grid, .theme-workspace, .admin-editor { grid-template-columns: 1fr; }
  .admin-editor-side, .theme-preview { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 20px 0; }
  .schedule-fields { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { padding-inline: 14px; }
  .language-switch select { max-width: 118px; min-height: 38px; }
  .main-content { padding: 22px 20px 50px; }
  .page-title { margin-bottom: 28px; }
  .page-title h1 { font-size: clamp(1.15rem, 5.2vw, 1.5rem); }
  .continue-reading { min-height: 390px; padding: 28px 24px; }
  .continue-reading h1 { font-size: 44.07px; }
  .continue-actions { align-items: stretch; flex-direction: column; }
  .continue-actions button { width: 100%; }
  .home-today { display: block; }
  .today-count { margin: 28px 0 16px; font-size: 72.32px; }
  .home-list-item { grid-template-columns: 74px minmax(0,1fr); }
  .home-list-action { display: none; }
  .home-list-copy strong { font-size: 20.34px; }
  .summary-grid, .completion-summary { grid-template-columns: 1fr; }
  .summary-grid > div, .completion-summary div { border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-grid > div:last-child, .completion-summary div:last-child { border-bottom: 0; }
  .rating-row { grid-template-columns: repeat(2,1fr); }
  .difficulty-switch { align-items: stretch; flex-direction: column; }
  .difficulty-options { display: grid; grid-template-columns: repeat(3,1fr); }
  .difficulty-options-jlpt { grid-template-columns: repeat(5,1fr); }
  .shadow-mode-grid, .blog-grid, .form-grid, .auth-grid, .theme-color-grid, .theme-select-grid, .principle-grid { grid-template-columns: 1fr; }
  .method-strip { grid-template-columns: repeat(2,1fr); }
  .method-strip > div:nth-child(2) { border-right: 0; }
  .method-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .blog-toolbar { grid-template-columns: 1fr; }
  .article-body { font-size: 20.34px; }
  .article-body h1 { font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
  .reader-tools-inline { overflow-x: auto; justify-content: flex-start; }
  .reader-meta { gap: 6px 12px; }
  .reader-topline { position: sticky; top: 58px; z-index: 15; margin-inline: -20px; padding: 8px 20px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); }
  .article-end-nav { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 18px; }
  .article-end-nav button { width: 100%; min-height: 46px; text-align: center; }
  .admin-filterbar { grid-template-columns: 1fr; }
  .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .footer-brand { grid-template-columns: 1fr; }
  .footer-note { flex-direction: column; }
  .toast { left: 14px; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.reader-page[data-font-scale="large"] .reader-copy { font-size: 23.73px; }
.reader-page[data-font-scale="extra"] .reader-copy { font-size: 25.99px; line-height: 2.074; }
.reader-panel-example small { display:block; margin-top:8px; color:var(--pale); font-family:var(--ui-font); font-size:13.56px; }
.progress-chart > div { flex:1; display:flex; flex-direction:column; justify-content:flex-end; min-height:160px; }
.progress-chart > div > span { width:100%; height:100%; }

/* =========================================================
   LexiLoop v5 — Calm Editorial Learning
   Reading-first desktop + purpose-built mobile layouts
   ========================================================= */
:root {
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #F2F0EA;
  --surface-3: #EFEEE9;
  --text: #242422;
  --muted: #6F706C;
  --pale: #969791;
  --line: #E4E2DC;
  --line-strong: #CBC8BF;
  --accent: #526D82;
  --accent-strong: #3F586B;
  --accent-soft: #E8EDF0;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --sidebar: 224px;
  --content: 1240px;
  --reading: 720px;
  --ui-font: Inter, "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --reading-font: "Noto Serif TC", "Noto Serif JP", "Source Han Serif TC", "Songti TC", Georgia, serif;
}

body { letter-spacing: .002em; }
h1, h2, h3 { text-wrap: balance; }
.primary-button, .secondary-button, .danger-button, .icon-button { border-radius: var(--radius-sm); }
.primary-button { box-shadow: none; }
.primary-button:hover { background: #334B5D; }
.main-content { padding-top: 38px; }
.app-sidebar { background: #F2F0EA; padding-inline: 18px; }
.app-sidebar .brand { padding: 2px 8px 18px; }
.brand-mark { width: 36px; height: 36px; }
.brand-mark svg { color: var(--accent); }
.desktop-nav { margin-top: 24px; }
.desktop-nav button, .sidebar-secondary button { border-radius: 6px; padding-inline: 10px; }
.desktop-nav button.active { background: rgba(82,109,130,.09); }
.topbar { background: rgba(255,255,255,.94); box-shadow: none; }
.site-footer { background: #F2F0EA; }

/* Home — editorial hierarchy, not a dashboard */
.editorial-home { max-width: 1120px; }
.home-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 80px;
  align-items: end;
  padding: 24px 0 48px;
  border-bottom: 1px solid var(--line);
}
.home-masthead h1 {
  max-width: 760px;
  margin: 12px 0 18px;
  font-family: var(--reading-font);
  font-size: clamp(51.98px, 6.215vw, 85.88px);
  font-weight: 500;
  line-height: 1.166;
  letter-spacing: -.045em;
}
.home-masthead > div:first-child > p { max-width: 620px; margin: 0; color: var(--muted); font-size: 19.21px; line-height: 1.944; }
.home-level-note { padding: 0 0 4px 24px; border-left: 1px solid var(--line); }
.home-level-note > span, .home-level-note > small { display: block; color: var(--pale); font-size: 13.56px; }
.home-level-note > strong { display: block; margin: 8px 0 4px; font-family: var(--reading-font); font-size: 42.94px; font-weight: 500; color: var(--accent-strong); }
.home-level-note .text-button { margin-top: 16px; font-size: 14.69px; }

.continue-editorial {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: 64px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.continue-cover { margin: 0; }
.continue-cover img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); }
.continue-cover figcaption { margin-top: 10px; color: var(--pale); font-size: 13.56px; letter-spacing: .04em; text-transform: uppercase; }
.continue-story h2 { max-width: 690px; margin: 12px 0 18px; font-family: var(--reading-font); font-size: clamp(42.94px, 4.52vw, 65.54px); font-weight: 500; line-height: 1.21; letter-spacing: -.035em; }
.continue-story > p { max-width: 650px; color: var(--muted); font-size: 19.21px; line-height: 1.998; }
.continue-story .progress-track { margin-top: 18px; }
.continue-story .continue-meta { margin-top: 22px; }

.today-brief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.today-brief h2 { margin: 4px 0; font-family: var(--reading-font); font-size: 29.38px; font-weight: 500; }
.today-brief p { margin: 0; color: var(--muted); }
.editorial-section { margin-top: 64px; }
.editorial-reading-list { border-top: 1px solid var(--line); }
.editorial-reading-row {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: background 170ms var(--ease), padding 170ms var(--ease);
}
.editorial-reading-row:hover { padding-inline: 12px; background: rgba(239,238,233,.72); }
.reading-index { color: var(--pale); font-family: var(--reading-font); font-size: 18.08px; }
.reading-row-copy strong { display: block; font-family: var(--reading-font); font-size: 24.86px; font-weight: 500; }
.reading-row-copy small { display: block; margin-top: 5px; color: var(--muted); }
.reading-row-arrow { color: var(--accent); }
.recommendation-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.recommendation-item { display: block; border: 0; padding: 0; background: transparent; text-align: left; }
.recommendation-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.recommendation-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms var(--ease); }
.recommendation-item:hover img { transform: scale(1.015); }
.recommendation-item small { display: block; margin-top: 14px; color: var(--pale); }
.recommendation-item strong { display: block; margin-top: 5px; font-family: var(--reading-font); font-size: 23.73px; font-weight: 500; line-height: 1.458; }
.recommendation-item em { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--accent); font-style: normal; font-size: 14.69px; }

/* Learning hub */
.learning-hub { max-width: 1120px; margin: 0 auto; }
.learning-resume {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr);
  gap: 40px;
  align-items: center;
  padding: 28px 0 44px;
  border-bottom: 1px solid var(--line);
}
.learning-resume-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); }
.learning-resume-copy h2 { margin: 10px 0 12px; font-family: var(--reading-font); font-size: 42.94px; font-weight: 500; }
.learning-resume-copy p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.944; }
.learning-resume-copy .button-row { margin-top: 22px; }
.learning-hub-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 72px; align-items: start; margin-top: 54px; }
.learning-group + .learning-group { margin-top: 58px; }
.learning-group-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.learning-group-head > span { color: var(--pale); font-family: var(--reading-font); font-size: 16.95px; }
.learning-group-head small { display: block; color: var(--pale); font-size: 12.43px; letter-spacing: .12em; text-transform: uppercase; }
.learning-group-head h2 { margin: 2px 0 0; font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }
.learning-tool-list { border-top: 1px solid var(--line); }
.learning-tool-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto 24px;
  gap: 16px;
  align-items: center;
  min-height: 92px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: background 170ms var(--ease), padding 170ms var(--ease);
}
.learning-tool-row:hover { padding-inline: 10px; background: rgba(239,238,233,.7); }
.learning-tool-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent); }
.learning-tool-icon svg { width: 21px; height: 21px; }
.learning-tool-copy strong { display: block; font-size: 19.21px; font-weight: 620; }
.learning-tool-copy small { display: block; margin-top: 4px; color: var(--muted); }
.learning-tool-meta { color: var(--pale); font-size: 13.56px; white-space: nowrap; }
.learning-tool-arrow { color: var(--accent); }
.learning-plan-aside { position: sticky; top: 96px; padding-left: 28px; border-left: 1px solid var(--line); }
.learning-level { display: flex; align-items: end; justify-content: space-between; margin: 12px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.learning-level small { color: var(--pale); }
.learning-level strong { font-family: var(--reading-font); font-size: 42.94px; font-weight: 500; color: var(--accent-strong); }
.learning-plan-aside .difficulty-switch { display: block; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--line); }
.learning-plan-aside .difficulty-options { margin-top: 13px; display: grid; grid-template-columns: repeat(3,1fr); }
.learning-plan-stats { padding: 18px 0; border-bottom: 1px solid var(--line); }
.learning-plan-stats > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; }
.learning-plan-stats span { color: var(--muted); }
.learning-plan-stats strong { font-weight: 620; }
.learning-plan-note { padding-top: 20px; }
.learning-plan-note p { color: var(--muted); font-size: 14.69px; line-height: 1.836; }

/* Practice pages — focused main task + quiet principle */
.practice-page { max-width: 1080px; margin: 0 auto; }
.practice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 68px; align-items: start; }
.practice-layout-wide { grid-template-columns: minmax(0, 1fr) 300px; }
.practice-main { min-width: 0; }
.practice-aside { position: sticky; top: 96px; padding-left: 24px; border-left: 1px solid var(--line); }
.practice-aside h2 { margin: 8px 0 12px; font-family: var(--reading-font); font-size: 27.12px; font-weight: 500; line-height: 1.404; }
.practice-aside p { color: var(--muted); font-size: 15.82px; line-height: 1.944; }
.practice-fit { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.practice-fit strong, .practice-fit span { display: block; }
.practice-fit strong { font-size: 13.56px; letter-spacing: .08em; text-transform: uppercase; }
.practice-fit span { margin-top: 5px; color: var(--muted); font-size: 14.69px; line-height: 1.836; }
.practice-aside-meta { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.practice-aside-meta span { color: var(--pale); font-size: 13.56px; }
.practice-aside-meta strong { font-weight: 620; }
.practice-progress { margin-bottom: 26px; }
.practice-progress > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 14.69px; }
.editorial-study-card { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px; border: 1px solid var(--line); background: var(--surface); }
.editorial-study-card .study-word { font-family: var(--reading-font); font-size: clamp(54.24px,7.91vw,88.14px); font-weight: 500; letter-spacing: -.035em; }
.editorial-study-card .phonetic { margin-top: 12px; color: var(--muted); }
.editorial-study-card .audio-button { margin-top: 26px; }
.editorial-study-card .answer-reveal { width: min(100%, 610px); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.editorial-question { min-height: 260px; display: flex; flex-direction: column; justify-content: center; padding: 38px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.editorial-question h2 { max-width: 720px; font-family: var(--reading-font); font-size: 38.42px; font-weight: 500; line-height: 1.566; }
.editorial-audio-stage { min-height: 320px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); background: var(--surface); }
.editorial-audio-stage h2 { margin: 8px 0; font-family: var(--reading-font); font-size: 38.42px; font-weight: 500; }
.editorial-audio-stage p { margin: 0; color: var(--muted); }
.answer-grid { margin-top: 18px; }
.answer-button { min-height: 58px; border-radius: 6px; }
.rating-row { margin-top: 14px; }
.rating-row button { border-radius: 6px; }

/* Method pages share the same calm learning language */
.learning-method-page { max-width: 1040px; }
.learning-method-page .method-why, .learning-method-page .method-principle { background: transparent; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 26px 0; }
.learning-method-page .shadow-mode-card { border-radius: 10px; box-shadow: none; }
.practice-session-page .shadow-stage, .practice-session-page .army-stage { background: var(--surface); border: 1px solid var(--line); padding-inline: 32px; }
.practice-session-page .record-panel { margin-top: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Reader refinements */
.reader-title { font-weight: 500; letter-spacing: -.035em; }
.reader-copy { text-wrap: pretty; }
.reader-study-panel .reader-panel-card { box-shadow: 0 18px 50px rgba(40,43,40,.07); }
.reader-panel-word { font-family: var(--reading-font); }
.reader-question .answer-grid { max-width: 720px; }

/* Brand assets display (available to CMS/about without changing main navigation) */
.brand-variant-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.brand-variant { padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.brand-variant img { width: 72px; height: 72px; color: var(--accent); }

@media (max-width: 1180px) {
  .home-masthead { gap: 44px; }
  .continue-editorial { gap: 42px; }
  .learning-hub-layout { gap: 44px; }
  .practice-layout { gap: 42px; }
}

@media (max-width: 900px) {
  .main-content { padding-top: 24px; }
  .home-masthead { grid-template-columns: 1fr; gap: 28px; padding-top: 4px; }
  .home-level-note { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .home-level-note small, .home-level-note .text-button { grid-column: 1 / -1; }
  .continue-editorial { grid-template-columns: minmax(170px,.58fr) minmax(0,1.42fr); gap: 30px; }
  .recommendation-strip { gap: 18px; }
  .learning-hub-layout, .practice-layout, .practice-layout-wide { grid-template-columns: 1fr; gap: 40px; }
  .learning-plan-aside, .practice-aside { position: static; padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .learning-resume { grid-template-columns: 160px minmax(0,1fr); gap: 26px; }
}

@media (max-width: 640px) {
  .home-masthead { padding-bottom: 34px; }
  .home-masthead h1 { font-size: 47.46px; line-height: 1.21; }
  .home-masthead > div:first-child > p { font-size: 18.08px; }
  .continue-editorial { display: block; padding: 38px 0; }
  .continue-cover { width: 46%; max-width: 190px; margin-bottom: 26px; }
  .continue-story h2 { font-size: 40.68px; }
  .continue-story > p { font-size: 18.08px; }
  .today-brief { align-items: stretch; flex-direction: column; }
  .today-brief button { width: 100%; }
  .editorial-section { margin-top: 48px; }
  .editorial-reading-row { grid-template-columns: 38px minmax(0,1fr) 20px; gap: 12px; }
  .reading-row-copy strong { font-size: 21.47px; }
  .recommendation-strip { grid-template-columns: 1fr; gap: 30px; }
  .recommendation-item { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 18px; align-items: center; }
  .recommendation-item small { margin-top: 0; }
  .recommendation-cover { aspect-ratio: 4 / 5; }
  .learning-resume { display: block; padding-top: 0; }
  .learning-resume-art { width: 42%; max-width: 160px; margin-bottom: 24px; }
  .learning-resume-copy h2 { font-size: 36.16px; }
  .learning-hub-layout { margin-top: 40px; }
  .learning-group + .learning-group { margin-top: 46px; }
  .learning-tool-row { grid-template-columns: 38px minmax(0,1fr) 22px; min-height: 86px; gap: 12px; }
  .learning-tool-meta { display: none; }
  .learning-tool-copy strong { font-size: 18.08px; }
  .practice-page .page-title h1 { font-size: 38.42px; }
  .practice-aside { order: 2; }
  .editorial-study-card { min-height: 390px; padding: 32px 22px; }
  .editorial-study-card .study-word { font-size: 58.76px; }
  .editorial-question { min-height: 220px; padding-block: 28px; }
  .editorial-question h2, .editorial-audio-stage h2 { font-size: 31.64px; }
  .editorial-audio-stage { min-height: 280px; padding-inline: 20px; }
  .practice-session-page .shadow-stage, .practice-session-page .army-stage { padding-inline: 18px; }
  .brand-variant-grid { grid-template-columns: 1fr; }
}
body[data-page-route="vocab"] .lesson-shell,
body[data-page-route="shadowing"] .lesson-shell,
body[data-page-route="army"] .lesson-shell,
body[data-page-route="review"] .lesson-shell,
body[data-page-route="progress"] .lesson-shell { max-width: 1040px; }

/* v5.1 product architecture and interaction repair */
html[data-signed-in="false"] .signed-in-only{display:none!important}.public-home,.dashboard-page,.language-portal,.start-page,.exam-page,.reading-library{max-width:1180px;margin:0 auto}.public-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:64px;padding:64px 0 72px;border-bottom:1px solid var(--line)}.public-hero h1{font-family:var(--reading-font);font-weight:500;font-size:clamp(49.72px,5.876vw,81.36px);line-height:1.166;letter-spacing:-.035em;max-width:850px;margin:12px 0 24px}.public-hero p{font-size:21.47px;line-height:1.89;max-width:720px}.public-hero-note{align-self:end;border-left:1px solid var(--line);padding-left:32px}.public-hero-note ol{padding-left:20px;line-height:2.16}.vocab-test-cta{margin-top:32px;width:min(520px,100%);display:flex;gap:18px;align-items:center;text-align:left;padding:20px;border:1px solid var(--accent);background:var(--surface);border-radius:10px;color:var(--text)}.vocab-test-cta>span:first-child{display:grid;place-items:center;width:46px;height:46px;background:var(--accent-soft);color:var(--accent)}.vocab-test-cta .ui-icon{width:22px;height:22px}.vocab-test-cta>span:last-child{display:grid;gap:3px;flex:1}.vocab-test-cta em{color:var(--accent);font-style:normal}.public-methods,.public-features,.public-blog,.public-account-cta{padding:64px 0;border-bottom:1px solid var(--line)}.public-methods>div:last-child{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.public-methods article{padding-top:18px;border-top:1px solid var(--line)}.public-methods article>span{font-size:13.56px;color:var(--pale)}.public-methods h3{font-size:21.47px;margin:18px 0 10px}.public-methods p,.public-features p{color:var(--muted);line-height:1.836}.public-features{display:grid;grid-template-columns:1fr 1fr;gap:64px}.public-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.public-blog-grid>button{background:none;border:0;border-top:1px solid var(--line);padding:22px 0;text-align:left}.public-blog-grid h3{font-family:var(--reading-font);font-weight:500;font-size:27.12px;line-height:1.458}.public-blog-grid p{color:var(--muted);line-height:1.782}.public-blog-grid span{color:var(--accent)}.public-account-cta{display:flex;justify-content:space-between;gap:32px;align-items:center}.public-account-cta p{max-width:760px;color:var(--muted)}
.sidebar-language-entries{display:grid;gap:8px;padding:20px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.sidebar-language-entries>span{font-size:12.43px;text-transform:uppercase;letter-spacing:.12em;color:var(--pale);padding:0 8px}.sidebar-language-entries button,.language-entry-buttons button,.language-mini-actions button,.dashboard-language-actions button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:6px}.sidebar-language-entries button{display:flex;align-items:center;gap:10px;padding:10px}.sidebar-language-entries button strong{display:grid;place-items:center;width:28px;height:28px;background:var(--surface-2);font-size:13.56px}.language-entry-buttons{display:flex;gap:6px}.language-entry-buttons button{padding:8px 12px}.sidebar-note{font-size:12.43px;color:var(--pale);line-height:1.62;padding:10px 18px}.dashboard-head{display:flex;justify-content:space-between;gap:32px;align-items:end;padding:28px 0 32px}.dashboard-head h1{font-family:var(--reading-font);font-weight:500;font-size:45.2px;margin:8px 0}.dashboard-language-actions{display:flex;gap:6px}.dashboard-language-actions button{padding:9px 14px}.dashboard-language-actions .active{background:var(--accent);border-color:var(--accent);color:#fff}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:24px}.dashboard-grid>section,.dashboard-grid>aside{border:1px solid var(--line);background:var(--surface);padding:24px;border-radius:10px}.dashboard-trend{min-height:360px}.dashboard-today{display:flex;flex-direction:column}.dashboard-due-number{font-size:72.32px;font-family:var(--reading-font);margin:20px 0}.dashboard-due-number small{font-family:var(--ui-font);font-size:14.69px;color:var(--muted);margin-left:8px}.dashboard-chart{margin-top:24px}.dashboard-chart svg{width:100%;height:210px;overflow:visible}.dashboard-chart .chart-base{stroke:var(--line);stroke-width:.5}.dashboard-chart .chart-line{fill:none;stroke:var(--accent);stroke-width:1.8;vector-effect:non-scaling-stroke}.dashboard-chart circle{fill:var(--surface);stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke}.dashboard-chart>div{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.dashboard-chart>div span{display:grid;text-align:center;color:var(--muted)}.dashboard-chart strong{font-size:14.69px;color:var(--text)}.dashboard-next{grid-column:1/3;display:flex;justify-content:space-between;align-items:center}.dashboard-recent{grid-column:1/3}.dashboard-reading-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.dashboard-reading-list button{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:none}.dashboard-reading-list span{display:grid;gap:4px}.dashboard-reading-list small{color:var(--muted)}.dashboard-locked{max-width:760px;margin:0 auto}.language-portal-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;padding:48px 0;border-bottom:1px solid var(--line)}.language-code.large{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--accent);color:var(--accent);font-weight:700}.language-portal-hero h2{font-family:var(--reading-font);font-weight:500;font-size:45.2px;line-height:1.35}.language-portal-hero p{font-size:20.34px;line-height:1.89;color:var(--muted)}.language-portal-hero aside{border-left:1px solid var(--line);padding-left:28px;display:flex;flex-direction:column;justify-content:center}.language-portal-hero aside strong{font-family:var(--reading-font);font-size:63.28px}.language-portal-tools{padding:48px 0}.language-portal-tools>div{display:grid;grid-template-columns:1fr 1fr}.language-portal-tools button{display:grid;grid-template-columns:36px 1fr 24px;align-items:center;text-align:left;gap:14px;padding:20px 0;border:0;border-bottom:1px solid var(--line);background:none}.language-portal-tools button>span{color:var(--accent)}.language-portal-tools button strong,.language-portal-tools button small{grid-column:2}.start-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px}.start-layout>main{padding:32px 0}.start-layout>aside{border-left:1px solid var(--line);padding:32px 0 32px 32px}.start-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);color:var(--accent);margin-bottom:28px}.start-layout main>h2{font-family:var(--reading-font);font-weight:500;font-size:40.68px;line-height:1.458}.start-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:32px 0}.start-facts>div{background:var(--surface);padding:18px;display:grid;gap:8px}.start-facts span{font-size:13.56px;color:var(--muted)}.start-options{margin:28px 0}.start-options label{display:flex;padding:16px 0;border-bottom:1px solid var(--line);gap:12px}.start-options label span{display:grid;gap:4px}.start-options small{color:var(--muted)}.start-actions{display:flex;gap:12px;margin-top:24px}.learning-tool-row{cursor:pointer}.reading-library-head,.exam-intro{display:flex;justify-content:space-between;gap:32px;align-items:start;padding:24px 0 32px}.reading-library-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}.reading-library-card{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:28px 0;border-top:1px solid var(--line)}.reading-card-number{font-size:13.56px;color:var(--pale)}.reading-library-card h3{font-family:var(--reading-font);font-weight:500;font-size:27.12px}.reading-library-card p{color:var(--muted);line-height:1.782}.exam-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.exam-form-grid button{display:grid;text-align:left;padding:24px;border:1px solid var(--line);background:var(--surface);border-radius:10px;gap:8px}.exam-form-grid button>span{font-size:12.43px;letter-spacing:.12em;color:var(--pale)}.exam-form-grid button strong{font-family:var(--reading-font);font-size:27.12px}.exam-form-grid button small{color:var(--muted)}.exam-skill{margin-top:24px;color:var(--accent);font-size:13.56px;text-transform:uppercase;letter-spacing:.12em}.test-credentials-panel{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:center;margin:16px 0;padding:18px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:8px}.test-credentials-panel strong,.test-credentials-panel small{grid-column:1/-1}.test-credentials-panel code{background:var(--surface);padding:8px 10px;overflow-wrap:anywhere}.difficulty-options button{cursor:pointer;position:relative;z-index:1}.difficulty-options button:focus-visible,.back-button:focus-visible,[data-route]:focus-visible,[data-action]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}.back-button,[data-route],[data-action],[data-language-entry],[data-start-tool],[data-start-exam],[data-exam-answer]{touch-action:manipulation}.brand-mark svg{width:26px;height:26px}.brand-mark{overflow:visible;display:grid;place-items:center;align-self:center}
@media(max-width:900px){.public-hero,.public-features,.language-portal-hero,.start-layout,.dashboard-grid{grid-template-columns:1fr}.public-methods>div:last-child,.public-blog-grid{grid-template-columns:1fr 1fr}.dashboard-next,.dashboard-recent{grid-column:auto}.dashboard-reading-list,.language-portal-tools>div,.reading-library-grid,.exam-form-grid{grid-template-columns:1fr}.start-layout>aside,.language-portal-hero aside{border-left:0;border-top:1px solid var(--line);padding-left:0}.language-entry-buttons{display:none}}
@media(max-width:640px){.public-home,.dashboard-page,.language-portal,.start-page,.exam-page,.reading-library{padding:0 20px}.public-hero{padding:32px 0 44px;gap:36px}.public-hero h1{font-size:45.2px}.public-methods,.public-features,.public-blog,.public-account-cta{padding:42px 0}.public-methods>div:last-child,.public-blog-grid{grid-template-columns:1fr}.public-account-cta,.dashboard-head,.dashboard-next,.reading-library-head,.exam-intro{align-items:stretch;flex-direction:column}.dashboard-head{display:flex}.dashboard-grid>section,.dashboard-grid>aside{padding:20px}.dashboard-chart svg{height:160px}.dashboard-reading-list{grid-template-columns:1fr}.start-facts{grid-template-columns:1fr}.start-actions{flex-direction:column}.language-portal-hero h2,.start-layout main>h2{font-size:clamp(1.2rem,5.4vw,1.6rem)}.exam-form-grid{grid-template-columns:1fr}.sidebar-language-entries{display:none}.test-credentials-panel{grid-template-columns:1fr}.bottom-nav{padding-bottom:env(safe-area-inset-bottom)}}

/* v5.2 — four-skill navigation and guided writing */
.home-skill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.skill-entry-card {
  min-height: 164px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.skill-entry-card:hover,
.skill-entry-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.skill-entry-card > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent);
}
.skill-entry-card > span svg { width: 21px; height: 21px; }
.skill-entry-card strong { font-size: 19.21px; }
.skill-entry-card small { color: var(--muted); line-height: 1.728; }
.skill-entry-card em {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14.69px;
  font-style: normal;
  font-weight: 650;
}
.skill-entry-card em svg { width: 15px; height: 15px; }

.skill-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin: 12px 0 28px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.skill-hub-header h2 {
  margin: 5px 0 8px;
  font-family: var(--reading-font);
  font-size: clamp(31.64px, 4.52vw, 45.2px);
  font-weight: 500;
}
.skill-hub-header p { margin: 0; color: var(--muted); }
.dashboard-language-actions {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}
.dashboard-language-actions button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.dashboard-language-actions button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.writing-page { max-width: 1120px; margin: 0 auto; }
.writing-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 54px;
  align-items: start;
  margin-top: 30px;
}
.writing-layout-single { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.writing-topic-groups { display: grid; gap: 34px; margin-top: 26px; }
.writing-topic-picker { border-top: 1px solid var(--line); padding-top: 18px; }
.writing-topic-picker h2 { margin: 7px 0 18px; font-family: var(--reading-font); font-size: 32px; font-weight: 500; }
.writing-topic-picker > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.writing-topic-picker .primary-button { margin-top: 12px; }
.writing-topic-picker button { display: grid; gap: 7px; min-height: 136px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; transition: border-color .16s ease, transform .16s ease; }
.writing-topic-picker button:hover { border-color: var(--accent); transform: translateY(-2px); }
.writing-topic-picker small { color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.writing-topic-picker strong { font-size: 20px; }
.writing-topic-picker button span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.ielts-chart { margin: 22px 0; padding: 18px; border: 1px solid var(--line); background: #fbfcfc; }
.ielts-chart figcaption { color: var(--text); font-weight: 650; margin-bottom: 14px; }
.ielts-chart-bar svg { display: block; width: 100%; height: auto; }
.ielts-chart-bar .bar-grid path { fill: none; stroke: #d8d7d0; stroke-width: 1; }
.ielts-chart-bar text { fill: var(--muted); font: 15px var(--ui-font); }
.ielts-chart-bar .bar-legend rect:first-child, .ielts-chart-bar .year-2010 { fill: var(--accent); }
.ielts-chart-bar .bar-legend rect:nth-of-type(2), .ielts-chart-bar .year-2025 { fill: #c4a266; }
.ielts-chart-bar .bar-series text { fill: var(--text); font-size: 16px; font-weight: 650; }
.ielts-chart-bar .bar-axis-title { font-weight: 700; }
.ielts-chart-line svg { display: block; width: 100%; height: auto; }
.ielts-chart-line path { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.ielts-chart-line .north { stroke: var(--accent); stroke-width: 5; }
.ielts-chart-line .central { stroke: #9b9b90; stroke-width: 5; }
.ielts-chart-line .south { stroke: #c4a266; stroke-width: 5; }
.ielts-chart-line .axis text { fill: var(--muted); font: 14px var(--ui-font); }
.writing-prompt-list {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.writing-prompt-list > .section-kicker { padding: 16px 0 10px; }
.writing-prompt-button {
  width: 100%;
  min-height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.writing-prompt-button span { display: grid; gap: 3px; }
.writing-prompt-button small { color: var(--pale); }
.writing-prompt-button strong { font-weight: 620; }
.writing-prompt-button em { color: var(--accent); font-size: 13.56px; font-style: normal; }
.writing-prompt-button svg { width: 16px; height: 16px; color: var(--pale); }
.writing-prompt-button.active { color: var(--accent-strong); }
.writing-prompt-button.active strong { font-weight: 720; }
.writing-workspace { min-width: 0; }
.writing-brief {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.writing-brief > span { color: var(--accent); font-size: 13.56px; font-weight: 700; letter-spacing: .08em; }
.writing-brief h2 { margin: 8px 0 12px; font-family: var(--reading-font); font-size: 33.9px; font-weight: 500; }
.writing-brief p { color: var(--text); font-size: 19.21px; line-height: 1.89; }
.writing-brief ul { margin: 18px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.89; }
.writing-editor { display: grid; gap: 10px; margin-top: 24px; }
.writing-editor > span { font-weight: 650; }
.writing-editor textarea {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: 16px/1.8 var(--ui-font);
}
.writing-editor textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); }
.writing-editor small { color: var(--muted); }
.writing-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.writing-reference {
  margin-top: 30px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.writing-reference p { color: var(--text); font-size: 18.08px; line-height: 2.052; }
.writing-reference small { color: var(--muted); }
.writing-lesson { margin-top: 22px; padding: 24px 28px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.writing-lesson h3 { margin: 8px 0 15px; font-family: var(--reading-font); font-size: 25px; font-weight: 500; }
.writing-lesson ol { display: grid; gap: 12px; margin: 0; padding-left: 22px; }
.writing-lesson li { padding-left: 4px; }
.writing-lesson li strong { display: block; color: var(--accent-strong); }
.writing-lesson li span { color: var(--muted); line-height: 1.65; }
.writing-language-bank { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text); line-height: 1.7; }

[data-writing-prompt], [data-start-tool], [data-start-exam], [data-exam-answer] { touch-action: manipulation; }

@media (max-width: 900px) {
  .home-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-hub-header { align-items: start; flex-direction: column; }
  .writing-layout { grid-template-columns: 1fr; gap: 28px; }
  .writing-prompt-list { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .writing-prompt-list > .section-kicker { grid-column: 1 / -1; }

  .bottom-nav {
    display: flex;
    min-height: 68px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .bottom-nav::-webkit-scrollbar { display: none; }
  .bottom-nav button {
    flex: 0 0 72px;
    min-width: 72px;
    scroll-snap-align: start;
  }
}

@media (max-width: 620px) {
  .home-skill-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .skill-entry-card { min-height: 150px; padding: 14px; }
  .writing-prompt-list { grid-template-columns: 1fr; }
  .writing-brief { padding: 20px; }
  .writing-lesson { padding: 18px 20px; }
  .writing-actions { display: grid; grid-template-columns: 1fr; }
  .writing-actions button { width: 100%; }
  .writing-topic-picker > div { grid-template-columns: 1fr; }
  .writing-topic-picker h2 { font-size: 27px; }
  .writing-topic-picker button { min-height: 112px; padding: 16px; }
  .ielts-chart { padding: 13px; }
}


/* v5.2.2 — global interaction hardening */
.app-main,
.main-content,
#routeView,
#routeView > * {
  position: relative;
  pointer-events: auto;
}
#routeView { isolation: isolate; z-index: 1; }
button,
[role="button"],
label,
input,
select,
textarea,
[data-route],
[data-action],
[data-language-entry],
[data-start-tool],
[data-start-exam],
[data-exam-answer],
[data-difficulty],
[data-writing-prompt] {
  pointer-events: auto !important;
  touch-action: manipulation;
}
button,
[role="button"],
[data-route],
[data-action],
[data-language-entry],
[data-start-tool],
[data-start-exam],
[data-exam-answer],
[data-difficulty],
[data-writing-prompt] {
  position: relative;
  z-index: 2;
}
button > *,
[data-route] > *,
[data-action] > * > *,
[data-language-entry] > *,
[data-start-tool] > *,
[data-start-exam] > *,
[data-exam-answer] > *,
[data-difficulty] > *,
[data-writing-prompt] > *,
button svg,
button use {
  pointer-events: none !important;
}
.content-panel,
.learning-tool-list,
.learning-tool-row,
.difficulty-options,
.auth-panel,
.form-group,
.start-actions,
.button-row {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.learning-tool-row,
.difficulty-options button,
.auth-panel button,
.start-actions button,
.button-row button {
  -webkit-tap-highlight-color: rgba(82,109,130,.14);
}

@media (max-width: 900px) {
  html { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .app-shell { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .main-content { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    height: calc(68px + env(safe-area-inset-bottom));
    max-height: calc(68px + env(safe-area-inset-bottom));
    align-items: stretch;
    contain: layout paint;
  }
  .bottom-nav button { height: 67px; max-height: 67px; }
  .learning-tool-row,
  .start-actions,
  .difficulty-switch,
  .auth-panel button,
  .writing-actions {
    scroll-margin-bottom: calc(100px + env(safe-area-inset-bottom));
  }
}

/* v5.2.3 — calmer Army Method overview and clearer account verification */
.learning-method-page { max-width: 1120px; }
.army-principle {
  margin: 30px 0 24px;
  padding: 38px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: var(--surface) !important;
  box-shadow: 0 16px 42px rgba(36,36,34,.045);
}
.army-principle .principle-heading {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}
.army-principle .principle-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.army-principle .principle-mark svg { width: 23px; height: 23px; }
.army-principle .principle-heading h2 {
  max-width: 760px;
  margin: 7px 0 0;
  font-family: var(--reading-font);
  font-size: clamp(30.51px,3.39vw,42.94px);
  font-weight: 520;
  line-height: 1.382;
  letter-spacing: -.025em;
}
.army-principle > p {
  max-width: 880px;
  margin: 0 0 30px 64px;
  color: var(--muted);
  font-size: 18.08px;
  line-height: 2.106;
}
.army-principle .principle-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: 8px;
  padding: 0;
  border: 0;
}
.army-principle .principle-grid > div {
  min-height: 178px;
  padding: 21px 19px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}
.army-principle .principle-grid strong,
.army-principle .principle-grid span,
.army-principle .principle-grid small { display: block; }
.army-principle .principle-grid strong {
  color: var(--accent-strong);
  font-size: 13.56px;
  letter-spacing: .12em;
}
.army-principle .principle-grid span {
  margin-top: 17px;
  font-family: var(--reading-font);
  font-size: 25.99px;
  font-weight: 560;
}
.army-principle .principle-grid small {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.69px;
  line-height: 1.836;
}
.army-principle .method-fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
.army-principle .method-fit > div {
  padding: 20px 22px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
}
.army-principle .method-fit strong,
.army-principle .method-fit span { display: block; }
.army-principle .method-fit strong {
  margin-bottom: 7px;
  color: var(--accent-strong);
  font-size: 13.56px;
  letter-spacing: .08em;
}
.army-principle .method-fit span {
  color: var(--text);
  font-size: 15.82px;
  line-height: 1.89;
}
.army-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin: 0 0 52px;
  padding: 0;
  border: 0;
}
.army-summary > div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 112px;
  padding: 23px 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.army-summary span { color: var(--muted); font-size: 14.69px; }
.army-summary strong {
  font-family: var(--reading-font);
  font-size: 42.94px;
  font-weight: 520;
  line-height: 1.08;
}
.learning-method-page > .section-header {
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.learning-method-page > .section-header h2 {
  margin-top: 7px;
  font-family: var(--reading-font);
  font-size: clamp(35.03px,4.52vw,51.98px);
  font-weight: 500;
  line-height: 1.296;
  letter-spacing: -.03em;
}
.army-category-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  padding: 0;
  border: 0;
}
.army-category-list .category-row {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: start;
  gap: 16px;
  min-height: 164px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.army-category-list .category-row:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 34px rgba(36,36,34,.055);
}
.army-category-list .category-index {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-size: 13.56px;
  font-weight: 700;
}
.army-category-list .category-row > span:nth-child(2) { min-width: 0; }
.army-category-list .category-row strong,
.army-category-list .category-row small,
.army-category-list .category-row em { display: block; }
.army-category-list .category-row strong {
  font-family: var(--reading-font);
  font-size: 24.86px;
  font-weight: 560;
  line-height: 1.458;
}
.army-category-list .category-row small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.69px;
  line-height: 1.782;
}
.army-category-list .category-row em {
  margin-top: 16px;
  color: var(--pale);
  font-size: 13.56px;
  font-style: normal;
}
.army-category-list .category-row > svg {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--accent);
}
.army-category-list .category-feature {
  align-self: start;
  padding: 6px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12.43px;
  white-space: nowrap;
}
.learning-method-page > .notice.top-gap {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.account-auth-page { max-width: 980px; }
.account-auth-page .auth-grid { gap: 24px; }
.account-auth-page .auth-panel {
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(36,36,34,.035);
}
.account-auth-page .auth-panel h2 {
  margin: 7px 0 25px;
  font-size: 35.03px;
}
.account-auth-page .auth-panel > small {
  display: block;
  margin-top: -3px;
  color: var(--muted);
  line-height: 1.782;
}
.verification-page { max-width: 720px; }
.verification-card {
  margin-top: 28px;
  padding: 46px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
  box-shadow: 0 18px 44px rgba(36,36,34,.045);
}
.verification-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.verification-icon svg { width: 27px; height: 27px; }
.verification-card h1 {
  margin: 9px 0 14px;
  font-family: var(--reading-font);
  font-size: clamp(38.42px,5.65vw,54.24px);
  font-weight: 520;
}
.verification-card > p { max-width: 540px; margin: 0 auto 26px; color: var(--muted); line-height: 1.998; }
.verification-resend { max-width: 460px; margin: 26px auto 20px; text-align: left; }
.verification-card > .text-button { margin-top: 10px; }

@media (max-width: 900px) {
  .army-principle .principle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .army-category-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .army-principle { padding: 24px !important; border-radius: 14px !important; }
  .army-principle .principle-heading { gap: 13px; }
  .army-principle .principle-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .army-principle > p { margin-left: 0; font-size: 16.95px; }
  .army-principle .principle-grid,
  .army-principle .method-fit { grid-template-columns: 1fr; }
  .army-principle .principle-grid > div { min-height: auto; }
  .army-summary { grid-template-columns: 1fr; gap: 10px; margin-bottom: 40px; }
  .army-summary > div { min-height: 82px; }
  .army-category-list .category-row { grid-template-columns: 42px minmax(0,1fr); min-height: 0; padding: 19px; }
  .army-category-list .category-row > svg,
  .army-category-list .category-feature { grid-column: 2; justify-self: start; }
  .account-auth-page .auth-panel { padding: 24px; }
  .verification-card { padding: 32px 22px; }
}


.mcq-row { margin-top: 18px; }
.mcq-row button { text-align: left; padding: 14px 16px; }
.mcq-row strong { font-size: 20.34px; margin-bottom: 8px; }
.mcq-row small { font-size: 15.82px; line-height: 1.674; color: var(--text); }
.mcq-row button.is-correct { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 68%, white); }
.mcq-row button.is-wrong { border-color: #c96b6b; background: #fff4f4; }
.mcq-row button:disabled { opacity: 1; }

/* v5.2.6 — spacious Army Method overview */
.army-overview {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr);
  gap: clamp(34px,5vw,76px);
  align-items: stretch;
  margin: 38px 0 34px;
  padding: clamp(34px,5vw,64px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 20px 54px rgba(36,36,34,.045);
}
.army-overview-copy { align-self: center; }
.army-overview-copy h2 {
  max-width: 680px;
  margin: 12px 0 22px;
  font-family: var(--reading-font);
  font-size: clamp(38.42px,5.198vw,65.54px);
  font-weight: 500;
  line-height: 1.231;
  letter-spacing: -.04em;
}
.army-overview-copy > p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 18.08px;
  line-height: 2.106;
}
.army-use-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 32px;
}
.army-use-grid > div {
  min-height: 126px;
  padding: 20px 21px;
  border-radius: 14px;
  background: var(--surface-2);
}
.army-use-grid span,
.army-use-grid strong { display: block; }
.army-use-grid span {
  margin-bottom: 11px;
  color: var(--accent-strong);
  font-size: 13.56px;
  font-weight: 700;
  letter-spacing: .09em;
}
.army-use-grid strong {
  font-size: 16.95px;
  font-weight: 600;
  line-height: 1.782;
}
.army-flow-map {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
  padding: 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-2));
}
.army-flow-map > div {
  position: relative;
  min-height: 202px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.army-flow-map small {
  position: absolute;
  top: 17px;
  right: 18px;
  color: var(--pale);
  font-size: 13.56px;
  font-weight: 700;
  letter-spacing: .12em;
}
.army-flow-map > div > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.army-flow-map svg { width: 22px; height: 22px; }
.army-flow-map strong {
  display: block;
  font-family: var(--reading-font);
  font-size: 28.25px;
  font-weight: 560;
}
.army-flow-map p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14.69px;
  line-height: 1.782;
}
.army-summary { margin-top: 0; }
.army-category-list { gap: 20px; }
.army-category-list .category-row { min-height: 184px; padding: 27px; }
.auth-panel button[disabled] { cursor: wait; opacity: .62; }
@media (max-width: 960px) {
  .army-overview { grid-template-columns: 1fr; padding: 34px; }
  .army-flow-map { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .army-overview { margin-top: 24px; padding: 24px 20px; border-radius: 15px; }
  .army-overview-copy h2 { font-size: 40.68px; }
  .army-use-grid,
  .army-flow-map { grid-template-columns: 1fr; }
  .army-flow-map > div { min-height: 156px; }
}

/* v5.2.9 — independent vocabulary and grammar paths */
.home-core-paths {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.home-core-heading {
  padding-bottom: 8px;
}
.home-core-heading h2 {
  margin: 8px 0 10px;
  font-family: var(--reading-font);
  font-size: clamp(38.42px,4.52vw,58.76px);
  font-weight: 520;
  letter-spacing: -.035em;
}
.home-core-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.836;
}

.home-core-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  padding: clamp(28px,4vw,46px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(36,36,34,.035);
}
.home-core-card h2 {
  max-width: 580px;
  margin: 12px 0 18px;
  font-family: var(--reading-font);
  font-size: clamp(35.03px,3.503vw,50.85px);
  font-weight: 520;
  line-height: 1.274;
  letter-spacing: -.035em;
}
.home-core-card p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: 16.95px;
  line-height: 1.998;
}
.home-level-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.home-level-tags span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.43px;
}
.home-core-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Vocabulary library and difficulty browser */
.vocab-library-page { max-width: 1180px; }
.vocab-library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin: 32px 0 26px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.vocab-library-head h2 {
  margin: 8px 0 8px;
  font-family: var(--reading-font);
  font-size: clamp(35.03px,4.52vw,54.24px);
  font-weight: 520;
}
.vocab-library-head p { margin: 0; color: var(--muted); }
.vocab-library-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.vocab-stage-tabs {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
  margin: 0 0 24px;
}
.vocab-stage-tabs button {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  text-align: left;
}
.vocab-stage-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.vocab-stage-tabs strong,
.vocab-stage-tabs span,
.vocab-stage-tabs small { display: block; }
.vocab-stage-tabs strong { font-size: 16.95px; }
.vocab-stage-tabs span { font-size: 13.56px; }
.vocab-stage-tabs small { color: var(--muted); font-size: 12.43px; }
.vocab-list-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 30px 0 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.vocab-list-toolbar > div { display: grid; gap: 4px; }
.vocab-list-toolbar small { color: var(--muted); }
.vocab-inline-search { min-width: min(390px,100%); display: grid; gap: 7px; }
.vocab-inline-search span { font-size: 13.56px; color: var(--muted); }
.vocab-inline-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.vocab-inline-search em { min-height: 16px; color: var(--muted); font-size: 12.43px; font-style: normal; }
.vocab-search-overlay:not(:empty) {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.vocab-browser-list {
  border-top: 1px solid var(--line);
}
.vocab-browser-row {
  display: grid;
  grid-template-columns: 62px minmax(150px,.7fr) minmax(260px,1.5fr) 126px 42px;
  gap: 18px;
  align-items: center;
  min-height: 84px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.vocab-browser-rank {
  color: var(--pale);
  font-size: 12.43px;
  letter-spacing: .08em;
}
.vocab-browser-word { display: grid; gap: 3px; }
.vocab-browser-word strong {
  font-family: var(--reading-font);
  font-size: 25.99px;
  font-weight: 560;
}
.vocab-browser-word small { color: var(--muted); }
.vocab-browser-row p { margin: 0; color: var(--muted); line-height: 1.674; }
.vocab-browser-level {
  justify-self: start;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-size: 12.43px;
  white-space: nowrap;
}
.vocab-browser-audio {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
}
.vocab-browser-audio svg { width: 17px; height: 17px; }
.vocab-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 28px 0;
}
.vocab-pagination button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
}
.vocab-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.vocab-pagination svg { width: 15px; height: 15px; }
.vocab-pagination span { color: var(--muted); font-size: 13.56px; }
.vocab-library-note {
  margin-top: 20px;
  padding: 22px 24px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
}
.vocab-library-note p { margin: 7px 0 0; color: var(--muted); line-height: 1.836; }

/* Stable vocabulary answer layout: no vertical jump after choosing */
.vocab-question-card {
  height: 430px;
  min-height: 430px;
  justify-content: center;
}
.vocab-next-slot {
  width: min(260px,100%);
  height: 50px;
  display: grid;
  place-items: center;
  margin-top: 15px;
}
.vocab-next-inline {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.vocab-next-inline svg { width: 17px; height: 17px; }
.vocab-next-placeholder { display: block; width: 100%; height: 48px; visibility: hidden; }
.vocab-feedback-shell {
  height: 164px;
  min-height: 164px;
  margin-top: 16px;
  padding: 16px 18px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.vocab-feedback-shell .feedback { padding: 10px 12px; font-size: 16.4px; line-height: 1.58; }
.vocab-feedback-shell .feedback strong { font-size: 14.62px; }
.vocab-feedback-shell .answer-reveal {
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  padding: 0;
  text-align: left;
}
.vocab-feedback-shell .answer-reveal .meaning { font-size: 15.81px; }
.vocab-feedback-shell .answer-reveal .definition,
.vocab-feedback-shell .answer-reveal blockquote { margin-top: 10px; font-size: 13.9px; line-height: 1.65; }
.vocab-feedback-wait {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  color: var(--pale);
  text-align: center;
}

@media (max-width: 900px) {
  .home-core-paths { grid-template-columns: 1fr; }
  .home-core-card { min-height: 0; }
  .vocab-stage-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vocab-browser-row { grid-template-columns: 48px minmax(130px,.8fr) minmax(200px,1.4fr) 40px; }
  .vocab-browser-level { grid-column: 2 / 4; }
}
@media (max-width: 640px) {
  .home-core-paths { padding: 42px 0; }
  .home-core-card { padding: 26px 22px; border-radius: 14px; }
  .home-core-actions > button { width: 100%; }
  .vocab-library-head { align-items: stretch; flex-direction: column; padding: 24px 20px; }
  .vocab-library-actions > button { width: 100%; }
  .vocab-stage-tabs { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .vocab-stage-tabs button { min-width: 145px; }
  .vocab-list-toolbar { align-items: stretch; flex-direction: column; }
  .vocab-inline-search { min-width: 0; }
  /* Word on the left, level and audio pinned right, meaning on its own line.
     The previous three-column split forced the entry into three stacked bands
     and left the level badge sitting under the audio button. */
  .vocab-browser-row {
    grid-template-columns: minmax(0,1fr) auto auto;
    grid-template-areas:
      "word level audio"
      "meaning meaning meaning";
    gap: 2px 8px;
    min-height: 0;
    align-items: center;
  }
  .vocab-browser-word { grid-area: word; }
  .vocab-browser-row p { grid-area: meaning; }
  .vocab-browser-level { grid-area: level; justify-self: end; }
  .vocab-browser-audio { grid-area: audio; justify-self: end; }
  .vocab-browser-audio { grid-column: 3; grid-row: 1; }
  .vocab-question-card { height: 390px; min-height: 390px; }
  .vocab-feedback-shell { height: 178px; min-height: 178px; }
  .vocab-pagination { gap: 8px; }
  .vocab-pagination button { padding-inline: 10px; }
}

.public-hero-method-image{align-self:stretch;border-left:0;padding-left:0;display:flex;align-items:flex-end}
.public-hero-method-image img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;object-position:center bottom;border:1px solid var(--line);background:var(--surface)}
@media (max-width:900px){.public-hero-method-image{align-items:center}.public-hero-method-image img{max-height:none;width:min(100%,620px);margin-inline:auto}}

/* v5.3.2 — larger editorial method visual with a soft lifted shadow */
@media (min-width: 901px) {
  .public-hero {
    grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
    gap: clamp(42px, 4.5vw, 72px);
    align-items: center;
  }
  .public-hero-method-image {
    align-self: center;
    align-items: center;
  }
  .public-hero-method-image img {
    width: 100%;
    max-height: none;
    aspect-ratio: 1122 / 1402;
    object-fit: cover;
    object-position: center;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 3px;
    box-shadow: 0 26px 58px rgba(30, 47, 61, .11), 0 4px 14px rgba(30, 47, 61, .055);
  }
}
@media (max-width: 900px) {
  .public-hero-method-image img {
    width: min(100%, 720px);
    border-radius: 3px;
    box-shadow: 0 18px 42px rgba(30, 47, 61, .10), 0 3px 10px rgba(30, 47, 61, .05);
  }
}

/* v5.3.3 — frameless method visual; ambient foliage shadow only */
.public-hero {
  position: relative;
  isolation: isolate;
}
.public-hero > * {
  position: relative;
  z-index: 1;
}
.public-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: -7%;
  bottom: -4%;
  width: 360px;
  height: 310px;
  opacity: .16;
  filter: blur(14px);
  transform: rotate(-13deg);
  background:
    radial-gradient(ellipse 35px 80px at 25% 72%, rgba(77,88,72,.48) 0 42%, transparent 47%),
    radial-gradient(ellipse 34px 76px at 42% 55%, rgba(77,88,72,.42) 0 42%, transparent 47%),
    radial-gradient(ellipse 31px 69px at 57% 39%, rgba(77,88,72,.34) 0 42%, transparent 47%),
    radial-gradient(ellipse 28px 64px at 70% 24%, rgba(77,88,72,.28) 0 42%, transparent 47%),
    linear-gradient(70deg, transparent 46%, rgba(77,88,72,.22) 48% 51%, transparent 53%);
}
.public-hero-method-image img {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
@media (max-width: 900px) {
  .public-hero::before {
    left: -20%;
    bottom: 0;
    width: 280px;
    height: 230px;
    opacity: .11;
  }
}


/* v5.3.6 — responsive hero and global type rhythm */
@media (max-width: 1480px) {
  .public-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
  }
  .public-hero > div {
    width: min(100%, 920px);
  }
  .public-hero h1 {
    max-width: 880px;
    font-size: clamp(50px, 6.1vw, 76px);
    line-height: 1.1664;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .public-hero p {
    max-width: 860px;
  }
  .public-hero-method-image {
    width: min(100%, 860px);
    justify-self: center;
    align-self: start;
  }
  .public-hero-method-image img {
    width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}
@media (max-width: 900px) {
  .public-hero {
    gap: 38px !important;
  }
  .public-hero h1 {
    max-width: 760px;
    font-size: clamp(43px, 8.2vw, 64px);
    line-height: 1.1664;
  }
}
@media (max-width: 640px) {
  .public-hero h1 {
    font-size: clamp(40px, 11.5vw, 54px) !important;
    line-height: 1.188;
    word-break: normal;
  }
  .public-hero p {
    font-size: 18px;
  }
}


/* v5.3.7 — mobile navigation completeness and compact hero */
@media (max-width: 640px) {
  .public-hero-method-image {
    display: none !important;
  }
  .public-hero {
    gap: 0 !important;
  }
}

/* v5.4.0: expanded Japanese learning methods and content library */
.japanese-method-page { max-width: 1180px; margin-inline: auto; }
.japanese-method-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0 28px; }
.japanese-method-summary > div { padding:20px; border:1px solid var(--line); background:var(--surface); border-radius:10px; }
.japanese-method-summary span,.japanese-method-summary small { display:block; color:var(--muted); }
.japanese-method-summary strong { display:block; margin:6px 0; font-family:var(--reading-font); font-size:clamp(30px,4vw,48px); font-weight:600; }
.japanese-method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.japanese-method-grid > button { position:relative; min-height:230px; padding:26px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-align:left; display:flex; flex-direction:column; align-items:flex-start; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.japanese-method-grid > button:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 14px 32px rgb(32 42 58 / .08); }
.japanese-method-grid > button > span:first-child { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.japanese-method-grid > button > span:first-child svg { width:24px; height:24px; }
.japanese-method-grid small { margin-top:18px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.japanese-method-grid strong { margin-top:7px; font-family:var(--reading-font); font-size:clamp(25px,3vw,36px); font-weight:600; }
.japanese-method-grid p { margin:12px 0 20px; color:var(--muted); line-height:1.75; }
.japanese-method-grid em { margin-top:auto; display:flex; align-items:center; gap:8px; color:var(--accent); font-style:normal; font-weight:700; }
.japanese-method-route { margin-top:28px; padding:28px; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.japanese-method-route ol { margin:0; padding-left:1.3em; display:grid; gap:10px; color:var(--muted); }
.japanese-cue-card,.dictation-card { padding:30px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.japanese-cue-card h2,.dictation-card h2 { margin:10px 0 14px; font-family:var(--reading-font); font-size:clamp(26px,4vw,44px); line-height:1.35; }
.japanese-model-answer { margin-top:22px; padding:20px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--accent-soft) 35%,transparent); }
.japanese-model-answer span,.japanese-model-answer small { display:block; color:var(--muted); }
.japanese-model-answer strong { display:block; margin:8px 0 14px; font-size:clamp(21px,3vw,32px); line-height:1.55; }
.ja-self-rating { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:8px; margin-top:14px; align-items:stretch; }
.ja-self-rating span { display:flex; align-items:center; padding:12px 14px; color:var(--muted); }
.ja-self-rating button { min-height:58px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.dictation-card label { display:grid; gap:8px; margin:22px 0 16px; }
.dictation-card textarea { width:100%; resize:vertical; min-height:120px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--background); color:var(--text); font:inherit; line-height:1.7; }
.japanese-ondoku { margin:24px 0; }
.japanese-method-entry { border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }

@media (max-width: 900px) {
  .japanese-method-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .japanese-method-route { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .japanese-method-grid { grid-template-columns:1fr; }
  .japanese-method-grid > button { min-height:0; }
  .japanese-method-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ja-self-rating { grid-template-columns:1fr; }
  .japanese-cue-card,.dictation-card { padding:20px; }
}

/* v5.4.1 — separated English/Japanese spaces and real level paths */
.nav-divider { display:block; height:1px; margin:9px 10px; background:var(--line); }
.dashboard-language-actions { display:none !important; }

.language-hub { width:min(100%,var(--content)); margin:0 auto; padding:24px 42px 76px; }
.language-hub-hero {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:40px; align-items:end;
  margin:18px 0 34px; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.language-hub-hero h2 { margin:8px 0 0; max-width:780px; font-family:var(--reading-font); font-size:clamp(30px,3vw,50px); line-height:1.24; letter-spacing:-.035em; font-weight:520; }
.language-hub-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.language-hub-stats div { min-width:0; padding:18px 14px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 82%,transparent); }
.language-hub-stats strong,.language-hub-stats span { display:block; }
.language-hub-stats strong { font-size:28px; line-height:1.1; }
.language-hub-stats span { margin-top:7px; color:var(--muted); font-size:13px; }
.language-skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.language-skill-card,
.language-feature-card {
  width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) 22px; gap:18px; align-items:center;
  padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); text-align:left;
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.language-skill-card:hover,.language-feature-card:hover { transform:translateY(-2px); border-color:var(--line-strong); background:#fff; }
.language-skill-card>svg:first-child,.language-feature-card>svg:first-child { width:34px; height:34px; color:var(--accent); }
.language-skill-card>svg:last-child,.language-feature-card>svg:last-child { width:18px; height:18px; color:var(--pale); }
.language-skill-card strong,.language-feature-card strong { display:block; font-size:20px; line-height:1.25; }
.language-skill-card p,.language-feature-card p { margin:7px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.language-feature-card { margin-top:12px; background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface)); }
.language-feature-card small { display:block; margin-bottom:4px; color:var(--accent-strong); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.language-quick-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.language-article-preview { margin-top:58px; padding-top:42px; border-top:1px solid var(--line); }

.level-path-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:22px 0; }
.level-path-tabs button { min-width:0; min-height:86px; padding:14px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); text-align:left; }
.level-path-tabs button.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }
.level-path-tabs strong,.level-path-tabs small { display:block; }
.level-path-tabs strong { font-size:18px; line-height:1.2; }
.level-path-tabs small { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.35; }
.level-difficulty-note { display:flex; align-items:center; gap:12px; margin:12px 0 20px; padding:13px 16px; border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent-soft) 62%,white); }
.level-difficulty-note strong { min-width:42px; font-size:18px; }
.level-difficulty-note span { color:var(--muted); font-size:14px; }

@media (max-width: 1080px) {
  .language-hub-hero { grid-template-columns:1fr; align-items:start; }
  .language-hub-stats { max-width:620px; }
}
@media (max-width: 900px) {
  .language-hub { padding:18px 28px 70px; }
  .language-skill-grid { grid-template-columns:1fr; }
  .level-path-tabs { display:flex; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
  .level-path-tabs button { flex:0 0 172px; scroll-snap-align:start; }
}
@media (max-width: 640px) {
  .language-hub { padding:8px 20px 92px; }
  .language-hub-hero { gap:22px; margin-top:8px; padding:24px 0; }
  .language-hub-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .language-hub-stats div { padding:14px 9px; }
  .language-hub-stats strong { font-size:22px; }
  .language-hub-stats span { font-size:10px; }
  .language-skill-card,.language-feature-card { grid-template-columns:40px minmax(0,1fr) 18px; gap:13px; padding:19px 16px; }
  .language-skill-card strong,.language-feature-card strong { font-size:18px; }
  .language-quick-actions { display:grid; grid-template-columns:1fr 1fr; }
  .language-quick-actions button { width:100%; }
  .level-difficulty-note { align-items:flex-start; }
}


/* v5.4.2: keep Army Method category title and description on separate lines. */
.army-category-list .category-copy { min-width: 0; }
.army-category-list .category-detail-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-top: 8px;
  color: var(--muted);
}
.army-category-list .category-detail-line small {
  min-width: 0;
  margin: 0;
  flex: 1 1 auto;
}
.army-category-list .category-detail-line em {
  flex: 0 0 auto;
  margin: 0;
  color: var(--pale);
  white-space: nowrap;
}
.army-category-list .category-detail-line svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

@media (max-width: 640px) {
  .army-category-list .category-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 20px 4px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
  }
  .army-category-list .category-index {
    display: inline;
    width: auto;
    height: auto;
    margin-right: 5px;
    background: transparent;
    color: var(--text);
    font-family: var(--reading-font);
    font-size: 22px;
    font-weight: 500;
  }
  .army-category-list .category-copy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
  }
  .army-category-list .category-copy > strong {
    grid-column: 2;
    font-size: 22px;
    line-height: 1.35;
  }
  .army-category-list .category-row > .category-index {
    grid-row: 1;
  }
  .army-category-list .category-detail-line {
    grid-column: 1 / -1;
    margin-top: 7px;
    gap: 8px;
    line-height: 1.55;
  }
  .army-category-list .category-detail-line small {
    font-size: 16px;
    line-height: 1.55;
  }
  .army-category-list .category-detail-line em {
    font-size: 15px;
  }
  .army-category-list .category-feature {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}


/* v5.4.3: two-line mobile category layout — number/title above, detail/count/arrow below. */
.shadow-category-list .category-copy,
.army-category-list .category-copy { min-width: 0; }
.shadow-category-list .category-detail-line,
.army-category-list .category-detail-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-top: 8px;
  color: var(--muted);
}
.shadow-category-list .category-detail-line small,
.army-category-list .category-detail-line small { min-width: 0; flex: 1 1 auto; margin: 0; }
.shadow-category-list .category-detail-line em,
.army-category-list .category-detail-line em { flex: 0 0 auto; margin: 0; white-space: nowrap; color: var(--pale); }
.shadow-category-list .category-detail-line svg,
.army-category-list .category-detail-line svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); }

@media (max-width: 640px) {
  .shadow-category-list .category-row,
  .army-category-list .category-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    column-gap: 8px;
    row-gap: 0;
    min-height: 0;
    padding: 20px 4px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
  }
  .shadow-category-list .category-index,
  .army-category-list .category-index {
    grid-column: 1;
    grid-row: 1;
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--reading-font);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.35;
  }
  .shadow-category-list .category-copy,
  .army-category-list .category-copy {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
  }
  .shadow-category-list .category-copy > strong,
  .army-category-list .category-copy > strong {
    display: block;
    font-size: 22px;
    line-height: 1.35;
  }
  .shadow-category-list .category-detail-line,
  .army-category-list .category-detail-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 7px;
    line-height: 1.55;
  }
  .shadow-category-list .category-detail-line small,
  .army-category-list .category-detail-line small {
    font-size: 16px;
    line-height: 1.55;
  }
  .shadow-category-list .category-detail-line em,
  .army-category-list .category-detail-line em { font-size: 15px; }
  .shadow-category-list .category-feature,
  .army-category-list .category-feature { grid-column: 2; margin-top: 8px; }
}

/* Home page language chooser: the site teaches two languages, so the entry
   point asks which one instead of defaulting to English. */
.public-hero-choose { margin-top: 18px; color: var(--muted); font-size: .95rem; }
.language-choice { padding-top: 8px; }
.language-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.language-choice-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 26px 26px 22px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.language-choice-card:hover, .language-choice-card:focus-visible {
  border-color: var(--accent); box-shadow: 0 10px 28px rgba(36,36,34,.08); transform: translateY(-2px);
}
.language-choice-icon { display: inline-flex; margin-bottom: 6px; color: var(--accent); }
.language-choice-icon svg { width: 30px; height: 30px; }
.language-choice-card strong { font-size: 1.45rem; line-height: 1.2; }
.language-choice-card small { color: var(--pale); font-size: .85rem; letter-spacing: .04em; }
.language-choice-card p { margin: 8px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.language-choice-card em {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  font-style: normal; font-weight: 600; font-size: .9rem; color: var(--accent-strong);
}
.language-choice-note { margin: 16px 0 0; color: var(--muted); font-size: .88rem; }
.text-button.inline { padding: 0; font-size: inherit; color: var(--accent-strong); text-decoration: underline; }
/* Two stacked full-height cards pushed the fold down and left a large blank
   band above them. Side by side with the descriptive paragraph dropped keeps
   the choice on the first screen. */
@media (max-width: 720px) {
  .language-choice-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .language-choice-card { padding: 16px 12px 14px; gap: 2px; }
  .language-choice-icon { margin-bottom: 2px; }
  .language-choice-icon svg { width: 24px; height: 24px; }
  .language-choice-card strong { font-size: 1.1rem; }
  .language-choice-card small { font-size: .74rem; }
  .language-choice-card p { display: none; }
  .language-choice-card em { margin-top: 10px; font-size: .8rem; }
  .language-choice-note { margin-top: 12px; font-size: .82rem; }
}

/* Account access is intentionally one task per page: sign in, register, or
   reset a password. This overrides the older two-panel auth layout. */
.account-auth-page .auth-grid { display:grid; grid-template-columns:minmax(0,620px); justify-content:center; }
.account-auth-page .auth-panel-single { min-height:0; }
.account-auth-page .auth-links { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; color:var(--muted); font-size:14px; }
@media (max-width: 520px) { .account-auth-page .auth-links { align-items:flex-start; flex-direction:column; } }

/* Keep the editorial home headline prominent without taking over the first
   mobile screen. 45.2px × 85% = 38.42px. */
@media (max-width: 640px) { .public-hero h1 { font-size:38.42px; } }

/* The method illustration is taller than the copy on wide screens. Keeping
   the copy vertically centred created an empty band above the headline. */
@media (min-width: 901px) { .public-hero > div:first-child { align-self:start; } }

/* .desktop-nav / .bottom-nav buttons set display:flex, which overrides the
   [hidden] attribute's default display:none. Without this the current zone's
   own language button stays visible next to the switch. */
.desktop-nav button[hidden], .bottom-nav button[hidden] { display: none !important; }

/* Answer feedback used to render from nothing, so the page grew the moment a
   question was answered and the action button landed wherever the reflow put
   it — often below the fold on a phone. Every drill now reserves the space up
   front, and on small screens the active button sticks above the bottom nav so
   it is reachable without scrolling. */
#feedback {
  display: block;
  min-height: 132px;
}
#feedback:empty::after {
  content: "作答後，這裡會顯示解析與下一題。";
  display: block;
  padding: 16px 18px;
  color: var(--pale);
  font-size: .88rem;
  border-left: 3px solid var(--line);
  background: var(--bg);
}
.practice-feedback-shell {
  display: block;
  min-height: 132px;
}
.practice-feedback-wait {
  margin: 0;
  padding: 16px 18px;
  color: var(--pale);
  font-size: .88rem;
  border-left: 3px solid var(--line);
  background: var(--bg);
}
/* the action button sits at the bottom of the white card, same slot every time */
.practice-action-slot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  min-height: 64px;
  display: flex;
  align-items: center;
}
.practice-action-slot .primary-button,
.practice-action-slot .text-button { width: 100%; justify-content: center; }
.practice-action-placeholder { display: block; width: 100%; height: 48px; visibility: hidden; }

@media (max-width: 720px) {
  #feedback, .practice-feedback-shell { min-height: 156px; }
  /* A practice page runs about three screens tall on a phone, so the answered
     state's button sat far below the fold. sticky cannot help once its whole
     container is off-screen, so the button is pinned to the viewport instead
     and sits just above the bottom nav. */
  .feedback .text-button,
  .practice-action-slot .primary-button,
  .practice-action-slot .text-button {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--bottom-nav-height, 64px) + 10px);
    z-index: 40;
    width: auto;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--accent-strong);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(36,36,34,.22);
  }
  .feedback .text-button svg,
  .practice-action-slot .text-button svg { color: #fff; }
}

/* Matches .bottom-nav button min-height plus the iOS home-indicator inset, so
   the sticky action button clears the nav instead of covering it. */
@media (max-width: 720px) {
  :root { --bottom-nav-height: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* The fixed action button overlays the page, so practice pages need room at the
   end for it plus the bottom nav; otherwise it covers the last card. */
@media (max-width: 720px) {
  .practice-page, .lesson-shell {
    padding-bottom: calc(var(--bottom-nav-height, 64px) + 92px);
  }
}

/* Five fixed destinations share the width evenly, so the bar no longer scrolls. */
@media (max-width: 720px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow-x: visible;
  }
  .bottom-nav button {
    min-width: 0;
    padding-inline: 2px;
    display: grid;
    grid-template-rows: 22px auto;
    justify-items: center;
    align-content: center;
  }
  .bottom-nav button > span,
  .bottom-nav button > small { width: 100%; text-align: center; }
  .bottom-nav button > span { display: grid; place-items: center; }
  .bottom-nav small { white-space: nowrap; }
}
/* Language switch lives in the top bar: low-frequency, so it does not deserve
   a permanent slot in the bottom bar. */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.language-switch:hover { border-color: var(--accent); color: var(--accent-strong); }
.language-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.language-switch[hidden] { display: none !important; }
.top-actions { display: flex; align-items: center; gap: 8px; }
/* Keeping the label matters here: the icon alone (a kana glyph) reads as
   "Japanese", which is misleading while standing in the English zone. */
@media (max-width: 480px) {
  .language-switch { padding: 7px 10px; font-size: .78rem; }
  .language-switch svg { width: 15px; height: 15px; }
}

/* Inside a drill the heading is orientation, not instruction. The "how to do
   this" line is already shown on the pre-start screen, so repeating it above
   every question just pushes the answer options further down — on a phone the
   options already started around 950px. Title stays (you need to know where
   you are after navigating back); the repeated instruction goes. */
.practice-page .page-title,
.japanese-method-page .page-title {
  margin-bottom: 14px;
}
.practice-page .page-title h1,
.japanese-method-page .page-title h1 {
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  line-height: 1.25;
}
.practice-page .page-title p,
.japanese-method-page .page-title p {
  display: none;
}


/* The question card reserves 430px minimum plus 42px padding, which is fine on
   a desktop but on a phone it pushed the answer options past the fold — you
   had to scroll before you could answer. Tightened on small screens only; the
   word stays large enough to read kanji strokes clearly. */
@media (max-width: 720px) {
  .editorial-study-card { min-height: 0; padding: 22px 18px; }
  .study-card { padding: 24px 18px; }
  .study-card.compact { padding-block: 18px; }
  .study-word { margin: 14px 0 6px; }
  .editorial-study-card .study-word { font-size: clamp(44px, 13vw, 62px); }
  .kana-word { font-size: clamp(52px, 16vw, 76px); }
  .audio-button { margin-top: 14px; }
  .difficulty-switch { margin: 14px 0; padding: 10px 0; }
}

/* The home page left roughly 100px of empty band on each side of the language
   chooser: the hero's own bottom padding plus the 56px gap between sections,
   then the same again before the journal. Tightened so the choice sits closer
   to the copy that introduces it. */
.public-hero { padding-bottom: 24px; }
.language-choice { margin-top: 20px; padding-top: 0; }
.language-choice + .public-blog,
.language-choice ~ .public-blog { margin-top: 24px; }

@media (max-width: 720px) {
  .public-hero { padding-bottom: 14px; }
  .language-choice { margin-top: 10px; }
  .language-choice ~ .public-blog { margin-top: 16px; padding-top: 24px; }
}

/* On a phone the hero headline alone ran about 400px, and with two paragraphs
   under it the language choice — the one action this page exists for — landed
   below the fold. The copy is still there, just sized so the choice is not
   pushed off the first screen. */
@media (max-width: 720px) {
  .public-hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.5rem); line-height: 1.22; margin: 8px 0 14px; }
  .public-hero p { font-size: .95rem; line-height: 1.65; }
  .public-hero .lead { margin-bottom: 10px; }
  .public-hero-choose { display: none; }
  .public-hero { padding-top: 16px; }
  .public-hero-method-image { display: none; }
}

/* ---- Compact the language hub and practice chrome ---------------------
   Both pages led with an oversized headline block, so the actual content —
   the skill list, or the question — started well past the fold. */

/* Language hub: smaller headings, and skills as a grid instead of one tall
   row each, so all six fit without a long scroll. */
.language-hub-hero h2 { font-size: clamp(22px, 2.2vw, 34px); }
.language-hub { padding-top: 14px; }

/* Practice pages: the header block above a question is orientation only. */


/* Six skills in two columns of tall cards ran well past the fold. Three across
   with tighter copy keeps the whole set visible. */
.language-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.language-skill-card { padding: 16px 14px; }
.language-skill-card strong, .language-feature-card strong { font-size: 1rem; }
.language-skill-card p { font-size: .8rem; line-height: 1.5; margin-top: 4px; }

@media (max-width: 900px) {
  .language-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .language-hub { padding: 10px 16px 76px; }
  .language-hub-hero h2 { font-size: 1.3rem; line-height: 1.3; }
  .language-hub-stats div { padding: 10px 8px; }
  .language-hub-stats strong { font-size: 20px; }
  .language-hub-stats span { margin-top: 3px; font-size: 11px; }
  /* Three columns on a 375px screen leaves ~105px per card, which forced the
     Chinese labels to break one character per line. Drop the "日文/英文"
     prefix and shrink the type so each label sits on one line. */
  .language-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .language-skill-card { padding: 12px 4px; text-align: center; display: grid; justify-items: center; gap: 6px; }
  .language-skill-card > svg:first-child { width: 22px; height: 22px; }
  .language-skill-card > svg:last-child { display: none; }
  /* You are already inside a language zone, so repeating 日文/英文 on every
     card only costs width. Swap to the bare skill name on small screens. */
  .language-skill-card strong { font-size: 0; line-height: 1.25; }
  .language-skill-card strong::after {
    content: attr(data-short);
    font-size: .82rem;
    white-space: nowrap;
  }
  .language-skill-card p { display: none; }
}

/* Same pattern on the vocabulary library page: a large title plus a three-line
   disclaimer pushed the start button past the fold. */


/* ---- One page header rule for every screen ---------------------------
   Each page opened with a back row, a large title and a paragraph, which on a
   phone consumed most of the first screen before any content appeared. This
   replaces the per-page tweaks that were accumulating for practice, the
   language hubs and the vocabulary library. */
@media (max-width: 720px) {
  .lesson-head { margin-bottom: 8px; }
  .back-button { font-size: .9rem; }
  .language-pill { font-size: .74rem; padding: 4px 10px; }

  .page-title { margin-bottom: 12px; }
  .page-title h1 { font-size: clamp(1.15rem, 5.2vw, 1.5rem); line-height: 1.28; }
  .page-title p { margin-top: 6px; font-size: .84rem; line-height: 1.6; }

  .language-hub-hero { gap: 10px; }
  .language-hub-hero h2 { font-size: 1.25rem; line-height: 1.3; }
  .section-kicker { font-size: .68rem; letter-spacing: .1em; }

  .practice-progress { margin: 4px 0 10px; font-size: .78rem; }
  .lesson-shell, .practice-page, .learning-hub { padding-top: 8px; }

  .content-panel, .study-card, .vocab-library-page .content-panel { padding: 16px 14px; }
  h2 { font-size: 1.12rem; line-height: 1.32; }
}

/* The mark and the wordmark are centred on the same line, but the glyph was
   32px against 19px type, so it read as oversized rather than paired. Sizing
   it to the text's own line box balances the lockup. */

/* The pre-start screen still opened with a 40px headline, which pushed the
   explanation and the start button down the page. */
@media (max-width: 720px) {
  .start-layout main > h2 { font-size: 1.2rem; line-height: 1.35; }
  .start-layout > main { padding: 14px 0; }
  .start-icon { width: 34px; height: 34px; margin-bottom: 12px; }
  .start-icon svg { width: 18px; height: 18px; }
  .start-facts { margin: 14px 0; }
  .start-facts > div { padding: 10px; }
  .start-options { margin: 14px 0; }
  .start-options label { padding: 10px 0; }
  .start-actions { margin-top: 14px; }
}

/* Completion screens used the desktop result rhythm on a phone: a large gap
   before the score and three full-width statistic rows made a short result
   need several screens. Keep the outcome prominent, but make it scan like a
   compact receipt. */
@media (max-width: 720px) {
  .result-panel { max-width: none; margin-top: 20px; }
  .result-panel .eyebrow { font-size: .72rem; letter-spacing: .13em; }
  .result-level { margin: 8px 0 6px; font-size: clamp(52px, 17vw, 68px); line-height: 1; }
  .result-level small { font-size: .95rem; }
  .result-panel h2 { margin: 8px 0; font-size: 1.3rem; line-height: 1.35; }
  .result-panel p { margin: 12px auto 0; font-size: .94rem; line-height: 1.65; }
  .completion-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0; }
  .completion-summary div { min-width: 0; padding: 10px 4px; border-right: 1px solid var(--line); border-bottom: 0; }
  .completion-summary div:last-child { border-right: 0; }
  .completion-summary span { font-size: .7rem; white-space: nowrap; }
  .completion-summary strong { margin-top: 2px; font-size: clamp(1rem, 5vw, 1.25rem); line-height: 1.25; overflow-wrap: anywhere; }
  .result-panel .button-row { gap: 8px; margin-top: 4px; }
  .result-panel .button-row button { min-height: 42px; padding: 9px 12px; font-size: .88rem; }
}


/* Shrinking the glyph to 26px left .brand-mark still sized at 32px, and the
   svg sat at the top of that box — so the mark rendered 3px above the centre
   of the name. Size the box to its contents instead of adding more alignment
   rules on top. */
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; }

/* The vocabulary card reserved a tall block for one word and its phonetic, so
   the answer options sat below the fold — the same problem already fixed for
   the other drills. */
@media (max-width: 720px) {
  .vocab-question-card { height: auto; min-height: 240px; padding: 18px 14px; }
  .vocab-question-card .study-word { margin: 10px 0 4px; font-size: clamp(2rem, 11vw, 2.6rem); }
  .vocab-question-card .phonetic { font-size: .9rem; }
  .vocab-question-card .card-meta { font-size: .74rem; }
  .vocab-question-card .audio-button { margin-top: 10px; }
  .vocab-next-slot { margin-top: 10px; }
  .vocab-next-placeholder { height: 40px; }
}

/* An empty title still renders an h1 box, so collapse it on screens that pass
   no title rather than leaving a gap where the heading used to be. */
.is-titleless .page-title { margin: 0; }
.is-titleless .page-title h1:empty { display: none; }

/* Answer options: the letter sat on its own line above the meaning, which made
   each option a tall block and pushed the set past the fold. */
.mcq-row .mcq-choice,
.answer-grid button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  text-align: left;
}
.mcq-row .mcq-choice strong,
.answer-grid button strong { font-size: .95rem; line-height: 1.4; }
.mcq-row .mcq-choice small,
.answer-grid button small { font-size: .88rem; line-height: 1.5; }

/* The next button now sits under the options instead of inside the card. */
.vocab-next-slot { margin-top: 14px; }

@media (max-width: 720px) {
  .vocab-question-card { padding: 14px 12px; }
  .vocab-question-card .study-word { margin: 6px 0 2px; font-size: clamp(1.8rem, 9.5vw, 2.2rem); }
  .vocab-question-card .phonetic { font-size: .85rem; }
  .vocab-question-card .audio-button { margin-top: 8px; }
  .mcq-row .mcq-choice,
  .answer-grid button { padding: 10px 12px; gap: 8px; }
  .mcq-row .mcq-choice strong,
  .answer-grid button strong { font-size: .85rem; }
  .mcq-row .mcq-choice small,
  .answer-grid button small { font-size: .8rem; line-height: 1.45; }
  .vocab-feedback-shell { min-height: 96px; }
  .vocab-next-slot { margin-top: 10px; }
}

/* Some phones report a wide layout viewport, so the usual 720px breakpoint
   did not reach their completion screen. Apply the compact result rhythm to
   every narrow/tablet layout as well, and override the earlier one-column
   summary rule. */
@media (max-width: 1100px) {
  .main-content { padding-top: 14px; }
  .public-hero { padding-top: 22px; }
  .lesson-shell:has(> .result-panel) .page-title { margin-bottom: 12px; }
  .lesson-shell:has(> .result-panel) .page-title h1 { font-size: clamp(1.55rem, 4.5vw, 2.15rem); line-height: 1.2; }
  .result-panel { margin-top: 20px; }
  .result-panel .eyebrow { font-size: .7rem; letter-spacing: .12em; }
  .result-level { margin: 10px 0; font-size: clamp(48px, 9vw, 64px); line-height: 1; }
  .result-level small { font-size: 1rem; }
  .result-panel h2 { margin: 10px 0; font-size: 1.2rem; line-height: 1.3; }
  .result-panel p { margin: 14px auto 0; font-size: .92rem; line-height: 1.62; }
  .completion-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0; }
  .completion-summary div { min-width: 0; padding: 12px 5px; border-right: 1px solid var(--line); border-bottom: 0; }
  .completion-summary div:last-child { border-right: 0; }
  .completion-summary span { font-size: .68rem; white-space: nowrap; }
  .completion-summary strong { margin-top: 2px; font-size: clamp(1rem, 3.8vw, 1.18rem); line-height: 1.2; overflow-wrap: anywhere; }
  .result-panel .button-row { margin-top: 8px; gap: 8px; }
}

/* Every English and Japanese tool starts through the shared start page. Keep
   its icon beside the introduction rather than spending a full line above it. */
.start-intro { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 18px; }
.start-intro .start-icon { margin: 0; }
.start-intro h2 { margin: 8px 0 0; font-family: var(--reading-font); font-size: 40.68px; font-weight: 500; line-height: 1.458; }
.writing-prompt-list { padding: 16px 0; }
.writing-prompt-select { display: grid; gap: 8px; }
.writing-prompt-select select { min-width: 220px; padding: 11px 36px 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.blog-content-count { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.article-learning-visual { margin: 24px 0 30px; border: 1px solid var(--line); background: var(--surface); }
.article-learning-visual img { display: block; width: 100%; height: auto; }
.article-learning-visual figcaption { padding: 9px 13px; color: var(--muted); font-size: .88rem; }
.article-learning-visual-bottom { margin-top: 34px; }
.article-body .article-table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--line); }
.article-body table { width: 100%; min-width: 480px; border-collapse: collapse; }
.article-body th,.article-body td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.article-body th { background: var(--pale); font-weight: 700; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-faq { margin-top: 46px; border-top: 1px solid var(--line); }
.article-faq h2 { margin-top: 30px; }
.article-faq-item { border-bottom: 1px solid var(--line); }
.article-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 2px; cursor: pointer; font-family: var(--ui-font); font-size: 18px; font-weight: 650; list-style: none; }
.article-faq-item summary::-webkit-details-marker { display: none; }
.article-faq-item summary span { flex: 0 0 auto; color: var(--accent); font-size: 23px; transition: transform .18s ease; }
.article-faq-item[open] summary span { transform: rotate(45deg); }
.article-faq-item > div { padding: 0 2px 17px; color: var(--muted); }
.article-faq-item > div p { margin-bottom: 0; }
@media (max-width: 720px) {
  .start-intro { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .start-intro .start-icon { width: 34px; height: 34px; margin: 0; }
  .start-intro h2 { margin-top: 5px; font-size: 1.2rem; line-height: 1.35; }
  .blog-content-count { font-size: .82rem; }
  .article-learning-visual { margin: 16px 0 22px; }
  .article-body { font-size: 18px; line-height: 1.78; }
  .article-body h2 { margin-top: 36px; font-size: 27px; }
}


/* ---- Folded in from article-nav-fix.css and start-intro-fix.css ------
   These shipped as separate stylesheets to dodge a cached styles.css. That
   costs two extra requests on every page load and splits the source of truth,
   so they live here now and the version query handles cache busting. */
.article-end-nav {
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.article-end-nav button {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
}

.article-end-nav button:last-child {
  text-align: center;
}

.article-end-nav .secondary-button {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

.article-end-nav .primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

.article-end-nav .primary-button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

@media (max-width: 720px) {
  .article-end-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 18px;
  }

  .article-end-nav button {
    width: 100%;
    min-height: 46px;
    text-align: center;
  }
}

.start-intro .start-icon {
  align-self: center;
}

@media (max-width: 640px) {
  .start-intro .start-icon {
    align-self: center;
  }
}

/* ---- Touch targets and minimum type ---------------------------------
   Footer links measured 59x25 and several labels rendered under 11px. Apple
   and Material both put the minimum comfortable target near 44px, and small
   type is the first thing to fail for older eyes — a real audience for a
   language-learning site. */
.site-footer nav button {
  min-height: 44px;
  padding: 10px 4px;
  display: inline-flex;
  align-items: center;
}
.section-kicker { font-size: 12px; }
.sidebar-note, .footer-note span { font-size: 12.5px; }
.bottom-nav small { font-size: 11.5px; }

@media (max-width: 720px) {
  .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
  .site-footer nav button { justify-content: flex-start; }
  /* the brand lockup is a link too, so give it a real target height */
  .mobile-brand .brand { min-height: 44px; }
}

/* Long lists should not render the entire archive at once. */
.blog-more { margin-top: 20px; display: flex; justify-content: center; }
.blog-more button { min-height: 46px; padding: 12px 22px; }

/* ---- Vocabulary browser on small screens ----------------------------
   The row grid asks for five columns totalling ~640px minimum. On a 343px
   content width the columns wrapped, so each entry stacked into three bands
   and stood 191px tall — 24 entries made the page 9.4 screens deep. Two
   columns with the meaning on its own line keeps an entry to one block. */
@media (max-width: 720px) {
  .vocab-browser-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "word level audio"
      "meaning meaning meaning";
    gap: 2px 10px;
    min-height: 0;
    padding: 10px 2px;
    align-items: start;
  }
  .vocab-browser-word { grid-area: word; }
  .vocab-browser-word strong { font-size: 1.02rem; line-height: 1.3; }
  .vocab-browser-word small { font-size: .78rem; }
  .vocab-browser-row p {
    grid-area: meaning;
    font-size: .82rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* The level and the audio button both sat in the same grid area and drew on
     top of each other. Give the row a third column so they sit side by side,
     and drop the duplicate level that already appears in the badge. */
  .vocab-browser-rank { display: none; }
  .vocab-browser-level {
    grid-area: level;
    align-self: center;
    justify-self: end;
    font-size: .72rem;
    padding: 2px 7px;
  }
  .vocab-browser-audio { grid-area: audio; align-self: center; justify-self: end; }

  .vocab-library-head { gap: 8px; }
  .vocab-stage-tabs { gap: 6px; }
  .vocab-stage-tabs button { padding: 8px 10px; font-size: .82rem; }
  .vocab-stage-tabs button small { font-size: .7rem; }
}

.writing-topic-picker .empty-note { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }

/* Batch 1.6C integration shell. These rules also remove the measured 768px
   overflow at its source: every grid child can shrink and no fixed-width
   control is allowed to widen #routeView. */
.main-content,
#routeView,
#routeView > *,
.product-home,
.protected-route,
.product-entry-grid > *,
.protected-grid > *,
.protected-card > * { min-width: 0; max-width: 100%; }

.product-home { max-width: 1120px; margin: 0 auto; }
.product-home-hero { padding: 38px 0; border-bottom: 1px solid var(--line); }
.product-home-hero > span,
.product-route-head > span { color: var(--accent); font-size: .76rem; font-weight: 750; letter-spacing: .12em; }
.product-home-hero h1,
.product-route-head h1 { margin-top: 10px; font-family: var(--reading-font); font-size: clamp(2rem,5vw,4rem); line-height: 1.14; font-weight: 500; }
.product-home-hero p,
.product-route-head p { max-width: 720px; color: var(--muted); }
.goal-picker { padding: 34px 0; }
.goal-picker > div,
.product-entry-grid,
.protected-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.goal-picker > div { grid-template-columns: repeat(3,minmax(0,1fr)); }
.goal-picker button,
.product-entry-grid article,
.protected-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }
.goal-picker button { display: grid; gap: 8px; }
.goal-picker button.selected { border-color: var(--accent); background: var(--accent-soft); }
.goal-picker button span,
.product-entry-grid p,
.protected-card p { color: var(--muted); }
.product-entry-grid article { display: flex; flex-direction: column; align-items: flex-start; }
.product-entry-grid article > span { color: var(--pale); font-size: .74rem; letter-spacing: .1em; }
.product-entry-grid h2 { margin-top: 8px; font-family: var(--reading-font); font-size: 2rem; font-weight: 500; }
.product-entry-grid button { margin-top: auto; }
.product-route-head { padding: 26px 0 34px; }
.protected-card { display: flex; min-height: 250px; flex-direction: column; justify-content: space-between; gap: 18px; }
.protected-card > div { display: grid; gap: 8px; }
.protected-card > div > span { color: var(--accent); font-size: .76rem; font-weight: 700; }
.protected-card strong { font-family: var(--reading-font); font-size: 1.35rem; line-height: 1.35; overflow-wrap: anywhere; }
.protected-card footer { display: grid; gap: 10px; }
.protected-card footer small { color: var(--pale); overflow-wrap: anywhere; }
.trial-button { min-height: 44px; padding: 0 16px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.route-loading,
.route-state { max-width: 720px; margin: 8vh auto; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.route-loading span { display: block; width: 32px; height: 32px; margin: 0 auto; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: route-spin .8s linear infinite; }
@keyframes route-spin { to { transform: rotate(360deg); } }
.trial-experience { max-width: 820px; margin: 0 auto; }
.trial-experience header { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.trial-experience header > span { color: var(--accent); font-size: .8rem; font-weight: 700; }
.trial-experience h1 { margin-top: 8px; font-family: var(--reading-font); font-size: clamp(2rem,5vw,3.4rem); font-weight: 500; }
.trial-reading,
.trial-focus,
.trial-experience textarea,
.trial-options,
[data-trial-feedback] { width: 100%; max-width: 100%; margin: 24px 0; }
.trial-reading,
.trial-focus,
[data-trial-feedback] { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.trial-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.trial-options button { min-width: 0; min-height: 56px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .app-main,
  .main-content { width: 100%; min-width: 0; }
  .goal-picker > div { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .main-content { padding-inline: 18px; }
  .product-entry-grid,
  .protected-grid,
  .trial-options { grid-template-columns: minmax(0,1fr); }
  .product-home-hero h1,
  .product-route-head h1,
  .trial-experience h1 { font-size: clamp(1.8rem,8vw,2.75rem); }
  .protected-card,
  .goal-picker button,
  .product-entry-grid article { padding: 18px; }
  .route-state,
  .route-loading { width: 100%; margin: 24px 0; padding: 24px 18px; }
  input,
  select,
  textarea,
  button { max-width: 100%; }
}

/* Mobile home: the desktop editorial composition was forcing a poster-sized
   headline and a second screen of decoration before people could start. */
@media (max-width: 767px) {
  .editorial-home { max-width:none; }
  .editorial-hero { display:block; padding:18px 0 30px; }
  .editorial-mosaic { display:none; }
  .editorial-copy h1 {
    max-width:none;
    margin:10px 0 16px;
    font-size:clamp(2.25rem,10vw,2.65rem);
    line-height:1.18;
    letter-spacing:-.04em;
  }
  .editorial-copy h1 br { display:none; }
  .editorial-copy > p { max-width:none; font-size:16px; line-height:1.72; }
  .editorial-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:20px; }
  .editorial-actions button,
  .diagnostic-buttons button { width:100%; min-width:0; min-height:52px; padding-inline:16px; font-size:16px; }
  .editorial-free-note { margin-top:15px !important; font-size:13px !important; line-height:1.6 !important; }
  .editorial-proof { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }
  .editorial-proof > div { display:grid; gap:3px; min-height:58px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
  .editorial-proof strong { font-size:21px; }
  .editorial-proof span { font-size:11px; }
  .editorial-benefits { grid-template-columns:1fr; gap:0; margin-top:24px; border-top:1px solid var(--line); }
  .editorial-benefits article { gap:4px; padding:14px 0; border-bottom:1px solid var(--line); }
  .editorial-benefits strong { font-size:14px; }
  .editorial-benefits small { font-size:13px; line-height:1.55; }
  .editorial-loop { margin:0 0 20px; padding:20px 18px; }
  .editorial-loop h2 { margin:7px 0 18px; font-size:23px; line-height:1.3; }
  .editorial-loop > div { grid-template-columns:1fr 1fr; gap:0 14px; }
  .editorial-loop article { min-width:0; gap:5px; padding:12px 0; border-right:0; border-bottom:1px solid #e6e1d8; }
  .editorial-loop article:nth-last-child(-n+2) { border-bottom:0; }
  .editorial-loop b { font-size:22px; }
  .editorial-loop strong { font-size:14px; }
  .editorial-loop small { font-size:12px; line-height:1.5; }
  .editorial-programs { gap:14px; }
  .program-card { min-height:0; padding:21px 18px; text-align:left; }
  .program-card h2 { font-size:24px; }
  .program-card p { font-size:14px; line-height:1.62; }
  .program-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; margin:20px 0; }
  .program-stats span { font-size:11px; }
  .program-stats b { font-size:16px; }
  .program-card button { width:100%; min-height:50px; }
  .editorial-access { gap:18px; margin-top:16px; padding:22px 18px; }
  .editorial-access h2 { font-size:23px; }
  .editorial-access p { font-size:14px; line-height:1.62; }
  .editorial-access > div:last-child,
  .editorial-access > div:last-child button { width:100%; justify-items:stretch; }
  .editorial-access > div:last-child button { min-height:50px; }
  .editorial-access small { max-width:none; text-align:left; }
  .editorial-diagnostic { gap:16px; margin-top:16px; padding:20px 18px; }
  .editorial-diagnostic h2 { font-size:22px; }
  .editorial-diagnostic p { font-size:14px; }
  .diagnostic-buttons { display:grid; grid-template-columns:1fr; gap:10px; width:100%; }
  .editorial-journal { padding:30px 0 2px; }
  .editorial-journal header { align-items:flex-start; gap:10px; }
  .editorial-journal h2 { font-size:25px; }
  .journal-grid { grid-template-columns:1fr; gap:12px; }
  .journal-grid > button { min-height:0; padding:16px; }
  .journal-grid > button:nth-child(n+3) { display:none; }

  /* Keep the first screen focused on the next action instead of a poster-sized title. */
  .editorial-copy h1 {
    max-width:12em;
    font-size:clamp(2rem,8.8vw,2.3rem);
    line-height:1.16;
    letter-spacing:-.035em;
  }

  /* The form previously inherited inline labels, causing labels and controls to overlap. */
  .account-auth-page .auth-panel-single {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .account-auth-page .auth-panel-single > label {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
    min-width:0 !important;
    margin:0 !important;
  }
  .account-auth-page .auth-panel-single input,
  .account-auth-page .auth-panel-single select,
  .account-auth-page .auth-panel-single textarea {
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}

/* The account card must remain readable at desktop widths as well as phones. */
@media (min-width: 768px) {
  .account-auth-page {
    width:min(calc(100% - 48px),760px) !important;
    max-width:760px !important;
    margin-inline:auto !important;
  }
  .account-auth-page > header { max-width:620px; }
}

/* Public learning articles are authored as Markdown, but learners should read
   a calm article rather than raw asterisks and pipe characters. */
.blog-detail { padding-bottom:64px; }
.article-body { max-width:760px; color:var(--text); font-size:17px; line-height:1.85; }
.article-body > h2,
.article-body > h3,
.article-body > h4 { margin:38px 0 14px; color:var(--ink); font-family:var(--reading-font); line-height:1.28; }
.article-body > h2 { font-size:clamp(1.55rem,2.7vw,2rem); }
.article-body > h3 { font-size:clamp(1.28rem,2.2vw,1.6rem); }
.article-body p { margin:0 0 20px; }
.article-body strong { color:var(--ink); }
.article-body code { padding:2px 5px; border-radius:4px; background:#edf1f4; color:#153f62; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.92em; }
.article-body blockquote { margin:24px 0; padding:14px 18px; border-left:3px solid var(--accent); background:#f5f7f7; color:#314252; }
.article-body ol,.article-body ul { margin:0 0 22px; padding-left:1.4em; }
.article-body li+li { margin-top:8px; }
.article-table-wrap { width:100%; margin:24px 0; overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.article-body table { width:100%; min-width:560px; border-collapse:collapse; font-size:.92em; line-height:1.55; }
.article-body th,.article-body td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.article-body th { background:#f4f0e9; color:var(--ink); font-weight:700; }
.article-body tr:last-child td { border-bottom:0; }
@media (max-width:767px) {
  .blog-detail { padding-bottom:28px; }
  .article-body { font-size:16px; line-height:1.78; }
  .article-body > h2 { margin-top:30px; }
  .article-body blockquote { margin:20px 0; padding:12px 14px; }
  .article-body th,.article-body td { padding:10px 12px; }
}

/* Authentication is a conversion step, not a settings grid. One field per
   row prevents the wide-screen label collision and makes password managers
   predictable on desktop and mobile alike. */
.account-auth-page { width:min(calc(100% - 40px),640px) !important; max-width:640px !important; margin-inline:auto !important; padding-block:32px 64px; }
.account-auth-page > header { max-width:620px; margin-inline:auto; }
.account-auth-page > header h1 { margin:8px 0 12px; font-size:clamp(2rem,4vw,3rem); line-height:1.16; }
.account-auth-page .auth-panel-single { grid-template-columns:minmax(0,1fr) !important; width:100%; max-width:620px; margin:26px auto 0; padding:26px; }
.account-auth-page .auth-panel-single > label { grid-column:1 !important; }
.account-auth-page .auth-panel-single > .primary-button { min-height:50px; margin-top:4px; }
@media (max-width:767px) {
  .account-auth-page { width:100% !important; padding:18px 0 36px; }
  .account-auth-page > header h1 { font-size:clamp(1.8rem,8vw,2.3rem); }
  .account-auth-page .auth-panel-single { margin-top:20px; padding:20px 18px; border-radius:12px; }
}