/* ============================================================================
   v273 · learning upgrades (research review): Today's livelier step, tone chips, many voices, hints, dictation,
   speaking reviews and the study plan. Loaded after the look-specific sheets; ids keep it above them.
   ============================================================================ */

/* ---------- Today: the word "stage" ---------- */
#vcToday .vc-td-big{
  position:relative; border-radius:24px; padding:26px 18px 20px; margin:14px auto 12px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 6% 100%, rgba(250,204,21,.16) 0 44px, transparent 45px),
    radial-gradient(circle at 96% 0%, rgba(16,185,129,.14) 0 38px, transparent 39px),
    linear-gradient(160deg, #ecfdf5 0%, #f0fdfa 45%, #fefce8 100%);
  border:1px solid #cdebdc; box-shadow: 0 10px 24px -18px rgba(6,78,59,.45), inset 0 1px 0 #fff;
  overflow:hidden; min-height:0;
}
#vcToday .vc-td-big::before{ /* soft dotted texture */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image: radial-gradient(rgba(15,118,110,.22) 1px, transparent 1.2px); background-size:16px 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%);
}
#vcToday .vc-td-big > *{ position:relative; }
#vcToday .vc-td-word{ animation: vcTdPop .38s cubic-bezier(.2,1.4,.4,1) both; text-shadow: 0 2px 0 rgba(255,255,255,.8); }
@keyframes vcTdPop{ from{ transform: translateY(6px) scale(.94); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ #vcToday .vc-td-word{ animation:none; } }

/* tone chips: one per syllable, colored like the letters */
#vcToday .vc-td-tones{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }
.vc-td-tchip{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 6px; border-radius:999px; font-size:13px; font-weight:600;
  background:#fff; border:1.5px solid currentColor; color:#475569; line-height:1.2; box-shadow:0 2px 6px -4px rgba(0,0,0,.25); }
.vc-td-tchip{ --tc:#475569; color:var(--tc); }
.vc-td-tchip b{ background:var(--tc); color:#fff; border-radius:999px; padding:2px 8px; font-weight:800; }
.vc-td-tchip i{ font-style:normal; font-weight:800; letter-spacing:-1px; }
.vc-td-tchip.tc-ngang{ --tc:#475569; } .vc-td-tchip.tc-huyen{ --tc:#2563eb; } .vc-td-tchip.tc-sac{ --tc:#c2410c; }
.vc-td-tchip.tc-hoi{ --tc:#15803d; } .vc-td-tchip.tc-nga{ --tc:#7e22ce; } .vc-td-tchip.tc-nang{ --tc:#b91c1c; }
body.dark-mode .vc-td-tchip{ background:#0f1f1a; }

/* progress dots */
#vcToday .vc-td-count{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.vc-td-dots{ display:flex; gap:6px; }
.vc-td-dots i{ width:9px; height:9px; border-radius:99px; background:#d5e7dc; transition: all .25s; }
.vc-td-dots i.d{ background:#10b981; }
.vc-td-dots i.c{ width:26px; background:linear-gradient(90deg,#0f766e,#10b981); }

/* numbered answers that react */
#vcToday .vc-td-lettered .vc-td-opt{ display:flex; align-items:center; gap:12px; transition: transform .12s, box-shadow .15s, background .15s; }
#vcToday .vc-td-key{ flex:0 0 auto; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:13px; font-weight:800;
  background:#e7f3ec; color:#0f5e48; border:1px solid #cfe5d8; }
#vcToday .vc-td-lettered .vc-td-opt:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(6,78,59,.55); }
#vcToday .vc-td-lettered .vc-td-opt.right .vc-td-key{ background:#10b981; color:#fff; border-color:#10b981; }
#vcToday .vc-td-lettered .vc-td-opt.wrong .vc-td-key{ background:#ef4444; color:#fff; border-color:#ef4444; }
#vcToday .vc-td-opt.right{ animation: vcTdRight .45s ease both; }
#vcToday .vc-td-opt.wrong{ animation: vcTdShake .4s ease both; }
@keyframes vcTdRight{ 0%{ transform:scale(1); } 40%{ transform:scale(1.035); } 100%{ transform:scale(1); } }
@keyframes vcTdShake{ 0%,100%{ transform:none; } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(2px); } }
@media (prefers-reduced-motion: reduce){ #vcToday .vc-td-opt.right, #vcToday .vc-td-opt.wrong{ animation:none; } }
#vcToday .vc-td-fb{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; justify-content:center; font-size:16px; }
#vcToday .vc-td-fb #tdGo{ margin-top:0 !important; background:linear-gradient(90deg,#0f766e,#10b981) !important; color:#fff !important; border:0 !important; padding:10px 22px; min-height:44px; box-shadow:0 8px 18px -10px rgba(15,118,110,.8); }

/* the step card: a colored top edge so each step feels like a page */
#vcToday .vc-td-step{ position:relative; }
#vcToday .vc-td-stephead{ position:relative; }
#vcToday .vc-td-stephead::after{ content:""; position:absolute; left:0; bottom:-8px; width:64px; height:4px; border-radius:4px; background:linear-gradient(90deg,#10b981,#facc15); }

/* dark mode stage */
body.dark-mode #vcToday .vc-td-big{ background: linear-gradient(160deg,#0f2a22,#11302a 50%,#2a2610); border-color:#1f4a3c; box-shadow:none; }
body.dark-mode #vcToday .vc-td-word{ text-shadow:none; }
body.dark-mode #vcToday .vc-td-key{ background:#173a30; color:#a7f3d0; border-color:#245244; }

/* ---------- Tone Ear / Tone Hunter: who said it ---------- */
.vc-ear-voice{ display:block; margin-top:4px; font-size:12px; font-weight:600; color:#0f766e; }
.vc-ear-many{ display:flex; gap:8px; align-items:flex-start; }

/* ---------- hints (Quiz / Blanks / Build / Dictation) ---------- */
.vc-hint{ text-align:left; }
.vc-hint .vc-hint-rule{ display:block; margin-top:4px; font-size:13px; opacity:.9; }
.vc-shape{ font-size:16px; letter-spacing:2px; background:#fff7; padding:1px 6px; border-radius:6px; }
.vc-syls{ display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; margin:4px 0; }
.vc-syl{ display:inline-block; min-width:28px; text-align:center; padding:3px 8px; border-radius:9px; font-weight:700; font-size:16px; border:1.5px solid; background:#fff; }
.vc-syl.s-ok{ border-color:#10b981; background:#ecfdf5; color:#065f46; }
.vc-syl.s-tone{ border-color:#f59e0b; background:#fffbeb; color:#92400e; }
.vc-syl.s-mark{ border-color:#a855f7; background:#faf5ff; color:#6b21a8; }
.vc-syl.s-miss{ border-color:#f43f5e; background:#fff1f2; color:#9f1239; }
.vc-syl sup{ font-size:10px; margin-left:1px; }
body.dark-mode .vc-syl{ background:#0f1f1a; }
.opt.vc-tried{ opacity:.55; text-decoration:line-through; }
#buildZone .word-chip.vc-chip-ok{ box-shadow:0 0 0 2px #10b981 inset; background:#ecfdf5; }

/* ---------- ⌨️ Telex switch ---------- */
.vc-telex-chip{ display:inline-flex; align-items:center; gap:4px; margin:6px 0 2px; padding:5px 11px; border-radius:999px; font:600 12.5px/1.2 inherit;
  border:1px solid #cfe5d8; background:#f4faf6; color:#0f5e48; cursor:pointer; }
.vc-telex-chip.on{ background:#0f766e; border-color:#0f766e; color:#fff; }
body.dark-mode .vc-telex-chip:not(.on){ background:#132a23; color:#a7f3d0; border-color:#245244; }

/* ---------- 🎧 Dictation · 🗣️ Say it (shared card) ---------- */
.vc-dc-card{ background:var(--card,#fff); border:1px solid var(--border,#e2e8e4); border-radius:20px; padding:18px; box-shadow:0 10px 24px -20px rgba(6,78,59,.5); max-width:720px; margin:0 auto; }
.vc-dc-card .deck-label{ display:block; margin:12px 0 6px; font-weight:700; font-size:13px; }
.vc-dc-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.vc-dc-seg button{ flex:1 1 auto; min-height:40px; }
.vc-dc-check{ display:flex; gap:8px; align-items:center; margin:14px 0 4px; font-size:14px; }
.vc-dc-go{ width:100%; margin-top:14px; min-height:48px; font-size:16px; }
.vc-dc-stat{ margin:12px 0 0; font-size:13px; opacity:.8; text-align:center; }
.vc-dc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.vc-dc-n{ font-size:13px; font-weight:700; opacity:.75; }
.vc-dc-ears{ display:flex; justify-content:center; gap:22px; margin:10px 0 4px; }
.vc-dc-ears .vc-dc-play{ width:72px; height:72px; font-size:30px; border-radius:22px; }
.vc-dc-clue{ text-align:center; font-size:15px; margin:6px 0 2px; color:#475569; }
.vc-dc-len{ text-align:center; font-size:12px; margin:0 0 10px; opacity:.7; }
.vc-dc-inrow{ display:flex; flex-direction:column; align-items:flex-start; }
.vc-dc-inrow .type-input{ width:100%; box-sizing:border-box; font-size:18px; min-height:48px; }
.vc-dc-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:12px; }
.vc-dc-actions button{ min-height:44px; }
.vc-dc-fb{ margin-top:10px; }
.vc-dc-ans{ font-size:22px; font-weight:800; margin:8px 0 4px; }
.vc-dc-you{ font-size:13px; margin:6px 0; }
.vc-dc-legend{ font-size:12px; margin:4px 0; display:flex; gap:10px; flex-wrap:wrap; }
.vc-dc-legend .s-tone{ color:#b45309; } .vc-dc-legend .s-mark{ color:#7e22ce; } .vc-dc-legend .s-miss{ color:#be123c; }
.vc-dc-end{ text-align:center; }
.vc-dc-end .big{ font-size:44px; }
.vc-pr-stats{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:10px 0; }
.vc-pr-stats span{ background:#f0fdf4; border:1px solid #d1fae5; border-radius:12px; padding:8px 12px; font-size:13px; }
.vc-pr-stats b{ font-size:18px; margin-right:3px; }
body.dark-mode .vc-pr-stats span{ background:#11291f; border-color:#1f4a3c; }
.vc-pr-empty{ text-align:center; opacity:.8; }
.vc-pr-cat{ font-size:12px; background:#eef2ff; color:#3730a3; padding:3px 9px; border-radius:99px; }
.vc-pr-prompt{ text-align:center; font-size:28px; font-weight:800; margin:18px 0 4px; }
.vc-pr-ask{ text-align:center; opacity:.75; margin:0 0 12px; font-size:14px; }
.vc-pr-ans{ text-align:center; font-size:30px; font-weight:800; margin:6px 0 8px; }
.vc-pr-grades{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.vc-pr-grades button{ min-height:52px; border-radius:14px; border:1.5px solid #d6e5dc; background:#fff; font:600 13px/1.2 inherit; cursor:pointer; padding:6px; }
.vc-pr-grades button b{ display:block; font-size:11px; opacity:.6; }
.vc-pr-grades .g-again{ border-color:#fecdd3; background:#fff1f2; color:#9f1239; }
.vc-pr-grades [data-g="good"]{ border-color:#a7f3d0; background:#ecfdf5; color:#065f46; }
.vc-pr-grades .g-easy{ border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }
@media (max-width:420px){ .vc-pr-grades{ grid-template-columns:1fr 1fr; } }
#vcToday .vc-td-prompt{ font-size:26px; font-weight:800; color:#0b4c39; opacity:1; }

/* ---------- 🗓️ Study plan ---------- */
.vc-pl{ max-width:900px; margin:0 auto; }
.vc-pl h3{ margin:18px 0 10px; }
.vc-pl-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vc-pl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.vc-pl-plan{ background:var(--card,#fff); border:1px solid var(--border,#e2e8e4); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:8px; box-shadow:0 8px 20px -18px rgba(6,78,59,.6); }
.vc-pl-ph{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.vc-pl-ph span{ font-weight:800; color:#0f766e; white-space:nowrap; }
.vc-pl-plan small{ opacity:.75; }
.vc-pl-blocks{ display:flex; flex-wrap:wrap; gap:6px; }
.vc-pl-chip{ font-size:12.5px; padding:4px 9px; border-radius:99px; background:#f0fdf4; border:1px solid #d1fae5; }
body.dark-mode .vc-pl-chip{ background:#11291f; border-color:#1f4a3c; }
.vc-pl-pa{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.vc-pl-pa button{ min-height:40px; }
.vc-pl-ed .type-input{ width:100%; box-sizing:border-box; }
.vc-pl-rows{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.vc-pl-row{ display:grid; grid-template-columns:28px 1fr auto auto; gap:8px; align-items:center; background:var(--card,#fff); border:1px solid var(--border,#e2e8e4); border-radius:14px; padding:8px 10px; }
.vc-pl-num{ width:26px; height:26px; border-radius:8px; background:#0f766e; color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; }
.vc-pl-act{ min-height:40px; border-radius:10px; border:1px solid var(--border,#d6e0da); padding:0 8px; font:inherit; background:var(--card,#fff); color:inherit; min-width:0; }
.vc-pl-min{ display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; }
.vc-pl-min button, .vc-pl-mv button{ width:34px; height:34px; border-radius:10px; border:1px solid var(--border,#d6e0da); background:var(--card,#fff); color:inherit; font-size:15px; cursor:pointer; }
.vc-pl-mv{ display:inline-flex; gap:4px; }
.vc-pl-mv button:disabled{ opacity:.35; }
@media (max-width:560px){ .vc-pl-row{ grid-template-columns:28px 1fr; } .vc-pl-min, .vc-pl-mv{ grid-column:2; } }
.vc-pl-total{ font-size:15px; }
.vc-pl-entry{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; margin:0 0 14px; padding:14px 16px; border-radius:18px; cursor:pointer;
  border:1px solid #a7f3d0; background:linear-gradient(120deg,#ecfdf5,#f0fdfa 60%,#fefce8); color:#064e3b; font:inherit; box-shadow:0 8px 20px -16px rgba(6,78,59,.7); }
.vc-pl-entry b{ display:block; font-size:16px; } .vc-pl-entry small{ display:block; opacity:.8; font-size:12.5px; margin-top:2px; }
.vc-pl-ei{ font-size:28px; } .vc-pl-ego{ margin-left:auto; font-size:22px; font-weight:800; }
body.dark-mode .vc-pl-entry{ background:linear-gradient(120deg,#0f2a22,#11302a); color:#d1fae5; border-color:#1f4a3c; }

/* runner bar: above the phone bar, bottom-centre on computers */
#vcPlanBar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(76px + env(safe-area-inset-bottom,0px)); z-index:9150; width:min(560px, calc(100vw - 24px));
  display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; padding:10px 12px; border-radius:18px;
  background:#073b30; color:#ecfdf5; box-shadow:0 16px 36px -14px rgba(0,0,0,.55); font-size:14px; }
@media (min-width:1024px){ #vcPlanBar{ bottom:20px; } }
#vcPlanBar .vc-plb-main{ display:flex; align-items:center; gap:8px; min-width:0; }
#vcPlanBar .vc-plb-step{ font-size:12px; opacity:.75; }
#vcPlanBar .vc-plb-act{ background:none; border:0; color:inherit; font:700 14px inherit; padding:0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#vcPlanBar .vc-plb-time{ font-variant-numeric:tabular-nums; font-weight:800; font-size:17px; color:#fde68a; }
#vcPlanBar .vc-plb-next{ font-size:12px; opacity:.7; white-space:nowrap; }
#vcPlanBar .vc-plb-prog{ grid-column:1 / -1; grid-row:2; height:5px; background:#ffffff26; border-radius:5px; overflow:hidden; }
#vcPlanBar .vc-plb-prog i{ display:block; height:100%; background:linear-gradient(90deg,#34d399,#fde68a); }
#vcPlanBar .vc-plb-btns{ display:flex; gap:6px; }
#vcPlanBar .vc-plb-btns button{ min-width:36px; height:36px; border-radius:11px; border:1px solid #ffffff33; background:#ffffff14; color:#fff; cursor:pointer; font-size:14px; padding:0 10px; }
#vcPlanBar.vc-pl-wait{ background:#7c2d12; animation: vcPlPulse 1.4s ease-in-out infinite; }
#vcPlanBar.vc-pl-wait .check-btn{ background:#fde68a !important; color:#422006 !important; border:0 !important; }
@keyframes vcPlPulse{ 50%{ box-shadow:0 0 0 6px rgba(253,230,138,.25), 0 16px 36px -14px rgba(0,0,0,.55); } }
@media (prefers-reduced-motion: reduce){ #vcPlanBar.vc-pl-wait{ animation:none; } }
body.vc-plan-on section[role=tabpanel]{ padding-bottom:84px; }
body.in-live-room #vcPlanBar, body.in-type-tutor #vcPlanBar{ display:none; }
.vc-telex-row{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.vc-telex-tip{ background:none; border:0; padding:4px 0; margin:6px 0 2px; color:#0f766e; font:600 12.5px/1.3 inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#99d5c9; }
.vc-telex-tip:hover{ color:#0b4c39; }
body.dark-mode .vc-telex-tip{ color:#6ee7b7; }
/* the designed screens reset .vd buttons (border:0; background:none) — keep the pill */
.vd .vc-telex-chip, html .vc-telex-chip{ border:1px solid #cfe5d8 !important; background:#f4faf6 !important; color:#0f5e48 !important; padding:5px 11px !important; border-radius:999px !important; }
.vd .vc-telex-chip.on, html .vc-telex-chip.on{ background:#0f766e !important; border-color:#0f766e !important; color:#fff !important; }
body.dark-mode .vc-telex-chip:not(.on){ background:#132a23 !important; color:#a7f3d0 !important; border-color:#245244 !important; }
#vcToday .vc-td-why-here{ text-align:center; font-size:12.5px; color:#5b6b63; margin:2px 0 -4px; }
body.dark-mode #vcToday .vc-td-why-here{ color:#a7c4b8; }
#vcToneOv .vc-tone-return{ display:block; width:100%; margin:10px 0 0; min-height:46px; }

/* ---------- 🗺️ Other accents ---------- */
.vc-accents{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:8px auto 4px; max-width:560px; }
.vc-acc-h{ font-size:12px; font-weight:700; color:#5b6b63; margin-right:2px; }
.vc-acc-b, .vd .vc-acc-b{ border:1px solid #d6e5dc !important; background:#fff !important; color:#24463a !important; border-radius:999px !important; padding:5px 10px !important; font:600 12.5px/1.2 inherit; cursor:pointer; min-height:32px; }
.vc-acc-b b{ font-weight:800; }
.vc-acc-b.me, .vd .vc-acc-b.me{ border-color:#0f766e !important; background:#ecfdf5 !important; color:#0b4c39 !important; }
body.dark-mode .vc-acc-b{ background:#11241e !important; color:#cfe9df !important; border-color:#245244 !important; }
body.dark-mode .vc-acc-b.me{ background:#0f3a2f !important; border-color:#34d399 !important; }
body:not(.fc-revealed) .vc-accents.vc-acc-hold{ display:none; }
@media (max-width:480px){ .vc-acc-ht{ display:none; } .vc-acc-b, .vd .vc-acc-b{ padding:5px 9px !important; } }
body.focus-mode .vc-accents{ display:none !important; }

/* ---------- 🗣️ Say it: the mic ---------- */
.vc-pr-mic.rec, .vd .vc-pr-mic.rec{ background:#fee2e2 !important; border-color:#ef4444 !important; color:#991b1b !important; }
.vc-pr-live{ min-height:22px; text-align:center; font-size:14px; margin-top:8px; color:#24463a; }
.vc-pr-live b{ font-size:16px; }
.vc-pr-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#ef4444; margin-right:7px; vertical-align:middle; animation: vcPrPulse 1s ease-in-out infinite; }
@keyframes vcPrPulse{ 50%{ transform:scale(1.5); opacity:.5; } }
@media (prefers-reduced-motion: reduce){ .vc-pr-dot{ animation:none; } }
.vc-pr-err{ color:#9f1239; }
.vc-pr-verdict{ text-align:center; margin:8px auto; padding:10px 12px; border-radius:14px; max-width:520px; border:1.5px solid; }
.vc-pr-verdict.k-ok{ border-color:#10b981; background:#ecfdf5; color:#065f46; }
.vc-pr-verdict.k-tone{ border-color:#f59e0b; background:#fffbeb; color:#92400e; }
.vc-pr-verdict.k-miss{ border-color:#f43f5e; background:#fff1f2; color:#9f1239; }
body.dark-mode .vc-pr-verdict{ background:#11241e; }
.vc-pr-again{ margin-top:4px; }
.vc-pr-grades button.sugg{ box-shadow:0 0 0 3px #0f766e; transform:translateY(-1px); }

/* v274 · 🧱 Sentence homework form (src/js/304-sentence-homework.js) */
.hw-sent-info:empty, .hw-sent-preview:empty { display: none; }
.hw-sent-info { margin: 0 0 8px; }
.hw-sent-preview { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 2px; font-size: 13px; }
.hw-sent-pl { color: var(--ink-light, #5b6b66); font-size: 12px; margin-right: 2px; }
.hw-sent-tile { display: inline-block; padding: 2px 8px; border-radius: 8px; background: var(--paper, #f4f1e8); border: 1px solid var(--paper-dark, #ddd6c4); font-size: 13px; line-height: 1.5; color: var(--ink, #1f2a28); }
.hw-sent-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; max-height: 260px; overflow-y: auto; }
.hw-sent-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--paper-dark, #ddd6c4); border-radius: 10px; background: var(--card-bg, #fff); }
.hw-sent-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #0F766E; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.hw-sent-body { flex: 1; min-width: 0; }
.hw-sent-tiles { display: flex; flex-wrap: wrap; gap: 3px; }
.hw-sent-m { font-size: 12px; color: var(--ink-light, #5b6b66); margin-top: 2px; }
.hw-sent-row .hw-sent-ed, .hw-sent-row .hw-sent-del { flex: 0 0 auto; min-width: 36px; min-height: 36px; border-radius: 8px !important; border: 1px solid var(--paper-dark, #ddd6c4) !important; background: transparent !important; cursor: pointer; font-size: 15px; }
body.dark-mode .hw-sent-tile { background: #22302d; border-color: #35463f; color: #e6efe9; }
body.dark-mode .hw-sent-row { background: #1a2522; border-color: #35463f; }
.hw-sent-miss { color: var(--bad-ink, #9f1239); }

/* v275 · consent before live subtitles send your microphone audio (0200 ccAskConsent) — above the call (8800) and dialogs */
.vc-cc-consent { position: fixed; inset: 0; z-index: 9800; background: rgba(8, 20, 18, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.vc-cc-card { background: var(--card-bg, #fff); color: var(--ink, #1f2a28); border-radius: 16px; max-width: 460px; width: 100%; padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); font-family: var(--font); max-height: calc(100vh - 32px); overflow-y: auto; }
.vc-cc-card h3 { margin: 0 0 8px; font-size: 17px; }
.vc-cc-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.vc-cc-card .vc-cc-small { font-size: 13px; color: var(--ink-light, #4b5b56); }
.vc-cc-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0 10px; min-height: 32px; }
.vc-cc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.vc-cc-btns button { flex: 1 1 140px; min-height: 44px; margin: 0 !important; }
.vc-cc-link { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #0F766E; }
body.dark-mode .vc-cc-card { background: #18231f; color: #e6efe9; }

/* v276 · payments: groups in the pay sheet, Wise steps, Stripe box in the teacher form (306-payments.js) */
.pay-group-h { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink-light, #4b5b56); margin: 12px 2px 6px; text-transform: none; }
.pay-steps { margin: 0 0 8px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.pay-steps li { margin: 2px 0; }
.pay-fx { font-size: 12.5px; }
.tf-stripe { border: 1.5px solid #c9e6dc; background: #f3fbf8; border-radius: 12px; padding: 12px; }
.tf-stripe-title { font-weight: 800; font-size: 14.5px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-pay-tag.ok { background: #d9f2e6; color: #065f46; }
.tf-pay-tag.warn { background: #fff3cd; color: #7a4b00; }
.tf-stripe-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tf-stripe-btns > * { flex: 1 1 160px; min-height: 44px; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.tf-stripe-link { background: none !important; border: 0 !important; color: #9f1239; font-size: 12.5px; text-decoration: underline; margin-top: 8px; padding: 4px 0; min-height: 32px; cursor: pointer; }
body.dark-mode .tf-stripe { background: #16251f; border-color: #2c4a3e; }
/* v277: Start Here sounds with an approved community recording play that real voice */
.sh-real{ cursor:pointer; box-shadow: inset 0 -2px 0 #0d9488; }
.sh-audio-note .sh-rec-link{ display:flex; margin:6px 0 0; padding:0; min-height:36px; text-align:left; }
/* v278: 🕒 Work log (Admin › Users) */
#vcWorkLog .wl-periods{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
#vcWorkLog .wl-periods .cat-chip.active{ background:var(--cover,#0F766E); color:#fff; border-color:var(--cover,#0F766E); }
#vcWorkLog .wl-dates{ display:flex; flex-wrap:wrap; gap:10px; font-size:13px; margin-bottom:10px; }
#vcWorkLog .wl-dates input{ min-height:36px; border:1px solid #cbd5e1; border-radius:8px; padding:2px 6px; font:inherit; }
#vcWorkLog .wl-tot{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:8px; }
#vcWorkLog .wl-tot>div{ background:#f0fdfa; border:1px solid #ccfbf1; border-radius:12px; padding:8px 10px; }
#vcWorkLog .wl-tot b{ display:block; font-size:20px; color:#134e4a; }
#vcWorkLog .wl-tot span{ font-size:12px; color:#475569; }
#vcWorkLog .wl-tot .wl-pay{ background:#fefce8; border-color:#fde68a; }
#vcWorkLog .wl-acts{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; margin:4px 0 10px; color:#334155; }
#vcWorkLog .wl-tbl-wrap{ overflow-x:auto; max-height:46vh; overflow-y:auto; border:1px solid #e2e8f0; border-radius:10px; }
#vcWorkLog .wl-tbl{ width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
#vcWorkLog .wl-tbl th, #vcWorkLog .wl-tbl td{ padding:6px 8px; border-bottom:1px solid #f1f5f9; text-align:right; }
#vcWorkLog .wl-tbl th:first-child, #vcWorkLog .wl-tbl td:first-child{ text-align:left; }
#vcWorkLog .wl-tbl thead th{ position:sticky; top:0; background:#f8fafc; }
#vcWorkLog .wl-note{ font-size:12px; color:#475569; margin:8px 0; }
#vcWorkLog .wl-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; }
#vcWorkLog .wl-rate{ display:flex; align-items:center; gap:6px; font-size:13px; flex:1 1 220px; }
#vcWorkLog .wl-rate input{ width:90px; min-height:36px; border:1px solid #cbd5e1; border-radius:8px; padding:2px 6px; font:inherit; }
#vcWorkLog .wl-rate select{ min-height:36px; border-radius:8px; }
body.dark-mode #vcWorkLog .wl-tot>div{ background:#12302b; border-color:#1f4d45; } body.dark-mode #vcWorkLog .wl-tot b{ color:#ccfbf1; }
body.dark-mode #vcWorkLog .wl-tot span, body.dark-mode #vcWorkLog .wl-note, body.dark-mode #vcWorkLog .wl-acts{ color:#cbd5e1; }
body.dark-mode #vcWorkLog .wl-tbl thead th{ background:#1e293b; }
#vcWorkLog .wl-periods .cat-chip:not(.active){ color:#134e4a; background:#f1f5f2; }
body.dark-mode #vcWorkLog .wl-periods .cat-chip:not(.active){ color:#ccfbf1; background:#1e293b; }
/* v279: 🥁 Say it on the beat */
.vc-beat{ display:flex; flex-direction:column; gap:12px; }
.vc-beat-intro{ margin:0; font-size:14px; color:#334155; }
.vc-beat-sets{ display:flex; flex-wrap:wrap; gap:6px; }
.vc-beat-sets .cat-chip.active{ background:var(--cover,#0F766E); color:#fff; border-color:var(--cover,#0F766E); }
.vc-beat-words{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.vc-beat-w{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border:1px solid #cbd5e1; border-radius:14px; background:#fff; cursor:pointer; min-height:110px; }
.vc-beat-w .vc-beat-pic{ font-size:38px; line-height:1.1; }
.vc-beat-w b{ font-size:17px; color:#134e4a; }
.vc-beat-w small{ font-size:11px; color:#475569; text-align:center; }
.vc-beat-spk{ position:absolute; top:4px; right:6px; font-size:12px; }
.vc-beat-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.vc-beat-opts .vc-seg button{ min-height:38px; }
.vc-beat-chk{ display:flex; align-items:center; gap:6px; font-size:14px; min-height:40px; }
.vc-beat-go{ font-size:18px; min-height:52px; }
.vc-beat-note{ margin:0; }
.vc-beat-hud{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:800; color:#134e4a; }
.vc-beat-count{ height:0; position:relative; text-align:center; font:900 0/1 var(--font, sans-serif); color:#ca8a04; z-index:2; pointer-events:none; }
.vc-beat-count.on{ font-size:56px; height:auto; animation:vcBeatPop .25s ease-out; }
@keyframes vcBeatPop{ from{ transform:scale(.6); opacity:.3; } to{ transform:none; opacity:1; } }
.vc-beat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.vc-beat-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; aspect-ratio:4/5; border-radius:18px; background:#f0fdfa; border:2px solid #ccfbf1; transition:transform .08s, background .08s; }
.vc-beat-cell .vc-beat-pic{ font-size:clamp(34px, 9vw, 64px); line-height:1; }
.vc-beat-cell b{ font-size:clamp(14px, 3.6vw, 22px); color:#134e4a; }
.vc-beat-grid.nowords .vc-beat-cell b{ visibility:hidden; }
.vc-beat-cell.lit{ background:#FDE047; border-color:#ca8a04; transform:scale(1.07); box-shadow:0 6px 18px rgba(202,138,4,.35); }
.vc-beat-recdot{ align-self:center; color:#dc2626; font-weight:800; animation:vcBeatBlink 1s infinite; }
@keyframes vcBeatBlink{ 50%{ opacity:.3; } }
.vc-beat-done{ align-items:center; text-align:center; }
.vc-beat-video{ width:min(100%, 360px); border-radius:14px; background:#000; }
body.dark-mode .vc-beat-w{ background:#1e293b; border-color:#334155; } body.dark-mode .vc-beat-w b, body.dark-mode .vc-beat-cell b, body.dark-mode .vc-beat-hud{ color:#ccfbf1; }
body.dark-mode .vc-beat-intro, body.dark-mode .vc-beat-w small{ color:#cbd5e1; } body.dark-mode .vc-beat-cell{ background:#12302b; border-color:#1f4d45; }
body.dark-mode .vc-beat-cell.lit{ background:#ca8a04; } body.dark-mode .vc-beat-cell.lit b{ color:#000; }
.vc-beat-hud span{ white-space:nowrap; }
.vc-beat-hud .skip-btn{ flex:0 0 auto; width:auto !important; min-width:0; padding:6px 14px; margin-left:auto; }
.vc-beat-play{ max-width:720px; margin:0 auto; width:100%; }
.vc-beat-play .vc-beat-grid{ max-width:640px; margin:0 auto; width:100%; }
.vc-beat-done .mg-result-score{ font-size:24px; line-height:1.25; }
@media (min-width:1024px){ .vc-beat-play .vc-beat-grid{ max-width:560px; } .vc-beat-cell{ aspect-ratio:1/1; } }
/* v282: sync nudge under the beat grid */
.vc-beat-sync{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:12px; font-size:13px; color:#475569; }
.vc-beat-sync .skip-btn{ width:auto !important; min-width:0; padding:5px 12px; font-size:13px; }
.vc-beat-sync b{ min-width:62px; text-align:center; font-variant-numeric:tabular-nums; color:#134e4a; }
body.dark-mode .vc-beat-sync{ color:#94a3b8; } body.dark-mode .vc-beat-sync b{ color:#ccfbf1; }
/* v283: Say it — keep practicing */
.vc-pr-more{ margin:14px 0 4px; padding:12px; border:1px solid #d1fae5; border-radius:14px; background:#f8fffb; text-align:left; display:flex; flex-direction:column; gap:10px; }
.vc-pr-more-row{ display:flex; flex-wrap:wrap; gap:10px; }
.vc-pr-more-row label{ display:flex; flex-direction:column; gap:4px; font-size:13px; flex:1 1 140px; }
.vc-pr-more-row select{ min-height:40px; border-radius:10px; border:1px solid #cbd5e1; padding:6px 8px; font-size:15px; background:#fff; color:inherit; }
.vc-pr-more .check-btn{ align-self:flex-start; width:auto !important; }
.vc-pr-more-msg{ font-size:13px; color:#b45309; }
.vc-pr-tally{ font-weight:700; }
body.dark-mode .vc-pr-more{ background:#0f241c; border-color:#1f4a3c; } body.dark-mode .vc-pr-more-row select{ background:#1e293b; border-color:#334155; }
/* v284: four whole-app themes */
#themePairGrid{ grid-template-columns:repeat(4,1fr) !important; }
#tsCustom[hidden]{ display:none !important; }
/* v285: shared review list */
.vc-rv-line.waiting{ border-color:#93c5fd; background:#f5f9ff; }
.vc-rv-waitnote{ font:700 11.5px var(--font); color:#1d4ed8; margin-top:4px; }
.vc-rv-by{ display:block; color:#047857; font-weight:700; }
.vc-rv-busy{ display:block; color:#b45309; font-weight:700; }
.vc-rv-item.busy{ border-color:#fcd34d; }
.vc-rv-team{ border-radius:12px; padding:9px 12px; margin:0 0 10px; font:700 13px var(--font); }
.vc-rv-team.ok{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.vc-rv-team.busy{ background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
body.dark-mode .vc-rv-line.waiting{ background:#0f1d33; border-color:#1e3a8a; } body.dark-mode .vc-rv-waitnote{ color:#93c5fd; }
body.dark-mode .vc-rv-team.ok{ background:#0b2a20; color:#a7f3d0; border-color:#14532d; } body.dark-mode .vc-rv-team.busy{ background:#2a1f05; color:#fde68a; border-color:#78350f; }
/* v286: 👉 Point and say */
.vc-pt-ask{ font-weight:800; font-size:15px; margin:2px 0 8px; }
.vc-pt-scene{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:0 0 10px; }
.vc-pt-zone{ border:1px solid #d1fae5; border-radius:14px; padding:8px 6px; text-align:center; background:#f8fffb; min-height:96px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.vc-pt-me{ background:#fffbeb; border-color:#fde68a; }
.vc-pt-far{ background:#f1f5f9; border-color:#e2e8f0; }
.vc-pt-far .vc-pt-items{ transform:scale(.78); }
.vc-pt-who{ font-size:22px; line-height:1; }
.vc-pt-items{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px; min-height:36px; align-items:center; }
.vc-pt-it{ font-size:28px; line-height:1; padding:3px; border-radius:10px; opacity:.45; filter:grayscale(.4); transition:all .2s; }
.vc-pt-it.lit{ opacity:1; filter:none; background:#fef08a; box-shadow:0 0 0 3px #facc15; animation:vcPtPulse 1.2s ease-in-out infinite; }
.vc-pt-it.keep{ opacity:1; filter:none; outline:2px dashed #94a3b8; }
.vc-pt-empty{ font-size:28px; animation:vcPtPulse 1.2s ease-in-out infinite; }
.vc-pt-none{ opacity:.3; }
.vc-pt-lbl{ font-size:11.5px; font-weight:700; color:#475569; }
.vc-pt-bubble, .vc-pt-hint{ font-size:13px; font-weight:700; margin:-2px 0 10px; color:#334155; }
@keyframes vcPtPulse{ 50%{ transform:scale(1.12); } }
body.dark-mode .vc-pt-zone{ background:#0f241c; border-color:#1f4a3c; } body.dark-mode .vc-pt-me{ background:#2a2208; border-color:#78350f; } body.dark-mode .vc-pt-far{ background:#1e293b; border-color:#334155; }
body.dark-mode .vc-pt-lbl, body.dark-mode .vc-pt-bubble, body.dark-mode .vc-pt-hint{ color:#cbd5e1; } body.dark-mode .vc-pt-it.lit{ background:#713f12; }
@media (prefers-reduced-motion: reduce){ .vc-pt-it.lit, .vc-pt-empty{ animation:none; } }
/* v286: 🔍 Break it down */
.vc-bd-line{ font-size:22px; font-weight:800; line-height:1.35; }
.vc-bd-en{ color:#475569; margin:2px 0 12px; }
.vc-bd-h{ font:800 12px var(--font); letter-spacing:.06em; text-transform:uppercase; color:#0f766e; margin:14px 0 6px; }
.vc-bd-words{ display:flex; flex-wrap:wrap; gap:6px; }
.vc-bd-w{ display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid #d1fae5; background:#f8fffb; border-radius:12px; padding:7px 10px; min-width:52px; cursor:pointer; font:inherit; color:inherit; }
.vc-bd-w b{ font-size:18px; }
.vc-bd-w small{ font-size:11.5px; color:#475569; max-width:9.5em; text-align:center; line-height:1.25; }
.vc-bd-w.little{ background:#fffbeb; border-color:#fde68a; }
.vc-bd-w.unknown small{ color:#94a3b8; }
.vc-bd-lit{ margin:10px 0 0; font-size:14px; } .vc-bd-lit span{ font-weight:800; color:#475569; } .vc-bd-lit.nat{ margin-top:4px; }
.vc-bd-st{ border:1px solid #e2e8f0; border-radius:12px; padding:9px 12px; margin:0 0 8px; font-size:14px; }
.vc-bd-st b{ display:block; margin-bottom:2px; }
.vc-bd-go{ margin-top:8px; width:auto !important; font-size:13px; }
.vc-bd-note{ font-size:14px; margin:0 0 6px; line-height:1.45; }
.vc-bd-foot{ margin-top:12px; }
.sit-bd-link{ display:inline-block; margin-top:4px; border:0; background:none; padding:2px 0; font:700 12px var(--font); color:#0f766e; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.sit-bub.me .sit-bd-link{ color:inherit; opacity:.9; }
body.dark-mode .vc-bd-w{ background:#0f241c; border-color:#1f4a3c; } body.dark-mode .vc-bd-w.little{ background:#2a2208; border-color:#78350f; }
body.dark-mode .vc-bd-w small, body.dark-mode .vc-bd-en, body.dark-mode .vc-bd-lit span{ color:#cbd5e1; } body.dark-mode .vc-bd-st{ border-color:#334155; } body.dark-mode .vc-bd-h, body.dark-mode .sit-bd-link{ color:#5eead4; }
/* v286: with 4 buttons the phrase text got squeezed on phones — buttons go under the line there */
@media (max-width: 640px){
  .sit-line{ grid-template-columns:1fr; }
  .sit-btns{ grid-column:1; grid-row:auto; margin-top:6px; gap:10px; }
}

/* v287 · Admin › Users › 👤 Profile */
#vcAdminProfile .vc-ap-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
#vcAdminProfile .vc-ap-head small{display:block;color:#64748b;word-break:break-all}
#vcAdminProfile .vc-ap-name{font-size:1.15rem}
#vcAdminProfile .vc-ap-list{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0 0 12px}
#vcAdminProfile .vc-ap-list dt{font-weight:700;color:#475569}
#vcAdminProfile .vc-ap-list dd{margin:0;white-space:pre-wrap;word-break:break-word}
#vcAdminProfile .vc-ap-teach{background:#f0fdfa;border:1px solid #99f6e4;border-radius:12px;padding:10px 12px;margin-bottom:12px}
#vcAdminProfile .vc-ap-bio{margin-top:6px;color:#334155;font-size:.92rem}
#vcAdminProfile .vc-ap-tools{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:520px){#vcAdminProfile .vc-ap-list{grid-template-columns:1fr}#vcAdminProfile .vc-ap-list dt{margin-top:6px}}
body.dark-mode #vcAdminProfile .vc-ap-teach{background:#0f2a26;border-color:#155e55}
body.dark-mode #vcAdminProfile .vc-ap-list dt{color:#94a3b8}

/* v288 · 💬 Send feedback + 🔗 Share a teacher */
#vcFeedback .vc-fb-lead,#vcTeacherShare .vc-fb-lead{margin:0 0 12px;color:#334155;line-height:1.45}
#vcFeedback .vc-fb-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
#vcFeedback .vc-fb-text{width:100%;box-sizing:border-box;border:1.5px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:16px;resize:vertical;min-height:120px}
#vcFeedback .vc-fb-text:focus{outline:2px solid #0d9488;border-color:#0d9488}
#vcFeedback .vc-fb-where{display:block;margin:10px 0;font-size:.92rem;color:#334155}
#vcFeedback .vc-fb-where small{display:block;color:#64748b;margin:2px 0 0 24px;word-break:break-word}
.vc-fb-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#vcFeedback .vc-fb-done{text-align:center;padding:10px 4px}
#vcFeedback .vc-fb-done .vc-fb-foot{justify-content:center;margin-top:12px}
#vcFeedback .vc-fb-big{font-size:44px}
.vc-fb-entry{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:12px 14px;border-radius:14px;border:1.5px dashed #5eead4;background:#f0fdfa;color:#0b2e26;text-align:left;cursor:pointer;font:inherit}
.vc-fb-entry>span:first-child{font-size:24px}
.vc-fb-entry small{display:block;color:#475569;font-weight:500}
#vcTeacherShare .vc-ts-link{display:flex;gap:8px;margin-bottom:10px}
#vcTeacherShare .vc-ts-link input{flex:1;min-width:0;border:1.5px solid #cbd5e1;border-radius:10px;padding:10px;font:inherit;font-size:15px;background:#f8fafc}
#vcTeacherShare .vc-ts-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
#vcTeacherShare .vc-ts-qrbox{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 4px}
#vcTeacherShare .vc-ts-qr{width:220px;max-width:70vw;border-radius:12px;border:1px solid #e2e8f0}
#vcTeacherShare .vc-ts-posts{display:grid;gap:10px}
#vcTeacherShare .vc-ts-post{border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;background:#fff}
#vcTeacherShare .vc-ts-ph{font-weight:700;font-size:.9rem;margin-bottom:4px;color:#0f766e}
#vcTeacherShare .vc-ts-post pre{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:.92rem;margin:0 0 8px;color:#1e293b}
.vc-tm-share{margin-top:8px}
body.dark-mode .vc-fb-entry{background:#0f2a26;border-color:#155e55;color:#e2e8f0}
body.dark-mode .vc-fb-entry small,body.dark-mode #vcFeedback .vc-fb-lead,body.dark-mode #vcTeacherShare .vc-fb-lead,body.dark-mode #vcFeedback .vc-fb-where{color:#cbd5e1}
body.dark-mode #vcTeacherShare .vc-ts-post{background:#0f1f1c;border-color:#1f3b36}
body.dark-mode #vcTeacherShare .vc-ts-post pre{color:#e2e8f0}
body.dark-mode #vcFeedback .vc-fb-text,body.dark-mode #vcTeacherShare .vc-ts-link input{background:#0f1f1c;color:#e2e8f0;border-color:#1f3b36}

/* v291 · the chat list: unread first, last message, time, count */
#chatLauncherMenu{ width:min(340px, calc(100vw - 24px)); }
#chatLauncherMenu .cl-filter{ display:flex; gap:6px; margin:0 0 8px; }
#chatLauncherMenu .cl-filter button{ flex:1; border:1.5px solid #cbd5e1; background:transparent; border-radius:999px; padding:7px 10px; font:inherit; font-size:13px; font-weight:700; color:#334155; cursor:pointer; min-height:36px; }
#chatLauncherMenu .cl-filter button.on{ background:#0f766e; border-color:#0f766e; color:#fff; }
#chatLauncherMenu .cl-filter b{ display:inline-block; min-width:18px; margin-left:4px; padding:0 5px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; line-height:18px; }
#chatLauncherMenu .cl-head{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#64748b; margin:10px 4px 4px; }
#chatLauncherMenu .chat-launcher-row{ align-items:center; gap:10px; cursor:pointer; }
#chatLauncherMenu .cl-mid{ flex:1; min-width:0; }
#chatLauncherMenu .cl-top, #chatLauncherMenu .cl-bot{ display:flex; align-items:center; gap:6px; min-width:0; }
#chatLauncherMenu .cl-top .pr-person-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#chatLauncherMenu .cl-fav{ font-size:12px; flex:none; }
#chatLauncherMenu .cl-time{ margin-left:auto; flex:none; font-size:12px; color:#64748b; }
#chatLauncherMenu .cl-last{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#475569; }
#chatLauncherMenu .cl-count{ flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
#chatLauncherMenu .cl-seen{ flex:none; font-size:11px; color:#0d9488; }
#chatLauncherMenu .cl-unread .pr-person-name{ font-weight:900; }
#chatLauncherMenu .cl-unread .cl-last{ color:#0f172a; font-weight:700; }
#chatLauncherMenu .cl-unread .cl-time{ color:#ef4444; font-weight:700; }
body.dark-mode #chatLauncherMenu .cl-filter button{ color:#cbd5e1; border-color:#334155; }
body.dark-mode #chatLauncherMenu .cl-last{ color:#94a3b8; }
body.dark-mode #chatLauncherMenu .cl-unread .cl-last{ color:#e2e8f0; }
html.vc-ph .pha-chat .pha-dot:not(:empty){ width:auto; height:18px; min-width:18px; padding:0 4px; top:2px; right:0; font:800 10.5px/18px system-ui, sans-serif; color:#fff; text-align:center; font-style:normal; }

/* v292 · 📚 Lesson library */
.vc-ll-lead{ margin:0 0 12px; color:#334155; line-height:1.45; }
.vc-ll-tabs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.vc-ll-tabs [data-llt]{ border:1.5px solid #cbd5e1; background:transparent; border-radius:999px; padding:8px 14px; font:inherit; font-size:14px; font-weight:700; color:#334155; cursor:pointer; min-height:40px; }
.vc-ll-tabs [data-llt].on{ background:#0f766e; border-color:#0f766e; color:#fff; }
.vc-ll-tabs .vc-ll-new{ margin-left:auto; }
.vc-ll-bar{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
.vc-ll-bar .teacher-search{ margin:0; }
.vc-ll-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.vc-ll-card{ display:flex; flex-direction:column; gap:5px; text-align:left; border:1px solid #e2e8f0; background:#fff; border-radius:14px; padding:12px 14px; cursor:pointer; font:inherit; color:#0f172a; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.vc-ll-card:hover{ border-color:#5eead4; box-shadow:0 4px 14px rgba(15,118,110,.12); }
.vc-ll-top{ display:flex; flex-wrap:wrap; gap:5px; }
.vc-ll-lvl, .vc-ll-chip{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:#f1f5f9; color:#334155; }
.vc-ll-lvl{ background:#ccfbf1; color:#115e59; }
.vc-ll-vis{ background:#fef3c7; color:#92400e; }
.vc-ll-title{ font-size:16px; line-height:1.3; }
.vc-ll-sum{ font-size:13.5px; color:#475569; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.vc-ll-meta{ font-size:12.5px; color:#0f766e; font-weight:600; }
.vc-ll-foot{ display:flex; gap:6px; font-size:12.5px; color:#64748b; margin-top:auto; }
.vc-ll-stats{ margin-left:auto; white-space:nowrap; }
.vc-ll-vhead .vc-ll-sum{ -webkit-line-clamp:unset; display:block; }
.vc-ll-h{ font-size:22px; margin:8px 0 4px; line-height:1.25; }
.vc-ll-by{ color:#64748b; font-size:13.5px; margin:2px 0 10px; }
.vc-ll-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.vc-ll-acts .skip-btn, .vc-ll-acts .check-btn{ margin:0; }
.vc-ll-steps{ margin:4px 0 6px; padding-left:22px; display:grid; gap:8px; }
.vc-ll-steps li{ padding-left:2px; }
.vc-ll-min{ font-size:12px; font-weight:700; color:#0f766e; }
.vc-ll-note{ font-size:13.5px; color:#475569; white-space:pre-wrap; margin:2px 0 0; }
.vc-ll-words{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
.vc-ll-w{ display:flex; align-items:center; gap:8px; border:1px solid #e2e8f0; border-radius:10px; padding:6px 8px; min-width:0; }
.vc-ll-w b{ white-space:nowrap; }
.vc-ll-w span{ color:#64748b; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.vc-ll-w .vc-ll-say{ width:32px; height:32px; min-width:32px; font-size:14px; margin:0; }
.vc-ll-thumbs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:6px; }
.vc-ll-th{ aspect-ratio:16/10; border-radius:8px; border:1px solid #e2e8f0; background:#f8fafc; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:4px; font-size:12px; text-align:center; color:#334155; }
.vc-ll-th img{ width:100%; height:100%; object-fit:cover; }
.vc-ll-links{ margin:0; padding-left:20px; }
.vc-ll-f{ display:block; font-weight:700; font-size:13.5px; color:#334155; margin-bottom:8px; }
.vc-ll-f .teacher-search{ display:block; width:100%; margin:4px 0 0; box-sizing:border-box; font-weight:400; }
.vc-ll-row3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.vc-ll-ta{ width:100%; box-sizing:border-box; font-family:inherit; }
.vc-ll-btns{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 4px; }
.vc-ll-btns .skip-btn{ margin:0; }
.vc-ll-btns select{ margin:0; max-width:100%; }
.vc-ll-step{ display:grid; grid-template-columns:28px 1fr 72px auto; gap:6px; align-items:center; margin-bottom:8px; padding:8px; border:1px solid #e2e8f0; border-radius:12px; }
.vc-ll-step .teacher-search{ margin:0; }
.vc-ll-step .vc-ll-snote{ grid-column:2 / -1; font-family:inherit; }
.vc-ll-sn{ width:26px; height:26px; border-radius:50%; background:#0f766e; color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.vc-ll-sb{ display:flex; gap:2px; }
.vc-ll-sb button{ border:1px solid #cbd5e1; background:#fff; border-radius:8px; width:32px; height:32px; cursor:pointer; font:inherit; }
.vc-ll-attached{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border-radius:10px; background:#f0fdfa; border:1px solid #99f6e4; margin-bottom:6px; }
.vc-ll-attached .skip-btn{ margin:0 0 0 auto; }
.vc-ll-vis-pick{ display:grid; gap:6px; }
.vc-ll-vopt{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1.5px solid #e2e8f0; border-radius:12px; cursor:pointer; }
.vc-ll-vopt:has(input:checked){ border-color:#0f766e; background:#f0fdfa; }
.vc-ll-vopt.off{ opacity:.6; cursor:not-allowed; }
.vc-ll-vopt small{ display:block; color:#64748b; font-size:12.5px; margin-top:2px; }
.vc-ll-save{ position:sticky; bottom:-1px; background:var(--card, #fff); padding:10px 0 4px; margin-top:10px; }
@media (max-width:640px){
  .vc-ll-bar{ grid-template-columns:1fr 1fr; }
  .vc-ll-bar #vcLlQ{ grid-column:1 / -1; }
  .vc-ll-row3{ grid-template-columns:1fr 1fr; }
  .vc-ll-row3 label:last-child{ grid-column:1 / -1; }
  .vc-ll-tabs .vc-ll-new{ margin-left:0; width:100%; }
  .vc-ll-step{ grid-template-columns:26px 1fr 64px; }
  .vc-ll-sb{ grid-column:2 / -1; justify-content:flex-end; }
}
body.dark-mode .vc-ll-card, body.dark-mode .vc-ll-sb button{ background:#0f1f1c; border-color:#1f3b36; color:#e2e8f0; }
body.dark-mode .vc-ll-lead, body.dark-mode .vc-ll-f, body.dark-mode .vc-ll-tabs [data-llt]:not(.on){ color:#cbd5e1; }
body.dark-mode .vc-ll-sum, body.dark-mode .vc-ll-note{ color:#94a3b8; }

/* v292 · 🎁 Free for life */
.vc-ffl-badge{ display:inline-block; margin-top:4px; padding:3px 9px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:12px; font-weight:800; }
.vc-ffl-card{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; margin-bottom:12px; border-radius:14px; background:linear-gradient(135deg, #fef3c7, #fde68a); color:#78350f; }
.vc-ffl-card span{ font-size:13.5px; }
.vc-ffl-admin{ margin-top:18px; }
.vc-ffl-add{ display:flex; gap:8px; align-items:flex-start; }
.vc-ffl-add textarea{ flex:1; margin:0; font-family:inherit; }
.vc-ffl-list{ display:grid; gap:6px; margin-top:8px; }
.vc-ffl-row{ display:flex; align-items:center; gap:8px; justify-content:space-between; padding:8px 10px; border:1px solid #e2e8f0; border-radius:10px; font-size:13.5px; word-break:break-all; }
.vc-ffl-row small{ color:#64748b; }
.vc-ffl-row .skip-btn{ margin:0; flex:none; }

/* v293 · 🏘️ Community rooms (324-community.js) */
#tab-community{ padding-bottom:0 !important; }
.cm-wrap{ display:grid; grid-template-columns:1fr; gap:12px; }
.cm-side-head .section-title{ margin-bottom:4px; }
.cm-channels{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.cm-ch{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:#fff; border:1px solid #e2ece8; border-radius:14px; padding:10px 12px; min-height:56px; cursor:pointer; color:#1c2b27; }
.cm-ch:hover{ border-color:#99d5c6; }
.cm-ch.on{ border-color:#0F766E; background:#f0faf7; box-shadow:inset 3px 0 0 #0F766E; }
.cm-ch-ic{ font-size:22px; width:30px; text-align:center; flex:0 0 auto; }
.cm-ch-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cm-ch-txt b{ font-size:14.5px; }
.cm-ch-txt small{ color:#5b6b66; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-ch.has-new .cm-ch-txt b, .cm-ch.has-new .cm-ch-txt small{ color:#0b3b35; font-weight:700; }
.cm-ch-end{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto; }
.cm-ch-end small{ color:#6b7a75; font-size:11px; }
.cm-tag{ font-size:10.5px; font-weight:700; background:#ede9fe; color:#5b21b6; border-radius:999px; padding:1px 7px; margin-left:4px; vertical-align:2px; }
.cm-rules-link{ margin-top:10px; background:none; border:0; color:#0F766E; font-weight:700; cursor:pointer; padding:8px 4px; font-size:13px; }
.cm-main{ display:none; }
.cm-wrap.cm-in .cm-side{ display:none; }
.cm-wrap.cm-in .cm-main{ display:flex; }
.cm-main{ flex-direction:column; background:#fff; border:1px solid #e2ece8; border-radius:18px; overflow:hidden; height:calc(100dvh - 210px); min-height:380px; }
.cm-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #e9f0ed; background:#f7fbf9; }
.cm-back{ width:40px; height:40px; border-radius:12px; border:1px solid #d5e4df; background:#fff; font-size:22px; line-height:1; cursor:pointer; color:#0F766E; flex:0 0 auto; }
.cm-head-ic{ font-size:24px; }
.cm-head-txt{ min-width:0; }
.cm-head-txt h3{ margin:0; font-size:16px; }
.cm-head-txt small{ color:#5b6b66; font-size:12px; display:block; }
.cm-list{ flex:1; overflow-y:auto; padding:8px 10px 12px; overscroll-behavior:contain; }
.cm-day{ text-align:center; margin:12px 0 6px; }
.cm-day span{ font-size:11.5px; font-weight:700; color:#5b6b66; background:#eef5f2; border-radius:999px; padding:3px 10px; }
.cm-msg{ display:flex; gap:10px; padding:6px 6px; border-radius:12px; position:relative; }
.cm-msg.grouped{ padding-top:1px; }
.cm-msg:hover, .cm-msg.open{ background:#f5faf8; }
.cm-msg.flash{ background:#fef9c3; transition:background .3s; }
.cm-av{ width:34px; flex:0 0 34px; }
.cm-av .teacher-avatar{ font-size:14px; }
.cm-col{ flex:1; min-width:0; }
.cm-who{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.cm-who b{ font-size:14px; color:#12322c; }
.cm-who time{ font-size:11.5px; color:#6b7a75; }
.cm-badge{ font-size:10.5px; font-weight:700; border-radius:999px; padding:1px 7px; }
.cm-badge.teacher{ background:#ede9fe; color:#5b21b6; }
.cm-badge.team{ background:#fef3c7; color:#92400e; }
.cm-body{ font-size:15px; line-height:1.45; color:#1c2b27; overflow-wrap:anywhere; }
.cm-body a{ color:#0F766E; text-decoration:underline; }
.cm-body.removed{ color:#7a8884; font-style:italic; font-size:13.5px; }
.cm-edited{ color:#7a8884; font-size:11px; }
.cm-tr{ margin-top:4px; font-size:13.5px; color:#2f4f48; background:#eef7f4; border-radius:10px; padding:6px 9px; }
.cm-quote{ display:block; width:100%; text-align:left; border:0; border-left:3px solid #99d5c6; background:#f3f8f6; border-radius:6px; padding:4px 8px; margin:2px 0 4px; font-size:12.5px; color:#4a5c57; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-lesson{ display:flex; gap:10px; align-items:flex-start; width:100%; max-width:440px; text-align:left; margin-top:6px; padding:10px 12px; border:1px solid #cfe6de; background:#f4fbf8; border-radius:14px; cursor:pointer; color:#1c2b27; }
.cm-lesson > span:first-child{ font-size:24px; }
.cm-lesson span:nth-child(2){ flex:1; display:flex; flex-direction:column; gap:2px; }
.cm-lesson small{ color:#4a5c57; font-size:12px; }
.cm-lesson em{ font-style:normal; font-weight:800; color:#0F766E; font-size:13px; align-self:center; }
.cm-reacts{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.cm-react{ border:1px solid #d8e6e1; background:#fff; border-radius:999px; padding:2px 9px; font-size:13px; min-height:28px; cursor:pointer; color:#1c2b27; }
.cm-react.mine{ border-color:#0F766E; background:#e6f6f1; font-weight:700; }
.cm-acts{ display:none; flex-wrap:wrap; gap:4px; margin-top:4px; position:relative; }
.cm-msg.open .cm-acts{ display:flex; }
@media (hover:hover) and (min-width:700px){ .cm-msg:hover .cm-acts{ display:flex; } }
.cm-acts > button{ border:1px solid #d8e6e1; background:#fff; border-radius:999px; padding:3px 10px; font-size:12.5px; min-height:32px; cursor:pointer; color:#2f4f48; }
.cm-acts > button:hover{ border-color:#0F766E; color:#0F766E; }
.cm-pickr{ position:absolute; bottom:calc(100% + 4px); left:0; display:flex; gap:2px; background:#fff; border:1px solid #d8e6e1; border-radius:999px; padding:4px; box-shadow:0 6px 18px rgba(0,0,0,.12); z-index:5; }
.cm-pickr button{ border:0; background:none; font-size:20px; width:38px; height:38px; border-radius:50%; cursor:pointer; }
.cm-pickr button:hover{ background:#eef7f4; }
.cm-older{ display:block; margin:4px auto 8px; border:1px solid #d8e6e1; background:#fff; border-radius:999px; padding:6px 14px; font-size:12.5px; cursor:pointer; color:#0F766E; font-weight:700; }
.cm-empty{ text-align:center; color:#5b6b66; padding:30px 10px; font-size:14px; }
.cm-starter{ display:flex; gap:10px; margin:14px 4px; padding:12px 14px; border:1px dashed #99d5c6; border-radius:14px; background:#f7fcfa; }
.cm-starter > span{ font-size:22px; }
.cm-starter p{ margin:2px 0 8px; color:#2f4f48; }
.cm-compose{ border-top:1px solid #e9f0ed; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:#fbfdfc; }
.cm-compose:empty{ display:none; }
.cm-row{ display:flex; gap:8px; align-items:flex-end; }
.cm-row textarea{ flex:1; resize:none; border:1px solid #cfe0da; border-radius:16px; padding:10px 12px; font:inherit; font-size:16px; line-height:1.35; max-height:140px; background:#fff; color:#1c2b27; }
.cm-row textarea:focus{ outline:2px solid #0F766E; outline-offset:0; border-color:#0F766E; }
.cm-send{ width:46px; height:46px; min-width:46px; border-radius:50% !important; padding:0 !important; font-size:18px; }
.cm-replying{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:#2f4f48; background:#eef7f4; border-radius:10px; padding:5px 8px; margin-bottom:6px; }
.cm-replying span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#5b6b66; }
.cm-replying button{ border:0; background:none; cursor:pointer; font-size:14px; width:30px; height:30px; margin-left:auto; color:#4a5c57; }
.cm-compose .vc-telex-row{ margin-top:6px; }
.cm-locked{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:13.5px; color:#4a5c57; padding:4px 2px; }
.cm-pick{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.cm-pick-hero{ display:flex; gap:12px; align-items:flex-start; }
.cm-pick-hero > span{ font-size:34px; }
.cm-pick-hero p{ margin:4px 0 0; color:#4a5c57; }
.cm-rules{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; line-height:1.45; }
.cm-launch-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid #cfe6de; background:#f4fbf8; border-radius:12px; padding:9px 11px; margin:6px 0 8px; cursor:pointer; color:#1c2b27; }
.cm-launch-row > span:first-child{ font-size:22px; }
.cm-launch-row > span:nth-child(2){ flex:1; display:flex; flex-direction:column; }
.cm-launch-row small{ color:#5b6b66; font-size:12px; }
.cm-launch-row em{ font-style:normal; color:#0F766E; font-weight:800; }
#communityEntryBtn{ position:relative; }
#cmPillDot{ font-size:10px; min-width:16px; height:16px; line-height:16px; text-align:center; color:#fff; padding:0 4px; }
@media (min-width:900px){
  .cm-wrap{ grid-template-columns:300px 1fr; align-items:start; }
  .cm-wrap .cm-side, .cm-wrap.cm-in .cm-side{ display:block; position:sticky; top:12px; }
  .cm-main, .cm-wrap.cm-in .cm-main{ display:flex; height:calc(100vh - 170px); }
  .cm-back{ display:none; }
}
body.dark-mode .cm-ch, body.dark-mode .cm-main, body.dark-mode .cm-react, body.dark-mode .cm-acts > button, body.dark-mode .cm-pickr, body.dark-mode .cm-older, body.dark-mode .cm-back, body.dark-mode .cm-row textarea{ background:#14211e; border-color:#2b3d38; color:#e3eeea; }
body.dark-mode .cm-ch.on, body.dark-mode .cm-head, body.dark-mode .cm-compose, body.dark-mode .cm-launch-row, body.dark-mode .cm-lesson, body.dark-mode .cm-starter{ background:#182925; border-color:#2b3d38; color:#e3eeea; }
body.dark-mode .cm-msg:hover, body.dark-mode .cm-msg.open, body.dark-mode .cm-quote, body.dark-mode .cm-tr, body.dark-mode .cm-replying, body.dark-mode .cm-day span{ background:#1c2e2a; color:#cfe0da; }
body.dark-mode .cm-body, body.dark-mode .cm-who b, body.dark-mode .cm-ch-txt b, body.dark-mode .cm-lesson b{ color:#e8f2ee; }
body.dark-mode .cm-ch-txt small, body.dark-mode .cm-who time, body.dark-mode .cm-head-txt small, body.dark-mode .cm-lesson small{ color:#9fb4ad; }

/* v293 · ▶ Teach this plan (326-lesson-teach.js) */
.vc-lpt{ position:fixed; z-index:9500; right:16px; top:84px; width:360px; max-height:calc(100vh - 190px); display:flex; flex-direction:column; background:#fff; border:1px solid #cfe0da; border-radius:18px; box-shadow:0 14px 40px rgba(6,40,34,.22); overflow:hidden; color:#1c2b27; }
.vc-lpt.min{ max-height:none; }
.vc-lpt-top{ display:flex; align-items:center; gap:6px; padding:9px 10px 9px 14px; background:#0F766E; color:#fff; }
.vc-lpt-title{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.vc-lpt-x{ width:34px; height:34px; border:0; border-radius:10px; background:rgba(255,255,255,.16); color:#fff; font-size:15px; cursor:pointer; }
.vc-lpt-mini{ padding:8px 14px; font-size:13px; }
.vc-lpt-now{ padding:12px 14px 10px; border-bottom:1px solid #e9f0ed; background:#f5fbf8; }
.vc-lpt-now small{ color:#5b6b66; font-size:12px; display:block; }
.vc-lpt-now b{ font-size:17px; display:block; margin-top:2px; }
.vc-lpt-now p{ margin:6px 0 0; font-size:13.5px; color:#2f4f48; line-height:1.4; white-space:pre-wrap; }
.vc-lpt-clock{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.vc-lpt-time{ font-variant-numeric:tabular-nums; font-weight:800; font-size:18px; color:#0F766E; }
.vc-lpt-time.over{ color:#b45309; }
.vc-lpt-nav{ display:flex; gap:8px; margin-top:8px; }
.vc-lpt-nav button{ flex:1; }
.vc-lpt-tabs{ display:flex; gap:4px; padding:6px 10px 0; }
.vc-lpt-tabs button{ border:0; background:none; padding:7px 10px; border-radius:10px 10px 0 0; font-size:12.5px; font-weight:700; color:#4a5c57; cursor:pointer; }
.vc-lpt-tabs button.on{ background:#eef7f4; color:#0F766E; }
.vc-lpt-body{ flex:1; overflow-y:auto; padding:8px 12px; min-height:60px; }
.vc-lpt-steps{ margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:4px; }
.vc-lpt-steps li button, .vc-lpt-steps li span{ display:block; width:100%; text-align:left; border:0; background:none; padding:6px 6px; border-radius:8px; font:inherit; font-size:13.5px; color:#1c2b27; cursor:pointer; }
.vc-lpt-steps li.on button, .vc-lpt-steps li.on span{ background:#e6f6f1; font-weight:700; }
.vc-lpt-steps li.done b{ text-decoration:line-through; color:#6b7a75; }
.vc-lpt-steps small{ color:#6b7a75; }
.vc-lpt-words{ display:flex; flex-direction:column; gap:4px; }
.vc-lpt-w{ display:flex; align-items:center; gap:8px; font-size:14px; }
.vc-lpt-w span{ color:#4a5c57; font-size:13px; }
.vc-lpt-say{ width:34px !important; height:34px !important; min-width:34px; font-size:14px !important; margin:0 !important; }
.vc-lpt-tools{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 12px; border-top:1px solid #e9f0ed; }
.vc-lpt-tools:empty{ display:none; }
.vc-lpt-share{ font-size:12.5px; color:#4a5c57; display:flex; gap:6px; align-items:center; }
@media (max-width:700px){
  .vc-lpt{ left:8px; right:8px; width:auto; top:auto; bottom:calc(84px + env(safe-area-inset-bottom)); max-height:64vh; }
  .vc-lpt-body{ min-height:110px; }
  .vc-lpt-now{ padding:10px 14px 8px; }
  body.in-live-room .vc-lpt{ bottom:calc(96px + env(safe-area-inset-bottom)); }
}
body.dark-mode .vc-lpt{ background:#14211e; border-color:#2b3d38; color:#e3eeea; }
body.dark-mode .vc-lpt-now{ background:#182925; border-color:#2b3d38; }
body.dark-mode .vc-lpt-now p, body.dark-mode .vc-lpt-w span, body.dark-mode .vc-lpt-now small{ color:#b7cac3; }
body.dark-mode .vc-lpt-steps li button, body.dark-mode .vc-lpt-steps li span{ color:#e3eeea; }
body.dark-mode .vc-lpt-steps li.on button, body.dark-mode .vc-lpt-steps li.on span, body.dark-mode .vc-lpt-tabs button.on{ background:#1c2e2a; }
.vc-ll-app{ background:#fef3c7 !important; color:#92400e !important; }

/* v293 · 🔍 Explain pill (vcBdBtn) — Survival, Reading, Idioms */
button.vc-bd-pill, .vd button.vc-bd-pill{ display:inline-flex; align-items:center; gap:3px; margin:2px 0 2px 4px; padding:5px 12px; min-height:36px; border-radius:999px; border:1px solid #cfe0da; background:#f3faf7; color:#0b5e57; font:600 12.5px/1.2 var(--font, inherit); cursor:pointer; vertical-align:middle; white-space:nowrap; }
button.vc-bd-pill:hover{ border-color:#0F766E; }
@media (max-width:640px){ button.vc-bd-pill{ min-height:40px; } }
body.dark-mode button.vc-bd-pill{ background:#182925; border-color:#2b3d38; color:#9fe0cf; }

/* v293 · ✓ Verified on other teaching sites (328-ext-links.js) */
.tc-ext{ font-size:12px; font-weight:700; color:#0b5e57; margin-top:2px; }
.vc-tm-ext{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.vc-ext-chip{ display:inline-flex; align-items:center; min-height:34px; padding:4px 12px; border-radius:999px; background:#e6f6f1; border:1px solid #b6e0d3; color:#0b5e57; font-size:12.5px; font-weight:700; text-decoration:none; }
.tf-ext{ margin-top:14px; padding:12px; border:1px solid #d5e7e0; border-radius:14px; background:#f7fcfa; }
.tf-ext-title{ font-weight:800; margin-bottom:4px; }
.tf-ext-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.tf-ext-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 10px; background:#fff; border:1px solid #e2ece8; border-radius:12px; }
.tf-ext-pf{ display:flex; flex-direction:column; min-width:0; flex:1 1 180px; }
.tf-ext-pf a{ font-size:12px; color:#0F766E; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tf-ext-st{ font-size:12px; font-weight:700; color:#4a5c57; }
.tf-ext-st.ok{ color:#047857; } .tf-ext-st.wait{ color:#92400e; } .tf-ext-st.bad{ color:#b91c1c; }
.tf-ext-btns{ display:flex; gap:6px; } .tf-ext-btns button{ margin:0 !important; min-height:36px; }
.tf-ext-how{ font-size:13px; line-height:1.45; background:#fff; border:1px dashed #b6e0d3; border-radius:12px; padding:8px 12px; margin-bottom:8px; }
.tf-ext-how ol{ margin:4px 0 0; padding-left:20px; }
.tf-ext-how code, .vc-ext-adm code{ font-weight:800; background:#e6f6f1; padding:1px 6px; border-radius:6px; }
.tf-ext-add{ display:flex; gap:6px; } .tf-ext-add input{ flex:1; margin:0 !important; } .tf-ext-add button{ margin:0 !important; white-space:nowrap; }
.vc-ext-admin{ margin-top:16px; }
.vc-ext-adm{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:10px; border:1px solid #e2ece8; border-radius:12px; margin-bottom:6px; font-size:13.5px; overflow-wrap:anywhere; }
.vc-ext-adm.wait{ border-color:#f5c26b; background:#fffbeb; }
.vc-ext-adm-b{ display:flex; gap:6px; } .vc-ext-adm-b button{ margin:0 !important; }
body.dark-mode .tf-ext, body.dark-mode .tf-ext-row, body.dark-mode .tf-ext-how{ background:#14211e; border-color:#2b3d38; }
body.dark-mode .tc-ext, body.dark-mode .vc-ext-chip{ color:#9fe0cf; } body.dark-mode .vc-ext-chip{ background:#182925; border-color:#2b3d38; }

/* v294 · Community: who's here + a third column on wide screens */
.cm-people{ display:none; }
.cm-people-btn{ margin-left:auto; flex:0 0 auto; min-height:38px; padding:4px 12px; border-radius:999px; border:1px solid #cfe0da; background:#fff; color:#0b5e57; font-weight:800; font-size:13px; cursor:pointer; }
.cm-people-h{ display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#4a5c57; margin:12px 2px 6px; }
.cm-people-h:first-child{ margin-top:0; }
.cm-people-h span{ background:#eef5f2; border-radius:999px; padding:1px 8px; font-size:11.5px; }
.cm-person{ display:flex; align-items:center; gap:8px; padding:5px 4px; border-radius:10px; position:relative; }
.cm-person:hover{ background:#f5faf8; }
.cm-person .teacher-avatar{ font-size:13px; flex:0 0 auto; }
.cm-here-dot{ position:absolute; left:26px; top:27px; width:10px; height:10px; border-radius:50%; background:#16a34a; border:2px solid #fff; }
.cm-person-n{ flex:1; min-width:0; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-person-n small{ color:#6b7a75; font-size:11px; }
.cm-person .cm-badge{ margin-left:4px; padding:0 5px; }
.cm-dm{ width:34px; height:34px; border-radius:50%; border:1px solid #d8e6e1; background:#fff; cursor:pointer; font-size:14px; flex:0 0 auto; }
.cm-dm:hover{ border-color:#0F766E; }
.cm-people-empty{ font-size:12.5px; color:#6b7a75; padding:4px 4px 8px; }
#vcCmPeople .cm-person{ padding:7px 4px; }
@media (min-width:1200px){
  .cm-wrap{ grid-template-columns:280px 1fr 250px; }
  .cm-people{ display:block; position:sticky; top:12px; background:#fff; border:1px solid #e2ece8; border-radius:18px; padding:14px 10px; overflow-y:auto; }
  .cm-people:empty{ display:none; }
  .cm-wrap:has(> .cm-people:empty){ grid-template-columns:280px 1fr; }   /* v315: no room open → the room list and welcome use the width */
  .cm-people-btn{ display:none; }
}
body.dark-mode .cm-people, body.dark-mode .cm-people-btn, body.dark-mode .cm-dm{ background:#14211e; border-color:#2b3d38; color:#e3eeea; }
body.dark-mode .cm-person-n b{ color:#e8f2ee; }

/* v295 · Community: tap a person for their profile card; 📷 tiny live camera tiles */
.cm-person-open, .cm-av-btn, .cm-who-n{ appearance:none; border:0 !important; background:none !important; padding:0 !important; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; min-height:0; box-shadow:none !important; }
.cm-person-open{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; position:relative; border-radius:8px; }
.cm-person-open .cm-here-dot{ left:22px; top:22px; }
.cm-person-open:focus-visible, .cm-av-btn:focus-visible, .cm-who-n:focus-visible{ outline:2px solid #0F766E; outline-offset:2px; }
.cm-who-n{ font-size:14px; font-weight:800; color:#12322c; }
.cm-who-n:hover{ text-decoration:underline; }
.cm-av-btn{ display:block; border-radius:50%; }
.cm-cam{ position:relative; display:inline-block; flex:0 0 auto; border-radius:50%; overflow:hidden; background:#0b2a26; box-shadow:0 0 0 2px #16a34a; }
.cm-cam video{ width:100%; height:100%; object-fit:cover; display:block; }
.cm-cam.me video{ transform:scaleX(-1); }
.cm-cam i{ position:absolute; right:3px; top:3px; width:6px; height:6px; border-radius:50%; background:#ef4444; animation:cmCamBlink 1.6s infinite; }
.cm-cam.big{ border-radius:20px; box-shadow:0 0 0 3px #16a34a; }
.cm-cam.big i{ width:9px; height:9px; right:8px; top:8px; }
@keyframes cmCamBlink{ 50%{ opacity:.35; } }
.cm-cambar{ margin-top:12px; padding-top:10px; border-top:1px solid #e2ece8; display:flex; flex-direction:column; gap:6px; }
.cm-cambar small{ font-size:11.5px; color:#5d6f6a; line-height:1.35; }
.cm-cam-btn{ min-height:38px; border-radius:999px; border:1px solid #cfe0da !important; background:#fff !important; color:#0b5e57 !important; font-weight:800; font-size:13px; cursor:pointer; padding:4px 12px !important; }
.cm-cam-btn.on{ background:#fee2e2 !important; border-color:#fca5a5 !important; color:#991b1b !important; }
.cm-cam-see{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:#3d524c; cursor:pointer; }
.cm-prof-top{ display:flex; align-items:center; gap:14px; }
.cm-prof-top .teacher-avatar{ font-size:34px; }
.cm-prof-n{ display:block; font-size:19px; color:#12322c; }
.cm-prof-b{ margin-top:4px; display:flex; gap:4px; flex-wrap:wrap; }
.cm-prof-s{ display:block; margin-top:4px; font-size:12.5px; color:#5d6f6a; }
.cm-prof-d{ margin:14px 0 4px; display:flex; flex-direction:column; gap:8px; }
.cm-prof-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.cm-prof-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cm-prof-acts button{ margin:0 !important; flex:1 1 calc(50% - 8px); min-height:42px; }
.cm-prof-acts .cm-pa-quiet{ flex:0 1 auto; opacity:.85; font-size:13px; }
body.dark-mode .cm-who-n, body.dark-mode .cm-prof-n{ color:#e8f2ee; }
body.dark-mode .cm-cambar{ border-color:#2b3d38; } body.dark-mode .cm-cambar small, body.dark-mode .cm-cam-see, body.dark-mode .cm-prof-s{ color:#9fb4ad; }
body.dark-mode .cm-cam-btn:not(.on){ background:#14211e !important; border-color:#2b3d38 !important; color:#9fe0cf !important; }

/* v296 · Community voice rooms (330-community-av.js) + the voice bar shown across the app */
.cm-voice{ margin-top:14px; }
.cm-voice:empty{ display:none; }
.cm-voice-h{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#4a5c57; margin:4px 4px 8px; display:flex; gap:6px; align-items:baseline; }
.cm-voice-h small{ text-transform:none; letter-spacing:0; font-weight:600; color:#6b7a75; }
.cm-vroom{ border:1px solid #e2ece8; border-radius:14px; background:#fff; margin-bottom:8px; overflow:hidden; }
.cm-vroom.on{ border-color:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.15); }
.cm-vrow{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0 !important; background:none !important; cursor:pointer; text-align:left; font:inherit; color:inherit; min-height:56px; }
.cm-vrow .cm-ch-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cm-vrow .cm-ch-txt b{ font-size:14px; color:#12322c; } .cm-vrow .cm-ch-txt small{ font-size:12px; color:#5d6f6a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-vfaces{ display:flex; } .cm-vfaces .vc-vf{ margin-left:-6px; border-radius:50%; box-shadow:0 0 0 2px #fff; display:inline-flex; }
.cm-vfaces .teacher-avatar{ font-size:10px; }
.cm-vgo{ flex:0 0 auto; font-size:12px; font-weight:800; color:#0b5e57; background:#eef7f3; border-radius:999px; padding:4px 10px; }
.cm-vroom.on .cm-vgo{ background:#dcfce7; color:#166534; }
.cm-vlist{ display:flex; flex-direction:column; gap:2px; padding:0 8px 6px; }
.vc-vp{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:10px; border:0 !important; background:none !important; cursor:pointer; font:inherit; color:inherit; text-align:left; min-height:40px; }
.vc-vp:hover{ background:#f5faf8 !important; }
.vc-vp .teacher-avatar, .vc-vp img{ border-radius:50%; transition:box-shadow .12s; }
.vc-vp.speaking .teacher-avatar, .vc-vp.speaking img, .vc-vf.speaking{ box-shadow:0 0 0 3px #22c55e !important; }
.vc-vp-n{ flex:1; min-width:0; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-vp-n small{ color:#6b7a75; font-size:11px; }
.vc-vp-m{ font-size:13px; }
.cm-vacts{ display:flex; gap:8px; padding:0 12px 12px; }
.cm-vacts button{ flex:1; min-height:40px; border-radius:999px; font-weight:800; font-size:13px; cursor:pointer; border:1px solid #cfe0da !important; background:#fff !important; color:#0b5e57 !important; }
.cm-vacts .cm-vmute.on{ background:#fef3c7 !important; border-color:#fcd34d !important; color:#92400e !important; }
.cm-vacts .cm-vleave{ background:#fee2e2 !important; border-color:#fca5a5 !important; color:#991b1b !important; }
.cm-voice-note{ font-size:11.5px; color:#6b7a75; margin:2px 4px 8px; line-height:1.35; }
#vcVoiceBar{ position:fixed; z-index:9160; left:12px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:center; gap:6px; padding:6px; border-radius:999px; background:#0f3d36; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:calc(100vw - 96px); }
#vcVoiceBar button{ border:0; cursor:pointer; font:inherit; color:inherit; }
.vc-vb-go{ display:flex; align-items:center; gap:8px; background:none; padding:2px 8px 2px 6px; min-width:0; text-align:left; }
.vc-vb-go span:last-child{ display:flex; flex-direction:column; min-width:0; }
.vc-vb-go b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vc-vb-go small{ font-size:11px; opacity:.8; }
.vc-vb-dot{ width:12px; height:12px; border-radius:50%; background:#22c55e; flex:0 0 auto; transition:box-shadow .12s; }
.vc-vb-dot.speaking{ box-shadow:0 0 0 4px rgba(34,197,94,.45); }
.vc-vb-mute, .vc-vb-leave{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.14) !important; font-size:16px; flex:0 0 auto; }
.vc-vb-mute.on{ background:#f59e0b !important; }
.vc-vb-leave{ background:#dc2626 !important; font-weight:800; }
@media (min-width:1024px){ #vcVoiceBar{ bottom:24px; left:calc(var(--side-px, 0px) + 20px); } }
body.in-live-room #vcVoiceBar{ display:none; }
body.dark-mode .cm-vroom{ background:#14211e; border-color:#2b3d38; } body.dark-mode .cm-vrow .cm-ch-txt b{ color:#e8f2ee; }
body.dark-mode .cm-vacts button:not(.on):not(.cm-vleave){ background:#14211e !important; border-color:#2b3d38 !important; color:#9fe0cf !important; }

/* v296 · 👥 Group chats (332-group-chat.js): a floating window like the private chat, a phone sheet below 760px */
.vc-gc{ position:fixed; z-index:9500; right:16px; bottom:16px; width:340px; height:460px; max-width:calc(100vw - 24px); max-height:calc(100vh - 32px);
  display:flex; flex-direction:column; background:var(--card, #fff); border-radius:16px; box-shadow:0 16px 50px rgba(0,0,0,.35); padding:10px 12px 12px; }
.vc-gc-head{ display:flex; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid #e2ece8; cursor:grab; touch-action:none; }
.vc-gc-head .study-grip{ color:#9aaaa5; }
.vc-gc-emoji{ font-size:24px; line-height:1; }
.vc-gc-t{ flex:1; min-width:0; display:flex; flex-direction:column; border:0; background:none; text-align:left; cursor:pointer; padding:0; font:inherit; color:inherit; }
.vc-gc-t b{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-gc-t small{ font-size:11.5px; color:#6b7a75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-gc-log{ flex:1; min-height:0; overflow-y:auto; padding:8px 2px; display:flex; flex-direction:column; gap:2px; }
.vc-gc-sys{ align-self:center; font-size:12px; color:#5d6f6a; background:#f1f6f4; border-radius:999px; padding:3px 10px; margin:6px 0; text-align:center; }
.vc-gc-msg{ display:flex; gap:6px; align-items:flex-end; margin-top:6px; }
.vc-gc-msg.grouped{ margin-top:1px; }
.vc-gc-msg.mine{ justify-content:flex-end; }
.vc-gc-av{ width:30px; flex:0 0 30px; }
.vc-gc-col{ max-width:78%; display:flex; flex-direction:column; min-width:0; }
.vc-gc-msg.mine .vc-gc-col{ align-items:flex-end; }
.vc-gc-who{ font-size:11.5px; font-weight:800; color:#0b5e57; margin:0 0 2px 10px; }
.vc-gc-bub{ background:#f1f6f4; color:#12322c; border-radius:16px 16px 16px 4px; padding:7px 11px; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.vc-gc-msg.mine .vc-gc-bub{ background:#0F766E; color:#fff; border-radius:16px 16px 4px 16px; }
.vc-gc-msg.mine .vc-gc-bub a{ color:#fff; }
.vc-gc-bub .cm-tr{ margin-top:4px; font-size:12.5px; opacity:.9; }
.vc-gc-rm{ opacity:.7; }
.vc-gc-meta{ display:flex; gap:4px; align-items:center; font-size:10.5px; color:#8a9a95; margin:1px 6px 0; }
.vc-gc-more{ border:0; background:none; cursor:pointer; color:#6b7a75; font-size:15px; padding:0 4px; min-width:28px; min-height:24px; opacity:.55; }
.vc-gc-msg:hover .vc-gc-more, .vc-gc-more:focus-visible{ opacity:1; }
.vc-gc-compose{ display:flex; gap:6px; align-items:flex-end; padding-top:8px; border-top:1px solid #e2ece8; }
.vc-gc-compose textarea{ flex:1; resize:none; border:1px solid #cfe0da; border-radius:14px; padding:9px 12px; font:inherit; font-size:14px; min-height:40px; max-height:140px; }
.vc-gc-send{ width:42px; height:42px; border-radius:50%; padding:0 !important; margin:0 !important; flex:0 0 auto; }
.vc-gc + .vc-telex-row, .vc-gc .vc-telex-row{ margin-top:6px; }
.vc-gc .vc-gc-rs{ display:block; z-index:2; }
.vc-gc .vc-gc-rs.tl{ left:2px; top:2px; right:auto; bottom:auto; transform:rotate(180deg); }
.vc-gc.gc-big .vc-gc-bub{ font-size:16px; }
.vc-gc.gc-big .vc-gc-compose textarea{ font-size:16px; }
@media (max-width:759px){
  .vc-gc{ left:0; right:0; top:0; bottom:0; width:auto; height:auto; max-width:none; max-height:none; border-radius:0; z-index:9510;
    padding-top:calc(10px + env(safe-area-inset-top)); padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .vc-gc-head{ cursor:default; touch-action:auto; } .vc-gc-head .study-grip, .vc-gc-big, .vc-gc .vc-gc-rs{ display:none !important; }
  .vc-gc-compose textarea{ font-size:16px; }
}
.vc-gc-new{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:40px; margin:0 0 8px; border-radius:12px; border:1px dashed #9cc7bb; background:#f3faf7; color:#0b5e57; font-weight:800; font-size:13.5px; cursor:pointer; }
.cl-gav{ width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:#e6f4ef; display:inline-flex; align-items:center; justify-content:center; font-size:21px; }
.cl-gn{ font-size:11px; color:#5d6f6a; margin-left:4px; }
.vc-gc-lbl{ display:block; font-size:12.5px; font-weight:800; color:#3d524c; margin:10px 0 6px; }
.vc-gc-lbl input[type=text]{ display:block; width:100%; margin-top:6px; min-height:42px; border:1px solid #cfe0da; border-radius:12px; padding:8px 12px; font:inherit; font-size:15px; }
.vc-gc-lbl small{ font-weight:600; color:#6b7a75; }
.vc-gc-emojis{ display:flex; flex-wrap:wrap; gap:6px; }
.vc-gc-emojis button{ width:40px; height:40px; border-radius:12px; border:1px solid #d8e6e1; background:#fff; font-size:20px; cursor:pointer; }
.vc-gc-emojis button.on{ border-color:#0F766E; box-shadow:0 0 0 2px rgba(15,118,110,.25); }
.vc-gc-pick{ max-height:min(42vh, 340px); overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-top:6px; border:1px solid #e2ece8; border-radius:12px; padding:4px; }
.vc-gc-pr{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px; cursor:pointer; min-height:44px; }
.vc-gc-pr:hover{ background:#f5faf8; } .vc-gc-pr.on{ background:#e6f4ef; }
.vc-gc-pr input{ width:18px; height:18px; flex:0 0 auto; }
.vc-gc-go{ width:100%; margin-top:12px !important; min-height:46px; }
.vc-gc-rename{ display:flex; gap:8px; align-items:center; } .vc-gc-rename input{ flex:1; margin-top:0 !important; } .vc-gc-rename button{ margin:0 !important; }
.vc-gc-mute{ margin:10px 0; }
.vc-gc-mem{ display:flex; flex-direction:column; gap:2px; }
.vc-gc-mrow{ display:flex; align-items:center; gap:6px; }
.vc-gc-kick{ width:34px; height:34px; border-radius:50%; border:1px solid #fca5a5; background:#fff; color:#991b1b; cursor:pointer; flex:0 0 auto; }
.vc-gc-info-acts{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } .vc-gc-info-acts button{ flex:1; margin:0 !important; min-height:42px; }
.vc-gc-leave{ color:#991b1b !important; border-color:#fca5a5 !important; }
#vcGcToast{ position:fixed; z-index:9600; left:50%; top:16px; transform:translate(-50%, -140%); transition:transform .25s; display:flex; align-items:center; gap:10px; max-width:min(420px, calc(100vw - 24px));
  background:#fff; border:1px solid #d8e6e1; border-radius:16px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.2); cursor:pointer; text-align:left; font:inherit; color:#12322c; }
#vcGcToast.show{ transform:translate(-50%, 0); }
#vcGcToast > span:first-child{ font-size:22px; } #vcGcToast span:last-child{ display:flex; flex-direction:column; min-width:0; }
#vcGcToast small{ color:#5d6f6a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.dark-mode .vc-gc{ background:#14211e; color:#e3eeea; } body.dark-mode .vc-gc-bub{ background:#1d2e2a; color:#e3eeea; }
body.dark-mode .vc-gc-msg.mine .vc-gc-bub{ background:#0F766E; color:#fff; } body.dark-mode .vc-gc-sys{ background:#1d2e2a; color:#9fb4ad; }
body.dark-mode .vc-gc-compose textarea, body.dark-mode .vc-gc-lbl input[type=text]{ background:#0f1a17; color:#e3eeea; border-color:#2b3d38; }
body.dark-mode .vc-gc-new, body.dark-mode #vcGcToast{ background:#14211e; color:#9fe0cf; border-color:#2b3d38; }
/* v297 · teacher bios as paragraphs (vcBioHtml) */
.vc-bio-host, .adm-tl-bio, .vc-ap-bio{ white-space:normal !important; }
.vc-bio p{ margin:0 0 .75em; }
.vc-bio > :last-child{ margin-bottom:0; }
.vc-bio-h{ font-weight:800; margin:.9em 0 .35em; }
.vc-bio-h:first-child{ margin-top:0; }
.vc-bio-li{ padding-left:1.35em; text-indent:-1.35em; margin:.3em 0; }
.vc-bio-li + p, .vc-bio-li + .vc-bio-h{ margin-top:.75em; }
.tf-bio-tip{ margin:4px 0 4px !important; font-size:12.5px; }
.tf-bio-preview{ margin:0 0 10px; border:1px solid #d5e7e0; border-radius:12px; background:#f7fcfa; }
.tf-bio-preview summary{ cursor:pointer; padding:8px 12px; font-weight:700; font-size:13.5px; color:#0b5e57; }
.tf-bio-pv{ padding:4px 14px 12px; font-size:14px; line-height:1.55; max-height:320px; overflow-y:auto; }
body.dark-mode .tf-bio-preview{ background:#14211e; border-color:#2b3d38; }

/* v298 · 📅 Busy times from other sites (336-busy-calendar.js) */
.tf-busy{ margin:10px 0; padding:12px; border:1px solid #d5e7e0; border-radius:14px; background:#f7fcfa; }
.tf-busy-title{ font-weight:800; margin-bottom:4px; }
.tf-busy-how{ margin:0 0 8px; font-size:13px; }
.tf-busy-how summary{ cursor:pointer; font-weight:700; color:#0b5e57; padding:4px 0; }
.tf-busy-how ol{ margin:6px 0; padding-left:20px; line-height:1.5; }
.tf-busy-how li{ margin-bottom:4px; }
.tf-busy-add{ display:flex; gap:6px; }
.tf-busy-add input{ flex:1; min-width:0; margin:0 !important; }
.tf-busy-add button{ margin:0 !important; white-space:nowrap; }
.tf-busy-on{ padding:10px 12px; border-radius:12px; background:#fff; border:1px solid #b6e0d3; font-size:13.5px; overflow-wrap:anywhere; }
.tf-busy-on.warn{ border-color:#f5c26b; background:#fffbeb; }
.tf-busy-err{ color:#92400e; font-size:13px; margin-top:4px; }
.tf-busy-btns{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tf-busy-btns button{ margin:0 !important; min-height:38px; }
#tfBusyEdit{ margin-top:8px; }
body.dark-mode .tf-busy, body.dark-mode .tf-busy-on{ background:#14211e; border-color:#2b3d38; }

/* v299 · growth pack */
.tc-trial{ font-size:12px; font-weight:800; color:#9a3412; background:#ffedd5; border-radius:999px; padding:2px 9px; display:inline-block; margin:2px 0 4px; }
.tm2-trial b{ color:#9a3412; }
.tf-trial{ margin:4px 0 12px; padding:10px 12px; border:1px dashed #fdba74; border-radius:12px; background:#fff7ed; }
.tf-trial-on{ display:flex; gap:8px; align-items:flex-start; font-size:14px; cursor:pointer; }
.tf-trial-on input{ margin-top:3px; width:18px; height:18px; }
.tf-trial-on small{ color:#6b4a2b; font-weight:400; }
.tf-trial-row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.tf-trial-row label{ flex:1; min-width:120px; }
.tf-trial-row .teacher-search{ margin:4px 0 0 !important; }
.bk-trial-pick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px; }
.bk-trial-pick button{ text-align:left; border:2px solid #e2ece8; background:#fff; border-radius:14px; padding:10px 12px; cursor:pointer; color:#1c2b27; font:inherit; display:flex; flex-direction:column; gap:2px; min-height:64px; }
.bk-trial-pick button b{ font-size:14px; }
.bk-trial-pick button small{ color:#5b6b66; font-size:12px; }
.bk-trial-pick button.on{ border-color:#0F766E; background:#f0faf7; }
.vc-rate-lead{ margin:0 0 8px; font-weight:700; }
.vc-rate-stars{ display:flex; gap:6px; justify-content:center; margin:6px 0 12px; }
.vc-rate-stars button{ font-size:38px; width:52px; height:52px; border:0; background:none; color:#d6d3d1; cursor:pointer; line-height:1; }
.vc-rate-stars button.on{ color:#f59e0b; }
.vc-rate-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.vc-rate-chip{ border:1px solid #d8e6e1; background:#fff; border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; min-height:36px; color:#2f4f48; }
.vc-rate-chip.on{ border-color:#0F766E; background:#e6f6f1; font-weight:700; }
.vc-rate-btns{ display:flex; gap:8px; margin-top:8px; }
.vc-rate-done{ text-align:center; padding:10px 4px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.vc-rate-big{ font-size:44px; }
.vc-st-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
@media (min-width:700px){ .vc-st-grid{ grid-template-columns:repeat(4, 1fr); } }
.vc-st-tile{ border:1px solid #e2ece8; border-radius:14px; padding:10px 12px; background:#fbfdfc; display:flex; flex-direction:column; gap:1px; }
.vc-st-tile span{ font-size:18px; }
.vc-st-tile b{ font-size:20px; color:#0b3b35; overflow-wrap:anywhere; }
.vc-st-tile small{ font-size:12px; color:#4a5c57; }
.vc-st-tile em{ font-style:normal; font-size:11.5px; color:#0F766E; font-weight:700; }
.vc-st-spark{ width:100%; height:64px; display:block; }
.vc-st-spark rect{ fill:#0F766E; opacity:.85; }
.vc-st-tips{ display:flex; flex-direction:column; gap:8px; }
.vc-st-tip{ display:flex; gap:10px; align-items:center; border:1px solid #fde68a; background:#fffbeb; border-radius:12px; padding:8px 10px; }
.vc-st-tip span{ font-size:20px; }
.vc-st-tip p{ margin:0; flex:1; font-size:13.5px; }
.vc-st-tip button{ margin:0 !important; white-space:nowrap; }
.cm-offer{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; padding:10px 12px; border:1px solid #fdba74; background:#fff7ed; border-radius:14px; max-width:520px; }
.cm-offer > span{ font-size:24px; }
.cm-offer > div{ flex:1; min-width:160px; display:flex; flex-direction:column; }
.cm-offer small{ color:#6b4a2b; font-size:12.5px; }
.cm-offer button{ margin:0 !important; min-height:38px; }
.vc-wp{ margin:10px 0 14px; padding:14px; border-radius:18px; background:linear-gradient(135deg, #f0faf7, #fff); border:1px solid #cfe6de; }
.vc-wp-head{ display:flex; align-items:center; gap:8px; }
.vc-wp-head b{ font-size:16px; flex:1; }
.vc-wp-head span{ font-size:12.5px; font-weight:800; color:#0F766E; }
.vc-wp-x{ width:34px; height:34px; border:0; background:none; cursor:pointer; color:#5b6b66; font-size:15px; }
.vc-wp-bar{ height:6px; background:#e2ece8; border-radius:999px; margin:8px 0 10px; overflow:hidden; }
.vc-wp-bar i{ display:block; height:100%; background:#0F766E; border-radius:999px; }
.vc-wp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.vc-wp-list li > button{ width:100%; display:flex; align-items:center; gap:10px; text-align:left; border:1px solid #e2ece8; background:#fff; border-radius:12px; padding:10px 12px; min-height:48px; cursor:pointer; font:inherit; color:#1c2b27; }
.vc-wp-list li.next > button{ border-color:#0F766E; box-shadow:0 0 0 2px #ccefe5; }
.vc-wp-list li.done > button{ color:#6b7a75; background:#f7faf9; }
.vc-wp-list li.done .vc-wp-t{ text-decoration:line-through; }
.vc-wp-ic{ width:28px; text-align:center; font-size:18px; }
.vc-wp-list li.done .vc-wp-ic{ color:#047857; font-weight:900; }
.vc-wp-t{ flex:1; font-size:14.5px; font-weight:600; }
.vc-wp-list em{ font-style:normal; color:#0F766E; font-weight:900; }
.vc-wp-goals{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 2px 2px; }
.vc-wp-goals button{ border:1px solid #cfe0da; background:#fff; border-radius:999px; padding:7px 12px; min-height:38px; cursor:pointer; font-size:13.5px; color:#1c2b27; }
.vc-wp-goals button:hover{ border-color:#0F766E; }
.vc-week{ margin:10px 0 14px; padding:14px; border-radius:18px; background:#fff; border:1px solid #e2ece8; }
.vc-week-head{ display:flex; align-items:baseline; gap:8px; }
.vc-week-head b{ font-size:16px; }
.vc-week-head small{ color:#5b6b66; }
.vc-week-bars{ display:flex; gap:8px; align-items:flex-end; height:86px; margin:10px 0 8px; }
.vc-week-day{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; justify-content:flex-end; height:100%; }
.vc-week-day i{ display:block; width:100%; max-width:34px; background:#99d5c6; border-radius:8px 8px 3px 3px; }
.vc-week-day.today i{ background:#0F766E; }
.vc-week-day span{ font-size:11px; color:#5b6b66; font-weight:700; }
.vc-week-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.vc-week-stats span{ display:flex; flex-direction:column; align-items:center; font-size:11.5px; color:#4a5c57; text-align:center; }
.vc-week-stats b{ font-size:17px; color:#0b3b35; }
.vc-week-go{ width:100%; margin-top:10px !important; }
.vc-tdc{ display:flex; gap:12px; align-items:center; margin:10px 0 14px; padding:12px 14px; border-radius:18px; background:#fff; border:1px solid #e2ece8; }
.vc-tdc-ic{ font-size:28px; }
.vc-tdc-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vc-tdc-txt b{ font-size:15px; }
.vc-tdc-txt small{ color:#4a5c57; font-size:12.5px; }
.vc-tdc-streak{ white-space:nowrap; font-size:12px; background:#ffedd5; color:#9a3412; border-radius:999px; padding:1px 8px; margin-left:4px; }
.vc-tdc-lines{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.vc-tdc-lines em{ font-style:normal; font-size:12.5px; background:#f3f8f6; border-radius:8px; padding:2px 8px; color:#2f4f48; }
.vc-tdc-lines em.ok{ background:#dcfce7; color:#166534; }
.vc-tdc-lines em.ok::before{ content:'✓ '; }
.vc-tdc-go{ margin:0 !important; white-space:nowrap; }
body.dark-mode .vc-wp, body.dark-mode .vc-week, body.dark-mode .vc-tdc, body.dark-mode .bk-trial-pick button, body.dark-mode .vc-st-tile, body.dark-mode .vc-wp-list li > button, body.dark-mode .vc-wp-goals button, body.dark-mode .vc-rate-chip{ background:#14211e; border-color:#2b3d38; color:#e3eeea; }
body.dark-mode .tf-trial, body.dark-mode .cm-offer, body.dark-mode .vc-st-tip{ background:#2a1f12; border-color:#7c4a1a; color:#f3e3d0; }

/* v300 · simpler phone flashcards (a learner: "this screen is very busy — flashcards should be simpler") */
.vc-acc-car{ display:none; }
/* v307: the fold works on computers too (owner: the accent row was always open there) */
@media all{
  body:not(.focus-mode) #fcAccents{ margin:6px auto 2px; }
  body:not(.focus-mode) #fcAccents .vc-acc-h{ display:inline-flex; align-items:center; gap:4px; border:1px solid #d6e5dc; background:transparent; border-radius:999px; padding:4px 11px; min-height:32px; font-size:12.5px; color:#3f5a50; cursor:pointer; margin:0; }
  body:not(.focus-mode) #fcAccents .vc-acc-ht{ display:inline !important; }
  body:not(.focus-mode) #fcAccents .vc-acc-car{ display:inline; font-size:10px; transition:transform .15s; }
  body:not(.focus-mode) #fcAccents.open .vc-acc-car{ transform:rotate(180deg); }
  html:not(:has(#vcTour.show)) body:not(.focus-mode) #fcAccents:not(.open) .vc-acc-b{ display:none !important; }
  body:not(.focus-mode) #fcAccents.open .vc-acc-h{ flex-basis:100%; justify-content:center; border-color:transparent; }
  body.dark-mode:not(.focus-mode) #fcAccents .vc-acc-h{ color:#cfe9df; border-color:#245244; }
}
@media (max-width:1023px){
  /* the tone color key joins the other extras behind ⋯ Tools */
  html:not(:has(#vcTour.show)) body:not(.focus-mode) #tab-learn:not(.fc-open) #toneLegendRow{ display:none !important; }
}
/* while grading, the floating ✎ pencils pill and 💬 sit above the grade buttons instead of over Again / Easy */
@media (max-width:520px){
  html[data-vc-tab="learn"] body.fc-revealed:not(.focus-mode) #vcSuggestModeBtn,
  html[data-vc-tab="learn"] body.fc-revealed:not(.focus-mode) #chatLauncherBtn{ bottom:calc(170px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* v301 · focus mode, tidier (342-focus-plus.js) */
.vc-fo{ display:none; }
body.focus-mode .vc-fo{ display:flex; justify-content:center; gap:8px; margin:2px 0 8px; flex-wrap:wrap; }
.vc-fo-b, .vd .vc-fo-b{ border:1px solid var(--line, #dfe6e2) !important; background:var(--card, #fff) !important; color:var(--ink, #1f2d27) !important; border-radius:999px !important; padding:6px 13px !important; min-height:34px; font:700 12.5px/1.2 var(--font, inherit); cursor:pointer; }
.vc-fo-b[aria-pressed="true"]{ border-color:var(--cover, #0f766e) !important; color:var(--cover, #0f766e) !important; }
body.dark-mode .vc-fo-b{ background:#11241e !important; color:#cfe9df !important; border-color:#245244 !important; }
/* the tool icons say what they are */
body.focus-mode #cardTools .speak-btn{ flex-direction:column; height:54px; gap:1px; font-size:19px; }
body.focus-mode #cardTools .speak-btn::after{ display:block; content:attr(data-label); font:700 9.5px/1 var(--font, inherit); color:var(--muted, #667); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
body.focus-mode #cardTools .fc-more-btn{ display:none !important; }
/* 🗺️ Accents in focus mode: shown or hidden with the chip, all three buttons at once */
body.focus-mode.vc-focus-acc #fcAccents{ display:flex !important; margin:8px auto 0; }
body.focus-mode #fcAccents .vc-acc-h{ display:none !important; }
body.focus-mode:not(.fc-revealed) #fcAccents.vc-acc-hold{ display:none !important; }
/* ◐ Show less: the card, 🔊 Hear, the answer and the grades */
body.focus-mode.vc-focus-less #cardTools .speak-btn:not(#flashSpeak){ display:none !important; }
body.focus-mode.vc-focus-less #cardTools #flashSpeak{ max-width:none; flex:0 1 160px; flex-direction:row; gap:6px; height:46px; }
body.focus-mode.vc-focus-less #cardTools #flashSpeak::after{ font-size:13px; color:inherit; }
body.focus-mode.vc-focus-less :is(#contextBox, #flashEditWord, #flashAddDeck, #flashcardCat, #pronFeedback, #recordFeedback){ display:none !important; }
body.focus-mode.vc-focus-less .card{ min-height:min(50vh, 440px); }
@supports (height:1dvh){ body.focus-mode.vc-focus-less .card{ min-height:min(50dvh, 440px); } }
html.vc-ph body.focus-mode.vc-focus-less #tab-learn #flashcard{ min-height:min(50dvh, 440px); padding-top:24px; }
@media (max-width:1023px){
  /* the fixed topic bar is 52px tall — the page no longer leaves an empty band under it, and the level chooser stays outside focus mode */
  body.focus-mode .content{ padding-top:22px; }
  body.focus-mode #tab-learn .vc-chipsel[data-for="tierSelect"]{ display:none !important; }
}
/* v302 · 🧭 Your first steps sits under today's lesson, folded to one line */
.vc-wp-tog{ flex:1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; border:0; background:none; padding:4px 0; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.vc-wp-tog b{ font-size:15.5px; flex:1; min-width:0; }
.vc-wp-n{ font-size:12.5px; font-weight:800; color:#0F766E; }
.vc-wp-nx{ flex-basis:100%; font-size:13px; color:#4b5d57; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-wp-car{ font-style:normal; color:#0F766E; font-size:12px; }
.vc-wp:not(.open){ padding:10px 14px; }
.vc-wp:not(.open) .vc-wp-bar{ margin:6px 0 0; }
body.dark-mode .vc-wp-nx{ color:#b9cbc5; }
.vc-wp-list[hidden]{ display:none !important; }

/* v297 · daily habits (334-habits.js): the home card, reminders, weekly recap, leaderboard, badge pop-up */
.vc-daily{ background:#fff; border:1px solid #dcebe5; border-radius:20px; padding:14px 16px; margin:12px 0; box-shadow:0 2px 10px rgba(15,61,54,.06); }
.vc-dl-top{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.vc-dl-streak, .vc-dl-freeze, .vc-dl-week{ display:flex; align-items:center; gap:6px; border-radius:14px; padding:8px 12px; background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; font-size:13px; }
.vc-dl-streak b{ font-size:20px; } .vc-dl-fire{ font-size:20px; filter:grayscale(.6); } .vc-dl-streak.done .vc-dl-fire{ filter:none; }
.vc-dl-freeze{ background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; cursor:pointer; font:inherit; font-size:13px; min-height:44px; }
.vc-dl-freeze b{ font-size:17px; }
.vc-dl-week{ flex:1 1 150px; flex-direction:column; align-items:stretch; gap:3px; background:#f0fdf4; border-color:#bbf7d0; color:#14532d; }
.vc-dl-week span{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .vc-dl-week b{ font-size:16px; }
.vc-dl-bar{ display:block; height:6px; border-radius:6px; background:#dcfce7; overflow:hidden; } .vc-dl-bar i{ display:block; height:100%; background:#16a34a; border-radius:6px; }
.vc-dl-status{ font-size:14px; color:#3d524c; margin:10px 2px 4px; }
.vc-dl-wotd{ margin-top:10px; padding:12px 14px; border-radius:16px; background:linear-gradient(135deg,#f0fdfa,#ecfeff); border:1px solid #ccebe4; }
.vc-dl-wotd.flash{ box-shadow:0 0 0 3px #f59e0b; }
.vc-dl-h{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#0b5e57; }
.vc-dl-word{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
.vc-dl-w{ font-size:28px; font-weight:800; color:#12322c; line-height:1.15; }
.vc-dl-mean{ font-size:16px; color:#3d524c; margin-top:2px; }
.vc-dl-ex{ margin-top:8px; font-size:15px; color:#12322c; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.vc-dl-ex small{ flex-basis:100%; color:#5d6f6a; font-size:13.5px; }
.vc-dl-acts{ margin-top:10px; } .vc-dl-acts .skip-btn{ margin:0 !important; min-height:40px; }
.vc-dl-in{ font-size:13.5px; color:#166534; font-weight:700; }
.vc-dl-foot{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.vc-dl-link{ flex:1 1 auto; min-height:42px; border-radius:999px; border:1px solid #cfe0da; background:#fff; color:#0b5e57; font-weight:800; font-size:13.5px; cursor:pointer; padding:6px 12px; }
.vc-hb-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 2px; border-bottom:1px solid #edf3f1; flex-wrap:wrap; }
.vc-hb-sw{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; flex:1 1 220px; min-width:0; }
.vc-hb-sw input{ width:22px; height:22px; margin-top:2px; flex:0 0 auto; accent-color:#0F766E; }
.vc-hb-t{ display:flex; flex-direction:column; font-size:15px; color:#12322c; min-width:0; } .vc-hb-t small{ font-size:13.5px; color:#5d6f6a; margin-top:2px; line-height:1.35; }
.vc-hb-time{ min-height:42px; border:1px solid #cfe0da; border-radius:12px; padding:4px 10px; font:inherit; font-size:15px; }
.vc-hb-goals{ display:flex; gap:6px; } .vc-hb-goals button{ width:42px; height:42px; border-radius:12px; border:1px solid #cfe0da; background:#fff; font-weight:800; font-size:15px; cursor:pointer; color:#12322c; }
.vc-hb-goals button.on{ background:#0F766E; border-color:#0F766E; color:#fff; }
.vc-hb-note, .vc-hb-p{ font-size:14px; color:#4a5c57; line-height:1.45; margin:10px 2px 0; }
.vc-hb-warn{ background:#fffbeb; border:1px solid #fcd34d; color:#78350f; border-radius:12px; padding:10px 12px; font-size:14px; margin-bottom:6px; }
.vc-hb-big{ font-size:30px; font-weight:800; margin:8px 0; } .vc-hb-big small{ font-size:14px; color:#5d6f6a; font-weight:600; }
.vc-hb-go{ width:100%; margin-top:12px !important; min-height:46px; }
.vc-hb-set{ margin-top:8px; }
.vc-rc-tabs{ display:flex; gap:6px; margin-bottom:10px; } .vc-rc-tabs button{ flex:1; min-height:40px; border-radius:999px; border:1px solid #cfe0da; background:#fff; font-weight:800; cursor:pointer; color:#0b5e57; }
.vc-rc-tabs button.on{ background:#0F766E; color:#fff; border-color:#0F766E; }
.vc-rc-head{ font-size:18px; font-weight:800; color:#12322c; margin:4px 0 10px; }
.vc-rc-bars{ display:flex; align-items:flex-end; gap:6px; height:110px; padding:6px 0 18px; }
.vc-rc-col{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; }
.vc-rc-col i{ display:block; width:100%; min-height:4px; border-radius:6px 6px 2px 2px; background:#d6e7e1; }
.vc-rc-col.on i{ background:#16a34a; }
.vc-rc-col small{ position:absolute; bottom:-18px; font-size:11.5px; color:#5d6f6a; }
.vc-rc-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:12px; }
.vc-rc-stats div{ background:#f5faf8; border-radius:12px; padding:8px 6px; text-align:center; display:flex; flex-direction:column; }
.vc-rc-stats b{ font-size:18px; color:#12322c; } .vc-rc-stats small{ font-size:12px; color:#5d6f6a; }
.vc-rc-st{ display:flex; flex-direction:column; gap:4px; }
.vc-rc-sr{ display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:12px; } .vc-rc-sr.idle{ background:#fffbeb; }
.vc-rc-sn{ flex:1; min-width:0; display:flex; flex-direction:column; } .vc-rc-sn small{ font-size:13px; color:#5d6f6a; } .vc-rc-idle{ color:#92400e !important; font-weight:700; }
.vc-bd-opt{ display:flex; align-items:center; gap:10px; background:#f0fdfa; border:1px solid #ccebe4; border-radius:14px; padding:10px 12px; font-size:14px; flex-wrap:wrap; }
.vc-bd-opt span{ flex:1 1 200px; } .vc-bd-opt button{ margin:0 !important; }
.vc-bd-sel{ display:block; width:100%; margin-top:6px; min-height:42px; border:1px solid #cfe0da; border-radius:12px; padding:6px 10px; font:inherit; font-size:15px; }
.vc-bd-list{ display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.vc-bd-row{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; } .vc-bd-row.me{ background:#f0fdf4; outline:1px solid #bbf7d0; }
.vc-bd-rk{ width:28px; text-align:center; font-weight:800; font-size:16px; } .vc-bd-n{ flex:1; min-width:0; display:flex; flex-direction:column; } .vc-bd-n small{ font-size:12.5px; color:#5d6f6a; }
.vc-bd-p{ display:flex; flex-direction:column; align-items:flex-end; } .vc-bd-p b{ font-size:18px; color:#0b5e57; } .vc-bd-p small{ font-size:11.5px; color:#5d6f6a; }
#vcBadgePop{ position:fixed; z-index:9620; left:50%; bottom:calc(90px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, calc(100% + 140px)); opacity:0; visibility:hidden; pointer-events:none; transition:transform .3s, opacity .3s, visibility 0s linear .3s; display:flex; align-items:center; gap:10px;
  background:#0f3d36; color:#fff; border-radius:16px; padding:10px 16px; box-shadow:0 10px 30px rgba(0,0,0,.3); cursor:pointer; max-width:calc(100vw - 24px); }
#vcBadgePop.show{ transform:translate(-50%, 0); opacity:1; visibility:visible; pointer-events:auto; transition:transform .3s, opacity .3s, visibility 0s; } #vcBadgePop > span:first-child{ font-size:26px; } #vcBadgePop span:last-child{ display:flex; flex-direction:column; } #vcBadgePop small{ opacity:.85; }
body.dark-mode .vc-daily{ background:#14211e; border-color:#2b3d38; } body.dark-mode .vc-dl-wotd{ background:#10302b; border-color:#2b3d38; }
body.dark-mode .vc-dl-w, body.dark-mode .vc-dl-ex, body.dark-mode .vc-hb-t, body.dark-mode .vc-rc-head, body.dark-mode .vc-rc-stats b{ color:#e8f2ee; }
body.dark-mode .vc-dl-mean, body.dark-mode .vc-dl-status, body.dark-mode .vc-hb-note, body.dark-mode .vc-hb-p{ color:#b8cbc5; }
body.dark-mode .vc-dl-link, body.dark-mode .vc-hb-goals button:not(.on){ background:#14211e; border-color:#2b3d38; color:#9fe0cf; }

/* v304 · one home on computers: the banner's Continue is the only "start the lesson" button; "Up next" = reviews due,
   today's tone check, streak + word of the day, a lesson with a teacher, homework; the curriculum follows */
html.vc-vd #vd-starthere #vdHomeNext #homeTodayCard{ display:none !important; }
html.vc-vd .vc304-next-h{ margin-bottom:-8px; }
html.vc-vd .vc304-curr-h{ padding-top:10px; border-top:1px solid #e6eee9; }
html.vc-vd .vc304-due{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 16px; border-radius:18px; border:1px solid #fcd34d !important; background:#fffbeb !important; color:#78350f; cursor:pointer; font:inherit; }
html.vc-vd .vc304-due > span:first-child{ font-size:24px; }
html.vc-vd .vc304-due > span:nth-child(2){ flex:1; display:flex; flex-direction:column; }
html.vc-vd .vc304-due b{ font-size:16px; color:#78350f; } html.vc-vd .vc304-due small{ font-size:14px; color:#92400e; }
html.vc-vd .vc304-due em{ font-style:normal; font-weight:800; font-size:14px; color:#92400e; white-space:nowrap; }

/* v304 · review items: compact headers on working screens (the exercise / teacher list starts higher) and bigger
   instruction text. Computers only for the headers; the text size applies everywhere. */
html.vc-web-studio.vc-vd :is(#vd-quiz,#vd-build,#vd-match,#vd-cloze,#vd-mix,#vd-spell,#vd-drive,#vd-teachers,#vd-dictionary)>.vd-wrap>.vc245-page-hero{
  padding:14px 24px !important; min-height:0 !important; border-radius:20px !important; }
html.vc-web-studio.vc-vd :is(#vd-quiz,#vd-build,#vd-match,#vd-cloze,#vd-mix,#vd-spell,#vd-drive,#vd-teachers,#vd-dictionary)>.vd-wrap>.vc245-page-hero :is(.vc245-kicker,.vc245-symbol,.vc245-hero-art,img[aria-hidden="true"]){ display:none !important; }
html.vc-web-studio.vc-vd :is(#vd-quiz,#vd-build,#vd-match,#vd-cloze,#vd-mix,#vd-spell,#vd-drive,#vd-teachers,#vd-dictionary)>.vd-wrap>.vc245-page-hero h1{ font-size:clamp(22px, 2.1vw, 28px) !important; margin:2px 0 !important; }
html.vc-web-studio.vc-vd :is(#vd-quiz,#vd-build,#vd-match,#vd-cloze,#vd-mix,#vd-spell,#vd-drive,#vd-teachers,#vd-dictionary)>.vd-wrap>.vc245-page-hero::after{ display:none !important; }
.section-note{ font-size:14.5px; line-height:1.45; }
html.vc-vd .vd p.text-xs{ font-size:13.5px; line-height:1.45; }
/* v306: the Northern / Central / Southern switch is about Vietnamese — English learners don't need it in the header */
body.english-mode #vdHeader .vd-dialect{ display:none !important; }
/* v308 · focus mode on a computer (owner: "on desktop I don't have the option to show less like on the phone"):
   the sidebar, header and banners step aside, the card sits in one calm centred column, and the topic bar + ✕
   (fixed at the top) are actually visible above everything. */
@media (min-width:1024px){
  body.focus-mode #vdHeader, body.focus-mode #vcSideBg, body.focus-mode #vcSideTop, body.focus-mode .cover-title,
  body.focus-mode #vd-learn .vc244-learn-head, body.focus-mode #vd-learn .vc244-stage-label,
  body.focus-mode #vd-learn .vd-wrap > .grid > :not(#vdLearnMain), body.focus-mode #vc244StudyControls{ display:none !important; }
  html.vc-side body.focus-mode{ padding-left:0 !important; }
  body.focus-mode #vd-learn .vd-wrap > .grid{ display:block !important; }
  body.focus-mode #vdLearnMain{ max-width:820px; margin:0 auto !important; }
  body.focus-mode #vd-learn .vc244-learn-stage{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
  body.focus-mode #learnFilterBar{ z-index:9300 !important; left:50% !important; right:auto !important; transform:translateX(-50%); width:min(760px, calc(100vw - 140px)); top:14px !important; }
  body.focus-mode #focusModeBtn{ z-index:9300 !important; top:14px !important; right:18px !important; }
  body.focus-mode .content{ padding-top:70px !important; }
  body.focus-mode #vd-learn .card{ min-height:min(46vh, 420px); }
  body.focus-mode.vc-focus-less #vd-learn .card{ min-height:min(58vh, 560px); }
}
/* v308 · no design choice on computers: the empty "Design" row goes too */
.vc259-row:has(#vcLookPicker[hidden]), .vc259-row:has(.vc-look-old):not(:has(#vcLookPicker:not([hidden]))){ display:none !important; }

/* v307 · "－ Show less" on the computer flashcard screen too (it was focus-mode only): the chip row sits above the card,
   Show less keeps the card, 🔊 Hear, the answer and the grades */
@media (min-width:1024px){
  #tab-learn .vc-fo, .vd .vc-fo{ display:flex; justify-content:center; gap:8px; margin:2px 0 8px; flex-wrap:wrap; }
  body.vc-focus-less:not(.focus-mode) #cardTools .speak-btn:not(#flashSpeak),
  body.vc-focus-less:not(.focus-mode) #cardTools .fc-more-btn,
  body.vc-focus-less:not(.focus-mode) #fcAccents,
  body.vc-focus-less:not(.focus-mode) #learnToolsRow{ display:none !important; }
}
/* v309 · 🟢 people in Community right now */
.cm-live{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; padding:1px 8px 1px 6px; min-height:20px; border-radius:999px; background:#16a34a; color:#fff; font:800 11.5px/1 var(--font, inherit); letter-spacing:.01em; box-shadow:0 0 0 2px rgba(255,255,255,.18); white-space:nowrap; flex:0 0 auto; }
.cm-live i{ width:7px; height:7px; border-radius:50%; background:#bbf7d0; box-shadow:0 0 0 0 rgba(187,247,208,.9); animation:cmLivePulse 2s ease-out infinite; }
@keyframes cmLivePulse{ 0%{ box-shadow:0 0 0 0 rgba(187,247,208,.9); } 70%{ box-shadow:0 0 0 6px rgba(187,247,208,0); } 100%{ box-shadow:0 0 0 0 rgba(187,247,208,0); } }
@media (prefers-reduced-motion: reduce){ .cm-live i{ animation:none; } }
.more-tile[data-tab="community"]{ position:relative; }
.more-tile[data-tab="community"] > .cm-live{ position:absolute; top:6px; right:6px; margin:0; }
#communityEntryBtn > .cm-live{ margin-left:6px; }
/* the sidebar's narrow icon rail (1024–1279px): a small dot with the number on the icon */
@media (min-width:1024px) and (max-width:1279px){ html.vc-side #vcTopNav [data-top="community"]{ position:relative; } html.vc-side #vcTopNav [data-top="community"] > .cm-live{ position:absolute; top:2px; right:4px; padding:0 5px; min-height:16px; font-size:10px; } html.vc-side #vcTopNav [data-top="community"] > .cm-live i{ display:none; } }
/* v314 · Admin › 👤 Profile › 👥 Their students */
#vcAdminProfile .vc-ap-studs{margin:0 0 12px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}
#vcAdminProfile .vc-ap-studs-l{margin-top:8px;display:grid;gap:6px;font-size:14px;color:#475569}
#vcAdminProfile .vc-ap-stud{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;cursor:pointer;font:inherit;color:inherit}
#vcAdminProfile .vc-ap-stud:hover{border-color:#0d9488}
#vcAdminProfile .vc-ap-stud > span{flex:1;min-width:0}
#vcAdminProfile .vc-ap-stud small{display:block;color:#64748b;font-size:12.5px;line-height:1.35}
#vcAdminProfile .vc-ap-stud i{font-style:normal;color:#94a3b8;font-size:20px}
body.dark-mode #vcAdminProfile .vc-ap-studs{background:#14211e;border-color:#2b3d38}
body.dark-mode #vcAdminProfile .vc-ap-stud{background:#1b2b26;border-color:#2b3d38}
body.dark-mode #vcAdminProfile .vc-ap-stud small{color:#b9cdc5}

/* v329: "Topics show words from" in Session settings */
.lf-lvseg{ display:inline-flex; gap:0; border:1px solid var(--line, #d8e3df); border-radius:12px; overflow:hidden; }
.lf-lvseg .skip-btn{ margin:0 !important; border:0 !important; border-radius:0 !important; min-height:40px; padding:0 14px; background:transparent; }
.lf-lvseg .skip-btn.on{ background:var(--cover, #0F766E) !important; color:#fff !important; font-weight:700; }