:root { color-scheme: light dark; --bg:#f6f6f4; --fg:#1b1b1b; --card:#fff; --line:#d8d8d2; --accent:#1f5f4a; --bad:#a32020; }
@media (prefers-color-scheme: dark) { :root { --bg:#141614; --fg:#ececea; --card:#1d201d; --line:#343834; --accent:#5fb596; --bad:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
main { max-width:26rem; margin:0 auto; padding:1.5rem 1rem 4rem; }
h1 { font-size:1.4rem; margin:.5rem 0 1rem; }
form, .card { background:var(--card); border:1px solid var(--line); border-radius:.6rem; padding:1rem; display:grid; gap:.8rem; margin-bottom:1rem; }
label { display:grid; gap:.25rem; font-size:.9rem; }
input { font:inherit; padding:.6rem; border:1px solid var(--line); border-radius:.4rem; background:var(--bg); color:inherit; width:100%; }
input[type=checkbox] { width:auto; }
button { font:inherit; padding:.65rem 1rem; border:0; border-radius:.4rem; background:var(--accent); color:#fff; cursor:pointer; }
button.secondary { background:transparent; color:var(--fg); border:1px solid var(--line); }
button:disabled { opacity:.6; cursor:wait; }
.muted { opacity:.7; font-size:.9rem; }
.error { color:var(--bad); min-height:1.2em; }
.key { font:1rem/1.6 ui-monospace, monospace; word-break:break-all; padding:.6rem; border:1px dashed var(--line); border-radius:.4rem; user-select:all; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; }
a { color:var(--accent); }
/* street view */
.row.nowrap { flex-wrap:nowrap; }
.row.nowrap input { flex:1 1 auto; min-width:0; }
.row.nowrap select { flex:0 0 5.5rem; }
select { font:inherit; padding:.6rem; border:1px solid var(--line); border-radius:.4rem; background:var(--bg); color:inherit; }
input.big { font-size:1.6rem; padding:.5rem .6rem; }
button.small { padding:.3rem .6rem; font-size:.85rem; }
button.tab { background:transparent; color:var(--fg); border:1px solid var(--line); }
button.tab.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.totals { margin:.2rem 0 .8rem; }
.items { list-style:none; margin:.6rem 0; padding:0; display:grid; gap:.5rem; }
.item { display:grid; grid-template-columns:1fr auto auto; gap:.6rem; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:.5rem; padding:.6rem .7rem; }
.item .what { min-width:0; overflow-wrap:anywhere; }
.item .amt { font-variant-numeric:tabular-nums; white-space:nowrap; }
/* full view */
main.wide { max-width:44rem; }
.row.center { align-items:center; justify-content:space-between; }
.grow { flex:1 1 auto; text-align:center; }
.total { font-size:1.9rem; font-weight:600; font-variant-numeric:tabular-nums; }
.warn { color:var(--bad); font-size:.9rem; }
.badge { background:var(--bad); color:#fff; border-radius:.3rem; padding:0 .4rem; font-size:.75rem; }
.bars { list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.barline { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; align-items:center; }
meter { width:100%; height:.55rem; }
.ratebox { display:grid; gap:.35rem; }
summary { cursor:pointer; font-weight:600; }
.nav { display:flex; gap:.5rem; margin-bottom:.5rem; }
.nav button { flex:1; }
.row.nowrap select.fill { flex:1 1 auto; min-width:0; }
/* search and filters */
.hidden { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem; }
button.chip { padding:.25rem .7rem; border-radius:1rem; background:transparent; color:var(--fg); border:1px solid var(--line); font-size:.85rem; }
button.chip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.badge.hidden { display:none; }
details.card > summary ~ * { margin-top:.2rem; }
/* counter, rows with detail panel, settings */
.counter { display:grid; gap:.3rem; margin:.2rem 0 .8rem; }
.counter .total { margin:0; }
.row.nowrap select.cur-box { flex:0 0 auto; width:auto; }
.aspent { display:flex; flex-wrap:wrap; gap:.1rem .5rem; align-items:baseline; }
.item { display:block; padding:0; }
button.rowhead { display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:center; width:100%; text-align:left; background:transparent; color:inherit; border:0; padding:.6rem .7rem; border-radius:.5rem; }
.item .amt { text-align:right; }
.detail { border-top:1px solid var(--line); padding:.6rem .7rem; display:grid; gap:.6rem; }
dl.facts { display:grid; grid-template-columns:auto 1fr; gap:.25rem .9rem; margin:0; font-size:.92rem; }
dl.facts dt { opacity:.7; }
dl.facts dd { margin:0; overflow-wrap:anywhere; }
.editform { display:grid; gap:.5rem; }
label.check { display:flex; gap:.4rem; align-items:center; }
details.more { margin:-.2rem 0; }
details.more > * { margin-top:.5rem; }
.setrow { display:grid; gap:.4rem; }

/* vault */
label.stack { display:grid; gap:.25rem; }
form.stack { display:grid; gap:.6rem; }
.recovery { font-family:ui-monospace,Menlo,monospace; font-size:1.05rem; letter-spacing:.03em; overflow-wrap:anywhere; background:var(--card); border:1px dashed var(--line); border-radius:.5rem; padding:.7rem; user-select:all; }
button.link { background:none; border:0; padding:.4rem 0; color:inherit; text-decoration:underline; font:inherit; width:auto; opacity:.8; }
ul.hist { list-style:none; margin:.4rem 0; padding:0; display:grid; gap:.3rem; }
ul.hist li { display:flex; justify-content:space-between; gap:.6rem; font-size:.95rem; }
ul.hist .amt { font-variant-numeric:tabular-nums; text-align:right; }
.pos { color:var(--good, #1f7a4d); }
.neg { color:var(--bad); }
.muted.cur { align-self:center; }