:root {
  --ink: #1f304b;
  --muted: #718198;
  --paper: #fffefa;
  --line: #e8ebed;
  --blue: #4c8ef0;
  --blue-dark: #326fce;
  --blue-soft: #e8f2ff;
  --orange: #ff7a45;
  --yellow: #ffc94d;
  --green: #43bd93;
  --red: #ed6d65;
  --purple: #8c7ce7;
  --shadow: 0 14px 36px rgba(39, 55, 80, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 10% 40%, rgba(93,157,239,.08), transparent 22%), radial-gradient(circle at 94% 74%, rgba(255,201,77,.12), transparent 20%), #f7f9fb; font-family: "Nunito", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border-radius: 10px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.word-topbar { height: 72px; padding: 0 max(26px, calc((100vw - 1180px) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: rgba(255,254,250,.94); border-bottom: 1px solid #e8ebed; backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 30; }
.back-link { justify-self: start; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; border-radius: 13px; color: #637389; font-size: calc(14.5px * var(--fs, 1)); font-weight: 800; }
.back-link:hover { color: var(--blue-dark); background: var(--blue-soft); }
.word-brand { display: flex; align-items: center; gap: 10px; }
.word-brand-mark { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; border-radius: 16px 18px 15px 19px; background: var(--blue); box-shadow: inset -4px -4px rgba(38,98,185,.18), 0 5px 0 #cfe2ff; font-weight: 950; transform: rotate(-3deg); }
.word-brand > span:last-child { display: flex; flex-direction: column; }
.word-brand b { font-size: calc(17px * var(--fs, 1)); }
.word-brand small { margin-top: 2px; color: var(--muted); font-size: calc(13.5px * var(--fs, 1)); }
.top-streak { justify-self: end; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 13px; background: #fff2df; font-size: calc(14.5px * var(--fs, 1)); }
.top-actions { justify-self:end; display:flex; align-items:center; gap:8px; }
.top-energy,.theme-trigger { min-height:40px; display:flex; align-items:center; gap:7px; padding:0 11px; border:1px solid #664722; border-radius:13px; color:#ffe8a1; background:#302513; font-size: calc(14px * var(--fs, 1)); }
.theme-trigger { color:#c4d9f4; border-color:#28476f; background:#102743; cursor:pointer; }
.theme-trigger:hover { color:#fff; border-color:#52d8ff; }

.word-shell { width: min(1180px, calc(100% - 52px)); margin: 24px auto 70px; }
.word-hero { min-height: 238px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 32px 40px; border: 1px solid #dbe7f7; border-radius: 26px; background: linear-gradient(112deg, #eaf4ff 0%, #f2f7ff 52%, #fff6dc 100%); box-shadow: var(--shadow); }
.word-hero:before { content:""; position:absolute; width:280px; height:280px; right:-80px; top:-130px; border:38px solid rgba(255,255,255,.4); border-radius:50%; }
.hero-copy { position: relative; z-index: 3; width: 57%; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; color: #3268b5; border-radius: 99px; background: #d9eaff; font-size: calc(14px * var(--fs, 1)); font-weight: 900; letter-spacing: .06em; }
.eyebrow svg { width: 15px; }
.word-hero h1 { margin: 14px 0 9px; font-size: clamp(27px, 3vw, 38px); line-height: 1.25; }
.word-hero p { margin: 0; color: #63748d; font-size: calc(14px * var(--fs, 1)); }
.hero-goal { display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.hero-goal > div:first-child { white-space: nowrap; }
.hero-goal strong { color: var(--blue-dark); font-size: calc(25px * var(--fs, 1)); }
.hero-goal span { color: #687993; font-size: calc(14px * var(--fs, 1)); font-weight: 800; }
.goal-bar { width: min(220px, 34vw); height: 9px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.8); }
.goal-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #72c6ea); transition: width .35s ease; }
.hero-scene { position: absolute; right: 5%; bottom: 0; width: 34%; height: 100%; }
.planet { position: absolute; right: 12%; bottom: 28px; width: 142px; height: 142px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(145deg, #699ff4, #7375dc); box-shadow: inset -12px -15px rgba(48,63,174,.15), 0 18px 28px rgba(58,90,173,.18); }
.planet b { font-size: calc(54px * var(--fs, 1)); transform: rotate(-8deg); }
.planet i { position: absolute; width: 212px; height: 55px; border: 11px solid rgba(255,197,78,.9); border-radius: 50%; transform: rotate(-12deg); }
.fox { position: absolute; z-index: 3; right: 40%; bottom: 16px; font-size: calc(61px * var(--fs, 1)); transform: rotate(-7deg); filter: drop-shadow(0 8px 6px rgba(47,60,90,.12)); }
.rocket { position: absolute; right: 1%; top: 32px; font-size: calc(39px * var(--fs, 1)); transform: rotate(-20deg); }
.orbit-word { position: absolute; z-index: 4; padding: 5px 10px; color: #385d8f; border: 2px solid #fff; border-radius: 10px; background: rgba(255,255,255,.82); box-shadow: 0 6px 15px rgba(47,75,115,.1); font-size: calc(13.5px * var(--fs, 1)); font-weight: 900; }
.word-one { top: 29px; left: 5%; transform: rotate(-6deg); }
.word-two { left: -6%; bottom: 60px; transform: rotate(5deg); }

.word-tabs { width: fit-content; display: flex; gap: 6px; margin: 24px 0 20px; padding: 5px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: 0 6px 18px rgba(40,58,81,.05); }
.word-tabs [data-view] { min-height:48px; display:flex; align-items:center; gap:7px; padding:0 15px; border:0; border-radius:12px; color:var(--muted); background:transparent; cursor:pointer; font-size:calc(14.5px * var(--fs, 1)); font-weight:850; text-decoration:none; }
.word-tabs [data-view] svg { width:17px; }
.word-tabs [data-view].active { color:#fff; background:var(--blue); box-shadow:0 5px 12px rgba(76,142,240,.25); }
.tab-view { display: none; }
.tab-view.active { display: block; }
.learn-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 20px; }
.mission-card, .review-card, .skill-row, .word-list, .history-summary, .history-list { border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: 0 8px 24px rgba(39,55,80,.055); }
.mission-card { padding: 27px; }
.mission-top { display: flex; align-items: flex-start; justify-content: space-between; }
.section-kicker { color: #de6238; font-size: calc(13.5px * var(--fs, 1)); font-weight: 950; letter-spacing: .11em; }
.section-kicker.blue { color: var(--blue-dark); }
.mission-card h2, .review-card h2, .view-heading h2 { margin: 7px 0 5px; font-size: calc(22px * var(--fs, 1)); }
.mission-card p, .review-card > p { margin: 0; color: var(--muted); font-size: calc(14px * var(--fs, 1)); }
.mission-badge { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: #f1edff; font-size: calc(29px * var(--fs, 1)); transform: rotate(4deg); }
.word-preview { display: flex; flex-wrap: wrap; gap: 9px; margin: 23px 0; }
.preview-chip { min-width: 92px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 13px; color: #54657d; background: #f3f6f8; font-size: calc(14px * var(--fs, 1)); font-weight: 850; }
.preview-chip i { font-size: calc(22px * var(--fs, 1)); font-style: normal; }
.preview-chip.review { color: #7867c5; background: #f0edff; }
.preview-more { display: grid; place-items: center; min-width: 44px; border-radius: 13px; color: var(--muted); background: #f3f6f8; font-weight: 900; }
.start-button { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 0; border-radius: 16px; color: #fff; background: var(--blue); box-shadow: 0 6px 0 #2f6ec9, 0 10px 18px rgba(50,111,206,.2); cursor: pointer; font-weight: 950; transition: transform .16s, box-shadow .16s; }
.start-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #2f6ec9, 0 13px 22px rgba(50,111,206,.22); }
.start-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #2f6ec9; }
.start-button svg { width: 18px; fill: currentColor; }
.mission-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:stretch; }
.quick-session-button { min-width:155px; display:grid; grid-template-columns:auto 1fr; column-gap:7px; align-items:center; padding:7px 13px; border:2px solid #bad1e8; border-radius:16px; color:#35688f; background:#eef7fd; cursor:pointer; text-align:left; }
.quick-session-button>span { grid-row:1/3; font-size:calc(22px * var(--fs, 1)); }.quick-session-button b { font-size:calc(13.5px * var(--fs, 1)); }.quick-session-button small { color:#71879a; font-size:calc(12px * var(--fs, 1)); }
.quick-session-button:hover { border-color:#82b3d5; background:#e2f2fb; }
.review-card { padding: 27px; background: linear-gradient(145deg, #fffefa, #f2f7ff); }
.review-card h2 { font-size: calc(18px * var(--fs, 1)); }
.review-number { display: flex; align-items: center; gap: 12px; margin: 15px 0; }
.review-number strong { color: var(--blue-dark); font-size: calc(43px * var(--fs, 1)); line-height: 1; }
.review-number span { color: var(--muted); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.5; }
.review-rhythm { display: grid; grid-template-columns: repeat(4,1fr); margin: 20px 0 18px; }
.review-rhythm span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #8b96a5; font-size: calc(13px * var(--fs, 1)); }
.review-rhythm span:not(:last-child):after { content:""; position:absolute; width:calc(100% - 18px); top:24px; left:calc(50% + 9px); border-top:2px dotted #ccd4df; }
.review-rhythm i { z-index: 1; width: 19px; height: 19px; border: 4px solid #e3e8ee; border-radius: 50%; background: #fff; }
.review-rhythm .done { color: var(--green); }
.review-rhythm .done i { border-color: #b7eadb; background: var(--green); }
.review-card > p { line-height: 1.6; }
.skill-row { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 20px; padding: 18px; }
.skill-row article { display: flex; align-items: center; gap: 11px; padding: 5px 17px; border-right: 1px dashed #e3e6e8; }
.skill-row article:last-child { border-right: 0; }
.skill-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; font-size: calc(18px * var(--fs, 1)); font-weight: 950; }
.skill-icon.sound { color:#2e7bd0; background:#e4f2ff; }.skill-icon.picture { color:#be7c16; background:#fff0c7; }.skill-icon.recall { color:#8a5dbd; background:#f1e6ff; }.skill-icon.repeat { color:#288f72; background:#ddf5ed; }
.skill-row article > div { display: flex; flex-direction: column; }
.skill-row b { font-size: calc(14.5px * var(--fs, 1)); }.skill-row small { margin-top:4px; color:var(--muted); font-size: calc(13px * var(--fs, 1)); }
.game-row { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; margin-top:20px; }
.energy-card,.challenge-card { min-height:112px; display:flex; align-items:center; gap:15px; padding:20px 22px; border:3px solid #0d1c33; border-radius:23px; box-shadow:8px 8px 0 #020a14; }
.energy-card { background:linear-gradient(120deg,#ffe964,#ffb63f); }.challenge-card { color:#fff; background:linear-gradient(120deg,#6e48d8,#9b58e9); }
.game-icon { width:57px; height:57px; display:grid; place-items:center; flex:0 0 auto; border:3px solid #0e1b30; border-radius:18px; background:#fff; box-shadow:4px 4px 0 rgba(12,25,45,.25); font-size: calc(30px * var(--fs, 1)); transform:rotate(-3deg); }
.game-copy { min-width:0; flex:1; }.game-copy > span { font-size: calc(13.5px * var(--fs, 1)); font-weight:950; letter-spacing:.08em; }.game-copy h2 { margin:4px 0 7px; font-size: calc(16px * var(--fs, 1)); }.game-copy h2 strong { font-size: calc(22px * var(--fs, 1)); }.game-copy small { color:rgba(18,33,55,.68); font-size: calc(13px * var(--fs, 1)); }.challenge-card .game-copy small { color:#d9d1fa; }
.energy-bar { width:100%; height:7px; overflow:hidden; margin-bottom:6px; border:1px solid rgba(14,27,48,.22); border-radius:8px; background:rgba(255,255,255,.5); }.energy-bar i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff714a,#a943d2); transition:width .3s; }
.energy-card > button,.challenge-card > button { min-height:43px; padding:0 14px; border:2px solid #0d1b30; border-radius:13px; color:#101e35; background:#fff; box-shadow:4px 4px 0 #0d1b30; cursor:pointer; font-size: calc(13.5px * var(--fs, 1)); font-weight:950; }.challenge-card > button { color:#42268c; }.energy-card > button:hover,.challenge-card > button:hover { transform:translateY(-2px); }

.view-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 3px 16px; }
.word-search { width: 250px; height: 43px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #dfe4e9; border-radius: 13px; background: #fff; }
.word-search svg { width: 17px; color: var(--muted); }
.word-search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size: calc(14px * var(--fs, 1)); }
.library-heading { align-items:center; }
.active-library-chip { max-width:55%; padding:9px 13px; overflow:hidden; border:2px solid #263e5f; border-radius:99px; color:#a9bdd8; background:#0d203c; font-size: calc(13.5px * var(--fs, 1)); font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.library-panel { padding:22px; border:3px solid #0d1c33; border-radius:25px; background:#fffdf7; box-shadow:8px 8px 0 #020a14,0 18px 34px rgba(0,0,0,.2); }
.library-mode { width:fit-content; display:flex; gap:6px; margin-bottom:20px; padding:5px; border:2px solid #d9e1e7; border-radius:15px; background:#eef2f4; }
.library-mode button { min-height:40px; padding:0 16px; border:0; border-radius:10px; color:#65758b; background:transparent; cursor:pointer; font-weight:900; }
.library-mode button.active { color:#091529; background:#59dfff; box-shadow:3px 3px 0 #7457e8; }
.edition-banner { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; margin-bottom:18px; padding:15px 17px; border:2px solid #1a2a43; border-radius:18px; color:#fff; background:linear-gradient(110deg,#172a50,#3c246f); box-shadow:4px 4px 0 #ffca3a; }
.edition-banner>span { width:48px; height:48px; display:grid; place-items:center; border:2px solid #071426; border-radius:15px; background:#59dfff; font-size: calc(26px * var(--fs, 1)); }
.edition-banner b,.edition-banner small { display:block; }.edition-banner b { font-size: calc(14px * var(--fs, 1)); }.edition-banner small { margin-top:4px; color:#c7d6ed; font-size: calc(13.5px * var(--fs, 1)); }
.edition-banner label { display:flex; align-items:center; gap:8px; color:#c9d7ec; font-size: calc(13.5px * var(--fs, 1)); font-weight:850; }
.edition-banner select { height:40px; padding:0 34px 0 12px; border:2px solid #071426; border-radius:11px; color:#17243a; background:#fff; font-weight:900; cursor:pointer; }
.library-coverage { display:grid; grid-template-columns:repeat(3,auto) minmax(240px,1fr); gap:10px; align-items:center; margin:0 0 16px; }
.library-coverage>span { min-height:52px; display:flex; flex-direction:column; justify-content:center; padding:7px 13px; border:1px solid #dce4ea; border-radius:14px; background:#f7fafc; }
.library-coverage>span b { color:#284d74; font-size:calc(18px * var(--fs, 1)); line-height:1; }.library-coverage>span small { margin-top:4px; color:#78889a; font-size:calc(11.5px * var(--fs, 1)); white-space:nowrap; }
.library-search { min-height:52px; display:flex; align-items:center; gap:8px; padding:0 14px; border:2px solid #d5e0e8; border-radius:14px; background:#fff; }
.library-search:focus-within { border-color:#78aee1; box-shadow:0 0 0 4px rgba(76,142,240,.1); }.library-search svg { width:18px; flex:0 0 auto; color:#6e8194; }.library-search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; }
.library-search-status { min-height:0; margin:-5px 2px 13px; color:#62788c; font-size:calc(12.5px * var(--fs, 1)); }.library-search-status:empty { display:none; }
.unit-grid,.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.library-card { min-width:0; display:grid; grid-template-columns:auto 1fr; gap:11px; position:relative; padding:15px; border:2px solid #dce3e8; border-radius:17px; color:#1e304c; background:#fff; box-shadow:3px 3px 0 #dce3e8; text-align:left; cursor:pointer; transition:.16s; }
.library-card:hover { z-index:1; border-color:#192943; box-shadow:5px 6px 0 #59dfff; transform:translateY(-2px); }
.library-card.selected { border:3px solid #13233c; background:#fff8d8; box-shadow:5px 5px 0 #ffb43d; }
.library-card-icon { width:47px; height:47px; display:grid; place-items:center; border:2px solid #13233c; border-radius:14px; background:linear-gradient(145deg,#e4f7ff,#fff0ba); font-size: calc(25px * var(--fs, 1)); }
.library-card-copy { min-width:0; display:flex; flex-direction:column; }.library-card-copy b { padding-right:43px; overflow:hidden; font-size: calc(14.5px * var(--fs, 1)); text-overflow:ellipsis; white-space:nowrap; }.library-card-copy small { min-height:25px; margin-top:3px; color:#768499; font-size: calc(13px * var(--fs, 1)); line-height:1.35; }
.library-card-copy i { height:6px; margin-top:8px; overflow:hidden; border-radius:99px; background:#e5eaee; }.library-card-copy em { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#53dcb3,#4c8ef0); }
.library-card-copy>span { margin-top:5px; color:#7f8b9c; font-size: calc(13px * var(--fs, 1)); }.library-card>strong { position:absolute; top:14px; right:12px; padding:3px 6px; border-radius:7px; color:#5b70a0; background:#edf2fa; font-size: calc(12.5px * var(--fs, 1)); }.library-card.selected>strong { color:#744b00; background:#ffdf76; }
.category-intro { display:flex; align-items:baseline; gap:10px; margin:2px 2px 15px; }.category-intro b { font-size: calc(17px * var(--fs, 1)); }.category-intro span { color:#77869a; font-size: calc(13.5px * var(--fs, 1)); }
.library-note { margin:18px 5px 0; color:#9eafc6; font-size: calc(13.5px * var(--fs, 1)); line-height:1.7; }
.word-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0; overflow:hidden; padding:4px 20px; }
.word-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:11px; align-items:center; min-height:76px; padding:10px 15px; border-bottom:1px dashed #e7e8e6; }
.word-row:nth-last-child(-n+3) { border-bottom:0; }
.word-row-sound { width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid #cfe0ef; border-radius:12px; color:#2f71b4; background:#edf6ff; cursor:pointer; }
.word-row-sound svg { width:20px; height:20px; }
.word-row-sound:hover { color:#205d9f; border-color:#9fc4e7; background:#e2f1ff; }
.word-row-sound.speaking { color:#fff; border-color:#347ed6; background:#347ed6; }
.word-row-copy { display:flex; flex-direction:column; min-width:0; }
.word-row-copy b { font-size: calc(15px * var(--fs, 1)); }.word-row-copy small { margin-top:3px; color:var(--muted); font-size: calc(13.5px * var(--fs, 1)); }
.word-state { min-width:52px; padding:5px 8px; border-radius:99px; font-size:calc(12px * var(--fs,1)); font-weight:900; line-height:1.25; text-align:center; white-space:nowrap; }
.word-state.new { color:#687a8f; background:#edf1f5; }
.word-state.review { color:#8a5b10; background:#fff0c7; }
.word-state.learning { color:#2d6597; background:#e3f0fb; }
.word-state.mastered { color:#24785f; background:#ddf5ed; }
.empty-state { padding:40px; color:var(--muted); text-align:center; }
.history-summary { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; }
.history-summary article { min-height:130px; display:flex; flex-direction:column; justify-content:center; align-items:center; border-right:1px dashed #e2e5e7; }
.history-summary article:last-child { border-right:0; }
.history-summary span { color:var(--muted); font-size: calc(13.5px * var(--fs, 1)); }.history-summary strong { margin:5px 0 2px; color:var(--blue-dark); font-size: calc(34px * var(--fs, 1)); }.history-summary small { color:var(--muted); font-size: calc(13.5px * var(--fs, 1)); }
.history-list { margin-top:15px; padding:10px 22px; }
.history-item { min-height:70px; display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; border-bottom:1px dashed #e7e8e6; }
.history-item:last-child { border-bottom:0; }.history-date { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#edf4ff; font-size: calc(18px * var(--fs, 1)); }.history-item b { font-size: calc(14.5px * var(--fs, 1)); }.history-item p { margin:4px 0 0; color:var(--muted); font-size: calc(13.5px * var(--fs, 1)); }.history-score { color:var(--green); font-weight:950; }
.history-empty { padding:40px 0; color:var(--muted); text-align:center; font-size: calc(14.5px * var(--fs, 1)); }

.session-view { width:min(780px,100%); margin:0 auto; scroll-margin-top:74px; }
.session-header { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; min-height:56px; }
.session-exit { min-height:42px; display:flex; align-items:center; gap:5px; padding:0 10px; border:0; border-radius:12px; color:var(--muted); background:transparent; cursor:pointer; font-size: calc(14px * var(--fs, 1)); font-weight:800; }
.session-exit:hover { background:#eef1f4; }.session-exit svg { width:17px; }
.session-progress { height:9px; overflow:hidden; border-radius:9px; background:#e4e8eb; }
.session-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),#67c6df); transition:width .3s ease; }
.session-count { color:var(--muted); font-size: calc(13.5px * var(--fs, 1)); font-weight:850; }
.learning-stage { margin-top:22px; text-align:center; }
.learning-stage > h1 { margin:4px 0 20px; font-size: calc(25px * var(--fs, 1)); }
.learning-stage > h1:focus { outline:none; }
.quiz-card { min-height:430px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:38px 30px 30px; border:1px solid #e0e5e9; border-radius:30px; background:var(--paper); box-shadow:0 16px 45px rgba(39,55,80,.09); }
.quiz-card > * { position:relative; z-index:1; }
.quiz-cue { width:100%; display:flex; flex-direction:column; align-items:center; }
.quiz-cue-copy { min-width:0; display:flex; flex-direction:column; align-items:center; }
.quiz-word { max-width:100%; margin:12px 0 28px; overflow-wrap:anywhere; font-size:clamp(calc(28px * var(--fs, 1)),5.2vw,calc(45px * var(--fs, 1))); line-height:1.12; letter-spacing:.01em; }
.quiz-phonetic { margin:0 0 10px; color:#75849a; font-family:Georgia,serif; font-size:calc(15px * var(--fs,1)); }
.quiz-sound { display:flex; flex-direction:column; align-items:center; gap:7px; padding:15px 22px; border:0; border-radius:18px; color:var(--blue-dark); background:var(--blue-soft); cursor:pointer; font-weight:900; }.quiz-sound svg { width:29px; height:29px; }.quiz-sound span { font-size: calc(13.5px * var(--fs, 1)); }
.quiz-card[data-question-type="meaning"]:not(.guided) .quiz-word { margin-bottom:6px; }
.quiz-card[data-question-type="meaning"]:not(.guided) .quiz-phonetic { margin-bottom:8px; }
.quiz-card[data-question-type="meaning"]:not(.guided) .quiz-sound { flex-direction:row; gap:6px; min-height:44px; margin:0 0 18px; padding:8px 12px; border-radius:12px; }
.quiz-card[data-question-type="meaning"]:not(.guided) .quiz-sound svg { width:20px; height:20px; }
.quiz-visual { width:96px; height:96px; margin:0 0 15px; border-radius:28px; font-size: calc(56px * var(--fs, 1)); }
.quiz-card.guided { min-height:390px; padding-top:28px; }
.quiz-card.guided .quiz-cue { width:min(520px,100%); display:grid; grid-template-columns:120px minmax(0,1fr); gap:22px; align-items:center; margin-bottom:20px; text-align:left; }
.quiz-card.guided .quiz-cue-copy { align-items:flex-start; }
.quiz-card.guided:not(.has-visual) .quiz-cue { display:flex; text-align:center; }
.quiz-card.guided:not(.has-visual) .quiz-cue-copy { align-items:center; }
.quiz-card.guided .quiz-visual { width:120px; height:120px; margin:0; }
.quiz-card.guided .quiz-word { margin:0 0 6px; font-size:clamp(calc(28px * var(--fs,1)),4.5vw,calc(40px * var(--fs,1))); }
.quiz-card.guided .quiz-phonetic { margin:0; }
.quiz-card.guided .quiz-sound { flex-direction:row; gap:7px; margin-top:10px; padding:8px 12px; border-radius:13px; }
.quiz-card.guided .quiz-sound svg { width:21px; height:21px; }
.quiz-intro-meaning { width:min(520px,100%); display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:14px 16px; border:2px solid #b8d8f5; border-radius:16px; background:#edf6ff; }
.quiz-intro-meaning span { max-width:100%; padding:4px 7px; border-radius:7px; color:#7c5a1d; background:#ffedbe; font-size:calc(12px * var(--fs,1)); font-weight:900; line-height:1.35; text-align:center; }
.quiz-intro-meaning b { color:#1f5e9d; font-size:calc(19px * var(--fs,1)); }
.quiz-intro-example { flex-basis:100%; margin-top:2px; color:#4b6a8c; font-size:calc(12.5px * var(--fs,1)); line-height:1.45; }
.option-grid { width:min(520px,100%); display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.option-grid[data-layout="list"] { grid-template-columns:1fr; }
.option-button { min-height:59px; position:relative; padding:8px 15px; border:2px solid #e1e6ea; border-radius:15px; color:#46576f; background:#fff; cursor:pointer; font-weight:850; transition:.15s; }
.option-button:hover { border-color:#a9caf6; background:#f4f8ff; transform:translateY(-2px); }
.option-button.correct { color:#218063; border-color:#67cfb0; background:#e6f8f2; }.option-button.wrong { color:#b84d47; border-color:#ef948f; background:#fff0ef; }.option-button:disabled { cursor:default; transform:none; }
.option-grid.answered .option-button:not(.correct):not(.wrong) { opacity:.42; border-color:#e7ebef; background:#f7f9fb; }
.option-grid.answered .option-button.correct,
.option-grid.answered .option-button.wrong { opacity:1; }
.spell-form { width:min(520px,100%); }
.spell-input-wrap { display:flex; gap:9px; }
.spell-input-wrap input { min-width:0; flex:1; height:56px; padding:0 17px; border:2px solid #dbe2e8; border-radius:15px; outline:0; color:var(--ink); background:#fff; font-size: calc(21px * var(--fs, 1)); font-weight:850; letter-spacing:.05em; }
.spell-input-wrap input:focus { border-color:#82b2f3; box-shadow:0 0 0 4px rgba(76,142,240,.12); }
.spell-input-wrap button { min-width:100px; border:0; border-radius:15px; color:#fff; background:var(--blue); cursor:pointer; font-size: calc(14px * var(--fs, 1)); font-weight:900; }
.word-answer-help { width:min(520px,100%); display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.word-answer-help:has(> button:not([hidden])) { margin-top:10px; }
.listening-skip,
.word-dont-know { min-height:44px; padding:0 13px; border:0; border-radius:12px; color:#66778a; background:transparent; cursor:pointer; font-size:calc(13.5px * var(--fs,1)); font-weight:850; }
.listening-skip:hover,
.word-dont-know:hover { color:#315f8f; background:#eef5fb; }
.listening-skip:disabled,
.word-dont-know:disabled { cursor:default; opacity:.55; }
.guided-next { min-height:48px; padding:0 20px; border:2px solid #1f5e9d; border-radius:14px; color:#0f3f6d; background:#e2f0ff; cursor:pointer; font-size:calc(14.5px * var(--fs,1)); font-weight:900; }
.guided-next:hover { color:#0b3157; background:#cfe6ff; }
.guided-next:disabled { cursor:default; opacity:.55; }
.answer-feedback { width:min(620px,100%); display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; margin-top:16px; padding:14px 16px; border:1px solid #a8e1cf; border-radius:18px; background:#eaf9f4; text-align:left; }
.answer-feedback.auto-next { grid-template-columns:auto minmax(0,1fr); }
.answer-feedback.wrong { border-color:#f1b3ad; background:#fff2f1; }
.answer-feedback.help { border-color:#b8d8f5; background:#edf6ff; }
.feedback-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:13px; color:#fff; background:var(--green); font-size: calc(20px * var(--fs, 1)); font-weight:950; }.answer-feedback.wrong .feedback-icon { background:var(--red); }.answer-feedback.help .feedback-icon { background:var(--blue); }
.answer-feedback h2 { margin:0; font-size: calc(15px * var(--fs, 1)); }.answer-feedback p { margin:4px 0 0; color:#5f6f81; font-size: calc(13.5px * var(--fs, 1)); }
.feedback-example { display:block; margin-top:7px; color:#52677b; font-size:calc(12.5px * var(--fs,1)); line-height:1.45; }
.answer-feedback button { min-height:42px; padding:0 17px; border:0; border-radius:12px; color:#fff; background:var(--green); cursor:pointer; font-weight:900; }.answer-feedback.wrong button { background:var(--red); }.answer-feedback.help button { background:var(--blue); }
.answer-feedback.auto-next button { display:none; }

.result-view { width:min(680px,100%); margin:22px auto; }
.result-card { position:relative; overflow:hidden; padding:40px; border:1px solid #e2e6e9; border-radius:32px; background:var(--paper); box-shadow:0 18px 50px rgba(39,55,80,.1); text-align:center; }
.result-card:before { content:""; position:absolute; width:220px; height:220px; top:-130px; left:-100px; border:35px solid #eaf3ff; border-radius:50%; }
.result-stars { color:var(--yellow); font-size: calc(23px * var(--fs, 1)); letter-spacing:7px; }.result-stars span { display:inline-block; font-size: calc(36px * var(--fs, 1)); transform:translateY(6px); }
.result-mascot { width:78px; height:78px; display:grid; place-items:center; margin:17px auto 15px; border-radius:27px; background:#fff0d5; font-size: calc(44px * var(--fs, 1)); transform:rotate(-3deg); }
.result-card h1 { margin:9px 0 7px; font-size: calc(27px * var(--fs, 1)); }.result-card > p { margin:0; color:var(--muted); font-size: calc(14.5px * var(--fs, 1)); }
.result-summary { width:fit-content; margin:22px auto; padding:11px 16px; border:1px solid #dce6ef; border-radius:13px; color:var(--blue-dark); background:#f5f9fc; font-size:calc(15px * var(--fs,1)); font-weight:950; }
.trouble-words { padding:13px; border-radius:14px; background:#fff5df; font-size: calc(13.5px * var(--fs, 1)); }.trouble-words > span { color:#8b6a31; }.trouble-words div { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:8px; }.trouble-words b { padding:5px 9px; border-radius:8px; background:#fff; }
.result-actions { width:min(420px,100%); display:grid; grid-template-columns:1fr; gap:4px; margin:22px auto 0; }
.result-stop-action { min-height:44px; justify-self:center; padding:0 16px; border:0; border-radius:12px; color:#667a8e; background:transparent; cursor:pointer; font:inherit; font-weight:850; }
.result-stop-action:hover { color:#315f8f; background:#eef4f8; }
.start-button.compact { min-height:51px; box-shadow:none; }
.toast { position:fixed; z-index:70; left:50%; bottom:28px; max-width:calc(100% - 36px); padding:12px 18px; color:#fff; border-radius:13px; background:#263a55; box-shadow:0 10px 30px rgba(30,44,64,.2); font-size: calc(14px * var(--fs, 1)); font-weight:850; opacity:0; transform:translate(-50%,16px); pointer-events:none; transition:.23s; }.toast.show { opacity:1; transform:translate(-50%,0); }
.theme-dialog { width:min(620px,calc(100% - 30px)); padding:30px; border:3px solid #0e1d35; border-radius:27px; color:#1f304b; background:#fffdf7; box-shadow:10px 10px 0 #081325,0 28px 70px rgba(0,0,0,.4); text-align:center; }.theme-dialog::backdrop { background:rgba(1,8,18,.7); backdrop-filter:blur(5px); }.theme-dialog h2 { margin:7px 0 5px; font-size: calc(24px * var(--fs, 1)); }.theme-dialog > p { margin:0; color:var(--muted); font-size: calc(13.5px * var(--fs, 1)); }.theme-close { position:absolute; top:14px; right:14px; width:40px; height:40px; display:grid; place-items:center; border:2px solid #13213a; border-radius:12px; background:#f0f3f5; cursor:pointer; }.theme-close svg { width:17px; }
.theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:23px 0 17px; }.theme-options > button { padding:8px 8px 13px; border:3px solid #dfe4e8; border-radius:18px; background:#fff; cursor:pointer; }.theme-options > button[aria-pressed="true"] { border-color:#172642; box-shadow:5px 5px 0 #57d9ff; }.theme-options b,.theme-options small { display:block; }.theme-options b { margin-top:9px; font-size: calc(14.5px * var(--fs, 1)); }.theme-options small { margin-top:3px; color:var(--muted); font-size: calc(13px * var(--fs, 1)); }
.theme-swatch { height:85px; display:grid; place-items:center; border:2px solid #13213a; border-radius:13px; overflow:hidden; font-style:normal; }.theme-swatch span { padding:5px 8px; border:2px solid #101d32; background:#ffdc3f; font-family:Impact,"Arial Black",sans-serif; font-size: calc(14px * var(--fs, 1)); transform:rotate(-4deg); }.comic-swatch { color:#09162a; background:radial-gradient(circle,#fff 1px,transparent 1.2px) 0 0/10px 10px,linear-gradient(135deg,#102b57,#48247b); }.candy-swatch { background:radial-gradient(circle at 20% 25%,#fff 0 7px,transparent 8px),linear-gradient(135deg,#ff9fcb,#ffe073,#8de9e1); }.forest-swatch { background:radial-gradient(circle at 80% 20%,#ffd354 0 15px,transparent 16px),linear-gradient(135deg,#1d7654,#9cd66e); }
.sound-setting { min-height:63px; display:flex; align-items:center; gap:15px; padding:10px 14px; border-radius:15px; background:#f1f4f6; text-align:left; cursor:pointer; }.sound-setting > span { display:flex; flex:1; flex-direction:column; }.sound-setting b { font-size: calc(14px * var(--fs, 1)); }.sound-setting small { margin-top:3px; color:var(--muted); font-size: calc(13px * var(--fs, 1)); }.sound-setting input { position:absolute; opacity:0; }.sound-setting > i { width:44px; height:25px; position:relative; border-radius:99px; background:#b7c0ca; transition:.2s; }.sound-setting > i:after { content:""; position:absolute; width:19px; height:19px; top:3px; left:3px; border-radius:50%; background:#fff; transition:.2s; }.sound-setting input:checked + i { background:#4c8ef0; }.sound-setting input:checked + i:after { transform:translateX(19px); }

/* Comic universe visual system */
body {
  background:
    radial-gradient(circle at 13% 13%, rgba(55, 123, 255, .3), transparent 22%),
    radial-gradient(circle at 88% 72%, rgba(156, 72, 255, .22), transparent 24%),
    radial-gradient(circle, rgba(255,255,255,.52) 1px, transparent 1.5px) 0 0 / 37px 37px,
    #071426;
}
.word-topbar { color: #f5f9ff; border-bottom-color: #203653; background: rgba(6,18,36,.92); }
.back-link { color: #a9bfdd; }
.back-link:hover { color: #fff; background: #17345a; }
.word-brand small { color: #8fa7c8; }
.word-brand-mark { color: #071426; border: 2px solid #071426; background: #57d9ff; box-shadow: 4px 4px 0 #7b5cff; }
.top-streak { color: #ffe8a1; border: 1px solid #664722; background: #302513; }
.word-hero { min-height: 310px; color: #fff; border: 3px solid #142d51; background: linear-gradient(118deg, #102c57 0%, #151d48 56%, #44227b 100%); box-shadow: 10px 10px 0 #030a13, 0 22px 46px rgba(0,0,0,.32); }
.word-hero:before { width: 310px; height: 310px; right: -65px; top: -170px; border-color: rgba(98,226,255,.09); }
.word-hero:after { content:""; position:absolute; inset:0; opacity:.13; background-image:radial-gradient(circle,#fff 1.2px,transparent 1.7px); background-size:23px 23px; pointer-events:none; }
.hero-copy { z-index: 5; }
.eyebrow { color: #071426; border: 2px solid #071426; background: #55ddff; box-shadow: 3px 3px 0 #a87cff; transform: rotate(-1deg); }
.word-hero h1 { max-width: 620px; color: #fff; font-weight: 900; text-shadow: none; }
.word-hero p, .hero-goal span { color: #c6d9f5; }
.hero-goal strong { color: #ffdb4d; text-shadow: 2px 2px 0 #853c80; }
.goal-bar { border: 1px solid rgba(255,255,255,.2); background: rgba(4,12,27,.52); }
.goal-bar i { background: linear-gradient(90deg,#ffca3a,#ff6b55,#be5cff); }
.hero-scene { z-index: 3; width: 40%; right: 2%; }
.comic-art { background-image: var(--comic); background-repeat: no-repeat; background-size: 300% 200%; background-position: var(--cx) var(--cy); }
.hero-comic { position: absolute; width: 178px; aspect-ratio: 1; border: 5px solid #fff; border-radius: 25px; box-shadow: 9px 9px 0 #061020, 13px 13px 0 #55d9ff; }
.hero-comic.comic-a { left: 4%; bottom: 27px; transform: rotate(-8deg); }
.hero-comic.comic-b { right: 1%; top: 20px; transform: rotate(8deg); }
.comic-burst, .comic-zap { position:absolute; z-index:5; padding:9px 14px; color:#091529; border:3px solid #091529; background:#ffd43b; clip-path:polygon(5% 19%,20% 20%,24% 2%,40% 17%,53% 0,61% 18%,79% 8%,81% 28%,100% 36%,84% 52%,98% 69%,76% 72%,73% 94%,54% 80%,39% 100%,32% 77%,9% 88%,15% 65%,0 54%,17% 41%); font-family:Impact,"Arial Black",sans-serif; font-size: calc(17px * var(--fs, 1)); letter-spacing:.04em; transform:rotate(-8deg); }
.comic-burst { top:14px; left:42%; }.comic-zap { right:37%; bottom:15px; color:#fff; background:#ff5d70; transform:rotate(8deg); }
.word-tabs { border: 2px solid #203653; background: rgba(10,26,50,.92); box-shadow: 6px 6px 0 #020811; }
.word-tabs [data-view] { color:#94acce; }
.word-tabs [data-view].active { color:#071426; background:#59dfff; box-shadow:4px 4px 0 #7457e8; }
.mission-card, .review-card, .skill-row, .word-list, .history-summary, .history-list { border: 3px solid #0d1c33; box-shadow: 8px 8px 0 #020a14, 0 18px 34px rgba(0,0,0,.2); }
.mission-card { background: radial-gradient(circle at 89% 14%,rgba(255,206,60,.28),transparent 19%), #fffdf7; }
.mission-badge { border: 2px solid #111f38; box-shadow: 4px 4px 0 #9b7ceb; }
.preview-chip { min-width: 108px; padding: 6px 10px 6px 6px; border: 2px solid #172843; color: #243755; background: #fff; box-shadow: 3px 3px 0 #d9e2ec; }
.preview-chip i { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; }
.preview-chip.review { color:#553c9f; background:#f3edff; }
.preview-more { border:2px solid #172843; }
.start-button { color:#071426; border:2px solid #071426; background:linear-gradient(90deg,#ffcf3c,#ff9b45); box-shadow:0 6px 0 #cc6429, 5px 10px 0 #0c1b31; }
.start-button:hover { box-shadow:0 8px 0 #cc6429,7px 13px 0 #0c1b31; }
.start-button:active { box-shadow:0 2px 0 #cc6429,2px 4px 0 #0c1b31; }
.review-card { color:#fff; border-color:#251954; background:radial-gradient(circle at 90% 12%,rgba(92,225,255,.22),transparent 26%),linear-gradient(145deg,#292066,#151f4c); }
.review-card h2 { color:#fff; }.review-card > p,.review-number span { color:#c4c9ee; }.review-number strong { color:#59e2ff; text-shadow:3px 3px 0 #7b3fb0; }.review-rhythm span { color:#aeb8df; }.review-rhythm .done { color:#64e6be; }.review-rhythm i { background:#151e47; }
.skill-row { background:#0d213f; }
.skill-row article { border-color:#294568; }.skill-row b { color:#f4f8ff; }.skill-row small { color:#91a9c8; }.skill-icon { border:2px solid #081426; box-shadow:3px 3px 0 rgba(255,255,255,.14); }
.view-heading h2 { color:#fff; }.word-search { border:2px solid #243c5f; background:#0e2443; }.word-search input { color:#fff; }.word-search input::placeholder { color:#8098ba; }
.word-list,.history-summary,.history-list { background:#fffdf7; }
.challenge-card > button.ready { color:#0c2035; background:#ffdb43; box-shadow:4px 4px 0 #172039; }
.history-summary article strong { text-shadow:2px 2px 0 #cde1ff; }
.session-exit { color:#a9bdd7; }.session-exit:hover { color:#fff; background:#163153; }.session-count { color:#a9bdd7; }.session-progress { border:1px solid #2d496d; background:#0e2039; }.session-progress i { background:linear-gradient(90deg,#57dcff,#7d65ef,#ff5f72); }
.learning-stage > h1 { color:#fff; text-shadow:2px 2px 0 #432f88; }
.quiz-card { position:relative; overflow:hidden; border:3px solid #101e35; background:radial-gradient(circle,rgba(24,42,69,.06) 1.4px,transparent 1.7px) 0 0 / 13px 13px,#fffdf7; box-shadow:10px 10px 0 #020912,0 22px 46px rgba(0,0,0,.28); }
.quiz-card:before { content:""; position:absolute; width:170px; height:170px; right:-90px; top:-90px; border:25px solid rgba(87,220,255,.18); border-radius:50%; }
.quiz-visual { width:170px; height:170px; border:5px solid #102038; border-radius:24px; box-shadow:7px 7px 0 #ffcf3c; font-size:0; }
.quiz-word { font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-weight:950; }
.quiz-sound { border:2px solid #102038; box-shadow:3px 3px 0 #7c62e8; }
.option-button { border:3px solid #162640; box-shadow:4px 4px 0 #cad5df; }.option-button:hover { border-color:#162640; box-shadow:5px 6px 0 #59dfff; }.option-button.correct { border-color:#153c32; box-shadow:4px 4px 0 #57d6b0; }.option-button.wrong { border-color:#6c2724; box-shadow:4px 4px 0 #f27b73; }
.answer-feedback { border-width:3px; box-shadow:5px 5px 0 #17362d; }.answer-feedback.wrong { box-shadow:5px 5px 0 #652b31; }
.result-card { border:3px solid #0d1b31; box-shadow:10px 10px 0 #020913,0 22px 50px rgba(0,0,0,.3); }.result-card h1 { text-shadow:2px 2px 0 #d7e7ff; }

/* Theme: Candy playground */
body[data-theme="candy"] { background:radial-gradient(circle at 8% 18%,rgba(255,255,255,.8) 0 4px,transparent 5px) 0 0/32px 32px,linear-gradient(135deg,#ffe8f3,#fff5cd 48%,#dffaf5); }
body[data-theme="candy"] .word-topbar { color:#263552; border-color:#f1cbdc; background:rgba(255,250,252,.94); }
body[data-theme="candy"] .back-link { color:#8d5c79; } body[data-theme="candy"] .word-brand small { color:#9c7b8f; }
body[data-theme="candy"] .word-brand-mark { background:#ff85b9; box-shadow:4px 4px 0 #ffcd4c; }
body[data-theme="candy"] .top-energy { color:#8f5a13; border-color:#f1bd59; background:#fff0bd; } body[data-theme="candy"] .theme-trigger { color:#8d426d; border-color:#edb4d0; background:#ffe4f0; }
body[data-theme="candy"] .word-hero { border-color:#71345b; background:linear-gradient(120deg,#ff78ad,#a66bed 58%,#57d8d1); box-shadow:10px 10px 0 #6d2e5d; }
body[data-theme="candy"] .word-tabs { border-color:#e1bfd1; background:rgba(255,252,253,.94); box-shadow:6px 6px 0 #e0a8c4; } body[data-theme="candy"] .word-tabs [data-view] { color:#8c6278; } body[data-theme="candy"] .word-tabs [data-view].active { background:#ff83b9; box-shadow:4px 4px 0 #ffce4a; }
body[data-theme="candy"] .review-card { border-color:#6f3c87; background:linear-gradient(145deg,#9d62dd,#f26da5); }
body[data-theme="candy"] .skill-row { border-color:#71345b; background:#8e4a83; box-shadow:8px 8px 0 #6d2e5d; }
body[data-theme="candy"] .view-heading h2,body[data-theme="candy"] .learning-stage>h1 { color:#243451; text-shadow:2px 2px 0 #fff; }
body[data-theme="candy"] .word-search { border-color:#e1b4ca; background:#fff; } body[data-theme="candy"] .word-search input { color:#263552; }
body[data-theme="candy"] .active-library-chip { color:#8d426d; border-color:#edb4d0; background:#ffe4f0; } body[data-theme="candy"] .library-panel { border-color:#71345b; box-shadow:8px 8px 0 #d178a4; } body[data-theme="candy"] .library-mode button.active { background:#ff83b9; box-shadow:3px 3px 0 #ffce4a; }
body[data-theme="candy"] .session-exit,body[data-theme="candy"] .session-count { color:#6d4a61; } body[data-theme="candy"] .session-progress { border-color:#d5a9c1; background:#fff; }

/* Theme: Forest adventure */
body[data-theme="forest"] { background:radial-gradient(circle at 15% 15%,rgba(157,222,109,.2),transparent 25%),radial-gradient(circle,rgba(255,245,194,.35) 1px,transparent 1.5px) 0 0/39px 39px,#0b2b27; }
body[data-theme="forest"] .word-topbar { color:#f3ffe8; border-color:#315d4c; background:rgba(8,39,34,.94); }
body[data-theme="forest"] .word-brand-mark { background:#a8dc58; box-shadow:4px 4px 0 #f0b83f; } body[data-theme="forest"] .top-energy { color:#ffe5a0; border-color:#7c6130; background:#463714; } body[data-theme="forest"] .theme-trigger { color:#d9f5c3; border-color:#47745e; background:#173f35; }
body[data-theme="forest"] .word-hero { border-color:#142f29; background:linear-gradient(120deg,#176449,#214d3a 58%,#9a5b2b); box-shadow:10px 10px 0 #03130f; }
body[data-theme="forest"] .word-tabs { border-color:#315d4c; background:#123a31; box-shadow:6px 6px 0 #03130f; } body[data-theme="forest"] .word-tabs [data-view] { color:#a9ccb8; } body[data-theme="forest"] .word-tabs [data-view].active { color:#10251d; background:#a8dc58; box-shadow:4px 4px 0 #f0b83f; }
body[data-theme="forest"] .review-card { border-color:#3d2713; background:linear-gradient(145deg,#7c4c25,#3f6537); }
body[data-theme="forest"] .skill-row { border-color:#163d32; background:#164638; box-shadow:8px 8px 0 #03130f; }
body[data-theme="forest"] .challenge-card { background:linear-gradient(120deg,#347b4b,#5d9c44); }
body[data-theme="forest"] .view-heading h2,body[data-theme="forest"] .learning-stage>h1 { color:#f3ffe9; text-shadow:2px 2px 0 #1f5b45; }
body[data-theme="forest"] .word-search { border-color:#47745e; background:#123a31; }
body[data-theme="forest"] .active-library-chip { color:#d9f5c3; border-color:#47745e; background:#173f35; } body[data-theme="forest"] .library-panel { border-color:#163d32; box-shadow:8px 8px 0 #03130f; } body[data-theme="forest"] .library-mode button.active { background:#a8dc58; box-shadow:3px 3px 0 #f0b83f; }

button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid rgba(76,142,240,.38); outline-offset:3px; }
[hidden] { display:none !important; }

@media (max-width: 850px) {
  .word-shell { width:min(100% - 28px,680px); margin-top:14px; }
  .word-hero { min-height:260px; align-items:center; padding:28px 25px; }.hero-copy { width:62%; }.hero-scene { width:38%; height:210px; right:2%; }.planet { width:110px; height:110px; right:7%; bottom:15px; }.planet b { font-size: calc(42px * var(--fs, 1)); }.planet i { width:170px; height:44px; }.fox { right:38%; bottom:5px; }.rocket { top:16px; }.word-one { top:20px; }
  .learn-grid { grid-template-columns:1fr; }.skill-row { grid-template-columns:repeat(2,1fr); }.skill-row article:nth-child(2) { border-right:0; }.skill-row article:nth-child(-n+2) { padding-bottom:15px; border-bottom:1px dashed #e3e6e8; }.skill-row article:nth-child(n+3) { padding-top:15px; }
  .word-list { grid-template-columns:repeat(2,1fr); }.word-row:nth-last-child(-n+3) { border-bottom:1px dashed #e7e8e6; }.word-row:nth-last-child(-n+2) { border-bottom:0; }
  .unit-grid,.category-grid { grid-template-columns:repeat(2,1fr); }.library-coverage { grid-template-columns:repeat(3,1fr); }.library-search { grid-column:1/-1; }
}

@media (max-width: 580px) {
  .word-topbar { height:65px; padding:0 14px; grid-template-columns:auto 1fr auto; }.back-link span, .word-brand small { display:none; }.back-link { padding:0 8px; }.word-brand { justify-self:center; }.word-brand-mark { width:39px; height:39px; border-radius:14px; }.word-brand b { font-size: calc(15px * var(--fs, 1)); }.top-streak { padding:7px 8px; }.top-streak b { display:none; }
  .word-hero { min-height:220px; padding:23px 20px; }.hero-copy { width:100%; }.word-hero h1 { font-size: calc(25px * var(--fs, 1)); }.word-hero p { font-size: calc(14px * var(--fs, 1)); line-height:1.55; }.hero-scene { display:none; }.hero-goal { margin-top:16px; }.word-tabs { width:100%; display:grid; grid-template-columns:repeat(2,1fr); margin:15px 0; }.word-tabs [data-view] { justify-content:center; padding:0 4px; font-size: calc(13.5px * var(--fs, 1)); }.word-tabs [data-view] svg { display:none; }
  .mission-card, .review-card { padding:18px; }.mission-actions { grid-template-columns:1fr; }.quick-session-button { min-height:52px; grid-template-columns:auto auto 1fr; justify-content:center; text-align:center; }.quick-session-button>span { grid-row:auto; }.quick-session-button small { justify-self:start; }.word-preview { gap:7px; margin:17px 0; }.preview-chip { min-width:calc(50% - 4px); }.skill-row { grid-template-columns:1fr; }.skill-row article { border-right:0; border-bottom:1px dashed #e3e6e8 !important; padding:13px 6px !important; }.skill-row article:last-child { border-bottom:0 !important; }
  .view-heading { align-items:stretch; flex-direction:column; gap:12px; }.word-search { width:100%; }.word-list { grid-template-columns:1fr; padding:4px 12px; }.word-row, .word-row:nth-last-child(-n+3) { border-bottom:1px dashed #e7e8e6; }.word-row:last-child { border-bottom:0; }
  .history-summary article { min-height:105px; }.history-summary strong { font-size: calc(27px * var(--fs, 1)); }
  .session-header { gap:9px; }.session-exit span { display:none; }.learning-stage { margin-top:10px; }.learning-stage > h1 { margin:10px 0 14px; font-size: calc(20px * var(--fs, 1)); }.quiz-card { min-height:0; padding:20px 15px; border-radius:24px; }.quiz-word { font-size: clamp(calc(26px * var(--fs, 1)),9vw,calc(36px * var(--fs, 1))); }.quiz-card.guided { min-height:0; padding-top:17px; }.quiz-card.guided .quiz-cue { grid-template-columns:84px minmax(0,1fr); gap:14px; margin-bottom:14px; }.quiz-card.guided:not(.has-visual) .quiz-cue { display:flex; text-align:center; }.quiz-card.guided:not(.has-visual) .quiz-cue-copy { align-items:center; }.quiz-card.guided .quiz-visual { width:84px; height:84px; border-width:3px; border-radius:20px; box-shadow:4px 4px 0 #ffcf3c; }.quiz-card.guided .quiz-word { font-size:clamp(calc(24px * var(--fs,1)),8vw,calc(32px * var(--fs,1))); }.quiz-card.guided .quiz-sound { margin-top:7px; padding:7px 10px; }.quiz-intro-meaning { margin-bottom:14px; padding:11px 12px; }.quiz-intro-meaning b { font-size:calc(17px * var(--fs,1)); }.option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.option-button { min-height:55px; padding:8px 9px; overflow-wrap:anywhere; }.answer-feedback { width:100%; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:12px; }.answer-feedback button { grid-column:1/-1; }.answer-feedback.auto-next button { display:none; }.spell-input-wrap { flex-direction:column; }.spell-input-wrap button { min-height:49px; }
  .result-card { padding:31px 19px; }.result-card h1 { font-size: calc(23px * var(--fs, 1)); }
  .library-panel { padding:12px; border-width:2px; box-shadow:5px 5px 0 #020a14; }.library-heading { align-items:stretch; }.active-library-chip { max-width:100%; }.library-mode { width:100%; margin-bottom:13px; }.library-mode button { flex:1; padding:0 8px; }.edition-banner { grid-template-columns:auto 1fr; padding:12px; }.edition-banner label { grid-column:1/-1; justify-content:space-between; }.edition-banner select { min-width:0; flex:1; }.library-coverage { grid-template-columns:repeat(3,1fr); gap:6px; }.library-coverage>span { min-width:0; padding:7px 5px; text-align:center; }.library-coverage>span small { white-space:normal; }.library-search { grid-column:1/-1; }.unit-grid,.category-grid { grid-template-columns:1fr; }.category-intro { align-items:flex-start; flex-direction:column; gap:3px; }
}

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

@media (max-width: 850px) {
  .hero-scene { width: 64%; height: 220px; right: 3%; }
  .hero-comic { width: 135px; border-width: 4px; border-radius: 20px; box-shadow: 7px 7px 0 #061020, 10px 10px 0 #55d9ff; }
  .hero-comic.comic-a { left: 5%; bottom: 18px; }
  .hero-comic.comic-b { right: 0; top: 10px; }
  .comic-burst { left: 43%; top: 0; }.comic-zap { right: 34%; bottom: 3px; }
  .game-row { grid-template-columns:1fr; }
}

@media (max-width: 580px) {
  .theme-trigger b { display:none; }
  .top-actions { gap:5px; }.top-energy,.theme-trigger { min-height:38px; padding:0 8px; }
  .word-hero { min-height:220px; padding:23px 20px; }
  .hero-scene { display:none; }
  .hero-comic { width: 135px; }
  .hero-comic.comic-a { left: 3%; bottom: 5px; }.hero-comic.comic-b { right: 1%; top: 7px; }
  .comic-burst { left: 42%; top: -4px; font-size: calc(14.5px * var(--fs, 1)); }.comic-zap { right: 38%; bottom: 0; font-size: calc(14px * var(--fs, 1)); }
  .preview-chip { min-width: calc(50% - 4px); }
  .study-picture { width:102px; height:102px; }
  .quiz-visual { width:96px; height:96px; }
  .energy-card,.challenge-card { align-items:flex-start; padding:18px 16px; }.game-icon { width:49px; height:49px; font-size: calc(25px * var(--fs, 1)); }.energy-card>button,.challenge-card>button { align-self:center; padding:0 10px; }
  .session-header { grid-template-columns:auto 1fr auto; }.session-count { grid-column:3; grid-row:1; }
  .theme-dialog { padding:27px 17px 20px; }.theme-options { gap:6px; }.theme-options>button { padding:6px 5px 10px; }.theme-swatch { height:66px; }.theme-options b { font-size: calc(13.5px * var(--fs, 1)); }
}

/* 2026-08 layout refresh: textbook-first, calm and quick to switch */
body[data-page="words"] {
  color:#18314f;
  background:linear-gradient(180deg,#f3f7fc 0,#f8fafc 44%,#f2f6fb 100%);
}
body[data-page="words"] .word-topbar {
  color:#18314f;
  border-bottom:1px solid #dce6f0;
  background:rgba(255,255,255,.94);
  box-shadow:0 4px 18px rgba(33,64,98,.05);
}
body[data-page="words"] .back-link { color:#5e7188; }
body[data-page="words"] .back-link:hover { color:#205eae; background:#edf5ff; }
body[data-page="words"] .word-brand small { color:#75879b; }
body[data-page="words"] .word-brand-mark { color:#fff; border:0; background:#347ed6; box-shadow:none; transform:none; }
body[data-page="words"] .top-energy,
body[data-page="words"] .theme-trigger { color:#31506f; border:1px solid #d5e2ee; background:#f4f8fc; box-shadow:none; }
body[data-page="words"] .word-shell { width:min(1240px,calc(100% - 40px)); margin-top:18px; }
body[data-page="words"] .word-hero { display:none; }
body[data-page="words"] .word-tabs {
  position:sticky;
  z-index:20;
  top:84px;
  width:100%;
  max-width:420px;
  margin:0 0 22px;
  padding:5px;
  border:1px solid #dbe5ef;
  border-radius:15px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(35,65,99,.07);
  backdrop-filter:blur(12px);
}
body[data-page="words"] .word-tabs [data-view] { flex:1; justify-content:center; color:#64778c; border-radius:10px; }
body[data-page="words"] .word-tabs [data-view].active { color:#fff; background:#347ed6; box-shadow:none; }
body[data-page="words"] .library-heading { align-items:center; margin-bottom:14px; }
body[data-page="words"] .library-heading h2 { color:#18314f; font-size:clamp(24px,3vw,34px); }
body[data-page="words"] .active-library-chip { max-width:48%; color:#265d97; border:1px solid #c8dcf1; background:#edf6ff; }

.textbook-picker {
  overflow:hidden;
  border:1px solid #d8e4ef;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 32px rgba(39,68,101,.08);
}
.picker-intro,.picker-row { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; align-items:center; padding:18px 20px; }
.picker-intro { color:#fff; background:linear-gradient(120deg,#245ea7,#367fce); }
.picker-row { border-top:1px solid #e4ebf2; }
.picker-intro>div:first-child,.picker-label { display:flex; align-items:center; gap:10px; }
.picker-intro b,.picker-intro small,.picker-label b,.picker-label small { display:block; }
.picker-intro small { color:#d8e9fb; }
.picker-label small { color:#7c8da0; }
.picker-step-number { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; color:#205d9e; background:#eaf4ff; font-weight:950; }
.picker-intro .picker-step-number { color:#1f5f9f; background:#fff; }
.grade-rail,.book-rail,.unit-rail { min-width:0; display:flex; gap:8px; overflow-x:auto; padding:3px 2px 7px; scrollbar-width:thin; }
.grade-rail button,.book-rail button,.unit-rail button { min-height:48px; flex:0 0 auto; padding:7px 14px; border:1px solid #d3dfeb; border-radius:12px; color:#52677e; background:#f8fafc; cursor:pointer; text-align:left; }
.grade-rail button b,.grade-rail button small,.book-rail button b,.book-rail button small,.unit-rail button b,.unit-rail button small { display:block; }
.grade-rail button small,.book-rail button small,.unit-rail button small { margin-top:2px; color:#8494a6; font-size:calc(11.5px * var(--fs,1)); }
.grade-rail button:hover,.book-rail button:hover,.unit-rail button:hover { border-color:#83aed9; background:#f0f7ff; }
.grade-rail button.selected,.book-rail button.selected,.unit-rail button.selected { color:#fff; border-color:#2f76c6; background:#347ed6; box-shadow:0 5px 12px rgba(52,126,214,.2); }
.grade-rail button.selected small,.book-rail button.selected small,.unit-rail button.selected small { color:#e1efff; }
.unit-rail .whole-book { border-style:dashed; }
.unit-rail .whole-book.selected { border-style:solid; }

.selection-workspace { display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr); gap:18px; align-items:start; margin-top:18px; }
.selection-summary,.selection-vocabulary { border:1px solid #d8e4ef; border-radius:22px; background:#fff; box-shadow:0 12px 30px rgba(39,68,101,.07); }
.selection-summary { position:sticky; top:154px; padding:24px; }
.selection-edition { display:inline-flex; padding:6px 9px; border-radius:8px; color:#2865a4; background:#eaf4ff; font-size:calc(12px * var(--fs,1)); font-weight:900; }
.selection-summary h3 { margin:13px 0 7px; color:#173250; font-size:calc(22px * var(--fs,1)); line-height:1.35; }
.selection-summary>p { margin:0; color:#6d8095; font-size:calc(13px * var(--fs,1)); line-height:1.6; }
.selection-counts { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:20px 0 14px; }
.selection-counts span { min-width:0; padding:11px 5px; border-radius:12px; background:#f3f7fb; text-align:center; }
.selection-counts b,.selection-counts small { display:block; }
.selection-counts b { color:#245f9f; font-size:calc(22px * var(--fs,1)); }
.selection-counts small { margin-top:2px; color:#7b8c9f; font-size:calc(11px * var(--fs,1)); }
.daily-scope-note { padding:12px 13px; border-left:4px solid #f2b84b; border-radius:10px; background:#fff8e7; }
.daily-scope-note b,.daily-scope-note span { display:block; }
.daily-scope-note b { color:#7e5311; }
.daily-scope-note span { margin-top:4px; color:#7b6746; }
.selection-actions { display:grid; gap:9px; margin-top:18px; }
.selection-actions .start-button { min-height:50px; color:#fff; border:0; background:#347ed6; box-shadow:0 5px 0 #245d9f; }
.selection-actions .quick-session-button { min-height:50px; width:100%; grid-template-columns:auto 1fr auto; color:#315e86; border:1px solid #bcd3e8; background:#eff7ff; box-shadow:none; }
.selection-actions .quick-session-button>span { grid-row:auto; }

.selection-vocabulary { min-height:560px; padding:22px; }
.selection-vocabulary>header { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px; }
.selection-vocabulary h3 { margin:5px 0 0; color:#173250; font-size:calc(21px * var(--fs,1)); }
.selection-total { padding:7px 10px; border-radius:99px; color:#2d679f; background:#edf6ff; font-size:calc(12px * var(--fs,1)); font-weight:900; }
.selection-vocabulary .library-search { min-height:48px; margin-bottom:10px; border:1px solid #cedce9; background:#f9fbfd; }
.selection-word-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; max-height:680px; overflow:auto; padding:2px 4px 8px 2px; }
.selection-word-row { min-width:0; display:grid; grid-template-columns:auto 42px minmax(0,1fr) auto; gap:9px; align-items:center; min-height:70px; padding:9px 10px; border:1px solid #dfe8f0; border-radius:14px; background:#fff; }
.selection-word-row:hover { border-color:#a9c8e5; background:#f8fbff; }
.selection-word-index { color:#9aaaba; font-size:calc(11px * var(--fs,1)); font-weight:900; }
.selection-word-sound { width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:11px; background:#edf4fa; cursor:pointer; font-size:calc(20px * var(--fs,1)); }
.selection-word-copy { min-width:0; }
.selection-word-copy b,.selection-word-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selection-word-copy b { color:#173250; font-size:calc(15px * var(--fs,1)); }
.selection-word-copy small { margin-top:3px; color:#6f8195; font-size:calc(12px * var(--fs,1)); }
.selection-word-kind { padding:4px 6px; border-radius:7px; color:#648099; background:#eef3f7; font-size:calc(10px * var(--fs,1)); font-style:normal; white-space:nowrap; }
.selection-word-kind.phrase { color:#7a5a1d; background:#fff1c8; }
.selection-empty { padding:24px; color:#718398; text-align:center; }

.secondary-library { margin:0; border:1px solid #d8e4ef; border-radius:18px; background:#fff; }
.secondary-library summary { display:flex; justify-content:space-between; align-items:center; min-height:58px; padding:0 18px; color:#294d72; cursor:pointer; font-weight:900; }
.secondary-library summary small { color:#8090a2; font-weight:700; }
.secondary-library .category-grid { padding:0 18px 18px; }
body[data-page="words"] .library-card { border:1px solid #d9e4ed; box-shadow:none; }
body[data-page="words"] .library-card:hover { border-color:#8ab3d8; box-shadow:0 7px 16px rgba(40,83,123,.1); }
body[data-page="words"] .library-card.selected { border:2px solid #347ed6; background:#edf6ff; box-shadow:none; }
body[data-page="words"] .library-coverage { width:fit-content; grid-template-columns:repeat(3,auto); margin:18px 0 0; }
body[data-page="words"] .library-note { color:#74869a; }

@media (max-width:900px) {
  .picker-intro,.picker-row { grid-template-columns:1fr; gap:10px; }
  .selection-workspace { grid-template-columns:1fr; }
  .selection-summary { position:static; }
  .selection-actions { grid-template-columns:1fr 1fr; }
}

@media (max-width:620px) {
  body[data-page="words"] .word-shell { width:calc(100% - 20px); margin-top:10px; }
  body[data-page="words"] .word-tabs { top:70px; margin-bottom:15px; }
  body[data-page="words"] .word-tabs [data-view] { min-height:48px; font-size:calc(12px * var(--fs,1)); }
  body[data-page="words"] .library-heading { align-items:flex-start; }
  body[data-page="words"] .active-library-chip { max-width:100%; white-space:normal; }
  .textbook-picker { border-radius:17px; }
  .picker-intro,.picker-row { padding:14px; }
  .grade-rail button,.book-rail button,.unit-rail button { min-height:46px; padding:6px 12px; }
  .selection-workspace { gap:12px; margin-top:12px; }
  .selection-summary,.selection-vocabulary { border-radius:17px; }
  .selection-summary { padding:18px; }
  .selection-actions { grid-template-columns:1fr; }
  .selection-vocabulary { min-height:0; padding:15px; }
  .selection-word-list { grid-template-columns:1fr; max-height:none; }
  .selection-word-row { grid-template-columns:auto 40px minmax(0,1fr); }
  .selection-word-kind { grid-column:3; justify-self:start; }
  .secondary-library summary { align-items:flex-start; flex-direction:column; justify-content:center; gap:3px; }
  body[data-page="words"] .library-coverage { width:100%; }
}

/* 2026-08 word focus: one obvious start, textbook details only when needed */
body[data-page="words"] .top-energy,
body[data-page="words"] .theme-trigger { display:none !important; }
.word-mobile-nav { display:none; }

body[data-page="words"] .word-tabs { align-items:stretch; }
body[data-page="words"] .word-tabs > [data-view] { flex:1; }
body[data-page="words"] .word-tabs [data-view] { color:var(--muted) !important; background:transparent !important; }
body[data-page="words"] .word-tabs [data-view].active,
body[data-page="words"] .word-tabs [data-view][aria-current="page"] { color:#fff !important; background:var(--orange,#ff7a45) !important; box-shadow:0 5px 0 var(--orange-dark,#e85c2d) !important; }

.word-start-panel { min-height:214px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.62fr); gap:28px; align-items:center; padding:28px 34px; overflow:hidden; border:1px solid #cfe0ef; border-radius:24px; background:radial-gradient(circle at 93% 8%,rgba(255,211,92,.24),transparent 26%),linear-gradient(120deg,#edf6ff,#fff 62%,#fff9e9); box-shadow:0 13px 32px rgba(35,70,105,.08); }
.word-current-library { display:flex; align-items:center; flex-wrap:wrap; gap:5px; color:#3d78b6; letter-spacing:.05em; }
.word-current-library b { color:#315d87; font-weight:900; letter-spacing:0; }
.word-start-copy h1 { margin:7px 0 6px; color:#173250; font-size:clamp(27px,3.4vw,39px); line-height:1.2; }
.word-start-copy > p { max-width:680px; margin:0; color:#62768b; font-size:calc(14px * var(--fs,1)); line-height:1.65; }
.word-plan-summary { max-width:560px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; color:#4c637b; font-size:calc(13px * var(--fs,1)); }
.word-plan-summary > span { display:flex; align-items:center; gap:7px; }
.word-plan-summary > span:first-child { padding:8px 11px; border:1px solid #d4e4f2; border-radius:12px; background:rgba(255,255,255,.84); }
.word-plan-summary b { color:#245f9f; font-size:calc(14px * var(--fs,1)); }
.word-plan-summary small { color:#71859a; }
.plan-dot { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#4f94dc; box-shadow:0 0 0 4px #e4f1ff; }
.word-start-progress { max-width:560px; height:7px; margin-top:10px; overflow:hidden; border-radius:99px; background:#dfeaf3; }
.word-start-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#347ed6,#67b9d9); transition:width .3s ease; }
.word-start-actions { display:grid; gap:10px; }
.word-start-actions .start-button { min-height:58px; color:#fff; border:0; background:#347ed6; box-shadow:0 5px 0 #245d9f; }

.word-library-tools { display:grid; grid-template-columns:minmax(280px,1fr) minmax(260px,360px); gap:12px; align-items:end; margin:12px 0 16px; }
.book-change-panel { margin:0; padding:12px 14px; border:1px solid #d8e4ef; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(39,68,101,.05); }
.book-range-controls { display:block; }
.book-range-field { min-width:0; display:grid; gap:6px; }
.book-range-field > span { color:#526b83; font-size:calc(12px * var(--fs,1)); font-weight:950; }
.book-range-field select { width:100%; min-height:50px; padding:0 40px 0 13px; border:1px solid #cbdbe9; border-radius:12px; outline:0; color:#173250; background:#f9fbfd; font-size:calc(14px * var(--fs,1)); font-weight:850; }
.book-range-field select:focus { border-color:#347ed6; box-shadow:0 0 0 4px rgba(52,126,214,.12); background:#fff; }
.book-change-current { min-width:0; margin:11px 2px 0; color:#657b91; font-size:calc(12px * var(--fs,1)); line-height:1.55; }
.book-change-current.preview { color:#315f8f; }
.book-search-bar { display:flex; align-items:center; gap:10px; }
.book-search-bar .word-search { width:100%; min-height:50px; }
#bookLibraryMeta { margin:0; padding:7px 10px; border-radius:10px; color:#315f8f; background:#edf6ff; font-size:calc(12px * var(--fs,1)); font-weight:900; }

.word-list.grouped { display:grid; grid-template-columns:1fr; gap:0; padding:0; }
.word-book-path { min-height:76px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 20px; border-bottom:1px solid #dce8f2; background:linear-gradient(105deg,#edf6ff,#f8fbff); }
.word-book-path.current { background:linear-gradient(105deg,#e7f3ff,#f6faff); }
.word-book-path-copy { min-width:0; display:flex; flex-direction:column; }
.word-book-path-copy b { color:#245f9f; font-size:calc(16px * var(--fs,1)); }
.word-book-path-copy small { margin-top:3px; color:#647c93; font-size:calc(12px * var(--fs,1)); line-height:1.45; }
.word-unit-group { border-bottom:1px solid #e2e9f0; }
.word-unit-group:last-child { border-bottom:0; }
.word-unit-head { min-height:60px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 12px 6px 8px; background:#fff; }
.word-unit-group.current .word-unit-head { background:#f3f8ff; }
.word-unit-group.preview .word-unit-head { background:#f8fbff; }
.word-unit-toggle { min-width:0; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px; border:0; border-radius:11px; color:#294d72; background:transparent; text-align:left; cursor:pointer; }
.word-unit-toggle:hover { background:#f4f8fc; }
.word-unit-toggle:focus-visible,.word-unit-start:focus-visible,.word-book-start:focus-visible { outline:3px solid rgba(52,126,214,.28); outline-offset:2px; }
.word-unit-copy { min-width:0; display:flex; align-items:flex-start; flex-direction:column; }
.word-unit-title { min-width:0; font-size:calc(15px * var(--fs,1)); font-weight:900; line-height:1.35; }
.word-unit-hint { flex:0 0 auto; color:#6e8498; font-size:calc(11px * var(--fs,1)); font-weight:800; }
.word-unit-progress { margin-top:3px; color:#7b8c9d; font-size:calc(11px * var(--fs,1)); font-weight:850; line-height:1.35; }
.word-unit-progress[data-state="learning"] { color:#356faa; }
.word-unit-progress[data-state="mastered"] { color:#28785f; }
.word-unit-start,.word-book-start { min-width:74px; min-height:44px; padding:0 13px; border:1px solid #9fc3e5; border-radius:12px; color:#2868a6; background:#edf6ff; cursor:pointer; font-size:calc(13px * var(--fs,1)); font-weight:950; }
.word-unit-start:hover,.word-book-start:hover { border-color:#347ed6; background:#e3f1ff; }
.word-unit-start:active,.word-book-start:active { transform:translateY(1px); }
.word-unit-start:disabled,.word-book-start:disabled { color:#72879b; border-color:#d5e0e9; background:#f3f6f8; cursor:default; transform:none; }
.word-unit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 20px 20px; }
.word-unit-grid[hidden] { display:none; }
.word-unit-grid .word-row { min-width:0; min-height:70px; padding:9px 11px; border:1px solid #e0e8ef !important; border-radius:12px; background:#fff; }
@media (max-width:950px) { .word-unit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

body[data-page="words"] .selection-workspace { grid-template-columns:1fr; margin-top:14px; }
body[data-page="words"] .selection-summary { display:none; }
body[data-page="words"] .selection-vocabulary { min-height:0; }
body[data-page="words"] .library-coverage,
body[data-page="words"] .library-note { display:none; }
.word-list-panel { overflow:hidden; border:1px solid #d8e4ef; border-radius:18px; background:#fff; box-shadow:0 10px 26px rgba(39,68,101,.06); }
.word-list-panel > summary { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 19px; color:#284968; cursor:pointer; list-style:none; }
.word-list-panel > summary::-webkit-details-marker { display:none; }
.word-list-panel > summary > span:first-child { min-width:0; display:flex; flex-direction:column; }
.word-list-panel > summary small { color:#3978b5; font-size:calc(11px * var(--fs,1)); font-weight:900; letter-spacing:.08em; }
.word-list-panel > summary b { margin-top:4px; overflow:hidden; font-size:calc(18px * var(--fs,1)); text-overflow:ellipsis; white-space:nowrap; }
.word-list-summary-end { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.word-list-summary-end i { padding:7px 9px; border-radius:10px; color:#2867a4; background:#edf6ff; font-size:calc(11px * var(--fs,1)); font-style:normal; font-weight:900; }
.word-list-panel[open] > summary { border-bottom:1px solid #dfe8f0; }
.word-list-panel[open] .word-list-summary-end i { font-size:0; }
.word-list-panel[open] .word-list-summary-end i::after { content:"收起词表"; font-size:calc(11px * var(--fs,1)); }
.word-list-panel .selection-vocabulary { border:0; border-radius:0; box-shadow:none; }

@media (max-width:700px) {
  .word-start-panel { min-height:0; grid-template-columns:1fr; gap:20px; padding:22px 18px; border-radius:19px; }
  .word-start-copy h1 { font-size:calc(25px * var(--fs,1)); }
  .word-plan-summary { align-items:flex-start; flex-direction:column; gap:8px; margin-top:15px; }
  .word-plan-summary > span:first-child { width:100%; }
  .word-start-actions { grid-template-columns:1fr; }
  .word-library-tools { grid-template-columns:1fr; }
  .book-change-panel { padding:12px; }
  .book-search-bar { align-items:stretch; flex-direction:column; }
  #bookLibraryMeta { align-self:flex-start; }
  .word-book-path { min-height:72px; padding:9px 12px; }
  .word-book-path-copy small { font-size:calc(11px * var(--fs,1)); }
  .word-book-start { min-width:68px; min-height:44px; padding:0 10px; }
  .word-unit-head { min-height:60px; padding:6px 8px; }
  .word-unit-toggle { min-height:48px; padding:6px 8px; }
  .word-unit-hint { display:none; }
  .word-unit-start { min-width:68px; min-height:44px; padding:0 10px; }
  .word-unit-grid { padding:0 12px 14px; }
  .word-unit-grid { grid-template-columns:1fr; }
  .word-list-panel > summary { min-height:70px; padding:10px 13px; }
  .word-list-summary-end { gap:5px; }
  .word-list-summary-end i { padding:7px; }
  body[data-page="words"] .answer-feedback:not([hidden]) { position:static; width:100%; max-height:none; grid-template-columns:auto minmax(0,1fr); gap:10px; margin-top:14px; padding:12px 13px; overflow:visible; border-width:2px; border-radius:18px; box-shadow:5px 5px 0 #17362d; }
  body[data-page="words"] .answer-feedback.wrong:not([hidden]) { box-shadow:5px 5px 0 #652b31; }
  body[data-page="words"] .answer-feedback > div:nth-child(2) { min-width:0; }
  body[data-page="words"] .answer-feedback button { grid-column:1/-1; min-height:50px; }
}

/* 2026-08-27: direct navigation and one textbook selector */
body[data-word-view="library"] .word-tabs {
  position:sticky;
  top:84px;
  width:100%;
  max-width:420px;
  margin:0 0 15px;
  padding:5px;
  border:1px solid #dbe5ef;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(35,65,99,.07);
}
body[data-word-view="library"] .word-tabs > [data-view="library"] { display:flex; }
@media (max-width:800px) {
  body[data-page="words"] .word-topbar { display:none; }
  body[data-page="words"] { padding-bottom:74px; }
  body[data-page="words"] .word-tabs { top:0; max-width:none; display:grid; grid-template-columns:repeat(2,1fr); }
  .word-mobile-nav { position:fixed; z-index:40; left:0; right:0; bottom:0; height:calc(64px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); padding:4px 5px env(safe-area-inset-bottom); border-top:1px solid #dbe5ef; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }
  .word-mobile-nav a { min-height:54px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; color:#718297; font-size:16px; }
  .word-mobile-nav a b { font-size:10px; }
  .word-mobile-nav a.active { color:#2d71b6; background:#edf5ff; border-radius:13px; }
  html body[data-page="words"] .offline-banner { bottom:82px; }
  html body[data-page="words"] .eye-rest-banner { bottom:86px; }
  html[data-network="offline"] body[data-page="words"] .eye-rest-banner { bottom:174px; }
}

/* 学习与小结使用专注屏：保留题内退出，不让全局顶栏或悬浮伙伴覆盖作答。 */
body[data-page="words"].word-session-active .word-topbar,
body[data-page="words"].word-session-active .study-tools,
body[data-page="words"].word-session-active .word-mobile-nav { display:none !important; }
body[data-page="words"].word-session-active .word-shell { margin-top:8px; }

/* 题内只保留学习线索：浅色背景、低刺激反馈、清楚的退出与继续。 */
body[data-page="words"].word-session-active { color:#20364d; background:#f4f7fb; }
body[data-page="words"].word-session-active .learning-stage > h1 { color:#20364d; text-shadow:none; }
body[data-page="words"].word-session-active .quiz-card { border:1px solid #dce5ed; background:#fff; box-shadow:0 14px 36px rgba(38,65,92,.09); }
body[data-page="words"].word-session-active .quiz-card::before,
body[data-page="words"].word-session-active .result-card::before { display:none; }
body[data-page="words"].word-session-active .option-button { border:2px solid #dce5ed; box-shadow:none; }
body[data-page="words"].word-session-active .option-button:hover { border-color:#9fc4e7; background:#f4f8fc; box-shadow:none; transform:none; }
body[data-page="words"].word-session-active .option-button.correct { border-color:#75cbb0; box-shadow:none; }
body[data-page="words"].word-session-active .option-button.wrong { border-color:#e7a09a; box-shadow:none; }
body[data-page="words"].word-session-active .answer-feedback,
body[data-page="words"].word-session-active .answer-feedback.wrong { border-width:1px; box-shadow:0 8px 22px rgba(38,65,92,.07); }
body[data-page="words"].word-session-active .result-card { border:1px solid #dce5ed; background:#fff; box-shadow:0 16px 38px rgba(38,65,92,.09); }
body[data-page="words"].word-session-active .result-card h1 { text-shadow:none; }
body[data-page="words"].word-session-active .result-mascot { transform:none; }
body[data-page="words"].word-session-active .result-stop-action { color:#61788e; }

@media (max-width:700px) {
  body[data-page="words"].word-session-active .session-exit span { display:inline; }
}

/* 2026-08-27: calm vocabulary surfaces; legacy skins must not compete with the current path. */
body[data-page="words"] .word-tabs [data-view].active,
body[data-page="words"] .word-tabs [data-view][aria-current="page"] {
  color:#fff !important;
  background:#347ed6 !important;
  box-shadow:none !important;
}
body[data-page="words"] .book-search-bar .word-search {
  border:1px solid #cbdbe9;
  background:#fff;
  box-shadow:0 6px 18px rgba(39,68,101,.045);
}
body[data-page="words"] .book-search-bar .word-search:focus-within {
  border-color:#347ed6;
  box-shadow:0 0 0 4px rgba(52,126,214,.12);
}
body[data-page="words"] .book-search-bar .word-search svg { color:#607a94; }
body[data-page="words"] .book-search-bar .word-search input { color:#173250; }
body[data-page="words"] .book-search-bar .word-search input::placeholder { color:#8192a3; }
body[data-page="words"] .word-list {
  border:1px solid #d8e4ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 26px rgba(39,68,101,.06);
}
body[data-page="words"] .word-row {
  border-bottom:1px solid #e4ebf2;
  background:#fff;
}
body[data-page="words"] .word-row.without-speech { grid-template-columns:minmax(0,1fr) auto; }
body[data-page="words"] .word-row-sound[hidden] { display:none !important; }
body[data-page="words"] .word-unit-grid .word-row { box-shadow:none; }