/* ═══════════════════════════════════════════════════════════
   CK Labs SQL Training v2 — Styles
   ═══════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0f1923;--bg2:#162a3a;--surface:#1a3248;--surface2:#1e3a54;
  --accent:#f4a261;--accent2:#e76f51;--success:#2a9d8f;--gold:#ffd700;
  --blue:#3498db;--purple:#8e44ad;--pink:#e84393;
  --text:#e8eef3;--muted:#6b8299;--border:rgba(255,255,255,.1);
  --error:#e74c3c;
  --editor-bg:#1e1e2e;--editor-fg:#cdd6f4;--editor-kw:#cba6f7;
  --editor-str:#a6e3a1;--editor-num:#fab387;--editor-fn:#89b4fa;
  --editor-comment:#7f849c;--editor-op:#f38ba8;--editor-star:#ffd700;
  --editor-table:#f4a261;
  --celeb-bg:linear-gradient(135deg,#1a3248,#162a3a);
  --overlay-bg:rgba(0,0,0,.85);--shadow-color:rgba(0,0,0,.4);
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
/* ===== LIGHT MODE ===== */
body.light-mode{
  --bg:#f5f6fa;--bg2:#ffffff;--surface:#ffffff;--surface2:#eef0f5;
  --accent:#d4710a;--accent2:#c0501a;--success:#1a8a7d;--gold:#c49700;
  --blue:#2563eb;--purple:#7c3aed;--pink:#d6336c;
  --text:#1e293b;--muted:#5f6b7a;--border:rgba(0,0,0,.12);
  --error:#dc2626;
  --editor-bg:#fafbfe;--editor-fg:#383a42;--editor-kw:#8839ef;
  --editor-str:#2e7d32;--editor-num:#c75000;--editor-fn:#1e66f5;
  --editor-comment:#8c8fa1;--editor-op:#d20f39;--editor-star:#b88600;
  --editor-table:#b84e00;
  --celeb-bg:linear-gradient(135deg,#e8ecf4,#f5f6fa);
  --overlay-bg:rgba(255,255,255,.92);--shadow-color:rgba(0,0,0,.12);
}

/* ===== LAYOUT ===== */
.app{display:flex;flex:1;overflow:hidden}
.sidebar{width:240px;background:var(--bg2);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
.sidebar-left{border-right:1px solid var(--border)}
.sidebar-right{border-left:1px solid var(--border)}
.sidebar-header{padding:16px;border-bottom:1px solid var(--border);text-align:center}
.sidebar-header h1{font-size:16px;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.tab-bar{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border-bottom:1px solid var(--border);padding-right:8px}
.tab-bar-left{display:flex;gap:0}
.tab-bar-right{display:flex;gap:4px;align-items:center}
.tab{padding:12px 20px;cursor:pointer;border:none;background:none;color:var(--muted);font-weight:600;font-size:14px;border-bottom:3px solid transparent;transition:.2s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-pane{flex:1;overflow-y:auto;display:none;padding:24px}
.tab-pane.active{display:block}

/* ===== PROFILE CARD ===== */
.profile{padding:16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--gold));display:flex;align-items:center;justify-content:center;font-size:24px}
.profile-info{flex:1}
.profile-name{font-weight:700;font-size:14px}
.profile-title{font-size:11px;color:var(--muted)}
.xp-bar{height:6px;background:var(--border);border-radius:3px;margin-top:4px;overflow:hidden}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:3px;transition:width .5s}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}
.stat{background:var(--surface);border-radius:8px;padding:10px;text-align:center}
.stat-value{font-size:20px;font-weight:800;color:var(--accent)}
.stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* ===== TABLES EXPLORER ===== */
.tables-section{padding:12px}
.tables-section h3{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.table-chip{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;cursor:pointer;margin-bottom:4px;transition:.15s;font-size:13px}
.table-chip:hover{background:var(--surface)}
.table-chip.active{background:var(--surface2);border-left:3px solid var(--accent)}
.table-cols{font-size:10px;color:var(--muted);margin-left:auto}

/* ===== SKILL TREE ===== */
.skills-section{padding:12px}
.skill-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}
.skill-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.skill-dot.locked{background:var(--muted);opacity:.3}
.skill-dot.learning{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.skill-dot.mastered{background:var(--success)}
.skill-name{flex:1}
.skill-pct{color:var(--muted);font-size:11px}

/* ===== CHALLENGE CARDS ===== */
.challenge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ch-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.ch-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.ch-card.completed{opacity:.7;border-color:var(--success)}
.ch-card.completed::after{content:'✅';position:absolute;top:12px;right:12px;font-size:20px}
.ch-card.active{border-color:var(--accent);box-shadow:0 0 20px rgba(244,162,97,.15)}
.ch-tier{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.tier-1{background:rgba(42,157,143,.2);color:var(--success)}
.tier-2{background:rgba(244,162,97,.2);color:var(--accent)}
.tier-3{background:rgba(231,76,60,.2);color:var(--error)}
.tier-4{background:rgba(142,68,173,.2);color:var(--purple)}
.ch-title{font-weight:700;font-size:15px;margin-bottom:4px}
.ch-desc{font-size:12px;color:var(--muted);margin-bottom:8px}
.ch-xp{font-size:12px;color:var(--gold);font-weight:600}
.ch-domain{font-size:10px;padding:2px 6px;border-radius:3px;background:var(--surface2);color:var(--muted);margin-left:8px}

/* ===== TOPBAR ACTION BUTTONS ===== */
.topbar-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.topbar-btn:hover{border-color:var(--accent);background:var(--surface2);transform:scale(1.08)}

/* ===== EDITOR ===== */
.editor-wrap{position:relative;margin:12px 0;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--editor-bg)}
.editor-wrap:focus-within{border-color:var(--accent)}
.sql-editor{width:100%;min-height:120px;padding:16px;font-family:'Fira Code','Cascadia Code','JetBrains Mono',monospace;font-size:14px;line-height:1.6;background:transparent;color:transparent;caret-color:var(--editor-fg);border:none;resize:vertical;outline:none;tab-size:2;position:relative;z-index:2}
.editor-highlight{position:absolute;top:0;left:0;right:0;bottom:0;padding:16px;font-family:'Fira Code','Cascadia Code','JetBrains Mono',monospace;font-size:14px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;pointer-events:none;z-index:1;color:var(--editor-fg);tab-size:2}
.hl-kw{color:var(--editor-kw);font-weight:700}
.hl-fn{color:var(--editor-fn)}
.hl-str{color:var(--editor-str)}
.hl-num{color:var(--editor-num)}
.hl-comment{color:var(--editor-comment);font-style:italic}
.hl-table{color:var(--editor-table);text-decoration:underline;text-decoration-color:rgba(244,162,97,.3)}
.hl-op{color:var(--editor-op)}
.hl-star{color:var(--editor-star);font-weight:700}
/* autocomplete */
.ac-dropdown{position:absolute;background:var(--surface);border:1px solid var(--accent);border-radius:8px;max-height:200px;overflow-y:auto;z-index:10;box-shadow:0 8px 24px var(--shadow-color);min-width:180px;display:none}
.ac-dropdown.open{display:block}
.ac-item{padding:6px 12px;font-size:12px;font-family:'Fira Code',monospace;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--text)}
.ac-item:hover,.ac-item.selected{background:rgba(244,162,97,.15);color:var(--accent)}
.ac-tag{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.ac-tag-kw{background:rgba(203,166,247,.2);color:var(--editor-kw)}
.ac-tag-fn{background:rgba(137,180,250,.2);color:var(--editor-fn)}
.ac-tag-tbl{background:rgba(244,162,97,.2);color:var(--accent)}
.ac-tag-col{background:rgba(42,157,143,.2);color:var(--success)}
.editor-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:10px 20px;border:none;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn:active{transform:scale(.97)}
.btn-run{background:var(--success);color:#fff}
.btn-validate{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.btn-hint{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-omar{background:var(--purple);color:#fff}
.btn-clear{background:var(--surface);color:var(--muted);border:1px solid var(--border)}

/* ===== RESULTS ===== */
.results{margin-top:12px;border-radius:10px;overflow:hidden}
.results table{width:100%;border-collapse:collapse;font-size:13px}
.results th{background:var(--surface2);padding:8px 12px;text-align:left;font-weight:600;color:var(--accent);border-bottom:2px solid var(--border)}
.results td{padding:8px 12px;border-bottom:1px solid var(--border)}
.results tr:hover td{background:rgba(244,162,97,.05)}
.result-meta{font-size:12px;color:var(--muted);padding:8px 0}
.msg{padding:16px;border-radius:10px;margin:8px 0;font-size:14px}
.msg-ok{background:rgba(42,157,143,.15);color:var(--success);border:1px solid rgba(42,157,143,.3)}
.msg-err{background:rgba(231,76,60,.15);color:var(--error);border:1px solid rgba(231,76,60,.3)}
.msg-info{background:rgba(52,152,219,.15);color:var(--blue);border:1px solid rgba(52,152,219,.3)}
.msg-warn{background:rgba(244,162,97,.15);color:var(--accent);border:1px solid rgba(244,162,97,.3)}

/* ===== BUSINESS CASE (Professional Mission Theme) ===== */
.biz-header{background:linear-gradient(135deg,var(--surface),var(--surface2));border-radius:16px;padding:28px 32px;margin-bottom:24px;border:1px solid var(--border);position:relative;overflow:hidden}
.biz-header::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--blue))}
.biz-company-badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:12px;letter-spacing:.4px;text-transform:uppercase}
.biz-company-badge .biz-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
.biz-company{font-size:24px;font-weight:800;margin-bottom:4px;line-height:1.3}
.biz-meta{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0;font-size:12px;color:var(--muted)}
.biz-meta-item{display:inline-flex;align-items:center;gap:4px;background:var(--surface2);padding:4px 10px;border-radius:6px;border:1px solid var(--border)}
.biz-scenario{margin:14px 0;padding:14px 18px;background:var(--surface2);border-radius:10px;font-size:14px;line-height:1.6;border-left:3px solid var(--blue)}
.biz-urgency{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:700;margin-top:10px}
.biz-urgency.high{background:rgba(231,76,60,.12);color:var(--error);border:1px solid rgba(231,76,60,.25)}
.biz-urgency.medium{background:rgba(244,162,97,.12);color:var(--accent);border:1px solid rgba(244,162,97,.25)}
.biz-exec{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;background:var(--surface2);border-radius:12px;border:1px solid var(--border)}
.biz-exec-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 4px 12px rgba(52,152,219,.25)}
.biz-exec-name{font-weight:700;font-size:15px}
.biz-exec-role{font-size:12px;color:var(--muted)}
.biz-exec-label{font-size:10px;color:var(--accent);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:2px}
.biz-step{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:16px;transition:border-color .2s}
.biz-step:hover{border-color:var(--accent)}
.biz-step.locked{opacity:.35;pointer-events:none;filter:blur(.5px)}
.biz-step.done{border-color:var(--success);background:linear-gradient(135deg,var(--surface),rgba(42,157,143,.04))}
.biz-step-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:13px;margin-right:8px;box-shadow:0 2px 8px rgba(244,162,97,.3)}
.biz-quote{background:var(--surface2);border-left:3px solid var(--accent);padding:14px 18px;margin:12px 0;font-style:italic;border-radius:0 10px 10px 0;line-height:1.6}
.biz-guidance{background:rgba(142,68,173,.08);padding:10px 14px;border-radius:8px;font-size:13px;margin:8px 0;border:1px solid rgba(142,68,173,.12)}
.biz-tables-brief{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.biz-table-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;font-size:11px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-family:'Fira Code',monospace}

