/* ====== LIGHT TOKENS ====== */
:root {
  --bg:         #FBF7F2;
  --surface:    #FFFFFF;
  --surface2:   #FEF5EA;
  --border:     #EDE4D8;
  --ink:        #1C140A;
  --muted:      #8A7566;
  --primary:    #E8622A;
  --primary-dk: #C44D1A;
  --primary-lt: #FEF0E8;
  --green:      #2D7A50;
  --green-lt:   #E6F5EC;
  --amber:      #C88A00;
  --amber-lt:   #FFF8E1;
  --red:        #C0392B;
  --red-lt:     #FDECEA;
  --known:      #2D7A50;
  --learning:   #C88A00;
  --new:        #E8622A;
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;
  --shadow:     0 2px 12px rgba(0,0,0,.07);
  --shadow-md:  0 4px 24px rgba(0,0,0,.10);
  --nav-h:      68px;
  --header-h:   60px;
  --font:       'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* ====== DARK TOKENS ====== */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:         #18120D;
    --surface:    #241C15;
    --surface2:   #2C221A;
    --border:     #3A2E22;
    --ink:        #F2EBE2;
    --muted:      #9A8878;
    --primary-lt: #3D2010;
    --green-lt:   #152B1F;
    --amber-lt:   #2E2600;
    --red-lt:     #2E1010;
  }
}
:root[data-theme="dark"] {
  --bg:         #18120D;
  --surface:    #241C15;
  --surface2:   #2C221A;
  --border:     #3A2E22;
  --ink:        #F2EBE2;
  --muted:      #9A8878;
  --primary-lt: #3D2010;
  --green-lt:   #152B1F;
  --amber-lt:   #2E2600;
  --red-lt:     #2E1010;
}
:root[data-theme="light"] {
  --bg:         #FBF7F2;
  --surface:    #FFFFFF;
  --surface2:   #FEF5EA;
  --border:     #EDE4D8;
  --ink:        #1C140A;
  --muted:      #8A7566;
  --primary-lt: #FEF0E8;
  --green-lt:   #E6F5EC;
  --amber-lt:   #FFF8E1;
  --red-lt:     #FDECEA;
}

/* ====== RESET ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--ink); line-height: 1.5;
  overscroll-behavior: none;
  transition: background .25s, color .25s;
}
button { font-family: var(--font); cursor: pointer; border: none; }
select, input { font-family: var(--font); outline: none; }

/* ====== HEADER ====== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(135deg, #E8622A 0%, #C44D1A 100%);
  height: var(--header-h);
  box-shadow: 0 2px 16px rgba(232,98,42,.3);
  transition: opacity .2s;
}
.header-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 100%;
}
.header-brand  { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-logo   { font-size: 1.937rem; line-height: 1; flex-shrink: 0; }
.header-brand-text { min-width: 0; overflow: hidden; }
.header-title  { font-weight: 700; font-size: 1.167rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.header-sub    { font-size: 0.9rem; color: rgba(255,255,255,.8); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-right  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.header-streak { font-size: 0.969rem; color: rgba(255,255,255,.9); background: rgba(255,255,255,.18); padding: 4px 9px; border-radius: 20px; white-space: nowrap; }
.theme-toggle  {
  background: rgba(255,255,255,.18); border: none; border-radius: 50%;
  width: 34px; height: 34px; font-size: 1.167rem; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,.28); }

/* Tốc độ đọc: nhãn (chỉ đủ chỗ trên desktop) + nút kiểu ô chọn + menu thả xuống liệt kê rõ cả 3 mức */
.speed-picker { position: relative; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.speed-picker-label { display: none; }
.speed-select {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
  height: 34px; padding: 0 12px; font-size: 0.86rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.speed-select:hover { border-color: var(--primary); }
.speed-select .chev { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); transition: transform .15s; }
.speed-select[aria-expanded="true"] .chev { transform: rotate(180deg); }
.speed-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 180px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.speed-menu.hidden { display: none; }
.speed-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); background: none;
  font-size: 0.92rem; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color .12s;
}
.speed-opt:hover { background: var(--surface2); }
.speed-opt.active { background: var(--primary-lt); color: var(--primary-dk); font-weight: 600; }
.speed-opt .check { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); opacity: 0; }
.speed-opt.active .check { opacity: 1; }

/* ====== BOTTOM NAV ====== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: transparent; color: var(--muted);
  font-size: 0.9rem; font-weight: 500; padding: 8px 0;
  transition: color .2s; position: relative; overflow: hidden;
}
.nav-item .nav-icon { font-size: 1.442rem; transition: transform .2s; }
.nav-item.active    { color: var(--primary); }
.nav-item.active .nav-icon { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(232,98,42,.5)); }
.nav-indicator {
  position: absolute; top: 0; height: 3px;
  background: var(--primary); border-radius: 0 0 3px 3px;
  width: 20%; transition: left .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

/* ====== MAIN ====== */
main {
  max-width: 760px; margin: 0 auto;
  padding: 16px 14px calc(var(--nav-h) + 20px);
}
.view { display: none; }
.view.active { display: block; animation: fadeUp .2s ease; }
.hidden { display: none !important; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-in-right { animation: slideInRight .18s ease; }
.slide-in-left  { animation: slideInLeft  .18s ease; }

/* ====== WELCOME BOX ====== */

/* Streak: chuỗi ngày học nổi bật — lửa + số lớn, 7 chấm ngày, nút đặt giờ nhắc */
.streak-days { display: flex; gap: 6px; flex: 1; min-width: 0; }
.streak-day { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.streak-dot {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: .95rem;
  background: var(--surface2); border: 1.5px solid var(--border);
}
.streak-day.done .streak-dot { background: var(--amber-lt); border-color: var(--amber); }
.streak-day.today .streak-dot { border-color: var(--primary); border-width: 2px; }
.streak-lbl { font-size: 0.7rem; color: var(--muted); }
.streak-remind-btn {
  flex-shrink: 0; padding: 7px 12px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--ink);
  font-size: 0.84rem; font-weight: 600; white-space: nowrap; transition: background-color .15s;
}
.streak-remind-btn:hover { background: var(--primary-lt); border-color: var(--primary); }

.remind-panel { margin-top: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.remind-panel.hidden { display: none; }
.remind-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.92rem; color: var(--ink); }
.remind-row input[type="time"] { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 0.95rem; }
.remind-actions { display: flex; gap: 8px; margin-top: 10px; }
.remind-actions .primary-btn, .remind-actions .ghost-btn { width: auto; padding: 8px 16px; font-size: 0.9rem; }
.remind-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }

/* ====== HOME HERO ====== */
.hero-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.hero-stats { flex: 1; min-width: 0; }
.hero-title  { font-size: 1.112rem; font-weight: 700; margin-bottom: 5px; }
.hero-chips  { display: flex; flex-direction: column; gap: 3px; }
.hero-chip   { font-size: 0.925rem; color: var(--muted); }
.hero-chip strong { color: var(--ink); }

.hero-bar-row { margin-bottom: 10px; }
.big-bar {
  height: 8px; border-radius: 4px; background: var(--border);
  overflow: hidden; display: flex;
}
.big-bar .known    { background: var(--known);    transition: width .7s ease; }
.big-bar .learning { background: var(--learning); transition: width .7s ease; }
.big-bar .new      { background: var(--new);      transition: width .7s ease; }

