:root { --bg:#f6f7f9; --card:#fff; --text:#1c2330; --muted:#5b6575; --line:#e3e6eb; --accent:#1f5fd6; --bad:#b42318; --good:#147a3d; }
@media (prefers-color-scheme: dark) { :root { --bg:#12151b; --card:#1b2029; --text:#e6e9ef; --muted:#9aa3b2; --line:#2c3340; --accent:#6b9cff; --bad:#ff7b72; --good:#56d364; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); gap:12px; flex-wrap:wrap; }
.brand { font-weight:700; }
.stage { font-size:12px; font-weight:700; background:#f5a524; color:#000; border-radius:4px; padding:2px 6px; margin-left:6px; }
main { max-width:640px; margin:24px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; }
h1 { font-size:22px; margin:0 0 12px; }
label { display:block; font-size:14px; color:var(--muted); margin-bottom:12px; }
input[name]:not([type=radio]) { display:block; width:100%; margin-top:4px; padding:10px; font-size:16px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.season { border:0; padding:0; margin:0 0 16px; display:flex; gap:20px; flex-wrap:wrap; }
.season legend { font-size:14px; color:var(--muted); margin-bottom:4px; }
.season label { display:flex; align-items:center; gap:6px; color:var(--text); margin:0; }
button, .button { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:6px; padding:10px 18px; font-size:16px; cursor:pointer; text-decoration:none; }
button:disabled { opacity:.6; cursor:wait; }
button.link { background:none; color:var(--accent); padding:0; font-size:14px; }
.error { color:var(--bad); }
#result { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.item { font-weight:600; margin:0 0 8px; word-break:break-word; }
table { width:100%; border-collapse:collapse; }
td { padding:6px 0; border-bottom:1px solid var(--line); }
td.amt { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr.profit td { font-weight:700; border-bottom:0; padding-top:10px; }
tr.profit.neg td.amt { color:var(--bad); }
tr.profit.pos td.amt { color:var(--good); }
.meta { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; font-size:14px; margin:16px 0; }
.meta dt { color:var(--muted); }
.meta dd { margin:0; }
.callout { background:var(--bg); border-left:3px solid var(--accent); padding:8px 12px; font-size:14px; }
#r-notes { font-size:14px; color:var(--muted); padding-left:18px; }
@media (max-width:480px) { .row { grid-template-columns:1fr; } }
.badge { display:inline-block; font-size:12px; font-weight:700; border-radius:999px; padding:2px 8px; margin-right:4px; white-space:nowrap; }
.badge.match { background:#dcfce7; color:#14532d; }
.badge.higher { background:#fee2e2; color:#7f1d1d; }
.badge.lower { background:#dbeafe; color:#1e3a8a; }
.badge.default, .badge.unknown { background:#e5e7eb; color:#1f2937; }