/*
 * StepEnglish visual system V12
 *
 * This file intentionally sits after the legacy stylesheet. It owns the final
 * semantic tokens and shared component language while older route-specific
 * layout rules continue to provide backwards-compatible structure.
 */

@font-face {
  font-family: "StepEnglish CJK";
  src: url("fonts/StepEnglishCJK.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root,
:root[data-theme="clear-blue"] {
  color-scheme: light;
  --home-card-image: url('home_theme_clear_blue.jpg');
  --app-bg: #f5f6f8;
  --surface-1: #ffffff;
  --surface-2: #eef2f6;
  --surface-3: #e7edf4;
  --ink-1: #14213d;
  --ink-2: #667085;
  --ink-3: #929aaa;
  --border-1: #dde3ea;
  --brand-1: #315fba;
  --brand-2: #244d9b;
  --brand-soft: #e8effa;
  --hero-a: #263e70;
  --hero-b: #315fba;
  --hero-ink: #ffffff;
  --success-1: #287a55;
  --success-soft: #e8f4ee;
  --danger-1: #b84b5b;
  --danger-soft-1: #fae9ec;
  --warning-1: #a96f24;
  --warning-soft-1: #faf0dc;
  --chart-learn: #315fba;
  --chart-review: #b8793f;
  --shadow-1: 0 1px 2px rgba(16, 30, 54, .025), 0 5px 18px rgba(16, 30, 54, .045);
  --radius-card: 14px;
  --radius-control: 11px;
  --radius-small: 8px;

  /* Legacy aliases used by existing routes. */
  --bg: var(--app-bg);
  --surface: var(--surface-1);
  --surface-soft: var(--surface-2);
  --text: var(--ink-1);
  --muted: var(--ink-2);
  --line: var(--border-1);
  --primary: var(--brand-1);
  --primary-dark: var(--brand-2);
  --blue: var(--brand-1);
  --purple-soft: var(--brand-soft);
  --blue-soft: var(--brand-soft);
  --green: var(--brand-1);
  --green-soft: var(--brand-soft);
  --red: var(--danger-1);
  --red-soft: var(--danger-soft-1);
  --orange: var(--warning-1);
  --orange-soft: var(--warning-soft-1);
  --shadow: var(--shadow-1);
  --shadow-soft: var(--shadow-1);
}

:root[data-theme="paper-green"] {
  --home-card-image: url('home_theme_paper_green.jpg');
  --app-bg: #f4f2ea;
  --surface-1: #fffefa;
  --surface-2: #eeeee6;
  --surface-3: #e4e6dc;
  --ink-1: #26352e;
  --ink-2: #68746e;
  --ink-3: #929a95;
  --border-1: #dbddd3;
  --brand-1: #4f755d;
  --brand-2: #385b46;
  --brand-soft: #e4eee7;
  --hero-a: #355442;
  --hero-b: #66866c;
  --chart-learn: #4f755d;
  --chart-review: #b27b49;
  --shadow-1: 0 1px 2px rgba(41, 55, 45, .025), 0 5px 18px rgba(41, 55, 45, .04);
}

:root[data-theme="mist-purple"] {
  --home-card-image: url('home_theme_mist_purple.jpg');
  --app-bg: #f4f3f8;
  --surface-1: #fefeff;
  --surface-2: #efedf5;
  --surface-3: #e7e4ef;
  --ink-1: #24243c;
  --ink-2: #6e6b7e;
  --ink-3: #9995a7;
  --border-1: #dfdce8;
  --brand-1: #665b98;
  --brand-2: #50477d;
  --brand-soft: #ebe8f4;
  --hero-a: #47426d;
  --hero-b: #70659f;
  --chart-learn: #665b98;
  --chart-review: #b97969;
  --shadow-1: 0 1px 2px rgba(40, 35, 68, .025), 0 5px 18px rgba(40, 35, 68, .04);
}

:root[data-theme="cherry-pink"] {
  --home-card-image: url('home_theme_cherry_pink.jpg');
  --app-bg: #f8f3f4;
  --surface-1: #fffdfd;
  --surface-2: #f3e9ec;
  --surface-3: #ebdfe3;
  --ink-1: #32242a;
  --ink-2: #75666c;
  --ink-3: #9f9297;
  --border-1: #eadde1;
  --brand-1: #a5556b;
  --brand-2: #844256;
  --brand-soft: #f3e2e7;
  --hero-a: #784252;
  --hero-b: #ad6679;
  --chart-learn: #a5556b;
  --chart-review: #9a7644;
  --shadow-1: 0 1px 2px rgba(71, 39, 49, .025), 0 5px 18px rgba(71, 39, 49, .04);
}

:root[data-theme="night-study"] {
  color-scheme: dark;
  --home-card-image: url('home_theme_night_study.jpg');
  --app-bg: #111827;
  --surface-1: #182235;
  --surface-2: #202c42;
  --surface-3: #293750;
  --ink-1: #eef2f7;
  --ink-2: #a9b4c4;
  --ink-3: #7f8ba0;
  --border-1: #2d3a52;
  --brand-1: #80a9eb;
  --brand-2: #aac6f1;
  --brand-soft: #223651;
  --hero-a: #1d3152;
  --hero-b: #28528a;
  --hero-ink: #f7faff;
  --success-1: #72c69b;
  --success-soft: #1e3a33;
  --danger-1: #ed8492;
  --danger-soft-1: #472b35;
  --warning-1: #e1ae64;
  --warning-soft-1: #433721;
  --chart-learn: #80a9eb;
  --chart-review: #e0a768;
  --shadow-1: 0 1px 1px rgba(0, 0, 0, .15), 0 8px 22px rgba(0, 0, 0, .12);
}

html,
body {
  background: var(--app-bg);
  color: var(--ink-1);
  font-family: "StepEnglish CJK", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

body {
  letter-spacing: 0;
}

.global-lookup-pull-indicator {
  --pull-distance: 0px;
  position: fixed;
  z-index: 130;
  top: calc(5px + env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  opacity: 0;
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  box-shadow: var(--shadow-1);
  color: var(--ink-2);
  font-size: 11px;
  pointer-events: none;
  transform: translate(-50%, calc(-44px + var(--pull-distance) * .42));
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}

.global-lookup-pull-indicator.visible { opacity: 1; }
.global-lookup-pull-indicator.ready { background: var(--brand-soft); color: var(--brand-1); }
.global-lookup-pull-indicator span { font-size: 18px; line-height: 1; }

.global-lookup-mask {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 20, 36, .34);
  backdrop-filter: blur(5px);
}

.global-lookup-sheet {
  width: min(100%, 568px);
  max-height: min(82vh, 720px);
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: 0 18px 50px rgba(17, 30, 52, .2);
}

.global-lookup-handle { width: 38px; height: 4px; margin: 8px auto 2px; border-radius: 99px; background: var(--border-1); }
.global-lookup-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px 10px; }
.global-lookup-sheet > header h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.global-lookup-sheet > header p { margin: 2px 0 0; color: var(--ink-2); font-size: 11px; }
.global-lookup-sheet > header button { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 24px; }
.global-lookup-form { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 0 12px; padding: 5px 5px 5px 11px; border: 1px solid var(--border-1); border-radius: 13px; background: var(--surface-2); }
.global-lookup-form > span { color: var(--ink-2); font-size: 20px; }
.global-lookup-form input { min-width: 0; height: 36px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink-1); font-size: 14px; }
.global-lookup-form button { min-width: 54px; height: 34px; border-radius: 9px; background: var(--brand-1); color: #fff; font-size: 12px; font-weight: 700; }
.global-lookup-status { min-height: 26px; padding: 7px 15px 3px; color: var(--ink-2); font-size: 10px; }
.global-lookup-status.error { color: var(--danger-1); }
.global-lookup-results { max-height: calc(min(82vh, 720px) - 148px); overflow-y: auto; padding: 2px 10px 12px; overscroll-behavior: contain; }
.global-lookup-result { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) 12px; align-items: center; gap: 9px; width: 100%; min-height: 56px; padding: 8px 7px; border-bottom: 1px solid var(--border-1); text-align: left; }
.global-lookup-result > span, .global-lookup-result > p { min-width: 0; }
.global-lookup-result b { display: block; overflow-wrap: anywhere; font-size: 15px; line-height: 1.25; }
.global-lookup-result small { display: block; overflow: hidden; margin-top: 2px; color: var(--ink-3); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.global-lookup-result p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-2); font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.global-lookup-result em { color: var(--ink-3); font-size: 20px; font-style: normal; }
.global-lookup-empty { padding: 42px 14px; color: var(--ink-2); font-size: 13px; text-align: center; }

.content {
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(82px + env(safe-area-inset-bottom));
}

.page-title {
  margin: 0 0 14px;
}

.page-title h1 {
  color: var(--ink-1);
  font-size: calc(27px * var(--app-text-scale));
  font-weight: 760;
  letter-spacing: -.7px;
  line-height: 1.18;
}

.page-title p {
  color: var(--ink-2);
  font-size: calc(12px * var(--app-text-scale));
  line-height: 1.45;
}

.section-title {
  margin: 22px 2px 10px;
}

.section-title h2 {
  font-size: calc(19px * var(--app-text-scale));
  font-weight: 720;
  letter-spacing: -.35px;
}

.section-title span,
.link {
  color: var(--ink-2);
}

.card {
  padding: 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}

.primary-btn,
.secondary-btn {
  min-height: 46px;
  border-radius: var(--radius-control);
  font-weight: 700;
}

.primary-btn.green,
.primary-btn {
  background: var(--brand-1);
  color: #fff;
  box-shadow: none;
}

:root[data-theme="night-study"] .primary-btn.green,
:root[data-theme="night-study"] .primary-btn {
  color: #101827;
}

.secondary-btn {
  border: 1px solid var(--border-1);
  background: var(--surface-1);
  color: var(--brand-2);
}

.mini-btn,
.inline-number button {
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-2);
}

