/* ══════════════════════════════════════════════════════════════════
   PlatformCanvas — dark "mission control" theme
   ══════════════════════════════════════════════════════════════════ */

:root {
    --bg: #05080f;
    --bg-2: #0a0f1c;
    --panel: rgba(11, 17, 30, .82);
    --panel-solid: #0c1220;
    --panel-2: rgba(20, 29, 48, .7);
    --border: rgba(148, 163, 184, .12);
    --border-strong: rgba(148, 163, 184, .22);
    --text: #e6edf7;
    --muted: #8d9ab0;
    --dim: #5b6779;
    --brand: #22d3ee;
    --brand-2: #a78bfa;
    --good: #22c55e;
    --warn: #f59e0b;
    --bad: #ef4444;
    --unknown: #64748b;
    --radius: 14px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --shadow: 0 20px 50px -20px rgba(0, 0, 0, .8);
    --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand); text-decoration: none; }
code, .mono { font-family: var(--mono); }
h1, h2, h3 { margin: 0; }

::selection { background: rgba(34, 211, 238, .3); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .3); }
::-webkit-scrollbar-track { background: transparent; }

/* ───────────── shell ───────────── */

.app-shell {
    display: grid;
    grid-template-columns: 72px 1fr;
    height: 100vh;
}

.rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 0;
    background: linear-gradient(180deg, #0b1120 0%, #070b14 100%);
    border-right: 1px solid var(--border);
    z-index: 40;
}

.rail-logo {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 8px 24px -6px rgba(34, 211, 238, .55);
    margin-bottom: 14px;
    transition: transform .3s var(--ease);
}
.rail-logo:hover { transform: rotate(-8deg) scale(1.06); }

.rail-btn {
    position: relative;
    width: 58px;
    padding: 9px 0 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 500;
    transition: background .2s, color .2s;
}
.rail-btn:hover { background: rgba(148, 163, 184, .08); color: var(--text); }
.rail-btn.active { color: var(--brand); background: rgba(34, 211, 238, .08); }
.rail-btn.active::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand);
    box-shadow: 0 0 12px var(--brand);
}
.rail-btn.muted { color: var(--dim); }
.rail-spacer { flex: 1; }
.rail-badge {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--bad);
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    box-shadow: 0 0 10px rgba(239, 68, 68, .7);
    animation: pop .4s var(--ease);
}

.app-main { min-width: 0; height: 100vh; overflow: clip; position: relative; }

/* ───────────── generic controls ───────────── */

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.icon-btn:hover:not(:disabled) { background: rgba(148, 163, 184, .1); color: var(--text); }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.sm { width: 26px; height: 26px; border-radius: 8px; }
.icon-btn.danger:hover { color: #fca5a5; background: rgba(239, 68, 68, .12); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: rgba(148, 163, 184, .06);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .1s, box-shadow .2s;
}
.btn:hover { background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .35); }
.btn:active { transform: scale(.97); }
.btn.primary {
    border-color: transparent;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    color: #fff;
    box-shadow: 0 6px 20px -6px rgba(34, 211, 238, .6);
}
.btn.primary:hover { box-shadow: 0 8px 26px -6px rgba(34, 211, 238, .8); }
.btn.danger { color: #fca5a5; border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .06); }
.btn.danger:hover { background: rgba(239, 68, 68, .14); }
.btn.danger.solid { background: #dc2626; color: #fff; border-color: transparent; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.wide { width: 100%; height: 38px; border-style: dashed; }

input:not([type=checkbox]), select, textarea {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: rgba(2, 6, 14, .55);
    color: var(--text);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus {
    border-color: rgba(34, 211, 238, .6);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .14);
    background: rgba(2, 6, 14, .8);
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9ab0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 30px; }
select option, select optgroup { background: #0c1220; }
input[type=number] { font-family: var(--mono); }
input[type=checkbox] { accent-color: var(--brand); width: 16px; height: 16px; }

.segmented {
    display: flex;
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(2, 6, 14, .5);
}
.segmented button {
    flex: 1;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .2s, color .2s, box-shadow .2s;
}
.segmented button:hover { color: var(--text); }
.segmented button.active {
    background: linear-gradient(135deg, rgba(34, 211, 238, .22), rgba(167, 139, 250, .22));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .35);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted);
}

kbd {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text);
    background: rgba(148, 163, 184, .06);
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
.dot.status-online { color: var(--good); }
.dot.status-degraded { color: var(--warn); }
.dot.status-offline { color: var(--bad); }
.dot.status-unknown, .dot.status-unmonitored { color: var(--unknown); }
.dot.impacted { color: transparent; border: 2px dashed var(--warn); }

/* ───────────── canvas page ───────────── */

.canvas-page { display: flex; flex-direction: column; height: 100%; overflow: clip; }

.topbar {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 66px;
    padding: 0 16px;
    flex: none;
    background: linear-gradient(180deg, #0c1220, #090e1a);
    border-bottom: 1px solid var(--border);
}
.topbar-spacer { flex: 1; }

.board-picker { position: relative; }
.board-btn {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(148, 163, 184, .04);
    text-align: left;
    transition: background .2s, border-color .2s;
}
.board-btn:hover { background: rgba(148, 163, 184, .09); border-color: var(--border-strong); }
.board-btn .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--muted); }
.board-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.board-name { font-size: 15px; font-weight: 700; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-rename { height: 26px !important; width: 220px !important; font-weight: 700; }

.menu-backdrop { position: fixed; inset: 0; z-index: 1; }
.menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2;
    width: 290px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: #0c1220;
    box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .4);
    animation: menu-in .18s var(--ease);
}
.menu-section { padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.menu-item span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.menu-item small { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.menu-item .icon { color: var(--muted); }
.menu-item:hover { background: rgba(148, 163, 184, .1); }
.menu-item.active { background: rgba(34, 211, 238, .1); color: var(--brand); }
.menu-item.active .icon { color: var(--brand); }
.menu-item.danger, .menu-item.danger .icon { color: #fca5a5; }
.menu-item.danger:hover { background: rgba(239, 68, 68, .12); }
.hidden-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.health-ring { position: relative; width: 44px; height: 44px; flex: none; }
.health-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.health-ring circle { fill: none; stroke-width: 3.2; }
.ring-bg { stroke: rgba(148, 163, 184, .12); }
.ring-fg { stroke-linecap: round; transition: stroke-dasharray .8s var(--ease), stroke .4s; }
.ring-fg.good { stroke: var(--good); filter: drop-shadow(0 0 4px rgba(34, 197, 94, .7)); }
.ring-fg.warn { stroke: var(--warn); filter: drop-shadow(0 0 4px rgba(245, 158, 11, .7)); }
.ring-fg.idle { stroke: transparent; }
.ring-fg.bad { stroke: var(--bad); filter: drop-shadow(0 0 5px rgba(239, 68, 68, .8)); }
.health-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; }

.kpis { display: flex; gap: 6px; }
.kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 76px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(148, 163, 184, .035);
    text-align: left;
    transition: border-color .3s, background .3s, box-shadow .3s;
}
.kpi label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); cursor: inherit; }
.kpi b { font-size: 18px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi.good b { color: #4ade80; }
.kpi.warn.lit { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }
.kpi.warn.lit b { color: #fbbf24; }
.kpi.bad { cursor: default; }
.kpi.bad.lit {
    cursor: pointer;
    border-color: rgba(239, 68, 68, .6);
    background: rgba(239, 68, 68, .1);
    animation: kpi-alarm 1.6s ease-in-out infinite;
}
.kpi.bad.lit b, .kpi.bad.lit label { color: #fca5a5; }

.search { position: relative; display: flex; align-items: center; width: 290px; }
.search > .icon { position: absolute; left: 11px; color: var(--dim); pointer-events: none; }
.search input { padding-left: 34px; padding-right: 34px; border-radius: 11px; }
.search > .icon-btn { position: absolute; right: 5px; }
.search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: #0c1220;
    box-shadow: var(--shadow);
    animation: menu-in .15s var(--ease);
}
.search-empty { padding: 14px; text-align: center; color: var(--dim); }
.search-hit {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: left;
}
.search-hit:hover { background: rgba(148, 163, 184, .1); }
.hit-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.hit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hit-text b { font-size: 13px; font-weight: 600; }
.hit-text small { font-family: var(--mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--unknown); }
.hit-dot.status-online { background: var(--good); }
.hit-dot.status-degraded { background: var(--warn); }
.hit-dot.status-offline { background: var(--bad); }

.workspace { position: relative; flex: 1; display: flex; min-height: 0; overflow: clip; }

/* ───────────── palette ───────────── */

.palette {
    position: relative;
    z-index: 12;
    display: flex;
    flex-direction: column;
    width: 244px;
    flex: none;
    background: linear-gradient(180deg, rgba(10, 15, 27, .95), rgba(7, 11, 20, .95));
    border-right: 1px solid var(--border);
    transition: width .3s var(--ease);
}
.palette.collapsed { width: 60px; }
.palette-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 10px 16px; }
.palette.collapsed .palette-head { padding: 12px 0 6px; justify-content: center; }
.palette-head h3 { font-size: 13px; font-weight: 700; }
.palette-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--dim); }
.palette-search { position: relative; margin: 0 12px 8px; }
.palette-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--dim); }
.palette-search input { height: 32px; padding-left: 31px; font-size: 13px; }
.palette-scroll { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.palette-cat { margin: 14px 4px 8px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.palette-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(148, 163, 184, .03);
    cursor: grab;
    user-select: none;
    transition: transform .15s var(--ease), border-color .2s, background .2s, box-shadow .2s;
}
.palette-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.palette-item:active { cursor: grabbing; transform: scale(.96); }
.palette-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.palette-label { font-size: 11px; font-weight: 500; color: var(--muted); text-align: center; line-height: 1.2; }
.palette-item:hover .palette-label { color: var(--text); }
.palette-tips {
    display: grid;
    gap: 5px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--dim);
}
.palette-mini { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 12px; }
.palette-mini-item {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    color: var(--accent);
    cursor: grab;
    transition: background .15s, transform .15s;
}
.palette-mini-item:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); transform: scale(1.08); }

/* ───────────── viewport & world ───────────── */

.canvas-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    background-color: var(--bg);
    background-image:
        radial-gradient(circle, rgba(148, 163, 184, .2) 1px, transparent 1.4px),
        linear-gradient(to right, rgba(148, 163, 184, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, .045) 1px, transparent 1px),
        linear-gradient(180deg, #070b15, #04060c);
    background-size: 24px 24px, 120px 120px, 120px 120px, auto;
}
.canvas-viewport::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 25% 15%, rgba(34, 211, 238, .07), transparent 70%),
        radial-gradient(ellipse 50% 45% at 85% 90%, rgba(167, 139, 250, .07), transparent 70%);
}
.canvas-viewport.panning { cursor: grabbing; }
.canvas-viewport.connecting { cursor: crosshair; }
.canvas-viewport.drop-target { box-shadow: inset 0 0 0 2px rgba(34, 211, 238, .4), inset 0 0 80px rgba(34, 211, 238, .08); }
.canvas-viewport.animate-view { transition: background-position .45s var(--ease), background-size .45s var(--ease); }

.canvas-world {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    will-change: transform;
}
.canvas-world.animate-view { transition: transform .45s var(--ease); }

/* zones */
.zone {
    position: absolute;
    z-index: 0;
    border: 1.5px dashed color-mix(in srgb, var(--zone) 50%, transparent);
    border-radius: 20px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--zone) 8%, transparent), color-mix(in srgb, var(--zone) 3%, transparent));
    transition: border-color .2s, box-shadow .2s;
    animation: fade-in .4s ease;
}
.zone.selected { border-style: solid; border-color: var(--zone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--zone) 15%, transparent); }
.zone-header {
    position: absolute;
    top: -14px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 36px);
    padding: 4px 12px 4px 8px;
    border: 1px solid color-mix(in srgb, var(--zone) 45%, transparent);
    border-radius: 999px;
    background: #0a101d;
    color: var(--zone);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: move;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6);
}
.zone-header span { overflow: hidden; text-overflow: ellipsis; }
.zone-header .icon { opacity: .6; }
.zone.dragging .zone-header { cursor: grabbing; }
.zone-resize {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    border-right: 2px solid color-mix(in srgb, var(--zone) 60%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--zone) 60%, transparent);
    border-bottom-right-radius: 10px;
    opacity: .5;
    transition: opacity .2s;
}
.zone:hover .zone-resize, .zone.selected .zone-resize { opacity: 1; }

