@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@500;700&display=swap");
/* StudyPoint "Nocturne" - ink black, acid lime, hot coral. Mono labels, hard shadows, dot-grid night.
   Loaded after every page's own styles. Restyle only: no behaviour changes. */
:root{--ink:#08090c;--ink2:#101216;--ink3:#14161b;--line:#262932;--line2:#363a46;--lime:#c8ff2e;--lime2:#b6f01f;--coral:#ff7a45;--paper:#f3f1e8;--mute:#8f8e86;--mono:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;--disp:'Space Grotesk','Hind Siliguri','Noto Sans Bengali',system-ui,sans-serif}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:
 radial-gradient(520px 340px at 100% -4%,rgba(200,255,46,.16),transparent 70%),
 radial-gradient(420px 300px at -8% 38%,rgba(255,122,69,.09),transparent 70%),
 radial-gradient(rgba(243,241,232,.075) 1px,transparent 1.2px) 0 0/22px 22px,
 var(--ink)!important;background-attachment:fixed!important;color:var(--paper);padding-bottom:84px;-webkit-font-smoothing:antialiased}
::selection{background:var(--lime);color:#000}
::-webkit-scrollbar-thumb{background:#2c303a;border-radius:0}
h1,h2,h3{font-family:var(--disp)!important;letter-spacing:-.02em}
h1{font-weight:700}
h2{font-weight:700}
h2::before{content:"/";font-family:var(--mono);color:var(--lime);margin-right:.45em;font-weight:500}
.hero-card h1::before,.intro h1::before,.modal-box h2::before,.qcard h2::before,.hero-card h2::before{content:none}
.sub,.logo-tag,.qnum,.meta,.pattern,small{font-family:var(--mono);letter-spacing:.02em}
.sub,.logo-tag,small{font-size:11.5px!important}
a{text-decoration-color:rgba(200,255,46,.45);text-underline-offset:3px}

/* header */
.topbar,.nav{background:rgba(8,9,12,.86)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo-icon{font-size:0!important;width:18px;height:18px;display:inline-block;position:relative}
.logo-icon::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);box-shadow:0 0 14px rgba(200,255,46,.6)}
.logo-icon::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--lime);border-radius:50%;animation:pt 2.4s ease-in-out infinite}
@keyframes pt{50%{transform:scale(.45);opacity:.5}}
.logo-name{font-family:var(--disp)!important;font-weight:700!important;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper)!important}
.hamburger,.ham{border-radius:4px!important;border:1px solid var(--line2)!important;background:var(--ink2)!important;color:var(--lime)!important}
.admin-login-btn,.student-login-btn{border-radius:4px!important;font-family:var(--mono);font-size:11px!important;text-transform:uppercase;letter-spacing:.04em}