/* ====== WEEKLY ACTIVITY CHART ====== */
.weekly-chart { margin-top: 12px; }
.weekly-chart-label { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
.weekly-bars { display: flex; align-items: flex-end; gap: 5px; height: 38px; }
.wbar-wrap   { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.wbar        { width: 100%; border-radius: 3px 3px 0 0; background: var(--border); min-height: 3px; transition: height .5s ease; }
.wbar.has-activity { background: var(--primary); opacity: .7; }
.wbar.today  { background: var(--primary); opacity: 1; }
.wday        { font-size: 0.9rem; color: var(--muted); }

/* ====== DAILY GOAL ====== */
.daily-goal {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border-radius: var(--radius-sm);
  padding: 9px 12px; margin-top: 10px;
}
.goal-icon { font-size: 1.277rem; flex-shrink: 0; }
.goal-text { flex: 1; min-width: 0; }
.goal-title { font-size: 0.925rem; font-weight: 600; }
.goal-sub   { font-size: 0.9rem; color: var(--muted); }
.goal-bar-wrap { width: 60px; flex-shrink: 0; }
.goal-bar-bg { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.goal-bar-fg { height: 100%; background: var(--primary); border-radius: 3px; transition: width .5s ease; }
.goal-pct { font-size: 0.9rem; color: var(--muted); text-align: right; margin-top: 2px; }

.legend-row   { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.legend-chip  { font-size: 0.9rem; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
.legend-chip.known    { background: var(--green-lt);   color: var(--green); }
.legend-chip.learning { background: var(--amber-lt);   color: var(--amber); }
.legend-chip.new      { background: var(--primary-lt); color: var(--primary-dk); }

/* ====== CATEGORY GRID ====== */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.cat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow);
}
.cat-card:hover   { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.cat-card:active  { transform: translateY(0); }
.cat-card-header  { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.cat-emoji        { font-size: 1.607rem; }
.cat-card h3      { font-size: 1.035rem; font-weight: 600; line-height: 1.3; }
.cat-card .cat-vi { font-size: 0.9rem; color: var(--muted); margin-top: 1px; }
.cat-bar  { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; display: flex; margin-bottom: 7px; }
.cat-bar .known    { background: var(--known); }
.cat-bar .learning { background: var(--learning); }
.cat-bar .new      { background: var(--new); }
.cat-footer { display: flex; justify-content: space-between; align-items: center; }
.cat-count  { font-size: 0.9rem; color: var(--muted); }
.cat-known  { font-size: 0.9rem; font-weight: 600; color: var(--known); }

/* ====== CONTROLS ====== */
.select-pill {
  padding: 8px 12px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 1.013rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235F6478'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}
.select-full {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 1.057rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235F6478'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.icon-btn {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.167rem; flex-shrink: 0;
  transition: background .15s;
}
.icon-btn:hover { background: var(--primary-lt); }
.primary-btn {
  display: block; width: 100%; padding: 14px;
  background: var(--primary); color: #fff;
  border-radius: var(--radius); font-size: 1.134rem; font-weight: 600;
  box-shadow: 0 4px 14px rgba(232,98,42,.3);
  transition: background .15s, transform .1s, box-shadow .15s;
  text-align: center;
}
.primary-btn:hover  { background: var(--primary-dk); box-shadow: 0 6px 18px rgba(232,98,42,.4); }
.primary-btn:active { transform: scale(.98); }
.ghost-btn {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 18px;
  font-size: 1.035rem; color: var(--ink);
  transition: background .15s;
}
.ghost-btn:hover { background: var(--surface2); }
.toggle-chip {
  padding: 6px 13px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 0.947rem; color: var(--muted);
  transition: all .15s;
}
.toggle-chip.active { background: var(--primary-lt); color: var(--primary-dk); border-color: var(--primary); font-weight: 600; }

/* ====== FLASHCARD ====== */
.fc-controls { margin-bottom: 14px; display: flex; flex-direction: column; gap: 9px; }
.fc-controls-row { display: flex; align-items: center; gap: 8px; }
.fc-counter { font-size: 0.947rem; color: var(--muted); margin-left: auto; white-space: nowrap; }
.toggle-row { display: flex; gap: 7px; flex-wrap: wrap; }

/* ====== SESSION BAR ====== */
.fc-session-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border-radius: 10px;
  padding: 7px 12px; font-size: 0.903rem; color: var(--muted);
}
.session-stat { display: flex; align-items: center; gap: 4px; }
.session-stat strong { color: var(--ink); font-size: 0.969rem; }
.session-divider { width: 1px; height: 14px; background: var(--border); }
.session-timer   { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 0.903rem; color: var(--muted); }
.session-timer.active { color: var(--primary); font-weight: 600; }

/* Focus mode button */
.btn-focus {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 5px 10px; font-size: 0.925rem;
  color: var(--muted); transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.btn-focus:hover { border-color: var(--primary); color: var(--primary); }

/* ====== FLASHCARD CARD ====== */
.fc-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 10px;
}
.fc-question-block { padding: 20px 18px 16px; }

/* Progress dots */
.fc-dots {
  display: flex; justify-content: center; gap: 5px;
  padding: 10px 0 0;
}
.fc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); transition: background .2s, transform .2s;
}
.fc-dot.known    { background: var(--known); }
.fc-dot.learning { background: var(--learning); }
.fc-dot.current  { background: var(--primary); transform: scale(1.4); }
.fc-dot.new      { background: var(--border); }

.fc-reveal-btn {
  display: block; width: 100%;
  padding: 14px 20px;
  background: var(--primary-lt);
  color: var(--primary-dk);
  font-size: 1.112rem; font-weight: 600;
  border: none; border-top: 1.5px dashed var(--border);
  border-radius: 0; cursor: pointer;
  transition: background .15s;
  text-align: center;
  letter-spacing: .01em;
}
.fc-reveal-btn:hover    { background: #fad4b8; }
.fc-reveal-btn.revealed { background: var(--green-lt); color: var(--green); border-color: var(--green-lt); }

.fc-answer-block {
  padding: 16px 18px 20px;
  border-top: 1.5px solid var(--border);
  animation: fadeUp .18s ease;
}
.fc-answer-divider { height: 1px; background: var(--border); margin: 14px 0; }

.card-cat-label {
  font-size: 0.9rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--primary); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.card-question-text { font-size: 1.277rem; font-weight: 600; line-height: 1.55; }
.card-vi-question {
  font-size: 1.112rem; color: var(--ink); margin-top: 8px; line-height: 1.5;
  padding: 8px 12px; background: var(--surface2);
  border-radius: var(--radius-sm); border-left: 3px solid var(--border);
  opacity: 0.88;
}
.card-vi-text  { font-size: 1.024rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.card-no-answer { font-size: 0.947rem; color: var(--primary); margin-top: 10px; background: var(--primary-lt); padding: 7px 12px; border-radius: var(--radius-sm); }
.card-answer-label {
  font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--green); margin-bottom: 10px;
}
.card-answer-text { font-size: 1.123rem; line-height: 1.65; }

/* Compact vocab inside flashcard */
.vocab-inline { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 4px; }
.vocab-inline-title { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.vocab-inline-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  font-size: 0.98rem; padding: 5px 0; border-bottom: 1px solid var(--border);
}
.vocab-inline-row:last-child { border-bottom: none; }
.vocab-inline-term { font-weight: 700; color: var(--primary-dk); }
.vocab-inline-ipa  { font-family: monospace; font-size: 0.9rem; color: var(--muted); }
.vocab-inline-sep  { color: var(--border); }
.vocab-inline-vi   { color: var(--ink); }

/* Vocab panel inside card */
.vocab-panel { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.vocab-panel-title { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.vocab-list { display: flex; flex-direction: column; gap: 6px; }
.vocab-item { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; }
.vocab-row1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.vocab-term    { font-weight: 700; font-size: 1.112rem; color: var(--primary-dk); }
.vocab-ipa     { font-family: monospace; font-size: 0.903rem; color: var(--muted); }
.vocab-meaning { font-size: 1.002rem; color: var(--ink); }
.vocab-example { font-size: 0.936rem; color: var(--muted); font-style: italic; margin-top: 2px; }

/* Explanation panel */
.expl-panel { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.expl-panel-title { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.expl-content {
  background: var(--green-lt); border-left: 3px solid var(--green);
  padding: 10px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.024rem; line-height: 1.65; color: var(--ink);
}
.expl-grammar {
  background: var(--amber-lt); border-left: 3px solid var(--amber);
  padding: 10px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.002rem; line-height: 1.6; color: var(--ink);
}
.expl-grammar-label { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--amber); display: block; margin-bottom: 3px; }
.gp-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; padding-left: 20px; }
.gp-list li::marker { font-weight: 800; color: var(--amber); }
.gp-pattern { font-weight: 700; color: var(--ink); }
.gp-ex { margin-top: 2px; font-style: italic; color: var(--ink); }
.gp-ex .say-btn { vertical-align: middle; margin-left: 2px; }
.gp-vi { margin-top: 2px; color: var(--soft-ink, var(--muted)); }

.fc-hint { text-align: center; font-size: 0.9rem; color: var(--muted); margin: 6px 0 12px; }
kbd { background: var(--border); color: var(--ink); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: .85em; }

/* Rate buttons — bigger touch targets */
.rate-bar  { display: flex; gap: 8px; padding: 0 0 4px; }
.rate-btn  {
  flex: 1; padding: 13px 6px; border-radius: var(--radius-sm);
  font-size: 0.969rem; font-weight: 600;
  transition: transform .1s, filter .1s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.rate-btn-icon { font-size: 1.332rem; }
.rate-btn:active { transform: scale(.94); }
.rate-new      { background: var(--primary-lt); color: var(--primary-dk); }
.rate-new:hover{ filter: brightness(.93); }
.rate-learning { background: var(--amber-lt);  color: var(--amber); }
.rate-learning:hover { filter: brightness(.93); }
.rate-known    { background: var(--green-lt);   color: var(--green); }
.rate-known:hover { filter: brightness(.93); }

.fc-nav { display: flex; gap: 10px; justify-content: center; }

/* ====== FOCUS MODE ====== */
body.focus-mode .header     { opacity: 0; pointer-events: none; height: 0; overflow: hidden; }
body.focus-mode .bottom-nav { transform: translateY(100%); }
body.focus-mode main        { padding-top: 10px; }
body.focus-mode .fc-controls { display: none; }
body.focus-mode .fc-hint    { display: none; }
.focus-exit {
  display: none; position: fixed; top: 10px; right: 10px; z-index: 500;
  background: rgba(0,0,0,.5); color: #fff; border: none;
  border-radius: 20px; padding: 6px 14px; font-size: 0.947rem; cursor: pointer;
  backdrop-filter: blur(6px);
}
body.focus-mode .focus-exit { display: block; }

/* ====== QUIZ ====== */
.quiz-setup { display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin: 0 auto; padding-top: 8px; }
.quiz-setup-hero  { font-size: 3.587rem; text-align: center; }
.quiz-setup-title { font-size: 1.552rem; font-weight: 700; text-align: center; }
.quiz-setup-fields { display: flex; flex-direction: column; gap: 10px; }
.field-label { font-size: 0.925rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: -4px; }

.quiz-header  { margin-bottom: 14px; }
.quiz-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 7px; }
.quiz-bar      { height: 100%; background: var(--primary); transition: width .3s; width: 0%; }
.quiz-meta     { font-size: 0.925rem; color: var(--muted); }
.quiz-card     { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px; box-shadow: var(--shadow); }
.quiz-question { font-size: 1.189rem; font-weight: 600; line-height: 1.55; margin-bottom: 14px; }
.quiz-options  { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.quiz-option {
  text-align: left; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 1.035rem; color: var(--ink); line-height: 1.45;
  transition: border-color .12s, background .12s;
  white-space: pre-wrap;
}
@media (hover: hover) { .quiz-option:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-lt); } } /* touch: no sticky highlight on the option under the Start button */
.quiz-option.correct   { background: var(--green-lt);  border-color: var(--green); color: var(--green); font-weight: 600; }
.quiz-option.incorrect { background: var(--red-lt);    border-color: var(--red);   color: var(--red); }
.quiz-reveal {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px; margin-bottom: 12px; font-size: 1.035rem; line-height: 1.65;
}
.quiz-result { text-align: center; padding: 36px 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.result-emoji { font-size: 4.247rem; }
.result-score { font-size: 1.332rem; font-weight: 600; }

/* ====== BROWSE ====== */
.browse-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.search-wrap { position: relative; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.167rem; pointer-events: none; }
.search-input {
  width: 100%; padding: 12px 14px 12px 40px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: 1.09rem;
  transition: border-color .15s;
}
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,98,42,.1); }
.browse-count { font-size: 0.925rem; color: var(--muted); margin-bottom: 10px; }
.browse-list  { display: flex; flex-direction: column; gap: 10px; }
.browse-item  {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 15px; box-shadow: var(--shadow);
  transition: border-color .15s;
}
.browse-item:hover { border-color: var(--primary); }
.browse-cat   { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); margin-bottom: 7px; }
.browse-q     { font-weight: 600; font-size: 1.101rem; line-height: 1.5; margin-bottom: 3px; }
.browse-qvi   { font-size: 0.969rem; color: var(--muted); margin-bottom: 8px; line-height: 1.45; }
.browse-ans   { font-size: 1.035rem; line-height: 1.65; color: var(--ink); }
.browse-ans.empty { color: var(--muted); font-style: italic; }
.browse-ansvi {
  font-size: 1.013rem; color: var(--ink); margin-top: 7px; line-height: 1.55;
  padding: 7px 11px; background: var(--surface2);
  border-radius: var(--radius-sm); border-left: 3px solid var(--border);
  opacity: 0.88;
}
.browse-divider { height: 1px; background: var(--border); margin: 10px 0; }
.browse-vocab  { margin-top: 10px; }
.browse-vocab-title { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.browse-vocab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.browse-vocab-chip {
  background: var(--primary-lt); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; font-size: 0.914rem;
}
.bvc-term    { font-weight: 700; color: var(--primary-dk); }
.bvc-ipa     { color: var(--muted); margin-left: 4px; font-family: monospace; font-size: .9em; }
.bvc-meaning { color: var(--ink); margin-left: 4px; }

/* Search highlight */
mark {
  background: rgba(232,98,42,.22); color: var(--primary-dk);
  padding: 0 2px; border-radius: 2px;
}

/* ====== THEORY ====== */
.theory-intro { color: var(--muted); font-size: 1.035rem; margin-bottom: 14px; line-height: 1.55; }
.theory-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px,1fr)); gap: 10px; }

.theory-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 7px;
}
.theory-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.theory-card-top   { display: flex; align-items: center; gap: 10px; }
.theory-card-emoji { font-size: 1.717rem; }
.theory-card h3    { font-size: 1.035rem; font-weight: 600; line-height: 1.3; }
.theory-card-vi    { font-size: 0.9rem; color: var(--muted); }
.theory-card-meta  { font-size: 0.9rem; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.theory-read-badge { font-size: 0.9rem; padding: 2px 8px; border-radius: 10px; background: var(--green-lt); color: var(--green); font-weight: 600; align-self: flex-start; }

.theory-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; color: var(--primary);
  font-size: 1.035rem; font-weight: 600; padding: 0; margin-bottom: 16px; cursor: pointer;
}
.theory-back:hover { text-decoration: underline; }

.theory-header { margin-bottom: 18px; }
.theory-header-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.theory-header-emoji { font-size: 2.487rem; }
.theory-header h2    { font-size: 1.442rem; font-weight: 700; }
.theory-header-vi    { font-size: 1.035rem; color: var(--muted); }
.theory-intro-text   {
  font-size: 1.09rem; color: var(--ink); line-height: 1.65;
  background: var(--primary-lt); border-left: 3px solid var(--primary);
  padding: 11px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-top: 10px;
}

.theory-sections { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.theory-section  {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.theory-section-header {
  padding: 13px 15px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; background: var(--surface); transition: background .15s;
}
.theory-section-header:hover { background: var(--surface2); }
.theory-section-title { font-size: 1.101rem; font-weight: 600; }
.theory-section-arrow { font-size: 0.947rem; color: var(--muted); transition: transform .25s; flex-shrink: 0; }
.theory-section.open .theory-section-arrow { transform: rotate(180deg); }
.theory-section-body  { padding: 0 15px; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s; }
.theory-section.open .theory-section-body  { max-height: 2000px; padding: 0 15px 15px; }

.theory-section-content { font-size: 1.035rem; line-height: 1.7; color: var(--ink); margin-bottom: 12px; }
.theory-key-points { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.theory-key-points li { display: flex; gap: 8px; font-size: 1.013rem; line-height: 1.5; }
.theory-key-points li::before { content: "✦"; color: var(--primary); flex-shrink: 0; margin-top: 2px; }

.theory-vocab { margin-bottom: 18px; }
.theory-vocab h3  { font-size: 0.947rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 9px; }
.theory-vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 8px; }
.theory-vocab-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px;
}
.tv-row1    { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.tv-term    { font-weight: 700; color: var(--primary-dk); font-size: 1.09rem; }
.tv-ipa     { font-family: monospace; font-size: 0.9rem; color: var(--muted); }
.tv-meaning { font-size: 0.98rem; color: var(--ink); }
.tv-example { font-size: 0.903rem; color: var(--muted); font-style: italic; margin-top: 2px; }

.theory-tips { background: var(--amber-lt); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 18px; }
.theory-tips h3  { font-size: 0.947rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--amber); margin-bottom: 7px; }
.theory-tips ul  { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.theory-tips li  { font-size: 1.013rem; line-height: 1.5; display: flex; gap: 8px; }
.theory-tips li::before { content: "💡"; flex-shrink: 0; }

.theory-action-bar { display: flex; gap: 10px; margin-top: 8px; }
.theory-action-bar .primary-btn { flex: 1; font-size: 1.035rem; padding: 12px 8px; }

/* ====== RESPONSIVE ====== */
@media (max-width: 480px) {
  .category-grid { grid-template-columns: 1fr 1fr; }
  .rate-btn { font-size: 0.9rem; padding: 12px 4px; }
  .fc-card { border-radius: 14px; }
  .weekly-bars { gap: 3px; }
}
@media (max-width: 360px) {
  .category-grid { grid-template-columns: 1fr; }
}

/* ====== TOAST ====== */
.toast {
  position: fixed; top: calc(var(--header-h) + 10px); left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 200; padding: 9px 18px; border-radius: 20px;
  font-size: 1.013rem; font-weight: 600; white-space: nowrap;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.known    { background: var(--green);   color: #fff; }
.toast.learning { background: var(--amber);   color: #fff; }
.toast.new      { background: var(--primary); color: #fff; }

/* ====== QUICK RESUME ====== */
.quick-resume {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
  border-radius: var(--radius); padding: 13px 16px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(232,98,42,.3);
  transition: transform .15s, box-shadow .15s;
}
.quick-resume:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,98,42,.4); }
.qr-left  { display: flex; flex-direction: column; gap: 2px; }
.qr-label { font-size: 0.9rem; color: rgba(255,255,255,.75); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.qr-title { font-size: 1.101rem; font-weight: 700; color: #fff; }
.qr-meta  { font-size: 0.903rem; color: rgba(255,255,255,.8); margin-top: 1px; }
.qr-arrow { font-size: 1.497rem; color: rgba(255,255,255,.7); flex-shrink: 0; }

/* ====== BROWSE COLLAPSIBLE ====== */
.browse-item { cursor: default; }
.browse-item-body { display: none; }
.browse-item.open .browse-item-body { display: block; }
.browse-expand {
  margin-top: 7px; font-size: 0.914rem; font-weight: 600; color: var(--primary);
  background: none; border: none; padding: 3px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.browse-expand::after { content: ' ▼'; font-size: 0.9rem; }
.browse-item.open .browse-expand::after { content: ' ▲'; }

/* ====== THEORY NAV BADGE ====== */
.nav-badge {
  position: absolute; top: 6px; right: calc(50% - 18px);
  background: var(--primary); color: #fff;
  font-size: 0.9rem; font-weight: 700;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
}

/* ====== FLASHCARD COMPLETE ====== */
.fc-complete {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px 16px; text-align: center;
}
.fc-complete-emoji { font-size: 3.367rem; }
.fc-complete-title { font-size: 1.332rem; font-weight: 700; }
.fc-complete-stats { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.fc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fc-stat-num  { font-size: 1.607rem; font-weight: 700; }
.fc-stat-lbl  { font-size: 0.9rem; color: var(--muted); }
.fc-complete .primary-btn { width: auto; padding: 11px 28px; font-size: 1.057rem; }

/* ====== LOGIN SCREEN ====== */
.login-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 20px;
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 30px 26px;
  box-shadow: 0 8px 40px rgba(0,0,0,.13);
}
.login-logo  { font-size: 2.707rem; text-align: center; margin-bottom: 6px; }
.login-title { font-size: 1.552rem; font-weight: 700; text-align: center; margin: 0 0 3px; }
.login-sub   { font-size: 0.947rem; color: var(--muted); text-align: center; margin: 0 0 18px; }
.auth-tabs { display: flex; gap: 0; background: var(--bg); border-radius: 10px; padding: 3px; margin-bottom: 18px; }
.auth-tab {
  flex: 1; padding: 8px; border: none; background: none; cursor: pointer;
  border-radius: 8px; font-size: 1.013rem; color: var(--muted); font-weight: 500; transition: all .2s;
}
.auth-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.13); }
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-label { font-size: 0.903rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.form-input {
  padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-size: 1.09rem;
  outline: none; transition: border-color .2s;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,98,42,.1); }
.form-input::placeholder { color: var(--muted); opacity: .75; }
.login-error { color: #d63; font-size: 0.969rem; min-height: 18px; margin: -4px 0 6px; }
.login-info { font-size: .9rem; line-height: 1.5; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--green-lt); color: var(--ink); }
.auth-heading { margin: 0 0 14px; font-size: 1.15rem; font-weight: 700; color: var(--ink); text-align: center; }
.auth-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.auth-links { display: flex; justify-content: center; margin-top: 10px; }
.link-btn { background: none; border: 0; padding: 4px 2px; color: var(--primary); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.pf-email-row { display: flex; gap: 8px; }
.pf-email-row .form-input { flex: 1; min-width: 0; }
.pf-email-row .ghost-btn { flex: none; width: auto; }

.logout-btn {
  background: rgba(255,255,255,.18); border: none; border-radius: 8px;
  padding: 5px 8px; cursor: pointer; font-size: 1.035rem; color: rgba(255,255,255,.9);
  transition: background .2s;
}
.logout-btn:hover { background: rgba(255,255,255,.3); }

@media (prefers-reduced-motion: reduce) {
  *, .big-bar div { transition: none !important; animation: none !important; }
}

/* ====== Tokens needed by the components carried over from later versions ====== */
:root { --font-display: var(--font); --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --blue: #2563EB; --blue-lt: #EAF1FE; }
:root[data-theme="dark"] { --blue-lt: #16233A; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --blue-lt: #16233A; } }

/* ====== Vocabulary cards, recommendations, speaker buttons ====== */
.sort-toggle-btn {
  margin-left: auto; font-size: 0.9rem; font-weight: 700; padding: 4px 11px;
  border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all .15s;
}
.sort-toggle-btn:hover { border-color: var(--primary); color: var(--primary-dk); }
.sort-toggle-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.fc-controls-row-selects .select-pill { flex: 1; min-width: 0; }
.vil {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--surface2); border-radius: var(--radius-sm); padding: 8px 8px 8px 12px;
}
.vil-text { flex: 1; min-width: 0; }
.vil-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; }
.vil-term { font-family: var(--font-display); font-weight: 700; font-size: 1.112rem; color: var(--ink); overflow-wrap: anywhere; }
.vil-bottom { margin-top: 1px; font-size: 0.958rem; color: var(--ink); overflow-wrap: anywhere; }
.vil-ipa { font-family: var(--font-mono); font-size: 0.903rem; color: var(--muted); }
.vil-ipa::after { content: " · "; color: var(--muted); }
.vil-vi { color: var(--muted); }
.say-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: var(--primary-lt); color: var(--primary-dk);
  vertical-align: middle; cursor: pointer; transition: background .15s, color .15s, transform .1s;
}
.say-btn svg { width: 16px; height: 16px; }
.say-btn:active { transform: scale(.92); }
.say-btn.say-sm { width: 26px; height: 26px; }
.say-btn.say-sm svg { width: 14px; height: 14px; }
.say-btn.loading { animation: sayPulse .8s ease-in-out infinite; }
@media (hover: hover) {
  .say-btn:hover { background: var(--primary); color: #fff; }
}
.vocab-more { margin-top: 6px; }
.vocab-more > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  font-size: 0.991rem; font-weight: 700; color: var(--primary-dk);
  transition: background .15s, border-color .15s;
}
.vocab-more > summary:hover { background: var(--primary-lt); border-color: var(--primary); }
.vocab-more > summary::-webkit-details-marker { display: none; }
.vocab-more > summary::after { content: "▾"; transition: transform .15s; }
.vocab-more[open] > summary::after { transform: rotate(180deg); }
.vocab-more > .vocab-list { margin-top: 10px; }
.vocab-inline-rest { display: flex; flex-direction: column; gap: 6px; }
.vc {
  min-width: 0; 
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm); padding: 13px 15px;
}
.vc-row1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.vc-term {
  font-family: var(--font-display); font-weight: 700; font-size: 1.222rem; line-height: 1.3;
  color: var(--ink); overflow-wrap: anywhere;
}
.vc-ipa { font-family: var(--font-mono); font-size: 0.925rem; color: var(--muted); }
.vc-row1 .say-btn { margin-left: auto; }
.vc-meaning { font-size: 1.112rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.vc-ex { padding: 8px 10px; background: var(--surface2); border-radius: var(--radius-sm); min-width: 0; }
.vc-ex-en { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 1.013rem; font-style: italic; line-height: 1.45; color: var(--ink); }
.vc-ex-en > span { min-width: 0; overflow-wrap: anywhere; }
.vc-ex-vi { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); font-size: 0.969rem; line-height: 1.45; color: var(--muted); }
.pos-tag {
  display: inline-block; flex-shrink: 0; white-space: nowrap;
  padding: 1px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; line-height: 1.5;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
}
.bottom-nav.nav-hide { transform: translateY(100%); }
.quiz-field-full { display: flex; flex-direction: column; gap: 6px; }
.quiz-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-field-pair > div { display: flex; flex-direction: column; gap: 6px; }
.browse-category-select { flex: 1 1 160px; }
@media (max-width: 480px) {
  .search-wrap, .browse-category-select { flex: 1 1 auto; }
}
.theory-card-featured {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, var(--primary-lt) 0%, var(--surface) 65%);
  border-color: var(--primary);
  padding-left: 19px;
  position: relative; overflow: hidden;
}
.theory-card-featured::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--amber), var(--green));
}
.theory-card-featured .theory-card-emoji { font-size: 2.267rem; }
@keyframes sayPulse { 50% { opacity: .35; } }

