:root {
  --bg: #f7f7f5; --surface: #ffffff; --text: #1b1d21; --muted: #62666f; --border: #e3e3df;
  --accent: #1f5f4a; --accent-text: #ffffff; --gain: #1f7a4d; --loss: #b3372f;
  --warn-bg: #fff6e0; --warn-border: #e8c46a; --error-bg: #fdecea; --error-border: #e6a39d;
  --radius: 10px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111315; --surface: #1a1d20; --text: #e8e9eb; --muted: #9a9ea6; --border: #2b2f33;
    --accent: #5fb892; --accent-text: #0d1a14; --gain: #5fcf95; --loss: #f0837a;
    --warn-bg: #2d2513; --warn-border: #6d5a26; --error-bg: #2f1715; --error-border: #7a3530;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
a { color: var(--accent); }
header.nav { background: var(--surface); border-bottom: 1px solid var(--border); }
header.nav .inner { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
header.nav .brand { font-weight: 700; text-decoration: none; color: var(--text); margin-right: auto; }
header.nav .brand .brand-num { color: var(--accent); }
header.nav a.link { text-decoration: none; color: var(--muted); }
header.nav a.link.active, header.nav a.link:hover { color: var(--text); }
header.nav form { margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 32px 0 12px; }
.subtitle { color: var(--muted); margin: 0 0 20px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card .label { color: var(--muted); font-size: 13px; }
.card .value { font-size: 22px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
.card .note { color: var(--muted); font-size: 12px; margin-top: 4px; }
.card.primary { border-color: var(--accent); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
td.num, th.num { text-align: right; }
td.wrap { white-space: normal; color: var(--muted); font-size: 13px; }
tr:last-child td { border-bottom: none; }
.gain { color: var(--gain); } .loss { color: var(--loss); }
.muted { color: var(--muted); }
.notice { border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.notice.error { border-color: var(--error-border); background: var(--error-bg); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }
form.stack { display: grid; gap: 14px; max-width: 460px; }
label { display: grid; gap: 4px; font-size: 14px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
label.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
label .hint { color: var(--muted); font-size: 12px; }
input, select { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
button, .button { font: inherit; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary { background: transparent; color: var(--text); border-color: var(--border); }
button.link { background: none; border: none; color: var(--muted); padding: 0; }
details { margin: 12px 0; } summary { cursor: pointer; color: var(--muted); }
pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; overflow-x: auto; font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.htmx-request .spinner { display: inline; } .spinner { display: none; color: var(--muted); }
footer { color: var(--muted); font-size: 12px; max-width: 1100px; margin: 0 auto; padding: 0 16px 32px; }
.legal { max-width: 760px; }
.legal h2 { margin-top: 28px; }
.legal p, .legal li { color: var(--text); }
.legal .todo { background: var(--warn-bg); border: 1px dashed var(--warn-border); padding: 0 4px; border-radius: 4px; }
.thread { display: grid; gap: 12px; margin-bottom: 16px; }
.bubble { padding: 12px 14px; border-radius: var(--radius); max-width: 760px; }
.bubble.question { background: var(--accent); color: var(--accent-text); justify-self: end; white-space: pre-wrap; }
.bubble.answer { background: var(--surface); border: 1px solid var(--border); }
.bubble.answer.error { border-color: var(--error-border); background: var(--error-bg); }
.bubble.answer > :first-child { margin-top: 0; } .bubble.answer > :last-child { margin-bottom: 0; }
.bubble.answer table { width: auto; margin: 8px 0; } .bubble.answer th, .bubble.answer td { padding: 4px 10px; }
.bubble .checked { margin-top: 8px; font-size: 12px; color: var(--muted); text-transform: none; }
.examples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.examples .example { text-align: left; font-size: 14px; }
.ask-form { display: grid; gap: 8px; max-width: 760px; }
.ask-form textarea { font: inherit; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }