/* ==========================================================================
   आनंदालय — site chrome (header, footer, forms, tables)
   Uses the same colours and fonts as the HTML book page (books.css).
   ========================================================================== */
:root{
  --s-bg:#120A1E; --s-bg2:#1C1031; --s-text:#FFF6EC;
  --s-muted:rgba(255,246,236,.74); --s-faint:rgba(255,246,236,.52);
  --s-glass:rgba(255,255,255,.06); --s-glass2:rgba(255,255,255,.11); --s-border:rgba(255,255,255,.12);
  --s-grad:linear-gradient(120deg,#FFC45C 0%,#FF8A2A 52%,#FF6B4A 100%);
  --s-grad-text:linear-gradient(100deg,#FFD9A0 0%,#FF9A3C 38%,#FF6B6B 72%,#FF5C8A 100%);
  --s-focus:#FFC45C; --s-ok:#5EE0A0; --s-err:#FF8A8A;
  --s-display:"Anek Devanagari","Noto Sans Devanagari","Nirmala UI","Kohinoor Devanagari",system-ui,sans-serif;
  --s-sans:"Mukta","Noto Sans Devanagari","Nirmala UI","Kohinoor Devanagari",system-ui,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:#0E0818; color:var(--s-text); font-family:var(--s-sans); line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1; }
a{ color:inherit; }
img{ max-width:100%; }
.s-skip{ position:absolute; left:-999px; top:8px; background:#fff; color:#1A0E08; padding:8px 14px; border-radius:10px; z-index:100; }
.s-skip:focus{ left:8px; }

/* ---------- header ---------- */
.s-header{ position:sticky; top:0; z-index:50; background:rgba(18,10,30,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--s-border); }
.s-header-in{ max-width:1120px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; }
.s-brand{ font-family:var(--s-display); font-weight:800; font-size:24px; line-height:1.3; text-decoration:none; padding-top:.08em;
  background:var(--s-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.s-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.s-nav a, .s-nav button{ font:inherit; font-size:15px; font-weight:600; color:var(--s-muted); text-decoration:none; background:none; border:0; cursor:pointer; padding:8px 12px; border-radius:12px; }
.s-nav a:hover, .s-nav button:hover, .s-nav a.is-on{ color:var(--s-text); background:var(--s-glass); }
.s-nav .s-nav-cta{ background:var(--s-grad); color:#1A0E08; }
.s-nav .s-nav-cta:hover{ background:var(--s-grad); color:#1A0E08; filter:brightness(1.05); }
.s-nav form{ margin:0; }
.s-menu-btn{ display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid var(--s-border); background:var(--s-glass); color:var(--s-text); cursor:pointer; }
.s-menu-btn svg{ width:22px; height:22px; margin:auto; display:block; }
@media (max-width:720px){
  .s-menu-btn{ display:grid; place-items:center; }
  .s-nav{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:2px; padding:10px 16px 16px; background:#150C24; border-bottom:1px solid var(--s-border); }
  .s-nav.is-open{ display:flex; }
  .s-nav a, .s-nav button{ padding:12px 14px; text-align:left; width:100%; }
}

/* ---------- flash ---------- */
.s-flash{ max-width:760px; margin:16px auto 0; padding:12px 16px; border-radius:16px; font-size:15px; border:1px solid; }
.s-flash-ok{ background:rgba(94,224,160,.1); border-color:rgba(94,224,160,.4); color:#C9F7DF; }
.s-flash-err{ background:rgba(255,120,120,.1); border-color:rgba(255,120,120,.4); color:#FFD0D0; }
.s-flash-wrap{ padding:0 16px; }

/* ---------- page shell (dark pages other than home) ---------- */
.s-page{ position:relative; isolation:isolate; overflow:hidden; padding:40px 16px 64px;
  background:radial-gradient(130% 90% at 50% 0%, var(--s-bg2) 0%, var(--s-bg) 70%); min-height:calc(100vh - 160px); }
.s-page::before{ content:""; position:absolute; width:560px; height:560px; border-radius:50%; top:-240px; left:-180px; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,138,42,.45), transparent); }
.s-page::after{ content:""; position:absolute; width:560px; height:560px; border-radius:50%; top:60px; right:-260px; z-index:-1;
  background:radial-gradient(closest-side, rgba(232,69,107,.32), transparent); }
.s-wrap{ max-width:1120px; margin:0 auto; }
.s-narrow{ max-width:520px; margin:0 auto; }
.s-mid{ max-width:880px; margin:0 auto; }
.s-h1{ font-family:var(--s-display); font-weight:800; font-size:clamp(32px,6vw,48px); line-height:1.2; margin:0 0 6px; padding-top:.06em; }
.s-grad{ background:var(--s-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; padding-block:.08em; }
.s-sub{ color:var(--s-muted); margin:0 0 22px; font-size:17px; }
.s-card{ background:var(--s-glass); border:1px solid var(--s-border); border-radius:24px; padding:22px 20px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
@media (min-width:640px){ .s-card{ padding:30px 32px; } .s-page{ padding:56px 24px 80px; } }

/* ---------- forms ---------- */
.s-form{ display:grid; gap:16px; }
.s-grid2{ display:grid; gap:16px; }
@media (min-width:560px){ .s-grid2{ grid-template-columns:1fr 1fr; } }
.s-field label{ display:block; font-weight:600; font-size:15px; margin-bottom:6px; }
.s-field label small{ font-weight:500; color:var(--s-faint); }
.s-input{ width:100%; font:inherit; font-size:17px; color:var(--s-text); background:rgba(255,255,255,.05); border:1px solid var(--s-border);
  border-radius:14px; padding:12px 14px; min-height:50px; outline:none; transition:border-color .15s ease, background-color .15s ease; }
.s-input::placeholder{ color:var(--s-faint); }
.s-input:focus{ border-color:var(--s-focus); background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(255,196,92,.18); }
select.s-input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF6EC' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:40px; }
select.s-input option{ background:#1C1031; color:#FFF6EC; }
.s-input.is-bad{ border-color:var(--s-err); }
.s-error{ color:var(--s-err); font-size:14px; margin-top:6px; }
.s-help{ color:var(--s-faint); font-size:14px; margin-top:6px; }
.s-prefix{ display:flex; }
.s-prefix span{ display:grid; place-items:center; padding:0 12px; border:1px solid var(--s-border); border-right:0; border-radius:14px 0 0 14px; background:var(--s-glass2); color:var(--s-muted); font-weight:600; }
.s-prefix .s-input{ border-radius:0 14px 14px 0; }
.s-check{ display:flex; gap:10px; align-items:center; font-size:15px; color:var(--s-muted); }
.s-check input{ width:18px; height:18px; accent-color:#FF8A2A; }

/* ---------- buttons ---------- */
.s-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 22px; border-radius:16px; border:1px solid transparent;
  font-family:var(--s-display); font-weight:700; font-size:17px; line-height:1.25; text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.s-btn svg{ width:20px; height:20px; flex:none; }
.s-btn:active{ transform:scale(.98); }
.s-btn-glow{ background:var(--s-grad); color:#1A0E08; box-shadow:0 12px 30px -12px rgba(255,122,42,.85), inset 0 1px 0 rgba(255,255,255,.55); }
.s-btn-glow:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(255,122,42,.95), inset 0 1px 0 rgba(255,255,255,.55); }
.s-btn-glass{ background:var(--s-glass); color:var(--s-text); border-color:var(--s-border); }
.s-btn-glass:hover{ background:var(--s-glass2); }
.s-btn-sm{ min-height:40px; padding:8px 14px; font-size:15px; border-radius:12px; }
.s-btn-block{ width:100%; }
.s-btn[disabled], .s-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }
:is(.s-btn, a, button, input, select):focus-visible{ outline:3px solid var(--s-focus); outline-offset:3px; }
.s-link{ color:var(--s-text); font-weight:600; text-decoration:underline; text-decoration-color:#FF9A3C; text-decoration-thickness:2px; text-underline-offset:4px; }
.s-alt{ text-align:center; color:var(--s-muted); margin:18px 0 0; font-size:15px; }

/* ---------- checkout ---------- */
.s-co{ display:grid; gap:20px; }
@media (min-width:820px){ .s-co{ grid-template-columns:320px 1fr; align-items:start; } }
.s-co-art{ display:grid; place-items:center; padding:28px; border-radius:24px; background:radial-gradient(75% 70% at 50% 45%, var(--s-glass2), rgba(255,255,255,0)), var(--s-glass); border:1px solid var(--s-border); }
.s-co-cover{ width:190px; aspect-ratio:1/1.414; border-radius:3px 12px 12px 3px; overflow:hidden; transform:rotate(-4deg); box-shadow:0 28px 44px -18px rgba(0,0,0,.75); }
.s-co-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.s-co-cover-auto{ width:100%; height:100%; display:grid; place-items:center; padding:14px; text-align:center; font-family:var(--s-display); font-weight:800; font-size:28px;
  background:linear-gradient(160deg,#FF8A2A 0%,#D9480F 55%,#8F2A06 100%); color:#FFF8EE; }
.s-type{ display:inline-block; font-size:13px; font-weight:600; padding:3px 10px 2px; border-radius:999px; background:var(--s-glass2); color:var(--s-muted); border:1px solid var(--s-border); }
.s-co-title{ font-family:var(--s-display); font-weight:800; font-size:clamp(26px,4vw,34px); line-height:1.25; margin:10px 0 6px; }
.s-co-about{ color:var(--s-muted); margin:0 0 18px; }
.s-amount{ display:flex; align-items:center; gap:0; }
.s-amount span{ display:grid; place-items:center; width:54px; min-height:56px; font-family:var(--s-display); font-weight:800; font-size:24px; border:1px solid var(--s-border); border-right:0; border-radius:16px 0 0 16px; background:var(--s-glass2); }
.s-amount .s-input{ border-radius:0 16px 16px 0; font-family:var(--s-display); font-weight:800; font-size:24px; min-height:56px; }
.s-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.s-chip{ font:inherit; font-weight:600; font-size:15px; color:var(--s-text); background:var(--s-glass); border:1px solid var(--s-border); border-radius:999px; padding:6px 14px; cursor:pointer; }
.s-chip:hover, .s-chip.is-on{ border-color:#FF9A3C; background:rgba(255,154,60,.14); }
.s-trust{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--s-muted); font-size:14px; }
.s-trust li{ display:inline-flex; gap:6px; align-items:center; }
.s-trust svg{ width:16px; height:16px; color:var(--s-ok); }
.s-notice{ background:rgba(255,196,92,.12); border:1px solid rgba(255,196,92,.45); color:#FFE2B0; border-radius:16px; padding:12px 16px; font-size:15px; margin-bottom:16px; }
.s-owned{ background:rgba(94,224,160,.1); border:1px solid rgba(94,224,160,.4); color:#C9F7DF; border-radius:16px; padding:12px 16px; font-size:15px; margin-bottom:16px; }
.s-owned a{ color:#fff; font-weight:700; }

/* ---------- tables / history ---------- */
.s-table-wrap{ overflow-x:auto; border-radius:20px; border:1px solid var(--s-border); background:var(--s-glass); }
.s-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:640px; }
.s-table th, .s-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--s-border); vertical-align:middle; }
.s-table th{ font-family:var(--s-display); font-weight:700; color:var(--s-muted); font-size:14px; background:rgba(255,255,255,.03); white-space:nowrap; }
.s-table tr:last-child td{ border-bottom:0; }
.s-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; word-break:break-all; }
.s-badge{ display:inline-block; font-size:13px; font-weight:700; padding:2px 10px; border-radius:999px; white-space:nowrap; }
.s-badge-paid{ background:rgba(94,224,160,.16); color:#8FF0C0; }
.s-badge-pending{ background:rgba(255,196,92,.16); color:#FFD48A; }
.s-badge-failed{ background:rgba(255,120,120,.16); color:#FFB0B0; }
.s-empty{ text-align:center; padding:40px 20px; color:var(--s-muted); }
.s-empty p{ margin:0 0 16px; }
.s-hcards{ display:grid; gap:12px; }
.s-hcard{ display:grid; grid-template-columns:64px 1fr; gap:14px; padding:14px; border-radius:20px; background:var(--s-glass); border:1px solid var(--s-border); }
.s-hcard-cover{ width:64px; aspect-ratio:1/1.414; border-radius:3px 8px 8px 3px; overflow:hidden; background:var(--s-glass2); }
.s-hcard-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.s-hcard h3{ font-family:var(--s-display); font-weight:700; font-size:18px; line-height:1.3; margin:0 0 4px; }
.s-hcard dl{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0 0 10px; font-size:14px; }
.s-hcard dt{ color:var(--s-faint); }
.s-hcard dd{ margin:0; }
.s-only-wide{ display:none; }
@media (min-width:760px){ .s-only-wide{ display:block; } .s-only-narrow{ display:none; } }
.s-pager{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.s-pager a, .s-pager span{ padding:6px 12px; border-radius:10px; border:1px solid var(--s-border); text-decoration:none; font-size:14px; }
.s-pager span{ opacity:.5; }
.s-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.s-stat{ padding:14px 16px; border-radius:18px; background:var(--s-glass); border:1px solid var(--s-border); }
.s-stat b{ display:block; font-family:var(--s-display); font-weight:800; font-size:26px; line-height:1.2; }
.s-stat span{ color:var(--s-muted); font-size:14px; }

/* ---------- footer ---------- */
.s-footer{ background:#0B0613; border-top:1px solid var(--s-border); color:var(--s-muted); font-size:14px; }
.s-footer-in{ max-width:1120px; margin:0 auto; padding:26px 16px 30px; display:grid; gap:14px; }
.s-footer nav{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.s-footer nav a{ color:var(--s-muted); text-decoration:none; }
.s-footer nav a:hover{ color:var(--s-text); text-decoration:underline; }
.s-footer p{ margin:0; }
@media (min-width:720px){ .s-footer-in{ grid-template-columns:1fr auto; align-items:center; } }