/* ============================================
   QUIZMASTER PRO — QUIZ / PUBLIC CSS
   ============================================ */
:root{
  --bg:#08080f;--surface:rgba(255,255,255,.05);--surface2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.1);--border2:rgba(99,102,241,.25);
  --primary:#6366f1;--primary-l:#818cf8;--purple:#8b5cf6;
  --green:#10b981;--red:#ef4444;--amber:#f59e0b;--cyan:#06b6d4;
  --text:#f1f5f9;--text2:rgba(255,255,255,.6);--text3:rgba(255,255,255,.35);
  --radius:14px;--radius-lg:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,.4);border-radius:3px}

/* ── GRADIENT TEXT ── */
.gradient-text{background:linear-gradient(135deg,#818cf8,#c4b5fd,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── BUTTONS ── */
.btn-hero-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.75rem;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border-radius:50px;font-weight:700;font-size:.95rem;transition:all .3s;border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(99,102,241,.35)}
.btn-hero-sec{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.75rem;border:1px solid rgba(255,255,255,.2);color:var(--text);border-radius:50px;font-weight:600;font-size:.95rem;background:rgba(255,255,255,.05);transition:all .3s;white-space:nowrap}
.btn-hero-sec:hover{border-color:var(--primary);background:rgba(99,102,241,.1)}

/* ══════════ HEADER AD BANNER ══════════ */
.ad-header-banner{display:flex;align-items:center;gap:1rem;padding:.65rem 1.5rem;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.15));border-bottom:1px solid rgba(99,102,241,.2);cursor:pointer;transition:all .2s;position:relative}
.ad-header-banner:hover{background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2))}
.ad-header-banner img{height:36px;border-radius:6px;object-fit:cover}
.ad-header-text{flex:1}
.ad-header-text strong{font-size:.9rem;display:block}
.ad-header-text span{font-size:.78rem;color:var(--text2)}
.ad-cta{font-size:.82rem;font-weight:600;color:var(--primary-l);white-space:nowrap}
.ad-label{position:absolute;top:4px;right:8px;font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}

/* ══════════ NAV ══════════ */
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;z-index:100;background:rgba(8,8,15,.9);backdrop-filter:blur(20px)}
.nav-brand{display:flex;align-items:center;gap:.5rem}
.nav-logo{font-size:1.3rem}
.nav-name{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.nav-name b{color:var(--primary-l)}
.nav-links{display:flex;align-items:center;gap:.5rem}
.nav-a{padding:.45rem 1rem;border-radius:50px;font-size:.85rem;font-weight:600;color:var(--text2);transition:all .25s}
.nav-a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-a.highlight{color:var(--primary-l);border:1px solid rgba(99,102,241,.3);background:rgba(99,102,241,.08)}
.nav-a.admin{background:rgba(255,255,255,.06);color:var(--text2);font-size:.8rem}
.nav-hamburger{display:none;background:none;border:none;color:var(--text);font-size:1.3rem;cursor:pointer;padding:.25rem}
.nav-mobile-menu{display:none;flex-direction:column;gap:.25rem;padding:.75rem 1.5rem;background:rgba(8,8,15,.95);border-bottom:1px solid rgba(255,255,255,.05)}
.nav-mobile-menu.open{display:flex}
.nav-mobile-menu a{padding:.6rem .75rem;border-radius:10px;font-size:.875rem;font-weight:600;color:var(--text2);transition:all .2s}
.nav-mobile-menu a:hover{background:rgba(99,102,241,.1);color:var(--text)}

/* ══════════ HERO ══════════ */
.hero{position:relative;padding:5rem 2rem 4rem;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.13}
.hb1{width:600px;height:600px;background:var(--primary);top:-200px;left:-200px;animation:bm 20s infinite alternate}
.hb2{width:500px;height:500px;background:var(--purple);bottom:-150px;right:-150px;animation:bm 25s infinite alternate-reverse}
.hb3{width:350px;height:350px;background:var(--cyan);top:40%;left:40%;animation:bm 18s infinite alternate}
@keyframes bm{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}
.hero-inner{position:relative;z-index:2;max-width:780px;margin:0 auto}
.hero-badge{display:inline-block;padding:.4rem 1.2rem;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:50px;font-size:.82rem;color:var(--primary-l);font-weight:600;margin-bottom:1.5rem}
.hero-h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1.1;margin-bottom:1.25rem}
.hero-p{font-size:1.05rem;color:var(--text2);max-width:500px;margin:0 auto 2rem;line-height:1.65}

