/* =============================================================
   RANKR design system — "exam hall" identity
   OMR bubbles, admit-card tickets, ballpoint blue + saffron.
   Theme colours & fonts are injected from admin settings (see index.php).
   ============================================================= */
:root {
  --pen: #2A2FD9; --pen-2: #1E22A8; --pen-soft: #E8E9FF;
  --ink: #14163A; --ink-2: #3A3D63; --muted: #6B6E8F; --line: #E3E5F0; --line-2: #EEF0F7;
  --paper: #F4F5FB; --card: #FFFFFF; --card-2: #FAFAFE;
  --saffron: #FF7A1A; --saffron-soft: #FFF0E4; --omr: #D23369; --omr-soft: #FFE6EE;
  --mint: #10A36A; --mint-soft: #E2F6EC; --danger: #E5484D; --danger-soft: #FDECEC; --gold: #E9A400;
  --aura: #FF6A00; --respect: #2A2FD9; --helpful: #10A36A;
  --r: 16px; --r-s: 10px; --r-l: 24px;
  --sh-1: 0 1px 2px rgba(20,22,58,.06), 0 1px 1px rgba(20,22,58,.04);
  --sh-2: 0 8px 24px -10px rgba(20,22,58,.22);
  --sh-3: 0 24px 60px -20px rgba(20,22,58,.35);
  --f-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --f-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hi: 'Mukta', 'Noto Sans Devanagari', sans-serif;
  --side: 248px; --top: 64px; --tabs: 68px; --max: 1240px;
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
[data-theme="dark"] {
  --ink: #EEF0FF; --ink-2: #C9CCF0; --muted: #9A9DC4; --line: #2A2E62; --line-2: #22264F;
  --paper: #0D0F2B; --card: #161940; --card-2: #1B1F4B; --pen-soft: #23286B; --saffron-soft: #3A2412; --omr-soft: #3A1426;
  --mint-soft: #0F3125; --danger-soft: #3A1518; --pen: #6C71FF; --pen-2: #8A8EFF; --respect: #8A8EFF;
  --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 10px 30px -12px rgba(0,0,0,.6); --sh-3: 0 30px 70px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 12px); }
body { margin: 0; font: 15.5px/1.55 var(--f-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html[data-lang="hi"] body { font-family: var(--f-hi), var(--f-body); font-size: 16.5px; }
html[data-lang="hi"] .h1, html[data-lang="hi"] .h2, html[data-lang="hi"] .display { font-family: var(--f-hi), var(--f-display); letter-spacing: 0; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--pen); outline-offset: 2px; border-radius: 8px; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.hide { display: none !important; }
.muted { color: var(--muted); } .small { font-size: .87rem; } .tiny { font-size: .76rem; } .center { text-align: center; }
.block { display: block; } .grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; } .gap { gap: 10px; } .wrap { flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: 14px; }
.mt { margin-top: 18px; } .mt-s { margin-top: 10px; } .mt-lg { margin-top: 40px; }
.center-row { justify-content: center; }
.c-aura { color: var(--aura); } .c-respect { color: var(--respect); } .c-helpful { color: var(--helpful); } .c-xp { color: var(--gold); } .c-ok { color: var(--mint); } .c-bad { color: var(--danger); }
.pre { white-space: pre-wrap; word-break: break-word; }

/* ---------- type ---------- */
.display { font-family: var(--f-display); font-weight: 750; font-size: clamp(2.3rem, 5.6vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; margin: 14px 0 12px; font-variation-settings: 'opsz' 96; }
.display.sm { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.h1 { font-family: var(--f-display); font-weight: 720; font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.12; letter-spacing: -.025em; margin: 0; }
.h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 2.3vw, 1.6rem); line-height: 1.18; letter-spacing: -.02em; margin: 0; }
.h3 { font-family: var(--f-display); font-weight: 680; font-size: 1.15rem; margin: 0 0 10px; letter-spacing: -.01em; }
.h4 { font-weight: 700; font-size: 1rem; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 52ch; margin: 0 0 24px; }
.lbl { font-size: .82rem; font-weight: 700; color: var(--muted); margin: 18px 0 8px; }

/* ---------- shell: top app bar + bottom dock, no sidebar ---------- */
#app { min-height: 100vh; }
#top { position: sticky; top: 0; z-index: 25; background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.top-in { height: var(--top); max-width: var(--max); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 18px; }
#view { padding: 24px 24px 120px; transition: opacity .2s; }
#view > .page > *, #view > .ssr { max-width: var(--max); margin-left: auto; margin-right: auto; }
#view.loading { opacity: .55; }
.ssr { padding: 20px 0; } body.ready .ssr { display: none; }
.ssr h1 { font-family: var(--f-display); } .crumbs { font-size: .85rem; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.logo-word { font-family: var(--f-display); font-weight: 780; font-size: 1.42rem; letter-spacing: -.04em; }
.logo-img { height: 32px; width: auto; }
.top-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.top-nav a, .top-more { padding: 8px 12px; border-radius: 10px; font-weight: 650; color: var(--ink-2); display: inline-flex; gap: 4px; align-items: center; font-size: .94rem; }
.top-nav a:hover, .top-more:hover { background: var(--line-2); color: var(--ink); }
.top-nav a.on { color: var(--pen); background: var(--pen-soft); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; pointer-events: none; }
.dock { pointer-events: auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.dock a, .dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .68rem; font-weight: 700; color: var(--muted); position: relative; transition: color .2s; }
.dock a .ic, .dock button .ic { width: 23px; height: 23px; transition: transform .25s var(--ease); }
.dock a.on { color: var(--pen); } .dock a.on .ic { transform: translateY(-2px); }
.dock a.hero .hero-dot { width: 50px; height: 50px; margin-top: -26px; border-radius: 18px; background: var(--saffron); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 20px -8px var(--saffron); border: 4px solid var(--paper); }
.dock a.hero.on { color: var(--saffron); }
/* desktop, signed in: floating app dock at the bottom (few links on top, few at the bottom) */
@media (min-width: 1024px) {
  body.signed-in #tabs { display: flex; justify-content: center; bottom: 18px; }
  body.signed-in .dock { width: auto; gap: 4px; padding: 8px 10px; border-radius: 22px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: var(--sh-3); grid-auto-columns: 84px; height: 66px; }
  body.signed-in .dock a.hero .hero-dot { width: 44px; height: 44px; margin-top: -18px; border-width: 3px; }
  body.signed-in .dock a:hover { color: var(--ink); }
}
.av { border-radius: 30%; display: block; flex: none; }
.only-m { display: none !important; }

/* ---------- buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 700; background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: transform .12s var(--ease), box-shadow .2s, background .2s, filter .2s; white-space: nowrap; }
.btn:hover { box-shadow: var(--sh-2); } .btn:active { transform: translateY(1px) scale(.98); } .btn:disabled { opacity: .5; pointer-events: none; }
.btn.primary { background: var(--pen); border-color: var(--pen); color: #fff; box-shadow: 0 6px 16px -8px var(--pen); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.saffron { background: var(--saffron); border-color: var(--saffron); color: #fff; box-shadow: 0 8px 18px -8px var(--saffron); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; } .btn.outline { background: var(--card); border-width: 1.5px; }
.btn.danger-t { color: var(--danger); }
.btn.sm { height: 34px; padding: 0 12px; font-size: .86rem; border-radius: 10px; }
.btn.lg { height: 52px; padding: 0 24px; font-size: 1.02rem; border-radius: 14px; }
.btn.block { width: 100%; } .btn.icon-only { width: 46px; padding: 0; }
.link { color: var(--pen); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .85rem; font-weight: 700; color: var(--ink-2); display: flex; gap: 6px; align-items: center; } .field label small { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea, .filter-bar select { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); transition: border .15s, box-shadow .15s; outline: none; }
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pen); box-shadow: 0 0 0 4px var(--pen-soft); }
.icon-field { position: relative; } .icon-field > .ic { position: absolute; left: 14px; top: 13px; color: var(--muted); } .icon-field input { padding-left: 42px; }
.pw { position: relative; } .pw .icon-btn { position: absolute; right: 2px; top: 2px; }
.check, .radio { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input, .radio input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pen); flex: none; }
.check.disabled { opacity: .45; }
.switch { display: flex; align-items: center; gap: 12px; font-weight: 600; cursor: pointer; }
.switch input { display: none; } .switch span { width: 44px; height: 26px; border-radius: 99px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .25s var(--ease); }
.switch input:checked + span { background: var(--pen); } .switch input:checked + span::after { transform: translateX(18px); }
.toggle-sm { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; white-space: nowrap; } .toggle-sm input { accent-color: var(--pen); width: 16px; height: 16px; }
.seg { display: flex; padding: 4px; border-radius: 12px; background: var(--line-2); gap: 4px; }
.seg button { flex: 1; height: 36px; border-radius: 9px; font-weight: 700; font-size: .9rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .2s; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; } .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); font-weight: 650; font-size: .88rem; color: var(--ink-2); transition: all .15s; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--pen-soft); color: var(--pen); font-weight: 700; font-size: .82rem; }
.pill.dark { background: rgba(255,255,255,.12); color: #fff; }
.mini-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--line-2); color: var(--ink-2); }
.tagc { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 7px; background: var(--pen-soft); color: var(--pen); white-space: nowrap; flex: none; }
.t-newvacancy { background: var(--mint-soft); color: var(--mint); } .t-admitcard { background: var(--saffron-soft); color: var(--saffron); } .t-result { background: var(--omr-soft); color: var(--omr); } .t-answerkey { background: var(--pen-soft); color: var(--pen); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); } .pad { padding: 20px; }
.narrow { max-width: 640px !important; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.notice { display: flex; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--saffron-soft); color: var(--ink); border: 1px dashed color-mix(in srgb, var(--saffron) 45%, transparent); }
.notice > .ic { color: var(--saffron); width: 24px; height: 24px; } .notice p { margin: 4px 0 0; }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty > .ic { width: 44px; height: 44px; color: var(--pen); opacity: .8; } .empty h4 { color: var(--ink); font-size: 1.1rem; margin: 12px 0 4px; } .empty p { margin: 0 0 16px; }
.skel-wrap { display: grid; gap: 12px; } .skel { height: 84px; border-radius: var(--r); background: linear-gradient(90deg, var(--line-2), var(--card), var(--line-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.rep { display: inline-flex; gap: 12px; font-size: .86rem; } .rep b { display: inline-flex; gap: 4px; align-items: center; font-weight: 750; }
.lvl { display: inline-flex; gap: 4px; align-items: center; font-weight: 700; color: var(--pen); font-size: .8rem; } .lvl .ic { width: 13px; height: 13px; }

/* ---------- toasts & sheets ---------- */
#toasts { position: fixed; z-index: 100; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--paper); font-weight: 650; font-size: .92rem; box-shadow: var(--sh-3); transform: translateY(-20px) scale(.96); opacity: 0; transition: all .35s var(--ease); }
.toast.in { transform: none; opacity: 1; } .toast .ic { width: 20px; height: 20px; }
.toast.t-bad { background: var(--danger); color: #fff; } .toast.t-gold { background: linear-gradient(135deg, #FF7A1A, #E9A400); color: #fff; }
.sheet-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; }
.sheet-back { position: absolute; inset: 0; background: rgba(13,15,43,.5); opacity: 0; transition: opacity .3s; backdrop-filter: blur(3px); }
.sheet { position: relative; width: min(94vw, 520px); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border-radius: var(--r-l); box-shadow: var(--sh-3); transform: translateY(24px) scale(.97); opacity: 0; transition: all .32s var(--ease); overscroll-behavior: contain; }
.sheet.sm { width: min(94vw, 420px); } .sheet.tall { width: min(94vw, 600px); }
.sheet-wrap.in .sheet-back { opacity: 1; } .sheet-wrap.in .sheet { transform: none; opacity: 1; }
.grip { display: none; } .sheet-body { padding: 26px; }
.sheet-body.center { text-align: center; }
.menu-me { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--line-2); } .menu-me div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.menu-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); font-size: .8rem; font-weight: 650; text-align: center; }
.menu-grid a .ic { width: 22px; height: 22px; color: var(--pen); }
.sres { margin-top: 14px; display: flex; flex-direction: column; } .sres h5 { margin: 12px 0 4px; font-size: .78rem; color: var(--muted); }
.sres a { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; } .sres a:hover { background: var(--line-2); }

