:root{
  --bg:#0d1117; --surface:#161b24; --surface-2:#1c2330; --line:#262d3a;
  --ink:#e6edf5; --muted:#8b97a8; --dim:#5b6675;
  --accent:#4b9fd5; --win:#3fb984; --loss:#e0685c; --warn:#d8a14a;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  font-family:ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wrap{max-width:640px;margin:0 auto;padding:18px 16px 64px}
.num{font-variant-numeric:tabular-nums}

header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.brand span{color:var(--accent)}
.stamp{font-size:.72rem;color:var(--dim)}

.hero{
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;
}
.hero-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.hero-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.bank{font-size:2.1rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.delta{font-size:.85rem;font-weight:600;color:var(--win)}
.meter{height:5px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:14px}
.meter i{display:block;height:100%;background:var(--accent);border-radius:99px}
.hero-foot{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-top:8px}

h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
   font-weight:700;margin:22px 0 10px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:14px;margin-bottom:10px}
.leg-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.team{font-weight:650;letter-spacing:-.01em}
.price{font-weight:700;font-size:1.02rem}
.market{font-size:.8rem;color:var(--muted);margin-top:2px}
.game{font-size:.74rem;color:var(--dim);margin-top:6px}
.screens{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.chip{font-size:.68rem;padding:3px 8px;border-radius:99px;border:1px solid var(--line);
      color:var(--muted);background:var(--surface-2);white-space:nowrap}
.chip.pass{color:var(--win);border-color:color-mix(in srgb,var(--win) 35%,transparent)}
.chip.fail{color:var(--loss);border-color:color-mix(in srgb,var(--loss) 35%,transparent)}

.verdict{border-radius:var(--radius);padding:15px;margin-bottom:10px;border:1px solid var(--line)}
.verdict.hit{background:color-mix(in srgb,var(--win) 12%,var(--surface));
             border-color:color-mix(in srgb,var(--win) 40%,transparent)}
.verdict.miss{background:var(--surface)}
.verdict-h{font-weight:700;margin-bottom:4px}
.verdict-s{font-size:.82rem;color:var(--muted)}

.row{display:flex;justify-content:space-between;align-items:center;gap:10px;
     padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row-l{display:flex;align-items:center;gap:10px;min-width:0}
.dot{width:8px;height:8px;border-radius:99px;flex:none}
.dot.win{background:var(--win)} .dot.loss{background:var(--loss)} .dot.open{background:var(--warn)}
.row-day{font-size:.8rem;color:var(--muted);min-width:52px}
.row-meta{font-size:.74rem;color:var(--dim)}
.row-r{text-align:right;white-space:nowrap}
.row-bank{font-weight:650}

.empty{color:var(--muted);font-size:.88rem;text-align:center;padding:26px 12px;
       background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}
footer{margin-top:26px;font-size:.7rem;color:var(--dim);text-align:center;line-height:1.7}
.err{background:color-mix(in srgb,var(--loss) 12%,var(--surface));
     border:1px solid color-mix(in srgb,var(--loss) 40%,transparent);
     border-radius:var(--radius);padding:12px;font-size:.84rem;margin-bottom:12px}

/* ── auth ─────────────────────────────────────────────────────────────── */
.gate{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
      max-width:400px;margin:0 auto;padding:28px 20px}
.gate-brand{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.gate-brand span{color:var(--accent)}
.gate-sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.gate h1{font-size:1.15rem;font-weight:650;margin:0 0 4px;letter-spacing:-.01em}
.gate .hint{color:var(--muted);font-size:.84rem;margin:0 0 18px;line-height:1.5}
.field{margin-bottom:12px}
.field label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
             color:var(--muted);font-weight:700;margin-bottom:6px}
.field input{width:100%;padding:13px 14px;font-size:16px;color:var(--ink);
             background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
             font-family:inherit;-webkit-appearance:none}
.field input:focus{outline:none;border-color:var(--accent);
                   box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field input.otp{text-align:center;font-size:26px;letter-spacing:.32em;font-weight:700;
                 font-variant-numeric:tabular-nums;padding:15px 14px}
.btn{width:100%;padding:14px;font-size:15px;font-weight:650;font-family:inherit;
     border-radius:11px;border:1px solid transparent;cursor:pointer;
     background:var(--accent);color:#06121c;margin-top:6px}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.btn.google{background:#fff;color:#1f1f1f;display:flex;align-items:center;
            justify-content:center;gap:10px}
.btn.google svg{width:18px;height:18px;flex:none}
.sep{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--dim);font-size:.74rem;
     text-transform:uppercase;letter-spacing:.1em}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.swap{margin-top:18px;text-align:center;font-size:.86rem;color:var(--muted)}
.swap a{color:var(--accent);text-decoration:none;font-weight:600;cursor:pointer}
.note{border-radius:11px;padding:11px 13px;font-size:.84rem;margin-bottom:14px;line-height:1.45}
.note.bad{background:color-mix(in srgb,var(--loss) 13%,var(--surface));
          border:1px solid color-mix(in srgb,var(--loss) 38%,transparent);color:var(--ink)}
.note.good{background:color-mix(in srgb,var(--win) 13%,var(--surface));
           border:1px solid color-mix(in srgb,var(--win) 38%,transparent);color:var(--ink)}
.acct{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--dim)}
.acct button{background:none;border:0;color:var(--muted);font:inherit;font-size:.72rem;
             cursor:pointer;text-decoration:underline;padding:0}
.hide{display:none !important}