.progress {
  height: 4px;
  background: var(--surface-3);
}

.progress > i {
  background: var(--brand-1);
}

.bottom-nav {
  bottom: 0;
  width: min(100%, 600px);
  height: calc(66px + env(safe-area-inset-bottom));
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface-1);
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.nav-btn {
  grid-template-rows: 24px 15px;
  gap: 2px;
  border-radius: 10px;
  color: var(--ink-3);
}

.nav-btn svg {
  width: 23px;
  height: 23px;
  padding: 1px;
  stroke-width: 1.75;
}

.nav-btn small {
  font-size: calc(10px * var(--app-text-scale));
  font-weight: 560;
}

.nav-btn.active {
  background: var(--brand-soft);
  color: var(--brand-2);
  font-weight: 720;
}

/* Home: code-native, compact and calm. */
.hero.home-study-card {
  display: grid;
  width: 100%;
  height: 154px !important;
  min-height: 154px !important;
  aspect-ratio: auto !important;
  padding: 20px !important;
  border: 0;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b)) !important;
  box-shadow: none !important;
  color: var(--hero-ink);
}

.home-study-copy {
  position: relative;
  z-index: 2;
  width: 68%;
}

.home-study-copy .eyebrow {
  display: block;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--hero-ink) 78%, transparent);
  font-size: calc(12px * var(--app-text-scale));
  font-weight: 560;
}

.home-study-copy h1 {
  margin: 0;
  color: var(--hero-ink);
  font-size: calc(23px * var(--app-text-scale));
  font-weight: 760;
  letter-spacing: -.6px;
}

