@font-face { font-family: Vazirmatn; src: url(vendor/fonts/Vazirmatn-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url(vendor/fonts/Vazirmatn-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url(vendor/fonts/Vazirmatn-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ================================================================ tokens */
:root {
  color-scheme: dark;
  --bg: #060b17; --bg2: #0a1224;
  --panel: #0e1729; --panel2: #131f36; --panel3: #19284a; --hover: #1a2744; --line: rgba(148,170,210,.13); --line2: rgba(148,170,210,.07);
  --text: #e8eef9; --text2: #b4c1d9; --muted: #8493ae;
  --accent: #5b9bff; --accent2: #22d3ee; --accent-soft: rgba(91,155,255,.14); --accent-glow: rgba(91,155,255,.35);
  --ok: #22c55e; --warn: #f5a524; --down: #ef4444; --unknown: #64748b; --info: #38bdf8;
  /* categorical series (validated dataviz order) */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #2f9e44; --s7: #9085e9; --s8: #e66767;
  --rx: var(--s1); --tx: var(--s2);
  --radius: 16px; --radius-s: 10px;
  --shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 10px 30px -12px rgba(0,0,0,.55);
  --grid: rgba(148,170,210,.10);
  --ease: cubic-bezier(.22,.8,.3,1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f9; --bg2: #e6ecf6;
  --panel: #ffffff; --panel2: #f4f7fc; --panel3: #e9eff9; --hover: #edf2fa; --line: rgba(31,55,100,.12); --line2: rgba(31,55,100,.06);
  --text: #131c30; --text2: #3b4a66; --muted: #66758f;
  --accent: #2563eb; --accent2: #0891b2; --accent-soft: rgba(37,99,235,.09); --accent-glow: rgba(37,99,235,.25);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 26px -14px rgba(16,24,40,.18);
  --grid: rgba(31,55,100,.09);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text); font: 14px/1.65 Vazirmatn, Tahoma, sans-serif; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(900px 500px at 85% -8%, rgba(91,155,255,.10), transparent 60%), radial-gradient(700px 420px at 5% 105%, rgba(34,211,238,.07), transparent 60%);
  background-attachment: fixed;
}
:root[data-theme="light"] body { background-image: radial-gradient(900px 500px at 85% -8%, rgba(37,99,235,.07), transparent 60%); }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent-glow); }
.ltr { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(148,170,210,.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,170,210,.4); background-clip: padding-box; border: 2px solid transparent; }

/* ================================================================ shell */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
aside {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg2) 100%); border-left: 1px solid var(--line); padding: 18px 12px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 4px 8px 18px; }
.brand .logo {
  width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%); display: grid; place-items: center; color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: .5px; box-shadow: 0 6px 20px -4px var(--accent-glow), 0 0 0 1px rgba(255,255,255,.15) inset;
}
.brand b { display: block; font-size: 14.5px; line-height: 1.35; }
.brand small { color: var(--muted); font-size: 11.5px; }
nav { display: grid; gap: 2px; }
nav .grp { font-size: 10.5px; color: var(--muted); letter-spacing: .4px; padding: 14px 12px 5px; opacity: .85; }
nav button {
  position: relative; display: flex; width: 100%; align-items: center; gap: 11px; background: none; border: 0; padding: 8px 12px; border-radius: 11px;
  cursor: pointer; color: var(--muted); text-align: right; transition: background .15s, color .15s;
}
nav button:hover { background: var(--hover); color: var(--text); }
nav button.active { background: linear-gradient(270deg, var(--accent-soft), transparent); color: var(--text); font-weight: 500; }
nav button.active::before { content: ""; position: absolute; right: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
nav button.active svg { color: var(--accent); }
nav button .count { margin-right: auto; background: var(--down); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; line-height: 18px; box-shadow: 0 0 10px rgba(239,68,68,.5); }
nav svg { width: 18px; height: 18px; flex: none; }
.side-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: grid; gap: 8px; }
.side-foot .btns { display: flex; gap: 6px; }
.side-foot button { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; transition: background .15s; }
.side-foot button:hover { background: var(--hover); }

