@keyframes mascot-wave{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(2deg) translateY(-4px); } }
  @keyframes path-pulse{ 0%,100%{ box-shadow:0 0 0 5px rgba(29,145,120,0.14); } 50%{ box-shadow:0 0 0 10px rgba(29,145,120,0.04); } }
  .mascot-wave{ animation:mascot-wave 4s ease-in-out infinite; }
  .path-pulse{ animation:path-pulse 2.4s ease-in-out infinite; }
#liveCaptions .cap-word{cursor:pointer;border-radius:4px;}
#liveCaptions .cap-word.cap-correctable{background:rgba(255,180,60,.35);text-decoration:underline dotted;}
#liveCaptions .cap-word.cap-correctable:hover{background:rgba(255,180,60,.55);}
#liveCaptions .cap-correction-note{margin-top:3px;font-size:12px;color:#ffd27a;font-weight:700;}
#liveCaptions .cap-word:hover{background:rgba(238,193,78,.45);}

  /* App-language toggle (interface text EN/VI) — a pill, not a flag, so it
     can't be confused with the 🇻🇳/🇺🇸 learning-direction button beside it. */
  .cover-title .header-actions .vc-ui-lang-btn{ width:auto !important; min-width:40px; padding:0 9px; gap:4px; border-radius:999px;
    border:1.5px solid var(--line); font:800 12px var(--font); letter-spacing:.3px; }
  @media (max-width:430px){ .cover-title .header-actions .vc-ui-lang-btn{ padding:0 6px; font-size:11.5px; gap:3px; } }
  @media (max-width:400px){ .cover-title .header-actions .vc-ui-lang-btn{ min-width:34px; padding:0 5px; } .vc-ui-lang-btn svg{ display:none; } }
  .vc-ui-lang-btn svg{ flex-shrink:0; }
  .vc-ui-lang-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin:0 0 10px; }
  .vc-ui-lang-row-label{ font:700 14px var(--font); color:var(--ink); }
  .vc-ui-lang-seg{ display:inline-flex; background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:3px; }
  .vc-ui-lang-seg button{ border:none; background:none; color:var(--ink); font:700 13px var(--font); padding:6px 12px; border-radius:999px; cursor:pointer; }
  .vc-ui-lang-seg button.on{ background:var(--cover, #1d9178); color:#fff; }

  /* ---------- Line icons ---------- */
  .vi{ width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.24em; flex-shrink:0; }

  /* ---------- Call bar: icon tiles with labels (Preply-style) ---------- */
  .live-bottombar{ justify-content:center; gap:10px; }
  .live-acts{ display:flex; align-items:flex-start; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; padding-top:2px; }
  .live-acts::-webkit-scrollbar{ display:none; }
  #liveShell .live-act, #liveShell .live-act.on, #liveShell .live-act.danger{
    width:auto; height:auto; min-width:48px; padding:0; background:transparent !important; border-radius:12px;
    display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; backdrop-filter:none; font-size:inherit;
  }
  #liveShell .live-act .la-ic{ width:44px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,0.13); transition:background .15s, color .15s; }
  #liveShell .live-act .la-ic .vi{ width:20px; height:20px; }
  #liveShell .live-act .la-lb{ font:600 11.5px var(--font); color:rgba(255,255,255,0.92); white-space:nowrap; line-height:1.1; }
  #liveShell .live-act:hover .la-ic{ background:rgba(255,255,255,0.22); }
  #liveShell .live-act.active .la-ic{ background:#fff; color:#111; }
  #liveMicBtn:not(.on):not(.hand) .la-ic, #liveCamBtn:not(.on) .la-ic{ background:rgba(229,72,77,0.25); color:#ffb4b4; }
  #liveShell .live-act.danger .la-ic{ background:#e5484d; color:#fff; }
  #liveShell #liveNextBtn .la-ic{ background:#1d9178; }
  @media (max-width:699px){ .live-bottombar .live-input{ display:none; } }
  @media (max-width:480px){ #livePeopleBtn{ display:none !important; } #liveShell .live-act{ min-width:44px; } #liveShell .live-act .la-ic{ width:42px; height:38px; } }
  /* Chat lives in the call bar now — the floating Chat pill would be a duplicate. */
  body.in-live-room #roomChatToggle{ display:none !important; }
  /* Top-bar chips and room tools with icons */
  .live-count-chip .vi, .live-x .vi{ width:16px; height:16px; }
  #liveInviteBtn{ display:inline-flex; align-items:center; gap:5px; }
  #roomFloatBar > button .vi{ width:17px; height:17px; }
  .room-chat-tab .vi{ width:15px; height:15px; margin-right:3px; }
  .wb-tool{ display:inline-grid; place-items:center; }
  .wb-tool .vi{ width:16px; height:16px; }
  #liveMiniBar .vi{ width:17px; height:17px; }

  /* ---------- Canvas: shared lesson document ---------- */
  #cvPanel{ position:fixed; z-index:9600; inset:0; display:none; flex-direction:column; background:#23232b; color:#fff; font-family:var(--font); }
  #cvPanel.show{ display:flex; }
  body.in-live-room #cvPanel{ z-index:9050; top:var(--cvTop, 56px); bottom:var(--cvBottom, 84px); border-radius:14px; margin:0 8px; overflow:hidden; }
  @media (min-width:900px){
    body.in-live-room #cvPanel{ right:calc(var(--cvVideoW, 300px) + 8px); margin-right:8px; }
    body.in-live-room.cv-open #liveShell .live-stage:not(.floating){ margin-left:calc(100vw - var(--cvVideoW, 300px) - 12px); }
  }
  body.cv-open #roomFloatBar{ display:none !important; }
  .cv-head{ display:flex; align-items:center; gap:10px; padding:10px 14px; flex-shrink:0; }
  .cv-title{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; }
  .cv-title .vi{ width:18px; height:18px; }
  .cv-status{ font-size:12px; opacity:.6; margin-left:4px; }
  .cv-shared{ margin-left:auto; display:flex; align-items:center; gap:6px; font-weight:700; font-size:13px; opacity:.92; min-width:0; }
  .cv-shared span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; }
  .cv-hbtn{ border:none; background:rgba(255,255,255,.1); color:#fff; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; cursor:pointer; flex-shrink:0; }
  .cv-hbtn:hover{ background:rgba(255,255,255,.2); }
  .cv-main{ flex:1; min-height:0; display:flex; gap:10px; padding:0 10px 10px; }
  .cv-rail{ width:92px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; min-height:0; }
  .cv-thumbs{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin; padding:2px; }
  .cv-thumb{ position:relative; width:84px; height:64px; border-radius:8px; background:#fff; overflow:hidden; cursor:pointer; flex-shrink:0; border:3px solid transparent; box-sizing:border-box; }
  .cv-thumb.on{ border-color:#f472b6; }
  .cv-thumb-page{ position:absolute; left:0; top:0; width:560px; transform:scale(.14); transform-origin:0 0; color:#111; font-size:16px; line-height:1.45; padding:18px 24px; pointer-events:none; }
  .cv-thumb-page img{ max-width:100%; }
  .cv-thumb-n{ position:absolute; left:0; right:0; bottom:0; background:#f9a8d4; color:#111; font:800 10px var(--font); padding:1px 5px; }
  .cv-thumb:not(.on) .cv-thumb-n{ background:rgba(0,0,0,.08); }
  .cv-thumb-del{ position:absolute; right:2px; top:2px; width:22px; height:22px; border:none; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; display:none; place-items:center; cursor:pointer; padding:0; }
  .cv-thumb.on:hover .cv-thumb-del, .cv-thumb.on:focus-within .cv-thumb-del{ display:grid; }
  .cv-thumb-del .vi{ width:13px; height:13px; }
  .cv-add{ border:none; background:rgba(255,255,255,.1); color:#fff; height:40px; border-radius:10px; display:grid; place-items:center; cursor:pointer; }
  .cv-add:hover{ background:rgba(255,255,255,.2); }
  .cv-railtoggle{ border:none; background:#0b0b10; color:#fff; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; }
  #cvPanel.rail-hidden .cv-rail{ width:40px; }
  #cvPanel.rail-hidden .cv-thumbs, #cvPanel.rail-hidden .cv-add{ display:none; }
  #cvPanel.rail-hidden .cv-rail{ justify-content:flex-end; }
  .cv-doc{ flex:1; min-width:0; background:#fff; color:#1b1b1f; border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
  .cv-tools{ display:flex; align-items:center; gap:2px; padding:6px 8px; border-bottom:1px solid #ececf0; flex-shrink:0; overflow-x:auto; scrollbar-width:none; box-shadow:0 2px 6px rgba(0,0,0,.04); }
  .cv-tools::-webkit-scrollbar{ display:none; }
  .cv-sep{ width:1px; align-self:stretch; background:#e6e6ea; margin:4px 6px; flex-shrink:0; }
  .cv-tb{ border:none; background:transparent; color:#1b1b1f; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; cursor:pointer; flex-shrink:0; position:relative; padding:0; }
  .cv-tb .vi{ width:18px; height:18px; }
  .cv-tb:hover{ background:#f1f1f4; }
  .cv-tb.on{ background:#e8f5f1; color:#006b57; }
  .cv-tb:disabled{ opacity:.35; cursor:default; }
  .cv-swatch-bar{ position:absolute; left:8px; right:8px; bottom:5px; height:3px; border-radius:2px; background:#1b1b1f; }
  .cv-size{ border:none; background:transparent; height:34px; padding:0 8px; border-radius:8px; display:flex; align-items:center; gap:10px; font:600 13.5px var(--font); color:#1b1b1f; cursor:pointer; min-width:104px; justify-content:space-between; flex-shrink:0; }
  .cv-size:hover{ background:#f1f1f4; }
  .cv-size .vi{ width:16px; height:16px; }
  .cv-new{ font:800 9.5px var(--font); color:#1e4fd6; background:#dbe6ff; border-radius:5px; padding:2px 5px; margin:0 4px 0 -2px; flex-shrink:0; }
  .cv-tablebar{ display:none; }
  .cv-tools.in-table .cv-tablebar{ display:flex; align-items:center; gap:2px; }
  .cv-scroll{ flex:1; min-height:0; overflow-y:auto; position:relative; }
  #cvEdit{ max-width:780px; margin:0 auto; padding:36px 28px 90px; min-height:100%; box-sizing:border-box; outline:none; font-size:16px; line-height:1.55; color:#1b1b1f; word-wrap:break-word; }
  #cvEdit h1{ font-size:30px; line-height:1.2; margin:.4em 0 .3em; }
  #cvEdit h2{ font-size:23px; line-height:1.25; margin:.5em 0 .3em; }
  #cvEdit p, #cvEdit div{ margin:0 0 .35em; }
  #cvEdit ul, #cvEdit ol, .cv-thumb-page ul, .cv-thumb-page ol{ padding-left:1.6em; margin:.2em 0 .6em; }
  #cvEdit ul, .cv-thumb-page ul{ list-style:disc; } #cvEdit ol, .cv-thumb-page ol{ list-style:decimal; }
  #cvEdit ul ul{ list-style:circle; } #cvEdit li, .cv-thumb-page li{ display:list-item; }
  #cvEdit img{ max-width:100%; height:auto; border-radius:8px; display:inline-block; margin:6px 0; }
  #cvEdit img.cv-sel{ outline:3px solid #2dd4bf; }
  #cvEdit table, .cv-thumb-page table{ border-collapse:collapse; width:100%; margin:8px 0 12px; table-layout:fixed; }
  #cvEdit td, #cvEdit th, .cv-thumb-page td, .cv-thumb-page th{ border:1px solid #cfd2d8; padding:7px 9px; vertical-align:top; min-width:40px; }
  #cvEdit th{ background:#f5f6f8; }
  .cv-math{ display:inline-block; padding:0 3px; margin:0 1px; border-radius:5px; cursor:pointer; }
  #cvEdit .cv-math:hover{ background:#eef7f4; }
  .cv-math-fallback{ font-family:ui-monospace, Menlo, monospace; font-size:.92em; background:#f3f4f6; padding:1px 5px; border-radius:4px; }
  .cv-ph{ position:absolute; left:0; right:0; top:0; max-width:780px; margin:0 auto; padding:36px 28px; box-sizing:border-box; pointer-events:none; color:#6b7280; display:none; }
  .cv-ph b{ display:block; font-size:18px; font-weight:500; margin-bottom:14px; }
  .cv-ph span{ font-size:16px; line-height:1.6; }
  .cv-empty .cv-ph{ display:block; }
  .cv-loading{ padding:40px; text-align:center; color:#6b7280; }
  /* popovers */
  .cv-pop{ position:fixed; z-index:9700; background:#fff; color:#1b1b1f; border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,.28); padding:8px; display:none; font-family:var(--font); }
  .cv-pop.show{ display:block; }
  .cv-menu button{ display:flex; width:100%; border:none; background:none; text-align:left; padding:8px 12px; border-radius:8px; cursor:pointer; color:#1b1b1f; font-family:var(--font); align-items:center; gap:10px; }
  .cv-menu button:hover{ background:#f1f1f4; }
  .cv-menu button.on{ color:#006b57; font-weight:800; }
  .cv-swatches{ display:grid; grid-template-columns:repeat(6, 26px); gap:6px; }
  .cv-sw{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.12); cursor:pointer; padding:0; }
  .cv-sw.none{ background:linear-gradient(135deg,#fff 45%,#e5484d 45%,#e5484d 55%,#fff 55%); }
  .cv-grid{ display:grid; grid-template-columns:repeat(6, 22px); gap:3px; }
  .cv-grid i{ width:22px; height:22px; border:1px solid #d6d8de; border-radius:4px; display:block; cursor:pointer; }
  .cv-grid i.hl{ background:#bfeee2; border-color:#1d9178; }
  .cv-grid-l{ font:700 12px var(--font); text-align:center; margin-top:6px; color:#4b5563; }
  .cv-mathpop{ width:min(360px, calc(100vw - 24px)); }
  .cv-mathpop textarea{ width:100%; box-sizing:border-box; min-height:58px; border:1px solid #d6d8de; border-radius:8px; padding:8px; font-family:ui-monospace, Menlo, monospace; font-size:14px; resize:vertical; color:#1b1b1f; background:#fff; }
  .cv-mathkeys{ display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
  .cv-mathkeys button{ border:1px solid #e3e5ea; background:#f7f8fa; border-radius:7px; padding:4px 8px; font:600 13px var(--font); cursor:pointer; color:#1b1b1f; }
  .cv-mathprev{ min-height:40px; border-radius:8px; background:#f7f8fa; display:flex; align-items:center; justify-content:center; padding:8px; font-size:18px; overflow-x:auto; }
  .cv-poprow{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
  .cv-poprow button{ border:none; border-radius:9px; padding:8px 14px; font:800 13px var(--font); cursor:pointer; }
  .cv-poprow .go{ background:#1d9178; color:#fff; }
  .cv-poprow .no{ background:#f1f1f4; color:#1b1b1f; }
  @media (max-width:640px){
    .cv-rail{ width:60px; } .cv-thumb{ width:56px; height:46px; } .cv-thumb-page{ transform:scale(.095); }
    #cvEdit{ padding:22px 16px 80px; } .cv-ph{ padding:22px 16px; }
    .cv-main{ padding:0 6px 6px; gap:6px; }
  }
  @media (prefers-color-scheme: dark){ #cvPanel{ background:#18181d; } }

  .room-chat-tab{ display:inline-flex; align-items:center; gap:4px; }
  .room-chat-tab .vi{ margin-right:0; }
  .live-count-chip{ display:inline-flex; align-items:center; gap:5px; }
  #roomPhotoBtn .vi, #roomFileBtn .vi{ width:19px; height:19px; }
  #roomPhotoBtn, #roomFileBtn{ display:grid; place-items:center; }

  .cv-importbtn{ min-width:0; gap:6px; justify-content:flex-start; }
  .cv-importbtn .vi{ width:17px; height:17px; }
  .cv-importpop, .cv-deckpop{ width:min(320px, calc(100vw - 24px)); max-height:60vh; overflow-y:auto; }
  .cv-importpop button span, .cv-deckpop button span{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .cv-importpop small, .cv-deckpop small{ color:#6b7280; font-size:12px; font-weight:500; }
  .cv-importpop .vi, .cv-deckpop .vi{ width:18px; height:18px; flex-shrink:0; }
  .cv-imptip{ font-size:12.5px; color:#4b5563; background:#f7f8fa; border-radius:8px; padding:8px 10px; margin-top:4px; line-height:1.4; }

  /* ---------- Notebook: drawing, follow me, edit lock ---------- */
  .cv-pagewrap{ position:relative; max-width:780px; margin:0 auto; min-height:100%; }
  .cv-pagewrap #cvEdit{ max-width:none; margin:0; }
  #cvInk{ position:absolute; left:0; top:0; pointer-events:none; touch-action:none; z-index:2; }
  #cvPanel.drawing #cvInk{ pointer-events:auto; cursor:crosshair; }
  .cv-drawbar{ display:none; align-items:center; gap:4px; }
  #cvPanel.drawing .cv-drawbar{ display:flex; }
  .cv-pencolor{ width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #d6d8de; cursor:pointer; padding:0; flex-shrink:0; margin:0 2px; }
  .cv-pencolor.on{ box-shadow:0 0 0 2px #1d9178; }
  .cv-hpill{ border:none; background:rgba(255,255,255,.1); color:#fff; height:34px; border-radius:10px; padding:0 11px; display:inline-flex; align-items:center; gap:6px; font:700 12.5px var(--font); cursor:pointer; flex-shrink:0; white-space:nowrap; }
  .cv-hpill .vi{ width:16px; height:16px; }
  .cv-hpill:hover{ background:rgba(255,255,255,.2); }
  .cv-hpill.on{ background:#2dd4bf; color:#062822; }
  #cvLock.off{ background:#f59e0b; color:#1b1b1f; }
  .cv-follow-bar, .cv-lock-bar{ display:none; position:sticky; top:0; z-index:5; margin:0; padding:8px 14px; font:600 13px var(--font); align-items:center; gap:10px; }
  .cv-follow-bar{ background:#ccfbf1; color:#134e4a; }
  .cv-follow-bar button{ margin-left:auto; border:none; background:#fff; color:#134e4a; border-radius:8px; padding:5px 10px; font:700 12px var(--font); cursor:pointer; }
  .cv-lock-bar{ background:#fef3c7; color:#78350f; }
  .cv-lock-bar .vi{ width:16px; height:16px; }
  .cv-follow-bar.show, .cv-lock-bar.show{ display:flex; }
  #cvPanel.readonly .cv-tools .cv-tb, #cvPanel.readonly .cv-size:not(#cvSize), #cvPanel.readonly #cvSize, #cvPanel.readonly .cv-add, #cvPanel.readonly .cv-thumb-del{ opacity:.35; pointer-events:none; }
  @media (max-width:640px){ .cv-hpill span{ display:none; } .cv-hpill{ padding:0 9px; } }

  /* Smaller, page-like notebook */
  #cvPanel:not(.in-room-wide){ }
  body:not(.in-live-room) #cvPanel{ max-width:1040px; margin:0 auto; }
  .cv-pagewrap{ max-width:none; }
  #cvEdit{ padding:24px 32px 80px; font-size:15.5px; }
  .cv-ph{ max-width:none; padding:24px 32px; }
  .cv-ph b{ font-size:17px; margin-bottom:10px; } .cv-ph span{ font-size:15px; }
  .cv-rail{ width:78px; } .cv-thumb{ width:72px; height:54px; } .cv-thumb-page{ transform:scale(.12); }
  .cv-head{ padding:8px 12px; } .cv-main{ gap:8px; padding:0 8px 8px; }
  .cv-tb{ width:32px; height:32px; } .cv-tools{ padding:5px 6px; }

  .cv-sizeseg{ display:none; background:rgba(255,255,255,.1); border-radius:10px; padding:3px; gap:2px; flex-shrink:0; }
  @media (min-width:900px){ body.in-live-room .cv-sizeseg{ display:inline-flex; } }
  .cv-sizeseg button{ border:none; background:none; color:#fff; width:30px; height:28px; border-radius:7px; font:800 12px var(--font); cursor:pointer; opacity:.75; }
  .cv-sizeseg button:hover{ opacity:1; background:rgba(255,255,255,.12); }
  .cv-sizeseg button.on{ background:#fff; color:#111; opacity:1; }

  .vc-flag{ width:24px; height:16px; display:block; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
  /* 3. no drag hint over the video while the notebook is open */
  body.cv-open .live-stage-hint{ display:none; }
  /* 4. notebook toolbar wraps on phones instead of hiding tools off-screen */
  @media (max-width:640px){ .cv-tools{ flex-wrap:wrap; overflow:visible; row-gap:2px; } .cv-sep{ display:none; } }

  .sh-audio-off{ cursor:default !important; pointer-events:none; }
  .sh-audio-note{ background:#fff7ed; color:#7c2d12; border-radius:12px; padding:9px 12px; font-size:13.5px; margin:8px 0 12px; line-height:1.45; }
  .sh-pager{ display:flex; align-items:center; gap:8px; margin:10px 0 14px; flex-wrap:wrap; }
  .sh-pager .skip-btn, .sh-pager .check-btn{ margin:0; padding:8px 14px; min-height:0; width:auto; }
  .sh-pager button:disabled{ opacity:.4; }
  .sh-pg-count{ font:700 13px var(--font); color:var(--muted); min-width:70px; text-align:center; }
  .sh-pg-all{ margin-left:auto; border:none; background:none; color:var(--cover,#1d9178); font:700 13px var(--font); cursor:pointer; text-decoration:underline; }

  #shFloatBar{ display:none !important; }
  .sh-lesson-foot{ display:flex; gap:10px; margin:22px 0 8px; }
  .sh-lesson-foot .skip-btn, .sh-lesson-foot .check-btn{ margin:0; width:auto; }
  .sh-lesson-foot .check-btn{ flex:1; }

  .sh-sub{ font-size:15px; margin:18px 0 6px; }
  .sh-num-table td.sh-num{ font-weight:800; width:90px; }
  .sh-num-table td:last-child{ color:var(--muted); font-size:12.5px; }
  .sh-say-word{ border:none; background:none; padding:0; font:inherit; color:var(--ink); cursor:pointer; text-align:left; }
  .sh-say-word:hover{ color:var(--cover,#1d9178); text-decoration:underline; }
  .sh-rules{ padding-left:20px; margin:6px 0 8px; line-height:1.55; }

.vc-suggest-pencil{ background:none; border:1px solid var(--border, #d8d2c4); color:var(--muted, #7a7466); border-radius:999px; width:28px; height:28px; font-size:14px; line-height:1; cursor:pointer; margin-left:8px; vertical-align:middle; opacity:.75; padding:0; }
.vc-suggest-pencil:hover{ opacity:1; }
.sh-lesson-pencil{ float:right; margin:2px 0 0 8px; position:relative; z-index:1; }

.vc-suggest-pencil, #vcSuggestModeBtn{ display:none !important; }
body.vc-teacher #vcSuggestModeBtn, body.vc-fixer #vcSuggestModeBtn{ display:block !important; }
#vcSuggestModeBtn{ position:fixed; left:12px; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:900; background:var(--card, #fff); color:var(--text, #222); border:1.5px solid var(--accent, #1f8a70); border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.15); cursor:pointer; }
body.in-live-room #vcSuggestModeBtn, body.in-solo-call #vcSuggestModeBtn{ display:none !important; }
.vc-line-pen{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:6px; border-radius:50%; font-size:12px; line-height:1; vertical-align:middle; cursor:pointer; color:var(--muted, #7a7466); border:1px solid color-mix(in srgb, currentColor 35%, transparent); background:var(--card, #fff); opacity:.7; user-select:none; flex:none; font-weight:400; font-style:normal; text-transform:none; letter-spacing:0; }
.vc-line-pen:hover, .vc-line-pen:focus-visible{ opacity:1; color:var(--accent, #1f8a70); outline:none; }
.vc-rev-card{ border:1px solid var(--border, #e3ddd0); border-radius:12px; padding:10px 12px; margin:8px 0; background:var(--card, #fff); }
.vc-rev-loc{ font-size:11.5px; color:var(--muted, #7a7466); margin-bottom:6px; }
.vc-rev-row{ display:flex; gap:8px; align-items:baseline; margin:3px 0; font-size:14px; }
.vc-rev-k{ flex:none; width:76px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted, #7a7466); }
.vc-rev-old{ text-decoration:line-through; opacity:.7; }
.vc-rev-new{ font-weight:600; }
.vc-rev-note{ font-size:13px; margin:6px 0 2px; }
.vc-rev-meta{ font-size:11.5px; color:var(--muted, #7a7466); margin:4px 0 8px; }
.vc-rev-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.vc-rev-actions button{ border:1px solid var(--border, #d8d2c4); background:var(--card, #fff); color:inherit; border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; }
.vc-rev-actions .vc-rev-yes.on{ background:#1f8a70; color:#fff; border-color:#1f8a70; }
.vc-rev-actions .vc-rev-no.on{ background:#c0392b; color:#fff; border-color:#c0392b; }
.vc-rev-actions .vc-rev-admin-ok{ background:var(--accent, #1f8a70); color:#fff; border-color:transparent; font-weight:600; }
.vc-rev-wait{ font-size:12.5px; color:var(--muted, #7a7466); }
.vc-rev-count{ display:inline-block; min-width:20px; padding:1px 7px; border-radius:999px; background:#c0392b; color:#fff; font-size:12px; margin-left:6px; vertical-align:middle; }

/* ---------- Teaching tools: Tone Trainer, live drills, homework buttons ---------- */
.vc-hw-btn{ display:none !important; }
body.vc-teacher .vc-hw-btn{ display:inline-flex !important; width:auto; margin:8px 0; font-size:13px; }
.vc-tone{ max-width:560px; width:calc(100vw - 24px); }
.vc-tone-ask{ background:color-mix(in srgb, var(--accent, #1f8a70) 14%, transparent); border-radius:10px; padding:8px 10px; font-size:13.5px; margin-bottom:8px; text-align:center; }
.vc-tone-word{ text-align:center; font-size:32px; font-weight:800; margin:4px 0 2px; }
.vc-tone-tones{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:8px; }
.vc-tone-chip{ font-size:12.5px; padding:4px 10px; border-radius:999px; background:var(--paper-dark, #f4efe3); color:var(--ink, #062822); } /* v224: tokens that exist (--card-2 was undefined, so dark mode showed light text on a cream pill) */
.vc-tone-chip.ok{ box-shadow:inset 0 0 0 2px #1f8a70; } .vc-tone-chip.bad{ box-shadow:inset 0 0 0 2px #e67e22; } .vc-tone-heard{ font-weight:800; }
.vc-tone-chip.t-huyen{ color:#2b6cb0; } .vc-tone-chip.t-sac{ color:#c05621; } .vc-tone-chip.t-hoi{ color:#2f855a; } .vc-tone-chip.t-nga{ color:#6b46c1; } .vc-tone-chip.t-nang{ color:#c53030; }
#vcToneCanvas{ width:100%; height:180px; display:block; border-radius:12px; background:var(--paper, #faf6ec); border:1px solid var(--line, #e7e0d0); }
body.dark-mode .vc-tone-chip.t-huyen{ color:#90cdf4; } body.dark-mode .vc-tone-chip.t-sac{ color:#fbd38d; } body.dark-mode .vc-tone-chip.t-hoi{ color:#9ae6b4; } body.dark-mode .vc-tone-chip.t-nga{ color:#d6bcfa; } body.dark-mode .vc-tone-chip.t-nang{ color:#feb2b2; }
.vc-tone-legend{ display:flex; gap:16px; justify-content:center; font-size:12px; margin:6px 0; color:var(--muted, #7a7466); }
.vc-tone-legend i{ display:inline-block; width:18px; height:4px; border-radius:2px; vertical-align:middle; margin-right:4px; }
.vc-tone-legend i.ref{ background:#1f8a70; } .vc-tone-legend i.you{ background:#e67e22; }
.vc-tone-src{ text-align:center; font-size:12.5px; line-height:1.4; margin:-2px 8px 6px; color:var(--muted, #7a7466); } /* v235: where the line + 🔊 come from (twin / other voice / stand-in) */
.vc-tone-verdict{ text-align:center; font-size:14px; min-height:40px; margin:4px 0 10px; line-height:1.45; }
.vc-tone-match{ display:inline-block; margin-left:4px; font-size:12px; padding:1px 8px; border-radius:999px; background:color-mix(in srgb, #1f8a70 15%, transparent); }
.vc-tone-btns{ display:flex; gap:8px; } .vc-tone-btns button{ flex:1; margin:0; }
#vcToneRec.rec{ background:#c0392b; }
.vc-tone-room{ margin-top:12px; border-top:1px solid var(--border, #e7e0d0); padding-top:10px; display:grid; gap:8px; }
.vc-seg{ display:flex; gap:6px; margin-bottom:10px; } .vc-seg button{ flex:1; border:1px solid var(--border, #d8d2c4); background:var(--card, #fff); color:inherit; border-radius:999px; padding:7px 10px; cursor:pointer; font:inherit; font-size:13px; }
.vc-seg button.on{ background:var(--accent, #1f8a70); color:#fff; border-color:transparent; }
.vc-drill-bank, .vc-drill-answer{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.vc-drill-answer{ min-height:48px; padding:8px; border-radius:12px; border:2px dashed var(--border, #d8d2c4); margin:8px 0; font-size:17px; }
.vc-tile{ border:1px solid var(--border, #d8d2c4); background:var(--card, #fff); color:inherit; border-radius:10px; padding:8px 12px; font:inherit; font-size:16px; cursor:pointer; min-height:40px; }
.vc-tile.on{ background:color-mix(in srgb, var(--accent, #1f8a70) 16%, var(--card, #fff)); border-color:var(--accent, #1f8a70); }
.vc-drill-empty{ color:var(--muted, #7a7466); font-size:13px; }
.vc-gap{ display:inline-block; min-width:60px; border-bottom:2px solid var(--accent, #1f8a70); text-align:center; }
.vc-gap.filled{ font-weight:700; }
#vcDrillPanel{ display:none; position:fixed; z-index:9500; left:50%; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom, 0px)); width:min(520px, calc(100vw - 24px)); max-height:62vh; overflow:auto; background:var(--card, #fff); color:var(--ink, #062822); border-radius:18px; padding:12px 14px; box-shadow:0 18px 50px rgba(0,0,0,.3); }
#vcDrillPanel.show{ display:block; }
.vc-drill-top{ display:flex; justify-content:space-between; align-items:center; }
.vc-drill-x{ border:none; background:none; font-size:18px; cursor:pointer; color:inherit; }
.vc-drill-who{ font-size:12px; color:var(--muted, #7a7466); margin-bottom:4px; }
.vc-drill-en{ font-style:italic; font-size:14px; margin:4px 0; }
.vc-drill-result{ margin:6px 0; font-weight:700; } .vc-drill-result.ok{ color:#1f8a70; } .vc-drill-result.no{ color:#c0392b; }
.vc-drill-sol{ font-weight:400; font-size:14px; color:var(--ink, #062822); margin-top:2px; }
.vc-drill-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .vc-drill-actions button{ width:auto; margin:0; flex:1; min-height:42px; }
.vc-drill-make{ max-width:500px; width:calc(100vw - 24px); }
.vc-drill-fill{ display:grid; grid-template-columns:1fr 64px auto; gap:6px; margin-bottom:8px; } .vc-drill-fill select{ margin:0 !important; min-width:0; } .vc-drill-fill button{ width:auto; margin:0; white-space:nowrap; }
.vc-drill-own{ margin-bottom:6px; } .vc-drill-own > summary{ cursor:pointer; font-weight:700; font-size:13.5px; padding:4px 0; }
.vc-drill-count{ color:var(--accent, #1f8a70); }
.vc-drill-list{ display:grid; gap:6px; max-height:38vh; overflow:auto; padding:2px; }
.vc-draft{ display:flex; gap:8px; align-items:flex-start; border:1px solid var(--border, #e2dccd); background:var(--card, #fff); border-radius:12px; padding:8px; }
.vc-draft-type{ flex:0 0 34px; height:34px; border-radius:10px; border:1px solid var(--border, #d8d2c4); background:var(--paper, #faf6ec); cursor:pointer; font-size:16px; }
.vc-draft-body{ flex:1; min-width:0; font-size:14.5px; line-height:1.6; }
.vc-draft-w{ border:none; background:none; padding:0 2px; font:inherit; color:inherit; cursor:pointer; border-radius:5px; }
.vc-draft-w.on{ background:var(--accent, #1f8a70); color:#fff; padding:0 5px; }
.vc-draft-en{ font-size:12px; color:var(--muted, #7a7466); font-style:italic; line-height:1.3; }
.vc-draft-x{ border:none; background:none; color:var(--muted, #7a7466); cursor:pointer; font-size:15px; padding:6px; }
.vc-drill-tip{ font-size:11.5px; color:var(--muted, #7a7466); text-align:center; }
.vc-drill-dots{ display:flex; gap:5px; justify-content:center; margin:6px 0 4px; } .vc-drill-dots i{ width:9px; height:9px; border-radius:50%; background:var(--border, #ddd6c6); }
.vc-drill-dots i.cur{ background:var(--accent, #1f8a70); transform:scale(1.25); } .vc-drill-dots i.ok{ background:#1f8a70; opacity:.55; } .vc-drill-dots i.no{ background:#c0392b; opacity:.6; }
.vc-drill-k{ margin-left:auto; margin-right:8px; font-size:12px; font-weight:700; color:var(--muted, #7a7466); }
.vc-drill-score{ text-align:center; font-size:24px; font-weight:800; margin:10px 0 6px; }
.vc-drill-review{ display:grid; gap:4px; font-size:14px; max-height:30vh; overflow:auto; }
.vc-drill-p{ font-size:17px; }
.vc-drill-actions .vc-drill-hear{ flex:0 0 48px; padding:0; } .vc-drill-actions button{ white-space:nowrap; }
.vc-drill-make .vc-seg button{ white-space:nowrap; padding:8px 6px; } @media (max-width:420px){ .vc-drill-make .vc-seg button{ font-size:12.5px; } }

/* ---------- Teaching tools part 2 ---------- */
.vc-tt-modal{ max-width:520px; width:calc(100vw - 24px); }
.vc-lb-result{ margin-top:12px; border-top:1px solid var(--border, #e7e0d0); padding-top:10px; }
.vc-lb-ok{ font-size:14px; margin-bottom:6px; }
.vc-lb-words{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; } .vc-lb-words span{ font-size:12.5px; padding:3px 8px; border-radius:999px; background:var(--card-2, #f4efe3); }
.vc-lb-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .vc-lb-actions button{ width:auto; margin:0; }
@media (max-width:420px){ .vc-lb-actions{ grid-template-columns:1fr; } }
.vc-float-panel{ display:none; position:fixed; z-index:9500; left:50%; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom, 0px)); width:min(520px, calc(100vw - 24px)); max-height:62vh; overflow:auto; background:var(--card, #fff); color:var(--ink, #062822); border-radius:18px; padding:12px 14px; box-shadow:0 18px 50px rgba(0,0,0,.3); }
.vc-float-panel.show{ display:block; }
.vc-sd-q{ display:flex; align-items:center; gap:10px; margin:8px 0; } .vc-sd-n{ font-size:12px; color:var(--muted, #7a7466); }
.vc-sd-word{ flex:1; text-align:center; font-size:26px; font-weight:800; } .vc-sd-t{ font-weight:700; color:var(--accent, #1f8a70); min-width:28px; text-align:right; }
.vc-sd-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .vc-sd-opt{ min-height:48px; font-size:15px; }
.vc-sd-opt.right{ background:#1f8a70; color:#fff; border-color:#1f8a70; } .vc-sd-opt.wrong{ background:#c0392b; color:#fff; border-color:#c0392b; }
.vc-sd-opt:disabled{ cursor:default; opacity:1; }
.vc-sd-board{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; font-size:13.5px; border-top:1px solid var(--border, #e7e0d0); padding-top:8px; }
.vc-sd-over{ text-align:center; font-size:22px; font-weight:800; margin:10px 0; }
.vc-tone-hw{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; background:color-mix(in srgb, var(--accent, #1f8a70) 12%, transparent); border-radius:10px; padding:6px 10px; margin-bottom:6px; }
.vc-voice-note{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:-4px 0 10px; } .vc-voice-note .skip-btn{ width:auto; margin:0; }
.vc-credits{ border:1px solid var(--border, #e7e0d0); border-radius:14px; padding:10px 12px; margin:0 0 12px; background:var(--card, #fff); }
.vc-credits-head{ font-weight:800; margin-bottom:4px; } .vc-credits-count{ font-size:14px; margin:2px 0; }
.vc-credits-bar{ height:6px; border-radius:3px; background:var(--card-2, #efe9dc); overflow:hidden; margin:4px 0 8px; } .vc-credits-bar i{ display:block; height:100%; background:var(--accent, #1f8a70); }
.vc-credits-actions{ display:flex; flex-wrap:wrap; gap:6px; } .vc-credits-actions button{ width:auto; margin:0; padding:7px 12px; font-size:13px; }
.vc-teach-menu{ width:260px; }
.vc-keys{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; } .vc-keys div{ display:flex; gap:8px; align-items:center; font-size:14px; }
.vc-keys kbd{ min-width:26px; text-align:center; padding:3px 7px; border-radius:6px; border:1px solid var(--border, #d8d2c4); border-bottom-width:3px; font:600 13px system-ui, sans-serif; background:var(--card, #fff); }

/* Whiteboard now lives inside the Notebook (🖍️ button, still pops out) */
#liveBoardBtn{ display:none !important; }
#cvBoard.on{ background:var(--accent, #1f8a70); color:#fff; }

/* Notebook toolbar: wrap onto a 2nd row instead of hiding tools past the edge (laptops too) */
.cv-tools{ flex-wrap:wrap; overflow:visible; row-gap:2px; }
.vc-rev-enrow{ align-items:flex-start; }
.vc-rev-en{ flex:1; min-width:0; }
.vc-rev-noen{ opacity:.7; }
.vc-rev-enedit{ margin-left:6px; border:1px solid var(--line,#ddd); background:transparent; border-radius:999px; padding:2px 10px; font:inherit; font-size:12px; cursor:pointer; }
.vc-rev-enin{ margin-bottom:6px; }
.vc-rev-enhint{ display:block; margin-top:4px; opacity:.7; font-size:11.5px; }
/* v154 admin bulk approve + English check */
.vc-rev-bulk{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; position:sticky; top:0; z-index:3; background:var(--paper,#fffaf0); padding:8px 0; }
.vc-rev-selall{ display:flex; gap:6px; align-items:center; font-weight:700; font-size:14px; } .vc-rev-seln{ font-size:13px; opacity:.7; margin-right:auto; }
.vc-rev-sel{ display:inline-flex; align-items:center; margin-right:8px; } .vc-rev-sel input{ width:20px; height:20px; }
.vc-rev-card.picked{ outline:2px solid var(--cover,#1d9178); }
.vc-enchk-card{ border-left:4px solid #e8894a; }
.vc-rev-bulk button{ border:1px solid var(--border, #d8d2c4); background:var(--card, #fff); color:inherit; border-radius:999px; padding:8px 14px; font:inherit; font-size:13.5px; cursor:pointer; min-height:40px; }
.vc-rev-bulk .vc-rev-admin-ok{ background:var(--accent, #1f8a70); color:#fff; border-color:transparent; font-weight:700; }
.vc-rev-bulk .vc-rev-admin-no{ color:#c0392b; border-color:#c0392b; }
.vc-rev-bulk button:disabled{ opacity:.45; cursor:default; }