@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/*
  One spacing scale, each step ~1.618x the last: 5 8 13 21 34 55.
    5-13  inside a control or between tightly related items
    21    inside a card, between cards, page side margin
    34    around the page: top margin, under the title
  Type: 13 / 16 / 21 / 34. Controls are 44 high (Apple's minimum touch size).
  Colour: navy and its tints only.
*/
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F3F5FA;
  --navy: #0A1F44;
  --ink: #0A1F44;
  --ink-2: #6B7690;
  --ink-3: #A3ACC0;
  --line: rgba(10, 31, 68, 0.08);
  --s1: 5px; --s2: 8px; --s3: 13px; --s4: 21px; --s5: 34px; --s6: 55px;
  --control: 44px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 400 16px/1.4 "Inter", -apple-system, system-ui, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  padding-bottom: calc(var(--s6) + var(--s5) + env(safe-area-inset-bottom));
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* page */
.page { max-width: 480px; margin: 0 auto; padding: calc(var(--s5) + env(safe-area-inset-top)) var(--s4) 0; }
.head { display: flex; justify-content: space-between; align-items: flex-end; min-height: var(--s6); margin-bottom: var(--s5); }
.head h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.sub { margin-bottom: var(--s1); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.group { margin: 0 var(--s3) var(--s2); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.icon { width: var(--control); height: var(--control); margin: 0 -11px -5px 0; display: grid; place-items: center; border: 0; background: none; color: var(--navy); }
.icon svg { width: 22px; height: 22px; }

/* cards and lists */
.card { margin: 0 0 var(--s4); border-radius: var(--s4); background: var(--surface); }
.list { list-style: none; padding: 0 var(--s4); }
.list li { display: flex; align-items: center; gap: var(--s3); min-height: var(--s6); border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }

/* balance */
.hero { margin-bottom: var(--s4); padding: var(--s4); border-radius: var(--s4); background: var(--navy); color: #fff; }
.hero-top { display: flex; min-height: 26px; }
.pill { display: inline-flex; align-items: center; gap: var(--s1); height: 26px; padding: 0 var(--s3) 0 var(--s2); border-radius: var(--s3); background: rgba(255,255,255,.14); font-size: 13px; font-weight: 500; }
.pill svg { width: 14px; height: 14px; }
.hero-top:not([hidden]) + .amount { margin-top: var(--s3); }
.amount { font-size: 34px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; overflow-wrap: anywhere; }
.amount small { margin-left: var(--s2); font-size: 16px; font-weight: 500; letter-spacing: 0; opacity: .6; }
.bar { height: 4px; margin-top: var(--s4); border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: #fff; transition: width .4s ease; }
.goal { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: 13px; font-weight: 500; opacity: .65; }

/* entry */
.entry { padding: var(--s4); }
.field { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: var(--control); padding: 0 var(--s3); border-radius: var(--s3); background: #fff; }
.field span { font-size: 15px; font-weight: 500; }
.field input { flex: 1; min-width: 0; border: 0; background: none; text-align: right; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.field input:focus { outline: 0; }
.field:focus-within { box-shadow: 0 0 0 2px var(--navy); }
.field input::placeholder { color: var(--ink-3); font-weight: 500; }

.wheel { position: relative; height: 170px; margin: var(--s4) 0; }
.wheel::before { content: ""; position: absolute; left: 0; right: 0; top: 68px; height: 34px; border-radius: var(--s2); background: #fff; pointer-events: none; }
.wheel-list {
  position: relative; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
}
.wheel-list::-webkit-scrollbar { display: none; }
.wheel-list::before, .wheel-list::after { content: ""; display: block; height: 68px; }
.wheel-item { height: 34px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; color: var(--ink-2); font-size: 15px; font-weight: 500; cursor: pointer; }
.wheel-item[aria-selected="true"] { color: var(--ink); font-weight: 600; }

/* Loss : Win split 1 : 1.618 */
.actions { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s3); }
.btn { height: var(--control); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); border: 0; border-radius: var(--s3); font-size: 15px; font-weight: 600; transition: opacity .15s, transform .1s; }
.btn svg { width: 16px; height: 16px; stroke-width: 2.2; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: .3; }
.btn.win { background: var(--navy); color: #fff; }
.btn.loss { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }

/* today's bets */
.log li { justify-content: space-between; }
.log .odds { margin-left: auto; color: var(--ink-2); font-weight: 500; }
.log svg { width: 18px; height: 18px; }
.log .win svg { stroke: var(--navy); }
.log .loss svg { stroke: var(--ink-3); }

/* sports page */
.sportlist li { display: block; min-height: 0; padding: var(--s3) 0; }
.sportlist .line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.sportlist .name { font-size: 16px; font-weight: 600; }
.sportlist .roi { font-size: 16px; font-weight: 600; color: var(--navy); }
.sportlist .roi.neg { color: var(--ink-2); font-weight: 500; }
.meter { height: 3px; margin-top: var(--s2); border-radius: 2px; background: rgba(10,31,68,.07); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 2px; background: var(--navy); }
.meter i.neg { background: var(--ink-3); }
.sportlist .meta { margin-top: var(--s1); color: var(--ink-2); font-size: 13px; }
.sportlist .none { padding: var(--s4) 0; color: var(--ink-2); }

/* settings */
.cfgs li { justify-content: space-between; }
.cfgs label { font-size: 16px; font-weight: 500; }
.cfgs input { width: 55%; height: var(--control); border: 0; background: none; text-align: right; font-size: 16px; font-weight: 600; }
.cfgs input:focus { outline: 0; }
.cfgs input.bad { color: var(--ink-3); }
.manage li { justify-content: space-between; }
.manage .rm { width: var(--control); height: var(--control); margin-right: -11px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); }
.manage .rm svg { width: 22px; height: 22px; }
.manage .rm:disabled { opacity: .3; }
.add { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); }
.add input { flex: 1; min-width: 0; height: var(--s6); border: 0; background: none; font-size: 16px; }
.add input:focus { outline: 0; }
.add input.bad { color: var(--ink-3); }
.add input::placeholder { color: var(--ink-3); }
.text-btn { height: var(--control); padding: 0; border: 0; background: none; color: var(--navy); font-size: 15px; font-weight: 600; }
.reset { display: flex; align-items: center; min-height: var(--s6); padding: 0 var(--s4); }
.reset-btn { width: 100%; height: var(--s6); padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 16px; font-weight: 500; text-align: left; }
.reset-confirm { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--s3); }
.danger-btn { height: 34px; padding: 0 var(--s3); border: 0; border-radius: var(--s2); background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; }

/* tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center; gap: var(--s6);
  padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
}
.tabbar a { display: grid; justify-items: center; gap: 3px; min-width: var(--s6); padding: var(--s1) 0; color: var(--ink-3); font-size: 11px; font-weight: 500; text-decoration: none; }
.tabbar svg { width: 24px; height: 24px; }
.tabbar a.on { color: var(--navy); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .bar i, .btn { transition: none; } }