/* TowerWatch — واجهة مركز مراقبة الأبراج */
:root {
  --ink: #0c1328; --panel: #121b36; --panel-2: #18234a; --panel-3: #1f2c5a;
  --line: #26335e; --line-soft: #1d2850;
  --text: #e6ecff; --muted: #8c9ac4; --faint: #5d6a94;
  --accent: #4cc3ff; --accent-2: #7b8cff; --accent-ink: #062033;
  --up: #2bd4a4; --warn: #f6b73c; --down: #ff5c6c; --unreach: #a08cff; --unknown: #6b7899; --info: #4cc3ff;
  --up-bg: rgba(43,212,164,.12); --warn-bg: rgba(246,183,60,.13); --down-bg: rgba(255,92,108,.13); --unreach-bg: rgba(160,140,255,.13);
  --radius-lg: 18px; --radius: 12px; --radius-sm: 8px;
  --shadow: 0 10px 30px -12px rgba(0,0,0,.55);
  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-head: "Noto Kufi Arabic", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --side-w: 248px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ink: #eef2fa; --panel: #ffffff; --panel-2: #f4f7fd; --panel-3: #e8eef9;
  --line: #d6deef; --line-soft: #e5ebf6;
  --text: #121a33; --muted: #56658c; --faint: #8b97b7;
  --accent: #0a8fd6; --accent-2: #4d5fe0; --accent-ink: #ffffff;
  --up: #0fa77e; --warn: #c98a07; --down: #e23649; --unreach: #6f58e6; --unknown: #8792ad;
  --up-bg: rgba(15,167,126,.1); --warn-bg: rgba(201,138,7,.12); --down-bg: rgba(226,54,73,.1); --unreach-bg: rgba(111,88,230,.1);
  --shadow: 0 10px 28px -16px rgba(30,45,90,.35);
  color-scheme: light;
}

:root[data-theme="dim"] {
  --ink: #15161a; --panel: #1c1d22; --panel-2: #222429; --panel-3: #2b2d33;
  --line: #34363d; --line-soft: #27292f;
  --text: #ddd6c8; --muted: #a39c8e; --faint: #706a60;
  --accent: #d8a657; --accent-2: #a9b665; --accent-ink: #1d1a14;
  --up: #94b97f; --warn: #e3a857; --down: #e07b6f; --unreach: #b59ad3; --unknown: #7c776d; --info: #8fb0c4;
  --up-bg: rgba(148,185,127,.12); --warn-bg: rgba(227,168,87,.12); --down-bg: rgba(224,123,111,.13); --unreach-bg: rgba(181,154,211,.12);
  --shadow: 0 10px 30px -14px rgba(0,0,0,.6);
  color-scheme: dark;
}
:root[data-theme="dim"] body::before { opacity: .25; filter: sepia(1) hue-rotate(-20deg); }
:root[data-theme="dim"] .nav a.on { background: linear-gradient(90deg, rgba(216,166,87,.03), rgba(216,166,87,.12)); }
:root[data-theme="dim"] .spectrum .band.sector { fill: rgba(216,166,87,.5); }
:root[data-theme="dim"] .spectrum .band.link { fill: rgba(181,154,211,.5); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* لا تسمح لأي كلاس أن يُظهر عنصراً مخفياً (مثل عدّاد 0) */
html, body { margin: 0; height: 100%; }
body { background: var(--ink); color: var(--text); font-family: var(--font); font-size: 14.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 500px at 85% -10%, rgba(76,195,255,.08), transparent 60%), radial-gradient(700px 400px at 0% 110%, rgba(123,140,255,.07), transparent 60%); }
:root[data-theme="light"] body::before { opacity: .5; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.num, .tab { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
span.ltr, b.ltr, a.ltr, div.val.ltr { display: inline-block; }
td.ltr { text-align: right; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; letter-spacing: 0; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid var(--ink); }

/* ---------------- الهيكل ---------------- */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: var(--panel); border-inline-start: 1px solid var(--line-soft); display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand b { font-family: var(--font-head); font-size: 17px; display: block; line-height: 1.2; }
.brand small { color: var(--muted); font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; position: relative; }
.nav a svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.nav a:hover { background: var(--panel-2); color: var(--text); }
.nav a.on { background: linear-gradient(90deg, rgba(76,195,255,.04), rgba(76,195,255,.14)); color: var(--text); }
.nav a.on::after { content: ""; position: absolute; inset-inline-start: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent); }
.nav .badge { margin-inline-start: auto; }
.nav-sep { height: 1px; background: var(--line-soft); margin: 10px 8px; }
.side-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); font-weight: 700; color: var(--accent); flex: none; }
.side-foot .who { flex: 1; min-width: 0; } .side-foot .who b { display: block; font-size: 13px; } .side-foot .who small { color: var(--muted); font-size: 12px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.top h1 { font-size: 19px; }
.top .crumbs { color: var(--muted); font-size: 13px; }
.top .grow { flex: 1; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 5px 11px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line-soft); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 var(--up); animation: pulse 2.4s infinite; }
.live.off i { background: var(--down); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(43,212,164,.55); } 70% { box-shadow: 0 0 0 8px rgba(43,212,164,0); } 100% { box-shadow: 0 0 0 0 rgba(43,212,164,0); } }
.search { position: relative; width: min(320px, 34vw); }
.search input { width: 100%; padding: 8px 36px 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.search svg { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 17px; color: var(--faint); }
.search-res { position: absolute; top: calc(100% + 6px); inset-inline: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 360px; overflow: auto; z-index: 40; }
.search-res a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; color: var(--text); border-bottom: 1px solid var(--line-soft); }
.search-res a:hover, .search-res a.sel { background: var(--panel-2); }
.search-res small { color: var(--muted); margin-inline-start: auto; }
.page { padding: 24px 28px 60px; max-width: 1600px; width: 100%; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.page-head .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- مكونات ---------------- */
.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 18px; min-width: 0; }
.panel > header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel > header .muted { margin-inline-start: auto; font-size: 12.5px; }
.panel.flush { padding: 0; } .panel.flush > header { padding: 16px 18px 0; }
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-main { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.row { display: flex; align-items: center; gap: 10px; } .wrap { flex-wrap: wrap; } .gap-s { gap: 6px; }
.sp { flex: 1; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 15px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--panel-3); border-color: var(--faint); }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); background: var(--down-bg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--panel-2); color: var(--text); }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.icon { padding: 7px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .spin { width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--panel-3); color: var(--muted); white-space: nowrap; }
.badge.up { background: var(--up-bg); color: var(--up); } .badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.down, .badge.critical { background: var(--down-bg); color: var(--down); } .badge.unreachable { background: var(--unreach-bg); color: var(--unreach); }
.badge.info { background: rgba(76,195,255,.12); color: var(--info); } .badge.warning { background: var(--warn-bg); color: var(--warn); }
.badge.count { background: var(--down); color: #fff; min-width: 20px; justify-content: center; padding: 0 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--unknown); }
.dot.up { background: var(--up); } .dot.warn { background: var(--warn); } .dot.down { background: var(--down); box-shadow: 0 0 0 3px var(--down-bg); } .dot.unreachable { background: var(--unreach); } .dot.degraded { background: var(--warn); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 12.5px; color: var(--muted); }
.vendor { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.vendor.mikrotik { color: #ff8a8a; border-color: rgba(255,138,138,.35); } .vendor.ubnt { color: #5fb8ff; border-color: rgba(95,184,255,.35); }
.vendor.mimosa { color: #c7a2ff; border-color: rgba(199,162,255,.35); } .vendor.generic { color: var(--muted); }
.vendor.cisco { color: #49c0e8; border-color: rgba(73,192,232,.35); }

/* أرقام المؤشرات */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 15px 16px; position: relative; overflow: hidden; }
.kpi .lbl { color: var(--muted); font-size: 13px; }
.kpi .val { font-family: var(--font-head); font-size: 27px; font-weight: 700; line-height: 1.25; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 14px; color: var(--muted); font-weight: 500; }
.kpi .foot { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.kpi .foot b { font-weight: 600; }
.kpi .bar { display: flex; height: 5px; border-radius: 5px; overflow: hidden; margin-top: 10px; background: var(--panel-3); }
.kpi .bar i { display: block; height: 100%; }
.c-up { color: var(--up); } .c-warn { color: var(--warn); } .c-down { color: var(--down); } .c-unreach { color: var(--unreach); } .c-accent { color: var(--accent); }

/* ---------------- بطاقات الأبراج (البوصلة) ---------------- */
.towers { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; }
.tower { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; color: var(--text); transition: border-color .15s, transform .15s; position: relative; }
.tower:hover { border-color: var(--faint); transform: translateY(-1px); }
.tower.down { border-color: color-mix(in srgb, var(--down) 55%, transparent); background: linear-gradient(180deg, var(--down-bg), var(--panel) 60%); }
.tower.degraded { border-color: color-mix(in srgb, var(--warn) 30%, var(--line-soft)); }
.tower .t-head { display: flex; align-items: center; gap: 8px; }
.tower .t-head b { font-family: var(--font-head); font-size: 15px; }
.tower .t-head .code { color: var(--faint); font-size: 12px; margin-inline-start: auto; }
.tower .compass { width: 100%; max-width: 118px; margin: 2px auto 0; display: block; }
.tower .t-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 8px; }
.tower .t-foot b { color: var(--text); font-weight: 600; }
.tower .alerts-flag { position: absolute; top: 12px; inset-inline-end: 12px; }
.compass .ring { fill: none; stroke: var(--line); }
.compass .ring-in { fill: var(--panel-2); stroke: var(--line-soft); }
.compass .tick { stroke: var(--faint); stroke-width: 1; }
.compass text { fill: var(--faint); font-size: 9px; font-family: var(--font); }
.compass .wedge { stroke: var(--panel); stroke-width: 1.5; transition: opacity .2s; }
.compass .wedge.up { fill: var(--up); } .compass .wedge.warn { fill: var(--warn); } .compass .wedge.down { fill: var(--down); }
.compass .wedge.unreachable { fill: var(--unreach); } .compass .wedge.unknown { fill: var(--unknown); }
.compass .mast { fill: var(--panel-3); stroke: var(--line); }
.compass .core.up { fill: var(--up); } .compass .core.down { fill: var(--down); } .compass .core.warn { fill: var(--warn); } .compass .core.degraded { fill: var(--warn); } .compass .core.unknown, .compass .core.unreachable { fill: var(--unknown); }
.compass .linkray { stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 3; }
.compass .linkray.up { stroke: var(--accent); } .compass .linkray.warn { stroke: var(--warn); } .compass .linkray.down, .compass .linkray.unreachable { stroke: var(--down); } .compass .linkray.unknown { stroke: var(--unknown); }
.tower.down .compass .core { animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------------- جداول ---------------- */
.table-wrap { overflow: auto; border-radius: var(--radius); }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: start; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--panel); z-index: 1; cursor: default; }
table.t th.sort { cursor: pointer; } table.t th.sort:hover { color: var(--text); }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: var(--panel-2); }
table.t tr.is-down td { background: var(--down-bg); }
table.t td.name b { font-weight: 600; } table.t td.name small { display: block; color: var(--faint); font-size: 12px; }
.meter { display: inline-flex; align-items: center; gap: 7px; }
.meter .m { width: 46px; height: 6px; border-radius: 6px; background: var(--panel-3); overflow: hidden; }
.meter .m i { display: block; height: 100%; border-radius: 6px; }
.q-good { color: var(--up); } .q-ok { color: var(--accent); } .q-mid { color: var(--warn); } .q-bad { color: var(--down); }

/* ---------------- التنبيهات ---------------- */
.feed { display: flex; flex-direction: column; }
.alert { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); align-items: start; }
.alert:last-child { border-bottom: 0; }
.alert .sev { width: 4px; align-self: stretch; border-radius: 4px; background: var(--info); grid-row: span 2; }
.alert .sev.critical { background: var(--down); } .alert .sev.warning { background: var(--warn); } .alert.resolved .sev { background: var(--up); opacity: .7; }
.alert .ttl { font-weight: 600; } .alert.resolved .ttl { color: var(--muted); font-weight: 500; }
.alert .msg { color: var(--muted); font-size: 13px; grid-column: 2; }
.alert .when { color: var(--faint); font-size: 12px; white-space: nowrap; text-align: end; }
.alert .acts { grid-column: 3; display: flex; gap: 4px; justify-content: flex-end; }
.alert.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: rgba(76,195,255,.18); } to { background: transparent; } }