/* ============================================================
   Thêm — extra practice pages (Nghe hiểu, Luyện nói, Phỏng vấn thử, Từ vựng, Tiến độ)
   Same warm cream/orange look as the rest of the app.
   ============================================================ */
.x-page { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.x-title { font-size: 1.442rem; font-weight: 800; letter-spacing: -.01em; }
.x-sub { color: var(--muted); font-size: 1.057rem; margin-top: -6px; }
.x-muted { color: var(--muted); font-size: 0.969rem; }
.x-back { align-self: flex-start; background: none; border: 0; padding: 2px 0; color: var(--primary); font-weight: 700; font-size: 1.035rem; }
.x-back:hover { text-decoration: underline; }
.x-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.x-center { align-items: center; text-align: center; }
.x-field { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }

/* Hồ sơ cá nhân */
.profile-progress-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.profile-progress-bar > div { height: 100%; background: var(--primary); transition: width .4s ease; }
.profile-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.profile-form textarea.form-input { resize: vertical; font-family: var(--font); }
@media (min-width: 640px) {
  .profile-form { grid-template-columns: 1fr 1fr; }
  .profile-field-wide { grid-column: 1 / -1; }
}
.personalized-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-right: 8px;
  padding: 2px 9px; border-radius: 999px; background: var(--primary-lt); color: var(--primary-dk);
  font-size: .78rem; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
:root[data-theme="dark"] .personalized-badge { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .personalized-badge { color: var(--primary); } }

/* Hồ sơ v2: tài liệu + bộ câu trả lời + thông tin chi tiết */
.pf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.pf-count { flex: none; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.pf-help { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.pf-btn { align-self: flex-start; width: auto; padding: 10px 20px; }
.pf-btn:disabled, .pa-btn:disabled { opacity: .65; cursor: default; }
.pf-status { font-size: .88rem; line-height: 1.55; padding: 10px 12px; border-radius: var(--radius); background: var(--green-lt); color: var(--ink); }
.pf-warn { margin: 0; font-size: .88rem; color: var(--amber); }
.pf-missing { margin: 0; font-size: .88rem; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--amber-lt); color: var(--ink); }
.pf-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-doc { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); }
.pf-doc-ico { flex: none; font-size: 1.2rem; line-height: 1.3; }
.pf-doc-main { flex: 1; min-width: 0; }
.pf-doc-name { font-size: .92rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-doc-sum { font-size: .8rem; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.pf-doc-del { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--muted); font-size: .9rem; cursor: pointer; }
.pf-doc-del:hover { background: var(--red-lt); color: var(--red); }
.pf-group { border: 1px solid var(--border); border-radius: var(--radius); }
.pf-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--ink); list-style: none; }
.pf-group > summary::-webkit-details-marker { display: none; }
.pf-group > summary::after { content: '▾'; color: var(--muted); margin-left: 6px; transition: transform .15s; }
.pf-group:not([open]) > summary::after { transform: rotate(-90deg); }
.pf-group > summary > span:first-child { flex: 1; }
.pf-group > .profile-form { padding: 2px 12px 12px; }
.form-input.ai-filled { border-color: var(--primary); background: var(--primary-lt); }
.pf-save-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: .85rem; color: var(--muted);
}
/* Chỉ dính đáy màn hình khi có thay đổi chưa lưu, để học sinh không phải cuộn xuống cuối form dài */
.pf-save-bar.dirty {
  position: sticky; bottom: var(--dock, 12px); z-index: 5; box-shadow: var(--shadow-md);
  transition: bottom .3s var(--ease, ease);
  border-color: var(--primary); color: var(--primary-dk); font-weight: 600;
}
body:has(.bottom-nav.nav-hide) .pf-save-bar.dirty { bottom: calc(10px + env(safe-area-inset-bottom)); }
.pf-save-bar .primary-btn { width: auto; padding: 8px 18px; border-radius: 999px; }

/* Hàng dưới đáp án: nhãn "theo hồ sơ" + nút AI viết lại */
.pa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.pa-btn {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--primary); background: none;
  color: var(--primary); font-size: .82rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.pa-btn:hover:not(:disabled) { background: var(--primary-lt); }
.pa-stale { font-size: .78rem; color: var(--amber); }
.pa-missing { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.x-start { width: 100%; }
.x-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.x-big { font-size: 2.927rem; line-height: 1; }
.x-hint { font-weight: 700; }

.x-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
a.x-tile { color: inherit; text-decoration: none; }
.x-tile { display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .15s, border-color .15s, box-shadow .15s; }
.x-tile:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.x-tile-emoji { font-size: 2.047rem; }
.x-tile-text { display: flex; flex-direction: column; min-width: 0; }
.x-tile-text small { color: var(--muted); font-size: 0.925rem; }

.x-run-top { display: flex; align-items: center; justify-content: space-between; }
.x-bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.x-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s; }
.x-q { font-size: 1.442rem; font-weight: 700; line-height: 1.4; }
.x-qvi { color: var(--muted); font-size: 1.079rem; }
#xReveal { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

.x-play { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-size: 2.267rem; box-shadow: 0 8px 22px rgba(232,98,42,.35); padding-left: 6px; }
.x-play:active { transform: scale(.95); }
.x-play.loading { animation: xpulse .8s ease-in-out infinite; }
.x-chips { display: flex; gap: 6px; }
.x-chip { padding: 6px 12px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--surface); font-size: 0.947rem; font-weight: 700; color: var(--muted); }
.x-chip.on { background: var(--primary-lt); border-color: var(--primary); color: var(--primary-dk); }

