/* ═══════════════════════════════════════════════════════════════
   Conrad – minimal
   Instrument Serif for figures and headings, Instrument Sans for the rest.
   No borders, no ornaments; space and type do the work.
   Colour only means something: green gain, red loss / danger.
   Follows the phone's light or dark mode.
   ═══════════════════════════════════════════════════════════════ */
@font-face { font-family:"Instrument Sans"; font-weight:400; font-display:swap; src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:500; font-display:swap; src:url(/fonts/instrument-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:600; font-display:swap; src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-weight:400; font-display:swap; src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap; src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); }

[hidden] { display:none !important; }
:root {
  --bg:#0e0e0d; --surface:#171716; --surface-2:#1f1f1d; --text:#f2f0eb; --dim:#8f8c85; --faint:#3a3936; --hair:#262624;
  --green:#5cc48a; --red:#ef5b4c; --amber:#d9a441; --ink:#f2f0eb; --on-ink:#0e0e0d;
  --serif:"Instrument Serif", Georgia, serif; --sans:"Instrument Sans", system-ui, sans-serif;
  --glass:transparent; --glass-2:var(--surface-2); --edge:var(--hair);
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f6f4ef; --surface:#ffffff; --surface-2:#efece5; --text:#191917; --dim:#77746c; --faint:#c9c5bb; --hair:#e6e2d9;
          --green:#1f8a52; --red:#c8382a; --amber:#a86f0e; --ink:#191917; --on-ink:#f6f4ef; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--text); }
body { font:15.5px/1.5 var(--sans); min-height:100vh; -webkit-font-smoothing:antialiased;
       padding:env(safe-area-inset-top) 0 calc(80px + env(safe-area-inset-bottom)); overflow-x:hidden; }
h1 { font:400 30px/1 var(--serif); margin:0; letter-spacing:-.3px; }
h2 { font:500 15px/1.2 var(--sans); margin:0; letter-spacing:-.1px; }
h3 { font:400 26px/1.15 var(--serif); margin:2px 0 10px; }
.grad { color:var(--text); }
.muted { color:var(--dim); } .small { font-size:12.5px; }
.bg, .orb, .rule, .mark, .crest, .sprite { display:none; }

/* surfaces */
.glass { background:var(--surface); border:0; }
.card { border-radius:20px; padding:20px; margin:0 0 12px; }
.pad { padding:20px; border-radius:20px; }

/* sign in */
.login { max-width:400px; margin:0 auto; padding:20vh 22px 0; }
.brand { margin-bottom:34px; }
.brand h1 { font-size:56px; letter-spacing:-1px; }
.motto { font:italic 400 22px var(--serif); color:var(--dim); margin:4px 0 0; }
.brand .muted { display:none; }
input, select { width:100%; font:16px var(--sans); padding:15px 16px; border-radius:14px; border:1px solid var(--hair); background:var(--bg);
        color:var(--text); margin-bottom:10px; outline:none; transition:border-color .15s; }
input:focus, select:focus { border-color:var(--text); }
input::placeholder { color:var(--dim); }
.error { color:var(--red); min-height:1.3em; margin:10px 0 0; font-size:14px; }

/* header */
.top { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
       padding:14px 20px 10px; max-width:600px; margin:0 auto; background:var(--bg); }
.title h1 { font-size:30px; }
.top-right { display:flex; align-items:center; gap:14px; }
.live { display:flex; align-items:center; gap:7px; font:500 13px var(--sans); color:var(--dim); }
.live i { width:7px; height:7px; border-radius:50%; background:var(--amber); }
.live.on i { background:var(--green); } .live.off i { background:var(--red); }
.icon-btn { background:none; color:var(--text); border:0; width:32px; height:32px; font-size:20px; line-height:1; padding:0; }
.icon-btn:disabled { opacity:.25; }
.tab { max-width:600px; margin:0 auto; padding:6px 14px 0; animation:fade .2s ease-out; }
@keyframes fade { from { opacity:0; } }

/* tab bar */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:6; max-width:600px; margin:0 auto; display:flex;
          padding:8px 10px calc(10px + env(safe-area-inset-bottom)); background:var(--bg) !important; border:0 !important;
          border-top:1px solid var(--hair) !important; border-radius:0 !important; box-shadow:none !important; }
.tabbar button { flex:1; background:none; border:0; color:var(--dim); font:500 11.5px var(--sans);
                 display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; position:relative; }
.tabbar svg { width:21px; height:21px; fill:currentColor; }
.tabbar button.on { color:var(--text); }
.badge { position:absolute; top:4px; right:calc(50% - 16px); width:7px; height:7px; border-radius:50%; background:var(--red); }