/* ---------------- مخطط البرج ---------------- */
.topo { display: grid; gap: 14px; }
.topo-tier { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; position: relative; }
.topo-tier + .topo-tier::before { content: ""; position: absolute; top: -14px; left: 50%; height: 14px; border-inline-start: 2px dashed var(--line); }
.node { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; min-width: 150px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; color: var(--text); position: relative; }
.node:hover { border-color: var(--faint); }
.node.down, .node.unreachable { border-color: color-mix(in srgb, var(--down) 55%, transparent); background: var(--down-bg); }
.node.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.node .n-t { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; }
.node .n-s { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.node .n-role { font-size: 11.5px; color: var(--faint); }

/* ---------------- الطيف ---------------- */
.spectrum { width: 100%; display: block; }
.spectrum .axis text { fill: var(--faint); font-size: 10.5px; font-family: var(--font); }
.spectrum .axis line { stroke: var(--line-soft); }
.spectrum .rowlbl { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.spectrum .band { rx: 4; }
.spectrum .band.sector { fill: rgba(76,195,255,.55); stroke: var(--accent); }
.spectrum .band.link { fill: rgba(160,140,255,.55); stroke: var(--unreach); }
.spectrum .band.down { fill: var(--down-bg); stroke: var(--down); stroke-dasharray: 3 2; }
.spectrum .band.clash { stroke: var(--down); stroke-width: 2; }
.spectrum .band:hover { filter: brightness(1.3); cursor: pointer; }
.spectrum .blbl { fill: var(--text); font-size: 10px; font-family: var(--font); pointer-events: none; }
.spectrum .dfs { fill: rgba(246,183,60,.05); }
.spectrum .dfs-l { fill: var(--warn); font-size: 10px; opacity: .8; }
.spectrum .rowbg { fill: var(--panel-2); } .spectrum .rowbg.alt { fill: transparent; }
.spectrum .cur { stroke: var(--text); stroke-width: 2; stroke-dasharray: 4 3; }

.score-bars { display: flex; align-items: flex-end; gap: 1px; height: 90px; padding-top: 6px; }
.score-bars i { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; }
.pick { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--panel-2); }
.pick + .pick { margin-top: 8px; }
.pick.best { border-color: color-mix(in srgb, var(--up) 55%, transparent); background: linear-gradient(90deg, var(--up-bg), var(--panel-2)); }
.pick .f { font-family: var(--font-head); font-size: 18px; font-weight: 700; direction: ltr; text-align: center; }
.pick .f small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; font-family: var(--font); }
.pick .why { color: var(--muted); font-size: 12.5px; }
.score { font-family: var(--font-head); font-weight: 700; font-size: 20px; }
.ring-score { width: 54px; height: 54px; }
.advice { padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border-inline-start: 4px solid var(--accent); }
.advice.good { border-color: var(--up); } .advice.change { border-color: var(--warn); }

