:root{
  --primary:#0f172a;
  --accent:#2563eb;
  --brand:#0f172a;

  --bg:#f6f7fb;
  --fg:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --border:rgba(15,23,42,.10);

  --radius-lg:18px;
  --radius-md:12px;
  --shadow:0 10px 28px rgba(2,6,23,.10);
  --ring:0 0 0 4px rgba(37,99,235,.18);
  --transition:180ms cubic-bezier(.2,.8,.2,1);

  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Noto Sans}
body{
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(14,165,233,.08), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:980px;margin:0 auto;padding:16px}
.header{display:flex;align-items:center;gap:12px;padding:16px 0 20px 0}
.header img{height:36px}
.header .title{font-weight:700;letter-spacing:.2px;font-size:18px}
.badge{padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:860px){.row{grid-template-columns:2fr 1fr}}
.label{font-size:13px;color:var(--muted);margin-bottom:6px}
.input,select{width:100%;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border);background:#fff;color:var(--fg);outline:none;transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition)}
.input:focus,select:focus{border-color:var(--accent);box-shadow:var(--ring)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;background:var(--accent);color:white;border:0;border-radius:var(--radius-md);font-weight:850;cursor:pointer;box-shadow:0 14px 28px rgba(37,99,235,.18);transition:transform var(--transition), filter var(--transition), box-shadow var(--transition)}
.button:hover{filter:brightness(1.02);transform:translateY(-1px);box-shadow:0 18px 40px rgba(37,99,235,.22)}
.button:active{transform:translateY(0);box-shadow:0 14px 28px rgba(37,99,235,.18)}
.button:disabled{opacity:.6;cursor:not-allowed}
.hr{height:1px;background:var(--border);margin:16px 0}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 12px}
.kv .k{color:var(--muted)}
.kv .v{color:var(--fg)}
@media (max-width:540px){.kv{grid-template-columns:1fr;}.kv .k{font-weight:600}}
.footer{margin-top:20px;color:var(--muted);font-size:13px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px}
.table th{text-align:left;color:var(--muted);font-weight:600}
.table td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.toast{margin-top:10px;padding:10px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--border);display:none}
.toast.show{display:block}
.success{color:#16a34a}.error{color:#dc2626}.info{color:#2563eb}
/* Form grid */
.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.form-grid{grid-template-columns:1fr 1fr}}
/* Payment element card spacing */
#payment-element{padding:8px;border:1px dashed var(--border);border-radius:10px;background:#fff}