/* ─── Design Tokens ───────────────────────────────────────── */
:root {
    --app-scale: 1;
    --layout-viewport-width: 100vw;
    --layout-viewport-height: 100vh;
    /* ── Surface v2：画布 → 下沉区 → 基础面板 → 浮起内容 ── */
    --surface-canvas: #F0EDE7;
    --surface-sunken: #E6E2DA;
    --surface-base:   #F8F6F1;
    --surface-raised: #FFFDF9;
    --c-bg:          var(--surface-canvas);
    --c-surface:     var(--surface-raised);
    --c-panel:       var(--surface-base);
    --c-panel-alt:   var(--surface-sunken);
    --c-border:      #D3CEC5;
    --c-border-soft: #E5E0D8;
    --c-rule-strong: #C6C0B6;

    /* ── 墨色文字系统 ── */
    --c-ink:         #1D211F;   /* 主文字，接近墨色 */
    --c-ink-2:       #454A46;
    --c-ink-3:       #6B716C;
    --c-ink-4:       #91968F;

    /* 向后兼容别名 */
    --c-text:          var(--c-ink);
    --c-text-secondary: var(--c-ink-3);
    --c-panel-old:     var(--c-surface);

    /* ── 主功能色：青绿靛 ── */
    --c-primary:       #1F6964;
    --c-primary-hover: #18544F;
    --c-primary-soft:  #DDEEEA;
    --c-primary-border: #A3CCC5;
    --c-focus:         var(--c-primary);
    --c-focus-ring: rgba(31, 105, 100, 0.22);
    --c-accent:        #1F7357;
    --c-on-accent:     #FFFFFF;

    /* ── 常用语义组件色 ── */
    --c-favorite:        #B07D2A;
    --c-favorite-border: #D4A72C;
    --c-favorite-soft:   #FFF8E7;
    --c-favorite-text:   #7A551C;
    --c-info:            #0F766E;
    --c-info-soft:       #E8F7F5;
    --c-info-border:     #A9D7D1;
    --c-row-alt:         #F2EFE9;

    /* ── 顶部深色壳 ── */
    --top-surface: #13201E;
    --top-text: #A8BCB5;
    --top-text-strong: #D8E5E0;
    --top-accent: #83C8BE;
    --top-divider: #2B4440;

    /* ── 模块专属色 ── */
    --c-vocab:   var(--c-primary);
    --c-grammar: #625694;
    --c-grammar-hover: #4E447A;
    --c-grammar-soft: #ECE9F6;
    --c-lesson:  var(--c-primary);

    /* ── 功能辅助色 ── */
    --c-accent-red:  #A83240;   /* 朱红，N1/重要 */
    --c-accent-gold: #B07D2A;   /* 琥珀金，N3/收藏 */
    --c-play:        #1B7A5A;   /* 播放/成功 */
    --c-play-soft:   #E4F5EE;   /* 播放成功轻背景 */

    /* ── 状态色 ── */
    --c-ok:        #2D7D50;
    --c-ok-bg:     #E6F5EE;
    --c-ok-text:   #1A5235;
    --c-warn:      #A87028;
    --c-warn-bg:   #FBF0DC;
    --c-warn-text: #6B4410;
    --c-danger:    #A83240;
    --c-danger-bg: #FAEAED;
    --c-danger-text: #6B1825;

    /* ── JLPT 等级色 ── */
    --c-n5:  #4A8C6E;
    --c-n4:  #3A7A8A;
    --c-n3:  #B07D2A;
    --c-n2:  #A84830;
    --c-n1:  #7A3555;

    /* ── 图谱节点色（传给 Cytoscape，需与 graph-builder.js 对应）── */
    --c-word:           #4A8C6E;
    --c-word-outline:   #2A5C42;
    --c-domain:         #B07D2A;
    --c-domain-outline: #6B4410;
    --c-semantic:       #5A5098;
    --c-semantic-outline: #352E6A;
    --c-pos:            #A84830;
    --c-pos-outline:    #6B2010;

    /* ── 4/8px spacing 与控件尺寸 ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --content-gutter: clamp(18px, 3vw, 36px);
    --section-gap: clamp(22px, 2.4vw, 32px);
    --control-sm: 32px;
    --control-md: 40px;
    --control-lg: 48px;

    /* ── UX-306 动效：只强调可感知的状态变化 ── */
    --motion-panel-duration: 190ms;
    --motion-feedback-duration: 160ms;
    --motion-state-duration: 180ms;
    --motion-ease-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
    --motion-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── 字号层级 ── */
    --type-caption: 0.72rem;
    --type-ui-sm: 0.78rem;
    --type-ui: 0.85rem;
    --type-body: 0.92rem;
    --type-title-sm: 1.05rem;
    --type-title: 1.28rem;
    --type-display: 1.7rem;

    /* ── 几何系统 ── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-pill: 999px;

    /* ── 阴影 ── */
    --shadow-sm:   0 1px 2px rgba(29,33,31,0.05), 0 4px 12px rgba(29,33,31,0.035);
    --shadow-md:   0 6px 20px rgba(29,33,31,0.09);
    --shadow-lg:   0 14px 36px rgba(29,33,31,0.14);

    /* ── 字体系统（本地字体，无 CDN）── */
    --font-ja-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HiraMinProN-W3", "Noto Serif JP", serif;
    --font-ja-sans:  "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", "Noto Sans JP", sans-serif;
    --font-ui:       "Yu Gothic", "Meiryo", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    --font-mono:     "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, monospace;

    /* 向后兼容 */
    --font: var(--font-ui);
}

/* ─── Theme: dark reading desk (UX-500) ─────────────────────
   The dark palette keeps the same paper/ink hierarchy with deep green-black
   surfaces. It is a token swap, not an inversion, so Japanese body text and
   semantic feedback retain intentional contrast. */
[data-theme='dark'] {
    color-scheme: dark;
    --surface-canvas: #121918;
    --surface-sunken: #19231F;
    --surface-base: #212D29;
    --surface-raised: #2A3833;
    --c-bg: var(--surface-canvas);
    --c-surface: var(--surface-raised);
    --c-panel: var(--surface-base);
    --c-panel-alt: var(--surface-sunken);
    --c-border: #41574F;
    --c-border-soft: #30443D;
    --c-rule-strong: #526B62;
    --c-ink: #F2F7F4;
    --c-ink-2: #CFDDD7;
    --c-ink-3: #A3B4AD;
    --c-ink-4: #81958C;
    --c-text: var(--c-ink);
    --c-text-secondary: var(--c-ink-3);
    --c-panel-old: var(--c-surface);
    --c-primary: #82CFC4;
    --c-primary-hover: #A1E0D6;
    --c-primary-soft: #234540;
    --c-primary-border: #4E847A;
    --c-focus: var(--c-primary);
    --c-focus-ring: rgba(130, 207, 196, 0.3);
    --c-accent: #79D0A7;
    --c-on-accent: #13201D;
    --c-favorite: #E7B85F;
    --c-favorite-border: #CFA04A;
    --c-favorite-soft: #45371F;
    --c-favorite-text: #F6D894;
    --c-info: #67CEC2;
    --c-info-soft: #203F3B;
    --c-info-border: #4F8F86;
    --c-row-alt: #26332F;
    --top-surface: #0D1413;
    --top-text: #9BB4AC;
    --top-text-strong: #E1EEE8;
    --top-accent: #8FD9CE;
    --top-divider: #29433D;
    --c-grammar: #B8ABF0;
    --c-grammar-hover: #D0C6FF;
    --c-grammar-soft: #37314F;
    --c-accent-red: #F27B86;
    --c-accent-gold: #E7B85F;
    --c-play: #75DDB0;
    --c-play-soft: #203F34;
    --c-ok: #79D79D;
    --c-ok-bg: #1E4030;
    --c-ok-text: #A7E9BD;
    --c-warn: #E9B75C;
    --c-warn-bg: #46361D;
    --c-warn-text: #F6D894;
    --c-danger: #F27B86;
    --c-danger-bg: #45252B;
    --c-danger-text: #FFC0C7;
    --c-n5: #79CFA0;
    --c-n4: #78C3D8;
    --c-n3: #E7B85F;
    --c-n2: #EF967F;
    --c-n1: #D88AA9;
    --c-word: #79CFA0;
    --c-word-outline: #B1E3C5;
    --c-domain: #E7B85F;
    --c-domain-outline: #F6D894;
    --c-semantic: #B8ABF0;
    --c-semantic-outline: #D0C6FF;
    --c-pos: #EF967F;
    --c-pos-outline: #FFC0B0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 5px 18px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.38);
}

/* ─── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-ui);
    color: var(--c-ink);
    background: var(--c-bg);
    height: calc(100vh / var(--app-scale));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ─── Temporary phone compatibility notice ───────────────── */
.mobile-unsupported-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 18%, rgba(131, 200, 190, 0.2), transparent 42%),
        rgba(19, 32, 30, 0.96);
}

.mobile-unsupported-overlay[hidden] { display: none; }

.mobile-unsupported-dialog {
    width: min(100%, 390px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 32px 28px 28px;
    border: 1px solid rgba(163, 204, 197, 0.55);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
    color: var(--c-ink);
    text-align: center;
}

.mobile-unsupported-logo {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
}

.mobile-unsupported-eyebrow {
    margin: 0 0 8px;
    color: var(--c-primary);
    font-size: var(--type-ui-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mobile-unsupported-dialog h1 {
    margin: 0;
    font-size: clamp(1.45rem, 7vw, 1.85rem);
    line-height: 1.3;
}

.mobile-unsupported-dialog p:last-of-type {
    margin: 14px 0 24px;
    color: var(--c-ink-3);
    font-size: 0.94rem;
    line-height: 1.75;
}

.mobile-unsupported-continue {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    background: var(--c-primary);
    color: var(--c-on-accent);
    font: 700 var(--type-body)/1 var(--font-ui);
    cursor: pointer;
}

.mobile-unsupported-continue:hover { background: var(--c-primary-hover); }
.mobile-unsupported-continue:focus-visible { outline: 3px solid var(--c-focus-ring); outline-offset: 3px; }

@media (max-height: 560px) {
    .mobile-unsupported-overlay { align-items: start; padding: 12px; }
    .mobile-unsupported-dialog { max-height: calc(100dvh - 24px); padding: 18px 20px; }
    .mobile-unsupported-logo { width: 38px; height: 38px; margin-bottom: 8px; }
    .mobile-unsupported-eyebrow { margin-bottom: 4px; }
    .mobile-unsupported-dialog h1 { font-size: 1.35rem; }
    .mobile-unsupported-dialog p:last-of-type { margin: 8px 0 14px; line-height: 1.5; }
}

html {
    overflow: hidden;
}
h1 { font-size: 1.1rem; font-weight: 760; color: var(--c-ink); letter-spacing: 0.01em; }
h2 { font-size: 0.95rem; font-weight: 760; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border-soft); color: var(--c-ink); }

::selection { background: var(--c-primary-soft); color: var(--c-ink); }

.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;
}

:where(button, input, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--c-focus-ring);
}

/* ─── Status Bar (顶部) ──────────────────────────────────── */
.status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 6px 18px;
    background: var(--top-surface);
    color: var(--top-text);
    font-size: 0.76rem;
    flex-shrink: 0;
    z-index: 200;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.status-left, .status-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.status-item { opacity: 0.75; }
.status-item strong { color: var(--top-text-strong); font-weight: 600; opacity: 1; }
.status-sep { color: var(--top-divider); margin: 0 1px; }
.status-mode { opacity: 0.7; }
.status-mode strong { color: var(--top-accent); }
.status-countdown { white-space: nowrap; opacity: 0.75; }
.status-countdown strong { color: #C8A84A; }
.btn-back {
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--top-accent);
    font-size: 0.73rem;
    cursor: pointer;
    flex: none;
    margin-left: 6px;
    font-weight: 600;
    transition: background 0.15s;
    letter-spacing: 0.2px;
}
.btn-back:hover { background: rgba(255,255,255,0.08); }

.status-bar-action,
.status-bar-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.04);
    color: var(--top-accent);
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.status-bar-action:hover,
.status-bar-reveal:hover {
    background: rgba(255,255,255,0.10);
}

.app-scale-control,
.app-theme-control,
.app-density-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 2px 4px 2px 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.04);
    color: var(--top-accent);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.app-scale-control::after {
    content: attr(data-applied-scale);
    color: var(--top-text-strong);
    font-variant-numeric: tabular-nums;
}

.app-scale-control select,
.app-theme-control select,
.app-density-control select {
    min-width: 48px;
    padding: 1px 3px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--top-text-strong);
    font: inherit;
    cursor: pointer;
}

.app-scale-control select option,
.app-theme-control select option,
.app-density-control select option {
    background: var(--top-surface);
    color: var(--top-text-strong);
}
.status-bar-reveal-controls {
    display: none;
    position: fixed;
    top: 8px;
    right: 10px;
    z-index: 320;
    align-items: center;
    gap: 8px;
}
.status-bar-reveal {
    background: var(--top-surface);
    box-shadow: var(--shadow-md);
}
body.status-bar-collapsed .status-bar {
    display: none;
}
body.status-bar-collapsed .status-bar-reveal-controls,
body.status-bar-collapsed .status-bar-reveal {
    display: inline-flex;
}
/* ─── Progress Strip (学习时间 / 打卡) ───────────────────── */
.progress-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: #C8D6D1;
    border-bottom: 0;
    flex: none;
    z-index: 210;
    font-size: 0.73rem;
}
.progress-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.045);
    white-space: nowrap;
}
.progress-label { color: #8FA29C; }
.progress-metric strong {
    color: #E2ECE8;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#progressCheckinStatus.checked { color: #C8A84A; }
.progress-calendar-toggle {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(122,189,181,0.35);
    border-radius: var(--radius-sm);
    background: transparent;
    color: #7ABDB5;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 20px;
}
.progress-calendar-toggle:hover { background: rgba(122,189,181,0.12); }
.progress-sync {
    display: none;
    color: #82958F;
    white-space: nowrap;
    margin-left: 2px;
}
.progress-calendar {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 248px;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-ink);
    box-shadow: var(--shadow-lg);
    z-index: 500;
}
.progress-calendar.open { display: block; }
.progress-calendar-title {
    margin-bottom: 9px;
    color: var(--c-ink-2);
    font-size: 0.82rem;
    font-weight: 700;
}
.progress-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.progress-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-xs);
    background: var(--c-panel);
    color: var(--c-ink-3);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.progress-day.checked {
    border-color: rgba(45,106,106,0.35);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 700;
}
.progress-day.partial {
    border-color: rgba(176,125,42,0.35);
    background: #FBF0DC;
    color: #7A551C;
}
.progress-day.today {
    outline: 2px solid rgba(122,189,181,0.5);
    outline-offset: 1px;
}
.progress-calendar-legend {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    color: var(--c-ink-3);
    font-size: 0.7rem;
}
.progress-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.progress-calendar-legend i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    border: 1px solid var(--c-border);
}
.progress-calendar-legend i.checked { background: var(--c-primary-soft); border-color: rgba(45,106,106,0.35); }
.progress-calendar-legend i.partial { background: #FBF0DC; border-color: rgba(176,125,42,0.35); }
.progress-calendar-legend i.today { background: transparent; border-color: #7ABDB5; }

/* ─── Layout ─────────────────────────────────────────────── */
.app-container { display: flex; flex: 1; overflow: hidden; }

/* ─── Daily Learning Dashboard ───────────────────────────── */
.dashboard-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: var(--surface-canvas);
}

.dashboard-loading {
    display: grid;
    min-height: 100%;
    place-items: center;
    color: var(--c-ink-3);
}

.dashboard-shell {
    width: min(1200px, calc(100% - (var(--content-gutter) * 2)));
    margin: 0 auto;
    padding: 26px 0 44px;
}

.dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: 18px;
}

.dashboard-eyebrow,
.dashboard-card-kicker,
.dashboard-section-title > div > span {
    color: var(--c-primary);
    font-size: var(--type-caption);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-heading h1 {
    margin: 2px 0 1px;
    font-family: var(--font-ja-serif);
    font-size: 1.72rem;
    line-height: 1.3;
}

.dashboard-heading p {
    color: var(--c-ink-3);
    font-size: var(--type-ui);
}

.dashboard-day-mark {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 5px;
    padding: 6px 11px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
    color: var(--c-ink-3);
}

.dashboard-day-mark span {
    grid-column: 1 / -1;
    font-size: var(--type-caption);
    font-weight: 700;
}

.dashboard-day-mark strong {
    color: var(--c-ink);
    font-size: 1.35rem;
    line-height: 1;
}

.dashboard-day-mark small { font-size: var(--type-caption); }

.dashboard-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.dashboard-plan-action,
.dashboard-inline-action {
    display: inline-flex;
    min-height: var(--control-md);
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--c-primary);
    cursor: pointer;
    font-size: var(--type-ui-sm);
    font-weight: 800;
}

.dashboard-plan-action { padding: 0 11px; }
.dashboard-plan-action ui-icon { width: 15px; height: 15px; }
.dashboard-plan-action:hover,
.dashboard-inline-action:hover { border-color: var(--c-primary-border); background: var(--c-primary-soft); }

.dashboard-inline-action {
    min-height: 0;
    margin-left: 7px;
    padding: 3px 7px;
    vertical-align: middle;
    font-size: var(--type-caption);
}

.dashboard-plan-overlay {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.dashboard-plan-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 48, 45, 0.28);
}

.dashboard-plan-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(560px, 100%);
    max-height: min(720px, calc(var(--layout-viewport-height) - 40px));
    flex-direction: column;
    overflow: auto;
    padding: 24px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
}

.dashboard-plan-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--c-border-soft);
}

.dashboard-plan-heading .dashboard-card-kicker { margin-bottom: 5px; }
.dashboard-plan-heading h2 { margin: 0; padding: 0; border: 0; font-family: var(--font-ja-serif); font-size: 1.38rem; }
.dashboard-plan-heading p { margin-top: 5px; color: var(--c-ink-3); font-size: var(--type-ui-sm); }

.dashboard-plan-close {
    display: grid;
    width: 32px;
    height: 32px;
    flex: none;
    place-items: center;
    border: 1px solid var(--c-border-soft);
    border-radius: 50%;
    background: var(--surface-base);
    color: var(--c-ink-2);
    cursor: pointer;
}

.dashboard-plan-close:hover { border-color: var(--c-primary-border); color: var(--c-primary); }
.dashboard-plan-close ui-icon { width: 16px; height: 16px; }

.dashboard-plan-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 0;
}

.dashboard-plan-fields label { display: grid; min-width: 0; gap: 6px; color: var(--c-ink-2); font-size: var(--type-ui-sm); font-weight: 800; }
.dashboard-plan-fields input,
.dashboard-plan-fields select { width: 100%; min-height: var(--control-md); }
.dashboard-plan-fields small { color: var(--c-ink-4); font-size: var(--type-caption); font-weight: 500; line-height: 1.45; }
.dashboard-plan-input { display: flex; align-items: center; gap: 8px; }
.dashboard-plan-input input { min-width: 0; }
.dashboard-plan-input strong { color: var(--c-ink-3); font-size: var(--type-ui-sm); white-space: nowrap; }

.dashboard-plan-notice {
    padding: 9px 11px;
    border: 1px solid var(--c-favorite-border);
    border-radius: var(--radius);
    background: var(--c-warn-bg);
    color: var(--c-warn-text);
    font-size: var(--type-ui-sm);
}

.dashboard-plan-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 17px;
    border-top: 1px solid var(--c-border-soft);
}

.dashboard-plan-footer > span { max-width: 260px; color: var(--c-ink-4); font-size: var(--type-caption); line-height: 1.45; }
.dashboard-plan-footer > div { display: flex; align-items: center; gap: 8px; flex: none; }

.dashboard-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
    gap: 18px;
    margin-bottom: var(--section-gap);
}

.dashboard-start-card,
.dashboard-progress-card {
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.dashboard-start-card {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    border-color: var(--c-primary-border);
    background: linear-gradient(120deg, var(--surface-raised) 0%, var(--c-primary-soft) 145%);
}

.dashboard-start-card::after {
    content: '学';
    position: absolute;
    top: -30px;
    right: 18px;
    color: rgba(37,100,97,0.055);
    font-family: var(--font-ja-serif);
    font-size: 10rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.dashboard-card-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.dashboard-card-kicker ui-icon { width: 16px; height: 16px; }

.dashboard-start-card h2 {
    position: relative;
    max-width: 560px;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-family: var(--font-ja-serif);
    font-size: 1.55rem;
    line-height: 1.35;
}

.dashboard-start-card > p {
    position: relative;
    max-width: 590px;
    color: var(--c-ink-2);
    font-size: var(--type-body);
}

.dashboard-start-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 12px 0;
    color: var(--c-ink-3);
    font-size: var(--type-ui-sm);
}

.dashboard-start-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-start-meta ui-icon { width: 15px; height: 15px; }

.dashboard-primary {
    position: relative;
    display: inline-flex;
    min-height: var(--control-lg);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius);
    background: var(--c-primary);
    color: var(--c-on-accent);
    box-shadow: 0 5px 14px rgba(37,100,97,0.2);
    font-size: 0.92rem;
    font-weight: 800;
    flex: none;
}

.dashboard-primary:hover:not(:disabled) {
    background: var(--c-primary-hover);
    box-shadow: 0 7px 18px rgba(37,100,97,0.25);
}

.dashboard-primary:disabled { cursor: wait; opacity: 0.56; }
.dashboard-primary ui-icon { width: 17px; height: 17px; }

.dashboard-start-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dashboard-secondary {
    flex: none;
    min-height: var(--control-md);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--c-ink-3);
    cursor: pointer;
    font-size: var(--type-ui-sm);
    font-weight: 700;
}

.dashboard-secondary:hover {
    border-color: var(--c-border);
    background: var(--surface-base);
    color: var(--c-ink);
}

.dashboard-progress-card { padding: 16px 18px; }

.dashboard-progress-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 8px;
}

.dashboard-progress-main strong {
    color: var(--c-primary);
    font-size: 2.25rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dashboard-progress-main span { color: var(--c-ink-3); font-size: var(--type-ui-sm); }

.dashboard-day-progress {
    height: 7px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
}

.dashboard-day-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c-primary);
}

.dashboard-progress-note {
    margin: 6px 0 12px;
    color: var(--c-ink-3);
    font-size: var(--type-caption);
    line-height: 1.4;
}

.dashboard-progress-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 1px solid var(--c-border-soft);
}

.dashboard-progress-grid > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 8px 6px;
    text-align: center;
}

.dashboard-progress-grid > div + div { border-left: 1px solid var(--c-border-soft); }

.dashboard-progress-grid strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.dashboard-progress-grid span { color: var(--c-ink-3); font-size: 0.66rem; white-space: nowrap; }

.dashboard-section { margin-bottom: var(--section-gap); }

.dashboard-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.dashboard-section-title.compact { align-items: center; }

.dashboard-section-title h2 {
    margin: 1px 0 0;
    padding: 0;
    border: 0;
    font-size: var(--type-title-sm);
}

.dashboard-section-title > small { color: var(--c-ink-4); font-size: var(--type-caption); }

.dashboard-task-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-task-card {
    display: grid;
    grid-template-columns: 34px 1fr 18px;
    min-width: 0;
    min-height: 78px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--c-ink);
    box-shadow: var(--shadow-sm);
    text-align: left;
}

.dashboard-task-card:hover:not(:disabled) {
    border-color: var(--c-primary-border);
    background: var(--c-primary-soft);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.dashboard-task-card:disabled { cursor: default; opacity: 0.58; }

.dashboard-task-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: var(--radius);
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.dashboard-task-icon ui-icon { width: 17px; height: 17px; }

.dashboard-task-copy {
    display: grid;
    min-width: 0;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 1px 8px;
}

.dashboard-task-copy small { color: var(--c-ink-2); font-size: var(--type-ui-sm); font-weight: 800; }
.dashboard-task-copy strong { grid-row: 1 / 3; grid-column: 2; color: var(--c-primary); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.dashboard-task-copy > span { overflow: hidden; color: var(--c-ink-3); font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.dashboard-task-arrow { color: var(--c-ink-4); }
.dashboard-task-arrow ui-icon { width: 18px; height: 18px; }

.dashboard-insights { margin-bottom: var(--section-gap); }

.dashboard-insight-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: stretch;
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 1px solid var(--c-border-soft);
}

.dashboard-insight-card[data-dashboard-insight="time"] { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--c-border-soft); }
.dashboard-insight-card[data-dashboard-insight="review"] { grid-column: 1; grid-row: 2; }
.dashboard-insight-card[data-dashboard-insight="content"] { grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--c-border-soft); }

.dashboard-insight-lower {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: start;
    margin-top: 12px;
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 1px solid var(--c-border-soft);
}

.dashboard-insight-lower .dashboard-insight-card + .dashboard-insight-card { border-left: 1px solid var(--c-border-soft); }

.dashboard-insight-card {
    min-width: 0;
    padding: 16px;
    background: transparent;
}

.dashboard-insight-card-head {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.dashboard-insight-card-head > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.dashboard-insight-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: none;
    place-items: center;
    border-radius: 9px;
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.dashboard-insight-icon.is-warm { background: var(--c-favorite-soft); color: var(--c-favorite); }
.dashboard-insight-icon.is-blue { background: #e7eef5; color: #416782; }
.dashboard-insight-icon ui-icon { width: 16px; height: 16px; }

.dashboard-insight-label {
    color: var(--c-ink-3);
    font-size: var(--type-caption);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.dashboard-insight-card-head strong {
    color: var(--c-ink);
    font-size: 1.12rem;
    line-height: 1.2;
}

.dashboard-insight-card p {
    margin: 0;
    color: var(--c-ink-3);
    font-size: var(--type-caption);
    line-height: 1.5;
}

.dashboard-insight-card p b { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }

.dashboard-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-sunken);
}

.dashboard-progress-track > span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: var(--c-primary);
    transition: width 180ms ease;
}

.dashboard-insight-card[data-dashboard-insight="review"] .dashboard-progress-track > span { background: var(--c-favorite); }

.dashboard-insight-card[data-dashboard-insight="review"] .dashboard-progress-track { margin: 11px 0 8px; }

.dashboard-insight-complete {
    display: inline-block;
    margin-top: 10px;
    color: var(--c-ok-text);
    font-size: var(--type-caption);
    font-weight: 700;
}

.dashboard-insight-link {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--c-primary);
    cursor: pointer;
    font-size: var(--type-caption);
    font-weight: 800;
}

.dashboard-insight-link:hover { background: var(--c-primary-soft); }
.dashboard-insight-link ui-icon { width: 14px; height: 14px; }

.dashboard-content-card .dashboard-insight-card-head { margin-bottom: 8px; }

.dashboard-content-progress + .dashboard-content-progress { margin-top: 10px; }

.dashboard-content-progress > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--c-ink-2);
    font-size: var(--type-caption);
    font-weight: 700;
}

.dashboard-content-progress > div:first-child strong {
    color: var(--c-ink-2);
    font-size: var(--type-caption);
    font-variant-numeric: tabular-nums;
}

.dashboard-content-progress .dashboard-progress-track { height: 5px; margin: 5px 0 3px; }
.dashboard-content-progress small { color: var(--c-ink-4); font-size: 0.64rem; }

.dashboard-content-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--c-border-soft);
}

.dashboard-insight-caption { color: var(--c-ink-4); font-size: 0.64rem; }

.dashboard-trend-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    min-height: 100px;
    padding: 4px 2px 0;
    border-bottom: 1px solid var(--c-border-soft);
}

.dashboard-trend-bar {
    display: grid;
    min-width: 0;
    grid-template-rows: 78px auto;
    align-items: end;
    gap: 5px;
    text-align: center;
}

.dashboard-trend-stack {
    display: grid;
    height: 78px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 2px;
}

.dashboard-trend-stack i {
    display: block;
    min-height: 0;
    border-radius: 3px 3px 0 0;
}

.dashboard-trend-unknown { background: var(--c-warn); }
.dashboard-trend-fuzzy { background: var(--c-primary); }

.dashboard-trend-bar small {
    overflow: hidden;
    color: var(--c-ink-4);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-trend-legend {
    display: flex;
    gap: 14px;
    margin-top: 9px;
    color: var(--c-ink-3);
    font-size: 0.64rem;
}

.dashboard-trend-legend span { display: inline-flex; align-items: center; gap: 5px; }

.dashboard-trend-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-primary);
}

.dashboard-trend-dot.is-unknown { background: var(--c-warn); }

.dashboard-weak-list {
    display: grid;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.dashboard-weak-list li {
    display: grid;
    min-width: 0;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    gap: 7px;
    padding: 5px 0;
    border-bottom: 1px solid var(--c-border-soft);
}

.dashboard-weak-list li:last-child { border-bottom: 0; }
.dashboard-weak-list strong { min-width: 0; color: var(--c-ink-2); font-size: var(--type-ui-sm); }
.dashboard-weak-list li > span:last-child { overflow: hidden; color: var(--c-ink-3); font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }

.dashboard-weak-status {
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--c-warn-bg);
    color: var(--c-warn-text);
    font-size: 0.6rem;
    font-weight: 800;
}

.dashboard-weak-status.fuzzy { background: var(--c-primary-soft); color: var(--c-primary); }

.dashboard-insight-empty {
    min-height: 74px;
    padding: 10px 0;
    color: var(--c-ink-3);
    font-size: var(--type-caption);
    line-height: 1.5;
}

.dashboard-achievements { margin-bottom: var(--space-6); }

.dashboard-achievement-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 1px solid var(--c-border-soft);
}

.dashboard-achievement-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 14px;
    background: transparent;
}

.dashboard-achievement-card + .dashboard-achievement-card { border-left: 1px solid var(--c-border-soft); }

.dashboard-achievement-card.is-complete {
    background: linear-gradient(180deg, transparent, rgba(45, 125, 80, 0.045));
}

.dashboard-achievement-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.dashboard-achievement-card.is-complete .dashboard-achievement-icon {
    background: var(--c-ok);
    color: var(--c-on-accent);
}

.dashboard-achievement-icon ui-icon { width: 17px; height: 17px; }

.dashboard-achievement-copy { min-width: 0; }

