/* ============================================================
   UP Sahayak Adhyapak Bharti — Quiz theme
   Matches index.html's navy / maroon / gold government-portal look
   ============================================================ */
:root{
  --navy:#16233f;
  --navy-deep:#0e1729;
  --paper:#eef1f4;
  --card:#ffffff;
  --line:#d7dce2;
  --ink:#182238;
  --ink-soft:#4a5568;
  --maroon:#7a1f2b;
  --maroon-dark:#5c1620;
  --gold:#9a6b0c;
  --gold-bg:#f5ecd8;
  --good:#1c6b45;
  --good-bg:#e7f3ec;
  --bad:#8f2323;
  --bad-bg:#fdeeee;
  --radius:10px;
  --shadow:0 8px 22px -14px rgba(14,23,41,0.35);
  --maxw:880px;
  --serif:"Newsreader", Georgia, serif;
  --sans:"IBM Plex Sans", "IBM Plex Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); color:var(--navy-deep); line-height:1.2; margin:0 0 .3em 0; font-weight:600}
p{margin:0 0 1em 0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}

.shell{max-width:var(--maxw); margin:0 auto; padding:22px 20px 40px}

/* ---------- Hero ---------- */
.hero{
  background:var(--navy);
  color:#fff;
  border-radius:var(--radius);
  padding:28px 26px 24px;
  box-shadow:0 20px 50px -22px rgba(0,0,0,0.45);
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.08) 1.4px, transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(500px 300px at 85% 10%, rgba(0,0,0,0.9), transparent 72%);
  mask-image:radial-gradient(500px 300px at 85% 10%, rgba(0,0,0,0.9), transparent 72%);
  pointer-events:none;
}
.hero > *{position:relative}
.hero h1{color:#fff; font-size:clamp(22px,4vw,32px); margin:10px 0 6px; max-width:32ch}
.hero p{color:#c3cbdc; margin:0; font-size:.98rem}
.topbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.pill{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.02em;
  padding:5px 11px; border-radius:5px;
  color:#f3d9a1; background:rgba(154,107,12,0.22); border:1px solid rgba(184,134,11,0.4);
}

/* ---------- Panels ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.candidate-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field label{display:block; font-weight:600; font-size:.85rem; color:var(--ink); margin-bottom:6px}
.field input{
  width:100%; border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; font:inherit; outline:none; background:var(--paper); color:var(--ink);
}
.field input:focus{border-color:var(--navy); background:#fff}

.progress-wrap{margin-top:18px}
.progress-head{display:flex; justify-content:space-between; font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-bottom:7px; font-family:var(--mono)}
.progress{height:9px; border-radius:99px; background:#e4e8ee; overflow:hidden}
.progress > span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--maroon),var(--gold)); transition:width .2s}

/* ---------- Questions ---------- */
.question{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:17px 18px;
  margin-bottom:14px;
  background:#fff;
}
.q-top{display:flex; gap:12px; align-items:flex-start}
.q-no{
  min-width:32px; height:32px; border-radius:7px;
  background:var(--gold-bg); color:var(--gold);
  font-family:var(--mono); font-weight:700; font-size:.85rem;
  display:grid; place-items:center; flex-shrink:0;
}
.q-text{font-size:1rem; font-weight:600; line-height:1.55; padding-top:3px; color:var(--ink)}
.passage{
  margin:10px 0 14px;
  padding:14px 15px;
  background:var(--paper);
  border-left:4px solid var(--maroon);
  border-radius:8px;
  color:var(--ink-soft);
  line-height:1.75;
  font-size:.92rem;
}
.options{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.opt{
  display:flex; gap:9px; align-items:flex-start;
  padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  cursor:pointer; transition:.15s; background:var(--paper);
}
.opt:hover{border-color:var(--gold); background:var(--gold-bg)}
.opt input{accent-color:var(--maroon); margin-top:4px}
.opt b{color:var(--maroon); font-family:var(--mono)}

/* ---------- Buttons / status ---------- */
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{border:0; border-radius:8px; padding:12px 18px; font:inherit; font-weight:600; font-size:.92rem; cursor:pointer}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-secondary{background:#eaeef5; color:var(--navy-deep)}
.btn-secondary:hover{background:#dde2ee}
.status{margin-top:12px; padding:11px 13px; border-radius:8px; font-size:.85rem; font-weight:500}
.status.good{background:var(--good-bg); color:var(--good)}
.status.warn{background:var(--gold-bg); color:var(--gold)}
.status.bad{background:var(--bad-bg); color:var(--bad)}
.hidden{display:none!important}

/* ---------- Result ---------- */
.result{display:grid; grid-template-columns:270px 1fr; gap:18px}
.score-card{
  background:linear-gradient(135deg,var(--navy),var(--maroon-dark));
  color:#fff; border-radius:var(--radius); padding:20px;
}
.score-card .pill{margin-bottom:10px}
.score-big{font-family:var(--serif); font-size:38px; font-weight:700; margin:6px 0 4px}
.leaderboard h3{margin:0 0 10px; font-size:1.05rem}
.lb-list{display:grid; gap:8px}
.lb-row{
  display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center;
  border:1px solid var(--line); padding:9px 11px; border-radius:8px; background:#fff;
}
.lb-rank{font-family:var(--mono); font-weight:700; color:var(--maroon)}
.lb-name{font-weight:600; color:var(--ink)}
.lb-meta{font-size:.72rem; color:var(--ink-soft); font-family:var(--mono)}
.lb-score{font-family:var(--mono); font-weight:700; color:var(--navy-deep)}
.note{font-size:.72rem; color:var(--ink-soft); margin-top:9px}

.footer-note{font-size:.82rem; color:var(--ink-soft); line-height:1.7}
.loading{color:var(--ink-soft); font-size:.85rem; font-family:var(--mono)}

.review{margin-top:12px}
.review-row{border-top:1px dashed var(--line); padding:11px 0; font-size:.92rem}
.review-row:first-child{border-top:0}
.correct{color:var(--good); font-weight:700}
.wrong{color:var(--bad); font-weight:700}

@media (max-width:720px){
  .candidate-grid, .result{grid-template-columns:1fr}
  .options{grid-template-columns:1fr}
  .shell{padding:14px}
  .hero{padding:20px}
  .panel{padding:15px}
  .q-text{font-size:.95rem}
}