.home-study-facts {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.home-study-facts > span {
  display: flex;
  min-width: 88px;
  height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  background: rgba(255, 255, 255, .09);
}

.home-study-facts small {
  color: rgba(255, 255, 255, .74);
  font-size: calc(10px * var(--app-text-scale));
}

.home-study-facts strong {
  font-size: calc(15px * var(--app-text-scale));
  font-variant-numeric: tabular-nums;
}

.home-study-visual {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 116px;
  height: 118px;
  opacity: .9;
}

.home-study-visual::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  content: "";
}

.home-study-visual i {
  position: absolute;
  right: 2px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  transform: skewX(-18deg);
}

.home-study-visual i:nth-child(1) { right: 3px; bottom: 4px; width: 94px; }
.home-study-visual i:nth-child(2) { right: 13px; bottom: 23px; width: 75px; }
.home-study-visual i:nth-child(3) { right: 24px; bottom: 42px; width: 56px; }
.home-study-visual span {
  position: absolute;
  right: 29px;
  bottom: 61px;
  width: 42px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, .68);
  border-radius: 4px 8px 4px 4px;
  transform: rotate(-5deg);
}

.home-study-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 9px 0 0;
}

.home-study-action {
  min-width: 0;
  min-height: 48px;
  justify-content: center;
  border-radius: 12px;
  background: var(--brand-1) !important;
  font-size: calc(15px * var(--app-text-scale)) !important;
  box-shadow: none;
}

.home-task-card {
  padding: 14px;
}

.task-progress-grid {
  gap: 0;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: 11px;
  background: var(--surface-2);
}

.task-progress-grid > div {
  padding: 10px 8px;
  border-radius: 0;
  background: transparent;
}

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

.book-icon,
.shortcut-card span,
.account-avatar:not(.has-photo),
.avatar:not(.has-photo) {
  background: var(--brand-soft);
  color: var(--brand-2);
  box-shadow: none;
}

.book-icon {
  width: 48px;
  height: 48px;
  border-radius: 11px;
}

.book-card,
.weak-entry,
.shortcut-card {
  box-shadow: none;
}

.home-task-card + .add-more-home,
.book-card + .weak-entry {
  margin-top: 8px;
}

.weak-entry {
  min-height: 62px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-1);
}

.shortcut-grid {
  gap: 8px;
}

.shortcut-card {
  min-height: 86px;
  padding: 12px 8px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-1);
}

.shortcut-card span {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: calc(18px * var(--app-text-scale));
}

/* Grouped lists replace repeated floating cards. */
.book-list,
.settings-list,
.people-list,
.admin-list,
.task-history,
.display-settings-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}

.book-list > .card,
.settings-list > .setting,
.people-list > .card,
.admin-list > .card,
.task-history > .card,
.display-settings-list > .setting {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.book-list > :last-child,
.settings-list > :last-child,
.people-list > :last-child,
.admin-list > :last-child,
.task-history > :last-child,
.display-settings-list > :last-child {
  border-bottom: 0;
}

.book-selectable {
  min-height: 74px;
  padding: 11px 13px;
}

.book-active {
  border-color: var(--border-1);
  background: var(--brand-soft) !important;
  box-shadow: none;
}

.book-name {
  color: var(--ink-1);
  font-weight: 680;
}

.book-meta,
.setting small {
  color: var(--ink-2);
}

.setting,
.setting:has(small),
.setting:has(.inline-number) {
  min-height: 54px;
  padding: 8px 13px;
  border-radius: 0;
  background: transparent;
}

.settings-list .setting + .setting {
  margin-top: 0;
}

.setting b {
  font-weight: 620;
}

.setting-arrow {
  color: var(--ink-3);
}

.select,
.search,
.full-input,
input,
textarea {
  border-color: var(--border-1);
  background: var(--surface-1);
  color: var(--ink-1);
}

.toggle {
  background: var(--surface-3);
}

.toggle.on {
  background: var(--brand-1);
}

.admin-summary {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}

.admin-page-title {
  align-items: center;
  gap: 8px;
}

.admin-page-title h1 {
  font-size: calc(23px * var(--app-text-scale));
}

.admin-page-title p {
  overflow: hidden;
  margin-bottom: 1px;
  font-size: calc(10px * var(--app-text-scale));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-summary > div {
  padding: 12px 8px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-summary > div + div {
  border-left: 1px solid var(--border-1);
}

.person-card {
  min-height: 72px;
  padding: 11px 13px;
}

.correction-workbench-entry,
.report-center-entry {
  min-height: 66px;
  box-shadow: none;
}

/* Quick screening: stable compact rows on every phone width. */
.quick-filter-title {
  min-height: 48px;
  align-items: center;
  margin-bottom: 10px;
}

.quick-filter-title h1 {
  font-family: "KaiTi", "STKaiti", "Microsoft YaHei", sans-serif;
  font-size: calc(32px * var(--app-text-scale));
  font-weight: 500;
  letter-spacing: 1px;
}

.quick-filter-list {
  gap: 6px;
}

.quick-filter-row {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: minmax(44px, auto);
  align-items: center;
  padding: 6px 8px;
  gap: 7px;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  box-shadow: none;
}

.quick-filter-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 2px;
}

.quick-filter-copy > b {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  font-family: "Segoe Print", "Bradley Hand", "KaiTi", cursive;
  font-size: calc(16px * var(--app-text-scale));
  font-weight: 500;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quick-meaning-mask {
  display: grid;
  width: 100%;
  min-height: 20px;
  max-height: 22px;
  padding: 2px 7px;
  place-items: center start;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: transparent;
  font-size: calc(11px * var(--app-text-scale));
  line-height: 1.35;
  -webkit-line-clamp: 2;
}

.quick-meaning-mask.revealed {
  display: -webkit-box;
  max-height: none;
  background: var(--surface-2);
  color: var(--ink-1);
}

.quick-meaning-eye {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--ink-3) !important;
}

.quick-meaning-eye svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.quick-filter-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.quick-filter-actions button,
.quick-star {
  width: 36px;
  height: 36px;
  border-color: var(--border-1);
  border-radius: 11px;
  background: var(--surface-1);
  font-size: calc(12px * var(--app-text-scale));
}

.quick-filter-actions svg,
.quick-star svg {
  width: 18px;
  height: 18px;
}

.quick-cut.on {
  border-color: color-mix(in srgb, var(--danger-1) 40%, var(--border-1));
  background: var(--danger-soft-1);
  color: var(--danger-1);
}

.quick-star.on,
.study-favorite.on {
  border-color: color-mix(in srgb, var(--warning-1) 40%, var(--border-1));
  background: var(--warning-soft-1);
  color: var(--warning-1);
}

/* Quick screening actions live behind the card and appear only after a left swipe. */
.quick-filter-row {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  touch-action: pan-y;
}

.quick-filter-main {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface-1);
  transform: translateX(0);
  transition: transform 180ms ease;
  will-change: transform;
}

.quick-filter-row.actions-open .quick-filter-main {
  transform: translateX(-168px);
}

.quick-filter-main.is-swiping { transition: none; }

.quick-swipe-hint {
  color: var(--ink-3);
  font-size: 22px;
  line-height: 1;
  text-align: center;
  transition: transform 180ms ease;
}

.quick-filter-row.actions-open .quick-swipe-hint { transform: rotate(180deg); }

.quick-filter-actions {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  width: 168px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  background: var(--border-1);
}

.quick-filter-actions button,
.quick-filter-actions .quick-star {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 58px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: calc(11px * var(--app-text-scale));
  font-weight: 700;
}

.quick-filter-actions button:last-child {
  background: var(--brand-soft);
  color: var(--brand-1);
}

.quick-filter-actions .quick-cut.on {
  background: var(--danger-soft-1);
  color: var(--danger-1);
}

.quick-filter-row:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }

