:root { --bg:#f6f7f9; --card:#fff; --ink:#111; --muted:#666; --line:#e3e5e8; --blue:#1565c0; --red:#c62828; }
@media (prefers-color-scheme: dark) { :root { --bg:#121417; --card:#1c1f24; --ink:#eceff1; --muted:#9aa0a6; --line:#2c3036; --blue:#64a8ff; --red:#ff6b6b; } }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; background:var(--bg); color:var(--ink); }
header { position:sticky; top:0; display:flex; gap:12px; align-items:center; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); z-index:2; }
header h1 { font-size:18px; margin:0; flex:1; }
#clock { color:var(--muted); font-size:13px; }
main { max-width:760px; margin:0 auto; padding:12px 16px 48px; }
h2 { font-size:15px; margin:22px 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:8px 0; display:flex; gap:12px; align-items:center; }
.card .info { flex:1; min-width:0; }
.sym { font-weight:700; font-size:16px; }
.pnl { font-weight:700; margin-left:8px; }
.up { color:var(--blue); } .down { color:var(--red); }
.label, .note { font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.live { font-size:13px; }
button { font:inherit; padding:10px 16px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; min-height:44px; }
button.exit, button.danger { background:var(--red); color:#fff; border-color:var(--red); font-weight:700; }
button.link { border:none; background:none; color:var(--muted); min-height:auto; padding:4px; }
button:disabled { opacity:.5; cursor:default; }
.muted { color:var(--muted); }
.err { color:var(--red); }
.problems { background:#fff4e5; color:#8a4b00; border-radius:8px; padding:8px 12px; font-size:13px; }
@media (prefers-color-scheme: dark) { .problems { background:#3a2a12; color:#ffcf8a; } }
#modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:5; }
#modal[hidden] { display:none; }
#modal .box { background:var(--card); border-radius:12px; padding:18px; max-width:420px; width:100%; }
#modal .row { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.login { max-width:340px; margin:18vh auto; padding:0 16px; }
.login form { display:flex; flex-direction:column; gap:10px; }
.login input { font:inherit; padding:12px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
.recent div { font-size:13px; padding:4px 0; border-bottom:1px solid var(--line); }