/* Himachal Sathi — site ver005 — 17-09-2026 */

:root{
  --pine:#0b5c40;          /* deodar green of the header */
  --pine-dark:#08442f;
  --pine-deep:#063526;
  --gold:#f2b134;          /* the MCQ GK gold */
  --paper:#eef2f0;
  --card:#ffffff;
  --ink:#16241f;
  --ink-soft:#5b6f67;
  --rule:#dde5e1;
  --right:#127a4e;
  --wrong:#c4353b;
  --shadow:0 2px 10px rgba(11,60,45,.07);
  --radius:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Noto Sans',system-ui,-apple-system,sans-serif;
  font-size:15.5px;line-height:1.5;
  padding-bottom:74px;                 /* room for the tab bar */
}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
.hidden{display:none !important}
button{font:inherit;color:inherit}
svg{display:inline-block;vertical-align:middle;flex:none}

/* ---------- top bar ---------- */
.topbar{
  background:linear-gradient(160deg,var(--pine) 0%,var(--pine-deep) 100%);
  color:#fff;padding:14px 0 22px;border-radius:0 0 22px 22px;
}
.topbar .wrap{display:flex;align-items:center;gap:12px}
/* round icon button used in every green header */
.back{
  background:rgba(255,255,255,.16);border:0;border-radius:10px;color:#fff;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;flex:none;
  padding:0;line-height:0;
}
.back:active{background:rgba(255,255,255,.28)}
.back svg{display:block;pointer-events:none}
.topbar .back,.qhead .back{color:#fff}
.brand-l1{font-size:17px;font-weight:600;letter-spacing:.01em;line-height:1.15}
.brand-l2{font-size:13.5px;color:var(--gold);font-weight:600;line-height:1.2}
.hi{margin:14px 0 0;font-size:20px;font-weight:600}
.hi small{display:block;font-size:13.5px;font-weight:400;color:#bcd6cb;margin-top:2px}
.ttl{font-size:17px;font-weight:600;flex:1;text-align:center;padding-right:34px}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-16px 0 0}
.stat{background:var(--card);border-radius:var(--radius);padding:12px 8px;text-align:center;box-shadow:var(--shadow)}
.stat .ico{width:28px;height:28px;margin:0 auto 5px;display:grid;place-items:center;border-radius:9px}
.stat b{display:block;font-size:18px;font-weight:700;line-height:1.1}
.stat span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px}

/* ---------- buttons ---------- */
.cta{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--pine);color:#fff;border:0;border-radius:13px;
  padding:15px;margin:16px 0 0;font-size:16px;font-weight:600;cursor:pointer;
  box-shadow:0 3px 10px rgba(11,92,64,.22);
}
.cta:active{transform:translateY(1px)}
.cta.ghost{background:transparent;color:var(--pine);border:1.5px solid var(--pine);box-shadow:none}

h3.sec{font-size:15px;font-weight:600;margin:22px 0 10px}

/* ---------- quick access ---------- */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick button{
  background:var(--card);border:0;border-radius:var(--radius);padding:14px 12px;
  display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;box-shadow:var(--shadow);
}
.quick b{display:block;font-size:14px;font-weight:600;line-height:1.25}
.tile{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}