/* Data and charts. */
.stats-list-card {
  padding: 0 14px;
}

.stats-list-row {
  min-height: 50px;
  border-color: var(--border-1);
}

.stats-list-row b {
  font-weight: 650;
}

.stats-range-tabs {
  background: var(--surface-3);
}

.stats-range-tabs button.active,
.study-tabs button.active,
.global-font-options button.active {
  background: var(--surface-1);
  color: var(--ink-1);
  box-shadow: none;
}

.trend-grid line {
  stroke: var(--border-1);
}

.trend-series circle {
  stroke: var(--surface-1);
}

.trend-series.learn polyline { stroke: var(--chart-learn); }
.trend-series.learn circle,
.legend.learn { fill: var(--chart-learn); background: var(--chart-learn); }
.trend-series.review polyline { stroke: var(--chart-review); }
.trend-series.review circle,
.legend.review { fill: var(--chart-review); background: var(--chart-review); }

.trend-labels text,
.trend-y-labels text {
  fill: var(--ink-3);
}

.calendar-head button {
  background: var(--surface-2);
  color: var(--ink-2);
}

.calendar-grid span.active {
  background: var(--brand-soft);
  color: var(--brand-2);
}

/* Appearance settings. */
.display-settings-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.display-settings-card {
  box-shadow: none;
}

.theme-options {
  display: grid;
  gap: 9px;
  padding-bottom: 154px;
}

.theme-option {
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 28px;
  min-height: 104px;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  color: var(--ink-1);
  text-align: left;
}

.theme-option.selected {
  border-color: var(--brand-1);
  box-shadow: 0 0 0 1px var(--brand-1);
}

.theme-miniature {
  --preview-bg: #f5f6f8;
  --preview-surface: #fff;
  --preview-accent: #315fba;
  position: relative;
  display: block;
  width: 108px;
  height: 76px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--preview-accent) 15%, transparent);
  border-radius: 11px;
  background: var(--preview-bg);
}

