:root{
  --bg:#07111f;--panel:#0f1d31;--border:rgba(148,163,184,.16);
  --text:#f8fafc;--muted:#94a3b8;--primary:#3b82f6;
  --green:#22c55e;--yellow:#f59e0b;--red:#ef4444;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;direction:rtl;color:var(--text);
  font-family:Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at top right,rgba(37,99,235,.2),transparent 35%),
    radial-gradient(circle at bottom left,rgba(14,165,233,.12),transparent 30%),
    var(--bg);
}
.shell{width:min(1400px,calc(100% - 40px));margin:auto;padding:32px 0}
.topbar,.panel,.stats article,.warnings{
  border:1px solid var(--border);background:rgba(15,29,49,.94);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 26px;border-radius:22px;margin-bottom:22px
}
.brand{display:flex;align-items:center;gap:16px}
.logo{
  display:grid;place-items:center;width:62px;height:62px;border-radius:18px;
  background:linear-gradient(145deg,#60a5fa,#1d4ed8);font-weight:800;font-size:20px
}
.eyebrow{margin:0;color:#60a5fa;font-size:12px;font-weight:800;letter-spacing:2px}
h1{margin:3px 0;font-size:clamp(25px,3vw,38px)}
.subtitle{margin:0;color:#cbd5e1;font-size:14px}
.runtime-status{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;
  color:#bbf7d0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25)
}
.runtime-status span{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stats article{padding:20px;border-radius:16px}
.stats small{display:block;color:var(--muted)}
.stats strong{display:block;font-size:34px;margin-top:4px}
.panel{border-radius:22px;overflow:hidden}
.panel-heading{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;border-bottom:1px solid var(--border)
}
.panel-heading h2{margin:0}
.panel-heading p{margin:7px 0 0;color:var(--muted)}
.refresh{
  padding:10px 16px;border-radius:12px;text-decoration:none;color:white;
  background:rgba(59,130,246,.16);border:1px solid rgba(59,130,246,.3)
}
.table-wrap{overflow:auto}
table{width:100%;min-width:900px;border-collapse:collapse}
th,td{text-align:right;padding:16px 18px}
th{color:var(--muted);font-size:12px;background:rgba(255,255,255,.025)}
td{border-top:1px solid var(--border);color:#cbd5e1;font-size:13px}
td strong,td small{display:block}
td small{margin-top:4px;color:var(--muted);font-size:10px;direction:ltr}
code{direction:ltr;color:#bfdbfe}
.port{padding:5px 9px;border-radius:8px;background:rgba(168,85,247,.14)}
.pill{display:inline-block;min-width:110px;padding:6px 10px;border-radius:999px;text-align:center;font-size:11px}
.status-running,.health-healthy{color:#86efac;background:rgba(34,197,94,.14)}
.status-restarting,.status-created,.health-starting{color:#fcd34d;background:rgba(245,158,11,.14)}
.status-exited,.status-dead,.status-timeout,.status-docker-error,.health-unhealthy{color:#fca5a5;background:rgba(239,68,68,.14)}
.status-not-created,.status-paused,.status-unknown,.health-none,.health-unknown{color:#cbd5e1;background:rgba(148,163,184,.14)}
.empty{padding:70px 20px;text-align:center;color:var(--muted)}
.warnings{margin-top:22px;padding:20px;border-radius:16px;color:#fde68a}
footer{margin-top:20px;color:var(--muted);font-size:11px}
@media(max-width:950px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){
  .shell{width:calc(100% - 20px);padding-top:12px}
  .topbar{flex-direction:column;align-items:flex-start}
  .stats{grid-template-columns:1fr}
  .panel-heading{align-items:flex-start}
}