/* TOCFLCraft study desk. Presentation only; legacy mode and study handlers remain intact.
   Loaded after style.css. !important is limited to the legacy inline/important cascade. */
:root {
  --craft-ink: #203c40;
  --craft-jade: #087e83;
  --craft-tint: #e4f1ef;
  --craft-canvas: #f3f7f6;
  --craft-line: #ccdcd8;
  --craft-muted: #526b6b;
  --craft-gold: #946313;
  --craft-radius: 18px;
  --craft-ui: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --craft-hanzi: 'TWKai', 'LXGW WenKai TC', 'Noto Sans TC', serif;
  --craft-mobile-header-h: 48px;
  --craft-mobile-nav-h: 68px;
}
@font-face {
  font-family: 'TWKai';
  src: url('/twkai.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
html:not([data-theme]), html[data-theme="light"], body:not([data-theme]), body[data-theme="light"] {
  --bg-color: var(--craft-canvas) !important;
  --bg-grad-2: var(--craft-canvas) !important;
  --card-bg: #fff !important;
  --text-main: var(--craft-ink) !important;
  --text-muted: var(--craft-muted) !important;
  --border-color: var(--craft-line) !important;
  --primary-color: var(--craft-jade);
  --shadow-sm: 0 2px 6px rgb(32 60 64 / 4%);
  --shadow-md: 0 12px 32px rgb(32 60 64 / 7%);
}
html[data-theme="dark"], body[data-theme="dark"], body.dark, body.dark-mode,
html[data-theme="night"], body[data-theme="night"] {
  --bg-color: #132529 !important; --card-bg: #1e3439 !important;
  --text-main: #e9f3f0 !important; --text-muted: #b3cbc6 !important;
  --border-color: #3b5557 !important; --primary-color: #76d3cc;
  --craft-tint: #284548; --craft-muted: #b3cbc6; --craft-jade: #76d3cc;
}
body, #vanilla-workspace { background: var(--bg-color) !important; color: var(--text-main); }
body { line-height: 1.5; }
button, input, select, textarea { font-family: var(--craft-ui) !important; }
button, [role="button"], summary, a, input, select, textarea { touch-action: manipulation; }
button, [role="button"], summary { -webkit-tap-highlight-color: transparent; }
button { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary-color) !important; outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--card-bg) !important;
}
button:disabled { cursor: not-allowed; }
.dropdown-menu { animation: none !important; transform-origin: top right; }

/* Sentence and quiz settings overlap their learning cards when expanded. Keep
   the compact toolbar in front so the menu and its motion remain visible. */