.dashboard-achievement-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
}

.dashboard-achievement-heading strong {
    overflow: hidden;
    color: var(--c-ink);
    font-size: var(--type-ui-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-achievement-heading > span {
    flex: none;
    color: var(--c-ink-4);
    font-size: 0.62rem;
    font-weight: 800;
}

.dashboard-achievement-card.is-complete .dashboard-achievement-heading > span { color: var(--c-ok-text); }

.dashboard-achievement-copy p {
    min-height: 2.85em;
    margin: 4px 0 8px;
    color: var(--c-ink-3);
    font-size: var(--type-caption);
    line-height: 1.45;
}

.dashboard-achievement-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-sunken);
}

.dashboard-achievement-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c-primary);
}

.dashboard-achievement-card.is-complete .dashboard-achievement-track > span { background: var(--c-ok); }

.dashboard-achievement-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
    margin-top: 5px;
    color: var(--c-ink-4);
    font-size: 0.62rem;
    line-height: 1.35;
}

.dashboard-achievement-meta > span:first-child {
    color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.dashboard-achievement-note { min-width: 0; text-align: right; }
.dashboard-achievement-note b { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }

.dashboard-recent {
    padding: 16px 0;
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 1px solid var(--c-border-soft);
    background: transparent;
}

.dashboard-text-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 7px;
    border: 0;
    background: transparent;
    color: var(--c-primary);
    font-size: var(--type-ui-sm);
    flex: none;
}

.dashboard-text-action:hover { background: var(--c-primary-soft); }
.dashboard-text-action ui-icon { width: 15px; height: 15px; }

.dashboard-recent-list { display: grid; grid-template-columns: repeat(3, 1fr); }
.dashboard-recent-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 14px; }
.dashboard-recent-item + .dashboard-recent-item { border-left: 1px solid var(--c-border-soft); }
.dashboard-recent-icon { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 50%; background: var(--c-ok-bg); color: var(--c-ok); }
.dashboard-recent-icon ui-icon { width: 15px; height: 15px; }
.dashboard-recent-item > div { display: flex; min-width: 0; flex-direction: column; }
.dashboard-recent-item strong { font-size: var(--type-ui-sm); }
.dashboard-recent-item span { overflow: hidden; color: var(--c-ink-3); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-recent-empty { padding: 10px 14px; color: var(--c-ink-3); font-size: var(--type-ui-sm); }

@media (max-width: 900px) {
    .dashboard-shell { width: min(100% - 28px, 720px); padding-top: 18px; }
    .dashboard-hero-grid { grid-template-columns: 1fr; }
    .dashboard-task-grid { grid-template-columns: 1fr; }
    .dashboard-insight-grid,
    .dashboard-insight-lower { grid-template-columns: 1fr; }
    .dashboard-insight-card[data-dashboard-insight="time"],
    .dashboard-insight-card[data-dashboard-insight="review"],
    .dashboard-insight-card[data-dashboard-insight="content"] { grid-column: auto; grid-row: auto; }
    .dashboard-insight-card[data-dashboard-insight="review"] { border-bottom: 1px solid var(--c-border-soft); }
    .dashboard-insight-card[data-dashboard-insight="content"] { border-left: 0; }
    .dashboard-insight-lower .dashboard-insight-card + .dashboard-insight-card { border-top: 1px solid var(--c-border-soft); border-left: 0; }
    .dashboard-achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-achievement-card:nth-child(2n + 1) { border-left: 0; }
    .dashboard-achievement-card:nth-child(n + 3) { border-top: 1px solid var(--c-border-soft); }
    .dashboard-recent-list { grid-template-columns: 1fr; }
    .dashboard-recent-item + .dashboard-recent-item { border-top: 1px solid var(--c-border-soft); border-left: 0; }
}

@media (max-width: 600px) {
    .dashboard-heading { align-items: flex-start; }
    .dashboard-day-mark { display: none; }
    .dashboard-heading-actions { align-items: flex-end; }
    .dashboard-plan-action { padding: 0 8px; font-size: var(--type-caption); }
    .dashboard-start-card { padding: 20px; }
    .dashboard-progress-grid { grid-template-columns: 1fr; }
    .dashboard-progress-grid > div + div { border-top: 1px solid var(--c-border-soft); border-left: 0; }
    .dashboard-insight-card { padding: 14px; }
    .dashboard-achievement-grid { grid-template-columns: 1fr; }
    .dashboard-achievement-card + .dashboard-achievement-card { border-top: 1px solid var(--c-border-soft); border-left: 0; }
    .dashboard-plan-overlay { padding: 10px; }
    .dashboard-plan-dialog { max-height: calc(var(--layout-viewport-height) - 20px); padding: 18px; }
    .dashboard-plan-fields { grid-template-columns: 1fr; gap: 13px; }
    .dashboard-plan-footer { align-items: flex-start; flex-direction: column; }
    .dashboard-plan-footer > span { max-width: none; }
    .dashboard-plan-footer > div { width: 100%; justify-content: flex-end; }
}

.sidebar {
    width: 288px;
    min-width: 220px;
    background: var(--surface-base);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--motion-panel-duration) var(--motion-ease-standard), min-width var(--motion-panel-duration) var(--motion-ease-standard);
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

/* Collapsed sidebar — only header strip visible */
.sidebar.sidebar-collapsed {
    width: 44px !important;
    min-width: 44px !important;
    overflow: hidden;
}
.sidebar.sidebar-collapsed .sidebar-header {
    flex-direction: column;
    padding: 10px 6px;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    border-bottom: none;
}
.sidebar.sidebar-collapsed .sidebar-header h1,
.sidebar.sidebar-collapsed .sidebar-header-right .badge {
    display: none;
}
.sidebar.sidebar-collapsed > *:not(.sidebar-header) {
    display: none !important;
}

/* ─── Resize Handle (detail panel drag) ─────────────────── */
.resize-handle {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    transition: background 0.15s;
}
.resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    width: 3px;
    height: 32px;
    border-radius: 2px;
    background: var(--c-border);
    opacity: 0;
    transition: opacity 0.2s;
}
.resize-handle:hover {
    background: var(--c-primary-soft);
}
.resize-handle:hover::after {
    opacity: 1;
}
.resize-handle.dragging {
    background: var(--c-primary-soft);
}
.resize-handle.dragging::after {
    opacity: 1;
    background: var(--c-primary);
}

.detail-panel {
    width: 320px;
    min-width: 260px;
    max-width: 520px;
    background: var(--surface-base);
    border-left: 1px solid var(--c-border);
    padding: 18px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--motion-panel-duration) var(--motion-ease-standard), min-width var(--motion-panel-duration) var(--motion-ease-standard);
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
.detail-panel.resizing {
    transition: none;
}
.detail-panel::-webkit-scrollbar { width: 4px; }
.detail-panel::-webkit-scrollbar-track { background: transparent; }
.detail-panel::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

/* Collapsed detail panel */
.detail-panel.detail-panel-collapsed {
    width: 40px !important;
    min-width: 40px !important;
    overflow: hidden;
    padding: 0;
}
.detail-panel.detail-panel-collapsed .detail-panel-header {
    flex-direction: column;
    padding: 10px 6px;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    border-bottom: none;
}
.detail-panel.detail-panel-collapsed .detail-panel-header h2 {
    display: none;
}
.detail-panel.detail-panel-collapsed > *:not(.detail-panel-header) {
    display: none !important;
}

.graph-area {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-canvas);
    overflow: hidden;
}

#graph-container { flex: 1; width: 100%; outline: none; }

/* ─── Sidebar Sections ──────────────────────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--c-rule-strong);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--surface-base) 82%, var(--surface-sunken));
}

.sidebar-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Collapse button shared styles */
.sidebar-collapse-btn,
.detail-collapse-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.5);
    color: var(--c-ink-3);
    font-size: 0.65rem;
    cursor: pointer;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    line-height: 1;
}
.sidebar-collapse-btn:hover,
.detail-collapse-btn:hover {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}

/* Detail panel header */
.detail-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-rule-strong);
}
.detail-panel-header h2 {
    margin: 0;
    padding: 0;
    border: none;
    flex: 1;
}

.badge {
    background: var(--c-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.2px;
}

.filter-section {
    flex: 1;
    padding: 14px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}

.sidebar-divider {
    border: 0;
    border-top: 1px solid var(--c-border-soft);
    margin: 10px 0;
}

.filter-group { margin-bottom: 12px; }
.filter-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.filter-group input[type="text"],
.filter-group select {
    width: 100%;
    min-height: var(--control-sm);
    padding: 6px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--c-surface);
    color: var(--c-ink);
    transition: border-color 0.2s;
    font-family: var(--font-ui);
}
.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
    background: #fff;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 7px 16px;
    border-top: 1px solid var(--c-border-soft);
    background: var(--c-panel-alt);
}

.filter-reset-action {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: var(--c-ink-3);
    font-size: var(--type-ui-sm);
    flex: none;
}
.filter-reset-action:hover { background: var(--c-panel); color: var(--c-primary); }
.filter-reset-action ui-icon { width: 14px; height: 14px; }

button {
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    flex: 1;
    font-family: var(--font-ui);
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.12s, box-shadow 0.15s;
}
button:active { opacity: 0.85; transform: scale(0.98); }
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
    min-height: var(--control-md);
    padding: 8px 16px;
}
.btn-primary { background: var(--c-primary); color: #fff; box-shadow: 0 2px 8px rgba(37,100,97,0.16); }
.btn-primary:hover { background: var(--c-primary-hover); box-shadow: 0 4px 12px rgba(37,100,97,0.2); }
.btn-secondary { background: var(--surface-raised); color: var(--c-ink-2); border: 1px solid var(--c-border); }
.btn-secondary:hover { background: var(--c-panel); border-color: #BEB2A2; }
.btn-ghost { background: transparent; color: var(--c-ink-2); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--c-panel-alt); color: var(--c-ink); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: var(--c-danger-text); }

.filter-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--c-border-soft);
    font-size: 0.82rem;
    background: var(--c-panel-alt);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--c-ink-3);
    font-size: 0.8rem;
}
.toggle-label input { accent-color: var(--c-primary); }

.match-info {
    margin-top: 6px;
    font-size: 0.77rem;
    color: var(--c-ink-4);
}

/* ─── Graph Stats Overlay ────────────────────────────────── */
.graph-stats {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255,255,255,0.95);
    padding: 10px 14px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: 0.82rem;
    border: 1px solid var(--c-border);
    pointer-events: none;
    line-height: 1.5;
}

/* ─── Overlay (Loading / Error) ──────────────────────────── */
.overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(240,235,225,0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.92rem;
    color: var(--c-ink-3);
    z-index: 100;
    backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }
.error-overlay { color: var(--c-danger); }

.loading-spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-detail {
    font-size: 0.75rem;
    color: var(--c-ink-4);
    text-align: center;
    max-width: 280px;
}

/* ─── List View ──────────────────────────────────────────── */
.list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: var(--surface-raised);
    font-size: 0.84rem;
}

.list-header {
    padding: 10px 18px;
    background: var(--c-panel);
    border-bottom: 1px solid var(--c-border-soft);
    font-size: 0.82rem;
    color: var(--c-ink-3);
}
.list-header strong { color: var(--c-ink); }

.list-filter-btn,
.cc-visibility-toggle {
    padding: 5px 10px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.list-filter-btn { margin-right: 8px; }
.list-filter-btn:hover,
.cc-visibility-toggle:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.list-filter-btn.active,
.cc-visibility-toggle.active {
    background: var(--c-primary-soft);
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.list-filter-btn.favorite.active {
    background: var(--c-favorite-soft);
    border-color: var(--c-favorite-border);
    color: var(--c-favorite-text);
}
.list-filter-btn span { opacity: 0.72; margin-left: 2px; }

.list-table-wrap {
    overflow-x: auto;
}

.list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.list-table thead {
    background: var(--c-panel-alt);
    position: sticky;
    top: 0;
    z-index: 10;
}

.list-table th {
    padding: 6px 10px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}

.list-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--c-border-soft);
    vertical-align: middle;
}

.list-row {
    cursor: pointer;
    transition: background 0.1s;
}
.list-table tbody .list-row:nth-child(odd) { background: var(--c-surface); }
.list-table tbody .list-row:nth-child(even) { background: var(--c-row-alt); }
.list-table tbody .list-row:hover { background: var(--c-panel); }
.list-table tbody .list-row.selected { background: var(--c-primary-soft); }
.list-row.selected td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }

.col-idx { width: 42px; color: var(--c-ink-4); font-size: 0.76rem; }
.col-word { min-width: 100px; }
.col-meaning { min-width: 120px; max-width: 200px; color: var(--c-ink-2); }
.col-level { width: 58px; }
.col-pos { width: 76px; }
.col-domain { min-width: 95px; }
.col-semantic { min-width: 95px; }
.col-action { width: 78px; text-align: center; white-space: nowrap; }

.list-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-right: 4px;
    border: 1px solid var(--c-border);
    border-radius: 5px;
    background: var(--c-surface);
    color: var(--c-ink-4);
    font-size: 1rem;
    font-family: Arial, sans-serif;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}
.list-fav-btn:hover,
.list-fav-btn.active {
    color: var(--c-favorite);
    border-color: var(--c-favorite-border);
    background: var(--c-favorite-soft);
}

.level-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--c-panel-alt);
    color: var(--c-ink-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.level-badge.n1 { background: rgba(122,53,85,0.1); color: var(--c-n1); }
.level-badge.n2 { background: rgba(168,72,48,0.1); color: var(--c-n2); }
.level-badge.n3 { background: rgba(176,125,42,0.1); color: var(--c-n3); }
.level-badge.n4 { background: rgba(58,122,138,0.1); color: var(--c-n4); }
.level-badge.n5 { background: rgba(74,140,110,0.1); color: var(--c-n5); }

.btn-sm {
    padding: 3px 8px;
    font-size: 0.76rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink-2);
    cursor: pointer;
    flex: none;
    transition: background 0.15s;
    font-family: var(--font-ui);
}
.btn-sm:hover { background: var(--c-panel-alt); }

/* ─── Pagination ─────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 20px;
    border-top: 1px solid var(--c-border);
    background: var(--surface-base);
    flex-wrap: wrap;
}

.btn-page {
    padding: 5px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    flex: none;
    transition: all 0.15s;
    font-family: var(--font-ui);
}
.btn-page:hover:not(.disabled):not(.active) { background: var(--c-panel-alt); }
.btn-page.active {
    background: var(--c-primary);
    color: var(--c-on-accent);
    border-color: var(--c-primary);
}
.btn-page.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.page-size-wrap {
    margin-left: 14px;
    font-size: 0.78rem;
    color: var(--c-ink-3);
}
.page-size-select {
    padding: 4px 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--font-ui);
}

/* ─── Detail Panel ───────────────────────────────────────── */
.detail-content .placeholder-text {
    color: var(--c-ink-4);
    text-align: center;
    margin-top: 60px;
    font-size: 0.88rem;
    line-height: 1.8;
}

.detail-content h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-primary);
}

.detail-item { margin-bottom: 14px; }
.detail-item .detail-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.detail-item .detail-value {
    font-size: 0.92rem;
    line-height: 1.5;
    word-break: break-word;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }

/* ─── Unified Chip / Tag System ─────────────────────────────
   All tags are pill-shaped. Use .tag-badge as base + modifier.
   ──────────────────────────────────────────────────────────── */
.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.6;
}
.tag-badge.domain   { background: rgba(176,125,42,0.12); color: var(--c-accent-gold); }
.tag-badge.semantic { background: rgba(90,80,152,0.1); color: var(--c-grammar); }
.tag-badge.neutral  { background: var(--c-panel-alt); color: var(--c-ink-2); }
.tag-badge.ok       { background: var(--c-ok-bg);     color: var(--c-ok-text); }
.tag-badge.warn     { background: var(--c-warn-bg);   color: var(--c-warn-text); }
.tag-badge.danger   { background: var(--c-danger-bg); color: var(--c-danger-text); }

.divider { margin: 12px 0; border: 0; border-top: 1px solid var(--c-border-soft); }

/* ─── Detail Action Buttons ──────────────────────────────── */
.detail-actions {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.detail-actions button {
    padding: 6px 12px;
    font-size: 0.76rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink-2);
    cursor: pointer;
    flex: none;
    font-weight: 500;
    transition: all 0.15s;
    font-family: var(--font-ui);
}
.detail-actions button:hover { background: var(--c-panel-alt); }
.detail-actions .btn-action-primary {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.detail-actions .btn-action-primary:hover { background: var(--c-primary-hover); }

/* ─── Debug Field ────────────────────────────────────────── */
.debug-field {
    display: none;
    background: var(--c-warn-bg);
    border-left: 3px solid var(--c-warn);
    padding: 10px;
    margin-top: 14px;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--c-warn-text);
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}
.debug-field strong { display: block; margin-bottom: 6px; font-size: 0.75rem; }
body.debug-mode .debug-field { display: block; }

/* ─── Color Utilities ────────────────────────────────────── */
.c-green  { color: var(--c-ok); }
.c-amber  { color: var(--c-warn); }
.c-red    { color: var(--c-danger); }
.c-purple { color: var(--c-grammar); }

/* ─── Study Container ────────────────────────────────────── */
.study-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 20px;
    background: var(--c-bg);
}

/* ─── Study Setup Panel ──────────────────────────────────── */
.study-setup {
    max-width: 520px;
    width: 100%;
}

.study-setup-header {
    text-align: center;
    margin-bottom: 28px;
}
.study-setup-header h2 {
    font-size: 1.5rem;
    border: 0;
    padding: 0;
    margin-bottom: 6px;
}
.study-subtitle {
    color: var(--c-ink-3);
    font-size: 0.85rem;
}

.study-info-card {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    border: 1px solid var(--c-border-soft);
}
.study-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 0.85rem;
}
.study-info-row + .study-info-row {
    border-top: 1px solid var(--c-border-soft);
}

.study-config {
    margin-bottom: 20px;
}
.study-config label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-ink-3);
    margin-bottom: 8px;
}

.study-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.study-mode-btn {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-ink-2);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.study-mode-btn strong,
.study-mode-btn span { display: block; }
.study-mode-btn strong {
    margin-bottom: 3px;
    color: var(--c-ink);
    font-size: var(--type-ui-sm);
}
.study-mode-btn span {
    color: var(--c-ink-4);
    font-size: var(--type-caption);
    line-height: 1.35;
}
.study-mode-btn:hover,
.study-mode-btn.active {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}
.study-mode-btn.active { box-shadow: inset 0 0 0 1px var(--c-primary); }

.study-count-btns {
    display: flex;
    gap: 8px;
}
.study-count-btn {
    flex: 1;
    padding: 10px;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-ui);
}
.study-count-btn:hover:not([disabled]) {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}
.study-count-btn.active {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: var(--c-on-accent);
}
.study-count-btn[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-study-start {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--c-primary);
    color: var(--c-on-accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37,100,97,0.24);
    font-family: var(--font-ui);
}
.btn-study-start:hover:not([disabled]) {
    transform: translateY(-1px);
    background: var(--c-primary-hover);
    box-shadow: 0 6px 16px rgba(37,100,97,0.3);
}
.btn-study-start[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.study-divider {
    border: 0;
    border-top: 1px dashed var(--c-border-soft);
    margin: 24px 0;
}

.study-review-section h3 {
    font-size: 0.92rem;
    margin-bottom: 12px;
    color: var(--c-ink-3);
}

.study-review-btns {
    display: flex;
    gap: 8px;
}
.btn-review {
    flex: 1;
    padding: 10px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    font-family: var(--font-ui);
}
.btn-review:hover:not([disabled]) {
    background: var(--c-primary-soft);
    border-color: var(--c-primary);
}
.btn-review[disabled] { opacity: 0.4; cursor: not-allowed; }
.review-count {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
    color: var(--c-primary);
}

/* ─── Flashcard ──────────────────────────────────────────── */
.study-card-view {
    max-width: 580px;
    width: 100%;
}

.study-progress {
    width: 100%;
    height: 5px;
    background: var(--c-border-soft);
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}
.study-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--c-primary), var(--c-play));
    border-radius: 3px;
    transition: width var(--motion-feedback-duration) var(--motion-ease-standard);
}

.study-stats-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--c-ink-3);
}

/* ─── Mixed Practice ─────────────────────────────────────── */
.practice-view { max-width: 680px; }
.practice-type-pill {
    margin-right: auto;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-size: var(--type-caption);
}
.study-source-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    padding: 8px 12px;
    border: 1px solid rgba(37,100,97,0.24);
    border-radius: var(--radius-md);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-size: var(--type-caption);
}
.study-source-banner span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}
.study-source-banner small { color: var(--c-ink-3); }
.practice-notice {
    margin-bottom: var(--space-2);
    padding: 8px 11px;
    border: 1px solid rgba(168,112,40,0.26);
    border-radius: var(--radius-md);
    background: var(--c-warn-bg);
    color: var(--c-warn-text);
    font-size: var(--type-caption);
}
.practice-card {
    min-height: 400px;
    padding: 28px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.practice-kicker {
    margin-bottom: var(--space-3);
    color: var(--c-ink-3);
    font-size: var(--type-ui);
    font-weight: 700;
}
.practice-prompt {
    max-width: 580px;
    margin: 0 auto 24px;
    border: 0;
    color: var(--c-ink);
    font-family: var(--font-ja-sans);
    font-size: clamp(1.7rem, 4vw, 2.55rem);
    line-height: 1.35;
}
.practice-prompt-sentence {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.65;
}
.practice-prompt-listening { margin-bottom: var(--space-3); font-size: var(--type-title); }
.practice-listening-mark {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-3);
    place-items: center;
    border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary);
}
.practice-listening-mark ui-icon { width: 30px; height: 30px; }
.practice-translation {
    margin: -14px auto 20px;
    color: var(--c-ink-3);
    font-size: var(--type-ui);
}
.btn-practice-audio {
    min-height: var(--control-md);
    margin: 0 auto 22px;
    padding: 8px 16px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-pill);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    cursor: pointer;
    font-weight: 700;
}
#practiceAudioProbe { display: none; }
.practice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.practice-option {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    padding: 10px 13px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
    font-family: var(--font-ja-sans);
    font-size: var(--type-body);
    text-align: left;
}
.practice-option:hover:not([disabled]) {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}
.practice-option.is-correct {
    border-color: var(--c-ok);
    background: var(--c-ok-bg);
}
.practice-option.is-wrong {
    border-color: var(--c-danger);
    background: var(--c-danger-bg);
}
.practice-option[disabled] { cursor: default; opacity: 1; }
kbd {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
}
.practice-option kbd {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--c-border);
    border-radius: 5px;
    background: var(--surface-sunken);
    color: var(--c-ink-3);
}
.practice-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    max-width: 520px;
    margin: 0 auto;
}
.practice-input-row input {
    min-width: 0;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--font-ja-sans);
    font-size: 1.05rem;
}
.practice-input-row input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.practice-input-row button,
.btn-practice-next {
    min-height: var(--control-md);
    padding: 8px 18px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--c-primary);
    color: var(--c-on-accent);
    cursor: pointer;
    font-weight: 700;
}
.practice-normalize-hint {
    margin-top: 8px;
    color: var(--c-ink-4);
    font-size: var(--type-caption);
}
.practice-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: var(--type-ui);
}
.practice-feedback.is-correct { background: var(--c-ok-bg); color: var(--c-ok); }
.practice-feedback.is-wrong { background: var(--c-danger-bg); color: var(--c-danger); }
.practice-feedback span { color: var(--c-ink-2); }
.practice-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.practice-actions button { flex: none; }
.practice-actions .btn-practice-next { order: 2; }
.practice-actions .btn-practice-favorite { order: 1; }
.practice-actions .btn-practice-skip { order: 3; }
.study-result-exercise-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}
.study-result-exercise {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-size: var(--type-caption);
}
.study-result-exercise span { color: var(--c-ink-3); }
.study-result-exercise strong { color: var(--c-ink); }
.study-result-exercise small { grid-column: 1 / -1; color: var(--c-primary); font-weight: 700; }

@media (max-width: 700px) {
    .practice-card { min-height: 0; padding: 20px; }
    .practice-options { grid-template-columns: 1fr; }
    .practice-input-row { grid-template-columns: 1fr; }
}

.flashcard {
    perspective: 1000px;
    min-height: 340px;
    margin-bottom: 18px;
    cursor: pointer;
}
.flashcard-front,
.flashcard-back {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 28px 24px;
    border: 1px solid var(--c-border-soft);
}

/* 未翻转时隐藏反面 */
.flashcard .flashcard-back { display: none; }
.flashcard .flashcard-front { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; }

/* 翻转后隐藏正面 */
.flashcard.flipped .flashcard-front { display: none; }
.flashcard.flipped .flashcard-back { display: block; animation: fadeIn var(--motion-feedback-duration) var(--motion-ease-standard); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.fc-level { margin-bottom: 14px; }
.fc-word {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: 8px;
    text-align: center;
    font-family: var(--font-ja-sans);
}
.fc-label {
    font-size: 1.05rem;
    color: var(--c-ink-3);
    text-align: center;
}
.fc-hint {
    margin-top: 24px;
    font-size: 0.76rem;
    color: var(--c-ink-4);
}

.fc-word-sm {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fc-meaning {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.5;
    color: var(--c-text);
}
.fc-divider {
    border: 0;
    border-top: 1px solid var(--c-border-soft);
    margin: 12px 0;
}

.fc-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    font-size: 0.84rem;
}
.fc-detail.fc-full { grid-column: span 2; }
.fc-dt {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--c-ink-3);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.fc-dd { line-height: 1.5; }
.fc-example {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--c-ink-2);
    font-family: var(--font-ja-sans);
}

/* ─── Feedback Buttons ───────────────────────────────────── */
.study-feedback {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.fb-btn {
    flex: 1;
    padding: 12px 4px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.fb-known { background: var(--c-ok-bg); color: var(--c-ok); border-color: rgba(45,125,80,0.25); }
.fb-known:hover { background: rgba(45,125,80,0.18); }
.fb-fuzzy { background: var(--c-warn-bg); color: var(--c-warn); border-color: rgba(168,112,40,0.25); }
.fb-fuzzy:hover { background: rgba(168,112,40,0.18); }
.fb-unknown { background: var(--c-danger-bg); color: var(--c-danger); border-color: rgba(168,50,64,0.25); }
.fb-unknown:hover { background: rgba(168,50,64,0.18); }
.fb-skip { background: var(--c-panel-alt); color: var(--c-ink-3); border-color: var(--c-border); }
.fb-skip:hover { background: var(--c-border-soft); }

/* ─── Study Nav Buttons ────────────────────────────────────── */
.study-nav-btns {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.btn-study-nav {
    padding: 7px 14px;
    font-size: 0.76rem;
    font-weight: 500;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    color: var(--c-ink-3);
    cursor: pointer;
    flex: none;
    transition: all 0.15s;
    font-family: var(--font-ui);
}
.btn-study-nav:hover { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }
.study-favorite-action { color: var(--c-grammar); }
.study-favorite-action[aria-pressed='true'] {
    border-color: rgba(90, 80, 152, 0.35);
    background: rgba(90, 80, 152, 0.1);
}

/* ─── Study Complete ─────────────────────────────────────── */
.study-complete {
    max-width: 780px;
    width: 100%;
    display: grid;
    gap: var(--space-3);
}
.study-result-header {
    text-align: center;
    margin-bottom: var(--space-1);
}
.study-result-kicker,
.study-result-panel-heading span {
    display: block;
    color: var(--c-primary);
    font-size: var(--type-caption);
    font-weight: 800;
    letter-spacing: 0.08em;
}
.study-result-header h2 {
    border: 0;
    padding: 0;
    margin: 4px 0;
    font-family: var(--font-ja-serif);
    font-size: var(--type-display);
}
.study-result-header p {
    color: var(--c-ink-3);
    font-size: var(--type-ui);
}
.study-result-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.study-result-metric {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    text-align: center;
    border-right: 1px solid var(--c-border-soft);
}
.study-result-metric:last-child { border-right: 0; }
.study-result-metric > span {
    display: block;
    margin-bottom: 2px;
    color: var(--c-ink-3);
    font-size: var(--type-caption);
}
.study-result-metric strong {
    font-family: var(--font-mono);
    font-size: 1.55rem;
    line-height: 1.1;
}
.study-result-metric strong.study-result-duration { font-size: 1.05rem; }
.study-result-metric small {
    margin-left: 3px;
    color: var(--c-ink-4);
    font-size: var(--type-caption);
}
.study-result-panel {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}
.study-result-panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.study-result-panel-heading h3 {
    margin: 2px 0 0;
    font-size: var(--type-body);
}
.study-result-panel-heading small {
    color: var(--c-ink-4);
    font-size: var(--type-caption);
}
.study-result-distribution {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}
.study-result-segment {
    height: 100%;
}
.study-result-segment.is-known,
.study-result-dot.is-known { background: var(--c-ok); }
.study-result-segment.is-fuzzy,
.study-result-dot.is-fuzzy { background: var(--c-warn); }
.study-result-segment.is-unknown,
.study-result-dot.is-unknown { background: var(--c-danger); }
.study-result-segment.is-skipped,
.study-result-dot.is-skipped { background: var(--c-ink-4); }
.study-result-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.study-result-legend > div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--c-ink-3);
    font-size: var(--type-caption);
}
.study-result-legend strong { color: var(--c-ink); }
.study-result-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.study-result-weak-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
.study-result-weak-item {
    display: grid;
    grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.study-result-weak-item > div { min-width: 0; }
.study-result-weak-item strong {
    display: block;
    overflow: hidden;
    font-family: var(--font-ja-sans);
    font-size: var(--type-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.study-result-weak-item > div span {
    display: block;
    overflow: hidden;
    color: var(--c-ink-4);
    font-size: var(--type-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.study-result-weak-item p {
    min-width: 0;
    overflow: hidden;
    color: var(--c-ink-3);
    font-size: var(--type-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.study-result-weak-item > small {
    font-size: var(--type-caption);
    font-weight: 700;
}
.study-result-weak-item > small.is-unknown { color: var(--c-danger); }
.study-result-weak-item > small.is-fuzzy { color: var(--c-warn); }
.study-result-weak-empty {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--c-ink-3);
    font-size: var(--type-ui);
    text-align: center;
}
.study-complete-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: var(--space-1);
}
.study-complete-actions button { flex: none; }
.study-complete-actions #btnReviewErrors span {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    margin-left: 3px;
    padding: 0 5px;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    font-size: var(--type-caption);
}
.study-complete-actions .btn-study-start {
    width: auto;
    min-height: var(--control-md);
    padding: 8px 16px;
    font-size: var(--type-ui-sm);
}

@media (max-width: 900px) {
    .study-result-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .study-result-metric:nth-child(2) { border-right: 0; }
    .study-result-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--c-border-soft); }
    .study-result-weak-list { grid-template-columns: 1fr; }
}

/* ─── Study Subview (错词本/模糊/收藏) ───────────────────── */
.study-subview {
    max-width: 600px;
    width: 100%;
}
.study-subview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.study-subview-header h2 {
    border: 0;
    margin: 0;
    padding: 0;
    flex: 1;
}
.btn-back-sub {
    padding: 6px 14px;
    font-size: 0.82rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--surface-raised);
    cursor: pointer;
    flex: none;
    font-weight: 600;
}
.btn-back-sub:hover { background: var(--c-panel-alt); }

.btn-review-start {
    padding: 8px 16px;
    font-size: 0.82rem;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    flex: none;
    font-weight: 600;
}
.btn-review-start:hover { background: var(--c-primary-hover); }

.study-empty {
    text-align: center;
    color: var(--c-text-secondary);
    padding: 60px 20px;
    font-size: 1rem;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.review-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    cursor: pointer;
    transition: all 0.1s;
}
.review-item:hover { background: #f8fafc; border-color: var(--c-primary); }
.ri-main { flex: 1; min-width: 0; }
.ri-main strong { font-size: 0.95rem; }
.ri-meaning {
    display: block;
    font-size: 0.78rem;
    color: var(--c-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ri-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.ri-pos { font-size: 0.78rem; color: var(--c-text-secondary); }
.btn-remove-word {
    padding: 2px 6px;
    font-size: 0.72rem;
    border: 1px solid #fecaca;
    border-radius: 3px;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
    flex: none;
}
.btn-remove-word:hover { background: #fef2f2; }

/* ─── List Batch Actions ─────────────────────────────────── */
.list-batch-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    font-size: 0.82rem;
}
.list-batch-bar button {
    padding: 5px 12px;
    font-size: 0.78rem;
    flex: none;
}
.col-check { width: 36px; text-align: center; }
.col-check input[type="checkbox"] {
    accent-color: var(--c-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   Card Catalog Mode (词卡目录)
   ═══════════════════════════════════════════════════════════════ */

/* ── Card Catalog Design Tokens ─────────────────────────────── */
:root {
    --cc-bg: var(--c-bg);
    --cc-bg2: var(--c-panel-alt);
    --cc-card: var(--c-surface);
    --cc-card-hover: var(--c-panel);
    --cc-border: var(--c-border);
    --cc-border-light: var(--c-border-soft);
    --cc-accent: var(--c-vocab);
    --cc-text: var(--c-ink);
    --cc-text2: var(--c-ink-2);
    --cc-muted: var(--c-ink-4);
    --cc-example-bg: var(--c-panel);
    --cc-example-border: var(--c-border);
    --cc-radius: var(--radius-md);
    --cc-shadow: var(--shadow-sm);
    --cc-shadow-hover: var(--shadow-md);
    --cc-n5: var(--c-n5);
    --cc-n4: var(--c-n4);
    --cc-n3: var(--c-n3);
    --cc-n2: var(--c-n2);
    --cc-n1: var(--c-n1);
    --cc-font-ja: var(--font-ja-sans);
}

/* ── Card Container ─────────────────────────────────────────── */
.card-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--surface-canvas);
    scroll-behavior: smooth;
}

.cc-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.cc-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--cc-muted);
}
.cc-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.6; }
.cc-empty-hint { font-size: 0.82rem; margin-top: 8px; }

/* ── Toolbar ────────────────────────────────────────────────── */
.cc-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface-base) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cc-border-light);
    padding: 14px 0 10px;
    margin-bottom: 20px;
}

