/* --- 1. CORE VARIABLES & RESET --- */
:root {
  --primary: #ffb3c6;
  --primary-dark: #ff9eb5;
  --primary-soft: #fff5f7;
  --app-bg-fallback: #f5dddf;
  --text-main: #786c79;
  --text-muted: #9f94a0;
  --text-strong: #665b67;
  --text-soft: #897d88;
  --pinyin-ink: #7a6d77;
  --panel-line: rgba(227, 217, 223, 0.92);
  --glass: rgba(255, 255, 255, 0.88);
  --glass-border: transparent;
  --card-bg: #ffffff;
  --shadow-lg: 0 8px 30px rgba(255, 182, 193, 0.25);
  --radius: 40px;
  --nav-height: 70px;
}

@font-face {
  font-family: 'twkai';
  src:
    local('BiauKai'),
    local('DFKai-SB'),
    local('KaiTi'),
    local('STKaiti'),
    url('twkai.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 🌟 GLOBAL SCROLLBAR KILLER */
* { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent; 
  touch-action: manipulation; 
  scrollbar-width: none !important; 
  -ms-overflow-style: none !important; 
}
*::-webkit-scrollbar { 
  display: none !important; 
  width: 0 !important; 
  height: 0 !important; 
}

body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--text-main);
  height: 100dvh; 
  min-height: -webkit-fill-available; 
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: transparent !important;
}

html {
  height: 100%;
  background-color: var(--app-bg-fallback);
  background-image: linear-gradient(180deg, rgba(245, 221, 223, 0.96) 0%, rgba(255, 245, 247, 0.9) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
} /* Prevents iOS safe-area fallback bars */
body::before {
  content: "";
  position: fixed;
  top: calc(env(safe-area-inset-top) * -1);
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) * -1);
  left: 0;
  background:
    linear-gradient(180deg, rgba(245, 221, 223, 0.82) 0%, rgba(255, 245, 247, 0.14) 28%, rgba(255, 245, 247, 0.06) 100%),
    url('5178019.jpg') no-repeat center top;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}

/* --- 2. LAYOUT STRUCTURE (🌟 PADDING SWAP FIX) --- */
#app {
  flex: 1; display: flex; flex-direction: column; position: relative; width: 100%;
  margin: 0 auto; 
  padding: max(30px, env(safe-area-inset-top) + 30px) 0 20px 0;
  overflow-y: auto; padding-bottom: calc(var(--nav-height) + 40px);
  overflow-x: hidden;
}

#mainContainer { 
  flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; 
  max-width: 800px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  overflow-x: visible; 
}

.hidden { display: none !important; }
.fade-in { animation: fadeInScale 0.3s ease-out forwards; }
@keyframes fadeInScale { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }

/* Lock scrollbars during transitions to prevent layout jitter */
html.is-animating, 
html.is-animating body, 
html.is-animating #app {
    overflow: hidden !important;
}

.list-item { opacity: 0; animation: slideUp 0.4s ease-out forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- 3. TOP TOOLBAR & PROGRESS --- */
.header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; z-index: 100; position: sticky; top: 0; }
.pill-badge {
  background: rgba(255, 255, 255, 0.96); padding: 8px 16px; border-radius: 50px;
  font-weight: 700; font-size: 14px; box-shadow: 0 3px 10px rgba(255, 158, 181, 0.1); border: none;
  display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.pill-badge:active { transform: scale(0.95); }
.pill-badge:hover { transform: scale(1.04); background: rgba(255, 255, 255, 0.98); box-shadow: 0 8px 20px rgba(255, 158, 181, 0.2); }

.btn-icon {
  background: rgba(255, 255, 255, 0.96); border: none; width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--primary);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-icon:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
  .btn-icon:hover { transform: translateY(-3px) scale(1.05); background: white; box-shadow: 0 10px 25px rgba(255, 158, 181, 0.35); }
}
.btn-icon.active { background: var(--primary); color: white; border-color: var(--primary); }
.btn-icon svg { width: 22px; height: 22px; fill: currentColor; }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; background: #f3f4f6; }

/* Progress Bar */
.global-progress-container { 
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50px;
  padding: 8px 16px;
  display: flex; 
  align-items: center; 
  gap: 12px; 
  box-shadow: 0 3px 10px rgba(255, 158, 181, 0.1);
  flex: 1;
  width: 100%;             
  max-width: 400px;        
  margin: 0 auto;
}
.global-progress-track { 
  flex: 1; 
  height: 8px; 
  background: rgba(255, 158, 181, 0.25); 
  border-radius: 10px; 
  overflow: hidden; 
}
.global-progress-fill { 
  height: 100%; 
  background: linear-gradient(90deg, var(--primary), var(--primary-dark)); 
  border-radius: 10px; 
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
}
.global-progress-text { 
  font-size: 0.8rem; 
  font-weight: 800; 
  color: var(--text-main); 
  min-width: 38px; 
  text-align: right; 
}
.pulse-animation { animation: pulseBar 0.4s ease; }
@keyframes pulseBar { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* --- 4. FLASHCARD (3D FLIP) & LAYOUT --- */
.card-group { position: relative; z-index: 5; }
.card-container {
  perspective: 1000px; width: 100%; max-width: 400px; margin: 0 auto; position: relative;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10;
}
@media(min-width: 768px) { .card-container { max-width: 600px; } }

.card { 
  width: 100%; 
  height: 100%; 
  position: relative; 
  transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
  -webkit-font-smoothing: antialiased;
  cursor: pointer; 
  display: grid; 
  grid-template-columns: 1fr; 
  pointer-events: auto; 
  will-change: transform;
  transform: translateZ(0);
}
.card.no-flip-transition { transition: none !important; }
.card.flipped { transform: rotateY(180deg); }

.card-container.swipe-dragging { transition: none !important; }
.card-container.swipe-throw { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important; }
.swipe-float {
  transform-origin: center center;
  box-sizing: border-box;
}
.swipe-ghost { transform-origin: center center; }

.swipe-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 5;
  transform: translateZ(2px);
}
.swipe-overlay.swipe-right {
  background: transparent;
  border: 2px solid rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 8px 24px rgba(16, 185, 129, 0.18);
}
.swipe-overlay.swipe-left {
  background: transparent;
  border: 2px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25), 0 8px 24px rgba(239, 68, 68, 0.16);
}