.theme-miniature[data-preview-theme="paper-green"] { --preview-bg: #f4f2ea; --preview-surface: #fffefa; --preview-accent: #4f755d; }
.theme-miniature[data-preview-theme="mist-purple"] { --preview-bg: #f4f3f8; --preview-surface: #fefeff; --preview-accent: #665b98; }
.theme-miniature[data-preview-theme="cherry-pink"] { --preview-bg: #f8f3f4; --preview-surface: #fffdfd; --preview-accent: #a5556b; }
.theme-miniature[data-preview-theme="night-study"] { --preview-bg: #111827; --preview-surface: #202c42; --preview-accent: #80a9eb; }

.theme-miniature i,
.theme-miniature strong {
  position: absolute;
  display: block;
  border-radius: 5px;
  background: var(--preview-surface);
}

.theme-miniature i:nth-child(1) { top: 10px; left: 9px; width: 29px; height: 25px; }
.theme-miniature i:nth-child(2) { top: 10px; right: 9px; width: 54px; height: 7px; background: var(--preview-accent); opacity: .8; }
.theme-miniature i:nth-child(3) { top: 23px; right: 9px; width: 48px; height: 12px; }
.theme-miniature strong { right: 9px; bottom: 10px; left: 9px; height: 24px; }
.theme-miniature strong::after { position: absolute; right: 7px; bottom: 6px; width: 34px; height: 5px; border-radius: 3px; background: var(--preview-accent); content: ""; }

.theme-option-copy b,
.theme-option-copy small {
  display: block;
}

.theme-option-copy b {
  font-size: calc(15px * var(--app-text-scale));
  font-weight: 680;
}

.theme-option-copy small {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: calc(11px * var(--app-text-scale));
  line-height: 1.4;
}

.theme-swatches {
  --swatch-1: #315fba;
  --swatch-2: #e8effa;
  --swatch-3: #eef2f6;
  display: flex;
  gap: 5px;
  margin-top: 9px;
}

.theme-swatches i {
  width: 13px;
  height: 13px;
  border: 1px solid var(--border-1);
  border-radius: 50%;
  background: var(--swatch-1);
}

.theme-option[data-theme-key="paper-green"] .theme-swatches { --swatch-1: #4f755d; --swatch-2: #e4eee7; --swatch-3: #eeeee6; }
.theme-option[data-theme-key="mist-purple"] .theme-swatches { --swatch-1: #665b98; --swatch-2: #ebe8f4; --swatch-3: #efedf5; }
.theme-option[data-theme-key="cherry-pink"] .theme-swatches { --swatch-1: #a5556b; --swatch-2: #f3e2e7; --swatch-3: #f3e9ec; }
.theme-option[data-theme-key="night-study"] .theme-swatches { --swatch-1: #80a9eb; --swatch-2: #223651; --swatch-3: #202c42; }
.theme-swatches i:nth-child(2) { background: var(--swatch-2); }
.theme-swatches i:nth-child(3) { background: var(--swatch-3); }

.theme-check {
  display: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-1);
  color: #fff;
  font-size: 15px;
}

.theme-option.selected .theme-check {
  display: grid;
}

.theme-actions {
  position: fixed;
  z-index: 25;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  width: min(100%, 600px);
  margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-1);
  background: var(--surface-1);
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  backdrop-filter: blur(14px);
}

.theme-actions .primary-btn,
.theme-actions .secondary-btn {
  width: 100%;
}

.theme-reset {
  grid-column: 1 / -1;
  min-height: 42px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-control);
  color: var(--ink-2);
}

/* Modals, auth and learning routes inherit every skin. */
.sheet,
.modal-card,
.study-card,
.question-card,
.option,
.confusion-option,
.vocabulary-test-card,
.vocabulary-test-option,
.vocabulary-test-result-card,
.vocabulary-entry-card,
.license-card,
.report-section {
  border-color: var(--border-1);
  background: var(--surface-1);
  color: var(--ink-1);
  box-shadow: var(--shadow-1);
}

.modal-mask {
  background: rgba(10, 18, 32, .48);
}

.auth-shell {
  background: var(--app-bg);
}

.auth-orb {
  opacity: .08;
  filter: none;
}

.auth-logo,
.brand-mark {
  background: var(--brand-1);
  box-shadow: none;
}

.empty,
.loading,
.vocabulary-test-rule,
.vocabulary-resume-note {
  color: var(--ink-2);
}

.danger-outline,
.text-action.danger {
  color: var(--danger-1);
}

@media (max-width: 389px) {
  .content {
    padding-right: 13px;
    padding-left: 13px;
  }

  .hero.home-study-card {
    height: 148px !important;
    min-height: 148px !important;
    padding: 18px !important;
  }

  .home-study-copy {
    width: 72%;
  }

  .home-study-copy h1 {
    font-size: calc(21px * var(--app-text-scale));
  }

  .home-study-facts > span {
    min-width: 78px;
    padding: 0 8px;
  }

  .home-study-visual {
    right: 7px;
    transform: scale(.88);
    transform-origin: right bottom;
  }

  .theme-option {
    grid-template-columns: 90px minmax(0, 1fr) 26px;
    gap: 10px;
    padding: 10px;
  }

  .theme-miniature {
    width: 90px;
    height: 68px;
  }
}

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

/* Theme-specific home artwork is the final home-card contract. */
.hero.home-study-card {
  position: relative;
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 1 !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 20px !important;
  background: transparent var(--home-card-image, url('home_theme_clear_blue.jpg')) center / cover no-repeat !important;
  box-shadow: none !important;
  color: #fff;
}

.hero.home-study-card::before,
.hero.home-study-card::after { display: none; }

.home-card-live-layer {
  position: absolute;
  inset: 0;
}

.home-card-greeting {
  position: absolute;
  z-index: 1;
  top: 13%;
  left: 7%;
  color: #fff;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
  font-size: calc(12px * var(--app-text-scale));
  font-weight: 500;
  letter-spacing: .5px;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(8, 25, 60, .38);
  white-space: nowrap;
}

.home-card-facts {
  position: absolute;
  z-index: 1;
  bottom: 15%;
  left: 5%;
  display: flex;
  align-items: center;
  gap: 5px;
}

.home-card-stat {
  display: flex;
  min-width: 70px;
  height: 32px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 9px;
  background: rgba(8, 27, 65, .25);
  box-shadow: 0 4px 16px rgba(8, 25, 60, .1);
  color: #fff;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(8, 25, 60, .35);
  backdrop-filter: blur(5px);
  white-space: nowrap;
}

.home-card-stat small {
  color: rgba(255, 255, 255, .82);
  font-size: calc(9px * var(--app-text-scale));
  font-weight: 500;
}

.home-card-stat strong {
  font-size: min(calc(14px * var(--app-text-scale)), 3.6vw);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.task-progress-grid > div {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.notification-settings-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.notification-settings-actions .secondary-btn {
  width: 100%;
}

.phrase-book-group .section-title {
  padding-right: 7px;
  padding-left: 7px;
}

/* Desktop workspace: the phone layout above remains the source of truth below 900px. */
.desktop-toolbar {
  position: fixed;
  z-index: 35;
  top: calc(9px + env(safe-area-inset-top));
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.desktop-toolbar button {
  display: inline-flex;
  min-width: 78px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border-1);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  box-shadow: 0 8px 24px rgba(16, 30, 54, .1);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 720;
  pointer-events: auto;
  backdrop-filter: blur(16px);
}

.desktop-toolbar-search { display: none; }

.tauri-window-titlebar {
  display: none;
}

html.tauri-client {
  --tauri-titlebar-height: 32px;
}

html.tauri-client body {
  min-height: 100dvh;
  padding-top: var(--tauri-titlebar-height);
}

html.tauri-client #app,
html.tauri-client .content {
  min-height: calc(100dvh - var(--tauri-titlebar-height));
}

/* Keep the desktop study action two 48px button-heights above its mobile position. */
html.tauri-client .item-study-next {
  bottom: max(120px, calc(env(safe-area-inset-bottom) + 108px));
}

html.tauri-client .item-study-screen {
  padding-bottom: 180px;
}

html.tauri-client .tauri-window-titlebar:not([hidden]) {
  position: fixed;
  z-index: 220;
  inset: 0 0 auto;
  display: flex;
  height: var(--tauri-titlebar-height);
  align-items: stretch;
  border-bottom: 1px solid color-mix(in srgb, var(--border-1) 72%, transparent);
  background: color-mix(in srgb, var(--surface-1) 98%, transparent);
  color: var(--ink-2);
  user-select: none;
}

.tauri-window-drag-region {
  min-width: 0;
  flex: 1;
}

.tauri-window-controls {
  display: flex;
  height: 100%;
  margin-left: auto;
}

.tauri-window-controls button {
  display: grid;
  width: 46px;
  height: 100%;
  place-items: center;
  border-radius: 0;
  color: var(--ink-2);
  font-family: "Segoe UI Symbol", sans-serif;
  font-size: 16px;
  line-height: 1;
}

.tauri-window-controls button:hover {
  background: var(--surface-3);
  color: var(--ink-1);
}

.tauri-window-controls .tauri-window-close:hover {
  background: #c42b1c;
  color: #fff;
}

#app:has(> .desktop-toolbar:not([hidden])) .content {
  padding-top: calc(64px + env(safe-area-inset-top));
}

@media (min-width: 900px) {
  :root {
    --desktop-nav-width: 216px;
    --desktop-content-width: 1240px;
  }

  html {
    min-width: 0;
    overflow-x: hidden;
  }

  body {
    min-width: 0;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
  }

  #app {
    min-width: 0;
    min-height: 100dvh;
  }

  .desktop-toolbar {
    position: fixed;
    z-index: 35;
    top: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 clamp(30px, 4vw, 64px);
    pointer-events: none;
  }

  #app:has(> .bottom-nav:not([hidden])) .desktop-toolbar {
    left: max(
      var(--desktop-nav-width),
      calc((100vw + var(--desktop-nav-width) - var(--desktop-content-width)) / 2)
    );
    width: min(calc(100% - var(--desktop-nav-width)), var(--desktop-content-width));
  }

  #app:has(> .bottom-nav[hidden]) .desktop-toolbar {
    left: 50%;
    width: min(100%, 1040px);
    padding-right: clamp(30px, 5vw, 64px);
    padding-left: clamp(30px, 5vw, 64px);
    transform: translateX(-50%);
  }

  .desktop-toolbar button {
    display: inline-flex;
    min-width: 88px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--border-1);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-1) 96%, transparent);
    box-shadow: 0 8px 24px rgba(16, 30, 54, .08);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 720;
    pointer-events: auto;
    backdrop-filter: blur(16px);
  }

  .desktop-toolbar-back {
    grid-column: 1;
    justify-self: start;
  }

  .desktop-toolbar .desktop-toolbar-search {
    display: inline-flex;
    width: 390px;
    min-width: 390px;
    height: 50px;
    min-height: 50px;
    grid-column: 2;
    justify-self: center;
    gap: 9px;
    margin-left: 0;
    padding: 10px 24px;
    color: var(--brand-1) !important;
    font-size: calc(16px * var(--app-text-scale));
  }

  html.tauri-client .desktop-toolbar {
    top: calc(var(--tauri-titlebar-height) + 20px);
  }

  #app:has(> .bottom-nav:not([hidden])) .content {
    width: min(calc(100% - var(--desktop-nav-width)), var(--desktop-content-width));
    max-width: var(--desktop-content-width);
    min-height: 100dvh;
    margin-right: auto;
    margin-left: max(
      var(--desktop-nav-width),
      calc((100vw + var(--desktop-nav-width) - var(--desktop-content-width)) / 2)
    );
    padding: 32px clamp(30px, 4vw, 64px) 52px;
  }

  #app:has(> .bottom-nav[hidden]) .content {
    width: min(100%, 1040px);
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px clamp(30px, 5vw, 64px) 52px;
  }

  #app:has(> .desktop-toolbar:not([hidden])) .content {
    padding-top: 92px;
  }

  .bottom-nav {
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--desktop-nav-width);
    height: 100dvh;
    flex-direction: column;
    grid-auto-flow: initial;
    gap: 6px;
    padding: 24px 14px 18px;
    transform: none;
    border: 0;
    border-right: 1px solid var(--border-1);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface-1) 97%, transparent);
    box-shadow: 8px 0 28px rgba(16, 30, 54, .025);
    backdrop-filter: blur(18px);
  }

  .bottom-nav::before {
    display: flex;
    min-height: 58px;
    align-items: center;
    margin: 0 7px 24px;
    padding: 0 0 0 62px;
    background: url('pdf_footer_icon.png') left center / 52px 52px no-repeat;
    color: var(--ink-1);
    content: "英阶\A StepEnglish";
    font-size: 18px;
    font-weight: 780;
    letter-spacing: -.25px;
    line-height: 1.28;
    white-space: pre;
  }

  .bottom-nav::after {
    content: none;
  }

  html.tauri-client .bottom-nav {
    top: var(--tauri-titlebar-height);
    height: calc(100dvh - var(--tauri-titlebar-height));
  }

  html.tauri-client .floating-session-dock {
    top: calc(var(--tauri-titlebar-height) + 24px);
  }

  .nav-btn {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 50px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    justify-content: stretch;
    justify-items: start;
    gap: 10px;
    padding: 0 13px;
    border-radius: 11px;
    color: var(--ink-2);
    text-align: left;
  }

  .nav-btn[data-route="me"] {
    margin-top: auto;
  }

  .nav-btn svg {
    width: 23px;
    height: 23px;
    padding: 1px;
  }

  .nav-btn small {
    font-size: calc(14px * var(--app-text-scale));
    font-weight: 620;
  }

  .nav-btn.active {
    background: var(--brand-soft);
    color: var(--brand-2);
  }

  .nav-btn.active::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: -14px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--brand-1);
    content: "";
  }

  .page-title {
    margin-bottom: 20px;
  }

  .page-title h1 {
    font-size: calc(31px * var(--app-text-scale));
  }

  .section-title {
    margin-top: 26px;
  }

  .card,
  .book-list,
  .settings-list,
  .people-list,
  .admin-list,
  .task-history,
  .display-settings-list,
  .me-settings-group {
    --shadow-1: 0 1px 2px rgba(16, 30, 54, .025), 0 8px 24px rgba(16, 30, 54, .05);
  }

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

  .shortcut-card {
    min-height: 94px;
  }

  .book-list,
  .people-list,
  .admin-list {
    display: grid;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .book-list > .card,
  .people-list > .card,
  .admin-list > .card {
    border: 1px solid var(--border-1);
    border-radius: var(--radius-card);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
  }

  .book-list > :last-child,
  .people-list > :last-child,
  .admin-list > :last-child {
    border-bottom: 1px solid var(--border-1);
  }

  .book-list > .empty,
  .book-list > .loading,
  .people-list > .empty,
  .people-list > .loading,
  .admin-list > .empty,
  .admin-list > .loading,
  .phrase-book-group {
    grid-column: 1 / -1;
  }

  .phrase-book-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .phrase-book-group > .section-title {
    grid-column: 1 / -1;
    margin-bottom: -2px;
  }

  .user-wordbook-list,
  .teacher-paper-list,
  .student-dictation-tasks,
  .local-article-list,
  .favorite-list,
  .diagnosis-rule-list,
  .review-backlog-list,
  .my-feedback-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .teacher-content-navigation {
    gap: 14px;
  }

  .teacher-content-navigation > button {
    min-height: 104px;
    padding: 20px 42px 20px 20px;
  }

  .teacher-content-navigation span {
    top: 34px;
    right: 20px;
  }

  .me-section-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
  }

  .stats-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px 20px;
  }

  .stats-page > .section-title,
  .stats-page > .stats-range-head,
  .stats-page > .trend-empty {
    grid-column: 1 / -1;
  }

  .stats-page > .section-title {
    margin: 8px 2px -6px;
  }

  .stats-page > .stats-range-head {
    margin-top: 4px;
  }

  .stats-page > .overview-card,
  .stats-page > .diagnosis-entry {
    min-height: 100%;
  }

  .chart-card,
  .calendar-card {
    min-width: 0;
  }

  .trend-chart svg {
    height: 178px;
  }

  .quick-filter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }

  .quick-pagination {
    width: min(100%, 560px);
    margin: 18px auto 0;
  }

  .quick-filter-main {
    min-height: 66px;
    padding: 8px 10px;
  }

  .quick-filter-actions button,
  .quick-filter-actions .quick-star {
    min-height: 66px;
  }

  .report-v9 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
  }

  .report-v9 > .report-page-nav,
  .report-v9 > .report-tabs,
  .report-v9 > .report-period-control,
  .report-v9 > .report-metrics,
  .report-v9 > .report-cover,
  .report-v9 > .report-export,
  .report-v9 > .report-note-form {
    grid-column: 1 / -1;
  }

  .report-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .study-route-content,
  .audio-training-route {
    max-width: 960px !important;
  }

  .study-screen {
    min-height: calc(100dvh - 84px);
  }

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

  .study-option {
    min-height: 64px;
    max-height: none;
  }

  .item-study-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .item-study-section:first-child,
  .item-study-section:only-child {
    grid-column: 1 / -1;
  }

  .modal-mask {
    align-items: center;
    padding: 32px;
  }

  .sheet {
    width: min(100%, 640px);
    max-height: min(84dvh, 820px);
    padding: 24px;
    border: 1px solid var(--border-1);
    border-radius: 22px;
    box-shadow: 0 24px 72px rgba(10, 18, 32, .22);
  }

  .sheet-handle {
    display: none;
  }

  .global-lookup-mask {
    align-items: center;
    padding: 32px;
  }

  .global-lookup-sheet {
    width: min(100%, 720px);
    max-height: min(82dvh, 780px);
  }

  .global-lookup-results {
    max-height: calc(min(82dvh, 780px) - 148px);
  }

  .theme-actions {
    left: 50%;
    width: min(calc(100% - var(--desktop-nav-width)), 1040px);
    padding-bottom: 14px;
    transform: translateX(calc(var(--desktop-nav-width) / 2));
  }

  .toast {
    bottom: 28px;
  }

  .floating-session-dock {
    top: 24px;
    right: 24px;
  }

  .auth-shell {
    display: grid;
    min-height: min(720px, calc(100dvh - 64px));
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 36px 64px;
    margin: 0;
    padding: clamp(40px, 7vw, 80px);
    border: 1px solid var(--border-1);
    border-radius: 28px;
    box-shadow: var(--shadow-1);
  }

  .auth-brand {
    grid-column: 1 / -1;
    align-self: start;
  }

  .auth-copy {
    align-self: center;
    margin-top: 0;
  }

  .auth-copy h1 {
    font-size: clamp(40px, 3.8vw, 52px);
  }

  .auth-actions {
    width: min(100%, 380px);
    align-self: center;
    justify-self: end;
    margin-top: 0;
  }

  .launch-screen {
    min-height: calc(100dvh - 64px);
  }

  :is(
    button,
    a,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]
  ):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-1) 48%, transparent);
    outline-offset: 3px;
  }
}