/* Level tabs */
.cc-level-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.cc-tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--cc-border);
    background: var(--cc-card);
    color: var(--cc-text2);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: none;
}
.cc-tab:hover {
    border-color: var(--cc-accent);
    color: var(--cc-accent);
}
.cc-tab.active {
    background: var(--cc-text);
    color: var(--c-on-accent);
    border-color: var(--cc-text);
}
.cc-tab-count {
    font-weight: 400;
    font-size: 0.72rem;
    opacity: 0.7;
    margin-left: 2px;
}
.cc-tab.active .cc-tab-count { opacity: 0.85; }

/* Level-specific active colors */
.cc-tab-n5.active { background: var(--cc-n5); border-color: var(--cc-n5); }
.cc-tab-n4.active { background: var(--cc-n4); border-color: var(--cc-n4); }
.cc-tab-n3.active { background: var(--cc-n3); border-color: var(--cc-n3); }
.cc-tab-n2.active { background: var(--cc-n2); border-color: var(--cc-n2); }
.cc-tab-n1.active { background: var(--cc-n1); border-color: var(--cc-n1); }
.cc-tab-fav.active { background: var(--c-favorite); border-color: var(--c-favorite); color: var(--c-on-accent); }

/* Controls row */
.cc-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cc-controls .btn-primary,
.cc-controls .btn-secondary,
.cc-controls .btn-ghost {
    min-height: 32px;
    flex: none;
    white-space: nowrap;
}

.cc-start-study ui-icon {
    width: 15px;
    height: 15px;
}

.cc-visibility-toggle {
    height: 30px;
    flex: none;
}

.cc-stats {
    font-size: 0.82rem;
    color: var(--cc-text2);
    flex: 1;
    min-width: 120px;
}
.cc-stats strong { color: var(--cc-text); font-weight: 700; }

.cc-select {
    min-height: var(--control-sm);
    padding: 5px 10px;
    border: 1px solid var(--cc-border);
    border-radius: var(--radius-sm);
    background: var(--cc-card);
    font-size: 0.8rem;
    color: var(--cc-text);
    cursor: pointer;
    flex: none;
}
.cc-select:focus {
    outline: none;
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

.cc-btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--cc-border);
    border-radius: 6px;
    background: var(--cc-card);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex: none;
}
.cc-btn-icon:hover {
    border-color: var(--cc-accent);
    background: var(--c-primary-soft);
}

/* Batch dropdown */
.cc-batch-wrap {
    position: relative;
    flex: none;
}
.cc-btn-batch {
    padding: 5px 12px;
    border: 1px solid var(--cc-border);
    border-radius: 6px;
    background: var(--cc-card);
    font-size: 0.8rem;
    color: var(--cc-text2);
    cursor: pointer;
    flex: none;
}
.cc-btn-batch:hover { border-color: var(--cc-accent); color: var(--cc-text); }

.cc-batch-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    box-shadow: var(--cc-shadow-hover);
    min-width: 180px;
    z-index: 100;
    padding: 4px;
}
.cc-batch-menu.open { display: block; }

.cc-batch-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    font-size: 0.82rem;
    color: var(--cc-text);
    cursor: pointer;
    flex: initial;
}
.cc-batch-item:hover { background: var(--cc-bg); }

/* ── Card Grid ──────────────────────────────────────────────── */
.cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

/* ── Individual Card ────────────────────────────────────────── */
.cc-card {
    background: var(--cc-card);
    border-radius: var(--cc-radius);
    border: 1px solid var(--cc-border-light);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
    transition: box-shadow var(--motion-feedback-duration) var(--motion-ease-standard), transform var(--motion-feedback-duration) var(--motion-ease-standard), border-color var(--motion-feedback-duration) var(--motion-ease-standard);
    position: relative;
    display: flex;
    flex-direction: column;
}
.cc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--cc-border);
    border-radius: var(--cc-radius) 0 0 var(--cc-radius);
    transition: background 0.2s;
}
.cc-card[data-level="N5"]::before { background: var(--cc-n5); }
.cc-card[data-level="N4"]::before { background: var(--cc-n4); }
.cc-card[data-level="N3"]::before { background: var(--cc-n3); }
.cc-card[data-level="N2"]::before { background: var(--cc-n2); }
.cc-card[data-level="N1"]::before { background: var(--cc-n1); }

.cc-card:hover {
    box-shadow: var(--cc-shadow-hover);
    transform: translateY(-1px);
    border-color: var(--cc-border);
}

/* TTS 正在朗读的高亮：只在进入时提示一次，持续播放不脉冲。 */
@keyframes ttsReadingEnter {
    from { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
    to { box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.22); }
}

.cc-card.tts-reading {
    border-color: var(--c-info) !important;
    background-color: var(--c-info-soft) !important;
    animation: ttsReadingEnter var(--motion-feedback-duration) var(--motion-ease-standard) both;
}

tr.tts-reading > td {
    background-color: var(--c-info-soft) !important;
}

tr.tts-reading {
    outline: 2px solid var(--c-info);
    outline-offset: -2px;
    animation: ttsReadingEnter var(--motion-feedback-duration) var(--motion-ease-standard) both;
}

.tb-dialogue-turn.tts-reading {
    background-color: var(--c-info-soft);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 2px var(--c-info);
    animation: ttsReadingEnter var(--motion-feedback-duration) var(--motion-ease-standard) both;
}

/* Card head */
.cc-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 0 18px;
}

.cc-index {
    font-size: 0.7rem;
    font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
    color: var(--cc-muted);
    letter-spacing: 0.3px;
}

.cc-level {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    color: #FFF;
    background: var(--cc-muted);
    letter-spacing: 0.5px;
}
.cc-lv-n5 { background: var(--cc-n5); }
.cc-lv-n4 { background: var(--cc-n4); }
.cc-lv-n3 { background: var(--cc-n3); }
.cc-lv-n2 { background: var(--cc-n2); }
.cc-lv-n1 { background: var(--cc-n1); }

.cc-fav {
    margin-left: auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--cc-border);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.cc-fav:hover { color: var(--c-favorite); background: var(--c-favorite-soft); }
.cc-fav.active { color: var(--c-favorite); }

/* Card body */
.cc-card-body {
    padding: 8px 14px 12px 18px;
    cursor: pointer;
    flex: 1;
}

.cc-word {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--cc-text);
    font-family: var(--cc-font-ja);
    line-height: 1.35;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.cc-reading {
    font-size: 0.85rem;
    color: var(--cc-text2);
    margin-bottom: 6px;
    font-family: var(--cc-font-ja);
}

.cc-pos-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-bottom: 8px;
    transition: height 150ms ease, margin-bottom 150ms ease;
}
.cc-pos-badge {
    display: inline-block;
    flex: none;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: #F5EDE0;
    color: var(--cc-n2);
    letter-spacing: 0.3px;
}

.cc-meaning {
    flex: 1 1 120px;
    max-width: 100%;
    max-height: 5em;
    overflow: hidden;
    opacity: 1;
    font-size: 0.92rem;
    color: var(--cc-text);
    line-height: 1.55;
    font-weight: 500;
    transition: max-width 150ms ease, max-height 150ms ease, opacity 120ms ease, flex-basis 150ms ease;
}

.cc-hide-meanings .cc-meaning {
    flex-basis: 0;
    max-width: 0;
    max-height: 0;
    opacity: 0;
}

.cc-hide-meanings .cc-pos-only-meaning {
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
}

/* Example block */
.cc-example {
    background: var(--cc-example-bg);
    border-left: 3px solid var(--cc-example-border);
    border-radius: 0 6px 6px 0;
    padding: 10px 12px;
    margin-top: 4px;
    max-height: 300px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 150ms ease, padding 150ms ease, margin 150ms ease, opacity 120ms ease, border-left-width 150ms ease;
}

.cc-example-ja {
    font-size: 0.88rem;
    color: var(--cc-text);
    font-family: var(--cc-font-ja);
    line-height: 1.6;
    margin-bottom: 4px;
    transition: margin-bottom 150ms ease;
}
.cc-example-zh {
    max-height: 8em;
    overflow: hidden;
    opacity: 1;
    font-size: 0.82rem;
    color: var(--cc-text2);
    line-height: 1.5;
    transition: max-height 150ms ease, opacity 120ms ease;
}

.cc-hide-meanings .cc-example-zh {
    max-height: 0;
    opacity: 0;
}

.cc-hide-meanings .cc-example-ja {
    margin-bottom: 0;
}

.cc-hide-meanings .cc-example-zh-only {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-left-width: 0;
    opacity: 0;
}

.cc-meaning-transitioning {
    overflow-anchor: none;
    scroll-behavior: auto !important;
}
.cc-ex-label {
    font-weight: 600;
    color: var(--cc-muted);
    margin-right: 2px;
}

/* ── Card Extra (collapsed by default) ──────────────────────── */
.cc-card-extra {
    display: none;
    padding: 0 14px 8px 18px;
    border-top: 1px dashed var(--cc-border-light);
    margin-top: 4px;
}
.cc-card.cc-expanded .cc-card-extra {
    display: block;
    padding-top: 10px;
    animation: ccFadeIn var(--motion-panel-duration) var(--motion-ease-standard);
}

@keyframes ccFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cc-xrow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.82rem;
    color: var(--cc-text);
}
.cc-xlabel {
    flex: none;
    width: 40px;
    font-weight: 600;
    color: var(--cc-muted);
    font-size: 0.75rem;
    text-align: right;
    padding-top: 2px;
}
.cc-xtags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cc-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.cc-chip-domain {
    background: rgba(176,125,42,0.12);
    color: var(--c-accent-gold);
}
.cc-chip-sem {
    background: rgba(90,80,152,0.1);
    color: var(--c-grammar);
}

.cc-status-known { color: var(--c-ok); font-weight: 600; }
.cc-status-fuzzy { color: var(--c-warn); font-weight: 600; }
.cc-status-unknown { color: var(--c-danger); font-weight: 600; }

.cc-debug-row { display: none; }
body.debug-mode .cc-debug-row { display: flex; }

/* ── Card Footer ────────────────────────────────────────────── */
.cc-card-foot {
    display: flex;
    border-top: 1px solid var(--cc-border-light);
    background: var(--c-panel);
    border-radius: 0 0 var(--cc-radius) var(--cc-radius);
}

.cc-act {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-right: 1px solid var(--cc-border-light);
    background: transparent;
    color: var(--cc-text2);
    font-size: 0.73rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-ui);
}
.cc-act:last-child { border-right: 0; }
.cc-act:hover {
    background: var(--cc-bg);
    color: var(--cc-accent);
}

/* ── Pagination ─────────────────────────────────────────────── */
.cc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 10px;
    flex-wrap: wrap;
}

.cc-page-btn {
    padding: 7px 14px;
    border: 1px solid var(--cc-border);
    border-radius: 6px;
    background: var(--cc-card);
    color: var(--cc-text2);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    flex: none;
}
.cc-page-btn:hover:not([disabled]) {
    border-color: var(--cc-accent);
    color: var(--cc-accent);
}
.cc-page-btn[disabled],
.cc-page-btn.disabled {
    opacity: 0.4;
    cursor: default;
}

.cc-page-nums {
    display: flex;
    gap: 4px;
}
.cc-page-num {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--cc-text2);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex: none;
}
.cc-page-num:hover { background: var(--cc-bg); border-color: var(--cc-border); }
.cc-page-num.active {
    background: var(--cc-accent);
    color: #FFF;
    border-color: var(--cc-accent);
    font-weight: 700;
}
.cc-page-dots {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-muted);
    font-size: 0.82rem;
}

.cc-page-jump {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--cc-muted);
    margin-left: 8px;
}
.cc-page-input {
    width: 48px;
    padding: 4px 6px;
    border: 1px solid var(--cc-border);
    border-radius: 4px;
    text-align: center;
    font-size: 0.8rem;
    background: var(--cc-card);
    color: var(--cc-text);
    -moz-appearance: textfield;
}
.cc-page-input::-webkit-inner-spin-button,
.cc-page-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* ── Card Catalog Responsive ────────────────────────────────── */
@media (max-width: 900px) {
    .cc-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 12px;
    }
    .cc-controls { gap: 6px; }
}

@media (max-width: 640px) {
    .cc-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cc-wrapper { padding: 0 10px 30px; }
    .cc-toolbar { padding: 10px 0 8px; }
    .cc-level-tabs { gap: 4px; }
    .cc-tab { padding: 5px 10px; font-size: 0.75rem; }
    .cc-word { font-size: 1.35rem; }
    .cc-pagination { gap: 4px; }
    .cc-page-jump { display: none; }
    .cc-page-num { width: 30px; height: 30px; font-size: 0.75rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MODULE SWITCHER (顶部模块切换)
   ═══════════════════════════════════════════════════════════════ */

.module-switcher {
    display: flex;
    gap: 2px;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-pill);
    padding: 2px 3px;
    margin-right: 6px;
}

.mod-btn {
    padding: 3px 11px;
    font-size: 0.74rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: #7A8F8A;
    cursor: pointer;
    flex: none;
    transition: all 0.18s ease;
    letter-spacing: 0.3px;
    white-space: nowrap;
    font-family: var(--font-ui);
}
.mod-btn:hover { background: rgba(255,255,255,0.10); color: #C0D4CF; }
.mod-btn.active {
    background: rgba(45,106,106,0.85);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.gm-status-view { color: var(--top-accent); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   GRAMMAR MODULE DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
    --gm-bg:        var(--c-bg);
    --gm-panel:     var(--c-surface);
    --gm-border:    var(--c-border-soft);
    --gm-primary:   var(--c-grammar);
    --gm-primary-h: var(--c-grammar-hover);
    --gm-primary-soft: var(--c-grammar-soft);
    --gm-accent:    var(--c-accent);
    --gm-text:      var(--c-ink);
    --gm-text-sec:  var(--c-ink-2);
    --gm-text-muted: var(--c-ink-4);
    --gm-warn: var(--c-warn);
    --gm-err:  var(--c-danger);
    --gm-ok:   var(--c-ok);
    --gm-radius: var(--radius-md);
    --gm-shadow:    var(--shadow-sm);
    --gm-shadow-md: var(--shadow-md);
    --gm-n5: var(--c-n5);
    --gm-n4: var(--c-n4);
    --gm-n3: var(--c-n3);
    --gm-n2: var(--c-n2);
    --gm-n1: var(--c-n1);
    --gm-font-ja: var(--font-ja-sans);
}

/* GRAMMAR SIDEBAR */
.gm-sidebar .sidebar-header { border-bottom-color: var(--gm-border); }
.gm-badge { background: var(--gm-primary); }
.gm-sidebar-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.gm-sidebar-nav-btn {
    width: 100%; padding: 8px 14px; text-align: left; font-size: 0.84rem; font-weight: 600;
    border: 1px solid var(--gm-border); border-radius: var(--gm-radius); background: var(--c-surface);
    color: var(--gm-text); cursor: pointer; flex: none; transition: all 0.15s;
}
.gm-sidebar-nav-btn:hover { border-color: var(--gm-primary); background: rgba(90,80,152,0.06); color: var(--gm-primary); }
.gm-sidebar-nav-btn.active { background: var(--gm-primary); color: var(--c-on-accent); border-color: var(--gm-primary); }

.gm-sidebar-info { margin-bottom: 4px; }
.gm-info-row {
    display: flex; justify-content: space-between; padding: 5px 0;
    font-size: 0.82rem; color: var(--gm-text-sec); border-bottom: 1px solid var(--gm-border);
}
.gm-info-row:last-child { border-bottom: none; }
.gm-info-row strong { color: var(--gm-text); font-weight: 700; }
.gm-sidebar-guide {
    display: grid;
    gap: 5px;
    padding: 8px 4px 4px;
    color: var(--gm-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}
.gm-sidebar-guide strong { color: var(--gm-text-sec); font-size: 0.74rem; }

/* GRAMMAR MAIN + SUBVIEW */
.gm-main { background: var(--gm-bg); overflow: hidden; display: flex; flex-direction: column; }
.gm-course-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 14px 0;
    padding: 8px 11px;
    border: 1px solid rgba(90,80,152,0.22);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(250,249,255,0.96), rgba(255,255,255,0.96));
    box-shadow: 0 3px 10px rgba(56,46,92,0.06);
}
.gm-course-context[hidden] { display: none; }
.gm-course-context-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.gm-course-context-kicker { color: var(--gm-primary); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.25px; text-transform: uppercase; }
.gm-course-context-copy strong { overflow: hidden; color: var(--gm-text); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.gm-course-context-copy small { color: var(--gm-text-muted); font-size: 0.68rem; }
.gm-course-return { min-height: 30px; padding: 5px 9px; flex: none; font-size: 0.7rem; }
.gm-course-grammar-view { padding: 16px; }
.gm-course-grammar-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: var(--gm-text); }
.gm-course-grammar-heading span { font-size: 0.92rem; font-weight: 800; }
.gm-course-grammar-heading strong { color: var(--gm-primary); font-size: 0.72rem; }
.gm-course-grammar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gm-course-grammar-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--gm-border); border-radius: var(--gm-radius); background: var(--gm-panel); color: var(--gm-text); box-shadow: var(--gm-shadow); text-align: left; cursor: pointer; transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s; }
.gm-course-grammar-card:hover { border-color: var(--gm-primary); box-shadow: var(--gm-shadow-md); transform: translateY(-1px); }
.gm-course-grammar-card:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.gm-course-grammar-meta { color: var(--gm-primary); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.gm-course-grammar-card strong { font-size: 0.88rem; line-height: 1.4; }
.gm-course-grammar-card > span:not(.gm-course-grammar-meta) { display: -webkit-box; overflow: hidden; color: var(--gm-text-sec); font-size: 0.76rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.gm-course-grammar-card em { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; color: var(--gm-primary); font-size: 0.7rem; font-style: normal; font-weight: 800; }
.gm-course-grammar-card em ui-icon { width: 13px; height: 13px; }
.gm-course-detail { padding: 18px; }
.gm-course-detail-kicker { color: var(--gm-primary); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.25px; text-transform: uppercase; }
.gm-course-detail h2 { margin: 5px 0 8px; border: 0; color: var(--gm-text); font-size: 1.16rem; }
.gm-course-detail-explanation { color: var(--gm-text-sec); font-size: 0.84rem; line-height: 1.7; }
.gm-course-detail-row { display: flex; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 7px; background: var(--gm-bg); font-size: 0.78rem; line-height: 1.55; }
.gm-course-detail-row strong { flex: none; color: var(--gm-primary); }
.gm-course-detail-examples { margin-top: 14px; }
.gm-course-detail-examples > strong { display: block; margin-bottom: 6px; color: var(--gm-text); font-size: 0.76rem; }
.gm-course-detail-examples > div { margin-top: 5px; padding: 7px 9px; border-left: 3px solid var(--gm-accent); background: var(--gm-bg); color: var(--gm-text-sec); font-family: var(--gm-font-ja); font-size: 0.8rem; line-height: 1.6; }
.gm-course-detail-return { margin-top: 16px; min-height: 31px; padding: 5px 10px; font-size: 0.72rem; }
.gm-subview-pane { flex: 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; }

/* SUBTAB BAR */
.gm-subtab-bar {
    display: flex; gap: 0; padding: 0 16px; background: var(--c-panel);
    border-bottom: 2px solid var(--gm-border); flex-shrink: 0;
}
.gm-subtab {
    padding: 10px 18px; font-size: 0.82rem; font-weight: 600; border: none;
    border-bottom: 3px solid transparent; background: transparent; color: var(--gm-text-sec);
    cursor: pointer; flex: none; margin-bottom: -2px; transition: all 0.15s;
}
.gm-subtab:hover { color: var(--gm-primary); }
.gm-subtab.active { color: var(--gm-primary); border-bottom-color: var(--gm-primary); }

/* GRAMMAR TOOLBAR */
.gm-toolbar {
    padding: 10px 16px 8px; background: var(--c-panel); border-bottom: 1px solid var(--gm-border);
    flex-shrink: 0; position: sticky; top: 0; z-index: 50;
}
.gm-toolbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gm-toolbar-row:last-child { margin-bottom: 0; }
.gm-filter-row { flex-wrap: wrap; gap: 8px; }

.gm-search {
    flex: 1; min-width: 180px; min-height: var(--control-sm); padding: 6px 12px; border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius); font-size: 0.85rem; background: var(--c-surface);
    color: var(--gm-text); transition: border-color 0.2s; font-family: var(--font-ui);
}
.gm-search:focus {
    outline: none; border-color: var(--gm-primary); background: var(--surface-raised);
    box-shadow: 0 0 0 3px rgba(98,86,148,0.14);
}
.gm-count { font-size: 0.78rem; font-weight: 600; color: var(--c-ink-3); white-space: nowrap; }
.gm-select {
    min-height: var(--control-sm); padding: 5px 10px; border: 1px solid var(--gm-border); border-radius: var(--gm-radius);
    font-size: 0.82rem; background: var(--c-surface); color: var(--gm-text); cursor: pointer; flex: none;
    font-family: var(--font-ui);
}
.gm-select:focus { outline: none; border-color: var(--gm-primary); }
.gm-check-label {
    display: flex; align-items: center; gap: 4px; font-size: 0.8rem;
    color: var(--gm-text-sec); cursor: pointer; flex: none; white-space: nowrap;
}
.gm-check-label input { accent-color: var(--gm-primary); }

/* LEVEL TABS */
.gm-level-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.gm-tab {
    padding: 4px 11px; border-radius: var(--radius-pill); border: 1px solid var(--gm-border);
    background: var(--c-surface); color: var(--c-ink-2); font-size: 0.76rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; flex: none;
}
.gm-tab:hover { border-color: var(--gm-primary); color: var(--gm-primary); }
.gm-tab.active { background: var(--gm-primary); color: var(--c-on-accent); border-color: var(--gm-primary); }
.gm-tab-fav.active { background: var(--c-favorite); color: var(--c-on-accent); border-color: var(--c-favorite); }
.gm-tab small { font-weight: 400; opacity: 0.75; margin-left: 2px; }

/* GRAMMAR CARD GRID */
.gm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    grid-auto-rows: 184px;
    gap: 12px;
    padding: 14px 16px;
}
.gm-empty-grid { text-align: center; padding: 60px 20px; color: var(--gm-text-muted); font-size: 0.95rem; }

.gm-card {
    background: var(--gm-panel); border: 1px solid var(--gm-border); border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow); overflow: hidden; cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    display: flex; position: relative;
}
.gm-card:hover { box-shadow: var(--gm-shadow-md); border-color: #C8C0DF; }
.gm-card:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
    border-color: var(--gm-primary);
}
.gm-card-selected {
    border-color: var(--gm-primary) !important;
    box-shadow: 0 0 0 2px rgba(98,86,148,0.2), var(--gm-shadow-md) !important;
}

/* Level accent bars */
.gm-card-bar { width: 5px; flex-shrink: 0; background: var(--gm-border); }
.gm-level-n5 { background: var(--gm-n5) !important; }
.gm-level-n4 { background: var(--gm-n4) !important; }
.gm-level-n3 { background: var(--gm-n3) !important; }
.gm-level-n2 { background: var(--gm-n2) !important; }
.gm-level-n1 { background: var(--gm-n1) !important; }

.gm-card-body { flex: 1; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; }
.gm-card-meta { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; }
.gm-card-level {
    font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 10px;
    color: #fff; background: var(--gm-text-muted); white-space: nowrap;
}
.gm-card-idx { font-size: 0.72rem; color: var(--gm-text-muted); font-weight: 500; }
.gm-card-title {
    font-size: 0.95rem; font-weight: 700; color: var(--gm-text); font-family: var(--gm-font-ja);
    overflow: hidden; min-width: 0; line-height: 1.42; overflow-wrap: anywhere; margin: 4px 0 5px;
    letter-spacing: 0.01em; text-wrap: pretty;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.gm-card-fav {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; padding: 0; margin: 0 -4px 0 auto;
    border: none; border-radius: 50%; background: transparent; color: var(--gm-border);
    font-family: Arial, sans-serif; font-size: 1.1rem; font-weight: 400; line-height: 1;
    cursor: pointer; transition: color 0.2s, background 0.2s;
}
.gm-card-fav:hover { color: var(--c-favorite); background: var(--c-favorite-soft); }
.gm-card-fav.active { color: var(--c-favorite); }
.gm-card-meaning {
    min-height: 38px; font-size: 0.79rem; color: var(--gm-text-sec); line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gm-card-connection {
    margin-top: 6px; font-size: 0.74rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-card-connection span { color: var(--gm-primary); font-weight: 700; margin-right: 6px; }
.gm-card-tags { display: flex; flex-wrap: nowrap; gap: 3px; margin-top: auto; overflow: hidden; }
.gm-card-tag { font-size: 0.68rem; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--gm-primary-soft); color: var(--gm-primary); font-weight: 600; }
.gm-card-tag-more { background: var(--c-panel-alt); color: var(--c-ink-3); flex: none; }

/* PAGINATION */
.gm-pagination {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 12px 16px 16px; flex-wrap: wrap;
}
.gm-page-btn {
    padding: 5px 11px; border: 1px solid var(--gm-border); border-radius: 5px; background: var(--surface-raised);
    color: var(--gm-text-sec); font-size: 0.8rem; font-weight: 500; cursor: pointer; flex: none; transition: all 0.15s;
}
.gm-page-btn:hover:not([disabled]) { border-color: var(--gm-primary); color: var(--gm-primary); }
.gm-page-btn.active { background: var(--gm-primary); color: var(--c-on-accent); border-color: var(--gm-primary); }
.gm-page-btn[disabled] { opacity: 0.35; cursor: default; }
.gm-page-dots { font-size: 0.8rem; color: var(--gm-text-muted); padding: 0 2px; display: inline-block; }

/* GRAMMAR DETAIL PANEL */
.gm-detail-panel { padding: 0; overflow: hidden; }
.gm-detail-panel > h2 {
    font-size: 0.72rem; font-weight: 700; color: var(--gm-text-muted); text-transform: uppercase;
    letter-spacing: 0.6px; padding: 10px 16px 7px; margin: 0; border-bottom: 1px solid var(--gm-border);
    font-family: var(--font-ui);
}
.gm-detail-content { padding: 0; overflow-y: auto; height: calc(100% - 38px);
    scrollbar-width: thin; scrollbar-color: var(--c-border) transparent;
}
.gm-detail-content::-webkit-scrollbar { width: 4px; }
.gm-detail-content::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }
.gm-detail-placeholder {
    text-align: center; color: var(--gm-text-muted); padding: 50px 20px; font-size: 0.85rem; line-height: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M10 20h20M20 10v20' stroke='%23D9CFBF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center 30px no-repeat;
    padding-top: 80px;
}
.gm-detail-loading, .gm-detail-empty { text-align: center; color: var(--gm-text-muted); padding: 40px 16px; font-size: 0.88rem; }

.gm-detail-header {
    padding: 13px 18px 11px; border-bottom: 1px solid var(--c-border-soft);
    background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-panel) 100%);
}
.gm-detail-level {
    display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
    color: #fff; background: var(--gm-text-muted); margin-right: 4px; letter-spacing: 0.3px;
}
.gm-detail-index { font-size: 0.7rem; color: var(--gm-text-muted); margin-right: 6px; }
.gm-detail-title {
    font-size: 1.18rem; font-weight: 800; color: var(--c-ink); font-family: var(--font-ja-sans);
    margin: 6px 0 4px; border: none; padding: 0; display: block; line-height: 1.35;
    letter-spacing: 0.03em;
}
.gm-detail-uid { font-size: 0.68rem; color: var(--gm-text-muted); font-family: var(--font-mono); }
.gm-detail-warning {
    margin: 8px 16px; padding: 6px 12px; background: var(--c-warn-bg);
    border-left: 3px solid var(--c-warn); border-radius: 0 6px 6px 0;
    font-size: 0.77rem; color: var(--c-warn-text); font-weight: 500;
}