.learned-popup-floating {
  position: fixed;
  top: 68px;
  left: calc(100% - 28px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translate(calc(-100% + 8px), calc(-100% - 4px)) scale(0.96);
  transform-origin: top right;
  opacity: 0;
  padding: 7px 10px;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  pointer-events: none;
  z-index: 4000;
  color: #526173;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.learned-popup-icon {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}
.learned-popup-label {
  white-space: nowrap;
}
.learned-popup-floating.is-learned { 
  color: #0f766e;
  border-color: rgba(16, 185, 129, 0.24);
}
.learned-popup-floating.is-learned .learned-popup-icon {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}
.learned-popup-floating.is-unlearned { 
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.22);
}
.learned-popup-floating.is-unlearned .learned-popup-icon {
  background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
}
.learned-popup-floating.show { opacity: 1; transform: translate(calc(-100% + 8px), -100%) scale(1); }

body.dark-mode .learned-popup-floating {
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: max(122px, env(safe-area-inset-bottom) + 98px);
  transform: translate(-50%, 8px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  z-index: 4200;
  padding: 10px 16px;
  min-width: min(62vw, 180px);
  max-width: min(84vw, 320px);
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  color: #526173;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.2s ease, transform 0.22s ease;
}
.app-toast.is-strong {
  color: #4f6478;
  background: rgba(248, 250, 252, 0.98);
  border-color: rgba(148, 163, 184, 0.42);
  box-shadow: 0 10px 26px rgba(148, 163, 184, 0.14);
}
.app-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

body.dark-mode .app-toast {
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
body.dark-mode .app-toast.is-strong {
  color: #dbeafe;
  background: rgba(24, 34, 48, 0.96);
  border-color: rgba(148, 163, 184, 0.36);
}

.card__face {
  grid-area: 1 / 1; 
  width: 100%; 
  height: 100%; 
  min-height: 280px; 
  backface-visibility: hidden; 
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  background: #ffffff !important; 
  backdrop-filter: none !important; 
  -webkit-backdrop-filter: none !important; 
  border: none;
  box-shadow: var(--shadow-lg) !important; 
  display: grid; 
  place-items: center; 
  text-align: center; 
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  overflow: hidden;
      transition: box-shadow 0.2s ease !important;
}
    .card.is-pressed .card__face {
      box-shadow: 0 0 0 4px var(--primary), 0 12px 36px rgba(255, 158, 181, 0.3) !important;
    }
.card__face--front { transform: translateZ(1px); }
.card__face--back { transform: rotateY(180deg) translateZ(1px); background: #ffffff; }

/* 🌟 CONTAINER QUERY FIX */
.face-content {
  /* container-type is GONE from here! */
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; 
  transition: opacity 0.3s, transform 0.3s; padding: 20px; overflow-y: auto; overflow-x: hidden;
}

.vocab-content { opacity: 1; transform: scale(1); }
.example-content { opacity: 0; transform: scale(0.95); pointer-events: none; }
.card.showing-example .vocab-content { opacity: 0; transform: scale(1.05); }
.card.showing-example .example-content { opacity: 1; transform: scale(1); pointer-events: auto; }

/* 🌟 FLEX CENTERING FIX */
.hanzi-display { 
  font-family: 'twkai', 'Noto Serif TC', serif; 
  line-height: 1.1; 
  font-weight: 500; 
  color: var(--text-main);
  
  display: block; 
  text-align: center; 
  
  width: 100%; 
  margin: 0 auto;
  word-wrap: break-word; 
  overflow-wrap: break-word; 
  max-width: 100%;
}
.pinyin-display { font-size: 1.6rem; color: var(--pinyin-ink); font-weight: 700; margin-bottom: 0.5rem; }
.def-display { font-size: 1.3rem; color: var(--text-muted); font-weight: 500; }
.example-zh { font-family: 'twkai', 'Noto Serif TC', serif !important; color: var(--text-main); line-height: 1.28; font-weight: 400 !important; }
.example-py { color: var(--pinyin-ink); font-size: 0.82rem; font-weight: 600; margin-bottom: 3px; letter-spacing: 0.35px; }
.example-en { color: var(--text-muted); font-size: 0.82rem; font-style: normal; line-height: 1.3; font-weight: 400; }
.study-static-wrapper .example-zh { font-size: 1.12rem; line-height: 1.3; }
.study-static-wrapper .example-py { font-size: 0.88rem; }
.study-static-wrapper .example-en { font-size: 0.88rem; line-height: 1.36; }

#charDisplay, .list-hanzi, .word-chip { font-family: 'twkai', 'Noto Serif TC', serif !important; }
.list-hanzi { font-size: 1.6rem; font-weight: bold; margin-right: 10px; }

/* Side Navigation Arrows */
.nav-zone { position: relative; width: auto; min-width: 80px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; pointer-events: auto; flex-shrink: 0; }
.nav-zone.left { justify-content: flex-end; padding-right: 10px; }
.nav-zone.right { justify-content: flex-start; padding-left: 10px; }
.nav-arrow { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 10px rgba(255, 158, 181, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); opacity: 0.7; transform: scale(1); transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.7); }
.nav-zone:hover .nav-arrow { opacity: 1; transform: scale(1.15); background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 20px rgba(236, 72, 153, 0.25); color: var(--primary-dark); }
.nav-zone:active .nav-arrow { transform: scale(0.95); background: white; }

/* --- 5. BUTTONS & CONTROLS --- */
.controls { display: flex; justify-content: center; gap: 20px; margin-top: 2rem; }
.btn-main { background: linear-gradient(135deg, #ffc2d6 0%, #ff9eb5 100%); color: white; border: none; padding: 14px 32px; border-radius: 50px; font-weight: 700; font-size: 16px; box-shadow: 0 8px 20px rgba(255, 179, 198, 0.3); cursor: pointer; transition: all 0.2s; }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(255, 179, 198, 0.4); }
.btn-main:active { transform: scale(0.96); }
.btn-sec { background: white; color: var(--text-main); border: none; padding: 14px 24px; border-radius: 50px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 158, 181, 0.1); }
.btn-sec:active { transform: scale(0.96); }


/* --- 7. SOFT CLOUD DOCK 2.0 (ULTRA-CLEAN) --- */
.bottom-nav {
  position: fixed;
  bottom: clamp(14px, 3.2vh, 28px);
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  display: flex;
  align-items: center;
  gap: 4px; 
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 28px rgba(255, 158, 181, 0.08), 0 4px 10px rgba(148, 163, 184, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 26px;
  padding: 6px;
  z-index: 100;
  will-change: transform, opacity;
}

body.dock-hidden .bottom-nav {
  transform: translate3d(-50%, 140%, 0) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

body.dock-hidden #app {
  padding-bottom: 20px;
}

.dock-show-btn {
  position: fixed;
  bottom: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-main);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 6px 14px rgba(255, 158, 181, 0.12);
  cursor: pointer;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

body.dock-hidden .dock-show-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

body.focus-mode .dock-show-btn {
  display: none;
}

.dock-hide-btn {
  position: fixed;
  bottom: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-main);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 6px 14px rgba(255, 158, 181, 0.12);
  cursor: pointer;
  z-index: 120;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

body.dock-hidden .dock-hide-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
}

body.focus-mode .dock-hide-btn {
  display: none;
}

/* Base Nav Item */
.nav-item {
  all: unset; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 58px;
  border-radius: 18px;
  padding: 8px 10px 7px;
  cursor: pointer;
  color: #a89dac; 
  background: transparent;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.nav-item.dock-toggle {
  display: none;
}

.nav-item:active {
  transform: translate3d(0, 1px, 0) scale(0.97);
}

.nav-item:hover {
  color: var(--primary-dark);
}

.nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; 
  height: 18px;
}

.nav-icon-wrap svg {
  width: 100%;
  height: 100%;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
  transform: translate3d(0, 0, 0);
}

.nav-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.68rem;
  font-weight: 800; 
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.72;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.72); 
  color: var(--primary-dark); 
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 6px 14px rgba(255, 158, 181, 0.08);
  transform: translate3d(0, -1px, 0);
}

.nav-item.active .nav-icon-wrap svg {
  transform: translate3d(0, -1px, 0) scale(1.04);
}

.nav-item.active .nav-label {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.nav-popup { 
  position: absolute; 
  transform: translateX(-50%) scale(0.95); 
  transform-origin: bottom center; 
  background: rgba(255, 255, 255, 0.98) !important; 
  border: 1px solid rgba(255, 255, 255, 1) !important; 
  border-radius: 20px !important; 
  box-shadow: 0 8px 18px rgba(255, 158, 181, 0.1) !important; 
  padding: 8px !important; 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.2s ease, transform 0.2s ease; 
  z-index: 1000; 
  min-width: 150px; 
  margin-bottom: 12px;
}
.nav-popup.active { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }

.nav-popup-btn { 
  background: transparent; border: none !important; padding: 10px 14px; 
  border-radius: 12px !important; color: var(--text-main); font-weight: 700; 
  font-family: 'Nunito', sans-serif; font-size: 0.9rem; cursor: pointer; 
  transition: all 0.2s ease; text-align: left; 
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.nav-popup-btn:hover { background: var(--primary-soft) !important; color: var(--primary-dark); }
.nav-popup-btn.active { background: var(--primary-soft) !important; color: var(--primary-dark) !important; }
.nav-popup-btn svg { width: 18px; height: 18px; opacity: 0.7; }
.nav-popup-btn.active svg { opacity: 1; }
.nav-popup-hanzi-icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif TC', 'twkai', serif;
  font-size: 1.08rem;
  line-height: 1;
  opacity: 0.78;
}
.nav-popup-btn.active .nav-popup-hanzi-icon { opacity: 1; }

/* --- 8. QUIZ & LISTENING MODES --- */
.quiz-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.quiz-content { width: 100%; display: flex; flex-direction: column; align-items: center; }
.quiz-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); font-weight: 800; margin-bottom: 1rem; }

.modal-close {
    all: unset !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    background: #ffffff !important;
    color: var(--text-main) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 158, 181, 0.12) !important;
    box-shadow: 0 4px 12px rgba(255, 158, 181, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}

@media (hover: hover) and (pointer: fine) {
    .modal-close:hover {
        transform: scale(1.1) rotate(90deg) !important;
        color: var(--primary) !important;
        box-shadow: 0 6px 16px rgba(255, 158, 181, 0.2) !important;
    }
}
.quiz-input, .listening-input { 
  width: 100%; 
  max-width: 100%; 
  padding: 18px 24px; 
  border-radius: 24px !important; 
  border: 2px solid rgba(255, 255, 255, 0.4) !important; 
  background: rgba(255, 255, 255, 0.95) !important; 
  text-align: center; 
  font-size: 1.3rem; 
  font-family: 'Nunito', sans-serif; 
  color: var(--text-main) !important; 
  font-weight: 800; 
  letter-spacing: 1px;
  outline: none; 
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; 
  box-shadow: 0 4px 12px rgba(255, 158, 181, 0.12) !important; 
}

/* Remove the duplicate/legacy close button in the dictionary modal */
#charModal > .modal-close, #charModal .modal-sheet > .modal-close { display: none !important; }

.quiz-input::placeholder, .listening-input::placeholder {
  color: rgba(180, 170, 181, 0.6);
  font-weight: 600;
  letter-spacing: 0;
  transition: opacity 0.3s ease;
}

.quiz-input:focus::placeholder, .listening-input:focus::placeholder { opacity: 0.3; }

.quiz-input:focus, .listening-input:focus { 
  background: rgba(255, 255, 255, 1) !important; 
  border-color: rgba(255, 158, 181, 0.6) !important; 
  box-shadow: 0 10px 24px rgba(255, 158, 181, 0.12), 0 0 0 3px rgba(255, 158, 181, 0.06) !important; 
  transform: translateY(-2px) scale(1.01); 
  color: var(--primary-dark) !important; 
}
.quiz-reveal-box { margin-top: 24px; padding: 20px; background: rgba(255, 255, 255, 0.98); border-radius: 24px; box-shadow: 0 6px 16px rgba(255, 158, 181, 0.12); width: 100%; text-align: left; display: none; animation: slideUp 0.3s ease forwards; border: 1px solid transparent; }
.quiz-reveal-box.correct { background: #f0fdf4; border-color: #bbf7d0; } .quiz-reveal-box.wrong { background: #fff1f2; border-color: #fecdd3; }

/* 🌟 QUIZ GLOBAL STYLES */
.qz-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 100%; padding: 18px; box-sizing: border-box; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.qz-card { width: 100%; max-width: 480px; background: #ffffff; border-radius: 28px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); padding: 35px 25px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(0,0,0,0.03); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; }
.qz-card--typing {
  max-width: 360px;
  padding: 28px 20px 34px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 254, 254, 0.96), rgba(250, 251, 252, 0.96));
  border: 1px solid rgba(232, 236, 241, 0.95);
  box-shadow: 0 14px 28px rgba(148, 163, 184, 0.08), 0 4px 10px rgba(15, 23, 42, 0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-radius 0.22s ease, padding 0.22s ease;
}
.qz-label { font-family: 'Nunito', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #b8adb8; margin-bottom: 10px; transition: all 0.3s; }
.qz-prompt { 
  font-size: 4.5rem; 
  line-height: 1.2; 
  color: var(--text-main); 
  text-align: center; 
  word-break: break-word; 
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
  margin-bottom: 25px; 
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}.qz-card--typing .qz-prompt { width: 100%; margin: 0 auto 18px; color: #5f5a62; box-sizing: border-box; }
.qz-card--typing[data-prompt-type="hz"] .qz-prompt {
  font-size: clamp(4.2rem, 18vw, 6.6rem);
  line-height: 1.03;
  width: 100%;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: normal;
  padding: 0.08em 0.24em 0.14em;
}
.qz-card--typing[data-prompt-type="hz"] .qz-prompt.chars-3 {
  font-size: clamp(3.4rem, 13vw, 4.9rem);
}
.qz-card--typing[data-prompt-type="hz"] .qz-prompt.chars-long {
  font-size: clamp(2.45rem, 10vw, 3.5rem);
  line-height: 1.1;
}
.qz-card--typing[data-prompt-type="py"] .qz-prompt {
  width: min(100%, 12ch);
  font-size: clamp(1.05rem, 3.2vw, 1.3rem) !important;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #8c8790;
}
.qz-card--typing[data-prompt-type="def"] .qz-prompt {
  width: min(100%, 18ch);
  font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
  line-height: 1.38;
  font-weight: 500;
  color: #6f6972;
}
.qz-prompt.chars-long { font-size: 2.2rem; }
.qz-prompt.chars-3 { font-size: 3rem; }
.qz-input-wrap { width: min(100%, 250px); position: relative; display: flex; flex-direction: column; gap: 8px; margin: 2px auto 0; }
.qz-input-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 8px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(203, 213, 225, 0.95);
  background: transparent;
  box-shadow: none;
  transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  box-sizing: border-box;
}
.qz-input {
  width: 100%;
  margin: 0;
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 0.96rem;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 1.3em;
  color: #6a646d;
  background: transparent;
  outline: none;
  transition: color 0.2s ease, transform 0.2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  letter-spacing: 0;
}
.qz-card-tag {
  position: absolute;
  right: 18px;
  bottom: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c3bac4;
  pointer-events: none;
}
.qz-card--typing[data-answer-type="py"] .qz-input {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.qz-input-wrap:focus-within .qz-input-shell {
  border-color: rgba(148, 163, 184, 0.98);
  transform: translateY(-1px);
}
.qz-input::placeholder { color: #c2bac4; font-weight: 500; font-size: 0.9rem; letter-spacing: 0; }
.qz-reveal-box {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 14px 10px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(232, 236, 241, 0.98);
}
.qz-reveal-box.is-visible {
  display: flex;
  animation: slideUpFade 0.22s ease both;
}
.qz-reveal-box.is-correct {
  border-color: rgba(167, 243, 208, 0.95);
  background: rgba(240, 253, 244, 0.92);
}
.qz-reveal-box.is-wrong {
  border-color: rgba(254, 205, 211, 0.95);
  background: rgba(255, 241, 242, 0.92);
}
.qz-reveal-head {
  font-family: 'Nunito', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b0a5b0;
}
.qz-reveal-hz {
  font-family: 'twkai', 'Noto Serif TC', serif;
  font-size: 2rem;
  line-height: 1;
  color: #5f5a62;
}
.qz-reveal-py {
  font-family: 'Nunito', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pinyin-ink);
}
.qz-reveal-def {
  font-family: 'Nunito', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-soft);
  text-align: center;
}
.qz-input.state-correct { color: #2f855a; }
.qz-input-wrap:has(.qz-input.state-correct) .qz-input-shell { border-color: rgba(134, 239, 172, 0.72); }
.qz-input.state-wrong { color: #b45367; animation: qz-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.qz-input-wrap:has(.qz-input.state-wrong) .qz-input-shell { border-color: rgba(251, 113, 133, 0.52); }
.qz-input.state-correct::placeholder, .qz-input.state-wrong::placeholder { color: transparent; }
@keyframes qz-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.qz-settings-btn { position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: #cbd5e1; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, transform 0.2s; z-index: 10; outline: none; }
.qz-settings-btn:hover { color: var(--primary); transform: scale(1.05); }
.qz-settings-popup { position: absolute; top: 50px; right: 16px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(255, 255, 255, 1); border-radius: 20px; box-shadow: 0 10px 30px rgba(255, 158, 181, 0.15); padding: 12px; display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1000; min-width: 140px; transform: translateY(-10px) scale(0.95); transform-origin: top right; }
.qz-settings-popup.active { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

/* 🌟 MULTIPLE CHOICE QUIZ MODE */
.mc-options-container {
    display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px;
    margin: 10px auto 0 auto; z-index: 20; flex-shrink: 0;
}
.mc-option-btn {
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid #e2e8f0; border-radius: 16px; padding: 11px 14px;
    font-family: 'Nunito', sans-serif; font-size: 0.92rem; font-weight: 600; color: #667085;
    cursor: pointer; transition: all 0.2s ease; text-align: center;
    box-shadow: none;
    line-height: 1.35; outline: none;
    white-space: normal;
    word-break: break-word;
}
@media (hover: hover) and (pointer: fine) {
    .mc-option-btn:hover {
        background: #ffffff; transform: translateY(-1px);
        box-shadow: none;
        border-color: rgba(203, 213, 225, 1);
        color: #4b5563;
    }
}
@media (max-width: 640px) {
    .mc-options-container {
        max-width: 280px;
    }
    .mc-option-btn {
        font-size: 0.84rem;
        line-height: 1.28;
        padding: 10px 12px;
    }
}
.mc-option-btn:active { transform: scale(0.97); }
.mc-option-btn.state-correct {
    background: #f0fdf4 !important; border-color: #6ee7b7 !important;
    color: #059669 !important; box-shadow: none !important;
    transform: scale(1.02);
}
.mc-option-btn.state-wrong {
    background: #fff1f2 !important; border-color: #fda4af !important; color: #e11d48 !important;
    animation: shake 0.4s ease-in-out;
}
.mc-option-btn.disabled { pointer-events: none; opacity: 0.6; }
.mc-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Listening Details */
.listening-shell { width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 10px 14px 16px; }
.listening-card-wrap {
    position: relative;
    width: min(100%, 560px);
    margin: auto 0;
}
.listening-card {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.94) !important;
    border-radius: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 36px rgba(216, 180, 193, 0.13), 0 6px 16px rgba(148, 163, 184, 0.07) !important;
}
.listening-content { padding: 20px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.listening-audio-deck {
    width: 100%;
    max-width: 440px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px 60px;
    gap: 0;
    align-items: stretch;
    padding: 6px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(234, 219, 225, 0.92);
    border-radius: 28px;
    box-shadow: 0 12px 28px rgba(216, 180, 193, 0.12), 0 4px 12px rgba(255, 158, 181, 0.05);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.listening-audio-separator {
    display: none;
}
.listening-audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-strong);
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.22s ease, color 0.22s ease;
    border: 1px solid rgba(234, 219, 225, 0.6) !important;
    box-shadow: 0 4px 10px rgba(216, 180, 193, 0.05) !important;
    background: rgba(248, 240, 244, 0.5) !important;
    border-radius: 20px !important;
}
.listening-audio-btn.is-word { 
    flex: 1;
    min-height: 76px; 
}
.listening-audio-btn.is-example { 
    flex: 0 0 76px; 
    height: 76px; 
}
.listening-audio-btn.is-disabled { opacity: 0.45; cursor: default; }
.listening-audio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-strong);
}
.listening-audio-icon svg { width: 24px; height: 24px; }
.listening-audio-btn.is-word .listening-audio-icon svg { width: 32px; height: 32px; flex-shrink: 0; }
.listening-audio-btn:hover { background: rgba(255, 255, 255, 0.9) !important; transform: translate3d(0, -2px, 0); box-shadow: 0 8px 20px rgba(216, 180, 193, 0.15) !important; }
.listening-audio-btn.playing { background: rgba(247, 236, 242, 0.96) !important; color: var(--primary-dark); }
.listening-audio-btn.is-disabled:hover { background: transparent !important; transform: none; }
.listening-answer-block { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.listen-options-grid { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; }
.listen-options-grid.tones { max-width: 440px; }
.listen-option-card {
    padding: 14px 16px;
    border-radius: 22px !important;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    animation: slideUpFade 0.6s backwards;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 6px 14px rgba(216, 180, 193, 0.08) !important;
    border: 1px solid rgba(232, 220, 226, 0.94) !important;
    color: var(--text-main);
}
@media (hover: hover) and (pointer: fine) {
    .listen-option-card:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(216, 180, 193, 0.14) !important; border-color: rgba(206, 189, 197, 0.94) !important; }
}
.listen-option-card:disabled { cursor: default; }
.listen-option-card.state-correct { background: rgba(240, 253, 244, 0.94) !important; color: #1f7a56 !important; border: 1px solid rgba(74, 222, 128, 0.65) !important; }
.listen-option-card.state-wrong { background: rgba(255, 241, 242, 0.96) !important; color: #b45367 !important; border: 1px solid rgba(251, 113, 133, 0.58) !important; animation: shake 0.4s; }
.listen-opt-main { font-family: 'Nunito', sans-serif; font-size: 1.05rem; color: currentColor; line-height: 1.32; font-weight: 700; }
.listen-option-card.mode-hz .listen-opt-main { font-family: 'twkai', 'Noto Serif TC', serif; font-size: 2.1rem; line-height: 1.08; font-weight: 400; }
.listen-option-card.mode-py .listen-opt-main { font-size: 1.18rem; color: var(--pinyin-ink); font-weight: 600; }
.listen-option-card.mode-def .listen-opt-main { font-size: 1.06rem; }
.listen-opt-sub { font-size: 0.84rem; color: var(--text-soft); line-height: 1.24; margin-top: 8px; }
.listen-opt-sub .interactive-char { color: inherit !important; }
.listening-reveal-box {
    width: min(100%, 420px);
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    border-radius: 22px;
    background: rgba(255,255,255,0.74);
    border: 1px solid transparent;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.24s ease, border-color 0.2s ease, background-color 0.2s ease, max-height 0.24s ease, padding 0.24s ease;
}
.listening-reveal-box.is-visible { max-height: 190px; padding: 12px 14px; opacity: 1; transform: translateY(0); border-color: rgba(233, 223, 228, 0.9); }
.listening-reveal-box.is-correct { background: rgba(240, 253, 244, 0.9); border-color: rgba(74, 222, 128, 0.45); }
.listening-reveal-box.is-wrong { background: rgba(255, 241, 242, 0.92); border-color: rgba(251, 113, 133, 0.42); }
.listening-reveal-head { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
.listening-reveal-hz { font-family: 'twkai', serif; font-size: 1.7rem; line-height: 1.08; color: var(--text-main); margin-top: 8px; }
.listening-reveal-py { font-size: 0.9rem; color: var(--pinyin-ink); font-weight: 700; margin-top: 6px; }
.listening-reveal-def { font-size: 0.84rem; color: var(--text-soft); line-height: 1.38; margin-top: 6px; }
@keyframes slideUpFade { 0% { opacity: 0; transform: translateY(20px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 767px) {
    .listening-shell { padding: 10px 10px 18px; }
    .listening-card-wrap { width: 100%; }
    .listening-card { width: 100%; border-radius: 28px !important; }
    .listening-content { padding: 16px 14px 16px; gap: 12px; }
    .listening-audio-deck { max-width: none; padding: 6px; gap: 8px; border-radius: 24px; }
    .listening-audio-btn { min-height: 64px !important; border-radius: 18px !important; }
    .listening-audio-btn.is-word { flex: 1; }
    .listening-audio-btn.is-example { flex: 0 0 64px; height: 64px; }
    .listening-answer-block { max-width: none; gap: 9px; }
    .listen-option-card { min-height: 78px; padding: 13px 12px; border-radius: 18px !important; }
    .listen-opt-main { font-size: 0.98rem; }
    .listen-option-card.mode-hz .listen-opt-main { font-size: 1.82rem; }
    .listen-option-card.mode-py .listen-opt-main { font-size: 1.05rem; }
    .listening-reveal-box { border-radius: 18px; }
    .listening-reveal-box.is-visible { max-height: 170px; }
}

/* --- 9. BUILDER MODE --- */
.builder-container { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 500px; margin: 0 auto; }
.builder-prompt { background: var(--glass); padding: 20px; border-radius: 20px; text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--text-main); box-shadow: var(--shadow-lg); }
.answer-area { min-height: 80px; background: rgba(255,255,255,0.6); border-radius: 20px; padding: 15px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; transition: all 0.3s; }
.answer-area.correct { background: #f0fdf4; border: 2px solid #34d399; } .answer-area.wrong { background: #fff1f2; border: 2px solid #fb7185; animation: shake 0.4s ease-in-out; }
.word-bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.word-chip { background: white; border: none; padding: 8px 14px; border-radius: 14px; font-size: 1.6rem; font-weight: 400; cursor: pointer; color: var(--text-main); font-family: 'twkai', 'Noto Serif TC', serif; transition: all 0.1s; user-select: none; }
.word-chip:active { transform: scale(0.97); } .word-chip.used { display: none; }

/* --- WRITING MODE POLISH --- */
.writing-controls { display: flex; gap: 12px; justify-content: center; width: 100%; margin-top: 20px; }
.writing-btn {
    background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 158, 181, 0.3);
    color: var(--text-main); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.95rem;
    padding: 12px 28px; border-radius: 100px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 158, 181, 0.08);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.writing-btn.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white; border: none; box-shadow: 0 6px 16px rgba(255, 158, 181, 0.25);
}
.writing-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
    .writing-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 158, 181, 0.2); color: var(--primary); border-color: var(--primary); }
    .writing-btn.primary:hover { color: white; box-shadow: 0 8px 25px rgba(255, 158, 181, 0.4); }
}

/* --- 10. MODALS, COURSES, & SETTINGS --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* A soft vignette effect */
  background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-sheet { 
    background: rgba(255, 255, 255, 0.98); 
    width: 100%; 
    border-radius: 24px 24px 0 0; 
    padding: 24px; 
    transform: translateY(100%); 
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
    max-width: 600px; 
    margin: 0 auto; 
    box-shadow: 0 18px 40px rgba(255, 158, 181, 0.18); 
    position: relative; 
}
.modal-overlay.open .modal-sheet { transform: translateY(0); }
.modal-content { overflow-y: auto; height: 100%; max-height: calc(100vh - 100px); padding-right: 10px; padding-bottom: 60px; }

.settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.setting-label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.settings-section-title { font-size: 0.8rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; padding-left: 12px; }
.setting-card { background: rgba(255,255,255,0.6); border-radius: 24px; overflow: hidden; box-shadow: 0 4px 20px rgba(255, 158, 181, 0.12); border: 1px solid rgba(255,255,255,0.8); }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(255, 158, 181, 0.12); }
.setting-name { font-weight: 700; color: var(--text-main); font-size: 1rem; }
.setting-desc { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; display: block; }

#charModal .modal-sheet, 
#settingsModal .modal-sheet,
.modal-sheet { 
    background: rgba(255, 255, 255, 0.98); 
    width: min(90vw, 540px);
    height: min(90vw, 580px);
    max-height: 90vh;
    border-radius: 32px; 
    padding: 32px; 
    box-shadow: 0 18px 40px rgba(255, 158, 181, 0.18); 
    position: relative !important; 
    overflow: visible !important;   
    display: flex;
    flex-direction: column;
    transform: scale(1); 
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


#charModalContent, #settingsModalContent {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}
.course-modal { background: rgba(255, 255, 255, 0.98); border-radius: 32px; padding: 24px; width: 90%; max-width: 420px; box-shadow: 0 12px 28px rgba(255, 158, 181, 0.18); border: 1px solid rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; gap: 20px; max-height: 80vh; animation: modalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes modalPop { 0% { opacity: 0; transform: scale(0.9) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
.book-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 4px; scrollbar-width: none; margin: 0 -4px; }
.book-tab { padding: 10px 20px; border-radius: 24px; background: rgba(255,255,255,0.5); color: var(--text-muted); font-weight: 700; cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: all 0.3s; font-size: 0.95rem; }
.book-tab:hover { background: white; color: var(--primary); transform: translateY(-2px); }
.book-tab.active { background: var(--primary); color: white; box-shadow: 0 4px 15px rgba(255, 158, 181, 0.4); transform: scale(1.05); }
.lesson-grid-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; overflow-y: auto; padding: 8px; flex: 1; }
.lesson-option { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.6); border: 2px solid transparent; border-radius: 20px; font-weight: 700; color: var(--text-main); cursor: pointer; transition: all 0.3s; font-size: 1.1rem; }
.lesson-option:hover { border-color: var(--primary-soft); color: var(--primary); background: white; transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(255, 158, 181, 0.2); }
.lesson-option.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 8px 25px rgba(255, 158, 181, 0.5); transform: scale(1.1); }
.lesson-option.all-opt { aspect-ratio: auto; grid-column: 1 / -1; padding: 14px; background: linear-gradient(135deg, #fff0f5 0%, #fff 100%); color: var(--primary); border-radius: 24px; }
.lesson-option.all-opt.active { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); } input:checked + .slider:before { transform: translateX(20px); }

/* 12. COMPONENT LAYOUTS */
.card-center-layout { margin: auto 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.memory-hook-card {
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(100%, 336px);
  margin-top: 12px;
  padding: 12px 14px 13px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.96);
  border: 1px solid rgba(203, 213, 225, 0.92);
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.09);
  text-align: left;
}
.memory-hook-label {
  display: block;
  margin-bottom: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}
.memory-hook-text {
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  line-height: 1.58;
  color: #334155;
}
.memory-hook-text .interactive-char {
  font-family: 'twkai', 'Noto Serif TC', serif;
  font-size: 1.18em;
  line-height: 1;
  vertical-align: -0.04em;
}
.memory-hook-text .hook-char-match {
  padding: 0 0.02em;
}
.example-section { margin-top: 18px; width: 100%; border-top: 1px dashed rgba(255, 117, 150, 0.2); padding-top: 16px; text-align: left; }
.example-section-title {
  font-family: 'Nunito', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 10px 0;
}
.example-groups { display: flex; flex-direction: column; gap: 14px; }
.example-group { border: 1px solid rgba(255, 158, 181, 0.12); border-radius: 14px; background: rgba(255,255,255,0.7); overflow: hidden; }
.example-group-header {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 158, 181, 0.08);
  gap: 8px;
}
.example-group-title {
  font-family: 'Nunito', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 0;
}
.example-group-cue {
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.5;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.example-group-cue svg { width: 14px; height: 14px; }
.example-group.expanded .example-group-cue { opacity: 0.85; }
.example-group-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.example-group.expanded .example-group-chevron { transform: rotate(90deg); color: var(--primary-dark); }
.example-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.example-group.expanded .example-group-body { grid-template-rows: 1fr; }
.example-group-inner { overflow: hidden; padding: 10px 12px 12px 12px; }
.example-list { display: flex; flex-direction: column; gap: 10px; }
.example-item {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 158, 181, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: none;
}
.example-item-meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.example-lesson-tag {
  font-family: 'Nunito', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 158, 181, 0.2);
  padding: 2px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(255, 158, 181, 0.12);
}
.example-item.is-primary {
  border-color: rgba(255, 158, 181, 0.3);
  box-shadow: none;
}
.anatomy-left-col {
    display: flex; flex-direction: column; gap: 0; width: 100%;
}
.anatomy-right-col {
    display: flex; flex-direction: column; gap: 0; width: 100%;
}

.screen-message { text-align: center; padding: 20px; }
.screen-icon { font-size: 4rem; margin-bottom: 10px; }
.screen-title { color: var(--text-main); margin-bottom: 10px; margin-top: 0; }
.screen-subtitle { color: var(--text-muted); margin-bottom: 30px; }
.button-group-vertical { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 280px; margin: 0 auto; }

/* 13. MODE SPECIFIC LAYOUTS */
.full-center-wrapper { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.relative-center-wrapper { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }

.study-center-box { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 20px 0; width: 100%; }
.study-static-wrapper { width: 100%; }
.study-desktop-shell {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.study-card-group { width: 100%; max-width: 380px; aspect-ratio: 1/1; position: relative; z-index: 5; }
.quiz-card-group { width: 100%; max-width: 360px; aspect-ratio: 1/1; position: relative; z-index: 5; margin: 0 auto; flex-shrink: 0; }
.study-card-container { width: 100%; height: 100%; position: relative; z-index: 10; overflow: visible; }
.study-mini-breakdown {
  display: none;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
}

.study-back-main { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding-bottom: 20px; }
.study-static-wrapper .card__face--back .face-content.vocab-content {
  position: relative;
  border-radius: inherit;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: auto;
  padding-bottom: 28px;
  background-clip: padding-box;
}
.study-back-core {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.face-content.vocab-content.is-dense {
  padding: 16px 16px 18px;
}
.face-content.vocab-content.is-very-dense {
  padding: 14px 14px 18px;
}
.study-back-main.is-dense {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 14px;
}
.study-back-main.is-very-dense {
  justify-content: center;
  padding-top: 0;
}
.study-back-main.is-very-dense .study-back-core {
  justify-content: center;
}
.study-pinyin-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.study-back-core .pinyin-display {
  color: var(--pinyin-ink);
}
.study-back-hook-slot {
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: center;
}
.study-meta-row {
  width: min(100%, 34ch);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  flex-wrap: wrap;
}
.study-meta-row--solo {
  display: block;
}
.study-meta-row--solo .study-def {
  width: min(100%, 29ch);
  margin-inline: auto;
}
.study-meta-row.has-pos .study-def {
  width: auto;
  max-width: min(100%, 24ch);
  margin-top: 0;
}
.study-meta-row--tags-only {
  width: min(100%, 100%);
}
.study-pos-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}
.face-content.vocab-content.is-dense .study-back-hook-slot {
  padding-top: 9px;
}
.face-content.vocab-content.is-very-dense .study-back-hook-slot {
  padding-top: 7px;
}
.face-content.vocab-content.is-dense .memory-hook-card {
  margin-top: 8px;
  padding: 10px 12px 11px;
}
.face-content.vocab-content.is-dense .memory-hook-text {
  font-size: 0.88rem;
  line-height: 1.5;
}
.face-content.vocab-content.is-very-dense .memory-hook-card {
  margin-top: 7px;
  padding: 9px 11px 10px;
}
.face-content.vocab-content.is-very-dense .memory-hook-text {
  font-size: 0.84rem;
  line-height: 1.44;
}
.study-def {
  width: auto;
  max-width: min(100%, 29ch);
  margin-top: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.14rem);
  line-height: 1.46;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  text-align: center;
}
.study-def--compact {
  width: min(100%, 32ch);
  font-size: clamp(0.92rem, 2.1vw, 1.02rem);
  line-height: 1.42;
}
.study-back-main.is-dense .study-def {
  margin-top: 0;
  max-width: min(100%, 31ch);
}
.study-back-main.is-very-dense .study-def {
  margin-top: 0;
  font-size: clamp(0.84rem, 2vw, 0.92rem);
  line-height: 1.34;
}

.sentence-card-container { flex: 1; width: 100%; max-width: 480px; aspect-ratio: 1.8 / 1; position: relative; z-index: 5; min-width: 0; }

.quiz-card-inner { transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); height: 100%; width: 100%; }
.quiz-input-container { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; margin-bottom: 20px; }
.quiz-reveal-py { font-size: 1.2rem; margin-bottom: 6px; font-weight: 700; }
.quiz-reveal-def { font-size: 1rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; padding: 0 12px; opacity: 0.8; font-weight: 500; color: var(--text-muted); }

.anatomy-master-container {
    display: flex; flex-direction: column; width: 100%;
    padding: 0; max-width: 460px; margin: 0 auto;
    position: relative;
}

.anatomy-hero-section { text-align: center; margin-bottom: 36px; display: flex; flex-direction: column; align-items: center; }
.hero-py { font-family: 'Nunito', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--pinyin-ink); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--panel-line); padding: 4px 16px; border-radius: 12px; display: inline-block; margin-bottom: 12px; letter-spacing: 1px; }
.hero-def { font-family: 'Nunito', sans-serif; font-size: 1.15rem; color: var(--text-strong); font-weight: 600; margin-top: 0; line-height: 1.6; }