/* edges */
.edge-layer { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.edge-line { fill: none; stroke: rgba(56, 189, 248, .4); stroke-width: 2; transition: stroke .3s, stroke-width .2s; }
.edge.dashed .edge-line { stroke-dasharray: 7 6; }
.edge-flow {
    fill: none;
    stroke: #67e8f9;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 1.5 22;
    opacity: .75;
    animation: flow 1.1s linear infinite;
    pointer-events: none;
}
.edge-particle { fill: #cffafe; filter: drop-shadow(0 0 4px #22d3ee) drop-shadow(0 0 8px #22d3ee); pointer-events: none; }
.edge:hover .edge-line { stroke-width: 3; stroke: rgba(103, 232, 249, .75); }
.edge.related .edge-line { stroke: rgba(103, 232, 249, .85); stroke-width: 2.6; }
.edge.selected .edge-line { stroke: #f0f9ff; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .9)); }

.edge-warn .edge-line { stroke: rgba(245, 158, 11, .55); }
.edge-warn .edge-flow { stroke: #fcd34d; animation-duration: 1.8s; }
.edge-warn .edge-particle { fill: #fef3c7; filter: drop-shadow(0 0 5px #f59e0b); }

.edge-down .edge-line { stroke: rgba(239, 68, 68, .8); stroke-dasharray: 3 6; animation: edge-flicker 1.2s steps(2) infinite; }
.edge-down .edge-flow { stroke: #fca5a5; stroke-dasharray: 2 9.75; animation-duration: .5s; }
.edge-down .edge-particle { fill: #fee2e2; filter: drop-shadow(0 0 6px #ef4444) drop-shadow(0 0 12px #ef4444); }

.edge-idle .edge-line { stroke: rgba(100, 116, 139, .3); stroke-dasharray: 4 6; }

.arrow-ok { fill: rgba(56, 189, 248, .85); }
.arrow-warn { fill: #f59e0b; }
.arrow-down { fill: #ef4444; }
.arrow-idle { fill: rgba(100, 116, 139, .5); }
.arrow-sel { fill: #f0f9ff; }

.temp-edge { fill: none; stroke: #22d3ee; stroke-width: 2.5; stroke-dasharray: 8 3.75; animation: flow .6s linear infinite; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .8)); }

.edge-label {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
    padding: 2px 9px;
    border: 1px solid rgba(56, 189, 248, .35);
    border-radius: 999px;
    background: rgba(6, 10, 19, .92);
    color: #a5f3fc;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, color .2s, box-shadow .2s;
}
.edge-label:hover, .edge-label.selected { border-color: #67e8f9; color: #fff; box-shadow: 0 0 12px rgba(34, 211, 238, .4); }
.edge-label.edge-warn { border-color: rgba(245, 158, 11, .5); color: #fde68a; }
.edge-label.edge-down { border-color: rgba(239, 68, 68, .6); color: #fecaca; }
.edge-label.edge-idle { border-color: rgba(100, 116, 139, .3); color: var(--dim); }

/* nodes */
.node {
    --st: var(--unknown);
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 214px;
    min-height: 74px;
    padding: 12px 14px 12px 13px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(24, 33, 54, .97), rgba(11, 17, 30, .97));
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
    cursor: grab;
    user-select: none;
    animation: node-in .45s var(--ease) backwards;
    transition: border-color .3s, box-shadow .3s, transform .18s var(--ease), opacity .3s, filter .3s;
}
.node::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    opacity: .85;
}
.node:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
.node.dragging {
    z-index: 50;
    cursor: grabbing;
    transform: scale(1.04) rotate(-.6deg);
    box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .9), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
    transition: box-shadow .2s, transform .2s;
}
.node.selected { outline: 2px solid var(--brand); outline-offset: 4px; }
.node.connect-target { outline: 2px dashed var(--brand); outline-offset: 5px; transform: scale(1.03); }
.node.dimmed { opacity: .22; filter: grayscale(.7); }
.node.flash { animation: node-flash 1.4s var(--ease); }

.node-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 13px;
    color: var(--accent);
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 22px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.node-main { min-width: 0; flex: 1; }
.node-name { font-size: 13.5px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-addr { margin-top: 1px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-foot { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.node-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--st) 14%, transparent);
    color: color-mix(in srgb, var(--st) 75%, white);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.node-status .dot { width: 6px; height: 6px; color: var(--st); }
.node-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    border-radius: 6px;
    background: rgba(148, 163, 184, .08);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}
.node-env {
    position: absolute;
    top: -9px;
    right: 14px;
    padding: 1px 7px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: #0b1222;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.node-port {
    position: absolute;
    right: -8px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: #0a101d;
    cursor: crosshair;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s, transform .2s var(--ease), background .2s, box-shadow .2s;
}
.node:hover .node-port, .connecting .node-port, .node.selected .node-port { opacity: 1; transform: scale(1); }
.node-port:hover { background: var(--accent); box-shadow: 0 0 14px var(--accent); transform: scale(1.3) !important; }
.node-ring { position: absolute; inset: -1px; border-radius: 16px; pointer-events: none; }

/* node status variants */
.node.status-online { --st: var(--good); }
.node.status-online .node-status .dot { animation: dot-pulse 2.2s ease-out infinite; }
.node.status-degraded { --st: var(--warn); border-color: rgba(245, 158, 11, .5); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .85), 0 0 26px -6px rgba(245, 158, 11, .45); }
.node.status-unknown .node-status .dot { animation: blink 1s steps(2) infinite; }
.node.status-unmonitored .node-status { background: rgba(100, 116, 139, .1); color: var(--dim); }
.node.status-unmonitored .node-status .dot { color: #475569; }

.node.status-offline {
    --st: var(--bad);
    border-color: rgba(239, 68, 68, .7);
    background: linear-gradient(160deg, rgba(58, 18, 24, .97), rgba(22, 10, 15, .97));
    animation: node-in .45s var(--ease) backwards, node-alarm 1.6s ease-in-out infinite;
}
.node.status-offline::before { background: var(--bad); box-shadow: 0 0 12px var(--bad); }
.node.status-offline .node-icon { color: #f87171; background: rgba(239, 68, 68, .14); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .45), 0 0 22px -4px rgba(239, 68, 68, .8); }
.node.status-offline .node-ring { border: 2px solid rgba(239, 68, 68, .7); animation: radar 1.8s ease-out infinite; }
.node.status-offline .node-status { background: rgba(239, 68, 68, .9); color: #fff; }
.node.status-offline .node-status .dot { color: #fff; animation: blink .8s steps(2) infinite; }

.node.impacted:not(.status-offline) { border: 1px dashed rgba(245, 158, 11, .75); }
.node.impacted:not(.status-offline) .node-ring { box-shadow: 0 0 24px -6px rgba(245, 158, 11, .5); }
.node-impact { display: inline-grid; place-items: center; width: 20px; height: 18px; border-radius: 6px; background: rgba(245, 158, 11, .16); color: #fbbf24; animation: blink 1.6s ease-in-out infinite; }
.node.impacted.status-unmonitored .node-status, .node.impacted.status-unknown .node-status { background: rgba(245, 158, 11, .14); color: #fcd34d; }

/* overlays */
.empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    pointer-events: none;
    animation: fade-in .6s ease;
}
.empty-orb {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin-bottom: 8px;
    border-radius: 30px;
    color: var(--brand);
    background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, .25), rgba(167, 139, 250, .12));
    box-shadow: 0 0 60px -10px rgba(34, 211, 238, .5), inset 0 0 0 1px rgba(34, 211, 238, .3);
    animation: float 4s ease-in-out infinite;
}
.empty-state h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.empty-state p { max-width: 460px; margin: 0; color: var(--muted); line-height: 1.6; }

.legend {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 5;
    display: flex;
    gap: 14px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(8, 12, 22, .85);
    backdrop-filter: blur(10px);
    color: var(--muted);
    font-size: 11px;
    transform: translateX(-50%);
    cursor: default;
    transition: left .35s var(--ease);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .dot { width: 7px; height: 7px; }

.view-tools {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(8, 12, 22, .85);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    cursor: default;
    transition: right .35s var(--ease);
}
.minimap { display: block; width: 210px; height: 130px; border-radius: 10px; background: rgba(2, 6, 14, .7); cursor: pointer; }
.zoom-ctl { display: flex; align-items: center; justify-content: space-between; }
.zoom-label {
    min-width: 58px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
}
.zoom-label:hover { background: rgba(148, 163, 184, .1); }

/* ───────────── inspector ───────────── */

.inspector {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 390px;
    background: linear-gradient(180deg, rgba(12, 18, 32, .97), rgba(8, 12, 22, .98));
    border-left: 1px solid var(--border-strong);
    box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .9);
    backdrop-filter: blur(16px);
    transform: translateX(105%);
    transition: transform .38s var(--ease);
}
.inspector.open { transform: none; }
.workspace:has(.inspector.open) .view-tools { right: 406px; }
.workspace:has(.inspector.open) .legend { left: calc(50% - 195px); }

.inspector-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 14px 16px 18px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.inspector-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 120% at 0% 0%, color-mix(in srgb, var(--accent, #22d3ee) 16%, transparent), transparent 60%);
    pointer-events: none;
}
.inspector-hero.status-offline::before { background: radial-gradient(ellipse 90% 140% at 0% 0%, rgba(239, 68, 68, .28), transparent 65%); }
.hero-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 16px;
    color: var(--accent);
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 30px -8px var(--accent);
}
.hero-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 15px;
    height: 15px;
    border: 3px solid #0c1220;
    border-radius: 50%;
    background: var(--unknown);
}
.status-online .hero-dot { background: var(--good); box-shadow: 0 0 10px var(--good); }
.status-degraded .hero-dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.status-offline .hero-dot { background: var(--bad); box-shadow: 0 0 12px var(--bad); animation: blink .8s steps(2) infinite; }
.hero-text { position: relative; flex: 1; min-width: 0; }
.hero-name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspector-hero .icon-btn { position: relative; align-self: flex-start; }

.tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--border); }
.tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px 11px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    transition: color .2s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 10px rgba(34, 211, 238, .7);
    animation: tab-in .25s var(--ease);
}
.tab-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(34, 211, 238, .16); color: var(--brand); font-size: 10.5px; line-height: 18px; text-align: center; }
.tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); }

.inspector-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; animation: fade-in .25s ease; }

.status-banner {
    --st: var(--unknown);
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid color-mix(in srgb, var(--st) 35%, transparent);
    border-radius: var(--radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--st) 14%, transparent), color-mix(in srgb, var(--st) 4%, transparent));
}
.status-banner.status-online { --st: var(--good); }
.status-banner.status-degraded { --st: var(--warn); }
.status-banner.status-offline { --st: var(--bad); animation: banner-alarm 1.6s ease-in-out infinite; }
.status-big { display: flex; align-items: center; gap: 10px; color: color-mix(in srgb, var(--st) 70%, white); font-size: 20px; font-weight: 800; }
.status-big .dot { width: 11px; height: 11px; color: var(--st); box-shadow: 0 0 12px var(--st); }
.status-online .status-big .dot { animation: dot-pulse 2.2s ease-out infinite; }
.status-since { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; }
.status-msg { margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; word-break: break-word; }
.status-msg a { cursor: pointer; }
.impacted-msg { display: flex; align-items: center; gap: 6px; color: #fcd34d; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.stat { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.stat label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.stat b { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.spark-wrap { padding: 12px 12px 8px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.spark-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; color: var(--dim); }
.sparkline { display: block; }
.spark-bar { fill: var(--unknown); transition: height .3s; }
.spark-bar.status-online { fill: rgba(34, 197, 94, .75); }
.spark-bar.status-degraded { fill: rgba(245, 158, 11, .85); }
.spark-bar.status-offline { fill: rgba(239, 68, 68, .55); }
.spark-empty { stroke: rgba(148, 163, 184, .2); stroke-dasharray: 3 3; }

.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }

.kv-list { display: grid; gap: 6px; margin-bottom: 16px; }
.kv { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(2, 6, 14, .4); }
.kv span { width: 64px; flex: none; font-size: 11px; color: var(--dim); }
.kv code { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.deps { display: grid; gap: 6px; margin-bottom: 16px; }
.deps label { margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dep-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(148, 163, 184, .05);
    font-size: 12px;
    transition: background .15s, border-color .15s;
}
.dep-chip:hover { background: rgba(148, 163, 184, .12); }
.dep-chip .dot { width: 7px; height: 7px; color: var(--unknown); }
.dep-chip.status-online .dot { color: var(--good); }
.dep-chip.status-degraded .dot { color: var(--warn); }
.dep-chip.status-offline { border-color: rgba(239, 68, 68, .5); }
.dep-chip.status-offline .dot { color: var(--bad); }

.desc { margin: 0 0 14px; color: var(--muted); line-height: 1.55; }
.notes-preview { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); cursor: pointer; transition: border-color .2s; }
.notes-preview:hover { border-color: var(--border-strong); }
.notes-preview label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); cursor: inherit; }
.notes-preview pre { max-height: 140px; margin: 8px 0 0; overflow: hidden; font-family: var(--font); font-size: 12.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; mask-image: linear-gradient(180deg, #000 70%, transparent); }

.form { display: grid; gap: 12px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row:has(.port) { grid-template-columns: 1fr 92px; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.form-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}
.form-section::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.hint { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.5; }
.check { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.input-group { position: relative; display: flex; align-items: center; }
.input-group input { padding-right: 64px; }
.input-group .icon-btn { position: absolute; right: 4px; }
.input-group .icon-btn:first-of-type { right: 32px; }
.input-group .icon-btn:last-of-type { right: 4px; }

.notes-editor { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.notes-editor textarea {
    min-height: 420px;
    flex: 1;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.6;
    font-size: 13px;
}

.logins { display: grid; gap: 10px; }
.empty-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 10px; color: var(--dim); text-align: center; }
.empty-mini p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.cred {
    padding: 12px 12px 10px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(167, 139, 250, .06), rgba(34, 211, 238, .03));
    animation: fade-up .3s var(--ease);
}
.cred.editing { border-color: rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .04); }
.cred-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--brand-2); }
.cred-head b { flex: 1; color: var(--text); font-size: 13.5px; }
.cred-tools { display: flex; gap: 2px; }
.cred-row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.cred-row span { width: 64px; flex: none; font-size: 11px; color: var(--dim); }
.cred-row code { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.cred-row code.revealed { color: #fde68a; }
.cred-row code.muted { color: var(--dim); font-family: var(--font); font-style: italic; }
.cred-notes { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--muted); font-size: 12px; }

/* connection inspector */
.flow-diagram { display: flex; align-items: center; gap: 6px; padding: 16px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; flex: none; color: var(--accent); text-align: center; }
.flow-node span { color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.25; word-break: break-word; }
.flow-arrow { position: relative; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee); }
.flow-arrow.dashed { background: repeating-linear-gradient(90deg, #22d3ee 0 6px, transparent 6px 11px); }
.flow-arrow::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid #22d3ee; border-right: 0; }
.flow-arrow::before { content: ''; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #cffafe; box-shadow: 0 0 10px #22d3ee; animation: travel 1.6s linear infinite; }
.flow-arrow span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; color: #a5f3fc; white-space: nowrap; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
    width: 28px;
    height: 28px;
    border: 2px solid transparent;
    border-radius: 9px;
    background: var(--sw);
    box-shadow: 0 0 14px -4px var(--sw);
    transition: transform .15s var(--ease);
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { border-color: #fff; transform: scale(1.12); }

/* ───────────── toasts & activity ───────────── */

.toast-stack {
    position: fixed;
    top: 78px;
    right: 18px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 370px;
    pointer-events: none;
}
.toast {
    --tc: var(--brand);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 12px 15px 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 16%, #0b1120), #0a0f1c 70%);
    box-shadow: var(--shadow), 0 0 40px -14px var(--tc);
    pointer-events: auto;
    animation: toast-in .45s var(--ease);
}
.toast.leaving { animation: toast-out .3s ease forwards; }
.toast-danger { --tc: var(--bad); }
.toast-warning { --tc: var(--warn); }
.toast-success { --tc: var(--good); }
.toast-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--tc) 20%, transparent); color: var(--tc); }
.toast-danger .toast-icon { animation: shake .5s ease .1s; }
.toast-body { flex: 1; min-width: 0; padding-top: 1px; }
.toast-title { font-weight: 700; font-size: 13.5px; }
.toast-detail { margin-top: 2px; font-size: 12px; color: var(--muted); word-break: break-word; }
.toast-action { align-self: center; height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--tc) 14%, transparent); color: #fff; font-size: 12px; font-weight: 600; }
.toast-close { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--dim); }
.toast-close:hover { color: var(--text); background: rgba(148, 163, 184, .1); }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tc); transform-origin: left; animation: shrink linear forwards; opacity: .7; }