.x-mic { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: 4px; }
.x-mic-btn { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-size: 2.157rem; box-shadow: 0 8px 22px rgba(232,98,42,.3); }
.x-mic-btn:disabled { background: var(--surface2); box-shadow: none; opacity: .6; }
.x-mic-btn.on { background: var(--red); animation: xring 1.4s ease-out infinite; }
.x-mic-label { font-weight: 700; font-size: 1.057rem; }
.x-mic-live { min-height: 20px; color: var(--muted); font-size: 1.112rem; max-width: 520px; }
.x-type { width: 100%; max-width: 440px; font-size: 0.991rem; }
.x-type summary { cursor: pointer; color: var(--muted); }
.x-textarea { width: 100%; margin: 8px 0; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
@keyframes xpulse { 50% { opacity: .4; } }
@keyframes xring { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 100% { box-shadow: 0 0 0 22px rgba(192,57,43,0); } }

.x-fb { width: 100%; text-align: left; border-top: 1px solid var(--border); padding-top: 4px; }
.x-sec { margin-top: 12px; }
.x-sec-t { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.x-say { font-size: 1.189rem; line-height: 1.55; }
.x-kws { display: flex; flex-wrap: wrap; gap: 6px; }
.x-kw { padding: 3px 10px; border-radius: 99px; font-size: 0.969rem; font-weight: 600; }
.x-kw.hit { background: var(--green-lt); color: var(--green); }
.x-kw.miss { background: var(--surface2); color: var(--muted); }
.x-note { padding: 10px 12px; border-left: 3px solid var(--amber); background: var(--amber-lt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.035rem; line-height: 1.6; }
.x-model { margin-top: 12px; font-size: 1.035rem; }
.x-model summary { cursor: pointer; color: var(--primary-dk); font-weight: 700; }
.x-ans { margin-top: 8px; line-height: 1.6; }
.x-ansvi { margin-top: 6px; padding: 8px 12px; border-left: 3px solid var(--primary); background: var(--surface2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.013rem; }

/* Phỏng vấn thử (full screen) */
body.x-interview .focus-exit { display: none; }
.x-iv { min-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.x-iv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px 12px; border-bottom: 1px solid var(--border); }
.x-iv-right { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 1.035rem; }
.x-timer { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.x-x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--muted); font-size: 1.277rem; }
.x-x:hover { background: var(--surface2); }
.x-iv-stage { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px 0; }
.x-iv-in { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.x-iv-q { font-size: clamp(1.717rem, 4vw, 2.487rem); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.x-iv-foot { display: flex; justify-content: flex-end; padding: 10px 0 4px; border-top: 1px solid var(--border); }
.x-iv-foot:empty { display: none; }
#xRecBtn.rec { border-color: var(--red); color: var(--red); }
.x-iv-review { align-self: flex-start; }
.x-review { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; counter-reset: q; list-style: none; padding: 0; }
.x-review li { counter-increment: q; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.x-review-q { font-weight: 700; margin-bottom: 4px; }
.x-review-q::before { content: counter(q) ". "; color: var(--muted); }

/* Từ vựng */
.x-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.x-toolbar .search-wrap { flex: 1 1 240px; min-width: 0; }
.x-toolbar .select-full { flex: 1 1 200px; }
.x-count { font-size: 0.947rem; color: var(--muted); }
.x-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.x-more { grid-column: 1 / -1; justify-self: center; }

/* Tiến độ */
.x-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.x-stat { display: flex; flex-direction: column; }
.x-stat strong { font-size: 1.937rem; line-height: 1.15; }
.x-stat span { font-size: 0.925rem; color: var(--muted); }
.x-topics { display: flex; flex-direction: column; gap: 8px; }
.x-trow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 38px; align-items: center; gap: 10px; font-size: 1.013rem; }
.x-tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-tbar { display: flex; height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.x-tbar .k { background: var(--known); }
.x-tbar .l { background: var(--amber); }
.x-tpct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .x-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .x-trow { grid-template-columns: 1fr 38px; grid-template-areas: "n n" "b p"; gap: 4px 10px; }
  .x-tname { grid-area: n; white-space: normal; }
  .x-tbar { grid-area: b; } .x-tpct { grid-area: p; }
}

/* ============================================================
   Compact pass — smaller type, thin borders, flat cards (Claude-like density).
   Same layout and warm colours; everything is just tighter and quieter.
   ============================================================ */
html { font-size: 15px; }
:root { --header-h: 48px; --nav-h: 56px; --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --shadow: none; --shadow-md: 0 2px 10px rgba(70,45,20,.08); }
body { line-height: 1.45; }

/* Shell */
.header { box-shadow: none; }
.header-inner { max-width: 800px; padding: 0 12px; }
.header-logo { font-size: 1.497rem; }
.header-title { font-size: 1.035rem; }
.header-sub { font-size: 0.9rem; }
.header-right { gap: 5px; }
.header-streak { font-size: 0.9rem; padding: 2px 8px; }
.theme-toggle, .logout-btn { width: 28px; height: 28px; font-size: 1.002rem; }
.speed-select { height: 28px; padding: 0 9px; font-size: 0.68rem; gap: 3px; }
.speed-select .chev { width: 12px; height: 12px; }
.speed-label-txt { display: none; } /* điện thoại: chỉ hiện "1×" cho gọn, mở menu vẫn thấy đủ tên 3 mức */
.bottom-nav { box-shadow: none; }
.nav-item { font-size: 0.9rem; gap: 1px; padding: 4px 0; }
.nav-item .nav-icon { font-size: 1.222rem; }
.nav-item.active .nav-icon { transform: none; filter: none; }
.nav-indicator { height: 2px; }
.nav-badge { top: 3px; }
main { max-width: 800px; padding: 10px 12px calc(var(--nav-h) + 14px); }

/* Home */
.streak-dot { width: 22px; height: 22px; font-size: .82rem; }
.streak-lbl { font-size: .64rem; }
.streak-remind-btn { padding: 6px 10px; font-size: .78rem; }
.hero-top { gap: 12px; margin-bottom: 8px; }
.hero-title { font-size: 1.002rem; margin-bottom: 2px; }
.hero-chips { gap: 1px; }
.hero-chip { font-size: 0.9rem; }
.hero-bar-row { margin-bottom: 6px; }
.big-bar { height: 5px; }
.weekly-chart { margin-top: 8px; }
.weekly-chart-label { font-size: 0.9rem; margin-bottom: 4px; }
.weekly-bars { height: 26px; gap: 4px; }
.wday { font-size: 0.9rem; }
.daily-goal { padding: 6px 10px; margin-top: 8px; gap: 8px; }
.goal-icon { font-size: 1.112rem; } .goal-title { font-size: 0.9rem; } .goal-sub { font-size: 0.9rem; } .goal-pct { font-size: 0.9rem; }
.legend-row { margin-bottom: 8px; gap: 6px; }
.legend-chip { font-size: 0.9rem; padding: 2px 8px; }
.sort-toggle-btn { font-size: 0.9rem; padding: 3px 9px; }
.category-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cat-card { padding: 9px 11px; box-shadow: none; }
.cat-card:hover { transform: none; box-shadow: none; }
.cat-card-header { gap: 8px; margin-bottom: 7px; }
.cat-emoji { font-size: 1.332rem; }
.cat-card h3 { font-size: 0.947rem; }
.cat-card .cat-vi { font-size: 0.9rem; }
.cat-bar { height: 4px; margin-bottom: 5px; }
.cat-count, .cat-known { font-size: 0.9rem; }

/* Controls */
.select-pill { padding: 5px 24px 5px 10px; border-width: 1px; font-size: 0.947rem; background-position: right 9px center; }
.select-full { padding: 8px 28px 8px 11px; border-width: 1px; font-size: 0.991rem; background-position: right 10px center; }
.icon-btn { width: 28px; height: 28px; border-width: 1px; font-size: 1.002rem; }
.primary-btn { padding: 9px 12px; font-size: 1.013rem; box-shadow: none; border-radius: var(--radius-sm); }
.primary-btn:hover { box-shadow: none; }
.ghost-btn { padding: 6px 13px; border-width: 1px; font-size: 0.947rem; }
.toggle-chip { padding: 4px 10px; border-width: 1px; font-size: 0.9rem; }
.btn-focus { padding: 4px 8px; border-width: 1px; font-size: 0.9rem; }
.fc-controls { margin-bottom: 8px; gap: 6px; }
.fc-controls-row { gap: 6px; }
.fc-counter { font-size: 0.9rem; }
.fc-session-bar { padding: 4px 10px; font-size: 0.9rem; border-radius: 8px; }
.session-stat strong { font-size: 0.903rem; }
.fc-dots { padding-top: 6px; }
.fc-dot { width: 5px; height: 5px; }

/* Flashcard */
.fc-card { border-width: 1px; box-shadow: none; margin-bottom: 8px; }
.fc-question-block { padding: 13px 14px 11px; }
.card-cat-label { font-size: 0.9rem; margin-bottom: 7px; }
.card-question-text { font-size: 1.167rem; line-height: 1.5; }
.card-vi-question { font-size: 0.991rem; padding: 6px 10px; margin-top: 6px; }
.vocab-inline { margin-top: 10px; padding-top: 9px; gap: 3px; }
.vil { padding: 5px 6px 5px 10px; gap: 8px; }
.vil-term { font-size: 1.013rem; } .vil-bottom { font-size: 0.9rem; } .vil-ipa { font-size: 0.9rem; }
.fc-reveal-btn { padding: 10px 14px; font-size: 1.013rem; border-top-width: 1px; }
.fc-answer-block { padding: 12px 14px 14px; border-top-width: 1px; }
.card-answer-label { font-size: 0.9rem; margin-bottom: 7px; }
.card-answer-text { font-size: 1.057rem; line-height: 1.6; }
.fc-answer-divider { margin: 10px 0; }
.expl-panel { margin-top: 8px; gap: 6px; }
.expl-panel-title { font-size: 0.9rem; }
.expl-content, .expl-grammar { padding: 7px 10px; font-size: 0.947rem; line-height: 1.55; }
.fc-hint { font-size: 0.9rem; margin: 4px 0 8px; }
.rate-bar { gap: 6px; }
.rate-btn { padding: 8px 4px; font-size: 0.9rem; gap: 1px; }
.rate-btn-icon { font-size: 1.167rem; }
.fc-complete { padding: 18px 12px; gap: 9px; } .fc-complete-emoji { font-size: 2.707rem; }

/* Quiz */
.quiz-setup { gap: 10px; max-width: 380px; }
.quiz-setup-hero { font-size: 2.487rem; } .quiz-setup-title { font-size: 1.277rem; }
.field-label { font-size: 0.9rem; }
.quiz-header { margin-bottom: 10px; } .quiz-bar-wrap { height: 4px; }
.quiz-card { padding: 12px; box-shadow: none; }
.quiz-question { font-size: 1.101rem; margin-bottom: 10px; }
.quiz-options { gap: 6px; }
.quiz-option { padding: 8px 11px; border-width: 1px; font-size: 0.969rem; }
.quiz-reveal { padding: 10px; font-size: 0.969rem; }
.quiz-result { padding: 22px 0; gap: 10px; } .result-emoji { font-size: 3.147rem; }

/* Browse */
.browse-controls { gap: 8px; margin-bottom: 8px; }
.search-input { padding: 8px 12px 8px 34px; border-width: 1px; font-size: 1.002rem; border-radius: var(--radius-sm); }
.search-icon { left: 11px; font-size: 1.002rem; }
.browse-count { font-size: 0.9rem; margin-bottom: 6px; }
.browse-list { gap: 6px; }
.browse-item { padding: 9px 12px; box-shadow: none; }
.browse-cat { font-size: 0.9rem; margin-bottom: 4px; }
.browse-q { font-size: 1.013rem; } .browse-qvi { font-size: 0.903rem; margin-bottom: 4px; }
.browse-ans { font-size: 0.969rem; } .browse-ansvi { font-size: 0.947rem; padding: 5px 9px; }
.browse-expand { font-size: 0.9rem; margin-top: 4px; }
.browse-vocab-chip { padding: 2px 8px; font-size: 0.9rem; }

/* Theory */
.theory-intro { font-size: 0.969rem; margin-bottom: 10px; }
.theory-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; }
.theory-card { padding: 10px 12px; border-width: 1px; box-shadow: none; gap: 5px; }
.theory-card:hover { transform: none; box-shadow: none; }
.theory-card-emoji { font-size: 1.387rem; } .theory-card h3 { font-size: 0.947rem; }
.theory-card-vi, .theory-card-meta { font-size: 0.9rem; }
.theory-back { font-size: 0.947rem; margin-bottom: 10px; }
.theory-header { margin-bottom: 12px; } .theory-header-emoji { font-size: 1.937rem; } .theory-header h2 { font-size: 1.277rem; }
.theory-intro-text { font-size: 0.991rem; padding: 8px 12px; }
.theory-sections { gap: 8px; margin-bottom: 12px; }
.theory-section { box-shadow: none; }
.theory-section-header { padding: 9px 12px; } .theory-section-title { font-size: 1.013rem; }
.theory-section-body { padding: 0 12px; } .theory-section.open .theory-section-body { padding: 0 12px 11px; }
.theory-section-content { font-size: 0.969rem; line-height: 1.6; margin-bottom: 8px; }
.theory-key-points { gap: 4px; } .theory-key-points li { font-size: 0.947rem; }
.theory-vocab-grid { gap: 6px; }
.theory-tips { padding: 9px 12px; margin-bottom: 12px; } .theory-tips li { font-size: 0.947rem; }
.theory-action-bar { gap: 8px; }
.toast { font-size: 0.925rem; padding: 6px 14px; box-shadow: none; }

/* Vocabulary cards — quiet, small, flat */
.vc { gap: 2px; padding: 8px 10px; border-left: 1px solid var(--border); border-radius: var(--radius-sm); }
.vc-row1 { position: relative; gap: 2px 4px; padding-right: 28px; min-height: 24px; }
.vc-row1 .say-btn { position: absolute; top: -1px; right: 0; margin: 0; }
.vc-term { font-size: 1.079rem; }
.vc-ipa { font-size: 0.9rem; letter-spacing: -0.02em; margin-left: -1px; }
.vc-meaning { font-size: 0.969rem; font-weight: 500; }
.vc-ex { padding: 0; background: none; border-radius: 0; }
.vc-ex-en { font-size: 0.9rem; color: var(--muted); }
.vc-ex-en > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vc-ex-vi { margin-top: 2px; padding-top: 0; border-top: 0; font-size: 0.9rem; }
.pos-tag { padding: 0 6px; font-size: 0.9rem; }
.say-btn { width: 24px; height: 24px; }
.say-btn svg { width: 13px; height: 13px; }
.say-btn.say-sm { width: 20px; height: 20px; } .say-btn.say-sm svg { width: 11px; height: 11px; }
.vocab-more > summary { padding: 7px; font-size: 0.903rem; border-width: 1px; }
.x-vgrid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }

/* Part-of-speech tags — a distinct colour per type, blended over the current surface so it works in dark mode too */
.pos-tag { background: var(--surface2); border-color: var(--border); color: var(--muted); }
.pos-n    { background: color-mix(in srgb, #2D6CA6 18%, var(--surface)); border-color: color-mix(in srgb, #2D6CA6 40%, var(--border)); color: color-mix(in srgb, #2D6CA6 70%, var(--ink)); }
.pos-v    { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: color-mix(in srgb, var(--primary) 70%, var(--ink)); }
.pos-adj  { background: color-mix(in srgb, var(--green) 18%, var(--surface)); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); color: color-mix(in srgb, var(--green) 70%, var(--ink)); }
.pos-adv  { background: color-mix(in srgb, var(--amber) 18%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); color: color-mix(in srgb, var(--amber) 70%, var(--ink)); }
.pos-prep { background: color-mix(in srgb, #7A4FB0 18%, var(--surface)); border-color: color-mix(in srgb, #7A4FB0 40%, var(--border)); color: color-mix(in srgb, #7A4FB0 70%, var(--ink)); }
.pos-conj { background: color-mix(in srgb, #2C7A73 18%, var(--surface)); border-color: color-mix(in srgb, #2C7A73 40%, var(--border)); color: color-mix(in srgb, #2C7A73 70%, var(--ink)); }
.pos-abbr { background: color-mix(in srgb, #5B6472 18%, var(--surface)); border-color: color-mix(in srgb, #5B6472 40%, var(--border)); color: color-mix(in srgb, #5B6472 70%, var(--ink)); }
.pos-phr  { background: color-mix(in srgb, var(--red) 18%, var(--surface)); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); color: color-mix(in srgb, var(--red) 70%, var(--ink)); }

/* Từ vựng: tích "đã học thuộc" + 3 nút lọc (chưa học / đã học / tất cả) */
.vfilter-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.vfilter-row .toggle-chip { display: inline-flex; align-items: center; gap: 5px; }
.vfilter-row .toggle-chip b { font-variant-numeric: tabular-nums; }
.vc-check { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.vc-check input { position: absolute; inset: 0; width: 18px; height: 18px; margin: 0; opacity: 0; cursor: pointer; }
.vc-check-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 5px;
  background: var(--surface); color: transparent; transition: background-color .15s, border-color .15s, color .15s;
}
.vc-check-box svg { width: 12px; height: 12px; }
.vc-check input:checked + .vc-check-box { background: var(--known); border-color: var(--known); color: #fff; }
.vc-check input:focus-visible + .vc-check-box { outline: 2px solid var(--primary); outline-offset: 2px; }
.vc.vc-known { opacity: .62; }
.vc.vc-known .vc-term { text-decoration: line-through; text-decoration-color: var(--known); }

/* Thêm pages */
.x-page { gap: 8px; }
.x-title { font-size: 1.222rem; }
.x-sub { font-size: 0.947rem; margin-top: -4px; }
.x-back { font-size: 0.947rem; }
.x-card { border-width: 1px; box-shadow: none; padding: 12px; gap: 9px; }
.x-grid { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.x-tile { padding: 10px 12px; gap: 10px; border-width: 1px; box-shadow: none; }
.x-tile:hover { transform: none; box-shadow: none; }
.x-tile-emoji { font-size: 1.607rem; } .x-tile-text small { font-size: 0.9rem; }
.x-q { font-size: 1.222rem; } .x-qvi { font-size: 0.969rem; }
.x-play { width: 64px; height: 64px; font-size: 1.717rem; box-shadow: none; }
.x-mic-btn { width: 60px; height: 60px; font-size: 1.717rem; box-shadow: none; }
.x-iv-q { font-size: clamp(1.497rem, 3.4vw, 2.157rem); }
.x-toolbar { gap: 6px; }
.x-stat strong { font-size: 1.607rem; }
.x-trow { font-size: 0.925rem; } .x-tbar { height: 6px; }
.x-sec-t { font-size: 0.9rem; }
.x-note, .x-ansvi { font-size: 0.947rem; }
.x-review li { border-width: 1px; padding: 9px 12px; }

/* Touch screens: keep comfortable hit areas and 16px inputs (iOS zooms smaller ones) */
@media (pointer: coarse) {
  .primary-btn { padding: 12px; }
  .ghost-btn { padding: 9px 16px; }
  .icon-btn { width: 36px; height: 36px; }
  .theme-toggle, .logout-btn { width: 34px; height: 34px; }
  .speed-select { min-height: 34px; }
  .toggle-chip { padding: 7px 12px; }
  .select-pill, .select-full, .search-input, .x-textarea { font-size: 16px; }
  .select-pill { padding-top: 8px; padding-bottom: 8px; }
  .rate-btn { padding: 11px 4px; }
  .quiz-option { padding: 11px 12px; }
  .say-btn { width: 30px; height: 30px; }
  .say-btn.say-sm { width: 26px; height: 26px; }
  .nav-item { font-size: 0.9rem; }
}

/* Phones: two topic cards per row (as before), wider category select */
@media (max-width: 480px) {
  .category-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fc-controls-row-selects select:first-child { flex: 2; min-width: 0; }
  .fc-controls-row-selects select:last-child { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
  .streak-days { gap: 3px; }
  .streak-lbl { font-size: .6rem; }
  .streak-dot { width: 20px; height: 20px; font-size: .74rem; }
}
@media (max-width: 340px) { .category-grid { grid-template-columns: 1fr; } }

/* Browse: search on top, category select underneath (a stray flex-basis made the select 160px tall) */
.browse-category-select { flex: 0 0 auto; }

/* ============================================================
   Type-size pass — body text ≥ 13.5px, only chips/labels stay smaller.
   ============================================================ */
.nav-item { font-size: .84rem; }
.nav-badge { font-size: .72rem; }
kbd, .fc-hint kbd { font-size: .75rem; }
.header-sub, .header-streak { font-size: .84rem; }
.pos-tag, .legend-chip, .vocab-inline-title { font-size: .8rem; }
@media (min-width: 1024px) {
  html { font-size: 16px; }
  main, .header-inner { max-width: 880px; }
}

/* ============================================================
   UI v2 — smoother, softer, easier to use.
   Same warm palette and header + bottom-nav layout. Adds motion, sticky
   action bars, a floating dock on desktop, honest progress bars.
   ============================================================ */
:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
  --radius-sm: 10px; --radius: 12px; --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(70, 45, 20, .05);
  --shadow-md: 0 8px 24px rgba(70, 45, 20, .12);
  --dock: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom));
}
:root[data-theme="dark"] { --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 8px 24px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 8px 24px rgba(0,0,0,.45); } }

/* Keyboard focus ring (mouse/touch stay clean) */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Shell */
.header { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 14px rgba(196, 77, 26, .18); }
.header-streak:empty { display: none; }
main { padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
.bottom-nav { height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.nav-indicator { display: none; }
.nav-item { overflow: visible; }
.nav-item .nav-icon { padding: 1px 14px; line-height: 1.3; border-radius: 999px; transition: background-color .25s var(--ease), transform .2s var(--ease); }
.nav-item.active .nav-icon { background: var(--primary-lt); }
.nav-item.active { font-weight: 700; }
.nav-item:active .nav-icon { transform: scale(.9); }
.nav-badge { top: 1px; }

/* Cards: rounder, softly lifted, alive under the pointer */
.cat-card, .fc-card, .quiz-card, .browse-item, .theory-card, .x-tile, .vc {
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s, background-color .25s, color .25s;
}
body, .header, .bottom-nav, .select-pill, .select-full, .search-input { transition-property: background-color, border-color, color, transform, opacity; transition-duration: .25s; }
.cat-card, .x-tile, .theory-card { cursor: pointer; }
@media (hover: hover) {
  .cat-card:hover, .x-tile:hover, .theory-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
  .vc:hover, .browse-item:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
}
.cat-card:active, .x-tile:active, .theory-card:active,
.quiz-option:not(:disabled):active, .ghost-btn:active, .primary-btn:active, .toggle-chip:active, .icon-btn:active, .rate-btn:active { transform: scale(.97); }

/* Entrance and progress motion */
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes barGrow { from { transform: scaleX(0); } }
@keyframes pop { 50% { transform: scale(1.025); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes dockIn { from { opacity: 0; transform: translateY(12px); } }
.cat-card { animation: cardIn .4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.cat-bar > div, .big-bar > div, .goal-bar-fg { transform-origin: left center; animation: barGrow .7s var(--ease) backwards; }
.browse-item { content-visibility: auto; contain-intrinsic-size: auto 92px; }

/* Honest progress bars: "not studied yet" is a neutral track, not an orange fill */
.cat-bar .new, .big-bar .new { background: transparent; }
.legend-chip.new { color: var(--muted); }

/* Home */
.hero-chips { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
.section-title { flex: 1 0 100%; font-size: 1.07rem; font-weight: 700; letter-spacing: -.01em; }
.legend-row { align-items: center; gap: 4px 14px; margin: 14px 0 8px; }
.legend-chip { background: transparent !important; padding: 0; font-weight: 600; font-size: .84rem; display: inline-flex; align-items: center; gap: 5px; }
.legend-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sort-toggle-btn { margin-left: auto; }

/* Flashcard: one tidy controls row, no keyboard hints on touch, action bar that stays reachable */
.fc-card { cursor: default; }
.dock { position: sticky; bottom: var(--dock); z-index: 50; transition: bottom .3s var(--ease); }
body:has(.bottom-nav.nav-hide) .dock, body.focus-mode .dock { bottom: calc(10px + env(safe-area-inset-bottom)); }
.rate-bar.dock { padding: 6px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); animation: dockIn .25s var(--ease); }
#quizNext.dock { margin-top: 12px; box-shadow: var(--shadow-md); animation: dockIn .25s var(--ease); }
.fc-reveal-btn { transition: background-color .2s, color .2s; }
@media (max-width: 560px) {
  .fc-controls-row:not(.fc-controls-row-selects) { flex-wrap: nowrap; }
  .toggle-row { flex-wrap: nowrap; gap: 6px; }
  .toggle-chip { white-space: nowrap; padding: 5px 9px; }
  .btn-focus .btn-lbl { display: none; }
  .fc-counter { margin-left: auto; white-space: nowrap; }
}
@media (pointer: coarse) { .fc-hint { display: none; } }

/* Quiz: numbered options (keys 1-4), clear right/wrong feedback */
.quiz-options { counter-reset: opt; }
.quiz-option { display: flex; align-items: flex-start; gap: 10px; text-align: left; counter-increment: opt; transition: background-color .2s, border-color .2s, transform .12s; }
.quiz-option::before {
  content: counter(opt); flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-size: .8rem; font-weight: 700;
}
.quiz-option.correct { animation: pop .3s var(--ease); }
.quiz-option.incorrect { animation: shake .32s; }
.quiz-option.correct::before { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-option.incorrect::before { background: var(--red); border-color: var(--red); color: #fff; }
.quiz-bar { transition: width .4s var(--ease); }

/* ============================================================
   UI v6 — Claude look (Anthropic's own brand: warm cream surfaces,
   clay/terracotta accent, hairline borders, soft flat cards, calm chrome).
   Same sidebar + top-bar skeleton as before, only the skin changes.
   Phones keep the top bar + bottom tabs. Data and learning logic are untouched.
   ============================================================ */
:root, :root[data-theme="light"] {
  --bg: #FAF9F5; --surface: #FFFFFF; --surface2: #F0EEE6; --border: #E7E4D8;
  --ink: #30302E; --muted: #686761; /* ≥4.5:1 on every light surface — Vietnamese translations use it */
  --primary: #B3532E; --primary-dk: #A0482B; --primary-lt: #F2E4DA; --btn-bg: var(--primary);
  --green: #3E6C41; --green-lt: #E7F0E3; --amber: #87601A; --amber-lt: #F5ECD6; --red: #A94234; --red-lt: #F7E3DF;
  --known: #47784A; --learning: #C88A3A; --new: #C9C6BA;
  --blue: #C15F3C; --blue-lt: #F2E4DA;
  --side-bg: #F5F3EC; --side-hover: rgba(48,48,46,.05); --side-active: #EDE2D3;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(48,45,36,.05); --shadow-md: 0 6px 20px rgba(48,45,36,.10);
}
:root[data-theme="dark"] {
  --bg: #1F1E1C; --surface: #2A2A27; --surface2: #302F2B; --border: #423F38;
  --ink: #EDECE6; --muted: #A6A399;
  --primary: #D97757; --primary-dk: #E08A6D; --primary-lt: #3C2E24; --btn-bg: #A65234; /* dark: primary-dk is text on dark tints, buttons use btn-bg */
  --green: #77B87B; --green-lt: #253227; --amber: #E0AC53; --amber-lt: #332813; --red: #E28277; --red-lt: #3A2621;
  --known: #77B87B; --learning: #E0AC53; --new: #565349;
  --blue: #D97757; --blue-lt: #3C2E24;
  --side-bg: #262521; --side-hover: rgba(255,255,255,.05); --side-active: #3A362D;
  --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 20px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #1F1E1C; --surface: #2A2A27; --surface2: #302F2B; --border: #423F38;
    --ink: #EDECE6; --muted: #A6A399;
    --primary: #D97757; --primary-dk: #E08A6D; --primary-lt: #3C2E24; --btn-bg: #A65234; /* dark: primary-dk is text on dark tints, buttons use btn-bg */
    --green: #77B87B; --green-lt: #253227; --amber: #E0AC53; --amber-lt: #332813; --red: #E28277; --red-lt: #3A2621;
    --known: #77B87B; --learning: #E0AC53; --new: #565349;
    --blue: #D97757; --blue-lt: #3C2E24;
    --side-bg: #262521; --side-hover: rgba(255,255,255,.05); --side-active: #3A362D;
    --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  }
}

/* Colours that used to be hard-coded orange, now the Claude clay tone */
.primary-btn { background: var(--btn-bg); box-shadow: none; font-weight: 600; }
.primary-btn:hover { background: color-mix(in srgb, var(--btn-bg) 86%, #000); box-shadow: none; }
.search-input:focus, .form-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.fc-reveal-btn:hover { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.x-play, .x-mic-btn { box-shadow: 0 6px 18px rgba(193, 95, 60, .28); }
mark { background: color-mix(in srgb, var(--learning) 38%, transparent); color: inherit; }
.rate-new { background: var(--red-lt); color: var(--red); }
.nav-badge { background: var(--primary); color: #fff; }
.header { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; }
.header-title { color: var(--ink); }
.header-sub { color: var(--muted); }
.header-logo { filter: none; }
.theme-toggle, .logout-btn { background: var(--surface2); color: var(--ink); }
.header-streak { background: var(--amber-lt); color: var(--amber); }
.nav-item.active { color: var(--primary-dk); }
.nav-item.active .nav-icon { background: var(--primary-lt); }
.nav-item .nav-icon .ico { width: 22px; height: 22px; display: block; }

/* Sidebar-only and desktop-only pieces stay out of the phone layout */
.side-toggle, .side-brand, .side-label, .side-only, .page-head, .side-cta { display: none; }


/* ----- Category cards: pills + actions ----- */
.cat-card { display: flex; flex-direction: column; box-shadow: none; }
.cat-titles { min-width: 0; }
.cat-footer { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.cat-count, .cat-known, .cat-learning { padding: 2px 9px; border-radius: 999px; font-size: .84rem; font-weight: 600; }
.cat-count { background: var(--surface2); color: var(--muted); }
.cat-known { background: var(--green-lt); color: var(--green); }
.cat-learning { background: var(--amber-lt); color: var(--amber); }
.cat-actions { display: none; }
.cat-learning { display: none; }
.legend-chip.new { color: var(--muted); }

/* ================= Desktop workspace ================= */
@media (min-width: 900px) {
  :root { --side-w: 256px; --header-h: 64px; --dock: 20px; }
  body.side-collapsed { --side-w: 76px; }

  /* Sidebar (the same <nav> that is the tab bar on phones) — light cream, like Claude's chat list */
  .bottom-nav {
    top: 0; left: 0; bottom: 0; right: auto; width: var(--side-w); height: auto;
    padding: 16px 12px 24px; flex-direction: column; align-items: stretch; gap: 2px;
    overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
    background: var(--side-bg); border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; transform: none;
    transition: width .25s var(--ease); z-index: 120;
  }
  .bottom-nav.nav-hide { transform: none; }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
  .side-logo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-lt); font-size: 1.3rem; }
  .side-title { color: var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
  .side-tag { color: var(--muted); font-size: .8rem; white-space: nowrap; }
  .side-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-bottom: 14px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink);
    font-size: .95rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s;
  }
  .side-cta:hover { background: var(--primary-lt); border-color: var(--primary); color: var(--primary-dk); }
  .side-cta .ico { width: 18px; height: 18px; }
  .side-label { display: block; padding: 14px 10px 6px; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .side-only.nav-item { display: flex; }
  .nav-item[data-view="more"] { display: none; }
  .nav-item {
    flex: none; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px;
    height: 40px; padding: 0 10px; border-radius: var(--radius-sm); overflow: visible;
    color: var(--ink); font-size: .95rem; font-weight: 500; text-decoration: none;
    transition: background-color .15s, color .15s;
  }
  .nav-item:hover { background: var(--side-hover); }
  .nav-item.active { background: var(--side-active); color: var(--primary-dk); font-weight: 600; }
  .nav-item .nav-icon, .nav-item.active .nav-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; background: none; transform: none; color: inherit; }
  .nav-badge { position: static; margin-left: auto; }
  body.side-collapsed .side-brand-text, body.side-collapsed .nav-label, body.side-collapsed .side-label, body.side-collapsed .side-cta span:not(.ico) { display: none; }
  body.side-collapsed .side-brand { justify-content: center; padding-inline: 0; }
  body.side-collapsed .side-cta { width: 42px; padding: 0; }
  body.side-collapsed .nav-item { justify-content: center; padding: 0; }
  body.side-collapsed .nav-badge { position: absolute; top: 5px; right: 9px; margin: 0; }

  /* Top bar */
  .header { margin-left: var(--side-w); background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: none; transition: margin-left .25s var(--ease); }
  .header-inner { max-width: none; padding: 0 28px; gap: 14px; justify-content: flex-start; }
  .side-toggle { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); transition: background-color .15s; }
  .side-toggle:hover { background: var(--surface2); }
  .side-toggle .ico { width: 19px; height: 19px; }
  .header-brand { flex: 1; min-width: 0; }
  .header-logo, .header-title { display: none; }
  .header-sub { display: inline-block; margin: 0; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .9rem; font-weight: 500; }
  .header-right { gap: 8px; margin-left: auto; }
  .header-streak { padding: 6px 12px; }
  .theme-toggle, .logout-btn { width: 38px; height: 38px; border: 1px solid var(--border); }
  .theme-toggle:hover, .logout-btn:hover { background: var(--surface2); }
  .speed-picker-label { display: inline; font-size: .9rem; color: var(--muted); white-space: nowrap; }
  .speed-label-txt { display: inline; } /* desktop: đủ chỗ, hiện lại tên mức tốc độ */
  .speed-select { height: 38px; padding: 0 14px; font-size: .92rem; }

  /* Content */
  main { margin-left: var(--side-w); max-width: none; padding: 26px 32px 56px; transition: margin-left .25s var(--ease); }
  body.focus-mode .bottom-nav { transform: translateX(-100%); }
  body.focus-mode .header, body.focus-mode main { margin-left: 0; }
  body.focus-mode .page-head { display: none; }
  .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
  .page-head h1 { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
  .page-head p { margin: 6px 0 0; color: var(--muted); font-size: 1rem; }
  .page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .page-actions .primary-btn, .page-actions .ghost-btn { width: auto; height: 40px; padding: 0 18px; font-size: .95rem; font-weight: 600; border-radius: 999px; }
  .page-actions .ghost-btn { background: transparent; border: 1px solid var(--border); color: var(--ink); }
  .page-actions .ghost-btn:hover { background: var(--surface2); }
  .theory-intro, .x-page > .x-title, .x-page > .x-sub, .x-page > .x-back { display: none; }

  /* Home — stat cards + progress panel share one row */
  .big-bar { height: 8px; }
  .section-title { font-size: 1.2rem; }
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
  .cat-card { gap: 10px; padding: 16px 18px; }
  .cat-card-header { align-items: flex-start; gap: 12px; margin: 0; }
  .cat-emoji { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--surface2); font-size: 1.3rem; }
  .cat-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
  .cat-card .cat-vi { margin-top: 2px; font-size: .92rem; color: var(--muted); }
  .cat-bar { height: 6px; margin: 2px 0 0; }
  .cat-count, .cat-known, .cat-learning { font-size: .84rem; padding: 3px 11px; }
  .cat-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
  .cat-actions .primary-btn, .cat-actions .ghost-btn { width: auto; height: 36px; padding: 0 16px; font-size: .9rem; font-weight: 600; border-radius: 999px; }
  .cat-actions .ghost-btn { background: transparent; border: 1px solid var(--border); color: var(--ink); }
  .cat-actions .ghost-btn:hover { background: var(--surface2); }

  /* Study screens: readable centred column inside the wide workspace */
  #view-flashcard, #view-quiz { max-width: 860px; margin-inline: auto; }
  .quiz-setup { max-width: 520px; margin: 8px auto 0; padding: 26px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
  .browse-controls { flex-direction: row; align-items: center; }
  .browse-controls .search-wrap { flex: 1; }
  .browse-category-select { width: 320px; flex: none; }
  .cat-learning { display: inline-block; }
  .browse-controls, .browse-list, .browse-count { max-width: 1000px; }
  .theory-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .x-page { max-width: 1080px; }
}


/* ============================================================
   UI v6 compact pass — desktop was too roomy (big numbers, tall cards,
   wide gaps). Tighten sizes and spacing; same layout and colours.
   ============================================================ */
@media (min-width: 900px) {
  :root { --side-w: 224px; }
  main { padding: 18px 24px 40px; }
  .header-inner { padding: 0 20px; gap: 10px; }
  .side-toggle { width: 34px; height: 34px; }
  .side-toggle .ico { width: 17px; height: 17px; }
  .header-sub { padding: 6px 12px; font-size: .84rem; }
  .theme-toggle, .logout-btn { width: 34px; height: 34px; }
  .header-streak { padding: 5px 10px; font-size: .84rem; }
  .speed-picker-label { font-size: .8rem; }
  .speed-select { height: 34px; padding: 0 11px; font-size: .82rem; }

  .bottom-nav { padding: 12px 10px 20px; gap: 1px; }
  .side-brand { padding: 2px 4px 10px; gap: 8px; }
  .side-logo { width: 32px; height: 32px; border-radius: 8px; font-size: 1.15rem; }
  .side-title { font-size: .95rem; }
  .side-tag { font-size: .74rem; }
  .side-cta { height: 36px; margin-bottom: 10px; font-size: .88rem; }
  .side-cta .ico { width: 16px; height: 16px; }
  .side-label { padding: 10px 8px 4px; font-size: .68rem; }
  .nav-item { height: 34px; padding: 0 8px; gap: 10px; font-size: .88rem; }
  .nav-item .nav-icon { width: 17px; height: 17px; }
  .nav-item .nav-icon .ico { width: 17px; height: 17px; }

  .page-head { margin-bottom: 14px; gap: 14px; }
  .page-head h1 { font-size: 1.35rem; }
  .page-head p { margin-top: 4px; font-size: .88rem; }
  .page-actions .primary-btn, .page-actions .ghost-btn { height: 34px; padding: 0 14px; font-size: .86rem; }

  .streak-dot { width: 24px; height: 24px; }
  .big-bar { height: 6px; }
  .wday { font-size: .76rem; } /* dùng ở trang Tiến độ (extras.js), không dùng ở Trang chủ nữa */

  .section-title { font-size: 1.02rem; }
  .legend-row { margin: 10px 0 6px; }

  .category-grid { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 10px; }
  .cat-card { gap: 6px; padding: 12px 14px; }
  .cat-emoji { width: 34px; height: 34px; font-size: 1.05rem; }
  .cat-card h3 { font-size: .95rem; }
  .cat-card .cat-vi { font-size: .82rem; }
  .cat-bar { height: 5px; }
  .cat-count, .cat-known, .cat-learning { font-size: .76rem; padding: 2px 9px; }
  .cat-actions { gap: 6px; padding-top: 2px; }
  .cat-actions .primary-btn, .cat-actions .ghost-btn { height: 30px; padding: 0 12px; font-size: .82rem; }
}

/* ===== Trang chủ gọn: banner "Học tiếp" + chỉ hiện 1 hàng chủ đề ===== */
.cat-more-btn { display: block; width: auto; margin: 12px auto 4px; padding: 8px 22px; border-radius: 999px; }

/* ===== Trang chủ: hướng dẫn người mới, đếm ngược, từ vựng hôm nay, huy hiệu ===== */
.home-card {
  --soft-ink: color-mix(in srgb, var(--muted) 60%, var(--ink)); /* chữ phụ đậm hơn --muted để đủ độ tương phản 4.5:1 */
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px; min-width: 0;
}
.hc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hc-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.hc-sub { margin: 4px 0 0; font-size: .88rem; line-height: 1.5; color: var(--soft-ink); }
.hc-sub b { color: var(--ink); }
.hc-count { flex: none; font-size: .82rem; font-weight: 700; color: var(--primary-dk); background: var(--primary-lt); padding: 2px 10px; border-radius: 999px; }
.home-card .link-btn { flex: none; font-size: .85rem; }


.exam-form { display: flex; gap: 8px; margin-top: 10px; }
.exam-form .form-input { flex: 1; min-width: 0; }
.exam-form .primary-btn { width: auto; padding: 8px 18px; }
.word-card { background: linear-gradient(135deg, color-mix(in srgb, var(--green) 10%, var(--surface)) 0%, var(--surface) 65%); }
.wod-term { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 1.45rem; font-weight: 800; color: var(--ink); }
.wod-term > span { min-width: 0; }
.wod-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .88rem; color: var(--soft-ink); }
.wod-mean { margin-top: 4px; font-size: 1rem; font-weight: 600; color: var(--green); }
.wod-ex { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface2); font-size: .88rem; font-style: italic; }
.wod-ex .say-btn { vertical-align: middle; }
.wod-ex-vi { font-style: normal; color: var(--soft-ink); }
.wod-next { flex: none; margin-left: auto; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.wod-next:hover { border-color: var(--primary); background: var(--primary-lt); }

.badge-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; margin: 12px 0 4px; }
.badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.badge-ico {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem;
  background: var(--surface2); border: 2px dashed var(--border); filter: grayscale(1); opacity: .5;
}
.badge.on .badge-ico {
  filter: none; opacity: 1; border: 2px solid color-mix(in srgb, var(--amber) 60%, transparent);
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--amber) 30%, var(--surface)), color-mix(in srgb, var(--primary) 18%, var(--surface)));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--amber) 30%, transparent); animation: badgePop .5s var(--ease, ease) backwards;
}
@keyframes badgePop { from { transform: scale(.6); opacity: 0; } }
.badge-name { font-size: .76rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.badge:not(.on) .badge-name { color: var(--soft-ink); }


/* Hình 3D (Fluent Emoji — Microsoft, MIT) thay cho emoji chữ ở Trang chủ */
.i3d { display: inline-block; flex: none; object-fit: contain; user-select: none; pointer-events: none; }
.cat-img { width: 30px; height: 30px; }
.hc-title { display: flex; align-items: center; gap: 8px; }
.hc-ico { width: 28px; height: 28px; }
.badge-ico .i3d { width: 30px; height: 30px; }
@media (min-width: 900px) {
  .cat-img { width: 32px; height: 32px; }
}

/* Thẻ tiến độ gọn (thay hàng 4 ô thống kê cũ) */

/* ===== Bố cục Trang chủ: điện thoại 1 cột theo thứ tự ưu tiên; màn rộng 2 cột (trái: học, phải: thông tin) ===== */
@media (min-width: 900px) {
  .home-card { margin-bottom: 16px; padding: 16px 18px; }
}

/* ===== TRANG CHỦ (thiết kế lại): khối chào mừng → lộ trình người mới → tổng quan 3 ô → chủ đề → từ vựng + huy hiệu ===== */
#view-home { --soft-ink: color-mix(in srgb, var(--muted) 60%, var(--ink)); --accent-ink: color-mix(in srgb, var(--primary) 70%, var(--ink)); }
#homeHero, .home-overview, .home-topics { margin-bottom: 14px; }
#homeHero:empty { display: none; }


/* Trang "Hướng dẫn cho người mới": 6 thẻ, mỗi thẻ giới thiệu 1 tính năng + cách dùng */
.guide-page { --soft-ink: color-mix(in srgb, var(--muted) 60%, var(--ink)); --accent-ink: color-mix(in srgb, var(--primary) 70%, var(--ink)); }
.rm-progress { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.rm-progress .rm-bar { flex: 1; margin: 0; }
.guide-done { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--green-lt); font-weight: 600; }
.rm-count { padding: 2px 10px; border-radius: 999px; background: var(--primary-lt); color: var(--accent-ink); font-size: .85rem; font-weight: 700; }
.rm-bar { height: 6px; margin: 10px 0 12px; border-radius: 3px; background: var(--border); overflow: hidden; }
.rm-bar > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--amber)); }
.rm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rm-steps li { display: flex; min-width: 0; }
.rm-step {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink);
  font: inherit; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.rm-step:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.rm-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.rm-img { width: 44px; height: 44px; }
.rm-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-lt); color: var(--accent-ink); font-size: .8rem; font-weight: 800; }
.rm-title { font-size: .98rem; font-weight: 700; }
.rm-desc { flex: 1; font-size: .84rem; line-height: 1.45; color: var(--soft-ink); }
.rm-go { font-size: .86rem; font-weight: 700; color: var(--accent-ink); }
.rm-step.ok { background: color-mix(in srgb, var(--green) 8%, var(--surface)); }
.rm-step.ok .rm-num { background: var(--green); color: #fff; }
.rm-step.ok .rm-go { color: var(--green); }

/* Hàng tổng quan 3 ô */
.home-overview { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ov-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ov-head { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; color: var(--ink); }
.ov-ico { width: 30px; height: 30px; }
.ov-sub { font-size: .84rem; line-height: 1.45; color: var(--soft-ink); }
.ov-card .streak-days { flex: none; margin-top: 2px; }
.ov-card .streak-remind-btn { align-self: flex-start; margin-top: 4px; }
.ov-card .remind-panel { margin-top: 4px; }

/* Chuỗi ngày học + nhắc học ở cuối Trang chủ */
#homeStreak { margin-bottom: 14px; }
.sc-big { margin-left: auto; font-family: var(--font-mono); font-size: 1.45rem; font-weight: 800; line-height: 1; color: var(--ink); }
.sc-big small { font-family: var(--font); font-size: .82rem; font-weight: 600; color: var(--soft-ink); }
@media (min-width: 760px) {
  .streak-card { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 8px 24px; }
  .streak-card .remind-panel { grid-column: 1 / -1; }
  .streak-card .streak-remind-btn { margin-top: 0; }
}


@media (min-width: 900px) {
  #homeHero, .home-overview, .home-topics { margin-bottom: 22px; }
}
@media (max-width: 899px) {
  .rm-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* 3 ô tổng quan gọn: số lớn nằm cùng hàng với tiêu đề */
  .home-overview { gap: 8px; }
  .ov-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 12px 14px; }
  .ov-card > * { grid-column: 1 / -1; }
  .ov-card > .ov-head { grid-column: 1; }
  .ov-ico { width: 26px; height: 26px; }
  .ov-card .streak-remind-btn { justify-self: start; }
  .rm-steps { grid-template-columns: 1fr; gap: 10px; }
}

/* ===== LANDING PAGE (khách chưa đăng nhập) ===== */
.landing {
  --soft-ink: color-mix(in srgb, var(--muted) 60%, var(--ink)); --accent-ink: color-mix(in srgb, var(--primary) 70%, var(--ink));
  --cta-bg: color-mix(in srgb, var(--btn-bg) 88%, #000);
  min-height: 100vh; background: var(--bg); color: var(--ink);
}
.ld-nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1120px; margin: 0 auto; padding: 12px 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
}
.ld-brand { display: flex; align-items: center; gap: 8px; font-size: 1.08rem; font-weight: 800; }
.ld-nav-actions { display: flex; align-items: center; gap: 8px; }
.ld-link { padding: 8px 14px; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-weight: 600; }
.ld-link:hover { background: var(--surface2); }
.ld-btn {
  padding: 9px 18px; border: 0; border-radius: 999px; background: var(--cta-bg); color: #fff; font: inherit; font-weight: 700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); transition: transform .15s, background-color .15s;
}
.ld-btn:hover { background: color-mix(in srgb, var(--btn-bg) 76%, #000); transform: translateY(-1px); }
.ld-btn-lg { padding: 14px 28px; font-size: 1.05rem; }
.ld-ghost { padding: 14px 22px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; }
.ld-ghost:hover { border-color: var(--primary); }
.ld-main { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

.ld-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; padding: 40px 0 56px; }
.ld-eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--primary-lt); color: var(--accent-ink); font-size: .85rem; font-weight: 700; }
.ld-hero h1 { margin: 16px 0 0; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.ld-lead { margin: 16px 0 0; max-width: 56ch; font-size: 1.1rem; line-height: 1.6; color: var(--soft-ink); }
.ld-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ld-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; padding: 0; }
.ld-stats li { display: flex; flex-direction: column; }
.ld-stats b { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--accent-ink); }
.ld-stats span { font-size: .85rem; color: var(--soft-ink); }

.ld-hero-art { position: relative; display: flex; justify-content: center; padding: 104px 10px 52px; } /* room above and below the card: the picture and the floating chips never cover its text */
.ld-hero-art::before {
  content: ''; position: absolute; inset: 20px 0 0; border-radius: 32px; z-index: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), color-mix(in srgb, var(--amber) 18%, var(--surface)));
}
.ld-chef { position: absolute; top: -8px; right: 6%; z-index: 2; width: 118px; height: 118px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .16)); }
.ld-mock {
  position: relative; z-index: 1; width: 100%; max-width: 380px; padding: 18px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}
.ld-mock-cat { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .03em; }
.ld-mock-q { margin-top: 10px; font-size: 1.12rem; font-weight: 700; line-height: 1.35; }
.ld-mock-vi { margin-top: 6px; font-size: .88rem; color: var(--soft-ink); }
.ld-mock-a { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); font-size: .92rem; line-height: 1.5; }
.ld-mock-tag { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 700; color: var(--accent-ink); }
.ld-mock-rate { display: flex; gap: 6px; margin-top: 12px; }
.ld-mock-rate span { flex: 1; padding: 7px 4px; border-radius: 10px; border: 1px solid var(--border); font-size: .74rem; font-weight: 600; text-align: center; color: var(--soft-ink); white-space: nowrap; }
.ld-mock-rate .on { background: var(--green-lt); border-color: var(--green); color: var(--ink); }
.ld-float {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); font-size: .82rem; font-weight: 700;
  animation: ldFloat 4s ease-in-out infinite;
}
.ld-float-1 { left: 0; top: 44px; }
.ld-float-2 { right: 0; bottom: 2px; animation-delay: -2s; }
@keyframes ldFloat { 50% { transform: translateY(-8px); } }