.hero-stats{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
.hs{text-align:center}
.hs-n{font-size:2.2rem;font-weight:800;color:var(--primary-l);line-height:1}
.hs-l{font-size:.78rem;color:var(--text2)}
.hs-div{width:1px;height:35px;background:rgba(255,255,255,.1)}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ══════════ PAGE LAYOUT ══════════ */
.page-layout{max-width:1200px;margin:0 auto;padding:0 1.5rem 4rem;display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
.page-main{}
.page-sidebar{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:80px}

/* ══════════ SECTIONS ══════════ */
.section{margin-bottom:3rem}
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.section-title{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem}
.section-link{color:var(--primary-l);font-size:.875rem;font-weight:600}

/* Steps */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem}
.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:all .3s;position:relative;overflow:hidden}
.step-card::before{content:'';position:absolute;top:0;right:0;width:60px;height:60px;background:rgba(99,102,241,.05);border-radius:50%;transform:translate(15px,-15px)}
.step-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-3px)}
.step-num{font-size:.72rem;font-weight:700;color:var(--primary-l);letter-spacing:.05em;margin-bottom:.5rem;opacity:.7}
.step-ico{font-size:1.8rem;margin-bottom:.75rem}
.step-card h3{font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.step-card p{font-size:.82rem;color:var(--text2);line-height:1.55}

/* Courses */
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.course-card{display:flex;align-items:center;gap:.9rem;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:all .3s}
.course-card:hover{border-color:rgba(99,102,241,.35);background:rgba(99,102,241,.06);transform:translateX(4px)}
.cc-icon{font-size:1.6rem;flex-shrink:0}
.cc-body{flex:1;min-width:0}
.cc-name{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-code{font-size:.72rem;color:var(--primary-l);margin-top:.1rem}
.cc-q{font-size:.72rem;color:var(--text2);margin-top:.1rem}
.cc-arrow{color:var(--text3);font-size:1rem;flex-shrink:0}

/* Links */
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.link-card{display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:all .3s}
.link-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.link-type-course{border-color:rgba(16,185,129,.2)}
.link-type-course:hover{border-color:rgba(16,185,129,.4)}
.link-type-resource{border-color:rgba(99,102,241,.2)}
.link-type-resource:hover{border-color:rgba(99,102,241,.4)}
.link-type-external{border-color:rgba(245,158,11,.2)}
.link-type-external:hover{border-color:rgba(245,158,11,.4)}
.lk-icon{font-size:1.4rem;flex-shrink:0;margin-top:.1rem}
.lk-body{flex:1;min-width:0}
.lk-title{font-weight:700;font-size:.9rem}
.lk-desc{font-size:.78rem;color:var(--text2);margin-top:.2rem;line-height:1.4}
.lk-course{font-size:.72rem;color:var(--primary-l);margin-top:.3rem}
.lk-arrow{font-size:1rem;color:var(--text3);flex-shrink:0}

/* Top list */
.top-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.top-row{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s}
.top-row:last-child{border-bottom:none}
.top-row:hover{background:rgba(99,102,241,.06)}
.top-rank{font-size:1.1rem;width:28px}
.top-info{flex:1}
.top-name{font-weight:700;font-size:.9rem}
.top-course{font-size:.72rem;color:var(--text2)}
.top-score{font-size:1.1rem;font-weight:800;color:var(--primary-l)}
.top-score span{font-size:.72rem;color:var(--text3)}

/* ══════════ SIDEBAR ══════════ */
.sidebar-cta{background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-lg);padding:1.5rem;text-align:center}
.scta-icon{font-size:2rem;margin-bottom:.75rem}
.sidebar-cta h3{font-weight:800;margin-bottom:.4rem}
.sidebar-cta p{font-size:.82rem;color:var(--text2);margin-bottom:1.25rem;line-height:1.5}

.ad-card{background:var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s}
.ad-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-2px)}
.ad-card-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:.6rem 1rem .25rem}
.ad-card-img{width:100%;height:120px;object-fit:cover}
.ad-card-title{font-weight:700;font-size:.9rem;padding:.75rem 1rem .25rem}
.ad-card-desc{font-size:.78rem;color:var(--text2);padding:0 1rem .5rem;line-height:1.4}
.ad-card-btn{display:block;padding:.5rem 1rem .85rem;color:var(--primary-l);font-size:.82rem;font-weight:600}