@media (min-width: 1180px) {
  #content:has(> .guest-home-card):has(> .guest-feature-list) {
    display: grid;
    grid-template-areas:
      "hero banner"
      "hero primary"
      "feature-title feature-title"
      "features features";
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr);
    grid-template-rows: auto auto auto auto;
    align-content: start;
    align-items: start;
    gap: 10px 24px;
  }

  #content:has(> .guest-home-card) > .guest-mode-banner { grid-area: banner; }
  #content:has(> .guest-home-card) > .guest-home-card { grid-area: hero; min-height: 326px; }
  #content:has(> .guest-home-card) > .guest-locked-primary { grid-area: primary; margin-top: 0; }
  #content:has(> .guest-home-card) > .section-title { grid-area: feature-title; }
  #content:has(> .guest-home-card) > .guest-feature-list {
    grid-area: features;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #content:has(> .home-study-card) {
    display: grid;
    grid-template-areas:
      "hero task-title"
      "hero task"
      "hero tools-title"
      "hero tools"
      "actions tools"
      "book-title tools"
      "book tools"
      "weak tools"
      "backlog .";
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr);
    grid-template-rows: repeat(9, auto);
    align-content: start;
    align-items: start;
    gap: 8px 18px;
  }

  #content:has(> .home-study-card):has(> .add-more-home) {
    grid-template-areas:
      "hero task-title"
      "hero task"
      "hero add"
      "hero tools-title"
      "actions tools"
      "book-title tools"
      "book tools"
      "weak tools"
      "backlog .";
  }

  #content:has(> .home-study-card) > .home-study-card { grid-area: hero; }
  #content:has(> .home-study-card) > .home-study-actions { grid-area: actions; margin-top: 0; }
  #content:has(> .home-study-card) > .section-title:has(+ .home-task-card) { grid-area: task-title; }
  #content:has(> .home-study-card) > .home-task-card { grid-area: task; }
  #content:has(> .home-study-card) > .add-more-home { grid-area: add; margin-top: 0; }
  #content:has(> .home-study-card) > .section-title:has(+ .book-card) { grid-area: book-title; }
  #content:has(> .home-study-card) > .book-card { grid-area: book; }
  #content:has(> .home-study-card) > .book-card + .weak-entry { grid-area: weak; }
  #content:has(> .home-study-card) > .review-backlog-entry { grid-area: backlog; }
  #content:has(> .home-study-card) > .section-title:has(+ .shortcut-grid) { grid-area: tools-title; }
  #content:has(> .home-study-card) > .shortcut-grid {
    grid-area: tools;
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  #content:has(> .home-study-card) > .shortcut-grid .shortcut-card {
    min-height: 0;
  }

  #content:has(> .home-study-card) > .section-title {
    align-self: end;
    margin: 6px 2px 0;
  }

  #content:has(> .home-study-card) > .home-study-card {
    max-height: 360px;
  }

  #content:has(> .home-study-card) .home-card-greeting {
    font-size: calc(17px * var(--app-text-scale));
  }

  #content:has(> .home-study-card) .home-card-stat {
    min-width: 88px;
    height: 38px;
    gap: 6px;
    padding: 0 10px;
  }

  #content:has(> .home-study-card) .home-card-stat small {
    font-size: calc(10px * var(--app-text-scale));
  }

  #content:has(> .home-study-card) .home-card-stat strong {
    font-size: calc(18px * var(--app-text-scale));
  }

  #content:has(> .home-study-card) .home-task-card .task-progress-grid b {
    font-size: calc(21px * var(--app-text-scale));
  }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .nav-btn,
  .card,
  .shortcut-card,
  .primary-btn,
  .secondary-btn,
  .mini-btn,
  .setting,
  .choice,
  .study-option,
  .quick-filter-main,
  .global-lookup-result,
  .local-article-card,
  .theme-option {
    transition: border-color .16s ease, background-color .16s ease, color .16s ease,
      box-shadow .16s ease, transform .16s ease;
  }

  .nav-btn:hover {
    background: var(--surface-2);
    color: var(--brand-2);
  }

  .nav-btn.active:hover {
    background: color-mix(in srgb, var(--brand-soft) 82%, var(--surface-1));
  }

  :is(.shortcut-card, .book-selectable, .user-wordbook-card, .person-card,
    .weak-entry, .diagnosis-entry, .correction-workbench-entry, .report-center-entry,
    .vocabulary-history-row, .local-article-card, .favorite-row, .setting,
    .teacher-content-navigation > button):hover {
    border-color: color-mix(in srgb, var(--brand-1) 28%, var(--border-1));
    box-shadow: 0 10px 28px rgba(16, 30, 54, .075);
    transform: translateY(-1px);
  }

  :is(.primary-btn, .secondary-btn, .mini-btn, .choice, .study-option,
    .stats-range-tabs button, .wordbook-source-tabs button,
    .book-content-segment button, .favorite-library-tabs button,
    .article-filter-tabs button):not(:disabled):hover {
    filter: brightness(.975);
    transform: translateY(-1px);
  }

  .quick-filter-row:hover {
    border-color: color-mix(in srgb, var(--brand-1) 24%, var(--border-1));
  }

  .quick-filter-row:not(.actions-open):hover .quick-swipe-hint {
    color: var(--brand-1);
    transform: translateX(-2px);
  }

  .global-lookup-result:hover {
    background: var(--surface-2);
  }
}