.ld-sec { padding: 48px 0; }
.ld-sec h2, .ld-final h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; text-align: center; }
.ld-sec-sub { margin: 10px auto 0; max-width: 60ch; text-align: center; font-size: 1rem; color: var(--soft-ink); }
.ld-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.ld-feat { padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); transition: transform .2s, box-shadow .2s; }
.ld-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ld-feat img { width: 52px; height: 52px; }
.ld-feat h3 { margin: 12px 0 0; font-size: 1.08rem; font-weight: 700; }
.ld-feat p { margin: 6px 0 0; font-size: .92rem; line-height: 1.55; color: var(--soft-ink); }

.ld-how { margin: 0 -20px; padding-left: 20px; padding-right: 20px; background: var(--surface2); border-radius: 28px; }
.ld-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 30px 0 0; padding: 0; counter-reset: none; }
.ld-steps li { position: relative; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.ld-step-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cta-bg); color: #fff; font-weight: 800; }
.ld-steps h3 { margin: 12px 0 0; font-size: 1.02rem; font-weight: 700; }
.ld-steps p { margin: 6px 0 0; font-size: .9rem; line-height: 1.5; color: var(--soft-ink); }

.ld-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.ld-topic { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .88rem; font-weight: 600; }
.ld-topic-img { width: 28px; height: 28px; }
.ld-topic-rest { display: none; }