.sidebar-info{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem}
.sidebar-info h3{font-size:.9rem;font-weight:700;margin-bottom:.75rem}
.rule-list{display:flex;flex-direction:column;gap:.5rem}
.rule{font-size:.82rem;color:var(--text2)}

/* ══════════ FOOTER ADS ══════════ */
.ad-footer-banner{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12));border-top:1px solid rgba(99,102,241,.2);border-bottom:1px solid rgba(99,102,241,.2);padding:1.25rem 2rem;cursor:pointer;position:relative;transition:all .2s}
.ad-footer-banner:hover{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.18))}
.ad-footer-inner{display:flex;align-items:center;gap:1.5rem;max-width:1200px;margin:0 auto;flex-wrap:wrap}
.ad-footer-img{height:50px;border-radius:8px;object-fit:cover;flex-shrink:0}
.ad-footer-title{font-weight:700;margin-bottom:.25rem}
.ad-footer-desc{font-size:.82rem;color:var(--text2)}

/* ══════════ FOOTER ══════════ */
.footer{border-top:1px solid rgba(255,255,255,.05);padding:2rem}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:.85rem;color:var(--text2);transition:color .2s}
.footer-links a:hover{color:var(--primary-l)}
.footer-copy{font-size:.78rem;color:var(--text3)}

/* ══════════ IDENTITY PAGE ══════════ */
.identity-pg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}
.id-bg{position:fixed;inset:0;pointer-events:none;z-0}
.ib1{position:absolute;width:500px;height:500px;background:var(--primary);top:-200px;left:-200px;border-radius:50%;filter:blur(80px);opacity:.1}
.ib2{position:absolute;width:400px;height:400px;background:var(--purple);bottom:-150px;right:-150px;border-radius:50%;filter:blur(80px);opacity:.1}
.id-wrap{display:grid;grid-template-columns:1fr auto;gap:2rem;max-width:900px;width:100%;position:relative;z-index:1;align-items:start}
.id-card{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(30px)}
.id-top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.06)}
.id-back{color:var(--text2);font-size:.85rem;transition:color .2s}
.id-back:hover{color:var(--primary-l)}
.id-logo{font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:.35rem}
.id-body{padding:2rem}
.id-icon{font-size:3rem;text-align:center;margin-bottom:.75rem}
.id-body h1{font-size:1.8rem;font-weight:800;text-align:center;margin-bottom:.5rem}
.id-sub{text-align:center;color:var(--text2);font-size:.9rem;margin-bottom:1.75rem}
.alert-err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:10px;padding:.75rem 1rem;font-size:.875rem;color:#fca5a5;margin-bottom:1rem}
.id-field{margin-bottom:1.1rem}
.id-field label{display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);margin-bottom:.35rem}
.id-input-wrap{position:relative;display:flex;align-items:center}
.id-ic{position:absolute;left:.9rem;font-size:1rem;pointer-events:none}
.id-input-wrap input,.id-input-wrap select{width:100%;padding:.75rem 1rem .75rem 2.7rem;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:inherit;font-size:.9rem;transition:all .25s}
.id-input-wrap input:focus,.id-input-wrap select:focus{outline:none;border-color:var(--primary);background:rgba(99,102,241,.05);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.id-rules{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.15);border-radius:12px;padding:1rem;margin-bottom:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.id-rule{font-size:.8rem;color:var(--text2)}
.id-rule strong{color:var(--text)}
.id-submit{width:100%;padding:1rem;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border:none;border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .3s}
.id-submit:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(99,102,241,.35)}
.id-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.id-side{display:flex;flex-direction:column;gap:1rem;min-width:180px}
.id-stat-card{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;backdrop-filter:blur(20px)}
.id-stat-card.accent{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.25)}
.id-s-num{font-size:2.5rem;font-weight:800;color:var(--primary-l);line-height:1}
.id-s-lbl{font-size:.78rem;color:var(--text2);margin-top:.3rem}
.id-tip{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:1rem;font-size:.8rem;color:var(--text2);line-height:1.55}
.id-tip strong{color:var(--amber)}

/* ══════════ QUIZ PAGE ══════════ */
.quiz-pg{background:var(--bg);min-height:100vh}
.qz-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.5rem;background:rgba(255,255,255,.04);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.75rem;position:sticky;top:0;z-index:50;backdrop-filter:blur(20px)}
.qz-student{display:flex;align-items:center;gap:.75rem}
.qz-avatar{font-size:1.3rem}
.qz-name{font-weight:700;font-size:.9rem}
.qz-mat{font-size:.72rem;color:var(--text2)}
.qz-timer-block{display:flex;align-items:center;gap:.5rem;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);border-radius:50px;padding:.4rem 1.1rem;transition:all .3s}
.qz-timer-block.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.qz-timer-block.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.qz-timer-ico{font-size:.9rem}
.qz-timer{font-size:1.35rem;font-weight:800;color:var(--primary-l);font-variant-numeric:tabular-nums;min-width:55px;text-align:center}
.qz-timer-lbl{font-size:.7rem;color:var(--text2)}
.qz-meta{text-align:right}
.qz-course{font-size:.78rem;color:var(--text2)}
.qz-prog-txt{font-size:.85rem;font-weight:700}
.qz-progress{height:3px;background:rgba(255,255,255,.06)}
.qz-prog-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--purple));transition:width .4s ease}

.qz-body{display:grid;grid-template-columns:1fr 270px;gap:1.5rem;padding:1.5rem;max-width:1300px;margin:0 auto}
.qz-main{}
.q-slide{display:none;animation:fadeIn .3s ease}
.q-slide.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.q-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin-bottom:1.25rem;backdrop-filter:blur(20px)}
.q-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;flex-wrap:wrap;gap:.5rem}
.q-num{font-size:.78rem;font-weight:700;color:var(--primary-l);text-transform:uppercase;letter-spacing:.05em}
.q-answered{font-size:.78rem;color:var(--text2)}
.q-answered.done{color:var(--green)}
.q-text{font-size:1.05rem;line-height:1.65;margin-bottom:1.5rem;font-weight:500}
.q-opts{display:flex;flex-direction:column;gap:.75rem}
.q-opt{cursor:pointer;display:block}
.q-radio{display:none}
.q-opt-inner{display:flex;align-items:center;gap:.9rem;padding:.875rem 1rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;transition:all .25s}
.q-opt:hover .q-opt-inner{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.06)}
.q-radio:checked+.q-opt-inner{border-color:var(--primary);background:rgba(99,102,241,.12)}
.q-letter{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0;transition:all .25s}
.q-radio:checked+.q-opt-inner .q-letter{background:var(--primary);border-color:var(--primary);color:#fff}
.q-opt-text{font-size:.95rem;line-height:1.45}
.q-nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.btn-nav-q{padding:.6rem 1.4rem;border-radius:12px;font-size:.875rem;font-weight:600;cursor:pointer;font-family:inherit;background:var(--surface);border:1px solid var(--border);color:var(--text);transition:all .25s}
.btn-nav-q:hover{border-color:var(--primary);background:rgba(99,102,241,.1)}
.btn-submit-q{padding:.6rem 1.5rem;background:linear-gradient(135deg,var(--green),#059669);color:#fff;border:none;border-radius:12px;font-size:.875rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .3s}
.btn-submit-q:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,185,129,.3)}

/* Panel */
.qz-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;height:fit-content;position:sticky;top:80px}
.panel-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;flex-wrap:wrap;gap:.35rem}
.panel-title{font-weight:700;font-size:.875rem}
.panel-legend{display:flex;gap:.75rem;font-size:.7rem;color:var(--text2);flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.25rem}
.answered-dot{background:var(--green)}
.current-dot{background:var(--primary)}
.panel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;margin-bottom:.85rem}
.panel-btn{aspect-ratio:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;font-size:.72rem;color:var(--text2);cursor:pointer;font-family:inherit;font-weight:600;transition:all .2s;display:flex;align-items:center;justify-content:center}
.panel-btn:hover{border-color:var(--primary);color:var(--primary-l)}
.panel-btn.current{background:rgba(99,102,241,.2);border-color:var(--primary);color:var(--primary-l)}
.panel-btn.answered{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:var(--green)}
.panel-summary{background:rgba(255,255,255,.03);border-radius:10px;padding:.75rem;margin-bottom:.85rem}
.ps-row{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;padding:.2rem 0}
.green-text{color:var(--green)}
.red-text{color:var(--red)}
.btn-final-sub{width:100%;padding:.7rem;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border:none;border-radius:10px;font-size:.875rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .3s}
.btn-final-sub:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(99,102,241,.3)}