.standalone-banner { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; cursor: default; }
.standalone-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 158, 181, 0.12) !important; }

.standalone-banner-wrapper {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    cursor: pointer;
}
.standalone-banner-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 158, 181, 0.12) !important;
}
.standalone-banner-wrapper:active {
    transform: scale(0.98);
}
.sb-body-wrapper {
    display: grid; 
    grid-template-rows: 0fr; 
    transition: grid-template-rows 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.standalone-banner-wrapper.expanded .sb-body-wrapper {
    grid-template-rows: 1fr;
}
.sb-chevron {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.standalone-banner-wrapper.expanded .sb-chevron {
    transform: rotate(90deg);
}

.static-fallback-char {
    font-size: 8rem; font-family: 'twkai', 'Noto Serif TC', serif; line-height: 1.2;
    text-shadow: none;
    animation: fadeInScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    text-align: center; margin: 10px auto;
    color: var(--text-main);
}

.dna-section-title { font-family: 'Nunito', sans-serif; font-size: 0.8rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; padding-left: 12px; text-align: left; }
.anatomy-bento-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px;}
.bento-node { background: #ffffff; border-radius: 24px; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); overflow: clip; transition: border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); transform: translateZ(0); backface-visibility: hidden; }
.bento-node:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); border-color: #cbd5e1; }
.bento-node.expanded { transform: translate3d(0, -1px, 0); }
.bento-header { display: flex; align-items: center; padding: 18px 24px; gap: 16px; transform: translateZ(0); }
.bento-icon-hz { font-family: 'twkai', serif; font-size: 2.2rem; color: var(--text-strong); width: 40px; text-align: center; line-height: 1; transition: color 0.2s ease; }
.bento-meta { display: flex; flex-direction: column; flex: 1; text-align: left; }
.bento-py { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 800; color: var(--pinyin-ink); }
.bento-def { font-family: 'Nunito', sans-serif; font-size: 0.9rem; color: var(--text-soft); margin-top: 2px; }
.bento-chevron { color: #cbd5e1; transition: transform 0.3s; }
.bento-node.expanded .bento-chevron { transform: rotate(90deg); color: var(--primary); }

.bento-body-wrapper {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    background: #f8fafc;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.bento-node.expanded .bento-body-wrapper {
    opacity: 1;
}
.bento-body-inner { overflow: clip; transform: translateZ(0); }

.sub-component-list { list-style: none; padding: 12px 12px 16px 12px; margin: 0; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(255, 158, 181, 0.12); }
.sub-component-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); cursor: pointer; user-select: none;}
.sub-component-item:hover { background: rgba(255, 158, 181, 0.08); }
.sub-component-item:active { transform: scale(0.98); background: rgba(255, 158, 181, 0.15); }
.sub-component-item.active-preview { background: rgba(120, 108, 121, 0.08); }
.sub-component-item.active-preview .sub-hz { color: var(--text-strong); transform: scale(1.08); }
.sub-component-item .sub-hz { font-family: 'twkai', serif; font-size: 1.3rem; color: var(--text-main); width: 24px; text-align: center; font-weight: 400; transition: all 0.2s; }
.sub-component-item .sub-def { font-family: 'Nunito', sans-serif; font-size: 0.9rem; color: #475569; font-weight: 600; text-align: left;}
.sub-component-item.has-vocab { border-left: 3px solid var(--accent); background: rgba(255, 255, 255, 0.85); }
.bento-node.has-vocab .bento-header { border-left: 3px solid var(--accent); padding-left: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.85); }
.vocab-suggest-tag { margin-left: auto; font-family: 'Nunito', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); }

.appears-in-row { padding: 12px 20px; border-top: 1px solid rgba(255, 158, 181, 0.12); display: flex; align-items: center; gap: 10px; background: rgba(255,158,181,0.03);}
.appears-label { font-family: 'Nunito', sans-serif; font-size: 0.7rem; font-weight: 800; color: var(--text-soft); text-transform: uppercase; letter-spacing: 1px; display:flex; align-items:center; gap:6px; cursor:pointer; transition: color 0.18s ease; }
.appears-list { display: flex; gap: 6px; flex-wrap: wrap; }
.appears-node-wrap { display: inline-flex; align-items: center; gap: 4px; }
.appears-node { font-family: 'twkai', serif; font-size: 1.2rem; color: var(--text-main); }
.appears-tag { font-family: 'Nunito', sans-serif; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 1px 5px; border-radius: 999px; border: 1px solid; opacity: 0.85; }
.appears-label.interactive-char:hover,
.appears-label.interactive-char:hover svg { color: var(--text-strong) !important; }
.lookup-sound-hint {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    color: var(--text-soft);
    font-weight: 600;
    margin-top: 4px;
}
.lookup-sound-char {
    cursor: pointer;
    color: var(--text-strong) !important;
    font-family: 'twkai', serif;
    font-size: 1.2rem;
    margin: 0 2px;
    font-weight: 400;
}
.lookup-sound-char.interactive-char:hover,
.appears-node.interactive-char:hover {
    color: var(--text-strong) !important;
}

.hook-card { background: #fff0f5; border: 1px solid rgba(255, 158, 181, 0.3); border-radius: 24px; padding: 24px; display: flex; align-items: flex-start; gap: 16px; text-align: left; position: relative; }
.hook-text { flex: 1; font-family: 'Nunito', sans-serif; font-size: 0.95rem; line-height: 1.5; color: var(--text-main); }
.hook-edit-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 8px; transition: 0.2s; }
.hook-edit-btn:hover { background: white; color: var(--primary); }
.hook-textarea { width: 100%; border: 1px solid rgba(255,158,181,0.3); border-radius: 12px; padding: 10px; font-family: 'Nunito', sans-serif; font-size: 0.95rem; resize: none; min-height: 70px; outline: none; margin-bottom: 8px;}
.hook-actions { display: flex; justify-content: flex-end; gap: 8px; }

