/* ==========================================================================
   v172 · "Lush Jade" look — the 2026 redesign (Stitch spec, docs in the zip).
   A skin over the existing app: html.vc-skin-jade. Nothing here changes what a
   button does; remove the class (Settings › App › New look) to get the classic look.
   Palette: emerald #0D9488 / deep jade #047857 on warm off-white #F9F9F6 / #F4F4F1.
   ========================================================================== */
html.vc-skin-jade body:not(.dark-mode){
  --ink:#0B2621;
  --muted:#4A635D;
  --muted-soft:#7c908b;
  --paper:#F4F4F1;
  --paper-dark:#EEEEEB;
  --card:#FFFFFF;
  --card-bg:#F4F4F1;
  --cover:#0F766E; /* v224: teal-700 — white text on it is 5.47:1 (teal-600 was 3.74:1 on every primary button) */
  --cover-light:#047857; /* v225: deep jade — the gradients behind white text (Quick match, Mixed) ended at emerald-500, 2.5:1 at that end */
  --cover-deep:#047857;
  --primary-tint:#E6F7F4;
  --on-cover:#ffffff;
  --gold:#F59E0B;
  --gold-tint:#FEF3C7;
  --stamp:#F43F5E;
  --stamp-light:#fb7185;
  --stamp-tint:#FFE4E6;
  --ok:#0F766E;
  --ok-bg:#E6F7F4;
  --ok-ink:#0b6b62; --bad-ink:#9f1239; --warn-ink:#92400e; --stamp-ink:#be123c; /* v224: text on the tinted backgrounds (≥5:1) */
  --warn:#F59E0B;
  --warn-bg:#FEF3C7;
  --line:rgba(229,229,229,.9);
  --on-accent:#0B2621;
  --radius-sm:14px;
  --radius:20px;
  --radius-lg:28px;
  --shadow-sm:0 1px 2px rgba(11,38,33,.05);
  --shadow:0 1px 3px rgba(11,38,33,.06), 0 8px 24px rgba(11,38,33,.05);
  --shadow-lg:0 20px 48px rgba(11,38,33,.10);
  background:#F9F9F6 !important;
  background-image:none !important;
  color:var(--ink);
}
html.vc-skin-jade body{ font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing:-0.005em; }

