/* 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; grid-template-columns: minmax(0,1fr); place-items: center; padding: 16px; animation: fade .15s; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; width: min(720px, 100%); min-width: 0; 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: minmax(0,1fr); }
  .modal > footer { padding: 12px 14px; flex-wrap: wrap; }
  .modal > footer > .sp { display: none; }
  .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); }
/* حمل الكيبل: برتقالي فوق 60%، أحمر فوق 85% من السعة */
.h-cable.hi .c-flow { stroke: #ffd38a; filter: drop-shadow(0 0 5px #f59e0b); } .h-cable.hi .c-core { stroke: color-mix(in srgb, var(--warn) 70%, transparent); }
.h-cable.crit .c-flow { stroke: #ffb4b4; filter: drop-shadow(0 0 6px #ef4444); } .h-cable.crit .c-core { stroke: color-mix(in srgb, var(--down) 75%, transparent); }
.h-feedflow { stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 2 14; stroke-linecap: round; animation: flow linear infinite; filter: drop-shadow(0 0 4px var(--accent)); }
.h-bw { fill: color-mix(in srgb, var(--accent) 12%, var(--panel)); stroke: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.h-bwt { font: 700 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; fill: var(--accent); text-anchor: middle; }
.h-card small.bw { color: var(--accent); font-weight: 700; font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { .h-cable .c-flow, .h-feedflow, .h-arrow { animation: none; } }
@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: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rings .ring { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); min-width: 0; }
.r-wrap { position: relative; width: 84px; height: 84px; flex: none; }
.rings.sm .r-wrap { width: 70px; height: 70px; }
.r-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.r-bg { fill: none; stroke: var(--line); stroke-width: 7; }
.r-fg { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .6s; }
.r-num.ltr { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 700; line-height: 1; white-space: nowrap; }
.rings.sm .r-num { font-size: 14px; }
.r-lbl { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; min-height: 2.8em; width: 100%; overflow-wrap: anywhere; }
/* معلومات السويج */
.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; }
/* Dish wiring fits the viewport; no off-screen receiver on mobile. */
#heroBody { min-width: 0; }
.wiring-svg { overflow: visible; }
.wiring-svg .w-device-name { font-size: 14px; fill: var(--text); }
.wiring-svg .w-radio-line { font-size: 12px; }
.wiring-svg.compact .h-lbl { font-size: 20px; }
.wiring-svg.compact .h-sub, .wiring-svg.compact .w-device-name { font-size: 17px; }
.wiring-svg.compact .w-radio-line { font-size: 13px; }
.wiring-svg.compact .h-bwt { font-size: 13px; }
.wiring-svg.compact .h-card { font-size: 16px; }
.wiring-svg.compact .h-card small { font-size: 13px; }
.wiring-svg .h-card { height: 108px; }
.wiring-svg .h-card .w-sector-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; font-size: 14px; flex-shrink: 0; min-height: 2.5em; }
.wiring-svg.compact .h-card .w-sector-name { font-size: 18px; }
.wiring-svg.compact .h-card span { font-size: 14px; }
.dh-name, .dev-head h2, .dev-head [data-device-label] { overflow-wrap: anywhere; }
a.dh-ip { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.w-dish-art .w-shadow { fill: #101c2b; opacity: .12; }
.w-dish-art .w-mount { stroke: #91a5b8; stroke-width: 5; fill: none; stroke-linecap: round; }
.w-dish-art .w-feed-arm { fill: none; stroke: #91a4b6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.w-dish-art .w-jack { fill: #52788f; stroke: #bbd0df; }
.w-dish-art .w-led { stroke: #fff; stroke-width: 1; }
.w-dish-image { pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .2)); }
.dcard.volt .dc-pill.c-down { color: var(--down); background: var(--down-bg); }
.w-cable.reverse .c-flow { animation-direction: reverse; }
.w-cable .w-direction { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wiring-svg .h-switch.unmonitored .sw-chassis { fill: var(--panel-2); stroke: var(--muted); stroke-dasharray: 6 4; filter: none; }
.wiring-svg .h-switch.unmonitored .sw-brand { fill: var(--muted) !important; }
@media (max-width: 760px) { #heroBody { overflow-x: visible; margin: 0; padding: 0; } .hero-svg { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .wiring-svg .c-flow { animation: none; } }

/* =====================================================================
   1.9.4 — واجهة الموبايل الجديدة: شريط سفلي، الشبكة، المشتركين، الأدوات، الإعدادات
   ===================================================================== */
.view { animation: vin .18s ease-out; }
@keyframes vin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view > .skeleton { animation: sk 1.3s infinite, skin .25s .15s both; }
@keyframes skin { from { opacity: 0; } to { opacity: 1; } }   /* الهيكل المؤقت يظهر بس إذا التحميل طوّل — بدون وميض */

/* ---- بحث وتبويبات ---- */
.net-head { display: grid; gap: 12px; margin-bottom: 14px; }
.msearch { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 0 16px; min-height: 50px; flex: 1; }
.msearch svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.msearch input { flex: 1; background: none; border: 0; outline: 0; font-size: 15px; min-width: 0; padding: 12px 0; }
.msearch:focus-within { border-color: var(--accent); }
.seg3 { display: flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; background: var(--panel); }
.seg3 > a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; color: var(--muted); font-weight: 600; font-size: 13.5px; border-inline-start: 1px solid var(--line); white-space: nowrap; transition: background .15s; }
.seg3 > a:first-child { border-inline-start: 0; }
.seg3 > a svg { width: 16px; height: 16px; }
.seg3 > a small { font-weight: 500; opacity: .7; font-size: 11.5px; }
.seg3 > a.on { background: color-mix(in srgb, var(--up) 22%, var(--panel-2)); color: var(--text); }
.net-sum { font-size: 12.5px; color: var(--muted); padding: 0 4px; }

/* ---- بطاقات الأجهزة ---- */
.nlist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.ncard { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); border-radius: 20px; padding: 14px 14px 14px 8px; cursor: pointer; position: relative; min-height: 118px; transition: border-color .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.ncard:active { transform: scale(.985); }
.ncard:hover { border-color: var(--line); }
.ncard.down, .ncard.unreachable { border-color: color-mix(in srgb, var(--down) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--down) 9%, var(--panel-2)), var(--panel)); }
.ncard.warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.nc-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nc-t { display: flex; align-items: center; gap: 8px; }
.nc-t b { font-size: 18px; font-family: var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-sub { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-ip { color: var(--accent-2); font-size: 14px; font-weight: 600; justify-self: start; }
.nc-meta { color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-art { width: 92px; height: 92px; flex: none; display: grid; place-items: center; }
.nc-art .dev-art { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.nc-art.tower .dev-art { width: 80%; }
.nc-more { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 10px; cursor: pointer; }
.nc-more svg { width: 22px; height: 22px; stroke-width: 3.2; }
.nc-more:hover { background: var(--panel-3); }
.lazy-more { height: 2px; grid-column: 1 / -1; }
.fab { position: fixed; inset-inline-start: 20px; bottom: 26px; width: 60px; height: 60px; border-radius: 20px; border: 0; background: linear-gradient(135deg, #0f766e, #115e59); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); cursor: pointer; z-index: 40; }
.fab svg { width: 28px; height: 28px; }

/* ---- المشتركين ---- */
.ccard { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 18px; padding: 12px 14px; cursor: pointer; transition: transform .1s; }
.ccard:active { transform: scale(.985); }
.ccard.weak { border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.cc-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cc-body .nc-t b { font-size: 15.5px; font-family: var(--font); }
.cc-mac { font-size: 12.5px; justify-self: start; }
.cc-sig { width: 66px; height: 66px; flex: none; border-radius: 16px; display: grid; place-content: center; text-align: center; background: var(--panel-2); border: 1px solid var(--line-soft); }
.cc-sig b { font-size: 21px; line-height: 1.1; } .cc-sig small { font-size: 10.5px; color: var(--muted); }

/* ---- نافذة سفلية (Sheet) ---- */
.sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sheet-head .dev-art { width: 72px; height: 72px; flex: none; }
.sheet-acts { display: grid; gap: 8px; margin-top: 6px; }
.sheet-acts > a, .sheet-acts > button { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--text); font-weight: 600; cursor: pointer; text-align: start; }
.sheet-acts svg { width: 20px; height: 20px; color: var(--accent); }
.sheet-sig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.sheet-sig > div { background: var(--panel-2); border-radius: 14px; padding: 10px; text-align: center; display: grid; }
.sheet-sig b { font-size: 22px; } .sheet-sig small { color: var(--muted); font-size: 11.5px; }
.kv2 { display: grid; gap: 0; margin: 0 0 12px; } .kv2 > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line-soft); font-size: 14px; } .kv2 dt { color: var(--muted); } .kv2 dd { margin: 0; text-align: end; }

/* ---- الأدوات ---- */
.noc-hero { display: flex; align-items: center; gap: 10px; background: radial-gradient(120% 140% at 0% 100%, rgba(76,195,255,.16), transparent 60%), linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 26px; padding: 18px; margin-bottom: 8px; color: var(--text); overflow: hidden; }
.nh-txt { flex: 1; display: grid; gap: 6px; min-width: 0; }
.nh-txt b { font-family: var(--font-head); font-size: 26px; line-height: 1.3; }
.nh-txt > span:not(.nh-btn) { color: var(--muted); font-size: 13.5px; }
.nh-btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 22px; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); font-weight: 600; background: rgba(76,195,255,.06); }
.nh-btn svg { width: 18px; height: 18px; }
.nh-art { width: 190px; flex: none; } .nh-art .noc-art { width: 100%; height: auto; display: block; }
.tsec { font-size: 18px; margin: 22px 4px 12px; }
.tgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ttile { grid-column: span 2; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 132px; padding: 16px 8px 14px; border-radius: 20px; color: var(--text); text-align: center; font-size: 14px; font-weight: 600;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 9%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line-soft)); transition: transform .1s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.ttile:active { transform: scale(.97); }
.ttile:hover { border-color: color-mix(in srgb, var(--tc) 60%, var(--line)); }
.ttile.wide { grid-column: span 3; flex-direction: row-reverse; justify-content: space-between; padding: 16px 22px; min-height: 108px; }
.ttile.red { --tc: var(--down); } .ttile.green { --tc: var(--up); } .ttile.amber { --tc: var(--warn); }
.tt-art { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tc) 18%, transparent), transparent 70%); }
.ttile.wide .tt-art { width: 72px; height: 72px; }
.tool-art { width: 78%; height: 78%; }
.ttile .badge.count { position: absolute; top: 8px; inset-inline-end: 8px; }

/* ---- التشخيص ---- */
.diag-run { display: grid; justify-items: center; gap: 6px; padding: 40px 10px; text-align: center; }
.diag-run .nh-art { width: 220px; }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; transform: scale(.97); } }
.diag-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.diag-top .ring { position: relative; width: 120px; height: 120px; flex: none; }
.diag-top .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.diag-top .ring circle { fill: none; stroke-width: 10; } .diag-top .ring .track { stroke: var(--panel-3); } .diag-top .ring .val { stroke-linecap: round; transition: stroke-dasharray .6s; }
.diag-top .ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .diag-top .ring b { font-size: 34px; line-height: 1; } .diag-top .ring small { color: var(--muted); font-size: 11.5px; }
.diag-sum { display: grid; gap: 8px; flex: 1; min-width: 200px; justify-items: start; } .diag-sum > b { font-size: 18px; font-family: var(--font-head); }
.issues { display: grid; gap: 8px; }
.issue { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-soft); color: var(--text); }
.issue > div { flex: 1; min-width: 0; display: grid; } .issue b { font-size: 14.5px; } .issue small { color: var(--muted); font-size: 12.5px; }
.issue > svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.issue .chip { flex: none; font-size: 11.5px; }
.sev-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--info); }
.issue.critical { border-color: color-mix(in srgb, var(--down) 40%, transparent); } .issue.critical .sev-dot { background: var(--down); box-shadow: 0 0 0 4px var(--down-bg); }
.issue.warning .sev-dot { background: var(--warn); }