.clean-vocab-list { border: none; border-top: 1px solid #e2e8f0; border-radius: 0; margin-top: 0; background: #ffffff; overflow: hidden; }
.clean-vocab-item { display: flex; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #f1f5f9; background: white; align-items: center; transition: background 0.2s; }
.clean-vocab-item:hover { background: #f8fafc; }
.clean-vocab-item:last-child { border-bottom: none; }
.cv-left { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; }
.cv-hz { font-family: 'twkai', serif; font-size: 1.8rem; color: var(--text-main); line-height: 1; }
.cv-tag { display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; font-size: 0.65rem; font-weight: 800; margin-top: 8px; padding: 4px 8px; border-radius: 8px; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(255, 158, 181, 0.12); line-height: 1; }
.cv-right { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1; min-width: 0; border-left: 1px solid rgba(255, 158, 181, 0.12); padding-left: 16px; }
.cv-py { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 800; color: var(--pinyin-ink); line-height: 1; }
.cv-def { font-family: 'Nunito', sans-serif; font-size: 0.9rem; color: var(--text-soft); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ios17-component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: 12px; padding: 4px; }
.ios17-grid-card { background: #ffffff; border: 1px solid rgba(255, 158, 181, 0.12); box-shadow: 0 2px 8px rgba(255, 158, 181, 0.12); border-radius: 16px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transform: translate3d(0, 0, 0); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; }
.ios17-grid-card:active { transform: scale(0.96); }
.ios17-grid-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 158, 181, 0.12); border-color: rgba(255, 158, 181, 0.3); }
.grid-hz { font-family: 'twkai', serif; font-size: 2rem; color: var(--text-main); line-height: 1; margin-bottom: 6px; transition: color 0.15s; }
.ios17-grid-card:hover .grid-hz { color: var(--text-strong); }
.grid-py { font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 800; color: var(--pinyin-ink); line-height: 1.2; }
.grid-def { font-family: 'Nunito', sans-serif; font-size: 0.75rem; color: var(--text-soft); font-weight: 600; line-height: 1.2; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.component-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px; }
.component-tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 158, 181, 0.12); background: #ffffff; box-shadow: 0 2px 8px rgba(255, 158, 181, 0.08); cursor: pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s; min-width: 0; }
.component-tile:active { transform: scale(0.98); }
.component-tile:hover { box-shadow: 0 6px 16px rgba(255, 158, 181, 0.12); border-color: rgba(255, 158, 181, 0.3); }
.component-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.component-py { font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 800; color: var(--pinyin-ink); line-height: 1.1; }
.component-hz { font-family: 'twkai', serif; font-size: 1.6rem; color: var(--text-main); line-height: 1; }
.component-def { font-family: 'Nunito', sans-serif; font-size: 0.8rem; color: var(--text-soft); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.component-vocab-tag { position: absolute; top: 6px; right: 6px; font-family: 'Nunito', sans-serif; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; padding: 2px 5px; border-radius: 999px; border: 1px solid; opacity: 0.75; background: rgba(255, 255, 255, 0.9); }
.component-tile .component-vocab-tag { position: static; margin-left: auto; opacity: 0.85; }
.component-group-list { display: flex; flex-direction: column; gap: 12px; }
.component-group { display: flex; flex-direction: column; gap: 6px; }
.component-group-header { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 0 !important; background: transparent !important; border: none !important; cursor: pointer; user-select: none; margin-bottom: 16px !important; }
.cg-badge { background: var(--group-bg, #f1f5f9); color: var(--group-color, #64748b); padding: 4px 12px; border-radius: 8px; font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.cg-line { flex: 1; height: 2px; background: rgba(0,0,0,0.04); border-radius: 2px; }
.component-group-chevron { color: #cbd5e1; transition: transform 0.3s ease; }
.component-group.collapsed .component-grid { display: none; }
.component-group.collapsed .component-group-chevron { transform: rotate(-90deg); }

.network-accordion { background: #ffffff; border-radius: 24px; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); margin-bottom: 24px; overflow: hidden; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.network-accordion.expanded { border-color: #cbd5e1; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); }
.network-accordion-header { display: flex; justify-content: space-between; align-items: center; font-family: 'Nunito', sans-serif; font-size: 0.9rem; font-weight: 800; color: #475569; padding: 20px 24px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; background: #f8fafc; border-bottom: 1px solid transparent; transition: all 0.3s; }
.network-accordion.expanded .network-accordion-header { border-bottom-color: #e2e8f0; background: #ffffff; }
.network-chevron { color: #94a3b8; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.network-accordion.expanded .network-chevron { transform: rotate(180deg); }
.network-accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.network-accordion.expanded .network-accordion-body { grid-template-rows: 1fr; }
.network-accordion-inner { overflow: hidden; }

/* LOADING SCREEN CSS */
.hq-loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.96); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.7s cubic-bezier(0.8, 0, 0.2, 1), transform 0.7s cubic-bezier(0.8, 0, 0.2, 1); will-change: opacity, transform; }
.hq-loader.fade-out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.hq-loader-content { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: hqFloatIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; width: 100%; text-align: center; }
@keyframes hqFloatIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.hq-logo-wrapper { display: flex; justify-content: center; margin-bottom: 24px; filter: drop-shadow(0 10px 20px rgba(255, 158, 181, 0.3)); }
.hq-brand-title { font-family: 'Nunito', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--text-main); margin: 0 0 30px 0; letter-spacing: -0.5px; text-align: center; width: 100%; }
.hq-progress-container { width: 200px; margin: 0 auto 16px auto; }
.hq-progress-track { width: 100%; height: 6px; background: rgba(255, 158, 181, 0.15); border-radius: 10px; overflow: hidden; }
.hq-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); border-radius: 10px; transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hq-loading-text { font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; height: 20px; transition: opacity 0.3s ease; text-align: center; width: 100%; }

body.focus-mode .bottom-nav { transform: translate(-50%, 150%) scale(0.9) !important; opacity: 0 !important; pointer-events: none !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
body.focus-mode div#app { max-width: none; width: 100vw; margin: 0; padding-left: clamp(12px, 2vw, 24px) !important; padding-right: clamp(12px, 2vw, 24px) !important; padding-top: max(85px, env(safe-area-inset-top) + 70px) !important; padding-bottom: max(20px, env(safe-area-inset-bottom) + 10px) !important; overflow: hidden !important; }
#writingAppWrapper { padding-top: 0 !important; }

/* 🌟 CLEAN, NATIVE INTERACTIVE WORD CLASSES */
.interactive-char, .interactive-word { cursor: pointer; display: inline-block; transition: color 0.15s ease, background-color 0.15s ease; position: relative; z-index: 2; border-radius: 6px; }
.interactive-char:hover { color: var(--primary) !important; }
.hanzi-display .interactive-char:hover { text-shadow: none; }
.pinyin-token { color: color-mix(in srgb, var(--py-color, var(--primary)) 58%, var(--pinyin-ink) 42%) !important; }
.pinyin-sep { opacity: 0.68; }
.example-zh .interactive-char {
  padding: 0.08em 0.06em;
  margin: -0.08em -0.01em;
  border-radius: 8px;
}
.interactive-word { padding: 0 4px; margin: 0 -2px; }
.interactive-word:hover { background: rgba(255, 158, 181, 0.15); color: var(--primary-dark) !important; box-shadow: none; }
.interactive-word.highlighted { color: #a2a2fd; font-weight: bold; }
.interactive-word.highlighted:hover { background: #eef2ff; color: #6366f1 !important; box-shadow: none; }

/* 🌟 FLAT NATIVE iOS LIST ROW */
.native-list-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 158, 181, 0.12); background: transparent; cursor: pointer; transition: background 0.2s; }
.native-list-row:last-child { border-bottom: none; }
.native-list-row:active { background: rgba(255, 158, 181, 0.12); }
.nlr-hz-large { font-family: 'twkai', serif; font-size: 2.2rem; color: var(--text-main); line-height: 1; min-width: 48px; text-align: center; }
.nlr-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nlr-py { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 800; color: var(--pinyin-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlr-en { font-family: 'Nunito', sans-serif; font-size: 0.9rem; color: #64748b; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nlr-meta { font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 700; color: #94a3b8; white-space: nowrap; }

/* 🌟 Rank Sticker */
.rank-sticker { position: absolute; top: -8px; left: -8px; padding: 3px 10px; border-radius: 8px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; color: white; box-shadow: 0 2px 8px rgba(255, 158, 181, 0.12); transform: rotate(-5deg); z-index: 9999; border: 1.5px solid white; pointer-events: none; }
.rank-very-common { background: #10b981; } .rank-common { background: #3b82f6; } .rank-uncommon { background: #f59e0b; } .rank-rare { background: #ef4444; }

/* 🌟 PROFESSIONAL LIST MODE */
.prof-list-board { background: rgba(255, 255, 255, 0.98); border-radius: 28px; box-shadow: 0 8px 18px rgba(255, 158, 181, 0.1), 0 0 0 1px rgba(255,255,255,0.6) inset; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }
.prof-search-header { padding: 20px 20px 16px 20px; background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 158, 181, 0.12); z-index: 10; }
.prof-search-wrapper { position: relative; width: 100%; }
.prof-list-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.prof-list-action-btn { border: none; border-radius: 999px; background: #f8c7d5; color: #7c2d42; font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 800; padding: 8px 12px; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.prof-list-action-btn:hover { background: #f4b3c6; }
.prof-list-action-btn:active { transform: scale(0.97); }
.prof-list-action-btn.is-hidden { display: none; }
.prof-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; }
.prof-search-input { width: 100%; padding: 12px 16px 12px 44px; border-radius: 14px; border: 2px solid transparent; background: #f1f5f9; font-family: 'Nunito', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-main); outline: none; transition: all 0.2s ease; }
.prof-search-input:focus { background: #ffffff; border-color: var(--primary); box-shadow: 0 4px 20px rgba(255,158,181,0.15); }
.prof-search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: #cbd5e1; border: none; border-radius: 50%; width: 22px; height: 22px; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s; }
.prof-search-clear:hover { background: #94a3b8; }
.prof-list-scroll { flex: 1; overflow-y: auto; padding-bottom: 80px; scrollbar-width: none; }
.prof-list-scroll::-webkit-scrollbar { display: none; }
.prof-list-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 158, 181, 0.12); background: transparent; cursor: pointer; transition: background 0.2s ease; }
.prof-list-row:last-child { border-bottom: none; }
.prof-list-row:hover { background: rgba(248, 250, 252, 0.8); }
.prof-list-row:active { background: rgba(241, 245, 249, 0.9); transform: scale(0.98); }
.prof-list-row.is-selectable { padding-left: 14px; }
.prof-list-row.is-selected { background: rgba(255, 228, 236, 0.92); }
.prof-select-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #f1a7bc; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: white; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); }
.prof-select-check.is-selected { background: #ec4899; border-color: #ec4899; }
.prof-select-check-dot { width: 8px; height: 8px; border-radius: 50%; background: white; opacity: 0; transition: opacity 0.15s ease; }
.prof-select-check.is-selected .prof-select-check-dot { opacity: 1; }
.prof-hz-large { font-family: 'twkai', serif; font-size: 2.2rem; color: var(--text-main); line-height: 1; min-width: 48px; text-align: center; }
.prof-hz-sentence { font-size: 1.15rem; color: var(--text-main); margin-bottom: 4px; line-height: 1.4; }
.prof-row-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.prof-py { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 800; color: var(--pinyin-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-en { font-family: 'Nunito', sans-serif; font-size: 0.9rem; color: #64748b; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prof-tag { font-family: 'Nunito', sans-serif; font-size: 0.7rem; font-weight: 800; padding: 4px 8px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 4px rgba(255, 158, 181, 0.12); }

/* 🌟 CUTE UNSTABLE / MAINTENANCE SCREEN */
.unstable-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 30px; background: rgba(255, 255, 255, 0.98); border-radius: 36px; box-shadow: 0 10px 22px rgba(255, 158, 181, 0.12); max-width: 85vw; width: 340px; margin: auto; border: 2px dashed rgba(255, 158, 181, 0.6); }
.unstable-icon { font-size: 4rem; margin-bottom: 12px; animation: bounceSoft 2s infinite ease-in-out; }
.unstable-title { font-family: 'Nunito', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--primary-dark); margin: 0 0 12px 0; line-height: 1.2; }
.unstable-text { font-family: 'Nunito', sans-serif; font-size: 1rem; color: var(--text-muted); font-weight: 700; line-height: 1.5; margin: 0; }
@keyframes bounceSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* =========================================================
   14. UNIFIED TYPOGRAPHY (🌟 CQI SIZING FIX APPLIED)
========================================================= */
/* --- DESKTOP SIZES --- */
.hz-hero { font-size: clamp(4rem, 15vmin, 8rem) !important; line-height: 1.2; }
.hz-hero.study-hz-single { font-size: clamp(4.6rem, 17vmin, 8.4rem) !important; }
.hz-hero.study-hz-duo { font-size: clamp(4.1rem, 14vmin, 7.2rem) !important; }
.hz-hero.study-hz-trio { font-size: clamp(3.25rem, 11.5vmin, 5.4rem) !important; line-height: 1.14 !important; }
.hz-hero.study-hz-long { font-size: clamp(2.45rem, 8.7vmin, 4rem) !important; line-height: 1.1 !important; letter-spacing: 0.02em; }
.hz-hero.study-hz-back.study-hz-single { font-size: clamp(3.85rem, 14.2vmin, 6.8rem) !important; }
.hz-hero.study-hz-back.study-hz-duo { font-size: clamp(3.45rem, 12vmin, 5.9rem) !important; }
.hz-hero.study-hz-back.study-hz-trio { font-size: clamp(2.75rem, 9.6vmin, 4.6rem) !important; line-height: 1.1 !important; }
.hz-hero.study-hz-back.study-hz-long { font-size: clamp(2.1rem, 7.2vmin, 3.45rem) !important; line-height: 1.04 !important; }
.hz-hero.study-hz-back.study-hz-back-dense.study-hz-single { font-size: clamp(3.45rem, 12.8vmin, 6rem) !important; }
.hz-hero.study-hz-back.study-hz-back-dense.study-hz-duo { font-size: clamp(3.05rem, 10.8vmin, 5.15rem) !important; }
.hz-hero.study-hz-back.study-hz-back-dense.study-hz-trio { font-size: clamp(2.45rem, 8.5vmin, 4rem) !important; line-height: 1.04 !important; }
.hz-hero.study-hz-back.study-hz-back-dense.study-hz-long { font-size: clamp(1.85rem, 6.25vmin, 3rem) !important; line-height: 1.01 !important; }
.hz-sentence { font-size: clamp(2.5rem, 6vmin, 4rem) !important; line-height: 1.5; }
.hz-sentence-back { font-size: 1.8rem; margin-bottom: 12px; line-height: 1.6; }
.sentence-pinyin { font-size: 1rem !important; letter-spacing: 0.5px; font-weight: 800; margin-bottom: 8px; }
.sentence-def { font-size: 1.1rem !important; line-height: 1.5; font-weight: 600; opacity: 0.9; padding: 0 15px; }
.hz-quiz { font-size: clamp(3.8rem, 11vmin, 6.5rem); }
.hz-quiz.chars-3 { font-size: clamp(3.2rem, 9vmin, 5.4rem); }
.hz-quiz.chars-long { font-size: clamp(2.4rem, 7vmin, 4.2rem); line-height: 1.15; }
.quiz-reveal-hz { font-size: clamp(3rem, 7.5vmin, 4.6rem); margin-bottom: 10px; }
.quiz-reveal-hz.chars-3 { font-size: clamp(2.6rem, 6.5vmin, 4rem); }
.quiz-reveal-hz.chars-long { font-size: clamp(2rem, 5.5vmin, 3.4rem); line-height: 1.15; }
.example-zh { font-size: 1.06rem; margin-bottom: 5px; line-height: 1.24; font-weight: 400; }
/* --- MOBILE SIZES --- */
@media (max-width: 768px) {
  .study-hz-lg { font-size: clamp(3.5rem, 25vw, 6rem) !important; }
  .study-hz-lg-back { font-size: clamp(2.8rem, 20vw, 5rem) !important; margin-bottom: 12px !important; }  .hz-sentence-back { font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important; margin-bottom: 12px !important; }    .vocab-content .quiz-reveal-hz { font-size: clamp(3.5rem, 20vw, 5.5rem) !important; }
    .vocab-content .quiz-reveal-hz.chars-3 { font-size: clamp(2.5rem, 14vw, 4rem) !important; }
    .vocab-content .quiz-reveal-hz.chars-long { font-size: clamp(1.8rem, 10vw, 3rem) !important; line-height: 1.2 !important; }
    .hz-hero.study-hz-single { font-size: clamp(4.3rem, 23vw, 7rem) !important; }
    .hz-hero.study-hz-duo { font-size: clamp(3.8rem, 19vw, 6rem) !important; }
    .hz-hero.study-hz-trio { font-size: clamp(2.8rem, 14vw, 4.7rem) !important; line-height: 1.12 !important; }
    .hz-hero.study-hz-long { font-size: clamp(2.1rem, 10vw, 3.6rem) !important; line-height: 1.08 !important; }
    .hz-hero.study-hz-back.study-hz-single { font-size: clamp(3.55rem, 19vw, 5.9rem) !important; }
    .hz-hero.study-hz-back.study-hz-duo { font-size: clamp(3.15rem, 16vw, 5.1rem) !important; }
    .hz-hero.study-hz-back.study-hz-trio { font-size: clamp(2.45rem, 12vw, 4rem) !important; line-height: 1.06 !important; }
    .hz-hero.study-hz-back.study-hz-long { font-size: clamp(1.85rem, 8.8vw, 3rem) !important; line-height: 1 !important; }
    .hz-hero.study-hz-back.study-hz-back-dense.study-hz-single { font-size: clamp(3.1rem, 17vw, 5.3rem) !important; }
    .hz-hero.study-hz-back.study-hz-back-dense.study-hz-duo { font-size: clamp(2.75rem, 14.5vw, 4.6rem) !important; }
    .hz-hero.study-hz-back.study-hz-back-dense.study-hz-trio { font-size: clamp(2.15rem, 10.5vw, 3.55rem) !important; line-height: 1.02 !important; }
    .hz-hero.study-hz-back.study-hz-back-dense.study-hz-long { font-size: clamp(1.7rem, 7.8vw, 2.65rem) !important; line-height: 0.98 !important; }
    .example-zh { font-size: clamp(0.9rem, 3.9vw, 1.04rem) !important; line-height: 1.2 !important; font-weight: 400 !important; }
    .example-py { font-size: clamp(0.7rem, 2.7vw, 0.82rem) !important; font-weight: 600 !important; }
    .example-en { font-size: clamp(0.72rem, 3vw, 0.86rem) !important; line-height: 1.22 !important; font-weight: 400 !important; }
    .def-display { font-size: 1.05rem !important; }
    .pinyin-display { font-size: 1.15rem !important; }
    
    .mc-options-container { gap: 10px !important; }
    .mc-option-btn { padding: 16px 20px !important; font-size: 1.15rem !important; }

    .study-card-group { max-width: 85vw !important; width: 85vw !important; height: auto !important; aspect-ratio: 1/1 !important; }
    .quiz-card-group { max-width: min(80vw, 360px) !important; width: min(80vw, 360px) !important; height: auto !important; aspect-ratio: 1/1 !important; margin: 0 auto 20px auto !important; flex-shrink: 0; }
    .card-container:not(.sentence-card-container) { max-width: 100% !important; width: 100% !important; height: auto !important; aspect-ratio: 1/1 !important; }
    
    .qz-wrap.keyboard-open { padding-top: 12px; }
    .qz-wrap.keyboard-open .qz-card { padding: 20px 20px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); }
    .qz-wrap.keyboard-open .qz-card--typing { transform: translate3d(0, -96px, 0) scale(0.98); padding-bottom: 30px; }
    .qz-wrap.keyboard-open .qz-label { margin-bottom: 5px; opacity: 0.6; font-size: 0.7rem; }
    .qz-wrap.keyboard-open .qz-prompt { font-size: 2.8rem; margin-bottom: 15px; }
    .qz-wrap.keyboard-open .qz-prompt.chars-long { font-size: 1.6rem; }
    .qz-wrap.keyboard-open .qz-prompt.chars-3 { font-size: 2rem; }
    .qz-wrap.keyboard-open .qz-card--typing[data-prompt-type="hz"] .qz-prompt {
        font-size: clamp(3.4rem, 13vw, 4.8rem) !important;
        padding: 0.05em 0.2em 0.1em;
    }
    .qz-wrap.keyboard-open .qz-card--typing[data-prompt-type="hz"] .qz-prompt.chars-long {
        font-size: clamp(2.15rem, 9vw, 3rem) !important;
    }
    .qz-wrap.keyboard-open .qz-card-tag { bottom: 10px; }
    .nav-zone { position: absolute !important; top: 0; bottom: 0; width: 25% !important; min-width: auto !important; z-index: 100; opacity: 0 !important; background: transparent !important; border: none !important; }
    .nav-zone.left { left: 0; } .nav-zone.right { right: 0; }
    .nav-arrow { display: none !important; }
    .study-static-wrapper, .card-wrapper { position: relative !important; }
    
    #charModal .modal-sheet { padding: 0 !important; max-height: 92vh !important; border-radius: 24px !important; }
    #charModalContent { padding: 24px 16px 32px 16px !important; }
    
    .anatomy-hero-section { margin-bottom: 16px !important; }
    .hero-py { font-size: 1.3rem !important; }
    .hero-def { font-size: 0.95rem !important; }
    #strokeOrderContainer { transform: scale(0.85); transform-origin: top center; margin-bottom: -10px !important; }
    #charDisplay { font-size: 4.5rem !important; }
    .bento-header { padding: 10px 14px !important; gap: 10px !important; }
    .bento-icon-hz { font-size: 1.6rem !important; width: 32px !important; }
    .bento-py { font-size: 0.85rem !important; }
    .bento-def { font-size: 0.8rem !important; }
    .sub-component-list { padding: 8px 10px 12px 10px !important; }
    .sub-component-item { padding: 6px 10px !important; gap: 8px !important; }
    .sub-hz { font-size: 1.15rem !important; width: 20px !important; }
    .sub-def { font-size: 0.85rem !important; }
    .appears-in-row { padding: 10px 14px !important; }
    .standalone-banner { padding: 10px 12px !important; margin-bottom: 16px !important; }
    .ios17-component-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important; gap: 8px !important; }
    .ios17-grid-card { padding: 10px 6px !important; border-radius: 12px !important; }
    .grid-hz { font-size: 1.6rem !important; margin-bottom: 4px !important; }
    .grid-py { font-size: 0.75rem !important; }
    .grid-def { font-size: 0.7rem !important; }
    .clean-vocab-list { border-radius: 14px !important; margin-top: 8px !important; }
    .clean-vocab-item { padding: 12px !important; gap: 12px !important; }
    .cv-hz { font-size: 1.5rem !important; }
    .cv-py { font-size: 0.9rem !important; }
    .cv-def { font-size: 0.85rem !important; }
    .cv-left { min-width: 50px !important; }
    .cv-tag { font-size: 0.6rem !important; padding: 2px 6px !important; margin-top: 4px !important; }
    .hook-card { padding: 12px !important; border-radius: 16px !important; }
    .hook-text { font-size: 0.85rem !important; }
    
    .list-search-section { padding: 0 10px 10px 10px !important; }
    #listSearch { padding: 10px 14px 10px 38px !important; font-size: 0.95rem !important; }
    #listItemsContainer { padding: 0 10px 80px 10px !important; }
    .native-list-row { padding: 12px 0 !important; gap: 12px !important; }
    .nlr-hz-large { font-size: 1.8rem !important; min-width: 38px !important; }
    .nlr-content { gap: 2px !important; }
    .nlr-hz { font-size: 1.05rem !important; margin-bottom: 2px !important; }
    .nlr-py { font-size: 0.9rem !important; }
    .nlr-en { font-size: 0.85rem !important; line-height: 1.2 !important; }
    .nlr-meta { font-size: 0.65rem !important; }
    .prof-list-board { border-radius: 20px !important; }
    .prof-search-header { padding: 12px 12px 10px 12px !important; }
    .prof-list-actions { gap: 6px !important; margin-top: 10px !important; }
    .prof-list-action-btn { padding: 8px 10px !important; font-size: 0.78rem !important; }
    .prof-list-scroll { padding: 0 12px 80px 12px !important; }
    .prof-list-row { padding: 12px 10px !important; gap: 12px !important; }
    .prof-list-row.is-selectable { padding-left: 8px !important; }
    .prof-hz-large { font-size: 1.8rem !important; min-width: 38px !important; }
    .prof-hz-sentence { font-size: 1.05rem !important; margin-bottom: 2px !important; }
    .prof-py { font-size: 0.9rem !important; }
    .prof-en { font-size: 0.8rem !important; line-height: 1.2 !important; }
    .prof-tag { font-size: 0.65rem !important; padding: 3px 6px !important; }

    body #settingsModal .modal-sheet { padding: 24px 16px 16px 16px !important; border-radius: 24px !important; }
    body #settingsModal .modal-close { top: 12px !important; right: 12px !important; width: 32px !important; height: 32px !important; font-size: 1.1rem !important; }
    body #settingsModal .settings-header h2 { font-size: 1.4rem !important; margin-bottom: 12px !important; }
    body #settingsModal .settings-section-title { margin-bottom: 6px !important; font-size: 0.75rem !important; margin-left: 4px !important; }
    body #settingsModal .setting-card { padding: 4px 16px !important; border-radius: 16px !important; margin-bottom: 16px !important; }
    body #settingsModal .setting-row { padding: 12px 0 !important; }
    body #settingsModal .setting-name { font-size: 0.95rem !important; }
    body #settingsModal .setting-desc { font-size: 0.75rem !important; line-height: 1.3; margin-top: 2px; display: inline-block; }
    body #settingsModal .switch { width: 44px !important; height: 26px !important; }
    body #settingsModal .slider:before { height: 18px !important; width: 18px !important; left: 4px !important; bottom: 4px !important; }
    body #settingsModal input:checked + .slider:before { transform: translateX(18px) !important; }
    body #settingsModal .speed-group { gap: 6px !important; }
    body #settingsModal .speed-btn { padding: 6px 10px !important; font-size: 0.8rem !important; border-radius: 10px !important; }

    body .pastel-modal h3 { font-size: 1.5rem !important; }
    body .pastel-btn-icon { width: 36px !important; height: 36px !important; }
    body .pastel-btn-icon svg { width: 18px !important; height: 18px !important; }
    body .pastel-chip { padding: 10px 12px !important; font-size: 0.9rem !important; border-radius: 12px !important; }
}

/* =========================================================
   15. SCREEN NAVIGATION ANIMATIONS
========================================================= */
.view-leave-left { animation: viewLeaveLeft 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
.view-leave-right { animation: viewLeaveRight 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
.view-enter-left { animation: viewEnterLeft 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
.view-enter-right { animation: viewEnterRight 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }

@keyframes viewLeaveLeft { 0% { opacity: 1; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(-20px, 0, 0); pointer-events: none; } }
@keyframes viewLeaveRight { 0% { opacity: 1; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(20px, 0, 0); pointer-events: none; } }
@keyframes viewEnterLeft { 0% { opacity: 0; transform: translate3d(-20px, 0, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes viewEnterRight { 0% { opacity: 0; transform: translate3d(20px, 0, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }

/* =========================================================
   16. DESKTOP MAC-STYLE FLOATING DOCK
========================================================= */
@media (min-width: 1024px) {
    #app { margin: 0 auto; max-width: 1360px; padding: 40px 40px 140px 40px; }
    #mainContainer { width: 100%; max-width: 1120px; margin: 0 auto; }

    .bottom-nav { bottom: 32px; padding: 7px; gap: 5px; }
    .nav-item { min-width: 66px; padding: 9px 12px 8px; }
    .nav-label { opacity: 0.8 !important; font-size: 0.72rem; }
    .nav-item.dock-toggle .nav-label { display: none !important; }

    .study-card-group { max-width: 540px; }
    .sentence-card-container { max-width: 680px; }
    .quiz-card-group { max-width: 420px; }
    
    .mc-options-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; gap: 12px; margin-top: 16px; }
    .mc-option-btn { height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 16px; font-size: 0.95rem; }
}

/* =========================================================
   17. COURSE SELECTOR (PASTEL MODAL)
========================================================= */
.pastel-modal-wrapper {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.78); 
    padding: 20px;
    opacity: 0; transition: opacity 0.2s ease;
}
.pastel-modal-wrapper.open { opacity: 1; }

.pastel-modal {
    background: #ffffff;
    border-radius: 28px;
    width: 100%; max-width: 500px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15); 
    display: flex; flex-direction: column; overflow: hidden;
    transform: scale3d(0.9, 0.9, 1) translate3d(0, 20px, 0); 
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
    will-change: transform; 
}

.pastel-btn-icon {
    background: #f8fafc; color: #94a3b8;
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pastel-btn-icon:hover { 
    background: #f1f5f9; 
    color: #ef4444; 
    transform: scale(1.1) rotate(90deg); 
}
.pastel-btn-icon:active { transform: scale(0.9); }

@keyframes pastelPop {
    0% { opacity: 0; transform: scale3d(0.8, 0.8, 1) translateZ(0); }
    100% { opacity: 1; transform: scale3d(1, 1, 1) translateZ(0); }
}

.pastel-chip {
    background: #ffffff; color: #64748b;
    border: 2px solid #e2e8f0; border-radius: 14px; padding: 10px 16px;
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem;
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex; align-items: center; justify-content: center; user-select: none;
    opacity: 0; white-space: nowrap;
    animation: pastelPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pastel-chip:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}
.pastel-chip:active { transform: scale(0.96); }

.pastel-chip.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.pastel-scroll::-webkit-scrollbar { width: 6px; }
.pastel-scroll::-webkit-scrollbar-track { background: transparent; }
.pastel-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* =========================================================
   18. MOBILE UX THEME
========================================================= */
#app { 
    padding-top: max(96px, env(safe-area-inset-top) + 76px) !important; 
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 52px) !important;
    overflow-x: hidden !important;
} 

body.focus-mode #app {
    padding-top: max(20px, env(safe-area-inset-top)) !important;
}

.modal-overlay { z-index: 3000 !important; }

.dynamic-island-wrapper {
    position: fixed; 
    top: max(14px, env(safe-area-inset-top) - 4px);
    left: 0; right: 0;
    display: flex; justify-content: center; z-index: 1000; pointer-events: none;
}

.dynamic-island {
    background: linear-gradient(180deg, #ffffff 0%, #fff6fa 100%);
    border: 1.5px solid rgba(255, 158, 181, 0.35); 
    border-radius: 26px;
    padding: 0 16px; 
    width: 90%; max-width: 360px;
    pointer-events: auto; cursor: pointer;
    display: flex; flex-direction: column; overflow: hidden;
    transition: height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    height: 44px; 
    will-change: height, transform;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 14px 32px rgba(255, 158, 181, 0.18), 0 2px 6px rgba(255, 158, 181, 0.12);
}

.dynamic-island::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 25px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 100%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

.dynamic-island > * { position: relative; z-index: 1; }

.dynamic-island.expanded {
    height: 164px;
    background: linear-gradient(180deg, #ffffff 0%, #fff1f7 100%);
    border-radius: 30px;
    box-shadow: 0 18px 40px rgba(255, 158, 181, 0.22), 0 4px 10px rgba(255, 158, 181, 0.14);
}

.island-header { 
    display: flex; align-items: center; justify-content: space-between; 
    height: 44px; gap: 12px; flex-shrink: 0; transform: translateZ(0);
}

.island-progress-container { 
    flex: 1; height: 6px; background: rgba(255, 158, 181, 0.18); 
    border-radius: 10px; overflow: hidden; 
    box-shadow: inset 0 1px 2px rgba(255, 158, 181, 0.2);
}

.island-stats { 
    display: flex; align-items: center; gap: 8px; 
    font-family: 'Nunito', sans-serif; font-size: 0.85rem; 
}

.island-chevron { 
    transition: transform 0.3s ease;
    will-change: transform; 
    color: #ff9eb5; display: flex; align-items: center; height: 100%;
}

.dynamic-island.expanded .island-chevron { transform: rotate(180deg) translateZ(0); }

.island-body { 
    opacity: 0; transform: translate3d(0, -5px, 0); transition: opacity 0.2s ease, transform 0.2s ease; 
    pointer-events: none; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; 
}

.dynamic-island.expanded .island-body { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; }

.island-lesson-btn { 
    background: #fff0f5; color: #ec4899; border: none; padding: 10px; 
    border-radius: 15px; font-family: 'Nunito', sans-serif; font-weight: 800; 
    font-size: 0.9rem; cursor: pointer; 
}

.island-actions { display: flex; gap: 8px; }
.island-action-btn { 
    flex: 1; background: #ffffff; color: #ff9eb5; border: 1px solid rgba(255, 158, 181, 0.25); 
    padding: 8px; border-radius: 14px; font-family: 'Nunito', sans-serif; 
    font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; 
    justify-content: center; gap: 6px; 
    box-shadow: 0 6px 14px rgba(255, 158, 181, 0.16);
}
.island-action-btn.active { background: #ff9eb5; color: white; }
.island-action-btn.disabled { opacity: 0.45; pointer-events: none; }

.streak-sticker {
    position: absolute; top: -10px; right: -10px;
    border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 18px;
    padding: 4px 10px; display: flex; align-items: center; gap: 6px;
    transform: rotate(6deg) translateZ(0); z-index: 100; opacity: 0;
    pointer-events: none; overflow: hidden;
}
.listening-card-wrap .streak-sticker { top: -14px; right: -12px; }
.streak-sticker.visible { opacity: 1; }

.streak-sticker.theme-pink { background: linear-gradient(135deg, #ffb3c6, #ff8da1); box-shadow: 0 4px 12px rgba(255, 107, 139, 0.15); }
.streak-sticker.theme-gold { background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15); }
.streak-sticker.theme-cyan { background: linear-gradient(135deg, #a5f3fc, #22d3ee); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15); }
.streak-sticker.theme-purple { background: linear-gradient(135deg, #d8b4fe, #a855f7); box-shadow: 0 4px 12px rgba(147, 51, 234, 0.15); }

.sticker-icon { width: 14px; height: 14px; color: white; opacity: 0.9; }
.sticker-text { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem; color: white; line-height: 1; opacity: 0.95; }

.sticker-shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg); animation: shineSticker 3s infinite;
}

@keyframes shineSticker { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
@keyframes boingSticker {
    0% { transform: scale3d(0.8, 0.8, 1) rotate(0deg) translateZ(0); opacity: 0; }
    100% { transform: scale3d(1, 1, 1) rotate(6deg) translateZ(0); opacity: 1; }
}

body.hide-example-pinyin .example-py,
body.hide-example-pinyin .sentence-pinyin { display: none !important; }

.example-section { margin-top: 20px !important; padding-top: 15px !important; padding-bottom: 5px !important; }

@media (max-width: 768px) {
    .listening-card-wrap .streak-sticker { top: -12px; right: -8px; }
    .study-card-container { width: 100% !important; max-width: 100% !important; }
    .study-card-container .hz-hero:not(.study-hz-single):not(.study-hz-duo):not(.study-hz-trio):not(.study-hz-long) {
        font-size: clamp(4rem, 22vw, 8rem) !important;
        line-height: 1.2 !important;
    }
    .hz-sentence, .hz-sentence-back {
        font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
        line-height: 1.5 !important;
    }
    .example-zh {
        font-size: clamp(0.9rem, 3.9vw, 1.04rem) !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
    }
    .example-en, .quiz-reveal-def {
        font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
        line-height: 1.22 !important;
        font-weight: 400 !important;
        opacity: 0.8 !important; 
    }
    .study-def {
        max-width: min(100%, 28ch) !important;
        font-size: clamp(0.96rem, 4vw, 1.08rem) !important;
        line-height: 1.44 !important;
        font-weight: 700 !important;
        opacity: 1 !important;
        color: #475569 !important;
    }
    .study-def.study-def--compact {
        font-size: clamp(0.88rem, 3.7vw, 0.98rem) !important;
        line-height: 1.4 !important;
    }
    .memory-hook-card {
        width: min(100%, 100%) !important;
        margin-top: 10px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }
    .memory-hook-label {
        margin-bottom: 6px !important;
        font-size: 0.63rem !important;
    }
    .memory-hook-text {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
    }
    .study-back-hook-slot {
        padding-top: 9px !important;
    }
    .study-back-main.is-dense .pinyin-display {
        margin-bottom: 0.2rem !important;
    }
    .study-back-main.is-dense .study-def {
        font-size: clamp(0.84rem, 3.55vw, 0.94rem) !important;
        line-height: 1.36 !important;
    }
    .study-back-main.is-very-dense .study-def {
        font-size: clamp(0.8rem, 3.35vw, 0.9rem) !important;
        line-height: 1.3 !important;
    }
    .face-content.vocab-content.is-very-dense .memory-hook-card {
        margin-top: 7px !important;
        padding: 10px !important;
    }
    .face-content.vocab-content.is-very-dense .memory-hook-text {
        font-size: 0.84rem !important;
        line-height: 1.44 !important;
    }
    .example-py, .sentence-card-container .pinyin-display {
        font-size: clamp(0.74rem, 2.95vw, 0.86rem) !important;
        line-height: 1.26 !important;
        color: var(--pinyin-ink) !important;
        font-weight: 600 !important;
    }
    .example-py span:not(.pinyin-token), .sentence-card-container .pinyin-display span:not(.pinyin-token) {
        color: inherit !important;
    }
    .sentence-card-container {
        max-width: 90vw !important; width: 90vw !important;
        aspect-ratio: auto !important; min-height: 180px !important;
    }
    .sentence-card-container .card__face {
        min-height: 180px !important; padding: 24px 16px !important;
    }
    .card:hover .card__face { animation: none !important; }
    .quiz-input-container { width: 75vw !important; max-width: 320px !important; }
}

.scroll-hint {
    position: fixed; bottom: 95px; left: 50%; transform: translate3d(-50%, 0, 0);
    background: rgba(255, 255, 255, 0.98);
    padding: 10px 20px; border-radius: 30px;
    box-shadow: 0 3px 10px rgba(255, 158, 181, 0.12), 0 0 0 1px rgba(255,255,255,0.6);
    display: flex; align-items: center; gap: 8px;
    font-family: 'Nunito', sans-serif; font-size: 0.9rem; font-weight: 700;
    color: var(--text-muted); pointer-events: none;
    opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 90;
    will-change: transform, opacity;
}
.scroll-hint.visible { opacity: 1; animation: floatHint 2s infinite ease-in-out; }
.scroll-hint svg { color: #94a3b8; }

@keyframes floatHint {
    0%, 100% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-50%, 6px, 0); }
}

.nav-item {
    color: #9f95a1; 
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.nav-item:active { transform: translate3d(0, 1px, 0) scale(0.97); }
.nav-item.active {
    color: var(--primary-dark) !important; 
    transform: translate3d(0, -1px, 0); 
}

.example-item.is-primary {
    background: #fff6fa !important;
    border: 2px solid rgba(255, 158, 181, 0.5) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 6px 16px rgba(255, 158, 181, 0.15) !important;
}

.smart-example-item {
    padding: 16px; border-radius: 16px; background: #f8fafc;
    border: 1px solid #e2e8f0; margin-bottom: 12px; transition: all 0.2s ease;
}
.smart-example-item.priority-match {
    background: #fff6fa; border-color: rgba(255, 158, 181, 0.4);
    box-shadow: 0 4px 12px rgba(255, 158, 181, 0.1);
}
.smart-ex-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.smart-ex-tags { display: flex; gap: 6px; align-items: center; }
.smart-ex-tag {
    font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 800;
    color: #64748b; background: #e2e8f0; padding: 3px 8px; border-radius: 8px;
}
.priority-match .smart-ex-tag { color: var(--primary-dark); background: #fce7f3; }
.ex-speaker-btn {
    background: transparent; border: none; color: #94a3b8; cursor: pointer;
    padding: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; margin-top: -4px; margin-right: -4px;
}
.ex-speaker-btn:hover { color: var(--primary); background: rgba(255, 158, 181, 0.15); }
.ex-speaker-btn:active { transform: scale(0.85); }

/* =========================================================
   19. PASTEL SETTINGS THEME
========================================================= */
#settingsModal.modal-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.78) !important;
    padding: 20px !important;
    
    /* ADD THESE 3 LINES TO HIDE IT BY DEFAULT: */
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease;
}

/* ADD THIS BRAND NEW BLOCK RIGHT BELOW IT TO SHOW IT: */
#settingsModal.open { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
}

#settingsModal .modal-sheet {
    position: relative !important;
    bottom: auto !important;
    background: #ffffff !important;
    border-radius: 32px !important;
    padding: 32px !important;
    width: 100% !important;
    max-width: 600px !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.25) !important;
    transform: scale3d(0.9, 0.9, 1) translate3d(0, 20px, 0) !important; 
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    will-change: transform !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}
#settingsModal.open .modal-sheet { transform: scale3d(1, 1, 1) translate3d(0, 0, 0) !important; }

#settingsModal .modal-close {
    position: absolute !important; top: 24px !important; right: 24px !important;
    background: #f8fafc !important; color: #94a3b8 !important;
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important; border: 2px solid #f1f5f9 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: 'Nunito', sans-serif !important; font-weight: 800 !important;
    font-size: 1.4rem !important; line-height: 0 !important; padding-bottom: 4px !important;
    cursor: pointer !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
#settingsModal .modal-close:hover { 
    background: #f1f5f9 !important; color: #ef4444 !important; 
    transform: scale(1.1) rotate(90deg) !important; 
}
#settingsModal .modal-close:active { transform: scale(0.9) !important; }

#settingsModalContent {
    overflow-y: auto !important; padding-right: 8px !important; margin-right: -4px !important;
}
#settingsModalContent::-webkit-scrollbar { width: 6px !important; }
#settingsModalContent::-webkit-scrollbar-track { background: transparent !important; }
#settingsModalContent::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 10px !important; }

@media (min-width: 1024px) {
}

#settingsModal .settings-header { border-bottom: none !important; margin-bottom: 24px !important; padding: 0 !important;}
#settingsModal .settings-header h2 {
    font-family: 'Nunito', sans-serif !important; font-size: 1.8rem !important;
    font-weight: 800 !important; color: #475569 !important; margin: 0 !important;
}
#settingsModal .settings-section-title {
    font-family: 'Nunito', sans-serif !important; font-weight: 800 !important;
    font-size: 0.85rem !important; text-transform: uppercase !important;
    letter-spacing: 1.2px !important; color: #64748b !important; margin: 0 0 16px 12px !important;
}

#settingsModal .setting-card {
    background: #ffffff !important; border: 2px solid #f1f5f9 !important;
    border-radius: 24px !important; padding: 8px 20px !important;
    box-shadow: 0 8px 16px rgba(255, 158, 181, 0.12) !important; margin-bottom: 28px !important;
}
#settingsModal .setting-row { border-bottom: 2px dashed #f1f5f9 !important; padding: 18px 0 !important; margin: 0 !important;}
#settingsModal .setting-row:last-child { border-bottom: none !important; }

#settingsModal .setting-name {
    font-family: 'Nunito', sans-serif !important; font-weight: 800 !important;
    color: #475569 !important; font-size: 1.05rem !important;
}
#settingsModal .setting-desc {
    font-family: 'Nunito', sans-serif !important; font-weight: 700 !important;
    color: #64748b !important; font-size: 0.85rem !important;
}

#settingsModal .switch { width: 54px !important; height: 32px !important; }
#settingsModal .slider {
    background-color: #f1f5f9 !important; border-radius: 30px !important;
    box-shadow: inset 0 2px 4px rgba(255, 158, 181, 0.12) !important;
}
#settingsModal .slider:before {
    height: 24px !important; width: 24px !important; left: 4px !important; bottom: 4px !important;
    background-color: white !important; border-radius: 50% !important;
    box-shadow: 0 4px 8px rgba(255, 158, 181, 0.12) !important; transition: .3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
#settingsModal input:checked + .slider { background-color: #6ea1c6 !important; }
#settingsModal input:checked + .slider:before { transform: translateX(22px) !important; }

/* --- CHARACTER LOOKUP MODAL STYLES --- */
#charModal.modal-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px !important;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    z-index: 10000 !important;
}
#charModal.open { opacity: 1 !important; pointer-events: auto !important; }

#charModal .modal-sheet {
    background: #ffffff !important;     
    border-radius: 32px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 520px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    transform: scale(0.96) translateY(10px) !important; 
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important;
    will-change: transform, opacity !important;
    opacity: 0 !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    overflow: hidden !important;
}
#charModal.open .modal-sheet { transform: scale(1) translateY(0) !important; opacity: 1 !important; }          

#charModalContent {
    flex: 1;
    overflow-y: auto !important;
    padding: 32px 24px !important;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
#charModalContent::-webkit-scrollbar { width: 8px !important; }
#charModalContent::-webkit-scrollbar-track { background: transparent !important; margin: 20px 0; }
#charModalContent::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 10px !important; border: 2px solid #ffffff; }
#charModalContent::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }

/* Remove the duplicate/legacy close button */
#charModal > .modal-close, #charModal .modal-sheet > .modal-close { display: none !important; }

.modal-header-nav {
    position: sticky;
    top: 0;
    z-index: 140;
    min-height: 36px;
    margin: 0 0 16px 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}
.modal-close-btn { position: absolute; top: 4px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; color: #64748b; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 100; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.modal-top-bar { display: flex; align-items: center; margin-bottom: 0; position: relative; z-index: 90; min-height: 36px; }
.modal-back-btn { background: rgba(255, 158, 181, 0.1); color: var(--primary-dark); border: none; padding: 8px 16px; border-radius: 100px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.modal-close-btn,
.modal-back-btn,
.modal-top-bar {
    pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .modal-close-btn:hover { background: #e2e8f0; color: #ef4444; transform: scale(1.1) rotate(90deg); }
    .modal-back-btn:hover { background: rgba(255, 158, 181, 0.2); transform: translateX(-4px); }
}
/* --- HIDE OPEN DICTIONARY BUTTON --- */
#charLink {
    display: none !important;
}

/* --- RESPONSIVE TABLET & DESKTOP CENTERED MODAL --- */
@media (min-width: 768px) {
    #charModal.modal-overlay { 
        justify-content: center !important; 
        align-items: center !important;
        padding: 24px !important; 
    }
    
    #charModal .modal-sheet { 
        max-width: 900px !important; 
        width: 90vw !important;
        height: auto !important; 
        max-height: 85vh !important; 
        margin: 0 auto !important; 
        border-radius: 32px !important; 
        
        /* Center pop-in animation instead of sliding from the edge */
        transform: scale(0.96) translateY(20px) !important; 
    }
    #charModal.open .modal-sheet { 
        transform: scale(1) translateY(0) !important; 
    }
    
    #charModalContent { 
        padding: 24px 40px 32px 40px !important;
        overflow-y: auto !important; 
        display: block !important; 
    }
    .modal-header-nav {
        top: 0;
        margin: 0 0 16px 0;
        padding: 0;
    }
    #charDetail { 
        display: block !important; 
        height: auto !important; 
    }
    
    /* 🌟 Two-column layout: flex-wrap dynamically prevents overlap! */
    .anatomy-master-container:not(.is-word) { 
        display: flex !important; 
        flex-direction: row !important; 
        flex-wrap: wrap !important; /* Forces columns to stack gracefully if they run out of room */
        gap: 32px !important; 
        max-width: 100% !important; 
        align-items: flex-start !important; 
        height: auto !important; 
    }
    
    .anatomy-master-container.is-word { 
        max-width: 600px !important; 
        margin: 0 auto; 
        width: 100%; 
        height: auto !important; 
    }
    
    .anatomy-left-col { 
        flex: 1 1 300px !important; /* Shrinks and grows fluidly */
        width: auto !important;
        height: auto !important; 
        overflow: visible !important; 
        padding-right: 0 !important; 
    }
    
    .anatomy-right-col { 
        flex: 1.5 1 340px !important; 
        min-width: 0 !important; 
        border-left: none !important; /* Removed vertical line for cleaner wrapping */
        height: auto !important; 
        overflow: visible !important; 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
    }
    
    #strokeOrderContainer { margin: 0 auto 24px auto !important; }
}

@media (hover: none), (pointer: coarse) {
    .modal-close,
    .modal-close-btn,
    .modal-back-btn,
    #settingsModal .speed-btn,
    .ex-speaker-btn {
        transform: none !important;
        transition: none !important;
    }
    .modal-close:hover,
    .modal-close-btn:hover,
    .modal-back-btn:hover,
    #settingsModal .speed-btn:hover,
    .ex-speaker-btn:hover {
        transform: none !important;
    }
    .modal-close:hover {
        color: var(--text-main) !important;
        box-shadow: 0 4px 12px rgba(255, 158, 181, 0.12) !important;
    }
    #settingsModal .modal-close:hover {
        background: #f8fafc !important;
        color: #94a3b8 !important;
    }
    .modal-close-btn:hover {
        background: #f1f5f9 !important;
        color: #64748b !important;
    }
    .modal-back-btn:hover {
        background: rgba(255, 158, 181, 0.1) !important;
    }
    #settingsModal .speed-btn:hover {
        box-shadow: none !important;
        border-color: #e2e8f0 !important;
        background: #ffffff !important;
    }
    .ex-speaker-btn:hover {
        color: #94a3b8 !important;
        background: transparent !important;
    }
}

#settingsModal .speed-group { background: transparent !important; padding: 0 !important; gap: 8px !important; flex-wrap: wrap !important; }
#settingsModal .speed-btn {
    background: #ffffff !important; color: #94a3b8 !important; border: 2px solid #f1f5f9 !important;
    border-radius: 16px !important; padding: 10px 14px !important;
    font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; font-size: 0.95rem !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; cursor: pointer !important;
}
#settingsModal .speed-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 12px rgba(255, 158, 181, 0.12) !important; border-color: #e2e8f0 !important; }
#settingsModal .speed-btn:active, #charModal .modal-close:active { transform: scale(0.9) !important; }
#settingsModal .speed-btn.active {
  background: #e0f2fe !important; color: #6ea1c6 !important; border-color: #6ea1c6 !important;
  transform: translateY(-2px) !important; box-shadow: 0 8px 16px rgba(110,161,198,0.2) !important;
}

