:root {
  --ink: #10251f;
  --ink-2: #1d3c33;
  --paper: #f7f3e8;
  --paper-2: #fffdf7;
  --sun: #f4c84a;
  --sun-2: #ffe9a0;
  --mint: #caeadc;
  --muted: #6f7d77;
  --line: rgba(16, 37, 31, 0.13);
  --shadow: 0 18px 50px rgba(16, 37, 31, 0.12);
}

* { box-sizing: border-box; }
.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; }
html { background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% -10%, rgba(244, 200, 74, .25), transparent 30rem),
    var(--paper);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }
.plain { border: 0; background: transparent; color: inherit; }

.shell { min-height: 100vh; padding-bottom: 32px; }
.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 243, 232, .88);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.03em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; background: var(--ink); color: var(--sun);
  display: grid; place-items: center; font-size: 17px;
}
.top-actions { display: flex; gap: 8px; }
.label-short { display: none; }
.icon-btn, .ghost-btn {
  border: 1px solid var(--line); background: rgba(255,255,255,.58); color: var(--ink);
  border-radius: 14px; min-height: 42px; padding: 0 14px; font-weight: 750;
}
.account-btn { border: 0; border-radius: 14px; min-height: 42px; padding: 0 15px; background: var(--sun); color: var(--ink); font-weight: 900; }
.icon-btn:hover, .ghost-btn:hover { background: white; }
.container { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }

.hero { padding: 48px 0 28px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; align-items: stretch; }
.hero-copy, .today-card { border-radius: 28px; overflow: hidden; }
.hero-copy { padding: 38px; background: var(--ink); color: white; position: relative; }
.eyebrow { color: var(--sun); font-weight: 850; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.guest-free-label { text-transform: none; }

.auth-success {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #e6f5e9;
  color: #174b2a;
  font-weight: 800;
  text-align: center;
}
h1 { margin: 12px 0 14px; font-size: clamp(36px, 6vw, 66px); line-height: 1.02; letter-spacing: -.06em; }
.hero-copy p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.75; max-width: 620px; }
.hero-copy.simple { display:flex; flex-direction:column; justify-content:center; min-height:315px; }
.start-row { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; margin-top:30px; }
.start-btn { border:0; border-radius:17px; min-height:62px; padding:0 30px; background:var(--sun); color:var(--ink); font-weight:950; font-size:18px; }
.secondary-start { min-height: 62px; padding: 0 22px; border: 1px solid rgba(255,255,255,.25); border-radius: 17px; background: rgba(255,255,255,.09); color: white; font-weight: 900; }
.mini-option { min-width:94px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.1); color:white; border-radius:17px; padding:8px 14px; }
.mini-option b,.mini-option span { display:block; }.mini-option b{font-size:20px}.mini-option span{font-size:11px;color:rgba(255,255,255,.7);margin-top:2px}
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero-badges span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); padding: 8px 12px; border-radius: 999px; font-size: 13px; }
.today-card { background: var(--sun); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; min-height: 285px; }
.today-card small { font-weight: 850; letter-spacing: .08em; }
.today-card strong { display: block; font-size: 54px; letter-spacing: -.06em; margin-top: 6px; }
.today-card p { margin: 0; line-height: 1.6; }
.today-card strong em{font-size:16px;font-style:normal;letter-spacing:0;margin-left:7px}.today-card span{font-weight:750}.today-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:8px}.today-actions button{min-height:46px;border:1px solid rgba(16,37,31,.16);border-radius:14px;background:rgba(255,255,255,.42);font-weight:900}.today-actions button:first-child{background:var(--ink);color:white}.today-actions button:disabled{opacity:.4}
.today-card.locked-review { position: relative; }
.locked-badge { display: block; width: fit-content; margin-top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(16,37,31,.12); font-size: 12px; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 32px 0 16px; }
.section-head h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.section-head p { margin: 6px 0 0; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter {
  border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: 8px 13px; color: var(--muted); font-weight: 750;
}
.filter.active { background: var(--ink); color: white; }
.lesson-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lesson-card {
  text-align: left; border: 1px solid var(--line); border-radius: 22px; background: var(--paper-2);
  padding: 22px; color: var(--ink); min-height: 230px; transition: transform .18s ease, box-shadow .18s ease;
}
.lesson-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lesson-card { position: relative; }
.lesson-card.locked::after { content: attr(data-access-label); position: absolute; right: 16px; bottom: 16px; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: white; font-size: 11px; font-weight: 850; }
.lesson-card.locked .card-foot span:last-child { visibility: hidden; }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.level-pill { padding: 6px 10px; border-radius: 999px; background: var(--mint); font-size: 12px; font-weight: 850; }
.stars { color: #c99600; letter-spacing: 1px; font-size: 14px; }
.lesson-card h3 { margin: 30px 0 8px; font-size: 29px; letter-spacing: -.04em; }
.lesson-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.card-foot { margin-top: 26px; display: flex; justify-content: flex-end; font-size: 13px; font-weight: 800; }
.library-section { scroll-margin-top: 84px; padding-bottom: 12px; }
.library-head { margin-bottom: 14px; }
.library-count { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.5); }
.library-count strong { font-size: 23px; line-height: 1; }
.library-count span { color: var(--muted); font-size: 12px; font-weight: 800; }
.library-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.library-tab { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.54); color: var(--muted); font-weight: 850; }
.library-tab b { min-width: 24px; padding: 3px 6px; border-radius: 999px; background: rgba(16,37,31,.08); color: var(--ink); font-size: 11px; }
.library-tab.active { border-color: var(--ink); background: var(--ink); color: white; }
.library-tab.active b { background: var(--sun); }
.library-summary { display: flex; justify-content: space-between; gap: 12px; margin: 0 2px 12px; color: var(--muted); font-size: 12px; font-weight: 750; }
.library-pager { width:min(390px,100%);display:grid;grid-template-columns:44px 44px minmax(116px,1fr) 44px 44px;gap:5px;align-items:center;margin:20px auto 8px;padding:6px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.62);box-shadow:0 8px 24px rgba(16,37,31,.08); }
.library-pager button { width:44px;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:900 26px/1 Georgia,"Times New Roman",serif;cursor:pointer;transition:background .16s ease,transform .16s ease; }
.library-pager button:hover:not(:disabled) { background:var(--ink);color:white;transform:translateY(-1px); }
.library-pager .pager-edge { color:#6b7a75;font-size:23px; }
.library-pager button:disabled { opacity: .32; cursor: not-allowed; }
.library-pager label { min-width: 0; }
.library-pager select { width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);color:var(--ink);text-align:center;font-weight:900;cursor:pointer; }