.gm-detail-outline {
    position: sticky; top: 0; z-index: 4; display: flex; gap: 4px; overflow-x: auto;
    padding: 7px 12px; background: rgba(250,247,241,0.96); border-bottom: 1px solid var(--c-border-soft);
    box-shadow: 0 2px 8px rgba(60,45,28,0.06); scrollbar-width: none;
}
.gm-detail-outline::-webkit-scrollbar { display: none; }
.gm-detail-nav-btn {
    min-height: 30px; padding: 4px 9px; flex: none; border: 1px solid transparent; border-radius: var(--radius-pill);
    background: transparent; color: var(--c-ink-3); font: 600 0.72rem/1 var(--font-ui); cursor: pointer;
}
.gm-detail-nav-btn:hover { color: var(--gm-primary); background: var(--gm-primary-soft); }
.gm-detail-nav-btn.active { color: var(--gm-primary); border-color: rgba(98,86,148,0.24); background: var(--gm-primary-soft); }
.gm-detail-nav-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }

/* Collapsible detail sections — 笔记分节风格 */
.gm-detail-section { border-bottom: 1px solid var(--c-border-soft); }
.gm-detail-section > summary {
    padding: 8px 18px; font-size: 0.8rem; font-weight: 700; color: var(--c-ink-2);
    cursor: pointer; user-select: none; background: var(--c-panel);
    list-style: none; display: flex; align-items: center; gap: 6px; transition: background 0.15s;
    position: relative; letter-spacing: 0.1px;
}
.gm-detail-section > summary::-webkit-details-marker { display: none; }
.gm-detail-section > summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.gm-detail-section > summary::after {
    content: '›';
    font-size: 1rem;
    margin-left: auto;
    color: var(--c-ink-4);
    transition: transform 0.2s ease;
    display: inline-block;
    line-height: 1;
}
.gm-detail-section[open] > summary::after {
    transform: rotate(90deg);
}
.gm-detail-section > summary:hover { background: var(--c-primary-soft); }
.gm-detail-section > summary:hover::after { color: var(--c-primary); }
.gm-detail-section-body { padding: 10px 18px 14px; background: var(--c-surface); }

/* Key-value rows — 笔记行样式 */
.gm-kv { display: flex; gap: 10px; margin-bottom: 8px; font-size: 0.83rem; line-height: 1.6; align-items: flex-start; }
.gm-kv-warn { background: var(--c-warn-bg); border-radius: var(--radius-sm); padding: 5px 10px; margin-bottom: 8px; border-left: 2px solid var(--c-warn); }
.gm-k {
    flex: none; width: 64px; font-size: 0.68rem; font-weight: 700; color: var(--c-primary);
    text-transform: uppercase; letter-spacing: 0.4px; padding-top: 2px; text-align: right;
    font-family: var(--font-ui); border-right: 1px solid var(--c-border-soft); padding-right: 8px;
}
.gm-v { flex: 1; color: var(--c-ink); word-break: break-word; font-family: var(--font-ja-sans); }
.gm-mono { font-family: var(--font-mono); font-size: 0.8rem; background: var(--c-panel-alt); padding: 1px 5px; border-radius: 3px; }

.gm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.gm-tag { font-size: 0.68rem; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(90,80,152,0.1); color: var(--gm-primary); font-weight: 600; }
.gm-subsec-title { font-size: 0.7rem; font-weight: 700; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.5px; margin: 12px 0 6px; border-bottom: 1px solid var(--c-border-soft); padding-bottom: 4px; }
.gm-chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.gm-chip {
    font-size: 0.76rem; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--c-play-soft);
    color: var(--c-play); border: 1px solid rgba(27,122,90,0.2); font-weight: 600; font-family: var(--gm-font-ja);
}
.gm-str-list { margin: 0; padding-left: 16px; }
.gm-str-list li { font-size: 0.82rem; color: var(--c-ink-2); margin-bottom: 5px; line-height: 1.6; font-family: var(--font-ja-sans); }

/* Confusable table — 暂按暖色调整 */
.gm-conf-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; margin-bottom: 8px; }
.gm-conf-table th {
    background: var(--c-panel-alt); padding: 5px 8px; text-align: left; font-size: 0.68rem;
    font-weight: 700; color: var(--c-ink-3); text-transform: uppercase; border-bottom: 1px solid var(--c-border);
}
.gm-conf-table td { padding: 6px 8px; border-bottom: 1px solid var(--c-border-soft); vertical-align: top; line-height: 1.55; }
.gm-conf-table tr:last-child td { border-bottom: none; }

.gm-contrast-item { background: var(--c-panel); border: 1px solid var(--c-border-soft); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 6px; font-size: 0.82rem; }
.gm-ja { font-family: var(--gm-font-ja); color: var(--c-ink); margin-bottom: 3px; line-height: 1.7; }
.gm-zh { color: var(--c-ink-2); font-size: 0.79rem; line-height: 1.55; }
.gm-used { font-size: 0.7rem; color: var(--gm-primary); margin-top: 4px; font-weight: 600; }
.gm-anti-card { background: var(--c-danger-bg); border: 1px solid rgba(168,50,64,0.2); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 6px; font-size: 0.82rem; }
.gm-anti-ja { color: var(--c-danger); }
.gm-why { font-size: 0.74rem; color: var(--c-ink-3); margin-top: 5px; font-style: italic; line-height: 1.6; }
.gm-ex-card {
    background: var(--c-panel); border-left: 3px solid var(--gm-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 14px; margin-bottom: 8px; font-size: 0.83rem;
    border-top: 1px solid var(--c-border-soft); border-right: 1px solid var(--c-border-soft); border-bottom: 1px solid var(--c-border-soft);
}
.gm-ex-simple { font-size: 0.82rem; color: var(--c-ink-2); margin-bottom: 5px; line-height: 1.65; font-family: var(--font-ja-sans); }
.gm-span { font-size: 0.73rem; color: var(--gm-primary); margin-top: 5px; font-weight: 600; }
.gm-scene { font-size: 0.71rem; color: var(--c-ink-4); margin-top: 2px; }
.gm-quiz {
    background: var(--c-play-soft); border: 1px solid rgba(27,122,90,0.18); border-radius: var(--gm-radius);
    padding: 10px 12px; margin-bottom: 7px; font-size: 0.83rem;
}
.gm-quiz-q { color: var(--c-ink); font-weight: 700; margin-bottom: 5px; font-family: var(--font-ja-sans); }
.gm-quiz-a > summary { font-size: 0.74rem; color: var(--c-play); cursor: pointer; user-select: none; list-style: none; font-weight: 600; }
.gm-quiz-a > summary::-webkit-details-marker { display: none; }
.gm-no-data { color: var(--c-ink-4); font-size: 0.78rem; font-style: italic; padding: 4px 0; }
.gm-lesson-links { display: flex; flex-direction: column; gap: 6px; }
.gm-lesson-link-btn {
    padding: 8px 14px; border: 1px solid var(--c-primary); border-radius: var(--gm-radius);
    background: var(--c-primary-soft); color: var(--c-primary); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; text-align: left; flex: none; transition: all 0.15s;
}
.gm-lesson-link-btn:hover { background: var(--c-primary); color: var(--c-on-accent); }
.gm-lesson-link-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* LESSON LIST */
.gm-lesson-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--gm-border); background: var(--c-surface); }
.gm-lesson-header h3 { font-size: 1rem; font-weight: 700; color: var(--gm-text); margin: 0; }
.gm-lesson-header h3 small { color: var(--gm-text-muted); font-weight: 400; margin-left: 4px; }
.gm-lesson-grid {
    display: grid;
    width: min(100%, 960px);
    margin: 0 auto;
    padding: 8px 18px 22px;
}
.gm-lesson-card {
    padding: 14px 6px;
    border-bottom: 1px solid var(--gm-border);
    background: transparent;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}
.gm-lesson-card:last-child { border-bottom: 0; }
.gm-lesson-card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; box-shadow: none; }
.gm-lesson-card:hover { background: var(--c-panel); }
.gm-lesson-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gm-lesson-no { font-size: 0.72rem; font-weight: 700; color: var(--gm-primary); }
.gm-lesson-gcount { font-size: 0.72rem; color: var(--gm-text-muted); font-weight: 500; }
.gm-lesson-title-ja { font-size: 0.97rem; font-weight: 700; color: var(--gm-text); font-family: var(--gm-font-ja); margin-bottom: 3px; line-height: 1.4; }
.gm-lesson-title-zh { font-size: 0.82rem; color: var(--gm-text-sec); margin-bottom: 5px; }
.gm-lesson-theme { font-size: 0.72rem; color: var(--gm-accent); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.gm-lesson-summary {
    font-size: 0.79rem; color: var(--gm-text-sec); line-height: 1.5; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gm-lesson-levels { font-size: 0.72rem; color: var(--gm-text-muted); margin-top: 4px; }

/* LESSON READER */
.gm-reader-topbar {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
    background: var(--c-surface); border-bottom: 1px solid var(--gm-border); flex-shrink: 0; gap: 10px; flex-wrap: wrap;
}
.gm-back-btn {
    padding: 5px 14px; border: 1px solid var(--gm-border); border-radius: var(--gm-radius);
    background: var(--c-surface); color: var(--gm-text-sec); font-size: 0.82rem; font-weight: 600; cursor: pointer; flex: none; transition: all 0.15s;
}
.gm-back-btn:hover { border-color: var(--gm-primary); color: var(--gm-primary); background: var(--c-primary-soft); }
.gm-display-toggle { display: flex; border: 1px solid var(--gm-border); border-radius: var(--gm-radius); overflow: hidden; flex: none; }
.gm-toggle-btn {
    padding: 5px 12px; border: none; border-right: 1px solid var(--gm-border); background: var(--c-surface);
    color: var(--gm-text-sec); font-size: 0.78rem; font-weight: 600; cursor: pointer; flex: none; transition: all 0.15s;
}
.gm-toggle-btn:last-child { border-right: none; }
.gm-toggle-btn:hover { background: var(--c-panel); }
.gm-toggle-btn.active { background: var(--gm-primary); color: var(--c-on-accent); }

.gm-reader-header {
    padding: 16px 20px 12px;
    background: linear-gradient(135deg, #fafbff 0%, #eef2ff 100%);
    border-bottom: 1px solid var(--gm-border);
}
.gm-reader-lesson-no { font-size: 0.72rem; font-weight: 700; color: var(--gm-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.gm-reader-theme { font-size: 0.75rem; color: var(--gm-accent); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.gm-reader-title-ja {
    font-size: 1.35rem; font-weight: 800; color: var(--gm-text); font-family: var(--gm-font-ja);
    margin: 0 0 4px; border: none; padding: 0; line-height: 1.4; display: block;
}
.gm-reader-title-zh { font-size: 0.9rem; color: var(--gm-text-sec); margin-bottom: 8px; }
.gm-reader-summary { font-size: 0.84rem; color: var(--gm-text-sec); line-height: 1.65; margin: 0; }

.gm-reader-grammar-briefs { border-bottom: 1px solid var(--gm-border); background: var(--c-surface); }
.gm-reader-grammar-briefs > summary {
    padding: 10px 20px; font-size: 0.84rem; font-weight: 700; cursor: pointer;
    user-select: none; color: var(--gm-text); list-style: none; transition: background 0.15s;
}
.gm-reader-grammar-briefs > summary::-webkit-details-marker { display: none; }
.gm-reader-grammar-briefs > summary:hover { background: var(--surface-base); }

.gm-brief-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px; padding: 8px 20px 14px;
}
.gm-brief-card {
    background: var(--surface-base); border: 1px solid var(--gm-border); border-radius: var(--gm-radius);
    padding: 8px 10px; font-size: 0.8rem;
}
.gm-brief-clickable { cursor: pointer; transition: all 0.15s; }
.gm-brief-clickable:hover { border-color: var(--gm-primary); background: var(--gm-primary-soft); }
.gm-brief-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.gm-brief-level {
    font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 8px;
    color: #fff; background: var(--gm-text-muted); flex: none;
}
.gm-brief-title {
    font-weight: 700; color: var(--gm-text); font-family: var(--gm-font-ja); font-size: 0.85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-brief-exp { font-size: 0.75rem; color: var(--gm-text-sec); margin-bottom: 3px; line-height: 1.4; }
.gm-brief-sample-ja { font-size: 0.77rem; color: var(--gm-text); font-family: var(--gm-font-ja); line-height: 1.5; margin-top: 4px; }
.gm-brief-sample-zh { font-size: 0.72rem; color: var(--gm-text-sec); line-height: 1.4; }

/* Reading paragraphs */
.gm-reader-body { padding: 20px; max-width: 900px; }
.gm-para-pair {
    display: grid; gap: 0; margin-bottom: 20px; border-radius: var(--gm-radius);
    overflow: hidden; border: 1px solid var(--gm-border); box-shadow: var(--gm-shadow);
}
.gm-para-pair.gm-display-bilingual { grid-template-columns: 1fr 1fr; }
.gm-para-pair.gm-display-ja-only,
.gm-para-pair.gm-display-zh-only { grid-template-columns: 1fr; }
.gm-para-ja {
    padding: 14px 16px; background: var(--c-surface); font-family: var(--gm-font-ja);
    font-size: 0.95rem; line-height: 1.9; color: var(--gm-text); border-right: 1px solid var(--gm-border);
}
.gm-para-zh { padding: 14px 16px; background: var(--c-panel); font-size: 0.88rem; line-height: 1.85; color: var(--gm-text-sec); }
.gm-display-ja-only .gm-para-ja { border-right: none; }

/* Inline grammar marks */
.gm-grammar-mark {
    display: inline; padding: 1px 4px; border-radius: 3px; font-weight: 700;
    transition: all 0.15s; cursor: pointer;
}
.gm-grammar-known {
    background: rgba(90,80,152,0.12); color: var(--gm-primary);
    border-bottom: 2px solid var(--gm-primary);
}
.gm-grammar-known:hover { background: rgba(90,80,152,0.22); box-shadow: 0 2px 8px rgba(90,80,152,0.2); }
.gm-grammar-unknown {
    background: var(--c-panel-alt); color: var(--gm-text-sec);
    border-bottom: 2px dashed var(--gm-text-muted); cursor: default;
}

.gm-reader-loading, .gm-reader-error { text-align: center; padding: 60px 20px; color: var(--gm-text-muted); font-size: 0.95rem; }
.gm-reader-error { color: var(--gm-err); }
.gm-error { text-align: center; padding: 60px 20px; color: var(--gm-err); font-size: 0.95rem; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .gm-card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .gm-lesson-grid { grid-template-columns: 1fr; gap: 8px; }
    .gm-brief-grid { grid-template-columns: 1fr 1fr; }
    .gm-para-pair.gm-display-bilingual { grid-template-columns: 1fr; }
    .gm-para-ja { border-right: none; border-bottom: 1px solid var(--gm-border); }
}
@media (max-width: 600px) {
    .gm-card-grid { grid-template-columns: 1fr; }
    .gm-brief-grid { grid-template-columns: 1fr; }
    .gm-reader-body { padding: 12px; }
    .mod-btn { padding: 3px 8px; font-size: 0.72rem; }
}

/* B18: auxiliary grammar lesson reading surface */
#gmLessonReader { container: grammar-reader / inline-size; }
.gm-reader-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--surface-base) 94%, transparent);
    backdrop-filter: blur(8px);
}
.gm-back-btn {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-color: transparent;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
}
.gm-back-btn ui-icon { width: 15px; height: 15px; }
.gm-reader-jump-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}
.gm-reader-jump-nav button {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--gm-text-sec);
    font: 700 0.7rem/1 var(--font-ui);
    cursor: pointer;
}
.gm-reader-jump-nav button:hover { background: var(--surface-raised); color: var(--gm-primary); }
.gm-reader-jump-nav span { color: var(--gm-primary); font-size: 0.65rem; }
.gm-display-toggle {
    padding: 2px;
    background: var(--surface-raised);
}
.gm-toggle-btn {
    min-height: 26px;
    padding: 3px 9px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
}
.gm-reader-jump-nav button:focus-visible,
.gm-back-btn:focus-visible,
.gm-toggle-btn:focus-visible,
.gm-brief-clickable:focus-visible,
.gm-grammar-known:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.gm-reader-article {
    width: min(calc(100% - 32px), 860px);
    margin: 20px auto 48px;
    overflow: clip;
    border: 1px solid var(--gm-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}
.gm-reader-header {
    padding: 22px 28px 20px;
    background: var(--surface-raised);
}
.gm-reader-theme { margin-bottom: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px; text-transform: none; }
.gm-reader-title-ja { margin-bottom: 5px; font-size: 1.5rem; line-height: 1.35; }
.gm-reader-title-zh { margin-bottom: 10px; font-size: 0.88rem; }
.gm-reader-summary { max-width: 60em; font-size: 0.82rem; line-height: 1.7; }
.gm-reader-grammar-briefs {
    scroll-margin-top: 58px;
    background: var(--surface-base);
}
.gm-reader-grammar-briefs > summary {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 9px;
    padding: 9px 28px;
}
.gm-reader-grammar-briefs > summary ui-icon { width: 17px; height: 17px; color: var(--gm-primary); }
.gm-reader-grammar-briefs > summary > span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.gm-reader-grammar-briefs > summary strong { font-size: 0.78rem; }
.gm-reader-grammar-briefs > summary small { color: var(--gm-text-muted); font-size: 0.68rem; font-weight: 500; }
.gm-reader-grammar-briefs > summary em { color: var(--gm-primary); font-size: 0.7rem; font-style: normal; }
.gm-brief-grid { gap: 8px; padding: 4px 28px 16px; }
.gm-brief-card {
    width: 100%;
    background: var(--surface-raised);
    padding: 9px 10px;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
}
.gm-reader-reading { scroll-margin-top: 58px; }
.gm-reader-section-head { padding: 20px 28px 12px; }
.gm-reader-section-head > span { color: var(--gm-primary); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; }
.gm-reader-section-head h2 { margin: 3px 0 2px; border: 0; color: var(--gm-text); font-size: 1.05rem; }
.gm-reader-section-head p { margin: 0; color: var(--gm-text-muted); font-size: 0.72rem; }
.gm-reader-body { max-width: none; padding: 0 28px 28px; }
.gm-para-pair {
    margin: 0;
    overflow: hidden;
    border: 0;
    border-top: 1px solid var(--gm-border);
    border-radius: 0;
    box-shadow: none;
}
.gm-para-pair:last-child { border-bottom: 1px solid var(--gm-border); }
.gm-para-pair.gm-display-bilingual { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.gm-para-ja {
    padding: 16px 18px;
    background: transparent;
    font-size: 1rem;
    line-height: 2;
}
.gm-para-zh { padding: 16px 18px; background: var(--surface-base); font-size: 0.84rem; line-height: 1.9; }
.gm-grammar-mark {
    margin: 0;
    padding: 1px 3px;
    border: 0;
    font: inherit;
    font-weight: 700;
    line-height: inherit;
    vertical-align: baseline;
}
@container grammar-reader (max-width: 700px) {
    .gm-reader-topbar { justify-content: flex-start; }
    .gm-display-toggle { margin-left: auto; }
    .gm-para-pair.gm-display-bilingual { grid-template-columns: 1fr; }
    .gm-para-ja { border-right: 0; border-bottom: 1px solid var(--gm-border); }
}
@container grammar-reader (max-width: 520px) {
    .gm-reader-jump-nav { order: 3; }
    .gm-reader-article { width: calc(100% - 20px); margin-top: 10px; }
    .gm-reader-header, .gm-reader-section-head { padding-right: 18px; padding-left: 18px; }
    .gm-reader-body { padding-right: 18px; padding-bottom: 18px; padding-left: 18px; }
    .gm-reader-grammar-briefs > summary { padding-right: 18px; padding-left: 18px; }
    .gm-brief-grid { grid-template-columns: 1fr; padding-right: 18px; padding-left: 18px; }
}
.gm-detail-study {
    display: inline-flex;
    min-height: var(--control-sm);
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    font-size: var(--type-ui-sm);
    flex: none;
}
.gm-detail-study ui-icon { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════
   TEXTBOOK MODULE
   ═══════════════════════════════════════════════════════════════ */
:root {
    --tb-bg:           var(--c-bg);
    --tb-panel:        var(--c-surface);
    --tb-border:       var(--c-border-soft);
    --tb-primary:      var(--c-lesson);
    --tb-primary-soft: var(--c-primary-soft);
    --tb-accent:       var(--c-primary-hover);
    --tb-text:         var(--c-ink);
    --tb-text-sec:     var(--c-ink-2);
    --tb-text-muted:   var(--c-ink-4);
    --tb-shadow:       var(--shadow-sm);
    --tb-shadow-md:    var(--shadow-md);
    --tb-font-ja-read: var(--font-ja-serif);  /* 课文正文衰线体 */
}

.tb-badge { background: var(--tb-primary); }
.tb-sidebar .sidebar-header { border-bottom-color: var(--tb-border); }
.tb-main {
    background: var(--c-bg);
    overflow: hidden;
}
.tb-detail-panel {
    padding: 0;
    border-left-color: var(--tb-border);
    overflow: hidden;
}
.tb-detail-panel h2 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    padding: 12px 16px 8px;
    margin: 0;
    border-bottom: 1px solid var(--tb-border);
}
.tb-detail-content {
    padding: 0;
    height: calc(100% - 42px);
    overflow-y: auto;
}

.tb-book-picker { margin-bottom: 14px; }
.tb-book-picker label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tb-text-sec);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tb-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--tb-border);
    min-height: var(--control-md);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--tb-text);
    font-size: 0.88rem;
}
.tb-select:focus {
    outline: none;
    border-color: var(--tb-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

.tb-sidebar-info {
    display: none;
}
.tb-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tb-border);
    font-size: 0.83rem;
    color: var(--tb-text-sec);
}
.tb-info-row:last-child { border-bottom: none; }
.tb-info-row strong { color: var(--tb-text); font-weight: 700; }

.tb-lesson-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tb-empty-state {
    padding: 18px 14px;
    border: 1px dashed var(--tb-border);
    border-radius: 10px;
    color: var(--tb-text-muted);
    background: rgba(255,255,255,0.7);
    font-size: 0.84rem;
    text-align: center;
}
.tb-lesson-card {
    width: 100%;
    display: block;
    flex: none;
    padding: 12px 14px;
    border: 1px solid var(--tb-border);
    border-radius: var(--radius-md);
    background: var(--tb-panel);
    color: var(--tb-text);
    text-align: left;
    box-shadow: var(--tb-shadow);
    transition: box-shadow 0.16s, border-color 0.16s;
}
.tb-lesson-card:hover {
    box-shadow: var(--tb-shadow-md);
    border-color: var(--c-primary-border);
}
.tb-lesson-card.active {
    border-color: var(--tb-primary);
    box-shadow: 0 0 0 2px var(--c-focus-ring), var(--tb-shadow-md);
    background: var(--c-primary-soft);
}
.tb-lesson-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.tb-lesson-no {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tb-primary);
    background: var(--tb-primary-soft);
    padding: 3px 9px;
    border-radius: 999px;
}
.tb-lesson-pages {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--tb-text-muted);
    font-weight: 500;
}
.tb-lesson-progress {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--c-panel-alt);
    color: var(--c-ink-3);
    font-size: 0.69rem;
    font-weight: 800;
}
.tb-lesson-progress.is-current { background: var(--c-primary); color: var(--c-on-accent); }
.tb-lesson-progress.is-complete { background: var(--c-ok-bg); color: var(--c-ok-text); }
.tb-lesson-progress.is-review { background: var(--c-warn-bg); color: var(--c-warn-text); }
.tb-lesson-card.is-read:not(.active) { border-color: rgba(27,122,90,0.22); }
.tb-lesson-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tb-text);
    line-height: 1.45;
}
.tb-lesson-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.tb-status-chip,
.tb-flag-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.tb-status-chip {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}
.tb-status-completed,
.tb-status-existing {
    background: var(--c-ok-bg);
    color: var(--c-ok-text);
}
.tb-flag-chip {
    background: var(--c-warn-bg);
    color: var(--c-warn-text);
}

/* B22: compact textbook directory and reading tools live in the module rail. */
.tb-sidebar .filter-section {
    padding: 10px 12px 16px;
}

.tb-book-picker {
    margin-bottom: 10px;
}