/* ══════════ RESULT PAGE ══════════ */
.result-pg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}
.res-bg{position:fixed;inset:0;pointer-events:none}
.rb1{position:absolute;width:600px;height:600px;background:var(--primary);top:-200px;left:-200px;border-radius:50%;filter:blur(80px);opacity:.1}
.rb2{position:absolute;width:500px;height:500px;background:var(--purple);bottom:-150px;right:-150px;border-radius:50%;filter:blur(80px);opacity:.1}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.conf-piece{position:absolute;top:-20px;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}
.res-wrap{position:relative;z-index:5;width:100%;max-width:580px}
.res-card{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:28px;padding:2.5rem;backdrop-filter:blur(30px);text-align:center;animation:cardIn .5s ease}
.res-card.pass{border-color:rgba(16,185,129,.3)}
.res-card.fail{border-color:rgba(239,68,68,.3)}
@keyframes cardIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.res-top{margin-bottom:1.5rem}
.res-emoji{font-size:4rem;display:block;margin-bottom:.75rem}
.res-emoji.bounce{animation:bounce .8s ease .3s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.res-h1{font-size:2rem;font-weight:800;margin-bottom:.25rem}
.pass-col{color:var(--green)}
.fail-col{color:var(--red)}
.res-name{color:var(--primary-l);font-size:1.05rem;font-weight:700;margin-bottom:.35rem}
.res-msg{font-size:.9rem;color:var(--text2)}
.pass-msg{color:rgba(16,185,129,.9)}
.fail-msg{color:rgba(239,68,68,.7)}

.res-score-wrap{margin:1.5rem auto;display:flex;justify-content:center}
.res-score-circle{position:relative;width:170px;height:170px}
.score-svg{width:100%;height:100%}
.score-arc{transition:stroke-dashoffset 1.5s ease .3s}
.res-score-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.res-score-num{font-size:2.4rem;font-weight:800;line-height:1}
.res-score-denom{font-size:.82rem;color:var(--text2)}

.res-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.75rem;margin-bottom:1.25rem}
.rs-item{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:.9rem;text-align:center}
.rs-item.green{border-color:rgba(16,185,129,.2)}
.rs-item.red{border-color:rgba(239,68,68,.2)}
.rs-val{font-size:1.5rem;font-weight:800;line-height:1}
.rs-lbl{font-size:.7rem;color:var(--text2);margin-top:.25rem}

.res-details{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}
.rd-row{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;color:var(--text2)}
.rd-row strong{color:var(--text)}

.res-status-badge{display:inline-block;padding:.5rem 2rem;border-radius:50px;font-size:.875rem;font-weight:800;letter-spacing:.08em;margin:1rem 0}
.res-status-badge.pass{background:rgba(16,185,129,.12);color:var(--green);border:2px solid rgba(16,185,129,.3)}
.res-status-badge.fail{background:rgba(239,68,68,.12);color:var(--red);border:2px solid rgba(239,68,68,.3)}
.res-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ══════════ LEADERBOARD ══════════ */
.lb-pg{min-height:100vh;position:relative}
.lb-bg{position:fixed;inset:0;pointer-events:none}
.lbb1{position:absolute;width:500px;height:500px;background:var(--amber);top:-200px;right:-150px;border-radius:50%;filter:blur(80px);opacity:.08}
.lbb2{position:absolute;width:400px;height:400px;background:var(--primary);bottom:-100px;left:-100px;border-radius:50%;filter:blur(80px);opacity:.08}
.lb-container{max-width:900px;margin:0 auto;padding:3rem 1.5rem;position:relative;z-index:5}
.lb-header{text-align:center;margin-bottom:2.5rem}
.lb-icon{font-size:4rem;margin-bottom:.5rem}
.lb-header h1{font-size:2.5rem;font-weight:800}
.lb-header p{color:var(--text2);margin-top:.5rem}