/* --- SETTINGS TABS --- */
#settingsModal .settings-tabs {
  display: flex !important; gap: 8px !important; margin-top: 16px !important;
  background: #f1f5f9 !important; padding: 6px !important; border-radius: 20px !important;
}
#settingsModal .settings-tab {
  flex: 1 !important; background: transparent !important; border: none !important;
  padding: 10px !important; border-radius: 14px !important; font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important; font-size: 0.95rem !important; color: #64748b !important;
  cursor: pointer !important; transition: all 0.25s ease !important;
}
#settingsModal .settings-tab.active {
  background: #ffffff !important; color: #475569 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}
#settingsModal .settings-section-pane { display: none !important; }
#settingsModal .settings-section-pane.active { 
  display: block !important; animation: fadeInScale 0.3s ease-out forwards !important; 
}

/* --- RANGE SLIDERS FOR AUDIO SETTINGS --- */
#settingsModal input[type=range] {
  -webkit-appearance: none; width: 100%; background: transparent; margin: 10px 0;
}
#settingsModal input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; height: 22px; width: 22px;
  border-radius: 50%; background: #6ea1c6; cursor: pointer;
  margin-top: -8px; box-shadow: 0 4px 10px rgba(110, 161, 198, 0.4);
  transition: transform 0.1s ease;
}
#settingsModal input[type=range]::-webkit-slider-thumb:active { transform: scale(1.15); }
#settingsModal input[type=range]::-webkit-slider-runnable-track {
  width: 100%; height: 6px; cursor: pointer;
  background: #e2e8f0; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.slider-value-badge {
  background: #f1f5f9; color: #64748b; padding: 4px 10px; border-radius: 12px; font-weight: 800; font-size: 0.85rem; display: inline-block; min-width: 45px; text-align: center;
}
/* =========================================================
   🌟 FINAL MODAL POLISH: FIXED CLOSE, CLEAN COMPONENTS, SMOOTH ANIMATIONS
========================================================= */

