/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  font-family: monospace;
  user-select: text;
  white-space: pre;
}

.xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: fit-content;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}



/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */

/* xterm.js customization: Override xterm's cursor style */
.xterm .xterm-scrollable-element > .scrollbar {
    cursor: default;
}

/* Arrows */
.xterm .xterm-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.xterm .xterm-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.xterm .xterm-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.xterm .xterm-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.xterm .xterm-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.xterm .xterm-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.xterm .xterm-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
/* NetMapp's typefaces, served from this site (the security policy allows fonts from here only). Both are under the SIL
   Open Font License (fonts/*-OFL.txt). Archivo is one variable file; each family below pins it to one width, so a
   `font:` shorthand (which resets font-stretch) can never change the width a family stands for. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.e3a28eade2.woff2") format("woff2"); font-weight: 100 900; font-stretch: 100%; font-display: swap; }
@font-face { font-family: "Archivo Semi"; src: url("/fonts/archivo.e3a28eade2.woff2") format("woff2"); font-weight: 100 900; font-stretch: 110%; font-display: swap; }
@font-face { font-family: "Archivo Wide"; src: url("/fonts/archivo.e3a28eade2.woff2") format("woff2"); font-weight: 100 900; font-stretch: 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.08949f728d.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-500.01d2854474.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* NetMapp · "Drafting sheet"
   The UI is an engineering drawing of a comms room: a near-black sheet, thin rules, square corners, and one accent,
   copper, used sparingly: the item you are on, the main action, a traced connection. State is always an LED (sage green,
   yellow, red, off), so copper never means "warning". Green is muted to sit with the copper and warm greys. Archivo for reading and headings, in wider cuts for titles and
   numbers; IBM Plex Mono for anything read off equipment: ports, VLANs, addresses, counts, times. */

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0d;
  --panel: #131314;
  --panel-2: #19191b;
  --panel-3: #222224;
  --line: #2b2b2e;
  --line-2: #1f1f21;
  --field: #3e3e43;
  --text: #eceae4;
  --text-2: #b8b5ad;
  --muted: #85827b;
  --accent: #c8733a;
  --on-accent: #150d07;
  --link-slow: #5aa9e6;
  --accent-btn: #c8733a;
  --accent-btn-hover: #d98548;
  --accent-text: #e39a67;
  --accent-soft: rgba(200, 115, 58, .13);
  --ok: #7d9a6a; --ok-text: #a4b994; --ok-soft: rgba(125, 154, 106, .12);
  --warn: #ecc94b; --warn-text: #f2d675; --warn-soft: rgba(236, 201, 75, .12);
  --bad: #ff5d62; --bad-text: #ff8e92; --bad-soft: rgba(255, 93, 98, .12);
  --off: #5e5d59;
  --shadow: 0 18px 50px -20px rgba(0, 0, 0, .85);
  --hover: rgba(255, 255, 255, .04);
  --grid-dot: #29292c;
  --grid-line: rgba(255, 255, 255, .026);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #efede8;
  --panel: #fbfaf7;
  --panel-2: #f4f2ed;
  --panel-3: #e9e6df;
  --line: #d5d1c7;
  --line-2: #e4e1d9;
  --field: #bdb8ac;
  --text: #191816;
  --text-2: #403d37;
  --muted: #6b675f;
  --accent: #a8531d;
  --on-accent: #fff;
  --link-slow: #1d6fc4;
  --accent-btn: #a8531d;
  --accent-btn-hover: #8f4315;
  --accent-text: #8f4315;
  --accent-soft: rgba(168, 83, 29, .1);
  --ok: #6b8c58; --ok-text: #4a6a3a; --ok-soft: #e9eee2;
  --warn: #b8960c; --warn-text: #6f5a05; --warn-soft: #f8f0cf;
  --bad: #d33a40; --bad-text: #9e2328; --bad-soft: #fbe5e6;
  --off: #aaa69c;
  --shadow: 0 18px 44px -22px rgba(30, 25, 15, .4);
  --hover: rgba(25, 24, 22, .04);
  --grid-dot: #d6d2c8;
  --grid-line: rgba(25, 24, 22, .05);
}
:root {
  /* The rail and the cab are dark in both themes (the cab is hardware); these are their copper. */
  --rail: #0a0a0b;
  --rail-line: #1f1f21;
  --cu: #c8733a;
  --cu-hi: #e39a67;
  --display: "Archivo Semi", Bahnschrift, "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --wide: "Archivo Wide", "Archivo Semi", Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif;
  --ui: "Archivo", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  /* Square corners: 2px on controls, 3px on surfaces. */
  --r: 2px;
  --r-lg: 3px;
}
/* Drawn equipment keeps the lettering it was drawn with (DIN and the system face, like rack labels), so no drawing's
   layout depends on the UI's typeface. */
.rack, .unit-thumb, .pick-stage {
  --display: Bahnschrift, "DIN Alternate", "Barlow", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 14px/1.5 var(--ui); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: 0; }
h1 { font: 700 27px/1.15 var(--wide); letter-spacing: -.01em; }
h2 { font-size: 17px; line-height: 1.3; }
h3 { font-size: 15px; }
p { margin: 0; }
kbd { display: inline-block; font: 500 11px/18px var(--mono); min-width: 20px; text-align: center; color: var(--text-2); background: var(--panel-3); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r); padding: 0 5px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; }
.wrap { white-space: normal; word-break: break-word; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; }
.hint { color: var(--muted); font-size: 13px; }
.view-in { animation: viewIn .2s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- LEDs and label tape ---- */
.led { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--off); }
.led.on { background: var(--ok); }
.led.wip { background: var(--warn); }
.led.bad { background: var(--bad); }
.led.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--off); }
.tape { display: inline-block; font: 500 12px/18px var(--mono); padding: 0 6px; color: #15181f; background: #f4f5f0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 0 rgba(0, 0, 0, .25); white-space: nowrap; }
.logo { display: inline-block; flex: none; line-height: 0; }

/* ================= Frame ================= */
/* The side panel is never wider than leaves 560px for the page itself, however it was dragged and whatever the window size. */
.app { --ctx-w: 264px; display: grid; grid-template-columns: 76px min(var(--ctx-w), max(200px, calc(100vw - 76px - 560px))) minmax(0, 1fr); min-height: 100vh; }
/* overflow-y: on a short screen the rail scrolls, so Help and Account can always be reached. */
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 8px 12px; background: var(--rail); border-right: 1px solid var(--rail-line); z-index: 30; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.rail-logo { display: grid; place-items: center; margin-bottom: 14px; }
.rail-btn {
  display: grid; justify-items: center; gap: 5px; padding: 9px 2px 8px; border: 0; border-radius: var(--r); background: none; color: #8c8982;
  font: 500 10.5px/1.2 var(--ui); text-align: center; position: relative;
}
.rail-btn svg { width: 21px; height: 21px; }
.rail-btn:hover { color: #eceae4; background: #19191b; }
.rail-btn[aria-current="page"] { color: #eceae4; background: rgba(200, 115, 58, .13); }
.rail-btn[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 2px; background: var(--cu); }
.rail-btn[aria-current="page"] svg { color: var(--cu-hi); }
.rail-sep { height: 1px; background: var(--rail-line); margin: 8px 10px; }
.rail .grow { flex: 1; }
.app.collapsed { grid-template-columns: 76px 0 minmax(0, 1fr); }
.app.collapsed .ctx { visibility: hidden; overflow: hidden; border: 0; }

.ctx { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); min-width: 0; }
.ctx-title { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 24px 20px 10px; }
.ctx-scroll { flex: 1; overflow: auto; padding: 0 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; }
/* Drag the panel edge to widen it; the width is remembered. */
.ctx-edge { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; z-index: 2; cursor: col-resize; touch-action: none; }
.ctx-edge::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: var(--accent); opacity: 0; transition: opacity .12s; }
.ctx-edge:hover::after, .ctx-edge.drag::after, .ctx-edge:focus-visible::after { opacity: 1; }
.ctx-edge:focus-visible { outline: none; }
.app.resizing { cursor: col-resize; user-select: none; }
.ctx-foot { padding: 12px 20px 16px; border-top: 1px solid var(--line-2); display: grid; gap: 3px; font-size: 12.5px; }
.ctx-foot-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ctx-foot-label svg { width: 14px; height: 14px; }
.ctx-foot b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-foot .row { margin-top: 6px; gap: 6px; }
.ctx-card { margin: 14px 4px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); display: grid; gap: 8px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; margin-bottom: 4px; }
.facts div { display: grid; }
.facts b { font: 700 22px/1.1 var(--wide); font-variant-numeric: tabular-nums; }
.facts span { font: 11px var(--mono); color: var(--muted); }

.stage { min-width: 0; display: flex; flex-direction: column; background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 100%; }
.head { position: relative; padding: 22px 32px 18px; border-bottom: 1px solid var(--line); background: var(--bg); }
/* A short copper rule under the title: the one mark every page shares. */
.head::after { content: ""; position: absolute; left: 32px; bottom: -1px; width: 46px; height: 1px; background: var(--accent); }
.head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The title takes its full width first; the buttons wrap below it rather than cutting the name short. */
.head-title { flex: 1 1 auto; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 14px; }
.head-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-icon { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; flex: none; background: var(--panel); border: 1px solid var(--line); color: var(--text-2); }
.head-icon svg { width: 22px; height: 22px; }
.head-icon.accent { color: var(--accent); background: var(--panel); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.head-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; margin-top: 5px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font: 12px var(--mono); color: var(--muted); margin: 0 0 10px -4px; min-height: 22px; }
.crumbs > span { display: inline-flex; align-items: center; gap: 2px; }
.crumbs svg { opacity: .6; }
.crumbs button { background: none; border: 0; color: inherit; padding: 1px 4px; border-radius: 4px; }
.crumbs button:hover { color: var(--text); background: var(--hover); }
.crumb-text { padding: 1px 4px; }
.crumb-sep { opacity: .6; }
main { display: block; padding: 24px 32px 64px; width: 100%; max-width: 1480px; }

