/* Фінанси — світ «Аркуш × Base»: білі аркуші на сірому полотні, один електрично-синій акцент,
   квадрат як одиниця виміру (рік — колони квадратів, бюджет — 20 клітинок = план).
   Один гротеск (Wix Madefor Display) для всього; моно — лише для підписів даних. */
:root{
  --canvas:#EDEDED; --sheet:#FFFFFF; --sheet-2:#F5F5F6; --field:#F2F2F3;
  --ink:#0A0B0D; --ink-2:#4A4E55; --ink-3:#6C717A;
  --line:#E6E6E8; --line-2:#D5D6DA; --cell:#ECEDF0;
  --blue:#1A1AFF; --blue-2:#3B5BFF; --blue-soft:#ECEEFF; --on-blue:#FFFFFF;
  --neg:#D42A2E; --pos:#127A43;
  --shadow:0 1px 2px rgba(10,11,13,.05);
  --shadow-lg:0 18px 48px rgba(10,11,13,.18);
  --r:16px; --r-sm:10px;
  --font:"Wix Madefor Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pix-a:#1A1AFF; --pix-b:#3B5BFF; --pix-c:#86A9FF; --pix-in:rgba(255,255,255,.96); --pix-out:rgba(10,11,13,.55);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#08090B; --sheet:#141619; --sheet-2:#1A1D21; --field:#1E2126;
    --ink:#F1F2F4; --ink-2:#A9AEB6; --ink-3:#8A9099;
    --line:#24272C; --line-2:#33373E; --cell:#24272D;
    --blue:#6676FF; --blue-2:#4D5CFF; --blue-soft:#1A1E3F; --on-blue:#FFFFFF;
    --neg:#FF6467; --pos:#3DD68C;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 22px 56px rgba(0,0,0,.6);
    --pix-a:#1414C8; --pix-b:#2A3FE0; --pix-c:#4F6FE8; --pix-out:rgba(8,9,11,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#08090B; --sheet:#141619; --sheet-2:#1A1D21; --field:#1E2126;
  --ink:#F1F2F4; --ink-2:#A9AEB6; --ink-3:#8A9099;
  --line:#24272C; --line-2:#33373E; --cell:#24272D;
  --blue:#6676FF; --blue-2:#4D5CFF; --blue-soft:#1A1E3F; --on-blue:#FFFFFF;
  --neg:#FF6467; --pos:#3DD68C;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 22px 56px rgba(0,0,0,.6);
  --pix-a:#1414C8; --pix-b:#2A3FE0; --pix-c:#4F6FE8; --pix-out:rgba(8,9,11,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--canvas);color:var(--ink);font:400 14px/1.45 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
input,select{font:inherit;color:var(--ink)}
::selection{background:var(--blue);color:var(--on-blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* кнопки-пігулки в смугах із прокруткою (вкладки, перемикачі): кільце фокуса всередині — інакше контейнер його обрізає */
.tab:focus-visible,.seg button:focus-visible,.mpill button:focus-visible{outline-offset:-2px}
input{caret-color:var(--blue)}
html{scrollbar-color:var(--line-2) transparent}
a{color:var(--blue);text-underline-offset:3px}
.mono{font:500 11px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.num{white-space:nowrap;text-align:right}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.neg{color:var(--neg)} .pos{color:var(--pos)}
.err{color:var(--neg);min-height:1.2em;margin:0}

/* ── до входу ── */
.screen{min-height:100vh;display:grid;place-items:center;padding:16px}
.card{background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow)}
.login-card,.gate-card{width:min(400px,100%);padding:36px 32px 28px;display:grid;gap:14px}
.login-card .mark{width:40px;height:40px;gap:4px;margin:0 auto 6px}
.login-card h1,.gate-card h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em;text-align:center}
.login-card p,.gate-card p{margin:0;text-align:center;color:var(--ink-2)}
.gate-card p{text-align:left}
label{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
input[type=email],input[type=password],input[type=search],input[type=text],select{
  height:42px;padding:0 14px;border:1px solid transparent;border-radius:var(--r-sm);background:var(--field);min-width:0;transition:border-color .15s,background .15s}
select{padding-right:34px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px;background-repeat:no-repeat}
input:focus,select:focus{outline:none;border-color:var(--blue);background-color:var(--sheet)}
input::placeholder{color:var(--ink-3)}
select:disabled{opacity:.5}
.spinner{display:grid;grid-template-columns:repeat(2,12px);gap:4px}
.spinner i{width:12px;height:12px;border-radius:3px;background:var(--blue);animation:blink 1.1s infinite ease-in-out}
.spinner i:nth-child(2){animation-delay:.15s}.spinner i:nth-child(3){animation-delay:.45s}.spinner i:nth-child(4){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

.btn{height:40px;padding:0 16px;border-radius:var(--r-sm);border:0;background:var(--field);cursor:pointer;font-weight:600}
.btn:hover{background:var(--line)}
.btn.primary{background:var(--ink);color:var(--sheet)}
.btn.primary:hover{opacity:.88}
.btn.blue{background:var(--blue);color:var(--on-blue)}
.btn.ghost{background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--field)}
.btn:disabled{opacity:.45;cursor:default}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{background:var(--sheet);color:var(--ink)}
.icon-btn svg,.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* знак: 2×2 квадрати, як піксель із графіків */
.mark{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:2px;width:18px;height:18px;flex:none}
.mark b{border-radius:22%;background:var(--blue)}
.mark b:nth-child(2){opacity:.42}.mark b:nth-child(3){opacity:.7}

/* ── шапка ── */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 32px;background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-name{font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.1}
.brand-sub{display:block;font:500 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.tabs{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--ink-2);font-weight:500;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--sheet);color:var(--ink);box-shadow:var(--shadow)}
.tools{display:flex;align-items:center;gap:6px}
.seg{display:inline-flex;background:var(--line);border-radius:12px;padding:3px}
.seg button{border:0;background:transparent;padding:0 12px;height:32px;border-radius:9px;cursor:pointer;color:var(--ink-2);font-weight:600}
.seg button.on{background:var(--sheet);color:var(--ink);box-shadow:var(--shadow)}

main{max-width:1360px;margin:0 auto;padding:8px 32px 40px}

/* ── спільне ── */
.sheet,.panel{background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow)}
.sheet{padding:22px 24px}
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.sh h2,.bar-head h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em}
.sh span{color:var(--ink-3);font-size:13px}
.bar-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 20px}
.bar-head h2{font-size:28px;letter-spacing:-.03em}
.spacer{flex:1}
.empty{padding:28px;text-align:center;color:var(--ink-2);margin:0}

