:root {
  --bg: #f1f1f4;
  --surface: #f8f8fa;
  --surface-soft: #f2f2f5;
  --surface-tint: #eeedf2;
  --ink: #363746;
  --ink-soft: #7e7f8b;
  --line: #e1e1e6;
  --accent: #817c9d;
  --accent-dark: #625e7b;
  --accent-pale: #eceaf1;
  --orange: #b69a84;
  --orange-pale: #f4ece6;
  --green: #789586;
  --green-pale: #e9efec;
  --blue: #829aa8;
  --blue-pale: #e9eef1;
  --red: #b88784;
  --shadow: 0 18px 48px rgba(61, 58, 86, 0.075);
  --shadow-small: 0 8px 24px rgba(61, 58, 86, 0.065);
  --radius: 20px;
  --radius-small: 12px;
  --sidebar-width: 248px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(101, 89, 214, .25); outline-offset: 2px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); padding: 30px 18px 22px; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); }
.brand-block { display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-weight: 800; font-size: 18px; background: linear-gradient(135deg, #796fee, #5347bd); box-shadow: 0 7px 15px rgba(101, 89, 214, .28); }
.brand-name { font-weight: 750; letter-spacing: .01em; font-size: 15px; }
.brand-subtitle { margin-top: 3px; font-size: 11px; color: var(--ink-soft); }
.main-nav { display: flex; flex-direction: column; gap: 7px; margin-top: 56px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border-radius: 12px; background: transparent; color: var(--ink-soft); font-size: 13px; text-align: left; transition: .2s ease; }
.nav-item:hover { color: var(--ink); background: var(--surface-soft); }
.nav-item.active { color: var(--accent-dark); font-weight: 650; background: var(--accent-pale); }
.nav-item.active::before { content: ""; position: absolute; left: -18px; top: 11px; height: 20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-icon { width: 18px; color: currentColor; font-size: 17px; line-height: 1; text-align: center; }
.nav-pill { margin-left: auto; min-width: 23px; padding: 3px 6px; border-radius: 7px; color: var(--accent-dark); background: #dad7ff; font-size: 11px; text-align: center; }
.sidebar-footer { margin-top: auto; }
.streak-card { display: flex; align-items: center; gap: 11px; margin: 0 3px 18px; padding: 14px; border-radius: 14px; background: linear-gradient(140deg, #fff7ed, #fff1df); }
.streak-flame { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #e58b45; background: #ffe1be; font-size: 17px; }
.streak-number { font-size: 14px; font-weight: 750; }
.streak-number span { font-size: 19px; }
.muted { color: var(--ink-soft); font-size: 12px; }
.sidebar-note { padding: 0 14px; color: #b0b1c0; font-size: 10px; line-height: 1.65; }

.main-content { width: calc(100% - var(--sidebar-width)); max-width: 1560px; padding: 27px clamp(26px, 4vw, 68px) 70px; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 47px; margin-bottom: 34px; }
.eyebrow { color: #a3a5b6; font-size: 10px; font-weight: 750; letter-spacing: .17em; }
.eyebrow.accent { color: var(--accent); }
.topbar-title { margin-top: 6px; font-size: 14px; font-weight: 650; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: var(--surface); font-size: 17px; transition: .2s ease; }
.icon-button:hover { border-color: #ceccf7; color: var(--accent); background: var(--surface-tint); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-dark); background: var(--accent-pale); font-weight: 750; font-size: 13px; }
.view { display: none; animation: fade-in .25s ease; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.home-hero { display: flex; justify-content: space-between; align-items: center; min-height: 287px; padding: 44px 64px; border-radius: 25px; overflow: hidden; background: radial-gradient(circle at 87% 15%, rgba(255,255,255,.9), transparent 22%), linear-gradient(114deg, #ecebff 0%, #f2f1ff 43%, #f7f6ff 100%); }
.hero-copy h1 { margin: 10px 0 13px; color: #292640; font-size: clamp(28px, 3vw, 42px); font-weight: 720; letter-spacing: -.045em; line-height: 1.14; }
.hero-copy h1 span { color: var(--accent); }
.hero-copy p { margin: 0; color: #797a96; font-size: 13px; }
.hero-actions { display: flex; align-items: center; gap: 21px; margin-top: 28px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 19px; padding: 12px 17px 12px 19px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #7266e5, #574ac5); box-shadow: 0 8px 17px rgba(101, 89, 214, .23); font-size: 12px; font-weight: 650; transition: transform .2s ease, box-shadow .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgba(101, 89, 214, .31); }
.button-arrow { font-size: 17px; line-height: 10px; font-weight: 400; }
.text-button, .small-link { padding: 5px 0; background: transparent; color: var(--accent-dark); font-size: 12px; font-weight: 650; }
.text-button:hover, .small-link:hover { color: var(--accent); }
.hero-progress-wrap { display: flex; flex-direction: column; align-items: center; margin-right: 5%; }
.progress-ring { --progress: 0deg; position: relative; width: 145px; height: 145px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent) var(--progress), rgba(101,89,214,.13) 0); }
.progress-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #f5f4ff; }
.progress-ring-inner { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; }
.progress-ring-number { margin-bottom: 4px; color: var(--accent-dark); font-size: 27px; font-weight: 750; letter-spacing: -.04em; }
.hero-progress-caption { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; color: var(--ink-soft); font-size: 11px; }
.hero-progress-caption strong { color: var(--ink); font-size: 12px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.stat-card { min-height: 116px; padding: 19px 20px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 3px 10px rgba(39, 40, 74, .015); }
.stat-label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; }
.stat-dot, .legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.purple { background: var(--accent); }.orange { background: var(--orange); }.green { background: var(--green); }.blue { background: var(--blue); }
.stat-value { margin-top: 12px; color: var(--ink); font-size: 24px; font-weight: 740; letter-spacing: -.03em; }
.stat-foot { overflow: hidden; margin-top: 2px; color: #b1b2c0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 43px 0 17px; }
.section-heading.compact { margin-top: 38px; }
.section-heading h2, .panel h2 { margin: 7px 0 0; font-size: 16px; letter-spacing: -.02em; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mode-card { position: relative; display: flex; align-items: center; gap: 13px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 15px; text-align: left; background: var(--surface); transition: .2s ease; }
.mode-card:hover, .mode-card.selected { border-color: #cbc8fb; background: #fbfaff; box-shadow: var(--shadow-small); }
.mode-card.selected::after { content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; border-radius: 0 0 3px 3px; background: var(--accent); }
.mode-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; }
.mode-icon.violet { color: var(--accent); background: var(--accent-pale); }.mode-icon.blue { color: #2e94d2; background: var(--blue-pale); }.mode-icon.orange { color: #d98442; background: var(--orange-pale); }
.mode-copy { display: flex; flex-direction: column; gap: 5px; }
.mode-copy strong { font-size: 13px; }.mode-copy small { color: var(--ink-soft); font-size: 10px; }
.mode-check { display: none; margin-left: auto; color: var(--accent); font-size: 13px; font-weight: 750; }
.mode-card.selected .mode-check { display: block; }
.overview-panel { display: grid; grid-template-columns: 1fr 225px; gap: 27px; min-height: 180px; padding: 22px 25px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.week-chart { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 12px; height: 128px; padding-top: 17px; border-bottom: 1px solid var(--line); }
.week-bar-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: end; height: 100%; gap: 8px; }
.week-bar { width: min(18px, 70%); min-height: 4px; border-radius: 6px 6px 0 0; background: #dcdafb; transition: height .3s ease; }
.week-bar.today { background: var(--accent); }.week-bar-value { position: absolute; top: -2px; color: var(--accent-dark); font-size: 9px; font-weight: 700; }.week-bar-day { position: absolute; bottom: -22px; color: #a4a5b3; font-size: 10px; }
.overview-side { display: flex; flex-direction: column; gap: 12px; padding-left: 25px; border-left: 1px solid var(--line); }
.overview-big { padding-bottom: 10px; border-bottom: 1px solid var(--line); }.overview-big span { display: block; font-size: 27px; font-weight: 750; }.overview-big small { color: var(--ink-soft); font-size: 10px; }
.overview-line { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 11px; }.overview-line strong { color: var(--ink); }

.study-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.back-button { padding: 0; background: transparent; color: var(--ink-soft); font-size: 12px; }.back-button:hover { color: var(--accent); }
.study-mode-badge { padding: 6px 11px; border-radius: 7px; color: var(--accent-dark); background: var(--accent-pale); font-size: 11px; font-weight: 650; }
.study-progress-row { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 20px; margin-bottom: 21px; }.study-progress-row strong { display: block; margin-top: 5px; font-size: 17px; }.study-progress-track { height: 6px; margin-bottom: 4px; overflow: hidden; border-radius: 10px; background: #e9e8f8; }.study-progress-track span, .mini-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8478ef, var(--accent)); transition: width .3s ease; }.study-accuracy { min-width: 42px; margin-bottom: 1px; color: var(--green); font-size: 12px; font-weight: 650; text-align: right; }
.study-layout { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 22px; max-width: 1040px; margin: 0 auto; }
.study-main { min-width: 0; }
.word-card { position: relative; min-height: 456px; display: flex; flex-direction: column; padding: 27px 32px; border: 1px solid #e8e6f5; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); transition: transform .25s ease, opacity .25s ease; }.word-card.shake { animation: shake .34s ease; }.word-card.slide-out { opacity: .2; transform: translateX(-20px); }
@keyframes shake { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-7px); } 70% { transform: translateX(7px); } }
.card-toolbar { display: flex; align-items: center; justify-content: space-between; }.card-index { color: #a7a8b7; font-size: 10px; font-weight: 750; letter-spacing: .12em; }.card-actions { display: flex; gap: 7px; }.round-action { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #b1b2bf; background: var(--surface); font-size: 17px; transition: .2s ease; }.round-action:hover, .round-action.active { color: var(--accent); border-color: #d2cff7; background: var(--accent-pale); }
.card-content { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 24px 10px 38px; text-align: center; }.card-word { color: var(--ink); font-size: clamp(35px, 5vw, 58px); font-weight: 760; letter-spacing: -.045em; }.card-phonetic { margin-top: 12px; color: var(--accent); font-size: 15px; letter-spacing: .03em; }.card-meaning { max-width: 560px; margin-top: 28px; color: #555871; font-size: 18px; line-height: 1.65; }.card-meaning strong { color: var(--ink); font-weight: 700; }.card-meaning .meaning-label { display: block; margin-bottom: 6px; color: #aaaaba; font-size: 10px; letter-spacing: .12em; }.card-meaning.hidden { display: none; }
.card-reveal-hint { position: absolute; bottom: 25px; left: 0; right: 0; color: #b2b3c1; font-size: 11px; text-align: center; }.card-reveal-hint.revealed { color: var(--green); }
.keyboard-hint { margin: 14px 0; color: #aaaab8; font-size: 10px; text-align: center; }.keyboard-hint kbd { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin: 0 2px; border: 1px solid #dedee8; border-radius: 5px; color: #7e8092; background: #fff; font-size: 10px; }
.study-feedback { min-height: 24px; color: var(--green); font-size: 12px; text-align: center; }.study-feedback.error { color: var(--red); }
.study-rail { display: flex; flex-direction: column; gap: 15px; }.rail-card { padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.rail-title { color: var(--ink-soft); font-size: 11px; font-weight: 650; }.rail-count { display: flex; align-items: baseline; gap: 6px; margin: 13px 0 12px; }.rail-count strong { font-size: 29px; }.rail-count span { color: var(--ink-soft); font-size: 11px; }.mini-progress { height: 5px; overflow: hidden; border-radius: 8px; background: #ebebf4; }.rail-note { margin-top: 12px; color: #aaaab7; font-size: 10px; line-height: 1.5; }.note-rail { display: flex; flex-direction: column; flex: 1; min-height: 167px; }.note-rail textarea { flex: 1; min-height: 76px; resize: vertical; margin-top: 13px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-soft); font-size: 11px; }.note-rail textarea::placeholder { color: #b7b8c4; }.save-note { align-self: flex-end; margin-top: 9px; padding: 5px 0; color: var(--accent); background: transparent; font-size: 11px; font-weight: 650; }
.answer-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(560px, 100%); margin: 0 auto 7px; }.answer-button { padding: 13px 8px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }.answer-button strong { display: block; font-size: 12px; }.answer-button small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 9px; }.answer-button.again:hover { border-color: #f3b9a9; background: #fff9f7; }.answer-button.hard:hover { border-color: #f0cd9d; background: #fffbf3; }.answer-button.know:hover { border-color: #b4e6d2; background: #f5fffa; }.answer-button.again strong { color: #df766a; }.answer-button.hard strong { color: #d29141; }.answer-button.know strong { color: #29a875; }
.choice-wrap, .spelling-wrap { width: min(610px, 100%); margin: 25px auto 0; }.choice-label, .spelling-label { margin-bottom: 12px; color: #9fa0af; font-size: 10px; letter-spacing: .08em; }.choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.choice-option { min-height: 54px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; color: #53556c; background: var(--surface); font-size: 12px; text-align: left; transition: .2s ease; }.choice-option:hover { border-color: #c8c4f4; background: #fbfaff; }.choice-option.correct { border-color: #9ddcbe; color: #18865e; background: #f2fff8; }.choice-option.wrong { border-color: #efb1aa; color: #c35c56; background: #fff8f7; }.choice-option:disabled { cursor: default; }.spelling-input-row { display: flex; gap: 9px; }.spelling-input { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; font-size: 15px; }.check-spelling { padding: 0 17px; border-radius: 10px; color: #fff; background: var(--accent); font-size: 12px; font-weight: 650; white-space: nowrap; }.spelling-result { min-height: 20px; margin-top: 9px; color: var(--green); font-size: 11px; }.spelling-result.wrong { color: var(--red); }

.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 27px; }.page-heading h1 { margin: 10px 0 8px; font-size: 30px; letter-spacing: -.05em; }.page-heading p { margin: 0; color: var(--ink-soft); font-size: 12px; }.compact-button { padding: 11px 15px; gap: 11px; }
.library-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.search-box { display: flex; align-items: center; gap: 8px; width: min(330px, 100%); padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }.search-box span { color: #a7a8b6; font-size: 19px; line-height: 1; }.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.search-box input::placeholder { color: #b4b5c0; }.filter-tabs { display: flex; align-items: center; gap: 4px; }.filter-tab { padding: 7px 10px; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: 11px; }.filter-tab:hover, .filter-tab.active { color: var(--accent-dark); background: var(--accent-pale); font-weight: 650; }.library-summary { display: flex; justify-content: space-between; margin: 18px 2px 10px; color: var(--ink-soft); font-size: 11px; }.word-list { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }.word-row { display: grid; grid-template-columns: 50px minmax(120px, 1.15fr) minmax(130px, .85fr) minmax(220px, 2fr) 70px; align-items: center; gap: 13px; min-height: 65px; padding: 10px 18px; border-bottom: 1px solid #f0f0f5; transition: .15s ease; }.word-row:last-child { border-bottom: 0; }.word-row:hover { background: #fbfaff; }.word-no { color: #b2b3c1; font-size: 10px; }.word-row-main strong { display: block; color: var(--ink); font-size: 14px; }.word-row-main small, .word-phonetic { display: block; margin-top: 5px; color: var(--accent); font-size: 10px; }.word-meaning { color: #65677c; font-size: 11px; line-height: 1.45; }.word-status { justify-self: end; padding: 5px 8px; border-radius: 6px; font-size: 9px; }.word-status.new { color: #8b8ca0; background: #f1f1f6; }.word-status.learning { color: #cc7b31; background: var(--orange-pale); }.word-status.mastered { color: #19835b; background: var(--green-pale); }.word-favorite { color: #c0c1cc; font-size: 15px; }.word-favorite.active { color: #ed9b51; }.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }.page-button { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: 11px; }.page-button:hover, .page-button.active { color: #fff; background: var(--accent); }.page-button:disabled { cursor: default; opacity: .45; }

.stats-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 22px; }.stats-highlight { min-height: 148px; padding: 23px 24px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #6e62df, #5246b7); box-shadow: 0 10px 27px rgba(101,89,214,.15); }.stats-highlight.warm { color: #6b431f; background: linear-gradient(135deg, #fff1e2, #ffe3c7); box-shadow: none; }.stats-highlight.cool { color: #1d627f; background: linear-gradient(135deg, #e9f6ff, #d9efff); box-shadow: none; }.stats-highlight .stat-label { color: inherit; opacity: .78; }.stats-highlight strong { display: block; margin-top: 19px; font-size: 32px; letter-spacing: -.04em; }.stats-highlight strong small { font-size: 14px; }.stats-highlight-foot { display: block; margin-top: 5px; opacity: .67; font-size: 10px; }
.stats-grid-main { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }.panel { padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }.panel-heading { display: flex; align-items: start; justify-content: space-between; }.panel-heading h2 { margin: 0 0 5px; }.chart-legend { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; }.chart-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }.large-chart { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 16px; height: 200px; margin-top: 25px; padding: 0 5px 26px; border-bottom: 1px solid var(--line); }.large-bar-wrap { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: end; height: 100%; gap: 9px; }.large-bar-track { position: absolute; right: 0; bottom: 25px; left: 0; height: calc(100% - 25px); display: flex; align-items: end; justify-content: center; }.large-bar { width: min(27px, 60%); min-height: 4px; border-radius: 7px 7px 0 0; background: #dedcfb; }.large-bar.today { background: var(--accent); }.large-bar-label { position: absolute; bottom: 3px; color: #a4a5b3; font-size: 10px; }.large-bar-value { position: absolute; top: 0; color: var(--accent-dark); font-size: 9px; font-weight: 700; }.donut-wrap { display: flex; align-items: center; gap: 27px; min-height: 202px; }.donut { --mastery: 0deg; position: relative; width: 142px; height: 142px; display: grid; place-items: center; flex: 0 0 142px; border-radius: 50%; background: conic-gradient(var(--green) var(--mastery), var(--orange) var(--mastery) calc(var(--mastery) + 40deg), #e6e5f5 calc(var(--mastery) + 40deg) 360deg); }.donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--surface); }.donut > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }.donut strong { font-size: 22px; }.donut small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }.donut-legend { flex: 1; }.donut-legend > div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; padding: 10px 0; border-bottom: 1px solid #f0f0f5; color: var(--ink-soft); font-size: 10px; }.donut-legend > div:last-child { border-bottom: 0; }.donut-legend strong { color: var(--ink); font-size: 12px; }.insights-panel { margin-top: 18px; }.insight-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 17px; }.insight-item { display: flex; gap: 10px; padding: 13px; border-radius: 11px; background: var(--surface-soft); }.insight-icon { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 26px; border-radius: 8px; color: var(--accent); background: var(--accent-pale); font-size: 13px; }.insight-item strong { display: block; font-size: 11px; }.insight-item p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 19px; }.settings-panel { padding: 0; }.settings-section { padding: 25px 28px; }.settings-section-title h2 { margin: 0 0 7px; font-size: 15px; }.settings-section-title .muted { display: block; }.goal-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }.goal-options button { padding: 14px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: var(--surface); font-size: 19px; font-weight: 700; }.goal-options button small { display: block; margin-top: 4px; color: inherit; font-size: 10px; font-weight: 400; }.goal-options button:hover, .goal-options button.selected { border-color: #e8c46d; color: #775b19; background: #fff7d9; }.custom-plan-row { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 12px; border: 1px solid #eee1bd; border-radius: 11px; background: #fffdf5; }.custom-plan-row[hidden] { display: none; }.custom-plan-row label { color: var(--ink-soft); font-size: 11px; }.custom-plan-row input { width: 100%; min-height: 34px; padding: 7px 10px; border: 1px solid #e5d7ae; border-radius: 8px; color: var(--ink); background: #fff; }.plan-summary { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; padding: 13px 14px; border: 1px solid #e5e5e9; border-radius: 11px; background: var(--surface-soft); }.plan-summary strong { font-size: 12px; }.plan-summary span { color: var(--ink-soft); font-size: 10px; line-height: 1.55; }.plan-summary small { color: #96929a; font-size: 9px; line-height: 1.55; }.plan-summary.compact { border-color: #efd592; background: linear-gradient(135deg, #fffaf0, #fff4cc); }.plan-summary.compact strong { color: #896819; }.settings-divider { height: 1px; background: var(--line); }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid #f0f0f5; }.setting-row:last-child { border-bottom: 0; }.setting-row span { display: flex; flex-direction: column; gap: 5px; }.setting-row strong { font-size: 12px; }.setting-row small { color: var(--ink-soft); font-size: 10px; }.switch { position: relative; appearance: none; width: 38px; height: 22px; flex: 0 0 38px; border-radius: 20px; background: #d8d8e3; cursor: pointer; transition: .2s ease; }.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: .2s ease; }.switch:checked { background: var(--accent); }.switch:checked::after { transform: translateX(16px); }.data-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }.outline-button { padding: 9px 12px; border: 1px solid #d8d7e8; border-radius: 9px; color: var(--accent-dark); background: var(--surface); font-size: 11px; }.outline-button:hover { border-color: var(--accent); background: var(--accent-pale); }.danger-outline { color: #c76565; }.danger-outline:hover { border-color: #efb4b4; background: #fff7f7; }.settings-aside { display: flex; flex-direction: column; gap: 15px; }.tip-card { padding: 24px 22px; border-radius: 17px; color: #453f82; background: linear-gradient(135deg, #e9e7ff, #f4f2ff); }.tip-icon { width: 33px; height: 33px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 10px; color: var(--accent); background: #d6d2ff; font-size: 17px; }.tip-card h3 { margin: 0 0 10px; font-size: 14px; }.tip-card p { margin: 0; color: #77719f; font-size: 11px; line-height: 1.7; }.source-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 21px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }.source-kicker { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .1em; }.source-card strong { line-height: 1.45; font-size: 13px; }.source-card span { color: var(--ink-soft); font-size: 10px; }.source-card small { margin-top: 8px; color: #b0b1bd; font-size: 9px; }

.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(32, 31, 53, .35); backdrop-filter: blur(4px); }.modal-backdrop[hidden] { display: none; }.modal { position: relative; width: min(480px, 100%); padding: 27px; border-radius: 20px; background: var(--surface); box-shadow: 0 25px 70px rgba(36,32,82,.2); }.modal-close { position: absolute; top: 15px; right: 17px; width: 28px; height: 28px; border-radius: 8px; color: #a5a6b4; background: transparent; font-size: 21px; }.modal-close:hover { color: var(--ink); background: var(--surface-soft); }.modal h2 { margin: 9px 0 5px; font-size: 30px; letter-spacing: -.04em; }.modal-phonetic { color: var(--accent); font-size: 13px; }.modal-meaning { margin-top: 22px; padding: 16px; border-radius: 11px; color: #55576d; background: var(--surface-soft); font-size: 13px; line-height: 1.7; }.modal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }.modal-meta div { padding: 10px; border-radius: 9px; background: var(--surface-soft); }.modal-meta small { display: block; color: #aaaaba; font-size: 9px; }.modal-meta strong { display: block; margin-top: 5px; font-size: 12px; }.modal-note { margin-top: 17px; }.modal-note label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 10px; }.modal-note textarea { width: 100%; min-height: 68px; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; font-size: 11px; }.modal-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.empty-state { padding: 50px 20px; color: var(--ink-soft); text-align: center; }.empty-state strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 14px; }.no-results { padding: 35px; color: var(--ink-soft); text-align: center; font-size: 12px; }
#toast-root { position: fixed; z-index: 40; top: 23px; left: 50%; transform: translateX(-50%); pointer-events: none; }.toast { padding: 10px 15px; border: 1px solid #d9d6f8; border-radius: 10px; color: var(--accent-dark); background: #fff; box-shadow: var(--shadow-small); font-size: 12px; animation: toast-in .25s ease, toast-out .3s ease 2.7s forwards; }.toast.error { color: #bd5d5d; border-color: #f3caca; }.toast.success { color: #258d65; border-color: #c3ead8; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

body.dark { --bg: #1b1c2a; --surface: #252638; --surface-soft: #2b2c40; --surface-tint: #302d55; --ink: #f1f0fb; --ink-soft: #a8a8bd; --line: #393a51; --accent-pale: #363267; --orange-pale: #503a2b; --green-pale: #244a3d; --blue-pale: #283f50; --shadow: 0 18px 48px rgba(0,0,0,.18); --shadow-small: 0 8px 24px rgba(0,0,0,.18); }
body.dark .sidebar, body.dark .word-card, body.dark .modal, body.dark .stat-card, body.dark .mode-card, body.dark .overview-panel, body.dark .rail-card, body.dark .panel, body.dark .settings-panel, body.dark .source-card, body.dark .word-list, body.dark .icon-button { background: var(--surface); }
body.dark .home-hero { background: radial-gradient(circle at 87% 15%, rgba(100,93,180,.4), transparent 22%), linear-gradient(114deg, #302c5a 0%, #292841 100%); }.dark .hero-copy h1 { color: #f2f1ff; }.dark .progress-ring::before { background: #292844; }.dark .progress-ring { background: conic-gradient(var(--accent) var(--progress), #3b3865 0); }.dark .spelling-input, .dark .choice-option, .dark .modal-note textarea, .dark .answer-button { color: var(--ink); background: var(--surface); }

@media (max-width: 1080px) {
  :root { --sidebar-width: 210px; }
  .main-content { padding-right: 28px; padding-left: 28px; }
  .home-hero { padding: 39px 44px; }.hero-progress-wrap { margin-right: 1%; }
  .word-row { grid-template-columns: 40px minmax(110px, 1fr) minmax(120px, .75fr) minmax(180px, 1.5fr) 65px; }
}
@media (max-width: 820px) {
  .app-shell { display: block; }.sidebar { position: sticky; z-index: 20; top: 0; width: 100%; height: auto; padding: 11px 14px; border-right: 0; border-bottom: 1px solid var(--line); }.brand-block { padding: 0 4px; }.brand-mark { width: 31px; height: 31px; border-radius: 10px; font-size: 15px; }.brand-subtitle, .sidebar-footer { display: none; }.main-nav { flex-direction: row; gap: 3px; margin: 10px 0 0; overflow-x: auto; }.nav-item { justify-content: center; gap: 5px; min-width: max-content; padding: 8px 9px; font-size: 11px; }.nav-item.active::before { display: none; }.nav-icon { font-size: 14px; }.nav-pill { min-width: 19px; padding: 2px 4px; font-size: 9px; }.main-content { width: 100%; padding: 22px 16px 48px; }.topbar { margin-bottom: 23px; }.topbar-title { font-size: 12px; }.home-hero { min-height: 250px; padding: 30px 25px; }.hero-copy h1 { font-size: 30px; }.hero-copy p { max-width: 330px; line-height: 1.5; }.hero-progress-wrap { margin-right: 0; }.progress-ring { width: 112px; height: 112px; }.progress-ring-number { font-size: 21px; }.stat-grid { grid-template-columns: 1fr 1fr; }.mode-grid { grid-template-columns: 1fr; }.mode-card { padding: 13px 16px; }.overview-panel { grid-template-columns: 1fr; }.overview-side { flex-direction: row; flex-wrap: wrap; padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }.overview-big { width: 100%; }.overview-line { flex: 1; min-width: 140px; }.study-layout { grid-template-columns: 1fr; }.study-rail { display: grid; grid-template-columns: 1fr 1fr; }.note-rail { min-height: 145px; }.library-toolbar { align-items: stretch; flex-direction: column; }.search-box { width: 100%; }.filter-tabs { overflow-x: auto; }.filter-tab { white-space: nowrap; }.word-row { grid-template-columns: 35px 1fr auto; gap: 9px; }.word-phonetic { display: none; }.word-meaning { grid-column: 2 / 3; }.word-status { grid-column: 3; grid-row: 1 / span 2; }.word-favorite { display: none; }.stats-grid-main, .settings-layout { grid-template-columns: 1fr; }.insight-list { grid-template-columns: 1fr; }.settings-aside { display: grid; grid-template-columns: 1fr 1fr; }.donut-wrap { justify-content: center; }.page-heading h1 { font-size: 26px; }
}
@media (max-width: 560px) {
  .topbar-actions .icon-button { display: none; }.home-hero { align-items: flex-start; flex-direction: column; gap: 24px; }.hero-progress-wrap { align-self: center; flex-direction: row; gap: 16px; }.hero-progress-caption { flex-direction: column; align-items: flex-start; margin-top: 0; }.hero-actions { gap: 15px; }.stat-card { padding: 15px; }.stat-value { font-size: 21px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 31px; }.study-progress-row { grid-template-columns: auto 1fr; gap: 10px; }.study-accuracy { grid-column: 2; justify-self: end; margin-top: -19px; }.study-progress-track { grid-column: 1 / -1; grid-row: 2; }.word-card { min-height: 440px; padding: 20px 18px; }.card-word { font-size: 42px; }.card-meaning { font-size: 16px; }.answer-actions { gap: 6px; }.answer-button { padding: 10px 5px; }.answer-button small { font-size: 8px; }.choice-options { grid-template-columns: 1fr; }.spelling-input-row { flex-direction: column; }.check-spelling { min-height: 40px; }.study-rail { grid-template-columns: 1fr; }.note-rail { min-height: 130px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 17px; }.stats-hero-grid { grid-template-columns: 1fr; }.stats-highlight { min-height: 112px; padding: 17px 20px; }.stats-highlight strong { margin-top: 10px; }.large-chart { gap: 5px; }.donut-wrap { align-items: flex-start; flex-direction: column; }.settings-aside { grid-template-columns: 1fr; }.goal-options { gap: 6px; }.goal-options button { font-size: 16px; }.settings-section { padding: 21px 18px; }.data-actions { flex-direction: column; align-items: stretch; }.outline-button { text-align: center; }
}

/* Study completion and theme refinements */
.completion-card { min-height: 456px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 35px; border: 1px solid #e8e6f5; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.completion-spark { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 17px; color: var(--accent); background: var(--accent-pale); font-size: 25px; }
.completion-card h1 { margin: 10px 0 10px; font-size: 25px; letter-spacing: -.04em; }
.completion-card p { max-width: 420px; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.completion-stats { display: flex; gap: 38px; margin: 27px 0 5px; }.completion-stats div { display: flex; align-items: center; flex-direction: column; gap: 5px; }.completion-stats strong { color: var(--accent-dark); font-size: 22px; }.completion-stats span { color: var(--ink-soft); font-size: 10px; }.completion-actions { display: flex; align-items: center; gap: 18px; margin-top: 25px; }
body.dark .hero-copy h1 { color: #f2f1ff; }
body.dark .progress-ring::before { background: #292844; }
body.dark .progress-ring { background: conic-gradient(var(--accent) var(--progress), #3b3865 0); }
body.dark .spelling-input, body.dark .choice-option, body.dark .modal-note textarea, body.dark .answer-button { color: var(--ink); background: var(--surface); }
body.dark .word-row:hover, body.dark .mode-card:hover, body.dark .mode-card.selected { background: #2b2a43; }
@media (min-width: 821px) { .word-row-main small { display: none; } }
@media (max-width: 820px) { .word-row-main small { display: block; } }

.flashcard-self-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(560px, 100%); margin: 34px auto 0; }
.flashcard-self-button { min-height: 66px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; transition: .2s ease; }
.flashcard-self-button strong { display: block; font-size: 14px; }
.flashcard-self-button small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 10px; }
.flashcard-self-button.not-known strong { color: #d97067; }
.flashcard-self-button.known strong { color: #28a575; }
.flashcard-self-button.not-known:hover { border-color: #efb1aa; background: #fff8f7; }
.flashcard-self-button.known:hover { border-color: #a9e0c7; background: #f4fff9; }
.definition-actions { display: flex; justify-content: space-between; gap: 12px; width: min(560px, 100%); margin: 26px auto 0; }
.definition-action { min-width: 145px; padding: 12px 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-align: center; transition: .2s ease; }
.definition-action strong { display: block; font-size: 13px; }
.definition-action small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 9px; }
.definition-action.undo { color: #d97067; }.definition-action.undo:hover { border-color: #efb1aa; background: #fff8f7; }
.definition-action.continue { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7266e5, #574ac5); box-shadow: 0 7px 15px rgba(101, 89, 214, .2); }.definition-action.continue small { color: rgba(255,255,255,.72); }.definition-action.continue:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(101, 89, 214, .28); }
body.dark .flashcard-self-button, body.dark .definition-action.undo { background: var(--surface); }
body.dark .flashcard-self-button.not-known:hover, body.dark .definition-action.undo:hover { background: #3d2e35; }
body.dark .flashcard-self-button.known:hover { background: #2c453a; }
@media (max-width: 560px) { .flashcard-self-actions, .definition-actions { gap: 8px; margin-top: 22px; }.flashcard-self-button, .definition-action { min-height: 58px; padding: 10px 7px; }.definition-action { min-width: 0; flex: 1; } }

/* Liquid-glass focus theme */
:root {
  --glass-surface: rgba(248, 248, 250, .66);
  --glass-surface-strong: rgba(248, 248, 250, .8);
  --glass-border: rgba(255, 255, 255, .68);
  --glass-shadow: 0 22px 64px rgba(61, 58, 86, .08), inset 0 1px 0 rgba(255, 255, 255, .72);
}

html {
  background: #eeedf1;
}

body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 74% 13%, rgba(170, 163, 194, .13), transparent 30%),
    radial-gradient(circle at 20% 85%, rgba(151, 181, 190, .1), transparent 34%),
    linear-gradient(145deg, #f5f4f6 0%, #eeedf1 55%, #f3f2f4 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 45% 55% 60% 40% / 50% 40% 60% 50%;
  filter: blur(70px);
  pointer-events: none;
}

body::before {
  top: -170px;
  right: 8%;
  background: rgba(157, 150, 181, .09);
}

body::after {
  bottom: -210px;
  left: 15%;
  background: rgba(130, 168, 179, .075);
}

.sidebar {
  position: relative;
  z-index: 3;
  background: rgba(246, 246, 248, .64);
  border-right-color: rgba(255, 255, 255, .62);
  box-shadow: 14px 0 48px rgba(61, 58, 86, .045), inset -1px 0 0 rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}

.main-content {
  position: relative;
  z-index: 1;
}

.home-hero {
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, .66), transparent 27%),
    linear-gradient(125deg, rgba(237, 235, 242, .78), rgba(248, 248, 250, .56));
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  backdrop-filter: blur(30px) saturate(145%);
}

.stat-card,
.mode-card,
.overview-panel,
.rail-card,
.panel,
.settings-panel,
.source-card,
.word-list,
.search-box,
.icon-button,
.modal,
.completion-card {
  border-color: var(--glass-border);
  background: var(--glass-surface);
  box-shadow: 0 14px 38px rgba(63, 57, 116, .07), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

.nav-item.active {
  color: var(--accent-dark);
  background: linear-gradient(135deg, rgba(228, 225, 235, .82), rgba(246, 245, 248, .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), 0 7px 18px rgba(76, 71, 105, .06);
}

.streak-card {
  border: 1px solid rgba(255, 255, 255, .72);
  background: linear-gradient(140deg, rgba(255, 246, 229, .78), rgba(255, 255, 255, .52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.word-card {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 32px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .7), transparent 34%),
    linear-gradient(145deg, rgba(248, 248, 250, .84), rgba(238, 238, 242, .58));
  box-shadow:
    0 28px 72px rgba(61, 58, 86, .095),
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -1px 0 rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
}

.word-card::before {
  content: "";
  position: absolute;
  top: -48%;
  left: 7%;
  width: 82%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .78), transparent 66%);
  pointer-events: none;
}

.word-card > * {
  position: relative;
  z-index: 1;
}

.card-content {
  padding: 34px 12px 60px;
}

.card-word {
  max-width: 100%;
  color: #30313d;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(56px, 6.6vw, 84px);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.card-phonetic {
  margin-top: 18px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.card-meaning {
  margin-top: 32px;
  font-size: 20px;
}

.card-meaning strong {
  font-weight: 500;
}

.round-action,
.study-mode-badge,
.keyboard-hint kbd {
  border: 1px solid rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 6px 18px rgba(62, 56, 111, .06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.flashcard-self-actions,
.definition-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: min(660px, 100%);
  margin: 42px auto 0;
}

.flashcard-self-button,
.definition-action {
  position: relative;
  min-width: 0;
  min-height: 92px;
  overflow: hidden;
  padding: 17px 22px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 22px;
  background: rgba(255, 255, 255, .46);
  box-shadow: 0 15px 32px rgba(61, 55, 108, .09), inset 0 1px 0 rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.flashcard-self-button::before,
.definition-action::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 12%;
  width: 76%;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  filter: blur(12px);
  pointer-events: none;
}

.flashcard-self-button strong,
.definition-action strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: .01em;
}

.flashcard-self-button small,
.definition-action small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 11px;
}

.flashcard-self-button.not-known,
.definition-action.undo {
  color: #9f7371;
  border-color: rgba(255, 255, 255, .86);
  background: linear-gradient(145deg, rgba(248, 248, 250, .72), rgba(239, 229, 229, .5));
}

.flashcard-self-button.known,
.definition-action.continue {
  color: #fff;
  border-color: rgba(255, 255, 255, .36);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .25), transparent 38%),
    linear-gradient(135deg, rgba(132, 126, 161, .96), rgba(99, 94, 128, .95));
  box-shadow: 0 16px 34px rgba(75, 70, 103, .2), inset 0 1px 0 rgba(255, 255, 255, .34);
}

.flashcard-self-button.known small,
.definition-action.continue small {
  color: rgba(255, 255, 255, .74);
}

.flashcard-self-button:hover,
.definition-action:hover {
  transform: translateY(-2px);
}

.flashcard-self-button.not-known:hover,
.definition-action.undo:hover {
  border-color: rgba(183, 143, 141, .42);
  background: linear-gradient(145deg, rgba(250, 250, 251, .8), rgba(237, 224, 224, .6));
  box-shadow: 0 18px 36px rgba(116, 81, 80, .09), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.flashcard-self-button.known:hover,
.definition-action.continue:hover {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .3), transparent 38%),
    linear-gradient(135deg, #8b85a8, #67627f);
  box-shadow: 0 20px 40px rgba(75, 70, 103, .24), inset 0 1px 0 rgba(255, 255, 255, .38);
}

.card-reveal-hint {
  bottom: 29px;
  font-size: 11px;
}

.rail-card textarea {
  border-color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.dark {
  --glass-surface: rgba(35, 36, 55, .62);
  --glass-surface-strong: rgba(39, 40, 61, .76);
  --glass-border: rgba(255, 255, 255, .09);
  background:
    radial-gradient(circle at 74% 13%, rgba(101, 86, 208, .21), transparent 30%),
    radial-gradient(circle at 20% 85%, rgba(53, 140, 171, .13), transparent 32%),
    linear-gradient(145deg, #181925, #202132 58%, #1a1b29);
}

body.dark .sidebar,
body.dark .word-card,
body.dark .modal,
body.dark .stat-card,
body.dark .mode-card,
body.dark .overview-panel,
body.dark .rail-card,
body.dark .panel,
body.dark .settings-panel,
body.dark .source-card,
body.dark .word-list,
body.dark .icon-button,
body.dark .completion-card {
  border-color: var(--glass-border);
  background: var(--glass-surface);
}

body.dark .word-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .055), transparent 34%),
    linear-gradient(145deg, rgba(43, 44, 66, .78), rgba(30, 31, 47, .56));
}

body.dark .card-word {
  color: #f1f2f8;
}

body.dark .flashcard-self-button.not-known,
body.dark .definition-action.undo {
  background: linear-gradient(145deg, rgba(52, 52, 72, .76), rgba(72, 42, 51, .48));
}

body.dark .flashcard-self-button.known,
body.dark .definition-action.continue {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .13), transparent 38%),
    linear-gradient(135deg, rgba(116, 102, 226, .95), rgba(78, 65, 180, .94));
}

.brand-mark {
  background: linear-gradient(135deg, #938da8, #716b84);
  box-shadow: 0 7px 15px rgba(78, 73, 101, .18);
}

.primary-button {
  background: linear-gradient(135deg, #8a849f, #69647e);
  box-shadow: 0 8px 17px rgba(75, 70, 96, .17);
}

.primary-button:hover {
  box-shadow: 0 11px 22px rgba(75, 70, 96, .22);
}

.nav-pill {
  background: #e3e1e9;
}

.study-progress-track {
  background: #e3e2e8;
}

.study-progress-track span,
.mini-progress span {
  background: linear-gradient(90deg, #aaa6b8, var(--accent));
}

.mode-icon.violet {
  color: #77728f;
  background: #e9e7ee;
}

.mode-icon.blue {
  color: #718a98;
  background: #e8edef;
}

.mode-icon.orange {
  color: #9f846f;
  background: #f1eae5;
}

.stats-highlight {
  background: linear-gradient(135deg, #89839f, #69647d);
  box-shadow: 0 10px 27px rgba(74, 69, 96, .12);
}

@media (max-width: 820px) {
  .sidebar {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(25px) saturate(145%);
    backdrop-filter: blur(25px) saturate(145%);
  }

  body.dark .sidebar {
    background: rgba(31, 32, 49, .75);
  }
}

@media (max-width: 560px) {
  .word-card {
    min-height: 485px;
    border-radius: 27px;
  }

  .card-word {
    font-size: clamp(48px, 15vw, 64px);
    line-height: 1.08;
  }

  .flashcard-self-actions,
  .definition-actions {
    gap: 10px;
    margin-top: 30px;
  }

  .flashcard-self-button,
  .definition-action {
    min-height: 78px;
    padding: 13px 8px;
    border-radius: 18px;
  }

  .flashcard-self-button strong,
  .definition-action strong {
    font-size: 16px;
  }

  .flashcard-self-button small,
  .definition-action small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flashcard-self-button,
  .definition-action,
  .word-card {
    transition: none;
  }
}

/* Mango + white theme */
:root {
  --bg: #fff8e8;
  --surface: #ffffff;
  --surface-soft: #fffaf0;
  --surface-tint: #fff4d6;
  --ink: #342d23;
  --ink-soft: #7b6d5b;
  --line: #f0dfbd;
  --accent: #eeb145;
  --accent-dark: #95631f;
  --accent-pale: #fff0bd;
  --orange: #e8a83d;
  --orange-pale: #fff1c8;
  --green: #8d9a6d;
  --green-pale: #f0f3e7;
  --blue: #9aa9a4;
  --blue-pale: #eff3f1;
  --red: #b68a70;
  --glass-surface: rgba(255, 255, 255, .78);
  --glass-surface-strong: rgba(255, 255, 255, .9);
  --glass-border: rgba(255, 247, 221, .95);
  --glass-shadow: 0 22px 64px rgba(127, 87, 25, .085), inset 0 1px 0 rgba(255, 255, 255, .96);
  --shadow: 0 18px 48px rgba(127, 87, 25, .08);
  --shadow-small: 0 8px 24px rgba(127, 87, 25, .07);
}

html {
  background: #fff8e8;
}

body {
  background:
    radial-gradient(circle at 78% 10%, rgba(255, 207, 96, .18), transparent 30%),
    radial-gradient(circle at 15% 88%, rgba(255, 224, 151, .16), transparent 34%),
    linear-gradient(145deg, #fffdf8 0%, #fff8e8 58%, #fffaf0 100%);
}

body::before {
  background: rgba(255, 193, 66, .12);
}

body::after {
  background: rgba(255, 220, 139, .11);
}

.sidebar {
  background: rgba(255, 255, 255, .8);
  border-right-color: rgba(246, 218, 158, .52);
  box-shadow: 14px 0 48px rgba(126, 86, 24, .045), inset -1px 0 0 rgba(255, 255, 255, .9);
}

.home-hero {
  border-color: rgba(255, 238, 192, .94);
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, .82), transparent 28%),
    linear-gradient(125deg, rgba(255, 240, 193, .82), rgba(255, 255, 255, .72));
  box-shadow: 0 22px 60px rgba(126, 86, 24, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.stat-card,
.mode-card,
.overview-panel,
.rail-card,
.panel,
.settings-panel,
.source-card,
.word-list,
.search-box,
.icon-button,
.modal,
.completion-card {
  border-color: rgba(247, 226, 181, .78);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 14px 38px rgba(126, 86, 24, .055), inset 0 1px 0 rgba(255, 255, 255, .98);
}

.nav-item.active {
  color: #855818;
  background: linear-gradient(135deg, rgba(255, 233, 170, .9), rgba(255, 249, 231, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 7px 18px rgba(145, 96, 19, .07);
}

.nav-pill {
  color: #855818;
  background: #ffe8a8;
}

.brand-mark {
  color: #513712;
  background: linear-gradient(135deg, #ffd772, #efad38);
  box-shadow: 0 7px 15px rgba(166, 108, 18, .18);
}

.avatar {
  color: #855818;
  background: #ffefbd;
}

.primary-button {
  color: #4c3513;
  background: linear-gradient(135deg, #ffd36a, #edaa36);
  box-shadow: 0 8px 17px rgba(169, 107, 13, .17);
}

.primary-button:hover {
  box-shadow: 0 11px 22px rgba(169, 107, 13, .23);
}

.progress-ring {
  background: conic-gradient(var(--accent) var(--progress), rgba(226, 174, 74, .16) 0);
}

.progress-ring::before {
  background: #fffaf0;
}

.word-card {
  border-color: rgba(255, 239, 198, .95);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .96), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 249, 232, .76));
  box-shadow:
    0 28px 72px rgba(126, 86, 24, .095),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 236, 184, .42);
}

.card-word {
  color: #2f2921;
}

.card-phonetic,
.eyebrow.accent,
.text-button,
.small-link,
.back-button:hover {
  color: #a46d1d;
}

.study-mode-badge {
  color: #855818;
  border-color: rgba(255, 233, 176, .9);
  background: rgba(255, 239, 191, .75);
}

.study-progress-track,
.mini-progress {
  background: #f4ead2;
}

.study-progress-track span,
.mini-progress span {
  background: linear-gradient(90deg, #f5cd70, #e9a936);
}

.round-action,
.keyboard-hint kbd {
  border-color: rgba(247, 224, 175, .85);
  background: rgba(255, 255, 255, .78);
}

.flashcard-self-button,
.definition-action {
  border-color: rgba(248, 224, 171, .9);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 15px 32px rgba(126, 86, 24, .075), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.flashcard-self-button.not-known,
.definition-action.undo {
  color: #8b6229;
  border-color: rgba(238, 205, 137, .88);
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 247, 226, .82));
}

.flashcard-self-button.known,
.definition-action.continue {
  color: #4a3312;
  border-color: rgba(255, 226, 154, .9);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .42), transparent 40%),
    linear-gradient(135deg, #ffd36b, #eead3c);
  box-shadow: 0 16px 34px rgba(169, 107, 13, .18), inset 0 1px 0 rgba(255, 255, 255, .68);
}

.flashcard-self-button.known small,
.definition-action.continue small {
  color: rgba(74, 51, 18, .68);
}

.flashcard-self-button.not-known:hover,
.definition-action.undo:hover {
  border-color: rgba(226, 178, 83, .72);
  background: linear-gradient(145deg, #ffffff, #fff4d5);
  box-shadow: 0 18px 36px rgba(151, 98, 18, .09), inset 0 1px 0 #fff;
}

.flashcard-self-button.known:hover,
.definition-action.continue:hover {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .48), transparent 40%),
    linear-gradient(135deg, #ffda7b, #efb345);
  box-shadow: 0 20px 40px rgba(169, 107, 13, .22), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.card-reveal-hint.revealed,
.study-accuracy {
  color: #8e774a;
}

.rail-card textarea {
  border-color: rgba(242, 216, 161, .74);
  background: rgba(255, 252, 243, .82);
}

.streak-card {
  border-color: rgba(255, 232, 174, .82);
  background: linear-gradient(140deg, rgba(255, 240, 198, .86), rgba(255, 255, 255, .74));
}

.mode-icon.violet,
.mode-icon.orange {
  color: #9b681d;
  background: #fff0c3;
}

.mode-icon.blue {
  color: #7b8171;
  background: #f2f1dc;
}

.stats-highlight {
  color: #4d3512;
  background: linear-gradient(135deg, #ffd36d, #edaa37);
  box-shadow: 0 10px 27px rgba(158, 101, 14, .12);
}

.stats-highlight .stat-label {
  color: #4d3512;
}

.stats-highlight.warm {
  color: #6c4718;
  background: linear-gradient(135deg, #fff2ca, #ffe4a4);
}

.stats-highlight.cool {
  color: #5d6153;
  background: linear-gradient(135deg, #f4f3e7, #e9ecdf);
}

.tip-card {
  color: #6f4a17;
  background: linear-gradient(135deg, #fff0bf, #fff9e8);
}

.tip-card p {
  color: #8b6b3d;
}

.tip-icon {
  color: #8f5e17;
  background: #ffe49a;
}

@media (max-width: 820px) {
  .sidebar {
    background: rgba(255, 255, 255, .9);
  }
}

.card-example {
  width: min(620px, 100%);
  margin-top: 22px;
  padding: 16px 19px;
  border: 1px solid rgba(241, 216, 164, .8);
  border-radius: 18px;
  color: #544837;
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 248, 227, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 9px 24px rgba(126, 86, 24, .055);
  text-align: left;
}

.example-heading,
.example-source {
  display: flex;
  align-items: center;
  gap: 9px;
}

.example-heading {
  justify-content: space-between;
}

.example-heading span {
  color: #a46d1d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.example-heading i {
  color: #9a815a;
  font-size: 10px;
  font-style: normal;
}

.card-example p {
  margin: 9px 0 8px;
  color: #3f382e;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

.example-word-highlight {
  padding: .08em .2em;
  border-radius: .32em;
  color: #6e4310;
  background: #ffe19a;
  box-shadow: inset 0 -1px 0 rgba(198, 130, 21, .2);
  font-weight: 650;
}

.card-example .example-translation {
  display: flex;
  gap: 9px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(239, 214, 164, .72);
  color: #75644f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

.example-translation span {
  flex: 0 0 auto;
  color: #a46d1d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.example-source {
  flex-wrap: wrap;
  color: #a28e6d;
  font-size: 10px;
}

.example-source a {
  color: #93611a;
  text-decoration: none;
}

.example-source a:hover {
  text-decoration: underline;
}

.definition-actions.single {
  grid-template-columns: 1fr;
}

.definition-actions.single .next-word {
  width: 100%;
}

.card-example.loading,
.card-example.unavailable {
  min-height: 48px;
}

body.dark .card-example {
  color: #ece6dc;
  border-color: rgba(118, 101, 72, .62);
  background: rgba(47, 45, 42, .78);
}

body.dark .card-example p {
  color: #f1ece4;
}

body.dark .example-word-highlight {
  color: #2f2415;
  background: #e8bd65;
}

body.dark .card-example .example-translation {
  border-top-color: rgba(132, 111, 76, .6);
  color: #d7ccbd;
}

@media (max-width: 560px) {
  .card-example {
    margin-top: 18px;
    padding: 14px 15px;
    border-radius: 16px;
  }

  .card-example p {
    font-size: 15px;
  }
}

/* Cloud responsive layout: desktop sidebar, tablet/mobile bottom navigation */
html {
  min-height: 100%;
  background: #fffaf0;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

button,
input,
textarea {
  touch-action: manipulation;
}

@media (max-width: 1180px) and (min-width: 821px) {
  :root {
    --sidebar-width: 210px;
  }

  .sidebar {
    padding-inline: 14px;
  }

  .main-content {
    padding-inline: 30px;
  }

  .study-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
    min-height: 100dvh;
  }

  .sidebar {
    position: fixed;
    z-index: 100;
    inset: auto 0 0;
    width: 100%;
    height: auto;
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid rgba(237, 206, 137, .72);
    border-radius: 22px 22px 0 0;
    background: rgba(255, 253, 247, .92);
    box-shadow: 0 -12px 38px rgba(116, 77, 19, .09), inset 0 1px 0 rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
  }

  body.dark .sidebar {
    background: rgba(38, 35, 31, .93);
  }

  .brand-block,
  .sidebar-footer {
    display: none;
  }

  .main-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
    overflow: visible;
  }

  .nav-item {
    min-width: 0;
    min-height: 55px;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 6px 2px;
    border-radius: 14px;
    font-size: 10px;
    line-height: 1;
    text-align: center;
  }

  .nav-item.active {
    background: linear-gradient(145deg, rgba(255, 231, 164, .84), rgba(255, 249, 230, .8));
  }

  .nav-item.active::before {
    display: none;
  }

  .nav-icon {
    width: auto;
    font-size: 18px;
  }

  .nav-pill {
    position: absolute;
    top: 4px;
    left: calc(50% + 9px);
    min-width: 18px;
    margin: 0;
    padding: 2px 4px;
    font-size: 8px;
  }

  .main-content {
    width: 100%;
    max-width: none;
    padding: max(20px, env(safe-area-inset-top)) 22px calc(100px + env(safe-area-inset-bottom));
  }

  .topbar {
    margin-bottom: 24px;
  }

  .study-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .study-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .word-card {
    min-height: 500px;
  }

  .flashcard-self-button,
  .definition-action,
  .primary-button,
  .outline-button,
  .filter-tab {
    min-height: 48px;
  }
}

@media (max-width: 560px) {
  .main-content {
    padding: max(16px, env(safe-area-inset-top)) 12px calc(96px + env(safe-area-inset-bottom));
  }

  .topbar {
    min-height: 40px;
    margin-bottom: 17px;
  }

  .topbar-title {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-hero {
    min-height: 0;
    padding: 27px 21px;
    border-radius: 22px;
  }

  .hero-copy h1 {
    font-size: clamp(28px, 9.2vw, 36px);
    line-height: 1.2;
  }

  .hero-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .hero-actions .primary-button {
    width: 100%;
    justify-content: center;
  }

  .hero-actions .text-button {
    min-height: 40px;
  }

  .stat-grid {
    gap: 8px;
  }

  .stat-card {
    min-width: 0;
    padding: 14px 13px;
  }

  .stat-foot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-heading h2 {
    font-size: 17px;
  }

  .study-topline {
    gap: 8px;
  }

  .study-topline .study-mode-badge {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .study-progress-row {
    margin-bottom: 13px;
  }

  .word-card {
    min-height: min(500px, calc(100dvh - 225px));
    padding: 18px 15px;
    border-radius: 24px;
  }

  .card-content {
    padding: 22px 2px 32px;
  }

  .card-word {
    font-size: clamp(46px, 14vw, 66px);
  }

  .card-meaning {
    margin-top: 24px;
    font-size: 17px;
  }

  .flashcard-self-actions,
  .definition-actions {
    width: 100%;
    gap: 9px;
    margin-top: 25px;
  }

  .flashcard-self-button,
  .definition-action {
    min-height: 74px;
    border-radius: 17px;
  }

  .keyboard-hint {
    display: none;
  }

  .study-rail {
    grid-template-columns: 1fr;
  }

  .page-heading .primary-button {
    width: 100%;
    justify-content: center;
  }

  .library-toolbar {
    gap: 11px;
  }

  .filter-tabs {
    margin-inline: -12px;
    padding-inline: 12px;
    scrollbar-width: none;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .library-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .goal-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .goal-options button {
    min-height: 64px;
  }

  .custom-plan-row {
    grid-template-columns: 1fr auto;
  }

  .custom-plan-row label {
    grid-column: 1 / -1;
  }

  .setting-row {
    align-items: flex-start;
  }

  .setting-row .switch {
    margin-top: 2px;
  }

  .modal {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 120px);
    padding: 25px 19px;
  }
}

@media (max-width: 380px) {
  .nav-item {
    font-size: 9px;
  }

  .nav-icon {
    font-size: 17px;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) and (max-height: 700px) {
  .word-card {
    min-height: 370px;
  }

  .card-content {
    padding-block: 14px 20px;
  }
}

@media (hover: none) {
  .nav-item:hover,
  .flashcard-self-button:hover,
  .definition-action:hover,
  .primary-button:hover,
  .mode-card:hover {
    transform: none;
  }
}

/* Automatic exercise results: choice + spelling */
.automatic-result {
  width: min(560px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px auto 2px;
  padding: 13px 16px;
  border: 1px solid;
  border-radius: 16px;
  text-align: left;
}

.automatic-result.correct {
  color: #66724e;
  border-color: rgba(154, 171, 119, .42);
  background: linear-gradient(145deg, rgba(247, 250, 239, .94), rgba(238, 243, 225, .82));
}

.automatic-result.wrong {
  color: #986650;
  border-color: rgba(193, 139, 113, .38);
  background: linear-gradient(145deg, rgba(255, 250, 245, .96), rgba(249, 235, 225, .82));
}

.automatic-result-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.automatic-result.correct .automatic-result-icon {
  background: #899b67;
}

.automatic-result.wrong .automatic-result-icon {
  background: #b8795f;
}

.automatic-result > div {
  min-width: 0;
}

.automatic-result strong,
.automatic-result small {
  display: block;
}

.automatic-result strong {
  color: inherit;
  font-size: 14px;
}

.automatic-result small {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 10px;
}

.automatic-next-actions {
  width: min(620px, 100%);
}

.automatic-next-actions .next-word {
  min-height: 62px;
}

.spelling-meaning {
  margin-top: 0;
}

.spelling-prompt {
  margin-bottom: 20px;
  padding: 18px 14px;
  border: 1px solid rgba(242, 215, 158, .75);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .83), rgba(255, 247, 225, .72));
}

.spelling-mask {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: .14em;
  min-height: 46px;
  color: #463a2a;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .015em;
}

.spelling-given {
  color: #8c5b17;
}

.spelling-blank {
  color: #c7aa72;
  transform: translateY(-.04em);
}

.spelling-space {
  width: .42em;
}

.spelling-separator {
  color: #b38e51;
}

.spelling-input-row {
  align-items: stretch;
}

.spelling-input {
  min-height: 54px;
  padding-inline: 17px;
  border-color: rgba(237, 207, 143, .86);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .025em;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.spelling-input:focus {
  border-color: rgba(225, 168, 59, .72);
  box-shadow: 0 0 0 4px rgba(238, 177, 69, .13);
}

.check-spelling {
  min-width: 104px;
  min-height: 54px;
  border-radius: 14px;
  color: #4a3312;
  background: linear-gradient(135deg, #ffd36a, #edaa36);
  box-shadow: 0 9px 20px rgba(169, 107, 13, .16);
  font-size: 14px;
}

.spelling-enter-hint {
  margin-top: 10px;
  color: #9d8968;
  font-size: 10px;
}

.spelling-result-word {
  margin-top: 22px;
  font-weight: 400;
}

.spelling-comparison {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 15px auto 0;
  padding: 14px 16px;
  border: 1px solid rgba(193, 139, 113, .34);
  border-radius: 16px;
  background: rgba(255, 250, 244, .82);
  text-align: left;
}

.spelling-comparison.correct {
  grid-template-columns: 1fr;
  border-color: rgba(154, 171, 119, .38);
  background: rgba(244, 248, 236, .82);
}

.spelling-comparison div {
  min-width: 0;
}

.spelling-comparison small,
.spelling-comparison strong {
  display: block;
}

.spelling-comparison small {
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 9px;
  letter-spacing: .08em;
}

.spelling-comparison strong {
  overflow-wrap: anywhere;
  color: #9a624d;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.spelling-comparison div:last-child strong,
.spelling-comparison.correct strong {
  color: #66724e;
}

.spelling-comparison-arrow {
  color: #b7a17e;
  font-size: 20px;
}

body.dark .automatic-result.correct,
body.dark .spelling-comparison.correct {
  color: #bac99d;
  border-color: rgba(167, 187, 126, .3);
  background: rgba(57, 67, 48, .72);
}

body.dark .automatic-result.wrong,
body.dark .spelling-comparison.wrong {
  color: #d8a58e;
  border-color: rgba(196, 137, 113, .3);
  background: rgba(72, 49, 43, .7);
}

body.dark .spelling-prompt {
  border-color: rgba(127, 104, 65, .52);
  background: rgba(48, 45, 40, .72);
}

body.dark .spelling-mask {
  color: #f0e8db;
}

body.dark .spelling-given {
  color: #e6bc6d;
}

body.dark .spelling-blank {
  color: #a99166;
}

body.dark .spelling-input {
  color: var(--ink);
  border-color: rgba(127, 104, 65, .56);
  background: rgba(39, 38, 43, .86);
}

body.dark .spelling-comparison strong {
  color: #e0ad96;
}

body.dark .spelling-comparison div:last-child strong,
body.dark .spelling-comparison.correct strong {
  color: #c5d4a8;
}

@media (max-width: 560px) {
  .automatic-result {
    margin-top: 10px;
    padding: 11px 13px;
  }

  .spelling-wrap {
    margin-top: 18px;
  }

  .spelling-prompt {
    margin-bottom: 14px;
    padding: 15px 10px;
  }

  .spelling-mask {
    font-size: clamp(25px, 8.4vw, 36px);
  }

  .spelling-input-row {
    gap: 8px;
  }

  .check-spelling {
    min-height: 52px;
  }

  .spelling-comparison {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }

  .spelling-comparison-arrow {
    display: none;
  }

  .spelling-result-word {
    margin-top: 17px;
  }
}

/* Inline spelling slots */
.spelling-slot-word {
  gap: clamp(4px, .7vw, 8px);
  min-height: 58px;
  padding: 3px 4px 8px;
  transform-origin: center;
}

.spelling-slot-word .spelling-given,
.spelling-slot-word .spelling-separator {
  padding-bottom: 5px;
  font-weight: 400;
}

.spelling-slot {
  appearance: none;
  width: clamp(22px, 3.2vw, 34px);
  height: 49px;
  padding: 1px 0 4px;
  border: 0;
  border-bottom: 2px solid #d7b975;
  border-radius: 0;
  outline: 0;
  color: #3f3529;
  background: transparent;
  caret-color: #b97818;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(25px, 3.6vw, 38px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: lowercase;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.spelling-slot:focus {
  border-bottom-color: #e0a12d;
  box-shadow: 0 3px 0 rgba(224, 161, 45, .12);
  transform: translateY(-2px);
}

.spelling-slot:disabled {
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

.spelling-slot-word.wrong,
.spelling-slot-word.wrong .spelling-slot {
  color: #a96350;
}

.spelling-slot-word.wrong .spelling-slot {
  border-bottom-color: #c98c78;
}

.spelling-slot-word.correct,
.spelling-slot-word.correct .spelling-slot {
  color: #718059;
}

.spelling-slot-word.correct .spelling-slot {
  border-bottom-color: #9aaa7c;
}

.spelling-slot-word.shake {
  animation: spelling-head-shake .48s cubic-bezier(.36, .07, .19, .97);
}

@keyframes spelling-head-shake {
  0%, 100% { transform: translateX(0); }
  16% { transform: translateX(-10px) rotate(-.7deg); }
  32% { transform: translateX(9px) rotate(.6deg); }
  48% { transform: translateX(-7px) rotate(-.45deg); }
  64% { transform: translateX(6px) rotate(.35deg); }
  80% { transform: translateX(-3px); }
}

.spelling-correction {
  min-height: 70px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  color: #9a624d;
}

.spelling-correction.empty {
  min-height: 30px;
}

.spelling-correction span {
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: .08em;
}

.spelling-correction strong {
  color: #a15f47;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 23px;
  font-weight: 400;
}

.spelling-correction small {
  width: 100%;
  margin-top: -2px;
  color: #9b826b;
  font-size: 10px;
}

.spelling-slot-help {
  margin-top: 4px;
  color: #9d8968;
  font-size: 10px;
}

body.dark .spelling-slot {
  color: #f0e8db;
  border-bottom-color: #9f895f;
  caret-color: #e6bc6d;
}

body.dark .spelling-slot:focus {
  border-bottom-color: #e6bc6d;
}

body.dark .spelling-correction strong {
  color: #e0ad96;
}

body.dark .spelling-slot-help,
body.dark .spelling-correction small {
  color: #b6a38b;
}

@media (max-width: 560px) {
  .spelling-slot-word {
    gap: 4px;
    padding-inline: 0;
  }

  .spelling-slot {
    width: clamp(19px, 6vw, 28px);
    height: 42px;
    font-size: clamp(23px, 7vw, 32px);
  }

  .spelling-correction {
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spelling-slot-word.shake {
    animation: none;
  }
}

/* Focused study viewport: keep prompts, feedback and actions in one panel. */
body.study-active {
  overflow: hidden;
}

.study-active .topbar {
  display: none;
}

.study-active .main-content {
  height: 100dvh;
  padding-top: 12px;
  padding-bottom: 12px;
  overflow: hidden;
}

.study-active #view-study.active {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.study-active .study-topline {
  flex: 0 0 auto;
  margin-bottom: 7px;
}

.study-active .study-progress-row {
  flex: 0 0 auto;
  gap: 12px;
  margin-bottom: 8px;
}

.study-active .study-progress-row strong {
  margin-top: 1px;
  font-size: 14px;
}

.study-active .study-layout {
  width: 100%;
  max-width: 980px;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.study-active .study-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.study-active .study-rail,
.study-active .keyboard-hint,
.study-active .study-feedback {
  display: none;
}

.study-active .word-card {
  min-height: 0;
  height: 100%;
  flex: 1;
  padding: 13px 22px;
  border-radius: 27px;
}

.study-active .card-toolbar {
  min-height: 30px;
}

.study-active .round-action {
  width: 32px;
  height: 32px;
}

.study-active .card-content {
  min-height: 0;
  padding: 3px 8px 22px;
  justify-content: center;
}

.study-active .card-word {
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1;
}

.study-active .card-phonetic {
  margin-top: 6px;
  font-size: 14px;
}

.study-active .card-meaning {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.42;
}

.study-active .card-meaning .meaning-label {
  margin-bottom: 3px;
}

.study-active .choice-wrap,
.study-active .spelling-wrap {
  margin-top: 10px;
}

.study-active .choice-label,
.study-active .spelling-label {
  margin-bottom: 7px;
}

.study-active .choice-options {
  gap: 7px;
}

.study-active .choice-option {
  min-height: 54px;
  padding: 9px 13px;
  font-size: 15px;
  line-height: 1.4;
}

.choice-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.choice-meaning {
  min-width: 0;
}

.choice-wrong-word {
  flex: 0 1 auto;
  max-width: 42%;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid rgba(191, 89, 79, .22);
  border-radius: 999px;
  color: #a54842;
  background: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dark .choice-wrong-word {
  border-color: rgba(255, 177, 166, .25);
  color: #ffc0b7;
  background: rgba(37, 31, 37, .5);
}

.study-active .spelling-prompt {
  margin-bottom: 8px;
  padding: 9px 10px;
}

.study-active .spelling-slot-word {
  min-height: 45px;
  padding-bottom: 3px;
}

.study-active .spelling-slot {
  height: 40px;
  font-size: clamp(23px, 3vw, 32px);
}

.study-active .spelling-correction {
  min-height: 48px;
  margin-top: 2px;
}

.study-active .spelling-correction.empty {
  min-height: 18px;
}

.study-active .card-example {
  margin-top: 9px;
  padding: 9px 13px;
  border-radius: 14px;
}

.study-active .card-example p {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.38;
}

.study-active .card-example .example-translation {
  margin-top: 6px;
  padding-top: 6px;
  font-size: 12px;
}

.study-active .card-example .example-source {
  display: none;
}

.card-example.translation-fallback .example-translation {
  color: #856c4b;
  background: rgba(255, 246, 218, .5);
}

.study-active .flashcard-self-actions,
.study-active .definition-actions {
  gap: 10px;
  margin-top: 11px;
}

.study-active .flashcard-self-button,
.study-active .definition-action {
  min-height: 53px;
  padding: 8px 13px;
  border-radius: 16px;
}

.study-active .automatic-next-actions .next-word,
.study-active .definition-actions.single .next-word {
  min-height: 53px;
}

.study-active .card-reveal-hint {
  bottom: 8px;
}

@media (max-width: 820px) {
  .study-active .main-content {
    height: calc(100dvh - 72px - env(safe-area-inset-bottom));
    padding: max(7px, env(safe-area-inset-top)) 10px 6px;
  }

  .study-active .study-topline,
  .study-active .study-progress-row {
    margin-bottom: 6px;
  }

  .study-active .word-card {
    padding: 10px 12px;
    border-radius: 22px;
  }

  .study-active .card-content {
    padding-inline: 2px;
  }

  .study-active .card-word {
    font-size: clamp(38px, 10vw, 52px);
  }

  .study-active .card-meaning {
    font-size: 14px;
  }

  .study-active .choice-options {
    grid-template-columns: 1fr 1fr;
  }

  .study-active .choice-option {
    min-height: 50px;
    font-size: 14px;
  }

  .study-active .card-example p {
    font-size: 13px;
  }

  .study-active .flashcard-self-button,
  .study-active .definition-action {
    min-height: 54px;
  }
}

@media (max-height: 700px) {
  .study-active .study-progress-row .eyebrow {
    display: none;
  }

  .study-active .study-progress-row strong {
    margin-top: 0;
    font-size: 13px;
  }

  .study-active .card-toolbar .card-index {
    font-size: 8px;
  }

  .study-active .round-action {
    width: 28px;
    height: 28px;
  }

  .study-active .card-content {
    padding-top: 0;
  }

  .study-active .card-word {
    font-size: clamp(34px, 7vh, 48px);
  }

  .study-active .card-example {
    padding: 7px 10px;
  }

  .study-active .example-heading i {
    display: none;
  }

  .study-active .spelling-prompt {
    padding-block: 7px;
  }

  .study-active .spelling-correction {
    min-height: 42px;
  }
}

/* Account login + automatic Lulu/Vis bridge */
.brand-block {
  width: 100%;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  transition: background .2s ease, transform .2s ease;
}

.brand-block:hover {
  background: rgba(255, 237, 184, .32);
  transform: translateY(-1px);
}

.login-shell {
  min-height: min(690px, calc(100dvh - 150px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .72fr);
  overflow: hidden;
  border: 1px solid rgba(232, 194, 99, .42);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 9%, rgba(255, 255, 255, .96), transparent 24%),
    linear-gradient(135deg, #fff9e9 0%, #fff1c9 47%, #ffe4a1 100%);
  box-shadow: 0 26px 70px rgba(122, 83, 20, .12);
}

.login-visual {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(42px, 7vw, 92px);
}

.login-orb {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 27px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 23px;
  color: #fff;
  background: linear-gradient(145deg, #f2b62d, #d98a12);
  box-shadow: 0 18px 38px rgba(190, 117, 11, .24), inset 0 1px 0 rgba(255,255,255,.45);
  font-size: 29px;
  font-weight: 750;
}

.login-visual h1 {
  margin: 13px 0 19px;
  color: #4b391b;
  font-size: clamp(35px, 4.2vw, 58px);
  font-weight: 620;
  letter-spacing: -.055em;
  line-height: 1.08;
}

.login-visual > p {
  max-width: 590px;
  margin: 0;
  color: #806c49;
  font-size: 14px;
  line-height: 1.8;
}

.login-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}

.login-points span {
  padding: 8px 12px;
  border: 1px solid rgba(199, 147, 48, .2);
  border-radius: 999px;
  color: #735a2f;
  background: rgba(255,255,255,.48);
  font-size: 10px;
}

.login-card {
  align-self: center;
  margin: 34px 34px 34px 0;
  padding: clamp(29px, 4vw, 45px);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 24px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 22px 55px rgba(105, 70, 14, .13), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  backdrop-filter: blur(26px) saturate(135%);
}

.login-card h2 {
  margin: 9px 0 9px;
  color: #44371f;
  font-size: 23px;
  letter-spacing: -.035em;
}

.login-card p {
  margin: 0;
  color: #8a7a5e;
  font-size: 11px;
  line-height: 1.7;
}

#account-login-form {
  display: grid;
  gap: 8px;
  margin-top: 25px;
}

#account-login-form label {
  margin-top: 7px;
  color: #766748;
  font-size: 10px;
  font-weight: 650;
}

#account-login-form input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #ead7aa;
  border-radius: 12px;
  color: #44371f;
  background: rgba(255,255,255,.82);
  font-size: 14px;
}

#account-login-form input:focus {
  border-color: #d6a12a;
  outline: 4px solid rgba(232, 184, 71, .15);
}

.account-login-button {
  width: 100%;
  min-height: 49px;
  margin-top: 15px;
  background: linear-gradient(135deg, #e5aa28, #c87a0c);
  box-shadow: 0 10px 24px rgba(184, 107, 8, .22);
}

.login-security {
  margin-top: 18px;
  color: #a29378;
  font-size: 9px;
  line-height: 1.65;
  text-align: center;
}

.account-card {
  text-align: center;
}

.account-card[hidden] {
  display: none;
}

.account-avatar {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #e6ae31, #c77c10);
  box-shadow: 0 14px 30px rgba(176, 105, 10, .2);
  font-size: 27px;
  font-weight: 720;
}

.account-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 25px;
  border: 1px solid #eee0bd;
  border-radius: 15px;
  background: rgba(255,250,236,.68);
}

.account-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px;
}

.account-stats > div + div {
  border-left: 1px solid #eee0bd;
}

.account-stats strong {
  color: #5b4520;
  font-size: 19px;
}

.account-stats span {
  color: #998765;
  font-size: 9px;
}

.account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

.lulu-sync-section {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 221, 118, .22), transparent 34%),
    var(--surface);
}

.primary-outline {
  border-color: #e0bd59;
  color: #6d5312;
  background: #fff8dc;
}

.lulu-toggle-row {
  margin-top: 13px;
  padding: 16px 15px;
  border: 1px solid #eadfbf;
  border-radius: 13px;
  background: #fffaf0;
}

body.dark .lulu-sync-section {
  background: var(--surface);
}

body.dark .login-shell {
  border-color: var(--line);
  background: linear-gradient(145deg, #2f2c27, #3b3325);
}

body.dark .login-card {
  border-color: rgba(255,255,255,.08);
  background: rgba(39,37,34,.82);
}

body.dark .login-card h2,
body.dark .login-visual h1 {
  color: #f4ead5;
}

@media (max-width: 900px) {
  .login-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .login-visual {
    padding: 38px 31px 25px;
  }

  .login-visual h1 {
    font-size: 35px;
  }

  .login-card {
    width: auto;
    margin: 0 22px 28px;
  }
}

@media (max-width: 560px) {
  .login-visual {
    padding: 28px 21px 19px;
  }

  .login-orb {
    width: 51px;
    height: 51px;
    margin-bottom: 19px;
    border-radius: 17px;
    font-size: 22px;
  }

  .login-visual h1 {
    font-size: 29px;
  }

  .login-points {
    display: none;
  }

  .login-card {
    margin: 0 10px 18px;
    padding: 24px 19px;
  }

  .account-actions {
    grid-template-columns: 1fr;
  }
}

/* Spelling correction checkpoint */
.spelling-wrap {
  --spelling-word-size: clamp(25px, 3.6vw, 38px);
}

.spelling-mask,
.spelling-slot,
.spelling-correction > strong {
  font-size: var(--spelling-word-size);
}

.spelling-correction {
  width: min(620px, 100%);
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 11px;
  row-gap: 3px;
  margin-inline: auto;
  padding: 9px 11px;
  border: 1px solid rgba(201, 140, 120, .32);
  border-radius: 15px;
  background: rgba(255, 249, 239, .78);
}

.spelling-correction.empty {
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

.spelling-correction > span {
  grid-column: 1;
  grid-row: 1;
}

.spelling-correction > strong {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  overflow-wrap: anywhere;
  line-height: 1.08;
}

.spelling-correction > small {
  width: auto;
  grid-column: 1 / 3;
  grid-row: 2;
  margin: 0;
}

.spelling-memorized {
  min-width: 112px;
  min-height: 48px;
  grid-column: 3;
  grid-row: 1 / 3;
  padding: 9px 17px;
  border: 1px solid rgba(243, 197, 98, .82);
  border-radius: 14px;
  color: #573b12;
  background: linear-gradient(135deg, #ffd36b, #eead3c);
  box-shadow: 0 9px 20px rgba(169, 107, 13, .14), inset 0 1px 0 rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 650;
  transition: transform .16s ease, box-shadow .16s ease;
}

.spelling-memorized:hover,
.spelling-memorized:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(169, 107, 13, .2), inset 0 1px 0 rgba(255, 255, 255, .82);
  outline: 3px solid rgba(238, 173, 60, .18);
  outline-offset: 2px;
}

body.dark .spelling-correction {
  border-color: rgba(196, 137, 113, .3);
  background: rgba(72, 49, 43, .62);
}

body.dark .spelling-memorized {
  color: #493110;
}

@media (max-width: 560px) {
  .spelling-wrap {
    --spelling-word-size: clamp(23px, 7vw, 32px);
  }

  .spelling-correction {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px 10px;
  }

  .spelling-correction > small {
    grid-column: 1 / -1;
  }

  .spelling-memorized {
    width: 100%;
    min-height: 44px;
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 5px;
  }
}

@media (max-height: 700px) and (min-width: 561px) {
  .study-active .spelling-correction {
    min-height: 62px;
    padding-block: 6px;
  }

  .study-active .spelling-memorized {
    min-height: 42px;
  }
}

/* Stable three-zone card layout shared by every study mode. */
.study-active .card-content {
  display: block;
  width: 100%;
  height: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.card-fixed-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: clamp(82px, 16vh, 112px) minmax(0, 1fr) 72px;
  gap: 8px;
}

.card-fixed-primary,
.card-fixed-detail,
.card-fixed-actions {
  min-width: 0;
  min-height: 0;
}

.card-fixed-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

.card-fixed-primary .card-word {
  flex: 0 0 auto;
}

.card-fixed-primary .card-meaning,
.card-fixed-detail .card-meaning {
  margin-top: 0;
}

.card-fixed-primary .card-meaning strong,
.card-fixed-detail .card-meaning strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-fixed-detail {
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.card-fixed-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
}

.card-fixed-actions .flashcard-self-actions,
.card-fixed-actions .definition-actions {
  width: min(660px, 100%);
  margin: 0;
}

.card-action-placeholder {
  width: min(660px, 100%);
  height: 53px;
  visibility: hidden;
}

.flash-definition-zone {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
}

.flash-definition-zone.empty {
  visibility: hidden;
}

.choice-fixed-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 7px;
  overflow: hidden;
}

.choice-fixed-layout .choice-wrap {
  width: min(610px, 100%);
  margin: 0 auto;
}

.card-fixed-choice .choice-option {
  height: 54px;
  max-height: 54px;
  overflow: hidden;
}

.choice-result-zone {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
}

.choice-result-zone.empty {
  visibility: hidden;
}

.choice-result-zone .card-meaning {
  flex: 0 0 auto;
  margin-top: 0;
}

.card-fixed-layout .card-example {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}

.card-fixed-layout .example-sentence {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-fixed-layout .example-translation {
  max-height: 3.35em;
  overflow: hidden;
}

.spelling-fixed-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.spelling-fixed-layout .spelling-wrap {
  width: min(610px, 100%);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 74px 20px;
  align-content: center;
  gap: 5px;
  margin: 0 auto;
}

.spelling-form {
  position: relative;
  min-width: 0;
  margin: 0;
}

.spelling-fixed-layout .spelling-prompt {
  margin: 0;
}

.spelling-fixed-layout .spelling-correction,
.spelling-fixed-layout .spelling-correction.empty {
  width: 100%;
  height: 74px;
  min-height: 74px;
  margin: 0;
}

.spelling-fixed-layout .spelling-correction.empty {
  visibility: hidden;
}

.spelling-native-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.spelling-fixed-layout .spelling-slot-help {
  margin: 0;
}

.card-fixed-actions .spelling-memorized {
  width: 100%;
  min-height: 53px;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 8px 13px;
  border-radius: 16px;
}

.card-fixed-actions .spelling-memorized strong {
  color: inherit;
  font-size: 15px;
}

.card-fixed-actions .spelling-memorized small {
  display: block;
  margin-top: 3px;
  color: rgba(86, 62, 26, .68);
  font-size: 9px;
  font-style: normal;
}

@media (max-width: 560px) {
  .card-fixed-layout {
    grid-template-rows: 82px minmax(0, 1fr) 64px;
    gap: 5px;
  }

  .card-fixed-actions {
    padding-bottom: 5px;
  }

  .spelling-fixed-layout .spelling-wrap {
    grid-template-rows: auto 64px 18px;
    gap: 3px;
  }

  .spelling-fixed-layout .spelling-correction,
  .spelling-fixed-layout .spelling-correction.empty {
    height: 64px;
    min-height: 64px;
  }

  .card-fixed-layout .card-example .example-heading i {
    display: none;
  }

  .card-fixed-choice .choice-option {
    height: 50px;
    max-height: 50px;
  }
}

@media (max-height: 700px) {
  .card-fixed-layout {
    grid-template-rows: 70px minmax(0, 1fr) 58px;
    gap: 4px;
  }

  .card-fixed-actions {
    padding-bottom: 3px;
  }

  .card-fixed-actions .flashcard-self-button,
  .card-fixed-actions .definition-action,
  .card-fixed-actions .spelling-memorized {
    min-height: 48px;
  }

  .spelling-fixed-layout .spelling-wrap {
    grid-template-rows: auto 58px 17px;
  }

  .spelling-fixed-layout .spelling-correction,
  .spelling-fixed-layout .spelling-correction.empty {
    height: 58px;
    min-height: 58px;
  }

  .card-fixed-layout .card-example {
    margin-top: 5px;
  }
}