:root{
  --bg:#f3f5f9;--card:#ffffff;--ink:#16202e;--mute:#667085;--line:#e1e6ee;
  --accent:#1f3a5f;--accent-ink:#ffffff;--accent-soft:#e8eef7;
  --green:#18814d;--green-soft:#dff3e8;--red:#c0392b;--red-soft:#fbe3df;--amber:#8a5a00;--amber-soft:#fff0c2;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e141c;--card:#17202c;--ink:#e8edf4;--mute:#93a0b3;--line:#2a3648;
    --accent:#7fa8e0;--accent-ink:#0e141c;--accent-soft:#1d2a3d;
    --green:#4cc68a;--green-soft:#15352a;--red:#ff7b6b;--red-soft:#3d1f1c;--amber:#ffcf5c;--amber-soft:#3b2e0c;
    --shadow:none}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0}
.hidden{display:none!important}
.pos{color:var(--green)}.neg{color:var(--red)}
.mute{color:var(--mute)}

/* ---------- auth ---------- */
.auth{min-height:100%;overflow:auto;height:100%;display:grid;place-items:center;padding:24px}
.auth-card{width:min(440px,100%);background:var(--card);border-radius:20px;padding:28px;box-shadow:var(--shadow);border:1px solid var(--line)}
.auth-card h1{font-size:24px;color:var(--accent);margin-bottom:4px}
.auth-card p{margin:0 0 18px;color:var(--mute)}
.auth-card .note{font-size:13px;margin-top:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label,.lbl{font-size:12.5px;font-weight:600;color:var(--mute);letter-spacing:.02em}
.in{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);outline:none}
.in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.in{min-height:84px;resize:vertical}
.err{color:var(--red);font-size:13.5px;min-height:20px;margin:4px 0 8px}
.btn{min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:600}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.good{background:var(--green);color:#fff;border-color:transparent}
.btn.bad{background:var(--red);color:#fff;border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{min-height:36px;padding:0 12px;font-size:13.5px;border-radius:10px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh}
.top{display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top h1{font-size:18px;color:var(--accent);flex:1;white-space:nowrap}
.top select{max-width:46vw}
.main{min-height:0;overflow:auto;padding:16px 16px 24px;-webkit-overflow-scrolling:touch}
.page{max-width:1180px;margin:0 auto}
.nav{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
.nav button{background:none;border:0;padding:8px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mute);font-size:11.5px;font-weight:600;cursor:pointer;min-height:58px;position:relative}
.nav button svg{width:24px;height:24px}
.nav button.on{color:var(--accent)}
.nav button.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.badge{position:absolute;top:4px;left:calc(50% + 8px);background:var(--red);color:#fff;border-radius:99px;font-size:10.5px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
@media (min-width:720px){
  .shell{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .top{grid-column:1/-1}
  .nav{grid-row:2;grid-column:1;grid-template-columns:1fr;grid-auto-rows:min-content;align-content:start;gap:6px;border-top:0;border-right:1px solid var(--line);padding:14px 8px}
  .nav button{border-radius:14px;min-height:72px}
  .nav button.on{background:var(--accent-soft)}
  .nav button.on::before{display:none}
  .badge{left:calc(50% + 10px)}
  .main{grid-row:2;grid-column:2;padding:20px 24px 32px}
}

/* ---------- cards & lists ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.sec{padding:16px;margin-bottom:16px}
.sec h2{font-size:15px;margin-bottom:12px}
.head{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.head h2{font-size:18px;flex:1}
.chip{display:inline-block;padding:2px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600}
.chip.alt{background:transparent;border:1px solid var(--line);color:var(--mute)}
.chip.win{background:var(--green-soft);color:var(--green)}
.chip.loss{background:var(--red-soft);color:var(--red)}
.chip.pend{background:var(--amber-soft);color:var(--amber)}
.chip.canc{background:var(--accent-soft);color:var(--mute)}
.list{display:flex;flex-direction:column;gap:10px}
.bet{width:100%;text-align:left;padding:14px;cursor:pointer;display:block;border-radius:var(--r)}
.bet.sel{outline:2px solid var(--accent)}
.bet .r1{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bet .sp{flex:1}
.bet .odds{font-weight:700;font-variant-numeric:tabular-nums}
.bet .ev{margin:8px 0 6px;font-weight:600;overflow-wrap:anywhere}
.bet .r3{display:flex;gap:6px 16px;flex-wrap:wrap;color:var(--mute);font-size:13px}
.bet .r3 b{color:var(--ink);font-weight:600}
.bet .acts{display:flex;gap:8px;margin-top:10px}
.pending-row{background:var(--amber-soft)}
.split{display:block}
.aside{display:none}
@media (min-width:900px){
  .split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
  .aside{display:block;position:sticky;top:0}
}
.empty{padding:36px 16px;text-align:center;color:var(--mute)}
.stat-strip{display:flex;gap:18px;flex-wrap:wrap;color:var(--mute);font-size:13.5px;margin-bottom:12px}
.stat-strip b{color:var(--ink)}

/* ---------- forms ---------- */
.formgrid{display:grid;grid-template-columns:1fr;gap:0 16px}
@media (min-width:720px){.formgrid{grid-template-columns:1fr 1fr}.formgrid .full{grid-column:1/-1}}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;width:100%}
.seg button{flex:1;min-height:40px;border:0;background:transparent;border-radius:9px;font-weight:600;color:var(--mute);cursor:pointer}
.seg button.on{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}
.est{padding:12px 14px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-weight:600;margin-bottom:14px}
.est small{display:block;color:var(--mute);font-weight:500}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- modal / sheet ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,16,26,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{width:100%;max-height:92%;overflow:auto;background:var(--card);border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.sheet h3{font-size:17px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sheet h3 .sp{flex:1}
@media (min-width:720px){.overlay{align-items:center}.sheet{width:min(560px,92%);border-radius:20px}}
.toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;z-index:60;font-weight:600;max-width:90%}
@media (min-width:720px){.toast{bottom:28px}}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;border:0;background:none;text-align:left;padding:0 6px;border-bottom:1px solid var(--line);cursor:pointer;font-weight:600}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;font-weight:700;color:var(--accent)}

/* ---------- analytics ---------- */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.controls .field{margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin-bottom:16px}
.kpi{padding:12px 14px}
.kpi .l{font-size:11.5px;color:var(--mute);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.kpi .v{font-size:21px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--mute)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:900px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
svg.chart{width:100%;height:auto;display:block}
svg.chart text{fill:var(--mute);font-size:11px;font-family:inherit}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.tbl th{white-space:nowrap;text-align:right;color:var(--mute);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:6px 6px;border-bottom:1px solid var(--line)}
.tbl td{white-space:nowrap;padding:8px 6px;border-bottom:1px solid var(--line);text-align:right}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl tr.tot td{font-weight:700;border-bottom:0}
.tblwrap{overflow-x:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,.95fr);gap:4px}
.cal .dh{font-size:11px;font-weight:700;color:var(--mute);text-align:center;padding:4px 0}
.cal .d{min-width:0;overflow:hidden;min-height:58px;border-radius:10px;border:1px solid var(--line);padding:4px 6px;display:flex;flex-direction:column;justify-content:space-between;background:var(--card)}
.cal .d .n{font-size:11px;color:var(--mute)}
.cal .d .p{font-size:12.5px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.cal .d.out{opacity:.35}
.cal .d.w{background:var(--green-soft);border-color:transparent}.cal .d.w .p{color:var(--green)}
.cal .d.l{background:var(--red-soft);border-color:transparent}.cal .d.l .p{color:var(--red)}
.cal .d.wk{background:var(--bg)}
@media (max-width:420px){.cal{gap:3px}.cal .d{min-height:48px;padding:3px 2px}.cal .d .n{padding-left:2px}.cal .d .p{font-size:10px;letter-spacing:-.2px}.tbl td,.tbl th{padding-left:3px;padding-right:3px}.tbl{font-size:12.5px}}
.months{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:720px){.months{grid-template-columns:repeat(4,1fr)}}
.mtile{padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card);text-align:center}
.mtile .m{font-size:12px;font-weight:700;color:var(--mute)}
.mtile .p{font-size:17px;font-weight:800;margin:2px 0;font-variant-numeric:tabular-nums}
.mtile .s{font-size:11px;color:var(--mute)}
.mtile.w{background:var(--green-soft);border-color:transparent}.mtile.w .p{color:var(--green)}
.mtile.l{background:var(--red-soft);border-color:transparent}.mtile.l .p{color:var(--red)}
.navrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.navrow .t{flex:1;text-align:center;font-weight:700}

/* ---------- history ---------- */
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.filters .full{grid-column:1/-1}
@media (min-width:720px){.filters{grid-template-columns:repeat(5,minmax(0,1fr))}}
.hrow{padding:12px 14px}
.hrow .r1{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hrow .pl{font-weight:800;font-variant-numeric:tabular-nums}
.hrow .ev{margin:6px 0 2px;font-weight:600;overflow-wrap:anywhere}
.hrow .r3{display:flex;gap:4px 14px;flex-wrap:wrap;color:var(--mute);font-size:13px}
.hrow .acts{display:flex;gap:8px;margin-top:8px}
.hrow .notes{margin-top:6px;font-size:13px;color:var(--mute);font-style:italic}

.tbl td:first-child{white-space:normal}
@media (max-width:520px){.tbl .hs{display:none}}
.kpi .v{white-space:nowrap}