/* HSK Flashcards — custom styles on top of Tailwind */

html, body { height: 100%; background: #faf8ff; }
body {
  overscroll-behavior-y: none;
  /* `manipulation` disables the browser's double-tap-to-zoom while keeping
     pan and pinch-scroll-on-element behaviour. Combined with the JS handlers
     in index.html this gives a locked, native-feeling zoom level. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#app, #view { background: #faf8ff; }
.theme-dark, .theme-dark body, .theme-dark #app, .theme-dark #view { background: #0f1320; }
/* iOS Safari auto-zooms when focusing an input whose font-size is < 16px.
   Force the minimum so the page never zooms in on tap-into-input either. */
input, textarea, select { font-size: 16px; }

/* Material Symbols default */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
  line-height: 1;
  user-select: none;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Bottom nav items */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  color: #727687;
  transition: color 150ms ease, transform 150ms ease;
  text-decoration: none;
}
.nav-item:hover { color: #0066ff; }
.nav-item.active { color: #0066ff; }
.nav-item.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Flashcard 3D flip */
.card-3d-perspective { perspective: 1200px; }
.card-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}
.card-3d.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 1.75rem;
  background: #ffffff;
  box-shadow: 0 20px 40px -12px rgba(0, 80, 203, 0.12);
  border: 1px solid #f2f3ff;
  display: flex;
  flex-direction: column;
}
.card-face.back { transform: rotateY(180deg); }

/* Swipe-out animations */
.swipe-out-left {
  transform: translateX(-150%) rotate(-15deg) !important;
  opacity: 0;
  transition: transform 350ms ease-in, opacity 350ms ease-in;
}
.swipe-out-right {
  transform: translateX(150%) rotate(15deg) !important;
  opacity: 0;
  transition: transform 350ms ease-in, opacity 350ms ease-in;
}

/* Decorative motif behind level cards */
.chinese-motif {
  user-select: none;
  pointer-events: none;
  opacity: 0.07;
  font-family: 'Noto Sans SC', sans-serif;
}

/* Subtle ring pulse for audio button */
@keyframes ring-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}
.ring-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid currentColor;
  animation: ring-pulse 1.2s ease-out infinite;
}

/* Progress ring */
.progress-ring { transform: rotate(-90deg); }
.progress-ring__track { stroke: #e6e7f4; }
.progress-ring__fill {
  stroke: #0066ff;
  transition: stroke-dashoffset 600ms ease;
  stroke-linecap: round;
}

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, #ecedfa 0%, #f5f5fb 50%, #ecedfa 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: 0.75rem;
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.madmi-progress-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.madmi-progress-loader--compact {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  text-align: left;
}
.madmi-progress-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.5rem;
  background: #eef5ff;
  color: #0066ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.08);
}
.madmi-progress-icon .material-symbols-outlined {
  font-size: 2rem;
}
.madmi-progress-loader--compact .madmi-progress-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1rem;
  flex: 0 0 auto;
}
.madmi-progress-loader--compact .madmi-progress-icon .material-symbols-outlined {
  font-size: 1.35rem;
}
.madmi-progress-copy {
  width: 100%;
  min-width: 0;
}
.madmi-progress-loader--compact .madmi-progress-copy {
  flex: 1;
}
.madmi-progress-wrap {
  width: 100%;
  margin-top: 1.25rem;
}
.madmi-progress-wrap--compact {
  margin-top: 0.75rem;
}
.madmi-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #71788e;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.madmi-progress-row strong {
  color: #0066ff;
  font-size: 0.8rem;
  letter-spacing: 0;
}
.madmi-progress-track {
  height: 0.55rem;
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eaf6;
}
.madmi-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0066ff 0%, #10b981 100%);
  transition: width 160ms ease-out;
}

/* Scrollbar hidden */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Settings rows */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid #ecedfa;
}
.setting-row:last-child { border-bottom: none; }

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  /* Inside a flex .setting-row a long description can squeeze the toggle —
     pin a min-width and stop shrinking so the pill always renders fully. */
  flex-shrink: 0;
  min-width: 44px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #c2c6d8;
  border-radius: 999px;
  transition: background 200ms ease;
}
.toggle .slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 999px;
  transition: transform 200ms ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.toggle input:checked + .slider { background: #0066ff; }
.toggle input:checked + .slider::before { transform: translateX(20px); }

/* Pill chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hide bottom nav on focused full-screen experiences (e.g., card session) */
body.no-nav #bottom-nav { display: none; }
body.no-nav main#view { padding-bottom: 0; }

#install-slot:empty,
#install-slot-settings:empty {
  display: none;
}

.home-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.home-install-slot {
  width: 100%;
}
.home-panel,
.home-action-card {
  border: 1px solid #e4e7f0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px rgba(31, 41, 55, 0.06);
}
.home-panel {
  position: relative;
  overflow: hidden;
}
.home-course-hero {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: clamp(1.2rem, 4vw, 1.65rem);
  color: #fff;
  background: linear-gradient(135deg, var(--course-color), var(--course-color-dark));
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 34%, rgba(255, 255, 255, 0.08)),
    radial-gradient(ellipse at 16% 12%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--course-color) 90%, #111827 10%) 0%,
      color-mix(in srgb, var(--course-color-dark) 86%, #0f1320 14%) 58%,
      var(--course-color-deep) 100%);
  box-shadow: 0 22px 46px rgba(0, 80, 203, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 22px 48px color-mix(in srgb, var(--course-color) 26%, transparent);
}
.home-course-hero::before,
.home-course-hero::after {
  position: absolute;
  pointer-events: none;
  content: "";
}
.home-course-hero::before {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.home-course-hero::after {
  display: none;
}
.home-hero-motif {
  position: absolute;
  right: clamp(1rem, 4vw, 2.1rem);
  bottom: clamp(0.75rem, 2.6vw, 1.35rem);
  z-index: 0;
  display: block;
  color: rgba(255, 255, 255, 0.17);
  font-family: var(--font-chinese, 'Noto Sans SC', sans-serif);
  font-size: clamp(6.5rem, 18vw, 10rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}
.home-hero-top,
.home-hero-main,
.home-hero-actions,
.home-section-heading,
.home-goal-card {
  position: relative;
  z-index: 1;
}
.home-hero-top,
.home-hero-main,
.home-section-heading,
.home-goal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.home-hero-chip,
.home-hero-link,
.home-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
}
.home-hero-chip {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.18);
  padding: 0.45rem 0.8rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.home-hero-link {
  min-height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.16);
  padding: 0.35rem 0.8rem;
  color: #fff;
  font-size: 0.72rem;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.home-hero-main {
  margin-top: clamp(2rem, 7vw, 3.05rem);
  align-items: center;
}
.home-hero-copy {
  min-width: 0;
  max-width: 76%;
}
.home-hero-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  opacity: 0.86;
  text-transform: uppercase;
}
.home-hero-main h2 {
  margin-top: 0.42rem;
  font-family: var(--font-display, inherit);
  font-size: clamp(2.7rem, 10vw, 5rem);
  font-weight: 900;
  line-height: 0.92;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.home-hero-main p:not(.home-hero-label) {
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.35;
}
.home-hero-percent {
  flex: 0 0 auto;
  min-width: 4.1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1.35rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0.13));
  padding: 0.8rem 0.9rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 34px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.home-hero-progress,