.tb-book-picker label,
.tb-sidebar-control-label {
    display: block;
    margin-bottom: 5px;
    color: var(--tb-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.tb-book-picker .tb-select {
    min-height: 36px;
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.tb-book-picker-meta {
    display: block;
    margin-top: 5px;
    color: var(--tb-text-muted);
    font-size: 0.68rem;
}

.tb-sidebar-group {
    border-top: 1px solid var(--tb-border);
}

.tb-sidebar-group > summary {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 6px 2px;
    color: var(--tb-text);
    cursor: pointer;
    list-style: none;
}

.tb-sidebar-group > summary::-webkit-details-marker { display: none; }
.tb-sidebar-group > summary::before {
    content: '›';
    color: var(--tb-text-muted);
    font-size: 1rem;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.16s ease;
}
.tb-sidebar-group[open] > summary::before { transform: rotate(90deg); }
.tb-sidebar-group > summary span { font-size: 0.76rem; font-weight: 800; }
.tb-sidebar-group > summary small {
    margin-left: auto;
    color: var(--tb-text-muted);
    font-size: 0.65rem;
    font-weight: 600;
}
.tb-sidebar-group > summary:hover { color: var(--tb-primary); }
.tb-sidebar-group > summary:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
}

.tb-sidebar-reading-controls {
    padding: 2px 0 10px;
}

.tb-sidebar-tool-placeholder {
    margin: 0;
    padding: 5px 4px 9px;
    color: var(--tb-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.tb-sidebar-current-lesson {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px 7px;
}
.tb-sidebar-current-lesson span { color: var(--tb-text-muted); font-size: 0.65rem; }
.tb-sidebar-current-lesson strong {
    overflow: hidden;
    color: var(--tb-text);
    font-family: var(--font-ja-sans);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-sidebar-continue {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    font-size: 0.76rem;
}

.tb-sidebar-reading-controls .tb-display-toggle {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 2px;
}
.tb-sidebar-reading-controls .tb-display-mode-btn {
    min-width: 0;
    min-height: 31px;
    padding: 4px 3px;
    font-size: 0.67rem;
}
.tb-sidebar-reading-controls .tb-display-mode-btn ui-icon {
    width: 13px;
    height: 13px;
}

.tb-lesson-directory {
    margin-top: 1px;
}
.tb-lesson-list {
    gap: 0;
    padding-bottom: 4px;
}
.tb-lesson-card {
    padding: 7px 8px 7px 9px;
    border: 0;
    border-bottom: 1px solid var(--tb-border);
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.tb-lesson-card:last-child { border-bottom: 0; }
.tb-lesson-card:hover {
    border-bottom-color: var(--tb-border);
    border-left-color: var(--c-primary-border);
    background: var(--surface-raised);
    box-shadow: none;
}
.tb-lesson-card.active {
    border-bottom-color: var(--tb-border);
    border-left-color: var(--tb-primary);
    background: var(--c-primary-soft);
    box-shadow: none;
}
.tb-lesson-card.is-read:not(.active) { border-bottom-color: var(--tb-border); border-left-color: transparent; }
.tb-lesson-card-head { margin-bottom: 3px; }
.tb-lesson-no {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.67rem;
}
.tb-lesson-progress {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.61rem;
}
.tb-lesson-progress.is-current { background: transparent; color: var(--tb-primary); }
.tb-lesson-progress.is-complete { background: transparent; color: var(--c-ok-text); }
.tb-lesson-progress.is-review { background: transparent; color: var(--c-warn-text); }
.tb-lesson-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.8rem;
    line-height: 1.35;
}
.tb-lesson-meta {
    align-items: center;
    margin-top: 3px;
}
.tb-lesson-card .tb-status-chip {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tb-text-sec);
    font-weight: 600;
}
.tb-status-chip {
    padding: 0;
    background: transparent;
    color: var(--tb-text-muted);
    font-size: 0.62rem;
}
.tb-lesson-pages { font-size: 0.62rem; }

.tb-reader {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.tb-reader-placeholder,
.tb-reader-error,
.tb-reader-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--tb-text-muted);
    font-size: 0.95rem;
}
.tb-reader-error { color: var(--c-danger); }

.tb-reader-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 18px;
    border-bottom: 1px solid var(--tb-border);
    background: color-mix(in srgb, var(--surface-base) 96%, transparent);
    backdrop-filter: blur(10px);
}
.tb-reader-header-compact-mode .tb-reader-header-main {
    display: none;
}
.tb-reader-header-compact,
.tb-reader-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tb-reader-header-compact {
    min-height: 30px;
    justify-content: space-between;
}
.tb-reader-header-actions {
    justify-content: flex-end;
}
.tb-course-path {
    margin: 6px -18px -8px;
    padding: 4px 18px 7px;
    border: 0;
    border-top: 1px solid var(--tb-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.tb-course-path-toggle,
.tb-course-path-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tb-course-path-toggle {
    width: 100%;
    min-height: 32px;
    padding: 2px 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: inherit;
    font-family: var(--font-ui);
    text-align: left;
    cursor: pointer;
}
.tb-course-path-toggle:hover { color: var(--tb-primary); }
.tb-course-path-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.tb-course-kicker {
    color: var(--tb-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}
.tb-course-path-heading strong {
    overflow: hidden;
    color: var(--tb-text);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tb-course-path-summary { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.tb-course-path-summary ui-icon { width: 14px; height: 14px; color: var(--tb-text-muted); }
.tb-course-progress {
    flex: none;
    color: var(--tb-accent);
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.tb-course-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 5px;
    border-top: 1px solid var(--tb-border);
    border-bottom: 1px solid var(--tb-border);
}
.tb-course-step {
    display: grid;
    position: relative;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 5px;
    align-items: center;
    padding: 7px 27px 7px 9px;
    border: 0;
    border-right: 1px solid var(--tb-border);
    border-radius: 0;
    background: transparent;
}
.tb-course-step:last-child { border-right: 0; }
.tb-course-step.is-current { background: var(--tb-primary-soft); box-shadow: inset 3px 0 0 var(--tb-primary); }
.tb-course-step.is-done { background: color-mix(in srgb, var(--c-ok-bg) 54%, transparent); }
.tb-course-step.is-skipped { background: color-mix(in srgb, var(--surface-sunken) 54%, transparent); }
.tb-course-step-index {
    display: grid;
    width: 19px;
    height: 19px;
    grid-row: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--tb-primary-soft);
    color: var(--tb-primary);
    font-size: 0.7rem;
    font-weight: 900;
}
.tb-course-step.is-done .tb-course-step-index { background: var(--c-ok-bg); color: var(--c-ok); }
.tb-course-step.is-skipped .tb-course-step-index { background: var(--c-surface); color: var(--tb-text-muted); }
.tb-course-step-copy { display: flex; min-width: 0; flex-direction: column; gap: 0; }
.tb-course-step-copy strong { overflow: hidden; color: var(--tb-text); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.tb-course-step-copy small { display: none; }
.tb-course-step-status { grid-column: 2; color: var(--tb-text-muted); font-size: 0.62rem; font-weight: 700; }
.tb-course-step.is-current .tb-course-step-status { color: var(--tb-accent); }
.tb-course-step-action,
.tb-course-step-done,
.tb-course-step-skip {
    min-height: 23px;
    border-radius: 5px;
    font-size: 0.63rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}
.tb-course-step-action { grid-column: 1 / span 2; margin-top: 3px; padding: 2px 5px; border: 1px solid rgba(21,94,117,0.22); background: rgba(255,255,255,0.82); color: var(--tb-primary); }
.tb-course-step-action:hover { background: var(--tb-primary-soft); }
.tb-course-step-done { grid-column: 1 / span 2; margin-top: 3px; padding: 2px 5px; border: 1px solid rgba(45,125,80,0.24); background: var(--c-ok-bg); color: var(--c-ok); }
.tb-course-step-done:hover { border-color: var(--c-ok); }
.tb-course-step-skip { position: absolute; top: 5px; right: 5px; width: 20px; min-height: 20px; margin: 0; padding: 1px; border: 0; background: transparent; color: var(--tb-text-muted); }
.tb-course-step-skip:hover { color: var(--tb-primary); text-decoration: underline; }
.tb-course-step-skip ui-icon { width: 12px; height: 12px; margin: 0; }
.tb-course-path-foot { margin-top: 6px; color: var(--tb-text-muted); font-size: 0.66rem; }
.tb-course-path-foot > span { min-width: 0; }
.tb-course-complete { min-height: 29px; padding: 5px 9px; flex: none; font-size: 0.7rem; }
.tb-course-complete:disabled { cursor: not-allowed; opacity: 0.52; }
.tb-course-path.is-collapsed { padding-bottom: 7px; }
.tb-continue-btn {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    flex: none;
    white-space: nowrap;
}
.tb-continue-btn ui-icon { width: 15px; height: 15px; }
.tb-reader-compact-title {
    flex: 1;
    min-width: 160px;
    color: var(--tb-text-sec);
    font-size: 0.84rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tb-reader-book {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--tb-accent);
    margin-bottom: 6px;
}
.tb-reader-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.tb-reader-no,
.tb-reader-pages {
    font-size: 0.77rem;
    color: var(--tb-text-sec);
    font-weight: 600;
}
.tb-reader-title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.45rem;
    line-height: 1.35;
    color: var(--tb-text);
}
.tb-reader-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.tb-display-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 2px;
    border: 1px solid var(--c-primary-border);
    border-radius: 8px;
    background: rgba(255,253,248,0.82);
}
.tb-display-mode-btn {
    min-width: 92px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tb-text-sec);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.tb-display-mode-btn.active {
    background: var(--tb-primary);
    color: var(--c-on-accent);
}
.tb-display-mode-btn:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}
.tb-display-mode-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.tb-reader-body {
    width: min(calc(100% - (var(--content-gutter) * 2)), 960px);
    margin: 20px auto 48px;
    padding: 12px clamp(28px, 5vw, 56px) 48px;
    border: 1px solid var(--tb-border);
    border-radius: var(--radius-xs);
    background: var(--surface-raised);
    box-shadow: var(--tb-shadow);
}
.tb-reader-lead-media {
    width: min(calc(100% - (var(--content-gutter) * 2)), 960px);
    margin: 0 auto;
    padding: 20px 0 0;
}
.tb-reader-lead-media .tb-section-figure {
    margin: 0;
}
.tb-reader-lead-media .tb-section-image {
    height: clamp(178px, 28vh, 240px);
    object-fit: cover;
    object-position: center;
}
.tb-phonetic-lead-media {
    padding: 14px 16px 0;
}
.tb-phonetic-lead-media .tb-section-figure {
    margin: 0;
}
.tb-diagnostic {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--tb-border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.92);
    box-shadow: var(--tb-shadow);
}
.tb-diagnostic-warn {
    border-color: rgba(234, 88, 12, 0.28);
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
}
.tb-diagnostic-info {
    border-color: rgba(21, 94, 117, 0.18);
    background: linear-gradient(180deg, #f7fcfd 0%, #fff 100%);
}
.tb-diagnostic-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--tb-text);
    margin-bottom: 8px;
}
.tb-diagnostic-row {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    line-height: 1.6;
}
.tb-diagnostic-label {
    flex: none;
    width: 110px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--tb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.25px;
}
.tb-diagnostic-value {
    flex: 1;
    font-size: 0.82rem;
    color: var(--tb-text);
    word-break: break-word;
}
.tb-diagnostic-note {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--tb-text-sec);
}
.tb-section {
    margin: 0;
    padding: 12px 0 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.tb-section + .tb-section { padding-top: 30px; border-top: 1px solid var(--tb-border); }
.tb-section-head {
    padding: 0 0 14px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.tb-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tb-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.tb-section-badge::before { content: ''; width: 3px; height: 14px; border-radius: var(--radius-pill); background: var(--tb-primary); }
.tb-section-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tb-tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 98px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--c-primary-border);
    border-radius: var(--radius-sm);
    background: var(--surface-base);
    color: var(--tb-primary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
    box-shadow: none;
}
.tb-tts-btn:hover {
    border-color: var(--tb-primary);
    background: var(--tb-primary-soft);
}
.tb-tts-btn:disabled,
.tb-tts-btn.is-loading {
    cursor: wait;
    opacity: 0.72;
}
.tb-tts-btn.is-playing {
    border-color: var(--tb-primary);
    background: var(--tb-primary-soft);
    color: var(--tb-accent);
}
.tb-tts-btn-mini {
    min-width: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    flex: none;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1;
}
.tb-vocab-audio-btn {
    box-shadow: none;
}
.tb-tts-status {
    font-size: 0.78rem;
    color: var(--tb-text-sec);
    min-height: 1em;
}
.tb-tts-feedback {
    display: inline-flex;
    flex: 1 1 180px;
    min-width: 150px;
    flex-direction: column;
    gap: 5px;
}
.tb-tts-progress {
    --tb-audio-progress: 0%;
    display: none;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--c-border-soft);
    opacity: 0.6;
}
.tb-tts-progress > span {
    display: block;
    width: var(--tb-audio-progress);
    height: 100%;
    border-radius: inherit;
    background: var(--tb-primary);
    transition: width 0.18s linear;
}
.tb-tts-progress.is-active { display: block; opacity: 1; }
.tb-section-meta {
    font-size: 0.76rem;
    color: var(--tb-text-muted);
}
.tb-section-body { padding: 0; }
.tb-section-figure {
    margin: 0 0 16px;
}
.tb-section-image {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius);
    border: 1px solid var(--tb-border);
    box-shadow: 0 8px 26px rgba(29,33,31,0.08);
    background: var(--surface-raised);
}
.tb-section-caption {
    max-width: 820px;
    margin: 8px auto 0;
    padding-left: 2px;
    text-align: left;
    font-size: 0.76rem;
    color: var(--tb-text-muted);
}
.tb-section-placeholder {
    padding: 14px 16px 18px;
    color: var(--tb-text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
}
.tb-paragraph,
.tb-dialogue-text {
    font-size: 1.02rem;
    line-height: 2.1;
    color: var(--tb-text);
    margin: 0 0 18px;
    font-family: var(--font-ja-serif);
    letter-spacing: 0.02em;
    max-width: 43em;
    margin-left: auto;
    margin-right: auto;
}
.tb-paragraph:last-child,
.tb-dialogue-text:last-child { margin-bottom: 0; }

.tb-dialogue-flow {
    display: grid;
    gap: 0;
    padding: 0;
    border-top: 1px solid var(--tb-border);
}
.tb-dialogue-turn {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    padding: 15px 2px;
    border: 0;
    border-bottom: 1px solid var(--tb-border);
    border-radius: 0;
    background: transparent;
}
.tb-dialogue-speaker {
    display: inline-flex;
    align-items: center;
    min-width: 54px;
    padding: 2px 0;
    border-radius: 0;
    background: transparent;
    color: var(--tb-accent);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.tb-dialogue-text { margin: 0; }
.tb-listening-note {
    margin-bottom: 10px;
    color: var(--tb-text-sec);
}
.tb-section-wiki .tb-section-head { background: transparent; }
.tb-wiki-kicker {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.tb-wiki-title {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.45;
    color: var(--tb-text);
    font-weight: 800;
}
.tb-wiki-chips {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 70%;
}
.tb-wiki-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.10);
    color: #0f5f68;
    border: 1px solid rgba(14, 116, 144, 0.14);
    font-size: 0.75rem;
    font-weight: 700;
}
.tb-wiki-paragraph {
    line-height: 2.05;
}
.tb-wiki-source {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tb-border);
    color: var(--tb-text-muted);
    font-size: 0.76rem;
}
.tb-wiki-source a {
    color: var(--tb-primary);
    font-weight: 700;
    text-decoration: none;
}
.tb-wiki-source a:hover {
    text-decoration: underline;
}
.tb-inline-highlight {
    padding: 0 0.15em;
    border-radius: 0.25em;
    background: rgba(176,125,42,0.07);  /* 琥珀金/词汇高亮 */
    color: var(--c-ink);
    box-shadow: inset 0 -1.5px 0 rgba(176,125,42,0.22);
}
.tb-inline-highlight-grammar {
    background: rgba(90,80,152,0.07);  /* 靛紫/语法高亮 */
    box-shadow: inset 0 -1.5px 0 rgba(90,80,152,0.20);
}
.tb-inline-highlight-link {
    display: inline;
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    vertical-align: baseline;
    appearance: none;
    -webkit-appearance: none;
}
.tb-inline-highlight-link:hover {
    background: rgba(176,125,42,0.20);
    box-shadow: inset 0 -1.5px 0 rgba(176,125,42,0.46);
}
.tb-inline-highlight-link.tb-inline-highlight-grammar:hover {
    background: rgba(90,80,152,0.18);
    box-shadow: inset 0 -1.5px 0 rgba(90,80,152,0.42);
}
.tb-inline-highlight-link:focus-visible {
    outline: 2px solid rgba(45,106,106,0.45);
    outline-offset: 2px;
}

.tb-text-chunk {
    --tb-chunk-tone: #6b7280;
    display: inline;
    margin: 0;
    padding: 0.01em 0.08em 0.045em;
    border: 0;
    border-radius: 0.12em;
    background: color-mix(in srgb, var(--tb-chunk-tone) 7%, transparent);
    color: inherit;
    box-shadow: inset 0 -0.075em 0 color-mix(in srgb, var(--tb-chunk-tone) 34%, transparent);
    font: inherit;
    line-height: inherit;
    vertical-align: baseline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.tb-text-chunk[data-text-chunk] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.tb-text-chunk--topic,
.tb-text-chunk--subject { --tb-chunk-tone: #5678a9; }
.tb-text-chunk--object,
.tb-text-chunk--quote { --tb-chunk-tone: #b0782a; }
.tb-text-chunk--time { --tb-chunk-tone: #8768a2; }
.tb-text-chunk--place,
.tb-text-chunk--modifier { --tb-chunk-tone: #6f8d43; }
.tb-text-chunk--direction { --tb-chunk-tone: #3f8983; }
.tb-text-chunk--adverb,
.tb-text-chunk--predicate { --tb-chunk-tone: #a76064; }
.tb-text-chunk--connector,
.tb-text-chunk--other { --tb-chunk-tone: #6f7880; }
.tb-text-chunk--punctuation {
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.tb-text-chunk-fallback {
    box-shadow: inset 0 -0.075em 0 color-mix(in srgb, var(--tb-chunk-tone) 30%, transparent);
    text-decoration: underline dotted color-mix(in srgb, var(--tb-chunk-tone) 45%, transparent);
    text-underline-offset: 0.16em;
}
.tb-text-chunk[data-text-chunk]:hover,
.tb-text-chunk[data-text-chunk][aria-expanded='true'] {
    background: color-mix(in srgb, var(--tb-chunk-tone) 14%, transparent);
    box-shadow: inset 0 -0.095em 0 color-mix(in srgb, var(--tb-chunk-tone) 55%, transparent);
}
.tb-text-chunk[data-text-chunk]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tb-chunk-tone) 58%, transparent);
    outline-offset: 2px;
}

.tb-chunk-detail {
    --tb-chunk-detail-tone: #6f7880;
    --chunk-arrow-offset: 32px;
    position: fixed;
    z-index: 560;
    width: min(312px, calc(var(--layout-viewport-width) - 20px));
    max-height: min(360px, calc(var(--layout-viewport-height) - 20px));
    overflow: visible;
    border: 1px solid var(--c-rule-strong);
    border-top: 3px solid var(--tb-chunk-detail-tone);
    border-radius: 9px;
    background: var(--surface-raised);
    color: var(--c-ink);
    box-shadow: 0 12px 30px rgba(24, 43, 39, 0.17), 0 2px 8px rgba(24, 43, 39, 0.10);
}
.tb-chunk-detail[hidden] { display: none !important; }
.tb-chunk-detail[data-tone='topic'],
.tb-chunk-detail[data-tone='subject'] { --tb-chunk-detail-tone: #5678a9; }
.tb-chunk-detail[data-tone='object'],
.tb-chunk-detail[data-tone='quote'] { --tb-chunk-detail-tone: #b0782a; }
.tb-chunk-detail[data-tone='time'] { --tb-chunk-detail-tone: #8768a2; }
.tb-chunk-detail[data-tone='place'],
.tb-chunk-detail[data-tone='modifier'] { --tb-chunk-detail-tone: #6f8d43; }
.tb-chunk-detail[data-tone='direction'] { --tb-chunk-detail-tone: #3f8983; }
.tb-chunk-detail[data-tone='adverb'],
.tb-chunk-detail[data-tone='predicate'] { --tb-chunk-detail-tone: #a76064; }
.tb-chunk-detail::before {
    content: '';
    position: absolute;
    left: calc(var(--chunk-arrow-offset, 32px) - 6px);
    width: 11px;
    height: 11px;
    border: 1px solid var(--c-rule-strong);
    background: var(--surface-raised);
    transform: rotate(45deg);
}
.tb-chunk-detail[data-placement='bottom']::before {
    top: -7px;
    border-right: 0;
    border-bottom: 0;
}
.tb-chunk-detail[data-placement='top']::before {
    bottom: -7px;
    border-top: 0;
    border-left: 0;
}
.tb-chunk-detail-head {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    padding: 5px 7px 4px 13px;
    border-bottom: 1px solid var(--c-border-soft);
    color: var(--c-ink-3);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.tb-chunk-detail-close {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-ink-3);
    cursor: pointer;
}
.tb-chunk-detail-close:hover { background: var(--surface-sunken); color: var(--c-ink); }
.tb-chunk-detail-close ui-icon { width: 14px; height: 14px; }
.tb-chunk-detail-content {
    max-height: 318px;
    overflow-y: auto;
    padding: 12px 14px 14px;
}
.tb-chunk-detail-title {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-ja-serif);
    font-size: 1.18rem;
    font-weight: 650;
    line-height: 1.45;
}
.tb-chunk-detail-list { margin: 0; }
.tb-chunk-detail-list > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--c-border-soft);
}
.tb-chunk-detail-list dt {
    color: var(--c-ink-3);
    font-size: 0.72rem;
    font-weight: 700;
}
.tb-chunk-detail-list dd {
    margin: 0;
    color: var(--c-ink-2);
    font-size: 0.82rem;
    line-height: 1.55;
}
.tb-chunk-detail-note {
    margin: 8px 0 0;
    color: var(--c-ink-3);
    font-size: 0.7rem;
    line-height: 1.5;
}

.tb-meta-noselect {
    user-select: none;
    -webkit-user-select: none;
}

.tb-detail-section {
    border-bottom: 1px solid var(--tb-border);
}
.tb-detail-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c-ink-2);
    cursor: pointer;
    list-style: none;
    background: var(--c-panel);
    transition: background 0.15s;
}
.tb-detail-section > summary::-webkit-details-marker { display: none; }
.tb-detail-section > summary:hover { background: var(--c-primary-soft); }
.tb-detail-section > summary strong {
    color: var(--c-primary);
    font-size: 0.76rem;
}
.tb-detail-empty {
    padding: 16px;
    color: var(--tb-text-muted);
    font-size: 0.84rem;
}
.tb-vocab-loop-bar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--surface-base) 97%, transparent);
    border-bottom: 1px solid var(--tb-border);
    box-shadow: none;
}
.tb-vocab-loop-status {
    flex: 1 1 170px;
}

.tb-item-list { padding: 0 14px 18px; }
.tb-item-list-embedded {
    padding: 0;
}
.tb-item {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tb-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
.tb-item:first-child { border-top: 1px solid var(--tb-border); }
.tb-item-focus {
    background: var(--tb-primary-soft);
    box-shadow: inset 3px 0 0 var(--tb-primary);
}
.tb-item-loop-active {
    background: color-mix(in srgb, var(--tb-primary-soft) 68%, transparent);
    box-shadow: inset 3px 0 0 var(--tb-primary);
}
.tb-item-loop-active > summary {
    background: transparent;
}
.tb-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 4px;
}
.tb-item > summary::-webkit-details-marker { display: none; }
.tb-item-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}
.tb-item-title {
    font-size: 0.92rem;
    color: var(--tb-text);
    line-height: 1.45;
}
.tb-item-meta-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: none;
}
.tb-item-level {
    flex: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tb-primary);
    background: var(--surface-sunken);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}
.tb-item-start-loop-btn {
    min-width: 0;
    padding: 4px 8px;
    font-size: 0.72rem;
    line-height: 1.2;
    box-shadow: none;
}
.tb-item-sub {
    font-size: 0.8rem;
    color: var(--tb-text-sec);
    line-height: 1.5;
}
.tb-item-connection {
    font-size: 0.74rem;
    color: var(--tb-accent);
    margin-top: 5px;
    font-family: "SF Mono", Consolas, monospace;
}
.tb-item-body {
    margin: 0 4px;
    padding: 2px 0 16px;
    border-top: 1px dashed var(--tb-border);
}
.tb-detail-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    line-height: 1.55;
}
.tb-detail-label {
    flex: none;
    width: 56px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.25px;
}
.tb-detail-value {
    flex: 1;
    font-size: 0.82rem;
    color: var(--tb-text);
    word-break: break-word;
}
.tb-grammar-desc-lead {
    line-height: 1.75;
}
.tb-grammar-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.tb-grammar-bullet-list li {
    position: relative;
    padding: 9px 2px 9px 20px;
    border: 0;
    border-top: 1px solid var(--tb-border);
    border-radius: 0;
    background: transparent;
    line-height: 1.7;
}
.tb-grammar-bullet-list li::before {
    content: '●';
    position: absolute;
    left: 2px;
    top: 9px;
    color: var(--tb-primary);
    font-size: 0.72rem;
    line-height: 1.7;
}
.tb-detail-value-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tb-detail-value-text {
    min-width: 0;
}
.tb-subtitle {
    margin-top: 12px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--tb-text-sec);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tb-example {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid rgba(21,94,117,0.45);
    border-radius: 0;
    background: var(--surface-sunken);
}
.tb-example-ja {
    font-size: 0.9rem;
    font-family: var(--font-ja-serif);
    font-weight: 650;
    color: var(--tb-text);
    line-height: 1.65;
    margin-bottom: 4px;
}
.tb-example-zh {
    margin-top: 5px;
    font-size: 0.76rem;
    color: var(--c-ink-3);
    line-height: 1.55;
}

@media (max-width: 1200px) {
    .tb-detail-panel { width: 360px; min-width: 320px; }
}

@media (max-width: 900px) {
    .tb-reader-header { padding-left: 14px; padding-right: 14px; }
    .tb-course-path { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
    .tb-reader-body { width: calc(100% - 24px); padding-right: 24px; padding-left: 24px; }
    .tb-reader-lead-media { width: calc(100% - 24px); padding-right: 0; padding-left: 0; }
    .tb-course-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-course-step:nth-child(2) { border-right: 0; }
    .tb-course-step:nth-child(-n + 2) { border-bottom: 1px solid var(--tb-border); }
    .tb-dialogue-turn { grid-template-columns: minmax(54px, auto) 1fr; }
    .tb-dialogue-speaker { justify-self: start; }
    .tb-section-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
    .tb-diagnostic-row { flex-direction: column; gap: 4px; }
    .tb-diagnostic-label { width: auto; }
}

@media (max-width: 600px) {
    .tb-course-steps { grid-template-columns: 1fr; }
    .tb-course-path-foot { align-items: flex-start; flex-direction: column; }
    .gm-course-context { align-items: flex-start; flex-direction: column; }
    .tb-lesson-card-head,
    .tb-item-title-row,
    .tb-reader-row { flex-wrap: wrap; }
    .tb-reader-title { font-size: 1.18rem; }
    .tb-reader-body { width: 100%; margin-top: 12px; margin-bottom: 32px; padding: 8px 20px 34px; border-right: 0; border-left: 0; }
    .tb-reader-lead-media { width: calc(100% - 20px); }
    .tb-paragraph,
    .tb-dialogue-text { font-size: 0.92rem; }
    .tb-dialogue-turn { grid-template-columns: 1fr; }
    .tb-detail-row { flex-direction: column; gap: 4px; }
    .tb-detail-label { width: auto; }
}

.tb-turn-play-btn { background: none; border: none; cursor: pointer; font-size: 14px; margin-left: 8px; padding: 2px 6px; border-radius: 4px; color: var(--c-ink-3); transition: all 0.2s ease; vertical-align: middle; }
.tb-turn-play-btn:hover { background-color: var(--c-surface); color: var(--c-ink); }
ui-icon {
    display: inline-flex;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -0.14em;
    color: currentColor;
}

ui-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

button ui-icon,
.mod-btn ui-icon {
    margin-right: 0.36em;
}

.cc-btn-icon ui-icon,
.sidebar-collapse-btn ui-icon,
.detail-collapse-btn ui-icon,
.progress-calendar-toggle ui-icon,
.list-fav-btn ui-icon,
.gm-card-fav ui-icon,
.tb-turn-play-btn ui-icon,
.tb-vocab-audio-btn ui-icon {
    margin-right: 0;
}

/* ─── Icon polish ─────────────────────────────────────────── */
.mod-btn ui-icon,
.gm-subtab ui-icon,
.gm-sidebar-nav-btn ui-icon {
    width: 1.25em;
    height: 1.25em;
}

.cc-btn-icon ui-icon,
.sidebar-collapse-btn ui-icon,
.detail-collapse-btn ui-icon,
.progress-calendar-toggle ui-icon,
.list-fav-btn ui-icon,
.gm-card-fav ui-icon,
.tb-turn-play-btn ui-icon,
.tb-vocab-audio-btn ui-icon {
    width: 1.3em;
    height: 1.3em;
}

.cc-fav.active ui-icon[name="star"] svg,
.list-fav-btn.active ui-icon[name="star"] svg,
.gm-card-fav.active ui-icon[name="star"] svg,
.cc-tab-fav.active ui-icon[name="star"] svg,
.list-filter-btn.favorite.active ui-icon[name="star"] svg,
.fb-fav ui-icon[name="star"] svg,
.c-purple ui-icon[name="star"] svg {
    fill: currentColor;
}

.cc-page-btn ui-icon:last-child,
.btn-page ui-icon:last-child,
.cc-btn-batch ui-icon:last-child {
    margin: 0 0 0 0.36em;
}

.gm-card-lesson-badge,
.gm-lesson-header h3,
.gm-detail-section > summary,
.study-setup h2,
.study-review-section h3 {
    align-items: center;
}

.gm-card-lesson-badge {
    display: inline-flex;
    gap: 4px;
}

.gm-detail-section > summary ui-icon,
.gm-lesson-header h3 ui-icon,
.study-setup h2 ui-icon,
.study-review-section h3 ui-icon {
    margin-right: 0.4em;
    color: currentColor;
}

.study-complete-icon ui-icon {
    width: 1em;
    height: 1em;
    color: var(--c-accent-gold);
}

#searchInput,
.gm-search {
    padding-left: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23857F75' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px 16px;
}

@media (max-width: 1400px) {
    #ccReadStatus {
        display: none !important;
    }

    .cc-controls {
        gap: 5px;
    }

    .cc-controls button,
    .cc-controls select {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* ─── Focused personal-study interface ───────────────────── */
.focused-ui-hidden,
body.focused-ui #vocabStatusGroup,
body.focused-ui #grammarStatusGroup,
body.focused-ui #textbookStatusGroup,
body.focused-ui #backToOverviewBtn,
body.focused-ui .graph-stats,
body.focused-ui .study-nav-btns .btn-study-nav[data-nav],
body.focused-ui [data-act="local"],
body.focused-ui .btn-local-graph,
body.focused-ui #detailBtnLocalGraph,
body.focused-ui #detailBtnExpandTax {
    display: none !important;
}

body.focused-ui .status-bar {
    padding-top: 6px;
    padding-bottom: 6px;
}

body.focused-ui .status-left,
body.focused-ui .status-right {
    flex-wrap: nowrap;
}

.advanced-filters,
.sidebar-tool-section {
    margin-top: 2px;
    padding: 0;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-sm);
    background: rgba(255,253,248,0.5);
}

.advanced-filters > summary,
.sidebar-tool-section > summary {
    padding: 9px 11px;
    color: var(--c-ink-2);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.advanced-filters[open] > summary,
.sidebar-tool-section[open] > summary {
    border-bottom: 1px solid var(--c-border-soft);
}

.advanced-filters .filter-group {
    margin: 10px;
}

.sidebar-tool-section { margin-top: 10px; }
.sidebar-tool-section[hidden],
.gm-subtab-bar[hidden] { display: none; }
.sidebar-tool-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sidebar-tool-section > summary span {
    color: var(--c-ink-4);
    font-size: 0.65rem;
    font-weight: 500;
}
.sidebar-view-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}
.sidebar-view-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--c-ink-3);
    font-size: var(--type-ui-sm);
}
.sidebar-view-summary strong { color: var(--c-ink); font-size: 1rem; }
.sidebar-view-summary span { color: var(--c-ink-4); font-size: 0.68rem; text-align: right; }
.sidebar-tool-field {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--c-ink-3);
    font-size: var(--type-ui-sm);
}
.sidebar-tool-field select { width: 100%; }
.sidebar-tool-toggle {
    display: flex;
    width: 100%;
    min-height: var(--control-sm);
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--c-ink-2);
    font-size: var(--type-ui-sm);
    font-weight: 600;
    cursor: pointer;
}
.sidebar-tool-toggle:hover { border-color: var(--c-primary); color: var(--c-primary); }
.sidebar-tool-toggle.active { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.sidebar-tool-toggle.favorite.active,
.sidebar-tool-toggle.cc-tab-fav.active { border-color: var(--c-favorite-border); background: var(--c-favorite-soft); color: var(--c-favorite-text); }
.sidebar-tool-toggle span { margin-left: auto; color: inherit; opacity: 0.72; }
.sidebar-tool-toggle ui-icon { width: 14px; height: 14px; }

.gm-sidebar-tools { margin-top: 0; }
.gm-sidebar-filter-content { display: flex; flex-direction: column; gap: 8px; }
.gm-sidebar-filter-content .gm-toolbar-row { margin: 0; }
.gm-sidebar-filter-content .gm-search { width: 100%; min-width: 0; }
.gm-sidebar-filter-content .gm-count { display: none; }
.gm-sidebar-filter-content .gm-level-tabs { margin: 0; }
.gm-sidebar-filter-content .gm-filter-row { display: grid; grid-template-columns: 1fr 1fr; }
.gm-sidebar-filter-content .gm-select { width: 100%; grid-column: 1 / -1; }
.gm-sidebar-filter-content .gm-check-label:last-child { grid-column: 1 / -1; }

body.focused-ui .cc-card-foot .cc-act {
    flex: 1 1 33.333%;
}

/* ─── Product header (UX-300) ────────────────────────────── */
.app-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(285px, 1fr);
    min-height: 58px;
    padding: 0 20px;
    border-bottom-color: rgba(255,255,255,0.08);
    box-shadow: 0 1px 0 rgba(18,25,23,0.22);
}