main { padding: 20px 28px 56px; min-width: 0; }
header.top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
header.top h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -.2px; }
header.top .crumb { color: var(--muted); font-size: 12px; margin-top: -2px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.health-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: transform .15s; }
.health-pill:hover { transform: translateY(-1px); }
.health-pill.ok { color: #4ade80; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }
.health-pill.warn { color: #fbbf24; border-color: rgba(245,165,36,.4); background: rgba(245,165,36,.09); }
.health-pill.bad { color: #f87171; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.1); }
:root[data-theme="light"] .health-pill.ok { color: #15803d; } :root[data-theme="light"] .health-pill.warn { color: #b45309; } :root[data-theme="light"] .health-pill.bad { color: #dc2626; }
.clock { color: var(--muted); font-size: 12.5px; text-align: left; line-height: 1.35; }
.clock b { display: block; color: var(--text); font-size: 15px; font-weight: 500; }
.search { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 8px 14px; min-width: 240px; outline: none; transition: border-color .15s, box-shadow .15s; }
.search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#view > * { animation: rise .45s var(--ease) both; }
#view > *:nth-child(2) { animation-delay: .04s; } #view > *:nth-child(3) { animation-delay: .08s; } #view > *:nth-child(4) { animation-delay: .12s; }
#view > *:nth-child(5) { animation-delay: .16s; } #view > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
#view.static > * { animation: none; }

/* ================================================================ cards & grids */
.grid { display: grid; gap: 16px; }
.g-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.g-3c { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mb { margin-bottom: 16px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%), var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; min-width: 0; box-shadow: var(--shadow); position: relative;
}
:root[data-theme="light"] .card { background: var(--panel); }
.card.click { cursor: pointer; transition: border-color .18s, transform .18s var(--ease), box-shadow .18s; }
.card.click:hover { border-color: rgba(91,155,255,.55); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 34px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(91,155,255,.15); }
.card-h { display: flex; align-items: center; gap: 11px; margin: -2px 0 13px; }
.card-h h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.card-h .sub { color: var(--muted); font-size: 12px; font-weight: 400; }
.card-h .end { margin-right: auto; display: flex; gap: 8px; align-items: center; }
.icon-box { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; box-shadow: 0 0 0 1px rgba(91,155,255,.18) inset; }
.icon-box svg { width: 18px; height: 18px; }
.icon-box.ok { background: rgba(34,197,94,.12); color: var(--ok); box-shadow: 0 0 0 1px rgba(34,197,94,.2) inset; }
.icon-box.warn { background: rgba(245,165,36,.12); color: var(--warn); box-shadow: 0 0 0 1px rgba(245,165,36,.25) inset; }
.icon-box.bad { background: rgba(239,68,68,.13); color: var(--down); box-shadow: 0 0 0 1px rgba(239,68,68,.28) inset; }

/* ---------- KPI tiles */
.tile { display: grid; gap: 4px; overflow: hidden; }
.tile .t-top { display: flex; align-items: center; gap: 10px; }
.tile .label { color: var(--muted); font-size: 12.5px; }
.tile .val { font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px; }
.tile .val small { font-size: 13px; color: var(--muted); font-weight: 400; margin-right: 4px; }
.tile .sub { color: var(--muted); font-size: 12px; min-height: 18px; }
.tile .spark { position: absolute; inset: auto 0 0 0; height: 46px; opacity: .9; pointer-events: none; }
.tile .spark svg { width: 100%; height: 100%; display: block; }
.tile.has-spark { padding-bottom: 50px; }
.tile .stack { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--panel2); margin-top: 4px; gap: 2px; }
.tile .stack span { display: block; height: 100%; border-radius: 3px; }
.kpi .label { color: var(--muted); font-size: 12.5px; }
.kpi .val { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 4px 0 6px; }
.kpi .val small { font-size: 13px; color: var(--muted); font-weight: 400; }
.bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--panel2); gap: 2px; }
.bar span { display: block; height: 100%; border-radius: 3px; }

/* ---------- traffic hero */
.traffic { overflow: hidden; }
.traffic::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .55; }
.traffic .nums { display: flex; gap: 26px; margin: 2px 0 4px; }
.traffic .nums div { display: grid; }
.traffic .nums b { font-size: 25px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px; }
.traffic .nums b small { font-size: 12px; font-weight: 400; color: var(--muted); margin-right: 3px; }
.traffic .nums .rx b { color: var(--rx); } .traffic .nums .tx b { color: var(--tx); }
.traffic .nums span { font-size: 11.5px; color: var(--muted); }
.traffic .chart { height: 96px; margin: 6px -6px -4px; }
.traffic .foot { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }

/* ---------- status */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--unknown); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.dot.warning { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,165,36,.18); }
.dot.down { background: var(--down); box-shadow: 0 0 0 3px rgba(239,68,68,.2); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 11px; border-radius: 99px; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); white-space: nowrap; }
.sev { font-size: 11.5px; padding: 1px 10px; border-radius: 99px; font-weight: 500; white-space: nowrap; display: inline-block; }
.sev.critical, .sev.down, .sev.Failed { background: rgba(239,68,68,.15); color: #f87171; }
.sev.warning, .sev.Warning { background: rgba(245,165,36,.15); color: #fbbf24; }
.sev.info, .sev.None { background: rgba(56,189,248,.13); color: #38bdf8; }
.sev.ok, .sev.Success { background: rgba(34,197,94,.14); color: #4ade80; }
:root[data-theme="light"] .sev.critical, :root[data-theme="light"] .sev.Failed { color: #dc2626; }
:root[data-theme="light"] .sev.warning, :root[data-theme="light"] .sev.Warning { color: #b45309; }
:root[data-theme="light"] .sev.ok, :root[data-theme="light"] .sev.Success { color: #15803d; }
:root[data-theme="light"] .sev.info { color: #0369a1; }

/* ---------- tables */
.tbl-wrap { overflow-x: auto; margin: 0 -6px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 11px; border-bottom: 1px solid var(--line2); text-align: right; white-space: nowrap; vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: 12px; position: sticky; top: 0; background: var(--panel); z-index: 1; border-bottom: 1px solid var(--line); }
th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr.click { cursor: pointer; }
tbody tr:hover { background: var(--hover); }
td.wrap { white-space: normal; }
.meter { width: 96px; height: 7px; background: var(--panel3); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 7px; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, #16a34a, var(--ok)); border-radius: 4px; transition: width .6s var(--ease); }
.meter.w span { background: linear-gradient(90deg, #d97706, var(--warn)); } .meter.d span { background: linear-gradient(90deg, #dc2626, var(--down)); }
.meter.b span { background: linear-gradient(90deg, #2563eb, var(--s1)); }

.list { display: grid; gap: 6px; max-height: 380px; overflow-y: auto; padding-left: 2px; }
.list .item { display: flex; gap: 10px; align-items: center; padding: 9px 12px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 11px; cursor: pointer; transition: background .12s, border-color .12s; }
.list .item:hover { background: var(--hover); border-color: var(--line); }
.empty { color: var(--muted); padding: 30px; text-align: center; }
.empty.ok { color: #4ade80; }
.note { background: var(--accent-soft); border: 1px solid rgba(91,155,255,.3); border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.note.warn { background: rgba(245,165,36,.09); border-color: rgba(245,165,36,.35); }
.note.bad { background: rgba(239,68,68,.09); border-color: rgba(239,68,68,.4); }

/* ---------- ring gauges & resource rows */
.ring { --v: 0; --c: var(--ok); width: 64px; height: 64px; position: relative; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring .bg { stroke: var(--panel3); }
.ring .fg { stroke: var(--c); stroke-dasharray: 188.5; stroke-dashoffset: calc(188.5 - 188.5 * var(--v) / 100); transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 5px var(--c)); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring b small { font-size: 9.5px; font-weight: 400; color: var(--muted); display: block; margin-top: -4px; text-align: center; }
.ring.sm { width: 52px; height: 52px; } .ring.sm b { font-size: 12.5px; }
.ring.warn { --c: var(--warn); } .ring.bad { --c: var(--down); }
.rings { display: flex; gap: 14px; justify-content: space-around; margin: 8px 0 4px; }
.rings > div { display: grid; justify-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.res { display: grid; grid-template-columns: 40px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; margin-top: 6px; }
.res .meter { width: 100%; margin: 0; }
.res .v { text-align: left; direction: ltr; }

/* ---------- horizontal bars (top-N lists) */
.hbars { display: grid; gap: 9px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 190px) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.hbar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .tr { height: 9px; background: var(--panel3); border-radius: 6px; overflow: hidden; }
.hbar .tr i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2563eb, var(--s1)); transition: width .6s var(--ease); }
.hbar .vv { color: var(--text2); font-variant-numeric: tabular-nums; direction: ltr; text-align: left; min-width: 74px; }

/* ---------- device schematic */
.device-card .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { display: inline-flex; gap: 6px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 11px; font-size: 12.5px; }
.chip b { font-weight: 500; }
.chip.ok b { color: var(--ok); } .chip.bad b { color: var(--down); } .chip.bad { border-color: rgba(239,68,68,.35); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-svg { background: linear-gradient(180deg, #232d41, #151c2b); border-radius: 13px; padding: 12px 14px; border: 1px solid #323f58; overflow-x: auto; display: flex; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 20px rgba(0,0,0,.25); }
:root[data-theme="light"] .panel-svg { background: linear-gradient(180deg, #3a4559, #29313f); }
.panel-svg svg { display: block; max-width: 100%; height: auto; flex: none; }
.panel-svg .port { cursor: pointer; }
.panel-svg .port:hover rect.body { stroke: #fff; stroke-width: 1.6; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 10px 0 2px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- cameras */
.cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 12px; }
.cam { background: var(--panel2); border: 1px solid var(--line2); border-radius: 13px; padding: 12px 14px; display: grid; gap: 3px; position: relative; overflow: hidden; transition: border-color .15s; }
.cam:hover { border-color: var(--line); }
.cam::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.cam.off::before { background: var(--down); box-shadow: 0 0 12px var(--down); }
.cam .n { font-weight: 700; font-size: 14px; }
.cam .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.rec { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #f87171; }
.rec i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: blink 1.6s infinite; }

/* ---------- topology */
.topo-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0) 0 0 / 22px 22px, var(--panel); }
#topo { height: calc(100vh - 210px); min-height: 560px; }
.topo-tools { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; }
.topo-tools .seg, .topo-tools .btn { backdrop-filter: blur(8px); background: color-mix(in srgb, var(--panel) 82%, transparent); }
.topo-legend { position: absolute; bottom: 12px; right: 12px; z-index: 3; display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted);
  background: color-mix(in srgb, var(--panel) 85%, transparent); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); }
.topo-legend span { display: inline-flex; gap: 6px; align-items: center; }
.topo-legend i { width: 22px; height: 0; border-top: 3px solid; display: inline-block; }

/* ---------- controls */
.toolbar select, .toolbar input[type=text], .toolbar input[type=number] { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; }
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 15px; cursor: pointer; font-size: 13px; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: var(--hover); border-color: rgba(91,155,255,.4); }
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(135deg, #2563eb, #3b82f6); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px var(--accent-glow); }
.btn.danger { color: #f87171; }
.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { background: none; border: 0; padding: 4px 13px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--muted); transition: all .15s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 8px rgba(0,0,0,.3); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* ---------- modal */
.modal { position: fixed; inset: 0; z-index: 50; display: none; }
.modal.open { display: block; }
.modal .backdrop { position: absolute; inset: 0; background: rgba(3,7,15,.65); backdrop-filter: blur(4px); animation: fade .15s; }
.modal .dialog { position: relative; margin: 4vh auto; width: min(960px, calc(100vw - 32px)); max-height: 92vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.55); animation: pop .2s var(--ease); }
.modal .m-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.modal .m-head h2 { margin: 0; font-size: 17px; }
.modal .m-head .sub { color: var(--muted); font-size: 12.5px; }
.modal .m-close { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.modal .m-close:hover { background: var(--down); border-color: var(--down); color: #fff; }
.modal .m-body { padding: 18px 22px 24px; overflow-y: auto; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.chart-box { height: 190px; margin: 6px 0 14px; position: relative; }
.section-t { font-size: 13px; font-weight: 700; margin: 20px 0 9px; color: var(--text2); display: flex; align-items: center; gap: 8px; }
.section-t::after { content: ""; flex: 1; height: 1px; background: var(--line); }
form.edit { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
form.edit label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
form.edit .full { grid-column: 1 / -1; }
form.edit input, form.edit select, form.edit textarea { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; color: var(--text); }
details.edit-box { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
details.edit-box summary { cursor: pointer; color: var(--muted); font-size: 13px; }

/* ---------- file report */
.fname { font-weight: 500; overflow-wrap: anywhere; }
.fpath { font-size: 11px; color: var(--muted); text-align: right; overflow-wrap: anywhere; direction: ltr; unicode-bidi: plaintext; }

/* ---------- physical server */
.hw-wrap { overflow-x: auto; display: flex; justify-content: center; background: var(--panel2); border-radius: 13px; padding: 10px; border: 1px solid var(--line2); }
.hw-svg { max-width: 100%; height: auto; flex: none; }
.hw-part { cursor: pointer; }
.hw-part:hover rect { filter: brightness(1.15); }
.fans { display: flex; gap: 12px; flex-wrap: wrap; }
.fan { display: grid; justify-items: center; gap: 2px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 13px; padding: 10px 14px; font-size: 12px; min-width: 84px; }
.spin { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- security */
.sec-hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.sev-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; }
.sev-bar span { display: block; border-radius: 3px; }
.country { display: inline-flex; gap: 6px; align-items: center; }
.kbd { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; background: var(--panel3); border-radius: 6px; padding: 1px 7px; direction: ltr; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) { .spin, .dot.down, .live i, #view > * { animation: none !important; } .card.click:hover { transform: none; } }
@media (max-width: 1400px) { .g-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .g-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-21 { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .g-2, .g-3c { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  aside { position: static; height: auto; border-left: 0; border-bottom: 1px solid var(--line); }
  nav { grid-template-columns: repeat(2, 1fr); } nav .grp { grid-column: 1 / -1; }
  main { padding: 16px; }
  .g-kpi, .g-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search { min-width: 0; width: 100%; }
  .kv { grid-template-columns: 110px 1fr; }
}
@media (max-width: 520px) { .g-kpi, .g-hero { grid-template-columns: 1fr; } }


/* ---------- topology (boxes + straight right-angle lines) */
.topo-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.topo-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0) 0 0 / 22px 22px, var(--panel);
  padding: 18px; max-height: calc(100vh - 170px); min-height: 520px; cursor: grab; box-shadow: var(--shadow); direction: ltr; }
.topo-scroll.grab { cursor: grabbing; user-select: none; }
.topo-zoom { width: max-content; }
.ln { display: inline-block; width: 22px; border-top: 2px solid var(--tl, #5b6b85); vertical-align: middle; margin-left: 5px; }
.ln.wan { border-color: var(--accent); } .ln.wl { border-top-style: dashed; border-color: var(--s5); }
.tn { direction: rtl; width: 292px; flex: none; background: var(--panel2); border: 1px solid var(--line); border-right: 4px solid var(--unknown); border-radius: 12px; padding: 9px 12px 10px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, opacity .2s; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.tn:hover { border-color: var(--accent); box-shadow: 0 8px 22px -12px rgba(0,0,0,.6); }
.tn.st-ok { border-right-color: var(--ok); } .tn.st-warning { border-right-color: var(--warn); }
.tn.st-down { border-right-color: var(--down); background: color-mix(in srgb, var(--down) 9%, var(--panel2)); }
.tn.big { width: 300px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--panel2)), var(--panel2)); }
.tn-up { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin: -2px 0 6px; padding-bottom: 5px; border-bottom: 1px dashed var(--line); }
.tn-h { display: flex; gap: 10px; align-items: center; }
.tn-t { display: grid; line-height: 1.35; min-width: 0; flex: 1; }
.tn-t b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-t .ltr { font-size: 11px; color: var(--muted); text-align: right; }
.tn-st { align-self: flex-start; margin-top: 3px; }
.tn-m { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text2); margin-top: 5px; }
.tn-m:empty { display: none; }
.tn-tag { font-size: 10.5px; padding: 0 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); display: inline-block; margin-top: 5px; }
.tn-tag.wl { background: color-mix(in srgb, var(--s5) 18%, transparent); color: var(--s5); margin: 0; }
.tn-note { font-size: 10.5px; color: var(--warn); margin-top: 5px; }
.tn-g { font-size: 11px; color: var(--muted); margin: 8px 0 4px; border-top: 1px solid var(--line2); padding-top: 6px; }
.tn-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line2); cursor: pointer; max-width: 100%; }
.cn:hover { border-color: var(--accent); }
.cn .dot { width: 7px; height: 7px; flex: none; }
.cn > span:last-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.cn.st-down { border-color: color-mix(in srgb, var(--down) 55%, var(--line)); background: color-mix(in srgb, var(--down) 10%, var(--panel)); }
.cn.st-warning { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.topo-zoom.searching .tn:not(.hit), .topo-zoom.searching .cn:not(.hit) { opacity: .28; }
.topo-zoom.searching .hit { opacity: 1; outline: 2px solid var(--accent); }

/* ---------- top-down org chart (centered), straight right-angle connectors */
.topo-zoom { margin: 0 auto; }
.ot, .ot ul { --tl: #5b6b85; list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; position: relative; }
:root[data-theme="light"] .ot, :root[data-theme="light"] .ot ul { --tl: #94a3b8; }
.ot ul { padding-top: 32px; }
.ot ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 32px; border-left: 2px solid var(--tl); }
.ot li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 32px 14px 0; }
.ot > li { padding-top: 0; }
.ot li::before, .ot li::after { content: ""; position: absolute; top: 0; width: 50%; height: 32px; border-top: 2px solid var(--tl); }
.ot li::before { right: 50%; } .ot li::after { left: 50%; border-left: 2px solid var(--tl); }
.ot > li::before, .ot > li::after { display: none; }
.ot li:only-child { padding-top: 0; }
.ot li:only-child::before, .ot li:only-child::after { display: none; }
.ot li:first-child::before, .ot li:last-child::after { border: 0 none; }
.ot li:last-child::before { border-right: 2px solid var(--tl); border-radius: 0 8px 0 0; }
.ot li:first-child::after { border-radius: 8px 0 0 0; }
.ot ul.wan::before { border-color: var(--accent); }
.ot ul.wl::before { border-left-style: dashed; border-color: var(--s5); }
.ot li.l-wl::before, .ot li.l-wl::after { border-color: var(--s5); border-top-style: dashed; }
.gbox { border: 1.5px dashed var(--tl, #5b6b85); border-radius: 18px; padding: 10px 14px 16px; background: color-mix(in srgb, var(--panel) 72%, transparent); }
.gt { font-size: 11.5px; color: var(--muted); text-align: center; margin-bottom: 10px; direction: rtl; }
.ggrid { display: grid; gap: 12px; justify-content: center; align-items: start; }

.nrow { display: flex; align-items: flex-start; justify-content: center; }
.cardcol { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.cardcol .drop { flex: 1; width: 0; border-left: 2px solid var(--tl, #5b6b85); }
.side { display: flex; align-items: flex-start; }
.side .sl { flex: none; width: 36px; border-top: 2px solid var(--tl, #5b6b85); margin-top: 47px; }

.topo-scroll { direction: ltr; }
.topo-zoom { direction: rtl; min-width: 100%; display: flex; justify-content: center; }
.topo-zoom > .ot { flex: none; }

/* connector rules assume left-to-right sibling order (first child has no left arm, last none on the right); text inside boxes stays RTL */
.ot, .ot ul, .ot li { direction: ltr; }
.ot .tn, .ot .gbox, .ot .nrow .side .gbox { direction: rtl; }