@font-face {
  font-family: "Edmund Serif TC";
  src: url("fonts/NotoSerifTC-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --navy: #1f5f3d;
  --navy-deep: #123722;
  --blue: #2f7d52;
  --blue-bright: #42a06f;
  --blue-soft: #e3f3e9;
  --accent-text: #286b46;
  --violet: #527657;
  --violet-soft: #e4eee5;
  --coral: #a74732;
  --coral-soft: #fff0ed;
  --green: #217a4f;
  --green-soft: #e7f6ed;
  --gold: #b67b22;
  --ink: #1e3428;
  --muted: #587064;
  --line: rgba(37, 84, 57, .18);
  --paper: rgba(249, 253, 250, .95);
  --shadow: 0 24px 72px rgba(13, 53, 33, .2);
  --radius: 26px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  min-height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 9%, rgba(126, 192, 146, .5), transparent 32%),
    radial-gradient(circle at 7% 86%, rgba(71, 139, 94, .22), transparent 35%),
    linear-gradient(135deg, #d7ecde 0%, #f7fbf8 49%, #c8e4d1 100%);
  font-family: "Edmund Serif TC", "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
  line-height: 1.58;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 50% -10%, rgba(226, 248, 233, .8), transparent 43%),
    linear-gradient(90deg, rgba(18, 75, 46, .12), transparent 20% 80%, rgba(18, 75, 46, .12));
}

body[data-phrasal-verb-view="login"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(103, 177, 127, .55), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(21, 86, 52, .34), transparent 36%),
    linear-gradient(135deg, #123e28 0%, #2d7650 48%, #d9efdf 100%);
}

body[data-phrasal-verb-view="login"]::before {
  opacity: .42;
  background:
    radial-gradient(circle at 24% 22%, rgba(185, 232, 198, .26), transparent 32%),
    linear-gradient(90deg, rgba(5, 42, 24, .4), transparent 45%, rgba(5, 42, 24, .12));
}

button,
input { font: inherit; }

button { touch-action: manipulation; }

button:focus-visible,
input:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(55, 151, 96, .42);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy-deep);
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  margin-left: 0;
  border-bottom: 1px solid rgba(29, 96, 61, .12);
  background: rgba(255, 250, 243, .9);
  box-shadow: 0 8px 30px rgba(22, 74, 47, .07);
  backdrop-filter: blur(20px) saturate(1.15);
}

body > .site-header.edmund-system-header {
  width: 100%;
  margin-left: 0;
  border-bottom-color: rgba(29, 96, 61, .13);
  background: rgba(255, 250, 243, .92);
}

.header-inner {
  width: min(1480px, calc(100% - 32px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(29, 96, 61, .12);
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(29, 96, 61, .13);
}

.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { color: var(--navy-deep); font-size: 18px; }
.brand-copy small { color: var(--muted); font-size: 11px; letter-spacing: .07em; }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.connection-pill,
.user-pill,
.header-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--navy);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 6px 16px rgba(29, 96, 61, .055);
  font-size: 12px;
  font-weight: 800;
}

.connection-pill::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #d29b35;
  box-shadow: 0 0 0 4px rgba(210, 155, 53, .14);
}

.connection-pill[data-state="online"]::before {
  background: #2c9866;
  box-shadow: 0 0 0 4px rgba(44, 152, 102, .14);
}

.connection-pill[data-state="error"]::before {
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(201, 81, 67, .14);
}

.header-button {
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.header-button:hover,
.header-button:focus-visible {
  border-color: rgba(45, 126, 82, .34);
  background: #fff;
  transform: translateY(-1px);
}

.app-shell {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 46px 0 92px;
}

.glass-panel {
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(1.05);
}

.eyebrow {
  margin: 0 0 9px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
}

.login-layout {
  min-height: calc(100vh - 210px);
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr);
  gap: 24px;
  align-items: stretch;
}

.login-hero {
  position: relative;
  min-height: 650px;
  padding: clamp(34px, 5vw, 78px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 17%, rgba(157, 218, 174, .25), transparent 34%),
    linear-gradient(145deg, #123d27 0%, #1e6841 58%, #3b8b5c 100%);
}

.login-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border: 70px solid rgba(191, 236, 204, .1);
  border-radius: 50%;
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255, 255, 255, .26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .26) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(135deg, #000, transparent 80%);
}

.login-hero > *:not(.hero-grid) { position: relative; z-index: 1; }
.login-hero .eyebrow {
  color: #d2f3dc;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: .13em;
}

