:root {
  --bjt-orange: #e65312;
  --bjt-orange-soft: #fff2eb;
  --bjt-paper: #fbfaf6;
  --bjt-rail: #fbfaf6;
  --bjt-ink: #1d211e;
  --bjt-body: #505750;
  --bjt-muted: #697169;
  --bjt-rule: #d9d5cb;
  --bjt-rule-strong: #bbb8ad;
  --bjt-panel: #fbfaf6;
  --bjt-dark: #111111;
  --bjt-success: #24734b;
  --bjt-danger: #b94035;
  --bjt-font: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
  --bjt-jp-sans: var(--font-jp-sans, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif);
  --bjt-serif: var(--font-jp-serif, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif);
}

:root[data-theme="dark"] {
  --bjt-paper: #11130f;
  --bjt-rail: #171914;
  --bjt-ink: #f6f3ed;
  --bjt-body: #c2bfb7;
  --bjt-muted: #97948d;
  --bjt-rule: #30312d;
  --bjt-rule-strong: #4b4c46;
  --bjt-panel: #191b17;
  --bjt-dark: #f2efe9;
  --bjt-orange-soft: #342116;
  --bjt-success: #73d09b;
  --bjt-danger: #ff8d82;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bjt-paper); }
body { margin: 0; background: var(--bjt-paper); color: var(--bjt-ink); font-family: var(--bjt-font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
:where(a, button, input, select):focus-visible { outline: 2px solid var(--bjt-orange); outline-offset: 3px; }
.skip-link { position: fixed; top: -64px; left: 16px; z-index: 100; background: var(--bjt-dark); color: var(--bjt-paper); padding: 10px 14px; text-decoration: none; }
.skip-link:focus { top: 16px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--bjt-rule); background: var(--bjt-rail); }
.sidebar-head { min-height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid transparent; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--bjt-ink); font-size: 22px; font-weight: 700; letter-spacing: -.035em; text-decoration: none; }
.brand-mark { color: var(--portfolio-accent, #4657d8); font: 650 16px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: -.08em; }
.brand-dot { color: var(--portfolio-accent, #4657d8); }
.sidebar-actions { display: flex; align-items: center; gap: 8px; }
.mobile-nav-toggle { display: none; align-items: center; gap: 7px; border: 1px solid var(--bjt-rule); background: var(--bjt-panel); padding: 8px 10px; }

.primary-nav { display: grid; gap: 3px; padding: 16px 12px; }
.nav-item { position: relative; min-height: 48px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 0 18px; border: 0; border-radius: 4px; background: transparent; color: var(--bjt-body); text-align: left; cursor: pointer; }
.nav-item::before { content: ""; position: absolute; inset: 6px auto 6px -12px; width: 3px; background: transparent; }
.nav-item:hover { color: var(--bjt-ink); background: color-mix(in srgb, var(--bjt-panel) 50%, transparent); }
.nav-item.is-active { color: var(--bjt-orange); background: color-mix(in srgb, var(--bjt-orange-soft) 68%, transparent); }
.nav-item.is-active::before { background: var(--bjt-orange); }
.nav-item i { width: 20px; text-align: center; font-size: 15px; }
.nav-count { min-width: 22px; border: 1px solid currentColor; border-radius: 999px; padding: 0 5px; font-size: 11px; line-height: 19px; text-align: center; }

.sidebar-foot { margin-top: auto; display: grid; gap: 18px; padding: 24px 28px 26px; }
.dataset-summary { display: grid; gap: 4px; color: var(--bjt-muted); font-size: 12px; }
.dataset-summary strong { color: var(--bjt-body); font-size: 12px; font-weight: 500; }
.dataset-summary b { color: var(--bjt-orange); font-weight: 750; }
.portfolio-link { display: flex; align-items: center; gap: 9px; border: 1px solid var(--bjt-rule); background: var(--bjt-panel); padding: 10px 12px; color: var(--bjt-body); font-size: 12px; text-decoration: none; }
.portfolio-link i { transform: rotate(180deg); }
.portfolio-link:hover { border-color: var(--bjt-rule-strong); color: var(--bjt-ink); }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border: 1px solid var(--bjt-rule); background: var(--bjt-panel); color: var(--bjt-body); font-size: 15px; cursor: pointer; }
.theme-toggle:hover { border-color: var(--bjt-rule-strong); color: var(--bjt-ink); }

.workspace { min-width: 0; min-height: 100vh; background: var(--bjt-paper); }
.workspace .lh-dashboard { --accent: var(--bjt-orange); color: var(--bjt-ink); padding: 42px clamp(36px, 4.3vw, 72px) 64px; }
.view-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 920px) minmax(230px, 1fr); }
.view-shell.is-single { display: block; }
.view-shell.is-single .main-column { width: min(1040px, 100%); margin-inline: auto; }
.main-column { padding: 42px clamp(36px, 4.3vw, 72px) 64px; }
.context-label { display: block; margin-bottom: 20px; color: var(--bjt-orange); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.view-title { margin: 0; max-width: 900px; color: var(--bjt-ink); font-size: clamp(34px, 3.5vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.view-title .jp-title { font-family: var(--bjt-serif); font-size: .9em; font-weight: 500; letter-spacing: 0; }
.view-subtitle { margin: 12px 0 0; max-width: 670px; color: var(--bjt-body); font-size: 15px; }
.date-line { display: flex; justify-content: space-between; gap: 24px; margin: 0 0 24px; color: var(--bjt-muted); font-size: 12px; }
.date-line > span { color: var(--bjt-orange); font-weight: 650; }

.lesson-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 12px 18px; margin: 24px 0 42px; }
.lesson-progress strong { color: var(--bjt-orange); font-size: 18px; font-weight: 650; }
.lesson-progress span { color: var(--bjt-muted); }
.score-status b { color: var(--bjt-orange); font-weight: 650; }
.progress-track { grid-column: 1 / -1; height: 2px; background: var(--bjt-rule); overflow: hidden; }
.progress-fill { display: block; width: 0; height: 100%; background: var(--bjt-orange); transition: width .35s ease; }
.question-timer { justify-self: end; font-family: var(--bjt-mono); font-size: 20px !important; }
.question-timer-track { grid-column: 1 / -1; height: 3px; background: var(--bjt-rule); overflow: hidden; }
.question-timer-track span { display: block; height: 100%; background: var(--bjt-orange); transition: width 1s linear; }

.scenario { max-width: 760px; margin-bottom: 22px; color: var(--bjt-body); font-size: 14px; }
.question-block { max-width: 760px; margin-top: 30px; }
.question-type { color: var(--bjt-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.question-heading { display: flex; align-items: center; gap: 14px; margin: 10px 0 6px; }
.question-term { flex: 0 1 auto; margin: 0; color: var(--bjt-ink); font-family: var(--bjt-serif); font-size: clamp(30px, 3.5vw, 48px); font-weight: 520; line-height: 1.35; letter-spacing: -.03em; overflow-wrap: anywhere; }
.listen-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border: 1px solid var(--bjt-rule-strong); background: var(--bjt-panel); color: var(--bjt-body); cursor: pointer; }
.listen-icon:hover { border-color: var(--bjt-orange); color: var(--bjt-orange); }
.listen-glyph { width: 18px; height: 18px; background: currentColor; -webkit-mask: url("/assets/icons/volume-high.svg") center / contain no-repeat; mask: url("/assets/icons/volume-high.svg") center / contain no-repeat; }
.question-hint { margin: 0; color: var(--bjt-body); font-size: 15px; }
.answer-list { max-width: 760px; display: grid; gap: 9px; margin: 24px 0 0; }
.answer-option { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; width: 100%; min-height: 62px; border: 1px solid var(--bjt-rule); background: transparent; padding: 8px 14px 8px 8px; color: var(--bjt-ink); text-align: left; cursor: pointer; }
.answer-option:hover:not(:disabled) { border-color: var(--bjt-rule-strong); background: color-mix(in srgb, var(--bjt-panel) 60%, transparent); }
.answer-option.is-selected { border-color: var(--bjt-orange); background: var(--bjt-orange-soft); }
.answer-option.is-correct { border-color: var(--bjt-success); color: var(--bjt-success); }
.answer-option.is-wrong { border-color: var(--bjt-danger); color: var(--bjt-danger); }
.answer-key { display: grid; place-items: center; align-self: stretch; min-height: 42px; background: color-mix(in srgb, var(--bjt-rule) 43%, transparent); font-size: 13px; font-weight: 650; }
.answer-text { padding: 4px 0; font-size: 15px; line-height: 1.45; }
.feedback { max-width: 760px; margin-top: 14px; border-left: 3px solid var(--bjt-success); background: color-mix(in srgb, var(--bjt-panel) 65%, transparent); padding: 14px 16px; }
.feedback.is-wrong { border-left-color: var(--bjt-danger); }
.feedback strong { display: block; margin-bottom: 4px; }
.feedback p { margin: 0; color: var(--bjt-body); font-size: 14px; }
.study-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 12px 0 0; border-top: 1px solid var(--bjt-rule); }
.study-details > div { min-width: 0; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--bjt-rule); }
.study-details > div:nth-child(even):not(.detail-wide) { padding-left: 14px; border-left: 1px solid var(--bjt-rule); }
.study-details .detail-wide { grid-column: 1 / -1; }
.study-details dt { margin: 0 0 5px; color: var(--bjt-orange); font-size: 11px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.study-details dd { margin: 0; color: var(--bjt-ink); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.study-details dd[lang="ja"], .study-details dd span[lang="ja"] { font-family: var(--bjt-serif); font-size: 16px; }
.study-details dd small { display: block; margin-top: 4px; color: var(--bjt-body); font-family: var(--bjt-font); font-size: 13px; }
.grammar-details { grid-template-columns: 1fr; }
.primary-action { min-width: 260px; min-height: 58px; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 28px; border: 1px solid var(--bjt-dark); background: var(--bjt-dark); color: var(--bjt-paper); padding: 0 28px; cursor: pointer; }
.primary-action:hover:not(:disabled) { opacity: .88; }
.primary-action:disabled { opacity: .36; cursor: not-allowed; }
.secondary-action { min-height: 42px; border: 1px solid var(--bjt-rule-strong); background: transparent; padding: 0 16px; cursor: pointer; }
.secondary-action:hover { border-color: var(--bjt-ink); }

.session-rail { border-left: 1px solid var(--bjt-rule); padding: 106px clamp(26px, 3vw, 48px) 48px; }
.session-rail h2 { margin: 0; font-size: 18px; font-weight: 650; }
.session-rail > p { margin: 3px 0 28px; color: var(--bjt-muted); font-size: 12px; }
.session-steps { display: grid; }
.session-step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; min-height: 105px; border: 0; background: transparent; padding: 0; color: var(--bjt-body); text-align: left; cursor: pointer; }
.session-step::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 1px; background: var(--bjt-rule-strong); }
.session-step:last-child::after { display: none; }
.step-num { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--bjt-rule-strong); border-radius: 50%; background: var(--bjt-paper); color: var(--bjt-muted); font-size: 13px; }
.session-step.is-active { color: var(--bjt-orange); }
.session-step.is-active .step-num, .session-step.is-complete .step-num { border-color: var(--bjt-orange); background: var(--bjt-orange); color: white; }
.step-copy strong { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }
.step-copy small { display: block; margin-top: 3px; color: var(--bjt-muted); font-size: 11px; }
.rail-note { margin-top: 22px; border-top: 1px solid var(--bjt-rule); padding-top: 22px; color: var(--bjt-muted); font-size: 12px; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section-head .view-title { font-size: clamp(34px, 3.5vw, 48px); }
.stat-inline { color: var(--bjt-muted); font-size: 13px; white-space: nowrap; }
.subject-head { margin-bottom: 0; }
.subject-tabs { display: flex; gap: 42px; border-bottom: 1px solid var(--bjt-rule); margin-top: 34px; }
.subject-tab { position: relative; min-height: 62px; border: 0; background: transparent; padding: 0; color: var(--bjt-body); cursor: pointer; }
.subject-tab::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.subject-tab:hover { color: var(--bjt-ink); }
.subject-tab.is-active { color: var(--bjt-orange); }
.subject-tab.is-active::after { background: var(--bjt-orange); }
.subject-module-list { border-bottom: 1px solid var(--bjt-rule); }
.subject-module-row { min-height: 132px; display: grid; grid-template-columns: 58px 58px minmax(0, 1fr) auto; align-items: center; gap: 22px; border-bottom: 1px solid var(--bjt-rule); }
.subject-module-row:last-child { border-bottom: 0; }
.subject-module-index { color: var(--bjt-orange); font: 550 30px/1 var(--bjt-mono); }
.subject-module-icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--bjt-orange); color: var(--bjt-orange); }
.subject-module-copy strong { display: block; color: var(--bjt-ink); font-size: 19px; font-weight: 650; }
.subject-module-copy small { display: block; max-width: 590px; margin-top: 6px; color: var(--bjt-muted); font-size: 13px; line-height: 1.6; }
.subject-module-row > button { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--bjt-orange); background: transparent; padding: 0 16px; color: var(--bjt-orange); font-size: 13px; font-weight: 650; cursor: pointer; }
.library-back { margin: 0 0 18px; border: 0; background: transparent; padding: 0; color: var(--bjt-body); font-size: 12px; cursor: pointer; }
.library-back:hover { color: var(--bjt-orange); }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 26px; }
.search-input { min-height: 48px; width: 100%; border: 1px solid var(--bjt-rule-strong); background: var(--bjt-panel); color: var(--bjt-ink); padding: 0 15px; }
.category-section { margin: 28px 0 18px; padding: 18px; border: 1px solid var(--bjt-rule); background: color-mix(in srgb, var(--bjt-panel) 70%, transparent); }
.category-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.category-heading strong { font-size: 14px; }
.category-heading span { color: var(--bjt-muted); font-size: 11px; }
.category-filter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.category-chip { min-height: 58px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; border: 1px solid var(--bjt-rule); background: transparent; padding: 9px 10px; color: var(--bjt-body); text-align: left; cursor: pointer; }
.category-chip strong { font-size: 12px; font-weight: 650; }
.category-chip small { color: var(--bjt-muted); font-size: 10px; }
.category-chip span { grid-column: 2; grid-row: 1 / span 2; color: var(--bjt-muted); font: 600 11px/1 var(--bjt-mono); }
.category-chip:hover { border-color: var(--bjt-rule-strong); color: var(--bjt-ink); }
.category-chip.is-active { border-color: var(--bjt-orange); background: var(--bjt-orange-soft); color: var(--bjt-orange); }
.category-chip.is-active small,
.category-chip.is-active span { color: inherit; }
.category-more { margin-top: 12px; border-top: 1px solid var(--bjt-rule); padding-top: 12px; }
.category-more summary { display: flex; align-items: center; justify-content: space-between; color: var(--bjt-body); font-size: 12px; font-weight: 650; cursor: pointer; list-style-position: inside; }
.category-more summary span { color: var(--bjt-muted); font-size: 10px; font-weight: 500; }
.category-more[open] summary { margin-bottom: 10px; color: var(--bjt-orange); }
.library-list { border-top: 1px solid var(--bjt-rule); }
.library-row { display: grid; grid-template-columns: minmax(150px, .72fr) minmax(0, 1.6fr) minmax(130px, .65fr) auto; align-items: start; gap: 20px; border-bottom: 1px solid var(--bjt-rule); padding: 18px 0; }
.library-term { color: var(--bjt-ink); font-family: var(--bjt-serif); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.library-definition { color: var(--bjt-body); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.library-category { color: var(--bjt-muted); font-size: 11px; line-height: 1.45; }
.library-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.row-practice, .row-insight { border: 0; background: transparent; padding: 0; font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.row-practice { color: var(--bjt-orange); }
.row-insight { color: var(--bjt-body); text-decoration: underline; text-underline-offset: 3px; }
.library-insight { grid-column: 1 / -1; }
.vocabulary-insight { display: grid; gap: 12px; border: 1px solid var(--bjt-rule); background: color-mix(in srgb, var(--bjt-panel) 72%, transparent); padding: 16px; }
.vocabulary-insight.is-compact { margin-top: 14px; padding: 12px; }
.insight-section h4 { margin: 0 0 9px; color: var(--bjt-orange); font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.kanji-grid { display: grid; grid-template-columns: 62px minmax(92px, .8fr) minmax(86px, .75fr) minmax(86px, .75fr) minmax(140px, 1.6fr); border-top: 1px solid var(--bjt-rule); border-left: 1px solid var(--bjt-rule); }
.kanji-head, .kanji-cell { min-width: 0; border-right: 1px solid var(--bjt-rule); border-bottom: 1px solid var(--bjt-rule); padding: 9px 10px; overflow-wrap: anywhere; }
.kanji-head { background: var(--bjt-rail); color: var(--bjt-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.kanji-cell { color: var(--bjt-body); font-size: 12px; }
.kanji-cell strong { color: var(--bjt-ink); }
.kanji-glyph { color: var(--bjt-ink); font-family: var(--bjt-serif); font-size: 24px; line-height: 1.2; }
.reading-on { color: var(--bjt-danger); }
.reading-kun { color: #1f68ad; }
:root[data-theme="dark"] .reading-kun { color: #80b9ed; }
.insight-warning { border-left: 3px solid var(--bjt-orange); background: var(--bjt-orange-soft); padding: 11px 13px; }
.insight-warning p { margin: 0; color: var(--bjt-body); font-size: 13px; }
.insight-tags { display: grid; gap: 7px; }
.insight-tags span { display: block; border: 1px solid var(--bjt-rule); background: var(--bjt-panel); padding: 8px 10px; color: var(--bjt-body); font-size: 12px; line-height: 1.55; }
.insight-traps .insight-tags span { border-color: color-mix(in srgb, var(--bjt-danger) 34%, var(--bjt-rule)); }
.insight-traps b { color: var(--bjt-danger); }
.insight-collocations .insight-tags span { border-color: color-mix(in srgb, #2986a8 38%, var(--bjt-rule)); }
.insight-synonyms .insight-tags { display: flex; flex-wrap: wrap; }
.insight-synonyms .insight-tags span { border-color: color-mix(in srgb, var(--bjt-success) 38%, var(--bjt-rule)); border-radius: 999px; }
.insight-synonyms .insight-tags span.is-related { border-style: dashed; }
.insight-synonyms .insight-tags span small { display: block; margin-top: 2px; color: var(--bjt-muted); font-size: 9px; }
.insight-empty { margin: 0; color: var(--bjt-muted); font-size: 12px; }
.insight-provenance { margin: 0; border-top: 1px solid var(--bjt-rule); padding-top: 9px; color: var(--bjt-muted); font-size: 10px; line-height: 1.5; }
.grammar-formation { border: 1px solid var(--bjt-rule); background: var(--bjt-panel); padding: 10px 12px; color: var(--bjt-ink); font-family: var(--bjt-serif); font-size: 16px; }
.grammar-insight .insight-core { margin-top: 0; }
.dictionary-credit { margin: 12px 0 0; color: var(--bjt-muted); font-size: 9px; line-height: 1.45; }
.dictionary-credit a { color: inherit; text-underline-offset: 2px; }
.empty-state { border-top: 1px solid var(--bjt-rule); padding: 46px 0; color: var(--bjt-muted); }

.path-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 30px; border-top: 1px solid var(--bjt-rule); padding: 28px 0; }
.path-level strong { display: block; font-size: 34px; line-height: 1; }
.path-level span { display: block; margin-top: 8px; color: var(--bjt-body); font-family: var(--bjt-serif); font-size: 18px; }
.path-level small { display: block; margin-top: 10px; color: var(--bjt-muted); font-size: 12px; }
.module-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module { min-height: 140px; border-left: 1px solid var(--bjt-rule); padding: 0 22px 20px; }
.module-index { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--bjt-rule-strong); border-radius: 50%; color: var(--bjt-muted); font-size: 12px; }
.module h3 { margin: 14px 0 3px; font-family: var(--bjt-serif); font-size: 17px; }
.module p { margin: 0; color: var(--bjt-body); font-size: 12px; }
.module button { margin-top: 14px; border: 0; background: transparent; padding: 0; color: var(--bjt-orange); font-size: 12px; font-weight: 650; cursor: pointer; }

.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--bjt-rule); border-bottom: 1px solid var(--bjt-rule); margin: 32px 0; }
.summary-item { padding: 22px 18px; border-right: 1px solid var(--bjt-rule); }
.summary-item:last-child { border-right: 0; }
.summary-item strong { display: block; font-size: 30px; font-weight: 620; }
.summary-item span { color: var(--bjt-muted); font-size: 12px; }
.exam-intro { max-width: 740px; padding-top: 26px; border-top: 1px solid var(--bjt-rule); }
.exam-intro h2 { margin: 0 0 8px; font-family: var(--bjt-serif); font-size: 24px; }
.exam-intro p { margin: 0; color: var(--bjt-body); }
.practice-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr); gap: 46px; border-top: 1px solid var(--bjt-rule); margin-top: 32px; padding-top: 30px; }
.config-label { display: block; margin-bottom: 12px; color: var(--bjt-muted); font: 650 11px/1.4 var(--bjt-mono); letter-spacing: .045em; text-transform: uppercase; }
.practice-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.practice-size { min-height: 82px; display: grid; place-content: center; border: 1px solid var(--bjt-rule-strong); background: transparent; color: var(--bjt-body); cursor: pointer; }
.practice-size strong { font: 650 25px/1 var(--bjt-mono); }
.practice-size span { margin-top: 7px; color: var(--bjt-muted); font-size: 11px; }
.practice-size.is-active { border-color: var(--bjt-orange); background: var(--bjt-orange-soft); color: var(--bjt-orange); }
.practice-size.is-active span { color: inherit; }
.practice-rules { display: grid; align-content: start; gap: 14px; border-left: 1px solid var(--bjt-rule); padding-left: 28px; }
.practice-rules > span { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px; color: var(--bjt-body); font-size: 13px; }
.practice-rules > span > span { display: block; }
.practice-rules i { color: var(--bjt-orange); }
.practice-rules strong { color: var(--bjt-ink); font-weight: 620; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; max-width: 340px; border: 1px solid var(--bjt-rule-strong); background: var(--bjt-dark); color: var(--bjt-paper); padding: 12px 16px; font-size: 13px; box-shadow: 0 14px 40px rgba(0,0,0,.16); }
.loading-state { width: min(580px, calc(100% - 48px)); margin: 18vh auto 0; color: var(--bjt-muted); }
.loading-line { display: block; width: 35%; height: 2px; background: var(--bjt-orange); animation: loading 1.1s infinite alternate ease-in-out; }
.loading-state p { font-size: 13px; }
@keyframes loading { to { opacity: .45; } }

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar-head { padding-inline: 24px; }
  .sidebar-foot { padding-inline: 20px; }
  .view-shell { grid-template-columns: minmax(0, 1fr) 235px; }
  .main-column { padding-inline: 34px; }
  .session-rail { padding-inline: 24px; }
  .category-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-row { grid-template-columns: minmax(130px, .7fr) minmax(0, 1.35fr) minmax(110px, .6fr) auto; gap: 16px; }
  .subject-module-row { grid-template-columns: 48px 50px minmax(0, 1fr) auto; gap: 16px; }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--bjt-rule); }
  .sidebar-head { min-height: 68px; padding-inline: 18px; }
  .mobile-nav-toggle { display: inline-flex; }
  .primary-nav { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 12px 14px; }
  .primary-nav.is-open { display: grid; }
  .nav-item { min-height: 43px; padding-inline: 12px; }
  .nav-item::before { inset: auto 12px 0; width: auto; height: 2px; }
  .sidebar-foot { display: none; }
  .view-shell { display: block; min-height: auto; }
  .main-column { padding: 30px 24px 48px; }
  .session-rail { border: 0; border-top: 1px solid var(--bjt-rule); padding: 30px 24px 34px; }
  .session-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .session-step { grid-template-columns: 30px 1fr; min-height: 80px; }
  .session-step::after { display: none; }
  .step-num { width: 30px; height: 30px; }
  .path-group { grid-template-columns: 120px minmax(0, 1fr); }
  .module-list { grid-template-columns: 1fr; }
  .module { min-height: auto; padding-bottom: 28px; }
  .subject-module-row { grid-template-columns: 44px 48px minmax(0, 1fr); }
  .subject-module-row > button { grid-column: 3; justify-self: start; margin-bottom: 20px; }
  .practice-config { grid-template-columns: 1fr; }
  .practice-rules { border-left: 0; border-top: 1px solid var(--bjt-rule); padding: 22px 0 0; }
  .category-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-row { grid-template-columns: minmax(120px, .6fr) minmax(0, 1.4fr) auto; }
  .library-category { grid-column: 1; grid-row: 2; }
  .library-actions { grid-column: 3; grid-row: 1 / span 2; }
  .kanji-grid { grid-template-columns: 54px repeat(3, minmax(76px, .7fr)) minmax(130px, 1.4fr); overflow-x: auto; }
}

@media (max-width: 560px) {
  .primary-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-item { grid-template-columns: 22px 1fr auto; }
  .main-column { padding-inline: 18px; }
  .workspace .lh-dashboard { padding: 30px 18px 44px; }
  .view-title { font-size: 34px; }
  .date-line { flex-direction: column; gap: 4px; }
  .lesson-progress { margin-bottom: 32px; }
  .question-term { font-size: 29px; }
  .answer-option { grid-template-columns: 36px 1fr; min-height: 58px; padding-right: 10px; }
  .study-details { grid-template-columns: 1fr; }
  .study-details > div:nth-child(even):not(.detail-wide) { padding-left: 0; border-left: 0; }
  .primary-action { width: 100%; min-width: 0; }
  .session-rail { padding-inline: 18px; }
  .session-steps { grid-template-columns: 1fr; }
  .session-step { min-height: 62px; }
  .section-head { display: block; }
  .stat-inline { display: block; margin-top: 8px; }
  .search-row { grid-template-columns: 1fr; }
  .category-heading { display: grid; gap: 4px; }
  .category-filter { grid-template-columns: 1fr; }
  .library-row { grid-template-columns: 1fr; gap: 8px 14px; }
  .library-definition { grid-column: 1 / -1; grid-row: 2; }
  .library-category { grid-column: 1; grid-row: 3; }
  .library-actions { grid-column: 1; grid-row: 4; justify-content: flex-start; margin-top: 3px; }
  .library-insight { grid-column: 1; grid-row: 5; }
  .kanji-grid { grid-template-columns: 48px 86px 80px 80px 132px; overflow-x: auto; }
  .vocabulary-insight { padding: 11px; }
  .path-group { grid-template-columns: 1fr; gap: 22px; }
  .module { padding-left: 18px; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-item { border-right: 0; border-bottom: 1px solid var(--bjt-rule); }
  .summary-item:last-child { border-bottom: 0; }
  .toast { left: 16px; right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}