/* MCQ Practice Portal — COOL theme (light aqua/slate + cyan-teal; dark deep blue-slate)
   Palette values copied from the reference theme.css. */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme:light;
  --bg:#edf4f6; --surface:#ffffff; --surface-alt:#e1edf1;
  --text:#17333f; --dim:#52707d; --border:#c9dde5;
  --accent:#0e7490; --accent-strong:#155e75;
  --green:#0f766e; --wa:#22c55e; --danger:#dc2626;
  --amber-bg:#fef3c7; --amber-text:#92400e;
  --offer-accent:#d97706; --offer-accent-deep:#b45309; --offer-expiry:#9a6200;
  --radius:14px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a151d; --surface:#10222d; --surface-alt:#18303f;
  --text:#e9f4f8; --dim:#a3bcc7; --border:#23424f;
  --accent:#38bdf8; --accent-strong:#7dd3fc;
  --green:#2dd4bf; --wa:#22c55e; --danger:#f87171;
  --amber-bg:#3a3413; --amber-text:#fcd34d;
  --offer-expiry:#f0b44a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Mukta",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5;
}
a{color:var(--accent-strong); text-decoration:none}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit; font-size:16px; color:var(--text)}
img{max-width:100%}

/* ---------- watermark (student screens only) ---------- */
.wm{position:fixed; inset:0; z-index:45; overflow:hidden; pointer-events:none}
.wm-inner{position:absolute; left:50%; top:50%; width:160%; height:160%;
  transform:translate(-50%,-50%) rotate(-24deg);
  display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; opacity:.05}
.wm-row{display:flex; align-items:center; justify-content:space-around; white-space:nowrap}
.wm-row span{padding:0 24px; font-size:24px; font-weight:800; letter-spacing:.05em; color:var(--text)}

/* ---------- header / nav ---------- */
.app-header{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--border)}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); min-width:0}
.brand-badge{display:flex; width:40px; height:40px; flex-shrink:0; align-items:center; justify-content:center;
  border-radius:12px; background:var(--accent); color:#fff; font-size:20px; font-weight:800}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-text b{font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-text small{color:var(--dim); font-weight:600}
.header-actions{display:flex; align-items:center; gap:8px}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:18px}
.wallet-chip{display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:999px;
  background:var(--surface-alt); border:1px solid var(--border); color:var(--text); font-weight:800}
/* Batch 45: header Profile button — hamesha ASLI GOLA (radius 50%, photo cover)
   aur beech-screen Profile CARD (modal). Purana dropdown panel (Batch 32) hata. */
.profile-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto;
  border-radius:50%; overflow:hidden; border:2px solid var(--border); color:#fff; font-size:17px; font-weight:800; cursor:pointer; padding:0}
.profile-btn img{width:100%; height:100%; object-fit:cover; display:block}
.profile-overlay{position:fixed; inset:0; z-index:90; background:rgba(2,22,38,.55);
  display:flex; align-items:center; justify-content:center; padding:16px}
.profile-overlay[hidden]{display:none}
.profile-card{position:relative; width:400px; max-width:94vw; max-height:92vh; overflow:auto;
  background:var(--surface); border-radius:22px; box-shadow:0 24px 60px rgba(2,22,38,.35)}