/* ---------- list rows ---------- */
.rows{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.row{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;border-bottom:1px solid var(--rule);
  padding:13px 14px;text-align:left;cursor:pointer;
}
.row:last-child{border-bottom:0}
.row:active{background:#f4f8f6}
.row .t{flex:1;min-width:0}
.row b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.row span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.row .chev{color:#b9c7c0;flex:none}

/* ---------- quiz ---------- */
.qhead{
  background:linear-gradient(160deg,var(--pine) 0%,var(--pine-deep) 100%);
  color:#fff;padding:12px 0 34px;border-radius:0 0 22px 22px;
}
.qhead .wrap{display:flex;align-items:center;gap:12px;min-height:34px}
.qhead .count{font-weight:600;font-size:14.5px}
.qhead .count{font-weight:600}
.bar{height:4px;background:rgba(255,255,255,.22);border-radius:3px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);border-radius:3px;transition:width .3s ease}

.qcard{background:var(--card);border-radius:var(--radius);padding:18px 16px;margin-top:-24px;box-shadow:var(--shadow)}
.qmeta{font-size:11.5px;color:var(--ink-soft);margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}
.qtext{font-size:17.5px;font-weight:600;line-height:1.4;margin:0}

.opts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.opt{
  width:100%;display:flex;align-items:center;gap:12px;
  background:var(--card);border:1.5px solid var(--rule);border-radius:13px;
  padding:12px 13px;text-align:left;cursor:pointer;transition:border-color .12s,background .12s;
}
.opt:active{background:#f4f8f6}
.opt .k{
  width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#eef2f0;color:var(--ink-soft);font-size:13px;font-weight:700;
}
.opt.right{border-color:var(--right);background:#eaf6f0}
.opt.right .k{background:var(--right);color:#fff}
.opt.wrong{border-color:var(--wrong);background:#fdeeee}
.opt.wrong .k{background:var(--wrong);color:#fff}
.opt:disabled{cursor:default}

.verdict{margin-top:14px;border-top:1px solid var(--rule);padding-top:13px}
.vhead{font-weight:700;margin:0 0 6px}
.vhead.ok{color:var(--right)}
.vhead.no{color:var(--wrong)}
.verdict p{margin:0 0 9px}
.src{font-size:12.5px;color:var(--ink-soft);border-left:3px solid var(--gold);padding-left:10px;margin:0}
.qfoot{display:flex;align-items:center;gap:14px;margin-top:14px;border-top:1px solid var(--rule);padding-top:11px}
.linkbtn{background:none;border:0;color:var(--ink-soft);font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer}
.linkbtn.on{color:var(--gold);font-weight:600}

/* ---------- result ---------- */
.result{background:var(--card);border-radius:var(--radius);padding:24px 18px;text-align:center;box-shadow:var(--shadow);margin-top:-24px}
.result h2{margin:10px 0 2px;font-size:21px}
.result .sub{color:var(--ink-soft);font-size:13.5px;margin:0}
.dial{width:150px;height:150px;margin:16px auto}
.dial text{font-family:inherit}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.tally div{background:var(--paper);border-radius:12px;padding:10px 6px}
.tally b{display:block;font-size:17px}
.tally span{font-size:11.5px;color:var(--ink-soft)}

/* ---------- progress ---------- */
.level{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-top:-24px;display:flex;gap:14px;align-items:center}
.level .t{flex:1}
.level b{display:block;font-size:16px}
.level span{font-size:12.5px;color:var(--ink-soft)}
.xp{height:7px;background:var(--paper);border-radius:4px;margin-top:8px;overflow:hidden}
.xp i{display:block;height:100%;background:var(--pine);border-radius:4px}
.perf{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.pf{margin-bottom:13px}
.pf:last-child{margin-bottom:0}
.pf .l{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:5px}
.pf .l b{font-weight:600}
.pf .t{height:7px;background:var(--paper);border-radius:4px;overflow:hidden}
.pf .t i{display:block;height:100%;border-radius:4px}

/* ---------- tab bar ---------- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--pine-deep);display:flex;justify-content:space-around;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));
}
.tabs button{
  background:none;border:0;color:#8fb3a5;display:flex;flex-direction:column;
  align-items:center;gap:3px;font-size:11px;cursor:pointer;flex:1;padding:2px 0;
}
.tabs button.on{color:var(--gold)}

/* ---------- misc ---------- */
.note{color:var(--ink-soft);font-size:13.5px;margin:0 0 12px}
.loading{color:var(--ink-soft);padding:26px 0;text-align:center}
.error{background:#fdeeee;border-left:3px solid var(--wrong);padding:12px 14px;border-radius:10px;margin:16px 0}
.foot{padding:22px 0 8px;font-size:12.5px;color:var(--ink-soft);text-align:center}
.foot a{color:var(--pine)}
.jai{font-size:15px;color:var(--pine);font-weight:600;margin-top:10px}

@media (prefers-reduced-motion:no-preference){
  .fade{animation:rise .32s cubic-bezier(.2,.6,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}