:root{--bg:#f4f6f8;--card:#ffffff;--line:#e4e7eb;--txt:#23272e;--mut:#79828d;--inc:#2b7de9;--cli:#7b5fff;--exp:#e8833a;--ok:#1faa59;--bad:#e5484d;--field:#ffffff;--track:#eef1f4}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,sans-serif}
.layout{display:flex;min-height:100vh}
.side{width:212px;flex-shrink:0;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{font-weight:700;font-size:16px;padding:20px 22px;border-bottom:1px solid var(--line);color:var(--txt)}.brand span{color:var(--mut);font-weight:400}
.side nav{display:flex;flex-direction:column;padding:12px 10px;gap:1px;flex:1}
.side nav a{color:#525a64;text-decoration:none;font-size:14px;padding:9px 14px;border-radius:6px}
.side nav a.on{background:#eaf2fd;color:var(--inc);font-weight:600}.side nav a:hover{background:#f3f5f7;color:var(--txt)}
.side-foot{padding:14px 16px;border-top:1px solid var(--line)}
.side-foot .who{font-size:13px}.side-foot .who span{display:block;color:var(--mut);font-size:11px}
.side-foot .out{display:inline-block;margin-top:8px;color:var(--bad);text-decoration:none;font-size:12px}
main{flex:1;padding:26px 32px;max-width:1100px}
h1{font-size:20px;margin:0 0 18px;font-weight:600}h2{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin:0 0 14px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,30,50,.04)}
.kpi .big{font-size:23px;font-weight:700}.kpi .lab{color:var(--mut);font-size:12px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
a.lnk{color:var(--inc);text-decoration:none}a.lnk:hover{text-decoration:underline}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.pill.ok{background:#e4f6ec;color:var(--ok)}.pill.bad{background:#fdeaea;color:var(--bad)}
.bar{background:var(--track);border-radius:6px;height:14px;overflow:hidden;flex:1}.fill{height:100%}
.row{display:flex;align-items:center;gap:10px;margin:7px 0}.row .lbl{width:170px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row .val{width:110px;text-align:right;font-size:12.5px}
.foot{color:var(--mut);font-size:11px;text-align:center;padding:24px}
.bar2{flex:1;display:flex;flex-direction:column;gap:3px}.bar2 .fill{height:9px;border-radius:5px}.fill.inc{background:var(--inc)}.fill.exp{background:var(--exp)}
.legend{font-size:12px;color:var(--mut);margin-bottom:10px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 5px 0 12px}.dot.inc{background:var(--inc)}.dot.exp{background:var(--exp)}
.pnl{display:flex;gap:0;flex-wrap:wrap}.pnl div{flex:1;text-align:center;padding:10px;border-right:1px solid var(--line);min-width:90px}.pnl div:last-child{border:0}
.pnl .v{font-size:20px;font-weight:700}.pnl .k{font-size:11px;color:var(--mut);text-transform:uppercase}
input,select,textarea{font-family:inherit}
input.search,select.search,textarea.search,.search{padding:9px 11px;border-radius:7px;border:1px solid var(--line);background:var(--field);color:var(--txt)}
input.search{width:260px}
select,input[type=date],input[type=number],input[type=text],input[type=password],input[type=email],textarea{background:var(--field);color:var(--txt);border:1px solid var(--line);border-radius:7px}
@media(max-width:720px){.layout{flex-direction:column}.side{width:100%;height:auto;position:static}.side nav{flex-direction:row;flex-wrap:wrap}.kpis{grid-template-columns:repeat(2,1fr)}}