/* ===========================================================
   ShalaDarpan Help — design system (modern, lightweight)
   Vanilla CSS. No frameworks, no external fonts, no images.
   Mode: Read (guides/help) — clarity + trust for YMYL topic.
   =========================================================== */
:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f0f3f9;
  --text:#15212e;
  --muted:#5a6675;
  --border:#e4e8f0;
  --brand:#2563eb;
  --brand-dark:#1d3a8f;
  --brand-soft:#eaf1ff;
  --accent:#f97316;
  --accent-dark:#ea670c;
  --ok:#0f9d58;
  --ok-bg:#e7f7ee;
  --warn:#b45309;
  --warn-bg:#fef2e3;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 30px rgba(16,24,40,.07);
  --shadow-lg:0 12px 40px rgba(16,24,40,.12);
  --maxw:1080px;
  --read:840px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Devanagari","Nirmala UI",sans-serif;
  color:var(--text);background:var(--bg);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:var(--radius)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border)}
header.site .wrap{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;font-size:1.12rem;letter-spacing:-.2px}
.brand:hover{text-decoration:none}
.brand .dot{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 0 0 4px var(--brand-soft)}
nav.top{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
nav.top a{color:var(--muted);font-size:.9rem;font-weight:600;padding:8px 11px;border-radius:9px;transition:.15s}
nav.top a:hover{color:var(--brand);background:var(--brand-soft);text-decoration:none}
.langbtn{background:var(--brand);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:.86rem;transition:.15s}
.langbtn:hover{background:var(--brand-dark)}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;padding:64px 0 60px;overflow:hidden;
  background:radial-gradient(1200px 500px at 110% -10%,rgba(249,115,22,.35),transparent 60%),
             radial-gradient(900px 500px at -10% 120%,rgba(37,99,235,.45),transparent 55%),
             linear-gradient(135deg,var(--brand),var(--brand-dark))}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:36px;background:var(--bg);
  border-radius:36px 36px 0 0}
.hero h1{margin:0 0 14px;font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.12;letter-spacing:-.5px;font-weight:800}
.hero p{margin:0;max-width:640px;color:#e7eefc;font-size:1.08rem}
.hero .official{margin-top:22px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--brand-dark);
  padding:12px 20px;border-radius:11px;font-weight:700;box-shadow:var(--shadow)}
.hero .official:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-lg)}

/* ---------- Layout primitives ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:34px 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow-sm);transition:.18s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--brand),var(--accent));opacity:0;transition:.18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#cdd6e6}
.card:hover::before{opacity:1}
.card h3{margin:0 0 8px;font-size:1.08rem;letter-spacing:-.2px}
.card p{margin:0 0 14px;color:var(--muted);font-size:.93rem}
.card a.more{font-weight:700;font-size:.9rem}

section.block{max-width:var(--read);margin:0 auto;padding:38px 0}
h2.sec{font-size:clamp(1.4rem,3vw,1.7rem);margin:0 0 18px;letter-spacing:-.3px;
  border-left:4px solid var(--brand);padding-left:14px}
p.lead{color:var(--muted);max-width:680px;font-size:1.04rem}

/* ---------- Steps ---------- */
ol.steps{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 22px 8px 46px;margin:18px 0;box-shadow:var(--shadow-sm);counter-reset:step}
ol.steps li{margin:14px 0;padding-left:6px}
ol.steps li::marker{font-weight:800;color:var(--brand)}

/* ---------- Callouts ---------- */
.note{background:var(--warn-bg);border:1px solid #f6d9b0;color:var(--warn);border-radius:var(--radius);padding:15px 18px;margin:20px 0}
.note b{color:var(--warn)}
.ok{background:var(--ok-bg);border:1px solid #bfe9d2;color:#0c7a45;border-radius:var(--radius);padding:15px 18px;margin:20px 0}
.ok b{color:#0c7a45}

/* ---------- Tables ---------- */
table{border-collapse:separate;border-spacing:0;width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin:20px 0;box-shadow:var(--shadow-sm)}
th,td{border-bottom:1px solid var(--border);padding:11px 14px;text-align:left;font-size:.93rem}
th{background:var(--surface-2);font-weight:700}
tr:last-child td{border-bottom:none}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  padding:4px 18px;margin:12px 0;box-shadow:var(--shadow-sm);transition:.15s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;padding:12px 0}
.faq details[open] summary{color:var(--brand)}

/* ---------- Meta / bilingual ---------- */
.content-hi{font-family:"Noto Sans Devanagari","Nirmala UI",sans-serif}
.meta{color:var(--muted);font-size:.83rem;margin-top:10px}
.meta a{font-weight:600}
.updated{font-size:.8rem;color:var(--muted)}
.hidden{display:none!important}

/* ---------- Footer ---------- */
footer.site{background:#0c1726;color:#aebfd2;margin-top:54px;padding:40px 0 26px;font-size:.92rem}
footer.site a{color:#cfe0f5}
footer.site .brand{color:#fff}
.disclaimer{background:#0c1726;border-top:1px solid #1d2c40;color:#9fb1c7;font-size:.82rem;padding:16px 0;margin-top:8px}
.disclaimer .wrap{line-height:1.5}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(12,23,38,.96);
  backdrop-filter:blur(8px);color:#e7eef7;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;font-size:.92rem;box-shadow:0 -6px 22px rgba(0,0,0,.25)}
.cookie-banner a{color:#9fd0ff}
.cookie-banner .cb-btns{margin-left:auto;display:flex;gap:8px}
.cookie-banner button{border:none;border-radius:9px;padding:9px 16px;font-weight:700;cursor:pointer}
.cookie-banner .cb-yes{background:var(--accent);color:#fff}
.cookie-banner .cb-yes:hover{background:var(--accent-dark)}
.cookie-banner .cb-no{background:#33455c;color:#dfe8f3}

/* ---------- Responsive ---------- */
@media(max-width:720px){
  body{font-size:16px}
  header.site .wrap{height:auto;flex-wrap:wrap;padding:10px 14px;gap:10px}
  nav.top{display:flex;gap:4px;overflow-x:auto;width:100%;margin-left:0;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.top::-webkit-scrollbar{display:none}
  nav.top a{white-space:nowrap}
  .langbtn{margin-left:auto}
  .hero{padding:46px 0 52px}
  section.block{padding:28px 0}
}

/* ---------- Dark mode (optional, respects OS) ---------- */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0c1118;--surface:#141b25;--surface-2:#1b2430;--text:#e8eef6;--muted:#9babc0;
    --border:#26303d;--brand-soft:#16243f;--ok-bg:#0f2a1d;--warn-bg:#2c1f0c;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 10px 30px rgba(0,0,0,.45)
  }
  header.site{background:rgba(20,27,37,.82)}
  .hero::after{background:var(--bg)}
  footer.site{background:#070c12}
}