/* ═══════════════════════════════════════════════════════════════════
   CAMVOCAB · PREMIUM LIGHT THEME  (v4.0)
   Direction: Apple-grade calm + Duolingo warmth, for Cambridge English.
   This file loads LAST and reskins every view the app renders.
   Design goals:
     · Kill the "堆砌感": more whitespace, fewer borders, calmer color.
     · One confident accent (blue) + neutral surfaces + semantic green/red.
     · Strong type hierarchy (SF Pro / 苹方), generous radii, soft depth.
     · Rich-but-tasteful motion (reveal, hover lift, press, count-up).
   ═══════════════════════════════════════════════════════════════════ */

/* smooth cross-fade when toggling */
body, .sidebar, .topbar, .surface-card, .metric-card, .word-card, .question-card,
.mobile-tabbar, .tab-sheet, .data-table, .option, input, select, textarea {
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease) !important;
}

/* ═══ GLOBAL ═══ */
html { scroll-behavior: smooth; }

body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.011em;
}

/* faint atmospheric wash (kept extremely subtle) */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    var(--wash) !important;
  mask-image: none !important;
}

.ambient { display: none !important; }

* { box-sizing: border-box; }

h1, h2, h3, h4 { font-family: var(--font-display) !important; letter-spacing: -0.018em; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* ═══════════════════════════════════════════════════════════════════
   AUTH SCREEN — cinematic, airy split
   ═══════════════════════════════════════════════════════════════════ */
.auth-screen {
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(91, 91, 214, 0.12), transparent 60%),
    radial-gradient(55% 50% at 92% 92%, rgba(124, 92, 214, 0.08), transparent 60%),
    var(--bg) !important;
  padding: 28px !important;
}

.auth-layout {
  width: min(1140px, 100%) !important;
  gap: 0 !important;
  grid-template-columns: 1.06fr 0.94fr !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--hairline-soft) !important;
}

.auth-story {
  position: relative !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: 56px !important;
  min-height: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.auth-story::before {
  content: '' !important;
  position: absolute !important;
  top: -18% !important; left: -14% !important;
  width: 560px !important; height: 560px !important;
  filter: blur(40px) !important;
  border-radius: 50% !important; pointer-events: none !important;
}
.auth-story::after {
  content: '' !important;
  position: absolute !important;
  bottom: -20% !important; right: -12% !important;
  width: 480px !important; height: 480px !important;
  filter: blur(46px) !important;
  border-radius: 50% !important; pointer-events: none !important;
}
.auth-story .brand,
.auth-story h1,
.auth-story p { position: relative; z-index: 2; }
.auth-story .brand { border-bottom: none !important; padding-bottom: 0 !important; }
.auth-story .brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  box-shadow: 0 10px 30px rgba(91, 91, 214, 0.5) !important;
  color: #fff !important;
}
.auth-story .brand strong { color: #fff !important; }
.auth-story .brand span { color: rgba(255, 255, 255, 0.6) !important; }
.auth-story h1 {
  font-size: clamp(46px, 5.6vw, 80px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 20px !important;
  max-width: 600px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ffffff 30%, rgba(255,255,255,0.72) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.auth-story p {
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 440px !important;
  margin: 0 !important;
}

.auth-card-container {
  background: var(--surface) !important;
  border-left: 1px solid var(--hairline-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.auth-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 48px 44px !important;
}
.auth-head h2 {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.025em !important;
}
.auth-head .eyebrow { color: var(--muted-2) !important; }

.auth-tabs {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}
.auth-tabs button {
  background: transparent !important;
  color: var(--muted) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: color var(--t-fast) var(--ease) !important;
}
.auth-tabs button.active {
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

.auth-form { gap: 15px !important; }
.auth-form label { color: var(--ink-2) !important; font-size: 13px !important; font-weight: 600 !important; }
.auth-form input,
.auth-form select {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 13px !important;
  color: var(--ink) !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}
.auth-form input:focus,
.auth-form select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
  outline: none !important;
}
.auth-form input::placeholder { color: var(--muted-2) !important; }
.auth-row-options { color: var(--muted) !important; }
.auth-row-options label { color: var(--muted) !important; font-weight: 500 !important; }
.auth-row-options input[type="checkbox"] { accent-color: var(--accent) !important; }
.auth-row-options span { color: var(--accent) !important; font-weight: 600 !important; }

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — shared
   ═══════════════════════════════════════════════════════════════════ */
.primary-action,
.secondary-action,
.pill-button,
.icon-button,
.wechat-action,
.text-button {
  border-radius: var(--r-pill) !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease) !important;
}
.primary-action {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--shadow-accent) !important;
}
.primary-action:hover {
  background: var(--accent-press) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px var(--accent-glow) !important;
}
.primary-action:active { transform: translateY(0) scale(0.985) !important; }

.secondary-action,
.pill-button,
.icon-button {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-xs) !important;
}
.secondary-action:hover,
.pill-button:hover,
.icon-button:hover {
  background: var(--surface) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-edge) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}
.secondary-action:active,
.pill-button:active,
.icon-button:active { transform: translateY(0) scale(0.985) !important; }

/* Auth wide buttons */
.auth-form .primary-action {
  border-radius: 13px !important;
  padding: 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.auth-form .wechat-action,
.wechat-action {
  background: var(--green-soft) !important;
  color: var(--green-ink) !important;
  border: 1px solid rgba(26, 156, 82, 0.2) !important;
  border-radius: 13px !important;
  font-weight: 600 !important;
}
.wechat-disabled,
.wechat-action:disabled,
#settingsBindWechat:disabled,
#bindExistingWechatBtn:disabled,
#bindCurrentWechatBtn:disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.2) !important;
  transform: none !important;
  box-shadow: none !important;
}
.wechat-disabled:hover,
.wechat-action:disabled:hover,
#settingsBindWechat:disabled:hover,
#bindExistingWechatBtn:disabled:hover,
#bindCurrentWechatBtn:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}
.auth-switch-note { color: var(--muted) !important; }
.auth-switch-note button { color: var(--accent) !important; font-weight: 700 !important; background: none !important; border: none !important; box-shadow: none !important; }
.auth-note { color: var(--muted-2) !important; }

.agreement-check,
.auth-form .agreement-check {
  border-color: var(--hairline-soft) !important;
  background: var(--surface-2) !important;
  border-radius: 13px !important;
}
.agreement-check span { color: var(--muted) !important; }
.agreement-check input { accent-color: var(--accent) !important; }

.status-pill,
.role-chip {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent-edge) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
}
.status-pill.good { background: var(--green-soft) !important; color: var(--green-ink) !important; border-color: rgba(26,156,82,.2) !important; }
.status-pill.bad { background: var(--red-soft) !important; color: var(--red-ink) !important; border-color: rgba(224,56,43,.2) !important; }

.mobile-confirm {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}
.mobile-confirm p { color: var(--muted) !important; }

.wechat-bind-panel,
.wechat-qr-panel {
  border-color: rgba(26, 156, 82, 0.18) !important;
  background: var(--green-soft) !important;
  border-radius: var(--r-sm) !important;
}
.wechat-bind-panel h3, .wechat-qr-panel h3 { color: var(--ink) !important; }
.wechat-bind-panel p, .wechat-qr-panel p { color: var(--muted) !important; }
.wechat-bind-panel label { color: var(--ink-2) !important; }
.wechat-bind-panel input { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 12px !important; }
.qr-box { background: var(--surface) !important; border-color: var(--hairline) !important; border-radius: 18px !important; }

.feedback {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-soft) !important;
  color: var(--ink-2) !important;
  border-radius: var(--r-sm) !important;
}
.feedback.good { background: var(--green-soft) !important; color: var(--green-ink) !important; border-color: rgba(26,156,82,.2) !important; }
.feedback.bad { background: var(--red-soft) !important; color: var(--red-ink) !important; border-color: rgba(224,56,43,.2) !important; }

/* ═══════════════════════════════════════════════════════════════════
   APP SHELL · SIDEBAR · NAV
   ═══════════════════════════════════════════════════════════════════ */
.app-shell {
  background: transparent !important;
  width: min(1500px, 100%) !important;
  max-width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
  grid-template-columns: 268px minmax(0, 1fr) !important;
}
/* overflow safety: let the content column shrink instead of pushing wide */
.main { min-width: 0 !important; }
.view, .view-grid, .hero-grid, .metric-grid { min-width: 0 !important; }

.sidebar {
  background: var(--glass-side) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: none !important;
  border-right: 1px solid var(--hairline-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100vh !important;
  top: 0 !important;
  width: 268px !important;
  padding: 26px 18px !important;
  gap: 18px !important;
}
.sidebar .brand { padding: 0 10px 18px !important; border-bottom: 1px solid var(--hairline-soft) !important; }
.sidebar .brand-mark {
  width: 42px !important; height: 42px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  box-shadow: 0 8px 20px rgba(91, 91, 214, 0.3) !important;
  font-size: 15px !important;
  color: #fff !important;
}
.sidebar .brand strong { color: var(--ink) !important; font-size: 16px !important; font-weight: 700 !important; }
.sidebar .brand span { color: var(--muted-2) !important; font-size: 11px !important; }

.nav { gap: 3px !important; border-top: none !important; padding-top: 0 !important; }
.nav-item {
  border: none !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  padding: 11px 14px !important;
  min-height: 48px !important;
  margin: 0 !important;
  font-weight: 500 !important;
  position: relative !important;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease) !important;
}
.nav-item:hover { background: var(--surface-2) !important; color: var(--ink) !important; transform: none !important; }
.nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  padding-left: 14px !important;
  border-left: none !important;
}
.nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important; top: 50% !important;
  width: 4px !important; height: 20px !important;
  transform: translateY(-50%) !important;
  border-radius: 99px !important;
  background: var(--accent) !important;
}
.nav-item span { font-weight: 600 !important; font-size: 14px !important; }
.nav-item small { color: var(--muted-2) !important; font-size: 11px !important; opacity: 1 !important; }
.nav-item.active small { color: var(--accent-ink) !important; opacity: 0.66 !important; }

