/* Extracted from index.html for cacheable delivery */
*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#4255ff;--primary-light:#8b9dff;--accent:#ffcd1f;--bg:#f6f7fb;--card:#fff;--text:#282f45;--text-light:#586380;--success:#23b26d;--error:#ef4444;--warning:#f59e0b;--border:#edeff4;--sidebar-w:280px;--header-h:72px;--radius:12px;--shadow:0 2px 8px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04);--shadow-lg:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06)}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{color:var(--primary-light);text-decoration:none}
a:hover{text-decoration:underline}
/* HEADER */
.header{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:linear-gradient(135deg,#0a1a45 0%,#0f2d6b 25%,#1a4db5 55%,#3350d4 80%,#4255ff 100%);color:#fff;display:flex;align-items:center;padding:0 24px;z-index:100;box-shadow:0 4px 24px rgba(15,45,107,.4), 0 1px 4px rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.08);gap:10px;backdrop-filter:blur(8px)}
.header h1{font-size:1.4rem;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;color:#fff}
.header h1 span{color:#a5c8ff}
.header-nav{margin-left:auto;display:flex;gap:6px;align-items:center;overflow-x:auto;overflow-y:hidden;max-width:60vw;scrollbar-width:none;-ms-overflow-style:none;flex-shrink:1;mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%)}
.header-nav::-webkit-scrollbar{display:none}
.header-account{position:relative;flex-shrink:0;margin-left:6px}
.header-nav button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.82);padding:5px 14px;border-radius:20px;cursor:pointer;font-size:.78rem;font-weight:500;transition:all .2s;letter-spacing:.01em;white-space:nowrap;flex-shrink:0}
.header-nav button:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.38);color:#fff}
.header-nav button.active{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);color:#fff;font-weight:700;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.menu-btn{display:none;background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer;margin-right:8px}
/* LAYOUT */
.app{padding-top:var(--header-h)}
.layout{display:flex;min-height:calc(100vh - var(--header-h))}
/* SIDEBAR */
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,251,255,.94));backdrop-filter:blur(20px);border-right:1px solid rgba(66,85,255,.06);position:fixed;top:var(--header-h);bottom:0;overflow-y:auto;padding:16px 0;transition:transform .3s;box-shadow:4px 0 24px rgba(66,85,255,.05)}
.sidebar h3{padding:8px 20px;font-size:.72rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-light);font-weight:600}
.sidebar-item{display:flex;align-items:center;padding:10px 16px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);gap:10px;font-size:.88rem;border-radius:12px;margin:2px 10px}
.sidebar-item:hover{background:rgba(37,99,235,.07);color:var(--primary)}
.sidebar-item.active{background:rgba(66,85,255,.08);font-weight:600;color:var(--primary);box-shadow:inset 3px 0 0 var(--primary)}
.sidebar-item .progress-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
.sidebar-item .progress-dot.complete{background:var(--success);border-color:var(--success)}
.sidebar-item .progress-dot.partial{background:var(--warning);border-color:var(--warning)}
.sidebar-item .unit-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* MAIN CONTENT */
.main{margin-left:var(--sidebar-w);flex:1;padding:28px 32px;max-width:900px;box-sizing:border-box}
/* HOME VIEW */
.home{margin-left:0;max-width:100%;padding:48px 28px 20px;display:flex;flex-direction:column;align-items:center}
.home h2{font-size:2.4rem;margin-bottom:10px;font-family:'Plus Jakarta Sans',sans-serif;background:linear-gradient(135deg,#1b2456,#4255ff,#8b9dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800}
.home .subtitle{color:var(--text-light);margin-bottom:36px;font-size:1rem;letter-spacing:.01em}
.subject-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;width:100%;max-width:880px}
.subject-card{background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,249,255,.96));border-radius:22px;padding:28px 28px 22px 30px;box-shadow:0 2px 6px rgba(0,0,0,.03), 0 8px 24px rgba(66,85,255,.07), 0 20px 48px rgba(66,85,255,.04);cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);border:1px solid rgba(66,85,255,.08);position:relative;overflow:hidden;backdrop-filter:blur(12px)}
.subject-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:5px;background:var(--card-accent,linear-gradient(180deg,#4f46e5,#818cf8));border-radius:22px 0 0 22px;box-shadow:3px 0 14px rgba(66,85,255,.18)}
.subject-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 8px 16px rgba(0,0,0,.06), 0 24px 48px rgba(66,85,255,.18), 0 40px 80px rgba(66,85,255,.08);border-color:rgba(66,85,255,.18)}
.subject-card[data-idx="0"]::before{background:linear-gradient(180deg,#ffcd1f,#ffd95f)}
.subject-card[data-idx="1"]::before{background:linear-gradient(180deg,#4255ff,#8b9dff)}
.subject-card[data-idx="2"]::before{background:linear-gradient(180deg,#23b26d,#4dd4a0)}
.subject-card[data-idx="3"]::before{background:linear-gradient(180deg,#ff5a5f,#ff8c8f)}
.subject-card .icon{font-size:2.6rem;margin-bottom:14px;display:flex;align-items:center;justify-content:center;width:52px;height:52px;text-align:center;line-height:1}
.subject-card h3{font-size:1.2rem;margin-bottom:8px;font-weight:700;color:var(--text)}
.subject-card p{color:var(--text-light);font-size:.88rem;margin-bottom:16px;line-height:1.5}
.subject-card .stats{display:flex;gap:12px;font-size:.78rem;color:var(--text-light);flex-wrap:wrap}
.subject-card .stats span{display:flex;align-items:center;gap:3px;background:rgba(37,99,235,.06);padding:2px 8px;border-radius:10px}
/* ── Subject card menu ── */
.card-menu-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:rgba(0,0,0,.05);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--text-light);transition:all .15s;z-index:5;line-height:1}
.card-menu-btn:hover{background:rgba(79,70,229,.12);color:var(--primary)}
.card-menu{position:absolute;top:44px;right:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);min-width:160px;z-index:10;overflow:hidden;display:none;animation:fadeIn .15s ease-out}
.card-menu.show{display:block}
.card-menu button{width:100%;padding:11px 16px;border:none;background:none;text-align:left;font-size:.88rem;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:8px;color:var(--text);transition:background .1s}
.card-menu button:hover{background:rgba(79,70,229,.08)}
.card-menu button.danger{color:var(--error)}
.card-menu button.danger:hover{background:rgba(239,68,68,.08)}
.card-menu-divider{height:1px;background:var(--border);margin:2px 0}
/* ── Swipe action overlay (units) ── */
.sidebar-item{position:relative;overflow:hidden}
.unit-swipe-actions{position:absolute;right:0;top:0;bottom:0;display:flex;gap:4px;background:transparent;pointer-events:none;opacity:0;transform:translateX(100%);padding-right:4px;align-items:center}
.unit-swipe-actions.snapping{transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}
.unit-swipe-actions.active{opacity:1;transform:translateX(0);pointer-events:auto}
.unit-swipe-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none;padding:4px 8px;transition:all .2s;border-radius:6px;width:32px;height:28px;min-width:unset}
.unit-swipe-btn.star{background:rgba(251,146,60,.95)}
.unit-swipe-btn.star:hover{background:rgba(251,146,60,1);transform:scale(1.05)}
.unit-swipe-btn.delete{background:rgba(239,68,68,.95)}
.unit-swipe-btn.delete:hover{background:rgba(239,68,68,1);transform:scale(1.05)}
.unit-swipe-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.unit-swipe-icon svg{width:100%;height:100%;stroke:white;stroke-width:2.5;fill:none}
.unit-swipe-icon.delete svg{fill:white;stroke:none}
/* ── Subject edit modal ── */
.edit-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.edit-modal-overlay.show{display:flex}
.edit-modal{background:var(--card);border-radius:20px;padding:32px;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.edit-modal h3{font-size:1.1rem;margin-bottom:20px;font-weight:700;color:var(--text)}
.edit-modal label{font-size:.85rem;font-weight:600;color:var(--text-light);display:block;margin-bottom:6px}
.edit-modal input,.edit-modal select{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:12px;font-family:inherit;font-size:.95rem;margin-bottom:16px;box-sizing:border-box;transition:border-color .15s}
.edit-modal input:focus,.edit-modal select:focus{outline:none;border-color:var(--primary-light)}
.edit-modal .emoji-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
.edit-modal .emoji-opt{width:44px;height:44px;border:2px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;transition:all .15s}
.edit-modal .emoji-opt:hover,.edit-modal .emoji-opt.selected{border-color:var(--primary);background:rgba(79,70,229,.1)}
.edit-modal .btn-row{display:flex;gap:10px;margin-top:8px}
.edit-modal .btn-row .btn{flex:1}
.progress-bar{width:100%;height:5px;background:rgba(79,70,229,.1);border-radius:3px;margin-top:14px;overflow:hidden}
.progress-bar .fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1)}
/* STUDY CONTENT */
.content-header{margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--border)}
.content-header h2{font-size:1.6rem;color:var(--primary);margin-bottom:4px}
.content-header .breadcrumb{font-size:.85rem;color:var(--text-light)}
.tab-bar{display:flex;gap:6px;margin-bottom:24px;background:transparent;padding:0;border-radius:0;width:fit-content;border-bottom:none;flex-wrap:wrap}
.tab-btn{padding:8px 20px;border:1.5px solid rgba(66,85,255,.1);background:var(--card);cursor:pointer;font-size:.82rem;border-radius:24px;transition:all .2s cubic-bezier(.4,0,.2,1);font-weight:600;color:var(--text-light);white-space:nowrap;backdrop-filter:blur(4px)}.tab-btn:hover{border-color:rgba(66,85,255,.25);background:rgba(66,85,255,.04);transform:translateY(-1px)}
.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 10px rgba(66,85,255,.25);font-weight:700}
.tab-btn:hover:not(.active){background:rgba(66,85,255,.06);color:var(--primary);border-color:rgba(66,85,255,.3)}
.study-content{background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,251,255,.96));border-radius:18px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,.03), 0 8px 24px rgba(66,85,255,.06);margin-bottom:24px;border:1px solid rgba(66,85,255,.06);backdrop-filter:blur(8px);box-sizing:border-box;width:100%}
.study-content h3{color:var(--primary);margin:28px 0 12px;font-size:1.1rem;font-weight:700;padding:4px 0 4px 12px;border-left:3px solid var(--primary);border-bottom:none}
.study-content h3:first-child{margin-top:0}
.study-content ul,.study-content ol{margin:8px 0 16px 20px}
.study-content li{margin-bottom:6px}
.study-content p{margin-bottom:12px}
.study-content .key-term{background:rgba(66,85,255,.09);color:var(--primary);padding:2px 8px;border-radius:4px;font-weight:600}
.study-content .formula{background:#f3f4f6;padding:12px 16px;border-radius:8px;font-family:'Courier New',monospace;margin:12px 0;font-size:1rem;border-left:4px solid #6b7280}
.study-content .tip{background:#e8f5e9;border-left:4px solid var(--success);padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0}
.study-content .warning{background:#fff3e0;border-left:4px solid var(--warning);padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0}
.study-content table{width:100%;border-collapse:collapse;margin:12px 0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.study-content th,.study-content td{border:1px solid var(--border);padding:12px 14px;text-align:left;line-height:1.5}
.study-content th{background:rgba(66,85,255,.08);font-weight:600;color:var(--primary);font-size:.9rem}
.study-content td{color:var(--text)}
.study-content tbody tr:hover{background:rgba(66,85,255,.04)}
/* QUIZ */
.quiz-container{background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,251,255,.96));border-radius:18px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,.03), 0 8px 24px rgba(66,85,255,.06);border:1px solid rgba(66,85,255,.06);backdrop-filter:blur(8px)}
.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.quiz-header h3{font-size:1.2rem}
.quiz-progress{font-size:.85rem;color:var(--text-light)}
.question-card{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.question-card:last-of-type{border-bottom:none}
.question-num{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin-bottom:8px}
.question-text{font-size:1.05rem;font-weight:600;margin-bottom:16px;line-height:1.5}
.options{display:flex;flex-direction:column;gap:8px}
.option-btn{display:flex;align-items:flex-start;gap:12px;padding:15px 20px;border:1.5px solid var(--border);border-radius:16px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);background:var(--card);text-align:left;font-size:.92rem;line-height:1.45;font-family:'Inter',sans-serif}
.option-btn:hover:not(.disabled){border-color:rgba(79,70,229,.35);background:rgba(79,70,229,.03);transform:translateX(2px)}
.option-btn .letter{width:28px;height:28px;border-radius:8px;background:rgba(37,99,235,.08);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;color:var(--primary)}
.option-btn.selected{border-color:var(--primary);background:rgba(37,99,235,.06)}
.option-btn.selected .letter{background:var(--primary);color:#fff}
.option-btn.correct{border-color:var(--success);background:rgba(16,185,129,.07)}
.option-btn.correct .letter{background:var(--success);color:#fff}
.option-btn.wrong{border-color:var(--error);background:rgba(239,68,68,.07)}
.option-btn.wrong .letter{background:var(--error);color:#fff}
.option-btn.disabled{cursor:default;opacity:.7}
.option-btn.disabled.correct{opacity:1}
.explanation{margin-top:12px;padding:12px 16px;background:#f0f9ff;border-radius:8px;font-size:.9rem;border-left:4px solid var(--primary-light);display:none}
.explanation.show{display:block}
/* SHORT ANSWER */
.sa-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:rgba(124,58,237,.12);color:#7c3aed;margin-bottom:10px}
.sa-textarea{width:100%;min-height:100px;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;font-family:'Inter',sans-serif;font-size:.92rem;line-height:1.5;resize:vertical;background:var(--bg);color:var(--text);transition:border-color .18s}
.sa-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.sa-textarea:disabled{opacity:.65;cursor:not-allowed;resize:none}
.sa-char{font-size:.75rem;color:var(--text-light);text-align:right;margin-top:4px}
.sa-char.warn{color:var(--warning)}
.sa-grading{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(79,70,229,.04);border-radius:8px;margin-top:10px;font-size:.85rem;color:var(--text-light)}
.sa-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sa-result{margin-top:10px;padding:13px 16px;border-radius:10px;font-size:.9rem;border-left:4px solid transparent;line-height:1.5}
.sa-result.score-2{background:#f0fdf4;border-left-color:#10b981}
.sa-result.score-1{background:#fffbeb;border-left-color:#f59e0b}
.sa-result.score-0{background:#fef2f2;border-left-color:#ef4444}
.sa-result .sa-score-badge{font-weight:700;font-size:.85rem;margin-right:6px}
.sa-result.score-2 .sa-score-badge{color:#10b981}
.sa-result.score-1 .sa-score-badge{color:#f59e0b}
.sa-result.score-0 .sa-score-badge{color:#ef4444}
/* SCORE */
.score-card{text-align:center;padding:40px;background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,249,255,.96));border-radius:24px;box-shadow:0 4px 12px rgba(0,0,0,.04), 0 16px 48px rgba(66,85,255,.12), 0 32px 64px rgba(66,85,255,.06);margin-top:24px;border:1px solid rgba(66,85,255,.08)}
.score-ring{width:120px;height:120px;margin:0 auto 16px;position:relative}
.score-ring svg{transform:rotate(-90deg)}
.score-ring .score-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700}
.score-card h3{font-size:1.4rem;margin-bottom:8px}
.score-card p{color:var(--text-light)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:none;border-radius:13px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .22s cubic-bezier(.4,0,.2,1);font-family:'Inter',sans-serif;letter-spacing:.02em}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(66,85,255,.35)}
.btn-primary:hover{background:#3344ee;box-shadow:0 6px 20px rgba(66,85,255,.45);transform:translateY(-1px)}
.btn-accent{background:linear-gradient(135deg,#0ea5e9,#06b6d4);color:#fff;box-shadow:0 4px 14px rgba(14,165,233,.3)}
.btn-accent:hover{background:linear-gradient(135deg,#0284c7,#0ea5e9);box-shadow:0 6px 20px rgba(14,165,233,.4);transform:translateY(-1px)}
.btn-outline{background:rgba(37,99,235,.05);border:1.5px solid rgba(37,99,235,.3);color:var(--primary)}
.btn-outline:hover{background:rgba(37,99,235,.1);border-color:var(--primary);transform:translateY(-1px)}
.btn-group{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
/* NAV ARROWS */
.nav-arrows{display:flex;justify-content:space-between;margin-top:24px}
/* FLASHCARDS */
.flashcard-container{perspective:1000px;max-width:600px;margin:0 auto;padding:20px 0}
.games-hub{max-width:700px;margin:0 auto;padding:20px 0}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.game-card{background:var(--card);border:1.5px solid var(--border);border-radius:16px;padding:22px 18px;cursor:pointer;transition:all .2s;text-align:center}
.game-card:hover{border-color:var(--primary);box-shadow:0 4px 18px rgba(66,85,255,.13);transform:translateY(-2px)}
.game-emoji{font-size:2rem;margin-bottom:10px}
.game-card-title{font-weight:800;font-size:1rem;margin-bottom:6px;color:var(--text)}
.game-card-desc{font-size:.82rem;color:var(--text-light);margin-bottom:10px;line-height:1.5}
.game-card-meta{font-size:.78rem;font-weight:600;color:var(--primary);background:rgba(66,85,255,.08);border-radius:8px;padding:3px 10px;display:inline-block}
.game-arena{max-width:600px;margin:0 auto;padding:12px 0}
.game-result{max-width:440px;margin:32px auto;text-align:center;background:var(--card);border-radius:20px;padding:36px;border:1px solid var(--border)}
.game-timer-track{height:6px;background:var(--border);border-radius:4px;margin-bottom:20px;overflow:hidden}
.game-question{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:20px;font-weight:600;font-size:1rem;line-height:1.55;margin-bottom:14px;text-align:center;color:var(--text)}
/* ── Hot Seat (Kahoot-style) ── */
.hotseat-arena{background:linear-gradient(160deg,#0f1a6e,#1a2a9b);border-radius:20px;padding:24px;min-height:400px}
.hotseat-hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hotseat-timer-track{height:8px;background:rgba(255,255,255,.2);border-radius:4px;margin-bottom:20px;overflow:hidden}
.hotseat-timer-bar{height:100%;background:#ffcd1f;border-radius:4px;transition:width .9s linear}
.hotseat-question{background:rgba(255,255,255,.12);border-radius:14px;padding:20px 24px;font-size:1.05rem;font-weight:700;color:#fff;text-align:center;line-height:1.5;margin-bottom:20px;border:1px solid rgba(255,255,255,.15)}
.hotseat-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hotseat-opt{padding:14px 12px;border:none;border-radius:12px;font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px;color:#fff;text-align:left;line-height:1.4}
.hotseat-opt:hover:not([style*="cursor:default"]){filter:brightness(1.12);transform:scale(1.02)}
.hs-icon{font-size:1rem;flex-shrink:0;opacity:.8}
.hs-text{flex:1}
.hs-check{margin-left:auto;font-size:1.1rem}
.flashcard-counter{text-align:center;color:var(--text-light);font-size:.85rem;margin-bottom:12px}
.flashcard-toolbar{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.flashcard-select{padding:8px 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font:inherit;font-size:.88rem}
.flashcard-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.flashcard-stat{padding:7px 12px;border-radius:999px;background:rgba(66,85,255,.08);color:var(--primary);font-size:.8rem;font-weight:700}
.flashcard{width:100%;min-height:280px;position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform .5s}
.flashcard.flipped{transform:rotateY(180deg)}
.flashcard-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.flashcard-front{background:linear-gradient(145deg, #fff, #f8f9ff);color:var(--text);border:1.5px solid rgba(66,85,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.04), 0 12px 32px rgba(66,85,255,.08);border-radius:22px}
.flashcard-front h3{font-size:1.25rem;line-height:1.55;font-weight:700}
.flashcard-front .flip-hint{position:absolute;bottom:16px;font-size:.72rem;color:var(--text-light)}
.flashcard-back{background:linear-gradient(135deg,#232d77,var(--primary));color:#fff;transform:rotateY(180deg);border:none;box-shadow:0 8px 28px rgba(66,85,255,.35)}
.flashcard-back p{font-size:1.1rem;line-height:1.6;color:#fff}
.flashcard-nav{display:flex;justify-content:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.flashcard-nav button{padding:10px 24px;border-radius:8px;border:2px solid var(--border);background:var(--card);cursor:pointer;font-size:.9rem;font-weight:600;transition:all .15s}
.flashcard-nav button:hover{border-color:var(--primary);background:#eef2ff}
.flashcard-shuffle{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:8px}
.flashcard-action-wrong{border-color:#f59e0b !important;color:#b45309}
.flashcard-action-reset{border-color:rgba(66,85,255,.2)}
/* DASHBOARD */
/* ═══ DASHBOARD V3 — Bento Grid + Radial Progress ═══ */
.dashboard{max-width:880px;margin:0 auto;padding:12px 0}
/* Hero banner */
.dash-hero{background:linear-gradient(135deg,#0a1a45 0%,#0f2d6b 25%,#1a4db5 55%,#3350d4 80%,#4255ff 100%);border-radius:22px;padding:28px 32px;color:#fff;position:relative;overflow:hidden;margin-bottom:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.1), 0 12px 36px rgba(66,85,255,.25)}
.dash-hero::before{content:'';position:absolute;top:-60px;right:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);border-radius:50%;animation:heroBubble1 8s ease-in-out infinite}
.dash-hero::after{content:'';position:absolute;bottom:-40px;left:20%;width:160px;height:160px;background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 65%);border-radius:50%;animation:heroBubble2 10s ease-in-out infinite}
.dash-hero-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.dash-hero-text h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.6rem;font-weight:800;margin-bottom:4px}
.dash-hero-text p{font-size:.88rem;opacity:.7}
/* Radial ring */
.dash-ring{position:relative;width:100px;height:100px;flex-shrink:0}
.dash-ring svg{transform:rotate(-90deg)}
.dash-ring-bg{fill:none;stroke:rgba(255,255,255,.15);stroke-width:8}
.dash-ring-fill{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.dash-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dash-ring-pct{font-size:1.5rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;line-height:1}
.dash-ring-sub{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;opacity:.65;margin-top:2px}
/* Bento grid */
.dash-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.dash-bento-card{background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,249,255,.96));border-radius:18px;padding:22px 20px;border:1px solid rgba(66,85,255,.06);box-shadow:0 2px 8px rgba(0,0,0,.03), 0 6px 20px rgba(66,85,255,.05);transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.dash-bento-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(66,85,255,.12)}
.dash-bento-card::before{content:'';position:absolute;top:-15px;right:-15px;width:60px;height:60px;background:var(--bento-glow,radial-gradient(circle,rgba(66,85,255,.06) 0%,transparent 70%));border-radius:50%;pointer-events:none}
.dash-bento-icon{font-size:1.4rem;margin-bottom:8px}
.dash-bento-val{font-size:1.9rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;line-height:1.1;background:linear-gradient(135deg,#0f2d6b,#4255ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.dash-bento-label{font-size:.68rem;color:var(--text-light);margin-top:5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
[data-theme="dark"] .dash-bento-card{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .dash-bento-val{background:linear-gradient(135deg,#6374ff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* Subject progress cards */
.dash-subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:24px}
.dash-subj-card{background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,249,255,.96));border-radius:18px;padding:22px;border:1px solid rgba(66,85,255,.06);box-shadow:0 2px 8px rgba(0,0,0,.03), 0 6px 20px rgba(66,85,255,.05);transition:all .25s;cursor:pointer;position:relative;overflow:hidden}
.dash-subj-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(66,85,255,.12);border-color:rgba(66,85,255,.12)}
.dash-subj-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--subj-accent,linear-gradient(180deg,#4255ff,#8b9dff));border-radius:18px 0 0 18px}
.dash-subj-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dash-subj-icon{font-size:1.6rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(66,85,255,.06);border-radius:12px;flex-shrink:0}
.dash-subj-info{flex:1;min-width:0}
.dash-subj-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-subj-meta{font-size:.75rem;color:var(--text-light);margin-top:2px}
.dash-subj-pct{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.3rem;color:var(--primary);flex-shrink:0}
.dash-subj-bar{height:6px;background:rgba(66,85,255,.08);border-radius:4px;overflow:hidden;margin-bottom:10px}
.dash-subj-bar .fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1);background:linear-gradient(90deg,var(--subj-bar-start,#4255ff),var(--subj-bar-end,#8b9dff))}
.dash-subj-units{display:flex;flex-wrap:wrap;gap:5px}
.dash-subj-unit{font-size:.68rem;padding:3px 8px;border-radius:8px;font-weight:600;transition:all .15s}
.dash-subj-unit.done{background:rgba(35,178,109,.1);color:#23b26d}
.dash-subj-unit.partial{background:rgba(245,158,11,.1);color:#f59e0b}
.dash-subj-unit.notdone{background:rgba(66,85,255,.06);color:var(--text-light)}
[data-theme="dark"] .dash-subj-card{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .dash-subj-bar{background:rgba(66,85,255,.15)}
[data-theme="dark"] .dash-subj-icon{background:rgba(66,85,255,.12)}
[data-theme="dark"] .dash-subj-unit.done{background:rgba(35,178,109,.15)}
[data-theme="dark"] .dash-subj-unit.partial{background:rgba(245,158,11,.15)}
[data-theme="dark"] .dash-subj-unit.notdone{background:rgba(66,85,255,.12)}
@media(max-width:640px){.dash-bento{grid-template-columns:repeat(2,1fr)}.dash-subj-grid{grid-template-columns:1fr}}
/* SRS REVIEW */
.review-container{max-width:700px;margin:0 auto}
.review-header{text-align:center;margin-bottom:24px}
.review-header h2{color:var(--primary)}
.review-badge{display:inline-flex;align-items:center;gap:4px;background:#fff3e0;color:#e65100;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:8px}
.srs-empty{text-align:center;padding:60px 20px;color:var(--text-light)}
.srs-empty h3{font-size:1.2rem;margin-bottom:8px;color:var(--text)}
/* TIMER */
.timer-widget{position:fixed;bottom:20px;right:20px;z-index:150;background:var(--card);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.15);overflow:hidden;width:220px;transition:all .3s}
.timer-widget.minimized{width:56px;height:56px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.timer-header{background:var(--primary);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600}
.timer-header button{background:none;border:none;color:#fff;cursor:pointer;font-size:1rem}
.timer-body{padding:16px;text-align:center}
.timer-display{font-size:2.2rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--primary);margin:8px 0}
.timer-label{font-size:.8rem;color:var(--text-light);margin-bottom:12px}
.timer-controls{display:flex;gap:8px;justify-content:center}
.timer-controls button{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:.8rem;font-weight:600}
.timer-btn-start{background:var(--accent);color:#fff}
.timer-btn-pause{background:var(--warning);color:#fff}
.timer-btn-reset{background:var(--border);color:var(--text)}
.timer-min-icon{font-size:1.5rem}
/* SEARCH */
.search-wrapper{position:relative;margin-left:auto;margin-right:8px}
.search-pill{display:flex;align-items:center;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.2);border-radius:28px;transition:width .28s cubic-bezier(.34,.7,.25,.99),background .2s,border-color .2s,transform .28s cubic-bezier(.34,.7,.25,.99);overflow:hidden;width:108px;cursor:pointer;transform-origin:right center}
.search-pill:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32)}
.search-pill.open{width:280px;background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.6);cursor:default;transform:scaleX(1.02);transform-origin:right center;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.search-pill-icon{padding:8px 8px 8px 13px;color:rgba(255,255,255,.85);display:flex;align-items:center;flex-shrink:0}
.search-pill-label{color:rgba(255,255,255,.85);font-size:.86rem;font-weight:500;padding-right:4px;transition:opacity .15s;white-space:nowrap}
.search-pill.open .search-pill-label{opacity:0;width:0;overflow:hidden;padding:0}
.search-pill.open .search-pill-icon{color:var(--primary)}
.search-pill.open .search-input{color:var(--text);opacity:1;width:auto}
.search-pill.open .search-input::placeholder{color:rgba(0,0,0,.35)}
.search-input{flex:1;background:none;border:none;color:#fff;font-size:.86rem;padding:9px 6px 9px 0;outline:none;font-family:inherit;width:0;opacity:0;transition:opacity .2s .1s}
.search-input::placeholder{color:rgba(255,255,255,.5)}
.search-pill.open .search-input{width:auto;opacity:1}
.search-pill-close{background:none;border:none;color:rgba(255,255,255,.6);padding:8px 12px 8px 2px;cursor:pointer;font-size:.95rem;line-height:1;display:none;align-items:center;flex-shrink:0;transition:color .15s}
.search-pill-close:hover{color:#fff}
.search-pill.open .search-pill-close{display:flex;color:rgba(0,0,0,.4)}
.search-pill.open .search-pill-close:hover{color:rgba(0,0,0,.7)}
.search-results{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-height:400px;overflow-y:auto;background:var(--card);border-radius:16px;box-shadow:0 12px 40px rgba(79,70,229,.18),0 4px 12px rgba(0,0,0,.1);display:none;z-index:110;border:1px solid rgba(79,70,229,.08)}
.search-results.show{display:block}
.search-result{padding:13px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s}
.search-result:hover{background:rgba(37,99,235,.06)}
.search-result:last-child{border-bottom:none}
.search-result .sr-title{font-weight:600;font-size:.9rem;color:var(--primary)}
.search-result .sr-subject{font-size:.75rem;color:var(--text-light)}
.search-result .sr-snippet{font-size:.8rem;color:var(--text);margin-top:4px;line-height:1.4}
.search-result mark{background:rgba(37,99,235,.1);color:var(--primary);padding:0 3px;border-radius:3px}
.search-no-results{padding:28px;text-align:center;color:var(--text-light);font-size:.88rem}
/* BOOKMARKS */
.bookmark-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:4px 8px;transition:transform .15s}
.bookmark-btn:hover{transform:scale(1.2)}
.bookmark-filter{display:flex;gap:8px;padding:8px 20px}
.bookmark-filter button{font-size:.75rem;padding:4px 10px;border-radius:12px;border:1px solid var(--border);background:var(--card);cursor:pointer}
.bookmark-filter button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* LEADERBOARD */
.leaderboard{max-width:600px;margin:0 auto}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card);border-radius:10px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.lb-rank{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.lb-rank.gold{background:#fff8e1;color:#f57f17}
.lb-rank.silver{background:#eceff1;color:#546e7a}
.lb-rank.bronze{background:#fbe9e7;color:#bf360c}
.lb-rank.normal{background:var(--bg);color:var(--text-light)}
.lb-name{flex:1;font-weight:600;font-size:.9rem}
.lb-score{font-size:.85rem;color:var(--text-light)}
/* NOTES */
.unit-notes{margin-top:24px;background:var(--card);border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.unit-notes h4{margin-bottom:8px;color:var(--primary);font-size:.9rem}
.unit-notes textarea{width:100%;min-height:100px;padding:12px;border:2px solid var(--border);border-radius:8px;font-family:inherit;font-size:.9rem;resize:vertical;transition:border-color .15s}
.unit-notes textarea:focus{outline:none;border-color:var(--primary-light)}
.notes-saved{font-size:.75rem;color:var(--success);margin-top:4px;opacity:0;transition:opacity .3s}
.notes-saved.show{opacity:1}
/* VIDEO MODULE */
.unit-video{border-radius:12px;overflow:hidden;margin-bottom:24px;background:#000;position:relative;padding-top:56.25%}
.unit-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-label{font-size:.8rem;color:var(--text-light);margin-bottom:8px;display:flex;align-items:center;gap:6px}
/* MASTERY GATE */
.mastery-gate{background:var(--card);border:2px solid var(--border);border-radius:12px;padding:24px;text-align:center;margin:24px 0;color:var(--text-light)}
.mastery-gate .gate-icon{font-size:2.5rem;margin-bottom:8px}
.mastery-gate h3{margin-bottom:8px;color:var(--text)}
.mastery-gate p{font-size:.9rem;margin-bottom:16px}
.unit-locked .unit-card{opacity:.5;pointer-events:none;filter:grayscale(60%)}
/* WEAK SPOTS */
.weak-spots-panel{background:var(--card);border-radius:12px;padding:20px;margin-bottom:24px;border:2px solid #dc2626}
.weak-spots-panel h3{color:#dc2626;margin-bottom:0;font-size:1rem}
.weak-spot-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.weak-spot-item:last-child{border-bottom:none}
.weak-spot-pct{background:#dc2626;color:#fff;border-radius:20px;padding:2px 8px;font-size:.75rem;white-space:nowrap}
.weak-spot-dismiss{background:none;border:none;color:#aaa;cursor:pointer;font-size:1rem;padding:2px 4px;margin-left:4px;border-radius:6px;line-height:1;flex-shrink:0;transition:color .15s,background .15s}
.weak-spot-dismiss:hover{color:#dc2626;background:rgba(220,38,38,.08)}
/* UNIT NOTES */
.unit-notes{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);width:100%;box-sizing:border-box}
.unit-notes h4{margin-bottom:10px;font-size:.95rem;color:var(--text-light)}
.unit-notes textarea{width:100%;min-height:80px;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(66,85,255,.1);background:var(--bg);color:var(--text);font-size:.85rem;resize:vertical;box-sizing:border-box;font-family:inherit;transition:border-color .2s}
.unit-notes textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(66,85,255,.1);outline:none}
.notes-saved{opacity:0;transition:opacity .4s;color:var(--success,#4caf50);font-size:.8rem;margin-top:4px}
.notes-saved.show{opacity:1}
/* STREAK */
.streak-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border-radius:20px;padding:3px 10px;font-size:.78rem;font-weight:700;margin-left:8px;box-shadow:0 2px 8px rgba(245,158,11,.35)}
/* ADMIN PROGRESS */
.student-progress-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:16px}
.student-progress-table th{text-align:left;padding:8px 12px;background:var(--bg);color:var(--text-light);border-bottom:2px solid var(--border)}
.student-progress-table td{padding:8px 12px;border-bottom:1px solid var(--border)}
.progress-bar-mini{background:var(--border);border-radius:4px;height:6px;width:80px;display:inline-block;vertical-align:middle;margin-left:6px}
.progress-bar-mini-fill{background:var(--primary);height:100%;border-radius:4px;transition:width .3s}
/* FINAL EXAM */
.final-exam-banner{background:linear-gradient(135deg,#312e81,#4f46e5,#7c3aed);color:#fff;border-radius:20px;padding:24px 32px;margin-bottom:24px;display:flex;align-items:center;gap:20px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 24px rgba(79,70,229,.35)}
.final-exam-banner:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.25)}
.final-exam-banner .fe-icon{font-size:2.5rem;flex-shrink:0}
.final-exam-banner h3{font-size:1.2rem;margin-bottom:4px}
.final-exam-banner p{font-size:.85rem;opacity:.85}
.final-exam-badge{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:700;margin-top:8px;display:inline-block}
.exam-container{max-width:800px;margin:0 auto}
.exam-header{background:linear-gradient(135deg,#312e81,#4f46e5,#7c3aed);color:#fff;border-radius:20px;padding:28px 32px;margin-bottom:24px;text-align:center;box-shadow:0 6px 24px rgba(79,70,229,.3)}
.exam-header h2{font-size:1.6rem;margin-bottom:8px}
.exam-header p{opacity:.85;font-size:.9rem}
.exam-progress-bar{width:100%;height:8px;background:rgba(255,255,255,.3);border-radius:4px;margin-top:16px;overflow:hidden}
.exam-progress-bar .fill{height:100%;background:#fff;border-radius:4px;transition:width .3s}
.exam-result{text-align:center;background:var(--card);border-radius:16px;padding:40px;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.exam-result h2{font-size:1.8rem;margin-bottom:8px}
.exam-unit-breakdown{margin-top:32px;text-align:left}
.exam-unit-breakdown h3{margin-bottom:16px;color:var(--primary)}
.exam-unit-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.exam-unit-row:last-child{border-bottom:none}
.exam-unit-row .unit-name{flex:1;font-size:.9rem}
.exam-unit-row .unit-score{font-weight:700;font-size:.9rem;width:60px;text-align:right}
/* AI HOMEWORK HELPER */
/* ── Homework Helper — Full Redesign ────────────── */
.hw-page{display:flex;gap:0;height:calc(100vh - var(--header-h));overflow:hidden;background:linear-gradient(160deg,#f5f6f8 0%,#f9fafb 50%,#f9fafb 100%)}
.hw-upload-panel{width:42%;border-right:1px solid rgba(79,70,229,.1);display:flex;flex-direction:column;background:rgba(255,255,255,.7);backdrop-filter:blur(12px)}
.hw-chat-panel{flex:1;display:flex;flex-direction:column;background:transparent}
.hw-panel-header{padding:18px 24px;border-bottom:1px solid rgba(79,70,229,.08);background:linear-gradient(135deg,rgba(79,70,229,.04),rgba(239,68,68,.06));display:flex;align-items:center;gap:12px}
.hw-panel-header .hw-panel-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.hw-panel-header .hw-panel-icon.upload-icon{background:linear-gradient(135deg,#e0e7ff,#c7d2fe)}
.hw-panel-header .hw-panel-icon.chat-icon{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.hw-panel-header h3{font-size:1rem;font-weight:700;color:var(--text)}
.hw-panel-header .hw-panel-subtitle{font-size:.78rem;color:var(--text-light);margin-top:1px}
.hw-upload-area{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.hw-drop-zone{border:2px dashed rgba(37,99,235,.2);border-radius:16px;padding:48px 24px;text-align:center;cursor:pointer;transition:all .25s;background:linear-gradient(135deg,rgba(79,70,229,.02),rgba(239,68,68,.04))}
.hw-drop-zone:hover{border-color:var(--primary);background:linear-gradient(135deg,rgba(79,70,229,.06),rgba(239,68,68,.08));transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,70,229,.12)}
.hw-drop-zone.drag-over{border-color:var(--primary);background:linear-gradient(135deg,#eef2ff,#eef2ff);box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.hw-drop-zone .dz-icon{font-size:2.8rem;margin-bottom:12px;display:block}
.hw-drop-zone .dz-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:4px}
.hw-drop-zone p{color:var(--text-light);font-size:.85rem}.hw-drop-zone>*{pointer-events:none}
.hw-preview{border-radius:14px;overflow:hidden;border:1px solid rgba(79,70,229,.12);flex:1;min-height:200px;max-height:400px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.hw-preview img,.hw-preview iframe{width:100%;height:100%;object-fit:contain}
.hw-preview iframe{height:400px}
.hw-chat-messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:14px}
.hw-chat-input-row{padding:18px 24px;border-top:1px solid rgba(79,70,229,.08);background:rgba(255,255,255,.6);backdrop-filter:blur(8px);display:flex;gap:10px;align-items:flex-end}
.hw-chat-input-row textarea{flex:1;padding:14px 18px;border:2px solid rgba(79,70,229,.15);border-radius:14px;font-family:inherit;font-size:.95rem;resize:none;height:48px;transition:all .2s;background:rgba(255,255,255,.8)}
.hw-chat-input-row textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);background:#fff}
.hw-chat-input-row button{padding:14px 22px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--primary),#ef4444);color:#fff;cursor:pointer;font-weight:700;font-size:.95rem;flex-shrink:0;transition:all .2s;box-shadow:0 4px 12px rgba(79,70,229,.25)}
.hw-chat-input-row button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(79,70,229,.35)}
.hw-chat-input-row button:active{transform:translateY(0)}
.hw-message{max-width:82%;padding:14px 18px;border-radius:18px;font-size:.93rem;line-height:1.65;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.hw-message.user{align-self:flex-end;background:linear-gradient(135deg,var(--primary),#ef4444);color:#fff;border-bottom-right-radius:6px}
.hw-message.ai{align-self:flex-start;background:#fff;border:1px solid rgba(79,70,229,.1);border-bottom-left-radius:6px}
.hw-message.ai.thinking{opacity:.6;font-style:italic}
/* ── AI Tutor Tab ── */
.tutor-wrap{display:flex;flex-direction:column;height:calc(100vh - var(--header-h) - 120px);min-height:400px;padding:0 0 16px}
.tutor-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.tutor-msg{max-width:82%;padding:11px 15px;border-radius:12px;font-size:.9rem;line-height:1.65;word-break:break-word}
.tutor-msg.user{align-self:flex-end;background:#7c3aed;color:#fff;border-bottom-right-radius:3px}
.tutor-msg.ai{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:3px;color:var(--text)}
.tutor-msg.thinking{opacity:.55;font-style:italic}
.tutor-input-row{display:flex;align-items:flex-end;gap:10px;padding:12px 20px 0;border-top:1px solid var(--border);background:var(--bg)}
.tutor-input-row textarea{flex:1;padding:10px 14px;border:2px solid var(--border);border-radius:10px;font-family:inherit;font-size:.9rem;resize:none;min-height:42px;max-height:120px;overflow-y:auto;transition:border-color .2s;line-height:1.5}
.tutor-input-row textarea:focus{outline:none;border-color:#7c3aed}
.tutor-send{background:#7c3aed;color:#fff;border:none;padding:10px 18px;border-radius:10px;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .2s;white-space:nowrap}
.tutor-send:hover{background:#6d28d9}
.tutor-header{padding:12px 20px 8px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(109,40,217,.03));display:flex;align-items:center;gap:10px}
.tutor-header-icon{font-size:1.5rem}
.tutor-header-text strong{display:block;font-size:.9rem;color:var(--primary);font-weight:700}
.tutor-header-text span{font-size:.78rem;color:var(--text-light)}
.hw-start-hint{text-align:center;padding:56px 32px;color:var(--text-light);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}
.hw-start-hint .hw-hint-icon{font-size:3.5rem;margin-bottom:16px;display:block;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hw-start-hint h3{font-size:1.3rem;margin-bottom:12px;color:var(--text);font-weight:700}
.hw-start-hint p{font-size:.95rem;line-height:1.65;max-width:440px;margin:0 auto}
.hw-start-hint .hw-steps{display:flex;gap:20px;margin-top:24px;flex-wrap:wrap;justify-content:center}
.hw-start-hint .hw-step{background:rgba(79,70,229,.04);border:1px solid rgba(79,70,229,.1);border-radius:14px;padding:16px;width:120px;text-align:center}
.hw-start-hint .hw-step .step-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#ef4444);color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.hw-start-hint .hw-step .step-icon{font-size:1.5rem;margin-bottom:6px;display:block}
.hw-start-hint .hw-step p{font-size:.78rem;color:var(--text);font-weight:500}
.hw-subject-select{padding:12px 24px}
.hw-subject-select label{font-size:.82rem;color:var(--text-light);display:block;margin-bottom:6px;font-weight:600;letter-spacing:.02em}
.hw-subject-select select{width:100%;padding:12px 14px;border:2px solid rgba(37,99,235,.15);border-radius:12px;font-family:inherit;font-size:.93rem;transition:all .2s;background:#fff;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236366f1' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.hw-subject-select select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
/* ── ANIMATIONS & MICRO-INTERACTIONS ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes zoomFadeIn{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes correctPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}70%{box-shadow:0 0 0 12px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@keyframes wrongShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
@keyframes btnTap{0%{transform:translateX(0)}20%{transform:translateX(-2px)}55%{transform:translateX(1.5px)}80%{transform:translateX(-.5px)}100%{transform:translateX(0)}}
@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(-60px) rotate(720deg);opacity:0}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);max-height:0}to{opacity:1;transform:translateY(0);max-height:200px}}
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* Home view subject cards — stagger entrance */
.subject-card{animation:fadeInUp .5s ease-out both}
.subject-card:nth-child(1){animation-delay:.05s}
.subject-card:nth-child(2){animation-delay:.12s}
.subject-card:nth-child(3){animation-delay:.19s}
.subject-card:nth-child(4){animation-delay:.26s}
/* Subject card hover effects */
.subject-card{transition:all .3s cubic-bezier(.4,0,.2,1)}
.subject-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:rgba(79,70,229,.2)}
.subject-card:hover .icon{transform:scale(1.15);transition:transform .3s}
.subject-card .icon{transition:transform .3s}
/* Header — static for crisp professional look */
/* Study content sections fade in */
.study-content{animation:zoomFadeIn .45s cubic-bezier(.4,0,.2,1) both}
.quiz-container{animation:scaleIn .3s ease-out}
/* Quiz answer feedback */
.option-btn.correct{animation:correctPulse .6s ease-out}
.option-btn.wrong{animation:wrongShake .25s ease-out;will-change:transform;isolation:isolate}
.option-btn:active:not(.disabled){animation:btnTap .18s ease-out;will-change:transform;isolation:isolate;transform-origin:center}
/* Explanation slide down */
.explanation.show{animation:slideDown .3s ease-out}
/* Score card entrance */
.score-card{animation:scaleIn .5s cubic-bezier(.4,0,.2,1)}
/* Sidebar items — smooth hover */
.sidebar-item{transition:background .2s,color .2s}
.sidebar-item:hover{transform:none;background:rgba(37,99,235,.07);color:var(--primary)}
/* Flashcard flip — add depth */
.flashcard{box-shadow:0 4px 20px rgba(79,70,229,.12)}
.flashcard:hover{box-shadow:0 8px 32px rgba(79,70,229,.2)}
/* Progress bar fill — animate on load */
.progress-bar .fill{animation:shimmer 2s ease-in-out}
/* Tab bar transition */
.tab-btn{transition:all .25s cubic-bezier(.4,0,.2,1)}
.tab-btn.active{transform:scale(1.02)}
/* Dashboard stat hover */
.dash-stat{transition:all .25s cubic-bezier(.4,0,.2,1)}
.dash-stat:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--shadow-lg)}
/* Smooth page transitions */
.main{animation:fadeInUp .3s ease-out}
/* Course entry zoom transition */
.main.course-enter{animation:zoomFadeIn .4s cubic-bezier(.4,0,.2,1) both}
.main.course-enter .study-content{animation:zoomFadeIn .45s cubic-bezier(.4,0,.2,1) .05s both}
.main.course-enter .tab-bar{animation:fadeInUp .35s cubic-bezier(.4,0,.2,1) .1s both}
.main.course-enter .content-header{animation:zoomFadeIn .35s cubic-bezier(.4,0,.2,1) both}
/* Sidebar unit items stagger in */
.sidebar.course-enter .sidebar-item{animation:slideInLeft .3s cubic-bezier(.4,0,.2,1) both}
.sidebar.course-enter .sidebar-item:nth-child(1){animation-delay:.03s}
.sidebar.course-enter .sidebar-item:nth-child(2){animation-delay:.06s}
.sidebar.course-enter .sidebar-item:nth-child(3){animation-delay:.09s}
.sidebar.course-enter .sidebar-item:nth-child(4){animation-delay:.12s}
.sidebar.course-enter .sidebar-item:nth-child(5){animation-delay:.15s}
.sidebar.course-enter .sidebar-item:nth-child(6){animation-delay:.18s}
.sidebar.course-enter .sidebar-item:nth-child(7){animation-delay:.21s}
.sidebar.course-enter .sidebar-item:nth-child(8){animation-delay:.24s}
.sidebar.course-enter .sidebar-item:nth-child(9){animation-delay:.27s}
.sidebar.course-enter .sidebar-item:nth-child(10){animation-delay:.30s}
.sidebar.course-enter .sidebar-item:nth-child(11){animation-delay:.33s}
.sidebar.course-enter .sidebar-item:nth-child(12){animation-delay:.36s}
.sidebar.course-enter .sidebar-item:nth-child(13){animation-delay:.39s}
.sidebar.course-enter .sidebar-item:nth-child(14){animation-delay:.42s}
.sidebar.course-enter .sidebar-item:nth-child(15){animation-delay:.45s}
/* Button press effect */
.btn{transition:all .2s cubic-bezier(.4,0,.2,1)}
.btn:active{transform:scale(.97)}
/* Final exam banner pulse */
.final-exam-banner{position:relative;overflow:hidden}
.final-exam-banner::after{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:rotate(30deg);animation:shimmer 3s ease-in-out infinite}
/* Timer widget entrance */
.timer-widget{animation:slideInRight .3s ease-out}
/* ── Step-by-Step (Photomath-style) ── */
.sbs-container{max-width:720px;margin:0 auto;padding:8px 0 32px}
.sbs-header{text-align:center;margin-bottom:28px}
.sbs-header h3{font-size:1.25rem;font-weight:700;color:var(--primary);margin-bottom:6px}
.sbs-header p{color:var(--text-light);font-size:.88rem}
.sbs-card{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,249,255,.96));border:1px solid rgba(66,85,255,.1);border-radius:20px;margin-bottom:22px;overflow:hidden;box-shadow:0 2px 8px rgba(66,85,255,.07),0 8px 24px rgba(66,85,255,.04)}
.sbs-card-header{padding:18px 22px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(66,85,255,.06);cursor:pointer;user-select:none;transition:background .2s}
.sbs-card-header:hover{background:rgba(66,85,255,.03)}
.sbs-card-emoji{font-size:1.6rem;flex-shrink:0;line-height:1}
.sbs-card-title{font-size:1rem;font-weight:700;color:var(--text);flex:1}
.sbs-start-btn{padding:7px 18px;background:var(--primary);color:#fff;border:none;border-radius:20px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
.sbs-start-btn:hover{background:#5565ff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(66,85,255,.3)}
.sbs-start-btn.done{background:var(--success)}
.sbs-steps{padding:0 22px 22px}
.sbs-step{opacity:0;transform:translateY(16px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);margin-top:16px;display:none}
.sbs-step.visible{opacity:1;transform:translateY(0);display:flex;gap:14px}
.sbs-step-num{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;box-shadow:0 2px 8px rgba(66,85,255,.3)}
.sbs-step-body{flex:1;min-width:0}
.sbs-step-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-light);font-weight:600;margin-bottom:4px}
.sbs-step-expr{font-size:1.05rem;font-weight:700;color:var(--text);background:rgba(66,85,255,.05);border:1px solid rgba(66,85,255,.1);border-radius:10px;padding:10px 14px;line-height:1.8;word-break:break-word}
.math-frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 3px;line-height:1.1}
.math-frac .math-num{border-bottom:2px solid currentColor;padding:0 4px 2px;font-size:.9em;text-align:center}
.math-frac .math-den{padding:2px 4px 0;font-size:.9em;text-align:center}
.sbs-step-expr sub{font-size:.72em;vertical-align:sub;line-height:0;font-weight:600}
.sbs-step-expr sup{font-size:.72em;vertical-align:super;line-height:0;font-weight:600}
.sbs-step-note{font-size:.8rem;color:var(--text-light);margin-top:5px;line-height:1.4}
.sbs-step-connector{width:2px;height:16px;background:linear-gradient(180deg,rgba(66,85,255,.2),rgba(66,85,255,.05));margin-left:35px;display:none}
.sbs-step-connector.visible{display:block}
.sbs-controls{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.sbs-next-btn{padding:10px 24px;background:var(--primary);color:#fff;border:none;border-radius:24px;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:7px}
.sbs-next-btn:hover{background:#5565ff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(66,85,255,.35)}
.sbs-next-btn:active{transform:scale(.97)}
.sbs-next-btn:disabled{background:#c5caff;cursor:not-allowed;transform:none;box-shadow:none}
.sbs-restart-btn{padding:10px 20px;background:transparent;color:var(--primary);border:1.5px solid rgba(66,85,255,.3);border-radius:24px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}
.sbs-restart-btn:hover{background:rgba(66,85,255,.06);border-color:rgba(66,85,255,.5)}
.sbs-progress{height:3px;background:rgba(66,85,255,.1);border-radius:3px;margin:0 22px 0;overflow:hidden}
.sbs-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),#8b9dff);border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1);width:0}
.sbs-no-math{text-align:center;padding:48px 20px;color:var(--text-light)}
.sbs-no-math .sbs-no-icon{font-size:3rem;margin-bottom:12px}
.sbs-no-math p{font-size:.95rem;line-height:1.6}
/* MOBILE */
/* ── Tablet (iPad) ── */
@media(min-width:769px) and (max-width:1024px){
:root{--sidebar-w:220px}
.main{padding:20px 18px;max-width:none}
.home{padding:28px 16px}
.subject-cards{grid-template-columns:1fr 1fr;gap:16px}
.subject-card{padding:22px}
.subject-card h3{font-size:1.1rem}
.study-content,.quiz-container{padding:20px 16px}
/* ── Auth/Login — iPad friendly ── */
.auth-screen{padding:40px 20px}
.auth-card{max-width:480px;padding:40px 36px;border-radius:22px}
.auth-card .logo{margin-bottom:28px}
.auth-card .logo img{max-width:280px}
.auth-card .logo p{font-size:.92rem}
.auth-tabs{margin-bottom:28px}
.auth-tab{padding:14px;font-size:1rem}
.auth-form input{padding:14px 16px;font-size:1rem;border-radius:12px}
.auth-form .auth-btn{padding:16px;font-size:1.05rem;border-radius:14px;min-height:52px}
.auth-form label{font-size:.9rem;margin-bottom:8px}
.auth-form .form-group{margin-bottom:20px}
/* ── Header — iPad ── */
.header img[alt="AcePath"]{height:48px}
/* ── Quiz — iPad touch targets ── */
.option-btn{padding:14px 16px;min-height:50px;border-radius:14px}
.option-btn .letter{width:30px;height:30px}
.tab-btn{padding:10px 18px;min-height:46px}
/* ── Dashboard — iPad ── */
.dash-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
/* ── Flashcards — iPad ── */
.flashcard{min-height:300px}
.flashcard-nav button{min-height:46px;padding:10px 24px}
/* ── Nav arrows — iPad ── */
.nav-arrows .btn{min-height:46px;padding:10px 20px}
/* ── Homework Helper — iPad full-size (side-by-side, fills screen) ── */
.hw-page{flex-direction:row;height:calc(100vh - var(--header-h));overflow:hidden;gap:0;background:linear-gradient(160deg,#f5f6f8 0%,#f9fafb 50%,#f9fafb 100%)}
.hw-upload-panel{width:44%;border-right:1px solid rgba(79,70,229,.1);border-bottom:none;flex-shrink:0;height:100%;display:flex;flex-direction:column;background:rgba(255,255,255,.75);backdrop-filter:blur(16px)}
.hw-upload-area{flex:1;overflow-y:auto;flex-direction:column;gap:16px;padding:20px 24px;align-items:stretch}
.hw-drop-zone{min-width:unset;flex:none;min-height:170px;padding:36px 24px;border-radius:20px}
.hw-drop-zone .dz-icon{font-size:3rem;margin-bottom:14px}
.hw-drop-zone .dz-title{font-size:1.05rem}
.hw-drop-zone p{font-size:.92rem}
.hw-preview{flex:none;min-height:240px;max-height:400px;border-radius:18px}
.hw-panel-header{padding:18px 24px;flex-shrink:0}
.hw-panel-header h3{font-size:1.1rem}
.hw-panel-header .hw-panel-icon{width:42px;height:42px;border-radius:12px;font-size:1.25rem}
.hw-subject-select{padding:12px 24px;flex-shrink:0}
.hw-subject-select label{font-size:.9rem}
.hw-subject-select select{padding:14px 16px;font-size:1rem;border-radius:14px;min-height:52px}
.hw-chat-panel{flex:1;height:100%;display:flex;flex-direction:column;min-height:unset;border-radius:0}
.hw-chat-messages{flex:1;overflow-y:auto;padding:20px 24px;gap:16px}
.hw-message{max-width:78%;padding:16px 20px;border-radius:18px;font-size:1rem;line-height:1.7}
.hw-message.user{border-bottom-right-radius:6px}
.hw-message.ai{border-bottom-left-radius:6px}
.hw-start-hint{padding:56px 40px;flex:1}
.hw-start-hint .hw-hint-icon{font-size:4rem}
.hw-start-hint h3{font-size:1.35rem;margin-bottom:14px}
.hw-start-hint p{font-size:1rem;line-height:1.65;max-width:460px;margin:0 auto}
.hw-start-hint .hw-steps{gap:16px;margin-top:28px}
.hw-start-hint .hw-step{width:130px;padding:18px}
.hw-chat-input-row{padding:18px 24px;gap:12px;flex-shrink:0}
.hw-chat-input-row textarea{padding:16px 18px;font-size:1rem;border-radius:16px;min-height:54px}
.hw-chat-input-row button{padding:16px 26px;font-size:1rem;border-radius:16px;min-height:54px;font-weight:700}
}
/* ── Homework Helper — iPad compact strip layout ── */
@media(min-width:769px) and (max-width:1024px){
.hw-page{flex-direction:column;height:calc(100vh - var(--header-h));overflow:hidden}
.hw-upload-panel{width:100%;height:auto;flex-direction:row;flex-shrink:0;align-items:stretch;border-right:none;border-bottom:1px solid rgba(79,70,229,.12);max-height:130px}
.hw-upload-panel .hw-panel-header{padding:0 20px;border-bottom:none;flex-shrink:0;min-width:160px;background:linear-gradient(135deg,rgba(79,70,229,.06),rgba(79,70,229,.02))}
.hw-upload-area{flex:1;flex-direction:row;align-items:center;padding:12px 16px;gap:14px;overflow:hidden}
.hw-upload-area .hw-drop-zone{flex:1;min-height:unset;height:90px;padding:10px 16px;border-radius:14px;min-width:180px;display:flex;flex-direction:row;align-items:center;gap:12px;text-align:left}
.hw-upload-area .hw-drop-zone .dz-icon{font-size:1.6rem;margin:0;flex-shrink:0}
.hw-upload-area .hw-drop-zone .dz-title{font-size:.88rem;margin:0 0 2px}
.hw-upload-area .hw-drop-zone p{font-size:.78rem;margin:0}
.hw-subject-select{padding:12px 16px;flex-shrink:0;min-width:200px;border-left:1px solid rgba(79,70,229,.1);display:flex;flex-direction:column;justify-content:center}
.hw-subject-select label{font-size:.8rem}
.hw-subject-select select{padding:8px 12px;font-size:.9rem;min-height:40px;border-radius:10px}
#hwPreviewArea{display:flex;align-items:center;gap:10px;overflow-x:auto}
.hw-preview{min-height:unset;height:90px;width:auto;flex-shrink:0;border-radius:10px}
.hw-chat-panel{flex:1;min-height:0;height:0;display:flex;flex-direction:column}
.hw-chat-messages{flex:1;overflow-y:auto;padding:16px 20px}
.hw-chat-input-row{padding:14px 20px;flex-shrink:0}
}
@media(max-width:768px){
/* ── Layout ── */
.menu-btn{display:block}
.sidebar{transform:translateX(-100%);z-index:99}
.sidebar.open{transform:translateX(0);box-shadow:4px 0 16px rgba(0,0,0,.2)}
.main{margin-left:0;padding:16px 14px}
.home{padding:20px 14px}
/* ── Header ── */
header{padding:0 10px}
header h1{font-size:1rem}
.header-actions{gap:4px}
.header-actions .btn{padding:5px 8px;font-size:.75rem}
/* Collapse user-badge on mobile: hide name, keep avatar + compact logout */
.user-badge span{display:none}
.user-badge .avatar{width:26px;height:26px;font-size:.7rem}
.user-badge .logout-btn{padding:3px 8px;font-size:.72rem}
/* ── Subject cards ── */
.subject-cards{grid-template-columns:1fr;gap:14px}
.subject-card{padding:18px}
.subject-card h2{font-size:1.1rem}
/* ── Study content ── */
.study-content,.quiz-container{padding:16px 14px}
.study-content h2{font-size:1.2rem}
.study-content p,.study-content li{font-size:.9rem}
/* ── Tab bar ── */
.tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0}
.tab-btn{padding:10px 12px;font-size:.8rem;white-space:nowrap;flex-shrink:0}
/* ── Quiz ── */
.quiz-option{padding:12px 14px;font-size:.9rem}
.quiz-progress{font-size:.8rem}
/* ── Flashcard ── */
.flashcard-container{padding:10px 0}
.flashcard{height:260px}
.flashcard-front,.flashcard-back{font-size:.9rem;padding:20px}
/* ── Dashboard ── */
.dashboard{padding:16px 0}
.dash-unit-bar{width:80px}
.progress-grid{grid-template-columns:1fr}
/* ── Final exam ── */
.exam-container{padding:0}
.exam-header{padding:16px}
.exam-unit-breakdown{padding:10px}
/* ── Homework helper — full mobile redesign ── */
.hw-page{flex-direction:column;height:auto;overflow:visible;gap:0;background:linear-gradient(160deg,#f5f6f8 0%,#f9fafb 50%,#f9fafb 100%)}
.hw-upload-panel{width:100%;min-width:0;max-width:100%;border-right:none;border-bottom:1px solid rgba(79,70,229,.1);padding:14px;box-sizing:border-box}
.hw-upload-area{flex-direction:column;gap:10px}
.hw-drop-zone{min-height:100px;padding:24px 16px;border-radius:14px}
.hw-drop-zone .dz-title{font-size:.92rem}
.hw-preview{max-height:160px;border-radius:12px}
.hw-chat-panel{min-height:300px;border-radius:0}
.hw-panel-header{padding:12px 16px}
.hw-panel-header .hw-panel-icon{width:32px;height:32px;border-radius:8px;font-size:1rem}
.hw-chat-messages{padding:14px 16px;gap:10px}
.hw-message{max-width:92%;font-size:.88rem;padding:12px 14px;border-radius:14px}
.hw-chat-input-row{padding:12px 14px;gap:8px}
.hw-chat-input-row textarea{font-size:.92rem;padding:12px 14px;border-radius:12px;min-height:44px}
.hw-chat-input-row button{padding:12px 16px;font-size:.88rem;border-radius:12px;min-height:44px}
.hw-subject-select{font-size:.88rem;padding:8px 14px}
.hw-subject-select select{min-height:44px;padding:10px 12px;border-radius:10px}
.hw-start-hint{padding:32px 20px}
.hw-start-hint .hw-hint-icon{font-size:2.8rem}
.hw-start-hint h3{font-size:1.1rem}
.hw-start-hint p{font-size:.88rem}
.hw-start-hint .hw-steps{gap:10px;margin-top:18px}
.hw-start-hint .hw-step{width:90px;padding:12px 8px}
.hw-start-hint .hw-step .step-icon{font-size:1.2rem}
.hw-start-hint .hw-step p{font-size:.7rem}
/* ── Breadcrumb + nav ── */
.breadcrumb{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit-nav{flex-wrap:wrap;gap:6px}
.unit-nav .btn{padding:7px 12px;font-size:.8rem}
/* ── Leaderboard ── */
.leaderboard{padding:16px 0}
.lb-row{padding:10px 12px;font-size:.85rem}
/* ── Modal ── */
.modal{padding:20px 16px;border-radius:12px}
.modal h2{font-size:1.2rem}
/* ── Auth / pending ── */
.auth-screen{padding:20px 16px}
.auth-card{padding:32px 22px;border-radius:18px;max-width:100%;width:100%}
.auth-card .logo{text-align:center;margin-bottom:22px}
.auth-card .logo img{max-width:240px;height:auto;display:block;margin:0 auto}
.auth-card .logo p{text-align:center;font-size:.88rem}
.auth-form input{min-height:48px;font-size:1rem}
.auth-form .auth-btn{min-height:50px;font-size:1rem}
.pending-card{padding:28px 18px}
/* ── Timer widget ── */
.timer-widget{right:10px;bottom:10px;width:180px}
/* ── Home welcome centering ── */
.home{text-align:center;align-items:center;padding:24px 16px}
.home h2{font-size:1.6rem;text-align:center;line-height:1.3}
.home .subtitle{text-align:center;font-size:.92rem;margin-bottom:28px}
}
/* ── iPhone (≤430px) — phone-specific polish, does NOT affect iPad ── */
@media(max-width:430px){
/* ── Auth/Login — iPhone centered ── */
.auth-screen{padding:16px 12px;height:100vh;align-items:center;overflow:hidden}
.auth-card{padding:28px 20px;border-radius:18px;max-width:100%;width:100%}
.auth-card .logo{margin-bottom:20px;text-align:center}
.auth-card .logo img{max-width:220px;height:auto;display:block;margin:0 auto}
.auth-card .logo p{font-size:.85rem;text-align:center}
.auth-tabs{margin-bottom:20px}
.auth-tab{padding:12px 8px;font-size:.92rem}
.auth-form input{padding:14px 14px;font-size:1rem;border-radius:12px;min-height:48px}
.auth-form .auth-btn{padding:16px;font-size:1rem;border-radius:14px;min-height:52px}
.auth-form label{font-size:.88rem}
.auth-form .form-group{margin-bottom:18px}
.auth-error{font-size:.85rem;padding:10px 12px}
/* ── Home ── */
.home{padding:20px 12px}
.home h2{font-size:1.4rem;margin-bottom:8px;line-height:1.25}
.home .subtitle{font-size:.88rem;margin-bottom:20px;padding:0 4px}
/* Stack action buttons 2-per-row for thumb reach */
.home > div[style*="display:flex"]{
display:grid!important;
grid-template-columns:1fr 1fr;
gap:8px!important;
width:100%;
margin-bottom:20px!important;
}
.home > div[style*="display:flex"] .btn{
padding:10px 8px;
font-size:.78rem;
justify-content:center;
text-align:center;
min-height:44px;
}
/* Subject cards — full width, compact */
.subject-cards{gap:12px;padding:0}
.subject-card{padding:16px;border-radius:16px}
.subject-card .icon{font-size:2.2rem;width:44px;height:44px;margin-bottom:10px}
.subject-card h3{font-size:1rem}
.subject-card p{font-size:.82rem;margin-bottom:12px;line-height:1.45}
.subject-card .stats{font-size:.72rem}
.subject-card .stats span{padding:2px 6px}
.progress-bar{height:4px;margin-top:10px}
/* Header compact */
.header{height:60px;padding:0 12px;gap:6px}
.header h1{font-size:.95rem}
:root{--header-h:60px}
.header img[alt="AcePath"]{height:36px!important}
.header-nav button{padding:4px 10px;font-size:.75rem}
/* Quiz — larger touch targets */
.option-btn{padding:14px 14px;font-size:.9rem;min-height:48px;border-radius:14px}
.option-btn .letter{width:32px;height:32px;border-radius:10px;font-size:.85rem}
/* Tab bar — scrollable, larger targets */
.tab-bar{padding:4px;border-radius:10px}
.tab-btn{padding:10px 14px;font-size:.82rem;min-height:44px}
/* Flashcards */
.flashcard{min-height:240px}
.flashcard-front h3{font-size:1.1rem}
.flashcard-back p{font-size:1rem}
.flashcard-nav button{min-height:44px;padding:10px 20px}
/* Dashboard */
.dash-stats{grid-template-columns:1fr 1fr;gap:10px}
.dash-stat{padding:16px 12px}
.dash-stat .stat-value{font-size:1.6rem}
.dash-stat .stat-label{font-size:.7rem}
/* Study content readability */
.study-content{padding:16px 12px;border-radius:12px}
.study-content h3{font-size:1.05rem}
/* Nav arrows — thumb-friendly */
.nav-arrows .btn{min-height:44px;min-width:44px;padding:10px 16px}
/* Final exam banner */
.final-exam-banner{padding:16px 18px;gap:12px;border-radius:14px}
.final-exam-banner .fe-icon{font-size:2rem}
.final-exam-banner h3{font-size:1rem}
.final-exam-banner p{font-size:.8rem}
/* Request card */
.request-card{padding:16px}
.request-card .icon{font-size:2rem}
.request-card h3{font-size:.95rem}
.request-card p{font-size:.8rem}
/* Modal — full width on phone */
.modal{width:95%;padding:24px 16px;border-radius:14px}
/* Score card */
.score-card{padding:28px 20px;border-radius:16px}
.score-ring{width:100px;height:100px}
.btn-group{gap:8px}
.btn-group .btn{padding:10px 16px;font-size:.85rem;min-height:44px}
}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:98}
.overlay.show{display:block}
/* REQUEST MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--card);border-radius:16px;padding:32px;max-width:560px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.25);position:relative}
.modal h2{color:var(--primary);margin-bottom:4px;font-size:1.4rem}
.modal .modal-sub{color:var(--text-light);margin-bottom:24px;font-size:.9rem}
.modal label{display:block;font-weight:600;margin-bottom:6px;font-size:.9rem}
.modal input,.modal textarea{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:8px;font-size:.95rem;font-family:inherit;transition:border-color .15s}
.modal input:focus,.modal textarea:focus{outline:none;border-color:var(--primary-light)}
.modal textarea{min-height:80px;resize:vertical}
.form-group{margin-bottom:18px}
.form-group .hint{font-size:.8rem;color:var(--text-light);margin-top:4px}
.link-list{display:flex;flex-direction:column;gap:8px}
.link-row{display:flex;gap:8px;align-items:center}
.link-row input{flex:1}
.link-row .remove-link{background:var(--error);color:#fff;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.add-link-btn{background:none;border:1px dashed var(--primary-light);color:var(--primary-light);padding:8px;border-radius:8px;cursor:pointer;font-size:.85rem;width:100%;margin-top:4px}
.add-link-btn:hover{background:#eef2ff}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}
.modal .close-btn{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-light);line-height:1}
.modal .close-btn:hover{color:var(--text)}
.file-upload-area{border:2px dashed var(--border);border-radius:8px;padding:16px;transition:border-color .2s,background .2s}
.file-upload-area.drag-over{border-color:var(--primary);background:rgba(37,99,235,.05)}
.file-upload-prompt{text-align:center;padding:16px 8px;cursor:pointer;color:var(--text-light);font-size:.9rem}
.file-upload-prompt:hover{color:var(--primary)}
.file-list{display:flex;flex-direction:column;gap:6px}
.file-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg);padding:8px 12px;border-radius:6px;font-size:.85rem}
.file-item .file-name{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item .file-size{color:var(--text-light);font-size:.75rem;margin-left:8px;white-space:nowrap}
.file-item .remove-file{background:none;border:none;color:var(--text-light);cursor:pointer;font-size:1.1rem;padding:0 4px}
.file-item .remove-file:hover{color:#ef4444}
.success-msg{text-align:center;padding:24px}
.success-msg .icon{font-size:3rem;margin-bottom:12px}
.success-msg h3{color:var(--success);margin-bottom:8px}
.spinner{display:inline-block;width:18px;height:18px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.notif-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:linear-gradient(135deg,#312e81,#4f46e5);color:#fff;padding:16px 22px;border-radius:16px;box-shadow:0 8px 32px rgba(79,70,229,.45);z-index:9999;display:flex;align-items:flex-start;gap:14px;max-width:360px;width:90%;opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;pointer-events:none}
.notif-toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.notif-toast .notif-icon{font-size:1.8rem;flex-shrink:0;margin-top:2px}
.notif-toast .notif-body{flex:1}
.notif-toast .notif-title{font-weight:700;font-size:.95rem;margin-bottom:4px}
.notif-toast .notif-msg{font-size:.83rem;opacity:.88;line-height:1.4}
.notif-toast .notif-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:1.1rem;cursor:pointer;padding:0;line-height:1;flex-shrink:0;align-self:flex-start}
@keyframes spin{to{transform:rotate(360deg)}}
.request-card{background:linear-gradient(135deg,#312e81,#4f46e5,#7c3aed);border-radius:14px;padding:28px;color:#fff;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border:1.5px solid rgba(255,255,255,.1);text-align:center;box-shadow:0 4px 20px rgba(79,70,229,.3)}
.request-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(79,70,229,.45)}
.request-card .icon{font-size:2.6rem;margin-bottom:12px;display:block}
.request-card h3{font-size:1.15rem;margin-bottom:8px;font-weight:700}
.request-card p{opacity:.82;font-size:.87rem;line-height:1.5}
/* AUTH SCREEN */
.auth-screen{min-height:100vh;min-height:-webkit-fill-available;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1b2456 0%,#2b3a8a 35%,#4255ff 70%,#6374ff 100%);padding:20px;position:relative;overflow:hidden}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border:1.5px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text);font-weight:600;font-size:.92rem;transition:border-color .2s,box-shadow .2s;background:var(--card)}
.google-btn:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(66,85,255,.12);text-decoration:none}
[data-theme="dark"] .google-btn{background:#252838;border-color:#353858;color:var(--text)}
[data-theme="dark"] .google-btn:hover{border-color:var(--primary);background:#2e3148}
.auth-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(99,116,255,.35) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(66,85,255,.2) 0%,transparent 55%);pointer-events:none}
.auth-card{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-radius:28px;padding:44px;max-width:440px;width:100%;box-shadow:0 4px 12px rgba(0,0,0,.04), 0 16px 48px rgba(66,85,255,.14), 0 32px 80px rgba(66,85,255,.08);border:1px solid rgba(66,85,255,.06);position:relative;z-index:1;animation:authCardIn .5s cubic-bezier(.4,0,.2,1) both}
.auth-card .logo{text-align:center;margin-bottom:24px}
.auth-card .logo h1{font-size:2rem;color:var(--primary)}
.auth-card .logo h1 span{color:var(--accent)}
.auth-card .logo p{color:var(--text-light);font-size:.9rem;margin-top:4px}
.auth-tabs{display:flex;margin-bottom:24px;border-bottom:2px solid var(--border)}
.auth-tab{flex:1;padding:12px;text-align:center;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s;color:var(--text-light)}
.auth-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.auth-tab:hover:not(.active){color:var(--text)}
.auth-form .form-group{margin-bottom:16px}
.auth-form label{display:block;font-weight:600;margin-bottom:6px;font-size:.85rem}
.auth-form input{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:10px;font-size:1rem;font-family:inherit;transition:border-color .15s}
.auth-form input:focus{outline:none;border-color:var(--primary-light)}
.auth-form .auth-btn{width:100%;padding:14px;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;color:#fff;background:linear-gradient(135deg,#4255ff,#6374ff);box-shadow:0 4px 16px rgba(66,85,255,.4);font-family:'Inter',sans-serif}
.auth-form .auth-btn:hover{background:linear-gradient(135deg,#3346e8,#4255ff);box-shadow:0 6px 20px rgba(66,85,255,.55);transform:translateY(-1px)}
.auth-form .auth-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-error{background:#ffebee;color:var(--error);padding:10px 14px;border-radius:8px;font-size:.9rem;margin-bottom:16px;display:none}
.auth-error.show{display:block}
.user-badge{display:flex;align-items:center;gap:8px;color:#fff;font-size:.85rem}
.user-badge .avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.user-badge .logout-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 12px;border-radius:16px;cursor:pointer;font-size:.8rem}
.user-badge .logout-btn:hover{background:rgba(255,255,255,.25)}
.notif-bell{position:relative;cursor:pointer;font-size:1.3rem;padding:4px 8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:20px;transition:all .2s}
.notif-bell:hover{transform:scale(1.15)}
.notif-badge{position:absolute;top:-2px;right:0;background:var(--error);color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.pending-screen{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:40px}
.pending-card{background:var(--card);border-radius:20px;padding:48px;max-width:480px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.1)}
.pending-card h2{color:var(--primary);margin-bottom:12px}
.pending-card p{color:var(--text-light);line-height:1.6;margin-bottom:20px}
/* Admin Panel — floating bubble popover */
.admin-panel{position:fixed;top:calc(var(--header-h) + 8px);right:16px;width:420px;max-height:calc(100vh - var(--header-h) - 24px);background:var(--card);box-shadow:0 8px 32px rgba(0,0,0,.12), 0 24px 64px rgba(66,85,255,.1);z-index:200;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border-radius:20px;border:1px solid rgba(66,85,255,.08);opacity:0;transform:translateY(-12px) scale(.96);pointer-events:none;overflow:hidden}
.admin-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.admin-panel-header{padding:20px 24px;border-bottom:1px solid rgba(66,85,255,.08);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#0d1f5c,#2e55cc,#4255ff);color:#fff;border-radius:20px 20px 0 0}
.admin-panel-header h3{margin:0;font-size:1.1rem}
.admin-panel-close{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.1rem;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}
.admin-panel-close:hover{background:rgba(255,255,255,.25)}
.admin-panel-body{flex:1;overflow-y:auto;padding:16px}
.admin-panel-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.15);z-index:199;backdrop-filter:blur(2px);transition:all .3s}
.admin-panel-overlay.show{display:block}
@media(max-width:480px){.admin-panel{left:8px;right:8px;width:auto;top:calc(var(--header-h) + 4px);max-height:calc(100vh - var(--header-h) - 12px)}}
.admin-section{margin-bottom:20px}
.admin-section h4{font-size:.85rem;text-transform:uppercase;color:var(--text-light);margin-bottom:10px;letter-spacing:.5px}
.admin-user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;background:var(--bg)}
.admin-user .au-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.admin-user .au-avatar.pending-av{background:#fff3e0;color:#e65100}
.admin-user .au-avatar.approved-av{background:#e8f5e9;color:#2e7d32}
.admin-user .au-avatar.denied-av{background:#ffebee;color:#c62828}
.admin-user .au-avatar.admin-av{background:#eef2ff;color:#1a237e}
.admin-user .au-info{flex:1;min-width:0}
.admin-user .au-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user .au-email{font-size:.75rem;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user .au-actions{display:flex;gap:4px;flex-shrink:0}
.admin-user .au-actions button{border:none;border-radius:6px;padding:5px 10px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s}
.btn-approve{background:#e8f5e9;color:#2e7d32}.btn-approve:hover{background:#c8e6c9}
.btn-deny{background:#ffebee;color:#c62828}.btn-deny:hover{background:#ffcdd2}
.btn-admin{background:#eef2ff;color:#1a237e}.btn-admin:hover{background:#d1d5db}
/* DOWNLOAD SECTION */
.download-section{background:transparent;border-radius:12px;padding:16px;margin-bottom:24px;display:flex;align-items:center;gap:14px;border:1px solid var(--border);cursor:pointer;transition:all .2s}
.download-section:hover{background:rgba(66,85,255,.04);border-color:rgba(66,85,255,.2)}
.download-section .dl-icon{font-size:1.2rem;flex-shrink:0;color:var(--primary)}
.download-section .dl-info{flex:1;min-width:0}
.download-section .dl-info h3{color:var(--primary);margin-bottom:2px;font-size:.95rem;font-weight:600}
.download-section .dl-info p{color:var(--text-light);font-size:.8rem;margin-bottom:8px;line-height:1.4}
.download-section .dl-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .15s;margin-right:6px}
.download-section .dl-btn:hover{background:var(--primary-light);transform:translateY(-1px);text-decoration:none}
@media(max-width:768px){.download-section{flex-direction:column;text-align:center;align-items:flex-start}}
/* ── HOME HERO BANNER ── */
/* ── Course Catalog ──────────────────────────── */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:880px;width:100%;margin:0 auto}
.catalog-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s,transform .2s}
.catalog-card:hover{box-shadow:0 8px 28px rgba(66,85,255,.13);transform:translateY(-2px)}
.catalog-card .cc-icon{font-size:2.4rem;line-height:1;margin-bottom:2px}
.catalog-card .cc-title{font-size:1.05rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;color:var(--text);line-height:1.25}
.catalog-card .cc-desc{font-size:.82rem;color:var(--text-light);line-height:1.55;flex:1}
.catalog-card .cc-meta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--text-light);flex-wrap:wrap}
.catalog-card .cc-meta .cc-badge{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:2px 10px;font-weight:600}
.cc-stars{color:#f59e0b;font-size:.88rem;letter-spacing:1px}
.cc-enroll-btn{width:100%;padding:10px 0;border-radius:10px;border:none;font-weight:700;font-size:.88rem;cursor:pointer;transition:all .18s;margin-top:4px}
.cc-enroll-btn.enrolled{background:rgba(34,197,94,.12);color:#16a34a;border:1px solid rgba(34,197,94,.3);cursor:default}
.cc-enroll-btn.add{background:var(--primary);color:#fff}
.cc-enroll-btn.add:hover{background:var(--primary-dark)}
.cc-rate-wrap{margin-top:4px}
.cc-rate-label{font-size:.78rem;color:var(--text-light);font-weight:600;margin-bottom:6px}
.cc-star-picker{display:flex;gap:4px}
.cc-star-picker span{font-size:1.5rem;cursor:pointer;transition:transform .15s;line-height:1;color:#d1d5db}
.cc-star-picker span.lit{color:#f59e0b}
.cc-star-picker span:hover{transform:scale(1.2)}
.cc-feedback-input{width:100%;margin-top:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.82rem;resize:vertical;min-height:52px;font-family:inherit;box-sizing:border-box}
.cc-submit-btn{margin-top:6px;padding:7px 18px;border-radius:8px;border:none;background:var(--primary);color:#fff;font-weight:700;font-size:.82rem;cursor:pointer}
.cc-submit-btn:hover{background:var(--primary-dark)}
@media(max-width:600px){.catalog-grid{grid-template-columns:1fr}}
.home-hero{width:100%;max-width:880px;background:linear-gradient(135deg,#0d1a4a 0%,#152d72 25%,#1e44a0 50%,#3255cc 75%,#4255ff 90%,#6374ff 100%);border-radius:22px;padding:30px 34px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px;box-shadow:0 4px 12px rgba(0,0,0,.1), 0 12px 36px rgba(66,85,255,.35), 0 24px 60px rgba(66,85,255,.15);overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.1)}
.home-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;background:rgba(255,255,255,.05);border-radius:50%;pointer-events:none}
.home-hero::after{content:'';position:absolute;bottom:-40px;right:100px;width:140px;height:140px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none}
.home-hero-text{flex:1;position:relative;z-index:1}
.home-hero-text h2{font-size:1.6rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:6px;color:#fff;-webkit-text-fill-color:#fff;background:none}
.home-hero-text p{font-size:.9rem;opacity:.82;margin-bottom:18px;line-height:1.55}
.home-hero-stats{display:flex;gap:20px;position:relative;z-index:1;flex-shrink:0}
.hero-stat{text-align:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:14px 20px;min-width:78px;backdrop-filter:blur(10px);transition:transform .2s, box-shadow .2s}.hero-stat:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.hero-stat .hs-val{font-size:1.6rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;line-height:1}
.hero-stat .hs-label{font-size:.68rem;opacity:.75;text-transform:uppercase;letter-spacing:.07em;margin-top:3px;font-weight:600}
.quick-actions{display:flex;gap:7px;flex-wrap:wrap}
.quick-action-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .18s;font-family:'Inter',sans-serif;backdrop-filter:blur(4px);white-space:nowrap}
.quick-action-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.38);transform:translateY(-1px)}
.quick-action-btn.featured{background:rgba(255,255,255,.18);font-weight:700;border-color:rgba(255,255,255,.3)}
@media(max-width:768px){.home-hero{flex-direction:column;padding:20px;gap:16px}.home-hero-stats{width:100%;justify-content:center}.hero-stat{flex:1;max-width:90px}.home-hero-text h2{font-size:1.25rem}}
@media(max-width:430px){.home-hero{padding:16px;border-radius:12px;margin-bottom:20px}.home-hero-text h2{font-size:1.1rem;margin-bottom:4px}.home-hero-text p{font-size:.8rem;margin-bottom:12px}.quick-action-btn{font-size:.78rem;padding:6px 10px}}
/* ── IMPROVED SUBJECT CARDS ── */
.subject-card{transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s,border-color .25s}
.subject-card:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(66,85,255,.16),0 4px 12px rgba(0,0,0,.06);border-color:rgba(66,85,255,.22)}
.subject-card .icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.subject-card:hover .icon{transform:scale(1.18) rotate(-5deg)}
/* ── SIDEBAR UPGRADE ── */
.sidebar{background:#fff;backdrop-filter:none}
/* ── CONTENT HEADER UPGRADE ── */
.content-header{margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--border)}
.content-header h2{font-size:1.5rem;color:var(--primary);margin-bottom:2px;font-weight:700}
/* ── QUIZ CARD UPGRADE ── */
.quiz-container{border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .2s}
.question-card{padding-bottom:20px;margin-bottom:20px}
/* ── DASH STAT UPGRADE ── */
.dash-stat{border-radius:14px;border-left:3px solid var(--primary);padding:20px 18px}
/* ── HEADER H1 UPGRADE ── */
.header h1{font-size:1.25rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;color:#fff}
/* ── USER AVATAR COLORS ── */
.acct-trigger .avatar[data-color]{background:var(--av-bg,rgba(255,255,255,.25));color:var(--av-fg,#fff)}
.acct-av-lg[data-color]{background:var(--av-bg,rgba(255,255,255,.22));color:var(--av-fg,#fff)}
/* ── ACCOUNT DROPDOWN ── */
.user-badge-wrap{position:relative;flex-shrink:0}
.acct-trigger{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;padding:5px 10px 5px 6px;border-radius:20px;cursor:pointer;font-size:.82rem;font-weight:500;transition:all .2s;font-family:'Inter',sans-serif}
.acct-trigger:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.acct-trigger .avatar{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0}
.acct-trigger .chevron{font-size:.6rem;opacity:.65;transition:transform .2s;margin-left:1px}
.acct-trigger.open .chevron{transform:rotate(180deg)}
.acct-name-label{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;width:292px;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 48px rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.08);z-index:300;overflow:hidden;animation:dropIn .15s ease-out}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.acct-menu-hdr{padding:18px 18px 16px;background:linear-gradient(135deg,#0c2460 0%,#1a3fa8 55%,#4255ff 100%);color:#fff;display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden}
.acct-menu-hdr::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 90% 0%,rgba(255,255,255,.1),transparent 60%);pointer-events:none}
.acct-av-lg{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;flex-shrink:0;border:2px solid rgba(255,255,255,.25);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.acct-hdr-info{min-width:0;flex:1}
.acct-m-name{font-weight:700;font-size:.95rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-m-email{font-size:.73rem;opacity:.65;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-divider{height:1px;background:var(--border);margin:4px 0}
.acct-item{width:100%;padding:10px 16px;border:none;background:none;text-align:left;font-size:.87rem;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:11px;color:var(--text);transition:background .12s;font-weight:500}
.acct-item:hover{background:rgba(66,85,255,.06);color:var(--primary)}
.acct-item:hover .acct-icon{opacity:1;color:var(--primary)}
.acct-icon{display:flex;align-items:center;justify-content:center;width:20px;flex-shrink:0;opacity:.55;transition:opacity .12s,color .12s}
.acct-item.acct-danger{color:#dc2626}
.acct-item.acct-danger:hover{background:rgba(220,38,38,.06);color:#dc2626}
.acct-item.acct-danger:hover .acct-icon{color:#dc2626}
.acct-theme-row{padding:8px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.acct-theme-label{display:flex;align-items:center;gap:11px;font-size:.87rem;color:var(--text);font-weight:500;opacity:.9;flex-shrink:0}
.acct-theme-label .acct-icon{opacity:.55}
@media(max-width:600px){.acct-theme-row{flex-direction:column;align-items:flex-start;gap:8px}
.theme-seg{width:100%}.theme-seg button{flex:1}}
.theme-seg{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px;flex-shrink:0}
.theme-seg button{padding:6px 14px;border:none;background:none;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--text-light);transition:all .2s cubic-bezier(.4,0,.2,1);font-family:'Inter',sans-serif;border-radius:8px;letter-spacing:.01em;white-space:nowrap}
.theme-seg button.active{background:var(--primary);color:#fff;box-shadow:0 1px 4px rgba(66,85,255,.3)}
@media(max-width:768px){.acct-name-label{display:none}.acct-trigger{padding:5px 8px 5px 6px}.acct-menu{right:-8px;width:272px}}
/* ── DARK MODE ── */
/* ── DARK MODE — premium night theme ── */
[data-theme="dark"]{--bg:#0b0d14;--card:rgba(18,20,30,.95);--text:#e4e7ff;--text-light:#7880a8;--border:rgba(66,85,255,.1);--shadow:0 2px 8px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);--shadow-lg:0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3)}
[data-theme="dark"] body{background:#0b0d14}
[data-theme="dark"] .header{background:linear-gradient(135deg,#060818 0%,#0a1333 30%,#121f55 60%,#1a2d6b 100%);box-shadow:0 4px 24px rgba(0,0,0,.5), 0 1px 2px rgba(66,85,255,.15);border-bottom:1px solid rgba(66,85,255,.12)}
[data-theme="dark"] .sidebar{background:linear-gradient(180deg, rgba(14,16,24,.98), rgba(10,12,18,.96));border-right:1px solid rgba(66,85,255,.08);box-shadow:4px 0 24px rgba(0,0,0,.3)}
[data-theme="dark"] .sidebar-item:hover{background:rgba(66,85,255,.1)}
[data-theme="dark"] .sidebar-item.active{background:rgba(66,85,255,.12);box-shadow:inset 3px 0 0 #6374ff, 0 2px 12px rgba(66,85,255,.15)}
[data-theme="dark"] .auth-screen{background:linear-gradient(160deg, #0b0d14 0%, #0e1220 50%, #111628 100%)}
[data-theme="dark"] .auth-card{background:rgba(18,20,30,.96);border:1px solid rgba(66,85,255,.12);box-shadow:0 4px 12px rgba(0,0,0,.3), 0 16px 48px rgba(66,85,255,.08), 0 32px 80px rgba(0,0,0,.4)}
[data-theme="dark"] .auth-form input{background:rgba(10,12,20,.8);color:var(--text);border-color:rgba(66,85,255,.12)}
[data-theme="dark"] .auth-form input:focus{border-color:#6374ff;box-shadow:0 0 0 3px rgba(66,85,255,.2)}
[data-theme="dark"] .subject-card{background:linear-gradient(145deg, rgba(18,20,30,.96), rgba(22,25,38,.94));border-color:rgba(66,85,255,.1);box-shadow:0 2px 8px rgba(0,0,0,.3), 0 8px 24px rgba(66,85,255,.06)}
[data-theme="dark"] .subject-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.4), 0 16px 48px rgba(66,85,255,.12);border-color:rgba(66,85,255,.2)}
[data-theme="dark"] .subject-card h3{color:var(--text)}
[data-theme="dark"] .subject-card .stats span{background:rgba(66,85,255,.12);border-color:rgba(66,85,255,.2);color:#8b9dff}
[data-theme="dark"] .subject-card .progress-bar{background:rgba(66,85,255,.12)}
[data-theme="dark"] .request-card{border-color:rgba(66,85,255,.15);background:rgba(66,85,255,.04)}
[data-theme="dark"] .request-card:hover{border-color:rgba(66,85,255,.3);background:rgba(66,85,255,.08)}
[data-theme="dark"] .study-content{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .quiz-container{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .option-btn{background:rgba(14,16,24,.9);border-color:rgba(66,85,255,.1);color:var(--text)}
[data-theme="dark"] .option-btn:hover:not(.disabled){background:rgba(66,85,255,.1);border-color:rgba(66,85,255,.3);box-shadow:0 4px 16px rgba(66,85,255,.1)}
[data-theme="dark"] .flashcard-front{background:linear-gradient(145deg, rgba(18,20,30,.96), rgba(22,25,38,.94));border-color:rgba(66,85,255,.12);color:var(--text)}
[data-theme="dark"] .score-card{background:linear-gradient(145deg, rgba(18,20,30,.96), rgba(22,25,38,.94));border-color:rgba(66,85,255,.1)}
[data-theme="dark"] .dash-stat{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .dash-stat:hover{box-shadow:0 8px 24px rgba(66,85,255,.1)}
[data-theme="dark"] .dash-subject{background:rgba(18,20,30,.95)}
[data-theme="dark"] .acct-menu{background:rgba(18,20,30,.98);border-color:rgba(66,85,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.4)}
[data-theme="dark"] .acct-item{color:var(--text)}
[data-theme="dark"] .acct-item:hover{background:rgba(66,85,255,.12);color:#8b9dff}
[data-theme="dark"] .theme-seg{background:rgba(10,12,20,.8);border-color:rgba(66,85,255,.12)}
[data-theme="dark"] .theme-seg button{color:var(--text-light)}
[data-theme="dark"] .modal{background:rgba(18,20,30,.98);border:1px solid rgba(66,85,255,.1)}
[data-theme="dark"] .edit-modal{background:rgba(18,20,30,.98)}
[data-theme="dark"] .card-menu{background:rgba(18,20,30,.98);border-color:rgba(66,85,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.4)}
[data-theme="dark"] .card-menu button{color:var(--text)}
[data-theme="dark"] .card-menu button:hover{background:rgba(66,85,255,.12)}
[data-theme="dark"] .search-pill.open{background:rgba(24,26,40,.95);border-color:rgba(66,85,255,.3)}
[data-theme="dark"] .search-pill.open .search-input{color:#e0e0e0}
[data-theme="dark"] .search-pill.open .search-input::placeholder{color:rgba(255,255,255,.35)}
[data-theme="dark"] .search-pill.open .search-pill-icon{color:#8b9dff}
[data-theme="dark"] .search-pill.open .search-pill-close{color:rgba(255,255,255,.5)}
[data-theme="dark"] .search-pill.open .search-pill-close:hover{color:#fff}
[data-theme="dark"] .search-results{background:rgba(18,20,30,.98);border-color:rgba(66,85,255,.12)}
[data-theme="dark"] .search-result{border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .search-result:hover{background:rgba(66,85,255,.1)}
[data-theme="dark"] .study-content table{background:rgba(14,16,24,.9);border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .study-content th{background:rgba(22,25,40,.9);border-color:rgba(66,85,255,.1);color:#8b9dff;font-weight:600;padding:12px 14px}
[data-theme="dark"] .study-content td{background:rgba(14,16,24,.9);border-color:rgba(66,85,255,.08);color:var(--text);padding:12px 14px}
[data-theme="dark"] .study-content tbody tr:hover{background:rgba(66,85,255,.06)}
[data-theme="dark"] .study-content .tip{background:rgba(35,178,109,.08);border-left-color:#23b26d;color:var(--text)}
[data-theme="dark"] .study-content .warning{background:rgba(245,158,11,.08);border-left-color:#f59e0b;color:var(--text)}
[data-theme="dark"] .study-content .formula{background:rgba(66,85,255,.1);border-left-color:#6374ff;color:#c7d0ff}
[data-theme="dark"] .download-section{background:transparent;border-color:rgba(66,85,255,.12)}
[data-theme="dark"] .download-section:hover{background:rgba(66,85,255,.08);border-color:rgba(66,85,255,.25)}
[data-theme="dark"] .download-section .dl-icon{color:#8b9dff}
[data-theme="dark"] .download-section .dl-info h3{color:#8b9dff}
[data-theme="dark"] .timer-widget{background:rgba(18,20,30,.95);border:1px solid rgba(66,85,255,.1)}
[data-theme="dark"] input:not([type="range"]),[data-theme="dark"] textarea,[data-theme="dark"] select{background:rgba(10,12,20,.8);color:var(--text);border-color:rgba(66,85,255,.12)}
[data-theme="dark"] .unit-notes{background:rgba(18,20,30,.95)}
[data-theme="dark"] .hw-page{background:#0b0d14}
[data-theme="dark"] .hw-upload-panel,[data-theme="dark"] .hw-chat-panel{background:rgba(14,16,24,.95);border-color:rgba(66,85,255,.1)}
[data-theme="dark"] .explanation{background:rgba(30,34,53,.9);border-left-color:#6374ff;color:var(--text)}
[data-theme="dark"] .hw-drop-zone{background:rgba(10,12,20,.8);border-color:rgba(66,85,255,.12)}
[data-theme="dark"] .hw-message.ai{background:rgba(30,34,53,.9);color:var(--text)}
[data-theme="dark"] .lb-row{background:rgba(18,20,30,.95)}
[data-theme="dark"] .tab-bar{border-color:transparent}
[data-theme="dark"] .tab-btn{background:rgba(22,25,38,.9);border-color:rgba(66,85,255,.12);color:#7880a8}
[data-theme="dark"] .tab-btn.active{background:linear-gradient(135deg,#4255ff,#6374ff);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(66,85,255,.3)}
[data-theme="dark"] .tab-btn:hover:not(.active){background:rgba(66,85,255,.12);border-color:rgba(66,85,255,.25);color:#8b9dff}
[data-theme="dark"] .content-header{border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .game-card{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.1)}
[data-theme="dark"] .game-question{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.1);color:var(--text)}
[data-theme="dark"] .game-result{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.1)}
[data-theme="dark"] .game-arena input{background:rgba(10,12,20,.8);color:var(--text);border-color:rgba(66,85,255,.12)}
[data-theme="dark"] .home-hero{box-shadow:0 4px 12px rgba(0,0,0,.3), 0 12px 36px rgba(66,85,255,.2), 0 24px 60px rgba(0,0,0,.3);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .hero-stat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .admin-panel{background:rgba(18,20,30,.98);border-color:rgba(66,85,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.4), 0 24px 64px rgba(66,85,255,.08)}
[data-theme="dark"] .admin-user-v2{background:rgba(14,16,24,.9);border-color:rgba(66,85,255,.08)}
[data-theme="dark"] .admin-user-v2:hover{border-color:rgba(66,85,255,.2);box-shadow:0 6px 20px rgba(66,85,255,.08)}
[data-theme="dark"] .admin-section h4{color:#7880a8}
[data-theme="dark"] .au2-check-label{background:rgba(10,12,20,.8);border-color:rgba(66,85,255,.12)}
[data-theme="dark"] .au2-check-label:hover{border-color:rgba(66,85,255,.3);background:rgba(66,85,255,.08)}
[data-theme="dark"] .au2-tier select{background:rgba(10,12,20,.8);border-color:rgba(66,85,255,.12);color:var(--text)}
[data-theme="dark"] .weak-spots-panel{background:rgba(18,20,30,.95);border-color:rgba(245,158,11,.12)}
[data-theme="dark"] .notif-bell{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(66,85,255,.2)}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(66,85,255,.35)}
[data-theme="dark"] ::selection{background:rgba(66,85,255,.3)}
/* ── ACCOUNT SETTINGS MODAL ── */
.acct-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.acct-modal-overlay.show{display:flex}
.acct-modal{background:var(--card);border-radius:20px;padding:0;max-width:420px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.acct-modal-hdr{background:linear-gradient(135deg,#0f2d6b,#4255ff);color:#fff;padding:20px 24px;display:flex;align-items:center;justify-content:space-between}
.acct-modal-hdr h3{margin:0;font-size:1.05rem;font-weight:700}
.acct-modal-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:1.4rem;cursor:pointer;line-height:1}
.acct-modal-close:hover{color:#fff}
.acct-modal-body{padding:24px}
.acct-field{margin-bottom:18px}
.acct-field label{display:block;font-size:.8rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.acct-field input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:.92rem;background:var(--bg);color:var(--text);box-sizing:border-box;transition:border-color .15s}
.acct-field input:focus{outline:none;border-color:var(--primary)}
.acct-field input[disabled]{opacity:.6;cursor:not-allowed}
.acct-section-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-light);margin:20px 0 12px;padding-top:16px;border-top:1px solid var(--border)}
.acct-msg{font-size:.83rem;min-height:18px;margin-bottom:12px}
.acct-msg.err{color:#dc2626}
.acct-msg.ok{color:var(--success)}
/* ═══════════════════════════════════════════════════
ACEPATH V2 VISUAL REFRESH — ARTY EDITION
Smoother · Glassier · More alive
═══════════════════════════════════════════════════ */
/* FOUC prevention — fade in after auth resolves */
html { opacity: 0; transition: opacity .28s ease; touch-action: manipulation; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior-x: none; overflow-x: hidden; background: var(--bg); }
.app, .main, .sidebar { overscroll-behavior: contain; }
html.ready { opacity: 1; }
/* ── Global Ambient Background ── */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 10% 10%, rgba(66,85,255,.07) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 85% 15%, rgba(139,157,255,.06) 0%, transparent 55%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(66,85,255,.04) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Floating orbs — site-wide ambient decoration */
#app-orbs {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
animation: orbFloat linear infinite;
opacity: 0;
will-change: transform, opacity;
}
.orb-1 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(66,85,255,.10) 0%, transparent 70%); top: -80px; left: 5%; animation-duration: 28s; animation-delay: 0s; }
.orb-2 { width: 240px; height: 240px; background: radial-gradient(circle, rgba(139,157,255,.09) 0%, transparent 70%); top: 30%; right: -60px; animation-duration: 22s; animation-delay: -8s; }
.orb-3 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(35,178,109,.07) 0%, transparent 70%); bottom: 10%; left: 15%; animation-duration: 32s; animation-delay: -15s; }
.orb-4 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,205,31,.07) 0%, transparent 70%); top: 60%; right: 20%; animation-duration: 19s; animation-delay: -5s; }
@keyframes orbFloat {
0% { transform: translate(0, 0) scale(1); opacity: .6; }
25% { transform: translate(30px, -40px) scale(1.05); }
50% { transform: translate(60px, 20px) scale(.97); opacity: 1; }
75% { transform: translate(20px, 50px) scale(1.03); }
100% { transform: translate(0, 0) scale(1); opacity: .6; }
}
/* ── App shell sits above orbs ── */
.app, .auth-screen { position: relative; z-index: 1; }
/* ── FOUC Loading bar ── */
#page-loader {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #4255ff, #8b9dff, #4255ff);
background-size: 200%;
animation: loaderSlide 1.2s ease infinite;
z-index: 9999;
transition: opacity .3s;
}
#page-loader.done { opacity: 0; pointer-events: none; }
@keyframes loaderSlide { 0% { background-position: 0% } 100% { background-position: 200% } }
/* ── Alerts / notif-bell ── */
.notif-bell {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 5px;
margin-left: 6px;
flex-shrink: 0;
}
/* ── Subject card grid — breathing room ── */
.subject-cards {
gap: 22px !important;
}
/* ── Glow ring on card hover ── */
.subject-card::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(66,85,255,.12), rgba(139,157,255,.08), rgba(35,178,109,.06));
z-index: -1;
opacity: 0;
transition: opacity .35s;
pointer-events: none;
}
.subject-card:hover::after { opacity: 1; }
/* ── Extra bubble layers on hero ── */
.home-hero::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(255,255,255,.1) 0%, rgba(255,255,255,.03) 50%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: heroBubble1 8s ease-in-out infinite;
}
.home-hero::after {
content: '';
position: absolute;
bottom: -50px; left: 30%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
animation: heroBubble2 10s ease-in-out infinite;
}
@keyframes heroBubble1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,15px) scale(1.08)} }
@keyframes heroBubble2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(15px,-20px) scale(.92)} }
/* Admin user cards V2 */
.admin-user-v2 {
background: #fff;
border: 1px solid rgba(66,85,255,.1);
border-radius: 16px;
padding: 16px;
margin-bottom: 10px;
transition: all .2s;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.admin-user-v2:hover {
box-shadow: 0 6px 20px rgba(66,85,255,.1);
border-color: rgba(66,85,255,.2);
transform: translateY(-1px);
}
.admin-user-v2 .au2-top { display: flex; align-items: center; gap: 12px; }
.admin-user-v2 .au2-avatar {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1.1rem; flex-shrink: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.pending-av { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.approved-av { background: linear-gradient(135deg, #34d399, #10b981); color: #fff; }
.admin-av { background: linear-gradient(135deg, #4255ff, #6366f1); color: #fff; }
.denied-av { background: linear-gradient(135deg, #f87171, #ef4444); color: #fff; }
.admin-user-v2 .au2-info { flex: 1; min-width: 0; }
.admin-user-v2 .au2-name { font-weight: 700; font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-v2 .au2-email { font-size: .75rem; color: var(--text-light); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-v2 .au2-badge {
font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 20px;
text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0;
}
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-approved { background: #d1fae5; color: #065f46; }
.badge-admin { background: #e0e7ff; color: #3730a3; }
.badge-denied { background: #fee2e2; color: #991b1b; }
.admin-user-v2 .au2-actions { display: flex; gap: 6px; margin-top: 10px; }
.admin-user-v2 .au2-actions button {
padding: 6px 12px; border: none; border-radius: 8px;
font-size: .78rem; font-weight: 700; cursor: pointer;
transition: all .15s; font-family: 'Inter', sans-serif;
}
.btn-approve { background: #d1fae5; color: #065f46; }
.btn-approve:hover { background: #a7f3d0; transform: scale(1.04); }
.btn-deny { background: #fee2e2; color: #991b1b; }
.btn-deny:hover { background: #fecaca; transform: scale(1.04); }
.btn-admin { background: #e0e7ff; color: #3730a3; }
.btn-admin:hover { background: #c7d2fe; transform: scale(1.04); }
.admin-user-v2 .au2-courses {
margin-top: 10px; padding-top: 10px;
border-top: 1px solid rgba(66,85,255,.08);
display: flex; flex-wrap: wrap; gap: 6px;
}
.au2-course-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: 10px; font-size: .72rem; font-weight: 600;
background: rgba(66,85,255,.08); color: var(--primary);
border: 1px solid rgba(66,85,255,.15);
}
.admin-user-v2 .au2-tier {
margin-top: 8px;
display: flex; align-items: center; gap: 8px;
}
.au2-tier label { font-size: .72rem; font-weight: 600; color: var(--text-light); }
.au2-tier select {
font-size: .78rem; padding: 4px 8px;
border-radius: 8px; border: 1px solid rgba(66,85,255,.2);
background: rgba(66,85,255,.04); color: var(--text);
cursor: pointer; font-family: inherit;
}
.admin-section h4 {
font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
color: var(--text-light); font-weight: 700;
padding: 12px 4px 8px; margin: 0;
}
/* Course checkboxes */
.au2-course-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.au2-check-label {
display: flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 10px;
font-size: .73rem; font-weight: 600; cursor: pointer;
background: var(--bg); border: 1px solid var(--border);
transition: all .15s; user-select: none;
}
.au2-check-label:hover { border-color: var(--primary); background: rgba(66,85,255,.05); }
.au2-check-label input[type=checkbox] { cursor: pointer; accent-color: var(--primary); }
/* ── Progress bar — smoother ── */
.progress-bar .fill { transition: width .8s cubic-bezier(.4,0,.2,1) !important; }
/* ── Smooth page transitions ── */
.study-content, .quiz-container, .flashcard-container, .home, .dashboard {
animation: v2FadeUp .4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes v2FadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(66,85,255,.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(66,85,255,.3); }
/* ── Text selection ── */
::selection { background: rgba(66,85,255,.2); color: var(--text); }
/* ── Auth card entrance animation ── */
@keyframes authCardIn {
from { opacity: 0; transform: translateY(24px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Dark mode orbs ── */
/* ── Admin Courses FAB ── */
.admin-fab-dock{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:180;display:none;align-items:center;gap:12px}
.admin-fab-dock.visible{display:flex}
.admin-workspace-fab,.admin-courses-fab{border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:transform .2s,box-shadow .2s,filter .2s;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.admin-workspace-fab{padding:14px 24px;border-radius:999px;background:linear-gradient(135deg,#f7d877 0%,#f0b63a 42%,#c98312 100%);color:#2a1600;font-size:.92rem;font-weight:800;letter-spacing:.01em;box-shadow:0 16px 36px rgba(201,131,18,.38), inset 0 1px 0 rgba(255,255,255,.48);position:relative;overflow:hidden}
.admin-workspace-fab::before{content:'';position:absolute;inset:-40% auto -40% -25%;width:44%;background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));transform:rotate(18deg);animation:adminFabSweep 3.2s ease-in-out infinite}
.admin-workspace-fab:hover,.admin-courses-fab:hover{transform:translateY(-2px)}
.admin-workspace-fab:hover{box-shadow:0 20px 42px rgba(201,131,18,.48), inset 0 1px 0 rgba(255,255,255,.52);filter:saturate(1.05)}
.admin-courses-fab{padding:12px 20px;border-radius:999px;background:rgba(13,31,92,.94);color:#fff;font-size:.84rem;font-weight:700;box-shadow:0 10px 28px rgba(13,31,92,.25)}
.admin-courses-fab:hover{box-shadow:0 14px 32px rgba(13,31,92,.35)}
@keyframes adminFabSweep{0%,18%{transform:translateX(-170%) rotate(18deg)}55%{transform:translateX(260%) rotate(18deg)}100%{transform:translateX(260%) rotate(18deg)}}
@media (max-width:680px){
.admin-fab-dock{width:calc(100% - 24px);bottom:16px;gap:10px}
.admin-workspace-fab,.admin-courses-fab{flex:1}
.admin-workspace-fab{padding:14px 16px;font-size:.88rem}
.admin-courses-fab{padding:13px 16px}
}
/* ── Admin Courses Overview Modal ── */
.admin-courses-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s}
.admin-courses-modal.show{opacity:1;pointer-events:auto}
.admin-courses-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.admin-courses-modal-box{position:relative;background:var(--card);border-radius:20px;width:100%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.18);overflow:hidden;transform:translateY(12px) scale(.97);transition:transform .2s}
.admin-courses-modal.show .admin-courses-modal-box{transform:none}
.admin-courses-modal-hdr{padding:18px 22px;background:linear-gradient(135deg,#0d1f5c,#2e55cc,#4255ff);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.admin-courses-modal-hdr h3{margin:0;font-size:1.05rem;font-weight:700}
.admin-courses-modal-body{overflow-y:auto;padding:16px}
.acm-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--bg);margin-bottom:8px;transition:background .15s}
.acm-row:hover{background:rgba(66,85,255,.06)}
.acm-icon{font-size:1.6rem;flex-shrink:0;width:42px;text-align:center}
.acm-info{flex:1;min-width:0}
.acm-title{font-weight:700;font-size:.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acm-meta{font-size:.75rem;color:var(--text-light);margin-top:2px}
.acm-enrolled{background:#eef2ff;color:#3730a3;border-radius:20px;padding:3px 10px;font-size:.72rem;font-weight:700;flex-shrink:0}
[data-theme="dark"] .acm-row{background:rgba(14,16,24,.7)}
[data-theme="dark"] .acm-enrolled{background:rgba(66,85,255,.2);color:#8b9dff}
/* ── Course Voice AI Chat ── */
.course-ai-btn{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(66,85,255,.1),rgba(139,157,255,.1));border:1.5px solid rgba(66,85,255,.2);color:var(--primary);border-radius:20px;padding:5px 12px;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;flex-shrink:0}
.course-ai-btn:hover{background:rgba(66,85,255,.15);border-color:rgba(66,85,255,.4);transform:scale(1.04)}
/* Full-screen overlay */
.vcp-overlay{position:fixed;inset:0;background:rgba(4,8,24,.88);backdrop-filter:blur(12px);z-index:248;opacity:0;pointer-events:none;transition:opacity .35s}
.vcp-overlay.open{opacity:1;pointer-events:auto}
/* Voice call panel — phone-call style */
.voice-chat-panel{position:fixed;inset:0;z-index:249;display:flex;flex-direction:column;background:linear-gradient(160deg,#060d2e 0%,#0a1645 45%,#0c1a55 100%);opacity:0;transform:scale(.96);pointer-events:none;transition:all .35s cubic-bezier(.4,0,.2,1);overflow:hidden}
.voice-chat-panel.open{opacity:1;transform:none;pointer-events:auto}
@media(min-width:640px){
.voice-chat-panel{inset:auto;bottom:20px;left:50%;transform:translateX(-50%) scale(.96);width:400px;height:680px;border-radius:30px;box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.voice-chat-panel.open{transform:translateX(-50%) scale(1)}
}
/* Top bar */
.vcp-topbar{padding:18px 18px 0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.vcp-subject-badge{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:6px 14px;max-width:65%}
.vcp-subject-icon{font-size:1.1rem}
.vcp-subject-name{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcp-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.vcp-close:hover{background:rgba(255,255,255,.22);color:#fff}
/* Status area */
.vcp-status-area{display:flex;flex-direction:column;align-items:center;padding:18px 16px 10px;flex-shrink:0}
.vcp-status-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:20px;transition:all .3s}
.vcp-status-label.idle{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)}
.vcp-status-label.listening{background:rgba(255,205,30,.15);color:#ffcd1f;animation:vcpStatusPulse 1.5s infinite}
.vcp-status-label.thinking{background:rgba(139,157,255,.15);color:#8b9dff}
.vcp-status-label.speaking{background:rgba(125,255,179,.12);color:#7dffb3}
@keyframes vcpStatusPulse{0%,100%{opacity:1}50%{opacity:.5}}
/* Central avatar / waveform */
.vcp-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 20px;min-height:0}
.vcp-avatar-ring{position:relative;width:110px;height:110px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vcp-ring1,.vcp-ring2{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(66,85,255,.35);transform:scale(1)}
.vcp-avatar-ring.listening .vcp-ring1{animation:vcpRingOut 1.4s ease-out infinite}
.vcp-avatar-ring.listening .vcp-ring2{animation:vcpRingOut 1.4s ease-out .5s infinite}
.vcp-avatar-ring.speaking .vcp-ring1{animation:vcpRingOut 1s ease-out infinite;border-color:rgba(125,255,179,.4)}
.vcp-avatar-ring.speaking .vcp-ring2{animation:vcpRingOut 1s ease-out .35s infinite;border-color:rgba(125,255,179,.25)}
@keyframes vcpRingOut{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.75);opacity:0}}
.vcp-avatar-inner{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#2a3bbf,#4255ff,#7a8dff);display:flex;align-items:center;justify-content:center;font-size:2.2rem;box-shadow:0 6px 24px rgba(66,85,255,.45),0 0 0 3px rgba(66,85,255,.2)}
/* Live waveform bars */
.vcp-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:40px;flex-shrink:0}
.vcp-wave-bar{width:4px;border-radius:4px;background:linear-gradient(to top,#4255ff,#a5b4ff);transition:height .1s}
.vcp-wave.listening .vcp-wave-bar{animation:vcpBarListen 0.8s ease-in-out infinite}
.vcp-wave.speaking .vcp-wave-bar{animation:vcpBarSpeak 1s ease-in-out infinite;background:linear-gradient(to top,#34d399,#7dffb3)}
.vcp-wave.idle .vcp-wave-bar{height:4px !important;opacity:.3}
.vcp-wave-bar:nth-child(1){height:10px;animation-delay:0s}
.vcp-wave-bar:nth-child(2){height:18px;animation-delay:.08s}
.vcp-wave-bar:nth-child(3){height:28px;animation-delay:.16s}
.vcp-wave-bar:nth-child(4){height:36px;animation-delay:.24s}
.vcp-wave-bar:nth-child(5){height:28px;animation-delay:.16s}
.vcp-wave-bar:nth-child(6){height:18px;animation-delay:.08s}
.vcp-wave-bar:nth-child(7){height:10px;animation-delay:0s}
@keyframes vcpBarListen{0%,100%{transform:scaleY(.3);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@keyframes vcpBarSpeak{0%,100%{transform:scaleY(.5);opacity:.7}50%{transform:scaleY(1.1);opacity:1}}
/* Transcript / last line */
.vcp-transcript{max-height:56px;overflow:hidden;text-align:center;font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.5;padding:0 8px;flex-shrink:0}
.vcp-transcript span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Conversation log (collapsible) */
.vcp-log{flex:1;overflow-y:auto;padding:0 16px 8px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(66,85,255,.25) transparent;max-height:220px}
.vcp-msg{max-width:85%;padding:9px 13px;border-radius:16px;font-size:.82rem;line-height:1.5;word-break:break-word;animation:vcpMsgIn .2s ease-out}
@keyframes vcpMsgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.vcp-msg.user{align-self:flex-end;background:linear-gradient(135deg,#3a4fd4,#4255ff);color:#fff;border-bottom-right-radius:4px}
.vcp-msg.ai{align-self:flex-start;background:rgba(255,255,255,.07);color:#d8deff;border:1px solid rgba(255,255,255,.07);border-bottom-left-radius:4px}
/* Bottom controls */
.vcp-controls{padding:16px 24px 28px;display:flex;align-items:center;justify-content:center;gap:24px;flex-shrink:0}
.vcp-main-btn{width:76px;height:76px;border-radius:50%;border:none;cursor:pointer;font-size:1.8rem;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;flex-shrink:0}
.vcp-main-btn.idle{background:linear-gradient(135deg,#4255ff,#6374ff);box-shadow:0 6px 24px rgba(66,85,255,.5)}
.vcp-main-btn.idle:hover{transform:scale(1.08);box-shadow:0 10px 32px rgba(66,85,255,.65)}
.vcp-main-btn.listening{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 6px 24px rgba(239,68,68,.5);animation:vcpPulse 1.2s infinite}
.vcp-main-btn.speaking,.vcp-main-btn.thinking{background:rgba(255,255,255,.1);cursor:default;box-shadow:none}
.vcp-side-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.vcp-side-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.vcp-side-btn.active{background:rgba(66,85,255,.3);border-color:rgba(66,85,255,.5);color:#8b9dff}
.vcp-type-row{display:none;padding:0 16px 12px;gap:8px}
.vcp-type-row.show{display:flex}
.vcp-input{flex:1;padding:10px 14px;border:1.5px solid rgba(255,255,255,.1);border-radius:14px;font-family:inherit;font-size:.84rem;resize:none;min-height:40px;max-height:72px;overflow-y:auto;background:rgba(255,255,255,.07);color:#fff;caret-color:#8b9dff;transition:border-color .2s}
.vcp-input::placeholder{color:rgba(255,255,255,.3)}
.vcp-input:focus{outline:none;border-color:rgba(66,85,255,.7)}
.vcp-type-send{width:40px;height:40px;border-radius:50%;border:none;background:linear-gradient(135deg,#4255ff,#6374ff);color:#fff;cursor:pointer;font-size:.95rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@keyframes vcpPulse{0%,100%{box-shadow:0 6px 24px rgba(239,68,68,.5),0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 6px 24px rgba(239,68,68,.5),0 0 0 14px rgba(239,68,68,0)}}
/* ── Dark mode — admin panel tabs ── */
[data-theme="dark"] .admin-panel-body{background:rgba(14,16,24,.95)}
[data-theme="dark"] #adminTab-users,[data-theme="dark"] #adminTab-progress,[data-theme="dark"] #adminTab-analytics,[data-theme="dark"] #adminTab-courseBuilder{background:rgba(14,16,24,.9);color:var(--text-light);border:none}
[data-theme="dark"] .badge-pending{background:rgba(254,243,199,.15);color:#fbbf24}
[data-theme="dark"] .badge-approved{background:rgba(209,250,229,.1);color:#34d399}
[data-theme="dark"] .badge-admin{background:rgba(224,231,255,.1);color:#8b9dff}
[data-theme="dark"] .badge-denied{background:rgba(254,226,226,.1);color:#f87171}
[data-theme="dark"] .btn-approve{background:rgba(209,250,229,.12);color:#34d399}
[data-theme="dark"] .btn-deny{background:rgba(254,226,226,.12);color:#f87171}
[data-theme="dark"] .btn-admin{background:rgba(224,231,255,.12);color:#8b9dff}
[data-theme="dark"] .au2-course-chip{background:rgba(66,85,255,.15);color:#8b9dff;border-color:rgba(66,85,255,.25)}
[data-theme="dark"] .quick-action-btn{background:rgba(66,85,255,.1);border-color:rgba(66,85,255,.2);color:var(--text)}
/* Dark mode ambient orbs — deeper glow */
[data-theme="dark"] body::before {
background:
radial-gradient(ellipse 60% 40% at 10% 10%, rgba(66,85,255,.15) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 85% 15%, rgba(99,116,241,.10) 0%, transparent 55%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(66,85,255,.08) 0%, transparent 60%);
}
[data-theme="dark"] .orb-1 { background: radial-gradient(circle, rgba(66,85,255,.15) 0%, transparent 70%); }
[data-theme="dark"] .orb-2 { background: radial-gradient(circle, rgba(99,116,241,.12) 0%, transparent 70%); }
[data-theme="dark"] .orb-3 { background: radial-gradient(circle, rgba(35,178,109,.08) 0%, transparent 70%); }
[data-theme="dark"] .orb-4 { background: radial-gradient(circle, rgba(255,205,31,.06) 0%, transparent 70%); }
/* ── Step-by-Step dark mode ── */
[data-theme="dark"] .sbs-card{background:rgba(18,20,30,.95);border-color:rgba(66,85,255,.1);box-shadow:0 2px 8px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.2)}
[data-theme="dark"] .sbs-card-header:hover{background:rgba(66,85,255,.07)}
[data-theme="dark"] .sbs-card-title{color:var(--text)}
[data-theme="dark"] .sbs-step-expr{background:rgba(66,85,255,.08);border-color:rgba(66,85,255,.15);color:#e4e7ff}
[data-theme="dark"] .sbs-step-num{background:var(--primary);box-shadow:0 2px 8px rgba(66,85,255,.4)}
[data-theme="dark"] .sbs-step-label{color:#7880a8}
[data-theme="dark"] .sbs-step-note{color:#7880a8}
[data-theme="dark"] .sbs-header h3{color:#8b9dff}
[data-theme="dark"] .sbs-header p{color:#7880a8}
[data-theme="dark"] .sbs-restart-btn{color:#8b9dff;border-color:rgba(66,85,255,.25)}
[data-theme="dark"] .sbs-restart-btn:hover{background:rgba(66,85,255,.1);border-color:rgba(66,85,255,.45)}
[data-theme="dark"] .sbs-progress{background:rgba(66,85,255,.12)}
[data-theme="dark"] .sbs-no-math{color:#7880a8}
[data-theme="dark"] .sbs-step-connector{background:linear-gradient(180deg,rgba(66,85,255,.25),rgba(66,85,255,.06))}
.formulas-container { padding: 4px 0; }
.formula-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: box-shadow .2s; }
.formula-card:hover { box-shadow: 0 4px 18px rgba(66,85,255,.10); }
.formula-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; }
.formula-card-emoji { font-size: 1.5rem; flex-shrink: 0; }
.formula-card-title-block { flex: 1; min-width: 0; }
.formula-card-name { font-weight: 700; font-size: .97rem; color: var(--text); display: block; }
.formula-card-formula { font-family: 'Courier New', monospace; font-size: .82rem; color: var(--primary); background: rgba(66,85,255,.07); padding: 3px 7px; border-radius: 6px; display: inline-block; margin-top: 4px; white-space: pre-line; }
.formula-card-chevron { font-size: .85rem; color: var(--text-light); transition: transform .25s; flex-shrink: 0; }
.formula-card-chevron.open { transform: rotate(180deg); }
.formula-card-body { padding: 0 16px 14px 16px; border-top: 1px solid var(--border); }
.formula-when { font-size: .84rem; color: var(--text-light); padding: 10px 0 8px; }
.formula-steps-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.formula-step { display: flex; gap: 10px; align-items: flex-start; }
.formula-step-num { width: 24px; height: 24px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.formula-step-body { flex: 1; }
.formula-step-label { font-size: .8rem; color: var(--text-light); font-weight: 600; }
.formula-step-expr { font-family: 'Courier New', monospace; font-size: .9rem; color: var(--text); background: var(--bg); padding: 5px 10px; border-radius: 6px; margin: 3px 0; border-left: 3px solid var(--primary); }
.formula-tip { margin-top: 10px; font-size: .84rem; background: rgba(66,85,255,.06); border-radius: 8px; padding: 9px 12px; color: var(--text); border-left: 3px solid var(--primary); }
[data-theme="dark"] .formula-card { background: rgba(22,25,38,.95); border-color: rgba(66,85,255,.18); }
[data-theme="dark"] .formula-card:hover { box-shadow: 0 4px 18px rgba(66,85,255,.18); }
[data-theme="dark"] .formula-card-header { background: transparent; }
[data-theme="dark"] .formula-card-name { color: #e4e7ff; }
[data-theme="dark"] .formula-card-formula { background: rgba(99,116,255,.18); color: #a5b4fc; border: 1px solid rgba(99,116,255,.25); }
[data-theme="dark"] .formula-card-chevron { color: #7880a8; }
[data-theme="dark"] .formula-card-body { border-top-color: rgba(66,85,255,.15); }
[data-theme="dark"] .formula-when { color: #9ca3bf; }
[data-theme="dark"] .formula-step-num { background: #6374ff; }
[data-theme="dark"] .formula-step-label { color: #9ca3bf; }
[data-theme="dark"] .formula-step-expr { background: rgba(66,85,255,.1); color: #e4e7ff; border-left-color: #6374ff; }
[data-theme="dark"] .formula-tip { background: rgba(66,85,255,.12); color: #c7d0ff; border-left-color: #6374ff; }
.ec-shell{background:linear-gradient(145deg,#05091a 0%,#090e24 60%,#0b1230 100%);border-radius:20px;padding:24px;border:1px solid rgba(99,102,241,.18);box-shadow:0 0 60px rgba(99,102,241,.08),inset 0 1px 0 rgba(255,255,255,.04);color:#e2e8f0}
.ec-title{font-size:1.4rem;font-weight:800;background:linear-gradient(90deg,#818cf8,#38bdf8,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.ec-sub{font-size:.78rem;color:rgba(148,163,184,.6);margin-bottom:20px;letter-spacing:.04em}
.ec-grid{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:12px}
.ec-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(129,140,248,.8);display:block;margin-bottom:5px}
.ec-input{width:100%;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(99,102,241,.25);border-radius:10px;font-size:.87rem;box-sizing:border-box;color:#e2e8f0;transition:border-color .2s;font-family:inherit}
.ec-input:focus{outline:none;border-color:rgba(99,102,241,.6);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.ec-input::placeholder{color:rgba(148,163,184,.3)}
.ec-textarea{width:100%;padding:14px;background:rgba(255,255,255,.03);border:1px solid rgba(99,102,241,.2);border-radius:12px;font-size:.88rem;line-height:1.8;resize:vertical;box-sizing:border-box;font-family:'Georgia',serif;color:#e2e8f0;min-height:200px;transition:border-color .2s}
.ec-textarea:focus{outline:none;border-color:rgba(129,140,248,.5);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.ec-textarea::placeholder{color:rgba(148,163,184,.25)}
.ec-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.ec-wc{font-size:.75rem;color:rgba(148,163,184,.5);font-variant-numeric:tabular-nums}
.ec-btn{padding:11px 28px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:12px;font-size:.87rem;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.02em;box-shadow:0 4px 16px rgba(99,102,241,.35)}
.ec-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(99,102,241,.5)}
.ec-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* Feedback section */
.ec-feedback{margin-top:20px;display:none}
.ec-scores{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.ec-score-ring{display:flex;flex-direction:column;align-items:center;gap:6px}
.ec-score-ring svg{width:72px;height:72px}
.ec-score-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:6}
.ec-score-ring .ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.ec-score-ring .ring-text{font-size:14px;font-weight:800;fill:#fff;dominant-baseline:middle;text-anchor:middle}
.ec-score-ring .ring-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(148,163,184,.6)}
.ec-content-box{background:rgba(255,255,255,.03);border:1px solid rgba(99,102,241,.15);border-radius:14px;padding:20px}
.ec-content-box h3{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#818cf8;margin:0 0 14px}
.ec-content-box .ec-stream{font-size:.87rem;line-height:1.85;color:#cbd5e1}
.ec-content-box .ec-stream strong{color:#e2e8f0}
.ec-content-box .ec-stream h3{color:#38bdf8;font-size:.9rem;text-transform:none;letter-spacing:0;margin:16px 0 8px}
.ec-content-box .ec-stream h4{color:#818cf8;font-size:.85rem;text-transform:none;letter-spacing:0;margin:12px 0 6px}
.ec-cursor{display:inline-block;width:2px;height:14px;background:#6366f1;animation:ecBlink .8s infinite;vertical-align:middle;margin-left:1px;border-radius:1px}
@keyframes ecBlink{0%,100%{opacity:1}50%{opacity:0}}
@media(max-width:500px){.ec-grid{grid-template-columns:1fr}}
.planner-wrap{max-width:720px}
/* ─ Header ─ */
.cal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.cal-title{font-size:1.15rem;font-weight:800;color:var(--text)}
.cal-nav-group{display:flex;gap:6px;align-items:center}
.cal-nav{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:7px 14px;cursor:pointer;font-size:.9rem;font-weight:700;color:var(--text);transition:all .18s;line-height:1}
.cal-nav:hover{background:rgba(66,85,255,.07);border-color:rgba(66,85,255,.25);transform:scale(1.04)}
.cal-nav:active{transform:scale(.96)}
.cal-month-label{font-size:.9rem;font-weight:700;color:var(--text);min-width:150px;text-align:center}
.cal-add-btn{background:linear-gradient(135deg,#4255ff,#8b9dff);color:#fff;border:none;border-radius:10px;padding:8px 16px;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 2px 10px rgba(66,85,255,.3);transition:all .2s;letter-spacing:.01em}
.cal-add-btn:hover{transform:translateY(-2px);box-shadow:0 5px 18px rgba(66,85,255,.42)}
.cal-add-btn:active{transform:scale(.97)}
/* ─ Grid ─ */
.cal-grid{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 2px 20px rgba(0,0,0,.06)}
.cal-day-names{display:grid;grid-template-columns:repeat(7,1fr);background:rgba(66,85,255,.025);border-bottom:1px solid var(--border)}
.cal-day-name{text-align:center;padding:11px 0;font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light)}
.cal-day-name:first-child{color:#ef4444}
.cal-cells{display:grid;grid-template-columns:repeat(7,1fr)}
/* ─ Cells ─ */
.cal-cell{min-height:70px;padding:9px 6px 6px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;transition:background .14s, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;will-change:transform}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell.empty{cursor:default;background:rgba(0,0,0,.014);pointer-events:none}
.cal-cell:not(.empty):not(.selected):hover{background:rgba(66,85,255,.06);transform:scale(1.04);box-shadow:0 4px 16px rgba(66,85,255,.15);z-index:2}
.cal-cell:not(.empty):not(.selected):hover .cal-date{transform:scale(1.08)}
.cal-cell.selected{background:rgba(66,85,255,.1);transform:scale(1.06);z-index:3;box-shadow:0 6px 22px rgba(66,85,255,.24)}
.cal-cell.selected .cal-date{background:var(--primary);color:#fff;transform:scale(1.1);box-shadow:0 2px 10px rgba(66,85,255,.45)}
.cal-cell.today:not(.selected) .cal-date{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(66,85,255,.35)}
.cal-cell.past:not(.selected){opacity:.48}
.cal-date{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--text);border-radius:50%;transition:all .22s cubic-bezier(.34,1.56,.64,1)}
.cal-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;max-width:46px}
.cal-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;animation:dotPop .42s cubic-bezier(.34,1.56,.64,1) both}
.cal-more{font-size:.57rem;color:var(--text-light);font-weight:700;opacity:.7}
@keyframes dotPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
/* ─ Row Expander ─ */
.cal-row-expand{grid-column:1/-1;overflow:hidden;animation:expandRow .38s cubic-bezier(.34,1.56,.64,1) both}
@keyframes expandRow{from{max-height:0;opacity:0;transform:translateY(-8px) scaleY(.92);transform-origin:top}to{max-height:700px;opacity:1;transform:translateY(0) scaleY(1)}}
.cal-expand-inner{padding:16px 18px 14px;background:linear-gradient(135deg,rgba(66,85,255,.065),rgba(66,85,255,.018));border-top:2px solid rgba(66,85,255,.2);border-bottom:1px solid rgba(66,85,255,.1)}
.pdex-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pdex-date-label{font-size:.92rem;font-weight:800;color:var(--primary);letter-spacing:-.01em}
.pdex-close{background:rgba(0,0,0,.05);border:none;cursor:pointer;font-size:.72rem;color:var(--text-light);padding:4px 8px;border-radius:6px;transition:all .15s;font-weight:700}
.pdex-close:hover{background:rgba(0,0,0,.1);color:var(--text);transform:scale(1.08)}
.pdex-events{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.pdex-ev{display:flex;align-items:center;gap:8px;font-size:.84rem;padding:8px 11px;background:var(--card);border-radius:10px;border:1px solid rgba(66,85,255,.1);animation:fadeSlideIn .28s ease both;transition:box-shadow .15s}
.pdex-ev:hover{box-shadow:0 2px 10px rgba(66,85,255,.1)}
@keyframes fadeSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.pdex-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pdex-check{width:15px;height:15px;cursor:pointer;flex-shrink:0}
.pdex-ev-label{flex:1;color:var(--text)}
.pdex-recur-badge{display:inline-block;background:rgba(168,85,247,.12);color:#a855f7;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:20px;margin-left:5px;letter-spacing:.02em}
.pdex-del{background:none;border:none;cursor:pointer;font-size:.95rem;color:var(--text-light);opacity:.4;padding:0 2px;line-height:1;transition:opacity .15s,color .15s}
.pdex-del:hover{opacity:1;color:#ef4444}
.pdex-empty{color:var(--text-light);font-size:.82rem;padding:4px 2px;font-style:italic}
/* ─ Add Task Button ─ */
.pdex-add-btn{background:none;border:2px dashed rgba(66,85,255,.28);border-radius:10px;color:var(--primary);padding:9px 16px;font-size:.83rem;font-weight:700;cursor:pointer;width:100%;text-align:center;transition:all .22s cubic-bezier(.34,1.56,.64,1)}
.pdex-add-btn:hover{background:rgba(66,85,255,.07);border-color:var(--primary);transform:translateY(-2px) scale(1.01);box-shadow:0 3px 12px rgba(66,85,255,.15)}
.pdex-add-btn:active{transform:scale(.98)}
/* ─ Task Form ─ */
.pdex-task-form{animation:formIn .32s cubic-bezier(.34,1.56,.64,1) both;margin-top:8px}
@keyframes formIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.ptf-input{width:100%;padding:10px 14px;border:1.5px solid rgba(66,85,255,.28);border-radius:10px;font-size:.88rem;background:var(--card);color:var(--text);box-sizing:border-box;margin-bottom:8px;outline:none;transition:border-color .15s,box-shadow .15s}
.ptf-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(66,85,255,.09)}
.ptf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.ptf-select{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:.82rem;background:var(--card);color:var(--text);transition:border-color .15s}
.ptf-select:focus{border-color:var(--primary);outline:none}
.ptf-actions{display:flex;gap:8px;justify-content:flex-end}
.ptf-cancel{background:none;border:1px solid var(--border);border-radius:8px;padding:7px 14px;font-size:.82rem;cursor:pointer;color:var(--text-light);transition:all .15s}
.ptf-cancel:hover{background:var(--bg);border-color:var(--text-light)}
.ptf-save{background:linear-gradient(135deg,#4255ff,#7c3aed);color:#fff;border:none;border-radius:8px;padding:7px 20px;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 2px 10px rgba(66,85,255,.3);transition:all .2s;letter-spacing:.01em}
.ptf-save:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(66,85,255,.42)}
.ptf-save:active{transform:scale(.97)}
/* ─ Plan Form (+ Schedule Plan) ─ */
.plan-form{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;margin-top:16px;overflow:hidden;max-height:0;opacity:0;transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .26s ease,padding .26s;pointer-events:none;padding-top:0;padding-bottom:0}
.plan-form.show{max-height:500px;opacity:1;pointer-events:auto;padding:18px}
.pl{font-size:.71rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);display:block;margin-bottom:4px}
.pi{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:.87rem;box-sizing:border-box;background:var(--card);color:var(--text)}
.plan-field{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
/* ─ Today Panel ─ */
.today-panel{background:linear-gradient(135deg,rgba(66,85,255,.07),rgba(66,85,255,.02));border:1px solid rgba(66,85,255,.15);border-radius:14px;padding:14px;margin-bottom:14px}
/* ─ Active Plans ─ */
.plan-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:10px;transition:box-shadow .2s,transform .2s}
.plan-item:hover{box-shadow:0 4px 18px rgba(66,85,255,.1);transform:translateY(-1px)}
/* ─ Month slide ─ */
.cal-cells.slide-fwd{animation:slideFwd .22s cubic-bezier(.4,0,.2,1) both}
.cal-cells.slide-back{animation:slideBack .22s cubic-bezier(.4,0,.2,1) both}
@keyframes slideFwd{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideBack{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}