/* Podium */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:1rem;margin-bottom:3rem}
.pod-place{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.pod-crown{font-size:1.3rem}
.pod-medal{font-size:2.2rem}
.pod-name{font-weight:700;font-size:.875rem;text-align:center;max-width:100px;word-break:break-word}
.pod-score{font-size:.8rem;color:var(--primary-l);font-weight:700}
.pod-block{border-radius:12px 12px 0 0;width:100px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;min-height:40px}
.first .pod-block{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;min-height:80px}
.second .pod-block{background:linear-gradient(135deg,#9ca3af,#6b7280);color:#fff;min-height:60px}
.third .pod-block{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff;min-height:48px}

.lb-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.lb-table{width:100%;border-collapse:collapse;font-size:.875rem}
.lb-table th{padding:.85rem 1rem;text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);border-bottom:1px solid rgba(255,255,255,.05)}
.lb-table td{padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.04)}
.lb-table tr:last-child td{border-bottom:none}
.lb-table .top-row td{background:rgba(245,158,11,.04)}
.rank-cell{font-size:1.1rem}
.lb-score-bar{display:flex;align-items:center;gap:.5rem}
.lb-bar{height:6px;background:linear-gradient(90deg,var(--primary),var(--purple));border-radius:3px;min-width:4px;max-width:120px}
.lb-score-bar span{font-size:.85rem;font-weight:700}
.lb-empty{text-align:center;padding:4rem 2rem}
.lb-empty div{font-size:5rem;margin-bottom:1rem}
.lb-empty h2{font-size:1.5rem;font-weight:800;margin-bottom:.5rem}
.lb-empty p{color:var(--text2);margin-bottom:2rem}
code{font-family:monospace;font-size:.78rem;color:var(--primary-l);background:rgba(99,102,241,.1);padding:.1rem .4rem;border-radius:5px}
.muted{color:var(--text2)}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1024px){
  .page-layout{grid-template-columns:1fr}
  .page-sidebar{position:static}
  .qz-body{grid-template-columns:1fr}
  .qz-panel{position:static}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:block}
  .hero{padding:3rem 1.25rem 2.5rem}
  .hero-stats{gap:1rem}
  .hs-n{font-size:1.7rem}
  .id-wrap{grid-template-columns:1fr}
  .id-side{display:none}
  .id-rules{grid-template-columns:1fr}
  .page-layout{padding:0 1rem 3rem}
  .qz-body{padding:1rem}
  .qz-header{padding:.75rem 1rem}
  .res-stats{grid-template-columns:1fr 1fr}
  .podium{transform:scale(.85);transform-origin:bottom center}
  .steps-grid,.courses-grid,.links-grid{grid-template-columns:1fr}
  .ad-header-banner{padding:.5rem 1rem}
  .ad-footer-inner{flex-direction:column;text-align:center}
  .footer-inner{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .hero-h1{font-size:2rem}
  .hero-btns{flex-direction:column;align-items:stretch}
  .res-card{padding:1.5rem}
  .q-card{padding:1.25rem}
  .res-actions{flex-direction:column}
  .qz-timer{font-size:1.1rem}
}

/* ── Extra fixes ──────────────────────────────────────────────────────────── */
.alert-warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:.75rem 1rem;font-size:.875rem;color:#fcd34d;margin-bottom:1rem}
.id-courses-count{text-align:center;font-size:.82rem;color:var(--text2);background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.15);border-radius:10px;padding:.6rem}
.id-courses-count strong{color:var(--primary-l)}

/* Fix select dropdown arrow visibility */
.id-input-wrap select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
}
.id-input-wrap select option{background:#1a1a35;color:#f1f5f9}

/* ══════════════════════════════════════════════════════════
   CUSTOM SUBMIT CONFIRMATION MODAL
   ══════════════════════════════════════════════════════════ */

.submit-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.submit-modal-overlay.open {
  display: flex;
  animation: overlayIn .2s ease;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The white/dark box */
.submit-modal-box {
  background: #13132b;
  border: 1px solid rgba(99, 102, 241, .3);
  border-radius: 24px;
  padding: 2.5rem 2rem 2rem;
  width: 100%;
  max-width: 460px;
  text-align: center;
  animation: boxIn .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(99,102,241,.15);
  position: relative;
  overflow: hidden;
}

.submit-modal-box::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,.15) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes boxIn {
  from { opacity: 0; transform: scale(.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)  translateY(0);     }
}

/* Icon */
.smo-icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
  animation: iconBounce .5s cubic-bezier(.34,1.56,.64,1);
}

@keyframes iconBounce {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Title */
.smo-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: .4rem;
}

/* Subtitle */
.smo-sub {
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Stats row */
.smo-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.smo-stat {
  border-radius: 14px;
  padding: .9rem .5rem;
  border: 1px solid rgba(255,255,255,.08);
}

.smo-stat.green {
  background: rgba(16, 185, 129, .1);
  border-color: rgba(16, 185, 129, .25);
}
.smo-stat.red {
  background: rgba(239, 68, 68, .1);
  border-color: rgba(239, 68, 68, .25);
}
.smo-stat.blue {
  background: rgba(99, 102, 241, .1);
  border-color: rgba(99, 102, 241, .25);
}

.smo-stat-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #f1f5f9;
}

