@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: #5f321c;
  --navy-deep: #34180d;
  --blue: #8d5829;
  --blue-bright: #b97836;
  --blue-soft: #f4e4c8;
  --accent-text: #6e351a;
  --violet: #75502c;
  --violet-soft: #eee0c5;
  --coral: #a74732;
  --coral-soft: #fff0ed;
  --green: #22734d;
  --green-soft: #e9f8f0;
  --gold: #b67b22;
  --ink: #342219;
  --muted: #715c4e;
  --line: rgba(83, 43, 22, .18);
  --paper: rgba(255, 249, 235, .94);
  --shadow: 0 24px 72px rgba(39, 15, 6, .24);
  --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:
    linear-gradient(rgba(38, 15, 6, .28), rgba(38, 15, 6, .44)),
    url("assets/proverb-system/main-leather.webp") center / cover fixed;
  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: .32;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 221, 159, .55), transparent 43%),
    linear-gradient(90deg, rgba(19, 6, 2, .48), transparent 20% 80%, rgba(19, 6, 2, .48));
}

body[data-proverb-view="login"] {
  background:
    linear-gradient(rgba(7, 10, 16, .18), rgba(10, 7, 4, .5)),
    url("assets/proverb-system/login-library.webp") center / cover fixed;
}

body[data-proverb-view="login"]::before {
  opacity: .58;
  background:
    radial-gradient(circle at 24% 22%, rgba(222, 158, 65, .2), transparent 32%),
    linear-gradient(90deg, rgba(2, 5, 10, .48), transparent 45%, rgba(2, 5, 10, .2));
}

button,
input { font: inherit; }

button { touch-action: manipulation; }

button:focus-visible,
input:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(255, 106, 26, .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(143, 37, 20, .12);
  background: rgba(255, 250, 243, .9);
  box-shadow: 0 8px 30px rgba(115, 35, 18, .07);
  backdrop-filter: blur(20px) saturate(1.15);
}