/* auth */
.auth-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; } .auth-hero .h2 { margin-top: 8px; } .auth-hero p { margin: 0; }
.g-wrap { margin: 16px 0 6px; display: flex; justify-content: center; min-height: 44px; } .g-wrap .btn { height: 46px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; margin: 12px 0; } .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.demo-box { margin-top: 18px; padding: 14px; border-radius: 14px; border: 1.5px dashed var(--line); display: flex; gap: 12px; } .demo-box > .ic { color: var(--saffron); width: 22px; height: 22px; } .demo-box p { margin: 2px 0 10px; }
.terms-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .terms-head > .ic { width: 30px; height: 30px; color: var(--pen); } .terms-head p { margin: 2px 0 0; }
.terms-scroll { height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; background: var(--card-2); }
.terms-end { text-align: center; padding: 18px; color: var(--mint); font-weight: 700; }
.terms-progress { height: 4px; background: var(--line); border-radius: 4px; margin: 10px 0 14px; overflow: hidden; } .terms-progress i { display: block; height: 100%; width: 0; background: var(--pen); transition: width .1s; }
.terms-sheet .check { margin-bottom: 14px; }
.mail-ill { width: 76px; height: 76px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 24px; background: var(--pen-soft); color: var(--pen); } .mail-ill .ic { width: 36px; height: 36px; }
.steps { display: flex; gap: 6px; margin-bottom: 18px; } .steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); } .steps i.on { background: var(--pen); }
.name-pick { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 8px; }
.np { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 700; text-align: left; transition: all .15s; }
.np.on { border-color: var(--pen); background: var(--pen-soft); color: var(--pen); }
.tgt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tgt-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); } .tgt-row small { display: block; }
.tgt-days { width: 58px; height: 58px; border-radius: 14px; background: var(--pen); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; flex: none; }
.tgt-days b { font-family: var(--f-display); font-size: 1.35rem; } .tgt-days small { font-size: .66rem; opacity: .85; } .tgt-days.hot { background: var(--saffron); }
.tgt-form { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* ---------- HOME ---------- */
.sec { margin-top: 56px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .sec-head p { margin: 6px 0 0; max-width: 62ch; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px auto 22px; } .page-head p { margin: 6px 0 0; }
.my-day { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 8px; }
.md-greet { display: flex; align-items: center; gap: 14px; } .md-greet p { margin: 0; } .md-greet .h2 { margin: 2px 0 4px; }
.streak { margin-left: auto; display: flex; flex-direction: column; align-items: center; padding: 8px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); line-height: 1.1; }
.streak .ic { color: var(--muted); } .streak b { font-family: var(--f-display); font-size: 1.3rem; } .streak small { font-size: .7rem; color: var(--muted); }
.streak.hot { background: var(--saffron-soft); border-color: transparent; } .streak.hot .ic { color: var(--saffron); animation: flick 1.6s infinite; }
@keyframes flick { 50% { transform: scale(1.15) rotate(-6deg); } }
.tickets { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; } .tickets::-webkit-scrollbar { display: none; }
.ticket { flex: none; width: 200px; border-radius: 18px; background: var(--pen); color: #fff; padding: 14px 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 14px 30px -16px var(--pen); }
.ticket::before { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; border: 18px solid rgba(255,255,255,.08); }
.ticket.hot { background: var(--saffron); box-shadow: 0 14px 30px -16px var(--saffron); }
.tk-top { display: flex; justify-content: space-between; font-size: .7rem; opacity: .75; font-weight: 700; letter-spacing: .04em; }
.tk-days { font-family: var(--f-display); font-size: 3.2rem; line-height: 1; margin-top: 8px; letter-spacing: -.04em; } .tk-lbl { opacity: .85; font-size: .82rem; }
.tk-perf { margin: 12px -16px; border-top: 2px dashed rgba(255,255,255,.35); position: relative; }
.tk-perf::before, .tk-perf::after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); } .tk-perf::before { left: -8px; } .tk-perf::after { right: -8px; }
.tk-foot { display: flex; flex-direction: column; } .tk-foot b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tk-foot small { opacity: .8; font-size: .78rem; }
.ticket.add { background: var(--card); color: var(--ink); border: 2px dashed var(--line); box-shadow: none; justify-content: center; align-items: flex-start; gap: 6px; width: 240px; }
.ticket.add::before { display: none; } .ticket.add .ic { width: 28px; height: 28px; color: var(--pen); } .ticket.add small { color: var(--muted); }
.ticket.add.mini { width: 110px; align-items: center; }
.goal-card { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
.ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--mint) calc(var(--p) * 1%), var(--line-2) 0); position: relative; }
.ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--card); } .ring b { position: relative; font-family: var(--f-display); font-size: 1.1rem; }
.goal-card p { margin: 2px 0 0; }

.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 34px 0 10px; }
.hero-stats { display: flex; gap: 30px; margin-top: 32px; flex-wrap: wrap; } .hero-stats div { display: flex; flex-direction: column; } .hero-stats b { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: -.03em; } .hero-stats small { color: var(--muted); }
.hero-paper { background: var(--card); border-radius: var(--r-l); padding: 22px; box-shadow: var(--sh-3); border: 1px solid var(--line); position: relative; transform: rotate(1.2deg); animation: paperIn .8s var(--ease) both .15s; }
.hero-paper::before { content: ''; position: absolute; inset: 10px -10px -10px 10px; border-radius: var(--r-l); background: var(--pen-soft); z-index: -1; transform: rotate(-3deg); }
@keyframes paperIn { from { opacity: 0; transform: rotate(4deg) translateY(30px); } }
.paper-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.paper-head span { display: flex; gap: 6px; align-items: center; } .timer-chip { padding: 4px 10px; border-radius: 8px; background: var(--omr-soft); color: var(--omr) !important; }
.q-meta { margin: 0; font-size: .78rem; font-weight: 800; color: var(--omr); }
.q-text { font-weight: 650; font-size: 1.04rem; margin: 6px 0 16px; line-height: 1.45; } .q-text.lg { font-size: clamp(1.08rem, 2vw, 1.32rem); }
.paper-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }

/* OMR bubbles — the signature interaction */
.omr { display: flex; flex-direction: column; gap: 8px; }
.omr-opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); text-align: left; transition: border .15s, background .2s, transform .12s; position: relative; width: 100%; }
.omr:not(.done) .omr-opt:hover { border-color: var(--pen); background: var(--pen-soft); } .omr:not(.done) .omr-opt:active { transform: scale(.985); }
.bub { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--omr); color: var(--omr); display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none; background: radial-gradient(circle closest-side, var(--bubfill, var(--ink)) 98%, transparent 100%) center / 0% 0% no-repeat; transition: background-size .38s var(--ease), color .2s, border-color .2s; }
.omr-opt.pick .bub { background-size: 100% 100%; color: #fff; border-color: var(--ink); }
.omr-opt .txt { flex: 1; font-weight: 600; }
.omr-opt.right { border-color: var(--mint); background-color: var(--mint-soft); } .omr-opt.right .bub { --bubfill: var(--mint); border-color: var(--mint); background-size: 100% 100%; color: #fff; }
.omr-opt.wrong { border-color: var(--danger); background-color: var(--danger-soft); animation: shake .35s; } .omr-opt.wrong .bub { --bubfill: var(--danger); border-color: var(--danger); }
.omr-opt.inking .bub { transition-duration: .55s; }
.omr.big .omr-opt { padding: 14px 16px 14px 12px; } .omr.big .bub { width: 38px; height: 38px; font-size: .9rem; }
.omr.sm .omr-opt { padding: 6px 10px 6px 6px; } .omr.sm .bub { width: 26px; height: 26px; font-size: .72rem; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.paper-exp { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--danger-soft); font-size: .92rem; animation: pop .35s var(--ease); }
.paper-exp.ok { background: var(--mint-soft); } .paper-exp b { display: flex; gap: 6px; align-items: center; } .paper-exp p { margin: 4px 0 0; color: var(--ink-2); }

.fam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fam { position: relative; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; overflow: hidden; }
.fam:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.fam-logos { display: flex; margin-bottom: 14px; } .fam-logos > * { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--card); margin-left: -8px; object-fit: contain; background: #fff; } .fam-logos > :first-child { margin-left: 0; }
.fam-logos span { display: grid; place-items: center; font-size: .6rem; font-weight: 800; color: #fff; background: var(--bc); }
.fam-ic { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); display: grid; place-items: center; }
.fam b { font-size: 1.02rem; } .fam small { color: var(--muted); }
.fam-go { position: absolute; right: 14px; bottom: 14px; color: var(--muted); transition: transform .2s; } .fam:hover .fam-go { transform: translate(3px, -3px); color: var(--c); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.exam-card { padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s; }
.exam-card:hover { box-shadow: var(--sh-2); }
.ec-top { display: flex; justify-content: space-between; } .ec-tag { font-weight: 800; font-size: .78rem; color: var(--c); } .ec-days { font-size: .78rem; font-weight: 700; color: var(--saffron); display: flex; gap: 4px; align-items: center; }
.exam-card h3 { margin: 0; font-size: 1.08rem; }
.ec-specs { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; } .ec-specs span { display: flex; gap: 5px; align-items: center; } .ec-specs b { color: var(--ink); }
.ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ts-card { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s, transform .2s var(--ease); }
.ts-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.ts-top { display: flex; justify-content: space-between; align-items: flex-start; } .ts-top img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; }
.ts-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--pen-soft); color: var(--pen); display: grid; place-items: center; } .ts-ic .ic { width: 22px; height: 22px; }
.ts-top em { font-style: normal; font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--saffron-soft); color: var(--saffron); }
.ts-card b { font-size: .96rem; line-height: 1.35; flex: 1; }
.ts-foot { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--ink-2); font-weight: 600; } .ts-foot span { display: flex; gap: 5px; align-items: center; }
.ts-foot .free { color: var(--mint); font-weight: 800; padding: 2px 10px; border-radius: 99px; background: var(--mint-soft); }
.subj-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
.subj { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); font-size: .88rem; text-align: center; transition: transform .2s var(--ease); }
.subj:hover { transform: translateY(-3px); } .subj span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); } .subj span .ic { width: 23px; height: 23px; }
.subj-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sb { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.sb-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); } .sb-head b { flex: 1; }
.sb-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
.sb-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: .9rem; border-bottom: 1px dashed var(--line-2); } .sb-row:last-child { border-bottom: 0; }
.sb-row:hover span { color: var(--pen); } .sb-row em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.arena-promo { margin-top: 56px; border-radius: 28px; padding: 36px; background: radial-gradient(120% 120% at 100% 0%, #3B2FD9 0%, var(--ink) 55%); color: #fff; display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; overflow: hidden; position: relative; }
[data-theme="dark"] .arena-promo { background: radial-gradient(120% 120% at 100% 0%, #3B2FD9 0%, #090B22 60%); }
.arena-promo .h1 { margin: 14px 0 8px; } .arena-promo p { opacity: .8; margin: 0 0 20px; max-width: 48ch; }
.ap-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; justify-self: center; }
.seat { width: 110px; height: 96px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; animation: seatFloat 4s ease-in-out infinite; }
.seat.s2 { animation-delay: -1s; } .seat.s3 { animation-delay: -2s; } .seat.s4 { animation-delay: -3s; } .seat small { font-weight: 800; opacity: .8; }
.ap-seats .vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--saffron); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; box-shadow: 0 0 0 6px rgba(255,122,26,.25); }
@keyframes seatFloat { 50% { transform: translateY(-6px); } }
.upd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.upd { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.upd-h { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .upd-h b { flex: 1; } .upd-h > .ic { color: var(--pen); }
.upd-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: .9rem; } .upd-row:last-child { border-bottom: 0; }
.upd-row span:nth-child(2) { flex: 1; min-width: 0; } .upd-row small { color: var(--muted); font-size: .74rem; white-space: nowrap; } .upd-row:hover span:nth-child(2) { color: var(--pen); }
.fame-top { display: flex; justify-content: center; margin-bottom: 20px; }
.fame-count { text-align: center; display: flex; flex-direction: column; align-items: center; } .fame-count b { font-family: var(--f-display); font-size: clamp(3rem, 8vw, 5.4rem); line-height: 1; letter-spacing: -.05em; color: var(--pen); }
.fame-count span { font-weight: 800; font-size: 1.1rem; } .fame-count small { color: var(--muted); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; gap: 14px; width: max-content; animation: mq 50s linear infinite; padding: 6px 0; } .marquee:hover .mq-track { animation-play-state: paused; } .marquee.rev .mq-track { animation-direction: reverse; animation-duration: 70s; }
@keyframes mq { to { transform: translateX(-50%); } }
.fame-card { width: 190px; flex: none; padding: 18px 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.fame-card img, .fc-ini { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; } .fc-ini { display: grid; place-items: center; background: var(--pen-soft); color: var(--pen); font-weight: 800; font-size: 1.2rem; }
.fc-rank { position: absolute; top: 10px; right: 10px; font-weight: 800; font-size: .72rem; padding: 3px 8px; border-radius: 99px; background: var(--saffron); color: #fff; }
.fame-card b { font-size: .92rem; } .fame-card small { font-size: .76rem; } .fame-card em { font-style: normal; font-size: .7rem; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.join-count { text-align: right; } .join-count b { font-family: var(--f-display); font-size: 2rem; display: block; line-height: 1; color: var(--mint); }
.join-chip { flex: none; display: flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); }
.join-chip span { display: flex; flex-direction: column; line-height: 1.2; } .join-chip b { font-size: .86rem; } .join-chip small { color: var(--muted); font-size: .72rem; }
.testi-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.rating-card { padding: 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); position: sticky; top: calc(var(--top) + 12px); }
.rc-big b { font-family: var(--f-display); font-size: 3.4rem; letter-spacing: -.04em; line-height: 1; } .rc-big small { color: var(--muted); font-size: 1.1rem; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1.1rem; } .stars span { color: var(--line); } .stars.sm { font-size: .9rem; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .bar-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; } .bar-row i { flex: 1; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; } .bar-row em { display: block; height: 100%; background: var(--gold); border-radius: 4px; } .bar-row small { width: 32px; text-align: right; color: var(--muted); }
.testi-rail { columns: 2 280px; column-gap: 14px; }
.testi { break-inside: avoid; margin-bottom: 14px; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.testi header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .testi header div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; } .testi header small { color: var(--muted); font-size: .78rem; }
.testi header img, .ti { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .ti { display: grid; place-items: center; background: var(--omr-soft); color: var(--omr); font-weight: 800; }
.t-exam { font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--pen-soft); color: var(--pen); }
.testi p { margin: 6px 0 4px; font-size: .93rem; color: var(--ink-2); } .clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.testi footer { margin-top: 10px; font-size: .76rem; color: var(--mint); font-weight: 650; display: flex; gap: 5px; align-items: center; }
.warm { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.warm-q { padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.wq-top { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 800; color: var(--muted); } .wq-top em { font-style: normal; color: var(--omr); } .wq-top span { display: flex; gap: 5px; align-items: center; }
.syl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.syl article { padding: 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.b-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--pen-soft); color: var(--pen); margin-bottom: 4px; }
.syl p { margin: 0; color: var(--ink-2); font-size: .92rem; } .syl small { color: var(--mint); font-weight: 700; margin-top: auto; padding-top: 6px; display: flex; gap: 5px; align-items: center; }
.method { list-style: none; counter-reset: m; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.method li { counter-increment: m; padding: 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); position: relative; }
.method li::before { content: counter(m); width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--omr); color: var(--omr); display: grid; place-items: center; font-weight: 800; margin-bottom: 12px; }
.method p { margin: 6px 0 0; color: var(--ink-2); font-size: .92rem; }
.rich .prose { max-width: 78ch; }
.prose { color: var(--ink-2); } .prose h2, .prose h3 { color: var(--ink); font-family: var(--f-display); letter-spacing: -.01em; margin: 1.4em 0 .5em; } .prose p { margin: 0 0 1em; }
.prose a { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: .3em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .9rem; display: block; overflow-x: auto; } .prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--line-2); color: var(--ink); font-weight: 750; white-space: nowrap; } .prose tr:hover td { background: var(--card-2); }
.prose blockquote { margin: 1em 0; padding: 12px 16px; border-left: 4px solid var(--pen); background: var(--pen-soft); border-radius: 0 12px 12px 0; }
.prose img { border-radius: 12px; } .prose.lg { font-size: 1.05rem; line-height: 1.7; }
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.faq details { border-radius: 14px; background: var(--card); border: 1px solid var(--line); padding: 0 18px; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; } .faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .25s var(--ease); color: var(--pen); } .faq details[open] summary .ic { transform: rotate(45deg); } .faq p { margin: 0 0 16px; color: var(--ink-2); }
.site-foot { margin-top: 72px; padding: 32px 0 10px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; }
.sf-brand p { max-width: 40ch; } .sf-brand .brand { padding: 0; }
.social { display: flex; gap: 8px; } .social a { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); }
.sf-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sf-cols div { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; } .sf-cols a { color: var(--muted); } .sf-cols a:hover { color: var(--pen); }
.sf-legal { grid-column: 1 / -1; }