/* --- 1. ALWAYS-VISIBLE, FIXED CLOSE BUTTON --- */
#charModal .modal-sheet {
    position: relative !important;
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important; 
}

#charModalContent {
    flex: 1 !important;
    overflow-y: auto !important; 
    padding-top: 20px !important;
    padding-bottom: 40px !important;
}

/* --- 2. SMOOTH OPENING ANIMATION FOR ACCORDIONS --- */
.component-group.collapsed .component-grid { 
    display: grid !important; 
}

.component-grid {
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
    transform-origin: top;
    transform: scaleY(1);
    transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.3s ease, 
                transform 0.3s ease !important;
}

.component-group.collapsed .component-grid {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: scaleY(0.95) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* =========================================================
   🌟 CLEAN "APPEARS IN" COMPONENT ROW 
========================================================= */
.appears-tag { display: none !important; }

.appears-in-row {
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 16px 20px !important;
}
.appears-in-row:active { background: rgba(255, 158, 181, 0.12) !important; }

.appears-list {
    flex: 1 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 12px !important;
    pointer-events: none !important; 
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
}
.appears-node {
    font-size: 1.5rem !important; 
    color: var(--text-strong) !important;
}
.appears-in-row::after {
    content: "Show More ›";
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 8px;
    transition: color 0.2s ease;
}
.appears-in-row:hover::after { color: var(--text-strong); }

/* =========================================================
   🌟 ULTIMATE ACTS-AS-COMPONENT GRID (NO BOOKS, COLORED BORDERS, PINYIN)
========================================================= */

/* 1. Nuke the Book Headers, Definition (---), Tags, and horizontal lines */
.component-group-header,
.component-def,
.component-vocab-tag,
.cg-line {
    display: none !important;
}

/* 2. Create the dense, perfectly even square grid */
.component-grid {
    display: grid !important;
    /* Made slightly wider (48px) to comfortably fit the Pinyin */
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important; 
    gap: 8px !important;
    /* The 24px bottom padding creates the <br> visual break between groups! */
    padding: 4px 8px 24px 8px !important; 
}

@media (max-width: 768px) {
    .component-grid {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
    }
}

/* 3. Style the square tiles with Dynamic Border Colors */
/* 3. Style the square tiles with SOFT Pastel Border Colors */
.component-tile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    padding: 2px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    
    /* 🎨 MAGIC MIX: Takes the harsh color and washes it with 60% soft gray/white */
    border: 2px solid color-mix(in srgb, var(--group-color, #cbd5e1) 40%, #f1f5f9) !important; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.15s ease !important;
}   

/* 5. Format Pinyin and Hanzi */
.component-py {
    display: block !important; 
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    
    /* 🎨 Softens the Pinyin text so it's not blindingly bright */
    color: color-mix(in srgb, var(--group-color, var(--primary-dark)) 75%, #64748b) !important;
    line-height: 1 !important;
    text-align: center !important;
    margin: 0 !important;
}

.component-hz {
    font-size: 1.4rem !important; 
    color: var(--text-main) !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Tiny, centered Book Headers */
.cg-badge {
    background: transparent !important;
    
    /* 🎨 Softens the Book header text to match the muted aesthetic */
    color: color-mix(in srgb, var(--group-color, #94a3b8) 75%, #64748b) !important; 
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
}

/* Add a slick hover effect for Desktop users */
@media (hover: hover) and (pointer: fine) {
    .component-tile:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06) !important;
        
        /* 🎨 Makes the border slightly deeper when hovered, but still soft */
        border-color: color-mix(in srgb, var(--group-color, #cbd5e1) 60%, #e2e8f0) !important;
        z-index: 10 !important;
    }
    .component-tile:hover .component-hz {
        color: color-mix(in srgb, var(--group-color, var(--primary-dark)) 80%, #475569) !important;
    }
}
/* =========================================================
   🌟 MULTIPLE CHOICE: DYNAMIC LAYOUTS & BIG HANZI TILES
========================================================= */

/* Default Layout: Vertical Stack for English/Pinyin */
.mc-options-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 10px auto 0 auto !important;
    z-index: 20 !important;
    flex-shrink: 0 !important;
}

/* Override Layout: 2x2 Grid for Big Hanzi Tiles */
.mc-options-container.is-hz-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: min-content !important;
    gap: clamp(8px, 2vh, 16px) !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: clamp(12px, 3vh, 30px) auto 0 auto !important;
}
@media (min-width: 1024px) {
    .mc-options-container.is-hz-grid {
        max-width: 580px !important;
        gap: clamp(12px, 2.5vh, 20px) !important;
    }
}

@media (max-width: 768px) {
    .mc-options-container.is-hz-grid {
        gap: clamp(8px, 1.5vh, 12px) !important;
        max-width: 100% !important;
    }
}

/* Style the buttons as perfect, huge squares */
.mc-option-btn.is-hz {
    font-family: 'twkai', 'Noto Serif TC', serif !important;
    font-size: clamp(1.5rem, 8vmin, 2.9rem) !important;
    font-weight: normal !important;
    padding: clamp(6px, 1.5vh, 14px) 10px !important;
    aspect-ratio: auto !important; 
    min-height: clamp(60px, 14vh, 124px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: clamp(12px, 2.5vh, 24px) !important;
    line-height: 1.15 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}
.mc-option-btn.is-hz.chars-3-btn {
    font-size: clamp(1.3rem, 6vmin, 2.3rem) !important;
}

.mc-option-btn.is-hz.chars-long-btn {
    font-size: clamp(1.1rem, 5vmin, 1.8rem) !important;
}


/* Enhance the hover/active states for the big tiles */
@media (hover: hover) and (pointer: fine) {
    .mc-option-btn.is-hz:hover {
        transform: translateY(-4px) scale(1.02) !important;
        box-shadow: 0 8px 24px rgba(255, 158, 181, 0.2) !important;
        border-color: var(--primary) !important;
        color: var(--primary-dark) !important;
    }
}

/* Roomier tablet/desktop multiple-choice layout */
.qz-wrap--mc {
    width: min(100%, 1040px);
    margin: 0 auto;
}

.qz-card--mc {
    width: min(100%, 1000px);
    max-width: 1000px;
    padding: clamp(24px, 2.6vw, 36px);
    align-items: stretch;
    gap: clamp(14px, 1.8vw, 20px);
}

.qz-label--mc {
    margin-bottom: 0;
    padding-right: 36px;
    text-align: center;
}

.qz-prompt--mc {
    display: block;
    width: min(100%, 820px);
    margin: 0 auto;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    line-height: 1.25;
}

.qz-card--mc .mc-options-container {
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
}

.qz-card--mc .mc-option-btn {
    min-height: 72px;
    padding: 14px 18px;
    border-radius: 20px;
}

.qz-card--mc .mc-option-btn.is-hz {
    min-height: 112px !important;
}

/* Sentence cards should read like panels, not forced squares */
.sentence-card-container {
    flex: 0 1 auto;
    width: min(100%, 760px);
    max-width: 760px;
    aspect-ratio: auto;
    min-height: clamp(220px, 32vh, 340px);
}

.sentence-card-container .card,
.sentence-card-container .card__face {
    min-height: inherit;
}

.sentence-card-container .card__face {
    padding: clamp(24px, 3vw, 36px);
}

.sentence-card-container .face-content {
    justify-content: center;
    padding: clamp(18px, 3vw, 30px);
}

.sentence-card-container .card-center-layout {
    gap: 12px;
}

.sentence-card-container .hz-sentence {
    font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
    line-height: 1.45;
}

.sentence-card-container .hz-sentence-back {
    font-size: clamp(1.45rem, 2.8vw, 2.1rem) !important;
    line-height: 1.55;
    margin-bottom: 0;
}

.sentence-card-container .sentence-pinyin {
    font-size: clamp(1rem, 1.7vw, 1.15rem) !important;
    margin-bottom: 0;
}

.sentence-card-container .sentence-def {
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
}

.reader-shell {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reader-feed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: calc(50vh - 120px) 0;
}

.reader-feed::-webkit-scrollbar {
    display: none;
}

.reader-spacer {
    width: 1px;
    flex: 0 0 auto;
    pointer-events: none;
    opacity: 0;
}

.reader-entry {
    width: min(92vw, 640px);
    flex: 0 0 auto;
    scroll-snap-align: center;
    position: relative;
    border-radius: 30px;
    border: 1px solid rgba(233, 223, 228, 0.92);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 20px rgba(216, 180, 193, 0.1);
    cursor: pointer;
    opacity: 0.4;
    transform: scale(0.92);
    transform-origin: center center;
    will-change: transform, opacity;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, border-color 0.3s, box-shadow 0.3s;
    padding: clamp(24px, 3.2vw, 34px) clamp(22px, 3.6vw, 34px) clamp(18px, 2.8vw, 24px);
}

.reader-entry.is-current {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(252,248,249,0.96));
    box-shadow: 0 22px 42px rgba(216, 180, 193, 0.2), 0 10px 18px rgba(148, 163, 184, 0.1);
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

.reader-entry.is-open {
    border-color: rgba(220, 203, 211, 0.96);
}

.reader-entry.is-open::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

.reader-entry-detail-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.reader-entry.is-open .reader-entry-detail-wrap {
    grid-template-rows: 1fr;
}

.reader-entry-detail {
    min-height: 0;
    overflow: hidden;
}

.reader-entry-detail-inner {
    padding-top: 0;
    margin-top: 0;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.24s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), padding-top 0.36s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    border-top: 1px solid transparent;
}

.reader-entry.is-open .reader-entry-detail-inner {
    padding-top: 16px;
    margin-top: 16px;
    border-top-color: rgba(233, 223, 228, 0.9);
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.reader-audio-btn {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 16px;
    border: 1px solid rgba(231, 215, 222, 0.94);
    background: rgba(255,255,255,0.82);
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 8px 18px rgba(216, 180, 193, 0.12);
}

.reader-audio-btn svg {
    width: 24px;
    height: 24px;
}

@media (hover: hover) and (pointer: fine) {
    .reader-audio-btn:hover {
        transform: translate3d(0, -1px, 0);
        background: rgba(249, 242, 245, 0.96);
        border-color: rgba(220, 199, 208, 0.94);
    }
}

@media (min-width: 768px) {
    .reader-entry { margin: 0; }
}

.reader-entry-sentence {
    font-family: 'twkai', 'Noto Serif TC', serif;
    font-size: clamp(2.0rem, 4vw, 3.4rem);
    line-height: 1.56;
    letter-spacing: 0.01em;
    color: var(--text-main);
    text-align: left;
    font-weight: 400;
    transition: color 0.24s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateZ(0);
}

.reader-entry .interactive-char {
    color: inherit !important;
    font-family: inherit !important;
    display: inline;
    position: static;
    z-index: auto;
    border-radius: 0;
}

.reader-entry-pinyin {
    margin-top: 14px;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    line-height: 1.52;
    color: var(--pinyin-ink);
}

.reader-entry-pinyin .pinyin-token {
    font-weight: 600;
}

.reader-entry-gloss {
    flex: 1;
    margin-top: 6px;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    line-height: 1.65;
    color: var(--text-soft);
}

.study-mini-panel {
    position: relative;
    border-radius: 28px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--panel-line);
    box-shadow: 0 16px 28px rgba(127, 108, 118, 0.08);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
    background-clip: padding-box;
    transform: translateZ(0);
}

.study-mini-panel-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;
    padding: 0 2px 10px;
    border-bottom: 1px solid rgba(223, 214, 220, 0.8);
}

.study-mini-panel-title {
    font-family: 'Nunito', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.study-mini-char-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(229, 220, 225, 0.95);
    box-shadow: 0 4px 10px rgba(127, 108, 118, 0.04);
}

.study-mini-char-card + .study-mini-char-card {
    margin-top: 12px;
}

.study-mini-char-card.is-open {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(215, 203, 210, 0.96);
}

.study-mini-char-header {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.study-mini-char-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(251, 248, 250, 0.96);
    border: 1px solid rgba(229, 220, 225, 0.95);
    font-family: 'twkai', 'Noto Serif TC', serif;
    font-size: 1.82rem;
    line-height: 1;
    color: var(--text-main);
}

.study-mini-char-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.study-mini-char-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.study-mini-char-caret svg {
    width: 14px;
    height: 14px;
    transition: transform 0.18s ease;
}

.study-mini-char-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.study-mini-char-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.study-mini-preview-strip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
}

.study-mini-preview-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(251, 248, 250, 0.96);
    border: 1px solid rgba(229, 220, 225, 0.95);
    font-family: 'twkai', 'Noto Serif TC', serif;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-main);
}

.study-mini-preview-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(251, 248, 250, 0.96);
    border: 1px solid rgba(229, 220, 225, 0.95);
    font-family: 'Nunito', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
}

.study-mini-char-py {
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--pinyin-ink);
}

.study-mini-char-badge,
.study-mini-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 158, 181, 0.2);
    font-family: 'Nunito', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.study-mini-char-defline {
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    line-height: 1.34;
    color: var(--text-soft);
}

.study-mini-char-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.study-mini-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.study-mini-char-body {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.study-mini-char-card.is-open .study-mini-char-body {
    display: flex;
}

.study-mini-char-card.is-open .study-mini-char-caret svg {
    transform: rotate(180deg);
}

.study-mini-section-title {
    font-family: 'Nunito', sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.study-mini-components {
    display: grid;
    gap: 8px;
}

.study-mini-component-chip {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(229, 220, 225, 0.95);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

.study-mini-component-chip:hover,
.study-mini-inline-row:hover,
.study-mini-char-header:hover {
    border-color: rgba(190, 174, 184, 0.82);
}

.study-mini-component-hz {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(251, 248, 250, 0.96);
    border: 1px solid rgba(229, 220, 225, 0.95);
    font-family: 'twkai', 'Noto Serif TC', serif;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--text-main);
}

.study-mini-component-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.study-mini-component-py {
    font-family: 'Nunito', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.22;
    color: var(--pinyin-ink);
}

.study-mini-component-def {
    font-family: 'Nunito', sans-serif;
    font-size: 0.76rem;
    line-height: 1.28;
    color: var(--text-soft);
    word-break: break-word;
}

.study-mini-dropdown {
    border: 1px solid rgba(229, 220, 225, 0.95);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.study-mini-dropdown summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.study-mini-dropdown summary::-webkit-details-marker {
    display: none;
}

.study-mini-dropdown summary::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.16s ease;
    margin-left: 10px;
    flex-shrink: 0;
}

.study-mini-dropdown[open] summary::after {
    transform: rotate(225deg) translateY(-1px);
}

.study-mini-dropdown-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px 10px;
}

.study-mini-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(229, 220, 225, 0.95);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    cursor: pointer;
    text-align: left;
}

.study-mini-inline-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.study-mini-inline-hz {
    font-family: 'twkai', 'Noto Serif TC', serif;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-main);
}

.study-mini-inline-py,
.study-mini-inline-def {
    font-family: 'Nunito', sans-serif;
    font-size: 0.76rem;
    line-height: 1.25;
    color: var(--text-soft);
}

.study-mini-empty {
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(251, 248, 250, 0.94);
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    body[data-mode="study"] .study-card-group {
        width: min(100%, 620px);
        max-width: 620px;
        height: clamp(380px, 52svh, 520px);
        aspect-ratio: auto;
    }

    body[data-mode="study"] .study-card-container {
        max-width: 620px;
        height: 100%;
    }

    .qz-card--mc {
        width: min(100%, 1000px);
    }

    .qz-card--mc .mc-options-container:not(.is-hz-grid) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        max-width: 880px !important;
        margin-inline: auto !important;
    }

    .qz-card--mc .mc-options-container.is-hz-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        max-width: 760px !important;
        margin-inline: auto !important;
    }

    .qz-prompt--mc {
        font-size: clamp(2rem, 3.6vw, 3.3rem);
    }

    .qz-prompt--mc.chars-3 {
        font-size: clamp(1.85rem, 3.1vw, 2.8rem);
    }

    .qz-prompt--mc.chars-long {
        font-size: clamp(1.35rem, 2.3vw, 2.15rem);
        line-height: 1.35;
    }
}