/* ---- Ping ---- */
.ping-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ping-form .msearch { min-width: 220px; }
.ping-live { display: grid; justify-items: center; gap: 12px; margin-top: 14px; padding: 26px; }
.radar { width: 90px; height: 90px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); position: relative; overflow: hidden; background: repeating-radial-gradient(circle, transparent 0 14px, rgba(76,195,255,.12) 15px 16px); }
.radar::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(76,195,255,.55), transparent 25%); animation: spin 1.2s linear infinite; border-radius: 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.ping-res { margin-top: 14px; display: grid; gap: 14px; }
.pr-top { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pr-top > div { display: grid; } .pr-top > div > b { font-size: 40px; line-height: 1.1; } .pr-top > div > b small { font-size: 16px; color: var(--muted); }
.pr-kv { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 18px; margin: 0; text-align: center; } .pr-kv dt { color: var(--muted); font-size: 12px; } .pr-kv dd { margin: 0; font-weight: 700; font-size: 16px; }
.pbars { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding: 6px; background: var(--panel-2); border-radius: 12px; }
.pbars i { flex: 1; background: linear-gradient(to top, var(--accent), var(--accent-2)); border-radius: 4px 4px 2px 2px; min-height: 4px; animation: grow .4s ease-out both; }
.pbars i.lost { background: repeating-linear-gradient(45deg, var(--down) 0 4px, transparent 4px 8px); opacity: .7; }
@keyframes grow { from { transform: scaleY(0); transform-origin: bottom; } }

/* ---- المسار ---- */
.tpath { display: grid; gap: 0; }
.tlink { display: block; width: 3px; height: 18px; margin-inline-start: 34px; background: linear-gradient(var(--line), var(--accent)); border-radius: 2px; }
.tnode { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--text); }
.tnode.down, .tnode.unreachable { border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.tnode.break { box-shadow: 0 0 0 2px var(--down), 0 8px 20px -10px var(--down); }
.tnode.hidden { opacity: .8; border-style: dashed; }
.tnode.core { border-style: dashed; opacity: .75; }
.tn-art { width: 54px; height: 54px; flex: none; } .tn-art .dev-art { width: 100%; height: 100%; }
.tn-ic { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--panel-3); color: var(--accent); } .tn-ic svg { width: 26px; height: 26px; }
.tn-b { flex: 1; min-width: 0; display: grid; gap: 3px; } .tn-b > b { display: flex; align-items: center; gap: 7px; } .tn-b > small { color: var(--muted); font-size: 12.5px; }
.tn-b .chips { display: flex; flex-wrap: wrap; gap: 5px; } .tn-b .chip { padding: 1px 8px; font-size: 12px; }
.tn-break { color: var(--down); font-weight: 700; font-size: 13px; }