.strip { border-radius:14px; padding:12px 16px; margin-bottom:12px; font-size:14px; }
.strip.warn { background:var(--surface); color:var(--amber); }

/* tile contents */
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.chip { font:500 12.5px var(--sans); color:var(--dim); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--faint); }
.chip.ok::before { background:var(--green); } .chip.bad { color:var(--red); } .chip.bad::before { background:var(--red); }
.chip.warn::before { background:var(--amber); }
.tag { font:italic 400 15px var(--serif); color:var(--dim); margin-left:4px; text-transform:lowercase; }
.tag.live-tag { color:var(--red); }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-top:14px; }
.kicker { font:500 12.5px var(--sans); color:var(--dim); margin:0; }
.kicker.gap { margin-top:14px; }
.money { font:400 46px/1 var(--serif); letter-spacing:-.8px; margin-top:6px; color:var(--text); }
.money.big { font-size:54px; }
.money.up { color:var(--green); } .money.down { color:var(--red); }
.spark { width:110px; height:40px; flex:none; }
.line { color:var(--dim); margin:8px 0 0; font-size:14px; }
.line.neg { color:var(--red); }
.kite .line { margin-top:4px; }
.positions { list-style:none; padding:0; margin:14px 0 0; }
.positions li { font-size:14px; padding:10px 0; border-top:1px solid var(--hair); }
.busy { margin-top:14px; font-size:14px; color:var(--dim); display:flex; align-items:center; gap:8px; }
.busy::before { content:""; width:12px; height:12px; border-radius:50%; border:1.5px solid var(--dim); border-top-color:transparent; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.card.dim .money, .card.dim .line, .card.dim .spark { opacity:.4; }

/* buttons: quiet by default, solid only for the one thing to do */
.btn { font:500 15px var(--sans); color:var(--text); background:var(--surface-2); border:0; border-radius:999px;
       padding:12px 18px; min-height:46px; flex:1 1 auto; transition:opacity .15s, transform .08s; }
.btn:active { transform:scale(.98); opacity:.85; } .btn:disabled { opacity:.3; }
.btn.primary { background:var(--ink); color:var(--on-ink); }
.btn.danger { background:var(--red); color:#fff; }
.btn.danger.outline { background:none; color:var(--red); box-shadow:inset 0 0 0 1.5px var(--red); }
.btn.ghost { background:none; color:var(--dim); flex:1 1 auto; }
.actions .btn.ghost { flex:1 1 100%; min-height:34px; padding:4px; font-size:14px; }
.btn.wide { width:100%; margin-top:10px; }
a.btn { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.link { background:none; border:0; color:var(--dim); font:inherit; font-size:14px; padding:4px; text-decoration:underline; text-underline-offset:3px; }

/* stats */
.seg { display:flex; background:var(--surface); border-radius:999px; padding:4px; margin-bottom:12px; }
.seg button { flex:1; background:none; border:0; color:var(--dim); font:500 14.5px var(--sans); padding:10px; border-radius:999px; }
.seg button small { font:italic 400 14px var(--serif); }
.seg button.on { background:var(--ink); color:var(--on-ink); }
.chips { display:flex; gap:4px; overflow-x:auto; padding:0 0 14px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chips button { flex:none; background:none; border:0; color:var(--dim); font:500 14px var(--sans); padding:8px 12px; border-radius:999px; }
.chips button.on { background:var(--surface-2); color:var(--text); }
.summary .money { margin-top:8px; }
.kv { display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; margin-top:22px; }
.kv div { padding:0; }
.kv span { display:block; font:500 12.5px var(--sans); color:var(--dim); }
.kv b { font:400 22px/1.2 var(--serif); font-weight:400; }
.bars { width:100%; height:150px; margin-top:14px; display:block; }
.axis { display:flex; justify-content:space-between; font-size:11.5px; color:var(--dim); margin-top:6px; }
.cal-head h2 { flex:1; text-align:center; font:400 22px var(--serif); }
.cal-week, .cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-week { margin:14px 0 6px; font-size:11.5px; color:var(--dim); text-align:center; }
.cal button { aspect-ratio:1/1.05; border:0; border-radius:10px; background:var(--surface-2); color:var(--text);
              font:inherit; padding:3px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:0; }
.cal button b { font:500 13px var(--sans); } .cal button small { font-size:9px; white-space:nowrap; overflow:hidden; max-width:100%; }
.cal button.blank { visibility:hidden; }
.cal button.future { opacity:.3; }
.cal button.today b { text-decoration:underline; text-underline-offset:3px; }
.cal button.sel { box-shadow:inset 0 0 0 1.5px var(--text); }
.cal button.inrange { box-shadow:inset 0 0 0 1px var(--dim); }
.hint-line { font-size:13px; color:var(--dim); margin:14px 0 0; text-align:center; }
.days { list-style:none; padding:0; margin:8px 0 0; max-height:380px; overflow:auto; }
.days li { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:12px 0; border-top:1px solid var(--hair); font-size:14.5px; }
.days li small { color:var(--dim); font-size:12.5px; grid-column:1 / -1; }
.days .pos { color:var(--green); } .days .neg { color:var(--red); }
.days li .del { background:none; border:0; color:var(--dim); font:inherit; font-size:12.5px; text-decoration:underline; padding:0; }

/* books */
.center { text-align:center; } .cal-head .center { flex:1; } .cal-head .center p { margin:2px 0 0; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.two input { margin-bottom:0; }
.exp-form { margin-top:14px; display:grid; gap:8px; }
.exp-form input, .exp-form select { margin-bottom:0; }
.field { display:block; font-size:13.5px; color:var(--dim); margin-top:10px; }
.field .two { margin-top:8px; grid-template-columns:1fr auto; }
input[type=date] { color-scheme:light dark; }

/* alerts */
.alerts { list-style:none; padding:0; margin:0; }
.alerts li { display:grid; grid-template-columns:48px 1fr; gap:10px; padding:12px 0; border-top:1px solid var(--hair); font-size:14.5px; }
.alerts li:first-child { border-top:0; padding-top:0; }
.alerts time { color:var(--dim); font-size:12.5px; padding-top:2px; font-variant-numeric:tabular-nums; }
.alerts .src { font:italic 400 15px var(--serif); color:var(--dim); margin-right:6px; text-transform:lowercase; }
.alerts li.bad { color:var(--red); } .alerts li.warn { color:var(--amber); }

/* sheets + toast */
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:11; max-width:600px; margin:0 auto; background:var(--surface);
         border:0; border-radius:26px 26px 0 0; padding:26px 20px calc(22px + env(safe-area-inset-bottom)); animation:up .2s ease-out; }
.sheet.tall { max-height:88vh; overflow:auto; }
.sheet p { color:var(--dim); margin:0 0 8px; }
.sheet pre { white-space:pre-wrap; font:13px/1.55 ui-monospace, Menlo, monospace; background:var(--surface-2); padding:14px; border-radius:14px; margin:0; max-height:60vh; overflow:auto; }
.hint { font-size:13px; color:var(--amber) !important; margin:-2px 0 6px !important; }
.label { font:500 12.5px var(--sans) !important; color:var(--dim) !important; margin:20px 0 0 !important; }
.small-note { font-size:14px; margin:4px 0 0 !important; }
.fp-list { list-style:none; padding:0; margin:6px 0 0; }
.fp-list li { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--hair); font-size:14px; }
@keyframes up { from { transform:translateY(30px); opacity:0; } }
.toast { position:fixed; left:16px; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:12; max-width:568px; margin:0 auto;
         background:var(--ink); color:var(--on-ink); border-radius:14px; padding:13px 16px; font-size:14.5px; }

/* live trades */
.actions .btn.ghost.half { flex:1 1 40%; }
.open-line { color:var(--text); }
.trades { list-style:none; padding:0; margin:6px 0 0; }
.trades li { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:11px 0; border-top:1px solid var(--hair); font-size:14.5px; }
.trades li:first-child { border-top:0; }
.trades li b { font:400 20px/1.1 var(--serif); text-align:right; }
.trades li small { color:var(--dim); font-size:12.5px; grid-column:1 / -1; font-variant-numeric:tabular-nums; }
.trades .up { color:var(--green); } .trades .down { color:var(--red); }
.trades .empty { color:var(--dim); display:block; }
.tr-sum { margin:10px 0 4px; }
/* notification switches */
.toggles { list-style:none; padding:0; margin:8px 0 0; }
.toggles li { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--hair); }
.toggles li span { font-size:15px; } .toggles small { display:block; color:var(--dim); font-size:12.5px; }
.switch { width:46px; height:28px; border-radius:99px; border:0; background:var(--faint); position:relative; flex:none; transition:background .15s; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .15s; }
.switch.on { background:var(--green); } .switch.on::after { transform:translateX(18px); }
.pause-row { margin-top:10px; } .pause-row .btn { font-size:14px; min-height:40px; padding:8px 12px; }