.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 24px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; text-align: left; }
.card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.card h3 { margin: 0 0 4px; font-size: 15px; }
.card .num { font-size: 30px; font-weight: 600; letter-spacing: 1px; }
.card .delta { font-size: 13px; margin-left: 8px; }
.down { color: #2f7d4f; } .up { color: var(--error); } .flat { color: var(--muted); }
.card p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.card svg { display: block; margin-top: 8px; }
.sec { margin-top: 32px; }
.sec h2 { font-size: 18px; margin: 0 0 6px; }
.sec .intro { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.7; }
table.t { border-collapse: collapse; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 14px; }
table.t th, table.t td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
table.t th { background: #efece5; font-weight: 600; font-size: 13px; }
table.t td.n { text-align: right; font-variant-numeric: tabular-nums; }
table.t code { font-size: 12.5px; }
.empty { background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 20px; margin-top: 24px; }