.activity-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 72px;
    z-index: 35;
    display: flex;
    flex-direction: column;
    width: 360px;
    background: rgba(9, 14, 25, .98);
    border-right: 1px solid var(--border-strong);
    box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .9);
    backdrop-filter: blur(16px);
    transform: translateX(calc(-100% - 80px));
    transition: transform .38s var(--ease);
}
.activity-drawer.open { transform: none; }
.activity-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 18px 14px 14px 20px; border-bottom: 1px solid var(--border); }
.activity-drawer h3 { font-size: 16px; font-weight: 800; }
.activity-drawer header p { margin: 2px 0 0; color: var(--dim); font-size: 12px; }
.activity-list { flex: 1; overflow-y: auto; padding: 10px 10px 20px; }
.activity-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 30px; color: var(--dim); text-align: center; }
.activity-item { --ac: var(--unknown); position: relative; display: flex; gap: 12px; padding: 10px 8px 10px 12px; border-radius: 10px; animation: fade-up .3s var(--ease); }
.activity-item:hover { background: rgba(148, 163, 184, .05); }
.activity-item::before { content: ''; position: absolute; left: 15px; top: 26px; bottom: -10px; width: 1px; background: var(--border); }
.activity-item:last-child::before { display: none; }
.kind-danger { --ac: var(--bad); }
.kind-warning { --ac: var(--warn); }
.kind-success { --ac: var(--good); }
.kind-info { --ac: var(--brand); }
.activity-dot { position: relative; z-index: 1; width: 8px; height: 8px; flex: none; margin-top: 5px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 3px #0a0f1c, 0 0 10px var(--ac); }
.activity-text { flex: 1; min-width: 0; }
.activity-title { font-size: 13px; font-weight: 600; }
.activity-detail { margin-top: 2px; color: var(--muted); font-size: 12px; word-break: break-word; }
.activity-time { margin-top: 3px; color: var(--dim); font-family: var(--mono); font-size: 10.5px; }
.activity-go { align-self: flex-start; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--dim); }
.activity-go:hover { color: var(--brand); background: rgba(34, 211, 238, .1); }

/* ───────────── status wall ───────────── */

.wall-page { height: 100%; overflow-y: auto; padding: 28px 32px 60px; }
.wall-hero {
    --vc: var(--good);
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 26px 30px;
    margin-bottom: 30px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vc) 30%, transparent);
    border-radius: 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--vc) 12%, #0b1120), #0a0f1c 60%);
    box-shadow: var(--shadow), 0 0 80px -40px var(--vc);
}
.wall-hero.warn { --vc: var(--warn); }
.wall-hero.bad { --vc: var(--bad); }
.wall-hero::after {
    content: '';
    position: absolute;
    right: -120px;
    top: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--vc) 18%, transparent), transparent 70%);
    pointer-events: none;
}
.donut { position: relative; width: 132px; height: 132px; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg) scaleY(-1); }
.donut circle { fill: none; stroke-width: 4; }
.donut-bg { stroke: rgba(148, 163, 184, .1); }
.donut-seg { transition: stroke-dasharray .8s var(--ease); }
.donut-seg.good { stroke: var(--good); filter: drop-shadow(0 0 3px rgba(34, 197, 94, .6)); }
.donut-seg.warn { stroke: var(--warn); }
.donut-seg.bad { stroke: var(--bad); filter: drop-shadow(0 0 4px rgba(239, 68, 68, .7)); }
.donut-seg.unknown { stroke: var(--unknown); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-center b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.donut-center small { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.wall-verdict { flex: 1; min-width: 0; }
.verdict-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--vc) 16%, transparent); color: color-mix(in srgb, var(--vc) 70%, white); font-size: 12.5px; font-weight: 700; }
.verdict-pill .dot { color: var(--vc); box-shadow: 0 0 10px var(--vc); animation: dot-pulse 2s ease-out infinite; }
.wall-verdict h1 { margin-top: 10px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.wall-verdict p { margin: 4px 0 0; color: var(--muted); }
.wall-counts { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.wall-counts b { margin-right: 4px; font-size: 18px; font-weight: 800; }
.wall-counts .good b { color: #4ade80; }
.wall-counts .warn b { color: #fbbf24; }
.wall-counts .bad b { color: #f87171; }
.wall-counts .unknown b { color: var(--muted); }
.wall-filter { position: relative; z-index: 1; align-self: flex-start; }
.wall-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px; color: var(--dim); }
.wall-group { margin-bottom: 30px; }
.wall-group h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--muted); }
.wall-group h2 small { padding: 1px 8px; border-radius: 999px; background: rgba(148, 163, 184, .1); font-size: 11px; }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.wall-card {
    --st: var(--unknown);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(22, 31, 51, .9), rgba(11, 17, 30, .9));
    cursor: pointer;
    animation: fade-up .4s var(--ease) backwards;
    transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.wall-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--st); box-shadow: 0 0 14px var(--st); }