.home-progress-track {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: #e9ebf8;
}
.home-hero-progress {
  z-index: 1;
  width: min(92%, 34rem);
  height: 0.72rem;
  margin: 1.45rem auto 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.08);
}
.home-hero-progress div,
.home-progress-track div {
  height: 100%;
  border-radius: inherit;
}
.home-hero-progress div {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.48);
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.35rem;
}
.home-hero-button {
  min-height: 2.75rem;
  gap: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.16);
  padding: 0.65rem 1rem;
  color: #fff;
  font-size: 0.82rem;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.home-hero-button.primary {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.9);
  color: var(--course-color-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 30px rgba(0, 0, 0, 0.13);
}
.home-panel {
  border-radius: 1.6rem;
  padding: 1.1rem;
}
.home-goal-card {
  border-color: #dce7fb;
  background: linear-gradient(145deg, #ffffff 0%, #fbfdff 52%, #eef5ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 16px 34px rgba(31, 41, 55, 0.07);
}
.home-goal-card .home-eyebrow {
  color: #6f7588;
}
.home-eyebrow {
  color: #73788e;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.home-goal-card h3,
.home-section-heading h3 {
  margin-top: 0.35rem;
  color: #191b24;
  font-family: var(--font-display, inherit);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}
.home-goal-card h3 span {
  color: #727687;
  font-size: 1rem;
  font-weight: 700;
}
.home-goal-card p:not(.home-eyebrow),
.home-muted {
  margin-top: 0.55rem;
  color: #5d6476;
  font-size: 0.9rem;
  line-height: 1.5;
}
.home-goal-meter {
  display: grid;
  width: 5.15rem;
  height: 5.15rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: conic-gradient(#0066ff var(--goal-pct), #eef1f7 0);
  box-shadow: 0 12px 26px rgba(0, 102, 255, 0.12);
}
.home-goal-meter span {
  display: grid;
  width: 3.85rem;
  height: 3.85rem;
  place-items: center;
  border-radius: inherit;
  background: #fff;
  color: #0066ff;
  font-size: 0.86rem;
  font-weight: 900;
}
.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
.home-action-card {
  position: relative;
  min-height: 9.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 1.55rem;
  padding: 1rem;
  color: #191b24;
  text-decoration: none;
}
.home-action-card:nth-child(1) {
  border-color: #e4e7f0;
  background: rgba(255, 255, 255, 0.94);
}
.home-action-card:nth-child(2) {
  border-color: #e4e7f0;
  background: rgba(255, 255, 255, 0.94);
}
.home-action-card:nth-child(3) {
  border-color: #e4e7f0;
  background: rgba(255, 255, 255, 0.94);
}
.home-action-card:nth-child(4) {
  border-color: #e4e7f0;
  background: rgba(255, 255, 255, 0.94);
}
.home-action-card::after {
  position: absolute;
  right: -0.65rem;
  bottom: -1.3rem;
  color: rgba(25, 27, 36, 0.04);
  content: attr(data-glow);
  font-family: var(--font-display, inherit);
  font-size: 5.6rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.home-action-card strong {
  margin-top: 1rem;
  font-family: var(--font-display, inherit);
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}
.home-action-card > span:last-child {
  margin-top: 0.45rem;
  color: #5d6476;
  font-size: 0.82rem;
  font-weight: 700;
}
.home-action-icon,
.home-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 1rem;
}
.home-action-icon {
  width: 2.75rem;
  height: 2.75rem;
}
.home-tool-icon {
  width: 2.65rem;
  height: 2.65rem;
}
.home-action-icon.red { background: #f5f7fb; color: #ef4444; }
.home-action-icon.blue,
.home-tool-icon.blue { background: #f1f5fb; color: #0066ff; }
.home-action-icon.amber { background: #f5f7fb; color: #d97706; }
.home-action-icon.cyan { background: #f5f7fb; color: #0f766e; }
.home-tool-icon.green { background: #f1f5fb; color: #059669; }
.home-tool-icon.purple { background: #f1f5fb; color: #7c3aed; }
.home-circle-link {
  display: inline-flex;
  width: 2.8rem;
  height: 2.8rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #eff1fb;
  color: #191b24;
  text-decoration: none;
}
.home-progress-track {
  height: 0.7rem;
  margin-top: 1.2rem;
}
.home-progress-track div {
  background: #0066ff;
}
.home-progress-card {
  border-color: #e4e7f0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(31, 41, 55, 0.07);
}
.home-progress-card .home-eyebrow {
  color: #6f7588;
}
.home-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}
.home-mini-stats div {
  border-radius: 1rem;
  background: #f7f8fc;
  border: 1px solid #eceff6;
  padding: 0.8rem;
}
.home-mini-stats div:nth-child(2) {
  border-color: #eceff6;
  background: #f7f8fc;
}
.home-mini-stats div:nth-child(3) {
  border-color: #eceff6;
  background: #f7f8fc;
}
.home-mini-stats strong,
.home-mini-stats span {
  display: block;
}
.home-mini-stats strong {
  color: #191b24;
  font-size: 1.15rem;
  font-weight: 900;
}
.home-mini-stats span {
  margin-top: 0.25rem;
  color: #6f7588;
  font-size: 0.68rem;
  font-weight: 800;
}
.home-tool-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
}
.home-tools-card {
  border-color: #e4e7f0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(31, 41, 55, 0.07);
}
.home-tools-card .home-eyebrow {
  color: #6f7588;
}
.home-tool-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  border-radius: 1.25rem;
  border: 1px solid #eceff6;
  background: #f8f9fd;
  padding: 0.78rem;
  color: #191b24;
  text-decoration: none;
}
.home-tool-list a:nth-child(2) {
  border-color: #eceff6;
  background: #f8f9fd;
}
.home-tool-list a:nth-child(3) {
  border-color: #eceff6;
  background: #f8f9fd;
}
.home-tool-list strong,
.home-tool-list span:not(.material-symbols-outlined) {
  display: block;
}
.home-tool-list strong {
  font-size: 0.88rem;
  font-weight: 900;
}
.home-tool-list span:not(.material-symbols-outlined) {
  margin-top: 0.15rem;
  color: #697085;
  font-size: 0.74rem;
  line-height: 1.3;
}
.level-page,
.level-left-pane,
.level-right-pane {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.25rem;
}
.level-page {
  width: 100%;
}
.level-hero-card {
  box-shadow: 0 18px 38px color-mix(in srgb, var(--level-color) 18%, transparent);
}
.level-readiness-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--level-color-soft) 32%, transparent), transparent 35%),
    rgba(255, 255, 255, 0.92);
}
.level-module-list > *,
.level-practice-card,
.level-word-section #word-list {
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.level-module-list > * {
  flex: 0 0 auto;
}
.level-word-section {
  min-height: 28rem;
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
.level-word-section #word-list {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 700px) {
  #app {
    max-width: min(100vw, 56rem);
    min-height: 100dvh;
  }

  #bottom-nav {
    max-width: min(100vw, 56rem);
  }

  #bottom-nav > div {
    height: 4.75rem;
  }

  .nav-label {
    font-size: 11px;
  }

  #app-header > div,
  #view > div {
    padding-left: clamp(2rem, 4vw, 3rem) !important;
    padding-right: clamp(2rem, 4vw, 3rem) !important;
  }

  body[data-route="home"] #view > div.home-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
      "install install"
      "hero goal"
      "quick quick"
      "progress tools";
    align-items: stretch;
    gap: 1.25rem;
  }

  body[data-route="home"] #install-slot {
    grid-area: install;
    grid-column: 1 / -1;
  }

  body[data-route="home"] .home-course-hero {
    grid-area: hero;
    min-height: 20.5rem;
  }

  body[data-route="home"] .home-goal-card {
    grid-area: goal;
    min-height: 20.5rem;
    align-content: space-between;
    align-items: stretch;
    flex-direction: column;
  }

  body[data-route="home"] .home-goal-meter {
    width: 8.25rem;
    height: 8.25rem;
    align-self: flex-end;
  }

  body[data-route="home"] .home-goal-meter span {
    width: 6.3rem;
    height: 6.3rem;
    font-size: 1.1rem;
  }

  body[data-route="home"] .home-quick-grid {
    grid-area: quick;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-route="home"] .home-progress-card {
    grid-area: progress;
  }

  body[data-route="home"] .home-tools-card {
    grid-area: tools;
  }

  body[data-route="hsk"] #view > div > div.flex,
  body[data-route="levels"] #view > div > div.flex {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }

  body[data-route="hsk"] #view > div > div.flex > section:last-child,
  body[data-route="levels"] #view > div > div.flex > section:last-child {
    grid-column: 1 / -1;
  }

  body[data-route="explore"] #view > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.5rem;
  }

  body[data-route="explore"] #view > div > section:first-child,
  body[data-route="explore"] #view > div > section:last-child {
    grid-column: 1 / -1;
  }

  body[data-route="explore"] #view > div > section:nth-child(2) {
    grid-column: 1 / -1;
  }

  body[data-route="explore"] #view > div > section:nth-child(2) > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body[data-route="explore"] #view > div > section:nth-child(2) > .grid > * {
    min-height: 11.5rem;
  }

  body[data-route="level"] #view > div.level-page {
    display: grid !important;
    height: calc(100dvh - 9.8rem);
    min-height: 34rem;
    max-height: calc(100dvh - 9.8rem);
    grid-template-columns: minmax(0, 1fr) minmax(19.5rem, 0.95fr);
    align-items: start;
    gap: 1.25rem;
    overflow: hidden;
  }

  body[data-route="level"] .level-left-pane,
  body[data-route="level"] .level-right-pane {
    height: 100%;
    min-height: 0;
    overscroll-behavior: contain;
    padding-bottom: 1rem;
  }

  body[data-route="level"] .level-left-pane {
    overflow-y: auto;
    scrollbar-width: none;
    padding-right: 0.15rem;
  }

  body[data-route="level"] .level-left-pane::-webkit-scrollbar {
    display: none;
  }

  body[data-route="level"] .level-right-pane {
    overflow-y: scroll;
    padding-right: 0.45rem;
    scrollbar-color: color-mix(in srgb, var(--level-color) 60%, #fff 40%) transparent;
    scrollbar-width: thin;
  }

  body[data-route="level"] .level-right-pane::-webkit-scrollbar {
    width: 0.72rem;
  }

  body[data-route="level"] .level-right-pane::-webkit-scrollbar-track {
    background: transparent;
  }

  body[data-route="level"] .level-right-pane::-webkit-scrollbar-thumb {
    border: 2px solid #faf8ff;
    border-radius: 999px;
    background: color-mix(in srgb, var(--level-color) 60%, #fff 40%);
  }

  body[data-route="level"] .level-hero-card,
  body[data-route="level"] .level-readiness-card,
  body[data-route="level"] .level-modules-section h2 {
    flex: 0 0 auto;
  }

  body[data-route="level"] .level-hero-card {
    padding: 1.1rem !important;
    border-radius: 1.5rem !important;
  }

  body[data-route="level"] .level-hero-card h1 {
    font-size: 2.15rem !important;
  }

  body[data-route="level"] .level-readiness-card {
    padding: 1rem !important;
    border-radius: 1.5rem !important;
  }

  body[data-route="level"] .level-readiness-card .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-route="level"] .level-modules-section {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
  }

  body[data-route="level"] .level-module-list {
    flex: 0 0 auto;
    overflow: visible;
    padding-right: 0.15rem;
    scrollbar-width: none;
  }

  body[data-route="level"] .level-module-list::-webkit-scrollbar {
    display: none;
  }

  body[data-route="level"] .level-modules-section h2,
  body[data-route="level"] .level-practice-section h2,
  body[data-route="level"] .level-word-section h3 {
    font-size: 1.05rem;
  }

  body[data-route="level"] .level-practice-grid {
    gap: 0.75rem !important;
  }

  body[data-route="level"] .level-practice-card {
    min-height: 8.9rem;
  }

  body[data-route="level"] .level-word-section {
    min-height: 0;
    flex: 0 0 auto;
  }

  body[data-route="level"] #word-list {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  body[data-route="card"] #view > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-route="card"] #view > div > div:first-child,
  body[data-route="card"] #view > div > .flex-1 {
    padding-left: clamp(2rem, 5vw, 4rem) !important;
    padding-right: clamp(2rem, 5vw, 4rem) !important;
  }

  body[data-route="card"] #view > div > div:nth-child(2) {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  body[data-route="card"] .card-3d-perspective {
    width: min(100%, 36rem);
  }

  body[data-route="card"] #view > div > div:last-child {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 700px) and (orientation: landscape) {
  #app,
  #bottom-nav {
    max-width: min(100vw, 60rem);
  }

  body[data-route="card"] .card-3d-perspective {
    width: min(100%, 23rem, 48dvh);
  }

  body[data-route="card"] #view > div > .flex-1 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  body[data-route="card"] #view > div > div:last-child {
    padding-bottom: 1.25rem !important;
  }
}