/* ---- الإعدادات ---- */
.me-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); color: var(--text); }
.me-card > div:nth-child(2) { flex: 1; display: grid; } .me-card b { font-size: 17px; } .me-card small { color: var(--muted); }
.avatar.lg { width: 54px; height: 54px; font-size: 22px; }
.sgroup { display: grid; gap: 10px; }
.srow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line-soft); color: var(--text); cursor: pointer; width: 100%; font: inherit; text-align: start; min-height: 74px; }
.srow > div { flex: 1; min-width: 0; display: grid; gap: 2px; } .srow b { font-size: 15.5px; } .srow small { color: var(--muted); font-size: 12.5px; }
.srow.danger b { color: var(--down); }
.sr-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 14%, var(--panel-2)); }
.sr-ic .tool-art { width: 68%; height: 68%; }
.sr-go { color: var(--faint); display: grid; } .sr-go svg { width: 20px; height: 20px; }
.tog { position: relative; flex: none; width: 58px; height: 34px; }
.tog input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.tog i { position: absolute; inset: 0; border-radius: 99px; background: var(--panel-3); border: 1px solid var(--line); transition: background .2s; }
.tog i::after { content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: inset-inline-end .2s, background .2s; }
.tog input:checked + i { background: color-mix(in srgb, var(--up) 55%, var(--panel-3)); border-color: transparent; }
.tog input:checked + i::after { inset-inline-end: 28px; background: #06302a; }
.tog input:disabled + i { opacity: .45; }
.seg.mini button { padding: 4px 8px; font-size: 12px; }
.input.sm { width: auto; padding: 6px 10px; }

/* ---- الشريط السفلي (موبايل) ---- */
@media (max-width: 900px) {
  .mob-nav { display: block; background: none; border: 0; padding: 0 10px calc(8px + env(safe-area-inset-bottom)); pointer-events: none; }
  .mob-in { pointer-events: auto; display: flex; justify-content: space-around; gap: 2px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 28px; padding: 8px 6px; box-shadow: 0 -8px 30px -12px rgba(0,0,0,.6); }
  .mob-nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); border-radius: 18px; position: relative; -webkit-tap-highlight-color: transparent; }
  .mn-ic { display: grid; place-items: center; width: 52px; height: 34px; border-radius: 16px; transition: background .2s; }
  .mob-nav a svg { width: 23px; height: 23px; }
  .mob-nav a.on { color: var(--text); } .mob-nav a.on .mn-ic { background: color-mix(in srgb, var(--up) 22%, var(--panel-3)); color: var(--up); }
  .mob-nav .badge { position: absolute; top: -2px; inset-inline-end: 6px; font-size: 10px; padding: 0 5px; }
  .page { padding-bottom: 120px; }
  .fab { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .nlist { grid-template-columns: 1fr; }
  .modal-bg:has(.modal.sheet) { place-items: end center; padding: 0; }
  .modal.sheet { width: 100%; border-radius: 26px 26px 0 0; max-height: 86vh; animation: sheetup .22s ease-out; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes sheetup { from { transform: translateY(40px); opacity: .4; } }
  .nh-art { width: 150px; } .nh-txt b { font-size: 22px; }
  .tgrid { gap: 10px; } .ttile { min-height: 118px; font-size: 13px; } .ttile.wide { padding: 14px; min-height: 96px; }
  .ttile.wide .tt-art { width: 60px; height: 60px; }
  .pr-kv { grid-template-columns: repeat(4, 1fr); width: 100%; }
}
@media (max-width: 380px) { .ncard { min-height: 104px; } .nc-art { width: 74px; height: 74px; } .nc-t b { font-size: 16px; } .ttile span { font-size: 12px; } .nh-art { display: none; } }

/* ---- صفحة الجهاز: بطاقات ---- */
#devStats { display: grid; gap: 12px; margin-bottom: 8px; }
.dhero { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 24px; background: radial-gradient(120% 120% at 100% 0%, rgba(43,212,164,.10), transparent 55%), linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid color-mix(in srgb, var(--up) 30%, var(--line-soft)); }
.dhero.down, .dhero.unreachable { border-color: color-mix(in srgb, var(--down) 50%, transparent); background: radial-gradient(120% 120% at 100% 0%, rgba(255,92,108,.12), transparent 55%), var(--panel); }
.dhero.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.dh-info { flex: 1; min-width: 0; display: grid; gap: 8px; }
.dh-name { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--up); line-height: 1.2; }
.dhero.down .dh-name { color: var(--down); }
.dh-bar { display: grid; gap: 4px; font-size: 13.5px; } .dh-bar > .row span:first-child { color: var(--muted); }
.dh-bar i { display: block; height: 7px; border-radius: 9px; background: var(--panel-3); overflow: hidden; } .dh-bar s { display: block; height: 100%; border-radius: 9px; transition: width .5s; }
.dh-kv { display: flex; justify-content: space-between; font-size: 14px; } .dh-kv span { color: var(--muted); } .dh-kv b { font-size: 17px; }
.dh-art { width: 150px; height: 150px; flex: none; } .dh-art .dev-art { width: 100%; height: 100%; filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); }
.dmini { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dmini .stat { padding: 12px 14px; }
.dcard { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 22px; padding: 16px; display: grid; gap: 12px; }
.dcard > header { display: flex; align-items: center; gap: 10px; } .dcard > header b { font-size: 17px; font-family: var(--font-head); } .dcard > header > svg { width: 20px; height: 20px; color: var(--up); }
.dcard.volt { display: flex; align-items: center; gap: 14px; border-color: color-mix(in srgb, var(--unreach) 35%, var(--line-soft)); background: linear-gradient(135deg, color-mix(in srgb, var(--unreach) 10%, var(--panel)), var(--panel)); }
.dcard.volt > div { flex: 1; display: grid; } .dcard.volt b { font-size: 17px; } .dcard.volt small { color: var(--muted); font-size: 12.5px; }
.dc-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 16%, var(--panel-2)); flex: none; } .dc-ic .tool-art { width: 70%; height: 70%; }
.dc-pill { padding: 8px 16px; border-radius: 14px; background: color-mix(in srgb, var(--unreach) 22%, var(--panel-2)); color: var(--unreach); font-weight: 800; font-size: 20px; }
.dc-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dc-boxes > div { border-radius: 18px; padding: 14px 10px; display: grid; justify-items: center; gap: 2px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.dc-boxes b { font-size: 20px; } .dc-boxes small { color: var(--muted); font-size: 12px; }
.dc-boxes .ok b { color: var(--up); } .dc-boxes .info b { color: var(--accent); } .dc-boxes .bad { border-color: color-mix(in srgb, var(--down) 45%, transparent); } .dc-boxes .bad b { color: var(--down); }
.dc-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 0; }
.dc-kv > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); font-size: 14px; } .dc-kv dt { color: var(--muted); } .dc-kv dd { margin: 0; text-align: end; font-weight: 600; }
.rf3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rf3 > div { display: grid; gap: 4px; } .rf3 small { color: var(--muted); font-size: 12.5px; } .rf3 b { font-size: 26px; line-height: 1.1; } .rf3 em { font-style: normal; font-size: 12px; color: var(--muted); margin-inline-start: 3px; }
.rf3 i { display: block; height: 6px; border-radius: 9px; background: var(--panel-3); overflow: hidden; } .rf3 s { display: block; height: 100%; background: linear-gradient(90deg, var(--up), var(--accent)); border-radius: 9px; }
.rf-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } .rf-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .rf-foot svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .dh-art { width: 112px; height: 112px; } .dh-name { font-size: 22px; }
  .dmini { grid-template-columns: repeat(2, 1fr); }
  .dc-kv { grid-template-columns: 1fr; }
  .rf3 b { font-size: 22px; }
}
.dh-ip { color: var(--accent-2); font-weight: 600; }
@media (max-width: 900px) { .dev-head > div:first-child { display: none; } .dev-head { margin-bottom: 12px; } .dev-head .actions { width: 100%; } }