body.focused-ui .app-header {
    padding-top: 0;
    padding-bottom: 0;
}

.app-brand-block {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-self: start;
}

.app-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 4px 7px 4px 3px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--top-text-strong);
    cursor: pointer;
    text-align: left;
}

.app-brand:hover { background: rgba(255,255,255,0.06); }

.app-brand-mark {
    display: grid;
    width: 32px;
    height: 32px;
    flex: none;
    place-items: center;
    border-radius: 9px;
    overflow: hidden;
}

.app-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.app-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.22;
}

.app-brand-copy strong {
    overflow: hidden;
    font-size: 0.83rem;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-brand-copy span {
    color: #849A94;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.app-header .module-switcher {
    align-self: stretch;
    gap: 3px;
    margin: 0;
    padding: 7px 2px;
    border-radius: 0;
    background: transparent;
}

.app-header .mod-btn {
    position: relative;
    min-width: 68px;
    padding: 0 13px;
    border-radius: var(--radius-sm);
    color: #93A7A1;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    transition: background 0.16s ease, color 0.16s ease;
}

.app-header .mod-btn:hover {
    background: rgba(255,255,255,0.055);
    color: #D5E1DD;
}

.app-header .mod-btn.active {
    background: rgba(131,200,190,0.14);
    color: #E7F2EE;
    box-shadow: none;
}

.app-header .mod-btn.active::before {
    content: '';
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 2px;
    border-radius: var(--radius-pill);
    background: var(--top-accent);
}

.header-debug-status { display: none; }

.app-header-actions {
    position: relative;
    min-width: 0;
    flex-wrap: nowrap;
    justify-self: end;
    gap: 8px;
}

.global-search-toggle {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.035);
    color: #AFC0BA;
    cursor: pointer;
    font-size: var(--type-caption);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.global-search-toggle:hover,
.global-search-toggle:focus-visible {
    border-color: rgba(122,189,181,0.38);
    background: rgba(122,189,181,0.12);
    color: #E3F0EC;
}

.global-search-toggle ui-icon { width: 15px; height: 15px; margin: 0; }
.global-search-toggle kbd,
.global-search-input-wrap kbd {
    padding: 2px 5px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: #829790;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
}

.app-header .progress-strip { gap: 6px; }

.app-header .progress-metric {
    padding: 3px 8px;
    border-color: transparent;
    background: transparent;
}

.app-header .progress-label { color: #829790; }

.app-header .progress-calendar-toggle,
.app-settings-toggle {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.035);
    color: #9FB5AF;
    cursor: pointer;
}

.app-header .progress-calendar-toggle:hover,
.app-settings-toggle:hover,
.app-settings-toggle[aria-expanded="true"] {
    border-color: rgba(122,189,181,0.38);
    background: rgba(122,189,181,0.12);
    color: #D4E7E2;
}

.app-header .progress-calendar-toggle ui-icon,
.app-settings-toggle ui-icon {
    width: 16px;
    height: 16px;
    margin: 0;
}

.app-settings { position: relative; }

.app-settings-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 286px;
    padding: 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--c-ink);
    box-shadow: var(--shadow-lg);
    z-index: 520;
}

.app-settings-panel[hidden] { display: none; }

.app-settings-panel::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 10px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--c-border);
    border-left: 1px solid var(--c-border);
    background: var(--surface-raised);
    transform: rotate(45deg);
}

.app-settings-heading { margin-bottom: 12px; }

.app-settings-heading div,
.app-settings-panel .status-bar-action > span {
    display: flex;
    flex-direction: column;
}

.app-settings-heading strong { font-size: 0.88rem; }
.app-settings-heading span,
.app-settings-panel .status-bar-action small {
    color: var(--c-ink-3);
    font-size: 0.68rem;
    font-weight: 400;
}

.app-settings-panel .app-scale-control,
.app-settings-panel .app-theme-control,
.app-settings-panel .app-density-control {
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: 40px;
    margin-bottom: 8px;
    padding: 7px 8px 7px 11px;
    border-color: var(--c-border-soft);
    border-radius: var(--radius);
    background: var(--surface-base);
    color: var(--c-ink-2);
    font-size: var(--type-ui-sm);
}

.app-settings-panel .app-scale-control::after { display: none; }

.app-settings-panel .app-scale-control select,
.app-settings-panel .app-theme-control select,
.app-settings-panel .app-density-control select {
    min-width: 72px;
    padding: 4px 7px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--c-ink);
}

.app-settings-panel .app-scale-control select option,
.app-settings-panel .app-theme-control select option,
.app-settings-panel .app-density-control select option {
    background: var(--surface-raised);
    color: var(--c-ink);
}

.app-pwa-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    margin: 2px 0 8px;
    padding: 7px 8px 7px 10px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    background: var(--surface-sunken);
    color: var(--c-ink-3);
    font-size: 0.68rem;
    line-height: 1.35;
}

.app-pwa-status-text {
    min-width: 0;
}

.app-pwa-status[data-pwa-state='ready'],
.app-pwa-status[data-pwa-state='installed'] {
    color: var(--c-ink-2);
}

.app-pwa-status[data-pwa-state='offline'] {
    border-color: var(--c-warn);
    color: var(--c-warn-text);
}

.app-pwa-install {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--c-ink-2);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.app-pwa-install:hover { background: var(--surface-base); }
.app-pwa-install:disabled { cursor: default; opacity: 0.6; }

.app-settings-danger {
    margin: 2px 0 8px;
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 1px solid var(--c-border-soft);
}

.app-settings-danger summary {
    padding: 9px 2px;
    color: var(--c-ink-3);
    font-size: var(--type-caption);
    font-weight: 700;
    cursor: pointer;
}

.app-settings-danger-body {
    display: grid;
    gap: 8px;
    padding: 0 2px 10px;
    color: var(--c-ink-3);
    font-size: 0.68rem;
    line-height: 1.45;
}

.app-settings-danger-action {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(168, 50, 64, 0.35);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-danger);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.app-settings-danger-action:hover { background: var(--c-danger-bg); }
.app-settings-danger-action ui-icon { width: 15px; height: 15px; }
.app-settings-danger-status { min-height: 1em; color: var(--c-ok); }

.app-settings-panel .status-bar-action {
    width: 100%;
    min-height: 46px;
    justify-content: flex-start;
    gap: 10px;
    padding: 7px 11px;
    border-color: var(--c-border-soft);
    border-radius: var(--radius);
    background: transparent;
    color: var(--c-ink-2);
    text-align: left;
}

.app-settings-panel .status-bar-action:hover { background: var(--surface-sunken); }
.app-settings-panel .status-bar-action ui-icon { width: 17px; height: 17px; margin: 0; }
.app-settings-panel .status-bar-action strong { font-size: var(--type-ui-sm); }

@media (max-width: 1300px) {
    .app-header {
        grid-template-columns: minmax(168px, 1fr) auto minmax(242px, 1fr);
        padding-right: 12px;
        padding-left: 12px;
    }

    .app-brand { gap: 7px; }
    .app-brand-mark { width: 29px; height: 29px; }
    .app-brand-copy strong { font-size: 0.78rem; }
    .app-brand-copy span { font-size: 0.61rem; }
    .app-header .mod-btn { min-width: 62px; padding-right: 9px; padding-left: 9px; }
    .app-header .progress-metric { padding-right: 4px; padding-left: 4px; }
    .app-header .progress-strip { gap: 2px; }
    .app-header-actions { gap: 5px; }
    .global-search-toggle { width: 30px; justify-content: center; padding: 0; }
    .global-search-toggle span,
    .global-search-toggle kbd { display: none; }
}

/* ─── Global left navigation (B01 / B11) ─────────────────── */
:root { --app-nav-width: 208px; }

body {
    display: grid;
    grid-template-columns: var(--app-nav-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.app-container {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
}

.app-header,
body.focused-ui .app-header {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    width: var(--app-nav-width);
    min-width: 0;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 12px 76px;
    border-right: 1px solid var(--top-divider);
    border-bottom: 0;
    overflow: visible;
    box-shadow: 1px 0 0 rgba(18,25,23,0.22);
}

.app-brand-block {
    width: 100%;
    flex: none;
    justify-content: space-between;
    gap: 6px;
}

.app-brand { width: 100%; }

.app-header .module-switcher {
    display: flex;
    width: 100%;
    align-self: auto;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--top-divider);
    border-bottom: 1px solid var(--top-divider);
}

.app-header .mod-btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 11px;
    flex: none;
    text-align: left;
}

.app-header .mod-btn ui-icon {
    width: 17px;
    height: 17px;
    flex: none;
}

.app-header-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 7px;
}

.global-search-toggle {
    width: 100%;
    min-height: 36px;
    justify-content: flex-start;
    padding: 0 10px;
}

.global-search-toggle kbd { margin-left: auto; }

.app-external-practice {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    color: var(--top-text);
    text-decoration: none;
}

.app-external-practice:hover,
.app-external-practice:focus-visible {
    border-color: rgba(122,189,181,0.34);
    background: rgba(122,189,181,0.1);
    color: var(--top-text-strong);
}

.app-external-practice ui-icon { width: 16px; height: 16px; flex: none; color: var(--top-accent); }
.app-external-practice > span { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.app-external-practice strong { font-size: 0.74rem; }
.app-external-practice small { color: #829790; font-size: 0.61rem; font-weight: 500; }

.app-header .progress-strip {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr auto;
    gap: 5px;
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.025);
}

.app-header .progress-metric {
    min-width: 0;
    justify-content: space-between;
    padding: 2px 0;
    border: 0;
    background: transparent;
}

.app-header .progress-metric:first-child { grid-column: 1 / -1; }
.app-header .progress-calendar-toggle { width: 28px; height: 28px; }

.app-header .progress-calendar {
    top: 0;
    right: auto;
    left: calc(100% + 12px);
}

.app-settings {
    width: 100%;
    margin-top: auto;
}

.app-settings-toggle {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 10px;
}

.app-settings-toggle::after {
    content: "显示设置";
    font-size: 0.72rem;
    font-weight: 700;
}

.app-settings-panel {
    position: fixed;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    max-height: calc(var(--layout-viewport-height) - 84px);
    overflow-y: auto;
}

.app-settings-panel::before { display: none; }

.status-bar-reveal-controls {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 620;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    width: var(--app-nav-width);
    min-height: 64px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: var(--top-surface);
}

.status-bar-reveal {
    display: inline-flex;
    min-width: 0;
    min-height: 34px;
    gap: 5px;
    padding: 4px 7px;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.status-bar-reveal ui-icon { width: 15px; height: 15px; flex: none; }
.status-bar-reveal span { overflow: hidden; text-overflow: ellipsis; }

body.status-bar-collapsed {
    --app-nav-width: 64px;
}

body.status-bar-collapsed .app-header { display: none; }

body.status-bar-collapsed .status-bar-reveal-controls {
    top: auto;
    align-self: stretch;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    border-top: 0;
    border-right: 1px solid rgba(255,255,255,0.08);
}

body.status-bar-collapsed .status-bar-reveal {
    width: 42px;
    height: 42px;
    padding: 0;
}

body.status-bar-collapsed .status-bar-reveal span { display: none; }

@media (max-width: 1400px) {
    :root { --app-nav-width: 76px; }

    .app-header,
    body.focused-ui .app-header { gap: 8px; padding: 10px 8px 112px; }
    .app-brand-block { justify-content: center; }
    .app-brand { width: 48px; justify-content: center; padding: 5px; }
    .app-brand-copy { display: none; }
    .app-header .module-switcher { gap: 5px; }
    .app-header .mod-btn {
        width: 48px;
        min-height: 42px;
        align-self: center;
        justify-content: center;
        padding: 0;
        font-size: 0;
    }
    .app-header .mod-btn ui-icon { width: 20px; height: 20px; }
    .global-search-toggle,
    .app-external-practice,
    .app-settings-toggle { width: 48px; height: 42px; min-height: 42px; align-self: center; justify-content: center; padding: 0; flex: none; }
    .global-search-toggle span,
    .global-search-toggle kbd,
    .app-external-practice > span,
    .app-settings-toggle::after { display: none; }
    .app-header .progress-strip { display: none; }
    .tablet-sidebar-toggle span { display: none; }
    .app-settings { display: flex; justify-content: center; }
    .app-settings-panel { left: calc(var(--app-nav-width) + 10px); }
    .status-bar-reveal-controls {
        min-height: 104px;
        grid-template-columns: 1fr;
        padding: 9px 12px;
    }
    .status-bar-reveal { width: 48px; min-height: 38px; justify-self: center; padding: 0; }
    .status-bar-reveal span { display: none; }
}

/* ─── Global search / command entry (UX-403) ────────────── */
.global-search-overlay {
    position: fixed;
    z-index: 1300;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: clamp(48px, calc(13vh / var(--app-scale)), 136px) 16px 24px;
}

.global-search-overlay[hidden] { display: none; }
.global-search-backdrop { position: absolute; inset: 0; background: rgba(24, 37, 34, 0.46); backdrop-filter: blur(4px); }

.global-search-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(720px, 100%);
    max-height: min(680px, calc(var(--layout-viewport-height) - 72px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 24px 70px rgba(24, 37, 34, 0.28), var(--shadow-lg);
}

.global-search-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 15px;
    border-bottom: 1px solid var(--c-border-soft);
}

.global-search-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--c-primary);
    font-size: var(--type-caption);
    font-weight: 800;
    letter-spacing: 0.1em;
}

.global-search-heading h2 {
    margin: 0;
    color: var(--c-ink);
    font-family: var(--font-ja-serif);
    font-size: 1.3rem;
    line-height: 1.25;
}

.global-search-close {
    display: grid;
    width: 32px;
    height: 32px;
    flex: none;
    place-items: center;
    border: 1px solid var(--c-border-soft);
    border-radius: 50%;
    background: var(--surface-base);
    color: var(--c-ink-2);
    cursor: pointer;
}

.global-search-close:hover,
.global-search-close:focus-visible { border-color: var(--c-primary-border); color: var(--c-primary); }
.global-search-close ui-icon { width: 16px; height: 16px; margin: 0; }

.global-search-input-wrap {
    display: flex;
    min-height: 50px;
    align-items: center;
    gap: 10px;
    margin: 16px 22px 8px;
    padding: 0 12px;
    border: 1px solid var(--c-primary-border);
    border-radius: var(--radius);
    background: var(--surface-base);
    box-shadow: 0 0 0 3px rgba(37, 100, 97, 0.07);
}

.global-search-input-wrap > ui-icon { width: 18px; height: 18px; flex: none; color: var(--c-primary); margin: 0; }
.global-search-input-wrap input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: var(--c-ink); font-size: 1rem; }
.global-search-input-wrap input::placeholder { color: var(--c-ink-4); }
.global-search-input-wrap kbd { border-color: var(--c-border); color: var(--c-ink-4); }

.global-search-status {
    min-height: 22px;
    padding: 0 24px 8px;
    color: var(--c-ink-4);
    font-size: var(--type-caption);
}

.global-search-results { min-height: 110px; overflow: auto; padding: 0 10px 12px; }
.global-search-group { margin-top: 4px; }
.global-search-group-heading { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 5px; color: var(--c-ink-3); font-size: var(--type-caption); font-weight: 800; letter-spacing: 0.04em; }
.global-search-group-heading > span { display: inline-flex; align-items: center; gap: 6px; }
.global-search-group-heading ui-icon { width: 13px; height: 13px; color: var(--c-primary); margin: 0; }
.global-search-group-heading small { min-width: 20px; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--c-ink-4); font-size: 0.65rem; text-align: center; }

.global-search-result {
    display: grid;
    width: 100%;
    grid-template-columns: 27px minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--c-ink);
    cursor: pointer;
    text-align: left;
}

.global-search-result:hover,
.global-search-result.is-active { border-color: var(--c-primary-border); background: var(--c-primary-soft); }
.global-search-result:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.global-search-result-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: var(--surface-sunken); color: var(--c-primary); }
.global-search-result-icon ui-icon { width: 15px; height: 15px; margin: 0; }
.global-search-result-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.global-search-result-copy strong { overflow: hidden; font-size: var(--type-ui); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-copy > span { overflow: hidden; color: var(--c-ink-3); font-size: var(--type-caption); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-meta { max-width: 190px; overflow: hidden; color: var(--c-ink-4); font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-enter { color: var(--c-ink-4); font-size: 1rem; opacity: 0; }
.global-search-result:hover .global-search-result-enter,
.global-search-result.is-active .global-search-result-enter { opacity: 1; }

.global-search-empty { display: flex; min-height: 150px; align-items: center; justify-content: center; gap: 5px; padding: 26px 18px; flex-direction: column; color: var(--c-ink-4); font-size: var(--type-ui-sm); text-align: center; }
.global-search-empty strong { color: var(--c-ink-2); font-size: var(--type-ui); }
.global-search-empty-icon { display: grid; width: 36px; height: 36px; margin-bottom: 3px; place-items: center; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); }
.global-search-empty-icon ui-icon { width: 18px; height: 18px; margin: 0; }

body.global-search-open { overflow: hidden; }

@media (max-width: 700px) {
    .global-search-overlay { padding: 62px 10px 14px; }
    .global-search-dialog { max-height: calc(var(--layout-viewport-height) - 76px); border-radius: var(--radius-md); }
    .global-search-heading { padding: 16px 16px 12px; }
    .global-search-heading h2 { font-size: 1.12rem; }
    .global-search-input-wrap { margin: 12px 16px 6px; }
    .global-search-status { padding-right: 18px; padding-left: 18px; }
    .global-search-result { grid-template-columns: 27px minmax(0, 1fr) 20px; }
    .global-search-result-meta { display: none; }
}

/* ─── Vocabulary catalog reduction (UX-301) ──────────────── */
.filter-label {
    display: block;
    margin-bottom: 6px;
    color: var(--c-ink-2);
    font-size: var(--type-caption);
    font-weight: 700;
}

.vocab-filter-native { display: none; }

.vocab-level-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.vocab-filter-chip {
    min-height: 31px;
    padding: 4px 6px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--c-ink-2);
    font-size: var(--type-ui-sm);
    font-weight: 700;
    cursor: pointer;
}

.vocab-filter-chip:hover { border-color: var(--c-primary-border); color: var(--c-primary); }
.vocab-filter-chip.active {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    color: var(--c-primary-hover);
}

.advanced-filters > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.advanced-filters > summary span {
    color: var(--c-ink-4);
    font-size: 0.65rem;
    font-weight: 500;
}

.vocab-plan-card {
    margin: 8px 16px 18px;
    padding: 13px 0 0;
    border-top: 1px solid var(--c-border-soft);
    background: transparent;
}

.vocab-plan-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--c-primary);
    font-size: var(--type-caption);
    font-weight: 700;
}

.vocab-plan-count { display: flex; align-items: baseline; gap: 6px; }
.vocab-plan-count strong { color: var(--c-ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.vocab-plan-count span { color: var(--c-ink-2); font-size: var(--type-ui-sm); font-weight: 700; }
.vocab-plan-card p { margin-top: 4px; color: var(--c-ink-3); font-size: 0.69rem; line-height: 1.5; }

.cc-toolbar {
    padding: 10px 0 9px;
    margin-bottom: 12px;
}

.cc-toolbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.cc-toolbar-summary,
.cc-controls {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.cc-toolbar-summary { flex: 1 1 auto; }
.cc-controls { flex: 0 0 auto; flex-wrap: nowrap; }

.cc-stats {
    min-width: 110px;
    flex: 0 1 auto;
    white-space: nowrap;
}

.cc-compact-field {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--cc-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.cc-compact-field .cc-select { min-width: 82px; padding-right: 6px; padding-left: 7px; }

.cc-favorite-filter {
    display: inline-flex;
    min-height: var(--control-sm);
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border: 1px solid var(--cc-border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--cc-text2);
    font-size: var(--type-ui-sm);
    cursor: pointer;
    flex: none;
    white-space: nowrap;
}

.cc-favorite-filter span { color: var(--cc-muted); font-size: 0.68rem; }
.cc-favorite-filter.active { border-color: var(--c-favorite-border); background: var(--c-favorite-soft); color: var(--c-favorite-text); }
.cc-favorite-filter ui-icon { margin: 0; }

.cc-controls .cc-btn-icon,
.cc-controls .cc-visibility-toggle,
.cc-controls .cc-btn-batch {
    min-height: var(--control-sm);
    width: auto;
    padding: 5px 9px;
    font-size: var(--type-ui-sm);
    white-space: nowrap;
}

.cc-controls .browsing-icon-action,
.list-batch-bar .browsing-icon-action {
    width: 34px;
    min-width: 34px;
    padding: 5px;
    justify-content: center;
}

.browsing-icon-action ui-icon { margin: 0; }

.cc-read-status {
    display: block;
    min-height: 0;
    margin-top: 4px;
    color: var(--c-ink-3);
    font-size: 0.68rem;
    text-align: right;
}

.cc-read-status:empty { display: none; }

.cc-grid {
    grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
    align-items: start;
    gap: 12px;
}

.cc-card {
    --cc-card-footer-height: 0px;
    min-width: 0;
    overflow: visible;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.cc-card:not(.cc-expanded) {
    height: auto;
    min-height: 0;
}
.cc-card::before {
    bottom: var(--cc-card-footer-height);
    height: auto;
    border-radius: var(--cc-radius) 0 0 0;
}
.cc-wrapper.cc-hide-meanings .cc-card:not(.cc-expanded) {
    height: auto;
    min-height: 0;
}
.cc-card:hover { border-color: var(--cc-border); box-shadow: 0 3px 12px rgba(42,35,26,0.08); transform: none; }
.cc-card:has(.cc-card-menu.open) { z-index: 30; }

.cc-card-head { min-height: 34px; padding: 9px 8px 0 16px; }

.cc-meta-count {
    min-height: 22px;
    padding: 1px 7px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--c-ink-3);
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
    flex: none;
}

.cc-meta-count:hover { background: var(--c-primary-soft); color: var(--c-primary); }

.cc-card-body {
    min-height: 0;
    padding: 5px 14px 10px 16px;
}
.cc-card-body:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; border-radius: var(--radius-sm); box-shadow: 0 0 0 4px var(--c-focus-ring); }

.cc-word {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.42rem;
    line-height: 1.28;
}

.cc-reading { margin-bottom: 4px; font-size: 0.79rem; }

.cc-pos-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    margin-bottom: 7px;
}

.cc-pos-only-meaning { grid-template-columns: minmax(0, 1fr); }

.cc-meaning {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 4.35em;
    font-size: 0.85rem;
    line-height: 1.45;
}

.cc-example {
    min-height: 0;
    max-height: 58px;
    padding: 7px 9px;
    margin-top: 2px;
    border-left-width: 2px;
}

.cc-example-ja,
.cc-example-zh {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
}

.cc-card-extra {
    margin: 0;
    padding-right: 14px;
    padding-left: 16px;
    background: rgba(247,243,235,0.55);
}

.cc-card-foot {
    position: relative;
    height: var(--cc-card-footer-height);
    min-height: var(--cc-card-footer-height);
    box-sizing: border-box;
    align-items: stretch;
    justify-content: space-between;
    overflow: visible;
    padding: 0 8px 0 16px;
    background: transparent;
}

.cc-card-primary,
.cc-card-menu-toggle {
    border: 0;
    background: transparent;
    font-family: var(--font-ui);
    font-size: var(--type-ui-sm);
    font-weight: 700;
    cursor: pointer;
}

.cc-card-primary {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    color: var(--c-primary);
    font-size: 0.74rem;
}

.cc-card-primary:hover { background: var(--c-primary-soft); color: var(--c-primary-hover); }
.cc-card-primary ui-icon { width: 14px; height: 14px; margin: 0; }

.cc-card-menu-wrap { position: relative; display: flex; border-left: 0; }
.cc-card-actions { display: inline-flex; align-items: center; gap: 1px; margin-left: 2px; }

.cc-card-menu-toggle {
    display: inline-flex;
    width: 32px;
    min-width: 32px;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: var(--radius-sm);
    color: var(--c-ink-3);
    flex: none;
}

.cc-card-menu-toggle span { font-size: 0.68rem; line-height: 1; letter-spacing: 0.08em; }
.cc-card-menu-toggle:hover,
.cc-card-menu-toggle[aria-expanded="true"] { background: var(--surface-sunken); color: var(--c-ink); }

.cc-card-menu {
    display: none;
    position: absolute;
    right: 5px;
    top: calc(100% + 6px);
    bottom: auto;
    width: 136px;
    padding: 4px;
    border: 1px solid var(--cc-border);
    border-radius: var(--radius);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    z-index: 40;
}

.cc-card-menu.open { display: block; }

.cc-card-menu .cc-act {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--type-ui-sm);
    text-align: left;
}

.cc-card-menu .cc-act ui-icon { width: 14px; height: 14px; margin: 0; }

@media (max-width: 1300px) {
    .cc-wrapper { padding-right: 14px; padding-left: 14px; }
    .cc-toolbar-main { align-items: flex-start; flex-direction: column; gap: 7px; }
    .cc-toolbar-summary,
    .cc-controls { width: 100%; }
    .cc-controls { justify-content: flex-end; }
    .cc-stats { margin-right: auto; }
    .cc-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}

/* B04: size the catalog from the actual content pane, not only the viewport. */
@supports (container-type: inline-size) {
    .cc-wrapper {
        container-name: vocab-catalog;
        container-type: inline-size;
    }

    .cc-grid {
        --cc-card-min-height: 260px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    @container vocab-catalog (max-width: 1159px) {
        .cc-grid {
            --cc-card-min-height: 252px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @container vocab-catalog (max-width: 859px) {
        .cc-grid {
            --cc-card-min-height: 248px;
            grid-template-columns: repeat(2, minmax(240px, 420px));
            justify-content: center;
        }
    }

    @container vocab-catalog (max-width: 519px) {
        .cc-grid {
            --cc-card-min-height: 244px;
            grid-template-columns: minmax(min(100%, 240px), 420px);
        }
    }

    @container vocab-catalog (max-width: 440px) {
        .cc-grid { grid-template-columns: minmax(0, 1fr); }
    }
}

html[data-layout-viewport='tablet'] .cc-grid {
    --cc-card-min-height: 248px;
    grid-template-columns: repeat(2, minmax(240px, 420px));
    justify-content: center;
}

html[data-layout-viewport='phone'] .cc-grid {
    --cc-card-min-height: 244px;
    grid-template-columns: minmax(0, 1fr);
}

/* ─── Shared panel layout (UX-304) ───────────────────────── */
.sidebar-header,
.detail-panel-header {
    min-height: 56px;
    box-sizing: border-box;
}

.detail-panel-header {
    margin: 0;
    padding: 12px 14px;
    justify-content: space-between;
    flex: none;
    background: color-mix(in srgb, var(--surface-base) 82%, var(--surface-sunken));
}

.detail-panel-header h2,
.gm-detail-panel .detail-panel-header h2,
.tb-detail-panel .detail-panel-header h2 {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--c-ink-2);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: none;
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.panel-reset-btn {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-ink-4);
    cursor: pointer;
}

.panel-reset-btn:hover {
    border-color: var(--c-border);
    background: var(--surface-raised);
    color: var(--c-primary);
}

.panel-reset-btn:focus-visible,
.sidebar-collapse-btn:focus-visible,
.detail-collapse-btn:focus-visible,
.resize-handle:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.panel-reset-btn ui-icon,
.sidebar-collapse-btn ui-icon,
.detail-collapse-btn ui-icon {
    width: 14px;
    height: 14px;
    margin: 0;
}

.sidebar.sidebar-collapsed .panel-reset-btn,
.detail-panel.detail-panel-collapsed .panel-reset-btn {
    display: none;
}

.detail-panel.detail-panel-collapsed .panel-header-actions {
    width: 100%;
    justify-content: center;
}

.detail-panel {
    padding: 0;
}

#detailContent {
    height: calc(100% - 56px);
    padding: 18px;
    overflow-y: auto;
    container: vocab-detail / inline-size;
}

/* ─── Compact vocabulary detail (B13) ─────────────────────── */
.vocab-detail {
    color: var(--c-ink);
}

.vocab-detail-head {
    padding-bottom: 12px;
}

.vocab-detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.vocab-detail-title-copy {
    min-width: 0;
}

.detail-content .vocab-detail h3 {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--c-ink);
    font-family: var(--font-ja-sans);
    font-size: 1.5rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.vocab-detail-reading {
    margin-top: 2px;
    color: var(--c-ink-3);
    font-family: var(--font-ja-sans);
    font-size: 0.9rem;
    line-height: 1.4;
}

.vocab-detail-audio {
    width: 32px;
    height: 32px;
    flex: none;
    border-color: var(--c-border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--c-primary);
}

.vocab-detail-audio ui-icon {
    width: 17px;
    height: 17px;
}

.vocab-detail-meta,
.detail-status-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.vocab-detail-meta {
    margin-top: 8px;
}

.vocab-detail-level {
    background: var(--c-info-soft);
    color: var(--c-info);
}

.vocab-detail-split {
    background: var(--c-warn-bg);
    color: var(--c-warn-text);
}

.vocab-detail-favorite {
    background: rgba(90, 80, 152, 0.12);
    color: var(--c-grammar);
}

.vocab-detail-study {
    padding: 10px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.vocab-detail-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vocab-detail h4 {
    margin: 0;
    color: var(--c-ink-2);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.vocab-detail-unset {
    color: var(--c-ink-4);
    font-size: 0.75rem;
}

.detail-actions.vocab-detail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 6px;
    margin-top: 9px;
}

.detail-actions.vocab-detail-actions button {
    display: inline-flex;
    min-width: 0;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
    white-space: nowrap;
}

.detail-actions.vocab-detail-actions ui-icon {
    width: 14px;
    height: 14px;
    flex: none;
}

.vocab-detail-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border-soft);
}

.vocab-detail-section > h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
}

