:root { --bg:#f6f7f9; --card:#fff; --fg:#1d2330; --mute:#7a8294; --line:#e3e6ec; --nick:#d6eefc; --stam:#f6dcf5; --ok:#1b8a4b; --bad:#c62828; }
@media (prefers-color-scheme: dark) { :root { --bg:#14171d; --card:#1e232d; --fg:#e8ebf2; --mute:#8b93a5; --line:#2c3340; --nick:#1d3a4d; --stam:#4a2b49; --ok:#4cc38a; --bad:#ff7b72; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px system-ui,sans-serif; }
header { display:flex; gap:16px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); }
h1 { font-size:18px; margin:0; flex:1; }
main { max-width:1000px; margin:0 auto; padding:16px; display:grid; gap:16px; }
section { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 16px; overflow-x:auto; }
h2 { font-size:15px; margin:0 0 8px; }
table { border-collapse:collapse; width:100%; }
th, td { padding:4px 8px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
th.nick { background:var(--nick); } th.stam { background:var(--stam); }
input[type=number] { width:80px; text-align:right; }
input[type=text] { width:100%; }
input, button { font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:3px 6px; }
tr.off td { color:var(--mute); } tr.off input { opacity:.5; }
tr.total td { font-weight:600; }
.pos { color:var(--ok); } .neg { color:var(--bad); }
.del { cursor:pointer; color:var(--mute); }
.row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
#status { color:var(--mute); font-size:13px; }
.layout { display:flex; align-items:flex-start; }
nav { display:flex; flex-direction:column; gap:4px; padding:16px; width:220px; position:sticky; top:0; }
nav button { text-align:left; padding:8px 10px; cursor:pointer; }
nav button.active { background:var(--nick); font-weight:600; }
.layout main { flex:1; min-width:0; margin:0; max-width:none; }
hr { border:0; border-top:3px dashed var(--mute); margin:8px 0; }
@media (max-width:700px) { .layout { flex-direction:column; } nav { flex-direction:row; flex-wrap:wrap; width:100%; position:static; } }
input[type=number] { -moz-appearance:textfield; appearance:textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.grip { cursor:grab; color:var(--mute); user-select:none; }
tr.drop-target td { border-top:2px solid var(--ok); }
.tl { border-left:3px solid var(--line); margin-left:8px; padding-left:16px; display:grid; gap:12px; }
.tl-item { position:relative; }
.tl-item::before { content:""; position:absolute; left:-24px; top:6px; width:11px; height:11px; border-radius:50%; background:var(--ok); }
.tl-date { color:var(--mute); text-transform:capitalize; margin-bottom:4px; }
.tl-card { border:1px solid var(--line); border-radius:8px; padding:8px 12px; }
.tl-title { display:flex; justify-content:space-between; margin-bottom:6px; }
.tl-p { display:grid; grid-template-columns:110px 1fr 170px; gap:10px; align-items:center; padding:2px 0; }
.who { font-size:12px; padding:1px 6px; border-radius:4px; width:fit-content; }
.who.nick, .tl-bar i.nick { background:var(--nick); } .who.stam, .tl-bar i.stam { background:var(--stam); }
.tl-bar { background:var(--bg); border-radius:4px; height:10px; overflow:hidden; } .tl-bar i { display:block; height:100%; }
.tl-nums { text-align:right; white-space:nowrap; }
@media (max-width:700px) { .tl-p { grid-template-columns:90px 1fr; } .tl-nums { grid-column:1/-1; text-align:left; } }
tr[data-row]:hover td, tr[data-row]:focus-within td { background:color-mix(in srgb, var(--ok) 14%, transparent); }
tr[data-row]:hover td:first-child, tr[data-row]:focus-within td:first-child { box-shadow:inset 3px 0 0 var(--ok); }
.dot { display:inline-block; width:14px; height:14px; border-radius:50%; cursor:pointer; vertical-align:middle; margin:0 6px; }
.dot.red { background:#e53935; } .dot.green { background:#43a047; } .dot.blue { background:#1e88e5; }
/* Row highlight for every table (income, invest/savings, trips, orders, shopping) */
tr:has(td):hover td { background:color-mix(in srgb, var(--ok) 14%, transparent); }
tr:has(td):hover td:first-child { box-shadow:inset 3px 0 0 var(--ok); }
tr:has(td):focus-within td { background:color-mix(in srgb, var(--ok) 14%, transparent); }