/* AEGIS native Range visual system. Geometry remains owned by the native router. */
:root {
  --aegis-session-height: 0px;
  --aegis-preview-height: 0px;
  --range-actions-height: 52px;
  --range-footer-height: 28px;
  --range-cyan: #27d8ff;
  --range-readable: #eaf2ff;
  --range-muted: #aabbd0;
}
body { font-family: "Century Gothic", "Segoe UI", Arial, sans-serif; }
body .app {
  height: calc(100vh - var(--aegis-preview-height) - var(--aegis-session-height));
  height: calc(100dvh - var(--aegis-preview-height) - var(--aegis-session-height));
  grid-template-rows: var(--hdrh, 56px) auto minmax(0, 1fr);
  min-height: 0;
}
body .app > header {
  padding-right: 196px;
  gap: 12px;
  background: linear-gradient(120deg, #091324 0%, #07111e 55%, #0a1628 100%);
  border-bottom: 1px solid #1e334c;
  box-shadow: 0 4px 24px #0003;
}
body .brand .bt { font-size: 16px; letter-spacing: .1px; }
body .brand .bs { color: #9aafca; font-size: 10px; line-height: 1.7; }
body .cmdgroup { align-items: center; gap: 3px; min-width: 0; }
body #arMore { top: var(--aegis-preview-height) !important; }
body .aegis-profile { top: var(--aegis-preview-height); }
body .aegis-menu { top: calc(var(--aegis-preview-height) + var(--hdrh, 56px) + 8px); }
body .cmd { min-height: 36px; padding: 7px 9px; font-size: 12px; font-weight: 650; }
body #cmdAI { color: #55ddff; background: #07364a; border: 1px solid #15728a; }
body #cmdAI:hover { background: #095269; }
body #arRunDemo {
  color: #041322;
  background: linear-gradient(125deg, #49e0ff, #15baff);
  border: 1px solid #6ce6ff;
  font-weight: 800;
  box-shadow: 0 3px 16px #00b8f526;
}
body .actionrow {
  height: auto;
  min-height: 52px;
  min-width: 0;
  flex-wrap: wrap;
  overflow: visible;
  gap: 8px;
  padding: 7px 12px;
  background: #07111d;
  border-bottom: 1px solid #1a3047;
  box-sizing: border-box;
}
body .arbtn { min-height: 34px; padding: 7px 12px; font-size: 11.5px; color: #c6d5e9; }
body #qtools { gap: 4px; flex-shrink: 0; }
body .actionrow > .arbtn, body .actionrow .dnd-toolbar { flex-shrink: 0; }
body .qt { width: 28px; height: 30px; font-size: 12px; border-radius: 8px; }
body #qtTheme { max-width: 72px; font-size: 11px; }
body .fcsel { min-height: 32px; border-color: #294057; border-radius: 8px; }
body .dnd-toolbar { gap: 3px; }
body .dnd-toolbar.in-row { height: auto; }
body .dnd-toolbar button { min-width: 31px; min-height: 32px; border-radius: 8px; }
body .stagewrap {
  min-height: 0;
  background: radial-gradient(ellipse at 50% 35%, #12304938, transparent 72%), #060d18;
  box-shadow: inset 0 0 60px #0004;
  border-top: 1px solid #1e405520;
  padding-bottom: var(--range-footer-height);
  box-sizing: border-box;
}
body .app.acr-hover .palette,
body .app.acr-hover .inspect {
  top: calc(var(--aegis-preview-height) + var(--hdrh, 56px) + var(--range-actions-height));
  bottom: calc(var(--aegis-session-height) + var(--range-footer-height));
  box-shadow: 0 10px 36px #0007;
}
body .inspect h3, body .palette h3 { color: #b8d2ed; letter-spacing: .07em; }
body .fld input, body .fld select { min-height: 34px; }
body dialog { box-shadow: 0 28px 100px #0009; }
body dialog::backdrop { background: #020914aa; backdrop-filter: blur(5px); }
body button:focus-visible, body select:focus-visible, body textarea:focus-visible,
body input:focus-visible, body [tabindex]:focus-visible {
  outline: 2px solid #73e3ff !important;
  outline-offset: 3px;
}
/* A 3x hover transform moves ports away from their evaluated routes and covers
   nearby devices. Emphasise the stable device footprint instead. */
body #stage .node .nviz,
body #stage .node:hover .nviz,
html.hz-off body #stage .node:hover .nviz {
  transform: none !important;
  transition: none !important;
}
body #stage .node {
  filter: drop-shadow(0 5px 9px #0005);
  outline: none;
}
body #stage .node:hover, body #stage .node:focus-visible,
body #stage .node.sel { filter: drop-shadow(0 0 7px #14bde943); }
html.hz-off body #stage .node:hover:not(.sel):not(:focus-visible) { filter: drop-shadow(0 5px 9px #0005); }
body #stage .node .chassis {
  fill: #101d2f;
  stroke: #30465d !important;
  stroke-width: 1.25;
  rx: 12px;
}
body #stage .node:hover .chassis,
body #stage .node:focus-visible .chassis,
body #stage .node.sel .chassis { stroke: #36daff !important; stroke-width: 1.8; }
html.hz-off body #stage .node:hover:not(.sel):not(:focus-visible) .chassis { stroke: #30465d !important; stroke-width: 1.25; }
body #stage .node .nodesel { fill: #04b8f00a; stroke: #27d8ff; stroke-width: 1.25; }
body #stage .node .ntype {
  font-family: "Segoe UI", Arial, sans-serif;
  fill: #b9cbe0;
  font-size: 10px;
  letter-spacing: .25px;
  font-weight: 650;
}
body #stage .node .nname { fill: #f0f5ff; font-size: 11px; font-weight: 700; }
body #stage .node .ip { fill: #a8bed8; font-size: 10px; font-weight: 500; }
body #stage .node .vbadge { fill: #fff; font-size: 8px; font-weight: 800; }
body #stage .node .port { stroke-width: 1.7; }
body #stage .node .port.avail { opacity: .5; }
body #stage .node:hover .port.avail,
body #stage .node:focus-visible .port.avail { opacity: 1; stroke: #69dfff; }
body #stage .node .port.live { stroke: #21d4fb; fill: #071624; }
body #stage .edge { stroke: #536d86; stroke-width: 1.65; }
body #stage .edgeg:hover .edge { stroke: #66def9; stroke-width: 2.5; filter: none; }
body #stage .edge.selln { stroke: #27d8ff; stroke-width: 2.5; }
body #stage .groupbox { stroke-dasharray: 5 5; stroke-width: 1.2; }
body #stage .grouplbl text { letter-spacing: .25px; }
body #stage .range-device-divider { stroke: #36516b; stroke-width: .65; opacity: .6; pointer-events: none; }
body #stage .range-device-accent { pointer-events: none; }
body #hint {
  max-width: min(620px, calc(100% - 80px));
  padding: 12px 18px;
  border: 1px solid #2b4058;
  border-radius: 12px;
  background: #0d1b2eea;
  line-height: 1.55;
  color: #cad9eb;
  bottom: 38px;
}
body #engDiag { bottom: calc(var(--aegis-session-height) + 6px) !important; }
body #labLine { color: #a7b9ce !important; letter-spacing: .2px !important; }
@media (max-width: 1500px) {
  body .app > header { gap: 6px; padding-right: 186px; }
  body .brand .bt { font-size: 14px; }
  body .cmd { font-size: 11px; padding-inline: 7px; }
  body #demoPick { max-width: 130px; }
  body #fcStyle { max-width: 105px; }
  body #qtools { gap: 3px; }
  body .actionrow { gap: 6px; }
  body .arbtn { padding-inline: 10px; }
}
@media (max-width: 1250px) {
  body .actionrow { align-content: center; }
  body #qtools { margin-left: auto; }
  body .app > header { overflow-x: auto; scrollbar-width: thin; }
  body .brand, body .cmdgroup { flex-shrink: 0; }
}
@media (max-width: 780px) {
  body .actionrow { gap: 4px; padding-inline: 7px; }
  body .arbtn { font-size: 11px; padding-inline: 8px; }
  body .dnd-toolbar.in-row { max-width: 100%; flex-wrap: wrap; padding-left: 0; margin-left: 0; border-left: 0; }
  body #qtools { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  body #hint { max-width: calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) {
  body .app, body .node, body .edge, body .btn,
  body .palette, body .inspect { transition: none !important; }
}

/* Presentation sections do not alter security zones or graph edges. */
.demo-sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:5px 12px}.demo-sections button{font-size:12px;line-height:1.25;text-align:left;padding:6px 8px;color:var(--ink,#e8eef7);background:var(--bg-input,#0b1726);border:1px solid var(--border,#253a55);border-radius:5px;white-space:normal}.demo-sections button[aria-pressed="true"]{border-color:#00b8f5;background:#123044}@media(max-width:800px){.demo-sections{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A section that hosts one of the five presenter demonstrations is marked, not renamed.
   The marker is presentation only: it changes no zone, route, link or card binding. */
.demo-sections button[data-five-demo]{border-color:#3d6f86;box-shadow:inset 3px 0 0 #6fe3fa}
.demo-sections button[data-five-demo][aria-pressed="true"]{border-color:#00b8f5}