:root {
  --ink: #173a36;
  --muted: #60726f;
  --primary: #0f5149;
  --primary-strong: #0b3e38;
  --accent: #c9edbb;
  --accent-strong: #91ce7d;
  --paper: #fbfcf7;
  --surface: #ffffff;
  --line: #dce6df;
  --soft: #edf4ee;
  --warn: #9a5b0a;
  --danger: #a43d34;
  --shadow: 0 20px 60px rgba(20, 58, 53, .10);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--paper); font-size: 16px; line-height: 1.55; }
button, input, textarea, select { font: inherit; }
button, .button-link { min-height: 44px; }
button { border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #73b9aa; outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.9rem, 3vw, 2.55rem); line-height: 1.15; letter-spacing: -.035em; }
h2 { font-size: 1.5rem; line-height: 1.25; }
h3 { font-size: 1.1rem; }
.eyebrow { margin-bottom: .4rem; color: #55716c; font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.lead { color: var(--muted); font-size: 1.05rem; }
.muted { color: var(--muted); }
.offline { position: fixed; z-index: 100; top: 0; left: 0; right: 0; padding: .65rem 1rem; background: #f8d9a8; color: #694009; text-align: center; font-weight: 700; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2rem; padding: 1.7rem 1.15rem; color: #edf8f3; background: var(--primary-strong); }
.brand { display: flex; align-items: center; gap: .75rem; font-size: 1.12rem; font-weight: 780; letter-spacing: .01em; }
.brand-name { font-size: .96rem; line-height: 1.25; }
.brand-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px 8px 20px 8px; background: var(--accent); color: var(--primary-strong); font-size: 1.9rem; font-weight: 820; box-shadow: 0 12px 32px rgba(10, 55, 48, .16); }
.brand-mark.small { width: 40px; height: 40px; border-radius: 13px 6px 13px 6px; font-size: 1.1rem; }
nav { display: grid; gap: .4rem; }
.nav-item { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .74rem .85rem; border-radius: 12px; background: transparent; color: #cfdfda; text-align: left; font-weight: 650; }
.nav-item span:first-child { width: 1.25rem; font-size: 1.15rem; text-align: center; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.105); color: white; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 1rem; }
.profile { display: flex; align-items: center; gap: .72rem; padding: .9rem .7rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.profile { width: 100%; min-height: 58px; background: transparent; color: #edf8f3; text-align: left; }
.profile:hover { color: white; }
.profile span:last-child { display: grid; }
.profile small { color: #9fbbb4; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #dcecd8; color: var(--primary-strong); font-weight: 800; }

.workspace { min-width: 0; padding: 1.9rem clamp(1.3rem, 4vw, 4.5rem) 4rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1180px; margin: 0 auto 2rem; }
.topbar-title { display: flex; flex: 1; align-items: center; gap: .75rem; min-width: 0; }
.topbar h1 { margin: 0; }
.topbar .eyebrow { margin: 0 0 .2rem; }
.back-button { min-height: 38px; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--primary); font-weight: 750; white-space: nowrap; }
.back-button:hover { background: var(--soft); }
.icon-button { display: none; width: 44px; border-radius: 10px; background: var(--soft); color: var(--ink); }
.server-pill { display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: .88rem; }
.server-pill span { width: 8px; height: 8px; border-radius: 50%; background: #35a66f; box-shadow: 0 0 0 4px #dff5e8; }
.view { max-width: 1180px; margin: 0 auto; }

.today-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 1.25rem; }
.daily-plan-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.2rem; }
.daily-plan-heading h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.daily-plan-heading > p { max-width: 34rem; margin: 0; color: var(--muted); }
.daily-module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.daily-module { position: relative; min-height: 280px; display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 12px 36px rgba(20,58,53,.07); }
.daily-module::after { content: ""; position: absolute; right: -35px; top: -35px; width: 125px; height: 125px; border-radius: 50%; background: rgba(145,206,125,.12); }
.daily-module .module-number { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 1.1rem; border-radius: 12px; background: var(--soft); color: var(--primary); font-weight: 850; }
.daily-module h3 { margin-bottom: .55rem; font-size: 1.28rem; }
.daily-module > p:not(.eyebrow) { flex: 1; color: var(--muted); }
.listening-module { background: #f5f8ff; }
.speaking-module { background: #eef7f1; }
.daily-module.completed { border-color: #82c66f; box-shadow: 0 0 0 3px rgba(145,206,125,.18), 0 12px 36px rgba(20,58,53,.07); }
.daily-module.completed .module-number { background: var(--accent); font-size: 0; }
.daily-module.completed .module-number::after { content: "✓"; font-size: 1rem; }
.reward-strip { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem 1.2rem; border: 1px solid #d5e5d3; border-radius: 18px; background: linear-gradient(110deg, #eef8e9, #fffaf0); }
.reward-strip > div { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; }
.reward-strip > div > span { grid-row: 1 / 3; font-size: 1.7rem; }
.reward-strip strong { line-height: 1.2; }
.reward-strip small { color: var(--muted); }
.makeup-banner { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding: .7rem 1rem; border-radius: 12px; background: #fff2ce; color: #76500c; font-weight: 750; }
.makeup-banner .text-button { margin: 0; color: #76500c; }
.course-strip { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.5rem; margin-top: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: white; }
.course-strip h3, .course-strip p { margin-bottom: .2rem; }
.course-strip > div > p:last-child { color: var(--muted); }
.course-progress { display: grid; justify-items: end; }
.course-progress strong { color: var(--primary); font-size: 1.45rem; }
.course-progress span { color: var(--muted); font-size: .82rem; }
.vocabulary-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; background: linear-gradient(120deg, #eef7f1, white); }
.vocabulary-hero h2 { margin-bottom: .45rem; }
.vocabulary-hero p:last-child { margin: 0; color: var(--muted); }
.vocabulary-count { min-width: 120px; display: grid; justify-items: center; padding: 1rem; border-radius: 18px; background: var(--primary); color: white; }
.vocabulary-count strong { font-size: 2.5rem; line-height: 1; }
.coverage-line { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: .45rem .8rem; max-width: 620px; margin-top: 1rem; }
.coverage-line > span { height: 10px; overflow: hidden; border-radius: 999px; background: #dce9df; }
.coverage-line > span i { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); }
.coverage-line strong { white-space: nowrap; font-size: .9rem; }
.coverage-line small { grid-column: 1 / -1; color: var(--muted); }
.vocabulary-count span { margin-top: .3rem; color: #cfe4de; font-size: .86rem; }
.import-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.import-panel, .preview-panel { min-height: 455px; }
.library-choice { display: grid; gap: .65rem; margin-bottom: 1rem; }
.library-option { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; margin: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: #f7faf7; cursor: pointer; }
.library-option:has(input:checked) { border-color: #62a997; box-shadow: 0 0 0 3px rgba(98,169,151,.14); background: #eef8f2; }
.library-option.priority:has(input:checked) { border-color: #86bf72; background: #f1faec; }
.library-option input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--primary); }
.library-option span { display: grid; }
.library-option b { color: var(--ink); }
.library-option small { color: var(--muted); font-weight: 500; }
.import-or { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; color: var(--muted); font-size: .8rem; }
.import-or::before, .import-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.file-picker { display: grid; justify-items: center; gap: .2rem; margin: 0; padding: 1.25rem; border: 1px dashed #8db4a8; border-radius: 14px; background: #f5faf6; cursor: pointer; text-align: center; }
.file-picker small { color: var(--muted); font-weight: 500; }
.import-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.gpt-import-help { margin-top: .8rem; padding: .85rem 1rem; border: 1px solid #c6d9ee; border-radius: 13px; background: #f1f6fd; }
.gpt-import-help strong { color: #315a84; }
.gpt-import-help ol { margin: .5rem 0 0; padding-left: 1.25rem; color: var(--muted); font-size: .86rem; }
.gpt-import-help .text-button { margin: .35rem 0 0; color: #315a84; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty-preview { min-height: 390px; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.empty-preview > span { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 22px; background: var(--soft); color: var(--primary); font-weight: 850; }
.empty-preview h3, .empty-preview p { margin-bottom: .25rem; }
.bulk-preview-note { margin: -.35rem 0 .8rem; padding: .65rem .8rem; border-radius: 10px; background: #fff6df; color: #76500c; font-size: .84rem; }
.preview-list { max-height: 500px; overflow: auto; display: grid; gap: .55rem; }
.preview-row { display: grid; grid-template-columns: 1fr 1fr 38px; gap: .55rem; }
.preview-row.expanded { grid-template-columns: 1.2fr 1.1fr .55fr 1.2fr 1fr 1.4fr 38px; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.preview-row input { min-width: 0; }
.remove-preview { min-height: 38px; border-radius: 10px; background: #fae7e4; color: var(--danger); font-size: 1.2rem; }
.vocabulary-library { margin-top: 1rem; }
.library-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.source-badge.textbook { background: #e5f3e9; }
.source-badge.curriculum { background: #e9effc; color: #315a84; }
.meaning-badge { background: #f2eefb; color: #66508f; }
.mastery-badge { background: #eef6ea; }
.difficult-badge { background: #fff0d2; color: var(--warn); }
.meaning-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; background: linear-gradient(120deg, #eef7f1, #fffdf7); }
.meaning-hero h2 { margin-bottom: .45rem; }
.meaning-hero p:last-child { margin: 0; color: var(--muted); }
.meaning-overview { min-width: 180px; display: grid; justify-items: center; gap: .15rem; padding: 1.1rem; border-radius: 18px; background: var(--primary); color: white; }
.meaning-overview strong { font-size: 2.4rem; line-height: 1; }
.meaning-overview span { font-weight: 750; }
.meaning-overview small { color: #cfe4de; text-align: center; }
.meaning-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.meaning-task-card { position: relative; min-height: 245px; display: flex; flex-direction: column; overflow: hidden; }
.meaning-task-card.review { background: #f5f8ff; }
.meaning-task-card .task-number { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: .9rem; border-radius: 12px; background: var(--soft); color: var(--primary); font-weight: 850; }
.meaning-task-card h2 { margin-bottom: .45rem; font-size: 2rem; }
.meaning-task-card > p:not(.eyebrow) { flex: 1; color: var(--muted); }
.meaning-rules { margin-top: 1rem; }
.meaning-rules p { margin: .35rem 0 .8rem; color: var(--muted); }
.meaning-shortcuts { display: flex; flex-wrap: wrap; gap: .45rem; }
.meaning-shortcuts span { padding: .35rem .6rem; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .8rem; font-weight: 650; }
.meaning-practice { max-width: 820px; margin: 0 auto; padding: clamp(1.1rem, 2.5vw, 1.65rem); }
.meaning-word-head { margin: .7rem 0 .65rem; }
.meaning-word-copy { min-width: 0; overflow: hidden; }
.meaning-prompt-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.meaning-prompt-row .eyebrow { margin: 0; }
.meaning-play { flex: 0 0 auto; padding: .45rem .7rem; }
.meaning-word-line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.meaning-word-head h2 { flex: 0 1 auto; width: auto; margin: 0; overflow: hidden; color: var(--primary); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; letter-spacing: -.035em; white-space: nowrap; word-break: normal; }
.meaning-word-head h2.compact { font-size: clamp(1.8rem, 4.4vw, 3rem); }
.meaning-word-head h2.very-compact { font-size: clamp(1.35rem, 3.2vw, 2.2rem); }
.meaning-word-head h2.ultra-compact { font-size: clamp(1.05rem, 2.35vw, 1.65rem); letter-spacing: -.02em; }
.meaning-word-head .word-card-badges { flex: 0 1 auto; justify-content: flex-start; }
.meaning-answer { display: grid; gap: .35rem; margin-top: 1rem; padding: 1.35rem; border: 1px solid #b9d5cc; border-radius: 16px; background: #f1f8f4; }
.phonetic-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.phonetic-label { padding: .16rem .42rem; border-radius: 999px; background: #dce9f5; color: #315a84; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.phonetic-value { color: #244f7b; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1.1rem; font-weight: 750; letter-spacing: .025em; }
.part-of-speech { color: var(--muted); font-size: .95rem; font-weight: 700; }
.meaning-answer strong { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.meaning-answer small { color: var(--muted); }
.meaning-example { margin-top: .65rem; padding: .8rem 1rem; border-left: 4px solid #7c9fda; border-radius: 0 12px 12px 0; background: #f6f8fe; }
.meaning-example > span { color: #4d6595; font-size: .8rem; font-weight: 850; letter-spacing: .05em; }
.meaning-example p { margin: .25rem 0 0; color: var(--ink); font-size: 1.05rem; line-height: 1.65; }
.example-translation-toggle { margin-top: .55rem; padding: .28rem .55rem; border: 0; border-radius: 8px; background: #e5ecfb; color: #345a86; font: inherit; font-size: .85rem; font-weight: 800; }
.example-translation { margin-top: .45rem !important; color: #435d59 !important; font-size: .98rem !important; }
.example-word { padding: .05em .2em; border-radius: .22em; background: #ffe7a9; color: #8a4d00; font-weight: 850; }
.verb-forms { margin-top: .65rem; padding: .8rem 1rem; border-radius: 12px; background: #f4f0fb; }
.verb-forms > span { color: #635083; font-size: .8rem; font-weight: 850; letter-spacing: .05em; }
.verb-forms dl { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .35rem 0 0; }
.verb-forms dl > div { display: grid; gap: .08rem; }
.verb-forms dt { color: var(--muted); font-size: .75rem; }
.verb-forms dd { margin: 0; color: #443664; font-size: 1.03rem; font-weight: 800; }
.extra-round-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1rem 0; background: #fff8e8; }
.extra-round-panel h2 { margin-bottom: .35rem; font-size: 1.3rem; }
.extra-round-panel p:last-child { margin: 0; color: var(--muted); }
.priority-start { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; border-color: #b9d7aa; background: #eef8e9; }
.priority-start strong { display: block; margin-bottom: .25rem; color: var(--primary); font-size: 1.08rem; }
.priority-start p:last-child { margin: 0; color: var(--muted); }
.reveal-meaning { width: 100%; margin-top: .65rem; padding: .9rem 1.1rem; }
.meaning-judgement { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
.meaning-judgement button { display: grid; gap: .1rem; padding: 1rem; border-radius: 14px; font-weight: 800; }
.meaning-judgement button small { font-weight: 600; opacity: .75; }
.meaning-unknown { border: 1px solid #e6c49b; background: #fff5e5; color: #84500d; }
.meaning-known { background: var(--accent); color: var(--primary-strong); }
.meaning-progress-line { height: 8px; overflow: hidden; margin-top: 1.2rem; border-radius: 999px; background: #e2ebe5; }
.meaning-progress-line span { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); transition: width .2s ease; }
.primary:disabled, .meaning-judgement button:disabled { cursor: default; opacity: .5; }
.progress-hero { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.2rem; margin-bottom: 1rem; padding: clamp(1.5rem, 4vw, 2.6rem); border-radius: 24px; background: var(--primary); color: white; box-shadow: var(--shadow); }
.progress-hero .eyebrow, .progress-hero p { color: #c7ddd7; }
.progress-hero h2, .progress-hero p { margin-bottom: .35rem; }
.progress-stat { min-width: 130px; display: grid; justify-items: center; padding: 1rem; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(255,255,255,.08); }
.progress-stat > span { font-size: 1.55rem; }
.progress-stat strong { font-size: 2.2rem; line-height: 1.1; }
.progress-stat small { color: #d3e6e1; }
.sync-status { display: block; margin: 0 0 .5rem; padding: .5rem .8rem; border: 1px solid #dfb76d; border-radius: 8px; background: #fff9ec; color: #654813; font-size: .85rem; }
.sync-status[hidden] { display: none; }
.ability-report { margin-bottom: 1rem; padding: clamp(1.25rem, 3vw, 2rem); overflow: hidden; }
.ability-period { padding: .38rem .65rem; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .82rem; font-weight: 750; }
.ability-main { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(320px, 1.15fr); align-items: center; gap: clamp(1rem, 4vw, 3rem); }
.ability-radar { width: 100%; max-width: 430px; margin: 0 auto; overflow: visible; }
.radar-grid polygon, .radar-grid line { fill: none; stroke: #d7e3dd; stroke-width: 1; }
.radar-grid polygon:last-of-type { stroke: #aebfb7; stroke-width: 1.4; }
.radar-value { fill: rgba(70, 149, 126, .25); stroke: #287a69; stroke-width: 3; stroke-linejoin: round; }
.ability-radar text { fill: var(--ink); font-size: 12px; font-weight: 750; }
.ability-radar text tspan + tspan { fill: var(--muted); font-size: 11px; font-weight: 650; }
.coach-evaluation { padding: 1.4rem; border: 1px solid #d3e5d8; border-radius: 18px; background: linear-gradient(145deg, #eef8ed, #fffdf5); }
.coach-evaluation h3 { margin-bottom: .55rem; font-size: 1.25rem; }
.coach-evaluation p:not(.eyebrow) { margin-bottom: .8rem; color: #31524c; font-size: 1.05rem; }
.coach-evaluation small { display: block; color: var(--muted); line-height: 1.6; }
.ability-dimensions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1rem; }
.ability-dimension { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.ability-dimension > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ability-dimension > div span { color: var(--primary); font-size: 1.35rem; font-weight: 820; }
.ability-dimension p { margin: .3rem 0; color: var(--muted); font-size: .86rem; }
.ability-dimension small { color: #6c7f7a; }
.ability-dimension.strongest { border-color: #83c579; background: #f1faed; }
.ability-dimension.focus { border-color: #dfb76d; background: #fff9ec; }
.level-panel { margin-bottom: 1rem; }
.level-panel > div:first-child { display: flex; justify-content: space-between; color: var(--muted); }
.level-panel strong { color: var(--primary); }
.calendar-panel { overflow: hidden; }
.module-legend { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .82rem; }
.module-legend span { width: 9px; height: 9px; margin-left: .45rem; border-radius: 50%; }
.meaning-dot { background: #78bb63; }
.spelling-dot { background: #55a99a; }
.listening-dot { background: #668fd2; }
.live-dot { background: #d39043; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .55rem; }
.calendar-weekdays { margin-bottom: .5rem; color: var(--muted); font-size: .78rem; text-align: center; }
.calendar-day { min-width: 0; min-height: 108px; display: grid; justify-items: center; align-content: center; gap: .15rem; padding: .55rem .25rem; border: 1px solid var(--line); border-radius: 14px; background: #fafcf9; color: var(--ink); }
.calendar-day:disabled { cursor: default; opacity: .6; }
.calendar-day.selected { border-color: #4e9888; box-shadow: 0 0 0 3px rgba(78,152,136,.15); }
.calendar-day.complete { border-color: #8bc579; background: #eef9e9; }
.calendar-day small { color: var(--muted); }
.calendar-day strong { font-size: 1.2rem; }
.calendar-day em { min-height: 1.1rem; color: var(--warn); font-size: .68rem; font-style: normal; }
.day-dots { display: flex; gap: .3rem; }
.day-dots i { width: 8px; height: 8px; border-radius: 50%; background: #dce4df; }
.day-dots .meaning-dot.on { background: #78bb63; }
.day-dots .spelling-dot.on { background: #55a99a; }
.day-dots .listening-dot.on { background: #668fd2; }
.day-dots .live-dot.on { background: #d39043; }
.calendar-note { margin: 1rem 0 0; color: var(--muted); font-size: .86rem; }
.hero-card { position: relative; min-height: 390px; overflow: hidden; padding: clamp(1.6rem, 4vw, 3.3rem); border-radius: 26px; background: var(--primary); color: white; box-shadow: var(--shadow); }
.hero-card::after { content: "“"; position: absolute; right: 2rem; top: -2rem; color: rgba(201,237,187,.13); font: 20rem/1 Georgia, serif; }
.hero-card .eyebrow { color: #bfe3d8; }
.hero-card h2 { position: relative; max-width: 680px; margin-bottom: 1rem; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; }
.lesson-source { display: inline-flex; padding: .38rem .65rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #e4f3ee; font-size: .8rem; font-weight: 650; }
.lesson-objective { position: relative; max-width: 620px; margin: 1.5rem 0 2.2rem; color: #d6e9e4; font-size: 1.06rem; }
.hero-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.primary, .secondary, .ghost-button, .button-link { display: inline-flex; align-items: center; justify-content: center; padding: .72rem 1.1rem; border-radius: 12px; font-weight: 750; text-decoration: none; }
.primary { background: var(--accent); color: var(--primary-strong); }
.primary:hover { background: #dcf6d2; }
.secondary { border: 1px solid var(--line); background: white; color: var(--ink); }
.secondary:hover { background: var(--soft); }
.ghost-button { background: rgba(255,255,255,.11); color: white; }
.wide { width: 100%; margin-top: .6rem; }
.budget { display: flex; gap: .45rem; margin-bottom: 1.5rem; }
.budget button { min-height: 36px; padding: .35rem .75rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: #d8eae5; }
.budget button.active { background: white; color: var(--primary-strong); }

.side-stack { display: grid; gap: 1.25rem; }
.stat-card, .panel, .course-card, .record-card { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 8px 30px rgba(20,58,53,.045); }
.stat-card { padding: 1.45rem; }
.stat-card strong { display: block; margin: .3rem 0; font-size: 2.3rem; line-height: 1; color: var(--primary); }
.stat-card p, .stat-card small { color: var(--muted); }
.stat-card p:last-child { margin-bottom: 0; }
.progress-bar { height: 8px; overflow: hidden; margin-top: 1rem; border-radius: 8px; background: #e7eee9; }
.progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); }
.quick-card { padding: 1.35rem; border-radius: 20px; background: #e7f1e8; }
.quick-card p { color: var(--muted); }

.panel { padding: clamp(1.25rem, 3vw, 2rem); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.section-heading h2 { margin: 0; }
.course-list, .record-list, .word-list, .device-list { display: grid; gap: .8rem; }
.course-card, .record-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; }
.course-card h3, .record-card h3 { margin-bottom: .25rem; }
.course-card p, .record-card p { margin: 0; color: var(--muted); }
.status-badge { display: inline-flex; padding: .3rem .6rem; border-radius: 999px; background: var(--soft); color: var(--primary); font-size: .78rem; font-weight: 700; }

.classroom { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .7fr); gap: 1.25rem; }
.practice-card { min-height: 520px; padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.lesson-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; color: var(--muted); }
.prompt-label { margin: 0 0 .35rem; color: var(--muted); font-size: .86rem; font-weight: 700; }
.practice-prompt { margin: 0 0 1.1rem; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.15; color: var(--primary-strong); letter-spacing: -.03em; }
.spelling-pattern { min-height: 74px; display: flex; align-items: center; padding: .9rem 1.1rem; border: 1px solid #c8dbd1; border-radius: 14px; background: #f3f8f3; color: var(--primary); font: 760 clamp(1.45rem, 3.5vw, 2.5rem)/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.spelling-pattern.revealed { border-color: #91ce7d; background: #edf8e8; }
.interactive-spelling { cursor: text; }
.interactive-spelling:focus { border-color: #58a99a; box-shadow: 0 0 0 4px rgba(88,169,154,.2); outline: 0; }
.spelling-board-words { display: flex; flex-wrap: wrap; align-items: end; gap: .45rem .8rem; width: 100%; }
.spelling-word { display: inline-flex; align-items: end; gap: .12em; white-space: nowrap; }
.spelling-space { width: .25rem; }
.spelling-slot { position: relative; width: .78em; min-width: 20px; height: 1.35em; display: inline-grid; place-items: center; border-bottom: .11em solid #9ab8af; color: var(--primary-strong); text-transform: lowercase; }
.spelling-slot.hinted { color: #63a091; }
.spelling-slot.cursor { border-bottom-color: var(--primary); background: rgba(145,206,125,.2); border-radius: 5px 5px 0 0; }
.spelling-slot.cursor::after { content: ""; position: absolute; right: 10%; top: 16%; width: 2px; height: 68%; background: var(--primary); animation: cursor-blink 1s steps(2, start) infinite; }
.spelling-fixed { min-width: .22em; text-align: center; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.spelling-guide { margin: .7rem 0 0; color: var(--muted); }
.speak-row { display: flex; gap: .75rem; margin: 1.5rem 0; }
.answer-area { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.answer-area label { display: block; margin-bottom: .5rem; font-weight: 700; }
.answer-row { display: flex; gap: .7rem; }
.answer-row input { flex: 1; }
.spelling-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.spelling-submit-row span { color: var(--muted); font-size: .9rem; font-weight: 700; }
.feedback { min-height: 2rem; margin: 1rem 0 0; font-weight: 700; }
.feedback.good { color: #24724f; }
.feedback.retry { color: var(--danger); }
.lesson-sidebar { display: grid; align-content: start; gap: 1rem; }
.word-chip { width: 100%; display: flex; justify-content: space-between; gap: .7rem; padding: .82rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: white; text-align: left; }
.word-chip.active { border-color: #82bda5; background: #edf7ee; }
.word-chip small { color: var(--muted); }
.classroom-footer { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }

label { display: block; margin: .85rem 0 .4rem; color: var(--ink); font-weight: 700; }
input, textarea, select { width: 100%; padding: .78rem .9rem; border: 1px solid #cbd9d1; border-radius: 11px; background: white; color: var(--ink); }
input:focus, textarea:focus, select:focus { border-color: #5a9c8e; }
.empty-state { padding: 3rem 1rem; color: var(--muted); text-align: center; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.review-intro { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; background: #eef7f1; }
.review-intro h2 { margin-bottom: .4rem; }
.review-intro p:last-child { margin: 0; color: var(--muted); }
.weakness-review-list { display: grid; gap: .8rem; }
.weakness-review-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; border: 1px solid #efd7b6; border-radius: 14px; background: #fffaf1; }
.weakness-review-card h3 { margin: .5rem 0 .25rem; color: var(--danger); font-size: 1.05rem; }
.weakness-review-card p { margin: 0; color: var(--muted); }
.correction-line { display: grid; align-content: center; gap: .25rem; padding: .8rem; border-radius: 11px; background: #edf7ee; }
.correction-line small { color: var(--muted); }
.review-practice { max-width: 850px; margin: 0 auto; }
.original-mistake { margin: 1rem 0; padding: .85rem 1rem; border-left: 4px solid #d18a35; border-radius: 10px; background: #fff6e9; }
.original-mistake small { color: var(--muted); }
.original-mistake p { margin: .2rem 0 0; font-size: 1.12rem; }
.spelling-diagnosis { display: grid; gap: .65rem; margin-top: 1rem; padding: 1rem; border: 1px solid #eccb9d; border-radius: 14px; background: #fff9ee; }
.diagnosis-heading { display: flex; align-items: center; gap: .7rem; }
.diagnosis-heading span { padding: .25rem .55rem; border-radius: 999px; background: #f1d6ac; color: #75470e; font-size: .78rem; font-weight: 800; }
.diagnosis-heading strong { font-size: .95rem; }
.diff-line { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: .6rem; }
.diff-line small { color: var(--muted); }
.diff-line code { padding: .55rem .7rem; border-radius: 9px; background: white; color: var(--ink); font: 750 1.15rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.diff-line .diff-changed { padding: .08rem .16rem; border-radius: 4px; background: #ffd5ce; color: #9c3028; text-decoration: underline; text-decoration-thickness: 2px; }
.diff-line.correct .diff-changed { background: #dff2d6; color: #28651d; }
.diagnosis-support { padding: .55rem .7rem; border-radius: 9px; background: #eef5fb; color: #315a84; font-size: .88rem; }
.spelling-diagnosis > p { margin: 0; color: var(--muted); font-size: .86rem; }
.listening-practice { max-width: 900px; margin: 0 auto; }
.listening-instruction { color: var(--muted); }
.listening-controls, .center-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.center-actions { justify-content: center; }
.listening-speed { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: -.35rem 0 1rem; color: var(--muted); font-size: .88rem; }
.listening-speed > span { color: var(--ink); font-weight: 800; }
.listening-speed .secondary { min-height: 36px; padding: .35rem .6rem; }
.listening-speed .active { border-color: #5a9c8e; background: #edf7f3; color: var(--primary); }
.listening-speed small { width: 100%; }
.listening-play-count { display: inline-flex; align-items: center; color: var(--muted); font-size: .88rem; font-weight: 700; }
.story-transcript { margin: 1rem 0; padding: 1rem 1.15rem; border-radius: 14px; background: #f4f7f5; }
.story-transcript small { color: var(--muted); font-weight: 750; }
.story-transcript p { margin: .55rem 0 0; font-size: 1.08rem; line-height: 1.75; }
.story-transcript p + p { padding-top: .65rem; border-top: 1px solid var(--line); }
.focus-listening { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding: 1rem; border-radius: 14px; background: #fff8e8; text-align: left; }
.focus-listening h3, .focus-listening p { margin-bottom: .2rem; }
.focus-word-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.focus-word-buttons .secondary { min-height: 38px; padding: .45rem .7rem; }
.listening-question { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.listening-question h3 { font-size: 1.25rem; }
.listening-paper { display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.listening-paper-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.listening-paper-heading p { margin: 0; }
.listening-paper-heading strong { color: var(--muted); font-size: .88rem; }
.listening-paper .listening-question { margin: 0; padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: #fbfcfb; }
.listening-paper .question-number { margin: 0 0 .35rem; color: var(--primary); font-size: .82rem; font-weight: 800; }
.listening-paper .listening-question h3 { margin-bottom: .7rem; }
.listening-question-feedback { min-height: 1.4rem; margin: .55rem 0 0; font-size: .9rem; font-weight: 700; }
.listening-question-feedback.good { color: #24724f; }
.listening-question-feedback.retry { color: var(--danger); }
.listening-options { display: grid; gap: .65rem; margin: 1rem 0; }
.listening-option { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); text-align: left; }
.listening-option span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--soft); font-weight: 800; }
.listening-option.selected { border-color: #5a9c8e; background: #edf7f3; }
.listening-option.correct { border-color: #77b865; background: #edf8e8; }
.listening-option.wrong { border-color: #cf756d; background: #fff0ee; }
.word-card { padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: white; }
.word-card-badges { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; }
.mastery-badge { background: #fff3d8; color: #81540f; }
.word-card h3 { margin-bottom: .2rem; color: var(--primary); font-size: 1.35rem; }
.word-card p { margin-bottom: .6rem; color: var(--muted); }
.word-card .phonetic-line { min-height: 1.1rem; margin: .35rem 0; }
.word-card .phonetic-value { font-size: 1rem; }
.word-card .meaning-example { margin: .7rem 0; padding: .65rem .75rem; }
.word-card .meaning-example p { font-size: .95rem; }
.word-card .verb-forms { margin: .7rem 0; padding: .65rem .75rem; }
.word-card .verb-forms dl { gap: .4rem .8rem; }
.word-card .verb-forms dd { font-size: .95rem; }
.word-detail { display: block; margin-bottom: .35rem; color: var(--muted); }
.settings-list { display: grid; gap: .8rem; }
.setting-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border: 0; }
.setting-row p { margin: 0; color: var(--muted); }

.pairing-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at 85% 10%, #d7eccd 0, transparent 30%), radial-gradient(circle at 10% 85%, #d7e9e2 0, transparent 32%), var(--paper); }
.pairing-card { width: min(100%, 520px); padding: clamp(1.8rem, 5vw, 3.2rem); border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.pairing-card .brand-mark { margin-bottom: 2rem; }
.otp { text-align: center; font-size: 2rem; font-weight: 760; letter-spacing: .42em; font-variant-numeric: tabular-nums; }
.form-error { min-height: 1.6rem; margin: .7rem 0 0; color: var(--danger); }
.privacy-note { margin: 1.4rem 0 0; color: var(--muted); font-size: .86rem; text-align: center; }

dialog { width: min(620px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 22px; color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(9,38,34,.54); backdrop-filter: blur(3px); }
.dialog-card { position: relative; padding: 2rem; }
.dialog-close { position: absolute; right: 1rem; top: 1rem; width: 40px; min-height: 40px; border-radius: 50%; background: var(--soft); font-size: 1.4rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1rem; }
.voice-topic-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 .65rem; }
.voice-topic-heading div { display: grid; gap: .1rem; }
.voice-topic-heading small { color: var(--muted); }
.voice-topic-heading strong { font-size: 1.08rem; }
.topic-note { margin: .45rem 0 0; color: var(--muted); font-size: .84rem; }
.success-text { min-height: 1.5rem; margin: .8rem 0 0; color: #24724f; }
#voice-dialog { width: min(860px, calc(100% - 1.5rem)); max-height: calc(100dvh - 2rem); }
.live-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.3rem 0 .7rem; }
.live-mode { text-align: left; padding: 1rem; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.live-mode strong, .live-mode small { display: block; }
.live-mode small { margin-top: .3rem; font-weight: 400; color: var(--muted); }
.live-mode.active { border-color: var(--primary); background: #edf6ef; }
.live-mode:disabled { opacity: .8; }
.live-mode.active:disabled { opacity: 1; }
#live-scene-picker { display: grid; gap: .4rem; margin-bottom: 1rem; }
#live-scene-picker[hidden] { display: none; }
#live-scene-select { width: 100%; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font: inherit; }
.live-preparation { margin: 1rem 0; }
.live-preparation h3, #live-outcomes h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.live-word-list, .live-result-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.live-word-list li { padding: .65rem .8rem; background: var(--soft); border-radius: 10px; }
.live-word-list small { display: block; margin-top: .2rem; color: var(--muted); }
.live-reading-focus { padding: .8rem; border-left: 3px solid #e4b34e; background: #fff9e9; }
.live-hint-card { padding: 1.2rem; border-radius: 16px; background: #fff7de; border: 1px solid #ecdba8; margin: 1rem 0; }
.live-hint-card .eyebrow { color: #7a6025; }
#live-chinese-hint { font-size: 1.15rem; line-height: 1.8; white-space: pre-wrap; }
#live-chinese-hint ul { padding-left: 1.3rem; margin: .3rem 0; }
.live-hint-card small { display: block; color: var(--muted); margin-top: .5rem; }
.live-prompt-details summary, #live-dialog-transcript summary, #live-preparation-details summary { cursor: pointer; color: var(--primary); padding: .6rem 0; }
.live-prompt-details textarea { width: 100%; font-size: .82rem; margin-top: .5rem; }
#open-live-page[aria-disabled="true"] { opacity: .5; cursor: default; }
.live-result-list li { padding: .8rem; border: 1px solid var(--line); border-radius: 12px; }
.live-result-list li > div { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.live-result-list p { margin: .4rem 0; font-size: .92rem; }
.live-result-list small { color: var(--muted); }
.live-result { flex-shrink: 0; font-size: .78rem; padding: .15rem .5rem; border-radius: 20px; background: #eef0ef; color: #58615f; }
.live-result.independent { background: #e0f1e4; color: #21643c; }
.live-result.helped { background: #e5eef9; color: #355e92; }
.live-result.retry { background: #fff0d9; color: #835320; }
.live-next-focus { padding: 1rem; background: #edf6ef; border-radius: 12px; white-space: pre-wrap; }
#live-dialog-messages { max-height: 320px; overflow: auto; white-space: pre-wrap; }
.live-history-outcomes { grid-column: 1 / -1; }
.live-history-outcomes:empty { display: none; }
#live-manual-import { margin: .7rem 0; }
#live-manual-import summary { cursor: pointer; color: var(--muted); }
#live-import-text { width: 100%; margin: .7rem 0; }
@media (max-width: 600px) {
  #voice-dialog .dialog-card { padding: 1.2rem; }
  .live-mode-picker { grid-template-columns: 1fr; }
  #voice-dialog .dialog-actions { flex-direction: column; }
  #voice-dialog .voice-topic-heading { align-items: flex-start; }
}
.bridge-box { margin: 1rem 0; padding: 1rem; border: 1px solid #bad5ca; border-radius: 14px; background: #edf6ef; }
.bridge-box p { margin: .2rem 0; color: var(--muted); font-size: .88rem; }
.bridge-box small { color: var(--muted); }
.bridge-code-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .7rem 0; }
.bridge-code-row code { color: var(--primary); font: 800 1.55rem/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .16em; }
.text-button { min-height: 36px; margin-top: .7rem; padding: .2rem; background: transparent; color: var(--primary); font-weight: 700; }
.transcript-panel { max-height: 520px; overflow: auto; }
.sync-summary { margin: .3rem 0 .8rem; padding: .55rem .7rem; border-radius: 10px; background: #eaf5ea; color: var(--primary); font-size: .86rem; font-weight: 750; }
.transcript-line { margin: .65rem 0; padding: .7rem .8rem; border-radius: 11px; background: var(--soft); }
.transcript-line.student { background: #e8f1fb; }
.transcript-line strong { display: block; margin-bottom: .15rem; font-size: .78rem; color: var(--muted); }
.weakness-title { margin: 1rem 0 .5rem; font-weight: 800; }
.weakness-item { margin: .65rem 0; padding: .8rem; border-left: 4px solid #d18a35; border-radius: 10px; background: #fff6e9; }
.weakness-item > span { display: inline-flex; margin-bottom: .35rem; padding: .15rem .45rem; border-radius: 999px; background: #f4d6a9; color: #75470e; font-size: .75rem; font-weight: 800; }
.weakness-item p { margin: .2rem 0; color: var(--ink); font-size: .9rem; }
.voice-summary-card button { margin-top: .25rem; }
.voice-history { margin-bottom: 1.25rem; }
.voice-record { overflow: hidden; margin-top: .8rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.voice-record summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; cursor: pointer; list-style: none; }
.voice-record summary::-webkit-details-marker { display: none; }
.voice-record summary span:first-child { display: grid; gap: .2rem; }
.voice-record summary small { color: var(--muted); }
.voice-record-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1rem; padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.voice-record-body h3 { margin: 1rem 0 .4rem; }
.transcript-history { max-height: 430px; overflow: auto; }
.toast { position: fixed; z-index: 120; right: 1.5rem; bottom: 1.5rem; max-width: 360px; padding: .9rem 1.1rem; border-radius: 12px; background: #173a36; color: white; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: none; }

.admin-body { background: #f4f7f2; }
.admin-shell { max-width: 1050px; margin: 0 auto; padding: 2rem 1.4rem 5rem; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4rem; }
.text-link { color: var(--primary); font-weight: 700; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.admin-intro h1 { max-width: 12ch; }
.admin-intro p { max-width: 48ch; color: var(--muted); }
.admin-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow); }
.pair-result { display: grid; justify-items: center; margin-top: 1rem; padding: 1rem; border-radius: 14px; background: var(--soft); }
.pair-result strong { color: var(--primary); font-size: 2.4rem; letter-spacing: .18em; }
.device-section { margin-top: 4rem; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: white; }
.device-row p { margin: 0; }
.device-row small { color: var(--muted); }
.danger-button { padding: .55rem .8rem; border-radius: 10px; background: #fae7e4; color: var(--danger); font-weight: 700; }

@media (max-width: 1150px) and (min-width: 901px) {
  .daily-module-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 80; left: 0; transform: translateX(-100%); width: 250px; transition: transform .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .icon-button { display: block; }
  .topbar { justify-content: flex-start; }
  .server-pill { margin-left: auto; }
  .today-grid, .classroom { grid-template-columns: 1fr; }
  .daily-module-grid { grid-template-columns: 1fr; }
  .daily-module { min-height: 230px; }
  .course-strip { grid-template-columns: 1fr; }
  .course-progress { justify-items: start; }
  .voice-record-body { grid-template-columns: 1fr; }
  .reward-strip, .progress-hero, .import-grid, .meaning-task-grid, .ability-main { grid-template-columns: 1fr; }
  .ability-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-row.expanded { grid-template-columns: 1fr 1fr 38px; }
  .preview-row.expanded .remove-preview { grid-row: 1 / 4; grid-column: 3; }
  .reward-strip > button { width: 100%; }
  .progress-stat { grid-template-columns: auto auto 1fr; justify-items: start; gap: .5rem; }
  .progress-stat strong { font-size: 1.5rem; }
  .calendar-day { min-height: 88px; }
  .admin-grid { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 620px) {
  .workspace { padding: 1.1rem 1rem 3rem; }
  .topbar { align-items: flex-start; }
  .topbar-title { gap: .45rem; }
  .back-button { min-height: 34px; padding: .4rem .5rem; font-size: .82rem; }
  .server-pill { width: 10px; height: 10px; min-width: 10px; padding: 0; margin-top: .7rem; border: 0; background: transparent; font-size: 0; }
  .server-pill span { width: 10px; height: 10px; }
  .today-grid { gap: .8rem; }
  .daily-plan-heading, .review-intro { align-items: stretch; flex-direction: column; }
  .weakness-review-card { grid-template-columns: 1fr; }
  .hero-card { min-height: 360px; border-radius: 20px; }
  .review-grid { grid-template-columns: 1fr; }
  .vocabulary-hero, .meaning-hero, .focus-listening { align-items: stretch; flex-direction: column; }
  .meaning-overview { justify-items: start; }
  .focus-word-buttons { justify-content: flex-start; }
  .calendar-weekdays, .calendar-grid { gap: .25rem; }
  .calendar-day { min-height: 72px; padding: .35rem .1rem; }
  .calendar-day em { display: none; }
  .ability-dimensions { grid-template-columns: 1fr; }
  .ability-report .section-heading, .listening-paper-heading { align-items: flex-start; flex-direction: column; }
  .preview-row { grid-template-columns: 1fr 38px; }
  .import-actions { grid-template-columns: 1fr; }
  .preview-row.expanded { grid-template-columns: 1fr 38px; }
  .preview-row.expanded .remove-preview { grid-row: 1 / 7; grid-column: 2; }
  .preview-chinese { grid-column: 1 / 2; }
  .remove-preview { grid-row: 1 / 3; grid-column: 2; }
  .answer-row, .dialog-actions, .voice-topic-heading, .meaning-word-head { align-items: stretch; flex-direction: column; }
  .meaning-judgement { grid-template-columns: 1fr; }
  .spelling-submit-row { align-items: stretch; flex-direction: column; }
  .course-card, .record-card, .device-row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Family account entry and persistent learning ownership. */
.family-members { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.family-members span { padding: 8px 14px; border-radius: 20px; background: #eef5ed; color: #234d45; }
.account-context { max-width: 1180px; margin: -1rem auto 1.5rem; padding: 0; color: #55756e; font-size: 15px; }
#login-form input { width: 100%; box-sizing: border-box; font-size: 20px; }
#login-form .primary { margin-top: 24px; }
#login-form button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 700px) { .account-context { font-size: 13px; } }

/* Keep recall controls in one place within the actual WebView viewport. */
.workspace:has(.meaning-practice) { height: 100dvh; display: flex; flex-direction: column; padding: 1rem 1.4rem; }
.workspace:has(.meaning-practice) .topbar { width: 100%; margin-bottom: .75rem; }
.workspace:has(.meaning-practice) .topbar h1 { font-size: 1.7rem; }
.workspace:has(.meaning-practice) .topbar .eyebrow,
.workspace:has(.meaning-practice) .account-context { display: none; }
.view:has(.meaning-practice) { width: 100%; flex: 1; min-height: 0; }
.meaning-practice.panel { height: 100%; max-width: 1100px; display: flex; flex-direction: column; padding: 1rem; }
.meaning-practice .lesson-progress { flex-shrink: 0; margin-bottom: .4rem; gap: .5rem; font-size: .88rem; }
.meaning-practice .meaning-word-head { flex-shrink: 0; margin: 0 0 .5rem; }
.meaning-practice .meaning-word-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem 1rem; }
.meaning-practice .meaning-prompt-row { display: contents; }
.meaning-practice .meaning-prompt-row .eyebrow { grid-column: 1; }
.meaning-practice .meaning-play { grid-column: 2; grid-row: 1 / 3; }
.meaning-practice .meaning-word-line { grid-column: 1; grid-row: 2; gap: .4rem .7rem; }
.meaning-practice .meaning-word-head h2 { font-size: 2.8rem; }
.meaning-practice .meaning-word-head h2.compact { font-size: 2.2rem; }
.meaning-practice .meaning-word-head h2.very-compact { font-size: 1.7rem; }
.meaning-practice .meaning-word-head h2.ultra-compact { font-size: 1.3rem; }
.meaning-practice .word-card-badges { font-size: .75rem; }
.meaning-content { flex: 1; min-height: 0; display: flex; overflow: auto; overscroll-behavior: contain; }
.meaning-answer { flex: 1; min-height: 100%; margin: 0; padding: 1.05rem 1.2rem; gap: .65rem; }
.meaning-answer .phonetic-value { font-size: 1.25rem; }
.meaning-answer .part-of-speech { font-size: 1.05rem; }
.meaning-answer > strong { font-size: 1.72rem; line-height: 1.38; }
.meaning-details { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: .7rem; align-items: start; }
.meaning-details > :only-child { grid-column: 1 / -1; }
.meaning-details:empty { display: none; }
.meaning-details .verb-forms, .meaning-details .meaning-example { margin: 0; padding: .8rem .95rem; overflow-wrap: anywhere; }
.meaning-details .verb-forms dd { font-size: 1.18rem; }
.meaning-details .meaning-example p { font-size: 1.15rem; line-height: 1.5; }
.meaning-actions { flex-shrink: 0; padding-top: .65rem; }
.meaning-actions .reveal-meaning, .meaning-actions .meaning-judgement { height: 86px; margin: 0; }
.meaning-actions .meaning-judgement { grid-template-columns: 1fr 1fr; }
.meaning-actions .meaning-judgement button { padding: .5rem; font-size: 1.16rem; }
.meaning-actions .feedback { min-height: 1.55rem; margin: .25rem 0 0; font-size: .85rem; }
.meaning-actions .meaning-progress-line { height: 5px; margin-top: .25rem; }
.profile { padding: .8rem .7rem; gap: .6rem; }
.profile .avatar { flex-shrink: 0; }

@media (min-width: 901px) and (max-height: 850px) {
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { height: 100dvh; gap: 1rem; padding: 1rem .8rem; }
  .sidebar-bottom { gap: .5rem; }
  .sidebar .brand { gap: .5rem; }
  .sidebar .brand-name { font-size: .82rem; }
  .sidebar .brand-mark { flex-shrink: 0; }
  .nav-item { padding: .55rem .7rem; }
  .workspace { padding: 1rem 1.4rem 1.5rem; }
  .topbar { margin-bottom: 1rem; }
  .topbar h1 { font-size: 1.9rem; }
  .account-context { margin: -.4rem auto .8rem; font-size: .85rem; }
  .reward-strip { margin-bottom: 1rem; padding: .65rem .9rem; gap: .6rem; }
  .daily-plan-heading { gap: 1rem; margin-bottom: .75rem; }
  .daily-plan-heading h2 { font-size: 1.5rem; }
  .daily-plan-heading > p { font-size: .85rem; max-width: 26rem; }
  .daily-module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
  .daily-module { min-height: 0; padding: 1rem; border-radius: 16px; }
  .daily-module .module-number { margin-bottom: .65rem; width: 32px; height: 32px; }
  .daily-module h3 { font-size: 1.1rem; }
  .daily-module > p:not(.eyebrow) { font-size: .9rem; margin-bottom: .7rem; }
  .daily-module .primary { padding: .65rem .4rem; }
}
@media (max-width: 620px) {
  .workspace:has(.meaning-practice) { padding: .6rem; }
  .workspace:has(.meaning-practice) .topbar { gap: .4rem; }
  .workspace:has(.meaning-practice) .topbar h1 { font-size: 1.2rem; }
  .meaning-practice.panel { padding: .7rem; }
  .meaning-practice .meaning-word-copy { gap: .3rem; }
  .meaning-practice .meaning-play { font-size: .8rem; padding: .4rem; }
  .meaning-details { grid-template-columns: 1fr; }
  .meaning-answer { padding: .65rem; }
}

@media (min-width: 901px) and (max-height: 670px) {
  .meaning-answer { padding: .35rem 1rem; gap: .35rem; }
  .meaning-details .verb-forms, .meaning-details .meaning-example { padding: .5rem .7rem; }
  .meaning-details .verb-forms dd { font-size: 1.05rem; }
  .meaning-details .meaning-example p { font-size: 1rem; }
}