/* Get It Sasta Pay — base tokens (store jaisa brand: jamun ink + sasta yellow) */
:root{
  --paper:#F6F5FA; --surface:#FFFFFF; --ink:#1B1240; --ink-2:#3D3466; --muted:#6B6488; --line:#E4E1EF;
  --sasta:#FFD23F; --sasta-ink:#2B1D00; --brand:#5A2DF4; --brand-soft:#ECE7FF; --bad:#D92D4B; --ok:#0E8A5F; --warn:#9A5800;
  --ok-soft:#E3F5EC; --warn-soft:#FFF3D6; --bad-soft:#FDE8EC;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Hind",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --shadow:0 1px 0 rgba(27,18,64,.04),0 18px 40px -20px rgba(27,18,64,.35);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F0B24; --surface:#191338; --ink:#F1EEFF; --ink-2:#C9C2EC; --muted:#9C95BF; --line:#2B2453;
  --brand:#9D85FF; --brand-soft:#2A2160; --bad:#FF5C7A; --ok:#38D19A; --warn:#F5B14A;
  --ok-soft:#123A2D; --warn-soft:#3A2C10; --bad-soft:#3D1626;
  --shadow:0 18px 40px -20px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0F0B24; --surface:#191338; --ink:#F1EEFF; --ink-2:#C9C2EC; --muted:#9C95BF; --line:#2B2453;
  --brand:#9D85FF; --brand-soft:#2A2160; --bad:#FF5C7A; --ok:#38D19A; --warn:#F5B14A;
  --ok-soft:#123A2D; --warn-soft:#3A2C10; --bad-soft:#3D1626;
  --shadow:0 18px 40px -20px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
h1,h2,h3{text-wrap:balance;margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.m0{margin:0}
.stack{display:grid;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.break{word-break:break-all}

.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo img{width:30px;height:30px}
.logo .word{font:700 17px/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.logo .word b{background:var(--sasta);color:var(--sasta-ink);padding:2px 6px;border-radius:6px;font-weight:700}
.logo .tag{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:12px;padding:11px 18px;font-weight:600;font-size:15.5px;text-decoration:none;line-height:1.2;transition:transform .12s,background .15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--sasta);color:var(--sasta-ink)}
.btn-primary:hover:not(:disabled){background:#FFC400}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink-2)}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--bad) 45%,var(--line));color:var(--bad)}
.btn.sm{padding:7px 12px;font-size:14px;border-radius:10px}
.btn.wide{width:100%}

.field{display:grid;gap:6px;font-weight:600;font-size:14.5px}
.field small{font-weight:400;color:var(--muted);font-size:13px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 13px;font-weight:400;font-size:16px;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.field .mono-in{font-family:var(--mono);font-size:14.5px}
.toggle{display:flex;gap:10px;align-items:center;font-weight:600;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--brand)}
.err{color:var(--bad);font-weight:600;font-size:14.5px;margin:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}

.pill{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:5px 9px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.paid{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.review{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.confirming{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.pill.cancelled,.pill.expired{color:var(--muted)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:12px;font-weight:600;z-index:99;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}