/* ===========================================================
   Viet Lab — styles
   AI First design tokens, jade/gold accent so it reads as the
   third sibling of /voice/ (blue) and /mandarin/ (red).
   =========================================================== */
:root{
  --ink:#0a0e1a; --ink-2:#11182b; --panel:#141c30;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --text:#e8ecf5; --muted:#9aa6be; --muted-2:#6f7c96;
  --brand:#1fa37a; --brand-2:#e0b64a; --accent:#19d3a2; --warn:#ffcf5c; --bad:#ff6b7d;
  --radius:18px; --radius-sm:12px;
  --grad:linear-gradient(120deg,var(--brand),var(--brand-2));
  --grad-accent:linear-gradient(120deg,var(--brand-2),var(--brand));
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cjk:"Noto Sans SC","PingFang SC","Hiragino Sans GB",var(--font);
  --shadow:0 24px 60px -24px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--ink);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:760;letter-spacing:-.02em}
p{margin:0 0 1rem}

/* ---------- chrome ---------- */
.vl-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:12px 20px;background:rgba(10,14,26,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.vl-brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.01em;text-decoration:none;color:inherit}
.vl-logo{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff}
.vl-brand small{display:block;font-weight:500;font-size:.72rem;color:var(--muted-2);letter-spacing:.02em;margin-top:-3px}
.vl-top .sp{flex:1}
.vl-tbtn{background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  padding:7px 13px;border-radius:999px;cursor:pointer;font-size:.84rem;font-weight:600;transition:.15s}
.vl-tbtn:hover{color:#fff;border-color:var(--brand)}
#vl-menu{display:none}

.vl-shell{display:grid;grid-template-columns:238px 1fr;min-height:calc(100vh - 56px)}
.vl-side{border-right:1px solid var(--line);padding:22px 14px;position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto}
.vl-nav{display:flex;flex-direction:column;gap:3px}
.vl-navitem{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;
  color:var(--muted);padding:10px 12px;border-radius:11px;cursor:pointer;font-size:.93rem;font-weight:600;transition:.15s}
.vl-navitem:hover{background:rgba(255,255,255,.04);color:var(--text)}
.vl-navitem.on{background:rgba(31,163,122,.18);color:#fff}
.vl-navitem .ic{width:18px;text-align:center;opacity:.8}
.vl-sideprog{margin-top:24px;padding:0 12px}
.vl-smallmuted{font-size:.78rem;color:var(--muted-2);margin-top:7px}
.vl-duepill{margin-top:14px;width:100%;background:rgba(224,182,74,.14);border:1px solid rgba(224,182,74,.4);
  color:#f3dba4;padding:8px 10px;border-radius:11px;cursor:pointer;font-size:.82rem;font-weight:700}
.vl-main{padding:38px 32px 90px;max-width:920px;width:100%}

/* ---------- primitives ---------- */
.vl-h1{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.35em}
.vl-h2{font-size:clamp(1.55rem,3vw,2.2rem)}
.vl-eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-2);margin-bottom:14px}
.vl-lead{font-size:1.08rem;color:var(--muted);max-width:660px}
.vl-muted{color:var(--muted)}
.vl-muted.sm,.sm{font-size:.88rem}
.vl-kicker{font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.vl-pill{display:inline-block;padding:3px 11px;border-radius:999px;background:rgba(31,163,122,.18);
  color:#8ff0d6;font-size:.72rem;font-weight:700;vertical-align:middle}
.vl-note{font-size:.82rem;color:var(--muted-2);border-left:2px solid var(--line-strong);padding-left:12px;margin-top:22px}
.vl-spacer{height:26px}
.vl-link{background:none;border:0;color:var(--muted);cursor:pointer;padding:0 0 10px;font-weight:600;font-size:.9rem}
.vl-link:hover{color:#fff}

.vl-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:16px 0}
.vl-card h3{font-size:1.12rem;margin-bottom:.4em}
.vl-next{background:linear-gradient(140deg,rgba(31,163,122,.16),rgba(224,182,74,.07)),var(--panel);
  border-color:rgba(31,163,122,.32)}
.vl-three{display:flex;gap:16px;align-items:flex-start}
.vl-three .ic{font-size:1.5rem;width:40px;height:40px;flex:none;border-radius:11px;
  background:rgba(255,255,255,.06);display:grid;place-items:center}
.vl-hardtone{border-color:rgba(255,207,92,.28)}

.vl-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:10px 0}
.vl-bar i{display:block;height:100%;background:var(--grad-accent);border-radius:99px;transition:width .4s}

.vl-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid var(--line-strong);
  color:var(--text);padding:9px 15px;border-radius:11px;cursor:pointer;font-size:.9rem;font-weight:650;transition:.15s;margin:6px 6px 0 0}
.vl-btn:hover{border-color:var(--brand);background:rgba(31,163,122,.12)}
.vl-btn.primary{background:var(--grad);border-color:transparent;color:#06281f}
.vl-btn.sm{padding:6px 11px;font-size:.82rem}
.vl-btn.rec{background:var(--bad);border-color:transparent;color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.68}}

.vl-warn{background:rgba(255,207,92,.1);border:1px solid rgba(255,207,92,.34);color:#ffe3a3;
  padding:13px 16px;border-radius:var(--radius-sm);font-size:.88rem;margin:16px 0}

.vl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.vl-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;text-align:center}
.vl-stat .n{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.vl-stat .l{font-size:.76rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}

/* ---------- lesson list ---------- */
.vl-phase{margin:34px 0 10px}
.vl-phase h3{margin-bottom:.25em}
.vl-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin:8px 0;cursor:pointer;transition:.15s}
.vl-row:hover{border-color:var(--brand);transform:translateX(2px)}
.vl-row .n{width:28px;height:28px;flex:none;border-radius:8px;background:rgba(255,255,255,.07);
  display:grid;place-items:center;font-weight:800;font-size:.84rem}