.smo-stat.green .smo-stat-num { color: #34d399; }
.smo-stat.red   .smo-stat-num { color: #f87171; }
.smo-stat.blue  .smo-stat-num { color: #a5b4fc; }

.smo-stat-lbl {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  margin-top: .3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Warning notice */
.smo-warn {
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 10px;
  padding: .65rem 1rem;
  font-size: .82rem;
  color: #fcd34d;
  margin-bottom: 1.25rem;
  line-height: 1.45;
}

/* Buttons */
.smo-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.smo-cancel {
  padding: .85rem 1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}

.smo-cancel:hover {
  background: rgba(255,255,255,.1);
  color: #f1f5f9;
}

.smo-confirm {
  padding: .85rem 1rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s;
  box-shadow: 0 6px 20px rgba(99,102,241,.35);
}

.smo-confirm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(99,102,241,.45);
}

.smo-confirm.all-done {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 20px rgba(16,185,129,.35);
}

.smo-confirm.all-done:hover:not(:disabled) {
  box-shadow: 0 10px 28px rgba(16,185,129,.45);
}

.smo-confirm.has-unanswered {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 6px 20px rgba(245,158,11,.35);
}

.smo-confirm:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .submit-modal-box { padding: 2rem 1.25rem 1.5rem; }
  .smo-title { font-size: 1.3rem; }
  .smo-btns { grid-template-columns: 1fr; }
  .smo-cancel { order: 2; }
  .smo-confirm { order: 1; }
}

/* ══════════════════════════════════════════════════════════
   EXTRA FIXES — v4 patch
   ══════════════════════════════════════════════════════════ */

/* ── All select dropdowns — black background ─────────────── */
select, select option,
.id-input-wrap select,
.id-input-wrap select option {
  background-color: #0f0f1f !important;
  color: #f1f5f9 !important;
}

/* ── Leaderboard — fully responsive ─────────────────────── */
.lb-container { padding: 2rem 1rem 4rem; }
.lb-header h1 { font-size: clamp(1.6rem, 5vw, 2.5rem); }

.podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: .75rem; margin-bottom: 2.5rem; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: .5rem;
}
.pod-place { min-width: 90px; }
.pod-block { width: 90px; }

.lb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.lb-table { min-width: 550px; }
.lb-table th, .lb-table td { padding: .75rem .85rem; font-size: .82rem; }
.lb-table th { font-size: .7rem; }
.rank-cell { width: 50px; }

@media (max-width: 600px) {
  .podium { gap: .4rem; }
  .pod-place { min-width: 80px; }
  .pod-block { width: 80px; min-height: 36px !important; }
  .first .pod-block { min-height: 64px !important; }
  .second .pod-block { min-height: 50px !important; }
  .pod-medal { font-size: 1.8rem; }
  .pod-name { font-size: .78rem; }
  .pod-score { font-size: .72rem; }
  .lb-container { padding: 1.5rem .75rem 3rem; }
  .lb-header { margin-bottom: 1.5rem; }
  .lb-icon { font-size: 3rem; }
}

/* ── SweetAlert responsive ───────────────────────────────── */
.swal2-popup {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: #13132b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(99,102,241,.25) !important;
  border-radius: 20px !important;
}
.swal2-title    { color: #f1f5f9 !important; }
.swal2-html-container { color: rgba(255,255,255,.65) !important; }
.swal2-confirm  { border-radius: 10px !important; font-weight: 700 !important; padding: .65rem 1.5rem !important; font-family: inherit !important; }
.swal2-cancel   { border-radius: 10px !important; background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.6) !important; border: 1px solid rgba(255,255,255,.1) !important; font-family: inherit !important; }

@media (max-width: 600px) {
  .swal2-popup  { width: calc(100vw - 2rem) !important; padding: 1.75rem 1.25rem !important; border-radius: 16px !important; }
  .swal2-title  { font-size: 1.15rem !important; }
  .swal2-html-container { font-size: .875rem !important; }
  .swal2-actions { gap: .5rem; flex-wrap: wrap; }
  .swal2-confirm, .swal2-cancel { flex: 1 1 auto; min-width: 120px; }
}

/* ── Result page — reset button fix & mobile stats ──────── */
.res-actions { flex-wrap: wrap; gap: .65rem; }
.res-stats    { grid-template-columns: repeat(auto-fit, minmax(80px,1fr)); }

@media (max-width: 500px) {
  .res-card    { padding: 1.5rem 1.1rem; border-radius: 20px; }
  .res-h1      { font-size: 1.6rem; }
  .res-actions { flex-direction: column; }
  .res-actions a, .res-actions button { width: 100%; justify-content: center; }
  .res-score-circle { width: 140px; height: 140px; }
  .res-score-num { font-size: 2rem; }
}

/* ── Quiz body mobile ─────────────────────────────────────── */
@media (max-width: 900px) {
  .qz-body { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
  .qz-panel { position: static; }
}
@media (max-width: 500px) {
  .qz-header { padding: .65rem 1rem; gap: .5rem; }
  .qz-student .qz-mat { display: none; }
  .qz-timer  { font-size: 1.1rem; min-width: 46px; }
  .q-card    { padding: 1.1rem; }
  .q-text    { font-size: .95rem; }
  .q-opt-inner { padding: .7rem .8rem; gap: .65rem; }
}

/* ══════════════════════════════════════════════════════════
   LEADERBOARD FIXES v5
   ══════════════════════════════════════════════════════════ */

/* Podium matric */
.pod-matric {
  font-size: .68rem;
  color: rgba(255,255,255,.45);
  margin-top: -.1rem;
  margin-bottom: .15rem;
}

/* Table rank column */
.rank-cell { width: 55px; text-align: center; font-size: 1.1rem; }
.rank-num  { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.45); }

/* Student name */
.lb-student-name { font-weight: 700; font-size: .9rem; }

/* Matric number */
.lb-matric {
  font-family: monospace;
  font-size: .78rem;
  color: #a5b4fc;
  background: rgba(99,102,241,.1);
  padding: .15rem .45rem;
  border-radius: 5px;
}

/* Course name */
.lb-course-name { font-size: .82rem; color: rgba(255,255,255,.65); }

/* Score bar */
.lb-score-bar { display: flex; align-items: center; gap: .6rem; min-width: 120px; }
.lb-bar { height: 7px; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 4px; min-width: 4px; flex-shrink: 0; }
.lb-score-val { font-size: .85rem; font-weight: 700; white-space: nowrap; }

/* Tries */
.lb-tries { text-align: center; font-size: .82rem; color: rgba(255,255,255,.5); }

/* Top rows */
.lb-table .top-row td { background: rgba(245,158,11,.04); }
.lb-table tr:hover td { background: rgba(99,102,241,.05); }

/* Fully responsive table */
.lb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; }
.lb-table       { min-width: 560px; }