@media (min-width: 1024px) {
  #app,
  #bottom-nav {
    max-width: min(100vw, 62rem);
  }

  body[data-route="home"] #view > div,
  body[data-route="level"] #view > div {
    gap: 1.5rem;
  }

  body[data-route="hsk"] #view > div > div.flex,
  body[data-route="levels"] #view > div > div.flex {
    gap: 1.25rem;
  }
}

/* Subtle entrance animation for views */
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
#view > * { animation: view-in 250ms ease-out; }

/* Grammar is visible as a preview, but only admin accounts can enter it. */
.grammar-preview-card {
  isolation: isolate;
}
.grammar-preview-motif {
  position: absolute;
  right: -0.75rem;
  bottom: -2.25rem;
  z-index: 0;
  color: #10b981;
  font-size: 8rem;
  line-height: 1;
  opacity: 0.08;
  filter: blur(2px);
  pointer-events: none;
}
.grammar-coming-soon-page {
  position: relative;
  min-height: 36rem;
  padding: 1.5rem 1.25rem 2rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.grammar-coming-soon-preview {
  position: absolute;
  inset: 1.5rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0.38;
  filter: blur(6px);
  pointer-events: none;
}
.grammar-preview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.grammar-preview-block {
  min-height: 8.5rem;
  border: 1px solid #e6e7f4;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 102, 255, 0.06);
}
.grammar-preview-block--large {
  min-height: 10rem;
  padding: 1.25rem;
}
.grammar-preview-block--large span {
  display: block;
  height: 0.75rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: #e6e7f4;
}
.grammar-preview-block--large span:first-child {
  width: 30%;
  margin-top: 0;
  background: #a7f3d0;
}
.grammar-preview-block--large span:nth-child(2) { width: 78%; height: 1.5rem; }
.grammar-preview-block--large span:nth-child(3) { width: 100%; }
.grammar-preview-block--large span:nth-child(4) { width: 72%; }
.grammar-preview-block--short {
  min-height: 7rem;
}
.grammar-coming-soon-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 24rem;
  padding: 1.5rem;
  border: 1px solid #a7f3d0;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  text-align: center;
  backdrop-filter: blur(20px);
}
.grammar-coming-soon-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  border-radius: 1.25rem;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  color: #059669;
}
.grammar-coming-soon-icon .material-symbols-outlined {
  font-size: 2.125rem;
}
.grammar-coming-soon-label {
  margin-top: 1.25rem;
  color: #059669;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.grammar-coming-soon-card h1 {
  margin-top: 0.5rem;
  color: #191b24;
  font-family: Epilogue, Lexend, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}
.grammar-coming-soon-copy {
  margin-top: 0.5rem;
  color: #424656;
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.grammar-coming-soon-back {
  min-height: 3rem;
  margin-top: 1.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0066ff;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 20px -4px rgba(0, 102, 255, 0.4);
}

/* Shared network failure state, including regional VPN guidance. */
.connection-error-page {
  min-height: 32rem;
  padding: 2rem 1.25rem;
  display: grid;
  place-items: center;
}
.connection-error-card {
  width: 100%;
  max-width: 24rem;
  padding: 1.5rem;
  border: 1px solid #fecaca;
  border-radius: 2rem;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
}
.connection-error-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.125rem;
  display: grid;
  place-items: center;
  background: #fef2f2;
  color: #ef4444;
}
.connection-error-icon .material-symbols-outlined {
  font-size: 1.75rem;
}
.connection-error-label {
  margin-top: 1.25rem;
  color: #dc2626;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.connection-error-card h1 {
  margin-top: 0.375rem;
  color: #191b24;
  font-family: Epilogue, Lexend, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}
.connection-error-message {
  margin-top: 0.5rem;
  color: #424656;
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.connection-error-vpn {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid #bfdbfe;
  border-radius: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
}
.connection-error-vpn > .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 1.375rem;
}
.connection-error-vpn strong {
  display: block;
  color: #1e3a8a;
  font-size: 0.875rem;
}
.connection-error-vpn p {
  margin-top: 0.25rem;
  color: #1e40af;
  font-size: 0.75rem;
  line-height: 1.25rem;
}
.connection-error-retry {
  width: 100%;
  min-height: 3rem;
  margin-top: 1.25rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #0066ff;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 20px -4px rgba(0, 102, 255, 0.4);
}

/* Big Chinese display tweaks */
.hanzi-xl {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Hanzi writing course */
.hanzi-hero {
  background: linear-gradient(135deg, #0066ff 0%, #0050cb 100%);
  color: #ffffff;
}
.hanzi-hero::after {
  content: '';
  position: absolute;
  right: -0.7rem;
  bottom: -2.4rem;
  width: 8rem;
  height: 8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.hanzi-app-icon {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(0, 80, 203, 0.22);
}
.hanzi-grid-bg,
.hanzi-writer-target {
  background:
    linear-gradient(#db3237, #db3237) center / 1px 100% no-repeat,
    linear-gradient(90deg, #db3237, #db3237) center / 100% 1px no-repeat,
    linear-gradient(45deg, transparent 49.6%, rgba(219, 50, 55, 0.28) 50%, transparent 50.4%),
    linear-gradient(-45deg, transparent 49.6%, rgba(219, 50, 55, 0.28) 50%, transparent 50.4%);
}
.hanzi-grid-bg {
  border: 1.5px solid rgba(219, 50, 55, 0.4);
  background-color: #fffaf2;
}
.hanzi-filter {
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid #ecedfa;
  background: #ffffff;
  color: #727687;
  font-size: 12px;
  font-weight: 700;
  padding: 0.5rem 0.875rem;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.hanzi-filter.active {
  border-color: #0066ff;
  background: rgba(0, 102, 255, 0.08);
  color: #0066ff;
}
.hanzi-char-card {
  display: block;
  min-width: 0;
  border-radius: 1rem;
  border: 1px solid #ecedfa;
  background: #ffffff;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.05);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.hanzi-char-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 102, 255, 0.35);
  box-shadow: 0 12px 28px rgba(0, 102, 255, 0.08);
}
.hanzi-char-card.completed {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), #ffffff 42%);
}
.hanzi-check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.24);
}
.hanzi-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 999px;
  border: 1px solid #ecedfa;
  background: #ffffff;
  color: #727687;
  padding: 0.75rem 1rem;
  font-size: 13px;
  font-weight: 800;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.hanzi-tab.active {
  border-color: rgba(0, 102, 255, 0.4);
  background: rgba(0, 102, 255, 0.08);
  color: #0066ff;
}
.hanzi-tab.active.radical {
  border-color: rgba(219, 50, 55, 0.28);
  background: rgba(219, 50, 55, 0.08);
  color: #db3237;
}
.hanzi-writer-target {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid rgba(219, 50, 55, 0.6);
  border-radius: 1.25rem;
  background-color: #fffaf2;
  overflow: hidden;
}
.hanzi-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 999px;
  border: 1px solid #ecedfa;
  background: #ffffff;
  color: #191b24;
  padding: 0.75rem 1rem;
  font-size: 13px;
  font-weight: 800;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.hanzi-control.primary {
  border-color: #0066ff;
  background: #0066ff;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 102, 255, 0.18);
}
.hanzi-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f5f6ff;
  color: #191b24;
  padding: 0.45rem 0.75rem;
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

/* Auth page */
.auth-shell {
  position: relative;
  isolation: isolate;
}
.auth-shell::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 22rem;
  background: none;
  pointer-events: none;
}
.auth-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.95;
  filter: blur(6px);
  animation: float-orb 9s ease-in-out infinite;
}
.auth-orb--one {
  top: 2rem;
  right: -3rem;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(250, 198, 56, 0.52), rgba(250, 198, 56, 0));
}
.auth-orb--two {
  top: 15rem;
  left: -2.25rem;
  width: 9rem;
  height: 9rem;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.35), rgba(0, 102, 255, 0));
  animation-delay: -3s;
}
.auth-hero {
  background:
    linear-gradient(140deg, #0057db 0%, #0a3d9e 58%, #191b24 100%);
}
.auth-stat-pill {
  display: flex;
  min-height: 4.5rem;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.12);
  padding: 0.75rem;
  backdrop-filter: blur(14px);
}
.auth-stat-pill strong {
  font-size: 1.05rem;
  line-height: 1.1;
}
.auth-stat-pill small {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.76;
  text-transform: uppercase;
}
.auth-surface {
  position: relative;
}

