@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;600&display=swap');
:root{
  --bg:#070b14; --panel:#0e1524; --card:#121a2b; --line:#223049;
  --text:#eef2ff; --muted:#93a4c3; --brand:#c81e1e; --brand2:#7c3aed;
  --ok:#10b981; --wait:#f59e0b; --danger:#ef4444;
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Cairo","IBM Plex Sans Arabic",Tahoma,sans-serif}
a{color:#fca5a5;text-decoration:none}
.layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.side{
  background:linear-gradient(180deg,#0b1220 0%,#101a30 100%);
  border-left:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;overflow:auto
}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.logo{
  width:42px;height:42px;border-radius:12px;
  background:radial-gradient(circle at 30% 30%,#fff, #fecaca 35%, #c81e1e 70%, #7f1d1d);
  box-shadow:0 0 0 2px rgba(200,30,30,.35), var(--shadow);
}
.brand h1{margin:0;font-size:18px;font-weight:800}
.brand small{color:var(--muted);display:block;font-size:11px}
.nav-btn{
  width:100%;text-align:right;border:0;background:transparent;color:var(--text);
  padding:11px 12px;border-radius:12px;cursor:pointer;margin:3px 0;font:inherit
}
.nav-btn:hover{background:rgba(255,255,255,.04)}
.nav-btn.on{background:linear-gradient(90deg,rgba(200,30,30,.2),rgba(124,58,237,.12));border:1px solid rgba(200,30,30,.35)}
.main{padding:22px}
.topbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pill{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--muted);font-size:13px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%), var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi .l{color:var(--muted);font-size:12px}
.kpi .v{font-size:28px;font-weight:800;margin-top:4px}
.btn{border:0;border-radius:12px;padding:10px 14px;cursor:pointer;background:#1e293b;color:#fff;font:inherit}
.btn-primary{background:linear-gradient(135deg,#c81e1e,#9f1239)}
.btn-accent{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px}
.b-ok{background:rgba(16,185,129,.15);color:#34d399}
.b-wait{background:rgba(245,158,11,.15);color:#fbbf24}
.b-off{background:rgba(239,68,68,.12);color:#fca5a5}
label{display:block;font-size:12px;color:var(--muted);margin-top:6px}
input,select,textarea{
  width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line);
  background:#0a101c;color:var(--text);margin:4px 0 8px;font:inherit
}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right;font-size:13px}
.muted{color:var(--muted)}
pre{background:#0a101c;border:1px solid var(--line);border-radius:12px;padding:12px;white-space:pre-wrap;max-height:360px;overflow:auto;font-size:12px}
.hero-strip{
  border-radius:var(--radius);padding:18px;margin-bottom:14px;
  background:
    radial-gradient(600px 120px at 10% 0%, rgba(200,30,30,.25), transparent 60%),
    radial-gradient(500px 120px at 90% 0%, rgba(124,58,237,.2), transparent 55%),
    var(--panel);
  border:1px solid var(--line)
}
@media(max-width:960px){
  .layout{grid-template-columns:1fr}
  .side{height:auto;position:relative}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
}