:root{
  --navy:#071524;--navy-2:#0d2136;--navy-3:#132f49;--paper:#f4f7fb;--card:#fff;--ink:#10223a;--muted:#64748b;--muted-2:#94a3b8;--line:#e3e9f1;
  --teal:#0fa98e;--teal-2:#18c4a3;--teal-soft:#e7f8f4;--red:#e45858;--red-soft:#fff0f0;--amber:#d99a2b;--amber-soft:#fff7e8;--blue:#3d73e7;--blue-soft:#edf3ff;
  --shadow:0 10px 40px rgba(22,38,61,.07);--shadow-lg:0 26px 80px rgba(8,23,40,.16);--radius:20px;--radius-sm:13px;
}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,select,input{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--navy) 0%,#081b2e 100%);color:#d8e3ee;padding:28px 20px 22px;display:flex;flex-direction:column;z-index:20;box-shadow:14px 0 40px rgba(7,21,36,.07)}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px}.brand-mark{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#21d4af,#0fa98e);display:grid;place-items:center;box-shadow:0 10px 28px rgba(15,169,142,.23)}.brand-mark span{font-weight:950;font-size:23px;color:#06251f}.brand-copy{display:grid;gap:3px}.brand-copy strong{font-size:18px;color:white;letter-spacing:-.2px}.brand-copy span{font-size:10px;color:#8da5ba;text-transform:uppercase;letter-spacing:1.1px}
.nav-groups{display:grid;gap:22px}.nav-group{display:grid;gap:5px}.nav-group-label{padding:0 11px 7px;color:#668199;font-size:9px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}.nav-item{border:0;background:transparent;color:#9fb2c5;display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border-radius:12px;text-align:start;font-size:13px;font-weight:650;position:relative;transition:.18s ease}.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}.nav-item.active{background:linear-gradient(90deg,rgba(24,196,163,.17),rgba(24,196,163,.07));color:#fff;box-shadow:inset 3px 0 0 var(--teal-2)}[dir=rtl] .nav-item.active{box-shadow:inset -3px 0 0 var(--teal-2)}.nav-icon{width:22px;text-align:center;color:#53d7bd;font-size:15px}.nav-count{font-style:normal;margin-inline-start:auto;background:#ef6c68;color:#fff;border-radius:999px;min-width:21px;height:21px;display:grid;place-items:center;padding:0 6px;font-size:9px;font-weight:900}.nav-count:empty{display:none}
.sidebar-footer{margin-top:auto;display:grid;gap:12px}.system-state{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}.live-dot{width:9px;height:9px;border-radius:50%;background:#32d6af;box-shadow:0 0 0 5px rgba(50,214,175,.1)}.system-state div{display:grid;gap:2px}.system-state strong{font-size:11px;color:#dce8f2}.system-state small{font-size:9px;color:#6f8aa1}.demo-note{font-size:9px;line-height:1.55;color:#637e94;padding:0 4px}