@font-face {
  font-family: Vazirmatn;
  src: url('/vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: Vazirmatn, Tahoma, sans-serif;
  font-size: 14px;
  color-scheme: light;
  --canvas: #edf2f9;
  --canvas-top: #f5f8fc;
  --surface: #fff;
  --soft: #f2f5fa;
  --glass: rgba(247,250,255,.88);
  --floating: rgba(254,255,255,.9);
  --text: #152238;
  --muted: #4e617a;
  --dim: #5a6d84;
  --edge: #dfe7f2;
  --edge-strong: #cdd9e9;
  --accent: #075cdd;
  --accent-hover: #084aae;
  --accent-soft: #e6efff;
  --focus: #075cdd;
  --green: #087758;
  --green-bg: #e3f5ed;
  --amber: #8b4209;
  --amber-bg: #fff0dc;
  --red: #aa2d45;
  --red-bg: #fde9ef;
  --card-shadow: 0 1px 2px #2a45620b, 0 9px 27px #293e6710;
  background: var(--canvas);
  color: var(--text);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101622;
  --canvas-top: #141d2b;
  --surface: #1a2434;
  --soft: #222e3f;
  --glass: rgba(21,29,43,.90);
  --floating: rgba(29,40,57,.91);
  --text: #eff5ff;
  --muted: #b7c5d9;
  --dim: #a8b9ce;
  --edge: #2c3a4e;
  --edge-strong: #3b4e69;
  --accent: #80b7ff;
  --accent-hover: #acd1ff;
  --accent-soft: #233e66;
  --focus: #a5ceff;
  --green: #86e6ba;
  --green-bg: #223f3a;
  --amber: #ffcc91;
  --amber-bg: #423324;
  --red: #ff9fb0;
  --red-bg: #482a3a;
  --card-shadow: 0 1px 2px #0002, 0 9px 27px #0002;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 300px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .61; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
svg { display: inline-block; flex: none; width: 19px; height: 19px; vertical-align: middle; }
h1, h2, p { margin: 0; }

.layout {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 222px minmax(0,1fr);
  align-items: start;
  padding: 14px;
  gap: 13px;
}
.sidebar {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 28px);
  min-height: 400px;
  padding: 18px 12px 12px;
  border: 1px solid var(--edge);
  border-radius: 26px;
  background: var(--floating);
  box-shadow: var(--card-shadow);
  overflow: auto;
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 11px; }
.sidebar-title { padding: 3px 7px 20px; }
.brand-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff45;
  border-radius: 13px;
  background: linear-gradient(150deg,#548cff 2%,#1759db 64%,#1747ae 100%);
  color: #fff;
  box-shadow: 0 6px 15px #1c66e23a, inset 0 1px 0 #ffffff50;
}
.brand-mark svg { width: 23px; height: 23px; }
.brand strong { display: block; font-size: 22px; font-weight: 850; line-height: 1.15; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.sidebar nav, .nav-group { display: grid; }
.sidebar nav { gap: 19px; }
.nav-group { gap: 3px; }
.nav-label { padding: 0 11px 4px; color: var(--dim); font-size: 11px; font-weight: 650; }
.nav-link {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  text-align: start;
  white-space: nowrap;
}
.nav-link:hover { background: var(--soft); color: var(--text); }
.nav-link[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 760; }
.nav-link svg { width: 18px; height: 18px; }
.count { margin-inline-start: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.profile { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px 4px 0; border-top: 1px solid var(--edge); }
.profile-text { min-width: 0; flex: 1; }
.profile-text strong,.profile-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-text strong { font-size: 12px; }
.profile-text small { color: var(--muted); font-size: 11px; }
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-weight: 800; }
.overlay,.tab-bar,.drawer-close,.compact-brand { display: none !important; }

.main { min-width: 0; min-height: calc(100dvh - 28px); background: radial-gradient(ellipse at 70% 0%,var(--canvas-top),transparent 75%); }
.topbar {
  display: flex;
  position: sticky;
  top: 10px;
  z-index: 3;
  min-height: 58px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 17px;
  border: 1px solid var(--edge);
  border-radius: 19px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(135%);
}
.toolbar,.breadcrumbs,.wide-crumb,.actions { display: flex; align-items: center; gap: 8px; }
.breadcrumbs { color: var(--muted); font-size: 12px; }
.wide-crumb strong { color: var(--text); }
.wide-crumb svg,.clock svg { width: 14px; height: 14px; }
.clock { display: inline-flex; align-items: center; gap: 5px; margin-inline: 9px 4px; color: var(--dim); white-space: nowrap; font-size: 11px; }
.demo-badge { padding: 4px 9px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-size: 11px; font-weight: 700; white-space: nowrap; }

.container { max-width: 1430px; margin-inline: auto; padding: 27px clamp(9px,2vw,27px) 34px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 19px; }
.page-heading > div:first-child { min-width: 0; }
.page-heading h1 { color: var(--text); font-size: clamp(25px,3.15vw,40px); font-weight: 850; line-height: 1.23; letter-spacing: -.06em; }
.page-heading p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.page-heading .actions:empty,.card-head .actions:empty { display: none; }
.actions { flex-wrap: wrap; }

.button,.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 39px;
  gap: 7px;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 730;
  line-height: 1.5;
  white-space: nowrap;
  transition: background .16s,color .16s,box-shadow .16s,transform .16s;
}
.button:hover,.icon-btn:hover { background: var(--soft); color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--edge); }
.button:active,.icon-btn:active { transform: scale(.96); }
.button.primary { border-color: #1964e6; color: #fff; background: #1260df; box-shadow: 0 4px 10px #0e61de30; }
.button.primary:hover { background: #084ec3; }
.button.danger { color: #fff; background: #a62742; }
.button.danger:hover { background: #8f1931; }
.button svg,.icon-btn svg { width: 17px; height: 17px; }
.icon-btn { width: 38px; min-height: 38px; padding: 0; background: var(--surface); border-color: var(--edge); }
.icon-btn.plain { border-color: transparent; background: transparent; color: var(--accent); }
.toolbar .icon-btn { background: var(--surface); border-color: var(--edge); }
.card,.stat {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 21px;
  box-shadow: var(--card-shadow);
}
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }
.stat { text-align: start; padding: 13px 14px 11px; }
button.stat { transition: transform .17s,border-color .17s,box-shadow .17s; }
button.stat:hover { transform: translateY(-2px); border-color: var(--edge-strong); box-shadow: 0 10px 21px #293e671c; }
.stat-head { display: flex; align-items: center; gap: 8px; min-height: 34px; color: var(--muted); font-size: 12px; font-weight: 670; }
.stat-head > span:nth-child(2) { flex: 1; }
.stat-arrow { color: var(--dim); margin-inline-start:auto; }
.stat-arrow svg { width: 13px; height: 13px; }
.stat-number { display: block; margin: 6px 0 0; font-size: 31px; font-weight: 810; line-height: 1.25; letter-spacing: -.045em; }
.stat small { color: var(--muted); font-size: 11px; }
.stat small b { color: var(--tone); font-weight: 790; }
.teal { --tint:#e0f5ee; --tone:#087a60; }
.blue { --tint:#e4efff; --tone:#145fdb; }
.violet { --tint:#efe7ff; --tone:#7436ca; }
.amber { --tint:#ffe8ce; --tone:#99500d; }
[data-theme=dark] .teal { --tint:#214b43; --tone:#8be5c8; }
[data-theme=dark] .blue { --tint:#263f68; --tone:#9ecaff; }
[data-theme=dark] .violet { --tint:#41345f; --tone:#d0b1ff; }
[data-theme=dark] .amber { --tint:#4b3826; --tone:#ffca91; }
.square { display: grid; place-items: center; flex: none; width: 37px; height: 37px; border-radius: 11px; background: var(--tint); color: var(--tone); }
.square svg { width: 19px; height: 19px; }
.muted { color: var(--muted); }

.grid { display: grid; grid-template-columns: minmax(0,1.68fr) minmax(265px,1fr); gap: 14px; margin-bottom: 15px; }
.traffic-panel {
  position: relative;
  min-width: 0;
  padding: 16px 17px 13px;
  border: 1px solid #4266a585;
  border-radius: 24px;
  background: radial-gradient(ellipse at 18% 8%,#325eae 0%,transparent 68%),linear-gradient(130deg,#213a76,#14264e 69%);
  color: #f8fbff;
  box-shadow: 0 13px 30px #213a7134;
}
.traffic-heading,.traffic-kpis,.traffic-legend { display: flex; align-items: center; }
.traffic-heading { justify-content: space-between; align-items: start; gap: 8px; }
.traffic-heading h2 { font-size: 17px; font-weight: 780; }
.traffic-heading p { color: #d1dffd; font-size: 11px; }
.segmented { display: inline-flex; align-items: center; flex: none; gap: 3px; border: 1px solid var(--edge); border-radius: 13px; background: var(--soft); padding: 3px; }
.segmented button { min-height: 34px; padding: 4px 9px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 680; white-space: nowrap; }
.segmented button[aria-pressed=true] { color: var(--accent); background: var(--surface); box-shadow: 0 1px 4px #12244622; }
.segmented button:hover { color: var(--accent); }
.traffic-panel .segmented { background: #051b465e; border-color: #aad1ff36; }
.traffic-panel .segmented button { color: #e2eaff; }
.traffic-panel .segmented button[aria-pressed=true] { color: #fff; background: #516d9f; }
.traffic-panel button:focus-visible { outline-color: #d0ecff; }
.traffic-kpis { gap: 8px; align-items: baseline; margin-block: 5px 6px; }
.traffic-kpis strong { font-size: clamp(28px,4vw,44px); font-weight: 780; line-height: 1.08; font-variant-numeric: tabular-nums; }
.traffic-kpis bdi { display: inline-flex; align-items: baseline; gap: 7px; }
.traffic-kpis bdi > span { color: #e1ebff; font-size: 12px; font-weight: 650; }
.plot { display: grid; grid-template-columns: 23px minmax(0,1fr); direction: ltr; gap: 4px; }
.plot-content { min-width: 0; }
.plot-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 130px; padding-block: 4px 1px; color: #c5d5f4; font-size: 10px; line-height: 1; }
.chart { display: block; width: 100%; height: 130px; overflow: visible; }
.chart-grid { stroke: #a8c3f24d; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart-down,.chart-up { fill: none; stroke-linecap: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-down { stroke: #83d7ff; }
.chart-up { stroke: #c7b8ff; }
.plot-labels { display: flex; justify-content: space-between; color: #d1dffd; padding-top: 3px; font-size: 10px; }
.chart-placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; color: #e0ebff; border: 1px dashed #a6c3f478; border-radius: 12px; font-size: 12px; text-align: center; }
.traffic-legend { flex-wrap: wrap; gap: 5px 17px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #b0c8ff45; color: #e4edff; }
.traffic-legend > span { display: flex; align-items: center; gap: 4px; font-size: 11px; white-space: nowrap; }
.traffic-legend svg { width: 14px; height: 14px; color: #83d7ff; }
.traffic-legend > span+span svg { color: #c7b8ff; }
.traffic-legend b { color: #fff; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px 12px; }
.card-head > div { min-width: 0; }
.card-head h2 { font-size: 17px; font-weight: 790; line-height: 1.4; overflow-wrap: anywhere; }
.card-head p { color: var(--muted); font-size: 11px; margin-top: 2px; }
.systems { padding: 0 15px 7px; }
.system-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--edge); min-height: 53px; }
.system-row strong,.system-row small { display: block; }
.system-row strong { font-size: 13px; }
.system-row small { color: var(--muted); font-size: 11px; }
.system-row .square { width: 32px; height: 32px; border-radius: 10px; }
.system-row .square svg { width: 16px; height: 16px; }
.system-row .status { margin-inline-start: auto; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 690; line-height: 1.55; white-space: nowrap; }
.status.green { color: var(--green); background: var(--green-bg); }
.status.red { color: var(--red); background: var(--red-bg); }
.status.yellow { color: var(--amber); background: var(--amber-bg); }
.dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }

.panel-nodes + .panel-nodes { margin-top: 13px; }
.section-identity { display: flex; align-items: center; gap: 10px; }
.node-list { list-style: none; margin: 0 15px; padding: 0 0 4px; }
.node-row { display: grid; grid-template-columns: minmax(116px,1.08fr) minmax(112px,.8fr) minmax(107px,.68fr) auto; align-items: center; gap: 6px; border-top: 1px solid var(--edge); min-height: 59px; }
.node-name { display: block; width: 100%; min-width: 0; padding: 5px 0; border: 0; border-radius: 9px; background: transparent; text-align: start; }
.node-name:hover strong { color: var(--accent); }
.cell-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cell-name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cell-name strong,.cell-name small { display: block; overflow: hidden; text-overflow: ellipsis; }
.cell-name strong { color: var(--text); font-size: 13px; font-weight: 720; white-space: nowrap; }
.cell-name small { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.cell-name .square { width: 33px; height: 33px; }
.cell-name .square svg { width: 16px; height: 16px; }
.node-badges,.node-traffic { display: flex; align-items: center; gap: 5px; }
.node-traffic { color: var(--muted); font-size: 10px; white-space: nowrap; }
.node-traffic > span { display: inline-flex; align-items: center; gap: 1px; }
.node-traffic svg { width: 12px; height: 12px; color: var(--accent); }
.node-actions { justify-self: end; }

.table-wrap { overflow: auto; border-radius: 0 0 20px 20px; }
.table-wrap table { width: 100%; border-collapse: collapse; text-align: right; white-space: nowrap; font-size: 12px; }
.table-wrap th { padding: 9px 13px; color: var(--muted); background: var(--soft); font-size: 11px; font-weight: 670; }
.table-wrap td { padding: 7px 13px; border-top: 1px solid var(--edge); color: var(--muted); }
.table-wrap tr:hover td { background: var(--soft); }
.mono { display: inline-block; color: var(--muted); font-family: ui-monospace, Consolas, monospace; direction: ltr; unicode-bidi: isolate; font-size: 11px; overflow-wrap: anywhere; }
.empty { padding: 30px 14px; text-align: center; color: var(--muted); font-size: 12px; }
.empty .square { margin: 0 auto 9px; }
.empty strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 14px; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.region-switch button { min-width: 62px; }
.searchbox { display: flex; align-items: center; width: min(248px,100%); min-width: 0; background: var(--surface); border: 1px solid var(--edge); border-radius: 13px; overflow: hidden; }
.searchbox:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.searchbox svg { width: 17px; height: 17px; margin-inline-start: 9px; color: var(--dim); }
.searchbox input.search { min-width: 0; padding: 3px 7px; border: 0; outline: none; box-shadow: none; min-height: 39px; background: transparent; }
.server-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 13px; }
.server-cards > .card { padding: 15px; }
.resource-head,.resource-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.resource-head .cell-name { min-width: 0; }
.resource-head .cell-name .square { width: 39px; height: 39px; }
.resource-head .cell-name strong { font-size: 14px; }
.resource-address { margin: 5px 0 11px; }
.resource-meters { display: grid; gap: 11px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.resource-meter { display: grid; gap: 4px; }
.resource-meter > span,.resource-traffic > div > span { color: var(--muted); font-size: 11px; }
.resource-meter strong { font-size: 16px; }
.resource-meter .meter { height: 5px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.resource-traffic,.tunnel-route { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-block: 13px 8px; padding: 10px; background: var(--soft); border-radius: 13px; }
.resource-traffic > div { display: grid; gap: 2px; }
.resource-traffic svg { width: 13px; height: 13px; color: var(--accent); }
.resource-traffic strong { font-size: 13px; }
.resource-traffic small,.resource-foot small,.tunnel-route small { color: var(--dim); font-size: 11px; }
.resource-foot { min-height: 40px; }
.resource-foot .actions { gap: 2px; }
.resource-foot .icon-btn { width: 35px; min-height: 37px; }
.tunnel-route { align-items: center; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.tunnel-route > span:last-child { text-align: end; }
.tunnel-route small,.tunnel-route strong { display: block; overflow-wrap: anywhere; }
.tunnel-route strong { font-size: 13px; }
.tunnel-route svg { color: var(--accent); }
.details { display: grid; gap: 4px; margin: 12px 0; color: var(--muted); font-size: 12px; }
.details > div { display: flex; justify-content: space-between; align-items: center; gap: 9px; min-height: 25px; }
.details strong { color: var(--text); }
.details .meter { display: block; height: 5px; min-height: 5px; margin-bottom: 3px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; background: #3379ea; border-radius: 999px; }

dialog {
  position: fixed;
  width: min(520px,calc(100vw - 24px));
  max-height: min(88dvh,800px);
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 27px;
  box-shadow: 0 25px 85px #10213a55;
}
dialog[open] { animation: sheet-in .2s ease-out both; }
dialog::backdrop { background: #0612286b; backdrop-filter: blur(5px); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.sheet-grabber { display: none; }
.dialog-head,.dialog-foot { position: sticky; display: flex; align-items: center; gap: 10px; padding: 14px 17px; background: var(--glass); backdrop-filter: blur(14px); z-index: 1; }
.dialog-head { top: 0; border-bottom: 1px solid var(--edge); }
.dialog-head > div { flex: 1; min-width: 0; }
.dialog-head h2 { font-size: 19px; font-weight: 790; line-height: 1.35; overflow-wrap: anywhere; }
.sheet-step { color: var(--accent); font-size: 10px; font-weight: 730; }
.dialog-head .icon-btn { background: var(--soft); color: var(--muted); }
.dialog-foot { bottom: 0; border-top: 1px solid var(--edge); justify-content: end; }
.dialog-body { display: grid; gap: 12px; padding: 16px 17px; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.form-row:empty { display: none; }
.field { display: grid; gap: 4px; color: var(--text); font-size: 12px; font-weight: 660; }
input, select, textarea { width: 100%; min-height: 43px; min-width: 0; padding: 7px 10px; border: 1px solid var(--edge); border-radius: 12px; background: var(--soft); color: var(--text); font-weight: 500; }
input::placeholder,textarea::placeholder { color: var(--dim); }
textarea { resize: vertical; min-height: 70px; }
.form-error { padding: 7px 10px; border-radius: 10px; background: var(--red-bg); color: var(--red); font-size: 12px; }
.host-confirm strong { font-size: 15px; }
.fingerprint { display: flex; justify-content: center; background: var(--soft); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 8px; user-select: all; }
.field-note { color: var(--muted); font-size: 12px; }
.advanced { border: 1px solid var(--edge); border-radius: 12px; padding: 9px 11px; background: var(--soft); color: var(--muted); }
.advanced summary { padding: 3px 0; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 680; }
.form-extra { display: grid; gap: 10px; padding-top: 10px; }
fieldset { min-width: 0; border: 1px solid var(--edge); border-radius: 15px; margin: 0; padding: 0 11px 3px; }
legend { padding: 0 4px; color: var(--muted); font-size: 11px; }
.check-list { display: grid; }
.check-list .toggle + .toggle { border-top: 1px solid var(--edge); }
.toggle { display: flex; position: relative; align-items: center; justify-content: space-between; gap: 8px; min-height: 43px; color: var(--text); font-size: 12px; cursor: pointer; }
.toggle input { position: absolute; inset-inline-end: 0; opacity: 0; width: 41px; height: 27px; min-height: 0; margin: 0; }
.toggle i { display: block; position: relative; flex: none; width: 39px; height: 24px; border-radius: 99px; background: var(--edge-strong); transition: background .16s; pointer-events: none; }
.toggle i::before { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px #233d5a45; transition: transform .16s; }
.toggle input:checked + i { background: #137450; }
.toggle input:checked + i::before { transform: translateX(-15px); }
.toggle input:focus-visible + i { outline: 2px solid var(--focus); outline-offset: 3px; }
.notices { display: grid; gap: 6px; position: fixed; inset-inline-end: 15px; bottom: 17px; z-index: 20; max-width: min(390px,calc(100vw - 30px)); }
.toast { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--edge-strong); border-radius: 14px; background: var(--floating); backdrop-filter: blur(18px); box-shadow: var(--card-shadow); font-size: 13px; }
.toast svg { width: 17px; height: 17px; color: var(--green); }
.toast.error svg { color: var(--red); }
.login { display: grid; place-items: center; min-height: 100dvh; padding: 18px; background: radial-gradient(ellipse at 50% 0%,var(--accent-soft),transparent 70%); }
.login .card { width: min(420px,100%); padding: 24px; }
.login h1 { margin: 17px 0 4px; font-size: 25px; font-weight: 820; }
.login p { color: var(--muted); }
.login form { display: grid; gap: 12px; margin-top: 16px; }
.login form .button { min-height: 44px; }

@media (max-width: 1150px) and (min-width: 901px) {
  .layout { grid-template-columns: 191px minmax(0,1fr); }
  .sidebar { padding-inline: 9px; }
  .stats { gap: 8px; }
  .stat { padding-inline: 10px; }
  .stat-head { gap: 5px; }
  .stat .square { width: 30px; height: 30px; }
  .stat .square svg { width: 16px; height: 16px; }
  .grid { gap: 10px; grid-template-columns: minmax(0,1.58fr) minmax(218px,1fr); }
}
@media (max-width: 900px) {
  .layout { display: block; padding: 0; }
  .main { min-height: 100dvh; }
  .topbar { top: 0; min-height: 55px; border-width: 0 0 1px; border-radius: 0; padding: 5px 14px; }
  .compact-brand { display: flex !important; align-items: center; gap: 7px; color: var(--text); font-size: 16px; font-weight: 820; }
  .compact-brand .brand-mark { width: 31px; height: 31px; border-radius: 9px; }
  .compact-brand .brand-mark svg { width: 17px; height: 17px; }
  .wide-crumb { display: none; }
  .container { padding: 20px 13px calc(88px + env(safe-area-inset-bottom)); }
  .sidebar {
    position: fixed;
    inset-block: 8px calc(73px + env(safe-area-inset-bottom));
    inset-inline-start: 8px;
    width: min(295px,calc(100vw - 24px));
    height: auto;
    min-height: 0;
    backdrop-filter: blur(23px) saturate(125%);
    opacity: 0;
    visibility: hidden;
    transform: translateX(16px);
    transition: opacity .18s,transform .18s;
  }
  .sidebar.open { opacity: 1; visibility: visible; transform: translateX(0); }
  .sidebar-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .drawer-close { display: inline-flex !important; }
  .overlay.open { display: block !important; position: fixed; inset: 0; background: #0c1d3a50; z-index: 4; }
  .tab-bar {
    display: flex !important;
    position: fixed;
    inset-inline: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    max-width: 550px;
    margin-inline: auto;
    justify-content: space-around;
    gap: 2px;
    min-height: 59px;
    padding: 4px;
    background: var(--floating);
    border: 1px solid var(--edge-strong);
    border-radius: 22px;
    backdrop-filter: blur(23px) saturate(145%);
    box-shadow: 0 6px 26px #17356c30,inset 0 1px 0 #ffffff30;
    z-index: 6;
  }
  .tab-bar button { display: grid; flex: 1; min-width: 0; min-height: 48px; align-content: center; justify-items: center; gap: 2px; padding: 2px 4px; border: 0; border-radius: 17px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 650; }
  .tab-bar button[aria-current],.tab-bar button.selected,.tab-bar button[aria-expanded=true] { background: var(--accent-soft); color: var(--accent); font-weight: 780; }
  .tab-bar svg { width: 20px; height: 20px; }
  .notices { bottom: calc(77px + env(safe-area-inset-bottom)); }
}
@media (max-width: 685px) {
  .grid { grid-template-columns: minmax(0,1fr) minmax(178px,.69fr); gap: 10px; }
  .stat { padding: 8px; }
  .stat-head { gap: 5px; font-size: 11px; }
  .stat-head .square { width: 29px; height: 29px; border-radius: 9px; }
  .stat-head .square svg { width: 16px; height: 16px; }
  .stats { gap: 8px; }
  .traffic-panel { padding: 13px 11px 11px; }
  .traffic-panel .segmented button { padding-inline: 5px; }
  .card-head { padding-inline: 12px; }
  .systems { padding-inline: 10px; }
  .system-row { gap: 5px; }
  .system-row .square { width: 26px; height: 26px; border-radius: 8px; }
  .system-row strong { font-size: 12px; }
  .system-row small { font-size: 10px; }
  .system-row .status { font-size: 9px; }
}
@media (max-width: 555px) {
  .grid { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat { padding: 8px 10px; }
  .stat-number { font-size: 26px; }
  .stat-head { font-size: 11.5px; }
  .page-heading h1 { font-size: clamp(23px,6.2vw,32px); }
  .page-heading p { font-size: 11px; }
  .node-list { margin-inline: 11px; }
  .node-row { grid-template-columns: minmax(0,1fr) auto auto; }
  .node-traffic { display: none; }
  .clock { display: none; }
  .card-head .actions { gap: 3px; }
  .system-row .square { width: 31px; height: 31px; }
  .system-row small { font-size: 11px; }
  .system-row .status { font-size: 10px; }
  .table-wrap table,.table-wrap tbody { display: block; white-space: normal; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .table-wrap tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 12px; padding: 11px 12px; border-top: 1px solid var(--edge); }
  .table-wrap td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .table-wrap tbody tr:hover td { background: transparent; }
  .table-wrap td:first-child,.table-wrap td.table-actions { grid-column: 1 / -1; }
  .table-wrap td:not(:first-child):not(.table-actions)::before { display: block; content: attr(data-label); margin-bottom: 2px; font-size: 10px; color: var(--dim); }
  .table-actions { text-align: end; }
  dialog { width: 100%; max-width: 100%; max-height: 89dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .sheet-grabber { display: block; position: sticky; top: 0; width: 33px; height: 4px; margin: 6px auto 0; border-radius: 999px; background: var(--edge-strong); }
  .dialog-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .dialog-foot .button { min-height: 44px; }
  .dialog-body input,.dialog-body select,.dialog-body textarea,.login input { font-size: 16px; }
}
@media (max-width: 390px) {
  .container { padding-inline: 10px; }
  .page-heading { align-items: start; flex-direction: column; gap: 8px; }
  .page-heading .actions { width: 100%; }
  .page-heading .searchbox { width: 100%; }
  .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}