/* ---- صور الأجهزة الحقيقية ---- */
.dev-ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.dev-ph > .dev-photo { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.dev-ph:not(.err) > svg { display: none; }
.dev-ph.err > .dev-photo { display: none; }
.dh-art { position: relative; }
.dh-cam { position: absolute; bottom: 0; inset-inline-start: 0; width: 34px; height: 34px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.dh-cam svg { width: 17px; height: 17px; } .dh-cam:hover { color: var(--accent); border-color: var(--accent); }
.img-prev { height: 200px; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, var(--panel-3), var(--panel-2)); border-radius: 18px; padding: 12px; }
.img-prev img, .img-prev svg { max-width: 100%; max-height: 176px; width: auto; object-fit: contain; }
.img-prev svg { width: 160px; height: 160px; }
.sheet-head .dev-ph { width: 72px; height: 72px; flex: none; }
/* ---- L2TP ---- */
.l2list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.l2list .ncard { min-height: 104px; cursor: default; }
.l2list .tool-art { width: 100%; height: 100%; }
.rtabs > a { flex-direction: column; gap: 0; line-height: 1.3; padding: 8px 6px; }
.rtabs > a svg { display: none; }
@media (max-width: 900px) { .l2list { grid-template-columns: 1fr; } }

/* ---------------- التحكم بالتنبيهات ---------------- */
.muted-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; }
.muted-tag svg { width: 14px; height: 14px; }
.tgrp + .tgrp { margin-top: 12px; }
.tgrp-h { font-size: 12.5px; font-weight: 700; color: var(--faint); margin: 0 2px 6px; }
.tgrp .checks, #uTypes .checks { max-height: none; }
.radios { display: flex; flex-direction: column; gap: 8px; }
.radio { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-2); cursor: pointer; font-size: 14px; }
.radio:has(input:checked) { border-color: var(--accent); background: rgba(76,195,255,.1); }
.radio input { accent-color: var(--accent); margin: 0; }
.mute-list { display: flex; flex-direction: column; }
.mute-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.mute-row:last-child { border-bottom: 0; }
.mute-row .mi { color: var(--warn); display: grid; } .mute-row .mi svg { width: 18px; height: 18px; }
.mute-row .mt { flex: 1; min-width: 0; }
.rules { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.rule { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.rule:last-child { border-bottom: 0; }
.rule .rt { flex: 1 1 220px; min-width: 0; }
.rule .rc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rule.off .rt b { color: var(--faint); text-decoration: line-through; }
.rule.off .rc label:not(:first-child), .rule.off .rsl { opacity: .45; pointer-events: none; }
.switch.sm { font-size: 13px; gap: 7px; } .switch.sm input { width: 34px; height: 19px; } .switch.sm input::after { width: 13px; height: 13px; } .switch.sm input:checked::after { inset-inline-start: 17px; }
.rsl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.input.sm { padding: 5px 8px; font-size: 13px; height: auto; width: auto; min-width: 104px; }
@media (max-width: 640px) { .rule .rc { width: 100%; justify-content: space-between; gap: 8px; } }

/* 1.9.15 — account expiry and measured endpoint spectrum. */
.subscription-card{display:flex;gap:12px;align-items:center;padding:16px;margin-bottom:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:13px}
.subscription-card>svg{flex:0 0 22px;color:var(--accent)}
.subscription-card b{display:block;font-size:14px}.subscription-card small{display:block;color:var(--muted);margin-top:4px}
.subscription-card.soon{border-color:var(--warn)}.subscription-card.soon b{color:var(--warn)}
.subscription-card.compact{padding:9px 16px;margin:8px 24px 0;font-size:12px}.subscription-card.compact b{font-size:13px}
.spectrum-reading{overflow-x:auto}.spectrum-reading svg{display:block;min-width:560px;width:100%}
@media(max-width:700px){.subscription-card.compact{margin:6px 12px 0;padding:8px 12px}#topLogout{padding:7px}.subscription-card.compact small{font-size:11px}}

/* Physical RouterOS ports keep their own negotiated rate and expected capacity. */
.mt-face { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.mt-face .port { width:auto; min-width:0; min-height:62px; padding:6px 9px; }
.mt-face .port span { font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-face .port small { font-size:10px; direction:ltr; }

/* مجسم البرج — هندسة محلية، والبيانات والصلاحيات من صفحة البرج الحالية */
.tower3d-panel { overflow: hidden; }
.tower3d-panel > header { gap: 10px; flex-wrap: wrap; }
.t3d-shell { min-width: 0; }
.t3d-viewport { position: relative; height: 510px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; isolation: isolate; }
.t3d-canvas,.t3d-labels { position: absolute; inset: 0; }
.t3d-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.t3d-canvas canvas.dragging { cursor: grabbing; }
.t3d-labels { pointer-events: none; z-index: 2; direction: ltr; }
.t3d-marker { position: absolute; inset: 0 auto auto 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); padding: 5px 8px; font: 11px var(--font); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto; cursor: pointer; box-shadow: 0 2px 7px #0001; }
.t3d-marker.selected { border-color: var(--accent); color: var(--accent); background: var(--panel-2); }
.t3d-tools { position: absolute; z-index: 3; top: 12px; left: 12px; display: flex; flex-wrap: wrap; max-width: calc(100% - 24px); gap: 5px; }
.t3d-tools .btn { background: var(--panel); min-width: 34px; }
.t3d-tools [aria-pressed=true] { color: var(--accent); border-color: var(--accent); }
.t3d-note { position: absolute; z-index: 2; right: 15px; bottom: 12px; color: var(--muted); background: var(--panel); border-radius: 7px; padding: 5px 9px; font-size: 11px; pointer-events: none; }
.t3d-loading { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; text-align: center; color: var(--muted); background: var(--panel-2); font-size: 13px; padding: 25px; }
.t3d-details { display: grid; grid-template-columns: minmax(170px,240px) minmax(0,1fr) auto; gap: 18px; align-items: center; margin-top: 13px; }
.t3d-picker { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; min-width: 0; }
.t3d-picker select { width: 100%; max-width: 100%; }
.t3d-selected { min-width: 0; font-size: 12px; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.t3d-selected a { display: block; color: var(--text); }
.t3d-key { display: flex; flex-wrap: wrap; justify-content: end; gap: 9px; max-width: 200px; font-size: 11px; color: var(--muted); }
.t3d-key span { display: inline-flex; gap: 5px; align-items: center; }
.t3d-key i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.t3d-key i.up { background: var(--up); }.t3d-key i.down { background: var(--down); }
@media(max-width:900px) { .t3d-details { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }.t3d-key { grid-column: 1/-1; justify-content: start; max-width: none; }.t3d-viewport { height: 450px; } }
@media(max-width:520px) { .t3d-viewport { height: 420px; }.t3d-details { grid-template-columns: minmax(0,1fr); }.t3d-key { grid-column: auto; }.t3d-tools { top: 9px; left: 9px; gap: 4px; max-width: calc(100% - 18px); }.t3d-tools .btn { padding: 6px 9px; min-height: 35px; font-size: 11px; }.t3d-tools [data-camera=fit] span { display: none; }.tower3d-panel > header .muted { font-size: 11px; } }

.panel.hero > header { gap: 8px; flex-wrap: wrap; }
.hero-view-switch { display: inline-flex; gap: 4px; }
.hero-view-switch [aria-pressed=true] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ok-pill.neutral { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
#heroBody .t3d-shell { padding-bottom: 6px; }
#heroBody.t3d-shell .t3d-viewport { height: 460px; }
#heroBody.t3d-shell .t3d-details { grid-template-columns: minmax(140px,200px) minmax(0,1fr); }
#heroBody.t3d-shell .t3d-key { grid-column: 1/-1; max-width: none; justify-content: start; }
@media(max-width:520px) { #heroBody.t3d-shell .t3d-details { grid-template-columns: minmax(0,1fr); } #heroBody.t3d-shell .t3d-viewport { height: 400px; } }