.vocab-detail-section > h4 span {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--c-ink-3);
    font-size: 0.65rem;
}

.vocab-detail .detail-item {
    min-width: 0;
    margin-bottom: 9px;
}

.vocab-detail .detail-item:last-child {
    margin-bottom: 0;
}

.vocab-detail .detail-label {
    margin-bottom: 2px;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

.vocab-detail .detail-value {
    color: var(--c-ink-2);
    font-size: 0.85rem;
    line-height: 1.45;
}

.vocab-detail-ja,
.vocab-detail-example-ja {
    font-family: var(--font-ja-sans);
}

.vocab-detail-meaning-list {
    margin: 2px 0 0 18px;
    padding: 0;
}

.vocab-detail-meaning-list li {
    margin: 2px 0;
    color: var(--c-ink-2);
}

.vocab-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.vocab-detail-info-wide {
    grid-column: 1 / -1;
}

.vocab-detail-example {
    padding: 8px 10px;
    border-left: 3px solid var(--c-border);
    background: var(--surface-sunken);
}

.vocab-detail-example + .vocab-detail-example {
    margin-top: 7px;
}

.vocab-detail-example-ja {
    color: var(--c-ink);
    font-size: 0.88rem;
    line-height: 1.55;
}

.vocab-detail-example-zh {
    margin-top: 2px;
    color: var(--c-ink-3);
    font-size: 0.76rem;
    line-height: 1.45;
}

@container vocab-detail (max-width: 250px) {
    .vocab-detail-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-actions.vocab-detail-actions,
    .vocab-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .vocab-detail-info-wide {
        grid-column: auto;
    }
}

#gmDetailContent,
#tbDetailContent {
    height: calc(100% - 56px);
    padding: 0;
}

.panel-empty-state {
    display: grid;
    width: min(100% - 28px, 300px);
    min-height: 220px;
    margin: 24px auto;
    padding: 28px 22px;
    place-items: center;
    align-content: center;
    gap: 9px;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    color: var(--c-ink-3);
    text-align: center;
}

.panel-empty-state ui-icon {
    width: 24px;
    height: 24px;
    color: var(--c-primary);
}

.panel-empty-state strong {
    color: var(--c-ink-2);
    font-size: 0.9rem;
}

.panel-empty-state p {
    margin: 0;
    color: var(--c-ink-4);
    font-size: 0.78rem;
    line-height: 1.65;
}

.resize-handle {
    width: 6px;
    touch-action: none;
}

.resize-handle:focus-visible,
.resize-handle:hover,
.resize-handle.dragging {
    background: var(--c-primary-soft);
}

.resize-handle:focus-visible::after,
.resize-handle:hover::after,
.resize-handle.dragging::after {
    opacity: 1;
}

.resize-handle.is-disabled {
    cursor: default;
}

.resize-handle.is-disabled::after {
    opacity: 0;
}

body.panel-resize-active {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ─── UX-305 Shared state surfaces ─────────────────────────── */
.state-view {
    display: grid;
    width: min(100%, 560px);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 24px auto;
    padding: 22px 24px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--c-ink-2);
    box-shadow: var(--shadow-sm);
}
.state-view-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary);
}
.state-view-icon ui-icon { width: 20px; height: 20px; }
.state-view-copy { min-width: 0; }
.state-view-title {
    margin: 0;
    color: var(--c-ink);
    font-size: var(--type-body);
    font-weight: 800;
    line-height: 1.35;
}
.state-view-message {
    margin: 4px 0 0;
    color: var(--c-ink-3);
    font-size: var(--type-ui);
    line-height: 1.6;
}
.state-view-actions {
    grid-column: 2;
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.state-view-action {
    display: inline-flex;
    min-height: var(--control-sm);
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--radius);
    font: 700 var(--type-ui-sm)/1 var(--font-ui);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.state-view-action ui-icon { width: 15px; height: 15px; }
.state-view-action--primary {
    border: 1px solid var(--c-primary);
    background: var(--c-primary);
    color: var(--c-on-accent);
}
.state-view-action--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.state-view-action--secondary {
    border: 1px solid var(--c-border);
    background: var(--surface-raised);
    color: var(--c-ink-2);
}
.state-view-action--secondary:hover { border-color: var(--c-primary); color: var(--c-primary); }
.state-view-action[disabled] { opacity: 0.6; cursor: wait; }
.state-view-action.is-busy::after { content: '…'; }
.state-view-details {
    margin-top: 9px;
    color: var(--c-ink-4);
    font-size: var(--type-caption);
}
.state-view-details summary { cursor: pointer; color: var(--c-ink-3); }
.state-view-details code {
    display: block;
    max-width: 100%;
    margin-top: 6px;
    padding: 7px 9px;
    overflow: auto;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--c-ink-3);
    font: 0.72rem/1.5 var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.state-view--loading {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.state-view--loading .state-view-icon {
    border: 2px solid var(--c-border);
    border-top-color: var(--c-primary);
    background: transparent;
    animation: spin 0.8s linear infinite;
}
.state-view--loading .state-view-icon ui-icon { display: none; }
.state-view--error {
    border-color: rgba(168, 50, 64, 0.22);
    background: var(--c-danger-bg);
}
.state-view--error .state-view-icon { background: rgba(168, 50, 64, 0.12); color: var(--c-danger); }
.state-view--complete { border-color: rgba(45, 125, 80, 0.24); }
.state-view--complete .state-view-icon { background: var(--c-ok-bg); color: var(--c-ok); }
.state-view--compact { margin: 14px auto; padding: 18px 20px; }
.overlay > .state-view {
    width: min(calc(100% - 40px), 520px);
    margin: 0;
    background: var(--surface-raised);
}
.overlay > .state-view--loading { background: transparent; }
.graph-empty-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--c-bg);
    z-index: 5;
}
.graph-empty-state[hidden] { display: none; }
.graph-empty-state .state-view { margin: 0; }
.dashboard-loading.state-view {
    width: min(calc(100% - 48px), 560px);
    min-height: 160px;
    margin: auto;
}
.dashboard-loading.state-view .state-view-copy { text-align: left; }
.dashboard-main > .state-view { margin-top: 48px; }
.dashboard-main > .state-view--complete { max-width: 620px; }
.dashboard-start-card.is-complete {
    border-color: rgba(45, 125, 80, 0.26);
    background: linear-gradient(145deg, var(--surface-raised), var(--c-ok-bg));
}
.dashboard-complete-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 2px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    background: rgba(45, 125, 80, 0.1);
    color: var(--c-ok-text);
    font-size: var(--type-ui-sm);
    line-height: 1.5;
}
.dashboard-course-status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 2px;
    padding: 9px 10px;
    border: 1px solid rgba(21,94,117,0.18);
    border-radius: var(--radius-md);
    background: rgba(240,249,250,0.9);
    color: var(--c-ink-2);
    font-size: var(--type-ui-sm);
    line-height: 1.5;
}
.dashboard-course-status strong { color: var(--c-primary); }
.dashboard-complete-icon { display: inline-flex; flex: none; width: 17px; height: 17px; margin-top: 1px; }
.dashboard-complete-icon ui-icon { width: 17px; height: 17px; }
.dashboard-task-card.is-complete { border-color: rgba(45, 125, 80, 0.24); background: var(--c-ok-bg); }
.dashboard-task-card.is-complete .dashboard-task-icon { color: var(--c-ok); }
.study-result-complete-state { position: relative; }
.study-result-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin: 0 auto 8px;
    place-items: center;
    border-radius: 50%;
    background: var(--c-ok-bg);
    color: var(--c-ok);
}
.study-result-icon ui-icon { width: 23px; height: 23px; }
.study-complete-next-empty {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--c-ink-3);
    font-size: var(--type-ui);
    text-align: center;
}
.study-empty-state { max-width: 520px; }
.detail-audio-status {
    display: inline-block;
    max-width: 180px;
    margin-left: 4px;
    color: var(--c-danger);
    font-size: var(--type-caption);
    vertical-align: middle;
}
.detail-audio-status:empty { display: none; }

@media (max-width: 640px) {
    .state-view {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        padding: 20px 18px;
        text-align: center;
    }
    .state-view-copy { width: 100%; }
    .state-view-actions { grid-column: 1; justify-content: center; width: 100%; }
    .state-view-action { width: 100%; }
    .dashboard-loading.state-view .state-view-copy { text-align: center; }
}

/* ─── UX-306 Motion and feedback contract ────────────────────
   Motion explains a state change; it never carries the page hierarchy. */
