/* TOPCIT Quest - Base Styles */
:root{
  --blue:#007BFF;
  --orange:#F4A261;
  --gold:#f59e0b; /* warm orange-gold */
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --success:#22c55e;
  --shadow:0 10px 25px rgba(15,23,42,0.08);
  --radius:16px;
  /* Notification UI variables */
  --card-bg: var(--card);
  --border-color: rgba(148,163,184,0.28);
  --bg-secondary: rgba(248,250,252,0.9);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: rgba(100,116,139,0.9);
  --accent-color: var(--blue);
  --accent-rgb: 0,123,255;
  --accent-color-alpha: rgba(0,123,255,0.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

/* Creative background accents */
body::before, body::after{
  content:""; position:fixed; inset:auto auto 10% -10%; width:520px; height:520px; border-radius:50%; filter:blur(80px); z-index:-1; opacity:.35; pointer-events:none;
}
body::before{ background:radial-gradient(closest-side, rgba(0,123,255,.35), transparent 70%); left:-120px; bottom:12% }
body::after{ background:radial-gradient(closest-side, rgba(244,162,97,.28), transparent 70%); right:-140px; bottom:18% }

.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px; 
  background:linear-gradient(135deg, rgba(0,123,255,.95), rgba(54,198,255,.95));
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:10; color:#fff;
}
.app-header .header-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.app-header .brand{flex:1}
.main-nav{display:flex;gap:8px;margin:0 16px;position:absolute;left:50%;transform:translateX(-50%)}
.main-nav .tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.10));backdrop-filter:saturate(120%) blur(3px);font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(2,8,23,.28)}
.main-nav .tab:hover{background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.12));transform:translateY(-1px);border-color:rgba(255,255,255,.55)}
.main-nav .tab.active{background:#fff;color:#0b1220;border-color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.main-nav .tab:focus-visible{outline:2px solid rgba(255,255,255,.75);outline-offset:2px}
.header-controls{display:flex;align-items:center;gap:18px;margin-left:auto}
/* Uniform control sizes in header */
.header-controls{--control-h:36px}
.header-controls .chip{height:var(--control-h);align-items:center;display:inline-flex;padding:0 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.24);backdrop-filter:saturate(130%) blur(3px);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 6px 14px rgba(2,8,23,.28);font-weight:800}
.header-controls .chip:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 22px rgba(2,8,23,.32)}
.header-controls .chip .flame{line-height:1}
.header-controls .icon-btn{height:var(--control-h);min-width:var(--control-h);padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
.header-controls .wallet{gap:6px}
.header-controls .wallet .amount{font-weight:800;color:var(--gold)}
.header-controls .wallet.chip{border-color:rgba(245,158,11,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), 0 8px 18px rgba(245,158,11,.28)}
.header-controls .streak-mini .streak-num{font-weight:900}
.avatar-btn{width:var(--control-h);height:var(--control-h)}
.icon-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:12px;padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.icon-btn:hover{background:rgba(255,255,255,.28)}
.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(96,165,250,.35)}
.back-btn{backdrop-filter:saturate(120%) blur(4px);-webkit-backdrop-filter:saturate(120%) blur(4px);border-radius:9999px}
.icon-btn .dot-badge{display:inline-block;width:8px;height:8px;background:#ef4444;border-radius:50%;margin-left:4px;vertical-align:middle}
.streak-mini{background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;gap:6px}
.streak-mini .streak-num{font-weight:900}
/* Streak milestone colors */
.streak-mini.streak-1{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.streak-mini.streak-3{background:rgba(59,130,246,.22);border-color:rgba(59,130,246,.55)}
.streak-mini.streak-5{background:rgba(245,158,11,.22);border-color:rgba(245,158,11,.55)}
.streak-mini.streak-7{background:linear-gradient(135deg, rgba(250,204,21,.30), rgba(245,158,11,.24)); border-color:rgba(250,204,21,.65)}
.user-menu{position:relative}
.header-controls .user-menu{height:var(--control-h);display:flex;align-items:center}
.avatar-btn{border:none;background:transparent;color:#0f172a;border-radius:50%;width:var(--control-h);height:var(--control-h);aspect-ratio:1/1;padding:0;line-height:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;transition:transform .15s ease;overflow:hidden;vertical-align:middle}
.avatar-btn:hover{transform:translateY(-1px)}
.avatar-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
.user-menu.open .avatar-btn{box-shadow:none}
.avatar-btn .avatar, .avatar-btn .avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.user-menu .menu{position:absolute;right:0;top:44px;background:#fff;color:#0f172a;border-radius:12px;box-shadow:0 20px 40px rgba(2,8,23,.18);padding:8px;display:none;min-width:160px}
.user-menu .menu .menu-item{display:block;width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:700}
.user-menu .menu .menu-item:hover{background:#f3f4f6}
.user-menu .menu .danger{color:#dc2626}
.user-menu.open .menu{display:block}
/* header streak condensed into controls; remove old hero styles */
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:24px}
.logo-img{width:36px;height:36px;display:block}
.titles h1{margin:0;font-size:20px;font-weight:800}
.titles .subtitle{margin:0;color:#e2e8f0;font-size:13px}

.quick-actions{display:flex;gap:10px}
.btn{border:none;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer;transition:.15s box-shadow,.15s transform, .15s background-color, .15s border-color; text-decoration:none;will-change:transform}
.btn.primary{background:#007BFF;color:#fff;border:1px solid rgba(0,0,0,.08)}
.btn.primary:hover{background:#0066d6;box-shadow:0 10px 24px rgba(0,102,214,.35)}
.btn.ghost{background:transparent;color:#0f172a;border:2px solid rgba(15,23,42,.2)}
.btn.ghost:hover{border-color:rgba(15,23,42,.35);box-shadow:0 8px 18px rgba(2,8,23,.12)}
.btn.small{padding:8px 12px;font-size:13px}
.btn.tiny{padding:6px 10px;font-size:12px}
.btn:hover{box-shadow:0 8px 20px rgba(0,123,255,.25); transform:translateY(-1px)}
/* Alt button to match sapphire style but different color */
.btn.alt{background:linear-gradient(135deg, #b45309, #f59e0b); color:#fff; border:0; 
  box-shadow: 0 6px 0 #3a2508, 0 10px 24px rgba(0,0,0,.35), 0 10px 24px rgba(245,158,11,.30); 
  font-weight:800; position:relative}
.btn.alt:hover{background:linear-gradient(135deg, #f59e0b, #b45309); filter:brightness(1.02); 
  box-shadow: 0 6px 0 #3a2508, 0 12px 28px rgba(0,0,0,.45), 0 12px 28px rgba(245,158,11,.35)}
/* Base shadow under alt button for lifted look */
.btn.alt::before{content:""; position:absolute; left:8px; right:8px; bottom:-6px; height:14px; border-radius:999px; pointer-events:none; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 70%); filter:blur(3px); opacity:.55}
.btn.alt:hover::before{opacity:.65}

.container{max-width:1920px;margin:24px auto;padding:0 24px;display:flex;flex-direction:column;gap:28px}
.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

.card{background:rgba(255,255,255,0.7);backdrop-filter:saturate(120%) blur(4px);-webkit-backdrop-filter:saturate(120%) blur(4px);border-radius:var(--radius);box-shadow:0 20px 40px rgba(2,8,23,0.08);padding:20px;border:1px solid rgba(255,255,255,.6)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.chip{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.chip.blue{background:rgba(0,123,255,.18);color:#0556b3}
.chip.orange{background:rgba(245,158,11,.20);color:var(--gold)}
.chip.diff-beginner{background:rgba(34,197,94,.18); color:#22c55e; border:1px solid rgba(34,197,94,.30)}
.chip.diff-intermediate{background:rgba(154,0,184,.20) !important; color:#9a00b8 !important; border:1px solid rgba(154,0,184,.35) !important}
.chip.diff-advanced{background:rgba(255,96,0,.20) !important; color:#ff6000 !important; border:1px solid rgba(255,96,0,.35) !important}
.chip.diff-impossible{background:rgba(140,4,4,.20); color:#8c0404; border:1px solid rgba(140,4,4,.35)}
.chip.diff-expert{background:rgba(239,68,68,.18); color:#fca5a5; border:1px solid rgba(239,68,68,.30)}
.chip.subtle{background:#eef2ff;color:#4f46e5}
.chip.coin{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3)}
.wallet{display:flex;align-items:center;gap:8px}
.coin-icon{width:18px;height:18px;display:inline-block;object-fit:contain;vertical-align:-3px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.streak-icon{width:18px;height:18px;display:inline-block;object-fit:contain;vertical-align:-3px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.notify-icon{width:18px;height:18px;display:inline-block;object-fit:contain;vertical-align:-3px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.coin.ms{color:var(--gold)}
.coins.chip{color:var(--gold); border-color:rgba(245,158,11,.45); box-shadow:0 4px 12px rgba(245,158,11,.18)}
/* Override any remaining amber coin colors with gold */
.board .coins .coin{color:var(--gold)}

/* Streak Tracker */
.streak-card .streak-banner{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#ffedd5,#fde68a);border-radius:12px;padding:14px 16px;font-weight:900;color:#9a3412;letter-spacing:.3px}
.streak-card .streak-sub{margin:10px 0 14px;color:var(--muted)}
.reset-warning{margin-left:8px;color:#b91c1c;font-weight:700}
.streak-progress{display:flex;gap:10px;align-items:center}
.streak-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;box-shadow:inset 0 0 0 2px #fff}
.streak-dot.done{background:linear-gradient(135deg,#fb923c,#f97316)}
.streak-dot.current{background:linear-gradient(135deg,#fb923c,#ef4444)}
.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}70%{box-shadow:0 0 0 12px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
/* Flame animation */
.flame-anim{animation:flicker 1.2s infinite ease-in-out}
@keyframes flicker{0%,100%{filter:drop-shadow(0 0 0 rgba(249,115,22,.4))}50%{filter:drop-shadow(0 0 8px rgba(249,115,22,.7))}}
/* Progress shimmer */
@keyframes progressShine{0%{transform:translateX(0)}100%{transform:translateX(220%)}}

/* XP & Level */
.level-path{color:var(--muted);margin:4px 0 12px}
.progress{height:16px;background:#e5e7eb;border-radius:999px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 2px 6px rgba(255,255,255,.35), 0 8px 18px rgba(2,8,23,.10)}
/* vertical separators every 10% */
.progress::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:repeating-linear-gradient(to right, rgba(255,255,255,.30) 0, rgba(255,255,255,.30) 1px, transparent 1px, transparent 10%);
  opacity:.35}
.progress-bar{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80 55%, #a7f3d0);position:relative;transition:width .3s ease;box-shadow:inset 0 0 8px rgba(255,255,255,.6), 0 8px 16px rgba(74,222,128,.35);will-change:width; z-index:1}
.progress-bar::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%;background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));opacity:.6;filter:blur(.5px);animation:progressShine 2.4s linear infinite}
.progress-bar::before{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,rgba(255,255,255,.55),transparent)}
.progress-percent{-webkit-text-stroke:.4px rgba(0,0,0,.25)}
.progress-bar .progress-glow{position:absolute;right:0;top:-6px;width:22px;height:22px;border-radius:50%;background:rgba(74,222,128,.95);box-shadow:0 0 8px rgba(74,222,128,.65)}
.progress-percent{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:900;font-size:14px;letter-spacing:.4px;color:#fff;pointer-events:none; z-index:3;
  padding:2px 10px;border-radius:9999px;background:rgba(2,8,23,.32);backdrop-filter:blur(1.6px);
  text-shadow:0 0 12px rgba(74,222,128,.55), 0 0 4px rgba(0,0,0,.45)}
.progress-hint{margin-top:8px;color:var(--muted);font-size:13px}
.xp-stats{display:flex;gap:8px;align-items:center}
.xp-stats .user{display:flex;align-items:center;gap:10px;margin-right:auto}
.xp-stats .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid rgba(255,255,255,.6); box-shadow:0 6px 14px rgba(2,8,23,.08)}
.xp-stats .who .name{font-weight:800}
.xp-stats .who .muted{font-size:12px;color:var(--muted)}
.milestones{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}

/* Badges */
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.badge{position:relative;background:linear-gradient(145deg,#fafafa,#eceff7);border-radius:14px;padding:14px;text-align:center;box-shadow:0 10px 20px rgba(2,8,23,0.08);border:1px solid rgba(2,8,23,.06);min-height:120px;display:flex;flex-direction:column;justify-content:center}
.badge .icon{font-size:28px;margin:4px 0}
.badge .label{font-weight:700;font-size:12px;color:var(--muted)}
.badge .shine{position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.9) 40%,transparent 60%);transform:skewX(-20deg);opacity:.7;animation:shine 2.4s linear infinite}
/* Badge tooltips */
.badge[data-tip]{position:relative}
.badge[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:8px;background:#0f172a;color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;box-shadow:0 8px 16px rgba(2,8,23,.24)}
.badge.gold{background:linear-gradient(145deg,#fff7cc,#ffe082)}
.badge.orange{background:linear-gradient(145deg,#ffe1cc,#ffcaa6)}
.badge.blue{background:linear-gradient(145deg,#e0f2ff,#bfe0ff)}
.badge.purple{background:linear-gradient(145deg,#efe1ff,#d7c2ff)}

/* Analytics */
.analytics-card{padding:6px}
.analytics-card .card-head{margin-bottom:8px}
.analytics-card .charts{gap:6px;align-items:stretch}
.analytics-card .chart{padding:6px;min-height:120px;display:flex;flex-direction:column}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.chart{background:#f8fafc;border-radius:12px;padding:12px;border:1px solid #eef2f7}
.chart-title{font-weight:800;margin-bottom:6px}

.bars{display:flex;align-items:flex-end;gap:8px;height:60px}
.bar{flex:1;min-width:12px;height:var(--h);background:linear-gradient(180deg,var(--orange),#e76f51);border-radius:8px;box-shadow:inset 0 -2px 0 rgba(255,255,255,.6), 0 6px 14px rgba(244,162,97,.25);position:relative;transform:translateY(6px);opacity:0;transition:transform .3s ease, opacity .3s ease;will-change:transform,opacity}
.bar::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,rgba(255,255,255,.6),transparent);border-bottom-left-radius:8px;border-bottom-right-radius:8px}

.chart.revealed .bar{transform:translateY(0);opacity:1}
.x-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}

.lines{position:relative;height:60px;background:repeating-linear-gradient(to top,#eef2f7, #eef2f7 1px, transparent 1px, transparent 18px);border-radius:8px;overflow:hidden}
.line{position:absolute;inset:0;--c:#000;opacity:0;transform:translateY(6px);transition:transform .4s ease, opacity .4s ease;will-change:transform,opacity}
.chart.revealed .line{opacity:1;transform:translateY(0)}
.line::before{content:"";position:absolute;left:0;right:0;height:2px;top:calc(60px - var(--p1));background:var(--c);box-shadow:0 4px 6px rgba(0,0,0,.1);
  background:linear-gradient(90deg,transparent 0%, var(--c) 10%, var(--c) 90%, transparent 100%)}
/* Simulated points via gradients */
.line.programming{--c:#2563eb}
.line.databases{--c:#0ea5e9}
.line.design{--c:#8b5cf6}
.line.business{--c:#22c55e}

.legend{display:flex;gap:14px;align-items:center;margin-top:auto;color:var(--muted);font-size:12px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.dot.programming{background:#2563eb}
.dot.databases{background:#0ea5e9}
.dot.design{background:#8b5cf6}
.dot.business{background:#22c55e}

/* Rewards & Leaderboard */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dashboard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:stretch}
.dashboard-grid .card{display:flex;flex-direction:column;height:100%}
.store-card{min-height:500px; position:relative}
.leaderboard-card{min-height:500px; position:relative}
.leaderboard-top1, .leaderboard-top25, .leaderboard-rest{display:flex;flex-direction:column;gap:12px}
.leaderboard-top1{margin-bottom:12px}
.leaderboard-top25{margin-bottom:12px}
.store-card .store-items{max-height:none;overflow:visible;flex:1;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;padding:8px 4px}
@media (max-width: 1024px){
  .store-card .store-items{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 640px){
  .store-card .store-items{grid-template-columns:1fr;}
}
.leaderboard-card .board{max-height:360px;overflow:auto;flex:1}
.section-title{font-weight:800;margin-bottom:10px}
.store-items{display:flex;flex-direction:column;gap:10px}
.store-item{display:flex;flex-direction:column;align-items:center;text-align:center;background:#f8fafc;padding:20px;border-radius:12px;border:1px solid #eef2f7;transition:transform .12s ease, box-shadow .12s ease;will-change:transform;min-height:260px;height:100%;gap:10px;justify-content:flex-start}
.store-item:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(2,8,23,.08)}
.store-item .avatar{font-size:32px;margin-bottom:10px}
.store-item .meta{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}
.store-item .name{font-weight:700}
.store-item .cost{color:var(--muted);font-weight:700}
/* Consistent logo sizing for dashboard tiles */
.store-logo{width:36px;height:36px;object-fit:contain}
/* Pin redeem button to the bottom of tile */
.store-item .btn.small.primary{align-self:center;min-width:120px;margin-top:auto}

/* Dashboard-specific outlined tile look */
.store-card .store-items .store-item{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.22);
  background: linear-gradient(180deg, rgba(148,163,184,.10), transparent), var(--card, #ffffff);
  min-height:160px; /* baseline */
  height:240px; /* fixed height for dashboard tiles (reduced) */
  box-shadow:0 4px 10px rgba(0,0,0,.20);
  overflow:hidden;
}
.store-card .store-items .store-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(2,8,23,.06);
}
.store-card .store-items .store-item .meta{margin:0}
.store-card .store-items .store-item .btn.small.primary{margin-top:auto}

.store-card .store-items .store-item .description{
  font-size:0.92rem;
  line-height:1.25em;
  max-height:3.75em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

/* Locked (unaffordable) tile state */
.store-card .store-items .store-item.locked{
  opacity: 0.7;
}
.store-card .store-items .store-item.locked .btn.small.primary{
  cursor: not-allowed;
}

/* Empty store message */
.empty-store-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0;margin:0}
.empty-icon{font-size:48px;margin-bottom:16px;opacity:0.6}
.empty-icon img{width:48px;height:48px;display:block}
.empty-text{font-weight:700;font-size:18px;color:var(--text);margin-bottom:8px}
.empty-subtext{color:var(--muted);font-size:14px}

/* Empty message inside Learn board should not overlay tabs */
.quest-board .empty-store-message{position:static; padding:24px 0}

.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.leaderboard-card .board li{display:grid;grid-template-columns:32px 24px 28px 1fr 84px 110px auto;gap:12px;align-items:center;padding:12px 18px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(148,163,184,.08), rgba(148,163,184,.04)), rgba(2,8,23,.74);border:1px solid rgba(148,163,184,.22);box-shadow:0 6px 12px rgba(0,0,0,.25);transition:transform .12s ease, box-shadow .12s ease}
.leaderboard-card .board li:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.35)}
.leaderboard-card .board li.top1{border-color:rgba(250,204,21,.35);background:linear-gradient(180deg, rgba(250,204,21,.12), rgba(2,8,23,.62))}
.leaderboard-card .board li.top2{border-color:rgba(148,163,184,.30);background:var(--card)}
.leaderboard-card .board li.top3{border-color:rgba(253,186,116,.35);background:var(--card)}

/* Apply same layout to existing leaderboard DOM structure */
.leaderboard-top1 .top-player,
.leaderboard-top25 .top-player{display:grid;grid-template-columns:32px 24px 40px 1.5fr 100px 120px auto;column-gap:16px;row-gap:8px;align-items:center;padding:14px 20px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(148,163,184,.08), rgba(148,163,184,.04)), rgba(2,8,23,.74);border:1px solid rgba(148,163,184,.22);box-shadow:0 6px 12px rgba(0,0,0,.25);transition:transform .12s ease, box-shadow .12s ease}
.leaderboard-top1 .top-player:hover,
.leaderboard-top25 .top-player:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.35)}
.leaderboard-top1 .top1{border-color:rgba(250,204,21,.35);background:linear-gradient(180deg, rgba(250,204,21,.12), rgba(2,8,23,.62))}
.leaderboard-top25 .top2{border-color:rgba(148,163,184,.30);background:var(--card)}
.leaderboard-top25 .top3{border-color:rgba(253,186,116,.35);background:var(--card)}
.leaderboard-rest .player-row{display:grid;grid-template-columns:32px 34px 1.4fr 90px 110px auto;column-gap:16px;row-gap:6px;align-items:center;padding:12px 16px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(148,163,184,.08), rgba(148,163,184,.04)), rgba(2,8,23,.74);border:1px solid rgba(148,163,184,.22);box-shadow:0 6px 12px rgba(0,0,0,.25);transition:transform .12s ease, box-shadow .12s ease}
.leaderboard-rest .player-row:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.35)}
.leaderboard-top1 .top1{min-height:80px;grid-template-columns:32px 24px 48px 1.6fr 96px 110px auto;box-shadow:0 8px 18px rgba(250,204,21,.2), 0 6px 14px rgba(0,0,0,.28);}
.leaderboard-top1 .top1{position:relative}
.leaderboard-top1 .top1::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 44px at 14% 0%, rgba(250,204,21,.28), transparent 60%);pointer-events:none;z-index:0}
.leaderboard-top1 .top1 > *{position:relative;z-index:1}
.leaderboard-top1 .top1 .avatar-icon{width:40px;height:40px}
.leaderboard-top1 .top1 .player-info .pic{position:relative}
.leaderboard-top1 .top1 .player-info .pic::after{content:"👑";position:absolute;top:-12px;left:6px;font-size:20px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));animation:crownBob 2s ease-in-out infinite}
@keyframes crownBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.leaderboard-top1 .rank{background:linear-gradient(180deg,#facc15,#f59e0b);color:#0b1220;border:1px solid rgba(245,158,11,.6)}
.leaderboard-top1 .medal .trophy-icon{width:22px;height:22px}
.leaderboard-top1 .player-stats .level.chip{border-color:rgba(139,92,246,.35);background:linear-gradient(180deg, rgba(139,92,246,.16), rgba(139,92,246,.08));color:#6d28d9;padding:6px 10px;font-weight:800}
.leaderboard-top1 .coins.chip{padding:6px 10px;font-size:13px;color:var(--gold);border-color:rgba(245,158,11,.55);box-shadow:0 6px 14px rgba(245,158,11,.24)}
.leaderboard-top1 .score{font-size:15px;font-weight:900;color:#60a5fa;text-shadow:0 0 10px rgba(96,165,250,.3)}
.leaderboard-top25 .top-player .avatar-icon{width:28px;height:28px}
.leaderboard-rest .player-row .avatar-icon{width:24px;height:24px}
.leaderboard-rest .player-row{padding:10px 14px;grid-template-columns:32px 30px 1fr 80px 100px auto}
.leaderboard-top1 .player-info .user{font-weight:800}
.leaderboard-top25 .player-info .user{font-weight:700}
/* Ensure name text is readable on dark cards */
.leaderboard-card .user{color:#fff !important}
.leaderboard-top1 .rank-medal{display:flex;align-items:center;gap:6px}
.leaderboard-top25 .rank-medal{display:flex;align-items:center;gap:6px}
.leaderboard-top1 .player-info, .leaderboard-top25 .player-info{display:flex;align-items:center;gap:8px}
.leaderboard-top1 .player-info .user, .leaderboard-top25 .player-info .user{font-size:14px; font-weight:800; letter-spacing:.2px}
.leaderboard-top1 .player-stats, .leaderboard-top25 .player-stats{display:flex;align-items:center;gap:12px}
.leaderboard-rest .player-row .level.chip, .leaderboard-rest .player-row .coins.chip{margin-right:4px}
.leaderboard-top1 .player-info .user, .leaderboard-top25 .player-info .user, .leaderboard-rest .player-row .user{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Light theme parity for cards */
[data-theme="light"] .leaderboard-top1 .top-player,
[data-theme="light"] .leaderboard-top25 .top-player,
[data-theme="light"] .leaderboard-rest .player-row{background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(2,8,23,.06)}
[data-theme="light"] .leaderboard-top1 .top-player:hover,
[data-theme="light"] .leaderboard-top25 .top-player:hover,
[data-theme="light"] .leaderboard-rest .player-row:hover{transform:translateY(-2px); box-shadow:0 8px 16px rgba(2,8,23,.10)}
.medal{font-size:16px;color:#facc15;text-shadow:0 0 6px rgba(250,204,21,.35)}
.rank{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background:linear-gradient(180deg, rgba(148,163,184,.18), rgba(148,163,184,.06));border:1px solid rgba(148,163,184,.28);color:var(--text);font-weight:800}
.pic{font-size:18px}
.user{font-weight:700;color:var(--text)}
.score{color:#60a5fa;font-weight:800;text-shadow:0 0 8px rgba(96,165,250,.25)}
/* Level & Coins chips */
.board .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9999px;font-weight:700;border:1px solid rgba(148,163,184,.28);background:linear-gradient(180deg, rgba(148,163,184,.16), rgba(148,163,184,.08));color:var(--text)}
.board .coins .coin{color:#f59e0b}

.app-footer{margin:20px auto 40px;max-width:1920px;color:var(--muted);text-align:center;font-size:13px}

/* Toasts */
.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:50}
.toast{background:#0f172a;color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 12px 24px rgba(2,8,23,.24);font-weight:700}
.toast.success{background:#16a34a}
.toast.error{background:#dc2626}

/* Responsiveness */
@media (max-width: 1024px){
  .grid.two{grid-template-columns:1fr}
  .charts{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .badges{grid-template-columns:repeat(2,1fr)}
}

/* Wider desktop optimizations */
@media (min-width: 1280px){
  .grid.two{grid-template-columns:2fr 1.2fr}
  .topics-grid{grid-template-columns:repeat(4,1fr)}
}

/* Topics */
.topics-card .card-head{margin-bottom:16px}
.topics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.topics-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.topic{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,0.7);border:1px solid rgba(2,8,23,.06);border-radius:14px;padding:12px;box-shadow:0 10px 20px rgba(2,8,23,.06);transition:transform .12s ease, box-shadow .12s ease, background .12s ease;min-height:120px;will-change:transform}
.topic:hover{transform:translateY(-3px);box-shadow:0 18px 32px rgba(2,8,23,.1);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7))}
.topic .topic-body{flex:1}
.topic-title{font-weight:800}
.icon-badge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,rgba(0,123,255,.15),rgba(244,162,97,.15));margin-right:6px}

/* Icon utilities for Material Symbols */
.ms{ font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 1em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-flex; align-items: center; justify-content: center; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.icon-inline{ display: inline-flex; align-items: center; gap: 6px; }
.icon-badge.ms{ font-size: 1.1rem; }
.icon-badge .topic-icon{ width:18px; height:18px; display:block; object-fit:contain; }
.reward-logo{ object-fit: contain; }

/* Image-based icons */
.trophy-icon{ width:1em; height:1em; object-fit:contain; display:inline-block; vertical-align:-2px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.avatar-icon{ width:1em; height:1em; object-fit:cover; display:inline-block; border-radius:50%; vertical-align:-2px; box-shadow:0 2px 4px rgba(0,0,0,.15); }
/* Dashboard tab icons */
.tab-icon{ width:18px; height:18px; display:inline-block; object-fit:contain; vertical-align:-2px; flex-shrink:0; }
/* Ensure nav tab images never expand beyond icon size */
.main-nav .tab > img.tab-icon{ width:18px !important; height:18px !important; max-width:18px !important; max-height:18px !important; flex:0 0 18px; }

/* Generic inline icon image used across pages (e.g., materials list, tabs) */
.icon-img{ width:18px; height:18px; object-fit:contain; display:inline-block; vertical-align:middle; margin-right:8px; }
/* Icon inside chips (e.g., Completed) */
.chip .chip-icon{ width:16px; height:16px; object-fit:contain; display:inline-block; vertical-align:middle; margin-right:6px; }

.topic-desc{color:var(--muted);font-size:13px;margin:4px 0 8px}
.topic-actions{display:flex;gap:8px}

.ring{position:relative;display:grid;place-items:center}
.ring svg{display:block}
.ring .bg{fill:none;stroke:#e5e7eb;stroke-width:12}
.ring .fg{fill:none;stroke:url(#ringGradient);stroke-width:12;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray: 326; stroke-dashoffset: 326; transition: stroke-dashoffset .9s ease}
.ring-label{position:absolute;font-weight:800;color:#0f172a}

/* Streak banner glow */
.streak-card .streak-banner{box-shadow:0 0 0 0 rgba(249,115,22,.35); animation:streakGlow 2.2s ease-in-out infinite}
@keyframes streakGlow{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.25)}50%{box-shadow:0 0 24px 4px rgba(249,115,22,.35)}}

/* Materials */
.materials .materials-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.materials .materials-list li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;background:#f8fafc;padding:10px;border:1px solid #eef2f7;border-radius:12px}
.materials .materials-list a{color:var(--text);text-decoration:none;font-weight:700}
.materials .materials-list a:hover{color:#60a5fa; text-shadow:0 0 6px rgba(96,165,250,.25)}
.materials .group-title{color:var(--text);font-weight:800;margin:10px 0 6px}

/* Learn Courses */
.learn-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px,320px));gap:16px;align-items:stretch;justify-content:center}
.learn-item{position:relative;background:linear-gradient(180deg, #f9fafb, #f3f4f6);border:1px solid #e5e7eb;border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-height:240px;justify-content:flex-start;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.learn-item::before{content:"";position:absolute;inset:0;border-radius:14px;padding:1px;background:linear-gradient(135deg, rgba(99,102,241,.35), rgba(96,165,250,.35));-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.0;pointer-events:none}
.learn-item:hover{transform:translateY(-3px);box-shadow:0 16px 28px rgba(2,8,23,.22), 0 0 0 1px rgba(148,163,184,.18)}
.learn-item:hover::before{opacity:.9}
.learn-item .learn-thumb{width:100%;height:140px;border-radius:12px;object-fit:cover;border:1px solid #e2e8f0;background:#fff}
/* Ensure thumbnails never overflow the card */
.thumb-wrap{width:100%;height:140px;border-radius:12px;overflow:hidden;border:1px solid #e2e8f0;background:#fff}
.thumb-wrap .learn-thumb{width:100%;height:100%;object-fit:cover;display:block;border:none;background:transparent}
/* Admin preview cards: ensure thumbnails are contained */
.module-card .thumb-wrap{width:100%;height:140px;overflow:hidden;border-radius:12px}
.module-card .thumb-wrap .learn-thumb{width:100%;height:100%;object-fit:cover;display:block}
.learn-item h4{margin:0;font-weight:800;color:var(--text)}
.learn-item p{margin:0;color:var(--muted)}
.learn-item .meta{display:flex;gap:8px;color:var(--muted);font-weight:700;justify-content:center;flex-wrap:wrap}
.learn-item .course-actions{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:auto}
.learn-item.completed{opacity:.85}
.learn-item .course-content{color:var(--muted);text-align:left;align-self:stretch}
/* Difficulty & duration chips */
.chip.gray{background:rgba(148,163,184,.18);color:#334155;border:1px solid rgba(148,163,184,.28)}
.chip.purple{background:rgba(139,92,246,.16);color:#6d28d9;border:1px solid rgba(139,92,246,.35)}

/* Quest Board theme */
.quest-board{position:relative;overflow:hidden}
.quest-board .card-head h3{font-weight:800;letter-spacing:.5px}
/* Remove board texture; keep a subtle vignette only */
.quest-board::before{content:"";position:absolute;inset:0;z-index:-1;
  background: radial-gradient(1200px 400px at 50% 0%, rgba(0,0,0,.08), transparent 60%);
}
.quest-board .sub-tabs{background:rgba(0,0,0,.06);border-radius:12px;padding:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.quest-board .sub-tab{background:rgba(255,255,255,.10);border:1px solid rgba(148,163,184,.28);border-radius:10px}
.quest-board .sub-tab.active{background:rgba(255,255,255,.18)}
.quest-board .indicator{display:none}

/* Parchment-style quest cards inside the board */
.quest-board .learn-grid{padding:12px}
/* Tone down parchment: keep default card look, retain pins */
.quest-board .learn-item{background:linear-gradient(180deg, #f9fafb, #f3f4f6);border-color:#e5e7eb}
.quest-board .learn-item h4{color:var(--text)}
.quest-board .learn-item p{color:var(--muted)}
.quest-board .learn-item .learn-thumb{border-color:#e2e8f0;background:#fff}
.quest-board .learn-item .course-actions .btn{border-radius:9999px}

/* Pin accents on quest cards */
.quest-board .learn-item .thumb-wrap{position:relative}
.quest-board .learn-item .thumb-wrap::before,
.quest-board .learn-item .thumb-wrap::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fefefe, #c9c9c9 60%, #7a7a7a 100%);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.quest-board .learn-item .thumb-wrap::before{top:-6px;left:12px}
.quest-board .learn-item .thumb-wrap::after{top:-6px;right:12px}

/* Dark mode adjustments for the quest board */
[data-theme="dark"] .quest-board::before{
  background: radial-gradient(1200px 400px at 50% 0%, rgba(0,0,0,.18), transparent 60%);
}
[data-theme="dark"] .quest-board .sub-tabs{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
[data-theme="dark"] .quest-board .sub-tab{background:rgba(255,255,255,.08);border-color:rgba(148,163,184,.28)}
[data-theme="dark"] .quest-board .sub-tab.active{background:rgba(255,255,255,.14)}
[data-theme="dark"] .quest-board .learn-item{background:linear-gradient(180deg, rgb(2,8,23), rgb(15,23,42)); border-color:rgba(148,163,184,.28)}
[data-theme="dark"] .quest-board .learn-item h4{color:var(--text)}
[data-theme="dark"] .quest-board .learn-item p{color:#9ca3af}
[data-theme="dark"] .quest-board .learn-item .learn-thumb{border-color:rgba(148,163,184,.28);background:rgba(255,255,255,.08)}
/* Progress bar */
.learn-item .progress{position:relative;width:100%;height:8px;border-radius:9999px;background:#e5e7eb;overflow:hidden;border:1px solid #e5e7eb}
.learn-item .progress .bar{height:100%;width:0;border-radius:9999px;background:linear-gradient(90deg, #4f46e5, #60a5fa);box-shadow:0 0 12px rgba(96,165,250,.45)}
.learn-item .progress .label{position:absolute;right:8px;top:-22px;font-size:12px;color:#64748b;font-weight:800}

/* Hover preview modal for Learn page */
.course-preview{position:fixed;top:0;left:0;display:block;pointer-events:none;z-index:1000;max-width:420px;background:var(--preview-bg,#fff);border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 36px rgba(2,8,23,.25), 0 0 0 1px rgba(148,163,184,.18);padding:14px 14px 16px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity 140ms ease, transform 160ms ease, visibility 0s linear 160ms}
.course-preview::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120px 80px at 20% 0%, rgba(99,102,241,.12), transparent 70%), radial-gradient(120px 80px at 80% 0%, rgba(34,197,94,.10), transparent 70%);} 
.course-preview .accent{position:absolute;top:0;left:0;right:0;height:4px;border-top-left-radius:inherit;border-top-right-radius:inherit;background:linear-gradient(90deg,#22d3ee,#6366f1 60%,#a855f7)}
.course-preview::after{content:"";position:absolute;width:0;height:0;pointer-events:none}
.course-preview.anchor-above::after{bottom:-8px;left:var(--caret-x,24px);border-width:8px 8px 0 8px;border-style:solid;border-color:var(--preview-bg,#fff) transparent transparent transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.course-preview.anchor-below::after{top:-8px;left:var(--caret-x,24px);border-width:0 8px 8px 8px;border-style:solid;border-color:transparent transparent var(--preview-bg,#fff) transparent;filter:drop-shadow(0 -2px 2px rgba(0,0,0,.25))}
.course-preview.visible{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 140ms ease, transform 160ms ease}
.course-preview .title{font-weight:800;margin:0 8px 6px;color:var(--text)}
.course-preview .desc{color:var(--muted);margin:0 0 8px}
.course-preview .chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.course-preview .progress{position:relative;width:100%;height:8px;border-radius:9999px;background:#e5e7eb;overflow:hidden;border:1px solid #e5e7eb;margin-bottom:8px}
.course-preview .progress .bar{height:100%;width:0;border-radius:9999px;background:linear-gradient(90deg, #4f46e5, #60a5fa);box-shadow:0 0 12px rgba(96,165,250,.45)}
.course-preview .progress .label{position:absolute;right:8px;top:-22px;font-size:12px;color:#64748b;font-weight:800}
.course-preview ul{margin:0;padding-left:18px;color:var(--muted)}
.course-preview ul li{margin:4px 0}

/* SVG Gradient for rings */
svg defs linearGradient#ringGradient stop{stop-color:var(--blue)}

/* 12-col grid utilities */
.grid-12{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:24px;align-items:start}
.span-12{grid-column:span 12}
.span-8{grid-column:span 8}
.span-6{grid-column:span 6}
.span-4{grid-column:span 4}
@media (max-width:1024px){
  .grid-12{gap:16px}
  .span-8,.span-6,.span-4{grid-column:span 12}
}

.xp-chip{display:inline-flex;align-items:center;gap:6px}
.materials .materials-list .meta{color:var(--muted);font-weight:700}

@media (prefers-color-scheme: dark) {
  /* Progress bar contrast in dark mode */
  .progress{background:#1f2937;border-color:rgba(148,163,184,.28);box-shadow:inset 0 2px 6px rgba(148,163,184,.18), 0 12px 24px rgba(0,0,0,.45)}
  .progress-percent{color:#e2e8f0;background:rgba(2,8,23,.60);text-shadow:0 0 10px rgba(34,197,94,.40), 0 0 4px rgba(0,0,0,.45)}
  /* Chips in card headers */
  .chip.subtle{background:rgba(148,163,184,.18); color:#a5b4fc; border:1px solid rgba(148,163,184,.25)}
  .chip.blue{background:rgba(96,165,250,.18); color:#93c5fd}
  .chip.orange{background:rgba(245,158,11,.16); color:var(--gold)}
  .chip.diff-advanced{background:rgba(255,96,0,.25) !important; color:#ff6000 !important; border:1px solid rgba(255,96,0,.45) !important}
  .chip.diff-intermediate{background:rgba(154,0,184,.25) !important; color:#9a00b8 !important; border:1px solid rgba(154,0,184,.45) !important}
  .chip.diff-impossible{background:rgba(140,4,4,.25); color:#8c0404; border:1px solid rgba(140,4,4,.45)}

  /* Neutral buttons (e.g., Redeem in Store) */
  .btn{background:rgba(255,255,255,.12); color:var(--text); border:1px solid rgba(148,163,184,.28)}
  .btn:hover{background:rgba(255,255,255,.16); box-shadow:0 8px 18px rgba(0,0,0,.45)}
  .btn.ghost{color:var(--text); border-color:rgba(148,163,184,.35)}
}

/* Manual theme override: ensure strong contrast in explicit light theme */
[data-theme="light"] .progress{background:#e5e7eb}
[data-theme="light"] .progress-percent{color:#0f172a;background:rgba(255,255,255,.85);text-shadow:0 0 8px rgba(34,197,94,.35), 0 0 3px rgba(0,0,0,.20)}
.xp-chip{display:inline-flex;align-items:center;gap:6px}
.materials .materials-list .meta{color:var(--muted);font-weight:700}

@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0b1220;             /* page background */
    --card:#0e1625;           /* surfaces/cards */
    --text:#e5e7eb;           /* primary text */
    --muted:#94a3b8;          /* secondary text */
    --shadow:0 10px 25px rgba(0,0,0,0.45);
    /* Notification UI variables (dark) */
    --card-bg-dark: var(--card);
    --border-color-dark: rgba(148,163,184,0.18);
    --bg-secondary-dark: var(--card);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-muted: rgba(148,163,184,0.9);
    --accent-color: #38bdf8;
    --accent-rgb: 56,189,248;
    --accent-color-alpha: rgba(56,189,248,0.12);
  }

  body::before{opacity:.16; background:radial-gradient(closest-side, rgba(2,132,199,.22), transparent 70%);} 
  body::after{opacity:.14; background:radial-gradient(closest-side, rgba(244,162,97,.16), transparent 70%);} 

  .app-header{background:linear-gradient(135deg, rgba(2,8,23,.96), rgba(30,64,175,.88)); color:#fff}

  .card{background:rgba(2,8,23,.72); border:1px solid rgba(148,163,184,.18);} 
  .topic{background:rgba(2,8,23,.70); border:1px solid rgba(148,163,184,.18); box-shadow:0 10px 20px rgba(0,0,0,.35)}
  .topic:hover{background:linear-gradient(180deg, rgba(2,8,23,.78), rgba(2,8,23,.70)); box-shadow:0 18px 32px rgba(0,0,0,.45)}
  .ring .bg{stroke:#334155}
  .ring-label{color:var(--text)}

  /* Learning Materials, Store, Leaderboard items */
  .materials .materials-list li,
  .learn-item,
  .store-item,
  .board li{background:rgba(2,8,23,.70); border-color:rgba(148,163,184,.18)}
.course-preview{--preview-bg:rgb(2,8,23);border-color:rgba(148,163,184,.28);box-shadow:0 18px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(148,163,184,.28)}
.course-preview .accent{background:linear-gradient(90deg,#06b6d4,#6366f1 60%,#a855f7)}
  .course-preview .title{color:var(--text)}
  .course-preview .desc{color:#9ca3af}
  .learn-item .learn-thumb{border-color:rgba(148,163,184,.28);background:rgba(255,255,255,.08)}

  .board li.top1{border-color:rgba(250,204,21,.35); background:var(--card)}
  .board li.top2{border-color:rgba(148,163,184,.30); background:var(--card)}
  .board li.top3{border-color:rgba(253,186,116,.35); background:var(--card)}
  .rank{color:var(--text)}
  .score{color:#60a5fa; text-shadow:0 0 8px rgba(96,165,250,.25)}

  .icon-badge{background:linear-gradient(135deg, rgba(30,58,138,.35), rgba(244,162,97,.18))}

  /* Charts - dark theme */
  .chart{background:rgba(2,8,23,.70); border-color:rgba(148,163,184,.18)}
  .chart-title{color:var(--text)}
  .lines{background:repeating-linear-gradient(to top, rgba(148,163,184,.16), rgba(148,163,184,.16) 1px, transparent 1px, transparent 18px)}
  .bar{background:linear-gradient(180deg, rgba(245,158,11,.55), rgba(234,88,12,.45)); box-shadow:inset 0 -2px 0 rgba(148,163,184,.24), 0 6px 14px rgba(234,88,12,.28)}
  .bar::after{background:linear-gradient(90deg, rgba(148,163,184,.22), transparent)}
  .line.programming{--c:#60a5fa}
  .line.databases{--c:#36c6ff}
  .line.design{--c:#a78bfa}
  .line.business{--c:#34d399}
  .legend{color:var(--muted)}
  .x-labels{color:var(--muted)}
}




.store-logo{width:28px;height:28px;display:block;object-fit:contain}

/* Dashboard Materials: status color accents */
.materials .materials-list .meta.status-completed{ color:#22c55e; }
.materials .materials-list .meta.status-ongoing{ color:#60a5fa; }

/* Profile Modal */
.profile-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);color:var(--text);border-radius:16px;box-shadow:var(--shadow);width:min(640px,92vw);max-height:80vh;display:none;z-index:1000}
.profile-modal .head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(2,8,23,.08)}
.profile-modal .head h3{margin:0;font-size:18px;font-weight:800}
.profile-modal .body{padding:16px 18px;overflow:auto;max-height:calc(80vh - 56px)}
.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.profile-form .field{display:flex;flex-direction:column;gap:6px}
.profile-form label{font-weight:700;font-size:13px;color:var(--muted)}
.profile-form input[type="text"],.profile-form input[type="email"],.profile-form input[type="tel"]{border:1px solid rgba(2,8,23,.12);border-radius:10px;padding:10px 12px;font-size:14px;background:var(--card);color:var(--text)}
.profile-form input[type="file"]{border:1px dashed rgba(2,8,23,.18);border-radius:10px;padding:10px;background:var(--bg)}
.avatar-preview{display:flex;align-items:center;gap:12px}
.avatar-preview .pic{width:72px;height:72px;border-radius:50%;background:var(--bg);display:grid;place-items:center;overflow:hidden}
.avatar-preview .pic img{width:100%;height:100%;object-fit:cover}
.profile-modal .footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid rgba(2,8,23,.08)}
.btn.ghost{background:var(--bg);color:var(--text);border:1px solid rgba(2,8,23,.08)}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.profile-stat{background:var(--bg);border:1px solid rgba(2,8,23,.08);border-radius:12px;padding:12px}
.profile-stat .label{color:var(--muted);font-size:12px}
.profile-stat .value{font-size:18px;font-weight:800}
.completed-topics{margin-top:12px}
.completed-topics h4{margin:0 0 8px 0;font-size:14px}
.completed-topics ul{margin:0;padding-left:18px}
.completed-topics li{margin:4px 0}
.profile-modal.open{display:block}
.profile-modal-backdrop{position:fixed;inset:0;background:rgba(2,8,23,.55);backdrop-filter:saturate(120%) blur(3px);display:none;z-index:999}
.profile-modal-backdrop.open{display:block}

@media (prefers-color-scheme: dark){
  .profile-modal{background:var(--card);border:1px solid rgba(148,163,184,.18);box-shadow:var(--shadow)}
  .profile-modal .head, .profile-modal .footer{border-color:rgba(148,163,184,.18)}
  .profile-form input[type="text"],.profile-form input[type="email"],.profile-form input[type="tel"]{border-color:rgba(148,163,184,.22);background:var(--card);color:var(--text)}
  .profile-form input[type="file"]{border-color:rgba(148,163,184,.28);background:rgba(255,255,255,.06)}
  .avatar-preview .pic{background:rgba(255,255,255,.08)}
  .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(148,163,184,.22)}
  .profile-stat{background:rgba(2,8,23,.70);border-color:rgba(148,163,184,.18)}
}




/* Sub-tabs for Learn page */
.sub-tabs{position:relative;display:flex;gap:10px;margin:0 0 14px;padding:2px;border-radius:14px;background:rgba(148,163,184,.10)}
.sub-tabs .indicator{position:absolute;height:3px;border-radius:3px;background:linear-gradient(90deg,#06b6d4,#6366f1 60%,#a855f7);bottom:-6px;left:0;width:0;transform:translateX(0);transition:all 220ms ease}
.sub-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid #eef2f7;background:#f8fafc;color:var(--text);font-weight:700;cursor:pointer;transition:background 180ms ease, box-shadow 180ms ease, border-color 180ms ease}
.sub-tab .ms{font-size:18px;line-height:1}
.sub-tab .count{margin-left:4px;padding:2px 8px;border-radius:999px;background:rgba(2,8,23,.06);color:var(--muted);font-weight:600}
.sub-tab:hover{box-shadow:0 6px 16px rgba(2,8,23,.15)}
.sub-tab:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.sub-tab.active{background:linear-gradient(135deg, rgba(0,123,255,.12), rgba(244,162,97,.12));border-color:#e2e8f0}

/* Completed chip */
.chip.green{background:rgba(34,197,94,.18);color:#15803d}

@media (prefers-color-scheme: dark){
  .sub-tab{border-color:rgba(148,163,184,.28);background:rgba(255,255,255,.08)}
  .sub-tab .count{background:rgba(148,163,184,.14);color:#cbd5e1}
  .sub-tab.active{background:linear-gradient(135deg, rgba(30,58,138,.25), rgba(244,162,97,.14));border-color:rgba(148,163,184,.35)}
  .chip.green{background:rgba(34,197,94,.18);color:#34d399}
}




.store-logo{width:28px;height:28px;display:block;object-fit:contain}




/* Disabled state for finish button */
.btn.is-disabled,
.btn[aria-disabled="true"],
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Course page content styles */
.course-card .task {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.course-card .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.quiz-options label {
  display: block;
  padding: 6px 8px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.text-input.error{
  border-color:#dc2626;
  box-shadow:0 0 0 2px rgba(220,38,38,.15);
}

/* Completion view (celebratory redesign) */
.course-card .completion{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:48px 24px; border-radius:20px; overflow:hidden; 
  background: radial-gradient(800px 400px at 50% -10%, rgba(99,102,241,.18), transparent 60%), linear-gradient(180deg, rgba(2,8,23,.78), rgba(2,8,23,.66));
  border:1px solid rgba(148,163,184,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0; transform: translateY(8px) scale(.98);
  transition: opacity .24s ease, transform .24s ease;
}
.course-card .completion.show{ opacity:1; transform:none; }
.course-card .completion::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(160px 100px at 8% 0%, rgba(34,197,94,.12), transparent 60%), radial-gradient(160px 100px at 92% 0%, rgba(59,130,246,.14), transparent 60%); }
.course-card .completion .celebrate{ display:flex; align-items:center; gap:14px; justify-content:center; }
.course-card .completion .quest-banner{ position:relative; padding:14px 18px; border-radius:16px; 
  background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(244,162,97,.22));
  border:2px solid rgba(148,163,184,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.course-card .completion .quest-banner::after{ content:""; position:absolute; inset:0; pointer-events:none; 
  /* Layer 1: subtle "runes" using repeating conic gradient; Layer 2: shine sweep */
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(168,85,247,.12) 0 10deg, transparent 10deg 22deg),
    linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  background-size: auto, 200% 100%;
  animation: shineSwipe 2.4s ease-in-out infinite;
  border-radius:inherit;
  /* Keep effects around edges for arcane ring vibe */
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, black 75%);
  mask: radial-gradient(farthest-side, transparent 62%, black 75%);
}
/* Corner lights / pulsing runes */
.course-card .completion .quest-banner::before{ content:""; position:absolute; inset:0; pointer-events:none; 
  background:
    radial-gradient(12px 12px at 8px 8px, rgba(255,255,255,0.60), transparent 60%),
    radial-gradient(12px 12px at calc(100% - 8px) 8px, rgba(255,255,255,0.60), transparent 60%),
    radial-gradient(12px 12px at 8px calc(100% - 8px), rgba(255,255,255,0.60), transparent 60%),
    radial-gradient(12px 12px at calc(100% - 8px) calc(100% - 8px), rgba(255,255,255,0.60), transparent 60%);
  opacity: .6; animation: cornerPulse 2.8s ease-in-out infinite;
}
@keyframes cornerPulse{ 0%,100%{ opacity:.35; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); } 50%{ opacity:.8; filter: drop-shadow(0 0 12px rgba(255,255,255,.9)); } }

/* Rarity themes */
.course-card .completion .quest-banner.common{ border-color: rgba(203,213,225,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.30); }
.course-card .completion .quest-banner.rare{ border-color: rgba(59,130,246,.55); box-shadow: inset 0 1px 0 rgba(147,197,253,.35), 0 12px 36px rgba(59,130,246,.35); background: linear-gradient(135deg, rgba(30,58,138,.35), rgba(59,130,246,.18)); }
.course-card .completion .quest-banner.epic{ border-color: rgba(168,85,247,.60); box-shadow: inset 0 1px 0 rgba(216,180,252,.45), 0 16px 40px rgba(168,85,247,.35); background: linear-gradient(135deg, rgba(91,33,182,.35), rgba(168,85,247,.22)); }

.course-card .completion .rarity-badge{ display:inline-block; margin-top:8px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fafafa; border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.course-card .completion .rarity-badge.common{ background: linear-gradient(135deg, #475569, #334155); }
.course-card .completion .rarity-badge.rare{ background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.course-card .completion .rarity-badge.epic{ background: linear-gradient(135deg, #a855f7, #7c3aed); }

/* Pop-in + sparkle trail when banner shows */
.course-card .completion.show .rarity-badge{ animation: badgePop .42s ease-out both; }
.course-card .completion .rarity-badge::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%); transform: skewX(-20deg) translateX(-40%); }
.course-card .completion.show .rarity-badge::after{ opacity:1; animation: sparkleTrail 1.4s ease-out .25s both; }

@keyframes badgePop{
  0%{ transform: scale(.85); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  60%{ transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(255,255,255,.4)); }
  100%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
@keyframes sparkleTrail{
  0%{ transform: skewX(-20deg) translateX(-40%); opacity: 0; }
  15%{ opacity: 1; }
  100%{ transform: skewX(-20deg) translateX(120%); opacity: 0; }
}

/* Loot chips under summary */
.course-card .completion .loot-chips{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.course-card .completion .loot-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.2); color:#fff; font-weight:600; position:relative; overflow:hidden; }
.course-card .completion .loot-chip.xp{ background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(99,102,241,.45)); }
.course-card .completion .loot-chip.coins{ background: linear-gradient(135deg, rgba(245,158,11,.45), rgba(251,191,36,.35)); }
.course-card .completion .loot-chip::after{ content:""; position:absolute; top:0; left:-30%; width:30%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition:left .5s ease; }
.course-card .completion .loot-chip:hover::after{ left:130%; }
.course-card .completion .quest-title{ margin:0; font-size:28px; font-weight:900; letter-spacing:.8px; text-transform:uppercase; 
  color:#fefefe; text-shadow: 0 2px 14px rgba(0,0,0,.45), 0 0 12px rgba(99,102,241,.35);
  -webkit-text-stroke: 1px rgba(2,8,23,.45);
}
@keyframes shineSwipe{ 0%{ background-position: -120% 0 } 50%{ background-position: 120% 0 } 100%{ background-position: 120% 0 } }
.course-card .completion h3{ margin:0; font-size:28px; font-weight:900; letter-spacing:.5px; color:#e2e8f0; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.course-card .completion .summary{ font-weight:800; color:#fefefe; margin:6px 0 6px; font-size:18px; text-shadow:0 1px 10px rgba(0,0,0,.35); }
.course-card .completion .summary{ display:inline-flex; align-items:center; gap:12px; }
.course-card .completion .summary .summary-item{ display:inline-flex; align-items:center; gap:8px; }
.xp-icon{ width:18px; height:18px; display:inline-block; object-fit:contain; vertical-align:-3px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.coin-icon{ width:18px; height:18px; display:inline-block; object-fit:contain; vertical-align:-3px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.course-card .completion .actions{ display:flex; gap:12px; justify-content:center; }
.course-card .completion .actions .btn{ width:160px; padding:12px 18px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; }
.course-card .trophy{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, #0ea5e9, #1d4ed8); box-shadow:0 18px 36px rgba(0,0,0,.45), inset 0 2px 8px rgba(255,255,255,.25); }
.course-card .completion.show .trophy{ animation:trophyPop .6s ease-out; }
.course-card .trophy .trophy-icon{ width:40px; height:40px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }

@keyframes trophyPop{ 0%{ transform:scale(.8) rotate(-8deg); box-shadow:0 8px 16px rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.15);} 60%{ transform:scale(1.08) rotate(6deg); box-shadow:0 24px 44px rgba(0,0,0,.45), inset 0 2px 8px rgba(255,255,255,.25);} 100%{ transform:scale(1) rotate(0); box-shadow:0 18px 36px rgba(0,0,0,.45), inset 0 2px 8px rgba(255,255,255,.25);} }

/* Highlight incomplete tasks when attempting to finish */
.course-card .task.needs-action{
  border-color:#dc2626;
  box-shadow:0 0 0 2px rgba(220,38,38,.25);
  animation:taskPulse .9s ease-in-out;
}
@keyframes taskPulse{
  0%{transform:none}
  50%{transform:translateY(-1px)}
  100%{transform:none}
}
@media (prefers-color-scheme: dark){
  .course-card .task {
    background: rgba(2,8,23,0.70);
    border-color: rgba(148,163,184,0.18);
  }
  .quiz-options label { border-color: rgba(148,163,184,0.18); }
  .text-input { background: rgba(2,8,23,0.70); color: var(--text); border-color: rgba(148,163,184,0.25); }
  .text-input.error{ border-color: rgba(239,68,68,.65); box-shadow: 0 0 0 2px rgba(239,68,68,.25); }
  .course-card .trophy{ background:linear-gradient(135deg, rgba(30,64,175,.45), rgba(244,162,97,.28)); box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 2px 8px rgba(255,255,255,.08); }
  .course-card .task.needs-action{border-color:rgba(239,68,68,.55); box-shadow:0 0 0 2px rgba(239,68,68,.25)}
}
.xp-chip{display:inline-flex;align-items:center;gap:6px}
.materials .materials-list .meta{color:var(--muted);font-weight:700}

@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0b1220;             /* page background */
    --card:#0e1625;           /* surfaces/cards */
    --text:#e5e7eb;           /* primary text */
    --muted:#94a3b8;          /* secondary text */
    --shadow:0 10px 25px rgba(0,0,0,0.45);
  }

  body::before{opacity:.16; background:radial-gradient(closest-side, rgba(2,132,199,.22), transparent 70%);} 
  body::after{opacity:.14; background:radial-gradient(closest-side, rgba(244,162,97,.16), transparent 70%);} 

  .app-header{background:linear-gradient(135deg, rgba(2,8,23,.96), rgba(30,64,175,.88)); color:#fff}

  .card{background:rgba(2,8,23,.72); border:1px solid rgba(148,163,184,.18);} 
  .topic{background:rgba(2,8,23,.70); border:1px solid rgba(148,163,184,.18); box-shadow:0 10px 20px rgba(0,0,0,.35)}
  .topic:hover{background:linear-gradient(180deg, rgba(2,8,23,.78), rgba(2,8,23,.70)); box-shadow:0 18px 32px rgba(0,0,0,.45)}
  .ring .bg{stroke:#334155}
  .ring-label{color:var(--text)}

  /* Learning Materials, Store, Leaderboard items */
  .materials .materials-list li,
  .learn-item,
  .store-item,
  .board li{background:rgba(2,8,23,.70); border-color:rgba(148,163,184,.18)}

  .board li.top1{border-color:rgba(250,204,21,.35); background:var(--card)}
  .board li.top2{border-color:rgba(148,163,184,.30); background:var(--card)}
  .board li.top3{border-color:rgba(253,186,116,.35); background:var(--card)}
  .rank{color:var(--text)}
  .score{color:#60a5fa; text-shadow:0 0 8px rgba(96,165,250,.25)}

  .icon-badge{background:linear-gradient(135deg, rgba(30,58,138,.35), rgba(244,162,97,.18))}

  /* Charts - dark theme */
  .chart{background:rgba(2,8,23,.70); border-color:rgba(148,163,184,.18)}
  .chart-title{color:var(--text)}
  .lines{background:repeating-linear-gradient(to top, rgba(148,163,184,.16), rgba(148,163,184,.16) 1px, transparent 1px, transparent 18px)}
  .bar{background:linear-gradient(180deg, rgba(245,158,11,.55), rgba(234,88,12,.45)); box-shadow:inset 0 -2px 0 rgba(148,163,184,.24), 0 6px 14px rgba(234,88,12,.28)}
  .bar::after{background:linear-gradient(90deg, rgba(148,163,184,.22), transparent)}
  .line.programming{--c:#60a5fa}
  .line.databases{--c:#36c6ff}
  .line.design{--c:#a78bfa}
  .line.business{--c:#34d399}
  .legend{color:var(--muted)}
  .x-labels{color:var(--muted)}
}




.store-logo{width:28px;height:28px;display:block;object-fit:contain}




/* Rank-up popup */
.rankup-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:999}
.rankup-backdrop.open{opacity:1;pointer-events:auto}
.rankup-pop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);background:var(--card);color:var(--text);border:1px solid var(--muted);border-radius:16px;padding:24px 28px;box-shadow:var(--shadow);animation:popIn .25s ease forwards;text-align:center}
.rankup-title{font-weight:700;font-size:1.2rem;color:var(--orange);margin-bottom:4px}
.rankup-level{font-size:1.4rem;font-weight:800;color:var(--blue);letter-spacing:.5px;margin-bottom:14px}
@keyframes popIn{from{transform:translate(-50%,-50%) scale(.9);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* Rank-up popup overrides and animation enhancements */
.rankup-pop{min-width:420px;padding:40px 44px;box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(148,163,184,.2)}

/* --- Game-style Level Up popup --- */
.rankup-backdrop.open .rankup-pop{ background: transparent; border: 0; padding: 0; box-shadow: none }
.levelup-wrap{ position:relative; width:min(560px, 92vw); height:auto; padding:40px 24px 28px; text-align:center }
.levelup-rays{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:520px; height:520px; pointer-events:none; background:
  radial-gradient(closest-side, rgba(255,184,76,.25), rgba(255,184,76,0) 60%),
  conic-gradient(from 0deg, rgba(255,184,76,.28) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle at center, #000 0 48%, transparent 52% 100%);
  animation: levelupRaysSpin 18s linear infinite;
}
.levelup-badge{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin:80px auto 10px; width:240px; height:200px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.levelup-badge .badge-core{ position:relative; width:200px; height:160px; border-radius:26px; background: linear-gradient(180deg, #ffdf8c 0%, #f6b34d 60%, #e58a26 100%);
  box-shadow: inset 0 -6px 0 rgba(255,255,255,.45), inset 0 8px 16px rgba(255,255,255,.35), 0 8px 0 #c86a1a;
}
.badge-label{ position:absolute; left:50%; transform:translateX(-50%); top:16px; font-weight:800; font-size:12px; letter-spacing:.22em; color:#7a3b00; opacity:.9 }
.badge-num{ position:absolute; left:50%; transform:translateX(-50%); top:42px; font-weight:900; font-size:72px; color:#fff; text-shadow: 0 2px 0 #c86a1a, 0 8px 20px rgba(0,0,0,.35) }
.levelup-badge .wing{ position:absolute; top:44%; width:120px; height:80px; background: linear-gradient(180deg, #ffd78a 0%, #f2ac4b 90%);
  border-radius:14px; transform: translateY(-50%) skewX(-12deg);
  box-shadow: inset 0 6px 10px rgba(255,255,255,.35), 0 6px 0 #c86a1a;
}
.levelup-badge .wing.left{ left:-88px; transform: translateY(-50%) skewX(12deg); }
.levelup-badge .wing.right{ right:-88px; }
.levelup-text{ margin-top:10px; font-size:40px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#ffd166; text-shadow: 0 2px 0 #1b1f3b, 0 10px 24px rgba(0,0,0,.5) }
.levelup-reward{ margin-top:10px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:18px; font-weight:700; color:var(--gold); text-shadow:0 1px 6px rgba(0,0,0,.35) }
.levelup-cta{ margin-top:18px; display:flex; gap:12px; align-items:center; justify-content:center }
.btn.gold{ background: linear-gradient(180deg, #ffdf8c 0%, #f6b34d 60%, #e58a26 100%); color:#7a3b00; border:0; box-shadow: 0 6px 0 #c86a1a; font-weight:800 }
.btn.gold:hover{ filter: brightness(1.02) }
.btn.sapphire{ background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 60%, #1e3a8a 100%); color:#fff; border:0; box-shadow: 0 6px 0 #0f1e52; font-weight:800 }
.btn.sapphire:hover{ filter: brightness(1.02) }
/* Ensure equal visual size for Level Up actions */
.levelup-cta .btn{ width: 160px; padding: 12px 18px; border-radius: 16px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box }

@keyframes levelupRaysSpin{ from{ transform: translate(-50%,-50%) rotate(0deg) } to{ transform: translate(-50%,-50%) rotate(360deg) } }
.rankup-title{font-size:1.6rem;letter-spacing:.3px}
.rankup-level{font-size:2.6rem}
.rankup-ring{position:absolute;left:50%;top:50%;width:220px;height:220px;border-radius:50%;transform:translate(-50%,-50%);background:conic-gradient(from 180deg, rgba(245,158,11,.35), rgba(59,130,246,.35), rgba(245,158,11,.35));box-shadow:0 0 8px rgba(245,158,11,.4);animation:ringSpin 2.8s linear infinite;opacity:.75;z-index:-1}
.rankup-pop .shine{position:absolute;inset:-2px;border-radius:16px;background:radial-gradient(120px 120px at 50% 0%, rgba(255,255,255,.15), transparent 55%);pointer-events:none;mix-blend-mode:overlay}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Confetti */
.confetti{position:fixed;top:-6vh;left:0;width:10px;height:16px;border-radius:3px;background:hsl(var(--hue,45), 90%, 60%);transform:translateX(var(--x,0)) rotate(var(--rot,0deg));opacity:0;animation:confettiFall var(--dur,2.2s) ease-out var(--delay,0s) forwards;z-index:1000}
@keyframes confettiFall{0%{opacity:0;transform:translateX(var(--x,0)) translateY(-12vh) rotate(0deg)}10%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--x,0) + var(--drift,0))) translateY(70vh) rotate(720deg)}}

/* ===== NOTIFICATION SYSTEM STYLES ===== */
.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 16px; /* shift left by 16px */
  width: 320px;
  max-height: 400px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  display: none;
  margin-top: 8px;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg); /* solid background to avoid transparency */
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.mark-all-read-btn {
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.mark-all-read-btn:hover {
  background: var(--accent-color-alpha);
}

.notification-list {
  max-height: 320px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.notification-item:hover {
  background: var(--bg-secondary);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background: var(--accent-color-alpha);
}

.notification-item.unread:hover {
  background: rgba(var(--accent-rgb), 0.15);
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 14px;
}

.notification-message {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 6px;
}

.notification-time {
  color: var(--text-muted);
  font-size: 12px;
}

.unread-indicator {
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
  margin-left: 12px;
  margin-top: 6px;
  flex-shrink: 0;
}

.no-notifications {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Notification badge visibility */
#notify-btn .dot-badge[aria-hidden="true"] {
  display: none !important;
}

#notify-btn .dot-badge[aria-hidden="false"] {
  display: inline-block !important;
}

/* Position notification dropdown relative to button */
.header-controls {
  position: relative;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .notification-dropdown {
    background: var(--card-bg-dark);
    border-color: var(--border-color-dark);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
  
  .notification-header {
    background: var(--card-bg-dark);
    border-color: var(--border-color-dark);
  }
  
  .notification-item:hover {
    background: var(--bg-secondary-dark);
  }
  
  .notification-item.unread {
    background: rgba(var(--accent-rgb), 0.1);
  }
  
  .notification-item.unread:hover {
    background: rgba(var(--accent-rgb), 0.15);
  }
}
/* ===== END NOTIFICATION SYSTEM STYLES ===== */

/* Password field with toggle */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field .text-input {
  padding-right: 40px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.password-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

.password-toggle .ms {
  font-size: 18px;
}

/* Centered layout for auth pages */
.auth-center {
  display: grid;
  place-items: center;
  min-height: 80vh;
  padding: 24px 16px;
}
/* Centered actions on login */
 .auth-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;max-width:520px;margin-left:auto;margin-right:auto}
 .auth-actions .btn{width:100%;height:40px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.auth-actions #google-render-target{width:100%;height:40px;display:flex;align-items:center;background:transparent}
.auth-actions #google-render-target .btn.google-btn{width:100%;flex:1}
/* Ensure GIS wrapper is transparent and seamless on dark backgrounds */
.auth-actions #google-render-target .g_id_signin{background:transparent !important; border:none !important; box-shadow:none !important}
.auth-actions #google-render-target .g_id_signin > div{background:transparent !important; border:none !important; box-shadow:none !important}
 @media(max-width:520px){.auth-actions{grid-template-columns:1fr}}
.auth-page{display:grid;place-items:center;min-height:100vh;margin:0 auto;padding:0 24px;position:relative}
body.auth-bg{background:url('images/LoginPagePic.jpg') center/cover no-repeat fixed;height:100vh;overflow:hidden}
body.auth-bg::before{content:none}
body.auth-bg::after{content:none}
.auth-shell{position:relative;z-index:1}
.auth-shell{display:grid;grid-template-columns:2fr minmax(480px,560px);gap:40px;align-items:stretch;min-height:80vh;padding:24px 16px;max-width:none;margin-left:auto;margin-right:24px;justify-content:end}
.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:24px 44px 44px 44px}
.auth-illustration{border-radius:0;overflow:visible;position:relative;background:transparent}
.auth-illustration img{display:none}
.auth-illustration::after{display:none}
.auth-illustration .overlay-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:32px}
.auth-illustration img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(100%)}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-illustration{display:none}}

/* Auth brand logo above welcome */
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.auth-logo{width:64px;height:64px;display:block}
.auth-brand-name{font-weight:900;font-size:22px}

.auth-brand.register-brand .auth-logo{width:180px;height:156px}
.auth-brand.register-brand .auth-brand-name{font-size:36px}
.auth-brand.register-brand{gap:16px;margin-bottom:24px;justify-content:center;margin-left:auto;margin-right:auto}

/* Larger brand for login page */
.auth-brand.login-brand .auth-logo{width:160px;height:144px}
    .auth-brand.login-brand .auth-brand-name{font-size:30px;text-align:center}
    .auth-brand.login-brand{gap:10px;margin-bottom:8px;justify-content:center;margin-left:auto;margin-right:auto}
    .auth-panel.login-panel{padding-top:12px}

/* Auth panel sizing to reduce empty space */
.auth-panel h2{font-size:36px;line-height:1.2}
.auth-panel .topic-desc{font-size:17px}
.auth-panel .text-input{height:56px;font-size:16px}
.auth-panel .btn{padding:14px 22px;font-size:16px}
.auth-panel .chip{padding:9px 14px;font-size:14px}
  
   /* Inline register link without background */
   .auth-panel .link-text{background:transparent;border:none;box-shadow:none;padding:0;border-radius:0;color:#ffffff;font-weight:800;text-decoration:none}
   .auth-panel .link-text:hover{opacity:.9;text-decoration:underline}
   
   /* Google sign-in button */
.btn.google-btn{background:#1a73e8;color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;font-weight:700;white-space:nowrap;transition:.15s box-shadow,.15s transform,.15s opacity;will-change:transform;height:40px;box-shadow:0 14px 28px rgba(26,115,232,.35)}
.btn.google-btn:hover{background:#2b7de9;box-shadow:0 20px 40px rgba(26,115,232,.55);transform:translateY(-2px) scale(1.01)}
     .btn.google-btn:hover{opacity:.9;transform:translateY(-1px)}
     .btn.google-btn:active{opacity:.8;transform:translateY(0)}
     .btn.google-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
     .google-icon-badge{width:24px;height:24px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center}
     .google-icon{width:18px;height:18px;display:block}
  
   /* Auth button emphasis */
.auth-panel .btn:not(.primary){
  background:#ffffff;
  color:#0f172a;
  border:1px solid rgba(2,8,23,.12);
  box-shadow:0 8px 20px rgba(2,8,23,.10);
}
.auth-panel .btn:not(.primary):hover{
  box-shadow:0 14px 28px rgba(2,8,23,.16);
  transform:translateY(-2px);
}
.auth-panel .btn.primary{
  background:#1a73e8; /* Google blue to match GIS button */
  color:#fff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 14px 28px rgba(26,115,232,.35);
  border-radius:9999px; /* pill shape */
}
.auth-panel .btn.primary:hover{
   background:#2b7de9;
   box-shadow:0 20px 40px rgba(26,115,232,.55);
   transform:translateY(-2px) scale(1.01);
 }
.auth-panel .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,123,255,.35), 0 12px 26px rgba(2,8,23,.14);
}



/* Modal styles */
.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,8,23,.55);backdrop-filter:blur(2px);z-index:1000;display:none}
.modal-backdrop.open{display:grid}
.modal{background:var(--card);color:var(--text);border-radius:16px;box-shadow:0 22px 50px rgba(2,8,23,.25);border:1px solid rgba(148,163,184,.28);padding:20px;width:min(480px,calc(100% - 32px))}
.modal-head h3{margin:0;font-weight:800}
.modal-body p{margin:10px 0 0;color:var(--muted)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* Page transition overlay + enter animation - DISABLED */
.page-transition-overlay{display:none}
.page-transition-overlay.active{display:none}
body{transition:none}
body.page-enter{opacity:1; transform:none}
@media (prefers-color-scheme: dark){
  .page-transition-overlay.active{background:rgba(0,0,0,.18);backdrop-filter:blur(2px)}
}

/* ===== Manual Theme Overrides ===== */
:root[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0e1625;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --shadow:0 10px 25px rgba(0,0,0,0.45);
  --card-bg-dark: var(--card);
  --border-color-dark: rgba(148,163,184,0.18);
  --bg-secondary-dark: var(--card);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: rgba(148,163,184,0.9);
  --accent-color: #38bdf8;
  --accent-rgb: 56,189,248;
  --accent-color-alpha: rgba(56,189,248,0.12);
}
/* User dropdown (manual theme) */
[data-theme="dark"] .user-menu .menu{background:var(--card);color:var(--text);border:1px solid rgba(148,163,184,.18);box-shadow:0 20px 40px rgba(0,0,0,.35)}
[data-theme="dark"] .user-menu .menu .menu-item:hover{background:rgba(148,163,184,.12)}
[data-theme="light"] .user-menu .menu{background:#fff;color:#0f172a;border:1px solid rgba(2,8,23,.08);box-shadow:0 20px 40px rgba(2,8,23,.12)}
[data-theme="light"] .user-menu .menu .menu-item:hover{background:#f3f4f6}
/* Dark theme avatar button polish */
[data-theme="dark"] .avatar-btn{background:transparent;border-color:transparent;box-shadow:none}
[data-theme="dark"] .avatar-btn:hover{border-color:transparent}

/* Notification dropdown (manual theme) */
[data-theme="dark"] .notification-dropdown{background:var(--card);color:var(--text);border:1px solid rgba(148,163,184,.18);box-shadow:0 20px 40px rgba(0,0,0,.35)}
[data-theme="dark"] .notification-header h3{color:var(--text)}
[data-theme="light"] .notification-dropdown{background:#fff;color:#0f172a;border:1px solid #e5e7eb;box-shadow:0 20px 40px rgba(2,8,23,.12)}
[data-theme="light"] .notification-header h3{color:#0f172a}

/* Profile modal borders (manual theme) */
[data-theme="dark"] .profile-modal{border:1px solid rgba(148,163,184,.18)}
[data-theme="dark"] .profile-modal .head, [data-theme="dark"] .profile-modal .footer{border-color:rgba(148,163,184,.18)}
[data-theme="light"] .profile-modal{border:1px solid rgba(255,255,255,.6)}
[data-theme="light"] .profile-modal .head, [data-theme="light"] .profile-modal .footer{border-color:rgba(2,8,23,.08)}
[data-theme="dark"] body::before{opacity:.16; background:radial-gradient(closest-side, rgba(2,132,199,.22), transparent 70%);} 
[data-theme="dark"] body::after{opacity:.14; background:radial-gradient(closest-side, rgba(244,162,97,.16), transparent 70%);} 
[data-theme="dark"] .app-header{background:linear-gradient(135deg, rgba(2,8,23,.96), rgba(30,64,175,.88)); color:#fff}
[data-theme="dark"] .card{background:rgba(2,8,23,.72); border:1px solid rgba(148,163,184,.18);} 
[data-theme="dark"] .topic{background:rgba(2,8,23,.70); border:1px solid rgba(148,163,184,.18); box-shadow:0 10px 20px rgba(0,0,0,.35)}
[data-theme="dark"] .topic:hover{background:linear-gradient(180deg, rgba(2,8,23,.78), rgba(2,8,23,.70)); box-shadow:0 18px 32px rgba(0,0,0,.45)}
[data-theme="dark"] .ring .bg{stroke:#334155}
[data-theme="dark"] .ring-label{color:var(--text)}
[data-theme="dark"] .materials .materials-list li,
[data-theme="dark"] .learn-item,
[data-theme="dark"] .store-item,
[data-theme="dark"] .board li{background:rgba(2,8,23,.70); border-color:rgba(148,163,184,.18)}
[data-theme="dark"] .course-preview{--preview-bg:rgb(2,8,23);border-color:rgba(148,163,184,.28);box-shadow:0 18px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(148,163,184,.28)}
[data-theme="dark"] .course-preview .accent{background:linear-gradient(90deg,#06b6d4,#6366f1 60%,#a855f7)}
[data-theme="dark"] .course-preview .title{color:var(--text)}
[data-theme="dark"] .course-preview .desc{color:#9ca3af}
[data-theme="dark"] .learn-item .learn-thumb{border-color:rgba(148,163,184,.28);background:rgba(255,255,255,.08)}
[data-theme="dark"] .board li.top1{border-color:rgba(250,204,21,.35); background:var(--card)}
[data-theme="dark"] .board li.top2{border-color:rgba(148,163,184,.30); background:var(--card)}
[data-theme="dark"] .board li.top3{border-color:rgba(253,186,116,.35); background:var(--card)}

/* Ensure light theme also uses outlined style on dashboard */
[data-theme="light"] .board li.top1{border-color:rgba(250,204,21,.35); background:var(--card)}
[data-theme="light"] .board li.top2{border-color:rgba(148,163,184,.30); background:var(--card)}
[data-theme="light"] .board li.top3{border-color:rgba(253,186,116,.35); background:var(--card)}
[data-theme="dark"] .rank{color:var(--text)}
[data-theme="dark"] .score{color:#60a5fa; text-shadow:0 0 8px rgba(96,165,250,.25)}
[data-theme="dark"] .icon-badge{background:linear-gradient(135deg, rgba(30,58,138,.35), rgba(244,162,97,.18))}
[data-theme="dark"] .chart{background:rgba(2,8,23,.70); border-color:rgba(148,163,184,.18)}
[data-theme="dark"] .chart-title{color:var(--text)}
[data-theme="dark"] .lines{background:repeating-linear-gradient(to top, rgba(148,163,184,.16), rgba(148,163,184,.16) 1px, transparent 1px, transparent 18px)}
[data-theme="dark"] .bar{background:linear-gradient(180deg, rgba(245,158,11,.55), rgba(234,88,12,.45)); box-shadow:inset 0 -2px 0 rgba(148,163,184,.24), 0 6px 14px rgba(234,88,12,.28)}
[data-theme="dark"] .bar::after{background:linear-gradient(90deg, rgba(148,163,184,.22), transparent)}
[data-theme="dark"] .line.programming{--c:#60a5fa}
[data-theme="dark"] .line.databases{--c:#36c6ff}
[data-theme="dark"] .line.design{--c:#a78bfa}
[data-theme="dark"] .line.business{--c:#34d399}
[data-theme="dark"] .legend{color:var(--muted)}
[data-theme="dark"] .x-labels{color:var(--muted)}
[data-theme="dark"] .course-card .task{background: rgba(2,8,23,0.70); border-color: rgba(148,163,184,0.18)}
[data-theme="dark"] .quiz-options label { border-color: rgba(148,163,184,0.18); }
[data-theme="dark"] .text-input { background: rgba(2,8,23,0.70); color: var(--text); border-color: rgba(148,163,184,0.25); }
[data-theme="dark"] .text-input.error{ border-color: rgba(239,68,68,.65); box-shadow: 0 0 0 2px rgba(239,68,68,.25); }
[data-theme="dark"] .course-card .trophy{ background:linear-gradient(135deg, rgba(30,64,175,.45), rgba(244,162,97,.28)); box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 2px 8px rgba(255,255,255,.08); }
[data-theme="dark"] .course-card .task.needs-action{border-color:rgba(239,68,68,.55); box-shadow:0 0 0 2px rgba(239,68,68,.25)}
[data-theme="dark"] .page-transition-overlay.active{background:rgba(0,0,0,.18);backdrop-filter:blur(2px)}

:root[data-theme="light"]{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --shadow:0 10px 25px rgba(15,23,42,0.08);
  --accent-color: #007BFF;
  --accent-rgb: 0,123,255;
  --accent-color-alpha: rgba(0,123,255,0.08);
}
[data-theme="light"] .app-header{background:linear-gradient(135deg, rgba(0,123,255,.95), rgba(54,198,255,.95)); color:#fff}
[data-theme="light"] .card{background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,.6)}
[data-theme="light"] .topic{background:var(--card); border:1px solid rgba(15,23,42,.12); box-shadow:var(--shadow)}
[data-theme="light"] .topic:hover{background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.70)); box-shadow:0 18px 32px rgba(2,8,23,.12)}
[data-theme="light"] .materials .materials-list li,
[data-theme="light"] .learn-item,
[data-theme="light"] .store-item,
[data-theme="light"] .board li{background:#fff; border-color:#e5e7eb}
[data-theme="light"] .rank{color:#0f172a}
[data-theme="light"] .score{color:#007BFF; text-shadow:none}
[data-theme="light"] .icon-badge{background:linear-gradient(135deg, rgba(255,255,255,.45), rgba(244,162,97,.18))}
[data-theme="light"] .chart{background:#fff; border-color:#e5e7eb}
[data-theme="light"] .chart-title{color:#0f172a}
[data-theme="light"] .lines{background:repeating-linear-gradient(to top, rgba(2,8,23,.06), rgba(2,8,23,.06) 1px, transparent 1px, transparent 18px)}
[data-theme="light"] .bar{background:linear-gradient(180deg, #f59e0b, #ef4444); box-shadow: 0 6px 14px rgba(234,88,12,.14)}
[data-theme="light"] .bar::after{background:linear-gradient(90deg, rgba(255,255,255,.85), transparent)}
[data-theme="light"] .legend{color:var(--muted)}
[data-theme="light"] .x-labels{color:var(--muted)}
[data-theme="light"] .course-card .task{background: #fff; border-color: rgba(2,8,23,0.12)}
[data-theme="light"] .quiz-options label { border-color: rgba(2,8,23,0.12); }
[data-theme="light"] .text-input { background: var(--card); color: var(--text); border-color: rgba(2,8,23,0.18); }
[data-theme="light"] .text-input.error{ border-color: rgba(239,68,68,.65); box-shadow: 0 0 0 2px rgba(239,68,68,.15); }
/* Dashboard light-mode polish: higher contrast cards, cleaner tiles, readable overlays */
[data-theme="light"] .card{background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid rgba(2,8,23,.08); box-shadow:0 12px 28px rgba(2,8,23,.08)}
[data-theme="light"] .progress-percent{background:rgba(2,8,23,.18); color:#0b1220}
[data-theme="light"] .store-card .store-items .store-item,
[data-theme="light"] .store-item{background:#fff; border:1px solid #e5e7eb; box-shadow:0 6px 14px rgba(2,8,23,.08)}
[data-theme="light"] .store-card .store-items .store-item:hover,
[data-theme="light"] .store-item:hover{transform:translateY(-2px); box-shadow:0 12px 22px rgba(2,8,23,.12)}
[data-theme="light"] .leaderboard-card .board li{background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(2,8,23,.06)}
[data-theme="light"] .leaderboard-card .board li:hover{transform:translateY(-2px); box-shadow:0 8px 16px rgba(2,8,23,.10)}
[data-theme="light"] .course-card .trophy{ background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(244,162,97,.28)); box-shadow:0 12px 28px rgba(2,8,23,.12), inset 0 2px 8px rgba(255,255,255,.35); }
[data-theme="light"] .course-card .task.needs-action{border-color:rgba(239,68,68,.45); box-shadow:0 0 0 2px rgba(239,68,68,.18)}
[data-theme="light"] .page-transition-overlay.active{background:rgba(255,255,255,.18);backdrop-filter:blur(2px)}
/* Course preview modal - enforce light theme under manual selection */
[data-theme="light"] .course-preview{--preview-bg:#fff;border-color:#e5e7eb;box-shadow:0 18px 36px rgba(2,8,23,.25), 0 0 0 1px rgba(148,163,184,.18)}
[data-theme="light"] .course-preview .accent{background:linear-gradient(90deg,#6366f1,#06b6d4 60%,#22c55e)}
[data-theme="light"] .course-preview .title{color:#0f172a}
[data-theme="light"] .course-preview .desc{color:#64748b}



.sub-tabs .icon-img{width:20px;height:20px;object-fit:contain;display:inline-block;margin-right:8px;filter:none}
[data-theme="dark"] .sub-tabs .icon-img{opacity:.95}



/* Verify page specific centering */
.auth-shell.verify-shell{grid-template-columns:1fr;max-width:720px;margin-left:auto;margin-right:auto;justify-content:center}
.auth-shell.verify-shell .auth-illustration{display:none}
.auth-panel.verify-panel{align-items:center;text-align:center}
.auth-panel.verify-panel .card{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
.auth-panel.verify-panel .card .card-head{justify-content:center}
.auth-panel.verify-panel h2, .auth-panel.verify-panel .topic-desc{text-align:center}
.auth-panel.verify-panel #verify-start-form, .auth-panel.verify-panel #verify-complete-form{max-width:520px;margin-left:auto;margin-right:auto}
/* Verify actions: center buttons without full width */
.auth-panel.verify-panel .auth-actions{display:flex;justify-content:center}
.auth-panel.verify-panel .auth-actions .btn{width:auto;min-width:220px}

/* Password strength checklist */
.pwd-checklist{margin-top:8px; display:grid; gap:6px; color:var(--muted); font-weight:700}
.pwd-checklist .req-item{display:flex; align-items:center; gap:8px}
.pwd-checklist .req-item .ms{font-size:18px; line-height:1}
.pwd-checklist .req-ok{color:#22c55e}
.pwd-checklist .req-bad{color:rgba(220,38,38,.75)}

/* Form error hover popover */
.form-errors{position:relative; margin-top:12px}
.error-badge{background:rgba(239,68,68,.12); color:#ef4444; border:1px solid rgba(239,68,68,.28); border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:8px; font-weight:700}
.error-badge .ms{font-size:18px}
.error-tooltip{position:fixed; top:0; left:0; background:var(--card); color:var(--text); border:1px solid rgba(148,163,184,.28); box-shadow:0 22px 50px rgba(2,8,23,.25); border-radius:12px; padding:12px; width:360px; max-width:calc(100% - 20px); max-height:50vh; overflow:auto; display:none; z-index:1000}
.error-tooltip h4{margin:0 0 6px; font-size:14px; color:var(--text)}
.error-tooltip ul{margin:0; padding-left:18px; color:#ef4444}
.error-tooltip.open{display:block}
.form-errors:hover .error-tooltip{display:block}



.landing-hero{min-height:520px}
.carousel{position:relative; overflow:visible; border-radius:0; background:transparent; padding:0}
.carousel-track{display:flex; gap:24px; align-items:center; justify-content:center; transition:transform .6s cubic-bezier(.22,.61,.36,1); perspective:1000px}
.carousel-track.three .slide{display:none}
.carousel-track.three .slide.side{display:block}
.carousel-track.three .slide.active{display:block}
.carousel .slide{width:240px; height:320px; object-fit:cover; object-position:center; border-radius:22px; box-shadow:0 14px 28px rgba(2,8,23,.25); opacity:.9; transform:scale(0.94) translateZ(0); transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s cubic-bezier(.22,.61,.36,1), box-shadow .8s}
.carousel .slide.side{opacity:.96; transform:scale(1.02) translateZ(-10px)}
.carousel .slide.active{opacity:1; transform:scale(1.10) translateZ(0)}
.carousel .slide.left{transform:translateX(-8px) rotateY(-6deg) scale(1.02)}
.carousel .slide.right{transform:translateX(8px) rotateY(6deg) scale(1.02)}
.carousel-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:999px; width:36px; height:36px; display:grid; place-items:center; cursor:pointer}
.carousel-arrow.left{left:24px}
.carousel-arrow.right{right:24px}
.carousel-dots{position:absolute; left:50%; bottom:-40px; transform:translateX(-50%); display:flex; gap:6px; z-index:5}
.carousel-dots .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35)}
.carousel-dots .dot.active{background:#60a5fa}

/* Landing header and navbar */
.landing-header .logo-img.large{width:72px;height:auto}
.landing-nav .btn{border-radius:9999px;padding:10px 18px}
.landing-nav .btn.primary{background:#1d4ed8; color:#fff; border:0; box-shadow:0 8px 16px rgba(29,78,216,.24)}
.landing-nav .btn.primary:hover{background:#1e40af}
.landing-nav .btn.ghost{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28)}
.btn.pill{border-radius:9999px}
.btn.cta{font-size:18px; padding:12px 22px; background:#1d4ed8; color:#fff; border:0; box-shadow:0 10px 20px rgba(29,78,216,.24)}
.btn.cta:hover{background:#1e40af}

/* Landing layout: fill blank spaces with subtle decor and prevent scrolling */
body.landing{overflow:hidden}
.landing .container{max-width:100%;margin:0;padding:0}
.landing .app-footer{display:none}
.landing-hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:60%;pointer-events:none;z-index:0;will-change:transform;background:radial-gradient(640px 260px at 20% 40%, rgba(96,165,250,.22), transparent 60%), radial-gradient(720px 280px at 80% 20%, rgba(139,92,246,.18), transparent 60%)}
.landing-hero::after{content:"";position:absolute;inset:auto -10% -10% -10%;height:50%;pointer-events:none;z-index:0;will-change:transform;background:radial-gradient(860px 300px at 50% 82%, rgba(34,197,94,.18), transparent 70%)}

@keyframes ambientDrift {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-20px,0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
.landing-hero::before{ animation: ambientDrift 18s ease-in-out infinite; }
.landing-hero::after{ animation: ambientDrift 26s ease-in-out infinite reverse; }

@keyframes bgDrift {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-30px,0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
body.landing::before{content:"";position:fixed;inset:-15% -15% -15% -15%;z-index:-1;pointer-events:none;will-change:transform;filter:blur(.4px);background:
  radial-gradient(900px 480px at 12% 88%, rgba(99,102,241,.12), transparent 65%),
  radial-gradient(960px 520px at 88% 12%, rgba(59,130,246,.10), transparent 65%),
  radial-gradient(1100px 540px at 50% 50%, rgba(34,197,94,.08), transparent 70%);
animation:bgDrift 32s ease-in-out infinite;
}

.stats-row .stat{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start}
.stats-row .stat .num{font-weight:800;font-size:26px;color:#fff;text-shadow:0 0 10px rgba(96,165,250,.35)}
.stats-row .stat .label{color:#cbd5e1;font-weight:700}
.landing-particles{position:absolute;inset:0;pointer-events:none;z-index:0}
.landing-hero{grid-template-columns:1.5fr 1fr;gap:24px;margin:0}
.hero-copy{padding:8px 12px;display:flex;flex-direction:column;gap:14px;justify-self:center;max-width:580px}
.landing-title{font-size:38px;font-weight:800;margin:0;white-space:nowrap}
.landing-sub{color:#cbd5e1;margin:0}
.cta-row{display:flex;gap:8px;align-items:center}
.feature-list{margin-top:6px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.feature-list .feature-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:9999px;color:#e5e7eb;font-weight:700;backdrop-filter:saturate(120%) blur(6px);-webkit-backdrop-filter:saturate(120%) blur(6px);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);box-shadow:0 10px 24px rgba(2,8,23,.22), inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .18s ease, box-shadow .18s ease}
.feature-list .feature-chip:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(2,8,23,.28), inset 0 0 0 1px rgba(255,255,255,.10)}
.feature-list .feature-chip img{width:22px;height:22px;object-fit:contain;border-radius:50%;padding:4px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(148,163,184,.35));box-shadow:0 2px 4px rgba(2,8,23,.28)}
.stats-row{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stats-row .stat{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.stats-row .stat .num{font-weight:800;font-size:26px;color:#fff;text-shadow:0 0 10px rgba(96,165,250,.35)}
.stats-row .stat .label{color:#cbd5e1;font-weight:700}
@media (max-width:1024px){
  .landing-hero{grid-template-columns:1fr}
  .landing-title{font-size:32px}
  .cta-row{flex-wrap:wrap}
  .feature-list{grid-template-columns:1fr}
}