:root { --ink:#1d1d1b; --mute:#6b6b66; --line:#e4e4df; --bg:#faf9f6; --panel:#fff; --acc:#1f6f8b; --bad:#b3261e; --ok:#2e7d32; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--acc); }
.topbar { display:flex; align-items:center; gap:24px; padding:14px 24px; border-bottom:1px solid var(--line); background:var(--panel); }
.topbar .brand { font-weight:700; text-decoration:none; color:var(--ink); font-size:18px; }
.topbar nav a { margin-right:16px; text-decoration:none; color:var(--ink); }
.content { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; }
.content.wide { max-width: 1440px; padding: 22px 28px 60px; }  /* tool pages: minimal gutters, capped on very wide screens */
.footer { border-top:1px solid var(--line); padding:18px 24px; color:var(--mute); font-size:13px; }
.hero h1 { font-size:34px; margin:12px 0 8px; }
.lead { font-size:18px; color:#333; }
.muted { color:var(--mute); } .small { font-size:13px; } .bad { color:var(--bad); } .ok { color:var(--ok); }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.postlist { list-style:none; padding:0; } .postlist li { margin:8px 0; }
.toollist li { margin:10px 0; }
article table { border-collapse:collapse; width:100%; margin:12px 0 18px; font-size:14px; display:block; overflow-x:auto; }
article th, article td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
article th { color:var(--mute); font-weight:500; }
article blockquote { border-left:3px solid var(--acc); margin:0; padding:6px 14px; background:#f1f5f7; color:#333; }
article h2 { margin-top:34px; border-bottom:1px solid var(--line); padding-bottom:4px; }
article pre, article code { font-size:13px; }
.topbar .spacer { flex:1; }
.auth { max-width:440px; }
.devnote { background:#fff4c2; padding:8px 10px; border-radius:6px; font-size:13px; word-break:break-all; }
table.kv th { text-align:left; color:var(--mute); font-weight:500; padding:6px 12px 6px 0; } table.kv td { padding:6px 0; }
.figure { border-bottom:1px dotted var(--acc); cursor:help; }
.chart-stack { height:560px; } .chart { height:320px; }
.analysis h2 { margin:22px 0 4px; } .analysis .vs { color:var(--mute); margin:0 0 10px; }
.meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:6px 18px; font-size:13px; color:#333; margin:10px 0; }
.tickers { display:grid; gap:6px; max-width:420px; }
.ticker-row { display:grid; grid-template-columns:1fr 110px 32px; gap:6px; align-items:center; }
.ticker-row .w { position:relative; } .ticker-row .w::after { content:"%"; position:absolute; right:9px; top:7px; color:var(--mute); }
.ticker-row .w input { padding-right:24px; text-align:right; }
.tickers-foot { display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:13px; color:var(--mute); max-width:420px; }
.tickers-foot .sum.bad { color:var(--bad); font-weight:600; }
.accounts { display:grid; gap:6px; }
.account-row { display:grid; grid-template-columns:1.1fr 1fr 1fr 2.2fr 80px 32px; gap:6px; align-items:center; }
.account-row .g { position:relative; } .account-row .g::after { content:"%"; position:absolute; right:9px; top:7px; color:var(--mute); }
.account-row .g input { padding-right:24px; text-align:right; }
@media (max-width:760px) { .account-row { grid-template-columns:1fr 1fr; } }
.actions { margin-top:14px; display:flex; gap:10px; align-items:center; }

/* content components: card grid, images, transcripts (chat), static charts (svgchart) */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:12px 0 18px; } .card-grid .card { margin:0; }
.card-grid ul { margin:0; padding-left:18px; }
article img { max-width:100%; height:auto; border-radius:8px; }
.post-hero { display:block; margin:8px 0 18px; }
.chat-msg { margin:14px 0; } .chat-user, .chat-assistant { padding:10px 14px; border-radius:10px; }
.chat-user { background:#eef3f6; margin-left:15%; } .chat-assistant { background:#f3f3f0; margin-right:5%; }
.chat-mark { font-size:11px; color:var(--mute); margin-top:6px; } .chat-mark-top { margin:0 0 8px; font-weight:600; color:#8a5a00; }
.chat-who { font-size:11px; font-weight:600; color:var(--mute); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.chat-msg > :is(p, ul, ol, h3, h4):first-of-type { margin-top:0; } .chat-msg h3 { font-size:17px; } .chat-msg h4 { font-size:15px; }
.svgchart { margin:12px 0; } .svgchart svg { display:block; width:100%; height:auto; }
.svgchart-title { font-weight:600; font-size:14px; margin-bottom:4px; }
.svgchart-legend { font-size:12px; display:flex; flex-wrap:wrap; gap:4px 14px; margin-bottom:2px; }
.svgchart-legend .key i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; background:currentColor; vertical-align:-1px; }
.svgchart .grid { stroke:var(--line); } .svgchart .axis { stroke:#9a9a94; }
.svgchart .tick, .svgchart .axis-title { font-size:11px; fill:var(--mute); }
.svgchart .line { fill:none; stroke:currentColor; stroke-width:2; } .svgchart .area { fill:currentColor; fill-opacity:.25; stroke:none; }
.svgchart .bars { fill:currentColor; }
.svgchart details { font-size:13px; } .svgchart summary { cursor:pointer; color:var(--mute); }
/* v1's Google Charts series colors, so imported charts look as they did */
.s0 { color:#3366CC; } .s1 { color:#DC3912; } .s2 { color:#FF9900; } .s3 { color:#109618; } .s4 { color:#990099; } .s5 { color:#0099C6; }
@media (max-width:700px) { .chat-user { margin-left:0; } .chat-assistant { margin-right:0; } }