.vl-row.done .n{background:var(--accent);color:#06281f}
.vl-row .t{flex:1;font-weight:650}
.vl-row .t small{display:block;font-weight:500;font-size:.76rem;color:var(--muted-2)}
.vl-row .go{color:var(--muted-2)}

/* ---------- drills ---------- */
.vl-dhead{display:flex;align-items:flex-start;gap:12px}
.vl-dhead h3{flex:1}
.vl-chk{flex:none;background:transparent;border:1px solid var(--line-strong);color:var(--muted-2);
  padding:6px 11px;border-radius:999px;cursor:pointer;font-size:.76rem;font-weight:700;white-space:nowrap}
.vl-chk.on{background:rgba(25,211,162,.14);border-color:rgba(25,211,162,.45);color:#8ff0d6}
.vl-body{margin-top:8px}

.vl-item{border-top:1px solid var(--line);padding:16px 0}
.vl-item:first-child{border-top:0}
.vl-vi{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.vl-vi.sm{font-size:1.2rem}
.vl-vi.big{font-size:2.6rem;text-align:center;margin:10px 0}
.vl-gloss{color:var(--muted);font-size:.92rem}
.vl-zh{font-family:var(--cjk);color:var(--brand-2);font-size:.88rem;font-weight:600;margin-top:2px}
.vl-anchor{color:var(--muted-2);font-size:.82rem;margin-top:4px}
.vl-pair{font-size:1.3rem;font-weight:700}
.vl-who{font-size:1.05rem;font-weight:700;margin-bottom:4px}
.vl-tools{display:flex;flex-wrap:wrap;align-items:center;margin-top:6px}
.vl-out{margin-top:10px}
.vl-out audio{width:100%;max-width:340px;margin-top:10px;display:block}
.vl-res{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px}
.vl-badge{display:inline-block;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.08);
  font-size:.8rem;font-weight:700;margin:0 6px 8px 0}
.vl-badge small{font-weight:500;opacity:.85}
.vl-badge.good{background:rgba(25,211,162,.18);color:#8ff0d6}
.vl-badge.warn{background:rgba(255,207,92,.16);color:#ffe3a3}
.vl-badge.bad{background:rgba(255,107,125,.16);color:#ffc0c8}
.vl-marks{font-size:1.15rem;margin:6px 0;line-height:1.9}
.vl-marks .m{padding:2px 6px;border-radius:7px;background:rgba(255,255,255,.05)}
.vl-marks .m.hit{color:#8ff0d6;background:rgba(25,211,162,.14)}
.vl-marks .m.near{color:#ffe3a3;background:rgba(255,207,92,.15)}
.vl-marks .m.miss{color:#ffc0c8;background:rgba(255,107,125,.13)}
.vl-hint{font-size:.84rem;color:var(--muted-2);margin-top:6px}
.vl-tip{font-size:.86rem;color:var(--muted);background:rgba(255,255,255,.03);border-left:2px solid var(--brand);
  padding:10px 13px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:12px 0}
.vl-tip.warn{border-left-color:var(--warn)}
.vl-prompt{font-size:1.02rem}

.vl-level{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:4px 0 14px}
.vl-level i{display:block;height:100%;width:0;background:var(--grad-accent);transition:width .08s}

.vl-contour{display:block;margin:6px 0;max-width:100%}
.vl-contour .mid{stroke:rgba(255,255,255,.12);stroke-width:1}
.vl-contour .tgt{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:4 4}
.vl-contour .you{fill:none;stroke:var(--brand-2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}

/* dialogue */
.vl-turn{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.vl-turn:first-of-type{border-top:0}
.vl-turn .who{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:.78rem;font-weight:800;background:rgba(255,255,255,.08)}
.vl-turn.b .who{background:var(--grad);color:#06281f}
.vl-turn .c{flex:1;min-width:0}

/* vocabulary */
.vl-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:6px}
.vl-vcard{position:relative;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px}
.vl-vcard .vi{font-size:1.25rem;font-weight:700;padding-right:26px}
.vl-vcard .gl{color:var(--muted);font-size:.84rem;margin-top:2px}
.vl-vcard .hv{margin-top:8px;font-size:.84rem;color:#8ff0d6;font-family:var(--cjk)}
.vl-vcard .hv span{display:block;font-family:var(--font);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}
.vl-vcard .zhn{margin-top:6px;font-size:.78rem;color:var(--muted-2)}
.vl-vplay{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.07);border:0;color:var(--muted);
  width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.7rem;margin:0}
.vl-vplay:hover{background:var(--brand);color:#06281f}

/* options */
.vl-opts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.vl-opt{background:rgba(255,255,255,.05);border:1px solid var(--line-strong);color:var(--text);
  padding:8px 13px;border-radius:10px;cursor:pointer;font-size:.88rem;font-weight:600}
.vl-opt small{color:var(--muted-2);font-weight:500}
.vl-opt:hover{border-color:var(--brand)}
.vl-opt.good{background:rgba(25,211,162,.18);border-color:rgba(25,211,162,.5)}
.vl-opt.bad{background:rgba(255,107,125,.16);border-color:rgba(255,107,125,.5)}

/* free speaking */
.vl-timer{font-size:2rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vl-metrics{display:flex;flex-wrap:wrap;gap:18px}
.vl-metric .n{font-size:1.3rem;font-weight:800}
.vl-metric .l{font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em}
.vl-rate{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.vl-rate .vl-kicker{margin:0 6px 0 0}

/* checklists */
.vl-checks{display:flex;flex-direction:column;gap:8px}
.vl-check{display:flex;gap:11px;align-items:flex-start;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;font-size:.92rem}
.vl-check.on{border-color:rgba(25,211,162,.4);background:rgba(25,211,162,.07)}
.vl-check input{margin-top:4px;accent-color:var(--accent)}

/* bridge */
.vl-search{width:100%;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:13px 16px;margin:18px 0;font-size:1rem}
.vl-search:focus{outline:none;border-color:var(--brand)}
.vl-cogrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}
.vl-cogrow.wide{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.vl-cog{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px;cursor:pointer;transition:.15s}
.vl-cog:hover{border-color:var(--brand-2)}
.vl-cog .vi{font-size:1.12rem;font-weight:750}
.vl-cog .zh{font-family:var(--cjk);color:var(--brand-2);font-size:1rem;font-weight:600;margin-top:2px}
.vl-cog .zh small{font-family:var(--font);color:var(--muted-2);font-size:.76rem;font-weight:500;margin-left:4px}
.vl-cog .en{color:var(--muted-2);font-size:.8rem;margin-top:2px}
.vl-rule{border-top:1px solid var(--line);padding:16px 0}
.vl-rule:first-of-type{border-top:0}
.vl-rule .r{font-size:1.1rem;font-weight:750;margin-bottom:4px}
.vl-exrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vl-ex{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);
  padding:6px 11px;border-radius:999px;cursor:pointer;font-size:.86rem;text-align:left}
.vl-ex b{font-family:var(--cjk);color:var(--text)}
.vl-ex small{display:block;color:var(--muted-2);font-size:.74rem}
.vl-ex:hover{border-color:var(--brand-2);color:#fff}
.vl-ff{border-top:1px solid var(--line);padding:14px 0;font-size:.9rem}
.vl-ff:first-of-type{border-top:0}
.vl-ff .vi{font-size:1.15rem;font-weight:700}
.vl-ff .vi small{font-family:var(--cjk);color:var(--brand-2);font-size:.9rem;font-weight:600;margin-left:8px}
.vl-ff .a{color:#8ff0d6}
.vl-ff .b{color:#ffc0c8}

/* two layers */
.vl-layer{display:grid;grid-template-columns:auto auto auto 1fr;gap:10px 16px;align-items:baseline;
  border-top:1px solid var(--line);padding:12px 0;font-size:.9rem}
.vl-layer:first-of-type{border-top:0}
.vl-layer .zh{font-family:var(--cjk);font-size:1.05rem;font-weight:700;min-width:60px}
.vl-layer .hv{color:var(--muted-2)}
.vl-layer .nat{color:#8ff0d6;font-weight:750;font-size:1.05rem}
.vl-layer small{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.vl-layer .en{color:var(--muted)}
.vl-layer .use{grid-column:1/-1;color:var(--muted-2);font-size:.82rem}

/* grammar */
.vl-gram h4{font-size:1.05rem;margin-bottom:.5em}
.vl-gpair{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:rgba(255,255,255,.03);
  border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:12px}
.vl-gpair .zh{font-family:var(--cjk);font-size:1.1rem;font-weight:700}
.vl-gpair .arr{color:var(--muted-2)}
.vl-gpair .vi{font-size:1.05rem;font-weight:700;color:#8ff0d6}

/* pronoun table */
.vl-prow{border-top:1px solid var(--line);padding:14px 0;cursor:pointer}
.vl-prow:first-of-type{border-top:0}
.vl-prow .who{font-weight:700}
.vl-prow .pair{font-size:1.15rem;font-weight:750;color:var(--brand-2);margin:2px 0}
.vl-prow .pair span{color:#8ff0d6}
.vl-prow .note{color:var(--muted);font-size:.86rem}
.vl-prow.hot{border-left:3px solid var(--bad);padding-left:12px;background:rgba(255,107,125,.05)}
.vl-prow.warm{border-left:3px solid var(--brand);padding-left:12px}

/* review flashcard */
.vl-flash{text-align:center}
.vl-flash .vl-tools{justify-content:center}
.vl-reveal.hide{display:none}
.vl-reveal .hv{margin-top:10px;color:#8ff0d6;font-weight:650;font-family:var(--cjk)}
.vl-reveal .hv span{display:block;font-family:var(--font);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}

/* recordings */
.vl-ab{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vl-ab:first-of-type{border-top:0}
.vl-ab .lbl{width:100%;font-weight:650}
.vl-ab .lbl small{color:var(--muted-2);font-weight:500;margin-left:6px}
.vl-ab audio{flex:1;min-width:220px}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .vl-shell{grid-template-columns:1fr}
  #vl-menu{display:block}
  .vl-side{position:fixed;top:56px;left:0;width:260px;height:calc(100vh - 56px);background:var(--ink-2);
    z-index:30;transform:translateX(-102%);transition:transform .22s;border-right:1px solid var(--line)}
  .vl-side.open{transform:none}
  .vl-main{padding:26px 18px 80px}
  .vl-stats{grid-template-columns:1fr 1fr}
  .vl-vi{font-size:1.3rem}
  .vl-vi.big{font-size:2.1rem}
  .vl-layer{grid-template-columns:auto 1fr}
  .vl-three{flex-direction:column}
}