@keyframes motionStateEnter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes motionFeedbackEnter {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes motionQueueEnter {
    from { opacity: 0.72; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.state-view:not(.state-view--loading),
.study-complete {
    animation: motionStateEnter var(--motion-state-duration) var(--motion-ease-emphasis) both;
}

.study-card-view {
    animation: motionQueueEnter var(--motion-feedback-duration) var(--motion-ease-emphasis) both;
}

.practice-feedback {
    animation: motionFeedbackEnter var(--motion-feedback-duration) var(--motion-ease-standard) both;
}

.study-progress-bar {
    transition: width var(--motion-feedback-duration) var(--motion-ease-standard);
}

.fb-btn,
.practice-option,
.btn-practice-audio,
.btn-practice-next {
    transition: background var(--motion-feedback-duration) var(--motion-ease-standard),
        border-color var(--motion-feedback-duration) var(--motion-ease-standard),
        color var(--motion-feedback-duration) var(--motion-ease-standard),
        box-shadow var(--motion-feedback-duration) var(--motion-ease-standard),
        transform var(--motion-feedback-duration) var(--motion-ease-standard),
        opacity var(--motion-feedback-duration) var(--motion-ease-standard);
}

.fb-btn:active:not([disabled]),
.practice-option:active:not([disabled]),
.btn-practice-audio:active:not([disabled]),
.btn-practice-next:active:not([disabled]) {
    transform: scale(0.98);
}

.gm-detail-section > summary,
.gm-reader-grammar-briefs > summary,
.tb-detail-section > summary,
.tb-item > summary,
.advanced-filters > summary,
.state-view-details > summary {
    transition: background var(--motion-feedback-duration) var(--motion-ease-standard),
        color var(--motion-feedback-duration) var(--motion-ease-standard);
}

.gm-detail-section > summary::after {
    transition: transform var(--motion-panel-duration) var(--motion-ease-standard),
        color var(--motion-feedback-duration) var(--motion-ease-standard);
}

.gm-detail-section[open] > .gm-detail-section-body,
.gm-reader-grammar-briefs[open] > .gm-brief-grid,
.tb-detail-section[open] > .tb-section-body,
.tb-detail-section[open] > .tb-vocab-loop-bar,
.tb-detail-section[open] > .tb-item-list,
.tb-item[open] > .tb-item-body,
.advanced-filters[open] > .filter-group {
    animation: motionStateEnter var(--motion-panel-duration) var(--motion-ease-standard) both;
}

/* Absolute panels remain in the layout while closed so opacity/transform can
   explain the open/close action without stealing focus or pointer events. */
.progress-calendar,
.cc-batch-menu,
.cc-card-menu {
    display: block;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
    transform-origin: top right;
    transition: opacity var(--motion-panel-duration) var(--motion-ease-standard),
        transform var(--motion-panel-duration) var(--motion-ease-standard),
        visibility 0s linear var(--motion-panel-duration);
}

.app-settings-panel {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
    transform-origin: top right;
    transition: opacity var(--motion-panel-duration) var(--motion-ease-standard),
        transform var(--motion-panel-duration) var(--motion-ease-standard),
        visibility 0s linear var(--motion-panel-duration);
}

.app-settings-panel.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.app-settings-panel.is-closing {
    visibility: visible;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
    transition-delay: 0s;
}

.app-settings-panel[data-anchor-side='left'] {
    transform-origin: top right;
}

.app-settings-panel[data-anchor-side='right'] {
    transform-origin: top left;
}

.cc-card-menu {
    transform-origin: bottom right;
}

.progress-calendar.open,
.cc-batch-menu.open,
.cc-card-menu.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

/* A loading indicator may rotate while real data is pending; reading and
   playback highlights stay still after their one-time entry feedback. */
.cc-card.tts-reading,
tr.tts-reading,
.tb-dialogue-turn.tts-reading {
    animation-iteration-count: 1;
}

/* ─── Tablet surface adaptation (UX-405) ────────────────────
   Keep the reading surface wide while filters and details temporarily float
   above it. Existing collapse buttons remain the drawer close affordance. */
.tablet-sidebar-toggle,
.tablet-sidebar-backdrop {
    display: none;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .app-container {
        position: relative;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .tablet-sidebar-toggle {
        display: inline-flex;
        min-width: 30px;
        min-height: 30px;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0 7px;
        border: 1px solid var(--c-border-soft);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--c-ink-2);
        cursor: pointer;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .tablet-sidebar-toggle:hover,
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .tablet-sidebar-toggle[aria-expanded='true'] {
        border-color: var(--c-primary-border);
        background: var(--c-primary-soft);
        color: var(--c-primary);
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .tablet-sidebar-toggle ui-icon {
        width: 15px;
        height: 15px;
        margin: 0;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .tablet-sidebar-toggle:focus-visible,
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .tablet-sidebar-backdrop:focus-visible {
        outline: 2px solid var(--c-primary);
        outline-offset: 2px;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .sidebar {
        position: absolute;
        z-index: 80;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(320px, calc(100% - 44px)) !important;
        min-width: 0 !important;
        max-width: calc(100% - 44px);
        border-right: 1px solid var(--c-border);
        box-shadow: 12px 0 30px rgba(25, 38, 35, 0.14);
        transform: translateX(-105%);
        transition: transform var(--motion-panel-duration) var(--motion-ease-standard);
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .sidebar.tablet-drawer-open {
        transform: translateX(0);
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .sidebar.sidebar-collapsed {
        width: 44px !important;
        min-width: 44px !important;
        transform: translateX(-105%);
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .sidebar.tablet-drawer-open.sidebar-collapsed {
        transform: translateX(0);
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .resize-handle.sidebar-resize-handle {
        display: none !important;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .graph-area {
        width: 100%;
        min-width: 0;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .detail-panel {
        position: absolute;
        z-index: 75;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(430px, calc(100% - 28px)) !important;
        min-width: 0 !important;
        max-width: none;
        border-left: 1px solid var(--c-border);
        box-shadow: -14px 0 34px rgba(25, 38, 35, 0.16);
        transform: translateX(0);
        transition: transform var(--motion-panel-duration) var(--motion-ease-standard);
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .detail-panel.detail-panel-collapsed {
        width: min(430px, calc(100% - 28px)) !important;
        min-width: 0 !important;
        transform: translateX(105%);
        pointer-events: none;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .resize-handle.detail-resize-handle {
        display: none !important;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .tablet-sidebar-backdrop {
        display: block;
        position: absolute;
        z-index: 70;
        inset: 0;
        border: 0;
        background: rgba(24, 37, 34, 0.18);
        cursor: pointer;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .tablet-sidebar-backdrop[hidden] {
        display: none;
}

html[data-layout-viewport='phone'] .tablet-sidebar-toggle span {
        display: none;
}

html[data-layout-viewport='phone'] .sidebar {
        width: min(320px, calc(100% - 28px)) !important;
        max-width: calc(100% - 28px);
}

html[data-layout-viewport='phone'] .detail-panel,
html[data-layout-viewport='phone'] .detail-panel.detail-panel-collapsed {
        width: min(430px, calc(100% - 18px)) !important;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .app-brand-block {
    flex-direction: column;
}

/* ─── Dark surface details (UX-500) ─────────────────────────
   A small set of legacy content blocks still carries light-only colors. Keep
   those blocks on the same dark paper ramp so long reading, feedback, menus,
   and empty states never flash white inside the dark theme. */
[data-theme='dark'] .filter-group input:focus,
[data-theme='dark'] .filter-group select:focus {
    background: var(--surface-raised);
}

[data-theme='dark'] .dashboard-day-mark,
[data-theme='dark'] .advanced-filters {
    background: var(--surface-raised);
}

[data-theme='dark'] .dashboard-insight-icon.is-blue {
    background: #253947;
    color: #9FC9E0;
}

[data-theme='dark'] .cc-pos-badge {
    background: rgba(239, 150, 127, 0.18);
}

[data-theme='dark'] .sidebar-collapse-btn,
[data-theme='dark'] .detail-collapse-btn {
    background: var(--surface-raised);
}

[data-theme='dark'] .sidebar-collapse-btn:hover,
[data-theme='dark'] .detail-collapse-btn:hover,
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .btn-review-start,
[data-theme='dark'] .detail-actions .btn-action-primary,
[data-theme='dark'] .badge,
[data-theme='dark'] .cc-page-num.active,
[data-theme='dark'] .cc-lv-n5,
[data-theme='dark'] .cc-lv-n4,
[data-theme='dark'] .cc-lv-n3,
[data-theme='dark'] .cc-lv-n2,
[data-theme='dark'] .cc-lv-n1,
[data-theme='dark'] .gm-card-level {
    color: var(--c-on-accent);
}

[data-theme='dark'] .btn-danger {
    color: #2B1115;
}

[data-theme='dark'] .graph-stats {
    background: rgba(43, 55, 51, 0.96);
    color: var(--c-ink);
}

[data-theme='dark'] .overlay {
    background: rgba(20, 27, 26, 0.94);
}

[data-theme='dark'] .review-item,
[data-theme='dark'] .btn-remove-word {
    background: var(--surface-raised);
}

[data-theme='dark'] .review-item:hover {
    background: var(--surface-base);
}

[data-theme='dark'] .btn-remove-word {
    border-color: var(--c-danger);
    color: var(--c-danger);
}

[data-theme='dark'] .btn-remove-word:hover {
    background: var(--c-danger-bg);
}

[data-theme='dark'] .list-batch-bar {
    background: var(--c-info-soft);
    border-bottom-color: var(--c-info-border);
}

[data-theme='dark'] .gm-course-context {
    border-color: rgba(184, 171, 240, 0.34);
    background: linear-gradient(180deg, rgba(55, 49, 79, 0.96), rgba(43, 55, 51, 0.96));
    box-shadow: var(--shadow-sm);
}

[data-theme='dark'] .gm-card:hover,
[data-theme='dark'] .gm-lesson-card:hover {
    border-color: #8177B9;
}

[data-theme='dark'] .gm-card-selected {
    box-shadow: 0 0 0 2px rgba(184, 171, 240, 0.28), var(--gm-shadow-md) !important;
}

[data-theme='dark'] .tb-empty-state,
[data-theme='dark'] .tb-diagnostic {
    background: var(--surface-raised);
}

[data-theme='dark'] .tb-section,
[data-theme='dark'] .tb-item { background: transparent; }

[data-theme='dark'] .tb-reader-header {
    background: rgba(33, 45, 41, 0.97);
    box-shadow: none;
}

[data-theme='dark'] .tb-course-path {
    border-color: var(--c-border);
    background: transparent;
    box-shadow: none;
}

[data-theme='dark'] .tb-course-step {
    border-color: var(--c-border);
    background: transparent;
}

[data-theme='dark'] .tb-course-step.is-current { background: var(--tb-primary-soft); }

[data-theme='dark'] .tb-course-step.is-done {
    background: color-mix(in srgb, var(--c-ok-bg) 54%, transparent);
}

[data-theme='dark'] .tb-course-step.is-skipped {
    background: color-mix(in srgb, var(--surface-sunken) 54%, transparent);
}

[data-theme='dark'] .tb-course-step-action {
    border-color: var(--c-primary-border);
    background: var(--surface-raised);
}

[data-theme='dark'] .tb-display-toggle {
    background: rgba(43, 55, 51, 0.9);
}

[data-theme='dark'] .tb-section-head,
[data-theme='dark'] .tb-section-wiki .tb-section-head {
    background: transparent;
}

[data-theme='dark'] .tb-section-badge {
    background: transparent;
}

[data-theme='dark'] .tb-tts-btn {
    border-color: var(--c-primary-border);
    background: var(--surface-base);
    color: var(--c-primary);
    box-shadow: none;
}

[data-theme='dark'] .tb-tts-btn.is-playing {
    background: var(--c-primary-soft);
    color: var(--c-primary-hover);
}

[data-theme='dark'] .tb-section-image {
    background: var(--surface-raised);
}

[data-theme='dark'] .tb-dialogue-turn {
    border-color: var(--tb-border);
    background: transparent;
}

[data-theme='dark'] .tb-dialogue-speaker {
    background: transparent;
    color: var(--top-accent);
}

[data-theme='dark'] .tb-item-focus,
[data-theme='dark'] .tb-item-loop-active { background: var(--tb-primary-soft); }

[data-theme='dark'] .tb-wiki-chip {
    background: #193746;
    border-color: #396A7B;
    color: var(--top-accent);
}

[data-theme='dark'] .tb-inline-highlight {
    background: rgba(231, 184, 95, 0.11);
    box-shadow: inset 0 -1.5px 0 rgba(231, 184, 95, 0.38);
}

[data-theme='dark'] .tb-inline-highlight-grammar {
    background: rgba(184, 171, 240, 0.12);
    box-shadow: inset 0 -1.5px 0 rgba(184, 171, 240, 0.36);
}

[data-theme='dark'] .tb-inline-highlight-link:hover {
    background: rgba(231, 184, 95, 0.2);
}

[data-theme='dark'] .tb-inline-highlight-link.tb-inline-highlight-grammar:hover {
    background: rgba(184, 171, 240, 0.2);
}

[data-theme='dark'] .tb-grammar-bullet-list li {
    border-color: var(--tb-border);
    background: transparent;
}

[data-theme='dark'] .tb-example {
    border-left-color: rgba(103, 206, 194, 0.62);
    background: var(--surface-sunken);
}

[data-theme='dark'] .app-settings-panel .app-scale-control,
[data-theme='dark'] .app-settings-panel .app-theme-control,
[data-theme='dark'] .app-settings-panel .app-density-control {
    background: var(--surface-base);
}

[data-theme='dark'] .app-settings-panel .app-scale-control select,
[data-theme='dark'] .app-settings-panel .app-theme-control select,
[data-theme='dark'] .app-settings-panel .app-density-control select,
[data-theme='dark'] .app-settings-panel .app-scale-control select option,
[data-theme='dark'] .app-settings-panel .app-theme-control select option,
[data-theme='dark'] .app-settings-panel .app-density-control select option {
    background: var(--surface-raised);
    color: var(--c-ink);
}

/* ─── Layout density (UX-502) ───────────────────────────────
   Compact mode shortens repeated cards and spacing while keeping the same
   type scale, content order, and touch targets. Comfortable mode is the
   default baseline above, so the setting stays easy to reason about. */
[data-density='compact'] .dashboard-shell {
    padding-top: 16px;
    padding-bottom: 28px;
}

[data-density='compact'] .dashboard-heading { margin-bottom: 14px; }
[data-density='compact'] .dashboard-hero-grid { gap: 12px; margin-bottom: 18px; }
[data-density='compact'] .dashboard-start-card { padding: 18px 20px; }
[data-density='compact'] .dashboard-start-meta { margin: 10px 0; gap: 6px 14px; }
[data-density='compact'] .dashboard-task-card { min-height: 70px; gap: 8px; padding: 8px 10px; }
[data-density='compact'] .dashboard-task-icon { width: 36px; height: 36px; }
[data-density='compact'] .dashboard-task-copy strong { font-size: 1.5rem; }
[data-density='compact'] .dashboard-section { margin-bottom: 18px; }
[data-density='compact'] .dashboard-insight-card { padding: 12px; }
[data-density='compact'] .dashboard-trend-bars { min-height: 86px; }
[data-density='compact'] .dashboard-trend-bar { grid-template-rows: 64px auto; }
[data-density='compact'] .dashboard-achievement-card { padding: 11px; }
[data-density='compact'] .dashboard-recent { padding: 12px 14px; }

[data-density='compact'] .cc-grid { gap: 8px; }
[data-density='compact'] .cc-card { --cc-card-footer-height: 0px; }
[data-density='compact'] .cc-card:not(.cc-expanded) {
    height: auto;
    min-height: min(var(--cc-card-min-height, 244px), 244px);
}
[data-density='compact'] .cc-card-head { padding-top: 7px; }
[data-density='compact'] .cc-card-body { padding: 4px 12px 8px 14px; }
[data-density='compact'] .cc-example { min-height: 46px; max-height: 50px; padding: 6px 8px; }
[data-density='compact'] .cc-card-foot { min-height: 34px; }

[data-density='compact'] .gm-card-grid {
    grid-auto-rows: 172px;
    gap: 8px;
    padding: 10px 12px;
}

[data-density='compact'] .gm-card-body { padding: 8px 10px; }
[data-density='compact'] .gm-card-meta { min-height: 24px; }
[data-density='compact'] .gm-card-title { margin-top: 2px; margin-bottom: 3px; }
[data-density='compact'] .gm-card-meaning { min-height: 34px; }

[data-density='compact'] .tb-lesson-list { gap: 0; }
[data-density='compact'] .tb-lesson-card { padding: 7px 8px 7px 9px; }
[data-density='compact'] .tb-lesson-card-head { margin-bottom: 3px; }
[data-density='compact'] .tb-lesson-meta { margin-top: 3px; }
[data-density='compact'] .tb-reader-body { padding-top: 12px; padding-bottom: 24px; }
[data-density='compact'] .tb-reader-lead-media { padding-top: 12px; }
[data-density='compact'] .tb-section { margin-bottom: 0; padding-bottom: 22px; }
[data-density='compact'] .tb-section + .tb-section { padding-top: 22px; }
[data-density='compact'] .tb-section-head { padding: 0 0 10px; }
[data-density='compact'] .tb-section-body { padding: 0; }

/* ─── Anchored dictionary details (B12) ─────────────────────
   Existing module detail renderers stay intact, but their panels are removed
   from the flex layout and shown transiently beside the triggering content. */
.resize-handle.detail-resize-handle {
    display: none !important;
}

html .detail-panel {
    --detail-arrow-offset: 32px;
    --detail-popup-width: 438px;
    position: fixed !important;
    z-index: 86;
    right: auto !important;
    bottom: auto !important;
    width: min(var(--detail-popup-width, 438px), calc(var(--layout-viewport-width) - 24px)) !important;
    min-width: 0 !important;
    max-width: 438px !important;
    height: min(680px, calc(var(--layout-viewport-height) - 24px));
    max-height: calc(var(--layout-viewport-height) - 24px);
    padding: 0;
    overflow: visible;
    border: 1px solid var(--c-rule-strong);
    border-radius: 12px;
    background: var(--surface-raised);
    box-shadow: 0 20px 48px rgba(24, 43, 39, 0.22), 0 4px 14px rgba(24, 43, 39, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px) scale(0.985) !important;
    transform-origin: top left;
    /* Detail content can be replaced in the same pointer gesture. Keeping the
       host panel out of enter/exit transforms prevents a transient white tile
       and makes its anchored geometry deterministic. */
    transition: none;
}

html .detail-panel.detail-panel-collapsed {
    width: min(var(--detail-popup-width, 438px), calc(var(--layout-viewport-width) - 24px)) !important;
    min-width: 0 !important;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px) scale(0.985) !important;
}

html .detail-panel[hidden] {
    display: none !important;
}

html .detail-panel.anchored-detail-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1) !important;
    transition-delay: 0s;
}

.detail-panel.anchored-detail-open::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 13px;
    height: 13px;
    border: 1px solid var(--c-rule-strong);
    background: var(--surface-raised);
    transform: rotate(45deg);
}

.detail-panel.anchored-detail-open[data-anchor-placement='right']::before {
    top: calc(var(--detail-arrow-offset) - 7px);
    left: -7px;
}

.detail-panel.anchored-detail-open[data-anchor-placement='left']::before {
    top: calc(var(--detail-arrow-offset) - 7px);
    right: -7px;
}

.detail-panel.anchored-detail-open[data-anchor-placement='bottom']::before {
    top: -7px;
    left: calc(var(--detail-arrow-offset) - 7px);
}

.detail-panel.anchored-detail-open[data-anchor-placement='top']::before {
    bottom: -7px;
    left: calc(var(--detail-arrow-offset) - 7px);
}

.detail-panel.anchored-detail-open[data-anchor-placement='sheet']::before {
    display: none;
}

.detail-panel.anchored-detail-open .detail-panel-header {
    position: relative;
    z-index: 2;
    min-height: 52px;
    padding: 10px 12px 10px 16px;
    border-radius: 11px 11px 0 0;
    background: var(--surface-raised);
}

.detail-panel .panel-reset-btn {
    display: none;
}

.detail-panel .detail-collapse-btn {
    width: 30px;
    height: 30px;
    border-color: transparent;
    border-radius: 50%;
}

.detail-panel.anchored-detail-open .detail-content,
.detail-panel.anchored-detail-open #detailContent,
.detail-panel.anchored-detail-open .gm-detail-content,
.detail-panel.anchored-detail-open .tb-detail-content {
    height: calc(100% - 52px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 0 11px 11px;
    background: var(--surface-raised);
    overscroll-behavior: contain;
}

.detail-panel.anchored-detail-open:focus-within {
    border-color: color-mix(in srgb, var(--c-primary) 56%, var(--c-rule-strong));
}

/* Textbook vocabulary now follows the reading flow instead of occupying a rail. */
.tb-reading-vocab-section .tb-vocab-loop-bar {
    position: static;
    margin: 0 0 4px;
    padding: 8px 0 12px;
    border-top: 0;
    border-bottom: 1px solid var(--tb-border);
    background: transparent;
}

.tb-reading-vocab-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
}

.tb-reading-vocab-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--tb-border);
    transition: background var(--motion-feedback-duration) var(--motion-ease-standard),
        box-shadow var(--motion-feedback-duration) var(--motion-ease-standard);
}

.tb-reading-vocab-row.tb-item-focus,
.tb-reading-vocab-row.tb-item-loop-active {
    background: var(--tb-primary-soft);
    box-shadow: inset 3px 0 0 var(--tb-primary);
}

.tb-reading-vocab-open {
    display: flex;
    min-width: 0;
    min-height: 64px;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 9px 6px 9px 10px;
    border: 0;
    background: transparent;
    color: var(--tb-text);
    text-align: left;
    cursor: pointer;
}

.tb-reading-vocab-open:hover {
    color: var(--tb-primary);
}

.tb-reading-vocab-open:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: -2px;
}

.tb-reading-vocab-word {
    font-family: var(--font-ja-sans);
    font-size: 0.96rem;
    font-weight: 800;
}

.tb-reading-vocab-sub {
    display: -webkit-box;
    overflow: hidden;
    color: var(--c-ink-3);
    font-size: 0.76rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tb-reading-vocab-row .tb-item-meta-stack {
    padding-right: 8px;
}

.tb-vocab-popup-entry {
    min-height: 100%;
    padding: 0 18px 22px;
}

.tb-vocab-popup-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 12px;
    border-bottom: 1px solid var(--tb-border);
}

.tb-vocab-popup-head h3 {
    margin: 0;
    color: var(--tb-text);
    font-family: var(--font-ja-sans);
    font-size: 1.42rem;
    line-height: 1.3;
}

.tb-vocab-popup-head p {
    margin: 3px 0 0;
    color: var(--c-ink-3);
    font-size: 0.86rem;
}

.tb-vocab-popup-body {
    padding-bottom: 8px;
}

@media (max-width: 760px) {
    .tb-reading-vocab-list {
        grid-template-columns: minmax(0, 1fr);
    }

    html .detail-panel,
    html .detail-panel.detail-panel-collapsed {
        width: var(--detail-popup-width, calc(var(--layout-viewport-width) - 16px)) !important;
        max-width: none !important;
        height: min(620px, calc(var(--layout-viewport-height) - 16px));
        max-height: calc(var(--layout-viewport-height) - 16px);
        transform-origin: bottom center;
    }
}

/* ─── Effective viewport breakpoints (B06) ─────────────────
   CSS zoom enlarges the interface but media queries still read the physical
   browser width. DisplayScale mirrors the product breakpoints onto <html> so
   responsive layout, floating layers, and control density use the same
   effective viewport as the tablet drawer and anchored-detail coordinator. */
html.layout-max-1400 {
    --app-nav-width: 76px;
}

html.layout-max-1400 #ccReadStatus {
    display: none !important;
}

html.layout-max-1400 .cc-controls {
    gap: 5px;
}

html.layout-max-1400 .cc-controls button,
html.layout-max-1400 .cc-controls select {
    padding-left: 7px;
    padding-right: 7px;
}

html.layout-max-1400 .app-header,
html.layout-max-1400 body.focused-ui .app-header {
    gap: 8px;
    padding: 10px 8px 112px;
}

html.layout-max-1400 .app-brand-block { justify-content: center; }
html.layout-max-1400 .app-brand { width: 48px; justify-content: center; padding: 5px; }
html.layout-max-1400 .app-brand-copy { display: none; }
html.layout-max-1400 .app-header .module-switcher { gap: 5px; }

html.layout-max-1400 .app-header .mod-btn {
    width: 48px;
    min-height: 42px;
    align-self: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
}

html.layout-max-1400 .app-header .mod-btn ui-icon { width: 20px; height: 20px; }

html.layout-max-1400 .global-search-toggle,
html.layout-max-1400 .app-external-practice,
html.layout-max-1400 .app-settings-toggle {
    width: 48px;
    height: 42px;
    min-height: 42px;
    align-self: center;
    justify-content: center;
    padding: 0;
    flex: none;
}

html.layout-max-1400 .global-search-toggle span,
html.layout-max-1400 .global-search-toggle kbd,
html.layout-max-1400 .app-external-practice > span,
html.layout-max-1400 .app-settings-toggle::after {
    display: none;
}

html.layout-max-1400 .app-header .progress-strip { display: none; }
html.layout-max-1400 .tablet-sidebar-toggle span { display: none; }
html.layout-max-1400 .app-settings { display: flex; justify-content: center; }
html.layout-max-1400 .app-settings-panel { right: auto; bottom: auto; }

html.layout-max-1400 .status-bar-reveal-controls {
    min-height: 104px;
    grid-template-columns: 1fr;
    padding: 9px 12px;
}

html.layout-max-1400 .status-bar-reveal {
    width: 48px;
    min-height: 38px;
    justify-self: center;
    padding: 0;
}

html.layout-max-1400 .status-bar-reveal span { display: none; }

html.layout-max-1300 .cc-wrapper { padding-right: 14px; padding-left: 14px; }
html.layout-max-1300 .cc-toolbar-main { align-items: flex-start; flex-direction: column; gap: 7px; }
html.layout-max-1300 .cc-toolbar-summary,
html.layout-max-1300 .cc-controls { width: 100%; }
html.layout-max-1300 .cc-controls { justify-content: flex-end; }
html.layout-max-1300 .cc-stats { margin-right: auto; }

html.layout-max-900 .dashboard-shell { width: min(100% - 28px, 720px); padding-top: 18px; }
html.layout-max-900 .dashboard-hero-grid,
html.layout-max-900 .dashboard-task-grid,
html.layout-max-900 .dashboard-insight-grid,
html.layout-max-900 .dashboard-insight-lower { grid-template-columns: 1fr; }

html.layout-max-900 .dashboard-insight-card[data-dashboard-insight='time'],
html.layout-max-900 .dashboard-insight-card[data-dashboard-insight='review'],
html.layout-max-900 .dashboard-insight-card[data-dashboard-insight='content'] {
    grid-column: auto;
    grid-row: auto;
}

html.layout-max-900 .dashboard-insight-card[data-dashboard-insight='review'] { border-bottom: 1px solid var(--c-border-soft); }
html.layout-max-900 .dashboard-insight-card[data-dashboard-insight='content'] { border-left: 0; }
html.layout-max-900 .dashboard-insight-lower .dashboard-insight-card + .dashboard-insight-card { border-top: 1px solid var(--c-border-soft); border-left: 0; }
html.layout-max-900 .dashboard-achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.layout-max-900 .dashboard-achievement-card:nth-child(2n + 1) { border-left: 0; }
html.layout-max-900 .dashboard-achievement-card:nth-child(n + 3) { border-top: 1px solid var(--c-border-soft); }
html.layout-max-900 .dashboard-recent-list { grid-template-columns: 1fr; }
html.layout-max-900 .dashboard-recent-item + .dashboard-recent-item { border-top: 1px solid var(--c-border-soft); border-left: 0; }

html.layout-max-900 .study-result-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.layout-max-900 .study-result-metric:nth-child(2) { border-right: 0; }
html.layout-max-900 .study-result-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--c-border-soft); }
html.layout-max-900 .study-result-weak-list { grid-template-columns: 1fr; }

html.layout-max-900 .gm-card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
html.layout-max-900 .gm-lesson-grid { grid-template-columns: 1fr; gap: 8px; }
html.layout-max-900 .gm-brief-grid { grid-template-columns: 1fr 1fr; }
html.layout-max-900 .gm-para-pair.gm-display-bilingual { grid-template-columns: 1fr; }
html.layout-max-900 .gm-para-ja { border-right: 0; border-bottom: 1px solid var(--gm-border); }

html.layout-max-900 .tb-reader-header { padding-right: 14px; padding-left: 14px; }
html.layout-max-900 .tb-course-path { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
html.layout-max-900 .tb-reader-body { width: calc(100% - 24px); padding-right: 24px; padding-left: 24px; }
html.layout-max-900 .tb-reader-lead-media { width: calc(100% - 24px); padding-right: 0; padding-left: 0; }
html.layout-max-900 .tb-course-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.layout-max-900 .tb-course-step:nth-child(2) { border-right: 0; }
html.layout-max-900 .tb-course-step:nth-child(-n + 2) { border-bottom: 1px solid var(--tb-border); }
html.layout-max-900 .tb-dialogue-turn { grid-template-columns: minmax(54px, auto) 1fr; }
html.layout-max-900 .tb-dialogue-speaker { justify-self: start; }
html.layout-max-900 .tb-section-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
html.layout-max-900 .tb-diagnostic-row { flex-direction: column; gap: 4px; }
html.layout-max-900 .tb-diagnostic-label { width: auto; }

html.layout-max-760 .tb-reading-vocab-list { grid-template-columns: minmax(0, 1fr); }

html.layout-max-760 .detail-panel,
html.layout-max-760 .detail-panel.detail-panel-collapsed {
    width: var(--detail-popup-width, calc(var(--layout-viewport-width) - 16px)) !important;
    max-width: none !important;
    height: min(620px, calc(var(--layout-viewport-height) - 16px));
    max-height: calc(var(--layout-viewport-height) - 16px);
    transform-origin: bottom center;
}

html.layout-max-700 .practice-card { min-height: 0; padding: 20px; }
html.layout-max-700 .practice-options,
html.layout-max-700 .practice-input-row { grid-template-columns: 1fr; }
html.layout-max-700 .global-search-overlay { padding: 62px 10px 14px; }
html.layout-max-700 .global-search-dialog { max-height: calc(var(--layout-viewport-height) - 76px); border-radius: var(--radius-md); }
html.layout-max-700 .global-search-heading { padding: 16px 16px 12px; }
html.layout-max-700 .global-search-heading h2 { font-size: 1.12rem; }
html.layout-max-700 .global-search-input-wrap { margin: 12px 16px 6px; }
html.layout-max-700 .global-search-status { padding-right: 18px; padding-left: 18px; }
html.layout-max-700 .global-search-result { grid-template-columns: 27px minmax(0, 1fr) 20px; }
html.layout-max-700 .global-search-result-meta { display: none; }

html.layout-max-640 .cc-wrapper { padding: 0 10px 30px; }
html.layout-max-640 .cc-toolbar { padding: 10px 0 8px; }
html.layout-max-640 .cc-level-tabs { gap: 4px; }
html.layout-max-640 .cc-tab { padding: 5px 10px; font-size: 0.75rem; }
html.layout-max-640 .cc-word { font-size: 1.35rem; }
html.layout-max-640 .cc-pagination { gap: 4px; }
html.layout-max-640 .cc-page-jump { display: none; }
html.layout-max-640 .cc-page-num { width: 30px; height: 30px; font-size: 0.75rem; }

html.layout-max-640 .state-view {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    padding: 20px 18px;
    text-align: center;
}

html.layout-max-640 .state-view-copy { width: 100%; }
html.layout-max-640 .state-view-actions { grid-column: 1; justify-content: center; width: 100%; }
html.layout-max-640 .state-view-action { width: 100%; }
html.layout-max-640 .dashboard-loading.state-view .state-view-copy { text-align: center; }

html.layout-max-600 .dashboard-heading { align-items: flex-start; }
html.layout-max-600 .dashboard-day-mark { display: none; }
html.layout-max-600 .dashboard-heading-actions { align-items: flex-end; }
html.layout-max-600 .dashboard-plan-action { padding: 0 8px; font-size: var(--type-caption); }
html.layout-max-600 .dashboard-start-card { padding: 20px; }
html.layout-max-600 .dashboard-progress-grid { grid-template-columns: 1fr; }
html.layout-max-600 .dashboard-progress-grid > div + div { border-top: 1px solid var(--c-border-soft); border-left: 0; }
html.layout-max-600 .dashboard-insight-card { padding: 14px; }
html.layout-max-600 .dashboard-achievement-grid { grid-template-columns: 1fr; }
html.layout-max-600 .dashboard-achievement-card + .dashboard-achievement-card { border-top: 1px solid var(--c-border-soft); border-left: 0; }
html.layout-max-600 .dashboard-plan-overlay { padding: 10px; }
html.layout-max-600 .dashboard-plan-dialog { max-height: calc(var(--layout-viewport-height) - 20px); padding: 18px; }
html.layout-max-600 .dashboard-plan-fields { grid-template-columns: 1fr; gap: 13px; }
html.layout-max-600 .dashboard-plan-footer { align-items: flex-start; flex-direction: column; }
html.layout-max-600 .dashboard-plan-footer > span { max-width: none; }
html.layout-max-600 .dashboard-plan-footer > div { width: 100%; justify-content: flex-end; }

html.layout-max-600 .gm-card-grid,
html.layout-max-600 .gm-brief-grid { grid-template-columns: 1fr; }
html.layout-max-600 .gm-reader-body { padding: 12px; }
html.layout-max-600 .mod-btn { padding: 3px 8px; font-size: 0.72rem; }

html.layout-max-600 .tb-course-steps { grid-template-columns: 1fr; }
html.layout-max-600 .tb-course-path-foot,
html.layout-max-600 .gm-course-context { align-items: flex-start; flex-direction: column; }
html.layout-max-600 .tb-lesson-card-head,
html.layout-max-600 .tb-item-title-row,
html.layout-max-600 .tb-reader-row { flex-wrap: wrap; }
html.layout-max-600 .tb-reader-title { font-size: 1.18rem; }
html.layout-max-600 .tb-reader-body { width: 100%; margin-top: 12px; margin-bottom: 32px; padding: 8px 20px 34px; border-right: 0; border-left: 0; }
html.layout-max-600 .tb-reader-lead-media { width: calc(100% - 20px); }
html.layout-max-600 .tb-paragraph,
html.layout-max-600 .tb-dialogue-text { font-size: 0.92rem; }
html.layout-max-600 .tb-dialogue-turn { grid-template-columns: 1fr; }
html.layout-max-600 .tb-detail-row { flex-direction: column; gap: 4px; }
html.layout-max-600 .tb-detail-label { width: auto; }

/* Height compaction is evaluated after width rules because both can apply. */
html.layout-height-compact .app-header {
    gap: 4px;
    padding: 6px 8px 84px;
}

html.layout-height-compact .app-brand-block { gap: 3px; }
html.layout-height-compact .app-brand,
html.layout-height-compact .tablet-sidebar-toggle,
html.layout-height-compact .app-header .mod-btn,
html.layout-height-compact .global-search-toggle,
html.layout-height-compact .app-external-practice,
html.layout-height-compact .app-settings-toggle {
    width: 40px;
    min-height: 32px;
    height: 32px;
}

html.layout-height-compact .app-header .module-switcher { gap: 2px; padding: 4px 0; }
html.layout-height-compact .app-header-actions { gap: 3px; }
html.layout-height-compact .status-bar-reveal-controls { min-height: 78px; padding: 5px 12px; }
html.layout-height-compact .status-bar-reveal { width: 40px; min-height: 30px; }
html.layout-height-compact .dashboard-shell { width: min(100% - 28px, 1180px); padding-top: 14px; }
html.layout-height-compact .dashboard-heading { margin-bottom: 10px; }
html.layout-height-compact .dashboard-hero-grid { gap: 12px; margin-bottom: 16px; }
html.layout-height-compact:not(.layout-max-700) .dashboard-hero-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
}
html.layout-height-compact .dashboard-start-card { padding: 18px 20px; }
html.layout-height-compact .dashboard-start-card h2 { font-size: 1.4rem; }
html.layout-height-compact .dashboard-start-meta { margin: 10px 0; }
html.layout-height-compact .dashboard-progress-card { padding: 16px 18px; }
html.layout-height-compact .dashboard-progress-main { margin-bottom: 10px; }
html.layout-height-compact .dashboard-progress-main strong { font-size: 2.25rem; }
html.layout-height-compact .dashboard-section-title { margin-bottom: 7px; }
html.layout-height-compact .dashboard-task-card { min-height: 92px; padding: 12px 13px; }

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-panel-duration: 1ms;
        --motion-feedback-duration: 1ms;
        --motion-state-duration: 1ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}

/* ─── Unified application sidebar (2026-08-30) ───────────────────
   Global navigation and the active module tools share one column. */
:root { --unified-sidebar-width: 288px; }

body {
    --app-nav-width: var(--unified-sidebar-width);
}

.unified-sidebar {
    position: relative;
    z-index: 70;
    display: flex;
    width: var(--app-nav-width);
    min-width: 0;
    min-height: 0;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    overflow: visible;
    border-right: 1px solid var(--c-rule-strong);
    background: var(--surface-base);
    box-shadow: 1px 0 0 rgba(24, 43, 39, 0.06);
    transition: width var(--motion-panel-duration) var(--motion-ease-standard);
}

body.panel-resize-active .unified-sidebar { transition: none; }

.unified-sidebar .app-header,
body.focused-ui .unified-sidebar .app-header {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 8px;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--c-rule-strong);
    background: var(--surface-base);
    box-shadow: none;
    color: var(--c-ink);
}

.unified-sidebar .app-brand-block { gap: 6px; }
.unified-sidebar .app-brand { color: var(--c-ink); }
.unified-sidebar .app-brand:hover { background: var(--surface-sunken); }
.unified-sidebar .app-brand-copy span { color: var(--c-ink-3); }

.unified-sidebar .app-header .module-switcher {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 6px 0;
    border-color: var(--c-border-soft);
}

.unified-sidebar .app-header .mod-btn {
    min-width: 0;
    min-height: 42px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    color: var(--c-ink-3);
    font-size: 0.68rem;
    text-align: center;
}

.unified-sidebar .app-header .mod-btn:hover {
    background: var(--surface-sunken);
    color: var(--c-ink);
}

.unified-sidebar .app-header .mod-btn.active {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.unified-sidebar .app-header .mod-btn.active::before {
    top: auto;
    right: 9px;
    bottom: 0;
    left: 9px;
    width: auto;
    height: 2px;
    background: var(--c-primary);
}

.unified-sidebar .app-header-actions {
    display: grid;
    width: 100%;
    min-width: 0;
    flex: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 36px;
    gap: 6px;
}

.unified-sidebar .global-search-toggle,
.unified-sidebar .app-external-practice,
.unified-sidebar .app-settings-toggle {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    align-self: auto;
    border-color: var(--c-border-soft);
    background: var(--surface-raised);
    color: var(--c-ink-2);
}

.unified-sidebar .global-search-toggle:hover,
.unified-sidebar .global-search-toggle:focus-visible,
.unified-sidebar .app-external-practice:hover,
.unified-sidebar .app-external-practice:focus-visible,
.unified-sidebar .app-settings-toggle:hover,
.unified-sidebar .app-settings-toggle[aria-expanded='true'] {
    border-color: var(--c-primary-border);
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.unified-sidebar .global-search-toggle { justify-content: flex-start; }
.unified-sidebar .global-search-toggle kbd { display: none; }
.unified-sidebar .app-external-practice { padding: 5px 8px; }
.unified-sidebar .app-external-practice > span { flex-direction: row; align-items: baseline; gap: 4px; }
.unified-sidebar .app-external-practice small { display: none; }
.unified-sidebar .app-settings { width: 36px; margin: 0; }
.unified-sidebar .app-settings-toggle { justify-content: center; padding: 0; }
.unified-sidebar .app-settings-toggle::after { display: none; }

.unified-sidebar .app-header .progress-strip {
    display: grid;
    width: 100%;
    min-height: 38px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px;
    gap: 5px;
    padding: 5px 7px;
    border-color: var(--c-border-soft);
    background: var(--surface-sunken);
}

.unified-sidebar .app-header .progress-metric,
.unified-sidebar .app-header .progress-metric:first-child {
    grid-column: auto;
    padding: 1px 4px;
}

.unified-sidebar .app-header .progress-label { color: var(--c-ink-3); }
.unified-sidebar .app-header .progress-calendar-toggle {
    border-color: var(--c-border-soft);
    background: var(--surface-raised);
    color: var(--c-ink-3);
}

.unified-sidebar .app-header .progress-calendar-toggle:hover {
    border-color: var(--c-primary-border);
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.unified-sidebar .app-header .progress-calendar { left: calc(100% + 12px); }

.unified-module-sidebar-host {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    background: var(--surface-base);
}

.unified-module-sidebar-host[aria-hidden='true'] { display: none; }

.unified-module-sidebar-host > .sidebar {
    width: 100% !important;
    min-width: 0;
    height: 100%;
    border-right: 0;
    background: transparent;
}

.unified-module-sidebar-host .sidebar-header {
    min-height: 48px;
    padding: 9px 12px;
    background: var(--surface-sunken);
}

.unified-sidebar .status-bar-reveal-controls {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 52px;
    flex: none;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--c-rule-strong);
    background: var(--surface-base);
}

.unified-sidebar .status-bar-reveal {
    min-height: 34px;
    border: 1px solid var(--c-border-soft);
    background: var(--surface-raised);
    color: var(--c-ink-2);
}

.unified-sidebar .status-bar-reveal:hover {
    border-color: var(--c-primary-border);
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.unified-sidebar .app-settings-panel {
    right: auto;
    bottom: auto;
}

/* The former navigation rail became icon-only below 1400px. The unified
   column has enough room for the complete controls until the actual tablet
   breakpoint, so keep its desktop composition intact at 1280px as well. */
html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-header,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .app-header {
    gap: 8px;
    padding: 10px 12px 8px;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-brand-block {
    justify-content: space-between;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-brand {
    width: 100%;
    height: auto;
    min-height: 36px;
    justify-content: flex-start;
    padding: 4px 6px;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-brand-copy {
    display: flex;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-header .mod-btn,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .app-header .mod-btn {
    width: auto;
    min-height: 42px;
    height: auto;
    align-self: stretch;
    padding: 4px 2px;
    font-size: 0.68rem;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .global-search-toggle,
html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-external-practice,
html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-settings-toggle,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .global-search-toggle,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .app-external-practice,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .app-settings-toggle {
    width: 100%;
    min-height: 36px;
    height: 36px;
    align-self: auto;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .global-search-toggle span,
html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-external-practice > span {
    display: flex;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-header .progress-strip {
    display: grid;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .app-settings,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .app-settings {
    display: block;
    width: 36px;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .status-bar-reveal-controls,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .status-bar-reveal-controls {
    min-height: 52px;
    grid-template-columns: 1fr 1fr;
    padding: 8px 10px;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .status-bar-reveal,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .status-bar-reveal {
    width: auto;
    min-height: 34px;
    justify-self: stretch;
    padding: 4px 7px;
}

html[data-layout-viewport='desktop'].layout-max-1400 body:not(.status-bar-collapsed) .unified-sidebar .status-bar-reveal span,
html[data-layout-viewport='desktop'].layout-height-compact body:not(.status-bar-collapsed) .unified-sidebar .status-bar-reveal span {
    display: inline;
}

/* The lesson location and four-step path now belong to the sidebar. */
.tb-sidebar-reading-controls .tb-course-path {
    margin: 2px 0 8px;
    padding: 4px 0 7px;
    border-top: 1px solid var(--tb-border);
    border-bottom: 1px solid var(--tb-border);
}

.tb-sidebar-reading-controls .tb-course-path-heading strong {
    max-width: 156px;
}

.tb-sidebar-reading-controls .tb-course-steps {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

.tb-sidebar-reading-controls .tb-course-step {
    min-height: 42px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    padding: 6px 25px 6px 7px;
    border-right: 0;
    border-bottom: 1px solid var(--tb-border);
}

.tb-sidebar-reading-controls .tb-course-step:last-child { border-bottom: 0; }
.tb-sidebar-reading-controls .tb-course-step-copy strong { white-space: normal; }
.tb-sidebar-reading-controls .tb-course-step-status { grid-column: 2; }
.tb-sidebar-reading-controls .tb-course-step-action,
.tb-sidebar-reading-controls .tb-course-step-done {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-height: 26px;
    margin: 0;
}

.tb-sidebar-reading-controls .tb-course-path-foot {
    align-items: flex-start;
    flex-direction: column;
}

.tb-sidebar-reading-controls .tb-course-complete { width: 100%; }

body.status-bar-collapsed {
    --app-nav-width: 76px;
}

body.status-bar-collapsed .unified-sidebar .app-header,
body.focused-ui.status-bar-collapsed .unified-sidebar .app-header {
    display: flex;
    flex: 1;
    gap: 7px;
    padding: 8px 7px;
}

body.status-bar-collapsed .unified-module-sidebar-host { display: none; }
body.status-bar-collapsed .unified-sidebar .app-brand-block { justify-content: center; }
body.status-bar-collapsed .unified-sidebar .app-brand { width: 48px; justify-content: center; padding: 5px; }
body.status-bar-collapsed .unified-sidebar .app-brand-copy { display: none; }
body.status-bar-collapsed .unified-sidebar .app-header .module-switcher {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.status-bar-collapsed .unified-sidebar .app-header .mod-btn {
    width: 48px;
    min-height: 42px;
    align-self: center;
    padding: 0;
    font-size: 0;
}

body.status-bar-collapsed .unified-sidebar .app-header .mod-btn.active::before {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: 0;
    width: 2px;
    height: auto;
}

body.status-bar-collapsed .unified-sidebar .app-header-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.status-bar-collapsed .unified-sidebar .global-search-toggle,
body.status-bar-collapsed .unified-sidebar .app-settings-toggle {
    width: 48px;
    height: 42px;
    justify-content: center;
    padding: 0;
}

body.status-bar-collapsed .unified-sidebar .global-search-toggle span,
body.status-bar-collapsed .unified-sidebar .app-external-practice,
body.status-bar-collapsed .unified-sidebar .progress-strip { display: none; }
body.status-bar-collapsed .unified-sidebar .app-settings { width: 48px; }
body.status-bar-collapsed .unified-sidebar .status-bar-reveal-controls {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    align-self: auto;
    height: auto;
    min-height: 102px;
    grid-template-columns: 1fr;
    justify-content: normal;
    padding: 8px 12px;
    border-top: 1px solid var(--c-rule-strong);
    border-right: 0;
}

body.status-bar-collapsed .unified-sidebar .status-bar-reveal {
    width: 48px;
    justify-self: center;
    padding: 0;
}

body.status-bar-collapsed .unified-sidebar .status-bar-reveal span { display: none; }

/* Effective tablet widths retain the compact global rail and open module
   controls as the existing dismissible drawer. */
html[data-layout-viewport]:not([data-layout-viewport='desktop']) body {
    --app-nav-width: 76px;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar {
    /* The drawer is now a child of the unified shell. Keep that shell above
       the content backdrop so controls inside the open drawer remain usable. */
    z-index: 90;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-header,
html[data-layout-viewport]:not([data-layout-viewport='desktop']) body.focused-ui .unified-sidebar .app-header {
    display: flex;
    flex: 1;
    gap: 7px;
    padding: 8px 7px;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-brand-block {
    justify-content: center;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-brand {
    width: 48px;
    justify-content: center;
    padding: 5px;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-brand-copy { display: none; }
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-header .module-switcher {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-header .mod-btn {
    width: 48px;
    min-height: 42px;
    align-self: center;
    padding: 0;
    font-size: 0;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-header .mod-btn.active::before {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: 0;
    width: 2px;
    height: auto;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-header-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .global-search-toggle,
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-settings-toggle {
    width: 48px;
    height: 42px;
    justify-content: center;
    padding: 0;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .global-search-toggle span,
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-external-practice,
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .progress-strip { display: none; }
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .app-settings { width: 48px; }
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .status-bar-reveal-controls {
    min-height: 102px;
    grid-template-columns: 1fr;
    padding: 8px 12px;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .status-bar-reveal {
    width: 48px;
    justify-self: center;
    padding: 0;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-sidebar .status-bar-reveal span { display: none; }
html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-module-sidebar-host,
html[data-layout-viewport]:not([data-layout-viewport='desktop']) body.status-bar-collapsed .unified-module-sidebar-host {
    display: contents;
}

html[data-layout-viewport]:not([data-layout-viewport='desktop']) .unified-module-sidebar-host > .sidebar {
    position: fixed;
    z-index: 90;
    top: 0;
    bottom: 0;
    left: var(--app-nav-width);
    width: min(320px, calc(var(--layout-viewport-width) - var(--app-nav-width) - 24px)) !important;
    max-width: calc(var(--layout-viewport-width) - var(--app-nav-width) - 24px);
    height: var(--layout-viewport-height);
    background: var(--surface-base);
}

/* Unifying the two former rails frees horizontal space. Preserve the existing
   recognition-card density instead of adding a fourth, visually noisy column. */
html[data-layout-viewport='desktop'] .cc-grid {
    grid-template-columns: repeat(3, minmax(260px, 360px));
    justify-content: center;
}

/* 2026-08-30 unified-sidebar polish: one shell state and one visual rhythm. */
.unified-sidebar .app-header .mod-btn {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 5px;
    line-height: 1;
}

.unified-sidebar .app-header .mod-btn ui-icon { flex: none; }
.unified-sidebar .global-search-toggle { grid-column: 1; grid-row: 1; }
.unified-sidebar .app-external-practice { grid-column: 2; grid-row: 1; }
.unified-sidebar .app-settings { grid-column: 3; grid-row: 1; }
.unified-sidebar .app-header .progress-strip { grid-column: 1 / -1; grid-row: 2; }
.unified-sidebar .app-header .progress-metric strong { color: var(--c-ink); font-weight: 800; }

.unified-module-sidebar-host .sidebar-header {
    min-height: 42px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--c-border-soft);
    background: transparent;
}

html[data-layout-viewport='desktop'] .unified-module-sidebar-host .sidebar-collapse-btn { display: none; }
.unified-module-sidebar-host .gm-course-context {
    width: auto;
    margin: 0 12px 12px;
}

#vocabViewTools .cc-toolbar {
    padding: 0 0 9px;
    border-bottom: 1px solid var(--c-border-soft);
}

#vocabViewTools .cc-toolbar-main,
#vocabViewTools .cc-controls { width: 100%; }

#vocabViewTools .cc-controls {
    display: grid;
    grid-template-columns: 36px 36px minmax(0, 1fr);
    gap: 5px;
}

#vocabViewTools .cc-start-study { grid-column: 1 / -1; width: 100%; }
#vocabViewTools .cc-btn-icon,
#vocabViewTools .cc-visibility-toggle { width: 36px; min-width: 36px; }
#vocabViewTools .cc-batch-wrap,
#vocabViewTools .cc-btn-batch { width: 100%; }
#vocabViewTools .cc-read-status { text-align: left; }

.study-stats-row { align-items: center; }
.study-exit-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
    padding: 3px 7px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-primary);
    font: inherit;
    cursor: pointer;
}
.study-exit-action:hover { background: var(--c-primary-soft); }
.study-exit-action ui-icon { width: 14px; height: 14px; }