.pm-close{position:absolute; top:10px; right:10px; z-index:3; width:32px; height:32px; border-radius:50%;
  border:0; background:rgba(255,255,255,.88); color:#0f2f42; font-size:15px; font-weight:800; cursor:pointer}
.pm-banner{height:118px; position:relative}
.pm-banner-male{background:linear-gradient(120deg,#1d4ed8,#2563eb)}
.pm-banner-male::after{content:''; position:absolute; left:-10%; right:-10%; bottom:-30px; height:56px; background:#f59e0b; border-radius:50%}
.pm-banner-female{background:linear-gradient(120deg,#2563eb,#06b6d4)}
.pm-banner-other{background:linear-gradient(120deg,#0f2f42,#155e75)}
.pm-photo-wrap{position:absolute; left:50%; bottom:0; transform:translate(-50%,50%); z-index:2; width:112px; height:112px}
.pm-photo{width:112px; height:112px; border-radius:50%; border:4px solid #fff; box-shadow:0 8px 22px rgba(2,22,38,.28);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:42px; font-weight:800; overflow:hidden; background:var(--surface-alt)}
.pm-photo img{width:100%; height:100%; object-fit:cover; display:block}
.pm-photo-form{position:absolute; right:-4px; bottom:2px; margin:0}
.pm-camera{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:#2563eb; border:2px solid #fff; font-size:15px; cursor:pointer; box-shadow:0 4px 10px rgba(2,22,38,.3)}
.pm-body{padding:72px 18px 18px}
.pm-rows{background:var(--surface-alt); border-radius:16px; padding:6px 14px; margin-bottom:14px}
.pm-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border)}
.pm-row:last-child{border-bottom:0}
.pm-ic{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto; border-radius:50%; background:var(--surface); font-size:18px}
.pm-meta{display:flex; flex-direction:column; min-width:0}
.pm-meta small{color:var(--dim); font-weight:700; font-size:12px}
.pm-meta b{font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pm-edit{padding:13px; font-size:16px; border-radius:999px}
.pm-score{margin-top:10px; padding:12px; border-radius:999px}
.pm-logout{margin-top:10px; padding:12px; border-radius:999px; border:1.5px solid var(--danger); color:var(--danger); background:transparent}
.profile-edit-card{max-width:560px}
/* Batch 48: Feedback popup (exit par, 5vi visit par) — PrepMe247-style sheet */
.fb-overlay{position:fixed; inset:0; z-index:96; background:rgba(2,22,38,.55);
  display:flex; align-items:center; justify-content:center; padding:16px}
.fb-overlay[hidden]{display:none}
.fb-card{position:relative; width:430px; max-width:94vw; max-height:92vh; overflow:auto;
  background:var(--surface); border-radius:20px; padding:18px; box-shadow:0 24px 60px rgba(2,22,38,.35)}
.fb-head{display:flex; align-items:center; justify-content:space-between; font-size:17px; font-weight:800; margin-bottom:6px}
.fb-x{width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--surface-alt); cursor:pointer; font-size:14px; font-weight:800; color:var(--text)}
.fb-q{margin:6px 0 12px; font-size:19px}
.fb-moods{display:flex; gap:8px; justify-content:space-between; margin-bottom:12px}
.fb-mood{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px;
  border:2px solid var(--border); border-radius:14px; background:var(--surface-alt); cursor:pointer; color:var(--text)}
.fb-mood .fb-emoji{font-size:26px; line-height:1}
.fb-mood small{font-weight:700; font-size:11px}
.fb-mood.sel{border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.35); background:var(--surface)}
.fb-moods.fb-error .fb-mood{border-color:var(--danger)}
.fb-moods.fb-error{animation:fbShake .3s ease 1}
@keyframes fbShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.fb-tags-label{font-weight:700; margin:0 0 8px}
.fb-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px}
.fb-chip{border:1.5px solid var(--border); background:var(--surface-alt); color:var(--text);
  border-radius:999px; padding:7px 12px; font-weight:600; font-size:13.5px; cursor:pointer}
.fb-chip.sel{background:#0e7490; border-color:#0e7490; color:#fff}
.fb-card textarea{width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:12px;
  padding:10px 12px; font:inherit; background:var(--surface); color:var(--text); resize:vertical}
.fb-counter{text-align:right; color:var(--dim); font-size:12.5px; font-weight:700; margin:4px 0 10px}
.fb-thanks{text-align:center; font-weight:800; color:var(--green); font-size:16px; margin:8px 0}
.fb-send{padding:13px; font-size:16px; border-radius:999px}
.fb-later{display:block; margin:10px auto 0; background:none; border:0; color:var(--dim);
  font-weight:700; font-size:14.5px; cursor:pointer; text-decoration:underline}
/* Batch 50: Admin Mode (impersonation) banner — student side ki har page
   ke sabse upar chipki hui, nazar-andaz na ho aisi patti */
.imp-banner{position:sticky; top:0; z-index:120; display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; padding:9px 14px; background:#b45309; color:#fff; font-weight:700; font-size:14.5px;
  box-shadow:0 4px 14px rgba(2,22,38,.25)}
.imp-banner b{font-weight:800}
.imp-exit-btn{background:#fff; color:#92400e; border:0; font-weight:800; white-space:nowrap}
.imp-exit-btn:hover{background:#fef3c7}
/* Batch 51: Admin Users — filter bar, Actions column, Delete confirm */
.users-filter{display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-bottom:12px}
.users-filter label{display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:700; color:var(--dim)}
.users-filter select,.users-filter input[type=date]{padding:7px 8px; border:1px solid var(--border);
  border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:14px}
.btn-danger{background:#dc2626; color:#fff; border:0}
.btn-danger:hover{background:#b91c1c}
.user-actions{display:flex; flex-direction:column; gap:6px; align-items:stretch; min-width:118px}
.del-confirm{border:1.5px solid #dc2626; background:rgba(220,38,38,.07); border-radius:10px; padding:8px}
.del-confirm[hidden]{display:none}
.del-confirm p{margin:0 0 8px; font-size:13px; font-weight:600}
.del-confirm .dc-btns{display:flex; gap:6px}
/* Batch 49: Exam Request form (feedback wali hi sheet) + Target-picker search */
.er-note{font-weight:600; color:var(--dim); margin:2px 0 12px}
.er-error{color:var(--danger); font-weight:700; margin:6px 0}
.er-open-btn{white-space:nowrap}
.tgt-search{width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:10px;
  padding:9px 12px; font:inherit; background:var(--surface); color:var(--text); margin-bottom:8px}
.tgt-nomatch{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px;
  padding:10px 12px; border:1.5px dashed var(--border); border-radius:10px; font-weight:600}
.tgt-nomatch[hidden]{display:none}
.pm-meta b.pm-wrap{white-space:normal; text-overflow:clip; overflow:visible}
.target-checks{display:grid; gap:6px; max-height:230px; overflow:auto; padding:2px 0}
.tgt-check{display:flex; align-items:center; gap:9px; background:var(--surface-alt); border:1px solid var(--border); border-radius:10px; padding:9px 11px; font-weight:600; cursor:pointer}
.tgt-check input{width:17px; height:17px; flex:0 0 auto}
.pe-photo-row{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.pe-photo{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:800; overflow:hidden; flex:0 0 auto; background:var(--surface-alt)}
.pe-photo img{width:100%; height:100%; object-fit:cover; display:block}
/* Batch 45: podium / rank avatars me bhi photo wahi kram se (img gol cover) */
.mtp-avatar.avatar-has-photo, .lb-avatar.avatar-has-photo{overflow:hidden; padding:0}
.mtp-avatar img, .lb-avatar img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex;
  background:var(--surface); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 2px 7px;
  color:var(--dim); font-size:12px; font-weight:700}
.bottom-nav a.active{color:var(--accent)}
.bn-icon{font-size:27px; line-height:1} /* Batch 23: bottom-nav icon BADE (20px -> 27px); label 12px hi — anupaat sahi, .page ka 96px bottom padding unchi bar ko sambhal leta hai */

.page{max-width:768px; margin:0 auto; padding:14px 14px 96px; position:relative; z-index:1}
.page-wide{max-width:1024px}

/* ---------- generic ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:14px}
.card h2,.card h3{margin-top:0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:999px;
  padding:10px 18px; font-weight:800; font-size:15px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); text-align:center}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-green{background:var(--green); border-color:var(--green); color:#fff}
.btn-wa{background:var(--wa); border-color:var(--wa); color:#fff}
/* Batch 35: referral share button ka do-line label (Share to Friend / Get 50000 Token) */
.share-2line{display:inline-flex; flex-direction:column; align-items:flex-start; text-align:left; line-height:1.15}
.share-2line .share-l1{display:block; font-weight:800}
.share-2line .share-l2{display:block; font-size:11.5px; font-weight:700; opacity:.92}
.btn-ghost{background:transparent}
/* Batch 43 (user): desktop Back button — inner pages ke upar-left. SIRF
   >=900px par dikhta hai; mobile (<900px) par bilkul NAHI (mobile jaisa hai waisa). */
.back-btn{display:none}
@media (min-width:900px){.back-btn{display:inline-flex; margin:0 0 10px}}
.btn-block{display:flex; width:100%}
.btn-sm{padding:6px 12px; font-size:13px}
.btn:disabled{opacity:.55; cursor:not-allowed}
.chip{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px;
  background:var(--surface-alt); color:var(--dim); font-size:12px; font-weight:700}
.chip-free{background:#0c2b25; color:#34d399}
:root:not([data-theme="dark"]) .chip-free{background:#d1fae5; color:#065f46}
.chip-lock{background:var(--amber-bg); color:var(--amber-text)}
/* Batch 28: Home exam-card meta pills — reference design (pastel pill, ghumavadar,
   gehra same-family text). .chip-free jaisa pattern: base = dark theme,
   :not([data-theme="dark"]) = light theme. */
.meta-pill{display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px;
  font-size:12.5px; font-weight:700; line-height:1.4; white-space:nowrap}
.meta-pill-green{background:#0c2b25; color:#34d399}
:root:not([data-theme="dark"]) .meta-pill-green{background:#e6f4ea; color:#137333}
.meta-pill-blue{background:#12283f; color:#7dd3fc}
:root:not([data-theme="dark"]) .meta-pill-blue{background:#e3ecfd; color:#1d4ed8}
.meta-pill-amber{background:var(--amber-bg); color:var(--amber-text)}
.muted{color:var(--dim)}
.small{font-size:13px}
.flash{max-width:768px; margin:12px auto 0; padding:10px 14px; border-radius:12px; font-weight:700; position:relative; z-index:1}
.flash-ok{background:#d1fae5; color:#065f46}
.flash-err{background:#fee2e2; color:#991b1b}
:root[data-theme="dark"] .flash-ok{background:#0c2b25; color:#6ee7b7}
:root[data-theme="dark"] .flash-err{background:#33151a; color:#fca5a5}
.field{margin-bottom:12px}
.field label{display:block; font-weight:700; margin-bottom:5px}
.field input[type=text],.field input[type=tel],.field input[type=password],.field input[type=number],
.field input[type=date],.field input[type=url],.field select,.field textarea{
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface)}
.field .hint{font-size:13px; color:var(--green); font-weight:600; margin-top:4px}
.progress-track{height:8px; border-radius:99px; background:var(--surface-alt); overflow:hidden}
.progress-fill{height:100%; background:var(--accent); border-radius:99px}
table.tbl{width:100%; border-collapse:collapse; font-size:14px}
table.tbl th,table.tbl td{border:1px solid var(--border); padding:7px 9px; text-align:left; vertical-align:top}
table.tbl th{background:var(--surface-alt)}

/* ---------- auth ---------- */
.auth-hero{border-radius:22px; background:linear-gradient(120deg,#0f2f42,#155e75); color:#fff; padding:26px 20px; margin-bottom:16px}
.auth-hero h1{margin:0 0 8px; font-size:clamp(26px,5vw,36px); font-weight:800; line-height:1.2}
.auth-hero p{margin:0; font-size:15.5px; line-height:1.55; opacity:.97}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.hero-chip{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); color:#fff;
  border-radius:999px; padding:5px 12px; font-size:13px; font-weight:700}
.tabs-row{display:flex; gap:8px; margin-bottom:14px}
.tabs-row button{flex:1; padding:10px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); font-weight:800; color:var(--dim)}
.tabs-row button.active{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- Batch 25: compact auth panel (login + signup dono) ----------
   Card ab CHHOTA hai: max-width 400px, beech me; padding 18px 20px;
   andar ke input/button thode chhote, fieldon ke beech ki doori kam.
   Hero (.auth-hero) bilkul aparivartit hai. */
.auth-card{max-width:400px; margin-left:auto; margin-right:auto; padding:18px 20px}
.auth-card h2{font-size:20px; margin:0 0 12px}
.auth-card .field{margin-bottom:9px}
.auth-card .field label{margin-bottom:4px}
.auth-card .field input[type=text],.auth-card .field input[type=tel],.auth-card .field input[type=password],
.auth-card .field input[type=number],.auth-card .field input[type=date],.auth-card .field input[type=url],
.auth-card .field select,.auth-card .field textarea{padding:9px 12px}
.auth-card .btn{padding:8px 16px}
.auth-tabs{max-width:400px; margin-left:auto; margin-right:auto}

/* ---------- Batch 25: guest sign-in popup (reference design) ----------
   Sirf GUEST ko dikhta hai — (a) session me pehli baar auth landing par,
   (b) koi login-wali action bounce ho tab. Pastel card dono theme me
   waisi hi dikhti hai (screenshot wali design), isliye andar ke rang
   theme-variables par nahi chhode gaye hain. */
.guest-popup-overlay{position:fixed; inset:0; z-index:90; background:rgba(4,20,28,.62);
  display:flex; align-items:center; justify-content:center; padding:18px}
.guest-popup{width:100%; max-width:380px; max-height:92vh; overflow:auto; border-radius:26px;
  padding:26px 20px 18px; text-align:center; color:#232946;
  background:linear-gradient(165deg,#fdf4ff 0%,#eef2ff 52%,#ffe4e6 100%);
  box-shadow:0 22px 60px rgba(0,0,0,.4)}
.gp-emoji{width:92px; height:92px; margin:2px auto 10px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:44px;
  background:linear-gradient(135deg,#7c3aed,#ec4899); box-shadow:0 10px 26px rgba(168,85,247,.45)}
.gp-oops{margin:0; font-size:34px; font-weight:900; line-height:1.15;
  background:linear-gradient(90deg,#7c3aed,#ec4899);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.gp-sub{margin:2px 0 14px; font-size:19px; font-weight:800; color:#232946}
.gp-benefits{background:#fff; border-radius:18px; padding:6px 14px; text-align:left;
  margin-bottom:16px; box-shadow:0 4px 16px rgba(35,41,70,.08)}
.gp-benefit{display:flex; align-items:center; gap:11px; padding:8px 0;
  font-weight:600; font-size:15px; color:#3c4257}
.gp-benefit + .gp-benefit{border-top:1px dashed #eceef5}
.gp-bicon{flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:19px; background:#f1efff}
.gp-signin{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:13px; border:none; border-radius:14px; cursor:pointer; text-decoration:none;
  background:linear-gradient(90deg,#6366f1,#a855f7 55%,#ec4899); color:#fff;
  font-size:17px; font-weight:800; box-shadow:0 10px 24px rgba(168,85,247,.4)}
.gp-signup-link{display:block; margin-top:12px; font-weight:800; font-size:15.5px;
  color:#7c3aed; text-decoration:underline}
.gp-later{display:block; margin:10px auto 2px; background:none; border:none; cursor:pointer;
  color:#6b7280; font-weight:700; font-size:15px; padding:4px 10px}

/* ---------- home sections ---------- */
.resume-banner{border:2px solid var(--accent); background:var(--surface); border-radius:18px; padding:14px 16px; margin-bottom:14px}
.daily-card{border-radius:20px; padding:16px; margin-bottom:14px; color:#fff;
  background:linear-gradient(120deg,#155e75,#0e7490 55%,#0f766e)}
.daily-card h2{margin:0 0 2px; font-size:19px}
.streak-badge{display:inline-flex; align-items:center; gap:5px; background:#f59e0b; color:#451a03;
  font-weight:800; border-radius:999px; padding:4px 12px; font-size:14px; margin-top:8px}
/* Batch 39 (user): Daily archive ab SIRF compact date-pill row hai —
   .archive-list/.archive-item (full-width rows) markup se HAT gaye (neeche
   ke .daily-archive/.day-chip rules istemal hote hain); purane rules yahan
   dormant pade hain, koi page unhe use NAHI karta. */
.archive-list{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.archive-item{display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(255,255,255,.14); border-radius:12px; padding:9px 12px; color:#fff}
.archive-item .btn{background:#fff; color:#155e75; border-color:#fff}
.daily-archive{margin-top:12px}
.daily-archive .chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.day-chip{display:inline-block; background:#fff; border:1px solid #fff;
  color:#155e75; font-weight:700; border-radius:999px; padding:7px 13px; font-size:.85rem; text-decoration:none; text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.18)}
.quick-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.quick-grid a{display:block; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px; color:var(--text); font-weight:800}
.quick-grid a small{display:block; color:var(--dim); font-weight:600; margin-top:2px}
/* Batch 11: quick card me title hamesha apni line par, sub-text uske neeche —
   desktop ki chaudi card par bhi dono chipakte nahi. */
.quick-grid .qc-title{display:block}
.quick-grid .qc-sub{display:block; color:var(--dim); font-weight:600; margin-top:2px; font-size:13px}
/* Batch 11: heading ki line me exam SEARCH bar — heading left, bar right
   (flex-grow); mobile par bar agli poori line me.
   Batch 36 (user): search ROW niche wale exam-grid ke barabar chaudi ho —
   isiliye heading-row, nomatch note aur grid teeno ek hi .exam-chooser
   wrapper me hain (sab container ki poori chaudi lete hain) aur search
   bar ka purana 520px cap (batch 23) HATA diya: bar row ki bachi hui
   poori jagah leta hai, grid ke right kinare tak.
   (Batch 23 ka 520px cap is batch se supersede ho gaya.) */
.exam-chooser{display:block; width:100%}
.exam-head-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 12px}
.exam-head-row h2{margin:0}
.exam-searchbar{flex:1 1 auto; display:flex; align-items:center; gap:9px; background:#fff;
  border:1px solid #dbe4ec; border-radius:999px; padding:5px 5px 5px 15px;
  box-shadow:0 3px 12px rgba(8,47,73,.10)}
.exam-searchbar .es-icon{flex:0 0 auto; font-size:16px; line-height:1}
.exam-searchbar .es-input{flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:15px; color:#0f172a; padding:8px 0}
.exam-searchbar .es-input::placeholder{color:#94a3b8}
.exam-searchbar .es-btn{flex:0 0 auto; border:0; cursor:pointer; background:#0a2a4d; color:#fff;
  font:inherit; font-weight:800; font-size:14.5px; border-radius:999px; padding:10px 18px; white-space:nowrap}
.exam-searchbar .es-btn:hover{background:#0d3a68}
.exam-nomatch{margin:0 0 12px; padding:11px 14px; border:1.5px dashed var(--border); border-radius:12px;
  background:var(--surface); color:var(--dim); font-weight:700}
.exam-nomatch[hidden]{display:none}
/* Batch 47 (user): mobile par search bar STACK hoga — "Explore Exams →"
   button input ke NEECHE apni poori line me; koi hissa screen se bahar
   kata NAHI. Desktop (>=900px) ka batch-36 layout bilkul aparivartit. */
@media (max-width:899px){
  .exam-searchbar{flex-basis:100%; max-width:none; flex-wrap:wrap; border-radius:22px; padding:8px}
  .exam-searchbar .es-input{flex:1 1 150px}
  .exam-searchbar .es-btn{flex:1 1 100%; margin-top:6px; text-align:center; padding:10px 18px; font-size:14.5px}
}
.exam-grid{display:flex; flex-direction:column; gap:12px}
/* Batch 47 (user): per-exam ACCENT rang card se HATA — ab har Home exam
   card par patli 3px RGB (rainbow gradient) border hai. Gradient border
   border-radius ke saath pakki technique se: transparent border +
   do-layer background (padding-box = card ka surface, border-box = RGB
   gradient). Dono theme (light/dark) me surface var se khud badalta hai.
   REFINEMENT (user): border har VISIT par alag — gradient ke rang
   --rgb-hue (0-359) se hue-shift hote hain aur disha --rgb-angle se;
   dono vars har page-load par random milte hain (PHP: layout ki inline
   style; preview: JS boot par)। Vars na hon to pehchan-wala RGB kram.
   (Exam-page ke header card ki accent border isse alag hai — aparivartit.) */
.exam-card{position:relative; display:block; border-radius:18px; padding:16px; color:var(--text);
  border:3px solid transparent;
  background:linear-gradient(var(--surface), var(--surface)) padding-box,
             linear-gradient(var(--rgb-angle, 90deg),
               hsl(calc(var(--rgb-hue, 0) + 4) 84% 60%),
               hsl(calc(var(--rgb-hue, 0) + 27) 95% 55%),
               hsl(calc(var(--rgb-hue, 0) + 48) 96% 55%),
               hsl(calc(var(--rgb-hue, 0) + 142) 71% 45%),
               hsl(calc(var(--rgb-hue, 0) + 217) 91% 60%),
               hsl(calc(var(--rgb-hue, 0) + 262) 89% 66%)) border-box}
.exam-card h3{margin:0 0 2px; font-size:19px}
.exam-card .tagline{color:var(--dim); font-weight:600; margin:0}
.exam-card .target-badge{display:inline-block; background:var(--amber-bg); color:var(--amber-text);
  font-size:12px; font-weight:800; border-radius:999px; padding:2px 9px; margin-bottom:6px}
.exam-date-chip{position:absolute; right:12px; bottom:12px; font-size:12px; font-weight:800;
  background:var(--surface-alt); border:1px solid var(--border); color:var(--accent-strong);
  border-radius:999px; padding:3px 10px}
.exam-card-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; padding-right:120px}
.stats-card{border-radius:20px; padding:20px 16px 16px; color:#fff; text-align:center;
  background:linear-gradient(120deg,#0f2f42,#155e75)}
.stats-card h2{margin:0 0 4px; font-size:20px}
.stats-sub{margin:0; font-size:13px; font-weight:600; opacity:.92}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px}
/* Scoped under .stats-card on purpose: the generic .stat-box rule further below
   (admin/report boxes, var(--surface)) must NOT override this — the footer
   leaderboard boxes stay translucent over the card's dark gradient in both themes. */
.stats-card .stat-box{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.35);
  border-radius:14px; padding:16px 6px 12px}
.stats-grid .num{font-size:30px; font-weight:800; line-height:1.1; color:#ffa726}
.stats-grid .lbl{font-size:12.5px; font-weight:700; color:#fff; margin-top:4px}
.stats-note{margin:14px 0 0; font-size:12.5px; opacity:.9}
.site-footer .stats-card{margin:0 0 20px; text-align:center}
@media (max-width:480px){
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:8px}
  .stats-card .stat-box{padding:12px 3px 10px}
  .stats-grid .num{font-size:23px}
  .stats-grid .lbl{font-size:11px}
}

/* ---------- exam page / set cards ---------- */
.countdown-banner{border-radius:16px; background:var(--surface-alt); border:1px solid var(--border);
  padding:12px 14px; font-weight:800; margin-bottom:14px}
.subject-block{margin-bottom:20px}
.subject-block>h2{font-size:19px; margin:0 0 10px}
.set-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; margin-bottom:10px; position:relative}
.set-card h3{margin:0 0 4px; font-size:16px; padding-right:110px}
.set-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.set-date-chip{position:absolute; right:12px; bottom:12px}
.syllabus-row{margin-bottom:8px}
.syllabus-row .lbl{display:flex; justify-content:space-between; font-weight:700; font-size:14px; margin-bottom:3px}

/* ---------- Batch 18: Full Sets (PYQ slider ke neeche, exam-level block) ----------
   Grid: mobile 1 card/row, >=900px 2/row, >=1200px 3/row.
   Set-1 (FREE) = live card (Start/Resume); Set 2–10 = sirf "Coming Soon". */
.full-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:4px}
@media (min-width:900px){.full-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.full-grid{grid-template-columns:repeat(3,1fr)}}
/* Batch 41 (user): Full Sets ka apna standalone section — PYQ accordion ke seedhe
   NEECHE, bina accordion khole hamesha dikhta hai (sabhi exam pages par). */
.full-sets-section{margin-top:18px}
.full-sets-title{margin:0 0 10px; font-size:19px}
.full-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px}
.full-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.full-top h3{margin:0; font-size:16px}
.fs-soon{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:var(--amber-bg); color:var(--amber-text); font-size:12px; font-weight:700; white-space:nowrap}
.fs-meta{margin:0; color:var(--dim); font-size:14px}
.fs-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto}
.fs-info{font-weight:800}
.fs-date{color:var(--dim); font-size:13px; font-weight:600}
.btn-resume{background:#f59e0b; border-color:#f59e0b; color:#fff}

/* ---------- PYQ strip / sliders ---------- */
/* Batch 17: slider WRAPPER hamesha BLOCK (column) layout — strip upar, nav-patti
   uske NEECHE. Wrapper par flex lag jaye to .slider-yearnav strip ke bagal me
   khadi lambi patti ban jati hai; isliye display yahan saaf taur par bandha hai. */
.auto-slider{display:block}
.pyq-slider{display:block}
.pyq-slider>.slider-yearnav{align-self:auto; height:auto}
.pyq-strip{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px;
  scrollbar-width:none; -ms-overflow-style:none}
.pyq-strip::-webkit-scrollbar{display:none; width:0; height:0}
/* Batch 4: PYQ card hamesha POORA dikhega — mobile par strip ki poori chaudi
   (1 card), desktop (>=900px) par aadhi chaudi (2 card). Aadha kata/peek karta
   card nahi. Chaudi strip ke viewport se banti hai, fixed px nahi.
   Batch 17: position:relative — warna card ke andar ki Exam Date chip
   (position:absolute) card ke bahar jaakar latakti thi. */
.pyq-card{flex:0 0 100%; scroll-snap-align:start; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:14px; position:relative}
@media (min-width:900px){.pyq-card{flex-basis:calc(50% - 5px)}}
.slider-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 6px}
.slider-btns{display:flex; gap:6px}
.slider-btns button{width:34px; height:34px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:16px; font-weight:800}
/* Batch 4: PYQ nav — strip ke NEECHE Pichla/Agla button, andar saal ka naam */
.slider-yearnav{display:flex; justify-content:space-between; gap:10px; margin-top:8px}
.year-btn{padding:9px 18px; border-radius:999px; border:1px solid var(--border); min-width:96px;
  background:var(--surface); color:var(--text); font-size:15px; font-weight:800; cursor:pointer}
.year-btn:disabled{opacity:.4; cursor:default}
.slider-progress{height:5px; border-radius:99px; background:var(--surface-alt); overflow:hidden; margin-top:2px}
.slider-progress span{display:block; height:100%; width:0; background:var(--accent)}
@keyframes slide-progress{from{width:0%}to{width:100%}}
.slide-anim{animation-name:slide-progress; animation-timing-function:linear; animation-fill-mode:forwards}

/* ---------- offers ---------- */
/* Batch 29: offer card ka apna DARK GOLDEN-ORANGE accent (--offer-accent) —
   global --accent se bilkul alag. Border, "Naya Offer" badge aur CTA button
   isi rang me; expiry gehra golden-brown. Purana marquee ticker hata diya. */
.offer-card{position:relative; overflow:hidden; border-radius:20px; border:2px solid var(--offer-accent);
  background:var(--surface); margin-bottom:14px}
/* Sirf 1 offer: card fullscreen NAHI phailta — max 600px, center me */
.offer-single{max-width:600px; margin-left:auto; margin-right:auto}
.offer-head{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.offer-badge{background:var(--offer-accent); color:#fff; font-weight:800; font-size:12.5px; padding:5px 12px; border-radius:999px; white-space:nowrap}
.offer-expiry{color:var(--offer-expiry); font-weight:800; font-size:13px; white-space:nowrap}
.offer-cta-wrap{text-align:center; margin-top:10px}
.offer-cta{background:linear-gradient(135deg,#e07f00,var(--offer-accent)); border-color:var(--offer-accent-deep); color:#fff; font-weight:800}
.offer-cta:hover{background:linear-gradient(135deg,#e07f00,var(--offer-accent-deep)); border-color:var(--offer-accent-deep); color:#fff}
/* Multi-offer slider: mobile 1 card, desktop (>=900px) 2 card saath-saath */
.offer-card .offer-slide{flex:0 0 100%}
@media (min-width:900px){ .offer-card .offer-slide{flex-basis:calc(50% - 5px)} }
.offer-body{padding:14px 16px}
.offer-body img{border-radius:12px; margin-bottom:10px; width:100%}
.offer-body h3{margin:0 0 4px}
.offer-dots{display:flex; gap:6px; justify-content:center; padding:0 0 12px}
.offer-dots button{width:9px; height:9px; border-radius:99px; border:none; background:var(--border); padding:0}
.offer-dots button.active{background:var(--offer-accent); width:24px}
.offer-counter{font-weight:800; color:var(--dim); font-size:13px}

/* ---------- Batch 31: Home user strip (offers ke theek neeche, logged-in only) ---------- */
.user-strip{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:14px 16px; margin-bottom:14px}
.user-strip .us-name{font-weight:800; font-size:17px; line-height:1.3}
.user-strip .us-meta{color:var(--dim); font-size:13px; font-weight:600; margin-top:2px}
.user-strip .us-btns{display:flex; gap:8px; flex-wrap:wrap}
.btn-gold{background:linear-gradient(135deg,#e07f00,var(--offer-accent)); border-color:var(--offer-accent-deep); color:#fff; font-weight:800}
.btn-gold:hover{background:linear-gradient(135deg,#e07f00,var(--offer-accent-deep)); border-color:var(--offer-accent-deep); color:#fff}
@media (max-width:560px){
  .user-strip{flex-direction:column; align-items:stretch}
  .user-strip .us-btns .btn{flex:1; white-space:nowrap}
}
.offer-progress{height:5px; background:var(--surface-alt)}
.offer-progress span{display:block; height:100%; background:var(--accent); width:0}
.offer-popup-overlay{position:fixed; inset:0; z-index:80; background:rgba(4,20,28,.62);
  display:flex; align-items:center; justify-content:center; padding:18px}
.offer-popup-overlay[hidden]{display:none}
.offer-popup{position:relative; width:100%; max-width:380px; background:var(--surface); color:var(--text);
  border-radius:22px; padding:20px 18px 16px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.35)}
.offer-popup img{border-radius:14px; margin-bottom:10px}
.offer-popup h3{margin:4px 0 6px}
.offer-popup-close{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-alt); color:var(--text); font-weight:800}
.offer-popup-progress{height:6px; border-radius:99px; background:var(--surface-alt); overflow:hidden; margin-top:14px}
.offer-popup-progress span{display:block; height:100%; background:var(--accent); width:100%}
@keyframes popup-progress{from{width:100%}to{width:0%}}
.offer-popup-count{font-size:12px; color:var(--dim); font-weight:700; margin:6px 0 0}

/* ---------- test engine ---------- */
.test-top{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border);
  padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px}
/* Test screen ka main column — pehle test.php me inline style tha, ab class me hai
   taaki batch 12 ka desktop-widening ispar bhi lag sake. Values bilkul wahi. */
.test-main{max-width:768px; margin:0 auto; position:relative; z-index:1}
.timer-chip{font-weight:800; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:999px; padding:6px 12px}
.timer-low{background:#fee2e2; color:#991b1b}
:root[data-theme="dark"] .timer-low{background:#33151a; color:#fca5a5}
.q-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:18px 16px; margin:14px}
.q-text{font-size:18px; font-weight:700; line-height:1.55}
/* Batch 27: prashn/vikalp images — test, report aur saved/wrong lists */
.q-img{display:block; max-width:100%; max-height:280px; object-fit:contain; border-radius:12px; margin:10px 0}
.q-img[hidden]{display:none}
.opt-img{max-width:46%; max-height:72px; object-fit:contain; border-radius:8px}
.opt-img-sm{max-width:52%; max-height:56px; object-fit:contain; border-radius:7px; vertical-align:middle; margin-left:8px}
.q-thumb{display:block; max-width:100%; max-height:110px; object-fit:contain; border-radius:9px; margin:7px 0}
.price-strike{text-decoration:line-through; opacity:.72}
.opt-btn{display:flex; width:100%; align-items:flex-start; gap:10px; text-align:left; margin-top:10px;
  padding:13px 14px; border-radius:14px; border:2px solid var(--border); background:var(--surface);
  color:var(--text); font-size:16px; font-weight:600}
.opt-btn .opt-letter{flex-shrink:0; width:28px; height:28px; border-radius:999px; background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px}
.opt-btn.selected{border-color:var(--accent); background:var(--surface-alt)}
.opt-btn.selected .opt-letter{background:var(--accent); color:#fff}
.test-nav{display:flex; gap:8px; padding:0 14px 90px; max-width:768px; margin:0 auto; flex-wrap:wrap}
.palette-overlay{position:fixed; inset:0; z-index:70; background:rgba(4,20,28,.55); display:flex; align-items:flex-end; justify-content:center}
.palette-overlay[hidden]{display:none}
.palette-sheet{background:var(--surface); color:var(--text); width:100%; max-width:560px; max-height:82vh; overflow:auto;
  border-radius:22px 22px 0 0; padding:18px}
.palette-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:8px; margin-top:10px}
.palette-grid button{height:46px; border-radius:12px; border:2px solid var(--border); background:var(--surface);
  color:var(--text); font-weight:800; position:relative}
.palette-grid button.answered{background:var(--green); border-color:var(--green); color:#fff}
.palette-grid button.marked::after{content:""; position:absolute; top:4px; right:4px; width:9px; height:9px;
  border-radius:99px; background:#f59e0b}
.palette-grid button.current{outline:3px solid var(--accent)}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:13px; font-weight:700; color:var(--dim); margin-top:12px}
.legend i{display:inline-block; width:13px; height:13px; border-radius:4px; margin-right:4px; vertical-align:-2px}
.modal-overlay{position:fixed; inset:0; z-index:75; background:rgba(4,20,28,.6); display:flex; align-items:center; justify-content:center; padding:18px}
.modal-overlay[hidden]{display:none}
.modal-box{background:var(--surface); color:var(--text); border-radius:20px; padding:20px; width:100%; max-width:400px}
.lang-toggle{display:flex; gap:6px}
.lang-toggle button{padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); font-weight:800; color:var(--dim)}
.lang-toggle button.active{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ---------- test screen (batch 5): upar tools patti, neeche actions ---------- */
.q-toprow{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.q-count{font-weight:800; color:var(--dim)}
.q-tools{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.test-actions{display:flex; gap:8px; align-items:stretch; margin-top:16px; flex-wrap:wrap}
.test-status{text-align:center; margin:12px 0 0; font-weight:700; color:var(--dim)}
.tr-note{color:var(--amber-text); font-weight:700; margin:6px 0 0}

/* ---------- bhasha chooser (test se pehle) ---------- */
.lang-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.lang-pick-btn{display:flex; flex-direction:column; gap:2px; align-items:center; padding:18px 10px;
  border:2px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text);
  text-decoration:none}
.lang-pick-btn:hover{border-color:var(--accent)}
.lang-pick-btn.active{border-color:var(--accent); background:var(--surface-alt);
  box-shadow:0 0 0 2px var(--accent) inset}
.lang-pick-name{font-size:22px; font-weight:800}
.lang-pick-sub{font-size:13px; color:var(--dim); font-weight:600}

/* ---------- report ---------- */
.score-hero{border-radius:20px; background:linear-gradient(120deg,#155e75,#0e7490); color:#fff; padding:20px 16px; text-align:center; margin-bottom:14px}
.score-hero .big{font-size:42px; font-weight:800; line-height:1.05}
.score-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.score-stats .card{margin:0; text-align:center; padding:12px 6px}
.score-stats .num{font-size:22px; font-weight:800}
.sol-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; margin-bottom:10px}
.sol-card.correct{border-left:6px solid var(--green)}
.sol-card.wrong{border-left:6px solid var(--danger)}
.sol-card.skipped{border-left:6px solid var(--border)}
.sol-opt{padding:7px 10px; border-radius:10px; margin-top:6px; font-weight:600; border:1px solid var(--border)}
.sol-opt.right{background:#d1fae5; border-color:#6ee7b7}
:root[data-theme="dark"] .sol-opt.right{background:#0c2b25}
.sol-opt.mine-wrong{background:#fee2e2; border-color:#fca5a5}
:root[data-theme="dark"] .sol-opt.mine-wrong{background:#33151a}
.vyakhya-box{margin-top:10px; background:var(--surface-alt); border:1px dashed var(--accent);
  border-radius:12px; padding:10px 12px}
.share-card{border-radius:20px; padding:18px; color:#fff; text-align:center; margin-bottom:14px;
  background:linear-gradient(135deg,#0f766e,#155e75)}
.share-card .big{font-size:34px; font-weight:800}

/* ---------- lists / wallet / rank ---------- */
.rank-me{border:2px solid var(--accent)}
.ledger-row{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border)}
.ledger-row:last-child{border-bottom:none}
.delta-plus{color:var(--green); font-weight:800}
.delta-minus{color:var(--danger); font-weight:800}
.ref-link-box{display:flex; gap:8px}
.ref-link-box input{flex:1; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-alt)}

/* ---------- blog ---------- */
.cat-chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips a{flex-shrink:0; padding:7px 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:700; font-size:14px}
.cat-chips a.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.blog-card{display:block; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; margin-bottom:12px; color:var(--text)}
.blog-card img{width:100%; height:170px; object-fit:cover; display:block}
.blog-card .bc-body{padding:13px 15px}
.blog-card h3{margin:0 0 4px; font-size:17px}
.blog-body img{max-width:100%; height:auto; border-radius:12px}
.blog-body video,.blog-body iframe{max-width:100%; border-radius:12px}
.blog-body blockquote{border-left:4px solid var(--accent); padding-left:12px; margin:8px 0; color:var(--dim)}
.blog-body pre{background:var(--surface-alt); padding:10px 12px; border-radius:10px; overflow-x:auto; font-size:13px}
.blog-body code{background:var(--surface-alt); padding:1px 5px; border-radius:6px; font-size:.9em}
.blog-body pre code{background:transparent; padding:0}
.blog-body hr{border:none; border-top:2px solid var(--border); margin:14px 0}
.blog-body table{border-collapse:collapse; max-width:100%}
.blog-body td,.blog-body th{border:1px solid var(--border); padding:6px 8px}

/* ---------- footer ---------- */
.site-footer{max-width:768px; margin:26px auto 0; padding:22px 14px 96px; position:relative; z-index:1}
/* Batch 16: safed gol footer box — brand column sabse chauda, phir 3 link column */
/* Batch 44 (user): divider line ab stats box ke UPAR NAHI — footer-box ke upar
   (stats box ke seedhe NEECHE) hai; .site-footer par border-top NAHI raha. */
.footer-box{background:var(--surface); border:1px solid var(--border); border-top:2px solid var(--accent); border-radius:18px; padding:20px;
  display:grid; grid-template-columns:1.7fr 2.6fr; gap:24px}
.footer-brand{display:block}
.footer-domain{font-size:19px; font-weight:800; margin:0}
.footer-tag{color:var(--dim); font-weight:600; margin:6px 0 0; font-size:14px; line-height:1.55}
.footer-domains{margin:12px 0 0; font-weight:700; font-size:14.5px}
.footer-links{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.footer-col h4{margin:0 0 9px; font-size:15.5px}
.footer-col a{display:block; padding:4px 0; font-weight:600; font-size:14.5px; color:var(--dim)}
.footer-col a:hover{color:var(--accent-strong)}
.footer-note{margin-top:18px; padding-top:14px; border-top:1px solid var(--border);
  text-align:center; font-size:12px; font-weight:600; color:var(--dim)}
.copyright-bar{margin-top:18px; border:2px solid var(--accent); background:var(--surface-alt);
  border-radius:16px; padding:12px 16px; text-align:center}
.copyright-bar p{margin:0; font-size:14px; font-weight:700; line-height:1.6}

/* ---------- info pages ---------- */
.info-hero{border-radius:22px; background:var(--accent); color:#fff; padding:22px 18px; margin-bottom:16px}
.info-hero h1{margin:0 0 4px; font-size:27px}
.info-hero p{margin:0; font-weight:600; opacity:.95}
details.faq-item{border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:var(--surface)}
details.faq-item summary{cursor:pointer; font-weight:800; list-style:none}
details.faq-item p{color:var(--dim); margin:8px 0 2px}

/* ---------- admin ---------- */
.admin-wrap{max-width:1024px}
/* Batch 26: tab bar ab WRAP hoti hai — pehle nowrap flex + overflow-x:auto
   tha aur scrollbar jaan-boojh kar chhupaya gaya tha (scrollbar-width:none +
   ::-webkit-scrollbar{display:none}). 12 pillon ki kul chaudi .admin-wrap
   (max 1024px) se zyada hai, isliye aakhiri tab (Media/Offers/Settings)
   kinare par "cut" dikhte the aur desktop par un tak pahunchne ka koi
   dikhai dene wala tareeka nahi tha. Ab tabs dusri line me aa jate hain —
   har viewport width par saare 12 tab poore dikhte aur tappable hain. */
.admin-tabs{display:flex; flex-wrap:wrap; gap:8px; padding-bottom:10px}
.admin-tabs a{flex-shrink:0; padding:8px 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:700; font-size:14px}
.admin-tabs a.active{background:var(--accent); color:#fff; border-color:var(--accent)}
/* Batch 26: chhoti screen par tab thode compact — wrap wali bar zyada unchi na ho */
@media (max-width:560px){.admin-tabs a{padding:7px 11px; font-size:13px}}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:14px}
.stat-box{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; text-align:center}
.stat-box .num{font-size:24px; font-weight:800}
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.media-item{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface)}
.media-item img{width:100%; height:90px; object-fit:cover; display:block}
.media-item .mi-body{padding:7px 8px; font-size:11px; word-break:break-all}
.rte-toolbar{display:flex; flex-wrap:wrap; gap:4px; border:1px solid var(--border); border-bottom:none;
  border-radius:12px 12px 0 0; padding:6px; background:var(--surface-alt)}
.rte-toolbar button,.rte-toolbar select{border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:8px; padding:5px 9px; font-size:13px; font-weight:700}
.rte-area{border:1px solid var(--border); border-radius:0 0 12px 12px; min-height:260px; padding:12px;
  background:var(--surface); overflow:auto}
.rte-area:focus{outline:2px solid var(--accent)}
.check-list{list-style:none; padding:0; margin:0}
.check-list li{padding:4px 0; font-weight:600}
.google-preview{border:1px solid var(--border); border-radius:12px; padding:12px; background:#fff; color:#202124}
.google-preview .gp-title{color:#1a0dab; font-size:18px}
.google-preview .gp-url{color:#006621; font-size:13px}
.google-preview .gp-desc{color:#545454; font-size:13px}

/* ---------- print ---------- */
.print-sheet{background:#fff; color:#000; max-width:820px; margin:0 auto; padding:24px 20px; position:relative}
.print-wm{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0}
.print-wm img{width:160mm; max-width:92%; height:auto; opacity:.08}
.print-logo{display:block; width:60mm; max-width:85%; height:auto; margin:0 auto 12px}
.print-content{position:relative; z-index:1}
.print-foot{text-align:center; font-size:12px; font-weight:700; margin-top:24px; border-top:1px solid #000; padding-top:8px}
/* Batch 27: print me images seemit size me — paper printable rahe */
.print-qimg{display:block; max-width:90mm; max-height:60mm; object-fit:contain; margin:5px 0}
.print-oimg{max-width:60mm; max-height:28mm; object-fit:contain; vertical-align:middle; margin-left:6px}
@media print{
  .no-print{display:none !important}
  body{background:#fff !important}
  .page{max-width:none; padding:0}
  .print-sheet{padding:0}
}

@media (prefers-reduced-motion: reduce){
  .slide-anim{animation:none !important}
}

/* ---------- anti-rush reading guard (beech screen wala chetaavni popup) ---------- */
.rush-overlay{z-index:95}
.rush-box{border:2px solid #f59e0b; text-align:center; box-shadow:0 12px 44px rgba(245,158,11,.35)}
.rush-box h3{color:var(--amber-text); font-size:21px}
.rush-count{font-weight:800; font-size:17px; color:var(--amber-text); margin-bottom:0}

/* ---------- leaderboard: EK column, rank number BADA, text chhota ---------- */
.rank-list{display:flex; flex-direction:column; gap:8px}
.rank-row{display:flex; align-items:center; gap:14px; background:var(--surface-alt);
  border:1px solid var(--border); border-radius:14px; padding:10px 14px}
.rank-row.me{border:2px solid var(--accent); background:var(--surface)}
.rank-num{font-size:34px; font-weight:800; line-height:1; min-width:54px; text-align:center; color:var(--accent-strong)}
.rank-info{font-size:13px; color:var(--dim); line-height:1.45}
.rank-info b{color:var(--text); font-size:14px}

/* ---------- home exam grid: desktop par ek line me 3 card ----------
   (Batch 1 ka 2/row niyam Batch 23 me supersede — user ki maang par ab
   >=900px par 3/row; mobile par pehle ki tarah 1/row column stack.) */
@media (min-width:900px){
  .exam-grid{display:grid; grid-template-columns:repeat(3,1fr); align-items:start}
}

/* ---------- exam page: subject accordion (sab subjects BAND, click par khule) ---------- */
.subject-head{display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 14px;
  color:var(--text); font:inherit; margin:0 0 10px}
.subject-head-name{font-size:18px; font-weight:800; flex:1; min-width:0}
.subject-head-meta{font-size:13px; font-weight:700; color:var(--dim); white-space:nowrap}
.subject-caret{font-size:15px; font-weight:800; color:var(--accent-strong); transition:transform .18s ease}
.subject-block.open .subject-caret{transform:rotate(90deg)}
.subject-body[hidden]{display:none}

/* ---------- Batch 22: exam page layout — desktop (>=900px) par ek line me 3,
   mobile (<900px) par 1. Subjects bhi, aur khule subject ke andar ke
   chapter/set cards bhi. Khula hua subject poori row le lega
   (grid-column: 1 / -1) taaki uske sets aaram se padhe jaayein.
   Home ka exam-grid (2/row) isse alag hai — use haath nahi lagaya.
   PYQ slider aur Full Sets grid ke apne purane niyam barkarar hain. */
.subjects-grid{display:grid; grid-template-columns:1fr; column-gap:14px}
@media (min-width:900px){
  .subjects-grid{grid-template-columns:repeat(3,1fr)}
  .subjects-grid>.subject-block.open{grid-column:1/-1}
}
.set-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:10px}
.set-grid>.set-card{margin-bottom:0}
@media (min-width:900px){.set-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Batch 12: desktop (>=1200px) par CHAuda, lagbhag FULL-PAGE layout ----------
   User ki maang: "mobile view sahi hai, desktop view thoda chauda kar do ya
   full page kar do". Isiliye SIRF >=1200px par page shell ki chaudi 97%
   (adhiktam 1600px, beech me kendrit, halka side margin). Header aur bottom-nav
   pehle se full-width hain; .page (Home/exam/report/blog/store/rank/auth),
   .test-main (test screen ka question column), .flash aur .site-footer
   (stats box → footer box → copyright bar) — sab ek saath chauda hote hain.
   1200px se neeche ke saare width/padding niyam bilkul vaise hi — mobile aur
   tablet untouched. Admin (.admin-wrap) jaan-boojh kar isse BAHAR hai.
   "screen and" isliye taaki print layout par koi asar na pade.
   Note: ye blocks jaan-boojh kar file ke beech me (batch 6 section se
   pehle) rakhe gaye hain — file ke aakhir me pehle se ek stray "}" hai
   jiske baad kuch CSS parsers (jsdom) in media blocks ko galat padhte
   the. Cascade par koi asar nahi: saare base niyam inse upar hi hain. */

@media screen and (min-width:1200px){
  .page:not(.admin-wrap),.page-wide,.test-main,.flash,.site-footer{max-width:min(97%,1600px)}
}

/* ---------- Batch 13 (REVISED): mobile (<900px) par footer box + copyright gayab ----------
   User ki maang: "mobile view me footer hata do" — phir unhone saaf kiya:
   "Portal Leaderboard box ko nhi hatana". Isiliye mobile par SIRF footer
   box (brand/tag + link columns + note + admin link) aur copyright bar
   chhupte hain; Portal Leaderboard STATS BOX har width par dikhta rehta
   hai. Markup DOM me rehta hai — info pages apne seedhe routes se khulte
   rehte hain. Desktop (>=900px) par footer bilkul pehle jaisa. Rank page
   ki sticky own-rank bar footer NAHI hai — wo dikhti rahegi. */
@media screen and (max-width:899px){
  .site-footer .footer-box,.site-footer .footer-brand,.site-footer .footer-tag,.site-footer .footer-links,.site-footer .footer-note,.site-footer .footer-admin,.site-footer .copyright-bar{display:none}
}

/* ---------- Batch 14+15: CBT Instructions page + DESKTOP CBT test screen ----------
   Batch 14: test shuru hone par language ke baad (sirf desktop >=900px par,
   chooser ke JS gate se) PrepMe-style Instructions page. Batch 15: test
   screen ka CBT layout bhi sirf desktop par — mobile ka batch-5 layout
   bilkul waisa hi. Isiliye CBT ke naye hisse base par display:none hain aur
   sirf >=900px media block me dikhte hain; purane hisse (.test-top /
   .q-toprow / .test-actions / .test-status) >=900px par chhup jate hain. */
.cbt-head,.cbt-sections,.cbt-side,.cbt-qhead,.cbt-actions{display:none}

/* Prashn sthiti ke rang — palette demo (instructions), sidebar grid, summary dots */
.palette-grid button.st-notans,.pal-cell.st-notans,.pal-demo.st-notans{background:var(--danger); border-color:var(--danger); color:#fff}
.palette-grid button.st-answered,.pal-cell.st-answered,.pal-demo.st-answered{background:var(--green); border-color:var(--green); color:#fff}
.palette-grid button.st-marked,.pal-cell.st-marked,.pal-demo.st-marked{background:#7c3aed; border-color:#7c3aed; color:#fff}
.palette-grid button.st-ansmarked,.pal-cell.st-ansmarked,.pal-demo.st-ansmarked{background:#7c3aed; border-color:#7c3aed; color:#fff}
.palette-grid button.st-ansmarked::after{content:""; position:absolute; right:4px; bottom:4px; width:9px; height:9px; border-radius:99px; background:#22c55e; border:1.5px solid #fff}
.pal-cell.st-ansmarked{position:relative}
.pal-cell.st-ansmarked::after{content:""; position:absolute; right:3px; bottom:3px; width:8px; height:8px; border-radius:99px; background:#22c55e; border:1.5px solid #fff}
.st-dot{width:14px; height:14px; border-radius:4px; display:inline-block; flex-shrink:0}
.st-dot.st-notvisited{background:var(--surface); border:2px solid var(--border)}
.st-dot.st-notans{background:var(--danger)}
.st-dot.st-answered{background:var(--green)}
.st-dot.st-marked{background:#7c3aed; border-radius:50%}
.st-dot.st-ansmarked{background:#7c3aed; border-radius:50%; position:relative}
.st-dot.st-ansmarked::after{content:""; position:absolute; right:-3px; bottom:-3px; width:8px; height:8px; border-radius:50%; background:#22c55e; border:1.5px solid #fff}
.pal-demo{width:30px; height:30px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; border:2px solid var(--border); border-radius:8px; position:relative; background:var(--surface)}
.pal-demo.st-marked,.pal-demo.st-ansmarked{border-radius:50%}
.pal-demo.st-ansmarked::after{content:""; position:absolute; right:-3px; bottom:-3px; width:9px; height:9px; border-radius:50%; background:#22c55e; border:1.5px solid #fff}
.cbt-avatar{width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; flex-shrink:0}
.cbt-avatar.lg{width:54px; height:54px; font-size:21px}
.marks-chip{font-weight:800; background:var(--surface-alt); border:1px solid var(--border); border-radius:999px; padding:5px 11px; font-size:13px; white-space:nowrap}
.mc-pos{color:var(--green)} .mc-neg{color:var(--danger)}

/* ----- Batch 14: Instructions page (chooser ke baad, test se pehle) ----- */
.instr-top{background:linear-gradient(120deg,#0a2536,#155e75); color:#fff}
.instr-top-in{max-width:min(97%,1600px); margin:0 auto; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.instr-brand{display:flex; align-items:center; gap:10px; line-height:1.15}
.instr-brand b{font-size:17px; display:block}
.instr-brand small{opacity:.85; font-weight:600}
.instr-exambox{text-align:center; flex:1; min-width:200px}
.instr-examname{color:#fbbf24; font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:15px}
.instr-setname{font-size:19px; font-weight:800; margin-top:1px}
.instr-cand{display:flex; align-items:center; gap:9px; line-height:1.2}
.instr-cand small{display:block; opacity:.85; font-weight:600}
.instr-strip{background:#0f2f42; color:#dbeafe; text-align:center; font-weight:700; padding:8px 12px; font-size:14px}
.instr-wrap{max-width:min(97%,1600px); margin:0 auto; padding:14px; position:relative; z-index:1}
.instr-grid{display:grid; grid-template-columns:1fr; gap:14px; align-items:start}
@media (min-width:900px){.instr-grid{grid-template-columns:minmax(0,1fr) 330px}}
.instr-main{margin:0}
.instr-side{display:flex; flex-direction:column; gap:14px}
.instr-side .card{margin:0}
.instr-tabs{display:flex; gap:6px; flex-wrap:wrap; border-bottom:2px solid var(--border); margin-bottom:12px}
.instr-tab{border:none; background:transparent; color:var(--dim); font:inherit; font-weight:700; padding:9px 12px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px}
.instr-tab.active{color:var(--accent-strong); border-bottom-color:var(--accent)}
.instr-panel p{margin:0 0 10px}
.instr-legends{display:flex; flex-direction:column; gap:9px; margin:4px 0 14px}
.instr-legend{display:flex; gap:10px; align-items:flex-start}
.instr-legend>span:last-child{padding-top:4px}
.instr-profile-main{display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:17px}
.instr-rows p{display:flex; justify-content:space-between; gap:10px; margin:0; padding:7px 0; border-top:1px solid var(--border); font-size:14px}
.instr-rows p span{color:var(--dim); font-weight:700; flex-shrink:0}
.instr-rows p b{text-align:right}
.instr-side h4,.cbt-side h4{margin:0 0 10px; font-size:13px; letter-spacing:.08em; color:var(--dim)}
.specs-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.spec-box{background:var(--surface-alt); border:1px solid var(--border); border-radius:12px; padding:12px 6px; text-align:center}
.spec-num{font-size:20px; font-weight:800; color:var(--accent-strong); line-height:1.15}
.spec-lbl{font-size:11px; font-weight:800; letter-spacing:.07em; color:var(--dim); margin-top:3px}
.instr-bottom{position:sticky; bottom:0; z-index:35; background:var(--surface); border-top:2px solid var(--accent); padding:12px 14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.instr-declare{display:flex; gap:9px; align-items:flex-start; flex:1; min-width:260px; font-weight:600; cursor:pointer}
.instr-declare input{width:19px; height:19px; margin-top:2px; flex-shrink:0}
.instr-bottom-btns{display:flex; gap:8px}
.modal-box.instr-box{max-width:940px; max-height:88vh; overflow:auto}

/* ----- Batch 15: DESKTOP (>=900px) CBT test screen ----- */
@media screen and (min-width:900px){
  .test-top{display:none}
  .test-main{max-width:min(97%,1600px)}
  .cbt-head{display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:0; z-index:40;
    background:linear-gradient(120deg,#0a2536,#155e75); color:#fff; padding:10px 18px}
  .cbt-head-left{display:flex; align-items:center; gap:12px; min-width:0}
  .cbt-leave{color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:800}
  .cbt-exam{color:#fbbf24; font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:32vw}
  .cbt-setname{font-size:18px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:32vw}
  .cbt-timebox{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.35); border-radius:12px; padding:5px 18px 7px; text-align:center}
  .cbt-time-label{display:block; font-size:10px; font-weight:800; letter-spacing:.22em; opacity:.85}
  .cbt-time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:25px; font-weight:800; line-height:1.1}
  .cbt-time.timer-low{color:#fca5a5}
  .cbt-head-right{display:flex; align-items:center; gap:12px}
  .cbt-saved{font-weight:800; font-size:13px; color:#34d399; white-space:nowrap}
  .cbt-head .lang-toggle button{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.35); color:#dbeafe}
  .cbt-head .lang-toggle button.active{background:#fff; color:#0f2f42; border-color:#fff}
  .cbt-candidate{display:flex; align-items:center; gap:8px; font-weight:800; white-space:nowrap}
  .cbt-sections{display:flex; gap:8px; flex-wrap:wrap; padding:12px 14px 0}
  .cbt-sec-tab{border:2px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px; padding:7px 14px; font-weight:800; cursor:pointer; font:inherit}
  .cbt-sec-tab .cbt-sec-count{color:var(--accent-strong)}
  .test-split{display:flex; gap:14px; align-items:flex-start; padding:0 14px}
  .test-split .q-card{flex:1 1 auto; min-width:0; margin:14px 0}
  .cbt-side{display:block; flex:0 0 27%; max-width:360px; min-width:250px; margin:14px 0; position:sticky; top:84px;
    background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px}
  .cbt-profile{display:flex; align-items:center; gap:10px; margin-bottom:14px}
  .cbt-profile .cbt-cand-name{font-weight:800; line-height:1.2}
  .cbt-summary{list-style:none; margin:0 0 14px; padding:0}
  .cbt-summary li{display:flex; align-items:center; gap:8px; padding:4px 0; font-weight:600; font-size:14px}
  .cbt-summary li b{margin-left:auto}
  .cbt-pal-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); margin-top:0}
  .cbt-pal-grid button{height:42px}
  .cbt-side-btns{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
  .q-toprow{display:none}
  .test-actions{display:none}
  .test-status{display:none}
  .cbt-qhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:12px}
  .cbt-qno{font-size:17px; font-weight:800}
  .cbt-qtype{font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--dim); background:var(--surface-alt); border-radius:6px; padding:3px 8px}
  .cbt-qhead-right{margin-left:auto; display:flex; align-items:center; gap:8px}
  .cbt-actions{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px; margin-top:16px}
  .cbt-actions-left,.cbt-actions-right{display:flex; gap:8px; flex-wrap:wrap}
  /* Desktop par vikalp chips gol ghare me 1-4 number (andar ka index A-D hi rehta hai — report wahi istemal karta hai) */
  .opt-btn .opt-letter,.q-opt .opt-letter{font-size:0; border-radius:50%}
  .opt-btn .opt-letter::after,.q-opt .opt-letter::after{content:attr(data-n); font-size:13px}
}

/* ---------- Monthly Top Performers podium (batch 6) + Rank podium (batch 7) ---------- */
.mtp-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px 14px; margin-bottom:14px}
.mtp-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.mtp-head h2{margin:0; font-size:20px}
.mtp-viewall{font-weight:800; color:var(--accent-strong); text-decoration:none; white-space:nowrap}
.mtp-podium{display:flex; align-items:flex-end; justify-content:center; gap:10px; margin-top:14px}
.mtp-spot{flex:1; max-width:160px; display:flex; flex-direction:column; align-items:center; text-align:center}
.mtp-avatar-wrap{display:flex; flex-direction:column; align-items:center}
.mtp-crown-above{font-size:22px; line-height:1.1}
.mtp-avatar{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:#fff; background:var(--accent)}
.mtp-r1 .mtp-avatar{width:80px; height:80px; font-size:31px; border:3px solid #f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.28)}
.mtp-avatar-empty{background:transparent !important; border:2px dashed var(--border); color:var(--dim); box-shadow:none}
.mtp-name{font-weight:800; margin-top:7px; line-height:1.25}
.mtp-pts{font-size:13px; color:var(--dim); font-weight:700; margin-top:1px}
.mtp-chip{display:inline-block; margin-top:5px; font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px;
  background:var(--surface-alt); border:1px solid var(--border); color:var(--dim)}
.mtp-chip-champ{background:#fef3c7; border-color:#f59e0b; color:#92400e}
:root[data-theme="dark"] .mtp-chip-champ{background:#3a2a05; color:#fcd34d}
.mtp-base{margin-top:9px; width:100%; border-radius:10px 10px 0 0; color:#fff; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center}
.mtp-r1 .mtp-base{height:56px; background:linear-gradient(180deg,#fbbf24,#d97706)}
.mtp-r2 .mtp-base{height:42px; background:linear-gradient(180deg,#9ca3af,#6b7280)}
.mtp-r3 .mtp-base{height:34px; background:linear-gradient(180deg,#dd8f4e,#b87333)}
.mtp-me{margin-top:12px; background:var(--surface-alt); border-radius:12px; padding:10px 12px; text-align:center; font-weight:700}
.mtp-empty{text-align:center; color:var(--dim); font-weight:700; margin:14px 0 4px}

/* ---------- Rank page: period leaderboard (batch 7) ---------- */
.lb-head{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex-wrap:wrap}
.lb-badge{display:inline-block; font-weight:800; font-size:13px; padding:5px 11px; border-radius:999px;
  background:var(--surface-alt); border:1px solid var(--border)}
.lb-badge i{display:inline-block; width:8px; height:8px; border-radius:99px; background:var(--green); margin-right:5px}
.lb-tabs{display:flex; gap:6px; margin-top:12px}
.lb-tabs a{flex:1; text-align:center; padding:9px 4px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:var(--dim); font-weight:800; text-decoration:none}
.lb-tabs a.active{background:var(--accent); border-color:var(--accent); color:#fff}
.lb-list{display:flex; flex-direction:column; gap:8px}
.lb-row{display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:10px 12px}
.lb-row.me{border:2px solid var(--accent); background:var(--surface-alt)}
.lb-rank{font-size:20px; font-weight:800; min-width:34px; text-align:center; color:var(--accent-strong)}
.lb-avatar{width:40px; height:40px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; font-size:16px}
.lb-main{flex:1; min-width:0}
.lb-name{display:block; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-acc{display:block; font-size:12px; color:var(--dim); font-weight:700; margin-top:2px}
.lb-accbar{height:5px; border-radius:99px; background:var(--surface-alt); overflow:hidden; margin-top:4px; max-width:130px}
.lb-accbar i{display:block; height:100%; background:var(--green)}
.lb-side{text-align:right; flex-shrink:0}
.lb-pts{display:block; font-weight:800}
.lb-trend{display:block}
.lb-trend{font-size:12px; font-weight:800; margin-top:2px}
.lb-trend.up{color:var(--green)}
.lb-trend.down{color:var(--danger)}
.lb-trend.flat{color:var(--dim)}
.lb-ownbar{position:sticky; bottom:72px; z-index:30; margin-top:14px; display:flex; align-items:center; gap:11px;
  background:var(--surface); border:2px solid var(--accent); border-radius:16px; padding:10px 12px;
  box-shadow:0 10px 28px rgba(0,0,0,.22)}
.lb-rankcircle{width:46px; height:46px; flex-shrink:0; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px}
.lb-ownmain{flex:1; min-width:0}
.lb-ownname{display:block; font-weight:800}
.lb-ownsub{display:block; font-size:12px; color:var(--dim); font-weight:700}
.lb-ownside{text-align:right; flex-shrink:0; font-weight:800}
.lb-ownside .small{display:block; color:var(--dim)}}