/* ---------- PRACTICE ---------- */
.subj-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.subj-tile { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; transition: transform .2s var(--ease), box-shadow .2s; }
.subj-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .subj-tile span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); margin-bottom: 6px; } .subj-tile small { color: var(--muted); font-size: .78rem; }
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px; margin-bottom: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.filter-bar.sticky { position: sticky; top: calc(var(--top) + 6px); z-index: 10; box-shadow: var(--sh-1); }
.filter-bar select { width: auto; min-width: 140px; height: 42px; } .filter-bar .field { min-width: 200px; }
.quiz-list { display: flex; flex-direction: column; gap: 8px; }
.quiz-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.quiz-row:hover { border-color: var(--c); transform: translateX(3px); } .quiz-row small { display: block; }
.qr-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); flex: none; }
.subj-hero, .quiz-hero { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: var(--r-l); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--card)), var(--card) 70%); border: 1px solid var(--line); margin-bottom: 18px; }
.sh-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; } .sh-ic .ic { width: 28px; height: 28px; } .subj-hero p { margin: 6px 0 0; }
.qh-main .h1 { margin: 10px 0; } .specs { display: flex; gap: 16px; flex-wrap: wrap; color: var(--ink-2); font-weight: 600; font-size: .9rem; } .specs span { display: flex; gap: 6px; align-items: center; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mode-card { text-align: left; padding: 22px; border-radius: var(--r-l); background: var(--card); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: all .2s var(--ease); }
.mode-card:hover { border-color: var(--pen); transform: translateY(-3px); box-shadow: var(--sh-2); } .mode-card p { margin: 0; color: var(--muted); font-size: .9rem; flex: 1; }
.mode-card em { font-style: normal; color: var(--pen); font-weight: 800; display: flex; gap: 6px; align-items: center; }
.mc-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--pen-soft); color: var(--pen); } .mc-ic .ic { width: 24px; height: 24px; }
.mode-card.battle { background: var(--ink); color: #fff; border-color: var(--ink); } .mode-card.battle p { color: rgba(255,255,255,.7); } .mode-card.battle .mc-ic { background: var(--saffron); color: #fff; }
[data-theme="dark"] .mode-card.battle { background: #090B22; }
.tier-row { display: flex; gap: 6px; flex-wrap: wrap; } .tier-row span { font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--mint-soft); color: var(--mint); } .tier-row span.paid { background: var(--saffron-soft); color: var(--saffron); }
.mini-board { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.mini-board li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); } .mini-board b { flex: 1; } .mini-board em { font-style: normal; font-weight: 800; }
.pos { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .78rem; background: var(--line-2); flex: none; }
body.immersive #top, body.immersive #tabs { display: none !important; }
body.immersive #view { padding: 0; } body.immersive #view > .page > * { max-width: none; }
.player { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.pl-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.pl-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .pl-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-title small { color: var(--muted); }
.pl-timer { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: var(--pen-soft); color: var(--pen); font-weight: 800; font-variant-numeric: tabular-nums; transition: all .2s; }
.pl-timer.warn { background: var(--danger); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.segs { display: flex; gap: 4px; padding: 10px 20px; } .segs i { flex: 1; height: 5px; border-radius: 4px; background: var(--line); transition: background .3s; }
.segs i.cur { background: var(--pen); } .segs i.ok { background: var(--mint); } .segs i.bad { background: var(--danger); } .segs i.done { background: var(--ink-2); }
.pl-body { flex: 1; padding: 10px 20px 20px; display: flex; justify-content: center; }
.q-card { width: 100%; max-width: 760px; padding: 24px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); animation: qIn .35s var(--ease); }
@keyframes qIn { from { opacity: 0; transform: translateX(24px); } }
.q-tools { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.pl-foot { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin: 12px 0; }
.palette button { height: 44px; border-radius: 50%; border: 2px solid var(--omr); color: var(--omr); font-weight: 800; } .palette button.done { background: var(--ink); border-color: var(--ink); color: var(--paper); } .palette button.cur { box-shadow: 0 0 0 3px var(--pen-soft); border-color: var(--pen); }
.result-hero { display: flex; gap: 28px; align-items: center; padding: 28px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); flex-wrap: wrap; }
.rh-ring { --p: 0; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--pen) calc(var(--p) * 1%), var(--line-2) 0); display: grid; place-items: center; position: relative; flex: none; animation: pop .6s var(--ease); }
.rh-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--card); } .rh-ring b, .rh-ring small { position: relative; } .rh-ring b { font-family: var(--f-display); font-size: 2.4rem; line-height: 1; display: block; } .rh-ring small { color: var(--muted); display: block; text-align: center; }
.res-stats { display: grid; grid-template-columns: repeat(6, auto); gap: 8px 22px; margin-top: 14px; } .res-stats div { display: flex; flex-direction: column; } .res-stats b { font-family: var(--f-display); font-size: 1.35rem; } .res-stats small { color: var(--muted); font-size: .78rem; }
.res-stats.wide { grid-template-columns: repeat(3, 1fr); padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); margin-top: 14px; text-align: center; }
.reward-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .reward-strip span { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 99px; background: linear-gradient(135deg, var(--saffron-soft), color-mix(in srgb, var(--gold) 18%, var(--card))); color: var(--aura); font-weight: 800; font-size: .88rem; animation: pop .5s var(--ease) both; }
.rv { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); margin-bottom: 10px; } .rv.ok { border-left-color: var(--mint); } .rv.bad { border-left-color: var(--danger); }
.rv-h { display: flex; align-items: center; gap: 10px; } .rv-h span { font-weight: 800; color: var(--muted); } .rv-h em { font-style: normal; font-weight: 800; font-size: .8rem; flex: 1; } .rv.ok em { color: var(--mint); } .rv.bad em { color: var(--danger); }
.rv p { font-weight: 600; } .reason-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 120; }