/* cards */
.card,.qa-card,.qcard,.tile,.exam-tile,.challenge-card,.app-card,.job,.gallery-card,.important-card,.lb-card,.plist-item,.modal-box,.rules,.srow,.xp-card,.stat{
 border-radius:6px!important;border:1px solid var(--line)!important;background:var(--ink2)!important;box-shadow:3px 3px 0 rgba(200,255,46,.10);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
a.tile:hover,.exam-tile:hover,a.challenge-card:hover,.job:hover,.qa-card:hover,a.gallery-card:hover,.card-row:hover,a.plist-item:hover{transform:translate(-2px,-2px)!important;box-shadow:5px 5px 0 var(--lime)!important;border-color:var(--lime)!important}
.card-row{cursor:pointer}
.card-icon{background:#000!important;border:1px solid var(--line2)!important;border-radius:4px!important;filter:saturate(1.15)}
.important-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#12160a,#101216 60%)!important;border-color:#41501a!important}
.important-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;border:1px dashed rgba(200,255,46,.35)}
.important-tag{background:var(--lime)!important;color:#000!important;border-radius:2px!important;font-family:var(--mono);font-size:10.5px!important;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.important-link{font-family:var(--mono);font-size:12.5px!important;color:var(--lime)!important;text-transform:uppercase;letter-spacing:.03em}
.gallery-card{background:var(--ink2)!important}
.gallery-card b{color:var(--paper)!important}
.gallery-card span{color:var(--lime)!important;font-family:var(--mono);font-size:12px}

/* buttons */
.btn-primary,.btn-start,.btn-test,.btn-submit-top,.search-btn,.btn.btn-primary,.cc-play,.play-btn{
 background:var(--lime)!important;color:#050600!important;border:2px solid #000!important;border-radius:4px!important;font-family:var(--mono)!important;font-weight:700!important;letter-spacing:.04em;text-transform:uppercase;font-size:13px!important;
 box-shadow:3px 3px 0 var(--coral)!important;transition:transform .1s ease,box-shadow .1s ease}
.btn-primary:hover,.btn-start:hover,.btn-test:hover,.btn-submit-top:hover{transform:translate(-1px,-1px)!important;box-shadow:4px 4px 0 var(--coral)!important}
.btn-primary:active,.btn-start:active,.btn-test:active,.btn-submit-top:active{transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--coral)!important}
.btn-ghost,.btn-nav,.btn-mark,.btn-sec{border-radius:4px!important;border:1px solid var(--line2)!important;background:transparent!important;color:var(--paper)!important;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.btn-ghost:hover,.btn-nav:hover{border-color:var(--lime)!important;color:var(--lime)!important}

/* chips, tabs */
.chip,.tab,.pill,.filter{border-radius:3px!important;font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.chip.on,.chip.active,.tab.on,.tab.active,.chip[aria-pressed="true"]{background:var(--lime)!important;color:#000!important;border-color:var(--lime)!important}

/* inputs */
input,select,textarea{border-radius:4px!important;background:var(--ink3)!important;border:1px solid var(--line2)!important;color:var(--paper)!important}
input:focus,select:focus,textarea:focus{border-color:var(--lime)!important;box-shadow:0 0 0 3px rgba(200,255,46,.16)!important}
.search{border-radius:4px!important;border:1px solid var(--line2)!important;background:var(--ink3)!important}

/* quiz + tests */
.opt,.quiz-opt,.qa-opts>*{border-radius:4px!important;background:var(--ink3)!important;border:1px solid var(--line)!important}
.opt .ol{border-radius:2px!important;font-family:var(--mono);background:#000!important;color:var(--lime)!important;border:1px solid var(--line2)}
.opt.sel{border-color:var(--lime)!important;background:#12170a!important;box-shadow:inset 3px 0 0 var(--lime)}
.opt.sel .ol{background:var(--lime)!important;color:#000!important}
.opt.correct{border-color:#34d399!important;background:#0c1a14!important;box-shadow:inset 3px 0 0 #34d399}
.opt.wrong{border-color:#f87171!important;background:#1d0e10!important;box-shadow:inset 3px 0 0 #f87171}
.qtext{font-family:var(--disp)}
.pal{border-radius:3px!important;font-family:var(--mono);background:var(--ink3)!important;border:1px solid var(--line2)!important}
.pal.ans{background:#12170a!important;border-color:#41501a!important;color:var(--lime)!important}
.pal.cur{outline:2px solid var(--lime)!important}
.timer{font-family:var(--mono)!important;letter-spacing:.04em;color:var(--lime)!important}
.timer.low{color:#ff5d5d!important;animation:pt 1s infinite}
.scorebig{font-family:var(--disp)!important;color:var(--lime)!important;text-shadow:0 0 28px rgba(200,255,46,.35)}
.topbar2{background:rgba(8,9,12,.9)!important;border-bottom:1px solid var(--line)!important}
.expl{border-radius:4px!important;background:#12170a!important;border:1px dashed #41501a!important}
.xpline{font-family:var(--mono)!important;color:var(--coral)!important}

/* home hero */
.hero-card{position:relative;overflow:hidden;border-radius:6px!important;border:1px solid var(--line2)!important;padding:30px 20px 24px!important;background:
  radial-gradient(circle at 88% 22%,transparent 0 46px,rgba(200,255,46,.5) 47px 48px,transparent 49px 70px,rgba(200,255,46,.22) 71px 72px,transparent 73px 98px,rgba(200,255,46,.1) 99px 100px,transparent 101px),
  linear-gradient(rgba(8,9,12,.78),rgba(8,9,12,.92)),url(/hero.jpg) center/cover!important}
.hero-card::after{content:"";position:absolute;right:calc(12% - 5px);top:calc(22% - 5px);width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 22px 6px rgba(200,255,46,.55);animation:pt 2.4s ease-in-out infinite}
.hero-card .kicker2{font-family:var(--mono);color:var(--lime)!important;letter-spacing:.14em;text-transform:uppercase;font-size:11px!important}
.hero-card h1{font-size:34px!important;line-height:1.02!important;letter-spacing:-.035em!important;max-width:11ch}
.hero-card h1 em{font-style:normal;color:#000;background:var(--lime);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(min-width:768px){.hero-card h1{font-size:60px!important;max-width:14ch}}
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);margin:14px -20px 0;padding:9px 0;background:#000}
.ticker div{display:inline-block;padding-left:100%;animation:tick 28s linear infinite;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--lime);text-transform:uppercase}
.ticker i{font-style:normal;color:var(--coral);margin:0 .9em}
@keyframes tick{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.ticker div,.logo-icon::after,.hero-card::after{animation:none}}
.section-head h2{font-size:22px}

/* drawer + floating bits */
.drawer{background:#050608!important;border-right:1px solid var(--line)!important}
.drawer a{font-family:var(--disp);border-radius:4px}
.drawer a.active,.drawer a:hover{color:var(--lime)!important}
.drawer-group{font-family:var(--mono);color:var(--coral)!important;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.help-fab{bottom:88px!important}
#spQlangPill{bottom:88px!important;border-radius:4px!important}
#installBanner{bottom:84px!important;border-radius:6px!important}
.toast{border-radius:4px!important}

/* bottom dock */
#spDock{position:fixed;left:10px;right:10px;bottom:10px;z-index:55;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:5px;background:rgba(5,6,8,.88);border:1px solid var(--line2);border-radius:8px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 40px rgba(0,0,0,.6),4px 4px 0 rgba(200,255,46,.14);max-width:560px;margin:0 auto}
#spDock a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 6px;border-radius:5px;color:var(--mute);text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;min-height:46px;justify-content:center}
#spDock a b{font-size:17px;line-height:1;font-weight:500;font-family:var(--disp)}
#spDock a.on{background:var(--lime);color:#000}
#spDock a:not(.on):hover{color:var(--lime)}
body.no-dock{padding-bottom:0}
body.no-dock #spDock{display:none}
#spA11yBtn{bottom:auto!important;top:auto!important;left:auto!important;right:12px!important;bottom:84px!important;opacity:.85;border-radius:4px!important;background:#000!important;border-color:var(--line2)!important;color:var(--lime)!important;font-family:var(--mono)!important}
.help-fab{right:12px!important;bottom:136px!important}
@media(max-width:480px){
 .logo-name{font-size:13px!important;letter-spacing:.07em!important}
 .topbar{gap:6px!important}
 .admin-login-btn,.student-login-btn{padding:6px 7px!important;font-size:9.5px!important;white-space:nowrap}
 .hamburger{width:34px!important;height:34px!important}
 .hero-card h1{font-size:32px!important}
}