/* ---- surfaces: white cards, hairline borders, soft shadows ---- */
html.vc-skin-jade body:not(.dark-mode) .page{ background:#fff; border:1px solid rgba(229,229,229,.6); box-shadow:0 1px 3px rgba(11,38,33,.04), 0 12px 32px rgba(11,38,33,.05); border-radius:28px; }
html.vc-skin-jade .section-title{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
html.vc-skin-jade .section-note{ color:var(--muted); }
html.vc-skin-jade body:not(.dark-mode) :is(.card, .teacher-card, .grammar-card, .deck-card, .mg-card, .hub-card, .ph-card, .ld-row, .st-top, .progress-collapsible, details#learnSettingsDetails, details#learnBrowseDetails){
  border:1px solid rgba(229,229,229,.6) !important;
  box-shadow:0 1px 3px rgba(11,38,33,.04) !important;
}
html.vc-skin-jade :is(.card, .teacher-card, .grammar-card, .deck-card, .st-top){ border-radius:24px; }
html.vc-skin-jade :is(.progress-collapsible, #learnSettingsDetails, #learnBrowseDetails){ border-radius:20px; }
html.vc-skin-jade body:not(.dark-mode) #flashcard.card{ box-shadow:0 2px 6px rgba(11,38,33,.05), 0 16px 36px rgba(11,38,33,.06) !important; }

/* ---- pill buttons; the main button is emerald with a deep-jade "press" edge ---- */
html.vc-skin-jade .check-btn{ border-radius:999px; background:var(--cover); color:var(--on-cover); font-weight:700; letter-spacing:.01em; box-shadow:0 3px 0 var(--cover-deep); border:none; }
html.vc-skin-jade .check-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--cover-deep); }
html.vc-skin-jade body:not(.dark-mode) .skip-btn:not(.dh-go){ border-radius:999px; background:#fff; border:1px solid rgba(229,229,229,.9); color:var(--ink); font-weight:700; }
html.vc-skin-jade body:not(.dark-mode) .skip-btn:hover{ background:#F4F4F1; }
html.vc-skin-jade body:not(.dark-mode) .speak-btn{ border-radius:16px; }
html.vc-skin-jade .card-tools .speak-btn::after{ white-space:nowrap; }
html.vc-skin-jade :is(.cat-chip, .lib-tab, .dialect-btn, .speed-toggle button, .vc-ui-lang-seg button){ border-radius:999px; }
html.vc-skin-jade body:not(.dark-mode) .cat-chip{ background:#F4F4F1; color:var(--ink); }
html.vc-skin-jade body:not(.dark-mode) .cat-chip.active, html.vc-skin-jade body:not(.dark-mode) .dialect-btn.active{ background:var(--cover); color:#fff; }
html.vc-skin-jade body:not(.dark-mode) .lf-f select, html.vc-skin-jade body:not(.dark-mode) .type-input, html.vc-skin-jade body:not(.dark-mode) .teacher-search{ border-radius:16px; border:1px solid rgba(229,229,229,.9); background-color:#fff; }
html.vc-skin-jade body:not(.dark-mode) .stamp{ background:var(--primary-tint); color:var(--cover-deep); }
html.vc-skin-jade body:not(.dark-mode) .learn-due-pill{ background:var(--gold-tint); }
/* grade buttons: soft tinted pills (Again coral · Hard amber · Good emerald · Easy mint) */
html.vc-skin-jade body:not(.dark-mode) #srsRow .srs-btn{ border-radius:18px; font-weight:800; border:none; }
html.vc-skin-jade body:not(.dark-mode) #againBtn{ background:#FFE4E6 !important; color:#be123c !important; box-shadow:inset 0 -3px 0 #fda4af; }
html.vc-skin-jade body:not(.dark-mode) #hardBtn{ background:#FEF3C7 !important; color:#92400e !important; box-shadow:inset 0 -3px 0 #fcd34d; }
html.vc-skin-jade body:not(.dark-mode) #goodBtn{ background:#0f766e !important; color:#fff !important; box-shadow:inset 0 -3px 0 #047857; }
html.vc-skin-jade body:not(.dark-mode) #easyBtn{ background:#99f6e4 !important; color:#064E3B !important; box-shadow:inset 0 -3px 0 #2dd4bf; }
/* v224: the same four pills in dark mode (white on the bright dark tokens was 1.4–2.8:1) */
html.vc-skin-jade body.dark-mode #srsRow .srs-btn{ border-radius:18px; font-weight:800; border:none; }
html.vc-skin-jade body.dark-mode #againBtn{ background:#3a1414 !important; color:#ffb4b4 !important; box-shadow:inset 0 -3px 0 #7f1d1d; }
html.vc-skin-jade body.dark-mode #hardBtn{ background:#3a231e !important; color:#ffc9b8 !important; box-shadow:inset 0 -3px 0 #9a3412; }
html.vc-skin-jade body.dark-mode #goodBtn{ background:var(--cover) !important; color:var(--on-cover) !important; box-shadow:inset 0 -3px 0 #00997a; }
html.vc-skin-jade body.dark-mode #easyBtn{ background:#14302a !important; color:#99f6e4 !important; box-shadow:inset 0 -3px 0 #2dd4bf; }
html.vc-vd body.dark-mode .vd-g-k{ background:rgba(0,0,0,.28); border-color:currentColor; color:inherit; opacity:1; }

/* ---- home: deep-jade hero ---- */
html.vc-skin-jade body:not(.dark-mode) #tab-starthere header.bg-primary{ background:linear-gradient(135deg, #064E3B 0%, #047857 45%, #0f766e 100%) !important; }
html.vc-skin-jade body:not(.dark-mode) .bg-primary{ background-color:#0f766e; }
html.vc-skin-jade body:not(.dark-mode) .text-primary{ color:#047857; }
/* v224: hero labels were 10px at 70–75% white (≈2.5:1); the gold goal count was 1.7:1 on the gradient */
html.vc-skin-jade #homeBanner header .text-\[10px\]{ font-size:12px; }
html.vc-skin-jade #homeBanner header :is(.text-primary-foreground\/70, .text-primary-foreground\/75){ color:rgba(255,255,255,.94); }
html.vc-skin-jade #homeBanner header .text-sunshine{ color:#FDE68A; }
html.vc-skin-jade body:not(.dark-mode) #homeTodayCard{ border:1px solid rgba(229,229,229,.6); border-radius:24px; box-shadow:0 12px 32px rgba(11,38,33,.07); }
html.vc-skin-jade body:not(.dark-mode) .vc-td-go:not(.alt){ background:#0f766e; box-shadow:0 3px 0 #047857; border-radius:999px; }

/* ---- bottom bar (phones): frosted white, emerald active pill ---- */
html.vc-skin-jade body:not(.dark-mode) #bottomNav{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-top:1px solid rgba(229,229,229,.7); }
html.vc-skin-jade body:not(.dark-mode) #bottomNav .bn-btn.active:not(.bn-fab){ background:var(--primary-tint); color:var(--cover-deep); border-radius:16px; }
html.vc-skin-jade body:not(.dark-mode) .bn-fab-circle{ background:linear-gradient(135deg, #10B981, #0D9488); box-shadow:0 6px 16px rgba(13,148,136,.35); }
html.vc-skin-jade body.dark-mode .bn-fab-circle{ background:linear-gradient(135deg, #34d399, #0d9488); border-color:var(--card); box-shadow:0 6px 16px rgba(13,148,136,.45); } /* v224: same accent in dark mode (was classic gold) */

/* ---- header (phones and tablets keep the v172 header) ---- */
html.vc-skin-jade body:not(.dark-mode) .cover-title .account-toggle{ background:#fff; border:1px solid rgba(229,229,229,.9); }
/* v173 designed screens: wide screens only (html.vc-vd = new look AND ≥1024px, set by 228-vd-core.js) */
/* ---- v173: the designed screens (src/js/228-vd-*.js) and their header ---- */
html:not(.vc-vd) .vd{ display:none !important; }
html.vc-vd .vd{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; }
/* the designed header replaces the old title row; the old pieces stay in the page (other code clicks them) */
html.vc-vd .cover-title > :not(#vdHeader){ display:none !important; }
html.vc-vd .cover-title{ position:relative; display:block; padding:0 16px; margin:0 -16px 18px; background:rgba(255,255,255,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(231,229,228,.8); text-align:left; }
html.vc-vd body.dark-mode .cover-title{ background:rgba(10,24,21,.9); border-bottom-color:rgba(255,255,255,.08); }
html.vc-vd #vdHeader{ max-width:1280px; margin:0 auto; }
.vd .vd-nav{ display:none; }
#vcTopNav button.vd-on{ background:#0f766e !important; color:#fff !important; box-shadow:0 1px 2px rgba(0,0,0,.08); }
#vcTopExtras .vd-on-soft{ background:#fff; color:#134e4a; font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.06); }
/* phones: just brand · streak · language · you (the bottom bar has the sections; More is in it) */
/* wide screens: the top navigation with an always-visible More; no bottom bar */
@media (min-width:1024px){
  html.vc-vd .vd .vd-nav{ display:flex; flex:0 1 auto; min-width:0; }
  html.vc-vd body{ padding-top:0 !important; }
  html.vc-vd .cover-title{ position:sticky; top:0; z-index:900; }
  html.vc-vd #bottomNav{ display:none !important; }
  html.vc-vd body{ padding-bottom:0 !important; }
  html.vc-vd .book{ max-width:1280px; }
  html.vc-vd .page{ padding:0 32px 40px; }
  html.vc-vd :is(.ph-grid, .mg-grid, .teacher-grid){ gap:16px; }
  html.vc-vd :is(#tab-settings, #tab-quiz, #tab-match, #tab-build, #tab-cloze, #tab-mix, #tab-reading, #tab-dictionary){ max-width:880px; margin-left:auto; margin-right:auto; }
}
@media (min-width:1024px){ html.vc-vd .page{ background:transparent !important; box-shadow:none !important; border:0 !important; } }
@media (min-width:1024px) and (max-width:1279px){
}
/* Start Here: the designed screen replaces the old banner, continue card and quick-practice grid */
html.vc-vd #homeBanner > :is(header, section){ display:none !important; }


/* ---- Decks (Kho từ): underline tabs like the spec ---- */
html.vc-skin-jade .lib-tabs{ gap:4px; border-bottom:1px solid rgba(229,229,229,.9); margin:16px 0 16px; }
html.vc-skin-jade .lib-tab{ flex:0 0 auto !important; background:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; color:var(--muted) !important; font-weight:700; padding:10px 14px !important; border-bottom:3px solid transparent !important; margin-bottom:-1px; }
html.vc-skin-jade .lib-tab.active{ color:var(--cover-deep) !important; border-bottom-color:var(--cover) !important; }
html.vc-skin-jade body:not(.dark-mode) .teacher-card{ background:#fff; border-top:4px solid var(--cover) !important; }
html.vc-skin-jade body:not(.dark-mode) .ld-row{ border-radius:20px; }

/* ---- Progress: stat tiles as a bento of white cards ---- */
html.vc-skin-jade body:not(.dark-mode) .prog-stat{ background:#fff; border:1px solid rgba(229,229,229,.7); border-radius:22px; box-shadow:0 1px 3px rgba(11,38,33,.04); text-align:left; padding:18px 18px 16px; }
html.vc-skin-jade .prog-num{ font-size:30px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
html.vc-skin-jade .prog-lbl{ color:var(--muted); letter-spacing:.06em; }
html.vc-skin-jade body:not(.dark-mode) .vc-pts-card{ background:linear-gradient(135deg, #064E3B, #0f766e); color:#fff; border:none; border-radius:24px; }
html.vc-skin-jade body:not(.dark-mode) .vc-pts-card .vc-pts-sub{ color:rgba(255,255,255,.85); }
html.vc-skin-jade body:not(.dark-mode) .vc-pts-card .skip-btn{ background:rgba(255,255,255,.95); }
html.vc-skin-jade body:not(.dark-mode) .vc-pts-card .check-btn{ background:#F59E0B; color:#0B2621; box-shadow:0 3px 0 #b45309; }
@media (min-width:1024px){
  html.vc-skin-jade #tab-progress{ max-width:none !important; }
  html.vc-skin-jade .prog-stats{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:14px; }
}
html.vc-skin-jade body:not(.dark-mode) .vc-pts-card .vc-pts-h{ color:#fff; }

/* ---- v173 Flashcards: the real card inside the designed layout ---- */
html.vc-vd #tab-learn:has(#vd-learn) > #learnTitle{ display:none; }
html.vc-vd #vdLearnTiers .cats{ margin:0; }
html.vc-vd #vdLearnTiers:empty, html.vc-vd #vdLearnDue:empty{ display:none; }
html.vc-vd body:not(.dark-mode) #vdLearnTools details{ background:#fff; border:1px solid #e7e5e4; border-radius:24px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin:0; }
html.vc-vd body.dark-mode #vdLearnTools details{ background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:24px; margin:0; } /* v224: was a white box with light text in dark mode */
html.vc-vd body:not(.dark-mode) #vdLearnMain .card-wrap .flashcard{ background:#fff; border:1px solid rgba(231,229,228,.8); border-radius:28px; box-shadow:0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.04); }
@media (min-width:1024px){
  html.vc-vd #tab-learn{ max-width:none !important; }
  html.vc-vd #vdLearnMain .card-wrap .flashcard{ min-height:340px; padding:40px 48px; }
  html.vc-vd #vdLearnMain #flashVn{ font-size:clamp(40px, 4.4vw, 60px); font-weight:800; letter-spacing:-.02em; }
}
html.vc-vd body:not(.dark-mode) #vdLearnMain #showAnswerBtn{ background:#1c1917; color:#fff; border-radius:999px; box-shadow:0 4px 6px -1px rgba(0,0,0,.15); }
html.vc-vd .srs-btn.vd-grade{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border-radius:18px; font-weight:800; line-height:1.2; border:2px solid transparent; box-shadow:none; }
html.vc-vd .vd-g-t{ font-size:14px; font-weight:800; }
html.vc-vd .vd-g-d{ font-size:11px; font-weight:600; opacity:.85; }
html.vc-vd .vd-g-k{ font:600 10px ui-monospace, monospace; padding:1px 6px; border-radius:6px; background:#fff; border:1px solid currentColor; opacity:.7; margin-top:2px; }
html.vc-vd body:not(.dark-mode) .srs-btn.vd-grade-again{ background:#fff1f2 !important; color:#9f1239 !important; border-color:#fecdd3; }
html.vc-vd body:not(.dark-mode) .srs-btn.vd-grade-hard{ background:#fffbeb !important; color:#92400e !important; border-color:#fde68a; }
html.vc-vd body:not(.dark-mode) .srs-btn.vd-grade-good{ background:#0f766e !important; color:#fff !important; border-color:#0f766e; box-shadow:0 4px 6px -1px rgba(13,148,136,.3); }
html.vc-vd body:not(.dark-mode) .srs-btn.vd-grade-good .vd-g-k{ background:#115e59; border-color:#115e59; color:#fff; }
html.vc-vd body:not(.dark-mode) .srs-btn.vd-grade-easy{ background:#ecfdf5 !important; color:#065f46 !important; border-color:#a7f3d0; }
@media (max-width:639px){ html.vc-vd .vd-g-k{ display:none; } html.vc-vd .srs-btn.vd-grade{ padding:8px 4px; } }
html.vc-vd :is(#vdLearnStamp, #vdDiRight) .stamp{ float:none; position:static; margin:0; transform:none; }
html.vc-vd #vdLearnStamp:empty{ display:none; }
@media (max-width:639px){
  html.vc-vd .vd .vd-ph-hide{ display:none !important; }
  html.vc-vd #vd-learn > .space-y-6 > * + *{ margin-top:12px; }
  html.vc-vd #vd-learn #vdLearnMain > * + *{ margin-top:0; }
  html.vc-vd #vdLearnTiers .cats{ flex-wrap:nowrap; overflow-x:auto; }
}
/* ---- v173 Practice: the designed gym lists every mode, so the old list steps aside ---- */
html.vc-vd #tab-drills:has(#vd-drills) > :not(#vd-drills):not(style){ display:none !important; }
@media (min-width:1024px){ html.vc-vd #tab-drills{ max-width:none !important; } }
/* ---- v173 Rooms + Teachers: designed header on the hub; out of the way inside a room or panel ---- */
html.vc-vd :is(#tab-practice:has(#vd-practice), #tab-teachers:has(#vd-teachers)) > :is(h2.section-title, .section-note){ display:none !important; }
html.vc-vd #tab-practice:has(:is(#prFriendsPanel, #homeworkPanel, #sessionsPanel, #bookingsPanel, #studentsPanel, #dmThreadView, #groupRoomView, #practiceQueueBox, #practiceRoomView):not([style*="none"])) #vd-practice{ display:none !important; }
html.vc-vd #vd-practice, html.vc-vd #vd-teachers{ margin-bottom:18px; }
@media (min-width:1024px){ html.vc-vd :is(#tab-practice, #tab-teachers){ max-width:none !important; } }
/* ---- v173 Decks + Progress ---- */
html.vc-vd :is(#tab-decks:has(#vd-decks), #tab-progress:has(#vd-progress)) > :is(h2.section-title, .section-note){ display:none !important; }
html.vc-vd #tab-decks:has(#vd-decks) :is(#deckSearch, #libSearch){ display:none !important; }
html.vc-vd #vd-decks, html.vc-vd #vd-progress{ margin-bottom:12px; }
@media (min-width:1024px){ html.vc-vd #tab-decks{ max-width:none !important; } }
html.vc-vd #tab-decks:has(#vd-decks) #myDecksPanel > div:has(> #deckCreateBtn){ display:none !important; }
html.vc-vd #tab-progress:has(#vd-progress) #progressBody > :is(.prog-stats, #pStatsDirection){ display:none !important; }
html.vc-vd #vdHomePath #homeTodayCard{ margin:0 !important; }
html.vc-vd #vdHomeTour #homeTourBtn{ color:#ccfbf1 !important; margin:0 !important; padding:4px !important; font-size:12px; }
html.vc-vd #vdHomeTour:empty{ display:none; }
/* focus mode: only the card, as before */
html.vc-vd body.focus-mode :is(#vdLearnBar, #vdLearnSide){ display:none !important; }
html.vc-vd body.focus-mode #vd-learn > .vd-wrap > .grid{ display:block; }
html.vc-vd body.focus-mode #vd-learn > .vd-wrap > * + *{ margin-top:0; }
/* ---- v173 designed screens in dark mode: same layout, dark surfaces ---- */
body.dark-mode .vd{ color:#e7e5e4; }
body.dark-mode .vd :is(.bg-white, .bg-stone-50){ background-color:#11231f; }
body.dark-mode .vd :is(.bg-stone-100, .bg-stone-200){ background-color:#1a322c; }
body.dark-mode .vd .text-stone-900{ color:#f5f5f4; } body.dark-mode .vd .text-stone-800{ color:#e7e5e4; } body.dark-mode .vd .text-stone-700{ color:#d6d3d1; }
body.dark-mode .vd :is(.text-stone-600, .text-stone-500){ color:#a8a29e; } body.dark-mode .vd .text-stone-400{ color:#8a847f; }
body.dark-mode .vd :is(.border-stone-200, .border-stone-100, .border-stone-300){ border-color:rgba(255,255,255,.1); }
body.dark-mode .vd .hover\:bg-stone-100:hover, body.dark-mode .vd .hover\:bg-stone-200:hover{ background-color:#223d36; }
body.dark-mode .vd .text-teal-950, body.dark-mode .vd .text-amber-950{ color:#0c0a09; }
body.dark-mode .vd .bg-teal-50{ background-color:rgba(45,212,191,.12); } body.dark-mode .vd .bg-teal-100{ background-color:rgba(45,212,191,.2); }
body.dark-mode .vd :is(.text-teal-700, .text-teal-800, .text-teal-900, .text-teal-600){ color:#5eead4; }
body.dark-mode .vd :is(.border-teal-100, .border-teal-200, .border-teal-300){ border-color:rgba(45,212,191,.35); }
body.dark-mode .vd .bg-emerald-50{ background-color:rgba(52,211,153,.12); } body.dark-mode .vd .bg-emerald-100{ background-color:rgba(52,211,153,.2); }
body.dark-mode .vd :is(.text-emerald-700, .text-emerald-800, .text-emerald-900, .text-emerald-600){ color:#6ee7b7; }
body.dark-mode .vd :is(.border-emerald-100, .border-emerald-200, .border-emerald-300){ border-color:rgba(52,211,153,.35); }
body.dark-mode .vd .bg-amber-50{ background-color:rgba(251,191,36,.12); } body.dark-mode .vd .bg-amber-100{ background-color:rgba(251,191,36,.2); }
body.dark-mode .vd :is(.text-amber-700, .text-amber-800, .text-amber-900, .text-amber-600){ color:#fcd34d; }
body.dark-mode .vd :is(.border-amber-100, .border-amber-200, .border-amber-300){ border-color:rgba(251,191,36,.35); }
body.dark-mode .vd .bg-rose-50{ background-color:rgba(251,113,133,.12); } body.dark-mode .vd .bg-rose-100{ background-color:rgba(251,113,133,.2); }
body.dark-mode .vd :is(.text-rose-700, .text-rose-800, .text-rose-900, .text-rose-600){ color:#fda4af; }
body.dark-mode .vd :is(.border-rose-100, .border-rose-200, .border-rose-300){ border-color:rgba(251,113,133,.35); }
body.dark-mode .vd .bg-cyan-50{ background-color:rgba(34,211,238,.12); } body.dark-mode .vd .bg-cyan-100{ background-color:rgba(34,211,238,.2); }
body.dark-mode .vd :is(.text-cyan-700, .text-cyan-800, .text-cyan-900, .text-cyan-600){ color:#67e8f9; }
body.dark-mode .vd :is(.border-cyan-100, .border-cyan-200, .border-cyan-300){ border-color:rgba(34,211,238,.35); }
body.dark-mode .vd .bg-violet-50{ background-color:rgba(167,139,250,.12); } body.dark-mode .vd .bg-violet-100{ background-color:rgba(167,139,250,.2); }
body.dark-mode .vd :is(.text-violet-700, .text-violet-800, .text-violet-900, .text-violet-600){ color:#c4b5fd; }
body.dark-mode .vd :is(.border-violet-100, .border-violet-200, .border-violet-300){ border-color:rgba(167,139,250,.35); }
body.dark-mode .vd .bg-sky-50{ background-color:rgba(56,189,248,.12); } body.dark-mode .vd .bg-sky-100{ background-color:rgba(56,189,248,.2); }
body.dark-mode .vd :is(.text-sky-700, .text-sky-800, .text-sky-900, .text-sky-600){ color:#7dd3fc; }
body.dark-mode .vd :is(.border-sky-100, .border-sky-200, .border-sky-300){ border-color:rgba(56,189,248,.35); }
body.dark-mode .vd .bg-red-50{ background-color:rgba(248,113,113,.12); } body.dark-mode .vd .bg-red-100{ background-color:rgba(248,113,113,.2); }
body.dark-mode .vd :is(.text-red-700, .text-red-800, .text-red-900, .text-red-600){ color:#fca5a5; }
body.dark-mode .vd :is(.border-red-100, .border-red-200, .border-red-300){ border-color:rgba(248,113,113,.35); }
body.dark-mode .vd .bg-orange-50{ background-color:rgba(251,146,60,.12); } body.dark-mode .vd .bg-orange-100{ background-color:rgba(251,146,60,.2); }
body.dark-mode .vd :is(.text-orange-700, .text-orange-800, .text-orange-900, .text-orange-600){ color:#fdba74; }
body.dark-mode .vd :is(.border-orange-100, .border-orange-200, .border-orange-300){ border-color:rgba(251,146,60,.35); }
body.dark-mode .vd :is(.bg-teal-700, .bg-teal-600, .bg-teal-800) :is(.text-white){ color:#fff; }
body.dark-mode .vd .from-teal-800 .bg-white{ background-color:#f5f5f4; } body.dark-mode .vd .from-teal-800 .bg-white.text-teal-900{ color:#134e4a; }
body.dark-mode .vd.vd-header{ color:#e7e5e4; }
body.dark-mode .vd :is(.from-amber-50, .from-teal-50){ --vd-from:#11231f; } body.dark-mode .vd .via-white{ --vd-via:#132824; } body.dark-mode .vd :is(.to-teal-50, .to-white){ --vd-to:#0f201c; }
html.vc-vd #vdHeader .account-toggle{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:999px; }
/* phones: things scrolled into view (focus, links, find-in-page) stop above the bottom bar */
@media (max-width:1023px){ html.vc-vd{ scroll-padding-bottom:96px; } }
html.vc-vd #vdHeader #uiLangToggle{ background:#fff; border:1px solid #e7e5e4; color:#44403c; font:700 12px 'Plus Jakarta Sans', sans-serif; padding:0 12px; gap:4px; cursor:pointer; }
html.vc-vd #vdHeader #accountToggle{ width:38px; padding:0; background:#ccfbf1; border:1px solid #5eead4; color:#115e59; font:800 13px 'Plus Jakarta Sans', sans-serif; cursor:pointer; overflow:hidden; }
html.vc-vd body.dark-mode #vdHeader #uiLangToggle{ background:#11231f; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
html.vc-vd body.dark-mode #vdHeader #accountToggle{ background:rgba(45,212,191,.18); border-color:rgba(45,212,191,.4); color:#5eead4; }

/* header fits itself: 228-vd-core.js measures and steps through these until nothing overlaps */
.vd .vd-dialect{ display:flex; }
#vcTopNav .vd-short{ display:none; }
#vdHeader.vd-fit-1 .vd-brand-words{ display:none !important; }
#vdHeader.vd-fit-2 #vcTopNav .vd-long{ display:none; } #vdHeader.vd-fit-2 #vcTopNav .vd-short{ display:inline; }
#vdHeader.vd-fit-3 .vd-pill-level{ display:none !important; }
#vdHeader.vd-fit-4 .vd-dialect{ display:none !important; }
#vdHeader.vd-fit-5 .vd-pill-xp{ display:none !important; }
#vdHeader.vd-fit-6 #vcTopNav button{ padding-left:10px !important; padding-right:10px !important; }
#vdHeader.vd-fit-6 .vd-admin-word, #vdHeader.vd-fit-6 .vd-teach-word{ display:none; }
#vdHeader.vd-fit-7 .vd-pill-streak > span + span{ display:none; }
#vdHeader.vd-fit-8 #vcTopNav button{ padding-left:7px !important; padding-right:7px !important; font-size:12px !important; }
#vdHeader.vd-fit-8 #vcTopNav{ gap:0 !important; }
html.vc-vd .vd .hl-teach{ background:linear-gradient(90deg,#fffbeb,#fff) !important; border:1px solid #fcd34d !important; border-radius:20px; padding:14px 18px; margin:0 !important; box-shadow:0 1px 2px rgba(0,0,0,.04); }
/* v179: designed Teacher Portal (wide screens, new look) */
html.vc-vd .vd .vd-tp-queue .tp-att{ padding:12px 14px; border:1px solid #e7e5e4; border-radius:16px; background:#fafaf9; margin-bottom:8px; border-bottom:1px solid #e7e5e4; }
html.vc-vd .vd .vd-tp-queue .tp-att:last-child{ margin-bottom:0; }
html.vc-vd .vd .vd-tp-queue .tp-att button{ border-radius:999px; font-weight:700; }
html.vc-vd .vd .vd-tp-av .tp-av{ border-radius:50%; object-fit:cover; display:inline-flex; align-items:center; justify-content:center; background:#ccfbf1; color:#0f766e; font-weight:800; }
html.vc-vd .vd .tp-step summary{ list-style:none; } html.vc-vd .vd .tp-step summary::-webkit-details-marker{ display:none; }

/* ---- v180 · practice modes: Quiz · Sentences · Pairs · Blanks (Stitch screens 8–11, wide screens) ---- */
@media (min-width:1024px){
  html.vc-vd :is(#tab-quiz, #tab-match, #tab-build, #tab-cloze){ max-width:1120px; }
}
/* the old heading, note and "All practice" chip are replaced by the designed head + breadcrumb */
html.vc-vd :is(#tab-quiz, #tab-match, #tab-build, #tab-cloze) > :is(.section-title, .section-note, .dh-back, h3.review-title){ display:none !important; }
html.vc-vd .vd .vd-kbd{ font:700 11px ui-monospace, Menlo, Consolas, monospace; background:#f5f5f4; border:1px solid #e7e5e4; border-bottom-width:2px; border-radius:6px; padding:2px 8px; color:#44403c; white-space:nowrap; }
/* mode switch = segmented pill */
html.vc-vd .vd .mode-toggle{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; background:#f5f5f4; padding:4px; border-radius:999px; margin:0; }
html.vc-vd .vd .mode-toggle button{ flex:0 0 auto; background:transparent; color:#57534e; padding:8px 14px; font-size:12px; white-space:nowrap; }
html.vc-vd .vd .mode-toggle button:hover{ color:#0b2621; background:#fff; }
html.vc-vd .vd .mode-toggle button.active{ background:#0f766e; color:#fff; box-shadow:0 1px 3px rgba(13,148,136,.35); }
/* progress strip chips (score, missed, level, moves, timer) */
html.vc-vd .vd .vd-chips .quiz-meta{ margin:0; gap:8px; align-items:center; }
html.vc-vd .vd .vd-chips :is(.quiz-meta > span:not(.diff-badge), #matchTimer){ display:inline-flex; align-items:center; margin:0; padding:6px 12px; border-radius:999px; background:#fafaf9; border:1px solid #e7e5e4; font-size:12px; font-weight:700; color:#44403c; white-space:nowrap; font-variant-numeric:tabular-nums; }
html.vc-vd .vd .vd-chips #matchTimer:empty{ display:none; }
html.vc-vd .vd .vd-chips .diff-badge{ float:none !important; margin:0; padding:6px 12px; background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
/* question card */
html.vc-vd .vd .quiz-q{ display:block; font-size:30px; line-height:1.2; padding:22px 24px; margin:0 0 16px; min-height:84px; background:#f5f5f4; border-radius:20px; }
/* answers: 2-up cards with a letter bubble */
html.vc-vd .vd :is(#quizOpts, #clozeOpts){ counter-reset:vdopt; }
html.vc-vd .vd :is(#quizOpts, #clozeOpts):not([style*="none"]){ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
html.vc-vd .vd :is(#quizOpts, #clozeOpts) .opt{ position:relative; display:block; margin:0; min-height:64px; padding:18px 16px 18px 60px; border:2px solid #e7e5e4; border-radius:18px; background:#fff; font-size:15px; line-height:1.35; counter-increment:vdopt; }
html.vc-vd .vd :is(#quizOpts, #clozeOpts) .opt::before{ content:counter(vdopt, upper-alpha); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:#f5f5f4; border:1px solid #e7e5e4; color:#57534e; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
html.vc-vd .vd :is(#quizOpts, #clozeOpts) .opt:hover:not(:disabled){ border-color:#5eead4; background:#f0fdfa; }
html.vc-vd .vd :is(#quizOpts, #clozeOpts) .opt.correct{ background:#ecfdf5; border-color:#10b981; color:#065f46; }
html.vc-vd .vd :is(#quizOpts, #clozeOpts) .opt.correct::before{ content:'✓'; background:#10b981; border-color:#10b981; color:#fff; }
html.vc-vd .vd :is(#quizOpts, #clozeOpts) .opt.wrong{ background:#fff1f2; border-color:#fb7185; color:#9f1239; }
html.vc-vd .vd :is(#quizOpts, #clozeOpts) .opt.wrong::before{ content:'✕'; background:#fb7185; border-color:#fb7185; color:#fff; }
html.vc-vd .vd #quizTypeWrap{ margin-top:4px; }
/* continue button */
html.vc-vd .vd :is(#vdQzMain, #vdClMain) .nav-row{ justify-content:flex-end; margin-top:8px !important; }
html.vc-vd .vd :is(#nextQuiz, #nextCloze){ background:#0f766e; color:#fff; padding:14px 26px; font-size:15px; font-weight:800; box-shadow:0 4px 0 #115e59; }
html.vc-vd .vd :is(#nextQuiz, #nextCloze)::after{ content:'Enter ↵'; margin-left:12px; padding:2px 8px; border-radius:8px; background:rgba(255,255,255,.18); font-size:10px; font-weight:800; letter-spacing:.04em; }
html.vc-vd .vd :is(#quizStreak, #clozeStreak){ display:none; }
/* fill in the blank */
html.vc-vd .vd #vdClMain .grammar-card{ margin:0 0 4px !important; padding:22px 24px; background:#f0fdfa; border:1px solid #99f6e4 !important; border-radius:20px; box-shadow:none !important; }
html.vc-vd .vd #clozeSentence{ font-size:26px !important; line-height:1.5 !important; }
/* build the sentence */
html.vc-vd .vd #buildEn{ font-size:22px; font-weight:800; line-height:1.35; text-transform:none; letter-spacing:-.01em; color:#0b2621; background:#f5f5f4; border-radius:20px; padding:18px 22px; margin:0 0 12px; }
html.vc-vd .vd .build-zone{ min-height:84px; border:2px dashed #99f6e4; background:#f0fdfa; border-radius:20px; padding:16px; }
html.vc-vd .vd .bank .word-chip{ border:2px solid #e7e5e4; border-radius:14px; }
html.vc-vd .vd #vdBdGram .grammar-card{ margin:0; border-radius:24px; }
/* match pairs */
html.vc-vd .vd #matchGrid{ gap:12px !important; margin-bottom:6px !important; }
html.vc-vd .vd .match-card{ min-height:92px; border:2px solid #e7e5e4; border-radius:18px; font-size:13px; padding:10px 8px; }
html.vc-vd .vd .match-card.vn-side{ font-size:17px; }
html.vc-vd .vd .match-card:hover:not(.matched){ border-color:#5eead4; }
html.vc-vd .vd .match-card.selected{ border-color:#0d9488; background:#f0fdfa; box-shadow:0 0 0 3px rgba(13,148,136,.2); }
html.vc-vd .vd .match-card.matched{ opacity:.7; background:#ecfdf5; border-color:#10b981; }
html.vc-vd .vd #vdMtMain .nav-row{ justify-content:flex-start; gap:10px; }
/* dark mode */
body.dark-mode .vd .vd-kbd{ background:#1a322c; border-color:rgba(255,255,255,.14); color:#e7e5e4; }
body.dark-mode .vd .mode-toggle{ background:#1a322c; }
body.dark-mode .vd .mode-toggle button{ color:#a8a29e; }
body.dark-mode .vd .mode-toggle button:hover{ background:#223d36; color:#f5f5f4; }
body.dark-mode .vd :is(.quiz-q, #buildEn){ background:#1a322c; color:#f5f5f4; }
body.dark-mode .vd .vd-chips :is(.quiz-meta > span:not(.diff-badge), #matchTimer){ background:#1a322c; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd .vd-chips .diff-badge{ background:rgba(251,191,36,.18); border-color:rgba(251,191,36,.35); color:#fcd34d; }
body.dark-mode .vd :is(#quizOpts, #clozeOpts) .opt{ background:#11231f; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd :is(#quizOpts, #clozeOpts) .opt::before{ background:#1a322c; border-color:rgba(255,255,255,.14); color:#d6d3d1; }
body.dark-mode .vd :is(#quizOpts, #clozeOpts) .opt:hover:not(:disabled){ background:#16302a; border-color:#2dd4bf; }
body.dark-mode .vd :is(#quizOpts, #clozeOpts) .opt.correct{ background:rgba(52,211,153,.16); border-color:#34d399; color:#6ee7b7; }
body.dark-mode .vd :is(#quizOpts, #clozeOpts) .opt.wrong{ background:rgba(251,113,133,.14); border-color:#fb7185; color:#fda4af; }
body.dark-mode .vd #vdClMain .grammar-card{ background:rgba(45,212,191,.1); border-color:rgba(45,212,191,.35) !important; }
body.dark-mode .vd .build-zone{ background:rgba(45,212,191,.08); border-color:rgba(45,212,191,.35); }
body.dark-mode .vd .bank .word-chip{ background:#11231f; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd .match-card{ background:#11231f; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd .match-card.selected{ background:#16302a; border-color:#2dd4bf; }
body.dark-mode .vd .match-card.matched{ background:rgba(52,211,153,.16); border-color:#34d399; }
html.vc-vd .vd .vd-chips .quiz-meta > :is(#matchStats, #clozeStreakDisplay){ display:none; }
html.vc-vd .vd #vdClMain .grammar-card{ margin-bottom:16px !important; }
html.vc-vd .vd #vdMtCats .cats{ max-height:110px; overflow-y:auto; margin:0; padding:2px; }
html.vc-vd .vd #vdMtMain .nav-row button{ background:#f5f5f4; border:1px solid #e7e5e4; color:#0b2621; padding:10px 18px; border-radius:999px; font-size:13px; font-weight:700; }
html.vc-vd .vd #vdMtMain .nav-row button.active{ background:#0f766e; border-color:#0f766e; color:#fff; }
body.dark-mode .vd #vdMtMain .nav-row button{ background:#1a322c; border-color:rgba(255,255,255,.12); color:#e7e5e4; }

/* ---- v181 · Dictionary · Reading · Idioms & Slang · Survival · Settings (Stitch screens 13, 18–21, wide screens) ---- */
@media (min-width:1024px){
  html.vc-vd :is(#tab-dictionary, #tab-reading, #tab-idioms, #tab-survival, #tab-settings){ max-width:1120px; }
}
html.vc-vd :is(#tab-dictionary, #tab-reading, #tab-idioms, #tab-survival, #tab-settings) > :is(.section-title, .section-note){ display:none !important; }
/* small shared pieces */
html.vc-vd .vd .vd-keybtn{ min-width:36px; height:36px; padding:0 10px; border-radius:10px; background:#fafaf9; border:1px solid #e7e5e4; border-bottom-width:2px; font-size:16px; font-weight:700; color:#0b2621; cursor:pointer; }
html.vc-vd .vd .vd-keybtn:hover{ background:#f0fdfa; border-color:#5eead4; }
html.vc-vd .vd .vd-search, html.vc-vd .vd #vdDiInput #dictTabInput{ display:block; width:100%; box-sizing:border-box; margin:0 !important; padding:13px 20px; font-size:16px; border:2px solid #e7e5e4; border-radius:999px; background:#fafaf9; color:#0b2621; outline:none; }
html.vc-vd .vd #vdDiInput #dictTabInput{ font-size:18px; padding:15px 22px; }
html.vc-vd .vd .vd-search:focus, html.vc-vd .vd #vdDiInput #dictTabInput:focus{ border-color:#0d9488; background:#fff; box-shadow:0 0 0 4px rgba(13,148,136,.15); }
html.vc-vd .vd #vdDiCount{ font-weight:600; }
html.vc-vd .vd .vd-st-sandbox{ margin-top:10px; }
.vd-st-sandbox{ display:none; }
html.vc-vd .vd-st-sandbox{ display:block; }
/* dictionary results */
html.vc-vd .vd #vdDiMain #dictTabResults > .section-note{ margin:0; padding:26px 8px; text-align:center; color:#78716c; font-size:14px; }
html.vc-vd .vd #vdDiMain .nav-row{ align-items:center; gap:12px; padding:12px 14px; margin:0 0 8px; border:1px solid #e7e5e4; border-radius:16px; background:#fafaf9; }
html.vc-vd .vd #vdDiMain .nav-row:hover{ border-color:#5eead4; background:#f0fdfa; }
/* reading */
html.vc-vd .vd #vdRdPick select{ border-radius:999px; background:#fff; border:2px solid #e7e5e4; padding:11px 18px; font-weight:700; }
html.vc-vd .vd #vdRdPick > div{ margin:0 !important; }
html.vc-vd .vd #vdRdMain .grammar-card{ margin:0; padding:26px 28px; border-radius:24px; }
html.vc-vd .vd #vdRdMain #readingTitle{ font-size:22px; font-weight:800; letter-spacing:-.01em; }
html.vc-vd .vd #vdRdMain .reading-line{ padding:14px 16px; border-radius:0; }
html.vc-vd .vd #vdRdMain .reading-vn{ font-size:19px; line-height:1.55; }
html.vc-vd .vd #vdRdRight .skip-btn{ margin:0 !important; border-radius:999px; padding:10px 18px; }
/* idioms & survival grids */
html.vc-vd .vd :is(#vdIdMain, #vdSvMain) .survival-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin:0; }
html.vc-vd .vd #vdSvMain .survival-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
html.vc-vd .vd :is(#vdIdMain, #vdSvMain) .survival-card{ margin:0; border:1px solid #e7e5e4; border-radius:18px; background:#fafaf9; padding:16px; }
html.vc-vd .vd :is(#vdIdMain, #vdSvMain) .survival-card:hover{ border-color:#5eead4; background:#f0fdfa; }
html.vc-vd .vd :is(#vdIdKinds, #vdIdRegions, #vdSvCats) .cats{ margin:0; }
html.vc-vd .vd #vdIdRegions .cats{ margin-top:2px; }
/* show-your-screen overlay (Survival) */
.vd-showscreen{ position:fixed; inset:0; z-index:9900; background:#0b2621; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:32px; text-align:center; cursor:pointer; }
.vd-show-vn{ font-size:clamp(40px, 9vw, 96px); font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.vd-show-en{ font-size:clamp(18px, 3vw, 30px); color:#99f6e4; }
.vd-show-x{ margin-top:12px; padding:12px 28px; border-radius:999px; border:2px solid rgba(255,255,255,.4); background:transparent; color:#fff; font-weight:700; font-size:15px; cursor:pointer; }
/* settings */
html.vc-vd .vd :is(#vdStTop, #vdStLearn, #vdStData, #vdStApp) > :is(.st-top, details.st-group){ margin:0; padding:24px; background:#fff; border:1px solid #e7e5e4; border-radius:24px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
html.vc-vd .vd details.st-group > summary{ list-style:none; pointer-events:none; cursor:default; font-size:18px; font-weight:800; letter-spacing:-.01em; color:#0b2621; padding:0 0 14px; margin:0 0 16px; border-bottom:1px solid #f0efed; }
html.vc-vd .vd details.st-group > summary::-webkit-details-marker, html.vc-vd .vd details.st-group > summary::marker{ display:none; content:''; }
html.vc-vd .vd details.st-group > summary::after{ display:none !important; }
html.vc-vd .vd details.st-group > .progress-collapsible-body{ padding:0; }
html.vc-vd .vd .st-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#57534e; }
html.vc-vd .vd .st-top{ gap:18px; }
html.vc-vd .vd .st-h{ margin:22px 0 8px; font-size:15px; font-weight:800; color:#0b2621; }
/* accent = three tiles */
html.vc-vd .vd #dialectSelector{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px !important; }
html.vc-vd .vd #dialectSelector .dialect-btn{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:78px; padding:14px 14px 12px; border-radius:16px; border:2px solid #e7e5e4; background:#fafaf9; color:#0b2621; font-size:16px; font-weight:800; text-align:left; }
html.vc-vd .vd #dialectSelector .dialect-btn::after{ font-size:11px; font-weight:600; color:#78716c; }
html.vc-vd .vd #dialectSelector [data-dialect="north"]::after{ content:'Hà Nội'; }
html.vc-vd .vd #dialectSelector [data-dialect="central"]::after{ content:'Huế · Đà Nẵng'; }
html.vc-vd .vd #dialectSelector [data-dialect="south"]::after{ content:'Sài Gòn'; }
html.vc-vd .vd #dialectSelector .dialect-btn:hover{ border-color:#5eead4; }
html.vc-vd .vd #dialectSelector .dialect-btn.active{ background:#f0fdfa; border-color:#0d9488; color:#0f766e; box-shadow:0 0 0 3px rgba(13,148,136,.15); }
html.vc-vd .vd #dialectSelector .dialect-btn.active::after{ color:#0f766e; }
html.vc-vd .vd #dialectSelector .dialect-btn.active::before{ content:'✓'; position:absolute; top:10px; right:12px; font-size:13px; color:#0d9488; }
html.vc-vd .vd .st-top .speed-toggle{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; background:#f5f5f4; padding:5px; border-radius:999px; }
html.vc-vd .vd .st-top .speed-toggle button{ background:transparent; border:none; border-radius:999px; font-weight:700; }
html.vc-vd .vd .st-top .speed-toggle button.active{ background:#0f766e; color:#fff; box-shadow:0 1px 3px rgba(13,148,136,.35); }
html.vc-vd .vd #vnInputToggle{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; background:none; padding:0; }
html.vc-vd .vd #vnInputToggle button{ padding:14px 12px; border-radius:16px; border:2px solid #e7e5e4; background:#fafaf9; font-weight:800; }
html.vc-vd .vd #vnInputToggle button.active{ background:#f0fdfa; border-color:#0d9488; color:#0f766e; }
html.vc-vd .vd :is(#vdStLearn, #vdStData, #vdStApp) .skip-btn{ border-radius:999px; }
/* dark mode */
body.dark-mode .vd .vd-keybtn{ background:#1a322c; border-color:rgba(255,255,255,.14); color:#e7e5e4; }
body.dark-mode .vd .vd-keybtn:hover{ background:#223d36; border-color:#2dd4bf; }
body.dark-mode .vd :is(.vd-search, #vdDiInput #dictTabInput){ background:#11231f; border-color:rgba(255,255,255,.14); color:#f5f5f4; }
body.dark-mode .vd :is(.vd-search, #vdDiInput #dictTabInput):focus{ background:#16302a; border-color:#2dd4bf; box-shadow:0 0 0 4px rgba(45,212,191,.18); }
body.dark-mode .vd #vdDiMain .nav-row, body.dark-mode .vd :is(#vdIdMain, #vdSvMain) .survival-card{ background:#11231f; border-color:rgba(255,255,255,.12); }
body.dark-mode .vd #vdDiMain .nav-row:hover, body.dark-mode .vd :is(#vdIdMain, #vdSvMain) .survival-card:hover{ background:#16302a; border-color:#2dd4bf; }
body.dark-mode .vd #vdRdPick select{ background:#11231f; border-color:rgba(255,255,255,.14); color:#f5f5f4; }
body.dark-mode .vd :is(#vdStTop, #vdStLearn, #vdStData, #vdStApp) > :is(.st-top, details.st-group){ background:#11231f; border-color:rgba(255,255,255,.12); }
body.dark-mode .vd details.st-group > summary{ color:#f5f5f4; border-bottom-color:rgba(255,255,255,.1); }
body.dark-mode .vd :is(.st-label, .st-h){ color:#d6d3d1; }
body.dark-mode .vd #dialectSelector .dialect-btn, body.dark-mode .vd #vnInputToggle button{ background:#16302a; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd #dialectSelector .dialect-btn::after{ color:#a8a29e; }
body.dark-mode .vd #dialectSelector .dialect-btn.active, body.dark-mode .vd #vnInputToggle button.active{ background:rgba(45,212,191,.14); border-color:#2dd4bf; color:#5eead4; }
body.dark-mode .vd .st-top .speed-toggle{ background:#1a322c; }
body.dark-mode .vd .st-top .speed-toggle button{ color:#a8a29e; }

html.vc-vd .vd .vd-more-btn{ display:block; width:100%; margin-top:14px; padding:13px 18px; border-radius:999px; border:2px dashed #99f6e4; background:#f0fdfa; color:#0f766e; font-size:14px; font-weight:800; cursor:pointer; }
html.vc-vd .vd .vd-more-btn:hover{ background:#ccfbf1; }
body.dark-mode .vd .vd-more-btn{ background:rgba(45,212,191,.1); border-color:rgba(45,212,191,.4); color:#5eead4; }
/* English voice choices: a 2×2 grid of tiles instead of four pills */
html.vc-vd .vd #stGroupLearning div:has(> .en-voice-choice-btn){ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px !important; }
html.vc-vd .vd #stGroupLearning .en-voice-choice-btn, html.vc-vd .vd #stGroupLearning #testEnVoiceBtn{ border-radius:16px; padding:14px 12px; flex:none !important; }
html.vc-vd .vd #stGroupLearning .en-voice-choice-btn.active{ background:#f0fdfa; border-color:#0d9488; color:#0f766e; }
body.dark-mode .vd #stGroupLearning .en-voice-choice-btn.active{ background:rgba(45,212,191,.14); border-color:#2dd4bf; color:#5eead4; }
body.dark-mode .vd :is(#vdStTop, #vdStLearn, #vdStData, #vdStApp) .skip-btn{ background:#16302a; border:1px solid rgba(255,255,255,.14); color:#e7e5e4; }
body.dark-mode .vd :is(#vdStTop, #vdStLearn, #vdStData, #vdStApp) .skip-btn:hover{ border-color:#2dd4bf; }
body.dark-mode .vd :is(#vdStTop, #vdStLearn, #vdStData, #vdStApp) .skip-btn.active{ background:rgba(45,212,191,.16); border-color:#2dd4bf; color:#5eead4; }
body.dark-mode .vd :is(#vdStLearn, #vdStData, #vdStApp) .check-btn{ background:#0f766e; color:#fff; border-color:#0f766e; }
body.dark-mode .vd :is(#vdStTop, #vdStLearn, #vdStData, #vdStApp) :is(select, .type-input){ background:#11231f; border-color:rgba(255,255,255,.14); color:#f5f5f4; }
body.dark-mode .vd :is(#vdRdMain, #vdRdRight, #vdDiMain) .skip-btn{ background:#16302a; border:1px solid rgba(255,255,255,.14); color:#e7e5e4; }
body.dark-mode .vd :is(#vdRdMain, #vdRdRight, #vdDiMain) .skip-btn:hover{ border-color:#2dd4bf; }
body.dark-mode .vd #vdRdMain .reading-line{ border-bottom-color:rgba(255,255,255,.1); }

/* ---- v182 · Tone Trainer · Events & Meetups · Admin hub (Stitch screens 12, 14, 15/22, wide screens) ---- */
@media (min-width:1024px){
  html.vc-vd :is(#tab-tones, #tab-events, #tab-admin){ max-width:1120px; }
}
html.vc-vd :is(#tab-tones, #tab-events) > :is(.section-title, .section-note){ display:none !important; }
/* tone trainer: the real "Start training" block lives inside the dark hero */
html.vc-vd .vd #vdTtHero .tt-hero{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0; }
html.vc-vd .vd #vdTtHero .tt-feat{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:16px; }
html.vc-vd .vd #vdTtHero .tt-feat b{ font-size:15px; color:#fff; }
html.vc-vd .vd #vdTtHero .tt-feat span{ font-size:12.5px; color:#ccfbf1; line-height:1.45; }
html.vc-vd .vd #vdTtHero .tt-start{ grid-column:1 / -1; width:auto; justify-self:start; margin:6px 0 0; min-height:52px; padding:0 34px; border-radius:999px; background:#fbbf24; color:#451a03; border:none; font-size:16px; font-weight:800; box-shadow:0 4px 0 #b45309; }
html.vc-vd .vd #vdTtHero .tt-start:hover{ background:#fcd34d; }
/* events */
html.vc-vd .vd #vdEvRight #eventCreateBtn{ width:auto !important; margin:0 !important; padding:13px 24px !important; font-size:14px !important; border-radius:999px; }
html.vc-vd .vd #vdEvCities .ev-city-row{ flex-wrap:wrap; overflow:visible; padding:0; gap:8px; }
html.vc-vd .vd #vdEvCities .ev-city{ padding:9px 16px; border-radius:999px; border:1px solid #e7e5e4; background:#fafaf9; box-shadow:none !important; color:#44403c; }
html.vc-vd .vd #vdEvCities .ev-city:hover{ border-color:#5eead4; }
html.vc-vd .vd #vdEvCities .ev-city.active{ background:#0f766e; border-color:#0f766e; color:#fff; }
html.vc-vd .vd #vdEvView .ev-view-toggle{ margin:0; background:#f5f5f4; padding:4px; border-radius:999px; }
html.vc-vd .vd #vdEvView .ev-view-btn{ border:none; background:transparent; border-radius:999px; padding:8px 16px; font-weight:700; color:#57534e; }
html.vc-vd .vd #vdEvView .ev-view-btn.active{ background:#0f766e; color:#fff; }
html.vc-vd .vd #vdEvMap #eventMap{ border-radius:24px; overflow:hidden; border:1px solid #e7e5e4; }
html.vc-vd .vd #vdEvList #eventList{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
html.vc-vd .vd #vdEvList #eventList[style*="none"]{ display:none; }
html.vc-vd .vd #vdEvList #eventList > :not(.ev-card){ grid-column:1 / -1; }
html.vc-vd .vd #vdEvList .ev-card{ margin:0; padding:20px; border-radius:24px; background:#fff; border:1px solid #e7e5e4; box-shadow:0 1px 2px rgba(0,0,0,.05); }
html.vc-vd .vd #vdEvList .ev-card:hover{ border-color:#5eead4; }
html.vc-vd .vd #vdEvList .ev-title{ font-size:18px; letter-spacing:-.01em; }
html.vc-vd .vd #vdEvList .ev-date{ width:60px; background:#f0fdfa; border-color:#99f6e4; }
html.vc-vd .vd #vdEvList .ev-btn{ border-radius:999px; padding:8px 14px; }
/* admin hub: queues become cards under tabs */
html.vc-vd #tab-admin .vd-ad-grp.vd-ad-off{ display:none; }
html.vc-vd #tab-admin .vd-ad-grp{ background:#fff; border:1px solid #e7e5e4; border-radius:24px; box-shadow:0 1px 2px rgba(0,0,0,.05); padding:22px 24px; margin:0 0 16px; }
html.vc-vd #tab-admin .vd-ad-grp > .section-title{ margin:0 0 6px !important; font-size:18px; font-weight:800; letter-spacing:-.01em; }
html.vc-vd #tab-admin .vd-ad-grp .card{ border-radius:18px; box-shadow:none; background:#fafaf9; border:1px solid #e7e5e4; }
/* dark mode */
body.dark-mode .vd #vdTtHero .tt-start{ box-shadow:0 4px 0 #92400e; }
body.dark-mode .vd #vdEvCities .ev-city{ background:#16302a; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd #vdEvCities .ev-city.active{ background:#0f766e; color:#fff; }
body.dark-mode .vd #vdEvView .ev-view-toggle{ background:#1a322c; }
body.dark-mode .vd #vdEvView .ev-view-btn{ color:#a8a29e; }
body.dark-mode .vd #vdEvView .ev-view-btn.active{ background:#0f766e; color:#fff; }
body.dark-mode .vd #vdEvMap #eventMap{ border-color:rgba(255,255,255,.12); }
body.dark-mode .vd #vdEvList .ev-card{ background:#11231f; border-color:rgba(255,255,255,.12); }
body.dark-mode .vd #vdEvList .ev-card:hover{ border-color:#2dd4bf; }
body.dark-mode .vd #vdEvList .ev-date{ background:rgba(45,212,191,.1); border-color:rgba(45,212,191,.3); }
body.dark-mode.vc-vd #tab-admin .vd-ad-grp, body.dark-mode #tab-admin .vd-ad-grp{ background:#11231f; border-color:rgba(255,255,255,.12); }
body.dark-mode #tab-admin .vd-ad-grp .card{ background:#16302a; border-color:rgba(255,255,255,.12); }
body.dark-mode .vd #vdAdTabs{ background:#1a322c; }
html.vc-vd #tab-admin .vd-ad-grp .card{ min-height:0; text-align:left; display:block; align-items:initial; padding:16px 18px; margin-top:12px !important; }
html.vc-vd #tab-admin .vd-ad-grp :is(.skip-btn, .check-btn){ border-radius:999px; }
html.vc-vd #tab-admin #vcAdminContrib.vd-ad-grp{ margin-top:0; }
html.vc-vd .vd #vdEvList .ev-btn{ background:#fafaf9; border:1px solid #e7e5e4; color:#44403c; font-size:13px; font-weight:700; min-height:0; padding:8px 14px; }
html.vc-vd .vd #vdEvList .ev-btn:hover{ border-color:#5eead4; }
html.vc-vd .vd #vdEvList .ev-btn.going{ background:#16a34a; border-color:#16a34a; color:#fff; }
html.vc-vd .vd #vdEvList .ev-btn.interested{ background:#f59e0b; border-color:#f59e0b; color:#fff; }
html.vc-vd .vd #vdEvView .ev-view-btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
html.vc-vd .vd #vdEvList .ev-actions{ margin-top:12px; }
body.dark-mode .vd #vdEvList .ev-btn{ background:#16302a; border-color:rgba(255,255,255,.14); color:#e7e5e4; }
body.dark-mode .vd #vdEvList .ev-btn.going{ background:#16a34a; color:#fff; }
body.dark-mode .vd #vdEvList .ev-btn.interested{ background:#f59e0b; color:#fff; }

/* ---- v183 · the rest of the pages + the call room (Stitch screens 16/17, wide screens, new look) ---- */
@media (min-width:1024px){
  html.vc-vd :is(#tab-mix, #tab-games, #tab-situations, #tab-lessons, #tab-voices){ max-width:1120px; margin-left:auto; margin-right:auto; }
}
/* the old headings, notes and "All practice" chip are replaced by the designed head + breadcrumb */
html.vc-vd :is(#tab-mix, #tab-games, #tab-situations, #tab-lessons, #tab-voices) > :is(.section-title, .section-note, .dh-back){ display:none !important; }
/* Mixed review: same card + answers as Quiz / Fill the blank */
html.vc-vd .vd #vdMxMain #mixCard{ margin:0 0 16px !important; padding:22px 24px; background:#f0fdfa; border:1px solid #99f6e4 !important; border-radius:20px; box-shadow:none !important; }
html.vc-vd .vd #vdMxMain #mixQ{ font-size:26px !important; line-height:1.4 !important; color:#0b2621 !important; }
html.vc-vd .vd #vdMxMain #mixArea:has(> .opt){ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; counter-reset:vdopt; }
html.vc-vd .vd #vdMxMain #mixArea > .opt{ position:relative; display:block; margin:0; min-height:64px; padding:18px 16px 18px 60px; border:2px solid #e7e5e4; border-radius:18px; background:#fff; font-size:15px; line-height:1.35; text-align:left; counter-increment:vdopt; }
html.vc-vd .vd #vdMxMain #mixArea > .opt::before{ content:counter(vdopt, upper-alpha); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:#f5f5f4; border:1px solid #e7e5e4; color:#57534e; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
html.vc-vd .vd #vdMxMain #mixArea > .opt:hover:not(:disabled){ border-color:#5eead4; background:#f0fdfa; }
html.vc-vd .vd #vdMxMain #mixArea > .opt.correct{ background:#ecfdf5; border-color:#10b981; color:#065f46; }
html.vc-vd .vd #vdMxMain #mixArea > .opt.correct::before{ content:'✓'; background:#10b981; border-color:#10b981; color:#fff; }
html.vc-vd .vd #vdMxMain #mixArea > .opt.wrong{ background:#fff1f2; border-color:#fb7185; color:#9f1239; }
html.vc-vd .vd #vdMxMain #mixArea > .opt.wrong::before{ content:'✕'; background:#fb7185; border-color:#fb7185; color:#fff; }
html.vc-vd .vd #vdMxMain .nav-row{ justify-content:space-between; margin-top:8px !important; }
html.vc-vd .vd #vdMxMain #mixNextBtn{ background:#0f766e; color:#fff; padding:14px 26px; font-size:15px; font-weight:800; box-shadow:0 4px 0 #115e59; }
html.vc-vd .vd #vdMxMain .build-zone{ min-height:84px; border:2px dashed #99f6e4; background:#f0fdfa; border-radius:20px; padding:16px; }
html.vc-vd .vd #vdMxMain .bank .word-chip{ border:2px solid #e7e5e4; border-radius:14px; }
/* Mini games: bigger cards in a roomier grid */
html.vc-vd .vd #vdMgBody .mg-grid{ grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; margin-top:0; }
html.vc-vd .vd #vdMgBody .mg-card{ padding:20px; border:1px solid #e7e5e4; border-radius:24px; background:#fff; box-shadow:0 1px 2px rgba(11,38,33,.05); }
html.vc-vd .vd #vdMgBody .mg-card:hover{ border-color:#5eead4; box-shadow:0 8px 22px rgba(13,148,136,.12); }
/* Situations, lessons, voices: the real pieces sit directly on the page */
html.vc-vd .vd #vdSiBody .sit-grid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
html.vc-vd .vd #vdSiBody .sit-card{ border:1px solid #e7e5e4; border-radius:24px; background:#fff; box-shadow:0 1px 2px rgba(11,38,33,.05); }
html.vc-vd .vd #vdSiBody .sit-card:hover{ border-color:#5eead4; box-shadow:0 8px 22px rgba(13,148,136,.12); }
html.vc-vd .vd #vdLsBody .dh-back, html.vc-vd .vd #vdSiBody .dh-back{ display:inline-flex; }
/* Typing tutor: only its top bar belongs to the app (the tutor itself is its own page in a frame) */
html.vc-vd .type-tutor-topbar{ background:linear-gradient(180deg, #f0fdfa, #fff); border-bottom:1px solid #99f6e4; gap:12px; }
html.vc-vd .type-tutor-topbar .pr-back-btn{ background:#fff; border:1px solid #99f6e4; color:#0f766e; border-radius:999px; width:36px; height:36px; font-weight:800; }
html.vc-vd .type-tutor-topbar > span{ color:#0b2621; font-size:16px; letter-spacing:-.01em; }

/* Call room: deep-jade chrome instead of black — glass pill top bar, rounded tiles, round control buttons.
   Same structure, same buttons, same z-index (8800); only the look changes. */
html.vc-vd .live-shell{ background:radial-gradient(120% 90% at 50% 0%, #0f3a33 0%, #082421 55%, #061a17 100%); }
html.vc-vd .live-topbar{ flex-wrap:wrap; gap:10px; margin:12px 16px 0; padding:8px 12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); border-radius:26px; backdrop-filter:blur(10px); }
html.vc-vd .live-topbar :is(.live-host-chip, .live-count-chip, .live-layout-btn){ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); }
html.vc-vd .live-topbar #liveInviteBtn{ background:#0f766e; border-color:#14b8a6; }
html.vc-vd .live-topbar #liveRecChip{ background:rgba(220,38,38,.85); border-color:rgba(254,202,202,.4); }
html.vc-vd .live-topbar .live-x{ display:inline-grid; place-items:center; padding:0; background:rgba(229,72,77,.92); border:1px solid rgba(254,202,202,.35); }
html.vc-vd .live-stage{ padding:12px 16px 4px; }
html.vc-vd .live-tiles{ gap:12px; }
html.vc-vd .live-tile{ background:#0b2a26; border:1px solid rgba(255,255,255,.1); border-radius:22px; box-shadow:0 12px 30px rgba(0,0,0,.35); }
html.vc-vd .live-tile.speaking{ outline:3px solid #2dd4bf; outline-offset:-3px; box-shadow:0 0 0 4px rgba(45,212,191,.22), 0 12px 30px rgba(0,0,0,.35); }
html.vc-vd .live-tile.audio-mode{ background:#0c2e29; }
html.vc-vd .live-tile-name, html.vc-vd .live-tile-badge:not(.host), html.vc-vd .live-tile-menu, html.vc-vd .live-tile-focus-btn{ background:rgba(6,26,23,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12); }
html.vc-vd .live-stage.floating{ background:#082421; border-radius:22px; }
html.vc-vd .live-bottombar{ align-self:center; justify-content:center; width:max-content; max-width:calc(100% - 32px); margin:0 0 16px; padding:10px 16px 8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:32px; backdrop-filter:blur(12px); }
html.vc-vd .live-input{ min-width:260px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); }
html.vc-vd #liveShell .live-act .la-ic{ width:46px; height:46px; border-radius:50%; background:rgba(45,212,191,.16); color:#99f6e4; }
html.vc-vd #liveShell .live-act:hover .la-ic{ background:rgba(45,212,191,.28); }
html.vc-vd #liveShell .live-act .la-lb{ color:rgba(236,253,245,.88); }
html.vc-vd #liveShell .live-act.active .la-ic{ background:#2dd4bf; color:#062b27; }
html.vc-vd #liveMicBtn:not(.on):not(.hand) .la-ic, html.vc-vd #liveCamBtn:not(.on) .la-ic{ background:rgba(229,72,77,.28); color:#fecaca; }
html.vc-vd #liveShell .live-act.danger .la-ic{ background:#e5484d; color:#fff; }
html.vc-vd #liveShell #liveNextBtn .la-ic{ background:#0f766e; color:#fff; }
html.vc-vd .live-msg-body{ background:rgba(6,26,23,.55); border:1px solid rgba(255,255,255,.08); }
html.vc-vd #liveShell.minimized .live-tiles{ gap:4px; }
html.vc-vd #liveShell.minimized .live-tile{ border-radius:12px; box-shadow:none; }

/* dark mode: the frame pages */
body.dark-mode .vd #vdMxMain #mixCard{ background:rgba(45,212,191,.1); border-color:rgba(45,212,191,.35) !important; }
body.dark-mode .vd #vdMxMain #mixQ{ color:#f5f5f4 !important; }
body.dark-mode .vd #vdMxMain #mixArea > .opt{ background:#11231f; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd #vdMxMain #mixArea > .opt::before{ background:#1a322c; border-color:rgba(255,255,255,.14); color:#d6d3d1; }
body.dark-mode .vd #vdMxMain #mixArea > .opt:hover:not(:disabled){ background:#16302a; border-color:#2dd4bf; }
body.dark-mode .vd #vdMxMain #mixArea > .opt.correct{ background:rgba(52,211,153,.16); border-color:#34d399; color:#6ee7b7; }
body.dark-mode .vd #vdMxMain #mixArea > .opt.wrong{ background:rgba(251,113,133,.14); border-color:#fb7185; color:#fda4af; }
body.dark-mode .vd #vdMxMain .build-zone{ background:rgba(45,212,191,.08); border-color:rgba(45,212,191,.35); }
body.dark-mode .vd #vdMxMain .bank .word-chip{ background:#11231f; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd #vdMgBody .mg-card, body.dark-mode .vd #vdSiBody .sit-card{ background:#11231f; border-color:rgba(255,255,255,.12); color:#e7e5e4; }
body.dark-mode .vd #vdMgBody .mg-card:hover, body.dark-mode .vd #vdSiBody .sit-card:hover{ border-color:#2dd4bf; }
html.vc-vd body.dark-mode .type-tutor-topbar{ background:#0f2a25; border-bottom-color:rgba(45,212,191,.3); }
html.vc-vd body.dark-mode .type-tutor-topbar > span{ color:#f5f5f4; }
html.vc-vd body.dark-mode .type-tutor-topbar .pr-back-btn{ background:#16302a; border-color:rgba(255,255,255,.14); color:#99f6e4; }

/* v187 · phones: the flashcard comes first. "Session settings" and "Search & browse" used to sit above it and push it
   off the first screen; they now follow the card and its buttons (same elements, only the order changes). */
@media (max-width: 1023px){
  #tab-learn[style*="display: block"]{ display:flex !important; flex-direction:column; width:100%; min-width:0; }
  #tab-learn > #learnSettingsDetails,
  #tab-learn > #learnBrowseDetails{ order:30; margin-top:10px; }
  #tab-learn > *{ width:100%; box-sizing:border-box; }   /* items with auto side margins would otherwise shrink to their content in a column */
}

/* ==========================================================================
   v190 · phone refresh (html.vc-ph) — opt-out: Settings › App › Phone refresh, or ?phone=classic.
   Only on phones/tablets (<1024px) in the new look. CSS only: nothing changes what a button does.
   Calmer bottom bar (Rooms is a normal tab, soft pill under the current one), a flatter Start Here hero,
   and tighter flashcard tool buttons. Removing the class gives the v172 phone layout back exactly.
   ========================================================================== */
@media (max-width:1023px){
  html.vc-ph #bottomNav{ padding:8px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -1px 0 rgba(11,38,33,.06); }
  html.vc-ph #bottomNav .bn-btn{ gap:3px; font-size:10.5px; border-radius:16px; background:none !important; }
  html.vc-ph #bottomNav .bn-btn .bn-icon{ width:46px; height:30px; border-radius:15px; transition:background .18s ease; }
  html.vc-ph #bottomNav .bn-btn.active .bn-icon{ background:var(--primary-tint, #E6F7F4); transform:none; }
  html.vc-ph #bottomNav .bn-btn.active{ color:var(--cover-deep, #047857); font-weight:800; }
  /* (v231: Rooms keeps its raised circle in the preview again — mockup A; see 185-phone-a.css) */
  /* Start Here: one soft card instead of a tall header + overlapping card */
  html.vc-ph #homeBanner > header{ border-radius:0 0 28px 28px !important; padding-bottom:22px !important; }
  html.vc-ph #homeBanner > header .size-14{ width:44px; height:44px; }
  html.vc-ph #homeBanner > section{ margin-top:-12px !important; border-radius:28px !important; }
  html.vc-ph #tab-learn .flashcard, html.vc-ph #tab-learn #flashcard{ border-radius:24px; }
}

/* ==========================================================================
   v191 · phone layout preview. The current phone layout is the default again; the v190 refresh plus the
   Flashcards / Practice / Progress screens below only apply in preview (html.vc-ph, opt in with the
   Settings › App or ?phone=new). CSS only. (v192: the floating switch is gone; the current layout stays.)
   ========================================================================== */
@media (max-width:1023px){
  /* every tab: no big white sheet behind the screen — cards sit on the soft background */
  html.vc-ph .page{ background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; padding:4px 16px 24px !important; }
  html.vc-ph .section-title{ font-size:24px; letter-spacing:-.02em; }
  /* Flashcards */
  /* (v232: the card's tool buttons keep their usual look in the preview too — owner's choice) */
  body.dark-mode.dark-mode #cardTools .speak-btn{ background:rgba(94,234,212,.1) !important; }
  html.vc-ph .fc-nav .nav-btn, html.vc-ph .fc-nav button{ border-radius:999px !important; }
  html.vc-ph #learnToolsRow .skip-btn{ min-height:40px; padding:8px 10px; font-size:13px; border-radius:14px !important; }
  html.vc-ph #tab-learn .flashcard, html.vc-ph #tab-learn #flashcard{ box-shadow:0 8px 24px rgba(11,38,33,.08) !important; border-color:transparent !important; }
  /* Practice: one tidy list instead of a tile grid */
  html.vc-ph .dh-feature{ border-radius:22px; }
  html.vc-ph .dh-grid{ grid-template-columns:1fr !important; gap:8px; }
  html.vc-ph .dh-card:not(.dh-sit){ display:grid; grid-template-columns:44px 1fr auto; grid-template-rows:auto auto; column-gap:12px; row-gap:1px; align-items:center; min-height:0; padding:12px 14px; border-radius:18px; }
  html.vc-ph .dh-card:not(.dh-sit) .dh-ico{ grid-row:1 / 3; width:44px; height:44px; margin:0; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--primary-tint, #E6F7F4); }
  body.dark-mode .dh-card:not(.dh-sit) .dh-ico{ background:rgba(94,234,212,.1); }
  html.vc-ph .dh-card:not(.dh-sit) b{ grid-column:2; }
  html.vc-ph .dh-card:not(.dh-sit) small{ grid-column:2; }
  html.vc-ph .dh-card:not(.dh-sit)::after{ content:'›'; grid-column:3; grid-row:1 / 3; font-size:22px; color:var(--muted); }
  html.vc-ph .dh-card:not(.dh-sit) > :not(.dh-ico):not(b):not(small){ grid-column:2; }
  /* Progress: smaller tiles, calmer points card */
  html.vc-ph .prog-stats{ gap:8px !important; }
  html.vc-ph .prog-stat{ padding:12px 14px !important; border-radius:18px !important; }
  html.vc-ph .prog-num{ font-size:24px; }
  html.vc-ph .vc-pts-card{ padding:14px 16px !important; border-radius:20px !important; }
  html.vc-ph .vc-pts-card .vc-pts-sub{ font-size:12.5px; }
  html.vc-ph .vc-pts-card :is(.check-btn, .skip-btn){ min-height:40px; padding:8px 12px; font-size:13.5px; }
}

/* v193 · topic chips → dropdown on phones (src/js/234-chip-select.js). Both looks; wide screens keep the chips. */
.vc-chipsel{ display:none; }
@media (max-width:1023px){
  .vc-chipsel-row{ display:none !important; }
  .vc-chipsel{ display:flex; align-items:center; gap:10px; margin:8px 0 12px; }
  .vc-chipsel-l{ font-size:13px; font-weight:800; color:var(--muted, #6b7280); }
  .vc-chipsel select{ flex:1; min-width:0; min-height:44px; padding:8px 34px 8px 12px; font:inherit; font-size:15px; font-weight:700; color:var(--ink, #1c1917); border:1.5px solid var(--line, #d9d4c7); border-radius:12px; background:var(--card, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; appearance:none; -webkit-appearance:none; text-overflow:ellipsis; }
  body.dark-mode .vc-chipsel select{ background-color:#1f2523; color:#e7e5e4; border-color:#3a4340; }
}
#vcPointsCard{ margin-bottom:18px; }   /* v193: it now sits between your stats and "Words to review" */

/* v195 · Quiz: topic dropdown (all sizes) + all modes visible on phones without sideways scrolling */
.vc-quiz-topic{ display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.vc-quiz-topic > span{ font-size:13px; font-weight:800; color:var(--muted, #6b7280); }
.vc-quiz-topic select{ flex:1; min-width:0; max-width:420px; min-height:42px; padding:8px 34px 8px 12px; font:inherit; font-size:15px; font-weight:700; color:var(--ink, #1c1917); border:1.5px solid var(--line, #d9d4c7); border-radius:12px; background:var(--card, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; appearance:none; -webkit-appearance:none; text-overflow:ellipsis; }
body.dark-mode .vc-quiz-topic select{ background-color:#1f2523; color:#e7e5e4; border-color:#3a4340; }
@media (max-width:1023px){
  #quizModeToggle{ flex-wrap:wrap !important; overflow:visible !important; gap:6px; }
  #quizModeToggle button{ flex:1 1 auto !important; white-space:normal !important; padding:8px 10px !important; min-height:38px; font-size:13.5px; line-height:1.2; }
}
/* v200 · desktop Practice groups (228-vd-practice.js) */
html.vc-vd .vd .vd-pr-row{ transition:background .12s; } html.vc-vd .vd .vd-pr-row:hover{ background:#f5f5f4; }
html.vc-vd .vd .vd-pr-cont:hover{ border-color:#5eead4; }
/* v219 · admin on phones: one group at a time, picked from a sticky chip row (228-vd-more.js paintAdminPhone) */
#vcAdPhTabs{ display:none; }
@media (max-width:1023px){
  /* v221: a 3×3 grid of tabs — every tab visible at once, no sideways swiping */
  html:not(.vc-vd) #tab-admin.vc-adph #vcAdPhTabs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; position:sticky; top:0; z-index:5; margin:-4px -12px 12px; padding:8px 12px; background:#fff; border-bottom:1px solid rgba(0,0,0,.08); }
  @supports (overflow:clip){ html:not(.vc-vd) .page:has(#tab-admin.vc-adph){ overflow:clip; } } /* hidden would stop the tabs sticking */
  #vcAdPhTabs button{ display:flex; align-items:center; justify-content:center; gap:3px; min-width:0; white-space:nowrap; overflow:hidden; font-family:inherit; font-weight:700; font-size:12.5px; line-height:1.1; padding:7px 4px; border-radius:12px; letter-spacing:-.01em; border:1px solid #d6d3d1; background:#fff; color:#44403c; min-height:36px; }
  #vcAdPhTabs button .t{ overflow:hidden; text-overflow:ellipsis; }
  #vcAdPhTabs button.on{ background:#0f766e; border-color:#0f766e; color:#fff; }
  #vcAdPhTabs button b{ flex:0 0 auto; font-size:10.5px; padding:1px 5px; border-radius:999px; background:#fef3c7; color:#92400e; }
  html:not(.vc-vd) #tab-admin.vc-adph .vd-ad-grp.vc-adph-off{ display:none; }
  html:not(.vc-vd) #tab-admin.vc-adph .vd-ad-grp > .section-title:first-child{ margin-top:4px !important; }
  body.dark-mode #vcAdPhTabs{ background:#0b1a17; border-color:rgba(255,255,255,.1); }
  body.dark-mode #vcAdPhTabs button{ background:#16302a; color:#e7e5e4; border-color:rgba(255,255,255,.15); }
  body.dark-mode #vcAdPhTabs button.on{ background:#0f766e; color:#fff; }
}

/* v224 · polish: keyboard ring on the hero CTA (the Tailwind utility narrowed it to 1px), language chip width in VI, reduced motion */
html.vc-vd #vdHomeGo:focus-visible, html.vc-vd .vd .bg-emerald-400:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
html.vc-vd #vdHeader #uiLangToggle{ min-width:46px; }
@media (prefers-reduced-motion: reduce){ html.vc-vd .vd .animate-pulse{ animation:none; } }