/* ---------- ARENA ---------- */
.arena-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; padding: 34px; border-radius: 28px; background: radial-gradient(120% 140% at 100% 0%, #3B2FD9 0%, var(--ink) 58%); color: #fff; overflow: hidden; }
[data-theme="dark"] .arena-hero { background: radial-gradient(120% 140% at 100% 0%, #3B2FD9 0%, #090B22 62%); }
.arena-hero p { opacity: .78; max-width: 46ch; margin: 0; }
.ah-stats { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; } .ah-stats div { display: flex; flex-direction: column; position: relative; } .ah-stats b { font-family: var(--f-display); font-size: 1.6rem; } .ah-stats small { opacity: .7; }
.pulse { position: absolute; left: -14px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #3BE38D; box-shadow: 0 0 0 0 rgba(59,227,141,.7); animation: ping 1.6s infinite; }
@keyframes ping { to { box-shadow: 0 0 0 12px rgba(59,227,141,0); } }
.ah-art { position: relative; height: 230px; }
.hall-seat { position: absolute; width: 86px; height: 86px; border-radius: 22px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); animation: seatFloat 4.5s ease-in-out infinite; }
.hall-seat.h1 { left: 6%; top: 10%; } .hall-seat.h2 { right: 8%; top: 4%; animation-delay: -1.2s; } .hall-seat.h3 { left: 18%; bottom: 0; animation-delay: -2.4s; } .hall-seat.h4 { right: 16%; bottom: 8%; animation-delay: -3.3s; }
.hall-desk { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 18px; background: var(--saffron); box-shadow: 0 0 60px rgba(255,122,26,.55); }
.ticker { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.tk-lbl { flex: none; font-weight: 800; color: var(--saffron); display: flex; gap: 6px; align-items: center; font-size: .86rem; } .ticker .marquee { flex: 1; }
.tk-item { display: inline-flex; gap: 8px; align-items: center; font-size: .86rem; white-space: nowrap; padding-right: 28px; } .tk-item em { font-style: normal; font-weight: 800; color: var(--mint); }
.formats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 22px; }
.fmt { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .fmt > .ic { color: var(--saffron); width: 24px; height: 24px; margin-bottom: 4px; } .fmt small { color: var(--muted); font-size: .82rem; }
.arena-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.arena-card { text-align: left; padding: 18px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: all .2s var(--ease); }
.arena-card:hover { border-color: var(--saffron); transform: translateY(-3px); box-shadow: var(--sh-2); }
.ac-top { display: flex; justify-content: space-between; align-items: center; }
.ac-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); flex: none; }
.live-dot { display: inline-flex; gap: 6px; align-items: center; font-size: .74rem; font-weight: 800; color: var(--mint); } .live-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: ping 1.6s infinite; }
.join-head { display: flex; gap: 12px; align-items: center; } .join-head div { display: flex; flex-direction: column; }
.size-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.size-pick button, .tier-pick button { padding: 12px 6px; border-radius: 14px; border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all .15s; font-size: .84rem; }
.size-pick button.on { border-color: var(--pen); background: var(--pen-soft); color: var(--pen); }
.tier-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; } .tier-pick b { font-family: var(--f-display); font-size: 1.15rem; } .tier-pick small { font-size: .7rem; color: var(--muted); text-align: center; line-height: 1.25; }
.tier-pick button.on { border-color: var(--mint); background: var(--mint-soft); } .tier-pick button.paid.on { border-color: var(--saffron); background: var(--saffron-soft); }
.join-wallet { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--line-2); margin: 16px 0; font-size: .9rem; } .join-wallet span { flex: 1; }
.room-wrap { min-height: 100vh; background: radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--pen) 22%, var(--paper)), var(--paper) 60%); }
.lobby { max-width: 680px; margin: 0 auto; padding: 18px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.lobby-top { display: flex; gap: 12px; align-items: center; } .lobby-top div { display: flex; flex-direction: column; line-height: 1.25; } .lobby-top small { color: var(--muted); }
.hall { display: grid; gap: 14px; margin: 20px 0; } .hall.s1 { grid-template-columns: 1fr; max-width: 220px; margin-inline: auto; width: 100%; } .hall.s2 { grid-template-columns: 1fr 1fr; } .hall.s3 { grid-template-columns: repeat(3, 1fr); } .hall.s4 { grid-template-columns: repeat(2, 1fr); }
.hseat { aspect-ratio: 1 / .95; border-radius: 24px; background: var(--card); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; position: relative; overflow: hidden; }
.hseat.in { animation: seatIn .6s var(--ease) both; animation-delay: var(--d); box-shadow: var(--sh-2); } .hseat.me { border-color: var(--pen); box-shadow: 0 0 0 4px var(--pen-soft), var(--sh-2); }
@keyframes seatIn { 0% { opacity: 0; transform: translateY(40px) scale(.8); } 60% { transform: translateY(-6px) scale(1.03); } 100% { opacity: 1; transform: none; } }
.hseat b { font-size: .9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hseat small { font-size: .74rem; color: var(--muted); display: flex; gap: 4px; align-items: center; } .hseat .bot { color: var(--pen); }
.hseat.empty { border-style: dashed; color: var(--muted); background: transparent; }
.radar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--pen); position: relative; opacity: .7; }
.radar::before, .radar::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--pen); animation: radar 1.8s infinite; } .radar::after { animation-delay: .9s; }
@keyframes radar { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }
.tips-rot { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .tips-rot span { color: var(--saffron); } .tips-rot p { margin: 0; font-size: .9rem; }
.countdown { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px; }
.cd-players { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cdp { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: seatIn .5s var(--ease) both; animation-delay: var(--d); } .cdp b { font-size: .86rem; }
.cd-players .vs { font-family: var(--f-display); font-weight: 800; color: var(--saffron); }
.cd-num { font-family: var(--f-display); font-size: 9rem; font-weight: 800; line-height: 1; color: var(--pen); } .cd-num.pop { animation: cdPop .9s var(--ease); }
@keyframes cdPop { 0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.85); opacity: .4; } }
.battle { min-height: 100vh; display: flex; flex-direction: column; }
.bt-top { display: flex; gap: 14px; align-items: center; padding: 14px 20px; } .bt-prog { flex: 1; display: flex; flex-direction: column; gap: 6px; } .bt-prog .segs { padding: 0; } .bt-prog .segs i.done { background: var(--pen); }
.ring-timer { --p: 100; width: 60px; height: 60px; position: relative; flex: none; display: grid; place-items: center; }
.ring-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); } .ring-timer circle { fill: none; stroke: var(--line); stroke-width: 4; } .ring-timer circle.fg { stroke: var(--pen); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .2s; }
.ring-timer b { font-family: var(--f-display); font-size: 1.3rem; position: relative; } .ring-timer.warn circle.fg { stroke: var(--danger); } .ring-timer.warn b { color: var(--danger); animation: pulse .5s infinite; }
.bt-main { flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 18px; padding: 0 20px 30px; max-width: 1180px; width: 100%; margin: 0 auto; align-items: start; }
.battle-q { max-width: none; } .battle-q.reveal { animation: none; }
.omr-opt .who { display: flex; margin-left: auto; } .omr-opt .who .av { margin-left: -6px; border: 2px solid var(--card); animation: pop .4s var(--ease); }
.pts-float { position: absolute; right: 16px; top: -6px; font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; animation: floatUp 1.2s var(--ease) forwards; pointer-events: none; } .pts-float.ok { color: var(--mint); } .pts-float.bad { color: var(--danger); }
@keyframes floatUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }
.lock-msg { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--line-2); font-weight: 700; display: flex; gap: 8px; align-items: center; animation: pop .35s var(--ease); }
.lock-msg.ok { background: var(--mint-soft); color: var(--mint); } .lock-msg.bad { background: var(--danger-soft); color: var(--danger); }
.live-board { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
.lb-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; transition: transform .4s var(--ease); position: relative; }
.lb-row b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-row.me { background: var(--pen-soft); }
.lb-bar { grid-column: 3 / 5; grid-row: 2; height: 5px; border-radius: 4px; background: var(--line-2); overflow: hidden; } .lb-bar em { display: block; height: 100%; background: var(--pen); border-radius: 4px; transition: width .6s var(--ease); } .lb-row.me .lb-bar em { background: var(--saffron); }
.pts { font-family: var(--f-display); font-weight: 800; } .ans-tick { position: absolute; right: 52px; color: var(--mint); animation: pop .3s; }
.finish { max-width: 760px; margin: 0 auto; padding: 30px 20px 60px; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 28px 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 140px; animation: seatIn .6s var(--ease) both; position: relative; }
.pod.p1 { animation-delay: .35s; } .pod.p2 { animation-delay: .15s; } .pod.p3 { animation-delay: .5s; }
.pod b { font-size: .9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pod em { font-style: normal; font-weight: 800; font-size: .86rem; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.pod-block { width: 100%; border-radius: 16px 16px 6px 6px; display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-size: 2rem; font-weight: 800; }
.p1 .pod-block { height: 120px; background: linear-gradient(180deg, var(--gold), #C98A00); } .p2 .pod-block { height: 86px; background: linear-gradient(180deg, #A9B1C9, #7E87A6); } .p3 .pod-block { height: 64px; background: linear-gradient(180deg, #E59A5B, #B66A2B); }
.pod.me b { color: var(--pen); } .crown { color: var(--gold); animation: flick 2s infinite; } .crown .ic { width: 30px; height: 30px; fill: currentColor; }
.podium.lb .pod { text-decoration: none; }

/* ---------- ADDA ---------- */
.adda-layout { display: grid; grid-template-columns: 220px 1fr 280px; gap: 18px; align-items: start; }
.adda-cats { position: sticky; top: calc(var(--top) + 10px); display: flex; flex-direction: column; gap: 2px; }
.cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-weight: 650; color: var(--ink-2); text-align: left; } .cat .ic { color: var(--c, var(--muted)); }
.cat span { flex: 1; } .cat em { font-style: normal; font-size: .74rem; color: var(--muted); } .cat:hover { background: var(--line-2); } .cat.on { background: var(--card); box-shadow: var(--sh-1); color: var(--ink); }
.rules-card { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--mint-soft); font-size: .84rem; } .rules-card > .ic { color: var(--mint); } .rules-card ul { padding-left: 18px; margin: 8px 0; }
.adda-side { position: sticky; top: calc(var(--top) + 10px); }
.helper { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .helper b { flex: 1; font-size: .88rem; } .helper em { font-style: normal; font-weight: 800; color: var(--helpful); }
.post { position: relative; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); margin-bottom: 12px; transition: border-color .15s; }
.post:hover { border-color: color-mix(in srgb, var(--pen) 35%, var(--line)); }
.post-link { position: absolute; inset: 0; z-index: 0; } .post header, .post footer, .post .au, .post button { position: relative; z-index: 1; }
.post header, .answer header { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.au { display: flex; align-items: center; gap: 10px; } .au span { display: flex; flex-direction: column; line-height: 1.25; } .au b { font-size: .9rem; } .au small { font-size: .76rem; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.cat-tag { display: inline-flex; gap: 5px; align-items: center; font-size: .74rem; font-weight: 750; padding: 4px 10px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.post-kind { margin-top: 12px; font-size: .76rem; font-weight: 800; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.post-kind .solved { color: var(--mint); display: inline-flex; gap: 4px; align-items: center; } .post-kind .pinned { color: var(--saffron); }
.post h3 { margin: 4px 0 6px; font-size: 1.06rem; line-height: 1.35; } .post p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.post-img { margin-top: 12px; border-radius: 12px; max-height: 340px; object-fit: cover; width: 100%; }
.post footer, .answer footer { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--muted); font-size: .86rem; } .post footer span { display: flex; gap: 5px; align-items: center; }
.react { display: inline-flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--line-2); font-weight: 750; transition: transform .2s; }
.react.on { background: var(--pen); color: #fff; } .react.on .ic { fill: currentColor; } .react.bump { transform: scale(1.15); }
.post.full { padding: 24px; } .post.full h1 { margin: 6px 0 12px; }
.thread { max-width: 820px !important; } .answers { display: flex; flex-direction: column; gap: 10px; }
.answer { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .answer.best { border: 2px solid var(--mint); }
.best-tag { display: inline-flex; gap: 5px; align-items: center; font-size: .76rem; font-weight: 800; color: var(--mint); margin-bottom: 8px; } .answer p { margin: 10px 0 0; }
.reply { margin-top: 16px; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 12px; box-shadow: var(--sh-2); }
.reply textarea { border: 0; outline: 0; resize: vertical; background: transparent; min-height: 70px; }
.cat-pick { display: flex; flex-wrap: wrap; gap: 8px; } .cat-pick button { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 99px; border: 1.5px solid var(--line); font-size: .84rem; font-weight: 650; } .cat-pick button .ic { color: var(--c); }
.cat-pick button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.seg.kinds button { font-size: .8rem; }
.mod-hint { display: none; gap: 6px; align-items: center; font-size: .82rem; font-weight: 700; color: var(--danger); padding: 8px 10px; border-radius: 10px; background: var(--danger-soft); } .mod-hint.on { display: flex; }
.fab { position: fixed; right: 18px; bottom: calc(var(--tabs) + 16px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 20px; background: var(--pen); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px -10px var(--pen); z-index: 20; } .fab .ic { width: 26px; height: 26px; }

/* ---------- JOBS ---------- */
.tag-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; } .tag-tabs::-webkit-scrollbar { display: none; }
.tt { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--ink-2); transition: all .15s; }
.tt.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.job { position: relative; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: box-shadow .2s, transform .2s var(--ease); }
.job:hover { box-shadow: var(--sh-2); transform: translateY(-2px); } .job .save, .job .icon-btn { position: relative; z-index: 1; }
.job-top { display: flex; gap: 12px; align-items: center; } .job-top img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; } .job-top > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.job-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); flex: none; }
.job h3 { margin: 2px 0 0; font-size: 1.02rem; line-height: 1.35; } .job p { margin: 0; }
.job-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .8rem; } .job-meta span { display: flex; gap: 4px; align-items: center; }
.deadline { display: flex; gap: 6px; align-items: center; font-weight: 750; font-size: .84rem; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; background: var(--line-2); } .deadline small { margin-left: auto; color: var(--muted); }
.deadline.soon { background: var(--saffron-soft); color: var(--saffron); } .deadline.closed { opacity: .6; }
.verified { display: inline-flex; gap: 4px; align-items: center; color: var(--mint); font-weight: 700; font-size: .78rem; }
.save.on .ic { fill: var(--pen); color: var(--pen); }
.job-detail, .reader { max-width: 860px !important; }
.jd-banner { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--r-l); margin: 14px 0; }
.jd-head { margin: 16px 0; } .jd-head .h1 { margin: 10px 0 6px; }
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 18px 0; }
.tl { padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .tl > .ic { color: var(--pen); margin-bottom: 4px; } .tl small { color: var(--saffron); font-weight: 700; } .tl.past { opacity: .55; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 18px 0; }
.facts div { padding: 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .facts .ic { color: var(--muted); } .facts small { color: var(--muted); font-size: .76rem; }
.video { position: relative; padding-top: 56.25%; border-radius: var(--r); overflow: hidden; margin: 18px 0; background: #000; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- ARTICLES / CA ---------- */
.lang-pick { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .84rem; font-weight: 650; }
.lang-pick button { padding: 6px 12px; border-radius: 9px; font-weight: 700; color: var(--muted); } .lang-pick button.on { background: var(--pen); color: #fff; } .lang-pick.inline { display: inline-flex; margin: 8px 0 18px; }
.intro-more { margin-bottom: 16px; } .intro-more summary { cursor: pointer; color: var(--pen); font-weight: 700; margin-bottom: 10px; }
.art-list { display: flex; flex-direction: column; gap: 8px; }
.art-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color .15s; } .art-row:hover { border-color: var(--pen); }
.art-row img { width: 84px; height: 64px; border-radius: 10px; object-fit: cover; } .art-row b { display: block; margin: 4px 0 2px; line-height: 1.35; } .art-row small { display: flex; gap: 5px; align-items: center; }
.art-date { width: 58px; height: 58px; border-radius: 14px; background: var(--omr-soft); color: var(--omr); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; flex: none; } .art-date b { font-family: var(--f-display); font-size: 1.4rem; margin: 0; } .art-date small { font-size: .7rem; font-weight: 700; }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .months article { padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--omr); } .months ul { padding-left: 18px; margin: 10px 0 0; font-size: .9rem; color: var(--ink-2); } .months li { margin: 6px 0; }
.cta-card { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r); background: var(--pen-soft); margin: 30px 0; } .cta-card > .ic { width: 30px; height: 30px; color: var(--pen); } .cta-card div { flex: 1; } .cta-card p { margin: 2px 0 0; }

/* ---------- centers, AI, leaderboard, profile, wallet ---------- */
.center-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ccard { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .2s; } .ccard:hover { box-shadow: var(--sh-2); }
.c-cover { width: 100%; height: 140px; object-fit: cover; } .c-cover.ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--pen-soft), var(--omr-soft)); color: var(--pen); } .c-cover.ph .ic { width: 40px; height: 40px; }
.c-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; } .c-body small { display: flex; gap: 4px; align-items: center; } .c-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.rating { display: inline-flex; gap: 4px; align-items: center; font-weight: 800; color: var(--gold); font-size: .86rem; }
.c-tags { display: flex; gap: 6px; flex-wrap: wrap; } .c-tags span { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--line-2); }
.c-foot { display: flex; gap: 12px; align-items: center; font-size: .84rem; color: var(--muted); } .c-foot span { display: flex; gap: 4px; align-items: center; } .c-foot b { color: var(--ink); }
.enquiry { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.ai { max-width: 860px !important; display: flex; flex-direction: column; height: calc(100vh - var(--top) - 50px); }
.ai-head { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .ai-head p { margin: 2px 0 0; }
.bot-av { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--pen), var(--omr)); color: #fff; flex: none; } .bot-av.lg { width: 48px; height: 48px; border-radius: 16px; }
.ai-log { flex: 1; overflow-y: auto; padding: 18px 0; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 88%; } .msg.user { align-self: flex-end; }
.msg .bub { padding: 12px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); line-height: 1.6; } .msg.user .bub { background: var(--pen); color: #fff; border-color: var(--pen); border-bottom-right-radius: 6px; } .msg.assistant .bub { border-top-left-radius: 6px; }
.msg .bub li { margin-left: 18px; list-style: disc; }
.typing .bub { display: flex; gap: 5px; } .typing .bub i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; } .typing .bub i:nth-child(2) { animation-delay: .2s; } .typing .bub i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .2; transform: translateY(-3px); } }
.ai-empty { text-align: center; margin: auto; color: var(--muted); } .ai-empty > .ic { width: 42px; height: 42px; color: var(--pen); } .ai-empty .chips { justify-content: center; flex-wrap: wrap; }
.ai-input { display: flex; gap: 10px; align-items: flex-end; padding: 10px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--sh-2); }
.ai-input textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; padding: 10px; max-height: 160px; }
.my-rank { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--pen-soft); color: var(--pen); margin-bottom: 12px; } .my-rank em { font-style: normal; font-weight: 800; }
.lb-list { display: flex; flex-direction: column; gap: 6px; } .lb-list .lb-row { grid-template-columns: auto auto 1fr auto; background: var(--card); border: 1px solid var(--line); padding: 10px 14px; } .lb-list .lb-row small { display: flex; gap: 6px; color: var(--muted); font-size: .76rem; } .lb-list em { font-style: normal; font-weight: 800; display: flex; gap: 5px; align-items: center; }
.rep-explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rx { padding: 18px; border-radius: var(--r); } .rx > .ic { width: 28px; height: 28px; } .rx b { display: block; font-size: 1.1rem; margin-top: 6px; } .rx p { margin: 4px 0 0; color: var(--ink-2); }
.c-aura-bg { background: color-mix(in srgb, var(--aura) 12%, var(--card)); color: var(--aura); } .c-respect-bg { background: color-mix(in srgb, var(--respect) 12%, var(--card)); color: var(--respect); } .c-helpful-bg { background: color-mix(in srgb, var(--helpful) 12%, var(--card)); color: var(--helpful); }
.rules { display: flex; flex-direction: column; gap: 6px; } .rule { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--mint); }
.rule.neg { border-left-color: var(--danger); } .rule span { display: flex; gap: 10px; } .rule em { font-style: normal; font-weight: 800; font-size: .88rem; } .rule small { grid-column: 1 / -1; }
.levels { display: flex; gap: 8px; flex-wrap: wrap; } .levels div { padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.bdg { padding: 16px 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bdg > .ic { width: 40px; height: 40px; padding: 9px; border-radius: 14px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); box-sizing: content-box; margin-bottom: 4px; } .bdg small { color: var(--muted); font-size: .76rem; } .bdg.locked { opacity: .5; filter: grayscale(1); }
.profile-hero { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); flex-wrap: wrap; } .profile-hero p { margin: 4px 0 8px; display: flex; gap: 6px; align-items: center; }
.lvl-bar { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; max-width: 320px; } .lvl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pen), var(--omr)); border-radius: 4px; }
.rep-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; } .rep-cards div { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; } .rep-cards b { font-family: var(--f-display); font-size: 1.6rem; } .rep-cards small { font-weight: 700; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; } .about-grid p { margin: 6px 0 0; }
.nudge { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--saffron-soft); margin-top: 14px; } .nudge div { flex: 1; display: flex; flex-direction: column; } .nudge > .ic:first-child { color: var(--saffron); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 150px; align-items: end; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.week div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .week i { width: 100%; max-width: 30px; min-height: 4px; border-radius: 8px 8px 4px 4px; background: var(--pen); transition: height .6s var(--ease); } .week b { font-size: .76rem; } .week small { font-size: .7rem; color: var(--muted); }
.acc-list { display: flex; flex-direction: column; gap: 8px; } .acc { display: grid; grid-template-columns: auto 140px 1fr auto; gap: 12px; align-items: center; } .acc span { color: var(--c); } .acc i { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; } .acc em { display: block; height: 100%; border-radius: 4px; }
.refer { display: flex; gap: 16px; align-items: flex-start; } .refer > .ic { width: 32px; height: 32px; color: var(--omr); } .refer p { margin: 4px 0 10px; }
.ref-code { display: flex; gap: 10px; align-items: center; } .ref-code code { font: 800 1.1rem var(--f-body); letter-spacing: .1em; padding: 6px 14px; border-radius: 10px; background: var(--line-2); border: 1.5px dashed var(--line); }
.ledger { display: flex; flex-direction: column; } .lg-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; } .lg-row span { display: flex; gap: 6px; align-items: center; } .lg-row em { font-style: normal; display: flex; gap: 8px; }
.wallet-hero { display: flex; justify-content: space-between; align-items: center; padding: 26px; border-radius: var(--r-l); background: linear-gradient(135deg, var(--mint), #0B7A50); color: #fff; } .wallet-hero b { display: block; font-family: var(--f-display); font-size: 3rem; letter-spacing: -.03em; line-height: 1.1; } .wallet-hero p { opacity: .85; margin: 4px 0 0; max-width: 46ch; } .wallet-hero > .ic { width: 64px; height: 64px; opacity: .3; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .pack { padding: 18px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 4px; transition: all .15s; } .pack:hover { border-color: var(--mint); transform: translateY(-2px); } .pack b { font-family: var(--f-display); font-size: 1.5rem; } .pack small { color: var(--muted); font-size: .76rem; }
.premium-card { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px; border-radius: var(--r-l); background: var(--ink); color: #fff; flex-wrap: wrap; } [data-theme="dark"] .premium-card { background: #090B22; border: 1px solid var(--line); }
.premium-card > div > .ic { color: var(--gold); width: 32px; height: 32px; } .premium-card ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; opacity: .9; } .premium-card li { display: flex; gap: 8px; align-items: center; } .premium-card li .ic { color: var(--gold); }
.notif-list { display: flex; flex-direction: column; gap: 6px; } .notif { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .notif p { margin: 2px 0 0; }
.notif.unread { border-left: 4px solid var(--pen); background: var(--card-2); } .n-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--pen-soft); color: var(--pen); flex: none; }
.notif.k-reward .n-ic { background: var(--saffron-soft); color: var(--saffron); } .notif.k-warning .n-ic { background: var(--danger-soft); color: var(--danger); } .notif.k-countdown .n-ic { background: var(--omr-soft); color: var(--omr); }
.av-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .av-pick button { padding: 4px; border-radius: 16px; border: 2px solid transparent; } .av-pick button.on { border-color: var(--pen); }

/* ---------- RESPONSIVE: mobile = native-app feel ---------- */
@media (max-width: 1180px) { .adda-layout { grid-template-columns: 200px 1fr; } .adda-side { display: none; } .subj-boards { grid-template-columns: 1fr 1fr; } .method { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1023px) {
  :root { --top: 58px; }
  .only-d { display: none !important; } .only-m { display: inline-flex !important; } .cat-scroll.only-m { display: block !important; }
  .top-in { padding: 0 10px; gap: 4px; } #top .logo-word { font-size: 1.22rem; }
  #view { padding: 14px 16px calc(var(--tabs) + 28px + env(safe-area-inset-bottom)); }
  #tabs { display: block; }
  .dock { height: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid var(--line); }
  .dock a.on::after { content: ''; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pen); } .dock a.hero.on::after { display: none; }
  .sheet-wrap { place-items: end center; } .sheet { width: 100% !important; max-height: 92vh; border-radius: 26px 26px 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
  .grip { display: block; width: 42px; height: 5px; border-radius: 5px; background: var(--line); margin: 10px auto 0; }
  .sheet-body { padding: 18px 20px 24px; }
  .hero { grid-template-columns: 1fr; gap: 26px; padding-top: 10px; } .hero-paper { transform: none; } .hero-paper::before { display: none; }
  .fam-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .fam { padding: 14px; } .fam-ic { width: 34px; height: 34px; }
  .subj-strip { grid-template-columns: repeat(4, 1fr); } .subj-boards, .upd-grid, .mode-grid { grid-template-columns: 1fr; }
  .arena-promo, .arena-hero { grid-template-columns: 1fr; padding: 24px; border-radius: 24px; } .ah-art { height: 170px; } .hall-seat { width: 66px; height: 66px; }
  .testi-wrap { grid-template-columns: 1fr; } .rating-card { position: static; }
  .formats { grid-template-columns: 1fr 1fr; }
  .adda-layout { grid-template-columns: 1fr; } .adda-cats { display: none; }
  .bt-main { grid-template-columns: 1fr; } .bt-main aside { order: -1; } .bt-main .live-board { flex-direction: row; overflow-x: auto; padding: 8px; gap: 6px; }
  .bt-main .lb-row { flex: none; grid-template-columns: auto auto auto; min-width: 140px; } .bt-main .lb-bar { display: none; } .bt-main .ans-tick { position: static; }
  .rep-cards { grid-template-columns: 1fr 1fr; } .rep-explain { grid-template-columns: 1fr; } .site-foot { grid-template-columns: 1fr; } .res-stats { grid-template-columns: repeat(3, 1fr); }
  .filter-bar { padding: 8px; gap: 8px; } .filter-bar select { flex: 1; min-width: 0; } .filter-bar .field { min-width: 100%; }
  .filter-bar.sticky { top: calc(var(--top) + 4px); }
  .page-head { margin-top: 4px; } .sec { margin-top: 40px; }
  .acc { grid-template-columns: auto 1fr auto; } .acc i { grid-column: 1 / -1; grid-row: 2; }
  .ai { height: calc(100vh - var(--top) - var(--tabs) - 40px); }
}
@media (max-width: 560px) {
  .grid2 { grid-template-columns: 1fr; } .subj-strip { grid-template-columns: repeat(3, 1fr); } .method { grid-template-columns: 1fr; } .sf-cols { grid-template-columns: 1fr 1fr; }
  .job-grid, .center-grid, .warm, .arena-grid { grid-template-columns: 1fr; } .ts-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .ts-card { padding: 12px; } .ts-card b { font-size: .86rem; }
  .size-pick { grid-template-columns: repeat(2, 1fr); } .hall.s3 { grid-template-columns: 1fr 1fr; } .pod { width: 104px; } .cd-num { font-size: 7rem; }
  .menu-grid { grid-template-columns: repeat(3, 1fr); } .ticket { width: 168px; } .tk-days { font-size: 2.6rem; }
  .result-hero { flex-direction: column; text-align: center; } .result-hero .row { justify-content: center; } .rh-ring { width: 130px; height: 130px; }
  .lang-sw span { padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .mq-track { animation: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
body:not(.ready) #view { opacity: 0; } body.ready #view { animation: fadeIn .3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }
.adda-main, .adda-layout > *, .bt-main > *, .testi-wrap > * { min-width: 0; }
.post h3, .post p, .answer p, .q-text { overflow-wrap: anywhere; }

/* ===================== v2 components ===================== */
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }
.sheet-scroll::-webkit-scrollbar { width: 6px; } .sheet-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 6px; } .sheet-scroll::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }
.sheet-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--line-2); color: var(--ink-2); transition: background .15s, transform .15s; }
.sheet-x:hover { background: var(--line); transform: rotate(90deg); }
.menu-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); font-size: .8rem; font-weight: 650; color: var(--danger); } .menu-grid button .ic { width: 22px; height: 22px; }
.page-head + .filter-bar { margin-top: 0; }
.crumbs-ui { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); margin: 0 0 14px; flex-wrap: wrap; } .crumbs-ui a:hover { color: var(--pen); } .crumbs-ui .ic { width: 14px; height: 14px; }
.sec.first { margin-top: 30px; }
/* hero video */
.hero-media { position: relative; }
.vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; background: #0D0F2B; box-shadow: var(--sh-2); text-align: left; }
.vid.big { box-shadow: var(--sh-3); transform: rotate(-1deg); } .vid.big:hover { transform: rotate(0); }
.vid img, .vid video, .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: var(--saffron); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,122,26,.25); transition: transform .2s var(--ease); }
.vid-play .ic { width: 30px; height: 30px; fill: #fff; margin-left: 4px; } .vid:hover .vid-play { transform: translate(-50%, -50%) scale(1.08); }
.vid-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.vid-meta small { padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.5); }
.vid.playing { transform: none; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* categories & sets */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; } .cat-grid.big { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cat-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; position: relative; overflow: hidden; }
.cat-card::after { content: ''; position: absolute; right: -24px; bottom: -24px; width: 80px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.cc-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); margin-bottom: 6px; } .cc-ic .ic { width: 23px; height: 23px; }
.cat-card small { color: var(--muted); font-size: .78rem; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.set-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--line); border-top: 4px solid var(--c); transition: transform .2s var(--ease), box-shadow .2s; }
.set-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.sc-top { display: flex; align-items: center; gap: 8px; } .sc-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
.sc-sub { font-size: .78rem; font-weight: 800; color: var(--c); flex: 1; } .set-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.sc-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .8rem; } .sc-meta span { display: flex; gap: 4px; align-items: center; }
.sc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .sc-go { color: var(--pen); font-weight: 800; display: flex; gap: 4px; align-items: center; }
.arena-filters select { min-width: 120px; }
.quick-f { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* PYQ */
.pyq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pyq-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: border-color .15s, transform .15s; } .pyq-card:hover { border-color: var(--c); transform: translateX(3px); }
.pyq-card h3 { margin: 0 0 2px; font-size: .98rem; line-height: 1.35; }
.pq-year { width: 64px; height: 64px; border-radius: 16px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); line-height: 1.05; }
.pq-year b { font-family: var(--f-display); font-size: 1.15rem; } .pq-year small { font-size: .62rem; font-weight: 800; text-align: center; } .pq-year.big { width: 86px; height: 86px; } .pq-year.big b { font-size: 1.5rem; }
.pq-type { display: inline-flex; gap: 5px; align-items: center; font-size: .74rem; font-weight: 700; color: var(--ink-2); margin-top: 4px; }
.pyq-head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; } .pyq-head .h1 { margin-bottom: 4px; }
.pyq-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 18px 0; } .pi { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); } .pi img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .pi small { display: block; padding: 6px; }
.lightbox img { width: 100%; border-radius: 12px; }
.q-img { max-width: 100%; max-height: 320px; border-radius: 12px; margin: 0 0 14px; border: 1px solid var(--line); }
/* blog — Prep Talks */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.talk { display: flex; flex-direction: column; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; } .talk:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.talk img, .talk-ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: linear-gradient(135deg, var(--pen-soft), var(--omr-soft)); display: block; }
.talk-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; } .talk h3 { margin: 0; font-size: 1.04rem; line-height: 1.35; } .talk p { margin: 0; font-size: .9rem; }
.talk.big { grid-column: span 2; } .talk.big h3 { font-size: 1.3rem; font-family: var(--f-display); }
.talk-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; padding: 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); margin-bottom: 20px; }
.talk-hero img, .talk-hero .talk-ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r); }
.talk-hero .h1 { margin: 10px 0; } .talk-hero .lead { margin-bottom: 10px; }
.talk-list { display: flex; flex-direction: column; gap: 12px; }
.talk-row { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: border-color .15s; } .talk-row:hover { border-color: var(--pen); }
.talk-row img, .talk-row .talk-ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; } .talk-row h3 { margin: 6px 0; font-size: 1.12rem; line-height: 1.35; } .talk-row p { margin: 0 0 6px; }
.post-read { max-width: 860px !important; } .post-read header { margin-bottom: 18px; } .post-read .display { margin: 10px 0; }
.byline { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .byline div { display: flex; flex-direction: column; }
.by-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--pen); color: #fff; font-weight: 800; }
.post-cover { width: 100%; border-radius: var(--r-l); margin: 6px 0 22px; aspect-ratio: 1200/630; object-fit: cover; }
.post-layout { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; } .post-layout .toc:empty { display: none; } .post-layout:has(.toc:empty) { grid-template-columns: 1fr; }
.toc { position: sticky; top: calc(var(--top) + 16px); display: flex; flex-direction: column; gap: 6px; font-size: .86rem; padding-left: 12px; border-left: 2px solid var(--line); } .toc b { font-size: .76rem; color: var(--muted); } .toc a { color: var(--ink-2); } .toc a:hover { color: var(--pen); } .toc a.sub { padding-left: 10px; }
.prose.lg h2 { font-size: 1.45rem; } .prose.lg h3 { font-size: 1.15rem; } .prose img { margin: 12px 0; }
/* tournaments */
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .tour-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; }
.tour-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r); background: linear-gradient(135deg, var(--saffron-soft), var(--card)); border: 1px solid var(--line); } .tour-card img { width: 90px; height: 90px; border-radius: 14px; object-fit: cover; }
.tc-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--saffron); color: #fff; flex: none; } .tc-ic .ic { width: 30px; height: 30px; } .tour-card h3 { margin: 6px 0 2px; font-size: 1rem; }
.prize-split { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; } .prize-split div { padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; } .prize-split span { font-family: var(--f-display); font-size: 1.3rem; color: var(--saffron); }
.st-live { background: var(--mint-soft); color: var(--mint); } .st-upcoming { background: var(--pen-soft); color: var(--pen); } .st-ended, .st-paid_out { background: var(--line-2); color: var(--muted); }
/* home extras */
.upd-list { display: flex; flex-direction: column; padding: 6px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.adda-mini { display: flex; flex-direction: column; gap: 8px; } .adda-mini > .btn { align-self: flex-start; margin-top: 6px; }
.am-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .am-row b { display: block; } .am-n { display: flex; gap: 4px; align-items: center; color: var(--muted); font-weight: 700; }
.mini-lb { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .ml-row { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-align: center; } .ml-row b { font-size: .86rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .ml-row em { font-style: normal; font-weight: 800; display: flex; gap: 4px; align-items: center; }
.pos.p1 { background: var(--gold); color: #fff; } .pos.p2 { background: #A9B1C9; color: #fff; } .pos.p3 { background: #E59A5B; color: #fff; }
.cta-band { margin-top: 56px; padding: 34px; border-radius: 28px; background: linear-gradient(135deg, var(--pen), #5B2FD9); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .cta-band p { opacity: .85; margin: 6px 0 0; }
.sb-head h3, .syl h3, .method h3 { margin: 0; font-size: 1rem; font-family: var(--f-body); letter-spacing: 0; } .sb-head h3 { flex: 1; }
.streak { margin-left: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.st-top { display: flex; align-items: center; gap: 6px; } .st-top b { font-family: var(--f-display); font-size: 1.3rem; } .st-top small { font-size: .72rem; color: var(--muted); }
.st-dots { display: flex; gap: 4px; } .st-dots i { width: 18px; height: 22px; border-radius: 6px; background: var(--line-2); display: flex; align-items: flex-end; justify-content: center; } .st-dots i small { font-size: .55rem; color: var(--muted); font-style: normal; line-height: 1.6; } .st-dots i.on { background: var(--saffron); } .st-dots i.on small { color: #fff; }
.week div.on .dotday { width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); }
.site-foot .sf-cols { grid-template-columns: repeat(4, 1fr); }
.c-ink { color: var(--ink); font-weight: 700; }
.pack small { display: block; }
@media (max-width: 1023px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } .talk.big { grid-column: auto; } .talk-hero, .post-layout { grid-template-columns: 1fr; } .toc { display: none; } .talk-row { grid-template-columns: 120px 1fr; gap: 12px; } .talk-row p { display: none; } .mini-lb { grid-template-columns: repeat(3, 1fr); } .vid.big { transform: none; } .site-foot .sf-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cat-grid, .cat-grid.big { grid-template-columns: repeat(2, 1fr); } .set-grid, .pyq-grid, .tour-grid, .tour-strip { grid-template-columns: 1fr; } .mini-lb { grid-template-columns: repeat(2, 1fr); } .md-greet { flex-wrap: wrap; } .streak { margin-left: 0; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; } }

@media (max-width: 560px) { .pyq-head { flex-direction: column; align-items: flex-start; } .talk-hero { padding: 10px; } }

/* ===================== v3 ===================== */
/* header: brand | centered nav | actions */
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; }
.top-nav { justify-content: center; flex: none; }
.top-right { justify-self: end; gap: 8px; }
.top-right .signin { margin-left: 4px; }
.lang-sw { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--line-2); border: 1px solid var(--line); }
.lang-sw button { min-width: 38px; height: 30px; padding: 0 10px; border-radius: 9px; font: 800 .78rem/1 var(--f-body); color: var(--muted); transition: background .2s, color .2s; }
.lang-sw button.hi { font-family: var(--f-hi), 'Noto Sans Devanagari', sans-serif; font-size: .86rem; font-weight: 700; }
.lang-sw button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.lang-sw span { display: none; }
@media (max-width: 1023px) { .top-in { display: flex; } .top-right { margin-left: auto; gap: 4px; } .lang-sw button { min-width: 32px; padding: 0 7px; } }
/* notice ticker */
.ticker-bar { display: none; align-items: center; gap: 10px; height: 38px; padding: 0 0 0 16px; border-top: 1px solid var(--line); background: var(--card); overflow: hidden; }
body.show-ticker .ticker-bar { display: flex; }
.tb-lbl { flex: none; display: flex; gap: 6px; align-items: center; color: var(--saffron); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.ticker-bar .marquee { flex: 1; } .ticker-bar .mq-track { animation-duration: 45s; gap: 32px; }
.tb-item { display: inline-flex; gap: 6px; align-items: center; font-size: .86rem; font-weight: 650; white-space: nowrap; color: var(--ink-2); } .tb-item:hover { color: var(--pen); }
.tb-item .ic { color: var(--pen); width: 15px; height: 15px; } .tb-item.t-hot .ic { color: var(--danger); } .tb-item.t-new .ic { color: var(--mint); }
/* hero: video only */
.hero-points { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px; color: var(--ink-2); font-weight: 650; font-size: .92rem; } .hero-points span { display: flex; gap: 6px; align-items: center; } .hero-points .ic { color: var(--mint); }
.hero-art { position: relative; aspect-ratio: 16/10; border-radius: var(--r-l); background: radial-gradient(120% 120% at 80% 10%, #5B2FD9, var(--pen) 45%, #14163A); overflow: hidden; box-shadow: var(--sh-3); }
.ha-ring { position: absolute; width: 60%; aspect-ratio: 1; left: 20%; top: 20%; border-radius: 50%; border: 18px solid rgba(255,255,255,.08); animation: seatFloat 6s ease-in-out infinite; }
.ha-card { position: absolute; display: flex; gap: 8px; align-items: center; padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(6px); animation: seatFloat 4.5s ease-in-out infinite; }
.ha-card b { font-family: var(--f-display); font-size: 1.4rem; } .ha-card.c1 { left: 10%; top: 14%; } .ha-card.c2 { right: 10%; top: 38%; animation-delay: -1.5s; } .ha-card.c3 { left: 24%; bottom: 12%; animation-delay: -3s; background: var(--saffron); border-color: transparent; }
/* exam-wise category cards look different from subject-wise */
.cat-card.exam { background: linear-gradient(140deg, color-mix(in srgb, var(--c) 16%, var(--card)), var(--card) 70%); border-width: 1.5px; }
.cat-card.exam em { font-style: normal; font-size: .7rem; font-weight: 800; color: var(--c); margin-top: 4px; display: inline-flex; }
.exam-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
.fam-n { font-style: normal; font-size: .76rem; font-weight: 800; color: var(--c); margin-top: 6px; }
/* Prep Talks 3-up auto-scrolling carousel */
.talk-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.talk-carousel::-webkit-scrollbar { display: none; } .talk-carousel > * { scroll-snap-align: start; }
@media (max-width: 1023px) { .talk-carousel { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .talk-carousel { grid-auto-columns: 86%; } }
/* Adda promo */
.adda-promo { margin-top: 56px; border-radius: 28px; padding: 34px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; background: linear-gradient(135deg, var(--mint-soft), var(--pen-soft)); border: 1px solid var(--line); }
.adda-promo .h1 { margin: 12px 0 8px; } .adda-promo p { color: var(--ink-2); margin: 0 0 18px; max-width: 52ch; }
.ap-bubbles { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bb { display: inline-flex; gap: 8px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--sh-2); font-weight: 650; animation: seatFloat 5s ease-in-out infinite; }
.bb.q { border-bottom-left-radius: 4px; } .bb.a { margin-left: 40px; border-bottom-right-radius: 4px; animation-delay: -1.6s; } .bb.h { margin-left: 12px; color: var(--mint); animation-delay: -3s; } .bb .ic { color: var(--pen); }
/* why Rankr */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.why-grid article { padding: 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; animation: qIn .5s var(--ease) both; animation-delay: var(--d); }
.why-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--pen); color: #fff; margin-bottom: 6px; } .why-grid article:nth-child(2) .why-ic { background: var(--saffron); } .why-grid article:nth-child(3) .why-ic { background: var(--omr); } .why-grid article:nth-child(4) .why-ic { background: var(--mint); }
.why-grid h3 { margin: 0; font-size: 1.06rem; } .why-grid p { margin: 0; color: var(--ink-2); font-size: .92rem; flex: 1; }
/* About band (centered, optional video) + centered FAQ */
.about-band { margin-top: 56px; padding: 48px 24px; border-radius: 28px; background: radial-gradient(90% 120% at 0% 0%, var(--pen-soft), transparent 60%), radial-gradient(90% 120% at 100% 100%, var(--saffron-soft), transparent 60%), var(--card); border: 1px solid var(--line); }
.ab-in { max-width: 820px; margin: 0 auto; text-align: center; } .ab-in.has-vid { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; text-align: left; }
.ab-in .h1 { margin: 12px 0 8px; } .ab-in .lead { margin-left: auto; margin-right: auto; } .ab-in.has-vid .lead { margin-left: 0; } .ab-in .prose { text-align: left; }
.center-sec .sec-head { justify-content: center; text-align: center; } .center-sec .sec-head p { margin-left: auto; margin-right: auto; } .center-sec .faq { margin: 0 auto; }
/* PYQ hub */
.exam-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.exam-pyq { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c); transition: transform .15s, box-shadow .2s; } .exam-pyq:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.exam-pyq h2 { margin: 2px 0; } .ep-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); flex: none; }
/* upcoming exams */
.ex-ph { display: grid !important; place-items: center; align-content: center; gap: 6px; color: var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--card)), var(--card)) !important; } .ex-ph .ic { width: 40px; height: 40px; } .ex-ph b { font-family: var(--f-display); font-size: 1.3rem; }
.ex-date { display: flex; gap: 5px; align-items: center; color: var(--saffron); font-weight: 700; }
.elig { padding: 22px; border-radius: var(--r-l); background: var(--mint-soft); } .elig .h2 { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.c-saffron { color: var(--saffron); font-weight: 700; }
/* quiz sheet */
.qs-head { display: flex; gap: 12px; align-items: center; padding-right: 40px; } .qs-head .h3 { margin: 2px 0 0; }
.qs-specs { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .84rem; font-weight: 650; margin: 12px 0 4px; } .qs-specs span { display: flex; gap: 4px; align-items: center; }
.mode-pick { display: flex; flex-direction: column; gap: 8px; }
.mode-pick button { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); text-align: left; transition: all .15s; }
.mode-pick button > .ic { width: 22px; height: 22px; color: var(--pen); } .mode-pick button div { flex: 1; display: flex; flex-direction: column; } .mode-pick small { color: var(--muted); font-size: .8rem; }
.radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; transition: all .15s; }
.mode-pick button.on { border-color: var(--pen); background: var(--pen-soft); } .mode-pick button.on .radio-dot { border: 6px solid var(--pen); }
/* result */
.score-bd { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-weight: 700; margin: 6px 0 0; font-size: .92rem; }
.rh-ring.neg { background: conic-gradient(var(--danger) 100%, var(--line-2) 0); } .rh-ring.neg b { color: var(--danger); }
@media (max-width: 1023px) { .why-grid { grid-template-columns: 1fr 1fr; } .adda-promo, .ab-in.has-vid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } .adda-promo { padding: 24px; } .about-band { padding: 32px 18px; } }