@media (min-width: 1024px) {
    .qz-card--mc {
        width: min(100%, 1040px);
        max-width: 1040px;
    }

    .qz-card--mc .mc-options-container:not(.is-hz-grid) {
        gap: 18px !important;
        max-width: 920px !important;
    }

    .qz-card--mc .mc-options-container.is-hz-grid {
        max-width: 800px !important;
        gap: 16px !important;
    }

    .qz-card--mc .mc-option-btn {
        min-height: 76px;
        padding: 14px 18px;
        font-size: 1rem;
    }

    .qz-card--mc .mc-option-btn.is-hz {
        min-height: clamp(70px, 14vh, 116px) !important;
    }
}

@media (min-width: 768px) and (min-height: 600px) and (max-width: 1199px) {
    #app {
        max-width: 1240px;
        padding-left: clamp(24px, 3.6vw, 42px);
        padding-right: clamp(24px, 3.6vw, 42px);
    }

    #mainContainer {
        width: 100%;
        max-width: 1080px;
    }

    body[data-mode="study"] #app {
        overflow: hidden;
    }

    body[data-mode="study"] #mainContainer {
        overflow-y: hidden !important;
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
    }

    body[data-mode="study"] .study-static-wrapper,
    body[data-mode="study"] .study-center-box {
        height: 100%;
    }

    .study-center-box {
        max-width: 1080px;
        padding: 18px 0 22px;
    }

    .study-desktop-shell {
        position: relative;
        width: min(100%, 1000px);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        min-height: 0;
        overflow: visible;
    }

    .study-card-group {
        width: min(100%, 620px);
        height: clamp(400px, 54dvh, 520px);
        max-width: 620px;
        aspect-ratio: auto;
        overflow: visible;
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .study-mini-breakdown {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 300px;
        max-width: 300px;
        height: clamp(400px, 54dvh, 520px);
        max-height: clamp(400px, 54dvh, 520px);
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translate3d(-14px, -50%, 0) scale(0.985);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
        will-change: transform, opacity;
        backface-visibility: hidden;
        z-index: 15;
    }

    .study-static-wrapper.has-breakdown.desktop-expanded .study-mini-breakdown {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, -50%, 0) scale(1);
    }

    .study-static-wrapper.has-breakdown.desktop-expanded .study-card-group {
        transform: translate3d(124px, 0, 0);
    }


    .study-static-wrapper.has-breakdown .study-card-container {
        max-width: 620px;
    }

    body[data-mode="study"] .study-card-container .face-content {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .study-static-wrapper .card__face {
        min-height: 0;
        overflow: hidden;
    }

    .study-static-wrapper .face-content.vocab-content {
        padding: 22px 22px 24px;
    }

    .study-static-wrapper.desktop-expanded .study-back-hook-slot {
        padding-top: 14px;
    }

    .study-mini-panel {
        padding: 18px;
    }

    .study-mini-panel-header {
        margin-bottom: 12px;
    }

    .study-mini-char-card {
        gap: 12px;
        padding: 14px;
    }

    .study-mini-char-header {
        grid-template-columns: 56px minmax(0, 1fr) 18px;
        gap: 12px;
    }

    .study-mini-char-hero {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        font-size: 2.05rem;
    }

    .study-mini-char-py,
    .study-mini-char-defline {
        font-size: 0.86rem;
    }

    .study-mini-char-body {
        gap: 12px;
    }

    .study-mini-component-chip {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 10px 12px;
    }

    .study-mini-component-hz {
        width: 44px;
        height: 44px;
        font-size: 1.68rem;
    }

    .study-mini-component-py {
        font-size: 0.84rem;
    }

    .study-mini-component-def,
    .study-mini-inline-py,
    .study-mini-inline-def {
        font-size: 0.82rem;
    }

    .study-mini-dropdown summary {
        padding: 11px 13px;
        font-size: 0.86rem;
    }

    .study-mini-inline-row {
        padding: 10px 11px;
    }

    .study-mini-inline-hz {
        font-size: 1.2rem;
    }

    .study-static-wrapper.desktop-expanded .study-def {
        max-width: min(100%, 38ch);
        font-size: clamp(1.02rem, 1.45vw, 1.14rem);
    }

    .study-static-wrapper.desktop-expanded .study-def.study-def--compact {
        font-size: clamp(0.96rem, 1.28vw, 1.06rem);
    }

    .study-static-wrapper.desktop-expanded .example-section {
        margin-top: 20px !important;
        padding-top: 16px !important;
    }

    .study-static-wrapper.desktop-expanded .example-item {
        padding: 16px 18px;
    }

    .study-static-wrapper.desktop-expanded .example-zh {
        font-size: 1.15rem;
        line-height: 1.36;
    }

    .study-static-wrapper.desktop-expanded .example-py {
        font-size: 0.96rem !important;
        line-height: 1.34 !important;
    }

    .study-static-wrapper.desktop-expanded .example-en {
        font-size: 0.94rem;
        line-height: 1.4;
    }

    .sentence-card-container {
        width: min(100%, 840px);
        max-width: 840px;
        min-height: clamp(250px, 34vh, 390px);
    }

    .sentence-card-container .card__face {
        padding: clamp(26px, 3vw, 34px);
    }

    .sentence-card-container .face-content {
        padding: clamp(20px, 3vw, 28px);
    }

    .sentence-card-container .hz-sentence {
        font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
        line-height: 1.44;
    }

    .sentence-card-container .hz-sentence-back {
        font-size: clamp(1.55rem, 3vw, 2.2rem) !important;
        line-height: 1.54;
    }

    .sentence-card-container .sentence-pinyin {
        font-size: clamp(1.02rem, 1.9vw, 1.2rem) !important;
        line-height: 1.38;
    }

    .sentence-card-container .sentence-def {
        max-width: 700px;
        font-size: clamp(1.04rem, 1.6vw, 1.18rem) !important;
        line-height: 1.5;
    }

    .reader-feed {
        width: min(100%, 980px);
    }

    .reader-entry-gloss {
        font-size: clamp(1.06rem, 1.35vw, 1.22rem);
    }

    .reader-entry-sentence {
        font-size: clamp(1.8rem, 2.8vw, 2.8rem) !important;
    }
}

@media (min-width: 1200px) {
    body[data-mode="study"] #app {
        overflow: hidden;
    }

    #app {
        max-width: 1420px;
        padding-left: 48px;
        padding-right: 48px;
    }

    #mainContainer {
        max-width: 1240px;
    }

    body[data-mode="study"] #mainContainer {
        overflow-y: hidden !important;
        min-height: 0;
    }

    body[data-mode="study"] .study-static-wrapper,
    body[data-mode="study"] .study-center-box {
        height: 100%;
    }

    .study-center-box {
        max-width: 1240px;
        padding: 18px 0 22px;
    }

    .study-desktop-shell {
        position: relative;
        width: min(100%, 1120px);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        min-height: 0;
        overflow: visible;
    }

    .study-card-group {
        width: min(100%, 760px);
        height: clamp(360px, 52dvh, 500px);
        max-width: 760px;
        aspect-ratio: auto;
        overflow: visible;
        transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .study-mini-breakdown {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 320px;
        max-width: 320px;
        height: clamp(360px, 52dvh, 500px);
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translate3d(-18px, -50%, 0) scale(0.985);
        transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
        max-height: clamp(360px, 52dvh, 500px);
        will-change: transform, opacity;
        backface-visibility: hidden;
        z-index: 15;
    }

    .study-static-wrapper.has-breakdown.desktop-expanded .study-mini-breakdown {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, -50%, 0) scale(1);
    }

    .study-static-wrapper.has-breakdown.desktop-expanded .study-card-group {
        transform: translate3d(136px, 0, 0);
    }

    .study-static-wrapper.has-breakdown .study-card-container {
        max-width: 760px;
    }

    body[data-mode="study"] .study-card-container .face-content {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .study-static-wrapper .card__face {
        min-height: 0;
        overflow: hidden;
    }

    .study-static-wrapper .face-content.vocab-content {
        padding: 24px 24px 26px;
    }

    .study-mini-panel-header {
        margin-bottom: 16px;
    }

    .study-static-wrapper.desktop-expanded .study-back-hook-slot {
        padding-top: 16px;
    }

    .study-static-wrapper.desktop-expanded .study-def {
        max-width: min(100%, 36ch);
        font-size: clamp(1.08rem, 1.3vw, 1.22rem);
    }

    .study-static-wrapper.desktop-expanded .study-def.study-def--compact {
        font-size: clamp(1rem, 1.1vw, 1.12rem);
    }

    .study-static-wrapper.desktop-expanded .example-section {
        margin-top: 24px !important;
        padding-top: 18px !important;
    }

    .study-static-wrapper.desktop-expanded .example-item {
        padding: 18px 20px;
    }

    .study-static-wrapper.desktop-expanded .example-zh {
        font-size: 1.24rem;
        line-height: 1.36;
    }

    .study-static-wrapper.desktop-expanded .example-py {
        font-size: 1.02rem !important;
        line-height: 1.34 !important;
    }

    .study-static-wrapper.desktop-expanded .example-en {
        font-size: 1rem;
        line-height: 1.42;
    }

    .sentence-card-container {
        width: min(100%, 940px);
        max-width: 940px;
        min-height: clamp(280px, 40vh, 440px);
    }

    .sentence-card-container .card__face {
        padding: clamp(28px, 3vw, 40px);
    }

    .sentence-card-container .face-content {
        padding: clamp(22px, 3vw, 34px);
    }

    .sentence-card-container .hz-sentence {
        font-size: clamp(2.9rem, 4.8vw, 4.6rem) !important;
        line-height: 1.42;
    }

    .sentence-card-container .hz-sentence-back {
        font-size: clamp(1.85rem, 3vw, 2.6rem) !important;
        line-height: 1.52;
    }

    .sentence-card-container .sentence-pinyin {
        font-size: clamp(1.14rem, 1.6vw, 1.32rem) !important;
        line-height: 1.38;
    }

    .sentence-card-container .sentence-def {
        max-width: 760px;
        font-size: clamp(1.18rem, 1.55vw, 1.38rem) !important;
        line-height: 1.52;
    }

    .reader-feed {
        width: min(100%, 1040px);
    }

    .reader-entry.is-current {
        padding-left: clamp(28px, 3.6vw, 38px);
        padding-right: clamp(28px, 3.6vw, 38px);
    }

    .reader-entry-sentence {
        font-size: clamp(1.6rem, 2.2vw, 2.6rem) !important;
    }

    .reader-entry-gloss {
        font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    }
}

@media (max-width: 900px) {
    .mc-option-btn.is-hz {
        font-size: clamp(1.5rem, 7vmin, 2.2rem) !important;
        min-height: clamp(65px, 13vh, 108px) !important;
    }

    .mc-option-btn.is-hz.chars-3-btn {
        font-size: clamp(1.35rem, 6vmin, 1.95rem) !important;
    }

    .mc-option-btn.is-hz.chars-long-btn {
        font-size: clamp(1.08rem, 5vmin, 1.5rem) !important;
    }

    .reader-shell {
        padding: 0;
    }

    .reader-audio-btn {
        width: 44px;
        height: 44px;
        border-radius: 15px;
    }

    .reader-audio-btn svg {
        width: 22px;
        height: 22px;
    }

    .reader-entry.is-current {
        padding: 22px 18px 18px;
        border-radius: 26px;
    }

    .reader-entry.is-open .reader-entry-detail-inner {
        padding-top: 14px;
        margin-top: 14px;
    }

    .reader-entry-pinyin {
        font-size: clamp(0.92rem, 3.8vw, 1.02rem);
        line-height: 1.48;
    }

    .reader-entry-gloss {
        margin-top: 4px;
        font-size: 0.95rem;
        line-height: 1.58;
    }
}

