:root { --tr-pos: #16a34a; --tr-neg: #dc2626; }
body { max-width: 1100px; }
.muted { opacity: 0.7; font-size: 0.85rem; }
.positive { color: var(--tr-pos); }
.negative { color: var(--tr-neg); }
#chart-wrap { position: relative; height: 380px; margin-bottom: 1.5rem; }
table td.num, table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 3px;
        background: #f3f4f6; font-size: 0.72rem; font-weight: 600; }

/* Chart controls (range buttons + mode toggle) */
.chart-controls { float: right; display: inline-flex; gap: 0.5rem; align-items: center; }
#range-buttons button { display: inline-block; width: auto; padding: 0.1rem 0.5rem;
        margin: 0 0 0 0.2rem; font-size: 0.78rem; }
#range-buttons button.active { background: var(--pico-primary, #2563eb); color: #fff;
        border-color: var(--pico-primary, #2563eb); }
#mode-select { width: auto; display: inline-block; padding: 0.1rem 1.6rem 0.1rem 0.5rem;
        margin: 0; font-size: 0.78rem; height: auto; }
.pos-totals { float: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.del-pos { color: var(--tr-neg); text-decoration: none; font-weight: 700; margin-left: 0.3rem; }
#editor { margin-top: 0.5rem; }
#editor form.grid { align-items: end; }
#editor input, #editor button { margin-bottom: 0; }