.wall-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.wall-card.status-online { --st: var(--good); }
.wall-card.status-degraded { --st: var(--warn); border-color: rgba(245, 158, 11, .35); }
.wall-card.status-offline { --st: var(--bad); border-color: rgba(239, 68, 68, .55); background: linear-gradient(160deg, rgba(58, 18, 24, .92), rgba(20, 10, 15, .92)); animation: fade-up .4s var(--ease) backwards, node-alarm 1.6s ease-in-out infinite; }
.wall-card.status-unmonitored { --st: #334155; opacity: .75; }
.wall-card-head { display: flex; align-items: center; gap: 12px; }
.wall-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
.wall-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wall-title b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-title small { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--st) 15%, transparent); color: color-mix(in srgb, var(--st) 70%, white); font-size: 11px; font-weight: 700; white-space: nowrap; }
.wall-status .dot { width: 7px; height: 7px; color: var(--st); }
.wall-card.status-online .wall-status .dot { animation: dot-pulse 2.2s ease-out infinite; }
.wall-card.status-offline .wall-status { background: var(--bad); color: #fff; }
.wall-card.status-offline .wall-status .dot { color: #fff; }
.wall-stats { display: flex; align-items: flex-end; gap: 14px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wall-stats span { display: flex; flex-direction: column; gap: 1px; }
.wall-stats label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.wall-stats .icon-btn { margin-left: auto; }
.wall-msg { padding: 7px 10px; border-radius: 8px; background: rgba(0, 0, 0, .25); color: #fca5a5; font-family: var(--mono); font-size: 11px; word-break: break-word; }
.wall-card.status-degraded .wall-msg { color: #fcd34d; }
.wall-unmonitored { color: var(--dim); font-size: 12px; }

/* ───────────── misc ───────────── */

.loading-screen { display: grid; place-items: center; height: 100%; }
.spinner { width: 42px; height: 42px; border: 3px solid rgba(34, 211, 238, .15); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }

#blazor-error-ui {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1000;
    display: none;
    padding: 12px 18px;
    border: 1px solid rgba(239, 68, 68, .5);
    border-radius: 12px;
    background: #1c0b10;
    color: #fecaca;
    box-shadow: var(--shadow);
    transform: translateX(-50%);
}
#blazor-error-ui .reload { margin-left: 10px; color: #fff; font-weight: 700; }
#blazor-error-ui .dismiss { margin-left: 14px; cursor: pointer; }

.blazor-error-boundary { padding: 1rem; background: #b32121; color: #fff; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ───────────── animations ───────────── */

@keyframes flow { to { stroke-dashoffset: -47; } }
@keyframes edge-flicker { 50% { opacity: .45; } }
@keyframes node-in { from { opacity: 0; transform: scale(.85) translateY(8px); } }
@keyframes node-alarm {
    0%, 100% { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .85), 0 0 0 1px rgba(239, 68, 68, .25), 0 0 24px -6px rgba(239, 68, 68, .5); }
    50% { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .85), 0 0 0 1px rgba(239, 68, 68, .6), 0 0 46px 0 rgba(239, 68, 68, .55); }
}
@keyframes radar { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes node-flash {
    0%, 100% { outline: 2px solid transparent; outline-offset: 4px; }
    20%, 60% { outline: 3px solid var(--brand); outline-offset: 10px; }
    40%, 80% { outline: 3px solid transparent; outline-offset: 4px; }
}
@keyframes dot-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); }
    70%, 100% { box-shadow: 0 0 0 6px transparent; }
}
@keyframes blink { 50% { opacity: .25; } }
@keyframes kpi-alarm { 50% { box-shadow: 0 0 22px -2px rgba(239, 68, 68, .55); } }
@keyframes banner-alarm { 50% { box-shadow: 0 0 30px -8px rgba(239, 68, 68, .6); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes tab-in { from { transform: scaleX(0); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes shake { 20%, 60% { transform: translateX(-3px) rotate(-6deg); } 40%, 80% { transform: translateX(3px) rotate(6deg); } }
@keyframes travel { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1280px) {
    .kpi:nth-child(5) { display: none; }
    .search { width: 220px; }
}
@media (max-width: 1080px) {
    .kpis { display: none; }
    .legend { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Agents
   ══════════════════════════════════════════════════════════════════ */

.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 5px; }
.btn.big { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 12px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.copied { color: #4ade80; border-color: rgba(34, 197, 94, .5); }
.spacer { flex: 1; }

.callout {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid rgba(34, 211, 238, .3);
    border-radius: 11px;
    background: rgba(34, 211, 238, .06);
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}
.callout > .icon { flex: none; margin-top: 1px; color: var(--brand); }
.callout.warn { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .07); }
.callout.warn > .icon { color: var(--warn); }
.callout.bad { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .08); color: #fecaca; }
.callout.bad > .icon { color: var(--bad); }
.callout b { color: var(--text); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(148, 163, 184, .06);
    font-family: var(--mono);
    font-size: 11.5px;
    transition: background .15s, border-color .15s;
}
.chip-btn:hover { background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .5); }
.chip-btn.active { background: rgba(34, 211, 238, .16); border-color: var(--brand); color: #fff; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(2, 5, 12, .65); backdrop-filter: blur(4px); animation: fade-in .2s ease; }
.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 151;
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: linear-gradient(180deg, #0e1526, #0a0f1c);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4), 0 0 80px -30px rgba(34, 211, 238, .4);
    transform: translate(-50%, -50%);
    animation: modal-in .32s var(--ease);
}
.modal.wide { width: min(820px, calc(100vw - 32px)); }
.modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 18px 16px 22px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.modal-head > div:nth-child(2) { flex: 1; }
.modal-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    box-shadow: 0 8px 24px -8px rgba(34, 211, 238, .7);
}
.modal-body { display: grid; gap: 14px; padding: 18px 22px 22px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); }
.modal-foot label { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.modal-foot select { width: 220px; }

.os-tabs { width: 260px; }
.os-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

.cmd { display: grid; gap: 6px; }
.cmd-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; }
.cmd-title small { color: var(--dim); font-weight: 400; }
.cmd-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    border: 1px solid rgba(34, 211, 238, .22);
    border-radius: 12px;
    background: #050911;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.cmd-box code { flex: 1; min-width: 0; color: #a5f3fc; font-size: 12px; line-height: 1.55; word-break: break-all; user-select: all; }
.cmd-box code::before { content: '$ '; color: var(--dim); }
.uninstall summary { cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 4px 0; }
.uninstall[open] summary { margin-bottom: 8px; }

.install-meta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.install-meta label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.install-meta .hint { margin-top: 8px; }
.bin-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; font-family: var(--mono); font-size: 11px; }
.bin-chip.ok { background: rgba(34, 197, 94, .1); color: #86efac; }
.bin-chip.missing { background: rgba(245, 158, 11, .1); color: #fcd34d; }
.key-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.key-row code { flex: 1; min-width: 0; padding: 5px 9px; border-radius: 8px; background: rgba(2, 6, 14, .6); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.waiting { display: grid; gap: 6px; }
.waiting-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); font-size: 13px; }
.waiting-row.ok { border-style: solid; border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .08); color: #bbf7d0; animation: fade-up .4s var(--ease); }
.waiting-row.ok .icon { color: var(--good); }
.radar-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.radar-dot::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--brand); border-radius: 50%; animation: ping-ring 1.6s ease-out infinite; }

/* page */
.agents-page { height: 100%; overflow-y: auto; padding: 28px 32px 60px; }
.agents-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 28px;
    margin-bottom: 26px;
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, .25);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(34, 211, 238, .1), rgba(167, 139, 250, .08) 50%, #0a0f1c);
    box-shadow: var(--shadow);
}
.agents-hero::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(34, 211, 238, .08) 0 1px, transparent 1px 34px);
    animation: spin 60s linear infinite;
    pointer-events: none;
}
.hero-orb {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    box-shadow: 0 14px 40px -10px rgba(34, 211, 238, .7);
    animation: float 5s ease-in-out infinite;
}
.agents-hero-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.agents-hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.agents-hero p { max-width: 720px; margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.agents-hero .btn { position: relative; z-index: 1; }

.agents-empty { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 30px 0 50px; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
.how-step { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-2); animation: fade-up .5s var(--ease) backwards; }
.how-step:nth-child(2) { animation-delay: .08s; }
.how-step:nth-child(3) { animation-delay: .16s; }
.how-step > b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: rgba(34, 211, 238, .14);
    color: var(--brand);
    font-size: 15px;
}
.how-step h4 { margin: 4px 0 6px; font-size: 14px; }
.how-step p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.agent-card {
    --st: var(--good);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(22, 31, 51, .92), rgba(11, 17, 30, .92));
    animation: fade-up .4s var(--ease) backwards;
    transition: border-color .2s, box-shadow .2s;
}
.agent-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: var(--st); box-shadow: 0 0 16px var(--st); }
.agent-card.offline { --st: var(--bad); border-color: rgba(239, 68, 68, .35); }
.agent-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.agent-card.expanded { grid-column: 1 / -1; }
.agent-head { display: flex; align-items: center; gap: 12px; }
.os-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; }
.os-windows { color: #60a5fa; background: rgba(96, 165, 250, .12); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .3); }
.os-linux { color: #fbbf24; background: rgba(251, 191, 36, .1); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .28); }
.os-macos, .os-other { color: var(--muted); background: rgba(148, 163, 184, .1); }
.agent-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agent-title b { font-size: 15.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.agent-title small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-title .rename { height: 28px; font-weight: 700; }
.agent-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--st) 15%, transparent); color: color-mix(in srgb, var(--st) 65%, white); font-size: 11.5px; font-weight: 700; }
.agent-status .dot { width: 7px; height: 7px; color: var(--st); }
.agent-card.online .agent-status .dot { animation: dot-pulse 2.2s ease-out infinite; }
.agent-card.offline .agent-status .dot { animation: blink 1s steps(2) infinite; }
.agent-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--dim); font-size: 11.5px; }
.agent-meta span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); }
.ip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-list.compact { margin-top: 7px; }
.ip-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(34, 211, 238, .18); background: rgba(34, 211, 238, .06); color: #a5f3fc; font: inherit;
    transition: background .15s, border-color .15s, transform .1s;
}
.ip-chip:hover { background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .4); }
.ip-chip:active { transform: scale(.97); }
.ip-chip code { font-family: var(--mono); font-size: 11.5px; background: none; padding: 0; color: inherit; }
.ip-chip small { color: var(--dim); font-size: 10.5px; }
.ip-chip.primary { border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .08); color: #bbf7d0; }
.ip-chip.active { box-shadow: 0 0 0 2px rgba(96, 165, 250, .55); }
.ip-star { font-style: normal; font-size: 10px; color: #4ade80; }
.ip-more { margin-left: 3px; padding: 0 4px; border-radius: 5px; background: rgba(148, 163, 184, .16); font-size: 9.5px; }
.agent-gauges { display: flex; align-items: center; gap: 14px; }
.agent-quick { display: grid; gap: 4px; margin-left: auto; text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agent-quick label { margin-right: 6px; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.agent-nostats { padding: 16px; border: 1px dashed var(--border); border-radius: 12px; color: var(--dim); font-size: 12.5px; text-align: center; }
.agent-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-roles:empty { display: none; }
.role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(148, 163, 184, .05); font-size: 12px; }
.role-chip small { color: var(--dim); }
button.role-chip:hover { border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .08); }
.role-chip.gateway { border-color: rgba(52, 211, 153, .35); color: #6ee7b7; }
/* Wraps onto a second line on narrow cards instead of spilling out of the card. */
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.agent-actions .btn { white-space: nowrap; flex: none; }
.agent-actions .spacer { flex: 1 1 0; min-width: 0; }
.add-menu { position: relative; }
.menu.up { top: auto; bottom: calc(100% + 6px); width: 240px; }
.agent-details { padding-top: 6px; animation: fade-up .3s var(--ease); }
.agent-details .server-stats { max-width: 760px; margin: 0 auto 4px; }

/* gauges */
.gauge { --gc: var(--good); position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gauge.g-warn { --gc: var(--warn); }
.gauge.g-bad { --gc: var(--bad); }
.gauge svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.gauge.small svg { width: 58px; height: 58px; }
.gauge circle { fill: none; stroke-width: 3; }
.g-bg { stroke: rgba(148, 163, 184, .12); }
.g-fg { stroke: var(--gc); stroke-linecap: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gc) 70%, transparent)); transition: stroke-dasharray .8s var(--ease), stroke .3s; }
.gauge.g-bad .g-fg { animation: blink 1.4s ease-in-out infinite; }
.g-center { position: absolute; top: 0; left: 0; right: 0; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge.small .g-center { height: 58px; }
.g-center b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gauge.small .g-center b { font-size: 13px; }
.g-center b small { margin-left: 1px; font-size: .6em; color: var(--muted); }
.g-center span { color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.g-label { color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.g-sub { color: var(--muted); font-size: 11px; text-align: center; white-space: nowrap; }

/* history chart */
.history-chart { display: block; }
.hc-grid { stroke: rgba(148, 163, 184, .07); stroke-width: 1; }
.hc-cpu, .hc-mem { fill: none; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hc-cpu { stroke: #22d3ee; filter: drop-shadow(0 0 3px rgba(34, 211, 238, .6)); }
.hc-mem { stroke: #a78bfa; }

/* server stats panel */
.server-stats { display: grid; gap: 14px; margin-bottom: 14px; }
.gauge-row { display: flex; justify-content: space-around; gap: 8px; padding: 14px 6px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.chart-card { padding: 10px 12px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.chart-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; font-size: 11.5px; color: var(--muted); }
.chart-head small { margin-left: auto; color: var(--dim); }
.chart-head span { display: inline-flex; align-items: center; gap: 6px; }
.legend-cpu, .legend-mem { width: 10px; height: 3px; border-radius: 2px; background: #22d3ee; }
.legend-mem { background: #a78bfa; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.info-grid > div { min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.info-grid label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.info-grid b { display: block; margin-top: 2px; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.stats-section { grid-column: 1 / -1; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.bar-list, .nic-list, .proc-list { display: grid; gap: 8px; }
.bar-item { display: grid; gap: 5px; }
.bar-label { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.bar-label small { color: var(--dim); font-size: 10.5px; }
.bar-label span { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 7px; overflow: hidden; border-radius: 4px; background: rgba(148, 163, 184, .1); }
.bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #059669, #34d399); transition: width .6s var(--ease); }
.bar i.warn { background: linear-gradient(90deg, #d97706, #fbbf24); }
.bar i.bad { background: linear-gradient(90deg, #dc2626, #f87171); box-shadow: 0 0 10px rgba(239, 68, 68, .6); }
.nic { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.nic-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.nic-head small { color: var(--dim); font-size: 11px; }
.nic-ips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.nic-ips code { padding: 1px 7px; border-radius: 6px; background: rgba(34, 211, 238, .08); color: #a5f3fc; font-size: 11px; }
.nic-io { display: flex; gap: 16px; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.nic-io .rx { color: #4ade80; }
.nic-io .tx { color: #60a5fa; }
.proc { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 10px; font-size: 12px; }
.proc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.proc-mem { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.proc .bar i { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

.via-msg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #6ee7b7; }
.via-msg b { color: var(--text); }
.mini-pill { padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.mini-pill.on { background: rgba(34, 197, 94, .15); color: #86efac; }
.mini-pill.off { background: rgba(239, 68, 68, .15); color: #fca5a5; }

/* node card meters & badges */
.node.has-meters { width: 234px; }
.node-meters { display: grid; gap: 3px; margin-top: 8px; }
.meter { --mc: var(--good); display: grid; grid-template-columns: 26px 1fr 30px; align-items: center; gap: 6px; font-size: 9.5px; }
.meter.m-warn { --mc: var(--warn); }
.meter.m-bad { --mc: var(--bad); }
.meter-label { color: var(--dim); font-weight: 700; letter-spacing: .06em; }
.meter-bar { height: 4px; overflow: hidden; border-radius: 2px; background: rgba(148, 163, 184, .12); }
.meter-bar i { display: block; height: 100%; border-radius: 2px; background: var(--mc); box-shadow: 0 0 6px var(--mc); transition: width .6s var(--ease); }
.meter-val { color: var(--muted); font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.node-agent-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 2px solid #0e1628;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    color: #fff;
}
.node-badge.via { background: rgba(52, 211, 153, .14); color: #6ee7b7; }

/* scan dialog */
.scan-form { display: flex; align-items: flex-end; gap: 10px; }
.scan-form .grow { flex: 1; }
.scan-form .btn { height: 36px; }
.scan-progress { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid rgba(34, 211, 238, .3); border-radius: 14px; background: rgba(34, 211, 238, .05); }
.scan-progress b { display: block; font-size: 14px; }
.scan-progress small { color: var(--muted); font-size: 12px; }
.radar {
    position: relative;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid rgba(34, 211, 238, .5);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(34, 211, 238, .25) 0 2px, transparent 3px),
        repeating-radial-gradient(circle, transparent 0 7px, rgba(34, 211, 238, .2) 7px 8px);
    overflow: hidden;
}
.radar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(34, 211, 238, .55), transparent 30%);
    animation: spin 1.6s linear infinite;
}
.scan-summary { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.scan-summary b { color: var(--text); }
.scan-table { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.scan-row {
    display: grid;
    grid-template-columns: auto auto minmax(140px, 1.2fr) 70px 2fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-2);
    cursor: pointer;
    animation: fade-up .3s var(--ease) backwards;
    transition: border-color .15s, background .15s;
}
.scan-row:hover { border-color: var(--border-strong); }
.scan-row.selected { border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .06); }
.scan-host { min-width: 0; display: flex; flex-direction: column; }
.scan-host b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-host small { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.scan-ping { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.scan-ports { display: flex; flex-wrap: wrap; gap: 4px; }
.port-chip { padding: 1px 7px; border-radius: 6px; background: rgba(167, 139, 250, .12); color: #c4b5fd; font-size: 10.5px; font-weight: 600; }
.on-canvas { padding: 2px 8px; border-radius: 999px; background: rgba(34, 197, 94, .12); color: #86efac; font-size: 10.5px; font-weight: 700; white-space: nowrap; }

@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
@keyframes ping-ring { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.6); } }

@media (max-width: 900px) {
    .how { grid-template-columns: 1fr; }
    .install-meta { grid-template-columns: 1fr; }
}

.wall-meters { margin-top: 0; gap: 5px; }
.wall-meters .meter { grid-template-columns: 30px 1fr 34px; font-size: 10.5px; }
.wall-meters .meter-bar { height: 6px; }

/* ══════════════════════════════════════════════════════════════════
   Network scanner
   ══════════════════════════════════════════════════════════════════ */

.scanner-page { position: relative; height: 100%; overflow-y: auto; padding: 28px 32px 0; }
.scanner-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid rgba(52, 211, 153, .25);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(34, 211, 238, .07) 50%, #0a0f1c);
    box-shadow: var(--shadow);
}
.scanner-hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.scanner-hero p { max-width: 760px; margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.scan-orb { background: linear-gradient(135deg, #10b981, #06b6d4); box-shadow: 0 14px 40px -10px rgba(16, 185, 129, .7); }
.oui-status {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: none;
    max-width: 260px;
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}
.oui-status > .icon { color: var(--dim); }
.oui-status.ok > .icon { color: var(--good); }
.oui-status small { color: var(--dim); }

.scanner-controls {
    display: flex;
    gap: 22px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--panel-2);
}
.ctl-block { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ctl-block.grow { flex: 1; }
.ctl-block > label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.agent-pills { display: flex; flex-wrap: wrap; gap: 6px; max-width: 420px; }
.agent-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(2, 6, 14, .4);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.agent-pill .os-icon { width: 26px; height: 26px; border-radius: 8px; }
.agent-pill .dot { width: 7px; height: 7px; color: var(--good); }
.agent-pill.off .dot { color: var(--bad); }
.agent-pill.off { opacity: .6; }
.agent-pill:hover { border-color: rgba(52, 211, 153, .5); }
.agent-pill.active { border-color: #34d399; background: rgba(52, 211, 153, .1); box-shadow: 0 0 0 3px rgba(52, 211, 153, .12); }
.scanner-controls .scan-form { display: flex; gap: 10px; align-items: center; }
.scanner-controls .scan-form input { max-width: 260px; height: 42px; font-size: 14px; }
.segmented.mode { width: 170px; }
.segmented.mode button { height: 34px; }
.scan-go { background: linear-gradient(135deg, #10b981, #06b6d4); box-shadow: 0 8px 24px -8px rgba(16, 185, 129, .8); }
.chip-btn small { margin-left: 4px; color: var(--dim); font-family: var(--font); }

.scanner-main { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 22px; align-items: center; margin-bottom: 22px; }
.radar-col { display: flex; justify-content: center; }
.summary-col { display: grid; gap: 16px; align-content: start; }

/* radar */
.radar-wrap { position: relative; width: min(100%, 400px); aspect-ratio: 1; }
.radar-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar-ring { fill: none; stroke: rgba(52, 211, 153, .18); stroke-width: 1; }
.radar-ring:last-of-type { stroke: rgba(52, 211, 153, .35); }
.radar-axis { stroke: rgba(52, 211, 153, .12); stroke-width: 1; }
.radar-tick { stroke: rgba(52, 211, 153, .35); stroke-width: 1.4; }
.radar-beam {
    position: absolute;
    inset: 2.5%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(52, 211, 153, .5) 0deg, rgba(52, 211, 153, .12) 22deg, transparent 70deg);
    mask-image: radial-gradient(circle, #000 69%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s;
}
.radar-wrap.running .radar-beam { opacity: 1; animation: radar-sweep 2.6s linear infinite; }
.radar-wrap { filter: drop-shadow(0 0 40px rgba(16, 185, 129, .12)); }
.radar-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.radar-center b { font-size: 34px; font-weight: 800; color: #d1fae5; text-shadow: 0 0 20px rgba(52, 211, 153, .6); font-variant-numeric: tabular-nums; }
.radar-center b small { font-size: .5em; color: #6ee7b7; }
.radar-center span { color: #6ee7b7; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.blip { cursor: pointer; transition: transform 1s var(--ease); }
.blip-dot { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); transition: r .2s; }
.blip-halo { fill: none; stroke: var(--c); stroke-width: 1.5; opacity: 0; }
.blip:hover .blip-dot { r: 8; }
.blip.chosen .blip-halo { opacity: .55; }
.blip.fresh .blip-halo { animation: blip-ping 1.2s ease-out 2; transform-origin: center; transform-box: fill-box; }
.blip.fresh .blip-dot { animation: blip-pop .5s var(--ease); transform-origin: center; transform-box: fill-box; }
.blip.gateway .blip-dot { stroke: #fff; stroke-width: 1.5; }

/* status & legend */
.scan-status { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-2); }
.scan-status-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-chip { padding: 4px 12px; border-radius: 999px; background: rgba(148, 163, 184, .1); color: var(--muted); font-size: 12.5px; font-weight: 700; }
.status-chip.live { background: rgba(52, 211, 153, .14); color: #6ee7b7; animation: blink 1.6s ease-in-out infinite; }
.status-chip.good { background: rgba(34, 197, 94, .14); color: #86efac; }
.status-chip.bad { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.muted { color: var(--dim); font-size: 12.5px; }
.progress { height: 6px; overflow: hidden; border-radius: 3px; background: rgba(148, 163, 184, .1); }
.progress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #10b981, #22d3ee); box-shadow: 0 0 12px rgba(34, 211, 238, .6); transition: width .6s var(--ease); }
.fact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fact-row span { display: grid; gap: 2px; }
.fact-row label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fact-row b { font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
    --c: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--c) 7%, transparent);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    transition: background .2s, border-color .2s, transform .15s;
    animation: fade-up .35s var(--ease) backwards;
}
.cat-chip .icon { color: var(--c); }
.cat-chip b { padding: 0 7px; border-radius: 8px; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); font-size: 11.5px; }
.cat-chip:hover { transform: translateY(-1px); }
.cat-chip.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 18px -6px var(--c); }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* results */
.results-head { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; }
.results-head h2 { font-size: 17px; font-weight: 800; }
.dev-group { margin-bottom: 22px; }
.dev-group h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.dev-group h3 small { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: 11px; }
.grp-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.dev-card {
    position: relative;
    display: grid;
    gap: 9px;
    padding: 14px 14px 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(22, 31, 51, .9), rgba(11, 17, 30, .92));
    cursor: pointer;
    user-select: none;
    animation: fade-up .35s var(--ease) backwards;
    transition: border-color .2s, box-shadow .2s, transform .15s, opacity .2s;
}
.dev-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.dev-card.selected { border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 12px 30px -16px var(--c); }
.dev-card:not(.selected) { opacity: .72; }
.dev-card.fresh { animation: dev-in .6s var(--ease); }
.dev-top { display: flex; align-items: center; gap: 11px; }
.dev-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--c); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 28%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.dev-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dev-title b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-title small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-check { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 1.5px solid var(--border-strong); border-radius: 7px; color: transparent; transition: background .15s, border-color .15s, color .15s; }
.dev-card.selected .dev-check { border-color: var(--c); background: var(--c); color: #04121a; }
.dev-addr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dev-addr code { padding: 1px 7px; border-radius: 6px; background: rgba(34, 211, 238, .08); color: #a5f3fc; font-size: 11.5px; }
.dev-addr code.mac { background: rgba(148, 163, 184, .08); color: var(--muted); font-size: 10.5px; }
.dev-ping { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: 11px; }
.dev-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.dev-meta span + span::before { content: '·'; margin-right: 12px; color: var(--dim); }
.dev-web { overflow: hidden; color: #c4b5fd; font-size: 12px; font-style: italic; white-space: nowrap; text-overflow: ellipsis; }
.dev-ports { display: flex; flex-wrap: wrap; gap: 4px; }
.port-chip small { margin-left: 3px; opacity: .6; font-family: var(--mono); }
.port-chip.more { background: rgba(148, 163, 184, .1); color: var(--muted); }
.dev-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.badge { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.badge.gw { background: rgba(56, 189, 248, .16); color: #7dd3fc; }
.badge.self { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
.badge.in { background: rgba(34, 197, 94, .14); color: #86efac; }
.badge.on { background: rgba(234, 179, 8, .14); color: #fde68a; }
.badge.priv { background: rgba(148, 163, 184, .12); color: var(--muted); }
.badge.wait { background: rgba(34, 211, 238, .1); color: #67e8f9; animation: blink 1.2s ease-in-out infinite; }
.why { margin-left: auto; color: var(--dim); font-size: 11px; text-decoration: underline dotted; cursor: help; }
.scan-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px 60px; color: var(--dim); text-align: center; }

/* dock */
.dock-spacer { height: 110px; }
.section-dock {
    position: sticky;
    bottom: 16px;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 14px 18px;
    margin: 0 auto 16px;
    border: 1px solid rgba(52, 211, 153, .35);
    border-radius: 18px;
    background: rgba(10, 16, 28, .94);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), 0 0 50px -24px rgba(16, 185, 129, .6);
    backdrop-filter: blur(16px);
    animation: fade-up .4s var(--ease);
}
.dock-count { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.dock-count b { font-size: 26px; font-weight: 800; color: #6ee7b7; line-height: 1; }
.dock-count small { color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; }
.dock-field { display: grid; gap: 5px; min-width: 180px; }
.dock-field.grow { flex: 1; }
.dock-field label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dock-opts { display: grid; gap: 4px; }
.dock-opts .check { font-size: 12px; }
.section-dock .btn.primary { background: linear-gradient(135deg, #10b981, #06b6d4); }

/* scanned sections on the canvas */
.zone.section { border-width: 2px; border-radius: 26px; background: linear-gradient(180deg, color-mix(in srgb, var(--zone) 7%, transparent), color-mix(in srgb, var(--zone) 2%, transparent)); }
.zone.section .zone-header { top: -16px; padding: 6px 16px 6px 10px; font-size: 13.5px; box-shadow: 0 6px 22px -6px color-mix(in srgb, var(--zone) 50%, transparent); }
.zone.child { border-style: solid; border-width: 1px; border-color: color-mix(in srgb, var(--zone) 28%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--zone) 5%, transparent); }
.zone.child .zone-header { top: 8px; left: 12px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.zone.child .zone-header .icon { display: none; }
.zone.flash { animation: zone-flash 1.6s var(--ease); }
.node.missing { opacity: .5; border-style: dashed; }
.node-env.new-tag { border-color: rgba(52, 211, 153, .6); background: #052e22; color: #6ee7b7; }
.node-env.missing-tag { border-color: rgba(148, 163, 184, .4); color: var(--dim); }

/* inspector discovery panel */
.discovery-panel { --c: var(--brand); display: grid; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--c) 5%, transparent); }
.disc-head { display: flex; align-items: center; gap: 8px; color: var(--c); }
.disc-head b { flex: 1; color: var(--text); font-size: 13px; }
.disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.disc-grid .wide { grid-column: 1 / -1; }
.disc-grid label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.disc-grid b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes blip-ping { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.6); } }
@keyframes blip-pop { 0% { transform: scale(0); } 70% { transform: scale(1.6); } }
@keyframes dev-in { from { opacity: 0; transform: translateY(10px) scale(.96); box-shadow: 0 0 40px var(--c); } }
@keyframes zone-flash { 30%, 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--zone) 35%, transparent), 0 0 60px color-mix(in srgb, var(--zone) 50%, transparent); } }

@media (max-width: 1100px) {
    .scanner-main { grid-template-columns: 1fr; }
    .scanner-controls { flex-direction: column; }
    .section-dock { flex-wrap: wrap; }
}

.update-chip { padding: 0 8px; border-radius: 999px; background: rgba(245, 158, 11, .15); color: #fcd34d; font-family: var(--font); font-weight: 700; cursor: help; }

/* ══════════════════════════════════════════════════════════════════
   Sign-in, accounts & organizations
   ══════════════════════════════════════════════════════════════════ */

.auth-shell { position: relative; min-height: 100vh; height: 100vh; overflow-y: auto; background: radial-gradient(ellipse at 50% 35%, #0b1426, #04060c 70%); }
.auth-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.auth-grid {
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(circle, rgba(148, 163, 184, .16) 1px, transparent 1.4px),
        linear-gradient(to right, rgba(148, 163, 184, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, .04) 1px, transparent 1px);
    background-size: 26px 26px, 130px 130px, 130px 130px;
    transform: perspective(900px) rotateX(55deg) translateY(-8%);
    transform-origin: 50% 100%;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    animation: grid-drift 40s linear infinite;
}
.auth-glow { position: absolute; width: 640px; height: 640px; border-radius: 50%; filter: blur(80px); opacity: .5; }
.auth-glow.a { left: -160px; top: -200px; background: radial-gradient(circle, rgba(34, 211, 238, .35), transparent 65%); animation: float 9s ease-in-out infinite; }
.auth-glow.b { right: -200px; bottom: -240px; background: radial-gradient(circle, rgba(139, 92, 246, .35), transparent 65%); animation: float 11s ease-in-out infinite reverse; }
.auth-radar { position: absolute; left: 50%; top: 50%; width: min(150vh, 1300px); height: min(150vh, 1300px); transform: translate(-50%, -50%); opacity: .5; }
.auth-radar circle { fill: none; stroke: rgba(34, 211, 238, .12); }
.auth-radar line { stroke: rgba(34, 211, 238, .07); }
.auth-sweep {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(150vh, 1300px);
    height: min(150vh, 1300px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, rgba(34, 211, 238, .14), transparent 50deg);
    mask-image: radial-gradient(circle, #000 49%, transparent 50%);
    animation: auth-sweep 8s linear infinite;
}
.auth-blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); opacity: 0; animation: auth-blip 8s ease-out infinite; }

.auth-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; min-height: 100%; padding: 56px 20px 40px; justify-content: center; }
.auth-brand { display: flex; align-items: center; gap: 14px; animation: fade-up .6s var(--ease); }
.auth-brand b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.auth-brand small { color: var(--muted); font-size: 12.5px; }
.auth-logo { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 12px 36px -8px rgba(34, 211, 238, .7); }
.auth-card {
    width: min(420px, 100%);
    padding: 30px 30px 26px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(15, 22, 40, .92), rgba(9, 14, 26, .94));
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 90px -40px rgba(34, 211, 238, .5);
    backdrop-filter: blur(14px);
    animation: modal-in-static .55s var(--ease);
}
.auth-card.wide { width: min(560px, 100%); }
.auth-card h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.auth-sub { margin: 6px 0 18px; color: var(--muted); line-height: 1.5; }
.auth-step { margin-bottom: 8px; color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.auth-form { display: grid; gap: 14px; }
.auth-form .field label { font-size: 12px; }
.auth-form input:not([type=checkbox]) { height: 42px; font-size: 14px; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-card .callout { margin: 0 0 14px; }
.auth-foot { max-width: 420px; color: var(--dim); font-size: 12px; text-align: center; }
.validation-message { color: #fca5a5; font-size: 12px; }
.callout.good { border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .08); }
.callout.good > .icon { color: var(--good); }

.denied { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 40px; text-align: center; }
.denied h2 { font-size: 22px; font-weight: 800; }
.denied p { max-width: 460px; margin: 0; color: var(--muted); line-height: 1.55; }
.denied-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 24px; color: var(--brand); background: rgba(34, 211, 238, .1); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .3); }

/* user menu */
.user-menu { position: relative; margin-top: 6px; }
.avatar {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2, #7c3aed);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 0 0 2px #0b1120, 0 0 0 3px rgba(34, 211, 238, .35);
    transition: box-shadow .2s, transform .15s;
}
button.avatar:hover, .avatar.open { box-shadow: 0 0 0 2px #0b1120, 0 0 0 3px var(--brand), 0 0 20px rgba(34, 211, 238, .5); transform: scale(1.05); }
.avatar.big { width: 44px; height: 44px; font-size: 15px; }
.avatar.xl { width: 72px; height: 72px; font-size: 24px; }
.user-pop { left: calc(100% + 14px); top: auto; bottom: 0; width: 300px; z-index: 60; }
.user-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.user-head b { display: block; font-size: 14px; }
.user-head small { color: var(--muted); font-size: 12px; }
.org-current { display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px; }
.org-current b { display: block; font-size: 13px; }
.org-current small { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.org-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(135deg, rgba(34, 211, 238, .25), rgba(167, 139, 250, .25)); color: #e0f2fe; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .3); }
.org-mark.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
.org-mark.xl { width: 72px; height: 72px; border-radius: 22px; font-size: 28px; }
.org-mark.sys { color: #fff; background: linear-gradient(135deg, #f59e0b, #ef4444); }
.menu-form { margin: 0; }
.menu-form .menu-item { cursor: pointer; }
a.menu-item { text-decoration: none; }
.menu-note { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--dim); font-size: 12.5px; }
.view-only-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 600; }

/* read-only canvas */
.form-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-fieldset:disabled input, .form-fieldset:disabled select, .form-fieldset:disabled .segmented button { opacity: .65; cursor: not-allowed; }
.canvas-viewport.read-only .node { cursor: pointer; }
.canvas-viewport.read-only .node-port, .canvas-viewport.read-only .zone-resize { display: none; }
.canvas-viewport.read-only .zone-header { cursor: pointer; }
textarea[readonly] { opacity: .8; }

/* settings pages */
.settings-page { height: 100%; overflow-y: auto; padding: 28px 32px 60px; }
.settings-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    margin-bottom: 20px;
    border: 1px solid rgba(34, 211, 238, .2);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(167, 139, 250, .07) 55%, #0a0f1c);
    box-shadow: var(--shadow);
}
.settings-hero h1 { display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.settings-hero p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
.settings-hero .grow { flex: 1; min-width: 0; }
.admin-tabs { width: 260px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-page > .callout { margin: 0 0 16px; }
.panel { padding: 18px 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel-2); animation: fade-up .35s var(--ease) backwards; }
.panel.span-2 { grid-column: span 2; }
.panel h2 { margin-bottom: 14px; font-size: 15px; font-weight: 800; }
.saved-note { display: inline-flex; align-items: center; gap: 5px; color: #86efac; font-size: 12.5px; }
.rename-row { display: flex; gap: 8px; align-items: center; }
.big-input { height: 42px !important; font-size: 18px; font-weight: 700; max-width: 380px; }

.org-list, .member-table { display: grid; gap: 8px; }
.org-row, .member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(2, 6, 14, .35);
    flex-wrap: wrap;
}
.org-row.current { border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .05); }
.org-text, .member-name { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.org-text b, .member-name b { font-size: 14px; }
.org-text small, .member-name small { color: var(--muted); font-size: 12px; }
.member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1.2; min-width: 160px; }
.member-meta small { color: var(--dim); font-size: 11.5px; }
.member-row select { width: 120px; height: 32px; }
.member-spacer { width: 26px; }
.you { margin-left: 6px; padding: 0 6px; border-radius: 6px; background: rgba(34, 211, 238, .12); color: var(--brand); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.role-badge { padding: 2px 9px; border-radius: 999px; background: rgba(148, 163, 184, .12); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.role-badge.r-owner { background: rgba(245, 158, 11, .15); color: #fcd34d; }
.role-badge.r-admin { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
.role-badge.r-editor { background: rgba(34, 211, 238, .14); color: #67e8f9; }
.role-badge.r-viewer { background: rgba(148, 163, 184, .12); color: #cbd5e1; }
.role-badge.sys { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.role-badge.off { background: rgba(100, 116, 139, .2); color: var(--dim); }
.role-badge.pending { background: rgba(234, 179, 8, .14); color: #fde68a; }
.current-tag { padding: 2px 9px; border-radius: 999px; background: rgba(34, 211, 238, .14); color: var(--brand); font-size: 11px; font-weight: 700; }
.org-chip { padding: 1px 8px; border-radius: 6px; background: rgba(148, 163, 184, .08); color: var(--muted); font-size: 11px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.confirm-inline { display: flex; gap: 6px; align-items: center; }
.confirm-inline input { width: 200px; height: 30px; }
.secret-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.secret-row code { padding: 5px 10px; border-radius: 8px; background: #050911; color: #fde68a; font-size: 13px; letter-spacing: .04em; }
.role-legend { display: grid; gap: 10px; margin-bottom: 12px; }
.role-legend div { display: flex; align-items: center; gap: 10px; }
.role-legend .role-badge { width: 64px; text-align: center; }
.role-legend small { color: var(--muted); font-size: 12px; }

@keyframes grid-drift { to { background-position: 0 260px, 0 260px, 0 260px; } }
@keyframes auth-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes auth-blip { 0%, 60% { opacity: 0; transform: scale(.4); } 66% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1); } }
@keyframes modal-in-static { from { opacity: 0; transform: translateY(14px) scale(.98); } }

@media (max-width: 1100px) {
    .settings-grid { grid-template-columns: 1fr; }
    .panel.span-2 { grid-column: auto; }
}

.board-btn.renaming { grid-template-columns: auto; cursor: default; border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .06); }

.settings-gap { margin-top: 22px; margin-bottom: 8px; }
.admin-tabs { width: 360px; }

/* ── Link latency on connection lines ── */
.edge-label { display: inline-flex; align-items: center; gap: 6px; }
.edge-label.has-latency { padding: 2px 4px 2px 8px; }
.edge-label.has-latency:not(:has(.edge-text)) { padding-left: 4px; }
.lat { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 17px; white-space: nowrap; }
.lat b { font-weight: 800; }
.lat-ok { background: rgba(34, 197, 94, .16); color: #86efac; }
.lat-warn { background: rgba(245, 158, 11, .18); color: #fcd34d; }
.lat-bad { background: rgba(239, 68, 68, .2); color: #fca5a5; animation: blink 1.6s ease-in-out infinite; }
.lat-stale { background: rgba(100, 116, 139, .18); color: var(--dim); }
.link-latency { margin-bottom: 14px; }
.link-latency .form-section { margin: 4px 0 10px; }
.lat-row { display: grid; gap: 6px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.lat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.lat-dir { color: var(--muted); }
.lat-dir b { color: var(--text); font-weight: 600; }


/* ══════════════════════════════════════════════════════════════════
   Server canvas (one agent's services, ports, connections, specs)
   ══════════════════════════════════════════════════════════════════ */

.sc-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sc-title > div { display: grid; min-width: 0; }
.sc-title b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-title small { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.sc-status { --st: var(--good); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--st) 15%, transparent); color: color-mix(in srgb, var(--st) 65%, white); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sc-status .dot { width: 7px; height: 7px; color: var(--st); }
.sc-status.online .dot { animation: dot-pulse 2.2s ease-out infinite; }
.sc-status.offline { --st: var(--bad); }
.kpi b small { margin-left: 1px; color: var(--dim); font-size: 11px; font-weight: 600; }
.segmented.sm button { padding: 4px 10px; font-size: 12px; }
.sc-page .search { width: 240px; }
.sc-fresh { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.sc-spin { width: 13px; height: 13px; flex: none; border: 2px solid rgba(34, 211, 238, .25); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }

/* cards: compact versions of the board's node cards */
.node.sc-card { width: 230px; min-height: 0; height: 64px; gap: 10px; padding: 8px 12px 8px 10px; border-radius: 14px; }
.node.sc-card::before { top: 14px; bottom: 14px; }
.sc-card .node-ring { border-radius: 14px; }
.sc-card .node-icon { width: 36px; height: 36px; border-radius: 11px; }
.sc-card .node-name { font-size: 12.5px; }
.sc-card .node-addr { font-size: 10px; }
.sc-card .node-foot { margin-top: 4px; }
.sc-card .node-status { padding: 1px 7px 1px 6px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.sc-card.status-online .node-status .dot { animation: none; }
.sc-card .node-env { top: -8px; right: 12px; font-size: 8.5px; }
.node.sc-card.related { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 24px -6px var(--accent); }
.node.sc-card.status-unmonitored { opacity: .78; }
.node.sc-card.status-unmonitored .node-icon { filter: grayscale(.6); }
.node.sc-card.status-offline { animation: node-in .45s var(--ease) backwards, node-alarm 2.4s ease-in-out infinite; }
.sc-meter { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(148, 163, 184, .1); }
.sc-meter i { display: block; height: 100%; border-radius: 2px; background: var(--good); box-shadow: 0 0 6px var(--good); transition: width .6s var(--ease); }
.sc-meter i.warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.sc-meter i.bad { background: var(--bad); box-shadow: 0 0 6px var(--bad); }

.node.sc-host { flex-direction: column; align-items: stretch; gap: 0; width: 320px; height: 132px; min-height: 0; padding: 14px 16px; border-radius: 18px;
    background: linear-gradient(160deg, rgba(14, 40, 58, .97), rgba(10, 17, 30, .97));
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .9), 0 0 40px -14px rgba(34, 211, 238, .55), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sc-host-head { display: flex; align-items: center; gap: 12px; }
.sc-host .node-icon { width: 46px; height: 46px; }
.sc-host .node-name { font-size: 16px; font-weight: 800; }
.sc-host .node-meters { margin-top: 10px; }
.sc-host .node-foot { margin-top: 8px; }
.sc-host .node-ring { border-radius: 18px; }

/* lines */
.edge-local .edge-line { stroke: rgba(167, 139, 250, .6); stroke-dasharray: 5 5; }
.edge-local .edge-flow { stroke: #c4b5fd; }
.arrow-local { fill: rgba(167, 139, 250, .85); }
.sc-page .edge-idle .edge-line { stroke: rgba(96, 165, 250, .28); stroke-dasharray: none; }
.edge.faded { opacity: .12; }
.edge-label.sc-count { padding: 1px 7px; font-size: 10px; }
.edge-label.edge-local { border-color: rgba(167, 139, 250, .5); color: #ddd6fe; }
.legend .sc-line { display: inline-block; width: 18px; height: 0; border-top: 2px solid rgba(56, 189, 248, .75); }
.legend .sc-line.local { border-top: 2px dashed rgba(167, 139, 250, .85); }

.sc-banner {
    position: absolute; top: 16px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100% - 40px));
    padding: 12px 16px; border: 1px solid rgba(34, 211, 238, .35); border-radius: 14px; background: rgba(8, 14, 26, .92); backdrop-filter: blur(10px);
    box-shadow: var(--shadow); transform: translateX(-50%); cursor: default; animation: fade-up .4s var(--ease);
}
.sc-banner > .icon { flex: none; color: var(--brand); }
.sc-banner div { display: grid; gap: 3px; }
.sc-banner b { font-size: 13px; }
.sc-banner span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.sc-banner.warn { border-color: rgba(245, 158, 11, .45); }
.sc-banner.warn > .icon { color: var(--warn); }
.sc-banner.subtle { padding: 7px 12px; border-color: var(--border); }
.sc-banner.subtle > .icon { color: var(--dim); }
.sc-banner.subtle span { font-size: 11.5px; }
.workspace:has(.inspector.open) .sc-banner { left: calc(50% - 195px); }

/* inspector */
.sc-kind { padding: 1px 8px; border-radius: 6px; background: rgba(148, 163, 184, .1); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sc-rows { display: grid; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: rgba(2, 6, 14, .35); }
.sc-row { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--border); font-size: 12px; cursor: copy; transition: background .15s; }
.sc-row:first-child { border-top: 0; }
.sc-row:hover { background: rgba(34, 211, 238, .06); }
.sc-row span { color: var(--dim); }
.sc-row b { min-width: 0; font-family: var(--mono); font-size: 11.5px; font-weight: 500; overflow-wrap: anywhere; }
.sc-desc { margin: -4px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.sc-bigmeter { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sc-bigmeter .bar { flex: 1; height: 9px; }
.sc-bigmeter b { font-family: var(--mono); font-size: 18px; }
.sc-links { display: grid; gap: 6px; margin-bottom: 14px; }
.sc-link {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 11px;
    background: rgba(148, 163, 184, .04); text-align: left; transition: background .15s, border-color .15s, transform .1s;
}
.sc-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sc-link:active { transform: scale(.99); }
.sc-link-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sc-link-text { display: grid; flex: 1; min-width: 0; }
.sc-link-text b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-link-text small { color: var(--dim); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-link i { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.sc-link.status-offline { border-color: rgba(239, 68, 68, .4); }
.sc-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-peer-list { display: grid; gap: 2px; font-size: 12px; }
.sc-peer-list div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.sc-peer-list div:nth-child(odd) { background: rgba(148, 163, 184, .05); }
.sc-peer-list span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* entry points */
.agent-open { color: inherit; }
.agent-open:hover b { color: var(--brand); }
.btn.sc-open { margin-bottom: 14px; border-style: solid; border-color: rgba(34, 211, 238, .35); color: #a5f3fc; background: rgba(34, 211, 238, .06); }
.btn.sc-open:hover { background: rgba(34, 211, 238, .14); }


/* ══════════════════════════════════════════════════════════════════
   Maintenance, runbooks, certificates, status pages, audit, patches
   ══════════════════════════════════════════════════════════════════ */

/* maintenance */
.maint { display: grid; gap: 10px; margin-bottom: 16px; }
.maint-state { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid rgba(96, 165, 250, .35); border-radius: 12px; background: rgba(96, 165, 250, .07); color: #bfdbfe; }
.maint-state > .icon { flex: none; margin-top: 2px; }
.maint-state div { display: grid; gap: 2px; }
.maint-state b { color: var(--text); font-size: 13px; }
.maint-state small { color: var(--muted); font-size: 11.5px; }
.maint.upcoming .maint-state { border-style: dashed; }
.maint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.maint-label { color: var(--dim); font-size: 12px; margin-right: 2px; }
.maint-reason { font-size: 12.5px; }
.maint-schedule { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.maint-schedule label { display: grid; gap: 4px; color: var(--dim); font-size: 11.5px; }
.maint-schedule input { width: 200px; color-scheme: dark; }
.bad-text { color: #fca5a5; }
.maint-modal { width: min(520px, calc(100vw - 32px)); }
.maint-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px dashed rgba(96, 165, 250, .5); border-radius: 999px;
    background: rgba(96, 165, 250, .08); color: #bfdbfe; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.maint-chip.active { border-style: solid; background: rgba(96, 165, 250, .16); box-shadow: 0 0 18px -6px rgba(96, 165, 250, .7); }
.status-msg.maint-msg { color: #bfdbfe; }
.node.maintenance { filter: grayscale(.75); opacity: .62; }
.node.maintenance.status-offline { animation: node-in .45s var(--ease) backwards; border-color: rgba(96, 165, 250, .5); background: linear-gradient(160deg, rgba(24, 33, 54, .97), rgba(11, 17, 30, .97)); }
.node.maintenance .node-ring { animation: none !important; border: 0 !important; }
.node-badge.maint { color: #93c5fd; background: rgba(96, 165, 250, .16); filter: none; }
.node-badge.cert { color: #fcd34d; background: rgba(245, 158, 11, .12); }
.node-badge.cert.warn { color: #fbbf24; background: rgba(245, 158, 11, .2); }
.node-badge.cert.bad { color: #fecaca; background: rgba(239, 68, 68, .3); animation: blink 1.6s ease-in-out infinite; }
.wall-card.maintenance { filter: grayscale(.7); opacity: .7; }
.wall-status.maint { color: #93c5fd; background: rgba(96, 165, 250, .14); gap: 5px; }
.menu-live { margin-left: auto; padding: 1px 7px; border-radius: 6px; background: rgba(34, 197, 94, .15); color: #4ade80; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* certificates */
.cert-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(34, 197, 94, .05); color: #86efac; }
.cert-row > .icon { flex: none; margin-top: 2px; }
.cert-row div { display: grid; gap: 2px; min-width: 0; }
.cert-row b { color: var(--text); font-size: 12.5px; }
.cert-row small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.cert-row.warn { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .07); color: #fbbf24; }
.cert-row.bad { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .09); color: #f87171; }

/* runbooks */
.runbook-editor { display: grid; gap: 12px; }
.runbook-editor textarea { min-height: 260px; resize: vertical; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.runbook-read, .runbook-callout pre, .toast-runbook pre { margin: 0; white-space: pre-wrap; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--text); }
.runbook-read { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(2, 6, 14, .4); }
.runbook-callout { display: grid; gap: 8px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(239, 68, 68, .45); border-radius: 12px; background: rgba(239, 68, 68, .07); cursor: pointer; }
.runbook-callout-head { display: flex; align-items: center; gap: 7px; color: #fca5a5; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.runbook-callout a { font-size: 12px; }
.toast-runbook { display: grid; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(2, 6, 14, .45); border: 1px solid rgba(255, 255, 255, .08); }
.toast-runbook-head { display: flex; align-items: center; gap: 6px; color: #fde68a; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.toast-runbook pre { font-size: 11.5px; max-height: 92px; overflow: hidden; }
.toast-runbook-links { display: flex; gap: 12px; }
.toast-runbook-links button, .toast-runbook-links a { padding: 0; border: 0; background: none; color: #67e8f9; font-size: 12px; font-weight: 600; cursor: pointer; }
.activity-runbook { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 8px; border: 1px solid rgba(253, 230, 138, .3); border-radius: 6px; background: rgba(253, 230, 138, .06); color: #fde68a; font-size: 11px; }

/* status page dialog */
.sp-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(148, 163, 184, .04); cursor: pointer; font-size: 13px; }
.sp-toggle input { width: 18px; height: 18px; accent-color: var(--good); }
.sp-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sp-link code { flex: 1 1 260px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(34, 197, 94, .35); border-radius: 10px; background: rgba(34, 197, 94, .06); color: #86efac; font-size: 12px; overflow-wrap: anywhere; }
.sp-latency { align-self: flex-end; margin-bottom: 8px; white-space: nowrap; }
.sp-message { min-height: 64px; resize: vertical; }
.sp-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.sp-node { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 12.5px; }
.sp-node span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sp-node b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-node.off { opacity: .45; }
.sp-modal .modal-foot .hint { margin: 0; }
.modal-foot .spacer { flex: 1; }

/* public status page */
.pub-shell { min-height: 100vh; overflow-y: auto; height: 100vh; background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(34, 211, 238, .08), transparent 70%), var(--bg); }
.pub-page { width: min(860px, 100%); margin: 0 auto; padding: 40px 16px 60px; display: grid; gap: 22px; }
.pub-head { display: flex; align-items: center; gap: 12px; }
.pub-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pub-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #06b6d4, #8b5cf6); box-shadow: 0 8px 24px -8px rgba(34, 211, 238, .7); }
.pub-verdict { --c: var(--good); display: flex; align-items: center; gap: 16px; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--c) 9%, #0a0f1c); box-shadow: 0 20px 50px -30px var(--c); }
.pub-verdict h2 { font-size: 22px; font-weight: 800; }
.pub-verdict p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.pub-verdict.warn { --c: var(--warn); }
.pub-verdict.bad { --c: var(--bad); }
.pub-verdict.maint { --c: #60a5fa; }
.pub-verdict.idle { --c: var(--unknown); }
.pub-dot { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 20%, transparent), 0 0 20px var(--c); animation: dot-pulse 2.2s ease-out infinite; color: var(--c); }
.pub-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border: 1px solid rgba(245, 158, 11, .4); border-radius: 14px; background: rgba(245, 158, 11, .07); color: #fde68a; }
.pub-notice > .icon { flex: none; margin-top: 2px; }
.pub-notice p { margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.pub-notice.maint { border-color: rgba(96, 165, 250, .45); background: rgba(96, 165, 250, .08); color: #93c5fd; }
.pub-group h3 { margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pub-list { display: grid; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: rgba(11, 17, 30, .7); }
.pub-row { display: grid; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
.pub-row:first-child { border-top: 0; }
.pub-row-head { display: flex; align-items: center; gap: 10px; }
.pub-row-head b { font-size: 14px; font-weight: 650; }
.pub-row-head small { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.pub-state { --c: var(--good); margin-left: auto; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 15%, transparent); color: color-mix(in srgb, var(--c) 70%, white); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pub-state.warn { --c: var(--warn); }
.pub-state.bad { --c: var(--bad); }
.pub-state.maint { --c: #60a5fa; }
.pub-state.idle { --c: var(--unknown); }
.pub-bars { display: grid; grid-template-columns: repeat(60, 1fr); gap: 2px; height: 26px; }
.pub-bars i { border-radius: 2px; background: var(--good); opacity: .85; }
.pub-bars i.warn { background: var(--warn); }
.pub-bars i.bad { background: var(--bad); }
.pub-bars i.none { background: rgba(148, 163, 184, .14); }
.pub-row-foot { display: flex; justify-content: space-between; color: var(--dim); font-size: 11px; }
.pub-upcoming { grid-template-columns: auto 1fr; align-items: center; gap: 12px; color: #93c5fd; }
.pub-upcoming div { display: grid; gap: 2px; }
.pub-upcoming b { color: var(--text); font-size: 13.5px; }
.pub-upcoming small { color: var(--muted); font-size: 12px; }
.pub-foot { color: var(--dim); font-size: 11.5px; text-align: center; }
.pub-missing { display: grid; justify-items: center; gap: 10px; padding: 80px 0; color: var(--dim); text-align: center; }
.pub-missing h1 { color: var(--text); font-size: 22px; }
.pub-missing p { margin: 0; }
@media (max-width: 560px) {
    .pub-bars { grid-template-columns: repeat(30, 1fr); }
    .pub-bars i:nth-child(-n+30) { display: none; }
}

/* audit log */
.audit-page { height: 100%; overflow-y: auto; padding: 28px 32px 48px; display: grid; align-content: start; gap: 18px; }
.audit-hero { display: flex; align-items: center; gap: 18px; }
.audit-hero > div:nth-child(2) { flex: 1; }
.audit-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.audit-hero p { margin: 6px 0 0; max-width: 720px; color: var(--muted); line-height: 1.55; }
.audit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.audit-tools select { width: 240px; }
.audit-tools .search { width: 280px; }
.audit-count { margin-left: auto; color: var(--dim); font-size: 12px; }
.audit-empty { display: grid; justify-items: center; gap: 10px; padding: 60px 0; color: var(--dim); }
.audit-list { display: grid; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: rgba(11, 17, 30, .6); }
.audit-item { --c: #38bdf8; display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border); transition: background .15s; }
.audit-item:first-child { border-top: 0; }
.audit-item:hover { background: rgba(148, 163, 184, .04); }
.audit-item.cat-logins { --c: #fbbf24; }
.audit-item.cat-sign-in { --c: #a78bfa; }
.audit-item.cat-agents { --c: #34d399; }
.audit-item.cat-team { --c: #f472b6; }
.audit-item.cat-maintenance { --c: #60a5fa; }
.audit-item.cat-status-page { --c: #22c55e; }
.audit-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.audit-main { flex: 1; min-width: 0; cursor: default; }
.audit-summary { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.audit-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; color: var(--dim); font-size: 11.5px; }
.audit-meta b { color: var(--muted); font-weight: 600; }
.audit-cat { padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.audit-details { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.audit-item.open .icon-btn .icon { transform: rotate(180deg); }

/* patches & containers */
.patch-chip { padding: 1px 8px; border-radius: 6px; background: rgba(148, 163, 184, .1); color: var(--muted); font-size: 11px; font-weight: 600; font-family: var(--font); }
.patch-chip.sec { background: rgba(245, 158, 11, .14); color: #fbbf24; }
.patch-chip.reboot { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.sc-updates { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; margin-bottom: 10px; font-size: 12px; }
.sc-updates div { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 7px; }
.sc-updates div:nth-child(odd) { background: rgba(148, 163, 184, .05); }
.sc-updates span { overflow-wrap: anywhere; }
.sc-updates b { color: #fbbf24; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.sc-updates small { color: var(--dim); font-family: var(--mono); font-size: 10.5px; }


/* ══════════════════════════════════════════════════════════════════
   Discovered dependencies
   ══════════════════════════════════════════════════════════════════ */

.links-picker { position: relative; }
.links-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
    background: rgba(148, 163, 184, .05); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.links-chip.has { border: 1px dashed rgba(192, 132, 252, .6); background: rgba(192, 132, 252, .1); color: #e9d5ff; box-shadow: 0 0 18px -8px rgba(192, 132, 252, .8); }
.menu.links-panel { width: min(520px, calc(100vw - 32px)); padding: 0; }
.links-head { display: grid; gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.links-head b { font-size: 13.5px; }
.links-head small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.links-empty { padding: 14px; }
.links-list { display: grid; max-height: 360px; overflow-y: auto; }
.link-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 14px; border-top: 1px solid var(--border); transition: background .2s; }
.link-row:first-child { border-top: 0; }
.link-row.hl { background: rgba(192, 132, 252, .12); box-shadow: inset 3px 0 0 #c084fc; }
.link-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 12.5px; }
.link-text b { font-weight: 650; }
.link-text .arrow { color: #c084fc; }
.link-text small { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-label { padding: 0 6px; border-radius: 5px; background: rgba(192, 132, 252, .12); color: #d8b4fe; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.links-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }

/* suggested links on the canvas */
.edge-suggested .edge-line { stroke: rgba(192, 132, 252, .7); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; animation: flow 1.6s linear infinite; }
.edge-suggested:hover .edge-line, .edge-suggested.selected .edge-line { stroke: #e9d5ff; stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(192, 132, 252, .9)); }
.arrow-sug { fill: rgba(192, 132, 252, .85); }
.edge-label.edge-sug-label { display: inline-flex; align-items: center; gap: 4px; border-style: dashed; border-color: rgba(192, 132, 252, .6); color: #e9d5ff; background: rgba(24, 12, 38, .92); }

/* blast radius */
.blast { display: grid; gap: 8px; margin-bottom: 16px; padding: 11px 12px; border: 1px solid rgba(245, 158, 11, .35); border-radius: 12px; background: rgba(245, 158, 11, .06); }
.blast-head { display: flex; align-items: center; gap: 8px; color: #fbbf24; }
.blast-head b { flex: 1; color: var(--text); font-size: 12.5px; }
.blast-list { display: flex; flex-wrap: wrap; gap: 6px; }
.blast-list .dep-chip small { margin-left: 3px; color: var(--dim); }
.blast-list .dep-chip small.seen { padding: 0 4px; border-radius: 4px; background: rgba(192, 132, 252, .15); color: #d8b4fe; }
.impact-banner {
    position: absolute; top: 16px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 12px; max-width: min(720px, calc(100% - 40px));
    padding: 10px 12px 10px 16px; border: 1px solid rgba(245, 158, 11, .55); border-radius: 14px; background: rgba(28, 18, 6, .94);
    color: #fde68a; font-size: 13px; transform: translateX(-50%); box-shadow: 0 0 40px -12px rgba(245, 158, 11, .7); cursor: default; animation: fade-up .3s var(--ease);
}
.impact-banner span { color: var(--text); }
.workspace:has(.inspector.open) .impact-banner { left: calc(50% - 195px); }

/* what the agents saw on a link */
.observed-card { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid rgba(192, 132, 252, .35); border-radius: 12px; background: rgba(192, 132, 252, .06); color: #d8b4fe; }
.observed-card > .icon { flex: none; margin-top: 2px; }
.observed-card div { display: grid; gap: 3px; }
.observed-card b { color: var(--text); font-size: 12.5px; }
.observed-card small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.observed { margin-bottom: 14px; }

/* dependency map page */
.deps-page { height: 100%; overflow-y: auto; padding: 28px 32px 48px; display: grid; align-content: start; gap: 18px; }
.deps-actions, .agents-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.deps-group h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.deps-group h3 a { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.deps-group h3 a:hover { color: var(--brand); }
.deps-group h3 small { color: var(--dim); font-size: 11.5px; font-weight: 500; }
.deps-list { display: grid; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: rgba(11, 17, 30, .6); }
.dep-row { display: grid; grid-template-columns: minmax(90px, 160px) auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 12.5px; }
.dep-row:first-child { border-top: 0; }
.dep-row.agent { background: rgba(52, 211, 153, .04); }
.dep-client { color: var(--muted); font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-arrow { color: #c084fc; }
.dep-target { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dep-target a { color: #6ee7b7; }
.dep-target small { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-meta { color: var(--dim); font-size: 11px; white-space: nowrap; }
@media (max-width: 900px) {
    .dep-row { grid-template-columns: 1fr auto; }
    .dep-row .dep-client, .dep-row .dep-arrow, .dep-row .dep-meta { display: none; }
}