/* =====================================================================
   QuizAdda design system
   Palette : night #150E2E · magenta #FF3D8A · mango #FFB020
             mint #16E0A0 · sky #4CC9FF · paper #FFF7EE
   Type    : Baloo 2 (display, Devanagari) / Manrope (body) / Space Mono (data)
   Signature : the "mela ticket" — perforated room card carrying PIN + QR
   ===================================================================== */

:root{
  --night:#150E2E; --night-2:#1F1545; --night-3:#2B1E5E;
  --magenta:#FF3D8A; --mango:#FFB020; --mint:#16E0A0; --sky:#4CC9FF; --grape:#A66BFF;
  --paper:#FFF7EE; --muted:#B7AEDC; --line:rgba(255,255,255,.12);
  --r-s:10px; --r-m:18px; --r-l:28px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.75);
  --wrap:1140px;
  --font-d:'Baloo 2',system-ui,sans-serif;
  --font-b:'Manrope',system-ui,sans-serif;
  --font-m:'Space Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-b); background:var(--night); color:var(--paper);
  font-size:16px; line-height:1.55; min-height:100vh; min-height:100dvh; overflow-x:hidden;
  background-image:
    radial-gradient(60rem 30rem at 88% -8%, rgba(255,61,138,.22), transparent 60%),
    radial-gradient(46rem 26rem at -8% 12%, rgba(76,201,255,.18), transparent 62%),
    radial-gradient(40rem 24rem at 50% 108%, rgba(22,224,160,.14), transparent 60%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:rgba(255,61,138,.18);
}
/* lambe words / links mobile par bahar na nikle */
h1,h2,h3,h4,p,li,td,th,label,.brow .nm,.qtext{overflow-wrap:anywhere; word-break:break-word}
img{max-width:100%; display:block}
a{color:var(--sky); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-d); font-weight:800; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(2rem,5.4vw,3.4rem); letter-spacing:-.5px}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.narrow{max-width:640px}
.center{text-align:center}
.muted{color:var(--muted)}
.mono{font-family:var(--font-m)}
.hide{display:none !important}