/* Premium lock states */
.locked-level-card .level-card-content {
  filter: blur(1.8px);
  transform: scale(0.985);
  opacity: 0.82;
}
.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem;
}
.lock-surface {
  position: relative;
  display: flex;
  min-height: calc(100% - 0.25rem);
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.lock-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(236, 237, 250, 0.2));
}
.lock-surface__halo {
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 8rem;
  height: 8rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.14), rgba(0, 102, 255, 0));
}
.lock-badge {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0066ff;
  box-shadow: 0 10px 22px rgba(0, 102, 255, 0.16);
}

/* HSK 7–9 "Mastery Tier" banner — visually distinct from HSK 1–6 cards.
   Soft cream-to-champagne gradient (very light, not a solid thick colour),
   big 九 motif, diagonal "Coming Soon" ribbon. Click is captured by JS and
   shows a toast — the link target is dummy. */
.hsk79-card {
  cursor: pointer;
  isolation: isolate;
}
.hsk79-bg {
  position: absolute;
  inset: 0;
  /* Very pale, mostly-white wash with the faintest hint of warm gold so it
     still reads as a special "tier" without being bold or heavy. */
  background: linear-gradient(135deg, #ffffff 0%, #fffbf2 45%, #fdf3da 80%, #f7e4b4 100%);
}
.hsk79-glow {
  position: absolute;
  inset: 0;
  /* Soft warm orbs in the corners to add depth without saturation. */
  background:
    radial-gradient(circle at 105% 110%, rgba(252, 211, 77, 0.30), transparent 55%),
    radial-gradient(circle at 0% 0%, rgba(167, 139, 250, 0.10), transparent 55%);
  pointer-events: none;
}
.hsk79-motif {
  position: absolute;
  right: -2.5rem;
  bottom: -3.5rem;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 14rem;
  line-height: 1;
  color: rgba(180, 132, 33, 0.14);
  transform: rotate(6deg);
  pointer-events: none;
  user-select: none;
}
.hsk79-ribbon {
  position: absolute;
  top: 18px;
  right: -42px;
  width: 160px;
  text-align: center;
  padding: 5px 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #5b3a07;
  background: linear-gradient(to right, #fef3c7, #fbbf24 55%, #f59e0b);
  transform: rotate(35deg);
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.25);
  z-index: 20;
}
.hsk79-card::after {
  /* Soft warm-toned inner border for a polished finish. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(245, 158, 11, 0.22);
  z-index: 11;
}
.hsk79-card:hover .hsk79-glow {
  opacity: 1.15;
}
/* Smaller screens: shrink motif so it doesn't overflow */
@media (max-width: 380px) {
  .hsk79-motif { font-size: 11rem; right: -1.75rem; bottom: -3rem; }
  .hsk79-ribbon { right: -48px; font-size: 9px; }
}

/* Premium page */
.premium-hero-card {
  background: linear-gradient(145deg, #0057db 0%, #0a3d9e 50%, #171b2a 100%);
}
.premium-hero-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.92;
  filter: blur(8px);
}
.premium-hero-orb--one {
  top: -2rem;
  right: -3rem;
  width: 11rem;
  height: 11rem;
  background: radial-gradient(circle, rgba(250, 198, 56, 0.55), rgba(250, 198, 56, 0));
}
.premium-hero-orb--two {
  bottom: -2.5rem;
  left: -2rem;
  width: 9rem;
  height: 9rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}
.premium-glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1.75rem;
  background: rgba(255, 255, 255, 0.84);
  padding: 1.25rem;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.premium-glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.35), rgba(236, 237, 250, 0.1));
  pointer-events: none;
}
.premium-glass-card > * {
  position: relative;
  z-index: 1;
}
.premium-stat-card {
  display: flex;
  min-height: 4.25rem;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1.2rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.88);
  padding: 0.8rem;
}
.premium-stat-card strong {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
  color: #191b24;
}
.premium-stat-card small {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #727687;
  text-transform: uppercase;
}
.premium-step {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.premium-step__index {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 102, 255, 0.12);
  color: #0066ff;
  font-size: 0.78rem;
  font-weight: 700;
}
.premium-card-stage {
  position: relative;
  width: 9.5rem;
  height: 11.25rem;
}
.premium-card-stack {
  position: absolute;
  inset: 0;
}
.premium-card-stack--back {
}
.premium-card-stack--front {
}
.premium-mini-card {
  --tx: 0px;
  --ty: 0px;
  --rot: 0deg;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  border-radius: 1.8rem;
  padding: 1.1rem;
  transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot));
  box-shadow: 0 22px 45px rgba(9, 16, 40, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: premium-sway 5.8s ease-in-out infinite;
}
.premium-card-stack--back .premium-mini-card {
  --tx: -0.7rem;
  --ty: 0.7rem;
  --rot: -8deg;
  animation-delay: -2.2s;
}
.premium-card-stack--front .premium-mini-card {
  --tx: 0.65rem;
  --ty: -0.2rem;
  --rot: 6deg;
}
.premium-mini-card--glass {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
    linear-gradient(145deg, rgba(0, 102, 255, 0.24), rgba(9, 61, 158, 0.34));
}
.premium-mini-card--violet {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
    linear-gradient(145deg, rgba(155, 37, 171, 0.42), rgba(55, 68, 213, 0.28));
}
.premium-mini-card__eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.premium-mini-card strong {
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 800;
  color: #ffffff;
}
.premium-mini-card small {
  display: block;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.premium-benefit-card {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.9rem;
  align-items: flex-start;
  border-radius: 1.35rem;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: rgba(255, 255, 255, 0.88);
  padding: 0.95rem;
}
.premium-benefit-icon {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(0, 102, 255, 0.12), rgba(0, 102, 255, 0.06));
  color: #0066ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.account-session-card {
  background: linear-gradient(135deg, #f8faff 0%, #eef3ff 100%);
}
.streak-summary-card {
  border-color: #fed7aa;
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
}
.streak-summary-icon {
  background: #ffffff;
}
.streak-summary-title {
  color: #7c2d12;
}
.streak-summary-copy {
  color: rgba(154, 52, 18, 0.7);
}

@keyframes float-orb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -12px, 0) scale(1.04); }
}
@keyframes premium-sway {
  0%, 100% { transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot)); }
  25% { transform: translate3d(calc(var(--tx) - 6px), calc(var(--ty) - 5px), 0) rotate(calc(var(--rot) - 3deg)); }
  50% { transform: translate3d(calc(var(--tx) + 3px), calc(var(--ty) - 10px), 0) rotate(calc(var(--rot) + 2.5deg)); }
  75% { transform: translate3d(calc(var(--tx) + 7px), calc(var(--ty) - 4px), 0) rotate(calc(var(--rot) + 4deg)); }
}

/* Global dark mode. The app is built from static Tailwind utility classes,
   so this override layer maps the existing light tokens to dark surfaces. */