.course-builder-card { width: min(720px, 100%); }
.course-builder-card .settings-head { align-items: flex-start; }
.course-builder-card .settings-head h2 { margin: 4px 0 0; font-size: 30px; }
.builder-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; padding: 5px; border-radius: 16px; background: rgba(16,37,31,.07); }
.builder-mode-tabs button { min-height: 46px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 900; }
.builder-mode-tabs button.active { background: white; color: var(--ink); box-shadow: 0 4px 14px rgba(16,37,31,.1); }
.builder-body h3 { margin: 18px 0 10px; font-size: 16px; }
.difficulty-picker { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.difficulty-picker button { min-height: 65px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); }
.difficulty-picker button span,.difficulty-picker button small { display: block; }
.difficulty-picker button span { font-weight: 900; }
.difficulty-picker button small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.difficulty-picker button.selected { border-color: var(--ink); background: var(--mint); }
.unlearned-summary { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; margin: 16px 0; padding: 15px; border-radius: 15px; background: #edf4ef; }
.unlearned-summary strong { font-size: 28px; }
.unlearned-summary span { font-weight: 850; }
.unlearned-summary small { grid-column: 1 / -1; margin-top: 5px; color: var(--muted); }
.random-count { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; margin: 14px 0 22px; font-weight: 850; }
.random-count input { grid-column: 1 / -1; margin-top: 8px; }
.builder-empty { color: #8a2f21; text-align: center; font-size: 13px; }
.builder-category-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.builder-category-tabs button { min-height: 40px; border: 1px solid var(--line); border-radius: 12px; background: white; font-weight: 850; }
.builder-category-tabs button.active { background: var(--ink); color: white; }
.selection-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 8px; }
.selection-toolbar strong { color: #9a7000; }
.selection-toolbar>div { display: flex; gap: 5px; }
.selection-toolbar button { min-height: 34px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 12px; font-weight: 800; }
.lesson-picker-list { max-height: min(44vh,420px); overflow-y: auto; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.lesson-picker-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.lesson-picker-row:last-child { border-bottom: 0; }
.lesson-picker-row input { width: 18px; height: 18px; accent-color: var(--ink); }
.lesson-picker-row span { min-width: 0; }
.lesson-picker-row strong,.lesson-picker-row small { display: block; }
.lesson-picker-row strong { font-size: 15px; }
.lesson-picker-row small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-picker-row em { color: #9a7000; font-size: 11px; font-style: normal; font-weight: 850; white-space: nowrap; }
.lesson-picker-row.learned { background: #f3f6f3; }

.lesson-page { padding: 24px 0; }
.lesson-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.back-btn { border: 0; background: transparent; color: var(--ink); font-weight: 850; padding: 8px 0; }
.intro-card, .practice-card, .finish-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow);
}
.intro-card { overflow: hidden; }
.intro-head { padding: 34px; background: var(--ink); color: white; }
.intro-head h1 { margin: 8px 0 6px; font-size: clamp(42px, 8vw, 74px); }
.intro-head p { margin: 0; color: var(--sun); font-weight: 800; }
.intro-body { padding: 30px 34px 34px; }
.example-box { border-bottom: 1px solid var(--line); padding: 20px 0; }
.example-box:first-child { padding-top: 0; }
.example-label { font-size: 12px; color: var(--muted); font-weight: 850; letter-spacing: .08em; }
.example-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.example-line strong { font-size: clamp(22px, 4vw, 32px); letter-spacing: -.025em; }
.play-btn {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--sun); color: var(--ink); font-weight: 900;
}
.translation { color: var(--muted); margin-top: 8px; line-height: 1.6; }
.explanation { margin: 24px 0; padding: 20px; border-radius: 18px; background: #edf4ef; line-height: 1.75; }
.primary-btn {
  border: 0; border-radius: 16px; background: var(--ink); color: white; min-height: 52px; padding: 0 22px; font-weight: 850;
}
.primary-btn.wide { width: 100%; }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; }
.setup-page { width: min(820px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0; }
.setup-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: clamp(26px, 6vw, 50px); }
.setup-card h1 { color: var(--ink); font-size: clamp(34px, 6vw, 54px); margin: 10px 0 28px; }
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-choice button { min-height: 120px; padding: 20px; border: 2px solid var(--line); border-radius: 18px; background: white; color: var(--ink); text-align: left; }
.mode-choice button.selected { border-color: var(--ink); background: var(--mint); }
.mode-choice b, .mode-choice span { display: block; }
.mode-choice b { font-size: 20px; margin-bottom: 7px; }
.mode-choice span { color: var(--muted); line-height: 1.5; }
.setup-options { display: grid; gap: 9px; margin: 20px 0; }
.setup-options button { display: flex; justify-content: space-between; gap: 16px; min-height: 54px; padding: 0 16px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); }
.setup-options span { color: var(--muted); }
.setup-start { width: 100%; min-height: 58px; font-size: 18px; }

.practice-wrap { max-width: 820px; margin: 0 auto; }
.practice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.progress-track { height: 7px; background: rgba(16,37,31,.1); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.progress-fill { height: 100%; background: var(--sun); transition: width .25s ease; }
.mode-switch { display: inline-flex; padding: 4px; background: rgba(16,37,31,.08); border-radius: 13px; }
.mode-switch button { border: 0; background: transparent; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-weight: 800; }
.mode-switch button.active { background: white; color: var(--ink); box-shadow: 0 4px 12px rgba(16,37,31,.1); }
.practice-card { min-height: 535px; padding: clamp(24px, 5vw, 44px); display: flex; flex-direction: column; }
.question-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.section-no { color: var(--muted); font-size: 13px; font-weight: 800; }
.section-tag { background: var(--sun-2); padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 850; }
.question-area { flex: 1; display: grid; place-items: center; text-align: center; padding: 24px 0; }
.question-area-inner { width: 100%; }
.base-label { color: var(--muted); font-size: 12px; font-weight: 850; letter-spacing: .08em; margin-bottom: 8px; }
.base-sentence { font-size: clamp(20px, 4vw, 30px); color: var(--muted); line-height: 1.45; }
.course-shell{padding-bottom:0}.course-page{width:min(920px,calc(100% - 28px));min-height:calc(100vh - 68px);margin:auto;display:flex;flex-direction:column;padding:18px 0 24px}.course-progress{height:6px;background:rgba(16,37,31,.1);border-radius:99px;overflow:hidden;margin-bottom:14px}.course-progress i{display:block;height:100%;background:var(--sun);transition:.25s}.stage{flex:1;min-height:510px;background:var(--paper-2);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:clamp(25px,6vw,58px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.expression{font-size:clamp(48px,10vw,92px);font-weight:950;letter-spacing:-.06em;line-height:1.05}.meaning{font-size:clamp(19px,3vw,28px);color:#9a7000;font-weight:850;margin-top:18px}.scene-title{font-size:14px;font-weight:900;color:#9a7000;letter-spacing:.12em;margin-bottom:20px}.lesson-example{width:min(720px,100%);padding:16px 0;border-bottom:1px solid var(--line);text-align:left}.lesson-example b,.lesson-example strong,.lesson-example span{display:block}.lesson-example b{font-size:12px;color:var(--muted)}.lesson-example strong{font-size:clamp(20px,4vw,31px);margin:6px 0}.lesson-example span{color:var(--muted)}.usage{width:min(720px,100%);margin-top:20px;padding:17px;border-radius:16px;background:#edf4ef;text-align:left;line-height:1.7}.usage b{margin-right:10px}.section-splash small{font-weight:900;color:#9a7000}.section-splash h1{font-size:clamp(34px,7vw,64px);margin:10px 0 12px}.section-splash p{color:var(--muted);font-size:16px}.base-intro small{font-weight:900;color:#9a7000}.base-intro h2{font-size:clamp(28px,6vw,50px);margin:14px 0 8px}.base-intro p{color:var(--muted)}.base-intro strong{display:block;margin-top:28px;color:#9a7000;font-size:18px}.question-head{width:100%;display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:850}.prompt-block{width:100%;margin:auto}.prompt-block .prompt{margin:15px 0;font-size:clamp(30px,7vw,58px)}.prompt-block .base-sentence{font-size:clamp(25px,5vw,40px);font-weight:850;color:var(--ink);margin-top:22px}.prompt-block .answer{font-size:clamp(26px,5vw,43px)}.timer{transition:.2s}.timer:not(.counting){background:#edf4ef;color:var(--ink)}.player-controls{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr 1fr;gap:10px;width:min(860px,100%);margin:14px auto 0}.player-controls button{min-height:50px;border:1px solid var(--line);border-radius:15px;background:white;font-weight:850}.player-controls .pause{background:var(--ink);color:white}.player-controls .skip-control{color:#725300;border-color:#e2c567;background:#fff9df}.player-controls .exit-control{color:#8a2f21;border-color:#ddb8ae}.complete-mark{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:var(--sun);font-size:40px;font-weight:950;animation:pop .35s ease}@keyframes pop{from{transform:scale(.5);opacity:0}}.stage h2{font-size:clamp(28px,5vw,44px);margin:20px 0 5px}.master-actions,.finish-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}.master-actions button,.finish-actions button{min-height:50px;padding:0 18px;border:1px solid var(--line);border-radius:14px;background:white;font-weight:850}.finish-actions .primary-btn{background:var(--ink);color:white}.rest-count{font-size:70px;font-weight:950;color:#9a7000;margin:15px}.rating{width:min(680px,100%)}.rating .rate-hard,.rating .rate-mid,.rating .rate-easy{min-height:68px;font-size:18px}.exit-link{margin-top:24px;border:0;background:transparent;color:#8a2f21;font-weight:850;text-decoration:underline}.confirm-box{text-align:center;padding:12px}.confirm-box p{color:var(--muted)}.confirm-box>div{display:flex;gap:10px;justify-content:center;margin-top:24px}.confirm-box button{min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:13px;background:white;font-weight:850}.confirm-box .danger-btn{background:#8a2f21;color:white;border-color:#8a2f21}.skip-box .skip-actions{display:grid}.skip-box .primary-skip{background:var(--sun);border-color:var(--sun)}
.loop-status{align-self:center;margin:-4px 0 10px;padding:6px 12px;border-radius:999px;background:#fff3bf;color:#765500;font-size:12px;font-weight:900}.repeat-note{margin:4px 0 16px;padding:10px 12px;border-radius:12px;background:#fff8dc}
.review-target-hint{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:8px auto 2px;color:var(--muted);font-size:13px;font-weight:750}.review-target-hint strong{color:#9a7000;font-size:15px;font-weight:900}
.audio-error{margin-bottom:12px;padding:11px 14px;border-radius:13px;background:#fff0ec;color:#812f20;text-align:center;font-weight:750}.audio-error button{margin-left:8px;border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;font-weight:900}
.prompt { margin-top: 22px; font-size: clamp(27px, 6vw, 50px); line-height: 1.28; font-weight: 900; letter-spacing: -.04em; white-space: pre-line; }
.hl { color: #c28e00; }
.answer { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: clamp(25px, 5vw, 42px); line-height: 1.35; font-weight: 900; letter-spacing: -.035em; animation: reveal .25s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(7px); } }
.audio-note { margin: 18px auto 0; width: fit-content; max-width: 100%; background: #edf4ef; border-radius: 13px; padding: 10px 13px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.timer { width: 86px; height: 86px; margin: 18px auto 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--sun); font-size: 33px; font-weight: 950; cursor: pointer; }
.wait-meta { color: var(--muted); font-size: 12px; margin-top: 10px; }
.controls { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 9px; }
.control-btn { min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); font-weight: 800; }
.control-btn.main { background: var(--ink); color: white; border-color: var(--ink); }
.secondary-row { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.text-btn { border: 0; background: transparent; color: var(--muted); padding: 7px 10px; font-size: 13px; font-weight: 750; }
.rating { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }
.rate-btn { border: 0; border-radius: 14px; min-height: 50px; font-weight: 900; }
.rate-hard { background: #f4d2c8; color: #6f2817; }
.rate-mid { background: var(--sun-2); color: #654b00; }
.rate-easy { background: var(--mint); color: #164734; }

.settings-overlay { position: fixed; inset: 0; background: rgba(7,20,16,.45); z-index: 50; display: grid; place-items: center; padding: 16px; }
.settings-card { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--paper-2); border-radius: 24px; padding: 26px; box-shadow: var(--shadow); }
.settings-card>h2{margin:0 0 15px}.settings-head{min-height:28px}.settings-head .close-btn{margin-left:auto}.panel-note{color:var(--muted);line-height:1.6}.range-value{text-align:center;font-size:28px;font-weight:950;margin:16px}.check-list{display:grid;gap:9px}.check-list label{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:13px;font-weight:800}.check-list input,.review-row>input{width:20px;height:20px;accent-color:var(--ink)}.review-list{display:grid;gap:8px}.review-row{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:11px;border-bottom:1px solid var(--line)}.review-row>div{display:flex;align-items:center;gap:8px}.review-row button{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:white;font-weight:900}.review-row b{min-width:18px;text-align:center}
.product-panel { width: min(480px, 100%); }
.auth-panel { text-align: center; padding: 0 10px 10px; }
.auth-panel h2 { margin: 8px 0 8px; font-size: 30px; }
.auth-panel>p { color: var(--muted); line-height: 1.65; }
.auth-panel form { display: grid; gap: 13px; margin: 22px 0 8px; text-align: left; }
.auth-panel label { display: grid; gap: 7px; font-size: 13px; font-weight: 850; }
.auth-panel input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: white; color: var(--ink); }
.auth-panel small { display: block; margin-top: 16px; color: var(--muted); line-height: 1.55; }
.auth-links { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.auth-links .text-btn:first-child { color: #8a6510; }
.form-error { padding: 10px 12px; border-radius: 11px; background: #f8ded7; color: #7b2e1f; font-size: 13px; }
.account-plan { display: flex; justify-content: space-between; align-items: center; margin: 22px 0; padding: 18px; border-radius: 15px; background: #edf4ef; }
.account-plan strong { color: #9a7000; }
.paywall-points { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 22px 0; }
.paywall-points span { padding: 12px; border-radius: 12px; background: #edf4ef; font-size: 13px; font-weight: 800; }
.settings-head { display: flex; justify-content: space-between; align-items: center; }
.settings-head h2 { margin: 0; }
.close-btn { border: 0; background: transparent; font-size: 24px; }
.setting { padding: 20px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting strong { display: block; }
.setting small { display: block; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.value-badge { background: var(--ink); color: white; border-radius: 10px; padding: 7px 9px; font-weight: 900; min-width: 52px; text-align: center; }
input[type="range"] { width: 100%; accent-color: var(--ink); margin-top: 16px; }
.range-adjust { display: grid; grid-template-columns: 42px minmax(62px,auto) 42px; align-items: center; justify-content: center; gap: 10px; margin-top: 13px; }
.range-adjust button { width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); font-size: 21px; font-weight: 900; line-height: 1; }
.range-adjust button:active { transform: scale(.96); background: var(--sun-2); }
.range-adjust + input[type="range"] { margin-top: 10px; }
.switch { width: 50px; height: 29px; border-radius: 99px; border: 0; background: #c7cbc8; padding: 3px; }
.switch::after { content:""; display:block; width:23px; height:23px; background:white; border-radius:50%; transition:.2s; }
.switch.on { background: var(--ink); }
.switch.on::after { transform: translateX(21px); }
.finish-card { padding: 44px; text-align: center; max-width: 700px; margin: 40px auto; }
.finish-icon { width: 76px; height: 76px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); font-size: 34px; }
.finish-card h2 { font-size: 34px; margin: 0 0 10px; }
.finish-card p { color: var(--muted); line-height: 1.7; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .today-card { min-height: 220px; }
  .lesson-grid { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 16px; }
  .container { width: min(100% - 22px, 1080px); }
  .hero-copy { padding: 28px 24px; }
  .today-card { padding: 25px; }
  .intro-head, .intro-body { padding-left: 24px; padding-right: 24px; }
  .example-line { align-items: flex-start; }
  .practice-card { min-height: calc(100vh - 178px); border-radius: 22px; }
  .controls { grid-template-columns: 1fr 1.35fr 1fr; }
  .control-btn { font-size: 13px; }
  .topbar { gap: 8px; }
  .brand { gap: 7px; min-width: 0; }
  .brand-name { font-size: 14px; white-space: nowrap; }
  .brand-mark { width: 31px; height: 31px; border-radius: 9px; flex: 0 0 auto; }
  .top-actions { gap: 4px; min-width: 0; }
  .top-actions .ghost-btn { display: inline-flex; align-items: center; justify-content: center; }
  .top-actions .ghost-btn,.top-actions .icon-btn,.top-actions .account-btn { min-height: 38px; padding: 0 9px; border-radius: 11px; font-size: 12px; white-space: nowrap; }
  .top-actions .mode-top-btn { min-width: 48px; }
  .top-actions .label-wide { display: none; }
  .top-actions .label-short { display: inline; }
  .mode-choice { grid-template-columns: 1fr; }
  .library-head { flex-direction: row; align-items: end; }
  .library-head p { max-width: 260px; }
  .library-count { padding: 8px 10px; }
  .library-count strong { font-size: 20px; }
  .library-tabs { display: flex; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .library-tabs::-webkit-scrollbar { display: none; }
  .library-tab { flex: 0 0 auto; min-height: 38px; padding: 0 10px; font-size: 12px; }
  .library-summary { margin: 4px 2px 7px; font-size: 11px; }
  .lesson-grid { gap: 7px; }
  .lesson-card { min-height: 106px; padding: 11px 13px; border-radius: 15px; }
  .lesson-card .level-pill { padding: 4px 7px; font-size: 10px; }
  .lesson-card .stars { font-size: 10px; }
  .lesson-card h3 { margin: 9px 0 3px; font-size: 19px; }
  .lesson-card p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.35; }
  .card-foot { margin-top: 8px; font-size: 10px; }
  .lesson-card.locked::after { right: 10px; bottom: 8px; padding: 4px 7px; font-size: 9px; }
  .library-pager { position:sticky;bottom:6px;z-index:8;grid-template-columns:38px 38px minmax(96px,1fr) 38px 38px;gap:3px;margin-top:10px;padding:5px;border-radius:15px;background:rgba(247,243,232,.94);box-shadow:0 9px 24px rgba(16,37,31,.13);backdrop-filter:blur(12px); }
  .library-pager button { width:38px;min-height:39px;border-radius:10px;padding:0;font-size:23px; }
  .library-pager .pager-edge { font-size:20px; }
  .library-pager select { min-height:39px;border-radius:10px;padding:0;font-size:12px; }
  .course-builder-card { max-height: 94vh; padding: 18px; }
  .course-builder-card .settings-head h2 { font-size: 25px; }
  .builder-mode-tabs { margin: 12px 0; }
  .difficulty-picker { grid-template-columns: repeat(3,1fr); }
  .difficulty-picker button { min-height: 54px; }
  .unlearned-summary { margin: 10px 0; padding: 10px; }
  .unlearned-summary strong { font-size: 23px; }
  .random-count { margin: 10px 0 16px; }
  .builder-category-tabs button { min-height: 36px; font-size: 12px; }
  .lesson-picker-list { max-height: 46vh; }
  .lesson-picker-row { min-height: 50px; padding: 7px 9px; }
  .lesson-picker-row strong { font-size: 13px; }
  .lesson-picker-row small { font-size: 10px; }
  .lesson-picker-row em { font-size: 10px; }
  .auth-links { align-items: stretch; flex-direction: column; gap: 2px; }
}
.master-actions button.selected { background: var(--sun); border-color: var(--sun); }
.finish-actions button:disabled { opacity: .35; cursor: not-allowed; }
.rating button { border: 0; border-radius: 16px; font-weight: 900; }
.complete-mark.stable { animation: none; }
@media (max-width: 560px) { .player-controls{grid-template-columns:52px repeat(4,1fr) 52px}.player-controls .nav-arrow:first-child{grid-column:1}.player-controls .pause{grid-column:2/6}.player-controls .nav-arrow:nth-child(3){grid-column:6}.player-controls .skip-control{grid-column:1/4}.player-controls .exit-control{grid-column:4/7} }
.featured-route{margin:28px 0 54px;padding:32px 34px;border-radius:28px;background:#f2c94c;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:36px;align-items:center;box-shadow:0 18px 45px rgba(16,37,31,.10)}
.featured-route.guest-route{background:#fff4c7;border:1px solid rgba(16,37,31,.1)}
.route-kicker{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#365049;margin-bottom:8px}
.featured-route h2,.library-collapsed h2{margin:0 0 10px;color:#10251f;font-size:clamp(25px,3vw,38px);line-height:1.12}
.featured-route p,.library-collapsed p{margin:0;color:#42534e;line-height:1.65}
.route-action{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.route-action>strong{font-size:48px;line-height:1;color:#10251f}
.route-action>small{color:#52635e;margin-bottom:14px}
.route-action .start-btn{padding:13px 20px;font-size:15px;white-space:nowrap}
.route-progress{height:8px;background:rgba(16,37,31,.13);border-radius:99px;overflow:hidden;margin:20px 0 8px}
.route-progress i{display:block;height:100%;background:#10251f;border-radius:inherit}
.route-days{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.route-days span{padding:7px 11px;border:1px solid rgba(16,37,31,.18);border-radius:99px;font-size:12px;font-weight:800;color:#53645f}
.route-days span.active{background:#10251f;color:white;border-color:#10251f}
.route-days span.done{background:rgba(16,37,31,.1);color:#10251f}
.track-section{margin:0 0 52px}
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.theme-card{min-height:218px;padding:22px;border:1px solid #dfe5e2;border-radius:22px;background:#fff;text-align:left;color:#10251f;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.theme-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,37,31,.1);border-color:#afbeb8}
.theme-number{font-size:12px;font-weight:900;color:#b28b16;letter-spacing:.1em}
.theme-card small{color:#71817c;font-weight:700}
.theme-card h3{font-size:21px;line-height:1.25;margin:7px 0}
.theme-card p{font-size:14px;line-height:1.55;margin:0;color:#5d6d68}
.theme-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid #edf0ef;font-size:13px;font-weight:800;color:#52635e}
.theme-foot b{font-size:20px;color:#10251f}
.library-collapsed{margin:0 0 60px;padding:28px 30px;border:1px solid #dfe5e2;border-radius:24px;background:#f7f9f8;display:flex;justify-content:space-between;align-items:center;gap:28px}
.library-collapsed .secondary-start{background:#10251f;color:#fff;border-color:#10251f}
.library-collapsed h2{font-size:26px}
.library-open-head{display:flex;justify-content:flex-end;margin-bottom:-18px;position:relative;z-index:2}
.track-detail-card{width:min(720px,calc(100vw - 30px));max-height:min(820px,90vh);display:flex;flex-direction:column}
.track-outcome{margin:0 0 14px;color:#53645f;line-height:1.65}
.track-detail-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.track-detail-summary span{background:#eef3f1;border-radius:99px;padding:6px 10px;font-size:12px;font-weight:800;color:#48605a}
.track-lesson-list{min-height:0;overflow:auto;border:1px solid #e2e7e5;border-radius:16px;margin-bottom:16px}
.track-lesson-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 13px;border-bottom:1px solid #edf0ef}
.track-lesson-row:last-child{border-bottom:0}
.track-lesson-row>b{font-size:11px;color:#9aa6a2}
.track-lesson-row span{display:flex;flex-direction:column;min-width:0}
.track-lesson-row strong{font-size:15px;line-height:1.3}
.track-lesson-row small{font-size:12px;color:#71817c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-lesson-row em{font-size:11px;font-style:normal;color:#8a9994;white-space:nowrap}
.track-lesson-row.learned{background:#f1f7f4}
@media(max-width:900px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.featured-route{grid-template-columns:minmax(0,1fr) 180px}}
@media(max-width:560px){.featured-route{margin:18px 0 38px;padding:22px;grid-template-columns:1fr;gap:18px;border-radius:22px}.featured-route h2{font-size:27px}.route-action{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px}.route-action>strong{font-size:36px}.route-action>small{margin:0}.route-action .start-btn{grid-column:1/-1;width:100%;margin-top:8px}.theme-grid{display:flex;overflow-x:auto;gap:10px;padding:2px 18px 12px 0;scroll-snap-type:x mandatory;scrollbar-width:none}.theme-grid::-webkit-scrollbar{display:none}.theme-card{flex:0 0 82vw;min-height:190px;padding:17px 18px;scroll-snap-align:start}.theme-card h3{font-size:19px;margin:4px 0}.theme-card p{font-size:13px}.track-section{margin-bottom:30px}.library-collapsed{padding:21px;align-items:flex-start;flex-direction:column}.library-collapsed h2{font-size:23px}.library-collapsed button{width:100%}.track-detail-card{max-height:92vh}.track-lesson-row{grid-template-columns:28px minmax(0,1fr) auto;padding:10px}.track-lesson-row small{max-width:190px}}

/* Pronunciation, replay, and local recording */
.phonetics{width:min(760px,100%);display:grid;gap:7px;margin-top:20px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.6);text-align:left}
.phonetic-row{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:10px;color:#52635e}
.phonetic-row>b{color:#9a7000;font-size:13px;line-height:1.8}
.phonetic-row>span{display:flex;flex-wrap:wrap;gap:4px 7px;font-size:clamp(15px,2.7vw,20px);line-height:1.55}
.phonetic-row i{font-family:"Segoe UI",Arial,sans-serif;font-style:normal;white-space:nowrap}
.example-line,.answer-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.example-line strong{flex:1}
.inline-audio{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:17px}
.answer-line{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.answer-line .answer{flex:1;margin:0;padding:0;border:0}
.answer-audio{width:44px;height:44px}
.manual-next-hint{margin:15px 0 0;color:var(--muted);font-size:12px}
.player-controls .nav-arrow{font-size:27px;line-height:1;font-family:Arial,sans-serif}
.recorder-panel{width:min(540px,100%);margin:15px auto 0;padding:13px 15px;border:1px solid #d8e1dd;border-radius:15px;background:#f4f8f6}
.recorder-panel.is-playing{border-color:#d5b34f;background:#fff9e8;box-shadow:0 0 0 3px rgba(213,179,79,.13)}
.recorder-status{font-size:13px;color:#52635e;font-weight:750}
.recorder-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.recorder-actions button{min-height:39px;padding:0 14px;border:1px solid #bdcbc5;border-radius:11px;background:#fff;color:var(--ink);font-weight:850}
.recorder-actions .record-start{background:var(--ink);color:#fff;border-color:var(--ink)}
.recorder-actions .record-stop{background:#8a2f21;color:#fff;border-color:#8a2f21}
.recorder-actions .record-play{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:118px}
.recorder-actions .record-play.is-playing{background:#f0c94b;border-color:#d5ac27;color:#10251f}
.record-waves{height:18px;display:inline-flex;align-items:center;gap:2px}
.record-waves i{display:block;width:3px;height:5px;border-radius:3px;background:currentColor;opacity:.55}
.record-play.is-playing .record-waves i{animation:record-wave .72s ease-in-out infinite;opacity:1}
.record-play.is-playing .record-waves i:nth-child(2){animation-delay:.12s}.record-play.is-playing .record-waves i:nth-child(3){animation-delay:.24s}.record-play.is-playing .record-waves i:nth-child(4){animation-delay:.36s}
@keyframes record-wave{0%,100%{height:5px}50%{height:17px}}
@media(prefers-reduced-motion:reduce){.record-play.is-playing .record-waves i{animation:none;height:12px}}
.recording-error{margin:9px 0 0;color:#8a2f21;font-size:12px;line-height:1.5}
@media(max-width:560px){.stage{padding:24px 18px;min-height:calc(100vh - 240px)}.phonetics{padding:11px 13px}.phonetic-row{grid-template-columns:25px 1fr}.player-controls .nav-arrow{font-size:24px}.recorder-panel{padding:11px}.answer-line{align-items:flex-start}.inline-audio{width:38px;height:38px}}

/* First-use introduction */
.intro-link{border:0;background:transparent;color:#53645f;font-weight:800;white-space:nowrap;cursor:pointer}
.intro-link:hover{color:var(--ink)}
.intro-overlay{z-index:80}
.intro-card{width:min(760px,100%);max-height:min(880px,94vh);padding:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.intro-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0}
.intro-progress{display:flex;gap:7px}
.intro-progress i{display:block;width:28px;height:4px;border-radius:4px;background:#dce4e0}
.intro-progress i.active,.intro-progress i.done{background:#d5a91d}
.intro-content{padding:16px 34px 24px;overflow-y:auto}
.intro-content h2{margin:12px 0 14px;font-size:clamp(28px,5vw,44px);line-height:1.08;letter-spacing:-.045em;color:var(--ink)}
.intro-content p{color:#5d6d68;line-height:1.7}
.intro-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f5e7a8;color:#5b4710;font-size:12px;font-weight:900;letter-spacing:.08em}
.intro-hero{padding:22px 2px 8px;text-align:center}
.intro-hero>p{max-width:540px;margin:0 auto}
.intro-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.intro-points span{padding:18px 10px;border:1px solid #dce4e0;border-radius:16px;background:#f7faf8;display:grid;gap:4px}
.intro-points b{font-size:17px;color:var(--ink)}.intro-points small{color:#74837e}
.intro-step-list{display:grid;gap:10px;margin-top:20px}
.intro-step-list>div{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:13px 15px;border:1px solid #dce4e0;border-radius:15px;background:#f8faf9}
.intro-step-list>div>b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.intro-step-list span{display:grid;gap:3px}.intro-step-list strong{color:var(--ink)}.intro-step-list small{color:#697a74;line-height:1.45}
.intro-mode-note{margin:14px 2px 0;padding:11px 14px;border-radius:12px;background:#fff7d8;font-size:13px}
.intro-drills h2{font-size:clamp(27px,4.5vw,38px)}
.intro-drill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.intro-drill-grid section{padding:14px;border:1px solid #dce4e0;border-radius:16px;background:#f8faf9;min-width:0}
.intro-drill-grid header{display:grid;gap:2px;margin-bottom:11px}.intro-drill-grid header b{color:var(--ink);font-size:16px}.intro-drill-grid header small,.intro-base{font-size:11px;color:#74837e}
.intro-base{margin:0 0 9px!important;padding:7px 8px;border-radius:8px;background:#eef3f0;line-height:1.4!important}
.intro-question{display:grid;grid-template-columns:22px minmax(0,1fr);gap:7px;padding:8px 0;border-top:1px solid #e0e7e3}
.intro-question>span{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#e7cb62;color:#3c310d;font-size:11px;font-weight:900}
.intro-question p{display:grid;gap:4px;margin:0;min-width:0;line-height:1.35}
.intro-question small{color:#788781}.intro-question strong{font-size:12px;color:var(--ink);overflow-wrap:anywhere}
.intro-finish{text-align:center;padding-top:20px}.intro-finish>p{max-width:590px;margin:0 auto}
.intro-review-flow{display:flex;align-items:center;justify-content:center;gap:10px;margin:25px 0 18px}.intro-review-flow span{padding:11px 15px;border-radius:12px;background:#eef4f1;color:var(--ink);font-weight:850}.intro-review-flow b{color:#c49b18}
.intro-finish>small{color:#74837e}
.intro-actions{display:flex;justify-content:space-between;gap:12px;padding:15px 20px 20px;border-top:1px solid #e3e9e6;background:#fff}
.intro-actions button{min-width:108px;min-height:46px;border-radius:13px;font-weight:900;cursor:pointer}
.intro-actions .primary-btn{margin-left:auto;padding:0 24px}.intro-back,.intro-skip{border:1px solid #cbd6d1;background:#fff;color:#53645f}
@media(max-width:700px){.intro-link{font-size:12px;padding:5px}.intro-card{max-height:96vh}.intro-content{padding:12px 19px 20px}.intro-drill-grid{grid-template-columns:1fr}.intro-drill-grid section{padding:12px}.intro-points{gap:6px}.intro-points span{padding:13px 5px}.intro-points b{font-size:14px}.intro-review-flow{gap:5px}.intro-review-flow span{padding:9px 8px;font-size:12px}.intro-review-flow b{font-size:12px}}
@media(max-width:430px){
  .topbar{height:64px;padding:0 10px;gap:6px}
  .brand{gap:7px;min-width:0;flex:0 1 auto;font-size:15px;white-space:nowrap}
  .brand-mark{width:30px;height:30px;border-radius:9px;flex:none;font-size:15px}
  .top-actions{gap:4px;min-width:0;margin-left:auto}
  .top-actions .icon-btn,.top-actions .ghost-btn,.top-actions .account-btn{min-height:38px;padding:0 9px;border-radius:11px;font-size:12px;white-space:nowrap}
  .intro-link{max-width:none;padding:4px 3px;font-size:11px;line-height:1;white-space:nowrap}
  .intro-content h2{font-size:29px}
  .intro-question strong{font-size:13px}
  .intro-actions{padding:12px 15px 15px}
}

/* Route details, course information, FAQ, and customer service */
.featured-clickable{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.featured-clickable:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(16,37,31,.15)}
.route-detail-btn{min-height:42px;padding:0 15px;border:1px solid rgba(16,37,31,.2);border-radius:13px;background:rgba(255,255,255,.62);color:var(--ink);font-weight:900}
.product-help{margin:34px 0 22px;padding:26px;border:1px solid var(--line);border-radius:24px;background:rgba(255,253,247,.72)}
.product-help>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:15px}.product-help h2{margin:5px 0 0;font-size:27px;letter-spacing:-.035em}
.product-help-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.product-help-actions button{padding:17px;text-align:left;border:1px solid #d9e2de;border-radius:16px;background:#fff;color:var(--ink)}
.product-help-actions button:hover{border-color:#c6a236;background:#fff9e7}.product-help-actions b,.product-help-actions span{display:block}.product-help-actions b{font-size:16px}.product-help-actions span{margin-top:5px;color:#71807b;font-size:12px;line-height:1.45}
.route-detail-card,.info-card,.faq-card{width:min(720px,100%);max-height:92vh;overflow-y:auto}
.route-detail-card .settings-head,.info-card .settings-head,.faq-card .settings-head,.service-card .settings-head{align-items:flex-start}
.route-detail-card h2,.info-card h2,.faq-card h2,.service-card h2{margin:5px 0 0}
.route-detail-outcome,.info-lead{color:#64746f;line-height:1.65}
.route-detail-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0}
.route-detail-summary span{display:flex;align-items:baseline;justify-content:center;gap:5px;padding:12px;border-radius:12px;background:#eff4f1;color:#687872;font-size:12px}.route-detail-summary b{font-size:19px;color:var(--ink)}
.route-day-list{display:grid;gap:6px;max-height:48vh;overflow-y:auto;padding-right:3px;margin-bottom:16px}
.route-day-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 12px;border:1px solid #dce4e0;border-radius:12px;background:#fff}
.route-day-row>b{font-size:12px;color:#9a7000}.route-day-row>span{display:grid;gap:2px;min-width:0}.route-day-row strong{font-size:14px}.route-day-row small{font-size:11px;color:#71807b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.route-day-row em{font-size:11px;font-style:normal;color:#87938f;white-space:nowrap}.route-day-row.learned{background:#edf7f1;border-color:#cae0d5}
.info-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.info-stat-grid span{padding:15px 8px;border-radius:14px;background:#eff4f1;text-align:center}.info-stat-grid b,.info-stat-grid small{display:block}.info-stat-grid b{font-size:25px}.info-stat-grid small{color:#71807b}
.info-block{padding:15px 0;border-top:1px solid #e0e7e3}.info-block h3{margin:0 0 8px}.info-block p{margin:0;color:#5f706a;line-height:1.65}.info-block ul{margin:0;padding-left:20px;color:#53645f;line-height:1.8}
.founder-plan{margin:5px 0 17px;padding:18px;border-radius:17px;background:#fff2bd}.founder-plan>span{font-weight:900}.founder-plan>strong{display:block;margin:3px 0;font-size:36px}.founder-plan p{margin:0 0 7px;line-height:1.55}.founder-plan small{color:#725a12}
.faq-list{display:grid;gap:8px;margin:16px 0}.faq-list details{border:1px solid #dce4e0;border-radius:13px;background:#fff;padding:0 14px}.faq-list summary{padding:14px 25px 14px 0;font-weight:850;cursor:pointer}.faq-list p{margin:0;padding:0 0 14px;color:#60716b;line-height:1.65;font-size:14px}.secondary-wide{width:100%;min-height:48px;border:1px solid #bdcbc5;border-radius:13px;background:#fff;color:var(--ink);font-weight:900}
.service-card{width:min(470px,100%);max-height:94vh;overflow-y:auto;text-align:center}.service-card .settings-head{text-align:left}.service-card>p{color:#61716c;line-height:1.6}.service-card img{display:block;width:min(310px,90%);height:auto;margin:14px auto;border:1px solid #e0e5e2;border-radius:20px}.service-account{display:flex;justify-content:center;align-items:center;gap:10px;margin:10px 0}.service-account span{color:#71807b}.service-account strong{font-size:20px;letter-spacing:.04em}.service-card>small{display:block;color:#71807b;line-height:1.55}
@media(max-width:700px){.product-help{padding:20px;margin-top:26px}.product-help h2{font-size:23px}.product-help-actions{grid-template-columns:1fr}.product-help-actions button{padding:14px}.route-day-row{grid-template-columns:52px minmax(0,1fr) auto;padding:9px}.route-detail-card,.info-card,.faq-card{max-height:95vh}.route-detail-summary span{display:grid;text-align:center;gap:0}.service-card img{width:min(280px,88%)}}

/* Learned lesson overview */
.learned-overview-entry{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:20px 0;padding:22px 25px;border:1px solid #d8e2dd;border-radius:22px;background:#f7faf8}
.learned-overview-entry h2{margin:4px 0 5px;font-size:25px;letter-spacing:-.03em}.learned-overview-entry p{margin:0;color:#687872;font-size:13px}
.learned-overview-entry>button{min-width:190px;padding:14px 18px;border:0;border-radius:16px;background:var(--ink);color:#fff;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 7px}
.learned-overview-entry>button strong{font-size:28px}.learned-overview-entry>button span{font-size:12px;color:#dce7e2}.learned-overview-entry>button b{grid-column:1/-1;margin-top:5px;color:#f0cc4e;font-size:12px}
.learned-overview-card{width:min(700px,100%);max-height:92vh;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.learned-overview-card h2{margin:5px 0 0}.learned-overview-summary{display:flex;gap:8px;margin:15px 0}.learned-overview-summary span{padding:9px 12px;border-radius:11px;background:#eff4f1;color:#61716b;font-size:12px}.learned-overview-summary b{color:var(--ink)}
.learned-overview-list{display:grid;gap:7px;overflow-y:auto;padding-right:3px}.learned-overview-list>button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:13px 15px;border:1px solid #dce4e0;border-radius:13px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.learned-overview-list>button:hover{border-color:#c6a236;background:#fffaf0}
.learned-overview-list span{display:grid;gap:3px;min-width:0}.learned-overview-list strong{font-size:16px}.learned-overview-list small{color:#71807b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.learned-overview-list em{font-style:normal;font-size:12px;font-weight:850;color:#8a6a09;white-space:nowrap}
.learned-overview-empty{display:grid;place-items:center;gap:7px;min-height:180px;border:1px dashed #cbd7d1;border-radius:16px;color:#6e7d78}.learned-overview-empty span{font-size:13px}
@media(max-width:560px){.learned-overview-entry{padding:18px;align-items:stretch}.learned-overview-entry>button{min-width:128px;padding:12px}.learned-overview-entry p{display:none}.learned-overview-entry h2{font-size:21px}.learned-overview-list>button{padding:12px;gap:9px}.learned-overview-list strong{font-size:15px}.learned-overview-list small{font-size:11px}.learned-overview-list em{font-size:11px}}

/* Conversion-focused course navigation and explanation */
.topbar-left{display:flex;align-items:center;gap:24px;min-width:0}.top-course-nav{display:flex;align-items:center;gap:3px}.top-course-nav button{min-height:38px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:#53645f;font-weight:800;font-size:13px;white-space:nowrap}.top-course-nav button:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.method-info-card{width:min(780px,100%)}.method-opening{margin:16px 0;padding:20px;border-radius:17px;background:#10251f;color:#fff}.method-opening h3{margin:0 0 8px;color:#f0cc4e;font-size:22px}.method-opening p{margin:0;color:#e1e9e5;line-height:1.75}
.method-flow,.method-compare{padding:18px 0;border-bottom:1px solid #e0e7e3}.method-flow>h3,.method-compare>h3{margin:0 0 13px}.method-flow-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.method-flow-grid article{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:13px;border:1px solid #dce4e0;border-radius:13px;background:#f8faf9}.method-flow-grid article>b{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#e7cb62;color:#40330b}.method-flow-grid article span{display:grid;gap:4px}.method-flow-grid small{color:#687872;line-height:1.5}
.method-compare>div{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.method-compare article{padding:13px 14px;border:1px solid #dce4e0;border-radius:13px;background:#fff}.method-compare article b{color:var(--ink)}.method-compare article p{margin:6px 0 0;color:#687872;font-size:13px;line-height:1.55}.method-compare .method-current{border-color:#d1ac2d;background:#fff7d8}.method-features ul{columns:2;column-gap:30px}.method-start{margin:18px 0 10px}.method-info-card .founder-plan{margin-top:10px}
.completion-stats{width:min(520px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0 4px}.completion-stats span{padding:12px 8px;border-radius:13px;background:#eff4f1}.completion-stats b,.completion-stats small{display:block}.completion-stats b{font-size:22px;color:var(--ink)}.completion-stats small{margin-top:3px;color:#687872;font-size:11px}
.intro-one-page{padding:12px 0}.intro-one-page .intro-lead{margin:0 0 18px}.intro-one-page .intro-step-list{margin-top:0}
@media(max-width:700px){.topbar-left{gap:5px}.top-course-nav{gap:0}.top-course-nav button{padding:0 6px;font-size:11px}.top-course-nav .label-wide{display:none}.top-course-nav .label-short{display:inline}.method-flow-grid,.method-compare>div{grid-template-columns:1fr}.method-features ul{columns:1}.method-opening{padding:16px}.method-opening h3{font-size:19px}.completion-stats{gap:5px}.completion-stats span{padding:10px 4px}}
@media(max-width:380px){.brand-name{display:none}.topbar-left{gap:2px}.top-course-nav button{padding:0 5px}.topbar{padding-left:9px!important;padding-right:9px!important}}

/* Filing identity and statutory footer */
.compliance-footer{padding:8px 20px 24px;color:#7d8985;font-size:11px}
.operator-profile{width:min(920px,100%);margin:0 auto 11px;text-align:center}
.operator-profile dl{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 16px;margin:0}
.operator-profile dl>div{display:flex;gap:5px;align-items:baseline}
.operator-profile dt{color:#89938f;font-weight:600}
.operator-profile dd{margin:0;color:#727f7a;line-height:1.5}
.compliance-footer .filing-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 16px;text-align:center}
.compliance-footer a{color:#405f55;text-decoration:none}
.compliance-footer a:hover{text-decoration:underline;color:var(--ink)}
@media(max-width:430px){.compliance-footer{padding:7px 14px 20px;font-size:10px}.operator-profile{margin-bottom:10px;text-align:left}.operator-profile dl{display:grid;gap:4px}.operator-profile dl>div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:6px}.compliance-footer .filing-row{gap:4px 9px}.brand-name{font-size:14px}}