/* ═══════════════════════════════════════════════
   ABC COACHING CENTRE — style.css  FINAL FIX
   Light Theme (original) + All new screens fixed
═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --bg:     #f5f6fa;
  --surf:   #ffffff;
  --surf2:  #f0f2f8;
  --card:   #ffffff;
  --border: #e2e6f0;
  --gold:   #d4920a;
  --gold2:  #b87a00;
  --accent: #c9880a;
  --green:  #16a34a;
  --red:    #dc2626;
  --blue:   #2563eb;
  --muted:  #6b7280;
  --text:   #111827;
  --radius: 14px;
}

html, body {
  height: 100%; overflow: hidden;
  background: #e8eaf0;
  font-family: 'Hind', 'Noto Sans Devanagari', sans-serif;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar { display: none; }
button { font-family: 'Hind', sans-serif; cursor: pointer; border: none; }
input  { font-family: 'Hind', 'Noto Sans Devanagari', sans-serif; outline: none; }
.serif { font-family: 'Baloo 2', cursive; }

/* ── APP SHELL ──────────────────────────────── */
#app {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #e8eaf0;
}

.screen {
  width: 390px; height: 844px;
  background: var(--bg);
  border-radius: 46px; overflow: hidden;
  box-shadow: 0 0 0 10px #d0d4e0, 0 0 0 12px #c8ccd8, 0 40px 100px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  position: absolute;
  transition: opacity .25s, transform .25s;
}
@media (max-height:900px) { .screen { height:100vh; border-radius:0; box-shadow:none; width:100%; max-width:430px; } }
@media (max-width:430px)  { .screen { width:100%; border-radius:0; box-shadow:none; height:100svh; } }

.screen.hidden { opacity:0; pointer-events:none; transform:translateY(16px); }
.screen.active  { opacity:1; pointer-events:all; transform:translateY(0); }
.scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.hidden { display:none !important; }

/* ══════════════════════════════════════════════
   WELCOME SCREEN — Fully visible, all inputs working
══════════════════════════════════════════════ */
#screen-welcome { background: #ffffff; }

.welcome-wrap { 
  width:100%; min-height:100%;
  background: #ffffff;
  display:flex; flex-direction:column;
}