.student-label {
  width: max-content;
  margin: 0 0 11px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  padding: 5px 12px;
  color: #ddf5e4;
  background: rgba(255, 255, 255, .09);
  font-size: 12px;
  font-weight: 800;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.hero-copy h1 span {
  color: #c7f0d3;
  font-size: .84em;
  letter-spacing: -.01em;
}

.hero-copy > p:last-child {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(239, 253, 244, .9);
  font-size: 16px;
}

.login-panel {
  padding: clamp(30px, 4vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}

.section-number {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 9px 20px rgba(29, 96, 61, .21);
  font-size: 13px;
  font-weight: 900;
}

.login-heading h2 {
  margin: 0;
  color: var(--navy-deep);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.2;
}

.login-heading p:last-child {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.login-form {
  margin-top: 34px;
  display: grid;
  gap: 18px;
}

.field { display: grid; gap: 8px; }
.field > span:first-child { color: var(--navy); font-size: 13px; font-weight: 850; }

.field input,
.admin-search input {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(52, 124, 82, .19);
  border-radius: 15px;
  padding: 12px 15px;
  color: var(--ink);
  background: rgba(255, 251, 245, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  font-size: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field input:focus,
.admin-search input:focus {
  border-color: var(--blue-bright);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(55, 151, 96, .11);
  outline: none;
}

.password-field { position: relative; display: block; }
.password-field input { padding-right: 76px; }
.password-field button {
  position: absolute;
  top: 50%;
  right: 9px;
  min-height: 37px;
  border: 0;
  border-radius: 10px;
  padding: 6px 11px;
  color: var(--accent-text);
  background: var(--blue-soft);
  cursor: pointer;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 850;
}

.form-status {
  min-height: 24px;
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.form-status[data-state="error"] { color: var(--coral); }
.form-status[data-state="success"] { color: var(--green); }

.primary-button,
.secondary-button,
.small-button,
.compact-button,
.text-button,
.bookmark-library-button {
  border-radius: 14px;
  cursor: pointer;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.primary-button {
  min-height: 52px;
  border: 1px solid var(--navy);
  padding: 12px 20px;
  color: #fff;
  background: linear-gradient(135deg, #28734b, var(--navy));
  box-shadow: 0 8px 0 #17462d, 0 17px 30px rgba(29, 96, 61, .19);
}

.primary-button:hover,
.primary-button:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 0 #17462d, 0 22px 34px rgba(29, 96, 61, .23); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 3px 0 #17462d, 0 8px 16px rgba(29, 96, 61, .16); }
.primary-button:disabled { cursor: wait; opacity: .58; transform: none; }

.secondary-button,
.compact-button,
.small-button,
.bookmark-library-button {
  min-height: 43px;
  border: 1px solid rgba(45, 126, 82, .22);
  padding: 9px 15px;
  color: var(--navy);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 20px rgba(29, 96, 61, .07);
}

.secondary-button:hover,
.small-button:hover,
.bookmark-library-button:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-1px); }
.compact-button { width: auto; }
.small-button { min-height: 36px; padding: 7px 12px; font-size: 12px; }

.account-note {
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-hero,
.admin-hero {
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background:
    radial-gradient(circle at 93% 18%, rgba(86, 171, 113, .22), transparent 26%),
    var(--paper);
}

.dashboard-hero h1,
.admin-hero h1,
.utility-heading h1 {
  margin: 0;
  color: var(--navy-deep);
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.dashboard-hero p:last-child,
.admin-hero p:last-child,
.utility-heading p:last-child { margin: 13px 0 0; color: var(--muted); }

.dashboard-metric {
  min-width: 155px;
  border: 1px solid rgba(45, 126, 82, .14);
  border-radius: 22px;
  padding: 20px 24px;
  text-align: center;
  background: rgba(232, 246, 236, .9);
}

.dashboard-metric strong { display: block; color: var(--accent-text); font-size: 48px; line-height: 1; }
.dashboard-metric span { color: var(--muted); font-size: 12px; font-weight: 750; }

.sentence-progress-disclosure {
  width: 100%;
  margin-top: 18px;
  border: 1px solid rgba(45, 126, 82, .2);
  border-radius: 18px;
  padding: 17px 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--navy);
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(224, 242, 230, .94));
  box-shadow: 0 11px 28px rgba(29, 96, 61, .08);
  text-align: left;
  cursor: pointer;
}
.sentence-progress-disclosure:hover,
.sentence-progress-disclosure:focus-visible { border-color: var(--blue); transform: translateY(-1px); }
.sentence-progress-disclosure > span:first-child { display: grid; gap: 3px; }
.sentence-progress-disclosure strong { font-size: 18px; }
.sentence-progress-disclosure small { color: var(--muted); font-size: 11px; font-weight: 750; }
.sentence-progress-disclosure-state { flex: 0 0 auto; border-radius: 999px; padding: 7px 12px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 900; }

.lesson-search-panel { margin: 24px 0; padding: 24px; display: grid; gap: 15px; }
.lesson-search-panel h2 { margin: 3px 0 0; }
.lesson-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.lesson-search-form input { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; color: var(--navy); background: rgba(255, 255, 255, .92); font: inherit; }
.lesson-search-form input:focus { outline: 3px solid color-mix(in srgb, var(--blue) 24%, transparent); border-color: var(--blue); }
.lesson-search-form button { border: 0; border-radius: 14px; padding: 0 22px; color: #fff; background: var(--navy); font: inherit; font-weight: 900; cursor: pointer; }
.lesson-search-summary { margin: 0; color: var(--muted); }
.lesson-search-results { display: grid; gap: 9px; max-height: 520px; overflow: auto; }
.lesson-search-result { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; text-align: left; color: var(--navy); background: rgba(255, 255, 255, .9); cursor: pointer; }
.lesson-search-result:hover, .lesson-search-result:focus-visible { border-color: var(--blue); transform: translateY(-1px); }
.lesson-search-result > span { grid-row: 1 / span 2; align-self: start; border-radius: 999px; padding: 4px 8px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 900; }
.lesson-search-result strong, .lesson-search-result small { min-width: 0; }
.lesson-search-result small { color: var(--muted); line-height: 1.45; }

.lesson-choice-grid {
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lesson-choice-card { position: relative; min-width: 0; min-height: 310px; }
.lesson-choice-card > .lesson-choice { width: 100%; height: 100%; }
.lesson-choice-card .lesson-choice h2 { padding-right: 45px; }
.lesson-choice-card .lesson-choice:has(.lesson-choice-illustration) {
  justify-content: flex-end;
  min-height: 390px;
  padding-top: 214px;
  background:
    radial-gradient(circle at 84% 20%, rgba(255, 230, 113, .42), transparent 29%),
    linear-gradient(145deg, #fffdf7, #fff0dc 64%, #ffd493);
}
.lesson-choice-illustration {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 205px;
  border-bottom: 1px solid rgba(45, 126, 82, .22);
  display: block;
  object-fit: cover;
}
.lesson-section-bookmark {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(182, 123, 34, .3);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: rgba(255, 250, 240, .96);
  box-shadow: 0 8px 21px rgba(31, 75, 50, .12);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.lesson-section-bookmark:hover,
.lesson-section-bookmark:focus-visible { border-color: var(--gold); transform: translateY(-1px); }
.lesson-section-bookmark[aria-pressed="true"] { color: #fff; border-color: var(--gold); background: var(--gold); }

.lesson-choice {
  position: relative;
  min-height: 310px;
  border: 1px solid rgba(45, 126, 82, .17);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  color: inherit;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 16px 42px rgba(22, 74, 47, .1);
  text-align: left;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.lesson-choice::after {
  content: attr(data-number);
  position: absolute;
  right: -5px;
  bottom: -42px;
  color: rgba(45, 126, 82, .065);
  font-size: 190px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.lesson-choice[data-tone="violet"] {
  border-color: rgba(45, 126, 82, .22);
  background: linear-gradient(145deg, #fbfefc, #dceee2);
}

.lesson-choice[data-tone="violet"]::after { color: rgba(34, 111, 70, .08); }

.lesson-choice[data-tone="bookmark"] {
  color: #fff;
  border-color: rgba(255, 255, 255, .24);
  background:
    radial-gradient(circle at 80% 20%, rgba(183, 232, 197, .22), transparent 28%),
    linear-gradient(145deg, #143f29, #1f6b43 58%, #36915e);
}

.lesson-choice[data-tone="bookmark"]::after { color: rgba(255, 255, 255, .08); }
.lesson-choice:not([data-tone="bookmark"]) { justify-content: center; }

.lesson-choice.is-complete {
  border-color: rgba(182, 123, 34, .52);
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, .55), transparent 25%),
    linear-gradient(145deg, #fff8d9, #e5b94f 58%, #c98c25);
  box-shadow: 0 18px 46px rgba(154, 99, 17, .2);
}

.lesson-choice-card .lesson-choice.is-complete:has(.lesson-choice-illustration) {
  border-color: rgba(182, 123, 34, .52);
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, .55), transparent 25%),
    linear-gradient(145deg, #fff8d9, #e5b94f 58%, #c98c25);
  box-shadow: 0 18px 46px rgba(154, 99, 17, .2);
}

.lesson-choice.is-complete::after { color: rgba(111, 67, 8, .11); }
.lesson-choice.is-complete h2,
.lesson-choice.is-complete h2 span { color: #53340d; }
.lesson-choice-complete {
  position: relative;
  z-index: 1;
  margin-top: 15px;
  border: 1px solid rgba(93, 55, 5, .18);
  border-radius: 999px;
  padding: 6px 11px;
  color: #5e3a08;
  background: rgba(255, 251, 224, .72);
  font-size: 11px;
  font-weight: 900;
}

.lesson-choice:hover,
.lesson-choice:focus-visible {
  border-color: var(--blue-bright);
  box-shadow: 0 23px 52px rgba(22, 74, 47, .16);
  transform: translateY(-4px);
}

.lesson-choice h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(23px, 2.25vw, 33px); line-height: 1.25; }
.lesson-choice h2 span { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.lesson-choice:has(.lesson-choice-illustration) h2 span {
  margin-top: 6px;
  font-size: .84em;
  line-height: 1.18;
}
.lesson-choice[data-tone="bookmark"] h2 span { color: rgba(255, 255, 255, .72); }
.choice-meta { position: relative; z-index: 1; display: flex; gap: 9px; flex-wrap: wrap; }
.choice-meta span { border-radius: 999px; padding: 5px 10px; color: var(--muted); background: rgba(226, 243, 232, .9); font-size: 11px; font-weight: 800; }
.lesson-choice[data-tone="bookmark"] .choice-meta span { color: #fff; background: rgba(255, 255, 255, .12); }

.sentence-progress-panel {
  margin: 12px 0 24px;
  padding: clamp(24px, 3.2vw, 42px);
}

.progress-summary-metrics {
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.progress-summary-metrics article {
  position: relative;
  min-height: 150px;
  border: 1px solid rgba(45, 126, 82, .2);
  border-radius: 20px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 5%, rgba(255, 187, 45, .27), transparent 32%),
    linear-gradient(145deg, #fffdf9, #e6f3ea);
}

.progress-summary-metrics article::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -42px;
  width: 120px;
  height: 120px;
  border: 24px solid rgba(45, 126, 82, .06);
  border-radius: 50%;
}

.progress-summary-metrics span,
.progress-summary-metrics small {
  position: relative;
  z-index: 1;
  display: block;
}

.progress-summary-metrics span {
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.progress-summary-metrics strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 8px 0 5px;
  color: var(--navy-deep);
  font-size: clamp(32px, 4.5vw, 54px);
  line-height: 1.1;
}

.progress-summary-metrics small { color: var(--muted); font-size: 12px; font-weight: 700; }

.sentence-progress-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.sentence-progress-toolbar h2 { margin: 0; color: var(--navy-deep); font-size: clamp(25px, 3vw, 36px); }
.sentence-progress-toolbar p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.sentence-progress-ranges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.sentence-progress-ranges button {
  min-height: 36px;
  border: 1px solid rgba(45, 126, 82, .2);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--accent-text);
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}
.sentence-progress-ranges button:hover,
.sentence-progress-ranges button:focus-visible { border-color: var(--blue); background: var(--blue-soft); }
.sentence-progress-ranges button[aria-pressed="true"] { color: #fff; border-color: var(--navy); background: var(--navy); }
.sentence-progress-ranges .sentence-cumulative-toggle {
  color: #1f8065;
  border-color: rgba(204, 42, 21, .24);
  background: #eaf5ed;
}
.sentence-progress-ranges .sentence-cumulative-toggle:hover,
.sentence-progress-ranges .sentence-cumulative-toggle:focus-visible { color: #19644f; border-color: #1f8065; background: #d8eee0; }
.sentence-progress-ranges .sentence-cumulative-toggle[aria-pressed="true"] { color: #fff; border-color: #1f8065; background: #1f8065; }
.sentence-progress-chart-shell {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 19px;
  overflow-x: auto;
  background: rgba(255, 255, 255, .72);
}
.sentence-progress-chart-shell svg { display: block; width: 100%; min-width: 700px; height: auto; }
.sentence-chart-hover { cursor: pointer; }
.sentence-chart-cumulative[role="img"] { cursor: help; }
.sentence-chart-hit { fill: transparent; }
.sentence-chart-tooltip { pointer-events: none; opacity: 0; transition: opacity .14s ease; }
.sentence-chart-hover:hover .sentence-chart-tooltip,
.sentence-chart-hover:focus .sentence-chart-tooltip { opacity: 1; }
.sentence-progress-legend { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px 18px; color: var(--muted); font-size: 11px; font-weight: 800; }
.sentence-progress-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sentence-legend-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.sentence-legend-daily { background: #2c8a59; }
.sentence-legend-cumulative { background: #1f8065; }
.sentence-legend-time { background: #61aa7d; }
.sentence-progress-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sentence-progress-stats > div { border-radius: 15px; padding: 15px 17px; background: #edf7f0; }
.sentence-progress-stats strong { display: block; color: var(--accent-text); font-size: 27px; line-height: 1.15; }
.sentence-progress-stats span { color: var(--muted); font-size: 11px; font-weight: 750; }
.sentence-progress-day { margin-top: 18px; border: 1px solid rgba(45, 126, 82, .18); border-radius: 18px; overflow: hidden; background: #fff; }
.sentence-progress-day-heading { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #edf7f0; }
.sentence-progress-day-heading h3 { margin: 0; color: var(--navy); font-size: 21px; }
.sentence-progress-day-list { display: grid; }
.sentence-progress-day-row { padding: 14px 19px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) auto; gap: 14px; align-items: center; border-top: 1px solid var(--line); }
.sentence-progress-day-row strong { color: var(--navy); }
.sentence-progress-day-row span { color: var(--muted); font-size: 12px; }
.sentence-progress-day-row em { border-radius: 999px; padding: 4px 9px; color: var(--coral); background: var(--coral-soft); font-size: 11px; font-style: normal; font-weight: 900; }
.sentence-progress-day-row em.is-correct { color: var(--green); background: var(--green-soft); }
.sentence-progress-day-row em.is-time { color: #3f7658; background: #e9f5ed; }
.sentence-time-progress-section { margin-top: 34px; padding-top: 34px; border-top: 1px solid rgba(45, 126, 82, .16); }
.sentence-time-chart-shell { border-color: rgba(255, 145, 77, .26); background: rgba(255, 250, 246, .78); }
.sentence-time-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sentence-time-stats > div { border-radius: 15px; padding: 15px 17px; background: #eff8f2; }
.sentence-time-stats > div.is-wide { grid-column: span 2; }
.sentence-time-stats strong { display: block; color: #326f4d; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.15; }
.sentence-time-stats span { color: var(--muted); font-size: 11px; font-weight: 750; }
.sentence-time-day { border-color: rgba(255, 145, 77, .3); }
.sentence-time-day .sentence-progress-day-heading { background: #eff8f2; }

.history-panel,
.utility-panel {
  padding: clamp(24px, 3.2vw, 42px);
}

.section-heading {
  margin-bottom: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.section-heading h2 { margin: 0; color: var(--navy-deep); font-size: clamp(25px, 3vw, 36px); }
.history-list { display: grid; gap: 11px; }
.history-note { margin: 5px 0 0; color: var(--muted); text-align: center; font-size: 11px; font-weight: 750; }
.history-warning {
  margin: 0 0 14px;
  border: 1px solid rgba(182, 123, 34, .28);
  border-radius: 13px;
  padding: 11px 13px;
  color: #765017;
  background: #fff8e6;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.attempt-row {
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  background: rgba(255, 251, 244, .88);
}

.attempt-row summary {
  min-height: 76px;
  padding: 17px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.attempt-row summary::-webkit-details-marker { display: none; }
.attempt-row summary::after { content: "＋"; color: var(--accent-text); font-size: 22px; font-weight: 600; }
.attempt-row[open] summary::after { content: "−"; }
.attempt-summary-title { min-width: 0; }
.attempt-summary-title strong { display: block; color: var(--navy); overflow-wrap: anywhere; }
.attempt-summary-title small { color: var(--muted); }
.attempt-score { min-width: 72px; border-radius: 999px; padding: 5px 10px; color: var(--green); background: var(--green-soft); text-align: center; font-size: 12px; font-weight: 900; }
.attempt-score.in-progress { color: var(--gold); background: #fff6dd; }
.attempt-details { border-top: 1px solid var(--line); padding: 19px 20px 22px; background: #fff; }
.attempt-details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.attempt-detail { border-radius: 12px; padding: 11px; background: #edf7f0; }
.attempt-detail span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.attempt-detail strong { display: block; margin-top: 3px; color: var(--navy); font-size: 14px; }
.attempt-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

.empty-state,
.admin-empty {
  margin: 0;
  border: 1px dashed rgba(45, 126, 82, .22);
  border-radius: 17px;
  padding: 34px 20px;
  color: var(--muted);
  background: rgba(255, 246, 229, .76);
  text-align: center;
}

.lesson-shell { padding: clamp(22px, 3.6vw, 48px); }
.lesson-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.text-button { min-height: 36px; border: 0; padding: 5px 0; color: var(--accent-text); background: transparent; }
.text-button:hover { color: var(--navy); transform: translateX(-2px); }
.lesson-round { border-radius: 999px; padding: 6px 12px; color: var(--violet); background: var(--violet-soft); font-size: 12px; font-weight: 900; }

.lesson-title-row {
  margin: 23px 0 25px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.lesson-title-row h1 { margin: 0; color: var(--navy-deep); font-size: clamp(34px, 4.5vw, 60px); line-height: 1.13; }

.lesson-title-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.jump-exercise-button {
  min-height: 42px;
  border: 1px solid #7a1c12;
  border-radius: 999px;
  padding: 9px 16px;
  color: #fff;
  background: linear-gradient(135deg, #1c5b39, #2c8153);
  box-shadow: 0 10px 23px rgba(40, 119, 76, .22);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.jump-exercise-button:hover,
.jump-exercise-button:focus-visible {
  box-shadow: 0 14px 28px rgba(40, 119, 76, .3);
  transform: translateY(-1px);
}

.lesson-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.lesson-stepper button {
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  color: var(--muted);
  background: rgba(255, 247, 234, .88);
  text-align: left;
  cursor: pointer;
}

.lesson-stepper button > span {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--blue-soft);
  font-size: 12px;
  font-weight: 900;
}

.lesson-stepper strong { color: inherit; font-size: 13px; }
.lesson-stepper small { color: inherit; font-size: 10px; }
.lesson-stepper button[aria-current="step"] { border-color: var(--blue); color: var(--navy); background: linear-gradient(145deg, #f4fbf6, #dceddf); box-shadow: 0 10px 24px rgba(45, 126, 82, .11); }
.lesson-stepper button[aria-current="step"] > span { color: #fff; background: var(--navy); }
.lesson-stepper button.is-complete > span { color: #fff; background: var(--green); }

.lesson-content { margin-top: 20px; }
.info-page { min-height: 480px; border: 1px solid var(--line); border-radius: 22px; padding: clamp(25px, 4vw, 52px); background: rgba(255, 255, 255, .84); }
.info-page-header { max-width: 900px; }
.info-page-header .page-label { color: var(--accent-text); font-size: 12px; font-weight: 900; letter-spacing: .13em; }
.info-page-header h2 { margin: 7px 0 0; color: var(--navy-deep); font-size: clamp(30px, 4vw, 50px); line-height: 1.15; }
.info-page-header h2 small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .56em;
  font-weight: 750;
  letter-spacing: -.01em;
}
.info-page-header p { margin: 12px 0 0; color: var(--muted); }

.formula-card {
  margin-top: 32px;
  border: 1px solid rgba(45, 126, 82, .2);
  border-radius: 22px;
  padding: clamp(23px, 4vw, 45px);
  background:
    linear-gradient(90deg, transparent 0 38px, rgba(201, 81, 67, .16) 39px, transparent 41px),
    repeating-linear-gradient(180deg, #fcfefc 0 35px, rgba(45, 126, 82, .12) 36px, #fcfefc 38px);
  box-shadow: 0 18px 45px rgba(29, 96, 61, .1);
}

.formula-label { display: block; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.formula-display { margin: 12px 0 0; display: grid; gap: 15px; color: var(--navy); font-size: clamp(22px, 3.3vw, 39px); font-weight: 900; line-height: 1.35; }
.formula-display p { margin: 0; }
.formula-display small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .05em; }
.formula-display small span { display: block; margin-top: 1px; font-size: .9em; font-weight: 700; letter-spacing: .03em; }
.example-block { margin-top: 30px; border-left: 5px solid var(--blue); padding: 2px 0 2px 19px; }
.example-block strong { display: block; color: var(--accent-text); font-size: 11px; letter-spacing: .1em; }
.example-block p { margin: 7px 0 0; color: var(--ink); font-size: clamp(18px, 2.4vw, 27px); font-weight: 750; }
.example-block p:last-child { color: var(--muted); font-size: 15px; font-weight: 600; }
.example-block .chinese-primary { color: var(--navy); font-size: clamp(16px, 1.8vw, 21px); font-weight: 800; line-height: 1.65; }
.example-block .english-secondary { color: var(--muted); font-size: 15px; font-weight: 600; line-height: 1.65; }
.meaning-block { margin-top: 24px; border: 1px solid rgba(45, 126, 82, .18); border-radius: 16px; padding: 18px 20px; background: rgba(228, 245, 233, .9); }
.meaning-block h3 { margin: 0; color: var(--navy-deep); font-size: 20px; }
.meaning-block h3 small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.meaning-block p { margin: 8px 0 0; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.7; }
.meaning-block .chinese-primary { color: var(--navy); font-size: clamp(16px, 1.6vw, 19px); font-weight: 800; }
.meaning-block .english-secondary { color: var(--muted); font-size: 14px; font-weight: 600; }
.meaning-caveat {
  margin-top: 16px;
  border-top: 1px solid rgba(37, 84, 57, .13);
  padding-top: 12px;
}

.lesson-detail-section { margin-top: 32px; }
.lesson-detail-heading { margin-bottom: 16px; }
.lesson-prose-grid > .lesson-detail-heading.is-wide { grid-column: 1 / -1; margin: 12px 0 2px; }
.lesson-detail-heading h3 {
  margin: 0;
  color: var(--navy-deep);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
}
.lesson-detail-heading h3 small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .48em;
}

.chinese-primary {
  color: var(--navy);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 800;
  line-height: 1.65;
}

.english-secondary {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}

.meaning-list,
.teaching-list {
  margin: 12px 0 0;
  padding-left: 1.3em;
  color: var(--ink);
}

.meaning-list li,
.teaching-list li { margin: 5px 0; }

.bilingual-list {
  margin: 12px 0 0;
  padding-left: 1.3em;
}

.bilingual-list li { margin: 9px 0; color: var(--navy); }
.bilingual-list strong { display: block; font-size: 16px; line-height: 1.5; }
.bilingual-list small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.lesson-prose-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lesson-prose-card,
.origin-card {
  border: 1px solid rgba(45, 126, 82, .17);
  border-radius: 18px;
  padding: 21px;
  background: linear-gradient(145deg, #fff, #f2faf5);
}

.lesson-prose-card.is-wide,
.origin-card.is-wide { grid-column: 1 / -1; }

.lesson-prose-card h3,
.origin-card h3 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 20px;
}

.lesson-prose-card h3 small,
.origin-card h3 small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
}

.lesson-prose-card p,
.origin-card p { margin: 10px 0 0; }
.lesson-prose-card .english-secondary,
.origin-card .english-secondary { color: var(--muted); }

.teaching-mini-grid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.teaching-mini-grid > section {
  min-width: 0;
  border: 1px solid rgba(37, 84, 57, .13);
  border-radius: 15px;
  padding: 16px;
  background: rgba(255, 250, 240, .78);
}

.teaching-mini-grid h4 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.35;
}

.teaching-mini-grid h4 small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.teaching-mini-grid .chinese-primary { font-size: 15px; }
.teaching-mini-grid .english-secondary { font-size: 12px; }
.sensitivity-card { border-color: rgba(182, 123, 34, .34); background: #fffaf0; }

.teaching-example {
  display: block;
  margin-top: 13px;
  border-radius: 11px;
  padding: 11px 12px;
  color: var(--muted);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
}

.form-status-list {
  margin-top: 16px;
  display: grid;
  gap: 7px;
}

.form-status-list p {
  margin: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.form-status-list strong { color: var(--navy); text-align: center; }

.grammar-token-list {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.grammar-token-list code {
  border: 1px solid rgba(37, 84, 57, .14);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--navy);
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
}

.form-table {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
}

.form-table th,
.form-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
}

.form-table th { color: var(--navy); background: #e8f5ec; font-size: 12px; }
.form-table th small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }
.form-table td:first-child { width: 24%; color: var(--navy); font-weight: 900; }
.form-table .chinese-primary,
.form-table .english-secondary { display: block; }
.form-table td > .english-secondary:first-child { margin-top: 0; }

.specific-form-list {
  margin: 27px 0 0;
  display: grid;
  gap: 14px;
}

.specific-form-card {
  border: 1px solid rgba(45, 126, 82, .18);
  border-radius: 19px;
  padding: 22px;
  background: #fff;
}

.specific-form-card header {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.specific-form-card header > span {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #2c7e50, #55a875);
  font-size: 12px;
  font-weight: 900;
}

.specific-form-card h3 { margin: 0; color: var(--navy-deep); font-size: 19px; }
.specific-form-card h3 small { display: block; color: var(--muted); font-size: 11px; }
.specific-form-card code {
  margin-top: 14px;
  border-radius: 12px;
  padding: 11px 13px;
  display: block;
  color: var(--navy-deep);
  background: #e7f4eb;
  white-space: normal;
  font: 800 15px/1.5 "Edmund Serif TC", serif;
}
.specific-form-card p { margin: 11px 0 0; }
.specific-form-card .english-secondary { color: var(--muted); }

.origin-memory {
  margin-top: 16px;
  border-left: 5px solid var(--blue-bright);
  border-radius: 0 14px 14px 0;
  padding: 15px 17px;
  background: #e7f4ea;
  font-weight: 850;
}

.exercise-phrasal-verb-illustration {
  margin: 0 0 24px;
  border: 1px solid rgba(45, 126, 82, .22);
  border-radius: 22px;
  padding: 10px;
  overflow: hidden;
  background: #f0f8f2;
  box-shadow: 0 16px 38px rgba(22, 74, 47, .12);
}

.exercise-phrasal-verb-illustration img {
  width: 100%;
  max-height: 560px;
  border-radius: 15px;
  display: block;
  object-fit: cover;
}

.exercise-phrasal-verb-illustration figcaption {
  padding: 12px 8px 4px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}
.exercise-phrasal-verb-illustration figcaption span,
.exercise-phrasal-verb-illustration figcaption small { display: block; }
.exercise-phrasal-verb-illustration figcaption small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }

.benefit-list,
.rule-list { margin: 30px 0 0; padding: 0; display: grid; gap: 13px; list-style: none; }
.benefit-card,
.rule-card { width: 100%; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; background: #fff; }
.benefit-card > div,
.rule-card > div,
.benefit-card .examples,
.rule-card .examples { min-width: 0; }
.benefit-card > span,
.rule-card > span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-text); background: var(--blue-soft); font-size: 12px; font-weight: 900; }
.rule-card > span { color: var(--violet); background: var(--violet-soft); }
.benefit-card p,
.rule-card p { margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.benefit-card h3,
.rule-card h3 { margin: 0 0 8px; color: var(--navy-deep); font-size: 18px; overflow-wrap: anywhere; word-break: break-word; }
.benefit-card h3 small,
.rule-card h3 small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.benefit-card .chinese,
.rule-card .chinese { color: var(--navy); font-size: clamp(16px, 1.6vw, 18px); font-weight: 800; line-height: 1.65; }
.benefit-card .english,
.rule-card .english { margin-top: 7px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.65; }
.benefit-card .examples,
.rule-card .examples { margin-top: 10px; display: grid; gap: 6px; }
.benefit-card .examples code,
.rule-card .examples code {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  color: var(--ink);
  background: transparent;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.benefit-card .examples .chinese-example,
.rule-card .examples .chinese-example { color: var(--navy); font-size: 15px; font-weight: 800; line-height: 1.65; }
.benefit-card .examples .english-example,
.rule-card .examples .english-example { color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.65; }

.lesson-navigation { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lesson-navigation .primary-button,
.lesson-navigation .secondary-button { width: auto; min-width: 150px; }

.exercise-header {
  border: 1px solid rgba(45, 126, 82, .16);
  border-radius: 20px;
  padding: 20px;
  background: linear-gradient(145deg, #fbfefc, #eaf6ee);
}

.exercise-header-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.exercise-header h2 { margin: 0; color: var(--navy-deep); font-size: clamp(27px, 3.5vw, 42px); }
.exercise-header h2 small { display: block; margin-top: 3px; color: var(--muted); font-size: .55em; font-weight: 700; }
.exercise-header p { margin: 8px 0 0; color: var(--muted); }
.exercise-header .exercise-instruction-primary { color: var(--navy); font-size: 16px; font-weight: 800; }
.exercise-header .exercise-instruction-secondary { color: var(--muted); font-size: 14px; font-weight: 600; }
.exercise-header .exercise-mechanics { font-size: 12px; font-weight: 650; }
.round-badge { flex: 0 0 auto; border-radius: 999px; padding: 8px 14px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--blue)); font-size: 12px; font-weight: 900; }
.exercise-progress { height: 9px; margin-top: 18px; border-radius: 999px; overflow: hidden; background: rgba(45, 126, 82, .12); }
.exercise-progress > span { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #48ad78); transition: width .3s ease; }
.exercise-progress-label { margin-top: 7px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 750; }

.question-list-toolbar { margin-top: 16px; display: flex; justify-content: flex-end; }
.bulk-visibility-button {
  min-height: 42px;
  border: 1px solid rgba(34, 115, 77, .24);
  border-radius: 13px;
  padding: 9px 15px;
  color: var(--green);
  background: rgba(239, 250, 244, .92);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}
.bulk-visibility-button:hover,
.bulk-visibility-button:focus-visible { border-color: var(--green); background: #fff; }
.bulk-visibility-button[aria-pressed="true"] { color: #fff; background: var(--green); }
.question-list { margin-top: 16px; display: grid; gap: 13px; }
.question-list-toolbar + .question-list { margin-top: 10px; }
.question-card { position: relative; border: 1px solid var(--line); border-radius: 19px; padding: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 9px 24px rgba(29, 96, 61, .055); scroll-margin-top: 110px; }
.question-card.is-correct { border-color: rgba(34, 115, 77, .34); background: linear-gradient(145deg, #fff, #effaf4); }
.question-card.is-wrong { border-color: rgba(201, 81, 67, .36); background: linear-gradient(145deg, #fff, #fff4f1); }
.question-card.is-collapsed { padding-block: 13px; }
.question-card-top { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.question-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.question-number { color: var(--accent-text); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.question-visibility-button {
  min-height: 38px;
  border: 1px solid rgba(34, 115, 77, .2);
  border-radius: 12px;
  padding: 7px 12px;
  color: var(--green);
  background: rgba(255, 255, 255, .78);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}
.question-visibility-button:hover,
.question-visibility-button:focus-visible { border-color: var(--green); background: #fff; }
.question-bookmark-button { width: 38px; height: 38px; border: 1px solid rgba(182, 123, 34, .24); border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: #fffaf0; cursor: pointer; font-size: 22px; line-height: 1; }
.question-bookmark-button[aria-pressed="true"] { color: #fff; background: var(--gold); box-shadow: 0 7px 18px rgba(182, 123, 34, .2); }
.question-prompt { margin-top: 13px; }
.question-prompt .english { margin: 0; color: var(--navy-deep); font-family: Georgia, "Times New Roman", serif; font-size: clamp(19px, 2.2vw, 25px); font-weight: 800; line-height: 1.5; }
.question-prompt .chinese { margin: 7px 0 0; color: var(--muted); font-size: clamp(14px, 1.5vw, 17px); font-weight: 650; line-height: 1.65; }
.question-prompt .question-cue {
  display: inline-block;
  margin: 10px 0 0;
  border: 1px solid rgba(45, 126, 82, .2);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--accent-text);
  background: var(--blue-soft);
  font-size: 12px;
  font-weight: 900;
}
.starter-hint { margin-top: 12px; color: var(--accent-text); font-size: 13px; font-weight: 800; }
.answer-input {
  width: 100%;
  min-height: 54px;
  margin-top: 13px;
  border: 1px solid rgba(45, 126, 82, .21);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--ink);
  background: #fcfefc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}
.answer-input:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 4px rgba(55, 151, 96, .11); outline: none; }
.answer-input:disabled { color: var(--green); background: var(--green-soft); opacity: 1; }
.multi-answer-fields { margin-top: 13px; display: grid; gap: 12px; }
.answer-part { display: grid; gap: 7px; }
.answer-part > span { color: var(--accent-text); font-size: 12px; font-weight: 800; }
.answer-part .answer-input { margin-top: 0; }
.question-feedback { min-height: 22px; margin: 8px 0 0; font-size: 12px; font-weight: 800; }
.question-card.is-correct .question-feedback { color: var(--green); }
.question-card.is-wrong .question-feedback { color: var(--coral); }
.answer-reveal { margin-top: 13px; border-top: 1px solid rgba(201, 81, 67, .16); padding-top: 13px; }
.answer-reveal > span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.answer-reveal p { margin: 6px 0 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 700; }
.answer-reveal .chinese-answer { color: var(--navy); font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1.65; }
.answer-reveal .english-answer { color: var(--muted); font-size: 14px; font-weight: 650; }
.missing-answer-highlight {
  border-radius: 5px;
  padding: 0 .12em;
  color: #5b4100;
  background: #ffe56f;
  box-shadow: inset 0 -1px 0 rgba(116, 82, 0, .16);
}
.multi-answer-reveal { margin-top: 8px; display: grid; gap: 11px; }
.multi-answer-reveal > div { border-left: 3px solid rgba(45, 126, 82, .22); padding-left: 12px; }
.multi-answer-reveal strong { color: var(--accent-text); font-size: 12px; }
.target-highlight { color: #2468c9; font-weight: 900; text-decoration: underline; text-decoration-color: rgba(36, 104, 201, .22); text-decoration-thickness: 3px; text-underline-offset: 3px; }

.exercise-actions {
  position: sticky;
  bottom: 12px;
  z-index: 12;
  margin-top: 20px;
  border: 1px solid rgba(29, 96, 61, .17);
  border-radius: 18px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 16px 45px rgba(22, 74, 47, .17);
  backdrop-filter: blur(18px);
}
.exercise-action-copy { color: var(--muted); font-size: 12px; }
.exercise-action-buttons { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.exercise-action-buttons .primary-button { min-height: 44px; box-shadow: 0 6px 0 #17462d, 0 13px 24px rgba(29, 96, 61, .15); }
.partial-button { min-height: 44px; border: 1px solid rgba(212, 59, 23, .26); border-radius: 14px; padding: 9px 17px; color: var(--violet); background: var(--violet-soft); cursor: pointer; font-weight: 850; }
.correction-button { min-height: 44px; border: 1px solid rgba(201, 81, 67, .3); border-radius: 14px; padding: 9px 17px; color: #a53f34; background: var(--coral-soft); cursor: pointer; font-weight: 900; }
.correction-button:hover,
.correction-button:focus-visible { border-color: var(--coral); background: #ffe6e1; }
.clear-answer-button {
  min-height: 36px;
  margin-top: 10px;
  border: 1px solid rgba(45, 126, 82, .23);
  border-radius: 11px;
  padding: 7px 12px;
  color: var(--accent-text);
  background: #edf7f0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}
.clear-answer-button:hover,
.clear-answer-button:focus-visible { border-color: var(--blue); background: var(--blue-soft); }

.correction-round-banner {
  margin-top: 18px;
  border: 1px solid rgba(201, 81, 67, .24);
  border-radius: 20px;
  padding: 21px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(145deg, #fff, #fff2ef);
}
.correction-round-banner h3 { margin: 0; color: #983a30; font-size: 22px; }
.correction-round-banner p { margin: 5px 0 0; color: var(--muted); }
.correction-round-banner .secondary-button { flex: 0 0 auto; }

.round-summary { margin-top: 18px; border: 1px solid rgba(212, 59, 23, .2); border-radius: 20px; padding: 24px; background: linear-gradient(145deg, #fff, #eaf5ed); }
.round-summary h3 { margin: 0; color: var(--navy-deep); font-size: 25px; }
.round-summary p { margin: 8px 0 0; color: var(--muted); }
.round-summary strong { color: var(--violet); }
.round-summary-actions { margin-top: 17px; display: flex; justify-content: flex-end; gap: 10px; }
.completion-card { text-align: center; }
.completion-mark { width: 66px; height: 66px; margin: 0 auto 15px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--green); box-shadow: 0 12px 30px rgba(34, 115, 77, .25); font-size: 31px; font-weight: 900; }

.utility-heading { align-items: flex-start; }
.bookmark-list { margin-top: 24px; display: grid; gap: 13px; }
.bookmark-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.bookmark-column { min-width: 0; border: 1px solid var(--line); border-radius: 21px; padding: 18px; background: rgba(255, 249, 238, .88); }
.bookmark-column-heading { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.bookmark-column-heading > span { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--navy); font-size: 11px; font-weight: 900; }
.bookmark-column-heading h2 { margin: 0; color: var(--navy); font-size: 21px; }
.bookmark-column-heading p { margin: 2px 0 0; color: var(--muted); font-size: 11px; font-weight: 750; }
.bookmark-column-list { display: grid; gap: 11px; }
.bookmark-column-list > .empty-state { margin: 0; }
.bookmark-section-row { border: 1px solid rgba(182, 123, 34, .2); border-radius: 17px; padding: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px 12px; align-items: center; background: linear-gradient(145deg, #fff, #fffaf0); }
.bookmark-section-star { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--gold); background: #fff1ca; font-size: 19px; }
.bookmark-section-row h3 { margin: 0; color: var(--navy); font-size: 17px; }
.bookmark-section-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.bookmark-section-row .bookmark-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
.bookmark-row { border: 1px solid var(--line); border-radius: 18px; padding: 19px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; background: #fff; }
.bookmark-row-number { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: #fff6df; font-size: 12px; font-weight: 900; }
.bookmark-row h3 { margin: 0; color: var(--navy); font-size: 18px; }
.bookmark-row .bookmark-prompt { margin: 5px 0 0; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 800; line-height: 1.6; }
.bookmark-row .bookmark-zh { margin: 4px 0 0; color: var(--muted); font-size: 13px; font-weight: 650; line-height: 1.65; }
.bookmark-row .bookmark-cue { margin: 7px 0 0; color: var(--accent-text); font-size: 12px; font-weight: 850; }
.bookmark-answer { margin-top: 12px; border-left: 4px solid var(--coral); padding-left: 12px; }
.bookmark-answer p { margin: 3px 0; }
.bookmark-answer p:last-child { color: var(--muted); font-size: 13px; }
.bookmark-row-actions { display: flex; gap: 7px; }
.icon-button { min-width: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--accent-text); background: #edf7f0; cursor: pointer; font-weight: 850; }
.icon-button.danger { color: var(--coral); background: var(--coral-soft); }

.admin-hero { align-items: flex-end; }
.admin-search { min-width: min(360px, 100%); display: grid; gap: 7px; }
.admin-search span { color: var(--navy); font-size: 12px; font-weight: 850; }
.admin-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 18px; align-items: start; }
.admin-list-panel,
.admin-detail-panel { padding: 25px; }
.admin-student-list { max-height: 760px; display: grid; gap: 8px; overflow-y: auto; }
.admin-student-button { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.admin-student-button:hover,
.admin-student-button[aria-current="true"] { border-color: var(--blue); background: var(--blue-soft); }
.admin-student-button strong { overflow-wrap: anywhere; }
.admin-student-button small { color: var(--muted); }
.admin-student-button span { align-self: center; color: var(--accent-text); font-size: 12px; font-weight: 900; }
.count-badge { min-width: 36px; border-radius: 999px; padding: 5px 9px; color: var(--accent-text); background: var(--blue-soft); text-align: center; font-size: 12px; font-weight: 900; }
.admin-empty { min-height: 380px; display: grid; place-content: center; }
.admin-empty > span { color: var(--accent-text); font-size: 50px; }
.admin-empty h2 { margin: 7px 0 0; color: var(--navy); }
.admin-empty p { margin: 7px 0 0; }
.admin-profile h2 { margin: 0; color: var(--navy-deep); font-size: 32px; }
.admin-profile > p { margin: 6px 0 0; color: var(--muted); }
.admin-metrics { margin: 20px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-metric { border-radius: 14px; padding: 15px; background: #edf7f0; }
.admin-metric strong { display: block; color: var(--accent-text); font-size: 25px; }
.admin-metric span { color: var(--muted); font-size: 11px; font-weight: 750; }
.admin-subheading { margin: 24px 0 10px; color: var(--navy); font-size: 18px; }

.loading-state { min-height: 200px; display: grid; place-content: center; justify-items: center; color: var(--muted); }
.loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(45, 126, 82, .16); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  max-width: min(430px, calc(100% - 36px));
  border-radius: 15px;
  padding: 13px 16px;
  color: #fff;
  background: var(--navy-deep);
  box-shadow: 0 18px 50px rgba(19, 67, 44, .28);
  font-size: 13px;
}
.toast[data-state="error"] { background: #a33d34; }
.toast[data-state="success"] { background: var(--green); }

@media (max-width: 1040px) {
  .login-layout { grid-template-columns: 1fr; }
  .login-hero { min-height: 580px; }
  .lesson-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-choice[data-tone="bookmark"] { grid-column: 1 / -1; min-height: 230px; }
  .lesson-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-student-list { max-height: 420px; }
}

@media (max-width: 720px) {
  .site-header { position: static; }
  .header-inner { width: min(100% - 20px, 1480px); padding: 9px 0; align-items: flex-start; flex-wrap: wrap; }
  .header-actions { width: 100%; justify-content: flex-start; }
  .brand-copy small { display: none; }
  .connection-pill,
  .user-pill,
  .header-button { min-height: 34px; padding: 7px 10px; font-size: 10px; }
  .app-shell { width: min(100% - 20px, 1480px); padding: 22px 0 66px; }
  .login-hero,
  .login-panel,
  .dashboard-hero,
  .admin-hero,
  .history-panel,
  .utility-panel,
  .lesson-shell,
  .admin-list-panel,
  .admin-detail-panel { border-radius: 20px; padding: 22px; }
  .login-hero { min-height: 510px; }
  .hero-copy h1 { font-size: 45px; }
  .dashboard-hero,
  .admin-hero { align-items: flex-start; flex-direction: column; }
  .dashboard-metric { width: 100%; }
  .sentence-progress-panel { border-radius: 20px; padding: 22px; }
  .progress-summary-metrics { grid-template-columns: 1fr; }
  .sentence-progress-toolbar { align-items: flex-start; flex-direction: column; }
  .sentence-progress-ranges { justify-content: flex-start; }
  .sentence-progress-stats { grid-template-columns: 1fr; }
  .sentence-time-stats { grid-template-columns: 1fr; }
  .sentence-time-stats > div.is-wide { grid-column: auto; }
  .sentence-progress-day-row { grid-template-columns: 1fr; gap: 4px; }
  .lesson-choice-grid { grid-template-columns: 1fr; }
  .lesson-choice[data-tone="bookmark"] { grid-column: auto; }
  .lesson-choice-card,
  .lesson-choice { min-height: 250px; }
  .lesson-choice { padding: 22px; }
  .lesson-section-bookmark { top: 14px; right: 14px; }
  .lesson-title-row { align-items: flex-start; flex-direction: column; }
  .lesson-title-actions { width: 100%; justify-content: flex-start; }
  .lesson-stepper { grid-template-columns: 1fr; }
  .lesson-stepper button { min-height: 67px; }
  .info-page { padding: 22px; }
  .lesson-prose-grid { grid-template-columns: 1fr; }
  .teaching-mini-grid { grid-template-columns: 1fr; }
  .lesson-prose-card.is-wide,
  .origin-card.is-wide { grid-column: auto; }
  .form-table { display: block; overflow-x: auto; }
  .benefit-card,
  .rule-card { grid-template-columns: minmax(0, 1fr); }
  .lesson-navigation { align-items: stretch; flex-direction: column-reverse; }
  .lesson-navigation .primary-button,
  .lesson-navigation .secondary-button { width: 100%; }
  .exercise-header-top { align-items: flex-start; flex-direction: column; }
  .question-card { padding: 17px; }
  .answer-input { font-size: 16px; }
  .exercise-actions { position: static; align-items: stretch; flex-direction: column; }
  .exercise-action-buttons { display: grid; grid-template-columns: 1fr; }
  .exercise-action-buttons > * { width: 100%; }
  .bulk-visibility-button { width: 100%; }
  .correction-round-banner { align-items: stretch; flex-direction: column; }
  .attempt-row summary { grid-template-columns: minmax(0, 1fr) auto; }
  .attempt-score { grid-row: 2; grid-column: 1; justify-self: start; }
  .attempt-row summary::after { grid-row: 1 / 3; grid-column: 2; }
  .attempt-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bookmark-row { grid-template-columns: auto minmax(0, 1fr); }
  .bookmark-row-actions { grid-column: 2; }
  .bookmark-columns { grid-template-columns: 1fr; }
  .admin-metrics { grid-template-columns: 1fr; }
  .section-heading.utility-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .hero-copy h1 { font-size: 39px; }
  .login-heading { grid-template-columns: 1fr; }
  .section-number { width: 39px; height: 39px; }
  .attempt-details-grid { grid-template-columns: 1fr; }
}

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