.ld-faq details { max-width: 760px; margin: 12px auto 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.ld-faq h2 + details { margin-top: 26px; }
.ld-faq summary { padding: 16px 18px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--accent-ink); }
.ld-faq details[open] summary::after { content: '−'; }
.ld-faq details p { margin: 0; padding: 0 18px 16px; line-height: 1.6; color: var(--soft-ink); }

.ld-final {
  margin: 20px 0 40px; padding: 44px 24px; border-radius: 28px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), color-mix(in srgb, var(--amber) 18%, var(--surface)));
}
.ld-final img { width: 64px; height: 64px; }
.ld-final h2 { margin-top: 8px; }
.ld-final p { margin: 10px 0 22px; color: var(--soft-ink); }
.ld-foot { max-width: 1120px; margin: 0 auto; padding: 20px; border-top: 1px solid var(--border); text-align: center; font-size: .82rem; color: var(--soft-ink); }

/* Ô đăng nhập mở đè lên trang giới thiệu */
.login-screen.as-modal { background: rgba(20, 18, 15, .55); backdrop-filter: blur(4px); }
.login-card { position: relative; }
.auth-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface2); color: var(--ink); font-size: .95rem; }
.auth-close:hover { background: var(--primary-lt); }
html.modal-open { overflow: hidden; }

