:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --text:#16181d;
  --muted:#6a717c;
  --line:#e4e7eb;
  --ok:#2b8a3e;
  --bad:#c92a2a;
  --accent:#4c3fd1;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.wrap{max-width:1100px;margin:0 auto;padding:28px}
.top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
h1{font-size:32px;margin:0 0 6px} h2{font-size:17px;margin:0 0 12px}
.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--accent);margin:0 0 7px}
.muted{color:var(--muted);margin:0}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px;box-shadow:0 4px 16px rgba(0,0,0,.035);
}
.hero{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.status-dot{width:16px;height:16px;border-radius:50%;background:#adb5bd;box-shadow:0 0 0 6px #eef0f2}
.status-dot.ok{background:var(--ok);box-shadow:0 0 0 6px #eaf6ec}
.status-dot.bad{background:var(--bad);box-shadow:0 0 0 6px #fbecec}
.status-main{font-weight:750;font-size:21px}
.grid{display:grid;gap:16px;margin:16px 0}
.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.metric span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.metric strong{font-size:27px}
button{
  border:0;background:var(--accent);color:#fff;font-weight:700;border-radius:10px;
  padding:11px 15px;cursor:pointer;font-size:14px
}
button:disabled{opacity:.55;cursor:default}
.actions{display:flex;align-items:center;gap:14px}
.link{color:var(--muted);text-decoration:none;font-size:14px}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.pill{border:1px solid var(--line);padding:7px 10px;border-radius:999px;color:var(--muted);font-size:12px}
dl{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:0}
dt{color:var(--muted)} dd{margin:0;text-align:right;font-weight:600}
.budget{height:10px;background:#eef0f2;border-radius:999px;overflow:hidden;margin:10px 0}
.budget div{height:100%;width:0;background:var(--accent);transition:width .3s ease}
.loader{height:7px;background:#eceef2;border-radius:999px;overflow:hidden}
.loader div{height:100%;width:30%;background:var(--accent);animation:move 1.2s linear infinite}
@keyframes move{from{transform:translateX(-100%)}to{transform:translateX(430%)}}
footer{text-align:center;color:var(--muted);font-size:12px;padding:25px}
.login-body{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(380px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.login-card input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;margin:18px 0 12px;font-size:16px}
.login-card button{width:100%}
.error{color:var(--bad)}
@media(max-width:760px){
  .wrap{padding:16px}.top{flex-direction:column}.grid.four,.grid.two{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.grid.four,.grid.two{grid-template-columns:1fr}}