body > .site-header.edmund-system-header {
  width: 100%;
  margin-left: 0;
  border-bottom-color: rgba(143, 37, 20, .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(143, 37, 20, .12);
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(143, 37, 20, .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(143, 37, 20, .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(232, 74, 27, .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:
    linear-gradient(145deg, rgba(22, 10, 5, .34), rgba(7, 8, 12, .62)),
    url("assets/proverb-system/login-library.webp") center / cover;
}

.login-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border: 70px solid rgba(229, 175, 91, .09);
  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: #ffe1a1;
  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: #ffe2ae;
  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: #ffd26a;
  font-size: .84em;
  letter-spacing: -.01em;
}

.hero-copy > p:last-child {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(255, 249, 232, .88);
  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(143, 37, 20, .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(169, 58, 24, .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(255, 106, 26, .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, #b62d18, var(--navy));
  box-shadow: 0 8px 0 #69160f, 0 17px 30px rgba(143, 37, 20, .19);
}

.primary-button:hover,
.primary-button:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 0 #69160f, 0 22px 34px rgba(143, 37, 20, .23); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 3px 0 #69160f, 0 8px 16px rgba(143, 37, 20, .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(232, 74, 27, .22);
  padding: 9px 15px;
  color: var(--navy);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 20px rgba(143, 37, 20, .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(255, 171, 47, .24), 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(232, 74, 27, .14);
  border-radius: 22px;
  padding: 20px 24px;
  text-align: center;
  background: rgba(255, 242, 217, .88);
}

.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(232, 74, 27, .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, .94), rgba(255, 232, 205, .92));
  box-shadow: 0 11px 28px rgba(143, 37, 20, .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; border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); padding: 25px;
  display: grid; gap: 16px; background: linear-gradient(135deg, rgba(255, 253, 245, .97), rgba(244, 228, 200, .95));
}
.lesson-search-heading { display: grid; gap: 4px; }
.lesson-search-heading h2 { margin: 0; color: var(--navy-deep); font-size: clamp(25px, 3vw, 34px); }
.lesson-search-heading p { margin: 0; color: var(--muted); }
.lesson-search-form { display: grid; gap: 8px; }
.lesson-search-label { color: var(--navy); font-size: 13px; font-weight: 900; }
.lesson-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.lesson-search-controls input {
  width: 100%; min-width: 0; min-height: 52px; border: 2px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 14px; padding: 12px 15px;
  color: var(--ink); background: #fffdf7; box-shadow: inset 0 1px 2px rgba(39, 15, 6, .07); font: inherit;
}
.lesson-search-controls input::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
.lesson-search-controls input:focus { outline: 3px solid color-mix(in srgb, var(--blue) 24%, transparent); border-color: var(--blue); }
.lesson-search-submit,
.lesson-search-clear { min-height: 52px; border-radius: 14px; padding: 0 21px; font: inherit; font-weight: 900; cursor: pointer; }
.lesson-search-submit { border: 1px solid var(--navy); color: #fff; background: var(--navy); }
.lesson-search-clear { border: 1px solid color-mix(in srgb, var(--navy) 25%, var(--line)); color: var(--navy); background: rgba(255, 253, 247, .86); }
.lesson-search-submit:hover { background: var(--navy-deep); }
.lesson-search-clear:hover { border-color: var(--blue); background: #fffdf7; }
.lesson-search-summary { min-height: 24px; margin: 0; color: var(--muted); font-size: 13px; }
.lesson-search-results { display: grid; gap: 9px; max-height: 520px; overflow: auto; }
.lesson-search-results:not([hidden]) { border-top: 1px solid var(--line); padding-top: 14px; }
.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-search-empty { border: 1px dashed color-mix(in srgb, var(--blue) 32%, var(--line)); border-radius: 14px; padding: 18px; color: var(--muted); background: rgba(255, 253, 247, .76); text-align: center; }
.lesson-search-empty strong { display: block; margin-bottom: 3px; color: var(--navy); }

.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(232, 74, 27, .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(67, 45, 12, .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(232, 74, 27, .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(115, 35, 18, .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(232, 74, 27, .065);
  font-size: 190px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.lesson-choice[data-tone="violet"] {
  border-color: rgba(232, 74, 27, .22);
  background: linear-gradient(145deg, #fffdf8, #ffe6cd);
}

.lesson-choice[data-tone="violet"]::after { color: rgba(212, 59, 23, .07); }

.lesson-choice[data-tone="bookmark"] {
  color: #fff;
  border-color: rgba(255, 255, 255, .24);
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 224, 97, .34), transparent 28%),
    linear-gradient(145deg, #ad2316, #ef471a 58%, #ff8c1b);
}

.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(115, 35, 18, .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(255, 237, 214, .88); 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(232, 74, 27, .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, #fff0dd);
}

.progress-summary-metrics article::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -42px;
  width: 120px;
  height: 120px;
  border: 24px solid rgba(232, 74, 27, .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(232, 74, 27, .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: #cc2a15;
  border-color: rgba(204, 42, 21, .24);
  background: #fff3e7;
}
.sentence-progress-ranges .sentence-cumulative-toggle:hover,
.sentence-progress-ranges .sentence-cumulative-toggle:focus-visible { color: #a91f0f; border-color: #cc2a15; background: #ffe1cf; }
.sentence-progress-ranges .sentence-cumulative-toggle[aria-pressed="true"] { color: #fff; border-color: #cc2a15; background: #cc2a15; }
.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: #e84a1b; }
.sentence-legend-cumulative { background: #cc2a15; }
.sentence-legend-time { background: #ff914d; }
.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: #fff5e8; }
.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(232, 74, 27, .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: #fff5e8; }
.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: #9a4b16; background: #fff0e6; }
.sentence-time-progress-section { margin-top: 34px; padding-top: 34px; border-top: 1px solid rgba(232, 74, 27, .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: #fff6f0; }
.sentence-time-stats > div.is-wide { grid-column: span 2; }
.sentence-time-stats strong { display: block; color: #a4511e; 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: #fff6f0; }

.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: #fff5e8; }
.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(232, 74, 27, .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, #8f2514, #bd3519);
  box-shadow: 0 10px 23px rgba(207, 54, 19, .22);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.jump-exercise-button:hover,
.jump-exercise-button:focus-visible {
  box-shadow: 0 14px 28px rgba(207, 54, 19, .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, #fffaf1, #ffe9cd); box-shadow: 0 10px 24px rgba(232, 74, 27, .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(232, 74, 27, .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, #fffdfa 0 35px, rgba(232, 74, 27, .12) 36px, #fffdfa 38px);
  box-shadow: 0 18px 45px rgba(143, 37, 20, .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(--coral); padding: 2px 0 2px 19px; }
.example-block strong { display: block; color: var(--coral); 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(214, 72, 25, .18); border-radius: 16px; padding: 18px 20px; background: rgba(255, 239, 216, .88); }
.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(83, 43, 22, .13);
  padding-top: 12px;
}

.lesson-detail-section { margin-top: 32px; }
.lesson-detail-heading { margin-bottom: 16px; }
.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(232, 74, 27, .17);
  border-radius: 18px;
  padding: 21px;
  background: linear-gradient(145deg, #fff, #fff8ed);
}

.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(83, 43, 22, .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(83, 43, 22, .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: #fff1df; 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(232, 74, 27, .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, #dd3818, #ff7b1a);
  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: #fff1dd;
  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 #ff9d1d;
  border-radius: 0 14px 14px 0;
  padding: 15px 17px;
  background: #fff4d6;
  font-weight: 850;
}

.exercise-proverb-illustration {
  margin: 0 0 24px;
  border: 1px solid rgba(232, 74, 27, .22);
  border-radius: 22px;
  padding: 10px;
  overflow: hidden;
  background: #fff8e7;
  box-shadow: 0 16px 38px rgba(115, 35, 18, .12);
}

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

.exercise-proverb-illustration figcaption {
  padding: 12px 8px 4px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}
.exercise-proverb-illustration figcaption span,
.exercise-proverb-illustration figcaption small { display: block; }
.exercise-proverb-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(232, 74, 27, .16);
  border-radius: 20px;
  padding: 20px;
  background: linear-gradient(145deg, #fffdf8, #fff3e2);
}

.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(232, 74, 27, .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(143, 37, 20, .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 .chinese { margin: 0; color: var(--navy-deep); font-size: clamp(17px, 2vw, 22px); font-weight: 800; }
.question-prompt .english { margin: 6px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.question-prompt .question-cue {
  display: inline-block;
  margin: 10px 0 0;
  border: 1px solid rgba(232, 74, 27, .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(232, 74, 27, .21);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--ink);
  background: #fffdfa;
  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(255, 106, 26, .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(232, 74, 27, .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(143, 37, 20, .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(115, 35, 18, .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 #69160f, 0 13px 24px rgba(143, 37, 20, .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(232, 74, 27, .23);
  border-radius: 11px;
  padding: 7px 12px;
  color: var(--accent-text);
  background: #fff4e5;
  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, #fff0df); }
.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-zh { margin: 5px 0 0; color: var(--navy); font-size: 15px; font-weight: 800; line-height: 1.65; }
.bookmark-row .bookmark-prompt { margin: 4px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.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: #fff5e8; 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: #fff5e8; }
.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(232, 74, 27, .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(91, 22, 15, .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-search-panel { padding: 22px; }
  .lesson-search-submit,
  .lesson-search-clear { min-height: 46px; }
  .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: sticky;
    bottom: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 10px;
    align-items: stretch;
    flex-direction: column;
  }
  .exercise-action-copy { display: none; }
  .exercise-action-buttons { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .exercise-action-buttons > * { width: 100%; }
  .exercise-action-buttons .correction-button,
  .exercise-action-buttons .partial-button[hidden] + .primary-button { grid-column: 1 / -1; }
  .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; }
  .lesson-search-controls { display: flex; flex-wrap: wrap; }
  .lesson-search-controls input { flex: 1 0 100%; }
  .lesson-search-submit,
  .lesson-search-clear { flex: 0 0 auto; }
  .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; }
}