:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#15181d; --dim:#6b7280; --line:#e4e7ec;
  --brand:#0f4c81; --brand-2:#1668ae;
  --a:#0f4c81; --b:#17876d; --c:#b4791f; --d:#6d4aa8;
  --neg:#c0392b; --pos:#17876d;
  --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em; font-weight:650; letter-spacing:-.01em}
b{font-weight:650}

/* ─── шапка ─── */
.top{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 24px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.mark{
  display:grid; place-items:center; width:30px; height:30px; border-radius:7px;
  background:var(--brand); color:#fff; font-weight:700; font-size:13px; letter-spacing:.02em;
}
.brand-text{font-size:15px}
.crumbs{flex:1; color:var(--dim); font-size:14px}
.crumbs .sep{margin:0 7px; color:#c4c9d2}
.crumbs .here{color:var(--ink); font-weight:600}
.top-right{display:flex; align-items:center; gap:14px; font-size:14px}
.horizon{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.horizon a{padding:4px 11px; color:var(--dim); font-size:13px}
.horizon a:hover{background:#f1f3f6; text-decoration:none}
.horizon a.on{background:var(--brand); color:#fff}
.who{color:var(--dim)}
.out{color:var(--dim); font-size:13px}

.wrap{max-width:1240px; margin:0 auto; padding:26px 24px 50px}
.page-title{font-size:26px; margin-bottom:6px}
.lede{color:var(--dim); margin:0 0 20px; max-width:80ch}
.hint{color:var(--dim); font-size:13px; margin:10px 0 0}
.foot-note{color:var(--dim); font-size:13px; margin-top:26px}
.section-head{font-size:19px; margin:32px 0 4px}

/* ─── показатели ─── */
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-bottom:22px}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow)}
.kpi-label{color:var(--dim); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em}
.kpi-value{font-size:27px; font-weight:650; margin:5px 0 3px; font-variant-numeric:tabular-nums}
.kpi-value i{font-size:13px; font-style:normal; color:var(--dim); font-weight:400; margin-left:6px}
.kpi-value.neg{color:var(--neg)}
.kpi-note{color:var(--dim); font-size:12.5px}

/* ─── панели ─── */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:18px; box-shadow:var(--shadow)}
.panel h2{font-size:16px; margin-bottom:14px}
.big-fig{font-size:26px; font-weight:650; margin:0; font-variant-numeric:tabular-nums}
.big-fig i{font-size:13px; font-style:normal; color:var(--dim); font-weight:400}
.notice{background:#fff8e6; border:1px solid #f0dca8; color:#7a5a12; border-radius:var(--radius); padding:11px 14px; font-size:13.5px; max-width:52ch}
.city-head{display:flex; gap:20px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap}

/* ─── плитки городов ─── */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:14px; margin-top:14px}
.tile{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; color:var(--ink); box-shadow:var(--shadow); transition:border-color .12s, transform .12s}
.tile:hover{text-decoration:none; border-color:var(--brand-2); transform:translateY(-1px)}
.tile.pending{background:#fcfcfd}
.tile-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.tile-head h3{font-size:16px; margin:0}
.badge{font-size:11px; padding:2px 7px; border-radius:20px; background:#eef1f5; color:var(--dim); white-space:nowrap}
.badge.ok{background:#e4f3ee; color:var(--pos)}
.tile-bar{height:4px; background:#eef1f5; border-radius:3px; margin:10px 0 12px; overflow:hidden}
.tile-bar span{display:block; height:100%; background:var(--brand); border-radius:3px}
.tile-figs{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:0}
.tile-figs div{margin:0}
.tile-figs dt{color:var(--dim); font-size:11.5px}
.tile-figs dd{margin:1px 0 0; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums}
.tile-figs dd.neg{color:var(--neg)}
.tile-foot{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); color:var(--dim); font-size:12px}
.tile-foot .pos{color:var(--pos)}
.tile-foot .neg{color:var(--neg)}

/* ─── вкладки ─── */
.tabs{display:flex; gap:2px; margin:6px 0 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tab{border:0; background:none; padding:9px 15px; font:inherit; font-size:14px; color:var(--dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--brand); border-bottom-color:var(--brand); font-weight:600}
.tabpane{display:none}
.tabpane.on{display:block}

/* ─── таблицы ─── */
.tablewrap{overflow-x:auto; margin:0 -4px}
table.fin{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:14px}
table.fin th,table.fin td{padding:7px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line)}
table.fin th{color:var(--dim); font-weight:500; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid #d6dae1}
table.fin th.lbl,table.fin td.lbl{text-align:left; white-space:normal; min-width:230px}
table.fin td.neg{color:var(--neg)}
table.fin td.tot,table.fin th.tot{font-weight:650; background:#fafbfc}
table.fin tr.lvl0 td{font-weight:650; background:#f4f6f8; border-top:1px solid #d6dae1}
table.fin tr.lvl2 td.lbl{padding-left:26px; color:var(--dim); font-size:13px}
table.fin tr.lvl2 td{color:#4b5563; font-size:13px}
table.fin tr.memo td{color:var(--dim); font-style:italic}
table.fin.compact th,table.fin.compact td{padding:5px 9px; font-size:13px}
details.drill{margin-top:12px; border-top:1px solid var(--line); padding-top:8px}
details.drill summary{cursor:pointer; color:var(--brand-2); font-size:13.5px; padding:4px 0}

/* ─── полосы расходов ─── */
.bars{display:flex; flex-direction:column; gap:7px}
.bar-row{display:grid; grid-template-columns:minmax(180px,250px) 1fr 84px 60px; gap:10px; align-items:center; font-size:13.5px}
.bar-lab{color:#374151}
.bar-track{background:#eef1f5; border-radius:4px; height:16px; overflow:hidden}
.bar-track i{display:block; height:100%; background:var(--a); border-radius:4px}
.bar-val,.bar-pct{text-align:right; font-variant-numeric:tabular-nums}
.bar-pct{color:var(--dim)}

/* ─── финансирование ─── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.split-bar{display:flex; height:22px; border-radius:6px; overflow:hidden; background:#eef1f5}
.split-bar .epc{background:var(--a)}
.split-bar .eq{background:var(--c)}
.legend{list-style:none; padding:0; margin:12px 0 0; font-size:13.5px; color:#374151}
.legend li{display:flex; align-items:center; gap:8px; margin:5px 0}
.legend i{width:11px; height:11px; border-radius:3px; display:inline-block}
.legend i.epc{background:var(--a)}
.legend i.eq{background:var(--c)}
.facts{margin:0; display:grid; gap:10px}
.facts.wide{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.facts div{margin:0}
.facts dt{color:var(--dim); font-size:12.5px}
.facts dd{margin:2px 0 0; font-weight:600}

/* ─── месячные столбики ─── */
.months{display:flex; gap:3px; align-items:flex-end; height:120px; overflow-x:auto; padding-bottom:4px}
.months.tall{height:150px}
.m{flex:1 0 26px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; text-align:center}
.m i{display:block; background:var(--a); border-radius:3px 3px 0 0; min-height:2px; opacity:.85}
.m:hover i{opacity:1}
.m span{font-size:9.5px; color:var(--dim); margin-top:4px; line-height:1.15}
.m span b{display:block; font-weight:400; opacity:.65}

/* ─── график ─── */
.chart{width:100%; min-height:230px}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .gl{stroke:var(--line); stroke-width:1}
.chart .ax{fill:var(--dim); font-size:11px}
.chart .bar-a{fill:var(--a)} .chart .bar-b{fill:var(--b)}
.chart .bar-c{fill:var(--c)} .chart .bar-d{fill:var(--d)}
.chart-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:#374151}
.chart-legend span{display:flex; align-items:center; gap:6px}
.chart-legend i{width:10px; height:10px; border-radius:2px; display:inline-block}

/* ─── подвал ─── */
.foot{max-width:1240px; margin:0 auto; padding:16px 24px 34px; color:var(--dim); font-size:12.5px; display:flex; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line)}

/* ─── вход ─── */
.login-page{display:grid; place-items:center; min-height:100vh; background:linear-gradient(160deg,#eef2f7,#f8f9fb)}
.login-box{background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px 30px; width:min(370px,92vw); box-shadow:0 8px 28px rgba(16,24,40,.10)}
.login-mark{display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:var(--brand); color:#fff; font-weight:700; margin-bottom:16px}
.login-box h1{font-size:20px; margin-bottom:3px}
.login-sub{color:var(--dim); font-size:13.5px; margin:0 0 20px}
.login-box label{display:block; font-size:12.5px; color:var(--dim); margin:12px 0 5px}
.login-box input{width:100%; padding:10px 12px; border:1px solid #d3d8e0; border-radius:8px; font:inherit; background:#fff}
.login-box input:focus{outline:2px solid var(--brand-2); outline-offset:-1px; border-color:var(--brand-2)}
.login-box button{width:100%; margin-top:20px; padding:11px; border:0; border-radius:8px; background:var(--brand); color:#fff; font:inherit; font-weight:600; cursor:pointer}
.login-box button:hover{background:var(--brand-2)}
.alert{background:#fdecea; border:1px solid #f5c6c0; color:#a5281b; padding:9px 12px; border-radius:8px; font-size:13.5px; margin-bottom:6px}

@media (max-width:640px){
  .wrap{padding:18px 14px 40px}
  .top{padding:9px 14px; gap:10px}
  .crumbs{order:3; flex-basis:100%}
  .bar-row{grid-template-columns:1fr 70px 52px}
  .bar-track{display:none}
}