/* ---------------- الرسوم ---------------- */
.chart { width: 100%; height: 190px; display: block; }
.chart .grid line { stroke: var(--line-soft); }
.chart .grid text { fill: var(--faint); font-size: 10.5px; font-family: var(--font); }
.chart .area { opacity: .16; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .gap { fill: var(--down-bg); }
.chart-tip { position: fixed; z-index: 90; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; box-shadow: var(--shadow); white-space: nowrap; }
.chart-wrap { position: relative; }
.chart .hover-line { stroke: var(--faint); stroke-dasharray: 3 3; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 3px; vertical-align: middle; margin-inline-end: 5px; }
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 13px; }
.seg button.on { background: var(--panel-3); color: var(--text); }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.stat { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; }
.stat .lbl { color: var(--muted); font-size: 12px; } .stat .v { font-family: var(--font-head); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 12px; color: var(--muted); font-weight: 400; }

/* ---------------- نماذج ---------------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.field .hint { font-size: 12px; color: var(--faint); margin-top: 4px; }
.input, select.input, textarea.input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); outline: none; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76,195,255,.15); }
textarea.input { min-height: 120px; resize: vertical; font-family: ui-monospace, Consolas, monospace; direction: ltr; font-size: 13px; }
.input.ltr { direction: ltr; text-align: left; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { appearance: none; width: 40px; height: 22px; border-radius: 22px; background: var(--panel-3); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: inset-inline-start .15s, background .15s; }
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { inset-inline-start: 20px; background: #fff; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; max-height: 210px; overflow: auto; padding: 4px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); cursor: pointer; font-size: 13px; }
.checks label:has(input:checked) { border-color: var(--accent); background: rgba(76,195,255,.1); }
.settings-sec { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.settings-sec:first-child { padding-top: 4px; }
.settings-sec .desc h3 { margin-bottom: 4px; } .settings-sec .desc p { color: var(--muted); margin: 0; font-size: 13px; }

/* ---------------- نوافذ ---------------- */
.modal-bg { position: fixed; inset: 0; background: rgba(5,9,22,.6); backdrop-filter: blur(3px); z-index: 70; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; width: min(720px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: var(--shadow); animation: rise .18s ease-out; }
.modal.wide { width: min(980px, 100%); }
.modal > header { padding: 18px 22px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.modal > .body { padding: 18px 22px; overflow: auto; }
.modal > footer { padding: 14px 22px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; justify-content: flex-start; }
@keyframes fade { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.toasts { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--panel); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); padding: 11px 16px; border-radius: 12px; box-shadow: var(--shadow); max-width: 380px; animation: rise .2s; }
.toast.err { border-inline-start-color: var(--down); } .toast.ok { border-inline-start-color: var(--up); } .toast.warn { border-inline-start-color: var(--warn); }
.toast b { display: block; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty svg { width: 44px; height: 44px; color: var(--faint); margin-bottom: 8px; }
.skeleton { height: 120px; border-radius: 16px; background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters .input { width: auto; min-width: 140px; }
.qr-box { width: 280px; height: 280px; border-radius: 16px; background: #fff; display: grid; place-items: center; padding: 10px; margin: 6px auto; }
.qr-box img, .qr-box canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.wa-state { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: var(--panel-2); }
.wa-state .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(37,211,102,.14); color: #25d366; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; background: var(--down-bg); border: 1px solid color-mix(in srgb, var(--down) 40%, transparent); }
.banner.info { background: rgba(76,195,255,.08); border-color: rgba(76,195,255,.3); }
.mob-nav { display: none; }

/* ---------------- تسجيل الدخول ---------------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; position: relative; z-index: 1; }
.login-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; background: linear-gradient(160deg, #0f1b42, #0a1029 70%); }
.login-art svg.waves { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-art h2 { font-size: 30px; line-height: 1.4; position: relative; max-width: 460px; color: #e6ecff; }
.login-art p { color: #9fb0e0; position: relative; max-width: 420px; }
.login-form { display: grid; place-items: center; padding: 32px; }
.login-card { width: min(380px, 100%); }
.login-card .brand { padding: 0 0 26px; }
.login-card .field { margin-bottom: 14px; }
.login-card .btn { width: 100%; padding: 11px; }
.err { color: var(--down); font-size: 13px; min-height: 20px; }

/* ---------------- استجابة ---------------- */
@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } .g-main { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .mob-nav { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 50; background: var(--panel); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .mob-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 4px 6px; border-radius: 10px; position: relative; }
  .mob-nav a svg { width: 22px; height: 22px; } .mob-nav a.on { color: var(--accent); }
  .mob-nav .badge { position: absolute; top: -2px; inset-inline-end: 0; font-size: 10px; padding: 0 5px; }
  .top { padding: 10px 16px; gap: 10px; } .top .search { display: none; } .top .crumbs { display: none; }
  .page { padding: 16px 14px 96px; }
  .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .kpi .val { font-size: 22px; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .settings-sec { grid-template-columns: 1fr; gap: 12px; }
  .towers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tower { padding: 11px; } .tower .t-foot { flex-direction: column; gap: 2px; }
  .login { grid-template-columns: 1fr; } .login-art { display: none; }
  .hide-m { display: none !important; }
  .toasts { bottom: 84px; inset-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* إصلاحات العرض الضيق */
.panel > header { flex-wrap: wrap; row-gap: 8px; }
.panel > header h2 { white-space: nowrap; }
.seg { max-width: 100%; overflow-x: auto; }
.seg button { white-space: nowrap; }
.main { overflow-x: clip; }
.page-head > div:first-child { min-width: 0; }
@media (max-width: 900px) {
  .panel > header .legend { display: none; }
  .page-head .actions { margin-inline-start: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick { grid-template-columns: 64px 1fr auto; }
}
.banner > svg { width: 24px; height: 24px; flex: none; color: var(--down); }
.banner.info > svg { color: var(--accent); }
.wa-state .ico svg { width: 26px; height: 26px; }
.empty > svg { display: block; margin-inline: auto; }

/* ---------------- الثيمات ---------------- */
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.theme-pick button { border: 2px solid var(--line); border-radius: 14px; padding: 10px; background: var(--panel-2); cursor: pointer; text-align: start; color: var(--text); }
.theme-pick button.on { border-color: var(--accent); }
.theme-pick .sw { display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.theme-pick .sw i { flex: 1; }

/* ---------------- المزيد (موبايل) ---------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-soft); color: var(--text); position: relative; min-height: 96px; }
.tile svg { width: 26px; height: 26px; color: var(--accent); }
.tile b { font-weight: 600; } .tile small { color: var(--muted); font-size: 12.5px; }
.tile .badge { position: absolute; top: 12px; inset-inline-end: 12px; }

/* ---------------- مقترحات التردد ---------------- */
.change { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.change + .change { margin-top: 10px; }
.change.pending { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.change .fr { font-family: var(--font-head); font-weight: 700; font-size: 17px; direction: ltr; white-space: nowrap; }
.change .fr .arrow { color: var(--faint); margin: 0 6px; font-weight: 400; }
.change .num-id { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-3); font-weight: 700; color: var(--muted); }
.change .meta { color: var(--muted); font-size: 12.5px; grid-column: 2 / -1; }
.change .acts { display: flex; gap: 6px; }
.st-pending { color: var(--warn); } .st-applying { color: var(--accent); } .st-applied { color: var(--up); } .st-rolled_back, .st-failed { color: var(--down); } .st-rejected, .st-expired { color: var(--faint); }
.mode-seg button.on[data-v="auto"] { background: var(--up-bg); color: var(--up); }
.mode-seg button.on[data-v="notify"] { background: var(--warn-bg); color: var(--warn); }
.cmd-box { font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.cmd-box code { background: var(--panel-3); padding: 2px 8px; border-radius: 6px; font-family: inherit; font-weight: 600; white-space: nowrap; }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; padding: 10px; border-radius: 12px; background: var(--panel-2); }
.chat .me, .chat .bot { max-width: 85%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; font-size: 13.5px; }
.chat .me { align-self: flex-start; background: var(--accent); color: var(--accent-ink); }
.chat .bot { align-self: flex-end; background: var(--panel); border: 1px solid var(--line-soft); }
@media (max-width: 900px) { .change { grid-template-columns: 1fr auto; } .change .num-id { display: none; } .change .meta { grid-column: 1 / -1; } .change .acts { grid-column: 1 / -1; } .change .acts .btn { flex: 1; } }
/* مساحة شريط الحالة في وضع التطبيق (آيفون / أندرويد) */
.top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.login-form { padding-top: calc(32px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .top { padding-top: calc(10px + env(safe-area-inset-top, 0px)); } }

@media (max-width: 900px) { .toast { padding: 8px 12px; font-size: 13px; } .toasts { max-height: 40vh; overflow: hidden; } }
@media (max-width: 900px) {
  #olist table, #olist tbody { display: block; }
  #olist tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); }
  #olist td { border: 0; padding: 0; white-space: normal; }
  #olist td:last-child { grid-column: 1 / -1; }
  #olist .seg { width: 100%; } #olist .seg button { flex: 1; }
}

/* ---------------- سويجات Cisco ---------------- */
.faceplate { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; padding: 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); direction: ltr; }
.port { height: 34px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3); color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; display: grid; place-items: center; position: relative; font-variant-numeric: tabular-nums; }
.port::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--unknown); }
.port.up { border-color: color-mix(in srgb, var(--up) 50%, var(--line)); color: var(--text); } .port.up::after { background: var(--up); }
.port.slow { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); color: var(--text); } .port.slow::after { background: var(--warn); }
.port.bad { border-color: var(--down); background: var(--down-bg); color: var(--text); } .port.bad::after { background: var(--down); }
.port.off { opacity: .45; } .port.off::after { background: transparent; border: 1px solid var(--faint); }
.port:hover { border-color: var(--accent); }
.legend .lg-up { background: var(--up); } .legend .lg-slow { background: var(--warn); } .legend .lg-bad { background: var(--down); } .legend .lg-down { background: var(--unknown); } .legend .lg-off { background: var(--faint); opacity: .5; }
.term { direction: ltr; text-align: left; background: #070b18; color: #cfe3ff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 14px 0 0; max-height: 460px; overflow: auto; font: 12.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; }
.term.err { color: var(--down); }
:root[data-theme="light"] .term { background: #0f1630; }
#ciscoCmd { min-height: 96px; }
tr.flash-row td { animation: flash 1.6s ease-out; }
.banner.ok { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.32); }
.banner.ok > svg { color: var(--up); }
.banner.warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.32); }
.banner.warn > svg { color: var(--warn); }
.kind-ico { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kind-ico svg { width: 16px; height: 16px; flex: none; }
.wg-qr { background: #fff; padding: 10px; border-radius: 14px; line-height: 0; }
.wg-qr svg { width: min(300px, 70vw); height: auto; }
/* سيسكو: تحديد المنافذ و VLAN */
.port { grid-template-rows: 1fr auto; padding: 2px 0; height: 40px; }
.port span { line-height: 1; align-self: end; }
.port small { font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--accent); min-height: 10px; align-self: start; margin-top: 3px; }
.port.sel { outline: 2px solid var(--accent); outline-offset: 1px; background: color-mix(in srgb, var(--accent) 22%, var(--panel-3)); color: var(--text); opacity: 1; }
.port.iso { border-style: dashed; border-color: var(--warn); }
.legend .lg-iso { background: transparent; border: 1.5px dashed var(--warn); }
.sel-bar { position: sticky; bottom: 70px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sel-bar > b { margin-inline-end: 6px; }
.dd { position: relative; }
.dd-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.dd-menu[hidden] { display: none; }
.dd-menu button { text-align: start; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13.5px; }
.dd-menu button:hover { background: var(--panel-2); }
tr.row-sel td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.term.cfg mark { background: rgba(251,191,36,.35); color: inherit; border-radius: 3px; }
.d-add { color: #6ee7a8; } .d-del { color: #fb8a8a; } .d-gap { color: var(--faint); }
.term .d-add, .term .d-del { display: inline; }
@media (min-width: 900px) { .sel-bar { bottom: 12px; } }
/* ===== خريطة الشبكة ===== */
.map-wrap { position: relative; }
.map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.map-tools .legend { margin-inline-start: auto; }
.netmap { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--line-soft); touch-action: none; cursor: grab;
  background: radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.netmap:active { cursor: grabbing; }
.netmap.inside { cursor: default; max-height: 560px; }
.netmap text { font-family: inherit; text-anchor: middle; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.t-name { font-size: 13px; font-weight: 700; fill: var(--text); } .t-name.sm { font-size: 12px; } .t-sub { font-size: 11px; fill: var(--muted); }
.tnode { cursor: pointer; } .tnode:hover .m-body, .tnode.sel .m-body { stroke: var(--accent); }
.tnode.sel .m-base { fill: color-mix(in srgb, var(--accent) 35%, transparent); }
.m-body { fill: color-mix(in srgb, var(--panel-3) 70%, transparent); stroke: color-mix(in srgb, var(--text) 45%, transparent); stroke-width: 1.6; }
.m-lattice { stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 1; fill: none; }
.m-base { fill: rgba(0,0,0,.25); }
.tnode.down .m-body { stroke: var(--down); } .tnode.degraded .m-body, .tnode.warn .m-body { stroke: var(--warn); }
.m-beacon { filter: drop-shadow(0 0 5px currentColor); }
.blink { animation: mblink 1s steps(2) infinite; } @keyframes mblink { 50% { opacity: .15; } }
.e-glass { stroke: color-mix(in srgb, var(--accent) 16%, transparent); stroke-linecap: round; }
.e-core { stroke: color-mix(in srgb, var(--accent) 38%, var(--panel-3)); stroke-linecap: round; opacity: .55; }
.edge.down .e-core { stroke: var(--down); opacity: .7; } .edge.down .e-glass { stroke: color-mix(in srgb, var(--down) 18%, transparent); }
.edge.warn .e-core { stroke: var(--warn); }
.e-flow, .c-flow { stroke: #bdf3ff; stroke-dasharray: 3 14; stroke-linecap: round; fill: none; animation: mflow 2s linear infinite; filter: drop-shadow(0 0 3px #4cc3ff); }
.e-flow.back { stroke: #a5ffd6; opacity: .7; filter: drop-shadow(0 0 3px #34d399); }
@keyframes mflow { to { stroke-dashoffset: -34; } }
.edge:hover .e-glass { stroke: color-mix(in srgb, var(--accent) 35%, transparent); }
.e-lbl { font-size: 11px; fill: var(--muted); }
.dish .d-face, .idev .d-face { fill: color-mix(in srgb, #dfe7f5 85%, transparent); stroke: #8fa3c4; stroke-width: 1; }
.dish .d-feed { stroke: #8fa3c4; stroke-width: 1.4; }
.dish.down .d-face { stroke: var(--down); }
.map-tip { position: absolute; z-index: 10; width: 260px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.35); font-size: 13px; pointer-events: none; }
.map-tip hr { border: 0; border-top: 1px solid var(--line-soft); margin: 6px 0; }
.idev { cursor: pointer; } .idev:hover .i-box { stroke: var(--accent); }
.i-box { fill: color-mix(in srgb, var(--panel-3) 85%, transparent); stroke: color-mix(in srgb, var(--text) 40%, transparent); }
.i-fins { stroke: color-mix(in srgb, var(--text) 25%, transparent); }
.i-hub { fill: var(--panel-3); stroke: var(--muted); }
.c-glass { stroke: color-mix(in srgb, var(--accent) 14%, transparent); stroke-width: 9; fill: none; }
.c-core { stroke: color-mix(in srgb, var(--accent) 35%, var(--panel-3)); stroke-width: 3; fill: none; opacity: .6; }
.cable.down .c-core { stroke: var(--down); } .c-flow { stroke-width: 2.4; }
.sw-body { fill: #1b2540; stroke: #3b4a72; } :root[data-theme="light"] .sw-body { fill: #2a3556; }
.sw-top { fill: #26345a; }
.iswitch .t-name { text-anchor: start; }
.sw-port { cursor: pointer; } .sw-port rect { fill: #0c1222; stroke: #4a5a84; }
.sw-port .led { fill: #4a5a84; } .sw-port.up .led { fill: var(--up); } .sw-port.slow .led { fill: var(--warn); } .sw-port.bad .led { fill: var(--down); }
.sw-port.up .led, .sw-port.slow .led { animation: mled .9s steps(2) infinite; } @keyframes mled { 50% { opacity: .45; } }
.sw-port.off rect { opacity: .45; } .sw-port:hover rect { stroke: var(--accent); }
@media (prefers-reduced-motion: reduce) { .e-flow, .c-flow, .sw-port .led, .blink { animation: none; } }
.t td > span > svg { width: 18px; height: 18px; vertical-align: -4px; }
/* الدخول المؤقت */
.ip-open { border: 1px solid var(--line); background: var(--panel-2); color: var(--accent); border-radius: 6px; font-size: 11px; line-height: 1; padding: 2px 5px; cursor: pointer; margin-inline-start: 4px; }
.ip-open:hover { background: var(--accent); color: #06121f; }
.ra-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ra-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; }
.ra-opt:hover { border-color: var(--accent); }
.ra-opt svg { width: 26px; height: 26px; color: var(--accent); }
.ra-card { margin-top: 14px; padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); text-align: center; }
.btn.big { padding: 12px 22px; font-size: 16px; }
.ra-addr { font-size: 20px; font-weight: 700; margin: 8px 0; }
.ra-timer { display: flex; justify-content: center; gap: 8px; align-items: baseline; margin: 14px 0 8px; color: var(--muted); }
.ra-timer b { font-size: 26px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ================= VIP: الهيدر ================= */
.top-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; direction: ltr; }
.top-chip svg { width: 17px; height: 17px; color: var(--accent); }
.top-bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-soft); color: var(--muted); }
.top-bell svg { width: 20px; height: 20px; }
.top-bell .badge.count { position: absolute; top: -6px; inset-inline-start: -6px; background: var(--down); color: #fff; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; display: grid; place-items: center; border-radius: 10px; }
.top-user { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-soft); }
.top-user .avatar { width: 34px; height: 34px; }
.top-user b { display: block; font-size: 13.5px; line-height: 1.2; }
.top-user small { color: var(--muted); font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; }
.top-user small .dot { width: 7px; height: 7px; }

/* ================= VIP: لوحة القيادة ================= */
.vip-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.vip-side { display: grid; gap: 16px; }
.vip-row { display: grid; grid-template-columns: 1.25fr 1.15fr 1fr 0.9fr; gap: 16px; margin-top: 16px; align-items: stretch; }
@media (max-width: 1400px) { .vip-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) { .vip-grid { grid-template-columns: 1fr; } .vip-side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .vip-row, .vip-side { grid-template-columns: 1fr; } }
.panel.hero { padding-bottom: 8px; background:
  radial-gradient(700px 260px at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
  linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--panel)), var(--panel)); }
.panel.hero header h2 { display: flex; align-items: center; gap: 8px; } .panel.hero header h2 svg { width: 20px; height: 20px; color: var(--accent); }
.ok-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; background: var(--up-bg); color: var(--up); border: 1px solid color-mix(in srgb, var(--up) 35%, transparent); }
.ok-pill svg { width: 15px; height: 15px; } .ok-pill.bad { background: var(--down-bg); color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.hero-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.hero-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 13px; }
.hero-tabs button.on { background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.hero-tabs .dot { width: 8px; height: 8px; }
.hero-svg { width: 100%; height: auto; display: block; }
.hero-svg text { fill: var(--text); font-family: var(--font); text-anchor: middle; }
.hero-svg .h-lbl { font-size: 14px; font-weight: 700; }
.hero-svg .h-sub { font-size: 11.5px; fill: var(--muted); }
.h-panel { fill: url(#gPanel); stroke: color-mix(in srgb, var(--accent) 25%, #9fb0cc); stroke-width: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.h-stand, .h-mast { stroke: #9aa8c3; stroke-width: 3; fill: none; stroke-linecap: round; }
.h-mast { stroke: color-mix(in srgb, var(--muted) 70%, transparent); stroke-width: 2; }
.h-waves { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke: var(--faint); opacity: .5; }
.h-waves.on { stroke: var(--up); opacity: 1; animation: wave 1.8s ease-in-out infinite; }
.h-sec.down .h-waves, .h-dish.down .h-waves { stroke: var(--down); }
.h-sec.warn .h-waves.on { stroke: var(--warn); }
@keyframes wave { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.h-beam { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 7; opacity: .6; animation: dash 1.2s linear infinite; }
.h-feed, .h-arrow { stroke: var(--accent); stroke-width: 2; fill: none; opacity: .75; }
.h-arrow { marker-end: none; stroke-dasharray: 4 5; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.h-recv rect { fill: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); stroke: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.sw-chassis { fill: url(#gChassis); stroke: #3b4760; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
:root[data-theme="light"] .sw-chassis { stroke: #8a97b3; }
.sw-lip { fill: #39445e; }
.sw-brand { fill: #dfe7f7 !important; font-size: 15px; font-weight: 800; font-style: italic; text-anchor: start !important; letter-spacing: .3px; }
.sw-sfp { fill: #0b0f18; stroke: #556180; }
.h-port rect:first-child { fill: #0d121c; stroke: #4b5672; }
.h-port .led { fill: #3a4256; }
.h-port.up .led { fill: #2bd4a4; } .h-port.slow .led { fill: #f6b73c; } .h-port.bad .led { fill: #ff5c6c; }
.h-port.busy .led { animation: blink .9s steps(2) infinite; }
.h-port[data-port] { cursor: pointer; } .h-port[data-port]:hover rect:first-child { stroke: var(--accent); }
@keyframes blink { 50% { opacity: .35; } }
.h-chip rect { fill: var(--panel-2); stroke: var(--line); }
.h-cable .c-glass { stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: 9; fill: none; stroke-linecap: round; }
.h-cable .c-core { stroke: color-mix(in srgb, var(--accent) 75%, #ffffff); stroke-width: 2.2; fill: none; }
.h-cable .c-flow { stroke: #ffffff; stroke-width: 3; fill: none; stroke-dasharray: 2 16; stroke-linecap: round; animation: flow linear infinite; filter: drop-shadow(0 0 4px var(--accent)); }
.h-cable.down .c-core { stroke: var(--down); } .h-cable.down .c-glass { stroke: var(--down-bg); }
@keyframes flow { to { stroke-dashoffset: -36; } }
.h-sec, .h-dish, .h-switch { cursor: pointer; }
.h-card { box-sizing: border-box; height: 74px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); padding: 7px 6px; text-align: center; display: flex; flex-direction: column; gap: 1px; font-family: var(--font); color: var(--text); }
.h-card b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-card span { font-size: 11.5px; color: var(--up); display: inline-flex; gap: 5px; align-items: center; justify-content: center; }
.h-card span i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.h-card.down span, .h-card.unreachable span { color: var(--down); } .h-card.warn span { color: var(--warn); }
.h-card small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.h-card.down { border-color: color-mix(in srgb, var(--down) 50%, transparent); background: var(--down-bg); }
/* الحلقات */
.rings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ring { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.rings.sm .ring svg { width: 70px; height: 70px; }
.r-bg { fill: none; stroke: var(--line); stroke-width: 7; }
.r-fg { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .6s; filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 40%, transparent)); }
.r-in { position: absolute; top: 12px; height: 84px; display: grid; place-items: center; width: 84px; }
.rings.sm .r-in { height: 70px; width: 70px; }
.r-in b { font-size: 17px; font-weight: 700; } .rings.sm .r-in b { font-size: 14px; }
.r-lbl { font-size: 12px; color: var(--muted); text-align: center; }
/* معلومات السويج */
.sw-card { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.sw-mini { width: 74px; height: 26px; border-radius: 4px; background: linear-gradient(#2a3346, #151b28); display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 7px 6px; }
.sw-mini i { background: #2bd4a4; border-radius: 1px; opacity: .85; }
.vip-kv { grid-template-columns: 1fr auto; } .vip-kv dt { display: flex; align-items: center; gap: 4px; } .vip-kv dt svg { width: 14px; height: 14px; }
.vip-kv dd { text-align: left; font-weight: 600; }
/* الأرقام الكبيرة */
.big-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.bn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.bn span { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.bn.up span { background: var(--up-bg); color: var(--up); } .bn.down span { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.bn span svg { width: 20px; height: 20px; } .bn b { font-size: 19px; } .bn small { color: var(--muted); font-size: 12px; }
.t.mini td, .t.mini th { padding: 8px 10px; font-size: 13px; }
.sig { display: inline-flex; gap: 2px; align-items: flex-end; height: 15px; vertical-align: -2px; } .sig i { width: 3px; background: var(--line); border-radius: 1px; } .sig i.on { background: currentColor; }
/* قائمة أجهزة البرج */
.dev-list { display: grid; gap: 6px; max-height: 330px; overflow: auto; }
.dev-li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--text); }
.dev-li:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.dev-li .di { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.dev-li .di.link { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); }
.dev-li .di svg { width: 18px; height: 18px; }
.dev-li .dn { flex: 1; min-width: 0; } .dev-li .dn b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dev-li .dn small { color: var(--muted); font-size: 11.5px; }
/* لمسة زجاجية للوحات */
.panel { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.03); }
:root[data-theme="light"] .panel { box-shadow: 0 10px 30px -18px rgba(30,45,90,.35), inset 0 1px 0 #fff; }
:root[data-theme="light"] .h-card { background: #fff; }
.panel header > svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.hero-svg .h-lbl.sm { font-size: 12.5px; }
.hero-svg .sw-brand { direction: ltr; }
@media (max-width: 760px) { #heroBody { overflow-x: auto; margin: 0 -8px; padding: 0 8px; } .hero-svg { min-width: 760px; } }