@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans:wght@400;500;600;700;800;900&display=swap');
    /* ── Admin user-stats modal ── */
    .vs-stats-overlay { position: fixed; inset: 0; z-index: 100100; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
    .vs-stats-box { background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: 520px; max-width: 96vw; overflow: hidden; font-family: 'Nunito','Plus Jakarta Sans',sans-serif; }
    .vs-stats-loading { padding: 40px; text-align: center; color: #64748b; }
    .vs-stats-hd { position: relative; font-size: 1.15rem; font-weight: 800; color: #0f172a; padding: 16px 20px; border-bottom: 1.5px solid #f1f5f9; }
    .vs-stats-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 9px; border: none; background: #f1f5f9; color: #475569; font-size: 1.3rem; cursor: pointer; line-height: 1; }
    .vs-stats-close:hover { background: #fee2e2; color: #b91c1c; }
    .vs-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 18px 20px 22px; }
    .vs-stat-card { background: #f8fafc; border: 1.5px solid var(--sc, #cbd5e1); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
    .vs-stat-card:first-child { grid-column: 1 / -1; }
    .vs-stat-ico { font-size: 1.3rem; }
    .vs-stat-num { font-size: 2rem; font-weight: 900; color: var(--sc, #0f172a); line-height: 1.1; }
    .vs-stat-lbl { font-size: .85rem; font-weight: 700; color: #64748b; }
    :root {
      --bg: #f5f3ee;
      --bg2: #ede9e1;
      --surface: #fff;
      --surface2: #faf9f6;
      --border: #e2ddd5;
      --border2: #d4cec4;
      --ink: #1a1714;
      --ink2: #4a4540;
      --muted: #9e9890;
      --accent: #e05c2a;
      --accent2: #2a7ae0;
      --accent3: #27ae72;
      --accent-soft: rgba(224, 92, 42, .1);
      --blue-soft: rgba(42, 122, 224, .1);
      --green-soft: rgba(39, 174, 114, .1);
      --shadow-sm: 0 1px 4px rgba(26, 23, 20, .07), 0 4px 16px rgba(26, 23, 20, .05);
      --shadow-md: 0 4px 24px rgba(26, 23, 20, .1), 0 1px 4px rgba(26, 23, 20, .06);
      --shadow-lg: 0 12px 48px rgba(26, 23, 20, .12), 0 2px 8px rgba(26, 23, 20, .06);
      --radius: 16px;
      --radius-sm: 10px;
      --radius-pill: 999px;
      --tp-zoom: 1;
      --tp-ipa-scale: 0.6;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: #b0aaa2 #f0ece8;
      overflow-y: scroll
    }

    html::-webkit-scrollbar { width: 8px }
    html::-webkit-scrollbar-track { background: #f0ece8 }
    html::-webkit-scrollbar-thumb { background: #b0aaa2; border-radius: 999px }

    body {
      font-family: 'Lora', sans-serif;
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      overflow-x: hidden
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b5aa9a' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    }

    .screen {
      position: relative;
      z-index: 1;
      display: none;
      min-height: 100dvh
    }

    .screen.active {
      display: block
    }

    /* ── Main background picker ── */
    .main-bg-wrap { position: relative; flex-shrink: 0; }
    .main-bg-toggle {
      height: 32px; padding: 0 12px; border-radius: 999px;
      border: 1.5px solid var(--border); background: var(--surface2);
      font-size: .8rem; font-weight: 700; color: var(--ink2);
      cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
      transition: all .15s;
    }
    .main-bg-toggle:hover { border-color: #a78bfa; background: #ede9fe; color: #6d28d9; }
    .main-bg-panel {
      display: none; position: fixed;
      background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.13); padding: 12px 14px;
      min-width: 240px; z-index: 99999; gap: 8px;
      flex-direction: column;
    }
    .main-bg-panel.open { display: flex; }
    .main-bg-row { display: flex; align-items: center; gap: 8px; }
    .main-bg-lbl { font-size: .75rem; color: #6b7280; white-space: nowrap; }
    .main-bg-swatch-wrap {
      position: relative; width: 32px; height: 32px; flex-shrink: 0; cursor: pointer;
      overflow: visible;
    }
    .main-bg-swatch {
      width: 100%; height: 100%; border-radius: 8px;
      border: 2.5px solid #d1d5db; transition: border-color .15s, transform .1s;
      box-sizing: border-box;
    }
    .main-bg-swatch-wrap:hover .main-bg-swatch { border-color: #7c3aed; transform: scale(1.07); }
    .main-bg-swatch-wrap input[type="color"] {
      position: absolute; bottom: -1px; left: 0;
      width: 100%; height: 1px;
      opacity: 0; cursor: pointer; padding: 0; margin: 0; border: none;
    }
    .main-bg-apply-btn {
      padding: 4px 10px; border-radius: 6px; border: 1.5px solid #7c3aed;
      background: #7c3aed; color: #fff; font-size: .75rem; font-weight: 700; cursor: pointer;
      transition: all .13s; white-space: nowrap;
    }
    .main-bg-apply-btn:hover { background: #6d28d9; border-color: #6d28d9; }
    .main-bg-effect-btn {
      padding: 4px 12px; border-radius: 6px; border: 1.5px solid #d1d5db;
      background: #f9fafb; color: #374151; font-size: .78rem; font-weight: 600;
      cursor: pointer; transition: all .13s; white-space: nowrap;
    }
    .main-bg-effect-btn:hover { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
    .main-bg-effect-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }

    /* ── Dark background: white text overrides ── */
    body.main-dark-bg .hero {
      background: rgba(0,0,0,.18);
      border-bottom-color: rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    body.main-dark-bg .logo-text { color: #fff; }
    body.main-dark-bg .logo-text em { color: #fde68a; }
    body.main-dark-bg .hero-tagline,
    body.main-dark-bg .hero-sub { color: rgba(255,255,255,.78); }
    body.main-dark-bg .hero-right { border-right-color: rgba(255,255,255,.18); }
    body.main-dark-bg .step-label { color: rgba(255,255,255,.9); }
    body.main-dark-bg #langToggleBtn {
      background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff;
    }
    body.main-dark-bg .tour-replay-btn {
      background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff;
    }
    body.main-dark-bg .screen .tour-replay-btn {
      background: var(--surface); border-color: var(--border); color: var(--ink);
    }
    body.main-dark-bg #authUserBtn {
      background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3);
    }
    body.main-dark-bg #authDisplayNameEl { color: #fff; }
    body.main-dark-bg .auth-logout-btn {
      background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85);
    }
    body.main-dark-bg .main-bg-toggle {
      background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff;
    }
    /* ── Dark background: dict sidebar ── */
    body.main-dark-bg .yt-dc-panel-title { color: rgba(255,255,255,.92); }
    body.main-dark-bg .yt-dc-panel-header { border-color: rgba(255,255,255,.15); }
    /* ── Dark background: leaderboard sidebar ── */
    body.main-dark-bg .lb-sidebar { color: #fff; }
    body.main-dark-bg .lb-title { color: rgba(255,255,255,.95); }
    body.main-dark-bg .lb-header,
    body.main-dark-bg .lb-section-tabs { border-color: rgba(255,255,255,.15); }
    body.main-dark-bg .lb-tab {
      background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
      border-color: rgba(255,255,255,.15);
    }
    body.main-dark-bg .lb-tab.active { background: var(--accent); color: #fff; }
    body.main-dark-bg .lb-sec-tab {
      background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.7);
    }
    body.main-dark-bg .lb-sec-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    body.main-dark-bg .lb-loading,
    body.main-dark-bg .lb-empty { color: rgba(255,255,255,.5); }
    body.main-dark-bg .lb-pod-name,
    body.main-dark-bg .lb-row-name,
    body.main-dark-bg .lb-user-name { color: rgba(255,255,255,.92); }
    body.main-dark-bg .lb-pod-time,
    body.main-dark-bg .lb-row-time,
    body.main-dark-bg .lb-row-rank,
    body.main-dark-bg .lb-user-ago,
    body.main-dark-bg .lb-users-summary { color: rgba(255,255,255,.55); }
    body.main-dark-bg .lb-row { background: rgba(255,255,255,.08); }
    body.main-dark-bg .lb-user-row,
    body.main-dark-bg .lb-users-summary { border-color: rgba(255,255,255,.12); }
    body.main-dark-bg .lb-presence-dot { border-color: rgba(255,255,255,.15); }
    /* ── VL dark mode: leaderboard sidebar ── */
    .lb-dark-mode { background: #0f172a !important; color: #fff; }
    .lb-dark-mode .lb-title { color: rgba(255,255,255,.95); }
    .lb-dark-mode .lb-header,
    .lb-dark-mode .lb-section-tabs { border-color: rgba(255,255,255,.15); }
    .lb-dark-mode .lb-tab { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.15); }
    .lb-dark-mode .lb-tab.active { background: var(--accent); color: #fff; }
    .lb-dark-mode .lb-sec-tab { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.7); }
    .lb-dark-mode .lb-sec-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    .lb-dark-mode .lb-loading,
    .lb-dark-mode .lb-empty { color: rgba(255,255,255,.5); }
    .lb-dark-mode .lb-pod-name,
    .lb-dark-mode .lb-row-name,
    .lb-dark-mode .lb-user-name { color: rgba(255,255,255,.92); }
    .lb-dark-mode .lb-pod-time,
    .lb-dark-mode .lb-row-time,
    .lb-dark-mode .lb-row-rank,
    .lb-dark-mode .lb-user-ago,
    .lb-dark-mode .lb-users-summary { color: rgba(255,255,255,.55); }
    .lb-dark-mode .lb-row { background: rgba(255,255,255,.08); }
    .lb-dark-mode .lb-user-row,
    .lb-dark-mode .lb-users-summary { border-color: rgba(255,255,255,.12); }
    .lb-dark-mode .lb-presence-dot { border-color: rgba(255,255,255,.15); }
    /* ── Dark background: source cards ── */
    body.main-dark-bg .source-card {
      background: rgba(255,255,255,.15);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-color: rgba(255,255,255,.28);
    }
    body.main-dark-bg .source-card:hover {
      background: rgba(255,255,255,.26);
      border-color: rgba(255,255,255,.52);
      box-shadow: 0 6px 24px rgba(0,0,0,.22);
    }
    body.main-dark-bg .source-card.selected {
      background: rgba(42,122,224,.38);
      border-color: rgba(255,255,255,.55);
    }
    body.main-dark-bg .source-card-title { color: #1a1714; text-shadow: none; }
    body.main-dark-bg .source-card-desc  { color: #4a4540; }
    body.main-dark-bg #btnFetchTranscript { color: #1a1714 !important; border-color: rgba(26,23,20,.35) !important; }

    /* ── Lantern bg: solid white cards ── */
    body.main-lantern-bg .source-card {
      background: #fff !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-color: #e5e7eb !important;
      box-shadow: 0 2px 12px rgba(0,0,0,.18);
    }
    body.main-lantern-bg .source-card:hover {
      background: #f8fafc !important;
      border-color: #6366f1 !important;
      box-shadow: 0 6px 24px rgba(0,0,0,.22);
    }
    body.main-lantern-bg .source-card.selected {
      background: #eff6ff !important;
      border-color: #3b82f6 !important;
    }
    body.main-lantern-bg .source-card-title { color: #111827 !important; text-shadow: none; }
    body.main-lantern-bg .source-card-desc  { color: #6b7280 !important; }

    /* ── HERO ── */
    .hero {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 18px 36px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: var(--shadow-sm)
    }
    #langToggleBtn:hover { background: var(--surface); border-color: var(--accent2); color: var(--accent2); }

    .logo-mark {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .logo-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--accent), #f0914a);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      box-shadow: 0 4px 12px rgba(224, 92, 42, .3)
    }

    .logo-text {
      font-size: 1.4rem;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -.5px
    }

    .logo-text em {
      color: var(--accent);
      font-style: normal
    }

    .hero-right {
      text-align: right;
      margin-left: auto;
      padding-right: 14px;
      border-right: 1px solid var(--border);
      flex-shrink: 0;
    }

    .hero-tagline {
      font-size: .8rem;
      color: var(--muted);
      font-weight: 700
    }

    .hero-sub {
      font-size: .73rem;
      color: var(--border2);
      margin-top: 1px;
      font-weight: 600
    }

    .home-layout {
      display: flex; align-items: flex-start;
      max-width: 1560px; margin: 0 auto; gap: 0;
    }
    .main-content {
      flex: 1; min-width: 0;
      max-width: 1000px;
      padding: 32px 36px 80px
    }
    /* ── Home Dictionary Sidebar (left) ── */
    .home-dict-sidebar {
      width: 290px; flex-shrink: 0;
      padding: 0 0 80px;
      position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
      margin-right: 8px;
      box-sizing: border-box;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .home-dict-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .home-dict-sidebar .yt-dict-result { overflow-y: visible; max-height: none; }
    .home-dict-expand-btn {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
      border: 1.5px solid var(--border); background: var(--surface, #fff);
      color: var(--ink2, #475569); cursor: pointer; font-size: .9rem; line-height: 1;
      display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
    }
    .home-dict-expand-btn:hover { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
    /* Trang mở rộng dùng lại layout dict card nhưng rộng hơn */
    #homeDictExpandResult { max-height: none; }
    /* ── Leaderboard Sidebar ── */
    .lb-sidebar {
      width: 260px; flex-shrink: 0;
      padding: 24px 0 80px 0;
      position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
    }
    .lb-header {
      padding: 0 16px 10px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 10px;
    }
    .lb-title {
      font-family: 'Nunito', sans-serif; font-size: .92rem; font-weight: 900;
      color: var(--ink);
    }
    .lb-tabs {
      display: flex; gap: 4px; padding: 0 12px 10px;
    }
    .lb-tab {
      flex: 1; padding: 5px 0; border-radius: 8px; border: none;
      font-family: 'Nunito', sans-serif; font-size: .72rem; font-weight: 800;
      background: var(--surface2); color: var(--muted); cursor: pointer;
      transition: all .15s;
    }
    .lb-tab.active { background: #0d9488; color: #fff; }
    .lb-body { padding: 0 12px; }
    .lb-loading { text-align: center; color: var(--muted); font-size: .78rem; padding: 24px 0; }
    .lb-empty   { text-align: center; color: var(--muted); font-size: .78rem; padding: 24px 0; }
    /* Section switcher */
    .lb-section-tabs {
      display: flex; gap: 0; padding: 0 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 2px;
    }
    .lb-sec-tab {
      flex: 1; padding: 6px 0; border: 1.5px solid var(--border); background: var(--bg);
      font-family: 'Nunito', sans-serif; font-size: .72rem; font-weight: 800;
      cursor: pointer; transition: all .15s; color: var(--muted);
    }
    .lb-sec-tab:first-child { border-radius: 8px 0 0 8px; }
    .lb-sec-tab:last-child  { border-radius: 0 8px 8px 0; border-left: none; }
    .lb-sec-tab.active { background: #0d9488; border-color: #0d9488; color: #fff; }
    /* Active users panel */
    .lb-users-body { padding: 10px 12px 0; }
    .lb-users-summary {
      display: flex; align-items: center; gap: 6px;
      font-size: .72rem; font-weight: 700; color: var(--muted);
      margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
    }
    .lb-user-row {
      display: flex; align-items: center; gap: 9px;
      padding: 7px 0; border-bottom: 1px solid var(--border);
    }
    .lb-user-row:last-child { border-bottom: none; }
    .lb-user-av-wrap {
      position: relative; width: 30px; height: 30px; flex-shrink: 0;
      border-radius: 50%; overflow: visible;
      background: linear-gradient(135deg,#a78bfa,#818cf8);
      display: flex; align-items: center; justify-content: center;
    }
    .lb-presence-dot {
      position: absolute; bottom: 0; right: 0;
      width: 9px; height: 9px; border-radius: 50%;
      border: 2px solid #fff;
    }
    .lb-dot-online  { background: #22c55e; }
    .lb-dot-offline { background: #9ca3af; }
    .lb-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .lb-user-name { font-size: .78rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lb-user-ago  { font-size: .67rem; color: var(--muted); }
    /* podium top 3 */
    .lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-bottom: 14px; }
    .lb-pod {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      flex: 1;
    }
    .lb-pod-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--accent); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 900; overflow: hidden; position: relative;
    }
    .lb-pod-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .lb-pod-medal { font-size: 1.1rem; line-height: 1; }
    .lb-pod-name {
      font-family: 'Nunito', sans-serif; font-size: .68rem; font-weight: 800;
      color: var(--ink); text-align: center; max-width: 70px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lb-pod-time {
      font-family: 'Nunito', sans-serif; font-size: .65rem; font-weight: 700; color: var(--muted);
    }
    .lb-pod-block {
      width: 100%; border-radius: 8px 8px 0 0; margin-top: 4px;
    }
    /* Podium — pastel (1st tím, 2nd xanh, 3rd hồng) */
    .lb-pod--1 .lb-pod-block { height: 46px; background: linear-gradient(135deg,#a78bfa,#c4b5fd); }
    .lb-pod--2 .lb-pod-block { height: 32px; background: linear-gradient(135deg,#7dd3fc,#bae6fd); }
    .lb-pod--3 .lb-pod-block { height: 22px; background: linear-gradient(135deg,#f9a8d4,#fbcfe8); }
    .lb-pod--1 .lb-pod-avatar { background: #8b5cf6; box-shadow: 0 0 0 3px #ede9fe; }
    .lb-pod--2 .lb-pod-avatar { background: #38bdf8; box-shadow: 0 0 0 3px #e0f2fe; }
    .lb-pod--3 .lb-pod-avatar { background: #ec4899; box-shadow: 0 0 0 3px #fce7f3; }
    /* list below */
    .lb-list { display: flex; flex-direction: column; gap: 7px; }
    .lb-row {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 11px; border-radius: 12px;
      background: var(--surface); border: 1.5px solid var(--border);
      box-shadow: 0 1px 4px rgba(15,23,42,.05);
    }
    /* Avatar màu pastel xoay vòng cho danh sách */
    .lb-list .lb-row:nth-child(6n+1) .lb-row-avatar { background: #f472b6; }
    .lb-list .lb-row:nth-child(6n+2) .lb-row-avatar { background: #a78bfa; }
    .lb-list .lb-row:nth-child(6n+3) .lb-row-avatar { background: #fbbf24; }
    .lb-list .lb-row:nth-child(6n+4) .lb-row-avatar { background: #34d399; }
    .lb-list .lb-row:nth-child(6n+5) .lb-row-avatar { background: #60a5fa; }
    .lb-list .lb-row:nth-child(6n)   .lb-row-avatar { background: #fb923c; }
    .lb-row-rank {
      font-family: 'Nunito', sans-serif; font-size: .7rem; font-weight: 900;
      color: var(--muted); width: 18px; text-align: center; flex-shrink: 0;
    }
    .lb-row-avatar {
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--accent); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 900; overflow: hidden; flex-shrink: 0;
    }
    .lb-row-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .lb-row-info { flex: 1; min-width: 0; }
    .lb-row-name {
      font-family: 'Nunito', sans-serif; font-size: .75rem; font-weight: 800;
      color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lb-row-time {
      font-family: 'Nunito', sans-serif; font-size: .65rem; font-weight: 600; color: var(--muted);
    }
    .lb-streak { font-size: .65rem; color: #d97706; font-weight: 700; }
    .lb-words { font-size: .65rem; color: #16a34a; font-weight: 700; }
    .lb-words-inline { font-size: .62rem; color: #16a34a; font-weight: 700; margin-left: 4px; }
    @media (max-width: 900px) {
      .lb-sidebar { display: none; }
      .home-dict-sidebar { display: none; }
    }

    .step-label {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
      margin-top: 30px
    }

    .step-label:first-child {
      margin-top: 0
    }

    .step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: .65rem;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    /* ── Main vocab section ── */
    .main-vocab-section {
      margin: 10px 0 14px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    /* ── Heading Match exercise ── */
    .rdt-hm-wrap { margin-bottom: 24px; }
    .rdt-hm-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 14px 0;
      border-bottom: 1px solid #f3f4f6;
    }
    .rdt-hm-item:last-of-type { border-bottom: none; }
    .rdt-hm-left {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
    }
    .rdt-hm-para-label {
      width: 38px; height: 38px;
      background: #6366f1;
      color: #fff;
      font-size: 1.1rem;
      font-weight: 900;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .rdt-hm-slot {
      flex: 1;
      min-height: 40px;
      padding: 8px 10px;
      font-size: .84rem;
      line-height: 1.5;
      box-sizing: border-box;
    }
    .rdt-hm-slot-label { font-weight: 800; color: #4338ca; margin-right: 4px; }
    .rdt-hm-slot-placeholder { color: #9ca3af; font-style: italic; font-size: .8rem; }
    .rdt-hm-para-text {
      font-size: .84rem;
      color: #374151;
      line-height: 1.7;
      padding-top: 6px;
    }
    .rdt-hm-word-bank {
      flex-direction: column;
      gap: 6px;
      padding: 14px 16px;
    }
    .rdt-hm-wb-title {
      font-size: .68rem;
      font-weight: 800;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 6px;
    }
    .rdt-hm-chip {
      width: 100%;
      text-align: left;
      border-radius: 8px;
      padding: 8px 14px;
      font-weight: 500;
      font-size: .84rem;
      border-color: #818cf8;
      color: #3730a3;
    }
    .rdt-hm-chip.selected { background: #6366f1; color: #fff; border-color: #6366f1; }
    .rdt-hm-chip.selected .rdt-hm-chip-num { color: #c7d2fe; }
    .rdt-hm-chip-num { font-weight: 800; color: #4338ca; margin-right: 6px; }
    @media (max-width: 540px) {
      .rdt-hm-left { gap: 8px; }
      .wotd-example { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; display: block; }
    }

    /* ── Word of the Day ── */
    .wotd-card {
      grid-column: 2 / -1;
      min-width: 0;
      border-radius: var(--radius);
      background: #fff;
      border: 1.5px solid #e0e7ff;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .wotd-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 14px;
      background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    }
    .wotd-label {
      font-size: .72rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: .03em;
      text-transform: uppercase;
    }
    .wotd-level {
      font-size: .65rem;
      font-weight: 800;
      background: rgba(255,255,255,.25);
      color: #fff;
      padding: 1px 7px;
      border-radius: 999px;
    }
    .wotd-refresh-btn {
      background: rgba(255,255,255,.2);
      border: none;
      color: #fff;
      width: 24px; height: 24px;
      border-radius: 50%;
      cursor: pointer;
      font-size: .9rem;
      line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }
    .wotd-refresh-btn:hover { background: rgba(255,255,255,.35); }
    .wotd-deflang-btn {
      background: rgba(255,255,255,.2);
      border: 1px solid rgba(255,255,255,.4);
      color: #fff; font-size: .68rem; font-weight: 800;
      padding: 2px 9px; border-radius: 999px; cursor: pointer; line-height: 1.4;
      letter-spacing: .5px; transition: background .15s;
    }
    .wotd-deflang-btn:hover { background: rgba(255,255,255,.35); }
    .wotd-deflang-btn.en { background: #fff; color: #6d28d9; }
    .wotd-level-sel {
      background: rgba(255,255,255,.2);
      border: 1px solid rgba(255,255,255,.35);
      color: #fff;
      font-size: .72rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 6px;
      cursor: pointer;
      outline: none;
    }
    .wotd-level-sel option { background: #6366f1; color: #fff; }
    .wotd-body {
      padding: 10px 14px 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .wotd-word-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .wotd-word {
      font-size: 1.25rem;
      font-weight: 800;
      color: #1e1b4b;
      line-height: 1.2;
    }
    .wotd-speak-btn {
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      border-radius: 50%;
      width: 26px; height: 26px;
      cursor: pointer;
      font-size: .8rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background .15s;
    }
    .wotd-speak-btn:hover { background: #e0e7ff; }
    .wotd-ipa {
      font-size: .78rem;
      color: #6b7280;
      font-family: 'Courier New', monospace;
    }
    .wotd-def {
      font-size: .84rem;
      font-weight: 700;
      color: #059669;
      margin-top: 2px;
    }
    .wotd-example-hl { color: #c2410c; font-weight: 700; font-style: italic; }
    .wotd-example {
      font-size: .78rem;
      color: #4b5563;
      font-style: italic;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .main-vocab-badge {
      background: var(--accent); color: #fff;
      font-size: .62rem; font-weight: 900;
      padding: 2px 7px; border-radius: 999px;
      line-height: 1.4;
    }
    .vocab-topic-card {
      cursor: pointer;
      text-align: center;
      padding: 22px 18px;
      border-radius: var(--radius);
      background: #d4e6b5;
      border: 2px solid #b8d48a;
      transition: all .18s;
      user-select: none;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    .vocab-topic-card:hover {
      border-color: #8fba4e;
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .vocab-fullscreen-overlay {
      align-items: stretch !important;
      justify-content: stretch !important;
      background: var(--bg, #f5f3ee) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .vocab-list-fullscreen {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: left !important;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: none !important;
    }
    .vocab-fs-inner {
      width: 100%;
      max-width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    /* ─── Vocab Folder Bar ─── */
    .vf-bar { display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:7px 18px; border-bottom:1px solid var(--border); flex-shrink:0; min-height:0; }
    .vf-bar:empty { display:none; }
    .vf-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 8px; border-radius:20px; border:1.5px solid var(--border); background:var(--bg); font-size:.68rem; font-weight:700; cursor:pointer; color:var(--muted); font-family:inherit; transition:all .15s; white-space:nowrap; position:relative; }
    .vf-chip-mastered { border-color:#16a34a; color:#16a34a; }
    .vf-chip-mastered:hover { background:#dcfce7; border-color:#16a34a; color:#15803d; }
    .vf-chip-mastered.active { background:#16a34a; border-color:#16a34a; color:#fff; }
    .vf-chip:hover { border-color:var(--accent2); color:var(--accent2); }
    .vf-chip.active { background:var(--accent2); border-color:var(--accent2); color:#fff; }
    .vf-chip-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
    .vf-chip-del { font-size:.6rem; opacity:0.45; margin-left:2px; line-height:1; padding:0 1px; border:none; background:none; cursor:pointer; color:inherit; font-family:inherit; transition:opacity .15s; }
    .vf-chip-del:hover { opacity:1 !important; }
    .vf-add-btn { padding:3px 10px; border-radius:20px; border:1.5px dashed var(--border); background:none; font-size:.68rem; font-weight:700; cursor:pointer; color:var(--muted); font-family:inherit; transition:all .15s; white-space:nowrap; }
    .vf-add-btn:hover { border-color:var(--accent2); color:var(--accent2); }
    /* Folder assign popover */
    .vf-assign-pop { position:fixed; z-index:9999; background:var(--bg); border:1.5px solid var(--border); border-radius:10px; padding:6px 5px; min-width:170px; box-shadow:0 6px 24px rgba(0,0,0,.14); }
    .vf-ap-row { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:7px; cursor:pointer; font-size:.73rem; font-weight:600; color:var(--ink); transition:background .1s; }
    .vf-ap-row:hover { background:var(--surface2); }
    .vf-ap-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .vf-ap-check { width:13px; height:13px; margin-left:auto; flex-shrink:0; accent-color:var(--accent2); }
    .vf-ap-sep { height:1px; background:var(--border); margin:4px 0; }
    .vf-ap-new { font-size:.68rem; color:var(--accent2); font-weight:700; padding:4px 8px; cursor:pointer; display:flex; align-items:center; gap:5px; border-radius:7px; }
    .vf-ap-new:hover { background:var(--surface2); }
    .vf-ap-skip { font-size:.68rem; color:var(--muted); font-weight:600; padding:4px 8px; cursor:pointer; display:flex; align-items:center; gap:5px; border-radius:7px; }
    .vf-ap-skip:hover { background:var(--surface2); color:var(--ink2); }
    /* Word folder tags on card */
    .vf-word-tags { display:flex; gap:3px; flex-wrap:wrap; margin-top:3px; }
    .vf-word-tag { display:inline-flex; align-items:center; gap:3px; font-size:.55rem; font-weight:700; padding:1px 6px; border-radius:10px; color:#fff; opacity:.85; }
    /* Folder picker modal rows */
    .vfp-row { display:flex; align-items:center; gap:10px; font-size:.95rem; font-weight:600; cursor:pointer; padding:8px 6px; border-radius:8px; color:var(--ink); transition:background .1s; }
    .vfp-row:hover { background:var(--surface2); }
    .vfp-row input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--accent2); flex-shrink:0; }
    .vfp-dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
    .vfp-mastery-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:8px 4px 2px; border-top:1px solid var(--border); }
    .vfp-mastery-label { font-size:.8rem; font-weight:700; color:var(--muted); }
    .vfp-mastery-select { padding:4px 8px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface2); font-family:'Nunito',sans-serif; font-size:.82rem; font-weight:700; color:var(--ink); cursor:pointer; outline:none; }
    /* ── Folder Picker v2 ── */
    .vfp2-modal { width: min(480px,94vw); background:#fff; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden; font-family:'Nunito',sans-serif; }
    .vfp2-header { padding:20px 22px 14px; border-bottom:1px solid #f1f1f1; }
    .vfp2-title { font-size:1.05rem; font-weight:900; color:#1a1714; }
    .vfp2-search-wrap { display:flex; align-items:center; gap:8px; margin:12px 16px; padding:9px 14px; background:#f7f7f8; border-radius:12px; }
    .vfp2-search-icon { font-size:.85rem; color:#aaa; flex-shrink:0; }
    .vfp2-search { flex:1; border:none; background:none; outline:none; font-family:'Nunito',sans-serif; font-size:.88rem; color:#1a1714; }
    .vfp2-search::placeholder { color:#bbb; }
    .vfp2-special-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:4px 16px 12px; }
    .vfp2-special-card { position:relative; border-radius:14px; border:2px solid #e8e8e8; background:#fafafa; padding:12px 12px 10px; cursor:pointer; transition:border-color .15s,background .15s; }
    .vfp2-special-card.selected { border-color:#22c55e; background:#f0fdf4; }
    .vfp2-special-card.selected .vfp2-sc-check { display:flex; }
    .vfp2-sc-check { display:none; position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; background:#22c55e; color:#fff; font-size:.65rem; align-items:center; justify-content:center; font-weight:900; }
    .vfp2-sc-badge { display:inline-block; font-size:.6rem; font-weight:900; padding:2px 6px; border-radius:4px; margin-bottom:6px; }
    .vfp2-sc-badge.new { background:#3b82f6; color:#fff; }
    .vfp2-sc-star { font-size:1.1rem; margin-bottom:4px; }
    .vfp2-sc-icon { font-size:1.1rem; margin-bottom:4px; }
    .vfp2-sc-name { font-size:.8rem; font-weight:800; color:#1a1714; }
    .vfp2-sc-count { font-size:.72rem; color:#888; margin-top:2px; }
    .vfp2-section-label { font-size:.68rem; font-weight:900; color:#aaa; letter-spacing:.08em; text-transform:uppercase; padding:4px 18px 6px; }
    .vfp2-folder-list { max-height:220px; overflow-y:auto; padding:0 12px 8px; display:flex; flex-direction:column; gap:4px; }
    .vfp2-folder-row { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; border:2px solid transparent; background:#fafafa; cursor:pointer; transition:border-color .15s,background .15s; }
    .vfp2-folder-row input[type=checkbox] { display:none; }
    .vfp2-folder-row.selected { border-color:#f59e0b; background:#fffbeb; }
    .vfp2-folder-row.selected .vfp2-fr-check { background:#f59e0b; border-color:#f59e0b; color:#fff; }
    .vfp2-fr-check { width:18px; height:18px; border-radius:5px; border:2px solid #ddd; background:#fff; display:flex; align-items:center; justify-content:center; font-size:.65rem; color:transparent; flex-shrink:0; transition:background .15s,border-color .15s; }
    .vfp2-fr-color { width:4px; height:28px; border-radius:3px; flex-shrink:0; }
    .vfp2-fr-name { flex:1; font-size:.9rem; font-weight:700; color:#1a1714; }
    .vfp2-fr-count { font-size:.75rem; font-weight:800; padding:3px 9px; border-radius:999px; background:#f3f4f6; color:#6b7280; }
    .vfp2-folder-row.selected .vfp2-fr-count { background:#fef3c7; color:#d97706; }
    .vfp2-footer { padding:14px 16px 16px; border-top:1px solid #f1f1f1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:#fafafa; }
    .vfp2-mastery-label { display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:700; color:#444; cursor:pointer; flex-shrink:0; }
    .vfp2-mastery-label input[type=checkbox] { accent-color:#f59e0b; width:15px; height:15px; cursor:pointer; }
    .vfp2-mastery-sel { padding:5px 10px; border-radius:8px; border:1.5px solid #e5e7eb; background:#fff; font-family:'Nunito',sans-serif; font-size:.8rem; font-weight:700; color:#444; cursor:pointer; outline:none; }
    .vfp2-footer-btns { margin-left:auto; display:flex; gap:8px; }
    .vfp2-btn-cancel { padding:9px 18px; border-radius:10px; border:1.5px solid #e5e7eb; background:#fff; font-family:'Nunito',sans-serif; font-size:.85rem; font-weight:700; color:#555; cursor:pointer; }
    .vfp2-btn-start { padding:9px 20px; border-radius:10px; border:none; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; font-family:'Nunito',sans-serif; font-size:.85rem; font-weight:800; cursor:pointer; box-shadow:0 4px 12px rgba(234,88,12,.35); transition:opacity .15s; }
    .vfp2-btn-start:hover { opacity:.9; }

    /* ─── Vocab Progress Section ─── */
    #vocabProgressSection { padding:16px 18px 14px; border-bottom:1.5px solid var(--border); background:#1a1040; border-radius:0; }
    .vl-prog-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
    .vl-prog-tabs { display:flex; gap:0; background:rgba(255,255,255,.08); border-radius:20px; padding:3px; }
    .vl-ptab { padding:4px 14px; border-radius:16px; border:none; background:none; font-size:.7rem; font-weight:700; cursor:pointer; color:rgba(255,255,255,.5); font-family:inherit; transition:all .2s; }
    .vl-ptab.active { background:#fff; color:#1a1040; }
    .vl-streak-badge { margin-left:auto; font-size:.68rem; font-weight:800; color:#f59e0b; background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.4); border-radius:999px; padding:4px 12px; flex-shrink:0; }
    /* Column chart */
    .vl-chart-bars { display:flex; align-items:flex-end; gap:6px; height:110px; margin-bottom:0; padding-bottom:0; }
    .vl-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
    .vl-bar-val { font-size:.62rem; font-weight:800; color:rgba(255,255,255,.7); line-height:1; margin-bottom:4px; min-height:10px; text-align:center; }
    .vl-bar-val.is-today { color:#f59e0b; }
    .vl-bar { width:80%; min-height:4px; border-radius:5px 5px 0 0; background:linear-gradient(to bottom, rgba(196,181,253,.9) 0%, rgba(109,40,217,.85) 100%); transition:height .4s cubic-bezier(.4,0,.2,1); }
    .vl-bar.is-today { background:linear-gradient(to bottom, #fde68a 0%, #d97706 100%); }
    .vl-bar.is-zero { background:rgba(255,255,255,.1); height:4px !important; border-radius:3px; }
    .vl-bar-day { font-size:.57rem; color:rgba(255,255,255,.4); text-align:center; margin-top:6px; font-weight:700; line-height:1; letter-spacing:.04em; text-transform:uppercase; }
    .vl-bar-day.is-today { color:#f59e0b; font-weight:900; }
    /* Divider */
    .vl-chart-divider { height:1px; background:rgba(255,255,255,.08); margin:10px 0 12px; }
    /* Stats strip */
    .vl-stats-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
    .vl-stat-item { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px 10px; }
    .vl-stat-ico { font-size:1.1rem; line-height:1; flex-shrink:0; }
    .vl-stat-body { display:flex; flex-direction:column; }
    .vl-stat-n { font-size:1.1rem; font-weight:900; color:#fff; line-height:1.1; }
    .vl-stat-l { font-size:.5rem; color:rgba(255,255,255,.4); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:1px; }

    .mvc-card {
      position: relative;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; padding: 10px 28px 10px 12px;
      cursor: pointer; transition: all .15s;
    }
    .mvc-card:hover { border-color: var(--accent); background: var(--accent-soft); }
    .mvc-word {
      font-size: .9rem; font-weight: 800; color: var(--ink);
      margin-bottom: 2px;
    }
    .mvc-ipa {
      font-size: .68rem; color: var(--accent2); margin-bottom: 2px;
    }
    .mvc-meaning {
      font-size: .72rem; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mvc-del {
      position: absolute; top: 6px; right: 7px;
      background: none; border: none; cursor: pointer;
      font-size: .85rem; color: var(--muted); line-height: 1; padding: 0;
    }
    .mvc-del:hover { color: #ef4444; }

    .topic-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
      gap: 10px
    }

    .topic-card {
      cursor: pointer;
      text-align: center;
      padding: 16px 10px 13px;
      border-radius: var(--radius-sm);
      background: var(--surface);
      border: 2px solid var(--border);
      transition: all .18s;
      user-select: none;
      box-shadow: var(--shadow-sm)
    }

    .topic-card:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md)
    }
    .topic-card[data-topic-id="custom"] { background: #fff3e0; border-color: #fdba74; }
    .topic-card[data-topic-id="custom"]:hover { border-color: #f97316; }

    .topic-card.selected {
      border-color: var(--accent);
      background: var(--accent-soft);
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(224, 92, 42, .15)
    }

    .topic-icon {
      font-size: 1.8rem;
      margin-bottom: 7px;
      line-height: 1
    }

    .topic-name {
      font-size: .75rem;
      font-weight: 800;
      color: var(--ink2)
    }

    .level-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .level-btn {
      padding: 10px 20px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      border: 2px solid var(--border);
      background: var(--surface);
      font-family: 'Nunito', sans-serif;
      font-size: .82rem;
      font-weight: 800;
      color: var(--ink2);
      transition: all .18s;
      user-select: none;
      box-shadow: var(--shadow-sm)
    }

    .level-btn:hover {
      border-color: var(--accent2);
      color: var(--accent2)
    }

    .level-btn.selected {
      background: var(--accent2);
      border-color: var(--accent2);
      color: #fff;
      box-shadow: 0 4px 16px rgba(42, 122, 224, .25)
    }

    /* ── Sample Passages — bảng màu giống hình 1 (scoped) ── */
    #passageModeSection .step-label { color: #475569; }
    #passageModeSection .step-num {
      width: auto; min-width: 24px; height: 24px; border-radius: 8px;
      padding: 0 8px; background: #f3ead9; color: #6b5d3e; font-size: .72rem;
    }
    #levelNudgeTip.vs-step-nudge {
      background: linear-gradient(90deg, #8aa6f0, #9db4f5);
      box-shadow: 0 4px 16px rgba(122,144,232,.30);
    }
    #passageModeSection .level-btn {
      border: 1.5px solid transparent; background: #fff; color: #334155;
      border-radius: 999px; box-shadow: 0 2px 8px rgba(15,23,42,.08);
    }
    #passageModeSection .level-btn:hover {
      border-color: transparent; color: #334155;
      transform: translateY(-1px); box-shadow: 0 5px 16px rgba(15,23,42,.14);
    }
    #passageModeSection .level-btn.selected {
      background: #6f96ec; border-color: #6f96ec; color: #fff;
      box-shadow: 0 4px 16px rgba(111,150,236,.32);
    }

    .passage-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
      gap: 14px
    }

    .passage-card {
      position: relative;
      cursor: pointer;
      padding: 20px;
      border-radius: var(--radius);
      background: var(--surface);
      border: 2px solid var(--border);
      transition: all .18s;
      box-shadow: var(--shadow-sm)
    }

    .passage-card-actions {
      position: absolute;
      top: 8px;
      right: 8px;
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity .2s
    }

    .passage-card:hover .passage-card-actions {
      opacity: 1
    }
    /* Nút admin (xóa bài hệ thống) luôn hiện, không cần hover */
    .passage-card-actions-always { opacity: 1 !important; }
    .passage-card-action-del { background: #fee2e2 !important; color: #b91c1c; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
    .passage-card-action-del:hover { background: #dc2626 !important; color: #fff; }

    .passage-card-action {
      width: 26px;
      height: 26px;
      background: var(--bg2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: .9rem;
      border: 1px solid var(--border);
      transition: all .15s
    }

    .passage-card-action:hover {
      background: var(--border);
      border-color: var(--border2);
      transform: scale(1.1)
    }

    .passage-card:hover {
      border-color: var(--accent2);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md)
    }

    .passage-card.selected {
      border-color: var(--accent2);
      background: var(--blue-soft);
      box-shadow: 0 4px 20px rgba(42, 122, 224, .15);
      transform: translateY(-2px)
    }

    .p-title {
      font-weight: 800;
      font-size: .95rem;
      color: var(--ink);
      margin-bottom: 4px
    }

    .p-meta {
      font-size: .7rem;
      color: var(--muted);
      font-weight: 700;
      margin-bottom: 10px;
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .p-preview {
      font-family: 'Lora', serif;
      font-size: .82rem;
      color: var(--ink2);
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    /* ── Passage cards — màu theo từng thẻ (hình 1) ── */
    #passageModeSection .passage-card { border: 1.5px solid var(--pc, #e2e8f0); }
    #passageModeSection .passage-card:hover {
      border-color: var(--pc, #94a3b8); transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(15,23,42,.10);
    }
    #passageModeSection .passage-card.selected {
      border-color: var(--pc, #2563eb); background: var(--pcbg, #eff6ff);
      box-shadow: 0 0 0 2px var(--pc, #2563eb), 0 6px 18px rgba(15,23,42,.12);
    }
    #passageModeSection .p-title { color: var(--pc, #1e293b); }
    .p-words-badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--pcbg, #f1f5f9); color: var(--pc, #475569);
      padding: 3px 11px; border-radius: 999px;
      font-size: .72rem; font-weight: 800; letter-spacing: .03em;
    }
    .p-meta-extra { color: var(--muted); font-weight: 700; margin-left: 2px; }

    .search-bar-wrapper {
      position: relative;
      margin-bottom: 14px
    }

    .search-input {
      width: 100%;
      padding: 12px 18px 12px 44px;
      border-radius: var(--radius-sm);
      border: 2px solid var(--border);
      font-family: 'Nunito', sans-serif;
      font-size: .9rem;
      transition: border-color .2s;
      background: var(--surface)
    }

    .search-input:focus {
      border-color: var(--accent2);
      outline: none
    }

    .search-input::placeholder {
      color: var(--muted)
    }

    .search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: 1.1rem;
      pointer-events: none
    }

    .speed-panel {
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      box-shadow: var(--shadow-sm)
    }

    .speed-label-txt {
      font-size: .76rem;
      font-weight: 800;
      color: var(--muted)
    }

    .speed-slider {
      -webkit-appearance: none;
      appearance: none;
      flex: 0 0 auto;
      width: 130px;
      height: 5px;
      border-radius: 4px;
      background: var(--bg2);
      outline: none;
      cursor: pointer
    }

    .speed-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent);
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(224, 92, 42, .3);
      border: 3px solid #fff
    }

    .speed-chip {
      padding: 5px 13px;
      border-radius: var(--radius-pill);
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 800;
      font-size: .84rem;
      border: 1px solid rgba(224, 92, 42, .2)
    }

    .speed-presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .speed-preset {
      padding: 4px 9px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: var(--bg2);
      font-size: .68rem;
      font-weight: 800;
      color: var(--muted);
      cursor: pointer;
      transition: all .15s
    }

    .speed-preset:hover,
    .speed-preset.active {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-soft)
    }

    .sample-spd-chip {
      padding: 3px 7px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: var(--bg2);
      font-size: .65rem;
      font-weight: 800;
      color: var(--muted);
      cursor: pointer;
      transition: all .15s;
      user-select: none;
    }
    .sample-spd-chip:hover,
    .sample-spd-chip.active {
      border-color: #f59e0b;
      color: #b45309;
      background: #fef3c7;
    }

    .popup-mode-hint-row {
      flex-basis: 100%;
      font-size: .68rem;
      color: var(--muted);
      padding: 4px 2px 0;
      line-height: 1.4;
    }
    .yt-shadow-extra-row {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 18px 6px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    /* Dictation mode picker */
    .yt-dict-mode-wrap { position: relative; }
    .yt-dict-menu {
      position: absolute; top: calc(100% + 4px); left: 0; z-index: 120;
      display: flex; flex-direction: column; gap: 2px;
      background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
      padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
      min-width: 130px;
    }
    .yt-dict-menu-btn {
      text-align: left; padding: 7px 12px; border-radius: 7px; border: none;
      background: none; font-size: .78rem; font-weight: 700; cursor: pointer; color: #334155;
      transition: background .12s;
    }
    .yt-dict-menu-btn:hover { background: #f1f5f9; }
    .yt-dict-menu-off { color: #dc2626; }
    .yt-dict-menu-off:hover { background: #fee2e2; }
    /* Single-sentence dictation panel */
    .yt-single-dict-panel {
      padding: 12px 20px 14px; border-top: 2px solid #dbeafe;
      background: #f0f7ff; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px;
      align-items: center;
    }
    .yt-sd-topbar { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:680px; }
    .yt-sd-info { font-size:.72rem; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .yt-sd-exit-btn {
      padding:3px 10px; border-radius:6px; border:1px solid #fca5a5;
      background:#fff1f1; color:#dc2626; font-size:.72rem; font-weight:700; cursor:pointer;
      white-space:nowrap; font-family:'Cambria',Georgia,serif;
    }
    .yt-sd-exit-btn:hover { background:#fee2e2; }
    .yt-sd-input-row { display: flex; gap: 8px; align-items: flex-start; width: 100%; max-width: 680px; }
    .yt-sd-tools-row {
      display: flex; gap: 6px; align-items: center; width: 100%; max-width: 680px; margin-top: 6px;
    }
    .yt-sd-tool-btn {
      padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--border, #e2e8f0);
      background: var(--surface, #fff); color: var(--ink2, #374151);
      font-size: .75rem; font-weight: 700; cursor: pointer; white-space: nowrap;
      transition: background .12s, border-color .12s;
    }
    .yt-sd-tool-btn:hover { background: var(--surface2, #f1f5f9); border-color: #94a3b8; }
    .yt-sd-showall-btn { color: #7c3aed; border-color: #c4b5fd; }
    .yt-sd-showall-btn:hover { background: #f5f3ff; }
    .yt-sd-repeat-sel {
      padding: 5px 8px; border-radius: 8px; border: 1.5px solid var(--border, #e2e8f0);
      background: var(--surface, #fff); color: var(--ink2, #374151);
      font-size: .75rem; font-weight: 700; cursor: pointer;
    }
    .yt-sd-result { width: 100%; max-width: 680px; }
    .yt-sd-input {
      flex: 1; padding: 10px 14px; border-radius: 10px;
      border: 2px solid #bfdbfe; font-size: 1rem; outline: none;
      font-family: inherit; background: #fff;
      transition: border-color .15s;
      resize: none; overflow: hidden; min-height: 44px;
      line-height: 1.5;
    }
    .yt-sd-input:focus { border-color: #2563eb; }
    .yt-sd-check-btn {
      padding: 9px 18px; border-radius: 10px; border: none; cursor: pointer;
      background: #2563eb; color: #fff; font-size: .85rem; font-weight: 800; white-space: nowrap;
      font-family: 'Cambria', Georgia, serif;
    }
    .yt-sd-skip-btn {
      padding: 9px 12px; border-radius: 10px; border: 2px solid #cbd5e1; cursor: pointer;
      background: #fff; color: #64748b; font-size: .82rem; font-weight: 700; white-space: nowrap;
      font-family: 'Cambria', Georgia, serif;
    }
    .yt-sd-result { font-size: .9rem; line-height: 1.8; }
    .yt-sd-score { font-weight: 800; font-size: .85rem; color: #64748b; margin-bottom: 4px; }
    .yt-sd-score.good { color: #15803d; }
    .yt-sd-score.bad  { color: #dc2626; }
    .yt-sd-answer { display: flex; flex-wrap: wrap; gap: 5px; }
    .yt-sd-word { padding: 2px 7px; border-radius: 5px; font-weight: 600; cursor: pointer; }
    .yt-sd-word:hover { filter: brightness(.92); }
    .yt-sd-word.ok   { background: #dcfce7; color: #15803d; }
    .yt-sd-word.miss { background: #fee2e2; color: #dc2626; }
    .yt-sd-enter-hint { margin-top: 8px; font-size: .75rem; color: #94a3b8; font-style: italic; }
    .yt-sd-options-row { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0 2px; }
    .yt-sd-opt-label { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #64748b; cursor: pointer; user-select: none; }
    .yt-sd-opt-label input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent, #7c3aed); }
    .yt-sd-hint-notice { margin-top: 6px; padding: 8px 12px; background: #fef9c3; border: 1.5px solid #fde047; border-radius: 8px; font-size: .83rem; color: #713f12; }
    .yt-sd-input.yt-sd-input-error { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
    .yt-sd-word-dict {
      position: fixed; left: 16px; bottom: 80px; z-index: 9999;
      width: 300px; max-width: calc(100vw - 32px);
      background: #fff; border: 1.5px solid #e5e7eb;
      border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.15);
      display: flex; flex-direction: column; overflow: hidden;
    }
    .yt-sd-word-dict-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
    }
    .yt-sd-word-dict-term { font-weight: 700; font-size: .95rem; color: #1e293b; }
    .yt-sd-word-dict-close {
      background: none; border: none; cursor: pointer; color: #9ca3af;
      font-size: .9rem; padding: 2px 4px; line-height: 1;
    }
    .yt-sd-word-dict-close:hover { color: #374151; }
    .yt-sd-word-dict-body { padding: 10px 12px; overflow-y: auto; max-height: 260px; font-size: .85rem; }
    /* When single-dict mode: keep flex-row, video compact, right panel = sent list */
    .yt-lcol-player.yt-single-dict-mode { overflow-y: auto; flex: 2; width: auto; max-width: none; }
    .yt-lcol-player.yt-single-dict-mode .yt-player-ratio {
      margin: 0 auto; max-height: 38vh; width: auto; aspect-ratio: 16/9;
    }
    .yt-lcol-player.yt-single-dict-mode .yt-loop-bar,
    .yt-lcol-player.yt-single-dict-mode #ytShadowExtraRow { display: none !important; }
    .yt-lbody.yt-single-dict-mode .yt-kb-transcript-only { display: none !important; }
    .yt-single-dict-panel { overflow-y: auto; }
    /* Sentence list panel */
    .yt-sd-sent-panel {
      flex: 1; min-width: 240px; border-left: 1px solid var(--border);
      display: flex; flex-direction: column; overflow: hidden; background: #fff;
    }
    .yt-sd-sp-head {
      padding: 10px 14px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0;
      display: flex; flex-direction: column; gap: 6px;
    }
    .yt-sd-sp-head-row { display: flex; align-items: center; gap: 8px; }
    .yt-sd-sp-count { font-size: .8rem; font-weight: 800; color: #374151; }
    .yt-sd-sp-show-lbl { font-size: .75rem; color: #64748b; display: flex; align-items: center; gap: 5px; cursor: pointer; }
    .yt-sd-sp-nav { display: flex; gap: 4px; margin-left: auto; }
    .yt-sd-sp-nav-btn { width: 26px; height: 26px; border: 1.5px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: .85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
    .yt-sd-sp-nav-btn:hover { background: var(--accent-soft, #ede9fe); border-color: var(--accent, #7c3aed); color: var(--accent, #7c3aed); }
    .yt-sd-sp-prog-wrap { display: flex; align-items: center; gap: 8px; }
    .yt-sd-sp-prog-bar { flex: 1; height: 5px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
    .yt-sd-sp-prog-fill { height: 100%; background: #2563eb; border-radius: 99px; transition: width .3s; }
    .yt-sd-sp-pct { font-size: .72rem; font-weight: 700; color: #64748b; white-space: nowrap; }
    .yt-sd-sp-list { flex: 1; overflow-y: auto; padding: 8px 0; }
    .yt-sd-sp-item {
      padding: 10px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer;
      transition: background .12s;
    }
    .yt-sd-sp-item:hover { background: #f8fafc; }
    .yt-sd-sp-item.current { background: #fefce8; border-left: 3px solid #eab308; }
    .yt-sd-sp-item.done { opacity: .55; }
    .yt-sd-sp-num { font-size: .72rem; font-weight: 800; color: #9ca3af; margin-right: 6px; }
    .yt-sd-sp-badge {
      display: inline-block; padding: 1px 6px; border-radius: 4px;
      background: #1e293b; color: #fff; font-size: .6rem; font-weight: 800;
      margin-left: 4px; vertical-align: middle; letter-spacing: .03em;
    }
    .yt-sd-sp-text { margin-top: 5px; font-size: .8rem; line-height: 1.6; color: #374151; word-break: break-word; }
    .yt-sd-mask-word { color: #94a3b8; letter-spacing: -.02em; }
    .yt-shadow-extra-lbl {
      font-size: .68rem;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
      margin-right: 2px;
    }
    .yt-shadow-extra-sep {
      width: 1px;
      height: 18px;
      background: var(--border);
      margin: 0 4px;
      flex-shrink: 0;
    }
    .yt-shadow-extra-btn {
      font-size: .65rem;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 999px;
      border: 1.5px solid var(--border);
      background: var(--surface2);
      color: var(--ink2);
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    .yt-shadow-extra-btn.active {
      background: #7c3aed;
      color: #fff;
      border-color: #7c3aed;
    }
    .popup-mode-menu {
      display: none;
      position: fixed;
      flex-direction: column;
      gap: 2px;
      background: var(--card-bg, #fff);
      border: 1px solid var(--border, #e2e8f0);
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0,0,0,.16);
      z-index: 99999;
      min-width: 220px;
      padding: 6px;
    }
    .popup-mode-menu.open { display: flex; }
    .popup-mode-menu-title {
      font-size: .68rem;
      font-weight: 700;
      color: var(--muted, #94a3b8);
      padding: 4px 10px 2px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .popup-mode-opt {
      display: block;
      width: 100%;
      background: none;
      border: none;
      border-radius: 7px;
      padding: 8px 12px;
      text-align: left;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      color: var(--text, #1e293b);
      white-space: nowrap;
      transition: background .12s;
    }
    .popup-mode-opt:hover { background: var(--hover-bg, #f1f5f9); }
    .popup-mode-opt.active { color: var(--accent, #6366f1); background: #ede9fe; }
    .popup-mode-opt.active::before { content: "✓ "; }
    .popup-mode-opt--none { color: var(--muted, #94a3b8); font-weight: 500; margin-top: 2px; border-top: 1px solid var(--border, #e2e8f0); border-radius: 0 0 7px 7px; }

    .popup-duration-row {
      align-items: center;
      gap: 5px;
      padding: 5px 18px 6px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }
    /* when inlined inside the font-size row */
    div > .popup-duration-row {
      padding: 0;
      border: none;
      background: none;
      flex-shrink: 0;
    }
    .popup-dur-lbl {
      font-size: .68rem;
      color: var(--muted);
      white-space: nowrap;
    }
    .popup-dur-btn {
      font-size: .65rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1.5px solid var(--border);
      background: var(--surface2);
      color: var(--ink2);
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    .popup-dur-btn.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .vocab-sw .popup-mode-lbl {
      font-weight: 500;
      color: var(--muted);
    }
    .vocab-sw.on .popup-mode-lbl {
      color: var(--accent2);
      font-weight: 700;
    }

    .lrn-speed-row {
      display: flex;
      align-items: center;
      gap: 7px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap
    }

    .cta-bar {
      margin-top: 26px;
      display: flex;
      justify-content: center
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 40px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      font-size: 1rem;
      font-weight: 900;
      background: linear-gradient(135deg, var(--accent), #f07a3a);
      color: #fff;
      box-shadow: 0 6px 24px rgba(224, 92, 42, .35);
      transition: transform .2s, box-shadow .2s
    }

    .btn-primary:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 10px 32px rgba(224, 92, 42, .4)
    }

    .btn-primary:disabled {
      opacity: .35;
      cursor: not-allowed;
      transform: none;
      box-shadow: none
    }

    /* ── LEARN SCREEN ── */
    .learn-topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 0;
      z-index: 10
    }

    .back-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: 1.5px solid var(--border);
      color: var(--ink2);
      padding: 7px 14px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      transition: all .18s
    }

    .back-btn:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .learn-meta-info {
      text-align: center
    }

    .lm-title {
      font-weight: 900;
      font-size: .9rem;
      color: var(--ink)
    }

    .lm-sub {
      font-size: .68rem;
      color: var(--muted);
      font-weight: 700;
      margin-top: 1px
    }

    .lm-badge-wrap { position: relative; flex-shrink: 0; }
    .lm-badge-drop {
      display: none; position: absolute; top: calc(100% + 6px); left: 50%;
      transform: translateX(-50%); background: #fff; border: 1px solid var(--border);
      border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
      padding: 10px 14px; min-width: 160px; z-index: 100;
      font-family: 'Nunito', sans-serif; white-space: nowrap;
    }
    .lm-badge-wrap.open .lm-badge-drop { display: block; }
    .lm-badge-drop-title { font-size: .82rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
    .lm-badge-drop-sub { font-size: .72rem; color: var(--muted); font-weight: 600; }
    .lm-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      border-radius: var(--radius-pill);
      font-size: .67rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .badge-b {
      background: var(--green-soft);
      color: var(--accent3);
      border: 1px solid rgba(39, 174, 114, .2)
    }

    .badge-i {
      background: var(--blue-soft);
      color: var(--accent2);
      border: 1px solid rgba(42, 122, 224, .2)
    }

    .badge-a {
      background: var(--accent-soft);
      color: var(--accent);
      border: 1px solid rgba(224, 92, 42, .2)
    }

    .badge-ielts {
      background: rgba(124, 58, 237, .1);
      color: #7c3aed;
      border: 1px solid rgba(124, 58, 237, .2)
    }

    .badge-toeic {
      background: rgba(6, 182, 212, .1);
      color: #0891b2;
      border: 1px solid rgba(6, 182, 212, .2)
    }

    .learn-body {
      max-width: 1480px;
      margin: 0 auto;
      padding: 24px 28px 60px
    }

    .controls-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px;
      box-shadow: var(--shadow-sm)
    }
    .ctrl-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ctrl-row--actions {
      min-height: 36px;
    }

    .ctrl-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 16px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--border);
      background: var(--bg2);
      font-family: 'Nunito', sans-serif;
      font-size: .82rem;
      font-weight: 800;
      color: var(--ink2);
      cursor: pointer;
      transition: all .18s
    }

    .ctrl-btn:hover {
      border-color: var(--accent2);
      color: var(--accent2);
      background: var(--blue-soft)
    }

    .ctrl-select {
      padding: 7px 32px 7px 14px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--border);
      background-color: var(--surface);
      font-family: 'Nunito', sans-serif;
      font-size: .78rem;
      font-weight: 700;
      color: var(--ink2);
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239e9890' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      background-position: right .5rem center;
      background-repeat: no-repeat;
      background-size: 1.2em 1.2em;
      transition: border-color .18s
    }

    .ctrl-select:hover {
      border-color: var(--accent2)
    }

    .ctrl-btn.playing {
      border-color: var(--accent2);
      color: var(--accent2);
      background: var(--blue-soft)
    }

    .ctrl-btn.shadow-btn {
      background: linear-gradient(135deg, var(--accent), #f07a3a);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 4px 16px rgba(224, 92, 42, .3)
    }

    .ctrl-btn.shadow-btn:hover {
      box-shadow: 0 6px 24px rgba(224, 92, 42, .4);
      transform: translateY(-1px)
    }

    .ctrl-btn.stop-btn {
      border-color: #e53e3e;
      color: #e53e3e;
      background: rgba(229, 62, 62, .06)
    }

    .ctrl-btn.result-btn {
      border-color: var(--accent3);
      color: var(--accent3);
      background: var(--green-soft)
    }

    .ctrl-btn.result-btn:hover {
      border-color: var(--accent3);
      color: var(--accent3);
      background: var(--green-soft);
      opacity: .85
    }

    .ctrl-btn.record-only-btn {
      background: linear-gradient(135deg, #7c3aed, #a855f7);
      border-color: transparent;
      color: #fff;
      font-weight: 700;
    }
    .ctrl-btn.record-only-btn:hover {
      box-shadow: 0 6px 20px rgba(124, 58, 237, .4);
      transform: translateY(-1px);
    }

    /* ── Record flex-break (hidden on desktop) ── */
    .ctrl-row-break { display: none; }

    .rec-pill {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 7px 13px;
      border-radius: var(--radius-pill);
      background: rgba(229, 62, 62, .08);
      border: 1.5px solid rgba(229, 62, 62, .25);
      font-size: .76rem;
      font-weight: 700;
      color: #e53e3e
    }

    .rec-pill.active {
      display: flex
    }

    .rec-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #e53e3e;
      animation: blink 1s infinite
    }

    .wave-bars {
      display: flex;
      align-items: center;
      gap: 2px;
      height: 14px
    }

    .wave-bar {
      width: 3px;
      background: #e53e3e;
      border-radius: 2px;
      animation: wave 1.2s ease-in-out infinite
    }

    .wave-bar:nth-child(2) {
      animation-delay: .15s
    }

    .wave-bar:nth-child(3) {
      animation-delay: .3s
    }

    .wave-bar:nth-child(4) {
      animation-delay: .15s
    }

    @keyframes wave {

      0%,
      100% {
        height: 3px
      }

      50% {
        height: 13px
      }
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .2
      }
    }

    .stage-wrapper {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      margin-bottom: 16px
    }

    .stage-header {
      padding: 9px 18px;
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 7px
    }

    .stage-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    .stage-dot:nth-child(1) {
      background: #f87171
    }

    .stage-dot:nth-child(2) {
      background: #fbbf24
    }

    .stage-dot:nth-child(3) {
      background: #34d399
    }

    .stage-title-txt {
      font-size: .7rem;
      font-weight: 700;
      color: var(--muted);
      margin-left: 4px;
      letter-spacing: .07em;
      text-transform: uppercase
    }

    .stage {
      height: 480px;
      position: relative;
      overflow: hidden;
      background: var(--surface)
    }

    .stage--scrollable {
      overflow-y: auto;
      height: 480px;
    }
    .stage--scrollable .stage-top-fade,
    .stage--scrollable .stage-bottom-fade { display: none; }
    .stage--scrollable #teleprompter {
      transform: none !important;
      transition: none !important;
      padding: 24px 0;
    }

    .stage-top-fade {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: linear-gradient(to bottom, var(--surface), transparent);
      z-index: 2;
      pointer-events: none
    }

    .stage-bottom-fade {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: linear-gradient(to top, var(--surface), transparent);
      z-index: 2;
      pointer-events: none
    }

    #stageScrollbar {
      position: absolute;
      right: 5px;
      top: 10px;
      bottom: 10px;
      width: 4px;
      border-radius: 4px;
      background: rgba(0,0,0,0.07);
      z-index: 10;
      opacity: 0;
      transition: opacity .2s ease;
      pointer-events: none;
    }
    .stage:hover #stageScrollbar {
      opacity: 1;
      pointer-events: auto;
    }
    #stageScrollbarThumb {
      position: absolute;
      left: 0;
      width: 100%;
      min-height: 24px;
      border-radius: 4px;
      background: rgba(0,0,0,0.28);
      cursor: grab;
      transition: background .15s ease;
    }
    #stageScrollbarThumb:hover,
    #stageScrollbarThumb.dragging {
      background: rgba(0,0,0,0.48);
      cursor: grab;
    }

    .stage-line {
      position: absolute;
      left: 32px;
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, transparent, rgba(224, 92, 42, .2), transparent);
      z-index: 3
    }

    .teleprompter {
      position: absolute;
      left: 0;
      right: 0;
      padding: 0 36px;
      will-change: transform;
      font-family: var(--tp-font, 'Lora', serif);
      user-select: none;
    }

    .tp-word {
      display: inline-block;
      font-size: calc(1.85rem * var(--tp-zoom));
      line-height: 1.45;
      color: var(--tp-text-color, var(--ink));
      transition: font-size .2s ease-out, color .2s ease-out, font-weight .2s ease-out;
      font-weight: 600;
    }

    .tp-hl-group {
      border-radius: 6px;
      padding: 0 4px;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    .tp-hl-group .tp-word-container {
      margin-left: 2px;
      margin-right: 2px;
    }

    .tp-word-container {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: top;
      margin: 0 11px;
      padding: 6px 0;
      transition: all .2s ease-out;
      cursor: pointer;
    }

    .tp-ipa {
      font-family: 'Nunito', sans-serif;
      font-size: calc(1.85rem * var(--tp-zoom) * var(--tp-ipa-scale, 1));
      color: var(--muted);
      margin-top: 5px;
      line-height: 1;
      display: none;
      transition: font-size .2s ease-out, color .2s ease-out;
    }

    .teleprompter.ipa-active .tp-ipa {
      display: block
    }

    .translation-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(3px);
      z-index: 4;
      display: none;
      padding: 20px 36px;
      overflow-y: auto;
      text-align: left;
      line-height: 1.6;
    }

    .translation-overlay.active {
      display: block
    }

    .translation-pair {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px dashed var(--border);
    }

    .translation-pair:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0
    }

    .english-sentence {
      font-family: 'Lora', serif;
      font-size: calc(1.05rem * var(--tp-zoom));
      color: var(--ink);
      font-weight: 600;
      margin-bottom: 5px;
    }

    .vietnamese-sentence {
      font-family: 'Nunito', sans-serif;
      font-size: calc(.95rem * var(--tp-zoom));
      color: var(--ink2);
    }

    .vi-temp-highlight {
      background: #fde68a;
      border-radius: 3px;
      padding: 0 2px;
      box-shadow: 0 0 0 2px #f59e0b;
      animation: vi-hl-pop .35s ease;
    }

    @keyframes vi-hl-pop {
      from {
        background: #fb923c;
        box-shadow: 0 0 0 2px #ea580c;
      }

      to {
        background: #fde68a;
        box-shadow: 0 0 0 2px #f59e0b;
      }
    }

    .tp-word-container.done {
      opacity: 0.4;
    }

    .tp-word-container.done .tp-word {
      font-weight: 500;
    }

    .tp-word-container.active {
      transform: scale(1.15);
      opacity: 1;
    }

    .tp-word-container.active .tp-word {
      color: var(--accent) !important;
      font-weight: 900;
    }

    .tp-word-container.ro-correct .tp-word {
      color: #16a34a !important;
      font-weight: 700;
      transition: color 0.15s;
    }
    .tp-word-container.ro-wrong .tp-word {
      color: #dc2626 !important;
      font-weight: 700;
      transition: color 0.15s;
    }

    .teleprompter.pos-color-active.pos-filter-n    .tp-word.pos-c-n    { color: var(--rd-pos-n,   #1a7a3c); }
    .teleprompter.pos-color-active.pos-filter-v    .tp-word.pos-c-v    { color: var(--rd-pos-v,   #c95200); }
    .teleprompter.pos-color-active.pos-filter-adj  .tp-word.pos-c-adj  { color: var(--rd-pos-adj, #5cb85c); }
    .teleprompter.pos-color-active.pos-filter-adv  .tp-word.pos-c-adv  { color: var(--rd-pos-adv, #e8892a); }
    .teleprompter.pos-color-active.pos-filter-prep .tp-word.pos-c-prep { color: var(--rd-pos-prep,#7b4f2e); }
    .teleprompter.pos-color-active.pos-filter-aux  .tp-word.pos-c-aux  { color: var(--rd-pos-aux, #888888); }
    .teleprompter.pos-color-active.pos-filter-conj .tp-word.pos-c-conj { color: var(--rd-pos-conj,#2980b9); }
    .teleprompter.pos-color-active.pos-filter-pron .tp-word.pos-c-pron { color: var(--rd-pos-pron,#c4956a); }
    .teleprompter.pos-color-active.pos-filter-art  .tp-word.pos-c-art  { color: var(--rd-pos-art, #444444); }
    .teleprompter.pos-color-active.pos-filter-other .tp-word.pos-c-other { color: var(--rd-pos-other,#c0960c); }

    .pos-filter-chip {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: .78rem; font-weight: 700;
      color: var(--muted); cursor: pointer;
      padding: 3px 10px 3px 7px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--border);
      background: var(--bg2);
      transition: all .15s; user-select: none;
    }
    .pos-filter-chip.active {
      border-color: var(--_pc);
      color: var(--_pc);
      background: color-mix(in srgb, var(--_pc) 12%, white);
    }
    .pos-filter-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--border); flex-shrink: 0;
      transition: background .15s; position: relative;
    }
    .pos-filter-chip[data-pos] .pos-filter-dot { cursor: crosshair; }
    .pos-filter-chip[data-pos] .pos-filter-dot:hover { outline: 2px solid var(--_pc); outline-offset: 2px; }
    .pos-color-input {
      position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
      cursor: crosshair; border: none; padding: 0; margin: 0;
    }
    .pos-filter-chip.active .pos-filter-dot { background: var(--_pc); }

    .tp-word-container.active .tp-ipa {
      color: var(--accent);
      font-weight: 700;
    }

    .tp-word-container.speaking {
      background: var(--blue-soft);
      border-radius: var(--radius-sm);
    }

    .stage-wrapper.expanded .stage {
      height: auto;
      max-height: 78vh;
      overflow-y: auto;
    }

    .stage-wrapper.expanded .teleprompter {
      position: relative;
      transform: none !important;
      padding: 20px 28px;
      text-align: left;
    }

    .stage-wrapper.expanded .stage-top-fade,
    .stage-wrapper.expanded .stage-bottom-fade,
    .stage-wrapper.expanded .stage-line {
      display: none;
    }

    #btnExpandStage:hover {
      color: var(--ink2);
    }

    .stage-wrapper.expanded #btnExpandStage {
      transform: rotate(45deg);
    }

    .progress-row {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .progress-track {
      flex: 1;
      height: 6px;
      background: var(--bg2);
      border-radius: 3px;
      overflow: hidden;
      border: 1px solid var(--border)
    }

    .progress-fill {
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--accent), #f07a3a, var(--accent2));
      transition: width .3s
    }

    .progress-pct {
      font-size: .78rem;
      font-weight: 800;
      color: var(--muted);
      min-width: 38px;
      text-align: right
    }

    .hint-box {
      margin-top: 16px;
      padding: 13px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      display: flex;
      gap: 10px;
      align-items: flex-start
    }

    .hint-text {
      font-size: .78rem;
      color: var(--muted);
      line-height: 1.6
    }

    .hint-text strong {
      color: var(--ink2)
    }

    /* ── RESULT SCREEN ── */
    .result-topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 12px 24px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: var(--shadow-sm)
    }

    .result-body {
      max-width: 820px;
      margin: 0 auto;
      padding: 28px 20px 80px
    }

    /* score hero */
    .score-hero {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px 28px 24px;
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
      box-shadow: var(--shadow-md);
      margin-bottom: 20px;
      position: relative;
      overflow: hidden
    }

    .score-hero::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-soft), transparent 70%);
      pointer-events: none
    }

    .score-ring {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0
    }

    .score-ring-svg {
      position: absolute;
      inset: -8px;
      width: calc(100% + 16px);
      height: calc(100% + 16px);
      transform: rotate(-90deg)
    }

    .score-num {
      font-family: 'Nunito', sans-serif;
      font-size: 1.9rem;
      font-weight: 900;
      color: var(--accent);
      line-height: 1;
      position: relative;
      z-index: 1
    }

    .score-info {
      flex: 1;
      min-width: 200px
    }

    .score-label {
      font-size: .7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
      margin-bottom: 6px
    }

    .score-message {
      font-family: 'Lora', serif;
      font-style: italic;
      color: var(--ink2);
      font-size: .95rem;
      margin-bottom: 14px;
      line-height: 1.5
    }

    .stats-inline {
      display: flex;
      gap: 20px;
      flex-wrap: wrap
    }

    .stat-item {
      text-align: center
    }

    .stat-num-r {
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 1
    }

    .stat-desc-r {
      font-size: .68rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-top: 2px
    }

    .s-green {
      color: var(--accent3)
    }

    .s-red {
      color: #e53e3e
    }

    .s-blue {
      color: var(--accent2)
    }

    .s-orange {
      color: var(--accent)
    }

    /* WORD ANALYSIS PANEL */
    .analysis-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      margin-bottom: 20px;
      overflow: hidden
    }

    .panel-header {
      padding: 16px 20px;
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px
    }

    .panel-title {
      font-size: .7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted)
    }

    .filter-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .filter-btn {
      padding: 4px 12px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: var(--surface);
      font-size: .7rem;
      font-weight: 800;
      color: var(--muted);
      cursor: pointer;
      transition: all .15s
    }

    .filter-btn:hover {
      border-color: var(--ink2);
      color: var(--ink2)
    }

    .filter-btn.active-all {
      border-color: var(--ink);
      background: var(--ink);
      color: #fff
    }

    .filter-btn.active-correct {
      border-color: var(--accent3);
      background: var(--green-soft);
      color: var(--accent3)
    }

    .filter-btn.active-wrong {
      border-color: #e53e3e;
      background: rgba(229, 62, 62, .07);
      color: #e53e3e
    }

    .filter-btn.active-skipped {
      border-color: var(--muted);
      background: var(--bg2);
      color: var(--ink2)
    }

    .words-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
      padding: 18px
    }

    /* WORD CARD */
    .word-card {
      border-radius: 12px;
      border: 1.5px solid var(--border);
      background: var(--surface2);
      padding: 12px 14px;
      cursor: pointer;
      transition: all .2s;
      position: relative;
      user-select: none
    }

    .word-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md)
    }

    .word-card.correct {
      border-color: rgba(39, 174, 114, .35);
      background: rgba(39, 174, 114, .05)
    }

    .word-card.correct:hover {
      border-color: var(--accent3);
      box-shadow: 0 4px 16px rgba(39, 174, 114, .15)
    }

    .word-card.wrong {
      border-color: rgba(229, 62, 62, .35);
      background: rgba(229, 62, 62, .05)
    }

    .word-card.wrong:hover {
      border-color: #e53e3e;
      box-shadow: 0 4px 16px rgba(229, 62, 62, .15)
    }

    .word-card.skipped {
      border-color: var(--border);
      background: var(--bg2);
      opacity: .75
    }

    .word-card.hidden {
      display: none
    }

    .word-card.speaking {
      transform: scale(1.04);
      box-shadow: var(--shadow-md)
    }

    .word-card.correct.speaking {
      box-shadow: 0 0 0 3px rgba(39, 174, 114, .3), var(--shadow-md)
    }

    .word-card.wrong.speaking {
      box-shadow: 0 0 0 3px rgba(229, 62, 62, .3), var(--shadow-md)
    }

    .word-card.skipped.speaking {
      box-shadow: 0 0 0 3px rgba(158, 152, 144, .3), var(--shadow-md)
    }

    .wc-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px
    }

    .wc-status {
      font-size: .75rem;
      font-weight: 800
    }

    .wc-status.c {
      color: var(--accent3)
    }

    .wc-status.w {
      color: #e53e3e
    }

    .wc-status.s {
      color: var(--muted)
    }

    .wc-speak {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .75rem;
      transition: all .15s;
      flex-shrink: 0
    }

    .word-card.correct .wc-speak {
      background: rgba(39, 174, 114, .15);
      color: var(--accent3)
    }

    .word-card.wrong .wc-speak {
      background: rgba(229, 62, 62, .12);
      color: #e53e3e
    }

    .word-card.skipped .wc-speak {
      background: var(--border);
      color: var(--muted)
    }

    .word-card:hover .wc-speak {
      transform: scale(1.15)
    }

    .wc-word {
      font-family: 'Lora', serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 3px;
      line-height: 1.2
    }

    .wc-pos {
      font-size: .65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .07em;
      padding: 2px 7px;
      border-radius: var(--radius-pill);
      display: inline-block;
      margin-bottom: 5px
    }

    .pos-n {
      background: rgba(39, 174, 114, .1);
      color: #27ae72
    }

    .pos-v {
      background: rgba(42, 122, 224, .1);
      color: #2a7ae0
    }

    .pos-adj {
      background: rgba(224, 92, 42, .1);
      color: #e05c2a
    }

    .pos-adv {
      background: rgba(155, 89, 182, .1);
      color: #9b59b6
    }

    .pos-prep {
      background: rgba(85, 85, 85, .1);
      color: #555555
    }

    .pos-aux {
      background: rgba(170, 170, 170, .1);
      color: #888888
    }

    .pos-conj {
      background: rgba(52, 152, 219, .1);
      color: #2980b9
    }

    .pos-art {
      background: rgba(34, 34, 34, .1);
      color: #222222
    }

    .pos-pron {
      background: rgba(231, 76, 60, .1);
      color: #c0392b
    }

    .pos-other {
      background: var(--bg2);
      color: var(--muted)
    }

    .wc-meaning {
      font-size: .72rem;
      color: var(--ink2);
      line-height: 1.45;
      font-weight: 600
    }

    .wc-heard {
      font-size: .67rem;
      color: #d4a017;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 4px;
      padding: 1px 5px;
      margin: 3px 0 1px;
      line-height: 1.4;
    }
    .wc-heard em { font-style: normal; font-weight: 700; color: #92400e; }
    .wc-heard--miss {
      color: #6b7280;
      background: #f9fafb;
      border-color: #e5e7eb;
    }

    .wc-ipa {
      font-size: .69rem;
      color: var(--muted);
      font-family: 'Nunito', sans-serif;
      font-weight: 600;
      margin-bottom: 4px;
      letter-spacing: .01em
    }

    /* ── Detail Analysis Panel ── */
    .detail-row {
      display: flex;
      flex-direction: column;
      padding: 13px 18px;
      border-bottom: 1px solid var(--border)
    }

    .detail-row:last-child {
      border-bottom: none
    }

    .detail-head {
      font-size: .71rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--muted);
      margin-bottom: 5px
    }

    .detail-txt {
      font-size: .83rem;
      color: var(--ink);
      font-weight: 600;
      line-height: 1.55
    }

    .detail-advice {
      font-size: .74rem;
      color: var(--ink2);
      margin-top: 5px;
      line-height: 1.5;
      padding-left: 8px;
      border-left: 2px solid var(--border)
    }

    .d-badge {
      display: inline-block;
      padding: 2px 9px;
      border-radius: var(--radius-pill);
      font-size: .69rem;
      font-weight: 800;
      margin-right: 5px;
      vertical-align: middle
    }

    .d-good {
      background: var(--green-soft);
      color: var(--accent3);
      border: 1px solid rgba(39, 174, 114, .25)
    }

    .d-ok {
      background: rgba(42, 122, 224, .08);
      color: var(--accent2);
      border: 1px solid rgba(42, 122, 224, .2)
    }

    .d-warn {
      background: rgba(229, 62, 62, .07);
      color: #e53e3e;
      border: 1px solid rgba(229, 62, 62, .2)
    }

    .d-na {
      background: var(--bg2);
      color: var(--muted);
      border: 1px solid var(--border)
    }

    .d-loading {
      background: var(--bg2);
      color: var(--muted);
      border: 1px solid var(--border);
      animation: dpulse .9s ease infinite alternate
    }

    @keyframes dpulse {
      from {
        opacity: .45
      }

      to {
        opacity: 1
      }
    }

    .wc-retry {
      margin-top: 8px;
      width: 100%;
      padding: 5px 0;
      border-radius: var(--radius-pill);
      border: 1.5px solid rgba(229, 62, 62, .4);
      background: rgba(229, 62, 62, .07);
      color: #e53e3e;
      font-size: .68rem;
      font-weight: 800;
      cursor: pointer;
      transition: all .15s;
      font-family: 'Nunito', sans-serif
    }

    .wc-retry:hover:not(:disabled) {
      background: rgba(229, 62, 62, .15);
      border-color: #e53e3e
    }

    .wc-retry:disabled {
      opacity: .5;
      cursor: not-allowed
    }

    .word-card.retrying {
      box-shadow: 0 0 0 3px rgba(99, 179, 237, .5), var(--shadow-md);
      border-color: #63b3ed !important;
      animation: retryPulse 1s ease infinite
    }

    .word-card.retrying .wc-retry {
      border-color: #63b3ed;
      color: #2b6cb0;
      background: rgba(99, 179, 237, .12)
    }

    @keyframes retryPulse {

      0%,
      100% {
        box-shadow: 0 0 0 3px rgba(99, 179, 237, .5), var(--shadow-md)
      }

      50% {
        box-shadow: 0 0 0 6px rgba(99, 179, 237, .25), var(--shadow-md)
      }
    }

    /* speak tooltip */
    .speak-hint {
      text-align: center;
      padding: 12px 10px;
      font-size: .74rem;
      color: var(--muted);
      border-top: 1px solid var(--border);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px
    }

    .result-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center
    }

    .btn-outline {
      padding: 11px 22px;
      border-radius: var(--radius-pill);
      border: 2px solid var(--border);
      background: var(--surface);
      color: var(--ink2);
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      font-size: .86rem;
      font-weight: 800;
      transition: all .18s;
      box-shadow: var(--shadow-sm)
    }

    .btn-outline:hover {
      border-color: var(--accent2);
      color: var(--accent2)
    }

    .btn-outline.playing {
      border-color: var(--accent2);
      color: var(--accent2);
      background: var(--blue-soft);
    }

    /* MODAL */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(245, 243, 238, .75);
      backdrop-filter: blur(8px);
      align-items: center;
      justify-content: center
    }

    .modal-overlay.active {
      display: flex
    }
    #vocabImageModal.active { z-index: 10001; }
    .modal-overlay.dark-overlay {
      background: rgba(2, 6, 23, .88);
    }

    .modal-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 36px 32px;
      max-width: 400px;
      width: 90%;
      text-align: center;
      box-shadow: var(--shadow-lg);
      animation: popIn .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    @keyframes popIn {
      from {
        opacity: 0;
        transform: scale(.88)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .modal-icon {
      font-size: 2.8rem;
      margin-bottom: 12px
    }

    .modal-title {
      font-size: 1.2rem;
      font-weight: 900;
      color: var(--ink);
      margin-bottom: 8px
    }

    .modal-desc {
      font-size: .86rem;
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 24px
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      justify-content: center
    }

    .countdown-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0, 0, 0, .55);
      align-items: center;
      justify-content: center
    }

    .countdown-overlay.active {
      display: flex
    }

    .countdown-num {
      font-size: 7rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      animation: cdPop .85s ease-out forwards
    }

    @keyframes cdPop {
      0%   { transform: scale(1.6); opacity: 0 }
      30%  { transform: scale(1);   opacity: 1 }
      80%  { transform: scale(1);   opacity: 1 }
      100% { transform: scale(.7);  opacity: 0 }
    }

    .mic-fix-box {
      text-align: left;
      max-width: 440px
    }

    .mic-fix-box .modal-title {
      text-align: center;
      margin-bottom: 16px
    }

    .mic-fix-box .modal-icon {
      text-align: center
    }

    .mic-fix-steps {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 20px
    }

    .mic-fix-step {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: .85rem;
      line-height: 1.6;
      color: var(--ink)
    }

    .mic-fix-num {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: .78rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px
    }

    .mic-fix-step em {
      font-style: normal;
      background: var(--surface2);
      border-radius: 4px;
      padding: 1px 5px;
      font-size: .82rem;
      color: var(--muted)
    }

    /* TOAST */
    .toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%) translateY(70px);
      background: var(--ink);
      color: #fff;
      border-radius: var(--radius-pill);
      padding: 10px 22px;
      font-size: .82rem;
      font-weight: 700;
      box-shadow: var(--shadow-lg);
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
      z-index: 1000000;
      white-space: nowrap
    }

    .toast.show {
      transform: translateX(-50%) translateY(0)
    }

    /* WORD TOOLTIP */
    .word-tooltip {
      position: fixed;
      background: var(--ink);
      color: #fff;
      padding: 12px 16px;
      border-radius: 14px;
      font-family: 'Nunito', sans-serif;
      z-index: 2000;
      pointer-events: auto;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 10px);
      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      max-width: 300px;
      width: max-content;
      text-align: center;
    }

    .word-tooltip.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }

    .word-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: var(--ink) transparent transparent transparent;
    }

    .tt-add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
      width: 100%;
      padding: 8px 14px;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.85);
      background: transparent;
      color: #fff;
      font-family: 'Nunito', sans-serif;
      font-size: .83rem;
      font-weight: 800;
      cursor: pointer;
      transition: all .18s;
      letter-spacing: .02em;
    }

    .tt-add-btn:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.18);
      border-color: #fff;
      transform: scale(1.03);
    }

    .tt-add-btn.added {
      border-color: #4ade80;
      color: #4ade80;
      cursor: default;
      opacity: .85;
    }

    .tt-plus {
      font-size: 1.15rem;
      font-weight: 900;
      line-height: 1;
    }

    /* PARTIAL BADGE */
    .partial-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      background: rgba(241, 196, 15, .15);
      border: 1px solid rgba(241, 196, 15, .4);
      color: #b8860b;
      font-size: .7rem;
      font-weight: 800;
      margin-left: 10px
    }

    @keyframes fadeUp {
      from { transform: translateY(16px) }
      to   { transform: translateY(0) }
    }

    .fu {
      opacity: 1;
      animation: fadeUp .4s ease forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      .fu { animation: none !important; transform: none !important; }
    }

    .d1 {
      animation-delay: .08s
    }

    .d2 {
      animation-delay: .16s
    }

    .d3 {
      animation-delay: .24s
    }

    .d4 {
      animation-delay: .32s
    }

    ::-webkit-scrollbar {
      width: 6px;
      display: none
    }

    ::-webkit-scrollbar-track {
      background: var(--bg2)
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 3px
    }

    .vocab-sw {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
      font-size: .72rem;
      font-weight: 700;
      color: var(--muted)
    }

    .vocab-sw-track {
      width: 32px;
      height: 18px;
      border-radius: 9px;
      background: var(--border2);
      transition: background .2s;
      position: relative;
      flex-shrink: 0
    }

    .vocab-sw-track::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #fff;
      transition: transform .2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
    }

    .vocab-sw.on .vocab-sw-track {
      background: var(--accent2)
    }

    .vocab-sw.on .vocab-sw-track::after {
      transform: translateX(14px)
    }

    .vocab-edit-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: .75rem;
      padding: 0 2px;
      color: var(--border2);
      line-height: 1;
      transition: color .15s;
      vertical-align: middle;
      flex-shrink: 0
    }

    .vocab-edit-btn:hover {
      color: var(--accent2)
    }

    .vocab-del-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: .72rem;
      padding: 0 2px;
      color: var(--border2);
      line-height: 1;
      transition: color .15s;
      flex-shrink: 0
    }

    .vocab-del-btn:hover {
      color: #e53e3e
    }

    /* ── Vocab quiz launch button ── */
    .vocab-quiz-launch-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 12px; border-radius: 999px;
      border: 1.5px solid var(--accent); background: var(--accent-soft);
      color: var(--accent); font-family: 'Nunito', sans-serif;
      font-size: .72rem; font-weight: 800; cursor: pointer;
      transition: all .15s;
    }
    .vocab-quiz-launch-btn:hover { background: var(--accent); color: #fff; }
    .vocab-slide-launch-btn {
      border-color: #7c3aed; background: rgba(124,58,237,.08); color: #7c3aed;
    }
    .vocab-slide-launch-btn:hover { background: #7c3aed; color: #fff; }
    .vocab-spell-launch-btn {
      border-color: #0891b2; background: rgba(8,145,178,.08); color: #0891b2;
    }
    .vocab-spell-launch-btn:hover { background: #0891b2; color: #fff; }
    .vocab-endef-launch-btn {
      border-color: #059669; background: rgba(5,150,105,.08); color: #059669;
    }
    .vocab-endef-launch-btn:hover { background: #059669; color: #fff; }
    /* ── English Definition Quiz ── */
    .endef-overlay { align-items: center; justify-content: center; }
    .endef-box { max-width: 860px; }
    .endef-bar { background: linear-gradient(90deg, #14b8a6, #0d9488) !important; }
    .endef-box .vocab-quiz-score-badge { color: #0d9488; }
    .endef-word-card {
      text-align: center; padding: 6px 0 18px;
    }
    .endef-prompt-label {
      font-family: 'Nunito', sans-serif; font-size: .85rem; font-weight: 700;
      color: #94a3b8; margin-bottom: 16px; letter-spacing: .01em;
    }
    .endef-word {
      display: inline-flex; align-items: center; gap: 14px; padding: 12px 16px 12px 30px;
      border-radius: 999px; background: linear-gradient(135deg, #fef6e0, #fdedc8);
      border: 1.5px solid #f4dca0; box-shadow: 0 6px 18px rgba(217,180,90,.18);
      cursor: pointer; transition: transform .15s, box-shadow .15s;
    }
    .endef-word:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(217,180,90,.28); }
    .endef-word-txt {
      font-family: 'Lora', serif; font-size: 1.85rem; font-weight: 900;
      color: #0f766e; letter-spacing: .01em;
    }
    .endef-word-spk {
      width: 42px; height: 42px; border-radius: 50%; flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #fbbf24, #f59e0b); font-size: 1.1rem;
      box-shadow: 0 4px 12px rgba(245,158,11,.4); transition: transform .15s;
    }
    .endef-word:hover .endef-word-spk { transform: scale(1.08); }
    .endef-expand-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 18px; border-radius: 999px;
      border: 1.5px solid #e2e8f0; background: #fff;
      color: #64748b; font-family: 'Nunito', sans-serif;
      font-size: .8rem; font-weight: 800; cursor: pointer;
      box-shadow: 0 2px 6px rgba(15,23,42,.05);
      transition: border-color .15s, color .15s, background .15s;
    }
    .endef-expand-btn:hover { border-color: #0d9488; color: #0d9488; background: rgba(13,148,136,.06); }
    .endef-ipa {
      font-family: 'Doulos SIL', 'Charis SIL', 'Gentium Plus', 'Segoe UI', Arial, sans-serif;
      font-size: 1.15rem; color: #0d9488; margin-top: 12px; font-style: normal; font-weight: 500;
      letter-spacing: .5px;
    }
    .endef-vi {
      font-family: 'Nunito', sans-serif; font-size: 1.05rem;
      color: #ea8a1e; font-weight: 800; margin-top: 4px;
    }
    .endef-options { gap: 14px !important; }
    .endef-opt {
      display: flex !important; align-items: center; gap: 14px;
      text-align: left !important; white-space: normal !important;
      line-height: 1.5 !important; font-size: 1.05rem !important; font-weight: 600 !important;
      padding: 16px 18px !important; min-height: 70px; border-radius: 16px !important;
      border: 1.5px solid #e6e3da !important; background: #fff !important;
      box-shadow: 0 3px 10px rgba(15,23,42,.04);
    }
    .endef-opt:hover:not(:disabled) {
      border-color: #14b8a6 !important; background: #f0fdfa !important;
      transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,184,166,.14);
    }
    .endef-opt-letter {
      flex: none; width: 34px; height: 34px; border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #f1f5f3; color: #64748b; font-family: 'Nunito', sans-serif;
      font-size: .9rem; font-weight: 900; transition: all .15s;
    }
    .endef-opt-text { flex: 1; min-width: 0; }
    .endef-opt-check { flex: none; color: #0d9488; font-weight: 900; font-size: 1.15rem; opacity: 0; transition: opacity .15s; }
    .endef-opt.correct {
      border-color: #14b8a6 !important; background: #ecfdf5 !important; color: #0f766e !important; font-weight: 800 !important;
    }
    .endef-opt.correct .endef-opt-letter { background: #0d9488; color: #fff; }
    .endef-opt.correct .endef-opt-check { opacity: 1; }
    .endef-opt.wrong {
      border-color: #f87171 !important; background: #fef2f2 !important; color: #b91c1c !important;
    }
    .endef-opt.wrong .endef-opt-letter { background: #ef4444; color: #fff; }
    .endef-box .vocab-quiz-feedback {
      background: #ecfdf5; border: 1px solid #99f6e4; border-radius: 14px;
      padding: 16px; margin-top: 4px;
    }
    .endef-box .quiz-fb-ok { color: #0f766e; font-size: 1.15rem; font-weight: 800; }
    .endef-box .vocab-quiz-next-btn {
      background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 6px 16px rgba(13,148,136,.3);
      padding: 13px 38px; font-size: .98rem;
    }
    .endef-box .quiz-auto-track.on { background: #0d9488; }
    @media (max-width: 640px) { .endef-options { grid-template-columns: 1fr !important; } .endef-word-txt { font-size: 1.5rem; } }
    /* spinner */
    .endef-spinner {
      width: 36px; height: 36px; border-radius: 50%;
      border: 3px solid var(--border); border-top-color: #059669;
      animation: spin .7s linear infinite; margin: 0 auto;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes ytVmSpin { to { transform: rotate(360deg); } }
    .yt-vm-fetch-spin { display: inline-block; animation: ytVmSpin .9s linear infinite; }

    /* ── Spelling Practice Modal ── */
    .spell-overlay { align-items: center; justify-content: center; background: rgba(241,245,249,.88); backdrop-filter: blur(10px); }
    .spell-box { background: #fff; border-radius: 20px; width: 94%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,.12); overflow: hidden; }
    .spell-header { padding: 14px 18px 12px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .spell-progress-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .spell-counter { font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 900; color: #94a3b8; white-space: nowrap; flex-shrink: 0; }
    .spell-bar-track { flex: 1; height: 5px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
    .spell-bar-fill { height: 100%; border-radius: 999px; background: #0891b2; transition: width .4s ease; }
    .spell-score-badge { font-family: 'Nunito', sans-serif; font-size: .75rem; font-weight: 900; color: #22c55e; white-space: nowrap; flex-shrink: 0; }
    .spell-body { flex: 1; overflow-y: auto; padding: 28px 28px 20px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
    .spell-prompt { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
    .spell-play-btn { width: 82px; height: 82px; border-radius: 50%; background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(8,145,178,.3); transition: transform .15s, box-shadow .15s; flex-shrink: 0; }
    .spell-play-btn:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgba(8,145,178,.4); }
    .spell-play-btn svg { width: 38px; height: 38px; fill: #fff; }
    .spell-ipa { font-size: 1.12rem; color: #0891b2; font-family: Cambria, serif; letter-spacing: .02em; }
    .spell-meaning { font-size: .82rem; color: #94a3b8; font-style: italic; font-family: 'Nunito', sans-serif; }
    .spell-example { font-size: .82rem; color: #64748b; font-style: italic; font-family: 'Nunito', sans-serif; margin-top: 6px; line-height: 1.5; max-width: 340px; text-align: center; }
    .vien-sentence-hint { font-size: 1.02rem; color: #2563eb; font-style: italic; font-family: 'Lora', serif; line-height: 1.6; text-align: center; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 18px; margin: 6px 0; }
    .spell-blank { display: inline; background: #ddd6fe; color: #ddd6fe; border-bottom: 2px solid #7c3aed; border-radius: 3px 3px 0 0; padding: 1px 10px; margin: 0 2px; user-select: none; }
    .spell-blank-revealed { color: #7c3aed; font-weight: 700; font-style: normal; background: rgba(124,58,237,.08); padding: 1px 4px; border-radius: 3px; }
    .spell-input-wrap { display: flex; gap: 8px; align-items: center; width: 100%; }
    .spell-input { flex: 1; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #f8fafc; font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 600; color: #0f172a; outline: none; transition: border-color .2s, box-shadow .2s; }
    .spell-input:focus { border-color: #0891b2; background: #fff; box-shadow: 0 0 0 3px rgba(8,145,178,.1); }
    .spell-input--correct { border-color: #22c55e; background: #f0fdf4; color: #166534; }
    .spell-input--wrong   { border-color: #ef4444; background: #fff5f5; color: #991b1b; }
    .spell-input--reveal  { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
    .spell-submit-btn { padding: 12px 18px; border-radius: 12px; border: none; background: #e2e8f0; color: #64748b; font-family: 'Nunito', sans-serif; font-size: .88rem; font-weight: 800; cursor: pointer; transition: all .18s; white-space: nowrap; }
    .spell-submit-btn:hover { background: #0891b2; color: #fff; }
    .spell-hint-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    .spell-hint-btn { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700; color: #475569; cursor: pointer; transition: all .15s; text-align: center; }
    .spell-hint-btn:hover:not(:disabled) { border-color: #0891b2; color: #0891b2; background: #f0f9ff; }
    .spell-hint-btn:disabled { opacity: .65; cursor: default; }
    .spell-hint-btn.vien-recording { background: #fee2e2; border-color: #ef4444; color: #dc2626; animation: vien-pulse-rec .7s ease-in-out infinite; }
    @keyframes vien-pulse-rec { 0%,100%{opacity:1;} 50%{opacity:.5;} }
    .vien-mode-btn { display:flex; align-items:center; gap:14px; width:100%; padding:14px 18px; background:#fff; border:2px solid #e2e8f0; border-radius:14px; cursor:pointer; font-family:'Nunito',sans-serif; text-align:left; transition:all .15s; }
    .vien-mode-btn:hover { border-color:var(--accent); background:#f0f9ff; }
    .vien-mode-btn strong { display:block; font-size:.92rem; color:var(--ink); margin-bottom:2px; }
    .vien-mode-btn span { font-size:.75rem; color:var(--muted); font-weight:400; }
    .vien-mode-icon { font-size:1.5rem; flex-shrink:0; }
    .spell-feedback { text-align: center; font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 700; padding: 10px 14px; border-radius: 12px; background: #f8fafc; width: 100%; box-sizing: border-box; }
    .spell-fb-ok    { color: #166534; font-size: 1rem; }
    .spell-fb-err   { color: #dc2626; }
    .spell-fb-answer { color: #0891b2; font-size: 1.05rem; }
    .spell-fb-close { color: #94a3b8; font-weight: 600; }
    .spell-fb-typed { color: #94a3b8; font-weight: 600; }
    .spell-retry-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 18px; border-radius: 999px; border: 1.5px solid #0891b2; background: rgba(8,145,178,.08); color: #0891b2; font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 800; cursor: pointer; transition: all .15s; }
    .spell-retry-btn:hover { background: #0891b2; color: #fff; }
    .spell-wrong-review { margin-top: 4px; padding: 12px 14px; background: #fff5f5; border: 1px solid #fed7d7; border-radius: 14px; width: 100%; box-sizing: border-box; }
    .spell-footer { padding: 12px 20px 16px; border-top: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
    .spell-kbd-hint { font-size: .68rem; color: #94a3b8; font-family: 'Nunito', sans-serif; font-weight: 600; white-space: nowrap; }
    .spell-kbd-hint kbd { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; padding: 1px 4px; font-size: .65rem; font-family: inherit; }

    /* ── Sentence Dictation ── */
    .dict-input-wrap {
      display: flex; gap: 10px; align-items: flex-end;
    }
    .dict-textarea {
      flex: 1; min-height: 72px; max-height: 150px;
      border: 2px solid var(--border); border-radius: 12px;
      padding: 10px 14px; font-family: 'Nunito', sans-serif;
      font-size: .95rem; font-weight: 600; color: var(--ink);
      background: var(--surface); resize: vertical;
      outline: none; transition: border-color .18s, background .18s;
    }
    .dict-textarea:focus { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.12); }
    .dict-check-btn { align-self: flex-end; }
    /* hint panel */
    .dict-hint-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 6px;
    }
    .dict-hint-label { font-size: .75rem; color: var(--muted); font-family: 'Nunito', sans-serif; font-weight: 700; }
    .dict-showall-btn {
      font-size: .72rem; font-weight: 800; font-family: 'Nunito', sans-serif;
      background: none; border: 1px solid var(--border); border-radius: 6px;
      padding: 2px 10px; color: var(--muted); cursor: pointer; transition: all .15s;
    }
    .dict-showall-btn:hover { border-color: #0891b2; color: #0891b2; }
    .dict-chips {
      display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
    }
    .dict-chip {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 28px; height: 32px; padding: 0 10px;
      border-radius: 8px; font-family: 'Nunito', sans-serif;
      font-size: .88rem; font-weight: 800;
      cursor: pointer; transition: all .15s; user-select: none;
    }
    .dict-chip--punct {
      cursor: default; color: var(--muted);
      background: none; font-size: .9rem; padding: 0 2px; min-width: 0;
    }
    .dict-chip--hidden {
      background: var(--surface2); border: 1.5px solid var(--border);
      color: var(--muted); letter-spacing: 2px;
    }
    .dict-chip--hidden:hover { border-color: #0891b2; background: rgba(8,145,178,.08); color: #0891b2; }
    .dict-chip--fl {
      background: #fef3c7; border: 1.5px solid #f59e0b; color: #92400e; letter-spacing: 1px;
    }
    .dict-chip--fl:hover { background: #fde68a; }
    .dict-chip--revealed {
      background: #dcfce7; border: 1.5px solid #86efac; color: #166534;
    }
    .dict-chip--clickable { cursor: pointer; }
    .dict-chip--clickable:hover { background: #bbf7d0; border-color: #4ade80; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(22,101,52,.15); transition: all .12s; }
    .dict-chip--word { cursor: pointer; }
    .dict-chip--word:hover { background: #bbf7d0; }
    .dict-hint-btns {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .dict-hint-btn {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: .75rem; font-weight: 800; font-family: 'Nunito', sans-serif;
      background: var(--surface2); border: 1.5px solid var(--border); border-radius: 8px;
      padding: 4px 12px; color: var(--ink); cursor: pointer; transition: all .15s;
    }
    .dict-hint-btn:hover { border-color: #7c3aed; color: #7c3aed; background: rgba(124,58,237,.07); }
    .dict-hint-btn--on { border-color: #7c3aed; color: #7c3aed; background: rgba(124,58,237,.10); }
    .dict-hint-btn kbd {
      font-size: .65rem; font-family: monospace; background: var(--border);
      border-radius: 4px; padding: 1px 4px; color: var(--muted);
    }
    .dict-hint-btn-icon { font-style: normal; }

    /* ══ Sentence dictation modal redesign ══ */
    #dictModal .spell-box { border-radius: 24px; }
    #dictModal #dictInstruction { font-size: 1.05rem !important; color: #64748b !important; margin-bottom: 20px !important; font-weight: 600; }
    #dictModal .spell-play-btn {
      width: 104px; height: 104px;
      background: linear-gradient(135deg, #6366f1 0%, #4f6ef7 100%);
      box-shadow: 0 14px 34px rgba(79,110,247,.4);
    }
    #dictModal .spell-play-btn svg { width: 46px; height: 46px; }
    #dictModal #dictWordHint { font-size: 1.2rem; font-weight: 800; color: #1e293b; margin-top: 16px; }
    #dictModal .dict-hint-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    #dictModal .dict-hint-label { font-size: 1rem; font-weight: 800; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
    #dictModal .dict-showall-btn {
      border: 1.5px solid #c7d2fe; background: #fff; color: #6366f1; border-radius: 999px;
      padding: 6px 16px; font-size: .82rem; font-weight: 800; cursor: pointer; transition: all .15s;
    }
    #dictModal .dict-showall-btn:hover { background: #eef2ff; border-color: #6366f1; }
    #dictModal .dict-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
    #dictModal .dict-chip {
      display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 40px;
      padding: 0 14px; border-radius: 11px; border: none; background: #eef0f6; color: #94a3b8;
      font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: .12em;
    }
    #dictModal .dict-chip--punct { background: transparent; min-width: 0; padding: 0 2px; color: #475569; letter-spacing: 0; }
    #dictModal .dict-chip--hidden { cursor: pointer; transition: background .15s, color .15s; }
    #dictModal .dict-chip--hidden:hover { background: #e0e7ff; color: #6366f1; }
    #dictModal .dict-chip--fl { background: #fef3c7; color: #b45309; cursor: pointer; letter-spacing: .08em; }
    #dictModal .dict-chip--fl:hover { background: #fde68a; }
    #dictModal .dict-chip--revealed { background: #dcfce7; color: #15803d; letter-spacing: 0; }
    #dictModal .dict-chip--clickable { cursor: pointer; }
    #dictModal .dict-chip--clickable:hover { background: #bbf7d0; }
    #dictModal .dict-hint-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
    #dictModal .dict-hint-btn {
      display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 800;
      font-family: 'Nunito', sans-serif; border: none; border-radius: 12px; padding: 11px 20px; cursor: pointer; transition: filter .15s, background .15s;
    }
    #dictModal .dict-hint-fl { background: #eff6ff; color: #2563eb; }
    #dictModal .dict-hint-fl:hover { background: #dbeafe; }
    #dictModal .dict-hint-fl.dict-hint-btn--on { background: #dbeafe; box-shadow: inset 0 0 0 1.5px #93c5fd; }
    #dictModal .dict-hint-rw { background: #fef9c3; color: #a16207; }
    #dictModal .dict-hint-rw:hover { background: #fef08a; }
    #dictModal .dict-hint-ic { font-weight: 900; }
    #dictModal .dict-input-wrap { gap: 12px; align-items: stretch; margin-top: 6px; }
    #dictModal .dict-textarea {
      border: 2px solid #e3def9; border-radius: 16px; background: #fbfbff; font-size: 1.05rem;
      padding: 14px 18px;
    }
    #dictModal .dict-textarea:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.18); }
    #dictModal .dict-check-btn {
      align-self: stretch; background: linear-gradient(135deg, #a78bfa, #7c6ef6) !important; color: #fff !important;
      border-radius: 14px !important; padding: 0 30px !important; font-size: 1rem !important;
    }
    #dictModal .dict-check-btn:hover { filter: brightness(1.05); }

    /* ══ Dictionary popup (View details trong các test) ══ */
    .vs-dictpop-overlay { z-index: 4000; align-items: flex-start; justify-content: center; background: rgba(8,10,18,.6); }
    .vs-dictpop-overlay.active { display: flex; }
    .vs-dictpop-box { position: relative; background: #fff; border-radius: 20px; width: min(680px,94vw); max-height: 88vh; overflow-y: auto; margin-top: 5vh; box-shadow: 0 28px 72px rgba(0,0,0,.32); padding: 6px; }
    .vs-dictpop-close { position: absolute; top: 12px; right: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: none; background: #f1f5f9; color: #475569; font-size: 1.3rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
    .vs-dictpop-close:hover { background: #e2e8f0; }

    /* ══════════════ DARK MODE — Saved Words panel + test modals ══════════════ */
    .vs-dark-toggle { background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
    /* Override CSS variables in scope (most sub-elements adapt automatically) */
    body.vs-dark #ytVocabPanel,
    body.vs-dark #vocabListModal,
    body.vs-dark #vocabQuizModal,
    body.vs-dark #enDefModal,
    body.vs-dark #spellModal,
    body.vs-dark #vienModal,
    body.vs-dark #dictModal,
    body.vs-dark #sentArrangeModal {
      --surface: #1f2230; --surface2: #171a24; --bg: #12141c; --bg2: #1a1d28;
      --border: #343a4d; --border2: #3f4456; --ink: #e8eaf0; --ink2: #c2c6d2; --muted: #8b90a0;
      --blue-soft: rgba(124,110,246,.2);
    }
    /* ── Vocabulary List screen ── */
    body.vs-dark #vocabListModal, body.vs-dark #vocabListModal .vocab-list-fullscreen { background: #12141c !important; }
    body.vs-dark #vocabListModal .vocab-fs-inner > div:first-child { background: #1b1e2a !important; border-color: #2c3142 !important; }
    body.vs-dark #vocabListModal .vw-card { background: #1f2230 !important; border-color: #343a4d !important; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
    body.vs-dark #vocabListModal .vw-word { background: linear-gradient(135deg,#332b57,#3a2b52) !important; color: #c4b5fd !important; }
    body.vs-dark #vocabListModal .vw-meaning-txt { color: #e8eaf0; }
    body.vs-dark #vocabListModal .vw-ex-box { background: #171a24 !important; border-color: #343a4d !important; }
    body.vs-dark #vocabListModal .vw-x { color: #8b90a0; }
    body.vs-dark #vocabListModal .filter-btn, body.vs-dark #vocabListModal .vl-back-btn { background: #262a3a; border-color: #343a4d; color: #c2c6d2; }
    body.vs-dark #vocabListModal .filter-btn.active-all, body.vs-dark #vocabListModal .filter-btn.active { background: #332b57; border-color: #7c6ef6; color: #c4b5fd; }
    body.vs-dark #vocabListModal .vocab-mastery-hint, body.vs-dark #vocabListModal .vw-ipa { color: #8b90a0; }
    body.vs-dark #vocabListModal .vf-chip { background: #262a3a; color: #c2c6d2; }
    body.vs-dark #vocabListModal .vocab-ctx-vi { color: #c2c6d2 !important; }
    /* câu ví dụ tiếng Anh (xanh dương #2563eb) → xanh lá dễ nhìn trên nền tối */
    body.vs-dark #vocabListModal [style*="2563eb"] { color: #4ade80 !important; }
    /* darker backdrop */
    body.vs-dark .vocab-quiz-overlay, body.vs-dark .spell-overlay,
    body.vs-dark #enDefModal.modal-overlay, body.vs-dark #sentArrangeModal.modal-overlay { background: rgba(8,10,18,.72) !important; backdrop-filter: blur(6px); }
    /* boxes */
    body.vs-dark #ytVocabPanel, body.vs-dark .qc-card, body.vs-dark .spell-box,
    body.vs-dark .vocab-quiz-box, body.vs-dark #sentArrangeModal .modal-box { background: #1f2230 !important; color: #e8eaf0; }
    body.vs-dark .qc-top, body.vs-dark .qc-footer, body.vs-dark .spell-header, body.vs-dark .spell-footer,
    body.vs-dark .vocab-quiz-header, body.vs-dark .vocab-quiz-footer, body.vs-dark .yt-vpc-header { border-color: #2c3142 !important; }
    body.vs-dark .vocab-quiz-footer, body.vs-dark .spell-footer { background: transparent !important; }

    /* ── Multiple choice (qc) ── */
    body.vs-dark .qc-prompt__text, body.vs-dark .qc-meaning-text { color: #e8eaf0 !important; }
    body.vs-dark .qc-q { color: #4a4f73 !important; }
    body.vs-dark .qc-choice { background: #262a3a !important; border-color: #343a4d !important; color: #e8eaf0 !important; box-shadow: none; }
    body.vs-dark .qc-choice:hover:not(:disabled) { border-color: #7c6ef6 !important; }
    body.vs-dark .qc-choice__kbd { background: #343a4d; color: #c4b5fd; }
    body.vs-dark .qc-choice.is-correct { background: #16321f !important; border-color: #2f7d4f !important; color: #a7f3d0 !important; }
    body.vs-dark .qc-choice.is-correct .qc-choice__kbd { background: #2f7d4f; color: #fff; }
    body.vs-dark .qc-choice.is-wrong { background: #3a1d20 !important; border-color: #a14a4a !important; color: #fecaca !important; }
    body.vs-dark .qc-choice.is-wrong .qc-choice__kbd { background: #a14a4a; color: #fff; }
    body.vs-dark .qc-hint-box { background: #262a3a; color: #c2c6d2; }
    body.vs-dark .qc-blank { background: #2e2a44; color: #c4b5fd; }
    body.vs-dark .qc-counter, body.vs-dark .qc-close { background: #2c3142; color: #c2c6d2; }
    body.vs-dark .qc-progress { background: #2c3142; }
    body.vs-dark .qc-fc-btn { background: #262a3a; border-color: #343a4d; color: #c2c6d2; }
    body.vs-dark .qc-fc-font.active { background: #332b57; border-color: #7c6ef6; color: #c4b5fd; }
    body.vs-dark .qc-fb.is-ok { background: #16321f; border-color: #2f7d4f; }
    body.vs-dark .qc-fb.is-err { background: #3a1d20; border-color: #a14a4a; }
    body.vs-dark .qc-fb .quiz-fb-ok { color: #6ee7b7; }
    body.vs-dark .qc-fb .quiz-fb-def { color: #c2c6d2; }

    /* ── Inputs (all modals) ── */
    body.vs-dark .spell-input, body.vs-dark .dict-textarea, body.vs-dark #vienInput,
    body.vs-dark #roomVocabInp { background: #262a3a !important; color: #e8eaf0 !important; border-color: #343a4d !important; }
    body.vs-dark .spell-input::placeholder, body.vs-dark .dict-textarea::placeholder, body.vs-dark #vienInput::placeholder { color: #6b7080; }

    /* ── EnDef definition test ── */
    body.vs-dark .endef-opt { background: #262a3a !important; border-color: #343a4d !important; color: #e8eaf0 !important; box-shadow: none; }
    body.vs-dark .endef-opt:hover:not(:disabled) { background: #2b3142 !important; border-color: #14b8a6 !important; }
    body.vs-dark .endef-opt-letter { background: #343a4d; color: #94a3b8; }
    body.vs-dark .endef-opt.correct { background: #16321f !important; color: #a7f3d0 !important; }
    body.vs-dark .endef-opt.wrong { background: #3a1d20 !important; color: #fecaca !important; }
    body.vs-dark .endef-prompt-label { color: #8b90a0; }
    body.vs-dark .endef-box .vocab-quiz-feedback { background: #16321f; border-color: #2f7d4f; }

    /* ── VI→EN (vien) ── */
    body.vs-dark .vien-mode-card.vien-mc-vocab { background: #241f3a; border-color: #3a325a; }
    body.vs-dark .vien-mode-card.vien-mc-sent { background: #332a1f; border-color: #5a4a2e; }
    body.vs-dark .vien-mc-body strong, body.vs-dark .vien-mp-title, body.vs-dark .vien-meaning-text { color: #e8eaf0; }
    body.vs-dark .vien-tile { background: #262a3a; border-color: #343a4d; box-shadow: none; }
    body.vs-dark .vien-tile-lbl { color: #d4d7e0; }
    body.vs-dark .vien-pos { background: #332b57; color: #c4b5fd; }
    body.vs-dark #vienInputWrap.spell-input-wrap { background: #171a24; border-color: #343a4d; }

    /* ── Word order (sa) ── */
    body.vs-dark .sa-header-title { color: #e8eaf0; }
    body.vs-dark .sa-word-badge { background: #262a3a; }
    body.vs-dark .sa-answer-zone { background: #171a24 !important; border-color: #3a3f55 !important; }
    body.vs-dark .sa-chip { background: #262a3a !important; border-color: #343a4d !important; color: #a5b4fc !important; box-shadow: none; }
    body.vs-dark .sa-chip-placed { background: #2e2a44 !important; color: #c4b5fd !important; }
    body.vs-dark .sa-close, body.vs-dark .sa-btn-clear, body.vs-dark .sa-btn-nav { background: #2c3142; color: #c2c6d2; }

    /* ── Dictation (dict) ── */
    body.vs-dark #dictModal #dictWordHint { color: #e8eaf0; }
    body.vs-dark #dictModal .dict-chip { background: #2c3142 !important; color: #8b90a0 !important; }
    body.vs-dark #dictModal .dict-chip--revealed { background: #16321f !important; color: #a7f3d0 !important; }
    body.vs-dark #dictModal .dict-showall-btn { background: #262a3a; color: #c4b5fd; }

    /* ── spell ── */
    body.vs-dark .spell-meaning { color: #e8eaf0; }
    body.vs-dark .spell-hint-btn { background: #262a3a; border-color: #343a4d; color: #c2c6d2; }
    body.vs-dark .spell-feedback { background: #171a24; }
    body.vs-dark .qwr-chip { background: #262a3a; border-color: #343a4d; }
    body.vs-dark .sw-empty, body.vs-dark .spk-loading { color: #8b90a0; }
    /* feedback words */
    .dict-fb-word { display: inline-block; border-radius: 4px; padding: 0 2px; font-weight: 700; cursor: pointer; }
    .dict-fb-ok    { color: #166534; background: #dcfce7; }
    .dict-fb-close { color: #92400e; background: #fef3c7; }
    .dict-fb-miss  { color: #991b1b; background: #fee2e2; }
    .vocab-dict-launch-btn {
      border-color: #d97706; background: rgba(217,119,6,.08); color: #d97706;
    }
    .vocab-dict-launch-btn:hover { background: #d97706; color: #fff; }

    /* ── Vi→En Translation Quiz ── */
    .vocab-vien-launch-btn {
      border-color: #7c3aed; background: rgba(124,58,237,.08); color: #7c3aed;
    }
    .vocab-vien-launch-btn:hover { background: #7c3aed; color: #fff; }
    .vien-pos {
      font-size: .78rem; color: var(--muted); text-align: center;
      font-style: italic; min-height: 1.2em; margin-bottom: 2px;
    }
    .vien-meaning-text {
      font-size: 1.4rem; font-weight: 900; color: var(--ink);
      text-align: center; padding: 6px 0 8px;
      font-family: 'Nunito', sans-serif; line-height: 1.4;
    }
    .vien-ipa-reveal {
      font-size: .95rem; color: #0891b2; text-align: center;
      font-family: monospace; margin-top: 4px; letter-spacing: .03em;
    }

    /* ══ VI→EN quiz redesign ══ */
    .vien-modepick { padding: 30px 24px 30px; text-align: center; }
    .vien-mp-star { font-size: 2rem; margin-bottom: 10px; }
    .vien-mp-title { font-family: 'Nunito', sans-serif; font-size: 1.7rem; font-weight: 900; color: #1e293b; }
    .vien-mp-sub { font-size: .95rem; color: #94a3b8; margin: 6px 0 26px; font-weight: 600; }
    .vien-mp-cards { display: flex; flex-direction: column; gap: 16px; max-width: 580px; margin: 0 auto; }
    .vien-mode-card { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 24px; border-radius: 20px; border: 1.5px solid transparent; cursor: pointer; text-align: left; transition: transform .15s, box-shadow .15s; }
    .vien-mc-vocab { background: #f3f1fe; border-color: #e3def9; }
    .vien-mc-vocab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(124,110,246,.2); }
    .vien-mc-sent { background: #fef3ea; border-color: #fbdcc3; }
    .vien-mc-sent:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245,158,11,.2); }
    .vien-mc-ic { flex: none; width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: #fff; }
    .vien-mc-vocab .vien-mc-ic { background: linear-gradient(135deg, #a78bfa, #7c6ef6); font-family: 'Lora', serif; }
    .vien-mc-sent .vien-mc-ic { background: linear-gradient(135deg, #fdba74, #fb923c); }
    .vien-mc-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .vien-mc-body strong { font-family: 'Nunito', sans-serif; font-size: 1.3rem; font-weight: 800; color: #1e293b; }
    .vien-mc-body small { font-size: .92rem; color: #64748b; margin-top: 4px; line-height: 1.45; }
    .vien-mc-arrow { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 900; }
    .vien-mc-vocab .vien-mc-arrow { background: #e3def9; color: #7c6ef6; }
    .vien-mc-sent .vien-mc-arrow { background: #fbdcc3; color: #f97316; }

    .vien-pos { display: inline-block; font-size: .85rem; font-weight: 800; color: #7c6ef6; background: #efeafe; padding: 5px 16px; border-radius: 999px; font-style: normal; margin: 0 auto 14px; min-height: 0; }
    .vien-meaning-text { font-size: 1.5rem; font-weight: 900; color: #1e293b; text-align: center; padding: 4px 0 6px; font-family: 'Nunito', sans-serif; line-height: 1.35; }

    #vienInputWrap.spell-input-wrap { background: #f7f6fd; border: 1.5px solid #e3def9; border-radius: 18px; padding: 8px; gap: 8px; }
    #vienInput.spell-input { border: 1.5px solid transparent; background: #fff; border-radius: 12px; }
    #vienInput.spell-input:focus { border-color: #a78bfa; }
    #vienInputWrap .spell-submit-btn { background: linear-gradient(135deg, #a78bfa, #7c6ef6) !important; color: #fff !important; border-radius: 14px !important; padding: 14px 26px !important; font-size: 1rem !important; }

    #vienSpellBody { gap: 12px; padding-top: 22px; padding-bottom: 16px; }
    #vienSpellBody .vien-meaning-text { padding: 2px 0 4px; }
    .vien-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .vien-tiles #vienSentenceBtn { grid-column: 1 / -1; }
    .vien-tile { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border: 1.5px solid #eef0f5; border-radius: 14px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; box-shadow: 0 3px 10px rgba(15,23,42,.04); }
    .vien-tile:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15,23,42,.1); }
    .vien-tile:disabled { opacity: .5; cursor: default; }
    .vien-tile-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
    .vien-tile-lbl { font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 700; color: #334155; flex: 1; min-width: 0; }
    .vien-tile.vien-recording { border-color: #ef4444; background: #fef2f2; }
    .vien-tile.vien-recording .vien-tile-ic { background: #fee2e2; }
    .vien-tile .ic-listen { background: #ede9fe; } .vien-tile .ic-record { background: #fce7f3; }
    .vien-tile .ic-letter { background: #fef3c7; } .vien-tile .ic-reveal { background: #d1fae5; } .vien-tile .ic-sent { background: #dbeafe; }
    @media (max-width: 560px) { .vien-tiles { grid-template-columns: 1fr; } .vien-meaning-text { font-size: 1.3rem; } .vien-mode-card { padding: 16px; gap: 12px; } .vien-mc-ic { width: 52px; height: 52px; } }

    /* ── Slideshow ── */
    .vocab-slide-overlay {
      position: fixed; inset: 0; z-index: 5000;
      background: rgba(10,8,6,.72);
      backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: opacity .25s, visibility .25s;
    }
    .vocab-slide-overlay.active { opacity: 1; visibility: visible; }
    .vocab-slide-card {
      background: var(--surface); border-radius: 24px;
      box-shadow: 0 24px 80px rgba(0,0,0,.28);
      padding: 28px 32px; width: min(580px, 92vw);
      max-height: 88vh; overflow-y: auto;
      animation: slideCardIn .22s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes slideCardIn { from { transform: scale(.9) translateY(20px); opacity:0; } to { transform: none; opacity:1; } }
    .vocab-slide-overlay.fullscreen { backdrop-filter: none; background: rgba(10,8,6,.92); }
    .vocab-slide-overlay.fullscreen .vocab-slide-card {
      width: min(960px, 96vw);
      padding: 48px 64px;
      font-size: 1.45em;
    }
    .vocab-slide-overlay.fullscreen .vocab-slide-card span[style*="1.9rem"] {
      font-size: 3.8rem !important;
      padding: 16px 42px !important;
    }
    .vocab-slide-overlay.fullscreen .vocab-slide-ex-en {
      font-size: 1.25rem !important;
      padding: 16px 20px !important;
      line-height: 1.7 !important;
    }
    .vocab-slide-overlay.fullscreen .vocab-slide-ex-vi {
      font-size: 1.1rem !important;
      padding: 0 6px !important;
    }

    /* ── Flashcard ── */
    .vocab-flash-overlay {
      position: fixed; inset: 0; z-index: 5000;
      background: rgba(10,8,6,.72); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: opacity .25s, visibility .25s;
    }
    .vocab-flash-overlay.active { opacity: 1; visibility: visible; }
    .vocab-flash-wrap {
      display: flex; flex-direction: column; align-items: center;
      gap: 14px; width: min(620px, 94vw);
    }
    .vocab-flash-header {
      width: 100%; display: flex; align-items: center;
      justify-content: space-between;
    }
    .vocab-flash-counter {
      font-size: .82rem; font-weight: 800; color: rgba(255,255,255,.7);
      font-family: 'Nunito', sans-serif;
    }
    .vocab-flash-close {
      width: 32px; height: 32px; border-radius: 10px;
      border: none; background: #e53e3e; color: #fff;
      font-size: 1.1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .vocab-flash-scene {
      width: 100%; perspective: 900px; cursor: pointer;
    }
    .vocab-flash-card {
      width: 100%; height: 380px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform .5s cubic-bezier(.4,0,.2,1);
      border-radius: 22px;
    }
    .vocab-flash-card.flipped { transform: rotateY(180deg); }
    .vocab-flash-back { pointer-events: none; }
    .vocab-flash-card.flipped .vocab-flash-back { pointer-events: auto; }
    .vocab-flash-card.flipped .vocab-flash-front { pointer-events: none; }
    .vocab-flash-face {
      position: absolute; inset: 0;
      border-radius: 22px;
      backface-visibility: hidden;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 24px 28px;
      box-shadow: 0 20px 60px rgba(0,0,0,.32);
    }
    .vocab-flash-front {
      background:
        radial-gradient(ellipse at top left, #fff1d6, transparent 55%),
        radial-gradient(ellipse at bottom right, #ffb89c, transparent 60%),
        linear-gradient(135deg, #fff 0%, #fffaf2 100%);
      border: 1px solid rgba(255,255,255,.6);
      overflow: hidden;
      padding: 20px 32px;
      justify-content: center;
    }
    .vocab-flash-front::before {
      content: ''; position: absolute; top: -80px; right: -60px;
      width: 280px; height: 280px; border-radius: 50%;
      background: radial-gradient(circle, #feb47b, transparent 70%);
      opacity: .35; pointer-events: none;
    }
    .vocab-flash-front::after {
      content: ''; position: absolute; bottom: -100px; left: -80px;
      width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, #ff7e5f, transparent 70%);
      opacity: .22; pointer-events: none;
    }
    /* VA2 front face elements */
    .va2-mark {
      position: absolute; font-family: 'Lora', serif;
      font-weight: 700; font-size: 18rem; line-height: 1;
      color: #1a1714; opacity: .04;
      top: -20px; right: -8px; pointer-events: none; user-select: none;
    }
    .va-corner-tl {
      position: absolute; top: 14px; left: 14px;
      display: flex; gap: 6px; z-index: 3; align-items: center;
    }
    .va-status {
      background: rgba(255,255,255,.85);
      border: 1.5px solid rgba(39,174,114,.4);
      color: #15803d; font: 800 .72rem 'Nunito', sans-serif;
      padding: 5px 10px; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 4px;
      backdrop-filter: blur(4px);
    }
    .va2-pos {
      position: relative; z-index: 2;
      font: 900 .72rem 'Nunito', sans-serif;
      text-transform: uppercase; letter-spacing: .12em;
      padding: 5px 13px; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 6px;
      margin-bottom: 14px;
    }
    .va2-pos[data-pos="n"]   { color: #2a7ae0; background: #e3eefb; }
    .va2-pos[data-pos="v"]   { color: #e05c2a; background: #fde8df; }
    .va2-pos[data-pos="adj"] { color: #7c3aed; background: #ede4fb; }
    .va2-pos[data-pos="adv"] { color: #27ae72; background: #d9f1e5; }
    .va2-pos-dot {
      width: 7px; height: 7px; border-radius: 50%; background: currentColor;
    }
    .va2-word {
      position: relative; z-index: 2;
      font-family: 'Lora', serif;
      font-size: clamp(2.4rem, 8vw, 4.8rem);
      font-weight: 700; color: #1a1714;
      letter-spacing: -.025em; line-height: 1.05;
      margin: 0; text-align: center;
    }
    .va2-underline {
      position: relative; z-index: 2;
      width: 56px; height: 5px; border-radius: 999px;
      margin: 13px 0 11px;
      background: linear-gradient(90deg, #ff7e5f, #feb47b);
    }
    .va2-ipa-row {
      position: relative; z-index: 2;
      display: flex; align-items: center; gap: 12px;
    }
    .va2-ipa {
      font-family: 'Lora', serif; font-style: italic;
      font-size: 1.1rem; color: #4a4540; font-weight: 500;
    }
    .va2-tts {
      width: 40px; height: 40px; border-radius: 50%; border: none;
      background: linear-gradient(135deg, #ff7e5f, #feb47b);
      color: #fff; font-size: 1rem; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 16px rgba(255,126,95,.4);
      transition: transform .15s; flex-shrink: 0;
    }
    .va2-tts:hover { transform: scale(1.08); }
    .va2-flip {
      position: absolute; bottom: 14px; left: 50%;
      transform: translateX(-50%);
      font: 700 .73rem 'Nunito', sans-serif;
      color: #4a4540; opacity: .5; z-index: 2;
      display: inline-flex; align-items: center; gap: 5px;
      white-space: nowrap; pointer-events: none;
    }
    .va2-flip-icon {
      width: 19px; height: 19px; border-radius: 5px;
      background: rgba(0,0,0,.08);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .78rem;
    }
    .vocab-flash-back {
      background:
        radial-gradient(ellipse at top right, #fff1d6, transparent 55%),
        radial-gradient(ellipse at bottom left, #ffb89c, transparent 60%),
        linear-gradient(135deg, #fffaf2 0%, #fff 100%);
      border: 1px solid rgba(255,255,255,.6);
      overflow: hidden;
      transform: rotateY(180deg);
      justify-content: flex-start;
      padding: 20px 26px 16px;
    }
    .vocab-flash-back::before {
      content: ''; position: absolute; top: -80px; left: -60px;
      width: 240px; height: 240px; border-radius: 50%;
      background: radial-gradient(circle, #feb47b, transparent 70%);
      opacity: .3; pointer-events: none;
    }
    .vocab-flash-back::after {
      content: ''; position: absolute; bottom: -100px; right: -80px;
      width: 300px; height: 300px; border-radius: 50%;
      background: radial-gradient(circle, #ff7e5f, transparent 70%);
      opacity: .22; pointer-events: none;
    }
    /* VA-back elements */
    .vab-head {
      position: relative; z-index: 2;
      display: flex; align-items: center;
      justify-content: space-between; margin-bottom: 4px;
    }
    .vab-word-mini {
      font-family: 'Lora', serif; font-weight: 700;
      font-size: 1rem; color: #4a4540;
      display: inline-flex; align-items: center; gap: 7px;
    }
    .vab-word-mini button {
      width: 26px; height: 26px; border-radius: 50%; border: none;
      background: rgba(0,0,0,.06); font-size: .8rem; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      color: #4a4540;
    }
    .vab-pos {
      font: 900 .65rem 'Nunito', sans-serif;
      text-transform: uppercase; letter-spacing: .12em;
      padding: 4px 10px; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .vab-pos[data-pos="n"]   { color: #2a7ae0; background: #e3eefb; }
    .vab-pos[data-pos="v"]   { color: #e05c2a; background: #fde8df; }
    .vab-pos[data-pos="adj"] { color: #7c3aed; background: #ede4fb; }
    .vab-pos[data-pos="adv"] { color: #27ae72; background: #d9f1e5; }
    .vab-meaning {
      position: relative; z-index: 2;
      font-family: 'Lora', serif;
      font-size: clamp(1.5rem, 4.5vw, 2.8rem);
      font-weight: 700; color: #1a1714;
      letter-spacing: -.02em; line-height: 1.1;
      margin: 8px 0 14px;
    }
    .vab-quote {
      position: relative; z-index: 2;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 16px; padding: 14px 16px 12px 48px;
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 20px rgba(26,23,20,.06);
      margin-bottom: 14px;
    }
    .vab-quote-tts {
      position: absolute; top: 14px; left: 14px;
      width: 26px; height: 26px; border-radius: 50%; border: none;
      background: linear-gradient(135deg, #ff7e5f, #feb47b);
      color: #fff; font-size: .75rem; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 8px rgba(255,126,95,.4);
    }
    .vab-quote-en {
      font-family: 'Lora', serif; font-style: italic;
      font-size: .9rem; line-height: 1.55; color: #1a1714; margin: 0;
    }
    .vab-quote-en em {
      font-style: italic; font-weight: 700; color: #ff7e5f;
      background: linear-gradient(transparent 60%, rgba(255,126,95,.2) 60%);
      padding: 0 2px;
    }
    .vab-quote-vi {
      font: 600 .8rem 'Nunito', sans-serif; color: #4a4540;
      margin: 8px 0 0; line-height: 1.5; opacity: .85;
    }
    .vab-actions {
      position: relative; z-index: 2;
      margin-top: auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .vab-btn {
      font: 800 .86rem 'Nunito', sans-serif;
      padding: 12px 16px; border-radius: 12px; cursor: pointer;
      display: inline-flex; align-items: center;
      justify-content: center; gap: 7px;
      transition: transform .1s, box-shadow .1s;
    }
    .vab-btn:hover { transform: translateY(-1px); }
    .vab-btn-known {
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: #fff; border: none;
      box-shadow: 0 5px 14px rgba(22,163,74,.32);
    }
    .vab-btn-known:hover { box-shadow: 0 7px 18px rgba(22,163,74,.42); }
    .vab-btn-unknown {
      background: #fff; color: #e05c2a;
      border: 2px solid #e05c2a;
      box-shadow: 0 3px 10px rgba(224,92,42,.12);
    }
    .vab-btn-unknown:hover { background: #fde8df; }
    .vab-flip {
      position: absolute; bottom: 8px; left: 50%;
      transform: translateX(-50%);
      font: 700 .7rem 'Nunito', sans-serif;
      color: #4a4540; opacity: .45; z-index: 2;
      white-space: nowrap; pointer-events: none;
    }
    .vocab-flash-word {
      font-family: 'Lora', serif; font-size: 2.2rem; font-weight: 800;
      color: #78350f; background: #fef08a;
      border: 2px solid #ca8a04; border-radius: 999px;
      padding: 6px 28px; line-height: 1.5;
      text-align: center;
    }
    .vocab-flash-ipa {
      font-size: .95rem; color: var(--accent2); margin-top: 8px;
      font-family: 'Nunito', sans-serif;
    }
    .vocab-flash-pos {
      margin-top: 8px;
    }
    .vocab-flash-meaning {
      font-size: 1.15rem; font-weight: 700;
      color: var(--ink); text-align: center;
      font-family: 'Nunito', sans-serif;
      margin-bottom: 10px; width: 100%;
    }
    .vocab-flash-ex {
      width: 100%;
      background: var(--surface2); border-radius: 12px;
      border-left: 3px solid var(--accent2);
      padding: 10px 14px;
      font-size: .84rem; color: var(--ink2);
      font-style: italic; line-height: 1.6;
      font-family: 'Lora', serif;
    }
    .vocab-flash-ex-vi {
      font-size: .78rem; color: var(--muted);
      margin-top: 5px; font-style: normal;
      font-family: 'Nunito', sans-serif;
    }
    .vocab-flash-speak-ex {
      background: none; border: none; cursor: pointer;
      font-size: 1rem; padding: 0 4px 0 0;
      color: var(--accent2); flex-shrink: 0;
      vertical-align: middle;
    }
    .vocab-flash-hint {
      font-size: .75rem; color: rgba(255,255,255,.5);
      font-family: 'Nunito', sans-serif; font-weight: 600;
      text-align: center;
    }
    .vocab-flash-status-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      width: 100%; max-width: 380px;
    }
    .vocab-flash-nav {
      display: flex; align-items: center; gap: 10px;
    }
    .vocab-flash-nav-btn {
      padding: 8px 20px; border-radius: 999px;
      border: 1.5px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.12); color: #fff;
      font-family: 'Nunito', sans-serif; font-size: .88rem;
      font-weight: 800; cursor: pointer;
      transition: background .15s;
    }
    .vocab-flash-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.22); }
    .vocab-flash-nav-btn:disabled { opacity: .35; cursor: default; }
    .vocab-flash-dots { display: flex; gap: 5px; align-items: center; }
    .vocab-flash-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255,255,255,.25); transition: background .2s;
    }
    .vocab-flash-dot.active { background: #fff; }
    /* Flash summary */
    .flash-summary { display:flex; flex-direction:column; align-items:center; gap:12px; width:min(500px,90vw); padding:4px 0 8px; }
    .flash-sum-stats { display:flex; align-items:center; gap:0; background:rgba(255,255,255,.1); border-radius:16px; overflow:hidden; }
    .flash-sum-stat { display:flex; flex-direction:column; align-items:center; padding:14px 32px; }
    .flash-sum-stat.known .flash-sum-num { color:#4ade80; }
    .flash-sum-stat.unknown .flash-sum-num { color:#f87171; }
    .flash-sum-num { font-size:2rem; font-weight:900; line-height:1; font-family:'Nunito',sans-serif; }
    .flash-sum-lbl { font-size:.65rem; font-weight:700; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }
    .flash-sum-divider { width:1px; height:40px; background:rgba(255,255,255,.15); }
    .flash-sum-section-label { font-size:.68rem; font-weight:800; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.08em; align-self:flex-start; }
    .flash-sum-list { width:100%; max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
    .flash-sum-word { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border-radius:10px; padding:8px 12px; }
    .flash-sum-tts { background:rgba(255,255,255,.12); border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
    .flash-sum-tts:hover { background:rgba(255,255,255,.25); }
    .flash-sum-w { font-weight:800; color:#fff; font-size:.92rem; flex-shrink:0; }
    .flash-sum-m { font-size:.78rem; color:rgba(255,255,255,.5); margin-left:auto; font-style:italic; }
    .flash-sum-restart { padding:9px 28px; border-radius:999px; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; font-family:'Nunito',sans-serif; font-size:.82rem; font-weight:800; cursor:pointer; transition:background .15s; margin-top:4px; }
    .flash-sum-restart:hover { background:rgba(255,255,255,.2); }
    .vocab-flash-status-row {
      display: flex; gap: 8px; justify-content: center;
    }
    .vocab-flash-status-btn {
      flex: 1; padding: 7px 0; border-radius: 999px;
      border: 1.5px solid; font-family: 'Nunito', sans-serif;
      font-size: .82rem; font-weight: 800; cursor: pointer;
      transition: all .15s;
    }
    .vocab-flash-known {
      border-color: #bbf7d0; background: transparent; color: #16a34a;
    }
    .vocab-flash-known.active {
      background: #16a34a; border-color: #16a34a; color: #fff;
    }
    .vocab-flash-unknown {
      border-color: #fecaca; background: transparent; color: #dc2626;
    }
    .vocab-flash-unknown.active {
      background: #dc2626; border-color: #dc2626; color: #fff;
    }
    .vocab-flash-launch-btn { background: var(--blue-soft) !important; color: var(--accent2) !important; }

    .slide-autonext-track {
      width: 36px; height: 20px; border-radius: 999px;
      background: var(--border); position: relative;
      transition: background .2s; flex-shrink: 0; display: inline-block;
    }
    .slide-autonext-track::after {
      content: ''; position: absolute;
      width: 14px; height: 14px; border-radius: 50%;
      background: #fff; top: 3px; left: 3px;
      transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .slide-autonext-track.on { background: var(--accent3); }
    .slide-autonext-track.on::after { transform: translateX(16px); }

    .vocab-slide-mic-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 20px; border-radius: 999px;
      border: 1.5px solid var(--accent2); background: var(--blue-soft);
      color: var(--accent2); font-family: 'Nunito', sans-serif;
      font-size: .82rem; font-weight: 800; cursor: pointer; transition: all .15s;
    }
    .vocab-slide-mic-btn:hover { background: var(--accent2); color: #fff; }
    .vocab-slide-mic-btn.recording {
      background: #fee2e2; border-color: #ef4444; color: #ef4444;
      animation: slideMicPulse 1s ease-in-out infinite;
    }
    @keyframes slideMicPulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)} 50%{box-shadow:0 0 0 8px rgba(239,68,68,0)} }
    .vocab-slide-pron-result {
      display: none; margin-top: 10px;
      font-family: 'Nunito', sans-serif; font-size: .88rem; font-weight: 700;
    }
    .slide-pron-ok   { color: #16a34a; }
    .slide-pron-warn { color: #d97706; }
    .slide-pron-err  { color: #dc2626; }
    .slide-pron-listening { color: var(--muted); }
    .vocab-slide-nav-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 8px 18px; border-radius: 999px;
      border: 1.5px solid var(--border); background: var(--surface2);
      font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 800;
      color: var(--ink2); cursor: pointer; transition: all .15s;
    }
    .vocab-slide-nav-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
    .vocab-slide-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

    /* ── Quiz modal ── */
    .vocab-quiz-overlay {
      z-index: 200 !important;
      background: linear-gradient(135deg, #c7d2fe 0%, #fbcfe8 50%, #fef3c7 100%);
    }
    /* ── Question Card (qc-) ── */
    .qc-card { width: min(900px,96vw); position: relative; border-radius: 28px; background: #fff; box-shadow: 0 30px 80px -24px rgba(15,23,42,.3); font-family: 'Nunito',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #0f172a; overflow: hidden; }
    .qc-top { display: flex; align-items: center; gap: 12px; padding: 20px 26px; border-bottom: 1px solid #eef0f5; }
    .qc-counter { font-size: 13px; font-weight: 800; color: #475569; font-variant-numeric: tabular-nums; background: #f1f5f9; padding: 6px 13px; border-radius: 999px; }
    .qc-counter__total { opacity: .5; font-weight: 600; }
    .qc-progress { flex: 1; height: 8px; background: #eef0f5; border-radius: 999px; overflow: hidden; }
    .qc-progress__bar { height: 100%; background: linear-gradient(90deg,#6d28d9 0%,#7c3aed 100%); border-radius: 999px; transition: width .35s cubic-bezier(.2,.8,.2,1); }
    .qc-score { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: #16a34a; background: #dcfce7; padding: 6px 13px; border-radius: 999px; }
    .qc-close { width: 38px; height: 38px; border: none; background: #f1f5f9; border-radius: 999px; cursor: pointer; color: #64748b; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; font-size: 1.3rem; }
    .qc-close:hover { background: #e2e8f0; }
    .qc-prompt { padding: 30px 48px 6px; }
    .qc-meaning-wrap { text-align: center; padding: 28px 40px 12px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
    .qc-meaning-label { display: inline-block; font-size: .92rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a78bfa; border: 1px solid rgba(167,139,250,.35); padding: 7px 22px; border-radius: 999px; }
    .qc-meaning-text { font-size: 44px; font-weight: 900; color: #1e293b; line-height: 1.2; letter-spacing: -.02em; }
    .qc-prompt__text { margin: 0; font-size: 34px; line-height: 1.6; color: #1e293b; text-align: center; font-weight: 800; letter-spacing: -.01em; }
    .qc-q { color: #c7d2fe; font-size: 1.4em; font-weight: 900; vertical-align: -.18em; margin: 0 4px; }
    .qc-blank { display: inline-block; background: #f5f3ff; border-radius: 6px; padding: 0 14px; margin: 0 6px; color: #a78bfa; font-weight: 800; user-select: none; letter-spacing: .08em; }
    .qc-blank.is-correct { background: #d1fae5; color: #065f46; }
    .qc-blank.is-wrong { background: #fecaca; color: #7f1d1d; }
    .qc-hint-box { display: inline-flex; align-items: center; gap: 10px; background: #f1f5f9; border-radius: 14px; padding: 11px 22px; font-size: .98rem; color: #64748b; font-weight: 600; line-height: 1.5; max-width: 84%; }
    .qc-hint-arrow { color: #7c3aed; font-weight: 900; }
    .qc-hint-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #fde68a; background: #fffbeb; color: #b45309; border-radius: 999px; padding: 8px 18px; font-size: .92rem; font-weight: 800; font-family: 'Nunito', sans-serif; cursor: pointer; transition: background .15s; }
    .qc-hint-toggle:hover { background: #fef3c7; }
    .qc-choices { padding: 22px 32px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .qc-choice { display: flex; align-items: center; gap: 14px; padding: 17px 20px; border-radius: 16px; border: 1.5px solid #eef0f5; background: #fff; color: #1e293b; font-size: 1.02rem; font-weight: 700; cursor: pointer; text-align: left; font-family: inherit; box-shadow: 0 2px 8px rgba(15,23,42,.04); transition: transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s; }
    .qc-choice:hover:not(:disabled) { border-color: #c4b5fd; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(124,58,237,.25); }
    .qc-choice:active:not(:disabled) { transform: translateY(0); }
    .qc-choice:disabled { cursor: default; }
    .qc-choice__txt { flex: 1; }
    .qc-choice.is-correct { background: #f0fdf5; border-color: #6ee7b7; color: #065f46; }
    .qc-choice.is-correct::after { content: '✓'; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #22c55e; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 900; }
    .qc-choice.is-wrong { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
    .qc-choice.is-wrong::after { content: '✕'; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #ef4444; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; font-weight: 900; }
    .qc-choice.is-muted { color: #94a3b8; opacity: .75; }
    .qc-choice__kbd { width: 38px; height: 38px; border-radius: 50%; background: #ede9fe; color: #7c3aed; display: inline-flex; align-items: center; justify-content: center; font-size: 1.02rem; font-weight: 900; font-family: inherit; flex: 0 0 auto; transition: background .15s,color .15s; }
    .qc-choice.is-correct .qc-choice__kbd { background: #bbf7d0; color: #15803d; }
    .qc-choice.is-wrong   .qc-choice__kbd { background: #fecaca; color: #dc2626; }
    .qc-choice.is-muted   .qc-choice__kbd { background: #f1f5f9; color: #94a3b8; }
    .qc-footer { padding: 14px 24px; border-top: 1px solid rgba(15,23,42,.06); display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.4); flex-wrap: wrap; }
    .qc-footer__label { font-size: 13px; color: #475569; flex: 1; }
    .qc-skip { padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(15,23,42,.1); background: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; transition: background .15s; }
    .qc-skip:hover { background: rgba(255,255,255,.95); }
    .qc-toggle { width: 36px; height: 20px; border-radius: 999px; border: none; padding: 0; background: #d4d4d8; position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto; }
    .qc-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
    .qc-toggle.is-on { background: #a855f7; }
    .qc-toggle.is-on::after { left: 18px; }
    .qc-font-ctrl { display: flex; align-items: center; gap: 4px; }
    .qc-fc-btn { padding: 4px 8px; border-radius: 7px; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; color: #475569; cursor: pointer; transition: background .15s, border-color .15s, color .15s; line-height: 1; }
    .qc-fc-btn:hover { background: rgba(255,255,255,.95); border-color: rgba(15,23,42,.2); }
    .qc-fc-font.active { background: #ede9fe; border-color: #a855f7; color: #7c3aed; }
    .qc-fc-sep { width: 1px; height: 16px; background: rgba(15,23,42,.1); margin: 0 2px; }
    .qc-next { padding: 11px 26px; border-radius: 14px; border: none; background: linear-gradient(135deg,#7c3aed,#6d28d9); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 16px -4px rgba(124,58,237,.5); transition: filter .15s, transform .15s; }
    .qc-next:hover { filter: brightness(1.06); transform: translateY(-1px); }
    .vocab-quiz-feedback { padding: 10px 24px 4px; font-size: 1rem; }
    .qc-fb { display: flex; align-items: center; gap: 16px; margin: 8px 32px 14px; padding: 16px 22px; border-radius: 18px; font-size: 1rem; line-height: 1.5; }
    .qc-fb.is-ok { background: #ecfdf5; border: 1px solid #a7f3d0; }
    .qc-fb.is-err { background: #fef2f2; border: 1px solid #fecaca; }
    .qc-fb-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 900; color: #fff; }
    .qc-fb-ic-ok { background: #22c55e; }
    .qc-fb-ic-err { background: #ef4444; }
    .qc-fb-body { flex: 1; }
    .qc-fb .quiz-fb-ok { color: #15803d; font-weight: 800; }
    .qc-fb .quiz-fb-err { color: #dc2626; font-weight: 800; }
    .qc-fb .quiz-fb-meaning { color: #b45309; font-weight: 700; }
    .qc-fb .quiz-fb-def { color: #475569; }
    @media (max-width:640px) { .qc-prompt { padding: 24px 22px 8px; } .qc-prompt__text { font-size: 21px; } .qc-blank { padding: 0 10px; } .qc-choices { grid-template-columns: 1fr; padding: 18px 16px 12px; gap: 12px; } .qc-choice { padding: 16px 16px; } .qc-footer { padding: 12px 16px; } .qc-meaning-text { font-size: 28px; } .qc-hint-box { max-width: 100%; font-size: .95rem; padding: 12px 18px; } }
    .vocab-quiz-box {
      width: min(860px, 94vw);
      max-height: 94vh;
      background: var(--surface);
      border-radius: 22px;
      box-shadow: 0 28px 72px rgba(26,23,20,.28);
      display: flex; flex-direction: column;
      overflow: hidden;
      animation: popIn .3s cubic-bezier(.34,1.56,.64,1);
    }
    .vocab-quiz-header {
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 10px;
      flex-shrink: 0;
    }
    .vocab-quiz-progress-wrap {
      flex: 1; display: flex; align-items: center; gap: 10px;
    }
    .vocab-quiz-counter {
      font-size: .78rem; font-weight: 800; color: var(--muted);
      white-space: nowrap;
    }
    .vocab-quiz-bar-track {
      flex: 1; height: 7px; background: var(--border);
      border-radius: 99px; overflow: hidden;
    }
    .vocab-quiz-bar-fill {
      height: 100%; background: var(--accent2);
      border-radius: 99px; transition: width .35s ease;
      width: 0%;
    }
    .vocab-quiz-score-badge {
      font-size: .78rem; font-weight: 900; color: var(--accent2);
      white-space: nowrap;
    }
    .vocab-quiz-close {
      background: none; border: none; cursor: pointer;
      font-size: 1.4rem; color: var(--muted); line-height: 1;
      padding: 0 2px; transition: color .15s;
    }
    .vocab-quiz-close:hover { color: var(--ink); }
    .vocab-quiz-body {
      padding: 36px 44px 24px;
      display: flex; flex-direction: column; gap: 22px;
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
    }
    .vocab-quiz-sentence {
      font-family: 'Lora', serif;
      font-size: 1.6rem; line-height: 1.8;
      color: var(--ink); text-align: center;
      min-height: 80px;
    }
    .quiz-blank {
      display: inline-block;
      border-bottom: 2.5px solid var(--accent2);
      min-width: 84px; color: transparent;
      letter-spacing: 2px;
    }
    .vocab-quiz-hint {
      font-size: 1.05rem; color: var(--muted);
      text-align: center; font-style: italic;
      line-height: 1.6;
    }
    .vocab-quiz-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .vocab-quiz-opt {
      padding: 20px 16px;
      border-radius: 16px;
      border: 2px solid var(--border);
      background: var(--surface2);
      font-family: 'Lora', serif;
      font-size: 1.2rem; font-weight: 600;
      color: var(--ink); cursor: pointer;
      transition: all .15s;
    }
    .vocab-quiz-opt:hover:not(:disabled) {
      border-color: var(--accent2);
      background: var(--blue-soft);
    }
    .vocab-quiz-opt.correct {
      border-color: #38a169; background: rgba(56,161,105,.12);
      color: #276749; font-weight: 800;
    }
    .vocab-quiz-opt.wrong {
      border-color: #e53e3e; background: rgba(229,62,62,.1);
      color: #c53030;
    }
    .vocab-quiz-feedback {
      text-align: center; font-size: 1rem;
      font-family: inherit; font-weight: 700;
      padding: 10px 16px; border-radius: 10px;
      background: var(--surface2);
    }
    .quiz-fb-ok { color: #276749; font-size: 1.1rem; }
    .quiz-fb-err { color: #c53030; font-size: 1.1rem; }
    .quiz-fb-def { color: var(--ink2); font-weight: 600; font-size: 1.1rem; }
    .quiz-fb-meaning { color: #276749; font-weight: 700; font-size: 1.1rem; }
    .vocab-quiz-footer {
      padding: 12px 28px 22px;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      flex-shrink: 0; border-top: 1px solid var(--border); background: var(--surface);
    }
    @media (max-width: 640px) {
      .vocab-quiz-box { width: 96vw; max-height: 92vh; }
      .vocab-quiz-body { padding: 20px 16px 14px; gap: 14px; }
      .vocab-quiz-footer { padding: 10px 16px 14px; }
      .endef-word-card { padding: 4px 0 12px; }
    }
    .quiz-auto-label {
      display: flex; align-items: center; gap: 8px;
      font-family: 'Nunito', sans-serif;
      font-size: .75rem; font-weight: 700; color: var(--muted);
      cursor: pointer; user-select: none;
    }
    .quiz-auto-track {
      width: 36px; height: 20px; border-radius: 999px;
      background: var(--border); position: relative;
      transition: background .2s; cursor: pointer; flex-shrink: 0;
    }
    .quiz-auto-track.on { background: var(--accent2); }
    .quiz-auto-thumb {
      position: absolute; top: 3px; left: 3px;
      width: 14px; height: 14px; border-radius: 50%;
      background: #fff; transition: left .2s;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .quiz-auto-track.on .quiz-auto-thumb { left: 19px; }
    .vocab-quiz-next-btn {
      padding: 11px 36px; border-radius: 999px;
      border: none; background: var(--accent2); color: #fff;
      font-family: 'Nunito', sans-serif;
      font-size: .92rem; font-weight: 900;
      cursor: pointer; transition: opacity .15s;
    }
    .vocab-quiz-next-btn:hover { opacity: .85; }
    .quiz-retry-wrong-btn { background: var(--accent) !important; font-size: .82rem !important; }
    /* ── Wrong word review list ── */
    .quiz-wrong-review {
      margin-top: 14px;
      padding: 12px 14px;
      background: #fff5f5;
      border: 1px solid #fed7d7;
      border-radius: 14px;
    }
    .qwr-title {
      font-family: 'Nunito', sans-serif;
      font-size: .72rem; font-weight: 900;
      color: #c53030; text-transform: uppercase;
      letter-spacing: .05em; margin-bottom: 10px;
    }
    .qwr-list {
      display: flex; flex-direction: column; gap: 7px;
    }
    .qwr-chip {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 12px; border-radius: 10px;
      background: #fff; border: 1px solid #fed7d7;
      cursor: pointer; transition: background .15s, border-color .15s;
      flex-wrap: wrap;
    }
    .qwr-chip:hover { background: #fff0f0; border-color: #fc8181; }
    .qwr-word {
      font-family: 'Lora', serif;
      font-size: .95rem; font-weight: 700;
      color: #c53030; min-width: 90px;
    }
    .qwr-ipa {
      font-family: 'Nunito', sans-serif;
      font-size: .75rem; color: var(--accent2);
      font-style: italic; flex-shrink: 0;
    }
    .qwr-meaning {
      font-family: 'Nunito', sans-serif;
      font-size: .78rem; color: var(--ink2);
      font-weight: 600; flex: 1; text-align: right;
    }
    .quiz-missed-header {
      font-family: 'Nunito', sans-serif;
      font-size: .78rem; font-weight: 900;
      color: var(--muted); text-transform: uppercase;
      letter-spacing: .05em; margin-bottom: 8px;
    }
    .quiz-missed-list {
      display: flex; flex-direction: column; gap: 7px;
      max-height: 220px; overflow-y: auto;
    }
    .quiz-missed-card {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px;
      background: rgba(229,62,62,.06);
      border: 1.5px solid rgba(229,62,62,.2);
      border-radius: 10px;
    }
    .quiz-missed-speak {
      background: none; border: none; cursor: pointer;
      font-size: .9rem; padding: 0; flex-shrink: 0;
      transition: transform .15s;
    }
    .quiz-missed-speak:hover { transform: scale(1.2); }
    .quiz-missed-info { min-width: 0; flex: 1; }
    .quiz-missed-word {
      font-family: 'Lora', serif;
      font-size: 1rem; font-weight: 700; color: var(--ink);
      margin-right: 6px;
    }
    .quiz-missed-ipa {
      font-size: .72rem; color: var(--muted);
    }
    .quiz-missed-meaning {
      font-size: .8rem; color: var(--ink2);
      margin-top: 2px;
    }
    .quiz-result-perfect {
      text-align: center; font-size: .95rem;
      font-weight: 800; color: #276749;
      padding: 12px; background: rgba(56,161,105,.1);
      border-radius: 10px;
    }

    .vocab-meaning-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      margin-top: 4px;
    }
    .vocab-meaning-edit-btn {
      background: none; border: none; cursor: pointer;
      font-size: .72rem; padding: 0 2px; line-height: 1;
      opacity: 0; transition: opacity .15s;
      flex-shrink: 0;
    }
    .vocab-meaning-row:hover .vocab-meaning-edit-btn { opacity: 1; }
    .vocab-item-star-btn {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      font-size: .95rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
      flex-shrink: 0;
      margin-top: 2px;
      transition: background .15s, color .15s, border-color .15s;
    }
    .vocab-item-star-btn:hover {
      background: #fff8e1;
      border-color: #f59e0b;
      color: #f59e0b;
    }
    .vocab-item-star-btn.starred {
      background: #fff3cd;
      border-color: #f59e0b;
      color: #f59e0b;
    }
    .vocab-item-expand-btn, .vocab-item-del-btn {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: none;
      cursor: pointer;
      font-size: .95rem;
      color: var(--muted);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      transition: all .15s;
      line-height: 1;
      padding: 0;
    }
    .vocab-item-expand-btn:hover {
      background: var(--blue-soft);
      border-color: var(--accent2);
      color: var(--accent2);
    }
    /* phrase drag-select highlight */
    .tp-word-container.phrase-selecting .tp-word,
    .tp-word-container.phrase-selecting .tp-ipa {
      color: #fff !important;
    }
    .tp-word-container.phrase-selecting {
      background: rgba(99,102,241,.75);
      border-radius: 3px;
      box-shadow: 11px 0 0 rgba(99,102,241,.75), -11px 0 0 rgba(99,102,241,.75);
    }
    .yt-word.phrase-selecting {
      background: rgba(99,102,241,.18);
      border-radius: 4px;
      outline: 2px solid rgba(99,102,241,.45);
    }

    .vocab-item-slide-btn {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(124,58,237,.35);
      background: none;
      cursor: pointer;
      font-size: .85rem;
      color: #7c3aed;
      display: flex; align-items: center; justify-content: center;
      padding: 0; transition: background .15s, border-color .15s;
    }
    .vocab-item-slide-btn:hover {
      background: rgba(124,58,237,.1);
      border-color: #7c3aed;
    }
    .vocab-item-del-btn {
      border-color: rgba(229,62,62,.35);
      color: #e53e3e;
      font-size: 1.1rem;
    }
    .vocab-item-del-btn:hover {
      background: rgba(229,62,62,.12);
      border-color: #e53e3e;
    }
    .vocab-list-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px 14px;
    }
    @media (max-width: 1024px) { .vocab-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px)  { .vocab-list-grid { grid-template-columns: 1fr; } }
    /* ── Gộp các nút test vào 1 nút "Test" trên mobile ── */
    .vocab-test-toggle { display: none; }       /* desktop: ẩn nút Test */
    .vocab-test-group { display: contents; }    /* desktop: các nút nằm inline như cũ */
    @media (max-width: 640px) {
      .vocab-test-toggle { display: inline-flex; }
      .vocab-test-group {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 8px; right: 8px;
        z-index: 60;
        flex-direction: column;
        gap: 6px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 8px 26px rgba(0,0,0,.18);
        padding: 10px;
        max-height: 60vh;
        overflow-y: auto;
      }
      .vocab-test-group.open { display: flex; }
      .vocab-test-group > button { width: 100%; justify-content: flex-start; }
    }
    /* ── Vocab practice badge ── */
    .vocab-practice-badge {
      display: inline-block;
      margin-top: 4px;
      padding: 2px 9px;
      border-radius: 999px;
      font-size: .63rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      background: #d1fae5;
      color: #065f46;
      border: 1px solid rgba(16,185,129,.3);
    }
    .vocab-practice-badge--zero {
      background: var(--surface2);
      color: var(--muted);
      border-color: var(--border);
    }
    /* ── Mastery badge ── */
    .vocab-mastery-badge {
      display: inline-block;
      margin-top: 4px;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: .63rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      border: 1px solid transparent;
    }
    .vocab-mastery--new    { background: var(--surface2); color: var(--muted); border-color: var(--border); }
    .vocab-mastery--learning { background: #fef9c3; color: #92400e; border-color: #f59e0b; }
    .vocab-mastery--known  { background: #d1fae5; color: #065f46; border-color: rgba(16,185,129,.4); }
    /* ── Mastery progress bar (dots) ── */
    .vocab-img-del { opacity: 0; transition: opacity .15s; }
    .vocab-img-wrap:hover .vocab-img-del { opacity: 1; }
    .vocab-mastery-bar {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 10px;
      padding: 7px 10px;
      border-radius: 10px;
      background: var(--surface2);
    }
    .vmd {
      width: 11px; height: 11px;
      border-radius: 50%;
      background: var(--border);
      border: 1.5px solid var(--border);
      flex-shrink: 0;
      transition: background .2s, border-color .2s;
    }
    .vmd-filled { background: #f59e0b; border-color: #d97706; }
    .vmd-filled.vmd-done { background: #22c55e; border-color: #16a34a; }
    .vocab-mastery-hint {
      font-size: .68rem;
      font-weight: 700;
      color: var(--muted);
      font-family: 'Nunito', sans-serif;
      flex: 1;
    }
    .vocab-mastery-reset-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: .8rem;
      color: var(--muted);
      padding: 0 2px;
      line-height: 1;
      opacity: .6;
      transition: opacity .15s;
    }
    .vocab-mastery-reset-btn:hover { opacity: 1; color: #dc2626; }
    /* ── Slideshow mastery row ── */
    .slide-mastery-row {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-right: 6px;
    }
    .slide-mastery-label {
      font-size: .68rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      color: var(--muted);
      white-space: nowrap;
    }
    .slide-mastery-pop {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      margin-left: 4px;
      vertical-align: middle;
    }
    .slide-mastery--learning { background: #fef9c3; color: #92400e; border: 1px solid #f59e0b; }
    .slide-mastery--known    { background: #d1fae5; color: #065f46; border: 1px solid rgba(16,185,129,.4); }
    /* ── Vocab folder button ── */
    .vocab-item-folder-btn { width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:var(--surface2); cursor:pointer; font-size:.75rem; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; padding:0; }
    .vocab-item-folder-btn:hover { background:#e0f2fe; border-color:#0ea5e9; }
    .vocab-item-mastered-btn { width:26px; height:26px; border-radius:6px; border:1.5px solid #d1d5db; background:var(--surface2); cursor:pointer; font-size:.75rem; font-weight:900; color:#9ca3af; display:flex; align-items:center; justify-content:center; transition:all .15s; padding:0; }
    .vocab-item-mastered-btn:hover { background:#dcfce7; border-color:#16a34a; color:#16a34a; }
    .vocab-item-mastered-btn.is-mastered { background:#dcfce7; border-color:#16a34a; color:#16a34a; }
    /* ── Vocab camera button ── */
    .vocab-item-img-btn {
      width: 26px; height: 26px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface2);
      cursor: pointer;
      font-size: .85rem;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, border-color .15s;
      padding: 0;
    }
    .vocab-item-img-btn:hover,
    .vocab-item-img-btn.has-img { background: #fef9c3; border-color: #f59e0b; }
    /* ── Vocab image modal ── */
    .vocab-img-paste-zone {
      border: 2px dashed var(--accent2);
      border-radius: 14px;
      padding: 22px 16px 18px;
      text-align: center;
      cursor: pointer;
      background: var(--blue-soft);
      transition: background .15s, border-color .15s;
      outline: none;
    }
    .vocab-img-paste-zone:focus,
    .vocab-img-paste-zone:hover { background: rgba(42,122,224,.1); border-color: var(--accent); }
    .vocab-img-paste-text {
      font-size: .9rem; font-weight: 700; color: var(--accent2); margin-bottom: 4px;
    }
    .vocab-img-paste-hint {
      font-size: .72rem; color: var(--muted); line-height: 1.4;
    }
    .vocab-img-google-btn {
      display: block; width: 100%;
      padding: 10px 0;
      border-radius: 10px;
      border: 1.5px solid var(--accent2);
      background: var(--blue-soft);
      color: var(--accent2);
      font-family: 'Nunito', sans-serif;
      font-size: .82rem; font-weight: 800;
      cursor: pointer;
      transition: background .15s;
    }
    .vocab-img-google-btn:hover { background: rgba(42,122,224,.18); }
    .vocab-img-file-btn {
      padding: 8px 14px; border-radius: 10px;
      border: 1.5px solid var(--border);
      background: var(--surface2);
      font-family: 'Nunito', sans-serif;
      font-size: .78rem; font-weight: 700;
      cursor: pointer; transition: background .15s;
    }
    .vocab-img-file-btn:hover { background: var(--border); }
    .vocab-img-cancel-btn {
      padding: 8px 14px; border-radius: 10px;
      border: 1.5px solid #fca5a5;
      background: #fff1f2;
      color: #b91c1c;
      font-family: 'Nunito', sans-serif;
      font-size: .78rem; font-weight: 700;
      cursor: pointer; transition: background .15s;
    }
    .vocab-img-cancel-btn:hover { background: #fee2e2; }

    .vocab-list-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      break-inside: avoid;
    }
    /* ── Redesigned saved-word card ── */
    .vocab-list-item.vw-card { position: relative; display: block; padding: 16px 16px 14px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); box-shadow: 0 2px 10px rgba(15,23,42,.05); }
    .vw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
    .vw-lv { display: flex; align-items: center; gap: 8px; }
    .vw-lv:not(:empty) { margin-bottom: 10px; }
    .vw-lv-name { font-size: .76rem; font-weight: 800; color: #16a34a; background: #dcfce7; border-radius: 999px; padding: 3px 11px; }
    .vw-x { position: absolute; top: 12px; right: 12px; z-index: 1; border: none; background: #fee2e2; color: #dc2626; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .vw-x:hover { background: #fecaca; }
    .vw-word-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
    .vw-word { font-family: 'Lora', serif; font-size: 1.85rem; font-weight: 800; color: #5b21b6; background: linear-gradient(135deg, #ede9fe, #fae8ff); border-radius: 14px; padding: 6px 22px; cursor: pointer; line-height: 1.2; }
    .vw-speak { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: none; background: linear-gradient(135deg, #34d399, #10b981); color: #fff; cursor: pointer; font-size: 1rem; box-shadow: 0 3px 10px rgba(16,185,129,.35); }
    .vw-speak:hover { filter: brightness(1.07); }
    .vw-ipa { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 8px; }
    .vw-meaning { text-align: center; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
    .vw-pos { font-size: .72rem; font-weight: 700; color: #c2410c; background: #ffedd5; border-radius: 999px; padding: 2px 10px; }
    .vw-meaning-txt { font-size: 1rem; font-weight: 700; color: var(--ink); }
    .vw-def { text-align: center; margin-top: 6px; font-size: .82rem; line-height: 1.45; color: var(--ink2, #475569); font-family: 'Lora', serif; }
    /* ── Căn lề trái cho toàn bộ thẻ từ (toggle của user) ── */
    .vw-align-left .vw-word-row { justify-content: flex-start; }
    .vw-align-left .vw-ipa { text-align: left; }
    .vw-align-left .vw-meaning { justify-content: flex-start; text-align: left; }
    .vw-align-left .vw-def { text-align: left; }
    .vw-align-left .vw-actions { justify-content: flex-start; }
    .vw-ex-box { margin-top: 12px; background: var(--surface2, #f6f7fb); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
    .vw-ex-lbl { font-size: .68rem; font-weight: 800; letter-spacing: .05em; color: #7c3aed; margin-bottom: 6px; }
    .vw-add-ex { margin-top: 10px; width: 100%; }
    .vw-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
    .vw-mastery { width: 100%; min-width: 0; }
    .vw-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
    .vw-act { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
    .vw-act:hover { background: var(--surface2, #f1f5f9); }
    .vw-act-star { color: #f59e0b; } .vw-act-star.starred { background: #fef3c7; border-color: #f59e0b; }
    .vw-act-check { color: #16a34a; } .vw-act-check.is-mastered { background: #dcfce7; border-color: #16a34a; }
    .vw-act-search { color: #2563eb; }
    .vw-act-folder { color: #7c3aed; }
    .vw-act-slide { color: #0891b2; }
    .vw-act-img { color: #db2777; } .vw-act-img.has-img { background: #fce7f3; border-color: #db2777; }
    /* Menu chọn in PDF: tất cả / chỉ từ đánh dấu sao */
    .vocab-pdf-menu { position: fixed; z-index: 100000; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 210px; }
    .vocab-pdf-menu button { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 7px; padding: 9px 12px; font-size: .85rem; font-weight: 600; color: #1f2937; cursor: pointer; font-family: inherit; white-space: nowrap; }
    .vocab-pdf-menu button:hover { background: #f3f4f6; }
    .vocab-pdf-menu .vp-menu-lbl { font-size: .72rem; font-weight: 800; color: #6b7280; padding: 6px 12px 2px; text-transform: uppercase; letter-spacing: .03em; }
    .vocab-pdf-menu .vp-menu-sep { height: 1px; background: #e5e7eb; margin: 4px 6px; }
    .vocab-pdf-menu .vp-menu-chk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: .82rem; font-weight: 600; color: #1f2937; cursor: pointer; user-select: none; }
    .vocab-pdf-menu .vp-menu-chk input { width: 15px; height: 15px; cursor: pointer; accent-color: #7c3aed; }
    .vocab-pdf-menu button { padding-left: 22px; }
    /* Modal Luyện dịch VI→EN (Saved Words) */
    .vct-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 100001; display: none; align-items: center; justify-content: center; padding: 16px; }
    .vct-overlay.active { display: flex; }
    .vct-box { background: #fff; border-radius: 22px; box-shadow: 0 24px 64px rgba(15,23,42,.32); width: 100%; max-width: 460px; padding: 26px 26px 18px; position: relative; max-height: 92vh; overflow-y: auto; }
    .vct-close { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; border: none; font-size: 1.3rem; line-height: 1; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
    .vct-close:hover { background: #e2e8f0; color: #1e293b; }
    .vct-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
    .vct-head-ic { flex: none; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, #ede9fe, #ddd6fe); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }
    .vct-head-title { font-family: 'Lora', Georgia, serif; font-size: 1.7rem; font-weight: 800; color: #1e293b; line-height: 1.15; }
    .vct-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .vct-sub { font-size: 1rem; color: #64748b; line-height: 1.5; margin: 14px 0 18px; }
    .vct-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 6px; font-size: .85rem; color: #94a3b8; font-weight: 600; }
    .vct-quota { font-size: .85rem; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; }
    .vct-quota b { color: #92400e; }
    .vct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .vct-row label { font-size: .86rem; font-weight: 700; color: #334155; }
    .vct-row select { flex: 0 0 auto; min-width: 130px; padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: .86rem; font-family: inherit; background: #fff; cursor: pointer; }
    .vct-credits { display: flex; align-items: center; gap: 9px; font-size: .98rem; color: #92400e; font-weight: 700; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 13px 16px; margin: 18px 0 16px; }
    .vct-credits b { color: #ea580c; }
    .vct-gen-btn { width: 100%; padding: 16px; border: none; border-radius: 16px; background: linear-gradient(135deg,#7c3aed 0%,#6366f1 100%); color: #fff; font-size: 1.05rem; font-weight: 800; cursor: pointer; font-family: inherit; box-shadow: 0 10px 24px rgba(99,102,241,.32); transition: opacity .15s, transform .1s, box-shadow .15s; }
    .vct-gen-btn:hover { opacity: .96; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(99,102,241,.4); }
    .vct-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
    .vct-or::before, .vct-or::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
    .vct-or span { font-size: .85rem; color: #94a3b8; font-weight: 600; white-space: nowrap; }
    .vct-gpt-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border: 1.5px solid #ddd6fe; border-radius: 16px; background: #fff; color: #4c1d95; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
    .vct-gpt-btn:hover { background: #f5f3ff; border-color: #c4b5fd; }
    .vct-gpt-btn.vct-gpt-btn--ok { background: #ecfdf5; border-color: #6ee7b7; color: #15803d; }
    .vct-gpt-hint { margin-top: 8px; font-size: .8rem; color: #64748b; line-height: 1.45; text-align: center; }
    .vct-gpt-hint b { color: #7c3aed; background: #ede9fe; border-radius: 5px; padding: 1px 6px; font-weight: 800; }
    .vct-paste { margin-top: 12px; }
    .vct-paste-hint { font-size: .8rem; color: #475569; font-weight: 600; margin-bottom: 6px; }
    .vct-paste-ta { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 9px 11px; font-size: .82rem; font-family: inherit; line-height: 1.5; resize: vertical; outline: none; }
    .vct-paste-ta:focus { border-color: #0ea5e9; }
    .vct-start-btn { width: 100%; margin-top: 8px; padding: 11px; border: none; border-radius: 11px; background: #16a34a; color: #fff; font-size: .92rem; font-weight: 800; cursor: pointer; font-family: inherit; transition: opacity .15s, transform .1s; }
    .vct-start-btn:hover { opacity: .9; transform: translateY(-1px); }
    /* Chooser 2 khung */
    .vct-choice { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; margin-top: 14px; padding: 20px 22px; border: 1.5px solid transparent; border-radius: 18px; background: #fff; cursor: pointer; font-family: inherit; transition: box-shadow .15s, transform .12s; }
    .vct-choice--new { background: #f3f1fe; border-color: #e3def9; }
    .vct-choice--new:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(124,110,246,.2); }
    .vct-choice--re { background: #ecfdf5; border-color: #bbf7d0; }
    .vct-choice--re:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16,185,129,.18); }
    .vct-choice-ic { flex: none; width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }
    .vct-choice--new .vct-choice-ic { background: #ede9fe; }
    .vct-choice--re .vct-choice-ic { background: #d1fae5; }
    .vct-choice-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .vct-choice-tt { font-size: 1.25rem; font-weight: 800; color: #1e293b; }
    .vct-choice-sub { font-size: .95rem; color: #64748b; margin-top: 3px; line-height: 1.4; }
    .vct-choice--re .vct-choice-sub { color: #16a34a; font-weight: 700; }
    .vct-choice-arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; }
    .vct-choice--new .vct-choice-arrow { background: #e3def9; color: #7c6ef6; }
    .vct-choice--re .vct-choice-arrow { background: #bbf7d0; color: #16a34a; }
    .vct-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: #7c3aed; font-size: .95rem; font-weight: 800; cursor: pointer; padding: 0 0 6px; font-family: inherit; }
    .vct-back:hover { color: #6d28d9; }
    /* New translation exercise — redesigned create screen */
    .vct-cr-hero { display: flex; align-items: flex-start; gap: 16px; margin: 8px 0 22px; padding-right: 40px; }
    .vct-cr-hero-ic { flex: none; width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg,#ede9fe,#ddd6fe); display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; }
    .vct-cr-hero-tx { flex: 1; min-width: 0; }
    .vct-cr-title { font-size: 1.85rem; font-weight: 800; color: #0f172a; line-height: 1.12; letter-spacing: -.01em; }
    .vct-cr-sub { font-size: 1rem; color: #64748b; line-height: 1.5; margin-top: 8px; }
    .vct-cr-field { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
    .vct-cr-fic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
    .vct-cr-fic--purple { background: #ede9fe; }
    .vct-cr-fic--green { background: #d1fae5; }
    .vct-cr-flabel { flex: 1; min-width: 0; font-size: 1.1rem; font-weight: 800; color: #1e293b; }
    .vct-cr-selwrap { flex: 0 0 auto; position: relative; width: 200px; max-width: 48%; }
    .vct-cr-sel { width: 100%; box-sizing: border-box; appearance: none; -webkit-appearance: none; padding: 14px 42px 14px 16px; border: 1.5px solid #e2e8f0; border-radius: 14px; font-size: 1rem; font-weight: 600; font-family: inherit; color: #1e293b; background: #fff; cursor: pointer; transition: border-color .15s; }
    .vct-cr-sel:focus { outline: none; border-color: #a78bfa; }
    .vct-cr-field:has(.vct-cr-fic--purple) .vct-cr-sel { border-color: #ddd6fe; }
    .vct-cr-field:has(.vct-cr-fic--green) .vct-cr-sel { border-color: #bbf7d0; }
    .vct-cr-selwrap::after { content: ''; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: translateY(-65%) rotate(45deg); pointer-events: none; }
    /* Lịch sử bài đã lưu */
    .vct-hist-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 50vh; overflow-y: auto; }
    .vct-hist-empty { text-align: center; color: #94a3b8; font-size: .85rem; padding: 24px 8px; }
    .vct-hist-item { display: flex; align-items: center; gap: 8px; border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 10px 12px; transition: border-color .15s; }
    .vct-hist-item:hover { border-color: #0ea5e9; }
    .vct-hist-info { flex: 1; min-width: 0; cursor: pointer; }
    .vct-hist-tt { font-size: .86rem; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vct-hist-meta { font-size: .72rem; color: #94a3b8; margin-top: 1px; }
    .vct-hist-play { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none; background: #0d9488; color: #fff; font-size: .85rem; cursor: pointer; }
    .vct-hist-play:hover { background: #0f766e; }
    .vct-hist-del { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: none; background: #f1f5f9; color: #94a3b8; font-size: 1rem; line-height: 1; cursor: pointer; }
    .vct-hist-del:hover { background: #fee2e2; color: #dc2626; }
    .vocab-practice-badge {
      display: inline-block;
      margin-top: 4px;
      padding: 2px 9px;
      border-radius: 999px;
      font-size: .63rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      background: #d1fae5;
      color: #065f46;
      border: 1px solid rgba(16,185,129,.3);
      letter-spacing: .01em;
    }
    .vocab-practice-badge--zero {
      background: var(--surface2);
      color: var(--muted);
      border-color: var(--border);
    }
    .vocab-ex-card {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 7px;
      padding: 8px 10px;
      background: rgba(76, 175, 80, 0.07);
      border: 1.5px solid rgba(76, 175, 80, 0.28);
      border-radius: 10px;
    }
    .vocab-ex-body {
      flex: 1;
      min-width: 0;
    }
    .vocab-ex-en {
      font-family: 'Lora', serif;
      font-size: .82rem;
      color: var(--muted);
      font-style: italic;
      line-height: 1.45;
    }
    .vocab-ex-vi {
      font-family: 'Nunito', sans-serif;
      font-size: .78rem;
      color: var(--ink2);
      margin-top: 3px;
      line-height: 1.4;
    }
    .vocab-ex-no-trans { color: var(--border2); }
    .vocab-ex-btns {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-shrink: 0;
    }
    .vocab-ex-btn {
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      font-size: .8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity .15s, transform .12s;
      padding: 0;
    }
    .vocab-ex-btn:hover { opacity: .78; transform: scale(1.1); }
    .vocab-ex-btn-speak { background: rgba(76, 175, 80, 0.18); }
    .vocab-ex-btn-edit  { background: rgba(255, 193, 7, 0.22); }
    .vocab-ex-btn-del   { background: rgba(229, 62, 62, 0.13); }
    .vocab-ex-row {
      display: flex;
      align-items: flex-start;
      gap: 6px;
    }
    .vocab-ex-actions {
      display: flex;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
      opacity: 0;
      transition: opacity .15s;
      margin-top: 1px;
    }
    .vocab-ex-row:hover .vocab-ex-actions { opacity: 1; }
    .vocab-ctx-blank { display: inline; background: #ddd6fe; color: #ddd6fe; border-bottom: 2px solid #7c3aed; border-radius: 3px 3px 0 0; padding: 1px 10px; margin: 0 2px; user-select: none; cursor: default; }
    .vocab-ex-act-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: .8rem;
      padding: 2px 3px;
      border-radius: 5px;
      line-height: 1;
      color: var(--muted);
      transition: background .12s, color .12s;
    }
    .vocab-ex-act-btn:hover { background: var(--bg2); color: var(--ink); }
    .vocab-ex-del-btn:hover { background: rgba(229,62,62,.1); color: #e53e3e; }

    .vocab-add-ex-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: 1px dashed var(--border2);
      border-radius: var(--radius-pill);
      padding: 3px 10px;
      font-size: .7rem;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      margin-top: 5px;
      transition: all .15s;
      font-family: 'Nunito', sans-serif
    }

    .vocab-status-bar {
      display: flex;
      gap: 6px;
      margin-top: 10px;
    }
    .vocab-status-btn {
      flex: 1;
      padding: 5px 8px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--surface2);
      font-family: 'Nunito', sans-serif;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      color: var(--muted);
    }
    .vocab-status-known:hover   { border-color: #27ae72; color: #27ae72; background: rgba(39,174,114,.08); }
    .vocab-status-learning:hover { border-color: #e53e3e; color: #e53e3e; background: rgba(229,62,62,.08); }
    .vocab-status-known.active   { border-color: #27ae72; color: #fff; background: #27ae72; }
    .vocab-status-learning.active { border-color: #e53e3e; color: #fff; background: #e53e3e; }

    .vocab-add-ex-btn:hover {
      border-color: var(--accent2);
      color: var(--accent2);
      background: var(--blue-soft)
    }

    .vedit-label {
      font-size: .68rem;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .07em;
      display: block;
      margin-bottom: 6px
    }

    .vedit-textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      font-size: .88rem;
      resize: vertical;
      outline: none;
      transition: border-color .2s;
      background: var(--surface2);
      color: var(--ink);
      box-sizing: border-box;
      line-height: 1.55;
    }

    .vedit-textarea:focus {
      border-color: var(--accent2);
      background: var(--surface);
    }

    .vedit-en-textarea {
      font-family: 'Lora', serif
    }

    .vedit-vi-textarea {
      font-family: 'Nunito', sans-serif
    }

    .vedit-select {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      background: var(--surface2);
      color: var(--ink);
      font-size: .88rem;
      font-family: 'Nunito', sans-serif;
      cursor: pointer;
      outline: none;
      transition: border-color .2s, background .2s;
      box-sizing: border-box;
    }
    .vedit-select:focus {
      border-color: var(--accent2);
      background: var(--surface);
    }

    .vedit-input {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      background: var(--surface2);
      color: var(--ink);
      font-size: .88rem;
      font-family: 'Nunito', sans-serif;
      outline: none;
      transition: border-color .2s, background .2s;
      box-sizing: border-box;
    }
    .vedit-input:focus {
      border-color: var(--accent2);
      background: var(--surface);
    }

    .vedit-dict-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 16px;
      border-radius: 10px;
      border: 1.5px solid var(--border2);
      background: var(--surface2);
      font-family: 'Nunito', sans-serif;
      font-size: .78rem;
      font-weight: 700;
      color: var(--ink2);
      cursor: pointer;
      transition: all .15s;
    }
    .vedit-dict-btn:hover {
      border-color: var(--accent2);
      background: var(--blue-soft);
      color: var(--accent2);
    }
    .vedit-dict-chatgpt {
      border-color: #8b5cf6;
      color: #8b5cf6;
      background: rgba(139,92,246,.07);
    }
    .vedit-dict-chatgpt:hover {
      background: rgba(139,92,246,.15);
      border-color: #7c3aed;
      color: #7c3aed;
    }

    .btn-auto-translate {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--accent2);
      background: var(--blue-soft);
      font-family: 'Nunito', sans-serif;
      font-size: .75rem;
      font-weight: 800;
      color: var(--accent2);
      cursor: pointer;
      transition: all .18s;
      margin-top: 5px
    }

    .btn-auto-translate:hover {
      background: var(--accent2);
      color: #fff
    }

    .btn-auto-translate:disabled {
      opacity: .5;
      cursor: not-allowed
    }

    .grammar-feedback {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .grammar-ok {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .72rem;
      font-weight: 700;
      color: var(--accent3);
      padding: 4px 10px;
      background: rgba(39, 174, 114, .08);
      border-radius: var(--radius-pill);
      border: 1px solid rgba(39, 174, 114, .2)
    }

    .grammar-checking {
      font-size: .72rem;
      color: var(--muted);
      font-style: italic
    }

    .grammar-err {
      background: rgba(229, 62, 62, .06);
      border: 1px solid rgba(229, 62, 62, .2);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: .75rem
    }

    .grammar-err-header {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 3px
    }

    .grammar-err-label {
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 2px 7px;
      border-radius: var(--radius-pill)
    }

    .grammar-err-match {
      font-family: 'Lora', serif;
      color: var(--ink2)
    }

    .grammar-err-arrow {
      color: var(--muted)
    }

    .grammar-err-fix {
      font-family: 'Lora', serif;
      color: var(--accent3);
      font-weight: 600
    }

    .grammar-err-desc {
      color: var(--muted);
      font-size: .7rem;
      line-height: 1.45;
      margin-top: 3px
    }

    /* ── STEP NUDGE ── */
    @keyframes vs-nudge-tip-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
    .vs-step-nudge {
      background: linear-gradient(90deg, #2563eb, #4f46e5);
      color: #fff;
      padding: 9px 16px;
      border-radius: 10px;
      font-size: .84rem;
      font-weight: 700;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
      animation: vs-nudge-tip-in .35s ease;
      box-shadow: 0 4px 16px rgba(37,99,235,.25);
    }
    /* YouTube banner — warm pink/peach gradient */
    #ytNudgeTip.vs-step-nudge {
      background: linear-gradient(90deg, #fda4af, #fdba74);
      box-shadow: 0 4px 16px rgba(251,146,110,.30);
    }

    @keyframes src-nudge-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,.55); }
      50%      { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
    }
    .source-card.src-nudge {
      border-color: #2563eb !important;
      animation: src-nudge-pulse 1.3s ease-in-out 3;
    }

    @keyframes level-nudge-pulse {
      0%,100% { box-shadow: var(--shadow-sm); }
      50%      { box-shadow: 0 0 0 8px rgba(37,99,235,.18); }
    }
    .level-btn.level-nudge {
      border-color: #2563eb !important;
      color: #2563eb !important;
      animation: level-nudge-pulse 1.2s ease-in-out 3;
    }
    .sys-lvl-btn.sys-lvl-nudge {
      border-color: #2563eb !important;
      color: #2563eb !important;
      animation: level-nudge-pulse 1.2s ease-in-out 3;
    }
    .rd-level-tab.rd-lvl-nudge {
      border-color: #2563eb !important;
      color: #2563eb !important;
      animation: level-nudge-pulse 1.2s ease-in-out 3;
    }

    /* ── SOURCE MODE SELECTION ── */
    .source-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 14px
    }

    #youtubeModeSection,
    #readingModeSection,
    #passageModeSection,
    #pdfModeSection { margin-top: 32px; }

    .source-card {
      cursor: pointer;
      padding: 22px 18px;
      border-radius: var(--radius);
      background: var(--surface);
      border: 2px solid var(--border);
      transition: all .18s;
      box-shadow: var(--shadow-sm);
      text-align: center;
      user-select: none
    }

    .source-card:hover {
      border-color: var(--accent2);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md)
    }

    .source-card.selected {
      border-color: var(--accent2);
      background: var(--blue-soft);
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(42, 122, 224, .15)
    }

    .source-card-icon {
      font-size: 2.4rem;
      line-height: 1;
      margin-bottom: 10px
    }

    .source-card-title {
      font-size: .95rem;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 6px
    }

    .source-card-desc {
      font-size: .75rem;
      color: var(--muted);
      line-height: 1.55;
      font-weight: 600
    }

    #srcPdfCard { border-color: #7c3aed; }
    #srcPdfCard:hover { background: #f5f3ff; }
    .source-card-pronun { border-color: #0ea5e9; text-decoration: none; color: inherit; }
    .source-card-pronun:hover { background: #f0f9ff; border-color: #0284c7; }

    /* ── PDF LIBRARY (inline section) ── */
    .pdf-lib-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
    .pdf-lib-search { width: 100%; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface2); font-size: .85rem; color: var(--ink); outline: none; box-sizing: border-box; }
    .pdf-lib-search:focus { border-color: var(--accent2); }
    .pdf-lib-filters { display: flex; gap: 8px; flex-wrap: wrap; }
    .pdf-filter-btn { padding: 5px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); color: var(--ink2); font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s; }
    .pdf-filter-btn:hover { border-color: var(--accent2); color: var(--accent2); }
    .pdf-filter-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }
    .pdf-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
    .pdf-empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 40px; font-size: .9rem; }
    .pdf-book-card { border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); overflow: hidden; cursor: pointer; transition: transform .18s, box-shadow .18s; }
    .pdf-book-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-color: var(--accent2); }
    .pdf-book-cover { height: 130px; display: flex; align-items: center; justify-content: center; }
    .pdf-cover-emoji { font-size: 2.8rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
    .pdf-book-info { padding: 10px 12px 12px; }
    .pdf-book-title { font-size: .85rem; font-weight: 800; color: var(--ink); line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .pdf-book-author { font-size: .72rem; color: var(--muted); font-style: italic; margin-bottom: 7px; }
    .pdf-book-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
    .pdf-level-badge { font-size: .62rem; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 999px; }
    .pdf-book-pages { font-size: .68rem; color: var(--muted); }
    .pdf-book-desc { font-size: .71rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

    /* ── PDF READER MODAL ── */
    .pdf-reader-modal { position: fixed; inset: 0; background: #1a1a2e; z-index: 9999; flex-direction: column; }
    .pdf-reader-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #16213e; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0; flex-wrap: wrap; }
    .pdf-reader-back { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 5px 12px; font-size: .8rem; cursor: pointer; white-space: nowrap; }
    .pdf-reader-back:hover { background: rgba(255,255,255,.2); }
    .pdf-reader-title { flex: 1; color: #e2e8f0; font-size: .85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .pdf-reader-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .pdf-nav-btn { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 5px 12px; font-size: .8rem; cursor: pointer; }
    .pdf-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
    .pdf-nav-btn:disabled { opacity: .35; cursor: default; }
    .pdf-page-info { color: #94a3b8; font-size: .8rem; min-width: 70px; text-align: center; }
    .pdf-goto-input { width: 70px; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: .8rem; text-align: center; }
    .pdf-goto-input::placeholder { color: #64748b; }
    .pdf-download-btn { padding: 5px 13px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #e2e8f0; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s; display: inline-flex; align-items: center; gap: 4px; }
    .pdf-download-btn:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
    .pdf-dict-toggle-btn { margin-left: auto; padding: 5px 13px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #e2e8f0; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s; }
    .pdf-dict-toggle-btn:hover, .pdf-dict-toggle-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
    /* content row: reader + dict panel side by side */
    .pdf-reader-content { flex: 1; display: flex; overflow: hidden; }
    .pdf-reader-body { flex: 1; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; min-width: 0; }
    .pdf-loading { color: #94a3b8; font-size: .95rem; padding: 60px 20px; text-align: center; }
    .pdf-canvas { border-radius: 4px; box-shadow: 0 4px 32px rgba(0,0,0,.5); max-width: 100%; }
    .pdf-drive-frame { width: 100%; height: 100%; border: none; }
    /* Dictionary side panel */
    .pdf-dict-panel { width: 0; overflow: hidden; background: #0f172a; border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; transition: width .25s ease; flex-shrink: 0; }
    .pdf-dict-panel.open { width: 300px; }
    .pdf-dict-panel-head { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
    .pdf-dict-search-row { display: flex; gap: 6px; }
    .pdf-dict-input { flex: 1; padding: 7px 12px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: #e2e8f0; font-size: .85rem; outline: none; }
    .pdf-dict-input:focus { border-color: #7c3aed; }
    .pdf-dict-input::placeholder { color: #64748b; }
    .pdf-dict-search-btn { padding: 7px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #e2e8f0; cursor: pointer; font-size: .85rem; }
    .pdf-dict-search-btn:hover { background: #7c3aed; border-color: #7c3aed; }
    .pdf-dict-panel-body { flex: 1; overflow-y: auto; padding: 14px 12px; }
    .pdf-dict-hint { color: #64748b; font-size: .8rem; line-height: 1.6; text-align: center; padding: 30px 10px; }
    /* Dict result */
    .pdf-dict-result { display: flex; flex-direction: column; gap: 4px; }
    .pdf-dict-word-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
    .pdf-dict-word { font-size: 1.25rem; font-weight: 800; color: #f1f5f9; }
    .pdf-dict-speak { background: none; border: none; font-size: 1rem; cursor: pointer; padding: 2px 4px; opacity: .8; }
    .pdf-dict-speak:hover { opacity: 1; }
    .pdf-dict-ipa { font-size: .85rem; color: #94a3b8; font-family: monospace; margin-bottom: 4px; }
    .pdf-dict-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
    .pdf-dict-pos { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(124,58,237,.25); color: #a78bfa; }
    .pdf-dict-cefr { font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #fff; }
    .pdf-dict-section-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #475569; margin-bottom: 4px; }
    .pdf-dict-vi { font-size: .88rem; color: #e2e8f0; font-weight: 600; line-height: 1.5; margin-bottom: 4px; }
    .pdf-dict-en { font-size: .82rem; color: #94a3b8; line-height: 1.6; margin-bottom: 10px; }
    .pdf-dict-save-btn { width: 100%; padding: 8px; border-radius: 8px; border: 1.5px solid #7c3aed; background: transparent; color: #a78bfa; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .15s; margin-bottom: 10px; }
    .pdf-dict-save-btn:hover:not(:disabled) { background: #7c3aed; color: #fff; }
    .pdf-dict-save-btn.saved { border-color: #22c55e; color: #22c55e; cursor: default; }
    .pdf-dict-ex-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
    .pdf-dict-ex-label { font-size: .7rem; font-weight: 700; color: #94a3b8; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
    .pdf-dict-ex-input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: #e2e8f0; font-size: .78rem; line-height: 1.5; padding: 7px 9px; resize: vertical; box-sizing: border-box; font-family: inherit; }
    .pdf-dict-ex-input::placeholder { color: #475569; }
    .pdf-dict-ex-input:focus { outline: none; border-color: #7c3aed; }
    .pdf-dict-ex-save { margin-top: 6px; width: 100%; padding: 6px; border-radius: 6px; border: 1px solid rgba(99,102,241,.5); background: transparent; color: #818cf8; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s; }
    .pdf-dict-ex-save:hover { background: #4f46e5; border-color: #4f46e5; color: #fff; }
    .pdf-dict-eng-def { font-size: .82rem; color: #94a3b8; line-height: 1.55; margin-bottom: 6px; }
    .pdf-dict-eng-ex { font-size: .75rem; color: #64748b; font-style: italic; margin-top: 3px; }
    .pdf-dict-links { display: flex; gap: 6px; flex-wrap: wrap; }
    .pdf-dict-link { font-size: .72rem; color: #64748b; text-decoration: none; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); }
    .pdf-dict-link:hover { color: #a78bfa; border-color: #7c3aed; }

    /* ── READING MODE — source tabs ── */
    .rd-src-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
    .rd-src-tab {
      padding: 7px 18px; border-radius: 999px;
      border: 1.5px solid var(--border); background: var(--surface2);
      color: var(--ink2); cursor: pointer;
      font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 700;
      transition: all .15s;
    }
    .rd-src-tab:hover { border-color: var(--accent); color: var(--accent); }
    .rd-src-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

    /* Level tabs */
    .rd-level-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
    .rd-level-tab {
      padding: 5px 14px; border-radius: 999px;
      border: 1.5px solid var(--border); background: var(--surface2);
      color: var(--ink2); cursor: pointer;
      font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700;
      transition: all .15s;
    }
    .rd-level-tab:hover { border-color: var(--accent2); color: var(--accent2); }
    .rd-level-tab.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }

    /* Article grid */
    .rd-article-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
      gap: 10px; max-height: 340px; overflow-y: auto;
      padding-right: 4px;
    }
    .rd-article-card {
      padding: 13px 15px; border-radius: 12px;
      border: 1.5px solid var(--border); background: var(--surface);
      cursor: pointer; transition: all .15s;
      display: flex; flex-direction: column; gap: 7px;
    }
    .rd-article-card:hover { border-color: var(--accent2); background: var(--blue-soft); box-shadow: var(--shadow-sm); }
    .rd-article-card-title {
      font-family: 'Nunito', sans-serif; font-weight: 800;
      font-size: .87rem; color: var(--ink); line-height: 1.35;
    }
    .rd-article-card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .rd-article-card-topic {
      display: inline-block; padding: 2px 8px; border-radius: 999px;
      background: var(--blue-soft); color: var(--accent2);
      font-size: .67rem; font-weight: 800; font-family: 'Nunito', sans-serif;
    }
    .rd-article-card-words { font-size: .72rem; color: var(--muted); font-family: 'Nunito', sans-serif; }

    /* ══════════ Reading "Choose Article" home — redesigned ══════════ */
    .rd-home2 { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; max-width: 1180px; margin: 8px auto 0; }
    @media (max-width: 920px) { .rd-home2 { grid-template-columns: 1fr; } .rd-home-side { order: -1; } }
    .rd-home-main { min-width: 0; }

    /* Search */
    .rd-search2 { position: relative; margin-bottom: 16px; }
    .rd-search2-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1rem; opacity: .6; }
    .rd-search2-inp {
      width: 100%; box-sizing: border-box; padding: 14px 18px 14px 46px;
      border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface);
      font-family: 'Nunito', sans-serif; font-size: .92rem; color: var(--ink); outline: none;
      box-shadow: var(--shadow-sm); transition: border-color .15s;
    }
    .rd-search2-inp:focus { border-color: #14b8a6; }

    /* Pill tabs */
    .rd-src-tabs2 { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--surface2); border: 1.5px solid var(--border); margin-bottom: 16px; }
    .rd-src-tab2 {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 18px; border-radius: 10px; border: none; background: transparent;
      color: var(--ink2); cursor: pointer; font-family: 'Nunito', sans-serif; font-size: .85rem; font-weight: 800; transition: all .15s;
    }
    .rd-src-tab2:hover { color: var(--ink); }
    .rd-src-tab2.active { background: #0d9488; color: #fff; box-shadow: 0 2px 8px rgba(13,148,136,.3); }
    .rd-tab-ic { font-size: .95rem; }

    /* Find words pane */
    .rd-find-head { margin-bottom: 14px; }
    .rd-find-title { font-family: 'Nunito', sans-serif; font-size: 1.15rem; font-weight: 900; color: var(--ink); }
    .rd-find-sub { font-size: .82rem; color: var(--muted); margin-top: 4px; }
    .rd-find-bar { display: flex; gap: 8px; margin-bottom: 16px; }
    .rd-find-inp {
      flex: 1; box-sizing: border-box; padding: 11px 16px; border: 1.5px solid var(--border);
      border-radius: 12px; background: var(--surface2); font-family: 'Nunito', sans-serif;
      font-size: .95rem; color: var(--ink); outline: none;
    }
    .rd-find-inp:focus { border-color: #0d9488; }
    .rd-find-btn {
      border: none; cursor: pointer; border-radius: 12px; padding: 0 22px;
      background: #0d9488; color: #fff; font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 800;
      white-space: nowrap; transition: filter .12s;
    }
    .rd-find-btn:hover { filter: brightness(1.07); }
    .rd-find-results { display: flex; flex-direction: column; gap: 10px; }
    .rd-find-count { font-size: .82rem; font-weight: 800; color: #0d9488; margin-bottom: 2px; }
    .rd-find-empty { text-align: center; color: var(--muted); padding: 30px 0; font-size: .9rem; }
    .rd-find-item {
      border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface);
      padding: 12px 14px; box-shadow: var(--shadow-sm);
    }
    .rd-find-sent { font-size: .95rem; line-height: 1.6; color: var(--ink); }
    .rd-find-hl { background: #fde68a; color: #92400e; border-radius: 3px; padding: 0 2px; font-weight: 700; }
    .rd-find-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
    .rd-find-src { font-size: .76rem; color: var(--muted); }
    .rd-find-open {
      border: 1.5px solid #0d9488; background: #ecfeff; color: #0e7490; cursor: pointer;
      border-radius: 9px; padding: 5px 12px; font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 800;
      white-space: nowrap; transition: background .12s;
    }
    .rd-find-open:hover { background: #cffafe; }
    /* category chips (paste + saved) */
    .rd-cat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .rd-cat-row-lbl { font-size: .8rem; font-weight: 700; color: var(--muted); }
    .rd-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .rd-saved-cat-chips { margin-bottom: 14px; }
    .rd-cat-chip {
      border: 1.5px solid var(--border); background: var(--surface2); color: var(--ink2);
      border-radius: 999px; padding: 5px 13px; font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 700;
      cursor: pointer; transition: all .12s; white-space: nowrap;
    }
    .rd-cat-chip:hover { border-color: #5eead4; color: var(--ink); }
    .rd-cat-chip.active { background: #0d9488; border-color: #0d9488; color: #fff; }
    .rd-cat-badge { background: #ccfbf1 !important; color: #0f766e !important; font-weight: 700; }
    /* highlight từ vừa tìm khi mở full bài */
    .rd-word-container.rd-find-mark .rd-word { background: #fde68a; color: #92400e; border-radius: 3px; box-shadow: 0 0 0 2px #fde68a; }

    /* Paste card */
    .rd-paste-card { border: 1.5px solid var(--border); border-radius: 18px; background: var(--surface); padding: 22px 24px; box-shadow: var(--shadow-sm); }
    .rd-paste-title { font-family: 'Nunito', sans-serif; font-size: 1.15rem; font-weight: 900; color: var(--ink); }
    .rd-paste-sub { font-size: .82rem; color: var(--muted); margin: 4px 0 16px; }
    .rd-paste-title-inp { width: 100%; box-sizing: border-box; padding: 10px 14px; margin-bottom: 10px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface2); font-family: 'Nunito', sans-serif; font-size: .88rem; color: var(--ink); outline: none; }
    .rd-paste-title-inp:focus { border-color: #14b8a6; }
    .rd-paste-area2 { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1.5px dashed var(--border); border-radius: 12px; background: var(--surface2); font-family: 'Nunito', sans-serif; font-size: .9rem; color: var(--ink); line-height: 1.6; resize: vertical; outline: none; min-height: 160px; transition: border-color .15s; }
    .rd-paste-area2:focus { border-color: #14b8a6; border-style: solid; }
    .rd-paste-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 12px; flex-wrap: wrap; }
    .rd-paste-meta { font-size: .8rem; color: var(--muted); font-family: 'Nunito', sans-serif; }
    .rd-paste-go { padding: 11px 22px; border-radius: 12px; border: none; background: #0d9488; color: #fff; font-family: 'Nunito', sans-serif; font-size: .88rem; font-weight: 800; cursor: pointer; transition: all .15s; }
    .rd-paste-go:hover:not(:disabled) { background: #0f766e; }
    .rd-paste-go:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }

    /* Streak banner */
    .rd-streak-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #0d9488, #14b8a6); color: #fff; border-radius: 16px; padding: 16px 20px; margin-bottom: 18px; }
    .rd-streak-banner:empty { display: none; }
    .rd-streak-left { display: flex; align-items: center; gap: 14px; }
    .rd-streak-fire { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
    .rd-streak-title { font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 900; }
    .rd-streak-sub { font-size: .82rem; opacity: .92; }
    .rd-streak-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .rd-streak-dots { display: flex; gap: 5px; }
    .rd-day-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
    .rd-day-dot.on { background: #fff; color: #0d9488; }
    .rd-day-dot.today { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
    .rd-pick-btn { padding: 9px 18px; border-radius: 10px; border: none; background: #fff; color: #0d9488; font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 800; cursor: pointer; white-space: nowrap; transition: transform .12s; }
    .rd-pick-btn:hover { transform: translateY(-1px); }

    /* Category pills (level tabs with dot) */
    .rd-cat-pills { margin-bottom: 16px; }
    .rd-cat-pills .rd-level-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; }
    .rd-cat-pills .rd-level-tab.active { background: #0d9488; border-color: #0d9488; color: #fff; }
    .rd-cat-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

    /* Library header */
    .rd-lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
    .rd-lib-title { font-family: 'Nunito', sans-serif; font-size: 1.2rem; font-weight: 900; color: var(--ink); margin: 0; }
    .rd-lib-count { font-size: .78rem; color: var(--muted); font-family: 'Nunito', sans-serif; }

    /* View toggle (grid/list) */
    .rd-lib-head-right { display: flex; align-items: center; gap: 10px; }
    .rd-view-toggle {
      width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
      border: 1.5px solid var(--border); background: var(--surface); color: var(--ink2);
      font-size: 1rem; cursor: pointer; line-height: 1; transition: all .14s;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .rd-view-toggle:hover { border-color: #14b8a6; color: #0d9488; }

    /* Article LIST view (titles only, pastel rows) */
    .rd-article-list { display: flex; flex-direction: column; gap: 8px; }
    .rd-list-row {
      display: flex; align-items: center; gap: 11px;
      padding: 11px 15px; border-radius: 12px; cursor: pointer;
      background: var(--rlbg, #f1f5f9); border: 1.5px solid transparent; border-left: 4px solid var(--rl, #94a3b8);
      transition: transform .12s, box-shadow .12s;
    }
    .rd-list-row:hover { transform: translateX(2px); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
    .rd-list-ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
    .rd-list-title { flex: 1; min-width: 0; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .92rem; color: var(--rl, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rd-list-status { font-size: .72rem; font-weight: 800; font-family: 'Nunito', sans-serif; flex-shrink: 0; }
    .rd-list-arrow { color: var(--rl, #94a3b8); flex-shrink: 0; opacity: .7; }

    /* Article cards grid v2 */
    .rd-article-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
    .rd-card2 { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 15px 16px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; transition: transform .13s, box-shadow .13s, border-color .13s; }
    .rd-card2:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); border-color: #99f6e4; }
    .rd-card2-top { display: flex; align-items: center; gap: 8px; }
    .rd-card2-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
    .rd-card2-cat { font-size: .66rem; font-weight: 800; color: #0d9488; background: #ccfbf1; padding: 3px 9px; border-radius: 999px; font-family: 'Nunito', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
    .rd-card2-arrow { margin-left: auto; color: var(--muted); font-size: .95rem; }
    .rd-card2-actions { margin-left: auto; display: flex; gap: 4px; }
    .rd-card2-bk { background: none; border: none; cursor: pointer; font-size: .9rem; padding: 2px; line-height: 1; opacity: .7; }
    .rd-card2-bk:hover { opacity: 1; }
    .rd-card2-title { font-family: 'Nunito', sans-serif; font-size: .95rem; font-weight: 900; color: var(--ink); line-height: 1.3; }
    .rd-card2-desc { font-size: .78rem; color: var(--muted); line-height: 1.4; }
    .rd-card-bar { height: 5px; border-radius: 20px; background: var(--surface2); overflow: hidden; }
    .rd-card-bar-fill { height: 100%; border-radius: 20px; background: #14b8a6; }
    .rd-card2-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
    .rd-card2-words { font-size: .72rem; color: var(--muted); font-family: 'Nunito', sans-serif; }
    .rd-card-status { font-size: .72rem; font-weight: 800; font-family: 'Nunito', sans-serif; }
    .rd-status-new { color: var(--muted); }
    .rd-status-prog { color: #d97706; }
    .rd-status-done { color: #16a34a; }
    .rd-status-lvl { color: #0d9488; }
    .rd-card2-saved .saved-level-select { font-size: .72rem; padding: 3px 6px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface2); color: var(--ink2); font-family: 'Nunito', sans-serif; cursor: pointer; }
    .rd-card2-lvlpick { margin-top: 2px; }

    /* Sidebar */
    .rd-home-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 14px; }
    .rd-side-card { border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px 18px; box-shadow: var(--shadow-sm); }
    .rd-side-h { font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 900; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
    .rd-week-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .rd-week-stat { border-radius: 12px; padding: 12px 6px; text-align: center; }
    .rd-ws-streak { background: #d1fae5; } .rd-ws-art { background: #dbeafe; } .rd-ws-words { background: #fef9c3; }
    .rd-ws-num { font-family: 'Nunito', sans-serif; font-size: 1.35rem; font-weight: 900; line-height: 1; }
    .rd-ws-streak .rd-ws-num { color: #059669; } .rd-ws-art .rd-ws-num { color: #2563eb; } .rd-ws-words .rd-ws-num { color: #ca8a04; }
    .rd-ws-lbl { font-size: .68rem; color: var(--muted); margin-top: 5px; font-family: 'Nunito', sans-serif; }

    .rd-continue { display: flex; align-items: center; gap: 12px; background: var(--surface2); border-radius: 12px; padding: 12px; cursor: pointer; transition: background .13s; }
    .rd-continue:hover { background: var(--blue-soft); }
    .rd-continue-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
    .rd-continue-body { flex: 1; min-width: 0; }
    .rd-continue-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .85rem; color: #0d9488; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
    .rd-continue-meta { font-size: .7rem; color: var(--muted); margin-top: 5px; }

    .rd-rec-row { display: flex; align-items: center; gap: 11px; padding: 9px 4px; cursor: pointer; border-radius: 10px; transition: background .12s; }
    .rd-rec-row:hover { background: var(--surface2); }
    .rd-rec-row + .rd-rec-row { border-top: 1px solid var(--border); }
    .rd-rec-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
    .rd-rec-body { flex: 1; min-width: 0; }
    .rd-rec-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .82rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rd-rec-meta { font-size: .68rem; color: var(--muted); margin-top: 2px; }
    .rd-rec-arrow { color: var(--muted); flex-shrink: 0; }
    .rd-rec-empty { font-size: .8rem; color: var(--muted); text-align: center; padding: 10px 0; }

    /* ── READING MODE ── */
    .reading-paste-area {
      width: 100%; box-sizing: border-box;
      padding: 12px 14px;
      border: 2px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface2);
      font-family: 'Nunito', sans-serif;
      font-size: .88rem; color: var(--ink);
      resize: vertical; outline: none;
      transition: border-color .18s;
      line-height: 1.6;
    }
    .reading-paste-area:focus { border-color: var(--accent2); }

    /* Reading screen */
    .reading-topbar {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 10;
    }

    /* ── Reading — dark mode: thanh công cụ tối theo bài đọc ──
       Chỉ override biến trong 2 thanh toolbar (không đụng vùng bài đọc đã có dark riêng). */
    #screen-reading.reading-dark .reading-topbar,
    #screen-reading.reading-dark .reading-controls-bar {
      --surface: #232327;
      --surface2: #1b1b1e;
      --bg: #161618;
      --bg2: #2a2a2f;
      --border: #3a3a41;
      --border2: #45454d;
      --ink: #e9e7e3;
      --ink2: #c6c2bc;
      --muted: #8d897f;
      box-shadow: 0 2px 10px rgba(0,0,0,.4);
    }
    #screen-reading.reading-dark .reading-controls-bar { background: var(--surface2); }
    #screen-reading.reading-dark .reading-topbar { color: var(--ink); }
    #screen-reading.reading-dark #btnRdDict { color: #fff; }
    #screen-reading.reading-dark .ctrl-select { color: var(--ink); }
    #screen-reading.reading-dark .reading-size-btn:hover,
    #screen-reading.reading-dark .ctrl-btn:hover { border-color: var(--accent2); }
    .reading-back-btn { flex-shrink: 0; }
    .reading-topbar-center { flex: 1; min-width: 0; text-align: center; }
    .reading-topbar-title {
      font-size: .92rem; font-weight: 800; color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .reading-topbar-meta { font-size: .7rem; color: var(--muted); margin-top: 1px; }
    .reading-size-btns { display: flex; gap: 6px; flex-shrink: 0; }
    .reading-size-btn {
      padding: 5px 11px; border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--surface2); cursor: pointer;
      font-family: 'Nunito', sans-serif;
      font-size: .8rem; font-weight: 800; color: var(--ink2);
      transition: border-color .15s;
    }
    .reading-size-btn:hover { border-color: var(--accent2); }
    .reading-controls-bar {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding: 7px 16px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 56px;
      z-index: 9;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    #rdPosLegend {
      position: sticky;
      top: 100px;
      z-index: 8;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 16px;
      margin-bottom: 14px;
      box-shadow: var(--shadow-sm);
    }
    .reading-body {
      padding: 36px 52px 100px;
    }
    /* ── Phrases sidebar layout ── */
    .reading-body.rd-has-phrases-sidebar {
      display: grid;
      grid-template-columns: 1fr 260px;
      column-gap: 28px;
      padding-right: 20px;
      align-items: start;
    }
    .reading-body.rd-has-phrases-sidebar > * { grid-column: 1; }
    .reading-body.rd-has-phrases-sidebar > #rdPhrasesPanel {
      grid-column: 2;
      grid-row: 1 / span 100;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      align-self: stretch;
    }
    /* Sticky inner content wrapper */
    .rd-phrases-sticky {
      position: sticky;
      top: 106px;
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      border-radius: 14px;
      padding: 14px 16px;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
    /* Non-sidebar mode: wrapper has no extra styling, panel keeps inline styles */
    #rdPhrasesPanel:not(.in-sidebar) .rd-phrases-sticky {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      position: static;
      max-height: none;
      overflow-y: visible;
    }
    #rdPhrasesPanel:not(.in-sidebar) {
      padding: 14px 16px !important;
      background: #f0fdf4 !important;
      border: 1.5px solid #86efac !important;
      border-radius: 14px !important;
      margin: 20px 0 4px !important;
    }
    .rd-phrases-list {
      list-style: decimal;
      padding-left: 26px;
      margin: 0;
    }
    .rd-phrases-list li {
      padding: 7px 0;
      border-bottom: 1px solid #bbf7d0;
      line-height: 1.4;
    }
    .rd-phrases-list li:last-child { border-bottom: none; }
    .rd-phrase-en {
      display: block;
      font-weight: 700;
      font-size: .88rem;
      color: #166534;
    }
    .rd-phrase-vi {
      display: block;
      font-size: .78rem;
      color: #15803d;
      font-style: italic;
      margin-top: 1px;
    }
    .rd-phrase-row { position: relative; padding-right: 18px; }
    .rd-phrase-del-btn {
      position: absolute; top: 0; right: 0;
      background: none; border: none; cursor: pointer;
      font-size: .7rem; color: #9ca3af; padding: 0; line-height: 1;
    }
    .rd-phrase-del-btn:hover { color: #dc2626; }
    @media (max-width: 900px) {
      .reading-body.rd-has-phrases-sidebar {
        display: block;
        padding-right: 52px;
      }
      .reading-body.rd-has-phrases-sidebar > #rdPhrasesPanel {
        position: static;
        margin: 20px 0 4px !important;
      }
    }

    .reading-article {
      font-family: 'Lora', Georgia, serif;
      font-size: 1.05rem;
      line-height: 2.2;
      color: var(--ink);
    }
    .reading-article p { margin-bottom: 1.1em; }
    .rd-para-row { position: relative; }
    .rd-para-play-btn {
      position: absolute;
      left: -36px; top: 6px;
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--card);
      color: var(--muted);
      font-size: .6rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity .15s, color .15s, border-color .15s, background .15s;
      padding: 0;
    }
    .rd-para-row:hover .rd-para-play-btn,
    .rd-para-play-btn.playing { opacity: 1; }
    .rd-para-play-btn.playing { color: var(--accent2); border-color: var(--accent2); background: rgba(59,130,246,.1); }

    .rd-para-rec-btn {
      position: absolute;
      left: -36px; top: 36px;
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--card);
      color: var(--muted);
      font-size: .65rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity .15s, color .15s, border-color .15s, background .15s;
      padding: 0;
    }
    .rd-para-row:hover .rd-para-rec-btn,
    .rd-para-rec-btn.active { opacity: 1; }
    .rd-para-rec-btn.active { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.1); }
    .rd-para-rec-result {
      margin: 6px 0 10px 0;
      border-radius: 12px;
      overflow: hidden;
      border: 1.5px solid var(--border);
    }
    .rd-para-rec-status {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px;
      background: #fff1f2; border-bottom: 1.5px solid #fecdd3;
      font-family: 'Nunito',sans-serif; font-size: .82rem; font-weight: 600; color: #be123c;
    }
    .rd-para-rec-box { padding: 14px 16px; background: var(--surface); }

    /* Word container (mirrors tp-word-container) */
    .rd-word-container {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: top;
      cursor: pointer;
      border-radius: 3px;
      padding: 0 1px;
      transition: background .12s;
      position: relative;
    }
    .rd-word-container:hover { background: var(--blue-soft); }
    .rd-word-container.looked-up { background: rgba(42,122,224,.12); }
    .rd-word-container.rd-hl-drag { background: rgba(245,158,11,.25); }
    /* TTS sentence highlight — seamless band (mirrors rd-hl-yellow technique) */
    .rd-word-container.rd-sent-hl .rd-word { position: relative; z-index: 0; }
    .rd-word-container.rd-sent-hl .rd-word::before { content:''; position:absolute; z-index:-1; left:-6px; right:-6px; top:50%; transform:translateY(-50%); height:1.3em; background:rgba(250,204,21,.38); border-radius:0; }
    .rd-word-container.rd-sent-hl.rd-sent-start .rd-word::before { border-radius:5px 0 0 5px; left:0; }
    .rd-word-container.rd-sent-hl.rd-sent-end   .rd-word::before { border-radius:0 5px 5px 0; right:0; }
    .rd-word-container.rd-sent-hl.rd-sent-start.rd-sent-end .rd-word::before { border-radius:5px; left:0; right:0; }

    /* Highlight: ::before pseudo-element with fixed height — does not affect line-height or word position */
    .rd-word-container.rd-hl-yellow .rd-word,
    .rd-word-container.rd-hl-green  .rd-word,
    .rd-word-container.rd-hl-blue   .rd-word,
    .rd-word-container.rd-hl-pink   .rd-word { position: relative; z-index: 0; color: #1a1a1a !important; }

    .rd-word-container.rd-hl-yellow .rd-word::before { content:''; position:absolute; z-index:-1; left:-6px; right:-6px; top:50%; transform:translateY(-50%); height:1.3em; background:#fde68a; border-radius:0; }
    .rd-word-container.rd-hl-green  .rd-word::before { content:''; position:absolute; z-index:-1; left:-6px; right:-6px; top:50%; transform:translateY(-50%); height:1.3em; background:#a7f3d0; border-radius:0; }
    .rd-word-container.rd-hl-blue   .rd-word::before { content:''; position:absolute; z-index:-1; left:-6px; right:-6px; top:50%; transform:translateY(-50%); height:1.3em; background:#bfdbfe; border-radius:0; }
    .rd-word-container.rd-hl-pink   .rd-word::before { content:''; position:absolute; z-index:-1; left:-6px; right:-6px; top:50%; transform:translateY(-50%); height:1.3em; background:#fbcfe8; border-radius:0; }

    /* Start of run: round left corners, no left extension */
    .rd-word-container.rd-hl-yellow.rd-hl-start .rd-word::before { border-radius:5px 0 0 5px; left:0; }
    .rd-word-container.rd-hl-green.rd-hl-start  .rd-word::before { border-radius:5px 0 0 5px; left:0; }
    .rd-word-container.rd-hl-blue.rd-hl-start   .rd-word::before { border-radius:5px 0 0 5px; left:0; }
    .rd-word-container.rd-hl-pink.rd-hl-start   .rd-word::before { border-radius:5px 0 0 5px; left:0; }

    /* End of run: round right corners, no right extension */
    .rd-word-container.rd-hl-yellow.rd-hl-end .rd-word::before { border-radius:0 5px 5px 0; right:0; }
    .rd-word-container.rd-hl-green.rd-hl-end  .rd-word::before { border-radius:0 5px 5px 0; right:0; }
    .rd-word-container.rd-hl-blue.rd-hl-end   .rd-word::before { border-radius:0 5px 5px 0; right:0; }
    .rd-word-container.rd-hl-pink.rd-hl-end   .rd-word::before { border-radius:0 5px 5px 0; right:0; }

    /* Single word: fully rounded, no extension */
    .rd-word-container.rd-hl-yellow.rd-hl-start.rd-hl-end .rd-word::before,
    .rd-word-container.rd-hl-green.rd-hl-start.rd-hl-end  .rd-word::before,
    .rd-word-container.rd-hl-blue.rd-hl-start.rd-hl-end   .rd-word::before,
    .rd-word-container.rd-hl-pink.rd-hl-start.rd-hl-end   .rd-word::before { border-radius:5px; left:0; right:0; }

    /* ── Notable Phrase Highlights (amber underline band) ────────────────── */
    /* Phrases: no visible marker by default, only show on active */
    .rd-word-container.rd-phrase-hl .rd-word { position:relative; z-index:0; }
    .rd-word-container.rd-phrase-hl .rd-word::after {
      content:''; position:absolute; z-index:-1;
      left:-4px; right:-4px; top:50%; bottom:auto;
      height:0; transform:translateY(-50%);
      background:#4ade80; transition:height .15s;
    }
    /* Active (single click) */
    .rd-word-container.rd-phrase-hl.rd-phrase-active .rd-word { color:#14532d !important; }
    .rd-word-container.rd-phrase-hl.rd-phrase-active .rd-word::after { height:1.35em; }
    .rd-word-container.rd-phrase-hl.rd-phrase-active.rd-phrase-start .rd-word::after { border-radius:5px 0 0 5px; left:0; }
    .rd-word-container.rd-phrase-hl.rd-phrase-active.rd-phrase-end   .rd-word::after { border-radius:0 5px 5px 0; right:0; }
    .rd-word-container.rd-phrase-hl.rd-phrase-active.rd-phrase-start.rd-phrase-end .rd-word::after { border-radius:5px; left:0; right:0; }
    /* Show-all toggle: highlight every phrase */
    .rd-phrases-show-all .rd-word-container.rd-phrase-hl .rd-word { color:#14532d !important; }
    .rd-phrases-show-all .rd-word-container.rd-phrase-hl .rd-word::after { height:1.35em; background:#86efac; }
    .rd-phrases-show-all .rd-word-container.rd-phrase-hl.rd-phrase-start .rd-word::after { border-radius:5px 0 0 5px; left:0; }
    .rd-phrases-show-all .rd-word-container.rd-phrase-hl.rd-phrase-end   .rd-word::after { border-radius:0 5px 5px 0; right:0; }
    .rd-phrases-show-all .rd-word-container.rd-phrase-hl.rd-phrase-start.rd-phrase-end .rd-word::after { border-radius:5px; left:0; right:0; }
    /* When show-all active, single click still shows darker highlight */
    .rd-phrases-show-all .rd-word-container.rd-phrase-hl.rd-phrase-active .rd-word::after { background:#4ade80; }
    /* Sidebar list item active */
    .rd-phrases-list li.rd-phrase-item-active { background:#dcfce7; border-radius:6px; margin:0 -6px; padding-left:6px; padding-right:6px; }
    .rd-phrases-list li.rd-phrase-item-active .rd-phrase-en { color:#14532d; }
    /* Phrase Test (legacy classes kept for compat) */
    .rd-pt-choice { width:100%; padding:10px 14px; border-radius:10px; border:1.5px solid #e5e7eb; background:#f9fafb; color:#1c1917; font-size:.88rem; font-weight:600; cursor:pointer; text-align:left; transition:background .12s,border-color .12s; line-height:1.4; }
    .rd-pt-choice:hover:not(:disabled) { background:#ede9fe; border-color:#7c3aed; }
    .rd-pt-choice.rd-pt-correct { background:#d1fae5 !important; border-color:#16a34a !important; color:#14532d !important; }
    .rd-pt-choice.rd-pt-wrong   { background:#fee2e2 !important; border-color:#dc2626 !important; color:#7f1d1d !important; }

    /* IPA span (hidden by default, shown when ipa-active) */
    .rd-ipa {
      display: none;
      font-family: 'Nunito', sans-serif;
      font-size: .58em;
      color: var(--muted);
      white-space: nowrap;
      line-height: 1.4;
    }
    .reading-article.ipa-active .rd-ipa { display: block; min-height: 1.1em; }
    .reading-article.ipa-active .rd-ipa.rd-ipa-none::after { content: '·'; color: var(--border); }

    /* POS colors (mirrors teleprompter) */
    .reading-article.pos-color-active.pos-filter-n    .rd-word.pos-c-n    { color: var(--rd-pos-n,   #1a7a3c); }
    .reading-article.pos-color-active.pos-filter-v    .rd-word.pos-c-v    { color: var(--rd-pos-v,   #c95200); }
    .reading-article.pos-color-active.pos-filter-adj  .rd-word.pos-c-adj  { color: var(--rd-pos-adj, #5cb85c); }
    .reading-article.pos-color-active.pos-filter-adv  .rd-word.pos-c-adv  { color: var(--rd-pos-adv, #e8892a); }
    .reading-article.pos-color-active.pos-filter-prep .rd-word.pos-c-prep { color: var(--rd-pos-prep,#7b4f2e); }
    .reading-article.pos-color-active.pos-filter-aux  .rd-word.pos-c-aux  { color: var(--rd-pos-aux, #888888); }
    .reading-article.pos-color-active.pos-filter-conj .rd-word.pos-c-conj { color: var(--rd-pos-conj,#2980b9); }
    .reading-article.pos-color-active.pos-filter-pron .rd-word.pos-c-pron { color: var(--rd-pos-pron,#c4956a); }
    .reading-article.pos-color-active.pos-filter-art  .rd-word.pos-c-art  { color: var(--rd-pos-art, #444444); }
    .reading-article.pos-color-active.pos-filter-other .rd-word.pos-c-other{ color: var(--rd-pos-other,#c0960c); }

    /* Vietnamese translation line */
    .rd-vi-text {
      display: none;
      font-family: 'Nunito', sans-serif;
      font-size: .88em;
      color: #92400e;
      font-style: italic;
      background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
      border-left: 3px solid #fb923c;
      border-radius: 0 8px 8px 0;
      padding: 8px 14px;
      margin-top: 2px;
      margin-bottom: 1.1em;
      line-height: 1.7;
    }
    .reading-article.translate-active .rd-vi-text { display: block; }
    .reading-article.rd-theme-dark .rd-vi-text {
      background: rgba(251,146,60,.08);
      border-left-color: rgba(251,146,60,.6);
      color: #ff9a50;
    }
    .reading-article.rd-theme-dark .rd-vi-sent-en { color: #d8d8d8; }
    .reading-article.rd-theme-dark .rd-vi-sent-vi { color: #ff9a50; }
    .reading-article.rd-theme-dark .rd-vi-sent-pair {
      background: rgba(255,255,255,.05);
      border-color: rgba(251,146,60,.25);
      border-left-color: rgba(251,146,60,.6);
    }

    /* Translate mode dropdown */
    .rd-trans-dropdown {
      position: fixed;
      z-index: 9999;
      background: var(--card, #fff);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,.15);
      padding: 5px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 148px;
    }
    .rd-trans-dd-item {
      text-align: left;
      padding: 7px 14px;
      border-radius: 7px;
      border: none;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      font-size: .88rem;
      font-family: inherit;
    }
    .rd-trans-dd-item:hover { background: var(--hover, #f3f4f6); }
    .rd-trans-dd-item.active { background: var(--accent); color: #fff; }
    .rd-trans-dd-item.active:hover { background: var(--accent); }

    /* Sentence-by-sentence view */
    .rd-vi-sent-view { display: flex; flex-direction: column; gap: 6px; cursor: default; }
    .rd-vi-sent-pair {
      display: flex; flex-direction: column; gap: 3px;
      background: rgba(255,255,255,.72);
      border: 1px solid #fed7aa;
      border-left: 3px solid #f97316;
      border-radius: 6px;
      padding: 7px 11px;
    }
    .rd-vi-sent-en { font-style: normal; color: #475569; font-size: .88em; }
    .rd-vi-sent-vi { color: #9a3412; font-style: italic; font-size: .87em; font-weight: 600; }

    /* ── Note mode ── */
    .reading-article.note-mode .rd-word-container { cursor: cell; }
    .rd-word-container.rd-has-note .rd-word { color: #991b1b !important; }

    /* ── Note bubbles (shown on click-toggle) ── */
    .rd-note-bubble {
      display: none;
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 6px 11px;
      font-size: .77rem;
      line-height: 1.55;
      width: max-content;
      max-width: 220px;
      white-space: pre-wrap;
      word-break: break-word;
      box-shadow: 0 3px 14px rgba(0,0,0,.13);
      z-index: 300;
      pointer-events: none;
      color: #1f2937;
      font-family: 'Nunito', sans-serif;
      font-weight: 500;
    }
    .rd-note-bubble::before {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: #d1d5db;
    }
    .rd-note-bubble::after {
      content: '';
      position: absolute;
      top: calc(100% - 1px);
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #fff;
    }
    .reading-article.rd-notes-visible .rd-note-bubble { display: block; }

    /* ── Bold mode ── */
    .reading-article.bold-mode .rd-word-container { cursor: default; }
    .rd-word-container.rd-bold      .rd-word { font-weight: 800 !important; }
    .rd-word-container.rd-bold-red  .rd-word { font-weight: 800 !important; color: #dc2626 !important; }
    .rd-word-container.rd-bold-green .rd-word { font-weight: 800 !important; color: #16a34a !important; }
    .rd-word-container.rd-bold-yellow .rd-word { font-weight: 800 !important; color: #d4a017 !important; }
    .rd-word-container.rd-bold-blue   .rd-word { font-weight: 800 !important; color: #2563eb !important; }

    /* Note popup */
    .rd-note-popup {
      position: fixed; z-index: 9200; display: none;
      background: var(--surface); border: 1.5px solid #8b5cf6;
      border-radius: 12px; box-shadow: 0 8px 28px rgba(139,92,246,.22);
      padding: 12px 14px; width: 284px;
    }
    .rd-note-popup.active { display: block; }
    .rd-note-popup-header { font-family: 'Nunito',sans-serif; font-size: .75rem; font-weight: 800; color: #8b5cf6; margin-bottom: 8px; }
    .rd-note-popup-header span { color: var(--ink); }
    .rd-note-popup textarea {
      width: 100%; resize: vertical; min-height: 82px; max-height: 180px;
      border: 1.5px solid var(--border); border-radius: 8px;
      padding: 7px 9px; font-family: 'Nunito',sans-serif; font-size: .83rem;
      color: var(--ink); outline: none; background: var(--surface2); line-height: 1.5; display: block;
    }
    .rd-note-popup textarea:focus { border-color: #8b5cf6; background: #fff; }
    .rd-note-popup-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
    .rd-note-btn { border: none; border-radius: 999px; cursor: pointer; font-family: 'Nunito',sans-serif; font-size: .75rem; font-weight: 800; padding: 5px 13px; transition: all .15s; }
    .rd-note-btn-close { background: var(--surface2); color: var(--muted); }
    .rd-note-btn-close:hover { background: var(--border); }
    .rd-note-btn-del { background: #fff0f0; color: #dc2626; margin-right: auto; }
    .rd-note-btn-del:hover { background: #fee2e2; }
    .rd-note-btn-save { background: #8b5cf6; color: #fff; }
    .rd-note-btn-save:hover { background: #7c3aed; }

    /* Note hover tooltip */
    .rd-note-tooltip {
      position: fixed; z-index: 9100; pointer-events: none; display: none;
      background: #1a1714; color: #f3f4f6;
      border-radius: 8px; padding: 7px 11px;
      font-family: 'Nunito',sans-serif; font-size: .78rem; line-height: 1.5;
      max-width: 240px; white-space: pre-wrap; word-break: break-word;
      box-shadow: 0 4px 16px rgba(0,0,0,.25);
    }
    .rd-note-tooltip.active { display: block; }

    /* Saved readings panel */
    .rd-saved-panel {
      position: fixed; inset: 0; z-index: 9400;
      background: rgba(26,23,20,.48); backdrop-filter: blur(3px);
      display: flex; align-items: center; justify-content: center;
    }
    .rd-saved-panel-inner {
      background: var(--surface); border-radius: var(--radius);
      box-shadow: var(--shadow-lg); width: 520px; max-width: 95vw;
      max-height: 78vh; display: flex; flex-direction: column; overflow: hidden;
    }
    .rd-saved-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 15px 20px; border-bottom: 1px solid var(--border);
      font-family: 'Nunito',sans-serif; font-weight: 800; font-size: .93rem; flex-shrink: 0;
    }
    .rd-saved-panel-header button { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); border-radius: 6px; padding: 2px 7px; transition: background .12s; }
    .rd-saved-panel-header button:hover { background: var(--bg2); }
    .rd-saved-list { overflow-y: auto; flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
    .rd-saved-item {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--border);
      background: var(--surface2); cursor: pointer; transition: all .15s;
    }
    .rd-saved-item:hover { border-color: var(--accent2); background: var(--blue-soft); }
    .rd-saved-item-info { flex: 1; min-width: 0; }
    .rd-saved-item-title { font-family: 'Nunito',sans-serif; font-weight: 800; font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rd-saved-item-meta { font-size: .72rem; color: var(--muted); margin-top: 2px; }
    .rd-saved-item-del { background: none; border: none; font-size: .85rem; cursor: pointer; color: var(--muted); border-radius: 6px; padding: 3px 8px; flex-shrink: 0; transition: all .12s; }
    .rd-saved-item-del:hover { color: #dc2626; background: #fee2e2; }
    .rd-saved-empty { text-align: center; color: var(--muted); font-size: .88rem; padding: 32px 0; font-family: 'Nunito',sans-serif; }

    /* Save toast */
    .rd-toast {
      position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px);
      background: #1a1714; color: #fff; border-radius: 999px;
      padding: 9px 20px; font-family: 'Nunito',sans-serif; font-size: .83rem; font-weight: 700;
      box-shadow: 0 6px 20px rgba(0,0,0,.22); z-index: 9999;
      opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
    }
    .rd-toast.active { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ── YOUTUBE SECTION (select screen) ── */
    .yt-url-input {
      width: 100%;
      padding: 12px 18px;
      border-radius: var(--radius-sm);
      border: 2px solid var(--border);
      font-family: 'Nunito', sans-serif;
      font-size: .9rem;
      transition: border-color .2s;
      background: var(--surface);
      color: var(--ink);
      outline: none;
      box-sizing: border-box
    }

    .yt-url-input:focus {
      border-color: var(--accent2)
    }

    .yt-url-input::placeholder {
      color: var(--muted)
    }

    .yt-preview-wrap {
      margin-top: 14px;
      border-radius: var(--radius);
      overflow: hidden;
      border: 2px solid var(--border);
      background: #000;
      display: none;
      position: relative;
      cursor: pointer
    }

    .yt-preview-wrap img {
      width: 100%;
      display: block
    }

    .yt-transcript-area {
      width: 100%;
      min-height: 110px;
      padding: 11px 14px;
      border-radius: var(--radius-sm);
      border: 2px solid var(--border);
      font-family: 'Lora', serif;
      font-size: .85rem;
      line-height: 1.7;
      resize: vertical;
      background: var(--surface);
      color: var(--ink);
      transition: border-color .2s;
      outline: none;
      box-sizing: border-box
    }

    .yt-transcript-area:focus {
      border-color: var(--accent2)
    }

    .yt-transcript-area::placeholder {
      color: var(--muted);
      font-family: 'Nunito', sans-serif;
      font-style: italic;
      font-size: .82rem
    }

    /* ── YOUTUBE PLAYER BAR (learn screen) ── */
    .yt-player-bar {
      background: #0f0f0f;
      border-bottom: 3px solid #111;
      display: none;
      position: relative
    }

    .yt-player-bar iframe {
      width: 100%;
      height: 220px;
      border: none;
      display: block
    }

    .yt-player-bar-hint {
      position: absolute;
      bottom: 8px;
      right: 12px;
      font-size: .65rem;
      color: rgba(255, 255, 255, .5);
      font-weight: 700;
      pointer-events: none
    }

    /* ══ DICTATION MODE ══ */
    .dictation-tp-btn {
      background: var(--accent2);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 3px 10px;
      font-size: .65rem;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
      letter-spacing: .04em;
      line-height: 1.6;
      transition: background .15s;
    }
    .dictation-tp-btn:hover { background: #cc5200; }

    /* ── Sentence Arrange ── */
    /* ══ Word order test redesign ══ */
    .sa-box { border-radius: 24px; }
    .sa-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .sa-header-ic { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #8b7ff5, #6366f1); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; flex: none; }
    .sa-header-title { font-family: 'Nunito', sans-serif; font-size: 1.5rem; font-weight: 900; color: #1e293b; }
    .sa-header-score { font-size: 1rem; font-weight: 700; color: #94a3b8; }
    .sa-close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: none; background: #f1f5f9; color: #64748b; font-size: 1.35rem; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; flex: none; }
    .sa-close:hover { background: #e2e8f0; }

    .sa-word-badge-wrap { margin-bottom: 18px; }
    .sa-word-badge { display: inline-flex; align-items: center; gap: 10px; background: #eef0fe; border-radius: 14px; padding: 10px 18px; }
    .sa-wb-word { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.25rem; color: #4f46e5; }
    .sa-wb-spk { border: none; background: none; cursor: pointer; font-size: 1rem; padding: 0; color: #6366f1; line-height: 1; }
    .sa-wb-meaning { font-size: 1rem; color: #64748b; }

    .sa-answer-zone {
      min-height: 88px; border: 2px dashed #c7d2fe; border-radius: 16px; padding: 14px;
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px;
      background: #fbfbff; transition: border-color .15s;
    }
    .sa-answer-placeholder {
      width: 100%; text-align: center; color: #94a3b8; font-size: .95rem; font-weight: 600;
      font-style: normal; display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .sa-answer-placeholder::before { content: '👆'; font-size: 1.05rem; }
    .sa-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .sa-chip {
      display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 11px;
      border: 1.5px solid #e0e4f4; background: #fff; color: #2563eb;
      font-family: 'Nunito', sans-serif; font-size: .92rem; font-weight: 800; cursor: pointer;
      box-shadow: 0 3px 9px rgba(79,110,247,.1); transition: transform .12s, box-shadow .12s; white-space: nowrap;
    }
    .sa-chip:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(79,110,247,.18); }
    .sa-chip-used { opacity: .3; cursor: default; box-shadow: none; }
    .sa-chip-placed { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; box-shadow: none; }
    .sa-chip-placed:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
    .sa-hint {
      background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
      padding: 12px 16px; font-size: .95rem; color: #92400e; margin-bottom: 12px; line-height: 1.5;
    }
    .sa-feedback { font-size: 1rem; min-height: 1.4em; line-height: 1.5; font-weight: 700; }

    .sa-footer { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
    .sa-btn {
      display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px;
      border: none; font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 800; cursor: pointer;
      transition: filter .15s, background .15s, box-shadow .15s;
    }
    .sa-btn-check { background: #4f6ef7; color: #fff; box-shadow: 0 6px 16px rgba(79,110,247,.32); }
    .sa-btn-check:hover { filter: brightness(1.06); }
    .sa-btn-hint { background: #fef3c7; color: #b45309; }
    .sa-btn-hint:hover { background: #fde68a; }
    .sa-btn-clear { background: #f1f5f9; color: #64748b; }
    .sa-btn-clear:hover { background: #e2e8f0; }
    .sa-btn-nav { background: #f1f5f9; color: #475569; padding: 14px 22px; }
    .sa-btn-nav:hover { background: #e2e8f0; }
    @media (max-width: 560px) {
      .sa-header-title { font-size: 1.25rem; }
      .sa-btn { padding: 12px 18px; font-size: .92rem; }
      .sa-btn-nav { padding: 12px 14px; }
    }
    /* ── Poster AI tabs ── */
    .poster-tab {
      padding: 6px 16px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: transparent;
      color: var(--ink);
      font-size: .85rem;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
    }
    .poster-tab:hover { background: var(--surface2); }
    .poster-tab.active {
      background: var(--accent2);
      border-color: var(--accent2);
      color: #fff;
    }
    /* ── Vocabulary Mindmap ── */
    #screen-mindmap { display:none; flex-direction:column; min-height:100vh; background:var(--bg); position:relative; }
    #screen-mindmap.active { display:flex; }

    .mm-sticky-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--surface);
    }
    .mm-topbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 18px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .mm-topbar-title {
      font-weight: 800;
      font-size: .95rem;
      color: var(--ink);
      flex-shrink: 0;
      white-space: nowrap;
    }
    .mm-edit-toggle {
      padding: 6px 14px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s, color .15s, border-color .15s;
    }
    .mm-edit-toggle:hover { border-color: var(--accent2); color: var(--accent2); }
    .mm-edit-toggle.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }
    #screen-mindmap:not(.mm-editing) .mm-edit-only { display: none !important; }
    #screen-mindmap:not(.mm-editing) #mmFmtBar,
    #screen-mindmap:not(.mm-editing) #mmCenterStyleBar { display: none !important; }
    #screen-mindmap:not(.mm-editing) .mm-card-x,
    #screen-mindmap:not(.mm-editing) .mm-center-style-btn,
    #screen-mindmap:not(.mm-editing) .mm-branch-add-btn,
    #screen-mindmap:not(.mm-editing) .mm-branch-input,
    #screen-mindmap:not(.mm-editing) .mm-branch-style-btn,
    #screen-mindmap:not(.mm-editing) .mm-sub-style-btn { display: none !important; }
    #screen-mindmap:not(.mm-editing) .mm-card { cursor: default; }
    .mm-add-row {
      display: flex;
      align-items: center;
      gap: 7px;
      flex: 1;
      min-width: 180px;
    }
    .mm-word-input {
      flex: 1;
      padding: 7px 14px;
      border-radius: 999px;
      border: 1.5px solid var(--border);
      background: var(--bg);
      color: var(--ink);
      font-family: 'Nunito', sans-serif;
      font-size: .88rem;
      outline: none;
      transition: border-color .15s;
    }
    .mm-word-input:focus { border-color: var(--accent2); }
    .mm-add-btn {
      padding: 7px 18px;
      border-radius: 999px;
      border: none;
      background: var(--accent2);
      color: #fff;
      font-family: 'Nunito', sans-serif;
      font-size: .85rem;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
    }
    .mm-add-btn:hover { opacity: .85; }
    .mm-word-only-btn {
      padding: 5px 10px;
      border-radius: 999px;
      border: 1.5px solid var(--border);
      background: transparent;
      color: var(--text);
      font-family: 'Nunito', sans-serif;
      font-size: .75rem;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s, color .15s, border-color .15s;
    }
    .mm-word-only-btn:hover { border-color: var(--accent2); color: var(--accent2); }
    .mm-word-only-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }

    .mm-empty-state {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }

    /* Viewport + outer for pan/zoom */
    .mm-viewport {
      flex: 1;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      cursor: grab;
    }
    .mm-viewport.mm-is-panning { cursor: grabbing !important; user-select: none; }
    .mm-empty-state { cursor: default; }
    .mm-canvas-outer {
      flex: 1;
      display: flex;
      flex-direction: column;
      transform-origin: 0 0;
    }
    .mm-zoom-ctrl {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .mm-zoom-btn {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--surface);
      font-size: .95rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--ink);
      line-height: 1;
      display: flex; align-items: center; justify-content: center;
    }
    .mm-zoom-btn:hover { background: var(--accent2); color: #fff; border-color: var(--accent2); }
    .mm-zoom-label {
      font-size: .78rem;
      color: var(--muted);
      min-width: 36px;
      text-align: center;
      font-weight: 600;
    }

    /* Canvas */
    .mm-canvas {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 170px 1fr;
      gap: 28px;
      padding: 30px 28px;
      min-height: 580px;
      align-items: center;
      flex: 1;
    }
    .mm-svg-overlay {
      position: absolute;
      top: 0; left: 0;
      pointer-events: none;
      z-index: 0;
      overflow: visible;
    }
    .mm-left-col, .mm-right-col {
      display: flex;
      flex-direction: column;
      gap: 13px;
      position: relative;
      z-index: 1;
    }

    /* Center node */
    .mm-editing .mm-center-node { cursor: pointer; }

    /* Card image */
    .mm-card-img-section { margin-top: 6px; text-align: center; }
    .mm-card-img-wrap { position: relative; border-radius: 8px; line-height: 0; display: inline-block; max-width: 100%; }
    .mm-card-img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; display: block; }
    .mm-card-img-del, .mm-card-img-chg {
      position: absolute; top: 4px;
      width: 22px; height: 22px; border: none; border-radius: 50%;
      font-size: .75rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
      line-height: 1; opacity: 0; transition: opacity .15s;
    }
    .mm-card-img-wrap:hover .mm-card-img-del,
    .mm-card-img-wrap:hover .mm-card-img-chg { opacity: 1; }
    .mm-card-img-del { right: 4px; background: rgba(239,68,68,.85); color: #fff; }
    .mm-card-img-chg { right: 30px; background: rgba(0,0,0,.55); color: #fff; }
    .mm-img-resize-handle {
      position: absolute; bottom: 3px; right: 3px;
      width: 16px; height: 16px;
      cursor: se-resize; z-index: 5;
      opacity: 0; transition: opacity .15s;
      background: rgba(255,255,255,.9);
      border-radius: 3px 0 6px 0;
      border: 1.5px solid rgba(0,0,0,.25);
      display: flex; align-items: center; justify-content: center;
    }
    .mm-img-resize-handle::after {
      content: '';
      display: block;
      width: 7px; height: 7px;
      border-right: 2px solid #555;
      border-bottom: 2px solid #555;
    }
    .mm-card-img-wrap:hover .mm-img-resize-handle { opacity: 1; }
    .mm-card-img-add {
      display: block; width: 100%; margin-top: 4px; padding: 5px;
      background: none; border: 1.5px dashed var(--border); border-radius: 6px;
      color: var(--muted); font-size: .7rem; cursor: pointer; text-align: center;
    }
    .mm-card-img-add:hover { border-color: var(--accent2); color: var(--accent2); }

    /* Image picker panel */
    .mm-img-picker {
      position: fixed; z-index: 9999; width: 280px;
      background: var(--surface, #fff); border: 1.5px solid var(--border, #e2e8f0);
      border-radius: 12px; padding: 12px;
      box-shadow: 0 4px 24px rgba(0,0,0,.18);
      max-height: calc(100vh - 16px); overflow-y: auto;
    }
    .mm-img-picker-area {
      width: 100%; min-height: 100px; max-height: 160px; overflow: hidden;
      border-radius: 8px; background: var(--surface2, #f1f5f9);
      display: flex; align-items: center; justify-content: center;
      font-size: .78rem; color: var(--muted); margin-bottom: 8px; line-height: 1.3; text-align: center;
    }
    .mm-img-picker-img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; display: block; }
    .mm-img-paste-area {
      width: 100%; min-height: 80px; margin-bottom: 4px;
      border: 2px dashed var(--border, #e2e8f0); border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: .78rem; color: var(--muted, #94a3b8); cursor: pointer;
      outline: none; transition: border-color .15s, background .15s;
      box-sizing: border-box;
    }
    .mm-img-paste-area:hover, .mm-img-paste-area.focused {
      border-color: var(--accent2, #3b82f6); background: rgba(59,130,246,.05); color: var(--accent2, #3b82f6);
    }
    .mm-img-paste-area.drag-over {
      border-color: var(--accent2, #3b82f6); border-style: solid;
      background: rgba(59,130,246,.10); color: var(--accent2, #3b82f6); transform: scale(1.01);
    }
    .mm-editing .mm-card { cursor: grab; }
    .mm-editing .mm-card:active { cursor: grabbing; }
    .mm-center-node {
      position: relative;
      z-index: 1;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      background: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;
      padding: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,.22);
      box-sizing: border-box;
      flex-shrink: 0;
      justify-self: center;
    }
    /* Center node shape overrides */
    #mmCenterNode.mm-shape-circle  { border-radius: 50%; clip-path: none; }
    #mmCenterNode.mm-shape-rounded { border-radius: 22px; clip-path: none; }
    #mmCenterNode.mm-shape-square  { border-radius: 0; clip-path: none; }
    #mmCenterNode.mm-shape-oval    { border-radius: 50%; clip-path: none; width: 214px; height: 148px; }
    #mmCenterNode.mm-shape-hex     { border-radius: 0; clip-path: polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); }
    #mmCenterNode.mm-shape-oct     { border-radius: 0; clip-path: polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%); }
    #mmCenterNode.mm-shape-cloud   { border-radius: 0; clip-path: path('M 18 128 Q 10 142 35 145 Q 60 152 85 145 Q 110 152 135 145 Q 160 142 152 128 Q 170 118 165 98 Q 174 72 152 64 Q 160 35 138 32 Q 135 10 115 18 Q 104 3 88 14 Q 78 0 65 14 Q 50 4 40 20 Q 22 18 16 40 Q 3 50 6 72 Q 2 98 18 108 Q 8 120 18 128 Z'); }
    #mmCenterNode.mm-shape-hex,
    #mmCenterNode.mm-shape-oct,
    #mmCenterNode.mm-shape-cloud   { box-shadow: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.3)); }
    #mmCenterNode.mm-shape-text    { background: transparent !important; box-shadow: none; clip-path: none; border-radius: 0; width: auto; height: auto; padding: 8px 12px; }

    .mm-center-icon { font-size: 2rem; line-height: 1; }
    .mm-center-name {
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .05em;
      text-align: center;
      line-height: 1.35;
      color: #fff;
      cursor: text;
      margin-top: 4px;
      padding: 2px 4px;
      border-radius: 4px;
      transition: outline .1s;
      word-break: break-word;
      max-width: 130px;
    }
    .mm-center-name[contenteditable="true"] {
      outline: 1.5px solid rgba(255,255,255,.6);
    }
    .mm-center-book  { font-size: 1.3rem; margin-top: 4px; }
    #mmCenterNode.has-center-img .mm-center-name {
      text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.7);
      background: rgba(0,0,0,.28);
      border-radius: 6px;
      padding: 2px 6px;
    }
    #mmCenterNode.has-center-img .mm-center-icon,
    #mmCenterNode.has-center-img .mm-center-book {
      text-shadow: 0 1px 4px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6);
      filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
    }
    .mm-center-img-btn {
      display: none;
      position: absolute;
      bottom: 6px;
      right: 6px;
      background: rgba(0,0,0,.45);
      border: 1.5px solid rgba(255,255,255,.4);
      border-radius: 6px;
      color: #fff;
      font-size: .85rem;
      line-height: 1;
      padding: 3px 5px;
      cursor: pointer;
      z-index: 2;
    }
    .mm-editing #mmCenterNode:hover .mm-center-img-btn,
    .mm-editing #mmCenterNode.has-center-img .mm-center-img-btn { display: block; }
    .mm-font-swatches {
      display: flex;
      gap: 3px;
      align-items: center;
      flex-wrap: nowrap;
    }
    .mm-font-btn {
      height: 26px;
      min-width: 28px;
      padding: 0 6px;
      border-radius: 6px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      font-size: .75rem;
      cursor: pointer;
      transition: border-color .1s, background .1s;
      white-space: nowrap;
    }
    .mm-font-btn:hover { border-color: var(--accent2); }
    .mm-font-btn.active { border-color: var(--accent2); background: var(--accent2); color: #fff; }
    .mm-center-style-btn {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.3);
      background: rgba(255,255,255,.15);
      color: #fff;
      font-size: .72rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: opacity .15s, background .1s;
      padding: 0;
      line-height: 1;
    }
    .mm-center-node:hover .mm-center-style-btn { opacity: 1; }
    .mm-center-style-btn:hover { background: rgba(255,255,255,.3); }

    /* Card groups with branches */
    .mm-card-group {
      display: flex;
      align-items: center;
      gap: 0;
      position: relative;
      z-index: 1;
    }
    .mm-card-group-left  { flex-direction: row-reverse; }
    .mm-card-group-right { flex-direction: row; }

    .mm-branch-connector {
      width: 14px;
      min-width: 14px;
      height: 2.5px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    /* Branch section — vertical spine */
    .mm-branch-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 80px;
    }
    .mm-branch-section-right {
      border-left: 2px solid;
      padding-left: 0;
      align-items: flex-start;
    }
    .mm-branch-section-left {
      border-right: 2px solid;
      padding-right: 0;
      align-items: flex-end;
    }

    /* Branch row — L2 */
    .mm-branch-row {
      display: flex;
      align-items: center;
    }
    .mm-branch-row-right { flex-direction: row; }
    .mm-branch-row-left  { flex-direction: row-reverse; }

    .mm-branch-stub {
      width: 16px;
      min-width: 16px;
      height: 2px;
      flex-shrink: 0;
    }

    .mm-branch-label-line {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .mm-branch-row-left .mm-branch-label-line { flex-direction: row-reverse; }
    .mm-branch-text {
      font-size: .75rem;
      font-weight: 700;
      border-bottom: 2px solid;
      padding-bottom: 1px;
      line-height: 1.4;
      white-space: nowrap;
    }
    /* Box frame style for branches */
    .mm-branch-text.mm-branch-box {
      border-width: 2px;
      border-style: solid;
      border-radius: 8px;
      padding: 2px 10px;
    }
    .mm-sub-text.mm-sub-box {
      border-width: 1.5px;
      border-style: solid;
      border-radius: 6px;
      padding: 1px 7px;
    }

    .mm-branch-x, .mm-branch-style-btn,
    .mm-sub-x, .mm-sub-style-btn {
      flex-shrink: 0;
      width: 13px; height: 13px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font-size: .68rem;
      line-height: 1;
      padding: 0;
      opacity: 0;
      transition: opacity .12s;
    }
    .mm-branch-row:hover .mm-branch-x,
    .mm-branch-row:hover .mm-branch-style-btn { opacity: .6; }
    .mm-branch-x:hover,
    .mm-branch-style-btn:hover { opacity: 1 !important; }
    .mm-bg-dark .mm-branch-x,
    .mm-bg-dark .mm-branch-style-btn,
    .mm-bg-dark .mm-sub-x,
    .mm-bg-dark .mm-sub-style-btn { color: rgba(255,255,255,.9); }

    /* Sub-connector: bridges L2 label → L3 spine */
    .mm-sub-connector {
      width: 14px;
      min-width: 14px;
      height: 1.5px;
      flex-shrink: 0;
    }

    /* L3 sub-branch section — horizontal, further outward */
    .mm-sub-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mm-sub-section-right { border-left: 1.5px solid; }
    .mm-sub-section-left  { border-right: 1.5px solid; align-items: flex-end; }

    .mm-sub-row {
      display: flex;
      align-items: center;
    }
    .mm-sub-row-right { flex-direction: row; }
    .mm-sub-row-left  { flex-direction: row-reverse; }

    .mm-sub-stub {
      width: 12px;
      min-width: 12px;
      height: 1.5px;
      flex-shrink: 0;
    }
    .mm-sub-text {
      font-size: .7rem;
      font-weight: 600;
      border-bottom: 1.5px solid;
      padding-bottom: 1px;
      white-space: nowrap;
    }
    .mm-sub-row:hover .mm-sub-x,
    .mm-sub-row:hover .mm-sub-style-btn { opacity: .6; }
    .mm-sub-x:hover,
    .mm-sub-style-btn:hover { opacity: 1 !important; }

    .mm-sub-add-btn {
      font-size: .62rem;
      padding: 1px 7px;
      border-radius: 999px;
      border: 1.5px dashed;
      background: transparent;
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      opacity: 0;
      transition: opacity .15s;
      align-self: flex-start;
    }
    .mm-sub-section-left .mm-sub-add-btn { align-self: flex-end; }
    .mm-branch-row:hover .mm-sub-add-btn { opacity: .55; }
    .mm-sub-add-btn:hover { opacity: 1 !important; }

    .mm-sub-input {
      font-size: .68rem;
      padding: 2px 7px;
      border-radius: 4px;
      border: 1.5px solid;
      background: var(--bg);
      color: var(--ink);
      font-family: 'Nunito', sans-serif;
      min-width: 70px;
      width: 70px;
      outline: none;
      transition: width .08s;
    }

    .mm-branch-add-btn {
      padding: 2px 9px;
      border-radius: 999px;
      font-size: .68rem;
      font-weight: 700;
      border: 1.5px dashed;
      background: transparent;
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      opacity: .55;
      transition: opacity .12s;
      align-self: flex-start;
    }
    .mm-branch-section-left .mm-branch-add-btn { align-self: flex-end; }
    .mm-branch-add-btn:hover { opacity: 1; }

    .mm-branch-input {
      padding: 3px 8px;
      border-radius: 4px;
      border: 1.5px solid;
      background: var(--bg);
      color: var(--ink);
      font-size: .7rem;
      font-family: 'Nunito', sans-serif;
      font-weight: 600;
      min-width: 80px;
      width: 80px;
      outline: none;
      transition: width .08s;
    }

    /* Cards */
    .mm-card {
      position: relative;
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: 11px 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
      transition: box-shadow .15s;
      width: 168px;
    }
    .mm-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.11); }
    /* Card shape wrapper — badge lives here, outside any clip */
    .mm-card-wrap { position: relative; flex-shrink: 0; }

    /* Card shapes */
    .mm-card.mm-cshape-rounded { border-radius: 24px; }
    .mm-card.mm-cshape-pill    { border-radius: 999px; overflow: hidden; }
    .mm-card.mm-cshape-cloud   {
      border-radius: 0;
      clip-path: url(#mm-card-cloud-clip);
      box-shadow: none;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
      padding: 22px 18px;
    }

    /* Cloud: badge centered on cloud's visible left/right boundary (~14px inset) */
    .mm-card-wrap .mm-card.mm-cshape-cloud ~ .mm-card-num {
      left: 14px; top: 10px;
    }
    .mm-card-wrap-right .mm-card.mm-cshape-cloud ~ .mm-card-num {
      left: auto; right: 14px; top: 10px;
    }
    /* Pill: badge at mid-height where pill is widest */
    .mm-card-wrap .mm-card.mm-cshape-pill ~ .mm-card-num {
      top: 50%; transform: translateY(-50%); left: -13px;
    }
    .mm-card-wrap-right .mm-card.mm-cshape-pill ~ .mm-card-num {
      top: 50%; transform: translateY(-50%); left: auto; right: -13px;
    }

    /* ── Card frame styles ── */
    .mm-frame-dashed  { border-style: dashed !important; }
    .mm-frame-sketch  {
      border-style: dashed !important; border-width: 2.5px !important; border-radius: 8px !important;
      background-image: repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(0,0,0,.045) 5px,rgba(0,0,0,.045) 6px) !important;
    }
    .mm-frame-double  { border-style: solid !important; }
    .mm-frame-double::after {
      content: ''; position: absolute; inset: 3px; border-radius: 10px;
      border: 1.5px solid currentColor; opacity: .45; pointer-events: none;
    }
    .mm-frame-none    { border-color: transparent !important; box-shadow: none !important; }
    .mm-frame-none:hover { box-shadow: none !important; }

    /* Resize handles — edit mode only */
    .mm-resize-e, .mm-resize-s, .mm-resize-se {
      position: absolute;
      opacity: 0;
      transition: opacity .15s;
      z-index: 10;
    }
    .mm-editing .mm-card:hover .mm-resize-e,
    .mm-editing .mm-card:hover .mm-resize-s,
    .mm-editing .mm-card:hover .mm-resize-se { opacity: 1; }
    .mm-resize-e {
      right: -1px; top: 20%; height: 60%; width: 7px;
      cursor: ew-resize;
      background: rgba(99,102,241,.35);
      border-radius: 0 6px 6px 0;
    }
    .mm-resize-s {
      bottom: -1px; left: 20%; width: 60%; height: 7px;
      cursor: ns-resize;
      background: rgba(99,102,241,.35);
      border-radius: 0 0 6px 6px;
    }
    .mm-resize-se {
      right: -1px; bottom: -1px; width: 14px; height: 14px;
      cursor: nwse-resize;
      background: rgba(99,102,241,.5);
      border-radius: 0 0 12px 0;
    }

    .mm-card-num {
      position: absolute;
      top: 10px;
      left: -13px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      color: #fff;
      font-size: .75rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,.18);
    }
    .mm-card-wrap-right .mm-card-num {
      left: auto;
      right: -13px;
    }
    /* Card actions toolbar */
    .mm-card-actions {
      position: absolute;
      top: 4px; right: 4px;
      display: flex;
      gap: 2px;
      opacity: 0;
      transition: opacity .12s;
      z-index: 2;
    }
    .mm-card-right .mm-card-actions { right: auto; left: 4px; }
    .mm-card:hover .mm-card-actions { opacity: 1; }
    .mm-card-fmt, .mm-card-x {
      width: 20px; height: 20px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      font-size: .72rem;
      cursor: pointer;
      line-height: 1;
      padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background .12s, border-color .12s, color .12s;
    }
    .mm-card-fmt:hover { background: var(--surface2); border-color: var(--accent2); color: var(--accent2); }
    .mm-card-x:hover   { background: #fee2e2; border-color: #dc2626; color: #dc2626; }

    /* Card slot wrapper */
    .mm-card-slot { display: flex; flex-direction: column; gap: 5px; position: relative; }

    /* Format panel */
    .mm-fmt-panel {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      box-shadow: 0 6px 24px rgba(0,0,0,.14);
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 30;
      min-width: 220px;
    }
    .mm-card-group-left .mm-fmt-panel { left: auto; right: 0; }
    .mm-fmt-row {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
    }
    .mm-fmt-label {
      font-size: .68rem;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
      min-width: 46px;
    }
    .mm-fmt-target-row {
      display: flex;
      gap: 3px;
      flex-shrink: 0;
    }
    .mm-fmt-target-btn {
      padding: 3px 9px;
      border-radius: 999px;
      border: 1.5px solid var(--border);
      background: transparent;
      font-family: 'Nunito', sans-serif;
      font-size: .78rem;
      font-weight: 700;
      color: var(--text);
      cursor: pointer;
      transition: background .12s, border-color .12s, color .12s;
      white-space: nowrap;
    }
    .mm-fmt-target-btn:hover  { border-color: var(--accent2); color: var(--accent2); }
    .mm-fmt-target-btn.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }

    .mm-fmt-swatches {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .mm-fmt-swatch {
      width: 18px; height: 18px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      padding: 0;
      transition: transform .1s, border-color .1s;
      flex-shrink: 0;
    }
    .mm-fmt-swatch:hover  { transform: scale(1.2); border-color: rgba(0,0,0,.2); }
    .mm-fmt-swatch.active { border-color: var(--ink); transform: scale(1.15); }
    .mm-fmt-btns {
      display: flex;
      gap: 5px;
      padding-top: 4px;
      border-top: 1px solid var(--border);
      margin-top: 3px;
    }
    .mm-fmt-btn {
      padding: 4px 10px;
      border-radius: 6px;
      border: 1.5px solid var(--border);
      background: var(--bg);
      color: var(--ink);
      font-size: .8rem;
      font-family: 'Nunito', sans-serif;
      cursor: pointer;
      transition: background .12s, border-color .12s;
    }
    .mm-fmt-btn:hover  { border-color: var(--accent2); }
    .mm-fmt-btn.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }
    .mm-icon-btn { padding: 2px 5px; font-size: 1.1rem; line-height: 1; }

    .mm-fmt-target-sel {
      padding: 4px 6px;
      border-radius: 6px;
      border: 1.5px solid var(--border);
      background: var(--bg);
      color: var(--ink);
      font-size: .8rem;
      font-family: 'Nunito', sans-serif;
      cursor: pointer;
      height: 28px;
      transition: border-color .12s;
    }
    .mm-fmt-target-sel:hover { border-color: var(--accent2); }

    .mm-card-word {
      font-size: .92rem;
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1.2;
      text-align: center;
      text-transform: uppercase;
      cursor: pointer;
    }

    /* Inline-editable fields (added in edit mode) */
    .mm-ce { outline: none; border-radius: 3px; }
    .mm-editing .mm-ce { cursor: text; }
    .mm-editing .mm-ce:hover { background: rgba(42,122,224,.08); }
    .mm-editing .mm-ce:focus {
      background: rgba(42,122,224,.13);
      box-shadow: 0 0 0 1.5px rgba(42,122,224,.45);
    }
    .mm-editing .mm-ce:empty::before {
      content: attr(data-placeholder);
      color: var(--muted);
      font-style: italic;
      opacity: .7;
      pointer-events: none;
    }
    .mm-editing .mm-card-word { cursor: text; }
    .mm-card-selected {
      box-shadow: 0 0 0 2.5px var(--accent2), 0 4px 16px rgba(0,0,0,.15);
    }
    .mm-card-ipa { font-size: .73rem; color: var(--muted); margin-top: 2px; text-align: center; }
    .mm-card-pos {
      font-size: .78rem;
      color: var(--ink);
      margin-top: 4px;
      text-align: center;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      line-height: 1.4;
    }
    .mm-pos-badge { font-weight: 700; font-size: .64rem; padding: 1px 5px; border-radius: 4px; letter-spacing: .03em; display: inline-block; }
    .mm-card-word-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; justify-content: center; }
    .mm-cefr-badge {
      display: inline-block; font-size: .58rem; font-weight: 700; letter-spacing: .04em;
      padding: 1px 5px; border-radius: 4px; line-height: 1.5; vertical-align: middle;
      flex-shrink: 0;
    }
    .mm-cefr-a1 { background: #dcfce7; color: #166534; }
    .mm-cefr-a2 { background: #d1fae5; color: #065f46; }
    .mm-cefr-b1 { background: #dbeafe; color: #1e40af; }
    .mm-cefr-b2 { background: #e0e7ff; color: #3730a3; }
    .mm-cefr-c1 { background: #ede9fe; color: #5b21b6; }
    .mm-cefr-c2 { background: #fce7f3; color: #9d174d; }
    .mm-card-ex-row {
      font-size: .73rem;
      color: var(--muted);
      margin-top: 5px;
      line-height: 1.45;
      overflow-wrap: break-word;
      word-break: break-word;
      text-align: center;
    }
    .mm-card-ex-view { cursor: pointer; }
    .mm-card-ex-pfx { pointer-events: none; }
    .mm-card-ex { display: inline; }

    /* Sticker picker panel */
    /* ── Sample picker ── */
    .mm-sample-picker {
      position: fixed;
      z-index: 120;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,.18);
      padding: 14px 16px;
      width: 380px;
      max-height: 70vh;
      overflow-y: auto;
      box-sizing: border-box;
    }
    .mm-sample-card {
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      transition: box-shadow .15s, border-color .15s;
    }
    .mm-sample-card:hover { border-color: var(--accent2); box-shadow: 0 2px 12px rgba(59,130,246,.18); }
    .mm-sample-preview {
      width: 100%; height: 90px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 10px; box-sizing: border-box;
    }
    .mm-sample-center {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,.25);
      overflow: hidden;
    }
    /* ── /Sample picker ── */

    /* ── Mindmap Fullscreen Slideshow ── */
    .mm-slideshow {
      position: fixed; inset: 0; z-index: 9999;
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 20px;
      user-select: none;
    }
    .mm-slide-close {
      position: absolute; top: 20px; right: 24px;
      background: rgba(255,255,255,.12); border: none; color: #fff;
      width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem;
      cursor: pointer; transition: background .15s;
    }
    .mm-slide-close:hover { background: rgba(255,255,255,.25); }
    .mm-slide-counter {
      position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
      color: rgba(255,255,255,.6); font-size: .85rem; font-weight: 700;
      letter-spacing: .08em; font-family: 'Nunito', sans-serif;
    }
    .mm-slide-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2);
      color: #fff; width: 54px; height: 54px; border-radius: 50%;
      font-size: 1.5rem; cursor: pointer; transition: background .15s, transform .15s;
      display: flex; align-items: center; justify-content: center;
    }
    .mm-slide-nav:hover { background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.08); }
    .mm-slide-prev { left: 28px; }
    .mm-slide-next { right: 28px; }
    .mm-slide-stage {
      width: min(680px, 88vw);
      min-height: 300px;
      display: flex; align-items: center; justify-content: center;
    }
    .mm-slide-card-wrap {
      width: 100%;
      background: rgba(255,255,255,.96);
      border-radius: 28px;
      padding: 48px 52px 40px;
      box-shadow: 0 40px 100px rgba(0,0,0,.5);
      text-align: center;
      animation: mmSlideIn .25s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes mmSlideIn {
      from { opacity: 0; transform: scale(.94) translateY(12px); }
      to   { opacity: 1; transform: scale(1)   translateY(0); }
    }
    .mm-slide-word {
      font-size: 3.2rem; font-weight: 900; line-height: 1.1;
      margin-bottom: 6px; letter-spacing: -.02em;
    }
    .mm-slide-ipa {
      font-size: 1.15rem; color: #6b7280; margin-bottom: 14px; letter-spacing: .02em;
    }
    .mm-slide-pos-wrap { margin-bottom: 12px; }
    .mm-slide-pos {
      display: inline-block; font-size: .78rem; font-weight: 800; font-style: italic;
      padding: 3px 12px; border-radius: 999px; color: #fff; margin-right: 8px;
    }
    .mm-slide-meaning {
      font-size: 1.55rem; font-weight: 700; color: #1e293b; line-height: 1.4;
    }
    .mm-slide-ex {
      margin-top: 18px; font-size: .95rem; color: #475569; font-style: italic;
      line-height: 1.6; border-top: 1px dashed #e2e8f0; padding-top: 14px;
    }
    .mm-slide-branches {
      margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    }
    .mm-slide-branch-chip {
      background: rgba(0,0,0,.06); border-radius: 999px;
      padding: 4px 14px; font-size: .82rem; color: #334155;
    }
    .mm-slide-cefr {
      display: inline-block; font-size: .68rem; font-weight: 800;
      padding: 2px 9px; border-radius: 999px; color: #fff; margin-left: 8px;
      vertical-align: middle;
    }
    .mm-slide-dots {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 8px;
    }
    .mm-slide-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(255,255,255,.3); cursor: pointer; transition: background .2s, transform .2s;
    }
    .mm-slide-dot.active { background: #fff; transform: scale(1.3); }
    /* ── /Mindmap Fullscreen Slideshow ── */

    .mm-bg-picker {
      position: fixed;
      z-index: 120;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,.18);
      padding: 12px 14px 14px;
      width: 240px;
      box-sizing: border-box;
    }
    .mm-bg-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 7px;
    }
    .mm-bg-swatch {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 7px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform .12s, border-color .12s;
      display: flex; align-items: center; justify-content: center;
    }
    .mm-bg-swatch:hover { transform: scale(1.15); }
    .mm-bg-swatch.active { border-color: var(--accent2, #3b82f6); box-shadow: 0 0 0 2px rgba(59,130,246,.35); }
    .mm-bg-pat-btn {
      padding: 4px 10px; font-size: .82rem; border-radius: 6px; cursor: pointer;
      border: 1.5px solid var(--border); background: var(--surface2); color: var(--ink);
      transition: background .12s, border-color .12s;
    }
    .mm-bg-pat-btn:hover  { background: var(--surface3, #e2e8f0); }
    .mm-bg-pat-btn.active { background: var(--accent2, #3b82f6); color: #fff; border-color: var(--accent2, #3b82f6); }

    .mm-sticker-picker {
      position: absolute;
      top: 48px; right: 18px;
      z-index: 120;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,.18);
      padding: 12px 14px 14px;
      width: 420px;
      max-height: 340px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mm-sticker-search-row {
      padding: 0 2px 2px;
    }
    .mm-sticker-search {
      width: 100%;
      box-sizing: border-box;
      padding: 5px 12px;
      border: 1.5px solid var(--border);
      border-radius: 20px;
      font-size: 13px;
      outline: none;
      background: var(--bg, #fff);
      color: var(--text);
      transition: border-color .15s;
    }
    .mm-sticker-search:focus {
      border-color: var(--accent2, #22c55e);
    }
    .mm-sticker-empty {
      grid-column: 1 / -1;
      padding: 12px 0;
      text-align: center;
      color: var(--muted);
      font-size: .85rem;
    }
    .mm-sticker-size-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .mm-sticker-size-label {
      font-size: .75rem;
      color: var(--muted);
      flex-shrink: 0;
    }
    .mm-sticker-sz-opt {
      padding: 3px 10px;
      border-radius: 20px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      font-size: .75rem;
      cursor: pointer;
      color: var(--ink);
      transition: background .1s, border-color .1s;
    }
    .mm-sticker-sz-opt:hover  { border-color: var(--accent2); }
    .mm-sticker-sz-opt.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }
    .mm-sticker-tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .mm-sticker-tab {
      padding: 3px 9px;
      border-radius: 20px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      font-size: .73rem;
      cursor: pointer;
      color: var(--ink);
      transition: background .1s, border-color .1s;
    }
    .mm-sticker-tab:hover  { border-color: var(--accent2); }
    .mm-sticker-tab.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }
    .mm-sticker-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 2px;
      overflow-y: auto;
      flex: 1;
      max-height: 200px;
    }
    .mm-sticker-item {
      background: none;
      border: 1.5px solid transparent;
      border-radius: 7px;
      font-size: 1.35rem;
      cursor: pointer;
      padding: 3px;
      text-align: center;
      transition: background .1s, transform .1s;
      line-height: 1;
    }
    .mm-sticker-item:hover { background: var(--surface2); transform: scale(1.3); border-color: var(--border); }

    /* Placed sticker elements */
    .mm-sticker-el {
      position: absolute;
      cursor: grab;
      user-select: none;
      z-index: 20;
      display: inline-flex;
      align-items: flex-start;
      gap: 2px;
      line-height: 1;
    }
    .mm-sticker-el:hover .mm-sticker-ctrl { opacity: 1; }
    .mm-sticker-el.mm-sticker-dragging { cursor: grabbing; filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); }
    .mm-sticker-face { line-height: 1; display: block; }
    .mm-sticker-ctrl {
      display: flex;
      flex-direction: column;
      gap: 2px;
      opacity: 0;
      transition: opacity .15s;
      flex-shrink: 0;
    }
    .mm-sticker-del,
    .mm-sticker-sz-up,
    .mm-sticker-sz-dn {
      width: 16px; height: 16px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      font-size: .65rem;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background .1s;
    }
    .mm-sticker-del:hover   { background: #fee2e2; border-color: #dc2626; color: #dc2626; }
    .mm-sticker-sz-up:hover,
    .mm-sticker-sz-dn:hover { background: var(--surface2); border-color: var(--accent2); color: var(--accent2); }

    /* Line style toggle */
    .mm-line-toggle {
      display: flex;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .mm-line-btn {
      padding: 5px 9px;
      font-size: .75rem;
      font-weight: 700;
      font-family: 'Nunito', sans-serif;
      border: none;
      background: var(--surface);
      color: var(--muted);
      cursor: pointer;
      transition: background .12s, color .12s;
      white-space: nowrap;
    }
    .mm-line-btn + .mm-line-btn { border-left: 1.5px solid var(--border); }
    .mm-line-btn:hover  { background: var(--surface2); color: var(--ink); }
    .mm-line-btn.active { background: var(--accent2); color: #fff; }
    .mm-anchor-btn { padding: 5px 9px; font-size: .75rem; font-weight: 700; background: none; border: none; cursor: pointer; color: var(--muted); transition: background .12s, color .12s; white-space: nowrap; }
    .mm-anchor-btn:hover  { background: var(--surface2); color: var(--ink); }
    .mm-anchor-btn.active { background: var(--accent2); color: #fff; }
    .mm-line-sep { width: 1.5px; background: var(--border); flex-shrink: 0; }

    /* Curved/dashed/elbow mode: hide CSS structural connectors — SVG draws them instead */
    .mm-line-curved        .mm-branch-connector,
    .mm-line-curved-arrow  .mm-branch-connector,
    .mm-line-straight      .mm-branch-connector,
    .mm-line-dashed        .mm-branch-connector,
    .mm-line-elbow         .mm-branch-connector { opacity: 0; }
    .mm-line-curved        .mm-branch-section,
    .mm-line-curved-arrow  .mm-branch-section,
    .mm-line-dashed        .mm-branch-section,
    .mm-line-elbow         .mm-branch-section   { border-color: transparent !important; }
    .mm-line-curved        .mm-branch-stub,
    .mm-line-curved-arrow  .mm-branch-stub,
    .mm-line-dashed        .mm-branch-stub,
    .mm-line-elbow         .mm-branch-stub      { opacity: 0; }
    .mm-line-curved        .mm-sub-connector,
    .mm-line-curved-arrow  .mm-sub-connector,
    .mm-line-dashed        .mm-sub-connector,
    .mm-line-elbow         .mm-sub-connector    { opacity: 0; }
    .mm-line-curved        .mm-sub-section,
    .mm-line-curved-arrow  .mm-sub-section,
    .mm-line-dashed        .mm-sub-section,
    .mm-line-elbow         .mm-sub-section      { border-color: transparent !important; }
    .mm-line-curved        .mm-sub-stub,
    .mm-line-curved-arrow  .mm-sub-stub,
    .mm-line-straight      .mm-sub-stub,
    .mm-line-dashed        .mm-sub-stub,
    .mm-line-elbow         .mm-sub-stub         { opacity: 0; }

    /* Format toolbar */
    .mm-fmt-bar {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 18px;
      background: var(--surface);
      border-bottom: 1.5px solid var(--accent2);
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    .mm-fmt-bar-name {
      font-weight: 800;
      font-size: .82rem;
      color: var(--ink);
      margin-right: 4px;
      white-space: nowrap;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mm-fmt-sep {
      width: 1px;
      height: 20px;
      background: var(--border);
      flex-shrink: 0;
      margin: 0 2px;
    }
    .mm-fmt-label, .mm-fmt-bar-label {
      font-size: .82rem;
      font-weight: 700;
      color: #111;
      flex-shrink: 0;
    }
    .mm-fmt-swatches {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-wrap: wrap;
      max-width: 280px;
    }
    .mm-fmt-swatch {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform .1s, border-color .1s;
    }
    .mm-fmt-swatch:hover { transform: scale(1.25); }
    .mm-fmt-swatch.active { border-color: var(--ink); transform: scale(1.15); }
    .mm-fmt-btns {
      display: flex;
      gap: 3px;
      align-items: center;
    }
    .mm-fmt-btn {
      min-width: 28px;
      height: 26px;
      border-radius: 6px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      font-size: .78rem;
      cursor: pointer;
      padding: 0 6px;
      display: flex; align-items: center; justify-content: center;
      transition: background .12s, border-color .12s;
    }
    .mm-fmt-btn:hover  { border-color: var(--accent2); background: var(--surface2); }
    .mm-fmt-btn.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }

    /* Map folder tabs */
    .mm-map-tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      overflow-x: auto;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      scrollbar-width: none;
    }
    .mm-map-tabs::-webkit-scrollbar { display: none; }
    .mm-map-tab {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      font-size: .8rem;
      font-weight: 700;
      font-family: 'Nunito', sans-serif;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background .12s, border-color .12s;
    }
    .mm-map-tab:hover { border-color: var(--accent2); }
    .mm-map-tab.active {
      background: var(--accent2);
      border-color: var(--accent2);
      color: #fff;
    }
    .mm-map-tab-x {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font-size: .75rem;
      line-height: 1;
      padding: 0;
      opacity: .5;
      transition: opacity .12s, background .12s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mm-map-tab-x:hover { opacity: 1; background: rgba(0,0,0,.15); border-radius: 50%; }
    .mm-map-tab.active .mm-map-tab-x:hover { background: rgba(255,255,255,.25); }
    .mm-map-new {
      padding: 5px 12px;
      border-radius: 8px;
      border: 1.5px dashed var(--border);
      background: transparent;
      color: var(--muted);
      font-size: .8rem;
      font-weight: 700;
      font-family: 'Nunito', sans-serif;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: color .12s, border-color .12s;
    }
    .mm-map-new:hover { color: var(--accent2); border-color: var(--accent2); }

    /* Mindmap word edit modal */
    .mm-edit-field { display:flex; flex-direction:column; gap:4px; margin-bottom:11px; }
    .mm-edit-label { font-size:.75rem; font-weight:700; color:var(--muted); }
    .mm-edit-input {
      padding: 7px 11px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--bg);
      color: var(--ink);
      font-family: 'Nunito', sans-serif;
      font-size: .88rem;
      outline: none;
      width: 100%;
      box-sizing: border-box;
      transition: border-color .15s;
    }
    .mm-edit-input:focus { border-color: var(--accent2); }

    /* source-grid 4 cards */
    .source-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

    /* Pre-print preview: same hiding as @media print so SVG lines are recalculated correctly */
    #screen-mindmap.mm-print-preview .mm-topbar,
    #screen-mindmap.mm-print-preview .mm-map-tabs,
    #screen-mindmap.mm-print-preview #mmFmtBar,
    #screen-mindmap.mm-print-preview #mmCenterStyleBar,
    #screen-mindmap.mm-print-preview #mmStickerPicker,
    #screen-mindmap.mm-print-preview .mm-edit-only,
    #screen-mindmap.mm-print-preview #mmEditBtn { display: none !important; }
    #screen-mindmap.mm-print-preview .mm-card-x,
    #screen-mindmap.mm-print-preview .mm-center-style-btn,
    #screen-mindmap.mm-print-preview .mm-branch-add-btn { visibility: hidden; }
    #screen-mindmap.mm-print-preview .mm-viewport { overflow: visible !important; }

    @media print {
      @page { size: auto; margin: 0; }
      body > * { display: none !important; }
      #screen-mindmap {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
      }
      .mm-sticky-header, .mm-topbar, .mm-map-tabs, #mmEmptyState, #mmFmtBar, #mmCenterStyleBar,
      #mmStickerPicker, #mmBgPicker, .mm-card-x, .mm-branch-x, .mm-branch-add-btn,
      .mm-branch-input, .mm-center-style-btn, .mm-sticker-ctrl,
      .mm-edit-only, #mmEditBtn { display: none !important; }
      .mm-viewport { overflow: visible !important; flex: 1 !important; }
      .mm-canvas { min-height: 0 !important; }
      .mm-card, .mm-center-node, .mm-viewport { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .mm-sticker-el .mm-sticker-ctrl { display: none !important; }
    }

    /* ── Dictation ── */
    .dictation-ctrl-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px 0 14px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 16px;
    }
    .dict-speed-row {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .dict-speed-row input[type="range"] { width: 80px; }

    .dictation-text {
      font-size: 1.18rem;
      line-height: 2.7;
      color: var(--text);
    }

    .dict-blank-wrap { display: inline; }

    .dict-blank {
      border: none;
      border-bottom: 2.5px solid var(--accent2);
      background: transparent;
      color: var(--text);
      font-size: 1.18rem;
      font-family: inherit;
      outline: none;
      text-align: center;
      padding: 0 2px;
      vertical-align: baseline;
      transition: border-color .15s, background .15s, color .15s;
    }
    .dict-blank:focus { border-bottom-color: var(--accent1, #2563eb); }
    .dict-blank.correct  { border-color: #1a7a3c; color: #1a7a3c; }
    .dict-blank.incorrect { border-color: #c0392b; color: #c0392b; }
    .dict-blank.revealed  { border-color: var(--muted); color: var(--muted); font-style: italic; }

@media(max-width:600px) {
      .hero { padding: 8px 12px; gap: 6px; overflow: hidden; flex-wrap: nowrap; }
      .logo-icon { width: 30px; height: 30px; font-size: .9rem; }
      .logo-text { font-size: 1rem; }
      [data-i18n="hero.tagline"] { display: none; }
      .hero-right { display: none; }
      /* Profile: avatar only — hide name and logout */
      #authUserWrap { gap: 0; }
      #authUserWrap #authDisplayNameEl { display: none; }
      #authUserWrap #authAvatarEl { width: 26px; height: 26px; font-size: .85rem; }
      #authUserWrap #authUserBtn { padding: 0; width: 30px; height: 30px; border-radius: 50%; justify-content: center; }
      .auth-logout-btn { display: none !important; }
      /* Lang button compact, hide tour + theme */
      #langToggleBtn { font-size: .7rem; padding: 0 8px; height: 28px; }
      .hero > .tour-replay-btn { display: none !important; }
      #mainBgWrap { display: inline-flex; }
      .main-bg-toggle { height: 28px; padding: 0 9px; font-size: .75rem; }
      .main-bg-toggle span[data-i18n] { display: none; }
      .home-layout { display: block; overflow: hidden; }
      #homeDictSidebar, #lbSidebar { display: none !important; }
      .main-content { padding: 16px 12px 60px; width: 100%; max-width: 100%; box-sizing: border-box; }
      .topic-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
      .topic-card { padding: 12px 6px 10px; }
      .topic-icon { font-size: 1.6rem; margin-bottom: 5px; }
      .topic-name { font-size: .72rem; }
      .main-vocab-section { grid-template-columns: repeat(2, 1fr); }
      .vocab-topic-card { padding: 16px 12px; }

      .source-grid { grid-template-columns: repeat(2, 1fr); }
      .source-card { padding: 16px 12px; }
      .source-card-icon { font-size: 2rem; margin-bottom: 7px; }
      .source-card-title { font-size: .85rem; }
      .source-card-desc { font-size: .68rem; }

      .yt-player-bar iframe {
        height: 170px
      }

      /* ── Synonyms & Antonyms mobile ── */
      .sa-tab-btn { padding: 3px 5px; font-size: .58rem; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
      .sa-tab-cnt { font-size: .55rem; min-width: 13px; height: 13px; padding: 0 3px; margin-left: 2px; }
      .sa-tabs-bar { gap: 4px; padding-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .sa-tabs-bar::-webkit-scrollbar { display: none; }
      .sa-font-lbl { display: none; }
      .sa-font-btn { padding: 2px 6px; font-size: .7rem; }
      .sa-ex-all-btn { font-size: .72rem; padding: 4px 8px; }
      .sa-branch-head { padding: 6px 10px; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
      .sa-branch-type { font-size: .65rem; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; }
      .sa-branch-headword { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .sa-branch-count { font-size: .68rem; white-space: nowrap; flex-shrink: 0; }
      .sa-edit-entry-btn { font-size: .68rem; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; }
      .sa-add-ant-btn { font-size: .68rem; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; margin-left: 0; }
      .sa-mobile-words-btn {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 5px 11px; border-radius: 999px;
        border: 1.5px solid #0891b2; background: #ecfeff;
        font-size: .76rem; font-weight: 700; color: #0e7490;
        cursor: pointer; flex-shrink: 0; white-space: nowrap;
      }
      .sa-mobile-list-close {
        display: flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 50%;
        border: 1.5px solid #a5f3fc; background: #fff;
        font-size: .85rem; color: #0891b2; cursor: pointer; flex-shrink: 0;
      }
      .sa-mobile-backdrop {
        display: none; position: absolute; inset: 0; z-index: 4;
        background: rgba(0,0,0,.25);
      }
      .sa-overlay.sa-list-open .sa-mobile-backdrop { display: block; }
      .sa-body { position: relative; }
      .sa-left {
        position: absolute; bottom: 0; left: 0; right: 0;
        width: 100%; height: 72vh; z-index: 5;
        border-right: none; border-top: 2px solid #a5f3fc;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 -4px 24px rgba(0,0,0,.12);
      }
      .sa-overlay.sa-list-open .sa-left { transform: translateY(0); }
      .sa-resizer { display: none; }
      .sa-header { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
      .sa-title { font-size: .9rem; }
      .sa-bg-controls, .rw-bg-controls, .vc-bg-controls, .gr-bg-controls { display: none !important; }
      .sa-ex-all-btn { font-size: .72rem; padding: 4px 8px; }

      /* ── Role-Play mobile ── */
      .rp-body { position: relative; overflow: hidden; }
      .rp-left { width: 100% !important; min-width: 0 !important; border-right: none; }
      .rp-resizer { display: none; }
      .rp-right {
        position: absolute; inset: 0; z-index: 2;
        transform: translateX(100%); transition: transform .28s ease;
        background: var(--rp-bg, #faf5ff);
      }
      .rp-body.rp-folder-selected .rp-right { transform: translateX(0); }
      .rp-mobile-back-bar { display: flex; align-items: center; padding: 6px 10px; border-bottom: 1px solid #ddd6fe; flex-shrink: 0; }
      .rp-mobile-back-btn {
        background: none; border: none; color: #7c3aed; font-size: .85rem;
        font-weight: 700; cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 4px;
      }
      .rp-bg-controls { display: none !important; }

      /* ── Grammar mobile ── */
      .gr-body { position: relative; overflow: hidden; }
      .gr-left { width: 100% !important; min-width: 0 !important; border-right: none; }
      .gr-resizer { display: none; }
      .gr-right {
        position: absolute; inset: 0; z-index: 2;
        transform: translateX(100%); transition: transform .28s ease;
        background: var(--gr-bg, #f0fdfa);
      }
      .gr-body.gr-folder-selected .gr-right { transform: translateX(0); }
      .gr-mobile-back-bar { display: flex; align-items: center; padding: 6px 10px; border-bottom: 1px solid #99f6e4; flex-shrink: 0; }
      .gr-mobile-back-btn {
        background: none; border: none; color: #0d9488; font-size: .85rem;
        font-weight: 700; cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 4px;
      }

      /* ── Randomize mobile ── */
      .rz-body { position: relative; overflow: hidden; }
      .rz-input-panel { width: 100% !important; min-width: 0 !important; }
      .rz-resizer#rzResizer { display: none; }
      .rz-result-panel {
        position: absolute; inset: 0; z-index: 2;
        transform: translateX(100%); transition: transform .28s ease;
        background: #fff; padding: 0 16px 16px; overflow-y: auto;
        align-items: center; justify-content: flex-start;
      }
      .rz-body.rz-list-selected .rz-result-panel { transform: translateX(0); }
      .rz-mobile-back-bar { display: flex; align-items: center; padding: 8px 0 4px; flex-shrink: 0; width: 100%; }
      .rz-mobile-back-btn {
        background: none; border: none; color: #7c3aed; font-size: .85rem;
        font-weight: 700; cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 4px;
      }
      .rz-mobile-start-btn {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 5px 12px; border-radius: 8px; border: none;
        background: #7c3aed; color: #fff; font-size: .82rem; font-weight: 700;
        cursor: pointer;
      }
      .rz-mobile-start-btn:active { background: #6d28d9; }
    }

    /* ══ YOUTUBE LEARN SCREEN ══ */
    #screen-youtube.active {
      display: flex !important;
      flex-direction: column;
      height: 100dvh;
      overflow: hidden;
      min-height: unset;
      background: var(--bg); /* nền đặc để không lộ background trang chủ phía dưới */
    }

    /* ── YouTube — Dark mode ── */
    .yt-dark-toggle {
      flex-shrink: 0; cursor: pointer; line-height: 1;
      font-size: 1rem; padding: 5px 10px; border-radius: 999px;
      background: var(--surface); border: 1.5px solid var(--border);
      transition: all .18s;
    }
    .yt-dark-toggle:hover { border-color: var(--accent2); }
    #screen-youtube.yt-dark {
      --bg: #141416; --bg2: #1a1a1d;
      --surface: #1f1f24; --surface2: #26262b;
      --border: #36363c; --border2: #44444b;
      --ink: #e9e7e3; --ink2: #c4c0ba; --muted: #8c887f;
      --yt-text-color: #e9e7e3;
      background: #141416;
    }
    #screen-youtube.yt-dark .yt-lcol-player { background: #161618; }
    #screen-youtube.yt-dark .yt-lcol-dict { background: #1f1f24; }
    #screen-youtube.yt-dark #ytTpScroll { background: #161618 !important; }
    #screen-youtube.yt-dark .yt-sent { background: #1f1f24; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
    #screen-youtube.yt-dark .yt-sent:hover { background: #26262b; border-left-color: rgba(224,92,42,.55); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
    #screen-youtube.yt-dark .yt-sent.active { background: #2c241f; box-shadow: 0 2px 10px rgba(224,92,42,.2); }
    #screen-youtube.yt-dark input[type="text"],
    #screen-youtube.yt-dark input[type="url"],
    #screen-youtube.yt-dark textarea,
    #screen-youtube.yt-dark select,
    #screen-youtube.yt-dark .ctrl-select { background: #26262b; color: #e9e7e3; border-color: #44444b; }
    #screen-youtube.yt-dark .yt-dark-toggle { background: #26262b; border-color: #44444b; }
    #screen-youtube.yt-dark .yt-seek-btn,
    #screen-youtube.yt-dark .yt-aspd-btn { background: #26262b; color: #e9e7e3; border-color: #44444b; }
    #screen-youtube.yt-dark .yt-sent-vi { color: #93b4ec; }

    .yt-lbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
      z-index: 10;
      position: relative;
    }

    .yt-lbar-title {
      flex: 1;
      font-size: .88rem;
      font-weight: 800;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }
    .yt-sys-badge {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 2px 8px; border-radius: 99px; flex-shrink: 0;
      background: #dbeafe; color: #1d4ed8;
      font-size: .68rem; font-weight: 800; letter-spacing: .02em;
      border: 1px solid #bfdbfe;
    }

    .yt-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--border);
      background: var(--bg2);
      font-family: 'Nunito', sans-serif;
      font-size: .73rem;
      font-weight: 800;
      color: var(--ink2);
      cursor: pointer;
      transition: all .15s;
      flex-shrink: 0;
      user-select: none
    }

    .yt-pill:hover {
      border-color: var(--accent2);
      color: var(--accent2)
    }

    .yt-pill.on {
      border-color: var(--accent2);
      background: var(--blue-soft);
      color: var(--accent2)
    }

    .yt-file-warn {
      background: #fff8e1;
      border-bottom: 2px solid #f59e0b;
      padding: 10px 16px;
      font-size: .76rem;
      color: #78350f;
      display: none;
      flex-shrink: 0;
      line-height: 1.65
    }

    .yt-file-warn code {
      background: rgba(0, 0, 0, .09);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: monospace;
      font-size: .85em
    }

    .yt-lbody {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0
    }

    .yt-lcol-player {
      width: 100%;
      background: #0f0f0f;
      flex-shrink: 0;
      position: relative;
    }

    .yt-lbody {
      flex: 1;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      min-height: 0
    }

    .yt-lcol-player {
      width: 55%;
      max-width: 900px;
      background: #f9fafb;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow-y: auto;
      border-right: 1px solid var(--border);
      transition: width .22s cubic-bezier(.4,0,.2,1);
    }
    .yt-lbody.dict-open .yt-lcol-player {
      width: 38%;
    }

    .yt-lcol-transcript {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--surface);
      user-select: none;
      position: relative;
    }

    /* ── Dictionary lookup sidebar ── */
    .yt-lcol-dict {
      width: 300px;
      min-width: 300px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-left: 1px solid var(--border);
      overflow: hidden;
      transition: width .22s ease, min-width .22s ease, opacity .18s;
      opacity: 1;
    }
    .yt-lcol-dict.dict-hidden {
      width: 0;
      min-width: 0;
      opacity: 0;
      pointer-events: none;
    }
    /* ── Dict panel header ── */
    .yt-dc-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px 10px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .home-dict-sidebar .yt-dc-panel-header { padding-left: 8px; }
    .home-dict-sidebar .yt-dict-search-bar { padding: 10px 8px; gap: 6px; }
    .home-dict-sidebar .yt-dict-search-inner { min-width: 0; }
    .home-dict-sidebar .yt-dict-tra-btn { padding: 0 11px; }
    .yt-dc-panel-title { font-size: .84rem; font-weight: 900; color: var(--ink); }
    .yt-dc-panel-close {
      background: none; border: none; cursor: pointer;
      font-size: 1rem; color: var(--muted); padding: 0 2px; line-height: 1;
    }
    .yt-dc-panel-close:hover { color: var(--ink2); }

    /* ── Search bar ── */
    .yt-dict-search-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .yt-dict-search-inner {
      flex: 1; display: flex; align-items: center; gap: 6px;
      height: 36px; padding: 0 12px;
      background: var(--surface2); border: 1.5px solid var(--border);
      border-radius: 999px; cursor: text;
      transition: border-color .15s, background .15s;
    }
    .yt-dict-search-inner:focus-within {
      border-color: #e05c2a; background: #fff;
    }
    .yt-dict-search-icon { font-size: .8rem; color: var(--muted); flex-shrink: 0; }
    .yt-dict-q-input {
      flex: 1; min-width: 0; border: none; background: transparent; outline: none;
      font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 700;
      color: var(--ink2);
    }
    .yt-dict-q-input[type="search"]::-webkit-search-cancel-button { display: none; }
    .yt-dict-tra-btn {
      height: 36px; padding: 0 12px; flex-shrink: 0;
      border-radius: 999px; border: none;
      background: #007f66; color: #fff;
      font-family: 'Nunito', sans-serif; font-size: .72rem; font-weight: 800;
      cursor: pointer; transition: background .15s; white-space: nowrap;
    }
    .yt-dict-tra-btn:hover { background: #333; }

    /* ── Result container ── */
    .yt-dict-result { flex: 1; overflow-y: auto; padding: 0; }
    .yt-dc-empty {
      font-size: .78rem; color: var(--muted); text-align: center;
      padding: 32px 16px; font-style: italic;
    }
    .yt-dc-loading {
      font-size: .82rem; color: var(--muted); text-align: center; padding: 28px 16px;
    }

    /* ── Card ── */
    .yt-dc-card { display: flex; flex-direction: column; }
    .yt-dc-sentence-ctx {
      font-size: .78rem; line-height: 1.55; color: var(--muted);
      padding: 8px 14px 10px; border-top: 1px solid var(--border);
      margin-top: 2px;
    }
    .yt-dc-sentence-ctx mark { background: #fef9c3; color: inherit; border-radius: 3px; padding: 0 1px; }
    .yt-dc-ctx-lbl { font-weight: 700; margin-right: 4px; }

    .yt-dc-word-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
    }
    .yt-dc-word-left { min-width: 0; flex: 1; }
    .yt-dc-word {
      font-size: 1.9rem; font-weight: 900; color: var(--ink);
      line-height: 1.1; word-break: break-word; font-family: 'Lora', serif;
    }
    .yt-dc-ipa-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
    .yt-dc-ipa-label { font-size: .68rem; font-weight: 700; color: #6b7280; text-transform: uppercase; flex-shrink: 0; }
    .yt-dc-ipa { font-size: .88rem; color: #e05c2a; font-weight: 500; }
    .yt-dc-ipa-spk { border: none; background: rgba(42,122,224,.1); color: #2a7ae0; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: .8rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; flex-shrink: 0; transition: background .15s, transform .12s; }
    .yt-dc-ipa-spk:hover { background: rgba(42,122,224,.2); transform: scale(1.1); }
    .yt-dc-speak-btn {
      width: 36px; height: 36px; border-radius: 50%;
      background: #e05c2a; border: none; cursor: pointer;
      font-size: .95rem; color: #fff; flex-shrink: 0; margin-left: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }
    .yt-dc-speak-btn:hover { background: #c2410c; }

    /* ── Vietnamese box ── */
    .yt-dc-vi-box {
      margin: 12px 14px 4px; padding: 11px 13px;
      background: #f0fdf4; border: 1px solid #86efac; border-radius: 10px;
    }
    .yt-dc-vi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
    .yt-dc-vi-lbl { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #16a34a; }
    .yt-dc-vi-badge {
      font-size: .62rem; font-weight: 800; color: #16a34a;
      background: #dcfce7; padding: 1px 6px; border-radius: 999px;
    }
    .yt-dc-vi-main { font-size: 1.22rem; font-weight: 800; color: #166534; line-height: 1.2; margin-bottom: 7px; }
    .yt-dc-vi-edit-btn { background:none; border:none; cursor:pointer; padding:1px 4px; font-size:.8rem; color:#16a34a; opacity:.6; border-radius:4px; line-height:1; }
    .yt-dc-vi-edit-btn:hover { opacity:1; background:#dcfce7; }
    .yt-dc-vi-edit-inp { width:100%; box-sizing:border-box; padding:4px 8px; border:1.5px solid #16a34a; border-radius:6px; font-size:1rem; font-weight:700; color:#166534; outline:none; background:#fff; }
    .yt-dc-vi-save-btn { padding:3px 12px; background:#16a34a; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:.78rem; font-weight:700; }
    .yt-dc-vi-save-btn:hover { background:#15803d; }
    .yt-dc-vi-cancel-btn { padding:3px 10px; background:#f3f4f6; color:#6b7280; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; font-size:.78rem; }
    .yt-dc-vi-loading { font-size: .82rem; font-weight: 400; color: var(--muted); font-style: italic; }
    .yt-dc-vi-chips { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
    .yt-dc-vi-chip { color: #166534; }
    .yt-dc-vi-chip--pos {
      font-size: 1.05rem; font-weight: 700;
      background: none; padding: 0; border-radius: 0;
    }
    .yt-dc-vi-chip--sm {
      font-size: .72rem; font-weight: 600;
      background: #dcfce7; padding: 2px 9px; border-radius: 999px;
      display: inline-block; width: fit-content;
    }

    /* ── Definitions ── */
    .yt-dc-defs { padding: 10px 16px 4px; }
    .yt-dc-pos-group { margin-bottom: 12px; }
    .yt-dc-pos-row { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
    .yt-dc-pos-dot { color: #e05c2a; font-size: 1rem; line-height: 1; }
    .yt-dc-pos-vi { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
    .yt-dc-pos-en { font-size: .7rem; color: var(--muted); font-style: italic; }
    .yt-dc-def-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
    .yt-dc-def-item { font-size: .81rem; color: #1e5a7a; line-height: 1.5; }

    /* ── Examples ── */
    .yt-dc-examples {
      padding: 10px 16px 4px; margin-top: 4px;
      border-top: 1px solid var(--border);
    }
    .yt-dc-ex-lbl { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; }
    .yt-dc-ex-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
    .yt-dc-ex-speak {
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
      background: #fff7ed; border: 1px solid #fed7aa; cursor: pointer; font-size: .72rem;
      display: flex; align-items: center; justify-content: center;
    }
    .yt-dc-ex-speak:hover { background: #ffedd5; }
    /* ── Collocations + ví dụ từ collocation module (khung vàng pastel) ── */
    .yt-dc-cm { margin: 12px 14px; padding: 13px 16px 8px; border: 1.5px solid #fde68a; border-radius: 14px; background: linear-gradient(180deg, #fffbeb, #fef9e3); box-shadow: 0 2px 8px rgba(202,138,4,.08); }
    .yt-dc-cm-lbl { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #b45309; margin-bottom: 7px; }
    .yt-dc-cm-meaning { font-size: .9rem; font-weight: 700; color: #b45309; margin-bottom: 8px; }
    .yt-dc-cm .cdc-colloc-list { margin: 0 0 8px; padding-left: 18px; list-style: disc; }
    .yt-dc-cm .cdc-colloc-list li::marker { color: #f59e0b; }
    .yt-dc-cm .cdc-colloc-item { font-size: .86rem; color: var(--ink2, #334155); line-height: 1.5; margin-bottom: 5px; }
    .yt-dc-cm .cdc-colloc-base { color: #d97706; font-weight: 700; }
    .yt-dc-cm .cdc-colloc-vi { color: #a16207; font-style: italic; }
    .yt-dc-cm-ex-wrap { margin-top: 4px; }
    .yt-dc-cm-ex { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
    .yt-dc-cm-ex-body { min-width: 0; }
    .yt-dc-cm-ex-en { font-size: .85rem; line-height: 1.5; color: var(--ink); font-style: italic; }
    .yt-dc-cm-ex-vi { font-size: .8rem; color: var(--muted); margin-top: 2px; }
    .yt-dc-ex-text { font-size: .8rem; color: var(--ink2); line-height: 1.5; }
    .yt-dc-ex-hl { color: #e05c2a; font-weight: 700; }

    /* ── Save button ── */
    .yt-dc-save-btn {
      display: block; width: calc(100% - 28px); margin: 14px 14px 8px;
      height: 40px; border-radius: 999px; border: none;
      background: #e05c2a; color: #fff;
      font-family: 'Nunito', sans-serif; font-size: .85rem; font-weight: 800;
      cursor: pointer; transition: background .15s;
    }
    .yt-dc-save-btn:hover { background: #c2410c; }
    .yt-dc-save-btn.saved { background: var(--surface2); color: var(--muted); cursor: default; }

    /* ── External links ── */
    .yt-dc-ext-row {
      display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
      padding: 4px 14px 16px;
    }
    .yt-dc-ext-lbl { font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
    .yt-dc-ext-link {
      font-size: .72rem; font-weight: 700; color: #0369a1; text-decoration: none;
      padding: 2px 9px; border-radius: 999px;
      border: 1px solid #bae6fd; background: #f0f9ff;
      white-space: nowrap; transition: background .15s;
    }
    .yt-dc-ext-link:hover { background: #e0f2fe; }

    #ytTpMainPanel {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
    }

    #ytTpSettingsPanel {
      flex-shrink: 0;
    }

    .yt-learn-input-wrap {
      padding: 20px
    }

    .yt-mob-back-btn { display: none; }
    .yt-vocab-mob-btn { display: none; }

    .yt-mob-extra-slot {
      display: none;
      flex-shrink: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    .yt-learn-url-input {
      width: 100%;
      padding: 12px 16px;
      border-radius: 10px;
      border: 1px solid #ddd;
      font-family: system-ui, sans-serif;
      font-size: .9rem;
      background: var(--surface);
      outline: none;
      transition: border-color .2s
    }

    .yt-learn-url-input:focus {
      border-color: var(--accent2)
    }

    .yt-player-ratio {
      position: relative;
      width: auto;
      margin: 0 20px;
      aspect-ratio: 16/9;
      background: #000;
      flex-shrink: 0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-sm)
    }

    .yt-player-ratio>div:not(#shadowRecCamWrap):not(.yt-seek-overlay),
    .yt-player-ratio>iframe,
    .yt-player-ratio>div>iframe {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important
    }

    .yt-seek-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 28%;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: transparent;
      border: none;
      cursor: pointer;
      opacity: 0;
      transition: opacity .18s, background .18s;
      font-family: 'Nunito', sans-serif;
      font-size: .85rem;
      font-weight: 800;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0,0,0,.7);
    }
    .yt-seek-overlay-back { left: 0; border-radius: 12px 0 0 12px; }
    .yt-seek-overlay-fwd  { right: 0; border-radius: 0 12px 12px 0; }
    .yt-player-ratio:hover .yt-seek-overlay {
      opacity: 1;
    }
    .yt-seek-overlay:hover {
      background: rgba(0,0,0,.25);
    }
    .yt-seek-overlay:active {
      background: rgba(0,0,0,.45);
    }
    .yt-seek-ov-icon { font-size: 1.1rem; }
    .yt-seek-ov-lbl  { font-size: .78rem; font-weight: 900; }

    .yt-seek-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 10px 20px 0;
    }
    .yt-seek-btn {
      padding: 5px 14px;
      border-radius: 999px;
      border: 1.5px solid #e2e8f0;
      background: var(--surface);
      font-family: 'Nunito', sans-serif;
      font-size: .78rem;
      font-weight: 800;
      color: #475569;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    .yt-seek-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #1e293b;
    }
    .yt-seek-btn:active {
      background: #e2e8f0;
    }
    .yt-seek-play-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: #15803d;
      color: #fff;
      font-size: .85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s, transform .1s;
    }
    .yt-seek-play-btn:hover { background: #166534; }
    .yt-seek-play-btn:active { transform: scale(.93); }
    .yt-sent-nav-btn {
      border-color: var(--accent2, #6366f1);
      color: var(--accent2, #6366f1);
    }
    .yt-sent-nav-btn:hover {
      background: color-mix(in srgb, var(--accent2, #6366f1) 10%, transparent);
      border-color: var(--accent2, #6366f1);
      color: var(--accent2, #6366f1);
    }
    .yt-seek-sep {
      width: 1px; height: 18px;
      background: var(--border, #e2e8f0);
      flex-shrink: 0;
    }

    .yt-loop-bar {
      margin: 15px 20px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 12px;
      flex-shrink: 0;
      box-shadow: var(--shadow-sm)
    }

    .yt-kbd-hint-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 2px;
      padding: 6px 20px 10px;
      font-size: .68rem;
      color: var(--muted);
    }
    .yt-kbd-key {
      display: inline-block;
      padding: 1px 6px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--surface);
      font-size: .66rem;
      font-family: monospace;
      color: var(--text);
      line-height: 1.6;
    }

    .yt-loop-lbl {
      font-size: .7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      margin-right: 4px
    }
    .yt-loop-sep {
      width: 1px;
      height: 18px;
      background: var(--border);
      margin: 0 6px;
      flex-shrink: 0;
    }

    .yt-loop-opt {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: .78rem;
      font-weight: 700;
      color: var(--ink2);
      cursor: pointer;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      transition: background .15s, color .15s
    }

    .yt-loop-opt:hover {
      background: var(--bg2)
    }

    .yt-loop-opt:has(input:checked) {
      background: var(--blue-soft);
      color: var(--accent2)
    }

    .yt-loop-opt input {
      accent-color: var(--accent2);
      cursor: pointer
    }

    /* Hidden on desktop only, shown on mobile+tablet */
    @media(min-width:961px) { .yt-tp-mob-tabs { display: none !important; } }

    .yt-tp-header {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px
    }

    /* ── Gom nút công cụ transcript vào 1 icon ⚙️ (dropdown desktop) ── */
    .yt-tp-gear-wrap { position: relative; }
    .yt-tp-gear {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 13px; border-radius: 999px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 800; color: var(--muted);
      cursor: pointer; transition: all .18s;
    }
    .yt-tp-gear:hover { border-color: var(--accent2); color: var(--accent2); }
    .yt-tp-gear.on { border-color: var(--accent2); color: var(--accent2); background: var(--surface2, #f1f5f9); }
    .yt-tp-gear-caret { font-size: .7rem; transition: transform .18s; }
    .yt-tp-gear.on .yt-tp-gear-caret { transform: rotate(180deg); }
    .yt-tp-gear-menu {
      position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
      display: none; flex-direction: column; gap: 10px;
      min-width: 300px; max-width: 380px;
      padding: 13px 15px;
      background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
      box-shadow: 0 14px 38px rgba(0, 0, 0, .17);
    }
    .yt-tp-gear-menu.open { display: flex; }
    .yt-tp-gear-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .yt-tp-gear-div { height: 1px; background: var(--border); margin: 1px 0; }
    .yt-tp-gear-menu #ytTpToolsBar {
      padding: 0 !important; border: none !important; background: none !important;
      flex-wrap: wrap; gap: 8px;
    }
    @media (max-width: 960px) {
      .yt-tp-gear { display: none; }
      .yt-tp-gear-wrap { position: static; width: 100%; }
      .yt-tp-gear-menu {
        position: static; display: flex !important;
        min-width: 0; max-width: none;
        padding: 0; gap: 8px;
        background: none; border: none; box-shadow: none;
      }
    }

    .yt-tp-lbl {
      font-size: .9rem;
      font-weight: 800;
      color: var(--ink)
    }

    .yt-tp-count {
      font-size: .75rem;
      font-weight: 700;
      color: var(--muted)
    }

    .yt-video-kbd-hint { display:flex; align-items:center; gap:5px; padding:5px 8px; font-size:.63rem; color:var(--muted); background:var(--surface2); border-radius:6px; margin-bottom:4px; flex-wrap:wrap; }
    .yt-kb-toggle-btn { padding:3px 10px; border-radius:999px; border:1.5px solid #86efac; background:#dcfce7; color:#15803d; font-size:.62rem; font-weight:800; cursor:pointer; white-space:nowrap; transition:all .2s; }
    .yt-kb-toggle-btn:hover { border-color:#16a34a; background:#bbf7d0; }
    .yt-kb-toggle-btn.open { background:#16a34a; border-color:#16a34a; color:#fff; }
    .yt-kb-hints { display:none; align-items:center; flex-wrap:wrap; gap:5px; }
    .yt-kb-hints.open { display:inline-flex; }
    .yt-kb-hint-bar { display:flex; align-items:center; gap:5px; padding:4px 18px; font-size:.63rem; color:var(--ink); background:var(--surface2); border-bottom:1px solid var(--border); flex-shrink:0; }
    kbd.yt-kb { display:inline-block; padding:1px 6px; border:1px solid var(--border); border-radius:3px; background:var(--bg); color:var(--ink); font-size:.6rem; font-weight:800; font-family:inherit; line-height:1.5; }
    .yt-kb-sep { opacity:.4; color:#16a34a; }
    .yt-kb-hints span { color: #16a34a !important; }
    .yt-phrase-mode-btn { display:inline-flex; align-items:center; gap:3px; padding:2px 9px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); color:var(--muted); font-size:.62rem; font-weight:700; cursor:pointer; transition:background .15s,color .15s,border-color .15s; white-space:nowrap; }
    .yt-phrase-mode-btn:hover { background:var(--surface2); color:var(--ink); }
    .yt-phrase-mode-btn.active { background:#7c3aed; color:#fff; border-color:#7c3aed; }
    .yt-phrase-mode .yt-word { cursor:crosshair !important; }
    .yt-free-rec-btn { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:10px; border:1.5px solid #dc2626; background:var(--bg); color:#dc2626; font-size:.62rem; font-weight:700; cursor:pointer; transition:background .15s,color .15s,border-color .15s; white-space:nowrap; }
    .yt-free-rec-btn:hover { background:#fef2f2; }
    .yt-free-rec-btn.recording { background:#dc2626; color:#fff; border-color:#dc2626; animation:yt-fr-pulse 1.2s ease-in-out infinite; }
    .yt-fr-timer { font-variant-numeric:tabular-nums; }
    @keyframes yt-fr-pulse { 0%,100%{opacity:1} 50%{opacity:.65} }

    .yt-tp-scroll {
      flex: 1;
      overflow-y: scroll;
      padding: 12px 0;
      scrollbar-width: thin;
      scrollbar-color: #b0aaa2 #f0ece8;
    }

    #ytTpScroll::-webkit-scrollbar {
      width: 8px;
    }

    #ytTpScroll::-webkit-scrollbar-track {
      background: #f0ece8;
    }

    #ytTpScroll::-webkit-scrollbar-thumb {
      background: #b0aaa2;
      border-radius: 999px;
      min-height: 40px;
    }

    #ytTpScroll::-webkit-scrollbar-thumb:hover {
      background: #7c766e;
    }

    .yt-sent {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 10px;
      padding: 11px 14px;
      margin: 0 8px 5px 8px;
      border-radius: 10px;
      cursor: pointer;
      border: none;
      border-left: 3px solid transparent;
      background: var(--surface, #fff);
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
      transition: background .15s, border-color .15s, box-shadow .15s
    }

    .yt-sent:hover {
      background: #fef9f5;
      border-left-color: rgba(224,92,42,.35);
      box-shadow: 0 2px 8px rgba(224,92,42,.08)
    }

    .yt-sent.active {
      background: #fff8f4;
      border-left-color: #e05c2a;
      box-shadow: 0 2px 10px rgba(224,92,42,.13)
    }

    .yt-sent-num {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: #e05c2a;
      color: #fff;
      font-size: .68rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      transition: background .15s
    }

    .yt-sent.active .yt-sent-num {
      background: #c2410c
    }

    .yt-sent-content {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      min-width: 0
    }

    .yt-sent-head {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 2px
    }

    .yt-ts-row {
      display: none
    }

    .yt-ts {
      font-size: .65rem;
      font-weight: 600;
      color: #94a3b8;
      font-family: system-ui, sans-serif;
      letter-spacing: .02em;
      flex: 1
    }
    .yt-ts-editable {
      cursor: pointer;
      border-radius: 4px;
      padding: 1px 4px;
      transition: background .15s, color .15s;
    }
    .yt-ts-editable:hover { background: #e0f2fe; color: #0369a1; }
    .yt-ts-editor {
      margin: 5px 0 2px;
      padding: 8px 10px;
      background: #f0f9ff;
      border: 1.5px solid #bae6fd;
      border-radius: 8px;
      display: grid;
      grid-template-columns: auto 1fr auto 1fr;
      align-items: center;
      gap: 5px 7px;
    }
    .yt-ts-ed-lbl {
      font-size: .7rem; font-weight: 700;
      color: #0369a1; white-space: nowrap;
    }
    .yt-ts-ed-in {
      padding: 4px 8px;
      border: 1.5px solid #bae6fd;
      border-radius: 6px;
      font-size: .8rem;
      font-family: system-ui, sans-serif;
      background: #fff; outline: none;
      width: 100%; box-sizing: border-box;
    }
    .yt-ts-ed-in:focus { border-color: #0369a1; }
    .yt-ts-ed-hint {
      grid-column: 1 / -1;
      font-size: .66rem; color: #64748b;
      margin-top: -2px;
    }
    .yt-ts-ed-btns {
      grid-column: 1 / -1;
      display: flex; gap: 6px; margin-top: 2px;
    }
    .yt-ts-ed-now {
      padding: 3px 9px; border-radius: 999px;
      border: 1.5px solid #0369a1; background: #fff;
      color: #0369a1; font-size: .73rem; font-weight: 700;
      cursor: pointer; transition: background .15s;
    }
    .yt-ts-ed-now:hover { background: #e0f2fe; }
    .yt-ts-ed-ok {
      padding: 3px 12px; border-radius: 999px;
      border: none; background: #0369a1;
      color: #fff; font-size: .75rem; font-weight: 800;
      cursor: pointer; transition: background .15s;
    }
    .yt-ts-ed-ok:hover { background: #0284c7; }
    .yt-ts-ed-cancel {
      padding: 3px 9px; border-radius: 999px;
      border: 1.5px solid #cbd5e1; background: #f8fafc;
      color: #64748b; font-size: .73rem; cursor: pointer;
    }
    .yt-ts-ed-cancel:hover { background: #f1f5f9; }

    .yt-sent-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      opacity: 0;
      transition: opacity .15s;
    }

    .yt-sent:hover .yt-sent-actions,
    .yt-sent.active .yt-sent-actions {
      opacity: 1
    }

    #ytTpScroll.yt-tp-no-edit .yt-sent-actions { display: none !important; }

    .yt-sent-pause-btn {
      border: 1px solid #e2e8f0;
      background: var(--surface);
      cursor: pointer;
      font-size: .8rem;
      padding: 3px 10px;
      border-radius: 6px;
      color: #64748b;
      transition: background .15s, color .15s, border-color .15s;
      line-height: 1.4;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
    }
    .yt-sent-pause-btn:hover {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #7dd3fc;
    }
    .yt-sent-pause-btn.playing {
      background: #16a34a;
      color: #fff;
      border-color: #15803d;
    }
    .yt-sent-pause-btn.playing:hover {
      background: #15803d;
      border-color: #166534;
    }
    /* Nút phát lại câu (↻) — cùng kiểu nút play, hover tím để phân biệt */
    .yt-sent-replay-btn {
      border: 1px solid #e2e8f0;
      background: var(--surface);
      cursor: pointer;
      font-size: .95rem;
      padding: 3px 10px;
      border-radius: 6px;
      color: #64748b;
      transition: background .15s, color .15s, border-color .15s;
      line-height: 1.4;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
    }
    .yt-sent-replay-btn:hover {
      background: #ede9fe;
      color: #6d28d9;
      border-color: #c4b5fd;
    }
    /* Dropdown số lần lặp câu */
    .yt-sent-repeat-sel {
      border: 1px solid #e2e8f0;
      background: var(--surface);
      cursor: pointer;
      font-size: .76rem;
      padding: 3px 4px;
      border-radius: 6px;
      color: #6d28d9;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      line-height: 1.3;
      transition: border-color .15s, background .15s;
    }
    .yt-sent-repeat-sel:hover { border-color: #c4b5fd; background: #faf5ff; }
    .yt-sent-repeat-sel:focus { outline: none; border-color: #a78bfa; }

    .yt-sent.merge-selecting {
      background: #fef3c7 !important;
      border-left-color: #f59e0b !important;
      outline: 2px solid #f59e0b;
      outline-offset: -2px;
    }

    .yt-sent-edit-btn {
      border: 1px solid #e2e8f0;
      background: var(--surface);
      cursor: pointer;
      font-size: .7rem;
      padding: 3px 8px;
      border-radius: 6px;
      color: #64748b;
      transition: background .15s, color .15s, border-color .15s;
      line-height: 1.4;
      position: relative;
      font-family: 'Nunito', sans-serif;
      font-weight: 700
    }

    .yt-sent-edit-btn:hover {
      background: #eff6ff;
      color: #2563eb;
      border-color: #93c5fd
    }

    .yt-sent-split-btn {
      border: 1px solid #e2e8f0;
      background: var(--surface);
      cursor: pointer;
      font-size: .7rem;
      padding: 3px 8px;
      border-radius: 6px;
      color: #64748b;
      transition: background .15s, color .15s, border-color .15s;
      line-height: 1.4;
      position: relative;
      font-family: 'Nunito', sans-serif;
      font-weight: 700
    }

    .yt-sent-split-btn:hover {
      background: #fee2e2;
      color: #dc2626;
      border-color: #fca5a5
    }


    .yt-sent-merge-btn {
      border: 1px solid #e2e8f0;
      background: var(--surface);
      cursor: pointer;
      font-size: .7rem;
      padding: 3px 8px;
      border-radius: 6px;
      color: #64748b;
      transition: background .15s, color .15s, border-color .15s;
      line-height: 1.4;
      position: relative;
      font-family: 'Nunito', sans-serif;
      font-weight: 700
    }

    .yt-sent-merge-btn:hover {
      background: #dcfce7;
      color: #16a34a;
      border-color: #86efac
    }

    .yt-sent-merge-btn::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: #1e293b;
      color: #f1f5f9;
      font-size: .68rem;
      font-weight: 600;
      font-family: 'Nunito', sans-serif;
      white-space: pre;
      padding: 8px 12px;
      border-radius: 8px;
      line-height: 1.7;
      pointer-events: none;
      opacity: 0;
      transition: opacity .18s;
      z-index: 999;
      box-shadow: 0 4px 16px rgba(0,0,0,.18);
      min-width: 180px
    }

    .yt-sent-merge-btn::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #1e293b;
      pointer-events: none;
      opacity: 0;
      transition: opacity .18s;
      z-index: 999
    }

    .yt-sent-merge-btn:hover::after,
    .yt-sent-merge-btn:hover::before {
      opacity: 1
    }

    .yt-sent-edit-btn::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: #1e293b;
      color: #f1f5f9;
      font-size: .68rem;
      font-weight: 600;
      font-family: 'Nunito', sans-serif;
      white-space: pre;
      padding: 8px 12px;
      border-radius: 8px;
      line-height: 1.7;
      pointer-events: none;
      opacity: 0;
      transition: opacity .18s;
      z-index: 999;
      box-shadow: 0 4px 16px rgba(0,0,0,.18);
      min-width: 220px
    }

    .yt-sent-edit-btn::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #1e293b;
      pointer-events: none;
      opacity: 0;
      transition: opacity .18s;
      z-index: 999
    }

    .yt-sent-edit-btn:hover::after,
    .yt-sent-edit-btn:hover::before {
      opacity: 1
    }

    .yt-sent.yt-editing {
      border-color: #f59e0b;
      background: #fffbeb
    }

    .yt-sent-edit-ta {
      width: 100%;
      min-height: 110px;
      padding: 10px 12px;
      border: 1.5px solid #f59e0b;
      border-radius: 6px;
      font-family: system-ui, sans-serif;
      font-size: var(--yt-sent-font-size, 23px);
      line-height: 1.5;
      resize: vertical;
      outline: none;
      background: #fff;
      box-sizing: border-box
    }

    .yt-sent-edit-hint {
      font-size: .65rem;
      color: #92400e;
      font-weight: 600;
      margin-top: 4px;
      line-height: 1.4
    }

    .yt-sent-edit-btns {
      display: flex;
      gap: 6px;
      margin-top: 6px
    }

    .yt-edit-btn-save {
      padding: 4px 12px;
      border-radius: 999px;
      border: none;
      background: #16a34a;
      color: #fff;
      font-family: 'Nunito', sans-serif;
      font-size: .78rem;
      font-weight: 800;
      cursor: pointer
    }
    .yt-edit-btn-save:hover { background: #15803d }

    #btnSubsync.active {
      background: #d97706;
      color: #fff;
      border-color: #d4a017;
    }

    .yt-edit-btn-split {
      padding: 4px 12px;
      border-radius: 999px;
      border: none;
      background: #dc2626;
      color: #fff;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer
    }

    .yt-edit-btn-split:hover { background: #b91c1c }

    .yt-edit-btn-cancel {
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      background: #fff;
      color: #6b7280;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer
    }

    .yt-edit-btn-cancel:hover { background: #f3f4f6 }

    .yt-sent-txt {
      font-family: system-ui, sans-serif;
      font-size: var(--yt-sent-font-size, 23px);
      color: #111;
      line-height: 1.5;
    }

    .yt-sent.active .yt-ts {
      color: #2563eb
    }

    .yt-sent.active .yt-sent-txt {
      color: #000;
      font-weight: 600
    }

    .yt-sent-vi {
      font-family: 'Nunito', sans-serif;
      font-size: calc(var(--yt-sent-font-size, 23px) * 0.78);
      color: var(--muted);
      line-height: 1.45;
      margin-top: 2px
    }

    .yt-sent.active .yt-sent-vi {
      color: #3b6bb5
    }

    /* ── Fill-in-the-blank mode ── */
    .yt-fill-input {
      display: inline-block;
      border: none;
      border-bottom: 2px solid #6366f1;
      background: #eef2ff;
      border-radius: 4px 4px 0 0;
      font-family: inherit;
      font-size: var(--yt-sent-font-size, 23px);
      font-weight: 700;
      color: var(--ink);
      padding: 0 4px;
      margin: 0 1px;
      outline: none;
      vertical-align: baseline;
      transition: border-color .15s, background .15s;
      min-width: 2em;
    }
    .yt-fill-input:focus { border-bottom-color: #4f46e5; background: #e0e7ff; }
    .yt-fill-input.correct { border-bottom-color: #10b981; background: #d1fae5; color: #065f46; }
    .yt-fill-input.wrong   { border-bottom-color: #ef4444; background: #fee2e2; color: #991b1b; }
    .yt-fill-input:disabled { opacity: .7; cursor: default; }
    .yt-fill-reveal-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; margin-left: 1px; margin-right: 2px;
      vertical-align: middle; border-radius: 50%;
      border: none; background: none;
      font-size: .75rem; cursor: pointer; opacity: .45;
      transition: opacity .15s, background .15s;
      line-height: 1;
    }
    .yt-fill-reveal-btn:hover { opacity: 1; background: rgba(0,0,0,.06); }
    .yt-fill-hint {
      display: block;
      font-size: .72rem;
      color: var(--muted);
      margin-top: 4px;
      font-style: italic;
    }

    /* ── Dictation mode ── */
    .yt-dict-mask-text {
      font-family: system-ui, sans-serif;
      font-size: var(--yt-sent-font-size, 23px);
      color: #94a3b8;
      letter-spacing: 2px;
      user-select: none;
    }
    .yt-dict-row {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-top: 5px;
    }
    .yt-dict-input {
      flex: 1;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1.5px solid var(--border2);
      font-family: 'Nunito', sans-serif;
      font-size: .85rem;
      outline: none;
      background: var(--surface);
      color: var(--ink);
      transition: border-color .2s;
      min-width: 0;
    }
    .yt-dict-input:focus { border-color: var(--accent2); }
    .yt-dict-input.correct { border-color: #16a34a; background: #f0fdf4; }
    .yt-dict-input.wrong   { border-color: #dc2626; }
    .yt-dict-check-btn {
      padding: 6px 14px;
      border-radius: 999px;
      border: 1.5px solid var(--accent2);
      background: var(--blue-soft);
      color: var(--accent2);
      font-family: 'Nunito', sans-serif;
      font-size: .78rem;
      font-weight: 800;
      cursor: pointer;
      flex-shrink: 0;
      transition: all .15s;
    }
    .yt-dict-check-btn:hover { background: var(--accent2); color: #fff; }
    .yt-dict-hint-toggle {
      background: none;
      border: none;
      font-size: .72rem;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      padding: 1px 4px;
      border-radius: 6px;
      font-family: 'Nunito', sans-serif;
      margin-top: 1px;
      transition: color .15s;
    }
    .yt-dict-hint-toggle:hover { color: var(--accent2); }
    .yt-dict-chip-wrap { margin: 6px 0 4px; }
    .yt-dict-chip-wrap .dict-hint-header { margin-bottom: 5px; }
    .yt-dict-chip-wrap .dict-chips { margin-bottom: 6px; }
    .yt-dict-chip-wrap .dict-hint-btns { gap: 6px; }
    .yt-dict-chip-wrap .dict-hint-btn { font-size: .7rem; padding: 3px 10px; }
    .yt-dict-chip-wrap .dict-chip { height: 28px; font-size: .82rem; }
    .yt-dict-reveal-btn {
      background: none; border: none;
      font-size: .72rem; font-weight: 700;
      color: #d97706; cursor: pointer;
      padding: 1px 4px; border-radius: 6px;
      font-family: 'Nunito', sans-serif;
      margin-top: 1px; transition: color .15s;
    }
    .yt-dict-reveal-btn:hover:not(:disabled) { color: #d4a017; }
    .yt-dict-input.revealed { border-color: #d97706; background: #fffbeb; color: #92400e; }
    .yt-dict-hints {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 4px;
    }
    .yt-dict-chip {
      padding: 3px 11px;
      border-radius: 999px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      color: #334155;
      transition: all .15s;
      user-select: none;
    }
    .yt-dict-chip:hover { background: var(--blue-soft); border-color: var(--accent2); color: var(--accent2); }
    .yt-dict-chip.used  { opacity: .35; cursor: default; pointer-events: none; }
    .yt-dict-result {
      font-size: .88rem;
      line-height: 1.6;
      margin-top: 4px;
      padding: 5px 10px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #e2e8f0;
    }
    .yt-dict-result:empty { border: none; background: none; padding: 0; margin: 0; }
    .yt-dict-ok  { color: #16a34a; font-weight: 700; }
    .yt-dict-err { color: #dc2626; font-weight: 700; text-decoration: underline wavy #dc2626; }

    .yt-tp-status {
      padding: 26px 16px;
      text-align: center;
      color: var(--muted);
      font-size: .84rem;
      font-weight: 600;
      line-height: 1.6
    }

    .yt-sent-words {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 8px;
      line-height: 1.5
    }

    .yt-word {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      cursor: default
    }

    .yt-word-txt {
      font-family: system-ui, sans-serif;
      font-size: var(--yt-sent-font-size, 23px);
      color: var(--yt-text-color, #111)
    }
    /* Tô sáng collocation / phrasal verbs / idioms trong transcript */
    .yt-word.yt-colloc-hl .yt-word-txt { background: #bbf7d0; border-radius: 4px; box-shadow: 0 0 0 2px #bbf7d0; }
    .yt-word.yt-pv-hl .yt-word-txt     { background: #bfdbfe; border-radius: 4px; box-shadow: 0 0 0 2px #bfdbfe; }
    .yt-word.yt-idiom-hl .yt-word-txt  { background: #fde68a; border-radius: 4px; box-shadow: 0 0 0 2px #fde68a; }
    .yt-word.yt-colloc-hl, .yt-word.yt-pv-hl, .yt-word.yt-idiom-hl { cursor: pointer; }
    /* Dropdown "Tô sáng" */
    #ytHlBtn.active { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
    .yt-hl-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; border: none; background: none; border-radius: 8px; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 700; color: #1e1b4b; text-align: left; transition: background .12s; }
    .yt-hl-row:hover { background: #f5f3ff; }
    .yt-hl-row.on { background: #f5f3ff; }
    .yt-hl-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
    .yt-hl-row-lbl { flex: 1; }
    .yt-hl-row-count { background: #e5e7eb; color: #374151; border-radius: 999px; padding: 0 7px; font-size: .66rem; font-weight: 800; }
    .yt-hl-row.on .yt-hl-row-count { background: #ddd6fe; color: #6d28d9; }
    .yt-hl-row-chk { width: 14px; color: #16a34a; font-weight: 900; text-align: center; }
    /* AI Summary card trong popup Bài đọc */
    .yt-art-sum-card { background: linear-gradient(135deg, #faf5ff, #f5f3ff); border: 1.5px solid #ddd6fe; border-radius: 14px; padding: 14px 18px; font-family: 'Nunito', sans-serif; }
    .yt-art-sum-hd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .yt-art-sum-hd { font-size: .72rem; font-weight: 900; letter-spacing: .05em; color: #7c3aed; }
    .yt-art-sum-save { font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; border: 1.5px solid #7c3aed; background: #fff; color: #6d28d9; cursor: pointer; flex-shrink: 0; transition: all .15s; }
    .yt-art-sum-save:hover { background: #f5f3ff; }
    .yt-art-sum-save.saved { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; cursor: default; }
    .yt-art-sum-text { font-size: .96rem; line-height: 1.6; color: var(--ink); }
    .yt-art-sum-list { margin: 8px 0 0; padding-left: 20px; }
    .yt-art-sum-list li { font-size: .92rem; line-height: 1.55; color: var(--ink2, #475569); margin-bottom: 4px; }
    .yt-art-sum-loading { font-size: .9rem; color: #7c3aed; font-weight: 700; }

    .yt-sent.active .yt-word-txt {
      color: var(--yt-text-color, #000);
      font-weight: 600
    }

    .yt-word-ipa, .yt-sent-ipa {
      font-family: 'Nunito', sans-serif;
      font-size: calc(var(--yt-sent-font-size, 23px) * var(--yt-ipa-scale, 0.8));
      color: var(--yt-ipa-color, #9ca3af);
      font-style: normal;
      line-height: 1.2;
      white-space: nowrap;
    }

    .yt-sent.active .yt-word-ipa, .yt-sent.active .yt-sent-ipa {
      color: var(--yt-ipa-color, #9ca3af)
    }

    /* ── Word click when paused ── */
    .vid-paused .yt-word { cursor: pointer }
    .vid-paused .yt-word:hover .yt-word-txt {
      color: var(--accent2);
      text-decoration: underline dotted var(--accent2)
    }

    /* ── Saved sessions ── */
    .saved-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px
    }

    .saved-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1.5px solid var(--border, #e5e7eb);
      background: var(--surface, #fff);
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s
    }

    .saved-card:hover {
      border-color: #93c5fd;
      box-shadow: 0 2px 10px rgba(59,130,246,.12)
    }

    .saved-thumb {
      width: 96px;
      height: 54px;
      object-fit: cover;
      border-radius: 7px;
      flex-shrink: 0;
      background: #e2e8f0
    }

    .saved-info {
      flex: 1;
      min-width: 0
    }

    .saved-title {
      font-size: .88rem;
      font-weight: 700;
      color: var(--ink, #1e293b);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .saved-meta {
      font-size: .72rem;
      color: var(--muted, #94a3b8);
      margin-top: 3px;
      font-weight: 600
    }

    /* ── System video section header ── */
    .sys-section-hd {
      display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
      font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
    }
    .sys-section-hd::before {
      content: ''; display: block; flex-shrink: 0;
      width: 4px; height: 18px; border-radius: 3px;
      background: linear-gradient(to bottom, var(--accent), #f0914a);
    }
    .sys-section-hd-icon { font-size: 1.1rem; line-height: 1; }

    /* ── System video filter card ── */
    .sys-filter-card {
      background: linear-gradient(135deg,#fff7f0 0%,#ffeef2 55%,#fdeee6 100%);
      border: 1.5px solid #fdd9c9;
      border-radius: 18px; padding: 16px 18px;
      box-shadow: 0 4px 18px rgba(244,114,94,.10); margin-bottom: 14px;
    }
    .sys-filter-divider { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
    .sys-chan-dd-label {
      font-size: .68rem; font-weight: 700; color: var(--muted); letter-spacing: .05em;
      text-transform: uppercase; margin-bottom: 6px;
      display: flex; align-items: center; gap: 6px;
    }
    .sys-chan-dd-label-dot {
      display: inline-block; width: 3px; height: 12px; border-radius: 2px;
      background: var(--accent2, #2a7ae0); flex-shrink: 0;
    }
    .sys-chan-hint {
      font-size: .76rem; color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
      border-radius: 8px; padding: 5px 10px; margin-bottom: 8px; line-height: 1.4;
    }

    /* ── System video level filter ── */
    .sys-video-search-wrap {
      margin-bottom: 12px;
      display: flex; gap: 12px; align-items: stretch;
    }
    .yt-streak-box {
      display: flex; align-items: center; gap: 11px; flex-shrink: 0; min-width: 188px;
      background: linear-gradient(135deg,#fb923c,#f97316); color: #fff;
      border-radius: 12px; padding: 8px 16px;
      box-shadow: 0 4px 14px rgba(249,115,22,.28);
    }
    .yt-streak-box:empty { display: none; }
    .yt-streak-flame { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
    .yt-streak-num { font-weight: 900; font-size: .98rem; line-height: 1.15; }
    .yt-streak-sub { font-size: .72rem; opacity: .94; }
    @media (max-width: 640px) {
      .sys-video-search-wrap { flex-wrap: wrap; }
      .yt-streak-box { width: 100%; }
    }
    .sys-video-search {
      flex: 1; min-width: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1.5px solid var(--border, #e5e7eb);
      background: var(--surface, #fff);
      font-family: 'Nunito', sans-serif;
      font-size: .88rem;
      color: var(--ink, #1a1a2e);
      outline: none;
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
      transition: border-color .2s, box-shadow .2s;
    }
    .sys-video-search:focus {
      border-color: var(--accent2, #3b82f6);
      box-shadow: 0 0 0 3px rgba(42,122,224,.13);
    }
    .sys-video-levels {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 14px;
    }
    .sys-lvl-btn {
      padding: 5px 14px;
      border-radius: 999px;
      border: 1.5px solid var(--border, #e5e7eb);
      background: var(--surface, #fff);
      font-family: 'Nunito', sans-serif;
      font-size: .75rem;
      font-weight: 800;
      color: var(--muted, #94a3b8);
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
    }
    .sys-lvl-btn:hover {
      border-color: var(--accent, #e05c2a);
      color: var(--accent, #e05c2a);
    }
    .sys-lvl-btn.active {
      border-color: var(--accent, #e05c2a);
      background: var(--accent, #e05c2a);
      color: #fff;
    }
    .sys-lvl-btn.sys-lvl-search-match {
      border-color: #0891b2;
      background: #ecfeff;
      color: #0e7490;
      order: -1;
    }
    .sys-lvl-btn.sys-lvl-search-match.active {
      background: #0891b2;
      border-color: #0891b2;
      color: #fff;
    }

    /* ── Channel select dropdown ── */
    .sys-chan-dd-wrap { position: relative; margin-bottom: 10px; }
    .sys-chan-dd { position: relative; }
    .sys-chan-trigger {
      display: flex; align-items: center; gap: 8px; width: 100%;
      padding: 9px 14px; border-radius: 10px;
      border: 1.5px solid #3b82f6; background: #eff6ff;
      font-family: 'Nunito', sans-serif; font-size: .88rem; font-weight: 700;
      color: #1d4ed8; cursor: pointer; text-align: left;
      transition: border-color .15s, background .15s, box-shadow .15s;
    }
    .sys-chan-trigger:hover { background: #dbeafe; border-color: #2563eb; }
    .sys-chan-trigger.open { background: #dbeafe; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
    .sys-chan-trigger-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sys-chan-arrow { color: #3b82f6; font-size: .7rem; transition: transform .18s; flex-shrink: 0; }
    .sys-chan-trigger.open .sys-chan-arrow { transform: rotate(180deg); }
    .sys-chan-panel {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: var(--card, #fff); border: 1.5px solid var(--border, #e5e7eb);
      border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.12);
      z-index: 500; overflow: hidden;
    }
    .sys-chan-search-row { padding: 8px 10px; border-bottom: 1px solid var(--border, #e5e7eb); }
    .sys-chan-search-inp {
      width: 100%; box-sizing: border-box; padding: 7px 11px;
      border-radius: 8px; border: 1.5px solid var(--border, #e5e7eb);
      font-family: 'Nunito', sans-serif; font-size: .83rem;
      background: var(--bg, #fff); color: var(--ink, #1a1a2e); outline: none;
      transition: border-color .15s;
    }
    .sys-chan-search-inp:focus { border-color: var(--accent2, #3b82f6); }
    .sys-chan-items { max-height: 320px; overflow-y: auto; padding: 4px 0; }
    .sys-chan-item {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 14px; cursor: pointer;
      font-family: 'Nunito', sans-serif; font-size: .83rem; font-weight: 600;
      color: var(--ink2, #374151); transition: background .1s; user-select: none;
    }
    .sys-chan-item:hover { background: var(--blue-soft, #eff6ff); }
    .sys-chan-item.active { background: var(--accent, #e05c2a); color: #fff; font-weight: 800; }
    .sys-chan-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sys-chan-item-star {
      font-size: .82rem; cursor: pointer; color: #cbd5e1;
      transition: color .15s; padding: 2px 3px; line-height: 1; flex-shrink: 0;
    }
    .sys-chan-item-star.fav { color: #f59e0b; }
    .sys-chan-item-star:hover { color: #fbbf24; }
    .sys-chan-item.active .sys-chan-item-star { color: rgba(255,255,255,.6); }
    .sys-chan-item.active .sys-chan-item-star.fav { color: #fef3c7; }
    .sys-chan-sep { height: 1px; background: var(--border, #e5e7eb); margin: 4px 10px; }
    .sys-chan-group-item { font-weight: 800; color: var(--ink, #1a1a2e); cursor: pointer; }
    .sys-chan-group-item:hover { background: #fef3c7; }
    .sys-chan-group-arrow { font-size: .6rem; color: var(--muted, #94a3b8); width: 14px; flex-shrink: 0; }
    .sys-chan-child-item { padding-left: 28px; font-size: .8rem; background: var(--surface, #fafafa); }
    .sys-chan-child-item:hover { background: var(--blue-soft, #eff6ff); }
    .sys-chan-child-indent { width: 14px; flex-shrink: 0; }

    /* ── Favourite channel chips row ── */
    .sys-fav-chan-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 10px; border-radius: 999px;
      border: 1.5px solid #fcd34d; background: #fffbeb;
      font-family: 'Nunito', sans-serif; font-size: .75rem; font-weight: 700;
      color: #92400e; cursor: pointer; transition: background .12s, border-color .12s;
    }
    .sys-fav-chan-chip:hover { background: #fef3c7; border-color: #f59e0b; }
    .sys-fav-chan-chip.active { background: #f59e0b; border-color: #d97706; color: #fff; }
    .sys-fav-chan-count { opacity: .7; font-size: .7rem; }
    .sys-fav-chan-remove {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 50%;
      font-size: .65rem; line-height: 1; cursor: pointer;
      color: #92400e; background: #fde68a;
      transition: background .12s, color .12s;
      flex-shrink: 0; margin-left: -2px;
    }
    .sys-fav-chan-remove:hover { background: #ef4444; color: #fff; }

    /* ── Channel group dropdown ── */
    .sys-lvl-group-wrap { position: relative; display: inline-block; }
    .sys-lvl-group-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 50%; transform: translateX(-50%);
      z-index: 400;
      background: var(--card, #fff);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 5px;
      min-width: 180px;
      box-shadow: 0 4px 20px rgba(0,0,0,.14);
      flex-direction: column;
      gap: 2px;
    }
    .sys-lvl-group-dropdown.open { display: flex; }
    .sys-lvl-sub-btn {
      background: none;
      border: none;
      border-radius: 8px;
      padding: 7px 12px;
      text-align: left;
      font-family: 'Nunito', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--text);
      white-space: nowrap;
      transition: background .12s, color .12s;
    }
    .sys-lvl-sub-btn:hover { background: var(--bg2, #f5f4f2); color: var(--accent, #e05c2a); }
    .sys-lvl-sub-btn.active { background: #fce7f3; color: #db2777; }

    /* ── System video 2-column grid ── */
    .sys-video-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 4px;
    }
    .sys-video-card {
      border-radius: 12px;
      border: 1.5px solid var(--border, #e5e7eb);
      background: var(--surface, #fff);
      cursor: pointer;
      overflow: hidden;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .sys-video-card:hover {
      border-color: #93c5fd;
      box-shadow: 0 4px 16px rgba(59,130,246,.13);
      transform: translateY(-2px);
    }
    .sys-video-thumb-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #e2e8f0;
      overflow: hidden;
    }
    .sys-video-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .sys-video-play-icon {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.18);
      opacity: 0;
      transition: opacity .18s;
    }
    .sys-video-card:hover .sys-video-play-icon { opacity: 1; }
    .sys-video-play-icon::after {
      content: '';
      width: 0; height: 0;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
      border-left: 20px solid #fff;
      margin-left: 4px;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
    }
    .sys-video-info {
      padding: 10px 12px 12px;
    }
    .sys-video-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 5px;
    }
    .sys-video-badge {
      display: inline-block;
      font-family: 'Nunito', sans-serif;
      font-size: .65rem;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .sys-video-cache-badge {
      display: inline-block;
      font-family: 'Nunito', sans-serif;
      font-size: .65rem;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px;
      color: #065f46;
      background: #d1fae5;
    }
    .sys-video-cefr-badge {
      display: inline-block;
      font-family: 'Nunito', sans-serif;
      font-size: .65rem;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 999px;
      letter-spacing: .03em;
    }
    .sys-video-sent-badge {
      display: inline-block;
      font-family: 'Nunito', sans-serif;
      font-size: .65rem;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px;
      color: #3730a3;
      background: #e0e7ff;
      white-space: nowrap;
    }
    .sys-cefr-btn {
      font-family: 'Nunito', sans-serif;
      font-size: .72rem;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1.5px solid #d1d5db;
      background: #f9fafb;
      color: #374151;
      cursor: pointer;
      transition: background .12s, border-color .12s, color .12s;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .sys-cefr-btn:hover { border-color: #9ca3af; background: #f3f4f6; }
    .sys-cefr-btn.active { background: #f43f5e; color: #fff; border-color: #f43f5e; }
    .sys-cefr-btn.sys-cefr-a1 { border-color: #16a34a; color: #15803d; }
    .sys-cefr-btn.sys-cefr-a1:hover, .sys-cefr-btn.sys-cefr-a1.active { background: #16a34a; color: #fff; border-color: #16a34a; }
    .sys-cefr-btn.sys-cefr-a2 { border-color: #0d9488; color: #0f766e; }
    .sys-cefr-btn.sys-cefr-a2:hover, .sys-cefr-btn.sys-cefr-a2.active { background: #0d9488; color: #fff; border-color: #0d9488; }
    .sys-cefr-btn.sys-cefr-b1 { border-color: #2563eb; color: #1d4ed8; }
    .sys-cefr-btn.sys-cefr-b1:hover, .sys-cefr-btn.sys-cefr-b1.active { background: #2563eb; color: #fff; border-color: #2563eb; }
    .sys-cefr-btn.sys-cefr-b2 { border-color: #7c3aed; color: #6d28d9; }
    .sys-cefr-btn.sys-cefr-b2:hover, .sys-cefr-btn.sys-cefr-b2.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
    .sys-cefr-btn.sys-cefr-c1 { border-color: #b91c1c; color: #991b1b; }
    .sys-cefr-btn.sys-cefr-c1:hover, .sys-cefr-btn.sys-cefr-c1.active { background: #b91c1c; color: #fff; border-color: #b91c1c; }
    .sys-cefr-btn.sys-cefr-c2 { border-color: #374151; color: #1f2937; }
    .sys-cefr-btn.sys-cefr-c2:hover, .sys-cefr-btn.sys-cefr-c2.active { background: #374151; color: #fff; border-color: #374151; }
    .sys-cefr-btn.sys-cefr-compute-btn { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
    .sys-cefr-btn.sys-cefr-compute-btn:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }
    .sys-cefr-count { font-size: .65rem; opacity: .7; }

    /* ── Duration filter buttons ── */
    .sys-dur-btn {
      font-family: 'Nunito', sans-serif;
      font-size: .72rem;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1.5px solid #d1d5db;
      background: #f9fafb;
      color: #374151;
      cursor: pointer;
      transition: background .12s, border-color .12s, color .12s;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .sys-dur-btn:hover { border-color: #9ca3af; background: #f3f4f6; }
    .sys-dur-btn.active { background: #f43f5e; color: #fff; border-color: #f43f5e; }
    .sys-dur-btn.sys-dur-vshort { border-color: #059669; color: #047857; }
    .sys-dur-btn.sys-dur-vshort:hover, .sys-dur-btn.sys-dur-vshort.active { background: #059669; color: #fff; border-color: #059669; }
    .sys-dur-btn.sys-dur-short { border-color: #0891b2; color: #0e7490; }
    .sys-dur-btn.sys-dur-short:hover, .sys-dur-btn.sys-dur-short.active { background: #0891b2; color: #fff; border-color: #0891b2; }
    .sys-dur-btn.sys-dur-long { border-color: #7c3aed; color: #6d28d9; }
    .sys-dur-btn.sys-dur-long:hover, .sys-dur-btn.sys-dur-long.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
    .sys-dur-count { font-size: .65rem; opacity: .7; }

    .sys-video-title {
      font-size: .82rem;
      font-weight: 700;
      color: var(--ink, #1e293b);
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sys-video-meta {
      display: flex; align-items: center; justify-content: space-between;
      gap: 6px; margin-top: 3px;
    }
    .sys-video-channel {
      font-size: .72rem;
      color: var(--accent2, #0891b2);
      font-weight: 700;
    }
    .sys-video-channel:empty { display: none; }
    .sys-video-views {
      font-size: .68rem; color: var(--muted, #94a3b8);
      font-weight: 600; white-space: nowrap; flex-shrink: 0;
    }
    .sys-video-author {
      font-size: .68rem;
      color: var(--muted, #94a3b8);
      font-weight: 600;
      margin-top: 2px;
    }
    .saved-card-grid { position: relative; }
    .saved-del-grid {
      position: absolute;
      top: 6px; right: 6px;
      width: 22px; height: 22px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,.45);
      color: #fff;
      font-size: .65rem;
      font-weight: 700;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity .15s, background .15s;
      z-index: 2;
    }
    .saved-card-grid:hover .saved-del-grid { opacity: 1; }
    .saved-del-grid:hover { background: #dc2626; }

    .saved-card-grid.multi-selected {
      outline: 2.5px solid #7c3aed;
      box-shadow: 0 0 0 4px rgba(124,58,237,.15);
    }
    .multi-select-chk {
      position: absolute; top: 8px; left: 8px; z-index: 2;
      width: 22px; height: 22px; border-radius: 50%;
      border: 2px solid #7c3aed; background: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.15);
    }
    .multi-select-chk.checked {
      background: #7c3aed;
    }
    .multi-select-chk.checked::after {
      content: ''; display: block; margin: 4px auto 0;
      width: 6px; height: 10px;
      border: 2px solid #fff; border-top: none; border-left: none;
      transform: rotate(45deg);
    }

    /* Channel Manager (Admin) */
    .chanmgr-item {
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 12px;
      background: #fafafa;
    }
    .chanmgr-item-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .chanmgr-badge {
      display: inline-block;
      padding: 3px 12px;
      border-radius: 20px;
      font-size: .78rem;
      font-weight: 700;
    }
    .chanmgr-addbtn {
      padding: 4px 12px;
      border-radius: 8px;
      border: 1.5px solid #0891b2;
      background: #ecfeff;
      color: #0e7490;
      font-size: .75rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }
    .chanmgr-addbtn:hover { background: #cffafe; }
    .chanmgr-delbtn {
      padding: 4px 10px;
      border-radius: 8px;
      border: 1.5px solid #fca5a5;
      background: #fff5f5;
      color: #dc2626;
      font-size: .8rem;
      cursor: pointer;
    }
    .chanmgr-delbtn:hover { background: #fee2e2; }
    .chanmgr-swatch {
      width: 20px; height: 20px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      flex-shrink: 0;
      transition: border-color .12s, transform .12s;
    }
    .chanmgr-swatch:hover { transform: scale(1.15); }
    .chanmgr-swatch.selected { border-color: #1e293b; transform: scale(1.15); }

    .sys-vid-demote-btn {
      position: absolute;
      top: 6px; right: 6px;
      width: 22px; height: 22px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,.45);
      color: #fff;
      font-size: .65rem;
      font-weight: 700;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity .15s, background .15s;
      z-index: 2;
    }
    .sys-video-card:hover .sys-vid-demote-btn { opacity: 1; }
    .sys-vid-demote-btn:hover { background: #dc2626; }

    /* Multi-select mode */
    .sys-vid-cb {
      position: absolute;
      top: 8px; left: 8px;
      width: 20px; height: 20px;
      z-index: 3;
      cursor: pointer;
      accent-color: #6366f1;
    }
    .sys-video-card.sys-vid-selected {
      border-color: #6366f1;
      box-shadow: 0 0 0 2px #c7d2fe;
      background: #f5f3ff;
    }
    .sys-video-card.sys-vid-selected:hover {
      border-color: #4f46e5;
      box-shadow: 0 0 0 3px #c7d2fe;
    }

    .sys-video-empty {
      grid-column: 1 / -1;
      color: var(--muted, #94a3b8);
      font-size: .85rem;
      padding: 12px 0;
      text-align: center;
    }
    .sys-saved-divider {
      grid-column: 1 / -1;
      font-size: .78rem;
      font-weight: 800;
      color: var(--muted, #94a3b8);
      padding: 10px 2px 4px;
      border-top: 1px solid #e9ecef;
      margin-top: 4px;
      font-family: 'Nunito', sans-serif;
      letter-spacing: .02em;
    }
    .saved-level-row {
      margin-top: 5px;
    }
    .saved-level-select {
      font-size: .72rem;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 6px;
      border: 1.5px solid #e2e8f0;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      outline: none;
      max-width: 100%;
    }
    .saved-level-select:hover { border-color: #94a3b8; }

    .saved-del {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: none;
      background: #fee2e2;
      color: #dc2626;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s
    }

    .saved-del:hover { background: #fca5a5 }

    .yt-tp-err {
      margin: 12px;
      padding: 13px 14px;
      border-radius: var(--radius-sm);
      background: rgba(229, 62, 62, .06);
      border: 1px solid rgba(229, 62, 62, .2);
      font-size: .77rem;
      font-weight: 700;
      color: #b94040;
      line-height: 1.5
    }

    .yt-tp-manual {
      padding: 0 12px 14px
    }

    .yt-tp-manual textarea {
      width: 100%;
      min-height: 90px;
      padding: 9px 11px;
      border: 2px solid var(--border);
      border-radius: var(--radius-sm);
      font-family: 'Lora', serif;
      font-size: .82rem;
      line-height: 1.58;
      resize: vertical;
      background: var(--surface);
      color: var(--ink);
      outline: none;
      box-sizing: border-box;
      transition: border-color .2s
    }

    .yt-tp-manual textarea:focus {
      border-color: var(--accent2)
    }

    .yt-tp-manual-btn {
      margin-top: 7px;
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--accent2);
      background: var(--blue-soft);
      font-family: 'Nunito', sans-serif;
      font-size: .73rem;
      font-weight: 800;
      color: var(--accent2);
      cursor: pointer;
      transition: all .15s
    }

    .yt-tp-manual-btn:hover {
      background: var(--accent2);
      color: #fff
    }

    /* ── Paste transcript block at bottom of transcript ── */
    .yt-tp-paste-block {
      margin: 12px 10px 6px;
      border: 1.5px dashed #cbd5e1;
      border-radius: 10px;
      overflow: hidden;
    }
    .yt-tp-paste-toggle {
      width: 100%;
      padding: 9px 14px;
      background: #f8fafc;
      border: none;
      text-align: left;
      font-size: .78rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background .15s;
    }
    .yt-tp-paste-toggle:hover { background: #f1f5f9; color: #334155; }
    .yt-tp-paste-toggle::after {
      content: '▾';
      margin-left: auto;
      font-size: .85rem;
      transition: transform .2s;
    }
    .yt-tp-paste-block.open .yt-tp-paste-toggle::after { transform: rotate(180deg); }
    .yt-tp-paste-body {
      display: none;
      padding: 0 12px 12px;
      background: #fff;
    }
    .yt-tp-paste-block.open .yt-tp-paste-body { display: block; }
    .yt-tp-paste-ta {
      width: 100%;
      margin-top: 10px;
      padding: 9px 11px;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      font-size: .8rem;
      line-height: 1.6;
      font-family: system-ui, sans-serif;
      resize: vertical;
      outline: none;
      box-sizing: border-box;
      background: #f8fafc;
      transition: border-color .2s;
    }
    .yt-tp-paste-ta:focus { border-color: var(--accent2); background: #fff; }

    /* Tablet (700-900px): keep side-by-side layout like desktop, no stacking */

    /* ── Mobile layout: video on top, transcript below ── */
    .yt-mob-controls-slot { display: none; }

    /* Action/IPA slots: hidden on desktop (empty — buttons not moved by JS) */
    .yt-mob-actions-slot,
    .yt-mob-ipa-slot { display: none; }

    /* Session summary panel: position relative to its container */
    .yt-mob-actions-slot { position: relative; }

    @media(max-width:960px) {
      /* lbody: column, player shrinks to video height, transcript fills rest */
      .yt-lbody { flex-direction: column; overflow: hidden; }
      .yt-lcol-player { width: 100% !important; border-right: none; }
      .yt-lcol-transcript { width: 100% !important; height: auto; min-height: 0; }
      .yt-lcol-dict { display: none !important; }
      #btnDictPanel { display: none !important; }



      /* Player: only URL + video, no seek/loop (moved to transcript) */
      .yt-lcol-player {
        width: 100%; max-width: none; border-right: none;
        flex-shrink: 0; overflow: visible;
        display: flex; flex-direction: column;
        background: #0f0f0f;
      }
      .yt-learn-input-wrap { background: var(--surface); }
      .yt-player-ratio { margin: 0; aspect-ratio: 16/9; padding-top: 0; border-radius: 0; }

      /* Hide seek/loop bars from player column — they'll be in transcript */
      #ytSeekBar, #ytLoopBar { display: none !important; }

      /* Transcript: fills remaining space */
      .yt-lcol-transcript {
        flex: 1; min-height: 0; border-top: 2px solid var(--border);
        display: flex; flex-direction: column; overflow: hidden;
      }

      /* Controls slot: shows seek/loop bars on mobile */
      .yt-mob-controls-slot {
        display: block;
        background: var(--surface2);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .yt-mob-controls-slot .yt-seek-bar {
        display: flex !important;
        justify-content: center;
        padding: 6px 8px 4px;
        gap: 6px;
        border-bottom: 1px solid var(--border);
      }
      .yt-sent-nav-btn, .yt-seek-sep { display: none !important; }
      .yt-kbd-hint-bar { display: none !important; }
      .yt-mob-controls-slot .yt-loop-bar {
        display: flex !important;
        flex-wrap: wrap;
        padding: 5px 10px 6px;
        gap: 5px;
        font-size: .72rem;
      }

      /* ── Transcript header: wrap controls on mobile ── */
      .yt-tp-header { flex-wrap: wrap; padding: 7px 10px; gap: 4px 6px; }
      .yt-tp-lbl { font-size: .88rem; }
      .yt-tp-controls {
        flex-wrap: wrap; gap: 5px;
        margin-left: 0 !important; width: 100%;
      }

      /* Switches: smaller text, still tappable */
      .vocab-sw { font-size: .65rem; gap: 3px; }
      .vocab-sw-track { width: 26px; height: 14px; border-radius: 7px; }
      .vocab-sw-track::after { width: 10px; height: 10px; top: 2px; left: 2px; }
      .vocab-sw.on .vocab-sw-track::after { transform: translateX(12px); }

      /* IPA / Transcribe / Subsync buttons: don't get cut off */
      #btnYtIPA, #btnSpeechTranscribe, #btnSubsync {
        font-size: .68rem; padding: 4px 9px; flex-shrink: 0;
      }

      /* Text-size + Quick Popup bar: compact */
      #ytTpToolsBar { padding: 6px 10px; gap: 6px; }

      /* Extra row (reading time + dictation): wrap neatly */
      .yt-shadow-extra-row { flex-wrap: wrap; padding: 6px 10px; gap: 5px; }
      .yt-shadow-extra-lbl { font-size: .65rem; }
      .yt-shadow-extra-btn { font-size: .68rem; padding: 3px 9px; }

      /* Hide Space/Ctrl keyboard hints on mobile, but keep Free Record btn */
      .yt-kb-hint-bar { display: flex !important; justify-content: flex-end; }
      .yt-kb-hint-bar > *:not(.yt-free-rec-btn):not(.yt-shadow-rec-mobile) { display: none !important; }
      .yt-shadow-rec-mobile { display: none !important; }
      #btnShadowRec { display: none !important; }

      /* Edit buttons per sentence: smaller, more compact */
      .yt-sent-edit-bar { gap: 4px; }
      .yt-sent-edit-btn { width: 28px; height: 28px; font-size: .8rem; }

      /* ── Lbar: hide entirely on mobile (back btn moves to URL row) ── */
      #ytLbar { display: none !important; }
      #btnAutoShadow { display: none !important; }

      /* ── URL row: back btn + input on same line ── */
      .yt-learn-input-wrap {
        display: flex; flex-direction: row; align-items: center;
        gap: 8px; padding: 7px 10px; background: var(--surface);
        border-bottom: 1px solid var(--border);
      }
      .yt-mob-back-btn { display: inline-flex !important; flex-shrink: 0; font-size: .72rem; padding: 5px 11px; }
      .yt-learn-url-input { flex: 1; min-width: 0; }
      .yt-vocab-mob-btn { display: inline-flex !important; align-items: center; gap: 4px; flex-shrink: 0; padding: 5px 11px; font-size: .72rem; font-weight: 800; font-family: 'Nunito', sans-serif; border-radius: 999px; border: 1.5px solid #d97706; background: #fffbeb; color: #d97706; cursor: pointer; }

      /* ── Video: no extra spacing ── */
      .yt-player-ratio-wrap { margin: 0; }

      /* IPA slot in main panel hidden (IPA now in settings) */
      #ytMobIpaSlot { display: none !important; }
      /* Extra time slot in settings */
      .yt-mob-extra-slot { display: block; }
      .yt-mob-extra-slot .yt-shadow-extra-row { display: flex !important; }
      /* Hide extra row in main panel on mobile */
      #ytTpMainPanel > #ytShadowExtraRow { display: none !important; }

      /* ── Actions slot (Tab 2): Auto Shadow + Lưu + Tổng kết ── */
      .yt-mob-actions-slot {
        display: flex; flex-wrap: wrap; gap: 8px;
        padding: 10px 12px;
        background: var(--surface2);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        position: relative;
      }

      /* ── IPA slot (Tab 1) ── */
      .yt-mob-ipa-slot {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
        padding: 6px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }

      /* Session summary panel: fixed overlay on mobile so overflow:hidden doesn't clip it */
      .session-summary-panel { padding: 14px; }
      .ssp-card { max-width: 100%; }

      /* ── Transcript tab strip: style it on mobile ── */
      .yt-tp-mob-tabs {
        display: flex; flex-shrink: 0;
        border-bottom: 2px solid var(--border);
        background: var(--surface);
      }
      .yt-tp-mob-tab {
        flex: 1; padding: 7px 4px;
        font-size: .75rem; font-weight: 800; font-family: inherit;
        border: none; background: none; color: var(--muted);
        cursor: pointer;
        border-bottom: 2px solid transparent; margin-bottom: -2px;
        transition: color .15s, border-color .15s;
      }
      .yt-tp-mob-tab.active { color: var(--accent2); border-bottom-color: var(--accent2); }

      /* Tab 1 (main): hide settings panel + controls header */
      .yt-lcol-transcript.tp-tab-main #ytTpSettingsPanel { display: none !important; }
      .yt-lcol-transcript.tp-tab-main .yt-tp-controls { display: none !important; }

      /* Tab 2 (settings): hide main panel, show settings panel */
      .yt-lcol-transcript.tp-tab-settings #ytTpMainPanel { display: none !important; }
      .yt-lcol-transcript.tp-tab-settings #ytTpSettingsPanel { display: block !important; }

      /* Default on mobile: start on Tab 1, so settings panel hidden */
      #ytTpSettingsPanel { display: none; }
    }
/* ══ POPUP C — Word Popup redesign ══ */
.yt-word-popup {
  position: fixed;
  top: -9999px;
  left: -9999px;
  transform: none;
  width: min(780px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(26,23,20,.22), 0 6px 18px rgba(26,23,20,.10);
  font-family: 'Nunito', sans-serif;
  z-index: 3000;
  opacity: 0; visibility: hidden;
  transition: opacity .18s, visibility .18s;
  will-change: opacity;
  pointer-events: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.yt-word-popup.show {
  opacity: 1; visibility: visible;
}
.yt-wp-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
}
.yt-wp-body { background: #fff; padding: 22px 26px 8px; }
.yt-wp-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 14px; gap: 10px;
}
.yt-wp-top > div:first-child { min-width: 0; flex: 1; }
.yt-wp-word {
  font-family: 'Lora', serif; font-size: 2rem;
  font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  word-break: break-word; overflow-wrap: anywhere; min-width: 0;
}
.yt-wp-ipa {
  font-size: 1.1rem; color: var(--accent2);
  margin-top: 4px; letter-spacing: .02em;
}
.yt-wp-actions { display: flex; gap: 6px; margin-top: 2px; align-items: center; }
.yt-wp-close {
  width: 28px; height: 28px; border-radius: 6px;
  background: #ef4444; border: none;
  color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background .15s;
  flex-shrink: 0;
}
.yt-wp-close:hover { background: #dc2626; }
.yt-wp-action-btn {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--ink2); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.yt-wp-translate-btn {
  width: auto; padding: 0 10px;
  font-size: .75rem; font-weight: 700; font-family: 'Nunito', sans-serif;
  background: var(--blue-soft); border-color: rgba(42,122,224,.3); color: var(--accent2);
  gap: 4px;
}
.yt-wp-audio-btn {
  font-size: 15px;
  background: #fef9c3; border-color: rgba(202,138,4,.35); color: #92400e;
  transition: background .15s, transform .1s;
}
.yt-wp-audio-btn:hover { background: #fef08a; transform: scale(1.08); }
.yt-wp-inline-translation {
  display: none;
  margin-top: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent3);
  background: var(--green-soft);
  border: 1px solid rgba(39,174,114,.2);
  border-radius: 8px;
  padding: 5px 10px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
input.yt-wp-inline-translation:focus {
  border-color: rgba(39,174,114,.6);
  box-shadow: 0 0 0 2px rgba(39,174,114,.15);
}
.yt-wp-action-btn.save {
  background: var(--green-soft);
  border-color: rgba(39,174,114,.3); color: var(--accent3);
}
.yt-wp-meaning-box {
  padding: 10px 14px; background: var(--surface2); border-radius: 10px; margin-bottom: 10px;
}
.yt-wp-pos {
  font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); margin-right: 8px;
}
.yt-wp-meaning-text { font-size: 1.05rem; color: var(--ink2); line-height: 1.6; }
.yt-wp-example {
  font-size: .88rem; color: var(--muted); font-style: italic;
  margin-top: 4px; line-height: 1.4;
}
.yt-wp-base-badge {
  display: inline-block;
  margin: 3px 0 2px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1.5px dashed #16a34a;
  font-size: .9rem;
  font-weight: 700;
  color: #16a34a;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.yt-wp-base-badge:hover { background: #dcfce7; }
.yt-wp-base-badge.active { background: #16a34a; color: #fff; border-style: solid; }
.yt-wp-save-btn {
  padding: 4px 10px;
  background: #f0fdf4; border: 1.5px solid #16a34a;
  border-radius: 999px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: .7rem;
  font-weight: 800; color: #16a34a;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.yt-wp-save-btn:hover:not(:disabled) { background: #dcfce7; transform: scale(1.04); }
.yt-wp-save-btn.saved {
  background: #f0fdf4; color: #15803d;
  border-color: #86efac; cursor: default;
}
.yt-wp-eng-def-section {
  margin-top: 8px;
}
.yt-wp-eng-lbl {
  font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 5px;
}
.yt-wp-meaning-loading {
  font-size: .78rem; color: var(--muted); padding: 4px 0;
  animation: yt-ipa-blink 1s ease-in-out infinite;
}
@keyframes yt-ipa-blink {
  0%, 100% { opacity: 1; } 50% { opacity: .35; }
}
.yt-wp-footer { background: #fff; padding: 10px 26px 20px; border-top: 1px solid var(--border); }
.yt-wp-dicts-lbl {
  font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin: 10px 0 7px;
}
.yt-wp-dict-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
}
.yt-dict-btn {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--ink2); font-size: .72rem; font-weight: 700;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: all .12s; display: block;
}
.yt-dict-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.yt-dict-btn.chatgpt {
  grid-column: span 2; background: var(--ink);
  color: #fff; border-color: var(--ink);
}

/* ── Word popup mobile fixes ── */
@media(max-width:600px) {
  .yt-word-popup { width: 96vw; border-radius: 14px; max-height: 85vh; }
  .yt-wp-body { padding: 14px 14px 6px; }
  .yt-wp-footer { padding: 8px 14px 16px; }

  /* Actions on top-right, word below-left */
  .yt-wp-top { flex-direction: column; gap: 4px; align-items: stretch; }
  .yt-wp-actions { order: -1; align-self: flex-end; flex-wrap: wrap; gap: 5px; }
  .yt-wp-top > div:first-child { order: 1; }

  .yt-wp-word { font-size: 1.4rem; word-break: break-word; overflow-wrap: anywhere; }
  .yt-wp-translate-btn { font-size: .7rem; padding: 0 8px; }
  .yt-wp-dict-row { grid-template-columns: 1fr 1fr; gap: 4px; }
  .yt-dict-btn { font-size: .68rem; padding: 5px 6px; }

  /* Level filter collapse */
  #sysVideoLevels { transition: max-height .25s ease; }
  .sys-lvl-show-more-btn {
    display: block; width: 100%; margin-bottom: 10px;
    padding: 5px 0; border-radius: 999px;
    border: 1.5px solid var(--accent2, #0891b2);
    background: transparent; color: var(--accent2, #0891b2);
    font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 800;
    cursor: pointer; text-align: center;
  }
  .sys-lvl-collapse-btn {
    border-color: var(--muted, #94a3b8); color: var(--muted, #94a3b8);
  }

  /* Video grid: 2 per row on mobile */
  .sys-video-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sys-video-info { padding: 6px 8px 8px; }
  .sys-video-badges { gap: 3px; margin-bottom: 3px; }
  .sys-video-badge, .sys-video-cache-badge, .sys-video-sent-badge { font-size: .58rem; padding: 1px 5px; }
  .sys-video-title { font-size: .72rem; -webkit-line-clamp: 2; line-clamp: 2; }
  .sys-video-channel { font-size: .62rem; margin-top: 2px; }
  .sys-video-author { display: none; }
}

/* ── Report error section in word popup ── */
.yt-wp-report-section {
  margin-top: 12px;
  border-top: 1px solid #e9ecef;
  padding-top: 10px;
}
.yt-wp-report-toggle {
  background: none; border: none; cursor: pointer;
  font-size: .78rem; font-weight: 800;
  color: #d4a017; font-family: 'Nunito', sans-serif;
  padding: 2px 0; letter-spacing: .01em;
}
.yt-wp-report-toggle:hover { color: #92400e; }
.yt-wp-report-body { margin-top: 8px; }
.yt-wp-report-row {
  display: flex; gap: 6px; align-items: baseline;
  margin-bottom: 5px; font-size: .8rem;
}
.yt-wp-report-lbl {
  color: #6b7280; font-weight: 700; white-space: nowrap;
}
.yt-wp-report-val { color: #111827; }
.yt-wp-report-wrong { color: #dc2626; font-style: italic; }
.yt-wp-report-field-lbl {
  display: block; font-size: .75rem; font-weight: 700;
  color: #6b7280; margin: 7px 0 3px;
}
.yt-wp-report-input {
  width: 100%; padding: 7px 10px;
  border: 1.5px solid #fde68a;
  border-radius: 8px; font-size: .82rem;
  background: #fffbeb; outline: none;
  box-sizing: border-box; transition: border-color .15s;
}
.yt-wp-report-input:focus { border-color: #f59e0b; background: #fff; }
.yt-wp-report-textarea {
  width: 100%; padding: 7px 10px;
  border: 1.5px solid #fde68a;
  border-radius: 8px; font-size: .8rem; line-height: 1.5;
  font-family: system-ui, sans-serif;
  resize: vertical; outline: none;
  background: #fffbeb; box-sizing: border-box;
  transition: border-color .15s;
}
.yt-wp-report-textarea:focus { border-color: #f59e0b; background: #fff; }
.yt-wp-report-send-btn {
  width: 100%; margin-top: 8px; padding: 8px 14px;
  background: #d97706; color: #fff;
  border: none; border-radius: 999px;
  font-size: .82rem; font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer; transition: background .15s;
}
.yt-wp-report-send-btn:hover { background: #d4a017; }
.yt-wp-report-send-btn:disabled { background: #fbbf24; cursor: not-allowed; }
.yt-wp-report-status {
  margin-top: 7px; font-size: .8rem; font-weight: 700;
  padding: 6px 10px; border-radius: 8px;
}
.yt-wp-report-status.ok { background: #d1fae5; color: #065f46; }
.yt-wp-report-status.err { background: #fee2e2; color: #991b1b; }

/* ── Per-sentence subsync anchor button ── */
.yt-sent-anchor-btn {
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid #fde68a; background: #fffbeb;
  color: #d97706; font-size: .78rem; cursor: pointer;
  transition: background .15s;
}
.yt-sent-anchor-btn:hover { background: #fef3c7; color: #92400e; }
#ytTpScroll.yt-tp-no-edit .yt-sent-anchor-btn { display: none !important; }

/* ── Per-sentence report button ── */
.yt-sent-report-btn {
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid #fde68a; background: #fffbeb;
  color: #d4a017; font-size: .78rem; cursor: pointer;
  transition: background .15s;
}
.yt-sent-report-btn:hover { background: #fef3c7; color: #92400e; }

/* ── Inline sentence report panel ── */
.yt-sent-report-panel {
  margin-top: 8px; padding: 10px 12px;
  background: #fffbeb; border: 1.5px solid #fde68a;
  border-radius: 10px; font-size: .8rem;
}
.yt-srp-row {
  display: flex; gap: 5px; align-items: baseline;
  margin-bottom: 4px; font-size: .79rem;
}
.yt-srp-lbl {
  color: #6b7280; font-weight: 700; white-space: nowrap;
  display: block; margin: 5px 0 2px;
}
.yt-srp-val { color: #111827; }
.yt-srp-wrong { color: #dc2626; font-style: italic; }
.yt-srp-input, .yt-srp-textarea {
  width: 100%; padding: 6px 9px;
  border: 1.5px solid #fde68a; border-radius: 7px;
  font-size: .8rem; background: #fff; outline: none;
  box-sizing: border-box; transition: border-color .15s;
}
.yt-srp-input:focus, .yt-srp-textarea:focus { border-color: #f59e0b; }
.yt-srp-textarea { resize: vertical; font-family: system-ui, sans-serif; line-height: 1.5; }
.yt-srp-btns {
  display: flex; gap: 6px; margin-top: 7px; align-items: center;
}
.yt-srp-send-btn {
  flex: 1; padding: 6px 12px;
  background: #d97706; color: #fff;
  border: none; border-radius: 999px;
  font-size: .8rem; font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer; transition: background .15s;
}
.yt-srp-send-btn:hover { background: #d4a017; }
.yt-srp-send-btn:disabled { background: #fbbf24; cursor: not-allowed; }
.yt-srp-cancel-btn {
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid #fde68a; background: #fff;
  color: #6b7280; font-size: .8rem; cursor: pointer;
}
.yt-srp-cancel-btn:hover { background: #fef3c7; color: #374151; }
.yt-srp-status {
  margin-top: 6px; font-size: .79rem; font-weight: 700;
  padding: 5px 9px; border-radius: 7px;
}
.yt-srp-status.ok { background: #d1fae5; color: #065f46; }
.yt-srp-status.err { background: #fee2e2; color: #991b1b; }

/* ── Selection lookup mini-tooltip ── */
#ytSelTooltip {
  position: fixed;
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  background: #1e1b4b;
  color: #fff;
  border-radius: 12px;
  font-size: .8rem;
  font-family: 'Nunito', sans-serif;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  z-index: 99999;
  pointer-events: auto;
  max-width: 360px;
  min-width: 160px;
}
.yt-sel-tip-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.yt-sel-tip-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.yt-sel-tip-word {
  font-weight: 800;
  color: #a5b4fc;
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
}
.yt-sel-tip-word:hover { color: #c7d2fe; }
.yt-sel-tip-ipa {
  color: #818cf8;
  font-style: italic;
  flex-shrink: 0;
  white-space: nowrap;
}
.yt-sel-tip-vi {
  color: #e0e7ff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yt-sel-tip-loading { color: #818cf8; font-style: italic; }
.yt-sel-tip-add {
  flex-shrink: 0;
  background: #059669;
  border: none;
  border-radius: 50%;
  color: #fff;
  width: 22px; height: 22px;
  font-size: .9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  line-height: 1;
}
.yt-sel-tip-add:hover { background: #047857; }
.yt-sel-tip-open {
  flex-shrink: 0;
  background: #4f46e5;
  border: none;
  border-radius: 50%;
  color: #fff;
  width: 22px; height: 22px;
  font-size: .75rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.yt-sel-tip-open:hover { background: #4338ca; }

.yt-wp-shortcut-hint {
  margin-top: 8px;
  font-size: 13px;
  color: #888;
  line-height: 1.4;
  text-align: center;
}
/* Remove old arrow */
.yt-word-popup::after { display: none; }

/* ── Example sentence section inside word popup ── */
.yt-wp-ex-section {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface2);
  border-radius: 10px;
  border: 1.5px solid var(--border);
}
.yt-wp-ex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.yt-wp-ex-translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--accent2);
  background: var(--blue-soft);
  color: var(--accent2);
  font-family: 'Nunito', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.yt-wp-ex-translate-btn:hover:not(:disabled) {
  background: var(--accent2);
  color: #fff;
}
.yt-wp-ex-translate-btn:disabled { opacity: .5; cursor: default; }
.yt-wp-ex-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px dashed var(--accent2);
  background: transparent;
  color: var(--accent2);
  font-family: 'Nunito', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.yt-wp-ex-add-btn:hover { background: var(--blue-soft); }
.yt-wp-ex-row {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed var(--border);
}
.yt-wp-ex-row:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.yt-wp-ex-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.yt-wp-ex-del-row-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: .9rem;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.yt-wp-ex-del-row-btn:hover { color: #e53e3e; background: rgba(229,62,62,.08); }
.yt-wp-ex-save-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 0;
  border-radius: 8px;
  border: none;
  background: var(--accent2);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .15s;
}
.yt-wp-ex-save-btn:hover:not(:disabled) { opacity: .85; }
.yt-wp-ex-save-btn:disabled { opacity: .55; cursor: default; }
.yt-wp-ex-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  min-height: 54px;
  outline: none;
  transition: border-color .15s;
  display: block;
  margin-bottom: 6px;
}
.yt-wp-ex-textarea:last-child { margin-bottom: 0; }
.yt-wp-ex-textarea:focus { border-color: var(--accent2); }
.yt-wp-ex-textarea::placeholder { color: var(--border2); }

/* ── Compact popup mode ── */
.yt-word-popup.compact {
  width: 240px;
  min-width: unset;
  transform: none;
  top: auto;
  left: auto;
}
.yt-wp-compact-body {
  padding: 12px 16px 10px;
  background: #fff;
}
.yt-wp-compact-top {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  margin-bottom: 5px;
  min-width: 0;
}
.yt-wp-compact-word-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.yt-wp-compact-word-group .yt-wp-ipa {
  font-size: .82rem;
  color: #b91c1c;
  margin-top: 0;
  white-space: normal;
  overflow: visible;
  display: block;
}
.yt-wp-pos-compact {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  opacity: 0.85;
}
.yt-wp-compact-meaning {
  font-size: .85rem;
  color: var(--ink2);
  line-height: 1.4;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-wp-compact-endef-box {
  display: flex; gap: 6px; align-items: flex-start;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border, #e2e8f0);
}
.yt-wp-compact-endef-lbl {
  flex-shrink: 0; margin-top: 1px;
  font-size: .56rem; font-weight: 800; letter-spacing: .03em;
  color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 5px; padding: 1px 5px; line-height: 1.5;
}
.yt-wp-compact-endef {
  font-size: .8rem; color: var(--ink2, #475569); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-wp-compact-endef.loading { color: var(--muted); font-style: italic; }
.yt-wp-compact-timer {
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-top: 10px;
  animation: ytPopupTimerShrink 10s linear forwards;
}
.yt-wp-compact-save-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft, #fff7f5);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.yt-wp-compact-save-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.yt-wp-compact-save-btn.saved {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  cursor: default;
  animation: ytSavePop .25s ease;
}
@keyframes ytSavePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes ytPopupTimerShrink {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ══ TRANSCRIPT B — redesign ══ */
/* Font-size slider bar */
.yt-tp-font-bar {
  padding: 7px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface2); flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
}
/* Sentence row */
.yt-sent {
  padding: 10px 18px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0; margin: 0;
  background: transparent;
  border-top: none; border-right: none;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s, border-left-color .15s;
}
.yt-sent:hover { background: var(--surface2); border-left-color: var(--border2); }
.yt-sent.active { background: #fffbf0; border-left-color: var(--accent); }
/* Sentence meta */
.yt-sent-meta {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
/* Action row */
.yt-sent-actions {
  display: flex; align-items: center; gap: 5px;
  margin-top: 7px;
  opacity: 0; transition: opacity .15s;
}
.yt-sent:hover .yt-sent-actions,
.yt-sent.active .yt-sent-actions { opacity: 1; }
.yt-sent-num {
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--bg2); color: var(--muted);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.yt-sent.active .yt-sent-num { background: var(--accent); color: #fff; }
/* IPA below active sentence */
.yt-sent-ipa {
  margin-top: 6px; font-size: .72rem;
  color: var(--accent2); font-style: italic; opacity: .75; line-height: 1.5;
  animation: yt-ipa-fade-in .2s ease;
}
@keyframes yt-ipa-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: .75; transform: translateY(0); }
}

/* ── Vocab side panel ── */
.yt-vocab-panel {
  position: fixed;
  top: 50%;
  left: calc(50% + 272px + 12px);
  transform: translateY(-50%);
  width: 220px;
  max-height: 72vh;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(26,23,20,.13);
  z-index: 2998;
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(-50%) translateX(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.yt-vocab-panel.show {
  opacity: 1; visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.yt-vpc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  font-size: .78rem; font-weight: 800; color: var(--ink);
  flex-shrink: 0;
}
.yt-vpc-header button {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--muted); line-height: 1; padding: 0 2px;
}
/* vocab panel search bar — inherits .yt-dict-search-bar, compact overrides */
.yt-vpc-dict-bar { padding: 8px 10px; }
.yt-vpc-dict-bar .yt-dict-search-inner { height: 30px; padding: 0 10px; }
.yt-vpc-dict-bar .yt-dict-tra-btn { height: 30px; padding: 0 12px; font-size: .73rem; }
.yt-vpc-dict-result {
  flex-shrink: 0; border-bottom: 1px solid var(--border);
  max-height: 55vh; overflow-y: auto;
}
/* compact the card inside vpc panel */
.yt-vpc-dict-result .yt-dc-word { font-size: 1.35rem; }
.yt-vpc-dict-result .yt-dc-word-row { padding: 12px 12px 10px; }
.yt-vpc-dict-result .yt-dc-vi-box { margin: 10px 10px 4px; }
.yt-vpc-dict-result .yt-dc-vi-main { font-size: 1rem; }
.yt-vpc-dict-result .yt-dc-defs { padding: 8px 12px 4px; }
.yt-vpc-dict-result .yt-dc-examples { padding: 8px 12px 4px; }
.yt-vpc-dict-result .yt-dc-save-btn { width: calc(100% - 24px); margin: 10px 12px 6px; height: 36px; }
.yt-vpc-dict-result .yt-dc-ext-row { padding: 2px 12px 12px; }
.yt-vpc-list {
  overflow-y: auto; flex: 1; padding: 6px 0;
}
.yt-vpc-item {
  display: flex; align-items: flex-start;
  gap: 6px; padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.yt-vpc-item:last-child { border-bottom: none; }
.yt-vpc-word {
  font-size: .85rem; font-weight: 700; color: var(--ink);
  flex: 1; line-height: 1.3;
}
.yt-vpc-meaning {
  font-size: .72rem; color: var(--muted); line-height: 1.3; margin-top: 1px;
}
.yt-vpc-del {
  background: none; border: none; cursor: pointer;
  font-size: .9rem; color: var(--muted); padding: 0; flex-shrink: 0;
  line-height: 1; margin-top: 1px;
}
.yt-vpc-del:hover { color: #ef4444; }
.yt-vpc-empty {
  text-align: center; padding: 20px 14px;
  font-size: .78rem; color: var(--muted);
}

/* ── Pause button floating over video ── */
.yt-player-ratio-wrap {
  position: relative;
}
.yt-pause-btn {
  position: absolute;
  top: 10px;
  right: 30px;
  z-index: 10;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: background .15s, transform .1s;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.yt-pause-btn:hover { background: #dc2626; transform: scale(1.04); }
.yt-pause-btn.is-paused { background: #16a34a; }

/* ── Per-sentence shadow button ── */
.yt-sent-shadow-btn {
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
  cursor: pointer;
  font-size: .7rem;
  padding: 3px 8px;
  border-radius: 6px;
  color: #7c3aed;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1.4;
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}
.yt-sent-shadow-btn:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}
.yt-sent-shadow-btn.recording {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  animation: yt-shadow-pulse .9s ease-in-out infinite;
}
@keyframes yt-shadow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.yt-sent.yt-sent-shadowing {
  border-left-color: #dc2626;
  background: #fff5f5;
}

/* ── Live transcript (shown while recording) ── */
#ytLiveBar {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 16px;
  background: rgba(220,38,38,.07);
  border-top: 1.5px dashed rgba(220,38,38,.3);
  font-size: .88rem; line-height: 1.6; color: var(--ink);
  flex-shrink: 0;
}
.yt-live-transcript {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 8px 12px;
  background: rgba(220,38,38,.06);
  border: 1px dashed rgba(220,38,38,.25);
  border-radius: 8px;
  font-size: .88rem;
  line-height: 1.7;
  min-height: 2.2em;
  color: var(--ink);
}
.yt-lt-mic {
  flex-shrink: 0;
  font-size: 1rem;
  animation: yt-lt-pulse 1s ease-in-out infinite;
}
@keyframes yt-lt-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .35; }
}
.yt-lt-body { flex: 1; word-break: break-word; }
.yt-lt-final { font-weight: 600; color: #dc2626; }
.yt-lt-interim { color: #9ca3af; font-style: italic; }
.yt-lt-placeholder { color: #9ca3af; font-style: italic; }

/* ── Sentence score result row ── */
.yt-sent-score-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  padding-right: 34px;
  border-top: 1px dashed var(--border);
}
.yt-sent-score-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  letter-spacing: .02em;
}
.yt-sent-score-words {
  flex: 1;
  font-family: 'Lora', serif;
  font-size: calc(var(--yt-sent-font-size, 23px) * .88);
  line-height: 2;
}
.yt-ssw-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: top;
  margin-right: 4px;
}
.yt-sent-score-word {
  display: inline-block;
  border-radius: 3px;
  padding: 0 1px;
  line-height: 1.4;
}
.yt-ssw-correct { color: #16a34a; font-weight: 700; }
.yt-ssw-wrong   { color: #dc2626; font-weight: 700; text-decoration: underline wavy #dc2626; }
.yt-ssw-skipped { color: #94a3b8; }
.yt-ssw-heard {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  font-style: normal;
  color: #dc2626;
  background: #fee2e2;
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.5;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.yt-ssw-miss {
  color: #94a3b8;
  background: #f1f5f9;
  font-style: italic;
}
.yt-sent-score-retry {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: .9rem;
  color: #94a3b8;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background .15s, color .15s;
  line-height: 1;
}
.yt-sent-score-retry:hover { background: #fef3c7; color: #d97706; }
.yt-sent-score-close {
  position: absolute;
  top: 6px;
  right: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid #dc2626;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 6px;
  line-height: 1;
  transition: background .15s, color .15s, transform .15s;
}
.yt-sent-score-close:hover { background: #dc2626; color: #fff; transform: scale(1.08); }

/* ── Auto Shadow button ── */
#btnAutoShadow.as-active {
  background: #7c3aed;
  color: #fff;
  border-color: #6d28d9;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}

/* ── Auto Shadow status bar ── */
.as-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: #f5f3ff;
  border-bottom: 1.5px solid #ddd6fe;
  font-family: 'Nunito', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.as-bar-sent { color: #5b21b6; flex-shrink: 0; }
.as-bar-phase { flex: 1; }
.as-phase-listening { color: #2563eb; }
.as-phase-preparing { color: #92400e; }
.as-phase-recording { color: #dc2626; animation: yt-shadow-pulse .9s ease-in-out infinite; }
.as-phase-correct { color: #16a34a; font-weight: 800; }
.as-phase-retry { color: #dc2626; }
.as-bar-stop {
  flex-shrink: 0;
  border: 1.5px solid #7c3aed;
  background: none;
  color: #7c3aed;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.as-bar-stop:hover { background: #7c3aed; color: #fff; }

/* ── Sentence card states in auto shadow ── */
.yt-sent.as-listening { border-left-color: #2563eb; background: #eff6ff; }
.yt-sent.as-preparing { border-left-color: #d97706; background: #fffbeb; }
.yt-sent.as-recording { border-left-color: #dc2626; background: #fff5f5; }
.as-status-badge {
  font-family: 'Nunito', sans-serif;
  font-size: .65rem;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  margin-left: auto;
  flex-shrink: 0;
}
.yt-sent.as-listening .as-status-badge { background: #dbeafe; color: #1d4ed8; }
.yt-sent.as-preparing .as-status-badge { background: #fef3c7; color: #92400e; }
.yt-sent.as-recording .as-status-badge { background: #fee2e2; color: #991b1b; animation: yt-shadow-pulse .9s ease-in-out infinite; }

/* ── Next sentence button in score row ── */
.yt-sent-score-next {
  flex-shrink: 0;
  border: 1.5px solid #7c3aed;
  background: #f5f3ff;
  color: #7c3aed;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.5;
}
.yt-sent-score-next:hover { background: #7c3aed; color: #fff; }

.yt-sent-play-voice {
  flex-shrink: 0;
  border: 1.5px solid #06b6d4;
  background: #ecfeff;
  color: #0891b2;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  line-height: 1.5;
}
.yt-sent-play-voice:hover { background: #0891b2; color: #fff; }
.yt-sent-play-voice.playing { background: #0891b2; color: #fff; box-shadow: 0 0 0 2px rgba(6,182,212,.3); }

.yt-shadow-timer { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: 0.9; }
.yt-rec-kbd-hint {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .65rem; color: #dc2626; opacity: 0.85;
  animation: yt-rec-hint-in .2s ease;
}
.yt-rec-kbd-hint kbd {
  display: inline-block; padding: 1px 5px;
  border: 1px solid #fca5a5; border-radius: 3px;
  background: #fff1f2; font-size: .63rem;
  font-family: monospace; color: #dc2626; line-height: 1.5;
}
@keyframes yt-rec-hint-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: .85; transform: none; } }

/* ── Clickable wrong/skipped word ── */
.yt-ssw-clickable { border-radius: 4px; }
.yt-ssw-clickable .yt-sent-score-word {
  cursor: pointer;
  transition: background .15s;
  border-radius: 3px;
  padding: 0 2px;
}
.yt-ssw-clickable .yt-sent-score-word:hover { background: #fee2e2; }
.yt-ssw-clickable .yt-ssw-correct:hover { background: #dcfce7; }


/* ── Inline mic retry button on skipped words ── */
.yt-ssw-mic-retry {
  display: inline-block;
  margin-left: 2px;
  padding: 0 3px;
  font-size: .7rem;
  line-height: 1.4;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  transition: background .15s;
}
.yt-ssw-mic-retry:hover { background: #dbeafe; border-color: #93c5fd; }

/* ── Per-word pronunciation tip box ── */
.yt-sent-word-tip {
  margin-top: 8px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  line-height: 1.55;
  animation: yt-tip-fadein .18s ease;
}
@keyframes yt-tip-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.yt-swt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.yt-swt-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #d4a017;
  line-height: 1;
  padding: 0 2px;
}
.yt-swt-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 3px 0;
  color: #1c1917;
  border-bottom: 1px dashed #fde68a;
}
.yt-swt-item:last-child { border-bottom: none; }
.yt-swt-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.yt-swt-item em { color: #1d4ed8; font-style: normal; font-weight: 700; }
.yt-swt-item strong { color: #dc2626; }
.yt-swt-rerec-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
}
.yt-swt-rerec-btn:hover { background: #6d28d9; }
.yt-swt-rerec-btn:disabled { background: #a78bfa; cursor: default; }
@keyframes yt-ssw-flash-anim {
  0%,100% { background: transparent; }
  40% { background: #fee2e2; }
}
.yt-ssw-flash { animation: yt-ssw-flash-anim .6s ease; }
.yt-pause-btn.is-paused:hover { background: #15803d; }

/* ── Teleprompter highlight ── */
.tp-hl-color-btn {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform .15s, border-color .15s;
}
.tp-hl-color-btn:hover { transform: scale(1.2); }
.tp-hl-color-btn.active { border-color: #374151; transform: scale(1.15); }
.tp-hl-erase {
  background: #f3f4f6 !important;
  font-size: .65rem;
  color: #6b7280;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.rd-hl-erase-btn {
  background: #f3f4f6; border: 1.5px solid #d1d5db;
  border-radius: 6px; cursor: pointer;
  font-size: .72rem; font-weight: 600; color: #374151;
  padding: 2px 7px; white-space: nowrap;
  transition: background .13s, border-color .13s;
  flex-shrink: 0;
}
.rd-hl-erase-btn:hover { background: #fef3c7; border-color: #fbbf24; }
.rd-hl-erase-btn.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.tp-hl-clear-btn {
  background: none; border: none; cursor: pointer;
  font-size: .72rem; font-weight: 600; padding: 2px 7px;
  color: var(--muted); border-radius: 6px; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background .15s;
}
.tp-hl-clear-btn:hover { background: #fee2e2; color: #dc2626; }
.stage.tp-hl-mode .tp-word-container { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ctext y='18' font-size='18'%3E🖊%3C/text%3E%3C/svg%3E") 0 18, text; }
.tp-word-container.tp-hl-yellow { background: #fef08a; border-radius: 3px; box-shadow: 11px 0 0 #fef08a, -11px 0 0 #fef08a; }
.tp-word-container.tp-hl-green  { background: #bbf7d0; border-radius: 3px; box-shadow: 11px 0 0 #bbf7d0, -11px 0 0 #bbf7d0; }
.tp-word-container.tp-hl-blue   { background: #bfdbfe; border-radius: 3px; box-shadow: 11px 0 0 #bfdbfe, -11px 0 0 #bfdbfe; }
.tp-word-container.tp-hl-pink   { background: #fbcfe8; border-radius: 3px; box-shadow: 11px 0 0 #fbcfe8, -11px 0 0 #fbcfe8; }

/* ── Session summary panel ── */
/* ── YouTube Vocab Modal ── */
.yt-vm-box {
  width: min(1200px, 96vw);
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
}
.yt-vm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.yt-vm-title { font-weight: 800; font-size: 1rem; color: var(--ink); flex: 1; }
.yt-vm-count { font-size: .78rem; color: var(--muted); font-weight: 600; }
.yt-vm-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.yt-vm-close:hover { background: var(--border); }
.yt-vm-levels {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.yt-vm-pdf-wrap { position: relative; display: inline-block; }
.yt-vm-pdf-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 200;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); min-width: 148px; overflow: hidden;
}
.yt-vm-pdf-menu button {
  display: block; width: 100%; padding: 9px 14px; text-align: left;
  border: none; background: none; font-size: .83rem; font-weight: 600;
  color: #374151; cursor: pointer; transition: background .1s;
}
.yt-vm-pdf-menu button:hover { background: #f1f5f9; }
.yt-vm-search-bar {
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
}
.yt-vm-search-inp {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 5px 10px; border-radius: 8px;
  border: 1.5px solid #e2e8f0; font-size: .82rem;
  background: #f8fafc; outline: none; color: #1e293b;
}
.yt-vm-search-inp:focus { border-color: #6366f1; background: #fff; }
.yt-vm-sort-btns { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.yt-vm-sort-btn {
  padding: 4px 9px; border-radius: 8px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #6b7280; font-size: .71rem; font-weight: 600;
  cursor: pointer; transition: all .12s; white-space: nowrap; line-height: 1.4;
}
.yt-vm-sort-btn:hover { border-color: #f97316; color: #f97316; }
.yt-vm-sort-btn.active { background: #f97316; border-color: #f97316; color: #fff; }
.yt-vm-tab {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-family: 'Nunito', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s;
}
.yt-vm-tab:hover { border-color: var(--tab-clr, var(--accent2)); color: var(--tab-clr, var(--accent2)); }
.yt-vm-tab.active { background: var(--tab-clr, var(--accent2)); border-color: var(--tab-clr, var(--accent2)); color: #fff; }
.yt-vm-list {
  flex: 1;
  overflow-y: scroll;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.yt-vm-list::-webkit-scrollbar { width: 6px; }
.yt-vm-list::-webkit-scrollbar-track { background: transparent; }
.yt-vm-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
/* Hiệu ứng "chữ chạy" khi dò tìm collocations */
.yt-vm-stream { padding: 18px 18px 24px; }
.yt-vm-stream-hd { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; color: #0369a1; margin-bottom: 14px; }
.yt-vm-stream-hd b { color: #0ea5e9; }
.yt-vm-stream-dot { width: 9px; height: 9px; border-radius: 50%; background: #0ea5e9; box-shadow: 0 0 0 0 rgba(14,165,233,.5); animation: ytvmPulse 1s infinite; flex-shrink: 0; }
@keyframes ytvmPulse { 0% { box-shadow: 0 0 0 0 rgba(14,165,233,.5); } 70% { box-shadow: 0 0 0 7px rgba(14,165,233,0); } 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); } }
.yt-vm-stream-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.yt-vm-stream-item { font-size: .86rem; line-height: 1.4; padding: 5px 0; border-bottom: 1px dashed #e5e7eb; animation: ytvmFadeIn .28s ease both; }
.yt-vm-stream-ph { font-weight: 700; color: #0f172a; }
.yt-vm-stream-vi { color: #15803d; font-weight: 600; }
@keyframes ytvmFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.yt-vm-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.yt-vm-row {
  display: grid;
  grid-template-columns: 32px 160px 0.75fr 1fr 62px 1.4fr 68px;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.yt-vm-row:last-child { border-bottom: none; }
.yt-vm-row:not(.yt-vm-header-row):hover { background: #fffbeb; cursor: pointer; }
.yt-vm-header-row { background: var(--surface); cursor: default !important; }
.yt-vm-col-lbl { font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.yt-vm-ipa-toggle { margin-left: 6px; padding: 1px 7px; border-radius: 5px; border: 1.5px solid #d1d5db; background: none; font-size: .65rem; font-weight: 800; color: #9ca3af; cursor: pointer; vertical-align: middle; transition: all .15s; }
.yt-vm-ipa-toggle:hover { border-color: #6366f1; color: #6366f1; }
.yt-vm-ipa-toggle.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.yt-vm-col1, .yt-vm-col2, .yt-vm-col2b, .yt-vm-col3, .yt-vm-col4, .yt-vm-col-actions {
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--border);
}
.yt-vm-col-actions {
  border-right: none;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.yt-vm-col-cb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-right: 1px solid var(--border);
}
.yt-vm-col-cb input[type="checkbox"] { cursor: pointer; accent-color: #f97316; width: 15px; height: 15px; }
.yt-vm-sel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #fff7ed;
  border-top: 1px solid #fed7aa;
  flex-shrink: 0;
}
.yt-vm-sel-lbl { font-size: .82rem; font-weight: 600; color: #ea580c; flex: 1; }
.yt-vm-sel-test-btn { background: #6366f1; color: #fff; border: none; border-radius: 7px; padding: 5px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.yt-vm-sel-test-btn:hover { background: #4f46e5; }
.yt-vm-sel-print-btn { background: #f97316; color: #fff; border: none; border-radius: 7px; padding: 5px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.yt-vm-sel-print-btn:hover { background: #ea580c; }
.yt-vm-sel-clear-btn { background: none; border: 1px solid #d1d5db; border-radius: 7px; padding: 4px 10px; font-size: .78rem; color: #6b7280; cursor: pointer; }
.yt-vm-sel-clear-btn:hover { background: #f3f4f6; }
.yt-vm-col3 { align-items: center; }
.yt-vm-word { font-size: 1rem; color: var(--ink); font-weight: 700; }
.yt-vm-ipa { font-size: .82rem; color: #9ca3af; margin-top: 2px; }
.yt-vm-badge {
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-align: center;
}
.yt-vm-no-level { font-size: .82rem; color: var(--muted); }
.yt-vm-col2  { font-size: .9rem;  color: var(--ink);   line-height: 1.4; }
.yt-vm-col2b { font-size: .8rem;  color: #4b5563;      line-height: 1.4; font-style: italic; }
.yt-vm-no-def .yt-vm-col2b { display: none; }
.yt-vm-no-def .yt-vm-row   { grid-template-columns: 32px 210px 180px 52px 1fr 30px; }
.yt-vm-no-def .yt-vm-col-cb      { grid-column: 1; }
.yt-vm-no-def .yt-vm-col1        { grid-column: 2; }
.yt-vm-no-def .yt-vm-col2        { grid-column: 3; }
.yt-vm-no-def .yt-vm-col3        { grid-column: 4; }
.yt-vm-no-def .yt-vm-col4        { grid-column: 5; }
.yt-vm-no-def .yt-vm-col-actions { grid-column: 6; }
/* Structures tab: no level column, wider meaning */
.yt-vm-no-level .yt-vm-row { grid-template-columns: 32px 210px 220px 1fr 42px; }
.yt-vm-no-level .yt-vm-col-cb      { grid-column: 1; }
.yt-vm-no-level .yt-vm-col1        { grid-column: 2; }
.yt-vm-no-level .yt-vm-col2        { grid-column: 3; }
.yt-vm-no-level .yt-vm-col3        { display: none; }
.yt-vm-no-level .yt-vm-col4        { grid-column: 4; }
.yt-vm-no-level .yt-vm-col-actions { grid-column: 5; }
.yt-vm-pos { font-style: italic; color: var(--accent2); font-size: .84rem; }
.yt-vm-ex { font-size: .86rem; color: #1f2937; line-height: 1.5; align-items: flex-start; text-align: left; }
.yt-vm-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .88rem;
  padding: 3px 4px;
  border-radius: 6px;
  opacity: .5;
  transition: opacity .15s;
}
.yt-vm-action-btn:hover { opacity: 1; }
.yt-vm-save-btn {
  background: #16a34a;
  border: none;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
  line-height: 1;
}
.yt-vm-save-btn:hover { background: #15803d; transform: scale(1.1); }
.yt-vm-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: .88rem; }

/* ── Vocab modal: card layout on mobile ── */
@media (max-width: 699px) {
  .yt-vm-header-row { display: none !important; }

  .yt-vm-header { align-items: flex-start !important; flex-wrap: wrap; }
  .yt-vm-title { width: 100%; order: -1; }

  #ytVmList { padding: 6px !important; }

  /* Every data row becomes a self-contained card */
  .yt-vm-row:not(.yt-vm-header-row),
  .yt-vm-no-def  .yt-vm-row:not(.yt-vm-header-row),
  .yt-vm-no-level .yt-vm-row:not(.yt-vm-header-row) {
    display: grid !important;
    grid-template-columns: 1fr auto auto auto !important;
    grid-template-rows: auto auto auto auto;
    border: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 10px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--surface);
  }

  /* Row 1: word+IPA | level badge | action buttons | checkbox */
  .yt-vm-col1 {
    grid-column: 1 !important; grid-row: 1 !important;
    padding: 10px 8px 4px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    border: none !important;
  }
  .yt-vm-col3,
  .yt-vm-no-def   .yt-vm-col3,
  .yt-vm-no-level .yt-vm-col3 {
    grid-column: 2 !important; grid-row: 1 !important;
    display: flex !important;
    padding: 10px 4px 4px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    border: none !important;
  }
  .yt-vm-no-level .yt-vm-col3 { visibility: hidden !important; }
  .yt-vm-col-actions {
    grid-column: 3 !important; grid-row: 1 !important;
    padding: 8px 2px 4px !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 2px !important;
    border: none !important;
  }
  .yt-vm-col-cb {
    grid-column: 4 !important; grid-row: 1 !important;
    padding: 10px 10px 4px 2px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    border: none !important;
  }

  /* Row 2: Vietnamese meaning (pos + text) */
  .yt-vm-col2,
  .yt-vm-no-def   .yt-vm-col2,
  .yt-vm-no-level .yt-vm-col2 {
    grid-column: 1 / 5 !important; grid-row: 2 !important;
    padding: 0 12px 5px !important;
    border: none !important;
    font-size: .88rem !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Row 3: English definition */
  .yt-vm-col2b,
  .yt-vm-no-def .yt-vm-col2b {
    grid-column: 1 / 5 !important; grid-row: 3 !important;
    display: flex !important;
    padding: 0 12px 5px !important;
    border: none !important;
    font-size: .78rem !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .yt-vm-no-def .yt-vm-col2b { display: none !important; }

  /* Row 4: Example sentence */
  .yt-vm-col4,
  .yt-vm-no-def   .yt-vm-col4,
  .yt-vm-no-level .yt-vm-col4 {
    grid-column: 1 / 5 !important; grid-row: 4 !important;
    padding: 6px 12px 10px !important;
    background: #f8fafc;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    font-size: .8rem !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .yt-vm-word { font-size: .98rem !important; }
  .yt-vm-ipa { font-size: .78rem !important; }
}

.session-summary-panel {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100060;
  font-family: 'Nunito', sans-serif;
}
.ssp-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 86vh;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid #e9d5ff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(76, 29, 149, .3);
  padding: 22px 22px 18px;
  animation: sspPop .2s ease;
}
@keyframes sspPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ssp-hero { display: flex; justify-content: center; margin: 6px 0 16px; }
.ssp-ring {
  width: 134px; height: 134px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ssp-ring-inner {
  width: 106px; height: 106px; border-radius: 50%;
  background: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.ssp-ring-pct { font-size: 1.95rem; font-weight: 900; line-height: 1; }
.ssp-ring-lbl { font-size: .72rem; font-weight: 700; color: #6b7280; }
.ssp-close {
  position: absolute;
  top: 12px; right: 14px;
  cursor: pointer;
  font-size: 1.25rem;
  color: #9ca3af;
  line-height: 1;
  padding: 2px 4px;
}
.ssp-close:hover { color: #374151; }
.ssp-title {
  font-size: 1.02rem;
  font-weight: 900;
  color: #7c3aed;
  margin-bottom: 6px;
  text-align: center;
}
.ssp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  font-size: .85rem;
}
.ssp-label { color: #6b7280; }
.ssp-val { font-weight: 800; color: #1f2937; }
.ssp-wrong { color: #dc2626; }
.ssp-skip  { color: #d97706; }
.ssp-divider { border-top: 1px dashed #e5e7eb; margin: 9px 0 7px; }
.ssp-subtitle { font-size: .73rem; font-weight: 700; color: #6b7280; margin-bottom: 6px; }
.ssp-word-list { display: flex; flex-wrap: wrap; gap: 5px; }
.ssp-word {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
  color: #92400e;
  cursor: pointer;
  transition: background .15s;
}
.ssp-word:hover { background: #fde68a; }

/* ── IPA syllable chips ── */
.ipa-chips { display: inline-flex; align-items: baseline; gap: 1px; font-style: normal; }
.ipa-syll {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 5px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: .8rem;
  font-family: 'Segoe UI', sans-serif;
  color: #1e40af;
  line-height: 1.5;
}
.ipa-syll-stress {
  background: #fef9c3;
  border-color: #fbbf24;
  color: #92400e;
  font-weight: 800;
  font-size: .85rem;
}
.ipa-syll-2nd {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
  font-weight: 700;
}
.ipa-dot { color: #9ca3af; font-size: .7rem; margin: 0 1px; }

/* ── Auth button & modal ── */
.auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1.5px solid var(--accent2);
  background: var(--blue-soft);
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  color: var(--accent2);
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.auth-btn:hover { background: var(--accent2); color: #fff; }
.auth-logout-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.auth-logout-btn:hover { border-color: #e53e3e; color: #e53e3e; }
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: rgba(26,23,20,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.auth-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 380px;
  padding: 28px 28px 20px;
  position: relative;
}
.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg2);
  color: var(--ink2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.auth-tab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .18s;
}
.auth-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink2);
  margin-bottom: 5px;
}
.auth-field input {
  width: 100%;
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: 'Nunito', sans-serif;
  font-size: .9rem;
  color: var(--ink);
  outline: none;
  transition: border-color .18s;
}
.auth-field input:focus { border-color: var(--accent2); }
.auth-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: .78rem;
  color: #dc2626;
  margin-bottom: 12px;
  font-family: 'Nunito', sans-serif;
}
.auth-error-hint {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid #fca5a5;
  color: #b91c1c; font-size: .75rem; line-height: 1.5;
}
.auth-error-hint a { color: #b91c1c; font-weight: 700; }
.auth-submit-btn {
  width: 100%;
  padding: 10px;
  font-size: .9rem;
  border-radius: var(--radius-sm);
  margin-top: 2px;
}
.auth-switch {
  text-align: center;
  margin-top: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: .78rem;
  color: var(--muted);
}
.auth-switch a { color: var(--accent2); text-decoration: none; font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }
.auth-social-wrap { margin-top: 6px; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 14px;
  color: var(--muted);
  font-size: .72rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* Override Nextend Social Login button styles inside modal */
.auth-social-wrap .nsl-container { margin: 0 !important; }
.auth-social-wrap .nsl-container-buttons { gap: 8px !important; justify-content: center !important; }
.auth-social-wrap .nsl-button {
  border-radius: var(--radius-sm) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  height: 40px !important;
  box-shadow: none !important;
  border: 1.5px solid var(--border) !important;
}
.auth-social-wrap .nsl-button-default { background: var(--surface) !important; color: var(--ink) !important; }
.auth-social-wrap .nsl-button-default:hover { background: var(--bg2) !important; border-color: var(--border2) !important; }
.auth-social-wrap .nsl-button-label-container { font-size: .82rem !important; }

/* ── Audio mode toggle button ── */
.yt-audio-mode-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 20px 4px;
}
.yt-audio-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1.5px solid #86efac;
  background: #dcfce7;
  font-family: 'Nunito', sans-serif;
  font-size: .63rem;
  font-weight: 800;
  color: #15803d;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.yt-audio-mode-btn.active {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}
.yt-audio-mode-btn:hover { border-color: #16a34a; background: #bbf7d0; }
.yt-audio-mode-btn.active:hover { background: #15803d; }

/* ── Audio-only player card ── */
.yt-audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 16px;
  gap: 14px;
  background: var(--surface);
}
.yt-audio-segment-lbl {
  font-family: 'Nunito', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
}
.yt-audio-clock-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  border: 1px solid #e8ecf0;
  padding: 18px 38px;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-audio-clock {
  font-family: 'Nunito', sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  color: #1e293b;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.yt-audio-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  overflow: hidden;
}
.yt-audio-bar {
  width: 3px;
  border-radius: 2px;
  background: #cbd5e1;
  animation: ytAudioBarBounce 0.8s ease-in-out infinite alternate;
  flex-shrink: 0;
}
.yt-audio-player.paused .yt-audio-bar {
  animation-play-state: paused;
  height: 4px;
  opacity: .35;
}
@keyframes ytAudioBarBounce {
  0%   { height: 4px;  opacity: .4; background: #cbd5e1; }
  100% { height: 28px; opacity: 1;  background: #94a3b8; }
}
.yt-audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.yt-actl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background: var(--surface);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
}
.yt-actl-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.yt-actl-play {
  width: 58px;
  height: 58px;
  font-size: 1.4rem;
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.yt-actl-play:hover {
  background: #334155;
  border-color: #334155;
}
.yt-audio-speeds {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px;
  border: 1px solid #e2e8f0;
}
.yt-aspd-btn {
  padding: 4px 13px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  color: #64748b;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.yt-aspd-btn.active {
  background: #1e293b;
  color: #fff;
}
.yt-aspd-btn:hover:not(.active) {
  background: #e2e8f0;
}

/* ── Learn screen — mobile compact ── */
@media (max-width: 640px) {
  .learn-topbar {
    padding: 6px 10px; gap: 5px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none;
  }
  .learn-topbar::-webkit-scrollbar { display: none; }

  /* Back button: icon only */
  .back-btn {
    padding: 4px 8px; font-size: .65rem; white-space: nowrap;
    flex-shrink: 0; min-width: unset;
  }

  /* Hide title area — shown in dropdown instead */
  .learn-meta-info { display: none; }

  /* BEGINNER badge */
  .lm-badge {
    padding: 4px 9px; font-size: .58rem; flex-shrink: 0;
    border-radius: 8px; white-space: nowrap; cursor: pointer;
  }
  .lm-badge::after { content: ' ▾'; font-size: .5rem; }

  /* Saved Words button — show count only */
  #btnVocabList {
    padding: 4px 8px !important; font-size: .6rem !important;
    flex-shrink: 0; white-space: nowrap; border-radius: 8px !important;
    gap: 2px !important;
  }
  .vocab-list-icon { display: none; }

  /* Hướng dẫn button — icon only */
  .tour-replay-btn {
    padding: 4px 8px; font-size: .65rem; flex-shrink: 0;
    border-radius: 8px; white-space: nowrap;
  }

  /* ── Extra row (More settings) — compact ── */
  #zoomWrapper {
    display: flex !important; flex-wrap: wrap; gap: 5px;
    margin-left: 0 !important; align-items: center; width: 100%;
  }
  #tpFontSelect { font-size: .65rem !important; padding: 4px 22px 4px 7px !important; min-width: unset !important; max-width: 110px; }
  #zoomWrapper > span { font-size: .62rem !important; }
  .rd-color-picker { width: 24px !important; height: 24px !important; padding: 1px !important; border-radius: 5px !important; }
  #btnTpBgReset { padding: 3px 7px !important; font-size: .65rem !important; }
  #btnZoomOut, #btnZoomIn { padding: 3px 8px !important; font-size: .75rem !important; }

  .learn-body { padding: 10px 10px 40px; }

  .controls-panel { padding: 9px 10px; gap: 6px; margin-bottom: 12px; }

  .ctrl-btn {
    padding: 6px 10px;
    font-size: .72rem;
    gap: 4px;
  }
  .ctrl-btn.shadow-btn { justify-content: center; }
  .ctrl-btn.record-only-btn { justify-content: center; }
  .ctrl-select {
    padding: 5px 24px 5px 10px;
    font-size: .72rem;
  }

  /* ── Mobile: hide non-essential controls ── */
  #sampleSpeedWrapper { display: none !important; }
  /* hide dividers */
  .ctrl-row > [style*="width:1px"] { display: none !important; }

  /* ── Mobile extra settings row ── */
  .ctrl-extra-row { display: none; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); align-items: center; }
  .ctrl-extra-row.open { display: flex; }
  #ctrlExtraToggleBtn { display: inline-flex; padding: 5px 10px; font-size: .72rem; color: var(--muted); margin-left: auto; }
  #ctrlExtraToggleBtn.open { color: var(--accent2); border-color: var(--accent2); }

  .lrn-speed-row { gap: 5px; padding-top: 6px; }
  .lrn-speed-row .popup-mode-sw { margin-left: 0 !important; }
  .speed-label-txt { font-size: .68rem; }
  .speed-chip { padding: 3px 9px; font-size: .72rem; }
  .speed-presets { display: none; }

  /* ── Dictation ── */
    .dictation-tp-btn { font-size: .6rem; padding: 2px 7px; }
    .dictation-text { font-size: 1rem; line-height: 2.5; }
    .dict-blank { font-size: 1rem; }
    .dict-speed-row { width: 100%; }
    .dict-speed-row input[type="range"] { flex: 1; width: auto; }

  .popup-duration-row { margin-top: 4px !important; }
  .popup-mode-hint-row { display: none; }
  .popup-dur-lbl { font-size: .62rem; }
  .popup-dur-btn { padding: 2px 7px; font-size: .62rem; }
  .popup-dur-btn--inf { display: none; }

  .vocab-sw { font-size: .7rem; gap: 3px; }
  .vocab-sw-track { width: 28px !important; height: 16px !important; border-radius: 8px; }
  .vocab-sw-track::after { width: 12px !important; height: 12px !important; }

  .dictation-float-btn { right: 4px; top: 180px; font-size: .65rem; padding: 8px 5px; }

  /* Custom passage modal — 1-column stack, English trên Vietnamese dưới */
  #customPassageModal .modal-box {
    padding: 20px 14px !important;
  }
  #customPassageGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Listen / TTS / voice dropdown — same compact row ── */
  .ctrl-row--tools { flex-wrap: nowrap; gap: 5px; }
  #btnPlaySample, #btnPlayTTS { flex-shrink: 0; white-space: nowrap; }
  #voiceSelectWrapper { flex: 1; min-width: 0; }
  #voiceSelectWrapper #voiceSelect { width: 100%; max-width: 130px; font-size: .68rem; padding: 4px 20px 4px 7px; }

  /* ── Record buttons: break to new row on mobile ── */
  .ctrl-row--tools { flex-wrap: wrap !important; }
  .ctrl-row-break { display: block; width: 100%; height: 0; }
  .record-divider { display: none !important; }
  #btnShadow, #btnRecordOnly {
    flex: 1 1 0%; min-width: 0; width: 0;
    justify-content: center; text-align: center;
    border-radius: var(--radius-pill);
    font-size: .72rem; padding: 8px 6px;
    white-space: normal; line-height: 1.3;
  }
}

/* ══ READING COLLOCATION HIGHLIGHT ══ */
.rd-word-container.rd-colloc-hl .rd-word { position: relative; z-index: 0; }
.rd-word-container.rd-colloc-hl .rd-word::after {
  content: ''; position: absolute; z-index: -1;
  left: -4px; right: -4px; top: 50%; bottom: auto;
  height: 1.35em; transform: translateY(-50%);
  background: #fde047;
}
/* dark mode: chữ collocation đổi sang xanh lá đậm để đọc rõ trên nền vàng */
.reading-article.rd-theme-dark .rd-word-container.rd-colloc-hl .rd-word { color: #166534 !important; font-weight: 700; }
/* ══ CEFR LEVEL HIGHLIGHT ══ */
.rd-word-container.rd-cefr-a1 .rd-word,
.rd-word-container.rd-cefr-a2 .rd-word,
.rd-word-container.rd-cefr-b1 .rd-word,
.rd-word-container.rd-cefr-b2 .rd-word,
.rd-word-container.rd-cefr-c1 .rd-word,
.rd-word-container.rd-cefr-c2 .rd-word { position: relative; z-index: 0; }
.rd-word-container.rd-cefr-a1 .rd-word::after { content:''; position:absolute; z-index:-1; left:-4px; right:-4px; top:50%; height:1.35em; transform:translateY(-50%); background:#bfdbfe; }
.rd-word-container.rd-cefr-a2 .rd-word::after { content:''; position:absolute; z-index:-1; left:-4px; right:-4px; top:50%; height:1.35em; transform:translateY(-50%); background:#a5f3fc; }
.rd-word-container.rd-cefr-b1 .rd-word::after { content:''; position:absolute; z-index:-1; left:-4px; right:-4px; top:50%; height:1.35em; transform:translateY(-50%); background:#bbf7d0; }
.rd-word-container.rd-cefr-b2 .rd-word::after { content:''; position:absolute; z-index:-1; left:-4px; right:-4px; top:50%; height:1.35em; transform:translateY(-50%); background:#fde68a; }
.rd-word-container.rd-cefr-c1 .rd-word::after { content:''; position:absolute; z-index:-1; left:-4px; right:-4px; top:50%; height:1.35em; transform:translateY(-50%); background:#fca5a5; }
.rd-word-container.rd-cefr-c2 .rd-word::after { content:''; position:absolute; z-index:-1; left:-4px; right:-4px; top:50%; height:1.35em; transform:translateY(-50%); background:#d8b4fe; }

/* CEFR level buttons group */
.rd-cefr-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 5px;
  border: 1.5px solid var(--border1);
  border-radius: 20px;
  background: var(--surface1);
}
.rd-cefr-btn {
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  transition: background .15s, color .15s;
  letter-spacing: .03em;
}
.rd-cefr-btn:hover { background: #f3f4f6; }
.rd-cefr-btn[data-level="A1"].active { background: #bfdbfe; color: #1e40af; }
.rd-cefr-btn[data-level="A2"].active { background: #a5f3fc; color: #0e7490; }
.rd-cefr-btn[data-level="B1"].active { background: #bbf7d0; color: #166534; }
.rd-cefr-btn[data-level="B2"].active { background: #fde68a; color: #92400e; }
.rd-cefr-btn[data-level="C1"].active { background: #fca5a5; color: #991b1b; }
.rd-cefr-btn[data-level="C2"].active { background: #d8b4fe; color: #6b21a8; }

#rdCollocTooltip {
  font-family: 'Nunito', sans-serif;
  background: #064e3b;
  color: #d1fae5;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: .8rem;
  max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s, transform .12s;
  pointer-events: none;
}
#rdCollocTooltip.rd-colloc-tip-show { opacity: 1; transform: translateY(0); }
.rd-colloc-tip-phrase { font-weight: 700; font-size: .85rem; color: #6ee7b7; margin-bottom: 2px; }
.rd-colloc-tip-ipa { color: #99f6e4; font-size: .78rem; margin-bottom: 2px; }
.rd-colloc-tip-vi { color: #d1fae5; font-style: italic; }
.rd-colloc-tip-hint { margin-top: 5px; font-size: .68rem; color: #6ee7b7; opacity: .8; }
/* collocation panel examples */
.rd-colloc-ex { display: flex; gap: 6px; align-items: flex-start; font-size: .84rem; line-height: 1.5; margin-bottom: 6px; }
.rd-colloc-ex-sp { border: none; background: none; cursor: pointer; font-size: .85rem; padding: 0; flex-shrink: 0; line-height: 1.4; }
.rd-colloc-chips { display: flex; flex-direction: column; gap: 5px; }
.rd-colloc-chip { font-size: .84rem; color: #334155; line-height: 1.45; }
.rd-colloc-chip-vi { color: #94a3b8; font-size: .8rem; }

/* ══ Collocation dict card (Reading + Home) ══ */
.cdc-card { font-family: 'Nunito', sans-serif; background: #fff; border-radius: 16px; padding: 18px 20px; color: #1e293b; }
.cdc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cdc-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff1e6; color: #ea7c3a; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; }
.cdc-close { border: none; background: #f1f5f9; color: #64748b; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.cdc-close:hover { background: #e2e8f0; }
.cdc-title-row { display: flex; align-items: center; gap: 12px; }
.cdc-title { font-family: 'Lora', Georgia, serif; font-size: 1.85rem; font-weight: 800; color: #1e293b; line-height: 1.12; }
.cdc-speak { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #e2e8f0; background: #fff; color: #0d9488; cursor: pointer; font-size: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; }
.cdc-speak:hover { background: #f0fdfa; }
.cdc-ipa { color: #94a3b8; font-size: .95rem; margin-top: 6px; }
.cdc-divider { height: 1px; background: #eef2f6; margin: 14px 0; }
.cdc-sec { margin-bottom: 14px; }
.cdc-sec-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.cdc-ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.cdc-ic-green { background: #dcfce7; color: #16a34a; }
.cdc-ic-blue { background: #dbeafe; color: #2563eb; }
.cdc-ic-purple { background: #ede9fe; color: #7c3aed; }
.cdc-sec-lbl { font-size: .78rem; font-weight: 800; letter-spacing: .05em; }
.cdc-lbl-green { color: #15803d; }
.cdc-lbl-blue { color: #2563eb; }
.cdc-lbl-purple { color: #7c3aed; }
.cdc-meaning { background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 10px; padding: 10px 14px; font-size: 1.05rem; font-weight: 700; color: #166534; }
.cdc-meaning.yt-dc-vi-loading { color: #9ca3af; font-weight: 400; font-style: italic; background: #f8fafc; border-color: #eef2f6; }
.cdc-def { margin-left: 39px; font-style: normal; color: #475569; font-size: .95rem; line-height: 1.5; }
.cdc-colloc-list { margin: 0 0 0 39px; padding-left: 18px; }
.cdc-colloc-item { font-size: .95rem; color: #334155; line-height: 1.5; margin-bottom: 7px; }
.cdc-colloc-base { color: #15803d; font-weight: 800; }
.cdc-colloc-vi { display: block; color: #94a3b8; font-size: .88rem; margin-top: 1px; }
.cdc-ex { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.cdc-sec .cdc-ex:last-child { border-bottom: none; padding-bottom: 0; }
.cdc-ex-sp { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; border: none; background: #f5f3ff; color: #7c3aed; cursor: pointer; font-size: .85rem; }
.cdc-ex-sp:hover { background: #ede9fe; }
.cdc-ex-body { flex: 1; min-width: 0; }
.cdc-ex-en { font-size: .98rem; color: #1e293b; line-height: 1.5; }
.cdc-ex-vi { font-size: .88rem; color: #94a3b8; font-style: italic; margin-top: 2px; }
.cdc-hl { background: #fde68a; color: #92400e; border-radius: 3px; padding: 0 2px; text-decoration: underline; text-underline-offset: 2px; }
.cdc-article { margin: 4px 0 14px; padding: 10px 14px; background: #eef4ff; border-left: 4px solid #3b82f6; border-radius: 8px; }
.cdc-article-hd { font-size: .72rem; font-weight: 800; color: #2563eb; letter-spacing: .04em; margin-bottom: 4px; }
.cdc-article-txt { font-size: .92rem; color: #334155; font-style: italic; line-height: 1.5; }
.cdc-save { width: 100%; border: 2px solid #16a34a; background: #fff; color: #15803d; border-radius: 14px; padding: 13px; font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 800; cursor: pointer; transition: background .12s; margin-top: 6px; }
.cdc-save:hover { background: #f0fdf4; }
.cdc-save.saved { border-color: #cbd5e1; color: #64748b; background: #f8fafc; cursor: default; }
.cdc-links { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cdc-links-lbl { font-size: .8rem; color: #94a3b8; }
.cdc-link { font-size: .82rem; font-weight: 700; color: #475569; text-decoration: none; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 6px 14px; background: #fff; }
.cdc-link:hover { background: #f8fafc; }

/* ══ READING PHRASE LOOKUP BUTTON ══ */
.rd-phrase-btn {
  position: fixed;
  z-index: 9100;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: .78rem;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  white-space: nowrap;
  user-select: none;
  transition: background .15s, transform .1s;
  transform: translateY(-6px);
  animation: rd-phrase-pop .15s ease forwards;
}
.rd-phrase-btn:hover { background: #e07a30; transform: translateY(-8px); }
@keyframes rd-phrase-pop {
  from { opacity: 0; transform: translateY(0px); }
  to   { opacity: 1; transform: translateY(-6px); }
}

/* ══ READING DICT SIDE PANEL ══ */
#screen-reading { position: relative; }

.rd-dict-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  background: #f5f3ef;
  display: flex; flex-direction: column;
  z-index: 8100;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 28px rgba(0,0,0,.12);
  overflow: hidden;
}
.rd-dict-panel.open { transform: translateX(0); }
.rd-dict-panel.from-left { right: auto; left: 0; transform: translateX(-100%); box-shadow: 4px 0 28px rgba(0,0,0,.12); }
.rd-dict-panel.from-left.open { transform: translateX(0); }

#screen-reading.rd-panel-open .reading-body {
  margin-right: 360px;
  transition: margin-right .22s cubic-bezier(.4,0,.2,1);
}
#screen-learn.rd-panel-left-open,
#screen-youtube.rd-panel-left-open {
  padding-left: 360px;
  box-sizing: border-box;
  transition: padding-left .22s cubic-bezier(.4,0,.2,1);
}

.rd-dict-body {
  flex: 1; overflow-y: auto;
  padding: 14px 14px 24px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
}

/* ── HOME VIEW ── */
.rd-dict-home-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.rd-dict-home-hd {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.rd-dict-home-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #fff3e8;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.rd-dict-home-title {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.05rem; color: #1a1a1a; flex: 1;
}
.rd-dict-close-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: #f3f3f3;
  cursor: pointer; font-size: .95rem; color: #888;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.rd-dict-close-btn:hover { background: #e5e5e5; }

.rd-dict-search-row {
  display: flex; align-items: center; gap: 8px;
  background: #f7f6f3; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 10px;
  border: 1.5px solid #eae8e3;
}
.rd-dict-search-row input {
  flex: 1; border: none; background: transparent;
  font-family: 'Nunito', sans-serif; font-size: .88rem;
  color: #1a1a1a; outline: none;
}
.rd-dict-search-row input::placeholder { color: #aaa; }
.rd-dict-search-icon { font-size: .85rem; color: #aaa; flex-shrink: 0; }

.rd-dict-search-btn {
  width: 100%; padding: 10px 0; border-radius: 10px;
  border: none; background: #1a1a1a; color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .88rem;
  cursor: pointer; transition: background .15s;
}
.rd-dict-search-btn:hover { background: #333; }

/* Recent words */
.rd-dict-recent-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.rd-dict-section-hd {
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: .65rem; color: #aaa;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 10px;
}
.rd-dict-recent-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0ede8;
  cursor: pointer; transition: background .12s;
}
.rd-dict-recent-item:last-child { border-bottom: none; padding-bottom: 0; }
.rd-dict-recent-item:hover .rd-dict-recent-word { color: #e07a30; }
.rd-dict-recent-word {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700; font-size: .97rem; color: #1a1a1a;
  transition: color .12s;
}
.rd-dict-recent-meta {
  font-family: 'Nunito', sans-serif; font-size: .75rem;
  color: #aaa; margin-top: 1px;
}

/* ── WORD DETAIL VIEW ── */
.rd-dict-detail-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.rd-dict-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700;
  color: #aaa; background: none; border: none; cursor: pointer;
  padding: 0; margin-bottom: 12px; transition: color .12s;
}
.rd-dict-back-btn:hover { color: #555; }

/* Phrase heading in detail view */
.rd-dict-phrase-text {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem; font-weight: 700;
  color: #1a1a1a; line-height: 1.3;
  margin-bottom: 10px;
}
.rd-dict-phrase-tag {
  display: inline-block; padding: 2px 9px;
  background: #fff3e8; color: #e07a30;
  border-radius: 999px; font-family: 'Nunito', sans-serif;
  font-size: .67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}

.rd-dict-word-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.rd-dict-word-text {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.55rem; font-weight: 700;
  color: #1a1a1a; line-height: 1.15;
}
.rd-dict-ipa {
  font-size: .8rem; color: #aaa;
  font-family: 'Nunito', sans-serif;
}
.rd-dict-audio {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1.5px solid #eae8e3; background: #f7f6f3;
  cursor: pointer; font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.rd-dict-audio:hover { background: #dbeafe; }

.rd-dict-section-lbl {
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: .64rem; color: #aaa;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 3px;
}
.rd-dict-vi-text {
  font-family: 'Nunito', sans-serif;
  font-size: .93rem; font-weight: 700;
  color: #1a1a1a; line-height: 1.5;
}
.rd-dict-eng-def {
  font-family: 'Nunito', sans-serif;
  font-size: .83rem; color: #555;
  line-height: 1.6; margin-bottom: 5px;
}
.rd-dict-eng-def .yt-wp-pos { margin-right: 5px; }
.rd-dict-eng-ex {
  font-size: .76rem; color: #aaa;
  font-style: italic; margin-top: 2px;
  padding-left: 8px; border-left: 2px solid #eae8e3;
}
.rd-dict-divider { height: 1px; background: #f0ede8; flex-shrink: 0; }

/* ── CEFR level badge ── */
.cefr-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  font-family: 'Nunito', sans-serif; line-height: 1.6;
  vertical-align: middle;
}
.cefr-A1 { background: #dcfce7; color: #166534; }
.cefr-A2 { background: #bbf7d0; color: #14532d; }
.cefr-B1 { background: #dbeafe; color: #1e40af; }
.cefr-B2 { background: #e0e7ff; color: #3730a3; }
.cefr-C1 { background: #ffedd5; color: #9a3412; }
.cefr-C2 { background: #fee2e2; color: #991b1b; }
.cefr-none { background: #f3f4f6; color: #9ca3af; }
.rd-dict-cefr-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.rd-dict-cefr-sel {
  font-size: .72rem; font-family: 'Nunito', sans-serif; font-weight: 700;
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 6px;
  background: #fff; color: #374151; cursor: pointer;
  outline: none;
}

.rd-dict-save-btn {
  width: 100%; padding: 9px 0; border-radius: 10px;
  border: 1.5px solid #1a1a1a; background: transparent;
  color: #1a1a1a;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .84rem;
  cursor: pointer; transition: background .15s, color .15s;
}
.rd-dict-save-btn:hover { background: #1a1a1a; color: #fff; }
.rd-dict-save-btn.saved { border-color: #e0ddd8; color: #bbb; cursor: default; }
.rd-dict-save-btn:disabled { opacity: .7; }

.rd-dict-links { display: flex; flex-wrap: wrap; gap: 5px; }
.rd-dict-link {
  padding: 4px 10px; border-radius: 7px;
  border: 1.5px solid #eae8e3; background: #f7f6f3;
  font-family: 'Nunito', sans-serif; font-size: .71rem; font-weight: 700;
  color: #666; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.rd-dict-link:hover { border-color: #e07a30; color: #e07a30; }
.rd-dict-link--chatgpt { cursor: pointer; background: #f0fdf4; border-color: #86efac; color: #15803d; }
.rd-dict-link--chatgpt:hover { background: #dcfce7; border-color: #4ade80; color: #166534; }

/* ══ READING THEME BUTTON & PANEL ══ */
.rd-theme-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s;
  flex-shrink: 0;
}
.rd-theme-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--blue-soft); }
.rd-dark-btn-on { border-color: #6366f1; background: #1e1b4b; color: #fbbf24; }
.rd-dark-btn-on:hover { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }

.rd-theme-panel {
  position: fixed;
  top: 58px; right: 18px;
  z-index: 9200;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.rd-theme-panel-header {
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: .82rem;
  color: var(--ink2);
  margin-bottom: 12px;
}
.rd-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.rd-theme-swatch-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer;
}
.rd-theme-swatch {
  width: 48px; height: 48px;
  border-radius: 10px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,.18);
}
.rd-theme-swatch:hover { transform: scale(1.08); }
.rd-theme-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--blue-soft); }
.rd-theme-swatch-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.rd-theme-swatch-label {
  font-family: 'Nunito', sans-serif;
  font-size: .68rem; font-weight: 700;
  color: var(--ink2); text-align: center;
  white-space: nowrap;
}
.rd-theme-custom-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rd-theme-custom-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: .72rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}
.rd-theme-custom-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.rd-theme-custom-label {
  font-family: 'Nunito', sans-serif;
  font-size: .78rem; font-weight: 700;
  color: var(--ink2); min-width: 32px;
}
.rd-color-picker {
  width: 36px; height: 28px;
  padding: 2px; border: 1.5px solid var(--border);
  border-radius: 7px; cursor: pointer;
  background: var(--surface2);
}

#upgradePromptOverlay {
  position: fixed; inset: 0; z-index: 99998; background: rgba(0,0,0,.45);
}
#upgradePromptBanner {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 99999; background: #1c1917; color: #fff; border-radius: 18px;
  padding: 28px 28px 24px; display: flex; flex-direction: column;
  align-items: center; gap: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.36);
  font-family: 'Nunito', sans-serif; font-size: .95rem; font-weight: 600;
  text-align: center; max-width: min(420px, 92vw); width: 100%;
  animation: lp-in .22s cubic-bezier(.34,1.56,.64,1);
}
#upgradePromptBanner .up-icon { font-size: 2.4rem; line-height: 1; }
#upgradePromptBanner .up-msg  { font-size: .93rem; color: rgba(255,255,255,.9); line-height: 1.5; }
#upgradePromptBanner .up-btns { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
#upgradePromptBanner .up-upgrade {
  flex: 1; padding: 10px; border-radius: 10px; border: none;
  background: #d97706; color: #fff; font-size: .9rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
#upgradePromptBanner .up-upgrade:hover { background: #b45309; }
#upgradePromptBanner .up-cancel {
  flex: 1; padding: 10px; border-radius: 10px; border: none;
  background: rgba(255,255,255,.12); color: #fff; font-size: .9rem;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
#upgradePromptBanner .up-cancel:hover { background: rgba(255,255,255,.2); }

#loginPromptBanner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  background: #1e1b4b;
  color: #fff;
  border-radius: 18px;
  padding: 28px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.36);
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  max-width: min(420px, 92vw);
  width: 100%;
  animation: lp-in .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lp-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* ══ ONBOARDING TOUR ══ */
#tourOverlay {
  position: fixed; inset: 0; z-index: 99980;
  pointer-events: all;
}
#tourHighlight {
  position: fixed; z-index: 99985; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.68);
  pointer-events: none; transition: all .28s cubic-bezier(.4,0,.2,1);
  outline: 2.5px solid rgba(255,255,255,.55);
  outline-offset: 1px;
}
#tourHighlight.tour-hl-pulse { animation: tour-pulse 1.6s ease-in-out infinite; }
@keyframes tour-pulse {
  0%,100% { outline-color: rgba(255,255,255,.55); }
  50%      { outline-color: rgba(250,204,21,.9); }
}
#tourTooltip {
  position: fixed; z-index: 99990;
  background: var(--surface, #fff); color: var(--ink, #1a1a2e);
  border-radius: 18px; padding: 22px 22px 18px;
  width: min(340px, 88vw);
  box-shadow: 0 12px 48px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  border: 1.5px solid var(--border, #e2e8f0);
  font-family: 'Nunito', sans-serif;
  animation: tour-in .22s cubic-bezier(.34,1.56,.64,1);
  transition: top .22s cubic-bezier(.4,0,.2,1), left .22s cubic-bezier(.4,0,.2,1);
}
@keyframes tour-in {
  from { opacity: 0; transform: scale(.9) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tour-arrow {
  position: absolute; width: 0; height: 0; pointer-events: none;
}
.tour-arrow-up {
  bottom: 100%; left: 50%; transform: translateX(-50%);
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 10px solid var(--surface, #fff);
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,.08));
}
.tour-arrow-down {
  top: 100%; left: 50%; transform: translateX(-50%);
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 10px solid var(--surface, #fff);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}
.tour-arrow-left {
  right: 100%; top: 50%; transform: translateY(-50%);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  border-right: 10px solid var(--surface, #fff);
}
.tour-arrow-right {
  left: 100%; top: 50%; transform: translateY(-50%);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  border-left: 10px solid var(--surface, #fff);
}
.tour-step-badge {
  font-size: .68rem; font-weight: 700; color: var(--accent, #6c63ff);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px;
}
.tour-title {
  font-size: 1.05rem; font-weight: 800; color: var(--ink, #1a1a2e);
  margin-bottom: 8px; line-height: 1.3;
}
.tour-body {
  font-size: .88rem; color: var(--ink2, #475569); line-height: 1.6;
  margin-bottom: 18px;
}
.tour-dots {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.tour-footer {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
}
.tour-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border, #e2e8f0); transition: background .2s, width .2s;
}
.tour-dot.active {
  background: var(--accent, #6c63ff); width: 18px; border-radius: 4px;
}
.tour-btn-close {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--surface2, #f1f5f9); color: var(--muted, #94a3b8);
  font-size: .85rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.tour-btn-close:hover { background: #fee2e2; color: #dc2626; }
.tour-btn-skip {
  padding: 7px 12px; border-radius: 9px; border: 1.5px solid var(--border, #e2e8f0);
  background: none; color: var(--muted, #94a3b8); font-size: .8rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.tour-btn-skip:hover { background: var(--surface2, #f8fafc); }
.tour-btn-prev {
  padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--border, #e2e8f0);
  background: none; color: var(--ink2, #475569); font-size: .85rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.tour-btn-prev:hover { background: var(--surface2, #f8fafc); }
.tour-btn-next {
  padding: 8px 18px; border-radius: 10px; border: none;
  background: var(--accent, #6c63ff); color: #fff; font-size: .88rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s, transform .1s;
}
.tour-btn-next:hover  { background: #5b52e8; }
.tour-btn-next:active { transform: scale(.97); }
/* Welcome card (no spotlight, centered) */
#tourTooltip.tour-welcome {
  width: min(420px, 92vw); border-radius: 22px; padding: 32px 28px 24px;
  text-align: center;
}
#tourTooltip.tour-welcome .tour-title   { font-size: 1.3rem; }
#tourTooltip.tour-welcome .tour-body    { font-size: .92rem; }
#tourTooltip.tour-welcome .tour-footer  { justify-content: center; }
#tourTooltip.tour-welcome .tour-dots    { justify-content: center; }
.tour-welcome-icon { font-size: 3.2rem; margin-bottom: 10px; line-height: 1; }
/* Replay button in screen headers */
.tour-replay-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  border: 1.5px solid var(--border, #e2e8f0); background: none;
  color: var(--muted, #94a3b8); font-size: .72rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s;
}
.tour-replay-btn:hover { color: var(--accent, #6c63ff); border-color: var(--accent, #6c63ff); }

/* ══ READING PRONUNCIATION RECORD ══ */
.rd-record-panel { margin: 16px 0; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border); }
.rd-record-status {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: #fff1f2; border-bottom: 1.5px solid #fecdd3;
  font-family: 'Nunito',sans-serif; font-size: .85rem; font-weight: 600; color: #be123c;
}
.rd-record-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #ef4444; flex-shrink: 0;
  animation: rd-rec-pulse 1s ease-in-out infinite;
}
@keyframes rd-rec-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.rd-record-stop-btn {
  margin-left: auto; background: #ef4444; color: #fff; border: none; border-radius: 8px;
  padding: 5px 12px; font-family: 'Nunito',sans-serif; font-size: .78rem; font-weight: 700;
  cursor: pointer;
}
.rd-live-transcript {
  padding: 10px 16px 12px;
  font-family: 'Lora', serif;
  font-size: .88rem;
  line-height: 1.85;
  min-height: 38px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.rd-live-final { color: var(--text); }
.rd-live-interim { color: #9ca3af; font-style: italic; }
.rd-para-live-transcript {
  padding: 8px 14px 10px;
  font-family: 'Lora', serif;
  font-size: .85rem;
  line-height: 1.8;
  min-height: 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.rd-record-result { padding: 16px; background: var(--surface); }
.rd-rec-score-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-family: 'Nunito',sans-serif;
}
.rd-rec-emoji { font-size: 1.6rem; }
.rd-rec-pct { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.rd-rec-detail { font-size: .8rem; color: var(--muted); font-weight: 600; }
.rd-rec-close {
  margin-left: auto; background: none; border: none; font-size: 1.2rem;
  cursor: pointer; color: var(--muted); padding: 2px 6px; border-radius: 6px;
}
.rd-rec-close:hover { background: var(--bg2); }
.rd-rec-legend { font-family: 'Nunito',sans-serif; font-size: .75rem; margin-bottom: 10px; color: var(--muted); }
.rd-rec-text {
  font-family: 'Lora',serif; font-size: .9rem; line-height: 1.9;
  background: var(--surface2); border-radius: 10px; padding: 14px 16px;
  border: 1px solid var(--border);
}
.rd-rec-word.rd-rec-ok { color: #16a34a; font-weight: 700; }
.rd-rec-word.rd-rec-miss { color: #dc2626; text-decoration: underline wavy #dc2626; }
.rd-rec-empty { font-family:'Nunito',sans-serif; font-size:.85rem; color:var(--muted); padding:12px 0; text-align:center; }
.rd-rec-heard-label {
  font-family: 'Nunito', sans-serif;
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 10px 0 4px;
}
.rd-rec-heard-text {
  font-family: 'Nunito', sans-serif;
  font-size: .82rem; line-height: 1.7;
  color: var(--muted);
  background: var(--bg2, #f5f4f2);
  border-radius: 8px; padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  font-style: italic;
}
.rd-rec-retry {
  margin-top: 12px; background: #0891b2; color: #fff; border: none; border-radius: 10px;
  padding: 8px 20px; font-family: 'Nunito',sans-serif; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.rd-rec-retry:hover { background: #0e7490; }
.rd-rec-miss { cursor: pointer; }
.rd-rec-miss:hover { text-decoration: underline wavy #f87171; }

/* ══ WORD PRONUNCIATION POPUP ══ */
.rd-word-pron-popup {
  position: fixed; z-index: 100050;
  width: 310px;
  background: var(--card, #fff);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
}
.rd-wpp-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: var(--surface2, #f8f7f5);
  border-bottom: 1.5px solid var(--border);
}
.rd-wpp-word { font-size: 1.25rem; font-weight: 900; color: var(--text); }
.rd-wpp-ipa { font-size: .8rem; color: var(--muted); font-family: serif; flex-shrink: 0; }
.rd-wpp-listen {
  margin-left: auto; background: none;
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 3px 8px; cursor: pointer; font-size: .9rem; flex-shrink: 0;
  transition: background .12s;
}
.rd-wpp-listen:hover { background: var(--bg2); }
.rd-wpp-acc-grp { margin-left: auto; display: inline-flex; gap: 6px; flex-shrink: 0; }
.rd-wpp-acc {
  background: #fff; border: 1.5px solid #cbd5e1; border-radius: 8px;
  padding: 4px 9px; cursor: pointer; font-size: .76rem; font-weight: 800; color: #475569;
  transition: all .12s; white-space: nowrap;
}
.rd-wpp-acc-us { color: #1d4ed8; border-color: #bfdbfe; }
.rd-wpp-acc-us:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.rd-wpp-acc-uk { color: #b91c1c; border-color: #fecaca; }
.rd-wpp-acc-uk:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.rd-wpp-close {
  background: none; border: none; font-size: 1.1rem;
  cursor: pointer; color: var(--muted); padding: 2px 5px; border-radius: 6px; flex-shrink: 0;
}
.rd-wpp-close:hover { background: var(--bg2); }
.rd-wpp-heard {
  margin: 10px 14px 0; padding: 8px 12px; border-radius: 10px;
  background: #fef2f2; border: 1.5px solid #fecaca; color: #991b1b; font-size: .86rem; line-height: 1.5;
}
.rd-wpp-heard b { color: #dc2626; font-weight: 800; }
.rd-wpp-heard-arrow { color: #94a3b8; margin: 0 3px; font-weight: 800; }
.rd-wpp-heard-ok { color: #16a34a !important; }
.rd-wpp-tips {
  padding: 10px 14px 12px;
  border-bottom: 1.5px solid var(--border);
  max-height: 200px; overflow-y: auto;
}
.rd-wpp-tips-title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 6px;
}
.rd-wpp-tips ul { margin: 0; padding-left: 16px; }
.rd-wpp-tips li { font-size: .82rem; line-height: 1.75; color: var(--text); margin-bottom: 2px; }
.rd-wpp-no-tips { font-size: .82rem; color: var(--muted); margin: 0; }
.rd-wpp-rec-area { padding: 10px 14px 12px; }
.rd-wpp-rec-btn {
  width: 100%; padding: 8px 12px; border-radius: 10px;
  background: #0891b2; color: #fff; border: none;
  font-family: 'Nunito', sans-serif; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.rd-wpp-rec-btn:hover { background: #0e7490; }
.rd-wpp-rec-btn.active { background: #ef4444; }
.rd-wpp-rec-btn.active:hover { background: #dc2626; }
.rd-wpp-rec-result { margin-top: 8px; font-size: .82rem; text-align: center; font-family: 'Nunito', sans-serif; }
.rd-wpp-rec-ok { color: #16a34a; font-weight: 800; font-size: .9rem; }
.rd-wpp-rec-heard { color: var(--text); line-height: 1.6; }
.rd-wpp-rec-heard span { color: var(--muted); font-size: .76rem; }
.rd-wpp-rec-no { color: #dc2626; }
.rd-wpp-listening { color: #be123c; font-weight: 600; }

/* ══ AI PASSAGE MODAL ══ */
.vocab-ai-passage-btn { background: linear-gradient(135deg, #6d28d9, #7c3aed) !important; color: #fff !important; border-color: transparent !important; }
.vocab-ai-passage-btn:hover { background: linear-gradient(135deg, #5b21b6, #6d28d9) !important; }
.ai-passage-box {
  background: var(--surface); border-radius: 22px; padding: 28px 28px 24px;
  width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 18px;
}
.ai-passage-header { display: flex; align-items: center; justify-content: space-between; }
.ai-passage-title { font-family: 'Nunito',sans-serif; font-size: 1.05rem; font-weight: 900; color: var(--ink); }
.ai-passage-controls { display: flex; flex-direction: column; gap: 12px; }
.ai-passage-row { display: flex; flex-direction: column; gap: 4px; }
.ai-passage-lbl { font-family: 'Nunito',sans-serif; font-size: .78rem; font-weight: 700; color: var(--ink2); }
.ai-passage-sel, .ai-passage-input {
  font-family: 'Nunito',sans-serif; font-size: .85rem; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface2);
  color: var(--ink); outline: none; transition: border-color .15s;
}
.ai-passage-sel:focus, .ai-passage-input:focus { border-color: #7c3aed; }
.ai-passage-gen-btn {
  background: linear-gradient(135deg, #6d28d9, #7c3aed); color: #fff; border: none;
  border-radius: 12px; padding: 12px; font-family: 'Nunito',sans-serif;
  font-size: .92rem; font-weight: 800; cursor: pointer; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ai-passage-gen-btn:disabled { opacity: .6; cursor: not-allowed; }
.ai-passage-loading { font-size: .9rem; font-weight: 700; color: #7c3aed; text-align: center; padding: 18px 0; }
.ai-passage-out { border: 1.5px solid #ddd6fe; border-radius: 12px; background: #faf5ff; padding: 14px 16px; max-height: 46vh; overflow-y: auto; text-align: left; }
.ai-passage-out-hd { display: flex; align-items: center; justify-content: space-between; font-size: .7rem; font-weight: 900; letter-spacing: .05em; color: #7c3aed; margin-bottom: 8px; }
.ai-passage-copy { font-size: .7rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; border: 1.5px solid #c7b3f5; background: #fff; color: #6d28d9; cursor: pointer; }
.ai-passage-out-en { font-family: 'Lora', serif; font-size: 1rem; line-height: 1.7; color: var(--ink); }
.ai-passage-out-vi { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd6fe; font-size: .9rem; line-height: 1.6; color: var(--ink2, #475569); font-style: italic; }
.ai-passage-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: ai-spin .7s linear infinite; display: inline-block;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-passage-result { display: flex; flex-direction: column; gap: 14px; }
.ai-passage-en {
  font-family: 'Lora',serif; font-size: .92rem; line-height: 1.8; color: var(--ink);
  background: #faf9f6; border-radius: 12px; padding: 16px 18px;
  border: 1.5px solid var(--border);
}
.ai-passage-hl { background: #fde68a; color: #92400e; border-radius: 3px; padding: 1px 2px; font-weight: 700; }
.ai-passage-divider { height: 1px; background: var(--border); }
.ai-passage-vi {
  font-family: 'Nunito',sans-serif; font-size: .85rem; line-height: 1.7; color: var(--ink2);
  background: #f0f9ff; border-radius: 12px; padding: 14px 16px;
  border: 1.5px solid #bae6fd;
}
.ai-passage-actions { display: flex; gap: 10px; }
.ai-passage-copy-btn, .ai-passage-regen-btn {
  flex: 1; padding: 9px; border-radius: 10px; font-family: 'Nunito',sans-serif;
  font-size: .82rem; font-weight: 700; cursor: pointer; border: 1.5px solid var(--border);
  background: var(--surface2); color: var(--ink2); transition: background .15s;
}
.ai-passage-copy-btn:hover, .ai-passage-regen-btn:hover { background: var(--bg2); }

#loginPromptOverlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
}
#loginPromptBanner .lp-icon { font-size: 2.2rem; line-height: 1; }
#loginPromptBanner .lp-msg { font-size: .93rem; color: rgba(255,255,255,.9); line-height: 1.5; }
#loginPromptBanner .lp-btns { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
#loginPromptBanner .lp-login {
  flex: 1; background: #6d28d9; color: #fff; border: none;
  border-radius: 10px; padding: 10px 0;
  font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
#loginPromptBanner .lp-login:hover { background: #5b21b6; }
#loginPromptBanner .lp-cancel {
  flex: 1; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 10px 0;
  font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
#loginPromptBanner .lp-cancel:hover { background: rgba(255,255,255,.18); }

/* ── Memory card game ─────────────────────────────────────────────────────── */
.yt-mg-open-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 999px;
  border: 1.5px solid #7c3aed; background: #faf5ff;
  font-family: 'Nunito', sans-serif; font-size: .72rem; font-weight: 800;
  color: #7c3aed; cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.yt-mg-open-btn:hover { background: #ede9fe; }
.yt-vm-gpt-btn { border-color: #10a37f !important; color: #10a37f !important; background: #f0fdf9 !important; }
.yt-vm-gpt-btn:hover { background: #d1fae5 !important; }
/* ═══ Flashcard ═══ */
.fc-box {
  background: #fff; border-radius: 22px; width: min(560px, 95vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.25); font-family: 'Nunito', sans-serif;
}
.fc-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #eef2f7; }
.fc-title { font-size: 1.05rem; font-weight: 900; color: #1e293b; }
.fc-counter { font-size: .82rem; font-weight: 800; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 4px 12px; }
.fc-top-btn { margin-left: auto; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 10px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; }
.fc-top-btn:hover { border-color: #7c3aed; background: #f5f3ff; }
.fc-stage { padding: 24px 22px; display: flex; justify-content: center; }
.fc-card { width: 100%; max-width: 440px; height: 320px; cursor: pointer; perspective: 1400px; }
.fc-inner { position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; }
.fc-card.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 20px; padding: 26px 24px; display: flex; flex-direction: column;
  border: 1.5px solid #e9d5ff; box-shadow: 0 10px 30px rgba(124,58,237,.12); overflow-y: auto;
}
.fc-front { align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, #fff, #f5f3ff); }
.fc-back  { transform: rotateY(180deg); background: linear-gradient(160deg, #fff, #f0fdf4); border-color: #bbf7d0; gap: 4px; }
.fc-lv { position: absolute; top: 14px; left: 14px; color: #fff; font-size: .72rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; }
.fc-word { font-size: 2.4rem; font-weight: 900; color: #1e293b; line-height: 1.15; word-break: break-word; }
.fc-ipa { font-size: 1.15rem; color: #7c3aed; margin-top: 8px; font-family: 'Segoe UI', sans-serif; }
.fc-audio { margin-top: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #d8b4fe; background: #faf5ff; cursor: pointer; font-size: 1.2rem; }
.fc-audio:hover { background: #f3e8ff; }
.fc-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: .76rem; color: #94a3b8; font-weight: 600; }
.fc-sec-label { font-size: .72rem; font-weight: 800; color: #15803d; text-transform: uppercase; letter-spacing: .02em; margin: 10px 0 3px; }
.fc-vi  { font-size: 1.25rem; font-weight: 800; color: #1e293b; }
.fc-def { font-size: .95rem; color: #334155; line-height: 1.5; }
.fc-ex  { font-size: .95rem; color: #475569; font-style: italic; line-height: 1.55; }
.fc-ex mark, .fc-def mark { background: #fde68a; color: #92400e; border-radius: 3px; padding: 0 2px; font-style: normal; font-weight: 700; }
.fc-empty { color: #94a3b8; font-style: italic; margin: auto 0; text-align: center; }
.fc-controls { display: flex; gap: 10px; padding: 0 22px 22px; }
.fc-nav-btn, .fc-flip-btn {
  flex: 1; padding: 12px; border-radius: 12px; cursor: pointer; font-family: inherit;
  font-size: .92rem; font-weight: 800; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; transition: all .15s;
}
.fc-nav-btn:hover { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
.fc-flip-btn { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; border-color: transparent; flex: 1.3; }
.fc-flip-btn:hover { filter: brightness(1.05); }
@media (max-width: 560px) { .fc-card { height: 280px; } .fc-word { font-size: 1.9rem; } }

.yt-mg-box {
  background: #fff; border-radius: 20px;
  width: min(560px, 96vw); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  position: relative;
}
/* ── Vocab Test ── */
/* ── Vocab Test ────────────────────────────────────────────────────────── */
.yt-vt-box {
  background: #fff; border-radius: 22px;
  width: min(980px, 97vw); max-height: 93vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 32px 96px rgba(0,0,0,.22);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.yt-vt-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .8rem; font-family: 'Plus Jakarta Sans', sans-serif; }
.yt-vt-score-lbl { font-weight: 800; color: #6366f1; }
.yt-vt-prog-lbl  { color: #94a3b8; font-weight: 600; }
.yt-vt-restart-btn { background: none; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 4px 9px; cursor: pointer; font-size: .88rem; color: #6b7280; transition: all .12s; }
.yt-vt-restart-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.yt-vt-auto-btn { background: none; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: .75rem; font-weight: 800; color: #94a3b8; font-family: 'Plus Jakarta Sans', sans-serif; transition: all .15s; letter-spacing: .02em; }
.yt-vt-auto-btn:hover { border-color: #6366f1; color: #6366f1; background: #eef2ff; }
.yt-vt-auto-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.yt-vt-body {
  flex: 1; overflow-y: auto; padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
/* Type pill */
.yt-vt-type-pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 4px 12px; border-radius: 20px; border: 1.5px solid transparent;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Question card */
.yt-vt-qcard {
  border-radius: 16px; padding: 24px 20px; text-align: center;
  border: 1.5px solid #e5e7eb;
}
.yt-vt-qcard-listen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.yt-vt-word   { font-size: 2.1rem; font-weight: 900; color: #0f172a; letter-spacing: -.02em; font-family: 'Poppins', sans-serif; }
.yt-vt-prompt { font-size: 1.2rem; font-weight: 700; color: #1e293b; line-height: 1.5; font-family: 'Plus Jakarta Sans', sans-serif; }
.yt-vt-en-def { font-size: 1rem; font-weight: 500; color: #1e293b; line-height: 1.7; font-family: 'Plus Jakarta Sans', sans-serif; font-style: italic; padding: 4px 0; }
.yt-vt-word-big { font-size: 2.4rem; font-weight: 900; color: #0f172a; letter-spacing: -.02em; font-family: 'Poppins', sans-serif; }
.yt-vt-opts-def { display: flex; flex-direction: column; gap: 10px; }
.yt-vt-opt-def { text-align: left; align-items: flex-start; min-height: 52px; height: auto; padding: 12px 14px; }
.yt-vt-opt-def .yt-vt-opt-val { white-space: normal; font-size: .88rem; line-height: 1.5; font-style: italic; }
.yt-vt-ipa    { font-size: .9rem; color: #94a3b8; font-style: italic; margin-top: 4px; }
.yt-vt-pos-lbl { font-size: .78rem; color: #a5b4fc; font-weight: 700; margin-top: 2px; font-style: italic; }
.yt-vt-ipa-hint-wrap { margin-top: 6px; }
.yt-vt-ipa-hint-btn { background: none; border: 1px dashed #cbd5e1; border-radius: 20px; padding: 3px 12px; font-size: .78rem; color: #94a3b8; cursor: pointer; font-family: 'Nunito', sans-serif; transition: border-color .15s, color .15s; }
.yt-vt-ipa-hint-btn:hover { border-color: #6366f1; color: #6366f1; }
/* Sentence (fill-blank) */
.yt-vt-sentence {
  font-size: .97rem; color: #14532d; line-height: 1.85;
  padding: 16px 18px; background: #f0fdf4; border-radius: 12px;
  border: 1.5px solid #bbf7d0; border-left: 4px solid #22c55e;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.yt-vt-blank { display: inline-block; width: 120px; height: 1.1em; border-bottom: 2px dashed #818cf8; vertical-align: -0.1em; }
/* Options grid */
.yt-vt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.yt-vt-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border: 2px solid #e5e7eb; border-radius: 12px;
  background: #fff; cursor: pointer; text-align: left;
  transition: border-color .13s, background .13s, box-shadow .13s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.yt-vt-opt:hover:not(:disabled) { border-color: #818cf8; background: #f5f3ff; box-shadow: 0 0 0 3px #818cf820; }
.yt-vt-opt-ltr {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px;
  background: #f1f5f9; color: #64748b;
  font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
  transition: background .13s, color .13s;
}
.yt-vt-opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.yt-vt-opt-val  { font-size: .88rem; font-weight: 700; color: #1e293b; line-height: 1.4; }
.yt-vt-opt-ipa  { font-size: .72rem; color: #94a3b8; font-style: italic; }
.yt-vt-opt-vi   { font-size: .72rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Answer states */
.yt-vt-opt-ok    { border-color: #16a34a !important; background: #f0fdf4 !important; }
.yt-vt-opt-ok .yt-vt-opt-ltr    { background: #16a34a; color: #fff; }
.yt-vt-opt-ok .yt-vt-opt-val    { color: #14532d; font-weight: 800; }
.yt-vt-opt-ok .yt-vt-def-part   { color: #14532d; font-weight: 700; }
.yt-vt-opt-wrong { border-color: #ef4444 !important; background: #fef2f2 !important; }
.yt-vt-opt-wrong .yt-vt-opt-ltr { background: #ef4444; color: #fff; }
.yt-vt-opt-wrong .yt-vt-opt-val { color: #991b1b; font-weight: 800; }
.yt-vt-opt-wrong .yt-vt-def-part { color: #991b1b; font-weight: 700; }
/* Spell/Listen input */
.yt-vt-spell-wrap { display: flex; gap: 8px; align-items: stretch; }
.yt-vt-spell-inp {
  flex: 1; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 12px;
  font-size: 1rem; font-weight: 700; color: #1e293b; outline: none;
  font-family: 'Nunito', sans-serif; transition: border-color .13s;
}
.yt-vt-spell-inp:focus { border-color: #818cf8; }
.yt-vt-inp-ok    { border-color: #16a34a !important; background: #f0fdf4 !important; }
.yt-vt-inp-wrong { border-color: #ef4444 !important; background: #fef2f2 !important; }
.yt-vt-check-btn {
  padding: 0 20px; border-radius: 12px; border: none;
  background: #6366f1; color: #fff; font-size: .9rem; font-weight: 800;
  cursor: pointer; white-space: nowrap; font-family: 'Nunito', sans-serif;
  transition: background .12s;
}
.yt-vt-check-btn:hover { background: #4f46e5; }
.yt-vt-listen-btn {
  padding: 14px 32px; border-radius: 50px;
  border: 2px solid #818cf8; background: #eef2ff; color: #4f46e5;
  font-size: 1rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif;
  transition: all .15s;
}
.yt-vt-listen-btn:hover { background: #6366f1; color: #fff; border-color: #6366f1; }
/* VI-translate exercise (word-level) */
.yt-vt-qcard-vitrans { display: flex; flex-direction: column; gap: 8px; }
.yt-vt-vitrans-label { font-size: .75rem; font-weight: 700; color: #7c3aed; text-transform: uppercase; letter-spacing: .06em; }
.yt-vt-vitrans-meaning { font-size: 1.15rem; font-weight: 800; color: #2d1b6b; line-height: 1.4; }
.yt-vt-vitrans-ctx-label { font-size: .75rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.yt-vt-vitrans-ctx { font-size: .9rem; color: #374151; background: rgba(124,58,237,.07); border-radius: 8px; padding: 8px 12px; font-style: italic; line-height: 1.6; }
/* VI-sent exercise (sentence-level) */
.yt-vt-qcard-visent { display: flex; flex-direction: column; gap: 6px; }
.yt-vt-visent-vi { font-size: 1.1rem; font-weight: 700; color: #134e4a; line-height: 1.5; background: rgba(13,148,136,.08); border-radius: 10px; padding: 12px 16px; }
.yt-vt-visent-hints { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.yt-vt-visent-hint-btn { background: none; border: 1.5px dashed #0d9488; color: #0d9488; border-radius: 8px; padding: 5px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; text-align: left; }
.yt-vt-visent-hint-btn:hover { background: rgba(13,148,136,.08); }
.yt-vt-visent-hint-body { font-size: .85rem; color: #374151; background: #f0fdfa; border-radius: 8px; padding: 8px 12px; line-height: 1.7; }
.yt-vt-visent-vocab-row { display: block; }
.yt-vt-visent-ipa { font-size: .78rem; color: #64748b; font-style: italic; margin: 0 4px; }
.yt-vt-visent-pos { font-size: .75rem; color: #9333ea; font-style: italic; margin-left: 3px; }
.yt-vt-visent-formula { font-weight: 700; color: #0d9488; }
.yt-vt-visent-area { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.yt-vt-visent-inp { flex: 1; border: 2px solid #d1fae5; border-radius: 10px; padding: 9px 12px; font-size: .92rem; font-family: 'Nunito', sans-serif; resize: none; outline: none; line-height: 1.5; min-height: 44px; }
.yt-vt-visent-inp:focus { border-color: #0d9488; }
.yt-vt-visent-correct { font-size: .88rem; padding: 8px 12px; border-radius: 8px; line-height: 1.6; margin-top: 4px; }
.yt-vt-visent-correct-ok { background: #f0fdf4; color: #166534; border: 1.5px solid #bbf7d0; }
.yt-vt-visent-correct-wrong { background: #fff7ed; color: #9a3412; border: 1.5px solid #fed7aa; }
.yt-vt-visent-loading { text-align: center; padding: 40px 20px; color: #6b7280; font-size: .95rem; }
.yt-vt-visent-bad-word { color: #dc2626; font-weight: 700; text-decoration: underline wavy #dc2626; }
.yt-vt-visent-correct-label { font-size: .78rem; color: #6b7280; font-style: italic; }
.yt-vt-visent-hint-sep { font-size: .7rem; font-weight: 700; color: #0d9488; text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 2px; }
/* Feedback + reveal */
.yt-vt-feedback {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; border-radius: 12px;
  font-size: .95rem; font-weight: 800; font-family: 'Nunito', sans-serif;
}
.yt-vt-fb-icon { font-size: 1.1rem; }
.yt-vt-fb-ok    { background: #f0fdf4; color: #16a34a; }
.yt-vt-fb-wrong { background: #fef2f2; color: #dc2626; }
.yt-vt-reveal {
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 5px;
}
.yt-vt-reveal-ok    { background: #f0fdf4; border: 1.5px solid #bbf7d0; }
.yt-vt-reveal-wrong { background: #fafafa; border: 1.5px solid #e5e7eb; }
.yt-vt-reveal-row   { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yt-vt-reveal-word  { font-size: 1.1rem; font-weight: 900; color: #1e293b; }
.yt-vt-reveal-ipa   { font-size: .82rem; color: #94a3b8; font-style: italic; }
.yt-vt-reveal-pos   { font-size: .72rem; color: #a5b4fc; font-weight: 700; font-style: italic; background: #eef2ff; padding: 1px 7px; border-radius: 10px; }
.yt-vt-reveal-vi    { font-size: .9rem; color: #374151; font-weight: 600; }
.yt-vt-reveal-en    { font-size: .8rem; color: #64748b; font-style: italic; }
.yt-vt-reveal-ex    { font-size: .82rem; color: #475569; font-style: italic; border-top: 1px solid #e2e8f0; padding-top: 6px; margin-top: 2px; }
.yt-vt-ex-hl { background: none; font-style: normal; color: #c2410c; font-weight: 800; }
/* ── Drag-multi ── */
.yt-vt-ms-list { list-style: decimal; padding-left: 1.3rem; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.yt-vt-ms-item { line-height: 1.9; font-size: .93rem; font-family: 'Lora', serif; color: #1e293b; }
.yt-vt-ms-zone { cursor: pointer; }
.yt-vt-drop-filled { color: #4c1d95 !important; font-weight: 700; border-style: solid !important; background: #ede9fe !important; }
.yt-vt-ms-hint { color: #16a34a; font-style: normal; font-weight: 700; font-size: .82rem; margin-left: 4px; }
.yt-vt-ms-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px 0 4px; min-height: 44px; border-top: 1px dashed #e2e8f0; margin-top: 6px; }
.yt-vt-ms-bank-done { font-size: .82rem; color: #9ca3af; font-style: italic; }
.yt-vt-ms-check { display: block; width: 100%; margin-top: 10px; padding: 11px; border-radius: 50px; border: none; background: #6366f1; color: #fff; font-size: .92rem; font-weight: 700; cursor: pointer; }
.yt-vt-ms-check:hover { background: #4f46e5; }
.yt-vt-ms-footer { padding: 10px 24px 14px; border-top: 1px solid #e5e7eb; flex-shrink: 0; }
.yt-vt-ms-footer .yt-vt-ms-check { margin-top: 0; }
/* ── Drag-blank ── */
.yt-vt-drag-sent { line-height: 2; }
.yt-vt-drop-zone {
  display: inline-block; min-width: 80px; padding: 1px 12px;
  border-radius: 8px; border: 2px dashed #a78bfa;
  color: #c4b5fd; background: #f5f3ff;
  cursor: pointer; vertical-align: middle;
  transition: background .15s, border-color .15s, color .15s;
}
.yt-vt-drop-zone.yt-vt-drop-ready { border-color: #7c3aed; background: #ede9fe; color: #7c3aed; }
.yt-vt-drop-zone.yt-vt-drop-ok    { border: 2px solid #16a34a; background: #dcfce7; color: #15803d; font-weight: 700; }
.yt-vt-drop-zone.yt-vt-drop-wrong { border: 2px solid #dc2626; background: #fee2e2; color: #b91c1c; font-weight: 700; }
.yt-vt-drag-bank {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 0 4px;
}
.yt-vt-drag-chip {
  padding: 8px 18px; border-radius: 20px; border: 1.5px solid #c4b5fd;
  background: #f5f3ff; color: #4c1d95; font-size: .9rem; font-weight: 600;
  cursor: grab; user-select: none; transition: background .12s, border-color .12s, opacity .2s;
}
.yt-vt-drag-chip:hover     { background: #ede9fe; border-color: #7c3aed; }
.yt-vt-drag-chip.yt-vt-chip-sel { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.yt-vt-drag-chip.yt-vt-chip-ok  { background: #dcfce7; color: #15803d; border-color: #16a34a; }
/* Keyboard shortcut hint */
.yt-vt-kbd-hint {
  text-align: center; font-size: .72rem; color: #94a3b8; margin-top: 6px; letter-spacing: .02em;
}
.yt-vt-kbd-hint kbd {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: #f1f5f9; border: 1px solid #cbd5e1; color: #64748b;
  font-family: monospace; font-size: .72rem; line-height: 1.6;
}
.yt-vt-box.dark .yt-vt-kbd-hint { color: #475569; }
.yt-vt-box.dark .yt-vt-kbd-hint kbd { background: #1e293b; border-color: #334155; color: #64748b; }
/* Next button */
.yt-vt-next-btn {
  align-self: center; padding: 12px 32px; border-radius: 50px; border: none;
  background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff;
  font-size: .95rem; font-weight: 800; cursor: pointer;
  font-family: 'Nunito', sans-serif; transition: opacity .12s; box-shadow: 0 4px 16px #6366f130;
}
.yt-vt-next-btn:hover { opacity: .88; }
.yt-vt-btn-gray { background: #94a3b8; box-shadow: none; }
/* Results */
.yt-vt-results { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px 16px; width: 100%; }
.yt-vt-res-top { display: flex; align-items: center; gap: 18px; justify-content: center; }
.yt-vt-res-emoji { font-size: 3rem; line-height: 1; }
.yt-vt-res-ring {
  width: 86px; height: 86px; border-radius: 50%;
  background: conic-gradient(var(--rclr) calc(var(--rpct) * 1%), #f1f5f9 0);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 10px #fff; flex-shrink: 0;
}
.yt-vt-res-score { font-size: 1.6rem; font-weight: 900; color: #0f172a; font-family: 'Nunito', sans-serif; }
.yt-vt-res-denom { font-size: .9rem; color: #94a3b8; }
.yt-vt-res-pct  { font-size: 1.4rem; font-weight: 900; font-family: 'Nunito', sans-serif; }
.yt-vt-res-msg  { font-size: .95rem; color: #64748b; font-weight: 700; }
.yt-vt-res-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.yt-vt-btn-retry-wrong { background: linear-gradient(135deg,#ef4444,#f97316) !important; }
/* Word lists */
.yt-vt-res-section { width: 100%; max-width: 560px; }
.yt-vt-res-section-hd { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 0 8px; }
.yt-vt-res-hd-wrong { color: #ef4444; }
.yt-vt-res-hd-ok    { color: #16a34a; }
.yt-vt-res-chips { display: flex; flex-direction: column; gap: 5px; }
.yt-vt-res-chip { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: .83rem; }
.yt-vt-res-chip-wrong { background: #fef2f2; border: 1px solid #fecaca; }
.yt-vt-res-chip-ok    { background: #f0fdf4; border: 1px solid #bbf7d0; }
.yt-vt-res-chip-word  { font-weight: 700; color: #1e293b; min-width: 80px; }
.yt-vt-res-chip-ipa   { font-size: .75rem; color: #94a3b8; font-style: italic; }
.yt-vt-res-chip-vi    { font-size: .78rem; color: #475569; flex: 1; }
.yt-vt-box.dark .yt-vt-res-chip-wrong { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
.yt-vt-box.dark .yt-vt-res-chip-ok    { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }
.yt-vt-box.dark .yt-vt-res-chip-word  { color: #e2e8f0; }
.yt-vt-box.dark .yt-vt-res-chip-vi    { color: #94a3b8; }
/* Open button */
.yt-vt-open-btn { background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border-color:transparent; }
.yt-vt-open-btn:hover { opacity: .88; }
/* Level select */
.yt-vt-lvsel { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 26px 20px; }
.yt-vt-lvsel-section { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 440px; }
.yt-vt-lvsel-label { font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; font-family: 'Nunito', sans-serif; }
.yt-vt-cnt-row { display: flex; gap: 8px; background: #f1f5f9; border-radius: 12px; padding: 4px; }
.yt-vt-cnt-btn { padding: 7px 14px; border-radius: 9px; border: none; background: transparent; font-size: .82rem; font-weight: 800; color: #64748b; cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .15s; }
.yt-vt-cnt-btn.active { background: #16a34a; color: #fff; box-shadow: 0 1px 6px rgba(22,163,74,.3); }
.yt-vt-lvsel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 9px; width: 100%; }
.yt-vt-lvsel-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 10px; border-radius: 14px; border: 2px solid #e5e7eb;
  background: #fff; cursor: pointer; transition: all .15s;
  font-family: 'Nunito', sans-serif;
}
.yt-vt-lvsel-btn:hover:not(:disabled) { border-color: var(--lvclr, #6366f1); background: color-mix(in srgb, var(--lvclr, #6366f1) 5%, #fff); box-shadow: 0 2px 12px color-mix(in srgb, var(--lvclr, #6366f1) 20%, transparent); transform: translateY(-1px); }
.yt-vt-lvsel-btn.selected { border-color: var(--lvclr, #6366f1); background: color-mix(in srgb, var(--lvclr, #6366f1) 10%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lvclr, #6366f1) 25%, transparent); }
.yt-vt-lvsel-btn.selected .yt-vt-lvsel-count { color: var(--lvclr, #6366f1); }
.yt-vt-lvsel-btn.disabled, .yt-vt-lvsel-btn:disabled { opacity: .32; cursor: not-allowed; }
.yt-vt-lvsel-badge { font-size: .8rem; font-weight: 900; color: #fff; padding: 3px 12px; border-radius: 20px; letter-spacing: .04em; }
.yt-vt-lvsel-name { font-size: .88rem; font-weight: 800; color: #374151; }
.yt-vt-lvsel-count { font-size: .72rem; color: #94a3b8; font-weight: 700; }
.yt-vt-lvsel-note { font-size: .8rem; color: #f59e0b; text-align: center; font-weight: 600; }
.yt-vt-start-row { display: flex; justify-content: center; width: 100%; margin-top: 4px; }
.yt-vt-start-btn { padding: 11px 40px; border-radius: 12px; border: none; background: #4f46e5; color: #fff; font-size: .92rem; font-weight: 800; cursor: pointer; transition: opacity .15s; font-family: 'Nunito', sans-serif; }
.yt-vt-start-btn:hover { opacity: .88; }
.yt-vt-start-btn:disabled { opacity: .35; cursor: not-allowed; }
/* Type picker */
.yt-vt-type-picker { padding: 4px 0; }
.yt-vt-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.yt-vt-type-picker .yt-vt-type-grid { grid-template-columns: repeat(4, 1fr); }
.yt-vt-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 16px 10px 14px; border-radius: 16px; border: 2px solid #e5e7eb;
  background: #fff; cursor: pointer; font-family: 'Nunito', sans-serif;
  transition: all .15s;
}
.yt-vt-type-btn:hover:not(:disabled) { border-color: #6366f1; background: #eef2ff; transform: translateY(-1px); box-shadow: 0 2px 10px rgba(99,102,241,.15); }
.yt-vt-type-btn { position: relative; }
.yt-vt-type-active { border-color: #16a34a !important; background: #eef2ff !important; }
/* Card đã chọn: chữ xanh lá đậm cho dễ đọc (kể cả dark mode) */
.yt-vt-type-active .yt-vt-type-label,
.yt-vt-box.dark .yt-vt-type-active .yt-vt-type-label { color: #15803d !important; }
.yt-vt-type-active .yt-vt-type-sub,
.yt-vt-box.dark .yt-vt-type-active .yt-vt-type-sub { color: #166534 !important; }
.yt-vt-type-active .yt-vt-type-chk { background: #16a34a; }
.yt-vt-type-chk {
  position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: #6366f1; color: #fff; font-size: .72rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.yt-vt-start-btn {
  padding: 9px 26px; border-radius: 10px; border: none;
  background: #6366f1; color: #fff; font-size: .9rem; font-weight: 800;
  cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .12s;
}
.yt-vt-start-btn:hover { background: #4f46e5; }
/* Reorder sentence */
.yt-vt-reorder-hint-lbl { font-size: .8rem; font-weight: 700; color: #0d9488; margin-bottom: 4px; }
.yt-vt-rd-ans {
  min-height: 48px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 14px; border-radius: 12px; border: 2px dashed #cbd5e1; background: #f8fafc; margin: 12px 0;
}
.yt-vt-rd-ans-ok { border-color: #16a34a; background: #f0fdf4; }
.yt-vt-rd-ans-wrong { border-color: #ef4444; background: #fef2f2; }
.yt-vt-rd-ph { color: #94a3b8; font-size: .85rem; }
.yt-vt-rd-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.yt-vt-rd-chip {
  padding: 8px 14px; border-radius: 10px; border: 1.5px solid #c7d2fe;
  background: #eef2ff; color: #3730a3; font-size: .92rem; font-weight: 700;
  cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .12s;
}
.yt-vt-rd-chip:hover { background: #e0e7ff; border-color: #6366f1; }
.yt-vt-rd-chip-picked { background: #6366f1; color: #fff; border-color: #6366f1; }
.yt-vt-type-disabled { opacity: .35; cursor: not-allowed !important; }
.yt-vt-type-icon  { font-size: 1.5rem; }
.yt-vt-type-img   { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 2px; }
.yt-vt-type-label { font-size: .82rem; font-weight: 800; color: #1c1917; }
.yt-vt-type-sub   { font-size: .68rem; color: #9ca3af; text-align: center; line-height: 1.3; }
.yt-vt-back-btn {
  padding: 8px 20px; border-radius: 10px; border: 1.5px solid #d1d5db;
  background: #fff; color: #6b7280; font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .12s;
}
.yt-vt-back-btn:hover { border-color: #9ca3af; color: #374151; }
.yt-vt-hint-vi {
  font-size: .78rem; color: #0369a1; background: #e0f2fe;
  border-radius: 8px; padding: 5px 10px; margin-bottom: 10px;
  font-weight: 600; line-height: 1.4;
}
/* Speaker button */
.yt-vt-speak-btn { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0 3px; opacity: .55; vertical-align: middle; transition: opacity .15s, transform .1s; line-height: 1; }
.yt-vt-speak-btn:hover { opacity: 1; transform: scale(1.15); }
/* Context question type */
.yt-vt-ctx-sent { font-size: 1.05rem; line-height: 1.7; }
.yt-vt-ctx-hl { background: #fef08a; color: #78350f; border-radius: 4px; padding: 1px 5px; font-weight: 800; font-style: normal; }
.yt-vt-ctx-q { font-size: .9rem; font-weight: 700; color: #374151; font-family: 'Plus Jakarta Sans', sans-serif; margin: 4px 0 2px; }
.yt-vt-opts-def { grid-template-columns: 1fr; }
.yt-vt-opts-def .yt-vt-opt { align-items: flex-start; }
.yt-vt-opts-def .yt-vt-opt-body { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.yt-vt-def-part { font-size: .88rem; line-height: 1.45; color: #1e293b; font-family: 'Plus Jakarta Sans', sans-serif; }
.yt-vt-def-pos { font-style: normal; font-weight: 800; color: #6366f1; margin-right: 3px; font-size: .78rem; }
.yt-vt-box.dark .yt-vt-ctx-hl { background: #854d0e; color: #fef08a; }
.yt-vt-box.dark .yt-vt-ctx-q { color: #94a3b8; }
.yt-vt-box.dark { background: #0f172a; color: #e2e8f0; }
.yt-vt-box.dark .yt-mg-header { background: #0f172a; border-bottom-color: #1e293b; }
.yt-vt-box.dark .yt-vt-body { background: #0f172a; }
.yt-vt-box.dark .yt-vt-level-select { background: #0f172a; }
.yt-vt-box.dark .yt-vt-level-title { color: #e2e8f0; }
.yt-vt-box.dark .yt-vt-level-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.yt-vt-box.dark .yt-vt-level-btn:hover { border-color: #7c3aed; color: #c4b5fd; }
.yt-vt-box.dark .yt-vt-level-btn.active { background: #4c1d95; border-color: #7c3aed; color: #fff; }
.yt-vt-box.dark .yt-vt-qcard { border-color: #334155; }
.yt-vt-box.dark .yt-vt-word { color: #0f172a; }
.yt-vt-box.dark .yt-vt-ipa { color: #475569; }
.yt-vt-box.dark .yt-vt-prompt { color: #0f172a; }
.yt-vt-box.dark .yt-vt-type-pill { background: #334155; color: #94a3b8; }
.yt-vt-box.dark .yt-vt-opt { background: #1e293b; border-color: #334155; }
.yt-vt-box.dark .yt-vt-opt:hover:not(:disabled) { background: #1e1b4b; border-color: #6366f1; }
.yt-vt-box.dark .yt-vt-opt-val { color: #e2e8f0; }
.yt-vt-box.dark .yt-vt-opt-vi { color: #94a3b8; }
.yt-vt-box.dark .yt-vt-opt.correct { background: #14532d; border-color: #16a34a; }
.yt-vt-box.dark .yt-vt-opt.wrong { background: #450a0a; border-color: #dc2626; }
.yt-vt-box.dark .yt-vt-opt-ok { background: #14532d !important; border-color: #16a34a !important; }
.yt-vt-box.dark .yt-vt-opt-ok .yt-vt-opt-val { color: #4ade80; font-weight: 800; }
.yt-vt-box.dark .yt-vt-opt-ok .yt-vt-def-part { color: #4ade80; font-weight: 700; }
.yt-vt-box.dark .yt-vt-opt-wrong { background: #450a0a !important; border-color: #ef4444 !important; }
.yt-vt-box.dark .yt-vt-opt-wrong .yt-vt-opt-val { color: #f87171; font-weight: 800; }
.yt-vt-box.dark .yt-vt-opt-wrong .yt-vt-def-part { color: #f87171; font-weight: 700; }
.yt-vt-box.dark .yt-vt-sentence { background: #052e16; border-color: #166534; border-left-color: #16a34a; color: #bbf7d0; }
.yt-vt-box.dark .yt-vt-ms-list, .yt-vt-box.dark .yt-vt-ms-item { color: #e2e8f0; }
.yt-vt-box.dark .yt-vt-ms-hint { color: #fca5a5; }
.yt-vt-box.dark .yt-vt-spell-inp { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.yt-vt-box.dark .yt-vt-spell-inp::placeholder { color: #475569; }
.yt-vt-box.dark .yt-vt-inp-ok    { background: #052e16 !important; color: #4ade80 !important; }
.yt-vt-box.dark .yt-vt-inp-wrong { background: #450a0a !important; color: #fca5a5 !important; }
.rd-pt-ex { margin-top: 8px; font-size: .82rem; color: #374151; line-height: 1.6; font-style: italic; border-top: 1px solid rgba(0,0,0,.08); padding-top: 7px; }
.rd-pt-ex-hl { background: #fde047; color: #1e293b; border-radius: 3px; padding: 0 2px; font-style: normal; font-weight: 700; }
.rd-pt-ex-card { margin-top: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 13px; font-size: .82rem; color: #374151; line-height: 1.6; font-style: italic; }
.yt-vt-box.dark .rd-pt-ex { color: #94a3b8; border-top-color: rgba(255,255,255,.08); }
.yt-vt-box.dark .rd-pt-ex-hl { background: #ca8a04; color: #fff; }
.yt-vt-box.dark .rd-pt-ex-card { background: #1e293b; border-color: #334155; color: #94a3b8; }
.yt-vt-box.dark .yt-mg-progressbar { background: #1e293b; }
.yt-vt-box.dark .yt-vt-fb-ok { background: #14532d; color: #4ade80; border-color: #16a34a; }
.yt-vt-box.dark .yt-vt-fb-wrong { background: #450a0a; color: #f87171; border-color: #dc2626; }
.yt-vt-box.dark .yt-vt-hint-vi { background: #0c4a6e; color: #7dd3fc; }
.yt-vt-box.dark .yt-vt-restart-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.yt-vt-box.dark .yt-vt-restart-btn:hover { border-color: #f97316; color: #f97316; }
.yt-vt-box.dark .yt-vt-auto-btn { background: none; border-color: #334155; color: #94a3b8; }
.yt-vt-box.dark .yt-vt-auto-btn.active { background: #1e293b; border-color: #7c3aed; color: #c4b5fd; }
.yt-vt-box.dark .yt-vt-ms-footer { border-top-color: #1e293b; background: #0f172a; }
.yt-vt-box.dark .yt-vt-ms-title { color: #e2e8f0; }
.yt-vt-box.dark .yt-vt-ms-stat-num { color: #f1f5f9; }
.yt-vt-box.dark .yt-vt-ms-stat-lbl { color: #64748b; }
.yt-vt-box.dark .yt-vt-lvsel { background: #0f172a; }
.yt-vt-box.dark .yt-vt-lvsel-label { color: #475569; }
.yt-vt-box.dark .yt-vt-cnt-row { background: #1e293b; border-color: #334155; }
.yt-vt-box.dark .yt-vt-cnt-btn { color: #64748b; }
.yt-vt-box.dark .yt-vt-cnt-btn:hover { background: #334155; color: #e2e8f0; }
.yt-vt-box.dark .rpt-cnt-active { background: #4c1d95 !important; color: #fff !important; box-shadow: 0 1px 6px rgba(124,58,237,.4) !important; }
.yt-vt-type-btn.rpt-mode-active { border-color: #6366f1; background: #eef2ff; }
.yt-vt-type-btn.rpt-mode-active .yt-vt-type-label { color: #4338ca; }
.yt-vt-box.dark .yt-vt-type-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.yt-vt-box.dark .yt-vt-type-btn:hover:not(:disabled) { border-color: #6366f1; background: #1e1b4b; }
.yt-vt-box.dark .yt-vt-type-btn.rpt-mode-active { border-color: #6366f1; background: #1e1b4b; }
.yt-vt-box.dark .yt-vt-type-icon { filter: brightness(1.2); }
.yt-vt-box.dark .yt-vt-type-label { color: #e2e8f0; }
.yt-vt-box.dark .yt-vt-type-btn.rpt-mode-active .yt-vt-type-label { color: #a5b4fc; }
.yt-vt-box.dark .yt-vt-type-sub { color: #64748b; }
.yt-vt-box.dark .yt-vt-results { background: #0f172a; }
.yt-vt-box.dark .yt-vt-res-msg { color: #94a3b8; }
.yt-vt-box.dark .yt-vt-res-pct { opacity: .9; }
@media (min-width: 768px) {
  .yt-vt-type-pill { font-size: .76rem; }
  .yt-vt-sentence  { font-size: 1.08rem; }
  .yt-vt-word      { font-size: 2.5rem; }
  .yt-vt-prompt    { font-size: 1.35rem; }
  .yt-vt-ipa       { font-size: 1rem; }
  .yt-vt-opt-val   { font-size: .97rem; }
  .yt-vt-opt-ipa   { font-size: .79rem; }
  .yt-vt-opt-vi    { font-size: .79rem; }
  .yt-vt-hint-vi   { font-size: .85rem; }
}
.yt-mg-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px 10px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.yt-mg-title { font-weight: 800; font-size: .9rem; flex: 1; font-family: 'Nunito', sans-serif; }
@media (max-width: 767px) {
  .yt-mg-title { width: 100%; flex: none; order: -1; margin-bottom: 2px; }
}
.yt-mg-progress { font-size: .78rem; color: #7c3aed; font-weight: 700; font-family: 'Nunito', sans-serif; }
.yt-mg-attempts { font-size: .75rem; color: #9ca3af; font-family: 'Nunito', sans-serif; }
.yt-mg-mode-row { display: flex; gap: 8px; padding: 10px 16px 8px; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.yt-mg-mode-btn { flex: 1; padding: 7px 10px; border-radius: 10px; border: 2px solid #e5e7eb; background: #f9fafb; font-size: .78rem; font-weight: 700; color: #6b7280; cursor: pointer; font-family: inherit; transition: all .15s; }
.yt-mg-mode-btn.active { border-color: #7c3aed; background: #f5f3ff; color: #7c3aed; }
.yt-mg-mode-btn:hover:not(.active) { border-color: #c4b5fd; color: #7c3aed; }
.yt-mg-level-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.yt-mg-level-btn { padding: 3px 12px; border-radius: 20px; border: 1.5px solid #e5e7eb; background: transparent; color: #6b7280; font-size: .72rem; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .15s; }
.yt-mg-level-btn:hover { border-color: var(--lclr, #7c3aed); color: var(--lclr, #7c3aed); }
.yt-mg-level-btn.active { background: var(--lclr, #7c3aed); border-color: var(--lclr, #7c3aed); color: #fff; }
.yt-mg-progressbar { height: 5px; background: #f3f4f6; flex-shrink: 0; }
.yt-mg-progressbar-fill {
  height: 100%; background: linear-gradient(90deg, #7c3aed, #a855f7);
  transition: width .4s ease; width: 0%;
}
.yt-mg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 16px; overflow-y: auto; flex: 1; min-height: 0;
}
.yt-mg-card {
  aspect-ratio: 1; width: 100%; cursor: pointer; perspective: 600px;
  position: relative; background: #fff; border-radius: 14px;
  border: 2px solid #e9d5ff; box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.yt-mg-card-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform .35s ease;
}
.yt-mg-card.flipped .yt-mg-card-inner,
.yt-mg-card.matched .yt-mg-card-inner { transform: rotateY(180deg); }
.yt-mg-card-front, .yt-mg-card-back {
  position: absolute; inset: 4px; border-radius: 10px;
  backface-visibility: hidden; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 8px;
  font-family: 'Nunito', sans-serif;
}
.yt-mg-card-front {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: rgba(255,255,255,.35); font-size: 1.4rem; letter-spacing: 2px;
  flex-direction: column; gap: 4px;
}
.yt-mg-card-type-lbl {
  font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55); background: rgba(255,255,255,.15);
  border-radius: 999px; padding: 2px 8px; line-height: 1.4;
}
.yt-mg-card-back {
  background: #fff; color: #4c1d95;
  transform: rotateY(180deg); line-height: 1.35; word-break: break-word;
}
.yt-mg-card.word-card .yt-mg-card-back { font-size: .82rem; font-weight: 800; word-break: keep-all; overflow-wrap: normal; hyphens: none; }
.yt-mg-card.meaning-card .yt-mg-card-back { font-size: .68rem; font-weight: 600; color: #5b21b6; }
.yt-mg-card.matched .yt-mg-card-back {
  background: #f0fdf4; border-color: #86efac; color: #166534;
}
.yt-mg-card.wrong-flash .yt-mg-card-back { background: #fef2f2; border-color: #fca5a5; }
.yt-mg-footer {
  display: flex; gap: 10px; padding: 12px 16px;
  border-top: 1px solid #e5e7eb; flex-shrink: 0;
}
.yt-mg-btn {
  flex: 1; padding: 9px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .8rem;
  cursor: pointer; transition: opacity .2s;
}
.yt-mg-btn:hover { opacity: .88; }
.yt-mg-win {
  position: absolute; inset: 0; background: rgba(255,255,255,.97);
  border-radius: 20px; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; text-align: center; padding: 30px;
}
.yt-mg-win-icon { font-size: 3.5rem; }
.yt-mg-win-title { font-size: 1.4rem; font-weight: 900; color: #7c3aed; font-family: 'Nunito', sans-serif; }
.yt-mg-win-stats { font-size: .85rem; color: #6b7280; font-family: 'Nunito', sans-serif; }

/* ── Word Match Game ─────────────────────────────────────────────────────── */
/* Transcript Review Panel */
.yt-review-box { background: #fff; border-radius: 20px; width: min(620px,96vw); max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.yt-review-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: linear-gradient(135deg,#ea580c,#f97316); color: #fff; font-size: .92rem; font-weight: 800; flex-shrink: 0; }
.yt-review-hdr button { background: none; border: none; color: rgba(255,255,255,.8); font-size: 1.1rem; cursor: pointer; }
.yt-review-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.yt-review-row { border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 12px 14px; background: #fafafa; }
.yt-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.yt-review-name { font-weight: 800; font-size: .88rem; color: #1e293b; }
.yt-review-email { font-size: .75rem; color: #64748b; }
.yt-review-count { font-size: .75rem; background: #e0e7ff; color: #4338ca; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.yt-review-pending { font-size: .75rem; background: #fef3c7; color: #d97706; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.yt-review-approved { font-size: .75rem; background: #dcfce7; color: #15803d; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.yt-review-date { font-size: .72rem; color: #9ca3af; margin-left: auto; }
.yt-review-btns { display: flex; gap: 8px; }
.yt-review-load-btn { padding: 6px 14px; border-radius: 8px; border: 1.5px solid #6366f1; background: #eef2ff; color: #4338ca; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.yt-review-approve-btn { padding: 6px 14px; border-radius: 8px; border: none; background: #16a34a; color: #fff; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.yt-review-approve-btn:hover { background: #15803d; }
.yt-match-box {
  background: #fff; border-radius: 20px;
  width: min(680px, 96vw); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.22); position: relative;
}
.yt-match-body {
  position: relative;
  display: flex; gap: clamp(36px, 7vw, 76px); padding: 16px 20px;
  overflow-y: auto; flex: 1; min-height: 0;
}
/* Lớp vẽ đường nối giữa 2 cột */
.yt-match-lines {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 6; overflow: visible;
}
.yt-match-line { fill: none; stroke-width: 3.5; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
.yt-match-dot { stroke: #fff; stroke-width: 2.5; animation: ytMatchDotPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes ytMatchDotPop { 0% { r: 0; } 100% { r: 5.5px; } }
/* Combo badge */
.yt-match-combo {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%) scale(.5);
  z-index: 8; pointer-events: none; opacity: 0;
  padding: 5px 16px; border-radius: 999px; font-family: 'Nunito', sans-serif;
  font-size: .85rem; font-weight: 900; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 6px 18px rgba(239,68,68,.35);
}
.yt-match-combo.pop { animation: ytMatchCombo 1s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes ytMatchCombo {
  0% { opacity: 0; transform: translateX(-50%) scale(.4); }
  18% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  35% { transform: translateX(-50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.9); }
}
.yt-match-col { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.yt-match-item {
  position: relative; width: 100%; padding: 11px 15px; border-radius: 12px;
  border: 2px solid #e9e7f5; background: #fbfaff;
  color: #374151; font-size: .82rem; font-weight: 600;
  cursor: pointer; text-align: left; line-height: 1.35;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), border-color .14s, background .14s, box-shadow .14s, opacity .25s;
  font-family: 'Nunito', sans-serif; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
/* Chấm nối ở cạnh trong mỗi thẻ (gợi ý kéo nối) */
.yt-match-word::after,
.yt-match-meaning::before {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2.5px solid #cbd5e1; transition: border-color .15s, background .15s; z-index: 7;
}
.yt-match-word::after { right: -7px; }
.yt-match-meaning::before { left: -7px; }
.yt-match-item:hover:not(.matched):not(.wrong) { transform: translateY(-2px); border-color: #a78bfa; background: #f5f3ff; color: #5b21b6; box-shadow: 0 6px 16px rgba(124,58,237,.14); }
.yt-match-item.selected { border-color: #7c3aed; background: #ede9fe; color: #5b21b6; box-shadow: 0 0 0 4px rgba(124,58,237,.18); transform: scale(1.02); }
.yt-match-word.selected::after, .yt-match-meaning.selected::before { border-color: #7c3aed; background: #7c3aed; }
.yt-match-item.matched { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; cursor: default; opacity: .9; box-shadow: none; }
.yt-match-word.matched::after, .yt-match-meaning.matched::before { border-color: #16a34a; background: #16a34a; }
.yt-match-item.wrong { border-color: #ef4444; background: #fef2f2; color: #b91c1c; animation: ytMatchShake .42s; }
.yt-match-item.yt-match-snap { animation: ytMatchSnap .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes ytMatchSnap { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes ytMatchShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.yt-match-word { font-size: .87rem; font-weight: 800; }
.yt-match-meaning { font-size: .78rem; font-weight: 500; color: #4b5563; }

/* Desktop: always show extra row, hide toggle button */
@media (min-width: 601px) {
  .ctrl-extra-row { display: flex !important; border-top: none; padding-top: 0; }
  #ctrlExtraToggleBtn { display: none !important; }
}

/* ── DRAWING BOARD ── */
.source-card-wb { border-color: #059669; }
.source-card-wb:hover { background: #ecfdf5; border-color: #047857; }
.source-card-rz { border-color: #7c3aed; }
.source-card-rz:hover { background: #f5f3ff; border-color: #6d28d9; }
.source-card-rw { border-color: #16a34a; }
.source-card-rw:hover { background: #f0fdf4; border-color: #15803d; }
.source-card-sa { border-color: #0891b2; }
.source-card-sa:hover { background: #ecfeff; border-color: #0e7490; }
.source-card-vc { border-color: #7c3aed; }
.source-card-vc:hover { background: #faf5ff; border-color: #6d28d9; }
.source-card.src-premium-locked { position: relative; opacity: .55; filter: grayscale(25%); }
.source-card.src-premium-locked:hover { transform: none; box-shadow: var(--shadow-sm); border-color: #7c3aed; background: var(--surface); }
.src-premium-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-size: .65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  letter-spacing: .3px; pointer-events: none;
}
.source-card-sw { border-color: #ea580c; }
.source-card-sw:hover { background: #fff7ed; border-color: #c2410c; }
.source-card-pv { border-color: #d97706; }
.source-card-pv:hover { background: #fffbeb; border-color: #b45309; }
.source-card-co { border-color: #0891b2; }
.source-card-co:hover { background: #ecfeff; border-color: #0e7490; }
.source-card-im { border-color: #7c3aed; }
.source-card-im:hover { background: #f5f3ff; border-color: #6d28d9; }
.source-card-mcq { border-color: #0ea5e9; }
.source-card-mcq:hover { background: #f0f9ff; border-color: #0284c7; }
.source-card-yf { border-color: #dc2626; }
.source-card-yf:hover { background: #fff1f2; border-color: #b91c1c; }

/* ── YOUFIND OVERLAY ── */
.yf-overlay {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: #f8fafc; flex-direction: column;
}
.yf-overlay.active { display: flex; }
.yf-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: #fff;
  border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.yf-back-btn {
  padding: 6px 14px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #374151; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .14s;
}
.yf-back-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.yf-title {
  font-size: 1.1rem; font-weight: 800; color: #dc2626; flex: 1;
}
.yf-key-btn {
  padding: 5px 12px; border-radius: 8px; border: 1.5px solid #fca5a5;
  background: #fff1f2; color: #b91c1c; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .14s;
}
.yf-key-btn:hover { background: #fee2e2; }
.yf-body {
  flex: 1; display: flex; flex-direction: row; overflow: hidden;
  padding: 16px; gap: 14px; width: 100%;
  box-sizing: border-box;
}
.yf-body-left {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  overflow: hidden; min-width: 0;
}
.yf-search-row {
  display: flex; gap: 10px; flex-shrink: 0;
}
.yf-search-inp {
  flex: 1; padding: 10px 16px; border-radius: 10px;
  border: 2px solid #e2e8f0; font-size: 1rem; font-family: inherit;
  outline: none; transition: border-color .15s;
}
.yf-search-inp:focus { border-color: #dc2626; }
.yf-search-btn {
  padding: 10px 20px; border-radius: 10px; border: none;
  background: #dc2626; color: #fff; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: background .14s; white-space: nowrap;
}
.yf-search-btn:hover { background: #b91c1c; }
.yf-hint {
  font-size: .82rem; color: #94a3b8; text-align: center;
  padding: 4px 0; flex-shrink: 0;
}
.yf-player-section {
  display: flex; gap: 14px; align-items: flex-start; flex-shrink: 0;
}
.yf-player-frame-wrap {
  flex-shrink: 0; width: 480px; border-radius: 10px; overflow: hidden;
  background: #000; box-shadow: 0 4px 20px rgba(0,0,0,.18); position: relative;
}
.yf-seek-overlay {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20; opacity: 0; transition: opacity .2s;
  background: rgba(0,0,0,.45); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 4px; padding: 10px 14px;
  font-size: 14px; font-weight: 700; pointer-events: auto;
}
.yf-seek-overlay-back { left: 0; border-radius: 0 10px 10px 0; }
.yf-seek-overlay-fwd  { right: 0; border-radius: 10px 0 0 10px; }
.yf-player-frame-wrap:hover .yf-seek-overlay { opacity: 1; }
.yf-seek-overlay:hover { background: rgba(0,0,0,.65); }
.yf-seek-overlay:active { background: rgba(0,0,0,.8); }
.yf-player-iframe { width: 100%; aspect-ratio: 16/9; display: block; border: none; }
#yfPlayer { width: 100%; aspect-ratio: 16/9; }
#yfPlayer iframe { width: 100%; height: 100%; display: block; border: none; }
.yf-transcript-wrap {
  flex: 1; display: flex; flex-direction: column; min-width: 0; align-self: stretch;
}
.yf-tr-controls {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; background: #f8fafc;
  border: 1.5px solid #e2e8f0; border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.yf-tr-btn {
  padding: 3px 10px; border-radius: 6px; border: 1.5px solid #e2e8f0;
  background: #fff; color: #374151; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .12s; line-height: 1.4;
}
.yf-tr-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.yf-tr-btn-repeat { background: #dc2626; color: #fff; border-color: #dc2626; border-radius: 8px 0 0 8px; }
.yf-tr-btn-repeat:hover { background: #b91c1c; border-color: #b91c1c; }
.yf-repeat-sel { border-radius: 0 8px 8px 0 !important; border-left: none !important; min-width: 46px; font-weight: 700; }
.yf-tr-btn-nav { background: #1e293b; color: #fff; border-color: #1e293b; }
.yf-tr-btn-star { font-size: 1.05rem; line-height: 1; color: #d97706; }
.yf-tr-btn-star:hover { background: #fffbeb; border-color: #fbbf24; }
.yf-tr-btn-star.yf-star-on { background: #fef3c7; border-color: #f59e0b; color: #b45309; }
.yf-tr-btn-saved { background: #fffbeb; color: #b45309; border-color: #fcd34d; font-weight: 700; }
.yf-tr-btn-saved:hover { background: #fef3c7; }

/* YouFind saved sentences modal */
.yf-saved-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.yf-saved-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 640px;
  max-height: 84vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.yf-saved-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; font-size: 1.05rem; font-weight: 800; color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}
.yf-saved-close { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: #64748b; padding: 4px 8px; border-radius: 6px; }
.yf-saved-close:hover { background: #f1f5f9; }
.yf-saved-list { overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.yf-saved-empty { text-align: center; color: #94a3b8; padding: 30px 0; }
.yf-saved-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px;
}
.yf-saved-item-body { flex: 1; min-width: 0; }
.yf-saved-item-text { font-size: .95rem; color: #1e293b; line-height: 1.5; }
.yf-saved-item-vi { font-size: .84rem; color: #64748b; font-style: italic; margin-top: 3px; }
.yf-saved-item-meta { font-size: .74rem; color: #94a3b8; margin-top: 5px; }
.yf-saved-item-btns { display: flex; gap: 6px; flex-shrink: 0; }
.yf-saved-play, .yf-saved-del {
  border: 1.5px solid; background: #fff; cursor: pointer; border-radius: 8px;
  width: 36px; height: 36px; font-size: .9rem;
}
.yf-saved-play { border-color: #dc2626; color: #dc2626; }
.yf-saved-play:hover { background: #fef2f2; }
.yf-saved-del { border-color: #e2e8f0; color: #64748b; }
.yf-saved-del:hover { background: #f1f5f9; }
.yf-tr-btn-nav:hover { background: #0f172a; border-color: #0f172a; }
.yf-tr-divider { width: 1px; height: 18px; background: #e2e8f0; flex-shrink: 0; }
.yf-tr-sel {
  padding: 3px 6px; border-radius: 6px; border: 1.5px solid #e2e8f0;
  font-size: .8rem; background: #fff; color: #374151; cursor: pointer; outline: none;
}
.yf-tr-color-lbl {
  display: flex; align-items: center; gap: 4px;
  font-size: .75rem; color: #64748b; cursor: pointer;
}
.yf-tr-color-lbl input[type="color"] {
  width: 26px; height: 22px; border: 1.5px solid #e2e8f0; border-radius: 4px;
  padding: 1px 2px; cursor: pointer; background: none;
}
.yf-boxes-wrap {
  border: 1.5px solid #e2e8f0; border-top: none;
  border-radius: 0 0 10px 10px; overflow: hidden;
}
.yf-transcript-box {
  flex: 1; background: #F9F5E6;
  padding: 16px 18px; font-size: .95rem; line-height: 1.75; color: #1e293b;
  min-height: 80px;
}
.yf-transcript-box:has(.yf-word--ipa) { line-height: 2.4; }
.yf-ipa-mode-wrap { display: inline-flex; gap: 3px; align-items: center; }
.yf-ipa-mode-btn {
  font-size: .65rem; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  border: 1.5px solid #94a3b8; background: transparent; color: #64748b;
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.yf-ipa-mode-btn.active { background: var(--accent2, #0891b2); border-color: var(--accent2, #0891b2); color: #fff; }
.yf-ipa-box {
  background: #f0f9ff; border-top: 1px solid #bae6fd;
  padding: 8px 18px; font-size: calc(var(--yf-box-fs, .95rem) * 0.65); line-height: 1.6;
  color: #0369a1; font-family: 'Courier New', monospace; letter-spacing: .03em;
}
.yf-trans-box {
  background: #f0fdf4; border-top: 1px solid #d1fae5;
  padding: 10px 18px; font-size: calc(var(--yf-box-fs, .95rem) * 0.65); line-height: 1.65;
  color: #166534; font-style: italic;
}
.yf-trans-sw {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
}
.yf-trans-sw input { display: none; }
.yf-trans-sw-track {
  width: 32px; height: 18px; border-radius: 999px; background: #cbd5e1;
  position: relative; flex-shrink: 0; transition: background .2s;
}
.yf-trans-sw-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.yf-trans-sw input:checked + .yf-trans-sw-track { background: #16a34a; }
.yf-trans-sw input:checked + .yf-trans-sw-track::after { transform: translateX(14px); }
.yf-trans-sw-label { font-size: .72rem; font-weight: 700; color: #475569; white-space: nowrap; }
.yf-mark-red { display: inline; background: none; color: #dc2626; font-weight: 800; vertical-align: top; }
.yf-word { cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color .1s; }
.yf-word:hover { border-bottom-color: #94a3b8; }
/* YouFind per-word IPA mode */
.yf-word--ipa {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: top;
  line-height: 1.3;
  margin: 0 1px;
  border-bottom: none;
}
.yf-word--ipa:hover .yf-word-txt { border-bottom: 1px dashed #94a3b8; }
.yf-word-txt { line-height: inherit; }
.yf-word-ipa {
  font-size: .65em;
  color: var(--accent2, #0891b2);
  line-height: 1;
  white-space: nowrap;
  min-height: .7em;
}
/* Push card text down slightly when IPA is shown so lines don't crowd */
.yf-card-text:has(.yf-word--ipa) { line-height: 2.2; }
/* Dictionary resizer */
.yf-dict-resizer {
  width: 6px; flex-shrink: 0; cursor: col-resize; border-radius: 3px;
  background: transparent; transition: background .15s;
  position: relative;
}
.yf-dict-resizer::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 40px; border-radius: 3px;
  background: #cbd5e1;
}
.yf-dict-resizer:hover::after, .yf-dict-resizer:active::after { background: #dc2626; }
/* Dictionary panel */
.yf-dict-panel {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; border: 1.5px solid #e2e8f0;
  overflow: hidden;
}
.yf-dict-header {
  padding: 10px 14px; font-size: .82rem; font-weight: 800; color: #374151;
  background: #f8fafc; border-bottom: 1.5px solid #e2e8f0; flex-shrink: 0;
}
.yf-dict-content {
  flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.yf-dict-empty { font-size: .8rem; color: #94a3b8; line-height: 1.6; }
.yf-dict-loading { font-size: .85rem; color: #64748b; }
.yf-dict-notfound { font-size: .82rem; color: #94a3b8; }
.yf-dict-word { font-size: 1.2rem; font-weight: 800; color: #1e293b; }
.yf-dict-vi {
  font-size: .95rem; font-weight: 700; color: #dc2626;
  background: #fff1f2; border-radius: 6px; padding: 5px 10px;
  border-left: 3px solid #dc2626; margin: 2px 0 4px;
}
.yf-dict-phonetic { font-size: .82rem; color: #64748b; margin-top: -2px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.yf-dict-speak-ph {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #e2e8f0; background: #f8fafc; color: #374151;
  font-size: .72rem; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s; flex-shrink: 0;
}
.yf-dict-speak-ph:hover { background: #dbeafe; border-color: #3b82f6; }
.yf-dict-ph-lbl { font-size: .68rem; font-weight: 700; color: #fff; background: #64748b; border-radius: 3px; padding: 0 4px; }
.yf-dict-ph-val { font-style: italic; color: #475569; }
.yf-dict-pos {
  font-size: .72rem; font-weight: 700; color: #fff; background: #dc2626;
  border-radius: 4px; padding: 1px 7px; display: inline-block; margin-top: 6px;
}
.yf-dict-def { font-size: .83rem; color: #1e293b; line-height: 1.55; }
.yf-dict-num { font-weight: 700; color: #64748b; }
.yf-dict-ex { font-size: .78rem; color: #64748b; font-style: italic; padding-left: 10px; border-left: 2px solid #e2e8f0; margin-top: 2px; }
/* Examples section */
.yf-dict-ex-section { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.yf-dict-ex-title { font-size: .75rem; font-weight: 700; color: #64748b; }
.yf-dict-ex-root { font-weight: 400; font-style: italic; }
.yf-dict-ex-item { display: flex; align-items: flex-start; gap: 6px; font-size: .82rem; color: #374151; line-height: 1.5; }
.yf-dict-speak-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid #e2e8f0; background: #f8fafc; color: #374151;
  font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.yf-dict-speak-btn:hover { background: #fee2e2; border-color: #dc2626; }
/* Save word button */
.yf-dict-save-btn {
  width: 100%; padding: 10px; border-radius: 10px; border: none;
  background: #ea580c; color: #fff; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: background .14s; margin-top: 10px;
}
.yf-dict-save-btn:hover { background: #c2410c; }
.yf-dict-save-btn:disabled { background: #16a34a; cursor: default; }
/* External links */
/* YouFind dict: Vocab by Level extra block */
.yf-vl-extra { margin-top: 12px; padding-top: 10px; border-top: 2px dashed #ddd6fe; }
.yf-vl-extra-head { font-size: .78rem; font-weight: 800; color: #6d28d9; margin-bottom: 8px; }
.yf-vl-row { font-size: .85rem; color: #334155; line-height: 1.5; margin-bottom: 4px; }
.yf-vl-lbl {
  display: inline-block; font-size: .64rem; font-weight: 800; color: #6d28d9;
  background: #f5f3ff; border-radius: 5px; padding: 1px 6px; margin-right: 4px; vertical-align: middle;
}
.yf-vl-sec { margin-top: 10px; }
.yf-vl-sec-t { font-size: .74rem; font-weight: 800; color: #475569; margin-bottom: 5px; }
.yf-vl-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.yf-vl-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  font-size: .8rem; font-weight: 700; border: 1px solid;
}
.yf-vl-chip-vi { font-weight: 400; font-size: .74rem; opacity: .85; }
.yf-vl-chip-syn { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.yf-vl-chip-ant { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.yf-vl-chip-wf  { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.yf-vl-colloc { display: flex; flex-wrap: wrap; gap: 5px; }
.yf-vl-ex { display: flex; gap: 6px; align-items: flex-start; font-size: .84rem; color: #334155; line-height: 1.5; margin-bottom: 5px; }
.yf-vl-ex-sp { border: none; background: none; cursor: pointer; font-size: .85rem; padding: 0; flex-shrink: 0; }
.yf-vl-ex-vi { font-size: .78rem; color: #64748b; font-style: italic; margin-top: 2px; }
.yf-dict-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .75rem; color: #64748b; }
.yf-dict-link {
  color: #374151; font-size: .75rem; font-weight: 700; text-decoration: none;
  border: 1.5px solid #e2e8f0; border-radius: 6px; padding: 2px 8px;
  transition: all .12s;
}
.yf-dict-link:hover { border-color: #dc2626; color: #dc2626; }
/* Context sentence */
.yf-dict-ctx-section { margin-top: 10px; padding-top: 10px; border-top: 1.5px solid #f1f5f9; }
.yf-dict-ctx-title { font-size: .72rem; font-weight: 700; color: #94a3b8; margin-bottom: 4px; }
.yf-dict-ctx-text { font-size: .82rem; color: #64748b; font-style: italic; line-height: 1.6; }
.yf-mark-ctx { display: inline; background: #fef08a; color: #1e293b; font-weight: 700; border-radius: 2px; padding: 0 1px; }
@media (max-width: 620px) {
  .yf-player-section { flex-direction: column; }
  .yf-player-frame-wrap { width: 100%; }
}
.yf-results-wrap {
  flex: 1; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.yf-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border-radius: 10px; border: 1.5px solid #e2e8f0;
  padding: 10px; cursor: pointer; transition: all .15s;
}
.yf-card:hover { border-color: #dc2626; box-shadow: 0 3px 14px rgba(220,38,38,.12); }
.yf-card-thumb {
  width: 120px; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 6px; flex-shrink: 0; background: #e2e8f0;
}
.yf-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.yf-card-title { font-size: .75rem; font-weight: 700; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yf-card-text { font-size: .88rem; color: #1e293b; line-height: 1.5; }
.yf-card-time { font-size: .75rem; color: #dc2626; font-weight: 700; }
.yf-mark { background: #fef08a; color: #1e293b; border-radius: 3px; padding: 0 2px; }
/* Player */
.yf-player-wrap {
  flex-shrink: 0; background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.yf-player-head {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 14px; background: #1e293b;
}
.yf-player-title {
  color: #e2e8f0; font-size: .82rem; font-weight: 600; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yf-player-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.yf-shadow-btn {
  padding: 4px 12px; border-radius: 6px; border: none;
  background: #dc2626; color: #fff; font-size: .75rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .14s;
}
.yf-shadow-btn:hover { background: #b91c1c; }
.yf-player-close {
  background: transparent; border: none; color: #94a3b8;
  font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 2px 6px;
}
.yf-player-close:hover { color: #fff; }
.yf-player-iframe {
  width: 100%; aspect-ratio: 16/9; display: block; border: none;
}
/* Results grid */
.yf-results {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
  align-content: start;
}
.yf-result-card {
  background: #fff; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 1.5px solid #e2e8f0; transition: all .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.yf-result-card:hover { border-color: #dc2626; box-shadow: 0 4px 16px rgba(220,38,38,.15); transform: translateY(-2px); }
.yf-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #0f172a; }
.yf-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yf-play-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.3); color: #fff; font-size: 2rem; opacity: 0; transition: opacity .15s;
}
.yf-result-card:hover .yf-play-icon { opacity: 1; }
.yf-result-info { padding: 8px 10px; }
.yf-result-title {
  font-size: .78rem; font-weight: 700; color: #1e293b; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yf-result-ch { font-size: .7rem; color: #64748b; margin-top: 3px; }
/* States */
.yf-empty-state { color: #94a3b8; font-size: .9rem; text-align: center; padding: 40px 0; grid-column: 1/-1; }
.yf-loading { color: #64748b; font-size: .9rem; text-align: center; padding: 40px 0; grid-column: 1/-1; }
.yf-error { color: #dc2626; font-size: .85rem; text-align: center; padding: 30px 0; grid-column: 1/-1; }
/* API Key modal */
.yf-key-modal {
  position: absolute; inset: 0; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 10; border-radius: 0;
}
.yf-key-box {
  background: #fff; border-radius: 16px; padding: 28px 32px;
  width: 90%; max-width: 460px; box-shadow: 0 8px 40px rgba(0,0,0,.2);
  display: flex; flex-direction: column; gap: 14px;
}
.yf-key-title { font-size: 1rem; font-weight: 800; color: #1e293b; }
.yf-key-desc { font-size: .83rem; color: #475569; line-height: 1.5; }
.yf-key-desc a { color: #dc2626; font-weight: 700; }
.yf-key-inp {
  padding: 9px 14px; border-radius: 8px; border: 2px solid #e2e8f0;
  font-size: .9rem; font-family: monospace; outline: none; transition: border-color .15s;
}
.yf-key-inp:focus { border-color: #dc2626; }
.yf-key-actions { display: flex; gap: 10px; }
.yf-key-save-btn {
  padding: 8px 22px; border-radius: 8px; border: none;
  background: #dc2626; color: #fff; font-weight: 700; cursor: pointer;
  font-size: .88rem; transition: background .14s;
}
.yf-key-save-btn:hover { background: #b91c1c; }
.yf-key-cancel-btn {
  padding: 8px 18px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #64748b; font-weight: 600; cursor: pointer; font-size: .88rem;
}

/* ── ROOT WORDS OVERLAY ── */
.rw-overlay {
  display: none; position: fixed; inset: 0;
  background: #f9fafb; z-index: 9998; flex-direction: column;
}
.rw-overlay.active { display: flex; }

/* Root Words: chọn chế độ Tra / Bài tập word forms (2 khung trên thanh công cụ) */
.rw-mode-seg { display: inline-flex; gap: 4px; }
.rw-mode-btn { border: none; background: #16a34a; padding: 7px 14px; border-radius: 9px; font-weight: 700; font-size: .85rem; color: #fff; cursor: pointer; font-family: inherit; white-space: nowrap; }
.rw-mode-btn:hover { background: #15803d; }

/* Word Form exercises overlay (mở từ Root Words, layer trên) */
.wf-overlay { display: none; position: fixed; inset: 0; background: #f9fafb; z-index: 9999; flex-direction: column; overflow: auto; }
.wf-overlay.active { display: flex; }
.wf-header { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #e2e8f0; background: #fff; position: sticky; top: 0; z-index: 2; }
.wf-title { font-size: 1.15rem; font-weight: 800; color: #16a34a; }
.wf-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wf-expl-wrap { display: inline-flex; align-items: center; gap: 5px; font-size: .95rem; color: #475569; }
.wf-expl-sel { border: 1px solid #e2e8f0; border-radius: 9px; padding: 6px 10px; font-family: inherit; font-size: .82rem; font-weight: 700; color: #334155; background: #fff; cursor: pointer; }
.wf-speak-toggle { border: 1px solid #bbf7d0; background: #f0fdf4; color: #15803d; border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: .82rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
.wf-speak-toggle.wf-speak-off { border-color: #e2e8f0; background: #f8fafc; color: #94a3b8; }
.wf-speak-toggle:hover { filter: brightness(.97); }
.wf-body { width: 100%; }
.wf-q-sentence { font-size: 1.12rem; line-height: 2; color: #1e293b; }
.wf-blank-inp { display: inline-block; min-width: 130px; padding: 3px 10px; border: none; border-bottom: 2.5px solid #16a34a; background: #f0fdf4; font-size: 1.02rem; font-weight: 700; color: #15803d; font-family: inherit; text-align: center; }
.wf-blank-inp:focus { outline: none; background: #dcfce7; }
.wf-hint-chip { display: inline-block; background: #fef9c3; color: #854d0e; border-radius: 6px; padding: 1px 8px; font-size: .8rem; font-weight: 800; letter-spacing: .03em; }
.wf-expl { border-radius: 12px; padding: 12px 14px; font-size: .92rem; line-height: 1.6; }
.wf-expl-en { color: #334155; margin-top: 8px; }
.wf-expl-vi { color: #15803d; margin-top: 6px; }
.wf-correct-ans { font-weight: 800; color: #15803d; }

/* ── Word form exercises — màn làm bài (thiết kế mới) ───────────────────────── */
.wf2-quiz { width: 100%; }
.wf2-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #eef2f7; }
.wf2-top-left { display: flex; align-items: center; gap: 14px; font-size: .95rem; flex-wrap: wrap; }
.wf2-tb-q { color: #334155; font-weight: 600; } .wf2-tb-q b { color: #7c3aed; }
.wf2-tb-div { width: 1px; height: 18px; background: #e2e8f0; }
.wf2-tb-ok { color: #16a34a; font-weight: 700; }
.wf2-exit { border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 7px 14px; font-weight: 600; color: #475569; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.wf2-exit:hover { background: #f8fafc; }
.wf2-steps { display: flex; align-items: center; gap: 0; margin: 18px 0 6px; }
.wf2-step { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 800; background: #e2e8f0; color: #94a3b8; transition: all .2s; }
.wf2-step:empty { width: 11px; height: 11px; }
.wf2-step.done { background: #c4b5fd; color: #fff; }
.wf2-step.done:empty { background: #c4b5fd; }
.wf2-step.cur { background: #7c3aed; color: #fff; box-shadow: 0 0 0 4px #ede9fe; }
.wf2-line { flex: 1 1 auto; height: 3px; background: #e9edf2; border-radius: 2px; }
.wf2-line.done { background: #a78bfa; }
.wf2-unit { display: block; width: -moz-max-content; width: max-content; margin: 18px auto 4px; background: #ede9fe; color: #7c3aed; font-weight: 800; font-size: .82rem; padding: 5px 16px; border-radius: 999px; }
.wf2-head { text-align: center; font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 10px 0 22px; line-height: 1.4; }
.wf2-card { border: 1px solid #e8edf3; border-radius: 16px; padding: 22px 24px; }
.wf2-sentence { font-size: 1.18rem; line-height: 2.3; color: #1e293b; }
.wf2-input { display: inline-block; min-width: 200px; padding: 7px 14px; border: none; border-bottom: 2.5px solid #16a34a; background: #ecfdf5; border-radius: 8px 8px 0 0; font-size: 1.04rem; color: #15803d; font-weight: 600; font-family: inherit; vertical-align: middle; }
.wf2-input::placeholder { color: #9ca3af; font-weight: 400; }
.wf2-input:focus { outline: none; background: #d1fae5; }
.wf2-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; background: #fef3c7; color: #b45309; font-weight: 800; font-size: .85rem; letter-spacing: .04em; padding: 7px 13px; border-radius: 10px; }
.wf2-answer-hl { display: inline-block; font-weight: 800; color: #15803d; background: #dcfce7; border-bottom: 2.5px solid #16a34a; border-radius: 7px; padding: 1px 10px; }
.wf2-trans { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
.wf2-check { width: 100%; margin-top: 20px; padding: 15px; border: none; border-radius: 14px; background: #16a34a; color: #fff; font-size: 1.08rem; font-weight: 800; cursor: pointer; font-family: inherit; box-shadow: 0 6px 16px rgba(22,163,74,.22); transition: background .15s; }
.wf2-check:hover { background: #15803d; }
.wf2-tip { margin-top: 18px; background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 14px; padding: 15px 18px; color: #3f6212; font-size: .94rem; line-height: 1.6; }
.wf2-tip-ico { margin-right: 2px; }
.wf2-tip-btn { background: none; border: none; color: #15803d; font-weight: 800; cursor: pointer; font-family: inherit; font-size: .95rem; padding: 0; }
.wf2-tip-btn:hover { text-decoration: underline; }
.wf2-tip-vi { margin-top: 8px; color: #166534; font-style: italic; }
.wf2-fb { margin-top: 18px; border-radius: 14px; padding: 16px 18px; font-size: .95rem; line-height: 1.6; }
.wf2-fb-ok { background: #f0fdf4; border: 1px solid #bbf7d0; }
.wf2-fb-ng { background: #fef2f2; border: 1px solid #fecaca; }
.wf2-fb-head { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.wf2-fb-row { margin-top: 8px; color: #334155; }
.wf2-fb-vi { color: #15803d; }
.wf2-next { margin-top: 16px; }
.wf2-kbhint { text-align: center; margin-top: 10px; color: #94a3b8; font-size: .82rem; }
.wf2-kbhint kbd { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 5px; padding: 1px 6px; font-family: inherit; font-size: .78rem; }
.rw-snow-layer {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.rw-snow-flake {
  position: absolute; top: -2em;
  color: rgba(255,255,255,0.85);
  user-select: none;
  animation: rwSnowFall linear infinite;
}
@keyframes rwSnowFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: .7; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
.rw-gpt-btn { font-size: .78rem !important; padding: 5px 11px !important; }
.rw-nolevel-btn {
  padding: 3px 10px; border-radius: 8px; font-size: .85rem; font-weight: 800;
  border: 1.5px solid #9ca3af; background: #f3f4f6; color: #6b7280;
  cursor: pointer; transition: all .14s;
}
.rw-nolevel-btn:hover { background: #e5e7eb; border-color: #6b7280; color: #111; }
/* Nhóm đã đánh dấu sao trên thanh công cụ */
.rw-star-wrap { position: relative; display: inline-block; }
.rw-star-toolbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 8px; font-size: .85rem; font-weight: 800;
  border: 1.5px solid #f59e0b; background: #fffbeb; color: #b45309;
  cursor: pointer; transition: all .14s; white-space: nowrap; font-family: inherit;
}
.rw-star-toolbtn:hover { background: #fef3c7; border-color: #d97706; }
.rw-star-count { background: #f59e0b; color: #fff; font-size: .72rem; font-weight: 900; border-radius: 999px; padding: 1px 7px; }
.rw-star-menu {
  position: fixed; z-index: 100000;
  min-width: 240px; max-width: 320px; max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,.22); padding: 8px;
}
.rw-star-menu-hd { font-size: .78rem; font-weight: 800; color: #b45309; padding: 6px 8px 8px; }
.rw-star-menu-empty { font-size: .85rem; color: #94a3b8; padding: 14px 10px; line-height: 1.5; text-align: center; }
.rw-star-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 11px; border: none; background: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; text-align: left; transition: background .12s;
}
.rw-star-menu-item:hover { background: #fff7ed; }
.rw-star-menu-root { font-size: .95rem; font-weight: 700; color: #1e293b; }
.rw-star-menu-cnt { font-size: .78rem; color: #94a3b8; flex: none; }
.rw-star-menu-test {
  width: 100%; margin-top: 6px; padding: 10px; border: none; border-radius: 10px;
  background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; font-size: .88rem; font-weight: 800;
  cursor: pointer; font-family: inherit;
}
.rw-star-menu-test:hover { opacity: .93; }
/* Chọn kiểu test cho nhóm đã lưu (4 options) */
.rw-starchoose { max-width: 560px; margin: 30px auto; background: rgba(255,255,255,.96); border-radius: 18px; padding: 26px 24px; box-shadow: 0 12px 38px rgba(15,23,42,.18); text-align: center; }
.rw-starchoose-hd { font-size: 1.3rem; font-weight: 900; color: #b45309; }
.rw-starchoose-sub { font-size: .92rem; color: #64748b; margin: 4px 0 18px; }
.rw-starchoose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rw-starchoose-btn { display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px 18px; border-radius: 14px; border: 2px solid #e2e8f0; background: #fff; cursor: pointer; font-family: inherit; transition: transform .1s, box-shadow .14s, border-color .14s; }
.rw-starchoose-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.14); }
.rw-sc-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; }
.rw-sc-tx { display: flex; flex-direction: column; min-width: 0; }
.rw-sc-tx b { font-size: 1.02rem; color: #1e293b; }
.rw-sc-tx small { font-size: .8rem; color: #94a3b8; margin-top: 2px; }
.rw-sc-multi .rw-sc-ic   { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.rw-sc-fill .rw-sc-ic    { background: linear-gradient(135deg,#60a5fa,#2563eb); }
.rw-sc-meaning .rw-sc-ic { background: linear-gradient(135deg,#34d399,#059669); }
.rw-sc-mixed .rw-sc-ic   { background: linear-gradient(135deg,#fb923c,#ea580c); }
.rw-sc-wordform .rw-sc-ic { background: linear-gradient(135deg,#2dd4bf,#0d9488); }
.rw-sc-multi:hover { border-color: #a78bfa; } .rw-sc-fill:hover { border-color: #60a5fa; }
.rw-sc-meaning:hover { border-color: #34d399; } .rw-sc-mixed:hover { border-color: #fb923c; }
.rw-sc-wordform:hover { border-color: #2dd4bf; }
@media (max-width: 560px) { .rw-starchoose-grid { grid-template-columns: 1fr; } }
.rw-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,.06); flex-shrink: 0; position: relative; z-index: 1;
}
.rw-bg-controls {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: auto;
}
.rw-color-picker {
  width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid #d1d5db;
  padding: 1px; cursor: pointer; background: none;
}
.rw-bg-chip {
  padding: 3px 9px; border-radius: 6px; border: 1.5px solid #d1d5db;
  background: rgba(255,255,255,.7); color: #374151; font-size: .78rem;
  cursor: pointer; transition: all .13s;
}
.rw-bg-chip:hover { border-color: #6366f1; color: #6366f1; }
.rw-bg-chip.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.rw-snow-btn {
  padding: 3px 10px; border-radius: 6px; border: 1.5px solid #93c5fd;
  background: rgba(255,255,255,.7); color: #1d4ed8; font-size: .78rem;
  cursor: pointer; transition: all .13s;
}
.rw-snow-btn:hover { background: #dbeafe; }
.rw-snow-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.rw-leaf-btn { border-color: #86efac; color: #15803d; }
.rw-leaf-btn:hover { background: #dcfce7; }
.rw-leaf-btn.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.rw-petal-btn { border-color: #fbb6ce; color: #9d174d; }
.rw-petal-btn:hover { background: #fce7f3; }
.rw-petal-btn.active { background: #ec4899; border-color: #ec4899; color: #fff; }
.rw-leaf-layer {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.rw-petal-layer {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.rw-petal-branch {
  position: absolute; bottom: -8px; left: -8px;
  width: clamp(180px, 32vw, 300px); height: auto;
  opacity: .28; pointer-events: none;
}
@keyframes rw-leaf-fall {
  0%   { transform: translateY(-60px) translateX(0) rotate(0deg); opacity: 1; }
  25%  { transform: translateY(25vh) translateX(var(--sway, 40px)) rotate(90deg); }
  50%  { transform: translateY(50vh) translateX(0) rotate(200deg); }
  75%  { transform: translateY(75vh) translateX(calc(var(--sway, 40px) * -1)) rotate(290deg); }
  100% { transform: translateY(110vh) translateX(0) rotate(360deg); opacity: 0.4; }
}
.rw-leaf {
  position: absolute; top: -40px; user-select: none;
  animation: rw-leaf-fall linear infinite;
}
@keyframes rw-petal-fall {
  0%   { transform: translateY(-60px) translateX(0) rotate(0deg); opacity: 0; }
  5%   { opacity: .9; }
  25%  { transform: translateY(24vh)  translateX(var(--px,35px)) rotate(88deg); }
  50%  { transform: translateY(50vh)  translateX(0) rotate(185deg); }
  75%  { transform: translateY(75vh)  translateX(calc(var(--px,35px)*-1)) rotate(272deg); }
  90%  { opacity: .8; }
  100% { transform: translateY(112vh) translateX(0) rotate(360deg); opacity: 0; }
}
.rw-petal {
  position: absolute; top: -30px; user-select: none;
  box-shadow: 0 1px 5px rgba(255,100,150,.14);
  animation: rw-petal-fall linear infinite;
}
.main-petal-layer {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.main-petal-branch-bl {
  position: absolute; bottom: -16px; left: -16px;
  width: clamp(280px, 48vw, 480px); height: auto;
  opacity: .72; pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(160,40,80,.22));
}
.main-petal-branch-tr {
  position: absolute; top: -16px; right: -16px;
  width: clamp(240px, 40vw, 400px); height: auto;
  opacity: .62; pointer-events: none;
  transform: scale(-1, -1);
  filter: drop-shadow(0 6px 14px rgba(160,40,80,.18));
}
.main-petal {
  position: absolute; top: -30px; user-select: none; pointer-events: none;
  box-shadow: 0 1px 5px rgba(255,100,150,.14);
  animation: rw-petal-fall linear infinite;
}

/* ── Dark background overrides ── */
.rw-dark-bg .rw-result-root { color: #fcd34d; }
.rw-dark-bg .rw-result-count { color: #d1d5db; }
.rw-dark-bg .rw-custom-badge { background: rgba(255,255,255,.15); color: #fde68a; }
.rw-dark-bg .rw-dict-badge   { background: rgba(255,255,255,.15); color: #c4b5fd; }
.rw-dark-bg .rw-edit-group-btn { background: rgba(255,255,255,.12); color: #e5e7eb; border-color: rgba(255,255,255,.25); }
.rw-dark-bg .rw-disp-label { color: #9ca3af; }
.rw-dark-bg .rw-disp-val   { color: #a5b4fc; }
.rw-dark-bg .rw-disp-btn   { background: rgba(255,255,255,.1); color: #e5e7eb; border-color: rgba(255,255,255,.2); }
.rw-dark-bg .rw-disp-sel   { background: rgba(255,255,255,.1); color: #e5e7eb; border-color: rgba(255,255,255,.2); }
.rw-dark-bg .rw-expand-all-btn { border-color: #818cf8; color: #a5b4fc; background: rgba(255,255,255,.08); }
.rw-dark-bg .rw-expand-all-btn.active { background: #6366f1; color: #fff; }
.rw-dark-bg .rw-node-hit { background: #fde8c8 !important; border-color: #f97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,.25); }
.rw-dark-bg .rw-branch-block { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.rw-dark-bg .rw-multi-header { background: rgba(249,115,22,.15); border-color: #f59e0b; color: #fde68a; }
.rw-dark-bg .rw-node-ipa-label { color: #6b7280; }
.rw-dark-bg .rw-node-speak-btn { color: #a78bfa; }
.rw-dark-bg .rw-empty { color: #9ca3af; }
.rw-dark-bg .rw-empty strong { color: #d1d5db; }
.rw-back-btn {
  padding: 6px 14px; border-radius: 8px; border: 1.5px solid #e5e7eb;
  background: #fff; cursor: pointer; font-size: .88rem; color: #374151;
  transition: all .14s;
}
.rw-back-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.rw-title { font-weight: 800; font-size: 1.08rem; color: #15803d; }
.rw-body {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
  position: relative; z-index: 1;
}
/* LEFT PANEL */
.rw-left {
  width: 320px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1.5px solid #e5e7eb; background: #fff; overflow: hidden;
}
.rw-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid #f3f4f6; flex-shrink: 0;
}
.rw-panel-title { font-weight: 700; font-size: .88rem; color: #374151; }
.rw-badge {
  display: inline-block; background: #dcfce7; color: #166534;
  border-radius: 10px; padding: 0 7px; font-size: .75rem; font-weight: 700; margin-left: 5px;
}
.rw-add-btn {
  padding: 4px 11px; border-radius: 7px; border: 1.5px solid #16a34a;
  background: #f0fdf4; color: #15803d; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .13s;
}
.rw-add-btn:hover { background: #16a34a; color: #fff; }
.rw-type-chooser {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid #f3f4f6;
  background: #f9fafb; flex-shrink: 0;
}
.rw-type-chooser-lbl { font-size: .78rem; color: #6b7280; font-weight: 600; flex-shrink: 0; }
.rw-type-btn {
  padding: 4px 10px; border-radius: 999px; border: 1.5px solid;
  font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .13s;
}
.rw-type-prefix { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
.rw-type-prefix:hover { background: #7c3aed; color: #fff; }
.rw-type-root   { border-color: #16a34a; color: #15803d; background: #f0fdf4; }
.rw-type-root:hover   { background: #16a34a; color: #fff; }
.rw-type-suffix { border-color: #d97706; color: #b45309; background: #fffbeb; }
.rw-type-suffix:hover { background: #d97706; color: #fff; }
.rw-type-cancel-btn {
  margin-left: auto; padding: 3px 8px; border-radius: 999px; border: 1px solid #e5e7eb;
  background: none; color: #9ca3af; font-size: .8rem; cursor: pointer;
}
.rw-type-cancel-btn:hover { background: #fee2e2; color: #dc2626; border-color: #dc2626; }
.rw-form-type-label {
  font-size: .75rem; font-weight: 700; padding: 5px 0 2px;
}
.rw-form-type-prefix { color: #7c3aed; }
.rw-form-type-root   { color: #15803d; }
.rw-form-type-suffix { color: #b45309; }
.rw-tabs {
  display: flex; gap: 2px; padding: 6px 8px 0; flex-shrink: 0; border-bottom: 1px solid #f3f4f6;
}
.rw-tab {
  flex: 1; padding: 4px 4px; border-radius: 6px 6px 0 0;
  border: 1px solid transparent; border-bottom: none;
  background: none; color: #6b7280; font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: all .13s; white-space: nowrap;
}
.rw-tab:hover { background: #f3f4f6; color: #374151; }
.rw-tab.active {
  background: #fff; color: #15803d; border-color: #e5e7eb;
  border-bottom-color: #fff; margin-bottom: -1px;
}
.rw-row-icon { font-size: .7rem; margin-right: 3px; }
.rw-add-form {
  padding: 0 12px 10px; border-bottom: 1px solid #d1fae5;
  background: #f0fdf4; flex-shrink: 0; overflow-y: auto;
}
.rw-form-vresizer {
  height: 8px; margin: 0 -12px 8px;
  cursor: ns-resize;
  background: linear-gradient(to bottom, #d1fae5 0%, #f0fdf4 100%);
  border-bottom: 1.5px solid #86efac;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rw-form-vresizer::after {
  content: ''; display: block;
  width: 32px; height: 3px; border-radius: 2px;
  background: #86efac;
}
.rw-form-vresizer:hover { background: linear-gradient(to bottom, #bbf7d0 0%, #f0fdf4 100%); }
.rw-form-vresizer:hover::after { background: #4ade80; }
.rw-form-hint {
  font-size: .75rem; color: #6b7280; margin-bottom: 7px; line-height: 1.4;
}
.rw-words-inp {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border-radius: 8px; border: 1.5px solid #86efac;
  font-size: .82rem; font-family: monospace; line-height: 1.55;
  resize: none; outline: none; margin-bottom: 8px;
  min-height: 80px;
}
.rw-words-inp:focus { border-color: #16a34a; box-shadow: 0 0 0 3px #bbf7d0; }
.rw-root-inp {
  width: 100%; box-sizing: border-box; padding: 7px 10px;
  border-radius: 7px; border: 1.5px solid #86efac;
  font-size: .9rem; font-weight: 700; margin-bottom: 6px; outline: none;
}
.rw-root-inp:focus { border-color: #16a34a; }
.rw-deriv-inp {
  width: 100%; box-sizing: border-box; padding: 7px 10px;
  border-radius: 7px; border: 1.5px solid #d1fae5;
  font-size: .82rem; resize: vertical; outline: none; margin-bottom: 7px;
  font-family: inherit; line-height: 1.5;
}
.rw-deriv-inp:focus { border-color: #16a34a; }
.rw-form-actions { display: flex; gap: 6px; }
.rw-save-btn {
  flex: 1; padding: 6px 0; border-radius: 7px; border: none;
  background: #16a34a; color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.rw-save-btn:hover { background: #15803d; }
.rw-cancel-btn {
  padding: 6px 12px; border-radius: 7px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #6b7280; font-size: .82rem; cursor: pointer;
}
.rw-cancel-btn:hover { background: #f3f4f6; }
.rw-families-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.rw-empty-list {
  padding: 20px 14px; text-align: center; color: #9ca3af; font-size: .82rem; line-height: 1.6;
}
.rw-family-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; cursor: pointer; border-radius: 0;
  transition: background .12s; gap: 6px;
}
.rw-family-row:hover { background: #f0fdf4; }
.rw-family-row.rw-row-active { background: #fef9c3; }
.rw-family-row.rw-row-active:hover { background: #fef08a; }
.rw-family-row-main { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.rw-family-root { font-weight: 700; font-size: .88rem; color: #15803d; }
.rw-family-row.rw-row-locked .rw-family-root { color: #94a3b8; }
.rw-family-row.rw-row-locked { opacity: .7; }
.rw-lock-ico { font-size: .72rem; }
/* Màn hình "đang tải" cho Root Words */
.rw-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 20px; min-height: 200px; text-align: center; }
.rw-loading-leaf { font-size: 2.4rem; animation: rw-bob 1.4s ease-in-out infinite; }
.rw-loading-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3.5px solid #dcfce7; border-top-color: #16a34a; animation: rw-spin .8s linear infinite; }
.rw-loading-text { font-size: .9rem; font-weight: 700; color: #16a34a; letter-spacing: .02em; animation: rw-pulse 1.4s ease-in-out infinite; }
@keyframes rw-spin { to { transform: rotate(360deg); } }
@keyframes rw-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-7px) rotate(6deg); } }
@keyframes rw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.rw-family-count { font-size: .72rem; color: #9ca3af; }
.rw-family-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.rw-family-row:hover .rw-family-actions { opacity: 1; }
.rw-family-row .rw-family-actions .rw-row-star-btn.starred { opacity: 1; }
.rw-row-edit-btn, .rw-row-del-btn, .rw-row-star-btn {
  width: 22px; height: 22px; border-radius: 5px; border: none;
  cursor: pointer; font-size: .78rem; display: flex; align-items: center; justify-content: center;
}
.rw-row-edit-btn { background: #e0f2fe; color: #0369a1; }
.rw-row-del-btn { background: #fee2e2; color: #dc2626; }
.rw-row-star-btn { background: #fef9c3; color: #ca8a04; font-size: .9rem; }
.rw-row-star-btn.starred { background: #fef08a; color: #b45309; }
.rw-tab-starred { color: #b45309; }
.rw-tab-starred.active { background: #fef3c7; color: #b45309; border-color: #fbbf24; }
.rw-test-starred-btn {
  width: 100%; margin-bottom: 8px; padding: 7px 12px; border-radius: 8px;
  border: none; background: #fef3c7; color: #92400e; font-size: .82rem;
  font-weight: 700; cursor: pointer; text-align: center;
}
.rw-test-starred-btn:hover { background: #fde68a; }
/* RIGHT PANEL */
.rw-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0;
}
.rw-search-row {
  display: flex; gap: 8px; padding: 14px 18px 10px; flex-shrink: 0;
}
.rw-display-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 18px 10px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0; flex-wrap: wrap;
}
.rw-disp-label {
  font-size: .78rem; font-weight: 800; color: #1f2937; letter-spacing: .03em;
}
.rw-disp-sel {
  font-size: .8rem; padding: 3px 6px; border-radius: 6px;
  border: 1.5px solid #9ca3af; background: #fff; color: #111827;
  outline: none; cursor: pointer; font-weight: 600;
}
.rw-disp-sel:focus { border-color: #6366f1; }
.rw-disp-btn {
  padding: 3px 9px; border-radius: 6px;
  border: 1.5px solid #9ca3af; background: #fff;
  color: #111827; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.rw-disp-btn:hover { background: #f3f4f6; border-color: #6b7280; }
.rw-disp-val {
  font-size: .82rem; font-weight: 800; color: #4f46e5;
  min-width: 28px; text-align: center;
}
.rw-expand-all-btn { margin-left: 4px; color: #6366f1; border-color: #a5b4fc; font-weight: 700; }
.rw-expand-all-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.rw-expand-all-btn:hover { background: #eef2ff; }
.rw-search-inp {
  flex: 1; padding: 9px 14px; border-radius: 9px;
  border: 2px solid #d1d5db; font-size: .95rem;
  outline: none; transition: border-color .15s;
}
.rw-search-inp:focus { border-color: #16a34a; }
.rw-search-btn {
  padding: 9px 18px; border-radius: 9px; border: none;
  background: #16a34a; color: #fff; font-size: .9rem;
  font-weight: 700; cursor: pointer; transition: background .14s;
}
.rw-search-btn:hover { background: #15803d; }
.rw-results { flex: 1; overflow-y: auto; padding: 16px 18px; }
.rw-results-multi {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #16a34a #e5e7eb;
}
.rw-results-multi::-webkit-scrollbar { width: 10px; }
.rw-results-multi::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 0; }
.rw-results-multi::-webkit-scrollbar-thumb { background: #16a34a; border-radius: 5px; border: 2px solid #e5e7eb; }
.rw-results-multi::-webkit-scrollbar-thumb:hover { background: #15803d; }
.rw-loading, .rw-empty {
  text-align: center; color: #6b7280; font-size: .95rem; margin-top: 48px; line-height: 1.7;
}
.rw-empty strong { color: #374151; }
.rw-no-branch-notice {
  text-align: center; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 10px 16px; font-size: .9rem; margin-bottom: 16px; line-height: 1.5;
}
.rw-no-branch-notice strong { color: #78350f; }
.rw-dark-bg .rw-no-branch-notice { background: #2d2000; border-color: #6b4f00; color: #fcd34d; }
.rw-dark-bg .rw-no-branch-notice strong { color: #fef08a; }

/* ── Dark mode button ── */
.rw-dark-mode-btn { font-size: 1rem; padding: 3px 8px; }
.rw-dark-mode-btn.active { background: #312e81; color: #a5b4fc; border-color: #4f46e5; }

/* ── Dark mode — left panel & chrome ── */
.rw-dark-mode .rw-left {
  background: #1e1b2e; border-right-color: rgba(255,255,255,.1);
}
.rw-dark-mode .rw-panel-head { border-bottom-color: rgba(255,255,255,.08); background: #1e1b2e; }
.rw-dark-mode .rw-panel-title { color: #c4b5fd; }
.rw-dark-mode .rw-badge { background: rgba(167,139,250,.2); color: #c4b5fd; }
.rw-dark-mode .rw-add-btn { background: rgba(22,163,74,.15); border-color: #16a34a; color: #4ade80; }
.rw-dark-mode .rw-add-btn:hover { background: #16a34a; color: #fff; }
.rw-dark-mode .rw-type-chooser { background: #2a2740; border-bottom-color: rgba(255,255,255,.08); }
.rw-dark-mode .rw-type-chooser-lbl { color: #9ca3af; }
.rw-dark-mode .rw-tabs { border-bottom-color: rgba(255,255,255,.1); background: #1e1b2e; }
.rw-dark-mode .rw-tab { color: #9ca3af; border-color: transparent; background: transparent; }
.rw-dark-mode .rw-tab:hover { color: #c4b5fd; background: rgba(139,92,246,.15); }
.rw-dark-mode .rw-tab.active { color: #a5b4fc; border-bottom-color: #818cf8; }
.rw-dark-mode .rw-tab-starred { color: #fbbf24; }
.rw-dark-mode .rw-tab-starred.active { border-bottom-color: #fbbf24; color: #fde68a; }
.rw-dark-mode .rw-families-list { background: #1e1b2e; }
.rw-dark-mode .rw-family-row { background: #2a2740; border-bottom-color: rgba(255,255,255,.07); }
.rw-dark-mode .rw-family-row:hover { background: #312e50; }
.rw-dark-mode .rw-family-row.rw-row-active { background: #3b3468; }
.rw-dark-mode .rw-family-root { color: #e2e8f0; }
.rw-dark-mode .rw-family-count { color: #6b7280; }
.rw-dark-mode .rw-row-star-btn { background: rgba(250,204,21,.1); border-color: rgba(250,204,21,.3); color: #fbbf24; }
.rw-dark-mode .rw-row-star-btn.starred { background: rgba(250,204,21,.2); color: #fde68a; }
.rw-dark-mode .rw-row-edit-btn,
.rw-dark-mode .rw-row-del-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #9ca3af; }
.rw-dark-mode .rw-empty-list { color: #6b7280; }
.rw-dark-mode .rw-test-starred-btn { background: rgba(99,102,241,.2); border-color: #6366f1; color: #a5b4fc; }
.rw-dark-mode .rw-resizer { background: rgba(255,255,255,.08); }
.rw-dark-mode .rw-right { background: transparent; }
.rw-dark-mode .rw-search-row { background: #1a1830; }
.rw-dark-mode .rw-search-inp { background: #2a2740; border-color: rgba(255,255,255,.15); color: #e2e8f0; }
.rw-dark-mode .rw-search-inp::placeholder { color: #6b7280; }
.rw-dark-mode .rw-search-btn { background: rgba(99,102,241,.25); border-color: #6366f1; color: #a5b4fc; }
.rw-dark-mode .rw-display-bar { background: #1a1830; border-bottom-color: rgba(255,255,255,.08); }

.rw-result-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.rw-result-root { font-weight: 800; font-size: 1rem; color: #15803d; }
.rw-result-count { font-size: .78rem; color: #9ca3af; }
.rw-custom-badge {
  font-size: .72rem; background: #fef9c3; color: #854d0e;
  border-radius: 6px; padding: 2px 8px; font-weight: 700;
}
.rw-dict-badge {
  font-size: .72rem; background: #ede9fe; color: #6d28d9;
  border-radius: 6px; padding: 2px 8px; font-weight: 700;
}
.rw-edit-group-btn {
  padding: 3px 10px; border-radius: 6px; border: 1.5px solid #d1d5db;
  background: #fff; color: #374151; font-size: .76rem; cursor: pointer;
  margin-left: auto;
}
.rw-edit-group-btn:hover { background: #f9fafb; border-color: #9ca3af; }

.rw-multi-header {
  font-size: .85rem; color: #374151; margin-bottom: 14px;
  padding: 8px 12px; background: #fef9c3; border-radius: 8px;
  border-left: 3px solid #f59e0b;
}
.rw-section-label {
  font-size: .72rem; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 10px 0 6px; padding-left: 2px;
}
.rw-branch-exact {
  border-color: #86efac !important;
  background: #f0fdf4 !important;
}
.rw-branch-block {
  margin-bottom: 20px; padding: 12px 12px 8px;
  border: 1.5px solid #e5e7eb; border-radius: 10px;
  background: #fafafa;
}
.rw-node-hit {
  background: #fde8c8 !important;
  border: 2px solid #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}

.rw-test-btn {
  padding: 3px 12px; border-radius: 6px; border: none;
  background: #7c3aed; color: #fff; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .13s;
}
.rw-test-btn:hover { background: #6d28d9; }
.rw-test-fill-btn {
  padding: 3px 11px; border-radius: 6px; border: 1.5px solid #7c3aed;
  background: #f5f3ff; color: #5b21b6; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .13s; margin-left: 4px;
}
.rw-test-fill-btn:hover { background: #ede9fe; }
.rw-test-pos-btn {
  padding: 3px 11px; border-radius: 6px; border: 1.5px solid #0891b2;
  background: #ecfeff; color: #0e7490; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .13s; margin-left: 4px;
}
.rw-test-pos-btn:hover { background: #cffafe; }
.rw-test-meaning-btn {
  padding: 3px 11px; border-radius: 6px; border: 1.5px solid #059669;
  background: #ecfdf5; color: #047857; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .13s; margin-left: 4px;
}
.rw-test-meaning-btn:hover { background: #d1fae5; }
.rw-pos-q-text { font-size: 1.08em; line-height: 1.55; }
.rw-pos-q-def-hint {
  font-size: .88em; color: #4b5563; background: #f9fafb;
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; line-height: 1.5;
}
.rw-pos-q-def-lbl { font-weight: 700; color: #374151; margin-right: 4px; }
.body--dark .rw-pos-q-def-hint { background: #1f2937; border-color: #374151; color: #d1d5db; }
.body--dark .rw-pos-q-def-lbl  { color: #e5e7eb; }
.rw-meaning-q-wrap { display: flex; flex-direction: column; gap: 6px; }
.rw-meaning-q-label { font-size: .78em; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.rw-meaning-q-text  { font-size: 1.08em; line-height: 1.5; color: #1f2937; }
.body--dark .rw-meaning-q-text { color: #f3f4f6; }
.rw-meaning-opt  { font-size: 1.05em; font-weight: 700; }

/* ── Quiz ── */
.rw-quiz {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 4px; max-width: 560px; margin: 0 auto;
}
.rw-quiz-bar {
  display: flex; align-items: center; gap: 10px;
}
.rw-quiz-prog { font-size: .82rem; font-weight: 700; color: #6b7280; }
.rw-quiz-sc   { font-size: .82rem; font-weight: 800; color: #16a34a; margin-left: 6px; }
.rw-quiz-exit {
  margin-left: auto; padding: 3px 10px; border-radius: 6px;
  border: 1.5px solid #d1d5db; background: #fff; color: #6b7280;
  font-size: .76rem; cursor: pointer;
}
.rw-quiz-exit:hover { background: #f3f4f6; }
.rw-quiz-trans-btn {
  padding: 3px 10px; border-radius: 6px;
  border: 1.5px solid #a5b4fc; background: #ede9fe; color: #4f46e5;
  font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.rw-quiz-trans-btn:hover { background: #ddd6fe; }
.rw-quiz-trans-hint {
  font-size: .88em; color: #374151; font-style: italic;
  background: rgba(255,255,255,0.55); border-radius: 8px;
  padding: 8px 14px; border-left: 3px solid #a5b4fc;
}
.rw-dark-bg .rw-quiz-trans-hint { color: #e5e7eb; background: rgba(0,0,0,0.2); }
.rw-quiz-sentence {
  font-size: 1.05em; line-height: 1.7; color: #1f2937;
  background: #f9fafb; border-radius: 12px; padding: 16px 18px;
  border: 1.5px solid #e5e7eb;
}
.rw-quiz-blank {
  display: inline-block; min-width: 80px; border-bottom: 2.5px solid #7c3aed;
  color: transparent; background: #ede9fe; border-radius: 4px;
  margin: 0 3px; vertical-align: middle;
}
.rw-quiz-hint {
  font-size: .82em; color: #1f2937; font-style: italic; padding-left: 4px; font-weight: 700;
}
.rw-dark-bg .rw-quiz-hint { color: #ffffff; }
.rw-quiz-opts {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.rw-quiz-opt {
  flex: 1 1 calc(50% - 10px); padding: 10px 14px;
  border-radius: 10px; border: 2px solid #d1d5db;
  background: #fff; color: #1f2937; font-size: .92em; font-weight: 600;
  cursor: pointer; transition: all .14s; text-align: center;
}
.rw-quiz-opt:hover:not(:disabled) { border-color: #7c3aed; background: #f5f3ff; color: #6d28d9; }
.rw-quiz-opt:disabled { cursor: default; }
.rw-quiz-opt.rw-quiz-correct { border-color: #16a34a; background: #dcfce7; color: #15803d; }
.rw-quiz-opt.rw-quiz-wrong   { border-color: #dc2626; background: #fee2e2; color: #b91c1c; }
.rw-quiz-fb { border-radius: 10px; overflow: hidden; border: 1.5px solid #e5e7eb; }
.rw-quiz-fb-label { font-size: .92em; font-weight: 700; padding: 8px 14px; text-align: center; }
.rw-quiz-fb-ok  { background: #dcfce7; color: #15803d; }
.rw-quiz-fb-err { background: #fee2e2; color: #b91c1c; }
.rw-quiz-card {
  background: #fff; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.rw-quiz-card-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.body--dark .rw-quiz-fb  { border-color: #374151; }
.body--dark .rw-quiz-card { background: #1f2937; }
.rw-quiz-next {
  align-self: flex-end; padding: 9px 22px; border-radius: 8px;
  border: none; background: #7c3aed; color: #fff;
  font-size: .88em; font-weight: 700; cursor: pointer; transition: background .13s;
}
.rw-quiz-next:hover { background: #6d28d9; }
.rw-quiz-kb-hint {
  font-size: .76em; color: #9ca3af; margin-top: 4px; text-align: right; align-self: flex-end;
}
/* Result screen */
.rw-quiz-end { align-items: center; padding: 40px 20px; }
.rw-quiz-end-msg   { font-size: 1.5rem; font-weight: 800; }
.rw-quiz-end-score { font-size: 3rem; font-weight: 900; color: #7c3aed; line-height: 1; margin-top: 10px; }
.rw-quiz-end-score span { font-size: 1.4rem; color: #9ca3af; font-weight: 600; }
.rw-quiz-end-pct   { font-size: 1.1rem; color: #6b7280; margin-bottom: 20px; }
.rw-quiz-end-btns  { display: flex; gap: 12px; }
.rw-quiz-retry, .rw-quiz-back {
  padding: 10px 24px; border-radius: 9px; font-size: .92em; font-weight: 700; cursor: pointer; border: none;
}
.rw-quiz-retry { background: #7c3aed; color: #fff; }
.rw-quiz-retry:hover { background: #6d28d9; }
.rw-quiz-back  { background: #f3f4f6; color: #374151; border: 1.5px solid #d1d5db; }
.rw-quiz-back:hover { background: #e5e7eb; }
/* Fill-in quiz */
.rw-quiz-root-hint { color: #7c3aed; font-weight: 700; font-size: .93em; }
.rw-quiz-fill-row { display: flex; gap: 8px; margin: 14px 0 4px; }
.rw-quiz-fill-input {
  flex: 1; padding: 8px 12px; border: 1.5px solid #d1d5db; border-radius: 8px;
  font-size: 15px; outline: none; font-family: inherit;
}
.rw-quiz-fill-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px #ede9fe; }
.rw-quiz-fill-input:disabled { background: #f9fafb; color: #6b7280; }
.rw-quiz-fill-check {
  padding: 8px 16px; border-radius: 8px; border: none;
  background: #7c3aed; color: #fff; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.rw-quiz-fill-check:hover { background: #6d28d9; }
.rw-quiz-fill-check:disabled { background: #c4b5fd; cursor: default; }
.rw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}
.rw-card {
  background: #fff; border: 1.5px solid #e5e7eb;
  border-radius: 11px; padding: 12px 14px;
  transition: box-shadow .15s, border-color .15s;
}
.rw-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07); border-color: #bbf7d0; }
.rw-card-main {
  border-color: #16a34a; border-width: 2px;
  background: #f0fdf4; grid-column: 1 / -1;
}
.rw-card-head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px;
}
.rw-card-word {
  font-size: 1rem; font-weight: 700; color: #15803d;
  cursor: pointer; transition: color .12s;
}
.rw-card-main .rw-card-word { font-size: 1.25rem; }
.rw-card-word:hover { color: #047857; }
.rw-speak-icon { font-size: .78rem; opacity: .55; }
.rw-card-pos {
  font-size: .7rem; background: #dcfce7; color: #166534;
  border-radius: 4px; padding: 1px 6px; font-weight: 700;
}
.rw-card-ipa {
  font-size: .8rem; color: #7c3aed; margin-bottom: 4px; font-style: italic;
}
.rw-card-main .rw-card-ipa { font-size: .92rem; }
.rw-card-meaning { font-size: .84rem; color: #374151; line-height: 1.4; }
.rw-card-main .rw-card-meaning { font-size: .96rem; }
.rw-body.rw-resizing { user-select: none; cursor: col-resize; }
.rw-resizer {
  width: 6px; flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  position: relative;
  transition: background .15s;
  z-index: 10;
}
.rw-resizer::after {
  content: '';
  position: absolute; inset: 0;
  left: 2px; width: 2px;
  background: #e5e7eb;
  border-radius: 2px;
  transition: background .15s, width .15s, left .15s;
}
.rw-resizer:hover::after,
.rw-resizer.dragging::after {
  left: 0; width: 6px;
  background: #16a34a;
}

/* ── ROOT WORDS TREE ── */
.rw-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 12px 8px 24px;
}
.rw-tree-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.rw-tree-root-row {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.rw-tree-children-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.rw-node {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 11px 14px;
  min-width: 160px;
  max-width: 220px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .15s, border-color .15s;
}
.rw-node:hover { box-shadow: 0 3px 12px rgba(0,0,0,.09); border-color: #c7d2fe; }
.rw-node-root {
  border-color: #16a34a;
  border-width: 2px;
  background: #f0fdf4;
  min-width: 200px;
}
.rw-node-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}
.rw-node-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  flex: 1;
}
.rw-node-word {
  font-weight: 700;
  font-size: 1em;
  color: #c2410c;
  cursor: pointer;
  transition: color .12s;
}
.rw-node-root .rw-node-word { font-size: 1.15em; }
.rw-node-word:hover { color: #9a3412; }
.rw-node-ipa-row {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  margin: 2px 0 4px; line-height: 1.3;
}
.rw-node-ipa {
  font-size: .8em;
  color: #7c3aed;
  font-style: italic;
}
.rw-node-ipa-label {
  font-size: .68em; font-weight: 700; color: #9ca3af;
  letter-spacing: .03em; margin-left: 6px;
}
.rw-node-ipa-row .rw-node-ipa-label:first-child { margin-left: 0; }
.rw-node-ipa-sep { width: 10px; }
.rw-node-speak-btn {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  font-size: .82em; color: #7c3aed; opacity: .7; line-height: 1;
  vertical-align: middle;
}
.rw-node-speak-btn:hover { opacity: 1; }
.rw-node-pos {
  font-size: .75em;
  background: #dcfce7;
  color: #166534;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
}
.rw-node-root .rw-node-pos { background: #bbf7d0; }
.rw-node-clickable { cursor: pointer; }
.rw-node-clickable:hover { border-color: #a5b4fc; box-shadow: 0 3px 14px rgba(99,102,241,.12); }
.rw-node-affix {
  border-color: #f59e0b; border-width: 2px;
  background: #fffbeb;
}
.rw-node-affix .rw-node-word { color: #b45309; }
.rw-node-type-badge {
  font-size: .68em; font-weight: 800; border-radius: 5px;
  padding: 1px 7px; letter-spacing: .04em;
}
.rw-node-type-prefix { background: #fef3c7; color: #92400e; }
.rw-node-type-suffix { background: #ede9fe; color: #5b21b6; }
.rw-node-type-root   { background: #d1fae5; color: #065f46; }
.rw-node-level { font-size: .65em; font-weight: 800; border-radius: 5px; padding: 1px 6px; }
.rw-lv-a1, .rw-lv-a2 { background: #dcfce7; color: #15803d; }
.rw-lv-b1, .rw-lv-b2 { background: #fef9c3; color: #854d0e; }
.rw-lv-c1, .rw-lv-c2 { background: #fee2e2; color: #b91c1c; }
.rw-node-toggle {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #6366f1;
  background: #fff;
  color: #6366f1;
  font-size: .85em;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.rw-node-meaning {
  font-size: .88em;
  color: #374151;
  line-height: 1.4;
}
.rw-node-root .rw-node-meaning { font-size: .95em; }
.rw-node-affix-tag { color: #1d4ed8; font-weight: 700; font-style: normal; }
.rw-node-full {
  margin-top: 8px;
  border-top: 1px solid #f3f4f6;
  padding-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rw-node-def, .rw-node-colloc, .rw-node-ex {
  font-size: .85em;
  color: #4b5563;
  line-height: 1.45;
}
.rw-node-ex { color: #6b7280; font-weight: normal; }
.rw-node-ex-label { color: #111827; font-weight: 700; font-style: normal; }
.rw-node-ex-word { color: #ea580c; font-weight: 700; font-style: italic; }

/* ── SYNONYMS & ANTONYMS OVERLAY ── */
.sa-overlay {
  display: none; position: fixed; inset: 0;
  background: #f0fdfa; z-index: 9998;
  flex-direction: column; overflow: hidden;
}
.sa-overlay.active { display: flex; }
.sa-header {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 8px 14px; border-bottom: 1.5px solid #a5f3fc;
  background: rgba(255,255,255,.82); backdrop-filter: blur(6px);
}
.sa-back-btn {
  padding: 5px 13px; border-radius: 8px; border: 1.5px solid #a5f3fc;
  background: #fff; cursor: pointer; font-size: .86rem; color: #0891b2;
  transition: all .13s; white-space: nowrap;
}
.sa-back-btn:hover { background: #ecfeff; border-color: #0891b2; }
.sa-title { font-weight: 800; font-size: 1.05rem; color: #0e7490; white-space: nowrap; }
.sa-bg-controls {
  display: flex; align-items: center; gap: 5px; margin-left: auto; flex-wrap: wrap;
}
.sa-color-picker {
  width: 28px; height: 28px; border: none; border-radius: 6px;
  padding: 2px; cursor: pointer; background: none;
}
.sa-bg-chip {
  padding: 3px 8px; border-radius: 6px; border: 1.5px solid #e5e7eb;
  background: #fff; cursor: pointer; font-size: .82rem; color: #374151;
  transition: all .13s;
}
.sa-bg-chip:hover { border-color: #0891b2; color: #0891b2; }
.sa-bg-chip.active { background: #0891b2; border-color: #0891b2; color: #fff; }

.sa-body {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}
.sa-left {
  width: 280px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1.5px solid #a5f3fc; background: rgba(255,255,255,.75);
  overflow: hidden;
}
.sa-resizer {
  width: 6px; flex-shrink: 0; cursor: col-resize;
  background: linear-gradient(to bottom, transparent, #a5f3fc 40%, transparent);
  transition: background .15s;
}
.sa-resizer:hover { background: #0891b2; }
.sa-body.sa-resizing { user-select: none; cursor: col-resize; }
.sa-right {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
/* Mobile-only elements (hidden on desktop) */
.sa-mobile-words-btn { display: none; }
.sa-mobile-list-close { display: none; }
.sa-mobile-backdrop { display: none; }

/* Left panel */
.sa-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid #cffafe; flex-shrink: 0;
}
.sa-panel-title { font-weight: 700; font-size: .88rem; color: #0e7490; }
.sa-badge {
  display: inline-block; background: #cffafe; color: #0e7490;
  border-radius: 10px; padding: 0 7px; font-size: .74rem; font-weight: 700; margin-left: 5px;
}
.sa-add-btn {
  padding: 4px 11px; border-radius: 7px; border: 1.5px solid #0891b2;
  background: #ecfeff; color: #0e7490; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .13s;
}
.sa-add-btn:hover { background: #0891b2; color: #fff; }

/* Add form */
.sa-add-form {
  padding: 10px 12px; border-bottom: 1px solid #a5f3fc;
  background: #f0fdfa; flex-shrink: 0; overflow-y: auto; max-height: 52vh;
}
.sa-form-row { display: flex; gap: 7px; margin-bottom: 7px; }
.sa-word-inp {
  flex: 2; padding: 6px 9px; border: 1.5px solid #a5f3fc; border-radius: 7px;
  font-size: .88rem; background: #fff; outline: none;
}
.sa-word-inp:focus { border-color: #0891b2; }
.sa-pos-inp {
  flex: 1; padding: 6px 9px; border: 1.5px solid #a5f3fc; border-radius: 7px;
  font-size: .88rem; background: #fff; outline: none;
}
.sa-pos-inp:focus { border-color: #0891b2; }
.sa-mean-inp, .sa-ex-inp {
  width: 100%; box-sizing: border-box; padding: 6px 9px; margin-bottom: 7px;
  border: 1.5px solid #a5f3fc; border-radius: 7px; font-size: .87rem;
  background: #fff; outline: none;
}
.sa-mean-inp:focus, .sa-ex-inp:focus { border-color: #0891b2; }
.sa-field-label {
  display: block; font-size: .78rem; font-weight: 700; color: #0e7490;
  margin-bottom: 4px; margin-top: 4px;
}
.sa-field-label small { font-weight: 400; color: #6b7280; }
.sa-syn-inp, .sa-ant-inp {
  width: 100%; box-sizing: border-box; padding: 6px 9px; margin-bottom: 7px;
  border: 1.5px solid #a5f3fc; border-radius: 7px; font-size: .87rem;
  background: #fff; resize: vertical; outline: none; font-family: inherit;
}
.sa-syn-inp:focus { border-color: #059669; }
.sa-ant-inp:focus { border-color: #dc2626; }
.sa-form-actions { display: flex; gap: 7px; padding-top: 2px; }
.sa-save-btn {
  padding: 5px 14px; border-radius: 7px; border: 1.5px solid #0891b2;
  background: #0891b2; color: #fff; font-size: .86rem; font-weight: 700;
  cursor: pointer; transition: background .13s;
}
.sa-save-btn:hover { background: #0e7490; }
.sa-cancel-btn {
  padding: 5px 11px; border-radius: 7px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #6b7280; font-size: .86rem; cursor: pointer;
  transition: all .13s;
}
.sa-cancel-btn:hover { background: #f3f4f6; }

/* List filter */
.sa-list-filter-row {
  padding: 7px 10px; border-bottom: 1px solid #cffafe; flex-shrink: 0;
}
.sa-list-filter-inp {
  width: 100%; box-sizing: border-box; padding: 5px 9px;
  border: 1.5px solid #a5f3fc; border-radius: 7px; font-size: .84rem;
  background: #fff; outline: none;
}
.sa-list-filter-inp:focus { border-color: #0891b2; }

/* Word list */
.sa-word-list { flex: 1; overflow-y: auto; }
.sa-empty-list {
  padding: 24px 14px; text-align: center; color: #6b7280; font-size: .88rem; line-height: 1.6;
}
.sa-word-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 12px; cursor: pointer;
  border-bottom: 1px solid #f0fdfa; transition: background .1s;
}
.sa-word-row:hover { background: #ecfeff; }
.sa-word-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.sa-word-row-word { font-weight: 700; font-size: .9rem; color: #0e7490; }
.sa-word-row-actions { display: flex; gap: 3px; flex-shrink: 0; }
.sa-row-edit-btn, .sa-row-del-btn {
  width: 24px; height: 24px; border-radius: 5px; border: 1px solid #e5e7eb;
  background: #fff; cursor: pointer; font-size: .78rem; display: flex;
  align-items: center; justify-content: center; transition: all .12s;
}
.sa-row-edit-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.sa-row-del-btn:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }

/* Right panel — search */
.sa-search-row {
  display: flex; gap: 7px; padding: 10px 14px; border-bottom: 1px solid #a5f3fc;
  flex-shrink: 0; background: rgba(255,255,255,.65);
}
.sa-search-inp {
  flex: 1; padding: 8px 12px; border: 1.5px solid #a5f3fc; border-radius: 9px;
  font-size: .94rem; background: #fff; outline: none; color: #0e7490;
}
.sa-search-inp:focus { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.12); }
.sa-search-btn {
  padding: 8px 16px; border-radius: 9px; border: none;
  background: #0891b2; color: #fff; font-size: .9rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .13s;
}
.sa-search-btn:hover { background: #0e7490; }

/* Add form — type toggle & textarea */
.sa-type-row { display: flex; gap: 7px; margin-bottom: 9px; }
.sa-type-btn {
  flex: 1; padding: 6px 0; border-radius: 8px; border: 1.5px solid #a5f3fc;
  background: #fff; font-size: .86rem; font-weight: 700; cursor: pointer;
  transition: all .13s; color: #6b7280;
}
.sa-type-btn.active.sa-type-syn { background: #059669; border-color: #059669; color: #fff; }
.sa-type-btn.active.sa-type-ant { background: #dc2626; border-color: #dc2626; color: #fff; }
.sa-type-btn.sa-type-syn:hover:not(.active) { background: #dcfce7; color: #059669; }
.sa-type-btn.sa-type-ant:hover:not(.active) { background: #fee2e2; color: #dc2626; }
.sa-form-hint {
  font-size: .76rem; color: #6b7280; margin-bottom: 7px; line-height: 1.5;
}
.sa-form-hint code {
  background: #f3f4f6; border-radius: 4px; padding: 0 4px;
  font-size: .75rem; color: #374151;
}
.sa-words-inp {
  width: 100%; box-sizing: border-box; padding: 7px 9px; margin-bottom: 8px;
  border: 1.5px solid #a5f3fc; border-radius: 7px; font-size: .84rem;
  background: #fff; resize: vertical; outline: none; font-family: inherit;
  min-height: 120px;
}
.sa-words-inp:focus { border-color: #0891b2; }

/* Left panel row — new model */
.sa-row-type-badge {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
}
.sa-badge-syn { background: #dcfce7; color: #15803d; }
.sa-badge-ant { background: #fee2e2; color: #b91c1c; }
.sa-word-row-count {
  font-size: .72rem; color: #9ca3af; margin-left: auto; margin-right: 4px;
}

/* Results area */
.sa-results {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px;
  font-size: 1rem;
}
.sa-results > * { margin-bottom: 14px; }
.sa-results > *:last-child { margin-bottom: 0; }
.sa-empty {
  padding: 40px 20px; text-align: center; color: #6b7280; font-size: .94rem; line-height: 1.8;
}
.sa-multi-header {
  padding: 8px 14px; background: #cffafe; border-radius: 9px;
  font-size: .88rem; color: #0e7490; border: 1px solid #a5f3fc;
}
.sa-tabs-bar {
  display: flex; gap: 8px; padding: 2px 0 10px;
}
.sa-tab-btn {
  flex: 1; padding: 9px 14px; border-radius: 10px; border: 2px solid transparent;
  font-size: .88rem; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,.55); color: #6b7280;
  transition: background .15s, color .15s, border-color .15s;
}
.sa-tab-btn[data-type="syn"] { border-color: #a5f3fc; }
.sa-tab-btn[data-type="ant"] { border-color: #fca5a5; }
.sa-tab-btn[data-type="syn"].active { background: #cffafe; color: #0891b2; }
.sa-tab-btn[data-type="ant"].active { background: #fee2e2; color: #dc2626; }
.sa-tab-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  background: #d1d5db; color: #374151; border-radius: 99px;
  font-size: .72rem; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 5px;
}
.sa-tab-btn[data-type="syn"].active .sa-tab-cnt { background: #0891b2; color: #fff; }
.sa-tab-btn[data-type="ant"].active .sa-tab-cnt { background: #dc2626; color: #fff; }
.sa-section-sep {
  font-size: .78rem; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .04em; padding: 2px 0;
}

/* Branch card */
.sa-branch {
  background: rgba(255,255,255,.9); border-radius: 14px;
  border: 1.5px solid #a5f3fc; overflow: hidden;
  box-shadow: 0 2px 14px rgba(8,145,178,.07);
}
.sa-branch-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-bottom: 1.5px solid #a5f3fc;
  background: rgba(255,255,255,.8);
}
.sa-branch-type {
  font-size: .76rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}
.sa-branch-syn { background: #dcfce7; color: #15803d; }
.sa-branch-ant { background: #fee2e2; color: #b91c1c; }
.sa-branch-headword {
  font-size: 1.08rem; font-weight: 800; color: #0e7490;
}
.sa-branch-count { font-size: .76rem; color: #9ca3af; }
.sa-edit-entry-btn {
  margin-left: auto; padding: 3px 10px; border-radius: 6px;
  border: 1px solid #a5f3fc; background: #fff; color: #0891b2;
  font-size: .78rem; cursor: pointer; transition: all .12s;
}
.sa-edit-entry-btn:hover { background: #ecfeff; border-color: #0891b2; }
.sa-add-ant-btn {
  padding: 3px 10px; border-radius: 6px; margin-left: 6px;
  border: 1px solid #fca5a5; background: #fff5f5; color: #dc2626;
  font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .12s;
}
.sa-add-ant-btn:hover { background: #fee2e2; border-color: #dc2626; }
.sa-ex-more-btn {
  display: inline-block; margin-top: 2px; margin-left: 2px;
  padding: 1px 8px; border-radius: 5px;
  border: 1px solid #bae6fd; background: #f0f9ff; color: #0369a1;
  font-size: .72em; font-weight: 600; cursor: pointer; transition: all .12s;
}
.sa-ex-more-btn:hover { background: #e0f2fe; border-color: #0369a1; }
.sa-branch-words {
  display: flex; flex-direction: column;
}

/* Word card inside branch */
.sa-word-card {
  padding: 10px 14px; border-bottom: 1px solid #f0fdfa;
  transition: background .1s;
}
.sa-word-card:last-child { border-bottom: none; }
.sa-word-card:hover { background: rgba(186,230,255,.35); }
.sa-wc-head {
  background: rgba(240,253,250,.6);
  border-left: 3px solid #0891b2;
}
.sa-wc-hit {
  background: #fefce8; border-left: 3px solid #f59e0b;
}
.sa-wc-top {
  display: flex; align-items: center; gap: 7px; margin-bottom: 3px;
}
.sa-wc-word {
  font-size: 1em; font-weight: 700; color: #0e7490;
}
.sa-wc-head .sa-wc-word { font-size: 1.1em; }
.sa-wc-pos {
  font-size: .72em; background: #e0f2fe; color: #0369a1;
  border-radius: 5px; padding: 1px 7px; font-style: italic; font-weight: 600;
}
.sa-wc-level {
  font-size: .68em; font-weight: 800; border-radius: 5px;
  padding: 1px 6px; letter-spacing: .03em;
}
.sa-level-a1, .sa-level-a2 { background: #dcfce7; color: #15803d; }
.sa-level-b1, .sa-level-b2 { background: #fef9c3; color: #854d0e; }
.sa-level-c1, .sa-level-c2 { background: #fee2e2; color: #b91c1c; }
.sa-wc-ipa-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.sa-wc-ipa { display: flex; gap: 6px; align-items: center; }
.sa-ipa-group { display: flex; align-items: center; gap: 4px; }
.sa-ipa-label {
  font-size: .68em; font-weight: 700; color: #374151;
  background: #f3f4f6; border-radius: 3px; padding: 0 4px;
}
.sa-ipa-val { font-size: .84em; color: #374151; font-style: italic; }
.sa-speak-btn {
  background: none; border: none; cursor: pointer;
  font-size: .88em; color: #9ca3af; padding: 0 2px;
  transition: color .12s;
}
.sa-speak-btn:hover { color: #0891b2; }
.sa-wc-meaning {
  font-size: .86em; color: #374151; font-style: italic;
  border-left: 2px solid #a5f3fc; padding-left: 7px; margin-bottom: 4px;
}
.sa-wc-line { font-size: .82em; color: #1f2937; margin-top: 3px; line-height: 1.45; }
.sa-wc-label { font-weight: 700; color: #0891b2; margin-right: 4px; }
.sa-wc-ex { color: #374151; font-style: italic; }
.sa-wc-ex-hl { color: #c2410c; font-weight: 700; }
.sa-wc-coloc { color: #1f2937; }
.sa-coloc-en { font-weight: 700; color: #15803d; }
.sa-vi-trans { color: #374151; }
.sa-hide-vi .sa-vi-trans { display: none; }
.sa-vi-toggle {
  margin-left: auto; padding: 4px 11px; border-radius: 8px;
  border: 2px solid #a5f3fc; background: #fff; color: #6b7280;
  font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.sa-vi-toggle.active { background: #0891b2; border-color: #0891b2; color: #fff; }
.sa-font-ctrl {
  display: flex; align-items: center; gap: 3px; margin-left: 6px;
}
.sa-font-btn {
  padding: 3px 8px; border-radius: 6px; border: 1.5px solid #d1d5db;
  background: #fff; color: #374151; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .12s; line-height: 1;
}
.sa-font-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.sa-font-lbl {
  font-size: .72rem; color: #fff; font-weight: 700; min-width: 32px; text-align: center;
}
.sa-font-sel {
  padding: 3px 5px; border: 1.5px solid #d1d5db; border-radius: 6px;
  background: #fff; color: #374151; font-size: .75rem; cursor: pointer;
}
.sa-wc-word { cursor: default; }
.sa-wc-word[title] { cursor: pointer; text-decoration: underline dotted #9ca3af; text-underline-offset: 3px; }
.sa-word-popup {
  position: fixed; z-index: 99999; width: 320px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 8px 36px rgba(0,0,0,.18), 0 1.5px 6px rgba(0,0,0,.08);
  border: 1.5px solid #e2e8f0; padding: 14px 16px;
  font-size: .88rem; line-height: 1.6;
  animation: sa-popup-in .15s ease-out;
}
.sa-popup-body { max-height: 460px; overflow-y: auto; }
/* Override dark-theme pdf-dict-* colors for light popup */
.sa-word-popup .pdf-dict-word { color: #0e7490; }
.sa-word-popup .pdf-dict-ipa { color: #6b7280; }
.sa-word-popup .pdf-dict-section-lbl { color: #64748b; }
.sa-word-popup .pdf-dict-vi { color: #0369a1; }
.sa-word-popup .pdf-dict-en,
.sa-word-popup .pdf-dict-eng-def { color: #374151; }
.sa-word-popup .pdf-dict-eng-ex { color: #6b7280; }
.sa-word-popup .pdf-dict-link { color: #64748b; border-color: #e2e8f0; }
.sa-word-popup .pdf-dict-link:hover { color: #7c3aed; border-color: #7c3aed; }
.sa-word-popup .pdf-dict-ex-box { background: #f8fafc; border-color: #e2e8f0; }
.sa-word-popup .pdf-dict-ex-input { background: #fff; border-color: #cbd5e1; color: #374151; }
.sa-word-popup .pdf-dict-ex-input::placeholder { color: #9ca3af; }
@keyframes sa-popup-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.sa-popup-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  cursor: pointer; font-size: .85rem; color: #9ca3af; line-height: 1; padding: 2px 4px;
}
.sa-popup-close:hover { color: #374151; }
.sa-popup-word { font-size: 1.1rem; font-weight: 700; color: #0e7490; padding-right: 22px; display: flex; align-items: center; gap: 7px; }
.sa-popup-speak { background: none; border: none; cursor: pointer; font-size: .95rem; padding: 0; }
.sa-popup-vi { color: #0369a1; font-weight: 600; font-size: .9rem; }
.sa-popup-phonetic { color: #6b7280; font-size: .82rem; margin-top: 2px; }
.sa-popup-ph-lbl { font-weight: 700; font-size: .72em; background: #e2e8f0; border-radius: 3px; padding: 1px 4px; }
.sa-popup-ph-val { font-family: monospace; }
.sa-popup-pos { font-size: .72rem; font-weight: 700; color: #7c3aed; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.sa-popup-def { color: #374151; font-size: .85rem; margin-top: 2px; }
.sa-popup-loading { color: #9ca3af; font-style: italic; }
.sa-popup-save {
  margin-top: 10px; padding: 5px 14px; border-radius: 8px;
  border: 1.5px solid #0891b2; background: #ecfeff; color: #0e7490;
  font-size: .82rem; font-weight: 600; cursor: pointer; display: block; width: 100%;
}
.sa-popup-save:hover { background: #cffafe; }

/* ── VOCABULARY & COLLOCATIONS OVERLAY ── */
.vc-overlay {
  display: none; position: fixed; inset: 0;
  background: #f0fdf4; z-index: 9999;
  flex-direction: column; overflow: hidden;
}
.vc-header {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.06); flex-shrink: 0;
}
.vc-back-btn {
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid #d1d5db; background: #fff;
  font-size: .85rem; cursor: pointer; color: #374151;
}
.vc-back-btn:hover { background: #f3f4f6; }
.vc-title { font-size: 1.1rem; font-weight: 700; color: #1f2937; flex: 1; }
.vc-bg-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vc-font-sel {
  height: 28px; padding: 0 6px; border-radius: 7px; border: 1px solid #d1d5db;
  background: #f9fafb; font-size: .8rem; cursor: pointer; color: #374151;
  outline: none; max-width: 90px;
}
.vc-font-sel:focus { border-color: #7c3aed; }
.vc-size-ctrl { display: flex; align-items: center; gap: 3px; }
.vc-size-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #f3f4f6; cursor: pointer; font-size: .78rem; font-weight: 700; color: #374151;
  line-height: 1; padding: 0;
}
.vc-size-btn:hover { background: #e5e7eb; }
.vc-size-label {
  min-width: 22px; text-align: center; font-size: .8rem; font-weight: 600; color: #374151;
}
.vc-ctrl-sep { width: 1px; height: 20px; background: #d1d5db; margin: 0 2px; flex-shrink: 0; }
.vc-color-picker {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid #d1d5db;
  cursor: pointer; padding: 1px;
}
.vc-bg-chip {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #f3f4f6; cursor: pointer; font-size: .8rem; line-height: 1;
  color: #374151;
}
.vc-bg-chip.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.vc-body {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
/* Left panel */
.vc-left {
  width: 260px; min-width: 160px; max-width: 500px;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.7); border-right: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}
.vc-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.vc-panel-title { font-weight: 700; color: #374151; font-size: .92rem; flex: 1; }
.vc-badge {
  display: inline-block; background: #7c3aed; color: #fff;
  border-radius: 10px; font-size: .72rem; font-weight: 700; padding: 1px 7px;
}
.vc-add-btn {
  padding: 4px 12px; border-radius: 7px; border: 1px solid #7c3aed;
  background: #7c3aed; color: #fff; font-size: .8rem; cursor: pointer; font-weight: 600;
}
.vc-add-btn:hover { background: #6d28d9; }
.vc-new-folder-form {
  padding: 10px 12px; border-bottom: 1px solid #e5e7eb; background: #faf5ff; flex-shrink: 0;
}
.vc-folder-name-inp {
  width: 100%; padding: 7px 10px; border: 1px solid #c4b5fd; border-radius: 8px;
  font-size: .88rem; box-sizing: border-box; outline: none; margin-bottom: 8px;
}
.vc-folder-name-inp:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.12); }
.vc-new-folder-actions { display: flex; gap: 8px; }
.vc-nf-save-btn {
  flex: 1; padding: 6px; border-radius: 7px; border: none;
  background: #7c3aed; color: #fff; font-size: .82rem; cursor: pointer;
}
.vc-nf-save-btn:hover { background: #6d28d9; }
.vc-nf-cancel-btn {
  padding: 6px 12px; border-radius: 7px; border: 1px solid #d1d5db;
  background: #fff; color: #6b7280; font-size: .82rem; cursor: pointer;
}
.vc-global-search-wrap {
  position: relative; display: flex; align-items: center;
  padding: 8px 10px 6px; border-bottom: 1px solid var(--border);
}
.vc-global-search-icon { position: absolute; left: 18px; font-size: .85rem; pointer-events: none; opacity: .5; }
.vc-global-search-inp {
  width: 100%; padding: 6px 26px 6px 26px; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: .82rem; background: var(--surface); color: var(--ink);
  box-sizing: border-box; outline: none;
}
.vc-global-search-inp:focus { border-color: #6366f1; }
.vc-global-search-clr {
  position: absolute; right: 16px; background: none; border: none;
  color: #9ca3af; font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 2px;
}
.vc-global-search-clr:hover { color: #374151; }
.vc-gs-wrap { padding: 14px 16px; }
.vc-gs-header { font-size: .8rem; color: #6b7280; margin-bottom: 10px; }
.vc-gs-count { font-weight: 700; color: var(--ink); }
.vc-gs-empty { color: #9ca3af; font-size: .88rem; padding: 20px 0; }
.vc-gs-hit {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  margin-bottom: 6px; cursor: pointer; transition: background .1s;
}
.vc-gs-hit:hover { background: #fffbeb; border-color: #fde68a; }
.vc-gs-hit-left { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.vc-gs-phrase { font-weight: 700; font-size: .93rem; color: var(--ink); }
.vc-gs-ipa { font-size: .78rem; color: #9ca3af; }
.vc-gs-meaning { font-size: .83rem; color: #15803d; }
.vc-gs-hit-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.vc-gs-type { font-size: .68rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; }
.vc-gs-type-word { background: #dbeafe; color: #1d4ed8; }
.vc-gs-type-colloc { background: #dcfce7; color: #15803d; }
.vc-gs-folder { font-size: .72rem; color: #9ca3af; white-space: nowrap; }
mark.vc-gs-hl { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }
.vc-folder-list { flex: 1; overflow-y: auto; padding: 6px; }
.vc-empty-folders {
  text-align: center; color: #9ca3af; font-size: .85rem;
  padding: 30px 12px; line-height: 1.7;
}
.vc-folder-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  transition: background .12s; margin-bottom: 2px;
}
.vc-folder-row:hover { background: rgba(124,58,237,.07); }
.vc-folder-active { background: rgba(124,58,237,.12) !important; }
.vc-folder-icon { font-size: 1.2rem; flex-shrink: 0; }
.vc-folder-info { flex: 1; min-width: 0; }
.vc-folder-name {
  display: block; font-weight: 600; color: #1f2937; font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-folder-wc { font-size: .74rem; color: #9ca3af; }
.vc-folder-actions { display: flex; gap: 3px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.vc-folder-row:hover .vc-folder-actions { opacity: 1; }
.vc-folder-edit-btn, .vc-folder-del-btn {
  background: none; border: none; cursor: pointer; padding: 2px 5px;
  border-radius: 5px; font-size: .82rem; color: #9ca3af;
}
.vc-folder-edit-btn:hover { background: #e0e7ff; color: #4338ca; }
.vc-folder-del-btn:hover { background: #fee2e2; color: #dc2626; }
/* Resizer */
.vc-resizer {
  width: 5px; cursor: col-resize; background: transparent; flex-shrink: 0;
  transition: background .15s;
}
.vc-resizer:hover, .vc-resizer:active { background: #c4b5fd; }
/* Right panel */
.vc-right {
  flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.vc-right-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; color: #9ca3af;
}
.vc-right-empty span { font-size: 2.5rem; }
.vc-right-empty p { font-size: .95rem; margin: 0; }
.vc-mob-back-btn { display: none; }
@media (max-width: 600px) {
  .vc-left { width: 100%; border-right: none; }
  .vc-right { display: none; }
  .vc-body.vc-mob-detail .vc-left { display: none; }
  .vc-body.vc-mob-detail .vc-right { display: flex; }
  .vc-mob-back-btn {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 7px; border: 1.5px solid #e5e7eb;
    background: #f3f4f6; color: #374151; font-size: .8rem; font-weight: 700;
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
  }
  .vc-add-mixed-btn, .vc-edit-mixed-btn, .vc-add-q-btn,
  .vc-add-word-btn, .vc-add-colloc-btn, .vc-quick-fill-btn { display: none !important; }
}
.vc-content-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 14px; border-bottom: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.6); flex-shrink: 0;
}
.vc-folder-icon-lg { font-size: 1rem; }
.vc-content-title-wrap { display: flex; align-items: baseline; gap: 5px; flex: 1; min-width: 0; }
.vc-content-title { font-weight: 700; color: #1f2937; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-content-wc { font-size: .72rem; color: #9ca3af; white-space: nowrap; }
.vc-add-word-btn {
  padding: 4px 10px; border-radius: 7px; border: 1px solid #7c3aed;
  background: #7c3aed; color: #fff; font-size: .76rem; cursor: pointer; font-weight: 600;
}
.vc-add-word-btn:hover { background: #6d28d9; }
.vc-add-word-form {
  padding: 12px 18px; border-bottom: 1px solid #e5e7eb; background: #faf5ff; flex-shrink: 0;
}
.vc-quick-fill-btn {
  padding: 5px 11px; border-radius: 8px; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: #d1fae5; color: #065f46; border: 1.5px solid #6ee7b7;
}
.vc-quick-fill-btn:hover { background: #a7f3d0; }
.vc-quick-fill-form {
  padding: 12px 18px; border-bottom: 1px solid #bbf7d0; background: #f0fdf4; flex-shrink: 0;
}
@keyframes vc-flash-in {
  0%   { box-shadow: 0 0 0 3px #6ee7b7; background: #d1fae5; }
  100% { box-shadow: none; background: rgba(255,255,255,.85); }
}
.vc-word-flash { animation: vc-flash-in 1.5s ease-out; }
.vc-form-hint {
  font-size: .78rem; color: #6b7280; margin-bottom: 8px; line-height: 1.5;
}
.vc-form-hint code {
  background: #e9d5ff; color: #5b21b6; padding: 1px 5px; border-radius: 4px;
}
.vc-words-inp {
  width: 100%; padding: 9px 11px; border: 1px solid #c4b5fd; border-radius: 9px;
  font-size: .83rem; font-family: monospace; resize: vertical;
  box-sizing: border-box; outline: none; line-height: 1.55;
}
.vc-words-inp:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.12); }
.vc-form-actions { display: flex; gap: 8px; margin-top: 8px; }
.vc-save-btn {
  padding: 7px 18px; border-radius: 8px; border: none;
  background: #7c3aed; color: #fff; font-size: .85rem; cursor: pointer; font-weight: 600;
}
.vc-save-btn:hover { background: #6d28d9; }
.vc-cancel-btn {
  padding: 7px 14px; border-radius: 8px; border: 1px solid #d1d5db;
  background: #fff; color: #6b7280; font-size: .85rem; cursor: pointer;
}
.vc-search-row {
  padding: 10px 16px; border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0;
}
.vc-search-inp {
  width: 100%; padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: .87rem; box-sizing: border-box; outline: none;
}
.vc-search-inp:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.1); }
.vc-empty-words {
  padding: 40px 20px; text-align: center; color: #9ca3af; font-size: .9rem; line-height: 1.7;
}
/* Add collocations button */
.vc-add-colloc-btn {
  padding: 4px 10px; border-radius: 7px; border: 1px solid #d97706;
  background: #d97706; color: #fff; font-size: .76rem; cursor: pointer; font-weight: 600;
}
.vc-add-colloc-btn:hover { background: #b45309; }
/* ── User personal VC ── */
.vc-user-add-btn {
  padding: 4px 10px; border-radius: 7px; border: 1.5px solid #6366f1;
  background: #eef2ff; color: #4338ca; font-size: .76rem; cursor: pointer; font-weight: 600; transition: all .12s;
}
.vc-user-add-btn:hover { background: #6366f1; color: #fff; }
.vc-user-add-form {
  padding: 12px 18px; border-bottom: 1px solid #e0e7ff; background: #f5f3ff; flex-shrink: 0;
}
.vc-user-add-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.vc-user-tab-btn {
  padding: 3px 12px; border-radius: 14px; border: 1.5px solid #c7d2fe; background: transparent;
  color: #6366f1; font-size: .75rem; font-weight: 600; cursor: pointer; transition: all .12s;
}
.vc-user-tab-active { background: #6366f1; color: #fff; border-color: #6366f1; }
.vc-user-section {
  margin: 12px 0 4px; padding: 10px 14px; border-radius: 10px;
  background: #f5f3ff; border: 1.5px solid #e0e7ff;
}
.vc-user-section-title {
  font-size: .75rem; font-weight: 700; color: #6366f1; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase;
}
.vc-user-entry {
  display: flex; align-items: baseline; gap: 4px; padding: 3px 0;
  font-size: .84rem; border-bottom: 1px solid #ede9fe;
}
.vc-user-entry:last-child { border-bottom: none; }
.vc-user-phrase { font-weight: 700; color: #4338ca; }
.vc-user-word { font-weight: 700; color: #7c3aed; }
.vc-user-pos { color: #7c3aed; font-size: .75rem; }
.vc-user-meaning { color: #64748b; font-size: .82rem; }
.vc-user-del-btn {
  margin-left: auto; background: none; border: none; color: #c4b5fd; cursor: pointer; font-size: .75rem; padding: 0 2px; flex-shrink: 0;
}
.vc-user-del-btn:hover { color: #dc2626; }
.vc-add-colloc-form {
  padding: 12px 18px; border-bottom: 1px solid #e5e7eb; background: #fffbeb; flex-shrink: 0;
}
.vc-form-hint-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.vc-form-hint-row .vc-form-hint { flex: 1; margin-bottom: 0; }
.vc-colloc-color-row {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .78rem; color: #6b7280; flex-shrink: 0;
}
.vc-colloc-color-inp {
  width: 30px; height: 28px; border-radius: 6px; border: 1px solid #d1d5db;
  cursor: pointer; padding: 1px;
}
.vc-save-colloc-btn { background: #d97706 !important; }
.vc-save-colloc-btn:hover { background: #b45309 !important; }
/* Collapse/expand all sections button */
.vc-sec-all-btn {
  padding: 4px 10px; border-radius: 8px; border: 1px solid #d1d5db;
  background: #f3f4f6; color: #6b7280; font-size: .75rem; cursor: pointer;
  font-weight: 700; letter-spacing: .03em; transition: background .12s, color .12s;
  flex-shrink: 0;
}
.vc-sec-all-btn:hover { background: #e5e7eb; color: #374151; }
/* Add Mixed button */
.vc-add-mixed-btn {
  padding: 4px 10px; border-radius: 7px; border: 1px solid #059669;
  background: #059669; color: #fff; font-size: .76rem; cursor: pointer; font-weight: 600;
}
.vc-add-mixed-btn:hover { background: #047857; }
.vc-edit-mixed-btn {
  padding: 6px 12px; border-radius: 8px; border: 1px solid #059669;
  background: transparent; color: #059669; font-size: .82rem; cursor: pointer; font-weight: 600;
}
.vc-edit-mixed-btn:hover { background: #f0fdf4; }
.vc-add-mixed-form {
  padding: 12px 18px; border-bottom: 1px solid #e5e7eb; background: #f0fdf4; flex-shrink: 0;
}
.vc-save-mixed-btn { background: #059669 !important; }
.vc-save-mixed-btn:hover { background: #047857 !important; }
/* Add questions button */
.vc-add-q-btn {
  padding: 4px 10px; border-radius: 7px; border: 1px solid #0891b2;
  background: #0891b2; color: #fff; font-size: .76rem; cursor: pointer; font-weight: 600;
}
.vc-add-q-btn:hover { background: #0e7490; }
.vc-add-q-form {
  padding: 12px 18px; border-bottom: 1px solid #e5e7eb; background: #ecfeff; flex-shrink: 0;
}
.vc-save-q-btn { background: #0891b2 !important; }
.vc-save-q-btn:hover { background: #0e7490 !important; }
/* Scrollable body */
.vc-scroll-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
/* Section labels */
.vc-section-label {
  font-size: .78rem; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px; cursor: default;
}
.vc-section-clickable { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin-left: -4px; }
.vc-section-clickable:hover { background: rgba(0,0,0,.04); }
/* Slideshow launch button */
.vc-slide-launch-btn {
  margin-left: auto;
  padding: 3px 12px;
  border-radius: 99px;
  border: 1.5px solid #6366f1;
  background: #eef2ff;
  color: #4338ca;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: background .15s;
}
.vc-slide-launch-btn:hover { background: #6366f1; color: #fff; }
/* Key Vocab test button — section header */
.vc-kv-test-btn {
  margin-left: 8px; padding: 3px 12px; border-radius: 99px;
  border: 1.5px solid #16a34a; background: none; color: #16a34a;
  font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.vc-kv-test-btn:hover { background: #16a34a; color: #fff; }
/* Key Vocab test button — per question card */
.vc-q-kv-test-btn {
  display: inline-block; margin: 6px 0 4px 32px;
  padding: 3px 12px; border-radius: 99px;
  border: 1.5px solid #16a34a; background: none; color: #16a34a;
  font-size: .76rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.vc-q-kv-test-btn:hover { background: #16a34a; color: #fff; }

/* ── Slideshow fullscreen ── */
.vc-slide-topbar {
  width: 100%; max-width: 800px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.vc-slide-close, .vc-slide-flip-btn, .vc-slide-theme-btn {
  padding: 6px 16px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1); color: #fff;
  font-size: .84rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
.vc-slide-close:hover, .vc-slide-flip-btn:hover, .vc-slide-theme-btn:hover { background: rgba(255,255,255,.22); }
.vc-slide-counter { color: #94a3b8; font-size: .9rem; font-weight: 700; }
.vc-slide-card {
  width: 100%; max-width: 800px; flex: 1;
  display: flex; align-items: stretch;
  cursor: pointer;
}
.vc-slide-side {
  width: 100%; border-radius: 16px;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 48px; gap: 16px; text-align: center;
}
.vc-slide-front {
  background: #fff;
}
.vc-slide-back {
  background: #1e293b;
  text-align: left; align-items: flex-start; justify-content: flex-start;
  overflow-y: auto;
}
.vc-slide-q-text {
  font-size: 2rem; font-weight: 800; color: #1e293b; line-height: 1.4;
}
.vc-slide-q-trans {
  font-size: 1.1rem; color: #6b7280; font-style: italic; margin-top: 8px;
}
.vc-slide-answer {
  display: flex; align-items: flex-start; gap: 10px;
  color: #e2e8f0; font-size: .95rem; margin-bottom: 18px; font-weight: 600;
}
.vc-slide-a-label {
  background: #6366f1; color: #fff; font-size: .72rem; font-weight: 900;
  padding: 2px 8px; border-radius: 6px; flex-shrink: 0; margin-top: 2px;
}
.vc-slide-samples-list { width: 100%; }
.vc-slide-sample {
  color: #cbd5e1; font-size: .95rem; line-height: 1.7;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 2px 0;
}
.vc-slide-sample:last-child { border-bottom: none; }
.vc-slide-back .vc-sample-block { border: none; padding: 0; background: none; margin: 0; }
.vc-slide-back .vc-sample-block > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 4px; font-weight: 700; color: #38bdf8;
  font-size: .92rem; user-select: none;
  transition: color .15s;
}
.vc-slide-back .vc-sample-block > summary::-webkit-details-marker { display: none; }
.vc-slide-back .vc-sample-block > summary::before {
  content: '›'; font-size: 1.1rem; transition: transform .18s; display: inline-block;
}
.vc-slide-back .vc-sample-block[open] > summary::before { transform: rotate(90deg); }
.vc-slide-back .vc-sample-block > summary:hover { color: #7dd3fc; }
.vc-slide-back .vc-sample-body { color: #e2e8f0; font-size: .95rem; line-height: 1.75; padding: 0 4px 8px; }
.vc-slide-back .vc-sample-vocab { font-size: .82rem; color: #94a3b8; padding: 4px 4px 10px; line-height: 1.6; }
/* Bright mode overrides */
.vc-slide-bright .vc-slide-sample { border-bottom-color: #e5e7eb; }
.vc-slide-bright .vc-slide-back .vc-sample-block > summary { color: #0369a1; }
.vc-slide-bright .vc-slide-back .vc-sample-block > summary:hover { color: #0284c7; }
.vc-slide-bright .vc-slide-back .vc-sample-body { color: #1e293b; }
.vc-slide-bright .vc-slide-back .vc-sample-vocab { color: #6b7280; }
.vc-slide-no-samples { color: #64748b; font-size: .95rem; }
.vc-slide-nav {
  display: flex; gap: 16px; margin-top: 16px;
}
.vc-slide-nav-btn {
  padding: 10px 32px; border-radius: 99px;
  border: 2px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff;
  font-size: .95rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
.vc-slide-nav-btn:hover { background: rgba(255,255,255,.18); }

/* ── VC Slideshow: Dark mode (default when no bright class) ── */
#vcSlideshowOverlay:not(.vc-slide-bright) { background: #0f172a; }

/* ── VC Slideshow: Bright mode ── */
#vcSlideshowOverlay.vc-slide-bright { background: #dde3ec; }
.vc-slide-bright .vc-slide-back { background: #fff; }
.vc-slide-bright .vc-slide-answer { color: #1e293b; }
.vc-slide-bright .vc-slide-sample { color: #374151; border-bottom-color: #e5e7eb; }
.vc-slide-bright .vc-slide-no-samples { color: #9ca3af; }
.vc-slide-bright .vc-slide-close,
.vc-slide-bright .vc-slide-flip-btn,
.vc-slide-bright .vc-slide-theme-btn {
  border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.06); color: #1e293b;
}
.vc-slide-bright .vc-slide-close:hover,
.vc-slide-bright .vc-slide-flip-btn:hover,
.vc-slide-bright .vc-slide-theme-btn:hover { background: rgba(0,0,0,.13); }
.vc-slide-bright .vc-slide-counter { color: #475569; }
.vc-slide-bright .vc-slide-nav-btn {
  border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.06); color: #1e293b;
}
.vc-slide-bright .vc-slide-nav-btn:hover { background: rgba(0,0,0,.13); }
/* Dark mode: text must be white */
#vcSlideshowOverlay:not(.vc-slide-bright) .vc-slide-answer { color: #f1f5f9; }
#vcSlideshowOverlay:not(.vc-slide-bright) .vc-slide-sample { color: #e2e8f0; }
/* Highlights always keep dark text regardless of mode */
.vc-slide-back .vc-kv-hl { background: #bbf7d0 !important; color: #15803d !important; }
.vc-section-colloc-label { margin-top: 20px; }
.vc-section-q-label { margin-top: 20px; }
.vc-sec-toggle {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  color: #9ca3af; font-size: .7rem; line-height: 1;
  flex-shrink: 0; opacity: .7;
}
.vc-sec-toggle:hover { opacity: 1; color: #6b7280; }
.vc-section-count {
  background: #e5e7eb; color: #374151; border-radius: 10px;
  font-size: .72rem; padding: 1px 7px; font-weight: 700;
}
/* Word grid */
.vc-word-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
  align-content: start; margin-bottom: 4px;
}
.vc-word-card {
  background: rgba(255,255,255,.85); border: 1px solid #e5e7eb;
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .15s, border-color .15s;
}
.vc-word-card:hover { box-shadow: 0 3px 10px rgba(124,58,237,.1); border-color: #c4b5fd; }
.vc-wc-top {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.vc-wc-word { font-size: 1.05rem; font-weight: 700; color: #16a34a; }
.vc-wc-pos {
  font-size: .72rem; background: #ede9fe; color: #5b21b6;
  border-radius: 5px; padding: 1px 7px; font-style: italic; font-weight: 600;
}
.vc-wc-actions { display: flex; gap: 3px; margin-left: auto; opacity: 0; transition: opacity .15s; }
.vc-word-card:hover .vc-wc-actions { opacity: 1; }
.vc-wc-edit-btn, .vc-wc-del-btn {
  background: none; border: none; cursor: pointer; padding: 2px 5px;
  border-radius: 5px; font-size: .82rem; color: #9ca3af;
}
.vc-wc-edit-btn:hover { background: #e0e7ff; color: #4338ca; }
.vc-wc-del-btn:hover { background: #fee2e2; color: #dc2626; }
.vc-wc-ipa-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 5px; }
.vc-ipa-group { display: flex; align-items: center; gap: 4px; }
.vc-ipa-label {
  font-size: .68rem; font-weight: 700; color: #6b7280;
  background: #f3f4f6; border-radius: 3px; padding: 0 4px;
}
.vc-ipa-val { font-size: .84rem; color: #374151; font-style: italic; }
.vc-speak-btn {
  background: none; border: none; cursor: pointer;
  font-size: .88rem; color: #9ca3af; padding: 0 2px; transition: color .12s;
}
.vc-speak-btn:hover { color: #7c3aed; }
.vc-colloc-speak-btn { font-size: .8rem; opacity: .6; margin-right: 2px; vertical-align: middle; }
.vc-colloc-speak-btn:hover { opacity: 1; }
.vc-wc-meaning {
  font-size: .86rem; color: #2563eb; font-style: normal;
  border-left: 3px solid #c4b5fd; padding-left: 7px; margin-bottom: 6px;
}
.vc-wc-coloc-row {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px;
}
.vc-coloc-chip {
  background: #ede9fe; color: #5b21b6; border-radius: 20px;
  font-size: .75rem; font-weight: 600; padding: 2px 9px;
  border: 1px solid #c4b5fd;
}
.vc-coloc-has-vi { cursor: pointer; }
.vc-coloc-vitxt { display: none; font-style: italic; color: #6b7280; font-size: .8em; }
.vc-coloc-has-vi.vc-coloc-vi-open .vc-coloc-ptxt { opacity: .65; }
.vc-coloc-has-vi.vc-coloc-vi-open .vc-coloc-vitxt { display: inline; margin-left: 4px; }
.vc-wc-line { font-size: .81rem; color: #6b7280; margin-top: 3px; line-height: 1.45; }
.vc-wc-label { font-weight: 700; color: #7c3aed; margin-right: 4px; }
.vc-wc-ex { color: #374151; font-style: italic; }
.vc-wc-ex-cont { display: inline-block; width: 2em; }
.vc-wc-ex-vi { color: #6b7280; font-size: .9em; font-style: normal; }
.vc-fetch-ipa-btn {
  background: none; border: 1px dashed #c4b5fd; border-radius: 6px;
  padding: 1px 8px; font-size: .75rem; color: #7c3aed; cursor: pointer;
  opacity: .7;
}
.vc-fetch-ipa-btn:hover { opacity: 1; background: #f5f3ff; }
.vc-fetch-ipa-btn:disabled { opacity: .4; cursor: default; }
.vc-ex-more-btn {
  display: inline-block; margin-top: 4px; margin-left: 2em;
  font-size: .78rem; color: #7c3aed; cursor: pointer;
  font-weight: 600; user-select: none;
}
.vc-ex-more-btn:hover { text-decoration: underline; }
.vc-ex-hl { color: #ea580c; font-weight: 800; font-style: italic; }
/* Group headers inside colloc list */
.vc-group-header {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 0 4px; padding: 5px 10px;
  background: linear-gradient(90deg, #fef08a 0%, #fefce8 100%);
  border-left: 3px solid #ca8a04; border-radius: 0 6px 6px 0;
  font-size: .78rem; font-weight: 700; color: #854d0e;
  letter-spacing: .06em; cursor: pointer; user-select: none;
}
.vc-group-header:hover { background: linear-gradient(90deg, #fde047 0%, #fef08a 100%); }
.vc-group-header-icon { font-size: .65rem; color: #ca8a04; flex-shrink: 0; }
.vc-grp-add-btn {
  margin-left: auto; padding: 0 7px; border-radius: 99px;
  border: 1px solid #16a34a; background: transparent;
  color: #15803d; font-size: .85rem; font-weight: 700; cursor: pointer;
  line-height: 1.5; transition: background .12s, color .12s;
}
.vc-grp-add-btn:hover { background: #16a34a; color: #fff; }
.vc-group-all-btn {
  margin-left: 6px; padding: 1px 8px; border-radius: 99px;
  border: 1px solid #16a34a; background: transparent;
  color: #15803d; font-size: .72rem; font-weight: 600; cursor: pointer;
  line-height: 1.6; transition: background .12s;
}
.vc-group-all-btn:hover { background: #dcfce7; }
/* IPA switch button */
.vc-colloc-ipa-switch {
  margin-left: 6px; padding: 1px 9px; border-radius: 99px;
  border: 1px solid #c4b5fd; background: transparent;
  color: #7c3aed; font-size: .72rem; font-weight: 700; cursor: pointer;
  letter-spacing: .04em; transition: background .12s, color .12s;
}
.vc-colloc-ipa-switch:hover { background: #f5f3ff; }
.vc-colloc-ipa-switch.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
/* Phrase IPA row — hidden by default, shown when switch is on */
.vc-colloc-phrase-ipa {
  display: none; margin: 0 0 3px 22px;
  font-size: .78rem; color: #9ca3af; font-style: italic; letter-spacing: .03em;
}
.vc-show-colloc-ipa .vc-colloc-phrase-ipa { display: block; }
/* Collocation list */
.vc-colloc-list { display: flex; flex-direction: column; gap: 0; }
.vc-colloc-entry {
  padding: 5px 0 5px 0; border-bottom: 1px solid rgba(0,0,0,.04);
}
.vc-colloc-entry:last-child { border-bottom: none; }
.vc-colloc-line {
  display: flex; align-items: baseline; flex-wrap: nowrap; gap: 2px;
  line-height: 1.6;
}
.vc-colloc-text { flex: 1; min-width: 0; }
.vc-colloc-phrase {
  font-weight: 700; font-size: .97rem;
}
.vc-colloc-sep { color: #9ca3af; font-size: .9rem; margin: 0 1px; }
.vc-colloc-meaning { font-size: .92rem; color: #2563eb; }
.vc-colloc-actions {
  margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s;
}
.vc-colloc-entry:hover .vc-colloc-actions { opacity: 1; }
.vc-colloc-example {
  margin-left: 28px; font-style: italic; font-size: .83em;
  color: #374151; line-height: 1.55; padding: 1px 0;
}
.vc-colloc-example .vc-wc-ex-vi { font-style: normal; color: #6b7280; }
/* Question list */
.vc-q-list { display: flex; flex-direction: column; gap: 8px; }
.vc-q-card {
  background: rgba(255,255,255,.85); border: 1px solid #e5e7eb;
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .15s, border-color .15s;
}
.vc-q-card:hover { box-shadow: 0 3px 10px rgba(8,145,178,.1); border-color: #a5f3fc; }
.vc-q-top { display: flex; align-items: flex-start; gap: 10px; }
.vc-q-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #0891b2; color: #fff; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.vc-q-body { flex: 1; min-width: 0; }
.vc-q-text { font-size: .93rem; font-weight: 700; color: #1f2937; line-height: 1.5; }
.vc-q-translation {
  font-size: .84rem; font-style: italic; color: #9ca3af; line-height: 1.4; margin-top: 2px;
}
.vc-q-actions { display: flex; gap: 3px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.vc-q-card:hover .vc-q-actions { opacity: 1; }
.vc-q-edit-btn, .vc-q-del-btn {
  background: none; border: none; cursor: pointer; padding: 2px 5px;
  border-radius: 5px; font-size: .82rem; color: #9ca3af;
}
.vc-q-edit-btn:hover { background: #e0e7ff; color: #4338ca; }
.vc-q-del-btn:hover { background: #fee2e2; color: #dc2626; }
.vc-q-answer {
  margin-top: 8px; margin-left: 32px; padding: 7px 10px;
  background: #ecfeff; border-left: 3px solid #0891b2; border-radius: 0 7px 7px 0;
  font-size: .87rem; color: #374151; line-height: 1.5; display: flex; gap: 8px;
}
.vc-q-a-label {
  flex-shrink: 0; font-weight: 700; color: #0891b2; font-size: .8rem;
  background: #cffafe; border-radius: 4px; padding: 0 5px; align-self: flex-start;
}
/* Samples */
.vc-q-samples-ctrl {
  display: flex; gap: 6px; align-items: center;
  margin: 6px 0 2px 32px;
}
.vc-q-samples-tog-btn {
  padding: 2px 10px; border-radius: 99px; border: 1px solid #d1d5db;
  background: #f9fafb; color: #6b7280; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: background .12s, color .12s;
}
.vc-q-samples-tog-btn:hover { background: #e5e7eb; color: #374151; }
.vc-q-samples {
  margin-top: 4px; margin-left: 32px; display: flex; flex-direction: column; gap: 3px;
}
.vc-q-sample {
  display: flex; align-items: baseline; gap: 5px;
  font-size: .87rem; color: #374151; line-height: 1.5;
}
.vc-q-sample-bullet { color: #9ca3af; flex-shrink: 0; font-size: .95rem; }
.vc-q-sample-text { flex: 1; }
.vc-q-sample-edit, .vc-q-sample-del {
  background: none; border: none; cursor: pointer; color: #d1d5db;
  font-size: .9rem; padding: 0 2px; line-height: 1; flex-shrink: 0;
  opacity: 0; transition: opacity .15s, color .12s;
}
.vc-q-sample:hover .vc-q-sample-edit,
.vc-q-sample:hover .vc-q-sample-del { opacity: 1; }
.vc-q-sample-edit:hover { color: #2563eb; }
.vc-q-sample-del:hover { color: #dc2626; }
.vc-q-sample-area {
  margin-top: 8px; margin-left: 32px;
}
/* ── Sample Answer block (auto-parsed format) ── */
.vc-sample-block { border: none; margin: 6px 0 0; padding: 0; }
.vc-sample-block summary.vc-sample-title {
  font-weight: 700; font-size: .88rem; color: #1e40af;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 5px;
  padding: 4px 0; user-select: none;
}
.vc-sample-block summary.vc-sample-title::before {
  content: '▶'; font-size: .65rem; color: #93c5fd; transition: transform .15s;
}
.vc-sample-block[open] summary.vc-sample-title::before { transform: rotate(90deg); }
.vc-sample-block summary.vc-sample-title::-webkit-details-marker { display: none; }
.vc-sample-body {
  margin: 6px 0 4px; font-size: .9rem; line-height: 1.65; color: #374151;
}
.vc-kv-hl {
  background: #bbf7d0; color: #15803d; border-radius: 3px;
  padding: 0 3px; font-style: normal; font-weight: 600;
}
.vc-sample-vocab {
  font-size: .78rem; color: #6b7280; margin-top: 6px;
  padding: 6px 10px; background: #f9fafb; border-radius: 6px; line-height: 1.7;
}
.vc-kv-label { font-weight: 700; color: #374151; }
.vc-kv-en { font-weight: 600; color: #15803d; }
.vc-kv-vi { color: #9ca3af; font-style: italic; }
.vc-kv-ipa { display: none; font-size: .78rem; color: #9ca3af; font-style: italic; margin-left: 4px; }
.vc-show-colloc-ipa .vc-kv-ipa { display: inline; }
.vc-q-add-sample-btn {
  background: none; border: 1px dashed #d1d5db; border-radius: 6px;
  color: #6b7280; font-size: .78rem; cursor: pointer; padding: 3px 10px;
  transition: border-color .12s, color .12s;
}
.vc-q-add-sample-btn:hover { border-color: #0891b2; color: #0891b2; }
.vc-q-sample-form {
  margin-top: 6px;
}
/* User samples */
.vc-q-user-samples {
  margin-top: 8px; margin-left: 32px; display: flex; flex-direction: column; gap: 3px;
}
.vc-q-user-samples-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #0891b2; margin-bottom: 3px;
}
.vc-q-user-sample {
  display: flex; align-items: baseline; gap: 5px;
  font-size: .87rem; color: #374151; line-height: 1.5;
}
.vc-q-user-sample-text { flex: 1; font-style: italic; color: #0e7490; }
.vc-q-user-sample-del {
  background: none; border: none; cursor: pointer; color: #d1d5db;
  font-size: .9rem; padding: 0 2px; line-height: 1; flex-shrink: 0;
  opacity: 0; transition: opacity .15s, color .12s;
}
.vc-q-user-sample:hover .vc-q-user-sample-del { opacity: 1; }
.vc-q-user-sample-del:hover { color: #dc2626; }
.vc-q-user-sample-edit {
  background: none; border: none; cursor: pointer; color: #d1d5db;
  font-size: .85rem; padding: 0 2px; line-height: 1; flex-shrink: 0;
  opacity: 0; transition: opacity .15s, color .12s;
}
.vc-q-user-sample:hover .vc-q-user-sample-edit { opacity: 1; }
.vc-q-user-sample-edit:hover { color: #0891b2; }
.vc-q-user-sample-editform { margin: 4px 0 6px 16px; }
.vc-q-user-sample-area { margin-top: 8px; margin-left: 32px; }
.vc-q-add-user-sample-btn {
  background: none; border: 1px dashed #67e8f9; border-radius: 6px;
  color: #0891b2; font-size: .78rem; cursor: pointer; padding: 3px 10px;
  transition: border-color .12s, background .12s;
}
.vc-q-add-user-sample-btn:hover { border-color: #0891b2; background: #ecfeff; }
.vc-q-user-sample-form { margin-top: 6px; }
.vc-q-user-sample-ta {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1.5px solid #e0f2fe; border-radius: 8px; font-size: .88rem;
  font-family: inherit; resize: vertical; outline: none; line-height: 1.6;
  transition: border-color .15s;
}
.vc-q-user-sample-ta:focus { border-color: #0891b2; }
.vc-q-grammar-fb {
  margin-top: 5px; font-size: .8rem; min-height: 18px;
}
.vc-q-user-sample-form-actions {
  margin-top: 7px; display: flex; gap: 8px;
}
/* Rich-text toolbar */
.vc-sample-toolbar {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 5px 7px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-bottom: none; border-radius: 7px 7px 0 0;
}
.vc-tb-font, .vc-tb-size {
  font-size: .78rem; padding: 2px 4px; border: 1px solid #d1d5db;
  border-radius: 4px; background: #fff; cursor: pointer; outline: none;
  color: #374151;
}
.vc-tb-font { max-width: 80px; }
.vc-tb-size { max-width: 58px; }
.vc-tb-sep {
  display: inline-block; width: 1px; height: 18px; background: #d1d5db; margin: 0 2px;
}
.vc-tb-btn {
  width: 26px; height: 26px; border: 1px solid #d1d5db; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: .85rem; display: flex;
  align-items: center; justify-content: center; padding: 0; color: #374151;
  flex-shrink: 0;
}
.vc-tb-btn:hover { background: #e0f2fe; border-color: #0891b2; }
.vc-tb-hl-label {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1px solid #d1d5db; border-radius: 4px;
  background: #fff; cursor: pointer; overflow: hidden;
}
.vc-tb-hl-label:hover { background: #fef9c3; border-color: #ca8a04; }
.vc-tb-hl-icon {
  font-size: .85rem; font-weight: 700; color: #374151; pointer-events: none;
  line-height: 1;
}
.vc-tb-color-inp {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  cursor: pointer; border: none; padding: 0;
}
.vc-sample-editor {
  width: 100%; min-height: 68px; padding: 7px 9px; border: 1px solid #d1d5db;
  border-radius: 0 0 7px 7px; font-size: .85rem; line-height: 1.6;
  box-sizing: border-box; outline: none; background: #fff;
  word-break: break-word;
}
.vc-sample-editor:focus { border-color: #0891b2; box-shadow: 0 0 0 2px rgba(8,145,178,.1); }
.vc-sample-editor:empty::before {
  content: "Each line = one sample answer..."; color: #9ca3af; pointer-events: none;
}
.vc-q-sample-form-actions { display: flex; gap: 6px; margin-top: 5px; }
.vc-q-sample-save-btn {
  padding: 4px 12px; border-radius: 6px; border: none;
  background: #0891b2; color: #fff; font-size: .8rem; cursor: pointer;
}
.vc-q-sample-save-btn:hover { background: #0e7490; }
.vc-q-sample-cancel-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #fff; color: #6b7280; font-size: .8rem; cursor: pointer;
}

/* ── VC Dark background overrides (chỉ colloc list, không đụng word/question cards vì đã có bg trắng) ── */
.vc-dark-bg .vc-colloc-example { color: #e2e8f0; }
.vc-dark-bg .vc-colloc-example .vc-wc-ex-vi { color: #94a3b8; }
.vc-dark-bg .vc-colloc-sep { color: #64748b; }
.vc-dark-bg .vc-colloc-meaning { color: #93c5fd; }
.vc-dark-bg .vc-colloc-phrase-ipa { color: #94a3b8; }
.vc-dark-bg .vc-group-header { background: rgba(202,138,4,.2); color: #fde047; }
.vc-dark-bg .vc-group-header:hover { background: rgba(202,138,4,.3); }

/* ── GRAMMAR OVERLAY ── */
.source-card-gr { border-color: #0d9488; }
.source-card-gr:hover { background: #f0fdfa; border-color: #0f766e; }
.source-card-wr { border-color: #4f46e5; }
.source-card-wr:hover { background: #f5f3ff; border-color: #4338ca; }

.gr-overlay {
  display: none; position: fixed; inset: 0; z-index: 9100;
  flex-direction: column; background: #f0f9ff;
}
.gr-header {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0; flex-shrink: 0; flex-wrap: wrap;
}
.gr-back-btn {
  padding: 6px 14px; border-radius: 8px; border: 1px solid #d1d5db;
  background: #fff; cursor: pointer; font-size: .88rem; color: #374151;
}
.gr-back-btn:hover { background: #f3f4f6; }
.gr-title { font-size: 1.05rem; font-weight: 700; color: #0f766e; flex: 1; }
.gr-bg-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gr-color-picker {
  width: 26px; height: 26px; border: none; border-radius: 6px; cursor: pointer;
  padding: 0; background: none;
}
.gr-bg-chip {
  padding: 4px 8px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #fff; cursor: pointer; font-size: .75rem; color: #6b7280;
}
.gr-bg-chip.active { background: #ccfbf1; border-color: #0d9488; color: #0f766e; font-weight: 700; }

.gr-body {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.gr-left {
  width: 260px; min-width: 160px; flex-shrink: 0; display: flex;
  flex-direction: column; border-right: 1px solid #e2e8f0;
  background: rgba(255,255,255,.7); overflow: hidden;
}
.gr-resizer {
  width: 5px; cursor: col-resize; background: transparent; flex-shrink: 0;
  transition: background .15s;
}
.gr-resizer:hover { background: rgba(13,148,136,.25); }
.gr-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0;
}
.gr-mobile-back-bar { display: none; }
.gr-right-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: #9ca3af; gap: 8px;
}
.gr-right-empty span { font-size: 2.5rem; }
.gr-right-empty p { font-size: .9rem; margin: 0; }

/* Folder panel */
.gr-panel-head {
  display: flex; align-items: center; padding: 10px 14px 8px;
  border-bottom: 1px solid #f0fdf4; flex-shrink: 0;
}
.gr-panel-title { font-size: .88rem; font-weight: 700; color: #374151; flex: 1; }
.gr-badge {
  display: inline-block; background: #0d9488; color: #fff;
  border-radius: 9px; padding: 1px 7px; font-size: .72rem; margin-left: 5px;
}
.gr-add-btn {
  padding: 4px 10px; border-radius: 7px; border: none;
  background: #0d9488; color: #fff; font-size: .78rem; cursor: pointer;
}
.gr-add-btn:hover { background: #0f766e; }
.gr-folder-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
.gr-empty-folders { padding: 20px 12px; color: #9ca3af; font-size: .82rem; text-align: center; }
.gr-folder-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 9px; cursor: pointer; margin-bottom: 3px; transition: background .12s;
}
.gr-folder-row:hover { background: #f0fdfa; }
.gr-folder-active { background: #ccfbf1 !important; }
.gr-folder-icon { font-size: 1.1rem; flex-shrink: 0; }
.gr-folder-info { flex: 1; overflow: hidden; }
.gr-folder-name { display: block; font-size: .88rem; font-weight: 600; color: #134e4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-folder-qc { display: block; font-size: .75rem; color: #9ca3af; }
.gr-folder-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.gr-folder-row:hover .gr-folder-actions { opacity: 1; }
.gr-folder-edit-btn, .gr-folder-del-btn {
  background: none; border: none; cursor: pointer; font-size: .9rem; padding: 2px 4px; border-radius: 4px;
}
.gr-folder-edit-btn:hover { color: #0d9488; }
.gr-folder-del-btn:hover { color: #dc2626; }
.gr-new-folder-form { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; }
.gr-folder-group { display: flex; flex-direction: column; }
.gr-folder-child { padding-left: 24px !important; background: #f8fffe; }
.gr-folder-child:hover { background: #f0fdfa; }
.gr-folder-toggle { font-size: .75rem; color: #9ca3af; flex-shrink: 0; width: 1.1rem; text-align: center; }
.gr-folder-addsub-btn { background: none; border: none; cursor: pointer; color: #10b981; font-size: 1rem; font-weight: 700; padding: 2px 4px; border-radius: 4px; line-height: 1; }
.gr-folder-addsub-btn:hover { color: #059669; background: #d1fae5; }
.gr-folder-form-lbl { font-size: .75rem; color: #6b7280; margin-bottom: 4px; font-weight: 600; }
.gr-folder-name-inp {
  width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 7px;
  font-size: .85rem; outline: none; box-sizing: border-box; margin-bottom: 6px;
}
.gr-folder-name-inp:focus { border-color: #0d9488; }
.gr-folder-form-btns { display: flex; gap: 6px; }
.gr-save-btn {
  padding: 4px 12px; border-radius: 6px; border: none;
  background: #0d9488; color: #fff; font-size: .8rem; cursor: pointer;
}
.gr-save-btn:hover { background: #0f766e; }
.gr-cancel-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #fff; color: #6b7280; font-size: .8rem; cursor: pointer;
}

/* Content head */
.gr-content-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px;
  border-bottom: 1px solid #e2e8f0; flex-shrink: 0; flex-wrap: wrap;
}
.gr-content-icon { font-size: 1.5rem; flex-shrink: 0; }
.gr-content-title-wrap { flex: 1; overflow: hidden; }
.gr-content-title { display: block; font-size: 1rem; font-weight: 700; color: #134e4a; }
.gr-content-count { font-size: .78rem; color: #9ca3af; }
.gr-quiz-start-btn {
  padding: 7px 16px; border-radius: 8px; border: none;
  background: #0d9488; color: #fff; font-size: .85rem; cursor: pointer; font-weight: 600;
}
.gr-quiz-start-btn:hover { background: #0f766e; }
.gr-add-q-btn {
  padding: 7px 14px; border-radius: 8px; border: none;
  background: #8b5cf6; color: #fff; font-size: .85rem; cursor: pointer;
}
.gr-add-q-btn:hover { background: #7c3aed; }

/* Add question form */
.gr-add-q-form { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; }
.gr-form-hint {
  font-size: .8rem; color: #6b7280; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 7px; padding: 8px 10px; margin-bottom: 8px; line-height: 1.6;
}
.gr-form-hint code { background: #e2e8f0; border-radius: 3px; padding: 0 4px; font-size: .78rem; }
.gr-q-inp {
  width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: .85rem; resize: vertical; box-sizing: border-box; outline: none; line-height: 1.6;
}
.gr-q-inp:focus { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,.1); }
.gr-form-actions { display: flex; gap: 7px; margin-top: 7px; }

/* Scroll body */
.gr-scroll-body { flex: 1; overflow-y: auto; padding: 12px 16px; min-height: 0; }
.gr-empty { color: #9ca3af; font-size: .88rem; padding: 20px 0; text-align: center; }
.gr-user-quiz-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 60px 20px; }
.gr-user-quiz-icon { font-size: 3rem; }
.gr-user-quiz-msg { font-size: 1rem; color: #4b5563; font-weight: 500; }
.gr-user-quiz-btn { padding: 12px 32px; background: #7c3aed; color: #fff; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; }
.gr-user-quiz-btn:hover { background: #6d28d9; }

/* Question cards (browse) */
.gr-q-list { display: flex; flex-direction: column; gap: 10px; }
.gr-q-card {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 11px 13px;
  transition: border-color .15s;
}
.gr-q-card:hover { border-color: #99f6e4; }
.gr-q-card-top { display: flex; align-items: flex-start; gap: 8px; }
.gr-q-badge {
  display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 7px;
  border-radius: 5px; flex-shrink: 0; margin-top: 1px;
}
.gr-q-badge-mc   { background: #dbeafe; color: #1d4ed8; }
.gr-q-badge-fill { background: #ede9fe; color: #6d28d9; }
.gr-q-num { font-size: .8rem; color: #9ca3af; flex-shrink: 0; margin-top: 2px; }
.gr-q-text-preview { flex: 1; font-size: .88rem; color: #374151; line-height: 1.5; }
.gr-blank-preview { background: #fef9c3; border-bottom: 2px solid #fbbf24; padding: 0 4px; border-radius: 2px; }
.gr-q-card-actions { display: flex; gap: 3px; flex-shrink: 0; }
.gr-q-del-btn { background: none; border: none; cursor: pointer; color: #d1d5db; font-size: .9rem; padding: 1px 4px; }
.gr-q-del-btn:hover { color: #dc2626; }
.gr-opts-preview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.gr-opt-preview {
  padding: 3px 9px; border-radius: 5px; background: #f1f5f9; color: #475569;
  font-size: .8rem; border: 1px solid #e2e8f0;
}
.gr-opt-preview-correct { background: #dcfce7; color: #166534; border-color: #4ade80; font-weight: 700; }
.gr-fill-ans-preview { font-size: .85rem; color: #374151; margin-top: 6px; }
.gr-fill-ans-preview b { color: #0f766e; }
.gr-q-trans-sm { font-size: .8rem; color: #9ca3af; font-style: italic; margin-top: 4px; }
.gr-q-expl-sm { font-size: .8rem; color: #6b7280; margin-top: 4px; }

/* Quiz mode */
.gr-quiz-wrap { display: flex; flex-direction: column; height: 100%; padding: 16px; box-sizing: border-box; gap: 14px; }
.gr-quiz-header { flex-shrink: 0; }
.gr-quiz-prog-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.gr-quiz-prog-fill { height: 100%; background: linear-gradient(to right,#0d9488,#14b8a6); border-radius: 3px; transition: width .3s; }
.gr-quiz-meta { display: flex; align-items: center; gap: 10px; }
.gr-quiz-pos { font-size: .88rem; color: #6b7280; flex: 1; }
.gr-quiz-score-live { font-size: .88rem; font-weight: 700; color: #0d9488; }
.gr-quiz-exit-btn {
  padding: 4px 10px; border-radius: 7px; border: 1px solid #d1d5db;
  background: #fff; color: #6b7280; font-size: .8rem; cursor: pointer;
}
.gr-quiz-exit-btn:hover { border-color: #f87171; color: #dc2626; }
.gr-quiz-card {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px;
  padding: 20px; overflow-y: auto; box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.gr-quiz-type-badge { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 5px; align-self: flex-start; }
.gr-quiz-question { font-size: 1.05rem; font-weight: 600; color: #134e4a; line-height: 1.6; }
.gr-quiz-blank { background: #fef9c3; border-bottom: 2px solid #f59e0b; padding: 0 6px; border-radius: 2px; }
.gr-quiz-trans { font-size: .88rem; color: #9ca3af; font-style: italic; }
.gr-mc-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gr-mc-btn {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1.5px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
  cursor: pointer; text-align: left; transition: all .12s; font-size: .9rem;
}
.gr-mc-btn:hover:not(:disabled) { border-color: #0d9488; background: #f0fdfa; }
.gr-mc-letter {
  width: 26px; height: 26px; border-radius: 50%; background: #e2e8f0; color: #475569;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.gr-mc-text { flex: 1; }
/* Per-option letter colors (A purple · B green · C amber · D red) */
.gr-mc-card .gr-mc-c0 .gr-mc-letter { background: #ede9fe; color: #7c3aed; }
.gr-mc-card .gr-mc-c1 .gr-mc-letter { background: #dcfce7; color: #16a34a; }
.gr-mc-card .gr-mc-c2 .gr-mc-letter { background: #fef3c7; color: #d97706; }
.gr-mc-card .gr-mc-c3 .gr-mc-letter { background: #fee2e2; color: #ef4444; }
.gr-mc-correct { border-color: #86efac !important; background: #f0fdf4 !important; }
.gr-mc-wrong { border-color: #fca5a5 !important; background: #fff1f2 !important; }
.gr-mc-tick { margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; }
.gr-mc-tick-x { background: #ef4444; }
.gr-fill-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.gr-fill-inp {
  flex: 1; min-width: 120px; padding: 9px 12px; border: 1.5px solid #d1d5db;
  border-radius: 9px; font-size: .9rem; outline: none;
}
.gr-fill-inp:focus { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,.1); }
.gr-fill-check-btn {
  padding: 9px 16px; border-radius: 9px; border: none;
  background: #0d9488; color: #fff; font-size: .88rem; cursor: pointer; font-weight: 600;
}
.gr-fill-check-btn:hover { background: #0f766e; }
.gr-fill-hint { color: #7c3aed; font-size: .9rem; font-weight: 600; opacity: .85; }
/* Fill in the blank & Multiple Choice — compact card (gọn như mẫu) */
.gr-fib-card, .gr-mc-card { gap: 0; max-width: 880px; margin: 0 auto; width: 100%; box-sizing: border-box; padding: 18px 26px 22px; }
.gr-fib-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef2f7; margin-bottom: 16px; }
.gr-fib-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #f3eefe; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.gr-fib-ic--mc { background: #ede9fe; }
.gr-mc-card .gr-fib-head { border-bottom-style: dashed; border-bottom-color: #e2e8f0; }
.gr-fib-htext { display: flex; flex-direction: column; }
.gr-fib-title { font-size: 1.02rem; font-weight: 800; color: #1e293b; line-height: 1.2; }
.gr-fib-sub { font-size: .82rem; color: #94a3b8; margin-top: 2px; }
.gr-fib-card .gr-quiz-question, .gr-mc-card .gr-quiz-question {
  font-family: 'Lora', Georgia, serif; font-size: 1.18rem; font-weight: 600; color: #1e293b;
  line-height: 1.55; text-align: center; margin: 2px auto 10px; max-width: 600px;
}
.gr-fib-card .gr-quiz-blank { background: none; border-bottom: 2px solid #6d28d9; color: transparent; padding: 0 22px; border-radius: 0; }
.gr-quiz-blank-hint { color: #6d28d9; font-weight: 700; font-style: normal; }
.gr-fib-card .gr-quiz-trans, .gr-mc-card .gr-quiz-trans { text-align: center; max-width: 600px; margin: 0 auto 14px; font-size: .82rem; }
/* MC options — phong cách thẻ bo tròn như mẫu */
.gr-mc-card .gr-mc-options { display: grid; grid-template-columns: 1fr 1fr; max-width: 680px; margin: 0 auto; gap: 12px; }
@media (max-width: 560px) { .gr-mc-card .gr-mc-options { grid-template-columns: 1fr; } }
.gr-mc-card .gr-mc-btn { padding: 15px 18px; border-radius: 14px; background: #fff; border: 1.5px solid #e5e7eb; gap: 15px; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.gr-mc-card .gr-mc-btn:hover:not(:disabled) { border-color: #0d9488; background: #f0fdfa; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13,148,136,.14); }
.gr-mc-card .gr-mc-letter { width: 36px; height: 36px; font-size: 1rem; font-weight: 800; background: #f1f5f9; }
.gr-mc-card .gr-mc-text { font-family: 'Lora', Georgia, serif; font-size: 1.08rem; color: #1e293b; }
.gr-mc-card .gr-kb-hint { justify-content: center; margin-top: 16px; }
.gr-fib-ans-label { font-size: 1rem; font-weight: 800; color: #1e293b; margin-bottom: 8px; }
.gr-fib-inp {
  width: 100%; box-sizing: border-box; flex: none; padding: 14px 16px;
  border: 1.5px solid #99e0d4; border-radius: 12px; font-size: 1rem; background: #fcfffe;
}
.gr-fib-check {
  display: block; margin: 22px auto 0; padding: 13px 30px; border-radius: 12px;
  font-size: 1rem; font-weight: 800; box-shadow: 0 6px 16px rgba(13,148,136,.28);
}
.gr-hint-toggle { font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; border: 1.5px solid #d1d5db; background: #f3f4f6; color: #6b7280; cursor: pointer; transition: all .15s; }
.gr-hint-toggle-on { background: #ede9fe; border-color: #7c3aed; color: #6d28d9; }
.gr-fill-result { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .95rem; margin-top: 4px; }
.gr-fill-ua-ok  { font-weight: 700; color: #16a34a; }
.gr-fill-ua-bad { font-weight: 700; color: #dc2626; text-decoration: line-through; }
.gr-fill-correct-ans { font-weight: 700; color: #16a34a; }
.gr-result-badge {
  padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: .92rem;
  align-self: flex-start;
}
.gr-result-ok   { background: #dcfce7; color: #15803d; }
.gr-result-fail { background: #fee2e2; color: #b91c1c; }
.gr-quiz-expl { font-size: .85rem; color: #374151; background: #fefce8; border-left: 3px solid #f59e0b; padding: 8px 12px; border-radius: 0 7px 7px 0; line-height: 1.7; }
.gr-expl-formula { font-weight: 700; color: #dc2626; }
.gr-expl-quote { color: #15803d; }

/* ── Result 3-card layout (Correct Answer / Grammar Explanation / Clues) ── */
.gr-res-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 14px 0 4px; align-items: start; }
@media (max-width: 760px) { .gr-res-cards { grid-template-columns: 1fr; } }
.gr-res-card { border-radius: 18px; padding: 18px 18px 20px; border: 1.5px solid transparent; }
.gr-res-answer  { background: #f0fdf4; border-color: #bbf7d0; }
.gr-res-grammar { background: #fffbeb; border-color: #fde68a; }
.gr-res-clues   { background: #eff6ff; border-color: #bfdbfe; }
.gr-res-card-hd { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px dotted #d1d5db; }
.gr-res-answer  .gr-res-card-hd { border-bottom-color: #bbf7d0; }
.gr-res-grammar .gr-res-card-hd { border-bottom-color: #fde68a; }
.gr-res-clues   .gr-res-card-hd { border-bottom-color: #bfdbfe; }
.gr-res-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; }
.gr-res-ic-ok   { background: #22c55e; }
.gr-res-ic-gram { background: #fcd34d; color: #92400e; }
.gr-res-ic-clue { background: #bfdbfe; color: #1d4ed8; }
.gr-res-card-title { font-size: .9rem; font-weight: 800; white-space: nowrap; }
.gr-res-answer  .gr-res-card-title { color: #15803d; }
.gr-res-grammar .gr-res-card-title { color: #b45309; }
.gr-res-clues   .gr-res-card-title { color: #1d4ed8; }
.gr-res-answer-box { background: #fff; border-radius: 14px; padding: 22px 14px; text-align: center; box-shadow: 0 2px 8px rgba(22,163,74,.08); }
.gr-res-answer-word { font-family: 'Lora', Georgia, serif; font-size: 1.7rem; font-weight: 800; color: #16a34a; word-break: break-word; }
.gr-res-answer-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; font-size: .9rem; color: #166534; line-height: 1.5; }
.gr-res-star { color: #22c55e; flex: none; }
.gr-res-clues .gr-res-star { color: #3b82f6; }
.gr-res-row { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px; }
.gr-res-row:last-child { margin-bottom: 0; }
.gr-res-row-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: #fef3c7; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.gr-res-clues .gr-res-row-ic { background: #dbeafe; }
.gr-res-row-tx { flex: 1; min-width: 0; }
.gr-res-row-label { font-weight: 800; color: #1e293b; font-size: .95rem; line-height: 1.4; }
.gr-res-row-sub { color: #475569; font-size: .9rem; margin-top: 2px; line-height: 1.45; }
.gr-res-transform b { color: #16a34a; }
.gr-res-formula-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.gr-res-formula-label { font-weight: 800; color: #92400e; font-size: .92rem; }
.gr-res-formula-val { display: inline-block; background: #fff7ed; border: 1.5px solid #fdba74; color: #c2410c; font-weight: 800; padding: 5px 12px; border-radius: 8px; font-size: .95rem; letter-spacing: .3px; font-family: 'Courier New', monospace; }
.gr-res-expl-text { font-size: .9rem; color: #475569; line-height: 1.7; }
.gr-res-expl-text .gr-expl-quote { color: #b45309; font-weight: 700; }
.gr-res-clues .gr-res-expl-text { color: #334155; }
.gr-res-clues .gr-res-expl-text .gr-expl-quote { color: #1d4ed8; }
.gr-res-clue-row { display: flex; align-items: flex-start; gap: 11px; background: #fff; border-radius: 12px; padding: 11px 13px; margin-bottom: 11px; box-shadow: 0 1px 4px rgba(59,130,246,.08); }
.gr-res-clue-ph { font-weight: 800; color: #1e293b; font-size: .95rem; word-break: break-word; }
.gr-res-clue-vi { color: #64748b; font-size: .88rem; margin-top: 1px; }
.gr-res-clue-note { display: flex; align-items: flex-start; gap: 7px; background: #dbeafe; border-radius: 12px; padding: 11px 13px; font-size: .9rem; color: #1e40af; line-height: 1.5; margin-top: 3px; }
.gr-quiz-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: auto; }
.gr-kb-hint {
  font-size: .75rem; color: #9ca3af; display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
}
.gr-kb-hint kbd {
  display: inline-block; padding: 1px 6px; background: #f1f5f9; border: 1px solid #cbd5e1;
  border-bottom-width: 2px; border-radius: 4px; font-size: .72rem; font-family: inherit;
  color: #475569; line-height: 1.5;
}
.gr-quiz-next-btn {
  padding: 9px 22px; border-radius: 9px; border: none;
  background: #0d9488; color: #fff; font-size: .9rem; cursor: pointer; font-weight: 600;
}
.gr-quiz-next-btn:hover { background: #0f766e; }
.gr-quiz-back-btn { padding: 9px 18px; border-radius: 9px; border: 1.5px solid #d1d5db; background: #f9fafb; color: #374151; font-size: .9rem; cursor: pointer; font-weight: 600; }
.gr-quiz-back-btn:hover { background: #f3f4f6; border-color: #9ca3af; }

/* Results screen */
.gr-result-screen {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 30px;
}
.gr-result-emoji { font-size: 3.5rem; }
.gr-result-title { font-size: 1.4rem; font-weight: 800; color: #134e4a; }
.gr-result-score { font-size: 2.8rem; font-weight: 900; color: #0d9488; }
.gr-result-of { font-size: 1.5rem; color: #9ca3af; }
.gr-result-pct { font-size: 1rem; color: #9ca3af; }
.gr-result-btns { display: flex; gap: 12px; margin-top: 10px; }
.gr-retry-btn {
  padding: 10px 24px; border-radius: 10px; border: none;
  background: #0d9488; color: #fff; font-size: .92rem; cursor: pointer; font-weight: 600;
}
.gr-retry-btn:hover { background: #0f766e; }
.gr-browse-btn {
  padding: 10px 20px; border-radius: 10px; border: 1.5px solid #d1d5db;
  background: #fff; color: #6b7280; font-size: .92rem; cursor: pointer;
}
.gr-browse-btn:hover { background: #f3f4f6; }

/* ── RANDOMIZER OVERLAY ── */
.rz-overlay {
  display: none; position: fixed; inset: 0;
  background: #f9fafb; z-index: 9998;
  flex-direction: column; overflow: hidden;
}
.rz-overlay.active { display: flex; }
.rz-init-loader {
  display: none; position: absolute; inset: 0; z-index: 10;
  background: #f9fafb; align-items: center; justify-content: center;
  gap: 12px; font-size: .95rem; color: #6b7280; font-weight: 500;
}
@keyframes rz-spin { to { transform: rotate(360deg); } }
.rz-init-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid #e5e7eb; border-top-color: #7c3aed;
  animation: rz-spin .7s linear infinite;
}
.rz-header {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.rz-back-btn {
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid #d1d5db; background: #fff;
  font-size: .85rem; cursor: pointer; color: #374151;
}
.rz-back-btn:hover { background: #f3f4f6; }
.rz-title { font-size: 1.1rem; font-weight: 700; color: #1f2937; }

/* ── Draw toolbar ── */
.rz-draw-toolbar { display: flex; align-items: center; gap: 6px; }
.rz-draw-sep     { display: flex; align-items: center; gap: 4px; }
.rz-draw-toggle-btn {
  padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  border: 1.5px solid #d1d5db; background: #f3f4f6; color: #374151;
  cursor: pointer; transition: all .14s;
}
.rz-draw-toggle-btn:hover  { background: #fef3c7; border-color: #fbbf24; }
.rz-draw-toggle-btn.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.rz-draw-color {
  width: 30px; height: 28px; border: 1.5px solid #d1d5db; border-radius: 6px;
  padding: 2px; cursor: pointer; background: none;
}
.rz-draw-sz-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid #d1d5db;
  background: #fff; font-size: .85rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.rz-draw-sz-btn:hover { background: #f3f4f6; }
.rz-draw-clear-btn {
  padding: 4px 10px; border-radius: 6px; border: 1.5px solid #fca5a5;
  background: #fff; color: #dc2626; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .14s;
}
.rz-draw-clear-btn:hover { background: #fee2e2; }
.rz-text-toggle-btn {
  padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  border: 1.5px solid #d1d5db; background: #f3f4f6; color: #374151;
  cursor: pointer; transition: all .14s;
}
.rz-text-toggle-btn:hover  { background: #ede9fe; border-color: #a78bfa; }
.rz-text-toggle-btn.active { background: #ede9fe; border-color: #7c3aed; color: #5b21b6; }
.rz-text-sep { display: flex; align-items: center; gap: 4px; }
.rz-text-font {
  height: 28px; border: 1.5px solid #d1d5db; border-radius: 6px;
  font-size: .78rem; padding: 0 4px; background: #fff; cursor: pointer;
  outline: none;
}
.rz-text-font:focus { border-color: #7c3aed; }
.rz-text-size-lbl {
  min-width: 22px; text-align: center; font-size: .8rem; font-weight: 700;
  color: #374151;
}
.rz-text-input-overlay {
  position: fixed; background: rgba(255,255,255,.88);
  border: none; border-bottom: 2px dashed #7c3aed;
  outline: none; min-width: 80px; max-width: 480px;
  z-index: 10001; padding: 2px 6px; box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.rz-text-erase-btn {
  padding: 4px 10px; border-radius: 6px; border: 1.5px solid #fca5a5;
  background: #fff; color: #dc2626; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .14s;
}
.rz-text-erase-btn:hover  { background: #fee2e2; }
.rz-text-erase-btn.active { background: #fee2e2; border-color: #ef4444; }
.rz-gpt-btn {
  padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  border: 1.5px solid #6ee7b7; background: #f0fdf4; color: #065f46;
  cursor: pointer; transition: all .14s; white-space: nowrap;
}
.rz-gpt-btn:hover { background: #d1fae5; border-color: #10b981; }

.rz-spelling-btn {
  padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  border: 1.5px solid #a5b4fc; background: #eef2ff; color: #3730a3;
  cursor: pointer; transition: all .14s; white-space: nowrap;
}
.rz-spelling-btn:hover { background: #e0e7ff; border-color: #818cf8; }

/* Spelling full-page screen */
.sp-overlay { background: #f0f4ff; }
.sp-body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.sp-card {
  background: #fff; border-radius: 20px; box-shadow: 0 6px 32px rgba(99,102,241,.13);
  padding: 32px 36px; width: 100%; max-width: 580px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.sp-play-btn {
  width: 80px; height: 80px; border-radius: 50%; font-size: 2.2rem;
  background: #eef2ff; border: 2.5px solid #a5b4fc; cursor: pointer;
  transition: all .15s; display: flex; align-items: center; justify-content: center;
}
.sp-play-btn:hover { background: #e0e7ff; border-color: #6366f1; transform: scale(1.07); }
.sp-play-label { font-size: .8rem; color: #9ca3af; margin-top: -10px; }
.sp-input {
  width: 100%; padding: 12px 16px; border: 2px solid #d1d5db; border-radius: 12px;
  font-size: 1.2rem; outline: none; text-align: center; box-sizing: border-box;
  transition: border-color .15s; letter-spacing: .05em;
}
.sp-input:focus { border-color: #818cf8; }
.sp-btns { display: flex; gap: 10px; width: 100%; }
.sp-hint-btn {
  flex: 1; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #d1d5db;
  background: #f9fafb; font-size: .88rem; font-weight: 600; color: #374151; cursor: pointer;
  transition: all .14s;
}
.sp-hint-btn.active,
.sp-hint-btn:hover { background: #fef9c3; border-color: #fbbf24; color: #92400e; }
.sp-mic-btn {
  flex: 1; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #10b981;
  background: #ecfdf5; color: #065f46; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: all .14s;
}
.sp-mic-btn:hover { background: #d1fae5; }
.sp-mic-btn.sp-mic-active { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.sp-check-btn {
  flex: 1; padding: 10px 12px; border-radius: 10px; border: 2px solid #6366f1;
  background: #6366f1; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: all .14s;
}
.sp-check-btn:hover { background: #4f46e5; border-color: #4f46e5; }
.sp-finish {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 24px; text-align: center;
}
.sp-finish-icon { font-size: 3rem; }
.sp-finish-title { font-size: 1.4rem; font-weight: 800; color: #1e293b; }
.sp-finish-score { font-size: 1.1rem; font-weight: 700; color: #6366f1; }
.sp-finish-restart {
  padding: 10px 28px; border-radius: 10px; border: 2px solid #6366f1;
  background: #6366f1; color: #fff; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.sp-finish-close {
  padding: 8px 20px; border-radius: 10px; border: 1.5px solid #d1d5db;
  background: #f9fafb; color: #6b7280; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.sp-opts-row { width: 100%; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.sp-auto-lbl {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .8rem; font-weight: 600; color: #6366f1; cursor: pointer;
}
.sp-auto-lbl input { cursor: pointer; accent-color: #6366f1; width: 15px; height: 15px; }
.sp-hint {
  width: 100%; background: #fefce8; border: 1px solid #fde68a; border-radius: 12px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 5px;
}
.sp-hint-vi { font-weight: 600; color: #1e293b; font-size: .95rem; }
.sp-hint-en { color: #4b5563; font-size: .85rem; font-style: italic; }
.sp-result {
  width: 100%; text-align: center; padding: 12px 16px; border-radius: 12px;
  font-size: 1rem; font-weight: 600;
}
.sp-correct { background: #dcfce7; color: #166534; border: 1.5px solid #86efac; }
.sp-wrong   { background: #fee2e2; color: #991b1b; border: 1.5px solid #fca5a5; }
.sp-result-ipa { font-size: .82rem; font-weight: 500; opacity: .75; margin-top: 4px; }
.sp-result-def { font-size: .85rem; font-weight: 600; margin-top: 2px; }
.sp-card { position: relative; }
.sp-score-badge {
  position: absolute; top: 0; right: 0;
  background: #6366f1; color: #fff;
  font-size: .75rem; font-weight: 800;
  padding: 3px 10px; border-radius: 0 18px 0 12px;
  letter-spacing: .02em;
}
.sp-play-row { display: flex; align-items: center; gap: 14px; }
.sp-repeat-wrap { display: flex; align-items: center; gap: 6px; }
.sp-repeat-lbl { font-size: .78rem; font-weight: 600; color: #6b7280; white-space: nowrap; }
.sp-repeat-sel {
  padding: 4px 8px; border-radius: 8px; border: 1.5px solid #d1d5db;
  background: #f9fafb; font-size: .82rem; font-weight: 700; color: #374151;
  cursor: pointer; outline: none;
}
.sp-repeat-sel:focus { border-color: #818cf8; }
.sp-stop-btn {
  padding: 3px 7px; border-radius: 6px; border: 1.5px solid #fca5a5;
  background: #fee2e2; color: #dc2626; font-size: .75rem; cursor: pointer;
  line-height: 1; transition: background .12s;
}
.sp-stop-btn:hover { background: #fecaca; }
.sp-kb-hints {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  font-size: .72rem; color: #9ca3af; margin-top: 4px;
}
.sp-kb-hints kbd {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  border: 1px solid #d1d5db; background: #f3f4f6;
  font-family: inherit; font-size: .72rem; color: #374151;
  margin-right: 2px;
}
.sp-next-btn {
  width: 100%; padding: 11px; border-radius: 10px; border: 2px solid #6366f1;
  background: #fff; color: #6366f1; font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: all .14s;
}
.sp-next-btn:hover { background: #eef2ff; }

/* Translation toolbar button */
.rz-trans-btn {
  padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  border: 1.5px solid #6ee7b7; background: #ecfdf5; color: #065f46;
  cursor: pointer; transition: all .14s; white-space: nowrap;
}
.rz-trans-btn:hover { background: #d1fae5; border-color: #10b981; }

/* Translation full-page screen */
.tr-overlay { background: #f0fdf4; }
.rz-mc-overlay { background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%); align-items: center; justify-content: center; }
.rz-mc-inner { background: #fff; border-radius: 28px; width: 100%; max-width: 780px; position: relative; box-shadow: 0 32px 80px rgba(79,70,229,0.35), 0 8px 24px rgba(0,0,0,0.15); overflow: hidden; }
/* Progress track */
.rz-mc-prog-track { height: 5px; background: #e0e7ff; width: 100%; }
.rz-mc-prog-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7); border-radius: 0 99px 99px 0; transition: width .4s cubic-bezier(.4,0,.2,1); }
/* Top row */
.rz-mc-top-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 0; }
.rz-mc-progress { font-size: .72rem; font-weight: 800; color: #a78bfa; letter-spacing: .05em; text-transform: uppercase; }
.rz-mc-close { background: #f1f5f9; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: .85rem; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.rz-mc-close:hover { background: #e2e8f0; color: #1e293b; }
/* Body */
.rz-mc-body { padding: 16px 24px 24px; }
.rz-mc-qlabel { font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a78bfa; margin-bottom: 8px; }
.rz-mc-question { font-size: 1.15rem; color: #1e293b; font-weight: 800; line-height: 1.5; margin-bottom: 12px; text-align: center; min-height: 52px; }
/* Hint */
.rz-mc-hint { font-size: .82rem; color: #475569; font-style: italic; text-align: center; margin-bottom: 16px; background: linear-gradient(135deg,#f5f3ff,#ede9fe); border-radius: 12px; padding: 10px 14px; border-left: 3px solid #a78bfa; text-align: left; }
.rz-mc-blank { display: inline-block; min-width: 72px; border-bottom: 2px solid #7c3aed; vertical-align: bottom; margin: 0 3px; }
/* Choices */
.rz-mc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.rz-mc-choice { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 14px; border: 2px solid #e2e8f0; background: #f8fafc; font-size: .9rem; font-weight: 700; color: #1e293b; cursor: pointer; text-align: left; transition: all .18s; font-family: inherit; }
.rz-mc-choice-label { min-width: 24px; height: 24px; border-radius: 7px; background: #e0e7ff; color: #6366f1; font-size: .72rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .18s; }
.rz-mc-choice-text { flex: 1; text-align: center; }
.rz-mc-choice:hover:not(:disabled) { border-color: #818cf8; background: #eef2ff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(99,102,241,.15); }
.rz-mc-choice:hover:not(:disabled) .rz-mc-choice-label { background: #6366f1; color: #fff; }
.rz-mc-choice.correct { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: #22c55e; color: #15803d; }
.rz-mc-choice.correct .rz-mc-choice-label { background: #22c55e; color: #fff; }
.rz-mc-choice.wrong   { background: linear-gradient(135deg,#fff5f5,#fee2e2); border-color: #f87171; color: #dc2626; }
.rz-mc-choice.wrong   .rz-mc-choice-label { background: #f87171; color: #fff; }
.rz-mc-choice:disabled { cursor: default; transform: none !important; box-shadow: none !important; }
/* Feedback */
.rz-mc-feedback { text-align: center; padding: 4px 0 2px; }
.rz-mc-fb-label { font-size: 1rem; font-weight: 800; }
.rz-mc-feedback.correct .rz-mc-fb-label { color: #16a34a; }
.rz-mc-feedback.wrong   .rz-mc-fb-label { color: #dc2626; }
.rz-mc-info { margin-top: 10px; background: linear-gradient(135deg,#fafafa,#f1f5f9); border-radius: 14px; padding: 12px 16px; text-align: left; border: 1px solid #e2e8f0; }
.rz-mc-info-word { font-size: 1.15rem; font-weight: 900; color: #1e293b; margin-bottom: 2px; cursor: pointer; display: inline-block; }
.rz-mc-info-word:hover { color: #6366f1; }
.rz-mc-info-ipa { display: block; font-size: .85rem; color: #6366f1; font-weight: 700; margin-bottom: 5px; }
.rz-mc-info-colloc { font-size: .8rem; color: #374151; margin-bottom: 4px; padding: 3px 8px; background: #f0fdf4; border-radius: 6px; display: inline-block; }
.rz-mc-info-endef { font-size: .8rem; color: #475569; margin: 4px 0; line-height: 1.5; }
.rz-mc-info-ex { font-size: .78rem; color: #64748b; font-style: italic; margin-top: 4px; line-height: 1.5; }
.rz-mc-info-ex .rz-ex-hl { color: #ea580c; font-weight: 800; font-style: italic; }
/* Next button */
.rz-mc-next { display: block; width: 100%; padding: 14px; border-radius: 16px; border: none; background: linear-gradient(135deg,#6366f1,#7c3aed); color: #fff; font-size: .95rem; font-weight: 800; cursor: pointer; font-family: inherit; margin-top: 12px; letter-spacing: .02em; transition: all .18s; box-shadow: 0 4px 16px rgba(99,102,241,.4); }
.rz-mc-next:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,.5); }
.rz-mc-res-header { text-align: center; padding: 8px 0 14px; }
.rz-mc-res-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: 6px; }
.rz-mc-res-score { font-size: 3rem; font-weight: 900; line-height: 1; }
.rz-mc-res-total { font-size: 1.6rem; font-weight: 700; opacity: .6; }
.rz-mc-res-pct { font-size: .8rem; color: #6b7280; margin: 4px 0 10px; }
.rz-mc-res-bar { height: 8px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.rz-mc-res-bar-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
.rz-mc-res-section { margin-top: 10px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.rz-mc-res-sum { padding: 9px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.rz-mc-res-sum::-webkit-details-marker { display: none; }
.rz-mc-res-sum--wrong   { background: #fff5f5; color: #dc2626; }
.rz-mc-res-sum--correct { background: #f0fdf4; color: #15803d; }
.rz-mc-res-list { padding: 4px 10px 8px; max-height: 180px; overflow-y: auto; }
.rz-mc-res-row { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; flex-wrap: wrap; }
.rz-mc-res-row:last-child { border-bottom: none; }
.rz-mc-res-icon { font-size: .75rem; flex-shrink: 0; }
.rz-mc-res-word { font-weight: 800; font-size: .88rem; color: #1e293b; cursor: pointer; }
.rz-mc-res-word:hover { color: #7c3aed; }
.rz-mc-res-ipa { font-size: .75rem; color: #7c3aed; font-weight: 400; margin-left: 2px; }
.rz-mc-res-def { font-size: .75rem; color: #6b7280; margin-left: auto; text-align: right; max-width: 55%; }
.rz-mc-retry-btn { display: block; width: 100%; margin-top: 12px; padding: 11px; border-radius: 12px; border: none; background: #dc2626; color: #fff; font-size: .88rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.rz-mc-retry-btn:hover { background: #b91c1c; }
.rz-mc-next:hover { background: #6d28d9; }
.rz-mc-score { text-align: center; font-size: 1rem; font-weight: 800; color: #374151; padding-top: 10px; }
.rz-mc-btn { padding: 7px 14px; border-radius: 10px; border: 1.5px solid #7c3aed; background: transparent; color: #7c3aed; font-size: .82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s; }
.rz-mc-btn:hover { background: #7c3aed; color: #fff; }
.tr-body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 32px 24px; overflow-y: auto;
}
.tr-card {
  background: #fff; border-radius: 24px; box-shadow: 0 8px 40px rgba(16,185,129,.15);
  padding: 44px 40px; width: 100%; max-width: 680px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.tr-font-ctrl { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tr-font-btn {
  padding: 2px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 5px;
  background: rgba(255,255,255,.15); cursor: pointer; font-size: .75rem; font-weight: 700; color: #fff;
}
.tr-font-btn:hover { background: rgba(255,255,255,.3); }
.tr-font-sel {
  padding: 2px 4px; border: 1px solid rgba(255,255,255,.5); border-radius: 5px;
  background: rgba(255,255,255,.15); font-size: .75rem; color: #fff; cursor: pointer;
}
.tr-font-sel option { color: #1e293b; background: #fff; }
.tr-meaning {
  font-size: 1.7em; font-weight: 700; color: #1e293b; text-align: center; line-height: 1.5;
}
.tr-en-def {
  width: 100%; font-size: 1.05em; color: #374151; font-style: italic; text-align: left;
  background: #f8fafc; border-left: 3px solid #6ee7b7; border-radius: 10px;
  padding: 14px 18px; line-height: 1.7; letter-spacing: .01em;
}
.tr-record-btn {
  padding: 14px 48px; border-radius: 50px; font-size: 1.05rem; font-weight: 700;
  border: 2px solid #10b981; background: #ecfdf5; color: #065f46;
  cursor: pointer; transition: all .15s;
}
.tr-record-btn:hover { background: #d1fae5; border-color: #059669; }
.tr-record-btn.recording { background: #fee2e2; border-color: #ef4444; color: #991b1b; animation: tr-pulse .8s infinite; }
@keyframes tr-pulse { 0%,100%{ opacity:1 } 50%{ opacity:.6 } }
.tr-result {
  width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 14px; font-size: 1rem; font-weight: 600;
}
.tr-listening { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.tr-good  { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.tr-ok    { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.tr-bad   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.tr-error { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.tr-actions { display: flex; gap: 10px; width: 100%; }
.tr-answer-btn {
  flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid #d1d5db;
  background: #f9fafb; font-size: .88rem; font-weight: 600; color: #374151; cursor: pointer;
  transition: all .14s;
}
.tr-answer-btn.active,
.tr-answer-btn:hover { background: #fef9c3; border-color: #fbbf24; color: #92400e; }
.tr-next-btn {
  flex: 1; padding: 10px; border-radius: 10px; border: 2px solid #10b981;
  background: #10b981; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: all .14s;
}
.tr-next-btn:hover { background: #059669; border-color: #059669; }
.tr-answer {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.tr-answer-word {
  font-size: 1.5rem; font-weight: 800; color: #6366f1; letter-spacing: .03em;
}
.tr-answer-ipa {
  font-size: .95rem; color: #6b7280; font-style: italic; font-weight: 400;
}
.tr-answer-en-def {
  font-size: .88rem; color: #374151; margin-top: 2px; max-width: 320px;
}
.tr-answer-example {
  font-size: .82rem; color: #6b7280; max-width: 320px;
}
.tr-answer-colloc {
  font-size: .8rem; color: #9ca3af; max-width: 320px;
}

.sa-ex-all-btn {
  padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 700;
  border: 1.5px solid #bae6fd; background: #f0f9ff; color: #0369a1;
  cursor: pointer; transition: all .14s; white-space: nowrap;
}
.sa-ex-all-btn:hover { background: #e0f2fe; border-color: #0369a1; }
.sa-ex-all-btn.active { background: #0369a1; color: #fff; border-color: #0369a1; }
/* ChatGPT vocab dialog */
.rz-gpt-dialog {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.48);
}
.rz-gpt-dlg-inner {
  background: #fff; border-radius: 14px; width: 480px;
  box-shadow: 0 8px 36px rgba(0,0,0,.28); overflow: hidden;
}
.rz-gpt-dlg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; background: #10a37f; color: #fff;
  font-weight: 700; font-size: .95rem;
}
.rz-gpt-dlg-close {
  background: none; border: none; color: #fff; font-size: 1.1rem;
  cursor: pointer; opacity: .75; line-height: 1;
}
.rz-gpt-dlg-close:hover { opacity: 1; }
.rz-gpt-dlg-body {
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.rz-gpt-row {
  display: flex; gap: 10px; align-items: flex-end;
}
.rz-gpt-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rz-gpt-field-sm { display: flex; flex-direction: column; gap: 4px; }
.rz-gpt-label { font-size: .82rem; font-weight: 600; color: #374151; }
.rz-gpt-hint { font-weight: 400; color: #9ca3af; font-size: .76rem; }
.rz-gpt-input {
  width: 100%; padding: 8px 10px; border: 1.5px solid #d1d5db;
  border-radius: 8px; font-size: .88rem; outline: none; box-sizing: border-box;
}
.rz-gpt-input:focus { border-color: #10a37f; }
.rz-gpt-count {
  width: 72px; padding: 8px 10px; border: 1.5px solid #d1d5db;
  border-radius: 8px; font-size: .88rem; outline: none;
}
.rz-gpt-count:focus { border-color: #10a37f; }
.rz-gpt-prompt {
  width: 100%; padding: 9px 10px; border: 1.5px solid #e5e7eb;
  border-radius: 8px; font-size: .78rem; font-family: 'Courier New', monospace;
  outline: none; box-sizing: border-box; resize: vertical;
  background: #f9fafb; color: #374151; line-height: 1.55;
}
.rz-gpt-prompt:focus { border-color: #10a37f; background: #fff; }
.rz-gpt-open-btn {
  margin-top: 4px; padding: 11px; background: #10a37f; color: #fff;
  border: none; border-radius: 8px; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: background .14s; flex: 1;
}
.rz-gpt-open-btn:hover { background: #0d8a6a; }
.rz-gpt-copy-btn {
  margin-top: 4px; padding: 11px 16px; background: #f1f5f9; color: #374151;
  border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .14s; white-space: nowrap;
}
.rz-gpt-copy-btn:hover { background: #e2e8f0; }
/* VC ChatGPT button */
.vc-gpt-btn {
  padding: 6px 13px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  border: 1.5px solid #6ee7b7; background: #f0fdf4; color: #065f46;
  cursor: pointer; transition: all .14s; white-space: nowrap; flex-shrink: 0;
}
.vc-gpt-btn:hover { background: #d1fae5; border-color: #10b981; }
.vc-missing-ipa-btn { border-color: #c4b5fd; background: #f5f3ff; color: #6d28d9; }
.vc-missing-ipa-btn:hover { background: #ede9fe; border-color: #7c3aed; }
@media (max-width: 768px) { .vc-gpt-btn { display: none !important; } }
.vc-gpt-select {
  width: 100%; padding: 7px 10px; border: 1.5px solid #d1d5db;
  border-radius: 8px; font-size: .84rem; outline: none; background: #fff;
  cursor: pointer;
}
.vc-gpt-select:focus { border-color: #10a37f; }
.rz-text-layer {
  position: absolute; inset: 0; z-index: 101; pointer-events: none;
}
.rz-text-layer.rz-text-mode  { pointer-events: auto; cursor: text; }
.rz-text-layer.rz-erase-mode { pointer-events: auto; cursor: default; }
.rz-text-item {
  position: absolute; white-space: nowrap; user-select: none;
  line-height: 1.2; padding: 1px 3px; border-radius: 2px;
  cursor: move;
}
.rz-text-layer.rz-text-mode .rz-text-item:hover {
  outline: 2px dashed #7c3aed; background: rgba(124,58,237,.06);
}
.rz-text-item.rz-text-selected {
  outline: 2px solid #7c3aed; background: rgba(124,58,237,.08);
}
.rz-text-layer.rz-erase-mode .rz-text-item { cursor: pointer; }
.rz-text-layer.rz-erase-mode .rz-text-item:hover {
  outline: 2px dashed #ef4444; opacity: .55; text-decoration: line-through;
}
.rz-draw-canvas {
  display: none; position: absolute; inset: 0; z-index: 100;
  pointer-events: none;
}
.rz-draw-canvas.active { pointer-events: auto; }
.rz-body {
  display: flex; flex: 1; gap: 0;
  overflow: hidden; position: relative;
}

/* Left panel */
.rz-input-panel {
  display: flex; flex-direction: column;
  width: 360px; min-width: 220px;
  padding: 18px 16px;
  background: #fff;
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
}
.rz-body.rz-resizing { user-select: none; cursor: col-resize; }
.rz-panel-lbl { font-size: .78rem; font-weight: 700; color: #6b7280; letter-spacing: .05em; }
.rz-count { margin-left: 6px; font-size: .72rem; color: #7c3aed; font-weight: 800; }
.rz-textarea {
  flex: 1; resize: none; border: 1.5px solid #d1d5db;
  border-radius: 10px; padding: 10px 12px;
  font-size: .9rem; color: #111827; line-height: 1.7;
  outline: none; font-family: inherit;
}
.rz-textarea:focus { border-color: #7c3aed; }
/* tree replaces old saved-row/saved-select/del-saved-btn */
.rz-input-actions { display: flex; gap: 6px; }
.rz-clear-btn, .rz-shuffle-btn, .rz-folder-load-btn {
  flex: 1; padding: 6px 0; border-radius: 8px;
  border: 1.5px solid #e5e7eb; background: #f9fafb;
  font-size: .75rem; cursor: pointer; color: #374151;
  transition: all .14s;
}
.rz-clear-btn:hover        { background: #fee2e2; border-color: #f87171; color: #b91c1c; }
.rz-shuffle-btn:hover      { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
.rz-folder-load-btn:hover  { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.rz-studynow-btn { flex: 1.4; padding: 6px 0; border-radius: 8px; border: none; background: linear-gradient(135deg,#7c3aed,#6d28d9); color: #fff; font-size: .78rem; font-weight: 800; cursor: pointer; transition: filter .14s; box-shadow: 0 3px 10px rgba(124,58,237,.32); }
.rz-studynow-btn:hover { filter: brightness(1.08); }
.rz-no-ex-notice {
  margin: 4px 0 2px; padding: 5px 10px;
  border-radius: 8px;
  background: #fff7ed; border: 1.5px solid #fb923c;
  color: #7c2d12; font-size: .76rem; line-height: 1.5;
}
.rz-no-ex-icon { margin-right: 4px; }
.rz-no-ex-lbl { font-weight: 700; margin-right: 4px; }
.rz-no-ex-words { word-break: break-word; color: #9a3412; }
.rz-folder-warn {
  margin-top: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  color: #92400e;
  font-size: .78rem;
  font-weight: 600;
  animation: rzWarnPop .2s ease;
}
.rz-folder-ok {
  background: #d1fae5;
  border-color: #10b981;
  color: #065f46;
}
@keyframes rzWarnPop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rz-save-row { display: flex; gap: 6px; margin-top: 8px; }
.rz-save-name-inp {
  flex: 1; padding: 7px 10px;
  background: #f9fafb; color: #374151;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: .82rem; outline: none; font-family: inherit;
}
.rz-save-name-inp:focus { border-color: #7c3aed; }
.rz-save-btn {
  padding: 7px 16px; border-radius: 8px;
  background: #ede9fe; color: #5b21b6;
  border: 1.5px solid #c4b5fd; font-size: .82rem;
  cursor: pointer; font-weight: 700; white-space: nowrap;
  transition: all .14s;
}
.rz-save-btn:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* Folder tree system */
.rz-tree-toolbar { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.rz-toolbar-row { display: flex; gap: 6px; align-items: center; }
.rz-toolbar-row-folder .rz-new-folder-inp { flex: 1; min-width: 0; }
.rz-new-folder-inp {
  flex: 1; min-width: 0; padding: 6px 8px;
  background: #f9fafb; color: #374151;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: .82rem; outline: none; font-family: inherit;
}
.rz-new-folder-inp:focus { border-color: #7c3aed; }
.rz-add-folder-btn {
  padding: 6px 11px; border-radius: 8px;
  background: #ede9fe; color: #5b21b6;
  border: 1.5px solid #c4b5fd; font-size: 1rem; font-weight: 700;
  cursor: pointer; line-height: 1; transition: all .14s; flex-shrink: 0;
}
.rz-add-folder-btn:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.rz-add-root-btn {
  padding: 6px 9px; border-radius: 8px; font-size: .88rem;
  background: #f0fdf4; color: #15803d;
  border: 1.5px solid #86efac; cursor: pointer;
  transition: all .14s; flex-shrink: 0;
}
.rz-add-root-btn:hover { background: #15803d; color: #fff; border-color: #15803d; }
.rz-del-folder-btn {
  padding: 6px 9px; border-radius: 8px;
  background: #fff0f0; color: #dc2626;
  border: 1.5px solid #fca5a5; font-size: .88rem; cursor: pointer;
  transition: all .14s; flex-shrink: 0;
}
.rz-del-folder-btn:hover { background: #fee2e2; border-color: #f87171; }
.rz-undo-btn {
  padding: 4px 7px; border-radius: 7px; border: 1.5px solid #e5e7eb;
  background: #f9fafb; color: #374151; font-size: .9rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: all .13s; line-height: 1;
}
.rz-undo-btn:hover:not(:disabled) { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.rz-undo-btn:disabled { opacity: .35; cursor: default; }
.rz-tree-zoom-btn {
  padding: 4px 7px; border-radius: 7px; border: 1.5px solid #e5e7eb;
  background: #f9fafb; color: #374151; font-size: .8rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: all .13s; line-height: 1;
}
.rz-tree-zoom-btn:hover { background: #ede9fe; border-color: #a78bfa; color: #5b21b6; }
.rz-move-btn {
  padding: 4px 8px; border-radius: 7px; border: 1.5px solid #f59e0b;
  background: #fef3c7; color: #92400e; font-size: .8rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: all .13s; line-height: 1;
}
.rz-move-btn:hover { background: #fde68a; border-color: #d97706; color: #78350f; }
.rz-cancel-move-btn {
  padding: 2px 8px; border-radius: 5px; border: 1.5px solid #ef4444;
  background: #fff; color: #dc2626; font-size: .78rem; font-weight: 700;
  cursor: pointer; margin-left: 6px; line-height: 1;
}
.rz-cancel-move-btn:hover { background: #fee2e2; }
.rz-tree-row.multi-selected { background: #fef9c3 !important; }
.rz-tree-row.multi-selected .rz-tree-name { color: #92400e; }
.rz-move-mode .rz-tree-row:not(.rz-tree-row.multi-selected):hover { background: #dcfce7 !important; cursor: cell; }
.rz-folder-info {
  background: #eff6ff; color: #1d4ed8;
  border: 1.5px solid #93c5fd; border-radius: 8px;
  padding: 5px 10px; font-size: .78rem; font-weight: 600;
}
.rz-folder-ok {
  background: #f0fdf4; color: #15803d;
  border: 1.5px solid #86efac; border-radius: 8px;
  padding: 5px 10px; font-size: .78rem; font-weight: 600;
}
.rz-tree-hint {
  font-size: .7rem; color: #9ca3af; padding: 3px 4px 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rz-tree-hint-move {
  font-weight: 600; color: #b45309;
}
.rz-search-toggle-btn {
  padding: 4px 8px; border-radius: 7px; border: 1.5px solid #e5e7eb;
  background: #f9fafb; color: #374151; font-size: .85rem;
  cursor: pointer; flex-shrink: 0; transition: all .13s; line-height: 1;
}
.rz-search-toggle-btn:hover,
.rz-search-toggle-btn.active { background: #ede9fe; border-color: #a78bfa; color: #5b21b6; }
.rz-progress-btn {
  padding: 4px 9px; border-radius: 7px; border: 1.5px solid #bae6fd;
  background: #f0f9ff; color: #0369a1; font-size: .82rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: all .13s; white-space: nowrap;
}
.rz-progress-btn:hover { background: #e0f2fe; border-color: #7dd3fc; }

/* Progress overlay */
.rz-progress-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,15,30,.6); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 16px;
}
.rz-progress-overlay.active { display: flex; }
.rz-progress-panel {
  background: #fff; border-radius: 18px; width: min(560px, 96vw);
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.22); overflow: hidden;
}
.rz-prog-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px; border-bottom: 1.5px solid #f1f5f9;
  flex-shrink: 0;
}
.rz-prog-topbar-title { font-size: 1rem; font-weight: 800; color: #0f172a; }
.rz-prog-topbar-actions { display: flex; gap: 6px; align-items: center; }
.rz-prog-clear-btn {
  padding: 4px 10px; border-radius: 7px; border: 1.5px solid #fecaca;
  background: #fff1f2; color: #b91c1c; font-size: .75rem; font-weight: 700; cursor: pointer;
}
.rz-prog-close-btn {
  padding: 4px 10px; border-radius: 7px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #475569; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.rz-prog-body { overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.rz-prog-empty { text-align: center; color: #94a3b8; font-size: .9rem; padding: 32px 0; line-height: 1.8; }
.rz-prog-item {
  border: 1.5px solid #e2e8f0; border-radius: 12px; overflow: hidden;
}
.rz-prog-item-hdr {
  background: #f8fafc; padding: 8px 14px 7px; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.rz-prog-item-name { font-size: .9rem; font-weight: 800; color: #0f172a; }
.rz-prog-item-folder { font-size: .72rem; color: #94a3b8; }
.rz-prog-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.rz-prog-row:last-child { border-bottom: none; }
.rz-prog-type {
  font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 5px;
  white-space: nowrap; flex-shrink: 0;
}
.rz-prog-type-learn { background: #dbeafe; color: #1d4ed8; }
.rz-prog-type-test  { background: #fef3c7; color: #92400e; }
.rz-prog-stat { font-size: .82rem; font-weight: 700; flex: 1; }
.rz-prog-date { font-size: .70rem; color: #94a3b8; white-space: nowrap; }
.rz-search-panel {
  border: 1.5px solid #e5e7eb; border-radius: 9px;
  background: #fff; overflow: hidden; margin-bottom: 4px;
}
.rz-search-inp {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px; font-size: .82rem; border: none;
  border-bottom: 1.5px solid #e5e7eb; outline: none;
  background: #f9fafb;
}
.rz-search-inp:focus { background: #fff; border-color: #a78bfa; }
.rz-search-results { max-height: 180px; overflow-y: auto; }
.rz-search-item {
  padding: 5px 10px; cursor: pointer; border-bottom: 1px solid #f3f4f6;
  transition: background .1s;
}
.rz-search-item:last-child { border-bottom: none; }
.rz-search-item:hover { background: #f5f3ff; }
.rz-search-word { font-size: .8rem; font-weight: 600; color: #1f2937; }
.rz-search-word mark { background: #fde68a; color: #92400e; border-radius: 2px; padding: 0 1px; font-style: normal; }
.rz-search-path { font-size: .71rem; color: #6b7280; margin-top: 1px; }
.rz-search-empty, .rz-search-more {
  padding: 8px 12px; font-size: .78rem; color: #9ca3af; text-align: center;
}
.rz-tree-wrap {
  overflow-y: auto; height: 210px; flex-shrink: 0;
  border: 1.5px solid #e5e7eb; border-radius: 10px;
  background: #f9fafb;
}
.rz-v-resizer {
  height: 7px; flex-shrink: 0; cursor: row-resize;
  background: transparent; border-radius: 4px;
  position: relative; margin: 0 -4px;
  transition: background .15s;
}
.rz-v-resizer::after {
  content: ''; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 32px; height: 3px; border-radius: 99px;
  background: #d1d5db; transition: background .15s;
}
.rz-v-resizer:hover::after,
.rz-v-resizer.dragging::after { background: #7c3aed; }
.rz-input-panel.rz-vresizing { user-select: none; cursor: row-resize; }
.rz-tree { padding: 3px 0; min-height: 36px; }
.rz-tree-empty {
  padding: 10px 12px; color: #9ca3af; font-size: .78rem; font-style: italic;
}
.rz-tree-cb {
  flex-shrink: 0; width: 14px; height: 14px; cursor: pointer;
  accent-color: #7c3aed; margin-right: 2px;
}
.rz-tree-row {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 8px; cursor: pointer; border-radius: 11px;
  margin: 2px 4px; transition: background .1s; user-select: none;
}
.rz-tree-row:hover { background: #f1f5f9; }
.rz-tree-row.selected { background: #ede9fe; }
.rz-tree-arrow {
  width: 16px; text-align: center; font-size: 1rem;
  color: #6b7280; cursor: pointer; flex-shrink: 0;
  font-weight: 700; line-height: 1;
}
.rz-tree-icon {
  width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1;
}
.rz-ic-d1 { background: #ede9fe; }  /* tím */
.rz-ic-d2 { background: #dbeafe; }  /* xanh dương */
.rz-ic-d3 { background: #dcfce7; }  /* xanh lá */
.rz-ic-d4 { background: #ffedd5; }  /* cam */
.rz-tree-name {
  flex: 1; font-size: .82rem; color: #1e293b; font-weight: 700;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rz-tree-row.selected .rz-tree-name { color: #5b21b6; }
.rz-tree-count {
  font-size: .68rem; color: #64748b; font-weight: 800; flex-shrink: 0;
  margin-left: auto; background: #eef2f7; border-radius: 999px; padding: 2px 9px;
}
.rz-tree-lock { font-size: .72rem; flex-shrink: 0; opacity: .5; margin-left: 2px; }
.rz-tree-del-btn, .rz-tree-up-btn {
  opacity: 0; padding: 2px 5px; border-radius: 4px;
  background: transparent; border: none;
  font-size: .75rem; cursor: pointer; flex-shrink: 0;
  transition: opacity .1s, background .1s; line-height: 1;
}
.rz-tree-del-btn { color: #dc2626; }
.rz-tree-up-btn  { color: #7c3aed; font-weight: 700; font-size: .85rem; }
.rz-tree-rename-btn { color: #2563eb; }
.rz-tree-row:hover .rz-tree-del-btn,
.rz-tree-row:hover .rz-tree-up-btn,
.rz-tree-row:hover .rz-tree-rename-btn,
.rz-tree-row:hover .rz-tree-newlist-btn,
.rz-tree-row:hover .rz-tree-order-btn:not(.rz-order-edge),
.rz-tree-list-row:hover .rz-tree-del-btn,
.rz-tree-list-row:hover .rz-tree-rename-btn,
.rz-tree-list-row:hover .rz-tree-order-btn:not(.rz-order-edge) { opacity: 1; }
.rz-tree-del-btn:hover      { background: #fee2e2; }
.rz-tree-up-btn:hover       { background: #ede9fe; }
.rz-tree-rename-btn:hover   { background: #dbeafe; }
.rz-tree-newlist-btn        { color: #16a34a; font-size: .9rem; font-weight: 700; }
.rz-tree-newlist-btn:hover  { background: #dcfce7; }
.rz-tree-order-btn          { color: #6b7280; font-size: .65rem; }
.rz-tree-order-btn:hover    { background: #e0e7ff; color: #4338ca; }
.rz-order-edge              { opacity: .25; pointer-events: none; }
.rz-tree-rename-inp {
  flex: 1; font-size: .8rem; font-weight: 600; color: #374151;
  border: 1px solid #7c3aed; border-radius: 4px;
  padding: 1px 5px; outline: none; min-width: 0; width: 0;
}
.rz-tree-list-row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; cursor: pointer; border-radius: 11px;
  margin: 2px 4px; transition: background .1s; user-select: none;
}
.rz-tree-list-row:hover { background: #f3f4f6; }
.rz-tree-list-row.selected { background: #fef9c3; }
.rz-tree-list-row.selected:hover { background: #fef08a; }
.rz-tree-list-row.rz-list-multi-sel { background: #ede9fe !important; }
.rz-tree-list-row.rz-list-multi-sel:hover { background: #ddd6fe !important; }
.rz-tree-list-cb {
  flex-shrink: 0; width: 14px; height: 14px; cursor: pointer;
  accent-color: #7c3aed; margin-right: 2px;
}
.rz-tree-list-icon { font-size: .78rem; flex-shrink: 0; opacity: .85; }
.rz-tree-list-name {
  flex: 1; font-size: .8rem; color: #475569; font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rz-tree-list-count {
  font-size: .66rem; color: #64748b; font-weight: 800; flex-shrink: 0;
  margin-left: auto; background: #eef2f7; border-radius: 999px; padding: 2px 9px;
}

/* Focus mode: hide left panel */
#rzBody.rz-focus .rz-input-panel { display: none; }
.rz-show-list-btn {
  padding: 6px 14px; border-radius: 8px;
  background: #f3f4f6; color: #374151;
  border: 1.5px solid #d1d5db; font-size: .82rem;
  cursor: pointer; font-weight: 600;
  transition: all .14s;
}
.rz-show-list-btn:hover { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
.rz-show-list-btn.active { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }

/* ── System Folders Button & Panel ── */
.rz-sys-folder-btn {
  padding: 6px 14px; border-radius: 8px;
  background: #f0fdf4; color: #15803d;
  border: 1.5px solid #bbf7d0; font-size: .82rem;
  cursor: pointer; font-weight: 600; transition: all .14s;
}
.rz-sys-folder-btn:hover  { background: #dcfce7; border-color: #86efac; }
.rz-sys-folder-btn.active { background: #dcfce7; border-color: #4ade80; color: #166534; }

.rz-sys-panel {
  display: none; position: absolute; top: 52px; left: 0; width: 430px;
  background: #fff; border-bottom: 2px solid #e5e7eb; border-right: 2px solid #e5e7eb;
  box-shadow: 0 6px 24px rgba(0,0,0,.10); z-index: 200;
  max-height: 50vh; overflow: hidden;
  flex-direction: column;
}
.rz-sys-panel.active { display: flex; }

/* ── Leaderboard panel ── */
.rz-lb-btn { padding: 5px 11px; border-radius: 8px; border: 1.5px solid #fcd34d; background: #fffbeb; color: #92400e; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .12s; }
.rz-lb-btn:hover  { background: #fef3c7; border-color: #f59e0b; }
.rz-lb-btn.active { background: #fef3c7; border-color: #f59e0b; color: #78350f; }
.rz-lb-panel {
  display: none; position: absolute; top: 52px; right: 0;
  width: 300px; background: #fff;
  border-bottom: 2px solid #e5e7eb; border-left: 2px solid #e5e7eb;
  box-shadow: -4px 6px 24px rgba(0,0,0,.10); z-index: 200;
  max-height: 70vh; overflow: hidden; flex-direction: column;
}
.rz-lb-panel.active { display: flex; }
.rz-lb-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #e5e7eb;
  background: #fffbeb; flex-shrink: 0;
}
.rz-lb-panel-title { font-weight: 800; font-size: .85rem; color: #92400e; flex-shrink: 0; }
.rz-lb-tabs { display: flex; gap: 4px; margin-left: auto; }
.rz-lb-tab { padding: 3px 9px; border-radius: 5px; border: 1.5px solid #d1d5db; background: #fff; font-size: .7rem; font-weight: 700; cursor: pointer; color: #6b7280; transition: all .12s; }
.rz-lb-tab:hover  { border-color: #f59e0b; color: #92400e; }
.rz-lb-tab.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.rz-lb-body { flex: 1; overflow-y: auto; padding: 12px; }

.rz-sys-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid #e5e7eb;
  background: #f9fafb; flex-shrink: 0;
}
.rz-sys-panel-title { font-weight: 700; font-size: .88rem; color: #15803d; flex-shrink: 0; }
.rz-sys-search {
  flex: 1; padding: 5px 10px; border: 1.5px solid #d1d5db; border-radius: 7px;
  font-size: .8rem; outline: none;
}
.rz-sys-search:focus { border-color: #86efac; }
.rz-sys-collapse-btn {
  background: none; border: 1px solid #d1d5db; font-size: .88rem; color: #6b7280;
  cursor: pointer; padding: 2px 7px; flex-shrink: 0; border-radius: 5px; line-height: 1.4;
}
.rz-sys-collapse-btn:hover { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.rz-sys-close-btn {
  background: none; border: none; font-size: 1rem; color: #9ca3af;
  cursor: pointer; padding: 2px 6px; flex-shrink: 0; border-radius: 5px;
}
.rz-sys-close-btn:hover { background: #f3f4f6; color: #374151; }
.rz-sys-tree {
  overflow-y: auto; flex: 1; padding: 8px 0;
}
.rz-sys-folder-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 8px; cursor: default;
  border-radius: 6px; margin: 1px 6px; transition: background .12s;
}
.rz-sys-folder-row:hover { background: #f0fdf4; }
.rz-sys-arrow { font-size: .75rem; color: #9ca3af; cursor: pointer; min-width: 12px; text-align: center; }
.rz-sys-arrow:hover { color: #374151; }
.rz-sys-folder-name {
  font-weight: 600; font-size: .82rem; color: #15803d;
  cursor: pointer; flex: 1;
}
.rz-sys-folder-name:hover { text-decoration: underline; color: #166534; }
.rz-sys-count { font-size: .72rem; color: #9ca3af; flex-shrink: 0; }
.rz-sys-list-row {
  display: flex; align-items: center;
  padding: 5px 14px 5px 8px; font-size: .8rem; color: #374151;
  cursor: pointer; border-radius: 6px; margin: 1px 6px;
  transition: background .12s;
}
.rz-sys-list-row:hover { background: #f0fdf4; color: #15803d; font-weight: 600; }
.rz-sys-list-row.rz-sys-list-multi-sel { background: #ede9fe !important; }
.rz-sys-list-row.rz-sys-list-multi-sel:hover { background: #ddd6fe !important; }
.rz-sys-list-cb {
  flex-shrink: 0; width: 14px; height: 14px; cursor: pointer;
  accent-color: #7c3aed; margin-right: 4px;
}
.rz-sys-empty { padding: 24px; text-align: center; color: #9ca3af; font-size: .82rem; }

/* Card size chips */
.rz-size-btn {
  padding: 3px 10px; border-radius: 6px;
  border: 1.5px solid #d1d5db; background: transparent;
  color: #6b7280; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .13s;
}
.rz-size-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.rz-size-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rz-custom-color-btn {
  padding: 3px 10px; border-radius: 6px;
  border: 1.5px solid #d1d5db; background: transparent;
  color: #6b7280; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .13s;
}
.rz-custom-color-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.rz-custom-color-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* Right panel */
.rz-resizer {
  width: 6px; flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  position: relative;
  transition: background .15s;
  z-index: 10;
}
.rz-resizer::after {
  content: '';
  position: absolute; inset: 0;
  left: 2px; width: 2px;
  background: #e5e7eb;
  border-radius: 2px;
  transition: background .15s, width .15s, left .15s;
}
.rz-resizer:hover::after,
.rz-resizer.dragging::after {
  left: 0; width: 6px;
  background: #7c3aed;
}
.rz-result-panel {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 14px; padding: 20px 20px 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.rz-mobile-back-bar { display: none; }
.rz-mobile-spin-btn { display: none; }
@media (min-width: 601px) { .rz-mobile-start-btn { display: none; } }
@media (max-width: 600px) {
  .rz-body { position: relative; overflow: hidden; }
  .rz-result-panel {
    position: absolute; inset: 0; z-index: 2;
    transform: translateX(100%); transition: transform .28s ease;
    background: #fff; padding: 0 16px 16px; overflow-y: auto;
    flex: none; align-items: center; justify-content: flex-start;
  }
  .rz-body.rz-list-selected .rz-result-panel { transform: translateX(0); }
  .rz-header { gap: 4px; padding: 8px 8px; flex-wrap: wrap; justify-content: space-between; }
  /* Row 1: Back | Randomize | Hide list | Folders — 4 equal-width items */
  .rz-back-btn, .rz-title, .rz-show-list-btn, .rz-sys-folder-btn {
    flex: 1; min-width: 0; text-align: center;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; padding: 5px 3px;
  }
  .rz-title { font-size: .72rem; font-weight: 700; background: none; border: none; }
  .rz-draw-toggle-btn, .rz-text-toggle-btn, .rz-gpt-btn { display: none !important; }
  /* Row 2: Spelling | Translation | Multiple Choice | Xếp hạng — 4 equal-width items */
  .rz-draw-toolbar { width: 100%; order: 10; gap: 4px; }
  .rz-spelling-btn, .rz-trans-btn, .rz-mc-btn, .rz-lb-btn {
    flex: 1; min-width: 0; text-align: center; font-size: .6rem; padding: 6px 3px;
    display: flex; align-items: center; justify-content: center; white-space: nowrap;
  }
  .rz-tree-zoom-btn, .rz-search-toggle-btn, .rz-undo-btn {
    order: 10;
  }
  .rz-new-folder-inp, .rz-add-folder-btn, .rz-add-root-btn,
  .rz-del-folder-btn, .rz-move-btn { order: 1; }
  #rzOverlay.rz-studying .rz-show-list-btn,
  #rzOverlay.rz-studying .rz-sys-folder-btn,
  #rzOverlay.rz-studying .rz-draw-toolbar,
  #rzOverlay.rz-studying .rz-title { display: none !important; }
  .rz-repeat-row { gap: 6px; }
  .rz-lb-panel { top: 86px; }
}
.rz-controls-scroll {
  overflow-y: auto; flex: 1; min-height: 0;
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding-bottom: 20px;
}
.rz-result-panel::before { content: ''; flex: 0; }
.rz-result-panel::after  { content: ''; flex: 0; }
/* Flip card */
.rz-card-scene {
  width: 100%; max-width: 480px;
  height: 220px;
  perspective: 1000px;
  cursor: pointer;
}
.rz-card {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s ease;
}
.rz-card.flipped { transform: rotateY(180deg); }
.rz-card-front, .rz-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  box-shadow: 0 8px 32px rgba(124,58,237,.3);
}
.rz-card-front {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}
.rz-card-back {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  transform: rotateY(180deg);
  padding: 12px 24px;
  gap: 6px;
  overflow-y: auto;
  justify-content: center;
}
.rz-display-word {
  font-size: clamp(1.3rem, 5vw, 2.8rem); font-weight: 800;
  color: #fff; text-align: center;
  padding: 0 20px; letter-spacing: .02em;
  word-break: break-word; line-height: 1.2;
}
.rz-front-ipa {
  display: none;
  font-style: italic; text-align: center;
  padding: 2px 20px; word-break: break-word;
}
.rz-front-bottom {
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
}
.rz-ipa-hint-btn {
  padding: 3px 14px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  font-size: .72rem; cursor: pointer;
  transition: all .14s;
}
.rz-ipa-hint-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.7); color: #fff; }
.rz-ipa-hint-btn.active { background: rgba(255,255,255,.28); border-color: #fff; color: #fff; font-weight: 700; }
.rz-flip-hint {
  font-size: .68rem; color: rgba(255,255,255,.45);
  letter-spacing: .03em;
}
.rz-front-btns {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.rz-front-level {
  display: flex; justify-content: center; margin-top: 6px;
}
.rz-front-level-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 20px;
  color: #fff; opacity: .85;
}
.rz-root-word {
  font-size: .78rem; color: rgba(255,255,255,.6);
  text-align: center; letter-spacing: .04em;
  padding: 2px 0;
}
.rz-root-word::before { content: '\2191 '; opacity: .7; }
.rz-back-ipa {
  font-size: 1.35rem; color: #a7f3d0;
  font-style: italic; text-align: center;
  word-break: break-word;
}
.rz-back-def {
  font-size: 1.05rem; color: #fff;
  text-align: center; word-break: break-word;
}
.rz-back-en-def {
  font-size: .82rem; color: rgba(255,255,255,.65);
  text-align: center; word-break: break-word;
  font-style: italic;
}
.rz-back-example {
  font-size: .82rem; color: #fde68a;
  text-align: center; word-break: break-word;
  font-style: italic; padding: 0 4px;
}
.rz-ex-hl { color: #fb923c; font-weight: 800; }
.rz-back-extra-examples:not(:empty) { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; font-size: .8rem; }
.rz-back-extra-ex {
  font-size: inherit; color: #fde68a; opacity: .78;
  text-align: center; word-break: break-word;
  font-style: italic;
}
.rz-back-colloc {
  font-size: .76rem; color: #99f6e4;
  text-align: center; word-break: break-word;
  line-height: 1.5;
}
.rz-back-colloc:not(:empty)::before { content: '📌 '; }
.rz-vl-ex-label { font-size: .75rem; font-weight: 700; color: #6b7280; flex-shrink: 0; }
.rz-vl-ex-btns { display: flex; gap: 2px; flex-shrink: 0; }
.rz-vl-ex-btn {
  padding: 1px 7px; border-radius: 5px; font-size: .75rem; font-weight: 700;
  border: 1.5px solid #d1d5db; background: #fff; color: #6b7280; cursor: pointer;
  transition: all .12s;
}
.rz-vl-ex-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.rz-vl-ex-btn:hover:not(.active) { border-color: #6366f1; color: #6366f1; }
@keyframes rzPop {
  0%   { transform: scale(.7); opacity: .3; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.rz-pop { animation: rzPop .45s ease-out both; }

.rz-level-filter-bar {
  display: flex; align-items: center; gap: 6px;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.rz-level-filter-lbl { font-size: .75rem; font-weight: 600; color: #6b7280; }
.rz-level-filter-btn {
  padding: 4px 13px; border-radius: 999px; border: 1.5px solid #d1d5db;
  background: #fff; font-size: .78rem; font-weight: 700; color: #6b7280;
  cursor: pointer; transition: all .13s;
}
.rz-level-filter-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.rz-level-filter-btn.rz-lvl-a.active { background: #16a34a; border-color: #16a34a; }
.rz-level-filter-btn.rz-lvl-b.active { background: #7c3aed; border-color: #7c3aed; }
.rz-level-filter-btn.rz-lvl-c.active { background: #dc2626; border-color: #dc2626; }
.rz-level-filter-btn:hover:not(.active) { border-color: #9ca3af; background: #f3f4f6; color: #374151; }
.rz-no-level-btn {
  padding: 4px 9px; border-radius: 999px; border: 1.5px solid #d1d5db;
  background: #fff; font-size: .78rem; font-weight: 800; color: #9ca3af;
  cursor: pointer; transition: all .13s; line-height: 1;
}
.rz-no-level-btn.active,
.rz-no-level-btn:hover { border-color: #9ca3af; background: #f3f4f6; color: #374151; }
.rz-no-level-panel {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 8px; font-size: .78rem; line-height: 1.6;
  max-width: 420px; word-break: break-word; text-align: left;
}
.rz-no-level-title { font-weight: 700; color: #374151; margin-right: 4px; }
.rz-no-level-list { color: #6b7280; }

.rz-spin-btn {
  padding: 14px 48px; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; border: none; font-size: 1.1rem; font-weight: 800;
  cursor: pointer; letter-spacing: .04em;
  box-shadow: 0 4px 18px rgba(124,58,237,.35);
  transition: transform .15s, box-shadow .15s;
}
.rz-spin-btn:hover:not(:disabled) { transform: scale(1.04); box-shadow: 0 6px 24px rgba(124,58,237,.45); }
.rz-spin-btn:disabled { opacity: .65; cursor: default; }
/* ── All-Done celebration overlay ─────────────────────────────── */
.rz-alldone-overlay {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: rgba(10,15,30,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
  overflow: hidden;
}
.rz-alldone-overlay.active { display: flex; }

/* Confetti container */
.rz-alldone-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rz-alldone-confetti-piece {
  position: absolute; top: -20px; width: 10px; height: 10px;
  border-radius: 2px; opacity: 0;
  animation: rz-confetti-fall linear forwards;
}
@keyframes rz-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Main card */
.rz-alldone-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: 28px;
  padding: 44px 48px 36px; max-width: 420px; width: 90%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.4);
  animation: rz-alldone-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rz-alldone-pop {
  0%   { transform: scale(.6) translateY(40px); opacity: 0; }
  100% { transform: scale(1) translateY(0);     opacity: 1; }
}

.rz-alldone-trophy {
  font-size: 4rem; line-height: 1;
  margin-bottom: 10px;
  animation: rz-trophy-bounce .6s .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rz-trophy-bounce {
  0%   { transform: scale(0) rotate(-15deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.rz-alldone-title {
  font-size: 1.7rem; font-weight: 900; color: #0f172a; margin-bottom: 4px;
  background: linear-gradient(135deg,#f97316,#c2410c);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rz-alldone-sub { font-size: .9rem; color: #64748b; margin-bottom: 24px; line-height: 1.5; }

.rz-alldone-section {
  font-size: .88rem; font-weight: 700; color: #64748b;
  background: #f1f5f9; border-radius: 20px; padding: 5px 16px;
  margin-bottom: 16px; max-width: 280px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rz-alldone-stats-row {
  display: flex; gap: 14px; justify-content: center;
  margin-bottom: 16px; animation: rz-alldone-pop .5s .15s both;
}
.rz-alldone-stat-box {
  display: flex; flex-direction: column; align-items: center;
  border-radius: 16px; padding: 14px 28px;
}
.rz-alldone-stat-known {
  background: linear-gradient(135deg,#f0fdf4,#dcfce7); border: 2px solid #86efac;
}
.rz-alldone-stat-review {
  background: linear-gradient(135deg,#fff7ed,#ffedd5); border: 2px solid #fed7aa;
}
.rz-alldone-num {
  font-size: 3rem; font-weight: 900; line-height: 1;
  color: #15803d; animation: rz-count-up .6s .4s ease both;
}
.rz-alldone-num-review { color: #c2410c; }
@keyframes rz-count-up {
  0%   { transform: scale(.5); opacity: 0; }
  80%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}
.rz-alldone-stat-lbl { font-size: .8rem; font-weight: 700; color: #6b7280; margin-top: 4px; }

.rz-alldone-detail { font-size: .84rem; color: #94a3b8; margin-bottom: 20px; min-height: 1em; }

.rz-alldone-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rz-alldone-btn {
  padding: 12px 28px; border-radius: 14px; font-size: .9rem; font-weight: 800;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.rz-alldone-btn--primary {
  border: none; background: linear-gradient(135deg,#f97316,#c2410c); color: #fff;
  box-shadow: 0 4px 14px rgba(249,115,22,.35);
}
.rz-alldone-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.45); }
.rz-alldone-btn--secondary {
  border: 2px solid #e2e8f0; background: #fff; color: #334155;
}
.rz-alldone-btn--secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

/* ── Cycle-done banner ─────────────────────────────────────── */
.rz-cycle-done-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255,255,255,0.88); border-radius: 14px; padding: 10px 16px;
  margin: 4px 0; font-size: .85rem; font-weight: 700; color: #1e293b;
  border: 1.5px solid rgba(0,0,0,0.1); box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  animation: rzFadeIn .3s ease;
}
.rz-cycle-review-btn {
  padding: 5px 14px; border-radius: 20px; border: none;
  background: #7c3aed; color: #fff; font-size: .82rem; font-weight: 800;
  cursor: pointer; font-family: inherit;
}
.rz-cycle-review-btn:hover { background: #6d28d9; }
.rz-cycle-dismiss-btn {
  background: none; border: none; color: #9ca3af; font-size: .85rem;
  cursor: pointer; padding: 2px 6px; font-weight: 700;
}
.rz-cycle-dismiss-btn:hover { color: #374151; }
.rz-unknown-mode-row {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-top: -6px;
}
.rz-unknown-mode-btn {
  padding: 7px 18px; border-radius: 999px;
  border: 1.5px solid #f97316;
  background: transparent; color: #ea580c;
  font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.rz-unknown-mode-btn:hover { background: #fff7ed; }
.rz-unknown-mode-btn.active { background: #f97316; border-color: #f97316; color: #fff; }
.rz-unknown-mode-btn #rzUnknownCount { font-weight: 400; opacity: .85; margin-left: 3px; }
.rz-unknown-dl-btn {
  padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid #94a3b8;
  background: transparent; color: #64748b;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.rz-unknown-dl-btn:hover { background: #f1f5f9; border-color: #64748b; color: #334155; }

.rz-loading-msg {
  font-size: .82rem; color: #64748b; font-style: italic;
  padding: 4px 0; display: flex; align-items: center; gap: 5px;
}

.rz-edit-toggle-btn {
  padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid #d1d5db; background: #f3f4f6;
  color: #6b7280; font-size: .78rem; cursor: pointer;
  transition: all .14s;
}
.rz-edit-toggle-btn:hover { border-color: #a78bfa; color: #6d28d9; background: #ede9fe; }
.rz-edit-toggle-btn.active { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; font-weight: 600; }
.rz-custom-bar {
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 8px;
}
.rz-custom-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.rz-swatch {
  width: 24px; height: 24px; border-radius: 6px;
  cursor: pointer; border: 2px solid transparent;
  flex-shrink: 0;
  transition: transform .12s, border-color .12s;
}
.rz-swatch:hover { transform: scale(1.18); }
.rz-swatch.active { border-color: #fff; box-shadow: 0 0 0 1.5px #555; }
.rz-custom-sep { width: 1px; height: 20px; background: #d1d5db; margin: 0 2px; flex-shrink: 0; }
.rz-custom-lbl { font-size: .72rem; color: #1e293b; white-space: nowrap; font-weight: 600; }
.rz-sz-btn {
  padding: 3px 10px; border-radius: 6px;
  border: 1.5px solid #d1d5db; background: #f9fafb;
  font-size: .78rem; cursor: pointer; color: #374151; font-weight: 700;
  transition: all .13s;
}
.rz-sz-btn:hover { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
.rz-sz-lbl { font-size: .78rem; color: #6b7280; min-width: 28px; text-align: center; }
.rz-font-sel {
  padding: 4px 6px; border-radius: 6px;
  border: 1.5px solid #d1d5db; background: #f9fafb;
  font-size: .75rem; color: #374151; cursor: pointer; outline: none;
}
.rz-font-sel:focus { border-color: #7c3aed; }
.rz-font-sel option { background: #ffffff; color: #111827; }
.rz-font-sel optgroup { background: #f3f4f6; color: #6b7280; font-size: .72rem; font-style: normal; }
.rz-align-btn {
  padding: 4px 9px; border-radius: 6px; font-size: .74rem; font-weight: 700;
  border: 1.5px solid #d1d5db; background: #f9fafb; color: #374151;
  cursor: pointer; transition: all .13s; white-space: nowrap; flex-shrink: 0;
}
.rz-align-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.rz-align-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rz-dark-bg .rz-align-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #e5e7eb; }
.rz-dark-bg .rz-align-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rz-front-btn {
  padding: 3px 9px; border-radius: 6px;
  border: 1.5px solid #d1d5db; background: #f9fafb;
  font-size: .78rem; cursor: pointer; color: #374151; font-weight: 600;
  transition: all .13s; white-space: nowrap;
}
.rz-front-btn:hover { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
.rz-front-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rz-dark-bg .rz-front-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #e5e7eb; }
.rz-dark-bg .rz-front-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rz-back-word {
  font-size: 1.5rem; font-weight: 700; text-align: center;
  color: rgba(255,255,255,.92); letter-spacing: .03em; margin-bottom: 2px;
}
.rz-field-chk {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .78rem; color: #374151; cursor: pointer; white-space: nowrap;
}
.rz-field-chk input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: #7c3aed; }
.rz-dark-bg .rz-field-chk { color: #e5e7eb; }
.rz-color-picker {
  width: 28px; height: 28px; flex-shrink: 0;
  border: 2px solid #d1d5db; border-radius: 6px;
  padding: 2px; cursor: pointer; background: none;
}
.rz-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.rz-color-picker::-webkit-color-swatch { border: none; border-radius: 3px; }
.rz-dur-row { display: flex; align-items: center; gap: 6px; }
.rz-dur-lbl { font-size: .72rem; color: #9ca3af; }
.rz-dur-btn {
  padding: 4px 14px; border-radius: 999px;
  border: 1.5px solid #d1d5db; background: transparent;
  color: #6b7280; font-size: .8rem; cursor: pointer;
  transition: all .14s;
}
.rz-dur-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.rz-dur-btn.active {
  background: #7c3aed; border-color: #7c3aed;
  color: #fff; font-weight: 700;
}
.rz-pat-chip {
  padding: 3px 10px; border-radius: 6px;
  border: 1.5px solid #d1d5db; background: transparent;
  color: #6b7280; font-size: .82rem; cursor: pointer;
  transition: all .14s;
}
.rz-pat-chip:hover { border-color: #7c3aed; color: #7c3aed; }
.rz-pat-chip.active { background: #7c3aed; border-color: #7c3aed; color: #fff; font-weight: 700; }
.rz-snow-toggle {
  padding: 3px 10px; border-radius: 6px;
  border: 1.5px solid #93c5fd; background: transparent;
  color: #3b82f6; font-size: .82rem; cursor: pointer;
  transition: all .14s; margin-left: 4px;
}
.rz-snow-toggle:hover { border-color: #2563eb; color: #2563eb; }
.rz-snow-toggle.active { background: #3b82f6; border-color: #3b82f6; color: #fff; font-weight: 700; }
.rz-music-toggle {
  padding: 3px 10px; border-radius: 6px;
  border: 1.5px solid #a7f3d0; background: transparent;
  color: #059669; font-size: .82rem; cursor: pointer;
  transition: all .14s; margin-left: 4px;
}
.rz-music-toggle:hover { border-color: #047857; color: #047857; }
.rz-music-toggle.active { background: #059669; border-color: #059669; color: #fff; font-weight: 700; }
.rz-music-vol {
  width: 72px; margin-left: 4px; vertical-align: middle;
  accent-color: #059669; cursor: pointer;
}

/* ── Dark-background UI overrides ── */
.rz-dark-bg .rz-custom-lbl { color: #fff; }
.rz-dark-bg .rz-sz-lbl     { color: rgba(255,255,255,.8); }
.rz-dark-bg .rz-dur-lbl    { color: rgba(255,255,255,.65); }
.rz-dark-bg .rz-custom-sep { background: rgba(255,255,255,.2); }
.rz-dark-bg .rz-sz-btn {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.9);
}
.rz-dark-bg .rz-sz-btn:hover { background: rgba(255,255,255,.22); border-color: #a78bfa; color: #e9d5ff; }
.rz-dark-bg .rz-font-sel {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.9);
}
.rz-dark-bg .rz-color-picker { border-color: rgba(255,255,255,.35); }
.rz-dark-bg .rz-dur-btn { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
.rz-dark-bg .rz-dur-btn:hover { border-color: #a78bfa; color: #e9d5ff; }
.rz-dark-bg .rz-dur-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rz-dark-bg .rz-pat-chip { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.75); }
.rz-dark-bg .rz-pat-chip:hover { border-color: #a78bfa; color: #e9d5ff; }
.rz-dark-bg .rz-pat-chip.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rz-dark-bg .rz-snow-toggle { border-color: rgba(147,197,253,.5); color: rgba(147,197,253,.9); }
.rz-dark-bg .rz-snow-toggle:hover { border-color: #93c5fd; color: #bfdbfe; }
.rz-dark-bg .rz-snow-toggle.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.rz-dark-bg .rz-music-toggle { border-color: rgba(167,243,208,.5); color: rgba(167,243,208,.9); }
.rz-dark-bg .rz-music-toggle:hover { border-color: #6ee7b7; color: #a7f3d0; }
.rz-dark-bg .rz-music-toggle.active { background: #059669; border-color: #059669; color: #fff; }
.rz-dark-bg .rz-edit-toggle-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85); }
.rz-dark-bg .rz-edit-toggle-btn:hover { background: rgba(255,255,255,.18); border-color: #a78bfa; color: #e9d5ff; }
.rz-dark-bg .rz-edit-toggle-btn.active { background: rgba(167,139,250,.25); border-color: #a78bfa; color: #e9d5ff; }
.rz-dark-bg .rz-unknown-mode-btn:not(.active) { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); }
.rz-dark-bg .rz-swatch.active { border-color: #fff; }

.rz-snow-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

/* ── Sunset background ── */
.rz-bg-sunset {
  background: linear-gradient(180deg,
    #1a0830 0%, #4a1888 8%,
    #7e2eaa 18%, #b94c8e 30%,
    #df7060 42%, #ec9050 52%,
    #f5be5a 60%, #fde480 65%,
    #ec9050 72%, #c05060 80%,
    #7a2060 88%, #2e0e4a 96%,
    #1a0830 100%) !important;
  background-color: transparent !important;
}
.rz-bird {
  position: absolute;
  width: 14px; height: 7px;
  animation: rzBirdFly linear infinite;
}
.rz-bird::before, .rz-bird::after {
  content: '';
  position: absolute;
  top: 0;
  width: 7px; height: 7px;
  border-top: 2px solid #4a1a70;
  border-radius: 50% 50% 0 0;
}
.rz-bird::before { left: 0;  transform-origin: right center; }
.rz-bird::after  { right: 0; transform-origin: left  center; }
@keyframes rzBirdFly {
  from { left: -5%;  }
  to   { left: 110%; }
}

/* ── Night Mountain background ── */
.rz-bg-nightmt {
  background: linear-gradient(180deg,
    #110e26 0%,
    #1a1438 12%,
    #231848 25%,
    #2e1e50 38%,
    #3c2250 52%,
    #5c2a42 65%,
    #8a3030 76%,
    #c05228 86%,
    #e07030 93%,
    #f49050 100%) !important;
}

/* ── Forest background ── */
.rz-bg-forest {
  background: linear-gradient(180deg,
    #070e1a 0%, #0c2340 12%, #0e3d6e 28%,
    #2aa0b8 46%, #55bfad 54%,
    #e8773d 62%, #f4a43d 72%, #fdd160 82%, #fef3a0 92%) !important;
  background-color: transparent !important;
}
.rz-forest-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: rzFStarTwinkle ease-in-out infinite alternate;
}
@keyframes rzFStarTwinkle {
  from { opacity: .1; }
  to   { opacity: .9; }
}

/* ── Stars background ── */
.rz-bg-stars {
  background: linear-gradient(160deg,
    #060d1a 0%, #0a2540 20%,
    #0d4a55 48%, #0a3a40 70%,
    #061828 100%) !important;
  background-color: transparent !important;
}
.rz-shoot-star {
  position: absolute;
  border-radius: 100px;
  background: linear-gradient(90deg, transparent, #fffde7 35%, rgba(255,253,231,.2));
  transform: rotate(-35deg);
  transform-origin: left center;
  animation: rzShootStar linear infinite;
}
@keyframes rzShootStar {
  0%   { left: -15%; opacity: 0; }
  6%   { opacity: 1; }
  70%  { opacity: .5; }
  100% { left: 115%; opacity: 0; }
}
.rz-twinkle-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: rzTwinkle ease-in-out infinite alternate;
}
@keyframes rzTwinkle {
  from { opacity: .06; transform: scale(.4); }
  to   { opacity: .9;  transform: scale(1); }
}
.rz-star-med {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: rzTwinkleMed ease-in-out infinite alternate;
}
@keyframes rzTwinkleMed {
  from { opacity: .1;  transform: scale(.4); box-shadow: none; }
  to   { opacity: 1;   transform: scale(1);  box-shadow: 0 0 6px 3px rgba(200,220,255,.65); }
}
.rz-star-big {
  position: absolute;
  background: #fff;
  clip-path: polygon(50% 0%,53% 47%,100% 50%,53% 53%,50% 100%,47% 53%,0% 50%,47% 47%);
  animation: rzTwinkleBig ease-in-out infinite alternate;
}
@keyframes rzTwinkleBig {
  from { opacity: .15; transform: scale(.35) rotate(0deg);   filter: blur(.5px); }
  to   { opacity: 1;   transform: scale(1.1) rotate(22deg);  filter: blur(0px);
         box-shadow: 0 0 12px 5px rgba(255,255,255,.7), 0 0 28px 12px rgba(180,210,255,.4); }
}

/* ── Lanterns background ── */
.rz-bg-lanterns {
  background: linear-gradient(175deg,
    #100820 0%, #2c0f45 18%,
    #6b1050 38%, #ae2244 58%,
    #c0392b 72%, #832438 88%,
    #1a0820 100%) !important;
  background-color: transparent !important;
}
.rz-lantern-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: rzLanternFloat ease-in-out infinite;
}
@keyframes rzLanternFloat {
  0%   { transform: translateY(0)     translateX(0)    rotate(-4deg); opacity: 0; }
  8%   { opacity: .95; }
  45%  { transform: translateY(-45vh) translateX(18px) rotate(4deg); }
  91%  { opacity: .6; }
  100% { transform: translateY(-108vh) translateX(-8px) rotate(-3deg); opacity: 0; }
}
.rz-lantern-cap {
  width: 20px; height: 7px;
  background: rgba(255,210,60,.85);
  border-radius: 50%;
  margin-bottom: -2px;
  box-shadow: 0 0 6px 2px rgba(255,200,0,.5);
}
.rz-lantern-body {
  border-radius: 48% 48% 44% 44% / 52% 52% 46% 46%;
  background: radial-gradient(ellipse 55% 48% at 50% 38%, #fff7c0, #ffb300 55%, #e55100);
  box-shadow: 0 0 18px 8px rgba(255,175,0,.75), 0 0 38px 16px rgba(255,100,0,.35);
}
.rz-lantern-base {
  width: 14px; height: 5px;
  background: rgba(255,170,30,.65);
  border-radius: 50%;
  margin-top: -2px;
  box-shadow: 0 0 4px 1px rgba(255,180,0,.4);
}
.rz-lantern-glow {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,200,0,.18);
  animation: rzTwinkle ease-in-out infinite alternate;
}
/* ── Ocean background ── */
.rz-bg-ocean {
  background: linear-gradient(180deg,
    #020b18 0%, #04192e 8%,
    #062848 18%, #083a62 28%,
    #0a4c78 38%, #0b5c84 48%,
    #096a74 58%, #0a6262 68%,
    #0a5652 80%, #094a42 92%,
    #083c32 100%) !important;
  background-color: transparent !important;
}
/* Light rays */
.rz-oc-ray {
  position: absolute; top: 0;
  background: linear-gradient(180deg, rgba(120,205,255,0.32) 0%, rgba(100,195,245,0.08) 65%, transparent 100%);
  transform-origin: top center;
  border-radius: 0 0 40% 40%;
  pointer-events: none;
  animation: rzOcRay ease-in-out infinite;
}
@keyframes rzOcRay {
  0%   { opacity: 0.05; transform: skewX(-2deg) scaleX(1);    }
  50%  { opacity: 0.18; transform: skewX(2deg)  scaleX(1.15); }
  100% { opacity: 0.05; transform: skewX(-2deg) scaleX(1);    }
}
/* Jellyfish */
.rz-oc-jelly {
  position: absolute; pointer-events: none; z-index: 2;
  animation: rzOcJelly ease-in-out infinite;
}
@keyframes rzOcJelly {
  0%   { transform: translateY(0px)   translateX(0px);  }
  20%  { transform: translateY(-16px) translateX(10px); }
  45%  { transform: translateY(-8px)  translateX(18px); }
  65%  { transform: translateY(-20px) translateX(6px);  }
  80%  { transform: translateY(-12px) translateX(-8px); }
  100% { transform: translateY(0px)   translateX(0px);  }
}
.rz-oc-jelly svg { display: block; width: 100%; height: auto; }
.rz-jb {
  transform-box: fill-box; transform-origin: 50% 0%;
  animation: rzJellyBell ease-in-out var(--jelly-pulse, 1.8s) infinite;
}
.rz-jt {
  transform-box: fill-box; transform-origin: 50% 0%;
  animation: rzJellyTent ease-in-out var(--jelly-pulse, 1.8s) infinite;
}
@keyframes rzJellyBell {
  0%   { transform: scaleY(1)    scaleX(1);    }
  18%  { transform: scaleY(0.50) scaleX(1.36); }
  52%  { transform: scaleY(1.06) scaleX(0.96); }
  76%  { transform: scaleY(1)    scaleX(1);    }
  100% { transform: scaleY(1)    scaleX(1);    }
}
@keyframes rzJellyTent {
  0%   { transform: scaleY(1);    }
  18%  { transform: scaleY(0.24); }
  52%  { transform: scaleY(1.22); }
  74%  { transform: scaleY(1);    }
  100% { transform: scaleY(1);    }
}
/* Fish schools */
.rz-oc-school {
  position: absolute; pointer-events: none;
  width: 380px; height: 80px;
  animation: rzOcSchool linear infinite;
}
.rz-oc-school-rtl { animation-name: rzOcSchoolRtl !important; }
@keyframes rzOcSchool    { from { transform: translateX(-400px); } to { transform: translateX(110vw);  } }
@keyframes rzOcSchoolRtl { from { transform: translateX(110vw);  } to { transform: translateX(-400px); } }
.rz-oc-fish {
  position: absolute; pointer-events: none;
  animation: rzOcFishBob ease-in-out infinite alternate;
}
.rz-oc-fish-rtl svg { transform: scaleX(-1); }
@keyframes rzOcFishBob {
  from { transform: translateY(0px); }
  to   { transform: translateY(5px); }
}
/* Bubbles */
.rz-oc-bubble {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 32%, rgba(255,255,255,0.72), rgba(200,235,255,0.08) 70%);
  border: 1px solid rgba(175,225,255,0.38);
  animation: rzOcBubble ease-in infinite;
}
@keyframes rzOcBubble {
  0%   { transform: translateY(0)      translateX(0px);  opacity: 0;    }
  6%   { opacity: 0.65; }
  88%  { opacity: 0.38; }
  100% { transform: translateY(-90vh)  translateX(9px);  opacity: 0;    }
}
/* Coral */
.rz-oc-coral {
  position: absolute; bottom: 14px; pointer-events: none;
  transform-origin: bottom center;
  animation: rzOcCoralSway ease-in-out infinite alternate;
}
@keyframes rzOcCoralSway {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(2.5deg);  }
}
/* Seaweed */
.rz-oc-seaweed {
  position: absolute; bottom: 14px;
  width: 6px; border-radius: 3px 3px 0 0;
  opacity: 0.88; pointer-events: none;
  transform-origin: bottom center;
  animation: rzOcSeaweedSway ease-in-out infinite alternate;
}
@keyframes rzOcSeaweedSway {
  from { transform: rotate(-9deg)  scaleX(1);    }
  to   { transform: rotate(9deg)   scaleX(0.93); }
}
.rz-snow-flake {
  position: absolute;
  top: -2em;
  color: rgba(255,255,255,0.85);
  user-select: none;
  animation: rzSnowFall linear infinite;
  will-change: transform, opacity;
}
@keyframes rzSnowFall {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
  80%  { opacity: .7; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
.rz-style-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.rz-style-btn {
  padding: 4px 14px; border-radius: 999px;
  border: 1.5px solid #d1d5db; background: transparent;
  color: #d1d5db; font-size: .82rem; cursor: pointer;
  transition: all .14s;
}
.rz-style-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.rz-style-btn.active {
  background: #7c3aed; border-color: #7c3aed;
  color: #fff; font-weight: 700;
}

/* Word viewport — clips scroll animations */
.rz-word-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes rzScrollUp {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes rzScrollDown {
  from { transform: translateY(-110%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.rz-anim-up   { animation: rzScrollUp   var(--rz-anim-dur, 80ms) ease-out both; }
.rz-anim-down { animation: rzScrollDown var(--rz-anim-dur, 80ms) ease-out both; }

/* Mark buttons */
.rz-mark-row {
  width: 100%; max-width: 480px;
  gap: 10px;
}
.rz-mark-btn {
  flex: 1; padding: 8px 0; border-radius: 10px;
  font-size: .85rem; font-weight: 700; cursor: pointer;
  border: 2px solid transparent; transition: all .15s;
}
.rz-mark-known  { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.rz-mark-unknown { background: #fff1f2; color: #b91c1c; border-color: #fca5a5; }
.rz-mark-known.active  { background: #16a34a; color: #fff; border-color: #16a34a; }
.rz-mark-unknown.active { background: #dc2626; color: #fff; border-color: #dc2626; }
.rz-auto-spin-btn {
  padding: 8px 12px; border-radius: 10px;
  font-size: .9rem; cursor: pointer;
  border: 2px solid #e5e7eb; background: #f9fafb; color: #6b7280;
  transition: all .15s;
}
.rz-auto-spin-btn:hover { border-color: #fbbf24; color: #b45309; background: #fef3c7; }
.rz-auto-spin-btn.active { background: #fef3c7; border-color: #f59e0b; color: #b45309; font-weight: 700; }
/* Record button */
.rz-record-btn {
  padding: 8px 12px; border-radius: 10px;
  font-size: .9rem; cursor: pointer;
  border: 2px solid #e5e7eb; background: #f9fafb; color: #6b7280;
  transition: all .15s;
}
.rz-exvi-btn {
  padding: 8px 13px; border-radius: 10px;
  font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 800; cursor: pointer;
  border: 2px solid #bae6fd; background: #f0f9ff; color: #0369a1;
  transition: all .15s; white-space: nowrap;
}
.rz-exvi-btn:hover { border-color: #38bdf8; background: #e0f2fe; }
.rz-exvi-btn.active { background: #0d9488; border-color: #0d9488; color: #fff; }
.rz-back-ex-vi { font-size: .82em; color: #d1fae5; opacity: .92; font-style: normal; margin-top: 2px; }
.rz-record-btn:hover { border-color: #f87171; color: #dc2626; background: #fef2f2; }
.rz-record-btn.recording {
  background: #fee2e2; border-color: #f87171; color: #dc2626; font-weight: 700;
  animation: rz-rec-pulse .8s infinite;
}
@keyframes rz-rec-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  50%     { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}
/* Record result bar */
.rz-record-result {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; padding: 8px 14px; border-radius: 10px;
  font-size: .88rem; width: 100%; max-width: 480px; box-sizing: border-box;
  border: 1.5px solid #e5e7eb; background: #f9fafb;
}
.rz-rec-listening { border-color: #93c5fd !important; background: #eff6ff !important; color: #1d4ed8; }
.rz-rec-good  { border-color: #4ade80; background: #f0fdf4; }
.rz-rec-ok    { border-color: #fbbf24; background: #fffbeb; }
.rz-rec-bad   { border-color: #f87171; background: #fef2f2; }
.rz-rec-error { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; font-size: .82rem; }
.rz-rec-score { font-size: 1.15rem; font-weight: 800; }
.rz-rec-good  .rz-rec-score { color: #16a34a; }
.rz-rec-ok    .rz-rec-score { color: #b45309; }
.rz-rec-bad   .rz-rec-score { color: #dc2626; }
.rz-rec-msg  { font-weight: 600; color: #374151; }
.rz-rec-heard { color: #9ca3af; font-style: italic; font-size: .82rem; }
.rz-rec-bad { flex-direction: column; align-items: flex-start; gap: 4px; }
.rz-rec-bad .rz-rec-msg { color: #b91c1c; font-size: .85rem; }
.rz-rec-bad .rz-rec-msg strong { color: #7f1d1d; }
.rz-rec-retry { font-size: .82rem; color: #6b7280; }
.rz-rec-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #3b82f6; animation: rz-dot-blink .7s infinite;
}
@keyframes rz-dot-blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.rz-note-btn {
  padding: 8px 14px; border-radius: 10px;
  font-size: .9rem; cursor: pointer;
  border: 2px solid #e5e7eb; background: #f9fafb; color: #374151;
  transition: all .15s;
}
.rz-note-btn:hover { border-color: #a78bfa; color: #6d28d9; background: #ede9fe; }
.rz-note-btn.active { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
.rz-note-btn.has-note { border-color: #fbbf24; color: #b45309; }
.rz-note-btn.has-note.active { background: #fef3c7; border-color: #f59e0b; }
.rz-repeat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
  max-width: 480px;
}
.rz-repeat-btn {
  padding: 7px 16px;
  border-radius: 999px;
  border: 2px solid #6366f1;
  background: transparent;
  color: #6366f1;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.rz-repeat-btn:hover { background: #eef2ff; }
.rz-repeat-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.rz-repeat-btn.stopping { background: #ef4444; color: #fff; border-color: #ef4444; }
.rz-repeat-sel {
  padding: 6px 8px;
  border-radius: 10px;
  border: 2px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  font-size: .85rem;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.rz-repeat-sel:focus { border-color: #6366f1; }
.rz-repeat-prog {
  font-size: .78rem;
  color: #6366f1;
  font-weight: 700;
  min-width: 48px;
}
@media (max-width: 600px) {
  .rz-mark-row { gap: 6px; flex-wrap: wrap; }
  .rz-mark-btn { padding: 6px 0; font-size: .75rem; flex: 1; flex-basis: calc(50% - 3px); min-width: 0; }
  .rz-note-btn, .rz-auto-spin-btn, .rz-record-btn { padding: 6px 8px; font-size: .8rem; flex: none; }
  .rz-repeat-btn { padding: 5px 10px; font-size: .75rem; }
  .rz-repeat-sel { padding: 4px 6px; font-size: .75rem; }
}
.rz-note-area { width: 100%; max-width: 480px; }
.rz-note-toolbar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
}
.rz-note-sz-btn {
  padding: 2px 8px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid #e5e7eb; background: #f3f4f6;
  font-size: .72rem; font-weight: 700; color: #6b7280;
  transition: all .13s; line-height: 1.4;
}
.rz-note-sz-btn:hover { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
.rz-note-sz-lbl { font-size: .68rem; color: #9ca3af; min-width: 28px; text-align: center; }
.rz-note-inp {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid #e5e7eb; background: #f9fafb;
  font-size: .9rem; color: #374151; resize: vertical;
  font-family: inherit; outline: none; min-height: 70px;
  transition: border-color .14s;
}
.rz-note-inp:focus { border-color: #a78bfa; background: #fff; }

/* History */
.rz-history-wrap { width: 100%; max-width: 480px; }
.rz-hist-lbl { font-size: .7rem; color: #9ca3af; margin-bottom: 6px; text-align: center; }
.rz-history {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-height: 160px; overflow-y: auto; padding: 2px;
}
.rz-hist-item {
  padding: 4px 12px; border-radius: 999px;
  background: #f3f4f6; color: #374151;
  font-size: .8rem; border: 1px solid #e5e7eb;
  cursor: pointer; transition: all .13s;
}
.rz-hist-item:hover { border-color: #a78bfa; color: #6d28d9; background: #ede9fe; }
.rz-hist-unknown { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.rz-hist-unknown:hover { background: #fecaca; }
.rz-hist-known   { background: #dcfce7; color: #15803d; border-color: #86efac; }
.rz-hist-known:hover { background: #bbf7d0; }
.rz-hist-current { font-weight: 800; box-shadow: 0 0 0 2px #7c3aed; }
.rz-hist-new {
  background: #ede9fe; color: #5b21b6;
  border-color: #c4b5fd; font-weight: 700;
}

/* Notes summary */
.rz-notes-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: rzNovFadeIn .18s ease;
}
@keyframes rzNovFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.rz-notes-ov-box {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  width: min(720px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  animation: rzNovSlideUp .18s ease;
}
@keyframes rzNovSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.rz-notes-ov-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
  flex-shrink: 0;
}
.rz-notes-ov-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f5f9;
  flex: 1;
}
.rz-notes-ov-count {
  font-size: .8rem;
  color: #a78bfa;
  font-weight: 600;
  background: #312e81;
  padding: 2px 10px;
  border-radius: 999px;
}
.rz-notes-ov-copy {
  padding: 5px 12px; border-radius: 7px;
  border: 1.5px solid #334155;
  background: transparent; color: #94a3b8;
  font-size: .8rem; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  white-space: nowrap;
}
.rz-notes-ov-copy:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.rz-notes-ov-copy.copied { background: #22c55e; border-color: #22c55e; color: #fff; }
.rz-notes-ov-clear {
  padding: 5px 12px; border-radius: 7px;
  border: 1.5px solid #fca5a5; background: #fff5f5; color: #dc2626;
  font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .14s;
  white-space: nowrap;
}
.rz-notes-ov-clear:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.rz-notes-ov-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: #334155;
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.rz-notes-ov-close:hover { background: #ef4444; color: #fff; }
.rz-notes-ov-body {
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rz-notes-ov-item {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 12px 14px;
}
.rz-notes-ov-item-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.rz-notes-ov-word {
  font-size: 1rem;
  font-weight: 700;
  color: #a78bfa;
}
.rz-notes-ov-ipa {
  font-size: .82rem;
  color: #94a3b8;
}
.rz-notes-ov-def {
  font-size: .8rem;
  color: #64748b;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rz-notes-ov-del {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: transparent;
  color: #64748b;
  font-size: .78rem;
  cursor: pointer;
  transition: all .13s;
}
.rz-notes-ov-del:hover { background: #fee2e2; border-color: #f87171; color: #dc2626; }
.rz-notes-ov-text {
  font-size: .88rem;
  color: #cbd5e1;
  line-height: 1.55;
  white-space: pre-wrap;
}
.rz-notes-sum-btn {
  padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid #d1d5db; background: #f3f4f6;
  color: #6b7280; font-size: .78rem; cursor: pointer;
  transition: all .14s; margin-top: 8px;
}
.rz-notes-sum-btn:hover { border-color: #a78bfa; color: #6d28d9; background: #ede9fe; }
.rz-notes-sum-btn.active { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; font-weight: 600; }
.rz-notes-summary { width: 100%; max-width: 480px; margin-top: 8px; }
.rz-notes-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow-y: auto; padding: 2px;
}
.rz-note-sum-item {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  padding: 8px 12px;
}
.rz-note-sum-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 4px;
}
.rz-note-sum-word {
  font-weight: 700; color: #5b21b6; font-size: .9rem;
}
.rz-note-sum-text {
  color: #4b5563; font-size: .82rem;
  white-space: pre-wrap; line-height: 1.45;
}
.rz-note-sum-del {
  background: none; border: none; cursor: pointer;
  color: #9ca3af; font-size: .78rem;
  padding: 2px 6px; border-radius: 4px;
  transition: all .13s; flex-shrink: 0;
}
.rz-note-sum-del:hover { color: #dc2626; background: #fee2e2; }

/* Reading missing-words dialog tabs */
.rd-miss-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.rd-miss-tab {
  padding: 4px 14px; border-radius: 999px;
  border: 1.5px solid #d1d5db; background: #f3f4f6;
  color: #6b7280; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .14s;
}
.rd-miss-tab:hover { border-color: #60a5fa; color: #1d4ed8; background: #eff6ff; }
.rd-miss-tab.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.wb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  background: #2d5a1b;
}
.wb-overlay.active { display: flex; }

/* ── PDF Library Overlay ── */
.pdf-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  flex-direction: column;
  background: #0f172a;
  overflow: hidden;
}
.pdf-overlay.active { display: flex; }
.pdf-overlay-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  flex-shrink: 0;
}
.pdf-overlay-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1f5f9;
  flex: 1;
}
.pdf-overlay-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  gap: 14px;
}
.pdf-upload-btn {
  padding: 6px 14px;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.pdf-upload-btn:hover { background: #2563eb; }
.pdf-section-hdr {
  font-size: .8rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 0 2px;
  border-bottom: 1px solid #1e293b;
}
.pdf-community-card { position: relative; }
.pdf-book-uploader { font-size: .65rem; color: #94a3b8; }
.pdf-del-btn {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(239,68,68,.18);
  color: #f87171;
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: .75rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.pdf-community-card:hover .pdf-del-btn { opacity: 1; }

/* Upload Modal */
.pdf-upload-modal {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdf-upload-box {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  width: min(480px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.pdf-upload-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #334155;
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}
.pdf-upload-close {
  background: none; border: none; color: #94a3b8;
  font-size: 1.1rem; cursor: pointer; padding: 2px 6px;
}
.pdf-upload-close:hover { color: #f87171; }
.pdf-upload-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 20px;
}
.pdf-form-lbl { font-size: .78rem; color: #94a3b8; }
.pdf-form-inp {
  background: #0f172a;
  border: 1.5px solid #334155;
  border-radius: 7px;
  color: #f1f5f9;
  font-size: .9rem;
  padding: 7px 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.pdf-form-inp:focus { border-color: #3b82f6; outline: none; }
.pdf-file-drop {
  border: 2px dashed #334155;
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  color: #94a3b8;
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pdf-file-drop:hover { border-color: #3b82f6; background: rgba(59,130,246,.05); color: #93c5fd; }
.pdf-upload-progress {
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #334155;
}
.pdf-upload-bar {
  height: 100%;
  background: #3b82f6;
  border-radius: 3px;
  width: 0;
  transition: width .2s;
}
.pdf-upload-msg { font-size: .82rem; min-height: 18px; }
.pdf-upload-submit {
  padding: 9px;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  margin-top: 4px;
}
.pdf-upload-submit:hover:not(:disabled) { background: #2563eb; }
.pdf-upload-submit:disabled { opacity: .5; cursor: not-allowed; }

.wb-topbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.wb-toolbar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.wb-toolbar-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.wb-toolbar-row::-webkit-scrollbar { display: none; }
.wb-topbar::-webkit-scrollbar { display: none; }

.wb-title {
  font-size: .88rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0 2px;
}

.wb-page-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #1a1a2e;
  border-bottom: 1px solid #333;
  overflow-x: auto;
  flex-shrink: 0;
}
.wb-page-bar::-webkit-scrollbar { display: none; }
.wb-page-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  flex-wrap: nowrap;
}
.wb-page-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 10px;
  background: #2a2a3e;
  border: 1px solid #444;
  border-radius: 6px;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  user-select: none;
}
.wb-page-tab:hover { background: #3a3a5e; color: #ddd; }
.wb-page-tab.active {
  background: #2563eb;
  border-color: #3b82f6;
  color: #fff;
}
.wb-page-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  border: none;
  padding: 0;
  opacity: .6;
  transition: opacity .15s, background .15s;
}
.wb-page-del:hover { opacity: 1; background: rgba(255,255,255,.2); }
.wb-page-tab.active .wb-page-del:hover { background: rgba(255,255,255,.25); }
.wb-new-page-btn {
  flex-shrink: 0;
  padding: 3px 10px;
  background: #2a2a3e;
  border: 1px dashed #555;
  border-radius: 6px;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.wb-new-page-btn:hover { background: #3a3a5e; color: #fff; border-color: #888; }

.wb-canvas-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #2d5a1b;
  touch-action: none;
}
.wb-scroll-btns {
  position: absolute; bottom: 24px; right: 16px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 20;
}
.wb-scroll-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
  font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .15s;
}
.wb-scroll-btn:hover { background: rgba(255,255,255,.35); }
#wbCanvasInner {
  transform-origin: 0 0;
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
}
#wbCanvas {
  display: block;
  touch-action: none;
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
}
.wb-zoom-lbl {
  font-size: 12px;
  color: #000;
  min-width: 38px;
  text-align: center;
  font-family: monospace;
  user-select: none;
  flex-shrink: 0;
}

.wb-boards { display: flex; gap: 4px; flex-shrink: 0; }
.wb-board-btn {
  width: 30px; height: 30px;
  border: 2.5px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 1rem;
  background: none;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
  flex-shrink: 0;
}
.wb-board-btn.active { border-color: var(--accent2); }

.wb-color-picker { position: relative; flex-shrink: 0; }
.wb-cur-color {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2.5px solid var(--border2);
  cursor: pointer;
  padding: 3px;
  background: none;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.wb-cur-color:hover { border-color: var(--accent2); }
#wbCurColorSwatch {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block;
  background: #f0ede4;
}
.wb-color-drop {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  z-index: 99999;
  min-width: 110px;
}
.wb-color-drop.open { display: block; }
.wb-color-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.wb-preset {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,.12);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.wb-preset:hover { transform: scale(1.15); }
.wb-preset.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent2); transform: scale(1.1); }
.wb-custom-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.wb-custom-label input[type="color"] {
  flex: 1;
  height: 28px;
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  padding: 2px 3px;
  cursor: pointer;
  background: none;
}

.wb-sizes { display: flex; gap: 3px; flex-shrink: 0; }
.wb-size-btn {
  padding: 4px 8px;
  border: 1.5px solid var(--border2);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
  color: var(--ink2);
  transition: all .12s;
  flex-shrink: 0;
}
.wb-size-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }

.wb-tool-btn {
  padding: 5px 10px;
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink2);
  white-space: nowrap;
  transition: all .12s;
  flex-shrink: 0;
}
.wb-tool-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.wb-tool-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }

.wb-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; margin: 0 2px; }
.wb-tcolor-pick { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.wb-tcolor-lbl { font-size: .65rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.wb-tcolor-btn { width: 26px; height: 26px; padding: 2px; }
.wb-tcolor-btn > span { width: 100%; height: 100%; border-radius: 50%; display: block; }

.wb-accent-group {
  display: inline-flex; border-radius: 7px; overflow: hidden;
  border: 1.5px solid var(--border2); flex-shrink: 0;
}
.wb-accent-btn {
  padding: 4px 9px; border: none; background: none;
  font-size: .72rem; font-weight: 700; color: var(--ink2);
  cursor: pointer; transition: background .12s, color .12s;
  white-space: nowrap;
}
.wb-accent-btn + .wb-accent-btn { border-left: 1.5px solid var(--border2); }
.wb-accent-btn:hover { background: rgba(124,58,237,.08); color: #7c3aed; }
.wb-accent-btn.active { background: #7c3aed; color: #fff; }

.wb-kbd-hint {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 7px;
  background: rgba(124,58,237,.08); border: 1px dashed rgba(124,58,237,.35);
  font-size: .68rem; font-weight: 700; color: #7c3aed;
  white-space: nowrap; cursor: default; flex-shrink: 0;
  user-select: none;
}
.wb-kbd-icon { font-size: .8rem; }

.wb-custom-color-btn {
  width: 30px; height: 30px;
  border: 2px dashed var(--border2);
  border-radius: 7px;
  cursor: pointer;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: border-color .15s;
  user-select: none;
}
.wb-custom-color-btn:hover { border-color: var(--accent2); }

.wb-patterns { display: flex; gap: 3px; flex-shrink: 0; }
.wb-pat-btn {
  padding: 4px 9px;
  border: 1.5px solid var(--border2);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink2);
  transition: all .12s;
  flex-shrink: 0;
}
.wb-pat-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.wb-pat-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }

.wb-brush-drop-wrap {
  position: relative;
  flex-shrink: 0;
}
.wb-brush-arrow {
  font-size: .6rem;
  margin-left: 3px;
  opacity: .7;
}
.wb-brush-drop {
  display: none;
  position: fixed;
  z-index: 99000;
  background: var(--card2, #1e2330);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  padding: 6px;
  gap: 5px;
  flex-direction: column;
  min-width: 110px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.wb-brush-drop.open { display: flex; }
.wb-brush-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--border2);
  border-radius: 7px;
  background: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink2);
  white-space: nowrap;
  transition: background .1s, color .1s, border-color .1s;
  text-align: left;
}
.wb-brush-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.wb-brush-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }

/* ── Size drop panel ── */
.wb-size-drop {
  display: none;
  position: fixed;
  z-index: 99001;
  background: var(--card2, #1e2330);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  padding: 8px 6px;
  gap: 5px;
  flex-direction: column;
  min-width: 120px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.wb-size-drop.open { display: flex; }
.wb-size-drop-title {
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 4px 2px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 2px;
}
.wb-sd-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1.5px solid var(--border2);
  border-radius: 7px;
  background: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  transition: background .1s, color .1s, border-color .1s;
  white-space: nowrap;
}
.wb-sd-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.wb-sd-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }
.wb-sd-dot {
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.wb-sd-custom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 4px 0;
  font-size: .72rem;
  color: #fff;
}
.wb-sd-custom input[type="range"] {
  width: 100%;
  accent-color: var(--accent2);
}

/* ── Inline text editor ── */
.wb-inline-edit {
  position: fixed; z-index: 100001;
  background: #1a1f35; border: 1.5px solid #4a5580;
  border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 7px;
  width: 250px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.wb-ie-word {
  background: #0d1124; border: 1px solid #4a5580; border-radius: 6px;
  color: #fff; font-size: 1.1rem; font-weight: 700;
  padding: 5px 8px; width: 100%; box-sizing: border-box;
}
.wb-ie-ipa {
  background: #0d1124; border: 1px solid #4a5580; border-radius: 6px;
  color: #a7f3d0; font-size: .85rem; font-style: italic;
  padding: 4px 8px; width: 100%; box-sizing: border-box;
}
.wb-ie-info {
  background: #0d1124; border: 1px solid #4a5580; border-radius: 6px;
  color: #d1d5db; font-size: .82rem; resize: vertical;
  padding: 4px 8px; width: 100%; box-sizing: border-box; line-height: 1.5;
}
.wb-ie-btns { display: flex; gap: 6px; }
.wb-ie-ok {
  flex: 1; padding: 5px 0; border-radius: 6px; border: none;
  background: #166534; color: #4ade80; font-weight: 700;
  cursor: pointer; transition: background .13s;
}
.wb-ie-ok:hover { background: #14532d; }
.wb-ie-cancel {
  padding: 5px 10px; border-radius: 6px; border: none;
  background: #3f2828; color: #f87171;
  cursor: pointer; transition: background .13s;
}
.wb-ie-cancel:hover { background: #7f1d1d; }
.wb-ie-word::placeholder, .wb-ie-ipa::placeholder, .wb-ie-info::placeholder { color: #4a5580; }

/* ── Text tool ── */
.wb-text-box {
  display: none;
  position: fixed;
  z-index: 100000;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
  width: 280px;
}
@keyframes wbBoxIn { from { transform: scale(.95) translateY(-4px); } to { transform: none; } }
.wb-text-box.open { display: block; animation: wbBoxIn .08s ease-out; }
.wb-text-box-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-size: .82rem; font-weight: 800; color: var(--ink);
}
.wb-text-box-head button {
  background: none; border: none; font-size: 1rem;
  cursor: pointer; color: var(--muted); line-height: 1;
}
.wb-text-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  padding: 8px;
  font-size: .9rem;
  resize: none;
  outline: none;
  color: var(--ink);
  background: var(--surface2);
  font-family: inherit;
  margin-bottom: 8px;
}
.wb-text-input:focus { border-color: var(--accent2); }
.wb-text-meta {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 10px;
}
.wb-font-select {
  flex: 1;
  padding: 5px 6px;
  border: 1.5px solid var(--border2);
  border-radius: 7px;
  font-size: .75rem;
  color: var(--ink);
  background: var(--surface2);
  outline: none;
  cursor: pointer;
  min-width: 0;
}
.wb-font-select:focus { border-color: var(--accent2); }
.wb-text-size-sel {
  width: 64px; flex-shrink: 0;
  padding: 5px 4px;
  border: 1.5px solid var(--border2);
  border-radius: 7px;
  font-size: .75rem;
  color: var(--ink);
  background: var(--surface2);
  outline: none;
  cursor: pointer;
}
.wb-text-color-swatch {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid var(--border2);
  cursor: pointer;
  display: block;
  background: #f0ede4;
  transition: border-color .12s;
}
.wb-text-color-swatch:hover { border-color: var(--accent2); }
.wb-text-checks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.wb-check-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1.5px solid var(--border2);
  border-radius: 20px;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink2);
  transition: all .12s;
  user-select: none;
}
.wb-check-item:has(input:checked) {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}
.wb-check-item input[type="checkbox"] { display: none; }

.wb-ipa-chip-wrap { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wb-check-chip {
  display: flex; align-items: center; padding: 4px 11px;
  border-radius: 999px; border: 1.5px solid var(--border2);
  background: transparent; color: var(--ink2);
  font-size: .72rem; font-weight: 700; cursor: pointer;
  transition: all .13s; user-select: none;
}
.wb-check-chip:hover { border-color: var(--accent2); color: var(--ink2); }
.wb-check-chip.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.wb-ipa-var-row { display: flex; align-items: center; gap: 3px; }
.wb-var-btn {
  padding: 2px 8px; border-radius: 999px;
  border: 1.5px solid #444; background: #252525; color: #999;
  font-size: .7rem; font-weight: 600; cursor: pointer;
  transition: all .13s;
}
.wb-var-btn:hover { border-color: #777; color: #ccc; }
.wb-var-btn.active { background: #1d4ed8; border-color: #3b82f6; color: #fff; }
.wb-ipa-edit-inp {
  width: 100%; box-sizing: border-box;
  background: #1a1a1a; color: #c7d2fe;
  border: 1px solid #374151; border-radius: 6px;
  padding: 5px 9px; font-size: .8rem;
  font-style: italic; font-family: 'Segoe UI', sans-serif;
  outline: none;
}
.wb-ipa-edit-inp:focus { border-color: #6366f1; }

.wb-dir-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
}
.wb-dir-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: transparent;
  color: var(--ink2);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.wb-dir-btn.active {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}
.wb-align-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 5px;
  width: 100%;
}
.wb-align-toggle.hidden { display: none; }
.wb-align-btn {
  flex: 1;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: transparent;
  color: var(--ink2);
  font-size: .73rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.wb-align-btn.active {
  background: #0369a1;
  border-color: #0369a1;
  color: #fff;
}

.wb-text-ok {
  width: 100%;
  padding: 8px;
  background: var(--accent2);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .12s;
}
.wb-text-ok:hover { opacity: .88; }

/* ── Insert dropdown ── */
.wb-insert-drop {
  display: none;
  position: fixed;
  z-index: 10002;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 12px;
  width: 300px;
  max-height: 420px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
}
.wb-insert-drop.open { display: block; }
.wb-insert-section-title {
  font-size: .72rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.wb-img-upload-label {
  display: block;
  text-align: center;
  padding: 8px 12px;
  background: #2a2a2a;
  border: 1.5px dashed #555;
  border-radius: 8px;
  color: #ccc;
  font-size: .8rem;
  cursor: pointer;
  transition: background .12s;
}
.wb-img-upload-label:hover { background: #333; border-color: var(--accent2); }
.wb-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}
.wb-icon-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 5px 2px;
  cursor: pointer;
  text-align: center;
  transition: background .1s, border-color .1s;
}
.wb-icon-btn:hover { background: #2e2e2e; border-color: #555; }

/* ── IPA Dropdown Panel ── */
.wb-ipa-drop {
  display: none;
  position: fixed;
  z-index: 10003;
  background: #12172b;
  border: 1px solid #2a3050;
  border-radius: 14px;
  padding: 11px 13px 13px;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 12px 48px rgba(0,0,0,.85);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  min-width: 420px;
}
.wb-ipa-drop.open { display: flex; }
.wb-ipa-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid #2a3050; }
.wb-ipa-ctl-group { display: flex; align-items: center; gap: 4px; }
.wb-ipa-ctl-lbl { font-size: .68rem; color: #aaa; white-space: nowrap; margin-right: 2px; }
.wb-ipa-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
  transition: border-color .12s, transform .1s;
}
.wb-ipa-swatch:hover, .wb-ipa-swatch.active { border-color: #fff; transform: scale(1.2); }
.wb-ipa-custom {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #555;
  background: conic-gradient(red,yellow,green,cyan,blue,magenta,red);
  cursor: pointer; position: relative; display: inline-flex;
  align-items: center; justify-content: center; font-size: .58rem; flex-shrink: 0;
}
.wb-ipa-sz-btn {
  width: 22px; height: 22px; border-radius: 5px; border: 1px solid #444;
  background: #2a2a2a; color: #ccc; font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wb-ipa-sz-btn:hover { background: #374151; }
#wbIpaSz { min-width: 24px; text-align: center; color: #fff; font-size: .85rem; }

/* IPA Chart */
.wb-ipa-chart { display: flex; flex-direction: column; gap: 2px; }
.wb-ipa-sec-hdr { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.wb-ipa-side-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.wb-ipa-sub-lbl { font-size: .6rem; color: #94a3b8; }
.wb-ipa-vowel-row, .wb-ipa-con-row { display: flex; gap: 2px; }
.wb-ipa-empty { width: 50px; height: 38px; }
.wb-ipa-cell {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 38px; border-radius: 6px; border: none;
  cursor: pointer; padding: 2px;
  transition: filter .12s, transform .1s;
}
.wb-ipa-cell:hover  { filter: brightness(1.3); transform: scale(1.07); }
.wb-ipa-cell:active { transform: scale(0.94); }
.wb-ipa-mono   { background: #0d9488; color: #fff; }
.wb-ipa-diph   { background: #1e3a6e; color: #c7d9ff; }
.wb-ipa-con    { background: #c0504d; color: #fff; }
.wb-ipa-stress { background: #78350f; color: #fde68a; min-width: 44px; }
.wb-ipa-multi-btn {
  padding: 3px 10px; border-radius: 6px; border: 1.5px solid #4a5568;
  background: transparent; color: #aaa; font-size: .75rem; cursor: pointer;
  transition: all .13s; white-space: nowrap;
}
.wb-ipa-multi-btn:hover { border-color: #fbbf24; color: #fbbf24; }
.wb-ipa-multi-btn.active { background: #78350f; border-color: #fbbf24; color: #fde68a; font-weight: 700; }
.wb-ipa-multi-row {
  display: none; align-items: center; gap: 5px;
  padding-top: 6px;
}
.wb-ipa-buf-inp {
  width: 180px; background: #1a1f35; border: 1.5px solid #fbbf24; border-radius: 6px;
  color: #fde68a; font-size: 1rem; padding: 3px 8px;
  font-family: 'Segoe UI', 'DejaVu Sans', sans-serif;
}
.wb-ipa-buf-clear, .wb-ipa-buf-place {
  padding: 4px 10px; border-radius: 6px; border: none; cursor: pointer;
  font-size: .8rem; transition: all .13s; white-space: nowrap;
}
.wb-ipa-buf-clear { background: #3f2828; color: #f87171; }
.wb-ipa-buf-clear:hover { background: #7f1d1d; }
.wb-ipa-buf-place { background: #14532d; color: #4ade80; font-weight: 700; }
.wb-ipa-buf-place:hover { background: #166534; }
.wb-ipa-sym  { font-size: 1.28rem; line-height: 1; font-family: 'Segoe UI', 'DejaVu Sans', 'Noto Sans', sans-serif; }
.wb-ipa-ex   { font-size: .52rem; opacity: .82; }

/* ── Shape inline color picker ── */
.wb-text-color-picker {
  position: fixed;
  z-index: 10005;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  box-shadow: 0 6px 24px rgba(0,0,0,.7);
  max-width: 260px;
}
.wb-shape-color-picker {
  position: fixed;
  z-index: 10005;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  box-shadow: 0 6px 24px rgba(0,0,0,.7);
  max-width: 260px;
}
.wb-scp-label { font-size: .68rem; color: #aaa; white-space: nowrap; margin-right: 2px; }
.wb-scp-fill-row { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 5px; padding-top: 5px; border-top: 1px solid #333; }
#wbFillSelect {
  flex: 1;
  background: #2a2a2a;
  color: #ddd;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 3px 5px;
  font-size: .72rem;
  cursor: pointer;
  outline: none;
}
#wbFillSelect:focus { border-color: #3b82f6; }
.wb-scp-flip-row { align-items: center; gap: 5px; width: 100%; margin-top: 4px; padding-top: 5px; border-top: 1px solid #333; }
.wb-scp-layer-row { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 4px; padding-top: 5px; border-top: 1px solid #333; }
.wb-scp-layer-btn {
  flex: 1;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #ccc;
  font-size: .72rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wb-scp-layer-btn:hover { background: #374151; border-color: #6b7280; color: #fff; }
.wb-scp-flip-btn {
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #ccc;
  font-size: .72rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wb-scp-flip-btn:hover { background: #374151; border-color: #6b7280; }
.wb-scp-flip-btn.active { background: #2563eb; border-color: #3b82f6; color: #fff; }
.wb-scp-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .12s, transform .1s;
  flex-shrink: 0;
}
.wb-scp-swatch:hover, .wb-scp-swatch.active { border-color: #fff; transform: scale(1.2); }
.wb-scp-custom {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #555;
  background: conic-gradient(red,yellow,green,cyan,blue,magenta,red);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── Shape dropdown ── */
.wb-shape-drop {
  display: none;
  position: fixed;
  z-index: 10002;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 12px;
  width: 300px;
  max-height: 420px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
}
.wb-shape-drop.open { display: block; }
.wb-shape-color-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.wb-sc-btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .12s, transform .1s;
  position: relative;
  flex-shrink: 0;
}
.wb-sc-btn:hover, .wb-sc-btn.active { border-color: #fff; transform: scale(1.15); }
.wb-sc-custom { overflow: hidden; }
.wb-shape-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.wb-shape-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  background: #2a2a2a;
  border: 1.5px solid #3a3a3a;
  border-radius: 8px;
  color: #60a5fa;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wb-shape-btn:hover { background: #1d3a5f; border-color: #60a5fa; }
.wb-shape-btn span { font-size: .58rem; color: #aaa; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44px; }

/* ── Save dialog ── */
.wb-save-dialog {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
}
.wb-save-dialog.active { display: flex; }
.wb-save-dialog-inner {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 18px 20px;
  width: min(92vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.wb-save-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .88rem;
  font-weight: 700;
  color: #e8e4dc;
}
.wb-save-dialog-head button {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
}
.wb-save-title-input {
  width: 100%;
  padding: 8px 10px;
  background: #2a2a2a;
  border: 1.5px solid #555;
  border-radius: 8px;
  color: #e8e4dc;
  font-size: .88rem;
  outline: none;
  box-sizing: border-box;
}
.wb-save-title-input:focus { border-color: var(--accent2); }
.wb-save-dialog-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.wb-save-cancel-btn {
  padding: 6px 14px;
  background: #333;
  border: 1px solid #555;
  border-radius: 8px;
  color: #aaa;
  font-size: .8rem;
  cursor: pointer;
}
.wb-save-ok-btn {
  padding: 6px 16px;
  background: #16a34a;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.wb-save-ok-btn:disabled { opacity: .55; cursor: default; }

/* ── Gallery panel ── */
.wb-gallery-panel {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(100vw, 320px);
  z-index: 15;
  background: #1a1a1a;
  border-left: 1px solid #333;
  flex-direction: column;
  overflow: hidden;
}
.wb-gallery-panel.active { display: flex; }
.wb-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: .88rem;
  font-weight: 700;
  color: #e8e4dc;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}
.wb-gallery-head button {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
}
.wb-gallery-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wb-gallery-loading,
.wb-gallery-empty {
  color: #888;
  font-size: .82rem;
  text-align: center;
  padding: 30px 10px;
}
.wb-gallery-card {
  background: #242424;
  border: 1px solid #333;
  border-radius: 10px;
  overflow: hidden;
}
.wb-gallery-thumb-wrap {
  position: relative;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #333;
}
.wb-gallery-thumb-wrap:hover .wb-gallery-thumb-open-hint { opacity: 1; }
.wb-gallery-thumb-open-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  color: #86efac;
  font-size: .95rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.wb-gallery-thumb {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 160px;
}
.wb-gallery-thumb-placeholder {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: #2a2a2a;
}
.wb-gallery-info {
  padding: 8px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wb-gallery-title {
  font-size: .82rem;
  font-weight: 700;
  color: #e8e4dc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-gallery-date {
  font-size: .72rem;
  color: #888;
}
.wb-gallery-actions {
  display: flex;
  gap: 6px;
  padding: 6px 10px 10px;
}
.wb-gal-btn {
  flex: 1;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid #444;
  background: #2e2e2e;
  color: #ccc;
  font-size: .76rem;
  cursor: pointer;
  text-align: center;
}
.wb-gal-btn:hover { background: #3a3a3a; }
.wb-gal-dl { flex: 1.5; color: #7dd3fc; border-color: #075985; }
.wb-gal-dl:hover { background: #0c4a6e; }
.wb-gal-del { flex: 0 0 auto; color: #f87171; border-color: #7f1d1d; }
.wb-gal-del:hover { background: #450a0a; }

/* ── In-app browser warning ── */
#inAppBrowserWarn {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: 'Nunito', sans-serif;
}
.iab-card {
  background: #1c1c1e;
  border: 1.5px solid #f59e0b;
  border-radius: 18px;
  padding: 24px 20px 20px;
  max-width: 380px;
  width: 100%;
  color: #e8e4dc;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.iab-icon {
  font-size: 2.4rem;
  text-align: center;
}
.iab-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fbbf24;
  text-align: center;
}
.iab-body {
  font-size: .88rem;
  color: #ccc;
  text-align: center;
  line-height: 1.5;
}
.iab-steps {
  background: #111;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.iab-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .84rem;
  color: #d1d5db;
  line-height: 1.45;
}
.iab-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f59e0b;
  color: #000;
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.iab-step-or {
  font-size: .76rem;
  color: #666;
  text-align: center;
  padding: 2px 0;
}
.iab-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d0d0d;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px 10px;
  overflow: hidden;
}
.iab-url-text {
  flex: 1;
  font-size: .73rem;
  color: #7dd3fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iab-copy-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.iab-copy-btn:hover { background: #2563eb; }
.iab-dismiss {
  width: 100%;
  padding: 9px;
  background: none;
  border: 1px solid #444;
  border-radius: 8px;
  color: #666;
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
}
.iab-dismiss:hover { border-color: #666; color: #999; }

/* ── Toast notification ── */
.wb-toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: .82rem;
  font-weight: 600;
  color: #e8e4dc;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  z-index: 30;
}
.wb-toast.wb-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wb-toast.wb-toast-ok { border-color: #16a34a; color: #86efac; }
.wb-toast.wb-toast-err { border-color: #dc2626; color: #fca5a5; }

/* ── ROLE-PLAY OVERLAY ── */
.source-card-rp { border-color: #7c3aed; }
.source-card-rp:hover { background: #f5f3ff; border-color: #6d28d9; }

.rp-overlay {
  display: none; position: fixed; inset: 0; z-index: 9100;
  flex-direction: column; background: #f5f3ff;
}
.rp-header {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid #ddd6fe; flex-shrink: 0; flex-wrap: wrap;
}
.rp-back-btn {
  padding: 6px 14px; border-radius: 8px; border: 1px solid #d1d5db;
  background: #fff; cursor: pointer; font-size: .88rem; color: #374151;
}
.rp-back-btn:hover { background: #f3f4f6; }
.rp-title { font-size: 1.05rem; font-weight: 700; color: #5b21b6; flex: 1; }
.rp-bg-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rp-color-picker { width: 26px; height: 26px; border: none; border-radius: 6px; cursor: pointer; padding: 0; background: none; }
.rp-bg-chip { padding: 4px 8px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; font-size: .75rem; color: #6b7280; }
.rp-bg-chip.active { background: #ede9fe; border-color: #7c3aed; color: #5b21b6; font-weight: 700; }

.rp-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.rp-left {
  width: 260px; min-width: 160px; flex-shrink: 0; display: flex;
  flex-direction: column; border-right: 1px solid #ddd6fe; background: rgba(255,255,255,.6);
}
.rp-resizer { width: 5px; cursor: col-resize; background: transparent; flex-shrink: 0; transition: background .15s; }
.rp-resizer:hover { background: rgba(124,58,237,.2); }
.rp-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; }
.rp-right-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #9ca3af; }
.rp-mobile-back-bar { display: none; }
.rp-right-empty span { font-size: 2.5rem; }
.rp-right-empty p { font-size: .9rem; margin: 0; }

/* Left panel */
.rp-level-bar { display: flex; gap: 4px; padding: 6px 10px; background: #fafafa; border-bottom: 1px solid #ede9fe; flex-shrink: 0; }
.rp-level-tab {
  flex: 1; padding: 4px 0; border: 1.5px solid #e2e8f0; background: #fff;
  border-radius: 20px; font-size: .75rem; font-weight: 600; color: #6b7280; cursor: pointer;
  transition: all .12s;
}
.rp-level-tab.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.rp-level-tab:hover:not(.active) { background: #ede9fe; border-color: #c4b5fd; color: #7c3aed; }
.rp-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid #ddd6fe; flex-shrink: 0; }
.rp-panel-title { font-size: .88rem; font-weight: 700; color: #374151; flex: 1; }
.rp-badge { display: inline-block; background: #7c3aed; color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 1px 7px; }
.rp-add-btn { padding: 4px 11px; background: #7c3aed; color: #fff; border: none; border-radius: 7px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.rp-add-btn:hover { background: #6d28d9; }
.rp-new-folder-form { padding: 8px 10px; border-bottom: 1px solid #ddd6fe; background: #f5f3ff; flex-shrink: 0; }
.rp-folder-name-inp { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid #c4b5fd; border-radius: 7px; font-size: .85rem; outline: none; }
.rp-folder-name-inp:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.15); }
.rp-folder-form-btns { display: flex; gap: 6px; margin-top: 6px; }
.rp-save-btn { padding: 4px 13px; background: #7c3aed; color: #fff; border: none; border-radius: 7px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.rp-save-btn:hover { background: #6d28d9; }
.rp-cancel-btn { padding: 4px 11px; background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; border-radius: 7px; font-size: .8rem; cursor: pointer; }
.rp-cancel-btn:hover { background: #e5e7eb; }
.rp-folder-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
.rp-empty-folders { padding: 20px 12px; color: #374151; font-size: .82rem; text-align: center; }
.rp-folder-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background .12s; }
.rp-folder-row:hover { background: #f5f3ff; }
.rp-folder-active { background: #ede9fe !important; }
.rp-folder-icon { font-size: 1.1rem; flex-shrink: 0; }
.rp-folder-info { flex: 1; overflow: hidden; }
.rp-folder-name { display: block; font-size: .88rem; font-weight: 600; color: #3b0764; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-folder-cc { display: block; font-size: .75rem; color: #9ca3af; }
.rp-folder-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.rp-folder-row:hover .rp-folder-actions { opacity: 1; }
.rp-folder-edit-btn, .rp-folder-del-btn { width: 24px; height: 24px; border: none; border-radius: 5px; cursor: pointer; font-size: .78rem; display: flex; align-items: center; justify-content: center; }
.rp-folder-edit-btn { background: #e0f2fe; color: #0369a1; }
.rp-folder-del-btn  { background: #fee2e2; color: #dc2626; }

/* Right: content */
.rp-content-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.rp-content-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #ddd6fe; flex-shrink: 0; }
.rp-content-title { font-size: 1rem; font-weight: 700; color: #3b0764; flex: 1; }
.rp-add-conv-btn { padding: 6px 14px; background: #fff; color: #7c3aed; border: 1.5px solid #7c3aed; border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer; }
.rp-add-conv-btn:hover { background: #f5f3ff; }
.rp-add-conv-form { padding: 12px 16px; background: #f5f3ff; border-bottom: 1px solid #ddd6fe; flex-shrink: 0; }
.rp-add-conv-hint { font-size: .78rem; color: #6b7280; margin-bottom: 8px; line-height: 1.4; }
.rp-add-conv-hint code { background: #e5e7eb; border-radius: 3px; padding: 1px 4px; font-family: monospace; }
.rp-conv-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #c4b5fd; border-radius: 8px; font-size: .85rem; font-family: inherit; outline: none; resize: vertical; line-height: 1.5; color: #1e293b; background: #fff; }
.rp-conv-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.12); }
.rp-add-conv-btns { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.rp-conv-gpt-btn { margin-left: auto; padding: 5px 12px; background: #f0fdf4; color: #15803d; border: 1px solid #86efac; border-radius: 8px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.rp-conv-gpt-btn:hover { background: #dcfce7; border-color: #4ade80; }
.rp-save-conv-btn { padding: 6px 16px; background: #7c3aed; color: #fff; border: none; border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer; }
.rp-save-conv-btn:hover { background: #6d28d9; }
.rp-cancel-conv-btn { padding: 6px 13px; background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; border-radius: 8px; font-size: .85rem; cursor: pointer; }
.rp-cancel-conv-btn:hover { background: #e5e7eb; }
.rp-empty-convs { padding: 32px 20px; color: #9ca3af; font-size: .9rem; text-align: center; }

/* Conversation cards */
.rp-conv-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.rp-conv-card { background: #fff; border: 1px solid #ddd6fe; border-radius: 12px; padding: 12px 14px; }
.rp-conv-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rp-conv-card-title { font-size: .92rem; font-weight: 700; color: #3b0764; flex: 1; }
.rp-conv-card-meta { font-size: .75rem; color: #9ca3af; }
.rp-conv-preview { font-size: .8rem; color: #6b7280; line-height: 1.6; margin-bottom: 10px; }
.rp-prev-role { font-weight: 700; }
.rp-role-a { color: #2563eb; }
.rp-role-b { color: #059669; }
.rp-conv-card-btns { display: flex; gap: 8px; align-items: center; }
.rp-read-btn { padding: 5px 13px; background: #f5f3ff; color: #7c3aed; border: 1px solid #c4b5fd; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.rp-read-btn:hover { background: #ede9fe; }
.rp-practice-btn2 { padding: 5px 13px; background: #7c3aed; color: #fff; border: none; border-radius: 7px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.rp-practice-btn2:hover { background: #6d28d9; }
.rp-del-conv-btn { background: #fee2e2; color: #dc2626; border: none; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: .8rem; margin-left: auto; display: flex; align-items: center; justify-content: center; }
.rp-del-conv-btn:hover { background: #fecaca; }
.rp-edit-conv-btn { background: #dbeafe; color: #1d4ed8; border: none; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.rp-edit-conv-btn:hover { background: #bfdbfe; }

/* Chat bubbles (study + practice) */
.rp-conv-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.rp-conv-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #ddd6fe; flex-shrink: 0; }
.rp-font-size-ctrl { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.rp-fs-btn { padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #f9fafb; cursor: pointer; font-size: .8rem; font-weight: 700; color: #374151; font-family: inherit; line-height: 1.4; }
.rp-fs-btn:hover { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; }
.rp-conv-title { font-size: .95rem; font-weight: 700; color: #3b0764; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-back-conv-btn { padding: 5px 12px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; cursor: pointer; font-size: .82rem; color: #374151; flex-shrink: 0; }
.rp-back-conv-btn:hover { background: #f3f4f6; }
.rp-chat-view { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rp-bubble-wrap { display: flex; flex-direction: column; max-width: 70%; gap: 3px; }
.rp-side-left { align-self: flex-start; }
.rp-side-right { align-self: flex-end; align-items: flex-end; }
.rp-bubble-role-lbl { font-size: .72rem; font-weight: 700; color: #9ca3af; padding: 0 4px; }
.rp-bubble { padding: 10px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.5; }
.rp-bubble-a { background: #dbeafe; color: #1e3a8a; border-bottom-left-radius: 4px; }
.rp-bubble-b { background: #d1fae5; color: #064e3b; border-bottom-right-radius: 4px; }
.rp-bubble-active { box-shadow: 0 0 0 2px #7c3aed; }
.rp-past .rp-bubble { opacity: .75; }

/* Role selection */
.rp-role-select { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; }
.rp-role-select-title { font-size: 1.2rem; font-weight: 800; color: #3b0764; }
.rp-role-select-sub { font-size: .9rem; color: #6b7280; }
.rp-role-btns { display: flex; gap: 16px; margin-top: 8px; }
.rp-role-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 32px; border: 2px solid; border-radius: 14px; cursor: pointer; transition: all .15s; background: #fff; }
.rp-role-btn-a { border-color: #3b82f6; color: #1e40af; }
.rp-role-btn-a:hover { background: #dbeafe; }
.rp-role-btn-b { border-color: #10b981; color: #065f46; }
.rp-role-btn-b:hover { background: #d1fae5; }
.rp-role-letter { font-size: 2rem; font-weight: 900; line-height: 1; }
.rp-role-count { font-size: .78rem; color: #6b7280; }

/* Practice mode */
.rp-practice-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.rp-prac-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #ddd6fe; flex-shrink: 0; background: rgba(255,255,255,.8); }
.rp-prac-role-badge { font-size: .82rem; font-weight: 800; padding: 3px 12px; border-radius: 999px; }
.rp-role-badge-a { background: #dbeafe; color: #1e40af; }
.rp-role-badge-b { background: #d1fae5; color: #065f46; }
.rp-prac-score { font-size: .85rem; font-weight: 700; color: #7c3aed; flex: 1; }
.rp-prac-exit-btn { padding: 4px 12px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; cursor: pointer; font-size: .82rem; color: #6b7280; }
.rp-prac-exit-btn:hover { background: #f3f4f6; }

.rp-chat-scroll { flex: 1; overflow-y: auto; padding: 12px 16px; }
.rp-chat-lines { display: flex; flex-direction: column; gap: 10px; }
.rp-current .rp-bubble { animation: rp-pop .2s ease; }
@keyframes rp-pop { from { transform: scale(.96); opacity: .6; } to { transform: scale(1); opacity: 1; } }

/* User input area */
.rp-user-turn { background: #f5f3ff; border: 1.5px dashed #c4b5fd; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rp-user-trans-hint { background: #ede9fe; border-left: 3px solid #7c3aed; border-radius: 0 8px 8px 0; padding: 8px 14px; font-size: .9rem; color: #3b0764; font-weight: 500; line-height: 1.5; }
.rp-user-turn-lbl { font-size: .8rem; color: #5b21b6; font-weight: 600; }
.rp-user-inp-row { display: flex; gap: 8px; }
.rp-user-inp { flex: 1; padding: 8px 12px; border: 1.5px solid #c4b5fd; border-radius: 9px; font-size: .92rem; font-family: inherit; outline: none; }
.rp-user-inp:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.12); }
.rp-mic-btn { padding: 8px 14px; background: #ddd6fe; color: #4c1d95; border: none; border-radius: 9px; font-size: .85rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.rp-mic-btn:hover { background: #c4b5fd; }
.rp-mic-active { background: #fee2e2 !important; color: #991b1b !important; animation: rp-mic-pulse 1s ease-in-out infinite; }
@keyframes rp-mic-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.rp-check-btn { padding: 8px 14px; background: #7c3aed; color: #fff; border: none; border-radius: 9px; font-size: .9rem; font-weight: 700; cursor: pointer; }
.rp-check-btn:hover { background: #6d28d9; }

/* Partner continue */
.rp-continue-row { display: flex; align-items: center; gap: 10px; padding: 4px 0 0 4px; }
.rp-continue-btn { padding: 6px 16px; background: #fff; color: #7c3aed; border: 1.5px solid #c4b5fd; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.rp-continue-btn:hover { background: #ede9fe; }

/* Answered result */
.rp-bubble-ans { opacity: 1 !important; }
.rp-score-great { background: #dcfce7 !important; color: #166534 !important; }
.rp-score-ok    { background: #fef9c3 !important; color: #854d0e !important; }
.rp-score-bad   { background: #fee2e2 !important; color: #991b1b !important; }
.rp-result-row { padding: 2px 4px; }
.rp-result-badge { font-size: .85rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.rp-correct-line { font-size: .85rem; color: #374151; padding: 6px 10px; background: #f8fafc; border-left: 3px solid #7c3aed; border-radius: 0 8px 8px 0; }
.rp-correct-lbl { font-size: .8rem; margin-right: 4px; }
.rp-correct-text { font-weight: 600; color: #5b21b6; }
.rp-correct-trans { font-style: italic; color: #6b7280; font-size: .82rem; }
/* Translation under bubbles */
.rp-bubble-trans { font-size: .78rem; font-style: italic; color: #6b7280; padding: 0 4px 2px; line-height: 1.4; }
.rp-trans-hidden { display: none !important; }
.lp-section { margin-bottom: 16px; }
.lp-section-title { font-size: .82rem; font-weight: 800; color: #0369a1; background: #e0f2fe; border-radius: 7px; padding: 4px 10px; display: inline-block; margin-bottom: 6px; }
.lp-list { margin: 0; padding: 0 0 0 14px; list-style: disc; }
.lp-list li { font-size: .88rem; color: #374151; line-height: 1.7; }
.lp-ts { font-size: .75rem; color: #9ca3af; font-family: monospace; margin-right: 6px; }
.lp-empty { font-size: .88rem; color: #9ca3af; text-align: center; padding: 30px 0; }
.rp-bubble-ipa { font-size: .95rem; color: #0891b2; font-family: 'Segoe UI', sans-serif; padding: 1px 4px 3px; line-height: 1.5; letter-spacing: .3px; }
.rp-ipa-hidden { display: none !important; }
.rp-ipa-toggle-active { background: #e0f2fe !important; color: #0369a1 !important; border-color: #0891b2 !important; font-weight: 700; }
.rp-ipa-variant-sel { font-size: .75rem; padding: 2px 4px; border: 1.5px solid #d1d5db; border-radius: 6px; background: #f9fafb; color: #374151; cursor: pointer; height: 28px; }
/* Toggle trans button */
.rp-trans-toggle-btn { padding: 4px 11px; border: 1px solid #c4b5fd; border-radius: 7px; background: #ede9fe; cursor: pointer; font-size: .78rem; color: #5b21b6; flex-shrink: 0; transition: background .15s; }
.rp-trans-toggle-btn:hover { background: #ddd6fe; }
.rp-prac-nav { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 4px 0; }
.rp-retry-line-btn { padding: 8px 16px; background: #fff; color: #6b7280; border: 1.5px solid #d1d5db; border-radius: 9px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.rp-retry-line-btn:hover { background: #f3f4f6; color: #374151; }
.rp-tts-btn { background: none; border: none; cursor: pointer; font-size: .8rem; opacity: .55; padding: 0 2px; line-height: 1; vertical-align: middle; }
.rp-tts-btn:hover { opacity: 1; }
.rp-voice-row { display: flex; align-items: center; gap: 14px; padding: 5px 14px; background: rgba(0,0,0,.04); border-bottom: 1px solid rgba(0,0,0,.07); flex-shrink: 0; }
.rp-voice-lbl { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: #4b5563; white-space: nowrap; }
.rp-voice-sel { font-size: .78rem; padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #1e293b; max-width: 180px; }
.rp-next-btn { padding: 8px 20px; background: #1e293b; color: #fff; border: none; border-radius: 9px; font-size: .88rem; font-weight: 700; cursor: pointer; }
.rp-next-btn:hover { background: #334155; }

/* Keyboard hint */
.rp-kb-hint { font-size: .74rem; color: #9ca3af; display: flex; align-items: center; gap: 3px; }
.rp-kb-hint kbd { display: inline-block; padding: 1px 6px; background: #f1f5f9; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 4px; font-size: .7rem; font-family: inherit; color: #475569; line-height: 1.5; }

/* Grammar structures panel */
.rp-struct-panel { width: 560px; min-width: 260px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid #ddd6fe; background: rgba(255,255,255,.92); overflow: hidden; }
.rp-struct-head { padding: 10px 14px; border-bottom: 1px solid #ede9fe; display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: #f5f3ff; }
.rp-struct-title { font-size: .88rem; font-weight: 700; color: #3b0764; flex: 1; }
.rp-struct-gpt-btn {
  padding: 2px 8px; border: 1px solid #86efac; border-radius: 6px;
  background: #f0fdf4; color: #15803d; font-size: .82rem; cursor: pointer;
  flex-shrink: 0; line-height: 1.4;
}
.rp-struct-gpt-btn:hover { background: #dcfce7; border-color: #4ade80; }
.rp-struct-add-btn { padding: 3px 10px; border: 1px solid #c4b5fd; border-radius: 6px; background: #ede9fe; color: #5b21b6; font-size: .78rem; cursor: pointer; flex-shrink: 0; }
.rp-struct-add-btn:hover { background: #ddd6fe; }
.rp-struct-form { padding: 10px; border-bottom: 1px solid #ede9fe; background: #faf5ff; flex-shrink: 0; }
.rp-struct-form-hint { font-size: .72rem; color: #6b7280; margin-bottom: 6px; line-height: 1.6; }
.rp-struct-form-hint code { background: #ede9fe; padding: 1px 4px; border-radius: 4px; color: #4c1d95; font-size: .7rem; }
.rp-struct-input { width: 100%; box-sizing: border-box; padding: 8px; border: 1.5px solid #c4b5fd; border-radius: 8px; font-size: .8rem; font-family: inherit; resize: vertical; outline: none; }
.rp-struct-input:focus { border-color: #7c3aed; }
.rp-struct-form-btns { display: flex; gap: 6px; margin-top: 6px; }
.rp-struct-save-btn { padding: 5px 12px; background: #7c3aed; color: #fff; border: none; border-radius: 7px; font-size: .8rem; cursor: pointer; }
.rp-struct-save-btn:hover { background: #6d28d9; }
.rp-struct-cancel-btn { padding: 5px 12px; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 7px; font-size: .8rem; cursor: pointer; }
.rp-struct-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.rp-struct-empty { font-size: .82rem; color: #9ca3af; text-align: center; padding: 20px 10px; line-height: 1.8; }
/* Structure card */
.rp-struct-card { background: #fff; border: 1px solid #ede9fe; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.rp-struct-card-num { background: #7c3aed; color: #fff; font-size: .72rem; font-weight: 800; padding: 3px 12px; letter-spacing: .04em; }
.rp-struct-card-inner { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rp-struct-card-title { font-size: .9rem; font-weight: 700; color: #3b0764; line-height: 1.5; word-break: break-word; }
.rp-struct-pattern { font-size: .92rem; font-family: inherit; background: #f5f3ff; border: 1.5px solid #c4b5fd; border-radius: 8px; padding: 9px 13px; color: #1e1b4b; font-weight: 700; line-height: 1.7; word-break: break-word; letter-spacing: .01em; }
.rp-struct-slot { color: #7c3aed; font-weight: 800; background: #ede9fe; border-radius: 4px; padding: 0 3px; font-size: .88rem; }
.rp-struct-section-lbl { font-size: .7rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.rp-struct-note-lbl { color: #d97706; }
.rp-struct-usage { font-size: .84rem; color: #374151; line-height: 1.7; word-break: break-word; overflow-wrap: break-word; }
.rp-struct-note { font-size: .83rem; color: #92400e; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 0 7px 7px 0; padding: 6px 10px; line-height: 1.65; word-break: break-word; overflow-wrap: break-word; }
.rp-struct-examples { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.rp-struct-examples li { font-size: .84rem; color: #1d4ed8; line-height: 1.65; word-break: break-word; overflow-wrap: break-word; }
.rp-ex-pattern { color: #ea580c; font-weight: 700; font-style: normal; }
.rp-struct-ex-trans { color: #9ca3af; font-style: italic; font-weight: 400; }
.rp-struct-del-btn { align-self: flex-end; padding: 2px 8px; border: 1px solid #fca5a5; border-radius: 5px; background: #fff; color: #ef4444; font-size: .75rem; cursor: pointer; margin-top: 2px; }
.rp-struct-del-btn:hover { background: #fee2e2; }

/* Result screen */
.rp-result-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; }
.rp-result-emoji { font-size: 3.5rem; }
.rp-result-title { font-size: 1.4rem; font-weight: 800; color: #1e293b; }
.rp-result-role { font-size: .9rem; color: #6b7280; }
.rp-result-score { font-size: 3rem; font-weight: 900; color: #7c3aed; line-height: 1; }
.rp-result-of { font-size: 1.5rem; color: #9ca3af; }
.rp-result-pct { font-size: 1rem; color: #6b7280; font-weight: 600; }
.rp-result-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.rp-retry-btn { padding: 9px 20px; background: #7c3aed; color: #fff; border: none; border-radius: 10px; font-size: .9rem; font-weight: 700; cursor: pointer; }
.rp-retry-btn:hover { background: #6d28d9; }
.rp-switch-btn { padding: 9px 18px; background: #fff; color: #7c3aed; border: 1.5px solid #7c3aed; border-radius: 10px; font-size: .9rem; font-weight: 700; cursor: pointer; }
.rp-switch-btn:hover { background: #f5f3ff; }
.rp-browse-btn { padding: 9px 18px; background: #fff; color: #374151; border: 1.5px solid #d1d5db; border-radius: 10px; font-size: .9rem; font-weight: 700; cursor: pointer; }
.rp-browse-btn:hover { background: #f3f4f6; }

/* ── Dark background adaptive text ─────────────────────────── */
.rp-dark-bg .rp-right-empty,
.rp-dark-bg .rp-right-empty p { color: rgba(255,255,255,.8); }
.rp-dark-bg .rp-empty-convs { color: rgba(255,255,255,.75); }
.rp-dark-bg .rp-content-head { background: rgba(0,0,0,.18); border-bottom-color: rgba(255,255,255,.12); }
.rp-dark-bg .rp-content-title { color: #fff; }
.rp-dark-bg .rp-conv-head { background: rgba(0,0,0,.18); border-bottom-color: rgba(255,255,255,.12); }
.rp-dark-bg .rp-conv-title { color: #fff; }
.rp-dark-bg .rp-prac-header { background: rgba(0,0,0,.25); border-bottom-color: rgba(255,255,255,.12); }
.rp-dark-bg .rp-prac-score { color: #d8b4fe; }
.rp-dark-bg .rp-prac-exit-btn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); }
.rp-dark-bg .rp-prac-exit-btn:hover { background: rgba(255,255,255,.25); }
.rp-dark-bg .rp-user-turn { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.2); }
.rp-dark-bg .rp-user-turn-lbl { color: #d8b4fe; }
.rp-dark-bg .rp-user-trans-hint { background: rgba(0,0,0,.25); border-left-color: #a78bfa; color: #e9d5ff; }
.rp-dark-bg .rp-role-select { color: #fff; }
.rp-dark-bg .rp-role-select-title { color: #fff; }
.rp-dark-bg .rp-role-select-sub { color: rgba(255,255,255,.7); }
.rp-dark-bg .rp-back-conv-btn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); }
.rp-dark-bg .rp-result-title,
.rp-dark-bg .rp-result-role { color: #fff; }
.rp-dark-bg .rp-result-pct,
.rp-dark-bg .rp-result-of { color: rgba(255,255,255,.65); }
.rp-dark-bg .rp-bubble-trans { color: rgba(255,255,255,.7); }
.rp-dark-bg .rp-folder-cc { color: rgba(255,255,255,.55); }
.rp-dark-bg .rp-folder-active .rp-folder-cc { color: #6b7280; }

/* ── TRANSLATION OVERLAY ── */
.source-card-tl { border-color: #f97316; }
.source-card-tl:hover { background: #fff7ed; border-color: #ea580c; }

.tl-overlay {
  display: none; position: fixed; inset: 0; z-index: 9100;
  flex-direction: column; background: #fff7ed;
}
.tl-header {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid #fed7aa; flex-shrink: 0; flex-wrap: wrap;
}
.tl-back-btn {
  padding: 6px 14px; border-radius: 8px; border: 1px solid #d1d5db;
  background: #fff; cursor: pointer; font-size: .88rem; color: #374151;
}
.tl-back-btn:hover { background: #f3f4f6; }
.tl-title { font-size: 1.05rem; font-weight: 700; color: #c2410c; flex: 1; }
.tl-bg-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tl-color-picker {
  width: 26px; height: 26px; border: none; border-radius: 6px; cursor: pointer;
  padding: 0; background: none;
}
.tl-bg-chip {
  padding: 4px 8px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #fff; cursor: pointer; font-size: .75rem; color: #6b7280;
}
.tl-bg-chip.active { background: #ffedd5; border-color: #f97316; color: #c2410c; font-weight: 700; }

.tl-body {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.tl-left {
  width: 340px; min-width: 180px; flex-shrink: 0; display: flex;
  flex-direction: column; border-right: 1px solid #fed7aa; background: rgba(255,255,255,.6);
}
.tl-resizer {
  width: 5px; cursor: col-resize; background: transparent; flex-shrink: 0; transition: background .15s;
}
.tl-resizer:hover { background: rgba(249,115,22,.25); }
.tl-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0;
}
.tl-right-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: #9ca3af;
}
.tl-right-empty span { font-size: 2.5rem; }
.tl-right-empty p { font-size: .9rem; margin: 0; }
.tl-mobile-back-bar { display: none; }
.rd-font-size-btn { display: none; }

/* Left panel */
.tl-tab-bar { display: flex; border-bottom: 2px solid #fed7aa; flex-shrink: 0; }
.tl-tab {
  flex: 1; padding: 9px 0; border: none; background: #fff7ed;
  font-size: .83rem; font-weight: 600; color: #9ca3af; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .12s, border-color .12s;
}
.tl-tab.active { color: #78350f; border-bottom-color: #fbbf24; background: #fbbf24; font-weight: 700; }
.tl-tab:hover:not(.active) { color: #c2410c; background: #ffedd5; }
.tl-level-bar { display: flex; gap: 4px; padding: 6px 10px; background: #fafafa; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.tl-level-tab {
  flex: 1; padding: 4px 0; border: 1.5px solid #e2e8f0; background: #fff;
  border-radius: 20px; font-size: .75rem; font-weight: 600; color: #6b7280; cursor: pointer;
  transition: all .12s;
}
.tl-level-tab.active { background: #f97316; color: #fff; border-color: #f97316; }
.tl-level-tab:hover:not(.active) { background: #ffedd5; border-color: #fdba74; color: #c2410c; }
.tl-panel-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px;
  border-bottom: 1px solid #fed7aa; flex-shrink: 0;
}
.tl-head-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tl-collapse-btn {
  width: 26px; height: 26px; border: 1px solid #e2e8f0; background: #f8fafc;
  border-radius: 6px; cursor: pointer; font-size: .6rem; color: #64748b;
  display: flex; align-items: center; justify-content: center;
}
.tl-collapse-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.tl-panel-title { font-size: .88rem; font-weight: 700; color: #374151; flex: 1; }
.tl-badge {
  display: inline-block; background: #f97316; color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 1px 7px;
}
.tl-add-btn {
  padding: 4px 11px; background: #f97316; color: #fff; border: none;
  border-radius: 7px; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.tl-add-btn:hover { background: #ea580c; }

/* New folder form */
.tl-new-folder-form {
  padding: 8px 10px; border-bottom: 1px solid #fed7aa;
  background: #fff7ed; flex-shrink: 0;
}
.tl-folder-name-inp {
  width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid #fdba74;
  border-radius: 7px; font-size: .85rem; outline: none;
}
.tl-folder-name-inp:focus { border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,.15); }
.tl-folder-form-btns { display: flex; gap: 6px; margin-top: 6px; }
.tl-save-btn {
  padding: 4px 13px; background: #f97316; color: #fff; border: none;
  border-radius: 7px; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.tl-save-btn:hover { background: #ea580c; }
.tl-cancel-btn {
  padding: 4px 11px; background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db;
  border-radius: 7px; font-size: .8rem; cursor: pointer;
}
.tl-cancel-btn:hover { background: #e5e7eb; }

/* Folder list */
.tl-folder-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
.tl-empty-folders { padding: 20px 12px; color: #9ca3af; font-size: .82rem; text-align: center; }
.tl-folder-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 9px; cursor: pointer; transition: background .12s;
}
.tl-folder-row:hover { background: #fff7ed; }
.tl-folder-active { background: #ffedd5 !important; }
.tl-folder-icon { font-size: 1.1rem; flex-shrink: 0; }
.tl-folder-info { flex: 1; overflow: hidden; }
.tl-folder-name { display: block; font-size: .88rem; font-weight: 600; color: #7c2d12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-folder-sc { display: block; font-size: .75rem; color: #9ca3af; }
.tl-folder-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.tl-folder-row:hover .tl-folder-actions { opacity: 1; }
.tl-folder-edit-btn, .tl-folder-del-btn, .tl-folder-addsub-btn {
  width: 24px; height: 24px; border: none; border-radius: 5px; cursor: pointer;
  font-size: .78rem; display: flex; align-items: center; justify-content: center;
}
.tl-folder-edit-btn    { background: #e0f2fe; color: #0369a1; }
.tl-folder-del-btn     { background: #fee2e2; color: #dc2626; }
.tl-folder-addsub-btn  { background: #dcfce7; color: #16a34a; font-size: 1rem; font-weight: 700; }
.tl-folder-group { margin-bottom: 2px; }
.tl-folder-child { padding-left: 26px !important; }
.tl-folder-toggle {
  font-size: .65rem; color: #9ca3af; flex-shrink: 0;
  width: 18px; text-align: center;
}
.tl-folder-form-lbl {
  font-size: .75rem; color: #9ca3af; margin-bottom: 4px; font-weight: 600;
}

/* Right panel content */
.tl-content-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.tl-content-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid #fed7aa; flex-shrink: 0; flex-wrap: wrap;
}
.tl-content-title { font-size: 1rem; font-weight: 700; color: #9a3412; flex: 1; }
.tl-content-actions { display: flex; gap: 8px; align-items: center; }
.tl-learn-btn {
  padding: 6px 16px; background: #fff; color: #0369a1; border: 1.5px solid #0369a1;
  border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tl-learn-btn:hover { background: #e0f2fe; }
.tl-practice-btn {
  padding: 6px 16px; background: #f97316; color: #fff; border: none;
  border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tl-practice-btn:hover { background: #ea580c; }
.tl-learn-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.tl-learn-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #fed7aa; flex-shrink: 0; }
.tl-learn-back-btn { padding: 5px 12px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; border-radius: 7px; font-size: .82rem; cursor: pointer; }
.tl-learn-back-btn:hover { background: #ffedd5; }
.tl-learn-title { flex: 1; font-size: .95rem; font-weight: 700; color: #7c2d12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-learn-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.tl-learn-card { display: flex; gap: 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 12px 14px; }
.tl-learn-num { font-size: .8rem; font-weight: 700; color: #f97316; min-width: 22px; padding-top: 2px; }
.tl-learn-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tl-learn-vi { font-size: 1em; color: #1e293b; font-weight: 500; }
.tl-learn-en { font-size: 1em; color: #0369a1; }
.tl-learn-font-ctrl { display: flex; gap: 4px; }
.tl-font-btn {
  padding: 3px 8px; border: 1px solid #e2e8f0; background: #f8fafc;
  border-radius: 6px; cursor: pointer; font-size: .78rem; color: #64748b; line-height: 1.4;
}
.tl-font-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.tl-learn-voice-sel {
  padding: 3px 6px; border: 1px solid #e2e8f0; background: #f8fafc;
  border-radius: 6px; font-size: .75rem; color: #64748b; cursor: pointer; max-width: 160px;
}
.tl-learn-card { cursor: pointer; transition: background .12s; }
.tl-learn-card:hover { background: #fde68a !important; }
.tl-learn-spk { font-size: .85rem; flex-shrink: 0; opacity: .4; align-self: center; }
.tl-learn-note { font-size: .8rem; color: #78716c; font-style: italic; margin-top: 2px; }

/* Translation dark-bg overrides */
.tl-dark-bg .tl-learn-title { color: #fff; }
.tl-dark-bg .tl-learn-back-btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.tl-dark-bg .tl-learn-head { border-bottom-color: rgba(255,255,255,.12); }
.tl-dark-bg .tl-content-title { color: #fff; }
.tl-dark-bg .tl-content-head { border-bottom-color: rgba(255,255,255,.12); }
.tl-dark-bg .tl-folder-name { color: #fff; }
.tl-dark-bg .tl-folder-sc { color: rgba(255,255,255,.55); }
.tl-dark-bg .tl-folder-active { background: rgba(255,255,255,.15) !important; }
.tl-dark-bg .tl-empty-folders,
.tl-dark-bg .tl-empty-sents { color: rgba(255,255,255,.65); }
.tl-dark-bg .tl-prac-header { background: rgba(0,0,0,.25); border-bottom-color: rgba(255,255,255,.12); }
.tl-dark-bg .tl-prac-pos,
.tl-dark-bg .tl-prac-score-live { color: rgba(255,255,255,.85); }
.tl-dark-bg .tl-prac-vi-label { color: rgba(255,255,255,.7); }
.tl-dark-bg .tl-prac-vi-text { color: #fff; }
.tl-dark-bg .tl-prac-hint { color: rgba(255,255,255,.5); }
.tl-add-sent-btn {
  padding: 6px 14px; background: #fff; color: #f97316; border: 1.5px solid #f97316;
  border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tl-add-sent-btn:hover { background: #fff7ed; }

/* Add sentence form */
.tl-add-sent-form {
  padding: 12px 16px; background: #fff7ed; border-bottom: 1px solid #fed7aa; flex-shrink: 0;
}
.tl-add-sent-hint { font-size: .78rem; color: #6b7280; margin-bottom: 8px; line-height: 1.4; }
.tl-add-sent-hint code { background: #e5e7eb; border-radius: 3px; padding: 1px 4px; font-family: monospace; }
.tl-sent-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #fdba74;
  border-radius: 8px; font-size: .85rem; font-family: inherit; outline: none;
  resize: vertical; line-height: 1.5;
}
.tl-sent-input:focus { border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,.15); }
.tl-add-sent-btns { display: flex; gap: 8px; margin-top: 8px; }
.tl-save-sent-btn {
  padding: 6px 16px; background: #f97316; color: #fff; border: none;
  border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tl-save-sent-btn:hover { background: #ea580c; }
.tl-cancel-sent-btn {
  padding: 6px 13px; background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db;
  border-radius: 8px; font-size: .85rem; cursor: pointer;
}
.tl-cancel-sent-btn:hover { background: #e5e7eb; }

/* Sentence list */
.tl-empty-sents { padding: 32px 20px; color: #9ca3af; font-size: .9rem; text-align: center; }
.tl-sent-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.tl-sent-card {
  display: flex; align-items: flex-start; gap: 10px; background: #fff;
  border: 1px solid #fed7aa; border-radius: 10px; padding: 12px 14px;
}
.tl-sent-num {
  min-width: 24px; height: 24px; background: #fff7ed; border: 1px solid #fdba74;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #ea580c; flex-shrink: 0;
}
.tl-sent-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.tl-sent-vi { font-size: .9rem; color: #1e293b; font-weight: 500; }
.tl-sent-en { font-size: .88rem; color: #374151; font-style: italic; }
.tl-sent-note { font-size: .78rem; color: #6b7280; }
.tl-del-sent-btn {
  background: #fee2e2; color: #dc2626; border: none; border-radius: 6px;
  width: 26px; height: 26px; cursor: pointer; font-size: .8rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tl-del-sent-btn:hover { background: #fecaca; }

/* Practice mode */
.tl-practice-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.tl-prac-header { padding: 12px 16px; border-bottom: 1px solid #fed7aa; flex-shrink: 0; }
.tl-prac-prog-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.tl-prac-prog-fill { height: 100%; background: linear-gradient(to right, #f97316, #ea580c); border-radius: 3px; transition: width .3s; }
.tl-prac-meta { display: flex; align-items: center; gap: 10px; }
.tl-prac-pos { font-size: .82rem; color: #6b7280; font-weight: 600; flex: 1; }
.tl-prac-score-live { font-size: .82rem; color: #f97316; font-weight: 700; }
.tl-prac-exit-btn {
  padding: 3px 10px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: .78rem; color: #6b7280;
}
.tl-prac-exit-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.tl-prac-font-ctrl { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tl-prac-font-btn {
  padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 5px;
  background: #fff; cursor: pointer; font-size: .75rem; font-weight: 700; color: #6b7280;
}
.tl-prac-font-btn:hover { border-color: #f97316; color: #f97316; }
.tl-prac-font-sel {
  padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 5px;
  background: #fff; font-size: .75rem; color: #6b7280; cursor: pointer;
}

.tl-prac-card {
  flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px;
}
.tl-prac-vi-label { font-size: .78em; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
.tl-prac-vi-text {
  font-size: 1.25em; font-weight: 600; color: #1e293b; line-height: 1.5;
  background: #fff; border: 1.5px solid #fed7aa; border-radius: 12px; padding: 14px 18px;
}
.tl-prac-note { font-size: .8em; color: #6b7280; font-style: italic; }
.tl-hint-revealed { color: #92400e; font-style: normal; font-weight: 600; }
.tl-hint-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-hint-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px; font-size: .8em; font-weight: 600; cursor: pointer;
  border: 1.5px solid #d97706; background: #fff; color: #d97706; white-space: nowrap;
}
.tl-hint-btn:hover { background: #fef3c7; }
.tl-hint-btn-on { background: #fef3c7; color: #92400e; border-color: #92400e; }
.tl-hint-text {
  font-size: .82em; color: #92400e; font-weight: 600;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 4px 10px; line-height: 1.5;
}
.tl-user-ans {
  width: 100%; box-sizing: border-box; padding: 10px 13px; border: 1.5px solid #d1d5db;
  border-radius: 10px; font-size: .95em; font-family: inherit; outline: none; resize: vertical;
  line-height: 1.5;
}
.tl-user-ans:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.tl-prac-hint { font-size: .75em; color: #9ca3af; text-align: right; }
.tl-prac-btns { display: flex; }
.tl-check-btn {
  padding: 9px 24px; background: #f97316; color: #fff; border: none;
  border-radius: 10px; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.tl-check-btn:hover { background: #ea580c; }
.tl-prac-rec-btn {
  margin-left: 8px; padding: 9px 14px; background: #fff; color: #374151;
  border: 1.5px solid #d1d5db; border-radius: 10px; font-size: 1rem; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tl-prac-rec-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.tl-prac-rec-btn.recording {
  background: #fee2e2; border-color: #f87171; color: #dc2626;
  animation: tl-rec-pulse .7s infinite alternate;
}
@keyframes tl-rec-pulse { from { opacity: 1; } to { opacity: .55; } }

.tl-synonym-note {
  font-size: .78em; color: #9ca3af; font-style: italic; line-height: 1.5;
}

/* After answering */
.tl-user-ans-shown {
  background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 14px; font-size: .95rem; color: #374151; white-space: pre-wrap;
}
.tl-correct-feedback {
  font-size: 1.15rem; font-weight: 700; color: #16a34a;
  padding: 14px 0 6px; text-align: center;
}
.tl-result-row { display: flex; align-items: center; gap: 12px; }
.tl-result-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; font-weight: 700;
  padding: 5px 14px; border-radius: 999px;
}
.tl-result-score-pct { font-size: 1.1rem; font-weight: 800; }
.tl-score-great { background: #dcfce7; color: #16a34a; }
.tl-score-ok    { background: #fef9c3; color: #a16207; }
.tl-score-bad   { background: #fee2e2; color: #dc2626; }
.tl-correct-ans-wrap { background: #fff7ed; border: 1px solid #fdba74; border-radius: 10px; padding: 12px 14px; }
.tl-correct-ans-label { font-size: .75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.tl-correct-ans { font-size: .95rem; font-weight: 600; line-height: 1.7; }
.tl-wd-ok   { color: #16a34a; }
.tl-wd-miss { color: #dc2626; }
.tl-wd-alt  { font-size: .82em; font-weight: 500; color: #15803d; opacity: .75; }
.tl-wd-click { cursor: pointer; border-radius: 3px; transition: background .12s; }
.tl-wd-click:hover { background: rgba(0,0,0,.07); }
.tl-wd-click.tl-wd-active { background: #fef9c3; outline: 1.5px solid #fbbf24; }
.tl-dict-panel {
  border: 1.5px solid #e2e8f0; border-radius: 12px; background: #f8fafc;
  padding: 14px 16px; font-size: .88em; line-height: 1.6;
  animation: tl-dict-slide .18s ease-out;
}
@keyframes tl-dict-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tl-dict-loading { color: #6b7280; font-style: italic; }
.tl-dict-word { font-size: 1.15em; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
.tl-dict-speak-btn { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; }
.tl-dict-vi { color: #0369a1; font-weight: 600; font-size: .92em; }
.tl-dict-phonetic { color: #6b7280; font-size: .85em; }
.tl-dict-ph-lbl { font-weight: 700; font-size: .75em; background: #e2e8f0; border-radius: 3px; padding: 1px 4px; }
.tl-dict-ph-val { font-family: monospace; }
.tl-dict-pos { font-size: .78em; font-weight: 700; color: #7c3aed; text-transform: uppercase; letter-spacing: .05em; margin-top: 7px; }
.tl-dict-def { color: #374151; font-size: .88em; }
.tl-dict-num { font-weight: 700; color: #9ca3af; margin-right: 4px; }
.tl-dict-notfound { color: #9ca3af; font-style: italic; font-size: .85em; }
.tl-prac-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tl-kb-hint {
  font-size: .75rem; color: #9ca3af; display: flex; align-items: center; gap: 3px;
}
.tl-kb-hint kbd {
  display: inline-block; padding: 1px 6px; background: #f1f5f9; border: 1px solid #cbd5e1;
  border-bottom-width: 2px; border-radius: 4px; font-size: .72rem; font-family: inherit;
  color: #475569; line-height: 1.5;
}
.tl-prac-prev-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-right: 6px;
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%; font-size: .7rem; color: #374151; cursor: pointer;
  vertical-align: middle; line-height: 1;
}
.tl-prac-prev-icon:hover { background: rgba(0,0,0,.13); }
.tl-next-btn {
  padding: 9px 24px; background: #1e293b; color: #fff; border: none;
  border-radius: 10px; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.tl-next-btn:hover { background: #334155; }

/* Result screen */
.tl-result-screen {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 32px;
}
.tl-result-emoji { font-size: 3.5rem; }
.tl-result-title { font-size: 1.4rem; font-weight: 800; color: #1e293b; }
.tl-result-score { font-size: 3rem; font-weight: 900; color: #f97316; line-height: 1; }
.tl-result-of { font-size: 1.5rem; color: #9ca3af; }
.tl-result-pct { font-size: 1rem; color: #6b7280; font-weight: 600; }
.tl-result-btns { display: flex; gap: 12px; margin-top: 8px; }
.tl-retry-btn {
  padding: 9px 22px; background: #f97316; color: #fff; border: none;
  border-radius: 10px; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.tl-retry-btn:hover { background: #ea580c; }
.tl-browse-btn {
  padding: 9px 20px; background: #fff; color: #374151; border: 1.5px solid #d1d5db;
  border-radius: 10px; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.tl-browse-btn:hover { background: #f3f4f6; }

/* ── Customize Card ─────────────────────────────────────────────── */
.source-card-cu { border-color: #0ea5e9; }
.source-card-cu:hover { background: #f0f9ff; border-color: #0284c7; }
.source-card-cu .source-card-icon { color: #0ea5e9; }

/* ── Customize Home Overlay ─────────────────────────────────────── */
.cu-home-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: #f8fafc;
  display: flex; flex-direction: column;
  align-items: center;
}
.cu-home-header {
  width: 100%; max-width: 900px;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 32px 16px;
}
.cu-home-back {
  padding: 7px 16px; background: #fff; border: 1.5px solid #d1d5db;
  border-radius: 8px; font-size: .88rem; font-weight: 700; cursor: pointer;
  color: #374151; transition: all .16s;
}
.cu-home-back:hover { background: #f3f4f6; border-color: #9ca3af; }
.cu-home-title {
  font-size: 1.3rem; font-weight: 800; color: #0ea5e9;
}
.cu-home-subtitle {
  font-size: .85rem; color: #6b7280; font-weight: 500;
}
.cu-home-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; padding: 16px 32px; width: 100%; max-width: 900px;
}
@media (max-width: 600px) {
  .cu-home-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tl-bg-controls { display: none !important; }
  .tl-prac-hint { display: none; }
  .tl-body { position: relative; overflow: hidden; }
  .tl-left { width: 100% !important; min-width: 0; border-right: none; }
  .tl-resizer { display: none; }
  .tl-right {
    position: absolute; inset: 0; z-index: 2;
    transform: translateX(100%); transition: transform .28s ease;
    background: inherit; overflow-y: auto;
  }
  .tl-body.tl-folder-selected .tl-right { transform: translateX(0); }
  .tl-body.tl-folder-selected .tl-left { display: none; }
}
.cu-card {
  background: #fff; border: 2px solid #e5e7eb; border-radius: 16px;
  padding: 28px 24px; cursor: pointer; transition: all .18s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.cu-card:hover {
  border-color: #0ea5e9; background: #f0f9ff;
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,165,233,.12);
}
.cu-card-icon { font-size: 2.4rem; line-height: 1; }
.cu-card-title { font-size: 1.05rem; font-weight: 800; color: #1e293b; }
.cu-card-desc { font-size: .82rem; color: #6b7280; line-height: 1.5; }
.cu-card-gpt-btn {
  margin-top: 6px; padding: 5px 16px;
  background: #f0fdf4; border: 1.5px solid #86efac;
  border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: #15803d; cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.cu-card-gpt-btn:hover { background: #dcfce7; border-color: #4ade80; color: #166534; }

/* ── User Mode Banner ────────────────────────────────────────────── */
.cu-mode-banner {
  background: #0ea5e9; color: #fff;
  font-size: .82rem; font-weight: 700;
  padding: 6px 18px; text-align: center;
  letter-spacing: .03em;
}

/* ── Vocabulary Tab / Level Bars ─────────────────────────────────── */
.vc-tab-bar { display: flex; border-bottom: 2px solid #a7f3d0; flex-shrink: 0; }
.vc-tab {
  flex: 1; padding: 9px 0; border: none; background: #f0fdf4;
  font-size: .83rem; font-weight: 600; color: #9ca3af; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .12s, border-color .12s;
}
.vc-tab.active { color: #78350f; border-bottom-color: #fbbf24; background: #fbbf24; font-weight: 700; }
.vc-tab:hover:not(.active) { color: #047857; background: #d1fae5; }
.vc-level-bar { display: flex; gap: 4px; padding: 6px 10px; background: #fafafa; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.vc-level-tab {
  flex: 1; padding: 4px 0; border: 1.5px solid #e2e8f0; background: #fff;
  border-radius: 20px; font-size: .75rem; font-weight: 600; color: #6b7280; cursor: pointer;
  transition: all .12s;
}
.vc-level-tab.active { background: #059669; color: #fff; border-color: #059669; }
.vc-level-tab:hover:not(.active) { background: #d1fae5; border-color: #6ee7b7; color: #047857; }
.gr-level-bar { display: flex; gap: 4px; padding: 6px 10px; background: #fafafa; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.gr-level-tab {
  flex: 1; padding: 4px 0; border: 1.5px solid #e2e8f0; background: #fff;
  border-radius: 20px; font-size: .75rem; font-weight: 600; color: #6b7280; cursor: pointer;
  transition: all .12s;
}
.gr-level-tab.active { background: #059669; color: #fff; border-color: #059669; }
.gr-level-tab:hover:not(.active) { background: #d1fae5; border-color: #6ee7b7; color: #047857; }

/* ── Shadow Video Recording ──────────────────────────────────────── */
.shadow-rec-field { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.shadow-rec-field-lbl { font-size: .82rem; font-weight: 700; color: #374151; white-space: nowrap; }
.shadow-rec-select {
  flex: 1; padding: 6px 10px; border-radius: 7px; border: 1.5px solid #d1d5db;
  background: #f9fafb; font-size: .82rem; color: #1f2937; cursor: pointer;
}
.shadow-rec-select:focus { outline: none; border-color: #2563eb; }
.shadow-rec-option { margin-bottom: 12px; }
.shadow-rec-lbl {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 600; color: #1f2937; cursor: pointer;
}
.shadow-rec-lbl input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb; }
.shadow-rec-hint { font-size: .78rem; color: #6b7280; margin: 0 0 16px; line-height: 1.55; }
.shadow-rec-start-btn {
  width: 100%; padding: 11px; border-radius: 8px; border: none;
  background: #2563eb; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: background .14s;
}
.shadow-rec-start-btn:hover { background: #1d4ed8; }
.shadow-rec-status {
  display: flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 700; color: #dc2626; margin-bottom: 18px;
}
.shadow-rec-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #dc2626; flex-shrink: 0;
  animation: shadowRecBlink .8s ease-in-out infinite;
}
@keyframes shadowRecBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.shadow-rec-stop-btn {
  width: 100%; padding: 11px; border-radius: 8px; border: none;
  background: #dc2626; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: background .14s;
}
.shadow-rec-stop-btn:hover { background: #b91c1c; }
.shadow-rec-save-btn {
  flex: 1; padding: 9px; border-radius: 8px; border: none;
  background: #16a34a; color: #fff; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: background .14s;
}
.shadow-rec-save-btn:hover { background: #15803d; }
.shadow-rec-download-btn {
  flex: 1; padding: 9px; border-radius: 8px; border: none;
  background: #2563eb; color: #fff; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: background .14s;
}
.shadow-rec-download-btn:hover { background: #1d4ed8; }
.shadow-rec-retry-btn {
  flex: 1; padding: 9px; border-radius: 8px; border: 1.5px solid #d1d5db;
  background: #f9fafb; color: #374151; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: background .14s;
}
.shadow-rec-retry-btn:hover { background: #f3f4f6; }

/* Stop recording float button */
.shadow-rec-stop-wrap {
  position: absolute; bottom: 10px; right: 10px; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.shadow-rec-stop-lbl {
  font-size: .7rem; font-weight: 700; color: #dc2626;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  letter-spacing: .02em; white-space: nowrap;
}
.shadow-rec-stop-btn-float {
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
  border: 2px solid #dc2626; border-radius: 999px;
  color: #fff; font-size: .88rem; font-weight: 800;
  padding: 8px 16px 8px 12px; cursor: pointer; transition: background .14s;
}
.shadow-rec-stop-btn-float:hover { background: rgba(185,28,28,.85); border-color: #b91c1c; }
.shadow-rec-stop-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #dc2626; flex-shrink: 0;
  animation: shadowRecBlink .8s ease-in-out infinite;
}

/* Webcam overlay on YouTube player */
.shadow-rec-cam-wrap {
  position: absolute; bottom: 12px; right: 12px;
  width: 160px; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  border: 2px solid #dc2626; box-shadow: 0 2px 12px rgba(0,0,0,.5);
  z-index: 20;
}
.shadow-rec-cam-wrap.pos-tl { top: 12px; left: 12px; bottom: auto; right: auto; }
.shadow-rec-cam-wrap.pos-tr { top: 12px; right: 12px; bottom: auto; left: auto; }
.shadow-rec-cam-wrap.pos-bl { bottom: 12px; left: 12px; top: auto; right: auto; }
.shadow-rec-cam-wrap.pos-br { bottom: 12px; right: 12px; top: auto; left: auto; }
/* Position picker */
.shrc-pos-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
}
.shrc-pos-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
  border: 1.5px solid var(--border, #e5e7eb);
  background: var(--surface2, #f8fafc);
  font-size: .9rem; transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.shrc-pos-btn input { display: none; }
.shrc-pos-btn:has(input:checked) { background: #2563eb; color: #fff; border-color: #2563eb; }
.shrc-pos-btn:hover:not(:has(input:checked)) { background: var(--surface3, #e2e8f0); }
.shadow-rec-cam-live { width: 100%; height: 100%; display: block; object-fit: cover; }
.shadow-rec-cam-stop {
  position: absolute; top: 4px; right: 4px;
  background: rgba(220,38,38,.85); color: #fff; border: none;
  border-radius: 50%; width: 26px; height: 26px; font-size: .8rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.shadow-rec-cam-timer {
  position: absolute; bottom: 4px; left: 6px;
  font-size: .65rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  display: flex; align-items: center; gap: 4px;
}
.shadow-rec-cam-timer::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #dc2626;
  animation: shadowRecBlink .8s ease-in-out infinite;
}
.shadow-rec-img-upload-lbl { display: inline-flex; align-items: center; }
.shadow-rec-img-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px; font-size: .85rem; font-weight: 600;
  background: #e0e7ff; color: #3730a3; cursor: pointer;
  border: 1.5px solid #a5b4fc; transition: background .15s;
}
.shadow-rec-img-upload-btn:hover { background: #c7d2fe; }

/* Root Words list toggle button — hidden on desktop */
.rw-list-toggle-btn { display: none; }

@media (max-width: 600px) {
  /* Root Words mobile */
  .rw-body { position: relative; overflow: hidden; }
  .rw-resizer { display: none; }
  /* Left panel hidden by default, slides in as overlay */
  .rw-left {
    position: absolute; inset: 0; z-index: 5; width: 100% !important;
    transform: translateX(-100%); transition: transform .28s ease;
    overflow-y: auto;
  }
  .rw-body.rw-list-open .rw-left { transform: translateX(0); }
  /* Right panel always full width */
  .rw-right { width: 100% !important; flex: 1; }
  /* Toggle button */
  .rw-list-toggle-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 8px; border: 1.5px solid #d1fae5;
    background: #f0fdf4; color: #166534; font-size: .72rem; font-weight: 700; cursor: pointer;
  }
  .rw-list-toggle-btn.active { background: #dcfce7; border-color: #4ade80; }
  /* Hide background controls on mobile */
  .rw-bg-controls { display: none !important; }
}

@media (max-width: 600px) {
  /* Reading topbar */
  .reading-topbar { padding: 7px 10px; gap: 6px; }
  .reading-topbar-center { display: none; }
  .reading-topbar > div:last-child { gap: 5px; }
  #btnRdTheme { font-size: .9rem; padding: 5px 7px; }
  #btnRdDict  { font-size: .72rem !important; padding: 0 8px !important; }
  #btnRdSave  { font-size: .72rem !important; padding: 4px 8px !important; }
  .tour-replay-btn { display: none; }

  /* Reading controls bar */
  .reading-controls-bar { gap: 5px; padding: 5px 10px; }
  .reading-controls-bar .ctrl-btn { font-size: .72rem; padding: 4px 8px; }
  .reading-controls-bar .ctrl-select { font-size: .72rem; padding: 4px 6px; }
  /* Hide less-used items on mobile */
  #rdIpaVariantWrapper,
  #rdVoiceWrapper,
  #rdColorBtns,
  .reading-controls-bar > div[style*="border-left"],
  .reading-controls-bar > label.popup-mode-sw { display: none !important; }
  .rd-font-size-btn { display: inline-flex !important; font-size: .8rem; padding: 4px 9px; }
}

/* ── PHRASAL VERBS OVERLAY ── */
.pv-overlay {
  display: none; position: fixed; inset: 0;
  background: #fffbeb; z-index: 9998;
  flex-direction: column; overflow: hidden;
}
.pv-overlay.active { display: flex; }
.pv-header {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 8px 14px; border-bottom: 1.5px solid #fcd34d;
  background: rgba(255,255,255,.82); backdrop-filter: blur(6px);
}
.pv-back-btn {
  padding: 5px 13px; border-radius: 8px; border: 1.5px solid #fcd34d;
  background: #fff; cursor: pointer; font-size: .86rem; color: #b45309;
  transition: all .13s; white-space: nowrap;
}
.pv-back-btn:hover { background: #fef3c7; border-color: #d97706; }
.pv-title { font-weight: 800; font-size: 1.05rem; color: #92400e; white-space: nowrap; }
.pv-header-controls {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.pv-font-ctrl { display: flex; align-items: center; gap: 2px; }
.pv-font-btn {
  padding: 3px 8px; border-radius: 6px; border: 1.5px solid #fcd34d;
  background: #fff; color: #92400e; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .12s; line-height: 1;
}
.pv-font-btn:hover { background: #fef3c7; border-color: #d97706; }
.pv-font-lbl {
  font-size: .72rem; color: #92400e; font-weight: 700;
  min-width: 34px; text-align: center;
}
.pv-font-select {
  padding: 4px 8px; border-radius: 7px; border: 1.5px solid #fcd34d;
  background: #fff; color: #92400e; font-size: .82rem;
  cursor: pointer; outline: none; transition: border-color .12s;
}
.pv-font-select:focus { border-color: #d97706; }
.co-font-select { border-color: #67e8f9; color: #0e7490; }
.co-font-select:focus { border-color: #0891b2; }
.co-add-btn { background: #0891b2; border-color: #0891b2; }
.co-add-btn:hover { background: #0e7490; }
.co-bulk-add-btn { background: #7c3aed; border-color: #7c3aed; }
.co-bulk-add-btn:hover { background: #6d28d9; }
.co-bulk-msg { font-size: .82rem; margin-left: 8px; }
.co-bulk-unmatched {
  margin-top: 12px; padding: 10px 14px;
  background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 10px;
}
.co-bulk-unmatched-label {
  font-size: .8rem; font-weight: 700; color: #92400e; margin-bottom: 7px;
}
.co-bulk-unmatched-item {
  display: inline-block; margin: 3px 4px; padding: 3px 10px;
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px;
  font-size: .83rem; color: #78350f; font-family: 'Poppins', sans-serif;
}
.co-bg-swatches { display: flex; align-items: center; gap: 5px; margin-left: 4px; }
.co-bg-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .12s, border-color .12s; padding: 0;
}
.co-bg-swatch:hover { transform: scale(1.25); }
.co-bg-swatch-active { border-color: #0891b2 !important; transform: scale(1.25); }
.pv-add-btn {
  padding: 5px 13px; border-radius: 8px; border: 1.5px solid #d97706;
  background: #d97706; color: #fff; font-size: .86rem; font-weight: 700;
  cursor: pointer; transition: background .13s; white-space: nowrap;
}
.pv-add-btn:hover { background: #b45309; }

.pv-body {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}
.pv-left {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1.5px solid #fcd34d; background: rgba(255,255,255,.75);
  overflow: hidden;
}
.pv-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid #fde68a; flex-shrink: 0;
}
.pv-panel-title { font-weight: 700; font-size: .88rem; color: #92400e; }
.pv-badge {
  display: inline-block; background: #fef3c7; color: #92400e;
  border-radius: 10px; padding: 0 7px; font-size: .74rem; font-weight: 700; margin-left: 5px;
}
.pv-resizer {
  width: 6px; flex-shrink: 0; cursor: col-resize;
  background: linear-gradient(to bottom, transparent, #fcd34d 40%, transparent);
  transition: background .15s;
}
.pv-resizer:hover { background: #d97706; }
.pv-body.pv-resizing { user-select: none; cursor: col-resize; }
.pv-right {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}

.pv-group-search-row { padding: 6px 10px; border-bottom: 1px solid rgba(0,0,0,.08); flex-shrink: 0; }
.pv-group-search-inp { width: 100%; box-sizing: border-box; border: 1.5px solid #e5e7eb; border-radius: 7px; padding: 5px 10px; font-size: .82rem; outline: none; background: #f9fafb; }
.pv-group-search-inp:focus { border-color: #f59e0b; background: #fff; }
.pv-groups-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #fcd34d transparent; }
.pv-groups-list::-webkit-scrollbar { width: 4px; }
.pv-groups-list::-webkit-scrollbar-track { background: transparent; }
.pv-groups-list::-webkit-scrollbar-thumb { background: #fcd34d; border-radius: 4px; }
.pv-groups-list::-webkit-scrollbar-thumb:hover { background: #d97706; }
.pv-empty-list {
  padding: 24px 14px; text-align: center; color: #6b7280; font-size: .88rem; line-height: 1.6;
}
.pv-group-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 12px; cursor: pointer;
  border-bottom: 1px solid #fffbeb; transition: background .1s;
}
.pv-group-item:hover { background: #fef3c7; }
.pv-group-item.active { background: #fef9c3; border-left: 3px solid #d97706; }
/* Nhóm bị khóa (user thường, ngoài 100 nhóm đầu — cần Premium) */
.pv-group-locked { opacity: .6; }
.pv-group-locked .pv-group-root { color: #6b7280; font-weight: 600; }
.pv-group-locked:hover { background: #f3f4f6; }
.pv-group-root { font-weight: 700; font-size: .92rem; color: #92400e; flex: 1; }
.pv-group-count { font-size: .72rem; color: #9ca3af; }
.pv-group-actions { display: flex; gap: 3px; flex-shrink: 0; }
.pv-row-edit-btn, .pv-row-del-btn, .pv-row-append-btn {
  width: 24px; height: 24px; border-radius: 5px; border: 1px solid #e5e7eb;
  background: #fff; cursor: pointer; font-size: .78rem; display: flex;
  align-items: center; justify-content: center; transition: all .12s;
}
.pv-row-append-btn { font-size: .9rem; font-weight: 800; color: #16a34a; }
.pv-row-append-btn:hover { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.pv-row-edit-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.pv-row-del-btn:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }

/* Search bar */
.pv-search-row {
  display: flex; align-items: center; gap: 0;
  padding: 8px 12px; border-bottom: 1.5px solid #fcd34d;
  flex-shrink: 0; background: rgba(255,255,255,.7);
}
.pv-search-inp {
  flex: 1; padding: 8px 12px; border: 1.5px solid #fcd34d; border-radius: 9px;
  font-size: .94rem; background: #fff; outline: none; color: #1f2937;
  transition: border-color .13s;
}
.pv-search-inp:focus { border-color: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.12); }
.pv-search-clear {
  margin-left: 6px; width: 28px; height: 28px; border-radius: 50%;
  border: none; background: #f3f4f6; color: #6b7280;
  font-size: .82rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.pv-search-clear:hover { background: #fde68a; color: #92400e; }
.pv-search-count {
  font-size: .78rem; color: #9ca3af; padding: 8px 18px 0;
  font-style: italic;
}
.co-search-more-note {
  font-size: .76rem; color: #9ca3af; text-align: center;
  padding: 10px 16px 16px; font-style: italic;
}
.co-not-found-bar {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 8px 16px 4px; padding: 8px 12px;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px;
  font-size: .82rem; line-height: 1.5;
}
.co-not-found-label { font-weight: 700; color: #c2410c; flex-shrink: 0; }
.co-not-found-list { color: #7c2d12; word-break: break-word; flex: 1; }
.co-not-found-copy {
  flex-shrink: 0; padding: 3px 10px; border-radius: 7px;
  border: 1.5px solid #f97316; background: none; color: #ea580c;
  font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.co-not-found-copy:hover { background: #f97316; color: #fff; }
.co-not-found-copy:disabled { opacity: .6; cursor: default; background: none; color: #16a34a; border-color: #16a34a; }
.co-card-wrap { position: relative; }
.co-card-edit-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: none; border: 1px solid #d1d5db; border-radius: 6px;
  padding: 2px 8px; font-size: .78rem; color: #6b7280;
  cursor: pointer; transition: all .15s;
}
.co-card-edit-btn:hover { background: #f97316; border-color: #f97316; color: #fff; }

.co-del-card-btn {
  background: none; border: 1px solid #fca5a5; border-radius: 6px;
  padding: 2px 7px; font-size: .78rem; color: #ef4444;
  cursor: pointer; transition: all .15s; margin-left: 4px;
  line-height: 1;
}
.co-del-card-btn:hover { background: #ef4444; border-color: #ef4444; color: #fff; }
.co-edit-card-btn {
  background: none; border: 1px solid #c4b5fd; border-radius: 6px;
  padding: 2px 7px; font-size: .78rem; color: #7c3aed;
  cursor: pointer; transition: all .15s; margin-left: 4px; line-height: 1;
}
.co-edit-card-btn:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }
/* Quick edit single collocation card modal */
.co-ec-ov { position: fixed; inset: 0; z-index: 100001; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 18px; }
.co-ec-box { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.co-ec-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eef2f7; font-weight: 800; color: #7c3aed; }
.co-ec-x { background: none; border: none; font-size: 1.3rem; color: #94a3b8; cursor: pointer; line-height: 1; }
.co-ec-body { padding: 14px 18px; overflow-y: auto; }
.co-ec-body label { display: block; font-size: .76rem; font-weight: 700; color: #64748b; margin: 10px 0 3px; }
.co-ec-inp { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .9rem; }
.co-ec-inp:focus { border-color: #7c3aed; outline: none; }
.co-ec-ta { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .9rem; resize: vertical; font-family: inherit; }
.co-ec-row2 { display: flex; gap: 10px; }
.co-ec-row2 > div { flex: 1; }
.co-ec-actions { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid #eef2f7; }
.co-ec-actions .vl-test-btn { flex: 1; }

/* Star button on collocation cards */
.co-star-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: #d1d5db; padding: 0 3px;
  line-height: 1; transition: color .15s, transform .12s;
  flex-shrink: 0;
}
.co-star-btn:hover { color: #f59e0b; transform: scale(1.2); }
.co-star-btn.co-star-active { color: #f59e0b; }

/* "⭐ Đã lưu" button in left panel */
.co-starred-btn {
  background: none; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 3px 9px; font-size: .78rem; color: #64748b;
  cursor: pointer; transition: all .15s; font-weight: 600;
  white-space: nowrap;
}
.co-starred-btn:hover,
.co-starred-btn.co-starred-btn-active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.co-starred-btn.co-starred-btn-has #coStarCount { font-weight: 800; color: #d97706; }
.pv-toolbar-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-bottom: 1px solid #fde68a;
  flex-shrink: 0; background: rgba(255,255,255,.6);
}
.pv-compact-btn {
  padding: 3px 12px; border-radius: 7px; border: 1.5px solid #fcd34d;
  background: #fff; color: #92400e; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .13s;
}
.pv-compact-btn:hover { background: #fef3c7; border-color: #d97706; }
.pv-compact-btn-active { background: #d97706 !important; border-color: #b45309 !important; color: #fff !important; }
.pv-test-btn {
  padding: 3px 12px; border-radius: 7px; border: 1.5px solid #6366f1;
  background: #fff; color: #4f46e5; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .13s; margin-left: auto;
}
.pv-test-btn:hover { background: #eef2ff; border-color: #4f46e5; }

/* Test panel */
.pv-test-panel { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; background: #fff; }
.co-test-panel { background: #fff; }
.pv-test {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 20px; max-width: 560px; margin: 0 auto; width: 100%;
}
.pv-test-bar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 28px;
}
.pv-test-prog { font-size: .82rem; color: #9ca3af; font-weight: 600; }
.pv-test-score { font-size: .82rem; color: #16a34a; font-weight: 700; margin-left: auto; }
.pv-auto-adv-label {
  display: flex; align-items: center; gap: 5px;
  font-size: .72rem; color: #6b7280; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pv-sw-track {
  display: inline-flex; align-items: center; width: 30px; height: 16px;
  border-radius: 999px; background: #d1d5db; transition: background .2s; flex-shrink: 0; cursor: pointer;
}
.pv-sw-track.on { background: #16a34a; }
.pv-sw-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  margin-left: 2px; transition: margin-left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pv-sw-track.on .pv-sw-thumb { margin-left: 16px; }
.pv-test-exit {
  padding: 3px 10px; border-radius: 7px; border: 1px solid #e5e7eb;
  background: #fff; color: #6b7280; font-size: .78rem; cursor: pointer;
  transition: all .12s;
}
.pv-test-exit:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.pv-test-sound-btn {
  padding: 3px 8px; border-radius: 7px; border: 1px solid #e5e7eb;
  background: #fff; font-size: .88rem; cursor: pointer; transition: all .12s; line-height: 1;
}
.pv-test-sound-btn:hover { background: #f0fdf4; border-color: #86efac; }
.pv-test-fs-btn {
  padding: 3px 8px; border-radius: 7px; border: 1px solid #e5e7eb;
  background: #fff; font-size: .88rem; cursor: pointer; transition: all .12s; line-height: 1;
}
.pv-test-fs-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.pv-test-panel.pv-test-fs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  margin: 0 !important;
}
.test-fs-active #pvOverlay,
.test-fs-active #coOverlay,
.test-fs-active #imOverlay { z-index: 99998; }
.pv-test-voice-sel {
  font-size: .72rem; padding: 2px 4px; border: 1px solid #e5e7eb; border-radius: 7px;
  background: #fff; color: #374151; cursor: pointer; max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-test-q {
  font-size: 1.5rem; font-weight: 800; color: #1f2937;
  text-align: center; margin-bottom: 28px; line-height: 1.3;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #fcd34d; border-radius: 14px;
  padding: 18px 28px; width: 100%; box-sizing: border-box;
}
.pv-test-opts {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
}
.pv-test-opt {
  padding: 12px 16px; border-radius: 10px; border: 2px solid #e5e7eb;
  background: #fff; font-size: .94rem; color: #1f2937; font-weight: 600;
  cursor: pointer; text-align: left; transition: all .13s; line-height: 1.4;
}
.pv-test-opt:hover:not(:disabled) { border-color: #d97706; background: #fffbeb; color: #92400e; }
.pv-test-opt-correct { border-color: #16a34a !important; background: #dcfce7 !important; color: #15803d !important; }
.pv-test-opt-wrong   { border-color: #dc2626 !important; background: #fee2e2 !important; color: #b91c1c !important; }
.pv-test-fb {
  margin-top: 14px; font-size: .92rem; font-weight: 700;
  padding: 8px 16px; border-radius: 8px; width: 100%; box-sizing: border-box; text-align: center;
}
.pv-test-fb-ok  { background: #dcfce7; color: #15803d; }
.pv-test-fb-err { background: #fee2e2; color: #b91c1c; }
/* Meaning card */
.pv-meaning-card { margin-top: 12px; width: 100%; box-sizing: border-box; }
.pv-mc-inner {
  border-radius: 14px; padding: 14px 18px 13px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef9ee 100%);
  border: 1.5px solid #fde68a;
  text-align: center;
}
.pv-mc-inner.pv-mc-wrong {
  background: linear-gradient(135deg, #fff1f2 0%, #fff5f5 100%);
  border-color: #fecaca;
}
.pv-mc-phrase {
  font-size: 1.25rem; font-weight: 800; color: #92400e; letter-spacing: .01em;
  margin-bottom: 5px;
}
.pv-mc-inner.pv-mc-wrong .pv-mc-phrase { color: #991b1b; }
.pv-mc-meaning {
  font-size: .95rem; color: #78350f; font-weight: 600; margin-bottom: 8px;
}
.pv-mc-inner.pv-mc-wrong .pv-mc-meaning { color: #7f1d1d; }
.pv-mc-examples {
  padding-top: 8px; margin-top: 4px; border-top: 1px dashed #fde68a;
  display: flex; flex-direction: column; gap: 5px;
}
.pv-mc-inner.pv-mc-wrong .pv-mc-examples { border-color: #fecaca; }
.pv-mc-example {
  font-size: .82rem; color: #6b7280; font-style: italic; line-height: 1.6;
  padding-left: 10px; border-left: 2px solid #fde68a;
}
.pv-mc-inner.pv-mc-wrong .pv-mc-example { border-color: #fecaca; }
.pv-mc-hl {
  background: none; color: #d97706; font-weight: 700; font-style: normal;
}
.pv-mc-inner.pv-mc-wrong .pv-mc-hl { color: #dc2626; }
.pv-test-next {
  margin-top: 16px; padding: 10px 28px; border-radius: 10px;
  border: none; background: #d97706; color: #fff;
  font-size: .94rem; font-weight: 700; cursor: pointer; transition: background .13s;
}
.pv-test-next:hover { background: #b45309; }
.pv-test-next-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; }
.pv-test-next-wrap .pv-test-next { margin-top: 0; }
.pv-test-key-hint { font-size: .72rem; color: #9ca3af; letter-spacing: .03em; }
.pv-test-type-lbl {
  font-size: .78rem; font-weight: 700; color: #6b7280; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 10px; text-align: center;
}
.pv-test-q-vi { font-style: italic; color: #374151; }
.pv-test-q-fill { font-size: 1.1rem; font-weight: 600; line-height: 1.6; color: #1f2937; text-align: center; margin-bottom: 16px; }
.pv-fill-blank {
  display: inline-block; min-width: 90px; border-bottom: 2.5px solid #d97706;
  color: #d97706; font-weight: 800; text-align: center; padding: 0 4px;
}
.pv-test-hint { font-size: .82rem; color: #6b7280; margin-bottom: 14px; text-align: center; }
.pv-test-hint b { color: #374151; }
.pv-test-opt-en { font-family: 'Poppins', sans-serif; font-size: .9rem; }
.pv-test-type-row { display: flex; gap: 8px; width: 100%; margin-bottom: 4px; }
.pv-test-type-inp {
  flex: 1; padding: 10px 14px; border-radius: 10px; border: 2px solid #e5e7eb;
  font-size: .94rem; font-family: inherit; outline: none; transition: border-color .15s, background .15s;
}
.pv-test-type-inp:focus { border-color: #d97706; }
.pv-test-check-btn {
  padding: 10px 18px; border-radius: 10px; border: none;
  background: #d97706; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pv-test-check-btn:hover { background: #b45309; }

/* Result screen */
.pv-test-end { justify-content: center; padding-top: 48px; gap: 12px; }
.pv-test-end-msg { font-size: 1.4rem; font-weight: 800; color: #1f2937; }
.pv-test-end-score {
  font-size: 3rem; font-weight: 900; color: #d97706; line-height: 1;
}
.pv-test-end-score span { font-size: 1.4rem; color: #9ca3af; font-weight: 600; }
.pv-test-end-pct { font-size: 1rem; color: #6b7280; font-weight: 600; margin-bottom: 8px; }
.pv-test-end-btns { display: flex; gap: 10px; margin-top: 8px; }
.pv-test-retry {
  padding: 10px 22px; border-radius: 10px; border: none;
  background: #d97706; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.pv-test-retry:hover { background: #b45309; }
.pv-test-retry-wrong { background: #dc2626 !important; }
.pv-test-retry-wrong:hover { background: #b91c1c !important; }
.pv-test-back {
  padding: 10px 22px; border-radius: 10px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #374151; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.pv-test-back:hover { background: #f3f4f6; }

/* ── CO TEST ──────────────────────────────────────────── */
.co-test-btn { background: #0891b2; border-color: #0891b2; color: #fff; padding: 3px 11px; border-radius: 7px; border: 1.5px solid; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .13s; }
.co-test-btn:hover { background: #0e7490; }
.co-star-test-btn { background: #d97706 !important; border-color: #d97706 !important; }
.co-star-test-btn:hover { background: #b45309 !important; }
.co-sel-cb { width: 14px; height: 14px; margin-right: 2px; cursor: pointer; flex-shrink: 0; accent-color: #0891b2; }
.co-sel-checked { background: #ecfeff !important; border-left: 3px solid #0891b2 !important; }
.co-sel-clear-btn {
  padding: 2px 8px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #f9fafb; color: #6b7280; font-size: .75rem; font-weight: 600; cursor: pointer;
}
.co-type-picker { padding: 20px; font-family: 'Nunito', sans-serif; }

/* ── Collocations: chọn loại bài test (thiết kế mới, lưới card nhiều màu) ─────── */
.cotp-wrap { padding: 26px 24px 30px; max-width: 1000px; margin: 0 auto; font-family: inherit; }
.cotp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cotp-h-ttl { font-size: 1.9rem; font-weight: 900; color: #1e293b; letter-spacing: -.02em; }
.cotp-h-sub { color: #64748b; font-size: .92rem; margin-top: 4px; }
.cotp-count { flex: none; background: #fff; border: 1px solid #e9d5ff; color: #7c3aed; font-weight: 800; font-size: .8rem; padding: 6px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(124,58,237,.08); }
.cotp-levels { margin: 4px 0 16px; }
.cotp-mixed { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: #f5f3ff; border: 2px solid #ddd6fe; cursor: pointer; transition: all .15s; margin-bottom: 22px; }
.cotp-mixed:hover { border-color: #c4b5fd; }
.cotp-mixed-on { background: #f5f3ff; border-color: #8b5cf6; box-shadow: 0 8px 24px rgba(124,58,237,.12); }
.cotp-mixed-ico { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg,#a78bfa,#7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex: none; box-shadow: 0 8px 18px rgba(124,58,237,.3); }
.cotp-mixed-tx { flex: 1; min-width: 0; }
.cotp-mixed-ttl { font-weight: 800; font-size: 1.15rem; color: #1e293b; }
.cotp-rec { font-size: .72rem; font-weight: 800; color: #7c3aed; background: #ede9fe; padding: 2px 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.cotp-mixed-sub { color: #64748b; font-size: .88rem; margin-top: 3px; }
.cotp-ind-lbl { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: #94a3b8; margin-bottom: 12px; }
.cotp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cotp-card { position: relative; border-radius: 16px; padding: 16px; cursor: pointer; border: 1px solid transparent; transition: transform .12s, box-shadow .12s; background: var(--cbg); }
.cotp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(2,6,23,.1); }
.cotp-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.cotp-ico { width: 42px; height: 42px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 3px 8px rgba(2,6,23,.06); }
.cotp-cb { width: 24px; height: 24px; border-radius: 8px; background: #fff; border: 2px solid #e2e8f0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; font-weight: 900; flex: none; }
.cotp-card.cotp-on .cotp-cb { background: var(--cc); border-color: var(--cc); }
.cotp-card.cotp-on { border-color: var(--cc); }
.cotp-name { font-weight: 800; font-size: .98rem; color: #1e293b; line-height: 1.3; margin-bottom: 5px; }
.cotp-desc { color: #64748b; font-size: .82rem; line-height: 1.45; }
.cotp-dis { opacity: .5; cursor: default; }
.cotp-dis:hover { transform: none; box-shadow: none; }
.cotp-cb-lg { width: 30px; height: 30px; border-radius: 9px; font-size: 1.05rem; }
.cotp-mixed-on .cotp-cb-lg { background: #7c3aed; border-color: #7c3aed; }
.cotp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.cotp-foot-l { display: flex; gap: 8px; }
.cotp-sel-btn { background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; padding: 9px 16px; font-weight: 700; font-size: .85rem; color: #475569; cursor: pointer; font-family: inherit; }
.cotp-sel-btn:hover { background: #f8fafc; }
.cotp-start { background: linear-gradient(135deg,#8b5cf6,#7c3aed); color: #fff; border: none; border-radius: 14px; padding: 13px 26px; font-weight: 800; font-size: .98rem; cursor: pointer; font-family: inherit; box-shadow: 0 8px 20px rgba(124,58,237,.3); }
.cotp-start:hover { filter: brightness(1.06); }
.cotp-blue   { --cc:#2563eb; --cbg:#eff6ff; }
.cotp-green  { --cc:#16a34a; --cbg:#f0fdf4; }
.cotp-purple { --cc:#7c3aed; --cbg:#f5f3ff; }
.cotp-orange { --cc:#f97316; --cbg:#fff7ed; }
.cotp-yellow { --cc:#d97706; --cbg:#fefce8; }
.cotp-indigo { --cc:#4f46e5; --cbg:#eef2ff; }
.cotp-teal   { --cc:#0d9488; --cbg:#f0fdfa; }
.cotp-pink   { --cc:#db2777; --cbg:#fdf2f8; }
@media (max-width: 880px) { .cotp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cotp-grid { grid-template-columns: 1fr; } .cotp-h-ttl { font-size: 1.5rem; } }
.co-type-picker-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #e0e7ff;
  font-size: 1rem; color: #1e293b;
}
.co-type-pick-list { display: flex; flex-direction: column; gap: 8px; }
.co-type-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: #f8fafc;
  cursor: pointer; font-size: .95rem; color: #1e293b; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.co-type-pick-row:hover:not(.co-type-pick-disabled) { border-color: #6366f1; background: #eef2ff; }
.co-type-pick-row input[type=checkbox] { width: 16px; height: 16px; accent-color: #6366f1; cursor: pointer; flex-shrink: 0; }
.co-type-pick-disabled { opacity: .45; cursor: not-allowed; }
.co-type-pick-note { margin-left: auto; font-size: .75rem; color: #94a3b8; font-weight: 400; }
.co-type-pick-all { background: #eef2ff; border-color: #6366f1; font-weight: 700; }
.co-type-pick-divider { height: 1px; background: #e2e8f0; margin: 4px 0; }
.co-level-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px 6px; border-bottom: 1px solid #e2e8f0; }
.co-level-filter-lbl { font-size: .8rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.co-level-filter-hint { font-size: .75rem; color: #94a3b8; }
.co-lv-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--lv-color, #6b7280); color: var(--lv-color, #6b7280); background: transparent; font-size: .78rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.co-lv-pill:hover { background: color-mix(in srgb, var(--lv-color) 10%, transparent); }
.co-lv-pill-on { background: var(--lv-color, #6b7280) !important; color: #fff !important; }
.co-lv-pill-cnt { font-weight: 400; font-size: .72rem; }
.co-star-preview { padding: 16px; font-family: 'Nunito', sans-serif; }
.co-star-preview-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #fde68a;
  font-weight: 700; font-size: 1rem; color: #92400e;
}
.co-star-start-btn {
  background: #16a34a; color: #fff; border: none; border-radius: 8px;
  padding: 7px 18px; font-size: .9rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.co-star-start-btn:hover { background: #15803d; }
.co-star-preview-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.co-star-preview-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 10px; border-radius: 8px; background: #fffbeb;
  border: 1px solid #fde68a;
}
.co-star-preview-num { font-size: .75rem; color: #b45309; font-weight: 700; min-width: 20px; }
.co-star-preview-phrase { font-weight: 700; color: #1e293b; font-size: .95rem; }
.co-star-preview-vi { font-size: .85rem; color: #64748b; font-style: italic; }
.co-test-panel { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; font-family: 'Poppins', sans-serif; transition: background .2s, color .2s; }
/* Dark mode */
.co-test-dark { background: #0f172a; color: #e2e8f0; }
.co-test-dark .pv-test-bar { background: #1e293b; border-bottom-color: #334155; }
.co-test-dark .pv-test-prog, .co-test-dark .pv-test-score { color: #94a3b8; }
.co-test-dark .pv-test-exit { background: #1e293b; border-color: #334155; color: #94a3b8; }
.co-test-dark .pv-test-exit:hover { background: #7f1d1d; color: #fca5a5; border-color: #7f1d1d; }
.co-test-dark .pv-test-fs-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.co-test-dark .pv-test-fs-btn:hover { background: #0f172a; border-color: #38bdf8; color: #38bdf8; }
.co-test-dark .pv-test-voice-sel { background: #1e293b; color: #94a3b8; border-color: #334155; }
.co-test-dark .co-test-prog-track { background: #1e293b; }
.co-test-dark .co-test-type-badge { background: #1e293b; color: #7dd3fc; border-color: #334155; }
.co-test-dark .co-test-q { background: #1e293b; color: #f1f5f9; border-color: #334155; }
.co-test-dark .co-test-q-vi { background: #172554; color: #bfdbfe; border-color: #1e40af; }
.co-test-dark .co-test-hint { color: #94a3b8; }
.co-test-dark .co-test-hint-vi { color: #7dd3fc; }
.co-test-dark .co-test-opt { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.co-test-dark .co-test-opt:hover:not(:disabled) { border-color: #38bdf8; background: #0c4a6e; color: #e0f2fe; }
.co-test-dark .co-test-opt-correct { border-color: #16a34a !important; background: #14532d !important; color: #86efac !important; }
.co-test-dark .co-test-opt-wrong   { border-color: #dc2626 !important; background: #7f1d1d !important; color: #fca5a5 !important; }
.co-test-dark .co-test-opt-key { background: #334155; color: #e2e8f0; }
.co-test-dark .co-type-inp { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.co-test-dark .co-type-inp::placeholder { color: #475569; }
.co-test-dark .co-type-inp-ok { border-color: #16a34a !important; background: #14532d !important; color: #86efac !important; }
.co-test-dark .co-type-inp-err { border-color: #dc2626 !important; background: #7f1d1d !important; color: #fca5a5 !important; }
.co-test-dark .co-test-fb-ok  { background: #14532d; color: #86efac; }
.co-test-dark .co-test-fb-err { background: #7f1d1d; color: #fca5a5; }
.co-test-dark .co-test-ex { color: inherit; }
.co-test-dark .co-test-next { background: #0891b2; color: #fff; border-color: #0891b2; }
.co-test-dark .co-listen-play-btn { background: #312e81; border-color: #6366f1; color: #c7d2fe; }
.co-test-dark .co-blank { border-bottom-color: #38bdf8; }
.co-test-dark .co-test-end-msg { color: #e2e8f0; }
.co-test-dark .co-test-end-score { color: #38bdf8; }
.co-test-dark .co-test-end-total, .co-test-dark .co-test-end-pct { color: #64748b; }
/* Phrasal Verb dark mode */
.co-test-dark .pv-test-q { background: #1e293b; color: #f1f5f9; border-color: #334155; }
.co-test-dark .pv-test-q-vi { color: #94a3b8; }
.co-test-dark .pv-test-q-fill { color: #f1f5f9; }
.co-test-dark .pv-test-opt { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.co-test-dark .pv-test-opt:hover:not(:disabled) { border-color: #f59e0b; background: #1c1917; color: #fef3c7; }
.co-test-dark .pv-test-opt-correct { border-color: #16a34a !important; background: #14532d !important; color: #86efac !important; }
.co-test-dark .pv-test-opt-wrong   { border-color: #dc2626 !important; background: #7f1d1d !important; color: #fca5a5 !important; }
.co-test-dark .pv-test-type-lbl { color: #7dd3fc; }
/* Idioms dark mode */
.co-test-dark .im-test-q { background: #1e1b4b !important; color: #c7d2fe !important; border-color: #4338ca !important; }
.co-test-dark .im-fill-inp { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.co-test-dark .im-fill-inp::placeholder { color: #475569; }
.co-test-dark .im-fill-inp:focus { border-color: #7c3aed; }
.co-test-dark .im-fill-inp-ok  { border-color: #16a34a !important; background: #14532d !important; color: #86efac !important; }
.co-test-dark .im-fill-inp-err { border-color: #dc2626 !important; background: #7f1d1d !important; color: #fca5a5 !important; }
.co-test-dark .im-blank { border-bottom-color: #818cf8 !important; }
.co-test-dark .co-test-dark-btn { background: none; border: none; font-size: 1rem; cursor: pointer; padding: 2px 4px; line-height: 1; }
.co-test-dark-btn { background: none; border: none; font-size: 1rem; cursor: pointer; padding: 2px 4px; line-height: 1; }
.co-test-q { font-family: 'Poppins', sans-serif; }
.co-test-q-vi { font-family: 'Plus Jakarta Sans', sans-serif; }
.co-test-opt { font-family: 'Poppins', sans-serif; }
.co-test-opt-txt { font-family: 'Poppins', sans-serif; }
.co-type-inp { font-family: 'Poppins', sans-serif; }
.co-test-fb { font-family: 'Plus Jakarta Sans', sans-serif; }
.co-test-end-msg, .co-test-end-score, .co-test-end-total, .co-test-end-pct { font-family: 'Plus Jakarta Sans', sans-serif; }
.co-test-wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 20px 32px; max-width: 580px; margin: 0 auto; width: 100%; box-sizing: border-box;
}
.co-test-prog-track {
  width: 100%; height: 5px; background: #e2e8f0; border-radius: 99px; margin-bottom: 22px; overflow: hidden;
}
.co-test-prog-fill { height: 100%; background: linear-gradient(90deg, #0891b2, #06b6d4); border-radius: 99px; transition: width .3s ease; }
.co-test-type-badge {
  font-size: .72rem; font-weight: 700; color: #0e7490; background: #ecfeff;
  border: 1.5px solid #a5f3fc; border-radius: 999px; padding: 2px 12px; margin-bottom: 16px; letter-spacing: .02em;
}
.co-test-q {
  font-size: 1.4rem; font-weight: 800; color: #0c4a6e; text-align: center;
  line-height: 1.35; background: linear-gradient(135deg, #ecfeff, #f0f9ff);
  border: 2px solid #67e8f9; border-radius: 16px; padding: 18px 24px;
  width: 100%; box-sizing: border-box; margin-bottom: 8px; white-space: pre-line;
}
.co-test-q-vi { color: #1e3a5f; background: linear-gradient(135deg, #f0f4ff, #e8f4fd); border-color: #93c5fd; }
.co-test-q-blank { font-size: 1.1rem; font-weight: 600; letter-spacing: .01em; }
.co-blank { display: inline-block; min-width: 80px; border-bottom: 3px solid #0891b2; color: transparent; font-weight: 900; vertical-align: bottom; margin: 0 2px; }
.co-test-q-listen { display: flex; align-items: center; gap: 14px; justify-content: center; }
.co-listen-play-btn { padding: 10px 22px; border-radius: 24px; border: 2px solid #6366f1; background: #ede9fe; color: #4f46e5; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.co-listen-play-btn:hover { background: #6366f1; color: #fff; }
.co-listen-hint { font-size: .82rem; color: #64748b; font-style: italic; }
.co-type-wrap { display: flex; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.co-type-inp { flex: 1; max-width: 380px; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; outline: none; transition: border-color .15s; }
.co-type-inp:focus { border-color: #6366f1; }
.co-type-inp-ok { border-color: #16a34a !important; background: #f0fdf4; }
.co-type-inp-err { border-color: #dc2626 !important; background: #fef2f2; }
.co-type-submit { padding: 10px 18px; border-radius: 10px; border: none; background: #6366f1; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s; }
.co-type-submit:hover { background: #4f46e5; }
.co-test-hint {
  font-size: .8rem; color: #64748b; font-style: italic;
  margin-bottom: 18px; text-align: center; width: 100%;
}
.co-test-hint-vi { color: #0891b2; font-style: normal; font-weight: 600; }
.co-letter-hint { text-align: center; font-size: .88rem; font-weight: 700; font-family: 'Poppins', monospace; color: #7c3aed; letter-spacing: .04em; margin-bottom: 10px; }
.co-lhint-dashes { color: #a78bfa; font-weight: 400; letter-spacing: .1em; }
.co-test-dark .co-letter-hint { color: #c4b5fd; }
.co-test-dark .co-lhint-dashes { color: #7c3aed; }
.co-hint-toggle-wrap { text-align: center; margin-bottom: 14px; }
.co-vt-vi-sent { font-size: 1.08rem; font-weight: 700; color: #0f172a; line-height: 1.5; margin-bottom: 16px; }
.co-vt-inp { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; min-height: 44px; line-height: 1.5; padding: 10px 12px; font-size: .95rem; font-family: inherit; border-radius: 8px; border: 1.5px solid #cbd5e1; background: #fff; transition: border-color .15s; }
.co-vt-inp:focus { outline: none; border-color: #6366f1; }
.co-vt-wrap { align-items: flex-end; width: 100%; justify-content: stretch; }
.co-vt-wrap .co-vt-inp { flex: 1; width: auto; }
.co-vt-phrase-hint { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; font-size: .92rem; }
.co-vt-phrase-meaning { color: #64748b; font-size: .85rem; }
.co-vt-vocab-hint { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.co-vt-tense-hint {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1.5px solid #c4b5fd; border-radius: 12px;
  padding: 12px 20px; width: 100%; box-sizing: border-box;
}
.co-vt-tense-name {
  font-size: 1rem; font-weight: 800; color: #6d28d9;
  letter-spacing: .01em;
}
.co-vt-tense-formula {
  font-size: .83rem; font-family: 'Courier New', monospace; font-weight: 600;
  color: #5b21b6; background: rgba(109,40,217,.1);
  padding: 4px 14px; border-radius: 999px;
  border: 1px dashed #a78bfa; letter-spacing: .03em;
}
.co-test-dark .co-vt-tense-hint { background: linear-gradient(135deg, #1e1b4b, #2e1065); border-color: #7c3aed; }
.co-test-dark .co-vt-tense-name { color: #c4b5fd; }
.co-test-dark .co-vt-tense-formula { color: #ddd6fe; background: rgba(167,139,250,.12); border-color: #7c3aed; }
.co-vt-vocab-row { font-size: .82rem; line-height: 1.7; }
.co-vt-vocab-pos { color: #64748b; font-size: .78rem; }
.co-vt-vocab-ipa { font-size: .75rem; color: #0891b2; margin: 0 4px; font-style: italic; }
.co-vt-ipa-us::after { content: ' '; }
.co-vt-ipa-uk { margin-left: 6px; }
.co-test-dark .co-vt-vocab-ipa { color: #67e8f9; }
.co-vt-diff { margin: 6px 0 4px; font-size: .95rem; line-height: 1.7; }
.co-vt-w-ok   { color: #16a34a; font-weight: 700; }
.co-vt-w-err  { color: #dc2626; font-weight: 700; text-decoration: underline wavy #dc2626; }
.co-vt-w-miss { color: #9ca3af; font-weight: 600; font-style: italic; }
.co-vt-w-tag  { font-size: .6em; font-weight: 700; margin-left: 1px; vertical-align: super; color: #dc2626; opacity: .8; }
.co-vt-correction-note { margin-top: 6px; padding: 5px 10px; border-radius: 7px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: .82rem; font-weight: 600; }
.vl-vst-typed-diff + .co-vt-correction-note { margin-top: 5px; }
.co-vt-correct-lbl  { font-size: .75rem; color: #6b7280; margin-top: 8px; text-transform: uppercase; letter-spacing: .04em; }
.co-vt-correct-sent { font-size: .88rem; color: #374151; margin-top: 2px; font-style: italic; }
.co-vt-fb-near { color: #d97706; font-weight: 700; }
.co-vt-fb-mid  { color: #b45309; font-weight: 600; }
.co-test-dark .co-vt-fb-near { color: #fbbf24; }
.co-test-dark .co-vt-fb-mid  { color: #f59e0b; }
.co-test-dark .co-vt-w-ok   { color: #4ade80; }
.co-test-dark .co-vt-w-err  { color: #f87171; }
.co-test-dark .co-vt-w-miss { color: #6b7280; }
.co-test-dark .co-vt-correct-sent { color: #d1d5db; }
.co-test-dark .co-vt-vi-sent { color: #f1f5f9; }
.co-test-dark .co-vt-phrase-meaning { color: #94a3b8; }
.co-test-dark .co-vt-vocab-pos { color: #94a3b8; }
.co-hint-toggle-btn { background: none; border: 1.5px dashed #0891b2; border-radius: 8px; color: #0891b2; font-size: .78rem; font-weight: 600; padding: 4px 14px; cursor: pointer; transition: background .15s; font-family: 'Plus Jakarta Sans', sans-serif; }
.co-hint-toggle-btn:hover { background: #e0f2fe; }
.co-test-dark .co-hint-toggle-btn { border-color: #38bdf8; color: #7dd3fc; }
.co-test-dark .co-hint-toggle-btn:hover { background: #0c4a6e; }
.co-test-opts { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.co-test-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: 11px; border: 2px solid #e2e8f0;
  background: #fff; font-size: .92rem; color: #1e293b; font-weight: 600;
  cursor: pointer; text-align: left; transition: all .13s; line-height: 1.4;
}
.co-test-opt:hover:not(:disabled) { border-color: #0891b2; background: #ecfeff; color: #0e4f5f; }
.co-test-opt-key {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
  background: #f1f5f9; color: #64748b; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.co-test-opt-txt { flex: 1; }
.co-answered .co-test-opt { pointer-events: none; }
.co-test-opt-correct { border-color: #16a34a !important; background: #dcfce7 !important; color: #15803d !important; }
.co-test-opt-correct .co-test-opt-key { background: #16a34a; color: #fff; }
.co-test-opt-wrong   { border-color: #dc2626 !important; background: #fee2e2 !important; color: #b91c1c !important; }
.co-test-opt-wrong   .co-test-opt-key { background: #dc2626; color: #fff; }
.co-test-fb {
  margin-top: 14px; font-size: .9rem; font-weight: 700;
  padding: 10px 18px; border-radius: 10px; width: 100%; box-sizing: border-box; text-align: center; line-height: 1.5;
}
.co-test-fb-ok  { background: #dcfce7; color: #15803d; }
.co-test-fb-err { background: #fee2e2; color: #b91c1c; }
.co-test-ex { margin-top: 8px; font-size: .82rem; font-weight: 400; font-style: italic; opacity: .9; font-family: 'Poppins', sans-serif; }
.co-test-ex strong { font-weight: 700; text-decoration: underline; font-style: italic; color: #c2410c; }
.co-test-ex-vi { font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal; opacity: .75; }
.co-test-spk { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 0 2px; vertical-align: middle; opacity: .75; }
.co-test-spk:hover { opacity: 1; }
.co-test-nav-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.co-test-prev {
  padding: 11px 20px; border-radius: 11px;
  border: 2px solid #94a3b8; background: none; color: #475569;
  font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .13s; flex-shrink: 0;
}
.co-test-prev:hover { border-color: #0891b2; color: #0891b2; }
.co-test-dark .co-test-prev { border-color: #475569; color: #94a3b8; }
.co-test-dark .co-test-prev:hover { border-color: #38bdf8; color: #38bdf8; }
.co-test-next {
  padding: 11px 32px; border-radius: 11px;
  border: none; background: #0891b2; color: #fff;
  font-size: .94rem; font-weight: 700; cursor: pointer; transition: background .13s;
}
.co-test-next:hover { background: #0e7490; }
.co-test-key-hint { display: block; font-size: .72rem; color: #9ca3af; letter-spacing: .03em; text-align: center; margin-top: 5px; }
.co-test-end { justify-content: center; padding-top: 60px; gap: 10px; }
.co-test-end-msg { font-size: 1.5rem; font-weight: 800; color: #0c4a6e; text-align: center; }
.co-test-end-score { font-size: 3.2rem; font-weight: 900; color: #0891b2; line-height: 1; }
.co-test-end-total { font-size: 1.4rem; color: #94a3b8; font-weight: 600; }
.co-test-end-pct { font-size: 1.1rem; color: #64748b; font-weight: 700; margin-bottom: 8px; }
.co-test-end-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* ── IDIOMS accent overrides (purple) ─────────────────── */
.im-overlay .pv-header { background: linear-gradient(135deg,#f5f3ff,#ede9fe); border-bottom-color: #c4b5fd; }
.im-overlay .pv-left { border-right-color: #c4b5fd; }
.im-overlay .pv-panel-head { border-bottom-color: #ddd6fe; }
.im-overlay .pv-group-item:hover { background: #f5f3ff; }
.im-overlay .pv-group-item.active { background: #ede9fe; border-left-color: #7c3aed; }
.im-overlay .pv-resizer { background: #c4b5fd; }
.im-overlay .pv-resizer:hover { background: #7c3aed; }
.im-overlay .pv-search-inp:focus { border-color: #7c3aed; }
.im-font-btn { border-color: #ddd6fe !important; color: #5b21b6 !important; }
.im-font-btn:hover { background: #ede9fe !important; border-color: #7c3aed !important; }
.im-font-select { border-color: #ddd6fe !important; color: #5b21b6 !important; }
.im-font-select:focus { border-color: #7c3aed !important; }
.im-badge { background: #7c3aed !important; color: #fde047 !important; font-weight: 800; }
.im-add-btn { background: #7c3aed !important; border-color: #7c3aed !important; }
.im-add-btn:hover { background: #6d28d9 !important; }
.im-save-btn { background: #7c3aed !important; border-color: #7c3aed !important; }
.im-test-btn { background: #7c3aed !important; border-color: #7c3aed !important; }
.im-test-btn:hover { background: #6d28d9 !important; }
.im-test-wrap .co-test-prog-fill { background: linear-gradient(90deg,#7c3aed,#a78bfa); }
.im-test-wrap .co-test-type-badge { color: #5b21b6; background: #f5f3ff; border-color: #c4b5fd; }
.im-test-q { background: linear-gradient(135deg,#f5f3ff,#ede9fe) !important; border-color: #c4b5fd !important; color: #3b0764 !important; }
.im-blank { border-bottom-color: #7c3aed !important; }
.im-test-opt:hover:not(:disabled) { border-color: #7c3aed !important; background: #f5f3ff !important; color: #3b0764 !important; }
.im-test-next { background: #7c3aed !important; }
.im-test-next:hover { background: #6d28d9 !important; }
.im-end-score { color: #7c3aed !important; }
.im-retry-btn { background: #7c3aed !important; }
.im-retry-btn:hover { background: #6d28d9 !important; }
.im-gen-btn {
  padding: 5px 12px; background: #7c3aed; color: #fff;
  border: none; border-radius: 7px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .13s; white-space: nowrap;
}
.im-gen-btn:hover:not(:disabled) { background: #6d28d9; }
.im-gen-btn:disabled { opacity: .55; cursor: not-allowed; }
.im-quickref-btn {
  padding: 4px 10px; border-radius: 7px; border: 1.5px solid #c4b5fd;
  background: #f5f3ff; color: #7c3aed; font-size: 13px; font-weight: 800;
  cursor: pointer; transition: all .13s; line-height: 1;
}
.im-quickref-btn:hover, .im-quickref-btn.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.im-quickref-panel {
  padding: 8px 12px 9px; background: #faf5ff; border-bottom: 1px solid #e9d5ff;
}
.im-qr-row { display: flex; align-items: flex-start; gap: 10px; }
.im-qr-text {
  flex: 1; font-size: .84rem; color: #5b21b6; line-height: 1.7;
  user-select: text; cursor: text; white-space: normal; word-break: break-word;
}
.im-qr-copy-btn {
  flex-shrink: 0; padding: 3px 10px; border-radius: 6px; border: 1px solid #c4b5fd;
  background: #fff; color: #7c3aed; font-size: .75rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .13s;
}
.im-qr-copy-btn:hover { background: #ede9fe; }
.im-appq-wrap { margin-top: 10px; border-top: 1px dashed #c4b5fd; padding-top: 9px; }
.im-appq-label { font-size: .72rem; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.im-appq-q { font-size: .88rem; color: #1e293b; line-height: 1.6; font-style: italic; }
.im-appq-exp { font-size: .8rem; color: #64748b; margin-top: 5px; line-height: 1.5; }
.im-sel-cb { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; accent-color: #7c3aed; margin-right: 2px; }
.pv-group-item.im-sel-checked { background: #ede9fe !important; border-left: 3px solid #7c3aed; padding-left: 7px; }
.im-sel-clear {
  background: none; border: 1px solid #c4b5fd; border-radius: 5px;
  color: #7c3aed; font-size: 11px; font-weight: 700; padding: 2px 7px;
  cursor: pointer; white-space: nowrap; transition: all .13s;
}
.im-sel-clear:hover { background: #ede9fe; }
.im-test-bottom-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 10px; }
.im-test-bottom-row .co-test-next { margin-top: 0; flex-shrink: 0; }
.im-prev-btn {
  background: none; border: 2px solid #c4b5fd; border-radius: 11px;
  color: #7c3aed; font-size: .88rem; font-weight: 700;
  padding: 9px 18px; cursor: pointer; transition: all .13s; flex-shrink: 0;
}
.im-prev-btn:hover { background: #f5f3ff; }
.im-fill-wrap { display: flex; gap: 8px; margin-top: 14px; width: 100%; }
.im-fill-inp {
  flex: 1; border: 2px solid #c4b5fd; border-radius: 10px;
  padding: 11px 15px; font-size: .95rem; font-family: inherit;
  outline: none; transition: border-color .15s, background .15s;
  background: #fff; color: #1e293b;
}
.im-fill-inp:focus { border-color: #7c3aed; }
.im-fill-inp-ok  { border-color: #16a34a !important; background: #dcfce7 !important; }
.im-fill-inp-err { border-color: #dc2626 !important; background: #fee2e2 !important; }
.im-fill-btn {
  padding: 11px 18px; background: #7c3aed; color: #fff;
  border: none; border-radius: 10px; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: background .13s; white-space: nowrap; flex-shrink: 0;
}
.im-fill-btn:hover:not(:disabled) { background: #6d28d9; }
.im-fill-btn:disabled { opacity: .5; cursor: not-allowed; }
.im-fb-meaning { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 6px; }
.im-fb-vi { font-size: .82rem; font-weight: 700; color: #1d4ed8; }
.im-fb-def { font-size: .8rem; color: #475569; font-style: italic; }
.co-test-fb-ok .im-fb-vi { color: #166534; }
.co-test-fb-ok .im-fb-meaning { border-top-color: rgba(22,101,52,.2); }
.co-test-fb-err .im-fb-vi { color: #991b1b; }
.co-test-fb-err .im-fb-meaning { border-top-color: rgba(153,27,27,.2); }
.co-test-dark .im-fb-vi { color: #93c5fd; }
.co-test-dark .im-fb-def { color: #94a3b8; }
.co-test-dark .co-test-fb-ok .im-fb-vi { color: #86efac; }
.co-test-dark .co-test-fb-err .im-fb-vi { color: #fca5a5; }
.im-hint-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.im-hint-btn { background: #f5f3ff; border: 1px dashed #a78bfa; border-radius: 999px; padding: 5px 14px; font-size: .78rem; cursor: pointer; color: #7c3aed; font-weight: 600; font-family: 'Nunito', sans-serif; transition: background .15s; }
.im-hint-btn:hover:not(:disabled) { background: #ede9fe; border-color: #7c3aed; }
.im-hint-btn:disabled { opacity: .4; cursor: not-allowed; }
.im-hint-status { font-size: .75rem; color: #94a3b8; font-style: italic; }
.co-test-dark .im-hint-btn { background: #1e1b4b; border-color: #6d28d9; color: #c4b5fd; }
.co-test-dark .im-hint-btn:hover:not(:disabled) { background: #2e1065; }
.co-test-dark .im-hint-status { color: #64748b; }

/* ── Collocation test — mobile ── */
@media (max-width: 600px) {
  .co-test-wrap { padding: 14px 12px; }
  .pv-test-bar { gap: 5px; margin-bottom: 14px; }
  .pv-test-voice-sel { display: none; }
  .pv-test-prog { font-size: .78rem; }
  .pv-test-score { font-size: .78rem; }
  .pv-test-exit { padding: 4px 8px; font-size: .72rem; }
  .pv-test-sound-btn { padding: 4px 6px; font-size: .85rem; }
  .co-test-dark-btn { font-size: .85rem; padding: 4px 5px; }
  .co-test-prog-track { margin-bottom: 10px; }
  .co-test-type-badge { font-size: .72rem; padding: 4px 10px; margin-bottom: 14px; }
  .co-test-q, .co-test-q-blank { font-size: 1.05rem; padding: 14px 14px; margin-bottom: 14px; }
  .co-test-q-listen { padding: 12px 14px; }
  .co-listen-play-btn { padding: 9px 16px; font-size: .88rem; }
  .co-test-hint { font-size: .75rem; margin-bottom: 12px; }
  .co-test-opts { gap: 7px; }
  .co-test-opt { padding: 10px 12px; font-size: .88rem; border-radius: 11px; }
  .co-test-opt-key { width: 22px; height: 22px; font-size: .72rem; }
  .co-type-inp { font-size: .9rem; padding: 9px 12px; }
  .co-type-submit { padding: 9px 14px; font-size: .82rem; }
  .co-test-fb { font-size: .85rem; padding: 9px 14px; }
  .co-test-nav-row { gap: 8px; margin-top: 14px; }
  .co-test-next { padding: 10px 22px; font-size: .88rem; }
  .co-test-prev { padding: 10px 14px; font-size: .82rem; }
  .co-test-key-hint { font-size: .72rem; }
  .co-test-end-msg { font-size: 1.3rem; }
  .co-test-end-score { font-size: 2.5rem; }
  .co-letter-hint { font-size: .82rem; }
  .co-type-picker { padding: 14px; }
  .co-type-pick-list { gap: 4px; }
  .co-type-pick-row { padding: 8px 10px; font-size: .85rem; }
}

.pv-vi-btn {
  padding: 3px 11px; border-radius: 7px; border: 1.5px solid #fcd34d;
  background: #fff; color: #9ca3af; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .13s;
}
.pv-vi-btn:hover { background: #fef3c7; border-color: #d97706; color: #92400e; }
.pv-vi-btn.active { background: #d97706; border-color: #b45309; color: #fff; }
/* Compact mode: hide definition, collocation, examples */
.pv-results.pv-compact .pv-card-def,
.pv-results.pv-compact .pv-card-colloc,
.pv-results.pv-compact .pv-card-ex { display: none; }
/* Hide Vietnamese translations (in collocations and examples only) */
.pv-results.pv-hide-vi .pv-colloc-vi,
.pv-results.pv-hide-vi .pv-ex-vi { display: none; }

/* Results area */
.pv-results { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; scrollbar-width: thin; scrollbar-color: #fcd34d transparent; }
.pv-results::-webkit-scrollbar { width: 4px; }
.pv-results::-webkit-scrollbar-track { background: transparent; }
.pv-results::-webkit-scrollbar-thumb { background: #fcd34d; border-radius: 4px; }
.pv-results::-webkit-scrollbar-thumb:hover { background: #d97706; }

/* Phrasal verb card layout */
.pv-tree-v2 { padding: 16px 18px; }
.pv-root-card {
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #fcd34d; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(217,119,6,.12);
}
.pv-items-list { padding-left: 12px; border-left: 3px solid #fcd34d; }
.pv-item-card {
  background: #fff; border: 1.5px solid #fde68a; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(217,119,6,.07);
  transition: border-color .12s, box-shadow .12s;
}
.pv-item-card:last-child { margin-bottom: 0; }
.pv-item-card:hover { border-color: #d97706; box-shadow: 0 2px 8px rgba(217,119,6,.16); }
.pv-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pv-card-phrase { font-weight: 800; font-size: 1em; color: #92400e; }
.pv-card-phrase-root { font-size: 1.15em; color: #78350f; }
.pv-card-pos {
  font-size: .73em; font-style: italic; color: #fff; background: #d97706;
  border-radius: 5px; padding: 2px 7px; font-weight: 600;
}
.pv-card-ipa { display: flex; gap: 14px; margin-bottom: 5px; }
.pv-ipa-group { display: flex; align-items: center; gap: 3px; }
.pv-ipa-label {
  font-size: .68em; font-weight: 700; color: #374151;
  background: #f3f4f6; border-radius: 3px; padding: 0 4px;
}
.pv-ipa-val { font-size: .84em; color: #374151; font-style: italic; }
.pv-speak-btn {
  background: none; border: none; cursor: pointer;
  font-size: .88em; color: #9ca3af; padding: 0 2px; line-height: 1;
  transition: color .12s;
}
.pv-speak-btn:hover { color: #d97706; }
.pv-card-meaning {
  font-size: .9em; font-weight: 600; color: #b45309; margin-bottom: 5px;
}
.pv-card-label { font-size: .75em; font-weight: 700; color: #d97706; margin-right: 3px; }
.pv-card-def  { font-size: .92em; color: #374151; margin-bottom: 4px; line-height: 1.55; }
.pv-card-colloc { font-size: .92em; color: #374151; margin-bottom: 4px; line-height: 1.55; }
.pv-colloc-en { color: #dc2626; font-weight: 600; }
.pv-colloc-vi { color: #6b7280; font-style: italic; }
.pv-colloc-sep { color: #d1d5db; }
.pv-card-ex { font-size: .82em; color: #4b5563; margin-bottom: 2px; font-style: italic; line-height: 1.55; }
.pv-ex-hl { color: #1d4ed8; font-weight: 700; font-style: italic; }
.pv-ex-colloc-hl { color: #1d4ed8; font-weight: 700; font-style: italic; }
.pv-ex-search-hl { color: #15803d; font-weight: 700; font-style: italic; background: #dcfce7; border-radius: 2px; padding: 0 1px; }
.pv-ex-vi { color: #6b7280; font-style: italic; }
.pv-empty {
  padding: 48px 20px; text-align: center; color: #6b7280; font-size: .94em; line-height: 1.8;
}

/* Add/Edit form modal */
.pv-form-wrap {
  position: absolute; inset: 0; background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.pv-form {
  background: #fff; border-radius: 14px; padding: 20px 22px;
  width: min(480px, 90vw); box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.pv-form-title { font-weight: 800; font-size: 1rem; color: #92400e; margin-bottom: 10px; }
.pv-prompt-wrap { margin-bottom: 10px; }
.pv-prompt-toggle {
  width: 100%; text-align: left; padding: 6px 12px; border-radius: 8px;
  border: 1.5px solid #d1d5db; background: #f9fafb; font-size: .82rem;
  font-weight: 600; color: #374151; cursor: pointer;
}
.pv-prompt-toggle:hover { background: #f3f4f6; }
.pv-prompt-body { padding: 10px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.pv-prompt-verb-inp {
  width: 100%; box-sizing: border-box; padding: 6px 10px;
  border: 1.5px solid #d1d5db; border-radius: 7px; font-size: .85rem; outline: none;
}
.pv-prompt-verb-inp:focus { border-color: #f97316; }
.pv-prompt-box {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1.5px solid #e5e7eb; border-radius: 7px; font-size: .78rem;
  font-family: monospace; background: #f8fafc; resize: vertical; outline: none;
  color: #374151; min-height: 120px;
}
/* Playlist import queue */
.pq-header { font-size:.75rem;font-weight:800;color:#15803d;margin-bottom:5px; }
.pq-item { display:flex;align-items:center;gap:6px;font-size:.76rem;padding:3px 0;color:#374151; }
.pq-item.pq-running { color:#0e7490;font-weight:700; }
.pq-num { display:inline-block;min-width:16px;text-align:right;color:#9ca3af;font-size:.7rem; }
.pq-spin { animation:pq-spin-anim .9s linear infinite;display:inline-block; }
@keyframes pq-spin-anim { to { transform:rotate(360deg); } }
.pq-remove { background:none;border:none;cursor:pointer;color:#9ca3af;font-size:.7rem;padding:0 2px;line-height:1; }
.pq-remove:hover { color:#dc2626; }
.pq-log-sep { margin:6px 0 2px;color:#6d28d9;font-size:.78rem;border-top:1px dashed #e5e7eb;padding-top:5px; }

.pv-prompt-actions { display: flex; gap: 8px; margin-top: 7px; }
.pv-copy-prompt-btn {
  padding: 5px 14px; border-radius: 7px;
  border: 1.5px solid #6366f1; background: #eef2ff; color: #4338ca;
  font-size: .82rem; font-weight: 600; cursor: pointer;
}
.pv-copy-prompt-btn:hover { background: #e0e7ff; }
.pv-send-chatgpt-btn {
  padding: 5px 16px; border-radius: 7px;
  border: none; background: #10a37f; color: #fff;
  font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
.pv-send-chatgpt-btn:hover { background: #0d8a6b; }
.pv-chatgpt-hint {
  margin-top: 7px; padding: 7px 12px; border-radius: 8px;
  background: #f0fdf4; border: 1.5px solid #86efac;
  color: #15803d; font-size: .8rem; font-weight: 600;
}
.pv-chatgpt-hint kbd {
  background: #dcfce7; border: 1px solid #86efac; border-radius: 4px;
  padding: 1px 5px; font-family: monospace; font-size: .78em;
}
.pv-form-hint {
  font-size: .76rem; color: #6b7280; margin-bottom: 9px; line-height: 1.6;
  background: #fef9c3; border-radius: 7px; padding: 7px 10px;
}
.pv-form-hint code {
  background: #fef3c7; border-radius: 4px; padding: 0 4px;
  font-size: .75rem; color: #92400e; font-weight: 600;
}
.pv-words-inp {
  width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 10px;
  border: 1.5px solid #fcd34d; border-radius: 8px; font-size: .88rem;
  background: #fff; resize: vertical; outline: none; font-family: inherit; min-height: 140px;
}
.pv-words-inp:focus { border-color: #d97706; }
.pv-form-actions { display: flex; gap: 8px; }
.pv-save-btn {
  padding: 6px 18px; border-radius: 8px; border: none;
  background: #d97706; color: #fff; font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: background .13s;
}
.pv-save-btn:hover { background: #b45309; }
.pv-cancel-btn {
  padding: 6px 14px; border-radius: 8px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #6b7280; font-size: .88rem; cursor: pointer;
  transition: all .13s;
}
.pv-cancel-btn:hover { background: #f3f4f6; }

@media (max-width: 700px) {
  .pv-body { position: relative; }
  .pv-resizer { display: none; }
  .pv-left {
    position: absolute; inset: 0; z-index: 5; width: 100% !important;
    transform: translateX(-100%); transition: transform .28s ease;
    overflow-y: auto; background: #fff;
  }
  .pv-body.pv-list-open .pv-left { transform: translateX(0); }
  .pv-right { width: 100% !important; flex: 1; }
  .pv-header { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .pv-header-controls { margin-left: 0; order: 3; width: 100%; justify-content: flex-end; }
  /* Hide + Add group from header on mobile (accessible inside the group list panel) */
  #coOverlay .pv-header .co-add-btn { display: none; }
  /* Back-to-list button: show only on mobile */
  .co-back-to-list-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 8px; border: 1.5px solid #fcd34d;
    background: #fffbeb; color: #92400e; font-size: .72rem; font-weight: 700;
    cursor: pointer; transition: background .13s; white-space: nowrap;
  }
  .co-back-to-list-btn:hover { background: #fef3c7; }
  /* Toolbar 2 rows: Test/Starred/Deselect first, Compact/VI second */
  #coOverlay .pv-toolbar-row { flex-wrap: wrap; gap: 4px; padding: 4px 8px; }
  #coOverlay .pv-toolbar-row > div {
    order: -1; margin-left: 0 !important;
    width: auto; flex-basis: 100%;
    display: flex !important; gap: 4px !important; align-items: center; justify-content: flex-start !important;
  }
  #coOverlay .pv-toolbar-row > div > button { margin: 0 !important; flex-shrink: 0; }
  /* Hide Test/Test starred from toolbar on mobile (moved to groups panel) */
  #coOverlay .pv-toolbar-row > div .co-test-btn { display: none; }
  /* Show panel test buttons on mobile */
  .co-panel-test-btn { display: inline-flex !important; align-items: center; font-size: .7rem; padding: 3px 8px; white-space: nowrap; }
  #coOverlay .pv-compact-btn,
  #coOverlay .pv-vi-btn { font-size: .72rem; padding: 3px 9px; white-space: nowrap; }
  #coOverlay .co-test-btn { font-size: .72rem; padding: 3px 9px; white-space: nowrap; }
  #coOverlay .co-sel-clear-btn { font-size: .72rem; padding: 2px 7px; white-space: nowrap; }
  /* Card head: phrase on its own line, badges+speak below */
  #coOverlay .pv-card-head { flex-wrap: wrap; gap: 4px 6px; }
  #coOverlay .pv-card-head .pv-card-phrase { width: 100%; }
  /* IPA: US on top, UK below */
  #coOverlay .pv-card-ipa { flex-direction: column; gap: 3px; }
  /* Close button inside groups panel (mobile only) */
  .co-close-groups-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid #fcd34d; background: #fff;
    color: #92400e; font-size: .85rem; font-weight: 700;
    cursor: pointer; margin-left: auto; flex-shrink: 0;
    transition: background .13s;
  }
  .co-close-groups-btn:hover { background: #fef3c7; }
}
@media (min-width: 701px) {
  .co-close-groups-btn { display: none; }
  .co-back-to-list-btn { display: none; }
  .co-panel-test-btn { display: none; }
}

.rz-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: rgba(30,20,60,.88); color: #fff; font-size: .82rem; font-weight: 600;
  padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 999999;
  opacity: 0; transition: opacity .22s, transform .22s; pointer-events: none;
}
.rz-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Favourite Sentences ──────────────────────────────── */
.yt-sent-fav-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; padding: 2px 6px; border-radius: 6px;
  color: #d97706; line-height: 1; transition: transform .15s;
}
.yt-sent-fav-btn:hover { transform: scale(1.25); }
.yt-sent-fav-btn.saved { color: #f59e0b; }

.fav-modal-box {
  max-width: 580px; width: 94vw; max-height: 84vh;
  padding: 0; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
}
.fav-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  font-size: 1rem; font-weight: 800;
  background: #fffbeb; border-bottom: 2px solid #fde68a; flex-shrink: 0;
}
.fav-modal-close {
  background: none; border: none; font-size: 1.1rem;
  cursor: pointer; color: #9ca3af; padding: 2px 7px; border-radius: 6px;
}
.fav-modal-close:hover { background: #f3f4f6; }
.fav-modal-body { overflow-y: auto; flex: 1; display: flex; flex-direction: column; }

/* Folder tabs */
.fav-folder-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px; background: #f9fafb;
  border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.fav-folder-tab {
  background: #fff; border: 1.5px solid #e5e7eb;
  padding: 4px 12px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; color: #6b7280;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fav-folder-tab:hover { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.fav-folder-tab.active { background: #fef3c7; color: #d97706; border-color: #fcd34d; }
.fav-folder-tab-wrap {
  display: flex; align-items: center;
  border: 1.5px solid #e5e7eb; border-radius: 999px;
  background: #fff; overflow: hidden; transition: border-color .15s;
}
.fav-folder-tab-wrap.active { border-color: #fcd34d; background: #fef3c7; }
.fav-folder-tab-wrap .fav-folder-tab { border: none; border-radius: 0; background: transparent; padding-right: 6px; }
.fav-folder-tab-del {
  background: none; border: none; font-size: .6rem;
  color: #9ca3af; padding: 4px 7px 4px 0; cursor: pointer; line-height: 1;
}
.fav-folder-tab-del:hover { color: #dc2626; }
.fav-folder-add {
  background: none; border: 1.5px dashed #d1d5db;
  border-radius: 999px; padding: 4px 12px;
  font-size: .74rem; font-weight: 700; color: #9ca3af;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.fav-folder-add:hover { border-color: #d97706; color: #d97706; }

/* Content */
.fav-content { flex: 1; overflow-y: auto; padding: 12px; }
.fav-video-group { margin-bottom: 18px; }
.fav-video-title-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.fav-video-title {
  flex: 1; min-width: 0;
  font-size: .75rem; font-weight: 800; color: #374151;
  padding: 5px 10px; background: #f3f4f6; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-folder-assign { position: relative; flex-shrink: 0; }
.fav-assign-btn {
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 8px;
  padding: 4px 10px; font-size: .7rem; font-weight: 700; color: #6b7280;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.fav-assign-btn:hover { border-color: #d97706; color: #d97706; background: #fffbeb; }
.fav-assign-drop {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1.5px solid #e5e7eb;
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 150px; z-index: 20; overflow: hidden;
}
.fav-assign-opt {
  padding: 8px 14px; font-size: .75rem; font-weight: 600;
  color: #374151; cursor: pointer; transition: background .1s;
}
.fav-assign-opt:hover { background: #fffbeb; }
.fav-assign-opt.selected { color: #d97706; font-weight: 800; }

.fav-sent-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid #e5e7eb; margin-bottom: 5px;
  background: #fff; transition: background .15s, border-color .15s;
}
.fav-sent-item:hover { background: #fffbeb; border-color: #fcd34d; }
.fav-sent-ts { font-size: .7rem; font-weight: 700; color: #6b7280; white-space: nowrap; padding-top: 1px; flex-shrink: 0; }
.fav-sent-text { flex: 1; font-size: .82rem; color: #1e293b; line-height: 1.45; }
.fav-sent-del {
  background: none; border: none; font-size: .75rem; color: #9ca3af;
  cursor: pointer; padding: 2px 5px; border-radius: 4px; flex-shrink: 0; align-self: center;
}
.fav-sent-del:hover { background: #fee2e2; color: #dc2626; }
.fav-empty { text-align: center; padding: 32px 16px; font-size: .88rem; color: #9ca3af; line-height: 1.6; }

@media (max-width: 600px) {
  .shadow-rec-cam-wrap {
    width: 80px !important;
    border-radius: 8px;
    border-width: 1.5px;
  }
}

/* ═══════════════════════════════════════════════════
   SPEAKING & WRITING SAMPLE BANK (sw-)
   ═══════════════════════════════════════════════════ */
.sw-screen { flex-direction: column; height: 100vh; background: #fafaf9; overflow: hidden; }
.screen.active.sw-screen { display: flex; }

.sw-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sw-back-btn {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; color: var(--ink); padding: 5px 10px;
  border-radius: 6px; white-space: nowrap;
}
.sw-back-btn:hover { background: var(--surface2); }
.sw-title {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; margin-right: 4px;
}
.sw-tabs { display: flex; gap: 3px; background: var(--surface2); border-radius: 8px; padding: 3px; }
.sw-tab {
  padding: 5px 14px; border-radius: 6px; border: none;
  background: none; cursor: pointer; font-size: .82rem;
  font-weight: 600; color: var(--muted); white-space: nowrap;
}
.sw-tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.sw-topbar-add-btn {
  background: #ea580c; color: #fff;
  border: none; border-radius: 7px; padding: 6px 14px;
  font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.sw-topbar-add-btn:hover { background: #c2410c; }
.sw-topbar-gpt-btn {
  background: #ecfdf5; color: #047857; border: 1.5px solid #6ee7b7; border-radius: 7px;
  padding: 6px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; margin-right: 8px;
}
.sw-topbar-gpt-btn:hover { background: #10a37f; color: #fff; border-color: #10a37f; }
/* Modal tạo prompt ChatGPT cho Speaking */
.sw-gpt-ov { position: fixed; inset: 0; z-index: 10500; background: rgba(15,23,42,.6); display: flex; align-items: flex-start; justify-content: center; padding: 24px 14px; overflow: auto; }
.sw-gpt-box { background: #fff; border-radius: 18px; max-width: 600px; width: 100%; box-shadow: 0 18px 60px rgba(0,0,0,.3); overflow: hidden; }
.sw-gpt-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: linear-gradient(135deg,#10a37f,#047857); color: #fff; font-size: 1.1rem; font-weight: 900; }
.sw-gpt-x { border: none; background: none; color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.sw-gpt-body { padding: 18px 20px; }
.sw-gpt-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sw-gpt-row > label { font-size: .85rem; font-weight: 800; color: #334155; min-width: 110px; }
.sw-gpt-row > label small { font-weight: 400; color: #94a3b8; }
.sw-gpt-row input { flex: 1; min-width: 160px; padding: 8px 11px; border: 1.5px solid #cbd5e1; border-radius: 9px; font-family: inherit; font-size: .9rem; outline: none; }
.sw-gpt-row input:focus { border-color: #10a37f; box-shadow: 0 0 0 3px rgba(16,163,127,.15); }
.sw-gpt-parts { display: flex; gap: 8px; }
.sw-gpt-part { padding: 8px 16px; border-radius: 9px; border: 1.5px solid #cbd5e1; background: #fff; font-family: inherit; font-size: .85rem; font-weight: 800; color: #475569; cursor: pointer; }
.sw-gpt-part.on { background: #10a37f; color: #fff; border-color: #10a37f; }
.sw-gpt-ta { width: 100%; box-sizing: border-box; padding: 12px; border: 1.5px solid #cbd5e1; border-radius: 12px; font-family: 'Courier New', monospace; font-size: .8rem; line-height: 1.55; resize: vertical; outline: none; color: #1e293b; margin-top: 4px; }
.sw-gpt-ta:focus { border-color: #10a37f; }
.sw-gpt-actions { display: flex; gap: 10px; margin-top: 12px; }
.sw-gpt-copy, .sw-gpt-send { padding: 9px 18px; border-radius: 10px; border: none; font-family: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; }
.sw-gpt-copy { background: #0ea5e9; color: #fff; }
.sw-gpt-send { background: #10a37f; color: #fff; }
.sw-gpt-copy:hover, .sw-gpt-send:hover { filter: brightness(.94); }
.sw-gpt-divider { height: 1px; background: #e2e8f0; margin: 16px 0 12px; }
.sw-gpt-paste-lbl { font-size: .85rem; font-weight: 800; color: #0f766e; margin-bottom: 8px; }
.sw-gpt-parse { padding: 9px 18px; border-radius: 10px; border: none; font-family: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; background: #8b5cf6; color: #fff; }
.sw-gpt-parse:hover { filter: brightness(.94); }
.sw-topbar-credits {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface2); border-radius: 999px; padding: 5px 13px;
  font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.sw-topbar-credits b { color: #d97706; }
.sw-topbar-credits .spk-credits-buy { color: #2563eb; cursor: pointer; font-weight: 700; }
.sw-topbar-credits .spk-credits-buy:hover { text-decoration: underline; }

/* Sub-tabs */
.sw-subtabs {
  display: flex; gap: 6px; padding: 14px 20px 0;
  max-width: 900px; margin: 0 auto; width: 100%;
}
.sw-subtab {
  padding: 5px 18px; border-radius: 99px;
  border: 1.5px solid var(--border); background: #fff;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  color: var(--muted); transition: all .15s;
}
.sw-subtab:hover { border-color: #ea580c; color: #ea580c; }
.sw-subtab.active { background: #ea580c; border-color: #ea580c; color: #fff; }

/* Part tabs (sub-filter under IELTS) */
.sw-part-tabs {
  display: flex; gap: 6px; padding: 8px 20px 0;
  max-width: 900px; margin: 0 auto; width: 100%;
}
.sw-part-tab {
  padding: 3px 14px; border-radius: 99px;
  border: 1.5px solid #fdba74; background: #fff7ed;
  font-size: .76rem; font-weight: 700; cursor: pointer;
  color: #c2410c; transition: all .15s;
}
.sw-part-tab:hover { background: #fed7aa; border-color: #f97316; }
.sw-part-tab.active { background: #ea580c; border-color: #ea580c; color: #fff; }

/* Band tabs (sub-filter under Part) */
.sw-band-tabs {
  display: flex; gap: 6px; padding: 6px 20px 0;
  max-width: 900px; margin: 0 auto; width: 100%;
}
.sw-band-tab {
  padding: 2px 12px; border-radius: 99px;
  border: 1.5px solid #a5b4fc; background: #eef2ff;
  font-size: .72rem; font-weight: 700; cursor: pointer;
  color: #4338ca; transition: all .15s;
}
.sw-band-tab:hover { background: #c7d2fe; border-color: #6366f1; }
.sw-band-tab.active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* List */
.sw-list-view { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.sw-sample-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; max-width: 900px; margin: 20px auto 0;
}
.sw-card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 12px; padding: 14px 16px; cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column; gap: 8px;
}
.sw-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); border-color: #ea580c; }
.sw-card { position: relative; }
.sw-card-del {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
  background: #fef2f2; color: #dc2626; font-size: .92rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .13s, background .13s;
}
.sw-card:hover .sw-card-del { opacity: 1; }
.sw-card-del:hover { background: #fee2e2; }
@media (hover: none) { .sw-card-del { opacity: 1; } }
/* Bài mẫu khóa Premium */
.sw-card-locked { position: relative; border-style: dashed; border-color: #fcd34d; background: #fffdf5; }
.sw-card-locked .sw-card-title, .sw-card-locked .sw-card-tags, .sw-card-locked .sw-card-topic { opacity: .55; filter: blur(.3px); }
.sw-card-locked:hover { border-color: #f59e0b; box-shadow: 0 4px 16px rgba(245,158,11,.18); }
.sw-card-lock {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800;
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; font-family: 'Nunito', sans-serif;
}
.sw-card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sw-card-title {
  font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sw-card-level { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: #fef3c7; color: #92400e; }
.sw-card-part  { font-size: .7rem; padding: 2px 7px; border-radius: 99px; background: #e0e7ff; color: #3730a3; }
.sw-card-exam  { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.sw-card-exam--ielts  { background: #dcfce7; color: #166534; }
.sw-card-exam--toeic  { background: #dbeafe; color: #1e40af; }
.sw-form-row-3 { flex-direction: row; gap: 10px; }
.sw-form-row-3 > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sw-card-topic { font-size: .75rem; color: var(--muted); }
.sw-empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: .9rem; }

/* Detail */
.sw-detail-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* Dictionary panel slides in from the right */
.sw-dict-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92%); background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 28px rgba(0,0,0,.14);
  transform: translateX(100%); transition: transform .25s ease;
  z-index: 50; display: flex; flex-direction: column;
}
.sw-dict-panel.open { transform: translateX(0); }
.sw-dict-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-family: 'Nunito', sans-serif; flex-shrink: 0;
}
.sw-dict-close {
  background: none; border: none; cursor: pointer; font-size: 1.05rem;
  color: var(--muted); padding: 4px 9px; border-radius: 6px; line-height: 1;
}
.sw-dict-close:hover { background: var(--surface2); color: var(--ink); }
.sw-dict-result { flex: 1; overflow-y: auto; padding: 14px 16px; }
.sw-detail-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sw-detail-back {
  background: none; border: none; cursor: pointer;
  font-size: .82rem; color: var(--muted); padding: 4px 8px; border-radius: 6px;
}
.sw-detail-back:hover { background: var(--surface2); color: var(--ink); }
.sw-detail-title-bar {
  font-size: .88rem; font-weight: 600; color: var(--ink);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-edit-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  font-size: .78rem; padding: 4px 10px; border-radius: 6px; color: var(--muted);
}
.sw-edit-btn:hover { border-color: #ea580c; color: #ea580c; }
.sw-font-ctrl { display: flex; gap: 4px; }
.sw-font-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--muted);
  border-radius: 6px; padding: 3px 9px; line-height: 1; min-width: 30px;
}
.sw-font-btn:hover { border-color: #ea580c; color: #ea580c; background: #fff7ed; }
.sw-font-btn.sw-font-sm { font-size: .72rem; }
.sw-font-btn.sw-font-lg { font-size: .92rem; }

/* Split layout */
.sw-detail-body { flex: 1; display: flex; overflow: hidden; }
.sw-passage-col {
  flex: 1; overflow-y: auto; padding: 24px 28px;
  font-family: 'Poppins', sans-serif; font-size: 15px;
  line-height: 1.8; color: var(--ink); min-width: 240px;
}
.sw-passage-col p { margin: 0 0 1em; }
.sw-cue {
  background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid #f97316;
  border-radius: 10px; padding: 12px 16px; margin: 0 0 1.3em;
  color: #9a3412; font-size: .92em; line-height: 1.6;
}
.sw-vi-line {
  color: #2563eb; font-style: italic; font-size: .92em;
  margin: -0.4em 0 1.1em !important; padding-left: 10px;
  border-left: 3px solid #bfdbfe;
}
.sw-vi-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--muted); border-radius: 6px; padding: 4px 10px;
}
.sw-vi-btn:hover { border-color: #2563eb; color: #2563eb; }
.sw-vi-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.sw-ai-translate-btn {
  font-family: 'Nunito', sans-serif; font-size: .72rem; font-weight: 700; cursor: pointer;
  border: 1px solid #93c5fd; background: #eff6ff; color: #1d4ed8;
  border-radius: 999px; padding: 3px 12px; flex-shrink: 0;
}
.sw-ai-translate-btn:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.sw-ai-translate-btn:disabled { opacity: .6; cursor: default; }

/* ══ Speaking Hub + Practice ══ */
#screen-spk-hub.sw-screen { background: radial-gradient(1200px 500px at 15% 0%, #fff4ec 0%, transparent 55%), radial-gradient(1000px 500px at 90% 30%, #f3f0ff 0%, transparent 55%), #fbf9f7; }
.spk-hub-wrap {
  flex: 1; display: flex; flex-wrap: wrap; gap: 18px; align-content: flex-start;
  justify-content: center; padding: 36px 20px; max-width: 680px; margin: 0 auto; width: 100%;
}
.spk-hub-card {
  position: relative;
  flex: 1 1 230px; max-width: 280px; background: #fff; border: 1px solid #f1efec;
  border-radius: 18px; padding: 24px 20px 22px; cursor: pointer; text-align: center;
  box-shadow: 0 10px 28px rgba(30,41,59,.07);
  transition: transform .18s ease, box-shadow .18s ease;
}
.spk-hub-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(30,41,59,.13); }
.spk-lock {
  position: absolute; top: 12px; right: 12px;
  background: #fef3c7; color: #92400e; font-size: .64rem; font-weight: 800;
  border-radius: 999px; padding: 2px 8px; letter-spacing: .02em;
}
.spk-hub-icon {
  width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 12px; background: #fff1e3; box-shadow: inset 0 0 0 5px rgba(255,255,255,.6);
}
.spk-hub-title { font-size: 1.15rem; font-weight: 800; color: #1f2937; font-family: 'Nunito', sans-serif; }
.spk-hub-title::after { content: ''; display: block; width: 28px; height: 3px; border-radius: 999px; background: #f59e0b; margin: 9px auto 10px; }
.spk-hub-desc { font-size: .82rem; color: #9aa3b2; line-height: 1.55; max-width: 230px; margin: 0 auto; }
/* per-card accent */
.spk-hub-card--practice .spk-hub-icon { background: #f0ecff; }
.spk-hub-card--practice .spk-hub-title::after { background: #8b7cf6; }
.spk-hub-card--room .spk-hub-icon { background: #e8f7ee; }
.spk-hub-card--room .spk-hub-title::after { background: #34c77b; }

.spk-topic-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px; max-width: 920px; margin: 20px auto 0;
}
.spk-topic-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--acc, #8b7cf6) 22%, #ffffff);
  border-radius: 18px; padding: 16px 18px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(30,41,59,.07); transition: transform .15s, box-shadow .15s;
}
.spk-topic-card::after {
  content: ''; position: absolute; right: -34px; bottom: -46px; width: 170px; height: 130px;
  background: color-mix(in srgb, var(--acc, #8b7cf6) 13%, #ffffff); border-radius: 48%; pointer-events: none;
}
.spk-topic-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(30,41,59,.13); }
.spk-topic-ic {
  position: relative; z-index: 1; flex: none; width: 62px; height: 62px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 900; color: #fff;
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc, #8b7cf6) 78%, #ffffff), var(--acc, #8b7cf6));
}
.spk-topic-body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.spk-topic-title { font-size: 1.2rem; font-weight: 800; color: #1f2937; font-family: 'Nunito', sans-serif; line-height: 1.2; }
.spk-topic-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  background: color-mix(in srgb, var(--acc, #8b7cf6) 13%, #ffffff); color: var(--acc, #8b7cf6);
  font-size: .76rem; font-weight: 700; border-radius: 999px; padding: 4px 12px;
}
.spk-topic-admin { position: relative; z-index: 1; display: flex; gap: 8px; }
.spk-topic-edit, .spk-topic-del {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid; background: #fff; cursor: pointer;
  font-size: .82rem; display: flex; align-items: center; justify-content: center; flex: none;
}
.spk-topic-edit { border-color: color-mix(in srgb, var(--acc, #8b7cf6) 45%, #ffffff); color: var(--acc, #8b7cf6); }
.spk-topic-edit:hover { background: color-mix(in srgb, var(--acc, #8b7cf6) 12%, #ffffff); }
.spk-topic-del { border-color: #fecaca; color: #dc2626; }
.spk-topic-del:hover { background: #fef2f2; }
.spk-detail, .spk-answer-wrap { max-width: 820px; margin: 12px auto 0; }
.spk-detail-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.spk-detail-title { font-size: 1rem; font-weight: 700; color: var(--ink); flex: 1; }
.spk-mt-exit {
  flex: none; background: #ef4444; color: #fff; border: none;
  border-radius: 8px; padding: 7px 18px; font-size: .85rem; font-weight: 800;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  box-shadow: 0 3px 10px rgba(239,68,68,.35); transition: background .15s, transform .1s;
}
.spk-mt-exit:hover { background: #dc2626; transform: translateY(-1px); }
.spk-mt-exit:active { transform: scale(.96); }
.spk-q-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.spk-q-card {
  position: relative; display: flex; align-items: center; gap: 16px; background: #fff;
  border: 1px solid #eef0f5; border-radius: 18px; padding: 14px 18px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(15,23,42,.05); transition: transform .15s, box-shadow .15s;
}
.spk-q-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.1); }
.spk-q-ico {
  flex: none; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; background: color-mix(in srgb, var(--acc, #f97316) 14%, #ffffff);
}
.spk-q-num {
  flex: none; font-size: 1.05rem; font-weight: 800; color: var(--acc, #f97316);
  padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--acc, #f97316) 25%, #ffffff);
}
.spk-q-text { flex: 1; font-size: 1.02rem; font-weight: 600; color: #1e293b; line-height: 1.5; }
.spk-q-go { font-size: .92rem; font-weight: 700; color: #6366f1; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.spk-q-go b { font-size: 1.15rem; line-height: 1; }
.spk-q-admin { display: flex; gap: 8px; }
.spk-q-iconbtn {
  width: 38px; height: 38px; border-radius: 10px; border: none; cursor: pointer; font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s;
}
.spk-q-iconbtn.edit { background: #eef2ff; color: #6366f1; }
.spk-q-iconbtn.edit:hover { background: #e0e7ff; }
.spk-q-iconbtn.del { background: #fef2f2; color: #ef4444; }
.spk-q-iconbtn.del:hover { background: #fee2e2; }

.spk-q-prompt {
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 16px 18px;
  font-size: 1.1rem; font-weight: 600; color: #1e293b; line-height: 1.5; margin-bottom: 16px;
}
.spk-q-prompt-lbl { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6366f1; margin-bottom: 6px; }
.spk-listen-btn { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 2px 4px; }
.spk-ans-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.spk-mic-btn {
  background: #fff; border: 1.5px solid #c4b5fd; color: #6d28d9; border-radius: 999px;
  padding: 6px 16px; font-weight: 700; font-size: .85rem; cursor: pointer; font-family: 'Nunito', sans-serif;
}
.spk-mic-btn:hover { background: #f5f3ff; }
.spk-mic-btn.recording { background: #dc2626; border-color: #dc2626; color: #fff; animation: spkPulse 1.2s infinite; }
@keyframes spkPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
.spk-ans-hint { font-size: .8rem; color: var(--muted); }
.spk-ans-input {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 14px 16px; font-size: 1rem; font-family: 'Poppins', sans-serif; resize: vertical; line-height: 1.6;
}
.spk-ans-input:focus { outline: none; border-color: #6366f1; }
.spk-submit-btn {
  margin-top: 14px; width: 100%; background: #6366f1; color: #fff; border: none; border-radius: 12px;
  padding: 14px; font-size: 1rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif;
}
.spk-submit-btn:hover { background: #4f46e5; }
.spk-submit-btn:disabled { opacity: .7; cursor: default; }
.spk-result { margin-top: 18px; }
.spk-loading { text-align: center; color: var(--muted); padding: 24px; }
.spk-res-band {
  display: flex; align-items: baseline; gap: 10px; justify-content: center;
  border-radius: 12px; padding: 14px; margin-bottom: 14px;
}
.spk-res-band-lbl { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.spk-res-band-num { font-size: 2.4rem; font-weight: 900; }
.spk-res-great { background: #f0fdf4; color: #15803d; }
.spk-res-ok { background: #fffbeb; color: #b45309; }
.spk-res-bad { background: #fef2f2; color: #dc2626; }
.spk-res-sec { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.spk-res-sec-lbl { font-size: .8rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.spk-res-text { font-size: .92rem; color: #374151; line-height: 1.6; }
.spk-res-tips { margin: 0; padding-left: 20px; font-size: .9rem; color: #374151; line-height: 1.6; }
.spk-res-tips li { margin-bottom: 4px; }
.spk-tip-en { font-weight: 700; color: #1f2937; }
.spk-tip-ok { font-weight: 800; color: #16a34a; }
.spk-res-improved {
  font-size: .98rem; color: #15803d; line-height: 1.6; font-style: italic;
  background: #f0fdf4; border-left: 3px solid #22c55e; border-radius: 0 8px 8px 0; padding: 10px 14px;
}
.spk-key-mark { background: #fde68a; color: #92400e; font-style: normal; font-weight: 700; border-radius: 3px; padding: 0 2px; }
.spk-key-wrap { margin-top: 12px; border-top: 1px dashed #bbf7d0; padding-top: 10px; }
.spk-key-title { font-size: .8rem; font-weight: 800; color: #15803d; margin-bottom: 6px; }
.spk-key-list { margin: 0; padding-left: 20px; font-size: .9rem; line-height: 1.7; }
.spk-key-list li { margin-bottom: 4px; }
.spk-key-ph { font-weight: 800; color: #b45309; }
.spk-key-vi { color: #475569; }
/* Tạo câu trả lời mẫu khác (AI) */
.spk-alt-sec .spk-res-improved { background: #faf5ff; border-left-color: #a855f7; color: #6b21a8; }
.spk-alt-sec .spk-key-wrap { border-top-color: #e9d5ff; }
.spk-alt-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.spk-alt-btn {
  border: none; border-radius: 12px; padding: 12px 18px; font-size: .95rem; font-weight: 800;
  cursor: pointer; font-family: 'Nunito', sans-serif; color: #fff;
  background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 6px 16px rgba(124,58,237,.3);
  transition: transform .1s, box-shadow .12s, opacity .15s;
}
.spk-alt-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(124,58,237,.4); }
.spk-alt-btn:disabled { opacity: .7; cursor: default; transform: none; box-shadow: none; }
.spk-alt-note { flex: 1; min-width: 160px; font-size: .8rem; color: #94a3b8; line-height: 1.4; }
.spk-res-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.spk-save-btn, .spk-retry-btn {
  flex: 1; min-width: 130px; border: none; border-radius: 12px; padding: 12px; font-size: .95rem;
  font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif;
}
.spk-save-btn { background: #16a34a; color: #fff; }
.spk-save-btn:hover { background: #15803d; }
.spk-save-btn:disabled { opacity: .7; cursor: default; }
.spk-retry-btn { background: #e0e7ff; color: #4338ca; }
.spk-retry-btn:hover { background: #c7d2fe; }
.spk-saved-ans {
  background: #f9fafb; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
  font-size: .95rem; color: #374151; line-height: 1.55;
}
.spk-saved-ans .spk-res-sec-lbl { margin-bottom: 6px; }
/* Result: overall band circle + 4 IELTS criteria */
.spk-res-head { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.spk-res-band-circle {
  flex: none; width: 130px; border-radius: 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 18px 10px;
}
.spk-res-band-circle.spk-res-great { background: #f0fdf4; }
.spk-res-band-circle.spk-res-ok    { background: #fffbeb; }
.spk-res-band-circle.spk-res-bad   { background: #fef2f2; }
.spk-res-band-num { font-size: 2.6rem; font-weight: 900; line-height: 1; }
.spk-res-great .spk-res-band-num { color: #16a34a; } .spk-res-ok .spk-res-band-num { color: #d97706; } .spk-res-bad .spk-res-band-num { color: #dc2626; }
.spk-res-band-lbl { font-size: .75rem; font-weight: 700; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.spk-crit-grid { flex: 1; min-width: 240px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spk-crit { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.spk-crit-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.spk-crit-label { font-size: .76rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.spk-crit-score { font-size: 1rem; font-weight: 900; flex: none; }
.spk-crit-score.spk-res-great { color: #16a34a; } .spk-crit-score.spk-res-ok { color: #d97706; } .spk-crit-score.spk-res-bad { color: #dc2626; }
.spk-crit-fb { font-size: .76rem; color: var(--muted); line-height: 1.4; margin-top: 4px; }
/* Tiêu chí xổ chi tiết (expandable cards) */
.spk-crit-cards { margin-top: 16px; }
.spk-cc-list { display: flex; flex-direction: column; gap: 10px; }
.spk-cc-card { border: 1px solid #ede9fe; border-radius: 14px; background: #faf7ff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.spk-cc-card.spk-cc-open { border-color: #c4b5fd; box-shadow: 0 4px 16px rgba(124,58,237,.12); }
.spk-cc-head {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 15px 18px;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left;
}
.spk-cc-card.spk-cc-open .spk-cc-head { background: #f3eeff; }
.spk-cc-head:disabled { cursor: default; }
.spk-cc-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.spk-cc-label { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; color: #6d28d9; }
.spk-cc-score { font-size: 1.1rem; font-weight: 800; flex: none; }
.spk-cc-score.spk-res-great, .spk-cc-sub-score.spk-res-great { background: none; color: #16a34a; }
.spk-cc-score.spk-res-ok,    .spk-cc-sub-score.spk-res-ok    { background: none; color: #d97706; }
.spk-cc-score.spk-res-bad,   .spk-cc-sub-score.spk-res-bad   { background: none; color: #dc2626; }
.spk-cc-chev { color: #a78bfa; font-size: .9rem; flex: none; transition: transform .2s; }
.spk-cc-card.spk-cc-open .spk-cc-chev { transform: rotate(180deg); }
.spk-cc-detail { display: none; padding: 4px 18px 16px; }
.spk-cc-card.spk-cc-open .spk-cc-detail { display: block; }
.spk-cc-detail-hd { font-size: .78rem; color: #94a3b8; font-weight: 600; margin: 4px 0 6px; }
.spk-cc-sub { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid #f1edfb; }
.spk-cc-sub:first-of-type { border-top: none; }
.spk-cc-sub-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; opacity: .85; }
.spk-cc-sub-lbl { flex: 1; min-width: 0; font-size: .92rem; color: #475569; }
.spk-cc-sub-score { font-size: .96rem; font-weight: 800; flex: none; }
.spk-cc-desc { margin-top: 11px; font-size: .9rem; color: #64748b; line-height: 1.55; }
.spk-cost { font-size: .82rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.spk-credits-line { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 10px; }
.spk-credits-line b { color: #b45309; }
.spk-credits-buy { color: #2563eb; cursor: pointer; text-decoration: underline; }
@media (max-width: 560px) { .spk-crit-grid { grid-template-columns: 1fr; } }
.spk-hub-card--room:hover { border-color: #0ea5e9; }

/* ══ Mock test (Thi thử) ══ */
.spk-mock-cta {
  display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; cursor: pointer; text-align: left;
  margin: 18px 0 16px; padding: 14px 18px; border: none; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 8px 22px rgba(99,102,241,.32); transition: transform .15s, box-shadow .15s;
}
.spk-mock-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(99,102,241,.4); }
.spk-mock-cta-ic { font-size: 1.7rem; flex: none; }
.spk-mock-cta-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.spk-mock-cta-txt b { font-size: 1.02rem; }
.spk-mock-cta-txt small { font-size: .8rem; opacity: .9; margin-top: 2px; }
.spk-mock-cta-go { font-size: 1.3rem; flex: none; }

.spk-mt-runner, .spk-mt-review, .spk-mt-results { max-width: 860px; margin: 12px auto 0; }
.spk-mt-progress { height: 8px; background: #eef0f5; border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
.spk-mt-progress-bar { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 99px; transition: width .35s; }
.spk-mt-count { font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.spk-mt-qbox { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 16px; padding: 22px 22px; }
.spk-mt-q { font-size: 1.3rem; font-weight: 700; color: #1e293b; line-height: 1.45; }
.spk-mt-status { text-align: center; margin: 18px 0 8px; font-size: .95rem; font-weight: 700; min-height: 24px; }
.spk-mt-asking { color: #6366f1; }
.spk-mt-rec { color: #dc2626; }
.spk-mt-rec::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #dc2626; margin-right: 6px; animation: spkMtPulse 1s infinite; vertical-align: middle; }
@keyframes spkMtPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.spk-mt-live { min-height: 56px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 1rem; color: #334155; line-height: 1.6; }
.spk-mt-live:empty::before { content: attr(data-ph); color: #cbd5e1; }
.spk-mt-actions { text-align: center; margin-top: 18px; }
.spk-mt-next-btn {
  border: none; cursor: pointer; padding: 13px 34px; border-radius: 99px; font-size: 1rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: 0 6px 18px rgba(239,68,68,.32);
}
.spk-mt-next-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.spk-mt-rev-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.spk-mt-rev-card { background: #fff; border: 1px solid #eef0f5; border-radius: 14px; padding: 14px 16px; box-shadow: 0 3px 12px rgba(15,23,42,.05); }
.spk-mt-rev-q { font-weight: 700; color: #1e293b; display: flex; gap: 10px; align-items: flex-start; }
.spk-mt-rev-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #6366f1; color: #fff; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; }
.spk-mt-rev-a { margin-top: 8px; padding-left: 34px; font-size: .92rem; color: #475569; line-height: 1.55; }
.spk-mt-rev-actions { display: flex; gap: 12px; align-items: stretch; margin-top: 8px; }
.spk-mt-retry-btn {
  flex: none; border: 1.5px solid #c7d2fe; cursor: pointer; background: #eef2ff; color: #4f46e5;
  padding: 15px 22px; border-radius: 14px; font-size: 1rem; font-weight: 800; white-space: nowrap;
}
.spk-mt-retry-btn:hover { background: #e0e7ff; }
.spk-mt-grade-btn {
  flex: 1; display: block; box-sizing: border-box; border: none; cursor: pointer;
  padding: 15px; border-radius: 14px; font-size: 1.05rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 8px 22px rgba(22,163,74,.3);
}
.spk-mt-grade-btn:disabled { opacity: .6; cursor: not-allowed; }

.spk-mt-cols { display: flex; gap: 18px; align-items: flex-start; margin-top: 14px; }
.spk-mt-left { flex: 1 1 56%; min-width: 0; background: #fff; border: 1px solid #eef0f5; border-radius: 18px; padding: 18px; box-shadow: 0 4px 16px rgba(15,23,42,.05); }
.spk-mt-right { flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.spk-mt-left-hd { font-size: 1.1rem; font-weight: 800; color: #1e293b; }
.spk-mt-left-sub { font-size: .85rem; font-weight: 700; color: var(--muted); margin: 6px 0 12px; }
.spk-mt-qlist { display: flex; flex-direction: column; gap: 10px; }
.spk-mt-qrow { display: flex; align-items: center; gap: 12px; background: #f0fdf9; border: 1px solid #d1fae5; border-radius: 12px; padding: 10px 12px; }
.spk-mt-qrow-num { flex: none; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.spk-mt-qrow-q { flex: 1; font-size: .92rem; color: #334155; line-height: 1.4; min-width: 0; }
.spk-mt-detail-btn { flex: none; border: none; cursor: pointer; background: #10b981; color: #fff; font-weight: 700; font-size: .82rem; padding: 8px 14px; border-radius: 10px; white-space: nowrap; }
.spk-mt-detail-btn:hover { background: #059669; }
.spk-mt-band-card { background: #fff; border: 1px solid #eef0f5; border-radius: 18px; padding: 22px; text-align: center; box-shadow: 0 4px 16px rgba(15,23,42,.05); }
.spk-mt-band-circle { width: 132px; height: 132px; border-radius: 50%; border: 7px solid #3b82f6; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 12px; }
.spk-mt-band-circle.spk-res-brd-great { border-color: #22c55e; }
.spk-mt-band-circle.spk-res-brd-ok { border-color: #f59e0b; }
.spk-mt-band-circle.spk-res-brd-bad { border-color: #ef4444; }
.spk-mt-band-num { font-size: 2.6rem; font-weight: 800; color: #2563eb; line-height: 1; }
.spk-mt-band-pm { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.spk-mt-band-lbl { font-size: 1rem; font-weight: 700; color: #334155; }
.spk-mt-band-level { font-size: 1rem; font-weight: 800; color: #2563eb; margin-top: 2px; }
.spk-mt-fb-card { background: #fff; border: 1px solid #eef0f5; border-radius: 18px; padding: 18px; box-shadow: 0 4px 16px rgba(15,23,42,.05); }
.spk-mt-fb-hd { font-size: 1.05rem; font-weight: 800; color: #1e293b; margin-bottom: 14px; }
.spk-mt-crit-grid { display: flex; flex-direction: column; gap: 12px; }
.spk-mt-crit-top { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 700; color: #334155; margin-bottom: 5px; }
.spk-mt-crit-top .spk-res-great { background: none; color: #16a34a; }
.spk-mt-crit-top .spk-res-ok { background: none; color: #d97706; }
.spk-mt-crit-top .spk-res-bad { background: none; color: #dc2626; }
.spk-mt-crit-bar { height: 8px; background: #eef0f5; border-radius: 99px; overflow: hidden; }
.spk-mt-crit-fill { height: 100%; border-radius: 99px; transition: width .4s; }
.spk-res-bg-great { background: #22c55e; }
.spk-res-bg-ok { background: #f59e0b; }
.spk-res-bg-bad { background: #ef4444; }
.spk-mt-summary { margin-top: 14px; font-size: .92rem; color: #475569; line-height: 1.6; background: #f8fafc; border-radius: 10px; padding: 12px 14px; }
@media (max-width: 720px) { .spk-mt-cols { flex-direction: column; } .spk-mt-left, .spk-mt-right { flex: 1 1 100%; width: 100%; } .spk-mt-q { font-size: 1.12rem; } }

/* ══ Live classroom room ══ */
.room-header-info { font-size: .85rem; color: var(--muted); margin-left: auto; }
.room-lobby { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 40px 20px; max-width: 760px; margin: 0 auto; width: 100%; }
.room-lobby-card { flex: 1 1 300px; max-width: 340px; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 26px 22px; text-align: center; }
.room-lobby-icon { font-size: 2.4rem; margin-bottom: 10px; }
.room-lobby-title { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; font-family: 'Nunito', sans-serif; }
.room-lobby-desc { font-size: .85rem; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.room-code-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 1.1rem; font-weight: 700; text-align: center; letter-spacing: .12em; margin-bottom: 10px; text-transform: uppercase; }
.room-code-input:focus { outline: none; border-color: #0ea5e9; }
.room-btn { width: 100%; background: #e2e8f0; color: #1e293b; border: none; border-radius: 10px; padding: 11px; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: .95rem; }
.room-btn:hover { background: #cbd5e1; }
.room-btn-primary { background: #0ea5e9; color: #fff; }
.room-btn-primary:hover { background: #0284c7; }

.room-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 130px); }
.room-topline { display: flex; align-items: center; gap: 10px; padding: 8px 0; flex-wrap: wrap; }
.room-code-chip { background: #e0f2fe; color: #0369a1; border-radius: 999px; padding: 5px 14px; font-size: .9rem; cursor: pointer; }
.room-code-chip b { letter-spacing: .08em; }
.room-mini-btn { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: .8rem; cursor: pointer; color: var(--muted); }
.room-mini-btn:hover { border-color: #0ea5e9; color: #0ea5e9; }
.room-mini-btn-on { background: #dcfce7; border-color: #16a34a; color: #15803d; font-weight: 700; }
.room-mini-btn-on:hover { border-color: #16a34a; color: #15803d; }
.room-credits-chip {
  display: inline-flex; align-items: center; gap: 5px; background: #fffbeb; border: 1px solid #fde68a;
  color: #92400e; border-radius: 999px; padding: 4px 12px; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.room-credits-chip:hover { background: #fef3c7; }
.room-log { flex: 1; overflow-y: auto; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.room-msg { max-width: 80%; background: #f1f5f9; border-radius: 12px; padding: 8px 12px; align-self: flex-start; }
.room-msg-mine { background: #dbeafe; align-self: flex-end; }
.room-msg-name { display: block; font-size: .72rem; font-weight: 800; color: #0369a1; margin-bottom: 2px; }
.room-msg-text { font-size: .95rem; color: var(--ink); line-height: 1.5; word-break: break-word; }
.room-hl-r { color: #dc2626; background: #fef2f2; font-weight: 700; border-radius: 3px; padding: 0 2px; }
.room-hl-g { color: #16a34a; background: #f0fdf4; font-weight: 700; border-radius: 3px; padding: 0 2px; }
.room-hl-bar { position: absolute; z-index: 10006; display: flex; gap: 4px; background: #1f2937; border-radius: 9px; padding: 5px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.room-hl-bar button { background: #374151; color: #fff; border: none; border-radius: 6px; padding: 5px 10px; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: 'Nunito', sans-serif; }
.room-hl-bar button:hover { background: #4b5563; }
.room-live { min-height: 4px; padding: 4px 2px; }
.room-live-line { font-size: .9rem; color: #64748b; font-style: italic; padding: 3px 0; }
.room-live-name { font-weight: 700; color: #0ea5e9; font-style: normal; }
.room-live-mine .room-live-name { color: #2563eb; }
.room-input-bar { display: flex; align-items: flex-end; gap: 8px; padding: 10px 0 4px; }
.room-mic-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #c4b5fd; background: #fff; color: #6d28d9; font-size: 1.2rem; cursor: pointer; }
.room-mic-btn:hover { background: #f5f3ff; }
.room-mic-btn.recording { background: #dc2626; border-color: #dc2626; color: #fff; animation: spkPulse 1.2s infinite; }
.room-input { flex: 1; resize: none; border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 14px; font-size: 1rem; font-family: 'Poppins', sans-serif; line-height: 1.4; max-height: 120px; }
.room-input:focus { outline: none; border-color: #0ea5e9; }
.room-send-btn { flex: none; background: #0ea5e9; color: #fff; border: none; border-radius: 12px; padding: 11px 20px; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; }
.room-send-btn:hover { background: #0284c7; }
.room-grade-btn {
  display: inline-block; margin-top: 6px; background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd;
  border-radius: 999px; padding: 3px 12px; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif;
}
.room-grade-btn:hover { background: #6366f1; border-color: #6366f1; color: #fff; }
.room-grade-btn:disabled { opacity: .65; cursor: default; }
.room-del-btn {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 6px; margin-left: 6px;
  width: 24px; height: 24px; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
  border-radius: 999px; font-size: .72rem; font-weight: 800; cursor: pointer; vertical-align: middle;
}
.room-del-btn:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.room-del-btn:disabled { opacity: .55; cursor: default; }
.room-ai-card {
  align-self: stretch; max-width: 92%; background: #f0fdf4; border: 1.5px solid #bbf7d0;
  border-radius: 12px; padding: 10px 14px; margin: 2px 0;
}
.room-ai-head { font-size: .78rem; font-weight: 800; color: #15803d; margin-bottom: 6px; }
.room-ai-improved { font-size: .96rem; color: #14532d; line-height: 1.55; font-weight: 600; }
.room-ai-notes { font-size: .84rem; color: #4d7c0f; line-height: 1.5; margin-top: 6px; border-top: 1px dashed #bbf7d0; padding-top: 6px; }
.room-ai-fixes-wrap { margin-top: 8px; border-top: 1px dashed #bbf7d0; padding-top: 8px; }
.room-ai-fixes-lbl { font-size: .78rem; font-weight: 800; color: #15803d; margin-bottom: 4px; }
.room-ai-fixes { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.7; color: #374151; }
.room-ai-fixes li { margin-bottom: 5px; }
.room-fix-wrong { color: #dc2626; text-decoration: line-through; font-weight: 600; }
.room-fix-right { color: #15803d; font-weight: 700; }
.room-fix-note  { color: #475569; }

/* Room layout: chat (left) + vocab notes panel (right) */
.room-main { flex: 1; display: flex; gap: 14px; min-height: 0; }
.room-chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.room-vocab-panel { flex: none; width: 300px; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.room-vocab-panel-hd { display: flex; flex-direction: column; align-items: stretch; gap: 8px; font-size: .82rem; font-weight: 800; color: #6d28d9; padding: 8px 14px; border-bottom: 1px solid var(--border); background: #faf5ff; flex: none; }
.room-vocab-hd-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.room-vocab-test-btn { background: #f97316; color: #fff; border: none; border-radius: 999px; padding: 4px 14px; font-size: .76rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; flex: none; }
.room-vocab-test-btn:hover { background: #ea580c; }
.room-vocab-pdf-btn { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 999px; padding: 4px 12px; font-size: .76rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; flex: none; }
.room-vocab-pdf-btn:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.room-vocab-expand-btn { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; border-radius: 999px; padding: 4px 12px; font-size: .76rem; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; flex: none; }
.room-vocab-expand-btn:hover { background: #0891b2; border-color: #0891b2; color: #fff; }
/* Cửa sổ phóng to ghi chú từ vựng */
.room-vocab-expand-ov { position: fixed; inset: 0; z-index: 10600; background: rgba(15,23,42,.6); display: flex; align-items: center; justify-content: center; padding: 24px; }
.room-vocab-expand-box { background: #fff; border-radius: 18px; width: 100%; max-width: 920px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(0,0,0,.3); overflow: hidden; }
.room-vocab-expand-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #eef2f6; font-size: 1.2rem; font-weight: 900; color: #0f172a; flex: none; }
.room-vocab-expand-x { border: none; background: none; font-size: 1.4rem; cursor: pointer; color: #94a3b8; line-height: 1; }
.room-vocab-expand-x:hover { color: #0f172a; }
.room-vocab-expand-list { flex: 1; overflow-y: auto; padding: 20px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-content: start; font-size: 1.06rem; }
.room-vocab-expand-list .room-vocab-card { font-size: 1.05rem; }
.room-vocab-expand-list .room-vocab-word { font-size: 1.25rem; }
@media (max-width: 700px) { .room-vocab-expand-list { grid-template-columns: 1fr; } }
.room-vocab-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.room-vocab-empty { color: var(--muted); font-size: .85rem; text-align: center; padding: 20px 8px; }
.room-vocab-card { background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 10px; padding: 10px 12px; }
.room-vocab-word { font-size: 1.02rem; font-weight: 800; color: #6d28d9; display: flex; align-items: center; gap: 6px; }
.room-vocab-ipa { font-size: .82rem; color: #475569; margin-top: 3px; }
.room-ipa-lbl { font-size: .64rem; font-weight: 800; background: #6b7280; color: #fff; border-radius: 4px; padding: 1px 5px; margin-right: 2px; }
.room-vocab-vi { font-size: .9rem; color: #15803d; margin-top: 5px; font-weight: 600; }
.room-vocab-def { font-size: .82rem; color: #475569; line-height: 1.5; margin-top: 4px; }
.room-vocab-colloc { font-size: .82rem; color: #0369a1; line-height: 1.5; margin-top: 5px; }
.room-vocab-exs { margin-top: 5px; border-top: 1px dashed #e9d5ff; padding-top: 5px; }
.room-vocab-ex { font-size: .8rem; color: #6b7280; font-style: italic; line-height: 1.45; margin-top: 2px; }
.room-vocab-sa { font-size: .82rem; color: #334155; line-height: 1.5; margin-top: 5px; }
.room-vocab-sa b, .room-vocab-wf b { color: #6d28d9; font-weight: 700; }
.room-vocab-wf { font-size: .82rem; color: #334155; line-height: 1.5; margin-top: 5px; }
.room-vc-opts { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.room-vc-opts-lbl { width: 100%; font-size: .76rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.room-vc-chk { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--ink); cursor: pointer; }
.room-vc-chk input { cursor: pointer; }

/* ── Upgrade button + Premium pricing page ── */
.vs-upgrade-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg,#f59e0b,#ea580c); color: #fff; border: none;
  border-radius: 999px; padding: 0 14px; font-size: .8rem; font-weight: 800; cursor: pointer;
  font-family: inherit; box-shadow: 0 2px 8px rgba(234,88,12,.35);
}
.vs-upgrade-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pp-overlay { position: fixed; inset: 0; z-index: 10500; background: rgba(15,23,42,.6); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 28px 14px; overflow: auto; }
.pp-box { position: relative; background: #f8fafc; border-radius: 22px; max-width: 920px; width: 100%; padding: 30px 26px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.35); font-family: 'Nunito','Plus Jakarta Sans',sans-serif; }
.pp-close { position: absolute; top: 16px; right: 18px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #94a3b8; line-height: 1; }
.pp-title { text-align: center; font-size: 1.9rem; font-weight: 900; color: #0f172a; }
.pp-sub { text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: #64748b; margin: 6px 0 22px; }
.pp-cards { display: flex; gap: 18px; flex-wrap: wrap; align-items: stretch; }
.pp-card { flex: 1 1 340px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 18px; padding: 24px 22px; display: flex; flex-direction: column; }
.pp-card-prem { border: 2px solid #f59e0b; box-shadow: 0 10px 30px rgba(245,158,11,.18); position: relative; }
.pp-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #fde68a; color: #92400e; font-size: .68rem; font-weight: 900; letter-spacing: .04em; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.pp-plan-ic { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin: 6px auto 10px; }
.pp-ic-free { background: #eff6ff; color: #2563eb; }
.pp-ic-prem { background: #fef3c7; }
.pp-plan-name { text-align: center; font-size: 1.4rem; font-weight: 900; color: #0f172a; }
.pp-plan-tag { text-align: center; font-size: .82rem; color: #64748b; margin: 4px 0 14px; }
.pp-price-free { text-align: center; font-size: 2rem; font-weight: 900; color: #0f172a; margin-bottom: 14px; }
.pp-durs { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 12px; }
.pp-dur { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 999px; padding: 6px 12px; font-size: .78rem; font-weight: 700; color: #475569; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; }
.pp-dur.on { background: #1e293b; border-color: #1e293b; color: #fff; }
.pp-save { background: #16a34a; color: #fff; font-size: .62rem; font-weight: 800; border-radius: 999px; padding: 1px 6px; }
.pp-orig { text-align: center; font-size: 1rem; font-weight: 700; color: #94a3b8; text-decoration: line-through; }
.pp-price-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pp-price { font-size: 2rem; font-weight: 900; color: #ea580c; }
.pp-save-big { background: #16a34a; color: #fff; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.pp-permo { text-align: center; font-size: .8rem; color: #64748b; margin: 2px 0 12px; }
.pp-feats { list-style: none; margin: 4px 0 0; padding: 0; flex: 1; }
.pp-feats li { position: relative; padding: 6px 0 6px 26px; font-size: .88rem; color: #334155; line-height: 1.45; }
.pp-feats li::before { content: '✓'; position: absolute; left: 0; top: 6px; color: #16a34a; font-weight: 900; }
.pp-feats li.pp-feat-head { font-weight: 800; color: #0f172a; padding-left: 0; }
.pp-feats li.pp-feat-head::before { content: ''; }
.pp-cta { margin-top: 16px; width: 100%; background: linear-gradient(135deg,#f59e0b,#ea580c); color: #fff; border: none; border-radius: 12px; padding: 13px; font-size: 1rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.pp-cta:hover { filter: brightness(1.05); }
.pp-redeem { text-align: center; font-size: .82rem; color: #64748b; margin-top: 10px; }
.pp-redeem span { color: #2563eb; cursor: pointer; text-decoration: underline; font-weight: 700; }
.pp-foot-note { text-align: center; font-size: .76rem; color: #94a3b8; margin-top: 18px; }

/* Vocab lookup modal (teacher) */
.room-vocab-ov { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); z-index: 10005; display: flex; align-items: center; justify-content: center; padding: 16px; }
.room-vocab-modal { background: #fff; border-radius: 16px; width: min(460px, 100%); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); font-family: 'Poppins', sans-serif; }
.room-vocab-modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; }
.room-vocab-modal-hd button { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); }
.room-vocab-modal-search { display: flex; gap: 8px; padding: 14px 18px 8px; }
.room-vocab-modal-search input { flex: 1; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 1rem; font-family: 'Poppins', sans-serif; }
.room-vocab-modal-search input:focus { outline: none; border-color: #6d28d9; }
.room-vocab-modal-search button { background: #6d28d9; color: #fff; border: none; border-radius: 10px; padding: 0 18px; font-weight: 700; cursor: pointer; }
.room-vocab-modal-preview { padding: 8px 18px; overflow-y: auto; }
.room-vocab-send-btn { margin: 6px 18px 18px; background: #16a34a; color: #fff; border: none; border-radius: 10px; padding: 12px; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; }
.room-vocab-send-btn:hover { background: #15803d; }
.room-vocab-notfound { text-align: center; padding: 14px 10px 8px; }
.room-vc-nf-msg { font-weight: 800; color: #b45309; font-size: .98rem; }
.room-vc-nf-sub { color: #64748b; font-size: .86rem; margin: 8px 0 14px; line-height: 1.5; }
.room-vc-ai-btn { background: #7c3aed; color: #fff; border: none; border-radius: 10px; padding: 11px 22px; font-weight: 800; font-size: .92rem; cursor: pointer; font-family: 'Nunito', sans-serif; transition: background .12s; }
.room-vc-ai-btn:hover { background: #6d28d9; }
@media (max-width: 720px) {
  .room-main { flex-direction: column; }
  .room-vocab-panel { width: auto; max-height: 200px; }
}
/* Saved sessions (review) */
.room-saved-wrap { max-width: 760px; margin: 8px auto 30px; width: 100%; }
.room-saved-title { font-size: .95rem; font-weight: 800; color: var(--ink); margin: 0 4px 10px; font-family: 'Nunito', sans-serif; }
.room-saved-list { display: flex; flex-direction: column; gap: 8px; }
.room-saved-item { background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 16px; cursor: pointer; transition: all .15s; }
.room-saved-item:hover { border-color: #0ea5e9; box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.room-saved-item-title { font-size: .95rem; font-weight: 700; color: var(--ink); }
.room-saved-item-meta { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.room-saved-go { color: #0ea5e9; font-weight: 700; }
.room-review-badge { background: #fef9c3; color: #854d0e; border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 700; }
.sw-hl {
  background: #fde68a; color: inherit; border-radius: 3px;
  padding: 0 2px; box-shadow: 0 0 0 1px #fbbf24;
}
.sw-hl-flash { animation: swHlFlash 1.1s ease-out 1; }
@keyframes swHlFlash {
  0%   { background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.35); }
  100% { background: #fde68a; box-shadow: 0 0 0 1px #fbbf24; }
}
.sw-passage-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 18px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: 'Nunito', sans-serif;
}
.sw-detail-resizer {
  width: 8px; background: var(--border); cursor: col-resize;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.sw-detail-resizer:hover { background: #ea580c; }
.sw-resizer-dots::before { content: ''; display: block; width: 3px; height: 24px;
  background: repeating-linear-gradient(to bottom, #aaa 0, #aaa 3px, transparent 3px, transparent 6px);
  border-radius: 2px; }
.sw-analysis-col {
  flex: none; width: 320px; min-width: 200px; max-width: 70%; overflow-y: auto;
  padding: 18px 16px; background: var(--surface);
  border-left: 1px solid var(--border); font-family: 'Nunito', sans-serif;
}
.sw-analysis-section { margin-bottom: 22px; }
.sw-analysis-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sw-hl-all-btn {
  font-family: 'Nunito', sans-serif; font-size: .68rem; font-weight: 800;
  text-transform: none; letter-spacing: 0; flex-shrink: 0;
  border: 1px solid #fca5a5; background: #fef2f2; color: #dc2626;
  border-radius: 999px; padding: 2px 10px; cursor: pointer; transition: all .15s;
}
.sw-hl-all-btn:hover { background: #fee2e2; }
.sw-hl-all-btn.on { background: #dc2626; border-color: #dc2626; color: #fff; }
.sw-hl-all { background: transparent; color: #dc2626; font-weight: 700; }
.sw-vocab-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sw-test-btn {
  font-family: 'Nunito', sans-serif; font-size: .68rem; font-weight: 800;
  text-transform: none; letter-spacing: 0; flex-shrink: 0;
  border: 1px solid #c4b5fd; background: #f5f3ff; color: #6d28d9;
  border-radius: 999px; padding: 2px 10px; cursor: pointer; transition: all .15s;
}
.sw-test-btn:hover { background: #6366f1; border-color: #6366f1; color: #fff; }
.sw-analysis-item {
  padding: 10px 12px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 8px;
}
.sw-analysis-label { font-size: .82rem; font-weight: 700; color: #dc2626; margin-bottom: 4px; }
.sw-analysis-clickable { cursor: pointer; transition: border-color .12s, background .12s; }
.sw-analysis-clickable:hover { border-color: #fbbf24; background: #fffbeb; }
.sw-analysis-example { font-size: .8rem; color: #374151; font-style: italic; line-height: 1.45; margin: 3px 0; }
.sw-analysis-note { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.sw-vocab-item {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; margin-bottom: 6px;
  transition: border-color .12s, background .12s;
}
.sw-vocab-item:hover { border-color: #fbbf24; background: #fffbeb; }
.sw-vocab-word { font-weight: 700; font-size: .88rem; color: #16a34a; }
.sw-vocab-pos { font-size: .68rem; color: #fff; background: #6b7280; border-radius: 4px; padding: 1px 5px; }
.sw-vocab-meaning { font-size: .82rem; color: var(--muted); flex: 1 1 140px; min-width: 140px; }
.sw-vocab-ex { width: 100%; font-size: .74rem; color: var(--muted); font-style: italic; margin-top: 2px; }

/* Ideas / Gợi ý ý tưởng */
.sw-ideas { display: flex; flex-direction: column; gap: 4px; }
.sw-idea-topic {
  display: flex; align-items: center; gap: 8px;
  font-size: .86rem; font-weight: 800; color: var(--ink);
  margin: 14px 0 6px; padding-bottom: 5px; border-bottom: 1px dashed var(--border);
}
.sw-idea-topic:first-child { margin-top: 0; }
.sw-idea-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #f59e0b; color: #fff; font-size: .72rem; font-weight: 800;
}
.sw-idea-sublabel {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #b45309; margin: 8px 0 2px;
}
.sw-idea-colloc {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  padding: 6px 10px; border-radius: 7px; background: #fff;
  border: 1px solid var(--border);
}
.sw-idea-en { font-weight: 700; font-size: .82rem; color: var(--ink); }
.sw-idea-vi { font-size: .8rem; color: var(--muted); }
.sw-idea-vi::before { content: "= "; color: #d1d5db; }
.sw-idea-example {
  font-size: .8rem; color: #374151; font-style: italic; line-height: 1.45;
  padding: 6px 10px; border-left: 3px solid #fbbf24; background: #fffbeb;
  border-radius: 0 7px 7px 0; margin: 2px 0;
}

/* Modal */
.sw-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px); z-index: 9500;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.sw-modal-box {
  background: #fff; border-radius: 14px;
  width: min(680px, 100%); max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.sw-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: .95rem; font-family: 'Nunito', sans-serif;
}
.sw-modal-header button { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--muted); }
.sw-modal-body {
  flex: 1; overflow-y: auto; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 11px; font-family: 'Nunito', sans-serif;
}
.sw-form-row { display: flex; flex-direction: column; gap: 4px; }
.sw-form-row label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sw-form-row input, .sw-form-row select, .sw-form-row textarea {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 10px;
  font-size: .85rem; font-family: 'Nunito', sans-serif; resize: vertical; color: var(--ink);
}
.sw-form-row input:focus, .sw-form-row select:focus, .sw-form-row textarea:focus { outline: none; border-color: #ea580c; }
.sw-form-row-2 { flex-direction: row; gap: 10px; }
.sw-form-row-2 > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sw-modal-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.sw-modal-cancel { background: none; border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 16px; font-size: .82rem; cursor: pointer; font-family: 'Nunito', sans-serif; font-weight: 600; }
.sw-modal-delete { background: #fee2e2; border: 1.5px solid #fca5a5; border-radius: 8px; padding: 7px 16px; font-size: .82rem; cursor: pointer; color: #dc2626; font-family: 'Nunito', sans-serif; font-weight: 600; }
.sw-modal-save { background: #ea580c; color: #fff; border: none; border-radius: 8px; padding: 7px 20px; font-size: .82rem; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; margin-left: auto; }
.sw-modal-save:hover { background: #c2410c; }

/* ═══════════════════════════════════════════════════
   READING TEST MODE (rdt-)
   ═══════════════════════════════════════════════════ */

.rdt-screen {
  flex-direction: column;
  height: 100vh;
  background: #fafaf9;
  overflow: hidden;
}
.screen.active.rdt-screen {
  display: flex;
}

/* Top bar */
.rdt-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 52px;
  background: #fff;
  border-bottom: 1.5px solid #e5e7eb;
  flex-shrink: 0;
  position: relative;
  justify-content: center;
}

.rdt-close-btn {
  position: absolute;
  left: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #64748b;
  font-size: .95rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.rdt-close-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

.rdt-timer-wrap {
  display: flex; align-items: center; gap: 5px;
  background: #d1fae5;
  border: 1.5px solid #6ee7b7;
  border-radius: 20px;
  padding: 4px 14px;
  font-weight: 800;
}
.rdt-timer-icon { font-size: .85rem; }
.rdt-timer { font-size: .95rem; font-variant-numeric: tabular-nums; color: #065f46; }

.rdt-topbar-right {
  position: absolute;
  right: 14px;
  display: flex; align-items: center; gap: 8px;
}

.rdt-hdr-btn {
  padding: 5px 13px; border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: #fff; color: #374151;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.rdt-hdr-btn:hover { background: #f3f4f6; }
.rdt-hdr-btn--edit.active { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.rdt-hdr-btn--on { background: #dcfce7; border-color: #86efac; color: #15803d; }
.rdt-hdr-btn--on:hover { background: #bbf7d0; }
.rdt-q-fontsize-wrap { display: flex; align-items: center; gap: 3px; }
.rdt-q-fs-btn {
  padding: 3px 8px; border-radius: 6px;
  border: 1.5px solid #e5e7eb; background: #fff; color: #374151;
  font-size: .75rem; font-weight: 700; cursor: pointer; transition: background .12s;
}
.rdt-q-fs-btn:hover { background: #f3f4f6; }
.rdt-q-fs-val { font-size: .72rem; color: #6b7280; min-width: 30px; text-align: center; }

.rdt-tool-topbar-btn {
  padding: 5px 13px; border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: #fff; color: #374151;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.rdt-tool-topbar-btn:hover { background: #f0fdf4; border-color: #6ee7b7; }
.rdt-tool-topbar-btn.active { background: #d1fae5; border-color: #059669; color: #065f46; }

/* Body */
.rdt-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

.rdt-tools { display: none; }

/* Passage column wrapper */
.rdt-left-wrap {
  flex: 1 1 55%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.rdt-article-title {
  padding: 10px 20px 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
  display: none;
}
.rdt-article-title:not(:empty) { display: block; }
.rdt-article-title { color: #dc2626; }
.rdt-title-level { color: #16a34a; }

.rdt-passage-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-bottom: 1.5px solid #f1f5f9;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rdt-toolbar-sep {
  width: 1px; height: 20px;
  background: #e5e7eb;
  margin: 0 2px;
  flex-shrink: 0;
}

.rdt-font-select {
  padding: 4px 7px;
  border: 1.5px solid #e5e7eb;
  border-radius: 7px;
  font-size: .75rem;
  font-weight: 700;
  color: #374151;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.rdt-font-select:focus { border-color: #059669; }

.rdt-font-size-btn {
  padding: 3px 9px;
  border: 1.5px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  color: #374151;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .12s;
}
.rdt-font-size-btn:hover { background: #f0fdf4; border-color: #6ee7b7; }

.rdt-font-size-val {
  font-size: .72rem;
  font-weight: 700;
  color: #9ca3af;
  min-width: 30px;
  text-align: center;
}

.rdt-popup-sw { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rdt-popup-sw-lbl { font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* Passage (left panel) */
.rdt-left {
  flex: 1;
  overflow-y: auto;
  padding: 20px 32px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #1e293b;
}
.rdt-left .reading-article { max-width: 680px; margin: 0 auto; }

/* Highlighted text in test mode — seamless band */
.rd-word-container.rdt-hl .rd-word {
  position: relative;
  z-index: 0;
  cursor: pointer;
}
.rd-word-container.rdt-hl .rd-word::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -5px;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  height: 1.35em;
  background: transparent;
  border-radius: 0;
}
.rd-word-container.rdt-hl-yellow .rd-word::before { background: #fef08a; }
.rd-word-container.rdt-hl-green  .rd-word::before { background: #bbf7d0; }
.rd-word-container.rdt-hl-blue   .rd-word::before { background: #bfdbfe; }
.rd-word-container.rdt-hl-pink   .rd-word::before { background: #fbcfe8; }
.rd-word-container.rdt-hl-yellow:hover .rd-word::before { background: #fde047; }
.rd-word-container.rdt-hl-green:hover  .rd-word::before { background: #86efac; }
.rd-word-container.rdt-hl-blue:hover   .rd-word::before { background: #93c5fd; }
.rd-word-container.rdt-hl-pink:hover   .rd-word::before { background: #f9a8d4; }
.rd-word-container.rdt-hl-start .rd-word::before { border-radius: 4px 0 0 4px; left: 0; }
.rd-word-container.rdt-hl-end   .rd-word::before { border-radius: 0 4px 4px 0; right: 0; }
.rd-word-container.rdt-hl-start.rdt-hl-end .rd-word::before { border-radius: 4px; left: 0; right: 0; }
/* Color picker dots */
.rdt-hl-colors {
  display: none; /* chỉ hiện khi bật chế độ Highlight */
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}
.rdt-hl-colors.rdt-hl-colors-on { display: flex; }
.rdt-hl-color-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color .15s, transform .1s;
}
.rdt-hl-color-btn:hover { transform: scale(1.2); }
.rdt-hl-color-btn.active { border-color: #374151; transform: scale(1.15); }

/* Resizer handle */
.rdt-resizer {
  width: 8px;
  flex-shrink: 0;
  background: #f1f5f9;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  user-select: none;
  position: relative;
  z-index: 5;
}
.rdt-resizer:hover, .rdt-resizer.dragging { background: #d1fae5; border-color: #6ee7b7; }
.rdt-resizer-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}
.rdt-resizer-dots::before,
.rdt-resizer-dots::after {
  content: '';
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #9ca3af;
  box-shadow: 0 6px 0 #9ca3af, 0 -6px 0 #9ca3af;
}

/* Questions panel (right) */
.rdt-right {
  flex: 1 1 45%;
  min-width: 280px;
  overflow-y: auto;
  padding: 20px 24px;
  font-family: 'Poppins', sans-serif;
}

.rdt-empty {
  text-align: center; color: var(--muted);
  padding: 40px 20px; font-size: .9rem; line-height: 1.7;
}

/* Group header */
.rdt-group-hdr {
  margin-bottom: 18px;
  background: linear-gradient(180deg, #f0fdfa, #f8fffe);
  border: 1.5px solid #99f6e4;
  border-radius: 16px;
  padding: 18px 22px;
}
.rdt-group-title {
  font-size: 1.1rem; font-weight: 800; color: #111;
  margin-bottom: 6px;
}
.rdt-group-instr {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: var(--rdt-qfs, 15px); color: #334155; line-height: 1.6;
  border-bottom: none; padding-bottom: 0; margin-bottom: 0;
}
.rdt-instr-ic {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  background: #ccfbf1; color: #0d9488;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.rdt-instr-main { flex: 1; min-width: 0; }
.rdt-instr-qline { font-size: calc(var(--rdt-qfs, 15px) + 5px); font-weight: 800; color: #0f766e; margin-bottom: 8px; }
.rdt-instr-p { color: #334155; margin-bottom: 4px; }
.rdt-instr-sub { font-weight: 800; color: #0d9488; margin: 12px 0 8px; padding-top: 12px; border-top: 1px dashed #99f6e4; }
.rdt-legend-row { display: flex; align-items: center; gap: 12px; margin: 7px 0; }
.rdt-legend-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px; padding: 5px 14px; border-radius: 8px;
  color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .4px; flex-shrink: 0;
}
.rdt-lg-true { background: #5ec2a8; }
.rdt-lg-false { background: #e23d6d; }
.rdt-lg-ng { background: #f5b300; }
.rdt-legend-txt { color: #475569; font-size: .92rem; }

/* YNNG (True/False/Not Given) dropdown questions */
.rdt-ynng-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #f7faf9;
  border: 1px solid #e9eef0;
  border-radius: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rdt-ynng-row.rdt-ynng-ok { background: #f0fdf4; border-color: #86efac; }
.rdt-ynng-row.rdt-ynng-ng { background: #fff1f2; border-color: #fca5a5; }
.rdt-ynng-row .rdt-q-badge {
  width: 40px; height: 40px; font-size: 1rem;
  background: #0d9488; box-shadow: 0 0 0 5px #d6f3ec; margin-top: 0;
}
.rdt-ynng-stmt {
  flex: 1;
  font-size: calc(var(--rdt-qfs, 15px) + 1px);
  line-height: 1.5;
  color: #334155;
  font-weight: 600;
  min-width: 200px;
}
.rdt-ynng-sel {
  min-width: 175px;
  font-size: .92rem;
  font-family: inherit; font-weight: 600; color: #334155;
  padding: 11px 36px 11px 16px;
  border: 1.5px solid #5eccb0;
  border-radius: 12px;
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%230d9488" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat; background-position: right 13px center;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer;
  flex-shrink: 0;
}
.rdt-ynng-sel:hover { border-color: #2dd4bf; }
.rdt-ynng-sel:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.15); }
.rdt-ynng-sel-ok { border-color: #22c55e; background: #f0fdf4; color: #15803d; font-weight: 600; }
.rdt-ynng-sel-ng { border-color: #ef4444; background: #fff1f2; color: #dc2626; font-weight: 600; }
.rdt-ynng-verdict {
  font-size: .78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.rdt-ynng-v-ok { background: #dcfce7; color: #16a34a; }
.rdt-ynng-v-ng { background: #fee2e2; color: #dc2626; }
.rdt-ynng-exp { width: 100%; flex-basis: 100%; margin-top: 4px; }
.rdt-ynng-clickable { cursor: pointer; transition: box-shadow .15s; }
.rdt-ynng-clickable:hover { box-shadow: 0 2px 10px rgba(99,102,241,.18); }
.rdt-ynng-find-hint { font-size: .85rem; opacity: .55; flex-shrink: 0; cursor: pointer; }
.rdt-ynng-clickable:hover .rdt-ynng-find-hint { opacity: 1; }
.rdt-ynng-exp-en { font-size: .82rem; color: #374151; line-height: 1.5; }
.rdt-ynng-exp-vi {
  margin-top: 8px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
}
.rdt-ynng-exp-vi-hdr {
  font-size: .75rem;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 5px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rdt-ynng-exp-vi-hdr::-webkit-details-marker { display: none; }
.rdt-ynng-exp-vi-hdr::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.rdt-ynng-exp-vi-det[open] > .rdt-ynng-exp-vi-hdr::before { content: '▾ '; }
.rdt-ynng-exp-vi-det[open] .rdt-vi-toggle-hint { display: none; }
.rdt-vi-toggle-hint { font-weight: 600; color: #94a3b8; }
/* Gap-fill / Notes completion */
.rdt-gap-notes { margin: 6px 0 4px; padding: 4px 2px; }
.rdt-gap-title { font-size: calc(var(--rdt-qfs, 15px) + 2px); font-weight: 800; text-align: center; color: #1e293b; margin: 2px 0 10px; line-height: 1.5; }
.rdt-gap-h { font-size: var(--rdt-qfs, 15px); font-weight: 800; color: #0f172a; margin: 12px 0 6px; }
.rdt-gap-li { position: relative; padding-left: 18px; margin: 7px 0; font-size: var(--rdt-qfs, 15px); color: #374151; line-height: 1.9; }
.rdt-gap-li::before { content: '•'; position: absolute; left: 4px; color: #94a3b8; }
.rdt-gap-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 8px; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: calc(var(--rdt-qfs, 15px) - 1px); font-weight: 800; vertical-align: middle; flex-shrink: 0; }
.rdt-gap-input { min-width: 130px; padding: 3px 8px; border: none; border-bottom: 1.5px solid #94a3b8; background: transparent; font-size: var(--rdt-qfs, 15px); font-family: inherit; outline: none; color: #1d4ed8; }
.rdt-gap-input:focus { border-bottom-color: #2563eb; }
.rdt-gap-input-ok { color: #15803d; border-bottom-color: #16a34a; }
.rdt-gap-input-ng { color: #dc2626; border-bottom-color: #dc2626; text-decoration: line-through; }
.rdt-gap-corr { margin-left: 6px; font-size: calc(var(--rdt-qfs, 15px) - 1px); font-weight: 700; color: #15803d; }
.rdt-gap-exp { margin: 4px 0 10px 18px; }
.rdt-ynng-exp-vi-body p {
  font-size: .82rem;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 4px;
  padding-left: 4px;
}
.rdt-ynng-exp-vi-body p:last-child { margin-bottom: 0; }

/* Matching exercise */
.rdt-matching-wrap {
  margin-bottom: 24px;
}
.rdt-matching-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  scroll-margin-top: 12px;
}
.rdt-matching-qtext {
  flex: 1;
  font-size: .92rem;
  line-height: 1.5;
  color: #111;
  padding-top: 6px;
}
.rdt-matching-slot {
  min-width: 110px;
  max-width: 160px;
  min-height: 34px;
  border: 2px dashed #9ca3af;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .82rem;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  background: #f9fafb;
  text-align: center;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.rdt-matching-slot.filled {
  border-style: solid;
  border-color: #6366f1;
  background: #eef2ff;
  color: #3730a3;
}
.rdt-matching-slot:not(.filled):hover {
  border-color: #6366f1;
  background: #f0f0ff;
}
.rdt-matching-slot.correct {
  border-color: #059669;
  background: #ecfdf5;
  color: #065f46;
}
.rdt-matching-slot.wrong {
  border-color: #dc2626;
  background: #fef2f2;
  color: #991b1b;
}
.rdt-matching-correct-ans {
  color: #059669;
  font-size: .78rem;
  display: block;
  margin-top: 2px;
}
/* Word bank */
.rdt-word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 12px;
  background: #f3f4f6;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.rdt-wb-chip {
  padding: 6px 14px;
  border: 1.5px solid #6366f1;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 700;
  color: #3730a3;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.rdt-wb-chip:hover {
  background: #eef2ff;
}
.rdt-wb-chip.selected {
  background: #6366f1;
  color: #fff;
  border-color: #4f46e5;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
.rdt-wb-chip.placed {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* Question card */
.rdt-q {
  margin-bottom: 24px;
  scroll-margin-top: 12px;
}
.rdt-q-top {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 10px;
}
.rdt-q-badge {
  width: 26px; height: 26px; border-radius: 50%;
  background: #059669; color: #fff;
  font-size: .75rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.rdt-q-text {
  font-size: var(--rdt-qfs, 15px); font-weight: 600; color: #111; line-height: 1.5;
}

/* Options */
.rdt-opts { display: flex; flex-direction: column; gap: 2px; padding-left: 36px; }
.rdt-opt-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer; transition: background .12s, border-color .12s;
  font-size: var(--rdt-qfs, 15px); line-height: 1.5;
}
.rdt-opt-row:hover { background: #f0fdf4; }
.rdt-opt-row.selected { background: #ecfdf5; border-color: #059669; }
.rdt-opt-row.correct  { background: #d1fae5; border-color: #059669; }
.rdt-opt-row.wrong    { background: #fee2e2; border-color: #fca5a5; }

.rdt-radio { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; accent-color: #059669; cursor: pointer; }
.rdt-opt-lbl {
  font-weight: 800; color: #1e293b;
  width: 18px; flex-shrink: 0; text-align: left; margin-top: 2px;
}
.rdt-opt-txt { color: #374151; flex: 1; }

.rdt-explanation {
  margin: 8px 0 0 0; padding: 8px 12px;
  background: #fefce8; border-left: 3px solid #eab308;
  border-radius: 0 6px 6px 0;
  font-size: calc(var(--rdt-qfs, 15px) - 2px); color: #713f12; line-height: 1.5;
}
.rdt-explanation-lbl { font-weight: 700; color: #a16207; }
/* Font tiếng Việt đẹp cho phần giải thích (không kế thừa serif của bài đọc) */
.rdt-explanation, .rdt-ynng-exp, .rdt-ynng-exp-en, .rdt-ynng-exp-vi,
.rdt-ynng-exp-vi-hdr, .rdt-ynng-exp-vi-body, .rdt-ynng-exp-vi-body p,
.rdt-para-box, .rdt-exp-q, .rdt-para-lbl, .rdt-group-instr, .rdt-instr-qline,
.rdt-gap-corr {
  font-family: 'Nunito', 'Be Vietnam Pro', 'Segoe UI', 'Roboto', system-ui, sans-serif;
}
.rdt-exp-q { font-weight: 800; color: #1d4ed8; }
.rdt-para-box { display: block; margin-top: 8px; padding: 7px 11px; background: #eef2ff; border: 1px solid #c7d2fe; border-left: 3px solid #6366f1; border-radius: 6px; color: #3730a3; line-height: 1.55; }
.rdt-para-lbl { font-weight: 800; color: #dc2626; margin-right: 5px; text-transform: uppercase; letter-spacing: .02em; }
.rdt-find-btn {
  margin-left: 10px; padding: 2px 9px;
  background: #fff; border: 1.5px solid #d97706;
  border-radius: 5px; font-size: .75rem; font-weight: 600;
  color: #92400e; cursor: pointer; white-space: nowrap;
  transition: background .12s; vertical-align: middle;
}
.rdt-find-btn:hover { background: #fef3c7; }
.rdt-gpt-explain-btn {
  margin-left: 7px; padding: 2px 9px;
  background: #fff; border: 1.5px solid #6366f1;
  border-radius: 5px; font-size: .75rem; font-weight: 600;
  color: #4338ca; cursor: pointer; white-space: nowrap;
  transition: background .12s; vertical-align: middle;
}
.rdt-gpt-explain-btn:hover { background: #eef2ff; }
.rd-word.rdt-find-hl {
  background: #6ee7b7 !important;
  border-radius: 3px;
  box-shadow: 5px 0 0 #6ee7b7, -5px 0 0 #6ee7b7;
}

/* Import panel */
.rdt-edit-action-row { display: flex; gap: 8px; margin-bottom: 10px; }
.rdt-edit-add-group-btn { flex: 1; }
.rdt-edit-import-btn {
  flex: 1; padding: 9px; background: #f1f5f9; color: #374151;
  border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: .82rem;
  font-weight: 600; cursor: pointer; transition: background .14s;
}
.rdt-edit-import-btn:hover { background: #e2e8f0; }
.rdt-import-box { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.rdt-import-hint { font-size: .75rem; color: #64748b; margin-bottom: 8px; line-height: 1.4; }
.rdt-import-ta {
  width: 100%; box-sizing: border-box; font-size: .78rem; font-family: monospace;
  border: 1.5px solid #cbd5e1; border-radius: 6px; padding: 8px; resize: vertical;
  line-height: 1.5; color: #1e293b; background: #fff;
}
.rdt-save-main-btn { margin-top: 4px; }
.rdt-edit-gpt-btn {
  width: 100%; margin-bottom: 10px; padding: 9px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #fff; border: none; border-radius: 8px;
  font-size: .85rem; font-weight: 700; cursor: pointer; transition: opacity .14s;
}
.rdt-edit-gpt-btn:hover { opacity: .88; }
.rdt-gpt-type-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; font-size: .82rem; color: #374151; }
.rdt-gpt-type-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* Bottom bar */
.rdt-bottom {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border-top: 1.5px solid #e5e7eb;
  flex-shrink: 0;
}

.rdt-nav {
  display: flex; flex-wrap: wrap; gap: 5px;
  flex: 1;
}
.rdt-nav-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1.5px solid #d1d5db;
  background: #fff; color: #374151;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.rdt-nav-btn:hover { background: #f0fdf4; border-color: #6ee7b7; }
.rdt-nav-btn.answered { background: #d1fae5; border-color: #059669; color: #065f46; }

.rdt-finish-btn {
  padding: 8px 22px; border-radius: 20px;
  background: #059669; color: #fff;
  font-size: .85rem; font-weight: 800;
  border: none; cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.rdt-finish-btn:hover { background: #047857; }

/* Notes popup */
.rdt-note-popup {
  position: fixed; z-index: 9100;
  background: #fff; border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  padding: 0; min-width: 260px; max-width: 320px;
}
.rdt-note-popup-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: .8rem; font-weight: 800;
  border-bottom: 1px solid #e5e7eb;
}
.rdt-note-popup-hdr button { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: .9rem; }
.rdt-note-ta {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; border: none; resize: vertical;
  min-height: 90px; font-size: .82rem; outline: none;
  font-family: 'Nunito', sans-serif;
}
.rdt-note-popup-actions { padding: 8px 14px; border-top: 1px solid #f1f5f9; text-align: right; }
.rdt-note-save-btn { padding: 5px 16px; border-radius: 8px; border: none; background: #059669; color: #fff; font-size: .78rem; font-weight: 700; cursor: pointer; }

/* Result overlay */
.rdt-result-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.rdt-result-box {
  background: #fff; border-radius: 18px;
  padding: 32px 36px; min-width: 300px; max-width: 440px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  text-align: center;
}
.rdt-result-title { font-size: 1.2rem; font-weight: 900; color: #111; margin-bottom: 16px; }
.rdt-result-score { margin-bottom: 12px; }
.rdt-result-detail { font-size: .82rem; color: #374151; line-height: 1.6; }
.rdt-result-btn {
  padding: 8px 20px; border-radius: 20px;
  border: 1.5px solid #059669; background: #fff; color: #059669;
  font-size: .82rem; font-weight: 700; cursor: pointer;
}
.rdt-result-btn:hover { background: #d1fae5; }
.rdt-result-btn--close { border-color: #e5e7eb; color: #64748b; }
.rdt-result-btn--close:hover { background: #f1f5f9; }
.rdt-result-btn--retry { border-color: #6366f1; color: #6366f1; }
.rdt-result-btn--retry:hover { background: #eef2ff; }
.rdt-retry-btn { background: #6366f1; color: #fff; border-color: #6366f1; }
.rdt-retry-btn:hover { background: #4f46e5; }

/* Admin edit panel */
.rdt-edit-section { background: #f8fafc; border-radius: 10px; border: 1.5px solid #e2e8f0; padding: 14px 16px; margin-bottom: 16px; }
.rdt-edit-header { font-size: .8rem; font-weight: 800; color: #374151; margin-bottom: 10px; }
.rdt-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rdt-edit-lbl { font-size: .75rem; font-weight: 700; color: #64748b; white-space: nowrap; }
.rdt-edit-input { padding: 5px 9px; border: 1.5px solid #e2e8f0; border-radius: 6px; font-size: .8rem; outline: none; }
.rdt-edit-input:focus { border-color: #059669; }
.rdt-edit-input--wide { flex: 1; min-width: 0; }
.rdt-edit-group { border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.rdt-edit-group-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: .82rem; }
.rdt-edit-qlist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.rdt-edit-q { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; }
.rdt-edit-q-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .78rem; font-weight: 800; }
.rdt-edit-opt-row { align-items: center; }
.rdt-edit-opt-lbl { font-weight: 800; color: #059669; width: 16px; text-align: center; flex-shrink: 0; font-size: .8rem; }
.rdt-edit-del-btn { background: none; border: none; cursor: pointer; color: #dc2626; font-size: .72rem; padding: 2px 6px; border-radius: 4px; }
.rdt-edit-del-btn:hover { background: #fee2e2; }
.rdt-edit-add-q-btn { width: 100%; padding: 7px; border-radius: 8px; border: 1.5px dashed #6ee7b7; background: #f0fdf4; color: #059669; font-size: .78rem; font-weight: 700; cursor: pointer; margin-bottom: 4px; }
.rdt-edit-add-q-btn:hover { background: #d1fae5; }
.rdt-edit-add-group-btn { width: 100%; padding: 9px; border-radius: 8px; border: 1.5px dashed #93c5fd; background: #eff6ff; color: #1d4ed8; font-size: .82rem; font-weight: 700; cursor: pointer; margin-bottom: 10px; }
.rdt-edit-add-group-btn:hover { background: #dbeafe; }
.rdt-edit-save-btn { width: 100%; padding: 10px; border-radius: 10px; border: none; background: #059669; color: #fff; font-size: .88rem; font-weight: 800; cursor: pointer; }
.rdt-edit-save-btn:hover { background: #047857; }

/* Responsive */
@media (max-width: 768px) {
  .rdt-tools { display: none; }
  .rdt-left { padding: 16px; }
  .rdt-right { min-width: 0; max-width: none; }
  .rdt-body { flex-direction: column; }
  .rdt-left, .rdt-right { flex: none; height: 50%; overflow-y: auto; border-right: none; }
  .rdt-left { border-bottom: 1.5px solid #e5e7eb; }
}

/* ══ VOCABULARY SHEET ══════════════════════════════════════════════════════ */
.vs-overlay { z-index: 9200; }
.vs-modal-box {
  width: 99vw; max-width: 1500px; height: 94vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.vs-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1.5px solid var(--border);
  flex-shrink: 0; background: var(--surface);
}
.vs-title { font-size: 1rem; font-weight: 900; color: var(--ink); white-space: nowrap; }
.vs-header-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.vs-search {
  height: 32px; padding: 0 10px; border: 1.5px solid var(--border);
  border-radius: 8px; font-family: 'Nunito', sans-serif; font-size: .8rem;
  background: var(--surface2); color: var(--ink); width: 160px;
}
.vs-btn-pdf {
  height: 32px; width: 32px; border-radius: 8px; border: 1.5px solid #e5e7eb;
  background: #f9fafb; color: #374151; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.vs-btn-pdf:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.vs-btn-html {
  width: auto; padding: 0 11px; gap: 5px;
  font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700;
  white-space: nowrap; line-height: 1;
}
.vs-btn-del-all {
  height: 32px; padding: 0 12px; border-radius: 8px;
  border: none; background: #fee2e2; color: #b91c1c;
  font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.vs-btn-del-all:hover { background: #fecaca; color: #991b1b; }
.vs-btn-add {
  height: 32px; padding: 0 14px; border-radius: 8px;
  border: none; background: #16a34a; color: #fff;
  font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 800; cursor: pointer;
}
.vs-btn-add:hover { background: #15803d; }
.vs-btn-close {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: #ef4444; color: #fff; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vs-btn-close:hover { background: #dc2626; }
.vs-tabs { display: flex; align-items: flex-end; gap: 3px; padding: 6px 12px 0; border-bottom: 2px solid #e2e8f0; background: #f8fafc; overflow-x: auto; flex-shrink: 0; }
.vs-tab { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 7px 7px 0 0; background: #e9eef4; font-size: .78rem; font-weight: 600; color: #64748b; cursor: pointer; border: 1px solid #d1d9e0; border-bottom: none; user-select: none; transition: background .15s; position: relative; bottom: -2px; }
.vs-tab:hover:not(.vs-tab-active) { background: #dde5ef; }
.vs-tab.vs-tab-active { background: #fff; color: #16a34a; border-color: #e2e8f0; border-bottom: 2px solid #fff; z-index: 1; }
.vs-tab-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-tab-name-edit { cursor: text; border-bottom: 1px dashed #86efac; }
.vs-tab-rename-inp { font-size: .78rem; font-weight: 600; color: #16a34a; border: none; border-bottom: 2px solid #16a34a; background: transparent; outline: none; min-width: 40px; max-width: 160px; padding: 0 1px; }
.vs-tab-del { background: none; border: none; color: #94a3b8; font-size: .7rem; cursor: pointer; padding: 0; line-height: 1; margin-left: 2px; }
.vs-tab-del:hover { color: #dc2626; }
.vs-tab-add { background: none; border: 1px dashed #b0bec5; border-radius: 6px 6px 0 0; padding: 4px 10px; font-size: .85rem; font-weight: 700; color: #94a3b8; cursor: pointer; margin-left: 2px; position: relative; bottom: -2px; transition: all .15s; }
.vs-tab-add:hover { background: #f0fdf4; color: #16a34a; border-color: #86efac; }
.vs-table-wrap { flex: 1; overflow: auto; }
.vs-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-family: 'Nunito', sans-serif; font-size: .82rem;
}
.vs-table th {
  position: sticky; top: 0; z-index: 2;
  background: #f8fafc; color: #374151; font-weight: 800; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 7px 14px 7px 6px; border-bottom: 2px solid #e5e7eb;
  white-space: nowrap; text-align: left;
}
.vs-col-resizer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 1;
}
.vs-col-resizer::after {
  content: ''; position: absolute; right: 2px; top: 20%; bottom: 20%;
  width: 2px; border-radius: 2px; background: transparent; transition: background .15s;
}
.vs-col-resizer:hover::after,
.vs-col-resizer:active::after { background: #1f2937; }
.vs-table td {
  padding: 3px 4px; border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: calc(.82rem * var(--vs-fs, 1));
}
.vs-table tr:hover td { background: #f0fdf4; }
.vs-th-date    { width: 106px; }
.vs-th-word    { width: 130px; }
.vs-th-ipa     { width: 180px; }
.vs-ipa-cell   { display: flex; align-items: flex-start; gap: 4px; }
.vs-th-pos     { width: 120px; }
.vs-th-meaning { width: 140px; }
.vs-th-def     { width: 240px; }
.vs-th-ex      { width: 240px; }
.vs-th-act     { width: 36px; }
.vs-th-act     { width: 38px; }

/* ── Inline inputs (spreadsheet style) ── */
.vs-inp {
  width: 100%; box-sizing: border-box;
  padding: 5px 7px; border: 1.5px solid transparent; border-radius: 5px;
  font-family: 'Nunito', sans-serif; font-size: calc(.82rem * var(--vs-fs, 1)); color: var(--ink);
  background: transparent; outline: none; transition: border-color .15s, background .15s;
}
.vs-inp:hover { border-color: #d1d5db; background: #fff; }
.vs-inp:focus { border-color: #16a34a; background: #fff; box-shadow: 0 0 0 3px #dcfce7; }
.vs-inp::placeholder { color: #9ca3af; }
.vs-word-cell { display: flex; align-items: flex-start; gap: 4px; }
.vs-word-inp  { font-weight: 800; color: #16a34a; font-size: calc(.88rem * var(--vs-fs, 1)); }
.vs-word-inp, .vs-meaning-inp, .vs-ipa-inp {
  resize: none; overflow: hidden; min-height: 32px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
.vs-word-inp, .vs-meaning-inp { font-family: 'Nunito', sans-serif; }
.vs-ipa-inp   { color: #6d28d9; font-family: monospace; font-size: calc(.8rem * var(--vs-fs, 1)); }
.vs-th-ipa-inner { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.vs-ipa-toggle {
  display: inline-flex; border: 1.5px solid #e5e7eb; border-radius: 7px; overflow: hidden; flex-shrink: 0;
}
.vs-ipa-tog-btn {
  height: 28px; padding: 0 10px; border: none; background: #f9fafb;
  color: #6b7280; font-family: 'Nunito', sans-serif; font-size: .75rem; font-weight: 800;
  cursor: pointer; transition: background .15s, color .15s;
}
.vs-ipa-tog-btn + .vs-ipa-tog-btn { border-left: 1.5px solid #e5e7eb; }
.vs-ipa-tog-btn.active { background: #ede9fe; color: #6d28d9; }
.vs-ipa-tog-btn:hover:not(.active) { background: #f3f4f6; color: #374151; }
.vs-pos-sel   { cursor: pointer; }
.vs-def-inp {
  resize: none; overflow: hidden; min-height: 32px; line-height: 1.45;
  font-size: calc(.78rem * var(--vs-fs, 1)); color: #1d4ed8;
}
.vs-ex-inp {
  resize: none; overflow: hidden; min-height: 32px; line-height: 1.5;
  font-size: calc(.78rem * var(--vs-fs, 1)); color: #1f2937; font-style: italic;
}
.vs-ex-display {
  padding: 5px 7px; min-height: 32px; cursor: text;
  font-size: calc(.78rem * var(--vs-fs, 1)); line-height: 1.6;
}
.vs-ex-display:hover { background: #f9fafb; border-radius: 5px; }
.vs-ex-line  { font-style: italic; color: #1f2937; }
.vs-ex-word  { color: #ea580c; font-weight: 800; font-style: italic; }
.vs-ex-empty { color: #9ca3af; font-style: normal; }
.vs-lookup-spin { font-size: .75rem; flex-shrink: 0; }
.vs-empty-msg { text-align: center; padding: 36px; color: var(--muted); font-size: .85rem; }

.vs-speak-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none; flex-shrink: 0;
  background: #e0f2fe; color: #0369a1; font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vs-speak-btn:hover { background: #0369a1; color: #fff; }
.vs-del-btn {
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: transparent; color: #d1d5db; font-size: .78rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vs-del-btn:hover { background: #fee2e2; color: #b91c1c; }
/* Vertical border toggle */
.vs-border-toggle {
  height: 32px; padding: 0 11px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--muted); font-family: 'Nunito', sans-serif;
  font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.vs-border-toggle.active {
  border-color: #6d28d9; background: #ede9fe; color: #6d28d9;
}
.vs-border-toggle:hover { border-color: #6d28d9; color: #6d28d9; }

/* Font-size buttons (scale all columns) */
.vs-fontsize-group { display: inline-flex; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; }
.vs-fontsize-btn {
  height: 32px; padding: 0 11px; border: none; background: var(--surface2); color: var(--ink2);
  font-family: 'Nunito', sans-serif; font-weight: 800; cursor: pointer; line-height: 1;
  transition: background .15s, color .15s;
}
.vs-fontsize-btn:first-child { font-size: .8rem; border-right: 1.5px solid var(--border); }
.vs-fontsize-btn:last-child { font-size: 1rem; }
.vs-fontsize-btn:hover { background: #ede9fe; color: #6d28d9; }

/* Column visibility menu */
.vs-colmenu-wrap { position: relative; display: inline-block; }
.vs-colmenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 8px; min-width: 170px;
}
.vs-colmenu-title { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 4px 8px 6px; }
.vs-colmenu label {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
  font-family: 'Nunito', sans-serif; font-size: .84rem; font-weight: 700; color: var(--ink); cursor: pointer;
}
.vs-colmenu label:hover { background: var(--surface2); }
.vs-colmenu input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: #16a34a; }
.vs-colmenu-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 4px 26px; }
.vs-colmenu-sub span { font-family: 'Nunito', sans-serif; font-size: .76rem; font-weight: 600; color: var(--muted); }
.vs-colmenu-sub select {
  font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700;
  padding: 3px 6px; border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer;
}

/* Hide columns when toggled off */
.vs-table.vs-hide-date .vs-th-date,    .vs-table.vs-hide-date .vs-td-date       { display: none; }
.vs-table.vs-hide-ipa .vs-th-ipa,      .vs-table.vs-hide-ipa .vs-td-ipa         { display: none; }
.vs-table.vs-hide-pos .vs-th-pos,      .vs-table.vs-hide-pos .vs-td-pos         { display: none; }
.vs-table.vs-hide-meaning .vs-th-meaning, .vs-table.vs-hide-meaning .vs-td-meaning { display: none; }
.vs-table.vs-hide-def .vs-th-def,      .vs-table.vs-hide-def .vs-td-def         { display: none; }
.vs-table.vs-hide-ex .vs-th-ex,        .vs-table.vs-hide-ex .vs-td-ex           { display: none; }
.vs-table--bordered th,
.vs-table--bordered td { border-right: 1px solid #000; }
.vs-table--bordered th:last-child,
.vs-table--bordered td:last-child { border-right: none; }
.vs-table--hbordered td,
.vs-table--hbordered th { border-bottom: 1px solid #000; }
.vs-table--hbordered thead th { border-bottom: 2px solid #000; }

/* ── Color picker popup ── */
.vs-cpicker {
  display: none; position: fixed; z-index: 9500;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px;
  padding: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.vs-cpicker.active { display: block; }
.vs-cpicker-grid { display: grid; grid-template-columns: repeat(3, 24px); gap: 5px; }
.vs-cpicker-sw {
  width: 24px; height: 24px; border-radius: 5px;
  border: 1.5px solid #d1d5db; cursor: pointer; padding: 0;
  transition: transform .1s, border-color .1s;
}
.vs-cpicker-sw:hover { transform: scale(1.2); border-color: #374151; z-index: 1; position: relative; }
.vs-cpicker-clear {
  background: #fff;
  background-image: linear-gradient(135deg, #fff 45%, #ef4444 45%, #ef4444 55%, #fff 55%);
}
.vs-cpicker-custom {
  background: #f8fafc; font-size: 13px; color: #6d28d9;
  display: flex; align-items: center; justify-content: center;
  border-color: #c4b5fd;
}
/* Row color dot */
.vs-color-dot {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1.5px solid #d1d5db; cursor: pointer; padding: 0;
  display: block; margin-bottom: 3px;
}
.vs-color-dot:hover { border-color: #374151; }
/* Toolbar column fill-color button */
.vs-col-fill-btn {
  height: 32px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid #e5e7eb; border-radius: 7px; background: #f9fafb;
  cursor: pointer; color: #374151; font-size: .78rem;
  transition: background .12s, border-color .12s, color .12s;
}
.vs-col-fill-btn:hover:not(:disabled) { border-color: #a78bfa; background: #faf5ff; color: #6d28d9; }
.vs-col-fill-btn:disabled { opacity: .38; cursor: default; }
.vs-col-fill-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.15); flex-shrink: 0;
}
/* Action cell layout */
.vs-td-act { width: 52px !important; vertical-align: middle; text-align: center; }
/* Alignment button group */
.vs-align-group {
  display: inline-flex; border: 1.5px solid #e5e7eb; border-radius: 7px;
  overflow: hidden; background: #f9fafb;
}
.vs-align-btn {
  height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; color: #374151;
  transition: background .12s, color .12s;
}
.vs-align-btn:hover:not(:disabled) { background: #f1f5f9; color: #111827; }
.vs-align-btn.active { background: #ede9fe; color: #6d28d9; }
.vs-align-btn:disabled { opacity: .38; cursor: default; }
.vs-align-btn + .vs-align-btn { border-left: 1px solid #e5e7eb; }
/* Column selected highlight */
.vs-col-sel { background: #ede9fe !important; color: #6d28d9; }

.vs-footer {
  display: flex; align-items: center; padding: 7px 16px;
  border-top: 1px solid var(--border); flex-shrink: 0; background: var(--surface);
}
@media (max-width: 600px) {
  .vs-modal-box { height: 100vh; border-radius: 0; }
}

/* ── SENTENCE STRUCTURES ── */
.source-card-ss { border-color: #4f46e5; }
.source-card-ss:hover { background: #eef2ff; border-color: #4338ca; }

.ss-overlay {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: #f8fafc; flex-direction: column;
}
.ss-overlay.active { display: flex; }

.ss-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: #fff;
  border-bottom: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); flex-shrink: 0;
}
.ss-back-btn {
  padding: 7px 14px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #fff; font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: .85rem; cursor: pointer; color: #64748b;
  transition: background .14s, color .14s; white-space: nowrap;
}
.ss-back-btn:hover { background: #f1f5f9; color: #1e293b; }
.ss-title {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.1rem;
  color: #1e293b; white-space: nowrap;
}
.ss-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto;
}
.ss-sel {
  padding: 6px 10px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #fff; font-family: 'Nunito', sans-serif; font-size: .82rem;
  cursor: pointer; outline: none; max-width: 160px;
}
.ss-add-btn {
  padding: 7px 14px; border-radius: 8px; border: 1.5px solid #4f46e5;
  background: #eef2ff; font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: .82rem; cursor: pointer; color: #4338ca;
  transition: background .14s, color .14s; white-space: nowrap;
}
.ss-add-btn:hover { background: #c7d2fe; }

.ss-list-item { position: relative; display: flex; align-items: center; }
.ss-list-label { flex: 1; cursor: pointer; }
.ss-list-edit-btn {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px; border: none;
  background: transparent; color: #94a3b8; cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color .13s, background .13s;
}
.ss-list-edit-btn:hover { color: #4f46e5; background: #e0e7ff; }
.ss-list-del-btn {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px; border: none;
  background: transparent; color: #94a3b8; cursor: pointer; font-size: .75rem;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color .13s, background .13s;
}
.ss-list-del-btn:hover { color: #dc2626; background: #fee2e2; }

/* Test button in header */
.ss-test-open-btn {
  padding: 6px 13px; border-radius: 999px; border: 1.5px solid #f59e0b;
  background: #fffbeb; color: #b45309; font-size: .82rem; font-weight: 700;
  font-family: 'Nunito', sans-serif; cursor: pointer; transition: all .14s; white-space: nowrap;
}
.ss-test-open-btn:hover { background: #fef3c7; border-color: #d97706; }
/* Mix Test mode selector */
.ss-mix-mode-row { display: flex; gap: 6px; padding: 10px 16px 0; flex-wrap: wrap; }
.ss-mix-mode-btn { flex: 1; padding: 7px 8px; border-radius: 10px; border: 1.5px solid #e5e7eb; background: #f9fafb; font-size: .75rem; font-weight: 700; color: #6b7280; cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap; }
.ss-mix-mode-btn.active { border-color: #6366f1; background: #eef2ff; color: #4338ca; }
.ss-mix-mode-btn:hover:not(.active) { border-color: #c7d2fe; color: #4338ca; }
/* Fill-blank styles */
.ss-mix-vi-blank { font-size: 1rem; font-weight: 600; line-height: 1.8; }
.ss-mix-blank-slot { display: inline-block; min-width: 90px; height: 2px; background: #6366f1; margin: 0 4px; vertical-align: middle; border-radius: 2px; position: relative; top: -4px; }
.ss-mix-vi-hint { font-size: .82em; color: #64748b; font-style: italic; margin-top: 6px; }
.ss-mix-choice-sm { padding: 8px 12px; }
.ss-mix-type-wrap { display: flex; gap: 8px; align-items: center; }
.ss-mix-type-inp { flex: 1; padding: 10px 14px; border-radius: 12px; border: 2px solid #c7d2fe; font-size: .92rem; font-family: inherit; outline: none; color: #1e293b; transition: border-color .15s; }
.ss-mix-type-inp:focus { border-color: #6366f1; }
.ss-mix-type-check-btn { padding: 10px 16px; border-radius: 12px; border: none; background: #6366f1; color: #fff; font-size: .88rem; font-weight: 800; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ss-mix-type-check-btn:hover { background: #4f46e5; }
/* Mix Test button */
.ss-mix-open-btn { padding: 6px 13px; border-radius: 999px; border: 1.5px solid #6366f1; background: #eef2ff; color: #4338ca; font-size: .82rem; font-weight: 700; font-family: 'Nunito',sans-serif; cursor: pointer; transition: all .14s; white-space: nowrap; }
.ss-mix-open-btn:hover { background: #e0e7ff; border-color: #4338ca; }
/* Mix Test Picker */
.ss-mix-picker-overlay { position: fixed; inset: 0; z-index: 10005; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.ss-mix-picker-box { background: #fff; border-radius: 20px; width: 100%; max-width: 480px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.ss-mix-picker-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: linear-gradient(135deg,#4f46e5,#7c3aed); color: #fff; font-size: .95rem; font-weight: 800; }
.ss-mix-picker-hdr button { background: none; border: none; color: rgba(255,255,255,.8); font-size: 1rem; cursor: pointer; }
.ss-mix-picker-actions { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; flex-wrap: wrap; }
.ss-mix-sel-all { padding: 4px 12px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #374151; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ss-mix-sel-all:hover { border-color: #6366f1; color: #4338ca; }
.ss-mix-cnt-lbl { font-size: .78rem; font-weight: 700; color: #6b7280; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ss-mix-cnt-sel { border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 3px 8px; font-size: .8rem; font-family: inherit; outline: none; }
.ss-mix-list { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.ss-mix-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.ss-mix-item:hover { background: #f5f3ff; }
.ss-mix-item input[type=checkbox] { width: 16px; height: 16px; accent-color: #6366f1; flex-shrink: 0; }
.ss-mix-item-name { font-size: .85rem; font-weight: 700; color: #1e293b; }
.ss-mix-picker-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #f3f4f6; }
.ss-mix-sel-count { font-size: .78rem; color: #6b7280; font-weight: 700; }
.ss-mix-start-btn { padding: 8px 20px; border-radius: 10px; border: none; background: linear-gradient(135deg,#6366f1,#7c3aed); color: #fff; font-size: .88rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.ss-mix-start-btn:hover { opacity: .9; }
/* Mix Test Modal */
.ss-mix-box { max-width: 600px; }
.ss-mix-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; }
.ss-mix-struct-tag { display: inline-block; padding: 3px 12px; background: #eef2ff; color: #4338ca; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; align-self: flex-start; }
.ss-mix-vi { font-size: 1.05rem; font-weight: 800; color: #1e293b; line-height: 1.5; padding: 12px 16px; background: #f8fafc; border-radius: 12px; border-left: 4px solid #6366f1; }
.ss-mix-choices { display: flex; flex-direction: column; gap: 8px; }
.ss-mix-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 2px solid #e2e8f0; background: #f8fafc; font-size: .88rem; font-weight: 600; color: #1e293b; cursor: pointer; text-align: left; transition: all .15s; font-family: inherit; }
.ss-mix-choice:hover:not(:disabled) { border-color: #818cf8; background: #eef2ff; }
.ss-mix-choice.correct { background: #dcfce7; border-color: #22c55e; }
.ss-mix-choice.wrong   { background: #fee2e2; border-color: #f87171; }
.ss-mix-choice:disabled { cursor: default; }
.ss-mix-choice-text { flex: 1; line-height: 1.5; }
.ss-mix-feedback { padding: 10px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.ss-mix-feedback.correct .rz-mc-fb-label { color: #16a34a; }
.ss-mix-feedback.wrong   .rz-mc-fb-label { color: #dc2626; }
.ss-mix-fb-en { font-size: .85rem; color: #374151; margin-top: 5px; line-height: 1.5; }
.ss-mix-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px; border-top: 1px solid #f3f4f6; }
/* Test Modal */
.ss-test-modal {
  position: fixed; inset: 0; z-index: 10001;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  display: flex; align-items: center; justify-content: center;
}
.ss-test-box {
  background: #fff; border-radius: 24px; width: 100%; max-width: 580px;
  box-shadow: 0 24px 80px rgba(0,0,0,.4); display: flex; flex-direction: column;
  max-height: 88vh; overflow: hidden;
}
.ss-test-header {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: #f59e0b; border-radius: 20px 20px 0 0;
}
.ss-test-title { font-weight: 800; font-size: 1rem; color: #fff; flex: 1; }
.ss-test-progress { font-size: .82rem; color: rgba(255,255,255,.85); font-weight: 700; }
.ss-test-close { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: .8; line-height: 1; padding: 2px 6px; }
.ss-test-close:hover { opacity: 1; }
.ss-test-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; overflow-y: auto; }
.ss-test-struct-name { font-size: .78rem; font-weight: 700; color: #94a3b8; letter-spacing: .03em; }
.ss-test-prompt { font-size: .82rem; font-weight: 700; color: #64748b; }
.ss-test-vi {
  font-size: 1.08rem; font-weight: 600; color: #1e293b; font-style: italic;
  background: #f8fafc; border-left: 3px solid #f59e0b; padding: 10px 14px;
  border-radius: 0 8px 8px 0; line-height: 1.6;
}
.ss-test-input {
  width: 100%; padding: 10px 13px; border: 2px solid #e2e8f0; border-radius: 10px;
  font-size: .95rem; font-family: 'Nunito', sans-serif; resize: none; outline: none;
  transition: border-color .15s; box-sizing: border-box; line-height: 1.5;
}
.ss-test-input:focus { border-color: #f59e0b; }
.ss-test-feedback { padding: 10px 14px; border-radius: 10px; background: #f8fafc; }
.ss-test-fb-label { font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.ss-test-correct { color: #16a34a; }
.ss-test-close-match { color: #d97706; }
.ss-test-wrong { color: #dc2626; }
.ss-test-answer { font-size: .95rem; font-style: italic; color: #1e293b; line-height: 1.6; }
.ss-test-footer {
  display: flex; gap: 8px; padding: 14px 18px; border-top: 1.5px solid #f1f5f9;
  justify-content: flex-end;
}
.ss-test-skip-btn {
  padding: 9px 16px; border-radius: 10px; border: 1.5px solid #e2e8f0;
  background: #fff; color: #64748b; font-size: .88rem; font-weight: 600;
  font-family: 'Nunito', sans-serif; cursor: pointer;
}
.ss-test-skip-btn:hover { background: #f8fafc; }
.ss-test-check-btn {
  padding: 9px 20px; border-radius: 10px; border: none;
  background: #f59e0b; color: #fff; font-size: .88rem; font-weight: 800;
  font-family: 'Nunito', sans-serif; cursor: pointer; transition: background .14s;
}
.ss-test-check-btn:hover { background: #d97706; }
.ss-test-next-btn {
  padding: 9px 20px; border-radius: 10px; border: none;
  background: #4f46e5; color: #fff; font-size: .88rem; font-weight: 800;
  font-family: 'Nunito', sans-serif; cursor: pointer; transition: background .14s;
}
.ss-test-next-btn:hover { background: #4338ca; }
.ss-test-score-bar { height: 5px; background: #e2e8f0; width: 100%; flex-shrink: 0; }
.ss-test-score-bar-fill { height: 100%; width: 0; background: #16a34a; transition: width .4s ease, background .4s; border-radius: 0 3px 3px 0; }
.ss-test-picker { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.ss-test-pick-actions { display: flex; gap: 8px; padding: 12px 22px 8px; border-bottom: 1px solid #f1f5f9; }
.ss-test-pick-list { flex: 1; overflow-y: auto; padding: 8px 16px; max-height: 360px; }
.ss-test-pick-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-top: 1px solid #f1f5f9; }
.ss-test-hints { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-test-hint-wrap { display: flex; align-items: center; }
.ss-test-hint-btn {
  background: #f1f5f9; border: 1px dashed #94a3b8; border-radius: 999px;
  padding: 4px 13px; font-size: .78rem; cursor: pointer; color: #475569;
  font-weight: 600; font-family: 'Nunito', sans-serif; transition: background .15s;
}
.ss-test-hint-btn:hover { background: #e2e8f0; }
.ss-test-hint-val {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 5px 12px; font-size: .82rem; color: #1e293b; font-style: italic;
}
.ss-test-vocab-val {
  display: flex; flex-direction: column; gap: 2px; font-style: normal;
}
.ss-test-summary { padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 14px; }
.ss-sum-score-wrap { display: flex; justify-content: center; }
.ss-sum-score-circle { width: 110px; height: 110px; border-radius: 50%; border: 5px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color .4s; }
.ss-sum-pct { font-size: 2rem; font-weight: 900; line-height: 1; transition: color .4s; }
.ss-sum-pct-lbl { font-size: .65rem; color: #94a3b8; font-weight: 700; margin-top: 2px; letter-spacing: .05em; text-transform: uppercase; }
.ss-sum-stats { display: flex; gap: 12px; justify-content: center; }
.ss-sum-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; background: #f8fafc; border-radius: 12px; padding: 14px 8px; }
.ss-sum-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.ss-sum-lbl { font-size: .75rem; font-weight: 600; color: #64748b; }

/* ── ROADMAP ─────────────────────────────────────────────────── */
.rd-overlay { background: #f8fafc; }
.rd-overlay .pv-header { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-bottom: 1.5px solid #86efac; }
.rd-overlay .pv-back-btn { border-color: #86efac; color: #15803d; }
.rd-overlay .pv-back-btn:hover { background: #f0fdf4; border-color: #22c55e; }
.rd-overlay .pv-title { color: #15803d; }
.source-card-rd { border-color: #22c55e; }
.source-card-rd:hover { background: #f0fdf4; border-color: #16a34a; }
.rd-body { flex: 1; overflow-y: auto; padding: 28px 24px; max-width: 840px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.rd-intro { font-size: .95rem; color: #374151; margin-bottom: 22px; font-weight: 600; }
.rd-path-cards { display: flex; gap: 20px; flex-wrap: wrap; }
.rd-path-card { flex: 1; min-width: 260px; padding: 28px 24px; border-radius: 20px; cursor: pointer; border: 2.5px solid; transition: all .18s; display: flex; flex-direction: column; gap: 9px; }
.rd-path-beginner { background: #f0fdf4; border-color: #86efac; }
.rd-path-beginner:hover { background: #dcfce7; border-color: #22c55e; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(34,197,94,.18); }
.rd-path-inter { background: #eff6ff; border-color: #93c5fd; }
.rd-path-inter:hover { background: #dbeafe; border-color: #3b82f6; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(59,130,246,.18); }
.rd-path-icon { font-size: 2.8rem; line-height: 1; }
.rd-path-label { font-size: 1.12rem; font-weight: 800; color: #1e293b; }
.rd-path-sub { font-size: .78rem; font-weight: 700; color: #64748b; letter-spacing: .02em; }
.rd-path-desc { font-size: .86rem; color: #374151; line-height: 1.6; }
.rd-path-duration { font-size: .8rem; color: #6b7280; font-weight: 600; margin-top: 4px; }
.rd-summary-bar { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.rd-sum-chip { padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #f1f5f9; color: #475569; }
.rd-phases { display: flex; flex-direction: column; gap: 14px; }
.rd-phase { border-radius: 16px; border: 2px solid #e2e8f0; background: #fff; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.rd-phase-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #f8fafc; border-bottom: 1.5px solid #e2e8f0; }
.rd-phase-num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; }
.rd-phase-icon { font-size: 1.2rem; line-height: 1; }
.rd-phase-title { font-weight: 700; font-size: .95rem; color: #1e293b; flex: 1; }
.rd-phase-dur { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.rd-phase-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.rd-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rd-goals li { font-size: .86rem; color: #374151; padding-left: 16px; position: relative; line-height: 1.55; }
.rd-goals li::before { content: '•'; position: absolute; left: 3px; color: #94a3b8; }
.rd-features { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.rd-feature-chip { padding: 4px 13px; border-radius: 999px; font-size: .75rem; font-weight: 700; border: 1.5px solid; cursor: pointer; transition: all .13s; background: transparent; }
.rd-feature-chip:hover { opacity: .8; transform: translateY(-1px); }
/* Admin Add Modal */
.ss-add-modal {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ss-add-box {
  background: #fff; border-radius: 18px; width: 100%; max-width: 620px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.22); overflow: hidden;
}
.ss-add-header {
  padding: 16px 20px; border-bottom: 1.5px solid #e2e8f0;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1rem; color: #1e293b;
}
.ss-add-close {
  width: 30px; height: 30px; border-radius: 8px; border: none; background: #f1f5f9;
  cursor: pointer; font-size: .95rem; display: flex; align-items: center; justify-content: center;
  transition: background .13s; padding: 0;
}
.ss-add-close:hover { background: #fee2e2; color: #dc2626; }
.ss-prompt-btn {
  padding: 6px 12px; border-radius: 8px; border: 1.5px solid #10b981;
  background: #ecfdf5; font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: .8rem; cursor: pointer; color: #065f46; white-space: nowrap;
  transition: background .13s;
}
.ss-prompt-btn:hover { background: #d1fae5; }
.ss-add-body {
  flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
}
.ss-add-body::-webkit-scrollbar { width: 4px; }
.ss-add-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.ss-quick-parse-wrap {
  background: #f0fdf4; border: 1.5px dashed #86efac; border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
}
.ss-quick-parse-label { font-size: .78rem; font-weight: 700; color: #15803d; }
.ss-quick-parse-label small { font-weight: 400; color: #6b7280; margin-left: 4px; }
.ss-quick-parse-area {
  width: 100%; min-height: 80px; padding: 8px 10px; border: 1.5px solid #bbf7d0;
  border-radius: 8px; font-size: .78rem; font-family: 'Courier New', monospace;
  resize: vertical; outline: none; background: #fff; box-sizing: border-box;
  transition: border-color .15s; color: #1e293b;
}
.ss-quick-parse-area:focus { border-color: #22c55e; }
.ss-quick-parse-btn {
  align-self: flex-start; padding: 7px 14px; background: #22c55e; color: #fff;
  border: none; border-radius: 8px; font-size: .82rem; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background .14s;
}
.ss-quick-parse-btn:hover { background: #16a34a; }
.ss-row-vi-hint {
  font-size: .72rem; color: #16a34a; font-weight: 600; margin-left: 6px;
}
.ss-add-field { display: flex; flex-direction: column; gap: 5px; }
.ss-add-field label {
  font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 700; color: #475569;
}
.ss-add-req { color: #dc2626; }
.ss-add-inp {
  padding: 9px 12px; border-radius: 9px; border: 1.5px solid #e2e8f0;
  font-family: 'Nunito', sans-serif; font-size: .9rem; outline: none;
  transition: border-color .15s;
}
.ss-add-inp:focus { border-color: #4f46e5; }
.ss-add-ta {
  padding: 9px 12px; border-radius: 9px; border: 1.5px solid #e2e8f0;
  font-family: 'Nunito', sans-serif; font-size: .9rem; outline: none; resize: vertical;
  transition: border-color .15s;
}
.ss-add-ta:focus { border-color: #4f46e5; }
.ss-add-row-block {
  border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; background: #f8fafc;
}
.ss-add-row-hd {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 800; color: #475569;
}
.ss-rm-row-btn {
  width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent;
  cursor: pointer; color: #94a3b8; font-size: .85rem; display: flex; align-items: center;
  justify-content: center; transition: color .13s, background .13s; padding: 0;
}
.ss-rm-row-btn:hover { color: #dc2626; background: #fee2e2; }
.ss-add-row-btn {
  padding: 8px 14px; border-radius: 9px; border: 1.5px dashed #c7d2fe;
  background: transparent; font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: .82rem; cursor: pointer; color: #4f46e5; transition: background .13s;
  align-self: flex-start;
}
.ss-add-row-btn:hover { background: #eef2ff; }
.ss-add-footer {
  padding: 14px 20px; border-top: 1.5px solid #e2e8f0;
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
}
.ss-add-del-btn {
  margin-right: auto; padding: 8px 14px; border-radius: 9px;
  border: 1.5px solid #fca5a5; background: #fff1f2;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .85rem;
  cursor: pointer; color: #dc2626; display: inline-flex; align-items: center; gap: 5px;
  transition: background .13s;
}
.ss-add-del-btn:hover { background: #fee2e2; }
.ss-add-cancel {
  padding: 8px 16px; border-radius: 9px; border: 1.5px solid #e2e8f0;
  background: #fff; font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: .85rem; cursor: pointer; color: #64748b; transition: background .13s;
}
.ss-add-cancel:hover { background: #f1f5f9; }
.ss-add-save {
  padding: 8px 20px; border-radius: 9px; border: none;
  background: #4f46e5; font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: .85rem; cursor: pointer; color: #fff; transition: background .13s;
}
.ss-add-save:hover { background: #4338ca; }

.ss-size-ctrl {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #fff;
}
.ss-sz-btn {
  padding: 3px 7px; border-radius: 6px; border: none; background: #f1f5f9;
  font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 800;
  cursor: pointer; color: #475569; transition: background .14s, color .14s; line-height: 1;
}
.ss-sz-btn:hover { background: #e0e7ff; color: #3730a3; }
.ss-sz-plus { font-size: .9rem; }
.ss-sz-label {
  font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700; color: #64748b;
  min-width: 30px; text-align: center;
}

.ss-ipa-label {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: .85rem; font-weight: 700; color: #475569;
  padding: 6px 12px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #fff;
  user-select: none; transition: all .14s;
}
.ss-ipa-label:hover { border-color: #4f46e5; color: #4338ca; background: #eef2ff; }
.ss-ipa-label input { cursor: pointer; accent-color: #4f46e5; }
.ss-ipa-variant {
  display: flex; gap: 8px; align-items: center;
  font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 700; color: #475569;
  padding: 6px 10px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #fff;
}
.ss-ipa-variant label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.ss-ipa-variant input { cursor: pointer; accent-color: #4f46e5; }

.ss-body {
  flex: 1; display: flex; overflow: hidden; padding: 14px; gap: 12px;
}
.ss-list-col {
  width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overflow-x: hidden;
}
.ss-gpt-panel {
  flex-shrink: 0; border-top: 1.5px solid #e2e8f0; padding: 10px 0 4px;
  display: flex; flex-direction: column; gap: 7px;
}
.ss-gpt-title {
  font-size: .78rem; font-weight: 700; color: #6d28d9; letter-spacing: .02em;
}
.ss-gpt-name {
  padding: 7px 10px; border: 1.5px solid #c7d2fe; border-radius: 8px;
  font-size: .82rem; outline: none; font-family: inherit; transition: border-color .15s;
}
.ss-gpt-name:focus { border-color: #4f46e5; }
.ss-gpt-copy-btn {
  padding: 8px 10px; background: #4f46e5; color: #fff; border: none;
  border-radius: 8px; cursor: pointer; font-size: .8rem; font-weight: 700;
  font-family: inherit; text-align: center; transition: background .14s;
}
.ss-gpt-copy-btn:hover { background: #4338ca; }
.ss-gpt-json {
  padding: 7px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: .75rem; font-family: monospace; resize: vertical; min-height: 70px;
  outline: none; transition: border-color .15s; color: #334155;
}
.ss-gpt-json:focus { border-color: #4f46e5; }
.ss-gpt-save-btn {
  padding: 8px 10px; background: #16a34a; color: #fff; border: none;
  border-radius: 8px; cursor: pointer; font-size: .8rem; font-weight: 700;
  font-family: inherit; transition: background .14s;
}
.ss-gpt-save-btn:hover { background: #15803d; }
.ss-list-head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-family: 'Nunito', sans-serif; font-size: .92rem; font-weight: 800;
  color: #c2410c; margin-bottom: 8px;
}
.ss-list-head .ss-list-count {
  font-size: .78rem; font-weight: 800; color: #9a3412;
  background: #ffedd5; border-radius: 999px; padding: 2px 10px;
}
.ss-list-search {
  padding: 8px 12px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  font-family: 'Nunito', sans-serif; font-size: .85rem; outline: none;
  transition: border-color .15s; flex-shrink: 0;
}
.ss-list-search:focus { border-color: #4f46e5; }
.ss-resizer {
  width: 6px; flex-shrink: 0; cursor: col-resize; border-radius: 3px;
  background: transparent; transition: background .15s; position: relative;
}
.ss-resizer::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 40px; border-radius: 3px; background: #cbd5e1;
}
.ss-resizer:hover::after, .ss-resizer:active::after { background: #4f46e5; }

.ss-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  padding-right: 2px;
}
.ss-list::-webkit-scrollbar,
.ss-detail-col::-webkit-scrollbar { width: 4px; }
.ss-list::-webkit-scrollbar-track,
.ss-detail-col::-webkit-scrollbar-track { background: transparent; }
.ss-list::-webkit-scrollbar-thumb,
.ss-detail-col::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.ss-list::-webkit-scrollbar-thumb:hover,
.ss-detail-col::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.ss-list-item {
  padding: 9px 13px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid transparent;
  font-family: 'Nunito', sans-serif; font-size: .88rem; font-weight: 600; color: #334155;
  transition: all .14s; background: #fff; line-height: 1.35;
}
.ss-list-item:hover { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.ss-list-item.active { background: #eef2ff; border-color: #4f46e5; color: #3730a3; font-weight: 800; }

.ss-detail-col {
  flex: 1; overflow-y: auto; background: #fff; border-radius: 14px;
  border: 1.5px solid #e2e8f0; padding: 22px 24px; min-width: 0;
}
.ss-empty-state {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-family: 'Nunito', sans-serif; font-size: 1rem; font-style: italic;
}
.ss-detail-name-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.ss-detail-name {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.45rem;
  color: #1e293b; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1;
}
.ss-edit-btn {
  flex-shrink: 0; padding: 5px 12px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #64748b; font-size: .78rem; font-weight: 700;
  font-family: 'Nunito', sans-serif; cursor: pointer; transition: all .14s; white-space: nowrap;
}
.ss-edit-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #334155; }
.ss-name-ipa {
  font-size: .85rem; color: #94a3b8; font-weight: 400; font-style: italic;
  font-family: 'Nunito', sans-serif;
}

.ss-card {
  border: 2px solid #fde68a; border-radius: 16px; background: #fffbeb;
  padding: 18px 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px;
}
.ss-card-pattern {
  font-size: 1.05em; font-weight: 800; color: #1d4ed8; line-height: 1.5;
}
.ss-pattern-ipa {
  display: none; font-size: .77rem; color: #94a3b8;
  font-weight: 400; font-style: italic; margin-top: 3px;
}
.ss-ipa-on .ss-pattern-ipa { display: block; }
.ss-card-meaning {
  font-size: .95em; color: #dc2626; font-weight: 600; line-height: 1.5;
}

mark.ss-hl {
  background: none; color: #ea580c; font-weight: 700; padding: 0;
}

.ss-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Conversation action row */
.ss-conv-action-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ss-add-conv-btn { padding: 5px 12px; border-radius: 8px; border: 1.5px dashed #a78bfa; background: none; color: #7c3aed; font-size: .75rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s; }
.ss-add-conv-btn:hover { background: #f5f3ff; border-style: solid; }
.ss-conv-gpt-btn { padding: 5px 12px; border-radius: 8px; border: 1.5px dashed #10b981; background: none; color: #059669; font-size: .75rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s; }
.ss-conv-gpt-btn:hover { background: #f0fdf4; border-style: solid; }
/* Conversation block */
.ss-conv-block { margin: 12px 0 4px; border-radius: 14px; overflow: hidden; border: 1.5px solid #e0e7ff; box-shadow: 0 2px 8px rgba(99,102,241,.06); }
.ss-conv-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; background: linear-gradient(90deg,#eef2ff,#f5f3ff); border-bottom: 1px solid #e0e7ff; }
.ss-conv-label { font-size: .72em; font-weight: 800; color: #6366f1; letter-spacing: .04em; text-transform: uppercase; }
.ss-conv-del-btn { background: none; border: none; color: #c4b5fd; font-size: .8rem; cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; }
.ss-conv-del-btn:hover { color: #ef4444; background: #fee2e2; }
.ss-conv-turns { padding: 10px 14px; background: #fafafe; display: flex; flex-direction: column; gap: 10px; }
.ss-conv-turn { display: flex; gap: 8px; align-items: flex-start; }
.ss-conv-a .ss-conv-speaker { color: #2563eb; font-weight: 800; min-width: 18px; flex-shrink: 0; }
.ss-conv-b .ss-conv-speaker { color: #7c3aed; font-weight: 800; min-width: 18px; flex-shrink: 0; }
.ss-conv-body { display: flex; flex-direction: column; gap: 2px; }
.ss-conv-en-row { display: flex; align-items: center; gap: 5px; }
.ss-conv-speak-btn { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid; background: none; cursor: pointer; font-size: .7em; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .15s; }
.ss-conv-speak-a { border-color: #bfdbfe; color: #2563eb; }
.ss-conv-speak-a:hover { background: #eff6ff; }
.ss-conv-speak-b { border-color: #e9d5ff; color: #7c3aed; }
.ss-conv-speak-b:hover { background: #f5f3ff; }
.ss-conv-en { font-size: .88em; color: #1e293b; }
.ss-conv-vi { font-size: .78em; color: #64748b; font-style: italic; display: none; }
.ss-conv-vi.ss-vi-visible { display: block; }
/* Conversation form */
.ss-conv-form { margin: 10px 0; padding: 12px 14px; background: #f8fafc; border-radius: 12px; border: 1.5px solid #e0e7ff; }
.ss-conv-form-label { font-size: .75rem; color: #6366f1; font-weight: 700; margin-bottom: 6px; }
.ss-conv-form-ta { width: 100%; box-sizing: border-box; border: 1.5px solid #c7d2fe; border-radius: 8px; padding: 8px 10px; font-size: .82rem; font-family: inherit; resize: vertical; color: #1e293b; outline: none; }
.ss-conv-form-ta:focus { border-color: #818cf8; }
.ss-conv-form-btns { display: flex; gap: 8px; margin-top: 8px; }
.ss-conv-save-btn { padding: 6px 16px; border-radius: 8px; border: none; background: #6366f1; color: #fff; font-size: .8rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ss-conv-save-btn:hover { background: #4f46e5; }
.ss-conv-cancel-btn { padding: 6px 12px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: none; color: #64748b; font-size: .8rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ss-example-item { display: flex; align-items: flex-start; gap: 7px; }
.ss-speak-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid #c7d2fe; background: #eef2ff; cursor: pointer;
  font-size: .78rem; display: flex; align-items: center; justify-content: center;
  transition: all .14s; margin-top: 2px; padding: 0;
}
.ss-speak-btn:hover { background: #c7d2fe; border-color: #818cf8; }
.ss-example-body { flex: 1; }
.ss-example-text { color: #1e293b; font-weight: 400; line-height: 1.6; display: block; font-style: italic; }
mark.ss-hl { font-weight: 800; }
.ss-example-vi { display: none; color: #64748b; font-size: .85em; font-style: italic; font-weight: 400; line-height: 1.5; margin-top: 2px; }
.ss-example-vi.ss-vi-visible { display: block; }

.ss-word-ipa-line {
  display: inline-flex; flex-wrap: wrap; align-items: flex-end;
  gap: 0 5px; line-height: 1;
}
.ss-wipa-item {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
}
.ss-wipa-word { font-style: italic; line-height: 1.4; }
.ss-wipa-ipa {
  font-family: 'Nunito', sans-serif; font-size: .72em;
  color: #64748b; font-weight: 400; font-style: italic; line-height: 1.2;
  white-space: nowrap; min-height: 1.2em; display: block;
}
.ss-wipa-sl { opacity: .5; }
.ss-wipa-sl .ss-wipa-word { min-width: 0; width: 2px; overflow: hidden; }

.ss-mob-list-btn { display: none; }
.ss-mob-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 10000; }
@media (max-width: 700px) {
  .ss-add-btn, .ss-gpt-hdr-btn { display: none !important; }
  .ss-mob-list-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 13px; border-radius: 8px; border: 1.5px solid #c7d2fe;
    background: #eef2ff; color: #4338ca; font-family: 'Nunito',sans-serif;
    font-size: .82rem; font-weight: 800; cursor: pointer; white-space: nowrap;
  }
  .ss-body { padding: 10px; gap: 0; }
  .ss-resizer { display: none; }
  .ss-list-col {
    position: fixed; left: 0; right: 0; bottom: 0;
    width: 100% !important; max-height: 72vh;
    background: #fff; z-index: 10001;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 32px rgba(0,0,0,.16);
    display: none; flex-direction: column;
    padding: 16px 14px 24px;
    overflow: hidden;
  }
  .ss-list-col::before {
    content: ''; display: block; width: 40px; height: 4px;
    background: #cbd5e1; border-radius: 999px; margin: 0 auto 12px; flex-shrink: 0;
  }
  .ss-list-col.open { display: flex; }
  .ss-mob-backdrop.active { display: block; }
  .ss-list { flex-direction: column; overflow-y: auto; }
  .ss-list-item { white-space: normal; }
}
/* ════════════════════════════════════════════════════════
   PRONUNCIATION DOCUMENT (PA)
   ════════════════════════════════════════════════════════ */
.source-card-pa { border-color: #f97316; }
.source-card-pa:hover { background: #fff7ed; border-color: #ea580c; }

.pa-overlay .pv-header { background: linear-gradient(135deg,#c2410c 0%,#ea580c 60%,#f97316 100%); border-bottom-color: #ea580c; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pa-overlay .pv-back-btn { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.12); }
.pa-overlay .pv-back-btn:hover { background: rgba(255,255,255,.25); }
.pa-overlay .pv-title { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.2); }

.pa-toolbar { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pa-font-sel {
  font-size: .72rem; padding: 2px 5px; border: 1px solid rgba(255,255,255,.4); border-radius: 7px;
  background: rgba(255,255,255,.18); color: #fff; cursor: pointer; max-width: 140px;
}
.pa-font-sel option { color: #374151; background: #fff; }
.pa-size-btn {
  height: 28px; padding: 0 9px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 7px;
  background: rgba(255,255,255,.15); font-size: .78rem; font-weight: 700; cursor: pointer; color: #fff;
  transition: all .12s;
}
.pa-size-btn:hover { background: rgba(255,255,255,.3); }
.pa-size-val { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.9); min-width: 22px; text-align: center; }
.pa-print-btn {
  height: 28px; padding: 0 9px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 7px;
  background: rgba(255,255,255,.15); font-size: .9rem; cursor: pointer; color: #fff; transition: all .12s;
}
.pa-print-btn:hover { background: rgba(255,255,255,.3); }

.pa-body { flex: 1; overflow-y: auto; padding: 20px 20px; background: #fafaf8; }
.pa-doc { display: flex; gap: 0; min-height: 100%; }
.pa-col { display: flex; flex-direction: column; }
.pa-col-left {
  width: 28%; min-width: 190px; padding-right: 0;
  background: #fff; border-right: 1.5px solid #e8e3dc;
  padding: 16px 14px 16px 16px;
}
.pa-col-right { flex: 1; padding: 16px 20px; }

.pa-col-header {
  font-weight: 800; font-size: .8rem; color: #c2410c;
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 2px solid #fed7aa; padding-bottom: 8px; margin-bottom: 12px;
}

.pa-empty { color: #9ca3af; font-size: .83rem; font-style: italic; padding: 8px 4px; }

.pa-list { flex: 1; }
.pa-list-item {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 0; border-bottom: none;
}
.pa-list-num { font-weight: 700; color: #f97316; font-size: .85em; flex-shrink: 0; }
.pa-list-text {
  flex: 1; cursor: pointer; line-height: 1.5; font-size: .88rem;
  color: #374151; border-radius: 5px; padding: 2px 4px;
  transition: color .12s;
}
.pa-list-text:hover { color: #c2410c; }

.pa-item-del {
  background: none; border: none; cursor: pointer; color: #d1d5db;
  font-size: .72rem; padding: 0 3px; flex-shrink: 0; line-height: 1;
  transition: color .1s; margin-left: auto; opacity: 0;
}
.pa-list-item:hover .pa-item-del,
.pa-section-hdr:hover .pa-item-del,
.pa-word-item:hover .pa-item-del,
.pa-ipa-label:hover .pa-item-del { opacity: 1; }
.pa-item-del:hover { color: #ef4444; opacity: 1; }

.pa-col-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 2px solid #1f2937;
}
.pa-col-header-row .pa-col-header { border: none; padding: 0; margin: 0; }
.pa-clear-words-btn {
  font-size: .72rem; padding: 3px 10px; border-radius: 20px;
  border: 1.5px solid #fca5a5; background: #fff; color: #ef4444;
  cursor: pointer; transition: all .12s; font-weight: 700;
}
.pa-clear-words-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.pa-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 6px 20px; background: #fff; border-bottom: 1.5px solid #e8e3dc;
  font-size: .8rem; min-height: 34px;
}
.pa-bc-item { padding: 2px 6px; border-radius: 5px; }
.pa-bc-link { color: #ea580c; cursor: pointer; font-weight: 600; }
.pa-bc-link:hover { background: #ffedd5; text-decoration: underline; }
.pa-bc-current { color: #1f2937; font-weight: 700; }
.pa-bc-sep { color: #d1d5db; padding: 0 2px; }

.pa-nav-arr {
  color: #f97316; cursor: pointer; font-size: .9rem; padding: 0 4px;
  flex-shrink: 0; transition: color .1s;
}
.pa-nav-arr:hover { color: #ea580c; }
.pa-child-badge {
  display: inline-block; background: #ffedd5; color: #c2410c;
  font-size: .68rem; font-weight: 800; padding: 1px 6px;
  border-radius: 20px; margin-left: 4px; vertical-align: middle;
}
.pa-item-edit {
  background: none; border: none; cursor: pointer; color: #d1d5db;
  font-size: .72rem; padding: 0 3px; flex-shrink: 0; transition: color .1s;
  opacity: 0;
}
.pa-list-item:hover .pa-item-edit,
.pa-section-hdr:hover .pa-item-edit { opacity: 1; }
.pa-item-edit:hover { color: #f97316; opacity: 1; }

.pa-list-selected {
  background: linear-gradient(90deg,#ffedd5,#fff7ed);
  border-radius: 8px;
  border-left: 3px solid #f97316;
}
.pa-list-selected .pa-list-text { color: #c2410c; font-weight: 700; }

.pa-tree-item { padding: 3px 4px 3px 0 !important; border-radius: 8px; transition: background .1s; }
.pa-tree-item:hover:not(.pa-list-selected) { background: #faf5f0; }
.pa-tree-indent { display: inline-block; flex-shrink: 0; }
.pa-tree-toggle {
  flex-shrink: 0; cursor: pointer; color: #d1d5db;
  font-size: .58rem; padding: 0 5px; transition: transform .18s, color .12s;
  display: inline-flex; align-items: center; user-select: none;
}
.pa-tree-toggle:hover { color: #f97316; }
.pa-tree-toggle.open { transform: rotate(90deg); color: #f97316; }
.pa-tree-leaf {
  flex-shrink: 0; font-size: .5rem; color: #e5e7eb; padding: 0 5px;
  display: inline-flex; align-items: center;
}

.pa-rsub-label {
  font-size: .75rem; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 0 4px; border-bottom: 1px solid #e5e7eb; margin-bottom: 6px;
}
.pa-rsub-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: .88rem; color: #374151; transition: background .1s;
}
.pa-rsub-item:hover { background: #fff7ed; color: #c2410c; }

/* IPA label — phoneme group header (red accent bar) */
.pa-ipa-label {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 8px; padding: 7px 12px;
  font-weight: 800; color: #dc2626; font-size: 1em;
  background: linear-gradient(90deg,#fef2f2,#fff5f5);
  border-left: 4px solid #dc2626; border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 4px rgba(220,38,38,.08);
}
.pa-ipa-label .pa-item-del { margin-left: auto; }

/* Section headings */
.pa-section-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 9px; margin-top: 20px; margin-bottom: 2px;
  font-weight: 800; color: #c2410c; font-size: 1em;
  border-radius: 10px;
  cursor: default; transition: background .12s;
}
.pa-section-hdr:first-child { margin-top: 4px; }
/* Depth 0: strong banner */
.pa-section-hdr--d0 {
  font-size: 1.05em; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(90deg,#c2410c,#ea580c);
  color: #fff; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(194,65,12,.2);
}
.pa-section-hdr--d0 .pa-item-edit { color: rgba(255,255,255,.6); }
.pa-section-hdr--d0 .pa-item-edit:hover { color: #fff; }
.pa-section-hdr--d0 .pa-item-del { color: rgba(255,255,255,.5); }
.pa-section-hdr--d0 .pa-item-del:hover { color: #fecaca; }
/* Depth 1: amber accent */
.pa-section-hdr--d1 {
  font-size: .97em; color: #92400e;
  background: linear-gradient(90deg,#fff7ed,#fffbeb);
  border-left: 4px solid #f97316;
  box-shadow: 0 1px 4px rgba(249,115,22,.1);
}
/* Depth 2: subtle dashed */
.pa-section-hdr--d2 {
  font-size: .9em; color: #374151; font-weight: 700;
  background: #f9fafb; border-left: 3px solid #d1d5db;
  border-radius: 6px;
}
/* Depth 3: bold green accent */
.pa-section-hdr--d3 {
  font-size: .88em; font-weight: 800; color: #15803d;
  background: linear-gradient(90deg,#f0fdf4,#f7fffe);
  border-left: 3px solid #22c55e; border-radius: 7px;
  letter-spacing: .01em;
}
.pa-section-hdr .pa-item-edit { margin-left: auto; flex-shrink: 0; }
.pa-section-hdr .pa-item-del { flex-shrink: 0; }

/* Indent container for child sections/words */
.pa-node-children { padding-left: 12px; }

/* Word group — card wrapping vocabulary items */
.pa-word-group {
  border: 1.5px solid #e8e3dc; border-radius: 12px;
  background: #fff; margin: 8px 0 16px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.pa-word-group .pa-word-item {
  padding: 9px 14px; border-bottom: 1px solid #f3f0eb;
}
.pa-word-group .pa-word-item:last-child { border-bottom: none; }

.pa-add-btn {
  margin-top: 14px; padding: 7px 16px; border-radius: 20px;
  border: 1.5px dashed #fdba74; background: transparent; color: #f97316;
  font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s;
  width: 100%;
}
.pa-add-btn:hover { background: #fff7ed; border-style: solid; }

.pa-words { flex: 1; }
.pa-word-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 4px; border-bottom: 1px solid #f3f0eb;
  border-radius: 6px; transition: background .1s;
}
.pa-word-item:hover { background: #fafaf8; }
.pa-word-text {
  font-weight: 800; color: #c2410c; flex-shrink: 0; font-size: 1.02em;
  letter-spacing: .01em;
}
.pa-word-phones { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.pa-speak-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: 20px; border: 1.5px solid;
  font-size: .68rem; font-weight: 800; cursor: pointer;
  background: none; line-height: 1.6; transition: all .15s;
  letter-spacing: .02em;
}
.pa-speak-us { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; }
.pa-speak-us:hover { background: #dbeafe; border-color: #3b82f6; transform: scale(1.04); }
.pa-speak-uk { border-color: #c4b5fd; color: #5b21b6; background: #f5f3ff; }
.pa-speak-uk:hover { background: #ede9fe; border-color: #7c3aed; transform: scale(1.04); }
.pa-acc-lbl { font-size: .62rem; font-weight: 900; letter-spacing: .04em; }
.pa-word-ipa {
  color: #6d28d9; font-size: .82em; font-style: italic;
  background: #f5f3ff; padding: 1px 6px; border-radius: 6px;
}
.pa-word-def { color: #4b5563; font-size: .87em; flex: 1; line-height: 1.5; }

.pa-word-input-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.pa-word-input {
  flex: 1; min-width: 140px; height: 36px; padding: 0 13px; border: 1.5px solid #e5e7eb;
  border-radius: 20px; font-size: .88rem; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s; background: #fff;
}
.pa-word-input:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.1); }
.pa-add-word-btn {
  height: 36px; padding: 0 18px; border-radius: 20px;
  border: 1.5px solid #f97316; background: linear-gradient(135deg,#f97316,#ea580c); color: #fff;
  font-size: .83rem; font-weight: 800; cursor: pointer; white-space: nowrap;
  transition: all .15s; box-shadow: 0 2px 6px rgba(249,115,22,.25);
}
.pa-add-word-btn:hover { background: linear-gradient(135deg,#ea580c,#c2410c); transform: translateY(-1px); }

.pa-bulk-toggle-btn {
  height: 36px; padding: 0 14px; border-radius: 20px;
  border: 1.5px solid #a5b4fc; background: #fff; color: #4f46e5;
  font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.pa-bulk-toggle-btn:hover { background: #eef2ff; border-color: #6366f1; }

.pa-bulk-edit-btn {
  height: 36px; padding: 0 14px; border-radius: 20px;
  border: 1.5px solid #6ee7b7; background: #fff; color: #065f46;
  font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.pa-bulk-edit-btn:hover { background: #ecfdf5; border-color: #059669; }
.pa-bulk-area {
  margin-top: 14px; padding: 14px; border: 1.5px dashed #c4b5fd;
  border-radius: 12px; background: #faf5ff;
}
.pa-bulk-hint { font-size: .8rem; color: #6b7280; margin-bottom: 10px; line-height: 1.6; }
.pa-bulk-hint code {
  background: #ede9fe; color: #5b21b6; padding: 1px 6px;
  border-radius: 5px; font-size: .85em;
}
.pa-bulk-input {
  width: 100%; box-sizing: border-box; padding: 10px 13px;
  border: 1.5px solid #ddd6fe; border-radius: 10px; font-size: .85rem;
  font-family: 'Courier New', monospace; resize: vertical;
  outline: none; transition: border-color .15s, box-shadow .15s; line-height: 1.65;
}
.pa-bulk-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.pa-bulk-actions { display: flex; gap: 8px; margin-top: 10px; }
.pa-bulk-import-btn {
  padding: 7px 22px; border-radius: 20px;
  border: 1.5px solid #6366f1; background: #6366f1; color: #fff;
  font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .12s;
}
.pa-bulk-import-btn:hover { background: #4f46e5; border-color: #4f46e5; }
.pa-bulk-cancel-btn {
  padding: 7px 18px; border-radius: 20px;
  border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280;
  font-size: .85rem; cursor: pointer; transition: all .12s;
}
.pa-bulk-cancel-btn:hover { border-color: #9ca3af; color: #374151; }

/* Word item — column layout to hold main row + rec panel */
.pa-word-item { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 0; border-bottom: 1px solid #f3f0eb; }
.pa-word-main {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 4px; border-radius: 6px; transition: background .1s;
}
.pa-word-main:hover { background: #fafaf8; }
.pa-word-group .pa-word-item { border-bottom: 1px solid #f3f0eb; }
.pa-word-group .pa-word-item:last-child { border-bottom: none; }
.pa-word-group .pa-word-main { padding: 9px 14px; }

/* Mic / record button */
.pa-rec-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid #e5e7eb; background: #fff;
  font-size: .95rem; cursor: pointer; flex-shrink: 0;
  transition: all .18s; color: #6b7280;
  margin-left: 2px;
}
.pa-rec-btn:hover { border-color: #f97316; color: #f97316; background: #fff7ed; transform: scale(1.1); }
.pa-rec-btn--active {
  border-color: #dc2626 !important; color: #dc2626 !important;
  background: #fff1f2 !important;
  animation: pa-rec-pulse 1s ease-in-out infinite;
}
@keyframes pa-rec-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* Recording panel */
.pa-rec-panel {
  margin: 0 4px 8px;
  border-radius: 10px;
  overflow: hidden;
  font-size: .84rem;
}
.pa-word-group .pa-rec-panel { margin: 0 14px 10px; }

.pa-rec-listening {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #fff7ed; border-radius: 10px;
  color: #c2410c; font-weight: 600; border: 1.5px solid #fdba74;
}
.pa-rec-pulse {
  width: 10px; height: 10px; border-radius: 50%; background: #dc2626; flex-shrink: 0;
  animation: pa-rec-pulse-dot .7s ease-in-out infinite;
}
@keyframes pa-rec-pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

.pa-rec-error { padding: 10px 14px; background: #fff1f2; border-radius: 10px; color: #dc2626; border: 1.5px solid #fca5a5; }

/* Result card */
.pa-rec-result {
  border-radius: 10px; overflow: hidden;
  border: 1.5px solid;
}
.pa-rec-result--ok  { border-color: #86efac; background: #f0fdf4; }
.pa-rec-result--miss { border-color: #fca5a5; background: #fff9f9; }

.pa-rec-result-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-weight: 700; font-size: .9rem;
}
.pa-rec-result--ok  .pa-rec-result-head { background: #dcfce7; color: #15803d; }
.pa-rec-result--miss .pa-rec-result-head { background: #fee2e2; color: #b91c1c; }

.pa-rec-tick  { font-size: 1.1rem; }
.pa-rec-cross { font-size: 1.1rem; }

/* Diff row: target vs heard */
.pa-rec-diff-row {
  display: flex; gap: 0; border-bottom: 1px solid #fca5a5;
}
.pa-rec-diff-col {
  flex: 1; padding: 8px 14px;
}
.pa-rec-diff-col:first-child { border-right: 1px solid #fca5a5; }
.pa-rec-diff-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin-bottom: 2px; }
.pa-rec-diff-word { font-weight: 800; color: #c2410c; font-size: .95rem; }
.pa-rec-diff-ipa { color: #6d28d9; font-size: .8em; font-style: italic; font-weight: 400; }
.pa-rec-diff-heard { font-weight: 700; color: #374151; font-size: .95rem; }

/* Letter diff highlight */
.pa-rec-diff-detail {
  padding: 8px 14px; font-size: .83rem; color: #374151;
  border-bottom: 1px solid #fca5a5; line-height: 1.7;
}
.pa-rec-diff-ok   { color: #15803d; font-weight: 700; }
.pa-rec-diff-wrong { color: #dc2626; font-weight: 800; background: #fee2e2; padding: 0 3px; border-radius: 4px; }
.pa-rec-diff-got  { color: #b45309; font-weight: 700; background: #fef3c7; padding: 0 3px; border-radius: 4px; }
.pa-rec-cluster-hint { margin-top: 4px; color: #6b7280; font-size: .8rem; line-height: 1.5; }

/* Phoneme tips */
.pa-rec-tips-wrap { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.pa-rec-result--ok .pa-rec-tips-wrap { border-color: #86efac; }
.pa-rec-result--miss .pa-rec-tips-wrap { border-color: #fca5a5; }
.pa-rec-tips-title { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: 6px; }
.pa-rec-tips { margin: 0; padding-left: 18px; color: #374151; line-height: 1.7; font-size: .82rem; }
.pa-rec-tips li { margin-bottom: 3px; }
.pa-rec-tips strong { color: #1f2937; }
.pa-rec-tips em { font-style: italic; color: #6d28d9; }

/* Stress mark */
.pa-rec-stress-hint { padding: 7px 14px; font-size: .82rem; color: #92400e; background: #fef3c7; border-bottom: 1px solid #fcd34d; }
.pa-rec-stress-mark { color: #dc2626; font-weight: 900; }

/* What was heard */
.pa-rec-heard { padding: 7px 14px; font-size: .82rem; color: #6b7280; border-top: 1px solid #bbf7d0; }
.pa-rec-heard em { color: #374151; font-style: italic; }

/* Action buttons */
.pa-rec-actions { display: flex; gap: 8px; padding: 10px 14px; }
.pa-rec-retry {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 20px; font-size: .8rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid #f97316; background: #fff; color: #ea580c;
  transition: all .15s;
}
.pa-rec-retry:hover { background: #fff7ed; }
.pa-rec-listen {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 20px; font-size: .8rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid #a5b4fc; background: #fff; color: #4f46e5;
  transition: all .15s;
}
.pa-rec-listen:hover { background: #eef2ff; }

/* What was heard — border-top only in ok context */
.pa-rec-result--ok .pa-rec-heard { border-top: 1px solid #bbf7d0; }
.pa-rec-result--miss .pa-rec-heard { display: none; }

/* Retry button inside ok card (no pa-rec-actions wrapper) */
.pa-rec-result--ok > .pa-rec-retry {
  display: inline-flex; margin: 0 14px 10px;
  border-color: #86efac; color: #15803d;
}
.pa-rec-result--ok > .pa-rec-retry:hover { background: #dcfce7; }

/* ── VOCAB BY LEVEL ── */
.source-card-vl { border-color: #0891b2; }
.source-card-vl:hover { background: #ecfeff; border-color: #0e7490; }

.vl-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  flex-direction: column; background: #f8fafc;
}
.vl-overlay.active { display: flex; }

/* VL Leaderboard sidebar */
.vl-lb-toggle-btn {
  height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1.5px solid #fde68a; background: rgba(255,255,255,.7);
  color: #92400e; font-size: .85rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: all .13s; order: 3;
}
.vl-lb-toggle-btn:hover, .vl-lb-toggle-btn.active { background: #fef3c7; border-color: #f59e0b; }
/* ── VL Leaderboard sidebar ────────────────────────────────────── */
.vl-lb-card {
  position: fixed; top: 54px; right: 0; bottom: 0; width: 280px;
  background: #fafbfc; border-left: 1px solid #e8ecf0;
  display: flex; flex-direction: column; z-index: 10000;
}
#vlOverlay #vlBody { padding-right: 280px; }

/* Header */
.vl-lb-hdr {
  padding: 14px 16px 10px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border-bottom: 1px solid #eef0f3;
}
.vl-lb-title {
  font-size: .82rem; font-weight: 800; color: #1e293b;
  display: flex; align-items: center; gap: 6px;
}
.vl-lb-periods {
  display: flex; gap: 0; background: #f1f4f8; border-radius: 8px;
  padding: 3px;
}
.vl-lb-period-btn {
  flex: 1; padding: 4px 0; border-radius: 6px; border: none;
  background: transparent; color: #64748b;
  font-size: .68rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.vl-lb-period-btn.active {
  background: #fff; color: #0f172a;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Body */
.vl-lb-body { overflow-y: auto; flex: 1; padding: 8px 0 16px; }

/* Loading / empty */
.vl-lb-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 16px; color: #94a3b8; gap: 8px;
}
.vl-lb-loading::before { content: ''; width: 24px; height: 24px; border: 3px solid #e2e8f0; border-top-color: #f59e0b; border-radius: 50%; animation: vlLbSpin .7s linear infinite; }
@keyframes vlLbSpin { to { transform: rotate(360deg); } }
.vl-lb-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 16px; color: #94a3b8; font-size: .76rem; text-align: center; line-height: 1.7; gap: 8px;
}
.vl-lb-empty::before { content: '🏅'; font-size: 2rem; }

/* Avatar */
.vl-lb-av { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vl-lb-av-default {
  border-radius: 50%; color: #fff; font-weight: 800; font-size: .75rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Podium top 3 */
.vl-lb-podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 6px; padding: 16px 12px 0; margin-bottom: 4px;
}
.vl-lb-pod { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; cursor: default; }
.vl-lb-pod-medal { font-size: .95rem; }
.vl-lb-pod-name {
  font-size: .62rem; font-weight: 700; color: #334155;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; text-align: center;
}
.vl-lb-pod-score { font-size: .6rem; font-weight: 600; color: #f59e0b; }
.vl-lb-pod-base { width: 100%; border-radius: 6px 6px 0 0; margin-top: 4px; }
.vl-lb-pod-1 .vl-lb-pod-base { background: linear-gradient(180deg,#fde68a,#f59e0b); min-height: 52px; }
.vl-lb-pod-2 .vl-lb-pod-base { background: linear-gradient(180deg,#e2e8f0,#94a3b8); min-height: 36px; }
.vl-lb-pod-3 .vl-lb-pod-base { background: linear-gradient(180deg,#fed7aa,#fb923c); min-height: 24px; }
.vl-lb-pod.vl-lb-me .vl-lb-av,
.vl-lb-pod.vl-lb-me .vl-lb-av-default { outline: 2px solid #6366f1; outline-offset: 1px; }

/* List hạng 4+ */
.vl-lb-list {
  padding: 4px 10px 0; display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid #eef0f3; margin-top: 4px; padding-top: 8px;
}
.vl-lb-row2 {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 10px; transition: background .12s; cursor: default;
}
.vl-lb-row2:hover { background: #f1f4f8; }
.vl-lb-row2.vl-lb-me { background: #eff6ff; }
.vl-lb-rank2 {
  width: 20px; text-align: center; font-size: .64rem; font-weight: 800;
  color: #94a3b8; flex-shrink: 0;
}
.vl-lb-info2 { flex: 1; min-width: 0; }
.vl-lb-name2 {
  font-size: .74rem; font-weight: 600; color: #1e293b;
  word-break: break-word; display: block; line-height: 1.3;
}
.vl-lb-score2 { font-size: .66rem; font-weight: 700; color: #f59e0b; white-space: nowrap; flex-shrink: 0; }
.vl-lb-you {
  font-size: .56rem; background: #e0e7ff; color: #3730a3;
  padding: 1px 4px; border-radius: 4px; font-weight: 700; vertical-align: middle; margin-left: 2px;
}
.vl-lb-toggle-btn { display: none; }
.vl-lb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9999; }

/* ── VL Leaderboard dark mode ── */
.vl-overlay.vl-dark .vl-lb-card { background: #0f172a; border-color: #1e293b; }
.vl-overlay.vl-dark .vl-lb-hdr { background: #0f172a; border-color: #1e293b; }
.vl-overlay.vl-dark .vl-lb-title { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-lb-periods { background: #1e293b; }
.vl-overlay.vl-dark .vl-lb-period-btn { color: #94a3b8; }
.vl-overlay.vl-dark .vl-lb-period-btn.active { background: #334155; color: #f1f5f9; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.vl-overlay.vl-dark .vl-lb-body { background: #0f172a; }
.vl-overlay.vl-dark .vl-lb-empty { color: #64748b; }
.vl-overlay.vl-dark .vl-lb-pod-name { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-lb-row2 { background: #1e293b; }
.vl-overlay.vl-dark .vl-lb-row2:hover { background: #263346; }
.vl-overlay.vl-dark .vl-lb-row2.vl-lb-me { background: #1e1b4b; }
.vl-overlay.vl-dark .vl-lb-name2 { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-lb-rank2 { color: #64748b; }
.vl-overlay.vl-dark .vl-lb-toggle-btn { background: #1e293b; border-color: #334155; color: #f1f5f9; }

/* ══════════ VBL redesign: hero + set cards + leaderboard rows ══════════ */
/* Hero streak banner */
.vl-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg,#0d9488,#14b8a6 55%,#2dd4bf);
  border-radius: 20px; padding: 18px 22px; margin: 6px 0 20px;
  color: #fff; box-shadow: 0 8px 28px rgba(13,148,136,.28);
}
.vl-hero-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 230px; }
.vl-hero-flame { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.vl-hero-streak-num { font-size: 1.5rem; font-weight: 900; font-family: 'Noto Sans','Segoe UI',sans-serif; line-height: 1.1; }
.vl-hero-sub { font-size: .85rem; opacity: .96; margin-top: 3px; }
.vl-hero-sub b { font-weight: 800; }
.vl-hero-days { display: flex; gap: 7px; }
.vl-hero-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vl-hero-day-dot {
  width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; background: rgba(255,255,255,.2); color: #fff;
}
.vl-hero-day.done .vl-hero-day-dot { background: #fff; color: #0d9488; }
.vl-hero-day.today .vl-hero-day-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.95); background: rgba(255,255,255,.32); }
.vl-hero-day.future .vl-hero-day-dot { opacity: .42; }
.vl-hero-day-lbl { font-size: .6rem; opacity: .85; font-weight: 700; }
.vl-hero-spin-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border: none; border-radius: 13px;
  background: rgba(255,255,255,.96); color: #0d9488; font-size: .9rem; font-weight: 800; cursor: pointer;
  transition: transform .12s, box-shadow .12s; white-space: nowrap;
}
.vl-hero-spin-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* Section header */
.vl-sets-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 2px 14px; flex-wrap: wrap; }
.vl-sets-head-title { font-size: 1.2rem; font-weight: 800; color: #1e293b; font-family: 'Noto Sans','Segoe UI',sans-serif; }
.vl-sets-head-meta { font-size: .82rem; color: #94a3b8; font-weight: 600; }

/* Set cards grid */
.vl-set-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(288px,1fr)); gap: 16px; }
/* 4 thẻ / hàng, không kéo giãn hết cỡ (chừa khoảng cách nhỏ với leaderboard) */
.vl-set-grid-sm { grid-template-columns: repeat(4, minmax(0,300px)); justify-content: start; gap: 14px; }
.vl-set-grid-sm .vl-set-card { padding: 15px 16px 14px; }
.vl-set-grid-sm .vl-set-title { font-size: 1.12rem; }
.vl-set-grid-sm .vl-set-ico { width: 38px; height: 38px; font-size: 1.25rem; }
.vl-set-card {
  background: var(--acbg,#f8fafc); border: 1.5px solid rgba(15,23,42,.07);
  border-radius: 18px; padding: 18px 18px 16px; cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.vl-set-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15,23,42,.12); border-color: var(--ac); }
.vl-set-top { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.vl-set-ico {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.vl-set-badge { font-size: .66rem; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ac); }
.vl-set-arrow { margin-left: auto; font-size: 1.15rem; font-weight: 700; color: var(--ac); opacity: .65; transition: transform .14s; }
.vl-set-card:hover .vl-set-arrow { transform: translateX(4px); opacity: 1; }
.vl-set-lock { margin-left: auto; font-size: 1.05rem; line-height: 1; filter: grayscale(.2); opacity: .9; }
.vl-set-card.vl-set-locked { position: relative; }
.vl-set-card.vl-set-locked .vl-set-title,
.vl-set-card.vl-set-locked .vl-set-sub,
.vl-set-card.vl-set-locked .vl-set-foot,
.vl-set-card.vl-set-locked .vl-set-bar { opacity: .72; }
.vl-set-card.vl-set-locked::after {
  content: 'PREMIUM'; position: absolute; top: 10px; right: 38px;
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; color: #b45309;
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; padding: 1px 5px;
}

/* ── Learn through passages ───────────────────────────────────────────── */
.lp-voice-seg { display: inline-flex; border: 1.5px solid #16a34a; border-radius: 9px; overflow: hidden; vertical-align: middle; margin-right: 4px; }
.lp-voice-btn { border: none; background: #fff; color: #16a34a; font-weight: 800; font-size: .82rem; padding: 6px 12px; cursor: pointer; line-height: 1; }
.lp-voice-btn + .lp-voice-btn { border-left: 1.5px solid #16a34a; }
.lp-voice-btn.on { background: #16a34a; color: #fff; }
.lp-voice-btn:not(.on):hover { background: #dcfce7; }
.lp-green-btn { background: #16a34a !important; color: #fff !important; border: none !important; font-weight: 700; }
.lp-green-btn:hover { background: #15803d !important; }
.lp-star-test-btn { background: #f59e0b !important; color: #fff !important; border: none !important; font-weight: 800; }
.lp-star-test-btn:hover { background: #d97706 !important; }
.lp-vocab-btn { background: #6366f1 !important; color: #fff !important; border: none !important; font-weight: 700; }
.lp-vocab-btn:hover { background: #4f46e5 !important; }
.lp-trans-btn { background: #0891b2 !important; color: #fff !important; border: none !important; font-weight: 700; }
.lp-trans-btn:hover { background: #0e7490 !important; }
.lp-colloc-btn { background: #fff !important; color: #15803d !important; border: 1.5px solid #86efac !important; font-weight: 700; }
.lp-colloc-btn:hover { background: #f0fdf4 !important; }
.lp-colloc-btn.on { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }
.lp-w.lp-colloc-hl { background: #bbf7d0; color: #14532d; padding: 2px 0; cursor: help; }
/* nối liền khoảng trắng sang từ kế tiếp trong cùng cụm (không còn ô rời rạc) */
.lp-w.lp-colloc-hl:not(.lp-colloc-last) { box-shadow: 0.34em 0 0 #bbf7d0; }
.lp-w.lp-colloc-first { border-top-left-radius: 6px; border-bottom-left-radius: 6px; padding-left: 4px; }
.lp-w.lp-colloc-last { border-top-right-radius: 6px; border-bottom-right-radius: 6px; padding-right: 4px; }
.lp-w.lp-colloc-hl { cursor: pointer; }
/* Card chi tiết collocation trong panel phải */
.lp-cc-card .vl-wc-word { color: #15803d; }
.lp-cc-ex-head { font-size: .72rem; font-weight: 800; color: #15803d; text-transform: uppercase; letter-spacing: .02em; margin: 12px 0 6px; }
.lp-cc-ex { display: flex; gap: 7px; align-items: flex-start; font-size: .9rem; line-height: 1.5; color: #334155; margin-bottom: 7px; }
.lp-cc-ex b { color: #15803d; background: #dcfce7; border-radius: 3px; padding: 0 2px; }
.lp-cc-ex-sp { border: none; background: none; cursor: pointer; font-size: .9rem; padding: 0; flex-shrink: 0; line-height: 1.5; }
/* LP — thanh tìm từ trong tất cả bài đọc */
.lp-search-wrap { margin: 4px 2px 18px; }
.lp-search-box {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px;
  padding: 10px 14px; box-shadow: 0 1px 3px rgba(15,23,42,.05);
  transition: border-color .15s, box-shadow .15s;
}
.lp-search-box:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.lp-search-ic { font-size: 1rem; opacity: .7; flex-shrink: 0; }
.lp-search-inp { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: .96rem; color: #1e293b; }
.lp-search-clear { border: none; background: none; cursor: pointer; font-size: 1.25rem; color: #94a3b8; line-height: 1; padding: 0 4px; }
.lp-search-clear:hover { color: #475569; }
.lp-search-results:not(:empty) { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.lp-sr-head { font-size: .8rem; font-weight: 700; color: #64748b; padding: 2px 2px 4px; }
.lp-sr-loading, .lp-sr-empty { font-size: .88rem; color: #94a3b8; padding: 14px 4px; text-align: center; }
.lp-sr-item {
  background: #fff; border: 1px solid #eef2f7; border-left: 4px solid #6366f1; border-radius: 12px;
  padding: 11px 14px; cursor: pointer; position: relative;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.lp-sr-item:hover { box-shadow: 0 8px 22px rgba(15,23,42,.1); transform: translateY(-2px); }
.lp-sr-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.lp-sr-topic { font-size: .76rem; font-weight: 800; color: #6366f1; }
.lp-sr-lesson { font-size: .82rem; font-weight: 700; color: #1e293b; }
.lp-sr-snip { font-size: .88rem; color: #475569; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 56px; }
.lp-sr-snip mark { background: #fde68a; color: #92400e; border-radius: 3px; padding: 0 2px; font-weight: 700; }
.lp-sr-go { position: absolute; right: 12px; bottom: 10px; font-size: .76rem; font-weight: 800; color: #6366f1; }

/* Highlight câu + từ khi nhảy tới từ tìm kiếm */
.lp-sent.lp-sent-jump { background: #fef9c3; border-radius: 10px; box-shadow: 0 0 0 3px #fde68a; transition: background .4s, box-shadow .4s; }
.lp-w.lp-jump-word { background: #fbbf24; color: #1e293b; border-radius: 4px; padding: 1px 2px; box-shadow: 0 0 0 2px #fbbf24; animation: lpJumpPulse 1s ease 2; }
@keyframes lpJumpPulse { 0%,100% { background: #fbbf24; } 50% { background: #f59e0b; } }

/* Admin — modal sửa bài đọc mẫu */
.pass-edit-overlay {
  position: fixed; inset: 0; z-index: 100070;
  background: rgba(15,23,42,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; padding: 20px;
  font-family: 'Nunito', sans-serif;
}
.pass-edit-card {
  width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.3); animation: sspPop .2s ease;
}
.pass-edit-head { display: flex; align-items: center; justify-content: space-between; font-size: 1.1rem; font-weight: 900; color: #1e293b; margin-bottom: 4px; }
.pass-edit-x { border: none; background: none; cursor: pointer; font-size: 1.4rem; color: #94a3b8; line-height: 1; }
.pass-edit-x:hover { color: #475569; }
.pass-edit-note { font-size: .8rem; font-weight: 700; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 7px 11px; margin-bottom: 12px; }
.pass-edit-lbl { display: block; font-size: .78rem; font-weight: 800; color: #64748b; margin: 12px 0 5px; }
.pass-edit-inp, .pass-edit-ta {
  width: 100%; box-sizing: border-box; border: 1.5px solid #cbd5e1; border-radius: 10px;
  padding: 9px 12px; font-size: .92rem; font-family: inherit; color: #1e293b; outline: none; resize: vertical;
}
.pass-edit-inp:focus, .pass-edit-ta:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.pass-edit-ta { min-height: 92px; line-height: 1.55; }
.pass-edit-ta-en { min-height: 150px; }
.pass-edit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pass-edit-save { padding: 10px 20px; border: none; border-radius: 10px; background: #16a34a; color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer; font-family: inherit; }
.pass-edit-save:hover { background: #15803d; }
.pass-edit-cancel { padding: 10px 18px; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; color: #64748b; font-weight: 700; font-size: .9rem; cursor: pointer; font-family: inherit; }
.pass-edit-cancel:hover { background: #f1f5f9; }
.pass-edit-reset { margin-left: auto; padding: 10px 16px; border: 1.5px solid #fca5a5; border-radius: 10px; background: #fff; color: #dc2626; font-weight: 700; font-size: .88rem; cursor: pointer; font-family: inherit; }
.pass-edit-reset:hover { background: #fef2f2; }

.lp-trans-again { margin-bottom: 16px; }
.lp-miss-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 280px; overflow-y: auto; }
.lp-miss-chip { font-size: .82rem; font-weight: 700; color: #9a3412; background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 999px; padding: 3px 11px; }
.lp-miss-ta { width: 100%; box-sizing: border-box; margin-top: 12px; height: 70px; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 8px 11px; font-size: .85rem; resize: vertical; color: #1e293b; }

/* Nút Level + dropdown chọn level highlight */
.lp-level-wrap { position: relative; display: inline-block; }
.lp-level-menu {
  position: fixed; z-index: 100002; left: 0; top: 0;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.18);
  padding: 6px; min-width: 150px;
}
.lp-level-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; font-weight: 800; font-size: .9rem; color: #334155; user-select: none;
}
.lp-level-item:hover { background: #f1f5f9; }
.lp-level-item.on { background: var(--lvc-bg, #f1f5f9); color: var(--lvc-tx, #334155); }
.lp-level-dot { width: 14px; height: 14px; border-radius: 4px; background: var(--lvc-hl, #cbd5e1); flex: none; border: 1px solid rgba(0,0,0,.08); }
.lp-level-name { flex: 1; }
.lp-level-check { color: var(--lvc-tx, #16a34a); font-weight: 900; width: 14px; }
/* Màu theo level (badge + text) */
.lp-lvc-A1 { --lvc-hl:#bbf7d0; --lvc-bg:#dcfce7; --lvc-tx:#15803d; }
.lp-lvc-A2 { --lvc-hl:#bfdbfe; --lvc-bg:#dbeafe; --lvc-tx:#1d4ed8; }
.lp-lvc-B1 { --lvc-hl:#fef08a; --lvc-bg:#fef9c3; --lvc-tx:#a16207; }
.lp-lvc-B2 { --lvc-hl:#fed7aa; --lvc-bg:#ffedd5; --lvc-tx:#c2410c; }
.lp-lvc-C1 { --lvc-hl:#e9d5ff; --lvc-bg:#f3e8ff; --lvc-tx:#7e22ce; }
.lp-lvc-C2 { --lvc-hl:#fecdd3; --lvc-bg:#ffe4e6; --lvc-tx:#be123c; }

/* Highlight từ trong bài đọc theo level đang chọn */
.lp-reader.lp-hl-A1 .lp-w[data-lv="A1"] { background:#bbf7d0; box-shadow:0 0 0 2px #bbf7d0; border-radius:4px; }
.lp-reader.lp-hl-A2 .lp-w[data-lv="A2"] { background:#bfdbfe; box-shadow:0 0 0 2px #bfdbfe; border-radius:4px; }
.lp-reader.lp-hl-B1 .lp-w[data-lv="B1"] { background:#fef08a; box-shadow:0 0 0 2px #fef08a; border-radius:4px; }
.lp-reader.lp-hl-B2 .lp-w[data-lv="B2"] { background:#fed7aa; box-shadow:0 0 0 2px #fed7aa; border-radius:4px; }
.lp-reader.lp-hl-C1 .lp-w[data-lv="C1"] { background:#e9d5ff; box-shadow:0 0 0 2px #e9d5ff; border-radius:4px; }
.lp-reader.lp-hl-C2 .lp-w[data-lv="C2"] { background:#fecdd3; box-shadow:0 0 0 2px #fecdd3; border-radius:4px; }
.lp-add-btn { background: #0ea5e9 !important; color: #fff !important; border: none !important; font-weight: 700; }
.lp-add-btn:hover { background: #0284c7 !important; }
.lp-add-big {
  display: inline-block; background: #0ea5e9; color: #fff; border: none; cursor: pointer;
  font-size: 1rem; font-weight: 700; padding: 12px 24px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(14,165,233,.3);
}
.lp-add-big:hover { background: #0284c7; transform: translateY(-1px); }
.lp-topic-card { position: relative; }
.lp-cust-card { border: 2px dashed #c4b5fd; }
.lp-cust-card:hover { border-color: #7c3aed; }
.lp-card-admin { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 2; }
.lp-card-admin button, .lp-lesson-admin button {
  border: 1px solid var(--border, #e5e7eb); background: rgba(255,255,255,.85); color: #475569;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: .85rem; line-height: 1;
}
.lp-card-admin button:hover, .lp-lesson-admin button:hover { background: #fff; border-color: var(--ac, #0ea5e9); color: #0f172a; }
.lp-lesson-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.lp-lesson-stats { display: flex; flex-wrap: wrap; gap: 5px; }
.lp-lvstat {
  font-size: .72rem; font-weight: 800; color: var(--c, #334155); background: var(--bg, #f1f5f9);
  border: 1px solid var(--c, #cbd5e1); border-radius: 999px; padding: 1px 8px; line-height: 1.5;
}
.lp-lvstat b { font-weight: 900; }
.lp-lesson-list { display: flex; flex-direction: column; gap: 11px; }
.lp-lesson-item {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  background: var(--lcbg, #f1f5f9); border: 1.5px solid transparent;
  border-left: 6px solid var(--lc, #0ea5e9); border-radius: 16px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.lp-lesson-item:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.12); }
.lp-lesson-num {
  flex: none; width: 36px; height: 36px; border-radius: 11px; background: #fff;
  color: var(--lc, #0369a1); font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(15,23,42,.08);
}
.lp-lesson-title { font-weight: 800; color: var(--lc, #1e293b); font-size: 1.08rem; line-height: 1.3; }
.lp-lesson-admin { display: flex; gap: 4px; }
.lp-lesson-go { color: var(--lc, #0ea5e9); font-size: 1.2rem; font-weight: 700; }
.vl-overlay.vl-dark .lp-lesson-item { filter: brightness(.92); }

.lp-reader { max-width: 860px; margin: 4px auto 0; display: flex; flex-direction: column; gap: 4px; }
.lp-sent { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; transition: background .15s; }
.lp-sent:hover { background: rgba(14,165,233,.05); }
.lp-sent-active { background: #e0f2fe !important; box-shadow: inset 3px 0 0 #0ea5e9; }
.lp-sent-play {
  flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid #bae6fd;
  background: #f0f9ff; color: #0284c7; cursor: pointer; font-size: 1rem; line-height: 1;
}
.lp-sent-play:hover { background: #e0f2fe; border-color: #0ea5e9; }
.lp-sent-btns { flex: none; display: flex; flex-direction: column; gap: 6px; }
.lp-sent-rec {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid #fecaca;
  background: #fef2f2; color: #dc2626; cursor: pointer; font-size: 1rem; line-height: 1;
}
.lp-sent-rec:hover { background: #fee2e2; border-color: #ef4444; }
.lp-sent-rec.active { background: #dc2626; color: #fff; border-color: #dc2626; animation: lpRecPulse 1s infinite; }
@keyframes lpRecPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); } }
.lp-sent-rec-result { margin-top: 8px; }
/* ── Bảng kết quả chấm phát âm (Learn through passages) ── */
.lp-rr-card { position: relative; background: #fff; border: 1.5px solid #eef2f7; border-radius: 18px; box-shadow: 0 10px 30px rgba(15,23,42,.10); padding: 16px 18px 14px; font-family: 'Poppins', sans-serif; }
.lp-rr-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #e5e7eb; background: #f8fafc; color: #94a3b8; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.lp-rr-x:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.lp-rr-tag { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--g, #16a34a); margin-bottom: 8px; }
.lp-rr-head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1.5px solid #f1f5f9; margin-bottom: 12px; }
.lp-rr-ring { flex: none; width: 76px; height: 76px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--g) calc(var(--p) * 1%), #e5e7eb 0); display: flex; align-items: center; justify-content: center; }
.lp-rr-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.lp-rr-ring-pct { position: relative; z-index: 1; font-size: 1.15rem; font-weight: 900; color: var(--g, #16a34a); line-height: 1; }
.lp-rr-ring-lbl { position: relative; z-index: 1; position: absolute; bottom: 16px; font-size: .58rem; font-weight: 800; color: var(--g, #16a34a); letter-spacing: .03em; }
.lp-rr-head-txt { flex: 1; min-width: 0; }
.lp-rr-title { font-size: 1.3rem; font-weight: 800; color: #1e293b; line-height: 1.15; }
.lp-rr-pill { display: inline-block; margin-top: 8px; background: #f1f5f9; border-radius: 999px; padding: 4px 13px; font-size: .85rem; color: #475569; }
.lp-rr-pill b { color: var(--g, #16a34a); font-weight: 900; }
.lp-rr-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8rem; color: #64748b; font-weight: 700; margin-bottom: 12px; }
.lp-rr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lp-rr-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.lp-rr-d-ok { background: #16a34a; } .lp-rr-d-wrong { background: #ef4444; } .lp-rr-d-miss { background: #cbd5e1; }
.lp-rr-box { border-radius: 13px; padding: 12px 15px; margin-bottom: 11px; }
.lp-rr-box-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .05em; color: #94a3b8; margin-bottom: 7px; }
.lp-rr-sample { background: color-mix(in srgb, var(--g) 8%, #fff); border: 1.5px solid color-mix(in srgb, var(--g) 22%, #fff); }
.lp-rr-sample .lp-rr-box-lbl { color: var(--g, #16a34a); }
.lp-rr-sent { font-size: 1.2rem; font-weight: 800; line-height: 1.6; font-family: 'Poppins',serif; }
.lp-rr-w { cursor: default; }
.lp-rr-ok { color: #16a34a; }
.lp-rr-wrong { color: #dc2626; text-decoration: underline wavy #ef4444; cursor: pointer; }
.lp-rr-miss { color: #cbd5e1; }
.lp-rr-heard { background: #f8fafc; border: 1.5px dashed #e2e8f0; }
.lp-rr-heard-txt { font-style: italic; color: #94a3b8; font-size: 1rem; line-height: 1.5; }
.lp-rr-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-rr-retry { background: #f97316; color: #fff; border: none; border-radius: 11px; padding: 11px 20px; font-weight: 800; font-size: .92rem; cursor: pointer; }
.lp-rr-retry:hover { background: #ea580c; }
.lp-rr-listen { background: #fff; color: #475569; border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 11px 18px; font-weight: 700; font-size: .92rem; cursor: pointer; }
.lp-rr-listen:hover { background: #f8fafc; }
.lp-rr-next { margin-left: auto; background: none; border: none; color: #2563eb; font-weight: 800; font-size: .95rem; cursor: pointer; padding: 8px; }
.lp-rr-next:hover { text-decoration: underline; }
.vl-overlay.vl-dark .lp-rr-card { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .lp-rr-title { color: #e2e8f0; }
.vl-overlay.vl-dark .lp-rr-ring::before { background: #1e293b; }
.lp-rr-sum { margin-left: 8px !important; background: #16a34a; color: #fff; border-radius: 11px; padding: 11px 18px; font-weight: 800; text-decoration: none !important; }
.lp-rr-sum:hover { background: #15803d; text-decoration: none !important; }
/* Màn tổng kết luyện phát âm */
.lp-sum-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px solid #f1f5f9; margin-bottom: 14px; }
.lp-sum-title { font-size: 1.3rem; font-weight: 800; color: #1e293b; }
.lp-sum-sub { font-size: .85rem; color: #64748b; margin-top: 4px; font-weight: 600; }
.lp-sum-wlbl { font-size: .85rem; font-weight: 800; color: #475569; margin-bottom: 10px; }
.lp-sum-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow-y: auto; }
.lp-sum-chip { background: #fef2f2; border: 1.5px solid #fecaca; color: #b91c1c; border-radius: 999px; padding: 5px 13px; font-size: .88rem; font-weight: 700; cursor: pointer; }
.lp-sum-chip:hover { background: #fee2e2; border-color: #f87171; }
.vl-overlay.vl-dark .lp-sum-title { color: #e2e8f0; }
.lp-sent-body { flex: 1; min-width: 0; }
.lp-sent-en { font-size: calc(1.12rem * var(--lp-fz, 1)); line-height: 1.6; color: var(--ink, #1e293b); font-family: var(--lp-ff, 'Poppins', sans-serif); }
.lp-sent-vi { font-size: calc(.96rem * var(--lp-fz, 1)); line-height: 1.5; color: #2563eb; margin-top: 3px; font-style: italic; font-family: 'Plus Jakarta Sans', sans-serif; }

/* LP reader — nút ⚙️ Cài đặt (cỡ chữ / font / giọng) trong toolbar, menu portal ra body */
.lp-gear-btn { padding: 6px 11px !important; font-size: 1rem; line-height: 1; }
.lp-gear-btn.on { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }
.lp-rd-set-menu {
  position: fixed; z-index: 100050;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 230px; padding: 14px 15px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15,23,42,.18);
}
.lp-rd-set-grp { display: flex; flex-direction: column; gap: 7px; }
.lp-rd-set-lbl { font-size: .72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .02em; }
.lp-rd-set-row { display: flex; align-items: center; gap: 8px; }
.lp-rd-sz-btn {
  width: 40px; height: 34px; border-radius: 9px; border: 1.5px solid #cbd5e1;
  background: #fff; color: #1e293b; font-weight: 800; font-size: .95rem; cursor: pointer; transition: all .15s;
}
.lp-rd-sz-btn:hover { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.lp-rd-sz-val { min-width: 50px; text-align: center; font-weight: 800; font-size: .9rem; color: #1e293b; }
.lp-rd-font-sel {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 9px;
  border: 1.5px solid #cbd5e1; font-size: .88rem; font-family: inherit; color: #1e293b; cursor: pointer; outline: none;
}
.lp-rd-font-sel:focus { border-color: #16a34a; }
.lp-reader.lp-hide-vi .lp-sent-vi { display: none; }
.lp-w { cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .1s; }
.lp-w:hover { background: #fef08a; }

/* Panel thẻ từ đầy đủ (trượt từ phải) khi click 1 từ trong bài đọc */
.lp-word-panel {
  position: fixed; top: 0; right: -460px; height: 100vh; width: 420px; max-width: 92vw;
  background: var(--surface, #fff); box-shadow: -10px 0 36px rgba(15,23,42,.2);
  z-index: 100001; display: flex; flex-direction: column;
  transition: right .26s cubic-bezier(.4,0,.2,1); border-left: 1.5px solid var(--border, #e5e7eb);
}
.lp-word-panel.open { right: 0; }
.lp-wp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 4px; flex: none; }
.lp-wp-tgs { display: inline-flex; gap: 7px; flex-wrap: wrap; }
.lp-wp-tg {
  background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font-size: .78rem; font-weight: 800; color: #94a3b8; transition: all .14s;
}
.lp-wp-tg:hover { background: #e2e8f0; }
.lp-wp-tg.on { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
.lp-hide-sa .lp-card-sa { display: none; }
.lp-wp-close {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--border, #e5e7eb);
  background: var(--surface2, #f1f5f9); color: #475569; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.lp-wp-close:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.lp-wp-scroll { flex: 1; overflow-y: auto; padding: 4px 16px 24px; }
.lp-wp-scroll .vl-wc { width: 100%; box-sizing: border-box; cursor: default; }
.lp-wp-scroll .vl-wc:hover { transform: none; }
.lp-dict-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border, #e5e7eb); }
.lp-dict-lbl { font-size: .78rem; font-weight: 700; color: #94a3b8; }
.lp-dict-link {
  display: inline-block; text-decoration: none; font-size: .8rem; font-weight: 700;
  padding: 5px 11px; border-radius: 8px; border: 1.5px solid; transition: all .14s;
}
.lp-dict-link:hover { color: #fff !important; }
.lp-dict-ox  { color: #0b6e4f; border-color: #0b6e4f; }
.lp-dict-ox:hover  { background: #0b6e4f; }
.lp-dict-cam { color: #b91c1c; border-color: #b91c1c; }
.lp-dict-cam:hover { background: #b91c1c; }
.lp-dict-lng { color: #1d4ed8; border-color: #1d4ed8; }
.lp-dict-lng:hover { background: #1d4ed8; }

.lp-form { max-width: 720px; margin: 0 auto; }
.lp-form h3 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 4px 0 14px; }
.lp-form label { display: block; font-size: .82rem; font-weight: 700; color: #475569; margin: 12px 0 5px; }
.lp-input, .lp-textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid #cbd5e1; border-radius: 10px;
  padding: 10px 13px; font-size: 1rem; font-family: inherit; color: #1e293b; background: #fff;
}
.lp-input:focus, .lp-textarea:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.lp-textarea { resize: vertical; line-height: 1.55; }
.lp-form-hint { font-size: .8rem; color: #64748b; margin-top: 8px; background: #f1f5f9; border-radius: 8px; padding: 8px 11px; }
.lp-form-actions { display: flex; gap: 10px; margin-top: 16px; }
.vl-btn-ghost { background: transparent !important; color: #64748b !important; border: 1.5px solid #cbd5e1 !important; }
.vl-btn-ghost:hover { background: #f1f5f9 !important; }

.vl-overlay.vl-dark .lp-lesson-item { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .lp-sent-en { color: #e2e8f0; }
.vl-overlay.vl-dark .lp-word-pop { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .lp-wp-head, .vl-overlay.vl-dark .lp-wp-vi { color: #e2e8f0; }
.vl-overlay.vl-dark .lp-input, .vl-overlay.vl-dark .lp-textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.vl-set-title { font-size: 1.3rem; font-weight: 800; color: var(--ac); font-family: 'Noto Sans','Segoe UI',sans-serif; line-height: 1.15; margin-bottom: 3px; word-break: break-word; }
.vl-set-sub { font-size: .78rem; color: #64748b; margin-bottom: 14px; line-height: 1.35; flex: 1; }
.vl-set-bar { height: 7px; border-radius: 999px; background: rgba(15,23,42,.08); overflow: hidden; margin-bottom: 8px; }
.vl-set-bar-fill { height: 100%; border-radius: 999px; background: var(--ac); transition: width .45s ease; }
.vl-set-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vl-set-foot-total { font-size: .76rem; font-weight: 800; color: var(--ac); }
.vl-set-foot-learned { font-size: .72rem; font-weight: 700; color: #64748b; }
.vl-set-action { font-size: .82rem; font-weight: 800; color: var(--ac); margin-top: 2px; }

/* Leaderboard rows (mockup style) */
.vl-lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; transition: background .12s; }
.vl-lb-row:hover { background: #f1f5f9; }
.vl-lb-row.vl-lb-me { background: #ecfdf5; box-shadow: inset 0 0 0 1.5px #6ee7b7; }
.vl-lb-rank { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .72rem; font-weight: 800; color: #64748b; background: #eef2f6; }
.vl-lb-rank.gold { background: #fcd34d; color: #7c2d12; }
.vl-lb-rank.silver { background: #fcd34d; color: #7c2d12; }
.vl-lb-rank.bronze { background: #fdba74; color: #7c2d12; }
.vl-lb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vl-lb-name { font-size: .8rem; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-lb-streak { font-size: .64rem; color: #94a3b8; font-weight: 600; }
.vl-lb-words { font-size: .76rem; font-weight: 800; color: #0d9488; white-space: nowrap; flex-shrink: 0; }
.vl-lb-foot { margin: 12px 10px 4px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; border-radius: 13px; background: linear-gradient(135deg,#ecfeff,#f0fdfa); border: 1.5px solid #99f6e4; }
.vl-lb-foot-info { display: flex; flex-direction: column; min-width: 0; }
.vl-lb-foot-rank { font-size: .76rem; font-weight: 800; color: #0d9488; }
.vl-lb-foot-gap { font-size: .64rem; color: #64748b; }
.vl-lb-foot-top { justify-content: center; font-size: .8rem; font-weight: 800; color: #0d9488; }

/* Dark mode */
.vl-overlay.vl-dark .vl-sets-head-title { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-sets-head-meta { color: #64748b; }
.vl-overlay.vl-dark .vl-set-card { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-set-card:hover { border-color: var(--ac); }
.vl-overlay.vl-dark .vl-set-ico { background: #0f172a; }
.vl-overlay.vl-dark .vl-set-badge { background: #0f172a; }
.vl-overlay.vl-dark .vl-set-sub { color: #94a3b8; }
.vl-overlay.vl-dark .vl-set-bar { background: rgba(255,255,255,.12); }
.vl-overlay.vl-dark .vl-set-foot-learned { color: #94a3b8; }
.vl-overlay.vl-dark .vl-lb-row:hover { background: #1e293b; }
.vl-overlay.vl-dark .vl-lb-row.vl-lb-me { background: #064e3b; box-shadow: inset 0 0 0 1.5px #0d9488; }
.vl-overlay.vl-dark .vl-lb-rank { background: #334155; color: #cbd5e1; }
.vl-overlay.vl-dark .vl-lb-name { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-lb-words { color: #2dd4bf; }
.vl-overlay.vl-dark .vl-lb-foot { background: #0b3b38; border-color: #115e59; }
.vl-overlay.vl-dark .vl-lb-foot-rank, .vl-overlay.vl-dark .vl-lb-foot-top { color: #2dd4bf; }
.vl-overlay.vl-dark .vl-lb-foot-gap { color: #94a3b8; }

@media(max-width:640px) {
  .vl-set-grid { grid-template-columns: 1fr; }
  .vl-set-grid-sm { grid-template-columns: 1fr 1fr; }
  .vl-hero { flex-direction: column; align-items: flex-start; }
  .vl-hero-spin-btn { width: 100%; justify-content: center; }
}

/* ── VL Progress Button ──────────────────────────────────────── */
.vl-prog-toggle-btn {
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid #a78bfa; background: rgba(255,255,255,.85);
  color: #5b21b6; font-size: .8rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: all .13s; order: 4;
  display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
}
.vl-prog-toggle-btn:hover { background: #f5f3ff; border-color: #7c3aed; box-shadow: 0 2px 8px rgba(124,58,237,.18); }
.vl-prog-toggle-btn.active { background: #ede9fe; border-color: #7c3aed; color: #4c1d95; }
/* ── VL Progress Panel ───────────────────────────────────────── */
.vl-prog-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10100;
}
.vl-prog-overlay.active { display: block; }
.vl-prog-panel {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(720px, 96vw); max-height: 88vh;
  background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.22);
  flex-direction: column; z-index: 10101; overflow: hidden;
}
.vl-prog-panel.vl-prog-open { display: flex; }
/* Header */
.vl-prog-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 18px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; background: #fff;
}
.vl-prog-hdr-info { display: flex; flex-direction: column; gap: 6px; }
.vl-prog-hdr-title { font-size: 1.1rem; font-weight: 800; color: #1c1917; letter-spacing: -.01em; }
.vl-prog-nav { display: flex; align-items: center; gap: 5px; }
.vl-prog-hdr-date  { font-size: .8rem; color: #64748b; font-weight: 500; }
.vl-prog-nav-btn {
  border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 6px;
  color: #475569; font-size: 1.1rem; line-height: 1; padding: 2px 7px;
  cursor: pointer; transition: all .12s;
}
.vl-prog-nav-btn:hover:not(:disabled) { background: #e2e8f0; color: #1e293b; }
.vl-prog-nav-btn:disabled { opacity: .3; cursor: default; }
.vl-prog-hdr-actions { display: flex; align-items: center; gap: 8px; }
.vl-prog-copy-btn {
  border: none; background: #eff6ff; color: #2563eb;
  cursor: pointer; padding: 6px 12px; border-radius: 8px;
  font-size: .9rem; transition: all .12s; line-height: 1; font-weight: 600;
}
.vl-prog-copy-btn:hover { background: #dbeafe; }
.vl-prog-close {
  border: none; background: #f1f5f9; color: #64748b;
  cursor: pointer; padding: 6px 12px; border-radius: 8px;
  font-size: .9rem; transition: all .12s; line-height: 1; font-weight: 600;
}
.vl-prog-close:hover { background: #e2e8f0; color: #1e293b; }
/* 4-card stats row */
.vl-prog-cards {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
  padding: 16px 24px; flex-shrink: 0;
}
.vl-prog-card {
  border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.vl-pc-total { background: #fef9c3; }
.vl-pc-ok    { background: #d1fae5; }
.vl-pc-err   { background: #fee2e2; }
.vl-pc-star  { background: #ede9fe; }
.vl-pc-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.vl-pc-total .vl-pc-label { color: #92400e; }
.vl-pc-ok    .vl-pc-label { color: #065f46; }
.vl-pc-err   .vl-pc-label { color: #7f1d1d; }
.vl-pc-star  .vl-pc-label { color: #4c1d95; }
.vl-pc-sep   { font-weight: 900; font-size: .9rem; opacity: .4; letter-spacing: -.04em; }
.vl-pc-total .vl-pc-sep { color: #92400e; }
.vl-pc-ok    .vl-pc-sep { color: #065f46; }
.vl-pc-err   .vl-pc-sep { color: #7f1d1d; }
.vl-pc-star  .vl-pc-sep { color: #4c1d95; }
.vl-pc-num   { font-size: 2rem; font-weight: 900; line-height: 1.1; }
.vl-pc-total .vl-pc-num { color: #92400e; }
.vl-pc-ok    .vl-pc-num { color: #047857; }
.vl-pc-err   .vl-pc-num { color: #b91c1c; }
.vl-pc-star  .vl-pc-num { color: #5b21b6; }
.vl-pc-desc  { font-size: .68rem; font-weight: 500; }
.vl-pc-total .vl-pc-desc { color: #a16207; }
.vl-pc-ok    .vl-pc-desc { color: #047857; }
.vl-pc-err   .vl-pc-desc { color: #b91c1c; }
.vl-pc-star  .vl-pc-desc { color: #5b21b6; }
.vl-pc-test-btn {
  margin-top: 8px; padding: 5px 0; width: 100%; border: none; border-radius: 8px;
  font-size: .75rem; font-weight: 700; cursor: pointer; transition: opacity .12s;
  background: rgba(0,0,0,.1); color: inherit;
}
.vl-pc-test-btn:hover { opacity: .8; }
.vl-pc-total .vl-pc-test-btn { background: #fde68a; color: #92400e; }
.vl-pc-ok    .vl-pc-test-btn { background: #a7f3d0; color: #065f46; }
.vl-pc-err   .vl-pc-test-btn { background: #fecaca; color: #991b1b; }
.vl-pc-star  .vl-pc-test-btn { background: #ddd6fe; color: #4c1d95; }

/* Sentence Alts admin button */
.vl-sent-alts-btn {
  font-size: .72rem; font-weight: 700; padding: 5px 11px;
  border-radius: 8px; border: 1.5px solid #6366f1;
  background: #eef2ff; color: #4338ca; cursor: pointer;
  white-space: nowrap;
}
.vl-sent-alts-btn:hover { background: #e0e7ff; }

/* Sentence Alts modal */
.vl-sa-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.vl-sa-inner {
  background: #fff; border-radius: 14px; padding: 22px 24px;
  width: min(560px, 94vw); max-height: 82vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.vl-sa-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1rem; font-weight: 800; color: #1e293b;
}
.vl-sa-close {
  background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--muted); padding: 2px 6px;
}
.vl-sa-help {
  font-size: .73rem; color: #64748b; background: #f8fafc; border-radius: 6px; padding: 7px 10px;
}
.vl-sa-inp {
  width: 100%; box-sizing: border-box; border: 1.5px solid #cbd5e1; border-radius: 8px;
  padding: 9px 11px; font-size: .82rem; resize: vertical; font-family: monospace;
}
.vl-sa-add-btn {
  align-self: flex-start; background: #6366f1; color: #fff; border: none;
  border-radius: 8px; padding: 7px 16px; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.vl-sa-add-btn:hover { background: #4f46e5; }
.vl-sa-msg { font-size: .78rem; min-height: 18px; }
.vl-sa-msg-ok  { color: #16a34a; }
.vl-sa-msg-err { color: #dc2626; }
.vl-sa-list { display: flex; flex-direction: column; gap: 10px; }
.vl-sa-group {
  border: 1.5px solid #e2e8f0; border-radius: 9px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.vl-sa-primary { font-weight: 700; color: #16a34a; font-size: .82rem; }
.vl-sa-alt     { color: #475569; font-size: .8rem; padding-left: 12px; }
.vl-sa-del-btn {
  align-self: flex-start; margin-top: 6px; background: none; border: 1px solid #fca5a5;
  color: #dc2626; border-radius: 6px; padding: 3px 10px; font-size: .72rem; cursor: pointer;
}
.vl-sa-del-btn:hover { background: #fef2f2; }
.vl-sa-quick-btn {
  margin-top: 6px; background: none; border: 1px solid #6366f1; color: #6366f1;
  border-radius: 7px; padding: 4px 12px; font-size: .75rem; cursor: pointer;
}
.vl-sa-quick-btn:hover { background: #eef2ff; }
.vl-vst-alts { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.vl-vst-alt-item { font-size: .82rem; color: #64748b; padding-left: 4px; }
.vl-ai-toggle-btn {
  padding: 2px 8px; border-radius: 12px; font-size: .75rem; font-weight: 600; cursor: pointer;
  border: 1px solid #cbd5e1; background: #f1f5f9; color: #94a3b8; transition: background .15s, color .15s;
}
.vl-ai-toggle-btn.vl-ai-toggle-on { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.vl-ai-loading {
  margin-top: 8px; padding: 8px 14px; background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 8px; font-size: .85rem; color: #2563eb; font-weight: 600;
  animation: vl-ai-pulse 1s ease-in-out infinite;
}
@keyframes vl-ai-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
/* AI Verdict Card */
.vl-ai-verdict { border-radius: 10px; overflow: hidden; margin: 8px 0; border: 1.5px solid; font-size: .82rem; }
.vl-ai-ok { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.vl-ai-ng { background: #fff5f5; border-color: #fca5a5; color: #1e293b; }
/* Header bar */
.vl-ai-hd { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 700; font-size: .83rem; }
.vl-ai-ok .vl-ai-hd { background: #dcfce7; color: #166534; }
.vl-ai-ng .vl-ai-hd { background: #fee2e2; color: #b91c1c; }
/* Result badge */
.vl-ai-badge { display: inline-block; padding: 1px 9px; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .01em; }
.vl-ai-badge-ok { background: #16a34a; color: #fff; }
.vl-ai-badge-ng { background: #dc2626; color: #fff; }
/* Correct confirm text */
.vl-ai-confirm { padding: 6px 12px 10px; font-size: .8rem; color: #166534; opacity: .9; }
/* "Điểm cần cải thiện" */
.vl-ai-improve { padding: 8px 12px 10px; background: #fffbeb; border-top: 1px solid #fde68a; }
.vl-ai-improve-ttl { font-weight: 700; font-size: .79rem; color: #b45309; margin-bottom: 6px; letter-spacing: .01em; }
.vl-ai-bullets { margin: 0; padding: 0 0 0 16px; list-style: disc; }
.vl-ai-bullets li { color: #92400e; font-size: .8rem; line-height: 1.65; margin-bottom: 3px; }
/* English phrase highlight */
.vl-ai-en-phrase { font-weight: 700; }
.vl-ai-ok .vl-ai-en-phrase, .vl-ai-confirm .vl-ai-en-phrase { color: #166534; }
.vl-ai-ng .vl-ai-en-phrase { color: #991b1b; }
.vl-ai-bullets .vl-ai-en-phrase { color: #92400e; }
.vl-ai-en-wrong { font-weight: 700; color: #b91c1c; }
.vl-ai-en-ok { font-weight: 700; color: #166534; }
.vl-ai-arr { color: #94a3b8; margin: 0 2px; }
.vl-ai-cat { font-weight: 800; color: #475569; }
.vl-ai-suggest-hl { font-weight: 800; color: #dc2626; }
.vl-ai-eq { color: #0d9488; font-weight: 800; margin: 0 3px; }
/* "Gợi ý câu cải thiện" card */
.vl-ai-suggest-card { border-top: 1px solid #fecaca; background: #fff0f0; padding: 8px 12px 10px; }
.vl-ai-suggest-ttl { font-weight: 700; font-size: .79rem; color: #dc2626; margin-bottom: 6px; }
.vl-ai-suggest-sent { font-size: .82rem; color: #1e293b; line-height: 1.55; padding: 6px 10px; background: #fff; border-radius: 6px; border: 1px solid #fca5a5; }
.vl-ai-suggest-sent em { font-style: italic; font-weight: 700; color: #166534; }
.vl-ai-suggest-or { margin-top: 6px; font-size: .78rem; color: #64748b; }
.vl-ai-suggest-or em { font-style: italic; font-weight: 600; color: #0f766e; }

/* Body */
.vl-prog-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid #f1f5f9; }
/* Tabs */
.vl-prog-panel .vl-prog-tabs {
  display: flex; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; background: #fafafa;
}
.vl-prog-panel .vl-prog-tab {
  flex: 1; padding: 11px 4px; border: none; background: none;
  font-size: .78rem; font-weight: 700; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .13s;
}
.vl-prog-panel .vl-prog-tab.active { color: #5b21b6; border-bottom-color: #7c3aed; background: #fff; }
.vl-prog-panel .vl-prog-tab:hover:not(.active) { background: #f1f5f9; }
.vl-ptab-cnt {
  display: inline-block; background: #e2e8f0; color: #475569;
  font-size: .65rem; padding: 1px 6px; border-radius: 99px; margin-left: 4px; font-weight: 700;
}
.vl-prog-panel .vl-prog-tab.active .vl-ptab-cnt { background: #ede9fe; color: #5b21b6; }
/* Word list — 2-column grid */
.vl-prog-list {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; align-content: start;
}
.vl-prog-empty { grid-column: 1/-1; padding: 32px; text-align: center; color: #94a3b8; font-size: .88rem; }
.vl-prog-word {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: 10px; cursor: pointer; transition: background .12s;
  border: 1px solid #f1f5f9; background: #fafafa;
}
.vl-prog-word:hover { background: #f5f3ff; border-color: #ddd6fe; }
.vl-prog-lv {
  flex-shrink: 0; color: #fff; font-size: .6rem; font-weight: 800;
  padding: 2px 5px; border-radius: 5px; min-width: 26px; text-align: center;
}
.vl-prog-wtext { font-size: .88rem; font-weight: 600; color: #1e293b; }
@media (max-width: 600px) {
  .vl-prog-cards { grid-template-columns: repeat(2,1fr); gap: 8px; padding: 12px 14px; }
  .vl-prog-list  { grid-template-columns: 1fr; }
  .vl-prog-hdr   { padding: 16px 16px 14px; }
  .vl-pc-num     { font-size: 1.6rem; }
}
.vl-bg-btn {
  height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1.5px solid #e2e8f0; background: rgba(255,255,255,.7);
  color: #475569; font-size: .8rem; font-weight: 600;
  cursor: pointer; flex-shrink: 0; transition: all .13s;
}
.vl-bg-btn:hover { border-color: #f9a8d4; background: #fdf2f8; color: #be185d; }
.vl-bg-panel {
  display: none; position: fixed; z-index: 10001;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 8px 32px rgba(0,0,0,.13);
  gap: 10px; flex-direction: column;
}
.vl-bg-panel.open { display: flex; }

#vlPetalLayer {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.vl-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; background: rgba(255,255,255,.88);
  border-bottom: 2px solid #e2e8f0; flex-shrink: 0; min-height: 54px;
  position: relative; z-index: 1; backdrop-filter: blur(4px);
}
.vl-back-btn {
  padding: 6px 14px; border: 1.5px solid #cbd5e1; border-radius: 8px;
  background: #fff; color: #334155; font-size: .82rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all .12s; flex-shrink: 0;
}
.vl-back-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.vl-title {
  font-weight: 800; font-size: 1.05rem; color: #0f172a; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
}
.vl-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.vl-body {
  flex: 1; overflow-y: auto; padding: 0 20px 24px;
  position: relative; z-index: 1;
}

/* Level selection grid */
.vl-levels-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px; max-width: 960px; margin: 0 auto;
}
.vl-level-card {
  background: var(--lv-bg, #f0f9ff); border: 2.5px solid var(--lv-border, #0891b2);
  border-radius: 14px; padding: 22px 20px; cursor: pointer;
  transition: transform .14s, box-shadow .14s; text-align: center;
}
.vl-level-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,.1); }
.vl-level-badge {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  background: var(--lv-badge, #bae6fd); color: var(--lv-text, #0c4a6e);
  font-size: 1.1rem; font-weight: 900; letter-spacing: .04em; margin-bottom: 10px;
}
.vl-level-name {
  font-size: 1.45rem; font-weight: 800; color: var(--lv-text, #0c4a6e);
  margin-bottom: 6px; line-height: 1.18;
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
}
.vl-level-desc {
  font-size: .8rem; color: #64748b; margin-bottom: 12px; line-height: 1.4;
}
.vl-level-count {
  font-size: .9rem; font-weight: 700; color: var(--lv-text, #0c4a6e);
}

/* IELTS / Exam row */
.vl-levels-exam-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; max-width: 960px; margin: 16px auto 0;
}
.vl-levels-exam-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.vl-level-exam { cursor: pointer; }
.vl-ielts-search-wrap {
  max-width: 600px; margin: 20px auto 0; padding: 0 14px;
}
.vl-ielts-search-inp {
  width: 100%; box-sizing: border-box;
  padding: 10px 16px; font-size: .95rem;
  border: 2px solid #a5f3fc; border-radius: 12px;
  background: #f0fdfe; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.vl-ielts-search-inp:focus {
  border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.15);
}
.vl-bg-dark .vl-ielts-search-inp {
  background: rgba(255,255,255,.07); border-color: rgba(8,145,178,.4); color: #e2e8f0;
}
.vl-ielts-sr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px; max-width: 960px; margin: 14px auto 0; padding: 0 14px;
}
.vl-ielts-sr-item {
  background: #fff; border: 1.5px solid #a5f3fc; border-radius: 12px;
  padding: 12px 13px; cursor: pointer;
  transition: border-color .13s, box-shadow .13s, transform .13s;
  display: flex; flex-direction: column; gap: 4px;
}
.vl-ielts-sr-item:hover {
  border-color: #0891b2; box-shadow: 0 4px 14px rgba(8,145,178,.15);
  transform: translateY(-2px);
}
.vl-bg-dark .vl-ielts-sr-item { background: rgba(255,255,255,.06); border-color: rgba(8,145,178,.35); }
.vl-bg-dark .vl-ielts-sr-item:hover { border-color: #0891b2; }
.vl-ielts-sr-word {
  font-size: .98rem; font-weight: 800; color: #0e7490;
}
.vl-bg-dark .vl-ielts-sr-word { color: #22d3ee; }
.vl-ielts-sr-vi {
  font-size: .78rem; color: #475569; line-height: 1.4;
}
.vl-bg-dark .vl-ielts-sr-vi { color: #94a3b8; }
.vl-ielts-sr-topic {
  font-size: .7rem; font-weight: 700; color: #0891b2;
  margin-top: 4px; padding-top: 5px;
  border-top: 1px solid #e0f7fa;
}
.vl-bg-dark .vl-ielts-sr-topic { color: #67e8f9; border-color: rgba(255,255,255,.08); }
.vl-ielts-sr-mark {
  background: #fef08a; color: #92400e; border-radius: 3px;
  padding: 0 1px; font-style: normal;
}
.vl-bg-dark .vl-ielts-sr-mark { background: rgba(250,204,21,.25); color: #fde68a; }
.vl-ielts-sr-empty, .vl-ielts-sr-more {
  text-align: center; color: #94a3b8; font-size: .85rem;
  padding: 20px; max-width: 960px; margin: 0 auto;
}
.vl-ielts-topics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; max-width: 960px; margin: 0 auto; padding: 16px 14px 0;
}
.vl-topic-card {
  background: var(--tp-bg, #cffafe); border: 2px solid var(--tp-border, #0891b2);
  border-radius: 12px; padding: 18px 14px; cursor: pointer; text-align: center;
  transition: transform .14s, box-shadow .14s;
}
.vl-topic-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.vl-topic-emoji { font-size: 2rem; margin-bottom: 8px; line-height: 1; }
.vl-topic-en { font-size: .95rem; font-weight: 800; color: var(--tp-text, #0e7490); margin-bottom: 4px; }
.vl-topic-vi { font-size: .8rem; color: #64748b; margin-bottom: 8px; }
.vl-topic-count { font-size: .8rem; font-weight: 700; color: var(--tp-text, #0e7490); }

/* IELTS topic → level picker */
.vl-ielts-levels-wrap {
  display: flex; flex-wrap: wrap; gap: 14px;
  max-width: 700px; margin: 10px auto;
}
.vl-ielts-groups-divider {
  text-align: center; font-size: .75rem; font-weight: 700;
  color: #94a3b8; letter-spacing: .08em; text-transform: uppercase;
  margin: 18px auto 0; max-width: 700px;
}
.vl-ielts-groups-wrap { margin-top: 6px; }
.vl-ielts-lv-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px 22px; border-radius: 14px;
  border: 2px solid #e2e8f0; background: #f8fafc;
  cursor: pointer; transition: transform .13s, box-shadow .13s;
  min-width: 120px; flex: 1;
}
.vl-ielts-lv-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.vl-ielts-lv-all { border-color: #0891b2; background: #cffafe; }
.vl-ielts-lv-badge {
  font-size: .95rem; font-weight: 900; padding: 4px 14px;
  border-radius: 8px; letter-spacing: .03em;
}
.vl-ielts-lv-name { font-size: .82rem; font-weight: 700; color: #374151; }
.vl-ielts-lv-count { font-size: .78rem; color: #64748b; font-weight: 600; }
.vl-ielts-add-btn {
  padding: 8px 22px; border: 2px dashed #0891b2; border-radius: 10px;
  background: transparent; color: #0891b2; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .13s;
}
.vl-ielts-add-btn:hover { background: #cffafe; }
.vl-ielts-search-wrap {
  display: flex; align-items: center; gap: 8px;
  max-width: 480px; margin: 10px auto 4px;
  background: #f0f9ff; border: 1.5px solid #bae6fd; border-radius: 10px;
  padding: 6px 10px;
}
.vl-ielts-search-icon { font-size: 1rem; flex-shrink: 0; }
.vl-ielts-search-inp {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: .9rem; color: #1e293b; min-width: 0;
}
.vl-ielts-search-inp::placeholder { color: #94a3b8; }
.vl-ielts-search-clear {
  border: none; background: none; cursor: pointer; color: #94a3b8;
  font-size: .9rem; padding: 0 2px; flex-shrink: 0;
  transition: color .1s;
}
.vl-ielts-search-clear:hover { color: #ef4444; }
.vl-ielts-add-form {
  max-width: 560px; margin: 16px auto 0; background: #f0fdf4;
  border: 1.5px solid #86efac; border-radius: 12px; padding: 16px 18px;
}
.vl-ielts-add-hint {
  font-size: .78rem; color: #374151; margin-bottom: 10px; line-height: 1.5;
}
.vl-ielts-add-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* Word list table */
.vl-test-btn {
  padding: 7px 18px; border: none; border-radius: 8px; color: #fff;
  font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: opacity .12s;
}
.vl-test-btn:hover { opacity: .85; }

.vl-lt-test-btn {
  padding: 7px 16px; border: none; border-radius: 20px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: .82rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
  transition: opacity .15s, transform .1s;
}
.vl-lt-test-btn:hover { opacity: .9; transform: translateY(-1px); }

.vl-page-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; margin-bottom: 8px;
}
.vl-page-btn {
  padding: 5px 14px; border: 1.5px solid #cbd5e1; border-radius: 7px;
  background: #fff; color: #334155; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.vl-page-btn:hover:not(:disabled) { background: #f1f5f9; }
.vl-page-btn:disabled { opacity: .4; cursor: default; }
.vl-page-info { font-size: .82rem; color: #64748b; font-weight: 600; }

/* ── Word List redesign (card layout) ── */
.vl-list-wrap { display: flex; flex-direction: column; gap: 14px; }

.vl-list-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  padding: 10px 16px; border-radius: 0;
  border: none; border-bottom: 1.5px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 5;
  margin: 0 -20px;
}
.vl-lt-sep { width: 1px; height: 22px; background: #e2e8f0; flex-shrink: 0; }
.vl-lt-label { font-size: .72rem; font-weight: 700; color: #64748b; white-space: nowrap; }
.vl-lt-row { display: flex; align-items: center; gap: 6px; }
.vl-lt-font-sel {
  height: 30px; padding: 0 8px; border: 1.5px solid #e2e8f0; border-radius: 7px;
  font-size: .8rem; background: #fff; color: #1e293b; outline: none; cursor: pointer;
}
.vl-lt-sz-btn {
  width: 28px; height: 28px; border: 1.5px solid #e2e8f0; border-radius: 7px;
  background: #fff; color: #334155; font-size: .85rem; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s; flex-shrink: 0;
}
.vl-lt-sz-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.vl-lt-sz-label { font-size: .78rem; color: #475569; min-width: 32px; text-align: center; font-weight: 600; }
.vl-bg-swatches { display: flex; gap: 5px; align-items: center; }
.vl-bg-sw {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: all .12s; flex-shrink: 0;
}
.vl-bg-sw:hover { transform: scale(1.15); }
.vl-bg-sw.active { border-color: #0f172a; box-shadow: 0 0 0 1px #fff inset; }
.vl-bg-sw-custom { overflow: hidden; position: relative; }
.vl-bg-sw-custom input[type=color] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0;
}

.vl-col-dd-wrap { display: flex; align-items: center; gap: 6px; }
.vl-col-dd-inp { width: 32px; height: 28px; border: 1.5px solid #d1d5db; border-radius: 6px; padding: 0; cursor: pointer; background: none; }

/* Word cards */
.vl-word-cards { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto; width: 100%; }
.vl-wc-grid3 { display: grid !important; grid-template-columns: repeat(3, 1fr); max-width: 100% !important; gap: 10px !important; }
.vl-wc-grid3 .vl-wc { flex-direction: column; position: relative; }
.vl-wc-grid3 .vl-wc-accent { width: 100%; height: 5px; }
.vl-wc-grid3 .vl-wc-inner { flex-direction: column; gap: 7px; padding: 12px 15px 14px; }
.vl-wc-grid3 .vl-wc-num { display: none; }
.vl-wc-grid3 .vl-wc-ipa { font-size: .72em; }
.vl-wc-grid3 .vl-wc-examples { display: none; }
.vl-wc-grid3 .vl-wc-vi { font-size: .82em; }
.vl-wc-grid3 .vl-wc-admin-btns {
  position: absolute; top: 26px; right: 6px;
  flex-direction: column; padding: 0; gap: 2px;
}
.vl-wc-grid3 .vl-edit-btn,
.vl-wc-grid3 .vl-del-btn {
  width: 22px; height: 22px; border-radius: 6px; font-size: .72rem;
}
/* layout toggle buttons */
.vl-layout-btns { display: flex; gap: 4px; }
.vl-grid-cols-ctrl { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.vl-layout-btn {
  width: 30px; height: 26px; border-radius: 6px; border: 1.5px solid #d1d5db;
  background: transparent; color: #64748b; font-size: .9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.vl-layout-btn:hover { border-color: #94a3b8; color: #1e293b; }
.vl-layout-active { background: #1e293b !important; color: #fff !important; border-color: #1e293b !important; }
.vl-wc {
  display: flex; align-items: flex-start; gap: 0;
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--pac, #cbd5e1) 22%, #ffffff);
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
  transition: box-shadow .15s, border-color .15s, transform .1s;
  /* default = pastel tint per POS (--pbg); overridden when user picks a card color (--vl-card-bg) */
  background: var(--vl-card-bg, color-mix(in srgb, var(--pbg, #eef2f6) 42%, #ffffff));
  cursor: pointer; user-select: none;
}
.vl-wc:hover { box-shadow: 0 8px 22px rgba(15,23,42,.12); border-color: var(--pac, #cbd5e1); transform: translateY(-2px); }
.vl-wc-accent { width: 4px; flex-shrink: 0; border-radius: 0; background: var(--pac, #0ea5e9); }
.vl-wc-inner { flex: 1; padding: 9px 14px; display: flex; align-items: flex-start; gap: 10px; }
.vl-wc-num {
  min-width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72em; font-weight: 800; flex-shrink: 0;
  background: #f1f5f9; color: #64748b;
}
.vl-wc-body { flex: 1; display: flex; flex-direction: column; gap: 5px; position: relative; }
.vl-wc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vl-wc-star-btn {
  position: absolute; top: 0; right: 0;
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: #cbd5e1;
  transition: color .15s, transform .12s;
  z-index: 1;
}
.vl-wc-star-btn:hover { color: #f59e0b; transform: scale(1.15); }
.vl-wc-star-btn.vl-wc-star-on { color: #f59e0b; }
.vl-wc-known-btn {
  position: absolute; top: 0; right: 26px;
  background: none; border: none; padding: 2px 3px; cursor: pointer;
  font-size: .8rem; line-height: 1; color: #cbd5e1;
  transition: color .15s; z-index: 1; font-weight: 700;
}
.vl-wc-known-btn:hover { color: #64748b; }
.vl-wc-known-btn.vl-known-k { color: #16a34a; }
.vl-wc-known-btn.vl-known-u { color: #dc2626; }
.vl-star-test-btn {
  background: #fef3c7 !important; color: #92400e !important; border: 1.5px solid #fcd34d !important;
}
.vl-star-test-btn:hover { background: #fde68a !important; }
.vl-unstar-all-btn { background: #fef2f2 !important; color: #b91c1c !important; border: 1.5px solid #fca5a5 !important; }
.vl-unstar-all-btn:hover { background: #fee2e2 !important; }
.vl-sa-test-btn {
  background: #2563eb !important; color: #fff !important; border: 1.5px solid #1d4ed8 !important;
}
.vl-sa-test-btn:hover { background: #1d4ed8 !important; }

/* ── Syn/Ant Quiz ─────────────────────────────────────────────────────────── */
.vl-sa-quiz-wrap { max-width: 680px; margin: 0 auto; padding: 16px 4px 48px; font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif; }
.vl-sa-q-card {
  background: #fff; border-radius: 20px; box-shadow: 0 2px 20px rgba(0,0,0,.09);
  padding: 28px 28px 22px; margin-top: 16px;
}
.vl-sa-q-prompt { font-size: 1rem; font-weight: 700; color: #6b7280; margin-bottom: 14px; font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif; }
.vl-sa-rel-syn { color: #0c6a86; font-weight: 900; font-size: 1.25rem;
  background: #fde047; padding: 2px 10px; border-radius: 6px; display: inline-block; }
.vl-sa-rel-ant { color: #be1739; font-weight: 900; font-size: 1.25rem;
  background: #fde047; padding: 2px 10px; border-radius: 6px; display: inline-block; }
.vl-sa-q-word  { font-size: 2.1rem; font-weight: 800; color: #1e293b; margin-bottom: 4px; font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.vl-sa-q-pos   { font-size: .88rem; font-weight: 600; color: #9ca3af; }
.vl-sa-q-vi    { font-size: 1.05rem; color: #6b7280; margin-bottom: 22px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; }
.vl-sa-mc-opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
}
.vl-sa-mc-btn {
  padding: 16px 14px; border-radius: 12px; border: 2px solid #e5e7eb;
  background: #f9fafb; font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; font-weight: 700;
  color: #1e293b; cursor: pointer; text-align: left; transition: all .12s;
}
.vl-sa-mc-btn:hover:not(:disabled) { border-color: #0891b2; background: #ecfeff; }
.vl-sa-mc-btn.vl-sa-mc-ok { border-color: #16a34a !important; background: #dcfce7 !important; color: #15803d; }
.vl-sa-mc-btn.vl-sa-mc-ng { border-color: #dc2626 !important; background: #fee2e2 !important; color: #b91c1c; }
.vl-sa-fb { margin-top: 10px; font-size: .85rem; line-height: 1.6; }
.vl-sa-fb-ok { color: #16a34a; font-weight: 700; }
.vl-sa-fb-ng { color: #dc2626; font-weight: 700; }
.vl-sa-fb-vi { color: #6b7280; }
.vl-sa-fb-lists { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.vl-sa-fb-syn {
  background: #ecfeff; border: 1.5px solid #a5f3fc; border-radius: 12px;
  padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  color: #0e7490; font-size: .82rem;
}
.vl-sa-fb-ant {
  background: #fff1f2; border: 1.5px solid #fda4af; border-radius: 12px;
  padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  color: #be123c; font-size: .82rem;
}
.vl-sa-fb-label { font-weight: 800; font-size: .88rem; flex-shrink: 0; margin-right: 4px; }
.vl-sa-fb-word {
  cursor: pointer; display: inline-flex; align-items: baseline; gap: 3px; flex-wrap: wrap;
  background: rgba(255,255,255,.8); border-radius: 7px; padding: 3px 9px;
}
.vl-sa-fb-word:hover { opacity: .75; }
.vl-sa-fb-pos { font-style: italic; font-size: .75em; color: #6b7280; }
.vl-sa-fb-vi-word { color: #374151; font-size: .88em; }
.vl-sa-fb-examples { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.vl-sa-fb-ex { font-size: .82rem; color: #4b5563; line-height: 1.5; }
.vl-sa-fb-ex-word { font-weight: 800; color: #1e293b; margin-right: 2px; }
.vl-sa-fb-ex em { font-style: italic; color: #374151; }
.vl-sa-ex-hl { background: #fde047; color: #1e293b; border-radius: 3px; padding: 0 2px; font-style: normal; font-weight: 700; }
.vl-sa-fb-ex-vi { font-size: .78rem; color: #6b7280; margin-top: 2px; padding-left: 2px; font-style: normal; }
.vl-overlay.vl-dark .vl-sa-fb-ex { color: #94a3b8; }
.vl-overlay.vl-dark .vl-sa-fb-ex-word { color: #fde047; }
.vl-overlay.vl-dark .vl-sa-fb-ex em { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-sa-ex-hl { background: #ca8a04; color: #fff; }
.vl-overlay.vl-dark .vl-sa-fb-ex-vi { color: #64748b; }
.vl-sa-sort-res { cursor: pointer; }
.vl-sa-sort-res:hover { opacity: .8; }
.vl-sa-next-btn {
  display: block; margin-top: 12px; padding: 10px 28px; border-radius: 10px;
  border: none; background: #0891b2; color: #fff; font-family: inherit;
  font-size: .88rem; font-weight: 700; cursor: pointer;
}
.vl-sa-next-btn:hover { background: #0e7490; }
/* Sort question */
.vl-sa-sort-hint { font-size: .75rem; color: #9ca3af; margin-bottom: 10px; }
.vl-sa-sort-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vl-sa-sort-chip {
  padding: 8px 16px; border-radius: 8px; border: 2px solid #e5e7eb;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.vl-sa-sort-none { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.vl-sa-sort-syn  { background: #dcfce7; color: #15803d; border-color: #86efac; }
.vl-sa-sort-ant  { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.vl-sa-sort-buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.vl-sa-sort-bucket { border-radius: 10px; border: 2px dashed #e5e7eb; padding: 10px 12px; min-height: 52px; }
.vl-sa-bucket-syn { border-color: #86efac; background: #f0fdf4; }
.vl-sa-bucket-ant { border-color: #fca5a5; background: #fff5f5; }
.vl-sa-bucket-lbl { font-size: .72rem; font-weight: 800; margin-bottom: 6px; }
.vl-sa-bucket-syn .vl-sa-bucket-lbl { color: #16a34a; }
.vl-sa-bucket-ant .vl-sa-bucket-lbl { color: #dc2626; }
.vl-sa-bucket-words { display: flex; flex-wrap: wrap; gap: 5px; }
.vl-sa-bucket-chip { font-size: .8rem; font-weight: 700; color: #374151; padding: 3px 8px; background: #fff; border-radius: 6px; border: 1px solid #e5e7eb; }
.vl-sa-check-btn {
  display: block; margin: 8px 0 4px; padding: 10px 28px; border-radius: 10px;
  border: none; background: #6366f1; color: #fff; font-family: inherit;
  font-size: .88rem; font-weight: 700; cursor: pointer;
}
.vl-sa-check-btn:hover { background: #4f46e5; }
.vl-sa-sort-result { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.vl-sa-sort-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vl-sa-sort-row-lbl { font-size: .75rem; font-weight: 800; flex-shrink: 0; padding: 2px 8px; border-radius: 5px; }
.vl-sa-sort-row-lbl.syn { background: #ecfeff; color: #0e7490; border: 1.5px solid #a5f3fc; }
.vl-sa-sort-row-lbl.ant { background: #fff1f2; color: #be123c; border: 1.5px solid #fda4af; }
.vl-sa-sort-res { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; cursor: pointer; }
.vl-sa-sort-res.ok.syn { background: #ecfeff; color: #0e7490; border: 1.5px solid #a5f3fc; }
.vl-sa-sort-res.ok.ant { background: #fff1f2; color: #be123c; border: 1.5px solid #fda4af; }
.vl-sa-sort-res.ng { background: #fee2e2; color: #b91c1c; border: 1.5px solid #fca5a5; }
/* Result screen */
.vl-sa-result-card { text-align: center; padding: 40px 20px; background: #fff; border-radius: 18px; box-shadow: 0 2px 16px rgba(0,0,0,.08); margin-top: 20px; }
.vl-sa-result-icon { font-size: 3rem; margin-bottom: 8px; }
.vl-sa-result-score { font-size: 2.5rem; font-weight: 900; margin-bottom: 6px; }
.vl-sa-result-detail { font-size: .88rem; color: #6b7280; margin-bottom: 24px; }
.vl-sa-result-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vl-sa-retry-btn, .vl-sa-back-btn {
  padding: 10px 28px; border-radius: 10px; border: none;
  font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.vl-sa-retry-btn { color: #fff; }
.vl-sa-retry-btn:hover { opacity: .88; }
.vl-sa-back-btn { background: #f3f4f6; color: #374151; }
.vl-sa-back-btn:hover { background: #e5e7eb; }
.vl-wc-speak {
  width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer;
  background: #e0f2fe; color: #0369a1; font-size: .92em; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.vl-wc-speak:hover { background: #bae6fd; transform: scale(1.1); }
.vl-wc-word {
  font-weight: 800; color: var(--ptx, #0c4a6e); font-size: 1.12em; letter-spacing: -.01em;
}
.vl-wc-pos {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .7em; font-weight: 800; white-space: nowrap;
}
/* POS badge palette (mockup: verb=green, noun=pink, adj=purple, adv=orange) */
.vl-pos-n    { background: #ffe4e6; color: #be123c; }
.vl-pos-v    { background: #d1fae5; color: #047857; }
.vl-pos-adj  { background: #ede9fe; color: #6d28d9; }
.vl-pos-adv  { background: #fef3c7; color: #b45309; }
.vl-pos-prep { background: #e0f2fe; color: #0369a1; }
.vl-pos-conj { background: #fce7f3; color: #9d174d; }
.vl-pos-art  { background: #ccfbf1; color: #0f766e; }
.vl-pos-other { background: #e0e7ff; color: #4338ca; }

/* Per-POS card accent vars: --pac (accent), --ptx (text), --pbg (tint) */
.vl-wcpos-v    { --pac:#10b981; --ptx:#047857; --pbg:#d1fae5; }
.vl-wcpos-n    { --pac:#f43f5e; --ptx:#be123c; --pbg:#ffe4e6; }
.vl-wcpos-adj  { --pac:#8b5cf6; --ptx:#6d28d9; --pbg:#ede9fe; }
.vl-wcpos-adv  { --pac:#f59e0b; --ptx:#b45309; --pbg:#fef3c7; }
.vl-wcpos-prep { --pac:#0ea5e9; --ptx:#0369a1; --pbg:#e0f2fe; }
.vl-wcpos-conj { --pac:#ec4899; --ptx:#9d174d; --pbg:#fce7f3; }
.vl-wcpos-art  { --pac:#14b8a6; --ptx:#0f766e; --pbg:#ccfbf1; }
.vl-wcpos-other{ --pac:#6366f1; --ptx:#4338ca; --pbg:#e0e7ff; }
.vl-wc-ipa { display: flex; gap: 14px; flex-wrap: wrap; }
.vl-wc-uk { color: #7c3aed; font-size: .8em; }
.vl-wc-us { color: #0891b2; font-size: .8em; }
.vl-ipa-sp-btn { background: none; border: none; padding: 0 3px 0 0; cursor: pointer; font-size: .8em; opacity: .6; vertical-align: middle; line-height: 1; }
.vl-ipa-sp-btn:hover { opacity: 1; }
.vl-wc-vi {
  color: var(--ptx, #1e293b); font-weight: 700; font-size: .92em; line-height: 1.4;
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}
/* Tên đường phố: nghĩa tiếng Việt màu xanh lá */
.vl-mode-streets .vl-wc-vi { color: #15803d; }
.vl-mode-streets.vl-bg-dark .vl-wc-vi,
.vl-mode-streets .vl-card-dark .vl-wc-vi { color: #4ade80; }
.vl-wc-def { color: #64748b; font-size: .76em; line-height: 1.4; font-style: italic; }
.vl-wc-colloc { font-size: .76em; line-height: 1.6; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.vl-wc-colloc-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--pbg, #e0e7ff); border-radius: 999px; padding: 3px 10px; line-height: 1.4;
  cursor: pointer; transition: filter .12s, transform .1s;
}
.vl-wc-colloc-chip:hover { filter: brightness(.96); transform: translateY(-1px); }
.vl-wc-colloc-chip:active { transform: translateY(0); }
.vl-wc-synant { margin-top: 1px; display: flex; flex-direction: column; gap: 2px; }
.vl-sa-details { border: none; outline: none; margin: 0; }
.vl-sa-details summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.vl-sa-details summary::-webkit-details-marker { display: none; }
.vl-sa-details[open] summary::after { content: ' ▲'; font-size: .6rem; }
.vl-sa-details:not([open]) summary::after { content: ' ▼'; font-size: .6rem; }
.vl-sa-label { font-size: .68rem; font-weight: 800; border-radius: 4px; padding: 2px 7px; user-select: none; }
.vl-sa-syn { background: #dbeafe; color: #1d4ed8; }
.vl-sa-ant { background: #fee2e2; color: #b91c1c; }
.vl-sa-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.vl-sa-chip { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; }
.vl-sa-chip-syn { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.vl-sa-chip-ant { background: #fff5f5; border: 1px solid #fecaca; color: #b91c1c; }
.vl-sa-chip-wf { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.vl-sa-wf { background: #dcfce7; color: #166534; }
.vl-sa-vi { color: #64748b; font-weight: 400; font-size: .92em; }
.vl-sa-lvl-badge { font-size: .58rem; font-weight: 800; padding: 1px 4px; border-radius: 3px; vertical-align: middle; margin-left: 3px; letter-spacing: .02em; }
.vl-wf-form { border-color: #bbf7d0; }
.vl-wf-btn { background: #f0fdf4; color: #166534; border-color: #86efac; }
.vl-wf-btn:hover { background: #dcfce7; }
.vl-all-form { border-color: #c4b5fd; }
.vl-all-btn { background: #faf5ff; color: #6d28d9; border-color: #c4b5fd; }
.vl-all-btn:hover { background: #ede9fe; }
.vl-synant-form { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.vl-synant-form-title { font-size: .9rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.vl-synant-hint { font-size: .78rem; color: #64748b; margin-bottom: 8px; }
.vl-synant-example { font-size: .72rem; background: #1e293b; color: #94a3b8; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; white-space: pre-wrap; font-family: monospace; }
.vl-colloc-en { color: var(--ptx, #15803d); font-weight: 700; }
.vl-colloc-vi { color: #64748b; margin-left: 0; opacity: .85; }
.vl-colloc-sep { color: #94a3b8; margin: 0 6px; font-weight: 900; font-size: 1.1em; }
.vl-bg-dark .vl-colloc-en { color: var(--ptx, #4ade80); }
.vl-bg-dark .vl-colloc-vi { color: #e2e8f0; opacity: 1; }
.vl-card-dark .vl-colloc-en { color: var(--ptx, #4ade80); }
.vl-card-dark .vl-colloc-vi { color: #e2e8f0; opacity: 1; }
.vl-card-dark .vl-wc-colloc-chip, .vl-bg-dark .vl-wc-colloc-chip { background: var(--pbg, rgba(148,163,184,.14)); }

/* Dark-mode POS vars: lighter text + translucent tint so accents stay vivid */
.vl-bg-dark .vl-wcpos-v,   .vl-card-dark .vl-wcpos-v,   .vl-overlay.vl-dark .vl-wcpos-v   { --ptx:#34d399; --pbg:rgba(16,185,129,.16); }
.vl-bg-dark .vl-wcpos-n,   .vl-card-dark .vl-wcpos-n,   .vl-overlay.vl-dark .vl-wcpos-n   { --ptx:#fb7185; --pbg:rgba(244,63,94,.16); }
.vl-bg-dark .vl-wcpos-adj, .vl-card-dark .vl-wcpos-adj, .vl-overlay.vl-dark .vl-wcpos-adj { --ptx:#a78bfa; --pbg:rgba(139,92,246,.16); }
.vl-bg-dark .vl-wcpos-adv, .vl-card-dark .vl-wcpos-adv, .vl-overlay.vl-dark .vl-wcpos-adv { --ptx:#fbbf24; --pbg:rgba(245,158,11,.16); }
.vl-bg-dark .vl-wcpos-prep,.vl-card-dark .vl-wcpos-prep,.vl-overlay.vl-dark .vl-wcpos-prep{ --ptx:#38bdf8; --pbg:rgba(14,165,233,.16); }
.vl-bg-dark .vl-wcpos-conj,.vl-card-dark .vl-wcpos-conj,.vl-overlay.vl-dark .vl-wcpos-conj{ --ptx:#f472b6; --pbg:rgba(236,72,153,.16); }
.vl-bg-dark .vl-wcpos-art, .vl-card-dark .vl-wcpos-art, .vl-overlay.vl-dark .vl-wcpos-art { --ptx:#2dd4bf; --pbg:rgba(20,184,166,.16); }
.vl-bg-dark .vl-wcpos-other,.vl-card-dark .vl-wcpos-other,.vl-overlay.vl-dark .vl-wcpos-other{ --ptx:#a5b4fc; --pbg:rgba(99,102,241,.18); }
.vl-edit-full { flex: 1 1 100% !important; }
.vl-wc-del {
  flex-shrink: 0; display: flex; align-items: center; padding: 0 10px;
}
.vl-wc-custom-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 4px; background: #fef9c3; color: #a16207;
  font-size: .65rem; font-weight: 700; vertical-align: middle;
}
.vl-wc-cefr-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 4px; font-size: .65rem; font-weight: 800;
  vertical-align: middle; letter-spacing: .02em;
}

/* Background themes applied to vlBody */
.vl-bg-white  { background: #ffffff !important; }
.vl-bg-cream  { background: #fffbf0 !important; }
.vl-bg-mint   { background: #f0fdf4 !important; }
.vl-bg-lavender { background: #f5f3ff !important; }
.vl-bg-sky    { background: #f0f9ff !important; }
.vl-bg-dark   { background: #0f172a !important; }

.vl-bg-dark .vl-list-toolbar { background: rgba(30,41,59,.92); border-color: #334155; }
.vl-bg-dark .vl-lt-label { color: #94a3b8; }
.vl-bg-dark .vl-lt-sz-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-bg-dark .vl-lt-sz-btn:hover { background: #334155; }
.vl-bg-dark .vl-lt-sz-label { color: #94a3b8; }
.vl-bg-dark .vl-lt-font-sel { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-bg-dark .vl-lt-sep { background: #334155; }
.vl-bg-dark .vl-bg-sw.active { border-color: #e2e8f0; }
.vl-bg-dark .vl-wc { background: #1e293b; border-color: #334155; }
.vl-bg-dark .vl-wc:hover { border-color: #475569; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.vl-bg-dark .vl-wc-num { background: #0f172a; color: #cbd5e1; }
.vl-bg-dark .vl-wc-word { color: var(--ptx, #e2e8f0); }
.vl-bg-dark .vl-wc-vi { color: var(--ptx, #cbd5e1); }
.vl-bg-dark .vl-wc-def { color: #e2e8f0; }
.vl-bg-dark .vl-wc-uk { color: #a78bfa; }
.vl-bg-dark .vl-wc-us { color: #38bdf8; }
.vl-bg-dark .vl-excl-panel { background: #1e293b; border-color: #7f1d1d; }
.vl-bg-dark .vl-add-form { background: #0f2a1a; border-color: #166534; }
.vl-bg-dark .vl-add-inp { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* Dark card background — text auto-adapts */
.vl-card-dark .vl-wc { border-color: #334155; }
.vl-card-dark .vl-wc:hover { border-color: #475569; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.vl-card-dark .vl-wc-word { color: var(--ptx, #e2e8f0); }
.vl-card-dark .vl-wc-vi { color: var(--ptx, #cbd5e1); }
.vl-card-dark .vl-wc-def { color: #e2e8f0; }
.vl-card-dark .vl-wc-uk { color: #a78bfa; }
.vl-card-dark .vl-wc-us { color: #38bdf8; }
.vl-card-dark .vl-wc-speak { background: #1e3a4a; color: #7dd3fc; }
.vl-card-dark .vl-wc-speak:hover { background: #164e63; }
.vl-card-dark .vl-wc-ex-item { background: var(--pbg, rgba(56,189,248,.08)); border-left-color: var(--pac, #38bdf8); }
.vl-card-dark .vl-ex-text { color: #e2e8f0; }
.vl-card-dark .vl-ex-vi { color: #cbd5e1; }

/* Compat stubs (old classes still used in admin area) */
.vl-word-table { width: 100%; }
.vl-word-header { display: none; }

/* ── Word examples ── */
.vl-wc-ex-wrap { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.vl-wc-ex-item {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  background: #fff; border: 1px solid #f1f5f9; border-left: 3px solid var(--pac, #0ea5e9);
}
.vl-bg-dark .vl-wc-ex-item { background: var(--pbg, rgba(56,189,248,.08)); border-left-color: var(--pac, #38bdf8); }
.vl-ex-sp-btn {
  width: 24px; height: 24px; border: none; border-radius: 7px; flex-shrink: 0;
  background: var(--pbg, #e0f2fe); color: var(--ptx, #0369a1); font-size: .78em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.vl-ex-sp-btn:hover { filter: brightness(.95); transform: scale(1.1); }
.vl-bg-dark .vl-ex-sp-btn { background: #1e3a5f; color: #38bdf8; }
.vl-ex-text { font-size: .72em; color: #334155; line-height: 1.5; flex: 1; font-style: italic; }
.vl-bg-dark .vl-ex-text { color: #e2e8f0; }
.vl-ex-hl { color: #dc2626; font-weight: 800; font-style: italic; }
.vl-ex-del-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: #cbd5e1; font-size: 1rem; line-height: 1; padding: 0 2px;
  opacity: 0; transition: opacity .15s, color .12s; align-self: flex-start; margin-top: 2px;
}
.vl-wc-ex-item:hover .vl-ex-del-btn { opacity: 1; }
.vl-ex-del-btn:hover { color: #ef4444; }
.vl-bg-dark .vl-ex-hl { color: #f87171; }

.vl-gen-ex-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 4px 11px; border-radius: 7px;
  border: 1.5px dashed #0891b2; background: transparent; color: #0891b2;
  font-size: .75rem; font-weight: 700; cursor: pointer; transition: all .13s;
}
.vl-gen-ex-btn:hover { background: #ecfeff; }
.vl-gen-ex-btn:disabled { opacity: .5; cursor: default; }
.vl-gen-ex-redo {
  border-style: solid; border-color: #94a3b8; color: #64748b;
  padding: 3px 9px; font-size: .72rem;
}
.vl-gen-ex-redo:hover { background: #f1f5f9; }
.vl-ex-loading {
  font-size: .78em; color: #94a3b8; display: flex; align-items: center; gap: 3px;
  margin-top: 4px; font-style: italic;
}
.vl-ex-dot {
  display: inline-block; font-size: .6em; animation: vlDotPulse 1.2s ease-in-out infinite;
}
.vl-bg-dark .vl-ex-loading { color: #64748b; }
@keyframes vlDotPulse {
  0%, 80%, 100% { opacity: .2; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.1); }
}
.vl-ex-more-btn {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  background: none; border: 1px dashed #cbd5e1; border-radius: 10px;
  font-size: .72em; color: #94a3b8; cursor: pointer; transition: all .15s;
}
.vl-ex-more-btn:hover { border-color: #0891b2; color: #0891b2; background: #f0f9ff; }
.vl-bg-dark .vl-ex-more-btn { border-color: #334155; color: #475569; }
.vl-bg-dark .vl-ex-more-btn:hover { border-color: #0891b2; color: #38bdf8; background: #0c1a2e; }
.vl-ex-none { font-size: .78em; color: #cbd5e1; font-style: italic; margin-top: 4px; }
.vl-bg-dark .vl-ex-none { color: #475569; }
.vl-ex-exhausted {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  font-size: .72em; color: #cbd5e1; font-style: italic;
}
.vl-bg-dark .vl-ex-exhausted { color: #334155; }
.vl-ex-item-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vl-vi-switch {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; margin-left: 6px; user-select: none;
}
.vl-vi-sw-lbl {
  font-size: .7rem; font-weight: 800; color: #94a3b8;
  letter-spacing: .04em; transition: color .2s;
}
.vl-vi-sw-track {
  width: 30px; height: 17px; border-radius: 9px; background: #e2e8f0;
  position: relative; transition: background .2s; flex-shrink: 0;
}
.vl-vi-sw-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  position: absolute; top: 2px; left: 2px;
  transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.vl-vi-visible .vl-vi-switch:not(.vl-sanf-switch) .vl-vi-sw-track { background: #0891b2; }
.vl-vi-visible .vl-vi-switch:not(.vl-sanf-switch) .vl-vi-sw-thumb { left: 15px; }
.vl-vi-visible .vl-vi-switch:not(.vl-sanf-switch) .vl-vi-sw-lbl { color: #0891b2; }
.vl-vi-status { font-size: .72rem; color: #0891b2; margin-left: 8px; font-style: italic; }
.vl-bg-dark .vl-vi-sw-track { background: #334155; }
.vl-bg-dark .vl-vi-visible .vl-vi-switch:not(.vl-sanf-switch) .vl-vi-sw-track { background: #0e7490; }
.vl-sanf-switch { margin-left: 8px; }
.vl-sanf-on .vl-sanf-switch .vl-vi-sw-track { background: #7c3aed; }
.vl-sanf-on .vl-sanf-switch .vl-vi-sw-thumb { left: 15px; }
.vl-sanf-on .vl-sanf-switch .vl-vi-sw-lbl { color: #7c3aed; }
.vl-sanf-hidden .vl-wc-synant { display: none; }
.vl-ex-vi {
  display: none; font-size: .70em; color: #64748b; padding: 2px 0 1px 0;
  font-style: normal; line-height: 1.4;
}
.vl-vi-visible .vl-ex-vi { display: block; }
.vl-bg-dark .vl-ex-vi { color: #cbd5e1; }
.vl-edit-ex-fields { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.vl-edit-ex-vi-inp {
  width: 100%; padding: 5px 8px; border: 1.5px solid #e2e8f0; border-radius: 6px;
  font-size: .78rem; color: #64748b; outline: none; box-sizing: border-box;
}
.vl-edit-ex-vi-inp:focus { border-color: #0891b2; }

/* Test — example sentence type */
.vl-q-example-sent {
  font-size: 1.08rem; color: #1e293b; line-height: 1.65;
  padding: 14px 18px; background: #f8fafc; border-radius: 12px;
  border: 1.5px solid #e2e8f0; font-style: italic; text-align: center;
}
.vl-ex-blank {
  display: inline; padding: 0 4px;
  color: #0891b2; font-weight: 800; font-style: normal; letter-spacing: .05em;
  white-space: nowrap;
}
.vl-q-ex-ctrl {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}
.vl-ex-listen-btn {
  padding: 7px 18px; border: 2px solid #0891b2; border-radius: 10px;
  background: #ecfeff; color: #0e7490; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.vl-ex-listen-btn:hover { background: #cffafe; }
.vl-ex-voice-sel {
  height: 32px; padding: 0 8px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: .8rem; background: #fff; color: #1e293b; outline: none; cursor: pointer;
}

/* Review card examples */
.vl-review-exs {
  margin-top: 8px; display: flex; flex-direction: column; gap: 5px;
  padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08);
}
.vl-review-exs-toolbar { display: flex; align-items: center; margin-bottom: 2px; }
.vl-review-exvi-btn {
  font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  border: 1.5px solid #0891b2; background: transparent; color: #0891b2;
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.vl-review-exvi-btn:hover { background: #e0f2fe; }
.vl-review-exs.vl-vi-visible .vl-review-exvi-btn { background: #0891b2; color: #fff; }
.vl-review-ex-row {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.03);
}

/* Score badge */
.vl-score-badge {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  font-size: .82rem; font-weight: 800;
}

/* Test UI */
.vl-test-wrap {
  max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
}
.vl-progress-bar {
  height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden;
}
.vl-progress-fill { height: 100%; border-radius: 999px; transition: width .3s; }

.vl-q-label {
  font-size: .82rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
}
.vl-q-word {
  font-size: 2rem; font-weight: 900; color: #0f172a; text-align: center; padding: 8px 0;
}
.vl-q-ipa {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.vl-ipa-uk { color: #7c3aed; font-size: .9rem; }
.vl-ipa-us { color: #0891b2; font-size: .9rem; }
.vl-q-def {
  font-size: 1rem; color: #1e293b; line-height: 1.55;
  padding: 14px 16px; background: #f8fafc; border-radius: 10px;
  border: 1.5px solid #e2e8f0;
}
.vl-q-hint {
  font-size: .8rem; color: #94a3b8;
}
.vl-listen-hint { color: #0891b2; font-style: italic; }

.vl-mc-opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.vl-mc-opt {
  padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 10px;
  background: #fff; color: #1e293b; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-align: left; transition: all .12s; line-height: 1.4;
}
.vl-mc-opt:hover:not(:disabled) { border-color: #94a3b8; background: #f8fafc; }
.vl-mc-opt:disabled { cursor: default; }
.vl-opt-correct { border-color: #16a34a !important; background: #f0fdf4 !important; color: #15803d !important; }
.vl-opt-wrong { border-color: #dc2626 !important; background: #fff1f2 !important; color: #dc2626 !important; }

.vl-drag-opts { grid-template-columns: 1fr 1fr; }
.vl-drag-opt { font-family: monospace; font-size: .95rem; }

.vl-listen-btn {
  padding: 16px 28px; border: 2.5px solid #0891b2; border-radius: 12px;
  background: #ecfeff; color: #0e7490; font-size: 1.1rem; font-weight: 700;
  cursor: pointer; width: 100%; transition: all .12s;
}
.vl-listen-btn:hover { background: #cffafe; }

.vl-fill-row { display: flex; gap: 8px; align-items: stretch; }
.vl-fill-inp {
  flex: 1; height: 44px; padding: 0 14px; border: 2px solid #e2e8f0;
  border-radius: 10px; font-size: .95rem; outline: none; font-family: inherit;
  transition: border-color .15s;
}
.vl-fill-inp:focus { border-color: #0891b2; }
.vl-inp-correct { border-color: #16a34a !important; background: #f0fdf4; }
.vl-inp-wrong { border-color: #dc2626 !important; background: #fff1f2; }
.vl-fill-btn {
  padding: 0 20px; border: none; border-radius: 10px;
  background: #0891b2; color: #fff; font-size: .88rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: opacity .12s;
}
.vl-fill-btn:hover { opacity: .85; }
.vl-fill-feedback {
  padding: 10px 14px; border-radius: 9px; font-size: .9rem; font-weight: 600;
}
.vl-fb-correct { background: #f0fdf4; color: #16a34a; border: 1.5px solid #86efac; }
.vl-fb-wrong { background: #fff1f2; color: #dc2626; border: 1.5px solid #fca5a5; }

.vl-test-next-row {
  display: flex; justify-content: flex-end; margin-top: 4px;
}
.vl-next-btn {
  padding: 10px 24px; border: none; border-radius: 10px; color: #fff;
  font-size: .9rem; font-weight: 700; cursor: pointer; transition: opacity .12s;
}
.vl-next-btn:hover { opacity: .85; }

/* Result screen */
.vl-result-wrap {
  max-width: 480px; margin: 40px auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.vl-result-score {
  font-size: 3.5rem; font-weight: 900; line-height: 1;
}
.vl-result-pct {
  font-size: 1.6rem; font-weight: 800;
}
.vl-result-msg {
  font-size: 1.1rem; color: #64748b; font-weight: 600;
}
.vl-result-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.vl-result-btn {
  padding: 11px 26px; border: none; border-radius: 10px; color: #fff;
  font-size: .9rem; font-weight: 700; cursor: pointer; transition: opacity .12s;
}
.vl-result-btn:hover { opacity: .85; }
.vl-result-btn-sec {
  background: #475569; color: #fff;
}

/* ── Card edit button group ── */
.vl-wc-admin-btns {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 4px;
  align-items: center; padding: 10px 8px 10px 4px;
}
.vl-edit-btn {
  width: 26px; height: 26px; border: none; border-radius: 7px;
  background: transparent; font-size: .82rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.vl-edit-btn:hover { background: #fef9c3; }

/* Card in edit mode */
.vl-wc-editing { cursor: default !important; border-color: #0891b2 !important; }
.vl-wc-highlight { animation: vlWcGlow 1.8s ease; position: relative; z-index: 3; border-radius: 14px; }
@keyframes vlWcGlow {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  12%  { box-shadow: 0 0 0 4px #f59e0b, 0 0 28px 9px rgba(245,158,11,.7); }
  40%  { box-shadow: 0 0 0 3px #fbbf24, 0 0 14px 4px rgba(251,191,36,.4); }
  68%  { box-shadow: 0 0 0 4px #f59e0b, 0 0 24px 7px rgba(245,158,11,.6); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.vl-wc-editing:hover { transform: none !important; }

/* Edit form inside card */
.vl-edit-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.vl-edit-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vl-edit-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 100px; }
.vl-edit-field label { font-size: .68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.vl-edit-wide { flex: 2; min-width: 180px; }
.vl-edit-inp {
  height: 32px; padding: 0 9px; border: 1.5px solid #e2e8f0; border-radius: 7px;
  font-size: .82rem; outline: none; font-family: inherit; background: #fff;
  transition: border-color .15s; color: #1e293b;
}
.vl-edit-inp:focus { border-color: #0891b2; }
.vl-edit-word-inp { font-size: 1rem; font-weight: 700; color: #0f172a; height: 36px; }

/* Examples edit section */
.vl-edit-exs { display: flex; flex-direction: column; gap: 6px; }
.vl-edit-ex-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em;
}
.vl-edit-add-ex-btn {
  padding: 2px 10px; border: 1.5px solid #0891b2; border-radius: 6px;
  background: transparent; color: #0891b2; font-size: .72rem; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.vl-edit-add-ex-btn:hover { background: #ecfeff; }
.vl-edit-ex-row { display: flex; gap: 6px; align-items: center; }
.vl-edit-ex-inp {
  flex: 1; height: 32px; padding: 0 10px; border: 1.5px solid #e2e8f0; border-radius: 7px;
  font-size: .82rem; font-style: italic; outline: none; font-family: inherit;
  background: #f8fafc; color: #334155; transition: border-color .15s;
}
.vl-edit-ex-inp:focus { border-color: #0891b2; background: #fff; }
.vl-edit-del-ex-btn {
  width: 26px; height: 26px; border: none; border-radius: 6px; flex-shrink: 0;
  background: transparent; color: #94a3b8; font-size: .78rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.vl-edit-del-ex-btn:hover { background: #fee2e2; color: #dc2626; }

/* Edit form action buttons */
.vl-edit-actions { display: flex; gap: 8px; align-items: center; padding-top: 4px; }
.vl-edit-save-btn {
  padding: 6px 20px; border: none; border-radius: 7px;
  background: #0891b2; color: #fff; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .12s;
}
.vl-edit-save-btn:hover { opacity: .85; }
.vl-edit-cancel-btn {
  padding: 6px 14px; border: 1.5px solid #e2e8f0; border-radius: 7px;
  background: #fff; color: #64748b; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.vl-edit-cancel-btn:hover { background: #f1f5f9; }

/* Dark mode overrides for edit form */
.vl-bg-dark .vl-edit-inp { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.vl-bg-dark .vl-edit-inp:focus { border-color: #38bdf8; }
.vl-bg-dark .vl-edit-ex-inp { background: #0f172a; border-color: #334155; color: #cbd5e1; }
.vl-bg-dark .vl-edit-ex-inp:focus { border-color: #38bdf8; background: #0f172a; }
.vl-bg-dark .vl-edit-cancel-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.vl-bg-dark .vl-edit-field label, .vl-bg-dark .vl-edit-ex-hdr { color: #64748b; }

/* Admin controls */
.vl-admin-btn {
  padding: 6px 13px; border-radius: 7px; border: 1.5px solid #cbd5e1;
  background: #f8fafc; color: #334155; font-size: .78rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all .12s;
}
.vl-admin-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.vl-add-btn { border-color: #16a34a; color: #15803d; }
.vl-add-btn:hover { background: #f0fdf4; }
.vl-add-toggle-btn {
  padding: 5px 12px; font-size: .8rem; font-weight: 700; border-radius: 7px;
  border: 1.5px solid #16a34a; background: #fff; color: #15803d; cursor: pointer;
  transition: background .12s;
}
.vl-add-toggle-btn:hover, .vl-add-toggle-btn.active { background: #f0fdf4; }
.vl-passage-mgr-btn { border-color: #7c3aed; color: #7c3aed; }
.vl-passage-mgr-btn:hover, .vl-passage-mgr-btn.active { background: #f5f3ff; border-color: #6d28d9; }
.vl-excl-btn { border-color: #dc2626; color: #dc2626; }
.vl-excl-btn:hover { background: #fff1f2; }
.vl-miss-btn { border-color: #6366f1; color: #6366f1; padding: 6px 11px; font-size: .88rem; }
.vl-miss-btn:hover { background: #eef2ff; }
.vl-miss-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.vl-miss-wrap { margin-bottom: 12px; }
.vl-miss-ok { padding: 10px 16px; color: #16a34a; font-size: .85rem; font-weight: 600; }

.vl-del-btn {
  width: 26px; height: 26px; border: none; border-radius: 7px;
  background: transparent; color: #94a3b8; font-size: .85rem;
  cursor: pointer; line-height: 1; padding: 0; transition: all .12s;
  display: flex; align-items: center; justify-content: center;
}
.vl-del-btn:hover { background: #fee2e2; color: #dc2626; }
.vl-img-btn {
  width: 26px; height: 26px; border: none; border-radius: 7px;
  background: transparent; color: #94a3b8; font-size: .85rem;
  cursor: pointer; line-height: 1; padding: 0; transition: all .12s;
  display: flex; align-items: center; justify-content: center;
}
.vl-img-btn:hover  { background: #dbeafe; color: #2563eb; }
.vl-img-btn.has-img { color: #2563eb; }
.vl-wc-admin-img {
  margin-top: 8px; display: flex; align-items: flex-start;
}
.vl-wc-admin-img img {
  width: 100px; height: 70px; object-fit: cover; border-radius: 8px;
  border: 1.5px solid var(--border, #e5e7eb); display: block; cursor: pointer;
  transition: opacity .15s;
}
.vl-wc-admin-img img:hover { opacity: .82; }
.vl-img-lightbox {
  display: none; position: fixed; inset: 0; z-index: 20000;
  background: rgba(0,0,0,.88); align-items: center; justify-content: center;
  cursor: zoom-out;
}
.vl-img-lightbox.active { display: flex; }
.vl-img-lightbox-img {
  max-width: 92vw; max-height: 88vh; border-radius: 12px;
  box-shadow: 0 8px 48px rgba(0,0,0,.6); object-fit: contain; cursor: default;
}

.vl-custom-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 4px; background: #fef9c3; color: #a16207;
  font-size: .68rem; font-weight: 700; vertical-align: middle;
}

/* Add word form */
.vl-add-form {
  background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
}
.vl-add-form-title {
  font-size: .88rem; font-weight: 800; color: #15803d; margin-bottom: 12px;
}
.vl-add-form-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.vl-add-field {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;
}
.vl-add-field-wide { flex: 2; min-width: 220px; }
.vl-add-field label { font-size: .72rem; font-weight: 700; color: #374151; }
.vl-add-inp {
  height: 34px; padding: 0 10px; border: 1.5px solid #d1fae5;
  border-radius: 7px; font-size: .82rem; outline: none; font-family: inherit;
  background: #fff; transition: border-color .15s;
}
.vl-add-inp:focus { border-color: #16a34a; }
.vl-add-form-actions { display: flex; gap: 8px; align-items: center; }
.vl-add-save-btn {
  padding: 6px 18px; border: none; border-radius: 7px;
  background: #16a34a; color: #fff; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .12s;
}
.vl-add-save-btn:hover { opacity: .85; }
.vl-add-cancel-btn {
  padding: 6px 14px; border: 1.5px solid #86efac; border-radius: 7px;
  background: #fff; color: #16a34a; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.vl-add-cancel-btn:hover { background: #dcfce7; }
.vl-add-msg { font-size: .8rem; color: #16a34a; font-weight: 600; }
.vl-add-form-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.vl-add-tab {
  padding: 5px 14px; border: 1.5px solid #86efac; border-radius: 7px;
  background: #fff; color: #16a34a; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.vl-add-tab:hover { background: #dcfce7; }
.vl-add-tab-active { background: #16a34a; color: #fff; border-color: #16a34a; }
.vl-add-tab-active:hover { background: #15803d; }
.vl-bulk-hint {
  font-size: .8rem; color: #374151; background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 7px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.6;
}
.vl-bulk-ta {
  width: 100%; box-sizing: border-box; border: 1.5px solid #d1fae5;
  border-radius: 8px; padding: 10px 12px; font-size: .82rem; font-family: monospace;
  resize: vertical; outline: none; transition: border-color .15s; margin-bottom: 10px;
}
.vl-bulk-ta:focus { border-color: #16a34a; }

/* Excluded words panel */
.vl-excl-panel {
  background: #fff1f2; border: 1.5px solid #fca5a5; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start;
}
.vl-excl-title {
  width: 100%; font-size: .8rem; font-weight: 800; color: #dc2626; margin-bottom: 6px;
}
.vl-excl-empty { font-size: .82rem; color: #94a3b8; }
.vl-excl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: #fff; border: 1px solid #fca5a5;
  border-radius: 999px; font-size: .8rem; color: #dc2626; font-weight: 600;
}
.vl-excl-restore {
  border: none; background: none; color: #16a34a; cursor: pointer;
  font-size: .82rem; padding: 0; line-height: 1;
}
.vl-excl-restore:hover { text-decoration: underline; }
.vl-excl-del {
  border: none; background: none; color: #dc2626; cursor: pointer;
  font-size: .78rem; padding: 0 0 0 2px; line-height: 1; opacity: .7;
}
.vl-excl-del:hover { opacity: 1; }
.vl-excl-del-all {
  margin-left: 8px; border: 1px solid #fca5a5; background: #fff0f0; color: #dc2626;
  border-radius: 6px; font-size: .72rem; font-weight: 700; cursor: pointer;
  padding: 2px 8px; line-height: 1.4; vertical-align: middle; opacity: .85;
}
.vl-excl-del-all:hover { opacity: 1; background: #fee2e2; }

/* Passage Manager Panel */
.vl-passage-panel {
  background: #f5f3ff; border: 1.5px solid #c4b5fd; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.vl-passage-panel-title {
  font-size: .82rem; font-weight: 800; color: #6d28d9; margin-bottom: 10px;
}
.vl-passage-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.vl-passage-item {
  background: #fff; border: 1px solid #ddd6fe; border-radius: 8px;
  padding: 8px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.vl-passage-item-preview { flex: 1; font-size: .8rem; color: #334155; min-width: 120px; }
.vl-passage-item-meta { font-size: .75rem; color: #7c3aed; font-weight: 700; white-space: nowrap; }
.vl-passage-item-btns { display: flex; gap: 6px; }
.vl-passage-edit-btn, .vl-passage-del-btn {
  padding: 3px 9px; border-radius: 6px; font-size: .75rem; font-weight: 700;
  border: 1px solid; cursor: pointer; transition: opacity .12s;
}
.vl-passage-edit-btn { border-color: #6d28d9; color: #6d28d9; background: #f5f3ff; }
.vl-passage-del-btn { border-color: #dc2626; color: #dc2626; background: #fff1f2; }
.vl-passage-edit-btn:hover, .vl-passage-del-btn:hover { opacity: .75; }
.vl-passage-empty { font-size: .8rem; color: #94a3b8; margin-bottom: 10px; }
.vl-passage-form-inner { border-top: 1px solid #ddd6fe; padding-top: 12px; margin-top: 4px; }
.vl-passage-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.vl-passage-form-row label { font-size: .78rem; font-weight: 700; color: #4c1d95; }
.vl-passage-ta {
  width: 100%; box-sizing: border-box; border: 1.5px solid #c4b5fd; border-radius: 7px;
  padding: 8px 10px; font-size: .85rem; line-height: 1.55; resize: vertical;
  font-family: inherit; color: #1e293b;
}
.vl-passage-ta:focus { outline: none; border-color: #7c3aed; }
.vl-passage-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* "See in passage" button on word card */
.vl-passage-show-btn {
  display: inline-block; margin-top: 8px; padding: 4px 11px;
  border: 1.5px solid #7c3aed; border-radius: 999px;
  background: #f5f3ff; color: #6d28d9;
  font-size: .75rem; font-weight: 700; cursor: pointer;
  transition: background .12s;
}
.vl-passage-show-btn:hover { background: #ede9fe; }

/* Passage overlay */
.vl-passage-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.vl-passage-modal {
  background: #fff; border-radius: 14px; padding: 24px 28px;
  max-width: 680px; width: 100%; max-height: 85vh; overflow-y: auto;
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.vl-passage-modal-close {
  position: absolute; top: 14px; right: 16px;
  border: none; background: none; font-size: 1.2rem; cursor: pointer;
  color: #64748b; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.vl-passage-modal-close:hover { background: #f1f5f9; }
.vl-passage-modal-word {
  font-size: 1.1rem; font-weight: 800; color: #1e293b; margin-bottom: 16px;
  padding-right: 30px;
}
/* Passage overlay: control bar (voice / speed / font / size) */
.vl-psg-ctrl {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 18px;
}
.vl-psg-ctrl-item { display: inline-flex; align-items: center; gap: 6px; }
.vl-psg-ctrl-lbl { font-size: .74rem; font-weight: 700; color: #6d28d9; white-space: nowrap; }
.vl-psg-sel {
  border: 1.5px solid #c4b5fd; border-radius: 7px; padding: 4px 8px;
  font-size: .8rem; color: #1e293b; background: #fff; cursor: pointer;
  max-width: 220px;
}
.vl-psg-sel:focus { outline: none; border-color: #7c3aed; }
.vl-psg-sz-btn {
  border: 1.5px solid #c4b5fd; background: #fff; color: #6d28d9;
  border-radius: 6px; font-size: .78rem; font-weight: 800; cursor: pointer;
  padding: 3px 9px; line-height: 1.3;
}
.vl-psg-sz-btn:hover { background: #ede9fe; }
.vl-psg-sz-lbl { font-size: .76rem; font-weight: 700; color: #4c1d95; min-width: 40px; text-align: center; }
.vl-passage-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.vl-passage-block-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.vl-psg-dict-btn {
  border: 1.5px solid #0891b2; background: #ecfeff; color: #0e7490;
  border-radius: 999px; font-size: .76rem; font-weight: 700; cursor: pointer;
  padding: 4px 13px; transition: background .12s; white-space: nowrap;
}
.vl-psg-dict-btn:hover { background: #cffafe; }
.vl-psg-fib-btn {
  border: 1.5px solid #db2777; background: #fdf2f8; color: #be185d;
  border-radius: 999px; font-size: .76rem; font-weight: 700; cursor: pointer;
  padding: 4px 13px; transition: background .12s; white-space: nowrap;
}
.vl-psg-fib-btn:hover { background: #fce7f3; }

/* Fill in the blanks view */
.vl-fib-bank-label { font-size: .76rem; font-weight: 800; color: #be185d; margin-bottom: 6px; }
.vl-fib-bank {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px;
  background: #fdf2f8; border: 1.5px dashed #f9a8d4; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 16px;
}
.vl-fib-bank-empty { font-size: .82rem; color: #9ca3af; font-style: italic; }
.vl-fib-chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1.5px solid #ec4899; color: #be185d;
  font-size: .9rem; font-weight: 700; cursor: grab; user-select: none;
  transition: background .12s, transform .08s;
}
.vl-fib-chip:hover { background: #fce7f3; }
.vl-fib-chip:active { cursor: grabbing; }
.vl-fib-chip.sel { background: #ec4899; color: #fff; transform: translateY(-1px); }
.vl-fib-text {
  font-size: 1.02rem; line-height: 2.5; color: #1e293b;
  background: #f8fafc; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
  white-space: pre-wrap;
}
.vl-fib-blank {
  display: inline-block; vertical-align: baseline; text-align: center;
  border-radius: 6px; margin: 0 2px; cursor: pointer; transition: background .12s, border-color .12s;
}
.vl-fib-blank.empty {
  border-bottom: 2px dashed #94a3b8; background: #fff;
  min-height: 1.4em; line-height: 1.4em;
}
.vl-fib-blank.empty:hover { border-bottom-color: #ec4899; background: #fdf2f8; }
.vl-fib-blank.filled {
  padding: 2px 10px; background: #ede9fe; border: 1.5px solid #c4b5fd; color: #5b21b6;
  font-weight: 700;
}
.vl-fib-blank.filled:hover { background: #ddd6fe; }
.vl-fib-blank.filled.correct { background: #f0fdf4; border-color: #16a34a; color: #15803d; }
.vl-fib-blank.filled.incorrect { background: #fef2f2; border-color: #dc2626; color: #b91c1c; }

/* Dictation view */
.vl-dict-hint { font-size: .8rem; color: #64748b; margin-bottom: 14px; }
.vl-dict-text {
  font-size: 1.02rem; line-height: 2.4; color: #1e293b;
  background: #f8fafc; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
  white-space: pre-wrap;
}
.vl-dict-inp {
  border: none; border-bottom: 2px solid #94a3b8; background: #fff;
  font-size: .95rem; font-family: inherit; color: #0f172a;
  padding: 2px 6px; margin: 0 2px; text-align: center; border-radius: 4px 4px 0 0;
  outline: none; transition: border-color .12s, background .12s;
}
.vl-dict-inp:focus { border-bottom-color: #7c3aed; background: #faf5ff; }
.vl-dict-inp.correct { border-bottom-color: #16a34a; background: #f0fdf4; color: #15803d; font-weight: 700; }
.vl-dict-inp.incorrect { border-bottom-color: #dc2626; background: #fef2f2; color: #b91c1c; font-weight: 700; }
.vl-dict-inp.revealed { border-bottom-color: #f59e0b; background: #fffbeb; color: #b45309; font-weight: 700; }
.vl-dict-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vl-dict-btn {
  border: 1.5px solid; border-radius: 8px; font-size: .8rem; font-weight: 700;
  cursor: pointer; padding: 7px 14px; transition: opacity .12s, background .12s;
}
.vl-dict-btn:hover { opacity: .82; }
.vl-dict-listen { border-color: #7c3aed; background: #f5f3ff; color: #6d28d9; }
.vl-dict-listen.playing { background: #7c3aed; color: #fff; }
.vl-dict-check { border-color: #16a34a; background: #16a34a; color: #fff; }
.vl-dict-new { border-color: #0891b2; background: #ecfeff; color: #0e7490; }
.vl-dict-reveal { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.vl-dict-back { border-color: #cbd5e1; background: #f8fafc; color: #475569; }
.vl-dict-score { font-size: .9rem; font-weight: 800; color: #6d28d9; margin-left: 4px; }
.vl-dict-score.all-ok { color: #16a34a; }
.vl-psg-play-btn {
  border: 1.5px solid #7c3aed; background: #f5f3ff; color: #6d28d9;
  border-radius: 999px; font-size: .76rem; font-weight: 700; cursor: pointer;
  padding: 4px 13px; transition: background .12s; white-space: nowrap;
}
.vl-psg-play-btn:hover { background: #ede9fe; }
.vl-psg-play-btn.playing { background: #7c3aed; color: #fff; border-color: #7c3aed; }

.vl-passage-modal-block { margin-bottom: 20px; }
.vl-passage-modal-num { font-size: .75rem; font-weight: 700; color: #7c3aed; }
.vl-passage-modal-en {
  font-size: .95rem; line-height: 1.75; color: #1e293b;
  background: #f8fafc; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
  white-space: pre-wrap;
}
.vl-psg-speaker { font-weight: 800; color: #7c3aed; }
.vl-psg-vi-toggle {
  display: inline-block; margin: 2px 0 6px; padding: 4px 12px;
  border: 1.5px dashed #fbbf24; border-radius: 999px;
  background: #fffbeb; color: #b45309;
  font-size: .76rem; font-weight: 700; cursor: pointer; transition: background .12s;
}
.vl-psg-vi-toggle:hover { background: #fef3c7; }
.vl-psg-vi-toggle.open { border-style: solid; }
.vl-passage-modal-vi {
  font-size: .88rem; line-height: 1.7; color: #475569;
  background: #fffbeb; border-radius: 8px; padding: 10px 14px;
  border-left: 3px solid #fbbf24; white-space: pre-wrap;
}
.vl-passage-hl {
  background: #fde68a; color: #92400e; border-radius: 3px;
  padding: 1px 3px; font-weight: 700;
}

/* Interlinear dialogue (EN line + VI line below) */
.vl-psg-dialogue { white-space: normal; }
.vl-psg-line { margin-bottom: 12px; }
.vl-psg-gap { height: 4px; }
.vl-psg-line-en { line-height: 1.6; }
.vl-passage-modal-vi.vl-psg-line-vi {
  background: transparent; border-left: 2px solid #fcd34d; border-radius: 0;
  padding: 2px 0 2px 10px; margin: 3px 0 0; color: #64748b; font-style: italic;
  line-height: 1.55;
}

.vl-toolbar-toggle { display: none; }
.vl-toolbar-body { display: contents; }

@media (max-width: 700px) {
  .vl-levels-grid { grid-template-columns: 1fr 1fr; }
  .vl-levels-exam-row-3 { grid-template-columns: 1fr 1fr; }
  .vl-mc-opts { grid-template-columns: 1fr; }
  .vl-list-toolbar { gap: 8px; padding: 8px 12px; flex-wrap: nowrap; align-items: flex-start; flex-direction: column; }
  .vl-wc-def { display: none; }

  .vl-header { flex-wrap: wrap; min-height: unset; padding: 8px 12px; gap: 8px; }
  .vl-title { order: 1; min-width: 0; }
  .vl-back-btn { order: 0; }
  .vl-bg-btn { order: 2; }
  .vl-header-right { order: 4; width: 100%; justify-content: flex-start; padding-top: 2px; }
  .vl-lb-toggle-btn { display: inline-flex; align-items: center; order: 3; }
  #vlOverlay #vlBody { padding-left: 12px; padding-right: 12px; } /* chừa 2 bên ít thôi cho thẻ rộng hơn */
  /* Thẻ level gọn hơn trên mobile */
  .vl-set-grid { gap: 10px; }
  .vl-set-card { padding: 13px 14px 12px; border-radius: 14px; }
  .vl-set-top { margin-bottom: 8px; }
  .vl-set-ico { width: 36px; height: 36px; font-size: 1.2rem; border-radius: 10px; }
  .vl-set-title { font-size: 1.12rem; }
  .vl-set-sub { font-size: .74rem; margin-bottom: 10px; line-height: 1.3; }
  .vl-set-foot-total { font-size: .72rem; }
  .vl-set-foot-learned { font-size: .68rem; }
  .vl-lb-card { display: none; top: 0; }
  .vl-lb-card.vl-lb-open { display: flex; }
  .vl-lb-backdrop.active { display: block; }
  .vl-wc-grid3 { grid-template-columns: 1fr !important; }

  .vl-toolbar-toggle {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px;
    background: #f1f5f9; border: 1.5px solid #e2e8f0;
    font-size: .82rem; font-weight: 600; color: #334155;
    cursor: pointer; width: 100%;
  }
  .vl-toolbar-toggle.active { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; }
  .vl-toolbar-body { display: none; width: 100%; }
  .vl-toolbar-body.open {
    display: flex; flex-direction: column; gap: 8px; width: 100%;
    padding-top: 8px; border-top: 1px solid #e2e8f0;
  }
  .vl-toolbar-body .vl-lt-sep { display: none; }
}

/* ── Word bank test ── */
.vl-wb-bank {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #f1f5f9; border: 2px dashed #cbd5e1; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px; min-height: 52px; transition: border-color .15s;
}
.vl-wb-bank[ondragover]:hover { border-color: #6366f1; }
.vl-wb-bank-label { font-size: .72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .06em; width: 100%; margin-bottom: 2px; }
.vl-wb-done { color: #16a34a; font-size: .82rem; font-weight: 700; }
.vl-wb-chip {
  padding: 5px 14px; background: #fff; border: 2px solid #94a3b8;
  border-radius: 8px; font-size: .88rem; font-weight: 700; color: #1e293b;
  cursor: grab; user-select: none; transition: all .12s; white-space: nowrap;
}
.vl-wb-chip:hover { border-color: #6366f1; background: #eef2ff; }
.vl-wb-chip-sel { border-color: #6366f1 !important; background: #eef2ff !important; box-shadow: 0 0 0 3px #c7d2fe; }
.vl-wb-chip-inline { cursor: grab; display: inline-block; padding: 2px 10px; border-radius: 6px; vertical-align: middle; margin: 0 2px; }
.vl-wb-chip-ok { border-color: #16a34a !important; background: #dcfce7 !important; color: #15803d; cursor: default; }
.vl-wb-chip-ng { border-color: #dc2626 !important; background: #fee2e2 !important; color: #b91c1c; cursor: default; }
.vl-wb-sents { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
.vl-wb-sent-row { font-size: .92rem; color: #1e293b; line-height: 1.7; font-style: italic; }
.vl-wb-slot {
  display: inline-block; min-width: 80px; padding: 2px 10px; border-bottom: 2.5px solid #94a3b8;
  border-radius: 4px 4px 0 0; color: #94a3b8; cursor: pointer; vertical-align: middle;
  margin: 0 3px; transition: border-color .12s;
}
.vl-wb-slot-ready { border-color: #6366f1; background: #f5f3ff; color: #6366f1; }
.vl-wb-slot-miss { border-color: #dc2626; color: #dc2626; }
.vl-wb-ans-ok { font-size: .78rem; color: #16a34a; font-weight: 700; font-style: normal; margin-left: 4px; }
.vl-wb-icon-ok { color: #16a34a; font-weight: 800; margin-left: 6px; font-style: normal; }
.vl-wb-icon-ng { color: #dc2626; font-weight: 800; margin-left: 6px; font-style: normal; }
.vl-wb-check-btn { margin-top: 16px; width: 100%; padding: 22px; font-size: 1.3rem; border-radius: 14px; letter-spacing: .04em; }
.vl-wb-vi-trans { font-size: .82rem; color: #6b7280; font-style: normal; margin-top: 3px; padding-left: 2px; line-height: 1.5; }
.vl-wb-vi-loading { opacity: .5; }
.vl-wb-trans-btn {
  display: block; margin: 14px auto 0; padding: 8px 22px;
  border-radius: 20px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #374151; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background .12s;
}
.vl-wb-trans-btn:hover { background: #f3f4f6; }

/* ── -s/es word panel ── */
.vl-ses-panel {
  max-width: 1100px; margin: 0 auto 12px; border-radius: 10px;
  border: 1.5px solid var(--ses-color, #6366f1); background: #fff; overflow: hidden;
}
.vl-ses-hdr {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  cursor: pointer; user-select: none; list-style: none;
  background: color-mix(in srgb, var(--ses-color, #6366f1) 8%, #fff);
}
.vl-ses-hdr::-webkit-details-marker { display: none; }
.vl-ses-hdr::before { content: '▶'; font-size: .65rem; color: var(--ses-color, #6366f1); transition: transform .2s; }
details[open].vl-ses-panel > .vl-ses-hdr::before { transform: rotate(90deg); }
.vl-ses-title { font-size: .8rem; font-weight: 700; color: var(--ses-color, #6366f1); flex: 1; }
.vl-ses-count { font-size: .72rem; background: var(--ses-color, #6366f1); color: #fff; border-radius: 20px; padding: 2px 9px; font-weight: 700; }
.vl-ses-body { padding: 8px 14px 12px; }
.vl-ses-note { font-size: .75rem; color: #64748b; margin: 0 0 8px; line-height: 1.5; }
.vl-ses-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-ses-chip {
  font-size: .78rem; font-weight: 600; padding: 4px 11px; border-radius: 20px;
  background: color-mix(in srgb, var(--ses-color, #6366f1) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--ses-color, #6366f1) 30%, transparent);
  color: var(--ses-color, #6366f1); cursor: pointer; transition: background .12s;
}
.vl-ses-chip:hover { background: color-mix(in srgb, var(--ses-color, #6366f1) 18%, #fff); }

/* ── Missing data panels (admin) ── */
.vl-miss-panel {
  max-width: 1100px; margin: 0 auto 10px; border-radius: 10px;
  border: 1.5px solid var(--miss-color); background: #fffbeb; overflow: hidden;
}
.vl-miss-hdr {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  cursor: pointer; user-select: none; list-style: none;
  background: color-mix(in srgb, var(--miss-color) 10%, #fff);
}
.vl-miss-hdr::-webkit-details-marker { display: none; }
.vl-miss-title { font-size: .78rem; font-weight: 700; color: var(--miss-color); flex: 1; }
.vl-miss-count { font-size: .72rem; background: var(--miss-color); color: #fff; border-radius: 20px; padding: 1px 8px; }
.vl-miss-csv-wrap { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px 4px; }
.vl-miss-csv {
  flex: 1; min-height: 56px; max-height: 120px; resize: vertical;
  font-size: .78rem; font-family: inherit; color: #334155;
  border: 1.5px solid #e2e8f0; border-radius: 7px; padding: 6px 9px;
  background: #f8fafc; line-height: 1.6;
}
.vl-miss-copy-btn {
  flex-shrink: 0; padding: 5px 12px; border: none; border-radius: 7px;
  background: var(--miss-color); color: #fff; font-size: .76rem;
  cursor: pointer; font-weight: 600; transition: opacity .12s;
}
.vl-miss-copy-btn:hover { opacity: .85; }
.vl-miss-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 10px; }
.vl-miss-chip {
  font-size: .75rem; padding: 3px 10px; border-radius: 20px; cursor: pointer;
  background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
  transition: background .12s, color .12s;
}
.vl-miss-chip:hover { background: var(--miss-color); color: #fff; border-color: var(--miss-color); }

/* ── Level search ── */
.vl-global-search-wrap {
  max-width: 560px; margin: 0 auto 16px; padding-top: 24px;
}
.vl-global-search-inp { font-size: 1rem; padding: 11px 18px; }
.vl-search-wrap {
  max-width: 480px; margin: 20px auto 16px;
}
.vl-search-inp {
  width: 100%; padding: 9px 14px; border: 1.5px solid #e2e8f0; border-radius: 24px;
  font-size: .9rem; outline: none; background: #fff; color: #1e293b;
  transition: border-color .15s, box-shadow .15s;
}
.vl-search-inp:focus { border-color: #0891b2; box-shadow: 0 0 0 3px #cffafe; }
.vl-search-results {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 900px; margin: 0 auto 20px;
}
.vl-search-item {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 10px 6px 6px; border-radius: 10px;
  border: 1.5px solid var(--sr-border, #e2e8f0);
  background: var(--sr-bg, #f8fafc);
  transition: transform .12s, box-shadow .12s;
}
.vl-search-item:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.1); }
.vl-sr-num {
  flex-shrink: 0; font-size: .68rem; font-weight: 800; padding: 2px 5px;
  border-radius: 5px; min-width: 22px; text-align: center;
}
.vl-sr-word { font-size: .88rem; font-weight: 700; color: #1e293b; }
.vl-sr-word mark { background: #fef08a; border-radius: 2px; padding: 0 1px; }
.vl-sr-pos { font-size: .7rem; color: #64748b; font-style: italic; }
.vl-sr-vi { font-size: .78rem; color: #475569; }
.vl-sr-grp { font-size: .68rem; color: #94a3b8; margin-left: auto; white-space: nowrap; }
.vl-search-empty { text-align: center; color: #94a3b8; font-size: .85rem; margin-bottom: 16px; }
.vl-search-more { font-size: .75rem; color: #94a3b8; text-align: center; width: 100%; padding: 4px 0; }
.vl-bulk-results { max-width: 900px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 14px; }
.vl-bulk-section { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.vl-bulk-hdr { padding: 8px 14px; font-size: .8rem; font-weight: 700; }
.vl-bulk-hdr--found { background: #f0fdf4; color: #16a34a; border-bottom: 1px solid #dcfce7; }
.vl-bulk-hdr--miss { background: #fef2f2; color: #dc2626; border-bottom: 1px solid #fee2e2; }
.vl-bulk-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px 12px; }
.vl-bulk-chip {
  display: inline-flex; align-items: center; gap: 0;
  padding: 4px 13px; border: 1.5px solid; border-radius: 20px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: opacity .12s, transform .1s;
}
.vl-bulk-chip:hover { opacity: .75; transform: translateY(-1px); }
.vl-bulk-lv-badge {
  font-size: .6rem; font-weight: 700; padding: 1px 5px;
  border-radius: 4px; margin-right: 5px; line-height: 1.4;
}
.vl-bulk-miss-wrap { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px 12px; }
.vl-bulk-miss-ta {
  flex: 1; min-height: 52px; resize: vertical; font-size: .82rem;
  border: 1.5px solid #e2e8f0; border-radius: 7px; padding: 6px 9px;
  background: #fff; line-height: 1.6; color: #334155;
}
.vl-search-not-found {
  max-width: 560px; margin: 0 auto 20px; padding: 14px 18px;
  border: 1.5px dashed #cbd5e1; border-radius: 12px; background: #f8fafc;
}
.vl-snf-word { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.vl-snf-ipa { font-size: .8rem; color: #64748b; margin-bottom: 3px; }
.vl-snf-vi { font-size: .88rem; font-weight: 600; color: #1e293b; margin-bottom: 2px; }
.vl-snf-def { font-size: .76rem; color: #64748b; font-style: italic; margin-bottom: 8px; }
.vl-snf-hint { font-size: .78rem; color: #94a3b8; margin-bottom: 8px; }
.vl-snf-levels { display: flex; gap: 6px; flex-wrap: wrap; }
.vl-snf-add-btn {
  font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 6px;
  cursor: pointer; transition: opacity .12s; letter-spacing: .03em;
}
.vl-snf-add-btn:hover { opacity: .75; }

/* ── List nav (prev/next group) ── */
.vl-list-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 24px 16px 40px; max-width: 900px; margin: 0 auto;
}
.vl-list-nav-label {
  font-size: .84rem; color: #94a3b8; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.vl-list-nav-btn {
  padding: 10px 28px; border-radius: 24px; border: none; cursor: pointer;
  font-size: .9rem; font-weight: 700; color: #fff;
  background: #64748b; transition: filter .15s, transform .1s;
  white-space: nowrap; flex-shrink: 0;
}
.vl-list-nav-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.vl-list-nav-hint {
  text-align: center; font-size: .75rem; color: #1e293b; font-weight: 700;
  margin-top: -28px; padding-bottom: 16px; letter-spacing: .02em;
}

.vl-bg-dark .vl-list-nav-label { color: #475569; }
.vl-bg-dark .vl-list-nav-hint  { color: #374151; }

/* ── Special mini grid (IRR / Countries / TG / WR / CONV) ── */
.vl-special-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 16px auto 0;
}

@media (max-width: 700px) {
  .vl-special-mini-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Irregular Verbs ── */
.vl-level-irreg { background: linear-gradient(135deg,#ecfdf5,#d1fae5) !important; border-color: #6ee7b7 !important; }
.vl-level-irreg:hover { border-color: #10b981 !important; }
/* Irregular verbs test button */
.vl-irreg-test-btn { padding: 5px 13px; border-radius: 8px; border: none; background: #10b981; color: #fff; font-size: .8rem; font-weight: 700; cursor: pointer; }
.vl-irreg-test-btn:hover { background: #059669; }
/* Test wrapper */
.vl-irreg-test-wrap { max-width: 640px; margin: 16px auto; padding: 0 12px 40px; display: flex; flex-direction: column; gap: 12px; }
.vl-irreg-test-bar { display: flex; align-items: center; gap: 10px; }
.vl-irreg-test-prog { font-size: .8rem; color: #6b7280; }
.vl-irreg-test-score { font-size: .8rem; color: #10b981; font-weight: 700; margin-left: auto; }
.vl-irreg-test-exit { padding: 4px 10px; border-radius: 7px; border: 1px solid #e5e7eb; background: #fff; font-size: .76rem; cursor: pointer; color: #6b7280; }
.vl-irreg-test-exit:hover { background: #f3f4f6; }
.vl-irreg-test-track { height: 5px; background: #e5e7eb; border-radius: 3px; }
.vl-irreg-test-fill { height: 100%; background: #10b981; border-radius: 3px; transition: width .3s; }
.vl-irreg-test-type { font-size: .8rem; color: #6b7280; text-align: center; }
.vl-irreg-test-q { background: #fff; border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.vl-irreg-test-word { font-size: 1.3rem; font-weight: 700; color: #1e293b; }
.vl-irreg-test-vi { font-size: .9rem; color: #6366f1; font-style: italic; }
.vl-irreg-test-forms { font-size: .85rem; color: #475569; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Options (MC) */
.vl-irreg-test-opts { display: flex; flex-direction: column; gap: 8px; }
.vl-irreg-test-opt { padding: 12px 18px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-size: .9rem; text-align: left; cursor: pointer; transition: all .12s; }
.vl-irreg-test-opt:hover:not(:disabled) { border-color: #6366f1; background: #eef2ff; }
.vl-irreg-opt-ok { border-color: #10b981 !important; background: #ecfdf5 !important; color: #065f46; font-weight: 700; }
.vl-irreg-opt-err { border-color: #ef4444 !important; background: #fff1f2 !important; color: #991b1b; }
/* Fill input */
.vl-irreg-test-inp-wrap { display: flex; gap: 8px; }
.vl-irreg-test-inp { flex: 1; padding: 10px 14px; border-radius: 10px; border: 2px solid #d1d5db; font-size: 1rem; }
.vl-irreg-test-inp:focus { outline: none; border-color: #6366f1; }
.vl-irreg-inp-ok { border-color: #10b981 !important; background: #ecfdf5; }
.vl-irreg-inp-err { border-color: #ef4444 !important; background: #fff1f2; }
.vl-irreg-test-submit-btn { padding: 10px 18px; border-radius: 10px; border: none; background: #6366f1; color: #fff; font-weight: 700; cursor: pointer; }
.vl-irreg-test-submit-btn:hover { background: #4f46e5; }
/* Feedback */
.vl-irreg-test-fb { background: #f8fafc; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.vl-irreg-fb-result { font-size: .95rem; font-weight: 700; }
.vl-irreg-fb-ok { color: #059669; }
.vl-irreg-fb-err { color: #dc2626; }
.vl-irreg-fb-forms { font-size: .85rem; color: #374151; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.vl-irreg-fb-vi { color: #6366f1; }
.vl-irreg-fb-ex { font-size: .82rem; color: #64748b; font-style: italic; line-height: 1.5; }
/* Next button */
.vl-irreg-test-next-btn { padding: 11px 28px; border-radius: 12px; border: none; background: #6366f1; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer; align-self: center; }
.vl-irreg-test-next-btn:hover { background: #4f46e5; }
.vl-irreg-exit-btn { background: #64748b; }
.vl-irreg-exit-btn:hover { background: #475569; }
/* Result */
.vl-irreg-test-result { align-items: center; padding-top: 40px; }
.vl-irreg-result-emoji { font-size: 3rem; }
.vl-irreg-result-score { font-size: 2.5rem; font-weight: 900; color: #1e293b; }
.vl-irreg-result-pct { font-size: 1.1rem; color: #6b7280; }
.vl-irreg-result-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
/* Dark mode */
.vl-bg-dark .vl-irreg-test-q { background: #1f2937; border-color: #374151; }
.vl-bg-dark .vl-irreg-test-word { color: #f1f5f9; }
.vl-bg-dark .vl-irreg-test-opt { background: #1f2937; border-color: #374151; color: #d1d5db; }
.vl-bg-dark .vl-irreg-test-opt:hover:not(:disabled) { background: #1e3a5f; border-color: #6366f1; }
.vl-bg-dark .vl-irreg-test-inp { background: #1f2937; border-color: #374151; color: #f1f5f9; }
.vl-bg-dark .vl-irreg-test-fb { background: #1f2937; }
.vl-bg-dark .vl-irreg-test-exit { background: #374151; border-color: #4b5563; color: #9ca3af; }
.vl-irreg-wrap { max-width: 900px; margin: 20px auto; padding: 0 12px 40px; }
.vl-irreg-hide-vi .vl-irreg-card2-vi,
.vl-irreg-hide-vi .vl-irreg-card2-sep { display: none; }

/* ── New card layout ── */
.vl-irreg-cards { display: flex; flex-direction: column; gap: 14px; }
.vl-irreg-card2 {
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .15s;
}
.vl-irreg-card2:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.vl-irreg-card2-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg,#f0fdf4 0%,#fafafa 100%);
  border-bottom: 1.5px solid #e2e8f0;
}
.vl-irreg-card2-num {
  font-size: .68rem; font-weight: 800; color: #94a3b8;
  background: #f1f5f9; border-radius: 6px;
  padding: 2px 7px; flex-shrink: 0;
}
.vl-irreg-card2-v1word {
  font-size: 1rem; font-weight: 800; color: #065f46; letter-spacing: .01em;
}
.vl-irreg-card2-sep { color: #cbd5e1; font-size: .9rem; }
.vl-irreg-card2-vi {
  font-size: .88rem; font-weight: 600; color: #334155;
}
.vl-irreg-card2-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.vl-icc {
  padding: 14px 16px;
  border-right: 1.5px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 5px;
}
.vl-icc:last-child { border-right: none; }
.vl-icc-v1 { background: linear-gradient(160deg,#f0fdf4,#fff); }
.vl-icc-v2 { background: linear-gradient(160deg,#fffbeb,#fff); }
.vl-icc-v3 { background: linear-gradient(160deg,#faf5ff,#fff); }
.vl-bg-dark .vl-icc-v1 { background: rgba(16,185,129,.06); }
.vl-bg-dark .vl-icc-v2 { background: rgba(245,158,11,.06); }
.vl-bg-dark .vl-icc-v3 { background: rgba(139,92,246,.06); }
.vl-icc-badge-row { margin-bottom: 2px; }
.vl-icc-badge {
  display: inline-block;
  font-size: .6rem; font-weight: 800; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase;
}
.vl-icc-v1 .vl-icc-badge { background: #dcfce7; color: #15803d; }
.vl-icc-v2 .vl-icc-badge { background: #fef9c3; color: #a16207; }
.vl-icc-v3 .vl-icc-badge { background: #f3e8ff; color: #7e22ce; }
.vl-icc-form {
  font-size: 1.2rem; font-weight: 800; line-height: 1.2;
  display: flex; align-items: center; gap: 6px;
}
.vl-icc-v1 .vl-icc-form { color: #065f46; }
.vl-icc-v2 .vl-icc-form { color: #92400e; }
.vl-icc-v3 .vl-icc-form { color: #4c1d95; }
.vl-bg-dark .vl-icc-v1 .vl-icc-form { color: #34d399; }
.vl-bg-dark .vl-icc-v2 .vl-icc-form { color: #fbbf24; }
.vl-bg-dark .vl-icc-v3 .vl-icc-form { color: #c084fc; }
.vl-icc-ipa {
  font-size: .76rem; color: #64748b; font-family: 'Courier New',monospace; letter-spacing: .01em;
}
.vl-icc-ipa-ph { height: .76rem; }
.vl-bg-dark .vl-icc-ipa { color: #94a3b8; }
.vl-icc-pos {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #94a3b8;
}
.vl-icc-def {
  font-size: .76rem; color: #475569; line-height: 1.5;
  border-left: 2px solid #e2e8f0; padding-left: 8px;
  margin: 2px 0;
}
.vl-bg-dark .vl-icc-def { color: #94a3b8; border-color: #334155; }
.vl-icc-ex {
  font-size: .74rem; font-style: italic; color: #64748b;
  line-height: 1.5; margin-top: auto; padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
.vl-bg-dark .vl-icc-ex { color: #94a3b8; border-color: #334155; }
.vl-icc-sp {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: .78rem; opacity: .4; line-height: 1; flex-shrink: 0;
  transition: opacity .12s;
}
.vl-icc-sp:hover { opacity: 1; }

/* highlight in example */
.vl-irreg-hl { font-style: normal; font-weight: 700; }
.vl-icc-v1 .vl-irreg-hl { color: #047857; }
.vl-icc-v2 .vl-irreg-hl { color: #b45309; }
.vl-icc-v3 .vl-irreg-hl { color: #6d28d9; }
.vl-bg-dark .vl-irreg-hl { color: #34d399; }

@media (max-width: 580px) {
  .vl-irreg-card2-cols { grid-template-columns: 1fr; }
  .vl-icc { border-right: none; border-bottom: 1.5px solid #f1f5f9; }
  .vl-icc:last-child { border-bottom: none; }
  .vl-icc-form { font-size: 1.05rem; }
}

/* ── Countries & Nationalities ── */
.vl-level-countries { background: linear-gradient(135deg,#eff6ff,#dbeafe) !important; border-color: #93c5fd !important; }
.vl-level-countries:hover { border-color: #3b82f6 !important; }

/* ── Compound Words level card ── */
.vl-level-compound { background: linear-gradient(135deg,#fffbeb,#fef3c7) !important; border-color: #fcd34d !important; }
.vl-level-compound:hover { border-color: #f59e0b !important; }

/* ── IELTS Writing level card ── */
.vl-level-ielts-wr { background: linear-gradient(135deg,#eef2ff,#e0e7ff) !important; border-color: #a5b4fc !important; }
.vl-level-ielts-wr:hover { border-color: #6366f1 !important; }

/* ── Daily Conversation level card ── */
.vl-level-daily-conv { background: linear-gradient(135deg,#fefce8,#fef9c3) !important; border-color: #fde047 !important; }
.vl-level-daily-conv:hover { border-color: #ca8a04 !important; }

/* ── Names / Streets Search ── */
.vl-nsearch-wrap {
  padding: 12px 14px 4px;
  max-width: 700px;
  margin: 0 auto;
}
.vl-nsearch-inp {
  width: 100%; box-sizing: border-box;
  padding: 10px 16px 10px 38px;
  border: 1.5px solid #e5e7eb; border-radius: 24px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
  font-size: .9rem; color: #1f2937;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  transition: border-color .15s, box-shadow .15s;
}
.vl-nsearch-inp:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.vl-nsearch-meta { padding: 8px 14px 4px; font-size: .78rem; color: #6b7280; font-weight: 600; }
.vl-nsearch-cards { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.vl-nsearch-card {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  transition: box-shadow .12s;
}
.vl-nsearch-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.1); }
.vl-nsearch-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 5px; }
.vl-nsearch-card-name { font-size: 1.05rem; font-weight: 800; color: #1e293b; }
.vl-nsearch-card-ipa  { font-size: .82rem; color: #6366f1; font-style: italic; }
.vl-nsearch-card-badge {
  font-size: .7rem; font-weight: 700; padding: 2px 8px;
  border-radius: 10px; white-space: nowrap;
}
.vl-nsearch-card-desc { font-size: .83rem; color: #374151; margin-bottom: 5px; }
.vl-nsearch-card-ex { font-size: .8rem; color: #6b7280; font-style: italic; line-height: 1.45; }
.vl-nsearch-empty { padding: 20px 14px; text-align: center; font-size: .88rem; color: #9ca3af; }

/* ── Luyện dịch level card ── */
.vl-level-trans-prac { background: linear-gradient(135deg,#fdf2f8,#fce7f3) !important; border-color: #f9a8d4 !important; }
.vl-level-trans-prac:hover { border-color: #ec4899 !important; }

/* ── Luyện dịch Setup Screen ── */
.vl-trans-wrap { max-width: 660px; margin: 0 auto; padding: 16px 12px 40px; }
.vl-trans-hdr { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.vl-trans-hdr-title { font-size:1.25rem; font-weight:800; color:#be185d; }
.vl-trans-card {
  background:#fff; border-radius:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
  overflow:hidden; margin-bottom:14px;
}
.vl-trans-card-hdr {
  display:flex; align-items:center; gap:8px;
  padding:11px 16px 10px;
  border-bottom:1px solid #f3f4f6;
  font-size:.82rem; font-weight:700; color:#374151; letter-spacing:.02em;
}
.vl-trans-card-hdr-icon { font-size:1rem; }
.vl-trans-card-body { padding:14px 16px; }

/* dropdowns row */
.vl-trans-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vl-trans-field { display:flex; flex-direction:column; gap:5px; }
.vl-trans-field label { font-size:.75rem; font-weight:700; color:#6b7280; letter-spacing:.03em; text-transform:uppercase; }
.vl-trans-select {
  appearance:none; -webkit-appearance:none;
  width:100%; padding:9px 32px 9px 12px;
  border:1.5px solid #e5e7eb; border-radius:10px;
  background:#f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size:.88rem; color:#1f2937; cursor:pointer;
  transition:border-color .15s;
}
.vl-trans-select:focus { outline:none; border-color:#ec4899; background-color:#fff; }

/* chip groups */
.vl-trans-chips { display:flex; flex-wrap:wrap; gap:8px; }
.vl-trans-chip {
  display:flex; align-items:center; gap:5px;
  padding:8px 14px; border:1.5px solid #e5e7eb; border-radius:22px;
  background:#f9fafb; font-size:.84rem; font-weight:600; color:#374151;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.vl-trans-chip:hover { border-color:#f9a8d4; background:#fdf2f8; color:#be185d; }
.vl-trans-chip-on { border-color:#ec4899 !important; background:#fdf2f8 !important; color:#be185d !important; }

/* method buttons */
.vl-trans-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vl-trans-method-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 10px; border:2px solid #e5e7eb; border-radius:12px;
  background:#f9fafb; font-size:.88rem; font-weight:600; color:#374151;
  cursor:pointer; transition:all .15s;
}
.vl-trans-method-btn:hover { border-color:#f9a8d4; background:#fdf2f8; }
.vl-trans-method-on { border-color:#ec4899 !important; background:#eff6ff !important; color:#1d4ed8 !important; }
.vl-trans-method-btn.vl-trans-method-on { background:#e0f2fe !important; }

/* text input area */
.vl-trans-sublabel { font-size:.82rem; font-weight:700; color:#374151; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.vl-trans-topic-inp, .vl-trans-textarea {
  width:100%; box-sizing:border-box;
  padding:10px 14px; border:1.5px solid #e5e7eb; border-radius:10px;
  font-size:.9rem; color:#1f2937; background:#f9fafb; font-family:inherit;
  transition:border-color .15s;
}
.vl-trans-topic-inp:focus, .vl-trans-textarea:focus { outline:none; border-color:#ec4899; background:#fff; }
.vl-trans-textarea { resize:vertical; min-height:110px; line-height:1.5; }
.vl-trans-hint {
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 14px; margin-top:10px;
  background:#fffbeb; border:1px solid #fde68a; border-radius:10px;
  font-size:.8rem; color:#92400e; line-height:1.45;
}
.vl-trans-hint-icon { flex-shrink:0; font-size:.95rem; margin-top:1px; }

/* start button */
.vl-trans-start-row { padding:4px 0 0; }
.vl-trans-start-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; border:none; border-radius:14px;
  background:linear-gradient(135deg,#f43f5e,#be185d);
  color:#fff; font-size:1rem; font-weight:800; cursor:pointer;
  box-shadow:0 4px 16px rgba(190,24,93,.3); transition:all .2s;
  letter-spacing:.02em;
}
.vl-trans-start-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(190,24,93,.38); }
.vl-trans-start-btn:disabled { opacity:.65; transform:none; cursor:default; box-shadow:none; }
@media(max-width:480px) {
  .vl-trans-row2 { grid-template-columns:1fr; }
  .vl-trans-methods { grid-template-columns:1fr; }
}

/* ── Luyện dịch: chủ đề + bài dịch (admin) ── */
.vl-trtp-wrap { max-width: 1120px; margin: 0 auto; padding: 14px 12px 40px; }
.vl-trex-wrap { max-width: 700px; margin: 0 auto; padding: 14px 12px 40px; }
.vl-trtp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.vl-trans-personal-btn {
  padding: 9px 16px; border: 1.5px solid #f9a8d4; border-radius: 10px; cursor: pointer;
  background: #fdf2f8; color: #be185d; font-size: .9rem; font-weight: 800; transition: background .15s;
}
.vl-trans-personal-btn:hover { background: #fce7f3; }

/* Section Practice header + action row (pastel) */
.vl-sp-head { margin-bottom: 18px; }
.vl-sp-title { font-size: 1.8rem; font-weight: 800; color: #1e293b; line-height: 1.1; }
.vl-sp-sub { color: #64748b; font-size: .92rem; margin-top: 4px; }
.vl-sp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 12px; margin-bottom: 24px; }
.vl-sp-act {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  border: none; border-radius: 16px; padding: 15px 18px; color: #fff; font-family: inherit;
  box-shadow: 0 6px 18px rgba(15,23,42,.12); transition: filter .12s, transform .1s;
}
.vl-sp-act:hover { filter: brightness(1.06); transform: translateY(-2px); }
.vl-sp-act-ic { font-size: 1.4rem; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vl-sp-act-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vl-sp-act-txt b { font-size: .96rem; font-weight: 800; }
.vl-sp-act-txt small { font-size: .75rem; opacity: .92; margin-top: 2px; }
.vl-sp-act-arrow { font-size: 1.1rem; opacity: .9; flex-shrink: 0; }
.vl-sp-act-ai   { background: linear-gradient(135deg,#f472b6,#ec4899); }
.vl-sp-act-mine { background: linear-gradient(135deg,#8b5cf6,#6366f1); }
.vl-sp-act-add  { background: linear-gradient(135deg,#60a5fa,#3b82f6); }

/* topic cards (pastel per accent) */
.vl-trtp-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 18px; }
.vl-trtp-card {
  position: relative; overflow: hidden; cursor: pointer; min-height: 158px; display: block;
  border-radius: 20px; padding: 20px 22px;
  border: 1.5px solid color-mix(in srgb, var(--pc,#ec4899) 25%, #ffffff);
  border-left: 6px solid var(--pc,#ec4899);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc,#ec4899) 13%, #ffffff), #ffffff);
  box-shadow: 0 4px 14px rgba(15,23,42,.06); transition: box-shadow .15s, transform .1s;
}
.vl-trtp-card:hover { box-shadow: 0 12px 30px rgba(15,23,42,.13); transform: translateY(-3px); }
.vl-trtp-deco { position: absolute; right: 6px; bottom: 2px; font-size: 5.2rem; line-height: 1; opacity: .16; pointer-events: none; transform: rotate(-8deg); }
.vl-trtp-ico { width: 50px; height: 50px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.vl-trtp-name { font-size: 1.25rem; font-weight: 800; color: #1e293b; margin-top: 14px; position: relative; word-break: break-word; }
.vl-trtp-count { font-size: .84rem; font-weight: 700; color: var(--pc,#9d174d); margin-top: 5px; position: relative; }
.vl-trtp-admin { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.vl-trtp-edit, .vl-trtp-del {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 9px; cursor: pointer;
  width: 34px; height: 34px; font-size: .85rem; line-height: 1; transition: background .12s;
}
.vl-trtp-edit { color: var(--pc,#6366f1); }
.vl-trtp-edit:hover { background: #f8fafc; }
.vl-trtp-del { color: #dc2626; }
.vl-trtp-del:hover { background: #fef2f2; border-color: #fca5a5; }

/* exercise list */
.vl-trex-list { display: flex; flex-direction: column; gap: 10px; }
.vl-trex-hist-ttl { font-size: .92rem; font-weight: 800; color: #334155; margin-bottom: 12px; }
.vl-trex-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid #fbcfe8; border-radius: 12px; padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.vl-trex-item:hover { border-color: #f472b6; box-shadow: 0 2px 12px rgba(244,114,182,.14); }
.vl-trex-info { flex: 1; min-width: 0; }
.vl-trex-title { font-size: .95rem; font-weight: 700; color: #1f2937; word-break: break-word; }
.vl-trex-meta { font-size: .78rem; color: #9ca3af; margin-top: 2px; }
.vl-trex-actions { display: flex; align-items: center; gap: 6px; }
.vl-trex-start {
  padding: 8px 14px; border: none; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg,#f43f5e,#be185d); color: #fff; font-size: .85rem; font-weight: 700;
  white-space: nowrap; transition: opacity .15s;
}
.vl-trex-start:hover { opacity: .88; }
.vl-trex-edit, .vl-trex-del {
  background: #f3f4f6; border: none; border-radius: 8px; cursor: pointer;
  font-size: .85rem; padding: 7px 9px; line-height: 1; transition: background .15s;
}
.vl-trex-edit:hover { background: #e5e7eb; }
.vl-trex-del { color: #dc2626; background: rgba(239,68,68,.1); }
.vl-trex-del:hover { background: rgba(239,68,68,.2); }

/* admin form (topic + exercise) */
.vl-trform-wrap { max-width: 660px; margin: 0 auto; padding: 16px 14px 40px; }
.vl-trform-title { font-size: 1.1rem; font-weight: 800; color: #be185d; margin-bottom: 16px; }
.vl-trform-label { display: block; font-size: .82rem; font-weight: 700; color: #6b7280; margin: 12px 0 6px; }
.vl-trform-inp, .vl-trform-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 14px;
  border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: .92rem; color: #1f2937;
  background: #fff; font-family: inherit; transition: border-color .15s;
}
.vl-trform-inp:focus, .vl-trform-textarea:focus { outline: none; border-color: #ec4899; }
.vl-trform-textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
.vl-trtp-icons {
  display: flex; flex-wrap: wrap; gap: 7px;
  max-height: 188px; overflow-y: auto; padding: 4px;
  border: 1px solid #f1f5f9; border-radius: 10px;
}
.vl-trtp-icon-opt {
  width: 40px; height: 40px; border: 1.5px solid #e5e7eb; border-radius: 10px; cursor: pointer;
  background: #fff; font-size: 1.2rem; line-height: 1; transition: all .12s;
}
.vl-trtp-icon-opt:hover { border-color: #f9a8d4; }
.vl-trtp-icon-opt.on { border-color: #ec4899; background: #fce7f3; transform: scale(1.05); }
.vl-trform-actions { display: flex; gap: 10px; margin-top: 20px; }
.vl-trform-save {
  flex: 1; padding: 12px; border: none; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg,#f43f5e,#be185d); color: #fff; font-size: .95rem; font-weight: 800;
}
.vl-trform-cancel {
  padding: 12px 20px; border: none; border-radius: 11px; cursor: pointer;
  background: #f1f5f9; color: #475569; font-size: .92rem; font-weight: 600;
}

/* dark mode */
.vl-overlay.vl-dark .vl-trans-personal-btn { background: #2a1a24; border-color: #831843; color: #f9a8d4; }
.vl-overlay.vl-dark .vl-trtp-card { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-trtp-name { color: #f9a8d4; }
.vl-overlay.vl-dark .vl-trtp-count { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-trtp-edit, .vl-overlay.vl-dark .vl-trtp-del { background: rgba(15,23,42,.6); color: #e2e8f0; }
.vl-overlay.vl-dark .vl-trex-item { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-trex-title { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-trex-edit { background: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-trform-title { color: #f9a8d4; }
.vl-overlay.vl-dark .vl-trform-label { color: #94a3b8; }
.vl-overlay.vl-dark .vl-trform-inp, .vl-overlay.vl-dark .vl-trform-textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-trtp-icons { border-color: #334155; }
.vl-overlay.vl-dark .vl-trtp-icon-opt { background: #0f172a; border-color: #334155; }
.vl-overlay.vl-dark .vl-trtp-icon-opt.on { background: #2a1a24; border-color: #ec4899; }
.vl-overlay.vl-dark .vl-trform-cancel { background: #334155; color: #cbd5e1; }

@media(max-width:480px) {
  .vl-trtp-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Tạo bài dịch cá nhân: wizard nhiều bước (emerald) ── */
.vl-tw-wrap { max-width: 560px; margin: 18px auto; padding: 0 14px 40px; }
.vl-tw-card {
  background: #fff; border-radius: 22px; padding: 24px 24px 20px;
  box-shadow: 0 10px 36px rgba(16,185,129,.12), 0 2px 8px rgba(0,0,0,.04);
}
.vl-tw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vl-tw-title { font-size: 1.25rem; font-weight: 800; color: #1f2937; }
/* Font tiêu đề Luyện dịch: Noto Sans (hỗ trợ tiếng Việt) */
.vl-trtp-name, .vl-trex-title, .vl-trform-title, .vl-tw-title, .vl-tw-step-label,
.vl-trans-personal-btn, .vl-tw-opt-name {
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
}
.vl-tw-badge {
  flex-shrink: 0; padding: 4px 12px; border-radius: 999px;
  background: #ffe7df; color: #e0795f; font-size: .76rem; font-weight: 700; white-space: nowrap;
}
.vl-tw-prog { height: 8px; border-radius: 999px; background: #eef2f0; overflow: hidden; margin-bottom: 20px; }
.vl-tw-prog-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#34d399,#10b981); transition: width .3s ease; }

.vl-tw-step-label { font-size: 1.05rem; font-weight: 800; color: #1f2937; margin-bottom: 4px; }
.vl-tw-step-sub { font-size: .85rem; color: #9ca3af; margin-bottom: 16px; }

/* option cards (purpose / difficulty) */
.vl-tw-opts { display: flex; flex-direction: column; gap: 12px; }
.vl-tw-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border: 2px solid #e8f3ee; border-radius: 16px; cursor: pointer;
  background: #f6faf8; transition: border-color .15s, background .15s, box-shadow .15s;
}
.vl-tw-opt:hover { border-color: #a7f3d0; }
.vl-tw-opt.on { border-color: #10b981; background: #ecfdf5; box-shadow: 0 2px 12px rgba(16,185,129,.16); }
.vl-tw-opt-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px; background: #fde8e4;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.vl-tw-opt.on .vl-tw-opt-icon { background: #d1fae5; }
.vl-tw-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vl-tw-opt-name { font-size: 1rem; font-weight: 700; color: #1f2937; }
.vl-tw-opt-desc { font-size: .82rem; color: #9ca3af; }
.vl-tw-radio {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d1d5db;
  position: relative; transition: border-color .15s;
}
.vl-tw-radio.on { border-color: #10b981; }
.vl-tw-radio.on::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #10b981;
}

/* topic grid */
.vl-tw-topic-grid {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(92px,1fr)); gap: 10px;
  max-height: 280px; overflow-y: auto; padding: 2px;
}
.vl-tw-topic {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  padding: 12px 6px; border: 2px solid #e8f3ee; border-radius: 14px; background: #f6faf8;
  transition: border-color .15s, background .15s;
}
.vl-tw-topic:hover { border-color: #a7f3d0; }
.vl-tw-topic.on { border-color: #10b981; background: #ecfdf5; }
.vl-tw-topic-icon { font-size: 1.5rem; line-height: 1; }
.vl-tw-topic-name { font-size: .78rem; font-weight: 600; color: #374151; text-align: center; }
.vl-tw-topic-custom { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.vl-tw-topic-custom-label { font-size: .82rem; font-weight: 700; color: #6b7280; white-space: nowrap; }
.vl-tw-topic-inp {
  flex: 1; min-width: 160px; padding: 9px 13px; border: 1.5px solid #e5e7eb; border-radius: 10px;
  font-size: .9rem; color: #1f2937; background: #fff; font-family: inherit;
}
.vl-tw-topic-inp:focus { outline: none; border-color: #10b981; }

/* number chips */
.vl-tw-nums { display: flex; flex-wrap: wrap; gap: 10px; }
.vl-tw-num {
  width: 52px; height: 52px; border: 2px solid #e8f3ee; border-radius: 14px; cursor: pointer;
  background: #f6faf8; font-size: 1.05rem; font-weight: 700; color: #374151; transition: all .15s;
}
.vl-tw-num:hover { border-color: #a7f3d0; }
.vl-tw-num.on { border-color: #10b981; background: #10b981; color: #fff; transform: scale(1.05); }

/* writing style: extra requirements */
.vl-tw-extra { margin-top: 16px; }
.vl-tw-extra-label { display: block; font-size: .82rem; font-weight: 700; color: #6b7280; margin-bottom: 6px; }
.vl-tw-extra-ta {
  width: 100%; box-sizing: border-box; padding: 10px 14px; resize: vertical;
  border: 1.5px solid #e8f3ee; border-radius: 12px; font-size: .9rem; color: #1f2937;
  background: #f6faf8; font-family: inherit; line-height: 1.55; transition: border-color .15s;
}
.vl-tw-extra-ta:focus { outline: none; border-color: #10b981; background: #fff; }
.vl-overlay.vl-dark .vl-tw-extra-ta { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* confirm summary */
.vl-tw-summary { display: flex; flex-direction: column; gap: 2px; background: #f6faf8; border: 1.5px solid #e8f3ee; border-radius: 14px; padding: 8px 14px; }
.vl-tw-sum-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef2f0; }
.vl-tw-sum-row:last-child { border-bottom: none; }
.vl-tw-sum-ic { font-size: 1.15rem; width: 24px; text-align: center; }
.vl-tw-sum-k { font-size: .85rem; color: #9ca3af; min-width: 78px; }
.vl-tw-sum-v { font-size: .92rem; font-weight: 700; color: #1f2937; margin-left: auto; }
.vl-tw-copy-prompt { display: block; width: 100%; margin-top: 14px; padding: 11px; border-radius: 12px; border: 1.5px solid #cbd5e1; background: #fff; color: #334155; font-size: .9rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.vl-tw-copy-prompt:hover { background: #f1f5f9; border-color: #94a3b8; }
.vl-tw-copy-hint { font-size: .76rem; color: #9ca3af; text-align: center; margin-top: 7px; line-height: 1.4; }
.vl-overlay.vl-dark .vl-tw-copy-prompt { background: #1e293b; border-color: #475569; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-tw-copy-prompt:hover { background: #334155; }

/* preview / edit content */
.vl-tw-preview-ta {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 220px;
  padding: 14px 16px; border: 2px solid #e8f3ee; border-radius: 14px;
  font-size: .95rem; line-height: 1.9; color: #1f2937; background: #f6faf8; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.vl-tw-preview-ta:focus { outline: none; border-color: #10b981; background: #fff; }
.vl-overlay.vl-dark .vl-tw-preview-ta { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-tw-preview-ta:focus { background: #1e293b; border-color: #10b981; }

/* actions */
.vl-tw-actions { display: flex; gap: 12px; margin-top: 22px; }
.vl-tw-back {
  padding: 13px 22px; border: 1.5px solid #e5e7eb; border-radius: 14px; cursor: pointer;
  background: #f8fafc; color: #64748b; font-size: .95rem; font-weight: 700; transition: background .15s;
}
.vl-tw-back:hover { background: #f1f5f9; }
.vl-tw-next {
  flex: 1; padding: 13px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg,#10b981,#059669); color: #fff; font-size: 1rem; font-weight: 800;
  box-shadow: 0 6px 18px rgba(16,185,129,.32); transition: transform .15s, box-shadow .15s, opacity .15s;
}
.vl-tw-next:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(16,185,129,.4); }
.vl-tw-next:disabled { opacity: .7; transform: none; cursor: default; box-shadow: none; }

/* dark mode */
.vl-overlay.vl-dark .vl-tw-card { background: #1e293b; box-shadow: 0 10px 36px rgba(0,0,0,.4); }
.vl-overlay.vl-dark .vl-tw-title, .vl-overlay.vl-dark .vl-tw-step-label,
.vl-overlay.vl-dark .vl-tw-opt-name, .vl-overlay.vl-dark .vl-tw-sum-v { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-tw-prog { background: #334155; }
.vl-overlay.vl-dark .vl-tw-opt, .vl-overlay.vl-dark .vl-tw-topic,
.vl-overlay.vl-dark .vl-tw-num, .vl-overlay.vl-dark .vl-tw-summary { background: #0f172a; border-color: #334155; }
.vl-overlay.vl-dark .vl-tw-opt.on, .vl-overlay.vl-dark .vl-tw-topic.on { background: #064e3b; border-color: #10b981; }
.vl-overlay.vl-dark .vl-tw-num.on { background: #10b981; border-color: #10b981; color: #fff; }
.vl-overlay.vl-dark .vl-tw-topic-name, .vl-overlay.vl-dark .vl-tw-num { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-tw-topic-inp { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-tw-sum-row { border-bottom-color: #334155; }
.vl-overlay.vl-dark .vl-tw-back { background: #334155; border-color: #475569; color: #cbd5e1; }

/* ── My Word Lists ── */
.vl-level-mylist { background: linear-gradient(135deg,#eef2ff,#e0e7ff) !important; border-color: #a5b4fc !important; }
.vl-level-mylist:hover { border-color: #6366f1 !important; }

.vl-ml-loading { padding: 48px 20px; text-align: center; font-size: 1rem; color: #9ca3af; }
.vl-ml-empty  { padding: 48px 20px; text-align: center; font-size: .95rem; color: #9ca3af; }

/* topbar */
.vl-ml-wrap    { max-width: 1200px; margin: 0 auto; padding: 12px 12px 40px; }
.vl-ml-topbar  { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
.vl-ml-total   { font-size: .82rem; color: #6b7280; flex: 1; }
.vl-ml-create-btn {
  padding: 8px 16px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg,#4f46e5,#6366f1); color: #fff;
  font-size: .85rem; font-weight: 700; transition: opacity .15s;
}
.vl-ml-create-btn:hover { opacity: .88; }

/* ── My Word List — thẻ pastel ── */
.vl-ml2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 4px; }
.vl-ml2-card {
  background: var(--acbg, #f1f5f9); border: 1.5px solid transparent; border-radius: 20px;
  padding: 18px 18px 16px; display: flex; flex-direction: column;
  box-shadow: 0 4px 16px rgba(15,23,42,.05); transition: transform .15s, box-shadow .15s;
}
.vl-ml2-card:not(.vl-ml2-add):hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15,23,42,.12); }
.vl-ml2-top { display: flex; align-items: center; gap: 12px; }
.vl-ml2-ico {
  flex: none; width: 48px; height: 48px; border-radius: 14px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.55rem;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.vl-ml2-head { flex: 1; min-width: 0; }
.vl-ml2-name { font-size: 1.18rem; font-weight: 800; color: var(--ac, #1e293b); line-height: 1.2; word-break: break-word; }
.vl-ml2-sub { font-size: .8rem; color: #64748b; margin-top: 2px; font-weight: 600; }
.vl-ml2-del {
  flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.55); color: #ef4444; cursor: pointer; font-size: .95rem; align-self: flex-start;
}
.vl-ml2-del:hover { background: #fee2e2; border-color: #fca5a5; }
.vl-ml2-barrow { display: flex; align-items: center; gap: 10px; margin: 15px 0 14px; }
.vl-ml2-bar { flex: 1; height: 9px; border-radius: 999px; background: rgba(255,255,255,.7); overflow: hidden; }
.vl-ml2-fill { height: 100%; border-radius: 999px; background: var(--ac, #6366f1); transition: width .4s; }
.vl-ml2-pct { font-size: .9rem; font-weight: 800; color: var(--ac, #475569); min-width: 42px; text-align: right; }
.vl-ml2-btns { display: flex; gap: 10px; }
.vl-ml2-view {
  flex: 1; background: #fff; border: 1.5px solid rgba(15,23,42,.08); border-radius: 13px; padding: 11px 0;
  font-weight: 700; font-size: .92rem; color: #475569; cursor: pointer; transition: background .14s;
}
.vl-ml2-view:hover { background: #f8fafc; }
.vl-ml2-test {
  flex: 1.2; background: var(--ac, #6366f1); border: none; border-radius: 13px; padding: 11px 0;
  font-weight: 800; font-size: .92rem; color: #fff; cursor: pointer; transition: filter .14s;
}
.vl-ml2-test:hover { filter: brightness(.93); }
.vl-ml2-add {
  border: 2px dashed #cbd5e1; background: transparent; box-shadow: none;
  align-items: center; justify-content: center; text-align: center; min-height: 190px; cursor: pointer;
}
.vl-ml2-add:hover { border-color: var(--accent, #6366f1); background: rgba(99,102,241,.04); }
.vl-ml2-add-plus {
  width: 56px; height: 56px; border-radius: 50%; background: #ede9fe; color: #7c3aed;
  font-size: 1.9rem; font-weight: 300; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.vl-ml2-add-ttl { font-size: 1.05rem; font-weight: 800; color: #6366f1; }
.vl-ml2-add-sub { font-size: .8rem; color: #94a3b8; margin-top: 3px; }
.vl-overlay.vl-dark .vl-ml2-name { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-ml2-ico { background: #0f172a; }
.vl-overlay.vl-dark .vl-ml2-view { background: #0f172a; color: #cbd5e1; border-color: #334155; }
@media (max-width: 1200px) { .vl-ml2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .vl-ml2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .vl-ml2-grid { grid-template-columns: 1fr; } }
/* Thẻ hẹp hơn khi 4 cột → thu gọn padding/icon cho gọn */
.vl-ml2-card { padding: 16px 15px 14px; }
.vl-ml2-ico { width: 42px; height: 42px; font-size: 1.35rem; }
.vl-ml2-name { font-size: 1.05rem; }

/* create form */
.vl-ml-create-form {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 12px 14px;
  background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 12px;
}
.vl-ml-create-inp {
  flex: 1; padding: 8px 12px; border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: .9rem; color: #1f2937; background: #fff; font-family: inherit;
}
.vl-ml-create-inp:focus { outline: none; border-color: #6366f1; }
.vl-ml-create-ok {
  padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: #6366f1; color: #fff; font-size: .85rem; font-weight: 700;
}
.vl-ml-create-cancel {
  padding: 8px 14px; border: none; border-radius: 8px; cursor: pointer;
  background: #f1f5f9; color: #475569; font-size: .85rem; font-weight: 600;
}

/* list grid */
.vl-ml-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.vl-ml-card {
  background: var(--gc-bg, #eef2ff); border: 1.5px solid var(--gc-border, #a5b4fc);
  border-radius: 14px; padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: default; transition: border-color .15s, box-shadow .15s;
}
.vl-ml-card:hover { border-color: #6366f1; box-shadow: 0 3px 14px rgba(99,102,241,.15); }
.vl-ml-card-name  { font-size: .95rem; font-weight: 800; color: #1e1b4b; word-break: break-word; }
.vl-ml-card-count { font-size: .78rem; color: #6b7280; }
.vl-ml-card-btns  { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.vl-ml-del-btn {
  margin-left: auto; background: rgba(239,68,68,.1); border: none; border-radius: 7px;
  color: #dc2626; font-size: .85rem; cursor: pointer; padding: 4px 8px; transition: background .15s;
}
.vl-ml-del-btn:hover { background: rgba(239,68,68,.2); }

/* detail */
.vl-ml-detail-wrap    { max-width: 700px; margin: 0 auto; padding: 10px 12px 40px; }
.vl-ml-detail-topbar  { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
.vl-ml-word-count     { font-size: .82rem; color: #6b7280; margin-left: auto; }

/* word chips */
.vl-ml-words-section  { background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; min-height: 60px; }
.vl-ml-words-empty    { font-size: .85rem; color: #9ca3af; }
.vl-ml-word-chips     { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-ml-word-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; background: #fff; border: 1.5px solid #c7d2fe;
  border-radius: 20px; font-size: .84rem; font-weight: 600; color: #3730a3;
}
.vl-ml-word-lv {
  font-size: .68rem; font-weight: 700; padding: 1px 5px;
  background: #e0e7ff; color: #4338ca; border-radius: 5px;
}
.vl-ml-chip-del {
  background: none; border: none; cursor: pointer; font-size: .9rem;
  color: #9ca3af; line-height: 1; padding: 0 2px; border-radius: 4px;
  transition: all .15s;
}
.vl-ml-chip-del:hover { background: rgba(239,68,68,.15); color: #ef4444; }

/* search section */
.vl-ml-search-label    { font-size: .82rem; font-weight: 700; color: #6b7280; margin-bottom: 8px; letter-spacing: .02em; }
.vl-ml-search-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vl-ml-search-label-row .vl-ml-search-label { margin-bottom: 0; }

/* bulk add */
.vl-ml-bulk-btn {
  padding: 5px 12px; border: 1.5px solid #c7d2fe; border-radius: 8px; cursor: pointer;
  background: #eef2ff; color: #4338ca; font-size: .78rem; font-weight: 700; transition: background .15s;
}
.vl-ml-bulk-btn:hover { background: #e0e7ff; }
.vl-ml-bulk-form {
  margin-bottom: 12px; padding: 12px 14px;
  background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 12px;
}
.vl-ml-bulk-inp {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 70px;
  padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 10px;
  font-size: .9rem; color: #1f2937; background: #fff; font-family: inherit;
  transition: border-color .15s;
}
.vl-ml-bulk-inp:focus { outline: none; border-color: #6366f1; }
.vl-ml-bulk-btns { display: flex; gap: 8px; margin-top: 8px; }
.vl-ml-search-row      { margin-bottom: 8px; }
.vl-ml-search-inp {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 10px;
  font-size: .9rem; color: #1f2937; background: #fff; font-family: inherit;
  transition: border-color .15s;
}
.vl-ml-search-inp:focus { outline: none; border-color: #6366f1; background: #fff; }

/* search results */
.vl-ml-search-results  { display: flex; flex-direction: column; gap: 6px; }
.vl-ml-search-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: #fff; border: 1.5px solid #e5e7eb;
  border-radius: 10px; transition: border-color .15s;
}
.vl-ml-search-item:hover { border-color: #a5b4fc; }
.vl-ml-si-word   { flex: 1; font-size: .9rem; font-weight: 600; color: #1f2937; }
.vl-ml-si-lv     { font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.vl-ml-si-add    {
  padding: 5px 12px; border: none; border-radius: 7px; cursor: pointer;
  background: #6366f1; color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap;
  transition: opacity .15s;
}
.vl-ml-si-add:hover { opacity: .85; }
.vl-ml-si-added  { font-size: .82rem; color: #16a34a; font-weight: 700; white-space: nowrap; }
.vl-ml-not-found {
  padding: 14px 16px; background: #f8fafc; border: 1.5px solid #e5e7eb;
  border-radius: 10px; font-size: .85rem; color: #9ca3af;
}

@media(max-width:480px) {
  .vl-ml-grid { grid-template-columns: 1fr 1fr; }
}

.vl-countries-wrap { max-width: 900px; margin: 20px auto; padding: 0 12px 40px; }

/* ── New country card layout ── */
.vl-cntry-cards { display: flex; flex-direction: column; gap: 14px; }
.vl-cntry-card2 {
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .15s;
}
.vl-cntry-card2:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.vl-cntry-card2-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg,#eff6ff 0%,#fafafa 100%);
  border-bottom: 1.5px solid #e2e8f0;
  flex-wrap: wrap;
}
.vl-cntry-card2-num {
  font-size: .68em; font-weight: 800; color: #94a3b8;
  background: #f1f5f9; border-radius: 6px;
  padding: 2px 7px; flex-shrink: 0;
}
.vl-cntry-card2-cname {
  font-size: 1em; font-weight: 800; color: #1e3a5f;
}
.vl-cntry-card2-arr { color: #93c5fd; font-size: .9em; flex-shrink: 0; }
.vl-cntry-card2-nname {
  font-size: 1em; font-weight: 800; color: #1d4ed8;
}
.vl-bg-dark .vl-cntry-card2-hdr { background: linear-gradient(90deg,rgba(30,58,138,.15),rgba(255,255,255,.04)); border-color: rgba(255,255,255,.1); }
.vl-bg-dark .vl-cntry-card2-cname { color: #bfdbfe; }
.vl-bg-dark .vl-cntry-card2-nname { color: #93c5fd; }

.vl-cntry-card2-cols {
  display: grid; grid-template-columns: 1fr 1fr;
}
.vl-ccc {
  padding: 14px 16px;
  border-right: 1.5px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 5px;
}
.vl-ccc:last-child { border-right: none; }
.vl-ccc-country { background: linear-gradient(160deg,#f8fafc,#fff); }
.vl-ccc-nat     { background: linear-gradient(160deg,#eff6ff,#fff); }
.vl-bg-dark .vl-ccc-country { background: rgba(255,255,255,.03); }
.vl-bg-dark .vl-ccc-nat     { background: rgba(59,130,246,.06); }
.vl-bg-dark .vl-ccc { border-color: rgba(255,255,255,.07); }

.vl-ccc-badge-row { margin-bottom: 2px; }
.vl-ccc-badge {
  display: inline-block;
  font-size: .6em; font-weight: 800; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
}
.vl-ccc-badge-c { background: #f1f5f9; color: #475569; }
.vl-ccc-badge-n { background: #dbeafe; color: #1d4ed8; }
.vl-bg-dark .vl-ccc-badge-c { background: rgba(255,255,255,.1); color: #94a3b8; }
.vl-bg-dark .vl-ccc-badge-n { background: rgba(59,130,246,.2); color: #93c5fd; }

.vl-ccc-form {
  font-size: 1.2em; font-weight: 800; line-height: 1.2;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.vl-ccc-country .vl-ccc-form { color: #1e3a5f; }
.vl-ccc-nat     .vl-ccc-form { color: #1d4ed8; }
.vl-bg-dark .vl-ccc-country .vl-ccc-form { color: #bfdbfe; }
.vl-bg-dark .vl-ccc-nat     .vl-ccc-form { color: #93c5fd; }

.vl-ccc-ipa {
  font-size: .76em; color: #64748b; font-family: 'Courier New',monospace;
}
.vl-bg-dark .vl-ccc-ipa { color: #94a3b8; }

.vl-ccc-pos {
  font-size: .62em; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #94a3b8;
}
.vl-ccc-vi {
  font-size: .78em; color: #475569; line-height: 1.5;
  border-left: 2px solid #e2e8f0; padding-left: 8px; margin: 2px 0;
}
.vl-bg-dark .vl-ccc-vi { color: #94a3b8; border-color: #334155; }

.vl-ccc-ex {
  font-size: .74em; font-style: italic; color: #64748b;
  line-height: 1.5; margin-top: auto; padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
.vl-bg-dark .vl-ccc-ex { color: #94a3b8; border-color: #334155; }

.vl-ccc-sp {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: .78em; opacity: .4; line-height: 1; flex-shrink: 0;
  transition: opacity .12s;
}
.vl-ccc-sp:hover { opacity: 1; }

/* highlight in example */
.vl-cntry-hl { font-style: normal; font-weight: 700; color: #2563eb; }
.vl-bg-dark .vl-cntry-hl { color: #93c5fd; }

.vl-cntry-hdr-controls { display: flex; align-items: center; gap: 4px; }
.vl-cntry-font-sel {
  font-size: .75rem; padding: 2px 4px; border-radius: 5px;
  border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; cursor: pointer; max-width: 90px;
}
.vl-bg-dark .vl-cntry-font-sel { background: rgba(255,255,255,.1); color: #e2e8f0; border-color: rgba(255,255,255,.2); }

@media (max-width: 560px) {
  .vl-cntry-card2-cols { grid-template-columns: 1fr; }
  .vl-ccc { border-right: none; border-bottom: 1.5px solid #f1f5f9; }
  .vl-ccc:last-child { border-bottom: none; }
  .vl-ccc-form { font-size: 1.05rem; }
}

/* ── Groups screen ── */
.vl-groups-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; max-width: 1100px; margin: 0 auto;
  padding-top: 24px; padding-bottom: 80px;
}
@media (max-width: 700px) {
  .vl-groups-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 12px; }
  .vl-group-card { min-width: 0; padding: 10px 10px 10px; }
  .vl-group-num { font-size: .76rem; }
  .vl-group-num strong { font-size: 1.05rem; }
  .vl-group-count { font-size: .7rem; }
  .vl-group-list-btn, .vl-group-test-btn { font-size: .72rem; padding: 7px 2px; }
  .vl-gc-miss-ex { display: none; }
}
.vl-group-card {
  background: var(--gc-bg, #f0f9ff); border: 2px solid var(--gc-border, #0891b2);
  border-radius: 14px; padding: 14px 14px 14px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: transform .13s, box-shadow .13s, border-color .13s;
  position: relative;
}
.vl-group-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.vl-group-sel {
  border-color: var(--gc-border); border-width: 2.5px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-border) 20%, transparent), 0 4px 16px rgba(0,0,0,.1);
}

/* Checkbox indicator */
.vl-group-chk {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid #cbd5e1; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 900; color: #fff;
  transition: all .13s; flex-shrink: 0;
}
.vl-group-chk-on {
  background: var(--gc-border, #0891b2); border-color: var(--gc-border, #0891b2);
}
.vl-group-btns-wrap {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin-top: 2px;
}
.vl-group-done-bar {
  position: relative; height: 18px; background: #d1fae5;
  border-radius: 20px; overflow: hidden; pointer-events: none;
}
.vl-group-done-fill {
  position: absolute; inset: 0; right: auto;
  background: #16a34a; border-radius: 20px;
  transition: width .4s ease;
}
.vl-group-done-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.vl-group-done { border-color: #86efac !important; }

/* ── Status filter bar + level progress ──────────────────────────── */
.vl-grp-statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; max-width: 1100px; margin: 14px auto 0; padding: 0 2px;
}
.vl-gf-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vl-gf-tab {
  padding: 6px 14px; border-radius: 20px; border: 1.5px solid #e2e8f0;
  background: #fff; color: #64748b; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all .14s; display: inline-flex; align-items: center; gap: 6px;
}
.vl-gf-tab:hover { border-color: #cbd5e1; }
.vl-gf-cnt {
  font-size: .7rem; font-weight: 800; min-width: 18px; text-align: center;
  padding: 1px 6px; border-radius: 10px; background: #f1f5f9; color: #475569;
}
.vl-gf-active { background: #10b981; border-color: #10b981; color: #fff; }
.vl-gf-active .vl-gf-cnt { background: rgba(255,255,255,.25); color: #fff; }
.vl-lv-prog { display: flex; align-items: center; gap: 8px; }
.vl-lv-prog-lbl { font-size: .78rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.vl-lv-prog-bar { width: 130px; height: 8px; border-radius: 20px; background: #e5e7eb; overflow: hidden; }
.vl-lv-prog-fill { height: 100%; border-radius: 20px; transition: width .4s ease; }
.vl-lv-prog-pct { font-size: .85rem; font-weight: 800; white-space: nowrap; }

/* ── Redesigned group card (vl-gc2) ─────────────────────────────── */
.vl-group-card.vl-gc2 {
  background: var(--gc-statbg, #f9fafb);
  border: 1.5px solid color-mix(in srgb, var(--gc-stat) 30%, #e2e8f0);
  border-left: 5px solid var(--gc-stat);
  gap: 8px; padding: 13px 14px;
}
.vl-group-card.vl-gc2:hover { border-color: var(--gc-stat); }
.vl-group-card.vl-gc2.vl-group-sel {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-stat) 22%, transparent), 0 4px 16px rgba(0,0,0,.1);
}
.vl-gc2 .vl-group-chk { display: none; }
.vl-groups-pos .vl-group-card.vl-gc2,
.vl-groups-topic .vl-group-card.vl-gc2 { align-items: stretch; text-align: left; }

.vl-gc-top { display: flex; align-items: center; gap: 10px; }
.vl-gc-numbadge {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--gc-stat); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.02rem; font-weight: 900;
}
.vl-gc-headtxt { flex: 1; min-width: 0; }
.vl-gc-kicker { font-size: .6rem; font-weight: 800; letter-spacing: .08em; color: #94a3b8; }
.vl-gc-status { font-size: .82rem; font-weight: 800; line-height: 1.25; }
.vl-gc-status-warn { color: #d97706; }
.vl-gc-ring {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(var(--rc) calc(var(--p) * 1%), #e5e7eb 0);
  display: flex; align-items: center; justify-content: center;
}
.vl-gc-ring::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--gc-statbg, #fff);
}
.vl-gc-ring span { position: relative; font-size: .56rem; font-weight: 800; color: var(--rc); }
.vl-gc-star {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; color: #fff; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--gc-border) 45%, transparent);
}
.vl-gc-title {
  font-size: .9rem; font-weight: 800; color: var(--gc-text, #0c4a6e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vl-gc-mastered { font-size: .72rem; font-weight: 600; color: #64748b; }
.vl-gc-pbar { height: 7px; border-radius: 20px; background: #e5e7eb; overflow: hidden; }

/* ── Font Baloo 2 cho thẻ chủ đề/nhóm trong Vocab by Level ── */
.vl-group-card { font-family: 'Baloo 2', 'Nunito', sans-serif; }
.vl-group-card .vl-gc-title { font-size: 1rem; font-weight: 700; line-height: 1.22; }
.vl-group-card .vl-gc-status { font-weight: 600; }
.vl-group-card .vl-gc-mastered { font-size: .75rem; font-weight: 500; }
.vl-group-card .vl-group-list-btn,
.vl-group-card .vl-group-test-btn { font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 700; }
.vl-gc-pfill { height: 100%; border-radius: 20px; transition: width .4s ease; }
@media (max-width: 700px) {
  .vl-grp-statusbar { gap: 10px; }
  .vl-lv-prog-bar { width: 90px; }
  .vl-gc-kicker { display: none; }
  .vl-gc-numbadge { width: 30px; height: 30px; font-size: .9rem; }
  .vl-gc-ring, .vl-gc-star { width: 34px; height: 34px; }
}

/* Sticky multi-select bar */
.vl-sel-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; margin: 0 -20px;
  background: #fff; border-top: 2.5px solid;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  animation: vlSlideIn .2s ease;
}
.vl-sel-info { font-size: .88rem; color: #1e293b; }
.vl-sel-test-btn {
  padding: 9px 22px; border: none; border-radius: 10px; color: #fff;
  font-size: .88rem; font-weight: 700; cursor: pointer; transition: opacity .12s;
}
.vl-sel-test-btn:hover { opacity: .85; }
.vl-sel-bar-btns { display: flex; align-items: center; gap: 8px; }
.vl-sel-clear-btn {
  padding: 7px 13px; border: 1.5px solid #cbd5e1; border-radius: 8px;
  background: #fff; color: #64748b; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.vl-sel-clear-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.vl-group-num {
  font-size: .82rem; color: var(--gc-text, #0c4a6e); letter-spacing: .03em;
}
.vl-group-num strong { font-size: 1.25rem; font-weight: 900; }
.vl-group-range {
  font-size: .75rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vl-group-count {
  font-size: .78rem; font-weight: 700;
  display: inline-block; padding: 2px 8px;
  background: var(--gc-badge, #bae6fd); color: var(--gc-text, #0c4a6e);
  border-radius: 999px; align-self: flex-start;
}
/* ── Star list preview screen ── */
.vl-star-list-wrap { max-width: 640px; margin: 0 auto; padding: 12px 0 32px; }
.vl-star-list-meta { font-size: .8rem; color: #64748b; margin-bottom: 10px; }
.vl-star-no-vi-note { color: #ef4444; }
.vl-star-list-empty { text-align: center; color: #94a3b8; padding: 40px 0; font-size: .9rem; }
.vl-star-word-rows { display: flex; flex-direction: column; gap: 6px; }
.vl-star-word-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px; transition: border-color .12s;
}
.vl-star-word-row:hover { border-color: #cbd5e1; }
.vl-star-row-novi { opacity: .6; }
.vl-star-row-body { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vl-star-row-word { font-weight: 800; color: #0c4a6e; font-size: 1rem; }
.vl-star-row-ipa { font-size: .78rem; color: #7c3aed; }
.vl-star-row-vi { font-size: .82rem; color: #1e293b; font-weight: 600; }
.vl-star-row-nolabel { font-size: .75rem; color: #94a3b8; font-style: italic; }
.vl-star-row-unstar {
  flex-shrink: 0; background: none; border: 1.5px solid #fcd34d;
  border-radius: 7px; width: 32px; height: 32px; cursor: pointer;
  font-size: 1rem; color: #f59e0b; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .1s;
}
.vl-star-row-unstar:hover { background: #fef3c7; transform: scale(1.1); }
.vl-star-list-footer { margin-top: 18px; display: flex; justify-content: center; }

.vl-gc-miss-ex {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; align-items: center;
}
.vl-gc-miss-lbl {
  font-size: .64rem; font-weight: 700; color: #b45309;
  white-space: nowrap; margin-right: 2px;
}
.vl-gc-miss-chip {
  font-size: .64rem; padding: 1px 5px; border-radius: 4px;
  background: #fef3c7; color: #92400e; cursor: pointer;
  border: 1px solid #fcd34d; transition: background .1s;
  white-space: nowrap;
}
.vl-gc-miss-chip:hover { background: #fde68a; }
.vl-group-btns { display: flex; gap: 6px; width: 100%; }
.vl-group-list-btn {
  flex: 1; padding: 8px 4px;
  border: 1.5px solid var(--gc-border, #0891b2);
  border-radius: 10px; background: transparent; color: var(--gc-text, #0c4a6e);
  font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: background .12s; white-space: nowrap;
}
.vl-group-list-btn:hover { background: color-mix(in srgb, var(--gc-border) 10%, transparent); }
.vl-group-test-btn {
  flex: 1; padding: 8px 4px;
  border: none; border-radius: 10px; color: #fff;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: filter .12s; white-space: nowrap;
}
.vl-group-test-btn:hover { filter: brightness(1.1); }

/* ── POS group mode ── */
.vl-group-mode-bar {
  display: flex; gap: 8px; justify-content: flex-end;
  max-width: 1100px; margin: 8px auto 0; padding: 0 2px;
}
.vl-gmt-btn {
  padding: 7px 20px; border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: .92rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; transition: all .15s;
}
/* Mặc định = pastel nhạt; khi chọn (.vl-gmt-active) = đậm hơn, chữ trắng */
.vl-gmt-pos   { background: #f6e3e3; color: #a86a6a; }
.vl-gmt-pos:hover   { background: #efd2d2; }
.vl-gmt-pos.vl-gmt-active   { background: #d1495b !important; color: #fff !important; box-shadow: 0 3px 10px rgba(209,73,91,.40); }
.vl-gmt-alpha { background: #e4efe0; color: #6f9466; }
.vl-gmt-alpha:hover { background: #d6e7d0; }
.vl-gmt-alpha.vl-gmt-active { background: #4a9e3f !important; color: #fff !important; box-shadow: 0 3px 10px rgba(74,158,63,.40); }
.vl-gmt-topic { background: #e1ecf6; color: #5f87a9; }
.vl-gmt-topic:hover { background: #d2e2f0; }
.vl-gmt-topic.vl-gmt-active { background: #2e7fc4 !important; color: #fff !important; box-shadow: 0 3px 10px rgba(46,127,196,.40); }
.vl-gmt-list-btn { background: #f1d9c9; color: #b06a44; }
.vl-gmt-list-btn:hover { background: #e9cdb9; color: #9a5a38; }

/* ── Word List Mode ── */
.vl-wl-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  position: sticky; top: 0; z-index: 10;
  background: #f8fafc; padding: 8px 0 6px;
  margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
}
.vl-overlay.vl-dark .vl-wl-bar { background: #0f172a; }
.vl-wl-search { flex: 1; min-width: 180px; }
.vl-wl-hint { background: #f0fdf4; border: 1px solid #86efac; border-radius: 10px; padding: 9px 14px; font-size: .8rem; color: #166534; margin-bottom: 10px; }
.vl-wl-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vl-wl-count { font-size: .8rem; font-weight: 700; color: #0891b2; background: #e0f2fe; padding: 3px 10px; border-radius: 999px; }
.vl-wl-selall-btn {
  padding: 5px 14px; border-radius: 20px; border: 1.5px solid #d1d5db;
  font-size: .78rem; font-weight: 600; cursor: pointer; background: transparent; color: #64748b;
  transition: all .12s;
}
.vl-wl-selall-btn:hover { border-color: #0891b2; color: #0891b2; background: #f0f9ff; }
.vl-wl-star-btn {
  padding: 5px 12px; border-radius: 20px; border: 1.5px solid #fbbf24;
  font-size: .78rem; font-weight: 600; cursor: pointer; background: transparent; color: #b45309;
  transition: all .12s;
}
.vl-wl-star-btn:hover { background: #fefce8; border-color: #f59e0b; }
.vl-wl-star-btn.vl-wl-star-btn-on { background: #f59e0b; border-color: #d97706; color: #fff; }
.vl-wl-star-btn.vl-wl-star-btn-on:hover { background: #d97706; }
.vl-wl-clear-btn {
  padding: 5px 12px; border-radius: 20px; border: 1.5px solid #fca5a5;
  font-size: .78rem; font-weight: 600; cursor: pointer; background: transparent; color: #ef4444;
  transition: all .12s;
}
.vl-wl-clear-btn:hover { background: #fef2f2; }
.vl-wl-del-sel-btn {
  padding: 5px 12px; border-radius: 20px; border: 1.5px solid #dc2626;
  font-size: .78rem; font-weight: 600; cursor: pointer; background: #dc2626; color: #fff;
  transition: all .12s;
}
.vl-wl-del-sel-btn:hover { background: #b91c1c; border-color: #b91c1c; }
.vl-wl-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
@media(max-width:900px) { .vl-wl-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:500px)  { .vl-wl-grid { grid-template-columns: 1fr; } }
@media(max-width:700px) {
  .vl-group-mode-bar { gap: 5px; justify-content: center; }
  .vl-gmt-btn { padding: 4px 9px; font-size: .7rem; }
  .vl-add-toggle-btn, .vl-admin-btn { display: none !important; }
  .vl-miss-btn, .vl-miss-wrap { display: none !important; }
}
.vl-wl-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 14px; border-radius: 10px;
  /* pastel tint per POS (--pbg/--pac) */
  border: 1.5px solid color-mix(in srgb, var(--pac, #cbd5e1) 24%, #ffffff);
  background: color-mix(in srgb, var(--pbg, #f8fafc) 42%, #ffffff);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.vl-wl-row:hover {
  border-color: color-mix(in srgb, var(--pac, #38bdf8) 55%, #ffffff);
  background: color-mix(in srgb, var(--pbg, #f0f9ff) 70%, #ffffff);
}
.vl-wl-row-on {
  border-color: var(--pac, #0891b2) !important;
  background: color-mix(in srgb, var(--pbg, #e0f2fe) 88%, #ffffff) !important;
}
.vl-wl-chk {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: #0891b2; flex-shrink: 0;
  transition: all .12s;
}
.vl-wl-row-on .vl-wl-chk { border-color: var(--pac, #0891b2); background: var(--pac, #0891b2); color: #fff; }
.vl-wl-word { font-weight: 700; font-size: .95rem; color: var(--text); min-width: 100px; flex-shrink: 0; }
.vl-wl-pos {
  font-size: .72rem; padding: 1px 8px; border-radius: 999px;
  background: var(--pbg, #f1f5f9); color: var(--ptx, #64748b); font-weight: 700; flex-shrink: 0;
}
.vl-wl-vi { font-size: .85rem; color: var(--muted); flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Mastery status: green = đã thuộc, red = chưa thuộc */
.vl-wl-mastered   { border-left: 4px solid #16a34a; }
.vl-wl-unmastered { border-left: 4px solid #dc2626; }
.vl-wl-mastered   .vl-wl-word { color: #15803d; font-weight: 800; }
.vl-wl-unmastered .vl-wl-word { color: #dc2626; font-weight: 800; }

.vl-bg-dark .vl-wl-row { background: rgba(255,255,255,.04); }
.vl-bg-dark .vl-wl-row:hover { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.3); }
.vl-bg-dark .vl-wl-row-on { background: rgba(14,165,233,.15) !important; border-color: #0ea5e9 !important; }
.vl-bg-dark .vl-wl-pos { background: rgba(255,255,255,.08); color: #94a3b8; }
.vl-bg-dark .vl-wl-mastered   .vl-wl-word { color: #4ade80; }
.vl-bg-dark .vl-wl-unmastered .vl-wl-word { color: #f87171; }

/* ── Learn through pictures ───────────────────────────────────────────── */
.vl-pics-detail { max-width: 1000px; margin: 0 auto; width: 100%; }
.vl-pics-toolbar { display: flex; justify-content: center; margin-bottom: 16px; }
.vl-pics-ss-btn {
  border: none; cursor: pointer; border-radius: 999px;
  background: #0d9488; color: #fff; font-size: .92rem; font-weight: 800;
  padding: 10px 24px; box-shadow: 0 4px 14px rgba(13,148,136,.3);
  transition: filter .12s, transform .1s;
}
.vl-pics-ss-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* slideshow pics mode: ảnh lớn mặt trước */
.vl-ss-pic-img {
  max-width: 78%; max-height: 48%; object-fit: contain; border-radius: 14px;
  margin-bottom: 14px; box-shadow: 0 4px 16px rgba(15,23,42,.12);
}
.vl-ss-pic-noimg { font-size: 3.4rem; margin-bottom: 14px; opacity: .5; }
.vl-ss-pic-speak { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.vl-pics-add-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.vl-pics-add-bar .vl-ml-search-inp { flex: 1; min-width: 180px; }
.vl-pics-miss-btn {
  border: 1.5px solid #f59e0b; background: #fffbeb; color: #b45309;
  border-radius: 8px; font-size: .82rem; font-weight: 700; cursor: pointer;
  padding: 0 14px; white-space: nowrap; transition: background .12s;
}
.vl-pics-miss-btn:hover { background: #fef3c7; }
.vl-pics-missing {
  background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px;
}
.vl-pics-miss-row { font-size: .85rem; color: #1e293b; }
.vl-pics-miss-ok { color: #16a34a; font-weight: 600; }
.vl-pics-miss-head { display: flex; align-items: center; gap: 8px; color: #b45309; margin-bottom: 3px; }
.vl-pics-miss-copy {
  border: 1px solid #fcd34d; background: #fff; color: #b45309; cursor: pointer;
  border-radius: 6px; font-size: .72rem; font-weight: 700; padding: 2px 8px;
}
.vl-pics-miss-copy:hover { background: #fef3c7; }
.vl-pics-miss-list { color: #475569; line-height: 1.6; overflow-wrap: anywhere; }
.vl-pics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.vl-pic-card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  border: 1.5px solid #99f6e4; background: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,.06); transition: box-shadow .15s, transform .1s;
}
.vl-pic-card:hover { box-shadow: 0 8px 22px rgba(15,23,42,.12); transform: translateY(-2px); }
.vl-pic-img {
  position: relative; width: 100%; aspect-ratio: 4/3; background: #f0fdfa;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vl-pic-img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.vl-pic-img-empty { color: #5eead4; font-size: .9rem; font-weight: 700; cursor: pointer; }
.vl-pic-img-empty span { color: #0d9488; }
.vl-pic-img-empty:hover { background: #ccfbf1; }
.vl-pic-img-edit {
  position: absolute; top: 6px; right: 6px; border: none; cursor: pointer;
  background: rgba(255,255,255,.9); color: #0d9488; border-radius: 7px;
  width: 28px; height: 28px; font-size: .9rem; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.vl-pic-img-edit:hover { background: #fff; }
.vl-pic-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.vl-pic-word-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vl-pic-speak {
  border: none; background: none; cursor: pointer; font-size: .95rem; padding: 0;
  line-height: 1; flex-shrink: 0;
}
.vl-pic-word { font-weight: 800; font-size: 1.02rem; color: #0f172a; }
.vl-pic-pos {
  font-size: .68rem; padding: 1px 7px; border-radius: 999px;
  background: var(--pbg, #ccfbf1); color: var(--ptx, #0f766e); font-weight: 700;
}
.vl-pic-del {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: #dc2626; font-size: 1.1rem; line-height: 1; padding: 0 2px; opacity: .7;
}
.vl-pic-del:hover { opacity: 1; }
.vl-pic-ipa { font-size: .76rem; color: #0891b2; }
.vl-pic-vi { font-size: .86rem; color: #475569; line-height: 1.45; }
.vl-bg-dark .vl-pic-card { background: #1e293b; border-color: #134e4a; }
.vl-bg-dark .vl-pic-word { color: #e2e8f0; }
.vl-bg-dark .vl-pic-vi { color: #94a3b8; }
.vl-bg-dark .vl-pic-img { background: #0f172a; }

/* ── Learn through pictures: topics screen (pastel) ── */
.vl-ptopics-wrap { max-width: 1120px; margin: 0 auto; width: 100%; }
.vl-ptopics-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 24px;
}
.vl-ptopics-title { font-size: 1.85rem; font-weight: 800; color: #1e293b; line-height: 1.1; }
.vl-ptopics-sub { color: #64748b; font-size: .92rem; margin-top: 4px; }
.vl-ptopics-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 999px;
  padding: 5px 14px; font-size: .82rem; font-weight: 700; color: #6d28d9;
}
.vl-ptopics-head-r { display: flex; gap: 8px; flex-wrap: wrap; }
.vl-ptopics-new-btn {
  border: none; cursor: pointer; border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #7c3aed); color: #fff;
  font-size: .9rem; font-weight: 800; padding: 11px 22px;
  box-shadow: 0 6px 18px rgba(124,58,237,.32); transition: filter .12s, transform .1s;
}
.vl-ptopics-new-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.vl-ptopics-seed-btn {
  border: 1.5px solid #c4b5fd; cursor: pointer; border-radius: 12px;
  background: #f5f3ff; color: #6d28d9; font-size: .88rem; font-weight: 700; padding: 11px 18px;
  transition: background .12s;
}
.vl-ptopics-seed-btn:hover { background: #ede9fe; }
.vl-ptopics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px;
}
.vl-ptopic-card {
  position: relative; overflow: hidden; cursor: pointer;
  border-radius: 20px; padding: 20px 22px;
  border: 1.5px solid color-mix(in srgb, var(--pc, #94a3b8) 25%, #ffffff);
  border-left: 6px solid var(--pc, #94a3b8);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc, #94a3b8) 13%, #ffffff), #ffffff);
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
  transition: box-shadow .15s, transform .1s; min-height: 150px;
}
.vl-ptopic-card:hover { box-shadow: 0 12px 30px rgba(15,23,42,.13); transform: translateY(-3px); }
.vl-ptopic-deco {
  position: absolute; right: 4px; bottom: 2px; font-size: 5.4rem; line-height: 1;
  opacity: .16; pointer-events: none; transform: rotate(-8deg);
}
.vl-ptopic-ico {
  width: 50px; height: 50px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.55rem;
  box-shadow: 0 2px 8px rgba(15,23,42,.12);
}
.vl-ptopic-name { font-size: 1.25rem; font-weight: 800; color: #1e293b; margin-top: 14px; position: relative; }
.vl-ptopic-count { color: var(--pc, #64748b); font-weight: 700; font-size: .84rem; margin-top: 5px; position: relative; }
.vl-ptopic-actions { display: flex; gap: 8px; align-items: center; margin-top: 18px; position: relative; }
.vl-ptopic-open {
  border: none; cursor: pointer; border-radius: 11px;
  background: var(--pc, #6366f1); color: #fff; font-size: .88rem; font-weight: 800;
  padding: 9px 22px; box-shadow: 0 4px 12px color-mix(in srgb, var(--pc, #6366f1) 35%, transparent);
  transition: filter .12s;
}
.vl-ptopic-open:hover { filter: brightness(1.08); }
.vl-ptopic-edit, .vl-ptopic-del {
  border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer; border-radius: 10px;
  width: 38px; height: 38px; font-size: .95rem; transition: background .12s, border-color .12s;
}
.vl-ptopic-edit { color: var(--pc, #6366f1); }
.vl-ptopic-edit:hover { background: color-mix(in srgb, var(--pc, #6366f1) 12%, #fff); }
.vl-ptopic-del { color: #dc2626; }
.vl-ptopic-del:hover { background: #fef2f2; border-color: #fca5a5; }
.vl-bg-dark .vl-ptopics-title { color: #e2e8f0; }
.vl-bg-dark .vl-ptopic-card { background: #1e293b; border-left-color: var(--pc); }
.vl-bg-dark .vl-ptopic-name { color: #e2e8f0; }
.vl-bg-dark .vl-ptopic-ico { background: #0f172a; }

.vl-groups-pos { grid-template-columns: repeat(3, 1fr); }
.vl-groups-pos .vl-group-card { align-items: center; text-align: center; }
.vl-groups-pos .vl-group-count { align-self: center; }
.vl-groups-pos .vl-group-btns { width: 100%; }
.vl-groups-pos .vl-group-list-btn,
.vl-groups-pos .vl-group-test-btn { flex: 1; padding: 9px 4px; font-size: .82rem; }
@media (max-width: 700px) {
  .vl-groups-pos { grid-template-columns: 1fr 1fr; }
}
.vl-groups-topic { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 700px) { .vl-groups-topic { grid-template-columns: 1fr 1fr !important; } }
.vl-group-topic-card { align-items: center; text-align: center; }
.vl-group-topic-card .vl-group-count { align-self: center; }
.vl-group-topic-card .vl-group-btns { width: 100%; }
.vl-group-topic-card .vl-group-list-btn,
.vl-group-topic-card .vl-group-test-btn { flex: 1; padding: 9px 4px; font-size: .82rem; }
.vl-group-topic-icon { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.vl-group-topic-name { font-size: .8rem; font-weight: 700; color: var(--gc-text, #0c4a6e); line-height: 1.25; }

.vl-group-pos-badge {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; flex-shrink: 0;
}
.vl-gpb-n    { background: #3b82f6; }
.vl-gpb-v    { background: #22c55e; }
.vl-gpb-adj  { background: #f97316; }
.vl-gpb-adv  { background: #8b5cf6; }
.vl-gpb-prep { background: #ef4444; }
.vl-gpb-ing  { background: #06b6d4; }
.vl-gpb-ed   { background: #ec4899; }
.vl-gpb-other{ background: #94a3b8; }

.vl-group-pos-name {
  font-size: .95rem !important; font-weight: 700; color: #1e293b;
  letter-spacing: 0; align-self: center;
}

.vl-bg-dark .vl-gmt-btn { background: #374151; border-color: #374151; color: #9ca3af; }
.vl-bg-dark .vl-gmt-btn:hover { background: #4b5563; border-color: #4b5563; color: #e5e7eb; }
.vl-bg-dark .vl-gmt-active { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }
.vl-bg-dark .vl-gmt-list-btn { background: #78350f; border-color: #78350f; color: #fde68a; }
.vl-bg-dark .vl-group-pos-name { color: #f1f5f9; }

/* ── Test scene ── */
.vl-test-header-ctrl {
  display: flex; align-items: center; gap: 5px;
}
.vl-fsz-btn {
  width: 28px; height: 28px; border: 1.5px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: #334155; font-size: .8rem; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .1s;
}
.vl-fsz-btn:hover { background: #f1f5f9; }
.vl-font-sel {
  height: 28px; padding: 0 6px; border: 1.5px solid #cbd5e1; border-radius: 6px;
  background: #fff; font-size: .78rem; cursor: pointer; outline: none;
}
.vl-score-row {
  display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 800;
}
.vl-score-ok { color: #16a34a; }
.vl-score-ng { color: #dc2626; }
.vl-score-pos { color: #64748b; }

.vl-test-scene {
  max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px;
}
.vl-tpbar {
  height: 7px; background: #e2e8f0; border-radius: 999px; overflow: hidden;
}
.vl-tpfill {
  height: 100%; border-radius: 999px; transition: width .4s ease;
}

.vl-q-card {
  background: #fff; border-radius: 18px; padding: 28px 28px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 6px rgba(0,0,0,.04);
  display: flex; flex-direction: column; gap: 16px;
}
.vl-q-type-label {
  font-size: .72rem; font-weight: 800; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .1em;
}
.vl-q-word-big {
  font-size: 2.4rem; font-weight: 900; color: #0f172a; text-align: center;
  line-height: 1.1; letter-spacing: -.01em;
}
.vl-q-clue {
  font-size: 1.05rem; color: #1e293b; line-height: 1.6;
  padding: 14px 18px; background: #f8fafc; border-radius: 12px;
  border: 1.5px solid #e2e8f0;
}
.vl-q-pos-hint { font-size: .8rem; color: #94a3b8; }
.vl-vi-hint-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border: 1.5px solid #e2e8f0; border-radius: 20px;
  background: #f8fafc; color: #64748b; font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .12s;
}
.vl-vi-hint-btn:hover { background: #fef9c3; border-color: #fbbf24; color: #92400e; }
.vl-q-colloc-hints {
  display: flex; flex-direction: column; gap: 8px;
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 14px 18px;
}
.vl-q-colloc-ph {
  font-size: 1rem; color: #1e293b; font-weight: 600; line-height: 1.5;
  font-style: italic;
}
.vl-q-vi-clue {
  font-size: .97rem; color: #334155; line-height: 1.55;
  background: #f0f9ff; border-radius: 10px; padding: 10px 14px;
  border-left: 3px solid #6366f1; font-style: italic;
  text-align: center; width: 100%; box-sizing: border-box;
}

/* MC grid */
.vl-mc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px;
}
.vl-mc-grid-word { grid-template-columns: 1fr 1fr; }
.vl-mc-grid-def { grid-template-columns: 1fr; }
.vl-mc-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; border: 2px solid #e2e8f0; border-radius: 12px;
  background: #fff; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s, transform .1s;
  line-height: 1.4;
}
.vl-mc-item:hover:not(:disabled) {
  border-color: #94a3b8; background: #f8fafc; transform: translateY(-1px);
}
.vl-mc-item:disabled { cursor: default; }
.vl-mc-letter {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
  background: #f1f5f9; color: #475569; font-size: .75rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.vl-mc-text { font-size: .9rem; font-weight: 600; color: #1e293b; }
.vl-mc-word { font-family: monospace; font-size: 1rem; }
.vl-mc-correct { border-color: #16a34a !important; background: #f0fdf4 !important; }
.vl-mc-correct .vl-mc-letter { background: #16a34a; color: #fff; }
.vl-mc-wrong { border-color: #dc2626 !important; background: #fff1f2 !important; }
.vl-mc-wrong .vl-mc-letter { background: #dc2626; color: #fff; }

/* ── Quiz redesign (VI→EN / EN→VI) ───────────────────────── */
.vl-quiz-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.vl-quiz-dir { display: flex; align-items: center; gap: 7px; }
.vl-quiz-flag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 3px 8px; border-radius: 8px;
  background: #fff; border: 1.5px solid #e2e8f0;
  font-size: .68rem; font-weight: 900; color: #475569; letter-spacing: .04em;
}
.vl-quiz-arrow { color: #94a3b8; font-size: .9rem; font-weight: 700; }
.vl-quiz-dir-label {
  margin-left: 4px; font-size: .68rem; font-weight: 800; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .09em;
}
.vl-quiz-prog { display: flex; align-items: center; gap: 6px; }
.vl-qdot {
  width: 8px; height: 8px; border-radius: 999px; background: #e2e8f0;
  transition: all .2s;
}
.vl-qdot--done { background: #34d399; }
.vl-qdot--cur { background: #6366f1; transform: scale(1.35); }
.vl-quiz-count {
  margin-left: 6px; font-size: .78rem; font-weight: 800; color: #94a3b8;
}

.vl-quiz-prompt {
  border-radius: 16px; padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; text-align: center;
}
.vl-quiz-prompt--vi { background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%); }
.vl-quiz-prompt--en { background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); }
.vl-quiz-prompt-main {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.vl-quiz-prompt-main .vl-quiz-prompt-word { padding: 0 52px; }  /* chừa chỗ cho nút loa hai bên, giữ chữ ở giữa */
.vl-quiz-prompt-main .vl-quiz-speak {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
.vl-quiz-prompt-label {
  font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
}
.vl-quiz-prompt--vi .vl-quiz-prompt-label { color: #6d28d9; }
.vl-quiz-prompt--en .vl-quiz-prompt-label { color: #0369a1; }
.vl-quiz-speak {
  flex-shrink: 0; width: 44px; height: 44px; border: none; border-radius: 13px;
  background: #fff; color: #334155; font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.12); transition: transform .1s, box-shadow .12s;
}
.vl-quiz-speak:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.16); }
.vl-quiz-speak:active { transform: scale(.94); }
.vl-quiz-prompt-main .vl-quiz-speak:hover { transform: translateY(-50%) scale(1.06); }
.vl-quiz-prompt-main .vl-quiz-speak:active { transform: translateY(-50%) scale(.94); }
.vl-quiz-prompt-word {
  font-size: 2.3rem; font-weight: 900; color: #0f172a;
  line-height: 1.1; letter-spacing: -.01em; word-break: break-word;
}
.vl-quiz-prompt-word--vi { color: #1e1b4b; }
.vl-quiz-ipa { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
/* IPA + Oxford audio chips (EN→VI test) */
.vl-ipa-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.vl-ipa-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; font-family: inherit; transition: transform .1s, box-shadow .12s, background .12s;
}
.vl-ipa-chip--uk { background: #faf5ff; border-color: #e9d5ff; }
.vl-ipa-chip--us { background: #ecfeff; border-color: #a5f3fc; }
.vl-ipa-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.1); }
.vl-ipa-chip:active { transform: scale(.97); }
.vl-ipa-badge {
  padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 900;
  color: #fff; letter-spacing: .03em; line-height: 1;
}
.vl-ipa-chip--uk .vl-ipa-badge { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.vl-ipa-chip--us .vl-ipa-badge { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.vl-ipa-chip-ph {
  font-size: .98rem; color: #1e293b; line-height: 1.2;
  font-family: 'Charis SIL','Doulos SIL','Gentium Plus','Segoe UI',Arial,sans-serif;
}
.vl-ipa-chip-spk { font-size: .92rem; color: #64748b; line-height: 1; }
.vl-quiz-def {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .96rem; color: #475569; line-height: 1.5; padding: 2px 2px;
}
.vl-quiz-def-ic { flex-shrink: 0; opacity: .7; }

/* Option cards (quiz variant) */
.vl-quiz-opts { gap: 12px; }
.vl-quiz-opts.vl-mc-grid-word { grid-template-columns: 1fr 1fr; }
.vl-qopt {
  align-items: center; gap: 12px; padding: 16px 16px; border-radius: 14px;
}
.vl-qopt .vl-mc-letter {
  width: 30px; height: 30px; border-radius: 9px; font-size: .82rem;
}
.vl-qopt .vl-mc-text { font-size: 1rem; }
.vl-qopt.vl-mc-word .vl-mc-text, .vl-qopt .vl-mc-word { font-size: 1.05rem; }

/* Fill in blank */
.vl-fill-area {
  display: flex; gap: 10px; align-items: stretch;
}
.vl-fill-inp2 {
  flex: 1; height: 48px; padding: 0 16px; border: 2px solid #e2e8f0;
  border-radius: 12px; font-size: 1rem; outline: none; font-family: inherit;
  background: #f8fafc; transition: border-color .15s;
}
.vl-fill-inp2:focus { border-color: #0891b2; background: #fff; }
.vl-fill-inp2.vl-inp-correct { border-color: #16a34a; background: #f0fdf4; }
.vl-fill-inp2.vl-inp-wrong { border-color: #dc2626; background: #fff1f2; }
.vl-fill-check-btn {
  padding: 14px 22px; border: none; border-radius: 12px;
  background: #0891b2; color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: opacity .12s;
}
.vl-fill-check-btn:hover { opacity: .85; }

.vl-fill-hint-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.vl-fill-hint-btn {
  padding: 5px 14px; border-radius: 20px; border: 1.5px solid #fbbf24;
  background: #fffbeb; color: #92400e; font-size: .8rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0;
}
.vl-fill-hint-btn:hover:not(:disabled) { background: #fef3c7; border-color: #f59e0b; }
.vl-fill-hint-btn:disabled { opacity: .45; cursor: default; }
.vl-fill-hint-display {
  font-size: 1.1rem; font-weight: 700; letter-spacing: .18em;
  color: #0369a1; font-family: monospace;
}

/* Listen kb hint */
.vl-listen-kb-hint {
  display: inline-block; margin-left: 8px;
  font-size: .7rem; font-weight: 600; color: #0891b2;
  background: #e0f2fe; border-radius: 5px; padding: 1px 7px;
  vertical-align: middle; letter-spacing: .02em;
}
.vl-overlay.vl-dark .vl-listen-kb-hint { background: #0c2a3a; color: #38bdf8; }

/* Listen big button */
.vl-listen-big-btn {
  padding: 18px; border: 2px solid #0891b2; border-radius: 14px;
  background: #ecfeff; color: #0e7490; font-size: 1.15rem; font-weight: 700;
  cursor: pointer; text-align: center; transition: all .12s;
}
.vl-listen-big-btn:hover { background: #cffafe; transform: scale(1.02); }

/* Speak the word (listen to definition → say it) */
.vl-sd-card { display: flex; flex-direction: column; gap: 14px; align-items: stretch; padding: 6px 0 2px; }
.vl-sd-replay { align-self: center; padding: 10px 18px; border: 1.5px solid #6366f1; border-radius: 11px; background: #eef2ff; color: #4338ca; font-size: .92rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.vl-sd-replay:hover { background: #e0e7ff; }
.vl-sd-def { text-align: center; font-size: 1.12rem; line-height: 1.55; color: #1e293b; font-style: italic; max-width: 560px; margin: 0 auto; }
.vl-sd-mic { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: 14px; border: 2px dashed #cbd5e1; background: #f8fafc; color: #64748b; font-size: 1rem; font-weight: 700; }
.vl-sd-mic.vl-sd-listening { border-style: solid; border-color: #ef4444; background: #fef2f2; color: #b91c1c; animation: vlSdPulse 1.1s ease-in-out infinite; }
@keyframes vlSdPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); } 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } }
.vl-sd-heard { text-align: center; font-size: .95rem; min-height: 1.2em; }
.vl-sd-ok { color: #16a34a; font-weight: 800; }
.vl-sd-no { color: #dc2626; font-weight: 800; }
.vl-sd-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.vl-sd-btn { padding: 8px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; color: #475569; font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.vl-sd-btn:hover { border-color: #6366f1; color: #4338ca; background: #f5f7ff; }

/* Flashcards (starred words) */
.vl-fc-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.vl-fc-box { background: #fff; border-radius: 22px; padding: 22px; width: 100%; max-width: 660px; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
/* Toggle hiển thị mặt sau + nút đọc lại */
.vl-fc-toggles { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.vl-fc-tg { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; font-weight: 700; color: #475569; cursor: pointer; user-select: none; }
.vl-fc-tg input { width: 15px; height: 15px; cursor: pointer; accent-color: #7c3aed; }
.vl-fc-ex { font-size: .9rem; color: #334155; font-style: italic; line-height: 1.55; max-width: 540px; margin-top: 4px; }
.vl-fc-ex-vi { display: block; font-style: normal; color: #64748b; font-size: .82rem; margin-top: 2px; }
.vl-fc-colloc { font-size: .85rem; color: #0369a1; line-height: 1.5; max-width: 540px; margin-top: 6px; }
.vl-fc-sa { font-size: .85rem; color: #334155; line-height: 1.5; max-width: 540px; margin-top: 4px; }
.vl-fc-sa-lbl { display: inline-block; font-size: .68rem; font-weight: 800; color: #fff; border-radius: 6px; padding: 1px 7px; margin-right: 5px; }
.vl-fc-sa-lbl.vl-fc-syn { background: #16a34a; }
.vl-fc-sa-lbl.vl-fc-ant { background: #dc2626; }
.vl-fc-audio-sm { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0 2px; }
.vl-fc-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: #f1f5f9; color: #475569; font-size: 1rem; cursor: pointer; }
.vl-fc-close:hover { background: #e2e8f0; }
.vl-fc-progress { font-size: .85rem; font-weight: 800; color: #7c3aed; }
.vl-fc-card-wrap { width: 100%; height: 380px; perspective: 1200px; }
.vl-fc-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s; cursor: pointer; }
.vl-fc-card-wrap.vl-fc-flipped .vl-fc-card { transform: rotateY(180deg); }
.vl-fc-side { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 18px; border: 2px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px; box-sizing: border-box; text-align: center; }
.vl-fc-front { background: linear-gradient(135deg,#faf5ff,#eef2ff); }
.vl-fc-back { background: linear-gradient(135deg,#f0fdf4,#ecfeff); transform: rotateY(180deg); justify-content: flex-start; overflow-y: auto; gap: 7px; }
.vl-fc-lv { position: absolute; top: 14px; left: 14px; padding: 2px 9px; border-radius: 10px; font-size: .72rem; font-weight: 800; }
.vl-fc-word { font-family: 'Lora', Georgia, serif; font-size: 2.1rem; font-weight: 800; color: #1e293b; word-break: break-word; }
.vl-fc-word-sm { font-family: 'Lora', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: #15803d; }
.vl-fc-pos { font-size: .9rem; font-style: italic; color: #7c3aed; }
.vl-fc-ipa { font-size: 1rem; color: #475569; }
.vl-fc-audio { width: 46px; height: 46px; border-radius: 50%; border: none; background: #7c3aed; color: #fff; font-size: 1.2rem; cursor: pointer; margin-top: 4px; }
.vl-fc-audio:hover { background: #6d28d9; }
.vl-fc-tap { position: absolute; bottom: 14px; font-size: .76rem; color: #94a3b8; }
.vl-fc-vi { font-size: 1.5rem; font-weight: 800; color: #166534; line-height: 1.4; }
.vl-fc-novi { color: #94a3b8; font-weight: 600; font-size: 1rem; }
.vl-fc-def { font-size: .92rem; color: #475569; line-height: 1.55; max-width: 340px; }
.vl-fc-nav { display: flex; gap: 10px; width: 100%; }
.vl-fc-navbtn, .vl-fc-flipbtn { flex: 1; padding: 11px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.vl-fc-flipbtn { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.vl-fc-navbtn:hover { border-color: #7c3aed; color: #6d28d9; }
.vl-fc-flipbtn:hover { background: #6d28d9; }
.vl-fc-hint { font-size: .74rem; color: #94a3b8; text-align: center; }

/* Review card */
.vl-grade-notice {
  margin: 6px 0 2px; padding: 10px 14px; border-radius: 11px;
  background: #fffbeb; border: 1.5px solid #fde68a; color: #92400e;
  font-size: .82rem; line-height: 1.55; text-align: left;
}
.vl-grade-notice-chk {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
}
.vl-review-card {
  border-radius: 16px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
  animation: vlSlideIn .25s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
@keyframes vlSlideIn { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
.vl-review-ok { background: #f0fdf4; border: 2px solid #86efac; }
.vl-review-ng { background: #fff1f2; border: 2px solid #fca5a5; }
.vl-review-verdict {
  font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.vl-review-ok .vl-review-verdict { color: #16a34a; }
.vl-review-ng .vl-review-verdict { color: #dc2626; }
.vl-review-word-row { display: flex; align-items: center; gap: 10px; }
.vl-review-speak {
  width: 36px; height: 36px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  background: #fff; font-size: 1rem; cursor: pointer; transition: all .1s;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vl-review-speak:hover { background: #f0fdf4; border-color: #86efac; }
.vl-review-word { font-size: 1.5rem; font-weight: 900; color: #0f172a; }
.vl-review-form-note { font-size: .78rem; color: #64748b; align-self: flex-end; padding-bottom: 4px; }
.vl-review-ipa { display: flex; gap: 12px; flex-wrap: wrap; }
.vl-review-pos {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #e0f2fe; color: #0369a1; font-size: .75rem; font-weight: 700;
  align-self: flex-start;
}
.vl-review-vi { font-size: 1.08rem; font-weight: 700; color: #1e293b; }
.vl-review-def { font-size: .92rem; color: #64748b; line-height: 1.5; }
.vl-review-colloc { font-size: .9rem; margin-top: 6px; line-height: 1.7; }
.vl-review-san-note { font-size: .88rem; margin-top: 4px; padding: 4px 8px; border-radius: 6px; }
.vl-review-syn-note { background: #f0fdf4; color: #166534; }
.vl-review-ant-note { background: #fff7ed; color: #9a3412; }
.vl-review-exs .vl-ex-text { font-size: .75rem; }
.vl-review-exs .vl-ex-vi { font-size: .72rem; }
.vl-review-next-row {
  display: flex; align-items: center;
  margin-top: 10px; gap: 8px; flex-wrap: wrap;
}
.vl-review-next-hint {
  flex: 1; text-align: center; font-size: .75rem; color: #94a3b8; white-space: nowrap;
}
@media (max-width: 540px) {
  .vl-review-next-hint { display: none; }
  .vl-review-next-row { justify-content: space-between; }
}
.vl-review-next-hint kbd {
  display: inline-block; padding: 1px 5px; border: 1px solid #cbd5e1;
  border-radius: 4px; background: #f8fafc; font-size: .72rem; color: #475569;
  font-family: monospace;
}
.vl-review-next-btn {
  padding: 8px 20px; border: none; border-radius: 10px;
  background: #6366f1; color: #fff; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: opacity .12s; white-space: nowrap;
}
.vl-review-next-btn:hover { opacity: .85; }
.vl-review-prev-btn {
  padding: 8px 20px; border: 1.5px solid #e2e8f0; border-radius: 10px;
  background: #f8fafc; color: #64748b; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .12s; font-family: inherit; white-space: nowrap;
}
.vl-review-prev-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }
.vl-review-prev-ph { display: inline-block; visibility: hidden; padding: 8px 20px; font-size: .85rem; white-space: nowrap; }
.vl-vst-retry-btn {
  padding: 8px 16px; border: 1.5px solid #f59e0b; border-radius: 10px;
  background: #fffbeb; color: #92400e; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .12s; font-family: inherit; white-space: nowrap;
}
.vl-vst-retry-btn:hover { background: #fef3c7; border-color: #d97706; }
.vl-overlay.vl-dark .vl-vst-retry-btn { background: #1c1400; border-color: #b45309; color: #fbbf24; }
.vl-overlay.vl-dark .vl-vst-retry-btn:hover { background: #2d1e00; border-color: #d97706; }

/* Result scene */
.vl-result-scene {
  max-width: 480px; margin: 30px auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.vl-result-ring { width: 150px; height: 150px; }
.vl-result-msg2 { font-size: 1.4rem; font-weight: 800; color: #0f172a; }
.vl-result-stats {
  display: flex; gap: 20px; font-size: .92rem; font-weight: 700;
}
.vl-rs-ok { color: #16a34a; }
.vl-rs-ng { color: #dc2626; }
.vl-result-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vl-result-btn {
  padding: 11px 24px; border: none; border-radius: 12px; color: #fff;
  font-size: .88rem; font-weight: 700; cursor: pointer; transition: opacity .12s;
}
.vl-result-btn:hover { opacity: .85; }

/* ── Test count picker ── */
.vl-tpk-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}

/* ── Vocab by Level: chọn test (thiết kế mới theo mockup) ───────────────────── */
.vltp2-box { background: #fff; border-radius: 24px; width: min(840px, 95vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(2,6,23,.3); font-family: inherit; }
.vltp2-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; background: linear-gradient(135deg,#f5f3ff,#eef2ff); border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
.vltp2-title { font-size: 1.5rem; font-weight: 900; color: #1e293b; }
.vltp2-counts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vltp2-counts-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: #94a3b8; margin-right: 2px; }
.vltp2-count { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 7px 13px; min-width: 56px; display: flex; flex-direction: column; align-items: center; cursor: pointer; font-family: inherit; }
.vltp2-count:hover { border-color: #cbd5e1; }
.vltp2-count-n { font-size: 1.15rem; font-weight: 900; color: #334155; line-height: 1; }
.vltp2-count-l { font-size: .58rem; font-weight: 800; letter-spacing: .07em; color: #94a3b8; margin-top: 3px; }
.vltp2-count-on { background: #fffbeb; border-color: #f59e0b; }
.vltp2-count-on .vltp2-count-n, .vltp2-count-on .vltp2-count-l { color: #d97706; }
.vltp2-body { padding: 18px 26px 6px; }
.vltp2-types-lbl { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: #7c3aed; margin-bottom: 14px; }
.vltp2-types-lbl span { color: #94a3b8; font-weight: 600; letter-spacing: 0; }
.vltp2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vltp2-card { position: relative; display: flex; align-items: center; gap: 11px; text-align: left; background: var(--cbg); border: 1.5px solid transparent; border-radius: 15px; padding: 12px; cursor: pointer; font-family: inherit; transition: transform .12s, box-shadow .12s; }
.vltp2-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2,6,23,.1); }
.vltp2-card.vltp2-on { border-color: var(--cc); }
.vltp2-cb { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 7px; background: #fff; border: 1.5px solid #e2e8f0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; font-weight: 900; }
.vltp2-card.vltp2-on .vltp2-cb { background: var(--cc); border-color: var(--cc); }
.vltp2-ico { width: 40px; height: 40px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 2px 6px rgba(2,6,23,.06); overflow: hidden; }
.vltp2-ico .vl-tpk-mode-img { width: 26px; height: 26px; object-fit: contain; }
.vltp2-tx { display: flex; flex-direction: column; min-width: 0; padding-right: 16px; }
.vltp2-name { font-weight: 800; font-size: .9rem; color: #1e293b; line-height: 1.2; }
.vltp2-desc { font-size: .72rem; color: #64748b; margin-top: 2px; line-height: 1.3; }
.vltp2-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 26px 22px; }
.vltp2-cancel { background: none; border: none; color: #64748b; font-weight: 700; font-size: .95rem; cursor: pointer; font-family: inherit; padding: 8px 12px; }
.vltp2-cancel:hover { color: #334155; }
.vltp2-start { flex: 1; max-width: 440px; background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; border: none; border-radius: 14px; padding: 15px; font-weight: 800; font-size: 1.05rem; cursor: pointer; font-family: inherit; box-shadow: 0 8px 22px rgba(217,119,6,.35); }
.vltp2-start:hover { filter: brightness(1.05); }
.vltp2-c-blue   { --cc:#2563eb; --cbg:#eff6ff; }
.vltp2-c-green  { --cc:#16a34a; --cbg:#f0fdf4; }
.vltp2-c-purple { --cc:#7c3aed; --cbg:#f5f3ff; }
.vltp2-c-orange { --cc:#f97316; --cbg:#fff7ed; }
.vltp2-c-yellow { --cc:#d97706; --cbg:#fefce8; }
.vltp2-c-indigo { --cc:#4f46e5; --cbg:#eef2ff; }
.vltp2-c-teal   { --cc:#0d9488; --cbg:#f0fdfa; }
.vltp2-c-pink   { --cc:#db2777; --cbg:#fdf2f8; }
.vltp2-c-coral  { --cc:#ef4444; --cbg:#fef2f2; }
@media (max-width: 760px) { .vltp2-grid { grid-template-columns: repeat(2, 1fr); } .vltp2-head { flex-direction: column; align-items: flex-start; } }
@media (max-width: 460px) { .vltp2-grid { grid-template-columns: 1fr; } }
.vl-tpk-box {
  background: #fff; border-radius: 18px; padding: 28px 28px 20px;
  max-width: 360px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-height: 92vh; overflow-y: auto; /* tránh tràn màn hình — cho cuộn khi nhiều dạng test */
}
@media (min-width: 600px) { .vl-tpk-box { max-width: 660px; } }
.vl-tpk-title { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.vl-tpk-sub { font-size: .82rem; color: #64748b; font-weight: 600; margin-top: -6px; }
.vl-tpk-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.vl-tpk-opt {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px; border: 2px solid #94a3b8; border-radius: 12px;
  background: #fff; cursor: pointer; transition: all .12s; min-width: 72px;
  font-family: inherit;
}
.vl-tpk-opt:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.vl-tpk-num { font-size: 1.5rem; font-weight: 900; line-height: 1; color: inherit; }
.vl-tpk-lbl { font-size: .72rem; font-weight: 700; color: #64748b; margin-top: 2px; }
.vl-tpk-all { color: #fff !important; border-color: transparent !important; }
.vl-tpk-all .vl-tpk-lbl { color: rgba(255,255,255,.8); }
.vl-tpk-opt-sel .vl-tpk-lbl { color: #fef08a; }
.vl-tpk-cancel {
  background: none; border: none; color: #94a3b8; font-size: .82rem;
  cursor: pointer; padding: 4px 12px; font-family: inherit;
}
.vl-tpk-cancel:hover { color: #64748b; }
.vl-tpk-mode-label { font-size: .76rem; color: #94a3b8; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; align-self: flex-start; }
.vl-tpk-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
@media (min-width: 600px) { .vl-tpk-mode-grid { grid-template-columns: repeat(4, 1fr); } }
.vl-tpk-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px 10px; border: 2px solid #e2e8f0; border-radius: 12px;
  background: #fff; cursor: pointer; transition: all .15s; font-family: inherit; text-align: center;
  position: relative;
}
.vl-tpk-mode-btn:hover { border-color: #6366f1; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,.15); }
.vl-tpk-mode-active { border-color: #6366f1 !important; background: #eef2ff !important; }
.vl-tpk-mode-icon { font-size: 1.25rem; line-height: 1.2; }
.vl-tpk-mode-img { width: 54px; height: 54px; object-fit: contain; }
.vl-tpk-mode-name { font-size: .82rem; font-weight: 700; color: #1e293b; }
.vl-tpk-mode-desc { font-size: .7rem; color: #64748b; }
/* Multi-select checkmark badge */
.vl-tpk-chk {
  position: absolute; top: 5px; right: 6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #16a34a; color: #fff;
  font-size: .65rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
/* Bottom actions row */
.vl-tpk-actions { display: flex; gap: 10px; width: 100%; align-items: center; justify-content: space-between; margin-top: 2px; }
.vl-tpk-start-btn {
  flex: 1; padding: 11px 18px; border-radius: 12px; border: none;
  color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: opacity .15s, transform .1s;
}
.vl-tpk-start-btn:hover { opacity: .88; transform: translateY(-1px); }
/* Mobile: thu gọn khung chọn test cho khỏi tràn màn hình */
@media (max-width: 600px) {
  .vl-tpk-overlay { padding: 10px; }
  .vl-tpk-box { padding: 16px 14px 14px; gap: 10px; border-radius: 14px; }
  .vl-tpk-title { font-size: 1rem; }
  .vl-tpk-sub { font-size: .76rem; }
  .vl-tpk-opts { gap: 8px; }
  .vl-tpk-opt { padding: 8px 14px; min-width: 58px; }
  .vl-tpk-num { font-size: 1.25rem; }
  .vl-tpk-mode-label { margin-top: 0; }
  .vl-tpk-mode-grid { gap: 6px; }
  .vl-tpk-mode-btn { padding: 8px 5px 7px; border-radius: 10px; gap: 2px; }
  .vl-tpk-mode-img { width: 38px; height: 38px; }
  .vl-tpk-mode-icon { font-size: 1.05rem; }
  .vl-tpk-mode-name { font-size: .76rem; }
  .vl-tpk-mode-desc { font-size: .62rem; line-height: 1.2; }
}

/* Match exercise */
.vl-match-pool {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px; background: #f8fafc; border-radius: 10px;
  min-height: 52px; margin-bottom: 14px;
  border: 2px dashed #cbd5e1; transition: border-color .15s;
}
.vl-match-pool[ondragover]:hover { border-color: #6366f1; }
.vl-match-pool-done { color: #16a34a; font-size: .82rem; font-weight: 700; align-self: center; }
.vl-match-chip {
  padding: 7px 13px; background: #fff; border: 2px solid #94a3b8;
  border-radius: 8px; font-size: .85rem; font-weight: 600; line-height: 1.3;
  cursor: grab; color: #1e293b; transition: all .12s;
  user-select: none; white-space: nowrap;
}
.vl-match-chip:active { cursor: grabbing; }
.vl-match-chip:hover { border-color: #6366f1; background: #eef2ff; }
.vl-match-chip-sel { border-color: #6366f1 !important; background: #eef2ff !important; box-shadow: 0 0 0 3px #c7d2fe; }

.vl-match-chip-ok { border-color: #16a34a !important; background: #dcfce7 !important; color: #15803d; cursor: default; }
.vl-match-chip-ng { border-color: #dc2626 !important; background: #fee2e2 !important; color: #b91c1c; cursor: default; }
.vl-match-rows { display: flex; flex-direction: column; gap: 8px; }
.vl-match-row { display: flex; align-items: center; gap: 10px; }
.vl-match-word-en { font-size: .95rem; font-weight: 700; color: #0f172a; min-width: 110px; flex-shrink: 0; }
.vl-match-slot {
  flex: 1; min-height: 42px; border: 2px dashed #cbd5e1;
  border-radius: 8px; display: flex; align-items: center; padding: 4px 8px;
  cursor: pointer; transition: border-color .12s, background .12s; gap: 6px;
}
.vl-match-slot-ready { border-color: #6366f1; background: #f5f3ff; }
.vl-match-slot:hover { border-color: #94a3b8; }
.vl-match-slot-ok { border-color: #16a34a !important; background: #f0fdf4; cursor: default; }
.vl-match-slot-ng { border-color: #dc2626 !important; background: #fff5f5; flex-wrap: wrap; cursor: default; }
.vl-match-slot-ph { color: #94a3b8; font-size: .78rem; font-style: italic; }
.vl-match-ans-ok { font-size: .78rem; color: #16a34a; font-weight: 700; }
.vl-match-icon-ok { color: #16a34a; font-weight: 800; margin-left: auto; }
.vl-match-icon-ng { color: #dc2626; font-weight: 800; margin-left: auto; }
.vl-match-check-btn { margin-top: 14px; width: 100%; padding: 14px 24px; font-size: 1rem; border-radius: 12px; }

.vl-res-word-section {
  width: 100%; max-width: 480px; margin-top: 4px;
}
.vl-res-word-header {
  font-size: .8rem; font-weight: 800; padding: 6px 12px;
  border-radius: 8px 8px 0 0; text-transform: uppercase; letter-spacing: .04em;
}
.vl-res-word-header--ok { background: #dcfce7; color: #15803d; }
.vl-res-word-header--ng { background: #fee2e2; color: #b91c1c; }
.vl-res-word-list {
  border: 1px solid #e2e8f0; border-top: none;
  border-radius: 0 0 8px 8px; overflow: hidden;
}
.vl-res-word-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-bottom: 1px solid #f1f5f9; font-size: .88rem;
}
.vl-res-star-btn {
  margin-left: auto; flex-shrink: 0;
  border: none; background: none; cursor: pointer;
  font-size: 1.1rem; color: #cbd5e1; padding: 0 2px;
  line-height: 1; transition: color .12s, transform .12s;
}
.vl-res-star-btn:hover { color: #f59e0b; transform: scale(1.2); }
.vl-res-star-on { color: #f59e0b !important; }
.vl-res-word-item:last-child { border-bottom: none; }
.vl-res-word-item--ok { background: #f0fdf4; }
.vl-res-word-item--ng { background: #fff5f5; }
.vl-res-w-en { font-weight: 700; color: #0f172a; min-width: 90px; }
.vl-res-w-vi { color: #475569; font-size: .82rem; }

@media (max-width: 600px) {
  .vl-groups-grid { grid-template-columns: 1fr 1fr; }
  .vl-q-card { padding: 18px 16px; }
  .vl-q-word-big { font-size: 1.8rem; }
  .vl-mc-grid, .vl-mc-grid-word { grid-template-columns: 1fr; }
  .vl-test-header-ctrl { display: none; }
}

/* ── VL Slideshow ────────────────────────────────────────── */
.vl-slideshow-btn {
  padding: 7px 14px; border: none; border-radius: 8px;
  background: #6366f1; color: #fff; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .12s;
}
.vl-slideshow-btn:hover { opacity: .85; }

#vlSlideshowOverlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
}
.vl-ss-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
}
.vl-ss-scene {
  position: relative; z-index: 1; width: min(780px, 96vw);
  display: flex; flex-direction: column; align-items: center;
}
.vl-ss-counter {
  font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.55);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
  align-self: flex-start; padding-left: 4px;
}
.vl-ss-flipwrap {
  width: 100%; perspective: 1400px; cursor: pointer; height: 420px;
}
.vl-ss-flipper {
  transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(.4,0,.2,1);
  position: relative; width: 100%; height: 100%;
}
.vl-ss-flipper.flipped { transform: rotateY(180deg); }
.vl-ss-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; border-radius: 22px;
  padding: 32px 40px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow-y: auto;
}
.vl-ss-back {
  transform: rotateY(180deg);
  justify-content: flex-start; padding-top: 26px;
}
.vl-ss-word {
  font-size: clamp(2.6rem, 9vw, 5rem); font-weight: 900;
  line-height: 1.1; letter-spacing: -.02em; font-family: 'Poppins', sans-serif;
}
.vl-ss-back-word {
  font-size: clamp(2.2rem, 7vw, 3.8rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 4px;
  font-family: 'Poppins', sans-serif;
}
.vl-ss-pos {
  font-size: .82rem; font-style: italic; color: #64748b;
  background: #f1f5f9; border-radius: 6px; padding: 2px 10px; font-family: 'Poppins', sans-serif;
}
.vl-ss-ipa {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  font-size: 1.05rem; color: #475569; margin: 2px 0;
}
.vl-ss-ipa span {
  display: flex; align-items: center; gap: 4px;
  background: #f8fafc; border-radius: 8px; padding: 4px 10px;
}
.vl-ss-word-img {
  max-width: 180px; max-height: 130px; object-fit: contain; border-radius: 10px;
  margin: 10px auto 0; display: block;
}
.vl-ss-flip-hint {
  font-size: .78rem; color: #94a3b8; margin-top: 8px; letter-spacing: .03em;
}
.vl-ss-vi {
  font-size: 1.3rem; font-weight: 700; color: #0f172a; margin-top: 2px;
}
.vl-ss-def {
  font-size: .97rem; color: #475569; max-width: 560px; line-height: 1.55;
  font-family: 'Poppins', sans-serif;
}
.vl-ss-colloc {
  font-size: .9rem; color: #64748b; width: 100%; font-family: 'Poppins', sans-serif;
}
.vl-ss-exs {
  width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 8px;
  margin-top: 6px;
}
.vl-ss-sanf { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.vl-ss-sanf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vl-ss-ex {
  background: #f8fafc; border-radius: 10px; padding: 9px 12px;
  text-align: left; display: flex; gap: 6px; align-items: flex-start;
}
.vl-ss-ex-sp {
  background: none; border: none; cursor: pointer; font-size: .9rem;
  padding: 0; color: #6366f1; flex-shrink: 0; margin-top: 1px;
}
.vl-ss-ex-content { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vl-ss-ex-text { font-size: .97rem; color: #334155; line-height: 1.5; font-family: 'Poppins', sans-serif; }
.vl-ss-ex-vi { font-size: .8rem; color: #64748b; }
.vl-ss-ex-vi-loading { font-style: italic; color: #94a3b8; }
.vl-ss-actions {
  display: flex; gap: 6px; flex-wrap: nowrap; justify-content: center;
  margin-top: 12px; width: 100%;
}
.vl-ss-btn {
  padding: 7px 12px; border: none; border-radius: 10px;
  background: rgba(255,255,255,.14); color: #f1f5f9;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .12s; white-space: nowrap;
}
.vl-ss-btn:hover { background: rgba(255,255,255,.24); }
.vl-ss-exvi-btn { background: rgba(255,237,213,.18); color: #fed7aa; }
.vl-ss-exvi-btn:hover { background: rgba(255,237,213,.3); }
.vl-ss-exvi-btn.active { background: rgba(253,186,116,.3); color: #fdba74; }
.vl-ss-repeat-wrap { display: flex; align-items: center; gap: 0; }
.vl-ss-repeat-btn { border-radius: 10px 0 0 10px !important; }
.vl-ss-repeat-btn.active { background: rgba(251,207,232,.25); color: #fbcfe8; }
.vl-ss-repeat-sel {
  border: 1.5px solid rgba(255,255,255,.18); border-left: none;
  border-radius: 0 10px 10px 0;
  padding: 0 6px; height: 32px; font-size: .78rem; font-weight: 700;
  background: rgba(255,255,255,.88); color: #0f172a; cursor: pointer; outline: none;
}
.vl-ss-auto-btn.active { background: rgba(167,243,208,.25); color: #a7f3d0; }
.vl-ss-close {
  position: absolute; top: -2px; right: 0;
  background: rgba(255,255,255,.14); border: none;
  font-size: 1.1rem; color: #e2e8f0;
  cursor: pointer; line-height: 1; padding: 5px 8px; border-radius: 8px;
  transition: background .1s;
}
.vl-ss-close:hover { background: rgba(255,255,255,.28); color: #fff; }
.vl-ss-star-btn { font-size: 1.15rem; transition: background .1s, color .1s, transform .1s; }
.vl-ss-star-btn.active { color: #fbbf24; background: rgba(251,191,36,.18); }
.vl-ss-star-btn.active:active { transform: scale(1.2); }
.vl-ss-pron-wrap {
  position: relative; display: flex; align-items: center;
}
.vl-ss-pron-btn {
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.25);
  color: #e2e8f0; border-radius: 999px; padding: 6px 14px; font-size: .82rem;
  font-weight: 700; cursor: pointer; transition: background .15s;
}
.vl-ss-pron-btn:hover { background: rgba(255,255,255,.24); }
.vl-ss-pron-btn.vl-ss-pron-active { background: #dc2626; border-color: #f87171; color: #fff; animation: vl-ss-pulse .9s ease-in-out infinite; }
@keyframes vl-ss-pulse { 0%,100%{opacity:1} 50%{opacity:.65} }
.vl-ss-pron-result {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-size: .82rem; font-weight: 700; white-space: nowrap; pointer-events: none;
}
.vl-ss-pron-ok { color: #4ade80; }
.vl-ss-pron-miss { color: #fca5a5; }
.vl-ss-pron-miss em { font-style: italic; font-weight: 400; }
.vl-ss-pron-listening { color: #fde68a; animation: vl-ss-pulse .7s ease-in-out infinite; }

@media (max-width: 500px) {
  .vl-ss-flipwrap { height: 360px; }
  .vl-ss-face { padding: 24px 20px 20px; }
  .vl-ss-actions { gap: 4px; flex-wrap: wrap; }
  .vl-ss-btn { padding: 6px 10px; font-size: .74rem; }
}

/* ── Compound Words Module ─────────────────────────────────────── */
.vl-cp-search-bar {
  max-width: 900px;
  margin: 12px auto 4px;
  padding: 0 4px;
}
.vl-cp-search-inp {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--vl-border, #e2e8f0);
  border-radius: 10px;
  font-size: .95rem;
  background: var(--vl-card-bg, #fff);
  color: var(--vl-text, #1e293b);
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.vl-cp-search-inp:focus { border-color: #6366f1; }
#vlCpSearchResults { max-width: 900px; margin: 0 auto 8px; padding: 0 4px; }
.vl-cp-search-results-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}
.vl-cp-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--vl-card-bg, #fff);
  border: 1.5px solid var(--vl-border, #e2e8f0);
  cursor: pointer;
  font-size: .85rem;
  transition: border-color .15s, box-shadow .15s;
}
.vl-cp-search-chip:hover { border-color: #6366f1; box-shadow: 0 2px 6px rgba(99,102,241,.15); }
.vl-cp-search-chip-word { font-weight: 600; color: var(--vl-text, #1e293b); }
.vl-cp-search-chip-vi { color: var(--vl-text2, #64748b); font-size: .82rem; }
.vl-cp-search-chip-cat {
  font-size: .72rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
}
.vl-cp-search-empty { color: var(--vl-text2, #94a3b8); font-size: .9rem; padding: 8px 2px; }

.vl-cp-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 20px auto;
  padding: 0 12px 40px;
}
.vl-cp-cat-card {
  position: relative;
  background: var(--cp-bg, #f8fafc);
  border: 2px solid var(--cp-color, #6366f1);
  border-radius: 18px;
  padding: 20px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transition: transform .18s, box-shadow .18s;
}
.vl-cp-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.vl-cp-cat-icon { font-size: 2.2rem; line-height: 1; }
.vl-cp-cat-name { font-size: 1.05rem; font-weight: 700; color: var(--cp-color, #6366f1); text-align: center; }
.vl-cp-cat-name-en { font-size: .78rem; color: #64748b; text-align: center; margin-top: -2px; }
.vl-cp-cat-count { font-size: .88rem; color: #94a3b8; }
.vl-cp-cat-btns { display: flex; gap: 8px; margin-top: 6px; }
.vl-cp-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.vl-cp-btn:disabled { opacity: .38; cursor: not-allowed; }
.vl-cp-btn-list { background: var(--cp-badge, #e0e7ff); color: var(--cp-badge-text, #3730a3); }
.vl-cp-btn-list:hover:not(:disabled) { opacity: .82; }
.vl-cp-btn-test { background: var(--cp-color, #6366f1); color: #fff; }
.vl-cp-btn-test:hover:not(:disabled) { opacity: .85; }
.vl-cp-admin-row { margin-top: 6px; }
.vl-cp-admin-add-btn {
  font-size: .78rem; padding: 4px 10px; border: 1.5px dashed var(--cp-color, #6366f1);
  background: transparent; color: var(--cp-color, #6366f1); border-radius: 6px;
  cursor: pointer;
}
.vl-cp-admin-add-btn:hover { background: var(--cp-badge, #e0e7ff); }
.vl-cp-add-form {
  width: 100%; margin-top: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.vl-cp-add-input {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px; border: 1.5px solid var(--cp-color, #6366f1);
  border-radius: 8px; font-size: .82rem; outline: none;
  background: #fff;
}
.vl-cp-add-submit {
  padding: 6px 14px; background: var(--cp-color, #6366f1);
  color: #fff; border: none; border-radius: 8px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
}
.vl-cp-add-submit:hover { opacity: .85; }

/* Compound word list */
.vl-cp-list-wrap { padding: 0 12px 40px; }
.vl-cp-empty { text-align: center; color: #94a3b8; padding: 40px 0; font-size: 1rem; }
.vl-cp-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.vl-cp-word-card {
  position: relative;
  background: var(--cp-bg, #f8fafc);
  border: 1.5px solid var(--cp-color, #6366f1);
  border-radius: 14px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.vl-cp-word-word {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vl-cp-word-ipa { font-size: .82rem; color: #6366f1; font-style: italic; }
.vl-cp-pos { font-size: .72rem; font-weight: 600; color: #7c3aed; background: #ede9fe; border-radius: 4px; padding: 1px 6px; font-style: normal; }
.vl-cp-word-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  width: fit-content;
  margin-top: 2px;
}
.vl-cp-word-vi { font-size: .88rem; color: #334155; margin-top: 2px; }
.vl-cp-word-def { font-size: .8rem; color: #64748b; font-style: italic; line-height: 1.4; }
.vl-cp-del-btn {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px;
  background: #fee2e2; color: #ef4444;
  border: none; border-radius: 5px;
  font-size: .7rem; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vl-cp-del-btn:hover { background: #fca5a5; }

@media (max-width: 500px) {
  .vl-cp-cats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vl-cp-cat-icon { font-size: 1.7rem; }
  .vl-cp-cat-name { font-size: .92rem; }
  .vl-cp-word-grid { grid-template-columns: 1fr 1fr; }
}
/* ── END Compound Words Module ─────────────────────────────────── */

/* ── IELTS Writing Module ──────────────────────────────────────── */
.vl-iwr-tasks-row { max-width: 700px; margin-top: 28px; padding: 0 0 8px; }

/* Category cards within a task */
.vl-iwr-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 20px auto;
  padding: 0 12px 40px;
}
.vl-iwr-cat-card {
  position: relative;
  background: var(--iwr-bg, #f8fafc);
  border: 2px solid var(--iwr-color, #6366f1);
  border-radius: 18px;
  padding: 20px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
  transition: transform .18s, box-shadow .18s;
}
.vl-iwr-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.vl-iwr-cat-icon { font-size: 2rem; line-height: 1; }
.vl-iwr-cat-name { font-size: 1.05rem; font-weight: 700; color: var(--iwr-color, #6366f1); text-align: center; }
.vl-iwr-cat-name-en { font-size: .76rem; color: #64748b; text-align: center; }
.vl-iwr-cat-count { font-size: .85rem; color: #94a3b8; }
.vl-iwr-cat-btns { display: flex; gap: 8px; margin-top: 6px; }
.vl-iwr-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.vl-iwr-btn:disabled { opacity: .38; cursor: not-allowed; }
.vl-iwr-btn-list { background: var(--iwr-badge, #e0e7ff); color: var(--iwr-badge-text, #3730a3); }
.vl-iwr-btn-list:hover:not(:disabled) { opacity: .8; }
.vl-iwr-btn-test { background: var(--iwr-color, #6366f1); color: #fff; }
.vl-iwr-btn-test:hover:not(:disabled) { opacity: .85; }
.vl-iwr-admin-row { margin-top: 6px; }
.vl-iwr-admin-add-btn {
  font-size: .78rem; padding: 4px 10px;
  border: 1.5px dashed var(--iwr-color, #6366f1);
  background: transparent; color: var(--iwr-color, #6366f1);
  border-radius: 6px; cursor: pointer;
}
.vl-iwr-admin-add-btn:hover { background: var(--iwr-badge, #e0e7ff); }
.vl-iwr-add-form { width: 100%; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.vl-iwr-add-input {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px; border: 1.5px solid var(--iwr-color, #6366f1);
  border-radius: 8px; font-size: .82rem; outline: none; background: #fff;
}
.vl-iwr-add-submit {
  padding: 6px 14px; background: var(--iwr-color, #6366f1);
  color: #fff; border: none; border-radius: 8px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
}
.vl-iwr-add-submit:hover { opacity: .85; }

/* Named groups */
/* ── IWR Custom Groups ────────────────────────────────────── */
.vl-iwr-cg-section { margin: 20px 0 8px; }
.vl-iwr-cg-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vl-iwr-cg-title { font-size: .95rem; font-weight: 700; color: #374151; }
.vl-iwr-cg-add-btn { padding: 5px 14px; border-radius: 8px; border: none; background: #6366f1; color: #fff; font-size: .78rem; font-weight: 700; cursor: pointer; }
.vl-iwr-cg-add-btn:hover { background: #4f46e5; }
.vl-iwr-cg-empty { font-size: .82rem; color: #9ca3af; padding: 10px 0; }
.vl-iwr-cg-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.vl-iwr-cg-card { width: 220px; border-radius: 12px; border: 2px solid var(--cg-color, #6366f1); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.vl-iwr-cg-card-bar { height: 5px; background: var(--cg-color, #6366f1); }
.vl-iwr-cg-card-body { padding: 10px 12px 6px; cursor: pointer; flex: 1; }
.vl-iwr-cg-card-body:hover { background: #f9fafb; }
.vl-iwr-cg-card-name { font-weight: 700; font-size: .9rem; color: #1e293b; }
.vl-iwr-cg-card-count { font-size: .76rem; color: #6b7280; margin-top: 3px; }
.vl-iwr-cg-card-btns { display: flex; gap: 6px; padding: 6px 10px 8px; border-top: 1px solid #f3f4f6; }
.vl-iwr-cg-card-admin { display: flex; gap: 4px; padding: 0 10px 8px; }
/* list view */
.vl-iwr-cg-list-wrap { padding: 4px 0; }
.vl-iwr-cg-list-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.vl-iwr-cg-list-badge { padding: 4px 12px; border-radius: 20px; color: #fff; font-weight: 700; font-size: .85rem; }
.vl-iwr-cg-list-cnt { font-size: .8rem; color: #6b7280; }
.vl-iwr-cg-add-word-btn { margin-left: auto; padding: 5px 12px; border-radius: 8px; border: none; background: #10b981; color: #fff; font-size: .78rem; font-weight: 700; cursor: pointer; }
.vl-iwr-cg-add-word-btn:hover { background: #059669; }
/* word form */
.vl-iwr-cg-word-form { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.vl-iwr-cg-inp { padding: 7px 10px; border-radius: 7px; border: 1.5px solid #d1d5db; font-size: .83rem; width: 100%; box-sizing: border-box; }
.vl-iwr-cg-ta { padding: 7px 10px; border-radius: 7px; border: 1.5px solid #d1d5db; font-size: .83rem; width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }
.vl-iwr-cg-form-row { display: flex; gap: 8px; }
/* word list */
.vl-iwr-cg-word-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.vl-iwr-cg-word-body { flex: 1; }
.vl-iwr-cg-word-phrase { font-weight: 700; font-size: .9rem; color: #1e293b; }
.vl-iwr-cg-word-vi { font-size: .8rem; color: #6366f1; margin-top: 2px; }
.vl-iwr-cg-word-def { font-size: .78rem; color: #475569; font-style: italic; margin-top: 2px; }
.vl-iwr-cg-word-colloc { font-size: .78rem; color: #059669; margin-top: 3px; }
.vl-iwr-cg-word-ex { font-size: .78rem; color: #64748b; margin-top: 3px; line-height: 1.5; }
.vl-iwr-cg-word-admin { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
/* dark mode */
.vl-bg-dark .vl-iwr-cg-title { color: #d1d5db; }
.vl-bg-dark .vl-iwr-cg-card { background: #1f2937; border-color: var(--cg-color, #6366f1); }
.vl-bg-dark .vl-iwr-cg-card-body:hover { background: #111827; }
.vl-bg-dark .vl-iwr-cg-card-name { color: #f1f5f9; }
.vl-bg-dark .vl-iwr-cg-word-phrase { color: #f1f5f9; }
.vl-bg-dark .vl-iwr-cg-word-form { background: #1f2937; border-color: #374151; }
.vl-bg-dark .vl-iwr-cg-inp, .vl-bg-dark .vl-iwr-cg-ta { background: #111827; border-color: #374151; color: #f1f5f9; }
/* ── end IWR Custom Groups ────────────────────────────────── */
.vl-iwr-named-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--iwr-badge, #e0e7ff);
  width: 100%;
}
.vl-iwr-ng-block { display: flex; flex-direction: column; gap: 4px; }
.vl-iwr-ng-word-list { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 4px; }
.vl-iwr-ng-word-chip {
  display: inline-block;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--iwr-badge, #e0e7ff);
  color: var(--iwr-badge-text, #3730a3);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
}
.vl-iwr-ng-word-more {
  display: inline-block;
  color: var(--iwr-color, #6366f1);
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 4px;
  opacity: .7;
}
.vl-iwr-ng-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--iwr-badge, #e0e7ff);
  color: var(--iwr-badge-text, #3730a3);
  border-radius: 20px;
  padding: 4px 10px 4px 10px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  border: none;
  text-align: left;
}
.vl-iwr-ng-chip:hover { opacity: .75; }
.vl-iwr-ng-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-iwr-ng-cnt {
  background: var(--iwr-color, #6366f1);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.vl-iwr-ng-rename-btn, .vl-iwr-ng-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  padding: 0 2px;
  opacity: .55;
  color: inherit;
  flex-shrink: 0;
}
.vl-iwr-ng-rename-btn:hover { opacity: 1; color: #0369a1; }
.vl-iwr-ng-del-btn:hover    { opacity: 1; color: #dc2626; }
.vl-iwr-ng-add-btn {
  background: none;
  border: 1px dashed var(--iwr-color, #6366f1);
  color: var(--iwr-color, #6366f1);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .75rem;
  cursor: pointer;
  opacity: .7;
}
.vl-iwr-ng-add-btn:hover { opacity: 1; background: var(--iwr-badge, #e0e7ff); }
.vl-iwr-ng-edit-form {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
}
.vl-iwr-ng-inp {
  flex: 1;
  font-size: .8rem;
  padding: 3px 7px;
  border: 1.5px solid var(--iwr-color, #6366f1);
  border-radius: 8px;
  outline: none;
  min-width: 0;
}
.vl-iwr-ng-save-btn {
  background: var(--iwr-color, #6366f1);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
}
.vl-iwr-ng-save-btn:hover { opacity: .85; }
.vl-iwr-ng-cancel-btn {
  background: #f1f5f9;
  color: #64748b;
  border: none;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
}
.vl-iwr-ng-cancel-btn:hover { background: #e2e8f0; }

/* Group select in word card admin btns */
.vl-iwr-grp-badge {
  display: inline-flex; align-items: center;
  font-size: .7rem; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  border: 1px dashed #cbd5e1; background: none;
  color: #94a3b8; cursor: pointer;
  transition: all .12s; white-space: nowrap;
}
.vl-iwr-grp-badge:hover { border-color: #6366f1; color: #6366f1; background: #eef2ff; }
.vl-iwr-grp-badge-set {
  border-style: solid; border-color: #a5b4fc;
  background: #eef2ff; color: #4338ca;
}
.vl-iwr-grp-badge-set:hover { background: #e0e7ff; }
.vl-iwr-grp-select {
  font-size: .72rem; padding: 2px 4px;
  border: 1px solid #6366f1; border-radius: 6px;
  background: #f8fafc; color: #334155;
  cursor: pointer; max-width: 130px;
}
.vl-iwr-grp-sel-hidden { display: none; }
.vl-iwr-grp-select:focus { outline: 2px solid #6366f1; }

/* Cat-level batch search — IPA in results */
.vl-ielts-sr-ipa { font-size: .75rem; color: #64748b; font-style: italic; margin-top: 1px; }
/* "Chưa có" row at bottom of batch search */
.vl-iwr-sr-miss-row {
  margin-top: 10px;
  padding: 8px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: .8rem;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.vl-iwr-sr-miss-lbl { color: #ef4444; font-weight: 600; margin-right: 4px; }
.vl-iwr-sr-miss-chip {
  background: #fee2e2;
  color: #991b1b;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: .78rem;
  font-weight: 500;
}

/* Word list */
.vl-iwr-list-wrap { padding: 16px 0 40px; }
.vl-iwr-empty { text-align: center; color: #94a3b8; padding: 40px 0; font-size: 1rem; }
.vl-iwr-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.vl-iwr-word-card {
  position: relative;
  background: var(--iwr-bg, #f8fafc);
  border: 1.5px solid var(--iwr-color, #6366f1);
  border-radius: 14px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.vl-iwr-word-word {
  font-size: 1.08rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vl-iwr-word-ipa { font-size: .82rem; color: var(--iwr-color, #6366f1); font-style: italic; }
.vl-iwr-word-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  width: fit-content;
  margin-top: 2px;
}
.vl-iwr-word-vi  { font-size: .88rem; color: #334155; margin-top: 2px; }
.vl-iwr-word-def { font-size: .8rem; color: #64748b; font-style: italic; line-height: 1.4; }
.vl-iwr-del-btn {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px;
  background: #fee2e2; color: #ef4444;
  border: none; border-radius: 5px;
  font-size: .7rem; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vl-iwr-del-btn:hover { background: #fca5a5; }

@media (max-width: 500px) {
  .vl-iwr-tasks { grid-template-columns: 1fr; max-width: 100%; }
  .vl-iwr-cats  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vl-iwr-cat-icon { font-size: 1.6rem; }
  .vl-iwr-cat-name { font-size: .9rem; }
  .vl-iwr-word-grid { grid-template-columns: 1fr 1fr; }
}
/* ── END IELTS Writing Module ───────────────────────────────────── */

/* ── Daily Conversation Module ──────────────────────────────────── */
/* Daily Conversation — topic cards (redesign) */
.vl-dc-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1200px; margin: 4px auto 22px; flex-wrap: wrap; }
.vl-dc-hero-left { display: flex; align-items: center; gap: 16px; }
.vl-dc-hero-ic { flex: none; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 6px 16px rgba(124,58,237,.3); }
.vl-dc-hero-title { font-size: 1.9rem; font-weight: 900; color: #1e293b; line-height: 1.1; letter-spacing: -.01em; }
.vl-dc-hero-sub { font-size: .95rem; color: #94a3b8; margin-top: 3px; }
.vl-dc-hero-search { position: relative; flex: 0 1 360px; min-width: 220px; }
.vl-dc-search-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .95rem; pointer-events: none; }
.vl-dc-search-inp { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 42px; border: 1px solid #e2e8f0; border-radius: 14px; font-size: .95rem; font-family: inherit; outline: none; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.04); transition: border-color .15s, box-shadow .15s; }
.vl-dc-search-inp:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.18); }
.vl-dc-topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.vl-dc-card { background: #fff; border: 1px solid #eef1f6; border-radius: 18px; padding: 18px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 2px 10px rgba(15,23,42,.05); transition: transform .12s, box-shadow .15s, border-color .15s; }
.vl-dc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,.12); border-color: var(--dc-accent); }
.vl-dc-card-top { display: flex; align-items: center; gap: 14px; }
.vl-dc-card-ic { flex: none; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; }
.vl-dc-card-tx { min-width: 0; }
.vl-dc-card-title { font-size: 1.15rem; font-weight: 800; color: #1e293b; line-height: 1.15; }
.vl-dc-card-sub { font-size: .9rem; color: #94a3b8; line-height: 1.3; margin-top: 3px; }
.vl-dc-card-foot { display: flex; align-items: center; justify-content: space-between; }
.vl-dc-card-count { font-size: .92rem; font-weight: 800; color: var(--dc-accent); }
.vl-dc-card-arrow { font-size: 1.25rem; font-weight: 900; color: var(--dc-accent); transition: transform .15s; }
.vl-dc-card:hover .vl-dc-card-arrow { transform: translateX(4px); }
@media (max-width: 1100px) { .vl-dc-topics-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .vl-dc-topics-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .vl-dc-hero-title { font-size: 1.5rem; } }
@media (max-width: 480px)  { .vl-dc-topics-grid { grid-template-columns: 1fr; } }
.vl-overlay.vl-dark .vl-dc-hero-title { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-dc-search-inp { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-dc-card { background: #1e293b; border-color: #334155; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.vl-overlay.vl-dark .vl-dc-card-title { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-dc-card-sub { color: #94a3b8; }
.vl-dc-list-wrap { padding: 0 12px 40px; }
.vl-dc-empty { text-align: center; color: #94a3b8; padding: 40px 0; font-size: 1rem; }
/* ── END Daily Conversation Module ──────────────────────────────── */

/* ── Idioms Conversations ────────────────────────────────────────── */
.im-conv-open-btn {
  padding: 5px 13px; border-radius: 8px; border: 1.5px solid #bfdbfe;
  background: #eff6ff; color: #2563eb; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .13s; white-space: nowrap;
}
.im-conv-open-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.im-conv-form-wrap {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; z-index: 9900;
}
.im-conv-form {
  background: #fff; border-radius: 14px; padding: 22px 22px 18px;
  width: min(96vw, 560px); box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 10px;
}
.im-conv-form-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.im-conv-form-hint { font-size: 12px; color: #64748b; }
.im-conv-form-hint code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-family: monospace; }
.im-conv-ta {
  width: 100%; box-sizing: border-box; font-size: 13px; line-height: 1.6;
  border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 10px 12px;
  font-family: inherit; resize: vertical; min-height: 160px; color: #1e293b;
}
.im-conv-ta:focus { outline: none; border-color: #6366f1; }
.im-conv-form-actions { display: flex; gap: 8px; }
.im-conv-save-btn {
  flex: 1; padding: 8px 0; border-radius: 8px; border: none;
  background: #6366f1; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
.im-conv-save-btn:hover { background: #4f46e5; }
.im-conv-del-btn {
  padding: 8px 14px; border-radius: 8px; border: 1.5px solid #fca5a5;
  background: #fff1f2; color: #dc2626; font-size: 13px; cursor: pointer;
}
.im-conv-del-btn:hover { background: #fee2e2; }
.im-conv-cancel-btn {
  padding: 8px 14px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #475569; font-size: 13px; cursor: pointer;
}
.im-conv-cancel-btn:hover { background: #e2e8f0; }
.im-conv {
  margin-top: 28px;
  border: 2px solid #fde68a;
  border-radius: 14px;
  background: #fffbeb;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(251,191,36,.13);
}
.im-conv-header {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 1.5px solid #fde68a;
  font-size: .85em; font-weight: 700; color: #92400e; letter-spacing: .3px;
}
.im-conv-header-icon { font-size: 1em; }
.im-conv-body {
  display: flex; flex-direction: column; gap: 0;
  padding: 6px 0;
}
.im-conv-turn {
  padding: 10px 18px; line-height: 1.7;
  border-bottom: 1px solid #fef3c7;
}
.im-conv-turn:last-child { border-bottom: none; }
.im-conv-speaker {
  font-weight: 700; color: #b45309; margin-right: 2px;
}
.im-conv-en { color: #1e293b; }
.im-conv-hl { color: #dc2626; font-weight: 700; }
.im-conv-vi {
  font-size: .85em; color: #78716c; margin-top: 3px; padding-left: 2px;
  font-style: italic;
}
/* ── END Idioms Conversations ────────────────────────────────────── */

/* ── VC Mixed Test ───────────────────────────────────────────────── */
.vc-test-launch-btn {
  margin-left: 6px; padding: 3px 11px; border-radius: 8px;
  border: 1.5px solid #a5b4fc; background: #eef2ff; color: #4f46e5;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .13s;
}
.vc-test-launch-btn:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.vct-topbar {
  width: min(96vw,680px); display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
}
.vct-close-btn {
  padding: 6px 14px; border-radius: 8px; border: 1.5px solid #475569;
  background: #1e293b; color: #94a3b8; font-size: 13px; cursor: pointer;
}
.vct-close-btn:hover { background: #334155; color: #fff; }
.vct-counter { color: #94a3b8; font-size: 14px; font-weight: 600; }
.vct-score-lbl { color: #34d399; font-size: 14px; font-weight: 700; }
.vct-voice-select { background: #1e293b; border: 1.5px solid #475569; border-radius: 8px; color: #94a3b8; font-size: 12px; padding: 4px 8px; cursor: pointer; max-width: 130px; }
.vct-voice-select:focus { outline: none; border-color: #7c3aed; }
.vct-mute-btn { background: none; border: 1.5px solid #475569; border-radius: 8px; color: #94a3b8; font-size: 15px; padding: 4px 10px; cursor: pointer; line-height: 1; }
.vct-mute-btn:hover { background: #334155; color: #fff; }
.vct-mute-btn.vct-muted { border-color: #dc2626; color: #f87171; }
.vct-theme-btn { background: none; border: 1.5px solid #475569; border-radius: 8px; color: #94a3b8; font-size: 15px; padding: 4px 10px; cursor: pointer; line-height: 1; }
.vct-theme-btn:hover { background: #334155; color: #fff; }

/* ── VCT overlay background ── */
#vcTestOverlay { background: #0f172a; }
#vcTestOverlay.vct-light { background: #f1f5f9; }

/* ── VCT Light theme ── */
.vct-light .vct-topbar { border-bottom-color: #e2e8f0; }
.vct-light .vct-close-btn { background: transparent; border-color: #cbd5e1; color: #64748b; }
.vct-light .vct-close-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.vct-light .vct-counter { color: #475569; }
.vct-light .vct-score-lbl { color: #16a34a; }
.vct-light .vct-voice-select { background: #fff; border-color: #cbd5e1; color: #475569; }
.vct-light .vct-mute-btn,
.vct-light .vct-theme-btn { border-color: #cbd5e1; color: #64748b; }
.vct-light .vct-mute-btn:hover,
.vct-light .vct-theme-btn:hover { background: #e2e8f0; color: #1e293b; }

.vct-light .vct-card {
  background: #fff;
  border-color: rgba(99,102,241,.18);
  box-shadow: 0 8px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
}
.vct-light .vct-progress-bar { background: #e2e8f0; }
.vct-light .vct-type-badge { box-shadow: 0 2px 8px rgba(99,102,241,.2); }
.vct-light .vct-question { color: #1e293b; }
.vct-light .vct-pos { color: #6366f1; }
.vct-light .vct-q-vi { color: #b45309; }
.vct-light .vct-q-hint { color: #94a3b8; border-left-color: #e2e8f0; }
.vct-light .vct-opt {
  background: #f8fafc; border-color: #e2e8f0; color: #334155;
}
.vct-light .vct-opt:hover:not(:disabled) {
  border-color: #6366f1; background: #eef2ff; color: #312e81;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.vct-light .vct-opt-letter { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }
.vct-light .vct-opt:hover:not(:disabled) .vct-opt-letter { background: #eef2ff; border-color: #6366f1; color: #6366f1; }
.vct-light .vct-opt-correct { background: rgba(220,252,231,.8) !important; color: #166534 !important; box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important; }
.vct-light .vct-opt-correct .vct-opt-letter { background: #dcfce7 !important; border-color: #16a34a !important; color: #16a34a !important; }
.vct-light .vct-opt-wrong { background: rgba(254,226,226,.8) !important; color: #991b1b !important; }
.vct-light .vct-opt-wrong .vct-opt-letter { background: #fee2e2 !important; border-color: #dc2626 !important; color: #dc2626 !important; }
.vct-light .vct-opt-reveal { color: #94a3b8; }
.vct-light .vct-fill-inp { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
.vct-light .vct-fill-inp:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.vct-light .vct-fb-ok  { background: rgba(220,252,231,.9); color: #166534; border-color: rgba(22,163,74,.25); }
.vct-light .vct-fb-err { background: rgba(254,226,226,.9); color: #991b1b; border-color: rgba(220,38,38,.25); }
.vct-light .vct-answer-reveal { color: #94a3b8; border-left-color: #e2e8f0; }
.vct-light .vct-answer-reveal strong { color: #1e293b; }
.vct-light .vct-prev-btn { border-color: #e2e8f0; color: #94a3b8; }
.vct-light .vct-prev-btn:hover { background: #f1f5f9; color: #475569; }
.vct-light .vct-key-hint { color: #94a3b8; }

/* ── VCT picker light ── */
.vct-light .vct-picker-title { color: #1e293b; }
.vct-light .vct-picker-btn { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
.vct-light .vct-picker-btn:hover { border-color: #6366f1; background: #eef2ff; color: #312e81; }
/* ── VCT Progress bar ── */
.vct-progress-bar { height: 4px; background: #1e293b; border-radius: 999px; overflow: hidden; margin: -28px -28px 0; }
.vct-progress-fill { height: 100%; background: linear-gradient(90deg,#6366f1,#a855f7); border-radius: 999px; transition: width .4s ease; }
/* ── VCT Card ── */
.vct-card {
  width: min(96vw,700px);
  background: linear-gradient(160deg,#1a1f35 0%,#111827 100%);
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 22px; padding: 28px 28px 22px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 16px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  min-height: 300px;
}
.vct-type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 14px; border-radius: 999px;
  background: linear-gradient(135deg,#312e81,#4c1d95);
  color: #c4b5fd; font-size: 11px; font-weight: 700;
  letter-spacing: .6px; align-self: flex-start;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.vct-badge-fill { background: linear-gradient(135deg,#065f46,#064e3b) !important; color: #6ee7b7; box-shadow: 0 2px 8px rgba(16,185,129,.25); }
.vct-badge-type { background: linear-gradient(135deg,#7c2d12,#9a3412) !important; color: #fed7aa; box-shadow: 0 2px 8px rgba(234,88,12,.25); }
.vct-badge-listen { background: linear-gradient(135deg,#0c4a6e,#0369a1) !important; color: #bae6fd; box-shadow: 0 2px 8px rgba(3,105,161,.3); }
.vct-badge-sample-mc { background: linear-gradient(135deg,#3b1f6e,#5b21b6) !important; color: #ddd6fe; box-shadow: 0 2px 8px rgba(109,40,217,.3); }
.vct-badge-fill-sample { background: linear-gradient(135deg,#064e3b,#065f46) !important; color: #a7f3d0; box-shadow: 0 2px 8px rgba(16,185,129,.3); }
.vct-sample-sentence-q { font-size: 1.1rem; line-height: 1.7; color: #e2e8f0; background: #1e293b; border-left: 3px solid #7c3aed; border-radius: 10px; padding: 14px 16px; margin: 10px 0; }
.vct-sample-sentence-q .vct-blank { display: inline-block; min-width: 80px; border-bottom: 2px solid #a78bfa; color: transparent; background: rgba(167,139,250,.15); border-radius: 4px; margin: 0 2px; }
.vct-fill-sample-title { font-size: .85rem; font-weight: 700; color: #94a3b8; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; }
.vct-fill-sample-body { font-size: 1rem; line-height: 2; color: #e2e8f0; background: #1e293b; border-radius: 10px; padding: 14px 16px; margin: 8px 0; }
.vct-fill-blank {
  display: inline-block; min-width: 90px; padding: 2px 8px; margin: 0 3px;
  border: none; border-bottom: 2px solid #60a5fa; border-radius: 0; cursor: text;
  color: #93c5fd; font-weight: 600; text-align: center;
  transition: border-color .15s;
  background: transparent; outline: none;
  font-family: 'Poppins', sans-serif; font-size: 1rem;
  vertical-align: baseline;
}
.vct-fill-blank:hover { border-bottom-color: #93c5fd; }
.vct-fill-blank-active { border-bottom-color: #f59e0b; color: #fbbf24; }
.vct-fill-blank-filled { color: #f1f5f9; border-bottom-color: #60a5fa; }
.vct-fill-blank-ok { border-bottom-color: #22c55e !important; color: #86efac !important; cursor: default; }
.vct-fill-blank-err { border-bottom-color: #ef4444 !important; color: #fca5a5 !important; cursor: default; }
.vc-kv-hl-shown { opacity: .55; cursor: default; }
.vct-fill-corrections { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.vct-fill-correction { font-size: .82rem; }
.vct-fill-correction s { color: #fca5a5; opacity: .8; }
.vct-fill-correction strong { color: #86efac; }
.vct-fill-wordbank { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; padding: 12px; background: #0f172a; border-radius: 10px; border: 1px solid #1e293b; }
.vct-fill-chip {
  padding: 6px 14px; border-radius: 20px; border: 1.5px solid #334155;
  background: #1e293b; color: #cbd5e1; font-size: .9rem; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.vct-fill-chip:hover:not(:disabled) { background: #334155; border-color: #60a5fa; color: #e2e8f0; }
.vct-fill-chip-used, .vct-fill-chip:disabled { opacity: .35; cursor: not-allowed; }
.vct-fill-check-btn {
  margin: 4px 0 8px; padding: 10px 28px; border-radius: 12px; border: none;
  background: linear-gradient(135deg,#047857,#059669); color: #fff;
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.vct-fill-check-btn:hover:not(:disabled) { opacity: .85; }
.vct-fill-check-btn:disabled { opacity: .4; cursor: not-allowed; }
.vct-listen-prompt { font-size: .88rem; color: #94a3b8; margin: 8px 0 4px; font-style: italic; }
.vct-symbol-hint { font-size: .82rem; color: #fbbf24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25); border-radius: 8px; padding: 6px 12px; margin: 4px 0; line-height: 1.6; }
.vct-symbol-hint strong { color: #f59e0b; font-size: .95rem; }
.vct-symbol-hint em { font-style: italic; color: #e2e8f0; }
.vct-light .vct-symbol-hint { background: #fefce8; border-color: #fde68a; color: #92400e; }
.vct-light .vct-symbol-hint strong { color: #b45309; }
.vct-light .vct-symbol-hint em { color: #374151; }
.vct-listen-replay {
  display: flex; align-items: center; gap: 6px; margin: 10px 0 6px;
  padding: 10px 28px; border-radius: 12px; border: none;
  background: linear-gradient(135deg,#0369a1,#0284c7); color: #fff;
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.vct-listen-replay:hover { opacity: .85; }
.vct-question { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; line-height: 1.5; letter-spacing: -.01em; }
.vct-pos { font-size: .85rem; font-weight: 500; color: #818cf8; }
.vct-q-vi { color: #fde68a; font-style: italic; }
.vct-q-hint { font-size: .85rem; color: #64748b; font-style: italic; border-left: 3px solid #334155; padding-left: 10px; line-height: 1.5; }
.vct-opts { display: flex; flex-direction: column; gap: 10px; }
.vct-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  border: 1.5px solid #1e293b; background: rgba(15,23,42,.7);
  color: #cbd5e1; font-size: .95rem; text-align: left;
  cursor: pointer; transition: all .15s; line-height: 1.45; font-family: inherit;
}
.vct-opt:hover:not(:disabled) {
  border-color: #6366f1; background: rgba(99,102,241,.1); color: #e0e7ff;
  transform: translateX(3px); box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.vct-opt:disabled { cursor: default; }
.vct-opt-letter {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: #1e293b; border: 1.5px solid #334155;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: #64748b; transition: all .15s;
}
.vct-opt:hover:not(:disabled) .vct-opt-letter { background: #312e81; border-color: #6366f1; color: #a5b4fc; }
.vct-opt-text { flex: 1; }
.vct-opt-correct { border-color: #16a34a !important; background: rgba(20,83,45,.6) !important; color: #86efac !important; box-shadow: 0 0 0 3px rgba(22,163,74,.2) !important; transform: none !important; }
.vct-opt-correct .vct-opt-letter { background: #14532d !important; border-color: #16a34a !important; color: #4ade80 !important; }
.vct-opt-wrong { border-color: #dc2626 !important; background: rgba(69,10,10,.6) !important; color: #fca5a5 !important; transform: none !important; }
.vct-opt-wrong .vct-opt-letter { background: #450a0a !important; border-color: #dc2626 !important; color: #f87171 !important; }
.vct-opt-reveal { display: block; font-size: .75rem; color: #64748b; margin-top: 5px; font-style: italic; }
.vct-fill-row { display: flex; gap: 10px; align-items: center; }
.vct-fill-inp {
  flex: 1; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #334155;
  background: rgba(15,23,42,.8); color: #f1f5f9; font-size: .95rem; outline: none; font-family: inherit;
}
.vct-fill-inp:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.vct-check-btn {
  padding: 12px 20px; border-radius: 12px; border: none;
  background: linear-gradient(135deg,#4f46e5,#7c3aed);
  color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.vct-check-btn:hover { opacity: .88; }
.vct-fb { padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: .95rem; }
.vct-fb-ok  { background: rgba(20,83,45,.7); color: #86efac; border: 1px solid rgba(22,163,74,.3); }
.vct-fb-err { background: rgba(69,10,10,.7); color: #fca5a5; border: 1px solid rgba(220,38,38,.3); }
.vct-fb-vi  { font-weight: 400; opacity: .85; font-size: .88em; }
.vct-answer-reveal { font-size: .83rem; color: #e2e8f0; font-style: italic; line-height: 1.6; border-left: 3px solid #334155; padding-left: 10px; }
.vct-answer-reveal strong { color: #ffffff; font-style: normal; }
.vct-answer-reveal strong.vct-ex-hl { color: #f97316; }
.vct-sample-lbl { color: #818cf8; font-style: normal; font-weight: 700; margin-right: 4px; }
.vct-ex-hl { color: #f97316; font-style: normal; font-weight: 800; }
.vct-first-hint-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.vct-hint-btn { background: none; border: 1px solid #334155; border-radius: 6px; color: #94a3b8; font-size: .78rem; padding: 2px 10px; cursor: pointer; }
.vct-hint-btn:hover { border-color: #f97316; color: #f97316; }
.vct-hint-letter { font-size: .85rem; color: #94a3b8; }
.vct-hint-letter strong { color: #f97316; font-size: 1rem; }
.vct-speak-btn { background: none; border: none; cursor: pointer; font-size: 1.1em; padding: 0 4px; opacity: .6; vertical-align: middle; line-height: 1; }
.vct-speak-btn:hover { opacity: 1; }
.vct-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.vct-prev-btn { padding: 9px 16px; border-radius: 12px; border: 1.5px solid #334155; background: none; color: #64748b; font-size: .85rem; cursor: pointer; font-family: inherit; }
.vct-prev-btn:hover { background: #1e293b; color: #cbd5e1; border-color: #475569; }
.vct-next-wrap { display: flex; align-items: center; gap: 12px; }
.vct-next-btn {
  padding: 11px 28px; border-radius: 14px; border: none;
  background: linear-gradient(135deg,#4f46e5,#7c3aed);
  color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 15px rgba(99,102,241,.4);
}
.vct-next-btn:hover { opacity: .88; }
.vct-key-hint { font-size: .78rem; color: #475569; }
.vct-picker { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 8px; }
.vct-picker-title { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; }
.vct-picker-note { font-size: .82rem; color: #64748b; }
.vct-picker-opts { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.vct-picker-btn { background: #1e293b; border: 2px solid #334155; border-radius: 14px; color: #cbd5e1; font-size: 1.5rem; font-weight: 800; padding: 18px 28px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: border-color .15s, background .15s; min-width: 90px; }
.vct-picker-btn:hover { border-color: #6366f1; background: #1e1b4b; color: #fff; }
.vct-picker-btn.vct-picker-active { border-color: #6366f1; background: #312e81; color: #fff; }
.vct-picker-sub { font-size: .7rem; font-weight: 400; color: #94a3b8; }
.vct-result {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 12px 0;
}
.vct-result-stars { font-size: 2rem; }
.vct-result-score { font-size: 2.2rem; font-weight: 800; color: #f1f5f9; }
.vct-result-pct   { font-size: 1.1rem; color: #94a3b8; }
.vct-wrong-list { width: 100%; background: #0f172a; border-radius: 10px; padding: 14px 16px; }
.vct-wrong-title { color: #f59e0b; font-weight: 700; margin-bottom: 8px; font-size: .88rem; }
.vct-wrong-item { color: #cbd5e1; font-size: .88rem; margin-bottom: 5px; }
.vct-wrong-vi { color: #94a3b8; font-style: italic; }
.vct-result-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vct-share-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.vct-share-btn { padding: 7px 14px; border-radius: 8px; border: none; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.vct-share-native { background: #0ea5e9; color: #fff; }
.vct-share-native:hover { background: #0284c7; }
.vct-share-fb { background: #1877f2; color: #fff; }
.vct-share-fb:hover { background: #1558b0; }
.vct-share-copy { background: #334155; color: #cbd5e1; }
.vct-share-copy:hover { background: #475569; color: #fff; }
.vct-new-btn {
  padding: 11px 28px; border-radius: 10px; border: none;
  background: #059669; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.vct-new-btn:hover { background: #047857; }
.vct-new-count { font-size: .8em; font-weight: 400; opacity: .85; }
.vct-retry-wrong-btn {
  padding: 11px 28px; border-radius: 10px; border: none;
  background: #dc2626; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.vct-retry-wrong-btn:hover { background: #b91c1c; }
.vct-restart-btn {
  padding: 8px 22px; border-radius: 10px; border: 1.5px solid #475569;
  background: none; color: #94a3b8; font-weight: 600; font-size: .88rem; cursor: pointer;
}
.vct-restart-btn:hover { background: #1e293b; color: #fff; }
/* ── VCT Typography ── */
#vcTestOverlay { font-family: 'Poppins', sans-serif; }
.vct-question { font-size: 1.38rem; font-family: 'Poppins', sans-serif; }
.vct-opt { font-size: 1.05rem; font-family: 'Poppins', sans-serif; }
.vct-fill-inp { font-size: 1.05rem; font-family: 'Poppins', sans-serif; }
.vct-fill-chip { font-size: 1rem; font-family: 'Poppins', sans-serif; }
.vct-fill-blank { font-size: 1rem; font-family: 'Poppins', sans-serif; }
.vct-fill-sample-body { font-size: 1.1rem; font-family: 'Poppins', sans-serif; }
.vct-sample-sentence-q { font-size: 1.2rem; font-family: 'Poppins', sans-serif; }
.vct-answer-reveal { font-family: 'Poppins', sans-serif; }
.vct-q-vi,
.vct-q-hint,
.vct-type-badge,
.vct-fill-sample-title,
.vct-fill-check-btn,
.vct-close-btn,
.vct-prev-btn,
.vct-next-btn,
.vct-picker-title,
.vct-picker-btn,
.vct-picker-sub,
.vct-result-pct,
.vct-wrong-title,
.vct-wrong-item,
.vct-wrong-vi,
.vct-check-btn,
.vct-new-btn,
.vct-restart-btn,
.vct-fb,
.vct-counter,
.vct-score-lbl { font-family: 'Plus Jakarta Sans', sans-serif; }
.vct-q-vi { font-size: 1.05rem; }
.vct-fill-check-btn { font-size: 1.1rem; }
.vct-fill-sample-title { font-size: .95rem; }
/* ── END VC Mixed Test ───────────────────────────────────────────── */

/* ── Reading Phrase Test (reuses yt-vt classes) ───────────────────── */
.rpt-cnt-active { background: #fff !important; color: #1e293b !important; box-shadow: 0 1px 4px rgba(0,0,0,.15) !important; border-radius: 9px; }
#rdPhraseTestCard .yt-vt-type-grid { grid-template-columns: 1fr 1fr; }
#rdPhraseTestCard .yt-vt-opt-val[data-lang="en"] { font-family: 'Poppins', sans-serif; }
#rdPhraseTestCard .yt-vt-opt-val[data-lang="vi"] { font-family: 'Plus Jakarta Sans', sans-serif; }
#rdPhraseTestCard .yt-vt-word { font-family: 'Poppins', sans-serif; font-size: 1.35rem; }
#rdPhraseTestCard .yt-vt-prompt { font-family: 'Plus Jakarta Sans', sans-serif; }
#rdPhraseTestCard .yt-vt-spell-inp { font-family: 'Poppins', sans-serif; }

/* ── Random Word ─────────────────────────────────────────────────── */
.vl-level-random { grid-column: span 2; }
.vl-rand-level-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px 0 4px; }
.vl-rand-lv-btn {
  padding:6px 16px; border-radius:20px; border:2px solid var(--rlv-border);
  background:none; color:var(--rlv-text); font-weight:700; font-size:.88rem; cursor:pointer;
  transition:background .15s,color .15s;
}
.vl-rand-lv-btn.active { background:var(--rlv-border); color:#fff; }
.vl-rand-lv-btn:hover:not(.active) { background:var(--rlv-badge); }
.vl-rand-empty { text-align:center; padding:60px 20px; }
.vl-rand-empty-icon { font-size:3rem; margin-bottom:12px; }
.vl-rand-empty-msg { color:#94a3b8; font-size:1.1rem; }
.vl-rand-card {
  max-width:700px; margin:16px auto; border-radius:18px; cursor:pointer;
  border:2px solid #e2e8f0; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.08);
  transition:box-shadow .2s; user-select:none;
}
.vl-rand-card:hover { box-shadow:0 6px 28px rgba(0,0,0,.14); }
.vl-rand-front { padding:48px 32px; text-align:center; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.vl-rand-card-lv-badge { padding:3px 14px; border-radius:12px; font-weight:700; font-size:.82rem; display:inline-block; }
.vl-rand-card-word { font-size:2.4rem; font-weight:800; color:#1e293b; }
.vl-rand-card-pos { font-size:.9rem; color:#64748b; font-style:italic; }
.vl-rand-card-hint { font-size:.82rem; color:#94a3b8; margin-top:8px; }
.vl-rand-back { padding:20px 24px; }
.vl-rand-back-word-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.vl-rand-back-speak { background:none; border:none; font-size:1.2rem; cursor:pointer; padding:0; }
.vl-rand-back-word { font-size:1.7rem; font-weight:800; color:#1e293b; }
.vl-rand-back-lv { padding:2px 10px; border-radius:10px; font-weight:700; font-size:.76rem; }
.vl-rand-back-pos { font-size:.85rem; color:#64748b; font-style:italic; }
.vl-rand-back-star { margin-left:auto; background:none; border:1.5px solid #fcd34d; border-radius:9px; width:34px; height:34px; font-size:1.1rem; line-height:1; color:#cbd5e1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .13s; flex-shrink:0; }
.vl-rand-back-star:hover { background:#fffbeb; border-color:#f59e0b; color:#f59e0b; transform:scale(1.08); }
.vl-rand-back-star.active { background:#fef3c7; border-color:#f59e0b; color:#f59e0b; }
.vl-rand-back-ipa { display:flex; gap:12px; margin:4px 0 8px; flex-wrap:wrap; }
.vl-rand-back-vi { font-size:1.05rem; font-weight:600; color:#1e293b; margin-bottom:4px; }
.vl-rand-back-def { color:#475569; font-size:.9rem; margin-bottom:8px; }
.vl-rand-back-colloc { font-size:.88rem; margin-bottom:8px; }
.vl-rand-back-sa { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.vl-rand-san-section { margin-top:12px; padding-top:12px; border-top:1px solid #f1f5f9; display:flex; flex-direction:column; gap:8px; }
.vl-rand-san-row { display:flex; align-items:flex-start; gap:8px; }
.vl-rand-san-chips { display:flex; flex-wrap:wrap; gap:5px; }
.vl-rand-san-label { font-size:.68rem; font-weight:800; border-radius:4px; padding:3px 8px; white-space:nowrap; margin-top:1px; flex-shrink:0; }
.vl-rand-san-syn { background:#dbeafe; color:#1d4ed8; }
.vl-rand-san-ant { background:#fee2e2; color:#b91c1c; }
.vl-rand-san-wf  { background:#dcfce7; color:#166534; }
.vl-rand-back-exs { margin-top:12px; border-top:1px solid #f1f5f9; padding-top:10px; }
.vl-rand-ex-toolbar { margin-bottom:8px; }
.vl-rand-ex-vi-btn {
  padding:4px 14px; border-radius:14px; border:1.5px solid #0891b2;
  background:none; color:#0891b2; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:background .12s, color .12s;
}
.vl-rand-ex-vi-btn:hover { background:#e0f2fe; }
.vl-rand-speed-row { display:flex; justify-content:center; gap:6px; padding:10px 0 0; }
.vl-rand-spd-btn {
  padding:4px 14px; border-radius:14px; border:1.5px solid #94a3b8;
  background:none; color:#64748b; font-size:.82rem; font-weight:700; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.vl-rand-spd-btn:hover { border-color:#0891b2; color:#0891b2; }
.vl-rand-spd-btn.active { background:#0891b2; border-color:#0891b2; color:#fff; }
.vl-rand-actions { display:flex; justify-content:center; gap:12px; padding:8px 0 8px; }
.vl-rand-spin-btn {
  padding:12px 36px; border-radius:24px; border:none;
  background:linear-gradient(135deg,#16a34a,#15803d); color:#fff;
  font-size:1.05rem; font-weight:700; cursor:pointer; box-shadow:0 2px 12px rgba(22,163,74,.35);
  transition:transform .1s,box-shadow .1s;
}
.vl-rand-spin-btn:hover { transform:translateY(-1px); box-shadow:0 4px 18px rgba(22,163,74,.45); }
.vl-rand-spin-btn:active { transform:scale(.97); }
@keyframes vl-rand-spin { 0%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(1.08)} 100%{transform:rotate(360deg) scale(1)} }
.vl-rand-spin-anim { animation:vl-rand-spin .5s ease; }
.vl-rand-flip-btn {
  padding:12px 24px; border-radius:24px; border:2px solid #16a34a;
  background:none; color:#16a34a; font-size:1rem; font-weight:600; cursor:pointer;
}
.vl-rand-flip-btn:hover { background:#f0fdf4; }
.vl-rand-repeat-row { display:flex; justify-content:center; align-items:center; gap:8px; padding:4px 0 12px; }
.vl-rand-repeat-sel {
  padding:8px 10px; border-radius:20px; border:2px solid #0891b2;
  background:#fff; color:#0891b2; font-size:.95rem; font-weight:700; cursor:pointer; outline:none;
}
.vl-rand-repeat-btn {
  padding:9px 22px; border-radius:20px; border:2px solid #0891b2;
  background:none; color:#0891b2; font-size:.95rem; font-weight:700; cursor:pointer;
  transition:background .12s, color .12s;
}
.vl-rand-repeat-btn:hover { background:#e0f2fe; }
.vl-rand-repeat-btn.vl-rand-repeat-active { background:#0891b2; color:#fff; }
/* ── END Random Word ─────────────────────────────────────────────── */
.vl-rand-pop { animation: rzPop .45s ease-out both; }

/* ── Random Word — Mark buttons & Review ────────────────────────── */
.vl-rand-mark-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:8px 0 4px; }
.vl-rand-mark-btn {
  padding:9px 24px; border-radius:20px; font-weight:700; font-size:.9rem; cursor:pointer;
  border:2px solid; transition:background .15s,color .15s,transform .1s;
}
.vl-rand-mark-btn:active { transform:scale(.96); }
.vl-rand-known  { border-color:#16a34a; color:#16a34a; background:none; }
.vl-rand-known.active, .vl-rand-known:hover { background:#16a34a; color:#fff; }
.vl-rand-unk    { border-color:#dc2626; color:#dc2626; background:none; }
.vl-rand-unk.active, .vl-rand-unk:hover { background:#dc2626; color:#fff; }
.vl-rand-review-btn {
  padding:9px 18px; border-radius:20px; border:2px solid #7c3aed; color:#7c3aed;
  background:none; font-weight:700; font-size:.9rem; cursor:pointer;
}
.vl-rand-review-btn:hover { background:#7c3aed; color:#fff; }
.vl-rand-review-header {
  text-align:center; padding:8px 16px; background:#faf5ff; border-bottom:1px solid #e9d5ff;
  font-size:.88rem; color:#6d28d9; font-weight:600;
}
.vl-rand-exit-review {
  background:none; border:1px solid #a78bfa; color:#7c3aed; border-radius:8px;
  padding:2px 8px; cursor:pointer; font-size:.8rem; margin-left:6px;
}
.vl-rand-exit-review:hover { background:#7c3aed; color:#fff; }
/* ── END Random Word extras ──────────────────────────────────────── */

/* ── Writing module ──────────────────────────────────────────────── */
.wr-overlay {
  display:none; position:fixed; inset:0; z-index:9998;
  background:#f8faff; flex-direction:column; overflow:hidden;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.wr-overlay.active { display:flex; }
.wr-page-header {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:8px 14px; border-bottom:1.5px solid #c7d2fe;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
}
.wr-page-title { font-size:1rem; font-weight:800; color:#1e293b; flex:1; }
.wr-header-actions { display:flex; align-items:center; gap:8px; }

/* Two-panel body */
.wr-body {
  display:flex; flex:1; overflow:hidden;
}
/* ── Writing hub (2 thẻ) ── */
.wr-hub { display:none; flex:1; align-items:flex-start; justify-content:center; overflow-y:auto; padding:48px 20px; }
.wr-hub-cards { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; max-width:1080px; width:100%; }
.wr-hub-card { flex:1 1 290px; max-width:330px; background:#fff; border:1.5px solid #eef0f5; border-radius:22px; padding:34px 26px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; box-shadow:0 6px 22px rgba(15,23,42,.06); transition:transform .15s, box-shadow .15s; font-family:inherit; }
.wr-hub-card:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(15,23,42,.12); }
.wr-hub-ic { width:74px; height:74px; border-radius:20px; display:inline-flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:16px; }
.wr-hub-card--samples .wr-hub-ic { background:linear-gradient(135deg,#fef3c7,#fde68a); }
.wr-hub-card--tasks   .wr-hub-ic { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
.wr-hub-tt { font-size:1.3rem; font-weight:800; color:#1e293b; margin-bottom:8px; }
.wr-hub-card--samples .wr-hub-tt::after { content:''; display:block; width:34px; height:3px; border-radius:3px; background:#f59e0b; margin:8px auto 0; }
.wr-hub-card--tasks   .wr-hub-tt::after { content:''; display:block; width:34px; height:3px; border-radius:3px; background:#7c6ef6; margin:8px auto 0; }
.wr-hub-sub { font-size:.95rem; color:#94a3b8; line-height:1.55; }
.wr-hub-back { background:#f1f5f9 !important; color:#475569 !important; }
@media (max-width:560px){ .wr-hub { padding:28px 14px; } .wr-hub-card { padding:26px 18px; } }
.wr-left {
  width:260px; flex-shrink:0; border-right:1.5px solid #c7d2fe;
  background:#fff; overflow-y:auto; display:flex; flex-direction:column;
}
.wr-resizer {
  width:5px; background:#c7d2fe; cursor:col-resize; flex-shrink:0; transition:background .15s;
}
.wr-resizer:hover { background:#4f46e5; }
.wr-body.wr-resizing { user-select:none; cursor:col-resize; }
.wr-right {
  flex:1; overflow-y:auto; min-width:0;
}

/* Left panel */
.wr-left-head {
  font-size:.78rem; font-weight:700; color:#64748b; letter-spacing:.06em;
  text-transform:uppercase; padding:12px 14px 8px; flex-shrink:0;
  border-bottom:1px solid #e2e8f0;
}
.wr-left-empty { font-size:.85rem; color:#94a3b8; padding:16px 14px; }
.wr-left-item {
  padding:10px 14px; border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background .1s;
}
.wr-left-item:hover { background:#f0f4ff; }
.wr-left-item-active { background:#eef2ff; border-left:3px solid #4f46e5; }
.wr-left-item-title { font-weight:600; color:#1e293b; font-size:.9rem; line-height:1.4; }
.wr-left-item-meta { font-size:.76rem; color:#94a3b8; margin-top:2px; }
.wr-badge-count {
  display:inline-block; background:#e0e7ff; color:#4f46e5;
  font-size:.72rem; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:4px;
}

/* Right panel */
.wr-right-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; color:#94a3b8; gap:8px;
}
.wr-right-empty span { font-size:2.5rem; }
.wr-right-empty p { font-size:.9rem; margin:0; }
.wr-right-content { padding:20px 24px; max-width:none; width:100%; box-sizing:border-box; }
.wr-right.colloc-open { padding-right:0; }
.wr-right-title { font-size:1.1rem; font-weight:800; color:#1e293b; margin-bottom:6px; }
.wr-task-info-bar {
  font-size:.82rem; color:#64748b; margin-bottom:14px;
  padding:6px 10px; background:#f8fafc; border-radius:7px;
}
.wr-subs-title {
  font-size:.82rem; font-weight:700; color:#64748b; text-transform:uppercase;
  letter-spacing:.05em; margin:16px 0 8px;
}
.wr-back-link {
  background:none; border:none; cursor:pointer; color:#4f46e5;
  font-size:.85rem; font-weight:600; padding:0; display:inline-block; margin-bottom:10px;
}
.wr-back-link:hover { text-decoration:underline; }

/* Buttons */
.wr-btn {
  padding:8px 18px; border-radius:9px; border:1.5px solid #cbd5e1;
  background:#f8fafc; color:#334155; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:background .12s;
}
.wr-btn:hover { background:#e2e8f0; }
.wr-btn-primary { background:#4f46e5; color:#fff; border-color:#4f46e5; }
.wr-btn-primary:hover { background:#4338ca; }
.wr-btn-sm { padding:5px 12px; font-size:.82rem; }
.wr-btn-icon {
  background:none; border:none; cursor:pointer; padding:5px 7px;
  border-radius:7px; font-size:1rem; color:#64748b;
}
.wr-btn-icon:hover { background:#f1f5f9; }
.wr-btn-icon-del { color:#dc2626; }
.wr-btn-icon-del:hover { background:#fee2e2; }
.wr-btn-del { color:#dc2626; }
.wr-btn-del:hover { background:#fee2e2; }
.wr-back-btn {
  background:none; border:none; cursor:pointer; color:#4f46e5;
  font-size:.88rem; font-weight:600; padding:0 0 10px; display:block;
}
.wr-back-btn:hover { text-decoration:underline; }

/* Task list */
.wr-task-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.wr-task-row {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1.5px solid #e2e8f0; border-radius:10px; padding:12px 14px;
  cursor:pointer; transition:border-color .12s;
}
.wr-task-row:hover { border-color:#a5b4fc; }
.wr-task-info { flex:1; min-width:0; }
.wr-task-title { font-weight:700; color:#1e293b; font-size:.95rem; }
.wr-task-meta { font-size:.8rem; color:#64748b; margin-top:2px; }
.wr-task-actions { display:flex; gap:4px; flex-shrink:0; }
.wr-empty { color:#94a3b8; font-size:.9rem; text-align:center; padding:32px 0; }

/* Task header box */
.wr-task-header-box {
  background:#f0f4ff; border-left:4px solid #4f46e5; border-radius:0 8px 8px 0;
  padding:10px 14px; margin-bottom:14px;
}

/* Form */
.wr-form-title { font-size:1rem; font-weight:700; color:#1e293b; margin-bottom:14px; }
.wr-label { display:block; font-size:.82rem; font-weight:600; color:#475569; margin:10px 0 4px; }
.wr-inp {
  width:100%; box-sizing:border-box; padding:8px 11px; border:1.5px solid #d1d5db;
  border-radius:8px; font-size:.9rem; outline:none;
}
.wr-inp:focus { border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.1); }
.wr-ta {
  width:100%; box-sizing:border-box; padding:8px 11px; border:1.5px solid #d1d5db;
  border-radius:8px; font-size:.9rem; outline:none; resize:vertical; min-height:80px;
  font-family:inherit;
}
.wr-ta:focus { border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.1); }
.wr-form-row { display:flex; gap:12px; }
.wr-form-col { flex:1; min-width:0; }
.wr-form-actions { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.wr-inp-score { width:80px; text-align:center; }
.wr-msg { font-size:.83rem; font-weight:600; }

/* Submissions list */
.wr-sub-list { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.wr-sub-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1.5px solid #e2e8f0; border-radius:10px; cursor:pointer;
}
.wr-sub-row:hover { border-color:#a5b4fc; background:#f8faff; }
.wr-sub-name { flex:1; font-weight:600; color:#1e293b; font-size:.9rem; }
.wr-sub-meta { font-size:.78rem; color:#94a3b8; }
.wr-badge { font-size:.75rem; font-weight:700; padding:3px 8px; border-radius:5px; white-space:nowrap; }
.wr-badge-graded { background:#dcfce7; color:#15803d; }
.wr-badge-pending { background:#fef9c3; color:#92400e; }

/* Grade view */
.wr-grade-name { font-size:1rem; font-weight:700; color:#1e293b; }
.wr-grade-meta { font-size:.8rem; color:#94a3b8; margin-bottom:10px; }
.wr-grade-content {
  background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:10px;
  padding:14px; font-size:.9rem; line-height:1.7; color:#334155;
  max-height:280px; overflow-y:auto; white-space:pre-wrap; margin-bottom:14px;
}
.wr-grade-form { border-top:1.5px solid #f1f5f9; padding-top:14px; }

/* Grade result (student view) */
.wr-grade-result {
  background:linear-gradient(135deg,#f0fdf4,#dcfce7); border:2px solid #86efac;
  border-radius:12px; padding:16px 20px; margin-bottom:14px; text-align:center;
}
.wr-grade-result-score { font-size:2.2rem; font-weight:900; color:#15803d; line-height:1.2; }
.wr-grade-result-score span { font-size:1rem; color:#64748b; }
.wr-grade-result-fb { font-size:.9rem; color:#1e293b; margin-top:10px; text-align:left; }
/* ── AI grading result (Writing) ── */
.wr-ai-bar { margin:14px 0 6px; }
.wr-ai-grade-btn { background:linear-gradient(135deg,#6366f1,#4f46e5) !important; color:#fff !important; border:none !important; font-weight:800; box-shadow:0 4px 12px rgba(79,70,229,.3); }
.wr-ai-grade-btn small { font-weight:600; opacity:.85; }
.wr-ai-grade-btn:disabled { opacity:.6; }
.wr-ai-result { margin:12px 0 4px; }
.wr-ai-head { display:flex; gap:16px; align-items:stretch; flex-wrap:wrap; margin-bottom:14px; }
.wr-ai-band { flex:none; width:120px; border:6px solid #6366f1; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; }
.wr-ai-band.wr-ai-great { border-color:#22c55e; } .wr-ai-band.wr-ai-ok { border-color:#f59e0b; } .wr-ai-band.wr-ai-bad { border-color:#ef4444; }
.wr-ai-band-num { font-size:2.2rem; font-weight:900; color:#1e293b; line-height:1; }
.wr-ai-band-lbl { font-size:.74rem; color:#64748b; font-weight:700; margin-top:4px; }
.wr-ai-crit-grid { flex:1; min-width:240px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wr-ai-crit { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:8px 10px; }
.wr-ai-crit-top { display:flex; justify-content:space-between; font-size:.82rem; font-weight:700; color:#334155; }
.wr-ai-sc.wr-ai-great { color:#16a34a; } .wr-ai-sc.wr-ai-ok { color:#d97706; } .wr-ai-sc.wr-ai-bad { color:#dc2626; }
.wr-ai-crit-fb { font-size:.76rem; color:#64748b; margin-top:3px; line-height:1.45; }
.wr-ai-sec { margin-top:14px; }
.wr-ai-sec-lbl { font-size:.82rem; font-weight:800; color:#1e293b; margin-bottom:6px; }
.wr-ai-overall { font-size:.9rem; color:#374151; line-height:1.6; background:#f8fafc; border-radius:10px; padding:10px 12px; }
.wr-ai-vocab, .wr-ai-errs { margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.wr-ai-vocab li, .wr-ai-errs li { font-size:.86rem; line-height:1.5; background:#f8fafc; border:1px solid #eef0f5; border-radius:8px; padding:7px 10px; }
.wr-ai-weak { color:#dc2626; text-decoration:line-through; }
.wr-ai-better { color:#15803d; font-weight:800; }
.wr-ai-vi { color:#64748b; }
.wr-ai-errtype { display:inline-block; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; background:#fef3c7; color:#92400e; border-radius:5px; padding:1px 7px; margin-right:4px; }
.wr-ai-wrong { color:#dc2626; text-decoration:line-through; }
.wr-ai-fix { color:#15803d; font-weight:700; }
.wr-ai-errnote { font-size:.76rem; color:#64748b; margin-top:2px; }
/* ── Peer visibility toggle + peers' essays ── */
.wr-peer-toggle { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.wr-peer-track { width:42px; height:24px; border-radius:999px; background:#cbd5e1; position:relative; cursor:pointer; flex:none; transition:background .15s; }
.wr-peer-track.on { background:#16a34a; }
.wr-peer-thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .15s; }
.wr-peer-track.on .wr-peer-thumb { left:21px; }
.wr-peer-lbl { font-size:.85rem; font-weight:700; color:#334155; }
.wr-peers-sec { margin-top:6px; }
.wr-peer-card { border:1px solid #e2e8f0; border-radius:10px; margin-top:8px; background:#fff; overflow:hidden; }
.wr-peer-card > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:.9rem; }
.wr-peer-card > summary::-webkit-details-marker { display:none; }
.wr-peer-name { font-weight:800; color:#1e293b; flex:1; }
.wr-peer-band { background:#ecfdf5; color:#15803d; border:1px solid #a7f3d0; border-radius:999px; padding:2px 10px; font-size:.78rem; font-weight:800; }
.wr-peer-wc { font-size:.78rem; color:#94a3b8; }
.wr-peer-body { padding:0 14px 14px; }
.wr-overlay.wr-dark .wr-peer-lbl { color:#cbd5e1; }
.wr-overlay.wr-dark .wr-peer-card { background:#0f1623; border-color:rgba(255,255,255,.1); }
.wr-overlay.wr-dark .wr-peer-name { color:#e8eaf0; }
.wr-manual-grade { margin-top:14px; border-top:1px dashed #e2e8f0; padding-top:8px; }
.wr-manual-grade summary { cursor:pointer; font-size:.82rem; font-weight:700; color:#64748b; }
.wr-overlay.wr-dark .wr-ai-crit, .wr-overlay.wr-dark .wr-ai-overall, .wr-overlay.wr-dark .wr-ai-vocab li, .wr-overlay.wr-dark .wr-ai-errs li { background:#0f1623; border-color:rgba(255,255,255,.1); color:#cbd5e1; }
.wr-overlay.wr-dark .wr-ai-band-num { color:#e8eaf0; }
@media (max-width:560px){ .wr-ai-crit-grid { grid-template-columns:1fr; } }
.wr-submitted-content {
  background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:10px;
  padding:14px; font-size:.9rem; line-height:1.7; color:#334155; white-space:pre-wrap;
}

/* Code entry screen */
.wr-code-screen { text-align:center; padding:40px 24px; }
.wr-code-icon { font-size:2.5rem; margin-bottom:8px; }
.wr-code-title { font-size:1.15rem; font-weight:800; color:#1e293b; margin-bottom:6px; }
.wr-code-desc { font-size:.88rem; color:#64748b; margin-bottom:20px; }
.wr-code-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.wr-code-inp {
  padding:10px 14px; border:1.5px solid #d1d5db; border-radius:9px;
  font-size:1.2rem; font-weight:700; letter-spacing:.18em; text-align:center;
  width:140px; outline:none; text-transform:uppercase;
}
.wr-code-inp:focus { border-color:#4f46e5; }

/* Student writing area */
.wr-prompt-box { background:#fffbeb; border-left:4px solid #f59e0b; border-radius:0 8px 8px 0; padding:12px 14px; margin-bottom:10px; }
.wr-reqs-box  { background:#f0fdf4; border-left:4px solid #22c55e; border-radius:0 8px 8px 0; padding:10px 14px; margin-bottom:10px; }
.wr-prompt-label { font-size:.78rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.wr-prompt-text, .wr-reqs-text { font-size:.92rem; color:#1e293b; line-height:1.6; }
.wr-write-area { margin-top:10px; }
.wr-wc-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.wr-wc { font-weight:700; color:#4f46e5; font-size:.88rem; }
.wr-wc-min { font-size:.82rem; color:#94a3b8; }
.wr-write-ta {
  width:100%; box-sizing:border-box; border:1.5px solid #d1d5db; border-radius:10px;
  padding:12px; font-size:.92rem; line-height:1.7; resize:vertical; min-height:220px;
  font-family:inherit; outline:none;
}
.wr-write-ta:focus { border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.1); }
.wr-write-actions { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.wr-saved-note { font-size:.78rem; color:#94a3b8; }
/* Writing samples */
.wr-samples-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.wr-samples-section { margin-bottom:24px; }
.wr-samples-sec-head {
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:2px solid #e0e7ff; padding-bottom:8px; margin-bottom:12px;
}
.wr-samples-sec-title {
  font-size:1rem; font-weight:800; color:#4f46e5;
  letter-spacing:.02em;
}
.wr-samples-empty { color:#94a3b8; font-size:.88rem; font-style:italic; padding:8px 0; }
.wr-sample-card {
  background:#fff; border:1.5px solid #e2e8f0; border-radius:12px;
  padding:14px 16px; margin-bottom:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.wr-sample-top { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.wr-sample-title { font-size:.95rem; font-weight:700; color:#1e293b; flex:1; }
.wr-sample-meta { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.wr-sample-band {
  background:#dcfce7; color:#15803d; font-size:.75rem; font-weight:700;
  padding:2px 8px; border-radius:20px; white-space:nowrap;
}
.wr-sample-actions { display:flex; gap:2px; flex-shrink:0; }
.wr-sample-details {
  margin-top:6px; border:none;
}
.wr-sample-details summary {
  font-size:.82rem; font-weight:600; color:#6366f1; cursor:pointer;
  user-select:none; list-style:none; padding:4px 0;
}
.wr-sample-details summary::-webkit-details-marker { display:none; }
.wr-sample-details[open] summary::after { content:' ▲'; font-size:.65rem; }
.wr-sample-details:not([open]) summary::after { content:' ▼'; font-size:.65rem; }
.wr-sample-body {
  font-size:.88rem; color:#334155; line-height:1.75;
  background:#f8fafc; border-radius:8px; padding:10px 12px; margin-top:5px;
}
.wr-sample-essay { font-family:Georgia, serif; }
.wr-prompt-body {
  font-size:.9rem; color:#1e3a5f; line-height:1.8;
  background:#eff6ff; border:2px solid #3b82f6;
  border-radius:10px; padding:12px 16px; margin-top:6px;
  font-style:italic;
}
.wr-essay-summary {
  display:flex; align-items:center; justify-content:flex-start;
  flex-wrap:wrap; gap:6px 8px;
}
.wr-essay-summary::after { display:none; }
/* Nhãn "Sample Essay" chiếm trọn hàng 1 → các nút công cụ xuống hàng 2 cho đỡ chật */
.wr-essay-sum-label { flex-basis:100%; font-size:.82rem; font-weight:600; color:#6366f1; }
.wr-essay-summary .wr-cefr-btns { flex-wrap:wrap; }
.wr-essay-sum-label::after { content:' \25BC'; font-size:.6rem; }
details[open] .wr-essay-summary .wr-essay-sum-label::after { content:' \25B2'; font-size:.6rem; }
/* Toolbar chỉ hiện khi essay đang mở */
.wr-essay-summary .wr-cefr-btns,
.wr-essay-summary .wr-colloc-panel-btn,
.wr-essay-summary .wr-struct-panel-btn,
.wr-essay-summary .wr-vi-panel-btn,
.wr-essay-summary .wr-vi-test-launch-btn,
.wr-essay-summary .wr-btn-icon,
.wr-essay-summary .wr-font-size-ctrl,
.wr-essay-summary .wr-vocab-btn { display:none; }
details[open] .wr-essay-summary .wr-cefr-btns { display:inline-flex; }
details[open] .wr-essay-summary .wr-colloc-panel-btn,
details[open] .wr-essay-summary .wr-struct-panel-btn,
details[open] .wr-essay-summary .wr-vi-panel-btn,
details[open] .wr-essay-summary .wr-vi-test-launch-btn,
details[open] .wr-essay-summary .wr-btn-icon,
details[open] .wr-essay-summary .wr-vocab-btn { display:inline-flex; }
details[open] .wr-essay-summary .wr-font-size-ctrl { display:inline-flex; align-items:center; gap:2px; flex-shrink:0; }
.wr-font-size-ctrl { display:inline-flex; align-items:center; gap:2px; flex-shrink:0; }
.wr-font-size-btn {
  background:none; border:1.5px solid #94a3b8; color:#64748b;
  border-radius:6px; padding:2px 7px; font-size:.75rem; font-weight:700;
  cursor:pointer; transition:background .15s,color .15s,border-color .15s; line-height:1.4;
}
.wr-font-size-btn:hover { background:#f1f5f9; border-color:#6366f1; color:#6366f1; }
.wr-vocab-btn {
  background:none; border:1.5px solid #6366f1; color:#6366f1;
  border-radius:8px; padding:3px 10px; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:background .15s,color .15s; flex-shrink:0;
}
.wr-vocab-btn:hover { background:#6366f1; color:#fff; }
.wr-cefr-btns { display:inline-flex; gap:4px; align-items:center; }
.wr-cefr-btn {
  border:1.5px solid currentColor; border-radius:6px; padding:2px 7px;
  font-size:.72rem; font-weight:700; cursor:pointer; background:none;
  transition:background .15s,color .15s; opacity:.65;
}
.wr-cefr-btn:hover { opacity:1; }
.wr-cefr-btn-on { opacity:1 !important; }
.wr-cefr-A1 { color:#15803d; }  .wr-cefr-btn-on.wr-cefr-A1 { background:#dcfce7; }
.wr-cefr-A2 { color:#1d4ed8; }  .wr-cefr-btn-on.wr-cefr-A2 { background:#dbeafe; }
.wr-cefr-B1 { color:#92400e; }  .wr-cefr-btn-on.wr-cefr-B1 { background:#fef9c3; }
.wr-cefr-B2 { color:#9a3412; }  .wr-cefr-btn-on.wr-cefr-B2 { background:#ffedd5; }
.wr-cefr-C1 { color:#6b21a8; }  .wr-cefr-btn-on.wr-cefr-C1 { background:#f3e8ff; }
.wr-cefr-C2 { color:#9f1239; }  .wr-cefr-btn-on.wr-cefr-C2 { background:#ffe4e6; }
.wr-sample-img {
  display:block; max-width:100%; border-radius:8px;
  margin-bottom:10px; border:1px solid #e2e8f0;
}
.wr-sm-img-preview { margin-bottom:8px; }
.wr-sm-img-preview img { max-width:260px; max-height:180px; border-radius:8px; border:1.5px solid #e2e8f0; display:block; margin-bottom:6px; }
.wr-sm-img-remove { font-size:.82rem; color:#dc2626; cursor:pointer; display:flex; align-items:center; gap:5px; }
.wr-sm-file-inp { display:block; margin:4px 0; font-size:.88rem; }
.wr-sm-img-hint { font-size:.78rem; color:#94a3b8; margin-top:2px; }
/* Writing topic card grid */
/* ── Writing — vùng dán ảnh đề bài (Ctrl+V / kéo thả / chọn file) ── */
.wr-img-zone {
  border: 2px dashed #cbd5e1; border-radius: 12px;
  background: #f8fafc; padding: 16px; margin-bottom: 4px;
  text-align: center; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s;
}
.wr-img-zone:hover, .wr-img-zone:focus { border-color: #6366f1; background: #f5f3ff; outline: none; }
.wr-img-zone.wr-img-zone-drag { border-color: #6366f1; background: #eef2ff; }
.wr-img-zone-empty { font-size: .9rem; color: #94a3b8; font-weight: 600; padding: 18px 8px; }
.wr-img-zone-preview { max-width: 100%; max-height: 320px; border-radius: 10px; display: block; margin: 0 auto; box-shadow: 0 4px 16px rgba(15,23,42,.12); }
.wr-img-zone-remove {
  position: absolute; top: 10px; right: 10px;
  border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  background: #fee2e2; color: #dc2626; font-size: .78rem; font-weight: 800; font-family: inherit;
}
.wr-img-zone-remove:hover { background: #fecaca; }
/* Ảnh đề bài hiển thị cho học viên / admin */
.wr-task-img-wrap { margin: 4px 0 14px; }
.wr-task-img { max-width: 100%; max-height: 460px; border-radius: 12px; border: 1.5px solid #e2e8f0; cursor: zoom-in; box-shadow: 0 4px 16px rgba(15,23,42,.1); }
/* Task 1 có hình: ảnh trái + ô gõ phải, đồng hồ ở góc */
.wr-task-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wr-task-topbar .wr-right-title { margin-bottom: 0; }
.wr-timer {
  flex: none; font-size: 1.02rem; font-weight: 800; color: #4f46e5;
  background: #eef2ff; border: 1.5px solid #c7d2fe; border-radius: 999px;
  padding: 6px 15px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wr-task-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.wr-task-left, .wr-task-right { min-width: 0; }
.wr-col-label { font-size: .8rem; font-weight: 800; color: #64748b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.wr-task-2col .wr-write-ta { min-height: 440px; }
@media (max-width: 860px) {
  .wr-task-cols { grid-template-columns: 1fr; gap: 16px; }
  .wr-task-2col .wr-write-ta { min-height: 240px; }
}
.wr-overlay.wr-dark .wr-timer { background: #1e1b4b; border-color: #4338ca; color: #c7d2fe; }
.wr-overlay.wr-dark .wr-col-label { color: #94a3b8; }

/* ── Writing — bảng chọn icon cho nhóm bài mẫu ── */
.wr-icon-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; max-width: 560px; }
.wr-icon-opt {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer;
  font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, transform .12s;
}
.wr-icon-opt:hover { border-color: #86efac; background: #f0fdf4; transform: translateY(-1px); }
.wr-icon-opt.on { border-color: #16a34a; background: #16a34a; box-shadow: 0 4px 12px rgba(22,163,74,.3); }

/* ── Bài viết mẫu — thiết kế thẻ mới (icon + mô tả + pill + mũi tên) ── */
.wr-sm-wrap { max-width: 1180px; }
.wr-sm-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.wr-sm-hero-ic {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe); box-shadow: 0 6px 18px rgba(124,58,237,.18);
}
.wr-sm-hero-title { font-size: 1.9rem; font-weight: 900; color: #1e293b; letter-spacing: -.02em; line-height: 1.1; }
.wr-sm-hero-sub { font-size: .95rem; color: #94a3b8; font-weight: 500; margin-top: 4px; }
.wr-sm-section { margin-bottom: 30px; }
.wr-sm-sec-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1.5px solid #eef2f7; }
.wr-sm-sec-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff;
}
.wr-sm-sec-title { font-size: 1.3rem; font-weight: 800; color: #6d28d9; }
.wr-sm-add-btn { margin-left: auto; }
.wr-sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.wr-sm-card {
  position: relative; cursor: pointer;
  border-radius: 18px; padding: 22px 22px 16px;
  background: linear-gradient(160deg, #fff, var(--wcbg, #f8fafc));
  border: 1.5px solid #eef2f7;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  transition: transform .16s, box-shadow .16s, border-color .16s;
  display: flex; flex-direction: column; gap: 18px; min-height: 150px;
}
.wr-sm-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15,23,42,.12); border-color: var(--wc, #c4b5fd); }
.wr-sm-card-top { display: flex; align-items: flex-start; gap: 16px; }
.wr-sm-card-ic {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; font-size: 1.55rem;
  background: var(--wcg, #7c3aed); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.wr-sm-card-head { min-width: 0; flex: 1; }
.wr-sm-card-name { font-size: 1.18rem; font-weight: 800; color: #1e293b; margin-bottom: 5px; }
.wr-sm-card-desc { font-size: .9rem; color: #94a3b8; line-height: 1.45; }
.wr-sm-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.wr-sm-card-count {
  font-size: .82rem; font-weight: 800; color: var(--wc, #7c3aed);
  background: var(--wcbg, #f5f3ff); border-radius: 999px; padding: 6px 14px;
}
.wr-sm-card-go {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--wc, #7c3aed); font-size: 1.15rem; font-weight: 800;
  box-shadow: 0 3px 10px rgba(15,23,42,.12); transition: transform .16s, background .16s, color .16s;
}
.wr-sm-card:hover .wr-sm-card-go { background: var(--wc, #7c3aed); color: #fff; transform: translateX(3px); }
.wr-sm-card-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; z-index: 2; }
.wr-sm-card:hover .wr-sm-card-actions { opacity: 1; }
@media (max-width: 640px) { .wr-sm-grid { grid-template-columns: 1fr; } .wr-sm-hero-title { font-size: 1.5rem; } }

.wr-topic-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px; margin-bottom:8px;
}
.wr-topic-card {
  border-radius:14px; padding:16px 14px 12px;
  cursor:pointer; position:relative; min-height:100px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .15s,box-shadow .15s;
  border:1.5px solid rgba(0,0,0,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.wr-topic-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}
.wr-topic-card-name {
  font-size:.92rem; font-weight:700; color:#1e293b;
  line-height:1.35; word-break:break-word;
}
.wr-topic-card-count {
  font-size:.76rem; color:#64748b;
  margin-top:10px; font-weight:600;
}
.wr-topic-card-actions {
  position:absolute; top:6px; right:6px;
  display:flex; gap:3px;
  opacity:0; transition:opacity .15s;
}
.wr-topic-card:hover .wr-topic-card-actions { opacity:1; }
.wr-tca-btn {
  background:rgba(0,0,0,.08); border:none; border-radius:6px;
  color:#1e293b; cursor:pointer; padding:3px 7px;
  font-size:.8rem; line-height:1;
}
.wr-tca-btn:hover { background:rgba(0,0,0,.16); }
.wr-tca-del:hover { background:rgba(220,38,38,.15); color:#dc2626; }
/* Writing group detail view */
.wr-topic-detail-head {
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; flex-wrap:wrap;
}
.wr-topic-detail-title {
  font-size:1rem; font-weight:800; flex:1; color:#1e293b !important;
}
/* Writing — colloc sticky sidebar (absolute inside essay-wrap) */
.wr-essay-wrap { position:relative; }
.wr-essay-wrap.wr-colloc-open { padding-right:290px; }
.wr-colloc-panel {
  display:none;
  position:absolute; right:0; top:0; bottom:0;
  width:270px;
  background:linear-gradient(160deg,#f0fdf4 0%,#dcfce7 100%);
  border:1.5px solid #86efac;
  border-radius:14px;
  box-shadow:0 4px 18px rgba(34,197,94,.13);
  overflow:hidden;
  z-index:10;
}
.wr-colloc-panel.active { display:block; }
.wr-colloc-panel-inner {
  height:100%; box-sizing:border-box;
  overflow-y:auto;
  padding:14px;
}
.wr-colloc-panel-head {
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:6px;
  margin-bottom:10px; padding-bottom:8px; border-bottom:1.5px solid #bbf7d0;
}
/* Tiêu đề chiếm trọn hàng 1 → Show all / Test xuống hàng 2 */
.wr-colloc-panel-head .wr-colloc-panel-title { flex-basis:100%; }
.wr-colloc-panel-title { font-size:.8rem; font-weight:700; color:#166534; flex:1; }
.wr-colloc-toggleall-btn {
  background:none; border:1.5px dashed #86efac; color:#166534;
  border-radius:6px; padding:2px 9px; font-size:.72rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap; margin-right:4px;
}
.wr-colloc-test-btn {
  background:linear-gradient(135deg,#f59e0b,#ea580c); border:none; color:#fff;
  border-radius:6px; padding:3px 11px; font-size:.72rem; font-weight:800;
  cursor:pointer; font-family:inherit; white-space:nowrap; margin-right:4px;
  box-shadow:0 2px 7px rgba(234,88,12,.3); transition:filter .15s;
}
.wr-colloc-test-btn:hover { filter:brightness(1.07); }
/* ── Collocation test modal ── */
.wr-cot-ov { position:fixed; inset:0; z-index:100002; background:rgba(15,23,42,.55); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:16px; }
.wr-cot-ov.active { display:flex; }
.wr-cot-box { position:relative; background:#fff; border-radius:20px; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; padding:22px 24px 24px; box-shadow:0 24px 64px rgba(0,0,0,.32); }
.wr-cot-close { position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:#f1f5f9; color:#64748b; font-size:1.3rem; cursor:pointer; }
.wr-cot-close:hover { background:#e2e8f0; }
.wr-cot-progress { height:7px; background:#eef0f5; border-radius:99px; overflow:hidden; margin:6px 0 16px; }
.wr-cot-progress-bar { height:100%; background:linear-gradient(90deg,#f59e0b,#ea580c); border-radius:99px; transition:width .3s; }
.wr-cot-count { font-size:.82rem; font-weight:700; color:#94a3b8; margin-bottom:12px; }
.wr-cot-score { color:#16a34a; }
.wr-cot-q-label { font-size:.85rem; font-weight:800; color:#64748b; margin-bottom:8px; }
.wr-cot-sent { font-family:'Lora',serif; font-size:1.15rem; line-height:1.7; color:#1e293b; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; }
.wr-cot-meaning { font-style:italic; text-align:center; color:#0f766e; }
.wr-cot-blank-wrap { text-align:center; margin-top:12px; }
.wr-cot-blank { display:inline-block; min-width:90px; padding:1px 12px; border-radius:6px; background:#fef3c7; color:#b45309; font-weight:800; letter-spacing:.05em; }
.wr-cot-blank-ok { background:#dcfce7; color:#15803d; letter-spacing:0; }
.wr-cot-blank-bad { background:#fee2e2; color:#dc2626; letter-spacing:0; }
.wr-cot-bank-lbl { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; margin:18px 0 8px; }
.wr-cot-bank { display:flex; flex-wrap:wrap; gap:10px; }
.wr-cot-opt { padding:11px 18px; border-radius:12px; border:1.5px solid #e0e4f4; background:#fff; color:#2563eb; font-size:1rem; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 3px 9px rgba(79,110,247,.1); transition:transform .12s, box-shadow .12s; }
.wr-cot-opt:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 18px rgba(79,110,247,.18); }
.wr-cot-opt:disabled { cursor:default; }
.wr-cot-opt-correct { background:#ecfdf5 !important; border-color:#6ee7b7 !important; color:#15803d !important; }
.wr-cot-opt-wrong { background:#fef2f2 !important; border-color:#fca5a5 !important; color:#dc2626 !important; }
.wr-cot-fb { margin-top:14px; font-size:.95rem; min-height:1.2em; }
.wr-cot-fb-ok { color:#15803d; font-weight:800; } .wr-cot-fb-bad { color:#dc2626; font-weight:800; } .wr-cot-fb-vi { color:#64748b; }
.wr-cot-actions { margin-top:16px; text-align:right; }
.wr-cot-next { padding:11px 28px; border-radius:12px; border:none; background:linear-gradient(135deg,#f59e0b,#ea580c); color:#fff; font-size:.95rem; font-weight:800; cursor:pointer; }
.wr-cot-result { text-align:center; padding:18px 0; }
.wr-cot-result-emoji { font-size:2.6rem; } .wr-cot-result-score { font-size:1.8rem; font-weight:900; color:#1e293b; margin-top:6px; } .wr-cot-result-pct { color:#64748b; font-weight:700; }
.wr-cot-ov.vs-dark .wr-cot-box { background:#1f2230; color:#e8eaf0; }
.wr-cot-ov.vs-dark .wr-cot-sent { background:#171a24; border-color:#343a4d; color:#e8eaf0; }
.wr-cot-ov.vs-dark .wr-cot-opt { background:#262a3a; border-color:#343a4d; color:#a5b4fc; }
@media (max-width:560px){ .wr-cot-sent { font-size:1.02rem; } }
.wr-colloc-toggleall-btn:hover { background:#bbf7d0; border-color:#4ade80; color:#14532d; }
.wr-colloc-toggleall-on { background:#fef9c3 !important; border-color:#eab308 !important; color:#92400e !important; border-style:solid !important; }
/* Colloc toggle button in summary */
.wr-colloc-panel-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:20px;
  border:1.5px solid #86efac; background:#f0fdf4;
  font-size:.8rem; font-weight:600; color:#166534;
  cursor:pointer; transition:all .15s; flex-shrink:0;
}
.wr-colloc-panel-btn:hover { border-color:#4ade80; color:#14532d; background:#dcfce7; }
.wr-colloc-panel-btn-on { background:#dcfce7; border-color:#22c55e; color:#14532d; }
.wr-colloc-count {
  display:inline-block; background:#16a34a; color:#fff;
  font-size:.68rem; padding:1px 6px; border-radius:999px; font-weight:800;
}
/* Colloc list inside panel */
.wr-colloc-lv-section { margin-bottom:8px; }
.wr-colloc-lv-badge {
  display:inline-block; padding:2px 10px; border-radius:20px;
  font-size:.7rem; font-weight:800; letter-spacing:.06em; margin-bottom:5px;
}
.wr-colloc-row {
  display:flex; flex-direction:column; gap:2px; padding:6px 8px;
  border-radius:8px; cursor:pointer; transition:background .12s;
  border:1.5px solid transparent; margin-bottom:2px;
  background:rgba(255,255,255,.55);
}
.wr-colloc-row:hover { background:rgba(255,255,255,.9); border-color:#86efac; }
.wr-colloc-row-on { background:#fff !important; border-color:#4ade80 !important; box-shadow:0 1px 6px rgba(34,197,94,.15); }
.wr-colloc-phrase { font-weight:700; color:#14532d; font-size:.84rem; }
.wr-colloc-vi { color:#166534; font-size:.78rem; font-style:italic; opacity:.8; }
.wr-colloc-mark { border-radius:3px; padding:0 2px; }
.wr-colloc-edit-area { padding:10px 0 4px; }
/* Writing — VI panel button */
.wr-vi-panel-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:8px; border:1.5px solid #0891b2;
  background:none; color:#0891b2; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:background .15s,color .15s; flex-shrink:0; font-family:inherit;
}
.wr-vi-panel-btn:hover,.wr-vi-panel-btn.wr-colloc-panel-btn-on { background:#0891b2; color:#fff; }
/* Writing — VI panel (fixed right sidebar, same position as colloc) */
.wr-vi-panel {
  display:none;
  position:fixed; right:18px; top:68px;
  width:300px;
  background:#fff;
  border:1.5px solid #bae6fd;
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.11);
  max-height:calc(100vh - 88px); overflow-y:auto;
  padding:14px;
  z-index:200;
}
.wr-vi-panel.active { display:block; }
.wr-vi-row {
  border:1.5px solid #e2e8f0; border-radius:10px;
  padding:10px 12px; margin-bottom:8px;
  background:#f8fafc;
}
.wr-vi-vi {
  font-size:.84rem; color:#0c4a6e; font-weight:600; line-height:1.55;
  margin-bottom:6px;
}
.wr-vi-reveal-btn {
  display:inline-block; padding:3px 10px; border-radius:6px;
  border:1px solid #bae6fd; background:#f0f9ff; color:#0891b2;
  font-size:.75rem; font-weight:700; cursor:pointer; margin-bottom:6px;
  font-family:inherit; transition:background .12s;
}
.wr-vi-reveal-btn:hover { background:#e0f2fe; }
.wr-vi-en {
  font-size:.82rem; color:#166534; font-style:italic; line-height:1.5;
  background:#f0fdf4; border-radius:6px; padding:6px 8px;
  border:1px solid #bbf7d0;
}
.wr-vi-en.wr-vi-en-hidden { display:none; }
/* Writing — inline VI translation block in essay */
.wr-vi-inline {
  display:block; margin:4px 0 10px;
  padding:6px 12px;
  background:#fefce8; border-left:3px solid #eab308;
  border-radius:0 8px 8px 0;
  font-size:.97em; color:#854d0e; font-style:italic;
  font-family:'Plus Jakarta Sans',sans-serif; line-height:1.6;
}
/* Writing — active state for Dịch button */
.wr-vi-panel-btn-on { background:#0891b2 !important; color:#fff !important; }
/* Writing — VI test hint content */
.wr-vi-vocab-hint,.wr-vi-colloc-hint { text-align:left; font-style:normal; padding:4px 0; }
.wr-vi-vocab-row { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; padding:5px 0; border-bottom:1px solid #f1f5f9; }
.wr-vi-vocab-row:last-child { border-bottom:none; }
.wr-vi-vocab-word { font-weight:700; color:#1e293b; font-size:.88rem; }
.wr-vi-vocab-pos { font-size:.72rem; color:#94a3b8; font-style:italic; }
.wr-vi-vocab-ipa { font-size:.8rem; color:#6366f1; font-style:normal; font-family:'Noto Sans','Lucida Sans Unicode','Segoe UI',sans-serif; letter-spacing:.02em; }
.wr-vi-vocab-lv { font-size:.68rem; font-weight:700; padding:1px 5px; border-radius:4px; }
.wr-vi-vocab-mean { font-size:.82rem; color:#64748b; }
.wr-vi-colloc-row { padding:4px 0; border-bottom:1px solid #f1f5f9; }
.wr-vi-colloc-row:last-child { border-bottom:none; }
.wr-vi-colloc-phrase { font-weight:700; color:#1e293b; font-size:.86rem; }
.wr-vi-colloc-vi { font-size:.8rem; color:#64748b; font-style:italic; }
/* Writing — VI test launch button (in panel header) */
.wr-vi-test-launch-btn {
  padding:2px 9px; border-radius:7px; border:1.5px solid #0891b2;
  background:#f0f9ff; color:#0891b2; font-size:.75rem; font-weight:700;
  cursor:pointer; font-family:inherit; transition:background .12s,color .12s; flex-shrink:0;
}
.wr-vi-test-launch-btn:hover { background:#0891b2; color:#fff; }
/* Writing — VI test modal overlay */
.wr-vi-test-overlay {
  display:none; position:fixed; inset:0; z-index:10000;
  background:#eef2f6; align-items:stretch; justify-content:stretch;
}
/* Trang luyện tập full màn hình: cột chính (trái) + sidebar kết quả (phải) */
.wr-vi-test-layout { display:flex; flex:1; width:100%; min-height:0; }
.wr-vi-test-main {
  flex:1; min-width:0; overflow-y:auto;
  display:flex; justify-content:center; align-items:flex-start; padding:24px 16px;
  transition: padding-left .2s ease;
}
/* Khi mở từ điển: đẩy khung luyện sang phải để chừa chỗ cho khung từ điển */
@media (min-width:900px) {
  .wr-vi-test-overlay.wr-dict-open .wr-vi-test-main { padding-left:380px; }
}
.wr-vi-test-side {
  width:300px; flex-shrink:0; background:#fff; border-left:1px solid #e2e8f0;
  overflow-y:auto; padding:18px 16px;
  font-family:'Nunito','Segoe UI',system-ui,sans-serif;
}
.wr-vi-test-side * { font-family:'Nunito','Segoe UI',system-ui,sans-serif; }
.wr-vi-side-title { font-size:1rem; font-weight:800; color:#1e293b; display:flex; align-items:center; gap:7px; }
/* Counter: chấm màu + số (giống thiết kế) */
.wr-vi-side-score { display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:.82rem; color:#475569; margin:8px 0 16px; }
.wr-vi-sc { display:inline-flex; align-items:center; gap:6px; }
.wr-vi-sc b { font-weight:800; color:#334155; }
.wr-vi-dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.wr-vi-dot-ok { background:#16a34a; }
.wr-vi-dot-done { background:#cbd5e1; }
.wr-vi-sc-ok { color:#16a34a; font-weight:700; }
.wr-vi-sc-done { color:#94a3b8; font-weight:700; }
.wr-vi-side-item {
  display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-radius:13px;
  margin-bottom:8px; border:1.5px solid #eef2f6; background:#fff;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
.wr-vi-side-item.clickable { cursor:pointer; }
.wr-vi-side-item.clickable:hover { background:#f8fafc; border-color:#cbd5e1; }
.wr-vi-side-item.reviewing { border-color:#6366f1; background:#eef2ff; }
.wr-vi-side-badge {
  width:26px; height:26px; border-radius:50%; flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem;
}
.wr-vi-side-vi { font-size:.84rem; color:#475569; line-height:1.5; word-break:break-word; }
.wr-vi-side-item.current { border-color:#0d9488 !important; background:#f0fdfa !important; box-shadow:0 2px 10px rgba(13,148,136,.12); }
.wr-vi-test-modal {
  --wrvi-fs:1;
  background:#fff; border-radius:18px; width:100%; max-width:820px;
  box-shadow:0 8px 30px rgba(0,0,0,.10);
  padding:24px 26px; display:flex; flex-direction:column;
}
.wr-vi-test-modal .co-test-q-vi.wr-vi-q-box { font-size:calc(1.18rem * var(--wrvi-fs)) !important; }
.wr-vi-test-modal .co-vt-inp { font-size:calc(1.02rem * var(--wrvi-fs)); }
.wr-vi-test-modal .wr-vi-feedback, .wr-vi-test-modal .co-test-feedback { font-size:calc(1rem * var(--wrvi-fs)); }
.wr-vi-fs-btn {
  border:1px solid #cbd5e1; background:#fff; color:#475569; border-radius:7px;
  font-weight:800; font-size:.8rem; padding:3px 8px; cursor:pointer; line-height:1;
}
.wr-vi-fs-btn:hover { border-color:#0d9488; color:#0d9488; }
.wr-vi-fs-grp { display:inline-flex; gap:4px; margin-left:4px; }
/* Khung câu hỏi đẹp hơn (theme teal + dấu nháy trang trí) */
.wr-vi-q-head {
  text-align:center; font-size:.72rem; font-weight:800; letter-spacing:.09em;
  color:#94a3b8; text-transform:uppercase; margin-bottom:12px;
}
.co-test-q-vi.wr-vi-q-box {
  position:relative; text-align:center !important;
  background:linear-gradient(135deg,#f0fdfa 0%,#e6fbf6 100%) !important;
  border:1.5px solid #99f6e4 !important; border-radius:18px !important;
  padding:24px 30px !important; line-height:1.55; color:#0f172a !important;
}
.co-test-q-vi.wr-vi-q-box::before {
  content:'\201C'; position:absolute; top:0; left:14px;
  font-size:2.6rem; line-height:1; color:#5eead4; font-family:Georgia,'Times New Roman',serif;
}
.wr-vi-confirm-wide.co-type-submit { background:#0d9488 !important; border-color:#0d9488 !important; }
.wr-vi-confirm-wide.co-type-submit:hover { background:#0f766e !important; }
.wr-vi-side-item.current .wr-vi-side-badge { background:#0d9488 !important; color:#fff !important; }
.wr-vi-side-item.current { border-color:#0d9488 !important; background:#f0fdfa !important; }
.wr-vi-review-resume {
  width:100%; margin-top:14px; padding:12px; border-radius:11px; border:none;
  background:#0891b2; color:#fff; font-size:.95rem; font-weight:700; cursor:pointer; font-family:inherit;
}
.wr-vi-review-resume:hover { background:#0e7490; }
@media (max-width:860px) {
  .wr-vi-test-layout { flex-direction:column; }
  .wr-vi-test-main { order:1; padding:14px 10px; }
  .wr-vi-test-side { order:2; width:auto; border-left:none; border-top:1px solid #e2e8f0; max-height:36vh; }
}
.wr-vi-test-header {
  display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap;
}
/* Mọi item trong header cùng chiều cao, canh giữa (badge vốn có margin-bottom gây lệch) */
.wr-vi-test-header > * { margin-bottom:0 !important; align-self:center; }
.wr-vi-test-header .co-test-type-badge { margin:0 !important; padding:5px 12px; line-height:1.2; display:inline-flex; align-items:center; }
.wr-vi-test-header .wr-vi-dict-btn,
.wr-vi-test-header .vl-ai-toggle-btn,
.wr-vi-test-header .wr-credits-chip { height:30px; }
.wr-vi-test-prog-lbl { font-size:.82rem; color:#64748b; margin-left:auto; white-space:nowrap; }
/* Icon coin vàng vẽ bằng CSS (không phụ thuộc emoji 🪙) — disc vàng có viền */
.gold-coin {
  display:inline-block; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff4c2, #fbbf24 56%, #d97706 100%);
  border:1px solid #b45309;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), inset 0 -1px 2px rgba(180,83,9,.45);
  vertical-align:-3px; flex-shrink:0;
}
.wr-credits-chip {
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  height:26px; padding:0 10px; border-radius:999px;
  border:1.5px solid #fcd34d; background:#fffbeb; color:#92400e;
  font-size:.78rem; font-weight:800; cursor:pointer; white-space:nowrap; transition:all .13s;
}
.wr-credits-chip:hover { background:#fef3c7; border-color:#f59e0b; }
/* Nút từ điển + popup tra từ trong màn luyện dịch */
.wr-vi-dict-btn {
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  height:28px; padding:0 12px; border-radius:999px;
  border:1.5px solid #bae6fd; background:#f0f9ff; color:#0369a1;
  font-size:.8rem; font-weight:800; cursor:pointer; white-space:nowrap; font-family:inherit; transition:all .13s;
}
.wr-vi-dict-btn:hover { background:#e0f2fe; border-color:#0891b2; }
.wr-vi-dict-pop {
  position:fixed; top:24px; left:18px; z-index:10350;
  width:340px; max-width:92vw; max-height:calc(100vh - 48px);
  background:#fff; border:1px solid #e2e8f0; border-radius:16px;
  box-shadow:0 14px 50px rgba(0,0,0,.26); display:flex; flex-direction:column; overflow:hidden;
}
.wr-vi-dict-hd { display:flex; align-items:center; padding:12px 14px; border-bottom:1px solid #eef2f6; font-weight:800; color:#0f172a; }
.wr-vi-dict-hd span { flex:1; }
.wr-vi-dict-x { border:none; background:none; font-size:1.05rem; cursor:pointer; color:#94a3b8; line-height:1; }
.wr-vi-dict-bar { display:flex; gap:7px; padding:10px 14px; }
.wr-vi-dict-bar input { flex:1; min-width:0; padding:8px 11px; border:1.5px solid #cbd5e1; border-radius:9px; font-size:.9rem; font-family:inherit; }
.wr-vi-dict-bar button { padding:8px 14px; border:none; border-radius:9px; background:#0891b2; color:#fff; font-weight:700; cursor:pointer; font-family:inherit; flex-shrink:0; }
.wr-vi-dict-res { overflow-y:auto; padding:0 14px 14px; flex:1; }
/* Box "Vocab by Level" — thiết kế 2 card (header mint + examples lavender) */
.wr-vl-info { margin-top:14px; font-family:'Nunito','Segoe UI',system-ui,sans-serif; }
.wr-vl-info * { font-family:'Nunito','Segoe UI',system-ui,sans-serif; }
.wr-vl-card { border-radius:18px; padding:14px 16px; margin-bottom:12px; }
/* Card header (mint) */
.wr-vl-head-card { background:linear-gradient(135deg,#f0fdf9 0%,#e7fbf1 100%); border:1.5px solid #a7f3d0; }
.wr-vl-head { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.wr-vl-head-ic {
  width:30px; height:30px; border-radius:9px; background:#fff; border:1.5px solid #d1fae5;
  display:inline-flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.wr-vl-head-ttl { font-size:1rem; font-weight:800; color:#0f172a; flex:1; }
.wr-vl-lvl { font-size:.74rem; font-weight:800; color:#fff; background:#0d9488; border-radius:999px; padding:4px 13px; flex-shrink:0; }
.wr-vl-row { display:flex; align-items:flex-start; gap:7px; font-size:.86rem; color:#1e293b; line-height:1.5; margin-bottom:9px; flex-wrap:wrap; }
.wr-vl-row:last-child { margin-bottom:0; }
.wr-vl-ic { flex-shrink:0; }
.wr-vl-k { font-weight:800; color:#059669; }
.wr-vl-v { color:#334155; }
.wr-vl-colloc-row { gap:6px; }
.wr-vl-chip {
  display:inline-block; font-size:.78rem; font-weight:700; color:#065f46;
  background:#d1fae5; border-radius:999px; padding:2px 10px; margin:2px 0;
}
.wr-vl-chip-ant { color:#b91c1c; background:#fee2e2; }
.wr-vl-chip-lk { cursor:pointer; transition:filter .12s, transform .08s; }
.wr-vl-chip-lk:hover { filter:brightness(.95); transform:translateY(-1px); }
/* Card examples (lavender) */
.wr-vl-ex-card { background:#fbfaff; border:1.5px solid #e9e5ff; padding:0; overflow:hidden; }
.wr-vl-ex-hd {
  display:flex; align-items:center; gap:8px; padding:11px 16px;
  background:#f3f0ff; color:#7c3aed; font-weight:800; font-size:.92rem;
}
.wr-vl-heart { margin-left:auto; font-size:.85rem; }
.wr-vl-ex-list { padding:6px 14px 10px; }
.wr-vl-ex-item { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px dashed #e9e5ff; }
.wr-vl-ex-item:last-child { border-bottom:none; }
.wr-vl-ex-num {
  width:24px; height:24px; border-radius:50%; flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:#ede9fe; color:#7c3aed; font-weight:800; font-size:.78rem;
}
.wr-vl-ex-body { flex:1; min-width:0; }
.wr-vl-ex-en { font-size:.86rem; color:#1e293b; line-height:1.5; }
.wr-vl-ex-vi { color:#94a3b8; font-style:italic; font-size:.81rem; line-height:1.45; margin-top:4px; }
@media (max-width:560px) { .wr-vi-dict-pop { left:8px; right:8px; width:auto; } }
.wr-vi-test-prog {
  height:5px; background:#e0f2fe; border-radius:4px; margin-bottom:14px; overflow:hidden;
}
.wr-vi-test-prog-fill {
  height:100%; background:linear-gradient(90deg,#0891b2,#06b6d4);
  border-radius:4px; transition:width .35s ease;
}
.wr-vi-test-btn-next {
  padding:10px 28px; border-radius:10px; border:none;
  background:#0891b2; color:#fff; font-size:.95rem; font-weight:700;
  cursor:pointer; margin-top:8px; font-family:inherit; transition:background .15s;
}
.wr-vi-test-btn-next:hover { background:#0e7490; }
.wr-vi-test-actions {
  display:flex; gap:10px; margin-top:8px; width:100%;
}
.wr-vi-confirm-wide {
  flex:2; padding:13px 0 !important; font-size:1rem !important;
}
.wr-vi-test-skip-btn {
  border-radius:10px; border:1.5px solid #cbd5e1;
  background:none; color:#64748b; font-size:.92rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .15s,color .15s,border-color .15s; white-space:nowrap;
}
.wr-vi-skip-wide { flex:1; padding:13px 0; }
.wr-vi-prev-wide { flex:1; padding:13px 0; }
.wr-vi-test-skip-btn:hover { background:#f8fafc; border-color:#94a3b8; color:#334155; }
/* Nút mic (speech-to-text) trong luyện dịch */
.wr-vi-mic-btn {
  flex:0 0 auto; padding:13px 16px; border-radius:10px; border:1.5px solid #cbd5e1;
  background:#fff; color:#475569; font-size:1.05rem; cursor:pointer; font-family:inherit;
  transition:background .15s, color .15s, border-color .15s;
}
.wr-vi-mic-btn:hover { background:#f1f5f9; border-color:#94a3b8; }
.wr-vi-mic-btn.recording {
  background:#fee2e2; border-color:#f87171; color:#dc2626;
  animation: tl-rec-pulse .7s infinite alternate;
}
/* Writing — paywall screen */
.wr-paywall {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; min-height:340px; text-align:center; padding:40px 24px;
}
.wr-paywall-icon { font-size:3rem; margin-bottom:14px; }
.wr-paywall-title { font-size:1.25rem; font-weight:800; color:#1e293b; margin-bottom:10px; }
.wr-paywall-desc { font-size:.9rem; color:#64748b; line-height:1.6; max-width:320px; margin-bottom:24px; }
.wr-paywall-btn {
  padding:11px 28px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
  font-size:.95rem; font-weight:700; font-family:inherit;
  box-shadow:0 4px 16px rgba(99,102,241,.35);
  transition:transform .15s,box-shadow .15s;
}
.wr-paywall-btn:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(99,102,241,.45); }
/* Dark mode button */
.wr-dark-btn {
  background:none; border:1.5px solid #c7d2fe; border-radius:8px;
  padding:4px 9px; font-size:1rem; cursor:pointer; line-height:1;
  transition:background .15s,border-color .15s; flex-shrink:0;
}
.wr-dark-btn:hover { background:#e0e7ff; border-color:#a5b4fc; }
.wr-dark-btn.active { background:#1e1b4b; border-color:#4f46e5; }

/* ── Writing Dark Mode ───────────────────────────────────────────── */
.wr-overlay.wr-dark { background:#111827; }
.wr-overlay.wr-dark .wr-page-header {
  background:rgba(17,24,39,.95); border-bottom-color:rgba(255,255,255,.1);
}
.wr-overlay.wr-dark .wr-page-title { color:#e2e8f0; }
.wr-overlay.wr-dark .wr-dark-btn { border-color:rgba(255,255,255,.2); color:#e2e8f0; }
.wr-overlay.wr-dark .wr-dark-btn:hover { background:rgba(255,255,255,.08); }
.wr-overlay.wr-dark .wr-dark-btn.active { background:#1e1b4b; border-color:#6366f1; }

/* Left panel */
.wr-overlay.wr-dark .wr-left { background:#1a1f2e; border-right-color:rgba(255,255,255,.08); }
.wr-overlay.wr-dark .wr-resizer { background:rgba(255,255,255,.08); }
.wr-overlay.wr-dark .wr-resizer:hover { background:#4f46e5; }
.wr-overlay.wr-dark .wr-left-head { color:#94a3b8; border-bottom-color:rgba(255,255,255,.07); }
.wr-overlay.wr-dark .wr-left-item { border-bottom-color:rgba(255,255,255,.06); }
.wr-overlay.wr-dark .wr-left-item:hover { background:rgba(99,102,241,.12); }
.wr-overlay.wr-dark .wr-left-item-active { background:rgba(99,102,241,.2); border-left-color:#818cf8; }
.wr-overlay.wr-dark .wr-left-item-title { color:#e2e8f0; }
.wr-overlay.wr-dark .wr-left-item-meta { color:#64748b; }
.wr-overlay.wr-dark .wr-left-empty { color:#475569; }
.wr-overlay.wr-dark .wr-badge-count { background:rgba(99,102,241,.25); color:#a5b4fc; }

/* Right panel & general */
.wr-overlay.wr-dark .wr-right { background:#111827; }
.wr-overlay.wr-dark .wr-right-empty { color:#475569; }
.wr-overlay.wr-dark .wr-right-title { color:#e2e8f0; }
.wr-overlay.wr-dark .wr-task-info-bar { background:#1a1f2e; color:#94a3b8; }
.wr-overlay.wr-dark .wr-back-link,
.wr-overlay.wr-dark .wr-back-btn { color:#818cf8; }

/* Buttons */
.wr-overlay.wr-dark .wr-btn { background:#1e2536; border-color:rgba(255,255,255,.12); color:#cbd5e1; }
.wr-overlay.wr-dark .wr-btn:hover { background:#273049; }
.wr-overlay.wr-dark .wr-btn-primary { background:#4f46e5; color:#fff; border-color:#4f46e5; }
.wr-overlay.wr-dark .wr-btn-primary:hover { background:#4338ca; }
.wr-overlay.wr-dark .wr-btn-icon { color:#94a3b8; }
.wr-overlay.wr-dark .wr-btn-icon:hover { background:rgba(255,255,255,.08); }

/* Task list */
.wr-overlay.wr-dark .wr-task-row { background:#1a1f2e; border-color:rgba(255,255,255,.1); }
.wr-overlay.wr-dark .wr-task-row:hover { border-color:#6366f1; }
.wr-overlay.wr-dark .wr-task-title { color:#e2e8f0; }
.wr-overlay.wr-dark .wr-task-meta { color:#64748b; }

/* Sample cards */
.wr-overlay.wr-dark .wr-sample-card { background:#1a1f2e; border-color:rgba(255,255,255,.1); box-shadow:none; }
.wr-overlay.wr-dark .wr-sample-title { color:#e2e8f0; }
.wr-overlay.wr-dark .wr-sample-body { background:#0f1623; color:#cbd5e1; }
.wr-overlay.wr-dark .wr-sample-essay { color:#d1d5db; }
.wr-overlay.wr-dark .wr-prompt-body { background:#0f1e3a; border-color:#2563eb; color:#bfdbfe; }
.wr-overlay.wr-dark .wr-task-header-box { background:#1e2a1e; border-left-color:#22c55e; color:#d1fae5; }
.wr-overlay.wr-dark .wr-essay-sum-label { color:#a5b4fc; }
.wr-overlay.wr-dark .wr-samples-sec-title { color:#818cf8; }
.wr-overlay.wr-dark .wr-samples-sec-head { border-bottom-color:rgba(129,140,248,.25); }
.wr-overlay.wr-dark .wr-samples-empty { color:#475569; }
.wr-overlay.wr-dark .wr-sample-band { background:rgba(21,128,61,.25); color:#4ade80; }

/* Essay toolbar buttons */
.wr-overlay.wr-dark .wr-font-size-btn { border-color:rgba(255,255,255,.15); color:#94a3b8; }
.wr-overlay.wr-dark .wr-font-size-btn:hover { background:rgba(255,255,255,.08); border-color:#6366f1; color:#a5b4fc; }
.wr-overlay.wr-dark .wr-vocab-btn { border-color:#818cf8; color:#818cf8; }
.wr-overlay.wr-dark .wr-vocab-btn:hover { background:#818cf8; color:#fff; }
.wr-overlay.wr-dark .wr-cefr-btn { opacity:.75; }
.wr-overlay.wr-dark .wr-cefr-btn-on { opacity:1; }

/* Colloc panel */
.wr-overlay.wr-dark .wr-colloc-panel {
  background:linear-gradient(160deg,#0f2318 0%,#132d1e 100%);
  border-color:#166534;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
}
.wr-overlay.wr-dark .wr-colloc-panel-head { border-bottom-color:rgba(74,222,128,.15); }
.wr-overlay.wr-dark .wr-colloc-panel-title { color:#4ade80; }
.wr-overlay.wr-dark .wr-colloc-toggleall-btn { border-color:rgba(74,222,128,.3); color:#4ade80; }
.wr-overlay.wr-dark .wr-colloc-toggleall-btn:hover { background:rgba(74,222,128,.1); border-color:#4ade80; }
.wr-overlay.wr-dark .wr-colloc-row { background:rgba(255,255,255,.04); }
.wr-overlay.wr-dark .wr-colloc-row:hover { background:rgba(74,222,128,.08); border-color:rgba(74,222,128,.3); }
.wr-overlay.wr-dark .wr-colloc-row-on { background:rgba(74,222,128,.12) !important; border-color:#22c55e !important; }
.wr-overlay.wr-dark .wr-colloc-phrase { color:#bbf7d0; }
.wr-overlay.wr-dark .wr-colloc-vi { color:#86efac; }
.wr-overlay.wr-dark .wr-colloc-panel-btn { background:rgba(22,163,74,.15); border-color:#166534; color:#4ade80; }
.wr-overlay.wr-dark .wr-colloc-panel-btn:hover { background:rgba(22,163,74,.25); border-color:#22c55e; }
.wr-overlay.wr-dark .wr-colloc-panel-btn-on { background:rgba(22,163,74,.3); border-color:#4ade80; }
.wr-overlay.wr-dark .wr-colloc-count { background:#166534; }

/* VI translation inline */
.wr-overlay.wr-dark .wr-vi-inline { background:#1c1a0d; border-left-color:#854d0e; color:#fde68a; }
.wr-overlay.wr-dark .wr-vi-panel-btn { border-color:#0e7490; color:#38bdf8; }
.wr-overlay.wr-dark .wr-vi-panel-btn:hover,
.wr-overlay.wr-dark .wr-vi-panel-btn.wr-colloc-panel-btn-on { background:#0e7490; color:#fff; }

/* Writing / submission */
.wr-overlay.wr-dark .wr-prompt-box { background:#1c1507; border-left-color:#d97706; }
.wr-overlay.wr-dark .wr-reqs-box { background:#0d1f0d; border-left-color:#16a34a; }
.wr-overlay.wr-dark .wr-prompt-label { color:#94a3b8; }
.wr-overlay.wr-dark .wr-prompt-text,
.wr-overlay.wr-dark .wr-reqs-text { color:#d1d5db; }
.wr-overlay.wr-dark .wr-write-ta {
  background:#1a1f2e; border-color:rgba(255,255,255,.12); color:#e2e8f0;
}
.wr-overlay.wr-dark .wr-write-ta:focus { border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.15); }
.wr-overlay.wr-dark .wr-inp,
.wr-overlay.wr-dark .wr-ta { background:#1a1f2e; border-color:rgba(255,255,255,.12); color:#e2e8f0; }
.wr-overlay.wr-dark .wr-inp:focus,
.wr-overlay.wr-dark .wr-ta:focus { border-color:#6366f1; }
.wr-overlay.wr-dark .wr-label { color:#94a3b8; }
.wr-overlay.wr-dark .wr-form-title { color:#e2e8f0; }
.wr-overlay.wr-dark .wr-saved-note { color:#475569; }

/* Grade / submission views */
.wr-overlay.wr-dark .wr-grade-content { background:#0f1623; border-color:rgba(255,255,255,.1); color:#cbd5e1; }
.wr-overlay.wr-dark .wr-submitted-content { background:#0f1623; border-color:rgba(255,255,255,.1); color:#cbd5e1; }
.wr-overlay.wr-dark .wr-grade-result { background:linear-gradient(135deg,#0d1f0d,#132d1e); border-color:#166534; }
.wr-overlay.wr-dark .wr-grade-result-score { color:#4ade80; }
.wr-overlay.wr-dark .wr-grade-result-fb { color:#d1d5db; }
.wr-overlay.wr-dark .wr-grade-name { color:#e2e8f0; }
.wr-overlay.wr-dark .wr-grade-meta { color:#64748b; }
.wr-overlay.wr-dark .wr-grade-form { border-top-color:rgba(255,255,255,.08); }
.wr-overlay.wr-dark .wr-subs-title { color:#64748b; }
.wr-overlay.wr-dark .wr-sub-row { background:#1a1f2e; border-color:rgba(255,255,255,.08); }
.wr-overlay.wr-dark .wr-sub-row:hover { background:#1e2536; border-color:#6366f1; }
.wr-overlay.wr-dark .wr-sub-name { color:#e2e8f0; }
.wr-overlay.wr-dark .wr-badge-graded { background:rgba(21,128,61,.25); color:#4ade80; }
.wr-overlay.wr-dark .wr-badge-pending { background:rgba(146,64,14,.25); color:#fbbf24; }
.wr-overlay.wr-dark .wr-wc { color:#818cf8; }
.wr-overlay.wr-dark .wr-wc-min { color:#475569; }
/* ── END Writing module ──────────────────────────────────────────── */

/* ══════════ Home hub cards — pastel redesign (icon circle + arrow) ══════════ */
.source-grid .source-card {
  position: relative;
  background: var(--scbg, #f1f5f9);
  border: 1.5px solid transparent;
  padding: 22px 18px;
  text-align: center;
}
.source-grid .source-card:hover {
  border-color: transparent;
  background: var(--scbg, #f1f5f9);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
  filter: brightness(.98);
}
.source-grid .source-card .source-card-icon {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--scico, #e2e8f0);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.3rem; line-height: 1; margin: 2px auto 12px;
}
.source-grid .source-card.selected {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--sc, #2563eb), 0 6px 18px rgba(15,23,42,.14);
}

/* Per-card accent (--sc), tint bg (--scbg), icon-circle bg (--scico) */
#srcPassageCard { --sc:#16a34a; --scbg:#ecfdf5; --scico:#bbf7d0; }
#srcYoutubeCard { --sc:#2563eb; --scbg:#eff6ff; --scico:#bfdbfe; }
#srcReadingCard { --sc:#d97706; --scbg:#fffbeb; --scico:#fde68a; }
#srcMindmapCard { --sc:#db2777; --scbg:#fdf2f8; --scico:#fbcfe8; }
#srcPdfCard     { --sc:#7c3aed; --scbg:#f5f3ff; --scico:#ddd6fe; border-color:transparent; }
.source-card-rw { --sc:#16a34a; --scbg:#ecfdf5; --scico:#bbf7d0; }
.source-card-vl { --sc:#2563eb; --scbg:#eff6ff; --scico:#bfdbfe; }
.source-card-pronun { --sc:#ea580c; --scbg:#fff7ed; --scico:#fed7aa; }
.source-card-vs { --sc:#ca8a04; --scbg:#fefce8; --scico:#fef08a; }
.source-card-wb { --sc:#db2777; --scbg:#fdf2f8; --scico:#fbcfe8; }
.source-card-rz { --sc:#7c3aed; --scbg:#f5f3ff; --scico:#ddd6fe; }
.source-card-sa { --sc:#0891b2; --scbg:#ecfeff; --scico:#a5f3fc; }
.source-card-trans { --sc:#db2777; --scbg:#fdf2f8; --scico:#fbcfe8; }
.source-card-pv { --sc:#d97706; --scbg:#fffbeb; --scico:#fde68a; }
.source-card-co { --sc:#0d9488; --scbg:#f0fdfa; --scico:#99f6e4; }
.source-card-im { --sc:#7c3aed; --scbg:#f5f3ff; --scico:#ddd6fe; }
.source-card-mcq { --sc:#0ea5e9; --scbg:#f0f9ff; --scico:#bae6fd; }
.source-card-sw { --sc:#ea580c; --scbg:#fff7ed; --scico:#fed7aa; }
.source-card-gr { --sc:#0d9488; --scbg:#f0fdfa; --scico:#99f6e4; }
.source-card-wr { --sc:#4f46e5; --scbg:#eef2ff; --scico:#c7d2fe; }
.source-card-rp { --sc:#7c3aed; --scbg:#f5f3ff; --scico:#ddd6fe; }
.source-card-tl { --sc:#f97316; --scbg:#fff7ed; --scico:#fed7aa; }
.source-card-cu { --sc:#0ea5e9; --scbg:#f0f9ff; --scico:#bae6fd; }
.source-card-yf { --sc:#dc2626; --scbg:#fef2f2; --scico:#fecaca; }
.source-card-ss { --sc:#4f46e5; --scbg:#eef2ff; --scico:#c7d2fe; }
.source-card-vc { --sc:#7c3aed; --scbg:#f5f3ff; --scico:#ddd6fe; }
.source-card-or { --sc:#0f766e; --scbg:#f0fdfa; --scico:#99f6e4; }
@media (max-width: 600px) {
  .source-grid .source-card .source-card-icon { width: 62px; height: 62px; font-size: 1.85rem; }
  .source-grid .source-card { padding: 16px 12px; }
}

/* ── Print / PDF (Reading + VC) ────────────────────────────────── */
#rdPrintArea { display: none; }
#vcPrintArea { display: none; }

/* Print button + dropdown */
.vc-print-wrap { position: relative; display: inline-block; }
.vc-print-btn {
  padding: 4px 11px; font-size: .78rem; font-weight: 700; border-radius: 8px;
  border: 1.5px solid #0369a1; background: #0369a1; color: #fff; cursor: pointer;
}
.vc-print-btn:hover { background: #0284c7; }
.vc-print-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 200;
  background: #fff; border: 1.5px solid #cbd5e1; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 180px; overflow: hidden;
}
.vc-print-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; font-size: .83rem; font-weight: 600;
  border: none; background: none; cursor: pointer; color: #1e293b;
}
.vc-print-menu button:hover { background: #f0f9ff; }

@media print {
  /* ── Reading print ── */
  body.rd-printing > *:not(#rdPrintRoot) { display: none !important; }
  body.rd-printing #rdPrintRoot {
    display: block !important; visibility: visible !important;
    position: static !important; padding: 24px 32px;
    font-family: Georgia, 'Times New Roman', serif;
    color: #000; background: #fff; max-width: 720px; margin: 0 auto;
  }
  body.rd-printing #rdPrintRoot * { display: block !important; visibility: visible !important; }
  body.rd-printing .rd-print-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
  body.rd-printing .rd-print-meta { font-size: .8rem; color: #555; margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
  body.rd-printing .rd-print-para { font-size: 1rem; line-height: 1.8; margin-bottom: .35em; text-align: justify; }
  body.rd-printing .rd-print-para-vi { font-size: .92rem; line-height: 1.7; margin-bottom: 1.1em; text-align: justify; color: #555; font-style: italic; }

  /* ── VC print ── */
  body.vc-printing { background: #fff !important; }
  body.vc-printing > *:not(#vcPrintRoot) { display: none !important; }
  body.vc-printing #vcPrintRoot {
    display: block !important; visibility: visible !important;
    position: static !important; padding: 20px 32px;
    font-family: Georgia, 'Times New Roman', serif;
    color: #000; background: #fff; max-width: 740px; margin: 0 auto;
  }
  body.vc-printing #vcPrintRoot *:not(table):not(thead):not(tbody):not(tr):not(th):not(td) { display: block !important; visibility: visible !important; }
  body.vc-printing #vcPrintRoot table { display: table !important; visibility: visible !important; }
  body.vc-printing #vcPrintRoot thead { display: table-header-group !important; visibility: visible !important; }
  body.vc-printing #vcPrintRoot tbody { display: table-row-group !important; visibility: visible !important; }
  body.vc-printing #vcPrintRoot tr { display: table-row !important; visibility: visible !important; }
  body.vc-printing #vcPrintRoot th, body.vc-printing #vcPrintRoot td { display: table-cell !important; visibility: visible !important; }
  body.vc-printing .vcp-title {
    font-size: 1.35rem; font-weight: 800; margin-bottom: 18px;
    padding-bottom: 8px; border-bottom: 2px solid #000;
  }
  body.vc-printing .vcp-q-block {
    margin-bottom: 20px; page-break-inside: avoid;
  }
  body.vc-printing .vcp-q-text {
    font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 3px;
  }
  body.vc-printing .vcp-q-num { margin-right: 4px; }
  body.vc-printing .vcp-q-trans {
    font-size: .88rem; color: #555; font-style: italic; margin-bottom: 6px;
  }
  body.vc-printing .vcp-admin-samples {
    margin: 6px 0 6px 16px; border-left: 3px solid #94a3b8; padding-left: 10px;
  }
  body.vc-printing .vcp-admin-sample { font-size: .9rem; line-height: 1.6; margin-bottom: 4px; color: #334155; }
  body.vc-printing .vcp-bullet { margin-right: 6px; color: #64748b; }
  body.vc-printing .vcp-user-samples {
    margin: 6px 0 6px 16px; border-left: 3px solid #0369a1; padding-left: 10px;
  }
  body.vc-printing .vcp-user-sample { font-size: .93rem; line-height: 1.65; margin-bottom: 4px; color: #0f172a; }
  body.vc-printing .vcp-my-bullet { margin-right: 6px; color: #0369a1; }
  body.vc-printing .vcp-blank-line {
    height: 28px; border-bottom: 1px dashed #ccc; margin: 8px 16px;
  }
  /* Vocabulary table */
  body.vc-printing .vcp-vocab-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
  body.vc-printing .vcp-vocab-table th, body.vc-printing .vcp-vocab-table td {
    display: table-cell !important; border: 1px solid #d1d5db;
    padding: 5px 7px; font-size: .82rem; vertical-align: top; text-align: left;
  }
  body.vc-printing .vcp-vocab-table thead tr { display: table-row !important; }
  body.vc-printing .vcp-vocab-table tbody tr { display: table-row !important; page-break-inside: avoid; }
  body.vc-printing .vcp-vocab-table th { background: #f1f5f9; font-weight: 700; font-size: .78rem; }
  body.vc-printing .vcp-n { width: 24px; text-align: center; color: #64748b; }
  body.vc-printing .vcp-word-cell { width: 130px; }
  body.vc-printing .vcp-def { width: 160px; color: #374151; }
  body.vc-printing .vcp-ex { font-style: italic; color: #1e293b; }
  body.vc-printing .vcp-ipa { font-size: .75rem; color: #64748b; }
  body.vc-printing .vcp-ipa-label { font-size: .65rem; font-weight: 700; color: #94a3b8; }
  body.vc-printing .vcp-pos { font-style: italic; color: #6b7280; font-size: .8rem; }
  body.vc-printing .vcp-dash { color: #d1d5db; }
  /* Collocations */
  body.vc-printing .vcp-colloc-group {
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #64748b; margin: 16px 0 6px; border-bottom: 1px solid #e5e7eb; padding-bottom: 3px;
  }
  body.vc-printing .vcp-colloc-item { margin-bottom: 10px; page-break-inside: avoid; padding-left: 8px; }
  body.vc-printing .vcp-colloc-phrase { font-size: .95rem; margin-bottom: 2px; }
  body.vc-printing .vcp-colloc-vi { font-style: italic; color: #64748b; font-weight: 400; }
  body.vc-printing .vcp-colloc-ex { font-size: .82rem; color: #374151; margin-left: 12px; line-height: 1.5; }

  /* ── Reading section — rdPrintPdf() ── */
  body.rd-printing { background: #fff !important; }
}
/* ── END Print / PDF ─────────────────────────────────────────── */

/* ── VL Test: Plus Jakarta Sans + dark mode ── */
.vl-dark-btn {
  height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1.5px solid #e2e8f0; background: rgba(255,255,255,.7);
  color: #334155; font-size: .85rem; cursor: pointer; flex-shrink: 0;
  transition: all .13s;
}
.vl-credits-chip {
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid #fcd34d; background: #fffbeb;
  color: #92400e; font-size: .82rem; font-weight: 800;
  cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: all .13s;
  display: inline-flex; align-items: center; gap: 4px;
}
.vl-credits-chip:hover { background: #fef3c7; border-color: #f59e0b; }
.vl-overlay.vl-dark .vl-credits-chip { background: rgba(120,53,15,.35); border-color: #b45309; color: #fde68a; }
.vl-credits-buy {
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: none; background: #f59e0b; color: #fff;
  font-size: .82rem; font-weight: 800; cursor: pointer; flex-shrink: 0;
  white-space: nowrap; transition: all .13s; display: inline-flex; align-items: center; gap: 4px;
}
.vl-credits-buy:hover { background: #d97706; }
.vl-dark-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.vl-test-scene { font-family: 'Plus Jakarta Sans', sans-serif; }
.vl-q-word-big { font-family: 'Plus Jakarta Sans', sans-serif; }
.vl-q-type-label { font-family: 'Plus Jakarta Sans', sans-serif; }
.vl-q-clue { font-family: 'Plus Jakarta Sans', sans-serif; }
.vl-mc-item { font-family: 'Plus Jakarta Sans', sans-serif; }
.vl-mc-text { font-family: 'Plus Jakarta Sans', sans-serif; }
.vl-fill-inp2 { font-family: 'Plus Jakarta Sans', sans-serif; }
.vl-fill-check-btn { font-family: 'Plus Jakarta Sans', sans-serif; }
.vl-next-btn { font-family: 'Plus Jakarta Sans', sans-serif; }
@media (min-width: 768px) {
  .vl-q-word-big { font-size: 2.8rem; }
  .vl-q-clue { font-size: 1.12rem; }
  .vl-mc-text { font-size: .97rem; }
  .vl-q-type-label { font-size: .78rem; }
  .vl-fill-inp2 { font-size: 1.05rem; height: 52px; }
}
/* Dark mode */
.vl-overlay.vl-dark { background: #0f172a !important; }
.vl-overlay.vl-dark .vl-header { background: rgba(15,23,42,.9); border-bottom-color: #1e293b; }
.vl-overlay.vl-dark .vl-title { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-back-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-back-btn:hover { background: #334155; border-color: #475569; }
.vl-overlay.vl-dark .vl-dark-btn { background: rgba(30,41,59,.8); border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-body { background: #0f172a; }
/* Levels screen dark */
.vl-overlay.vl-dark .vl-level-card { filter: brightness(.95) saturate(1); }
.vl-overlay.vl-dark .vl-level-card:hover { filter: brightness(1.05) saturate(1.05); }
/* Search dark */
.vl-overlay.vl-dark .vl-search-inp { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-search-inp::placeholder { color: #64748b; }
.vl-overlay.vl-dark .vl-search-inp:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.15); }
.vl-overlay.vl-dark .vl-search-results { background: transparent; }
.vl-overlay.vl-dark .vl-search-item { background: #1e293b !important; border-color: #334155 !important; }
.vl-overlay.vl-dark .vl-sr-word { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-sr-word mark { background: #854d0e; color: #fef08a; }
.vl-overlay.vl-dark .vl-sr-vi { color: #94a3b8; }
.vl-overlay.vl-dark .vl-sr-pos { color: #64748b; }
.vl-overlay.vl-dark .vl-search-empty { color: #475569; }
/* Random Word card dark */
.vl-overlay.vl-dark .vl-rand-card { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-rand-card-word { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-rand-card-pos { color: #64748b; }
.vl-overlay.vl-dark .vl-rand-card-hint { color: #475569; }
.vl-overlay.vl-dark .vl-rand-lv-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-rand-empty-msg { color: #475569; }
.vl-overlay.vl-dark .vl-q-card { background: #1e293b; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.vl-overlay.vl-dark .vl-q-word-big { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-ipa-uk { color: #c4b5fd; }
.vl-overlay.vl-dark .vl-ipa-us { color: #67e8f9; }
.vl-overlay.vl-dark .vl-q-type-label { color: #64748b; }
.vl-overlay.vl-dark .vl-q-clue { background: #0f172a; border-color: #334155; color: #cbd5e1; }
.vl-overlay.vl-dark .vl-q-colloc-hints { background: #0f172a; border-color: #334155; }
.vl-overlay.vl-dark .vl-q-colloc-ph { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-q-pos-hint { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-mc-item { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-mc-item:hover:not(:disabled) { background: #1e1b4b; border-color: #6366f1; }
.vl-overlay.vl-dark .vl-mc-letter { background: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-mc-text { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-mc-correct { border-color: #16a34a !important; background: #14532d !important; }
.vl-overlay.vl-dark .vl-mc-wrong { border-color: #dc2626 !important; background: #450a0a !important; }
/* Quiz redesign dark */
.vl-overlay.vl-dark .vl-quiz-flag { background: #1e293b; border-color: #334155; color: #cbd5e1; }
.vl-overlay.vl-dark .vl-quiz-arrow,
.vl-overlay.vl-dark .vl-quiz-dir-label,
.vl-overlay.vl-dark .vl-quiz-count { color: #64748b; }
.vl-overlay.vl-dark .vl-qdot { background: #334155; }
.vl-overlay.vl-dark .vl-qdot--done { background: #34d399; }
.vl-overlay.vl-dark .vl-qdot--cur { background: #818cf8; }
.vl-overlay.vl-dark .vl-quiz-prompt--vi { background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%); }
.vl-overlay.vl-dark .vl-quiz-prompt--en { background: linear-gradient(135deg, #0c4a6e 0%, #0f3460 100%); }
.vl-overlay.vl-dark .vl-quiz-prompt--vi .vl-quiz-prompt-label { color: #c4b5fd; }
.vl-overlay.vl-dark .vl-quiz-prompt--en .vl-quiz-prompt-label { color: #7dd3fc; }
.vl-overlay.vl-dark .vl-quiz-prompt-word,
.vl-overlay.vl-dark .vl-quiz-prompt-word--vi { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-quiz-speak { background: #1e293b; color: #e2e8f0; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.vl-overlay.vl-dark .vl-quiz-def { color: #94a3b8; }
.vl-overlay.vl-dark .vl-ipa-chip--uk { background: #2e1065; border-color: #6d28d9; }
.vl-overlay.vl-dark .vl-ipa-chip--us { background: #083344; border-color: #0e7490; }
.vl-overlay.vl-dark .vl-ipa-chip-ph { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-ipa-chip-spk { color: #94a3b8; }
.vl-overlay.vl-dark .vl-fill-inp2 { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-fill-inp2:focus { border-color: #0891b2; background: #0f172a; }
.vl-overlay.vl-dark .vl-tpbar { background: #1e293b; }
.vl-overlay.vl-dark .vl-review-prev-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-review-prev-btn:hover { background: #334155; border-color: #475569; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-q-vi-clue { background: #1e1b4b; border-color: #6366f1; color: #c7d2fe; }
.vl-overlay.vl-dark .vl-wb-sents { background: transparent; }
.vl-overlay.vl-dark .vl-wb-sent-row { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-wb-slot { border-color: #475569; color: #64748b; }
.vl-overlay.vl-dark .vl-wb-slot-ready { border-color: #818cf8; background: rgba(99,102,241,.15); color: #a5b4fc; }
.vl-overlay.vl-dark .vl-wb-slot-miss { border-color: #f87171; color: #f87171; }
.vl-overlay.vl-dark .vl-wb-ans-ok { color: #4ade80; }
.vl-overlay.vl-dark .vl-wb-icon-ok { color: #4ade80; }
.vl-overlay.vl-dark .vl-wb-bank-label { color: #475569; }
.vl-overlay.vl-dark .vl-wb-chip { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-wb-chip:hover { border-color: #818cf8; background: rgba(99,102,241,.15); }
.vl-overlay.vl-dark .vl-wb-chip-sel { border-color: #818cf8 !important; background: rgba(99,102,241,.2) !important; box-shadow: 0 0 0 3px rgba(129,140,248,.3); }
.vl-overlay.vl-dark .vl-match-word-en { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-match-chip { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-match-chip:hover { border-color: #818cf8; background: rgba(99,102,241,.15); }
.vl-overlay.vl-dark .vl-match-chip-sel { border-color: #818cf8 !important; background: rgba(99,102,241,.2) !important; box-shadow: 0 0 0 3px rgba(129,140,248,.3); }
.vl-overlay.vl-dark .vl-match-slot { border-color: #334155; }
.vl-overlay.vl-dark .vl-match-slot:hover { border-color: #475569; }
.vl-overlay.vl-dark .vl-match-slot-ready { border-color: #818cf8; background: rgba(99,102,241,.1); }
.vl-overlay.vl-dark .vl-match-slot-ph { color: #475569; }
.vl-overlay.vl-dark .vl-match-slot-ok { background: rgba(22,163,74,.15) !important; }
.vl-overlay.vl-dark .vl-match-slot-ng { background: rgba(220,38,38,.15) !important; }
.vl-overlay.vl-dark .vl-match-ans-ok { color: #4ade80; }
.vl-overlay.vl-dark .vl-match-icon-ok { color: #4ade80; }
.vl-overlay.vl-dark .vl-match-pool { background: #0f172a; border-color: #1e293b; }
.vl-overlay.vl-dark .vl-review-card { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-review-ok { background: #052e16; border-color: #166534; }
.vl-overlay.vl-dark .vl-review-ng { background: #2d0a0a; border-color: #991b1b; }
.vl-overlay.vl-dark .vl-review-ok .vl-review-verdict { color: #4ade80; }
.vl-overlay.vl-dark .vl-review-ng .vl-review-verdict { color: #f87171; }
.vl-overlay.vl-dark .vl-review-word { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-review-vi { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-review-def { color: #94a3b8; }
.vl-overlay.vl-dark .vl-review-pos { color: #7dd3fc; background: #0c2340; border-color: #1e4976; }
.vl-overlay.vl-dark .vl-review-form-note { color: #94a3b8; }
.vl-overlay.vl-dark .vl-review-colloc { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-review-syn-note { background: #052e16; color: #4ade80; }
.vl-overlay.vl-dark .vl-review-ant-note { background: #431407; color: #fb923c; }
.vl-overlay.vl-dark .vl-review-next-hint { color: #64748b; }
.vl-overlay.vl-dark .vl-review-next-hint kbd { background: #334155; border-color: #475569; color: #cbd5e1; }
.vl-overlay.vl-dark .vl-review-speak { background: #1e293b; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-review-speak:hover { background: #334155; }
.vl-overlay.vl-dark .vl-review-exs { border-top-color: rgba(255,255,255,.08); }
.vl-overlay.vl-dark .vl-review-ex-row { background: rgba(255,255,255,.05); }
.vl-overlay.vl-dark .vl-review-exs .vl-ex-text { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-review-exs .vl-ex-vi { color: #94a3b8; }
.vl-overlay.vl-dark .vl-review-exs .vl-ex-sp-btn { background: rgba(56,189,248,.12); color: #38bdf8; }

/* ── VL vi_sent_trans ──────────────────── */
.vl-vst-vi-clue {
  font-size: 1.05rem; font-weight: 600; color: #1e293b; line-height: 1.6;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-left: 4px solid #0284c7; border-radius: 10px;
  padding: 12px 16px; width: 100%; box-sizing: border-box;
  text-align: center;
}
.vl-vst-area { align-items: flex-end; width: 100%; }
.vl-vst-mic-btn {
  flex-shrink: 0; border: 2px solid #d1d5db; background: #f9fafb;
  border-radius: 10px; padding: 0 13px; font-size: 1.15rem;
  cursor: pointer; line-height: 1; align-self: stretch;
  transition: border-color .15s, background .15s;
}
.vl-vst-mic-btn:hover { border-color: #9ca3af; background: #e5e7eb; }
.vl-vst-mic-btn.vl-vst-mic-on { border-color: #ef4444; background: #fee2e2; animation: vl-mic-pulse 1s ease-in-out infinite; }
@keyframes vl-mic-pulse { 0%,100%{opacity:1;} 50%{opacity:.45;} }
.vl-overlay.vl-dark .vl-vst-mic-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-vst-mic-btn.vl-vst-mic-on { background: #450a0a; border-color: #ef4444; }
.vl-vst-inp {
  width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
  min-height: 44px; line-height: 1.5; padding: 10px 12px; font-size: .95rem;
  font-family: inherit; border-radius: 8px; border: 1.5px solid #cbd5e1;
  background: #fff; transition: border-color .15s; flex: 1;
}
.vl-vst-inp:focus { outline: none; border-color: #6366f1; }
.vl-vst-hint-row { display: flex; flex-direction: column; gap: 0; width: 100%; }
.vl-vst-hint-ctrl { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.vl-vst-auto-hint-btn {
  background: #f1f5f9; border: 1px solid #cbd5e1;
  border-radius: 999px; padding: 4px 12px; font-size: .78rem; cursor: pointer;
  color: #64748b; font-weight: 600; transition: background .15s;
}
.vl-vst-auto-hint-btn:hover { background: #e2e8f0; }
.vl-vst-auto-hint-btn.vl-vst-auto-hint-on { background: #fef9c3; border-color: #fbbf24; color: #92400e; }
.vl-vst-auto-hint-btn.vl-vst-auto-hint-on:hover { background: #fef08a; }
.vl-vst-hint-btn {
  align-self: flex-start; background: #f1f5f9; border: 1px solid #cbd5e1;
  border-radius: 999px; padding: 5px 14px; font-size: .82rem; cursor: pointer;
  color: #475569; font-weight: 600; margin-bottom: 4px;
}
.vl-vst-hint-btn:hover { background: #e2e8f0; }
.vl-vst-hint-btn.vl-vst-hint-btn-open { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.vl-vst-hint-btn.vl-vst-hint-btn-open:hover { background: #dbeafe; }
.vl-overlay.vl-dark .vl-vst-hint-btn.vl-vst-hint-btn-open { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }
.vl-vst-hint-body {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 8px 14px; font-size: .9rem; color: #1e293b; margin-bottom: 6px;
}
.vl-vst-tense-body {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-color: #c4b5fd; padding: 10px 16px;
}
.vl-vst-tense-name { font-size: .97rem; font-weight: 800; color: #6d28d9; }
.vl-vst-tense-formula {
  font-size: .82rem; font-family: 'Courier New', monospace; font-weight: 600;
  color: #5b21b6; background: rgba(109,40,217,.1); padding: 3px 12px;
  border-radius: 999px; border: 1px dashed #a78bfa;
}
.vl-vst-ipa-inline { font-size: .85rem; color: #64748b; }
.vl-ipa-flag { font-size: .7rem; background: #e2e8f0; border-radius: 3px; padding: 1px 4px; font-weight: 700; margin-right: 2px; }
/* Review block */
.vl-vst-review-block {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px;
}
.vl-vst-typed-label, .vl-vst-correct-label {
  font-size: .78rem; font-weight: 700; color: #64748b; text-transform: uppercase;
  letter-spacing: .05em; display: flex; align-items: center; gap: 6px;
}
.vl-vst-typed-diff { font-size: .95rem; line-height: 1.55; padding: 2px 0 6px; border-bottom: 1px solid #e2e8f0; }
.vl-vst-correct-sent { font-size: .97rem; line-height: 1.55; color: #15803d; font-weight: 500; }
.vl-overlay.vl-dark .vl-vst-vi-clue { background: linear-gradient(135deg, #0c4a6e, #0369a1); border-color: #0ea5e9; color: #e0f2fe; }
.vl-overlay.vl-dark .vl-vst-auto-hint-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-vst-auto-hint-btn.vl-vst-auto-hint-on { background: #451a03; border-color: #d97706; color: #fde68a; }
.vl-overlay.vl-dark .vl-vst-hint-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-vst-hint-body { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-vst-tense-body { background: linear-gradient(135deg, #1e1b4b, #2e1065); border-color: #7c3aed; }
.vl-overlay.vl-dark .vl-vst-tense-name { color: #c4b5fd; }
.vl-overlay.vl-dark .vl-vst-tense-formula { color: #ddd6fe; background: rgba(167,139,250,.12); }

/* Rearrange test */
.vl-ra-hint-btn { display:inline-block; margin:6px 0 4px; padding:5px 14px; border:1px dashed #f59e0b; border-radius:999px; background:#fffbeb; color:#92400e; font-size:.8rem; font-weight:600; cursor:pointer; font-family:inherit; }
.vl-ra-hint-btn:hover { background:#fef3c7; }
.vl-ra-vi-hint { margin:6px 0 8px; padding:8px 12px; background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #f59e0b; border-radius:10px; color:#78350f; font-size:.9rem; font-weight:600; line-height:1.5; }
.vl-ra-answer-label, .vl-ra-pool-label { font-size:.75rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em; margin:10px 0 4px; }
.vl-ra-answer-area { min-height:52px; border:2px dashed #cbd5e1; border-radius:12px; padding:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:#f8fafc; margin-bottom:2px; }
.vl-ra-pool { display:flex; flex-wrap:wrap; gap:6px; padding:8px 0; }
.vl-ra-chip { display:inline-block; padding:6px 12px; border:1.5px solid #7c3aed; border-radius:8px; background:#f5f3ff; color:#4c1d95; font-size:.92rem; font-weight:600; cursor:pointer; font-family:inherit; transition:background .12s,transform .1s; user-select:none; }
.vl-ra-chip:hover { background:#ede9fe; transform:translateY(-1px); }
.vl-ra-chip-ans { background:#7c3aed; color:#fff; border-color:#6d28d9; }
.vl-ra-chip-ans:hover { background:#6d28d9; }
.vl-ra-chip.vl-ra-ok { background:#16a34a; border-color:#15803d; color:#fff; }
.vl-ra-chip.vl-ra-err { background:#dc2626; border-color:#b91c1c; color:#fff; }
.vl-ra-placeholder { color:#94a3b8; font-size:.85rem; font-style:italic; padding:4px; }
.vl-ra-btns { display:flex; gap:8px; margin-top:10px; align-items:center; }
.vl-ra-prev-btn { padding:7px 16px; border:1.5px solid #94a3b8; border-radius:8px; background:#f1f5f9; color:#475569; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit; }
.vl-ra-prev-btn:hover { background:#e2e8f0; }
.vl-ra-reset-btn { padding:7px 16px; border:1.5px solid #94a3b8; border-radius:8px; background:#f1f5f9; color:#475569; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit; }
.vl-ra-reset-btn:hover { background:#e2e8f0; }
.vl-test-fb { margin-top:12px; padding:10px 14px; border-radius:9px; font-size:.9rem; font-weight:600; }
.vl-fb-ok { background:#f0fdf4; color:#16a34a; border:1.5px solid #86efac; }
.vl-fb-err { background:#fff1f2; color:#dc2626; border:1.5px solid #fca5a5; }
.vl-ra-fb-label { font-size:.78rem; font-weight:700; color:inherit; margin-top:8px; opacity:.8; }
.vl-ra-fb-sent { font-size:.92rem; font-weight:600; margin-top:4px; padding:6px 10px; background:rgba(0,0,0,.06); border-radius:6px; }
.vl-overlay.vl-dark .vl-fb-ok { background:#052e16; color:#4ade80; border-color:#166534; }
.vl-overlay.vl-dark .vl-fb-err { background:#2d0a0a; color:#f87171; border-color:#991b1b; }
.vl-overlay.vl-dark .vl-ra-hint-btn { background:#1c1917; border-color:#b45309; color:#fde68a; }
.vl-overlay.vl-dark .vl-ra-vi-hint { background:linear-gradient(135deg,#1c1917,#292524); border-color:#b45309; color:#fde68a; }
.vl-overlay.vl-dark .vl-ra-answer-area { background:#1e293b; border-color:#334155; }
.vl-overlay.vl-dark .vl-ra-chip { background:#2e1065; border-color:#7c3aed; color:#ddd6fe; }
.vl-overlay.vl-dark .vl-ra-chip:hover { background:#3b0764; }
.vl-overlay.vl-dark .vl-ra-chip-ans { background:#7c3aed; color:#fff; }
.vl-overlay.vl-dark .vl-ra-prev-btn { background:#1e293b; border-color:#334155; color:#94a3b8; }
.vl-overlay.vl-dark .vl-ra-reset-btn { background:#1e293b; border-color:#334155; color:#94a3b8; }
.vl-overlay.vl-dark .vl-vst-review-block { background: #0f172a; border-color: #334155; }
.vl-overlay.vl-dark .vl-vst-correct-sent { color: #fde68a; font-weight: 700; }
.vl-overlay.vl-dark .vl-vst-typed-label,
.vl-overlay.vl-dark .vl-vst-correct-label { color: #94a3b8; }
.vl-overlay.vl-dark .vl-vst-typed-diff { color: #cbd5e1; border-color: #334155; }
.vl-overlay.vl-dark .vl-vst-inp { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-vst-inp:focus { border-color: #6366f1; }
.vl-overlay.vl-dark .co-vt-vocab-hint { color: #e2e8f0; }
.vl-overlay.vl-dark .co-vt-vocab-ipa { color: #67e8f9; }
.vl-overlay.vl-dark .co-vt-vocab-pos { color: #94a3b8; }

/* ── Syn/Ant quiz dark mode ─────────────────────────────────────────────── */
.vl-overlay.vl-dark .vl-sa-q-card { background: #1e293b; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.vl-overlay.vl-dark .vl-sa-q-prompt { color: #64748b; }
.vl-overlay.vl-dark .vl-sa-q-word { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-sa-q-pos { color: #475569; }
.vl-overlay.vl-dark .vl-sa-q-vi { color: #94a3b8; }
.vl-overlay.vl-dark .vl-sa-mc-btn { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-sa-mc-btn:hover:not(:disabled) { background: #1e293b; border-color: #0891b2; }
.vl-overlay.vl-dark .vl-sa-mc-btn.vl-sa-mc-ok { background: #052e16 !important; border-color: #16a34a !important; color: #4ade80; }
.vl-overlay.vl-dark .vl-sa-mc-btn.vl-sa-mc-ng { background: #450a0a !important; border-color: #dc2626 !important; color: #f87171; }
.vl-overlay.vl-dark .vl-sa-sort-hint { color: #475569; }
.vl-overlay.vl-dark .vl-sa-sort-chip { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-sa-sort-none { background: #1e293b; color: #94a3b8; border-color: #334155; }
.vl-overlay.vl-dark .vl-sa-sort-syn  { background: #052e16; color: #4ade80; border-color: #166534; }
.vl-overlay.vl-dark .vl-sa-sort-ant  { background: #450a0a; color: #f87171; border-color: #991b1b; }
.vl-overlay.vl-dark .vl-sa-sort-bucket { border-color: #334155; background: transparent; }
.vl-overlay.vl-dark .vl-sa-bucket-syn { background: #052e16; border-color: #166534; }
.vl-overlay.vl-dark .vl-sa-bucket-ant { background: #450a0a; border-color: #991b1b; }
.vl-overlay.vl-dark .vl-sa-bucket-label { color: #475569; }
.vl-overlay.vl-dark .vl-sa-bucket-chip { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-sa-fb-ok { color: #4ade80; }
.vl-overlay.vl-dark .vl-sa-fb-ng { color: #f87171; }
.vl-overlay.vl-dark .vl-sa-fb-vi { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-sa-fb-syn { background: #042f2e; border-color: #0e7490; color: #67e8f9; }
.vl-overlay.vl-dark .vl-sa-fb-ant { background: #2d0a0a; border-color: #be123c; color: #fda4af; }
.vl-overlay.vl-dark .vl-sa-fb-word { background: rgba(255,255,255,.06); }
.vl-overlay.vl-dark .vl-sa-fb > .vl-sa-fb-word { color: #fde047; background: rgba(253,224,71,.08); border: 1px solid rgba(253,224,71,.25); border-radius: 7px; padding: 2px 9px; }
.vl-overlay.vl-dark .vl-sa-fb-pos { color: #fde047; }
.vl-overlay.vl-dark .vl-sa-fb-vi-word { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-sa-sort-row-lbl.syn { background: #042f2e; color: #67e8f9; border-color: #0e7490; }
.vl-overlay.vl-dark .vl-sa-sort-row-lbl.ant { background: #2d0a0a; color: #fda4af; border-color: #be123c; }
.vl-overlay.vl-dark .vl-sa-sort-res.ok.syn { background: #042f2e; color: #67e8f9; border-color: #0e7490; }
.vl-overlay.vl-dark .vl-sa-sort-res.ok.ant { background: #2d0a0a; color: #fda4af; border-color: #be123c; }
.vl-overlay.vl-dark .vl-sa-sort-res.ng { background: #450a0a; color: #f87171; border-color: #991b1b; }

/* ── Dark: Names/Streets Search ── */
.vl-overlay.vl-dark .vl-nsearch-inp { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-nsearch-inp::placeholder { color: #475569; }
.vl-overlay.vl-dark .vl-nsearch-inp:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.vl-overlay.vl-dark .vl-nsearch-meta { color: #475569; }
.vl-overlay.vl-dark .vl-nsearch-card { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-nsearch-card-name { color: #f1f5f9; }
.vl-overlay.vl-dark .vl-nsearch-card-ipa  { color: #a5b4fc; }
.vl-overlay.vl-dark .vl-nsearch-card-desc { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-nsearch-card-ex   { color: #64748b; }
.vl-overlay.vl-dark .vl-nsearch-empty     { color: #475569; }

/* ── Dark: Luyện dịch Setup Screen ── */
.vl-overlay.vl-dark .vl-trans-hdr-title { color: #f9a8d4; }
.vl-overlay.vl-dark .vl-trans-card { background: #1e293b; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
.vl-overlay.vl-dark .vl-trans-card-hdr { border-bottom-color: #334155; color: #cbd5e1; }
.vl-overlay.vl-dark .vl-trans-field label { color: #94a3b8; }
.vl-overlay.vl-dark .vl-trans-select { background-color: #0f172a; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-trans-select:focus { border-color: #ec4899; background-color: #1e293b; }
.vl-overlay.vl-dark .vl-trans-chip { background: #0f172a; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-trans-chip:hover { border-color: #f9a8d4; background: #1e293b; color: #f9a8d4; }
.vl-overlay.vl-dark .vl-trans-chip-on { border-color: #ec4899 !important; background: #1e0a14 !important; color: #f9a8d4 !important; }
.vl-overlay.vl-dark .vl-trans-method-btn { background: #0f172a; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-trans-method-btn:hover { border-color: #f9a8d4; background: #1e0a14; }
.vl-overlay.vl-dark .vl-trans-method-btn.vl-trans-method-on { border-color: #ec4899 !important; background: #1e0a14 !important; color: #f9a8d4 !important; }
.vl-overlay.vl-dark .vl-trans-sublabel { color: #cbd5e1; }
.vl-overlay.vl-dark .vl-trans-topic-inp,
.vl-overlay.vl-dark .vl-trans-textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-trans-topic-inp:focus,
.vl-overlay.vl-dark .vl-trans-textarea:focus { border-color: #ec4899; background: #1e293b; }
.vl-overlay.vl-dark .vl-trans-hint { background: #1c1400; border-color: #713f12; color: #fde68a; }

/* ── Dark: My Lists ── */
.vl-overlay.vl-dark .vl-ml-topbar { border-bottom-color: #334155; }
.vl-overlay.vl-dark .vl-ml-total  { color: #94a3b8; }
.vl-overlay.vl-dark .vl-ml-create-btn { background: linear-gradient(135deg,#4f46e5,#6366f1); }
.vl-overlay.vl-dark .vl-ml-create-form { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-ml-create-inp { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-ml-create-inp:focus { border-color: #6366f1; }
.vl-overlay.vl-dark .vl-ml-create-ok { background: #6366f1; }
.vl-overlay.vl-dark .vl-ml-create-cancel { background: #334155; color: #cbd5e1; }
.vl-overlay.vl-dark .vl-ml-card { background: #1e293b !important; border-color: #334155 !important; }
.vl-overlay.vl-dark .vl-ml-card:hover { border-color: #6366f1 !important; }
.vl-overlay.vl-dark .vl-ml-card-name { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-ml-card-count { color: #64748b; }
.vl-overlay.vl-dark .vl-ml-del-btn { color: #ef4444; background: rgba(239,68,68,.12); }
.vl-overlay.vl-dark .vl-ml-del-btn:hover { background: rgba(239,68,68,.25); }
.vl-overlay.vl-dark .vl-ml-empty { color: #475569; }
.vl-overlay.vl-dark .vl-ml-detail-topbar { border-bottom-color: #334155; }
.vl-overlay.vl-dark .vl-ml-word-count { color: #64748b; }
.vl-overlay.vl-dark .vl-ml-words-section { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-ml-words-empty { color: #475569; }
.vl-overlay.vl-dark .vl-ml-word-chip { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.vl-overlay.vl-dark .vl-ml-word-lv { background: #0f172a; color: #818cf8; }
.vl-overlay.vl-dark .vl-ml-chip-del { color: #94a3b8; }
.vl-overlay.vl-dark .vl-ml-chip-del:hover { background: rgba(239,68,68,.2); color: #ef4444; }
.vl-overlay.vl-dark .vl-ml-search-label { color: #94a3b8; }
.vl-overlay.vl-dark .vl-ml-search-inp { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-ml-search-inp:focus { border-color: #6366f1; background: #1e293b; }
.vl-overlay.vl-dark .vl-ml-bulk-btn { background: #1e293b; border-color: #334155; color: #a5b4fc; }
.vl-overlay.vl-dark .vl-ml-bulk-btn:hover { background: #273449; }
.vl-overlay.vl-dark .vl-ml-bulk-form { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-ml-bulk-inp { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.vl-overlay.vl-dark .vl-ml-bulk-inp:focus { border-color: #6366f1; }
.vl-overlay.vl-dark .vl-ml-search-item { background: #1e293b; border-color: #334155; }
.vl-overlay.vl-dark .vl-ml-search-item:hover { border-color: #6366f1; }
.vl-overlay.vl-dark .vl-ml-si-word { color: #e2e8f0; }
.vl-overlay.vl-dark .vl-ml-si-added { color: #4ade80; }
.vl-overlay.vl-dark .vl-ml-not-found { background: #1e293b; border-color: #334155; color: #94a3b8; }
.vl-overlay.vl-dark .vl-ml-loading { color: #64748b; }

/* ── CO Match test ──────────────────────── */
.co-match-pool {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 44px; padding: 10px 12px;
  background: #f0f9ff; border: 2px dashed #bae6fd;
  border-radius: 12px; margin-bottom: 16px; width: 100%; box-sizing: border-box;
}
.co-match-pool-done { font-size: .85rem; color: #0891b2; font-style: italic; align-self: center; }
.co-match-chip {
  display: inline-flex; align-items: center; padding: 6px 13px;
  background: #fff; border: 1.5px solid #0891b2; border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: #0c4a6e;
  cursor: grab; user-select: none; transition: background .15s, box-shadow .15s;
}
.co-match-chip:hover { background: #e0f2fe; }
.co-match-chip-sel { background: #0891b2 !important; color: #fff !important; box-shadow: 0 2px 8px #0891b240; }
.co-match-chip-placed { cursor: grab; background: #ecfdf5; border-color: #22c55e; color: #14532d; }
.co-match-chip-ok { background: #dcfce7 !important; border-color: #16a34a !important; color: #14532d !important; cursor: default !important; }
.co-match-chip-ng { background: #fee2e2 !important; border-color: #dc2626 !important; color: #7f1d1d !important; cursor: default !important; }
.co-match-rows { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.co-match-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #f8fafc; border: 1.5px solid #e2e8f0;
  border-radius: 10px; transition: border-color .15s;
}
.co-match-row-ok { background: #f0fdf4; border-color: #86efac; }
.co-match-row-ng { background: #fff5f5; border-color: #fca5a5; }
.co-match-phrase { flex: 0 0 auto; font-size: .93rem; font-weight: 700; color: #0c4a6e; min-width: 140px; }
.co-match-slot {
  flex: 1; min-height: 38px; border: 2px dashed #cbd5e1; border-radius: 8px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 8px;
  transition: border-color .15s, background .15s; cursor: pointer;
}
.co-match-slot-ready { border-color: #38bdf8; background: #f0f9ff; }
.co-match-slot-ok { border-color: #22c55e; background: #f0fdf4; cursor: default; }
.co-match-slot-ng { border-color: #ef4444; background: #fff5f5; cursor: default; }
.co-match-empty { font-size: .8rem; color: #94a3b8; font-style: italic; pointer-events: none; }
.co-match-correct-ans { font-size: .78rem; color: #15803d; font-weight: 700; margin-left: 4px; }
.co-match-submit-btn {
  margin-top: 16px; padding: 10px 28px; border-radius: 12px;
  background: #0891b2; border: none; color: #fff;
  font-size: .96rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
.co-match-submit-btn:hover { background: #0e7490; }
.co-test-dark .co-match-pool { background: #0f172a; border-color: #334155; }
.co-test-dark .co-match-chip { background: #1e293b; border-color: #38bdf8; color: #e2e8f0; }
.co-test-dark .co-match-chip:hover { background: #0f2236; }
.co-test-dark .co-match-chip-sel { background: #0891b2 !important; }
.co-test-dark .co-match-chip-placed { background: #0a2818; border-color: #22c55e; color: #86efac; }
.co-test-dark .co-match-chip-ok { background: #14532d !important; border-color: #16a34a !important; color: #86efac !important; }
.co-test-dark .co-match-chip-ng { background: #450a0a !important; border-color: #dc2626 !important; color: #fca5a5 !important; }
.co-test-dark .co-match-row { background: #1e293b; border-color: #334155; }
.co-test-dark .co-match-row-ok { background: #0a2818; border-color: #16a34a; }
.co-test-dark .co-match-row-ng { background: #450a0a; border-color: #dc2626; }
.co-test-dark .co-match-phrase { color: #bae6fd; }
.co-test-dark .co-match-slot { border-color: #334155; }
.co-test-dark .co-match-slot-ready { border-color: #38bdf8; background: #0c2231; }
.co-test-dark .co-match-slot-ok { border-color: #22c55e; background: #0a2818; }
.co-test-dark .co-match-slot-ng { border-color: #ef4444; background: #450a0a; }
.co-test-dark .co-match-empty { color: #475569; }
.co-test-dark .co-match-correct-ans { color: #4ade80; }
.co-test-dark .co-match-submit-btn { background: #0e7490; }
.co-test-dark .co-match-submit-btn:hover { background: #155e75; }

/* ── CO Topics ───────────────────────────────────────────────────────────────── */
.co-topics-btn {
  padding: 6px 12px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.co-topics-btn:hover { background: #4f46e5; }

/* Ép font tiếng Việt tốt cho màn Chủ đề (font đọc như Poppins làm vỡ dấu tiếng Việt) */
.co-tp-wrap { padding: 14px 16px; min-height: 160px; font-family: 'Nunito', 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; }
.co-tp-search-row { margin: 4px 0 16px; }
.co-tp-search {
  width: 100%; box-sizing: border-box; padding: 11px 16px; border: 1.5px solid #e2e8f0;
  border-radius: 12px; font-family: inherit; font-size: .95rem; color: #1e293b; background: #fff;
}
.co-tp-search:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.15); }

.co-tp-list-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.co-tp-head-titles { display: flex; flex-direction: column; gap: 2px; }
.co-tp-page-title { font-size: 1.35rem; font-weight: 800; color: #1e293b; letter-spacing: -.01em; }
.co-tp-page-sub { font-size: .85rem; color: #94a3b8; font-weight: 500; }
.co-tp-new-btn {
  margin-left: auto;
  padding: 10px 18px;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(99,102,241,.32);
  transition: transform .15s, box-shadow .15s;
}
.co-tp-new-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(99,102,241,.4); }

.co-tp-new-form, .co-tp-ph-form {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.co-tp-name-inp, .co-tp-ph-ta {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: .88rem;
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
}
.co-tp-name-inp:focus, .co-tp-ph-ta:focus { border-color: #6366f1; }
.co-tp-ph-ta { resize: vertical; }

.co-tp-color-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.co-tp-color-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  padding: 0;
}
.co-tp-color-dot:hover { transform: scale(1.25); box-shadow: 0 2px 6px rgba(0,0,0,.25); }

.co-tp-form-row { display: flex; gap: 8px; }
.co-tp-save-btn {
  padding: 6px 14px;
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.co-tp-save-btn:hover { background: #16a34a; }
.co-tp-cancel-btn {
  padding: 6px 14px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: .82rem;
  cursor: pointer;
}
.co-tp-cancel-btn:hover { background: #e2e8f0; }

.co-tp-empty { color: #94a3b8; font-size: .9rem; padding: 36px 0; text-align: center; }

/* Topics grid */
.co-tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.co-tp-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 18px;
  border-radius: 16px;
  border: 1px solid #eef2f7;
  border-left: 4px solid var(--tp-color, #6366f1);
  cursor: pointer;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: box-shadow .16s, transform .16s, border-color .16s;
  position: relative;
}
.co-tp-tile:hover { box-shadow: 0 10px 28px rgba(15,23,42,.12); transform: translateY(-3px); }
.co-tp-ic {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; line-height: 1;
  flex-shrink: 0;
}
.co-tp-tile-body { flex: 1; min-width: 0; }
.co-tp-tile-name { font-size: 1.04rem; font-weight: 800; color: #1e293b; margin-bottom: 2px; }
.co-tp-tile-count { font-size: .82rem; font-weight: 800; margin-bottom: 5px; }
.co-tp-tile-preview {
  font-size: .8rem;
  color: #94a3b8;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.co-tp-chev { font-size: 1.5rem; color: #cbd5e1; font-weight: 700; flex-shrink: 0; transition: transform .16s, color .16s; }
.co-tp-tile:hover .co-tp-chev { transform: translateX(3px); color: var(--tp-color, #6366f1); }
.co-tp-tile-btns {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .15s;
}
.co-tp-tile:hover .co-tp-tile-btns { opacity: 1; }
.co-tp-tile-edit, .co-tp-tile-del {
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: .8rem;
  cursor: pointer;
  line-height: 1.4;
}
.co-tp-tile-del:hover { background: #fee2e2; border-color: #fca5a5; color: #ef4444; }

/* Topic detail */
.co-tp-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.co-tp-back-btn {
  padding: 5px 10px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.co-tp-back-btn:hover { background: #e2e8f0; }
.co-tp-detail-badge {
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
}
.co-tp-detail-cnt { font-size: .82rem; color: #94a3b8; }
.co-tp-add-ph-btn {
  margin-left: auto;
  padding: 5px 12px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.co-tp-add-ph-btn:hover { background: #4f46e5; }

/* Cards list */
.co-tp-cards { display: flex; flex-direction: column; gap: 6px; }
.co-tp-card-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.co-tp-card-row .pv-tree-v2 { flex: 1; min-width: 0; }
.co-tp-rm-ph-btn {
  flex-shrink: 0;
  margin-top: 10px;
  background: #fee2e2;
  color: #ef4444;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: .8rem;
  cursor: pointer;
  line-height: 1;
}
.co-tp-rm-ph-btn:hover { background: #fecaca; }

.co-tp-test-btn {
  padding: 4px 12px; border-radius: 8px; border: none;
  background: #6366f1; color: #fff; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .13s; margin-left: auto;
}
.co-tp-test-btn:hover { background: #4f46e5; }
.co-bg-dark .co-tp-test-btn { background: #4f46e5; }
.co-bg-dark .co-tp-test-btn:hover { background: #4338ca; }
.co-tp-test-sel-btn { background: #16a34a; margin-left: 6px; }
.co-tp-test-sel-btn:hover { background: #15803d; }
.co-tp-list-sel-btn {
  padding: 4px 10px; border-radius: 8px; font-size: .78rem; font-weight: 600;
  border: 1.5px solid #d1d5db; background: #fff; color: #374151; cursor: pointer;
  transition: all .13s;
}
.co-tp-list-sel-btn:hover, .co-tp-list-sel-btn.active {
  background: #eff6ff; border-color: #6366f1; color: #4f46e5;
}
.co-tp-sel-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.co-tp-sel-all-row { padding: 4px 8px 8px; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px; }
.co-tp-sel-lbl { font-size: .78rem; font-weight: 700; color: #6366f1; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.co-tp-sel-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer; transition: background .1s;
  border: 1.5px solid transparent;
}
.co-tp-sel-item:hover { background: #f3f4f6; }
.co-tp-sel-item-on { background: #eff6ff; border-color: #bfdbfe; }
.co-tp-sel-item input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; accent-color: #6366f1; cursor: pointer; }
.co-tp-sel-phrase { font-size: .84rem; font-weight: 600; color: #1e293b; flex: 1; }
.co-tp-sel-vi { font-size: .76rem; color: #6b7280; }
.co-bg-dark .co-tp-list-sel-btn { background: #374151; border-color: #4b5563; color: #d1d5db; }
.co-bg-dark .co-tp-list-sel-btn.active { background: #312e81; border-color: #6366f1; color: #a5b4fc; }
.co-bg-dark .co-tp-sel-all-row { border-color: #374151; }
.co-bg-dark .co-tp-sel-item:hover { background: #1f2937; }
.co-bg-dark .co-tp-sel-item-on { background: #1e3a5f; border-color: #3b82f6; }
.co-bg-dark .co-tp-sel-phrase { color: #f1f5f9; }
.co-bg-dark .co-tp-sel-vi { color: #9ca3af; }

.co-tp-miss-block {
  margin: 0 0 14px; padding: 12px 16px;
  background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 10px;
}
.co-tp-miss-block-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.co-tp-miss-title { font-size: .8rem; font-weight: 700; color: #b45309; flex: 1; }
.co-tp-miss-copy-btn {
  padding: 3px 10px; border-radius: 6px; border: 1.5px solid #fcd34d;
  background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 700;
  cursor: pointer; transition: all .13s; white-space: nowrap;
}
.co-tp-miss-copy-btn:hover { background: #fde68a; }
.co-tp-miss-txt {
  font-size: .84rem; color: #374151; line-height: 1.6;
  user-select: text; word-break: break-word;
}
.co-tp-miss-tags {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
}
.co-tp-miss-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fee2e2; border: 1px solid #fca5a5; border-radius: 6px;
  padding: 2px 6px 2px 8px; font-size: .75rem; color: #991b1b; font-weight: 600;
}
.co-tp-miss-tag-rm {
  border: none; background: none; color: #ef4444; cursor: pointer;
  font-size: .7rem; padding: 0 1px; line-height: 1;
}
.co-tp-miss-tag-rm:hover { color: #b91c1c; }

.co-tp-miss {
  flex: 1;
  padding: 12px 16px;
  background: #fafafa;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  font-size: .88rem;
}
.co-tp-miss-phrase { font-weight: 600; color: #475569; }
.co-tp-miss-note { color: #f59e0b; }

/* Dark mode */
.co-bg-dark .co-tp-page-title { color: #e2e8f0; }
.co-bg-dark .co-tp-new-form,
.co-bg-dark .co-tp-ph-form  { background: #1e293b; border-color: #334155; }
.co-bg-dark .co-tp-name-inp,
.co-bg-dark .co-tp-ph-ta    { background: #0f172a; border-color: #475569; color: #e2e8f0; }
.co-bg-dark .co-tp-tile     { background: #1e293b; border-color: #334155; }
.co-bg-dark .co-tp-tile-name { color: #e2e8f0; }
.co-bg-dark .co-tp-tile-edit,
.co-bg-dark .co-tp-tile-del  { background: rgba(30,41,59,.95); border-color: #475569; color: #e2e8f0; }
.co-bg-dark .co-tp-back-btn   { background: #334155; color: #e2e8f0; border-color: #475569; }
.co-bg-dark .co-tp-back-btn:hover { background: #475569; }
.co-bg-dark .co-tp-cancel-btn { background: #334155; color: #94a3b8; border-color: #475569; }
.co-bg-dark .co-tp-cancel-btn:hover { background: #475569; }
.co-bg-dark .co-tp-miss-block { background: #1e293b; border-color: #854d0e; }
.co-bg-dark .co-tp-miss-title { color: #fbbf24; }
.co-bg-dark .co-tp-miss-copy-btn { background: #292524; border-color: #78350f; color: #fcd34d; }
.co-bg-dark .co-tp-miss-copy-btn:hover { background: #3c1f00; }
.co-bg-dark .co-tp-miss-txt { color: #cbd5e1; }
.co-bg-dark .co-tp-miss-tag { background: #3b1515; border-color: #7f1d1d; color: #fca5a5; }
.co-bg-dark .co-tp-miss      { background: #1e293b; border-color: #334155; }
.co-bg-dark .co-tp-miss-phrase { color: #cbd5e1; }

/* ── REEL ─────────────────────────────────────────────────────────────── */
.reel-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: #000;
  display: flex; flex-direction: column;
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
}
.reel-header {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,.75);
}
.reel-close-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: none; border-radius: 50%;
  color: #fff; font-size: 1rem; cursor: pointer; transition: background .15s;
}
.reel-close-btn:hover { background: rgba(255,255,255,.25); }
.reel-header-info { flex: 1; min-width: 0; }
.reel-title {
  font-size: .85rem; font-weight: 800; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reel-author { font-size: .72rem; color: #94a3b8; margin-top: 1px; }
.reel-cefr-badge {
  flex-shrink: 0; padding: 2px 8px; border-radius: 999px;
  background: #fef3c7; color: #92400e; font-size: .72rem; font-weight: 800;
}
.reel-counter {
  flex-shrink: 0; font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.45);
}
.reel-open-btn {
  flex-shrink: 0;
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff;
  font-size: .75rem; font-weight: 700; cursor: pointer;
  font-family: 'Nunito', sans-serif; white-space: nowrap;
  transition: background .15s;
}
.reel-open-btn:hover { background: rgba(255,255,255,.22); }
.reel-player-section {
  flex: 1; position: relative; overflow: hidden; background: #000;
  min-height: 0;
}
.reel-player-wrap { position: absolute; inset: 0; }
.reel-player-wrap > div,
.reel-player-wrap > iframe { width: 100%; height: 100%; border: none; }
.reel-subtitle-area {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 48px 20px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.88) 40%, rgba(0,0,0,.96));
  text-align: center;
}
.reel-sub-vi { pointer-events: none; }
.reel-sub-en {
  font-size: 1.18rem; font-weight: 800;
  color: #fef08a;
  line-height: 1.55;
  text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.7);
}
.reel-word { cursor: pointer; border-radius: 3px; transition: background .1s; }
.reel-word:hover { background: rgba(255,255,255,.2); }
.reel-sub-vi {
  font-size: .9rem; font-weight: 600;
  color: #e2e8f0;
  margin-top: 5px; opacity: .85;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.reel-nav {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 16px;
  background: rgba(0,0,0,.5);
}
.reel-nav-btn {
  padding: 8px 20px;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 20px;
  background: rgba(255,255,255,.1); color: #fff;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  font-family: 'Nunito', sans-serif; transition: background .15s;
  white-space: nowrap;
}
.reel-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.reel-nav-btn:disabled { opacity: .3; cursor: default; }
.reel-nav-mid {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.reel-nav-info {
  font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.5);
}
.reel-vi-toggle {
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  font-size: .72rem; font-weight: 700; cursor: pointer;
  font-family: 'Nunito', sans-serif; white-space: nowrap;
  transition: background .15s;
}
.reel-vi-toggle:hover { background: rgba(255,255,255,.18); }
.reel-dict-popup {
  position: absolute;
  min-width: 220px; max-width: min(340px, 90vw);
  background: rgba(15,23,42,.95); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 14px;
  padding: 14px 16px; z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  cursor: pointer;
}
.reel-dp-word {
  font-size: 1.1rem; font-weight: 800; color: #fef08a;
  margin-bottom: 4px;
}
.reel-dp-ipa { font-size: .8rem; color: #94a3b8; margin-bottom: 6px; }
.reel-dp-vi  { font-size: .95rem; font-weight: 700; color: #4ade80; margin-bottom: 4px; }
.reel-dp-def { font-size: .82rem; color: #cbd5e1; line-height: 1.45; }

@media (max-width: 600px) {
  .reel-sub-en { font-size: 1rem; }
  .reel-nav-btn { padding: 7px 14px; font-size: .78rem; }
}

/* ── Pronunciation exercises (word stress) ── */
.pron-topbar { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #e2e8f0; }
.pron-title { font-size: 1.15rem; font-weight: 800; color: #7c3aed; }
.pron-body { max-width: 760px; margin: 0 auto; padding: 22px 18px 60px; }
.pron-setup { display: flex; flex-direction: column; gap: 18px; }
.pron-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 18px; }
.pron-step { font-size: .92rem; font-weight: 800; color: #1e293b; margin-bottom: 12px; }
.pron-counts { display: flex; gap: 10px; flex-wrap: wrap; }
.pron-count-btn { padding: 8px 18px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #fff; font-weight: 800; cursor: pointer; color: #475569; }
.pron-count-btn.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.pron-ta { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 11px 13px; font-size: .9rem; font-family: 'Courier New', monospace; resize: vertical; line-height: 1.5; }
.pron-ta:focus { outline: none; border-color: #7c3aed; }
.pron-btn { margin-top: 12px; padding: 11px 18px; border-radius: 11px; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-weight: 800; font-size: .92rem; cursor: pointer; }
.pron-btn:hover { border-color: #7c3aed; color: #6d28d9; }
.pron-btn-primary { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.pron-btn-primary:hover { background: #6d28d9; color: #fff; }
.pron-btn-go { background: #16a34a; border-color: #16a34a; color: #fff; width: 100%; }
.pron-btn-go:hover { background: #15803d; color: #fff; }
/* quiz */
.pron-quiz { max-width: 620px; margin: 0 auto; }
.pron-quiz-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pron-quiz-prog { font-weight: 800; color: #7c3aed; }
.pron-quiz-score { font-weight: 800; color: #16a34a; }
.pron-quiz-exit { margin-left: auto; border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; padding: 4px 10px; font-weight: 700; color: #64748b; cursor: pointer; }
.pron-quiz-track { height: 7px; background: #eef2f7; border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.pron-quiz-fill { height: 100%; background: linear-gradient(90deg,#a78bfa,#7c3aed); border-radius: 99px; transition: width .3s; }
.pron-quiz-prompt { font-size: 1.05rem; font-weight: 700; color: #1e293b; text-align: center; margin-bottom: 18px; }
.pron-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .pron-opts { grid-template-columns: 1fr; } }
.pron-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid #e5e7eb; border-radius: 14px; background: #fff; cursor: pointer; transition: all .12s; text-align: left; font-family: 'Lora', Georgia, serif; }
.pron-opt:hover:not(:disabled) { border-color: #7c3aed; background: #faf5ff; transform: translateY(-1px); }
.pron-opt-letter { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #ede9fe; color: #7c3aed; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .92rem; }
.pron-opt-word { flex: 1; font-size: 1.15rem; font-weight: 600; color: #1e293b; }
.pron-opt-spk { flex: none; cursor: pointer; font-size: 1.05rem; opacity: .8; }
.pron-opt-spk:hover { opacity: 1; }
.pron-opt-tick { flex: none; color: #16a34a; font-weight: 800; }
.pron-opt-ok { border-color: #86efac !important; background: #f0fdf4 !important; }
.pron-opt-ok .pron-opt-letter { background: #22c55e; color: #fff; }
.pron-opt-bad { border-color: #fca5a5 !important; background: #fff1f2 !important; }
.pron-opt-bad .pron-opt-letter { background: #ef4444; color: #fff; }
.pron-fb { margin: 16px 0; padding: 12px 16px; border-radius: 12px; font-weight: 700; text-align: center; }
.pron-fb-ok { background: #dcfce7; color: #15803d; }
.pron-fb-bad { background: #fee2e2; color: #b91c1c; }
.pron-result { max-width: 460px; margin: 30px auto 0; text-align: center; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 18px; padding: 30px 24px; }
.pron-result-pct { font-size: 3rem; font-weight: 900; color: #7c3aed; }
.pron-result-score { font-size: 1.05rem; font-weight: 700; color: #475569; margin-top: 4px; }
.pron-result-msg { color: #64748b; margin: 12px 0 22px; }
.pron-result-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* list */
.pron-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pron-list-ttl { font-size: 1.1rem; font-weight: 800; color: #1e293b; }
.pron-empty { text-align: center; color: #94a3b8; padding: 34px 16px; }
.pron-q-list { display: flex; flex-direction: column; gap: 10px; }
.pron-q-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid #e5e7eb; border-radius: 14px; background: #fff; cursor: pointer; transition: all .12s; }
.pron-q-item:hover { border-color: #7c3aed; background: #faf5ff; transform: translateY(-1px); }
.pron-q-ico { font-size: 1.3rem; flex: none; }
.pron-q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pron-q-title { font-weight: 800; color: #1e293b; }
.pron-q-meta { font-size: .82rem; color: #64748b; margin-top: 2px; }
.pron-q-del { flex: none; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; border-radius: 8px; padding: 4px 9px; cursor: pointer; }
.pron-q-del:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.pron-q-go { flex: none; color: #7c3aed; font-weight: 800; }
.pron-back-link { background: none; border: none; color: #7c3aed; font-weight: 700; cursor: pointer; padding: 0 0 4px; align-self: flex-start; }
.pron-title-inp { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 11px 13px; font-size: .95rem; }
.pron-title-inp:focus { outline: none; border-color: #7c3aed; }
/* accent toggle + ipa */
.pron-acc-seg { display: inline-flex; border: 1.5px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.pron-acc-btn { border: none; background: #fff; color: #64748b; font-weight: 800; font-size: .76rem; padding: 4px 10px; cursor: pointer; }
.pron-acc-btn.on { background: #7c3aed; color: #fff; }
.pron-quiz-name { text-align: center; font-weight: 800; color: #7c3aed; margin-bottom: 10px; }
.pron-opt-body { flex: 1; display: flex; flex-direction: column; }
.pron-opt-ipa { font-size: .9rem; color: #0d9488; margin-top: 2px; font-family: 'Times New Roman', serif; }
.pron-kb-hint { text-align: center; font-size: .76rem; color: #94a3b8; margin-top: 10px; }
.pron-kb-hint kbd { display: inline-block; padding: 1px 6px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 5px; font-size: .72rem; font-family: inherit; }
/* type chooser */
.pron-types { display: flex; flex-direction: column; gap: 12px; }
.pron-type-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px solid #e5e7eb; border-radius: 16px; background: #fff; cursor: pointer; transition: all .12s; text-align: left; }
.pron-type-card:hover { border-color: #7c3aed; background: #faf5ff; transform: translateY(-1px); }
.pron-type-ico { font-size: 1.7rem; flex: none; }
.pron-type-tx { flex: 1; display: flex; flex-direction: column; }
.pron-type-tx b { font-size: 1.05rem; color: #1e293b; }
.pron-type-tx small { color: #64748b; margin-top: 2px; }
.pron-type-go { flex: none; color: #7c3aed; font-weight: 800; font-size: 1.2rem; }

/* ── Pronunciation: màn chọn loại bài tập (thiết kế mới, 2 card lớn) ─────────── */
.prx-choose { max-width: 880px; margin: 0 auto; padding: 26px 16px 56px; text-align: center; }
.prx-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #ede9fe; border-radius: 999px; padding: 7px 18px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; color: #6d28d9; box-shadow: 0 2px 10px rgba(124,58,237,.08); }
.prx-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #7c3aed; }
.prx-title { font-size: 2.1rem; font-weight: 900; color: #1e293b; margin: 18px 0 8px; letter-spacing: -.02em; }
.prx-sub { color: #64748b; font-size: 1rem; margin: 0 auto 30px; }
.prx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.prx-card { position: relative; text-align: left; background: #fff; border: 1px solid #eef2f7; border-radius: 24px; padding: 26px 26px 20px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(2,6,23,.05); transition: transform .15s, box-shadow .15s; }
.prx-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(2,6,23,.1); }
.prx-card-tag { align-self: flex-start; font-size: .72rem; font-weight: 800; padding: 5px 13px; border-radius: 999px; margin-bottom: 20px; }
.prx-card-ico { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff; margin-bottom: 18px; }
.prx-card-name { font-size: 1.4rem; font-weight: 800; color: #1e293b; margin-bottom: 8px; }
.prx-card-desc { color: #64748b; font-size: .92rem; line-height: 1.55; margin-bottom: 20px; min-height: 44px; }
.prx-card-foot { display: flex; align-items: center; width: 100%; border-top: 1px solid #f1f5f9; padding-top: 16px; margin-top: auto; }
.prx-card-foot-l { font-size: .85rem; font-weight: 700; margin-right: auto; }
.prx-card-arrow { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; margin-left: auto; }
/* card Word stress — tím */
.prx-card-stress .prx-card-tag { background: #ede9fe; color: #7c3aed; }
.prx-card-stress .prx-card-ico { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow: 0 8px 20px rgba(124,58,237,.3); }
.prx-card-stress .prx-card-foot-l { color: #7c3aed; }
.prx-card-stress .prx-card-arrow { background: #ede9fe; color: #7c3aed; }
.prx-card-stress:hover { border-color: #ddd6fe; }
/* card Odd one out — đỏ/hồng */
.prx-card-sound .prx-card-tag { background: #ffe4e6; color: #e11d48; }
.prx-card-sound .prx-card-ico { background: linear-gradient(135deg,#fb7185,#e11d48); box-shadow: 0 8px 20px rgba(225,29,72,.3); }
.prx-card-sound .prx-card-foot-l { color: #e11d48; }
.prx-card-sound .prx-card-arrow { background: #ffe4e6; color: #e11d48; }
.prx-card-sound:hover { border-color: #fecdd3; }
@media (max-width: 680px) {
  .prx-cards { grid-template-columns: 1fr; }
  .prx-title { font-size: 1.6rem; }
}

/* ── Pronunciation: danh sách bài tập (thiết kế mới) ─────────────────────────── */
.prl-head { display: flex; align-items: center; gap: 16px; margin: 12px 0 24px; }
.prl-head-ico { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; flex: none; }
.prl-ico-stress { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow: 0 8px 20px rgba(124,58,237,.28); }
.prl-ico-sound  { background: linear-gradient(135deg,#fb7185,#e11d48); box-shadow: 0 8px 20px rgba(225,29,72,.28); }
.prl-head-ttl { font-size: 1.9rem; font-weight: 900; color: #1e293b; letter-spacing: -.02em; }
.prl-head-sub { color: #64748b; font-size: .9rem; margin-top: 2px; }
.prl-head-spacer { flex: 1; }
.prl-create { background: linear-gradient(135deg,#8b5cf6,#7c3aed); color: #fff; border: none; border-radius: 14px; padding: 12px 20px; font-weight: 800; font-size: .92rem; cursor: pointer; font-family: inherit; white-space: nowrap; box-shadow: 0 6px 16px rgba(124,58,237,.3); }
.prl-create:hover { filter: brightness(1.05); }
.prl-list { display: flex; flex-direction: column; gap: 14px; }
.prl-row { display: flex; align-items: center; gap: 14px; background: var(--acbg); border: 1px solid rgba(0,0,0,.04); border-left: 5px solid var(--ac); border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.prl-row:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(2,6,23,.08); }
.prl-row-ico { width: 46px; height: 46px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--ac); flex: none; box-shadow: 0 3px 8px rgba(2,6,23,.06); }
.prl-row-main { flex: 1; min-width: 0; }
.prl-row-ttl { font-weight: 800; font-size: 1.05rem; color: #1e293b; }
.prl-row-meta { font-size: .84rem; color: #64748b; margin-top: 3px; }
.prl-del { width: 38px; height: 38px; border-radius: 11px; background: #fff; border: 1px solid #fde2e2; color: #ef4444; cursor: pointer; font-size: .95rem; flex: none; }
.prl-del:hover { background: #fef2f2; }
.prl-play { width: 40px; height: 40px; border-radius: 50%; background: var(--ac); color: #fff; border: none; cursor: pointer; font-size: .95rem; flex: none; box-shadow: 0 4px 12px rgba(2,6,23,.15); }
.prl-play:hover { filter: brightness(1.08); }
.prl-c0 { --ac: #16a34a; --acbg: #f0fdf4; }
.prl-c1 { --ac: #7c3aed; --acbg: #f5f3ff; }
.prl-c2 { --ac: #f97316; --acbg: #fff7ed; }
.prl-c3 { --ac: #2563eb; --acbg: #eff6ff; }
@media (max-width: 680px) {
  .prl-head-ttl { font-size: 1.5rem; }
  .prl-create { padding: 10px 14px; font-size: .85rem; }
}
/* highlighted focus letters (odd-one-out) */
.pron-hl { color: #dc2626; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   MULTIPLE CHOICE QUESTIONS (MCQ) — đề trắc nghiệm Đại học + TOEIC
   ══════════════════════════════════════════════════════════════════════════ */
.mcq-overlay .pv-title { font-weight: 800; }
.mcq-body { flex: 1; overflow-y: auto; padding: 24px 18px 60px; }
.mcq-home { max-width: 860px; margin: 0 auto; }
.mcq-home-title { font-size: 1.15rem; font-weight: 800; color: #334155; margin: 8px 0 20px; text-align: center; }
.mcq-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.mcq-cat-card {
  position: relative; cursor: pointer; padding: 26px 22px; border-radius: 18px;
  background: #fff; border: 2px solid #e5e7eb; border-left: 6px solid var(--mcq-c);
  box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mcq-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.1); border-color: var(--mcq-c); }
.mcq-cat-ic { font-size: 2.4rem; margin-bottom: 8px; }
.mcq-cat-name { font-size: 1.2rem; font-weight: 800; color: #1e293b; letter-spacing: .3px; }
.mcq-cat-count { font-size: .9rem; font-weight: 800; color: var(--mcq-c); margin: 4px 0 8px; }
.mcq-cat-desc { font-size: .85rem; color: #64748b; line-height: 1.5; }

.mcq-cat-wrap { max-width: 760px; margin: 0 auto; }
.mcq-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.mcq-cat-head-ic { font-size: 1.6rem; }
.mcq-cat-head-name { font-size: 1.15rem; font-weight: 800; color: #1e293b; }
.mcq-cat-head-count { margin-left: 10px; font-size: .85rem; font-weight: 700; color: #fff; background: var(--mcq-c); padding: 3px 12px; border-radius: 999px; flex-shrink: 0; }
.mcq-exp-mode {
  margin-left: auto; padding: 6px 12px; border-radius: 9px; border: 1.5px solid #cbd5e1; background: #fff;
  font-family: inherit; font-size: .82rem; font-weight: 700; color: #334155; cursor: pointer; outline: none; transition: border-color .12s;
}
.mcq-exp-mode:hover { border-color: var(--mcq-c, #0ea5e9); }
.mcq-exp-mode:focus { border-color: var(--mcq-c, #0ea5e9); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }

/* Admin tools */
.mcq-admin { margin-bottom: 18px; }
.mcq-admin-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mcq-admin-btn {
  padding: 7px 14px; border-radius: 9px; border: 1.5px solid #cbd5e1; background: #fff;
  font-family: inherit; font-size: .82rem; font-weight: 700; color: #334155; cursor: pointer; transition: all .12s;
}
.mcq-admin-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.mcq-admin-import { background: #0891b2; color: #fff; border-color: #0891b2; }
.mcq-admin-import:hover { background: #0e7490; color: #fff; }
.mcq-admin-clear { color: #dc2626; border-color: #fca5a5; }
.mcq-admin-clear:hover { background: #fef2f2; }
.mcq-panel { margin-top: 12px; padding: 14px; border-radius: 12px; background: #f8fafc; border: 1.5px solid #e2e8f0; }
.mcq-panel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .85rem; font-weight: 700; color: #475569; }
.mcq-panel-row input { width: 70px; padding: 4px 8px; border: 1.5px solid #cbd5e1; border-radius: 7px; font-family: inherit; }
.mcq-panel-hint { font-size: .8rem; color: #64748b; margin-bottom: 8px; line-height: 1.5; }
.mcq-prompt-box, .mcq-import-ta {
  width: 100%; box-sizing: border-box; padding: 10px; border: 1.5px solid #cbd5e1; border-radius: 9px;
  font-family: 'Courier New', monospace; font-size: .8rem; line-height: 1.5; resize: vertical; outline: none; color: #1e293b;
}
.mcq-prompt-box:focus, .mcq-import-ta:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.mcq-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.mcq-copy-btn, .mcq-send-btn, .mcq-import-save, .mcq-cancel-btn {
  padding: 6px 14px; border-radius: 8px; border: none; font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.mcq-copy-btn { background: #0ea5e9; color: #fff; }
.mcq-send-btn { background: #10a37f; color: #fff; }
.mcq-import-save { background: #16a34a; color: #fff; }
.mcq-cancel-btn { background: #fff; color: #64748b; border: 1.5px solid #cbd5e1; }
.mcq-copy-btn:hover, .mcq-send-btn:hover, .mcq-import-save:hover { filter: brightness(.94); }
.mcq-import-msg { font-size: .8rem; font-weight: 700; }
.mcq-msg-ok { color: #16a34a; }
.mcq-msg-err { color: #dc2626; }

/* Quiz player */
.mcq-player { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.mcq-empty { text-align: center; padding: 50px 20px; color: #94a3b8; font-size: .95rem; }
.mcq-progress { height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.mcq-progress-bar { height: 100%; background: var(--mcq-c, #0ea5e9); transition: width .3s; }
.mcq-qhead { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 700; color: #64748b; margin-bottom: 12px; }
.mcq-score { color: var(--mcq-c, #0ea5e9); }
.mcq-qstem { font-size: 1.05rem; font-weight: 600; color: #1e293b; line-height: 1.65; margin-bottom: 18px; }
.mcq-q-instr { display: block; margin-bottom: 8px; font-size: .92em; font-weight: 600; color: #64748b; font-style: italic; }
.mcq-u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; color: #0f172a; }
.mcq-blank { color: var(--mcq-c, #0ea5e9); font-weight: 800; letter-spacing: 1px; }
.mcq-opts { display: flex; flex-direction: column; gap: 10px; }
.mcq-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 13px 15px; border-radius: 11px; border: 2px solid #e5e7eb; background: #fff;
  font-family: inherit; font-size: .95rem; color: #334155; cursor: pointer; transition: all .12s;
}
.mcq-opt:not([disabled]):hover { border-color: var(--mcq-c, #0ea5e9); background: #f8fafc; }
.mcq-opt-letter {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: #64748b;
}
.mcq-opt-text { padding-top: 2px; line-height: 1.5; }
.mcq-opt.mcq-correct { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.mcq-opt.mcq-correct .mcq-opt-letter { background: #16a34a; color: #fff; }
.mcq-opt.mcq-wrong { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }
.mcq-opt.mcq-wrong .mcq-opt-letter { background: #dc2626; color: #fff; }
.mcq-opt[disabled] { cursor: default; }
.mcq-feedback { margin-top: 16px; font-weight: 800; font-size: .95rem; }
.mcq-fb-ok { color: #16a34a; }
.mcq-fb-no { color: #dc2626; }
.mcq-exp { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; border-left: 4px solid #94a3b8; }
.mcq-exp-vi { background: #fffbeb; border-left-color: #f59e0b; }
.mcq-exp-lbl { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #64748b; margin-bottom: 5px; }
.mcq-exp-vi .mcq-exp-lbl { color: #b45309; }
.mcq-exp-body { font-size: .9rem; line-height: 1.6; color: #334155; }
.mcq-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mcq-next-btn { padding: 10px 22px; border-radius: 10px; border: none; background: var(--mcq-c, #0ea5e9); color: #fff; font-family: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
.mcq-next-btn:hover { filter: brightness(.94); }
.mcq-del-q-btn { padding: 10px 16px; border-radius: 10px; border: 1.5px solid #fca5a5; background: #fff; color: #dc2626; font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.mcq-del-q-btn:hover { background: #fef2f2; }
.mcq-back-btn { padding: 10px 18px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #fff; color: #475569; font-family: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.mcq-result { text-align: center; padding: 24px 10px; }
.mcq-result-ic { font-size: 3rem; }
.mcq-result-score { font-size: 2rem; font-weight: 900; color: #1e293b; margin-top: 6px; }
.mcq-result-pct { font-size: 1rem; font-weight: 700; color: var(--mcq-c, #0ea5e9); margin-top: 2px; }
.mcq-result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   REWRITE THE SENTENCE (trong Writing module)
   ══════════════════════════════════════════════════════════════════════════ */
.wr-rewrite { flex: 1; overflow-y: auto; padding: 24px 18px 60px; --mcq-c: #6366f1; }
.rsq-wrap { max-width: 760px; margin: 0 auto; }
.rsq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.rsq-back-btn { padding: 6px 14px; border-radius: 9px; border: 1.5px solid #cbd5e1; background: #fff; font-family: inherit; font-size: .82rem; font-weight: 700; color: #475569; cursor: pointer; }
.rsq-back-btn:hover { background: #f1f5f9; }
.rsq-head-ic { font-size: 1.5rem; }
.rsq-head-name { font-size: 1.15rem; font-weight: 800; color: #1e293b; }
.rsq-head-count { margin-left: auto; font-size: .85rem; font-weight: 700; color: #fff; background: var(--mcq-c); padding: 3px 12px; border-radius: 999px; }
.rsq-player { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.rsq-original { font-size: 1.05rem; font-weight: 600; color: #1e293b; line-height: 1.6; padding: 12px 14px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #94a3b8; }
.rsq-keyword { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.rsq-keyword-lbl { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #64748b; }
.rsq-keyword-val { font-size: 1rem; font-weight: 900; letter-spacing: 1.5px; color: #fff; background: var(--mcq-c); padding: 5px 16px; border-radius: 8px; }
.rsq-second { font-size: 1.05rem; font-weight: 500; color: #1e293b; line-height: 2; margin-top: 6px; }
.rsq-inp {
  display: inline-block; min-width: 220px; padding: 4px 10px; margin: 0 4px;
  border: none; border-bottom: 2px solid var(--mcq-c); background: #f8fafc;
  font-family: inherit; font-size: 1rem; color: #0f172a; outline: none; border-radius: 6px 6px 0 0;
}
.rsq-inp:focus { background: #eff6ff; }
.rsq-fill { font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.rsq-fill-ok { color: #15803d; background: #f0fdf4; }
.rsq-fill-no { color: #b91c1c; background: #fef2f2; text-decoration: line-through; text-decoration-color: rgba(185,28,28,.5); }
.rsq-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rsq-show-btn { padding: 10px 18px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #fff; color: #475569; font-family: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.rsq-show-btn:hover { background: #f1f5f9; }
.rsq-answer-box { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #f0fdf4; border-left: 4px solid #16a34a; }
.rsq-answer-lbl { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #15803d; }
.rsq-answer-val { font-weight: 800; color: #14532d; }
/* dark mode (overlay Writing) */
.wr-overlay.wr-dark .rsq-player { background: #1e293b; border-color: #334155; }
.wr-overlay.wr-dark .rsq-original { background: #0f172a; color: #e2e8f0; }
.wr-overlay.wr-dark .rsq-second { color: #e2e8f0; }
.wr-overlay.wr-dark .rsq-head-name { color: #e2e8f0; }
.wr-overlay.wr-dark .rsq-inp { background: #0f172a; color: #f1f5f9; }
.wr-overlay.wr-dark .rsq-back-btn, .wr-overlay.wr-dark .rsq-show-btn { background: #0f172a; color: #cbd5e1; border-color: #334155; }
.wr-hub-card--rewrite .wr-hub-ic { background: linear-gradient(135deg,#e0e7ff,#c7d2fe); }
.wr-hub-card--rewrite .wr-hub-tt::after { content:''; display:block; width:34px; height:3px; border-radius:3px; background:#6366f1; margin:8px auto 0; }

/* Rewrite — danh sách bộ câu hỏi */
.rsq-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rsq-name-row label { font-size: .85rem; font-weight: 700; color: #475569; flex-shrink: 0; }
.rsq-name-inp { flex: 1; min-width: 180px; padding: 7px 11px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-family: inherit; font-size: .88rem; color: #1e293b; outline: none; }
.rsq-name-inp:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.rsq-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 4px; }
.rsq-set-card {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 16px 16px; border-radius: 14px; background: #fff; border: 1.5px solid #e5e7eb; border-left: 5px solid #6366f1;
  box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: transform .14s, box-shadow .14s, border-color .14s;
}
.rsq-set-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.1); border-color: #6366f1; }
.rsq-set-ic { font-size: 1.7rem; flex-shrink: 0; }
.rsq-set-body { flex: 1; min-width: 0; }
.rsq-set-name { font-size: 1rem; font-weight: 800; color: #1e293b; word-break: break-word; }
.rsq-set-count { font-size: .82rem; font-weight: 700; color: #6366f1; margin-top: 2px; }
.rsq-set-chev { font-size: 1.4rem; color: #cbd5e1; flex-shrink: 0; }
.rsq-set-btns { position: absolute; top: 8px; right: 10px; display: none; gap: 4px; }
.rsq-set-card:hover .rsq-set-btns { display: flex; }
.rsq-set-edit, .rsq-set-del { width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid #e5e7eb; background: #fff; cursor: pointer; font-size: .8rem; line-height: 1; }
.rsq-set-edit:hover { background: #eef2ff; border-color: #6366f1; }
.rsq-set-del:hover { background: #fef2f2; border-color: #fca5a5; }
.wr-overlay.wr-dark .rsq-set-card { background: #1e293b; border-color: #334155; border-left-color: #818cf8; }
.wr-overlay.wr-dark .rsq-set-name { color: #e2e8f0; }
.wr-overlay.wr-dark .rsq-name-inp { background: #0f172a; color: #f1f5f9; border-color: #334155; }

/* Rewrite — nút toggle âm thanh sau khi làm */
.rsq-sound-btn {
  margin-left: 10px; width: 38px; height: 32px; flex-shrink: 0;
  border: 1.5px solid #cbd5e1; border-radius: 9px; background: #fff;
  font-size: 1rem; cursor: pointer; line-height: 1; transition: all .12s;
}
.rsq-sound-btn:hover { background: #f1f5f9; border-color: #6366f1; }
.rsq-sound-btn.off { background: #f1f5f9; opacity: .65; border-style: dashed; }
.wr-overlay.wr-dark .rsq-sound-btn { background: #0f172a; border-color: #334155; }

/* ══════════════════════════════════════════════════════════════════════════
   WRITE THE CORRECT WORD FORM (cloze passage)
   ══════════════════════════════════════════════════════════════════════════ */
.wr-hub-card--wordform .wr-hub-ic { background: linear-gradient(135deg,#d1fae5,#a7f3d0); }
.wr-hub-card--wordform .wr-hub-tt::after { content:''; display:block; width:34px; height:3px; border-radius:3px; background:#10b981; margin:8px auto 0; }
.wf-paper { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 26px 26px 20px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.wf-title { font-size: 1.25rem; font-weight: 900; letter-spacing: .5px; color: #0f172a; text-align: center; text-transform: uppercase; margin-bottom: 18px; }
.wf-passage { font-size: 1.05rem; line-height: 2.4; color: #1e293b; text-align: justify; }
.wf-gap { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.wf-inp {
  width: 130px; padding: 3px 8px; border: none; border-bottom: 2px solid #10b981; background: #f0fdf4;
  font-family: inherit; font-size: 1rem; color: #065f46; outline: none; border-radius: 6px 6px 0 0; text-align: center;
}
.wf-inp:focus { background: #dcfce7; }
.wf-gap-base { font-size: .8rem; font-weight: 800; color: #6366f1; text-transform: uppercase; }
.wf-filled { font-weight: 800; padding: 1px 6px; border-radius: 5px; }
.wf-gap-ok .wf-filled { color: #15803d; background: #dcfce7; }
.wf-gap-no .wf-filled { color: #b91c1c; background: #fee2e2; text-decoration: line-through; text-decoration-color: rgba(185,28,28,.55); }
.wf-correct { font-weight: 800; color: #15803d; margin-left: 4px; }
.wf-correct::before { content: '→ '; color: #94a3b8; font-weight: 400; }
.wf-result-bar { margin: 20px 0 12px; padding: 11px 16px; border-radius: 11px; font-weight: 800; font-size: 1rem; text-align: center; }
.wf-rb-ok { background: #f0fdf4; color: #15803d; border: 1.5px solid #bbf7d0; }
.wf-rb-mid { background: #fffbeb; color: #b45309; border: 1.5px solid #fde68a; }
.wf-rb-low { background: #fef2f2; color: #b91c1c; border: 1.5px solid #fecaca; }
.wf-exps { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.wf-exp { padding: 11px 14px; border-radius: 10px; border-left: 4px solid #94a3b8; background: #f8fafc; }
.wf-exp-ok { border-left-color: #16a34a; }
.wf-exp-no { border-left-color: #ef4444; }
.wf-exp-hd { font-size: .95rem; margin-bottom: 5px; }
.wf-exp-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: #475569; font-weight: 800; font-size: .8rem; margin-right: 6px; }
.wf-exp-base { font-weight: 800; color: #6366f1; text-transform: uppercase; }
.wf-exp-ans { font-weight: 800; color: #15803d; }
.wf-exp-tick { color: #16a34a; font-weight: 800; margin-left: 8px; }
.wf-exp-cross { color: #b91c1c; font-weight: 700; margin-left: 8px; font-size: .85rem; }
.wf-exp-line { font-size: .9rem; line-height: 1.6; color: #334155; margin-top: 3px; }
.wf-exp-line.wf-exp-vi { color: #475569; }
.wf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* dark mode */
.wr-overlay.wr-dark .wf-paper { background: #1e293b; border-color: #334155; }
.wr-overlay.wr-dark .wf-title, .wr-overlay.wr-dark .wf-passage { color: #e2e8f0; }
.wr-overlay.wr-dark .wf-inp { background: #0f172a; color: #6ee7b7; }
.wr-overlay.wr-dark .wf-exp { background: #0f172a; }
.wr-overlay.wr-dark .wf-exp-line { color: #cbd5e1; }

/* Word form — nút toggle chế độ chấm + gợi ý */
.wf-mode-btn {
  margin-left: 10px; flex-shrink: 0; padding: 7px 14px; border-radius: 9px;
  border: 1.5px solid #10b981; background: #ecfdf5; color: #047857;
  font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .12s;
}
.wf-mode-btn:hover { background: #d1fae5; }
.wf-hint { align-self: center; font-size: .82rem; color: #64748b; }
.wr-overlay.wr-dark .wf-mode-btn { background: #064e3b; color: #6ee7b7; border-color: #065f46; }

/* Word form — bố cục 2 cột: đoạn văn trái, giải thích phải */
.rsq-wrap.rsq-wrap-wide { max-width: 1180px; }
.wf-layout { display: flex; gap: 22px; align-items: flex-start; }
.wf-main { flex: 1 1 60%; min-width: 0; }
.wf-side {
  flex: 1 1 38%; max-width: 440px;
  position: sticky; top: 0; align-self: flex-start;
  max-height: calc(100vh - 130px); overflow-y: auto;
}
.wf-side-empty {
  color: #94a3b8; font-size: .9rem; line-height: 1.6; padding: 22px 18px; text-align: center;
  border: 1.5px dashed #d1d5db; border-radius: 14px; background: #fafafa;
}
.wf-side-title { font-weight: 800; color: #334155; font-size: .98rem; margin: 4px 0 12px; }
.wf-side .wf-result-bar { margin: 0 0 12px; }
@media (max-width: 880px) {
  .wf-layout { flex-direction: column; }
  .wf-side { position: static; max-width: none; width: 100%; max-height: none; }
}
.wr-overlay.wr-dark .wf-side-empty { background: #0f172a; border-color: #334155; color: #64748b; }
.wr-overlay.wr-dark .wf-side-title { color: #e2e8f0; }

/* Word form — dropdown chọn ngôn ngữ giải thích */
.wf-lang-sel {
  margin-left: 8px; flex-shrink: 0; padding: 7px 12px; border-radius: 9px;
  border: 1.5px solid #cbd5e1; background: #fff; color: #334155;
  font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; outline: none; transition: border-color .12s;
}
.wf-lang-sel:hover { border-color: #10b981; }
.wf-lang-sel:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.wr-overlay.wr-dark .wf-lang-sel { background: #0f172a; color: #e2e8f0; border-color: #334155; }

/* ── Describe Pictures ── */
.dp-body { flex: 1; overflow-y: auto; padding: 18px; }
.dp-empty { text-align: center; padding: 50px 20px; color: #94a3b8; font-size: .95rem; }
.dp-layout { display: flex; gap: 18px; align-items: flex-start; max-width: 1100px; margin: 0 auto; }
.dp-list { flex: 0 0 200px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 130px); overflow-y: auto; }
.dp-thumb { position: relative; border: 2px solid #e5e7eb; border-radius: 12px; overflow: hidden; cursor: pointer; background: #fff; transition: border-color .14s, box-shadow .14s; }
.dp-thumb.on { border-color: #ea580c; box-shadow: 0 4px 14px rgba(234,88,12,.18); }
.dp-thumb img { width: 100%; height: 110px; object-fit: cover; display: block; }
.dp-thumb-cap { padding: 6px 9px; font-size: .76rem; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-thumb-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(220,38,38,.92); color: #fff; cursor: pointer; font-size: .75rem; line-height: 1; }
.dp-main { flex: 1; min-width: 0; }
.dp-pic-wrap { border-radius: 14px; overflow: hidden; background: #0f172a; text-align: center; }
.dp-pic { max-width: 100%; max-height: 380px; display: block; margin: 0 auto; }
.dp-pic-title { padding: 8px 14px; font-size: .9rem; font-weight: 800; color: #fff; background: #1e293b; }
.dp-tabs { display: flex; gap: 8px; margin: 14px 0 12px; }
.dp-tab { padding: 8px 16px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #fff; font-family: inherit; font-size: .85rem; font-weight: 800; color: #475569; cursor: pointer; }
.dp-tab.on { background: #ea580c; color: #fff; border-color: #ea580c; }
.dp-hint, .dp-sample-intro { font-size: .85rem; color: #64748b; line-height: 1.55; margin-bottom: 10px; }
.dp-textarea { width: 100%; box-sizing: border-box; padding: 12px; border: 1.5px solid #cbd5e1; border-radius: 12px; font-family: inherit; font-size: .92rem; line-height: 1.6; resize: vertical; outline: none; color: #1e293b; }
.dp-textarea:focus { border-color: #ea580c; box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
.dp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dp-btn { padding: 9px 16px; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #fff; font-family: inherit; font-size: .86rem; font-weight: 800; color: #475569; cursor: pointer; }
.dp-btn.on { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.dp-btn-primary { background: #ea580c; color: #fff; border-color: #ea580c; }
.dp-btn-primary:hover { filter: brightness(.94); }
.dp-grade-result { margin-top: 16px; }
.dp-grading { padding: 24px; text-align: center; color: #7c3aed; font-weight: 700; }
.dp-grade-err { padding: 16px; color: #dc2626; font-weight: 700; }
.dp-band { display: inline-flex; flex-direction: column; align-items: center; padding: 10px 22px; border-radius: 14px; background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; margin-bottom: 12px; }
.dp-band-num { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.dp-band-lbl { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; opacity: .9; }
.dp-gr-overall { font-size: .92rem; line-height: 1.6; color: #334155; margin-bottom: 14px; padding: 12px 14px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #7c3aed; }
.dp-gr-crits { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; margin-bottom: 14px; }
.dp-gr-crit { padding: 11px 13px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.dp-gr-crit-hd { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: #1e293b; }
.dp-gr-score { font-weight: 900; color: #7c3aed; background: #f3e8ff; padding: 2px 10px; border-radius: 999px; }
.dp-gr-crit-fb { font-size: .8rem; color: #64748b; line-height: 1.5; margin-top: 5px; }
.dp-gr-lbl { font-size: .82rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.dp-gr-improved { margin-bottom: 14px; padding: 12px 14px; background: #f0fdf4; border-radius: 10px; border-left: 4px solid #16a34a; }
.dp-gr-improved-txt { font-size: .9rem; line-height: 1.65; color: #14532d; }
.dp-gr-tips ul { margin: 0; padding-left: 20px; }
.dp-gr-tips li { font-size: .88rem; line-height: 1.6; color: #334155; margin-bottom: 4px; }
@media (max-width: 760px) { .dp-layout { flex-direction: column; } .dp-list { flex-direction: row; flex: none; max-height: none; overflow-x: auto; width: 100%; } .dp-thumb { flex: 0 0 130px; } }
.spk-hub-card--describe .spk-hub-icon { background: linear-gradient(135deg,#ffedd5,#fed7aa); }

/* ── VL progress: date picker calendar ── */
.vl-prog-nav { position: relative; }
.vl-prog-date-btn { background: none; border: none; cursor: pointer; font: inherit; font-weight: 700; color: inherit; padding: 3px 8px; border-radius: 7px; transition: background .12s; }
.vl-prog-date-btn:hover { background: rgba(124,58,237,.1); }
.vl-prog-cal { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; z-index: 60; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.2); padding: 12px; width: 272px; font-family: 'Nunito', sans-serif; }
.vl-cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vl-cal-mon { font-weight: 800; color: #1e293b; font-size: .9rem; }
.vl-cal-nav { border: none; background: #f1f5f9; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 1.05rem; color: #475569; }
.vl-cal-nav:hover { background: #e2e8f0; }
.vl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.vl-cal-dow { text-align: center; font-size: .66rem; font-weight: 800; color: #94a3b8; padding: 3px 0; }
.vl-cal-day { border: none; background: none; aspect-ratio: 1; border-radius: 8px; cursor: pointer; font-size: .8rem; font-weight: 700; color: #334155; position: relative; padding: 0; }
.vl-cal-day:hover:not([disabled]) { background: #ede9fe; }
.vl-cal-today { outline: 2px solid #a78bfa; outline-offset: -2px; }
.vl-cal-sel { background: #7c3aed !important; color: #fff !important; }
.vl-cal-active::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #16a34a; }
.vl-cal-sel.vl-cal-active::after { background: #fff; }
.vl-cal-future, .vl-cal-day[disabled] { color: #cbd5e1; cursor: default; }
.vl-cal-legend { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: .7rem; color: #64748b; }
.vl-cal-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; display: inline-block; }

/* ── Describe Pictures: bài mẫu đã lưu (parse từ ChatGPT) ── */
.dp-saved-sample { margin-bottom: 14px; }
.dp-smp-essay { font-size: .95rem; line-height: 1.75; color: #1e293b; padding: 14px 16px; background: #fff7ed; border-radius: 12px; border-left: 4px solid #ea580c; }
.dp-smp-sec-title { font-size: .9rem; font-weight: 800; color: #0f172a; margin: 16px 0 8px; }
.dp-smp-struct { padding: 10px 13px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; margin-bottom: 8px; }
.dp-smp-pattern { font-weight: 800; color: #7c3aed; font-size: .88rem; }
.dp-smp-example { font-style: italic; color: #334155; font-size: .86rem; line-height: 1.5; margin-top: 4px; }
.dp-smp-note { font-size: .8rem; color: #64748b; margin-top: 3px; }
.dp-smp-vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 7px; }
.dp-smp-word { padding: 8px 11px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fff; font-size: .85rem; }
.dp-smp-word b { color: #ea580c; }
.dp-smp-word span { color: #64748b; }
.dp-admin-sample { margin-top: 14px; border: 1.5px dashed #cbd5e1; border-radius: 12px; padding: 6px 14px 14px; background: #fafafa; }
.dp-admin-sample > summary { cursor: pointer; font-weight: 800; color: #475569; padding: 8px 0; font-size: .85rem; }
.dp-paste-lbl { font-size: .82rem; font-weight: 800; color: #ea580c; margin: 14px 0 8px; }

/* ── Describe Pictures: bố cục 2 cột giống Sample bank ── */
.dp-smp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dp-smp-tb-btn { border: 1px solid #e2e8f0; background: #fff; color: #334155; font-weight: 700; font-size: .82rem; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .12s, border-color .12s; }
.dp-smp-tb-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.dp-smp-tb-btn:disabled { opacity: .6; cursor: default; }
.dp-smp-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.dp-smp-essay-col { font-size: 1rem; }
.dp-smp-para { font-size: inherit; line-height: 1.85; color: #1e293b; margin: 0 0 16px; }
.dp-smp-side { background: #faf5ff; border: 1px solid #ede9fe; border-radius: 14px; padding: 14px; position: sticky; top: 8px; max-height: calc(100vh - 120px); overflow-y: auto; }
.dp-smp-panel-title { font-size: .82rem; font-weight: 800; color: #7c3aed; letter-spacing: .4px; margin-bottom: 10px; }
.dp-smp-struct { padding: 11px 12px; border: 1px solid #efe7fb; border-radius: 11px; background: #fff; margin-bottom: 9px; }
.dp-smp-pattern { font-weight: 800; color: #c2410c; font-size: .86rem; line-height: 1.4; }
.dp-smp-note { font-size: .8rem; color: #64748b; margin-top: 4px; }
.dp-smp-example { font-style: italic; color: #475569; font-size: .83rem; line-height: 1.5; margin-top: 4px; }
.dp-smp-vocab { display: flex; flex-direction: column; gap: 6px; }
.dp-smp-word { padding: 8px 11px; border: 1px solid #efe7fb; border-radius: 9px; background: #fff; font-size: .85rem; }
.dp-smp-word b { color: #c2410c; }
.dp-smp-word span { color: #64748b; }
@media (max-width: 820px) {
  .dp-smp-layout { grid-template-columns: 1fr; }
  .dp-smp-side { position: static; max-height: none; }
}

/* ── Describe Pictures: thẻ cấu trúc bấm được + tô sáng câu ── */
.dp-smp-struct { cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.dp-smp-struct:hover { border-color: #c4b5fd; box-shadow: 0 3px 12px rgba(124,58,237,.12); }
.dp-smp-struct.active { border-color: #7c3aed; background: #f5f3ff; box-shadow: 0 3px 14px rgba(124,58,237,.18); }
.dp-smp-hl { background: #fde68a; color: #1e293b; border-radius: 4px; padding: 1px 2px; box-shadow: 0 0 0 2px #fde68a; animation: dpHlPulse .6s ease; }
@keyframes dpHlPulse { 0% { background: #fbbf24; } 100% { background: #fde68a; } }

/* ── Writing: trợ lý tạo bài mẫu bằng ChatGPT ── */
.wr-gpt-box { border: 1.5px dashed #6ee7b7; border-radius: 12px; padding: 6px 14px 14px; margin: 10px 0 16px; background: rgba(16,185,129,.06); }
.wr-gpt-box > summary { cursor: pointer; font-weight: 800; color: #059669; padding: 8px 0; font-size: .9rem; list-style: none; }
.wr-gpt-box > summary::-webkit-details-marker { display: none; }
.wr-gpt-box > summary::before { content: '▸ '; }
.wr-gpt-box[open] > summary::before { content: '▾ '; }
.wr-gpt-hint { font-size: .82rem; color: #475569; line-height: 1.6; margin: 4px 0 8px; }

/* ── Writing: vùng dán ảnh Task 1 ── */
.wr-sm-paste-zone { border: 1.5px dashed #93c5fd; border-radius: 10px; padding: 14px; text-align: center; color: #2563eb; font-size: .85rem; background: rgba(59,130,246,.06); cursor: pointer; margin-bottom: 8px; outline: none; transition: background .12s, border-color .12s; }
.wr-sm-paste-zone:focus { border-color: #2563eb; background: rgba(59,130,246,.12); }
.wr-sm-paste-zone.wr-paste-ok { border-color: #22c55e; color: #16a34a; background: rgba(34,197,94,.08); }
.wr-sm-img-name { font-size: .8rem; color: #16a34a; margin-top: 6px; }
#wrSmPastePreview img { max-width: 280px; max-height: 180px; border-radius: 8px; border: 1px solid #e2e8f0; display: block; }

/* ── Writing Task 1: bài viết song song với ảnh ── */
.wr-t1-split { display: grid; grid-template-columns: minmax(280px, 42%) 1fr; gap: 16px; align-items: start; margin-top: 6px; }
.wr-t1-split .wr-t1-left { position: sticky; top: 8px; }
.wr-t1-split .wr-t1-right { min-width: 0; }
.wr-t1-split .wr-sample-details { margin-top: 0; }
.wr-t1-split .wr-sample-img { max-width: 100%; }
@media (max-width: 860px) {
  .wr-t1-split { grid-template-columns: 1fr; }
  .wr-t1-split .wr-t1-left { position: static; }
}

.wr-notes-body { line-height: 1.7; font-size: .9rem; }

/* ── Writing: panel "Cấu trúc câu hay" (bật từ toolbar) ── */
.wr-essay-wrap.wr-struct-open { padding-right:300px; }
.wr-struct-panel-btn {
  background:none; border:1.5px solid #fcd34d; color:#b45309;
  border-radius:8px; padding:3px 11px; font-size:.78rem; font-weight:700;
  cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .15s,color .15s;
  display:inline-flex; align-items:center; gap:5px;
}
.wr-struct-panel-btn:hover { background:#fffbeb; }
.wr-struct-panel-btn.wr-struct-panel-btn-on { background:#f59e0b; color:#fff; border-color:#f59e0b; }
.wr-struct-panel {
  display:none; position:absolute; right:0; top:0; bottom:0; width:282px;
  background:linear-gradient(160deg,#fffbeb 0%,#fef3c7 100%);
  border:1.5px solid #fcd34d; border-radius:14px;
  box-shadow:0 4px 18px rgba(245,158,11,.16); overflow:hidden; z-index:11;
}
.wr-struct-panel.active { display:block; }
.wr-struct-panel-inner { height:100%; box-sizing:border-box; overflow-y:auto; padding:14px; }
.wr-struct-panel-head { margin-bottom:10px; padding-bottom:8px; border-bottom:1.5px solid #fde68a; }
.wr-struct-panel-title { font-size:.82rem; font-weight:800; color:#b45309; }
.wr-struct-card {
  display:flex; gap:9px; background:#fff; border:1px solid #fde68a; border-radius:11px;
  padding:10px 11px; margin-bottom:9px; transition:border-color .12s, box-shadow .12s;
}
.wr-struct-card[onclick] { cursor:pointer; }
.wr-struct-card[onclick]:hover { border-color:#f59e0b; box-shadow:0 3px 12px rgba(245,158,11,.18); }
.wr-struct-num {
  flex:none; width:22px; height:22px; border-radius:50%; background:#f59e0b; color:#fff;
  font-size:.74rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.wr-struct-main { min-width:0; }
.wr-struct-pattern { font-weight:800; color:#c2410c; font-size:.84rem; line-height:1.4; }
.wr-struct-note { font-size:.78rem; color:#64748b; margin-top:4px; }
.wr-struct-ex { font-style:italic; color:#475569; font-size:.81rem; line-height:1.5; margin-top:4px; }
.wr-struct-hl { background:#fde68a; color:#1e293b; border-radius:4px; padding:1px 2px; box-shadow:0 0 0 2px #fde68a; }
@media (max-width:980px) {
  .wr-essay-wrap.wr-struct-open { padding-right:0; }
  .wr-struct-panel { position:static; width:auto; bottom:auto; margin-top:12px; }
}
.wr-overlay.wr-dark .wr-struct-panel { background:linear-gradient(160deg,#3a2e10 0%,#2a2208 100%); border-color:#a16207; }
.wr-overlay.wr-dark .wr-struct-card { background:rgba(255,255,255,.05); border-color:#a16207; }

/* ── Writing: nút ẩn/hiện khung danh sách bài tập ── */
.wr-collapse-btn {
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  background:#eef2ff; border:1.5px solid #c7d2fe; color:#4338ca;
  border-radius:8px; padding:5px 11px; font-size:.8rem; font-weight:700;
  cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .15s,border-color .15s;
}
.wr-collapse-btn:hover { background:#e0e7ff; border-color:#a5b4fc; }
.wr-collapse-btn.wr-collapse-on { background:#4f46e5; color:#fff; border-color:#4f46e5; }
.wr-body.wr-left-collapsed .wr-left,
.wr-body.wr-left-collapsed .wr-resizer { display:none; }
.wr-overlay.wr-dark .wr-collapse-btn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#c7d2fe; }
.wr-overlay.wr-dark .wr-collapse-btn.wr-collapse-on { background:#6366f1; color:#fff; }
@media (max-width:560px){ .wr-collapse-btn span { display:none; } }

/* ── Mix Test: giải thích cấu trúc đúng/sai khi trả lời sai ── */
.ss-mix-explain { margin-top: 10px; padding-top: 9px; border-top: 1px dashed rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 6px; font-size: .9rem; line-height: 1.5; }
.ss-mix-exp-ok { color: #166534; }
.ss-mix-exp-bad { color: #b91c1c; }
.ss-mix-exp-ok b, .ss-mix-exp-bad b { font-weight: 800; }

/* ── Word Typing (gõ từ) ── */
.wt-overlay { position: fixed; inset: 0; z-index: 10010; background: #f8fafc; display: none; flex-direction: column; }
.wt-overlay.active { display: flex; }
.wt-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1.5px solid #e2e8f0; background: #fff; flex-shrink: 0; }
.wt-back { background: #eef2ff; border: 1.5px solid #c7d2fe; color: #4338ca; border-radius: 9px; padding: 6px 13px; font-weight: 700; font-size: .85rem; cursor: pointer; font-family: inherit; }
.wt-back:hover { background: #e0e7ff; }
.wt-title { font-size: 1.05rem; font-weight: 800; color: #1e293b; }
.wt-body { flex: 1; overflow-y: auto; padding: 24px 18px; }
/* Setup */
.wt-setup { max-width: 460px; margin: 12px auto; background: #fff; border: 1.5px solid #eef0f5; border-radius: 18px; padding: 26px 24px; box-shadow: 0 8px 30px rgba(15,23,42,.06); }
.wt-setup-title { font-size: 1.15rem; font-weight: 800; color: #1e293b; margin-bottom: 18px; text-align: center; }
.wt-field { margin-bottom: 16px; }
.wt-field > label { display: block; font-size: .82rem; font-weight: 700; color: #64748b; margin-bottom: 6px; }
.wt-seg { display: flex; gap: 8px; }
.wt-seg-btn { flex: 1; border: 1.5px solid #e2e8f0; background: #fff; color: #334155; font-weight: 700; font-size: .9rem; padding: 10px; border-radius: 11px; cursor: pointer; font-family: inherit; transition: all .12s; }
.wt-seg-btn.on { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.wt-sel { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 10px 12px; font-size: .92rem; font-family: inherit; background: #fff; color: #1e293b; }
.wt-setup-actions { margin-top: 20px; }
.wt-start-btn { width: 100%; background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; border: none; border-radius: 12px; padding: 13px; font-size: 1rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.wt-start-btn:hover { filter: brightness(1.06); }
.wt-setup-hint { text-align: center; font-size: .82rem; color: #94a3b8; margin-top: 12px; min-height: 18px; }
/* Game */
.wt-game { max-width: 920px; margin: 0 auto; }
.wt-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.wt-stat { font-size: .85rem; color: #64748b; font-weight: 600; }
.wt-stat b { color: #4f46e5; font-size: 1.05rem; }
.wt-restart { margin-left: auto; background: #1e293b; color: #fff; border: none; border-radius: 9px; padding: 7px 14px; font-weight: 700; font-size: .82rem; cursor: pointer; font-family: inherit; }
.wt-restart.wt-newset { margin-left: 0; background: #0ea5e9; }
.wt-restart:hover { filter: brightness(1.1); }
.wt-words { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 26px 28px; font-family: "Poppins","Segoe UI",sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 2.1; letter-spacing: .2px; min-height: 200px; max-height: 46vh; overflow-y: auto; overflow-x: hidden; cursor: text; white-space: normal; word-spacing: .2em; }
.wt-w { white-space: nowrap; display: inline-block; }
.wt-w-todo { color: #94a3b8; }
.wt-w-ok { color: #16a34a; }
.wt-w-bad { color: #dc2626; text-decoration: underline; text-decoration-color: #fca5a5; }
.wt-w-active { color: #94a3b8; background: #eef2ff; border-radius: 6px; padding: 0 2px; box-shadow: 0 0 0 2px #c7d2fe; }
.wt-c-ok { color: #16a34a; }
.wt-c-bad { color: #dc2626; background: #fee2e2; border-radius: 3px; }
.wt-c-cur { border-left: 2px solid #4f46e5; margin-left: -2px; animation: wtBlink 1s step-end infinite; }
@keyframes wtBlink { 50% { border-color: transparent; } }
.wt-capture { position: absolute; left: -9999px; opacity: 0; width: 1px; height: 1px; }
.wt-hint { font-size: .82rem; color: #94a3b8; margin-top: 12px; text-align: center; }
.wt-result { margin-top: 16px; padding: 12px; background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 12px; text-align: center; font-weight: 800; color: #166534; font-family: inherit; font-size: 1rem; }
.wr-hub-card--typing .wr-hub-ic { background: linear-gradient(135deg,#dbeafe,#bfdbfe); }
@media (max-width: 640px) { .wt-words { font-size: 1.2rem; padding: 18px; } }

.wt-restart.wt-speak { margin-left: auto; background: #fff; border: 1.5px solid #e2e8f0; color: #334155; padding: 7px 11px; font-size: 1rem; }
.wt-restart.wt-speak.on { background: #ede9fe; border-color: #c4b5fd; }
.wt-restart.wt-sound { background: #fff; border: 1.5px solid #e2e8f0; color: #334155; padding: 7px 11px; font-size: 1rem; margin-left: 8px; }
.wt-restart.wt-speak + .wt-restart,
.wt-restart.wt-sound + .wt-restart { margin-left: 8px; }

/* Combo điểm thưởng khi gõ đúng liên tiếp */
.wt-combo { position: absolute; top: 60px; right: 26px; background: linear-gradient(135deg,#f59e0b,#ef4444); color: #fff; font-weight: 800; font-size: 1.05rem; padding: 6px 15px; border-radius: 999px; box-shadow: 0 8px 22px rgba(239,68,68,.42); pointer-events: none; z-index: 6; animation: wtCombo .9s ease forwards; }
@keyframes wtCombo { 0% { transform: scale(.6) translateY(8px); opacity: 0; } 18% { transform: scale(1.18) translateY(0); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1) translateY(-14px); opacity: 0; } }

.wt-paste-ta { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 12px 14px; font-size: .95rem; font-family: inherit; line-height: 1.6; resize: vertical; color: #1e293b; background: #fff; }
.wt-paste-ta:focus { outline: none; border-color: #7c3aed; }

/* Word Typing: nút Dừng + bảng kết quả */
.wt-restart.wt-stop { background: #dc2626; }
.wt-restart.wt-stop:hover { background: #b91c1c; }
.wt-result-ov { position: fixed; inset: 0; background: rgba(248,250,252,.88); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10030; }
.wt-result-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 26px 28px; box-shadow: 0 18px 50px rgba(15,23,42,.18); max-width: 460px; width: 100%; text-align: center; }
.wt-result-ttl { font-size: 1.3rem; font-weight: 800; color: #1e293b; margin-bottom: 18px; }
.wt-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.wt-rs { background: #f8fafc; border: 1.5px solid #eef0f5; border-radius: 13px; padding: 12px 6px; }
.wt-rs b { display: block; font-size: 1.45rem; font-weight: 800; color: #4f46e5; line-height: 1.2; }
.wt-rs span { font-size: .76rem; color: #64748b; font-weight: 600; }
.wt-rs.wt-rs-ok b { color: #16a34a; }
.wt-rs.wt-rs-bad b { color: #dc2626; }
.wt-result-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wt-result-actions .wt-start-btn { width: auto; padding: 11px 22px; }

/* ═══ Word Typing — redesign (pill stats + soft purple bg) ═══ */
.wt-overlay { background: linear-gradient(135deg, #ece9fb 0%, #f4f1fe 45%, #faf6ff 100%); }
.wt-topbar { background: transparent; border-bottom: none; backdrop-filter: none; padding: 14px 20px; }
.wt-body { padding: 8px 18px 28px; }
.wt-game { max-width: 980px; }
/* Thanh thống kê + nút */
.wt-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.wt-tb-spacer { flex: 1 1 auto; }
.wt-stat { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; line-height: 1; }
.wt-stat b { font-size: 1rem; font-weight: 800; }
.wt-st-wpm  { background: #fef3c7; color: #b45309; }
.wt-st-acc  { background: #dcfce7; color: #15803d; }
.wt-st-time { background: #dbeafe; color: #1d4ed8; }
.wt-st-prog { background: #ede9fe; color: #6d28d9; }
/* Nút icon tròn */
.wt-icbtn { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: #4338ca; transition: filter .12s, transform .12s; }
.wt-icbtn:hover { filter: brightness(.96); }
.wt-icbtn.wt-speak { background: #ede9fe; }
.wt-icbtn.wt-speak.on { background: #7c3aed; color: #fff; }
.wt-icbtn.wt-sound { background: #dbeafe; }
/* Nút pill */
.wt-pill { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: .86rem; padding: 9px 18px; border-radius: 999px; transition: filter .12s, transform .12s; }
.wt-pill:hover { filter: brightness(.97); }
.wt-pill:active { transform: translateY(1px); }
.wt-pill.wt-stop { background: #fee2e2; color: #dc2626; }
.wt-pill.wt-rs-btn { background: #eef1f6; color: #475569; }
.wt-pill.wt-newset { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; box-shadow: 0 6px 16px rgba(124,58,237,.32); }
/* Khung gõ chữ */
.wt-words { border: none; border-radius: 24px; padding: 30px 34px; box-shadow: 0 18px 50px rgba(99,102,241,.12); max-height: 52vh; }
.wt-w-active { background: #ede9fe; box-shadow: 0 0 0 2px #c4b5fd; }
.wt-hint { color: #8b8aa3; }
.wt-hint b { color: #6d28d9; }
.wt-hl-ok { color: #16a34a; font-weight: 700; }
.wt-hl-bad { color: #dc2626; font-weight: 700; }
@media (max-width: 640px) { .wt-tb-spacer { flex-basis: 100%; height: 0; } }

/* ══ OTHER RESOURCES & LEARNING MATERIALS ════════════════════════════ */
.or-overlay {
  display: none; position: fixed; inset: 0;
  background: #f0fdfa; z-index: 9998;
  flex-direction: column; overflow: hidden;
}
.or-overlay.active { display: flex; }
.or-header {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 9px 16px; border-bottom: 1.5px solid #99f6e4;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
}
.or-back-btn {
  padding: 5px 13px; border-radius: 8px; border: 1.5px solid #99f6e4;
  background: #fff; cursor: pointer; font-size: .86rem; color: #0f766e;
  transition: all .13s; white-space: nowrap;
}
.or-back-btn:hover { background: #ecfeff; border-color: #0f766e; }
.or-title { font-weight: 800; font-size: 1.05rem; color: #0f766e; }
.or-add-btn {
  margin-left: auto; padding: 6px 15px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff;
  font-weight: 800; font-size: .82rem; cursor: pointer; transition: filter .13s;
}
.or-add-btn:hover { filter: brightness(1.08); }
.or-body { flex: 1; overflow-y: auto; min-height: 0; }
.or-content { max-width: 1100px; margin: 0 auto; padding: 22px 18px 60px; }
.or-empty {
  text-align: center; color: #64748b; font-size: 1rem; font-weight: 600;
  padding: 70px 20px; line-height: 1.7;
}
.or-cat { margin-bottom: 30px; }
.or-cat-head {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.15rem;
  color: #0f172a; margin-bottom: 14px;
  padding-bottom: 9px; border-bottom: 2px solid #e2e8f0;
}
.or-cat-ic { font-size: 1.25rem; }
.or-cat-count {
  font-size: .72rem; font-weight: 800; color: #0f766e;
  background: #ccfbf1; border-radius: 999px; padding: 2px 9px;
}
.or-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.or-card {
  position: relative; border-radius: 15px; background: #fff;
  border: 1.5px solid #e2e8f0; border-left: 5px solid #94a3b8;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.or-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(15,23,42,.12); }
.or-card-link { display: block; padding: 15px 16px; text-decoration: none; color: inherit; }
.or-card-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem; color: #0f172a; line-height: 1.3; }
.or-card-desc { font-size: .82rem; color: #475569; margin-top: 6px; line-height: 1.5; }
.or-card-host { font-size: .72rem; color: #0f766e; margin-top: 10px; font-weight: 700; word-break: break-all; }
.or-card-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .13s; }
.or-card:hover .or-card-tools { opacity: 1; }
.or-mini-btn {
  width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.15);
  font-size: .82rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.or-mini-btn:hover { background: #f1f5f9; }
.or-mini-btn.or-del:hover { background: #fee2e2; }
/* Category accent colors (left border) */
.or-cat-toeic      { border-left-color: #0ea5e9; }
.or-cat-ielts      { border-left-color: #dc2626; }
.or-cat-grammar    { border-left-color: #16a34a; }
.or-cat-vocabulary { border-left-color: #7c3aed; }
.or-cat-mixed      { border-left-color: #f59e0b; }

/* Add/Edit dialog */
.or-form-dialog {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(15,23,42,.45); align-items: center; justify-content: center; padding: 16px;
}
.or-form-dialog.active { display: flex; }
.or-form-inner {
  width: 100%; max-width: 460px; background: #fff; border-radius: 18px;
  padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.or-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.or-form-head span { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.2rem; color: #0f172a; }
.or-form-x { border: none; background: #f1f5f9; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; color: #64748b; }
.or-form-x:hover { background: #e2e8f0; }
.or-field { display: block; margin-bottom: 13px; }
.or-field > span { display: block; font-size: .8rem; font-weight: 700; color: #334155; margin-bottom: 5px; }
.or-field input, .or-field select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid #cbd5e1; font-size: .9rem; font-family: inherit; background: #fff;
}
.or-field input:focus, .or-field select:focus { outline: none; border-color: #14b8a6; }
.or-form-actions { display: flex; gap: 10px; margin-top: 18px; }
.or-save-btn {
  flex: 1; padding: 11px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; font-weight: 800; font-size: .9rem;
}
.or-save-btn:hover { filter: brightness(1.08); }
.or-cancel-btn {
  padding: 11px 18px; border-radius: 10px; border: 1.5px solid #cbd5e1; cursor: pointer;
  background: #fff; color: #475569; font-weight: 700; font-size: .9rem;
}
.or-cancel-btn:hover { background: #f8fafc; }
@media (max-width: 600px) {
  .or-title { font-size: .92rem; }
  .or-cards { grid-template-columns: 1fr; }
}

/* ── Sample Passages: topic / title search (step 2) ── */
.topic-search-wrap { position: relative; display: flex; align-items: center; margin: 2px 0 16px; max-width: 520px; }
.topic-search-icon { position: absolute; left: 15px; font-size: .95rem; pointer-events: none; opacity: .7; }
.topic-search-input {
  width: 100%; box-sizing: border-box; padding: 11px 40px 11px 42px;
  border-radius: 999px; border: 1.5px solid var(--border, #e2ddd5);
  background: var(--surface, #fff); color: var(--ink, #1f2937);
  font-size: .9rem; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.topic-search-input:focus { outline: none; border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.16); }
.topic-search-input::placeholder { color: var(--muted, #9e9890); }
.topic-search-clear {
  position: absolute; right: 8px; width: 27px; height: 27px; border: none; border-radius: 50%;
  background: transparent; color: var(--muted, #9e9890); cursor: pointer; font-size: .8rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.topic-search-clear:hover { background: rgba(148,163,184,.2); }
.topic-search-results { margin: 2px 0 18px; max-width: 660px; }
.ts-res-head, .ts-empty { font-size: .8rem; font-weight: 700; color: var(--muted, #64748b); padding: 6px 2px 8px; }
.ts-res-item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 15px; margin-bottom: 7px;
  border-radius: 12px; border: 1.5px solid var(--border, #e2e8f0); background: var(--surface, #fff);
  cursor: pointer; transition: border-color .13s, transform .13s, box-shadow .13s;
}
.ts-res-item:hover { border-color: #14b8a6; transform: translateX(3px); box-shadow: 0 3px 12px rgba(20,184,166,.14); }
.ts-res-title { font-weight: 800; font-size: .92rem; color: var(--ink, #0f172a); }
.ts-res-meta { font-size: .76rem; color: var(--muted, #64748b); font-weight: 600; }

/* ── Other Resources: extra categories + personal items ── */
.or-cat-listening  { border-left-color: #0d9488; }
.or-cat-reading    { border-left-color: #2563eb; }
.or-card-mine { background: linear-gradient(0deg, rgba(20,184,166,.06), rgba(20,184,166,.06)), var(--surface, #fff); }
.or-mine-badge {
  display: inline-block; vertical-align: middle; margin-left: 4px;
  font-size: .62rem; font-weight: 800; color: #0f766e; background: #ccfbf1;
  border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.or-share-field { cursor: pointer; }
.or-share-field input { cursor: pointer; }

/* ── Word Typing: bộ chọn cách phát âm (US/UK/giọng hệ thống) ── */
.wt-voice-sel {
  height: 40px; max-width: 200px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #c7d2fe; background: #eef2ff; color: #4338ca;
  font-family: inherit; font-weight: 700; font-size: .82rem;
  padding: 0 30px 0 14px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: filter .12s, border-color .12s;
}
.wt-voice-sel:hover { filter: brightness(.97); border-color: #a5b4fc; }
.wt-voice-sel:focus { outline: none; border-color: #6366f1; }

/* ── Collocations: phân tích đoạn văn (Premium) ── */
.co-passage-btn { background: linear-gradient(135deg, #10b981, #0d9488) !important; color: #fff !important; border-color: transparent !important; }
.co-pa-ov {
  position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.5); padding: 16px;
}
.co-pa-box {
  width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column;
  background: var(--surface, #fff); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.co-pa-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; background: linear-gradient(135deg, #10b981, #0d9488); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.05rem;
}
.co-pa-x { border: none; background: rgba(255,255,255,.22); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.co-pa-x:hover { background: rgba(255,255,255,.35); }
.co-pa-body { padding: 16px 18px 20px; overflow-y: auto; }
.co-pa-ta {
  width: 100%; box-sizing: border-box; border-radius: 12px; border: 1.5px solid var(--border, #cbd5e1);
  padding: 12px 14px; font-size: .95rem; font-family: inherit; line-height: 1.55; resize: vertical;
  background: var(--surface, #fff); color: var(--ink, #1f2937);
}
.co-pa-ta:focus { outline: none; border-color: #10b981; }
.co-pa-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.co-pa-btn {
  border: 1.5px solid var(--border, #cbd5e1); background: var(--surface, #fff); color: var(--ink, #334155);
  border-radius: 999px; padding: 9px 18px; font-weight: 800; font-size: .88rem; cursor: pointer; font-family: inherit;
}
.co-pa-btn:hover { filter: brightness(.98); }
.co-pa-btn-primary { background: linear-gradient(135deg, #10b981, #0d9488); color: #fff; border-color: transparent; }
.co-pa-test-btn { background: #fff7ed; color: #ea580c; border-color: #fdba74; }
.co-pa-progress, .co-pa-empty { padding: 18px 4px; color: var(--muted, #64748b); font-weight: 600; font-size: .9rem; }
.co-pa-found-hd { margin: 16px 0 10px; font-weight: 900; color: #0d9488; font-size: .95rem; }
.co-pa-list { display: flex; flex-direction: column; gap: 10px; }
.co-pa-item { border: 1.5px solid var(--border, #e2e8f0); border-left: 4px solid #10b981; border-radius: 12px; padding: 10px 13px; background: var(--surface2, #faf9f6); }
.co-pa-phrase { font-weight: 800; color: var(--ink, #0f172a); font-size: .98rem; }
.co-pa-lv { font-size: .68rem; font-weight: 800; color: #0d9488; background: #ccfbf1; border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.co-pa-mean { color: #b45309; font-size: .86rem; margin-top: 3px; }
.co-pa-def { color: var(--ink, #334155); font-size: .84rem; margin-top: 5px; line-height: 1.5; }
.co-pa-def b { color: #0d9488; }
.co-pa-ex { color: var(--muted, #475569); font-size: .84rem; margin-top: 5px; font-style: italic; }
.co-pa-ex mark { background: #fde68a; color: inherit; padding: 0 2px; border-radius: 3px; }
@media (max-width: 600px) { .co-pa-box { max-height: 94vh; } }

/* ══ SHADOWING PRACTICE ══ */
.spk-hub-card--shadow .spk-hub-icon { background: #e0e7ff; }
.shp-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Setup */
.shp-setup { max-width: 760px; margin: 0 auto; padding: 26px 18px 40px; width: 100%; box-sizing: border-box; overflow-y: auto; }
.shp-set-row { margin-bottom: 20px; }
.shp-set-row > label { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #64748b); margin-bottom: 9px; }
.shp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shp-chip { padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--border, #cbd5e1); background: var(--surface, #fff); color: var(--ink, #334155); font-weight: 700; font-size: .88rem; cursor: pointer; transition: all .13s; }
.shp-chip.on { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border-color: transparent; }
.shp-paste { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1.5px solid var(--border, #cbd5e1); padding: 12px 14px; font-size: .95rem; font-family: inherit; line-height: 1.55; resize: vertical; background: var(--surface, #fff); color: var(--ink, #1f2937); }
.shp-paste:focus { outline: none; border-color: #6366f1; }
.shp-set-actions { margin-top: 14px; }
.shp-start-btn { padding: 11px 26px; border-radius: 999px; border: none; cursor: pointer; font-weight: 800; font-size: .95rem; background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.shp-sample-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.shp-sample { position: relative; border: 1.5px solid var(--border, #e2e8f0); border-radius: 12px; padding: 13px 15px; cursor: pointer; background: var(--surface, #fff); transition: border-color .13s, transform .13s, box-shadow .13s; }
.shp-sample:hover { border-color: #6366f1; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(79,70,229,.14); }
.shp-sample-title { font-weight: 800; color: var(--ink, #0f172a); font-size: .94rem; line-height: 1.35; }
.shp-sample-meta { font-size: .76rem; color: var(--muted, #64748b); margin-top: 6px; font-weight: 600; }
.shp-sample-locked { opacity: .7; }
.shp-lock { position: absolute; top: 8px; right: 10px; font-size: .85rem; }
.shp-loading, .shp-empty { padding: 30px 6px; color: var(--muted, #64748b); font-weight: 600; }
/* Practice */
.shp-wrap { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.shp-list { width: 320px; flex-shrink: 0; border-right: 1.5px solid var(--border, #e2e8f0); overflow-y: auto; padding: 12px; background: var(--surface2, #faf9f6); }
.shp-list-hd { font-weight: 800; color: var(--muted, #64748b); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px 10px; }
.shp-list-count { background: #e0e7ff; color: #4f46e5; border-radius: 999px; padding: 1px 8px; font-size: .72rem; }
.shp-sent { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; border-radius: 10px; cursor: pointer; margin-bottom: 6px; transition: background .12s; }
.shp-sent:hover { background: rgba(99,102,241,.08); }
.shp-sent.on { background: #eef2ff; box-shadow: inset 0 0 0 1.5px #6366f1; }
.shp-sent.done .shp-sent-num { background: #16a34a; }
.shp-sent-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #94a3b8; color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.shp-sent-txt { font-size: .86rem; color: var(--ink, #334155); line-height: 1.45; }
.shp-sent-reps { margin-left: auto; flex-shrink: 0; font-size: .72rem; font-weight: 800; color: #4f46e5; }
.shp-stage { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 60px 24px 24px; background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff; text-align: center; }
.shp-stage-top { position: absolute; top: 16px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.shp-pos { font-size: 1.1rem; font-weight: 800; opacity: .9; }
.shp-mini { border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 1rem; }
.shp-big { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1.2; max-width: 1100px; }
.shp-reps { font-size: 1.4rem; font-weight: 900; }
.shp-reps span { font-size: .82rem; font-weight: 600; opacity: .8; display: block; margin-top: 2px; }
.shp-ctrls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.shp-ctrls button { border: none; cursor: pointer; font-weight: 800; font-family: inherit; border-radius: 999px; transition: filter .12s, transform .12s; }
.shp-ctrls button:disabled { opacity: .4; cursor: default; }
.shp-ctrls button:not(:disabled):hover { filter: brightness(1.06); }
.shp-arrow { width: 50px; height: 50px; border-radius: 14px !important; background: rgba(255,255,255,.16); color: #fff; font-size: 1.3rem; }
.shp-play { padding: 13px 26px; background: #fff; color: #1e40af; font-size: 1rem; }
.shp-rec { padding: 13px 24px; background: #f59e0b; color: #fff; font-size: 1rem; }
.shp-rec.on { background: #dc2626; animation: shpPulse 1.1s infinite; }
@keyframes shpPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); } 50% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } }
.shp-replay { padding: 13px 22px; background: rgba(255,255,255,.18); color: #fff; font-size: 1rem; }
.shp-hint { min-height: 20px; font-size: .82rem; opacity: .85; }
/* Fullscreen / wide mode: ẩn danh sách câu */
.shp-wrap.shp-full .shp-list { display: none; }
@media (max-width: 760px) {
  .shp-wrap { flex-direction: column; }
  .shp-list { width: 100%; max-height: 32vh; border-right: none; border-bottom: 1.5px solid var(--border, #e2e8f0); }
  .shp-stage-top { position: static; padding: 0; margin-bottom: 8px; }
  .shp-sample-list { grid-template-columns: 1fr; }
}

/* ── Collocations passage analyser: kết quả 2 cột màn hình rộng ── */
.co-pa-box.co-pa-box--wide { max-width: 1180px; width: 96vw; height: 88vh; max-height: 88vh; }
.co-pa-hd-actions { display: flex; align-items: center; gap: 8px; }
.co-pa-hd-actions .co-pa-btn { padding: 7px 14px; font-size: .82rem; }
.co-pa-2col { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.co-pa-passage {
  flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px;
  line-height: 2; font-size: 1.02rem; color: var(--ink, #1f2937);
  border-right: 1.5px solid var(--border, #e2e8f0); background: var(--surface, #fff);
}
.co-pa-hl {
  background: #fef08a; color: inherit; padding: 1px 3px; border-radius: 4px; cursor: pointer;
  border-bottom: 2px solid #facc15; transition: background .12s, box-shadow .12s;
}
.co-pa-hl:hover { background: #fde047; }
.co-pa-hl { scroll-margin: 24px; }
.co-pa-hl.on { background: #fb923c; color: #fff; border-bottom-color: #ea580c; box-shadow: 0 1px 6px rgba(234,88,12,.4); }
.co-pa-detail { width: 440px; flex-shrink: 0; overflow-y: auto; padding: 16px 16px 28px; background: var(--surface2, #faf9f6); }
.co-pa-detail-card { background: var(--surface, #fff); border: 1.5px solid var(--border, #e2e8f0); border-left: 4px solid #10b981; border-radius: 12px; padding: 14px 16px; }
.co-pa-card { border-radius: 14px; margin-bottom: 12px; transition: box-shadow .15s; scroll-margin: 12px; cursor: pointer; }
.co-pa-card.on { box-shadow: 0 0 0 2.5px #fb923c; }
@media (max-width: 820px) {
  .co-pa-box.co-pa-box--wide { width: 96vw; height: 90vh; }
  .co-pa-2col { flex-direction: column; }
  .co-pa-passage { border-right: none; border-bottom: 1.5px solid var(--border, #e2e8f0); max-height: 42%; }
  .co-pa-detail { width: 100%; box-sizing: border-box; }
}