/* мітка: квадрат кольору мітки */
.chip{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border-radius:7px;background:var(--sheet-2);font-size:12.5px;font-weight:500;white-space:nowrap;max-width:100%}
.dot{width:8px;height:8px;border-radius:2px;flex:none;background:var(--c,#888)}
.chip.none{color:var(--ink-3);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}

/* ── огляд ── */
.ov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 360px;gap:20px}
.sheet.hero{grid-column:1 / 3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);padding:0;overflow:hidden;min-height:340px}
.hero-l{padding:22px 28px 26px;display:flex;flex-direction:column}
.mnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mpill{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 4px;border-radius:12px;background:var(--ink);color:var(--sheet)}
.mpill span{padding:0 6px;font-weight:600;white-space:nowrap}
.mpill button{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.mpill button:hover{background:color-mix(in srgb,var(--sheet) 16%,transparent)}
.mpill button:disabled{opacity:.3;cursor:default}
.mpill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.link{border:0;background:none;color:var(--blue);font-weight:600;cursor:pointer;padding:6px 8px;border-radius:8px}
.link:hover{background:var(--blue-soft)}
.hero h1{margin:34px 0 0;font-size:clamp(48px,5.8vw,84px);white-space:nowrap;line-height:.95;font-weight:500;letter-spacing:-.045em}
.net{margin-top:16px;font-size:42px;line-height:1;font-weight:600;letter-spacing:-.035em;color:var(--blue)}
.net.neg{color:var(--neg)}
.sub{margin:12px 0 0;max-width:46ch;color:var(--ink-2);font-size:15px}
.sub b{color:var(--ink);font-weight:600}
.pix{position:relative;padding:22px 24px 16px;background:linear-gradient(180deg,var(--pix-a) 0%,var(--pix-b) 55%,var(--pix-c) 100%);color:#fff;display:flex;flex-direction:column}
.pix::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.2) 0 1.3px,transparent 1.5px);background-size:12px 12px;-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 75%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 75%,transparent);pointer-events:none}
.pix .mono{position:relative;color:rgba(255,255,255,.82)}
.pcols{position:relative;flex:1;display:flex;align-items:flex-end;gap:6px;margin-top:14px;min-height:170px}
.pcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.stack{display:flex;gap:3px;align-items:flex-end}
.stack span{display:flex;flex-direction:column-reverse;gap:2px}
.stack i{width:8px;height:8px;border-radius:2px;background:var(--pix-in);animation:rise .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k,0) * 18ms)}
.stack .e i{background:var(--pix-out)}
.pcol em{font:500 10px var(--mono);font-style:normal;color:rgba(255,255,255,.78);letter-spacing:.04em}
.pcol.now em{color:#fff;font-weight:600}
.pcol.now .stack{outline:1.5px solid rgba(255,255,255,.9);outline-offset:4px;border-radius:3px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.legend{position:relative;display:flex;gap:16px;margin-top:12px;font-size:12px;color:rgba(255,255,255,.88)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:var(--pix-in)}
.legend i.le{background:var(--pix-out)}

.kpis{grid-column:3;display:grid;grid-template-rows:repeat(3,1fr);gap:20px}
.kpi{padding:16px 20px;display:flex;flex-direction:column;justify-content:center}
.kpi .v{font-size:28px;line-height:1.1;font-weight:600;letter-spacing:-.025em;margin-top:7px;white-space:nowrap}
.kpi .v .of{color:var(--ink-3);font-weight:400}
.kpi .s{font-size:13px;color:var(--ink-3);margin-top:3px}
.kpi .s a{font-weight:600;text-decoration:none}
.kpi .s a svg{width:14px;height:14px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.budgets{grid-column:1 / 3}
.brow{display:grid;grid-template-columns:minmax(120px,150px) minmax(0,1fr) 130px 128px;gap:16px;align-items:center;min-height:34px}
.mwrap{display:flex;align-items:center;gap:8px;min-width:0}
.mwrap .meter{flex:1;min-width:0}
.xcap{font:600 11px/1 var(--mono);color:var(--neg);white-space:nowrap}
.xcap.g{color:var(--pos)}
.meter{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.meter i{height:12px;border-radius:2px;background:var(--cell)}
.meter i.f{background:var(--blue)}
.meter i.o{background:var(--neg)}
.meter i.g{background:var(--pos)}
.meter i.plan{box-shadow:inset 0 0 0 1.5px var(--ink)}
.brow .n{text-align:right;font-weight:600;white-space:nowrap}
.brow .n small{color:var(--ink-3);font-weight:400;font-size:12.5px}
.brow .l{text-align:right;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.brow .l.o{color:var(--neg);font-weight:600}
.outside{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.outside .mono{margin-right:4px}
.ob{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.ob b{font-weight:600}

.accs{grid-column:3;align-self:start}
.pix-sheet{display:none}
.arow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:52px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px}
.arow:hover .nm{color:var(--blue)}
.ic{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);display:grid;place-items:center;font-weight:600;font-size:12px;color:var(--blue)}
.nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm small,.b small{display:block;font-weight:400;color:var(--ink-3);font-size:12px}
.nm small{white-space:normal;line-height:1.6}
.b{text-align:right;font-weight:600;white-space:nowrap}
.tot{display:flex;justify-content:space-between;padding-top:14px;font-weight:600}
.tot small{color:var(--ink-3);font-weight:400}

/* ── курси в шапці ── */
.rates{font:500 12px/1 var(--mono);color:var(--ink-2);white-space:nowrap;padding:0 8px;cursor:default}
.rates span{color:var(--ink-3);margin:0 2px}

/* ── бюджети ── */
.bar-head .mpill{margin-left:4px}
.alloc{margin-bottom:0}
.alloc .cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.alloc .cells>div{padding:0 20px;border-left:1px solid var(--line);min-width:0}
.alloc .cells>div:first-child{padding-left:0;border-left:0}
.alloc .v{font-size:28px;line-height:1.1;font-weight:600;letter-spacing:-.025em;margin-top:7px;white-space:nowrap}
.alloc .v.blue{color:var(--blue)}
.alloc .s{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.abar{display:grid;grid-template-columns:repeat(40,1fr);gap:3px;margin-top:22px}
.abar i{height:14px;border-radius:2px;background:var(--cell)}
.abar i.p{background:var(--blue)}
.abar i.u{background:var(--ink-2)}
.abar i.o{background:var(--neg)}
.alegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.alegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;background:var(--cell);vertical-align:-1px}
.alegend i.p{background:var(--blue)} .alegend i.u{background:var(--ink-2)} .alegend i.o{background:var(--neg)}
.sheet+.sheet{margin-top:20px}
/* в огляді аркуші стоять у сітці — відступ дає gap, а не сусідство (інакше прихований .pix-sheet зсуває «Рахунки») */
.ov .sheet+.sheet{margin-top:0}
.bl{display:grid;grid-template-columns:minmax(120px,160px) minmax(150px,1.1fr) 96px 96px 104px minmax(180px,1.4fr);gap:16px;align-items:center;min-height:54px;padding:0 10px;margin:0 -10px;border-bottom:1px solid var(--line);border-radius:10px;cursor:pointer}
.bl:last-child{border-bottom:0}
.bl:not(.head):hover{background:var(--sheet-2)}
.bl.head{min-height:30px;cursor:default}
.bl .pl b{font-weight:600}
.bl .pl small{display:block;color:var(--ink-3);font-size:12px;margin-top:1px}
.bl .num{text-align:right}
.bl.nb{grid-template-columns:minmax(120px,160px) minmax(0,1fr) 110px auto}
.bl .add{color:var(--blue);font-weight:600;justify-self:end}

/* доходи / витрати на вкладці бюджетів */
.grp-h{display:flex;align-items:baseline;gap:10px;margin:32px 0 12px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.grp-h span{font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink-3)}
.grp-h+.sheet{margin-top:0}
.sh .link{padding:4px 6px}
.accn{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.accn .ic{width:28px;height:28px;border-radius:8px;font-size:11px;flex:none}
.rrow.src{grid-template-columns:minmax(70px,auto) minmax(0,1fr) auto}
/* редактор плану */
.dr-head h3 .chip{font-size:14px;height:28px;vertical-align:2px}
.dr-t{margin-left:8px}
.amt{display:flex;gap:10px;align-items:center}
.amt input{flex:1;min-width:0;height:62px;padding:0 18px;border-radius:14px;border:1px solid transparent;background:var(--field);font-size:34px;font-weight:600;letter-spacing:-.03em}
.amt input:focus{outline:none;border-color:var(--blue);background:var(--sheet)}
.qrow{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.qchip{border:0;height:32px;padding:0 11px;border-radius:9px;background:var(--blue-soft);color:var(--blue);font-size:13px;cursor:pointer}
.qchip b{font-weight:600}
.qchip:hover{background:color-mix(in srgb,var(--blue) 18%,var(--sheet))}
.opts{display:grid;gap:6px}
.opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;border:0;border-radius:12px;padding:12px 14px;background:var(--sheet-2);cursor:pointer}
.opt b{display:block;font-weight:600}
.opt small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.opt .rd{width:18px;height:18px;border-radius:5px;flex:none;margin-top:1px;box-shadow:inset 0 0 0 2px var(--line-2);background:var(--sheet)}
.opt.on{background:var(--blue-soft)}
.opt.on .rd{box-shadow:inset 0 0 0 5px var(--blue)}
.rng{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.bprev{margin:12px 0 6px;color:var(--ink-2);font-size:13.5px;min-height:1.4em}
.hist{display:grid;gap:2px}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 4px 12px;border-radius:10px;font-size:13.5px}
.hrow b{font-weight:600}
.hrow.act{background:var(--sheet-2)}
.dr-foot .spacer{flex:1}

/* ── рахунки ── */
.tag-ok{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--blue);background:var(--blue-soft);border-radius:5px;padding:3px 5px;white-space:nowrap}
.rateline{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.rateline b{color:var(--ink);font-weight:600}
.ar{display:grid;grid-template-columns:34px minmax(0,1fr) auto minmax(110px,auto) 16px;gap:12px;align-items:center;min-height:60px;padding:0 10px;margin:0 -10px;border-bottom:1px solid var(--line);border-radius:10px;cursor:pointer}
.ar:last-child{border-bottom:0}
.ar:hover{background:var(--sheet-2)}
.ar .st{justify-self:end}
.ar .go{color:var(--ink-3);display:grid}
.ar .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* картка рахунку */
.dr-head .ic{flex:none}
.recon{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
.recon input{width:100%}
.bbars{display:flex;align-items:stretch;gap:4px;height:120px;padding:4px 0}
.bb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.bb .up,.bb .dn{flex:1;width:100%;display:flex;justify-content:center}
.bb .up{align-items:flex-end}
.bb .dn{align-items:flex-start;border-top:1px solid var(--line-2)}
.bb i{width:min(16px,70%);border-radius:3px 3px 0 0;background:var(--blue);min-height:0}
.bb .dn i{border-radius:0 0 3px 3px;background:var(--ink-3)}
.bbars:not(.neg-axis) .bb .up{border-bottom:1px solid var(--line-2)}
.bb em{font:500 9.5px var(--mono);font-style:normal;color:var(--ink-3)}
.rec{display:grid;gap:2px;margin-bottom:8px}
.rrow{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;border:0;background:transparent;padding:8px 8px;border-radius:9px;cursor:pointer;font-size:13.5px}
.rrow:hover{background:var(--sheet-2)}
.rrow .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow>span:last-child{font-weight:600;white-space:nowrap}

/* форма рахунку */
.form{display:grid;gap:12px;align-content:start}
.form input[type=text],.form select{width:100%}
.two-f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--blue)}

/* ── таблиці ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:14px 14px 10px;border-bottom:1px solid var(--line);background:var(--sheet);position:sticky;top:var(--top-h,66px);z-index:1}
.tbl thead tr th:first-child{border-top-left-radius:var(--r)} .tbl thead tr th:last-child{border-top-right-radius:var(--r)}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl th.num{text-align:right}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:var(--sheet-2)}
.tbl tfoot td{font-weight:600;border-top:1px solid var(--line-2);border-bottom:0}
.tbl td.c-desc{width:100%;max-width:0}
.tbl td.c-acc,.tbl td.c-date,.tbl td.c-lab{white-space:nowrap}
.tbl td.c-date{color:var(--ink-2)}
.tbl td.c-amt{font-weight:600}
.desc .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.desc .c{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-sys{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);background:var(--field);border-radius:5px;padding:3px 5px;margin-left:6px;vertical-align:1px}

.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters input[type=search]{flex:1;min-width:200px;background-color:var(--sheet)}
.filters select{background-color:var(--sheet)}
.summary{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2);margin:0 0 12px}
.summary b{color:var(--ink);font-weight:600}
.more{display:flex;justify-content:center;padding:16px}

/* ── шухляда ── */
#scrim{position:fixed;inset:0;background:rgba(8,9,11,.38);z-index:40;animation:fade .2s ease-out}
#drawer{position:fixed;top:12px;right:12px;bottom:12px;width:min(440px,calc(100% - 24px));background:var(--sheet);border-radius:20px;box-shadow:var(--shadow-lg);z-index:41;display:flex;flex-direction:column;animation:slide .32s cubic-bezier(.16,1,.3,1)}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(24px);opacity:0}}
.dr-head{display:flex;align-items:flex-start;gap:10px;padding:20px 22px 8px}
.dr-head h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em;flex:1;min-width:0;overflow-wrap:anywhere}
.dr-body{flex:1;overflow:auto;padding:8px 22px 20px}
.dr-amount{font-size:38px;line-height:1.1;font-weight:600;letter-spacing:-.035em}
.dr-sub{color:var(--ink-3);margin-top:4px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:10px 14px;margin:20px 0;font-size:13.5px;padding:16px;border-radius:14px;background:var(--sheet-2)}
.kv dt{color:var(--ink-3)} .kv dd{margin:0;overflow-wrap:anywhere;font-weight:500}
.dr-sec{margin:4px 0 10px}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pick button{cursor:pointer;border:0;height:30px;padding:0 11px;font:inherit;font-size:13px;font-weight:500}
.pick button:hover{background:var(--line)}
.pick button.on{background:var(--blue);color:var(--on-blue)}
.pick button.on .dot{box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.dr-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px 18px;border-top:1px solid var(--line)}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);opacity:0;background:var(--ink);color:var(--sheet);padding:11px 16px;border-radius:12px;font-size:13.5px;font-weight:500;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1);z-index:60}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── вужчі екрани ── */
@media (max-width:1100px){
  .ov{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero,.budgets{grid-column:1 / -1}
  .kpis{grid-column:1 / -1;grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
  .accs{grid-column:1 / -1}
}
@media (max-width:760px){
  .top{flex-wrap:wrap;padding:10px 16px;gap:8px 12px}
  .tabs{order:3;flex-basis:100%}
  .tools{margin-left:auto}
  .brand-sub{display:none}
  main{padding:4px 16px 32px}
  .ov{gap:12px}
  .sheet.hero{grid-template-columns:1fr;min-height:0}
  .hero-l{padding:18px 20px 22px}
  .hero h1{margin-top:18px}
  .net{font-size:36px}
  .pix{padding:18px 16px 14px}
  .pcols{min-height:150px;gap:3px}
  .stack i{width:6px;height:6px}
  .stack{gap:2px}
  .hero .pix{display:none}
  .pix-sheet{display:block;grid-column:1 / -1;padding:0;overflow:hidden}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--sheet);border-radius:var(--r);box-shadow:var(--shadow)}
  .kpi{background:none;box-shadow:none;border-radius:0;padding:14px 12px;justify-content:flex-start}
  .kpi+.kpi{border-left:1px solid var(--line)}
  .kpi .v{font-size:19px;white-space:normal}
  .kpi .v .of{display:block;font-size:13px;margin-top:3px}
  .kpi .v .of .sl{display:none}
  .kpi .v .of::before{content:"з "}
  .kpi .s{font-size:12px}
  .sheet{padding:18px 18px}
  .brow{grid-template-columns:1fr auto;gap:6px 12px;padding:6px 0}
  .brow .mwrap{grid-column:1 / -1;grid-row:2}
  .brow .l{grid-column:1 / -1;text-align:left;grid-row:3}
  .rates{display:none}
  .alloc .cells{grid-template-columns:1fr 1fr;row-gap:16px}
  .alloc .cells>div{padding:0 0 0 14px}
  .alloc .cells>div:nth-child(odd){padding-left:0;border-left:0}
  .alloc .v{font-size:22px}
  .bl{grid-template-columns:1fr auto;gap:6px 12px;padding:12px 8px;margin:0 -8px}
  .bl.head{display:none}
  .bl>:nth-child(2){text-align:right}
  .bl .mwrap{grid-column:1 / -1;grid-row:2}
  .bl>.num{grid-row:3;text-align:left;font-size:12.5px}
  .bl>.num:nth-child(3)::before{content:"факт "}
  .bl>.num:nth-child(4){display:none}
  .bl>.num:nth-child(5){text-align:right}
  .bl>.num:nth-child(5)::before{content:"сер. 12 міс "}
  .bl.nb{grid-template-columns:1fr auto}
  .bl.nb>:nth-child(2){grid-row:2;text-align:left}
  .bl.nb>.num{grid-row:2}
  .bl.nb>.num::before{content:none}
  .bl.nb .add{grid-row:1;grid-column:2}
  .ar{grid-template-columns:34px minmax(0,1fr) auto;gap:4px 12px;padding:10px 8px;margin:0 -8px}
  .ar .st{grid-column:2;grid-row:2;justify-self:start}
  .ar .b{grid-column:3;grid-row:1 / span 2}
  .ar .go{display:none}
  .recon,.two-f{grid-template-columns:1fr}
  .grp-h{margin:24px 0 10px;font-size:19px}
  .tbl th{position:static}
  .tbl.rows thead{display:none}
  .tbl.rows,.tbl.rows tbody,.tbl.rows tr,.tbl.rows td{display:block;width:100%}
  .tbl.rows tbody tr{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl.rows td{padding:0;border:0}
  .tbl.rows td.c-date{grid-column:1;font-size:12px}
  .tbl.rows td.c-amt{grid-column:2;align-self:center}
  .tbl.rows td.c-desc{grid-column:1;width:auto;max-width:none;min-width:0}
  .tbl.rows td.c-acc{display:none}
  .tbl.rows td.c-amt{grid-row:1}
  .tbl.rows td.c-eur{grid-column:2;grid-row:2;text-align:right;font-size:12px}
  .filters{display:grid;grid-template-columns:1fr 1fr}
  .filters input[type=search],#freset{grid-column:1 / -1}
  .filters select{min-width:0;width:100%}
  .tbl.rows td.c-lab{grid-column:1 / -1;white-space:normal}
  .tbl.rows tfoot{display:none}
  .panel{overflow-x:auto}
  .kv{grid-template-columns:96px 1fr}
  #drawer{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:88vh;border-radius:20px;animation-name:sheetup}
  @keyframes sheetup{from{transform:translateY(24px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}