:root {
  --bg: #0A0A0B;
  --surface: #131316;
  --surface-2: #18181C;
  --inset: #0F0F12;
  --line: #222226;
  --line-2: #2A2A30;
  --text: #F2F2F3;
  --text-2: #D4D4D8;
  --muted: #A1A1AA;
  --accent: #F5B544;
  --ok: #93C5FD;
  --ok-bg: #1E3A5F;
  --ok-text: #BFDBFE;
  --bad: #EA580C;
  --bad-bg: #431407;
  --bad-text: #FDBA74;
  --skip: #2E2E35;
  --none: #17171A;
  --radius: 16px;
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.45 Inter, system-ui, sans-serif; }
body { min-height: 100vh; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
input, select { font-size: 16px; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; }
h1 { font-size: 32px; }
h2 { font-size: 17px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.bar { border-right: 1px solid var(--line); padding: 28px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 12px 28px; font: 600 17px var(--display); }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--bg); display: grid; place-items: center; font: 700 15px var(--display); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; }
.nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.lang { margin-top: auto; align-self: flex-start; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #1A1A1E; border: 1px solid var(--line-2); }
.lang button { border: 0; border-radius: 999px; padding: 0 12px; min-height: 36px; font: 600 12px Inter, sans-serif; background: transparent; color: var(--muted); }
.lang button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
main { padding: 40px 56px 64px; display: flex; flex-direction: column; gap: 24px; max-width: 1240px; width: 100%; }
main:focus { outline: none; }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eyebrow { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.cols-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.divider { height: 1px; background: var(--line); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.row-top { padding-top: 14px; border-top: 1px solid var(--line); }

.btn { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.dashed { border-style: dashed; background: transparent; color: var(--muted); }
.btn.primary { border: 0; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 16px; min-height: 56px; border-radius: 14px; }
.btn:disabled { opacity: 0.45; }
.round { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 24px; flex-shrink: 0; }
.sq { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 18px; flex-shrink: 0; }
.icon { width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; flex-shrink: 0; }

.clock { display: flex; align-items: center; gap: 20px; }
.clock-time { font: 600 104px/1 var(--display); letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 600; font-size: 15px; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.chip-input { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px dashed #3A3A42; color: var(--muted); }
.chip-input input { width: 64px; background: transparent; border: 0; color: var(--text); font-weight: 500; }
.dim { opacity: 0.35; }

.switch { position: relative; width: 56px; height: 32px; border-radius: 16px; border: 0; padding: 0; background: var(--line-2); flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--text); transition: left 0.15s; }
.switch[aria-pressed="true"] { background: var(--accent); }
.switch[aria-pressed="true"]::after { left: 27px; }

.banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; }
.banner.bad { border-color: #7C2D12; color: var(--bad-text); }
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step-time { width: 56px; flex-shrink: 0; font: 600 15px var(--display); font-variant-numeric: tabular-nums; }
.step-text { font-size: 14px; color: var(--text-2); }
.bar-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); gap: 2px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tile-value { font: 600 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.cal { display: grid; grid-template-rows: repeat(7, 30px); grid-auto-flow: column; grid-auto-columns: 30px; gap: 6px; }
.cal div { border-radius: 7px; }
.c-s { background: var(--ok); } .c-f { background: var(--bad); } .c-k { background: var(--skip); } .c-n { background: var(--none); }
.c-future { border: 1px dashed var(--line); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--inset); border: 1px solid var(--line); }
.seg button { border: 0; border-radius: 8px; padding: 0 14px; min-height: 36px; font-size: 13px; font-weight: 500; background: transparent; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--line); color: var(--text); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 0 4px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 4px; border-bottom: 1px solid #1C1C20; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-won { background: var(--ok-bg); color: var(--ok-text); }
.b-lost { background: var(--bad-bg); color: var(--bad-text); }
.b-skipped, .b-voided, .b-auth_failed, .b-p-queued { background: var(--line); color: var(--muted); }
.b-p-prepared { background: #3B2A0B; color: #FCD34D; }
.b-p-paid { background: var(--ok-bg); color: var(--ok-text); }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.file { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); text-decoration: none; color: var(--text); font-size: 14px; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input, .field select { min-height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--inset); padding: 0 12px; color: var(--text); }
.upload { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.upload .full { grid-column: 1 / -1; }

.methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.method { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: transparent; text-align: left; }
.method[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); }
.method:disabled { opacity: 0.5; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper-value { min-width: 76px; text-align: center; font: 600 17px var(--display); font-variant-numeric: tabular-nums; }
.charity { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); flex-wrap: wrap; }
.charity .names { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.charity input { min-height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); padding: 0 10px; color: var(--text); width: 100%; }
.charity .pct { width: 48px; text-align: center; font: 600 16px var(--display); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pill { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pill.ok { background: var(--ok-bg); color: var(--ok-text); }
.pill.bad { background: var(--bad-bg); color: var(--bad-text); }

.verify { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; width: 100%; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.verify > section { padding: 48px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.verify > section:first-child { align-items: center; border-right: 1px solid var(--line); }
.ring { position: relative; width: 260px; height: 260px; }
.ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-value { font: 600 76px/1 var(--display); font-variant-numeric: tabular-nums; }
.pin-input { width: 100%; min-height: 76px; border-radius: 14px; border: 1px solid var(--accent); background: var(--inset); color: var(--text); text-align: center; font: 600 36px var(--display); letter-spacing: 16px; padding-left: 16px; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.keypad button { min-height: 56px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); font: 600 22px var(--display); }
.keypad .blank { visibility: hidden; }
.result-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
.alert { min-height: 20px; font-size: 13px; color: var(--bad-text); }
.center { text-align: center; align-items: center; }
.login { max-width: 440px; margin: 15vh auto 0; text-align: center; }

@media (max-width: 1099px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .bar { position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 40px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; }
  .nav { flex-direction: row; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
  .nav a { min-height: 40px; padding: 0 16px; border-radius: 9px; }
  .nav a[aria-current="page"] { background: var(--line); }
  .lang { margin-top: 0; align-self: center; }
  main { padding: 32px 40px 56px; max-width: none; }
  .cols, .cols-even { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal { grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(7, 34px); }
  .verify { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .verify > section:first-child { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 32px; }
}

@media (max-width: 699px) {
  h1 { font-size: 24px; }
  .bar { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line); background: var(--inset); padding: 6px 8px max(10px, env(safe-area-inset-bottom)); }
  .nav a { justify-content: center; min-height: 48px; font-size: 12px; }
  .nav a[aria-current="page"] { background: transparent; color: var(--text); font-weight: 600; }
  main { padding: 16px 16px 112px; gap: 14px; }
  .card { padding: 16px; gap: 12px; }
  .clock { gap: 14px; }
  .clock-time { font-size: 72px; letter-spacing: -1.5px; }
  .round { width: 48px; height: 48px; font-size: 22px; }
  .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .chip { padding: 0; }
  .chip-input { grid-column: 1 / -1; }
  .tiles { gap: 10px; }
  .tile { padding: 14px; }
  .tile-value { font-size: 24px; }
  .cal { grid-template-rows: repeat(7, 28px); gap: 5px; }
  .methods { grid-template-columns: minmax(0, 1fr); }
  .stepper-value { min-width: 60px; font-size: 16px; }
  .upload { grid-template-columns: minmax(0, 1fr); }
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid #1C1C20; }
  .table td { padding: 0; border: 0; }
  .table td.hide-sm { display: none; }
  .verify { border-radius: 20px; }
  .verify > section { padding: 24px 16px; gap: 14px; }
  .ring { width: 150px; height: 150px; }
  .ring-value { font-size: 46px; }
}