@media (max-width: 700px) {
  .lb-table { min-width: 480px; }
  .lb-table th, .lb-table td { padding: .6rem .7rem; font-size: .78rem; }
  .lb-score-bar { min-width: 80px; }
  .lb-bar { max-width: 60px; }
}

@media (max-width: 480px) {
  .podium { gap: .3rem; transform: none; }
  .pod-place { min-width: 75px; }
  .pod-block { width: 75px; }
  .pod-name  { font-size: .72rem; }
  .pod-matric { font-size: .6rem; }
  .pod-score { font-size: .68rem; }
  .first .pod-block  { min-height: 60px !important; }
  .second .pod-block { min-height: 45px !important; }
  .third .pod-block  { min-height: 35px !important; }
}

/* ── Fail result card improvements ─────────────────────────── */
.res-card.fail {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.03);
}
.fail-col  { color: #f87171; }
.fail-msg  {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}
.pass-msg  { color: rgba(52,211,153,.9); font-size: .95rem; }
.res-name  {
  font-size: 1.15rem;
  font-weight: 700;
  color: #a5b4fc;
  margin-bottom: .4rem;
}

/* ══════════════════════════════════════════════════════════
   QUIZ PAGE LOADER
   ══════════════════════════════════════════════════════════ */
.page-loader {
  position: fixed;
  inset: 0;
  background: #08080f;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity .4s ease, visibility .4s ease;
}
.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: #f1f5f9;
}
.loader-logo-icon { font-size: 2rem; animation: logoPulse 1.5s infinite; }
@keyframes logoPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.loader-logo b { color: #818cf8; }

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(99,102,241,.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loader-text {
  font-size: .85rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .05em;
}

/* Loading dots animation */
.loader-dots { display: flex; gap: .4rem; }
.loader-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6366f1;
  animation: dotBounce 1.2s infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .2s; background: #8b5cf6; }
.loader-dots span:nth-child(3) { animation-delay: .4s; background: #06b6d4; }
@keyframes dotBounce {
  0%,80%,100% { transform: scale(0.6); opacity:.4; }
  40%          { transform: scale(1);   opacity:1;  }
}