:root{
  --bg:#EFEFF4; --card:#FFFFFF; --line:#E2E2E8;
  --ink:#1C1C1E; --ink-2:#8A8A8E; --ink-3:#B9B9BE;
  --blue:#2BA7E0; --blue-soft:#4FC0F0;
  --gold:#F5B916; --gold-soft:#FFCB2E;
  --green:#2BD67B; --green-2:#17C06A;
  --orange:#FF9F0A; --red:#FF453A; --grey:#C9C9CE;
  --sheet:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000; --card:#1C1C1E; --line:#2C2C2E;
    --ink:#F2F2F7; --ink-2:#9A9AA0; --ink-3:#6A6A70; --sheet:#1C1C1E;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:400 15px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  height:100svh;overflow:hidden;              /* по вертикали не листается */
  display:flex;flex-direction:column;
  overscroll-behavior:none;touch-action:manipulation;
}
main{
  flex:1;min-height:0;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font:inherit;color:inherit}

/* ---- шапка ---- */
.top{
  position:sticky;top:0;z-index:20;background:var(--card);
  border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
}
.top-row{display:flex;align-items:center;gap:10px}
.burger{
  appearance:none;border:0;background:none;padding:6px;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;flex:0 0 auto
}
.burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink-2)}
.totals{display:flex;flex:1;justify-content:space-around;gap:4px;text-align:center;min-width:0}
.tot .k{font-size:11.5px;color:var(--ink-2);display:block;margin-bottom:2px}
.tot .v{font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tot.spend .v{color:var(--orange)}
.month{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.month button{
  appearance:none;border:0;background:none;width:30px;height:30px;border-radius:50%;
  color:var(--ink-2);cursor:pointer;font-size:15px
}
.month button:disabled{opacity:.3}
.month .m{font-size:12.5px;color:var(--ink-2);min-width:62px;text-align:center}

/* ---- секции ---- */
.band{
  background:var(--card);margin-top:8px;flex:0 0 auto;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.band.grow{flex:1 1 auto;min-height:0}
.pager{
  display:flex;overflow-x:auto;overflow-y:hidden;flex:1;min-height:0;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pager::-webkit-scrollbar{display:none}
.page{
  flex:0 0 100%;scroll-snap-align:start;display:grid;
  grid-template-columns:repeat(4,1fr);align-content:start;
  padding:8px 2px;gap:2px 0;min-width:0;
}
.dots{display:flex;justify-content:center;gap:5px;padding:2px 0 7px;min-height:13px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s}
.dot.on{background:var(--ink-3)}
.sec h2{
  font-size:12px;font-weight:500;color:var(--ink-2);text-transform:uppercase;
  letter-spacing:.04em;margin:0;padding:12px 14px 2px
}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 0;padding:6px 2px 14px}
@media (max-width:360px){ .grid{grid-template-columns:repeat(3,1fr)} }

.cell{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 2px;background:none;border:0;cursor:pointer;min-width:0;width:100%
}
.cell .nm{
  font-size:12.5px;color:var(--ink);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:center
}
.cell .amt{font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cell .bud{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;min-height:13px}
.disc{width:64px;height:64px;display:block}
.cell:active .disc{transform:scale(.94);transition:transform .08s}
.cell:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:12px}

/* ---- нижняя шторка ---- */
.sheet{
  position:fixed;inset:0;z-index:40;display:none;
  background:rgba(0,0,0,.35);backdrop-filter:blur(2px)
}
.sheet.on{display:block}
.sheet-in{
  position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow:auto;
  background:var(--sheet);border-radius:18px 18px 0 0;
  padding:10px 16px calc(env(safe-area-inset-bottom) + 22px);
  animation:up .22s cubic-bezier(.2,.8,.2,1)
}
@keyframes up{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
.grab{width:36px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 12px}
.sheet h3{margin:0 0 2px;font-size:20px;letter-spacing:-.02em}
.sheet .sub{color:var(--ink-2);font-size:13px;margin:0 0 14px}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.field label{font-size:14px;color:var(--ink-2)}
.field input{
  appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  border-radius:9px;padding:8px 10px;width:130px;text-align:right;
  font:400 15px/1 inherit;font-variant-numeric:tabular-nums
}
.field input:focus{outline:2px solid var(--blue);outline-offset:0}
.rows{list-style:none;margin:10px 0 0;padding:0}
.rows li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.rows .nm{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .dt{font-size:12px;color:var(--ink-3)}
.rows .am{font-variant-numeric:tabular-nums;font-size:14px}
.rows select{
  appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);
  border-radius:8px;padding:5px 7px;font-size:11.5px;max-width:118px
}
.btn{
  appearance:none;border:0;border-radius:11px;padding:12px;width:100%;margin-top:14px;
  background:var(--blue);color:#fff;font-size:15px;font-weight:500;cursor:pointer
}
.btn.ghost{background:var(--bg);color:var(--ink-2)}

/* ---- вход ---- */
.login{min-height:100svh;display:grid;place-items:center;padding:24px}
.login form{width:100%;max-width:320px;text-align:center}
.login h1{font-size:22px;margin:0 0 6px;letter-spacing:-.02em}
.login p{color:var(--ink-2);font-size:13.5px;margin:0 0 20px}
.login input{
  appearance:none;width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:12px;padding:14px;font-size:16px;text-align:center
}
.login input:focus{outline:2px solid var(--blue)}
.err{color:var(--red);font-size:13px;margin-top:12px;min-height:18px}

/* ---- мелочи ---- */
.sync{font-size:11.5px;color:var(--ink-3);text-align:center;padding:14px 16px 26px}
.sync b{color:var(--ink-2);font-weight:500}
.sync.stale b{color:var(--orange)}

/* ---- компактнее под фиксированный экран ---- */
.cell{padding:3px 2px;gap:2px}
.disc{width:44px;height:44px}
.cell .nm{font-size:10.5px;line-height:1.15}
.cell .amt{font-size:11px}
.cell .bud{font-size:9px;min-height:10px;line-height:1.1}
.sync{padding:2px 16px 4px;font-size:10px}
.login{height:100svh}

/* шапка тоже ужимается — она съедала высоту зря */
.top{padding:calc(env(safe-area-inset-top) + 6px) 10px 6px}
.tot .k{font-size:10px;margin-bottom:1px}
.tot .v{font-size:15px}
.month .m{font-size:11.5px;min-width:56px}
.month button{width:26px;height:26px;font-size:14px}
.burger{padding:5px}
.burger i{width:16px}
.band{margin-top:6px}
.page{padding:5px 2px;gap:1px 0}
.dots{padding:1px 0 5px;min-height:11px}
.dot{width:5px;height:5px}

/* ---- перетаскивание денег ---- */
.drag-ghost{
  position:fixed;z-index:60;pointer-events:none;
  width:52px;height:52px;margin:-26px 0 0 -26px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));
  transform:scale(1.12);transition:none;
}
.cell.is-source .disc{opacity:.35}
.cell.is-target{position:relative}
.cell.is-target .disc{
  transform:scale(1.14);
  filter:drop-shadow(0 0 0 3px var(--blue));
  transition:transform .12s
}
.cell.is-bad .disc{filter:drop-shadow(0 0 0 3px var(--red))}
body.dragging{user-select:none}
body.dragging .pager{overflow:hidden}

.hintline{
  font-size:11px;color:var(--ink-3);text-align:center;
  padding:0 16px 4px;min-height:14px
}

.sub-h{font-size:12px;font-weight:500;color:var(--ink-2);margin:16px 0 2px;letter-spacing:.01em}
.linkbtn{appearance:none;border:0;background:none;padding:0 2px;cursor:pointer;
  color:var(--blue);font:400 12px inherit;flex:0 0 auto}

/* ===================== экран истории ===================== */
body.hist{height:auto;overflow:auto;display:block}
.hbar{
  position:sticky;top:0;z-index:20;background:var(--card);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
}
.back{
  text-decoration:none;color:var(--ink-2);font-size:26px;line-height:1;
  width:26px;text-align:center;flex:0 0 auto
}
.hfilter{
  flex:1;background:var(--bg);border-radius:9px;padding:9px 12px;
  font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.cal{appearance:none;border:0;background:none;color:var(--blue);font-size:19px;cursor:pointer;flex:0 0 auto}

.hchart{background:var(--card);border-bottom:1px solid var(--line);padding:6px 0 0}
.ylab{font-size:10px;fill:var(--ink-3);font-family:inherit}
.xaxis{display:flex;overflow-x:auto;gap:2px;padding:4px 10px 8px;scrollbar-width:none}
.xaxis::-webkit-scrollbar{display:none}
.xm{
  appearance:none;border:0;background:none;cursor:pointer;white-space:nowrap;
  font-size:11.5px;color:var(--ink-3);text-transform:uppercase;padding:4px 7px;border-radius:7px
}
.xm.on{color:var(--ink);background:var(--bg);font-weight:500}

.hsum{background:var(--card);border-bottom:1px solid var(--line);padding:10px 14px 12px}
.hsum-head{display:flex;justify-content:center;gap:10px;margin-bottom:10px}
.chip{
  font-size:12.5px;color:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:6px 16px
}
.hrow{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;padding:5px 0}
.hrow .lab{font-size:15px}
.hrow.exp .lab{color:var(--red)}
.hrow.inc .lab{color:var(--green)}
.hrow .plan{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.hrow .fact{font-size:15px;font-variant-numeric:tabular-nums;min-width:96px;text-align:right}

.day{background:var(--card);margin-top:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.day h2{
  font-size:12px;font-weight:400;color:var(--ink-2);margin:0;
  padding:11px 14px;background:var(--bg);text-transform:uppercase;letter-spacing:.02em
}
.day ul{list-style:none;margin:0;padding:0}
.day li{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-top:1px solid var(--line);
}
.day li:first-child{border-top:0}
.day li.can-del{cursor:pointer}
.day li.can-del:active{background:var(--bg)}
.who{flex:1;min-width:0}
.who .f{display:block;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .t{display:block;font-size:15px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .nt{color:var(--ink-3);font-size:12.5px}
.day .amt{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.day .amt.inc{color:var(--green)}
.day .amt.exp{color:var(--red)}
.day .amt.tr{color:var(--ink)}
.pend{display:block;font-size:10.5px;color:var(--orange);font-variant-numeric:normal}
.dayfoot{
  display:flex;justify-content:flex-end;align-items:baseline;gap:8px;
  padding:9px 14px;border-top:1px solid var(--line);background:var(--bg);
  font-variant-numeric:tabular-nums;font-size:14px
}
.dayfoot .lab{color:var(--ink-3);font-size:12px}
.empty{color:var(--ink-3);text-align:center;padding:40px 20px;font-size:14px}
main#list{padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}

/* ссылка на историю с главного экрана */
.hist-link{
  appearance:none;border:0;background:none;color:var(--blue);
  font-size:12px;cursor:pointer;padding:2px 6px
}