/* Макет: одна вузька колонка. Month switcher, three-figure summary band, entry form, spending by category, six-month bars, month list. */
:root{
  --bg:#F2F4F8; --surface:#FFFFFF; --ink:#141C2B; --ink2:#46536A; --muted:#6B788E;
  --line:#DCE1EA; --soft:#E9EDF4; --income:#2E6DB4; --expense:#D2761F;
  --focus:#2E6DB4; --danger:#B3261E; --btn-bg:#141C2B; --btn-fg:#FFFFFF;
  color-scheme:light;
  --font-ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-num:ui-monospace,'SF Mono',Menlo,'Roboto Mono',Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E131B; --surface:#161D28; --ink:#E8EDF5; --ink2:#AAB5C7; --muted:#8793A7;
    --line:#263041; --soft:#1F2837; --income:#4F8FD8; --expense:#D27C28;
    --focus:#6FA8EA; --danger:#F2877F; --btn-bg:#E8EDF5; --btn-fg:#0E131B; color-scheme:dark;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.45}
button,input,select{font:inherit;color:inherit;touch-action:manipulation}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:880px;margin:0 auto;padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:18px}
h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
h2{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.months{display:flex;align-items:center;gap:6px}
.months #mlabel{min-width:132px;text-align:center;font-weight:600}
.nav{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:20px;line-height:1}
.ghost{background:none;border:0;color:var(--ink2);padding:6px 8px;border-radius:8px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.ghost:hover{color:var(--ink)}

.band{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.fig{padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fig+.fig{border-left:1px solid var(--line)}
.fig .k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fig b{font-family:var(--font-num);font-weight:500;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fig small{color:var(--ink2);font-size:13px;min-height:1.4em}
.fig:first-child{padding-left:0}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.panel>h2{margin-bottom:14px}

form{display:flex;flex-direction:column;gap:12px}
.row2{display:flex;flex-wrap:wrap;gap:12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.grow{flex:1 1 160px}
.field>label,.field>.lbl{font-size:13px;color:var(--ink2);font-weight:500}
input[type=text],input[type=date],select{width:100%;min-height:42px;padding:8px 11px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:16px}
input.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.seg{position:relative;display:inline-flex;padding:3px;border-radius:11px;background:var(--soft);gap:2px}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;white-space:nowrap}
.seg input:checked+label{background:var(--btn-bg);color:var(--btn-fg)}
.seg input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
.hint{font-size:13px;color:var(--ink2);min-height:1.3em;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.err{margin:0;color:var(--danger);font-size:14px;min-height:0}
.err:empty{display:none}
.actions{display:flex;align-items:center;gap:10px}
.primary{background:var(--btn-bg);color:var(--btn-fg);border:0;border-radius:10px;min-height:42px;padding:0 22px;font-weight:600}
.primary:disabled{opacity:.5;cursor:default}
.danger{color:var(--danger)}

.cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cat .ct{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:5px}
.cat .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.track{height:8px;border-radius:4px;background:var(--soft)}
.track i{display:block;height:100%;border-radius:4px;background:var(--expense);min-width:2px}

.legend{display:flex;gap:16px;font-size:13px;color:var(--ink2);margin:-4px 0 12px}
.legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.sw.inc,.bar.inc{background:var(--income)}
.sw.exp,.bar.exp{background:var(--expense)}
.plot{position:relative;height:190px;margin-left:44px}
.gl{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.gl span{position:absolute;left:-44px;top:-8px;width:38px;text-align:right;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cols{position:absolute;inset:0;display:flex;gap:2px}
.col{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;background:none;border:0;border-radius:6px;padding:0}
.col.sel{background:var(--soft)}
.col:hover{background:var(--soft)}
.bar{width:min(18px,34%);border-radius:4px 4px 0 0}
.labels{display:flex;gap:2px;margin:6px 0 0 44px}
.labels span{flex:1;text-align:center;font-size:12px;color:var(--muted)}
.labels span.sel{color:var(--ink);font-weight:600}

.listhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.listhead h2{margin:0}
.seg.small label{min-height:30px;padding:0 11px;font-size:13px}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:52px 1fr auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .d{font-size:13px;color:var(--muted);padding-top:2px;font-variant-numeric:tabular-nums}
.row .m{min-width:0}
.row .m b{font-weight:600}
.row .note{display:block;color:var(--ink2);font-size:14px;overflow-wrap:anywhere}
.row .a{text-align:right}
.row .uah{display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.row .orig{display:block;font-family:var(--font-num);font-size:12px;color:var(--muted);white-space:nowrap}
.row .acts{grid-column:2 / 4;display:flex;gap:2px;margin-left:-8px}
.row .acts .ghost{font-size:13px;color:var(--muted);padding:3px 8px}
.empty{padding:22px 0 8px;color:var(--ink2);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.empty b{color:var(--ink)}
.empty .ghost{padding-left:0}
.note-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 14px;border-radius:10px;background:var(--soft);color:var(--ink2);font-size:14px}
.note-bar:empty{display:none}
.foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}
.outline{background:var(--surface);border:1px solid var(--line);border-radius:10px;min-height:38px;padding:0 14px;font-weight:500}
#tip{position:fixed;z-index:20;pointer-events:none;background:var(--btn-bg);color:var(--btn-fg);padding:7px 10px;border-radius:8px;font-size:13px;white-space:pre-line;max-width:260px;font-variant-numeric:tabular-nums}

@media (max-width:620px){
  .band{grid-template-columns:1fr}
  .fig,.fig:first-child{padding:12px 0;display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px}
  .fig+.fig{border-left:0;border-top:1px solid var(--line)}
  .fig small{grid-column:1 / 3}
  .fig b{font-size:22px}
  .plot,.labels{margin-left:38px}
  .gl span{left:-38px;width:32px}
}
@media (prefers-reduced-motion:no-preference){
  .track i,.bar{transition:height .25s ease,width .25s ease}
}

.foot-actions{display:flex;flex-wrap:wrap;gap:8px}
.foot{flex-direction:column;align-items:flex-start}
.hidden-input{position:absolute;width:0;height:0;opacity:0}