html.theme-dark,
body.theme-dark {
  background: #0b0f1a;
  color: #f5f7ff;
  color-scheme: dark;
}
body.theme-dark {
  background:
    radial-gradient(circle at 50% -12rem, rgba(0, 102, 255, 0.16), transparent 28rem),
    #0b0f1a;
}
.theme-dark #app,
.theme-dark .bg-surface {
  background-color: #0f1320 !important;
}
.theme-dark #app {
  border-color: #273049 !important;
}
.theme-dark #app-header,
.theme-dark .bg-surface\/90 {
  background-color: rgba(15, 19, 32, 0.9) !important;
}
.theme-dark #bottom-nav {
  background-color: rgba(23, 27, 42, 0.92) !important;
  border-color: #273049 !important;
}
.theme-dark .bg-white,
.theme-dark .bg-white\/90,
.theme-dark .bg-white\/95,
.theme-dark .card-face,
.theme-dark .auth-surface,
.theme-dark .premium-glass-card,
.theme-dark .premium-stat-card,
.theme-dark .premium-benefit-card {
  background-color: #171b2a !important;
  border-color: #273049 !important;
}
.theme-dark .bg-surface-container,
.theme-dark .bg-surface-container\/40,
.theme-dark .bg-surface-container\/50,
.theme-dark .bg-surface-container\/60,
.theme-dark .bg-surface\/70 {
  background-color: #22283b !important;
}
.theme-dark .bg-surface-container-high {
  background-color: #273049 !important;
}
.theme-dark .text-text-main,
.theme-dark .card-face,
.theme-dark .hanzi-control,
.theme-dark .hanzi-pill,
.theme-dark .premium-stat-card strong,
.theme-dark .text-text-main\/70 {
  color: #f5f7ff !important;
}
.theme-dark .text-text-sub {
  color: #c4cbdf !important;
}
.theme-dark .text-outline,
.theme-dark .placeholder\:text-outline::placeholder {
  color: #8f99b8 !important;
}
.theme-dark .border-surface-container,
.theme-dark .border-surface-container-high,
.theme-dark .border-outline-variant {
  border-color: #273049 !important;
}
.theme-dark .shadow-card,
.theme-dark .shadow-soft,
.theme-dark .shadow-button,
.theme-dark .shadow-2xl,
.theme-dark .shadow-lg {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}
.theme-dark .setting-row {
  border-color: #273049;
}
.theme-dark input,
.theme-dark textarea,
.theme-dark select {
  background-color: #171b2a;
  color: #f5f7ff;
  border-color: #273049;
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: #7d87a4;
}
.theme-dark .toggle .slider {
  background: #4b556f;
}
.theme-dark .toggle .slider::before {
  background: #f5f7ff;
}
.theme-dark .progress-ring__track {
  stroke: #273049;
}
.theme-dark .skeleton {
  background: linear-gradient(90deg, #1a2031 0%, #273049 50%, #1a2031 100%);
  background-size: 200% 100%;
}
.theme-dark .madmi-progress-icon {
  background: #171b2a;
  color: #4d94ff;
  box-shadow: inset 0 0 0 1px rgba(77, 148, 255, 0.18);
}
.theme-dark .madmi-progress-row {
  color: #9aa4be;
}
.theme-dark .madmi-progress-row strong {
  color: #4d94ff;
}
.theme-dark .madmi-progress-track {
  background: #273049;
}
.theme-dark .home-panel,
.theme-dark .home-action-card {
  border-color: rgba(96, 111, 154, 0.36);
  color: #f5f7ff;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}
.theme-dark .home-course-hero {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 22px 46px color-mix(in srgb, var(--course-color-dark) 42%, transparent);
}
.theme-dark .home-goal-card {
  border-color: rgba(96, 111, 154, 0.32);
  background: linear-gradient(145deg, rgba(23, 27, 42, 0.98) 0%, rgba(20, 29, 49, 0.98) 58%, rgba(16, 39, 61, 0.96) 100%);
}
.theme-dark .home-progress-card {
  border-color: rgba(96, 111, 154, 0.32);
  background: rgba(23, 27, 42, 0.96);
}
.theme-dark .home-tools-card {
  border-color: rgba(96, 111, 154, 0.32);
  background: rgba(23, 27, 42, 0.96);
}
.theme-dark .home-action-card:nth-child(1) {
  border-color: rgba(96, 111, 154, 0.32);
  background: rgba(23, 27, 42, 0.96);
}
.theme-dark .home-action-card:nth-child(2) {
  border-color: rgba(96, 111, 154, 0.32);
  background: rgba(23, 27, 42, 0.96);
}
.theme-dark .home-action-card:nth-child(3) {
  border-color: rgba(96, 111, 154, 0.32);
  background: rgba(23, 27, 42, 0.96);
}
.theme-dark .home-action-card:nth-child(4) {
  border-color: rgba(96, 111, 154, 0.32);
  background: rgba(23, 27, 42, 0.96);
}
.theme-dark .home-action-card::after {
  color: rgba(255, 255, 255, 0.04);
}
.theme-dark .home-goal-card h3,
.theme-dark .home-section-heading h3,
.theme-dark .home-action-card strong,
.theme-dark .home-mini-stats strong,
.theme-dark .home-tool-list strong {
  color: #f5f7ff;
}
.theme-dark .home-goal-card h3 span,
.theme-dark .home-goal-card p:not(.home-eyebrow),
.theme-dark .home-muted,
.theme-dark .home-action-card > span:last-child,
.theme-dark .home-mini-stats span,
.theme-dark .home-tool-list span:not(.material-symbols-outlined) {
  color: #c4cbdf;
}
.theme-dark .home-eyebrow {
  color: #9aa4be;
}
.theme-dark .home-goal-card .home-eyebrow {
  color: #9aa4be;
}
.theme-dark .home-progress-card .home-eyebrow {
  color: #9aa4be;
}
.theme-dark .home-tools-card .home-eyebrow {
  color: #9aa4be;
}
.theme-dark .home-goal-meter {
  background: conic-gradient(#60a5fa var(--goal-pct), #273049 0);
}
.theme-dark .home-goal-meter span,
.theme-dark .home-circle-link {
  background: #171b2a;
  color: #f8fafc;
}
.theme-dark .home-progress-track {
  background: #273049;
}
.theme-dark .home-mini-stats div,
.theme-dark .home-tool-list a {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 19, 32, 0.58);
}
.theme-dark .home-mini-stats div:nth-child(2) {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 19, 32, 0.58);
}
.theme-dark .home-mini-stats div:nth-child(3),
.theme-dark .home-tool-list a:nth-child(3) {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 19, 32, 0.58);
}
.theme-dark .home-tool-list a:nth-child(2) {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 19, 32, 0.58);
}
.theme-dark .home-action-icon.red { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.theme-dark .home-action-icon.blue,
.theme-dark .home-tool-icon.blue { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.theme-dark .home-action-icon.amber { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.theme-dark .home-action-icon.cyan { background: rgba(34, 211, 238, 0.14); color: #22d3ee; }
.theme-dark .home-tool-icon.green { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.theme-dark .home-tool-icon.purple { background: rgba(196, 181, 253, 0.14); color: #c4b5fd; }
.theme-dark .grammar-preview-block,
.theme-dark .grammar-coming-soon-card,
.theme-dark .connection-error-card {
  background: rgba(23, 27, 42, 0.96);
  border-color: #273049;
}
.theme-dark .grammar-preview-block--large span {
  background: #273049;
}
.theme-dark .grammar-preview-block--large span:first-child {
  background: #065f46;
}
.theme-dark .grammar-coming-soon-card h1,
.theme-dark .connection-error-card h1 {
  color: #f5f7ff;
}
.theme-dark .grammar-coming-soon-copy,
.theme-dark .connection-error-message {
  color: #c4cbdf;
}
.theme-dark .grammar-coming-soon-icon {
  background: rgba(5, 150, 105, 0.16);
}
.theme-dark .connection-error-icon {
  background: rgba(239, 68, 68, 0.14);
}
.theme-dark .connection-error-vpn {
  border-color: #1e3a8a;
  background: rgba(30, 64, 175, 0.18);
}
.theme-dark .connection-error-vpn strong {
  color: #bfdbfe;
}
.theme-dark .connection-error-vpn p {
  color: #93c5fd;
}
.theme-dark .nav-item {
  color: #8f99b8;
}
.theme-dark .nav-item:hover,
.theme-dark .nav-item.active {
  color: #4d94ff;
}
.theme-dark .hanzi-char-card,
.theme-dark .hanzi-filter,
.theme-dark .hanzi-tab,
.theme-dark .hanzi-control,
.theme-dark .hanzi-pill {
  background: #171b2a;
  border-color: #273049;
}
.theme-dark .hanzi-char-card.completed {
  border-color: rgba(52, 211, 153, 0.42);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.14), #171b2a 48%);
}
.theme-dark .hanzi-filter.active,
.theme-dark .hanzi-tab.active {
  background: rgba(77, 148, 255, 0.13);
  border-color: rgba(77, 148, 255, 0.42);
}
.theme-dark .hanzi-tab.active.radical {
  background: rgba(255, 94, 99, 0.14);
  border-color: rgba(255, 94, 99, 0.36);
}
.theme-dark .hanzi-grid-bg,
.theme-dark .hanzi-writer-target {
  background:
    linear-gradient(#ff5e63, #ff5e63) center / 1px 100% no-repeat,
    linear-gradient(90deg, #ff5e63, #ff5e63) center / 100% 1px no-repeat,
    linear-gradient(45deg, transparent 49.6%, rgba(255, 94, 99, 0.26) 50%, transparent 50.4%),
    linear-gradient(-45deg, transparent 49.6%, rgba(255, 94, 99, 0.26) 50%, transparent 50.4%);
  background-color: #111725;
  border-color: rgba(255, 94, 99, 0.52);
}
.theme-dark .bg-red-50 {
  background-color: rgba(219, 50, 55, 0.14) !important;
}
.theme-dark .\!bg-red-50 {
  background-color: rgba(219, 50, 55, 0.14) !important;
}
.theme-dark .hover\:bg-red-50:hover,
.theme-dark .hover\:bg-red-100:hover {
  background-color: rgba(219, 50, 55, 0.22) !important;
}
.theme-dark .bg-rose-50,
.theme-dark .bg-rose-100 {
  background-color: rgba(244, 63, 94, 0.14) !important;
}
.theme-dark .bg-indigo-50,
.theme-dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.16) !important;
}
.theme-dark .bg-blue-50,
.theme-dark .bg-blue-100,
.theme-dark .bg-cyan-50,
.theme-dark .bg-cyan-100,
.theme-dark .bg-primary-soft {
  background-color: rgba(77, 148, 255, 0.15) !important;
}
.theme-dark .bg-orange-50,
.theme-dark .bg-orange-100,
.theme-dark .bg-amber-50,
.theme-dark .bg-amber-100,
.theme-dark .bg-yellow-50,
.theme-dark .bg-yellow-100 {
  background-color: rgba(249, 115, 22, 0.15) !important;
}
.theme-dark .bg-purple-50,
.theme-dark .bg-purple-100,
.theme-dark .bg-pink-50,
.theme-dark .bg-pink-100 {
  background-color: rgba(168, 85, 247, 0.16) !important;
}
.theme-dark .bg-green-50,
.theme-dark .bg-green-100,
.theme-dark .bg-teal-50,
.theme-dark .bg-teal-100,
.theme-dark .bg-emerald-50,
.theme-dark .bg-emerald-100,
.theme-dark .\!bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.14) !important;
}
.theme-dark .bg-amber-200\/60,
.theme-dark .bg-emerald-200\/60 {
  background-color: rgba(39, 48, 73, 0.82) !important;
}
.theme-dark .bg-primary\/5,
.theme-dark .bg-primary\/10 {
  background-color: rgba(77, 148, 255, 0.14) !important;
}
.theme-dark .border-orange-100,
.theme-dark .border-amber-200,
.theme-dark .border-emerald-200,
.theme-dark .border-indigo-200,
.theme-dark .border-indigo-300,
.theme-dark .border-red-100,
.theme-dark .border-rose-200 {
  border-color: #273049 !important;
}
.theme-dark .account-session-card {
  background: linear-gradient(135deg, #20263a 0%, #171b2a 100%) !important;
  border: 1px solid #2d3652;
}
.theme-dark .streak-summary-card {
  background: #171b2a !important;
  border-color: #273049 !important;
}
.theme-dark .streak-summary-icon {
  background: #0f1320 !important;
}
.theme-dark .streak-summary-title {
  color: #f5f7ff !important;
}
.theme-dark .streak-summary-copy {
  color: #c4cbdf !important;
}
.theme-dark .hsk79-bg {
  background: linear-gradient(135deg, #171b2a 0%, #202337 52%, #302a1f 100%);
}
.theme-dark .hsk79-card::after {
  border-color: rgba(245, 158, 11, 0.28);
}
.theme-dark .lock-surface {
  border-color: rgba(39, 48, 73, 0.9);
  background: rgba(23, 27, 42, 0.72);
}
.theme-dark .lock-surface::before {
  background: linear-gradient(145deg, rgba(39, 48, 73, 0.62), rgba(15, 19, 32, 0.26));
}
.theme-dark .lock-badge {
  background: #22283b;
}
.theme-dark .premium-card-stack .premium-mini-card,
.theme-dark .auth-stat-pill {
  border-color: rgba(255, 255, 255, 0.12);
}

.memory-diff {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.memory-diff-char {
  min-width: 2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.25rem 0.55rem;
  font-family: inherit;
  font-weight: 800;
  line-height: 1;
}
.memory-diff-char--correct {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}
.memory-diff-char--wrong {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}
.memory-diff-char--missing {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
}
.memory-diff-char--extra {
  background: rgba(99, 102, 241, 0.14);
  color: #4338ca;
}
.theme-dark .memory-diff-char--correct {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
}
.theme-dark .memory-diff-char--wrong {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}
.theme-dark .memory-diff-char--missing {
  background: rgba(245, 158, 11, 0.24);
  color: #fcd34d;
}
.theme-dark .memory-diff-char--extra {
  background: rgba(99, 102, 241, 0.24);
  color: #c7d2fe;
}

.memory-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  padding: 1.25rem;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(16, 185, 129, 0.35), transparent 26%),
    radial-gradient(circle at 12% 0%, rgba(0, 102, 255, 0.32), transparent 30%),
    linear-gradient(135deg, #171a21 0%, #23262f 54%, #151820 100%);
  box-shadow: 0 18px 42px rgba(17, 19, 24, 0.25);
}
.memory-hero-grid {
  position: absolute;
  inset: auto -2rem -2rem auto;
  width: 11rem;
  height: 11rem;
  opacity: 0.24;
  background:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 1.4rem 1.4rem;
  transform: rotate(-10deg);
}
.memory-hero-grid::after {
  content: '';
  position: absolute;
  right: 1.6rem;
  bottom: 2.2rem;
  width: 0.3rem;
  height: 3.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}
.memory-hero-steps {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.memory-flow-node {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 900;
}
.memory-flow-node--ime {
  width: auto;
  border-radius: 999px;
  padding: 0 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.memory-flow-arrow {
  width: 1.1rem;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}
.memory-hero-stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  backdrop-filter: blur(10px);
}
.memory-pinyin-capsule {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  padding: 0 1rem;
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
}
.memory-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.memory-mode-card {
  position: relative;
  min-height: 11rem;
  overflow: hidden;
  border: 1px solid var(--surface-container, #e6e1ea);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--memory-tile-color, #0066ff) 22%, transparent), transparent 34%);
  padding: 1rem;
  box-shadow: 0 10px 26px rgba(17, 19, 24, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.memory-mode-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 55%, #e6e1ea);
  box-shadow: 0 16px 32px rgba(17, 19, 24, 0.12);
}
.memory-mode-visual {
  display: flex;
  min-height: 4.4rem;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
}
.memory-keycap {
  display: inline-flex;
  min-width: 2.9rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--memory-tile-color, #0066ff) 22%, #e6e1ea);
  background: #fff;
  color: #343741;
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: inset 0 -3px 0 rgba(17, 19, 24, 0.05), 0 8px 16px rgba(17, 19, 24, 0.06);
}
.memory-keycap--accent {
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 14%, #fff);
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 82%, #151820);
}
.memory-visual-arrow {
  font-size: 0.95rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 68%, #8b8d98);
}
.memory-sound-disc {
  display: inline-flex;
  width: 3.2rem;
  height: 3.2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 14%, #fff);
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 82%, #151820);
  box-shadow: inset 0 -4px 0 rgba(17, 19, 24, 0.04);
}
.memory-mini-slots {
  display: flex;
  flex: 1;
  gap: 0.28rem;
}
.memory-mini-slots i {
  display: block;
  height: 0.9rem;
  flex: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 18%, #fff);
}
.memory-tone-dot {
  display: inline-flex;
  width: 2.8rem;
  height: 2.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 14%, #fff);
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 85%, #151820);
  font-weight: 900;
}
.memory-tone-dot--alt {
  border-radius: 0.85rem;
}
.memory-tone-line {
  height: 2px;
  flex: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 28%, #e6e1ea);
}
.memory-shape-box {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.75rem;
  border: 2px solid color-mix(in srgb, var(--memory-tile-color, #0066ff) 32%, #e6e1ea);
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 8%, #fff);
}
.memory-shape-box--wide {
  width: 3.3rem;
  border-radius: 999px;
}
.memory-line,
.memory-blank {
  display: inline-flex;
  height: 0.9rem;
  border-radius: 999px;
}
.memory-line {
  flex: 1;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 14%, #fff);
}
.memory-line--short {
  flex: 0.55;
}
.memory-blank {
  width: 3.2rem;
  border: 2px dashed color-mix(in srgb, var(--memory-tile-color, #0066ff) 44%, #e6e1ea);
  background: transparent;
}
.memory-mode-visual--due {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.memory-review-bar {
  display: block;
  height: 0.62rem;
  overflow: hidden;
  border-radius: 999px;
  background: #f0eef4;
}
.memory-review-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 66%, #fff);
}
.memory-count-pill {
  border-radius: 999px;
  background: #f0eef4;
  padding: 0.25rem 0.6rem;
  font-size: 0.625rem;
  font-weight: 900;
  color: #5f6068;
}
.memory-console {
  border: 1px solid #dfe3ec;
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98)),
    linear-gradient(90deg, rgba(0, 102, 255, 0.08), rgba(16, 185, 129, 0.08));
  padding: 1rem;
  box-shadow: 0 14px 34px rgba(17, 19, 24, 0.08);
}
.memory-console-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.memory-console-kicker {
  color: #0066ff;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.memory-console h1 {
  margin-top: 0.3rem;
  color: #161821;
  font-family: var(--font-display, inherit);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.05;
}
.memory-console-subtitle {
  margin-top: 0.55rem;
  max-width: 24rem;
  color: #5f6068;
  font-size: 0.88rem;
  line-height: 1.55;
}
.memory-start-button {
  display: inline-flex;
  min-height: 2.8rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  background: #171a21;
  padding: 0 1.05rem;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(17, 19, 24, 0.2);
}
.memory-typing-rail {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  border-radius: 0.5rem;
  background: #171a21;
  padding: 0.55rem;
  color: #fff;
}
.memory-typing-rail span {
  display: inline-flex;
  min-height: 2.1rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 0.38rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}
.memory-typing-rail .material-symbols-outlined {
  font-size: 1rem;
}
.memory-typing-rail i {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}
.memory-console-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.memory-console-stat {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid #e7eaf1;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.7rem;
}
.memory-console-stat > .material-symbols-outlined {
  color: #0066ff;
  font-size: 1.1rem;
}
.memory-console-stat p {
  color: #161821;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
.memory-console-stat span {
  color: #747681;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}
.memory-lane-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.memory-lane {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) minmax(7rem, 10rem) auto;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #e3e6ef;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.75rem;
  box-shadow: 0 8px 22px rgba(17, 19, 24, 0.05);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.memory-lane:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 42%, #dfe3ec);
  box-shadow: 0 12px 26px rgba(17, 19, 24, 0.08);
}
.memory-lane-icon {
  display: flex;
  width: 2.7rem;
  height: 2.7rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 12%, #fff);
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 82%, #161821);
}
.memory-lane-copy {
  min-width: 0;
}
.memory-lane-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
}
.memory-lane-title-row h3 {
  min-width: 0;
  overflow: hidden;
  color: #161821;
  font-size: 0.9rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-lane-title-row span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 10%, #f4f6fa);
  padding: 0.15rem 0.45rem;
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 78%, #161821);
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.memory-lane-copy p {
  margin-top: 0.18rem;
  color: #747681;
  font-size: 0.72rem;
  line-height: 1.35;
}
.memory-lane-visual .memory-mode-visual {
  min-height: 2.4rem;
  margin-top: 0;
}
.memory-lane-visual .memory-keycap {
  min-width: 2.15rem;
  min-height: 1.9rem;
  border-radius: 0.45rem;
  font-size: 0.62rem;
}
.memory-lane-visual .memory-sound-disc,
.memory-lane-visual .memory-tone-dot {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 0.5rem;
}
.memory-lane-visual .memory-tone-dot--alt {
  border-radius: 999px;
}
.memory-lane-visual .memory-shape-box {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.38rem;
}
.memory-lane-visual .memory-shape-box--wide {
  width: 2.3rem;
}
.memory-lane-end {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: #8b8d98;
}
.memory-small-panel {
  border: 1px solid #e3e6ef;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 8px 22px rgba(17, 19, 24, 0.05);
}
.memory-simple-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid #e5e7ef;
  border-radius: 1rem;
  background: #fff;
  padding: 1.15rem;
  box-shadow: 0 10px 26px rgba(17, 19, 24, 0.06);
}
.memory-simple-kicker {
  color: #0066ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.memory-simple-hero h1 {
  margin-top: 0.3rem;
  color: #161821;
  font-family: var(--font-display, inherit);
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1.08;
}
.memory-simple-copy {
  margin-top: 0.55rem;
  max-width: 28rem;
  color: #5f6068;
  font-size: 0.92rem;
  line-height: 1.55;
}
.memory-simple-start {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 0.85rem;
  background: #0066ff;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0, 102, 255, 0.22);
}
.memory-simple-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.memory-simple-status span {
  border-radius: 999px;
  background: #f4f6fa;
  padding: 0.36rem 0.7rem;
  color: #5f6068;
  font-size: 0.72rem;
  font-weight: 800;
}
.memory-simple-status b {
  color: #161821;
}
.memory-simple-section {
  border: 1px solid #e5e7ef;
  border-radius: 1rem;
  background: #fff;
  padding: 0.95rem;
  box-shadow: 0 8px 22px rgba(17, 19, 24, 0.05);
}
.memory-simple-section--support {
  padding-bottom: 0.8rem;
}
.memory-simple-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.memory-simple-section-head h2 {
  color: #161821;
  font-family: var(--font-display, inherit);
  font-size: 1rem;
  font-weight: 900;
}
.memory-simple-section-head p {
  margin-top: 0.15rem;
  color: #747681;
  font-size: 0.78rem;
  line-height: 1.35;
}
.memory-simple-mode-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.memory-simple-mode,
.memory-simple-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #eceef4;
  border-radius: 0.9rem;
  background: #fbfcff;
  padding: 0.85rem;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.memory-simple-mode:hover,
.memory-simple-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 38%, #e5e7ef);
  box-shadow: 0 10px 20px rgba(17, 19, 24, 0.07);
}
.memory-simple-icon {
  display: inline-flex;
  width: 2.55rem;
  height: 2.55rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.78rem;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 12%, #fff);
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 82%, #161821);
}
.memory-simple-title,
.memory-simple-subtitle {
  display: block;
  min-width: 0;
}
.memory-simple-title {
  overflow: hidden;
  color: #161821;
  font-size: 0.92rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-simple-subtitle {
  margin-top: 0.12rem;
  color: #747681;
  font-size: 0.74rem;
  line-height: 1.35;
}
.memory-simple-count {
  flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 10%, #f4f6fa);
  padding: 0.2rem 0.5rem;
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 76%, #161821);
  font-size: 0.68rem;
  font-weight: 900;
}
.memory-simple-chevron {
  flex-shrink: 0;
  color: #a0a3ad;
}
.memory-simple-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.memory-lesson-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.memory-lesson-card {
  display: flex;
  min-height: 8.2rem;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eceef4;
  border-radius: 0.9rem;
  background:
    linear-gradient(180deg, #fff, #fbfcff),
    linear-gradient(135deg, color-mix(in srgb, var(--memory-tile-color, #0066ff) 12%, transparent), transparent);
  padding: 0.85rem;
  box-shadow: 0 8px 18px rgba(17, 19, 24, 0.04);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.memory-lesson-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 38%, #e5e7ef);
  box-shadow: 0 10px 20px rgba(17, 19, 24, 0.07);
}
.memory-lesson-badge {
  align-self: flex-start;
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 11%, #f4f6fa);
  padding: 0.22rem 0.52rem;
  color: color-mix(in srgb, var(--memory-tile-color, #0066ff) 78%, #161821);
  font-size: 0.62rem;
  font-weight: 900;
}
.memory-lesson-title {
  margin-top: 0.65rem;
  color: #161821;
  font-size: 0.92rem;
  font-weight: 900;
}
.memory-lesson-preview {
  display: block;
  margin-top: 0.35rem;
  overflow: hidden;
  color: #343741;
  font-size: 0.95rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-lesson-meta {
  margin-top: 0.65rem;
  color: #747681;
  font-size: 0.68rem;
  font-weight: 800;
}
.memory-simple-link {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.55rem;
}
.memory-simple-link .memory-simple-chevron {
  display: none;
}
.memory-tile {
  --memory-tile-color: #0066ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid color-mix(in srgb, var(--memory-tile-color) 42%, white);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--memory-tile-color) 16%, white), #fff 68%);
  color: color-mix(in srgb, var(--memory-tile-color) 82%, #161821);
  box-shadow: inset 0 -4px 0 rgba(17, 19, 24, 0.05), 0 8px 20px rgba(17, 19, 24, 0.08);
  font-weight: 900;
  line-height: 1;
}
.memory-tile--circle {
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  font-size: 2rem;
}
.memory-tile--block {
  min-width: 5.8rem;
  min-height: 4.1rem;
  border-radius: 1.1rem;
  padding: 0.6rem 0.9rem;
  font-size: 1.55rem;
}
.memory-tile--slab {
  min-height: 3.4rem;
  max-width: 100%;
  border-radius: 1rem;
  padding: 0.65rem 1rem;
  font-size: 1.05rem;
  line-height: 1.4;
}
.memory-slot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}
.memory-slot {
  --memory-tile-color: #0066ff;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-tile-color) 18%, white);
  border: 1px solid color-mix(in srgb, var(--memory-tile-color) 42%, white);
  box-shadow: inset 0 -2px 0 rgba(17, 19, 24, 0.05);
}
.memory-slot.memory-tile--block {
  width: 2.2rem;
  border-radius: 0.65rem;
}
.memory-slot-more {
  align-self: center;
  color: #8b8d98;
  font-size: 0.8rem;
  font-weight: 900;
}
.memory-practice-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem 2rem;
}
.memory-challenge-strip {
  --memory-accent: #0066ff;
  border: 1px solid #e3e6ef;
  border-left: 4px solid var(--memory-accent);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.85rem 1rem;
  box-shadow: 0 8px 20px rgba(17, 19, 24, 0.05);
}
.memory-challenge-icon {
  display: flex;
  width: 2.65rem;
  height: 2.65rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--memory-accent) 11%, #fff);
  color: color-mix(in srgb, var(--memory-accent) 82%, #161821);
}
.memory-typing-stage,
.memory-listen-stage,
.memory-keyboard-dock {
  --memory-accent: #0066ff;
  border: 1px solid #e3e6ef;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(17, 19, 24, 0.06);
}
.memory-target-tiles {
  display: flex;
  justify-content: center;
}
.memory-context-line {
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--memory-accent, #0066ff) 8%, #f5f3f8);
  padding: 0.8rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #5f6068;
}
.memory-audio-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-accent, #0066ff) 12%, white);
  padding: 0.58rem 1rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--memory-accent, #0066ff) 82%, #161821);
}
.memory-big-play {
  display: inline-flex;
  width: 6.3rem;
  height: 6.3rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.35), transparent 28%),
    var(--memory-accent, #0066ff);
  color: #fff;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--memory-accent, #0066ff) 28%, transparent);
}
.memory-big-play--small {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 1.2rem;
}
.memory-learn-card {
  --memory-accent: #0066ff;
  border: 1px solid #e3e6ef;
  border-radius: 1rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(17, 19, 24, 0.06);
}
.memory-type-input {
  width: 100%;
  border: 2px solid color-mix(in srgb, var(--memory-accent, #0066ff) 16%, #e6e1ea);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.9rem 1rem;
  font-size: 1.1rem;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.memory-type-input:focus {
  border-color: var(--memory-accent, #0066ff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--memory-accent, #0066ff) 14%, transparent);
}
.memory-primary-action {
  margin-top: 1rem;
  width: 100%;
  border-radius: 0.5rem;
  background: var(--memory-accent, #0066ff);
  padding: 0.9rem 1.25rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--memory-accent, #0066ff) 24%, transparent);
}
.memory-composition-card {
  background:
    linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}
.memory-composer-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.memory-composer-label span {
  color: #5f6068;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.memory-composer-label small {
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-accent, #0066ff) 10%, #f4f6fa);
  padding: 0.18rem 0.5rem;
  color: color-mix(in srgb, var(--memory-accent, #0066ff) 78%, #161821);
  font-size: 0.64rem;
  font-weight: 900;
}
.memory-ime-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  border: 2px solid color-mix(in srgb, var(--memory-accent, #0066ff) 18%, #e3e6ef);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.45rem 0.55rem;
  box-shadow: inset 0 -2px 0 rgba(17, 19, 24, 0.03);
}
.memory-ime-composer > .material-symbols-outlined {
  color: color-mix(in srgb, var(--memory-accent, #0066ff) 78%, #161821);
}
.memory-ime-composer:focus-within {
  border-color: var(--memory-accent, #0066ff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--memory-accent, #0066ff) 12%, transparent);
}
.memory-type-input--composer {
  border: 0;
  border-radius: 0;
  padding: 0.6rem 0;
  box-shadow: none;
}
.memory-type-input--composer:focus {
  border-color: transparent;
  box-shadow: none;
}
.memory-ime-composer b {
  border-radius: 0.38rem;
  background: #171a21;
  padding: 0.35rem 0.5rem;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.memory-token-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.memory-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.memory-answer-tile {
  min-height: 5.2rem;
  border: 1px solid #e6e1ea;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.85rem;
  text-align: left;
  box-shadow: 0 8px 20px rgba(17, 19, 24, 0.06);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.memory-answer-tile:hover {
  transform: translateY(-1px);
  border-color: #0066ff;
  box-shadow: 0 12px 24px rgba(17, 19, 24, 0.1);
}
.memory-candidate-list .memory-answer-tile {
  min-height: 0;
  padding: 0.7rem;
}
.memory-ime-candidate {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.memory-ime-number {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.38rem;
  background: #171a21;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}
.memory-ime-hanzi {
  min-width: 3.1rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--memory-tile-color, #0066ff) 24%, #e6e1ea);
  background: color-mix(in srgb, var(--memory-tile-color, #0066ff) 8%, #fff);
  padding: 0.55rem 0.7rem;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 900;
  color: #161821;
}
.memory-ime-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}
.memory-ime-pinyin {
  color: #161821;
  font-size: 0.78rem;
  font-weight: 900;
}
.memory-ime-meaning {
  overflow: hidden;
  color: #747681;
  font-size: 0.7rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-unlock-panel {
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 0.5rem;
  background: #f1fdf7;
  padding: 1.25rem;
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.1);
}
.memory-choice-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.memory-choice-head > .material-symbols-outlined {
  display: inline-flex;
  width: 2.2rem;
  height: 2.2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: #10b981;
  color: #fff;
}
.memory-choice-head p {
  color: #065f46;
  font-size: 0.9rem;
  font-weight: 900;
}
.memory-choice-head small {
  display: block;
  margin-top: 0.1rem;
  color: rgba(6, 95, 70, 0.75);
  font-size: 0.72rem;
  font-weight: 700;
}
.memory-sound-query {
  display: inline-flex;
  margin-top: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--memory-accent, #0066ff) 24%, #e3e6ef);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.75rem 1rem;
  color: #161821;
  font-family: var(--font-display, inherit);
  font-size: 1.65rem;
  font-weight: 900;
  box-shadow: inset 0 -3px 0 rgba(17, 19, 24, 0.04);
}
.theme-dark .memory-mode-card,
.theme-dark .memory-challenge-strip,
.theme-dark .memory-typing-stage,
.theme-dark .memory-listen-stage,
.theme-dark .memory-keyboard-dock,
.theme-dark .memory-answer-tile,
.theme-dark .memory-console,
.theme-dark .memory-lane,
.theme-dark .memory-small-panel,
.theme-dark .memory-console-stat {
  border-color: #273049;
  background: #171b2a;
}
.theme-dark .memory-console h1,
.theme-dark .memory-console-stat p,
.theme-dark .memory-lane-title-row h3,
.theme-dark .memory-sound-query,
.theme-dark .memory-simple-hero h1,
.theme-dark .memory-simple-section-head h2,
.theme-dark .memory-simple-title,
.theme-dark .memory-lesson-title,
.theme-dark .memory-lesson-preview {
  color: #f5f7ff;
}
.theme-dark .memory-console-subtitle,
.theme-dark .memory-console-stat span,
.theme-dark .memory-lane-copy p,
.theme-dark .memory-simple-copy,
.theme-dark .memory-simple-section-head p,
.theme-dark .memory-simple-subtitle,
.theme-dark .memory-lesson-meta {
  color: #c4cbdf;
}
.theme-dark .memory-start-button,
.theme-dark .memory-typing-rail,
.theme-dark .memory-ime-composer b,
.theme-dark .memory-ime-number {
  background: #0f1320;
}
.theme-dark .memory-lane-icon,
.theme-dark .memory-lane-title-row span,
.theme-dark .memory-composer-label small,
.theme-dark .memory-sound-query,
.theme-dark .memory-simple-icon,
.theme-dark .memory-simple-status span,
.theme-dark .memory-simple-mode,
.theme-dark .memory-simple-link,
.theme-dark .memory-lesson-card {
  background: #20263a;
}
.theme-dark .memory-simple-hero,
.theme-dark .memory-simple-section,
.theme-dark .memory-learn-card {
  border-color: #273049;
  background: #171b2a;
}
.theme-dark .memory-simple-status b {
  color: #f5f7ff;
}
.theme-dark .memory-type-input {
  border-color: #2d3652;
  background: #0f1320;
  color: #f5f7ff;
}
.theme-dark .memory-ime-composer {
  border-color: #2d3652;
  background: #0f1320;
}
.theme-dark .memory-type-input--composer {
  background: transparent;
}
.theme-dark .memory-context-line,
.theme-dark .memory-count-pill {
  background: #20263a;
  color: #c4cbdf;
}
.theme-dark .memory-keycap,
.theme-dark .memory-sound-disc,
.theme-dark .memory-tone-dot,
.theme-dark .memory-shape-box,
.theme-dark .memory-ime-hanzi {
  border-color: #2d3652;
  background: #20263a;
  color: #f5f7ff;
}
.theme-dark .memory-ime-pinyin {
  color: #f5f7ff;
}
.theme-dark .memory-ime-meaning {
  color: #c4cbdf;
}
.theme-dark .memory-mini-slots i,
.theme-dark .memory-line,
.theme-dark .memory-review-bar {
  background: #20263a;
}
.theme-dark .memory-unlock-panel {
  border-color: rgba(16, 185, 129, 0.28);
  background: #14251f;
}
.modern-writing-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(17, 19, 24, 0.56);
  padding: 1rem;
}
.modern-writing-sheet__panel {
  width: min(100%, 28rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border-radius: 1.5rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 24px 64px rgba(17, 19, 24, 0.3);
}
.modern-writing-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.modern-writing-sheet__badge {
  display: inline-flex;
  border-radius: 999px;
  background: #ecfdf5;
  padding: 0.32rem 0.8rem;
  color: #047857;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.modern-writing-sheet__header h2 {
  margin-top: 0.85rem;
  color: #161821;
  font-family: var(--font-display, inherit);
  font-size: 1.35rem;
  font-weight: 900;
}
.modern-writing-sheet__header p {
  margin-top: 0.45rem;
  color: #5f6068;
  font-size: 0.9rem;
  line-height: 1.6;
}
.modern-writing-sheet__close {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f2f8;
  color: #161821;
}
.modern-writing-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
}
.modern-writing-sheet__block {
  border-radius: 1rem;
  background: #f5f6fb;
  padding: 1rem;
}
.modern-writing-sheet__block h3 {
  color: #747681;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.modern-writing-sheet__block p {
  margin-top: 0.55rem;
  color: #161821;
  font-size: 0.92rem;
  line-height: 1.65;
}
.modern-writing-sheet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.modern-writing-sheet__chips span {
  border-radius: 999px;
  background: #fff;
  padding: 0.45rem 0.75rem;
  color: #161821;
  font-size: 0.78rem;
  font-weight: 800;
}
.modern-writing-sheet__notice {
  border-radius: 1rem;
  background: #ecfdf5;
  padding: 1rem;
  color: #065f46;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.6;
}
.modern-writing-sheet__button {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  border-radius: 999px;
  background: #0066ff;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0, 102, 255, 0.22);
}
.theme-dark .modern-writing-sheet__panel {
  background: #171b2a;
}
.theme-dark .modern-writing-sheet__header h2,
.theme-dark .modern-writing-sheet__block p,
.theme-dark .modern-writing-sheet__chips span {
  color: #f5f7ff;
}
.theme-dark .modern-writing-sheet__header p,
.theme-dark .modern-writing-sheet__block h3 {
  color: #c4cbdf;
}
.theme-dark .modern-writing-sheet__close,
.theme-dark .modern-writing-sheet__block,
.theme-dark .modern-writing-sheet__chips span {
  background: #20263a;
}
@media (max-width: 520px) {
  .memory-console-top {
    flex-direction: column;
    align-items: stretch;
  }
  .memory-start-button {
    width: 100%;
  }
  .memory-typing-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .memory-typing-rail i {
    display: none;
  }
  .memory-typing-rail span {
    min-width: 0;
    padding: 0 0.35rem;
    font-size: 0.66rem;
  }
  .memory-console-stats {
    grid-template-columns: 1fr;
  }
  .memory-simple-support-grid {
    grid-template-columns: 1fr;
  }
  .memory-lesson-grid {
    grid-template-columns: 1fr;
  }
  .memory-lane {
    grid-template-columns: 2.55rem minmax(0, 1fr) auto;
  }
  .memory-lane-visual {
    display: none;
  }
}