:root{
  --bg:#0E0E11; --panel:#17171C; --panel2:#1E1E25; --border:rgba(255,255,255,0.08);
  --text:#F4F4F6; --muted:#9A9AA6; --accent:#34C28A; --accent2:#1E8A50;
  --accent-soft:rgba(52,194,138,0.15); --green:#34C28A; --red:#E24B4A; --amber:#EF9F27;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important;}
body{font-family:'Inter',-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;min-height:100vh;}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{background:var(--panel);border:0.5px solid var(--border);border-radius:18px;
  padding:34px 30px;width:100%;max-width:360px;text-align:center;}
.login-card h1{font-size:19px;font-weight:600;margin:18px 0 4px;}
.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:20px;}
.login-card input{width:100%;background:var(--panel2);border:0.5px solid var(--border);color:var(--text);
  border-radius:10px;padding:12px 14px;font-size:14px;outline:none;margin-bottom:12px;}
.login-card input:focus{border-color:var(--accent);}
.login-card button{width:100%;background:var(--accent2);color:#fff;border:none;border-radius:10px;
  padding:12px;font-size:14px;font-weight:600;cursor:pointer;}
.login-card button:hover{background:var(--accent);}
.err{color:var(--red);font-size:12.5px;margin-top:12px;}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--accent2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;}
.brand-name{font-weight:600;font-size:16px;}
.brand-logo{height:38px;width:auto;display:block;}
.login-logo{height:84px;width:auto;display:block;margin:0 auto 6px;}
.nav-pill{margin-left:10px;font-size:12.5px;padding:6px 13px;border-radius:8px;color:var(--muted);}
.nav-pill.active{background:var(--accent2);color:#fff;}

/* ---------- app shell ---------- */
#app{max-width:1180px;margin:0 auto;padding:18px 22px 40px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.top-right{display:flex;align-items:center;gap:8px;}
.asof{color:var(--muted);font-size:12px;margin-right:4px;}
.ghost{background:var(--panel);border:0.5px solid var(--border);color:var(--muted);
  border-radius:9px;padding:7px 12px;font-size:12.5px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.ghost:hover{color:var(--text);border-color:var(--accent);}
.welcome{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.welcome h2{font-size:22px;font-weight:600;}
.range{background:var(--panel);border:0.5px solid var(--border);color:var(--muted);
  font-size:12px;padding:6px 13px;border-radius:9px;}

/* ---------- kpis ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px;}
.kpi{background:var(--panel);border:0.5px solid var(--border);border-radius:var(--radius);padding:15px 16px;}
.kpi .label{font-size:11.5px;color:var(--muted);margin-bottom:7px;}
.kpi .value{font-size:23px;font-weight:600;letter-spacing:-0.5px;line-height:1;}
.kpi .value.sm{font-size:19px;}
.kpi .delta{font-size:11.5px;margin-top:6px;color:var(--muted);}
.kpi.flag{border-color:rgba(226,75,74,0.35);}
.kpi.flag .value{color:var(--red);}

/* ---------- panels ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.panel{background:var(--panel);border:0.5px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:600;margin-bottom:14px;}
.panel-head .muted{font-weight:400;}
.muted{color:var(--muted);font-size:11.5px;}
.chart-box{position:relative;width:100%;height:190px;}

/* ---------- lists ---------- */
.list{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:0.5px solid var(--border);font-size:13px;}
.row:first-child{border-top:none;}
.row .left{display:flex;align-items:center;gap:10px;min-width:0;}
.dot{width:7px;height:7px;border-radius:50%;flex:none;}
.row .job{font-weight:500;}
.row .meta{color:var(--muted);font-size:11px;}
.row .amt{font-weight:600;white-space:nowrap;}
.amt.pos{color:var(--green);}
.amt.neg{color:var(--red);}
.amt.warn{color:var(--amber);}
.bar-mini{height:5px;border-radius:3px;background:var(--accent-soft);margin-top:4px;overflow:hidden;}
.bar-mini > i{display:block;height:100%;background:var(--accent);}
.col{display:flex;flex-direction:column;min-width:0;}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;}

.foot{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px;margin-top:8px;padding-top:8px;}

@media(max-width:920px){
  .kpis{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .welcome h2{font-size:18px;}
  .top-right .ghost span{display:none;}
}