#view-sentences > div:first-child,
#view-quiz > div:first-child {
  position: relative !important;
  z-index: 30 !important;
  overflow: visible !important;
}
#view-sentences .sentence-card,
#view-quiz .quiz-card { z-index: 1 !important; }
.craft-skip { position: fixed; left: 16px; top: -80px; z-index: 100000; padding: 12px 20px; background: var(--card-bg); color: var(--text-main); border-radius: 8px; }
.craft-skip:focus { top: 12px; }
.craft-mobile-nav { display: none; }
.hf-sidebar { width: 240px; background: var(--card-bg); }
.hf-main-content { margin-left: 240px; width: calc(100% - 240px); min-width: 0; padding-top: 0 !important; transition: none !important; }
.study-view.active { animation: none !important; }
.hf-sidebar-header { min-height: 80px; padding: 18px 14px; gap: 8px; }
.hf-logo { gap: 8px; font-size: 17px; }
.hf-logo img { width: 32px; height: 32px; box-shadow: none; }
.hf-sidebar-toggle { min-width: 32px; height: 36px; box-shadow: none; }
.hf-sidebar-scroll { padding: 14px 12px; }
.hf-menu-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 8px 12px; }
.hf-menu-group { margin-bottom: 22px; }
.hf-menu-item { min-height: 46px; padding: 9px 12px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; gap: 10px; margin-bottom: 3px; color: var(--text-muted); }
.hf-menu-item .hf-menu-icon { background: transparent !important; color: var(--text-muted) !important; width: 25px; height: 28px; border-radius: 0; }
.hf-menu-item.active { background: var(--craft-tint) !important; border-color: transparent !important; color: var(--text-main) !important; box-shadow: inset 3px 0 var(--primary-color) !important; font-weight: 700; }
.hf-menu-item.active .hf-menu-icon { color: var(--primary-color) !important; }
.hf-menu-item:hover { background: var(--bg-color); transform: none; }
.hf-menu-item .hf-badge { font-size: 10px; padding-inline: 5px; }
.hf-topbar { padding: 12px 24px; min-height: 58px; border-bottom: 1px solid var(--border-color); gap: 14px; }
.hf-search-container { max-width: 520px; border-radius: 10px; min-height: 42px; background: var(--card-bg); box-shadow: none; font-size: 13px; }
.hf-search-container span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-header-actions { flex-shrink: 0; }
.hf-notif-btn, .hf-user-pill { min-height: 40px; }
#app-workspace { min-width: 0; }
.study-area { min-width: 0; max-width: 1160px; width: 100%; margin-inline: auto; }
.hf-dashboard-container { padding: 28px !important; }
#view-dashboard { max-width: 1160px !important; padding-bottom: 36px !important; }
.hf-dashboard-header-row { margin-bottom: 24px !important; }
.hf-welcome { font-size: clamp(1.45rem, 3vw, 2rem) !important; font-weight: 700 !important; line-height: 1.25; }
.hf-subtitle { max-width: 60ch; line-height: 1.65; font-size: 14px !important; }
.craft-greeting { color: var(--primary-color); font-family: var(--craft-hanzi); font-size: 1.1em; margin-right: 8px; font-weight: 400; }
.hf-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px;
  align-items: start;
  width: 100%;
}
.hf-dashboard-col-left, .hf-dashboard-col-right {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0;
}
.hf-dashboard-col-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.hf-dashboard-col-right > :last-child { margin-top: 0 !important; }
@media (min-width: 901px) {
  .hf-dashboard-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr) !important;
    gap: 24px;
  }
  .hf-dashboard-col-left, .hf-dashboard-col-right {
    grid-column: auto !important;
  }
}
.hf-dash-top-recents-container { margin-bottom: 24px; }
.hf-dash-widget-card { padding: 20px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); background: var(--card-bg); border: 1px solid var(--border-color); }
.hf-dash-recents-top-card { padding: 14px 18px; border-left: 3px solid var(--primary-color); }
.hf-dash-widget-header { gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hf-dash-widget-title { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.hf-dash-widget-action { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; color: var(--primary-color); }
.hf-dash-recent-styled { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
#dashboard-recent-mode-pill, .hf-recent-status-badge, #dashboard-recent-icon { color: var(--primary-color) !important; background: var(--craft-tint) !important; }
.hf-recent-ring-fill { stroke: var(--primary-color); }
.hf-dash-stats-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin: 0 !important; border: none !important; }
.hf-mini-stat-card { border: 1px solid var(--border-color) !important; border-radius: 16px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important; background: var(--card-bg) !important; padding: 16px 14px !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; }
.hf-mini-stat-val { font-size: 26px !important; font-weight: 700 !important; color: var(--text-main); }
.hf-mini-stat-lbl { font-size: 12px !important; color: var(--text-muted); margin-top: 2px; }
.hf-mini-stat-icon { background: var(--craft-tint) !important; color: var(--primary-color) !important; }
.hf-review-queue-card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.hf-review-icon-box { background: var(--craft-tint); color: var(--primary-color); }
.hf-review-action-btn { min-height: 44px; border-radius: 8px; background: var(--craft-tint); color: var(--primary-color); border-color: var(--border-color); }
.craft-reading-entry { background: var(--craft-tint) !important; border: 0 !important; border-radius: 10px !important; gap: 12px; }
.practice-preview-card { padding: 24px; border-radius: var(--craft-radius); border: 1px solid var(--border-color); box-shadow: 0 8px 24px rgb(32 60 64 / 5%); background: var(--card-bg); }
.practice-card-header { padding-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.practice-header-left { flex-wrap: wrap; gap: 8px; }
.practice-badge-tag { background: transparent; color: var(--text-main); padding: 0; font-size: 14px; }
.practice-badge-tag svg { display: none; }
.practice-book-badge { text-transform: none; letter-spacing: 0; }
.practice-progress-row { margin-block: 16px; }
.practice-prompt-area { background: var(--craft-tint) !important; border: 0 !important; box-shadow: none !important; border-radius: 12px; padding: 20px; }
.practice-prompt-header-row { gap: 12px; align-items: flex-start; }
.practice-prompt-sublabel { font-size: 13px; font-weight: 500; max-width: 30ch; }
.practice-char-zh { font-family: var(--craft-hanzi) !important; font-size: clamp(3.5rem, 8vw, 5rem) !important; font-weight: 400; line-height: 1.4; color: var(--text-main) !important; }
.practice-char-py { font-size: 18px; font-weight: 600; color: var(--primary-color); }
.practice-options-grid { gap: 10px; margin-top: 18px; }
.practice-option-btn { min-height: 54px; padding: 12px 16px; border-radius: 9px; background: var(--card-bg); box-shadow: none; border: 1px solid var(--border-color); }
.practice-option-btn:hover:not(.answered) { transform: none; border-color: var(--primary-color); background: var(--bg-color); }
.practice-option-key { border-radius: 5px; background: var(--bg-color); color: var(--text-muted); min-width: 28px; }
.practice-option-btn.correct { border-color: #217955 !important; background: #e4f5ec !important; color: #19573e !important; }
.practice-option-btn.wrong { border-color: #ae4047 !important; background: #fff0f0 !important; color: #8b2932 !important; }
.practice-audio-pill-btn, .practice-restart-btn, .practice-icon-btn { min-height: 44px; min-width: 44px; box-shadow: none; }
.practice-feedback-row { flex-wrap: wrap; gap: 12px; border-radius: 10px; }
.study-header { padding: 16px 0 !important; gap: 12px !important; border-bottom: 0 !important; margin-bottom: 12px !important; }
.study-session-tracker { background: var(--card-bg) !important; box-shadow: none !important; border: 1px solid var(--border-color) !important; border-radius: 10px !important; padding: 6px 10px !important; gap: 10px !important; }
.study-session-tracker .stat-box { box-shadow: none !important; border: 0 !important; background: var(--bg-color) !important; border-radius: 6px !important; }
.study-session-tracker .stat-unknown { color: #9c4344 !important; }
.study-session-tracker .stat-known { color: #217955 !important; }
#visual-progress-bar { background: var(--primary-color) !important; }
.study-session-tracker .progress-bar-wrapper { box-shadow: none !important; }
#current-title { display: block !important; color: var(--text-main); font-size: 20px; font-weight: 700; text-align: center; width: 100%; }
body:is([data-mode="dashboard"], [data-mode="dictionary"], [data-mode="custom-sets"]) #current-title { display: none !important; }
#flashcard-container { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 14px; }
.flashcard-container { width: 100%; max-width: 900px; margin: 0 auto !important; }
#flashcard, #flashcard-background { width: 100% !important; max-width: 900px !important; height: var(--craft-flashcard-height, clamp(500px, 62vh, 600px)) !important; min-height: 480px !important; margin-inline: auto; border-radius: 26px !important; box-shadow: none !important; }
#flashcard .card-front, #flashcard .card-back, #flashcard-background .card-front { border: 1px solid var(--border-color) !important; border-radius: 20px !important; background: var(--card-bg) !important; box-shadow: 0 10px 30px rgb(32 60 64 / 5%) !important; }
#flashcard .card-front::before { content: ''; position: absolute; width: 190px; height: 190px; border: 1px solid var(--border-color); background: linear-gradient(var(--border-color),var(--border-color)) center/1px 100% no-repeat, linear-gradient(var(--border-color),var(--border-color)) center/100% 1px no-repeat; opacity: .45; pointer-events: none; }
#fc-front-text { position: relative; z-index: 1; color: var(--text-main) !important; text-shadow: none !important; }
#fc-front-text, #fc-back-word, #fc-bg-character { font-family: var(--craft-hanzi) !important; line-height: 1.4 !important; }
#flashcard .fc-voice-btn { width: 44px !important; height: 44px !important; right: 14px; top: 14px; color: var(--primary-color) !important; background: var(--craft-tint) !important; border-radius: 50%; opacity: 1; }
#fc-part-of-speech { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--text-muted) !important; }
#fc-pinyin { font-size: clamp(1.3rem, 4vw, 1.75rem) !important; color: var(--primary-color) !important; line-height: 1.5; }
#fc-meaning { font-size: 1.1rem !important; line-height: 1.6; color: var(--text-main) !important; }
.card-extra-info { padding: 20px !important; }
.fc-ex-zh { font-size: 1.55rem; line-height: 1.9; }
.craft-card-actions { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; max-width: 640px; margin: 18px auto 0; }
.craft-card-actions button { min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-color); font-weight: 700; background: var(--card-bg); color: var(--text-main); }
.craft-card-actions .craft-reveal { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.craft-card-actions kbd { font: inherit; font-size: 12px; opacity: .75; margin-left: 6px; }
.craft-card-hint { text-align: center; font-size: 12px; color: var(--text-muted); margin: 12px 0 24px; }
.reading-toolbar { border-radius: 12px; box-shadow: none; gap: 16px; background: var(--card-bg); padding: 16px; border: 1px solid var(--border-color); }
/* Reading has its own passage filters and progress; the vocabulary tracker is unrelated. */
body[data-mode="reading"] .study-header { display: none !important; }
.reading-toolbar-left, .reading-toolbar-right { flex-wrap: wrap; gap: 8px; min-width: 0; }
.reading-paper-sheet { border-radius: 16px !important; box-shadow: none !important; background: var(--card-bg) !important; }
.reading-paper-passage-body, .reading-paper-passage-body p, .reading-paper-q-text, .reading-paper-opt-text { font-family: var(--craft-hanzi) !important; line-height: 1.95; }
.reading-paper-q-text { color: var(--text-main); }
.reading-paper-option { min-height: 52px; border-radius: 8px; }
.reading-bottom-nav { box-shadow: none; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); }
.reading-nav-btn { min-height: 44px; }
.dict-search-input, .quiz-input, .reading-search-input { font-family: var(--craft-ui), var(--craft-hanzi) !important; font-size: 16px !important; }
.dict-search-wrapper, .dict-search-container { box-shadow: none !important; }
.dict-view-results-area { min-width: 0; }
.dict-empty-state { padding: 32px 16px !important; border-radius: 12px; background: var(--bg-color); }
.dict-empty-state h3 { font-size: 20px; }
.hf-quick-card { box-shadow: none; border-radius: 12px; min-width: 0; }
.hf-quick-card:hover { transform: none; border-color: var(--primary-color); }
.modal-overlay:not(.active), .modal-overlay:not(.active) *, .side-drawer:not(.active), .side-drawer:not(.active) * { visibility: hidden !important; }
.modal-overlay.active, .side-drawer.active { visibility: visible; }
.modal-content, .auth-modal-card { border-radius: 18px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); }
.modal-header { gap: 12px; }
.modal-header button, .close-modal-btn { min-width: 44px; min-height: 44px; }
.side-drawer.active .drawer-close-btn { display: inline-flex !important; visibility: visible !important; min-width: 44px; min-height: 44px; }
#app-toast-notification { max-width: min(90vw, 480px) !important; background: var(--text-main) !important; color: var(--card-bg) !important; border-radius: 12px !important; padding: 14px 20px !important; font-size: 14px !important; box-shadow: var(--shadow-md) !important; }
.fun-loader { background: var(--bg-color) !important; }
.fun-title { font-family: var(--craft-ui) !important; color: var(--text-main) !important; font-size: 24px !important; text-shadow: none !important; }
.fun-percentage { color: var(--primary-color) !important; text-shadow: none !important; }
.bubble.filled { background: var(--primary-color) !important; box-shadow: none !important; }
.bubble { box-shadow: none !important; }
.fun-footer { text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.quiz-feedback, .wr-feedback-toast, .practice-feedback-msg { font-family: var(--craft-ui), var(--craft-hanzi) !important; line-height: 1.6; }
body:is([data-theme="dark"], [data-theme="midnight"]) .craft-card-actions .craft-reveal { color: #132529; }
body:is([data-theme="dark"], [data-theme="midnight"]) .practice-option-btn.correct .practice-option-text-zh { color: #19573e !important; }
body:is([data-theme="dark"], [data-theme="midnight"]) .practice-option-btn.wrong .practice-option-text-zh { color: #8b2932 !important; }

/* Landscape study desk: the reference uses a quiet illustration as orientation,
   so the memorable visual sits behind the learning surface instead of competing
   with the Chinese word being studied. */
#view-dashboard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  background-image: none !important;
}
#view-dashboard::before,
#view-dashboard::after {
  content: none !important;
  display: none !important;
}
#view-dashboard > * { position: relative; z-index: 1; }
.hf-dashboard-header-row { padding-top: 24px; }

/* Pastel tiles turn the existing line icons into a recognizable learning map. */
.hf-sidebar { background: #fbfdfc !important; border-right-color: #dcebe7 !important; }
.hf-sidebar-header { border-bottom-color: #e3efec !important; }
.hf-logo { align-items: center; position: relative; }
.hf-logo img { width: 36px !important; height: 36px !important; }
.hf-logo::after {
  display: none !important;
  content: none !important;
}
.hf-menu-item {
  min-height: 58px;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  gap: 11px !important;
  color: #244247 !important;
}
.hf-menu-item .hf-menu-icon,
.hf-menu-item .hf-menu-icon:is(.icon-dashboard, .icon-custom-sets, .icon-dictionary, .icon-review, .icon-fluency, .icon-flashcards, .icon-writing, .icon-sentences, .icon-quiz, .icon-story, .icon-reading) {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  color: var(--tile-ink) !important;
  background: var(--tile-bg) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-ink) 7%, transparent);
}
.hf-menu-item .hf-menu-icon svg { width: 23px !important; height: 23px !important; stroke-width: 2.2 !important; }
.hf-menu-item .hf-menu-icon svg,
.craft-mobile-nav svg {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hf-menu-item .hf-menu-icon {
  display: grid !important;
  place-items: center;
  position: relative;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease, color 180ms ease !important;
}
.hf-menu-item:hover .hf-menu-icon,
.hf-menu-item:focus-visible .hf-menu-icon { transform: translateY(-1px) rotate(-2deg); }
.hf-menu-item.active .hf-menu-icon { transform: none; }
.hf-menu-text { display: flex !important; flex-direction: column; justify-content: center; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.15; }
.hf-menu-text::after { content: ''; display: block; margin-top: 3px; color: #78908f; font-size: 10px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btn-dashboard .hf-menu-text::after { content: 'Overview & progress'; }
#btn-custom-sets .hf-menu-text::after { content: 'Your word lists'; }
#btn-dictionary .hf-menu-text::after { content: 'Look up words'; }
#btn-review-queue .hf-menu-text::after { content: 'Words to review'; }
#btn-new-feature .hf-menu-text::after { content: 'Listen & speak'; }
#btn-flashcards .hf-menu-text::after { content: 'Learn with cards'; }
#btn-writing .hf-menu-text::after { content: 'Write & improve'; }
#btn-sentences .hf-menu-text::after { content: 'Real world examples'; }
#btn-quiz .hf-menu-text::after { content: 'Test your knowledge'; }
#btn-story .hf-menu-text::after { content: 'Read & grow'; }
#btn-reading .hf-menu-text::after { content: 'TOCFL comprehension'; }
.hf-menu-item.active { background: #e4f4f1 !important; box-shadow: inset 4px 0 #0a9c9d !important; }
.hf-menu-item:hover { background: #f0f8f6 !important; }
#btn-dashboard, #hf-review-details > summary { --tile-bg: #d7f2ef; --tile-ink: #058b8c; }
#btn-custom-sets { --tile-bg: #eee4ff; --tile-ink: #7951d8; }
#btn-dictionary { --tile-bg: #e0efff; --tile-ink: #2e82d8; }
#btn-new-feature { --tile-bg: #ffe5e7; --tile-ink: #c64b5d; }
#btn-flashcards { --tile-bg: #ddf3e4; --tile-ink: #3c9a68; }
#btn-writing { --tile-bg: #fff0d5; --tile-ink: #d48618; }
#btn-sentences { --tile-bg: #e2efff; --tile-ink: #448bd4; }
#btn-quiz { --tile-bg: #eee5ff; --tile-ink: #7c56d9; }
#btn-story, #btn-reading { --tile-bg: #ffe6e1; --tile-ink: #d96654; }
#hf-review-details .hf-menu-icon { --tile-bg: #ffeadc; --tile-ink: #e17836; }
/* User-supplied dimensional SVG artwork carries its own colored square tile. */
.hf-menu-item .hf-menu-icon,
.hf-menu-item.active .hf-menu-icon {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.hf-menu-item .hf-menu-icon .craft-nav-art {
  display: block;
  width: 42px !important;
  height: 42px !important;
  max-width: none;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.hf-menu-item:hover .hf-menu-icon .craft-nav-art,
.hf-menu-item:focus-visible .hf-menu-icon .craft-nav-art {
  transform: translateY(-1px) scale(1.035);
}
.hf-menu-item.active .hf-menu-icon .craft-nav-art { transform: none; }
.hf-menu-item.active .hf-menu-icon { color: var(--tile-ink) !important; background: var(--tile-bg) !important; }
.hf-menu-item.active .hf-menu-icon {
  background: transparent !important;
}
.hf-menu-item:hover .hf-menu-icon,
.hf-menu-item:focus-visible .hf-menu-icon {
  transform: none;
}

.hf-dash-recents-top-card, .practice-preview-card, .hf-dash-widget-card { position: relative; overflow: hidden; }
.hf-dash-recents-top-card::after {
  content: none !important;
  display: none !important;
}
.practice-prompt-area {
  position: relative;
  overflow: hidden;
  background: var(--craft-tint) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  padding: 20px;
}
.practice-vocab-prompt-content, .practice-prompt-header-row, .practice-target-word-wrap { position: relative; z-index: 1; }
#flashcard .card-front { overflow: hidden; background-color: #fbfdfb !important; }
#flashcard .card-front::before { z-index: 0; border-color: #a8d7d0; opacity: .3; }
#flashcard .card-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(228,245,241,.22)); pointer-events: none; z-index: 0; }
#flashcard .card-front > * { position: relative; z-index: 1; }

@media (max-width: 800px) {
  .hf-dashboard-header-row { padding-top: 12px; }
  .hf-logo::after { display: none; }
  .hf-logo img { width: 32px !important; height: 32px !important; }
  body.craft-menu-open #sidebar .hf-menu-item { min-height: 60px !important; }
  body.craft-menu-open #sidebar .hf-menu-text::after { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-menu-item .hf-menu-icon { transition: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .hf-dashboard-container { padding: 20px 24px !important; }
  .hf-topbar { padding: 12px 24px !important; }
  .hf-dashboard-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .hf-dashboard-col-right { display: flex !important; flex-direction: column !important; gap: 16px !important; }
  .hf-dashboard-col-right > :last-child { margin-top: 0 !important; }
}
@media (max-width: 800px) {
  html, body { width: 100%; min-width: 0 !important; overflow-x: clip; }
  #vanilla-workspace { display: block; min-width: 0; width: 100%; }
  .hf-sidebar, .hf-sidebar.collapsed { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; overflow: visible; padding-bottom: 0; z-index: 1000; }
  .hf-main-content, .hf-main-content.collapsed { width: 100% !important; margin-left: 0 !important; min-height: calc(100dvh - 64px); padding-top: calc(var(--craft-mobile-header-h, 48px) + 6px) !important; padding-bottom: calc(var(--craft-mobile-nav-h, 68px) + 16px + env(safe-area-inset-bottom)) !important; }
  .hf-sidebar-header, .hf-sidebar.collapsed .hf-sidebar-header { min-height: 48px; padding: 8px 12px !important; flex-direction: row !important; gap: 8px !important; }
  #sidebar .hf-sidebar-header { max-height: none !important; opacity: 1 !important; pointer-events: auto !important; }
  .hf-sidebar.collapsed .hf-logo span { display: inline !important; }
  .hf-logo { font-size: 16px; }
  .hf-sidebar-toggle { display: none !important; }
  .mobile-header-actions { gap: 6px; }
  .mobile-header-actions .user-nav-name { display: none; }
  body.craft-menu-open #sidebar .hf-menu-group { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-bottom: 20px !important; }
  body.craft-menu-open #sidebar .hf-menu-label { display: block !important; grid-column: 1 / -1; }
  body.craft-menu-open #sidebar .hf-menu-item { width: 100% !important; max-width: none !important; min-height: 52px !important; padding: 10px !important; border: 1px solid var(--border-color); font-size: 12px; white-space: normal; justify-content: flex-start !important; gap: 8px !important; }
  body.craft-menu-open #sidebar .hf-menu-text { display: inline !important; }
  body.craft-menu-open #sidebar .hf-badge { display: inline !important; }
  .hf-topbar { min-height: 48px; padding: 6px 14px; background: var(--bg-color); border-bottom: 0; }
  body[data-mode="dictionary"] .hf-topbar { display: none !important; }
  .hf-search-container { width: 100%; max-width: none; font-size: 12px; }
  #app-workspace { padding: 0 !important; width: 100% !important; }
  .desktop-header-actions { display: none !important; }
  .craft-mobile-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    align-items: center;
    position: fixed;
    z-index: 1205;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    min-height: var(--craft-mobile-nav-h, 68px);
    padding: 5px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    background: var(--craft-shell-paper, var(--card-bg));
    border-top: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    box-shadow: 0 -4px 20px rgba(54, 91, 86, .07);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, visibility 0.28s;
    will-change: transform;
  }
  .craft-mobile-nav.craft-nav-hidden {
    transform: translateY(calc(100% + env(safe-area-inset-bottom))) !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  body.craft-menu-open .craft-mobile-nav {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1300 !important;
  }
  .craft-mobile-nav button {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    width: 100%;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 12px;
    font-family: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.15;
    white-space: nowrap;
    padding: 4px 2px;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, transform 0.18s ease;
  }
  .craft-mobile-nav .craft-nav-label {
    display: block;
    font-family: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: inherit;
    transition: color 0.18s ease, font-weight 0.18s ease;
  }
  .craft-mobile-nav button:active {
    transform: scale(0.94);
  }
  .craft-mobile-nav button[aria-current="page"],
  .craft-mobile-nav button[aria-expanded="true"] {
    background: transparent;
    color: var(--primary-color);
  }
  .craft-mobile-nav button[aria-current="page"] .craft-nav-label,
  .craft-mobile-nav button[aria-expanded="true"] .craft-nav-label {
    color: var(--primary-color);
    font-weight: 700;
  }
  .craft-mobile-nav svg { width: 20px; height: 20px; }
  .hf-dashboard-container { padding: 14px 14px 28px !important; }
  .hf-dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .hf-dashboard-col-right { display: flex !important; flex-direction: column !important; gap: 14px !important; }
  .hf-dashboard-header-row { margin-bottom: 20px !important; }
  .hf-welcome { font-size: 24px !important; }
  .hf-subtitle { font-size: 13px !important; margin-top: 8px !important; }
  .hf-dash-top-recents-container { margin-bottom: 20px; }
  .hf-dash-widget-card { padding: 16px; }
  .hf-dash-widget-header > div { flex-wrap: wrap; }
  .hf-recent-status-badge { display: none; }
  #dashboard-recent-title { font-size: 13px !important; }
  #dashboard-recent-subtitle { font-size: 12px !important; }
  .practice-preview-card { padding: 16px; }
  .practice-prompt-area { padding: 16px; }
  .practice-prompt-sublabel { font-size: 12px; }
  .practice-options-grid { grid-template-columns: 1fr; }
  .practice-option-btn { min-height: 52px; font-size: 14px; }
  .study-area { padding: 0 16px !important; margin: 0; }
  .study-header { padding-top: 8px !important; }
  .study-session-tracker { width: 100%; max-width: 100%; gap: 8px !important; }
  #current-title { font-size: 18px; text-align: left; }
  #flashcard-container { padding: 0; width: 100% !important; max-width: 100% !important; }
  #flashcard, #flashcard-background { 
    width: min(calc(100% - 20px), 430px) !important;
    max-width: 430px !important;
    height: var(--craft-flashcard-height, clamp(480px, 64dvh, 560px)) !important; 
    min-height: var(--craft-flashcard-height, clamp(480px, 64dvh, 560px)) !important;
    margin: 0 auto !important;
  }
  #flashcard .card-front::before { width: 160px; height: 160px; }
  .craft-card-actions { gap: 8px; }
  .craft-card-actions button { font-size: 12px; padding: 10px 6px; }
  .craft-card-actions kbd { display: none; }
  .craft-card-hint { font-size: 11px; }
  .reading-toolbar { padding: 12px; }
  .reading-toolbar-left, .reading-toolbar-right { width: 100%; }
  .reading-search-box { flex: 1 1 100%; }
  .reading-paper-container { padding: 16px !important; }
  .reading-paper-q-text { font-size: 1.3rem; }
  .reading-bottom-nav { gap: 8px; padding: 10px; }
  .reading-nav-progress-text { font-size: 11px; }
  .reading-nav-btn { padding-inline: 12px; }
  .custom-sets-header-bar { align-items: flex-start; flex-wrap: wrap; }
  .hf-quick-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-overlay { padding: 12px; }
  .modal-content { max-width: 100% !important; max-height: 90dvh; }
  #app-toast-notification { bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
  :is(.reading-toolbar, .dict-hero-info, .writing-controls, .sentence-controls, .study-header) button,
  summary, .dict-save-btn, .dict-folder-btn { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; }
  #story-floating-dock { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Warm study paper across modes. The landscape stays quiet in the background,
   while each learning surface keeps enough contrast for text and controls. */
#app-workspace {
  background-color: #f7fbf9 !important;
  background-image: url('/study-landscape.svg?cv=20260918_v126_soft') !important;
  background-repeat: no-repeat !important;
  background-position: right -34px top !important;
  background-size: min(900px, 78vw) auto !important;
}
body[data-mode="dashboard"] #app-workspace { background-image: none !important; }
.study-view { background: transparent !important; }
.study-view:not(#view-dashboard)::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 250px;
  background: linear-gradient(180deg, rgba(247,251,249,.25), rgba(247,251,249,0));
  pointer-events: none;
}
.study-view:not(#view-dashboard) { position: relative; isolation: isolate; }
.study-view:not(#view-dashboard) > * { position: relative; z-index: 1; }

/* Custom sets: a calm two-step card creator with one field per face. */
.cset-folder-viewer-modal {
  background: #fffdf9 !important;
  border: 1px solid #eadfd6 !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 70px rgba(83, 67, 52, .16) !important;
}
.cset-cards-grid { gap: 18px 16px !important; padding: 12px 4px 28px !important; }
.cset-stacked-card-wrapper,
.cset-inline-editor-card,
.cset-add-tile-card { max-width: 240px !important; min-height: 260px !important; height: 260px !important; }
.cset-card-face,
.cset-inline-face,
.cset-add-tile-card .cset-stacked-front-layer {
  border-color: #eadfd6 !important;
  border-radius: 24px !important;
  background: #fffdf9 !important;
  box-shadow: 0 12px 30px rgba(83, 67, 52, .08) !important;
}
.cset-card-face-front { background: linear-gradient(155deg, #fffdf9 0%, #f1faf6 100%) !important; }
.cset-card-face-back { background: linear-gradient(155deg, #fffdf9 0%, #fff2e9 100%) !important; }
.cset-inline-face-front { background: linear-gradient(155deg, #fffdf9 0%, #f1faf6 100%) !important; }
.cset-inline-face-back { background: linear-gradient(155deg, #fffdf9 0%, #fff2e9 100%) !important; }
.cset-inline-term-input {
  max-width: 190px !important;
  font-size: 1.95rem !important;
  border: 1px solid #e7d9ce !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.74) !important;
  padding: 10px 12px !important;
  box-shadow: inset 0 1px 2px rgba(83, 67, 52, .04) !important;
}
.cset-inline-term-input:focus { border-color: #0a9c9d !important; box-shadow: 0 0 0 4px rgba(10,156,157,.12) !important; }
.cset-inline-hint-caption { max-width: 22ch; font-size: .75rem !important; line-height: 1.4 !important; }
.cset-inline-back-body { gap: 10px !important; }
.cset-inline-back-field:has(#cset-inline-input-pinyin) { display: none !important; }
.cset-inline-clean-input { min-height: 50px !important; padding: 10px 12px !important; border-radius: 13px !important; background: rgba(255,255,255,.82) !important; border-color: #e7d9ce !important; font-size: .96rem !important; }
.cset-inline-clean-input:focus { border-color: #0a9c9d !important; box-shadow: 0 0 0 4px rgba(10,156,157,.12) !important; }
.cset-inline-clean-auto { display: none !important; }
.cset-inline-label { font-size: .7rem !important; color: #7b6b5c !important; letter-spacing: .02em !important; text-transform: none !important; }
.cset-inline-btn-flip,
.cset-inline-save-btn,
.cset-inline-cancel-btn { min-height: 42px !important; border-radius: 12px !important; }
.cset-inline-btn-flip { background: #e7f5f1 !important; border-color: #b9ded6 !important; }
.cset-inline-save-btn { background: #0a8f8f !important; box-shadow: 0 5px 14px rgba(10,143,143,.2) !important; }
.cset-add-tile-card .cset-stacked-front-layer { border: 1.5px dashed #b7d9d1 !important; background: rgba(241,250,246,.72) !important; }
.cset-add-tile-circle { background: #dff3ec !important; color: #0a8f8f !important; }
.cset-add-tile-label { color: #244247 !important; }

/* Remove the hard rectangular feel from the remaining learning surfaces. */
.writing-card.modern-card,
.sentence-card,
.quiz-card,
.quiz-settings-glass,
.reading-toolbar,
.reading-paper-sheet,
.dict-slick-search-box,
.dict-empty-state,
.study-session-tracker,
.study-area > .study-header {
  border-radius: 24px !important;
  border-color: #eadfd6 !important;
  box-shadow: 0 12px 34px rgba(83, 67, 52, .07) !important;
}
.writing-card.modern-card,
.sentence-card,
.quiz-card,
.reading-paper-sheet,
.dict-empty-state { background: rgba(255,253,249,.88) !important; }
.writing-controls-row,
.sentence-controls,
.quiz-options,
.reading-bottom-nav { border-radius: 18px !important; }
#flashcard .card-front,
#flashcard .card-back { border-color: #eadfd6 !important; box-shadow: 0 16px 38px rgba(83,67,52,.1) !important; }
#flashcard .card-front { background-color: #fffdf9 !important; }
#flashcard .card-back { background: #fffdf9 !important; }

@media (max-width: 800px) {
  #app-workspace { background-size: auto 300px !important; background-position: right -24px top !important; }
  .cset-folder-viewer-modal { border-radius: 22px !important; }
  .cset-stacked-card-wrapper,
  .cset-inline-editor-card,
  .cset-add-tile-card { max-width: none !important; height: 250px !important; min-height: 250px !important; }
}

/* Flashcards are deliberately plain: the character needs the entire card.
   The landscape belongs below the learning surface, where it frames rather
   than competes with the word. */
body:not([data-mode="dashboard"]) #app-workspace {
  background-position: right bottom !important;
  background-size: min(820px, 72vw) auto !important;
}
body[data-mode="flashcards"] #app-workspace { background-size: min(900px, 78vw) auto !important; }
#flashcard .card-front {
  background: #fffdf9 !important;
  background-image: none !important;
}
#flashcard .card-front::before,
#flashcard .card-front::after { content: none !important; background: none !important; }
.craft-card-actions { display: none !important; }
.craft-card-hint { margin: 16px 0 24px !important; color: #6e7d79 !important; }

@media (max-width: 800px) {
  body:not([data-mode="dashboard"]) #app-workspace { background-size: auto 220px !important; background-position: right bottom !important; }
}

/* On phones, preload the next flashcard without drawing its edge behind the
   active card. JavaScript adds this class only after horizontal swipe intent. */
@media (max-width: 800px) {
  #flashcard-background {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #flashcard-background.is-swipe-preview-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* The supplied misty landscape becomes the quiet, shared canvas for learning.
   Warm paper panels remain deliberately opaque enough for long Chinese text. */
html:not([data-theme="dark"]) body:not(.dark):not(.midnight):not(.dark-mode) {
  background: var(--craft-canvas) !important;
}
html:not([data-theme="dark"]) body:not(.dark):not(.midnight):not(.dark-mode) #vanilla-workspace {
  background: transparent !important;
}
#app-workspace,
body[data-mode="dashboard"] #app-workspace,
body:not([data-mode="dashboard"]) #app-workspace,
body[data-mode="flashcards"] #app-workspace {
  background-color: rgba(247, 252, 250, .72) !important;
  /* The landscape belongs to the page canvas. Repainting it here caused a
     second, misaligned mountain scene to show through some study modes. */
  background-image: linear-gradient(180deg, rgba(248, 253, 252, .52), rgba(247, 252, 250, .68)) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Fluency Flow's selector and practice card are sibling stacking layers.
   Raise the toolbar layer itself so its open menus never paint behind the card. */
#view-new-feature,
#view-new-feature .fluency-flow-toolbar,
#view-new-feature .fluency-tool-item { overflow: visible !important; }
#view-new-feature .fluency-flow-toolbar { z-index: 30 !important; }
#view-new-feature .fluency-tool-item[open] { z-index: 31 !important; }
#view-new-feature .global-book-selector .hf-dropdown-content { z-index: 32 !important; }

.nf-speech-box {
  display: none;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 46px;
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
  border-radius: 16px;
  background: var(--card-bg);
  background: color-mix(in srgb, var(--card-bg) 88%, var(--primary-color) 12%);
  color: var(--text-main);
  box-sizing: border-box;
}

.nf-volume-indicator {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  opacity: 0.65;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.nf-speech-status {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
}

.nf-speech-retry-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, var(--border-color));
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--primary-color);
  font: 700 0.78rem 'Quicksand', system-ui, sans-serif;
  cursor: pointer;
}

.nf-speech-box[data-state='success'] { border-color: color-mix(in srgb, #22c55e 45%, var(--border-color)); }
.nf-speech-box[data-state='success'] .nf-volume-indicator { background: #22c55e; }
.nf-speech-box[data-state='error'] { border-color: color-mix(in srgb, #ef4444 38%, var(--border-color)); }
.nf-speech-box[data-state='error'] .nf-volume-indicator { background: #ef4444; }
.nf-speech-box[data-state='quiet'] .nf-volume-indicator { background: #f59e0b; }

.nf-speech-retry-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-color) 36%, transparent);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .nf-speech-box { align-items: flex-start; flex-wrap: wrap; }
  .nf-speech-retry-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nf-volume-indicator { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  #view-new-feature .global-book-selector[open] > .hf-dropdown-content {
    animation: craft-fluency-book-dropdown-in 240ms cubic-bezier(.16, 1, .3, 1) both !important;
    transform-origin: top center;
  }
  #view-new-feature .fluency-flow-toolbar details[open] > .fluency-settings-dropdown-content {
    animation: craft-fluency-settings-dropdown-in 220ms cubic-bezier(.16, 1, .3, 1) both !important;
    transform-origin: top right;
  }
}
@keyframes craft-fluency-book-dropdown-in {
  from { opacity: 0; transform: translate(-50%, -14px) scale(.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes craft-fluency-settings-dropdown-in {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The bottom navigation reuses the desktop icon drawings and their colored tiles. */
@media (max-width: 800px) {
  .craft-mobile-nav button { --craft-mobile-icon-bg: #e4f1ef; --craft-mobile-icon-ink: #087e83; }
  .craft-mobile-nav button[data-craft-mode="dashboard"] { --craft-mobile-icon-bg: #d7f2ef; --craft-mobile-icon-ink: #058b8c; }
  .craft-mobile-nav button[data-craft-mode="flashcards"] { --craft-mobile-icon-bg: #ddf3e4; --craft-mobile-icon-ink: #3c9a68; }
  .craft-mobile-nav button[data-craft-mode="quiz"] { --craft-mobile-icon-bg: #eee5ff; --craft-mobile-icon-ink: #7c56d9; }
  .craft-mobile-nav #craft-menu-toggle { --craft-mobile-icon-bg: #eee5ff; --craft-mobile-icon-ink: #7c56d9; }
  .craft-mobile-nav svg {
    width: 20px;
    height: 20px;
    padding: 4px;
    box-sizing: content-box;
    border-radius: 9px;
    background: var(--craft-mobile-icon-bg);
    color: var(--craft-mobile-icon-ink);
    border-radius: 8px;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease;
  }
  .craft-mobile-nav button[aria-current="page"] svg,
  .craft-mobile-nav button[aria-expanded="true"] svg {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--craft-mobile-icon-ink) 18%, transparent);
  }
  .craft-mobile-nav button:active svg { transform: scale(.92); }
  .craft-mobile-nav .craft-nav-art {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    shape-rendering: geometricPrecision;
    transform: translateZ(0);
    filter: drop-shadow(0 2px 4px rgba(32, 60, 64, 0.08));
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), filter 180ms ease;
    pointer-events: none;
  }
  .craft-mobile-nav button[aria-current="page"] .craft-nav-art,
  .craft-mobile-nav button[aria-expanded="true"] .craft-nav-art {
    transform: translateY(-2px) scale(1.08);
    filter: drop-shadow(0 3px 6px rgba(8, 126, 131, 0.24));
  }
  .craft-mobile-nav button:active .craft-nav-art { transform: scale(.92); }
}

/* Reading controls use intentional rows on narrow screens instead of one crowded strip. */
.reading-toolbar {
  gap: 14px !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, .82) !important;
}
.reading-paper-options-list { gap: 10px !important; padding-left: 0 !important; }
.reading-paper-option {
  min-height: 58px;
  padding: 13px 15px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .66) !important;
}
.reading-paper-option:hover { border-color: color-mix(in srgb, var(--primary-color) 46%, var(--border-color)); }
.reading-paper-opt-key {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0 !important;
  border-radius: 8px;
  background: var(--craft-tint);
  color: var(--primary-color);
}
.reading-paper-option.selected .reading-paper-opt-key { background: var(--primary-color); color: #fff; }

@media (max-width: 800px) {
  .reading-toolbar { padding: 14px !important; gap: 12px !important; border-radius: 18px !important; }
  .reading-toolbar-left,
  .reading-toolbar-right { display: grid !important; width: 100%; gap: 10px !important; }
  .reading-toolbar-left { grid-template-columns: 1fr; }
  .reading-toolbar-right { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .reading-filter-pills { width: max-content; max-width: 100%; overflow-x: auto; }
  .reading-topic-select-wrap,
  .reading-search-box { width: 100%; min-width: 0; }
  .reading-select,
  .reading-search-input { width: 100%; max-width: none; }
  .reading-search-box { min-height: 44px; }
  .reading-font-ctrls,
  .reading-layout-toggle-btn,
  .reading-question-grid-btn,
  .reading-bookmark-btn { min-height: 44px; min-width: 0; }
  .reading-mode-toggle {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }
  .reading-mode-toggle .reading-toggle-btn { min-width: 0; padding-inline: 8px; white-space: normal; }
  .reading-paper-question-section { gap: 14px; }
  .reading-paper-option { align-items: center; }
}

/* Dictionary inspector: decomposition needs more room than a single radical. */
.dict-nav-tabs { padding: 5px !important; border-radius: 14px !important; background: rgba(226, 239, 236, .72) !important; }
.dict-tab-btn { min-height: 42px; text-transform: none !important; letter-spacing: 0 !important; }
.dict-grid-2 { gap: 14px !important; }
.dict-card {
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: none !important;
}
.dict-card-title { margin-bottom: 10px !important; letter-spacing: .055em !important; }
.dict-box-item { gap: 14px !important; }
.dict-box-char { background: #f1f7f5 !important; border-color: #cedfda !important; }
.dict-box-decomposition {
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  padding: 5px !important;
  font-size: 1.15rem !important;
  line-height: 1.1 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dict-box-main { font-size: .98rem !important; }
.dict-box-sub { font-size: .86rem !important; }

/* Add-card is an editor, not a simulated flashcard: one calm column, no boxed fields. */
.cset-create-card-overlay {
  background: rgba(28, 55, 55, .36) !important;
  backdrop-filter: blur(8px) !important;
}
.cset-clean-editor-modal {
  width: min(100%, 470px);
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid #d4e1dd;
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 24px 66px rgba(27, 55, 55, .22);
}
.cset-clean-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid #e4eeeb;
}
.cset-clean-editor-header h2 { margin: 0; color: #203c40; font-size: 1.35rem; line-height: 1.2; }
.cset-clean-editor-header p { margin: 5px 0 0; color: #6b8584; font-size: .86rem; overflow-wrap: anywhere; }
.cset-clean-editor-close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: 1px solid #d4e1dd;
  border-radius: 50%;
  background: transparent;
  color: #52706f;
  font-size: 1.5rem;
  line-height: 1;
}
.cset-clean-editor-fields { display: grid; gap: 20px; padding: 24px; }
.cset-clean-editor-field { display: grid; gap: 7px; min-width: 0; }
.cset-clean-editor-field > span { color: #52706f; font-size: .8rem; font-weight: 700; }
.cset-clean-editor-field em { color: #809795; font-size: .74rem; font-style: normal; font-weight: 500; }
.cset-clean-editor-field input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 6px 0 8px;
  border: 0;
  border-bottom: 1px solid #cbdcd7;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #203c40;
  font-size: 1rem;
  box-shadow: none !important;
}
.cset-clean-editor-field input:focus { border-bottom: 2px solid var(--primary-color); padding-bottom: 7px; }
.cset-clean-editor-term-field input { font-family: var(--craft-hanzi) !important; font-size: 2rem; line-height: 1.25; }
.cset-clean-editor-pinyin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.cset-clean-editor-auto,
.cset-clean-editor-cancel,
.cset-clean-editor-save { min-height: 44px; border-radius: 12px; font-weight: 700; }
.cset-clean-editor-auto { padding: 0 13px; border: 1px solid #bcdad3; background: #ecf7f4; color: #087e83; }
.cset-clean-editor-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 24px; }
.cset-clean-editor-cancel { padding: 0 16px; border: 1px solid #d4e1dd; background: transparent; color: #52706f; }
.cset-clean-editor-save { padding: 0 18px; border: 1px solid var(--primary-color); background: var(--primary-color); color: #fff; }

/* Disclosure content moves only in response to opening or closing it. */
details[data-craft-disclosure] > :not(summary) { transform-origin: top center; will-change: opacity, transform; }

@media (max-width: 800px) {
  html:not([data-theme="dark"]) body:not(.dark):not(.midnight):not(.dark-mode) { background-attachment: scroll !important; }
  #app-workspace,
  body[data-mode="dashboard"] #app-workspace,
  body:not([data-mode="dashboard"]) #app-workspace,
  body[data-mode="flashcards"] #app-workspace { background-position: center; background-size: auto 100%; }
  .cset-clean-editor-modal { width: min(100%, 430px); border-radius: 20px; }
  .cset-clean-editor-header { padding: 20px 20px 16px; }
  .cset-clean-editor-fields { padding: 20px; gap: 18px; }
  .cset-clean-editor-actions { padding: 16px 20px 20px; }
}

@media (max-width: 380px) {
  .reading-toolbar-right { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cset-clean-editor-pinyin-row { grid-template-columns: 1fr; }
  .cset-clean-editor-auto { width: 100%; }
}

/* Flashcards: a focused study sequence inspired by a traditional paper desk.
   The title establishes place, the tracker explains progress, and the card is
   the single memorable object. Existing tap, swipe, audio, and SRS logic stays intact. */
.flashcard-page-subtitle { display: none; }
body[data-mode="flashcards"] .study-area {
  max-width: 1180px;
  padding-inline: clamp(20px, 4vw, 52px);
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
body[data-mode="flashcards"] .study-area > .study-header {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  gap: 8px !important;
  margin: 0 auto 16px !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-mode="flashcards"] #current-title {
  margin: 0 !important;
  color: var(--text-main) !important;
  font-family: var(--craft-ui) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.045em;
  line-height: 1.05;
  text-align: center !important;
}
body[data-mode="flashcards"] .flashcard-page-subtitle {
  display: block;
  margin: -4px 0 4px;
  color: var(--text-muted);
  font-size: clamp(.84rem, 1.5vw, .96rem);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}
body[data-mode="flashcards"] .study-book-banner { margin: 0 auto 2px !important; }
body[data-mode="flashcards"] .book-banner-btn {
  min-height: 42px !important;
  padding: 8px 18px !important;
  border-color: var(--border-color) !important;
  background: var(--craft-tint) !important;
  box-shadow: 0 4px 16px rgba(42, 91, 87, .04) !important;
}
body[data-mode="flashcards"] .book-banner-btn-inner { gap: 8px; font-size: .9rem; }

body[data-mode="flashcards"] .study-session-tracker {
  display: grid !important;
  grid-template-columns: minmax(62px, auto) minmax(150px, 1fr) auto auto auto auto auto;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 12px !important;
  width: min(980px, calc(100% - 20px)) !important;
  max-width: 980px !important;
  min-height: 58px;
  margin: 2px auto 12px !important;
  padding: 9px 16px 9px 18px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 20px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 10px 30px rgba(42, 78, 74, .065) !important;
}
body[data-mode="flashcards"] .tracker-counter {
  order: 1;
  display: grid;
  gap: 1px;
  min-width: 62px;
  color: var(--text-main) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.15;
}
body[data-mode="flashcards"] .tracker-counter-value { white-space: nowrap; }
body[data-mode="flashcards"] .tracker-label {
  display: block;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}
body[data-mode="flashcards"] .progress-bar-wrapper {
  order: 2;
  width: auto !important;
  min-width: 120px;
  height: 10px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: var(--border-color) !important;
  box-shadow: inset 0 1px 2px rgba(28, 69, 65, .08) !important;
  overflow: hidden;
}
body[data-mode="flashcards"] #visual-progress-bar {
  border-radius: inherit !important;
  background: linear-gradient(90deg, #0b8b8d, #26aaa4) !important;
}
body[data-mode="flashcards"] .tracker-percent {
  order: 3;
  min-width: 40px;
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 700;
  text-align: left;
}
body[data-mode="flashcards"] .study-session-tracker .stat-box {
  display: grid !important;
  align-content: center;
  gap: 1px;
  min-width: 58px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-left: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.03rem !important;
  font-weight: 700 !important;
  text-align: center;
}
body[data-mode="flashcards"] .stat-unknown { order: 4; color: #a05b4f !important; }
body[data-mode="flashcards"] .stat-known { order: 5; color: #087e70 !important; }
body[data-mode="flashcards"] #undo-btn {
  order: 6;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  background: var(--bg-color) !important;
  color: var(--text-main) !important;
  font-size: .83rem !important;
  box-shadow: none !important;
}
body[data-mode="flashcards"] .study-session-tracker > .dropdown { order: 7; }
body[data-mode="flashcards"] #undo-btn[style*="display: none"] { display: none !important; }
body[data-mode="flashcards"] .study-session-tracker .dropdown-toggle {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  padding: 0 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 50% !important;
  background: var(--bg-color) !important;
}

body[data-mode="flashcards"] #view-flashcards.active {
  --craft-flashcard-height: clamp(500px, 62vh, 600px);
  width: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 0 16px !important;
  margin-top: 0 !important;
}
body[data-mode="flashcards"] #flashcard-container {
  width: 100% !important;
  max-width: 920px !important;
  padding: 0 14px;
}
body[data-mode="flashcards"] #view-flashcards.active .flashcard-container {
  width: 100% !important;
  max-width: 900px !important;
  height: var(--craft-flashcard-height) !important;
  min-height: var(--craft-flashcard-height) !important;
  margin-bottom: 0 !important;
}
body[data-mode="flashcards"] #flashcard,
body[data-mode="flashcards"] #flashcard-background {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  height: var(--craft-flashcard-height) !important;
  min-height: 480px !important;
  border-radius: 26px !important;
}
body[data-mode="flashcards"] #flashcard .card-front,
body[data-mode="flashcards"] #flashcard .card-back,
body[data-mode="flashcards"] #flashcard-background .card-front {
  border-color: var(--border-color) !important;
  border-radius: 26px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 18px 50px rgba(53, 78, 72, .10) !important;
}
body[data-mode="flashcards"] #flashcard .fc-voice-btn {
  width: 48px !important;
  height: 48px !important;
  top: 20px;
  right: 20px;
  border: 1px solid var(--border-color) !important;
  background: var(--craft-tint) !important;
}
body[data-mode="flashcards"] #fc-front-text { font-size: clamp(5rem, 12vw, 7.25rem) !important; }
body[data-mode="flashcards"] .craft-card-hint {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 12px auto 0 !important;
  color: var(--text-muted) !important;
  font-size: .78rem;
  line-height: 1.45;
}
body[data-mode="flashcards"] .craft-card-hint span:first-child {
  color: var(--text-main);
  font-size: .9rem;
  font-weight: 600;
}

@media (max-width: 800px) {
  body[data-mode="flashcards"] .study-area {
    padding: 0 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  body[data-mode="flashcards"] .study-area > .study-header {
    gap: 8px !important;
    padding-top: 4px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }
  body[data-mode="flashcards"] #current-title,
  body[data-mode="flashcards"] .flashcard-page-subtitle { display: none !important; }
  body[data-mode="flashcards"] .book-banner-btn { min-height: 38px !important; padding: 5px 14px !important; }
  body[data-mode="flashcards"] .study-session-tracker {
    display: grid !important;
    grid-template-columns: minmax(72px, 1.15fr) repeat(2, minmax(54px, .82fr)) 42px 42px !important;
    grid-template-rows: auto auto !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 8px 10px 10px !important;
    border: 1px solid rgba(157, 194, 187, .52) !important;
    border-radius: 18px !important;
    background: rgba(255, 254, 250, .85) !important;
    box-shadow: 0 6px 20px rgba(44, 82, 77, .05) !important;
    box-sizing: border-box !important;
  }
  body[data-mode="flashcards"] .tracker-counter {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-content: center;
    padding-left: 4px !important;
    min-width: 0 !important;
    height: 38px !important;
  }
  body[data-mode="flashcards"] .tracker-counter-value {
    font-size: 1.02rem;
    letter-spacing: -.025em;
  }
  body[data-mode="flashcards"] .stat-unknown {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body[data-mode="flashcards"] .stat-known {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  body[data-mode="flashcards"] .study-session-tracker .stat-box {
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 6px !important;
    border-left: 1px solid rgba(157, 194, 187, .42) !important;
    font-size: .96rem !important;
  }
  body[data-mode="flashcards"] #undo-btn {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin-left: 2px !important;
    border-color: rgba(157, 194, 187, .58) !important;
    background: rgba(239, 248, 245, .84) !important;
    box-shadow: none !important;
  }
  body[data-mode="flashcards"] #undo-btn span { display: none !important; }
  body[data-mode="flashcards"] .study-session-tracker > .dropdown {
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  body[data-mode="flashcards"] .study-session-tracker .dropdown-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-color: rgba(157, 194, 187, .58) !important;
    background: rgba(239, 248, 245, .84) !important;
    box-shadow: none !important;
  }
  body[data-mode="flashcards"] .progress-bar-wrapper {
    grid-column: 1 / 5 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 8px !important;
    margin: 0 !important;
    align-self: center !important;
    background: rgba(153, 189, 183, .38) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }
  body[data-mode="flashcards"] .tracker-percent {
    grid-column: 5 !important;
    grid-row: 2 !important;
    min-width: 32px !important;
    text-align: center !important;
    align-self: center !important;
    padding-bottom: 0 !important;
    color: var(--text-main) !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
  }
  body[data-mode="flashcards"] .tracker-label {
    font-size: .58rem !important;
    font-weight: 650;
    line-height: 1.1;
  }
  body[data-mode="flashcards"] #flashcard-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  body[data-mode="flashcards"] #view-flashcards.active {
    width: 100% !important;
    --craft-flashcard-height: clamp(480px, 64dvh, 560px) !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    padding: 0 0 14px !important;
  }
  body[data-mode="flashcards"] #view-flashcards.active .flashcard-container {
    height: var(--craft-flashcard-height) !important;
    min-height: var(--craft-flashcard-height) !important;
    margin: 0 auto !important;
  }
  body[data-mode="flashcards"] #flashcard,
  body[data-mode="flashcards"] #flashcard-background {
    width: min(calc(100% - 20px), 430px) !important;
    max-width: 430px !important;
    height: var(--craft-flashcard-height) !important;
    min-height: var(--craft-flashcard-height) !important;
    border-radius: 22px !important;
    margin: 0 auto !important;
  }
  body[data-mode="flashcards"] #flashcard .card-front,
  body[data-mode="flashcards"] #flashcard .card-back,
  body[data-mode="flashcards"] #flashcard-background .card-front {
    border-radius: 22px !important;
  }
  body[data-mode="flashcards"] #fc-front-text {
    font-size: clamp(4.2rem, 18vw, 5.6rem) !important;
  }
  body[data-mode="flashcards"] .craft-card-hint {
    margin-top: 10px !important;
    padding-bottom: 4px;
  }
}

/* One landscape, one coordinate system.
   The page owns the artwork; shell navigation borrows the same scene through a
   rice-paper wash instead of painting unrelated white rectangles over it. */
:root {
  --craft-shell-paper: rgba(250, 253, 251, .76);
  --craft-shell-paper-strong: rgba(255, 254, 251, .88);
  --craft-shell-line: rgba(169, 201, 194, .58);
  --craft-shell-shadow: 0 10px 30px rgba(44, 82, 77, .055);
}

html[data-theme="dark"],
body[data-theme="dark"],
body.dark,
body.dark-mode,
body.midnight, html[data-theme="night"], body[data-theme="night"] {
  --craft-shell-paper: rgba(24, 47, 51, .84);
  --craft-shell-paper-strong: rgba(30, 52, 57, .92);
  --craft-shell-line: rgba(118, 164, 157, .34);
  --craft-shell-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

/* The local workspace wash and per-view fade were the visible misalignment.
   Both are transparent now, so every mode uses the body's fixed landscape. */
#app-workspace,
body[data-mode="dashboard"] #app-workspace,
body:not([data-mode="dashboard"]) #app-workspace,
body[data-mode="flashcards"] #app-workspace {
  background-color: transparent !important;
  background-image: none !important;
}
.study-view:not(#view-dashboard)::before { content: none !important; }

.hf-sidebar,
.hf-topbar {
  background: var(--craft-shell-paper) !important;
  border-color: var(--craft-shell-line) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  backdrop-filter: blur(18px) saturate(112%);
}
.hf-sidebar { box-shadow: 10px 0 34px rgba(54, 91, 86, .035); }
.hf-sidebar-header { border-bottom-color: var(--craft-shell-line) !important; }
.hf-topbar { box-shadow: 0 8px 28px rgba(54, 91, 86, .035); }

/* Mode-level navigation and progress controls use a denser paper wash. This
   keeps their labels readable while preserving the landscape alignment below. */
.reading-toolbar,
.fluency-flow-toolbar,
body[data-mode] .study-session-tracker {
  background: var(--craft-shell-paper-strong) !important;
  border-color: var(--craft-shell-line) !important;
  box-shadow: var(--craft-shell-shadow) !important;
  -webkit-backdrop-filter: blur(12px) saturate(108%);
  backdrop-filter: blur(12px) saturate(108%);
}

/* Flashcards uses a pale selector at rest. Keep its legacy hover/open color
   pair together so white label text is never left on the pale surface. */
body[data-mode="flashcards"] .study-book-banner .book-banner-btn:hover,
body[data-mode="flashcards"] .study-book-banner[open] .book-banner-btn {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

@media (max-width: 800px) {
  .hf-sidebar,
  .hf-topbar,
  .craft-mobile-nav {
    background: var(--craft-shell-paper) !important;
    border-color: var(--craft-shell-line) !important;
    -webkit-backdrop-filter: blur(16px) saturate(114%);
    backdrop-filter: blur(16px) saturate(114%);
  }
  .hf-sidebar { box-shadow: 0 8px 24px rgba(54, 91, 86, .045); }
  .hf-topbar { box-shadow: none; }
  .craft-mobile-nav { box-shadow: 0 4px 16px rgba(54, 91, 86, .05); }
  body.craft-menu-open .hf-sidebar-scroll {
    background: var(--craft-shell-paper-strong) !important;
    -webkit-backdrop-filter: blur(18px) saturate(114%);
    backdrop-filter: blur(18px) saturate(114%);
  }
}


/* All modes is a mobile sheet, not a hidden desktop rail. Keeping the existing
   menu nodes preserves every mode handler while moving the surface above the
   workspace and below the persistent bottom navigation. */
.craft-mobile-menu-backdrop { display: none; }
@media (max-width: 800px) {
  .craft-mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1180;
    border: 0;
    background: rgba(22, 43, 46, .34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity 180ms ease, visibility 0s linear 220ms;
  }
  body.craft-menu-open .craft-mobile-menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  body.craft-menu-open #sidebar {
    z-index: 1200 !important;
    overflow: visible !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    pointer-events: none !important;
    /* backdrop-filter makes fixed descendants use the 64px header as their
       containing block, which places the sheet above the viewport. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.craft-menu-open #sidebar .hf-sidebar-header,
  body.craft-menu-open #sidebar .hf-sidebar-scroll {
    pointer-events: auto !important;
  }
  #sidebar .hf-sidebar-scroll {
    display: block !important;
    position: fixed !important;
    top: calc(var(--craft-mobile-header-h, 48px) + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    z-index: 1201 !important;
    width: calc(100vw - 24px) !important;
    max-width: 480px !important;
    height: auto !important;
    max-height: calc(100dvh - var(--craft-mobile-header-h, 48px) - 76px - env(safe-area-inset-bottom)) !important;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid var(--craft-shell-line) !important;
    border-radius: 20px !important;
    background: var(--craft-shell-paper-strong) !important;
    box-shadow: 0 20px 50px rgba(28, 57, 58, .22), 0 4px 14px rgba(28, 57, 58, .08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px) scale(.985);
    transform-origin: bottom center;
    -webkit-backdrop-filter: blur(22px) saturate(116%);
    backdrop-filter: blur(22px) saturate(116%);
    transition: opacity 200ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 260ms;
    box-sizing: border-box !important;
  }
  #sidebar .hf-sidebar-scroll * {
    touch-action: pan-y !important;
  }
  body.craft-menu-open #sidebar .hf-sidebar-scroll {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity 220ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1) !important;
    transition-delay: 0s !important;
  }
  body.craft-menu-locked {
    overflow: hidden !important;
    height: 100% !important;
  }
  body.craft-menu-open #sidebar .hf-sidebar-scroll,
  body.craft-menu-locked #sidebar .hf-sidebar-scroll {
    touch-action: pan-y !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .craft-mobile-nav { z-index: 1300 !important; }
}

/* Only apply compact height reduction on small phones, never on laptops/desktops */
@media (max-width: 600px) and (max-height: 700px) {
  body[data-mode="flashcards"] #view-flashcards.active {
    --craft-flashcard-height: clamp(440px, 60dvh, 500px) !important;
  }
}

@media (max-width: 420px) {
  body.craft-menu-open #sidebar .hf-menu-group {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Review Queue modal on mobile and tablet */
#hf-review-modal-overlay {
  z-index: 100005 !important;
}
@media (max-width: 800px) {
  #hf-review-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 34, 37, 0.65) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    z-index: 100005 !important;
    pointer-events: auto !important;
  }
  #hf-review-modal-overlay.active {
    display: flex !important;
  }
  #hf-review-modal-overlay #hf-review-dropdown {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(340px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    background: var(--card-bg, #ffffff) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 20px !important;
    padding: 20px 18px 18px !important;
    margin: auto !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25) !important;
    z-index: 100006 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .craft-mobile-menu-backdrop,
  #sidebar .hf-sidebar-scroll { transition: none !important; }
}

/* The laptop Review Queue is positioned beside the navigation rail. The rail
   and its scroll viewport normally clip overflow, so release both layers only
   for the lifetime of the open popout. */
@media (min-width: 801px) {
  #sidebar.has-review-popout,
  #sidebar.has-review-popout .hf-sidebar-scroll {
    overflow: visible !important;
  }
}

/* A quieter study desk: one active learning surface, lighter supporting chrome. */
:root {
  --craft-focus-paper: rgba(255, 254, 251, .97);
  --craft-focus-line: rgba(155, 190, 183, .55);
  --craft-focus-shadow: 0 14px 36px rgba(31, 74, 70, .075);
  --craft-support-paper: rgba(255, 254, 251, .86);
}

/* Story loading must always expose a useful state, including offline failures. */
.story-library-card { padding: 0; min-width: 0; text-align: left; }
.story-library-card:focus-visible, .story-library-retry:focus-visible {
  outline: 3px solid var(--primary-color); outline-offset: 4px;
}
.story-library-status {
  grid-column: 1 / -1; text-align: center; padding: 24px 12px;
  color: var(--text-muted); font-family: var(--craft-ui);
}
.story-library-status p { margin: 0 0 16px; }
.story-library-retry {
  min-height: 44px; padding: 10px 20px; border-radius: 24px;
  border: 1px solid var(--border-color); background: var(--card-bg);
  color: var(--primary-color); cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .story-library-card { transform: none !important; transition: none !important; }
}
html[data-theme="dark"],
body[data-theme="dark"],
body.dark,
body.dark-mode,
body.midnight, html[data-theme="night"], body[data-theme="night"] {
  --craft-focus-paper: rgba(29, 51, 55, .98);
  --craft-focus-line: rgba(133, 177, 169, .38);
  --craft-focus-shadow: 0 14px 36px rgba(0, 0, 0, .16);
  --craft-support-paper: rgba(29, 51, 55, .88);
}
html:not([data-theme="dark"]):not([data-theme="midnight"]) body:not(.dark):not(.dark-mode):not(.midnight):not([data-theme="dark"]):not([data-theme="midnight"]) {
  background-image: none !important;
}

/* Dashboard: resume is the next step; the quiz and progress widgets support it. */
#view-dashboard .hf-dashboard-header-row { margin-bottom: clamp(20px, 3vw, 32px) !important; }
#view-dashboard .hf-welcome { letter-spacing: -.035em !important; }
#view-dashboard .hf-subtitle {
  max-width: 49ch;
  font-size: clamp(.88rem, 1.3vw, .98rem) !important;
  line-height: 1.55 !important;
}
#view-dashboard .hf-dash-top-recents-container { margin-bottom: clamp(20px, 2.5vw, 28px) !important; }
#view-dashboard .hf-dash-recents-top-card {
  padding: clamp(18px, 2.2vw, 26px) !important;
  border: 1px solid var(--craft-focus-line) !important;
  border-left: 4px solid var(--primary-color) !important;
  border-radius: 20px !important;
  background: var(--craft-focus-paper) !important;
  box-shadow: var(--craft-focus-shadow) !important;
}
#view-dashboard .hf-dash-recents-top-card .hf-dash-widget-header {
  align-items: center;
  margin-bottom: 16px !important;
}
#view-dashboard .hf-dash-widget-action {
  min-height: 44px;
  margin-left: auto;
  padding: 10px 16px;
  border: 1px solid var(--primary-color);
  border-radius: 16px;
  background: var(--primary-color);
  color: #fff !important;
  font: 700 .84rem/1.2 var(--craft-ui);
  text-decoration: none !important;
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease;
}
#view-dashboard .hf-dash-widget-action:hover { filter: brightness(.94); transform: translateY(-1px); }
#view-dashboard .hf-recent-status-badge { display: none !important; }
#view-dashboard #dashboard-recent-card { cursor: pointer; }
#view-dashboard .practice-preview-card {
  padding: clamp(18px, 2.2vw, 26px) !important;
  border: 1px solid var(--craft-focus-line) !important;
  border-radius: 20px !important;
  background: var(--craft-focus-paper) !important;
  box-shadow: var(--craft-focus-shadow) !important;
}
#view-dashboard .practice-badge-tag { font-size: 1rem !important; font-weight: 700 !important; }
#view-dashboard .practice-card-header { padding-bottom: 14px !important; }
#view-dashboard .practice-prompt-area {
  padding: clamp(18px, 2vw, 24px) !important;
  border-radius: 16px !important;
  background: rgba(226, 243, 238, .66) !important;
}
#view-dashboard .practice-prompt-sublabel { font-size: .88rem !important; line-height: 1.45 !important; }
#view-dashboard .practice-char-zh { font-size: clamp(4rem, 8vw, 5.6rem) !important; line-height: 1.3 !important; }
#view-dashboard .practice-options-grid { gap: 12px !important; }
#view-dashboard .practice-option-btn {
  min-height: 56px !important;
  border-color: var(--craft-focus-line) !important;
  border-radius: 16px !important;
  background: var(--craft-focus-paper) !important;
}
#view-dashboard .practice-option-btn:hover:not(.answered) { background: var(--craft-tint) !important; }
#view-dashboard .practice-option-btn.correct { background: #e4f5ec !important; border-color: #217955 !important; }
#view-dashboard .practice-option-btn.wrong { background: #fff0f0 !important; border-color: #ae4047 !important; }
#view-dashboard .hf-dash-widget-card:not(.hf-dash-recents-top-card),
#view-dashboard .hf-mini-stat-card {
  border: 1px solid var(--craft-focus-line) !important;
  border-radius: 20px !important;
  background: var(--craft-support-paper) !important;
  box-shadow: none !important;
}
#view-dashboard .hf-review-action-btn {
  border-color: var(--craft-focus-line) !important;
  border-radius: 16px !important;
  background: transparent !important;
}

/* Exercise panels stay distinct from selectors, counters, and toolbars. */
body[data-mode="flashcards"] #flashcard .card-front,
body[data-mode="flashcards"] #flashcard .card-back,
body[data-mode="quiz"] .qz-word-container,
body[data-mode="writing"] .writing-card.modern-card,
body[data-mode="sentences"] .sentence-card,
body[data-mode="reading"] .reading-paper-sheet,
body[data-mode="new-feature"] .nf-card-container {
  border: 1px solid var(--craft-focus-line) !important;
  background: var(--craft-focus-paper) !important;
  box-shadow: var(--craft-focus-shadow) !important;
}
body[data-mode="flashcards"] .study-session-tracker,
body[data-mode="reading"] .reading-toolbar,
body[data-mode="new-feature"] .fluency-flow-toolbar,
body[data-mode="sentences"] .sentence-controls,
body[data-mode="writing"] .writing-controls {
  border-color: var(--craft-focus-line) !important;
  background: var(--craft-support-paper) !important;
  box-shadow: none !important;
}
body[data-mode="quiz"] .qz-word-container {
  min-height: 220px !important;
  border-radius: 20px !important;
  padding: 40px 28px !important;
}
body[data-mode="quiz"] #qz-word {
  font-family: var(--craft-hanzi) !important;
  font-size: clamp(3.5rem, 8vw, 5.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
body[data-mode="quiz"] #qz-options .option-btn {
  min-height: 56px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
body[data-mode="quiz"] #qz-options .option-btn:not(:disabled) {
  border-color: var(--craft-focus-line) !important;
  background: var(--craft-focus-paper) !important;
}
body[data-mode="quiz"] #qz-options .option-btn:hover:not(:disabled) { background: var(--craft-tint) !important; }

#app-workspace :is(button, summary, [role="button"], a, input, select, textarea):focus-visible {
  outline: 3px solid var(--primary-color) !important;
  outline-offset: 3px !important;
}
/* The dark palette keeps a pale selected tile, so its label needs dark ink;
   inactive labels need light ink against the dark sidebar. */
body:is(.dark, .dark-mode, .midnight) #sidebar .hf-menu-item:not(.active),
body:is(.dark, .dark-mode, .midnight) #sidebar .hf-menu-item:not(.active) .hf-menu-text {
  color: #d8e9e5 !important;
}
body:is(.dark, .dark-mode, .midnight) #sidebar .hf-menu-item:not(.active) .hf-menu-text::after {
  color: #9ebdb8 !important;
}
body:is(.dark, .dark-mode, .midnight) #sidebar .hf-menu-item.active,
body:is(.dark, .dark-mode, .midnight) #sidebar .hf-menu-item.active .hf-menu-text {
  color: #173b3d !important;
}
body:is(.dark, .dark-mode, .midnight) #sidebar .hf-menu-item.active .hf-menu-text::after {
  color: #547471 !important;
}
body:is(.dark, .dark-mode, .midnight) #sidebar .hf-menu-item:not(.active):hover {
  background: rgba(232, 247, 243, .12) !important;
}
@media (max-width: 800px) {
  #view-dashboard .hf-dashboard-header-row { margin-bottom: 18px !important; }
  #view-dashboard .hf-dash-recents-top-card { padding: 18px !important; }
  #view-dashboard .practice-preview-card { padding: 18px !important; }
  body[data-mode="quiz"] .qz-word-container { min-height: 200px !important; padding: 34px 22px !important; }
  body[data-mode="quiz"] #qz-word { font-size: clamp(3.2rem, 13vw, 4.6rem) !important; }
}
@media (max-width: 420px) {
  #view-dashboard .hf-dash-recents-top-card .hf-dash-widget-header { align-items: stretch; }
  #view-dashboard .hf-dash-widget-action { width: 100%; justify-content: center; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #view-dashboard .hf-dash-widget-action { transition: none; }
}

/* A compact invitation keeps the saved session as the dashboard's first action. */
#view-dashboard .hf-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 24px !important;
}
#view-dashboard .hf-dashboard-col-left,
#view-dashboard .hf-dashboard-col-right { grid-column: 1 / -1 !important; }
#view-dashboard .hf-dashboard-col-right {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px !important;
  align-items: start;
}
#view-dashboard .hf-dashboard-col-right > :last-child { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  #view-dashboard .hf-dashboard-col-right > :last-child { grid-column: auto; }
}
#view-dashboard .craft-quick-practice {
  border: 1px solid var(--craft-focus-line);
  border-radius: 20px;
  background: var(--craft-support-paper);
  min-width: 0;
}
#view-dashboard .craft-quick-practice-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 84px;
  padding: 18px 24px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}
.craft-quick-practice-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.craft-quick-practice-copy strong { font-size: 1rem; font-weight: 700; }
#view-dashboard .craft-quick-practice-copy .practice-lesson-title { font-size: .8rem; color: var(--text-muted); }
.craft-quick-practice-cue { display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600; color: var(--primary-color); flex-shrink: 0; }
.craft-quick-practice-cue svg { transition: transform 260ms ease; }
.craft-quick-practice[data-open="true"] .craft-quick-practice-cue svg { transform: rotate(180deg); }
.craft-quick-practice-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 280ms ease, opacity 200ms ease, visibility 0s linear 280ms;
}
.craft-quick-practice-panel-inner { min-height: 0; overflow: hidden; }
.craft-quick-practice[data-open="true"] .craft-quick-practice-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
#view-dashboard .craft-quick-practice .practice-preview-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-dashboard .craft-quick-practice .practice-card-header { padding-top: 16px; border-top: 1px solid var(--craft-focus-line); }
#view-dashboard :is(.practice-icon-btn, .practice-option-key, .hf-mini-stat-icon, .hf-review-icon-box) { border-radius: 12px !important; }
#view-dashboard :is(.practice-restart-btn, .practice-audio-pill-btn, .practice-next-btn, .craft-reading-entry) { border-radius: 16px !important; }

/* Preserve the supplied artwork; reserve its full color for the current mode. */
#sidebar .hf-menu-item:not(.active) .hf-menu-icon {
  background: transparent !important;
  box-shadow: none !important;
}
  #sidebar .hf-menu-item:not(.active) .craft-nav-art {
    filter: saturate(.62);
    opacity: .96;
}
#sidebar .hf-menu-item.active .craft-nav-art { filter: none; opacity: 1; }
#sidebar .hf-menu-item .craft-nav-art { transition: opacity 180ms ease, filter 180ms ease !important; }
#sidebar .hf-menu-item:hover .craft-nav-art,
#sidebar .hf-menu-item:focus-visible .craft-nav-art { opacity: .9; transform: none; }
  .craft-mobile-nav button:not([aria-current="page"]):not([aria-expanded="true"]) .craft-nav-art {
    filter: saturate(.62);
    opacity: .96;
}
body:is(.dark, .dark-mode, .midnight) #view-dashboard .hf-dash-widget-action { color: #173b3d !important; }
body:is(.dark, .dark-mode, .midnight) #view-dashboard .practice-prompt-area { background: rgba(80, 137, 126, .17) !important; }
@media (max-width: 800px) {
  #view-dashboard .hf-dashboard-grid { gap: 20px !important; }
  #view-dashboard .craft-quick-practice-toggle { padding: 16px 18px; min-height: 80px; gap: 12px; }
  #view-dashboard .craft-quick-practice .practice-preview-card { padding: 0 18px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .craft-quick-practice-panel,
  .craft-quick-practice-cue svg,
  #sidebar .hf-menu-item .craft-nav-art { transition: none !important; }
}

/* Learning-first refinement: summaries use space and rules; exercises use paper.
   Keep these overrides together so desktop and mobile share the same hierarchy. */
:root {
  --craft-control-radius: 12px;
  --craft-panel-radius: 20px;
}
.hf-topbar { box-shadow: none !important; }
.hf-search-container { min-height: 44px !important; border-radius: var(--craft-control-radius) !important; }
.hf-dashboard-container .hf-welcome,
.dict-view-title { font-size: clamp(1.5rem, 2.5vw, 1.8rem) !important; line-height: 1.3 !important; }
.hf-subtitle { font-weight: 500 !important; }
.study-area > .study-header {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body[data-mode="flashcards"] #current-title { font-size: clamp(1.65rem, 2.8vw, 2rem) !important; line-height: 1.25 !important; }
.book-banner-btn,
.fluency-flow-toolbar .fluency-tool-btn,
.quiz-settings-glass > summary {
  min-height: 44px !important;
  border-radius: var(--craft-control-radius) !important;
  box-shadow: none !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
}
.quiz-settings-glass {
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
}
.quiz-settings-glass > summary {
  border: 1px solid var(--craft-focus-line) !important;
  background: var(--craft-support-paper) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px !important;
  color: var(--text-main) !important;
}
.quiz-settings-glass > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 200ms ease; }
.quiz-settings-glass[open] > summary::after { transform: rotate(225deg); }
.craft-quiz-toolbar { justify-content: space-between !important; width: 100%; box-sizing: border-box; padding: 0 4px; }
#view-quiz { padding-top: 8px !important; }
#view-quiz .glass-content { width: min(300px, calc(100vw - 64px)) !important; max-width: none !important; left: 0 !important; transform: none !important; box-sizing: border-box; }
#view-quiz .glass-content .setting-row { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px; }
#view-quiz .glass-content .setting-row label { margin: 0 !important; font-size: .85rem; font-weight: 600 !important; }
#view-quiz .glass-content select { width: 100% !important; min-height: 44px; font-size: .9rem; }
#quiz-score-ui {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 8px 0 !important;
  color: var(--text-muted) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
}
#quiz-score-ui span { letter-spacing: 0 !important; }
#view-quiz :is(#qz-sound-btn, #qz-pinyin-btn) { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--craft-tint) !important; }
#qz-pinyin-btn { font-family: var(--craft-hanzi) !important; }
#view-quiz #qz-options { gap: 12px !important; }
#view-quiz #qz-options .option-btn { font-size: 1rem !important; font-weight: 600 !important; color: var(--text-main); }

/* Keep all eleven destinations in reach on a laptop without eleven subtitles. */
@media (min-width: 801px) {
  #sidebar .hf-sidebar-scroll { padding: 16px 12px !important; }
  #sidebar .hf-menu-text::after { display: none !important; }
  #sidebar .hf-menu-item { min-height: 48px !important; padding: 8px 12px !important; gap: 12px !important; margin-bottom: 4px !important; border-radius: 12px !important; font-size: .86rem !important; }
  #sidebar .hf-menu-item .hf-menu-icon[class] { width: 32px !important; height: 32px !important; min-height: 0 !important; flex: 0 0 32px; }
  #sidebar .hf-menu-item .hf-menu-icon .craft-nav-art { width: 32px !important; height: 32px !important; }
  #sidebar .hf-menu-group { margin-bottom: 20px !important; }
  #sidebar .hf-menu-label { padding: 8px 12px 12px !important; }
}

/* Supporting dashboard information is a quiet row, not more nested cards. */
#view-dashboard #dashboard-recent-mode-pill { display: none !important; }
#view-dashboard .hf-dash-recents-top-card .hf-dash-widget-title { font-size: .9rem; color: var(--text-main); }
#view-dashboard .hf-dashboard-col-right { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
#view-dashboard .hf-dashboard-col-right > .hf-dash-widget-card {
  grid-column: auto;
  padding: 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--craft-focus-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#view-dashboard .hf-dashboard-col-right .hf-dash-widget-title { font-size: .9rem; color: var(--text-main); }
#view-dashboard .hf-dash-stats-grid {
  order: 3;
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid var(--craft-focus-line) !important;
  gap: 24px !important;
}
#view-dashboard .hf-mini-stat-card { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; gap: 4px; }
#view-dashboard .hf-mini-stat-card + .hf-mini-stat-card { border-left: 1px solid var(--craft-focus-line) !important; padding-left: 24px !important; }
#view-dashboard .hf-mini-stat-top { order: 3; justify-content: flex-start; margin: 0 !important; }
#view-dashboard .hf-mini-stat-icon { display: none !important; }
#view-dashboard .hf-mini-stat-tag { padding: 0 !important; background: transparent !important; color: var(--text-muted) !important; font-size: .78rem; font-weight: 500; }
#view-dashboard .hf-mini-stat-val { font-size: 1.65rem !important; line-height: 1.2; }
#view-dashboard .hf-mini-stat-lbl { font-size: .85rem !important; font-weight: 600; }
#view-dashboard .hf-review-icon-box { width: 32px !important; height: 32px !important; background: transparent !important; }
#view-dashboard .hf-review-queue-text { min-width: 0; }
#view-dashboard .hf-review-queue-text p { line-height: 1.6; font-weight: 500; }
#view-dashboard .hf-review-action-btn { justify-content: flex-start !important; min-height: 44px; padding: 8px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#view-dashboard .craft-reading-entry { padding: 0 !important; background: transparent !important; transform: none !important; }
#view-dashboard .craft-reading-entry > div:first-child { align-items: flex-start !important; }
#view-dashboard .craft-reading-entry > div:first-child > div:first-child { width: 32px !important; height: 32px !important; color: var(--primary-color) !important; background: transparent !important; }
#view-dashboard .hf-dashboard-col-right > .hf-dash-widget-card:last-child .hf-dash-widget-header > span:last-child { background: transparent !important; padding: 0 !important; color: var(--text-muted) !important; }
#view-dashboard .craft-quick-practice-toggle { min-height: 76px; }
#view-dashboard .practice-book-badge { background: transparent !important; padding: 0 !important; color: var(--text-muted) !important; }

/* The dictionary's field owns the focus ring; the empty state needs no box. */
#view-dictionary .dict-view-header-container { padding: 0 !important; margin-bottom: 24px !important; gap: 16px !important; }
.dict-slick-search-box { min-height: 48px !important; border-radius: var(--craft-control-radius) !important; box-shadow: none !important; background: var(--craft-focus-paper) !important; }
.dict-slick-search-box:focus-within,
.reading-search-box:focus-within { outline: 3px solid var(--primary-color); outline-offset: 3px; }
#app-workspace .dict-slick-search-box input:focus-visible,
#app-workspace .reading-search-box input:focus-visible { outline: none !important; box-shadow: none !important; }
#view-dictionary .dict-empty-state { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 32px 0 !important; margin-top: 0 !important; text-align: left !important; }
#view-dictionary .dict-empty-state > div { opacity: 1 !important; }
.dict-search-input { font-weight: 500 !important; }

/* Personal sets use the same paper and control system as the study modes. */
#custom-sets-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important; gap: 20px !important; }
.custom-folder-card, .custom-folder-card.pinned-vault {
  min-height: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--craft-focus-line) !important;
  border-radius: var(--craft-panel-radius) !important;
  background: var(--craft-focus-paper) !important;
  box-shadow: none !important;
  transform: none !important;
}
.custom-folder-card:hover { border-color: var(--primary-color) !important; }
.custom-folder-title { font-size: 1.1rem !important; }
.custom-folder-badge.is-vault-badge { background: transparent !important; padding: 0 !important; color: var(--text-muted) !important; }
.custom-folder-system-tag { display: none; }
.custom-folder-count-chip { border: 0 !important; background: transparent !important; padding: 0 !important; font-weight: 500 !important; }
.custom-folder-action-btn, .custom-new-set-btn { min-height: 44px !important; border-radius: var(--craft-control-radius) !important; box-shadow: none !important; transform: none !important; }
.custom-folder-del-btn { width: 44px; height: 44px; }
body:is(.dark, .dark-mode, .midnight) :is(.custom-folder-study-btn, .custom-new-set-btn) { color: #173b3d !important; }
.side-drawer .drawer-label { text-transform: none !important; letter-spacing: 0 !important; font-size: .85rem !important; font-weight: 600 !important; }
.side-drawer .drawer-menu-item { min-height: 48px; border: 0 !important; border-bottom: 1px solid var(--border-color) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin-bottom: 0 !important; }
.side-drawer .drawer-menu-item:hover { background: var(--craft-tint) !important; }

/* Reading: a title, a full-size filter/search row, then the utility controls. */
#view-reading .reading-toolbar { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; padding: 20px !important; border-radius: var(--craft-panel-radius) !important; }
#view-reading .reading-toolbar-left { flex: 1 1 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
#view-reading .reading-brand-wrap { flex: 1 1 100%; }
#view-reading .reading-brand-title { font-size: 1.1rem !important; }
#view-reading .reading-search-box { flex: 1 1 200px; width: auto !important; min-width: 0; min-height: 44px; border-radius: var(--craft-control-radius); }
#view-reading .reading-search-input { flex: 1; width: 100% !important; min-width: 0; }
#view-reading .reading-filter-pills { padding: 3px; border-radius: var(--craft-control-radius); }
#view-reading .reading-pill { min-height: 38px; padding: 8px 12px; border-radius: 9px; }
#view-reading .reading-toolbar-right { display: flex !important; width: 100%; justify-content: flex-end; gap: 8px; }
#view-reading .reading-tool-icon-btn { min-height: 44px; min-width: 44px; border-radius: var(--craft-control-radius); box-shadow: none !important; }
#view-reading .reading-paper-meta-actions { gap: 10px !important; }
#view-reading :is(.reading-paper-speed-btn, .reading-paper-audio-btn, .reading-paper-vocab-btn) { min-height: 44px !important; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#view-reading :is(.reading-paper-audio-btn, .reading-paper-vocab-btn) span { font-family: var(--craft-hanzi) !important; margin-left: 0 !important; }

@media (min-width: 801px) {
  #view-reading .reading-toolbar { display: grid !important; grid-template-columns: auto minmax(0, 1fr); }
  #view-reading .reading-toolbar-left { display: contents !important; }
  #view-reading .reading-brand-wrap { grid-row: 1; grid-column: 1; }
  #view-reading .reading-toolbar-right { grid-row: 1; grid-column: 2; }
  #view-reading .reading-filter-pills { grid-row: 2; grid-column: 1; }
  #view-reading .reading-search-box { grid-row: 2; grid-column: 2; width: 100% !important; box-sizing: border-box; }
}

@media (max-width: 800px) {
  body.craft-menu-open #sidebar .hf-menu-item:not(.active) { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
  #view-dashboard .hf-dashboard-col-right { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  #view-dashboard .hf-dash-stats-grid { grid-column: 1; }
  #view-dashboard .craft-quick-practice-toggle { min-height: 72px; }
  #view-dashboard .hf-dashboard-col-right > .hf-dash-widget-card { padding-top: 18px !important; }
  #view-reading .reading-toolbar { padding: 16px !important; }
  #view-reading .reading-search-box { flex-basis: 100%; }
  #view-reading .reading-toolbar-right { justify-content: space-between; }
  #view-reading .reading-paper-passage-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  #view-reading .reading-paper-meta-actions { display: flex !important; width: 100%; flex-wrap: wrap; }
  #view-reading .reading-paper-level-pill { flex: 1 1 100%; text-align: left; }
  #current-title { text-align: center !important; }
  .custom-sets-header-bar { gap: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-settings-glass > summary::after { transition: none; }
}
/* Reading dialogs live on body, outside isolated study-mode layers. */
.reading-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  z-index: 100050 !important;
  padding: 16px !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
body:has(.reading-modal-overlay.active) { overflow: hidden !important; }
.reading-modal-overlay.active > div { animation: craft-reading-dialog .2s ease-out; }
@keyframes craft-reading-dialog { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#reading-settings-modal .reading-settings-modal-card {
  width: min(440px, 100%) !important;
  max-height: calc(100dvh - 32px) !important;
  border-radius: 24px !important;
}
#reading-settings-modal .reading-settings-modal-header,
#reading-settings-modal .reading-settings-modal-footer { padding: 16px 20px !important; }
#reading-settings-modal .reading-settings-modal-body { padding: 4px 20px 12px !important; gap: 0 !important; overscroll-behavior: contain; }
#reading-settings-modal .reading-setting-row {
  padding: 12px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  gap: 12px !important;
  flex-direction: row !important;
  align-items: center !important;
}
#reading-settings-modal .reading-setting-info { flex: 1; }
#reading-settings-modal .reading-setting-desc { display: none; }
#reading-settings-modal .reading-setting-control { width: auto !important; flex: 0 1 auto; }
#reading-settings-modal :is(button, select) { min-height: 44px; min-width: 44px; }
#reading-settings-modal .reading-font-control-group { flex-wrap: wrap; justify-content: flex-end; }
.reading-settings-shortcuts { padding: 14px 0 0; }
.reading-settings-shortcuts summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--text-muted); }
.reading-settings-shortcuts .reading-shortcuts-title { display: none; }
.reading-settings-shortcuts kbd { font-family: 'Quicksand', system-ui, sans-serif; }
.reading-paper-option[aria-disabled="true"] { cursor: default !important; transform: none !important; opacity: 1 !important; }
.reading-paper-option { width: 100%; text-align: left; }
.reading-paper-option[aria-disabled="true"]:not(.correct):not(.incorrect):hover { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
.craft-panda {
  width: 100%; display: grid; justify-items: center;
  margin: 4px auto 20px; text-align: center; color: var(--text-main);
}
.craft-panda-button {
  position: relative; width: min(260px, 100%); height: 236px; padding: 0;
  background: transparent; border: 0; border-radius: 40%; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.craft-panda-button:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.craft-panda-stage { position: absolute; inset: 0; pointer-events: none; }
.craft-panda-stage canvas { width: 100%; height: 100%; display: block; }
.craft-panda-fallback { display: grid; place-items: center; height: 100%; font-size: 96px; }
.has-panda-3d .craft-panda-fallback { visibility: hidden; }
.craft-panda-phrase { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 12px; max-width: 100%; }
#panda-chinese { font-family: 'TWKai', 'LXGW WenKai TC', 'Noto Sans TC', serif; font-size: 1.65rem; color: var(--primary-color); }
#panda-pinyin { font-weight: 600; font-size: .85rem; }
#panda-english { color: var(--text-muted); font-size: .85rem; }
#panda-hint { margin: 6px 0 0; color: var(--text-muted); font-size: .75rem; }
@media (max-width: 520px) {
  .reading-nav-shortcut-hint { display: none !important; }
  #reading-settings-modal .reading-setting-row:nth-child(-n+2) { flex-direction: column !important; align-items: stretch !important; }
  #reading-settings-modal .reading-setting-name { font-size: .85rem; }
  #reading-settings-modal .reading-font-control-group { gap: 4px; }
  #reading-settings-modal .reading-font-control-group { justify-content: flex-start; }
  .craft-panda-button { width: min(238px, 100%); height: 218px; }
  .craft-panda { margin: 0 auto 18px; }
  #quiz-score-ui { white-space: normal !important; font-size: .85rem !important; padding: 4px 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-modal-overlay.active > div { animation: none; }
}

/* White studio: a clear canvas, rounded activity surfaces, quiet supporting rows.
   Keep this shared across modes; never change flashcard geometry independently. */
:root {
  --craft-canvas: #f9f8f5;
  --craft-line: #e3ebea;
  --craft-tint: #edf6f3;
  --craft-control-radius: 22px;
  --craft-panel-radius: 30px;
  --craft-focus-paper: #fff;
  --craft-support-paper: #fff;
  --craft-focus-line: #e5edeb;
  --craft-focus-shadow: 0 4px 8px -5px rgba(28, 57, 53, .14), 0 18px 44px -14px rgba(28, 57, 53, .16);
  --craft-soft-shadow: 0 2px 4px rgba(28, 57, 53, .025), 0 8px 24px rgba(28, 57, 53, .045);
  --craft-shell-paper: rgba(255, 255, 255, .97);
  --craft-shell-paper-strong: #fff;
  --craft-shell-line: #edf1f0;
}
html[data-theme="dark"], html[data-theme="night"], body:is([data-theme="dark"], [data-theme="night"], .dark, .dark-mode, .midnight) {
  --craft-focus-paper: #1d3337;
  --craft-support-paper: #1d3337;
  --craft-focus-line: #375154;
  --craft-soft-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  --craft-focus-shadow: 0 6px 12px rgba(0, 0, 0, .12), 0 20px 44px rgba(0, 0, 0, .22);
  --craft-shell-paper: #182f33;
  --craft-shell-paper-strong: #1d3337;
  --craft-shell-line: #30494c;
}
/* Remove decorative scenery; illustrations inside story covers stay intact. */
body { background-image: none !important; }
.hf-sidebar, .hf-topbar, .craft-mobile-nav { background: var(--craft-shell-paper) !important; border-color: var(--craft-shell-line) !important; }
.hf-sidebar { box-shadow: none !important; }
.hf-topbar { box-shadow: 0 4px 20px rgba(28, 57, 53, .025) !important; }
.hf-search-container { border-color: var(--craft-focus-line) !important; background: var(--craft-focus-paper) !important; border-radius: 999px !important; }
#sidebar .hf-menu-item { border-radius: 18px !important; }
#sidebar .hf-menu-item.active { box-shadow: none !important; }

/* Deeper shadows belong to the primary surface, not every nested element. */
#view-dashboard .hf-dash-recents-top-card,
#view-dashboard .craft-quick-practice,
body[data-mode="quiz"] .qz-word-container,
body[data-mode="writing"] .writing-card.modern-card,
body[data-mode="sentences"] .sentence-card,
body[data-mode="reading"] .reading-paper-sheet,
body[data-mode="new-feature"] .nf-card-container,
.custom-folder-card, .custom-folder-card.pinned-vault,
.story-library-card,
.cset-folder-viewer-modal,
.modal-content, .auth-modal-card {
  background: var(--craft-focus-paper) !important;
  border: 1px solid var(--craft-focus-line) !important;
  border-radius: var(--craft-panel-radius) !important;
  box-shadow: var(--craft-focus-shadow) !important;
}
#view-dashboard .hf-dash-recents-top-card { border-left-width: 1px !important; }
#view-dashboard .hf-dash-recents-top-card::after { content: none !important; }
#view-dashboard .hf-dash-top-recents-container { margin-bottom: 28px !important; }
#view-dashboard .hf-dash-widget-action { border-radius: 999px; padding-inline: 20px; }
#view-dashboard .practice-prompt-area { background: transparent !important; padding: 20px 0 !important; }
#view-dashboard .craft-quick-practice-toggle { border-radius: var(--craft-panel-radius); }
#view-dashboard .hf-dashboard-grid { gap: 28px !important; }

/* The front and next card use identical paint, without affecting swipe state. */
body[data-mode="flashcards"] :is(#flashcard, #flashcard-background),
body[data-mode="flashcards"] :is(#flashcard, #flashcard-background) :is(.card-front, .card-back) {
  border-radius: var(--craft-panel-radius) !important;
}
body[data-mode="flashcards"] :is(#flashcard, #flashcard-background) :is(.card-front, .card-back) {
  background: var(--craft-focus-paper) !important;
  border-color: var(--craft-focus-line) !important;
  box-shadow: var(--craft-focus-shadow) !important;
}
body[data-mode] .study-session-tracker,
body[data-mode="reading"] .reading-toolbar,
body[data-mode="new-feature"] .fluency-flow-toolbar {
  border-color: var(--craft-focus-line) !important;
  border-radius: 26px !important;
  background: var(--craft-support-paper) !important;
  box-shadow: var(--craft-soft-shadow) !important;
}
.book-banner-btn, .fluency-flow-toolbar .fluency-tool-btn,
.quiz-settings-glass > summary { border-radius: 999px !important; }
#view-quiz #qz-options { gap: 14px !important; }
body[data-mode="quiz"] #qz-options .option-btn,
#view-dashboard .practice-option-btn {
  border-radius: 22px !important;
  border-width: 1px !important;
}
body[data-mode="quiz"] #qz-options .option-btn:not(:disabled),
#view-dashboard .practice-option-btn:not(.answered):not(.correct):not(.wrong) {
  box-shadow: var(--craft-soft-shadow) !important;
}
body[data-mode="quiz"] #qz-options .option-btn:hover:not(:disabled) { border-color: var(--primary-color) !important; }
.dict-card { border-color: var(--craft-focus-line) !important; border-radius: 22px !important; background: var(--craft-focus-paper) !important; box-shadow: var(--craft-soft-shadow) !important; }
.dict-slick-search-box { border-radius: 999px !important; border-color: var(--craft-focus-line) !important; box-shadow: var(--craft-soft-shadow) !important; }
#view-reading .reading-paper-option { border-radius: 18px !important; }
.cset-stacked-front-layer, .cset-inline-editor-card { border-radius: 26px !important; box-shadow: var(--craft-soft-shadow) !important; }
.glass-content, .book-selection-panel, .practice-menu-dropdown { border-radius: 24px !important; border-color: var(--craft-focus-line) !important; box-shadow: var(--craft-focus-shadow) !important; }
@media (max-width: 800px) {
  :root { --craft-panel-radius: 26px; }
  .craft-mobile-nav { border-radius: 24px 24px 0 0 !important; box-shadow: 0 -6px 28px rgba(28, 57, 53, .075) !important; }
  .craft-mobile-nav button { border-radius: 18px !important; }
  #view-dashboard .hf-dash-recents-top-card { padding: 20px !important; }
  #view-dashboard .hf-dashboard-grid { gap: 24px !important; }
  body[data-mode="flashcards"] .study-session-tracker { box-shadow: none !important; }
}

/* Final consistency pass: smaller controls keep a lighter silhouette. */
.writing-controls-row .writing-nav-btn,
#view-reading :is(.reading-paper-vocab-btn, .reading-nav-btn),
.sentence-controls button { border-radius: 20px !important; }
#view-reading .reading-filter-pill { border-radius: 24px !important; }
#view-reading .reading-pill { border-radius: 18px !important; }
#view-reading .reading-tool-input { border-radius: 24px !important; }
#view-dashboard .hf-dash-recent-styled { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Keep the exercise near its selector instead of vertically centering a full
   viewport below an already tall header (especially noticeable on tablets). */
#view-sentences.active { min-height: 0 !important; justify-content: flex-start !important; }

/* Supplied soft-learning skill: tactile depth is reserved for important actions.
   White space, pastel mode artwork and the panda keep TOCFLCraft's identity. */
:root {
  --craft-button-radius: 16px;
  --craft-button-depth: #056c6d;
  --craft-answer-depth: #d7e6e1;
  --craft-state-success: #217955;
  --craft-state-success-paper: #e6f6eb;
  --craft-state-error: #a83e49;
  --craft-state-error-paper: #fdecee;
}
html[data-theme="dark"], html[data-theme="night"], body:is([data-theme="dark"], [data-theme="night"], .dark, .dark-mode, .midnight) {
  --craft-button-depth: #387d75;
  --craft-answer-depth: #375154;
  --craft-state-success: #b2e7c5;
  --craft-state-success-paper: #24473b;
  --craft-state-error: #ffc4c9;
  --craft-state-error-paper: #50343c;
}
#sidebar .hf-menu-item.active {
  border-left-color: transparent !important;
  box-shadow: none !important;
  color: var(--primary-color) !important;
}
@media (min-width: 801px) {
  #sidebar .hf-menu-item { min-height: 52px !important; }
  .study-area, #view-dashboard, #view-custom-sets, #view-dictionary { width: 100%; max-width: 1056px !important; margin-inline: auto; }
  body[data-mode="flashcards"] #flashcard-container { max-width: 748px !important; }
  body[data-mode="flashcards"] #view-flashcards.active .flashcard-container,
  body[data-mode="flashcards"] :is(#flashcard, #flashcard-background) { max-width: 720px !important; }
}
/* Native primary controls share a stable height while their inset edge compresses.
   Inset depth avoids moving adjacent controls or changing the answer-card layout. */
#view-dashboard .hf-dash-widget-action,
.custom-new-set-btn,
.cset-inline-save-btn,
.practice-next-btn,
.writing-nav-next,
.sentence-controls .action-btn:last-child,
.reading-nav-btn.next,
.apply-btn,
#nf-reveal-btn,
.reading-confirm-submit-btn,
#btn-submit-direct-email {
  min-height: 48px !important;
  border: 2px solid var(--craft-button-depth) !important;
  border-radius: var(--craft-button-radius) !important;
  background: var(--primary-color) !important;
  color: #fff !important;
  font-family: var(--craft-ui) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -3px 0 var(--craft-button-depth) !important;
  padding-bottom: 13px !important;
  transition: box-shadow 100ms ease, translate 100ms ease, filter 160ms ease !important;
}
:is(.sentence-controls .action-btn:last-child, .reading-nav-btn.next, .apply-btn, .custom-new-set-btn, .cset-inline-save-btn, .practice-next-btn, .writing-nav-next, #nf-reveal-btn, .reading-confirm-submit-btn, #btn-submit-direct-email):hover:not(:disabled),
#view-dashboard .hf-dash-widget-action:hover { filter: brightness(.96); }
:is(.sentence-controls .action-btn:last-child, .reading-nav-btn.next, .apply-btn, .custom-new-set-btn, .cset-inline-save-btn, .practice-next-btn, .writing-nav-next, #nf-reveal-btn, .reading-confirm-submit-btn, #btn-submit-direct-email):active:not(:disabled),
#view-dashboard .hf-dash-widget-action:active {
  translate: 0 2px;
  transform: none !important;
  box-shadow: inset 0 -1px 0 var(--craft-button-depth) !important;
}
:is(.sentence-controls .action-btn:last-child, .reading-nav-btn.next, .apply-btn, .custom-new-set-btn, .cset-inline-save-btn, .practice-next-btn, .writing-nav-next, #nf-reveal-btn, .reading-confirm-submit-btn, #btn-submit-direct-email):disabled {
  filter: saturate(.25); opacity: .55; box-shadow: none !important;
}
/* Answer state classes are presentation-only; scoring and advance timing stay in app.js. */
body[data-mode="quiz"] #qz-options .option-btn,
#view-dashboard .practice-option-btn {
  position: relative;
  min-height: 64px !important;
  border: 2px solid var(--craft-answer-depth) !important;
  border-radius: var(--craft-button-radius) !important;
  padding: 14px 18px 17px !important;
  box-shadow: inset 0 -3px 0 var(--craft-answer-depth) !important;
  transition: box-shadow 100ms ease, translate 100ms ease, background-color 160ms ease, border-color 160ms ease !important;
}
body[data-mode="quiz"] #qz-options .option-btn:not(:disabled),
#view-dashboard .practice-option-btn:not(.answered):not(.correct):not(.wrong) {
  box-shadow: inset 0 -3px 0 var(--craft-answer-depth) !important;
}
body[data-mode="quiz"] #qz-options .option-btn:active:not(:disabled),
#view-dashboard .practice-option-btn:active:not(.answered) { translate: 0 2px; box-shadow: inset 0 -1px 0 var(--craft-answer-depth) !important; }
body[data-mode="quiz"] #qz-options .option-btn.is-correct,
#view-dashboard .practice-option-btn.correct {
  --craft-answer-depth: var(--craft-state-success);
  color: var(--craft-state-success) !important;
  background: var(--craft-state-success-paper) !important;
}
body[data-mode="quiz"] #qz-options .option-btn.is-incorrect,
#view-dashboard .practice-option-btn.wrong {
  --craft-answer-depth: var(--craft-state-error);
  color: var(--craft-state-error) !important;
  background: var(--craft-state-error-paper) !important;
}
.quiz-choice-feedback { grid-column: 1 / -1; margin: 4px 0 0; font: 700 .9rem/1.5 var(--craft-ui); color: var(--craft-state-error); }
.quiz-choice-feedback.is-correct { color: var(--craft-state-success); }
.custom-folder-card, .custom-folder-card.pinned-vault,
.story-library-card, .dict-card { box-shadow: var(--craft-soft-shadow) !important; }
#view-dashboard .craft-quick-practice,
body[data-mode] .study-session-tracker { box-shadow: none !important; }
@media (max-width: 520px) {
  #view-quiz #qz-options { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-mode="quiz"] #qz-options .option-btn { min-height: 58px !important; }
  #view-dashboard .hf-dash-widget-action { min-height: 48px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #qz-options .option-btn, .practice-option-btn,
  :is(.apply-btn, .hf-dash-widget-action, .custom-new-set-btn, .cset-inline-save-btn, .practice-next-btn, .writing-nav-next, #nf-reveal-btn, .reading-confirm-submit-btn, #btn-submit-direct-email) {
    transition: none !important; translate: none !important;
  }
}

body[data-mode="quiz"] #qz-options .option-btn.is-correct > div { color: inherit !important; }

/* Four comfortable answer rows fit typical phones above the fixed dock. */
@media (max-width: 520px) {
  body[data-mode="quiz"] .study-header { margin-bottom: 4px !important; padding-bottom: 8px !important; }
  body[data-mode="quiz"] .qz-word-container { min-height: 160px !important; padding: 28px 22px !important; }
  #view-quiz #qz-options { gap: 10px !important; }
}

.global-book-selector .hf-dropdown-content { border-radius: 24px !important; box-shadow: var(--craft-focus-shadow) !important; }
.global-book-selector .hf-dropdown-content .chip {
  min-width: 48px !important; min-height: 48px !important;
  border: 1px solid var(--craft-focus-line) !important;
  border-radius: 16px !important; box-shadow: none !important;
  font-family: var(--craft-ui) !important; font-weight: 700;
  background: var(--craft-focus-paper); color: var(--text-main);
}
.global-book-selector .hf-dropdown-content .chip.active { background: var(--craft-tint) !important; border-color: var(--primary-color) !important; color: var(--primary-color) !important; }
.global-book-selector .hf-dropdown-content .lesson-chips-grid { gap: 8px !important; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important; }
@media (max-width: 800px) {
  .global-book-selector .hf-dropdown-content { max-height: calc(100dvh - 260px) !important; overscroll-behavior: contain; }
}

/* Repository study: sanidhyy/duolingo-clone at 7f36cd8.
   Apply its feed/support hierarchy and shared control states using TOCFLCraft assets. */
#sidebar .hf-menu-item { border-width: 2px !important; }
#sidebar .hf-menu-item.active { border-color: #a9d5cd !important; background: var(--craft-tint) !important; }
.craft-dashboard-welcome { display: grid; gap: 8px; margin-bottom: 24px; }
#view-dashboard .craft-dashboard-welcome .hf-dashboard-header-row { margin-bottom: 0 !important; padding-top: 12px; }
#view-dashboard .hf-dashboard-col-left { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
#view-dashboard .hf-dash-top-recents-container { margin-bottom: 0 !important; }
#view-dashboard .hf-dash-recents-top-card .hf-dash-widget-header { flex-wrap: wrap; gap: 12px; }
#view-dashboard .hf-dash-widget-title { letter-spacing: 0 !important; }
#view-dashboard .hf-recent-info h4, #view-dashboard .hf-recent-info p { white-space: normal !important; line-height: 1.5; }
#view-dashboard .hf-dashboard-col-right { align-content: start; }
#view-dashboard .hf-dash-stats-grid { order: 0; }
@media (min-width: 1000px) {
  .craft-dashboard-welcome { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 32px; }
  #view-dashboard .craft-dashboard-welcome .hf-dashboard-header-row { grid-column: 1; grid-row: 1; padding: 0; }
  .craft-dashboard-welcome .craft-panda { grid-column: 2; grid-row: 1; margin: 0; }
}
@media (min-width: 1180px) {
  #view-dashboard .hf-dashboard-grid { grid-template-columns: minmax(0, 1fr) 280px !important; gap: 40px !important; align-items: start; }
  #view-dashboard .hf-dashboard-col-left { grid-column: 1 !important; }
  #view-dashboard .hf-dashboard-col-right { grid-column: 2 !important; grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; position: sticky; top: 24px; }
  #view-dashboard .hf-dashboard-col-right > * { grid-column: 1 !important; }
  #view-dashboard .hf-dashboard-col-right > .hf-dash-widget-card { padding-top: 20px !important; }
  #view-dashboard .hf-dash-recents-top-card { padding: 24px !important; }
}
@media (max-width: 800px) {
  #view-dashboard .hf-dashboard-col-right { grid-template-columns: minmax(0, 1fr) !important; }
  .craft-dashboard-welcome { margin-bottom: 20px; }
}

/* Secondary variants share the primary action's silhouette with neutral depth. */
.writing-nav-btn:not(.writing-nav-next),
.sentence-controls .action-btn:not(:last-child),
.nf-card-container > div:last-child .action-btn:not(#nf-reveal-btn),
.custom-folder-action-btn,
.cset-inline-btn-flip,
.cset-inline-cancel-btn,
.reading-nav-btn:not(.next) {
  min-height: 48px !important;
  border: 2px solid var(--craft-answer-depth) !important;
  border-radius: var(--craft-button-radius) !important;
  background: var(--craft-focus-paper) !important;
  color: var(--text-main) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -3px 0 var(--craft-answer-depth) !important;
  transition: box-shadow 100ms ease, translate 100ms ease, background-color 150ms ease !important;
}
:is(.writing-nav-btn:not(.writing-nav-next), .sentence-controls .action-btn:not(:last-child), .nf-card-container > div:last-child .action-btn:not(#nf-reveal-btn), .custom-folder-action-btn, .cset-inline-btn-flip, .cset-inline-cancel-btn, .reading-nav-btn:not(.next)):hover:not(:disabled) { background: var(--craft-tint) !important; }
:is(.writing-nav-btn:not(.writing-nav-next), .sentence-controls .action-btn:not(:last-child), .nf-card-container > div:last-child .action-btn:not(#nf-reveal-btn), .custom-folder-action-btn, .cset-inline-btn-flip, .cset-inline-cancel-btn, .reading-nav-btn:not(.next)):active:not(:disabled) { translate: 0 2px; box-shadow: inset 0 -1px 0 var(--craft-answer-depth) !important; }
:is(.writing-nav-btn, .sentence-controls .action-btn:not(:last-child), .custom-folder-action-btn, .reading-nav-btn:not(.next)):disabled { opacity: .5; box-shadow: none !important; }
.craft-primary-action {
  min-height: 48px; border-radius: var(--craft-button-radius) !important;
  border: 2px solid var(--craft-button-depth) !important;
  background: var(--primary-color) !important; color: #fff !important;
  box-shadow: inset 0 -3px 0 var(--craft-button-depth) !important;
  font-family: var(--craft-ui); font-weight: 700;
}
.craft-primary-action:active:not(:disabled) { translate: 0 2px; box-shadow: inset 0 -1px 0 var(--craft-button-depth) !important; }

/* Lightweight progress is part of the exercise context, rather than another card. */
.craft-quiz-progress { width: min(100%, 650px); height: 10px; border-radius: 999px; background: var(--craft-answer-depth); margin: 0 0 16px; overflow: hidden; }
#quiz-progress-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary-color); transition: width 300ms ease-out; }
.qz-word-container .craft-quiz-prompt { position: absolute; top: 16px; left: 72px; right: 72px; margin: 0; text-align: center; font: 600 .85rem/1.4 var(--craft-ui); color: var(--text-muted); }
body[data-mode="quiz"] #qz-word[data-question-type="en"] { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; line-height: 1.5 !important; }
body[data-mode="quiz"] #qz-word[data-question-type="py"] { font-size: clamp(1.8rem, 4vw, 3rem) !important; line-height: 1.5 !important; }
.quiz-choice-feedback, .quiz-resume-feedback { grid-column: 1 / -1; border-radius: 16px; padding: 12px 16px; line-height: 1.5; margin: 2px 0 0; font-family: var(--craft-ui); }
.quiz-choice-feedback { background: var(--craft-state-error-paper); }
.quiz-choice-feedback.is-correct { background: var(--craft-state-success-paper); }
.quiz-resume-feedback { background: var(--craft-tint); color: var(--text-main); }
@media (max-width: 520px) {
  .craft-quiz-progress { height: 8px; margin-bottom: 8px; }
  #view-quiz .craft-quiz-toolbar { margin-bottom: 12px !important; }
  body[data-mode="quiz"] .qz-word-container { min-height: 152px !important; margin-bottom: 12px !important; }
  .qz-word-container .craft-quiz-prompt { font-size: .7rem; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #quiz-progress-fill, .craft-primary-action,
  :is(.writing-nav-btn, .sentence-controls .action-btn:not(:last-child), .custom-folder-action-btn, .reading-nav-btn:not(.next), .cset-inline-btn-flip, .cset-inline-cancel-btn, .nf-card-container .action-btn) { transition: none !important; translate: none !important; }
}

/* Review fixes: align hero and feed; keep the exercise next to its context. */
.craft-dashboard-welcome { width: 100%; }
@media (min-width: 1000px) { .craft-dashboard-welcome { gap: 40px; } }
#view-dashboard .practice-prompt-area { border: 0 !important; box-shadow: none !important; }
#view-quiz.active, #view-writing.active { justify-content: flex-start !important; padding-top: 12px !important; }
#view-quiz .craft-quiz-toolbar { max-width: 650px; margin-inline: auto; }
@media (max-width: 520px) { #view-quiz.active { padding-top: 0 !important; } }

#view-dashboard .hf-dash-recents-top-card .hf-dash-widget-title { font-size: 1.1rem !important; font-weight: 700; color: var(--primary-color); }
#view-dashboard #dashboard-recent-title { font-size: 1.05rem !important; }
#view-dashboard #dashboard-recent-subtitle { font-size: .88rem !important; }

@media (prefers-reduced-motion: reduce) { .sentence-controls .action-btn:last-child, .reading-nav-btn.next { transition: none !important; translate: none !important; } }

#view-reading .reading-nav-btn { border-radius: var(--craft-button-radius) !important; }

@media (min-width: 801px) { .hf-sidebar-toggle { min-width: 44px; height: 44px; flex-shrink: 0; border-radius: 16px; } }

/* Icon-only phone dock: spacious art, full button targets and named controls. */
@media (max-width: 800px) {
  .craft-mobile-nav { gap: 8px; padding-inline: 12px; }
  .craft-mobile-nav button { min-height: 52px; padding: 8px; gap: 0; }
  .craft-mobile-nav .craft-nav-art { width: 36px; height: 36px; flex-basis: 36px; }
  .craft-mobile-nav button[aria-current="page"] .craft-nav-art,
  .craft-mobile-nav button[aria-expanded="true"] .craft-nav-art { transform: none; }
}

@media (max-width: 800px) {
  .craft-mobile-nav button[aria-current="page"],
  .craft-mobile-nav button[aria-expanded="true"] { background: var(--craft-tint) !important; }
}

.hf-recent-icon.has-mode-art { background: transparent !important; }
.craft-recent-art { display: block; width: 40px; height: 40px; object-fit: contain; }

.craft-review-art { display: block; width: 32px; height: 32px; object-fit: contain; }

/* Larger supplied artwork, a lighter ivory canvas, and progress inside Profile. */
#sidebar .hf-menu-item .hf-menu-icon[class] { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
#sidebar .hf-menu-item .hf-menu-icon .craft-nav-art { width: 44px !important; height: 44px !important; }
.craft-nav-art[src*="custom-sets.webp"] { clip-path: inset(6% round 24%); }
@media (min-width: 801px) { #sidebar .hf-menu-item { min-height: 56px !important; padding-block: 6px !important; } }
@media (max-width: 800px) { .craft-mobile-nav button { padding: 4px; } .craft-mobile-nav .craft-nav-art { width: 44px; height: 44px; flex-basis: 44px; } }
#view-dashboard .hf-dashboard-col-right > .craft-review-widget {
  padding: 24px !important; border: 1px solid var(--craft-focus-line) !important;
  border-radius: 28px !important; background: var(--craft-focus-paper) !important;
  box-shadow: var(--craft-soft-shadow) !important;
}
#view-dashboard .craft-review-widget .hf-review-icon-box { width: 48px !important; height: 48px !important; }
#view-dashboard .craft-review-widget .craft-review-art { width: 44px; height: 44px; }
#view-dashboard .craft-review-widget .hf-review-action-btn {
  min-height: 48px; width: 100%; padding: 12px 16px !important;
  border: 2px solid var(--craft-button-depth) !important; border-radius: 16px !important;
  background: var(--primary-color) !important; color: #fff !important;
  box-shadow: inset 0 -3px 0 var(--craft-button-depth) !important;
}
#view-dashboard .craft-review-widget .hf-review-action-btn:active { translate: 0 2px; box-shadow: inset 0 -1px 0 var(--craft-button-depth) !important; }
#view-dashboard #dashboard-review-due-badge { background: var(--craft-tint) !important; color: var(--primary-color) !important; padding: 4px 10px !important; border-radius: 999px; }
.craft-profile-link { min-height: 44px; border: 0; padding: 8px; background: transparent; color: var(--primary-color); font: 700 .9rem var(--craft-ui); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#user-profile-modal-overlay .profile-modal-card {
  width: min(560px, calc(100vw - 32px)); max-width: 560px;
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px; border: 1px solid var(--craft-focus-line); border-radius: 30px;
  background: var(--craft-focus-paper); box-shadow: var(--craft-focus-shadow); text-align: left;
}
#user-profile-modal-overlay .profile-modal-card > div:first-child { position: sticky; top: -1px; z-index: 2; background: var(--craft-focus-paper); margin-bottom: 20px !important; }
#user-profile-modal-overlay .profile-modal-card > div:first-child button { width: 44px; min-height: 44px; border-radius: 50%; }
#user-profile-modal-overlay .profile-modal-body { padding: 0; display: flex; flex-direction: column; gap: 24px; }
#user-profile-modal-overlay .profile-card-header { border: 0; padding: 0; }
#user-profile-modal-overlay .profile-lg-avatar, #user-profile-modal-overlay .profile-lg-initial { width: 64px; height: 64px; flex: 0 0 64px; }
#user-profile-modal-overlay .profile-header-info { min-width: 0; }
#profile-modal-email { overflow-wrap: anywhere; }
.craft-profile-progress h4 { margin: 0 0 12px; font-size: 1rem; }
#user-profile-modal-overlay .profile-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
#user-profile-modal-overlay .profile-stat-box { border: 0; border-radius: 18px; background: var(--bg-color); padding: 16px 10px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
#user-profile-modal-overlay .stat-num { font-size: 1.5rem; line-height: 1.2; }
#user-profile-modal-overlay .stat-lbl { font-size: .8rem; }
#user-profile-modal-overlay .profile-stat-box small { font-size: .72rem; color: var(--text-muted) !important; background: transparent !important; }
.craft-profile-reading { width: 100%; min-height: 76px; display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--craft-focus-line); border-radius: 20px; background: var(--craft-focus-paper); color: var(--text-main); text-align: left; cursor: pointer; }
.craft-profile-reading span:not(.craft-profile-reading-arrow) { display: grid; gap: 4px; }
.craft-profile-reading small { color: var(--text-muted); }
.craft-profile-reading-arrow { margin-left: auto; color: var(--primary-color); }
#user-profile-modal-overlay .profile-action-list { gap: 4px; }
#user-profile-modal-overlay .profile-action-row { min-height: 56px; border: 0; border-radius: 16px; background: transparent; padding: 12px 4px; }
#user-profile-modal-overlay .profile-action-row:hover, .craft-profile-reading:hover { background: var(--craft-tint); }
@media (max-width: 420px) { #user-profile-modal-overlay .profile-modal-card { padding: 20px; } #user-profile-modal-overlay .profile-stat-box { padding: 14px 8px; } }
@media (prefers-reduced-motion: reduce) { #view-dashboard .craft-review-widget .hf-review-action-btn:active { translate: none; } }

@media (max-width: 420px) { #user-profile-modal-overlay .stat-num { font-size: clamp(1.15rem, 5.5vw, 1.5rem); white-space: nowrap; } }

#profile-modal-email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
#profile-modal-username { overflow-wrap: anywhere; }

/* A quiet flashcard console: position plus two controls, without grading totals. */
body[data-mode="flashcards"] #current-title,
body[data-mode="flashcards"] .flashcard-page-subtitle,
body[data-mode="flashcards"] .study-session-tracker .stat-box,
body[data-mode="flashcards"] .study-session-tracker .progress-bar-wrapper,
body[data-mode="flashcards"] #tracker-percent,
body[data-mode="flashcards"] .tracker-counter > .tracker-label { display: none !important; }
body[data-mode="flashcards"] .study-session-tracker {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: auto !important; gap: 8px !important;
  width: min(400px, calc(100% - 24px)) !important; max-width: 400px !important;
  min-height: 56px !important; padding: 6px 10px 6px 16px !important;
  margin: 4px auto 8px !important; border-radius: 28px !important;
  border: 1px solid var(--craft-focus-line) !important;
  background: var(--craft-focus-paper) !important;
  box-shadow: 0 5px 18px -10px rgba(28, 57, 53, .13) !important;
}
body[data-mode="flashcards"] .tracker-counter { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; align-items: center; min-width: 0 !important; height: 44px !important; padding: 0 !important; }
body[data-mode="flashcards"] .tracker-counter-value { display: inline-flex; align-items: baseline; gap: 5px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
body[data-mode="flashcards"] #mode-total { color: var(--text-muted); font-weight: 600; }
body[data-mode="flashcards"] #undo-btn { display: inline-flex !important; grid-column: 2 !important; grid-row: 1 !important; order: 2; min-height: 44px !important; height: 44px !important; min-width: 44px !important; width: auto !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; background: transparent !important; border-radius: 20px !important; }
body[data-mode="flashcards"] #undo-btn:disabled { opacity: .38; cursor: not-allowed; }
body[data-mode="flashcards"] .study-session-tracker > .dropdown { grid-column: 3 !important; grid-row: 1 !important; order: 3; }
body[data-mode="flashcards"] .study-session-tracker .dropdown-toggle { width: 44px !important; height: 44px !important; min-height: 44px !important; min-width: 44px !important; border: 0 !important; background: var(--craft-tint) !important; }
body[data-mode="flashcards"] .study-area > .study-header { gap: 10px !important; padding-top: 8px !important; margin-bottom: 8px !important; }

/* Physical paper depth without decorative stickers. */
#view-new-feature .nf-card-container { isolation: isolate; overflow: visible !important; padding-top: 30px !important; margin-top: 18px !important; border-bottom: 5px solid #dbe6e2 !important; box-shadow: 0 7px 0 -2px #e8efeb, 0 24px 42px -18px rgba(28,57,53,.24), inset 0 1px 0 #fff !important; }
#nf-prompt-label { text-transform: none !important; letter-spacing: .02em !important; }
/* Dashboard is now a focused greeting, without its 3D companion. */
#view-dashboard .craft-dashboard-welcome { display: block !important; margin-bottom: 28px; }
#view-dashboard .craft-dashboard-welcome .hf-dashboard-header-row { padding-top: 8px !important; }

@media (max-width: 520px) {
  .fluency-flow-toolbar { flex-wrap: wrap !important; width: calc(100% - 24px) !important; gap: 8px !important; padding: 6px !important; }
  .fluency-flow-toolbar > .global-book-selector { flex: 1 0 100% !important; width: 100% !important; }
  .fluency-flow-toolbar > #nf-play-pause-btn, .fluency-flow-toolbar > .quiz-settings-glass { flex: 1 1 0 !important; min-width: 0 !important; }
  .fluency-flow-toolbar .fluency-tool-btn { width: 100% !important; justify-content: center; }
}

/* Compact icon controls and a tactile teal progress track. */
.hf-search-container { display: none !important; }
.hf-topbar { justify-content: flex-end !important; }
body[data-mode="quiz"] #current-title { display: none !important; }
.fluency-flow-toolbar { flex-wrap: nowrap !important; width: max-content !important; gap: 10px !important; padding: 6px !important; }
.fluency-flow-toolbar > .fluency-tool-item, .fluency-flow-toolbar > #nf-play-pause-btn { flex: 0 0 48px !important; width: 48px !important; min-width: 48px !important; }
.fluency-flow-toolbar .fluency-tool-btn, #view-quiz .craft-quiz-toolbar .quiz-settings-glass > summary { width: 48px !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; border-radius: 18px !important; }
.fluency-flow-toolbar .fluency-tool-btn .btn-label, .fluency-flow-toolbar .fluency-tool-btn .dropdown-chevron-svg { display: none !important; }
.fluency-flow-toolbar .fluency-tool-btn > svg { width: 22px; height: 22px; flex-shrink: 0; }
.fluency-flow-toolbar .fluency-tool-btn::after, #view-quiz .craft-quiz-toolbar .quiz-settings-glass > summary::after { display: none !important; }
.fluency-settings-dropdown-content .fluency-help-btn { min-width: 44px !important; min-height: 44px !important; align-self: flex-end; }
body[data-mode="flashcards"] .study-session-tracker { grid-template-rows: auto 10px !important; padding-bottom: 12px !important; gap: 4px 8px !important; }
body[data-mode="flashcards"] .study-session-tracker .progress-bar-wrapper { display: block !important; grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; height: 10px !important; margin: 0 !important; background: #dfeae5 !important; border-radius: 999px !important; overflow: hidden; box-shadow: inset 0 2px 2px rgba(28,57,53,.08); }
body[data-mode="flashcards"] #visual-progress-bar { background: linear-gradient(90deg,#078c8e,#22b5a5) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.25); }
@media(max-width:800px) { .hf-topbar { display: none !important; } }
@media(prefers-reduced-motion:reduce) { #visual-progress-bar { transition: none !important; } }

/* Shared tactile learning surfaces: a solid paper edge, then a soft lift. */
body[data-mode="flashcards"] :is(#flashcard,#flashcard-background) :is(.card-front,.card-back),
body[data-mode="new-feature"] .nf-card-container,
body[data-mode="quiz"] .qz-word-container,
body[data-mode="sentences"] .sentence-card,
body[data-mode="writing"] .writing-card.modern-card {
  border: 1px solid var(--craft-focus-line) !important; border-bottom: 6px solid #d9e5e0 !important; border-radius: 30px !important;
  box-shadow: 0 5px 0 -1px #edf2ef, 0 22px 38px -21px rgba(28,57,53,.25), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
body[data-mode="quiz"] .qz-word-container { min-height: 280px !important; padding: 66px 28px 32px !important; width: 100%; box-sizing: border-box; }
.global-book-selector > summary { width: 52px !important; min-width: 52px !important; height: 52px !important; min-height: 52px !important; padding: 4px !important; border-radius: 18px !important; display: flex !important; align-items: center; justify-content: center; }
.global-book-selector.study-book-banner { width: max-content !important; }
.global-book-selector > summary :is(.book-banner-text,.btn-label,.dropdown-chevron-svg) { display: none !important; }
.book-banner-btn-inner { justify-content: center !important; gap: 0 !important; }
.craft-book-control-art { width: 40px !important; height: 40px !important; object-fit: contain; flex-shrink: 0; }
:is(.study-session-tracker .dropdown-toggle,.quiz-settings-glass > summary.settings-btn,#view-quiz .quiz-settings-glass > summary,#view-sentences .quiz-settings-glass > summary,#reading-settings-btn) { position: relative; width: 52px !important; height: 52px !important; min-height: 52px !important; min-width: 52px !important; padding: 4px !important; border-radius: 18px !important; display: flex !important; align-items: center; justify-content: center; }
:is(.study-session-tracker .dropdown-toggle,.quiz-settings-glass > summary.settings-btn,#view-quiz .quiz-settings-glass > summary,#view-sentences .quiz-settings-glass > summary,#reading-settings-btn) > :is(svg,.btn-label,.reading-btn-text) { display: none !important; }
:is(.study-session-tracker .dropdown-toggle,.quiz-settings-glass > summary.settings-btn,#view-quiz .quiz-settings-glass > summary,#view-sentences .quiz-settings-glass > summary,#reading-settings-btn)::before { content: ''; display: block; width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: url('/icons/settings-control.png?cv=20261008_v232_clean_deck') center / cover no-repeat; }
.fluency-flow-toolbar > .fluency-tool-item { flex-basis: 52px !important; width: 52px !important; }
@media(max-width:800px) { body[data-mode="quiz"] .qz-word-container { min-height: clamp(220px,29dvh,280px) !important; padding: 60px 20px 28px !important; } }
@media(max-width:380px) { body[data-mode="quiz"] .qz-word-container { min-height: 210px !important; } }

.fluency-flow-toolbar .global-book-selector > summary, .fluency-flow-toolbar .settings-btn { width: 52px !important; height: 52px !important; min-height: 52px !important; }
#reading-settings-btn::after { display: none !important; }

/* Refinement: smaller artwork, crisp depth, paired lesson/settings controls. */
.craft-book-control-art { width: 30px !important; height: 30px !important; }
.global-book-selector > summary, .fluency-flow-toolbar .global-book-selector > summary, .fluency-flow-toolbar .settings-btn { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 15px !important; }
:is(.study-session-tracker .dropdown-toggle,.quiz-settings-glass > summary.settings-btn,#view-quiz .quiz-settings-glass > summary,#view-sentences .quiz-settings-glass > summary,#reading-settings-btn) { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
:is(.study-session-tracker .dropdown-toggle,.quiz-settings-glass > summary.settings-btn,#view-quiz .quiz-settings-glass > summary,#view-sentences .quiz-settings-glass > summary,#reading-settings-btn)::before { width: 30px; height: 30px; border-radius: 9px; }
.quiz-settings-glass > summary::after, .dropdown-toggle::after { display: none !important; content: none !important; }
.fluency-flow-toolbar > .fluency-tool-item, .fluency-flow-toolbar > #nf-play-pause-btn { width: 44px !important; min-width: 44px !important; flex-basis: 44px !important; }
.fluency-flow-toolbar .fluency-tool-btn { width: 44px !important; min-height: 44px !important; height: 44px !important; }
.study-session-tracker > .dropdown { gap: 6px; }
.study-session-tracker .study-book-banner, .craft-quiz-toolbar .study-book-banner, #view-sentences .study-book-banner { margin: 0 !important; padding: 0 !important; flex-shrink: 0; }
#view-quiz .craft-quiz-toolbar { justify-content: flex-start !important; gap: 6px !important; }
#quiz-score-ui { margin-left: auto; }
body[data-mode="flashcards"] :is(#flashcard,#flashcard-background) :is(.card-front,.card-back), body[data-mode="new-feature"] .nf-card-container, body[data-mode="quiz"] .qz-word-container, body[data-mode="sentences"] .sentence-card, body[data-mode="writing"] .writing-card.modern-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; }
#view-quiz .craft-quiz-prompt { display: none !important; }
@media(max-width:800px) { body[data-mode="quiz"] .qz-word-container { min-height: clamp(245px,32dvh,300px) !important; padding: 56px 20px 28px !important; } }

.study-session-tracker { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
[data-craft-disclosure] > :not(summary) { animation: none !important; }

/* Controls use transparent symbols, matching the shell's simple settings icon. */
.craft-book-control-art { width: 24px !important; height: 24px !important; }
:is(.study-session-tracker .dropdown-toggle,.quiz-settings-glass > summary.settings-btn,#view-quiz .quiz-settings-glass > summary,#view-sentences .quiz-settings-glass > summary,#reading-settings-btn)::before { width: 24px; height: 24px; border-radius: 0; background-size: contain; }

/* Keep the user's supplied glossy artwork, inside compact accessible controls. */
.craft-book-control-art { width: 30px !important; height: 30px !important; object-fit: contain; border-radius: 9px; }
:is(.study-session-tracker .dropdown-toggle,.quiz-settings-glass > summary.settings-btn,#view-quiz .quiz-settings-glass > summary,#view-sentences .quiz-settings-glass > summary,#reading-settings-btn)::before { width: 30px; height: 30px; border-radius: 9px; background-size: contain; }

/* Explicit icon geometry avoids inherited image constraints in the Quiz toolbar. */
.global-book-selector > summary .craft-book-control-art, #view-quiz .craft-quiz-toolbar .craft-book-control-art { width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: none !important; flex: 0 0 32px !important; display: block !important; object-fit: contain; }

/* Slim phone console; icons stay inside full 44px touch targets. */
@media(max-width:800px) {
 body[data-mode="flashcards"] .study-session-tracker { min-height: 0 !important; padding: 3px 8px 8px 12px !important; gap: 1px 4px !important; border-radius: 22px !important; grid-template-rows: 44px 6px !important; }
 body[data-mode="flashcards"] .study-session-tracker .progress-bar-wrapper { height: 6px !important; }
 body[data-mode="flashcards"] .study-session-tracker .tracker-counter-value { font-size: .95rem; }
 body[data-mode="flashcards"] .study-session-tracker .dropdown { gap: 2px; }
 body[data-mode="flashcards"] .study-session-tracker .craft-book-control-art { width: 26px !important; height: 26px !important; min-width: 26px !important; flex-basis: 26px !important; }
 body[data-mode="flashcards"] .study-session-tracker .dropdown-toggle::before { width: 26px; height: 26px; }
 body[data-mode="flashcards"] .study-session-tracker .global-book-selector > summary, body[data-mode="flashcards"] .study-session-tracker .dropdown-toggle { background: transparent !important; border: 0 !important; box-shadow: none !important; }
}

/* Inline deck writing: quiet paper, clear front/back, no separate add window. */
#cset-cards-viewer-overlay .cset-inline-face { border: 1px solid var(--craft-focus-line); border-bottom: 5px solid #dce7e2; border-radius: 26px; background: var(--card-bg); box-shadow: none; }
#cset-cards-viewer-overlay .cset-inline-term-input { font-family: var(--craft-hanzi) !important; background: transparent !important; border: 0 !important; border-radius: 0; text-align: center; min-width: 0; width: 100%; }
#cset-cards-viewer-overlay .cset-inline-clean-input { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--craft-focus-line) !important; border-radius: 0; padding: 10px 0; font-family: var(--craft-ui); }
#cset-cards-viewer-overlay .cset-add-tile-card { cursor: pointer; border-radius: 26px; }
#cset-cards-viewer-overlay :is(input,button,.cset-add-tile-card):focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
#cset-cards-viewer-overlay .cset-inline-face button { min-height: 44px; }

#cset-cards-viewer-overlay button[onclick*="_triggerInlineAdd"] { display: none !important; }
#cset-cards-viewer-overlay .cset-inline-editor-card { height: 320px !important; min-height: 320px !important; }
#cset-cards-viewer-overlay .cset-inline-3d-card, #cset-cards-viewer-overlay .cset-inline-face { min-height: 320px !important; }
@media(prefers-reduced-motion:reduce) { #cset-cards-viewer-overlay .cset-inline-3d-card { transition: none !important; } }

#cset-cards-viewer-overlay .cset-stacked-card-wrapper { height: 320px !important; }
#cset-cards-viewer-overlay .cset-inline-term-input:focus { box-shadow: none !important; outline: none !important; background: transparent !important; border-bottom: 2px solid var(--primary-color) !important; }

/* Folder cards borrow the quiet paper and solid edge of Flashcards. */
#cset-cards-viewer-overlay .cset-card-index-tag, #cset-cards-viewer-overlay .cset-inline-hint-caption, #cset-cards-viewer-overlay .cset-inline-cancel-btn { display: none !important; }
#cset-cards-viewer-overlay :is(.cset-card-face,.cset-stacked-front-layer,.cset-inline-face) { background: var(--card-bg) !important; border: 1px solid var(--craft-focus-line) !important; border-bottom: 5px solid #dce7e2 !important; border-radius: 26px !important; box-shadow: none !important; }
#cset-cards-viewer-overlay .cset-card-header-row { justify-content: flex-end; }
#cset-cards-viewer-overlay .cset-card-zh-text { letter-spacing: 0 !important; font-weight: 400 !important; line-height: 1.25; }
#cset-cards-viewer-overlay .cset-card-zh-text.is-hanzi { font-family: var(--craft-hanzi) !important; font-size: clamp(2.5rem,5vw,4rem) !important; }
#cset-cards-viewer-overlay .cset-card-zh-text.is-latin { font-family: var(--craft-ui) !important; font-size: clamp(1.8rem,3vw,2.5rem) !important; font-weight: 600 !important; }
#cset-cards-viewer-overlay :is(.cset-card-py-text,.cset-card-en-text,.cset-card-flip-prompt) { font-family: var(--craft-ui) !important; letter-spacing: 0 !important; }
#cset-cards-viewer-overlay .cset-play-deck-btn { width: 48px; height: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #087d80; border-bottom: 4px solid #086c70; border-radius: 17px; background: #109b9d; color: white; box-shadow: none; }
#cset-cards-viewer-overlay .cset-play-deck-btn svg { width: 22px; height: 22px; margin: 0; }
#cset-cards-viewer-overlay .cset-play-deck-btn:active { border-bottom-width: 1px; transform: translateY(3px); }
#cset-cards-viewer-overlay .cset-inline-face-bottom { justify-content: flex-end !important; }
#cset-cards-viewer-overlay .cset-inline-clean-input:focus { outline: none !important; box-shadow: none !important; border-bottom: 2px solid var(--primary-color) !important; }
#cset-cards-viewer-overlay .cset-inline-face-tag { background: transparent; color: var(--text-muted); font-size: .75rem; text-transform: none; letter-spacing: 0; }

/* Reading text inspects; the separate letter control answers. */
#view-reading .reading-paper-option { cursor: default; display: flex; gap: 12px; align-items: flex-start; }
#view-reading .reading-answer-select { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #c9dedd; border-bottom-width: 3px; border-radius: 13px; font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700; cursor: pointer; }
#view-reading .reading-answer-select:disabled { cursor: default; opacity: .7; }
#view-reading .reading-paper-opt-text { flex: 1; min-width: 0; }
#view-reading .reading-lookup-char { display: inline; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 4px; padding: 3px 0; margin: 0; cursor: pointer; line-height: inherit; box-shadow: none; touch-action: manipulation; }
#view-reading .reading-lookup-char:hover { background: #e6f3f0; color: #087e80; }
#view-reading .reading-lookup-char:focus-visible, #view-reading .reading-answer-select:focus-visible { outline: 2px solid #087e80; outline-offset: 2px; }

#view-reading button.reading-lookup-char { font-family: 'TWKai', 'LXGW WenKai TC', 'Noto Sans TC', serif !important; font-size: inherit !important; font-weight: 400 !important; }

/* A quiet two-row reading console and solid tactile paper. */
#view-reading .reading-toolbar { display: grid !important; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 18px 20px !important; border-radius: 22px !important; background: #fff !important; border: 1px solid #dce8e3; border-bottom: 4px solid #dce8e3; box-shadow: none !important; }
#view-reading .reading-toolbar-left { display: flex !important; flex-wrap: wrap; align-items: center; gap: 16px !important; min-width: 0; }
#view-reading .reading-toolbar-right { display: flex !important; align-items: center; gap: 8px !important; }
#view-reading .reading-filter-pills { display: flex; gap: 4px; padding: 4px; border-radius: 15px; background: #f0f5f2; }
#view-reading .reading-pill { min-height: 40px; border-radius: 11px; padding: 6px 12px; }
#view-reading .reading-pill.active { background: #e0f3ed; color: #087e80; box-shadow: 0 3px 0 #bcded3; }
#view-reading .reading-tool-icon-btn { min-height: 44px; min-width: 44px; border-radius: 13px !important; }
#view-reading .reading-paper-sheet { border-radius: 24px; border-bottom: 5px solid #dce8e3; box-shadow: none; }
#view-reading .reading-bottom-nav { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
@media(max-width:800px) {
 #view-reading .reading-toolbar { grid-template-columns: minmax(0,1fr) !important; gap: 12px; padding: 14px !important; }
 #view-reading .reading-toolbar-left { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
 #view-reading .reading-toolbar-right { display: grid !important; grid-template-columns: minmax(0,1fr) 44px 44px !important; }
 #view-reading .reading-filter-pills { width: 100%; justify-content: space-between; box-sizing: border-box; }
 #view-reading .reading-bottom-nav { gap: 8px; }
}

#view-reading .reading-bottom-nav { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto; padding: 12px !important; border-radius: 20px; background: #fff; }
#view-reading .reading-nav-progress-bar { height: 8px; border-radius: 8px; background: #e1ece6; }
#view-reading .reading-nav-progress-fill { background: #139c91; border-radius: inherit; box-shadow: inset 0 2px 0 #ffffff40; }
#view-reading .reading-nav-btn { min-height: 44px; border-radius: 14px; border-bottom-width: 4px; }
#view-reading .reading-lookup-char { text-decoration: underline; text-decoration-color: #a8d8ce; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media(max-width:800px) { #view-reading .reading-nav-shortcut-hint { display: none; } #view-reading .reading-paper-meta-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } }

#view-reading .reading-pill.active { color: #087e80 !important; }

.dict-source-credit { display:block; margin-top:10px; font-family: var(--craft-ui); font-size:12px; color:var(--text-muted); } .dict-source-credit a { color:var(--primary-color); }

/* Writing shares the quiet count/control console. */
/* A quiet flashcard console: position plus two controls, without grading totals. */
body[data-mode="writing"] #current-title,
body[data-mode="writing"] .flashcard-page-subtitle,
body[data-mode="writing"] .study-session-tracker .stat-box,
body[data-mode="writing"] .study-session-tracker .progress-bar-wrapper,
body[data-mode="writing"] #tracker-percent,
body[data-mode="writing"] .tracker-counter > .tracker-label { display: none !important; }
body[data-mode="writing"] .study-session-tracker {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: auto !important; gap: 8px !important;
  width: min(400px, calc(100% - 24px)) !important; max-width: 400px !important;
  min-height: 56px !important; padding: 6px 10px 6px 16px !important;
  margin: 4px auto 8px !important; border-radius: 28px !important;
  border: 1px solid var(--craft-focus-line) !important;
  background: var(--craft-focus-paper) !important;
  box-shadow: 0 5px 18px -10px rgba(28, 57, 53, .13) !important;
}
body[data-mode="writing"] .tracker-counter { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; align-items: center; min-width: 0 !important; height: 44px !important; padding: 0 !important; }
body[data-mode="writing"] .tracker-counter-value { display: inline-flex; align-items: baseline; gap: 5px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
body[data-mode="writing"] #mode-total { color: var(--text-muted); font-weight: 600; }
body[data-mode="writing"] #undo-btn { display: inline-flex !important; grid-column: 2 !important; grid-row: 1 !important; order: 2; min-height: 44px !important; height: 44px !important; min-width: 44px !important; width: auto !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; background: transparent !important; border-radius: 20px !important; }
body[data-mode="writing"] #undo-btn:disabled { opacity: .38; cursor: not-allowed; }
body[data-mode="writing"] .study-session-tracker > .dropdown { grid-column: 3 !important; grid-row: 1 !important; order: 3; }
body[data-mode="writing"] .study-session-tracker .dropdown-toggle { width: 44px !important; height: 44px !important; min-height: 44px !important; min-width: 44px !important; border: 0 !important; background: var(--craft-tint) !important; }
body[data-mode="writing"] .study-area > .study-header { gap: 10px !important; padding-top: 8px !important; margin-bottom: 8px !important; }


body[data-mode="writing"] .study-session-tracker .progress-bar-wrapper { display: block !important; grid-column: 1 / -1 !important; grid-row: 2 !important; height: 6px !important; width: 100% !important; margin: 0 !important; border-radius: 8px; }
body[data-mode="writing"] .study-session-tracker { grid-template-rows: auto 6px !important; gap: 4px !important; }
body[data-mode="writing"] .writing-controls-row { display: flex !important; justify-content: center; align-items: center; gap: 8px !important; padding: 6px !important; border-radius: 22px; width: fit-content !important; margin: 0 auto 8px; background: white; border: 1px solid #dce8e3; box-shadow: none !important; }
body[data-mode="writing"] .writing-nav-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; border-radius: 14px !important; display: inline-flex; align-items: center; justify-content: center; }
body[data-mode="writing"] .writing-nav-btn span { display: none !important; }
body[data-mode="writing"] .writing-nav-btn svg { width: 20px; height: 20px; }
body[data-mode="writing"] .writing-card.modern-card { background: #fff !important; border: 1px solid #dce8e3 !important; border-bottom: 5px solid #dce8e3 !important; border-radius: 28px !important; box-shadow: none !important; }
#view-reading .reading-lookup-char, #view-story .clickable-zh, #view-story .story-vocab-unit { text-decoration: none !important; border-bottom: 0; }
#view-reading .reading-paper-q-text { font-size: 1.65rem !important; line-height: 1.65 !important; }
#view-reading .reading-paper-opt-text { font-size: 1.45rem !important; line-height: 1.7 !important; }
@media(max-width:800px) { #view-reading .reading-paper-q-text { font-size: 1.55rem !important; } #view-reading .reading-paper-opt-text { font-size: 1.35rem !important; } }

body[data-mode="writing"] #undo-btn span { display:none !important; } body[data-mode="writing"] .study-area > .study-header { padding-bottom: 4px !important; }
@media(max-width:800px) { body[data-mode="writing"] .craft-book-control-art, body[data-mode="writing"] .craft-settings-control-art { width:26px !important; height:26px !important; } }

/* Brief, tactile dictionary inspector; actions remain mounted. */
#char-search-modal .dict-title-short { display:none !important; }
#char-search-modal .dict-title-full { font-size:16px !important; text-transform:none !important; letter-spacing:0 !important; font-weight:700 !important; }
#char-search-modal .dict-modal-header { padding:16px 20px !important; }
#char-search-modal .dict-unified-hero { padding:18px !important; border:1px solid #dce8e3 !important; border-bottom:4px solid #dce8e3 !important; border-radius:22px !important; box-shadow:none !important; gap:18px !important; }
#char-search-modal .dict-hero-meaning { font-size:15px !important; line-height:1.6 !important; }
#char-search-modal .dict-hero-pinyin { font-size:17px !important; font-weight:500 !important; }
#char-search-modal .dict-source-credit { font-size:11px; line-height:1.5; margin-top:10px; }
#char-search-modal .dict-stroke-btn, #char-search-modal .dict-stroke-nav-btn { min-height:40px; border-radius:12px !important; border-bottom:3px solid #d1e4dd; }
#char-search-modal .dict-card { padding:16px !important; border-radius:20px !important; box-shadow:none !important; }
#char-search-modal .dict-tabs-header { border-radius:16px !important; padding:5px !important; }
#char-search-modal .dict-tab-btn { border-radius:12px !important; min-height:44px; font-size:14px !important; }

#craft-welcome-guide { width:min(650px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #dae8e1; border-radius:30px; background:#fff; color:var(--text-main); box-shadow:0 22px 70px #193b3529; overflow:auto; font-family:var(--craft-ui); }
#craft-welcome-guide::backdrop { background:#223d395c; backdrop-filter:blur(5px); }
.guide-shell { padding:24px; }
.guide-shell header,.guide-shell footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.guide-brand { color:var(--text-muted); font-size:13px; font-weight:600; }
.guide-close,.guide-prev,.guide-help { width:44px; height:44px; border:1px solid #dce8e3; border-radius:14px; background:#f4f8f5; color:#087e80; font-size:20px; }
.guide-shell h2 { font-size:26px; line-height:1.25; margin:12px 0 8px; }
.guide-intro { font-size:14px; color:var(--text-muted); margin:0 0 20px; }
.guide-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.guide-card { padding:18px; background:#f8fbf9; border:1px solid #dce8e3; border-bottom:4px solid #dce8e3; border-radius:22px; }
.guide-card img { display:block; width:52px; height:52px; object-fit:contain; margin-bottom:10px; }
.guide-card h3 { font-size:15px; margin:0 0 12px; }
.guide-example { font-family:'TWKai','LXGW WenKai TC','Noto Sans TC',serif; color:#087e80; font-size:21px; background:#e9f4ee; border-radius:12px; padding:10px; min-height:46px; display:flex; align-items:center; }
.guide-card p { font-size:12px; line-height:1.5; margin:10px 0 0; color:var(--text-muted); }
.guide-next { min-height:46px; padding:10px 18px; border:1px solid #087e80; border-bottom:4px solid #06676a; border-radius:14px; background:#109b9d; color:#fff; font-weight:700; }
.guide-next:active { transform:translateY(2px); border-bottom-width:2px; }
.guide-prev:disabled { opacity:.35; }
.guide-dots { display:flex; gap:8px; }
.guide-dots button { width:24px; height:32px; padding:0; border:0; background:transparent; position:relative; }
.guide-dots button::after { content:''; position:absolute; inset:12px 8px; border-radius:8px; background:#d4e5de; }
.guide-dots button[aria-current="step"]::after { background:#087e80; }
.guide-skip { display:block; margin:14px auto 0; min-height:36px; border:0; background:transparent; color:var(--text-muted); font-size:12px; }
#craft-welcome-guide button:focus-visible,.guide-help:focus-visible { outline:2px solid #087e80; outline-offset:3px; }
@media(max-width:520px) { .guide-shell { padding:18px; } .guide-shell h2 { font-size:22px; } .guide-card { padding:12px; } .guide-card h3 { font-size:13px; } .guide-example { font-size:18px; padding:8px; } .guide-card img { width:44px; height:44px; } .guide-help { width:36px; height:36px; font-size:16px; } }

body.craft-guide-open { overflow:hidden; }
#craft-welcome-guide { overscroll-behavior:contain; }
.guide-example { font-family:var(--craft-ui); font-size:15px; flex-wrap:wrap; gap:5px; }
.guide-hanzi { font-family:'TWKai','LXGW WenKai TC','Noto Sans TC',serif; font-size:28px; }
.guide-card:last-child:nth-child(3) { grid-column:1 / -1; }
#craft-welcome-guide[open] { animation:craft-guide-enter .22s ease-out; }
@keyframes craft-guide-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { #craft-welcome-guide[open] { animation:none; } }

#craft-welcome-guide { margin:auto; box-sizing:border-box; }
.guide-shell h2,.guide-card h3 { font-weight:700; }

.guide-process { list-style:none; counter-reset:guide-step; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.guide-process li { counter-increment:guide-step; display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.5; }
.guide-process li::before { content:counter(guide-step); flex:0 0 22px; height:22px; display:grid; place-items:center; border-radius:8px; background:#dceee7; color:#087e80; font-weight:700; }
@media(max-width:520px) { .guide-cards { grid-template-columns:1fr; } .guide-card { display:grid; grid-template-columns:44px 1fr; column-gap:12px; } .guide-card img { grid-row:1 / 3; } .guide-card h3 { margin:0 0 8px; align-self:center; } .guide-card .guide-example { grid-column:2; } .guide-card p,.guide-process { grid-column:1 / -1; } }

/* Interactive welcome examples and optically centered controls. */
.guide-close,.guide-help,.guide-prev { display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; line-height:1 !important; flex-shrink:0; }
.guide-close svg,.guide-help svg { width:20px; height:20px; display:block; margin:0 !important; }
.guide-help { min-width:44px; min-height:44px; }
.guide-demo { min-height:110px; display:flex; align-items:center; gap:12px; padding:14px; background:#e9f4ee; border-radius:16px; margin:0 0 4px; }
.guide-demo-symbol { width:42px; height:42px; display:grid; place-items:center; flex-shrink:0; border-radius:13px; background:#fff; color:#087e80; border-bottom:3px solid #ccded6; }
.guide-demo-symbol svg { width:24px; height:24px; }
.guide-demo-chips { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.guide-demo-chip { display:inline-flex; align-items:center; padding:6px 9px; border:1px solid #cde1d7; border-bottom:3px solid #cde1d7; border-radius:10px; background:#fff; font-size:12px; color:#27504b; }
.guide-process li { display:block; }
.guide-process li::before { display:none; }
.guide-step { display:flex; width:100%; gap:9px; align-items:center; min-height:44px; text-align:left; padding:6px; border:1px solid transparent; border-radius:12px; color:#526b68; background:transparent; font-family:var(--craft-ui); font-size:12px; line-height:1.5; }
.guide-step[aria-pressed="true"] { background:#e9f4ee; border-color:#bedbd0; color:#245650; }
.guide-step-number { width:23px; height:23px; flex-shrink:0; display:grid; place-items:center; background:#dceee7; color:#087e80; border-radius:8px; font-weight:700; }
.guide-step[aria-pressed="true"] .guide-step-number { background:#087e80; color:white; }
.guide-shell header { position:sticky; top:-24px; z-index:1; background:white; padding:8px 0; }
.guide-shell footer { position:sticky; bottom:-24px; background:white; padding:12px 0; z-index:1; border-top:1px solid #e2ece7; }
.guide-dots button { min-width:32px; min-height:44px; }
.guide-dots button::after { inset:18px 12px; }
@media(max-width:520px) { .guide-demo { grid-column:1 / -1; min-height:96px; margin-top:8px; } .guide-card img { grid-row:1; margin:0; } .guide-card h3 { margin:0; } .guide-shell header { top:-18px; } .guide-shell footer { bottom:-18px; } }

.guide-shell header { top:0; } .guide-shell footer { bottom:0; }
@media(max-width:520px) { .guide-shell header { top:0; } .guide-shell footer { bottom:0; } }

#quick-definition { margin:auto; width:min(360px,calc(100vw - 32px)); box-sizing:border-box; max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:24px; border:1px solid #d9e6df; border-bottom:5px solid #d9e6df; border-radius:24px; background:white; color:#203d41; box-shadow:0 12px 32px #244a4020; font-family:var(--craft-ui); }
#quick-definition::backdrop { background:#233d3929; }
#quick-definition h2 { font-family:'TWKai','LXGW WenKai TC','Noto Sans TC',serif; font-size:clamp(32px,8vw,44px); line-height:1.25; margin:0 44px 8px 0; overflow-wrap:anywhere; }
.quick-close { position:absolute; top:12px; right:12px; width:44px; height:44px; padding:0; display:grid; place-items:center; border:0; border-radius:13px; background:#f1f7f3; color:#087e80; }
.quick-close svg { width:20px; height:20px; }
.quick-pinyin { margin:0 0 14px; font-size:16px; color:#087e80; }
.quick-meaning { font-size:16px; line-height:1.6; margin:0 0 18px; }
.quick-credit { font-size:10px; color:#6c827e; margin:0 0 12px; }
.quick-actions { display:flex; gap:8px; flex-wrap:wrap; }
.quick-actions button { flex:1; min-height:44px; padding:8px 10px; border:1px solid #d1e3da; border-bottom:3px solid #d1e3da; border-radius:13px; background:#f2f8f4; color:#087e80; font-family:var(--craft-ui); font-size:13px; font-weight:700; }
.quick-actions .quick-details { background:#109b9d; color:white; border-color:#087e80; }
#quick-definition button:focus-visible { outline:2px solid #087e80; outline-offset:3px; }
#quick-definition button:disabled { opacity:.5; }
#quick-definition[open] { animation:craft-guide-enter .18s ease-out; }
@media(prefers-reduced-motion:reduce) { #quick-definition[open] { animation:none; } }

/* Quick lookup hierarchy: Chinese word, English meaning, then pinyin/actions. */
#quick-definition .quick-meaning { font-size:20px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
#quick-definition .quick-pinyin { font-size:15px; font-weight:500; }

/* Dashboard: one primary action, two calm supporting rows. */
#view-dashboard { max-width:760px !important; margin:0 auto !important; width:100% !important; }
#view-dashboard .hf-dashboard-grid { display:flex !important; flex-direction:column !important; gap:16px !important; }
#view-dashboard .hf-dashboard-col-left,#view-dashboard .hf-dashboard-col-right { width:100% !important; min-width:0 !important; }
#view-dashboard .hf-dash-recents-top-card { padding:28px !important; background:#fff !important; border:1px solid #dae7e1 !important; border-bottom:5px solid #dae7e1 !important; border-radius:26px !important; box-shadow:none !important; }
#view-dashboard .hf-dash-recents-top-card .hf-dash-widget-title { font-size:23px !important; letter-spacing:0 !important; }
#dashboard-recent-mode-pill,#view-dashboard .hf-recent-status-badge { display:none !important; }
#dashboard-recent-card { cursor:default !important; background:transparent !important; border:0 !important; padding:18px 0 !important; box-shadow:none !important; transform:none !important; }
#dashboard-recent-title { font-size:17px !important; white-space:normal !important; }
#dashboard-recent-subtitle { white-space:normal !important; font-size:14px !important; line-height:1.6 !important; margin-top:6px !important; }
.dashboard-continue { width:100%; min-height:52px; border:1px solid #087e80; border-bottom:5px solid #06676a; border-radius:16px; background:#109b9d; color:white; font:700 16px var(--craft-ui); }
.dashboard-continue:active { transform:translateY(2px); border-bottom-width:3px; }
#view-dashboard .craft-review-widget { padding:16px 0 !important; background:transparent !important; border:0 !important; border-bottom:1px solid #dce6e0 !important; box-shadow:none !important; border-radius:0 !important; }
#view-dashboard .hf-review-queue-card { background:transparent !important; border:0 !important; padding:12px 0 0 !important; box-shadow:none !important; }
#view-dashboard .hf-review-action-btn { background:transparent !important; color:#087e80 !important; box-shadow:none !important; border:0 !important; }
#view-dashboard .hf-review-queue-text p { display:none !important; }
.dashboard-goal { padding:20px 0; border-bottom:1px solid #dce6e0; }
.dashboard-goal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dashboard-goal-heading label { font-size:12px; color:#617a75; }
#dashboard-goal-target { min-height:44px; border:1px solid #dce6e0; border-radius:12px; background:white; color:#385b56; padding:6px 8px; font-family:var(--craft-ui); }
.dashboard-goal p { font-size:13px; color:#617a75; margin:8px 0 12px; }
#dashboard-goal-progress { width:100%; height:10px; border:0; border-radius:8px; overflow:hidden; appearance:none; }
#dashboard-goal-progress::-webkit-progress-bar { background:#dfeae4; border-radius:8px; }
#dashboard-goal-progress::-webkit-progress-value { background:#109b9d; border-radius:8px; }
#dashboard-goal-progress::-moz-progress-bar { background:#109b9d; }
.dashboard-explore { min-height:44px; width:100%; display:flex; justify-content:space-between; align-items:center; background:transparent; border:0; color:#385b56; font:600 14px var(--craft-ui); padding:12px 0; }
#view-dashboard .craft-quick-practice { margin-top:16px !important; background:transparent !important; box-shadow:none !important; }
#view-dashboard .craft-quick-practice-toggle { min-height:44px !important; padding:12px 0 !important; }
@media(max-width:800px) { #view-dashboard .hf-dash-recents-top-card { padding:20px !important; } #view-dashboard .hf-dashboard-header-row { margin-bottom:18px !important; } }

#view-dashboard .hf-dashboard-col-right { background:transparent !important; padding:0 !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }
#view-dashboard .craft-quick-practice { border:0 !important; border-top:1px solid #dce6e0 !important; border-radius:0 !important; }
#view-dashboard .hf-dash-widget-header { margin-bottom:8px !important; }

#view-dashboard .hf-dashboard-col-right .craft-review-widget { background:transparent !important; border:0 !important; border-bottom:1px solid #dce6e0 !important; padding:16px 0 !important; border-radius:0 !important; box-shadow:none !important; }
#view-dashboard .craft-review-widget .hf-review-action-btn { background:transparent !important; color:#087e80 !important; border:0 !important; box-shadow:none !important; width:auto !important; display:inline-flex !important; padding:8px 0 !important; min-height:44px; }

/* Calm dashboard support panel: no content floats on the canvas. */
#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right { display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 24px !important; padding:24px !important; background:#fff !important; border:1px solid #dce7e1 !important; border-bottom:4px solid #dce7e1 !important; border-radius:24px !important; box-shadow:none !important; }
#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right .craft-review-widget { padding:0 0 18px !important; border:0 !important; margin:0 !important; }
#view-dashboard .dashboard-goal { padding:0 0 18px !important; border:0 !important; margin:0 !important; }
#view-dashboard .dashboard-explore,#view-dashboard .craft-profile-link { border-top:1px solid #e3ece7 !important; padding:14px 0 !important; margin:0 !important; border-radius:0 !important; min-height:48px !important; text-align:left !important; font-size:14px !important; }
#view-dashboard .hf-dashboard-grid .craft-quick-practice { grid-column:1 / -1; border-top:1px solid #e3ece7 !important; margin:0 !important; padding:12px 0 0 !important; }
#view-dashboard .hf-review-queue-text h4 { font-size:15px !important; }
#view-dashboard .dashboard-goal-heading { min-height:44px; }
#view-dashboard .hf-review-queue-card { gap:8px !important; }
@media(max-width:800px) { #view-dashboard .hf-dashboard-grid .hf-dashboard-col-right { grid-template-columns:1fr !important; padding:20px !important; gap:0 !important; } #view-dashboard .dashboard-goal { border-top:1px solid #e3ece7 !important; padding:18px 0 !important; } }

#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > .craft-review-widget { grid-column:1 !important; grid-row:1 !important; }
#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > .dashboard-goal { grid-column:2 !important; grid-row:1 !important; }
#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > .dashboard-explore { grid-column:1 !important; grid-row:2 !important; }
#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > .craft-profile-link { grid-column:2 !important; grid-row:2 !important; }
#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > .craft-quick-practice { grid-column:1 / -1 !important; grid-row:3 !important; }
@media(max-width:800px) { #view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > * { grid-column:1 !important; grid-row:auto !important; } }

@media(max-width:800px) { #view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > :nth-child(n) { grid-column:1 !important; grid-row:auto !important; } }

.hf-notif-btn,.guide-help { display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; overflow:hidden; }
.craft-header-gear,.craft-header-help { display:block; width:38px !important; height:38px !important; object-fit:contain; flex-shrink:0; }
.craft-header-help { transform:scale(1.1); }
.craft-header-flame { display:block; width:24px; height:28px; object-fit:contain; }

/* More deliberate graphics in the supporting dashboard panel. */
#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right { gap:0 28px !important; padding:24px !important; }
#view-dashboard .craft-review-widget .hf-dash-widget-header { min-height:44px; }
#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > .dashboard-goal { padding-left:24px !important; border-left:1px solid #e3ece7 !important; }
.dashboard-goal-title { display:flex; align-items:center; gap:9px; font-size:16px; }
.dashboard-target-art { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; background:#e8f5ee; border-bottom:3px solid #d0e7da; border-radius:12px; color:#138b80; }
.dashboard-target-art svg { width:26px; height:26px; }
#view-dashboard .dashboard-goal-heading { flex-wrap:wrap; gap:6px; }
#view-dashboard .dashboard-goal-heading label { display:flex; align-items:center; gap:6px; }
#dashboard-goal-target { border:0; background:#f1f7f3; min-height:36px; font-weight:600; }
#dashboard-goal-progress { height:12px; }
#dashboard-goal-progress::-webkit-progress-value { background:linear-gradient(90deg,#139b95,#49b7a0); }
#view-dashboard .dashboard-explore,#view-dashboard .craft-profile-link { display:flex !important; align-items:center; justify-content:space-between; font-size:13px !important; color:#3f625d !important; }
#view-dashboard .hf-dashboard-grid .craft-quick-practice-toggle { padding:12px !important; border-radius:16px !important; background:#f4f9f6 !important; }
#view-dashboard .craft-quick-practice-copy strong { font-size:15px !important; }
#view-dashboard .craft-quick-practice-copy .practice-lesson-title { font-size:12px !important; color:#6d837e !important; }
#view-dashboard .craft-quick-practice-cue-label { font-size:12px; }
@media(max-width:800px) { #view-dashboard .hf-dashboard-grid .hf-dashboard-col-right { gap:0 !important; padding:18px !important; } #view-dashboard .hf-dashboard-grid .hf-dashboard-col-right > .dashboard-goal { border-left:0 !important; border-top:1px solid #e3ece7 !important; padding:16px 0 !important; } }

/* A consistent, quiet top-panel rhythm. */
.hf-header-actions{gap:8px!important;align-items:center!important}.desktop-header-actions .hf-streak,.desktop-header-actions .hf-user-pill{box-sizing:border-box;height:44px!important;min-height:44px!important;display:flex;align-items:center;gap:8px;padding:0 12px!important;border-radius:22px!important;box-shadow:none!important}.desktop-header-actions .hf-streak{background:#fff6e5!important;border:1px solid #f4dfb8!important}.desktop-header-actions .hf-user-pill{background:#fff!important;border:1px solid #e0e9e4!important}.desktop-header-actions .user-nav-name{font-size:14px!important;font-weight:600}.desktop-header-actions .user-nav-initial{width:28px!important;height:28px!important;font-size:13px!important}.hf-header-actions .hf-notif-btn,.hf-header-actions .guide-help{box-sizing:border-box;width:44px!important;height:44px!important;min-height:44px!important;border:1px solid #e0e9e4!important;border-radius:14px!important;background:#f7faf8!important;box-shadow:none!important}.hf-header-actions .craft-header-gear,.hf-header-actions .craft-header-help{width:32px!important;height:32px!important;transform:none!important}.desktop-header-actions .craft-header-flame{width:22px;height:26px}.hf-topbar{box-shadow:none!important;border-bottom:1px solid #e5ede7!important}.hf-header-actions .hf-notif-btn:focus-visible,.hf-header-actions .guide-help:focus-visible,.hf-header-actions .hf-user-pill:focus-visible{outline:3px solid #087e80;outline-offset:3px}
@media(max-width:800px){.mobile-header-actions{gap:5px!important}.mobile-header-actions .hf-notif-btn,.mobile-header-actions .guide-help{border-color:transparent!important;background:transparent!important;border-radius:12px!important}.mobile-header-actions .craft-header-gear,.mobile-header-actions .craft-header-help{width:29px!important;height:29px!important}}

/* Word lookup stays part of the reading line, with visible keyboard focus. */
button.lookup-word{display:inline;padding:0;margin:0;border:0;border-radius:3px;background:transparent;box-shadow:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer;vertical-align:baseline;text-decoration:none;transform:none}
button.lookup-word:hover{background:#e1f1eb;box-shadow:none;transform:none}button.lookup-word:focus-visible{outline:2px solid #087e80;outline-offset:2px}

button.lookup-word{font-family:'TWKai','LXGW WenKai TC','Noto Sans TC',serif!important}