/* Bank Exams with Swarnakshi — premium, bright, mobile-first */
:root{
  --primary:#4F46E5; --primary-dark:#3730A3; --primary-soft:#EEF2FF;
  --accent:#F59E0B; --accent-soft:#FEF3C7;
  --ok:#16A34A; --ok-soft:#DCFCE7; --bad:#DC2626; --bad-soft:#FEE2E2;
  --mark:#9333EA; --mark-soft:#F3E8FF;
  --bg:#F8FAFF; --bg-top:#EEF2FF; --card:#FFFFFF; --text:#1E293B; --muted:#64748B;
  --line:#E2E8F0; --shadow:0 2px 10px rgba(79,70,229,.08);
  --lift:0 10px 26px rgba(79,70,229,.16);
  --r:16px;
}
[data-theme="dark"]{
  --primary:#818CF8; --primary-dark:#A5B4FC; --primary-soft:#1E1B4B;
  --accent:#FBBF24; --accent-soft:#3B2F09;
  --ok:#4ADE80; --ok-soft:#0A3620; --bad:#F87171; --bad-soft:#450A0A;
  --mark:#C084FC; --mark-soft:#3B0764;
  --bg:#0B1120; --bg-top:#131B33; --card:#1B2438; --text:#E2E8F0; --muted:#94A3B8;
  --line:#2B3650; --shadow:0 2px 10px rgba(0,0,0,.4);
  --lift:0 10px 26px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 260px);background-attachment:fixed;color:var(--text);min-height:100vh;transition:background .3s,color .3s}
button{font-family:inherit;cursor:pointer}
a{color:var(--primary);text-decoration:none}
.hidden{display:none!important}
::selection{background:var(--primary);color:#fff}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.95rem}
.brand b{color:var(--primary)}
.brand-badge{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:0 3px 8px rgba(79,70,229,.35)}
.icon-btn{background:var(--primary-soft);border:none;border-radius:10px;padding:7px 10px;font-size:1rem;color:var(--primary);transition:transform .12s}
.icon-btn:active{transform:scale(.92)}
.topbar-right{display:flex;gap:8px}

main{max-width:900px;margin:0 auto;padding:16px 14px 90px}
#app.fadein{animation:viewin .3s ease}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* generic */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:12px;padding:12px 20px;font-size:1rem;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;transition:transform .12s,filter .15s,box-shadow .15s;box-shadow:0 4px 12px rgba(79,70,229,.25)}
.btn:active{transform:scale(.96)}
.btn.accent{background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff;box-shadow:0 4px 12px rgba(245,158,11,.3)}
.btn.ghost{background:var(--primary-soft);color:var(--primary);box-shadow:none}
.btn.small{padding:8px 14px;font-size:.85rem;border-radius:10px}
.btn.block{width:100%}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:700}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.soft{background:var(--primary-soft);color:var(--primary)} .pill.amber{background:var(--accent-soft);color:var(--accent)}
h1{font-size:1.5rem;letter-spacing:-.02em} h2{font-size:1.2rem;letter-spacing:-.01em} h3{font-size:1.02rem}
.sub{color:var(--muted);font-size:.88rem}
.mt{margin-top:14px}.mb{margin-bottom:14px}
@media(hover:hover){
  .tile:hover,.row:hover,.quick-card:hover{transform:translateY(-3px);box-shadow:var(--lift)}
  .btn:hover{filter:brightness(1.07)}
  .badge.won:hover{transform:translateY(-3px) scale(1.04)}
}

