:root{
  --bg:#070a12; --stroke:#1b2442; --text:#e9edf7; --muted:#9aa6c5;
  --good:#25d366; --bad:#ff4d4d; --btn:#142046; --btn2:#1a2b63;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:radial-gradient(1200px 800px at 70% 0%, #0f1833 0%, var(--bg) 45%, #05070d 100%);color:var(--text)}
.wrap{max-width:1100px;margin:30px auto;padding:0 16px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--stroke);border-radius:14px;background:rgba(255,255,255,0.03)}
.brand{font-weight:800;letter-spacing:1px}
.brand span{color:#ffcc66}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(0,0,0,0.25);color:var(--muted);font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good)}
.grid{margin-top:14px;display:grid;grid-template-columns:1.2fr 0.8fr;gap:14px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--stroke);border-radius:16px;background:rgba(10,14,28,0.65);padding:14px}
.h1{font-size:18px;font-weight:800;margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.muted{color:var(--muted);font-size:13px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{background:linear-gradient(180deg,var(--btn2),var(--btn));border:1px solid var(--stroke);color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent}
.btn.small{padding:7px 10px;font-size:13px}
.btn.bad{border-color:rgba(255,77,77,0.45)}
.kpi{font-size:46px;font-weight:900;letter-spacing:1px;margin:10px 0 6px}
.list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:900px){.list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{border:1px solid var(--stroke);border-radius:14px;padding:10px;background:rgba(0,0,0,0.18)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);padding:10px 12px;border-radius:12px;border:1px solid var(--stroke);background:rgba(0,0,0,0.6);display:none}
.toast.show{display:block}
.toast.bad{border-color:rgba(255,77,77,0.5)}
.input,textarea,select{width:100%;background:rgba(0,0,0,0.25);border:1px solid var(--stroke);border-radius:12px;padding:10px;color:var(--text);outline:none}
textarea{min-height:90px;resize:vertical}
.hr{height:1px;background:rgba(255,255,255,0.06);margin:12px 0}

/* Admin totals chips */
.perWrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size:13px;
  white-space:nowrap;
}
.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size:12px;
}