.welcome-hero {
  text-align:center;
  padding: 40px 24px 28px;
  background: linear-gradient(160deg, #1e3a6e 0%, #1a3060 100%);
}
.welcome-logo  { font-size:56px; margin-bottom:12px; }
.welcome-title { font-family:'Baloo 2',cursive; font-size:22px; font-weight:800; color:#fff; margin-bottom:4px; }
.welcome-sub   { font-size:13px; color:#FFD700; margin-bottom:10px; }
.welcome-desc  {
  font-size:12px; color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:10px 14px;
  margin:0 auto; max-width:300px; line-height:1.6;
}

.welcome-form { padding:20px 16px 32px; background:#ffffff; flex:1; }

.wf-field { margin-bottom:20px; }
.wf-label {
  display:block; font-size:12px; font-weight:700;
  color:#374151; margin-bottom:8px; letter-spacing:.3px;
}

.wf-input {
  width:100%; background:#f9fafb;
  border:1.5px solid #d1d5db;
  border-radius:12px; padding:13px 16px;
  font-size:15px; color:#111827;
  transition:border-color .2s;
}
.wf-input:focus { border-color:#d4920a; background:#fff; }
.wf-input::placeholder { color:#9ca3af; }

/* Class Grid */
.wf-class-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.wf-class-btn {
  background:#f9fafb;
  border:2px solid #e5e7eb;
  border-radius:12px; padding:10px 4px;
  text-align:center; cursor:pointer;
  transition:all .15s;
}
.wf-class-btn.selected {
  border-color:#d4920a;
  background:#fffbea;
}
.wf-class-btn:active { transform:scale(.95); }
.wcb-num { font-size:18px; font-weight:800; color:#1e3a6e; line-height:1; }
.wcb-lbl { font-size:9px; color:#6b7280; margin-top:3px; line-height:1.3; }
.wcb-lbl span { font-size:8px; color:#9ca3af; }

/* Board Row */
.wf-board-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wf-board-btn {
  background:#f9fafb;
  border:2px solid #e5e7eb;
  border-radius:14px; padding:14px 12px;
  text-align:center; cursor:pointer;
  transition:all .15s;
}
.wf-board-btn.selected {
  border-color:#d4920a;
  background:#fffbea;
}
.wf-board-btn:active { transform:scale(.97); }
.wbb-icon { font-size:24px; margin-bottom:6px; }
.wbb-name { font-size:14px; font-weight:700; color:#111827; }
.wbb-sub  { font-size:10px; color:#6b7280; margin-top:2px; }

.w-error {
  color:#dc2626; font-size:12px; margin-bottom:10px;
  padding:8px 12px; background:#fef2f2;
  border-radius:8px; border:1px solid #fecaca;
}
.welcome-note {
  text-align:center; font-size:11px;
  color:#9ca3af; margin-top:14px; line-height:1.5;
}

/* ══════════════════════════════════════════════
   PROFILE SCREEN
══════════════════════════════════════════════ */
#screen-profile { background:#ffffff; }

.profile-hero {
  text-align:center;
  padding:32px 20px 20px;
  background:linear-gradient(160deg,#1e3a6e,#1a3060);
}
.ph-avatar { font-size:52px; margin-bottom:8px; }
.ph-name   { font-size:20px; font-weight:700; color:#fff; margin-bottom:4px; }
.ph-meta   { font-size:13px; color:#FFD700; }

/* ── HOME HEADER ────────────────────────────── */
.home-hdr {
  background:linear-gradient(135deg,#1e3a6e,#1a3060);
  padding:14px 16px 12px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.hdr-left  { display:flex; align-items:center; gap:10px; }
.hdr-right { display:flex; align-items:center; gap:6px; }

.logo-box {
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 4px 14px rgba(255,215,0,.3);
}
.hdr-title { font-family:'Baloo 2',cursive; font-size:15px; font-weight:800; color:#fff; }
.hdr-sub   { font-size:9px; color:rgba(255,255,255,.55); font-weight:600; }

.admin-gear {
  background:rgba(255,255,255,.1); border-radius:10px;
  padding:8px 10px; font-size:16px; color:rgba(255,255,255,.7);
}
.admin-gear:active { background:rgba(255,255,255,.2); }

.profile-btn {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  color:#fff; width:36px; height:36px; border-radius:50%;
  font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.profile-btn:active { opacity:.7; }

/* ── HOME BODY ──────────────────────────────── */
.home-body { flex:1; padding:12px; }

/* ── ADMISSION BANNER ───────────────────────── */
.admission-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#7c3a00,#5a2800,#7c3a00);
  border-radius:16px; border:2px solid rgba(255,215,0,.3);
  padding:14px 12px; margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
  cursor:pointer; transition:transform .1s;
  box-shadow:0 8px 30px rgba(255,215,0,.1);
}
.admission-banner:active { transform:scale(.99); }
.ab-glow {
  position:absolute; width:200px; height:200px;
  background:radial-gradient(circle,rgba(255,215,0,.12),transparent 70%);
  top:-50px; right:-30px; pointer-events:none;
}
.ab-left  { flex:1; position:relative; z-index:1; }
.ab-badge {
  display:inline-block; background:var(--red); color:#fff;
  font-size:9px; font-weight:800; padding:2px 8px; border-radius:99px;
  margin-bottom:5px; animation:blink 1s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.5} }
.ab-title { font-family:'Baloo 2',cursive; font-size:16px; font-weight:900; color:var(--gold); margin-bottom:3px; }
.ab-sub   { font-size:10px; color:rgba(255,255,255,.5); margin-bottom:7px; line-height:1.5; }
.ab-chips { display:flex; gap:5px; flex-wrap:wrap; }
.ab-chip  { font-size:9px; font-weight:700; padding:3px 8px; border-radius:99px; }
.ab-chip.gold  { background:rgba(255,215,0,.15); color:var(--gold); border:1px solid rgba(255,215,0,.3); }
.ab-chip.green { background:rgba(34,197,94,.12); color:#4ade80; border:1px solid rgba(34,197,94,.25); }
.ab-arrow { font-size:22px; color:var(--gold); position:relative; z-index:1; }

/* ── FILTERS ────────────────────────────────── */
.filter-section { margin-bottom:10px; }
.filter-label   { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }

.board-filter-row, .subj-filter-row {
  display:flex; gap:6px; overflow-x:auto; padding-bottom:3px;
}
.bf-btn, .sf-btn {
  padding:5px 12px; border-radius:99px;
  font-size:11px; font-weight:700;
  background:#fff; color:var(--muted);
  border:1.5px solid var(--border);
  white-space:nowrap; flex-shrink:0;
  cursor:pointer; transition:all .15s;
}
.bf-btn.active, .sf-btn.active {
  background:var(--gold); color:#111; border-color:var(--gold);
}

/* ── QUIZ COUNT ─────────────────────────────── */
.quiz-count-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.qc-label { font-size:12px; font-weight:700; color:var(--text); }
.qc-badge { background:#f0f2f8; color:var(--muted); font-size:10px; font-weight:700; padding:2px 9px; border-radius:99px; border:1px solid var(--border); }

/* ── EMPTY STATE ────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 24px; text-align:center; }
.empty-icon  { font-size:48px; }
.empty-title { font-size:15px; font-weight:700; color:var(--text); }
.empty-sub   { font-size:12px; color:var(--muted); line-height:1.6; }

/* ── QUIZ CARD ──────────────────────────────── */
.quiz-card {
  background:#fff; border-radius:var(--radius);
  border:1.5px solid var(--border); padding:13px;
  margin-bottom:9px; display:flex; gap:11px; align-items:center;
  cursor:pointer; transition:transform .1s, border-color .2s;
}
.quiz-card:active { transform:scale(.99); }
.quiz-card:hover  { border-color:rgba(255,215,0,.3); }

.qcard-icon {
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,179,0,.06));
  border:1px solid rgba(255,215,0,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.qcard-body { flex:1; min-width:0; }
.qcard-name { font-size:12px; font-weight:700; color:var(--text); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qcard-meta { font-size:10px; color:var(--muted); margin-bottom:5px; }
.qcard-chips { display:flex; gap:4px; flex-wrap:wrap; }
.chip { display:inline-block; padding:2px 7px; border-radius:99px; font-size:9px; font-weight:700; }
.chip-class { background:rgba(139,92,246,.15); color:#7c3aed; border:1px solid rgba(139,92,246,.25); }
.chip-subj  { background:rgba(59,130,246,.15); color:#2563eb; border:1px solid rgba(59,130,246,.25); }
.chip-board { background:rgba(255,179,0,.12); color:var(--gold2); border:1px solid rgba(255,179,0,.25); }
.chip-qs    { background:rgba(34,197,94,.12); color:#16a34a; border:1px solid rgba(34,197,94,.2); }
.qcard-right { display:flex; flex-direction:column; align-items:center; gap:5px; }
.qcard-arrow { font-size:18px; color:var(--muted); }
.qcard-del {
  background:rgba(239,68,68,.1); border-radius:8px;
  padding:5px 7px; font-size:13px;
  border:1px solid rgba(239,68,68,.2); transition:transform .1s;
}
.qcard-del:active { transform:scale(.93); }

/* ── UPLOAD SHEET ───────────────────────────── */
.overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:flex-end;
  z-index:100; border-radius:inherit; transition:opacity .25s;
}
.overlay.hidden { opacity:0; pointer-events:none; }
.bottom-sheet {
  background:#fff; border-radius:24px 24px 0 0;
  padding:14px 18px 28px; width:100%;
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--border);
}
.sheet-handle { width:36px; height:4px; background:var(--border); border-radius:99px; margin:0 auto 4px; }
.sheet-title  { font-size:16px; font-weight:800; color:var(--text); font-family:'Baloo 2',cursive; }
.sheet-sub    { font-size:11px; color:var(--muted); }

.drop-zone {
  border:2px dashed var(--border); border-radius:var(--radius);
  padding:22px 16px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s; background:#fff;
}
.drop-zone:hover, .drop-zone.drag-over { border-color:var(--gold); background:rgba(255,215,0,.04); }
.drop-icon { font-size:32px; margin-bottom:6px; }
.drop-text { font-size:13px; font-weight:700; color:var(--text); }
.drop-hint { font-size:11px; color:var(--muted); margin-top:3px; }

.upload-error {
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
  border-radius:10px; padding:9px 12px;
  font-size:12px; color:#dc2626; font-weight:600;
}

/* ── TOP BAR DARK ───────────────────────────── */
.top-bar-dark {
  background:linear-gradient(135deg,#1e3a6e,#1a3060);
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.tbar-title { font-size:13px; font-weight:700; color:#FFD700; flex:1; text-align:center; font-family:'Baloo 2',cursive; }
.back-btn {
  background:rgba(255,255,255,.1); border-radius:10px;
  padding:6px 12px; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.8); width:60px;
}

/* ── ADMISSION HERO ─────────────────────────── */
.admission-hero {
  background:linear-gradient(160deg,#1e3a6e,#1a3060,#1e3a6e);
  padding:24px 18px 22px; text-align:center;
  border-bottom:1px solid rgba(255,215,0,.15);
}
.ah-icon  { font-size:44px; margin-bottom:8px; }
.ah-title { font-family:'Baloo 2',cursive; font-size:20px; font-weight:900; color:#FFD700; margin-bottom:3px; }
.ah-sub   { font-size:13px; color:rgba(255,255,255,.6); margin-bottom:2px; }
.ah-desc  { font-size:11px; color:rgba(255,255,255,.4); margin-bottom:12px; }

.scholarship-chips { display:flex; flex-direction:column; gap:5px; max-width:280px; margin:0 auto; }
.sch-chip { padding:5px 12px; border-radius:99px; font-size:10px; font-weight:700; text-align:center; }
.sch-chip.c100 { background:rgba(255,215,0,.15); color:#FFD700; border:1px solid rgba(255,215,0,.3); }
.sch-chip.c75  { background:rgba(255,215,0,.1); color:#fbbf24; border:1px solid rgba(255,215,0,.2); }
.sch-chip.c50  { background:rgba(192,192,192,.1); color:#9ca3af; border:1px solid rgba(192,192,192,.2); }
.sch-chip.c30  { background:rgba(205,127,50,.1); color:#d97706; border:1px solid rgba(205,127,50,.2); }

/* ── ADMISSION CLASS SELECT ─────────────────── */
.adm-class-select { padding:16px; }
.acs-title { font-size:16px; font-weight:800; color:var(--text); font-family:'Baloo 2',cursive; margin-bottom:4px; text-align:center; }
.acs-sub   { font-size:12px; color:var(--muted); text-align:center; margin-bottom:14px; }
.acs-grid  { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.acs-card  {
  background:#fff; border:2px solid var(--border);
  border-radius:16px; padding:18px 14px;
  text-align:center; cursor:pointer; transition:all .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.acs-card:active { transform:scale(.97); }
.acs-card:hover  { border-color:var(--gold); box-shadow:0 4px 16px rgba(212,146,10,.2); }
.acs-num   { font-family:'Baloo 2',cursive; font-size:28px; font-weight:900; color:#1e3a6e; margin-bottom:4px; }
.acs-lbl   { font-size:11px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.acs-arrow { font-size:18px; color:var(--gold); font-weight:700; }
.acs-note  { font-size:10px; color:var(--muted); text-align:center; line-height:1.6; background:#fffbea; border:1px solid rgba(212,146,10,.25); border-radius:8px; padding:8px 12px; }

/* ── ALREADY ATTEMPTED ──────────────────────── */
.already-box { margin:16px; background:#fff; border-radius:16px; border:2px solid rgba(239,68,68,.3); padding:24px; text-align:center; }
.already-icon  { font-size:44px; margin-bottom:8px; }
.already-title { font-family:'Baloo 2',cursive; font-size:18px; font-weight:800; color:#dc2626; margin-bottom:8px; }
.already-class { font-size:14px; font-weight:700; color:#1e3a6e; margin-bottom:6px; font-family:'Baloo 2',cursive; }
.already-score { font-size:24px; font-weight:900; color:var(--gold); margin-bottom:4px; }
.already-date  { font-size:11px; color:var(--muted); margin-bottom:8px; }
.already-sub   { font-size:11px; color:var(--muted); margin-bottom:16px; line-height:1.6; }

/* ── ADMISSION FORM ─────────────────────────── */
.admission-form   { padding:16px; display:flex; flex-direction:column; gap:12px; }
.aform-field      { display:flex; flex-direction:column; gap:6px; }
.afield-label     { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.afield-input     { width:100%; background:#f9fafb; border:1.5px solid var(--border); border-radius:11px; padding:11px 13px; font-size:14px; color:var(--text); transition:border-color .2s; }
.afield-input:focus { border-color:var(--gold); }
.afield-input::placeholder { color:#9ca3af; }
.adm-error        { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); border-radius:10px; padding:9px 12px; font-size:12px; color:#dc2626; font-weight:600; }
.adm-note         { font-size:10px; color:var(--muted); text-align:center; line-height:1.6; padding:0 8px; }
.adm-selected-class { background:linear-gradient(135deg,#1e3a6e,#162d58); color:#FFD700; font-weight:700; font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:4px; text-align:center; font-family:'Baloo 2',cursive; }

/* ── INFO SCREEN ────────────────────────────── */
.info-hero  { background:linear-gradient(160deg,#1e3a6e,#1a3060); padding:24px 18px 26px; text-align:center; }
.info-icon  { font-size:46px; margin-bottom:10px; }
.info-title { font-size:20px; color:#fff; margin-bottom:6px; font-family:'Baloo 2',cursive; font-weight:800; }
.info-meta  { font-size:11px; color:rgba(255,255,255,.5); margin-bottom:10px; }
.info-chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.info-body  { padding:16px; display:flex; flex-direction:column; gap:12px; }

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.info-stat { background:#fff; border-radius:12px; border:1px solid var(--border); padding:12px; text-align:center; }
.info-stat-val { font-size:20px; font-weight:800; color:var(--text); font-family:'Baloo 2',cursive; }
.info-stat-lbl { font-size:9px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

.rules-box   { background:rgba(255,215,0,.05); border:1px solid rgba(255,215,0,.2); border-radius:var(--radius); padding:13px; }
.rules-title { font-size:12px; font-weight:700; color:var(--gold); margin-bottom:8px; }
.rule-row    { display:flex; gap:8px; font-size:11px; color:var(--muted); margin-bottom:6px; align-items:flex-start; line-height:1.5; }

/* ── QUIZ HEADER ────────────────────────────── */
.quiz-hdr  { background:linear-gradient(135deg,#1e3a6e,#1a3060); padding:12px 16px 13px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.08); }
.qhdr-top  { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.qhdr-name { font-size:12px; font-weight:700; color:#FFD700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:8px; font-family:'Baloo 2',cursive; }
.timer-pill { background:rgba(239,68,68,.2); border:1px solid rgba(239,68,68,.4); color:#f87171; font-size:13px; font-weight:700; padding:4px 11px; border-radius:99px; white-space:nowrap; flex-shrink:0; }
.timer-pill.urgent { background:var(--red); color:#fff; animation:pulse .4s ease-in-out infinite alternate; }
@keyframes pulse { from{opacity:1} to{opacity:.55} }

.progress-row     { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.progress-bar-wrap{ flex:1; height:4px; background:rgba(255,255,255,.08); border-radius:99px; }
.progress-bar-fill{ height:4px; background:#FFD700; border-radius:99px; transition:width .3s; }
.progress-label   { font-size:10px; color:rgba(255,255,255,.5); font-weight:600; white-space:nowrap; flex-shrink:0; }

.q-timer-row   { display:flex; align-items:center; gap:8px; }
.qtimer-label  { font-size:9px; color:rgba(255,255,255,.3); white-space:nowrap; flex-shrink:0; }
.qtimer-bar-wrap{ flex:1; height:4px; background:rgba(255,255,255,.06); border-radius:99px; }
.qtimer-bar-fill{ height:4px; border-radius:99px; transition:width 1s linear, background .3s; }
.qtimer-val    { font-size:10px; font-weight:700; color:rgba(255,255,255,.4); white-space:nowrap; flex-shrink:0; width:32px; text-align:right; }

/* ── QUIZ BODY ──────────────────────────────── */
.quiz-body {
  flex:1; padding:11px; background:var(--bg);
  display:flex; flex-direction:column; gap:10px;
  overflow-y:auto;
}

/* ── QUESTION CARD ──────────────────────────── */
.q-card {
  background:linear-gradient(135deg,#1e3a6e,#162d58);
  border-radius:13px; padding:16px;
  border:1px solid rgba(255,215,0,.2);
  position:relative; overflow:hidden;
  flex-shrink:0;
}
.q-num {
  font-size:10px; font-weight:700; color:#FFD700;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
}
.q-text {
  font-family:'Hind','Noto Sans Devanagari',Arial,sans-serif;
  font-size:15px; font-weight:600; color:#ffffff;
  line-height:1.7; display:block;
  word-break:break-word; white-space:normal;
}
.q-watermark {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:.04;
  font-size:13px; font-weight:700; color:#FFD700;
  transform:rotate(-20deg); letter-spacing:.08em;
  white-space:nowrap; z-index:0;
}

/* ── OPTIONS ────────────────────────────────── */
.opt-btn {
  width:100%; padding:11px 14px; background:#fff;
  border:1.5px solid var(--border); border-radius:12px;
  text-align:left; font-size:13px; font-weight:500;
  color:var(--text); display:flex; align-items:center;
  gap:10px; margin-bottom:7px; transition:all .15s;
  -webkit-user-select:none; user-select:none;
}
.opt-btn:active { transform:scale(.99); }
.opt-btn.selected { background:rgba(255,215,0,.1); border-color:var(--gold); color:var(--gold2); font-weight:700; }
.opt-lbl {
  width:26px; height:26px; border-radius:50%; background:#f0f2f8;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0; color:var(--muted);
}
.opt-btn.selected .opt-lbl { background:var(--gold); color:#111; }
.opt-btn span:last-child {
  font-family:'Hind','Noto Sans Devanagari',Arial,sans-serif;
  word-break:break-word;
}

.warn-strip.red { background:#fef2f2; border:1px solid #fecaca; border-radius:9px; padding:7px 11px; font-size:11px; color:#dc2626; font-weight:600; }
.skip-warn { background:#fffbea; border:1px solid rgba(212,146,10,.3); border-radius:9px; padding:7px 11px; font-size:10px; font-weight:600; color:#7a5000; }
.skip-warn.urgent { background:#fef2f2; border-color:#fecaca; color:#dc2626; animation:pulse .6s ease-in-out infinite alternate; }

.nav-btns { display:flex; flex-direction:column; gap:7px; }

/* ── PALETTE ────────────────────────────────── */
.palette-section { margin-top:4px; }
.palette-label   { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:7px; }
.palette         { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.pdot { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; cursor:pointer; transition:transform .1s; }
.pdot:active { transform:scale(.93); }
.pdot.done { background:var(--green); color:#fff; }
.pdot.curr { background:var(--gold); color:#111; }
.pdot.todo { background:#f0f2f8; color:var(--muted); border:1.5px solid var(--border); }
.palette-legend { display:flex; gap:12px; }
.palette-legend span { font-size:9px; color:var(--muted); display:flex; align-items:center; gap:4px; }
.dot { width:11px; height:11px; border-radius:3px; }
.dot.green { background:var(--green); }
.dot.gold  { background:var(--gold); }
.dot.grey  { background:#f0f2f8; border:1px solid var(--border); }

/* ── RESULT ─────────────────────────────────── */
.result-hero {
  background:linear-gradient(160deg,#1e3a6e,#1a3060,#1e3a6e);
  padding:22px 18px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  flex-shrink:0;
}
.result-medal        { font-size:52px; }
.result-title        { font-size:22px; color:#fff; font-family:'Baloo 2',cursive; font-weight:800; }
.result-student-name { font-size:12px; font-weight:600; color:rgba(255,255,255,.7); background:rgba(255,255,255,.1); padding:4px 13px; border-radius:99px; }
.result-score        { font-size:40px; font-weight:900; color:#FFD700; line-height:1; font-family:'Baloo 2',cursive; }
.result-pct          { font-size:14px; font-weight:700; color:rgba(255,255,255,.6); }
.result-msg          { font-size:12px; color:rgba(255,255,255,.45); }

.scholarship-box {
  background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,179,0,.08));
  border:2px solid rgba(255,215,0,.4);
  border-radius:14px; padding:12px 20px; text-align:center;
  margin-top:4px; width:100%;
}
.sch-box-title { font-family:'Baloo 2',cursive; font-size:18px; font-weight:900; color:#FFD700; }
.sch-box-sub   { font-size:11px; color:rgba(255,215,0,.8); margin-top:2px; line-height:1.5; }

.result-body { padding:14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.result-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.res-stat { background:#fff; border-radius:12px; border:1px solid var(--border); padding:10px 8px; text-align:center; }
.res-stat-val { font-size:20px; font-weight:800; font-family:'Baloo 2',cursive; }
.res-stat-lbl { font-size:8px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.res-stat.correct .res-stat-val { color:var(--green); }
.res-stat.wrong   .res-stat-val { color:var(--red); }
.res-stat.skip    .res-stat-val { color:var(--muted); }

/* Answer review — HIDDEN for admission test (handled in JS) */
.answer-review { }
.answer-review-title { font-size:12px; font-weight:700; color:var(--text); margin-bottom:8px; }
.ans-row  { background:#fff; border-radius:11px; border:1px solid var(--border); padding:11px 13px; margin-bottom:8px; }
.ans-q    { font-size:11px; font-weight:600; color:var(--text); margin-bottom:6px; line-height:1.5; }
.ans-opts { display:flex; flex-direction:column; gap:4px; }
.ans-opt  { font-size:10px; padding:5px 9px; border-radius:7px; font-weight:500; color:var(--muted); }
.ans-opt.correct-ans  { background:rgba(34,197,94,.12); color:#16a34a; font-weight:700; }
.ans-opt.user-correct { background:rgba(34,197,94,.15); color:#16a34a; font-weight:700; border:1.5px solid var(--green); }
.ans-opt.user-wrong   { background:rgba(239,68,68,.12); color:#dc2626; font-weight:700; border:1.5px solid var(--red); }

/* ── BUTTONS ────────────────────────────────── */
.btn-gold-full {
  width:100%; padding:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111; border-radius:var(--radius);
  font-weight:800; font-size:14px; font-family:'Baloo 2',cursive;
  box-shadow:0 6px 22px rgba(255,215,0,.25);
  transition:transform .1s; margin-bottom:2px;
}
.btn-gold-full:active   { transform:scale(.98); }
.btn-gold-full:disabled { opacity:.5; }

.btn-ghost-light {
  width:100%; padding:12px; background:transparent; color:var(--muted);
  border-radius:var(--radius); font-size:13px; font-weight:600;
  border:1.5px solid var(--border); margin-bottom:2px;
}
.btn-ghost {
  width:100%; padding:12px; background:transparent; color:var(--muted);
  border-radius:var(--radius); font-size:13px; font-weight:600;
  border:1.5px solid var(--border);
}
.btn-next   { width:100%; padding:13px; background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#111; border-radius:var(--radius); font-weight:800; font-size:14px; font-family:'Baloo 2',cursive; box-shadow:0 5px 18px rgba(255,215,0,.25); transition:transform .1s; }
.btn-next:active { transform:scale(.98); }
.btn-submit { width:100%; padding:13px; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border-radius:var(--radius); font-weight:800; font-size:14px; font-family:'Baloo 2',cursive; box-shadow:0 5px 18px rgba(34,197,94,.25); transition:transform .1s; }
.btn-submit:active { transform:scale(.98); }

.btn-certificate {
  width:100%; padding:13px;
  background:linear-gradient(135deg,#7c5200,#5a3c00);
  border:2px solid rgba(255,215,0,.4);
  border-radius:var(--radius); color:#FFD700;
  font-weight:800; font-size:13px; font-family:'Baloo 2',cursive;
  box-shadow:0 4px 18px rgba(255,215,0,.15); transition:transform .1s;
}
.btn-certificate:active { transform:scale(.98); }

.btn-pdf {
  width:100%; padding:13px;
  background:linear-gradient(135deg,#0a2040,#082060);
  border:2px solid rgba(59,130,246,.35);
  border-radius:var(--radius); color:#60a5fa;
  font-weight:800; font-size:13px; font-family:'Baloo 2',cursive;
  box-shadow:0 4px 18px rgba(59,130,246,.1); transition:transform .1s;
}
.btn-pdf:active { transform:scale(.98); }

.btn-whatsapp {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff; border:none; border-radius:var(--radius);
  padding:14px 20px; font-size:15px; font-weight:700;
  width:100%; cursor:pointer; text-decoration:none; box-sizing:border-box;
}
.btn-whatsapp:active { opacity:.85; }

/* ── ADMIN MODAL ────────────────────────────── */
.admin-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.8);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:20px;
}
.admin-modal-overlay.hidden { display:none !important; }
.admin-modal-box {
  background:#fff; border:2px solid rgba(255,215,0,.3);
  border-radius:20px; padding:28px 22px 22px;
  width:100%; max-width:320px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.admin-modal-icon  { font-size:40px; }
.admin-modal-title { font-family:'Baloo 2',cursive; font-size:20px; font-weight:800; color:var(--text); }
.admin-modal-sub   { font-size:12px; color:var(--muted); text-align:center; }
.admin-pass-input  {
  width:100%; background:#f9fafb; border:1.5px solid var(--border);
  border-radius:12px; padding:12px 16px; font-size:15px; color:var(--text);
}
.admin-pass-input:focus { border-color:var(--gold); }
.admin-pass-error  { font-size:12px; color:#dc2626; font-weight:600; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:8px 12px; width:100%; text-align:center; }
.admin-modal-btns  { display:flex; gap:10px; width:100%; }
.admin-btn-cancel  { flex:1; padding:12px; background:#f9fafb; border:1.5px solid var(--border); border-radius:12px; font-size:13px; font-weight:700; color:var(--muted); }
.admin-btn-ok      { flex:1; padding:12px; background:linear-gradient(135deg,var(--gold),var(--gold2)); border-radius:12px; font-size:13px; font-weight:800; color:#111; font-family:'Baloo 2',cursive; }

/* ── ADMIN TABS ─────────────────────────────── */
.admin-tabs { display:flex; gap:8px; margin-bottom:10px; }
.admin-tab {
  flex:1; padding:9px; background:#f0f2f8; border:1.5px solid var(--border);
  border-radius:10px; font-size:12px; font-weight:700;
  color:var(--muted); text-align:center; cursor:pointer; transition:all .15s;
}
.admin-tab.active { background:#1e3a6e; border-color:#1e3a6e; color:#FFD700; }

/* ── ADMISSION UPLOAD GRID ───────────────────── */
.adm-upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.adm-up-card {
  background:#f9fafb; border:2px solid var(--border);
  border-radius:14px; padding:16px 12px;
  text-align:center; cursor:pointer; transition:all .15s;
}
.adm-up-card:active { transform:scale(.97); }
.adm-up-card:hover  { border-color:var(--gold); }
.auc-num    { font-family:'Baloo 2',cursive; font-size:22px; font-weight:900; color:#1e3a6e; margin-bottom:6px; }
.auc-status { font-size:11px; font-weight:700; color:var(--muted); }
.adm-up-note { font-size:10px; color:var(--muted); text-align:center; line-height:1.7; background:#f9fafb; border-radius:8px; padding:8px 12px; margin-top:4px; }

/* ── BOARD FILTER ───────────────────────────── */
.board-filter-row { display:flex; gap:8px; flex-wrap:wrap; }

/* ── LEADERBOARD ────────────────────────────── */
.lb-table { width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; font-size:13px; border:1px solid var(--border); }
.lb-table thead tr { background:linear-gradient(135deg,var(--gold),var(--gold2)); }
.lb-table thead th { color:#111; font-weight:700; padding:10px 8px; text-align:left; }
.lb-table tbody tr { border-bottom:1px solid var(--border); }
.lb-table tbody tr:last-child { border-bottom:none; }
.lb-table tbody td { padding:10px 8px; color:var(--text); }
.lb-table tbody tr:nth-child(1) td { background:rgba(255,215,0,.06); }
.lb-table tbody tr:nth-child(2) td { background:rgba(192,192,192,.04); }
.lb-table tbody tr:nth-child(3) td { background:rgba(205,127,50,.04); }

/* ── TOAST ──────────────────────────────────── */
#upload-toast { transition:opacity .4s ease; }

/* ══════════════════════════════════════════════
   CRITICAL VISIBILITY FIXES — Welcome Screen
   Ensures all inputs/buttons always visible
══════════════════════════════════════════════ */

/* Welcome screen — always white background, dark text */
#screen-welcome,
#screen-welcome .welcome-form,
#screen-welcome .scroll { 
  background: #ffffff !important; 
}

/* All inputs — always visible */
#screen-welcome input,
#screen-profile input,
#screen-admission input {
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 2px solid #d1d5db !important;
  -webkit-text-fill-color: #111827 !important;
}
#screen-welcome input:focus,
#screen-profile input:focus,
#screen-admission input:focus {
  border-color: #d4920a !important;
  background: #ffffff !important;
}
#screen-welcome input::placeholder,
#screen-profile input::placeholder,
#screen-admission input::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

/* Class buttons — always visible */
.wf-class-btn {
  background: #f3f4f6 !important;
  border: 2px solid #d1d5db !important;
}
.wf-class-btn .wcb-num { color: #1e3a6e !important; }
.wf-class-btn .wcb-lbl { color: #6b7280 !important; }
.wf-class-btn.selected {
  background: #fffbea !important;
  border-color: #d4920a !important;
}

/* Board buttons */
.wf-board-btn {
  background: #f3f4f6 !important;
  border: 2px solid #d1d5db !important;
}
.wf-board-btn .wbb-name { color: #111827 !important; }
.wf-board-btn .wbb-sub  { color: #6b7280 !important; }
.wf-board-btn.selected {
  background: #fffbea !important;
  border-color: #d4920a !important;
}

/* Save button — always gold and visible */
#btn-save-profile {
  background: linear-gradient(135deg, #d4920a, #b87a00) !important;
  color: #111 !important;
  opacity: 1 !important;
}
#btn-save-profile:disabled { opacity: 0.5 !important; }

/* Welcome form labels */
.wf-label { color: #374151 !important; }
.welcome-note { color: #9ca3af !important; }
.w-error { color: #dc2626 !important; background: #fef2f2 !important; }

/* Profile screen */
#screen-profile { background: #ffffff !important; }
#screen-profile .scroll { background: #ffffff !important; }

/* Admission form inputs */
.afield-input {
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1.5px solid #d1d5db !important;
  -webkit-text-fill-color: #111827 !important;
}
.afield-input::placeholder { 
  color: #9ca3af !important; 
  -webkit-text-fill-color: #9ca3af !important;
}
.afield-label { color: #6b7280 !important; }

/* Admin modal inputs */
.admin-pass-input {
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1.5px solid #d1d5db !important;
  -webkit-text-fill-color: #111827 !important;
}
.admin-modal-title { color: #111827 !important; }
.admin-modal-sub   { color: #6b7280 !important; }

/* Fix quiz option text always visible */
.opt-btn { background: #ffffff !important; }
.opt-btn span:last-child { color: #111827 !important; }
.opt-btn.selected span:last-child { color: #7a5000 !important; }

/* ── FINAL CLICK FIX ── */
/* Isse button ke text par click karne se bhi button kaam karega */
.btn-gold-full *, 
.btn-ghost-light *, 
.btn-ghost *, 
.btn-next *, 
.btn-submit *, 
.btn-certificate *, 
.btn-pdf *, 
.btn-whatsapp * {
  pointer-events: none;
}

/* Sabhi buttons ko center align karne ke liye */
.btn-gold-full, .btn-next, .btn-submit, .btn-certificate, .btn-pdf, .btn-ghost, .btn-ghost-light {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── ABC BATTLE ZONE STYLING ── */
#screen-abc-battle, #screen-matching {
    background-color: #080a10; /* Dark Gaming Background */
    min-height: 100vh;
    padding: 20px;
}

.glow-text {
    text-align: center; 
    color: #00e5ff; 
    font-size: 28px;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.6); 
    font-family: 'Baloo 2', cursive;
    margin-top: 20px;
}

.live-status { 
    text-align: center; 
    color: #00e676; 
    font-size: 14px;
    font-weight: bold; 
    margin-bottom: 40px; 
}

/* Battle Button Pulse Effect */
.battle-main-btn {
    position: relative; 
    display: flex; 
    justify-content: center; 
    margin: 50px 0;
}

.btn-battle-start {
    background: linear-gradient(135deg, #ff0055, #ff00aa);
    color: white; border: none; padding: 22px 45px; border-radius: 50px;
    font-size: 20px; font-weight: 900; z-index: 2; 
    box-shadow: 0 0 25px rgba(255,0,85,0.5);
    cursor: pointer;
}

/* Matching Screen Styles */
.matching-container {
    display: flex; justify-content: space-around; align-items: center; margin-top: 100px;
}

.match-player { text-align: center; }

.avatar {
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; margin-bottom: 10px; color: white;
}

.vs-circle {
    width: 60px; height: 60px; background: #ffcc00; color: #111;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 24px; box-shadow: 0 0 20px #ffcc00;
}

.searching-anim {
    animation: pulse-search 0.8s infinite alternate;
    border: 3px dashed #ff0055;
}

@keyframes pulse-search {
    from { opacity: 0.4; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.1); }
}

.match-timer-text { 
    text-align: center; margin-top: 30px; 
    font-size: 18px; color: #00e5ff; font-weight: bold;
}

/* Players Online List */
.online-players-box {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px; padding: 15px; margin-top: 30px;
}

.player-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e6ed;
}

.mini-challenge-btn {
    background: #0089ff; color: white; border: none;
    padding: 5px 12px; border-radius: 5px; font-size: 12px;
}

/* ── BATTLE ARENA STYLING ── */
#screen-battle-arena {
    background: radial-gradient(circle at top, #1a1a2e, #080a10);
    color: white;
}

/* ── COIN HEADER BUTTON ── */
.coin-hdr-btn {
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.08));
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 20px;
  padding: 5px 12px;
  color: #FFD700;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s;
  font-family: 'Baloo 2', cursive;
}
.coin-hdr-btn:active { background: rgba(255,215,0,0.25); }
.coin-balance-display { font-size: 13px; font-weight: 900; }


/* ── ROOM SYSTEM STYLES ── */
.room-player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.room-player-card.joined {
  border-color: #00ff88;
  background: rgba(0,255,136,0.04);
}

/* ── ANIMATIONS ── */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes pulse-btn {
  0%   { box-shadow: 0 0 0 0 rgba(248,81,73,0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(248,81,73,0); }
  100% { box-shadow: 0 0 0 0 rgba(248,81,73,0); }
}

/* ── BATTLE-OPT FIX (text visible) ── */
.battle-opt {
  color: #ffffff !important;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}
.battle-opt:active {
  background: rgba(0,229,255,0.15);
  border-color: #00e5ff;
  transform: scale(0.98);
}

/* ── KATEX MATH STYLES ── */
.katex { font-size: 1.05em !important; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.katex-display > .katex { white-space: normal; }

/* Opt button ke andar math sahi dikhaye */
.opt-btn .katex { vertical-align: middle; }
.battle-opt .katex { vertical-align: middle; }

/* Display math ($$...$$) center mein */
#q-text .katex-display,
#arena-q-text .katex-display,
#room-arena-q-text .katex-display {
  margin: 8px 0;
  text-align: center;
}

/* ── BATTLE SUBJECT DROPDOWN ── */
#battle-subject-select {
  transition: border-color 0.2s;
}
#battle-subject-select:focus {
  outline: none;
  border-color: #00e5ff;
}
#battle-subject-select option {
  background: #0d1117;
  color: #fff;
  font-weight: 600;
}

/* ── RANK BADGE HEADER ── */
.rank-hdr-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(205,127,50,0.1);
  border: 1px solid rgba(205,127,50,0.3);
  color: #CD7F32;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default;
  white-space: nowrap;
}

/* ══════════════════════════
   RESULT UPGRADE STYLES
══════════════════════════ */
.ru-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 14px;
  padding: 14px;
}
.ru-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #8b949e;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.ru-mini-stat {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.ru-mini-val {
  font-size: 15px;
  font-weight: 900;
  color: #cdd9e5;
  margin-bottom: 3px;
}
.ru-mini-lbl {
  font-size: 10px;
  color: #555;
}
.ru-improve {
  font-size: 14px;
  font-weight: 700;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}
.ru-improve.positive {
  background: rgba(0,255,136,0.08);
  color: #00ff88;
  border: 1px solid rgba(0,255,136,0.2);
}
.ru-improve.negative {
  background: rgba(248,81,73,0.08);
  color: #f85149;
  border: 1px solid rgba(248,81,73,0.2);
}
.ru-improve.neutral {
  background: rgba(255,204,0,0.08);
  color: #ffcc00;
  border: 1px solid rgba(255,204,0,0.2);
}