/* login */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1000px 500px at 50% -10%,#6D28D9 0%,transparent 60%),linear-gradient(160deg,var(--primary) 0%,var(--primary-dark) 55%,#1E1B4B 100%)}
.login-card{width:100%;max-width:400px;background:var(--card);border-radius:26px;padding:30px 26px;box-shadow:0 24px 70px rgba(0,0,0,.4);animation:pop .4s ease}
.login-logo{width:74px;height:74px;margin:0 auto 12px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:2.1rem;font-weight:800;color:#fff;box-shadow:0 8px 22px rgba(79,70,229,.45)}
.login-card h1{text-align:center;font-size:1.35rem}
.login-card .motto{text-align:center;color:var(--accent);font-weight:700;margin:6px 0 20px;letter-spacing:.4px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:13px 14px;border:2px solid var(--line);border-radius:12px;font-size:1rem;background:var(--bg);color:var(--text);transition:border-color .15s}
.field input:focus{outline:none;border-color:var(--primary)}
.login-err{color:var(--bad);font-size:.85rem;text-align:center;min-height:20px;margin-bottom:6px}

/* hero + chips */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:22px;padding:22px;color:#fff;margin-bottom:14px;box-shadow:0 12px 32px rgba(55,48,163,.3)}
.hero::after{content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(251,191,36,.35),transparent 70%);pointer-events:none}
.hero .motto{color:#FDE68A;font-weight:800;font-size:1.12rem}
.hero .sub{color:#C7D2FE}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:1}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:6px 12px;font-size:.78rem;font-weight:700;cursor:default}
.chip.tap{cursor:pointer}
.chip.tap:active{transform:scale(.95)}
.xpbar{height:7px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:10px;position:relative;z-index:1}
.xpbar>div{height:100%;background:linear-gradient(90deg,#FDE68A,#F59E0B);border-radius:99px;transition:width .6s ease}

/* quick action cards */
.quick{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
@media(min-width:640px){.quick{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.quick-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;box-shadow:var(--shadow);color:var(--text);transition:transform .15s,box-shadow .15s;cursor:pointer;text-align:left}
.quick-card .qi{flex-shrink:0;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.35rem}
.quick-card .qt{font-weight:800;font-size:.9rem}
.quick-card .qd{font-size:.75rem;color:var(--muted);margin-top:1px}
.qi.indigo{background:var(--primary-soft)} .qi.amber{background:var(--accent-soft)} .qi.red{background:var(--bad-soft)} .qi.green{background:var(--ok-soft)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 12px;text-align:center;box-shadow:var(--shadow);color:var(--text);transition:transform .15s,box-shadow .15s}
.tile:active{transform:scale(.96)}
.tile .ico{width:52px;height:52px;margin:0 auto;border-radius:16px;background:linear-gradient(135deg,var(--primary-soft),var(--card));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.tile .t{font-weight:800;font-size:.9rem;margin-top:8px}
.tile .d{font-size:.72rem;color:var(--muted);margin-top:2px}

/* tabs & lists */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.tab{flex:0 0 auto;border-radius:99px;padding:8px 16px;font-weight:700;font-size:.85rem;background:var(--card);color:var(--muted);border:1px solid var(--line);transition:all .15s}
.tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-color:transparent;box-shadow:0 4px 10px rgba(79,70,229,.3)}
.list{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.row .info{min-width:0}
.row .name{font-weight:700;font-size:.93rem}
.row .meta{font-size:.75rem;color:var(--muted);margin-top:2px}
.row .acts{display:flex;gap:6px;flex-shrink:0}
.acc{border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:10px;overflow:hidden}
.acc>button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px;background:none;border:none;font-weight:700;font-size:.95rem;color:var(--text)}
.acc .body{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px}

/* player */
.player-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.1rem;padding:6px 14px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}
.timer.low{background:var(--bad-soft);color:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.qnum{font-size:.78rem;font-weight:800;color:var(--primary)}
.qstem{font-size:1.05rem;font-weight:600;line-height:1.6;margin:8px 0 14px}
.cap{background:var(--primary-soft);border-left:4px solid var(--primary);border-radius:8px;padding:11px 13px;font-size:.88rem;line-height:1.6;margin-bottom:12px}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:13px;margin-bottom:10px;font-size:.96rem;color:var(--text);line-height:1.5;transition:border-color .15s,background .15s}
.opt .ltr{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem}
.opt.sel{border-color:var(--primary);background:var(--primary-soft)}
.opt.sel .ltr{background:var(--primary);color:#fff;border-color:var(--primary)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .ltr{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .ltr{background:var(--bad);color:#fff;border-color:var(--bad)}

/* explanation — structured & readable */
.verdict{display:flex;align-items:center;gap:10px;border-radius:14px;padding:13px 15px;font-weight:800;font-size:1.02rem;margin-top:14px}
.verdict.good{background:var(--ok-soft);color:var(--ok);border:1.5px solid var(--ok)}
.verdict.poor{background:var(--bad-soft);color:var(--bad);border:1.5px solid var(--bad)}
.verdict.skip{background:var(--primary-soft);color:var(--primary);border:1.5px solid var(--primary)}
.why{background:var(--ok-soft);border-left:5px solid var(--ok);border-radius:0 14px 14px 0;padding:13px 16px;margin-top:10px;font-size:.95rem;line-height:1.75}
.why .lbl,.wrongs .lbl{display:block;font-size:.68rem;font-weight:800;letter-spacing:.8px;color:var(--muted);margin-bottom:6px;text-transform:uppercase}
.why .lbl{color:var(--ok)}
.wrongs{margin-top:12px}
.wrongrow{display:flex;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-top:8px;font-size:.92rem;line-height:1.65;align-items:flex-start}
.wrongrow .ltr2{flex-shrink:0;width:25px;height:25px;border-radius:50%;background:var(--bad-soft);color:var(--bad);font-weight:800;font-size:.75rem;display:flex;align-items:center;justify-content:center;margin-top:2px}
.wrongrow.yours{border-color:var(--bad);background:var(--bad-soft)}
.wrongrow .youtag{display:inline-block;background:var(--bad);color:#fff;border-radius:99px;font-size:.62rem;font-weight:800;padding:2px 8px;margin-left:6px;vertical-align:2px}
.note{background:var(--primary-soft);border-radius:12px;padding:11px 13px;margin-top:8px;font-size:.92rem;line-height:1.65}
.tipbox{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:11px 13px;font-size:.9rem;line-height:1.6;margin-top:12px}
.pbar-wrap{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pbar-wrap .btn{flex:1;min-width:110px}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:7px;margin-top:12px}
.pq{border:1px solid var(--line);border-radius:9px;padding:9px 0;text-align:center;font-size:.78rem;font-weight:700;background:var(--bg);color:var(--text)}
.pq.a{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.pq.s{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.pq.m{background:var(--mark-soft);color:var(--mark);border-color:var(--mark)}
.pq.cur{outline:2.5px solid var(--primary)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.72rem;color:var(--muted);margin-top:10px}
.legend span::before{content:"●";margin-right:4px}
.lg-a::before{color:var(--ok)} .lg-s::before{color:var(--bad)} .lg-m::before{color:var(--mark)} .lg-n::before{color:var(--muted)}
.progressline{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:10px}
.progressline>div{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .3s}

/* results */
.scorehero{text-align:center;padding:26px 16px;border-radius:20px;color:#fff;margin-bottom:14px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.scorehero.pass{background:linear-gradient(135deg,#16A34A,#15803D)}
.scorehero.fail{background:linear-gradient(135deg,#DC2626,#991B1B)}
.scorehero .big{font-size:2.6rem;font-weight:800}
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
@media(min-width:560px){.statgrid{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.stat .v{font-size:1.3rem;font-weight:800;color:var(--primary)}
.stat .k{font-size:.72rem;color:var(--muted);margin-top:2px}
.modbar{margin-bottom:12px}
.modbar .lbl{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600;margin-bottom:4px}
.modbar .track{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.modbar .fill{height:100%;border-radius:99px;transition:width .5s ease}
.weak{background:var(--bad-soft);border:1px solid var(--bad);border-radius:14px;padding:12px 14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* concept swipe deck */
.deck-wrap{max-width:500px;margin:0 auto}
.deck-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.85rem;color:var(--muted);font-weight:600}
.deck-card{perspective:1200px;height:330px;cursor:pointer;user-select:none;touch-action:pan-y}
.deck-inner{position:relative;width:100%;height:100%;transition:transform .45s cubic-bezier(.2,.7,.3,1.05);transform-style:preserve-3d}
.deck-card.on .deck-inner{transform:rotateY(180deg)}
.deck-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;padding:26px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.deck-front{background:linear-gradient(150deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 16px 36px rgba(79,70,229,.35)}
.deck-front .kk{font-size:.68rem;font-weight:800;letter-spacing:1.2px;color:#C7D2FE;margin-bottom:12px}
.deck-front .t{font-size:1.18rem;font-weight:800;line-height:1.5}
.deck-front .hint{position:absolute;bottom:16px;left:0;right:0;font-size:.72rem;color:#C7D2FE;letter-spacing:.4px;animation:hintpulse 2.4s infinite}
@keyframes hintpulse{50%{opacity:.45}}
.deck-back{background:var(--card);border:2px solid var(--primary);transform:rotateY(180deg);overflow-y:auto;justify-content:flex-start;align-items:flex-start;text-align:left;font-size:.98rem;line-height:1.75;box-shadow:0 16px 36px rgba(0,0,0,.14)}
.deck-back .kk{font-size:.68rem;font-weight:800;letter-spacing:1.2px;color:var(--primary);margin-bottom:10px}
.deck-nav{display:flex;gap:8px;margin-top:14px;align-items:stretch}
.deck-nav .arrow{flex:0 0 52px;border:1px solid var(--line);background:var(--card);border-radius:14px;font-size:1.2rem;color:var(--primary);font-weight:800}
.deck-nav .arrow:disabled{opacity:.3}
.deck-nav .btn{flex:1}
.deck-dotsbar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:12px}
.deck-dotsbar>div{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .3s}
.deck-done{text-align:center;padding:40px 20px;background:linear-gradient(150deg,var(--ok-soft),var(--card));border:2px solid var(--ok);border-radius:22px}
.deck-done .big{font-size:2.6rem}

/* course facts & traps */
.flip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.factrow{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--card);cursor:pointer;font-size:.9rem;line-height:1.6}
.factrow input{margin-top:3px;accent-color:var(--ok);width:17px;height:17px;flex-shrink:0}
.factrow.done{background:var(--ok-soft);border-color:var(--ok)}
.trap{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--card);overflow:hidden}
.trap>button{width:100%;display:flex;justify-content:space-between;gap:8px;align-items:center;background:none;border:none;padding:12px;font-size:.85rem;color:var(--text)}
.trap .pair{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:700}
.trap .vs{color:var(--accent);font-weight:800;font-size:.7rem}
.trap .diff{padding:0 12px 12px;font-size:.86rem;color:var(--muted);line-height:1.65}

/* progress + badges */
.trend{display:flex;align-items:flex-end;gap:4px;height:70px;margin-top:8px}
.trend>div{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent),var(--primary));min-height:4px}
.levelcard{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:20px;padding:18px;color:#fff;margin-bottom:14px}
.levelcard .lv{font-size:1.35rem;font-weight:800}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.badge{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 6px;text-align:center;transition:transform .15s}
.badge .i{font-size:1.8rem;filter:grayscale(1);opacity:.3}
.badge.won{border-color:var(--accent);background:linear-gradient(160deg,var(--accent-soft),var(--card))}
.badge.won .i{filter:none;opacity:1}
.badge .n{font-size:.68rem;font-weight:800;margin-top:5px;color:var(--muted)}
.badge.won .n{color:var(--text)}
.badge .d2{font-size:.6rem;color:var(--muted);margin-top:2px;line-height:1.35}

/* how-to tour */
.tour-step{display:none;animation:fadein .5s}
.tour-step.on{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tour-emoji{font-size:3rem;text-align:center;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.dots span{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots span.on{background:var(--primary)}

/* welcome overlay */
.overlay{position:fixed;inset:0;background:rgba(10,14,30,.66);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}
.welcome{max-width:440px;width:100%;background:var(--card);border-radius:26px;padding:28px 24px;text-align:center;animation:pop .4s ease;box-shadow:0 30px 80px rgba(0,0,0,.5)}
@keyframes pop{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
.welcome .big{font-size:2.6rem;animation:bob 1.8s ease-in-out infinite}
.welcome input{width:100%;padding:13px 14px;border:2px solid var(--line);border-radius:12px;font-size:1rem;background:var(--bg);color:var(--text);text-align:center;margin-top:14px}
.welcome input:focus{outline:none;border-color:var(--primary)}
.wpoints{text-align:left;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.wpoints div{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.5;color:var(--muted)}

/* confetti */
.confetti{position:fixed;top:-14px;z-index:130;width:9px;height:15px;border-radius:2px;pointer-events:none;animation:cfall linear forwards}
@keyframes cfall{0%{opacity:1}100%{transform:translateY(106vh) rotate(760deg);opacity:.85}}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 20px;border-radius:99px;font-size:.85rem;font-weight:600;z-index:99;box-shadow:0 6px 24px rgba(0,0,0,.3);animation:toastin .25s ease}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}}
.center{text-align:center}
.loading{text-align:center;padding:60px 0;color:var(--muted)}
.spin{display:inline-block;width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:rot 1s linear infinite;margin-bottom:10px}
@keyframes rot{to{transform:rotate(360deg)}}

/* global search */
.searchbar input{width:100%;padding:15px 18px;border:2px solid var(--primary);border-radius:16px;font-size:1.05rem;background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.searchbar input:focus{outline:none;box-shadow:0 0 0 4px var(--primary-soft)}
mark{background:var(--accent-soft);color:inherit;font-weight:800;border-radius:3px;padding:0 2px}
.res{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.res-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.rtype{font-size:.7rem;font-weight:800;border-radius:99px;padding:3px 10px}
.rtype.mcq{background:var(--primary-soft);color:var(--primary)}
.rtype.fact{background:var(--ok-soft);color:var(--ok)}
.rtype.trap{background:var(--accent-soft);color:var(--accent)}
.res-body{font-size:.9rem;line-height:1.6}
.res-act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.welcome.wide{max-width:640px;max-height:88vh;overflow-y:auto}

/* mastery map */
.map-mod{margin-top:12px}
.map-modname{font-size:.78rem;font-weight:800;color:var(--muted);margin-bottom:6px}
.map-grid{display:flex;flex-wrap:wrap;gap:6px}
.mcell{width:46px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;background:var(--line);color:var(--muted);border:1px solid var(--line);transition:transform .12s}
.mcell:active{transform:scale(.9)}
.mcell.a{background:var(--accent-soft);color:#B45309;border-color:var(--accent)}
.mcell.g{background:linear-gradient(135deg,var(--ok),#15803D);color:#fff;border-color:var(--ok);box-shadow:0 3px 8px rgba(22,163,74,.3)}
.mcell.lk{opacity:.55;cursor:pointer}
@media(hover:hover){.mcell:hover{transform:translateY(-2px) scale(1.06)}}

/* certificate */
.certwrap{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow)}
.certwrap canvas{width:100%;height:auto;border-radius:8px;display:block}

/* planner tasks */
.task{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow)}
.task.done{background:var(--ok-soft);border-color:var(--ok)}
.task.done .task-l{text-decoration:line-through;opacity:.7}
.task-chk{background:none;border:none;font-size:1.35rem;flex-shrink:0;line-height:1}
.task-body{min-width:0;cursor:pointer;flex:1}
.task-l{font-weight:700;font-size:.9rem;line-height:1.4}
.task-s{font-size:.74rem;color:var(--muted);margin-top:1px}