.mini-card,
.quote-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.quote-card .eyebrow { color: var(--accent) !important; }
.quote-card strong { color: var(--ink-2) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.5 !important; }
.quote-meter { background: var(--accent-soft) !important; }
.quote-meter span { background: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MAIN · TOPBAR · SEARCH
   ═══════════════════════════════════════════════════════════════════ */
.main {
  background: transparent !important;
  padding: 0 36px 120px !important;
  gap: 28px !important;
}

.topbar {
  background: var(--glass-top) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 20px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
}
.topbar h1 {
  color: var(--ink) !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}
.topbar .eyebrow { color: var(--muted-2) !important; }

.search-box {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: var(--shadow-xs) !important;
  min-height: 46px !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}
.search-box:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; }
.search-box input { color: var(--ink) !important; background: transparent !important; }
.search-box span { color: var(--muted-2) !important; }

.pill-button {
  border-radius: 11px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
}
.role-chip { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }

.global-search-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
}
.search-panel-head { color: var(--muted) !important; }
.search-panel-head strong { color: var(--ink) !important; }
.search-result {
  background: var(--surface-2) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--ink) !important;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) !important;
}
.search-result:hover { background: var(--accent-soft-2) !important; transform: translateX(3px) !important; box-shadow: none !important; border-color: transparent !important; }
.search-result span { color: var(--accent) !important; }
.search-result small { color: var(--muted) !important; }
.search-result em { color: var(--ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL · eyebrow + surface cards
   ═══════════════════════════════════════════════════════════════════ */
.eyebrow {
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

.surface-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
  padding: 26px !important;
}
.surface-card h2, .surface-card h3 { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
/* remove the old gradient underline gimmick */
.surface-card h2::before, .surface-card h3::before { display: none !important; }
.surface-card .muted, .muted { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════
   HERO + METRICS — the de-cluttered student dashboard
   ═══════════════════════════════════════════════════════════════════ */
.hero-grid {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

.hero-panel {
  border: none !important;
  border-radius: var(--r-lg) !important;
  min-height: 0 !important;
  padding: 28px 34px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 32px !important;
  color: #fff !important;
}

/* merged today-progress block (ring lives inside the hero now) */
.hero-progress {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  border-radius: var(--r) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  min-width: 0 !important;
}
.hero-progress .ring {
  width: 96px !important; height: 96px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}
.hero-progress .ring span {
  width: 70px !important; height: 70px !important;
  background: #0c1834 !important;
  color: #fff !important;
  font-size: 21px !important;
  font-family: var(--font-display) !important;
}
.hero-progress-meta { text-align: left !important; display: grid !important; gap: 3px !important; }
.hero-progress-label {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.09em !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
.hero-progress-meta strong { font-size: 17px !important; font-weight: 700 !important; color: #fff !important; }
.hero-progress-meta small { font-size: 12.5px !important; color: rgba(255, 255, 255, 0.62) !important; }
.hero-progress-meta small b { color: #7fd0a0 !important; font-weight: 800 !important; }
.hero-progress.assignment-progress-widget {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: min(540px, 46vw) !important;
  max-width: 100% !important;
  padding: 14px !important;
}
.assignment-progress-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
.assignment-progress-head strong {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}
.assignment-progress-scroll {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 1px 2px 4px !important;
  scrollbar-width: thin !important;
}
.assignment-progress-card {
  flex: 0 0 clamp(136px, 13vw, 162px) !important;
  scroll-snap-align: start !important;
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 180px !important;
  padding: 12px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.assignment-progress-card.empty {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.assignment-progress-card-top {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.assignment-progress-card-top span {
  color: rgba(255,255,255,0.62) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.assignment-progress-card-top strong {
  color: #fff !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.assignment-progress-card.empty .assignment-progress-card-top strong {
  font-size: 18px !important;
  color: rgba(255,255,255,0.72) !important;
}
.assignment-progress-card small {
  color: rgba(255,255,255,0.56) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.assignment-progress-bar {
  height: 6px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.14) !important;
}
.assignment-progress-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #3ddc84, #7fd0ff) !important;
}
.assignment-progress-card.reading .assignment-progress-bar i { background: linear-gradient(90deg, #7fb6ff, #a78bfa) !important; }
.assignment-progress-card.writing .assignment-progress-bar i { background: linear-gradient(90deg, #ffd166, #ff8a7a) !important; }
/* Decorative glows must stay OUT of the grid flow (premium.css forces
   ::before/::after to display:block; keep them absolutely positioned so
   they don't become grid items and shove the real columns around). */
.hero-panel::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important; z-index: 0 !important;
}
.hero-panel::after { pointer-events: none !important; z-index: 0 !important; }
.hero-copy { position: relative !important; z-index: 2 !important; }
.hero-copy .eyebrow { color: #7fb6ff !important; }
.hero-copy h2 {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: clamp(26px, 2.3vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  margin: 6px 0 6px !important;
}
.hero-copy p { color: rgba(255, 255, 255, 0.66) !important; font-size: 14.5px !important; line-height: 1.6 !important; margin-top: 4px !important; max-width: 560px !important; }

.hero-stats-row { display: flex !important; gap: 14px !important; margin: 26px 0 !important; flex-wrap: wrap !important; }
.hero-stat {
  display: flex !important; flex-direction: column !important; gap: 5px !important;
  padding: 14px 20px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  min-width: 104px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}
.hero-stat:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255,255,255,0.22) !important; transform: translateY(-2px) !important; }
.hero-stat-label { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; color: rgba(255, 255, 255, 0.55) !important; }
.hero-stat strong { font-size: 26px !important; font-weight: 700 !important; color: #fff !important; line-height: 1 !important; letter-spacing: -0.02em !important; }
.hero-stat-warn { color: #ff8a7a !important; }

.hero-actions { margin-top: 16px !important; }
.hero-actions .primary-action { background: #fff !important; color: #0b1430 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; }
.hero-actions .primary-action:hover { background: #fff !important; color: #0b1430 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important; }
.hero-actions .secondary-action {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.hero-actions .secondary-action:hover { background: rgba(255,255,255,0.18) !important; color: #fff !important; border-color: rgba(255,255,255,0.3) !important; }

/* legacy hero illustration — keep hidden */
.learning-visual, .orbit, .letter-tile, .student-avatar, .console-window { display: none !important; }

/* Progress ring panel */
.progress-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 28px !important;
}
.ring {
  background: var(--surface-3) !important;
  background: conic-gradient(var(--accent) 0deg, var(--surface-3) 0deg) !important;
  border-radius: 50% !important;
}
.ring span { background: var(--surface) !important; color: var(--ink) !important; font-weight: 700 !important; }
.progress-panel strong { color: var(--ink) !important; font-weight: 700 !important; }
.progress-panel p { color: var(--muted) !important; }

/* Metric grid — calmed: neutral surface, accent only on the number */
.metric-grid { gap: 14px !important; }
/* The home hero + metric strip belong to the Today view only — keep them
   hidden everywhere else, at every breakpoint (overrides the mobile
   display:grid below). Scoped to the DIRECT children of .main so the
   in-view metric grids (teacher KPIs, training/tricky/admin stats, which
   live nested inside #view-* panels) are never affected. */
body:not([data-view="today"]) .main > .hero-grid,
body:not([data-view="today"]) .main > .metric-grid { display: none !important; }
/* Teacher dashboard has 6 metrics — keep them in two even rows of 3 on desktop
   (avoids the orphaned card + big gap left by a 5-col grid). */
.metric-grid.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.metric-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-left: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-xs) !important;
  min-height: 116px !important;
  padding: 20px 22px !important;
}
.metric-card:hover { border-color: var(--hairline-soft) !important; }
.metric-card::after { display: none !important; }   /* remove the big color blob */
.metric-card span { color: var(--muted) !important; font-weight: 600 !important; font-size: 13px !important; }
.metric-card strong { color: var(--ink) !important; font-size: 34px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; font-family: var(--font-display) !important; }
.metric-card small { color: var(--muted-2) !important; }
/* color variants reduced to a small top dot of accent on the value only */
.metric-card.blue strong { color: var(--accent) !important; }
.metric-card.green strong { color: var(--green) !important; }
.metric-card.peach strong { color: var(--red) !important; }
.metric-card.purple strong { color: var(--purple) !important; }
.metric-card.blue, .metric-card.green, .metric-card.peach, .metric-card.purple {
  background: var(--surface) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   VIEW CONTENT — generic cards, forms, controls
   ═══════════════════════════════════════════════════════════════════ */
.view-grid { gap: 22px !important; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) !important; }

.task-list { gap: 10px !important; }
.task-row {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-sm) !important;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}
.task-row:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-sm) !important; border-color: var(--hairline) !important; }
.task-row strong { color: var(--ink) !important; }
.task-row span { color: var(--muted) !important; }
.task-icon { background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: 13px !important; }

/* selects + inputs */
select,
input[type="number"],
input[type="search"] {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
}
select:focus,
input[type="number"]:focus,
input[type="search"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
  outline: none !important;
}
.field { color: var(--muted) !important; }

/* segmented + tabs */
.segmented-control, .auth-tabs { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; }
.segmented-control span { color: var(--muted) !important; }
.segmented-control input:checked + span {
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

.unit-pill {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.unit-pill:hover { transform: translateY(-1px) !important; border-color: var(--accent-edge) !important; }
.unit-pill:has(input:checked) { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.unit-pill input { accent-color: var(--accent) !important; }
.unit-pill small { color: var(--muted-2) !important; }

.home-level-picker { border-color: var(--hairline-soft) !important; background: var(--surface-2) !important; border-radius: var(--r-sm) !important; }
.home-level-picker span { color: var(--accent) !important; }
.home-level-picker strong { color: var(--ink) !important; }
.home-level-picker p { color: var(--muted) !important; }
.home-level-option {
  border-color: var(--hairline) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-radius: 14px !important;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.home-level-option:hover { transform: translateY(-2px) !important; border-color: var(--accent-edge) !important; }
.home-level-option.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.home-level-option strong { color: var(--ink) !important; }
.home-level-option small { color: var(--muted) !important; }
.level-lock { background: var(--accent-soft-2) !important; border-color: var(--accent-edge) !important; border-radius: 13px !important; }
.level-lock span, .level-lock small { color: var(--muted) !important; }
.level-lock strong { color: var(--accent-ink) !important; }

/* Today-plan header: title + compact level chip (level lives in Settings now) */
.today-plan-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
.today-plan-head .eyebrow { margin: 0 !important; }
.today-plan-head h2 { margin: 4px 0 0 !important; }
.home-level-chip {
  display: inline-grid; grid-template-columns: auto auto; align-items: center;
  column-gap: 12px; row-gap: 0;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.home-level-chip:hover { border-color: var(--accent-edge); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.home-level-chip .hlc-k { grid-column: 1; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.home-level-chip .hlc-v { grid-column: 1; font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--accent-ink); }
.home-level-chip .hlc-sub { grid-column: 1; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.home-level-chip .hlc-go { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.home-level-chip .hlc-go .ic { width: 18px; height: 18px; }

/* Compact level grid inside the settings drawer */
.settings-level-options { margin-top: 12px !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 8px !important; }
.settings-level-options .home-level-option { min-height: 76px !important; padding: 10px 12px !important; border-radius: 13px !important; }
.settings-level-options .home-level-option strong { font-size: 22px !important; }
.settings-level-options .home-level-option small { font-size: 10.5px !important; }

.check-row { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 14px !important; }
.check-row input { accent-color: var(--accent) !important; }
.check-row span { color: var(--ink) !important; }
.check-row small { color: var(--muted) !important; }

.text-button { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink-2) !important; min-height: 36px !important; }
.text-button.danger { color: var(--red-ink) !important; border-color: rgba(224,56,43,.3) !important; background: var(--red-soft) !important; }
.divider { background: var(--hairline-soft) !important; }

/* ═══════════════════════════════════════════════════════════════════
   STUDY · WORD CARD · QUIZ
   ═══════════════════════════════════════════════════════════════════ */
.word-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  min-height: 460px !important;
}
.word-title { color: var(--ink) !important; letter-spacing: -0.03em !important; font-weight: 800 !important; font-family: var(--font-display) !important; }
.word-meaning { color: var(--ink-2) !important; }
.word-meaning small { color: var(--muted) !important; }
.word-example { color: var(--muted) !important; }
.badge { background: var(--accent-soft) !important; color: var(--accent-ink) !important; font-size: 11px !important; border-radius: var(--r-pill) !important; }

.tool-cluster { background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.tool-cluster span { color: var(--accent) !important; }
.tool-cluster strong { color: var(--ink) !important; }
.audio-feedback { color: var(--muted) !important; }
.audio-feedback.good { color: var(--green-ink) !important; }

/* "Try a sentence" / "Use it in a sentence" — AI 造句 CTA.
   Was an orphaned left-aligned button; make it a clean separated CTA. */
.inline-ai-coach {
  margin-top: 6px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--hairline-soft) !important;
}
.inline-ai-coach > .secondary-action {
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-edge) !important;
  color: var(--accent-ink) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.inline-ai-coach > .secondary-action::before {
  content: "" !important;
  width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
  background: currentColor !important;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l1.9 6.5 6.5 1.9-6.5 1.9L12 18.4l-1.9-6.5L3.6 10l6.5-1.9z'/%3E%3Cpath d='M19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6L15.5 17.5l2.6-.9z'/%3E%3C/svg%3E") !important;
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l1.9 6.5 6.5 1.9-6.5 1.9L12 18.4l-1.9-6.5L3.6 10l6.5-1.9z'/%3E%3Cpath d='M19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6L15.5 17.5l2.6-.9z'/%3E%3C/svg%3E") !important;
}
.inline-ai-coach > .secondary-action:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-accent) !important;
}

.compact-word { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important; }
.compact-word:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-sm) !important; }
.compact-word strong { color: var(--ink) !important; }
.compact-word p { color: var(--muted) !important; }
.compact-word small { color: var(--muted-2) !important; }

.question-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.question-prompt { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; }
.option {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 16px !important;
  color: var(--ink) !important;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}
.option:hover { border-color: var(--accent) !important; background: var(--accent-soft-2) !important; transform: translateX(3px) !important; box-shadow: var(--shadow-xs) !important; }
.option.correct { background: var(--green-soft) !important; border-color: var(--green) !important; color: var(--green-ink) !important; }
.option.wrong { background: var(--red-soft) !important; border-color: var(--red) !important; color: var(--red-ink) !important; }

.practice-review { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r) !important; }
.practice-review.good { background: var(--green-soft) !important; border-color: rgba(26,156,82,.2) !important; }
.practice-review.bad { background: var(--red-soft) !important; border-color: rgba(224,56,43,.2) !important; }
.practice-review span { color: var(--accent) !important; }
.practice-review strong { color: var(--ink) !important; }
.review-detail div { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: 13px !important; }
.review-detail dt { color: var(--muted-2) !important; }
.review-detail dd { color: var(--ink-2) !important; }

/* Training mode cards */
.training-card-icon {
  width: 46px !important; height: 46px !important;
  display: grid !important; place-items: center !important;
  border-radius: 14px !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.training-card-icon svg { width: 22px !important; height: 22px !important; }
.training-card-icon.tci-practice { background: var(--accent-soft) !important; color: var(--accent) !important; }
.training-card-icon.tci-quiz { background: var(--green-soft) !important; color: var(--green) !important; }
.training-card-icon.tci-wrong { background: var(--amber-soft) !important; color: var(--amber-ink, var(--amber)) !important; }

/* Training options as expandable panels:
   · desktop (>1180px) = always open, non-interactive (looks like cards)
   · mobile (<=1180px) = collapsed to a compact icon+title row, tap to expand */
.training-action-card.tac { display: grid !important; align-content: start !important; }
.tac > summary {
  list-style: none;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
}
.tac > summary::-webkit-details-marker { display: none; }
.tac-head { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tac-head span { color: var(--accent) !important; font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .05em; }
.tac-head strong { color: var(--ink) !important; font-size: 17px !important; font-weight: 700 !important; }
.tac-chevron { flex-shrink: 0; color: var(--muted-2); transition: transform 0.28s var(--ease); }
.tac[open] .tac-chevron { transform: rotate(180deg); }
.tac-body { margin-top: 14px; gap: 12px; }
.tac[open] > .tac-body { display: grid; }
/* Keep all three cards identical at EVERY width: always expanded,
   button always visible, no collapse chevron. (Quick 3-way access on
   mobile still lives in the bottom-tab popup.) */
.tac > .tac-body { display: grid !important; }
.tac > summary { cursor: default !important; }
.tac-chevron { display: none !important; }
.tac-body p { margin: 0; color: var(--muted) !important; line-height: 1.55; }
.tac-body .primary-action, .tac-body .secondary-action { width: 100%; }

/* Per-type button color — unified format, distinct hue matching each icon.
   Practice = accent · Quiz = green · Review = amber. */
.tac-body button[data-jump="practice"] {
  background: var(--accent) !important; color: #fff !important; border: none !important;
  box-shadow: 0 6px 16px var(--accent-glow) !important;
}
.tac-body button[data-jump="practice"]:hover { background: var(--accent-press) !important; }
.tac-body button[data-jump="quiz"] {
  background: var(--green) !important; color: #fff !important; border: none !important;
  box-shadow: 0 6px 16px rgba(26,156,82,0.30) !important;
}
.tac-body button[data-jump="quiz"]:hover { background: var(--green-ink) !important; color: #fff !important; }
.tac-body button[data-jump="wrong"] {
  background: var(--amber) !important; color: #fff !important; border: none !important;
  box-shadow: 0 6px 16px rgba(217,138,0,0.30) !important;
}
.tac-body button[data-jump="wrong"]:hover { background: #bf7a00 !important; color: #fff !important; }
.tac-body button[data-jump]:hover { transform: translateY(-2px) !important; }
.tac-body button[data-jump]:active { transform: translateY(0) scale(0.985) !important; }

/* Consistent layout at EVERY width: the three cards always stack in one
   column, so each colored button gets the same full-card-width treatment
   (no jump between 3-up on desktop and stacked on mobile). */
.training-mode-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.tac-body button[data-jump] { min-height: 50px !important; }

@media (max-width: 1180px) {
  .training-action-card.tac { min-height: 0 !important; }
}

.training-action-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}
.training-action-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow) !important; border-color: var(--accent-edge) !important; }
.training-action-card span { color: var(--accent) !important; }
.training-action-card strong { color: var(--ink) !important; }
.training-action-card p { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════
   READING
   ═══════════════════════════════════════════════════════════════════ */
.reading-mode-tabs button { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 14px !important; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important; }
.reading-mode-tabs button:hover { transform: translateY(-2px) !important; }
.reading-mode-tabs button.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: none !important; }
.reading-mode-tabs strong { color: var(--ink) !important; }
.reading-mode-tabs span { color: var(--muted) !important; }

.reading-task-card { background: var(--surface) !important; border-color: var(--hairline-soft) !important; color: var(--ink) !important; border-radius: 14px !important; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important; }
.reading-task-card:hover { transform: translateX(3px) !important; box-shadow: var(--shadow-xs) !important; }
.reading-task-card.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: none !important; }
.reading-task-card strong { color: var(--ink) !important; }
.reading-task-card small, .reading-task-card em { color: var(--muted) !important; }
.reading-task-status { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.reading-task-status.done { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.reading-task-status.last { background: var(--amber-soft) !important; color: var(--amber-ink, var(--amber)) !important; }
.reading-overview article { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.reading-overview strong { color: var(--ink) !important; }
.reading-overview span { color: var(--muted) !important; }
.reading-card { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r) !important; }
.reading-card-head h3 { color: var(--ink) !important; }
.reading-card-head small { color: var(--muted) !important; }
.reading-progress { background: var(--surface-3) !important; }
.reading-progress span { background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important; }
.sentence-row { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: 14px !important; }
.sentence-index { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-radius: 12px !important; }
.sentence-index.done { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.sentence-row p { color: var(--ink) !important; }
.reading-paragraph-copy small { color: var(--muted) !important; }
.reading-audio-status { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.reading-ai-guidance small { color: var(--muted) !important; }
.token-list span { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.token-list.difficult span { background: var(--red-soft) !important; color: var(--red-ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   SPEAKING + AI
   ═══════════════════════════════════════════════════════════════════ */
.speaking-list-head span { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.ai-challenge-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
}
.ai-challenge-head h3 { color: var(--ink) !important; }
.ai-challenge-head p { color: var(--muted) !important; }
.ai-challenge-tools span { color: var(--accent) !important; }
.icon-action { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--accent) !important; border-radius: 12px !important; }
.ai-task { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: 14px !important; }
.ai-task span { color: var(--accent) !important; }
.ai-task strong { color: var(--ink) !important; }
.ai-task p { color: var(--muted) !important; }
.ai-answer-field span { color: var(--accent) !important; }
.ai-answer-field textarea { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 14px !important; box-shadow: none !important; }
.ai-answer-field textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; }
.ai-result { background: var(--green-soft) !important; border-color: rgba(26,156,82,.2) !important; border-radius: var(--r-sm) !important; }
.ai-result.needs-review { background: var(--red-soft) !important; border-color: rgba(224,56,43,.2) !important; }
.ai-result-copy strong { color: var(--ink) !important; }
.ai-result-copy p { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════
   WRITING
   ═══════════════════════════════════════════════════════════════════ */
.upload-drop {
  border: 1.5px dashed var(--accent-edge) !important;
  background: var(--accent-soft-2) !important;
  border-radius: var(--r) !important;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.upload-drop:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.upload-drop span { color: var(--accent) !important; }
.upload-drop strong { color: var(--ink) !important; }
.upload-drop small { color: var(--muted) !important; }
.writing-preview { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.empty-preview { color: var(--muted-2) !important; }
.writing-textarea-label span { color: var(--ink) !important; }
.writing-textarea-label textarea { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: var(--r-sm) !important; }
.writing-next-note { background: var(--accent-soft-2) !important; color: var(--muted) !important; border-radius: var(--r-sm) !important; }
.writing-next-note strong { color: var(--accent-ink) !important; }
.writing-review-head { background: var(--accent-soft) !important; border-color: var(--accent-edge) !important; border-radius: var(--r-sm) !important; }
.writing-review-head h3 { color: var(--ink) !important; }
.writing-review-head > strong { color: var(--accent) !important; }
.writing-review-head small { color: var(--muted) !important; }
.writing-score-grid article { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.writing-score-grid span { color: var(--muted) !important; }
.writing-score-grid strong { color: var(--ink) !important; }
.writing-score-grid small { color: var(--muted-2) !important; }
.sentence-feedback { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.sentence-feedback strong { color: var(--ink) !important; }
.sentence-feedback p { color: var(--red-ink) !important; }
.sentence-feedback small { color: var(--green-ink) !important; }
.native-tip { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.native-tip strong { color: var(--red-ink) !important; background: var(--red-soft) !important; }
.native-tip span { color: var(--green-ink) !important; background: var(--green-soft) !important; }
.native-tip p { color: var(--muted) !important; }
.assignment-select-card { background: var(--green-soft) !important; border-color: rgba(26,156,82,.18) !important; border-radius: var(--r-sm) !important; }
.assignment-select-card strong { color: var(--ink) !important; }
.assignment-select-card span { color: var(--muted) !important; }
.assignment-brief { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.assignment-brief h3 { color: var(--ink) !important; }
.assignment-brief p { color: var(--muted) !important; }
.assignment-brief > span { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-color: var(--accent-edge) !important; }

/* ── 自动生成作文题目 · 整体重排（修复溢出/重叠，手机+电脑都稳）── */
.writing-prompt-generator {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  padding: 20px !important;
  gap: 16px !important;
}
.writing-prompt-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.writing-prompt-head > div { min-width: 0 !important; }
.writing-prompt-head strong { color: var(--ink) !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: -0.01em !important; }
.writing-prompt-head span { color: var(--muted) !important; font-weight: 500 !important; font-size: 12.5px !important; }
.writing-prompt-head small {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent-edge) !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
/* controls: topic grows, count compact, button full-width row of its own when tight */
.writing-prompt-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  grid-template-areas: "topic count" "btn btn" !important;
  gap: 12px !important;
  align-items: end !important;
}
.writing-prompt-controls .mini-field:nth-of-type(1) { grid-area: topic !important; }
.writing-prompt-controls .mini-field:nth-of-type(2) { grid-area: count !important; }
.writing-prompt-controls > .secondary-action,
.writing-prompt-controls > #generateWritingPrompt {
  grid-area: btn !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  background: var(--accent) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-accent) !important;
}
.writing-prompt-controls > .secondary-action:hover,
.writing-prompt-controls > #generateWritingPrompt:hover { background: var(--accent-press) !important; color: #fff !important; transform: translateY(-2px) !important; }
.writing-prompt-controls > .secondary-action[disabled] { opacity: 0.6 !important; box-shadow: none !important; transform: none !important; }
.writing-prompt-controls .mini-field { color: var(--muted) !important; min-width: 0 !important; gap: 6px !important; font-size: 12px !important; font-weight: 600 !important; }
.writing-prompt-controls .mini-field input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* suggestions: responsive cards, never overflow */
.writing-prompt-suggestions {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}
.writing-prompt-suggestion {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.writing-prompt-suggestion > div { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.writing-prompt-suggestion strong { color: var(--ink) !important; font-weight: 700 !important; line-height: 1.45 !important; overflow-wrap: anywhere !important; }
.writing-prompt-suggestion p, .writing-prompt-suggestion small { color: var(--muted) !important; overflow-wrap: anywhere !important; }
.writing-prompt-suggestion > .secondary-action { width: 100% !important; margin-top: 2px !important; min-height: 42px !important; }
.mini-field { color: var(--muted) !important; }
.mini-field input, .mini-field select { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 11px !important; }
#writingPrompt, #writingAssignmentSelect { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 12px !important; }
#writingPrompt::placeholder { color: var(--muted-2) !important; }
.level-lock.writing-level-lock { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; }

/* ═══════════════════════════════════════════════════════════════════
   TEACHER + ADMIN
   ═══════════════════════════════════════════════════════════════════ */
.dashboard-hero {
  background: linear-gradient(135deg, var(--accent-soft-2), var(--surface)) !important;
  border-color: var(--hairline-soft) !important;
  border-radius: var(--r) !important;
}
.dashboard-hero .eyebrow { color: var(--accent) !important; }
.dashboard-hero h2, .section-head h3, .section-title { color: var(--ink) !important; }
.section-head span { color: var(--muted) !important; }
.section-head .eyebrow { color: var(--accent) !important; }

.teacher-class-switcher { background: var(--surface) !important; border-color: var(--hairline-soft) !important; box-shadow: var(--shadow-sm) !important; }
.teacher-class-picker span { color: var(--accent) !important; }
.teacher-class-picker select { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 12px !important; }

.teacher-tabs { background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 14px !important; }
.teacher-tabs button { background: transparent !important; color: var(--muted) !important; border-radius: 10px !important; }
.teacher-tabs button:hover { background: var(--surface) !important; color: var(--ink) !important; }
.teacher-tabs button.active { background: var(--accent) !important; color: #fff !important; box-shadow: var(--shadow-accent) !important; }

.chart-card { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r) !important; box-shadow: var(--shadow-sm) !important; }
.bar-track { border-color: var(--hairline-soft) !important; }
.bar-track span { background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important; }
.bar-item strong { color: var(--ink) !important; }
.bar-item small { color: var(--muted-2) !important; }
.distribution-track { background: var(--surface-3) !important; }
.distribution-track span { background: var(--accent) !important; }
.distribution-track.green span { background: var(--green) !important; }
.distribution-track.purple span { background: var(--purple) !important; }
.distribution-list span { color: var(--muted) !important; }
.distribution-list article > div:first-child { color: var(--ink) !important; }

.data-table-wrap { border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.data-table { background: var(--surface) !important; }
.data-table th { background: var(--surface-2) !important; color: var(--muted) !important; border-color: var(--hairline-soft) !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.data-table td { color: var(--ink) !important; border-color: var(--hairline-soft) !important; }
.data-table tr:nth-child(even) td { background: var(--stripe) !important; }
.data-table tbody tr { transition: background var(--t-fast) var(--ease) !important; }
.data-table tr:hover td { background: var(--accent-soft-2) !important; }

.admin-row { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important; }
.admin-row:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-sm) !important; border-color: var(--accent-edge) !important; }
.admin-row strong { color: var(--ink) !important; }
.admin-row p, .admin-row small { color: var(--muted) !important; }
.student-candidate { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: 14px !important; }
.student-candidate strong { color: var(--ink) !important; }
.student-candidate p { color: var(--muted) !important; }
.mini-form label { color: var(--muted) !important; }
.mini-form input, .mini-form select, .mini-form textarea, .assignment-form textarea { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 12px !important; }
.class-qr img { border-color: var(--hairline) !important; background: #fff !important; }
.submission-card, .teacher-submission-card { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 14px !important; color: var(--ink) !important; }
.submission-card:hover { transform: translateY(-2px) !important; border-color: var(--accent-edge) !important; box-shadow: var(--shadow-sm) !important; }
.submission-card span { color: var(--accent) !important; }
.submission-card small { color: var(--muted) !important; }
.submission-meta div { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: 12px !important; }
.submission-meta dt { color: var(--muted-2) !important; }
.submission-meta dd { color: var(--ink-2) !important; }
.submission-image { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; }
.student-detail-card { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.student-detail-grid h4 { color: var(--ink) !important; }
.student-activity-list article { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: 12px !important; }
.student-activity-list strong { color: var(--ink) !important; }
.student-activity-list span, .student-activity-list small { color: var(--muted) !important; }
.assignment-card { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: 14px !important; }
.assignment-card p, .assignment-card small { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL — speech
   ═══════════════════════════════════════════════════════════════════ */
.modal-mask { background: rgba(20, 24, 40, 0.4) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
.speech-modal {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--ink) !important;
  animation: cv-modal-in 0.4s var(--ease) both !important;
}
@keyframes cv-modal-in { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }
.speech-modal .eyebrow { color: var(--accent) !important; }
.speech-modal h2 { color: var(--ink) !important; }
.speech-target { background: var(--accent-soft-2) !important; color: var(--ink-2) !important; border-radius: var(--r-sm) !important; }
.ai-coach-modal { width: min(780px, 100%) !important; }
.ai-coach-modal .ai-challenge-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.ai-coach-modal .ai-challenge-head { padding-right: 48px !important; }
.ai-coach-target { margin-bottom: 16px !important; }
.recorder-card { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.recorder-card strong { color: var(--ink) !important; }
.level-bar { background: var(--surface-3) !important; }
.level-bar span { background: var(--accent) !important; }
.score-card { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.score-card span { color: var(--muted) !important; }
.score-card strong { color: var(--ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MOTION — reveal, view-enter, button loading, empty state
   ═══════════════════════════════════════════════════════════════════ */
.primary-action.loading, .secondary-action.loading { position: relative !important; color: transparent !important; pointer-events: none !important; }
.primary-action.loading::after, .secondary-action.loading::after {
  content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important;
  width: 16px !important; height: 16px !important; margin: -8px 0 0 -8px !important;
  border: 2px solid rgba(255,255,255,0.35) !important; border-top-color: #fff !important;
  border-radius: 50% !important; animation: cv-spin 0.7s linear infinite !important;
}
.secondary-action.loading::after { border-color: var(--hairline) !important; border-top-color: var(--ink) !important; }
@keyframes cv-spin { to { transform: rotate(360deg); } }

@keyframes view-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.view.active { animation: view-enter 0.5s var(--ease) both !important; }

/* JS-driven scroll reveal */
.cv-reveal { opacity: 0; transform: translateY(20px); }
.cv-reveal.cv-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

/* count-up flash */
.cv-counting { color: var(--accent) !important; transition: color 0.4s var(--ease); }

.empty-state-card {
  text-align: center !important; padding: 48px 24px !important;
  background: var(--surface-2) !important;
  border: 1.5px dashed var(--hairline) !important;
  border-radius: var(--r) !important;
  color: var(--muted) !important;
}
.empty-state-card .icon { font-size: 40px !important; margin-bottom: 14px !important; display: block !important; }
.empty-state-card h3 { color: var(--ink) !important; margin-bottom: 8px !important; }

.workbench-loading { color: var(--ink) !important; }
.workbench-loading .eyebrow { color: var(--accent) !important; }
.workbench-loading p { color: var(--muted) !important; }
.spinner-dots span { background: var(--accent) !important; }
@keyframes cv-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* ── Skeleton shimmer — premium loading feel (no logic change) ──────
   1) Loading "正在读取…" feedback messages get a soft moving sheen.
   2) Metric numbers still showing the raw "--" placeholder are masked
      by a shimmering pill until enhance.js sees a real value arrive. */
@keyframes cv-shimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }

.feedback:not(.bad):not(.good) {
  position: relative !important;
  overflow: hidden !important;
}
.feedback:not(.bad):not(.good)::after {
  content: "" !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%) !important;
  background-size: 200% 100% !important;
  animation: cv-shimmer 1.5s var(--ease) infinite !important;
  pointer-events: none !important;
}
.cv-dark .feedback:not(.bad):not(.good)::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%) !important;
  background-size: 200% 100% !important;
}

/* metric value skeleton (toggled by enhance.js via .cv-skeleton) */
.metric-card strong.cv-skeleton,
.metric-card.blue strong.cv-skeleton,
.metric-card.green strong.cv-skeleton,
.metric-card.peach strong.cv-skeleton,
.metric-card.purple strong.cv-skeleton,
.hero-stat strong.cv-skeleton {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  position: relative !important;
  border-radius: 8px !important;
  background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%) !important;
  background-size: 200% 100% !important;
  animation: cv-shimmer 1.4s var(--ease) infinite !important;
  min-width: 2.2em !important;
  display: inline-block !important;
}
.hero-stat strong.cv-skeleton {
  background: linear-gradient(100deg, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 70%) !important;
  background-size: 200% 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DAILY PLAN (today)
   ═══════════════════════════════════════════════════════════════════ */
.daily-plan-summary, .daily-plan-overview { background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
.daily-plan-overview.no-homework { grid-template-columns: minmax(0, 1fr) auto !important; }
.daily-plan-actions { display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: wrap !important; min-width: 0 !important; }
.daily-plan-actions .secondary-action { min-height: 44px !important; }
.daily-refresh-action { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.daily-refresh-action .ic { width: 16px !important; height: 16px !important; }
.daily-plan-stat { background: var(--surface) !important; border-radius: 13px !important; border-color: var(--hairline-soft) !important; }
.daily-plan-stat.homework-stat { border: 1px solid rgba(124,92,214,.18) !important; background: var(--purple-soft) !important; }
.daily-plan-stat.learning-stat { border: 1px solid rgba(26,156,82,.18) !important; background: var(--green-soft) !important; }
.daily-plan-stat span { color: var(--muted) !important; }
.daily-plan-stat strong { color: var(--ink) !important; }
.daily-plan-stat small { color: var(--muted-2) !important; }
.daily-section { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
.daily-homework-section { background: linear-gradient(135deg, var(--purple-soft), var(--surface)) !important; border-color: rgba(124,92,214,.15) !important; }
.daily-learning-section { background: linear-gradient(135deg, var(--green-soft), var(--surface)) !important; border-color: rgba(26,156,82,.15) !important; }
.daily-section-head strong { color: var(--ink) !important; }
.daily-section-head small { color: var(--muted) !important; }
.daily-section-head span { color: var(--accent) !important; }
.daily-task-row { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 13px !important; }
.daily-task-row.homework-task { border-color: rgba(124,92,214,.18) !important; }
.daily-task-row.learning-task { border-color: rgba(26,156,82,.16) !important; }
.daily-task-row.homework-task .task-icon { background: var(--purple-soft) !important; color: var(--purple) !important; }
.daily-task-row.learning-task .task-icon { background: var(--green-soft) !important; color: var(--green) !important; }
.daily-task-row.completed .task-icon { background: var(--green) !important; color: #fff !important; }
.daily-task-row.in_progress .task-icon, .daily-task-row.partial .task-icon { background: var(--accent) !important; color: #fff !important; }
.daily-task-row strong { color: var(--ink) !important; }
.daily-task-row span { color: var(--muted) !important; }
.daily-task-title-line { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; min-width: 0 !important; }
.daily-task-title-line strong { min-width: 0 !important; }
.daily-task-title-line .daily-status { display: inline-flex !important; flex: 0 0 auto !important; margin-top: -2px !important; }
.daily-status { background: var(--surface-2) !important; color: var(--muted) !important; }
.daily-mini-progress { background: var(--surface-3) !important; }
.daily-mini-progress i { background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important; }
.today-plan-card { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; }
.daily-target-editor { background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
.daily-target-editor label { color: var(--muted) !important; }
.daily-target-editor input, .daily-target-editor select { background: var(--surface) !important; border: 1px solid var(--hairline) !important; color: var(--ink) !important; border-radius: 11px !important; }
.daily-target-controls .secondary-action.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent-ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR  (injected by enhance.js)
   ═══════════════════════════════════════════════════════════════════ */
.mobile-tabbar { display: none; }

/* Never show the mobile tab bar / popup sheet on the login screen */
body:has(#authScreen:not(.hidden)) .mobile-tabbar,
body:has(#authScreen:not(.hidden)) .tab-sheet { display: none !important; }

/* Training popup action sheet (mobile) */
.tab-sheet {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 24px));
  transform: translateX(-50%) translateY(12px) scale(0.98);
  transform-origin: bottom center;
  background: var(--glass-sheet);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--hairline-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: grid;
  gap: 4px;
  z-index: 96;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.tab-sheet.open { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
.tab-sheet-title { padding: 9px 12px 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-2); }
.tab-sheet button {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 58px;
  border: none; background: transparent;
  border-radius: 15px; padding: 0 12px;
  font-family: var(--font); cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tab-sheet button:hover { background: var(--surface-2); }
.tab-sheet button:active { background: var(--surface-2); transform: scale(0.985); }
.tab-sheet .ts-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03); }
.tab-sheet .ts-icon svg { width: 22px; height: 22px; }
/* Tasteful per-item colour system — soft tint + vivid icon. */
.tab-sheet .ts-icon.tci-indigo { background: rgba(91, 91, 214, 0.13);  color: #5b5bd6; }
.tab-sheet .ts-icon.tci-blue   { background: rgba(40, 104, 240, 0.13); color: #2868f0; }
.tab-sheet .ts-icon.tci-green  { background: rgba(26, 156, 82, 0.14);  color: #169a52; }
.tab-sheet .ts-icon.tci-amber  { background: rgba(217, 138, 0, 0.15);  color: #d98a00; }
.tab-sheet .ts-icon.tci-teal   { background: rgba(13, 148, 136, 0.14); color: #0d9488; }
.tab-sheet .ts-icon.tci-cyan   { background: rgba(8, 145, 178, 0.14);  color: #0891b2; }
.tab-sheet .ts-icon.tci-violet { background: rgba(124, 58, 237, 0.13); color: #7c3aed; }
.tab-sheet .ts-icon.tci-rose   { background: rgba(225, 29, 107, 0.13); color: #e11d6b; }
.tab-sheet .ts-icon.tci-purple { background: rgba(124, 92, 214, 0.14); color: #7c5cd6; }
/* legacy aliases (kept so older markup still themes) */
.tab-sheet .ts-icon.tci-practice { background: var(--accent-soft); color: var(--accent); }
.tab-sheet .ts-icon.tci-quiz { background: var(--green-soft); color: var(--green); }
.tab-sheet .ts-icon.tci-wrong { background: var(--amber-soft); color: var(--amber); }
.tab-sheet .ts-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tab-sheet .ts-text strong { font-size: 15px; font-weight: 650; color: var(--ink); }
.tab-sheet .ts-text small { font-size: 12px; color: var(--muted); }
.tab-sheet .ts-arrow { display: grid; place-items: center; width: 22px; color: var(--muted-2); opacity: 0.7; flex-shrink: 0; }
.tab-sheet .ts-arrow svg { width: 17px; height: 17px; }
.tab-sheet button:hover .ts-arrow { color: var(--accent); opacity: 1; transform: translateX(2px); }
/* brighten vivid icons in dark mode for contrast */
html.cv-dark .tab-sheet .ts-icon.tci-indigo { color: #9a9af5; }
html.cv-dark .tab-sheet .ts-icon.tci-blue   { color: #6f9bff; }
html.cv-dark .tab-sheet .ts-icon.tci-green  { color: #45d488; }
html.cv-dark .tab-sheet .ts-icon.tci-amber  { color: #f0b232; }
html.cv-dark .tab-sheet .ts-icon.tci-teal   { color: #2dd4bf; }
html.cv-dark .tab-sheet .ts-icon.tci-cyan   { color: #34c3e0; }
html.cv-dark .tab-sheet .ts-icon.tci-violet { color: #a78bfa; }
html.cv-dark .tab-sheet .ts-icon.tci-rose   { color: #fb6aa0; }
html.cv-dark .tab-sheet .ts-icon.tci-purple { color: #b9a3f5; }

@media (max-width: 1180px) {
  :root {
    --cv-mobile-tabbar-clearance: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-tabbar {
    display: grid !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--glass-bar);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-top: 1px solid var(--hairline-soft);
  }
  .mobile-tab {
    appearance: none;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 2px;
    border-radius: 14px;
    color: var(--muted);
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .mobile-tab .mt-icon { position: relative; font-size: 21px; line-height: 1; }
  
  .mobile-tab.active .mt-icon { transform: translateY(-1px) scale(1.08); }
  .mobile-tab.sheet-active { color: var(--accent-ink); }
  .mobile-tab:active { transform: scale(0.92); }

  /* keep page content clear of the fixed bottom bar */
  .main { padding-bottom: var(--cv-mobile-tabbar-clearance) !important; }
  .view.active { scroll-padding-bottom: var(--cv-mobile-tabbar-clearance); }
}
.tab-sheet.sheet-compact { width: min(360px, calc(100vw - 32px)); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  /* hero stacks: copy on top, today-progress below as a full-width strip */
  .hero-panel { grid-template-columns: 1fr !important; gap: 22px !important; }
  .hero-progress {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .hero-progress .ring { width: 96px !important; height: 96px !important; flex-shrink: 0 !important; }
  .hero-progress .ring span { width: 70px !important; height: 70px !important; font-size: 20px !important; }
  .hero-progress-meta { text-align: left !important; }
  .hero-progress.assignment-progress-widget {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .assignment-progress-head {
    gap: 6px !important;
  }
  .assignment-progress-head strong {
    width: 100% !important;
    text-align: left !important;
    font-size: 15px !important;
  }
  .assignment-progress-scroll {
    gap: 8px !important;
    padding: 1px 1px 5px !important;
  }
  .assignment-progress-card {
    flex-basis: clamp(150px, 58vw, 190px) !important;
    max-width: 190px !important;
    padding: 11px !important;
  }
  .assignment-progress-card-top strong {
    font-size: 20px !important;
  }

  /* sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    transform: translateX(-104%) !important;
    width: 290px !important;
    z-index: 100 !important;
    border-radius: 0 22px 22px 0 !important;
    background: var(--glass-drawer) !important;
    box-shadow: var(--shadow-lg) !important;
    transition: transform var(--t) var(--ease) !important;
  }
  body.nav-open .sidebar { transform: translateX(0) !important; left: 0 !important; }
  body.nav-open::after {
    content: "" !important;
    position: fixed !important; inset: 0 !important;
    z-index: 95 !important;
    background: rgba(20, 24, 40, 0.34) !important;
    backdrop-filter: blur(2px) !important;
  }

  .menu-toggle {
    display: grid !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
  }

  .main { padding: 0 24px 124px !important; gap: 22px !important; }

  /* ── Topbar declutter (760–1180 tablet band fix) ──────────────────
     Was: full desktop action cluster crammed next to ☰, title squashed
     to 3 lines, AND the same tools duplicated in the drawer + tab bar.
     Now: row 1 = ☰ + title; row 2 = full-width search + theme toggle.
     Role chip / CloudBase / WeChat / logout live only in the drawer. */
  .topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "menu title" "actions actions" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
  .menu-toggle { grid-area: menu !important; }
  .topbar-title { grid-area: title !important; min-width: 0 !important; }
  .topbar-title h1 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  .top-actions {
    grid-area: actions !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  /* keep the search box + the theme toggle; everything else → drawer */
  .top-actions > :not(.search-box):not(.cv-theme-toggle) { display: none !important; }
  .top-actions .search-box { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  .top-actions .cv-theme-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    order: 2 !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  /* Content-first on small screens: surface the thing to LEARN immediately
     (word card / quiz / mode cards / workspace) and push the settings &
     controls panel below it — no long scroll past the setup step. */
  .view-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .view-grid > aside { order: 2 !important; }
  .view-grid > :not(aside) { order: 1 !important; }
  .training-mode-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  /* 登录卡在手机上原本被 .auth-screen 的 28px 内边距挤成比登录后的 App(16px 边距)更窄的一张卡。
     把手机端登录页边距对齐 App 内容边距,登录框与登录后宽度一致,避免"登录时窗口偏窄"的观感(#4)。 */
  .auth-screen { padding: 16px !important; }
  .auth-layout { grid-template-columns: 1fr !important; border-radius: 26px !important; }
  .auth-story { display: none !important; }
  .auth-card-container { border-left: none !important; }
  .auth-card { padding: 32px 20px !important; }

  .main { padding: 0 16px var(--cv-mobile-tabbar-clearance, 104px) !important; gap: 20px !important; }
  .topbar { padding: 18px 0 16px !important; }
  .hero-panel { padding: 30px 24px !important; }
  .hero-copy h2 { font-size: clamp(26px, 6vw, 34px) !important; }
  .metric-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .metric-grid.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .surface-card { padding: 20px !important; }
}

@media (max-width: 560px) {
  
  .metric-grid.dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  
  .metric-card strong { font-size: 26px !important; }
  body[data-view="today"] .home-scroll-list {
    max-height: min(390px, calc(100dvh - 260px));
  }
  .word-card { min-height: 360px !important; }
  .top-actions .primary-action, .top-actions .secondary-action, .top-actions .pill-button:not(.cv-theme-toggle), .top-actions .wechat-action { width: 100% !important; }
}

/* Phone: compact each view so it fits much closer to a single screen */
@media (max-width: 768px) {
  :root {
    --cv-mobile-tabbar-clearance: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .main { gap: 16px !important; padding-bottom: var(--cv-mobile-tabbar-clearance) !important; }
  body[data-view="today"] .home-scroll-list,
  body[data-view="today"] .home-action-list,
  body[data-view="today"] .daily-checkin-section {
    scroll-padding-bottom: var(--cv-mobile-tabbar-clearance);
  }
  
  body[data-view="today"] .today-plan-card {
    margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .surface-card { padding: 18px !important; }
  
  .hero-copy h2 { margin: 6px 0 8px !important; }
  .hero-copy p { font-size: 14px !important; }
  .hero-stats-row { margin: 18px 0 !important; }
  .hero-stat { padding: 11px 14px !important; min-width: 0 !important; flex: 1 !important; }
  .progress-panel { padding: 20px !important; }
  .word-card { gap: 14px !important; padding: 22px !important; }
  .question-card { padding: 20px !important; }
  .view-grid { gap: 14px !important; }
  .surface-card h2, .surface-card h3 { font-size: 19px !important; }

  /* ── Minimal mobile Home ──────────────────────────────────────────
     The Home view stacked THREE stat blocks (hero stats + progress ring
     + 4 metric cards) before the daily plan — too much scrolling, and
     Accuracy/etc. repeated across all three. On phones we keep the one
     today-focused hero + the actual task list. The progress ring is
     dropped (redundant), and the 4 library-total metric cards become a
     single compact stat strip (option B). Desktop is unchanged. */
  .hero-grid { gap: 0 !important; }
  .progress-panel { display: none !important; }
  /* B方案: metric cards → one compact 4-up stat strip */
  .metric-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  .metric-card { text-align: center !important; border-radius: 13px !important; }
  .metric-card span { font-size: 10.5px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
  
  .metric-card small { display: none !important; }
  /* hero: trim to greeting + 3 quick stats + actions */
  #heroSubtitle { display: none !important; }
  .hero-panel { border-radius: 24px !important; }
  .hero-copy h2 { font-size: 26px !important; margin: 4px 0 0 !important; }
  .hero-stats-row { margin: 16px 0 16px !important; }
  .hero-stat { padding: 10px 10px !important; border-radius: 14px !important; }
  .hero-stat strong { font-size: 21px !important; }
  .hero-actions { display: flex !important; gap: 10px !important; margin-top: 4px !important; }
  .hero-actions .primary-action,
  .hero-actions .secondary-action { flex: 1 !important; min-height: 46px !important; padding: 0 12px !important; }
  /* daily plan sits right under the hero now — give it a touch more room */
  #view-today { margin-top: 2px !important; }

  /* ── Mobile daily/homework task row — fix cramped, misaligned button ──
     Was: status pill + button left-aligned & wrapping under the text,
     uneven heights. Now: action row spans under the content, status on
     the left and a tidy equal-height button on the right. */
  .daily-task-row .daily-task-actions {
    grid-column: 2 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 3px !important;
  }
  .daily-task-row .daily-status {
    min-height: 32px !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  .daily-task-row .daily-task-actions .secondary-action {
    width: min(120px, 100%) !important;
    max-width: 120px !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    justify-self: end !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Mobile density pass ──────────────────────────────────────────
     Phones had desktop-sized padding, oversized decorative headings and
     tall option tiles, so each block ate a lot of vertical space. Trim
     chrome (padding / decorative text / tile heights) while keeping the
     primary text at readable sizes, so more fits per screen. */

  /* outer cards a touch tighter */
  .surface-card { padding: 16px !important; }
  .today-plan-card h2 { font-size: 18px !important; margin-bottom: 12px !important; }

  /* level picker: drop the long helper line, shrink heading + tiles */
  .home-level-picker { padding: 12px !important; gap: 10px !important; margin: 0 0 12px !important; border-radius: 16px !important; }
  .home-level-picker > div:first-child { display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; }
  .home-level-picker span { font-size: 10.5px !important; }
  .home-level-picker strong { font-size: 17px !important; margin-top: 0 !important; }
  .home-level-picker p { display: none !important; }
  .home-level-options { gap: 8px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .home-level-option { min-height: 0 !important; padding: 9px 8px !important; gap: 2px !important; text-align: center !important; border-radius: 12px !important; }
  .home-level-option:hover { transform: none !important; }
  .home-level-option span { font-size: 13px !important; font-weight: 700 !important; }
  .home-level-option strong { font-size: 16px !important; }
  .home-level-option small { font-size: 10.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* daily plan overview + sections: tighter padding & gaps */
  .daily-plan-overview { padding: 12px !important; gap: 8px !important; }
  .daily-plan-overview.no-homework { grid-template-columns: 1fr !important; }
  .daily-plan-actions { justify-content: flex-start !important; }
  .daily-plan-actions .secondary-action { min-height: 40px !important; padding: 0 14px !important; }
  .daily-plan-stat { padding: 10px 12px !important; border-radius: 12px !important; }
  .daily-plan-stat strong { font-size: 18px !important; }
  .daily-section { padding: 12px !important; border-radius: 14px !important; }
  .daily-section-head { margin-bottom: 8px !important; }
  .daily-section-head strong { font-size: 14px !important; }
  .daily-section-head small { font-size: 11px !important; }

  /* task rows: slimmer icon + padding */
  .daily-task-row { padding: 10px !important; gap: 10px !important; border-radius: 13px !important; }
  .daily-task-row .task-icon,
  .task-row .task-icon { width: 38px !important; height: 38px !important; border-radius: 11px !important; font-size: 13px !important; }
  .daily-task-row strong, .task-row strong { font-size: 14px !important; }
  .daily-task-row span, .task-row span { font-size: 12px !important; }

  /* ── Density pass · all other views ───────────────────────────── */
  /* Vocabulary / word card */
  .word-card { padding: 18px !important; gap: 12px !important; min-height: 0 !important; }
  .word-title { font-size: 34px !important; }
  .word-meaning { font-size: 15px !important; }
  .badge { font-size: 11px !important; padding: 3px 9px !important; }
  .compact-word { padding: 12px !important; }
  .unit-pill { padding: 10px 12px !important; }
  .segmented-control { padding: 3px !important; }
  .segmented-control span { padding: 8px 6px !important; font-size: 13px !important; }

  /* Quiz / practice */
  .question-card { padding: 16px !important; gap: 12px !important; }
  .question-prompt { font-size: 17px !important; }
  .option { padding: 13px 14px !important; border-radius: 13px !important; font-size: 14px !important; }
  .practice-review { padding: 14px !important; }
  .review-detail div { padding: 10px !important; }

  /* Training cards */
  .training-action-card { padding: 14px !important; }
  .training-card-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .tac-head strong { font-size: 15px !important; }

  /* Reading */
  .reading-mode-tabs { gap: 8px !important; }
  .reading-mode-tabs button { padding: 12px !important; }
  .reading-overview { gap: 8px !important; }
  .reading-overview article { padding: 12px !important; }
  .reading-task-card { padding: 12px !important; }
  .reading-card { padding: 14px !important; }
  .sentence-row { padding: 12px !important; gap: 10px !important; }
  .sentence-index { width: 34px !important; height: 34px !important; }

  /* Speaking / AI */
  .ai-challenge-card { padding: 16px !important; }
  .ai-task { padding: 12px !important; }
  .ai-answer-field textarea { padding: 12px !important; }

  /* Writing */
  .upload-drop { padding: 18px !important; }
  .writing-preview { padding: 12px !important; }
  .writing-textarea-label textarea { padding: 12px !important; }
  .assignment-brief { padding: 14px !important; }
  .writing-score-grid { gap: 8px !important; }
  .writing-score-grid article { padding: 12px !important; }
  .writing-review-head { padding: 14px !important; }

  /* Teacher / Admin */
  .dashboard-hero { padding: 16px !important; }
  .teacher-class-switcher { padding: 14px !important; }
  .teacher-tabs { gap: 2px !important; padding: 4px !important; overflow-x: auto !important; }
  .teacher-tabs button { padding: 9px 12px !important; font-size: 13px !important; white-space: nowrap !important; }
  .chart-card { padding: 14px !important; }
  .admin-row { padding: 12px !important; }
  .submission-card, .teacher-submission-card { padding: 12px !important; }
  .mini-form input, .mini-form select, .mini-form textarea { padding: 10px 12px !important; }

  /* analytics grids that were fixed 2-col → stack on phone */
  .analytics-grid { grid-template-columns: 1fr !important; }

  /* ── Global overflow safety (phones) ──────────────────────────────
     Guard against any wide child (tables, long tokens, code) forcing
     horizontal scroll or pushing a card past the viewport edge. */
  .surface-card, .word-card, .question-card, .ai-challenge-card,
  .reading-card, .chart-card, .training-action-card, .hero-panel,
  .daily-section, .daily-plan-overview { max-width: 100% !important; }
  .data-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .word-title, .question-prompt, .reading-card p, .sentence-row p,
  .ai-task p, .writing-prompt-suggestion strong, .admin-row strong {
    overflow-wrap: anywhere !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.16); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); background-clip: padding-box; }
.cv-dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); background-clip: padding-box; }
.cv-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); background-clip: padding-box; }

/* theme toggle button */
.cv-theme-toggle { white-space: nowrap !important; font-weight: 600 !important; }
.cv-dark .modal-mask { background: rgba(0, 0, 0, 0.55) !important; }

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cv-reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.4 · PREMIUM ICON SYSTEM + SETTINGS DRAWER + ACCOUNT FOOTER
   Line-icon set (inline SVG sprite) replaces emoji across the shell;
   Settings moves from a nav page into a right-side glass drawer.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base line-icon ─────────────────────────────────────────────── */
.ic {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
}
.ic * {
  stroke-width: inherit;
  stroke-linecap: inherit;
  stroke-linejoin: inherit;
}
.ic-sm { width: 15px; height: 15px; }
.ic-head { width: 18px; height: 18px; color: var(--accent); }

/* ── Sidebar nav: icon + 2-line label ───────────────────────────── */
.nav-item {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.nav-ic { display: grid; place-items: center; width: 22px; height: 22px; }
.nav-ic .ic { width: 20px; height: 20px; }
.nav-tx { display: grid; min-width: 0; }
.nav-item.active .nav-ic .ic { color: var(--accent-ink); }

/* ── Topbar: search icon + quick theme toggle ───────────────────── */
.search-box .search-ic { width: 17px; height: 17px; color: var(--muted-2); flex: none; }
.cv-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.cv-theme-toggle .ic { width: 17px; height: 17px; }
.cv-theme-toggle span { font-size: 13px; }

/* ── Sidebar account footer (settings entry) ────────────────────── */
.account-footer { margin-top: 4px; }
.account-footer[hidden] { display: none !important; }
.account-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.account-chip:hover { border-color: var(--accent-edge); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.account-chip:active { transform: translateY(0) scale(0.99); }
.account-avatar {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 14px;
}
.account-meta { display: grid; gap: 1px; min-width: 0; flex: 1; }
.account-meta small { font-size: 11px; color: var(--muted-2); line-height: 1.2; }
.account-meta strong {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-gear { width: 18px; height: 18px; color: var(--muted-2); flex: none; }
.account-chip:hover .account-gear { color: var(--accent); }

/* ── Settings drawer + scrim ────────────────────────────────────── */
.settings-scrim {
  position: fixed; inset: 0;
  z-index: 115;
  background: rgba(20, 24, 40, 0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.settings-scrim[hidden] { display: none; }
body.settings-open .settings-scrim { opacity: 1; }

.settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--glass-drawer);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-left: 1px solid var(--hairline-soft);
  box-shadow: var(--shadow-lg);
  transform: translateX(104%);
  transition: transform var(--t) var(--ease);
  will-change: transform;
}
.settings-drawer[hidden] { display: none; }
body.settings-open .settings-drawer { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 22px 16px;
  border-bottom: 1px solid var(--hairline-soft);
}
.drawer-head .eyebrow { color: var(--accent); }
.drawer-head h2 { margin: 3px 0 0; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.drawer-head-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.drawer-close { width: 40px !important; min-height: 40px !important; padding: 0 !important; }
.drawer-close .ic { width: 18px; height: 18px; }
.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px 20px calc(28px + env(safe-area-inset-bottom, 0px));
}
.drawer-body .settings-card { margin: 0; }

/* ── Card heads + action buttons with icons ─────────────────────── */
.card-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-ver { font-size: 11px; color: var(--muted-2); }
.settings-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.settings-actions .ic { width: 17px; height: 17px; }
.settings-class-list span {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
.settings-class-list .muted { color: var(--muted) !important; }
.settings-join-class input {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
}
.settings-join-class input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
  outline: none !important;
}
.empty-state-card .icon .ic { width: 26px; height: 26px; color: var(--accent); }
.quote-card .eyebrow .ic { width: 13px; height: 13px; color: var(--accent); }

/* On phones the right drawer is effectively full-bleed */
@media (max-width: 560px) {
  .settings-drawer { width: 100vw; border-left: none; border-radius: 0; }
}

/* ── Login Rive illustration ────────────────────────────────────── */
.auth-story-rive {
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 48px !important;
}

.auth-story-rive .brand,
.auth-story-rive .auth-rive-panel,
.auth-story-rive .auth-story-copy {
  position: relative !important;
  z-index: 2 !important;
}

.auth-rive-panel {
  width: 100% !important;
  height: clamp(260px, 42vh, 360px) !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin: 4px 0 2px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background: #e8e3e8 !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22) !important;
}

.auth-rive-panel canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.auth-rive-loading {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(15, 23, 42, 0.44) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
}

.auth-rive-ready .auth-rive-loading {
  opacity: 0 !important;
}

.auth-rive-unavailable .auth-rive-panel {
  display: none !important;
}

.auth-story-rive .auth-story-copy {
  display: grid !important;
  gap: 12px !important;
}

.auth-story-rive .auth-story-copy h1 {
  margin: 0 !important;
  max-width: 560px !important;
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

.auth-story-rive .auth-story-copy p {
  margin: 0 !important;
  max-width: 480px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.auth-password-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.auth-password-input-wrap input {
  padding-right: 54px !important;
}

.auth-password-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 11px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  background: var(--surface-2) !important;
  outline: none !important;
}

.auth-password-toggle canvas {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  pointer-events: none !important;
}

.auth-password-error input {
  border-color: #c2410c !important;
  box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.12) !important;
}

.auth-row-options {
  align-items: center !important;
}

.auth-row-options label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.auth-row-options input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 4px !important;
  flex: 0 0 auto !important;
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-4px); }
}

.auth-shake {
  animation: authShake 0.38s ease-in-out !important;
}

.assignment-common-issues,
.assignment-common-grid article,
.reading-practice-summary,
.reading-practice-result,
.reading-practice-card {
  background: var(--surface) !important;
  border-color: var(--hairline-soft) !important;
}

.assignment-common-issues strong,
.assignment-common-sentences p,
.reading-practice-summary strong,
.reading-practice-result strong,
.reading-practice-card p {
  color: var(--ink) !important;
}

.assignment-common-issues span,
.assignment-common-issues small,
.reading-practice-summary small,
.reading-practice-result p,
.reading-practice-card > small,
.reading-practice-card-head span {
  color: var(--muted) !important;
}

.reading-practice-card-head strong {
  color: var(--accent) !important;
}

@media (max-width: 1120px) {
  .auth-rive-panel { height: clamp(250px, 38vh, 320px) !important; }
  .auth-story-rive .auth-story-copy h1 { font-size: clamp(30px, 5vw, 44px) !important; }
}

@media (max-width: 900px) {
  .auth-story-rive { display: none !important; }
}

/* Student/mobile stability pass: keep every student view clear of the fixed
   bottom tabs, and make mobile dialogs/input controls usable on small iPhones. */
@media (max-width: 768px) {
  

  input,
  select,
  textarea,
  .search-box input,
  .listen-search input,
  .mini-field input,
  .mini-field select,
  .settings-join-class input,
  .settings-password-form input {
    font-size: 16px !important;
  }

  body:has(.modal-mask:not(.hidden)) .mobile-tabbar,
  body.settings-open .mobile-tabbar,
  body.brief-open .mobile-tabbar {
    display: none !important;
  }

  .modal-mask {
    align-items: end !important;
    place-items: end center !important;
    padding: 12px !important;
    z-index: 150 !important;
  }

  .speech-modal,
  .reading-practice-modal,
  .writing-viewer-card,
  .writing-subview-card,
  .auth-doc-card {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px !important;
  }

  .speech-modal .modal-close,
  .reading-practice-modal > .modal-close,
  .writing-viewer-card > .modal-close,
  .writing-subview-card > .modal-close,
  .auth-doc-card > .modal-close {
    position: sticky !important;
    top: 0 !important;
    margin-left: auto !important;
    z-index: 4 !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-xs) !important;
  }

  .settings-drawer {
    width: min(100vw, 440px) !important;
    max-width: 100vw !important;
  }

  .drawer-head {
    padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
  }

  

  .assignment-archive,
  .assignment-type-groups,
  .assignment-type-list,
  .assignment-timeline {
    min-width: 0 !important;
  }

  .assignment-history-row,
  .home-check-row,
  .daily-checkin-card,
  .task-row {
    min-width: 0 !important;
  }

  .assignment-history-title,
  .daily-task-title-line {
    gap: 8px !important;
  }

  .assignment-history-title strong,
  .home-check-main strong,
  .daily-task-title-line strong {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 560px) {
  .assignment-archive-hero {
    align-items: stretch !important;
  }

  .assignment-archive-hero .secondary-action,
  .assignment-history-actions,
  .home-check-go,
  .daily-task-actions {
    flex: 0 0 auto !important;
  }

  .assignment-history-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .assignment-history-main small,
  .home-check-main small,
  .daily-task-main > span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .tab-sheet {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 108px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}