/* ===== OMAR ===== */
.omar-panel{position:fixed;bottom:20px;right:20px;z-index:1000}
.omar-btn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));border:none;cursor:pointer;font-size:28px;box-shadow:0 4px 20px rgba(142,68,173,.4);transition:.2s}
.omar-btn:hover{transform:scale(1.1)}
.omar-chat{position:absolute;bottom:70px;right:0;width:360px;max-height:400px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;display:none;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.omar-chat.open{display:block}
.omar-msg{white-space:pre-wrap;font-size:13px;line-height:1.6}
.omar-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.omar-header-name{font-weight:700;font-size:15px}
.omar-header-role{font-size:11px;color:var(--muted)}

/* ===== BADGES ===== */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;padding:12px}
.badge{text-align:center;padding:8px;border-radius:8px;font-size:10px}
.badge-icon{font-size:28px;display:block;margin-bottom:4px}
.badge.locked{opacity:.25;filter:grayscale(1)}

/* ===== STREAK BANNER ===== */
.streak-banner{display:none;background:linear-gradient(90deg,var(--accent),var(--gold));color:#000;text-align:center;padding:8px;font-weight:700;font-size:14px;animation:pulse 1s ease-in-out}
.streak-banner.show{display:block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ===== TOAST ===== */
.toast-stack{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;animation:slideIn .3s;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.toast-success{background:var(--success);color:#fff}
.toast-error{background:var(--error);color:#fff}
.toast-info{background:var(--blue);color:#fff}
.toast-xp{background:linear-gradient(135deg,var(--gold),var(--accent));color:#000}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:none;opacity:1}}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:3000}
.modal-box{background:var(--surface);border:2px solid var(--accent);border-radius:20px;padding:40px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;text-align:center}
.modal-box h2{font-size:24px;margin-bottom:8px}
.modal-box p{color:var(--muted);margin-bottom:20px}

/* ===== RESPONSIVE ===== */
.mobile-menu-btn{display:none;position:fixed;top:12px;left:12px;z-index:2500;width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--accent);font-size:22px;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000}
@media(max-width:768px){
  .mobile-menu-btn{display:flex}
  .sidebar-left{position:fixed;left:-300px;top:0;bottom:0;z-index:2100;width:260px;transition:left .3s ease}
  .sidebar-left.open{left:0}
  .sidebar-right{display:none}
  .sidebar-overlay.open{display:block}
  .main{width:100%}
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-bar-left{flex:1;overflow-x:auto}
  .tab-bar-right{flex-shrink:0}
  .tab{padding:10px 14px;font-size:12px;white-space:nowrap}
  .topbar-btn{width:30px;height:30px;font-size:14px}
  .tab-pane{padding:12px}
  .challenge-grid{grid-template-columns:1fr}
  .editor-wrap{margin:8px 0}
  .sql-editor{min-height:100px;font-size:13px;padding:12px}
  .editor-actions{gap:4px}
  .btn{padding:8px 12px;font-size:11px}
  .omar-panel{bottom:10px;right:10px}
  .omar-btn{width:46px;height:46px;font-size:22px}
  .omar-chat{width:calc(100vw - 30px);right:-5px;bottom:58px;max-height:60vh}
  .stats{grid-template-columns:repeat(4,1fr);gap:4px;padding:8px}
  .stat{padding:6px}
  .stat-value{font-size:16px}
  .stat-label{font-size:8px}
  .profile{padding:10px}
  .celebration-card{padding:24px 20px;margin:10px}
  .celebration-emoji{font-size:48px}
  .celebration-title{font-size:20px}
  .modal-box{padding:24px;max-width:95%}
  h2{font-size:18px}
  .biz-header{padding:16px}
  .biz-company{font-size:18px}
  .biz-meta{gap:6px}
  .biz-meta-item{font-size:11px;padding:3px 8px}
  .lb-podium{flex-wrap:wrap;gap:8px}
  .lb-podium-card{min-width:90px;padding:10px 14px}
  .lb-table{font-size:11px}
  .lb-table th,.lb-table td{padding:6px 8px}
  .tour-tooltip{max-width:calc(100vw - 24px)}
  .tour-tooltip.tour-centered{max-width:calc(100vw - 24px);padding:24px 20px}
}
@media(max-width:380px){
  .tab{padding:8px 10px;font-size:11px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ===== ONBOARDING TOUR ===== */
.tour-overlay{position:fixed;inset:0;z-index:4000;pointer-events:none;display:none}
.tour-overlay.active{display:block}
.tour-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);pointer-events:all;transition:opacity .3s;display:none}
.tour-backdrop.visible{display:block}
.tour-spotlight{position:absolute;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;transition:all .4s ease;z-index:4000}
.tour-spotlight-ring{position:absolute;border-radius:14px;border:2px solid var(--accent);pointer-events:none;transition:all .4s ease;z-index:4000;box-shadow:0 0 20px rgba(244,162,97,.3)}
.tour-tooltip{position:absolute;background:var(--surface);border:2px solid var(--accent);border-radius:16px;padding:20px 24px;max-width:380px;z-index:4100;pointer-events:all;box-shadow:0 12px 40px var(--shadow-color);animation:tourFadeIn .35s ease}
.tour-tooltip::before{content:'';position:absolute;width:14px;height:14px;background:var(--surface);border:2px solid var(--accent);transform:rotate(45deg)}
.tour-tooltip.arrow-top::before{bottom:-9px;left:30px;border-top:none;border-left:none}
.tour-tooltip.arrow-bottom::before{top:-9px;left:30px;border-bottom:none;border-right:none}
.tour-tooltip.arrow-left::before{right:-9px;top:20px;border-top:none;border-left:none}
.tour-tooltip.arrow-right::before{left:-9px;top:20px;border-bottom:none;border-right:none}
.tour-title{font-size:16px;font-weight:800;margin-bottom:6px;color:var(--accent)}
.tour-text{font-size:13px;line-height:1.7;color:var(--text);margin-bottom:16px}
.tour-tooltip.tour-centered{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:480px;padding:32px 36px;text-align:center}
.tour-tooltip.tour-centered .tour-title{font-size:22px;margin-bottom:12px}
.tour-tooltip.tour-centered .tour-text{font-size:14px}
.tour-tooltip.tour-centered::before{display:none}
.tour-actions{display:flex;gap:8px;justify-content:space-between;align-items:center}
.tour-step-indicator{font-size:11px;color:var(--muted)}
.tour-btn{padding:8px 18px;border:none;border-radius:8px;font-weight:700;font-size:12px;cursor:pointer;transition:.15s}
.tour-btn:hover{transform:scale(1.05)}
.tour-btn-skip{background:transparent;color:var(--muted);border:1px solid var(--border)}
.tour-btn-next{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.tour-btn-finish{background:linear-gradient(135deg,var(--success),#27ae60);color:#fff}
@keyframes tourFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== CELEBRATION ===== */
.celebration-overlay{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;pointer-events:none}
.celebration-overlay.active{display:flex;animation:celebFadeIn .3s ease}
.celebration-card{background:var(--celeb-bg);border:3px solid var(--gold);border-radius:24px;padding:40px 50px;text-align:center;pointer-events:all;animation:celebBounce .6s ease;box-shadow:0 0 60px rgba(255,215,0,.3)}
.celebration-emoji{font-size:72px;margin-bottom:12px;animation:celebSpin .8s ease}
.celebration-title{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.celebration-sub{font-size:16px;color:var(--muted);margin-bottom:6px}
.celebration-xp{font-size:22px;font-weight:800;color:var(--gold);margin-top:12px;animation:celebPulse 1s ease infinite}
.confetti-canvas{position:fixed;inset:0;z-index:4999;pointer-events:none}
@keyframes celebFadeIn{from{opacity:0}to{opacity:1}}
@keyframes celebBounce{0%{transform:scale(.3) translateY(40px);opacity:0}50%{transform:scale(1.08)}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes celebSpin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes celebPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}

/* ===== LEADERBOARD ===== */
.leaderboard-section{padding:24px}
.leaderboard-section h2{margin-bottom:16px}
.lb-podium{display:flex;justify-content:center;align-items:flex-end;gap:16px;margin-bottom:28px}
.lb-podium-card{text-align:center;border-radius:16px;padding:16px 20px;min-width:110px;position:relative}
.lb-podium-card.gold{background:linear-gradient(180deg,rgba(255,215,0,.2),rgba(255,215,0,.05));border:2px solid var(--gold);order:2}
.lb-podium-card.silver{background:linear-gradient(180deg,rgba(192,192,192,.15),rgba(192,192,192,.05));border:2px solid #c0c0c0;order:1}
.lb-podium-card.bronze{background:linear-gradient(180deg,rgba(205,127,50,.15),rgba(205,127,50,.05));border:2px solid #cd7f32;order:3}
.lb-rank{font-size:28px;margin-bottom:4px}
.lb-name{font-weight:700;font-size:14px;margin-bottom:2px}
.lb-score{font-size:12px;color:var(--gold);font-weight:600}
.lb-table{width:100%;border-collapse:collapse}
.lb-table th{text-align:left;padding:10px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--border)}
.lb-table td{padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px}
.lb-table tr:hover td{background:rgba(244,162,97,.05)}
.lb-table tr.current-user td{background:rgba(244,162,97,.12);font-weight:700}
.lb-user-avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--surface2);font-size:14px;margin-right:8px;vertical-align:middle}
.lb-level-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;background:rgba(244,162,97,.15);color:var(--accent)}

/* ===== LOGIN MODAL ===== */
.login-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:3500}
.login-modal.active{display:flex}
.login-box{background:var(--surface);border:2px solid var(--accent);border-radius:20px;padding:40px;max-width:420px;width:90%;text-align:center;animation:celebBounce .4s ease}
.login-box h2{font-size:22px;margin-bottom:8px}
.login-box p{color:var(--muted);font-size:13px;margin-bottom:20px}
.login-input{width:100%;padding:14px 18px;border:2px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font-size:16px;text-align:center;outline:none;transition:.2s;margin-bottom:16px}
.login-input:focus{border-color:var(--accent)}
.login-input::placeholder{color:var(--muted)}

/* ===== THEME (topbar icon) ===== */\nbody.light-mode .topbar-btn:first-child{background:var(--accent);color:#fff;border-color:var(--accent)}

/* light-mode overlay / modal adjustments */
body.light-mode .login-modal{background:rgba(0,0,0,.45)}
body.light-mode .modal{background:rgba(0,0,0,.45)}
body.light-mode .tour-backdrop{background:rgba(0,0,0,.35)}
body.light-mode .tour-spotlight{box-shadow:0 0 0 9999px rgba(0,0,0,.35)}
body.light-mode .omar-btn{box-shadow:0 4px 20px rgba(124,58,237,.3)}
body.light-mode .celebration-title{-webkit-text-fill-color:var(--gold)}
body.light-mode .celebration-card{border-color:var(--gold);box-shadow:0 0 60px rgba(196,151,0,.2)}
body.light-mode .sidebar-header h1{-webkit-text-fill-color:transparent}
body.light-mode ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18)}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}