/* ---- workflow stepper ---- */
.steps { display: grid; gap: 14px; }
.step-group { display: grid; gap: 2px; }
.step-group-title { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 4px 12px 4px; }
.step {
  position: relative; display: grid; grid-template-columns: 20px auto 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center;
  text-align: left; border: 0; background: none; border-radius: var(--r); padding: 8px 10px; color: var(--text-2); font: 500 14px var(--ui);
}
/* The step's own icon spans both rows; the label, then a locked step's padlock, then its status below the label. */
.step > svg:first-child { grid-row: 1 / span 2; width: 19px; height: 19px; color: var(--muted); }
.step > svg:not(:first-child) { grid-row: 1; grid-column: 3; justify-self: start; margin-left: -5px; width: 13px; height: 13px; opacity: .6; color: var(--muted); }
.step:hover { background: var(--hover); color: var(--text); }
.step[aria-selected="true"] { background: var(--accent-soft); color: var(--text); }
.step[aria-selected="true"] > svg:first-child { color: var(--accent); }
.step[aria-selected="true"]::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.step-meta { grid-column: 2 / span 2; display: inline-flex; align-items: center; gap: 6px; font: 400 11.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.step-meta .led { width: 6px; height: 6px; box-shadow: none; }
.step-meta.on .led { background: var(--ok); }
.step-meta.wip .led { background: var(--warn); }
.step-meta.bad { color: var(--bad-text); }
.step-meta.bad .led { background: var(--bad); }

/* ================= Controls ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; white-space: nowrap;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); font: 500 14px var(--ui);
  transition: background .12s, border-color .12s;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover:not(:disabled) { background: var(--panel-3); border-color: var(--field); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent-btn); border-color: var(--accent-btn); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent-btn-hover); border-color: var(--accent-btn-hover); }
.btn.danger { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: transparent; }
.btn.danger:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--bad); }
.btn.small { height: 30px; padding: 0 11px; font-size: 13px; border-radius: var(--r); }
.btn.block { width: 100%; justify-content: flex-start; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; }

input:not([type]), input[type="search"], input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea { background: var(--panel-2); border: 1px solid var(--field); border-radius: var(--r); min-width: 0; color: var(--text); }
input:not([type]), input[type="search"], input[type="text"], input[type="number"], input[type="email"], input[type="password"], select { height: 36px; padding: 0 11px; }
select { padding-right: 6px; }
textarea { width: 100%; padding: 11px 13px; font: 12.5px/1.6 var(--mono); resize: vertical; }
input:not([type]):hover, input[type="search"]:hover, input[type="text"]:hover, input[type="number"]:hover, input[type="email"]:hover, input[type="password"]:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--field) 60%, var(--text-2)); }
input:not([type]):focus, input[type="search"]:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled, select:disabled { opacity: .5; }
input.bad, .numfield.bad input { border-color: var(--bad); background: var(--bad-soft); }
input[type="color"] { width: 42px; height: 34px; padding: 3px; border: 1px solid var(--field); border-radius: var(--r); background: var(--panel-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-btn); width: 16px; height: 16px; margin: 0; vertical-align: middle; }
label.field, div.field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
label.field > input, label.field > select, label.field > .numfield { width: 100%; font-weight: 400; }
.field .seg { justify-self: start; }
label.check { display: inline-flex; gap: 9px; align-items: center; color: var(--text-2); }

.numfield { display: inline-flex; align-items: stretch; height: 36px; border: 1px solid var(--field); border-radius: var(--r); background: var(--panel-2); overflow: hidden; }
.numfield:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.numfield input { flex: 1; min-width: 0; width: 40px; height: 100%; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 10px; font: 500 15px var(--display); font-variant-numeric: tabular-nums; }
.numfield .steps { display: flex; gap: 0; border-left: 1px solid var(--field); }
.numfield .steps button { width: 32px; border: 0; background: none; color: var(--text-2); font: 500 17px/1 var(--display); }
.numfield .steps button + button { border-left: 1px solid var(--field); }
.numfield .steps button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-text); }
.numfield .steps button:disabled { opacity: .3; cursor: default; }

.seg { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; flex: none; }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; height: 30px; padding: 0 12px; border-radius: var(--r); color: var(--text-2); white-space: nowrap; font: 500 13.5px var(--ui); }
.seg button:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.seg button:disabled { opacity: .35; cursor: default; }
.seg.tools button { width: 36px; justify-content: center; padding: 0; }
.seg.tools svg { width: 17px; height: 17px; }
.seg-n { font: 11.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }

.search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { flex: 1; border: 0 !important; box-shadow: none !important; background: transparent !important; height: 36px; padding: 0; }
.filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.msg { border-radius: var(--r); padding: 11px 15px; border: 1px solid; }
.msg.error { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad-text); }
.msg.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn-text); }
.msg.info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text); }
.msg.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok-text); }
.cellerr { color: var(--bad-text); font-size: 12.5px; }

.pill { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 500 10.5px/20px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0 7px; border-radius: var(--r); border: 1px solid transparent; white-space: nowrap; }
.pill svg { width: 12px; height: 12px; }
.pill.ok { background: var(--ok-soft); color: var(--ok-text); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.pill.wip { background: var(--warn-soft); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pill.new { background: transparent; color: var(--muted); border-color: var(--line); }
.pill.bad { background: var(--bad-soft); color: var(--bad-text); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
/* ---- To do ---- */
.todo-h { font: 600 14px var(--display); margin: 18px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.todo-edge { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-top: 10px; background: var(--panel-2); display: grid; gap: 8px; }
.todo-edge .probs { margin: 0; }
.todo-config { display: grid; gap: 6px; }
.todo-config pre.out { max-height: none; margin: 0; }
.todo-line { padding: 8px 0; border-top: 1px solid var(--line-2); }
.pill.core { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.badge { display: inline-block; font: 500 10.5px/20px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0 7px; border-radius: var(--r); white-space: nowrap; }
.badge.mapped { background: var(--ok-soft); color: var(--ok-text); }
.badge.pending { background: var(--warn-soft); color: var(--warn-text); }
.badge.unpatched { background: var(--panel-3); color: var(--muted); }
.badge.bad { background: var(--bad-soft); color: var(--bad-text); }
.ok-mark { color: var(--ok-text); font-weight: 500; white-space: nowrap; }
.ok-mark::before { content: "✓ "; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 1px rgba(0, 0, 0, .35); vertical-align: -2px; margin-right: 8px; }
.cat { white-space: nowrap; }
.savestate { display: inline-flex; align-items: center; gap: 7px; font: 12px var(--mono); color: var(--muted); }
.savestate .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.savestate.dirty .dot, .savestate.saving .dot { background: var(--warn); }
.savestate.bad { color: var(--bad-text); }
.savestate.bad .dot { background: var(--bad); }

.bar { height: 4px; background: var(--panel-3); border-radius: 0; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.progress { display: flex; gap: 10px; align-items: center; color: var(--muted); font: 12px var(--mono); font-variant-numeric: tabular-nums; }
.progress .bar { width: 170px; }
.progress .bar > i { background: var(--ok); }

/* ---- surfaces ---- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.card > h2 { margin-bottom: 4px; }
.card .lede { color: var(--muted); margin-bottom: 16px; max-width: 80ch; }
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: "▸"; display: inline-block; width: 16px; color: var(--muted); }
details.card[open] > summary::before { content: "▾"; }
.empty { border: 1px dashed var(--field); border-radius: var(--r-lg); padding: 26px; background: var(--panel); color: var(--muted); display: grid; gap: 12px; justify-items: start; }
.empty h3 { color: var(--text); font-size: 18px; }
.empty p { max-width: 68ch; }
.center { max-width: 600px; margin: 12vh auto; display: grid; gap: 14px; justify-items: start; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow); background-color: var(--panel); }
/* Registration marks in the corners of the frames that sit on top of the page: dialogs, the palette, the sign-in card. */
.modal, .center, .palette, .auth-card {
  --tick: var(--field);
  background-image: linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick));
  background-repeat: no-repeat;
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position: 5px 5px, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) calc(100% - 5px);
}

/* ---- tables ---- */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
td { padding: 8px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
.tablewrap { overflow: auto; max-height: 68vh; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.card .tablewrap { border-radius: var(--r); }
td.empty-cell { color: var(--muted); padding: 26px 14px; text-align: center; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.members th { background: transparent; position: static; padding-left: 8px; }
table.members td { padding: 6px 8px; }

pre.out { background: #09090a; color: #dedbd3; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; overflow: auto; max-height: 60vh; font: 12.5px/1.65 var(--mono); margin: 0; white-space: pre; }
details > summary { cursor: pointer; padding: 4px 0; color: var(--text-2); }
details.issue { border-left: 3px solid; padding: 7px 14px; margin: 8px 0 0; background: var(--panel-2); border-radius: 0 var(--r) var(--r) 0; }
details.issue.error { border-color: var(--bad); }
details.issue.warn { border-color: var(--warn); }
details.issue.info { border-color: var(--accent); }
details.issue ul { margin: 4px 0 8px; padding-left: 20px; font: 12.5px/1.65 var(--mono); color: var(--text-2); }

/* ---- dialogs, palette, toasts ---- */
.modal-bg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 6, .72); }
.modal { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; width: min(540px, 94vw); max-height: 92vh; overflow: auto; display: grid; gap: 16px; box-shadow: var(--shadow); background-color: var(--panel); }
.modal h2 { font-size: 21px; }
.modal > .row:last-child { justify-content: flex-end; padding-top: 4px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 60; max-width: 420px; padding: 12px 16px 12px 16px; border-radius: var(--r); background: #19191b; color: #eceae4; border: 1px solid #3e3e43; box-shadow: var(--shadow), inset 2px 0 0 var(--cu); }
.wizard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.wizard .wide { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); border-radius: var(--r-lg); height: 30px; padding: 0 13px; font-size: 13px; }
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.picklist { display: grid; gap: 2px; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); padding: 4px; background: var(--panel-2); }
.picklist button { display: flex; align-items: center; gap: 9px; text-align: left; background: none; border: 0; border-radius: var(--r); padding: 8px 10px; }
.picklist button:hover:not(:disabled) { background: var(--hover); }
.picklist button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.picklist button:disabled { opacity: .45; cursor: default; }

.palette-bg { place-items: start center; padding-top: 12vh; }
.palette { width: min(640px, 94vw); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; background-color: var(--panel); }
.palette-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; border-bottom: 1px solid var(--line); color: var(--accent); }
.palette-in input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 17px; height: 56px; padding: 0; }
.palette-list { max-height: 52vh; overflow: auto; padding: 6px; }
.palette-group { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 4px; }
.palette-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: none; border-radius: var(--r); padding: 9px 12px; color: var(--text); }
.palette-item[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.palette-hint { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.palette-empty { padding: 18px 14px; color: var(--muted); }
dl.keys { margin: 0; display: grid; gap: 2px; }
dl.keys > div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
dl.keys dt { display: flex; gap: 4px; flex-wrap: wrap; }
dl.keys dd { margin: 0; color: var(--text-2); }

/* ---- setup ---- */
.sw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.sw-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sw-row > .btn { justify-self: end; }
.sw-row > .muted { font-size: 13px; padding-bottom: 8px; }
.stack-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin-top: 12px; background: var(--panel-2); display: grid; gap: 10px; }

/* ================= Locations ================= */
.nav-tree { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.nav-tree .nav-tree { margin-top: 2px; }
.nav-row { position: relative; display: flex; align-items: center; gap: 2px; border-radius: var(--r); }
.nav-row:hover { background: var(--hover); }
.nav-row.on { background: var(--accent-soft); }
.nav-row.on::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.nav-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; text-align: left; background: none; border: 0; padding: 7px 8px; color: var(--text-2); font: 500 14px var(--ui); }
.nav-item svg { color: var(--muted); }
.nav-item:hover { color: var(--text); }
.nav-row.on .nav-item { color: var(--text); }
.nav-row.on .nav-item svg { color: var(--accent); }
.nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item small { font: 500 11px/18px var(--mono); color: var(--muted); background: var(--panel-3); border-radius: var(--r); padding: 0 6px; font-variant-numeric: tabular-nums; }
.nav-item small.all { background: var(--ok-soft); color: var(--ok-text); }
.chev, .chev-space { width: 22px; height: 22px; flex: none; }
.chev { display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 5px; transition: transform .15s ease; }
.chev:hover { color: var(--text); background: var(--hover); }
.chev.open { transform: rotate(90deg); }
.nav-empty { color: var(--muted); font-size: 13px; padding: 6px 10px; }

main.home-main { display: grid; gap: 22px; align-content: start; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 16px 18px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tile b { font: 700 32px/1.05 var(--wide); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tile span { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); }
.tile.ok i { background: var(--ok); }
h2.sec { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ficon { width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; flex: none; background: var(--panel-3); color: var(--text-2); }

.fcard, .lcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .15s; }
.fcard:hover, .lcard:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.fcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; text-align: left; }
.fcard .ficon { width: 44px; height: 44px; border-radius: var(--r-lg); }
.fbody { display: grid; gap: 2px; min-width: 0; }
.fname, .lname { font: 600 17px/1.25 var(--display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmeta, .lstats { font: 12px var(--mono); color: var(--muted); }
.fstate { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.fstate.ok { color: var(--ok-text); font-weight: 600; }
.fcard.done .ficon, .lcard.done .ficon { background: var(--ok-soft); color: var(--ok-text); }
svg.ring { flex: none; }
svg.ring .track { fill: none; stroke: var(--panel-3); stroke-width: 5; }
svg.ring .val { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: butt; transition: stroke-dashoffset .4s ease; }
svg.ring.full .val { stroke: var(--ok); }
svg.ring text { font: 500 11px var(--mono); fill: var(--text-2); }

.lcard { position: relative; display: grid; overflow: hidden; }
.lcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.lcard.done::before { background: var(--ok); }
.lmain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; text-align: left; background: none; border: 0; padding: 16px 18px 14px; }
.lhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lname { flex: 1; }
.lpath { font: 11.5px var(--mono); color: var(--accent-text); }
.lprog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font: 11.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.lcard.done .bar > i { background: var(--ok); }
.lfoot { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lactions { display: flex; border-top: 1px solid var(--line-2); }
.lactions button { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px; height: 38px; background: none; border: 0; color: var(--text-2); font-size: 13px; }
.lactions button + button { border-left: 1px solid var(--line-2); }
.lactions button:hover { background: var(--hover); color: var(--accent-text); }
.lcard.done .lactions button:first-child { color: var(--ok-text); }

/* ================= Materials ================= */
.bom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
table.bom td { padding: 10px 14px; }
table.bom td b { font: 600 15px var(--display); display: block; }
.bom-bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.bom-bar i { display: block; height: 100%; background: var(--accent); }
td.qty { font: 700 22px var(--wide); }
td.where { font-size: 12.5px; max-width: 280px; }
.leadbars { display: grid; gap: 10px; }
.leadbar { display: grid; grid-template-columns: 170px 1fr 120px; gap: 14px; align-items: center; }
.lb-name { display: inline-flex; align-items: center; gap: 9px; font: 500 14px var(--display); }
.lb-name i { width: 26px; height: 10px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.lb-track { position: relative; height: 16px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.lb-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.lb-track > i.need { opacity: .32; }
.lb-n { text-align: right; font-variant-numeric: tabular-nums; }
.lb-n b { font: 700 18px var(--wide); }

/* ================= Network map ================= */
.netmap-wrap { display: grid; gap: 14px; }
.netmap-scroll { overflow: auto; padding: 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--panel); }
.netmap { position: relative; margin: 0 auto; }
svg.runs { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.run { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; transition: opacity .15s, stroke-width .15s; }
.run.secondary { stroke-opacity: .5; }
.run.warn { stroke: var(--warn); }
.run.unset { stroke: var(--off); stroke-dasharray: 5 5; stroke-width: 1.8; stroke-opacity: 1; }
.run.hot { stroke-width: 3.4; }
.run.warn.hot { stroke-width: 3.4; }
.run.dim { opacity: .1; }
.run.live.slow { stroke: var(--link-slow); stroke-width: 1.8; }
.run.live.down { stroke: var(--off); stroke-dasharray: 2 5; stroke-width: 1.8; }
.run.live.slow.hot { stroke-width: 3.4; }
.run.live.warn { stroke: var(--warn); }
.nm-po.fast { background: var(--accent); color: var(--on-accent); }
.nm-po.slow { background: var(--link-slow); color: #fff; }
.nm-po.down { background: var(--off); color: var(--text); }
.live-tag { display: inline-block; white-space: nowrap; font: 500 12px/20px var(--mono); padding: 0 7px; border-radius: 4px; color: #fff; }
.live-tag.fast { background: var(--accent-btn); color: var(--on-accent); }
.live-tag.slow { background: var(--link-slow); }
.live-tag.down { background: var(--off); color: var(--text); }
.nm-head { position: absolute; height: 20px; font: 11px/20px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-node { position: absolute; display: grid; align-content: center; gap: 6px; padding: 8px 12px; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); transition: opacity .15s, border-color .12s, box-shadow .12s; }
.nm-node:hover { border-color: var(--accent); }
.nm-node.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nm-node.dim { opacity: .3; }
.nm-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nm-name { flex: 1; min-width: 0; font: 600 15px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-sub { font: 11.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-po { flex: none; font: 500 11px/18px var(--mono); padding: 0 5px; color: #15181f; background: #f4f5f0; border-radius: 2px; }
.nm-flag { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--warn); color: #1a1205; font: 700 11px var(--ui); }
.nm-prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nm-prog .bar { height: 4px; }
.nm-done { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; color: var(--ok-text); font-weight: 600; }
.nm-node.core { background: #161617; border-color: #5a3a24; color: #eceae4; align-content: start; padding-top: 12px; }
.nm-node.core .nm-sub { color: #98958d; }
.nm-ports { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 2px; }
.nm-ports i { height: 7px; border-radius: 1px; background: #070708; box-shadow: inset 0 0 0 1px #000; }
.nm-ports i.on { background: var(--cu-hi); box-shadow: none; }
.nm-node.external { border-style: dashed; background: transparent; }
.nm-node.missing { border: 1px dashed var(--bad); background: var(--bad-soft); }
.nm-legend { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.nm-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.nm-detail { display: grid; gap: 14px; }
.nm-detail h2 { font-size: 20px; }
.probs { margin: 0; padding-left: 16px; color: var(--warn-text); font-size: 13px; }

/* ================= Cab and hardware (always dark, it is hardware) ================= */
.rack-scroll { overflow-x: auto; padding: 2px 0 8px; }
.rack { --rail: 30px; position: relative; width: max-content; min-width: 1240px; margin: 0 auto; display: grid; gap: 8px; padding: 12px calc(var(--rail) + 4px) 16px; background: #05070a; border-radius: var(--r); box-shadow: inset 0 0 0 1px #000, 0 26px 50px -28px rgba(0, 0, 0, .9); }
.rack::before, .rack::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--rail); background: radial-gradient(circle at 50% 50%, #030405 0 3px, transparent 3.5px) 0 4px / var(--rail) 16px, linear-gradient(90deg, #2c323b, #4c5560 48%, #2c323b); }
.rack::before { left: 0; border-radius: var(--r) 0 0 var(--r); }
.rack::after { right: 0; border-radius: 0 var(--r) var(--r) 0; }
.slot { position: relative; }
.slot-cap { display: flex; align-items: center; gap: 10px; padding: 0 2px 5px; font-size: 12.5px; color: #c4cfdb; }
.slot-cap b { font: 600 13.5px var(--display); color: #f1f5f9; }
.slot-sub { color: #8191a2; }
.grip { cursor: grab; color: #7d8da0; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 3px; user-select: none; }
.grip:hover { color: #fff; background: #1c2531; }
.grip:active { cursor: grabbing; }
.mv { background: transparent; border: 1px solid #2f3b4a; color: #9fb0c3; border-radius: 4px; width: 26px; height: 22px; font-size: 9px; }
.mv:hover:not(:disabled) { background: #1c2531; color: #fff; }
.mv:disabled { opacity: .25; cursor: default; }
.slot-act { background: #21160e; border: 1px solid #5a3a24; color: #f0c3a0; border-radius: 4px; font-size: 12px; height: 22px; padding: 0 9px; }
.slot-act:hover { background: #2e1e12; color: #fff; }
.slot.dragging { opacity: .35; }
.slot.drop-before::before, .slot.drop-after::after { content: ""; position: absolute; left: -8px; right: -8px; height: 3px; z-index: 3; background: var(--cu); border-radius: 2px; box-shadow: 0 0 10px var(--cu); }
.slot.drop-before::before { top: -6px; }
.slot.drop-after::after { bottom: -6px; }

.face { position: relative; display: flex; align-items: stretch; gap: 16px; min-height: 104px; padding: 9px 14px; border-radius: 2px; border-left: 7px solid; border-right: 7px solid; }
.face-left { width: 118px; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.face .series { font: 600 13px var(--display); letter-spacing: .02em; }
.face .model { font: 10px var(--mono); opacity: .7; }
.leds { display: flex; gap: 5px; font-size: 7px; letter-spacing: .02em; opacity: .75; }
.leds span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.leds i { width: 5px; height: 5px; border-radius: 50%; background: #2bb673; }
.face-meta { display: flex; align-items: flex-end; gap: 10px; }
.stackno { font: 700 12px var(--mono); min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; background: #07090b; color: #7cf0a8; box-shadow: inset 0 0 0 1px #000; }
.mgmt { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8px; opacity: .85; }
.face-ports { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.pblocks { display: flex; gap: 10px; }
.pblock { display: flex; gap: 3px; padding: 3px; border-radius: 3px; background: rgba(0, 0, 0, .28); }
.pcol { display: flex; flex-direction: column; gap: 4px; }
.port-gap { display: block; width: 32px; height: 36px; }
.face-up { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-left: 14px; border-left: 1px solid rgba(127, 127, 127, .25); }
.upgroup { display: flex; flex-direction: column; gap: 3px; }
.uprow { display: flex; gap: 4px; padding: 3px; border-radius: 3px; background: rgba(0, 0, 0, .28); }
.group-cap { font: 9.5px var(--mono); opacity: .6; }
.look-c9300 { background: linear-gradient(180deg, #f1f3f5, #cdd2d8); color: #18212b; border-color: #98a0a9; box-shadow: inset 0 1px 0 #fff; }
.look-c9300::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #049fd9; }
.look-c9200 { background: linear-gradient(180deg, #eceef1, #c4c9cf); color: #18212b; border-color: #929aa3; box-shadow: inset 0 1px 0 #fff; }
.look-c9200::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #6cc04a; }
.look-generic { background: linear-gradient(180deg, #e3e6ea, #bfc5cc); color: #18212b; border-color: #8e959e; box-shadow: inset 0 1px 0 #f7f8f9; }
.look-legacy { background: linear-gradient(180deg, #d9dde2, #b7bdc5); color: #1e2833; border-color: #8e959e; box-shadow: inset 0 1px 0 #f3f5f7; }

.port { position: relative; border: 0; padding: 0; font-family: var(--ui); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1; }
.port .pn { font-size: 10.5px; font-weight: 700; }
.port .ps { font: 8.5px var(--mono); letter-spacing: -.3px; white-space: nowrap; max-width: 100%; overflow: hidden; min-height: 9px; }
.port.jack { width: 32px; height: 36px; border-radius: 2px; background: #0c0f13; color: #8c9cae; box-shadow: inset 0 0 0 1px #000, inset 0 4px 7px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .07); }
.port.jack::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 12px; height: 4px; transform: translateX(-50%); background: rgba(0, 0, 0, .5); border-radius: 1px; }
.port.jack.flip::after { bottom: auto; top: 2px; }
.port.sfp { width: 30px; height: 28px; border-radius: 1px; background: #090b0e; color: #8c9cae; box-shadow: inset 0 0 0 2px #77818e, inset 0 0 0 3px #000; }
.port.sfp .pn { font-size: 10px; }
.port.keystone { width: 36px; height: 32px; border-radius: 4px; background: #08090b; color: #6f7f91; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #1d2229, inset 0 5px 9px rgba(0, 0, 0, .85); }
.port.keystone .ps { font-size: 9.5px; font-weight: 600; letter-spacing: -.2px; }
.port.filled { background: var(--fill); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), inset 0 -9px 10px -7px rgba(0, 0, 0, .4); }
.port.sfp.filled { color: var(--ink); box-shadow: inset 0 0 0 2px #77818e, inset 0 0 0 3px #000; }
.port .led { position: absolute; top: 2px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: #262c34; box-shadow: none; }
.port .led.on { background: #3ddc84; box-shadow: 0 0 4px #3ddc84; }
.port.flip .led { top: auto; bottom: 2px; }
.port.keystone.blank { background: repeating-linear-gradient(135deg, #14181d 0 4px, #1f252c 4px 8px); color: #7d8b99; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #262d35; }
.port.keystone.blank .ps { font-size: 13px; font-weight: 700; }
.port.faded { opacity: .42; }
.port.pending { outline: 2px dashed rgba(255, 255, 255, .9); outline-offset: -4px; }
.port.sel { outline: 3px solid #fff; outline-offset: 2px; z-index: 2; box-shadow: 0 0 0 6px var(--cu); }
.port:disabled { cursor: default; opacity: .32; }
.port:hover:not(:disabled) { filter: brightness(1.2); }
.port:focus-visible { outline: 3px solid var(--cu); outline-offset: 2px; }
.panel-face { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 8px 14px; border-radius: 2px; background: linear-gradient(180deg, #2b3036, #181b1f); color: #d9e0e8; border-left: 7px solid #101316; border-right: 7px solid #101316; box-shadow: inset 0 1px 0 #444c56; }
.panel-left { width: 118px; flex: none; display: grid; gap: 2px; }
.panel-face .pp { font: 700 22px var(--display); color: #fff; }
.panel-face .pname { font-size: 12px; color: #9eabb8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-rows { display: flex; flex-direction: column; gap: 10px; }
.prow { display: flex; gap: 14px; }
.kblock { display: flex; gap: 4px; padding: 4px 5px 5px; background: #0d1013; border-radius: 3px; box-shadow: inset 0 0 0 1px #000; }
.kslot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.knum { width: 100%; font: 600 9.5px/12px var(--mono); text-align: center; color: #1b2027; background: #e6e9ec; border-radius: 1px; }

/* ---- fibre panel: black enclosure, LC duplex adapters in cassettes of six ---- */
.fibre-face { background: linear-gradient(180deg, #202328, #0f1114); box-shadow: inset 0 1px 0 #3a4048; }
.fibre-kind { font: 9.5px var(--mono); color: #c7a3f0; }
.cassette { display: flex; gap: 4px; padding: 5px 6px 6px; background: linear-gradient(180deg, #08090b, #121519); border-radius: 3px; box-shadow: inset 0 0 0 1px #000, inset 0 2px 4px rgba(0, 0, 0, .8); }
.port.lc { width: 36px; height: 30px; border-radius: 2px; justify-content: flex-end; padding-bottom: 2px; background: linear-gradient(180deg, #ad7ae2, #7338b4); color: #fbf6ff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .4); }
.port.lc::before { content: ""; position: absolute; top: 4px; left: 50%; width: 20px; height: 9px; transform: translateX(-50%); border-radius: 1px; background: linear-gradient(90deg, #12061f 0 8px, transparent 8px 12px, #12061f 12px 20px); }
.port.lc .ps { font-size: 8.5px; font-weight: 700; }
.port.lc.filled { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), inset 0 -8px 9px -7px rgba(0, 0, 0, .45); }
.port.lc.blank, .port.jack.blank, .port.sfp.blank { background: repeating-linear-gradient(135deg, #14181d 0 4px, #1f252c 4px 8px); color: #7d8b99; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #262d35; }
.port.lc.blank::before { opacity: .35; }
.port.lc.blank .ps, .port.jack.blank .ps, .port.sfp.blank .ps { font-size: 13px; font-weight: 700; }

/* ---- firewalls and ISP routers ---- */
.device-face { position: relative; display: flex; align-items: center; gap: 18px; min-height: 96px; padding: 10px 16px 12px; border-radius: 2px; border-left: 7px solid; border-right: 7px solid; }
.device-left { width: 150px; flex: none; display: grid; gap: 3px; }
.device-face .vendor { font: 700 9px var(--display); letter-spacing: .16em; opacity: .85; }
.dmodel { font: 700 19px/1.1 var(--display); letter-spacing: .01em; }
.dtag { font-size: 11px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-aux { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 3px; background: rgba(0, 0, 0, .22); }
.aux-usb { width: 15px; height: 7px; border-radius: 1px; background: #050607; box-shadow: inset 0 0 0 1.5px #7b838d; }
.aux-micro { width: 10px; height: 5px; border-radius: 2px; background: #050607; box-shadow: inset 0 0 0 1px #7b838d; }
.aux-rj { display: grid; place-items: end center; width: 30px; height: 26px; padding-bottom: 1px; border-radius: 2px; background: #0b0d10; color: #8c96a2; font: 600 5.5px var(--display); letter-spacing: .04em; box-shadow: inset 0 0 0 1px #000, inset 0 4px 7px rgba(0, 0, 0, .75); }
.device-ports { display: flex; align-items: flex-end; gap: 14px; }
.dgroup { display: flex; flex-direction: column; gap: 3px; }
.dblock { display: flex; gap: 4px; padding: 4px 5px 5px; border-radius: 3px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.dblock .pcol { gap: 3px; }
.dslot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vent { flex: 1; align-self: stretch; min-width: 60px; margin: 2px 0 2px 6px; border-radius: 3px; background: radial-gradient(circle, #050607 1.3px, transparent 1.8px) 0 0 / 7px 7px; opacity: .85; }
.look-pan { background: linear-gradient(180deg, #2b2e33, #141619); color: #eceff2; border-color: #0b0c0e; box-shadow: inset 0 1px 0 #40454c; }
.look-pan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #fa582d; }
.look-adva { background: linear-gradient(180deg, #eceef1, #c8cdd3); color: #1a2028; border-color: #959ca5; box-shadow: inset 0 1px 0 #fff; }
.look-adva .vendor { font-size: 13px; letter-spacing: .12em; opacity: 1; }
.look-device { background: linear-gradient(180deg, #3b4047, #22262b); color: #e6e9ec; border-color: #15181b; box-shadow: inset 0 1px 0 #4d535b; }

.toolbar { position: sticky; top: 0; z-index: 12; display: grid; gap: 8px; padding: 14px 16px; background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.toolbar .now { min-width: 180px; font: 600 17px var(--display); }
.toolbar input[type="text"] { width: 250px; height: 40px; font: 15px var(--mono); }
.toolbar .progress { margin-left: auto; }
.leads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.leads-title { font: 600 13px var(--display); letter-spacing: .02em; color: var(--muted); margin-right: 4px; }
.lead { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 8px; border-radius: var(--r-lg); background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.lead i { width: 22px; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.lead b { font: 600 14px var(--display); font-variant-numeric: tabular-nums; }
.lead small { color: var(--muted); }
.lead.done { opacity: .5; }
.lead.done b::after { content: " ✓"; color: var(--ok); }
.lead.total { background: var(--accent-soft); border-color: transparent; padding-left: 12px; }
.uplegend, .legend { display: flex; flex-wrap: wrap; gap: 8px; }

/* ================= Connections ================= */
.flow-scroll { overflow-x: auto; }
.flow-heads, svg.flow { min-width: 900px; }
.flow-heads { position: relative; height: 26px; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.flow-heads span { position: absolute; top: 0; }
.flow-heads span:nth-child(1) { left: 19.45%; transform: translateX(-100%); }
.flow-heads span:nth-child(2) { left: 50%; transform: translateX(-50%); }
.flow-heads span:nth-child(3) { left: 79.45%; }
svg.flow { display: block; width: 100%; height: auto; overflow: visible; }
.band { fill-opacity: .66; stroke: rgba(0, 0, 0, .35); stroke-width: .6; transition: fill-opacity .15s; }
.band:hover { fill-opacity: .95; }
.band.dim { fill-opacity: .06; stroke-opacity: .15; }
.fnode { cursor: pointer; outline: none; }
.fnode rect { fill: var(--text-2); transition: fill .12s; }
.fnode.col1 rect { fill: var(--panel-3); stroke: var(--line); }
.fnode:hover rect, .fnode.on rect { fill: var(--accent); stroke: var(--accent); }
.fnode:focus-visible rect { stroke: var(--accent); stroke-width: 3; }
.fnode.zero rect, .fnode.virtual rect { fill: transparent; stroke: var(--off); stroke-dasharray: 4 3; }
.fnode text { font-family: var(--ui); }
.fl-main { font: 600 14px var(--display); fill: var(--text); }
.fl-n { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.fl-sub { font-size: 12px; fill: var(--muted); }
.fnode.col1 .fl-main { font-size: 14px; }
.fnode.col1:hover .fl-main, .fnode.col1.on .fl-main { fill: var(--on-accent); }
.fnode.col1:hover .fl-n, .fnode.col1.on .fl-n { fill: var(--on-accent); }
.flow-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
table.foot td.heat { background: color-mix(in srgb, var(--accent) var(--heat), var(--panel)); font-weight: 600; }
table.foot th.up, table.foot td.up { border-left: 1px solid var(--line); }

/* ================= Landing ================= */
/* The first page for anyone signed out, drawn as one drafting sheet: header, then the headline, the switch drawing and
   the sign-in card side by side, and the sheet's title block under them, saying what NetMapp is. Always dark. */
.landing { position: fixed; inset: 0; z-index: 100; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; color: var(--text);
  background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 100%, var(--bg); }
.landing > * { flex: none; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }
.landing a { color: var(--text-2); text-decoration: none; }
.landing a:hover { color: var(--text); }
.lp-top { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 72px; border-bottom: 1px solid var(--line); background: var(--bg); }
.lp-home { display: inline-flex; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-word { display: block; font: 800 22px/1 var(--wide); letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
.brand-word b { font-weight: inherit; color: var(--accent); }
.brand-word small { display: block; margin-top: 5px; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lp-nav { display: flex; gap: clamp(14px, 2.2vw, 30px); margin-right: auto; font-size: 14.5px; white-space: nowrap; }
.landing a.btn.primary { color: var(--on-accent); }

.lp-hero { position: relative; flex: 1 0 auto; display: grid; grid-template-columns: minmax(370px, .7fr) minmax(0, 1.3fr) minmax(320px, 380px); align-items: center; column-gap: clamp(16px, 2.4vw, 40px);
  padding-top: clamp(28px, 6vh, 72px); padding-bottom: clamp(28px, 6vh, 72px); }
/* Registration marks at the sheet's corners. */
.lp-hero::before { content: ""; position: absolute; inset: 14px clamp(10px, 2vw, 28px); pointer-events: none; --tick: #6b4225;
  background: linear-gradient(var(--tick), var(--tick)) 0 0 / 16px 1px, linear-gradient(var(--tick), var(--tick)) 0 0 / 1px 16px, linear-gradient(var(--tick), var(--tick)) 100% 0 / 16px 1px, linear-gradient(var(--tick), var(--tick)) 100% 0 / 1px 16px,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 16px 1px, linear-gradient(var(--tick), var(--tick)) 0 100% / 1px 16px, linear-gradient(var(--tick), var(--tick)) 100% 100% / 16px 1px, linear-gradient(var(--tick), var(--tick)) 100% 100% / 1px 16px;
  background-repeat: no-repeat; }
.lp-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 18px; }
.lp-kicker { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.lp-title { font: 800 clamp(40px, 4.3vw, 62px)/.94 var(--wide); letter-spacing: -.015em; text-transform: uppercase; }
.lp-title span { color: var(--accent); }
.lp-lede { max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.landing a.lp-more { font-weight: 600; color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 4px; }
.landing a.lp-more:hover { color: var(--text); text-decoration-color: currentColor; }

/* The switch drawing (ui/SwitchSketch.tsx). It may run a little behind the headline, as a drawing runs under its title block. */
.sketch { display: block; width: 106%; margin-left: -6%; height: auto; max-height: 62vh; overflow: visible; }
.sk-body { stroke: #b8b5ad; stroke-width: 1.3; }
.sk-line { stroke: #85827b; stroke-width: 1; }
.sk-port { stroke: #98958d; stroke-width: .9; }
.sk-faint { stroke: #4a4946; stroke-width: .8; }
.sk-guide { stroke: #3e3e43; stroke-width: .8; stroke-dasharray: 6 5; }
.sk-dim { stroke: #5e5d59; stroke-width: .8; }
.sk-cu { stroke: var(--cu); stroke-width: 1.1; }
/* The one moment of motion on the page: the leads are drawn in, once. */
.sk-lead { stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: skDraw 1s cubic-bezier(.5, 0, .2, 1) forwards; }
.sk-lead.cu-1 { stroke: #c8733a; }
.sk-lead.cu-2 { stroke: #8f4f26; }
.sk-lead.cu-3 { stroke: #e39a67; }
.sk-lead.grey { stroke: #5e5d59; }
@keyframes skDraw { to { stroke-dashoffset: 0; } }
.sk-text text { font: 11px var(--mono); letter-spacing: .04em; fill: #85827b; }
.sk-text .cu { fill: var(--cu-hi); }

.landing-side { position: relative; z-index: 1; }
/* The sheet's title block: one ruled box, cells sharing their rules, a small label above each statement. */
.lp-block { grid-column: 1 / -1; margin: clamp(28px, 5vh, 56px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.lp-block > div { padding: 12px 16px 14px; background: var(--bg); }
.lp-block dt { font: 11.5px var(--mono); color: var(--muted); }
.lp-block dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); max-width: 52ch; }
.landing-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 16px; padding-bottom: 20px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); background: var(--bg); }
.landing-foot span:last-child { margin-left: auto; }

/* The sign-in card */
.auth-card { display: grid; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--panel); box-shadow: var(--shadow); }
.auth-card h2 { font: 700 21px var(--wide); letter-spacing: -.01em; color: var(--text); }
.auth-lede { color: var(--text-2); line-height: 1.5; }
.auth-field { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.auth-field input { width: 100%; height: 42px; padding: 0 12px; font-size: 15px; background: var(--bg); }
.auth-field small { color: var(--muted); line-height: 1.4; }
.auth-pass { position: relative; display: block; }
.auth-pass input { padding-right: 64px; }
.auth-show { position: absolute; right: 6px; top: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--accent-text); font-size: 13px; }
.auth-show:hover { background: var(--accent-soft); }
.auth-submit { height: 44px; justify-content: center; font-size: 15px; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); }
.landing .auth-card a, .landing .linkbtn { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* Narrower: the drawing moves under the headline and the card; narrower still, everything stacks, sign-in second. */
@media (max-width: 1180px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); row-gap: 8px; }
  .sketch { grid-column: 1 / -1; grid-row: 2; width: min(100%, 760px); margin: 0 auto; max-height: none; }
  .lp-block { grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .lp-nav { display: none; }
  .lp-top { justify-content: space-between; }
  .lp-hero { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .landing-side { width: min(440px, 100%); }
  .sketch { grid-row: 3; }
  .lp-block { grid-row: 4; }
  .lp-block { grid-template-columns: minmax(0, 1fr); }
  .landing-foot span:last-child { margin-left: 0; }
}
@media (max-width: 460px) {
  .brand-word small { display: none; }
}

/* ================= Small screens, motion, print ================= */
@media (max-width: 1180px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app { --ctx-w: 230px; } }
@media (max-width: 900px) {
  .app, .app.collapsed { grid-template-columns: 64px minmax(0, 1fr); }
  .app.collapsed .ctx { display: none; }
  .ctx-edge { display: none; }
  .ctx { position: static; height: auto; grid-column: 2; border-right: 0; border-bottom: 1px solid var(--line); }
  .stage { grid-column: 2; }
  .rail { grid-row: 1 / span 2; }
  .rail-btn { font-size: 0; }
  .head, main { padding-left: 18px; padding-right: 18px; }
  .head::after { left: 18px; }
  /* A narrower cut and size, so a location's name isn't cut short on a phone. */
  .head-title h1 { font: 700 20px/1.2 var(--display); }
  .wizard { grid-template-columns: 1fr; }
  .leadbar { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .view-in { animation: none; }
  .landing *, .landing { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}
@media print {
  :root { --bg: #fff; --panel: #fff; --panel-2: #fff; --text: #000; --text-2: #222; --muted: #555; --line: #bbb; --line-2: #ddd; }
  .rail, .ctx, .toolbar, .btn, .seg { display: none !important; }
  .app { display: block; }
  .head { background: none; }
  .card, .tile { border-color: #bbb; }
  .tablewrap { max-height: none; overflow: visible; }
  th { position: static; }
}

/* ================= Switches: addresses and SSH sessions ================= */
.setup-steps { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; color: var(--text-2); max-width: 80ch; }
.setup-steps b { color: var(--text); font-weight: 600; }

table.switches td { vertical-align: top; padding-top: 11px; padding-bottom: 11px; }
table.switches td.actions { white-space: nowrap; text-align: right; }
table.switches td.actions .btn + .btn { margin-left: 6px; }
table.switches .led { width: 7px; height: 7px; margin-right: 2px; vertical-align: 1px; }
table.switches input[type="text"] { width: 100%; }
table.switches input.addr { max-width: 220px; }
table.switches tr.add-row td { background: var(--panel-2); border-top: 1px solid var(--line); }
.svi-offers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.svi { display: inline-flex; gap: 6px; align-items: center; height: 24px; padding: 0 8px; border: 1px dashed var(--field); border-radius: 6px; background: transparent; color: var(--text-2); font: 12px var(--mono); }
.svi span { color: var(--muted); }
.svi:hover { border-style: solid; border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

.term-card { padding: 0; overflow: hidden; scroll-margin-top: 16px; }
.term-tabs { display: flex; gap: 2px; padding: 8px 8px 0; background: var(--panel-2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.term-tab { display: inline-flex; align-items: center; border-radius: var(--r) var(--r) 0 0; position: relative; }
.term-tab > button { border: 0; background: none; color: var(--muted); height: 36px; }
.term-tab > button[role="tab"] { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 14px; }
.term-tab .mono { font-size: 12.5px; }
.term-tab:hover > button { color: var(--text); }
.term-tab[aria-selected="true"] { background: var(--bg); }
.term-tab[aria-selected="true"] > button { color: var(--text); }
.term-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.term-x { width: 28px; font-size: 17px; line-height: 1; border-radius: 6px; }
.term-tab > button.term-x:hover { color: var(--bad-text); }
.term-box { height: clamp(320px, 62vh, 680px); padding: 10px 6px 6px 12px; background: var(--bg); }
.term-host { width: 100%; height: 100%; }
.term-host .xterm-viewport { background: transparent !important; }
.term-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.term-status .mono { color: var(--text-2); font-size: 12.5px; }
.term-note { color: var(--warn-text); }
table.directory tr.loc-row td { padding: 14px 14px 6px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
table.directory tbody:first-of-type tr.loc-row td { padding-top: 10px; }
table.directory tr.loc-row:hover td { background: var(--panel-2); }
table.directory tr.loc-row .hint { margin-left: 10px; }
.loc-link { border: 0; background: none; padding: 0; color: var(--text); font: 600 14px var(--display); }
.loc-link:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* cutover stages after completion, Moves and changes before it */
.step:disabled { opacity: .38; cursor: default; }
.step:disabled:hover { background: none; color: var(--text-2); }

/* port baselines */
.baseline > .row h2 { margin: 0; }
pre.out.baseline-lines { margin-top: 12px; max-height: 240px; }
.baseline-options { margin-top: 14px; }
.baseline-options > summary { cursor: pointer; color: var(--text-2); }
.baseline-option { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Moves and changes: choosing a port type */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.type-btn { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; text-align: left; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: 500 13.5px var(--ui); }
.type-btn:hover:not(:disabled) { border-color: var(--accent); }
.type-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
.type-btn:disabled { opacity: .45; cursor: default; }
.type-btn small { flex-basis: 100%; color: var(--muted); font-size: 11.5px; padding-left: 22px; }

/* Terminal page: changes waiting to be pasted */
.change-block + .change-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.change-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.change-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); font-size: 13px; }
.change-chip .swatch { margin-right: 0; }
.change-chip .term-x { border: 0; background: none; color: var(--muted); height: 24px; width: 24px; }
.change-chip .term-x:hover { color: var(--bad-text); }

/* ---- the cab: rack units, front and back, free space and what's not in it ---- */
.cab { display: grid; gap: 10px; }
.cab-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.cab-title { flex: 1 1 320px; min-width: 0; }
.cab-title h3 { margin: 0; font: 600 16px var(--display); }
.cab-stats { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.cab-stats b { font: 600 14px var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.cab-stats b.ok { color: var(--ok-text); }
.cab-meter { position: relative; flex: 0 1 260px; height: 12px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--panel-3) 0 5px, var(--panel-2) 5px 6px); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cab-meter i { position: absolute; top: 2px; bottom: 2px; background: var(--accent); border-radius: 1px; box-shadow: 1px 0 0 var(--panel), -1px 0 0 var(--panel); }
.rack-side { position: absolute; top: 50%; left: 2px; width: 26px; transform: translateY(-50%); writing-mode: vertical-rl; rotate: 180deg; font: 700 9px var(--display); letter-spacing: .4em; color: #8796a8; text-align: center; z-index: 1; pointer-events: none; }
.rack.view-rear { background: #07090c; }
.rack.view-rear::before, .rack.view-rear::after { background: radial-gradient(circle at 50% 50%, #030405 0 3px, transparent 3.5px) 0 4px / var(--rail) 16px, linear-gradient(90deg, #23282f, #39414b 48%, #23282f); }
.u-badge { font: 600 11px var(--mono); color: #0b0e13; background: #c6ced8; border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
.facing { font-size: 11px; padding: 1px 7px; border-radius: var(--r); background: #21160e; color: #f0c3a0; border: 1px solid #5a3a24; white-space: nowrap; }
.facing.other { background: transparent; color: #8191a2; border-color: #2f3b4a; }
.mv.wide { width: 30px; font-size: 12px; }
.slot-body.other-side { filter: saturate(.85); }
.free-run { display: grid; gap: 2px; }
.free-u { position: relative; display: flex; align-items: center; gap: 12px; height: 22px; padding: 0 10px; border: 1px dashed #263040; border-radius: 3px; background: repeating-linear-gradient(135deg, #0a0d12 0 6px, #0d1117 6px 12px); color: #56657a; font-size: 11px; }
.free-u.lit { border: 1px solid var(--cu); background: rgba(200, 115, 58, .16); color: #f6dcc6; }
.free-no { font: 600 10.5px var(--mono); min-width: 32px; }
.free-text { font: 600 11px var(--display); letter-spacing: .03em; color: #7c8aa0; }
.tray { display: grid; gap: 10px; padding: 12px 16px; background: var(--panel); border: 1px dashed var(--field); border-radius: var(--r-lg); }
.tray.drop-only { place-items: center; min-height: 54px; color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.tray-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tray-head b { font: 600 14px var(--display); }
.tray-head .muted { font-size: 12.5px; }
.tray-items { display: flex; flex-wrap: wrap; gap: 8px; }
.tray-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); max-width: 100%; }
.tray-item.dragging { opacity: .4; }
.tray-item .grip { color: var(--muted); }
.tray-item .grip:hover { color: var(--text); background: var(--hover); }
.tray-text { display: grid; min-width: 0; }
.tray-text b { font: 600 13px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-text small { color: var(--muted); font-size: 11.5px; }

/* ---- rack equipment: every drawing is --h rack units tall ---- */
.hw { --h: 1; position: relative; display: flex; align-items: center; gap: 16px; min-height: calc(96px + (var(--h) - 1) * 58px); padding: 8px 14px; border-radius: 2px; border-left: 7px solid; border-right: 7px solid; }
.hw-label { display: grid; gap: 2px; width: 150px; flex: none; }
.hw-label b { font: 700 14px/1.15 var(--display); overflow: hidden; text-overflow: ellipsis; }
.hw-label small { font-size: 10.5px; opacity: .7; line-height: 1.3; }
.hw-id { display: grid; gap: 1px; min-width: 0; max-width: 170px; }
.hw-id b { font: 600 12.5px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-id small { font: 10px var(--mono); opacity: .7; }
.rear-note { font-size: 11px; opacity: .6; font-style: italic; }
.psus { display: flex; gap: 6px; margin-left: auto; }
.psus.v { flex-direction: column; margin-left: 0; align-self: center; }
.psu { position: relative; display: flex; align-items: center; gap: 6px; width: 92px; height: 38px; padding: 0 6px; border-radius: 3px; background: linear-gradient(180deg, #2a2f35, #15181c); box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 #3b424a; }
.psu-fan { width: 26px; height: 26px; border-radius: 50%; background: repeating-conic-gradient(#0b0d10 0 18deg, #2c3238 18deg 36deg); box-shadow: inset 0 0 0 2px #0b0d10, 0 0 0 1px #3d444c; }
.psu-plug { width: 22px; height: 16px; border-radius: 2px; background: #050607; box-shadow: inset 0 0 0 2px #3a4048; }
.psu-led { width: 5px; height: 5px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 4px #3ddc84; }
.rear-io { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 3px; background: rgba(0, 0, 0, .2); }
.rear-io small { font: 600 7px var(--display); letter-spacing: .1em; opacity: .7; margin-right: 4px; }
.stackport { width: 26px; height: 14px; border-radius: 2px; background: #050607; box-shadow: inset 0 0 0 2px #6b7480; }
.usb { width: 15px; height: 7px; border-radius: 1px; background: #050607; box-shadow: inset 0 0 0 1.5px #7b838d; }
.vga { width: 26px; height: 12px; border-radius: 2px 2px 6px 6px; background: #1f4fb8; box-shadow: inset 0 0 0 2px #163a87; }
.fans { display: flex; gap: 8px; }
.fan { width: 44px; height: 44px; border-radius: 4px; background: radial-gradient(circle, #0b0d10 0 5px, transparent 5.5px), repeating-conic-gradient(#121518 0 20deg, #2a3036 20deg 40deg); box-shadow: inset 0 0 0 3px #1a1e22, inset 0 0 0 4px #000; }

.rear { background: linear-gradient(180deg, #cfd4d9, #a3aab2); color: #1d252f; border-color: #8a929b; box-shadow: inset 0 1px 0 #eef1f4; }
.switch-rear { background: linear-gradient(180deg, #2d3238, #1a1d21); color: #dfe5ea; border-color: #0e1013; box-shadow: inset 0 1px 0 #444b54; }
.panel-rear { background: linear-gradient(180deg, #24282d, #121417); color: #c9d2db; border-color: #0c0e10; }
.panel-rear.fibre { background: linear-gradient(180deg, #1c1f23, #0d0f11); }
.punch { display: grid; gap: 8px; }
.punch-row { display: flex; gap: 14px; }
.punch-block { width: 150px; height: 22px; border-radius: 2px; background: repeating-linear-gradient(90deg, #f2f2f2 0 3px, #2f80d8 3px 5px, #f2f2f2 5px 8px, #f08a24 8px 10px, #f2f2f2 10px 12px, #3bb34a 12px 14px), #ddd; opacity: .55; box-shadow: inset 0 0 0 2px #1a1d21; }
.panel-rear.fibre .punch-block { background: linear-gradient(180deg, #2b2f35, #1b1e22); opacity: 1; box-shadow: inset 0 0 0 1px #000; }
.device-rear { background: linear-gradient(180deg, #3b4047, #22262b); color: #e6e9ec; border-color: #15181b; }

/* servers */
.ear { position: absolute; top: 0; bottom: 0; width: 7px; }
.srv { gap: 14px; }
.srv-left { display: grid; gap: 8px; align-content: center; }
.media { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 3px; background: rgba(0, 0, 0, .35); }
.grille { flex: 0 1 220px; align-self: stretch; margin: 4px 0; border-radius: 3px; background: radial-gradient(circle, #050607 1.6px, transparent 2px) 0 0 / 7px 7px, #1c2025; box-shadow: inset 0 0 0 1px #000; }
.bays { display: grid; grid-auto-flow: column; gap: 3px; align-self: stretch; margin: 2px 0; }
.bays.sff { grid-template-rows: 1fr; }
.bays.lff { grid-template-rows: repeat(var(--h), 1fr); grid-auto-flow: row; grid-template-columns: repeat(4, 64px); }
.bay { position: relative; width: 22px; border-radius: 2px; background: linear-gradient(90deg, #191c20, #2a2e33 50%, #191c20); box-shadow: inset 0 0 0 1px #000; }
.bays.lff .bay { width: auto; min-height: 20px; }
.bay i { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 10px; border-radius: 1px; background: #b21f3c; }
.bays.lff .bay i { left: auto; right: 4px; top: 50%; bottom: auto; width: 14px; height: 6px; transform: translateY(-50%); background: #b8bfc6; }
.srv-badge { display: grid; justify-items: end; gap: 4px; margin-left: auto; text-align: right; }
.srv-badge small { white-space: pre-line; font: 600 10px/1.2 var(--display); opacity: .85; }
.hpe-mark { width: 30px; height: 12px; border: 3px solid #01a982; border-radius: 1px; }
.hpe-mark.big { width: 64px; height: 22px; border-width: 4px; }
.pwr { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; opacity: .7; }
.look-hpe-g9, .look-hpe-g8 { background: linear-gradient(180deg, #24282d, #121417); color: #e9edf1; border-color: #b9c0c7; box-shadow: inset 0 1px 0 #3a4047; }
.look-hpe-g8 { border-color: #9aa1a9; }
.look-hpe-g10 { background: linear-gradient(180deg, #d6dade, #aab1b8); color: #1b232c; border-color: #2a2f35; box-shadow: inset 0 1px 0 #f2f4f6; }
.look-hpe-g10 .bay { background: linear-gradient(90deg, #22262b, #3a3f45 50%, #22262b); }
.look-dell-14g, .look-dell-12g { background: linear-gradient(180deg, #2a2e33, #15171a); color: #e8ecf0; border-color: #0d0f11; box-shadow: inset 0 1px 0 #3c4248; }
.bezel { position: relative; flex: 1; align-self: stretch; display: grid; place-items: center; margin: 2px 0; border-radius: 4px; background: #1b1e22; box-shadow: inset 0 0 0 1px #000, inset 0 2px 6px rgba(0, 0, 0, .7); }
.look-dell-14g .bezel, .look-me4 .bezel { background: radial-gradient(circle at 50% 50%, transparent 0 6px, #50575f 6.5px 8px, transparent 8.5px) 0 0 / 18px 16px, radial-gradient(circle at 50% 50%, transparent 0 6px, #50575f 6.5px 8px, transparent 8.5px) 9px 8px / 18px 16px, #111316; }
.look-dell-12g .bezel { background: repeating-linear-gradient(180deg, #2d3238 0 3px, #141619 3px 7px); }
.dell-logo { padding: 2px 10px; border-radius: 3px; background: rgba(10, 12, 14, .85); font: 700 15px var(--display); letter-spacing: .14em; color: #dfe4e9; }
.look-supermicro, .look-device { background: linear-gradient(180deg, #2f3439, #1a1d21); color: #e2e7ec; border-color: #c4cad0; box-shadow: inset 0 1px 0 #454c54; }

/* storage */
.san { gap: 14px; }
.san-id { display: flex; align-items: center; gap: 10px; }
.enc-no { font: 700 18px var(--mono); color: #7cf06a; padding: 3px 6px; border-radius: 3px; background: #050607; box-shadow: inset 0 0 0 1px #000; text-shadow: 0 0 6px rgba(124, 240, 106, .6); }
.look-msa { background: linear-gradient(180deg, #33373c, #1c1f22); color: #e6eaee; border-color: #10120f; box-shadow: inset 0 1px 0 #474e55; }
.look-msa .bezel { background: radial-gradient(ellipse at 50% 50%, transparent 0 2px, #000 2.5px) 0 0 / 10px 6px, #2b2f34; box-shadow: inset 4px 0 0 #f5c400, inset -4px 0 0 #f5c400, inset 0 0 0 1px #000; }
.look-me4 { background: linear-gradient(180deg, #2a2e33, #141619); color: #e6eaee; border-color: #0b0c0e; }
.san-rear { gap: 12px; align-items: stretch; }
.ctrls { flex: 1; display: grid; gap: 6px; align-content: center; }
.ctrls .hw-label { width: auto; display: flex; gap: 10px; align-items: baseline; }
.ctrl { display: flex; align-items: flex-end; gap: 14px; padding: 6px 10px; border-radius: 3px; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.rear-me4 .ctrl { background: linear-gradient(90deg, rgba(122, 63, 176, .35), rgba(122, 63, 176, .12)); }
.ctrl-name { align-self: center; font: 700 16px var(--display); width: 18px; }
.sas { align-self: center; margin-left: auto; padding: 5px 8px; border-radius: 2px; background: #1d4fb4; color: #fff; font: 700 9px var(--display); letter-spacing: .1em; }

/* UPS */
.ups { gap: 0; padding: 8px 0 8px 14px; }
.ups-grille { flex: 1; align-self: stretch; margin: 4px 16px 4px 0; border-radius: 3px; background: repeating-linear-gradient(180deg, #050607 0 4px, #1c1f23 4px 8px); box-shadow: inset 0 0 0 1px #000; }
.ups-panel { width: 230px; align-self: stretch; display: grid; align-content: center; justify-items: start; gap: 6px; padding: 10px 16px; background: linear-gradient(180deg, #1d2024, #0f1113); border-left: 1px solid #000; }
.ups-leds { display: flex; gap: 6px; }
.ups-leds i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 4px #3ddc84; }
.ups-leds i:nth-child(3) { background: #f2b544; box-shadow: 0 0 4px #f2b544; }
.lcd { display: grid; padding: 6px 10px; border-radius: 4px; background: linear-gradient(180deg, #2e6fd8, #1b4ea8); color: #fff; font: 10px var(--display); box-shadow: inset 0 0 0 2px #0a1f44; }
.lcd b { font: 700 18px var(--mono); }
.ups-model { font: 600 13px var(--display); color: #e6eaee; }
.apc { font: 900 20px var(--display); letter-spacing: .02em; color: #e3262b; font-style: italic; }
.look-apc-sua, .look-apc-srt, .look-ups { background: #0d0f11; color: #e6eaee; border-color: #050607; }
.ups-rear { background: linear-gradient(180deg, #2a2e33, #16191c); color: #e3e8ec; border-color: #0b0c0e; }
.outlets { display: flex; flex-wrap: wrap; gap: 10px; }
.outlet-group { display: flex; gap: 4px; padding: 4px; border-radius: 3px; background: rgba(0, 0, 0, .4); }
.outlet-group i { width: 20px; height: 16px; border-radius: 2px; background: #050607; box-shadow: inset 0 0 0 2px #4a5159; }
.nmc { margin-left: auto; padding: 6px 10px; border-radius: 3px; background: #0a0b0d; box-shadow: inset 0 0 0 1px #33393f; }
.inlet { width: 34px; height: 34px; border-radius: 4px; background: #050607; box-shadow: inset 0 0 0 3px #3a4048; }

/* KVM */
.kvm { gap: 16px; }
.look-kvm-drawer, .look-kvm-switch { background: linear-gradient(180deg, #2b2f34, #15181b); color: #e6eaee; border-color: #0b0c0e; box-shadow: inset 0 1px 0 #3f454c; }
.drawer { flex: 1; display: flex; align-items: center; justify-content: center; gap: 20px; }
.handle { width: 40%; height: 14px; border-radius: 7px; background: linear-gradient(180deg, #3d434a, #1c1f23); box-shadow: inset 0 0 0 1px #000, 0 1px 0 #4c535b; }
.kvm-led, .kvm-leds i { width: 6px; height: 6px; border-radius: 50%; background: #4f8dff; box-shadow: 0 0 6px #4f8dff; }
.kvm-leds { flex: 1; display: flex; gap: 10px; justify-content: center; }
.kvm-leds i:nth-child(n + 3) { background: #263040; box-shadow: none; }

/* desktop and monitoring devices with ports on the front */
.look-netgear { background: linear-gradient(180deg, #2b3f73, #1a2850); color: #eef2ff; border-color: #101a36; box-shadow: inset 0 1px 0 #40569a; }
.look-vertiv { background: linear-gradient(180deg, #24282d, #121417); color: #eceff2; border-color: #0b0c0e; }
.look-vertiv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #fe5000; }

/* accessories */
.acc { justify-content: center; gap: 0; min-height: calc(40px + (var(--h) - 1) * 58px); padding: 6px 14px; }
.acc-screw { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle, #9aa1a8 0 2px, #4d545b 2.5px); }
.acc-screw:first-child { left: 8px; } .acc-screw:nth-child(2) { right: 8px; }
.acc-name { position: absolute; left: 30px; top: 6px; font: 600 11px var(--display); opacity: .55; }
.brush { width: 86%; height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, #050607 0 1px, #23272c 1px 2px); box-shadow: inset 0 0 0 2px #0b0c0e; }
.rings { display: flex; gap: 12%; width: 80%; justify-content: center; }
.rings i { width: 30px; height: 20px; border: 4px solid #2c3137; border-bottom: 0; border-radius: 14px 14px 0 0; }
.shelf-lip { width: 92%; height: 6px; border-radius: 2px; background: linear-gradient(180deg, #8a929b, #5b636c); }
.look-brush, .look-manager, .look-blank { background: linear-gradient(180deg, #1d2024, #0e1012); color: #b8c1ca; border-color: #090a0b; box-shadow: inset 0 1px 0 #2e3338; }
.look-shelf { background: linear-gradient(180deg, #3b4148, #262b30); color: #d2d8de; border-color: #1a1d20; }

/* server rear: management and embedded ports, then each card slot */
.srv-rear { align-items: center; gap: 14px; }
.srv-rear-left { display: grid; gap: 8px; }
.rear-ports { display: flex; align-items: flex-end; gap: 12px; }
.slots { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), auto); gap: 6px 8px; justify-content: start; align-items: end; }
.rear-dell-14g, .rear-dell-12g, .rear-me4, .rear-me4-shelf, .rear-supermicro, .rear-device { background: linear-gradient(180deg, #3a3f45, #23272c); color: #e6eaee; border-color: #15181b; box-shadow: inset 0 1px 0 #4b5259; }
.rear-dell-14g .slot-card, .rear-dell-12g .slot-card, .rear-supermicro .slot-card, .rear-device .slot-card { background: rgba(255, 255, 255, .08); }
.slot-card { padding: 4px 6px 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
.slot-card.no-card { display: grid; place-items: center; min-width: 66px; min-height: 40px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 4px, transparent 4px 9px), rgba(255, 255, 255, .14); }
.slot-card.no-card span { font: 600 9.5px var(--display); opacity: .7; }

/* Setup */
.dev-row { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.dev-row:last-child { border-bottom: 0; }
.dev-row .sw-row { padding: 0; border: 0; }
.cards { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 8px 10px; border-radius: var(--r); background: var(--panel-2); }
.cards-title { font: 600 12.5px var(--display); color: var(--muted); align-self: center; }
.card-slot { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.card-slot select { min-width: 170px; }
.cards .hint { flex-basis: 100%; font-family: var(--mono); font-size: 11.5px; }

/* Bring in from another location */
.modal.bring { width: min(680px, 94vw); }
.pick-group { display: grid; }
.pick-where { padding: 8px 12px 4px; font: 600 12px var(--display); color: var(--muted); }
.unit-pick { display: grid; gap: 4px; max-height: 46vh; overflow: auto; padding: 2px; }
.unit-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); cursor: pointer; }
.unit-row.on { border-color: var(--accent); background: var(--accent-soft); }
.unit-row .grow { display: grid; min-width: 0; }
.unit-row small { color: var(--muted); font-size: 12px; }
.unit-tag { font: 600 12px var(--mono); min-width: 40px; }
.bring-sum p { margin: 4px 0 8px; font-size: 13.5px; }
.bring-sum ul { margin: 4px 0 0; padding-left: 18px; }
.cab-row { align-items: flex-end; }
.cab-row > .muted { padding-bottom: 9px; font-size: 13px; }

/* ---- cab zoom: the rack is scaled from its top-left corner inside a box of its scaled size, centred ---- */
.rack-scroll { overflow-y: hidden; }
.rack-sizer { position: relative; margin: 0 auto; }
.rack-sizer > .rack { position: absolute; top: 0; left: 0; margin: 0; transform-origin: 0 0; will-change: transform; }
.seg.zoom button { min-width: 34px; font-variant-numeric: tabular-nums; }
.seg.zoom button:nth-child(2) { min-width: 58px; }

/* ---- choosing a switch port for a unit in another location ---- */
.pick-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); position: sticky; top: 0; z-index: 5; box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .8); }
.pick-banner b { display: block; font: 600 15px var(--display); }
.pick-banner small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.pick-pulse { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--accent); animation: pickPulse 1.4s ease-out infinite; }
@keyframes pickPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.picklist button small { font-weight: 400; }

/* ---- realism: light, metal and the small parts that make equipment recognisable (drawing only, no layout) ---- */

/* Rack: deep interior and square cage-nut holes in the rails, front and back */
.rack { background: linear-gradient(90deg, #020304, #0b0e12 50%, #020304); }
.rack::before, .rack::after, .rack.view-rear::before, .rack.view-rear::after {
  background:
    linear-gradient(180deg, #020304 0 8px, transparent 8px) 50% 5px / 8px 16px repeat-y,
    linear-gradient(90deg, #262b32, #59626d 22%, #3c444d 50%, #59626d 78%, #262b32);
  box-shadow: inset 0 0 0 1px #000;
}

/* Every unit: a top highlight, a bottom shade and a shadow on the unit below */
.hw::before, .face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 16%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .55);
}
.slot-body { box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .7); }

/* Rack ears with their screws, over the unit's side edges */
.ear-l { left: -7px; }
.ear-r { right: -7px; }
.ear {
  z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, #c9cfd6 0 1.6px, #6c747e 2px 3px, transparent 3.4px) 50% 12px / 7px 8px no-repeat,
    radial-gradient(circle at 50% 50%, #c9cfd6 0 1.6px, #6c747e 2px 3px, transparent 3.4px) 50% calc(100% - 12px) / 7px 8px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .3));
}

/* Brushed metal on silver fronts */
.look-c9300 { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, .03) 1px 2px), linear-gradient(180deg, #f3f5f7, #cdd2d8); }
.look-c9200 { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, .03) 1px 2px), linear-gradient(180deg, #eef0f3, #c4c9cf); }
.look-generic, .look-adva { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .03) 1px 2px), linear-gradient(180deg, #e6e9ed, #bfc5cc); }
.look-hpe-g10 { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .025) 1px 3px), linear-gradient(180deg, #dadee2, #a9b0b7); }

/* Drive caddies: vent slots, a latch and an activity light that flickers like a busy disk */
.bays.sff .bay { width: 24px; background: linear-gradient(90deg, #0d0f12, #262a30 42%, #1b1e23 58%, #0d0f12); box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .08); }
.bays.sff .bay::before { content: ""; position: absolute; left: 5px; right: 5px; top: 7px; height: 38%; border-radius: 1px; background: repeating-linear-gradient(180deg, #030405 0 2px, rgba(255, 255, 255, .06) 2px 4px); }
.bays .bay::after { content: ""; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 4px #3ddc84; animation: diskBlink 2.3s steps(1) infinite; }
.bays .bay:nth-child(3n)::after { animation-duration: 1.7s; animation-delay: -.6s; }
.bays .bay:nth-child(4n + 1)::after { animation-duration: 3.1s; animation-delay: -1.2s; }
.bays .bay:nth-child(5n + 2)::after { animation: none; }
.bays.sff .bay i { left: 6px; right: 6px; height: 7px; border-radius: 1px 1px 3px 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.look-hpe-g10 .bays.sff .bay i, .look-hpe-g9 .bays.sff .bay i, .look-hpe-g8 .bays.sff .bay i { background: linear-gradient(180deg, #c93a4f, #8f1a2c); }
.look-supermicro .bays .bay i, .look-device .bays .bay i { background: linear-gradient(180deg, #4a8cf0, #2457a8); }
.bays.lff .bay { background: radial-gradient(circle, #050607 1.2px, transparent 1.6px) 0 0 / 5px 5px, linear-gradient(180deg, #23272c, #16191c); box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .08); }
.bays.lff .bay::after { top: 50%; right: auto; left: 6px; transform: translateY(-50%); }
@keyframes diskBlink { 0%, 62%, 70%, 100% { opacity: 1; } 64%, 72% { opacity: .15; } }

/* Power buttons glow; grilles and bezels get depth */
.pwr { color: #3ddc84; opacity: 1; box-shadow: inset 0 0 0 2px currentColor, 0 0 7px rgba(61, 220, 132, .7); }
.grille { background: radial-gradient(circle, #030405 1.7px, transparent 2.1px) 0 0 / 7px 7px, linear-gradient(180deg, #23282e, #15181c); box-shadow: inset 0 0 0 1px #000, inset 0 2px 4px rgba(0, 0, 0, .6); }
.bezel { box-shadow: inset 0 0 0 1px #000, inset 0 3px 8px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .06); }
.dell-logo { text-shadow: 0 1px 0 #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.media { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }

/* UPS: fine grille, recessed control panel, APC wordmark */
.ups-grille { background: repeating-linear-gradient(180deg, #030405 0 3px, #1e2226 3px 5px, #0c0e10 5px 7px); box-shadow: inset 0 0 0 1px #000, inset 0 3px 8px rgba(0, 0, 0, .8); }
.ups-panel { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .06), inset 0 2px 6px rgba(0, 0, 0, .5); }
.apc { font: 800 17px var(--display); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 0 #000; }
.lcd { box-shadow: inset 0 0 0 2px #0a1f44, inset 0 0 12px rgba(0, 0, 0, .35), 0 0 10px rgba(46, 111, 216, .35); }

/* Power supplies and fans: handles, guards */
.psu { box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 #3b424a, 0 1px 0 rgba(255, 255, 255, .05); }
.psu::after { content: ""; position: absolute; right: 4px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #5c646e, #2a2f35); }
.fan { box-shadow: inset 0 0 0 3px #1a1e22, inset 0 0 0 4px #000, 0 0 0 1px rgba(255, 255, 255, .05); }

@media (prefers-reduced-motion: reduce) { .bays .bay::after, .pick-pulse { animation: none; } }

/* ================= Equipment catalogue: each maker's look (drawing only, no layout) ================= */

/* Drive bays: SFF in rows of up to 30, LFF four across */
.bays.sff { grid-template-rows: repeat(var(--rows, 1), 1fr); }
.bays.lff { grid-template-rows: repeat(var(--rows, 1), 1fr); }

/* Maker's marks */
.mark { display: inline-flex; align-items: center; gap: 5px; font: 800 12px/1 var(--display); letter-spacing: .04em; white-space: nowrap; }
.mark-plain { font-weight: 700; letter-spacing: .12em; font-size: 9px; }
.mark-hpe::before { content: ""; width: 22px; height: 9px; border: 2.5px solid #01a982; border-radius: 1px; }
.mark-dell { font-size: 15px; letter-spacing: .14em; }
.mark-lenovo { padding: 3px 6px 4px; background: #e2231a; color: #fff; font: 700 11px/1 var(--ui); letter-spacing: 0; border-radius: 1px; }
.mark-cisco { font: 700 13px/1 var(--ui); letter-spacing: 0; color: #fff; flex-direction: column; gap: 2px; }
.mark-cisco::before { content: ""; width: 30px; height: 9px; background: repeating-linear-gradient(90deg, #049fd9 0 2px, transparent 2px 4px); -webkit-mask: linear-gradient(0deg, #000 30%, transparent 30%) 0 0 / 4px 100%, linear-gradient(0deg, #000 65%, transparent 65%) 2px 0 / 4px 100%; }
.mark-fujitsu { font: 700 12px/1 var(--ui); letter-spacing: .02em; color: #e60012; }
.mark-supermicro { font-size: 10px; letter-spacing: .16em; color: #d7dde4; }
.mark-netapp { font: 700 13px/1 var(--ui); letter-spacing: 0; color: #fff; }
.mark-netapp::before { content: "n"; display: grid; place-items: center; width: 15px; height: 15px; background: #0067c5; color: #fff; font: 700 12px/1 var(--ui); }
.mark-pure { font: 800 10px/1 var(--display); letter-spacing: .12em; color: #fe5000; }
.mark-pure::before { content: ""; width: 14px; height: 14px; background: conic-gradient(from 45deg, #fe5000 0 25%, #ff8a3d 0 50%, #fe5000 0 75%, #c43c00 0); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mark-synology { font: 600 12px/1 var(--ui); letter-spacing: .02em; color: #c9ced4; }
.mark-qnap { font: 900 13px/1 var(--display); letter-spacing: .06em; color: #fff; }
.mark-qnap::first-letter { color: #2a7de1; }
.mark-apc { font: 900 17px/1 var(--display); font-style: italic; letter-spacing: .02em; color: #fff; }
.mark-eaton { font: 800 14px/1 var(--display); letter-spacing: .1em; color: #2a8ff7; }
.mark-vertiv { font: 700 12px/1 var(--display); letter-spacing: .18em; color: #fff; border-bottom: 2px solid #fe5000; padding-bottom: 2px; }
.mark-cyberpower { font: 700 italic 12px/1 var(--ui); letter-spacing: 0; color: #fff; }
.mark-cyberpower::first-letter { color: #e60012; }
.mark-raritan { font: 700 italic 13px/1 var(--ui); letter-spacing: 0; color: #fff; }
.mark-aten { font: 900 15px/1 var(--display); letter-spacing: .06em; color: #0a58b5; }
.mark-pan { font-size: 9px; letter-spacing: .16em; }
.mark-pan::before { content: ""; width: 10px; height: 10px; background: linear-gradient(135deg, transparent 30%, #fa582d 30% 45%, transparent 45% 60%, #fa582d 60% 75%, transparent 75%); }
.mark-fortinet { font: 800 11px/1 var(--display); letter-spacing: .1em; color: #fff; }
.mark-fortinet::before { content: ""; width: 12px; height: 12px; background: linear-gradient(90deg, #ee3124 0 3px, transparent 3px 4.5px, #ee3124 4.5px 7.5px, transparent 7.5px 9px, #ee3124 9px) 0 0 / 100% 3px no-repeat, linear-gradient(90deg, #ee3124 0 3px, transparent 3px 9px, #ee3124 9px) 0 4.5px / 100% 3px no-repeat, linear-gradient(90deg, #ee3124 0 3px, transparent 3px 4.5px, #ee3124 4.5px 7.5px, transparent 7.5px 9px, #ee3124 9px) 0 9px / 100% 3px no-repeat; }
.mark-meraki { font: 600 13px/1 var(--ui); letter-spacing: 0; color: #2f7d32; }
.mark-sonicwall { font: 800 10px/1 var(--display); letter-spacing: .14em; color: #fff; }
.mark-sonicwall::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ff7a00; }
.mark-watchguard { font: 700 12px/1 var(--ui); color: #fff; }
.mark-juniper { font: 700 11px/1 var(--display); letter-spacing: .14em; color: #fff; }
.mark-juniper::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #84bd00, #3e7f00); }
.mark-draytek { font: 800 italic 13px/1 var(--ui); letter-spacing: 0; color: #003f8a; }
.mark-mikrotik { font: 700 12px/1 var(--ui); letter-spacing: 0; color: #fff; }
.mark-ubiquiti { font: 700 9px/1 var(--display); letter-spacing: .3em; color: #4a5560; }
.mark-netgear { font: 800 12px/1 var(--display); letter-spacing: .06em; color: #fff; }
.mark-adva { font: 800 14px/1 var(--display); letter-spacing: .12em; color: #c8102e; }
.mark-opengear { font: 700 13px/1 var(--ui); letter-spacing: 0; color: #9fd3f2; }

/* Small front-panel parts */
.fp-leds { display: flex; gap: 5px; }
.fp-leds i { width: 7px; height: 7px; border-radius: 1px; background: #2b3138; box-shadow: inset 0 0 0 1px #000; }
.fp-leds i:first-child { background: #4f8dff; box-shadow: 0 0 5px #4f8dff; }
.lcd-mini { display: inline-grid; place-items: center; width: 54px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, #4d8fe6, #2557a8); color: #e9f1ff; font: 700 9px var(--mono); box-shadow: inset 0 0 0 1px #0b2350, 0 0 6px rgba(77, 143, 230, .4); }
.kvm-dongle { width: 30px; height: 12px; border-radius: 2px; background: #07090b; box-shadow: inset 0 0 0 2px #5a636d; }
.pull-tab { width: 34px; height: 6px; border-radius: 1px; background: #1f6fd1; }
.aux-reset { width: 7px; height: 7px; border-radius: 50%; background: #050607; box-shadow: inset 0 0 0 1.5px #7b838d; }

/* HPE ProLiant Gen10 Plus and Gen11: black, HPE green on the ear */
.look-hpe-g10p, .look-hpe-g11 { background: linear-gradient(180deg, #1f2226, #0f1113); color: #e9edf1; border-color: #3b4148; box-shadow: inset 0 1px 0 #353b42; }
.look-hpe-g10p .ear-l, .look-hpe-g11 .ear-l { background: linear-gradient(180deg, #01a982, #017a5e); }
.look-hpe-g11::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #01a982; }
.look-hpe-g10p .bays.sff .bay i, .look-hpe-g11 .bays.sff .bay i { background: linear-gradient(180deg, #5a636d, #2f353b); }
.look-hpe-g10p .bays .bay::after, .look-hpe-g11 .bays .bay::after { width: 8px; height: 8px; top: auto; bottom: 14px; right: 50%; margin-right: -4px; background: transparent; box-shadow: inset 0 0 0 2px #01a982, 0 0 5px rgba(1, 169, 130, .6); }
.look-hpe-g10p .bays.lff .bay i, .look-hpe-g11 .bays.lff .bay i { background: #5a636d; }

/* Dell PowerEdge bezels, by generation */
.look-dell-13g, .look-dell-15g, .look-dell-16g { background: linear-gradient(180deg, #2a2e33, #15171a); color: #e8ecf0; border-color: #0d0f11; box-shadow: inset 0 1px 0 #3c4248; }
.look-dell-12g .mark-dell, .look-dell-13g .mark-dell { border: 2px solid currentColor; border-radius: 50%; padding: 10px 4px; font-size: 11px; letter-spacing: .06em; }
.look-dell-13g .bezel { background: linear-gradient(60deg, transparent 47%, #3a4047 48% 52%, transparent 53%) 0 0 / 14px 24px, linear-gradient(-60deg, transparent 47%, #3a4047 48% 52%, transparent 53%) 0 0 / 14px 24px, #121417; }
.look-dell-15g .bezel { background: repeating-linear-gradient(115deg, #121417 0 5px, #2b3036 5px 6px), #121417; }
.look-dell-16g .bezel { background: repeating-linear-gradient(100deg, #101215 0 9px, #262b31 9px 10px); box-shadow: inset 4px 0 0 #4aa3ff, inset 0 0 0 1px #000, inset 0 3px 8px rgba(0, 0, 0, .75); }
.look-dell-16g .mark-dell { letter-spacing: .3em; font-weight: 600; }
.rear-dell-13g, .rear-dell-15g, .rear-dell-16g { background: linear-gradient(180deg, #3a3f45, #23272c); color: #e6eaee; border-color: #15181b; box-shadow: inset 0 1px 0 #4b5259; }
.rear-dell-13g .slot-card, .rear-dell-15g .slot-card, .rear-dell-16g .slot-card { background: rgba(255, 255, 255, .08); }

/* Lenovo: black, terracotta hot-swap latches, red Lenovo badge */
.look-lenovo-sr, .look-lenovo-x { background: linear-gradient(180deg, #232629, #111315); color: #e7eaed; border-color: #050607; box-shadow: inset 0 1px 0 #383d43; }
.look-lenovo-sr .bays .bay i, .look-lenovo-x .bays .bay i { background: linear-gradient(180deg, #e8702a, #b4511a); }
.look-lenovo-x .ear-l { background: linear-gradient(180deg, #2f6fb5, #1d4d85); }
.rear-lenovo-sr, .rear-lenovo-x, .rear-cisco-ucs, .rear-fujitsu, .rear-synology, .rear-qnap { background: linear-gradient(180deg, #34393f, #1f2327); color: #e6eaee; border-color: #121417; box-shadow: inset 0 1px 0 #474e55; }
.rear-lenovo-sr .slot-card, .rear-lenovo-x .slot-card, .rear-cisco-ucs .slot-card, .rear-fujitsu .slot-card, .rear-synology .slot-card, .rear-qnap .slot-card { background: rgba(255, 255, 255, .08); }

/* Cisco UCS: graphite, silver ears with the Cisco bridge */
.look-cisco-ucs { background: linear-gradient(180deg, #2c3036, #16191c); color: #e8ecf0; border-color: #9aa3ac; box-shadow: inset 0 1px 0 #424950; }
.look-cisco-ucs .bays .bay i { background: linear-gradient(180deg, #b8c0c8, #7d868f); }
.look-cisco-ucs .bays .bay::after { background: #3ddc84; }

/* Fujitsu PRIMERGY */
.look-fujitsu { background: linear-gradient(180deg, #2a2d31, #141618); color: #e7eaed; border-color: #0a0b0c; box-shadow: inset 0 1px 0 #3d4248; }
.look-fujitsu .bays .bay i { background: linear-gradient(180deg, #6f9bd1, #3a659c); }

/* Storage: drives on show, enclosure ID on the left ear */
.look-msa .bays .bay i, .look-msa-shelf .bays .bay i { background: linear-gradient(180deg, #c93a4f, #8f1a2c); }
.look-msa-shelf { background: linear-gradient(180deg, #33373c, #1c1f22); color: #e6eaee; border-color: #10120f; box-shadow: inset 0 1px 0 #474e55; }
.look-me4-shelf, .look-me5, .look-md3, .look-compellent, .look-eseries, .look-lenovo-de { background: linear-gradient(180deg, #2a2e33, #141619); color: #e6eaee; border-color: #0b0c0e; box-shadow: inset 0 1px 0 #3d434a; }
.look-me4 .bays .bay i, .look-me4-shelf .bays .bay i, .look-me5 .bays .bay i, .look-eseries .bays .bay i { background: linear-gradient(180deg, #9aa3ad, #5f6873); }
.look-md3 { border-color: #a7aeb6; }
.look-md3 .bays .bay i { background: linear-gradient(180deg, #d4d9de, #8c949c); }
.look-compellent .bays .bay i { background: linear-gradient(180deg, #4f8dff, #2a5bc0); }
.look-lenovo-de .bays .bay i { background: linear-gradient(180deg, #e8702a, #b4511a); }
.look-me5 .ear-l, .look-me4-shelf .ear-l { background: linear-gradient(180deg, #46505b, #2a3037); }
.drawers { flex: 1; display: grid; gap: 8px; align-self: stretch; margin: 4px 0; }
.drawer-5u { display: flex; align-items: center; justify-content: center; gap: 20px; border-radius: 3px; background: repeating-linear-gradient(90deg, #121417 0 5px, #1d2125 5px 7px); box-shadow: inset 0 0 0 1px #000, inset 0 2px 5px rgba(0, 0, 0, .7); }
.drawer-5u .handle { width: 30%; }
.drawer-5u .fp-leds i:first-child { background: #3ddc84; box-shadow: 0 0 5px #3ddc84; }

/* Storage behind its bezel */
.bezel .mark { position: relative; }
.bezel-line { font: 500 13px var(--display); letter-spacing: .06em; color: #c8d0d8; }
.look-unity .bezel, .look-powerstore .bezel, .look-pure .bezel, .look-netapp .bezel, .look-nimble .bezel { display: flex; align-items: center; justify-content: center; gap: 14px; }
.look-unity, .look-powerstore, .look-pure, .look-netapp, .look-nimble { background: linear-gradient(180deg, #24272b, #0f1113); color: #e6eaee; border-color: #050607; box-shadow: inset 0 1px 0 #383d43; }
.look-unity .bezel { background: radial-gradient(circle at 50% 50%, transparent 0 3px, #3a4047 3.5px 4.5px, transparent 5px) 0 0 / 10px 9px, #101215; box-shadow: inset 0 -3px 0 #4aa3ff, inset 0 0 0 1px #000; }
.look-powerstore .bezel { background: repeating-linear-gradient(90deg, #15181b 0 10px, #2a2f35 10px 12px, #15181b 12px 22px); box-shadow: inset 0 0 0 1px #000, inset 0 3px 8px rgba(0, 0, 0, .7); }
.look-powerstore .bezel::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6px; height: 2px; background: linear-gradient(90deg, transparent, #7fc4ff, transparent); }
.look-pure .bezel { background: linear-gradient(115deg, #0c0d0f 0 60%, #1c1f22 60% 61%, #0c0d0f 61%); box-shadow: inset 0 0 0 1px #000, inset -6px 0 0 #fe5000; }
.look-netapp .bezel { background: linear-gradient(90deg, #0f1114, #1d2228 50%, #0f1114); box-shadow: inset 0 0 0 1px #000, inset 0 -3px 0 #0067c5; }
.look-nimble .bezel { background: repeating-linear-gradient(180deg, #2a2f35 0 2px, #16191c 2px 6px); box-shadow: inset 0 0 0 1px #000, inset 0 -3px 0 #01a982; }
.look-nimble .bezel .mark-hpe { color: #fff; }

/* NAS: black chassis, status lights where the enclosure ID would be */
.look-synology, .look-qnap { background: linear-gradient(180deg, #26292d, #121416); color: #e6eaee; border-color: #050607; box-shadow: inset 0 1px 0 #3a3f45; }
.look-synology .bays .bay i { background: linear-gradient(180deg, #8d959d, #5a626a); }
.look-qnap .bays .bay i { background: linear-gradient(180deg, #2a7de1, #1a56a3); }
.nas-leds { display: grid; grid-template-columns: repeat(2, 7px); gap: 5px; }
.nas-leds i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 5px #3ddc84; }
.nas-leds i:nth-child(2) { background: #f2b544; box-shadow: 0 0 5px #f2b544; }
.nas-leds i:nth-child(4) { background: #4f8dff; box-shadow: 0 0 5px #4f8dff; }

/* UPS families */
.ups-keys { display: flex; gap: 5px; }
.ups-keys i { width: 14px; height: 9px; border-radius: 2px; background: linear-gradient(180deg, #3b4148, #1c1f23); box-shadow: inset 0 0 0 1px #000; }
.look-apc-smt { background: #0d0f11; color: #e6eaee; border-color: #050607; }
.look-apc-smt .ups-grille { background: repeating-linear-gradient(90deg, #030405 0 3px, #1e2226 3px 5px); }
.look-apc-smt .lcd { background: linear-gradient(180deg, #dfe8f4, #b8c7dc); color: #102a4f; box-shadow: inset 0 0 0 2px #26303c; }
.look-eaton { background: linear-gradient(180deg, #2e3237, #1a1d20); color: #e6eaee; border-color: #0a0b0c; }
.look-eaton .ups-panel { order: -1; border-left: 0; border-right: 1px solid #000; }
.look-eaton .ups-grille { margin: 4px 0 4px 16px; background: repeating-linear-gradient(180deg, #24282d 0 6px, #121417 6px 8px); }
.look-eaton .lcd { background: linear-gradient(180deg, #e9ecef, #c6ccd2); color: #1a2633; box-shadow: inset 0 0 0 2px #2d3238; }
.look-liebert { background: #101214; color: #e6eaee; border-color: #050607; }
.look-liebert .ups-grille { background: repeating-linear-gradient(180deg, #030405 0 2px, #1b1f23 2px 4px); }
.look-liebert .lcd { background: linear-gradient(180deg, #1d2329, #0b0e11); color: #fe8c4a; box-shadow: inset 0 0 0 2px #2d3238; }
.look-cyberpower { background: #0e1012; color: #e6eaee; border-color: #050607; }
.look-cyberpower .ups-grille { background: repeating-linear-gradient(135deg, #030405 0 3px, #1e2226 3px 5px); }

/* KVM families */
.look-raritan, .look-avocent { background: linear-gradient(180deg, #25292d, #111315); color: #e6eaee; border-color: #050607; box-shadow: inset 0 1px 0 #3a3f45; }
.look-raritan .kvm-leds i, .look-avocent .kvm-leds i { background: #3ddc84; box-shadow: 0 0 5px #3ddc84; }
.look-raritan .kvm-leds i:nth-child(n + 4), .look-avocent .kvm-leds i:nth-child(n + 3) { background: #203026; box-shadow: none; }
.look-aten { background: linear-gradient(180deg, #e3e6ea, #b8bec5); color: #1b232c; border-color: #8e959e; box-shadow: inset 0 1px 0 #fff; }
.look-aten .kvm-leds i { background: #3ddc84; box-shadow: 0 0 4px #3ddc84; }
.look-aten .kvm-leds i:nth-child(n + 2) { background: #8c949c; box-shadow: none; }
.kvm-keys { display: flex; gap: 4px; }
.kvm-keys i { width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #f6f7f8, #c3c9cf); box-shadow: inset 0 0 0 1px #7d858e, 0 1px 0 #6b737c; }
.kvm .kvm-leds { gap: 7px; }
.targets { display: grid; gap: 3px; }
.target-row { display: grid; grid-template-columns: repeat(8, 30px); gap: 3px; padding: 3px; border-radius: 3px; background: rgba(0, 0, 0, .3); }
.target-row .aux-rj { width: 30px; height: 22px; font-size: 8px; }
.look-kvm-drawer .drawer .mark { margin-right: auto; }

/* Front-port devices: firewalls, routers, desktop gear */
.look-fortinet { background: linear-gradient(180deg, #2b2e32, #15171a); color: #eceff2; border-color: #0a0b0c; box-shadow: inset 0 1px 0 #40454c; }
.look-fortinet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ee3124; }
.look-cisco-fp, .look-cisco-isr { background: linear-gradient(180deg, #2c3136, #171a1d); color: #eceff2; border-color: #0b0c0e; box-shadow: inset 0 1px 0 #444a51; }
.look-cisco-fp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #049fd9; }
.look-cisco-isr { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3a4047, #23272c); }
.look-meraki { background: linear-gradient(180deg, #f4f5f6, #d6dadf); color: #263238; border-color: #a9b0b8; box-shadow: inset 0 1px 0 #fff; }
.look-meraki::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #67b346; }
.look-sonicwall { background: linear-gradient(180deg, #232629, #0f1113); color: #eceff2; border-color: #050607; box-shadow: inset 0 1px 0 #3a3f45; }
.look-sonicwall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ff7a00; }
.look-watchguard { background: linear-gradient(90deg, #b3121f 0 172px, #1a1c1f 172px); color: #f4f5f6; border-color: #050607; box-shadow: inset 0 1px 0 #3a3f45; }
.look-juniper { background: linear-gradient(180deg, #3a3e43, #202326); color: #eceff2; border-color: #0b0c0e; box-shadow: inset 0 1px 0 #50565d; }
.look-draytek { background: linear-gradient(180deg, #f2f3f5, #cdd2d8); color: #1a2633; border-color: #98a0a9; box-shadow: inset 0 1px 0 #fff; }
.look-mikrotik { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2c3035, #15181b); color: #eceff2; border-color: #0b0c0e; }
.look-ubiquiti { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .03) 1px 2px), linear-gradient(180deg, #e7eaee, #b9c0c7); color: #1f2a33; border-color: #8e959e; box-shadow: inset 0 1px 0 #fff; }
.udm-screen { display: grid; place-items: center; gap: 2px; width: 64px; height: 44px; border-radius: 4px; background: linear-gradient(180deg, #0c1622, #050a10); color: #3d9bff; font: 700 10px var(--ui); box-shadow: inset 0 0 0 2px #2b3238; }
.udm-screen small { font-size: 8px; color: #3ddc84; }
.look-apc-pdu, .look-netbotz, .look-opengear { background: linear-gradient(180deg, #24272b, #0f1113); color: #eceff2; border-color: #050607; box-shadow: inset 0 1px 0 #383d43; }
.look-opengear::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #2aa0e3; }
.pdu-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 3px; background: rgba(0, 0, 0, .35); }
.pdu-row .c13 { width: 22px; height: 16px; border-radius: 3px 3px 5px 5px; background: #050607; box-shadow: inset 0 0 0 2px #4a5159; }
.pdu-row .breaker { width: 14px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, #e2e5e8 0 45%, #1c1f23 45%); box-shadow: inset 0 0 0 1px #000; }
.pdu-row .pdu-led { width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 5px #3ddc84; }

/* More accessories */
.vent-holes { width: 88%; height: 18px; background: radial-gradient(circle, #000 1.6px, transparent 2px) 0 0 / 7px 6px; opacity: .9; }
.look-vent, .look-drawer, .look-fan, .look-pdu { background: linear-gradient(180deg, #1d2024, #0e1012); color: #b8c1ca; border-color: #090a0b; box-shadow: inset 0 1px 0 #2e3338; }
.drawer-front { display: flex; align-items: center; justify-content: center; gap: 24px; width: 88%; height: 70%; min-height: 26px; border-radius: 2px; box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 #2e3338; }
.drawer-front .handle { width: 40%; }
.drawer-front .lock { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #050607 0 2px, #9aa1a8 2.5px 4px, #4d545b 4.5px); }
.fan-row { display: flex; gap: 36px; }
.fan-row .fan { width: 30px; height: 30px; }
.look-pdu .pdu-row { width: 80%; justify-content: center; }
.rear-me5, .rear-md3, .rear-unity, .rear-powerstore, .rear-pure, .rear-netapp, .rear-nimble, .rear-compellent, .rear-eseries, .rear-lenovo-de { background: linear-gradient(180deg, #3a3f45, #23272c); color: #e6eaee; border-color: #15181b; box-shadow: inset 0 1px 0 #4b5259; }
.rear-me5 .ctrl, .rear-md3 .ctrl, .rear-unity .ctrl, .rear-powerstore .ctrl, .rear-pure .ctrl, .rear-netapp .ctrl, .rear-nimble .ctrl, .rear-compellent .ctrl, .rear-eseries .ctrl, .rear-lenovo-de .ctrl { background: rgba(255, 255, 255, .07); }
.rear-unity .ctrl, .rear-powerstore .ctrl, .rear-me5 .ctrl { background: linear-gradient(90deg, rgba(74, 163, 255, .22), rgba(74, 163, 255, .06)); }
.rear-pure .ctrl { background: linear-gradient(90deg, rgba(254, 80, 0, .25), rgba(254, 80, 0, .06)); }
.rear-netapp .ctrl, .rear-eseries .ctrl { background: linear-gradient(90deg, rgba(0, 103, 197, .3), rgba(0, 103, 197, .08)); }
.rear-nimble .ctrl { background: linear-gradient(90deg, rgba(1, 169, 130, .25), rgba(1, 169, 130, .06)); }
.ctrl-name { min-width: 18px; width: auto; }

/* ================= Setup: one section per kind of equipment ================= */
.setup { gap: 18px; }
.setup-nav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.setup-nav button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 0; border-radius: var(--r); background: none; color: var(--text-2); font: 500 13px var(--display); }
.setup-nav button:hover { background: var(--hover); color: var(--text); }
.setup-nav .seg-n { min-width: 18px; text-align: center; }
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; scroll-margin-top: 64px; }
.section-head .btn { flex: none; }
.count-pill { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 7px; border-radius: var(--r); background: var(--panel-3); color: var(--muted); font: 500 11px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-line { padding: 14px 16px; border: 1px dashed var(--field); border-radius: var(--r); color: var(--muted); font-size: 13.5px; }
.tag-pill { justify-self: start; align-self: center; display: inline-block; font: 600 12px/20px var(--mono); padding: 0 7px; color: #15181f; background: #f4f5f0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 0 rgba(0, 0, 0, .25); white-space: nowrap; }

.location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; margin-top: 12px; }
.field-block { display: grid; gap: 8px; align-content: start; }
.field-block .numfield { justify-self: start; }
.field-block .field > .btn { justify-self: start; }
.cab-usage { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.cab-usage b { color: var(--text); font: 600 13.5px var(--display); font-variant-numeric: tabular-nums; }

/* New stacks */
.stack-card-head { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.stack-card-head .field { max-width: 380px; min-width: 220px; }
.stack-card-head .count-pill { margin-bottom: 7px; }
.members-wrap { overflow-x: auto; }
table.members td { white-space: nowrap; }
.model-select { min-width: 300px; }
.port-spec { display: inline-flex; gap: 6px; align-items: center; }
.port-spec select { width: 76px; }

/* A unit: its front, what it is, and its size */
.unit-list { display: grid; gap: 10px; }
.setup-unit { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); }
.unit-thumb { align-self: stretch; display: grid; align-content: center; padding: 8px; border-radius: var(--r); background: #05070a; box-shadow: inset 0 0 0 1px #000, inset 0 6px 14px rgba(0, 0, 0, .7); overflow: hidden; }
.unit-thumb .port { pointer-events: none; }
.unit-main { display: grid; gap: 6px; min-width: 0; }
.unit-top { display: flex; align-items: center; gap: 10px; }
.unit-top input { flex: 1; min-width: 0; max-width: 360px; font: 600 14px var(--display); }
.unit-model { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.unit-model b { font: 600 14.5px var(--display); }
.unit-model .linkbtn { font-size: 13px; }
.unit-specs { font: 11.5px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.unit-side { display: flex; align-items: flex-end; gap: 10px; }
.setup-unit .cards { grid-column: 1 / -1; display: grid; gap: 8px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line-2); }
.setup-unit .cards-title { align-self: start; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.card-slot select { width: 100%; min-width: 0; }
.card-slot.fitted > span { color: var(--accent-text); }

/* ================= Choosing a make and model ================= */
.modal.picker { width: min(1180px, 96vw); height: min(820px, 92vh); grid-template-rows: auto auto minmax(0, 1fr); gap: 14px; padding: 22px 24px; overflow: hidden; }
.picker-head { display: flex; align-items: center; gap: 12px; }
.picker-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.picker-crumbs { display: flex; align-items: center; gap: 8px; font: 500 14px var(--display); color: var(--muted); }
.picker-crumbs button { border: 0; background: none; padding: 4px 6px; border-radius: 6px; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.picker-crumbs button:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.picker-crumbs .on { color: var(--text); text-decoration: none; }
.picker-search { margin-left: auto; max-width: 360px; }
.make-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; align-content: start; overflow: auto; padding: 2px; }
.make-tile { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); color: var(--text); }
.make-tile b { font: 600 17px var(--display); }
.make-tile small { color: var(--muted); font-size: 12.5px; }
.make-tile:hover { border-color: var(--accent); background: var(--panel-3); }
.picker-body { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; min-height: 0; }
.model-list { overflow: auto; display: grid; gap: 14px; align-content: start; padding-right: 6px; }
.model-family { display: grid; gap: 2px; }
.model-family-name { position: sticky; top: 0; z-index: 1; padding: 4px 10px; background: var(--panel); font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.model-item { display: grid; gap: 2px; text-align: left; border: 0; background: none; border-radius: var(--r); padding: 8px 10px; color: var(--text); }
.model-item b { font: 500 14px var(--ui); }
.model-item small { font-size: 12px; color: var(--muted); }
.model-item:hover { background: var(--hover); }
.model-item[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.model-detail { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.model-detail-head { display: grid; gap: 2px; }
.model-detail-head small { color: var(--muted); font: 500 12.5px var(--display); }
.model-detail-head h3 { font-size: 22px; }
.pick-stage { overflow: auto; padding: 16px; border-radius: var(--r-lg); background: #05070a; box-shadow: inset 0 0 0 1px #000, inset 0 10px 24px rgba(0, 0, 0, .7); }
.pick-faces { display: grid; gap: 10px; width: 1180px; }
.unit-thumb .fit-in { width: 1180px; }
.picker-foot { padding-top: 2px; }
.model-empty { display: grid; place-items: center; height: 100%; border: 1px dashed var(--field); border-radius: var(--r-lg); color: var(--muted); }
.fit { position: relative; width: 100%; overflow: hidden; }
.fit-in { width: max-content; transform-origin: 0 0; }

@media (max-width: 900px) {
  .setup-unit { grid-template-columns: 1fr; }
  .unit-side { flex-wrap: wrap; }
  .picker-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
}
.move-note { padding: 6px 10px; border-radius: var(--r); background: var(--accent-soft); color: var(--text-2); font-size: 12.5px; }
.move-note b { color: var(--text); font-weight: 600; }
.unit-row.off { opacity: .55; cursor: default; }

/* ---- first-time tips ---- */
.tip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r); background: var(--panel); }
.tip-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent-text); }
.tip-body b { display: block; font: 600 15px var(--display); margin-bottom: 3px; }
.tip-body p { color: var(--text-2); max-width: 92ch; line-height: 1.5; }
.tip-actions { display: grid; gap: 6px; justify-items: end; }
.tip-actions .linkbtn { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .tip { grid-template-columns: auto minmax(0, 1fr); } .tip-actions { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; } }

/* ---- getting started ---- */
.guide { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 20px 22px; margin-bottom: 20px; display: grid; gap: 14px; }
.guide-head { display: flex; gap: 16px; align-items: flex-start; }
.guide-head h2 { font: 600 19px var(--display); }
.guide-head p { color: var(--muted); margin-top: 2px; }
.guide-bar { height: 4px; background: var(--panel-3); overflow: hidden; }
.guide-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.guide-steps { list-style: none; display: grid; gap: 4px; }
.guide-steps li { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--r); }
.guide-steps li.next { background: var(--accent-soft); }
.guide-steps li b { font-weight: 600; }
.guide-steps li p { color: var(--muted); font-size: 13px; }
.guide-steps li.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--off); }
.guide-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r); border: 1px solid var(--field); color: var(--muted); font: 500 12px var(--mono); }
.guide-steps li.next .guide-mark { border-color: var(--accent); color: var(--accent-text); }
.guide-steps li.done .guide-mark { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-text); }

/* ---- welcome ---- */
.welcome { width: min(600px, 94vw); }
.welcome-steps { list-style: none; display: grid; gap: 10px; }
.welcome-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); }
.welcome-steps li > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent-text); font: 500 14px var(--mono); }
.welcome-steps p { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ---- help and account ---- */
.help, .acct { width: min(640px, 94vw); }
.help section, .acct-sec { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.help h3, .acct-sec h3 { font: 600 16px var(--display); }
.help-steps { padding-left: 20px; display: grid; gap: 4px; color: var(--text-2); }
.help .keys { margin: 0; }
a.btn { text-decoration: none; }
label.btn { cursor: pointer; }
label.btn.disabled { opacity: .45; pointer-events: none; }
.acct-head { display: flex; gap: 16px; align-items: flex-start; }
.acct-skipped { margin: 4px 0 0 18px; font-size: 13px; display: grid; gap: 2px; }
.danger-zone h3 { color: var(--bad-text); }

/* ---- sharing ---- */
.members { list-style: none; display: grid; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.members li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; }
.members li + li { border-top: 1px solid var(--line-2); }
.fshare { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent-text); }
.fshare svg { width: 13px; height: 13px; }
.welcome-steps, .guide-steps, .members { padding: 0; margin-left: 0; margin-right: 0; }
/* ---- two-step verification ---- */
.twostep-setup { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.twostep-setup img { border-radius: var(--r); background: #fff; image-rendering: pixelated; }
.twostep-setup p { margin-bottom: 8px; }
.twostep-setup .key { font-size: 13px; letter-spacing: .04em; user-select: all; }
.codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 28px; padding: 12px 16px 12px 36px; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); font-size: 15px; }
.share-add select, .members select { width: auto; }
.role-help { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.role-help div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.role-help dt { font-weight: 600; color: var(--text); }
.lactions .danger { color: var(--bad-text); }
.ro-banner { margin-bottom: 16px; }

/* ---- team page ---- */
.team .card h2 { margin-top: 0; }
.groups, .grants { list-style: none; margin: 0; padding: 0; }
.groups > li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.grants { margin-top: 6px; display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.group-edit { width: min(720px, 100% - 32px); }
.group-edit fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px 12px; margin: 0; display: grid; gap: 6px; }
.group-edit legend { font-weight: 600; padding: 0 6px; }
.group-edit .check { display: flex; gap: 8px; align-items: center; }
.grant-table { width: 100%; border-collapse: collapse; }
.grant-table td { padding: 3px 6px 3px 0; }
.grant-table td:first-child select { width: 100%; }
.twostep-required { max-width: 640px; text-align: left; }
.acct-version { font-size: 13px; color: var(--muted); }
/* Unpatch/Repatch: a panel's count next to its name */
/* The cab is dark in both themes, so the count is written in a fixed light ink (in the light theme --text is dark and could not be read here). */
.slot-badge { height: 20px; font-size: 11.5px; background: rgba(200, 115, 58, .2); color: #eceae4; }
.slot-badge.done { background: rgba(125, 154, 106, .22); color: #eceae4; }
/* Shorter screens: a tighter rail, so all of it fits (it scrolls if it still doesn't). */
@media (max-height: 820px) {
  .rail { gap: 2px; padding: 10px 8px 8px; }
  .rail-logo { margin-bottom: 6px; }
  .rail-btn { gap: 3px; padding: 6px 2px 5px; }
  .rail-sep { margin: 4px 10px; }
}
/* A paid feature on a Free plan */
.paid-only { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.paid-only .grow { flex: 1 1 260px; min-width: 0; }
.paid-only h2 { margin: 0 0 4px; }
.step svg + svg, .step .lock { width: 13px; height: 13px; opacity: .6; margin-left: 2px; }
/* ---- plan and billing (Team page) ---- */
.plan h2 { margin: 0; }
.plan-head { align-items: flex-start; }
.plan-usage { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 13.5px; }
.plan-usage b { color: var(--text); font-variant-numeric: tabular-nums; }
.plan-switch { align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.seg .save { font-size: 11px; font-weight: 600; color: var(--accent); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.plan-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); }
.plan-card.current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.plan-card h3 { margin: 0; font-size: 15px; }
.plan-card .price { margin: 0 0 4px; color: var(--muted); }
.plan-card .price b { font: 700 24px var(--wide); color: var(--text); }
.plan-card ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--text-2); flex: 1; }
.plan-card .btn { width: 100%; justify-content: center; }
.plan-seats { align-items: flex-end; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.plan-seats input { width: 110px; }
.plan > .hint:last-of-type { margin-top: 14px; }
.earnings { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 12px 0; }
.earnings div { display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.earnings dt { font: 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.earnings dd { margin: auto 0 0; padding-top: 2px; font: 700 16px var(--wide); font-variant-numeric: tabular-nums; }
.auth-terms { text-align: center; }
.admin td.nowrap { white-space: nowrap; }
.admin > .seg { justify-self: start; }
.form-row { align-items: flex-end; }
.referral-apply { gap: 8px; }
.referral-apply input { width: 170px; text-transform: uppercase; }
.hint.struck { text-decoration: line-through; }

/* Switch platform picker on the paste screens: label, then the list, then what to paste. */
.platform-pick { max-width: 460px; margin: 4px 0 12px; }
.platform-pick .hint { font-weight: 400; }
.platform-pick code { font: 12.5px var(--mono, ui-monospace, Consolas, monospace); padding: 1px 6px; border-radius: 5px; background: var(--panel-2, rgba(255, 255, 255, .06)); border: 1px solid var(--line); color: var(--text); }

/*
 * The landing page scrolls inside .landing, so the page itself never needs to. A password manager's menu (Dashlane,
 * for one) hangs below the email box: without these, it made a scrollbar come and go, which moved the box, which moved
 * the menu, many times a second. Now nothing it adds can change the page's width.
 */
html.on-landing { overflow: hidden; }
.landing { scrollbar-gutter: stable; }

/* Defaults: where a location's VLANs, colours and baselines come from, and the editor for each level. */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain:disabled { opacity: .62; }
.defaults-source .row { gap: 10px; flex-wrap: wrap; }
.defaults-none { margin: 0 0 4px; }
.defaults-part h2 { margin-bottom: 6px; }
.baseline-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-top: 10px; }
.baseline-item textarea { font-family: var(--mono); font-size: 12.5px; min-height: 84px; }

/* On a narrow screen the side panel starts hidden; this button (and the rail's Panel button) shows it. */
.ctx-open { display: none; }
@media (max-width: 900px) { .app.collapsed .ctx-open { display: inline-flex; margin: 12px 18px 0; } }

/* On a narrow screen the defaults bar's text and buttons wrap instead of running off the card. */
.defaults-source .grow { flex: 1 1 260px; min-width: 0; }
.defaults-source .btn { white-space: normal; text-align: center; }