@media (max-width: 960px) {
  .ld-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
  .ld-features { grid-template-columns: repeat(2, 1fr); }
  .ld-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ld-nav { padding: 8px 14px; gap: 8px; }
  .ld-brand { gap: 6px; font-size: .95rem; }
  .ld-brand img { width: 28px; height: 28px; }
  .ld-nav-actions { gap: 4px; }
  .ld-link { padding: 7px 10px; font-size: .88rem; }
  .ld-nav .ld-btn { padding: 7px 14px; font-size: .88rem; }
  .ld-main { padding: 0 14px; }
  .ld-hero { gap: 12px; padding: 12px 0 28px; }
  .ld-eyebrow { padding: 4px 10px; font-size: .74rem; }
  .ld-hero h1 { margin-top: 12px; font-size: 1.65rem; }
  .ld-lead { margin-top: 10px; font-size: .95rem; }
  .ld-cta { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 18px; }
  .ld-btn-lg { padding: 13px 20px; font-size: 1rem; }
  .ld-cta .ld-ghost { padding: 8px; border: 0; background: none; color: var(--accent-ink); font-size: .92rem; }
  .ld-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
  .ld-stats li { align-items: center; padding: 8px 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: center; }
  .ld-stats b { font-size: 1.12rem; }
  .ld-stats span { font-size: .66rem; line-height: 1.25; }
  .ld-hero-art { padding: 72px 6px 14px; }
  .ld-hero-art::before, .ld-hero-art::after { inset: 16px 0 0; border-radius: 22px; }
  .ld-chef { top: -4px; right: 4%; width: 78px; height: 78px; }
  .ld-float { display: none; }
  .ld-mock { padding: 14px; }
  .ld-mock-q { font-size: 1rem; }
  .ld-sec { padding: 28px 0; }
  .ld-sec h2, .ld-final h2 { font-size: 1.35rem; }
  .ld-sec-sub { margin-top: 6px; font-size: .9rem; }
  .ld-features { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .ld-feat { padding: 14px; border-radius: 16px; }
  .ld-feat img { width: 36px; height: 36px; }
  .ld-feat h3 { margin-top: 8px; font-size: .92rem; }
  .ld-feat p { font-size: .8rem; line-height: 1.45; }
  .ld-how { margin: 0 -14px; padding: 28px 14px; border-radius: 22px; }
  .ld-steps { grid-template-columns: 1fr; gap: 0; margin-top: 14px; }
  .ld-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 10px 0; border: 0; border-radius: 0; background: none; }
  .ld-steps li + li { border-top: 1px dashed var(--border); }
  .ld-step-num { grid-row: span 2; width: 32px; height: 32px; font-size: .9rem; }
  .ld-steps h3 { margin: 0; font-size: .95rem; }
  .ld-steps p { margin-top: 2px; font-size: .84rem; }
  .ld-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .ld-topic { min-width: 0; padding: 6px 10px 6px 6px; font-size: .8rem; }
  .ld-topic > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ld-topic-img { width: 24px; height: 24px; }
  .ld-topic-extra { display: none; }
  .ld-topic-rest { display: inline-flex; justify-content: center; grid-column: 1 / -1; border-color: transparent; background: var(--primary-lt); color: var(--accent-ink); }
  .ld-faq summary { padding: 13px 14px; font-size: .92rem; }
  .ld-faq details p { padding: 0 14px 14px; font-size: .9rem; }
  .ld-final { margin: 8px 0 24px; padding: 28px 18px; border-radius: 22px; }
  .ld-final img { width: 48px; height: 48px; }
  .ld-final .ld-btn { width: 100%; }
}

/* ===== Điện thoại: bớt khoảng trống (đo bằng scratchpad/pw/whitespace.mjs) ===== */
@media (max-width: 640px) {
  #homeHero, .home-overview, .home-topics { margin-bottom: 10px; }
  .ov-card { padding: 10px 12px; }
  .home-topics .legend-row { flex-wrap: nowrap; align-items: center; margin: 0 0 8px; }
  .home-topics .section-title { flex: 1 1 auto; min-width: 0; }
  .home-topics .sort-toggle-btn { flex: none; white-space: nowrap; }
  .cat-card { padding: 10px; }
  .cat-card-header { gap: 8px; margin-bottom: 6px; }
  .cat-vi { display: none; }
  .cat-titles h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .86rem; line-height: 1.3; }
  .cat-emoji { width: 32px; height: 32px; }
  .cat-img { width: 24px; height: 24px; }
  #catMoreBtn { margin: 8px auto 0; }
  .home-card { padding: 12px; margin-bottom: 10px; }
  .wod-term { margin-top: 6px; font-size: 1.2rem; }
  .wod-mean { margin-top: 2px; }
  .wod-ex { margin-top: 6px; padding: 6px 8px; }
  .badge-row { gap: 8px 4px; margin: 8px 0 2px; }
  .badge-ico { width: 42px; height: 42px; }
  .badge-ico .i3d { width: 24px; height: 24px; }
  .badge-name { font-size: .75rem; }
}
@media (max-width: 600px) {
  .ld-hero { padding: 6px 0 14px; }
  .ld-lead { margin-top: 8px; }
  .ld-cta { margin-top: 14px; }
  .ld-stats { margin-top: 12px; }
  .ld-hero-art { padding: 34px 6px 8px; }
  .ld-hero-art::before { inset: 12px 0 0; }
  .ld-chef { width: 72px; height: 72px; }
  .ld-sec { padding: 18px 0; }
  .ld-sec-sub { margin-top: 4px; }
  .ld-features { margin-top: 12px; gap: 8px; }
  .ld-feat { padding: 12px; }
  .ld-how { padding: 18px 14px; }
  .ld-steps { margin-top: 6px; }
  .ld-steps li { padding: 8px 0; }
  .ld-topics { margin-top: 12px; gap: 6px; }
  .ld-faq h2 + details { margin-top: 12px; }
  .ld-faq details { margin-top: 6px; }
  .ld-faq summary { padding: 12px 14px; }
  .ld-final { margin: 4px 0 14px; padding: 20px 16px; }
  .ld-final img { width: 40px; height: 40px; }
  .ld-final p { margin: 4px 0 12px; }
  .ld-foot { padding: 12px 14px; }
}

/* ============================================================
   UI v8 — site-wide usability pass: bigger tap targets, one-column
   theory list on phones, lighter Browse list, no keyboard hints on touch.
   ============================================================ */
/* Back links were ~20px tall — hard to hit with a thumb */
.x-back, .theory-back { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px 0 0; margin-bottom: 4px; }
.theory-back { color: var(--primary-dk); }

/* Theory list: 3D topic image like Home; read topics get a quiet green badge */
.theory-card-top { align-items: flex-start; }
.theory-card-img { width: 40px; height: 40px; margin-top: 2px; }
.theory-card-featured .theory-card-img { width: 48px; height: 48px; }
.theory-card-text { min-width: 0; flex: 1; }
.theory-card-meta { margin-top: 6px; gap: 4px 10px; align-items: center; }
.theory-read-badge { padding: 1px 8px; font-size: .8rem; }
.theory-header-img { width: 52px; height: 52px; }
@media (max-width: 560px) {
  .theory-grid { grid-template-columns: 1fr; gap: 8px; }
  .theory-card { padding: 12px; }
  .theory-card-img { width: 36px; height: 36px; }
  .theory-header-img { width: 44px; height: 44px; }
}

/* Browse: the whole card opens the answer; category label is quiet (and hidden when one topic is picked) */
.browse-item { cursor: pointer; }
.browse-cat { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
.browse-list.one-cat .browse-cat { display: none; }
.browse-expand { min-height: 36px; margin-top: 0; padding: 0; background: none; color: var(--primary-dk); }
.browse-item-body { cursor: auto; }
.browse-more { align-self: center; margin: 6px 0 4px; padding: 10px 22px; border-radius: 999px; }
.browse-empty { padding: 16px 0; color: var(--muted); text-align: center; }

/* Vocabulary filter: one row on phones */
.vfilter-row { flex-wrap: nowrap; }
.vfilter-row .toggle-chip { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

/* Touch screens: keyboard shortcuts mean nothing, small links get a real hit area */
@media (hover: none) {
  .fc-hint { display: none; }
}
@media (pointer: coarse) {
  .sort-toggle-btn, .wod-next, .streak-remind-btn, .cat-more-btn, .home-card .link-btn { min-height: 38px; }
  .select-pill { min-height: 38px; }
  .btn-focus { min-height: 36px; min-width: 36px; }
  .vfilter-row .toggle-chip { min-height: 38px; }
  .fc-nav .ghost-btn { min-height: 42px; }
  .vc-check { padding: 9px; margin: -9px -3px -9px -9px; } /* ~36px hit area, same 18px box */
}

/* Filled chips/badges with white text use the button fill (plain --primary is too light for white text in dark mode) */
.toast.new, .nav-badge { background: var(--btn-bg); }
.sort-toggle-btn.active { background: var(--btn-bg); border-color: var(--btn-bg); }
.rm-step.ok .rm-num { color: var(--surface); }
/* <button> does not inherit text colour — tiles were black-on-dark in dark mode */
.x-tile, .icon-btn { color: var(--ink); }
/* Touch: a tapped card must not stay "hovered" */
@media (hover: none) {
  .cat-card:hover, .x-tile:hover, .theory-card:hover, .vc:hover, .browse-item:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border); }
}
:root[data-theme="dark"] .pos-tag { color: var(--ink); }
:root[data-theme="dark"] .i3d { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.3)); } /* dark images (speaking head) vanish on dark cards */
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .pos-tag { color: var(--ink); } :root[data-theme="auto"] .i3d { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.3)); } }

/* ============================================================
   Home C (user tries mockup C, 28/9): a course page — dark banner with the
   whole-course progress, then [course contents list | today, streak, interview
   date, badges]. Narrow screens: one column, today first, streak near the end.
   ============================================================ */
#view-home.active { display: flex; flex-direction: column; gap: 22px; }
#view-home.active > * { margin: 0; }
.home-h { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }

/* Banner — the same deep warm tone in both themes, so its colours are fixed */
.cb { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 30px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; background: #2E2C28; color: #FFFFFF; }
.cb > :not(.cb-art) { position: relative; z-index: 1; max-width: calc(100% - 290px); }
.cb-art { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; pointer-events: none; }
.cb-art .i3d { position: absolute; }
.cb-chef { right: 40px; bottom: -18px; width: 170px; height: 170px; }
.cb-f1 { right: 214px; top: 22px; width: 52px; height: 52px; transform: rotate(-10deg); }
.cb-f2 { right: 214px; top: 96px; width: 40px; height: 40px; transform: rotate(12deg); }
.cb-f3 { right: 22px; top: 18px; width: 44px; height: 44px; }
.cb-eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #E8B79F; }
.cb-title { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: #FFFFFF; text-wrap: balance; }
.cb-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .86rem; color: #D9D6CC; }
.cb-bar { width: 320px; max-width: 100%; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.cb-bar > div { height: 100%; border-radius: 99px; background: #FFFFFF; }
.cb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cb > .cb-actions { max-width: calc(100% - 220px); } /* the buttons may run under the small floating pictures, never under the chef */
.cb-cta { padding: 11px 22px; border: 0; border-radius: 999px; background: #FFFFFF; color: #2E2C28; font: inherit; font-size: .95rem; font-weight: 800; text-align: left; cursor: pointer; transition: transform .15s; }
.cb-cta:hover { transform: translateY(-1px); }
.cb-ghost { padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: transparent; color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer; }
.cb-ghost:hover { background: rgba(255, 255, 255, .1); }
.cb-guide { padding: 2px 0; border: 0; background: none; color: #F2C9B5; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.cb-guide:hover { text-decoration: underline; }
.cb-nudge { font-size: .84rem; color: #D9D6CC; }
.cb-nudge .link-btn { padding: 0; color: #FFFFFF; font-size: inherit; text-decoration: underline; }

/* Two columns: course contents | side cards */
.course-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
.course-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.course-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#view-home .course-side > * { margin: 0; } /* old #homeStreak/#homeOverview margins would double the gap */
.course-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.course-filter { display: flex; gap: 6px; }
.course-filter button { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.course-filter button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); font-weight: 700; }
.course-list { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.course-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--surface2); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.course-row:last-child { border-bottom: 0; }
.course-row.current { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
@media (hover: hover) { .course-row:hover { background: color-mix(in srgb, var(--hue) 6%, var(--surface)); } }
.cr-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--hue) 15%, var(--surface)); }
.cr-img { width: 30px; height: 30px; }
.cr-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-name { font-size: .92rem; font-weight: 700; line-height: 1.3; }
.cr-vi { font-size: .8rem; color: var(--soft-ink); }
.cr-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--btn-bg); color: #FFFFFF; font-size: .75rem; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.cr-chip.ok { background: var(--green-lt); color: var(--green); }
.cr-prog { display: flex; align-items: center; gap: 10px; }
.cr-bar { display: block; width: 140px; height: 6px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.cr-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--hue); }
.cr-num { min-width: 52px; text-align: right; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.course-more { align-self: center; padding: 8px 18px; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.course-more:hover { text-decoration: underline; }
.course-empty { margin: 0; padding: 18px 16px; font-size: .9rem; color: var(--soft-ink); }

/* Side cards */
.side-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; color: var(--ink); }
.side-row { display: flex; align-items: center; gap: 12px; text-align: left; }
.side-ico { width: 34px; height: 34px; }
.side-title { display: block; font-size: .95rem; font-weight: 800; color: var(--ink); }
.side-sub { display: block; font-size: .8rem; line-height: 1.4; color: var(--soft-ink); }
.side-sub b { color: var(--ink); }
.side-big { display: block; font-family: var(--font-mono); font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.today-card { flex-direction: row; align-items: center; gap: 14px; }
.tc-ring { position: relative; flex: none; width: 92px; height: 92px; }
.tc-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.tc-track { fill: none; stroke: var(--surface2); stroke-width: 12; }
.tc-fill { fill: none; stroke: var(--btn-bg); stroke-width: 12; stroke-linecap: round; }
.today-card.done .tc-fill { stroke: var(--green); }
.tc-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.tc-num b { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.tc-num span { font-size: .75rem; font-weight: 600; color: var(--soft-ink); }
.streak-side .streak-days { flex: none; }
.streak-side .streak-lbl { font-size: .72rem; }
.streak-side .streak-remind-btn { align-self: flex-start; }
.streak-side .remind-panel { margin-top: 0; }
.exam-open { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.exam-open:hover .side-title, .exam-open:hover .side-big { color: var(--accent-ink); }
.exam-side .exam-edit { padding-top: 10px; border-top: 1px solid var(--border); font-size: .86rem; font-weight: 600; color: var(--ink); }
.exam-side .exam-form { margin-top: 6px; }
.badge-side { flex-direction: row; align-items: center; gap: 12px; width: 100%; font: inherit; text-align: left; cursor: pointer; }
.badge-side:hover { border-color: var(--primary); }

@media (max-width: 1099px) {
  /* one column: today first, then the course list, then streak / interview / badges */
  .course-grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .course-side { display: contents; }
  #homeOverview { order: 0; }
  .course-main { order: 1; }
  #homeStreak, #homeExam, #homeBadges { order: 2; }
}
@media (max-width: 640px) {
  #view-home.active { gap: 16px; }
  .cb { padding: 18px; border-radius: 18px; }
  .cb > :not(.cb-art) { max-width: none; }
  .cb-art { display: none; }
  .cb-eyebrow { font-size: .75rem; letter-spacing: .06em; }
  .cb-title { font-size: 1.2rem; }
  .cb-actions { width: 100%; }
  .cb-cta { flex: 1 1 100%; }
  .cb-ghost { flex: 1 1 100%; }
  .course-row { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 12px; }
  .cr-ico { grid-row: 1 / span 2; align-self: start; width: 40px; height: 40px; }
  .cr-img { width: 26px; height: 26px; }
  .cr-prog { grid-column: 2; }
  .cr-bar { flex: 1; width: auto; }
}

/* Nhắc học: hướng dẫn "Thêm vào Màn hình chính" cho iPhone + nút thêm vào Lịch */
.remind-lead { margin: 0 0 8px; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.remind-or { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.remind-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.remind-steps small { color: var(--muted); }
.ico-share { width: 18px; height: 18px; vertical-align: -3px; color: #0A84FF; }
.remind-cal { display: inline-flex; align-items: center; gap: 6px; }
@media (pointer: coarse) { .remind-row input[type="time"] { min-height: 40px; font-size: 16px; } }

/* Trang "Ngữ pháp": nhóm ngữ pháp → bài học + bài tập + ví dụ trong câu trả lời */
.gm-page { --soft-ink: color-mix(in srgb, var(--muted) 60%, var(--ink)); }
.gm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gm-group { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .gm-group:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); } }
.gm-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--amber-lt); font-size: 1.4rem; }
.gm-gtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-name { font-weight: 700; line-height: 1.3; }
.gm-meta { font-size: .8rem; color: var(--soft-ink); }
.gm-lesson { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--amber-lt); border: 1px solid color-mix(in srgb, var(--amber) 25%, var(--border)); border-radius: 16px; }
.gm-lesson-text { margin: 0; line-height: 1.6; color: var(--ink); }
.gm-keys { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; color: var(--ink); }
.gm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-actions .primary-btn, .gm-actions .ghost-btn { width: auto; padding: 10px 18px; border-radius: 999px; font-size: .92rem; }
.gm-h { margin: 6px 0 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.gm-list { display: flex; flex-direction: column; gap: 10px; }
.gm-point { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.gm-pattern { font-weight: 700; color: var(--ink); }
.gm-ex { margin-top: 4px; font-style: italic; color: var(--ink); }
.gm-ex .say-btn { vertical-align: middle; margin-left: 2px; }
.gm-vi { margin-top: 4px; line-height: 1.5; color: var(--soft-ink); }
.gm-src { display: block; width: 100%; margin-top: 8px; padding: 6px 0 0; border: 0; border-top: 1px dashed var(--border); background: none; color: var(--accent-ink, var(--primary-dk)); font: inherit; font-size: .82rem; text-align: left; cursor: pointer; }
.gm-src:hover { text-decoration: underline; }
.gm-back { display: inline-flex !important; }
.gm-title { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } /* nút quay lại danh sách nhóm vẫn hiện trên máy tính */

a.nav-item, a.x-tile { text-decoration: none; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===== Nhiều ngành (thiladau.com/<ngành>/): link đổi ngành ===== */
a.ld-link { text-decoration: none; }
.ld-foot a { color: inherit; }
@media (max-width: 520px) { .ld-other { display: none; } }


/* ============================================================
   Mỗi ngành một vẻ (2/10): the server puts data-trade="<id>" on <html>; each occupation sets its accent (--t, and
   --t-dark for the dark theme, both ≥4.5:1 for text and white button labels), its banner tone and a motif of the
   trade (--pat, a black SVG tile used as a mask so it can take any colour). Everything else derives from these.
   ============================================================ */
:root[data-trade="cook"] { --t: #B3532E; --t-dark: #D97757; --t-banner: #2E2C28;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 .5H28M.5 0V28' fill='none' stroke='%23000'/%3E%3C/svg%3E"); }
:root[data-trade="chef"] { --t: #9B2D45; --t-dark: #E58399; --t-banner: #2B1A20;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 0h12v12H0zM12 12h12v12H12z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E"); }
:root[data-trade="baker"] { --t: #8C5A16; --t-dark: #DDA65C; --t-banner: #2C2316;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='%23000'%3E%3Cellipse cx='8' cy='9' rx='2' ry='4.6' transform='rotate%2835 8 9%29'/%3E%3Cellipse cx='24' cy='25' rx='2' ry='4.6' transform='rotate%2835 24 25%29'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-trade="pastrycook"] { --t: #A8326A; --t-dark: #EA86B2; --t-banner: #2E1A26;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M6 8l5 3M25 5l-2 5M15 22l5-1M30 26l-3 4M7 30l1-5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
:root[data-trade="hairdresser"] { --t: #7446AE; --t-dark: #B79AE8; --t-banner: #221B33;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18'%3E%3Cpath d='M0 9Q8 1 16 9T32 9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
:root[data-trade="motor-mechanic"] { --t: #2C5A94; --t-dark: #86AEE8; --t-banner: #17223A;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M20 9l9.5 5.5v11L20 31l-9.5-5.5v-11z'/%3E%3Ccircle cx='20' cy='20' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-trade="electrician"] { --t: #865F00; --t-dark: #E8BC45; --t-banner: #191E2D;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 12h14l8 8v28M48 30H32l-6-6V0' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='14' cy='12' r='2.6'/%3E%3Ccircle cx='32' cy='30' r='2.6'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-trade="welder"] { --t: #136A7C; --t-dark: #62C3D4; --t-banner: #11252A;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 3l1.6 5.4L17 10l-5.4 1.6L10 17l-1.6-5.4L3 10l5.4-1.6z'/%3E%3Cpath d='M32 25l1.1 3.4 3.4 1.1-3.4 1.1L32 34l-1.1-3.4-3.4-1.1 3.4-1.1z'/%3E%3Ccircle cx='34' cy='9' r='1.4'/%3E%3Ccircle cx='12' cy='34' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-trade="carpenter"] { --t: #5B661C; --t-dark: #B6C26A; --t-banner: #222616;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='42'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 8c15 0 15 6 30 6s15-6 30-6'/%3E%3Cpath d='M0 23c15 0 15-5 30-5s15 5 30 5'/%3E%3Cpath d='M0 36c15 0 15 4 30 4s15-4 30-4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-trade] {
  --primary: var(--t); --primary-dk: color-mix(in srgb, var(--t) 86%, #000); --primary-lt: color-mix(in srgb, var(--t) 13%, #fff);
  --btn-bg: var(--t); --blue: var(--t); --blue-lt: var(--primary-lt); --side-active: color-mix(in srgb, var(--t) 14%, #F5F3EC);
}
:root[data-trade][data-theme="dark"] {
  --primary: var(--t-dark); --primary-dk: color-mix(in srgb, var(--t-dark) 85%, #fff); --primary-lt: color-mix(in srgb, var(--t-dark) 18%, #2A2A27);
  --btn-bg: var(--t); --blue: var(--t-dark); --blue-lt: var(--primary-lt); --side-active: color-mix(in srgb, var(--t-dark) 18%, #262521);
}
@media (prefers-color-scheme: dark) {
  :root[data-trade][data-theme="auto"] {
  --primary: var(--t-dark); --primary-dk: color-mix(in srgb, var(--t-dark) 85%, #fff); --primary-lt: color-mix(in srgb, var(--t-dark) 18%, #2A2A27);
  --btn-bg: var(--t); --blue: var(--t-dark); --blue-lt: var(--primary-lt); --side-active: color-mix(in srgb, var(--t-dark) 18%, #262521);
  }
}
.x-play, .x-mic-btn { box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 28%, transparent); }

/* Home banner: the occupation's deep tone, a glow of its accent and its motif */
.cb { background: radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--t-dark, #D97757) 26%, transparent), transparent 62%), var(--t-banner, #2E2C28); }
.cb::before { content: ''; position: absolute; inset: 0; background: #FFFFFF; opacity: .06; pointer-events: none;
  -webkit-mask: var(--pat) repeat; mask: var(--pat) repeat; }
.cb-eyebrow { color: color-mix(in srgb, var(--t-dark, #D97757) 62%, #fff); }
.cb-guide { color: color-mix(in srgb, var(--t-dark, #D97757) 78%, #fff); }
.cb-bar > div { background: var(--t-dark, #FFFFFF); }

/* Landing page: the picture panel and the closing box in the occupation's tint, with its motif */
.ld-hero-art::before, .ld-final { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--surface)), color-mix(in srgb, var(--primary) 6%, var(--surface))); }
.ld-hero-art::after { content: ''; position: absolute; inset: 20px 0 0; z-index: 0; border-radius: 32px; background: var(--primary); opacity: .1;
  -webkit-mask: var(--pat) repeat; mask: var(--pat) repeat; }
.ld-final { position: relative; overflow: hidden; }
.ld-final::before { content: ''; position: absolute; inset: 0; background: var(--primary); opacity: .08; pointer-events: none;
  -webkit-mask: var(--pat) repeat; mask: var(--pat) repeat; }
.ld-final > * { position: relative; }
@media (max-width: 600px) { .ld-hero-art::after { inset: 16px 0 0; border-radius: 22px; } }
/* Phones: the occupation's figure stays in the banner corner (the floating props are left out) */
@media (max-width: 640px) {
  .cb-art { display: block; width: 76px; }
  .cb-f1, .cb-f2, .cb-f3 { display: none; }
  .cb-chef { top: 12px; right: 10px; bottom: auto; width: 62px; height: 62px; }
  .cb > .cb-eyebrow, .cb > .cb-title { max-width: calc(100% - 64px); }
}