@media (max-width: 767px) {
    .qz-card--mc {
        padding: 24px 18px;
        gap: 14px;
    }

    .qz-label--mc {
        padding-right: 28px;
    }

    .qz-prompt--mc {
        width: 100%;
    }

    .qz-card--mc .mc-option-btn {
        min-height: 72px;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .qz-card--mc .mc-option-btn.is-hz {
        min-height: clamp(60px, 12vh, 104px) !important;
    }

    .sentence-card-container {
        width: 90vw;
        min-height: 190px;
    }
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    #app {
        padding-top: max(54px, env(safe-area-inset-top) + 40px) !important;
        padding-right: max(12px, env(safe-area-inset-right) + 10px) !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom) + 10px) !important;
        padding-left: max(12px, env(safe-area-inset-left) + 10px) !important;
    }

    #mainContainer {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .dynamic-island-wrapper {
        top: max(8px, env(safe-area-inset-top) + 2px);
        justify-content: center;
        padding-left: max(12px, env(safe-area-inset-left) + 10px);
        padding-right: max(12px, env(safe-area-inset-right) + 10px);
    }

    .dynamic-island {
        width: min(46vw, 262px);
        max-width: 262px;
        height: 36px;
        padding: 0 12px;
        border-radius: 22px;
        box-shadow: 0 10px 22px rgba(255, 158, 181, 0.14), 0 2px 5px rgba(255, 158, 181, 0.1);
    }

    .dynamic-island::before {
        border-radius: 21px;
    }

    .dynamic-island.expanded {
        height: 126px;
        border-radius: 24px;
    }

    .island-header {
        height: 36px;
        gap: 8px;
    }

    .island-progress-container {
        height: 5px;
    }

    .island-stats {
        gap: 6px;
        font-size: 0.74rem;
    }

    .global-progress-text {
        font-size: 0.72rem;
        min-width: 34px;
    }

    .island-chevron svg {
        width: 18px;
        height: 18px;
    }

    .island-body {
        margin-top: 8px;
        gap: 6px;
    }

    .island-lesson-btn,
    .island-action-btn {
        min-height: 0;
        padding: 7px 8px;
        border-radius: 12px;
        font-size: 0.74rem;
    }

    .bottom-nav {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body[data-mode="study"] #app {
        overflow: hidden;
    }

    body[data-mode="study"] #mainContainer {
        overflow: hidden !important;
        min-height: 0;
    }

    body[data-mode="study"] .study-static-wrapper,
    body[data-mode="study"] .study-center-box {
        height: 100%;
    }

    body[data-mode="study"] .study-center-box {
        justify-content: center;
        padding: 6px 0 4px;
    }

    body[data-mode="study"] .study-desktop-shell {
        position: relative;
        width: min(100%, 620px);
        height: 100%;
        min-height: 0;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    body[data-mode="study"] .study-card-group {
        width: min(100%, 352px);
        max-width: 352px;
        height: clamp(272px, 78vh, 334px);
        aspect-ratio: auto;
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    body[data-mode="study"] .study-card-container {
        max-width: 352px;
    }

    body[data-mode="study"] .study-mini-breakdown {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 228px;
        max-width: 228px;
        height: clamp(272px, 78vh, 334px);
        max-height: clamp(272px, 78vh, 334px);
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        transform: translate3d(-10px, -50%, 0) scale(0.985);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
        z-index: 15;
    }

    body[data-mode="study"] .study-static-wrapper.has-breakdown.desktop-expanded .study-mini-breakdown {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, -50%, 0) scale(1);
    }

    body[data-mode="study"] .study-static-wrapper.has-breakdown.desktop-expanded .study-card-group {
        transform: translate3d(98px, 0, 0);
    }


    body[data-mode="study"] .study-static-wrapper .face-content.vocab-content {
        padding: 14px 14px 12px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-back-main {
        padding-bottom: 8px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-back-core {
        flex: 0 0 auto;
        gap: 0;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-pinyin-row {
        margin-bottom: 0.1rem;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-back-core .pinyin-display {
        font-size: clamp(0.82rem, 1.7vw, 0.96rem) !important;
        line-height: 1.16 !important;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-def {
        max-width: min(100%, 24ch);
        margin-top: 4px;
        font-size: clamp(0.8rem, 1.65vw, 0.92rem) !important;
        line-height: 1.32 !important;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-def.study-def--compact {
        font-size: clamp(0.74rem, 1.52vw, 0.84rem) !important;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-back-hook-slot {
        padding-top: 8px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .memory-hook-card {
        width: min(100%, 286px);
        margin-top: 8px;
        padding: 10px 12px 11px;
        border-radius: 14px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .memory-hook-label {
        margin-bottom: 5px;
        font-size: 0.56rem;
        letter-spacing: 0.1em;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .memory-hook-text {
        font-size: 0.78rem;
        line-height: 1.42;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .example-section {
        margin-top: 10px !important;
        padding-top: 10px !important;
        padding-bottom: 0 !important;
        border-top: 1px solid rgba(255, 158, 181, 0.14);
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .example-section-title {
        margin-bottom: 7px;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .study-compact-example-card {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 9px 10px 10px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.76);
        border: 1px solid rgba(255, 158, 181, 0.12);
    }

    .study-compact-example-list {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .study-compact-example-card.is-primary {
        background: rgba(255, 246, 250, 0.92);
        border-color: rgba(255, 158, 181, 0.28);
    }

    .study-compact-example-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 1px;
    }

    .study-compact-example-tags {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    .study-compact-example-card .example-lesson-tag {
        font-size: 0.58rem;
        padding: 2px 6px;
    }

    .study-compact-example-card .ex-speaker-btn {
        margin: 0;
        padding: 4px;
        color: var(--primary-dark);
        background: rgba(255, 158, 181, 0.12);
    }

    .study-compact-example-card .example-zh {
        font-size: clamp(0.9rem, 1.9vw, 1rem) !important;
        line-height: 1.24 !important;
        margin-bottom: 0;
    }

    .study-compact-example-card .example-py {
        font-size: clamp(0.68rem, 1.42vw, 0.76rem) !important;
        line-height: 1.22 !important;
        margin-bottom: 0 !important;
    }

    .study-compact-example-card .example-en {
        font-size: clamp(0.66rem, 1.4vw, 0.74rem) !important;
        line-height: 1.22 !important;
        margin-bottom: 0 !important;
    }

    .study-compact-example-badge {
        background: var(--primary) !important;
        color: #ffffff !important;
        border: none !important;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-panel {
        padding: 12px;
        border-radius: 22px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-panel-header {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-char-card {
        gap: 8px;
        padding: 10px;
        border-radius: 16px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-char-meta {
        gap: 8px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-char-card + .study-mini-char-card {
        margin-top: 10px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-char-header {
        grid-template-columns: 44px minmax(0, 1fr) 16px;
        gap: 10px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-char-hero {
        width: 44px;
        height: 44px;
        font-size: 1.66rem;
        border-radius: 13px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-char-py,
    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-char-defline,
    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-component-py,
    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-component-def,
    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-inline-py,
    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-inline-def {
        font-size: 0.72rem;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-component-chip,
    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-inline-row {
        padding: 8px 9px;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-component-chip {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-component-hz {
        width: 38px;
        height: 38px;
        font-size: 1.42rem;
    }

    body[data-mode="study"] .study-static-wrapper.compact-landscape .study-mini-dropdown summary {
        padding: 9px 11px;
        font-size: 0.74rem;
    }

    #charModal.modal-overlay {
        padding: 10px !important;
    }

    #charModal .modal-sheet {
        width: min(96vw, 860px) !important;
        max-width: 860px !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 24px !important;
    }

    #charModalContent {
        padding: 16px 18px 20px 18px !important;
    }

    .modal-header-nav {
        margin-bottom: 10px !important;
    }

    .modal-top-bar,
    .modal-header-nav {
        min-height: 32px;
    }

    .modal-back-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .modal-close-btn {
        width: 32px;
        height: 32px;
    }

    .anatomy-master-container:not(.is-word) {
        display: grid !important;
        grid-template-columns: minmax(200px, 220px) minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    .anatomy-master-container.is-word {
        max-width: 520px !important;
    }

    .anatomy-left-col {
        flex: none !important;
        width: 100% !important;
    }

    .anatomy-right-col {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .anatomy-hero-section {
        margin-bottom: 14px !important;
    }

    .hero-py {
        font-size: 1.15rem !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
        letter-spacing: 0.3px !important;
    }

    .hero-def {
        font-size: 0.88rem !important;
        line-height: 1.42 !important;
        margin-top: 4px !important;
    }

    #charModal #strokeOrderContainer {
        width: 112px !important;
        height: 112px !important;
        margin: 0 auto 10px auto !important;
    }

    #charModal #strokeOrderFallback {
        margin-bottom: 10px !important;
        font-size: 0.76rem !important;
    }

    .dna-section-title {
        font-size: 0.68rem !important;
        margin-bottom: 8px !important;
        padding-left: 8px !important;
    }

    .standalone-banner,
    .standalone-banner-wrapper {
        margin-bottom: 14px !important;
    }

    .standalone-banner,
    .standalone-banner-wrapper > div:first-child {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .anatomy-bento-grid {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .bento-node {
        border-radius: 18px !important;
    }

    .bento-header {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .bento-icon-hz {
        font-size: 1.52rem !important;
        width: 28px !important;
    }

    .bento-py {
        font-size: 0.82rem !important;
    }

    .bento-def {
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
    }

    .sub-component-list {
        padding: 8px 8px 10px 8px !important;
        gap: 3px !important;
    }

    .sub-component-item {
        gap: 10px !important;
        padding: 6px 10px !important;
    }

    .sub-component-item .sub-hz {
        font-size: 1.08rem !important;
        width: 20px !important;
    }

    .sub-component-item .sub-def {
        font-size: 0.78rem !important;
    }

    .appears-in-row {
        padding: 10px 12px !important;
    }

    .appears-label {
        font-size: 0.64rem !important;
    }

    .appears-node {
        font-size: 1.15rem !important;
    }

    .appears-in-row::after {
        font-size: 0.72rem !important;
    }

    .component-grid {
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) !important;
        gap: 6px !important;
        padding: 2px 4px 14px 4px !important;
    }

    .component-tile {
        border-radius: 10px !important;
    }

    .prof-list-board {
        border-radius: 18px !important;
    }

    .prof-search-header {
        padding: 10px 12px 8px 12px !important;
    }

    .prof-search-input {
        font-size: 0.94rem !important;
        padding: 10px 14px 10px 40px !important;
    }

    .prof-search-icon {
        left: 14px !important;
        width: 16px !important;
        height: 16px !important;
    }

    .prof-list-scroll {
        padding-bottom: 56px !important;
    }

    .prof-list-row {
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .prof-list-actions {
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .prof-list-action-btn {
        padding: 7px 10px !important;
        font-size: 0.76rem !important;
    }

    .prof-list-row.is-selectable {
        padding-left: 8px !important;
    }

    .prof-hz-large {
        font-size: 1.55rem !important;
        min-width: 34px !important;
    }

    .prof-hz-sentence {
        font-size: 0.96rem !important;
        line-height: 1.28 !important;
        margin-bottom: 2px !important;
    }

    .prof-py {
        font-size: 0.8rem !important;
    }

    .prof-en {
        font-size: 0.74rem !important;
        line-height: 1.18 !important;
    }

    .prof-tag {
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
    }
}

@media (min-width: 768px) {
    .qz-wrap .qz-card--typing {
        width: min(100%, 540px) !important;
        max-width: 540px !important;
        min-height: clamp(500px, 72vh, 660px);
        padding: 42px 34px 48px !important;
        border-radius: 32px;
    }

    .qz-wrap .qz-card--typing .qz-prompt {
        margin-bottom: 24px !important;
    }

    .qz-wrap .qz-card--typing[data-prompt-type="hz"] .qz-prompt {
        font-size: clamp(5.1rem, 9.4vh, 7.4rem) !important;
    }

    .qz-wrap .qz-card--typing[data-prompt-type="hz"] .qz-prompt.chars-3 {
        font-size: clamp(4.2rem, 7.7vh, 6rem) !important;
    }

    .qz-wrap .qz-card--typing[data-prompt-type="hz"] .qz-prompt.chars-long {
        font-size: clamp(2.9rem, 5.6vh, 4.25rem) !important;
        line-height: 1.08 !important;
    }

    .qz-wrap .qz-card--typing[data-prompt-type="py"] .qz-prompt {
        width: min(100%, 13ch);
        font-size: clamp(1.12rem, 1.8vw, 1.38rem) !important;
    }

    .qz-wrap .qz-card--typing[data-prompt-type="def"] .qz-prompt {
        width: min(100%, 17ch);
        font-size: clamp(1.32rem, 2.2vw, 1.72rem) !important;
        line-height: 1.34 !important;
    }

    .qz-wrap .qz-card--typing .qz-input-wrap {
        width: min(100%, 290px);
        gap: 10px;
    }

    .qz-wrap .qz-card--typing .qz-input {
        padding: 0 !important;
        border-radius: 0 !important;
        font-size: 1rem !important;
    }

    .qz-wrap .qz-card--typing[data-answer-type="py"] .qz-input {
        font-size: 0.98rem !important;
    }

    .qz-wrap .qz-card--typing .qz-reveal-box {
        width: min(100%, 360px);
        padding: 14px 16px 12px;
    }
}

/* --- Dialogue Player --- */
body.dialogue-player-mode {
  color: var(--text-main);
}

body.dialogue-player-mode::before {
  background:
    linear-gradient(180deg, rgba(255, 247, 250, 0.86) 0%, rgba(255, 241, 247, 0.78) 48%, rgba(255, 250, 252, 0.74) 100%),
    radial-gradient(circle at 18% 14%, rgba(255, 158, 181, 0.16) 0%, rgba(255, 158, 181, 0) 32%),
    radial-gradient(circle at 78% 18%, rgba(255, 214, 228, 0.28) 0%, rgba(255, 214, 228, 0) 30%),
    url('5178019.jpg') no-repeat center top;
  background-size: cover;
}

body.dialogue-player-mode #app {
  padding-top: max(128px, env(safe-area-inset-top) + 114px) !important;
  padding-bottom: calc(var(--nav-height) + 26px) !important;
}

body.dialogue-player-mode #mainContainer {
  max-width: 1040px;
  padding-left: 16px;
  padding-right: 16px;
}

body.dialogue-player-mode .dynamic-island-wrapper,
body.dialogue-player-mode #topSubNav {
  display: none !important;
}

.dialogue-player-chrome-host {
  position: fixed;
  top: max(12px, env(safe-area-inset-top) + 8px);
  left: 0;
  right: 0;
  z-index: 1105;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  transition: opacity 0.3s ease;
}

.dialogue-player-chrome-host.is-visible {
  opacity: 1;
}

body.dialogue-player-panel-open .dialogue-player-chrome-host {
  pointer-events: auto;
  z-index: 3005;
}

.dialogue-player-wrapper {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - var(--nav-height) - 156px);
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0 0 12px;
}

.dialogue-player-topbar {
  width: min(720px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas: "progress time menu play";
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 12px;
  border-radius: 24px;
  border: 1px solid rgba(255, 158, 181, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 247, 250, 0.92) 100%);
  box-shadow: 0 18px 40px rgba(255, 158, 181, 0.16), 0 4px 12px rgba(255, 158, 181, 0.1);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  pointer-events: auto;
}

.dialogue-player-progress-wrap {
  grid-area: progress;
  display: flex;
  align-items: center;
  min-width: 0;
}

.dialogue-player-meta-time {
  grid-area: time;
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  color: rgba(105, 86, 101, 0.84);
  flex: 0 0 auto;
  min-width: 72px;
  text-align: right;
  white-space: nowrap;
}

.dialogue-player-progress {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dialogue-player-progress-track {
  position: relative;
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 158, 181, 0.18);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(255, 158, 181, 0.16);
}

.dialogue-player-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary-dark) 0%, #ffc5d4 100%);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dialogue-player-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(255, 158, 181, 0.42);
  box-shadow: 0 4px 12px rgba(255, 158, 181, 0.2);
  transform: translate(-50%, -50%);
  transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dialogue-player-progress-status {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: -0.01em;
  color: rgba(120, 108, 121, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.dialogue-player-progress-status[hidden] {
  display: none !important;
}

.dialogue-player-menu {
  grid-area: menu;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dialogue-player-icon-btn,
.dialogue-player-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 158, 181, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 244, 247, 0.88) 100%);
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 20px rgba(255, 158, 181, 0.12);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dialogue-player-icon-btn:hover,
.dialogue-player-toggle:hover:not(:disabled),
.dialogue-player-menu-trigger[aria-expanded="true"] {
  transform: translateY(-1px) scale(1.02);
  color: #ec4899;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 14px 28px rgba(255, 158, 181, 0.16);
}

.dialogue-player-icon-btn svg,
.dialogue-player-toggle svg {
  width: 20px;
  height: 20px;
}

.dialogue-player-toggle {
  grid-area: play;
  width: 54px;
  height: 54px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(180deg, #ffb3c6 0%, #ff9eb5 100%);
  border-color: rgba(255, 158, 181, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 16px 30px rgba(255, 158, 181, 0.24);
}

.dialogue-player-toggle.is-loading svg {
  animation: dialogue-player-spin 0.9s linear infinite;
}

@keyframes dialogue-player-spin {
  to {
    transform: rotate(360deg);
  }
}

.dialogue-player-toggle:hover:not(:disabled) {
  color: #ffffff;
  background: linear-gradient(180deg, #ffbdd0 0%, #ff9eb5 100%);
}

.dialogue-player-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.dialogue-player-settings-modal {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
  z-index: 10020 !important;
}

.dialogue-player-settings-modal.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.dialogue-player-settings-sheet {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 248, 251, 0.98) 100%) !important;
  width: min(92vw, 760px) !important;
  height: min(88vh, 760px) !important;
  max-width: 760px !important;
  max-height: 88vh !important;
  border-radius: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
  transform: translate3d(0, 10px, 0) scale(0.99) !important;
  opacity: 0 !important;
  will-change: transform, opacity;
  contain: layout paint;
  transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.18s ease !important;
}

.dialogue-player-settings-modal.open .dialogue-player-settings-sheet {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

.dialogue-player-settings-content {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 0 !important;
  padding-right: 0 !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  contain: layout paint;
}

.dialogue-player-settings-window {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

body.dialogue-player-panel-open {
  overflow: hidden;
}

.dialogue-player-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: 0;
  padding: 22px 24px 16px;
  background: linear-gradient(180deg, rgba(255, 252, 253, 0.98) 0%, rgba(255, 247, 249, 0.95) 100%);
  border-bottom: 1px solid rgba(255, 158, 181, 0.12);
}

.dialogue-player-panel-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dialogue-player-panel-kicker {
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 72, 153, 0.68);
}

.dialogue-player-panel-title {
  font-family: "SF Pro Display", "Inter", system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 720;
  letter-spacing: -0.04em;
  color: var(--text-strong);
}

.dialogue-player-panel-copy {
  flex: 1 0 100%;
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(120, 108, 121, 0.78);
  margin-top: 2px;
}

.dialogue-player-settings-stack {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  padding: 18px 24px 24px;
  gap: 14px;
}

.dialogue-player-settings-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 158, 181, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 247, 249, 0.82) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.dialogue-player-settings-card--script {
  min-height: 0;
}

.dialogue-player-settings-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dialogue-player-settings-card-title {
  font-family: "SF Pro Display", "Inter", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

.dialogue-player-settings-card-copy {
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(120, 108, 121, 0.74);
}

.dialogue-player-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px;
}

.dialogue-player-panel-close {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 158, 181, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.dialogue-player-panel-close:hover {
  color: #ec4899;
  transform: scale(1.03);
}

.dialogue-player-panel-close svg {
  width: 18px;
  height: 18px;
}

.dialogue-player-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dialogue-player-field--textarea {
  margin-top: 0;
  flex: 1;
}

.dialogue-player-field-label {
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(120, 108, 121, 0.72);
}

.dialogue-player-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dialogue-player-chip-group--tight {
  gap: 6px;
}

.dialogue-player-chip {
  min-height: 42px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 158, 181, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(120, 108, 121, 0.78);
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 720;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.dialogue-player-chip:hover,
.dialogue-player-chip.is-active {
  color: #ec4899;
  border-color: rgba(255, 158, 181, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 241, 246, 0.94) 100%);
  box-shadow: 0 10px 22px rgba(255, 158, 181, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.dialogue-player-select,
.dialogue-player-input {
  width: 100%;
  border: 1px solid rgba(255, 158, 181, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-main);
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  outline: none;
}

.dialogue-player-select {
  appearance: none;
  padding: 12px 14px;
}

.dialogue-player-field--slider {
  gap: 10px;
}

.dialogue-player-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialogue-player-slider-caption {
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.dialogue-player-slider-value {
  font-family: "SF Pro Display", "Inter", system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 760;
  letter-spacing: -0.03em;
  color: #ec4899;
}

.dialogue-player-range {
  width: 100%;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 158, 181, 0.14);
  outline: none;
}

.dialogue-player-range::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 158, 181, 0.38);
  box-shadow: 0 8px 20px rgba(255, 158, 181, 0.18);
}

.dialogue-player-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 158, 181, 0.38);
  box-shadow: 0 8px 20px rgba(255, 158, 181, 0.18);
}

.dialogue-player-input {
  min-height: 250px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.52;
}

.dialogue-player-input::placeholder {
  color: rgba(120, 108, 121, 0.46);
}

.dialogue-player-shell {
  position: relative;
  width: min(100%, 980px);
  height: calc(100dvh - var(--nav-height) - 176px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px clamp(14px, 4vw, 28px);
  border-radius: 36px;
  border: 1.5px solid rgba(255, 158, 181, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 246, 249, 0.62) 100%);
  box-shadow: 0 22px 54px rgba(255, 158, 181, 0.14), 0 8px 18px rgba(148, 163, 184, 0.08);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  overflow: hidden;
}

.dialogue-player-stage-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 6px 0;
}

.dialogue-player-eyebrow {
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(236, 72, 153, 0.64);
}

.dialogue-player-subtitle {
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(120, 108, 121, 0.76);
}

.dialogue-player-lines {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: min(12vh, 128px) clamp(8px, 2vw, 14px) min(18vh, 180px);
  scroll-behavior: smooth;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
}

.dialogue-player-empty {
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 20px;
}

.dialogue-player-empty-title {
  font-family: "SF Pro Display", "Inter", system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

.dialogue-player-empty-copy {
  max-width: 430px;
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(120, 108, 121, 0.7);
}

.dialogue-player-line {
  display: block;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  opacity: 0.34;
  transform: scale(0.97);
  transform-origin: center left;
  touch-action: pan-y !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dialogue-player-line:hover {
  opacity: 0.58;
}

.dialogue-player-line.is-active {
  opacity: 1;
  transform: scale(1.02);
}

.dialogue-player-line-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  font-family: "SF Pro Display", "Inter", system-ui, sans-serif;
  font-size: clamp(1.42rem, 3.5vw, 3.15rem);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -0.055em;
  color: var(--text-main);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dialogue-player-line.is-active .dialogue-player-line-text {
  font-weight: 760;
  color: var(--text-strong);
}

.dialogue-player-speaker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 179, 198, 0.18);
  border: 1px solid rgba(255, 158, 181, 0.18);
  color: #ec4899;
  font-family: "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: 0.34em;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transform: translateY(-0.12em);
}

.dialogue-player-line-copy {
  text-wrap: balance;
}

.dialogue-player-line-content {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dialogue-player-line-translation {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(0.92rem, 1.4vw, 1.08rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(120, 108, 121, 0.78);
  transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.28s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.dialogue-player-line.is-active .dialogue-player-line-translation {
  max-height: 96px;
  opacity: 1;
  transform: translateY(0);
}

.dialogue-player-line.has-hanzi .dialogue-player-line-copy,
.dialogue-player-line.has-hanzi .dialogue-player-line-copy .interactive-char,
.dialogue-player-line.has-hanzi .dialogue-player-line-copy .interactive-word {
  font-family: 'twkai', 'Noto Serif TC', serif;
  font-weight: normal;
  letter-spacing: 0.01em;
}

.dialogue-player-line.has-hanzi .dialogue-player-line-copy .interactive-char,
.dialogue-player-line.has-hanzi .dialogue-player-line-copy .interactive-word {
  color: inherit;
  line-height: inherit;
}

.dialogue-player-line-copy .interactive-word {
  padding: 0 0.12em;
  margin: 0 -0.04em;
}

@media (max-width: 767px) {
  body.dialogue-player-mode #app {
    padding-top: max(120px, env(safe-area-inset-top) + 108px) !important;
    padding-bottom: calc(var(--nav-height) + 18px) !important;
  }

  .dialogue-player-wrapper {
    min-height: calc(100dvh - var(--nav-height) - 152px);
  }

  .dialogue-player-chrome-host {
    top: max(10px, env(safe-area-inset-top) + 6px);
  }

  .dialogue-player-topbar {
    width: calc(100vw - 18px);
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "progress time menu play";
    gap: 8px;
    padding: 10px;
    border-radius: 22px;
  }

  .dialogue-player-meta-time {
    display: block;
    min-width: 76px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .dialogue-player-settings-modal {
    align-items: flex-end !important;
    padding:
      max(8px, env(safe-area-inset-top) + 8px)
      8px
      calc(var(--nav-height) + env(safe-area-inset-bottom) + 8px)
      8px !important;
  }

  .dialogue-player-settings-sheet {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--nav-height) - 20px) !important;
    max-height: none !important;
    border-radius: 28px !important;
    transform: translate3d(0, 12px, 0) scale(0.99) !important;
  }

  .dialogue-player-settings-modal.open .dialogue-player-settings-sheet {
    transform: translateY(0) scale(1) !important;
  }

  .dialogue-player-settings-content {
    max-height: none !important;
  }

  .dialogue-player-panel-head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 0;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, rgba(255, 252, 253, 0.98) 0%, rgba(255, 247, 249, 0.94) 100%);
    border-bottom: 1px solid rgba(255, 158, 181, 0.12);
  }

  .dialogue-player-settings-stack {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 16px;
    grid-template-columns: 1fr;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .dialogue-player-panel-grid {
    grid-template-columns: 1fr;
  }

  .dialogue-player-settings-card {
    padding: 14px;
    border-radius: 20px;
  }

  .dialogue-player-input {
    min-height: 180px;
    max-height: 34dvh;
  }

  .dialogue-player-shell {
    height: calc(100dvh - var(--nav-height) - 176px);
    padding: 16px 14px;
    border-radius: 28px;
  }

  .dialogue-player-lines {
    padding-top: 64px;
    padding-bottom: min(24vh, 170px);
  }

  .dialogue-player-line {
    padding: 14px 0;
  }

  .dialogue-player-line-text {
    font-size: clamp(1.36rem, 7.8vw, 2.3rem);
    gap: 8px 10px;
  }

  .dialogue-player-icon-btn,
  .dialogue-player-toggle {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .dialogue-player-toggle {
    width: 48px;
    height: 48px;
    border-radius: 18px;
  }

  .dialogue-player-speaker {
    font-size: 0.4em;
    padding: 5px 10px;
  }
}