/* ===================== v4 ===================== */
.exam-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.exam-carousel::-webkit-scrollbar { display: none; } .exam-carousel > * { scroll-snap-align: start; }
.exam-carousel .talk h3 { font-size: .98rem; }
@media (max-width: 1023px) { .exam-carousel { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .exam-carousel { grid-auto-columns: 78%; } }
/* testimonials slider */
.testi-rail { columns: auto; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: stretch; }
.testi-rail::-webkit-scrollbar { display: none; } .testi-rail .testi { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; } .testi-rail .testi footer { margin-top: auto; }
@media (max-width: 560px) { .testi-rail { grid-auto-columns: 88%; } }
/* ad slot */
.ad-slot { margin-top: 36px; position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.ad-slot img { width: 100%; height: auto; display: block; } .ad-slot > :not(.ad-lbl) { display: block; }
.ad-lbl { position: absolute; top: 8px; right: 10px; z-index: 1; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }
/* ticker kinds */
.tb-kind { display: inline-flex; gap: 4px; align-items: center; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; margin-right: 2px; }
.tb-item.t-exam .tb-kind { background: var(--pen-soft); color: var(--pen); } .tb-item.t-exam .tb-kind .ic { color: var(--pen); }
.tb-item.t-job .tb-kind { background: var(--mint-soft); color: var(--mint); } .tb-item.t-job .tb-kind .ic { color: var(--mint); }
/* footer SEO links */
.sf-seo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 24px; padding-top: 18px; border-top: 1px dashed var(--line); }
.sf-seo b { font-size: .8rem; color: var(--ink-2); } .sf-seo p { margin: 6px 0 0; font-size: .8rem; line-height: 1.9; color: var(--muted); }
.sf-seo a { color: var(--muted); } .sf-seo a:hover { color: var(--pen); text-decoration: underline; } .sf-seo span { margin: 0 6px; opacity: .5; }
.center-head { justify-content: center; text-align: center; } .center-head p { margin-left: auto; margin-right: auto; }