/* ---------------- header ---------------- */
.site-head{
  position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(21,14,46,.82); border-bottom:1px solid var(--line);
}
.head-in{max-width:var(--wrap); margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:800; font-size:1.42rem; color:var(--paper)}
.brand:hover{text-decoration:none}
.brand-mark{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:1.1rem;
  background:linear-gradient(135deg,var(--magenta),var(--mango)); box-shadow:0 6px 18px -6px var(--magenta);
  transform:rotate(-6deg);
}
.brand small{display:block; font-family:var(--font-b); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.nav{display:flex; gap:4px; margin-left:auto; align-items:center; flex-wrap:nowrap}
.nav a{
  color:var(--paper); opacity:.82; padding:8px 13px; border-radius:99px; font-weight:700; font-size:.9rem;
}
.nav a:hover{opacity:1; background:rgba(255,255,255,.08); text-decoration:none}
.nav a.on{background:rgba(255,255,255,.1); opacity:1}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:12px; padding:11px 10px; cursor:pointer; touch-action:manipulation;
  min-width:46px; min-height:46px; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.nav-toggle span{display:block; width:20px; height:2.4px; border-radius:2px; background:var(--paper);
  transition:transform .2s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

.nav-scrim{position:fixed; inset:0; background:rgba(6,3,18,.7);
  opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:195; display:none}
.nav-top{display:none}
.userchip{display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border-radius:99px;
  background:rgba(255,255,255,.08); border:1px solid var(--line); font-weight:700; font-size:.85rem}
.userchip .av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.72rem;
  background:linear-gradient(135deg,var(--grape),var(--sky)); color:#fff; font-weight:800}

/* ---------------- buttons ---------------- */
.btn{
  touch-action:manipulation;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-d); font-weight:800; font-size:1rem; letter-spacing:.2px;
  padding:13px 26px; border-radius:99px; border:none; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,var(--magenta),#FF7A3D);
  box-shadow:0 10px 24px -12px var(--magenta); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px); text-decoration:none; box-shadow:0 16px 30px -14px var(--magenta)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-mint{background:linear-gradient(135deg,var(--mint),#0FB37E); box-shadow:0 10px 24px -12px var(--mint); color:#052A20}
.btn-sky{background:linear-gradient(135deg,var(--sky),var(--grape)); box-shadow:0 10px 24px -12px var(--sky)}
.btn-mango{background:linear-gradient(135deg,var(--mango),#FF8A3D); color:#331B00; box-shadow:0 10px 24px -12px var(--mango)}
.btn-ghost{background:transparent; border:1.6px solid var(--line); color:var(--paper); box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-sm{padding:8px 16px; font-size:.86rem}
.btn-lg{padding:16px 34px; font-size:1.15rem}
.btn-block{width:100%}

/* ---------------- cards / forms ---------------- */
.card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:var(--r-l); padding:26px; box-shadow:var(--shadow)}
.card-tight{padding:18px; border-radius:var(--r-m)}
label{display:block; font-weight:800; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
  width:100%; padding:13px 15px; border-radius:14px; border:1.6px solid var(--line);
  background:rgba(10,6,26,.55); color:var(--paper); font:inherit; font-size:1rem; outline:none;
}
/* button jaise dikhne wale select apni jagah lein, poori line na khaayein */
select.btn,select.btn-sm,.stage-bar select,.filters select{width:auto; max-width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--sky); box-shadow:0 0 0 4px rgba(76,201,255,.18)}
textarea{min-height:90px; resize:vertical}
select option{background:#1F1545}
.field{margin-bottom:16px}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row>*{flex:1 1 180px; min-width:0}
.help{font-size:.8rem; color:var(--muted); margin-top:6px}
.alert{padding:13px 16px; border-radius:14px; margin-bottom:18px; font-weight:700; font-size:.94rem;
  border:1px solid var(--line); background:rgba(255,255,255,.06)}
.alert-bad{background:rgba(255,61,138,.14); border-color:rgba(255,61,138,.5)}
.alert-good{background:rgba(22,224,160,.13); border-color:rgba(22,224,160,.45)}
.alert-warn{background:rgba(255,176,32,.14); border-color:rgba(255,176,32,.5)}

/* ---------------- hero + ticket (signature) ---------------- */
.hero{padding:56px 0 30px; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mango);
  border:1px solid rgba(255,176,32,.4); background:rgba(255,176,32,.1); padding:6px 14px; border-radius:99px}
.hero h1 span{background:linear-gradient(100deg,var(--mango),var(--magenta) 45%,var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{font-size:1.08rem; color:#DED6FF; max-width:46ch}
.stat-strip{display:flex; gap:26px; margin-top:26px; flex-wrap:wrap}
.stat b{display:block; font-family:var(--font-d); font-size:1.7rem; color:var(--mint); line-height:1}
.stat span{font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700}

/* the mela ticket */
.ticket{position:relative; background:var(--paper); color:#241A3F; border-radius:22px; padding:30px 28px 26px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85); transform:rotate(-1.2deg)}
.ticket::before,.ticket::after{content:''; position:absolute; width:26px; height:26px; border-radius:50%;
  background:var(--night); top:calc(50% + 6px)}
.ticket::before{left:-14px} .ticket::after{right:-14px}
.ticket-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.ticket-kicker{font-family:var(--font-m); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:#7A6BA8}
.ticket h2{font-family:var(--font-d); color:#241A3F; font-size:1.5rem; margin:2px 0 0}
.ticket-cut{border-top:2.5px dashed #D9CDBE; margin:20px -28px 20px; padding-top:0}
.pinbox input{
  font-family:var(--font-m); font-size:2rem; font-weight:700; letter-spacing:.42em; text-align:center;
  background:#F0E7DA; border:2.5px solid #241A3F; color:#241A3F; border-radius:14px; padding:14px 10px 14px 20px;
}
.pinbox input:focus{border-color:var(--magenta); box-shadow:0 0 0 4px rgba(255,61,138,.2)}
.pinbox label{color:#7A6BA8}
.ticket .btn{width:100%; margin-top:12px}
.ticket-or{display:flex; align-items:center; gap:12px; color:#9C8FC4; font-size:.78rem;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:16px 0}
.ticket-or::before,.ticket-or::after{content:''; flex:1; height:1.5px; background:#E2D6C6}
.ticket-foot{display:flex; gap:10px; align-items:center; justify-content:center; color:#7A6BA8; font-size:.8rem;
  font-weight:700; margin-top:14px}

/* ---------------- feature bricks ---------------- */
.bricks{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:14px 0 40px}
.brick{border-radius:var(--r-m); padding:22px; border:1px solid var(--line); background:rgba(255,255,255,.05);
  transition:transform .15s ease}
.brick:hover{transform:translateY(-4px)}
.brick .ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:1.3rem; margin-bottom:12px}
.brick h3{margin-bottom:4px; font-size:1.08rem}
.brick p{font-size:.9rem; color:var(--muted); margin:0}
.i-mag{background:rgba(255,61,138,.18)} .i-min{background:rgba(22,224,160,.18)}
.i-sky{background:rgba(76,201,255,.18)} .i-man{background:rgba(255,176,32,.18)}
.i-gra{background:rgba(166,107,255,.2)}

/* pricing card */
.pricecard{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.pricecard .bigprice{font-family:var(--font-m); font-size:clamp(2.4rem,8vw,3.4rem); color:var(--mango); line-height:1}

.section{padding:34px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.section-head p{margin:0; color:var(--muted)}

/* ---------------- game screen ---------------- */
.stage{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
.stage-bar{display:flex; align-items:center; gap:9px; padding:11px 16px; border-bottom:1px solid var(--line);
  background:rgba(21,14,46,.94); position:sticky; top:0; z-index:40; backdrop-filter:blur(12px); flex-wrap:wrap}
.stage-bar .btn{white-space:nowrap}

/* upar ke bar me chhote screen par kuch links chhupa do */
@media(max-width:640px){ .hide-sm{display:none !important} }

/* teacher ke control buttons — ek hi line, side me scroll */
.stage-bar.controls{
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; justify-content:flex-start;
  gap:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(21,14,46,.97);
}
.stage-bar.controls::-webkit-scrollbar{display:none}
.stage-bar.controls > *{flex:0 0 auto}
.stage-bar.controls .spacer{flex:1 1 auto; min-width:0}
.stage-bar.controls #btnNext,.stage-bar.controls #btnStart{
  min-width:200px; font-size:1.02rem; padding:13px 24px}
.stage-bar.controls select{padding:9px 12px; font-size:.84rem; font-weight:800}
.pill{padding:6px 14px; border-radius:99px; background:rgba(255,255,255,.08); border:1px solid var(--line);
  font-weight:800; font-size:.82rem}
.pill-mint{background:rgba(22,224,160,.18); border-color:rgba(22,224,160,.4); color:var(--mint)}
.pill-mango{background:rgba(255,176,32,.18); border-color:rgba(255,176,32,.4); color:var(--mango)}
.pill-mag{background:rgba(255,61,138,.18); border-color:rgba(255,61,138,.45); color:#FF8FB6}
.stage-body{flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:24px 18px 34px; min-height:0; overflow-x:hidden}
.lobby{padding-top:6px}

.qcard{max-width:960px; margin:0 auto; width:100%}
.qtext{font-family:var(--font-d); font-size:clamp(1.35rem,3.6vw,2.2rem); font-weight:800; text-align:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:var(--r-l); padding:26px 24px;
  margin-bottom:16px; line-height:1.3}
.qimg{display:block; max-width:100%; width:auto; height:auto; max-height:34vh; margin:0 auto 16px;
  border-radius:var(--r-m); border:1px solid var(--line); object-fit:contain; background:rgba(255,255,255,.05)}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.opt{
  touch-action:manipulation;
  display:flex; align-items:center; gap:14px; text-align:left; padding:18px 20px; border-radius:var(--r-m);
  border:none; cursor:pointer; color:#fff; font-family:var(--font-b); font-weight:800; font-size:1.05rem;
  min-height:86px; transition:transform .12s ease, filter .12s ease; position:relative; overflow:hidden;
}
.opt:hover:not(:disabled){transform:translateY(-3px)}
.opt:disabled{cursor:default}
.opt .shape{font-size:1.35rem; flex:0 0 auto; width:34px; text-align:center}
.opt .lbl{flex:1 1 auto; min-width:0; display:block; overflow-wrap:anywhere}

/* image wale options — mobile par bhi poora dikhe */
.opt.has-img{flex-direction:column; align-items:stretch; gap:8px; padding:12px; min-height:0}
.opt.has-img .shape{width:auto; text-align:left; font-size:1.1rem; line-height:1}
.opt.has-img .lbl{display:block; width:100%; text-align:center}
.opt img{
  display:block; width:auto; max-width:100%; height:auto; max-height:150px;
  margin:0 auto; border-radius:10px; background:#fff; object-fit:contain;
}
.opt-1{background:linear-gradient(140deg,#FF3D8A,#D6246C)}
.opt-2{background:linear-gradient(140deg,#4CC9FF,#2E7BE0); }
.opt-3{background:linear-gradient(140deg,#FFB020,#F0870D); color:#331B00}
.opt-4{background:linear-gradient(140deg,#16E0A0,#0C9C6E); color:#052A20}
.opt.dim{filter:grayscale(.75) brightness(.55)}
.opt.right{outline:4px solid #fff; outline-offset:-4px; animation:pop .45s ease}
.opt.wrong{filter:grayscale(.8) brightness(.5)}
.opt .cnt{position:absolute; right:10px; top:8px; font-family:var(--font-m); font-size:.74rem;
  background:rgba(0,0,0,.32); padding:2px 9px; border-radius:99px}
.opt .picked{position:absolute; right:10px; bottom:8px; font-size:.72rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(0,0,0,.35); padding:3px 10px; border-radius:99px}
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}

/* timer BAR — ghatta hua bar */
.tbar{width:100%; max-width:520px; margin:0 auto 14px; flex:1 1 200px; min-width:150px}
.tbar-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.tbar-lbl{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:800}
.tbar-num{font-family:var(--font-m); font-size:1.25rem; font-weight:700; color:var(--mint); line-height:1}
.tbar-track{height:14px; border-radius:99px; background:rgba(255,255,255,.1);
  border:1px solid var(--line); overflow:hidden; position:relative}
.tbar-fill{height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--mint),#4CC9FF);
  transition:width .25s linear, background .3s ease;
  box-shadow:0 0 18px -4px var(--mint)}
.tbar.warn .tbar-num{color:var(--mango)}
.tbar.warn .tbar-fill{background:linear-gradient(90deg,var(--mango),#FF8A3D); box-shadow:0 0 18px -4px var(--mango)}
.tbar.dangr .tbar-num{color:var(--magenta)}
.tbar.dangr .tbar-fill{background:linear-gradient(90deg,var(--magenta),#FF7A3D); box-shadow:0 0 18px -4px var(--magenta);
  animation:pulseBar .8s ease-in-out infinite}
@keyframes pulseBar{0%,100%{opacity:1}50%{opacity:.62}}

/* stage bar ke andar chhota version */
.stage-bar .tbar{margin:0; max-width:260px}
.stage-bar .tbar-track{height:10px}
.stage-bar .tbar-num{font-size:1rem}

/* lobby */
.lobby{text-align:center; max-width:900px; margin:0 auto; width:100%}
.bigpin{font-family:var(--font-m); font-size:clamp(2.2rem,7.5vw,4.4rem); letter-spacing:.14em; font-weight:700;
  color:var(--mango); line-height:1.05; text-shadow:0 8px 30px rgba(255,176,32,.35);
  margin:6px 0 4px; word-break:break-all}
.players{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:22px}
.ptag{padding:8px 15px; border-radius:99px; font-weight:800; font-size:.9rem; border:1px solid var(--line);
  background:rgba(255,255,255,.08); animation:in .3s ease}
@keyframes in{from{opacity:0; transform:scale(.8)}to{opacity:1; transform:scale(1)}}
.qr-holder{background:#fff; padding:14px; border-radius:18px; display:inline-block; line-height:0}
.qr-holder img,.qr-holder canvas{width:190px; height:190px}

/* leaderboard */
.board{max-width:760px; margin:0 auto; width:100%}
.brow{display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px; margin-bottom:8px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); animation:slide .35s ease backwards}
@keyframes slide{from{opacity:0; transform:translateX(-14px)}to{opacity:1; transform:none}}
.brow .rk{font-family:var(--font-m); font-size:1.05rem; width:38px; color:var(--muted); font-weight:700}
.brow .nm{flex:1; font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.brow .sc{font-family:var(--font-m); font-weight:700; color:var(--mint)}
.brow.me{border-color:var(--sky); background:rgba(76,201,255,.14)}
.brow.r1{background:linear-gradient(100deg,rgba(255,176,32,.28),rgba(255,176,32,.06)); border-color:rgba(255,176,32,.6)}
.brow.r2{background:linear-gradient(100deg,rgba(200,205,225,.24),transparent); border-color:rgba(200,205,225,.45)}
.brow.r3{background:linear-gradient(100deg,rgba(226,140,80,.24),transparent); border-color:rgba(226,140,80,.5)}
.brow .av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:.78rem;
  font-weight:800; color:#fff; flex:0 0 auto}

/* score flash */
.flash{text-align:center; max-width:540px; margin:0 auto}
.flash .big{font-family:var(--font-d); font-size:clamp(2rem,7vw,3.4rem); margin-bottom:6px}
.flash .pts{font-family:var(--font-m); font-size:1.6rem; color:var(--mint)}

/* ---------------- dashboard ---------------- */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.quizcard{border-radius:var(--r-m); border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); display:flex; flex-direction:column}
.quizcard .top{padding:18px 18px 12px; border-bottom:1px solid var(--line)}
.quizcard h3{margin:0 0 4px; font-size:1.15rem}
.quizcard .meta{font-size:.8rem; color:var(--muted); font-weight:700}
.quizcard .days{display:flex; gap:6px; flex-wrap:wrap; padding:14px 18px}
.daychip{font-family:var(--font-m); font-size:.76rem; padding:6px 10px; border-radius:9px; border:1px solid var(--line);
  background:rgba(0,0,0,.28)}
.daychip b{color:var(--mango)}
.quizcard .acts{margin-top:auto; padding:14px 18px; display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line)}
.badge{font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:99px}
.b-draft{background:rgba(255,255,255,.12); color:var(--muted)}
.b-active{background:rgba(22,224,160,.2); color:var(--mint)}
.b-done{background:rgba(166,107,255,.2); color:#D2B6FF}

table.tbl{width:100%; border-collapse:collapse; font-size:.92rem}
table.tbl th{text-align:left; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:10px 12px; border-bottom:1px solid var(--line)}
table.tbl td{padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.07)}
table.tbl tr:hover td{background:rgba(255,255,255,.04)}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* question editor */
.qitem{border:1px solid var(--line); border-radius:var(--r-m); padding:16px; margin-bottom:14px;
  background:rgba(255,255,255,.05)}
.qitem .qhead{display:flex; gap:12px; align-items:center; margin-bottom:10px}
.qno{font-family:var(--font-m); background:var(--night-3); padding:4px 11px; border-radius:9px; font-size:.82rem}
.optrow{display:flex; gap:10px; align-items:center; margin-bottom:8px}
.optrow .dot{width:26px; height:26px; border-radius:8px; flex:0 0 auto}
.d1{background:var(--magenta)} .d2{background:var(--sky)} .d3{background:var(--mango)} .d4{background:var(--mint)}
.correct-tag{color:var(--mint); font-weight:800; font-size:.78rem}

/* footer */
.site-foot{border-top:1px solid var(--line); margin-top:50px; padding:26px 0; color:var(--muted); font-size:.88rem}
.foot-in{max-width:var(--wrap); margin:0 auto; padding:0 20px; display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap}

/* toast */
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(140%); z-index:999;
  background:var(--night-3); border:1px solid var(--line); padding:12px 22px; border-radius:99px; font-weight:800;
  box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,1.3,.4,1); max-width:90vw; text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

/* katex fit */
.katex{font-size:1em !important}
.katex-display{margin:.4em 0 !important}

/* =====================================================================
   RESPONSIVE  —  mobile first fixes
   Breakpoints: 1024 · 900 · 760 · 620 · 480 · 380
   ===================================================================== */

/* ---------- tablet / small laptop ---------- */
@media (max-width:1024px){
  .wrap{padding:0 16px}
  .head-in{padding:12px 16px; gap:12px}
  .foot-in{padding:0 16px}
  .card{padding:22px}
  .hero{padding:44px 0 24px; gap:34px}
}

/* ---------- tablet portrait ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:28px; padding-top:30px}
  .ticket{transform:none}
  .pricecard{grid-template-columns:1fr; gap:20px; text-align:center}
  .pricecard .eyebrow{margin:0 auto}
  .hero-sub{max-width:none}
  .section{padding:26px 0}
  .qr-holder img,.qr-holder canvas{width:170px; height:170px}
}

/* ---------- phone landscape / big phone ---------- */
@media (max-width:760px){
  html{font-size:15.5px}
  .site-head{position:sticky}
  .head-in{position:static; padding:10px 14px; gap:10px}
  .brand{font-size:1.18rem; min-width:0}
  .brand>span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .brand-mark{width:32px; height:32px; font-size:1rem; flex:0 0 auto}

  /* MOBILE MENU — icon dabao, right side se drawer khule */

  /* ZAROORI: backdrop-filter apne andar ke position:fixed elements ko
     apne size me kaid kar leta hai. Isi wajah se drawer sirf header jitna
     lamba dikhta tha aur saare menu items nahi aate the. Mobile par hata do. */
  .site-head{backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(21,14,46,.97); overflow:visible}
  .head-in{position:static; overflow:visible}

  .nav-toggle{display:flex}
  .nav-scrim{display:block}
  .nav-scrim.open{opacity:1; pointer-events:auto}
  body.nav-lock{overflow:hidden}

  .nav{
    position:fixed; top:0; right:0; bottom:0; height:100vh; height:100dvh;
    width:min(310px, 88vw); z-index:200; max-height:none;
    margin:0; flex-direction:column; align-items:stretch; gap:3px;
    background:#1A1138; border-left:1px solid var(--line);
    box-shadow:-24px 0 60px -18px rgba(0,0,0,.9);
    transform:translateX(102%); transition:transform .24s cubic-bezier(.2,.9,.3,1);
    padding:0 12px calc(18px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .nav.open{transform:none}
  .nav-top{display:flex; align-items:center; gap:10px; padding:16px 4px 14px; margin-bottom:6px;
    border-bottom:1px solid var(--line); position:sticky; top:0; background:#1A1138; z-index:2}
  .nav-title{flex:1; font-family:var(--font-d); font-weight:800; font-size:1.1rem}
  .nav-x{background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--paper);
    border-radius:10px; padding:8px 12px; cursor:pointer; font-size:1rem; touch-action:manipulation;
    min-width:42px; min-height:42px}
  .nav a{padding:14px 14px; border-radius:13px; font-size:1rem; opacity:1; font-weight:700}
  .nav a:hover{background:rgba(255,255,255,.07)}
  .nav a.on{background:rgba(255,61,138,.2); box-shadow:inset 3px 0 0 var(--magenta)}
  .nav .btn{width:100%; margin-top:10px; padding:14px 18px; font-size:1rem; justify-content:center}
  .userchip{margin:12px 0 0; justify-content:center; padding:8px 14px 8px 8px}

  /* hero + ticket */
  .hero{padding:22px 0 18px}
  h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .stat-strip{gap:14px 22px; margin-top:20px}
  .stat b{font-size:1.4rem}
  .stat span{font-size:.7rem}
  .ticket{padding:22px 20px 20px; border-radius:20px}
  .ticket-cut{margin:16px -20px 16px}
  .ticket h2{font-size:1.3rem}
  .pinbox input{font-size:1.6rem; letter-spacing:.3em; padding:13px 8px 13px 16px}

  /* forms + buttons: thumb friendly */
  .btn{padding:13px 22px; min-height:46px}
  .btn-lg{padding:15px 26px; font-size:1.05rem; min-height:52px}
  .btn-sm{padding:10px 16px; min-height:40px}
  input[type=text],input[type=email],input[type=password],input[type=number],
  input[type=tel],select,textarea{font-size:16px; padding:13px 14px}  /* 16px = iOS zoom nahi karega */
  .card{padding:18px; border-radius:20px}
  .row{gap:10px}
  .row>*{flex:1 1 100%}

  /* game screen */
  .stage-bar{gap:8px; padding:9px 12px}
  .pill{padding:5px 11px; font-size:.76rem}
  .stage-body{padding:16px 12px 24px}
  .qtext{padding:18px 15px; border-radius:20px; font-size:clamp(1.15rem,5vw,1.6rem)}
  .qimg{max-height:26vh}
  .opts{grid-template-columns:1fr; gap:10px}
  .opt{min-height:62px; font-size:.98rem; padding:14px 15px; gap:11px}
  .opt .shape{font-size:1.15rem; width:26px}
  .opt.has-img .shape{width:auto}
  .opt img{max-height:min(150px,26vh)}
  .opt.has-img{padding:10px}
  .ring{width:58px; height:58px}
  .ring b{font-size:1rem}

  /* host control bar mobile par aur compact */
  .stage-bar.controls{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .stage-bar.controls #btnNext,.stage-bar.controls #btnStart{min-width:158px; font-size:.94rem; padding:12px 18px}
  .stage-bar.controls .spacer{display:none}

  /* leaderboard */
  .brow{gap:10px; padding:10px 12px}
  .brow .rk{width:30px; font-size:.95rem}
  .brow .av{width:30px; height:30px; font-size:.72rem}
  .brow .sc{font-size:.95rem}

  /* dashboard */
  .dash-grid{grid-template-columns:1fr; gap:14px}
  .bricks{grid-template-columns:1fr; gap:12px}
  .brick{padding:18px}
  .section-head{gap:12px}
  .section-head .btn{width:100%}
  table.tbl{font-size:.86rem; min-width:520px}
  .quizcard .acts .btn{flex:1 1 auto}

  .site-foot{margin-top:34px; padding:22px 0 calc(22px + env(safe-area-inset-bottom))}
  .foot-in{flex-direction:column; gap:10px; text-align:center; justify-content:center}
}

/* ---------- normal phone ---------- */
@media (max-width:620px){
  body{background-attachment:scroll}   /* iOS par fixed background lag karta hai */
  .qr-holder img,.qr-holder canvas{width:150px; height:150px}
  .bigpin{letter-spacing:.1em}
  .players{gap:7px}
  .ptag{padding:7px 12px; font-size:.84rem}
  .qitem{padding:13px}
  .optrow{gap:8px}
  .flash .pts{font-size:1.35rem}
}

/* ---------- small phone ---------- */
@media (max-width:480px){
  .wrap{padding:0 13px}
  .head-in{padding:9px 13px}
  .brand small{display:none}          /* tagline hata do, jagah bachao */
  .brand{font-size:1.08rem}
  .ticket{padding:18px 16px 16px}
  .ticket-cut{margin:14px -16px 14px}
  .pinbox input{font-size:1.42rem; letter-spacing:.24em; padding:12px 6px 12px 12px}
  .ticket-foot{font-size:.74rem}
  .stat-strip{gap:12px 18px}
  .stat b{font-size:1.25rem}
  .card{padding:15px}
  .card-tight{padding:13px}
  .stage-bar{padding:8px 10px; gap:6px}
  .stage-body{padding:13px 10px 20px}
  .qtext{padding:15px 13px}
  .opt{min-height:56px; font-size:.93rem; padding:12px 13px}
  .btn{padding:12px 18px; font-size:.95rem}
  .btn-lg{padding:14px 20px; font-size:1rem}
  .btn-sm{padding:9px 13px; font-size:.8rem}
  #toast{left:12px; right:12px; bottom:calc(16px + env(safe-area-inset-bottom));
    transform:translateY(140%); max-width:none; border-radius:16px}
  #toast.show{transform:translateY(0)}
  .brow .nm{font-size:.92rem}
}

/* ---------- very small phone (360px aur chhota) ---------- */
@media (max-width:380px){
  html{font-size:15px}
  .brand-mark{width:28px; height:28px}
  .pinbox input{font-size:1.25rem; letter-spacing:.18em}
  .qr-holder img,.qr-holder canvas{width:132px; height:132px}
  .opt .shape{display:none}
  .opt.has-img .shape{display:block}
  .opt img{max-height:min(130px,24vh)}
  .quizcard .acts{gap:6px}
  .quizcard .acts .btn{width:100%}
}

/* ---------- phone landscape (kam height) ---------- */
@media (max-height:520px) and (orientation:landscape){
  .stage-body{padding:10px 12px 16px; justify-content:flex-start}
  .qtext{font-size:1.15rem; padding:12px 14px; margin-bottom:10px}
  .qimg{max-height:22vh}
  .opt{min-height:50px; padding:10px 13px}
  .opts{grid-template-columns:1fr 1fr; gap:8px}
  .bigpin{font-size:2.6rem}
  .qr-holder img,.qr-holder canvas{width:120px; height:120px}
}

/* ---------- notch / gesture bar safe area ---------- */
@supports(padding:max(0px)){
  .site-head{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
  .stage-body{padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right))}
}

/* ---------- printing / motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* =====================================================================
   LEADERBOARD SIDEBAR  (sirf teacher ke host screen par)
   ===================================================================== */
.lb-scrim{position:fixed; inset:0; background:rgba(6,3,18,.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:90}
.lb-scrim.open{opacity:1; pointer-events:auto}
.lb-side{
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; z-index:95;
  background:#1A1138; border-left:1px solid var(--line); box-shadow:-24px 0 60px -20px rgba(0,0,0,.85);
  transform:translateX(102%); transition:transform .24s cubic-bezier(.2,.9,.3,1);
  display:flex; flex-direction:column;
}
.lb-side.open{transform:none}
.lb-head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.lb-head h3{margin:0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-x{background:none; border:1px solid var(--line); color:var(--paper); border-radius:10px;
  padding:7px 11px; font-size:1rem; cursor:pointer; touch-action:manipulation; min-width:40px; min-height:40px}
.lb-legend{display:flex; gap:8px; flex-wrap:wrap; padding:11px 18px; border-bottom:1px solid var(--line);
  font-size:.74rem; color:var(--muted); font-weight:700}
.lb-legend span{background:rgba(255,255,255,.06); border:1px solid var(--line); padding:4px 10px; border-radius:99px}
.lb-legend .b1{color:var(--mango); border-color:rgba(255,176,32,.45); background:rgba(255,176,32,.12)}
.lb-legend .b2{color:var(--sky); border-color:rgba(76,201,255,.45); background:rgba(76,201,255,.12)}
.lb-body{flex:1; overflow-y:auto; padding:14px 14px calc(20px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch}

/* leaderboard row: naam + sahi count + bonus + total */
.lb-body .brow{cursor:pointer; transition:background .15s ease, transform .12s ease}
.lb-body .brow:hover{background:rgba(255,255,255,.11); transform:translateX(-2px)}
.brow .nm small{display:block; font-size:.72rem; color:var(--muted); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.brow .scwrap{display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:0 0 auto}
.bchip{font-family:var(--font-m); font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:99px;
  background:rgba(255,176,32,.18); color:var(--mango); border:1px solid rgba(255,176,32,.4); white-space:nowrap}
.bchip.b1{background:rgba(255,176,32,.2); color:var(--mango); border-color:rgba(255,176,32,.5)}
.bchip.b2{background:rgba(76,201,255,.18); color:var(--sky); border-color:rgba(76,201,255,.45)}

/* ---------- player detail (points distribution) ---------- */
.pd-top{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px}
.pd-tile{border:1px solid var(--line); border-radius:14px; padding:11px 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.pd-tile b{display:block; font-family:var(--font-d); font-size:1.5rem; line-height:1.05; color:var(--mint)}
.pd-tile span{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800}
.pd-tile.b1 b{color:var(--sky)} .pd-tile.b2 b{color:var(--mango)}
.pd-meta{font-size:.82rem; color:var(--muted); font-weight:700; margin-bottom:14px; line-height:1.7}
.pd-day{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--font-d); font-weight:800; font-size:1rem; color:var(--paper);
  margin:16px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.pd-day span{font-family:var(--font-m); font-size:.82rem; color:var(--mint); font-weight:700}
.pd-row{display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:12px;
  background:rgba(255,255,255,.045); border:1px solid var(--line); margin-bottom:6px}
.pd-i{flex:0 0 auto; font-size:.95rem; line-height:1.5}
.pd-q{flex:1; min-width:0; font-size:.85rem; font-weight:700; overflow-wrap:anywhere}
.pd-q small{display:block; font-size:.73rem; color:var(--muted); font-weight:600; margin-top:2px}
.pd-p{flex:0 0 auto; font-family:var(--font-m); font-weight:700; font-size:.92rem; color:var(--mint);
  text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:3px}

/* =====================================================================
   STUDENT: apna score card (leaderboard ki jagah)
   ===================================================================== */
.mycard{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.mycard .mc{border:1px solid var(--line); border-radius:16px; padding:12px 18px; min-width:104px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.mycard .mc b{display:block; font-family:var(--font-d); font-size:1.6rem; line-height:1.05; color:var(--paper)}
.mycard .mc span{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800}
.mycard .mc.mint b{color:var(--mint)} .mycard .mc.mango b{color:var(--mango)}

/* =====================================================================
   FLOATING BUTTON + MINI MODE
   ===================================================================== */
.fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:120;
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; touch-action:manipulation;
  background:linear-gradient(135deg,var(--magenta),#FF7A3D); color:#fff; font-size:1.45rem;
  box-shadow:0 12px 30px -8px rgba(255,61,138,.7); display:grid; place-items:center;
  transition:transform .15s ease, background .2s ease;
}
.fab:hover{transform:scale(1.06)}
.fab:active{transform:scale(.95)}
.fab.on{background:linear-gradient(135deg,var(--mint),#0FB37E); color:#052A20;
  box-shadow:0 12px 30px -8px rgba(22,224,160,.7)}
.fab-dot{position:absolute; top:5px; right:5px; width:13px; height:13px; border-radius:50%;
  background:var(--mango); border:2px solid var(--night); animation:pulseBar 1.1s ease-in-out infinite}

.mini{
  position:fixed; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:115;
  width:min(330px, calc(100vw - 24px)); border-radius:20px; overflow:hidden;
  background:rgba(26,17,56,.97); border:1px solid var(--line);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.9); backdrop-filter:blur(14px);
  transform:translateY(14px) scale(.96); opacity:0; pointer-events:none;
  transition:transform .2s cubic-bezier(.2,.9,.3,1), opacity .2s ease;
}
.mini.open{transform:none; opacity:1; pointer-events:auto}
.mini-bar{display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.05)}
.mini-t{font-family:var(--font-m); font-weight:700; font-size:1rem; color:var(--mint); min-width:38px}
.mini-t.warn{color:var(--mango)} .mini-t.dangr{color:var(--magenta)}
.mini-q{font-size:.76rem; font-weight:800; color:var(--muted); letter-spacing:.08em}
.mini-s{margin-left:auto; font-family:var(--font-m); font-weight:700; font-size:.88rem; color:var(--mango)}
.mini-x{background:none; border:1px solid var(--line); color:var(--paper); border-radius:8px;
  padding:5px 9px; font-size:.85rem; cursor:pointer; touch-action:manipulation; line-height:1}
.mini-big{background:rgba(22,224,160,.16); border-color:rgba(22,224,160,.45); color:var(--mint)}
.sheet-chk small{display:block; font-weight:600; font-size:.74rem; opacity:.8; margin-top:2px}
.sheet-chk{align-items:flex-start}
.mini-text{padding:10px 12px 4px; font-family:var(--font-d); font-weight:800; font-size:.95rem; line-height:1.35;
  overflow-wrap:anywhere; max-height:88px; overflow:hidden}
.mini-opts{display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:8px 10px 10px}
.mini-opts .opt{min-height:52px; padding:9px 10px; font-size:.86rem; gap:7px; border-radius:13px}
.mini-opts .opt .shape{width:18px; font-size:.95rem}
.mini-opts .opt img{max-height:52px}
.mini-opts .opt.has-img{padding:7px; gap:4px}
.mini-msg{padding:0 12px 11px; font-size:.74rem; color:var(--muted); font-weight:700; text-align:center}

/* mini mode on -> peeche ka page halka */
body.mini-on .stage-body{opacity:.28; filter:saturate(.5)}
body.mini-on .stage-bar{opacity:.5}

/* Document Picture-in-Picture window ke andar */
.pip-body{margin:0; background:#150E2E; font-family:var(--font-b); color:var(--paper)}
.pip-body .mini{position:static; width:100%; border:none; border-radius:0; box-shadow:none;
  transform:none; opacity:1; pointer-events:auto; bottom:auto; right:auto}
.pip-body .mini-big{display:none}
.pip-body .mini-opts{grid-template-columns:1fr 1fr}

@media (max-width:760px){
  .lb-side{width:100vw; max-width:100vw}
  .pd-top{grid-template-columns:1fr 1fr}
  .fab{width:54px; height:54px; font-size:1.3rem; right:13px}
  .mini{right:8px; left:8px; width:auto; bottom:calc(78px + env(safe-area-inset-bottom))}
  .mini-opts{grid-template-columns:1fr}
  .mini-opts .opt{min-height:48px}
}

/* FAB tip bubble */
.fab-tip{
  position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:118;
  max-width:min(300px, calc(100vw - 32px)); padding:14px 16px; border-radius:18px;
  background:rgba(26,17,56,.98); border:1px solid var(--line); box-shadow:0 20px 50px -16px rgba(0,0,0,.9);
  font-size:.86rem; font-weight:700; line-height:1.5; color:var(--paper);
  opacity:0; transform:translateY(10px) scale(.96); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.fab-tip.show{opacity:1; transform:none; pointer-events:auto}
.fab-tip::after{content:''; position:absolute; right:22px; bottom:-8px; width:16px; height:16px;
  background:rgba(26,17,56,.98); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transform:rotate(45deg)}
.fab-tip button{margin-top:10px; width:100%; padding:9px 14px; border-radius:11px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--mint),#0FB37E); color:#052A20; font:inherit; font-weight:800;
  touch-action:manipulation}

/* =====================================================================
   CHOICE SHEET  (bottom sheet)
   ===================================================================== */
.sheet-scrim{position:fixed; inset:0; background:rgba(6,3,18,.66); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:130}
.sheet-scrim.open{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:50%; bottom:0; z-index:135; width:min(460px, 100vw);
  transform:translate(-50%, 102%); transition:transform .26s cubic-bezier(.2,.9,.3,1);
  background:#1A1138; border:1px solid var(--line); border-bottom:none;
  border-radius:24px 24px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px -18px rgba(0,0,0,.9); max-height:86vh; overflow-y:auto;
}
.sheet.open{transform:translate(-50%, 0)}
.sheet-grip{width:44px; height:5px; border-radius:99px; background:rgba(255,255,255,.22); margin:4px auto 14px}
.sheet h3{margin:0 0 14px; font-size:1.1rem; text-align:center}
.sheet-opt{display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.055); border:1px solid var(--line); border-radius:16px;
  padding:14px; margin-bottom:10px; color:var(--paper); font:inherit; touch-action:manipulation;
  transition:background .15s ease, transform .12s ease}
.sheet-opt:hover{background:rgba(255,255,255,.1)}
.sheet-opt:active{transform:scale(.985)}
.sheet-opt .ic{flex:0 0 auto; font-size:1.5rem; line-height:1.2; width:30px; text-align:center}
.sheet-opt b{display:block; font-family:var(--font-d); font-size:1rem; margin-bottom:3px}
.sheet-opt small{display:block; font-size:.8rem; color:var(--muted); font-weight:600; line-height:1.5}
.sheet-chk{display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:700;
  color:var(--muted); margin:6px 0 14px; cursor:pointer}
.sheet-chk input{width:20px; height:20px; accent-color:var(--mint); flex:0 0 auto}

.split-steps{margin:0 0 16px; padding-left:22px; line-height:1.75; font-size:.9rem; font-weight:600}
.split-steps li{margin-bottom:8px}
.split-steps b{color:var(--mango)}
.split-pic{border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:12px}
.sp-top{background:rgba(255,255,255,.07); padding:22px 12px; text-align:center; font-weight:800;
  color:var(--muted); font-size:.85rem; border-bottom:2px dashed var(--line)}
.sp-bot{background:linear-gradient(135deg,rgba(255,61,138,.25),rgba(255,176,32,.18));
  padding:18px 12px; text-align:center; font-weight:800}
.sp-bot span{display:block; margin-top:6px; font-size:1.1rem; letter-spacing:.4em; opacity:.85}
.split-note{font-size:.82rem; color:var(--muted); font-weight:600; line-height:1.6; margin:0 0 14px}

/* =====================================================================
   COMPACT MODE — split screen / chhoti window me apne aap
   ===================================================================== */
body.compact .stage-bar{padding:6px 10px; gap:6px}
body.compact .stage-bar .pill{font-size:.66rem; padding:3px 8px}
body.compact .stage-body{padding:8px 10px 12px; justify-content:flex-start}
body.compact .qtext{font-size:1rem; padding:10px 12px; margin-bottom:8px;
  max-height:5.6em; overflow-y:auto; border-radius:14px}
body.compact .qimg{max-height:16vh; margin-bottom:8px}
body.compact #timerBig{margin-bottom:8px}
body.compact #timerBig .tbar-track{height:9px}
body.compact #timerBig .tbar-top{margin-bottom:3px}
body.compact .opts{gap:6px; grid-template-columns:1fr 1fr}
body.compact .opt{min-height:52px; padding:9px 10px; font-size:.88rem; gap:7px; border-radius:14px}
body.compact .opt .shape{width:20px; font-size:1rem}
body.compact .opt img{max-height:min(78px,14vh)}
body.compact .opt.has-img{padding:7px}
body.compact #qMeta,body.compact #qPoints{font-size:.68rem; padding:3px 8px}
body.compact .fab{width:46px; height:46px; font-size:1.12rem; right:10px;
  bottom:calc(10px + env(safe-area-inset-bottom))}
body.compact .fab-tip{display:none}
body.compact .flash .pts{font-size:1.6rem}
body.compact .lobby h1,body.compact .lobby h2{font-size:1.25rem}
body.compact .mycard .mc{padding:9px 13px; min-width:86px}
body.compact .mycard .mc b{font-size:1.2rem}

/* bahut chhoti height me ek column */
@media (max-height:420px){
  body.compact .opts{grid-template-columns:1fr 1fr}
  body.compact .qtext{max-height:3.4em; font-size:.92rem}
  body.compact .opt{min-height:44px}
}

/* =====================================================================
   QUICK ANSWER PAD — PiP se wapas aate hi 1-tap jawab
   ===================================================================== */
.pad{
  position:fixed; inset:0; z-index:140; background:rgba(16,10,38,.985);
  display:flex; flex-direction:column; padding:0 0 calc(14px + env(safe-area-inset-bottom));
  opacity:0; pointer-events:none; transition:opacity .16s ease;
}
.pad.open{opacity:1; pointer-events:auto}
.pad-bar{display:flex; align-items:center; gap:10px; padding:12px 14px calc(12px);
  padding-top:calc(12px + env(safe-area-inset-top)); border-bottom:1px solid var(--line)}
.pad-t{font-family:var(--font-m); font-weight:700; font-size:1.5rem; color:var(--mint); min-width:56px}
.pad-t.warn{color:var(--mango)} .pad-t.dangr{color:var(--magenta)}
.pad-q{font-size:.8rem; font-weight:800; color:var(--muted); letter-spacing:.08em; flex:1}
.pad-x{background:none; border:1px solid var(--line); color:var(--paper); border-radius:10px;
  padding:8px 12px; font-size:.95rem; cursor:pointer; touch-action:manipulation; min-width:42px; min-height:42px}
.pad-text{padding:14px 16px 6px; font-family:var(--font-d); font-weight:800;
  font-size:clamp(1.05rem,4.4vw,1.4rem); line-height:1.35; overflow-wrap:anywhere;
  max-height:26vh; overflow-y:auto}
.pad-opts{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 14px; align-content:stretch}
.pad-opts .opt{min-height:0; height:100%; font-size:1.02rem; padding:14px; border-radius:18px; gap:9px}
.pad-opts .opt .shape{font-size:1.5rem; width:28px}
.pad-opts .opt img{max-height:min(120px,18vh)}
.pad-opts .opt.has-img{padding:10px}
.pad-foot{padding:4px 16px 0; text-align:center; font-size:.9rem; font-weight:700}

@media (max-width:420px){
  .pad-opts{grid-template-columns:1fr; gap:8px}
  .pad-opts .opt{min-height:56px; font-size:.98rem; padding:12px}
  .pad-text{font-size:1.05rem; max-height:22vh}
}
@media (max-height:520px){
  .pad-text{max-height:18vh; font-size:.98rem; padding:8px 14px 4px}
  .pad-opts{grid-template-columns:1fr 1fr; gap:7px; padding:7px 12px}
  .pad-opts .opt{padding:9px; font-size:.9rem}
  .pad-t{font-size:1.2rem}
}

/* =====================================================================
   OPTION ANSWER % — kis option ko kitne bachchon ne chuna
   ===================================================================== */
.opt.showpct{position:relative; overflow:hidden; padding-right:74px}
.opt.showpct .pctfill{
  position:absolute; left:0; top:0; bottom:0; z-index:0;
  background:rgba(255,255,255,.3); border-right:2px solid rgba(255,255,255,.55);
  transition:width .55s cubic-bezier(.2,.9,.3,1);
  animation:pctGrow .55s cubic-bezier(.2,.9,.3,1);
}
@keyframes pctGrow{from{width:0}}
.opt.showpct .shape,.opt.showpct .lbl{position:relative; z-index:2}
.opt.showpct .pcttag{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:3;
  text-align:right; line-height:1.05; pointer-events:none;
}
.opt.showpct .pcttag b{display:block; font-family:var(--font-m); font-size:1.12rem; font-weight:700}
.opt.showpct .pcttag small{display:block; font-size:.62rem; font-weight:800; opacity:.75;
  letter-spacing:.04em; white-space:nowrap}

/* image wale option me tag upar-daayein */
.opt.has-img.showpct{padding-right:12px}
.opt.has-img.showpct .pcttag{top:8px; right:8px; transform:none;
  background:rgba(0,0,0,.42); padding:3px 8px; border-radius:9px}

/* wrong/right ke saath bhi bar dikhe */
.opt.wrong.showpct .pctfill{background:rgba(255,255,255,.18)}
.opt.right.showpct .pctfill{background:rgba(255,255,255,.34)}

@media (max-width:760px){
  .opt.showpct{padding-right:62px}
  .opt.showpct .pcttag b{font-size:.98rem}
}
@media (max-width:480px){
  .opt.showpct{padding-right:56px}
  .opt.showpct .pcttag b{font-size:.9rem}
  .opt.showpct .pcttag small{font-size:.58rem}
}

/* =====================================================================
   HOST: PIN + QR card — quiz chalte waqt bhi hamesha dikhta hai
   ===================================================================== */
.joincard{
  position:fixed; left:16px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:60;
  background:rgba(26,17,56,.96); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.85); backdrop-filter:blur(10px);
  padding:12px 14px 11px; text-align:center; transition:all .2s ease;
}
.jc-tog{position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:8px;
  background:rgba(255,255,255,.09); border:1px solid var(--line); color:var(--paper);
  cursor:pointer; font-size:.7rem; line-height:1; touch-action:manipulation; padding:0}
.jc-lbl{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  font-weight:800; margin-bottom:2px}
.jc-pin{font-family:var(--font-m); font-size:1.55rem; font-weight:700; color:var(--mango);
  letter-spacing:.12em; line-height:1.15; margin-bottom:8px}
.jc-qr{background:#fff; border-radius:10px; padding:6px; display:inline-block; line-height:0}
.jc-qr img,.jc-qr canvas{display:block}
.jc-note{font-size:.62rem; color:var(--muted); font-weight:700; margin-top:7px; word-break:break-all;
  max-width:140px}
.jc-mini{display:none; align-items:center; gap:7px}
.jc-mini span{font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:800}
.jc-mini b{font-family:var(--font-m); font-size:1.05rem; color:var(--mango); letter-spacing:.08em}

.joincard.small{padding:9px 12px}
.joincard.small .jc-in{display:none}
.joincard.small .jc-mini{display:flex}
.joincard.small .jc-tog{position:static; margin-left:6px; width:22px; height:22px}
.joincard.small{display:flex; align-items:center}

/* =====================================================================
   DASHBOARD: PIN + QR popup
   ===================================================================== */
.qr-scrim{position:fixed; inset:0; background:rgba(6,3,18,.66); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:150}
.qr-scrim.open{opacity:1; pointer-events:auto}
.qr-pop{position:fixed; left:50%; top:50%; z-index:155; width:min(300px, calc(100vw - 32px));
  transform:translate(-50%,-46%) scale(.96); opacity:0; pointer-events:none;
  transition:transform .2s cubic-bezier(.2,.9,.3,1), opacity .2s ease;
  background:#1A1138; border:1px solid var(--line); border-radius:22px; padding:20px; text-align:center;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.9)}
.qr-pop.open{transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto}
.qr-pop .jc-pin{font-size:2.1rem; margin-bottom:12px}
.qr-pop .jc-note{max-width:none; font-size:.66rem}
.qr-pop .row{gap:8px}

@media (max-width:760px){
  .joincard{left:10px; bottom:calc(70px + env(safe-area-inset-bottom)); padding:9px 11px}
  .jc-pin{font-size:1.25rem; margin-bottom:6px}
  .jc-qr{padding:4px}
  .jc-qr img,.jc-qr canvas{width:88px !important; height:88px !important}
  .jc-note{display:none}
}
@media (max-width:480px){
  .joincard{left:8px; bottom:calc(66px + env(safe-area-inset-bottom))}
  .jc-qr img,.jc-qr canvas{width:74px !important; height:74px !important}
}

/* FAB me SVG icon */
.fab #fabIcon{display:grid; place-items:center; width:26px; height:26px}
.fab svg{width:26px; height:26px; display:block}
@media (max-width:760px){ .fab svg,.fab #fabIcon{width:23px; height:23px} }
body.compact .fab svg,body.compact .fab #fabIcon{width:20px; height:20px}

/* average time chip */
.bchip.tchip{background:rgba(76,201,255,.16); color:var(--sky); border-color:rgba(76,201,255,.42);
  font-family:var(--font-m)}

/* =====================================================================
   JOIN: photo picker
   ===================================================================== */
.avpick{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.avprev{width:72px; height:72px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(255,61,138,.3),rgba(76,201,255,.25));
  border:2px solid var(--line); font-size:2rem; background-size:cover; background-position:center;
  overflow:hidden}
.avprev.has{border-color:var(--mint); box-shadow:0 0 0 3px rgba(22,224,160,.25)}
.avbtns{display:flex; flex-direction:column; gap:7px; flex:1 1 auto; min-width:150px}
.avbtns .btn{cursor:pointer; text-align:center}

/* leaderboard/avatars me photo */
.av.photo{background-size:cover !important; background-position:center; color:transparent}
.av.emo{background:rgba(255,255,255,.1) !important; font-size:1.05rem}

/* =====================================================================
   WINNERS REVEAL — ribbon + balloon + confetti
   ===================================================================== */
.winwrap{position:fixed; inset:0; z-index:160; background:radial-gradient(60rem 40rem at 50% 0%, #2A1B5E, #120B2C 70%);
  opacity:0; pointer-events:none; transition:opacity .3s ease; overflow:hidden;
  display:flex; flex-direction:column}
.winwrap.open{opacity:1; pointer-events:auto}
.win-head{position:relative; z-index:5; text-align:center; padding:22px 16px 6px}
.win-head h1{font-size:clamp(1.6rem,6vw,2.6rem); margin:0 0 4px;
  background:linear-gradient(100deg,#FFB020,#FF3D8A,#4CC9FF); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.win-head p{color:var(--muted); font-weight:700; margin:0; font-size:.9rem}
.win-x{position:absolute; right:14px; top:14px; background:rgba(255,255,255,.1); border:1px solid var(--line);
  color:var(--paper); border-radius:12px; padding:9px 13px; cursor:pointer; z-index:8; touch-action:manipulation}
.win-body{position:relative; z-index:5; flex:1; overflow-y:auto;
  padding:10px 16px calc(28px + env(safe-area-inset-bottom))}

/* podium */
.podium{display:flex; align-items:flex-end; justify-content:center; gap:12px; margin:14px auto 26px;
  max-width:560px}
.pod{flex:1 1 0; text-align:center; animation:podRise .7s cubic-bezier(.2,.9,.3,1) both}
.pod:nth-child(1){animation-delay:.35s} .pod:nth-child(2){animation-delay:.1s} .pod:nth-child(3){animation-delay:.55s}
@keyframes podRise{from{opacity:0; transform:translateY(40px)}to{opacity:1; transform:none}}
.pod .face{width:64px; height:64px; border-radius:50%; margin:0 auto 8px; display:grid; place-items:center;
  font-size:1.7rem; font-weight:800; color:#fff; background-size:cover; background-position:center;
  border:3px solid rgba(255,255,255,.35)}
.pod .nm{font-family:var(--font-d); font-weight:800; font-size:.95rem; margin-bottom:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pod .sc{font-family:var(--font-m); font-size:.9rem; color:var(--mint); font-weight:700}
.pod .avg{font-size:.68rem; color:var(--muted); font-weight:700}
.pod .bar{margin-top:9px; border-radius:14px 14px 0 0; display:grid; place-items:center;
  font-family:var(--font-d); font-size:1.6rem; font-weight:800; color:#1a1030}
.pod.p1 .bar{height:120px; background:linear-gradient(180deg,#FFD44D,#FFB020)}
.pod.p2 .bar{height:88px;  background:linear-gradient(180deg,#E3E8F0,#B9C2D0)}
.pod.p3 .bar{height:70px;  background:linear-gradient(180deg,#F0A868,#CE7B3C)}
.pod .medal{font-size:1.9rem; line-height:1; margin-bottom:4px}

/* baaki winners */
.winlist{max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:8px}
.winrow{display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:15px;
  background:rgba(255,255,255,.07); border:1px solid var(--line);
  animation:slideIn .5s ease both}
.winrow .rk{font-family:var(--font-m); font-weight:700; width:30px; color:var(--mango)}
.winrow .face{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-size:1rem; font-weight:800; color:#fff; background-size:cover; background-position:center}
.winrow .nm{flex:1; min-width:0; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.winrow .nm small{display:block; font-size:.7rem; color:var(--muted); font-weight:700}
.winrow .sc{font-family:var(--font-m); font-weight:700; color:var(--mint)}
.winrow.me{border-color:rgba(22,224,160,.6); background:rgba(22,224,160,.12)}

/* balloons + ribbons */
.balloon{position:absolute; bottom:-140px; width:44px; height:56px; border-radius:50% 50% 48% 48%;
  z-index:1; opacity:.9; animation:floatUp linear infinite}
.balloon::after{content:''; position:absolute; left:50%; top:100%; width:1px; height:60px;
  background:rgba(255,255,255,.35)}
@keyframes floatUp{
  0%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-52vh) rotate(6deg)}
  100%{transform:translateY(-115vh) rotate(-4deg)}
}
.ribbon{position:absolute; top:-40px; width:9px; height:26px; z-index:2; border-radius:2px;
  animation:ribFall linear infinite}
@keyframes ribFall{
  0%{transform:translateY(0) rotateZ(0deg) rotateY(0deg); opacity:1}
  100%{transform:translateY(112vh) rotateZ(680deg) rotateY(720deg); opacity:.85}
}
@media(prefers-reduced-motion:reduce){ .balloon,.ribbon{display:none} }

@media (max-width:480px){
  .podium{gap:7px; margin-bottom:20px}
  .pod .face{width:50px; height:50px; font-size:1.35rem}
  .pod .nm{font-size:.82rem}
  .pod.p1 .bar{height:92px} .pod.p2 .bar{height:68px} .pod.p3 .bar{height:54px}
  .pod .bar{font-size:1.25rem}
  .balloon{width:34px; height:44px}
}

/* leaderboard avatar: photo / emoji */
.brow .av.photo{background-size:cover !important; background-position:center; color:transparent; font-size:0}
.brow .av.emo{background:rgba(255,255,255,.12) !important; font-size:1.05rem}

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; max-width:1000px; margin:0 auto}
.ccards{display:grid; gap:11px}
.ccard{display:flex; align-items:flex-start; gap:13px; padding:15px 16px; border-radius:var(--r-m);
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  color:var(--paper); transition:transform .14s ease, border-color .18s ease}
a.ccard:hover{text-decoration:none; transform:translateY(-2px); border-color:rgba(255,61,138,.5)}
.ccard .ic{flex:0 0 auto; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  font-size:1.2rem; background:rgba(255,255,255,.08); border:1px solid var(--line)}
.ccard b{display:block; font-family:var(--font-d); font-size:1rem; margin-bottom:2px}
.ccard small{display:block; color:var(--muted); font-size:.86rem; font-weight:600; line-height:1.55;
  overflow-wrap:anywhere}
.ccard.wa .ic{background:rgba(37,211,102,.18); border-color:rgba(37,211,102,.45); color:#25D366}
.cmap{margin-top:14px; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line); line-height:0}
.cmap iframe{width:100%; height:260px; border:0; filter:grayscale(.25) contrast(1.05)}

/* admin sidebar unread badge */
.menu-badge{margin-left:auto; background:var(--magenta); color:#fff; font-size:.68rem; font-weight:800;
  padding:2px 8px; border-radius:99px; min-width:20px; text-align:center}

@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr; gap:16px}
  .cmap iframe{height:210px}
}

/* =====================================================================
   ORGANIZATION / COACHING FLASH — quiz khatam hone par
   ===================================================================== */
.orgflash{
  text-align:center; margin:0 auto 14px; padding:20px 22px; max-width:640px;
  border-radius:var(--r-l); position:relative; overflow:hidden;
  border:1px solid rgba(255,176,32,.35);
  background:
    radial-gradient(28rem 14rem at 50% 0%, rgba(255,176,32,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}
.orgflash::before{
  content:''; position:absolute; top:0; left:-60%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg);
}
.orgflash.go::before{ animation:orgShine 1.5s ease .35s 2 }
@keyframes orgShine{ from{left:-60%} to{left:115%} }

.of-eyebrow{display:block; font-size:.64rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:800; margin-bottom:6px}
.of-name{
  margin:0; font-family:var(--font-d); font-weight:800; line-height:1.15;
  font-size:clamp(1.5rem, 5.6vw, 2.6rem);
  background:linear-gradient(100deg,#FFB020,#FF3D8A 45%,#4CC9FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow-wrap:anywhere;
}
.of-sub{display:block; margin-top:6px; font-size:.88rem; font-weight:700; color:var(--muted)}
.orgflash.go .of-name{ animation:orgPop .7s cubic-bezier(.2,1.4,.4,1) both }
.orgflash.go .of-eyebrow{ animation:fadeIn .5s ease both }
.orgflash.go .of-sub{ animation:fadeIn .6s ease .25s both }
@keyframes orgPop{ 0%{opacity:0; transform:scale(.82) translateY(10px)} 100%{opacity:1; transform:none} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* winners screen ka org badge */
.win-org{margin-bottom:8px}
.win-org span{display:block; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); font-weight:800}
.win-org b{display:block; font-family:var(--font-d); font-size:clamp(1.05rem,3.6vw,1.5rem);
  color:var(--mango); margin-top:2px; overflow-wrap:anywhere}

@media (max-width:480px){
  .orgflash{padding:16px 14px; margin-bottom:12px}
  .of-eyebrow{letter-spacing:.2em}
}

/* =====================================================================
   FOOTER LINKS  +  DOC PAGES (terms / privacy)
   ===================================================================== */
.foot-links{display:flex; flex-wrap:wrap; gap:6px 0; align-items:center; justify-content:flex-end}
.foot-links a{padding:4px 12px; position:relative; white-space:nowrap}
.foot-links a + a::before{content:'·'; position:absolute; left:-2px; opacity:.45; pointer-events:none}
.foot-links .foot-admin{color:var(--muted); opacity:.75}
.foot-links .foot-admin:hover{color:var(--mango); opacity:1}

/* legal / info pages */
.doc{line-height:1.8; font-size:.95rem}
.doc > *:first-child{margin-top:0}
.doc > *:last-child{margin-bottom:0}
.doc h2{font-size:1.35rem; margin:26px 0 10px; color:var(--paper)}
.doc h3{font-size:1.12rem; margin:24px 0 8px; color:var(--mango);
  padding-bottom:6px; border-bottom:1px solid var(--line)}
.doc h4{font-size:1rem; margin:18px 0 6px; color:var(--sky)}
.doc p{margin:0 0 12px; color:var(--paper); opacity:.92}
.doc ul,.doc ol{margin:0 0 14px; padding-left:22px}
.doc li{margin-bottom:6px; opacity:.92}
.doc strong{color:var(--paper)}
.doc a{color:var(--sky); text-decoration:underline; text-underline-offset:3px}
.doc code{font-family:var(--font-m); font-size:.86em; background:rgba(255,255,255,.09);
  padding:2px 6px; border-radius:6px}

@media (max-width:760px){
  .foot-links{justify-content:center}
  .foot-links a{padding:6px 10px; font-size:.86rem}
  .doc{font-size:.92rem; line-height:1.75}
  .doc h2{font-size:1.2rem} .doc h3{font-size:1.03rem}
}

/* =====================================================================
   PRICING PAGE
   ===================================================================== */
.pricegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;
  max-width:1040px; margin:0 auto; align-items:stretch}
.pcard{position:relative; display:flex; flex-direction:column; padding:26px 24px;
  border:1px solid var(--line); border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  transition:transform .16s ease, border-color .2s ease}
.pcard:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.22)}
.pcard.hot{border-color:rgba(255,176,32,.55);
  box-shadow:0 20px 50px -24px rgba(255,176,32,.55)}
.pcard h3{font-size:1.45rem; margin:10px 0 6px}
.phot{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:linear-gradient(100deg,var(--mango),#FF8A3D); color:#331B00;
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 14px; border-radius:99px; white-space:nowrap}
.pprice{font-family:var(--font-m); font-size:2.5rem; font-weight:700; color:var(--mango);
  line-height:1.05; margin-bottom:6px}
.pprice small{display:block; font-family:var(--font-b); font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.pfeat{list-style:none; padding:0; margin:0 0 20px; flex:1}
.pfeat li{position:relative; padding:7px 0 7px 26px; font-size:.9rem; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.06)}
.pfeat li:last-child{border-bottom:none}
.pfeat li::before{content:'✓'; position:absolute; left:0; top:7px; color:var(--mint); font-weight:800}

@media (max-width:760px){
  .pricegrid{grid-template-columns:1fr; gap:22px}
  .pcard{padding:22px 18px}
  .pprice{font-size:2.1rem}
}

/* =====================================================================
   DASHBOARD: My plan & billing card
   ===================================================================== */
.plancard{display:flex; gap:22px; align-items:stretch; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-l); padding:20px 22px; margin-bottom:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.028))}
.plancard.pro{border-color:rgba(255,176,32,.4);
  background:linear-gradient(180deg,rgba(255,176,32,.12),rgba(255,255,255,.03))}
.pc-main{flex:1 1 300px; min-width:0}
.pc-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.pc-head .eyebrow{margin:0}
.pc-num{font-size:.86rem; color:var(--muted); font-weight:700; margin-bottom:8px}
.pc-num b{font-family:var(--font-d); font-size:1.7rem; color:var(--paper); line-height:1}
.pc-num span{display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-top:2px}
.pc-bar{height:10px; border-radius:99px; background:rgba(255,255,255,.1);
  border:1px solid var(--line); overflow:hidden}
.pc-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--mint),#4CC9FF);
  transition:width .5s ease}
.pc-fill.warn{background:linear-gradient(90deg,var(--mango),#FF8A3D)}
.pc-fill.full{background:linear-gradient(90deg,var(--magenta),#FF7A3D)}
.pc-left{margin-top:8px; font-size:.84rem; color:var(--muted); font-weight:600}
.pc-side{flex:0 0 auto; display:flex; flex-direction:column; gap:8px; justify-content:center;
  min-width:190px; padding-left:22px; border-left:1px solid var(--line)}
.pc-exp{text-align:center; margin-bottom:4px}
.pc-exp .eyebrow{margin:0 auto 4px}
.pc-exp b{display:block; font-family:var(--font-d); font-size:1.15rem}
.pc-exp .badge,.pc-exp .mini{margin-top:4px; display:inline-block}

@media (max-width:760px){
  .plancard{padding:16px; gap:14px}
  .pc-side{padding-left:0; border-left:none; border-top:1px solid var(--line);
    padding-top:14px; width:100%; min-width:0}
  .pc-num b{font-size:1.45rem}
}

/* =====================================================================
   HOME: floating / split screen feature bricks
   ===================================================================== */
.fbricks{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;
  max-width:1060px; margin:0 auto}
.fbrick{position:relative; padding:24px 22px; border-radius:var(--r-l);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  transition:transform .16s ease, border-color .2s ease}
.fbrick:hover{transform:translateY(-3px); border-color:rgba(76,201,255,.4)}
.fbrick .fic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-size:1.5rem; margin-bottom:12px;
  background:linear-gradient(135deg,rgba(255,61,138,.28),rgba(76,201,255,.22));
  border:1px solid var(--line)}
.fbrick .ftag{display:inline-block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--mint); background:rgba(22,224,160,.14);
  border:1px solid rgba(22,224,160,.35); padding:3px 10px; border-radius:99px; margin-bottom:8px}
.fbrick h3{font-size:1.2rem; margin:0 0 8px}
.fbrick p{color:var(--muted); font-size:.92rem; line-height:1.65; margin:0 0 10px}
.fbrick ul{margin:0; padding-left:18px; font-size:.87rem; line-height:1.7; color:var(--muted)}
.fbrick li{margin-bottom:5px}
.fbrick b{color:var(--paper)}

@media (max-width:760px){
  .fbricks{grid-template-columns:1fr}
  .fbrick{padding:20px 17px}
}

/* OTP input */
.otpin{font-family:var(--font-m); font-size:1.9rem; font-weight:700; letter-spacing:.5em;
  text-align:center; padding:14px 8px 14px 22px; color:var(--mint)}
.otpin::placeholder{color:rgba(255,255,255,.18); letter-spacing:.5em}

/* =====================================================================
   USER CHIP DROPDOWN  (naam par click -> Profile / Billing / Logout)
   ===================================================================== */
.userdrop{position:relative; flex:0 0 auto}

.userdrop .userchip{
  display:flex; align-items:center; gap:9px; cursor:pointer; touch-action:manipulation;
  background:rgba(255,255,255,.08); border:1px solid var(--line); border-radius:99px;
  padding:5px 13px 5px 5px; color:var(--paper); font:inherit; font-weight:800; font-size:.9rem;
  transition:background .16s ease, border-color .16s ease;
}
.userdrop .userchip:hover{background:rgba(255,255,255,.14)}
.userdrop.open .userchip{background:rgba(255,61,138,.2); border-color:rgba(255,61,138,.5)}
.userdrop .userchip .av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:.7rem; font-weight:800; color:#fff; flex:0 0 auto;
  background:linear-gradient(135deg,var(--grape),var(--sky))}
.userdrop .unm{max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ucaret{font-size:.62rem; opacity:.7; transition:transform .2s ease}
.userdrop.open .ucaret{transform:rotate(180deg)}

.drop-menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:120;
  min-width:246px; padding:8px; border-radius:16px;
  background:#1F1545; border:1px solid var(--line);
  box-shadow:0 22px 50px -16px rgba(0,0,0,.85);
  opacity:0; pointer-events:none; transform:translateY(-8px) scale(.97);
  transition:opacity .16s ease, transform .16s cubic-bezier(.2,.9,.3,1);
}
.userdrop.open .drop-menu{opacity:1; pointer-events:auto; transform:none}
.drop-menu::before{content:''; position:absolute; right:20px; top:-6px; width:11px; height:11px;
  background:#1F1545; border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg)}

.drop-head{display:flex; align-items:center; gap:11px; padding:10px 11px 12px;
  border-bottom:1px solid var(--line); margin-bottom:6px}
.drop-head .av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-size:.82rem; font-weight:800; color:#fff; flex:0 0 auto;
  background:linear-gradient(135deg,var(--grape),var(--sky))}
.dh-txt{min-width:0}
.dh-txt b{display:block; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dh-txt small{display:block; font-size:.74rem; color:var(--muted); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px}

.drop-menu a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px;
  color:var(--paper); font-weight:700; font-size:.9rem; opacity:.92}
.drop-menu a:hover{background:rgba(255,255,255,.09); opacity:1; text-decoration:none}
.drop-menu a .di{width:20px; text-align:center; font-size:.95rem; flex:0 0 auto}
.drop-menu a.dz{color:#FF8FB6}
.drop-menu a.dz:hover{background:rgba(255,61,138,.14)}
.drop-sep{height:1px; background:var(--line); margin:6px 4px}

/* ---------- mobile drawer me dropdown nahi, seedha list ---------- */
@media (max-width:760px){
  .userdrop{width:100%; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
  .userdrop .userchip{display:none}
  .drop-menu{position:static; opacity:1; pointer-events:auto; transform:none;
    min-width:0; width:100%; padding:0; background:transparent; border:none; box-shadow:none}
  .drop-menu::before{display:none}
  .drop-head{padding:4px 10px 12px}
  .drop-menu a{padding:13px 14px; font-size:1rem; border-radius:13px}
}