:root{--bg:#eef1f7;--card:#fff;--text:#333;--muted:#888;--border:#ddd;--primary:#764ba2;--primary2:#667eea;--input:#fff;}
    body.dark{--bg:#12141d;--card:#1e2130;--text:#e8e8e8;--muted:#999;--border:#333;--primary:#a58ce0;--primary2:#7b8ff5;--input:#262a3d;}
    * { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',Arial,sans-serif; }
    body { background:var(--bg); min-height:100vh; color:var(--text); transition:0.3s; }
    .header { background:linear-gradient(135deg,var(--primary2),var(--primary)); color:#fff; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
    .header h1 { font-size:20px; }
    .header-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .user-chip { background:rgba(255,255,255,0.2); padding:6px 14px; border-radius:20px; font-size:13px; }
    .logout-btn,.dm-btn { background:rgba(255,255,255,0.25); padding:6px 12px; font-size:13px; border:none; color:#fff; border-radius:8px; cursor:pointer; }
    .timer { background:rgba(255,255,255,0.2); padding:8px 15px; border-radius:8px; font-weight:bold; font-size:18px; }
    .app-shell { display:flex; min-height:100vh; }
    .sidebar { width:230px; flex-shrink:0; background:linear-gradient(180deg,var(--primary2),var(--primary)); color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:20; }
    .sidebar-brand { padding:20px 18px; font-size:18px; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.2); }
    .sidebar-nav { flex:1; padding:12px 10px; }
    .side-tab { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; color:rgba(255,255,255,0.85); box-shadow:none; padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:600; margin-bottom:3px; border:none; cursor:pointer; }
    .side-tab:hover { background:rgba(255,255,255,0.12); }
    .side-tab.active { background:rgba(255,255,255,0.25); color:#fff; }
    .sidebar-footer { padding:12px; border-top:1px solid rgba(255,255,255,0.2); display:flex; flex-direction:column; gap:8px; }
    .sidebar-footer button,.sidebar-footer .user-chip { background:rgba(255,255,255,0.2); color:#fff; font-size:13px; padding:9px; text-align:center; border-radius:8px; }
    .main-area { flex:1; min-width:0; }
    .topbar { background:var(--card); padding:14px 22px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 10px rgba(0,0,0,0.05); position:sticky; top:0; z-index:5; gap:10px; flex-wrap:wrap; }
    .topbar h1 { font-size:17px; color:var(--text); }
    .menu-toggle { display:none; background:var(--primary); color:#fff; padding:8px 12px; border-radius:8px; border:none; cursor:pointer; }
    @media (max-width:820px){
        .sidebar { position:fixed; left:-240px; top:0; z-index:50; transition:left 0.25s; box-shadow:4px 0 20px rgba(0,0,0,0.25); }
        .sidebar.open { left:0; }
        .menu-toggle { display:inline-block; }
        .app-shell { display:block; }
    }
    .container { max-width:1050px; margin:20px auto; padding:0 15px; }
    .topbar-right { display:flex; align-items:center; gap:8px; }
    .icon-btn { background:var(--bg); color:var(--text); border:1px solid var(--border); width:38px; height:38px; padding:0; border-radius:10px; font-size:17px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .icon-btn:hover { background:var(--border); }
    .topbar .user-chip { background:var(--primary); color:#fff; padding:8px 14px; }
    .card { background:var(--card); border-radius:12px; padding:25px; margin-bottom:20px; box-shadow:0 4px 20px rgba(0,0,0,0.08); }
    h2 { color:var(--primary); margin-bottom:15px; }
    .subtitle { color:var(--muted); margin-bottom:20px; }
    label { font-weight:600; font-size:14px; color:var(--muted); display:block; margin-top:10px; }
    select, input, textarea { width:100%; padding:12px; margin:8px 0; border:2px solid var(--border); border-radius:8px; font-size:15px; background:var(--input); color:var(--text); font-family:inherit; }
    textarea { resize:vertical; min-height:70px; }
    button { background:var(--primary); color:#fff; border:none; padding:12px 20px; border-radius:8px; cursor:pointer; font-weight:bold; font-size:15px; transition:0.2s; }
    button:hover { opacity:0.9; }
    .btn-full { width:100%; margin-top:10px; }
    .tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
    .tab { flex:1; background:var(--card); color:var(--muted); min-width:95px; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
    .tab.active { background:var(--primary); color:#fff; }
    .test-layout { display:flex; gap:20px; flex-wrap:wrap; }
    .question-panel { flex:3; min-width:300px; }
    .palette-panel { flex:1; min-width:200px; }
    .question-text { font-size:18px; margin-bottom:20px; line-height:1.5; }
    .option { padding:14px; margin:10px 0; border:2px solid var(--border); border-radius:8px; cursor:pointer; transition:0.2s; }
    .option:hover { border-color:var(--primary); }
    .option.selected { border-color:var(--primary); background:rgba(118,75,162,0.12); }
    .palette-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px; }
    .pal-btn { padding:10px 0; border-radius:6px; border:2px solid var(--border); background:var(--input); color:var(--text); cursor:pointer; font-weight:bold; }
    .pal-btn.answered { background:#4caf50; color:#fff; border-color:#4caf50; }
    .pal-btn.review { background:#ff9800; color:#fff; border-color:#ff9800; }
    .pal-btn.current { border-color:var(--primary); border-width:3px; }
    .nav-btns { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
    .nav-btns button { flex:1; min-width:110px; }
    .btn-secondary { background:#ff9800; }
    .btn-danger { background:#f44336; }
    .btn-green { background:#4caf50; }
    .loading { text-align:center; padding:40px; color:var(--primary); }
    .spinner { border:4px solid var(--border); border-top:4px solid var(--primary); border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin:0 auto 15px; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(115px,1fr)); gap:15px; }
    .stat-box { padding:20px; border-radius:10px; text-align:center; }
    .stat-num { font-size:30px; font-weight:bold; }
    .stat-label { font-size:12px; opacity:0.85; margin-top:4px; }
    .hidden { display:none; }
    .badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:12px; background:var(--primary); color:#fff; }
    .result-review { border-left:4px solid var(--border); padding:12px; margin:10px 0; border-radius:6px; background:var(--bg); position:relative; }
    .bookmark-btn { position:absolute; top:10px; right:10px; background:none; color:#ff9800; padding:4px; font-size:18px; }
    .msg { text-align:center; padding:10px; margin:10px 0; border-radius:8px; }
    .msg.error { background:#ffebee; color:#f44336; }
    .msg.success { background:#e8f5e9; color:#4caf50; }
    .legend { display:flex; gap:15px; flex-wrap:wrap; margin-top:15px; font-size:13px; }
    .legend span { display:flex; align-items:center; gap:5px; }
    .dot { width:14px; height:14px; border-radius:3px; display:inline-block; }
    .row { display:flex; gap:10px; flex-wrap:wrap; }
    .row > * { flex:1; }
    .record-item { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--border); }
    .record-item:last-child { border-bottom:none; }
    .login-wrap { max-width:420px; margin:60px auto; }
    .login-card { background:var(--card); border-radius:16px; padding:35px; box-shadow:0 10px 40px rgba(118,75,162,0.2); }
    .logo-big { text-align:center; font-size:40px; margin-bottom:5px; }
    .login-card h2 { text-align:center; }
    .switch-link { text-align:center; margin-top:15px; color:var(--primary); cursor:pointer; font-size:14px; }
    .sw-circle { width:260px; height:260px; margin:20px auto; position:relative; }
    .sw-circle svg { transform:rotate(-90deg); }
    .sw-track { fill:none; stroke:var(--border); stroke-width:14; }
    .sw-progress { fill:none; stroke:url(#grad); stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset 0.3s; }
    .sw-center { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .sw-time { font-size:40px; font-weight:bold; color:var(--primary); }
    .sw-status { font-size:13px; color:var(--muted); margin-top:5px; text-transform:uppercase; letter-spacing:1px; }
    .sw-goal { text-align:center; color:var(--muted); margin-bottom:10px; font-size:14px; }
    .bar-chart { display:flex; align-items:flex-end; gap:8px; height:150px; padding:15px 0; }
    .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
    .bar { width:100%; background:linear-gradient(180deg,var(--primary),var(--primary2)); border-radius:6px 6px 0 0; min-height:4px; transition:height 0.5s; }
    .bar-label { font-size:11px; color:var(--muted); }
    .bar-val { font-size:10px; color:var(--primary); font-weight:bold; }
    .streak-flame { color:#ff6b35; font-weight:bold; }
    .mode-toggle { display:flex; gap:10px; margin-bottom:15px; }
    .mode-toggle button { flex:1; background:var(--card); color:var(--muted); border:2px solid var(--border); }
    .mode-toggle button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
    .badge-item { display:inline-block; margin:5px; padding:8px 14px; border-radius:20px; font-size:13px; background:var(--bg); border:2px solid var(--border); }
    .badge-item.earned { background:linear-gradient(135deg,#ffd700,#ffaa00); color:#333; border-color:#ffaa00; }
    .subj-perf { margin:10px 0; }
    .perf-bar-bg { background:var(--border); border-radius:10px; height:22px; overflow:hidden; }
    .perf-bar-fill { height:100%; border-radius:10px; display:flex; align-items:center; padding-left:10px; color:#fff; font-size:12px; font-weight:bold; }
    .hist-item { padding:14px; border:1px solid var(--border); border-radius:10px; margin-bottom:12px; }
    .cal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
    .cal-header button { padding:8px 14px; }
    .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
    .cal-dayname { text-align:center; font-size:12px; font-weight:bold; color:var(--muted); padding:5px 0; }
    .cal-cell { min-height:70px; border:1px solid var(--border); border-radius:8px; padding:5px; cursor:pointer; position:relative; transition:0.2s; font-size:12px; }
    .cal-cell:hover { border-color:var(--primary); }
    .cal-cell.empty { border:none; cursor:default; }
    .cal-cell.today { border:2px solid var(--primary); }
    .cal-date { font-weight:bold; }
    .cal-task { background:var(--primary); color:#fff; border-radius:4px; padding:2px 5px; margin-top:3px; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cal-task.done { background:#4caf50; text-decoration:line-through; }
    .task-list-item { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; }
    .task-list-item.done { opacity:0.6; }
    .task-check { width:22px; height:22px; cursor:pointer; }
    .del-btn { background:#f44336; padding:6px 12px; font-size:13px; margin-left:auto; }
    .mini-stat { display:inline-block; padding:3px 8px; border-radius:6px; font-size:12px; margin:2px; }
    .progress-wrap { margin-top:10px; }
    .progress-bg { background:var(--border); border-radius:10px; height:22px; overflow:hidden; }
    .progress-fill { height:100%; border-radius:10px; background:linear-gradient(90deg,var(--primary2),var(--primary)); display:flex; align-items:center; justify-content:flex-end; padding-right:8px; color:#fff; font-size:12px; font-weight:bold; transition:width 0.4s; }
    .task-note { font-size:12px; color:var(--muted); margin-top:4px; white-space:pre-wrap; }
    .countdown-banner { background:linear-gradient(135deg,#2c3e50,#4a5a7a); color:#fff; border-radius:12px; padding:20px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
    .countdown-banner.urgent { background:linear-gradient(135deg,#8e2a2a,#c0392b); }
    .countdown-banner.soon { background:linear-gradient(135deg,#a05a00,#e67e22); }
    .countdown-num { font-size:38px; font-weight:bold; line-height:1; }
    .countdown-edit { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .countdown-edit input { width:auto; margin:0; padding:8px; }
    .countdown-edit button { padding:8px 14px; font-size:13px; }
    .freeze-box { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.25); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
    .freeze-btn { background:rgba(255,255,255,0.25); font-size:13px; padding:8px 14px; }
    .freeze-btn:disabled { opacity:0.5; cursor:not-allowed; }
    .badge-item { display:inline-block; padding:8px 14px; margin:4px; border-radius:20px; font-size:13px; background:var(--bg); color:var(--muted); opacity:0.5; }
    .badge-item.earned { opacity:1; background:linear-gradient(135deg,#ffd700,#ffb300); color:#5a4200; font-weight:bold; }
    .badge-toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#ffd700,#ffb300); color:#5a4200; padding:14px 24px; border-radius:30px; font-weight:bold; box-shadow:0 6px 20px rgba(0,0,0,0.3); z-index:9999; animation:toastPop 0.4s ease; }
    @keyframes toastPop { from{transform:translateX(-50%) translateY(-40px);opacity:0;} to{transform:translateX(-50%) translateY(0);opacity:1;} }
    .analytics-filter { display:flex; gap:8px; margin-bottom:15px; flex-wrap:wrap; }
    .analytics-filter button { flex:1; min-width:80px; background:var(--bg); color:var(--muted); box-shadow:none; border:2px solid var(--border); }
    .analytics-filter button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
    .chapter-row { padding:10px 0; border-bottom:1px solid var(--border); }
    .chapter-row:last-child { border-bottom:none; }
    .weak-tag { font-size:11px; padding:2px 8px; border-radius:10px; background:#ffebee; color:#f44336; margin-left:6px; }
    .strong-tag { font-size:11px; padding:2px 8px; border-radius:10px; background:#e8f5e9; color:#4caf50; margin-left:6px; }
    .missed-task-item { padding:10px 12px; margin:6px 0; border-radius:8px; background:#fff3e0; border:2px dashed #ff9800; cursor:grab; display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .missed-task-item:active { cursor:grabbing; }
    body.dark .missed-task-item { background:#3a2c14; }
    .cal-cell.drag-over { outline:2px dashed var(--primary); outline-offset:-2px; background:rgba(118,75,162,0.12); }
    .sync-chip { font-size:11px; opacity:0.9; padding:4px 10px; background:rgba(255,255,255,0.2); border-radius:12px; }
    .doubt-box { border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:14px; background:var(--bg); }
    .doubt-q { font-weight:bold; margin-bottom:8px; }
    .doubt-a { font-size:14px; line-height:1.6; white-space:pre-wrap; }
    .doubt-history-item { padding:12px; border-radius:8px; background:var(--bg); margin-bottom:10px; cursor:pointer; }
    .doubt-history-item:hover { outline:2px solid var(--primary); }
    .batch-card { border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:15px; }
    .batch-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
    .batch-price { font-size:22px; font-weight:bold; color:var(--primary); }
    .batch-desc { color:var(--muted); font-size:14px; margin:8px 0; line-height:1.5; }
    .planner-table-row { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; align-items:center; }
    .planner-table-row:last-child { border-bottom:none; }
    .planner-date { font-size:12px; background:var(--bg); padding:4px 10px; border-radius:8px; white-space:nowrap; color:var(--muted); }
    .test-row { display:flex; justify-content:space-between; align-items:center; padding:12px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; gap:10px; flex-wrap:wrap; }
    .test-row.locked { opacity:0.7; }
    .lock-icon { font-size:16px; }
    .enrolled-tag { background:#e8f5e9; color:#4caf50; padding:4px 12px; border-radius:12px; font-size:12px; font-weight:bold; }
    .subtabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
    .subtab { flex:1; min-width:100px; background:var(--bg); color:var(--muted); box-shadow:none; border:2px solid var(--border); }
    .subtab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
    .breadcrumb { font-size:13px; color:var(--muted); margin-bottom:16px; }
    .breadcrumb .crumb { color:var(--primary); cursor:pointer; font-weight:600; }
    .breadcrumb .crumb:hover { text-decoration:underline; }
    .subject-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
    .subject-card { background:var(--bg); border-radius:12px; padding:26px 14px; text-align:center; cursor:pointer; font-weight:bold; font-size:15px; border:2px solid transparent; }
    .subject-card:hover { border-color:var(--primary); }
    .chapter-item,.lecture-item,.note-item { display:flex; justify-content:space-between; align-items:center; padding:14px; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; gap:10px; flex-wrap:wrap; cursor:pointer; }
    .chapter-item:hover { border-color:var(--primary); }
    .lecture-item,.note-item { cursor:pointer; }
    .locked-msg { text-align:center; padding:40px 20px; color:var(--muted); }
    .locked-msg .lock-icon { font-size:40px; display:block; margin-bottom:10px; }
    .video-embed { position:relative; width:100%; padding-top:56.25%; margin-top:10px; border-radius:10px; overflow:hidden; background:#000; }
    .video-embed iframe,.video-embed video { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
    .global-loader { position:fixed; top:16px; right:16px; z-index:9999; background:var(--card); color:var(--text); padding:10px 18px; border-radius:30px; box-shadow:0 6px 20px rgba(0,0,0,0.2); display:flex; align-items:center; gap:10px; font-size:13px; opacity:0; pointer-events:none; transition:opacity 0.25s; }
    .global-loader.show { opacity:1; }
    .global-loader .mini-spin { width:16px; height:16px; border:2.5px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 0.7s linear infinite; }
    @keyframes spin { to{transform:rotate(360deg);} }

    /* ---- BATCHES: PW-style ---- */
    .batch-toptabs { display:flex; gap:0; margin-bottom:18px; border-bottom:2px solid var(--border); }
    .batch-toptabs button { flex:1; background:transparent; color:var(--muted); box-shadow:none; border:none; border-bottom:3px solid transparent; border-radius:0; padding:12px 10px; font-size:14.5px; }
    .batch-toptabs button.active { color:var(--primary); border-bottom-color:var(--primary); }
    .batch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
    .batch-card { border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:0; padding:0; background:var(--card); cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; display:flex; flex-direction:column; }
    .batch-card:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,0.14); }
    .batch-banner { position:relative; width:100%; padding-top:50%; background:linear-gradient(135deg,var(--primary2),var(--primary)); background-size:cover; background-position:center; overflow:hidden; }
    .batch-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .batch-banner-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0.65) 100%); display:flex; align-items:flex-end; padding:12px; }
    .batch-banner-overlay h3 { color:#fff; font-size:16px; margin:0; text-shadow:0 2px 6px rgba(0,0,0,0.5); }
    .batch-enrolled-pill { position:absolute; top:10px; right:10px; background:#4caf50; color:#fff; font-size:11px; font-weight:bold; padding:4px 10px; border-radius:20px; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
    .batch-price-pill { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.55); color:#fff; font-size:12px; font-weight:bold; padding:4px 10px; border-radius:20px; backdrop-filter:blur(2px); }
    .batch-card-body { padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
    .batch-card-body .batch-desc { flex:1; margin:6px 0 12px; }
    .batch-meta-row { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:2px; }
    .batch-meta-row span { background:var(--bg); padding:3px 9px; border-radius:8px; }
    .batch-card-body button { margin-top:auto; }

    .batch-detail-banner { position:relative; width:100%; border-radius:14px; overflow:hidden; padding-top:32%; min-height:140px; background:linear-gradient(135deg,var(--primary2),var(--primary)); background-size:cover; background-position:center; margin-bottom:16px; }
    .batch-detail-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .batch-detail-banner .bdb-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.72) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:18px; }
    .batch-detail-banner h2 { color:#fff; margin:0; text-shadow:0 2px 6px rgba(0,0,0,0.5); font-size:22px; }
    .batch-detail-banner .bdb-meta { color:rgba(255,255,255,0.9); font-size:13px; margin-top:4px; }
    .enroll-card-btn { margin-top:16px; }

    /* ---- Full-screen video player ---- */
    .video-player-overlay { position:fixed; inset:0; background:#000; z-index:2000; display:flex; flex-direction:column; }
    .video-player-overlay.hidden { display:none; }
    .vp-header { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#141414; color:#fff; flex-shrink:0; }
    .vp-header .vp-back { background:rgba(255,255,255,0.15); width:36px; height:36px; padding:0; border-radius:50%; font-size:16px; }
    .vp-header .vp-title { flex:1; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vp-header .vp-fs-btn { background:rgba(255,255,255,0.15); font-size:13px; padding:8px 12px; }
    .vp-stage { flex:1; position:relative; background:#000; display:flex; align-items:center; justify-content:center; min-height:0; }
    .vp-stage iframe, .vp-stage video { width:100%; height:100%; border:0; background:#000; }
    .vp-stage .custom-player { width:100%; height:100%; }
    .vp-desc { padding:16px 18px; color:#ddd; font-size:13px; overflow-y:auto; flex:1; }
    .vp-comment-fab { position:absolute; right:16px; bottom:78px; width:52px; height:52px; border-radius:50%; background:var(--primary); color:#fff; font-size:22px; border:none; box-shadow:0 4px 16px rgba(0,0,0,0.5); z-index:15; display:flex; align-items:center; justify-content:center; padding:0; }
    .vp-fab-badge { position:absolute; top:-2px; right:-2px; background:#e53935; color:#fff; font-size:10px; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; font-weight:bold; }
    .vp-fab-badge.hidden { display:none; }
    .vp-drawer { position:absolute; top:0; right:0; bottom:0; width:340px; max-width:88vw; background:#141414; z-index:20; transform:translateX(100%); transition:transform 0.25s ease; display:flex; flex-direction:column; box-shadow:-6px 0 26px rgba(0,0,0,0.5); }
    .vp-drawer.open { transform:translateX(0); }
    .vp-drawer-header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #2a2a2a; flex-shrink:0; }
    .vp-drawer-tabs { display:flex; flex:1; }
    .vp-drawer-tabs button { flex:1; background:transparent; color:#999; box-shadow:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:13px 6px; font-size:12.5px; }
    .vp-drawer-tabs button.active { color:#fff; border-bottom-color:var(--primary); }
    .vp-drawer-close { background:transparent; box-shadow:none; color:#999; width:auto; padding:10px 14px; font-size:16px; }
    .vp-doubts { background:#141414; display:flex; flex-direction:column; flex:1; min-height:0; }
    .vp-doubts.hidden { display:none; }
    .vp-doubts-list { flex:1; overflow-y:auto; padding:10px 16px; min-height:80px; }
    .vp-comment { padding:8px 0; border-bottom:1px solid #262626; }
    .vp-comment-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
    .vp-comment-author { color:#fff; font-size:12.5px; font-weight:bold; }
    .vp-comment-role { font-size:10px; padding:1px 7px; border-radius:8px; margin-left:6px; background:#333; color:#ccc; }
    .vp-comment-role.staff { background:var(--primary); color:#fff; }
    .vp-comment-text { color:#ddd; font-size:13px; margin-top:2px; word-break:break-word; }
    .vp-comment-del { background:transparent; box-shadow:none; color:#e57373; font-size:12px; padding:2px 6px; width:auto; }
    .vp-doubts-input { display:flex; gap:8px; padding:10px 16px; border-top:1px solid #262626; flex-shrink:0; }
    .vp-doubts-input input { flex:1; margin:0; background:#1f1f1f; border:1px solid #333; color:#fff; padding:9px 12px; border-radius:20px; }
    .vp-doubts-input button { width:40px; height:40px; border-radius:50%; padding:0; background:var(--primary); }

    /* ---- In-app PDF viewer (Drive embed, not a direct link out) ---- */
    .pdf-viewer-overlay { position:fixed; inset:0; background:#2b2b2b; z-index:2000; display:flex; flex-direction:column; }
    .pdf-viewer-overlay.hidden { display:none; }
    .pdf-viewer-stage { flex:1; position:relative; background:#525659; }
    .pdf-viewer-stage iframe { width:100%; height:100%; border:0; }

    /* ---- Test focus mode (like PW) ---- */
    .app-shell.test-focus .sidebar { display:none; }
    .app-shell.test-focus .topbar { display:none; }
    .app-shell.test-focus .container { max-width:1050px; margin:14px auto; }
    .test-subject-filter { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
    .test-subject-filter button { flex:1; min-width:90px; background:var(--bg); color:var(--muted); box-shadow:none; border:2px solid var(--border); font-size:13px; padding:9px 10px; }
    .test-subject-filter button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
    .badge-green { background:#4caf50 !important; }
    .badge-time { background:#607d8b !important; }
    .btn-row { display:flex; gap:8px; flex-wrap:wrap; }

    /* ---- Custom video player (YouTube IFrame Player API, controls=0 — no native YT chrome at all) ---- */
    .custom-player { position:relative; width:100%; height:100%; background:#000; overflow:hidden; }
    .custom-player.cp-cursor-hide { cursor:none; }
    .cp-media { position:absolute; inset:0; }
    .cp-media iframe, .cp-media video { width:100%; height:100%; border:0; display:block; background:#000; pointer-events:none; }
    .cp-center-controls { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:34px; z-index:3; pointer-events:none; transition:opacity 0.25s; }
    .cp-center-controls.cp-hidden { opacity:0; }
    .cp-center-btn { pointer-events:auto; background:rgba(0,0,0,0.45); color:#fff; border:none; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,0.35); }
    .cp-center-btn:not(.cp-center-play) { width:52px; height:52px; }
    .cp-center-btn:not(.cp-center-play) .cp-icon { width:22px; height:22px; }
    .cp-center-btn:not(.cp-center-play) span { font-size:9px; margin-top:-2px; font-weight:bold; }
    .cp-center-play { width:72px; height:72px; background:rgba(0,0,0,0.55); border:2px solid rgba(255,255,255,0.85); }
    .cp-center-play .cp-icon { width:30px; height:30px; }
    .cp-spinner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; pointer-events:none; }
    .cp-spinner.hidden { display:none; }
    .cp-spinner::after { content:''; width:44px; height:44px; border:4px solid rgba(255,255,255,0.25); border-top-color:#fff; border-radius:50%; animation:spin 0.8s linear infinite; }
    .cp-controls { position:absolute; left:0; right:0; bottom:0; z-index:4; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 60%,rgba(0,0,0,0.85) 100%); padding:8px 14px 10px; transition:opacity 0.25s, transform 0.25s; }
    .cp-controls.cp-hidden { opacity:0; transform:translateY(6px); pointer-events:none; }
    .cp-progress-wrap { position:relative; height:5px; background:rgba(255,255,255,0.28); border-radius:3px; cursor:pointer; margin-bottom:8px; }
    .cp-progress-wrap:hover { height:7px; }
    .cp-progress-played { position:absolute; left:0; top:0; bottom:0; width:0%; background:#e53935; border-radius:3px; pointer-events:none; }
    .cp-progress-handle { position:absolute; top:50%; left:0%; width:12px; height:12px; background:#e53935; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(255,255,255,0.15); pointer-events:none; }
    .cp-controls-row { display:flex; align-items:center; gap:10px; }
    .cp-btn { background:transparent !important; border:none; color:#fff; font-size:18px; padding:4px 6px; box-shadow:none; width:auto; display:inline-flex; align-items:center; justify-content:center; }
    .cp-icon { width:18px; height:18px; fill:currentColor; display:block; }
    .cp-time { color:#eee; font-size:12px; white-space:nowrap; }
    .cp-spacer { flex:1; }
    .cp-volume-wrap { display:flex; align-items:center; gap:6px; }
    .cp-volume-wrap input[type=range] { width:70px; accent-color:#e53935; margin:0; }
    .cp-live-badge { background:#e53935; color:#fff; font-size:11px; font-weight:bold; padding:3px 8px; border-radius:10px; letter-spacing:0.3px; }
    .cp-live-badge.hidden { display:none; }
    .cp-error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:#fff; font-size:14px; background:rgba(0,0,0,0.6); z-index:6; }
    .cp-speed-wrap { position:relative; }
    .cp-speed-menu { position:absolute; bottom:36px; right:0; background:#1f1f1f; border-radius:8px; padding:6px; display:none; flex-direction:column; min-width:64px; box-shadow:0 4px 16px rgba(0,0,0,0.4); z-index:8; }
    .cp-speed-menu.show { display:flex; }
    .cp-speed-menu button { background:transparent !important; box-shadow:none; color:#ddd; padding:6px 10px; text-align:left; font-size:13px; width:auto; }
    .cp-speed-menu button.active { color:var(--primary); font-weight:bold; }
    .cp-toast { position:absolute; top:60px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.75); color:#fff; padding:7px 16px; border-radius:20px; font-size:13px; z-index:10; animation:cpFadeOut 2.5s forwards; pointer-events:none; }
    @keyframes cpFadeOut { 0%{opacity:1;} 75%{opacity:1;} 100%{opacity:0;} }

    /* ---- Lecture completion badges ---- */
    .lec-badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; margin-left:6px; vertical-align:middle; }
    .lec-done { background:#4caf50; color:#fff; }
    .lec-progress { background:#ff9800; color:#fff; }

    /* ---- Batch expiry ---- */
    .expiry-banner { background:var(--bg); border:1px solid #ff9800; color:#e65100; padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:12px; }
    body.dark .expiry-banner { color:#ffb74d; }

    /* ---- Batch detail: no banner, two big action buttons ---- */
    .batch-action-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-top:6px; }
    .batch-action-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:26px 16px; background:var(--bg); color:var(--text); border:2px solid var(--border); border-radius:14px; font-weight:bold; font-size:15px; }
    .batch-action-btn:hover { border-color:var(--primary); }
    .batch-action-btn .baa-icon { font-size:30px; margin-bottom:4px; }
    .batch-action-btn small { color:var(--muted); font-weight:normal; font-size:12px; }

    /* ---- Announcements ---- */
    .announcement-card { border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:14px; background:var(--card); }
    .announcement-card img { width:100%; border-radius:10px; margin-top:10px; display:block; }
    .announcement-text { white-space:pre-wrap; line-height:1.5; }
    .announcement-date { font-size:12px; color:var(--muted); margin-top:8px; }

    /* ---- Modal (student info popup) ---- */
    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:3000; display:flex; align-items:center; justify-content:center; padding:20px; }
    .modal-overlay.hidden { display:none; }
    .modal-card { background:var(--card); border-radius:16px; padding:30px; max-width:400px; width:100%; box-shadow:0 10px 40px rgba(0,0,0,0.3); }
    .co-price-row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; color:var(--text); }
    .co-total-row { border-top:1px solid var(--border); margin-top:6px; padding-top:10px; font-weight:bold; font-size:17px; }
    .co-coupon-row { display:flex; gap:8px; margin-top:16px; }
    .co-coupon-row input { margin:0; flex:1; }
    .co-coupon-row button { width:auto; white-space:nowrap; }

    /* ---- Doubt AI: Gemini-style chat ---- */
    .chat-shell { display:flex; flex-direction:column; height:calc(100vh - 140px); min-height:420px; background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
    .chat-top-bar { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; gap:10px; flex-wrap:wrap; }
    .chat-top-bar b { font-size:16px; }
    .chat-subtitle { display:block; color:var(--muted); font-size:12px; font-weight:normal; margin-top:2px; }
    .chat-top-bar button { font-size:12.5px; padding:8px 12px; width:auto; }
    .chat-messages { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
    .chat-empty-state { margin:auto; text-align:center; color:var(--muted); font-size:14px; max-width:280px; }
    .chat-bubble-row { display:flex; }
    .chat-bubble-row.user { justify-content:flex-end; }
    .chat-bubble-row.model { justify-content:flex-start; }
    .chat-bubble { max-width:78%; padding:12px 16px; border-radius:16px; font-size:14.5px; line-height:1.55; word-wrap:break-word; }
    .chat-bubble-row.user .chat-bubble { background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
    .chat-bubble-row.model .chat-bubble { background:var(--bg); color:var(--text); border-bottom-left-radius:4px; }
    .chat-bubble-img { max-width:100%; border-radius:10px; margin-bottom:8px; display:block; }
    .chat-bubble.chat-error { color:#f44336; }
    .chat-typing { display:flex; gap:4px; padding:14px 16px; align-items:center; }
    .chat-typing span { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:chatTyping 1.2s infinite ease-in-out; }
    .chat-typing span:nth-child(2){animation-delay:0.2s;} .chat-typing span:nth-child(3){animation-delay:0.4s;}
    @keyframes chatTyping { 0%,60%,100%{opacity:0.3;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }
    .chat-image-preview { display:flex; align-items:center; gap:10px; padding:10px 18px; border-top:1px solid var(--border); flex-shrink:0; }
    .chat-image-preview img { height:52px; width:52px; object-fit:cover; border-radius:8px; }
    .chat-image-preview button { width:auto; background:transparent; box-shadow:none; color:var(--muted); font-size:18px; padding:4px 8px; }
    .chat-input-bar { display:flex; align-items:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--border); flex-shrink:0; }
    .chat-attach-btn { width:42px; height:42px; border-radius:50%; background:var(--bg); color:var(--text); box-shadow:none; font-size:18px; padding:0; flex-shrink:0; }
    .chat-input-bar textarea { flex:1; margin:0; resize:none; max-height:120px; padding:11px 14px; border-radius:20px; font-size:14px; line-height:1.4; }
    .chat-send-btn { width:42px; height:42px; border-radius:50%; padding:0; font-size:17px; flex-shrink:0; background:var(--primary); }
    .doubt-history-item.active { border-left:3px solid var(--primary); }
    .question-image-box { margin:14px 0; text-align:center; }
    .question-image-box img { max-width:100%; max-height:340px; border-radius:10px; border:1px solid var(--border); }
    .wc-diagnosis { background:var(--bg); border-left:4px solid var(--primary); border-radius:10px; padding:16px 18px; margin-top:14px; font-size:14.5px; line-height:1.6; white-space:pre-wrap; }

    /* ---- Time Table ---- */
    .tt-slot-item { display:flex; justify-content:space-between; align-items:center; padding:14px; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; gap:10px; flex-wrap:wrap; }
    .tt-slot-time { font-family:monospace; font-weight:bold; font-size:13px; color:var(--primary); background:var(--bg); padding:4px 10px; border-radius:8px; white-space:nowrap; }
    .tt-slot-body { flex:1; min-width:160px; }
    .tt-slot-body b { display:block; }
    .tt-slot-body small { color:var(--muted); }
    .tt-track-row { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; flex-wrap:wrap; }
    .tt-track-row.status-correct { border-color:#4caf50; background:rgba(76,175,80,0.07); }
    .tt-track-row.status-wrong { border-color:#f44336; background:rgba(244,67,54,0.07); }
    .tt-track-info { flex:1; min-width:160px; }
    .tt-track-info b { display:block; }
    .tt-track-info small { color:var(--muted); }
    .tt-track-actions { display:flex; gap:8px; }
    .tt-mark-btn { width:auto; padding:9px 14px; font-size:13px; background:var(--bg); color:var(--text); box-shadow:none; border:1.5px solid var(--border); }
    .tt-mark-btn.active-correct { background:#4caf50; color:#fff; border-color:#4caf50; }
    .tt-mark-btn.active-wrong { background:#f44336; color:#fff; border-color:#f44336; }
    .tt-progress-bar { height:10px; border-radius:6px; background:var(--bg); overflow:hidden; margin-top:10px; }
    .tt-progress-fill { height:100%; background:linear-gradient(90deg,#4caf50,#66bb6a); border-radius:6px; transition:width 0.3s; }
    .tt-week-strip { display:flex; gap:8px; margin-top:8px; }
    .tt-week-day { flex:1; text-align:center; }
    .tt-week-bar-track { height:70px; width:100%; background:var(--bg); border-radius:6px; display:flex; align-items:flex-end; overflow:hidden; }
    .tt-week-bar-fill { width:100%; background:linear-gradient(180deg,#66bb6a,#4caf50); border-radius:6px 6px 0 0; }
    .tt-week-day span { font-size:11px; color:var(--muted); display:block; margin-top:6px; }