:root{
  --bg:#0b1220;
  --card:#0f1a2d;
  --text:#e9eef9;
  --muted:#a9b6d3;
  --border:rgba(255,255,255,.08);
  --primary:#2563eb;
  --danger:#ef4444;
  --ok:#22c55e;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 20% 10%, rgba(37,99,235,.25), transparent 55%),
             radial-gradient(1200px 800px at 80% 30%, rgba(34,197,94,.18), transparent 60%),
             var(--bg);
  color:var(--text);
  direction:rtl;
}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:18px}
.topbar{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 16px;border:1px solid var(--border);background:rgba(15,26,45,.72);
  backdrop-filter: blur(10px);
  border-radius:14px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-badge{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg, rgba(37,99,235,.9), rgba(34,197,94,.8));
  box-shadow: 0 10px 30px rgba(37,99,235,.22);
}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{
  text-decoration:none;
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.nav a.active{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.35)}
.topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.hello{
  display:flex;flex-direction:column;gap:6px;
  padding:10px 12px;border-radius:14px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  min-width:260px;
}
.hello-line{display:flex;align-items:center;justify-content:space-between;gap:10px}
.progress{
  width:100%;height:10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;border:1px solid rgba(255,255,255,.08);
}
.progress > span{
  display:block;height:100%;
  background:linear-gradient(90deg, rgba(37,99,235,.95), rgba(34,197,94,.9));
  width:0%;
}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tab{
  text-decoration:none;
  padding:9px 12px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.tab.active{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.35)}
.mini-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.mini-btn.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
.mini-btn:hover{background:rgba(255,255,255,.08)}
.mini-btn.danger:hover{background:rgba(239,68,68,.14)}
.card{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(15,26,45,.72);
  backdrop-filter: blur(10px);
}
.card-h{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.card-b{padding:16px}
.muted{color:var(--muted)}
.btn{
  appearance:none;border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;border-radius:12px;
  cursor:pointer;
  font-family:inherit;
}
.btn.primary{background:rgba(37,99,235,.25);border-color:rgba(37,99,235,.45)}
.btn.danger{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.35)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
@media (max-width:900px){
  .col-6,.col-4,.col-3{grid-column:span 12}
  .topbar{flex-direction:column;align-items:stretch}
}
label{display:block;margin-bottom:6px;font-weight:600}
input[type="text"],input[type="password"],input[type="file"]{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.alert{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  padding:12px 12px;border-radius:12px;
}
.alert.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12)}
.alert.bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap}
th{position:sticky;top:0;background:rgba(15,26,45,.92);z-index:1;text-align:right}
tr:hover td{background:rgba(255,255,255,.02)}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-weight:600;
}
.badge.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12)}
.badge.warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12)}
.badge.bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
.wa-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(34,197,94,.4);
  background:rgba(34,197,94,.12);
  cursor:pointer;
}
.wa-btn:hover{background:rgba(34,197,94,.18)}
.pulse{
  position:relative;
}
.pulse:after{
  content:"";
  position:absolute;inset:-2px;border-radius:14px;
  border:1px solid rgba(37,99,235,.45);
  animation:pulse 2.2s infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{opacity:.9;transform:scale(1)}
  70%{opacity:0;transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.06)}
}