/* Base / reset */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;width:100%;max-width:100%;overflow-x:clip}
@supports not (overflow: clip){html,body{overflow-x:hidden}}
body{
  margin:0;font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  color:var(--fg);background:var(--bg);letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%
}
a{color:inherit}
img,svg,video{max-width:100%;height:auto}

/* Typography helpers */
h1{font-size:clamp(18px,4vw,28px);margin:0}
h2{font-size:16px;margin:0 0 8px}
p.muted{color:var(--muted);margin:0 0 18px}
.muted-sm{font-size:12px;color:var(--muted)}
.right{margin-left:auto}

/* Layout primitives */
.wrap{min-height:100dvh;display:grid;place-items:center;padding:28px;overscroll-behavior:contain}
@supports (height:100svh){.wrap{min-height:100svh}}
.row{display:grid;grid-template-columns:1fr;gap:12px}

/* Card */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px;content-visibility:auto;contain:layout paint
}

/* Brand chip + logo */
.brand{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:12px}
.logo-img{width:22px;height:22px;object-fit:contain;display:block;filter:drop-shadow(0 0 10px rgba(212,173,101,.25))}
.logo-text{font-weight:800;letter-spacing:.4px;font-size:16px}
.beta{margin-left:auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b0b10}

/* Forms */
form{display:grid;gap:12px}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.input,select{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;
  padding:10px 12px;color:var(--fg);min-height:40px;font:inherit
}
.field-inline{position:relative}
.reveal{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:transparent;border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:var(--fg);cursor:pointer
}
input[type="checkbox"]{accent-color:var(--brand)}
.input:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--focus)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 14px;border-radius:12px;text-decoration:none;color:#0b0b10;font-weight:700;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;cursor:pointer;min-height:46px;touch-action:manipulation
}
.btn.secondary{background:transparent;color:var(--fg);border:1px solid var(--border);font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--fg)}

/* Messages */
.error,.success{
  background:rgba(212,173,101,.12);border:1px solid rgba(212,173,101,.45);color:#fff0d6;
  padding:10px 12px;border-radius:12px;display:none
}

/* Tables */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:12px 10px;border-bottom:1px solid var(--border-2);text-align:left}
th{color:var(--muted);font-weight:600;font-size:13px}
tr:hover td{background:rgba(255,255,255,.03)}
/* Solid, roomy status pills — always white text */
.badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid currentColor;
  background:rgba(255,255,255,.05);
}

/* Status colors */
.ok{   color:#7ee2ad; }
.warn{ color:#ffcc66; }
.err{  color:#ff9abf; }

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fg);
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.03) inset;
  transition:background-color 9999s ease-in-out 0s
}

/* --------------------------
   Modal & Wizard (generic)
--------------------------- */
.modal{
  position:fixed; inset:0; display:grid; place-items:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:color-mix(in oklab,#000 65%,transparent);
  z-index:50; animation:fadeIn .18s ease-out; overscroll-behavior:contain;
}
.modal[hidden]{display:none!important}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal-card{
  width:min(720px,96vw); max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border-2);
}
.modal-body{
  padding:16px; display:grid; gap:16px; overflow:auto;
}
.modal-foot{
  position:sticky; bottom:0; background:var(--card);
  padding:14px 16px; border-top:1px solid var(--border-2);
  display:flex; gap:10px; justify-content:flex-end;
  backdrop-filter:saturate(140%) blur(4px);
}
.close-x{background:none; border:0; font-size:20px; color:inherit; cursor:pointer; opacity:.85}
.close-x:hover{opacity:1}

/* Stepper */
.stepper{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-bottom:1px solid var(--border-2);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}
.step-dot{display:flex; align-items:center; gap:8px; opacity:.6}
.step-dot span{
  display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; border:1px solid var(--border); font-size:12px;
}
.step-dot label{font-size:12px; color:var(--muted)}
.step-line{flex:1; height:1px; background:var(--border-2)}
.step-dot.active{opacity:1}
.step-dot.active span{border-color:var(--brand); box-shadow:0 0 0 3px rgba(212,173,101,.22)}

/* Wizard sections */
.wz-step[hidden]{display:none!important}

/* Spinner */
.spinner{
  display:inline-block; width:1em; height:1em;
  border:.18em solid rgba(255,255,255,.25);
  border-top-color:var(--brand); border-radius:50%;
  animation:spin 1s linear infinite; margin-right:.45em;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Countdown */
.countdown{font-variant-numeric:tabular-nums}

/* Optional: QR card (generic pattern for white-backed media) */
.qr-layout{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:center}
.qr-card{
  display:inline-grid; place-items:center; width:max-content; justify-self:center;
  padding:14px; border-radius:14px; background:#fff; color:#000;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.qr-card img{
  width:clamp(240px,70vw,380px); height:clamp(240px,70vw,380px);
  image-rendering:pixelated; display:block;
}

/* Mobile tweaks */
@media (max-width:840px){
  .qr-layout{grid-template-columns:1fr}
}
@media (max-width:520px){
  .row{gap:10px}
  .input,.btn{min-height:48px}
  .modal-body{padding:14px}
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .modal{animation:none}
  .spinner{animation-duration:.001s}
}