*{box-sizing:border-box}
:root{--b:#0f1420;--c:#0c111b;--bd:#1e2a3a;--mut:#9fb0c3;--txt:#eaf2ff;--p:#3b82f6;--s:#22c55e;--d:#ef4444}
body{margin:0;background:var(--b);color:var(--txt);font-family:Tajawal,system-ui,-apple-system,Segoe UI,Roboto}
.wrap{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sb{background:var(--c);border-inline-end:1px solid var(--bd);padding:14px}
.brand{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--s));display:grid;place-items:center;font-weight:800}
h1{font-size:16px;margin:0}
main{padding:16px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.space{justify-content:space-between}
.top{justify-content:space-between}
.nav{display:grid;gap:6px}
.nav button{all:unset;cursor:pointer;padding:10px 12px;border-radius:10px;color:var(--txt);border:1px solid transparent}
.nav button:hover{background:#162032}
.nav .act{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(34,197,94,.18));border-color:#274b8a}
.card{background:var(--c);border:1px solid var(--bd);border-radius:14px;padding:12px}
.grid{display:grid;gap:10px}
.cards{grid-template-columns:repeat(4,minmax(160px,1fr))}
.two{grid-template-columns:2fr 1fr}
.three{grid-template-columns:repeat(3,1fr)}
.value{font-weight:800;font-size:22px}
.tag{display:inline-block;padding:4px 8px;border-radius:999px;background:#141d2c;border:1px solid #22324a;font-size:12px}
.muted{color:var(--mut)}
.small{font-size:12px}
.btn{all:unset;cursor:pointer;padding:8px 10px;border-radius:10px;border:1px solid #274b8a;background:#162032;color:var(--txt)}
.btn.p{background:var(--p);border-color:var(--p)}
.btn.s{background:var(--s);border-color:var(--s);color:#07250d}
.btn.d{background:var(--d);border-color:var(--d)}
.inp{padding:9px 10px;border-radius:10px;border:1px solid #22324a;background:var(--c);color:var(--txt)}
.tbl{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--bd);text-align:start;font-size:14px}
th{color:var(--mut)}
.sec{display:none}.sec.act{display:block}
.hr{height:1px;background:var(--bd);margin:8px 0}
/* 4 بطاقات في الصف */
.subs-grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px}
.sub-card{background:var(--c);border:1px solid var(--bd);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.sub-card img{width:100%;height:140px;object-fit:cover;border-radius:10px;background:#141d2c}
.sub-top{display:flex;justify-content:space-between;align-items:center}
.sub-actions{display:flex;gap:6px}
.pill{display:inline-block;padding:3px 8px;border-radius:999px;background:#141d2c;border:1px solid #22324a;font-size:12px}
/* modal & toasts */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);padding:14px;z-index:9}
.modal-card{max-width:760px;margin:auto}
.toasts{position:fixed;top:10px;left:10px;right:10px;display:grid;gap:8px;z-index:10}
@media(max-width:1100px){.wrap{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.subs-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:640px){.cards{grid-template-columns:1fr}.subs-grid{grid-template-columns:1fr}}
@media print{.sb,.no-print{display:none}body{background:#fff;color:#000}table,th,td{border:1px solid #000}}