:root {
      color-scheme: light;
      --ink: #1d2a24;
      --muted: #718078;
      --line: #e3e9e3;
      --paper: #f3f6f1;
      --white: #fff;
      --green: #315e49;
      --lime: #d5ef85;
      --orange: #d77348;
      --blue: #5c8490;
      --shadow: 0 18px 55px #20382b12;
      --surface-subtle: #fafbf9;
      --surface-hover: #fafcf9;
      --sidebar: #1d3028;
      --sidebar-ink: #edf3ec;
      --sidebar-text: #c0cdc4;
      --sidebar-muted: #90a497;
      --primary-ink: #fff;
      --table-line: #edf0ed;
      --control-line: #dce4dc;
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    .loading-indicator { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 30px; background: var(--white); color: var(--ink); box-shadow: var(--shadow); pointer-events: none; max-width: calc(100vw - 24px); }
    .loading-spinner { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: loading-spin .75s linear infinite; }
    @keyframes loading-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; border-color: var(--green); border-top-color: var(--line); } }
    body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.45 "Segoe UI", "Trebuchet MS", sans-serif; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    .shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
    .shell[hidden] { display: none; }
    aside { background: var(--sidebar); color: var(--sidebar-ink); padding: 25px 16px 18px; display: flex; flex-direction: column; }
    .brand { display: flex; align-items: center; gap: 11px; padding: 0 9px 27px; }
    .brand-mark { width: 34px; height: 34px; background: var(--lime); color: var(--sidebar); display: grid; place-items: center; font-weight: 900; font-size: 18px; border-radius: 9px 3px 9px 3px; }
    .brand-name { font-weight: 750; font-size: 17px; letter-spacing: .2px; }
    .brand-sub { color: #9bad9f; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; }
    .nav-label { color: var(--sidebar-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 1.4px; padding: 5px 11px 9px; }
    nav { display: grid; gap: 4px; }
    .nav-item { border: 0; color: var(--sidebar-text); background: transparent; text-align: left; font-size: 12px; padding: 8px 11px; border-radius: 6px; display: flex; align-items: center; gap: 9px; }
    .nav-item:hover { background: #ffffff0d; color: white; }
    .nav-item.active { color: #f5f8f3; background: #ffffff16; box-shadow: inset 3px 0 var(--lime); }
    .nav-icon { width: 18px; height: 18px; display: grid; place-items: center; text-align: center; color: var(--sidebar-muted); font-size: 16px; line-height: 1; }
    .nav-icon svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .nav-icon svg circle { fill: currentColor; stroke: none; }
    .nav-item.active .nav-icon { color: var(--lime); }
    .side-bottom { margin-top: auto; border-top: 1px solid #ffffff1c; padding: 17px 8px 0; color: var(--sidebar-text); font-size: 12px; }
    .local-dot { display: inline-block; width: 7px; height: 7px; background: var(--lime); border-radius: 50%; margin-right: 7px; }
    main { min-width: 0; padding: 28px clamp(20px, 4vw, 56px) 50px; }
    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 29px; }
    .page-heading { min-width: 0; }
    .environment-control { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
    .environment-control label { color: var(--muted); font-size: 11px; font-weight: 650; }
    .environment-control select { max-width: min(280px, 55vw); border: 1px solid var(--line); border-radius: 4px; background: var(--white); padding: 7px 30px 7px 9px; color: var(--ink); font-weight: 600; }
    .eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 700; }
    h1 { font-size: 27px; line-height: 1.2; margin: 4px 0 0; font-weight: 650; letter-spacing: -.5px; }
    .actions { display: flex; align-items: center; gap: 9px; }
    .button { border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 5px; padding: 9px 13px; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
    .button:hover { border-color: #a8b7ad; background: var(--surface-hover); }
    .button.primary { background: var(--green); border-color: var(--green); color: var(--primary-ink); }
    .button.primary:hover { background: #274d3b; }
    .button.icon-only { width: 35px; height: 34px; padding: 0; justify-content: center; }
    .overview-intro { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 0 0 15px; }
    .overview-intro p { margin: 4px 0 0; color: var(--muted); }
    .sample-note { font-size: 11px; color: #6d786f; background: #e7eee5; border-radius: 3px; padding: 6px 9px; white-space: nowrap; }
    .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 19px; }
    .metric { background: var(--white); border: 1px solid var(--line); padding: 16px 17px; border-radius: 6px; min-height: 99px; box-shadow: 0 2px 5px #20382b05; }
    .metric-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
    .metric-symbol { width: 25px; height: 25px; border-radius: 5px; display: grid; place-items: center; background: #edf3e7; color: var(--green); }
    .metric-value { font-size: 26px; font-weight: 700; margin-top: 7px; line-height: 1; }
    .metric-foot { color: var(--muted); font-size: 11px; margin-top: 6px; }
    .content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .8fr); gap: 14px; }
    .panel { background: var(--white); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
    .panel-head { padding: 15px 17px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
    .panel-title { font-weight: 700; font-size: 14px; }
    .panel-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
    .text-button { border: 0; padding: 4px; background: transparent; color: var(--green); font-weight: 650; }
    .table-wrap { overflow: auto; }
    table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
    th { font-size: 10px; color: #7b8980; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 10px 14px; background: var(--surface-subtle); }
    td { border-top: 1px solid var(--table-line); padding: 11px 14px; font-size: 12px; }
    tbody tr:hover { background: var(--surface-hover); }
    .primary-cell { font-weight: 650; }
    .secondary-cell { color: var(--muted); font-size: 11px; margin-top: 2px; }
    .server-type { display: inline-flex; align-items: center; gap: 8px; }
    .server-kind-icon { position: relative; width: 25px; height: 25px; flex: 0 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border-radius: 5px; background: #edf3e7; color: var(--green); }
    .server-kind-icon.physical { flex-direction: column; }
    .server-kind-icon.physical i { display: block; width: 13px; height: 4px; border: 1px solid currentColor; border-radius: 1px; }
    .server-kind-icon.virtual::before, .server-kind-icon.virtual::after { content: ""; position: absolute; width: 11px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; background: #edf3e7; }
    .server-kind-icon.virtual::before { top: 5px; left: 5px; }
    .server-kind-icon.virtual::after { right: 4px; bottom: 5px; background: #dce9d4; }
    .tag { display: inline-block; padding: 3px 7px; border-radius: 3px; color: #315e49; background: #edf4e7; font-size: 10px; font-weight: 650; }
    .tag.warn { background: #fcf0e6; color: #a8582f; }
    .tag.blue { background: #eaf2f3; color: #426b75; }
    .license-list { padding: 2px 17px 10px; }
    .license-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf0ed; }
    .license-row:last-child { border: 0; }
    .administration-settings .license-row { padding: 16px 17px; flex-wrap: wrap; }
    .administration-settings .license-row > div { flex: 1 1 240px; min-width: 0; }
    .empty-state { padding: 30px 18px; text-align: center; color: var(--muted); }
    .empty-state strong { display: block; color: var(--ink); margin-bottom: 4px; }
    .list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
    .list-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
    .column-picker { position: relative; }
    .column-picker summary { list-style: none; }
    .column-picker summary::-webkit-details-marker { display: none; }
    .column-picker summary.button { min-height: 34px; padding: 7px 10px; font-size: 12px; }
    .column-picker[open] summary { border-color: #a8b7ad; background: var(--surface-hover); }
    .column-picker-menu { position: absolute; z-index: 2; top: calc(100% + 5px); right: 0; display: grid; min-width: 174px; max-height: 276px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); box-shadow: var(--shadow); }
    .column-picker-menu label { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 3px; color: var(--ink); font-size: 12px; white-space: nowrap; }
    .column-picker-menu label:hover { background: var(--paper); }
    .column-picker-menu input { margin: 0; accent-color: var(--green); }
    .search { width: min(300px, 100%); border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 5px; padding: 9px 12px; outline: none; }
    .search:focus, input:focus, select:focus, textarea:focus { border-color: #83a28d; box-shadow: 0 0 0 3px #315e4912; outline: none; }
    .count-label { color: var(--muted); font-size: 12px; }
    .row-actions { display: flex; gap: 5px; }
    .row-actions select { border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: var(--ink); padding: 4px 6px; }
    .user-manager-modal { width: min(1100px, 100%); }
    .user-access-table { max-width: 100%; max-height: 42vh; overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
    .user-create-panel { margin: 16px 0; padding: 16px; border: 1px solid #c9d9c9; border-left: 4px solid var(--green); border-radius: 5px; background: #f3f8f0; }
    .user-create-heading { margin-bottom: 13px; }
    .user-create-heading h3 { margin: 2px 0 0; font-size: 16px; }
    .user-create-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
    .user-create-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
    .user-access-table th { position: sticky; top: 0; z-index: 1; }
    .user-access-table td { vertical-align: middle; }
    .user-access-table td:first-child { min-width: 170px; }
    .user-access-table td:last-child { min-width: 190px; }
    .user-access-table .row-actions { flex-wrap: wrap; }
    .user-access-table select { min-width: 132px; max-width: 180px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: var(--ink); padding: 6px 8px; }
    .user-access-table select:disabled { opacity: .65; }
    .row-actions button { background: transparent; border: 0; color: #567064; padding: 4px 6px; border-radius: 3px; }
    .row-actions button:hover { background: #edf3e7; }
    .modal-backdrop { position: fixed; inset: 0; background: #14221bb3; display: grid; place-items: center; padding: 18px; z-index: 3; }
    .modal { width: min(590px, 100%); max-height: min(88vh, 760px); overflow: auto; background: var(--white); border-radius: 7px; box-shadow: var(--shadow); }
    .asset-modal { width: min(680px, 100%); }
    .modal-head { padding: 19px 22px 15px; border-bottom: 1px solid var(--line); display: flex; align-items: start; justify-content: space-between; }
    .modal-head h2 { font-size: 18px; margin: 0; }
    .modal-body { padding: 18px 22px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
    .field { display: grid; gap: 5px; }
    .field[hidden] { display: none; }
    .field.full { grid-column: 1 / -1; }
    .field label { font-size: 11px; color: #56665c; font-weight: 650; }
    .checkbox-field { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 10px; border: 1px solid #dce4dc; border-radius: 4px; background: #f7f9f5; }
    .checkbox-field label { display: flex; align-items: center; gap: 7px; }
    .checkbox-field input { width: auto; margin: 0; accent-color: var(--green); }
    .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--control-line); border-radius: 4px; background: var(--white); padding: 9px 10px; color: var(--ink); }
    .field select[multiple] { min-height: 110px; }
    .field textarea { min-height: 70px; resize: vertical; }
    .field input::placeholder { color: #a1aba4; }
    .form-error { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #e9b4a0; border-radius: 4px; background: #fcf0e6; color: #8f4427; font-size: 12px; }
    .form-error[hidden] { display: none; }
    .asset-picker { max-height: 185px; overflow: auto; border: 1px solid #dce4dc; border-radius: 4px; padding: 4px 10px; }
    .asset-option { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #edf0ed; color: var(--ink); font-weight: 400; }
    .asset-option:last-child { border-bottom: 0; }
    .asset-option input { width: auto; margin: 0; accent-color: var(--green); }
    .asset-picker-empty { padding: 12px 0; color: var(--muted); font-size: 12px; }
    .lag-port-picker { display: grid; gap: 8px; max-height: 220px; overflow: auto; border: 1px solid #dce4dc; border-radius: 5px; padding: 9px; background: #fbfcfa; }
    .lag-port-group { min-width: 0; }
    .lag-port-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 5px; color: #56665c; font-size: 11px; }
    .lag-port-group-head strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
    .lag-port-group-head span { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
    .lag-port-grid { display: grid; grid-template-columns: repeat(8, minmax(32px, 1fr)); gap: 5px; }
    .lag-port-option { position: relative; display: grid; min-width: 0; aspect-ratio: 1.35; place-items: center; border: 1px solid #d5ded5; border-radius: 4px; background: white; color: #35483c; cursor: pointer; }
    .lag-port-number { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 650; }
    .lag-port-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .lag-port-option:has(input:checked) { border-color: #315e49; background: #e8f1e6; color: #234b36; box-shadow: inset 0 0 0 1px #315e49; }
    .lag-port-option:has(input:checked)::after { position: absolute; top: 1px; right: 3px; color: #315e49; content: "✓"; font-size: 9px; }
    .lag-port-option:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
    .lag-port-option.disabled { border-color: #e4e7e2; background: #f0f2ef; color: #9aa39b; cursor: not-allowed; }
    .lag-port-picker-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid #e6ebe5; color: var(--muted); font-size: 10px; }
    .lag-port-picker-foot [data-lag-port-count] { color: #315e49; font-weight: 700; }
    .port-editor { display: grid; }
    .port-editor-section { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-subtle); }
    .port-editor-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
    .port-editor-heading strong { font-size: 12px; }
    .port-editor-heading span { color: var(--muted); font-size: 10px; }
    .port-list { max-height: 280px; overflow-x: hidden; overflow-y: auto; border: 1px solid #dce4dc; border-radius: 4px; padding: 3px 10px; }
    .port-empty { color: var(--muted); font-size: 12px; padding: 10px 0; }
    .port-row { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 1fr) 28px 48px 58px; min-width: 0; min-height: 64px; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid #edf0ed; }
    .port-row strong { color: #56665c; font-size: 11px; white-space: nowrap; }
    .port-row:last-child { border-bottom: 0; }
    .port-row label { color: #56665c; font-size: 11px; font-weight: 650; white-space: nowrap; }
    .port-row select, .port-row input:not([type="checkbox"]) { min-width: 0; width: 100%; border: 1px solid var(--control-line); border-radius: 4px; background: var(--white); padding: 4px 5px; color: var(--ink); font-size: 11px; }
    .port-row input:disabled { background: #f3f6f1; }
    .port-type-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .port-field-label { color: var(--muted); font-size: 9px; font-weight: 650; }
    .port-speed-fixed { padding: 6px 8px; color: var(--ink); font-size: 12px; }
    .port-type-col select { font-size: 11px; }
    .port-custom-type { font-size: 11px; }
    .port-custom-type[hidden] { display: none; }
    .port-row .port-internet { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 500; }
    .port-row .port-internet input { width: auto; margin: 0; accent-color: var(--green); }
    .port-editor-heading .port-vlan-button { margin-left: auto; white-space: nowrap; }
    .port-vlan-popup { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 16px; background: #17231dcc; }
    .port-vlan-dialog { display: flex; flex-direction: column; width: min(760px, 100%); max-height: calc(100vh - 32px); padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); box-shadow: var(--shadow); }
    .port-vlan-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .port-vlan-dialog-heading > div { display: grid; gap: 4px; }
    .port-vlan-dialog-heading strong { font-size: 14px; }
    .port-vlan-dialog-heading span { color: var(--muted); font-size: 11px; }
    .port-vlan-table { min-height: 0; overflow: auto; border: 1px solid #dce4dc; border-radius: 4px; }
    .port-vlan-table-heading, .port-vlan-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: 8px; padding: 7px 10px; }
    .port-vlan-table-heading { position: sticky; top: 0; z-index: 1; background: var(--surface-subtle); color: #56665c; font-size: 10px; font-weight: 700; }
    .port-vlan-row { border-top: 1px solid #edf0ed; }
    .port-vlan-row strong { color: #56665c; font-size: 11px; white-space: nowrap; }
    .port-vlan-dialog input { width: 100%; border: 1px solid var(--control-line); border-radius: 4px; background: var(--white); padding: 9px 10px; color: var(--ink); font-weight: 400; }
    .port-vlan-dialog .secondary-cell { line-height: 1.5; }
    .port-vlan-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
    .port-to { color: var(--muted); font-size: 11px; text-align: center; }
    .map-summary { color: var(--muted); font-size: 12px; }
    .map-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; color: var(--muted); font-size: 10px; }
    .map-legend-item { display: inline-flex; align-items: center; gap: 5px; }
    .map-legend-line { width: 18px; border-top: 1.5px solid #527b8b; }
    .map-legend-line-speed-100m, .map-link-speed-100m { border-color: #bd5b24; stroke: #bd5b24; }
    .map-legend-line-speed-1g, .map-link-speed-1g { border-color: #527b8b; stroke: #527b8b; }
    .map-legend-line-speed-2-5g, .map-link-speed-2-5g { border-color: #397c9e; stroke: #397c9e; }
    .map-legend-line-speed-5g, .map-link-speed-5g { border-color: #278879; stroke: #278879; }
    .map-legend-line-speed-10g, .map-link-speed-10g { border-color: #6659a6; stroke: #6659a6; }
    .map-legend-line-speed-25g, .map-link-speed-25g { border-color: #9b4d94; stroke: #9b4d94; }
    .map-legend-line-speed-40g, .map-link-speed-40g { border-color: #c24b68; stroke: #c24b68; }
    .map-legend-line-speed-50g, .map-link-speed-50g { border-color: #d27625; stroke: #d27625; }
    .map-legend-line-speed-100g, .map-link-speed-100g { border-color: #276c4e; stroke: #276c4e; }
    .map-legend-line-speed-200g, .map-link-speed-200g { border-color: #236a8a; stroke: #236a8a; }
    .map-legend-line-speed-400g, .map-link-speed-400g { border-color: #384c9b; stroke: #384c9b; }
    .map-legend-line-speed-unknown { border-color: #68736c; }
    .map-legend-line-lag { border-top: 1.5px dashed #246b4b; }
    .map-legend-line-internet { border-top: 1.5px dotted #bd5b24; }
    .network-map-scroll { height: max(180px, calc(100vh - 300px)); overflow: auto; }
    .network-map { display: block; min-width: 0; height: auto; }
    .map-link { fill: none; stroke: #527b8b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; }
    .map-link-lag { stroke: #246b4b; stroke-width: 1.5; stroke-dasharray: 7 2.5; }
    .map-link-speed-100m, .map-bridge-arc.map-link-speed-100m { stroke: #bd5b24; }
    .map-link-speed-1g, .map-bridge-arc.map-link-speed-1g { stroke: #527b8b; }
    .map-link-speed-2-5g, .map-bridge-arc.map-link-speed-2-5g { stroke: #397c9e; }
    .map-link-speed-5g, .map-bridge-arc.map-link-speed-5g { stroke: #278879; }
    .map-link-speed-10g, .map-bridge-arc.map-link-speed-10g { stroke: #6659a6; }
    .map-link-speed-25g, .map-bridge-arc.map-link-speed-25g { stroke: #9b4d94; }
    .map-link-speed-40g, .map-bridge-arc.map-link-speed-40g { stroke: #c24b68; }
    .map-link-speed-50g, .map-bridge-arc.map-link-speed-50g { stroke: #d27625; }
    .map-link-speed-100g, .map-bridge-arc.map-link-speed-100g { stroke: #276c4e; }
    .map-link-speed-200g, .map-bridge-arc.map-link-speed-200g { stroke: #236a8a; }
    .map-link-speed-400g, .map-bridge-arc.map-link-speed-400g { stroke: #384c9b; }
    .map-link-lag.is-highlighted { stroke: var(--orange); stroke-width: 2.5; }
    .map-link-internet { stroke: #bd5b24; stroke-width: 1.5; stroke-dasharray: 1 2.5; }
    .map-lag-label { fill: #1e613f; font: 800 6.5px "Segoe UI", sans-serif; text-anchor: middle; paint-order: stroke; stroke: white; stroke-width: 2.5; stroke-linejoin: round; pointer-events: auto; }
    .map-link.is-highlighted { stroke: var(--orange); stroke-width: 2.5; }
    .map-link-internet.is-highlighted { stroke: #e46c2a; stroke-width: 2; }
    .map-bridge { pointer-events: none; }
    .map-bridge-gap { fill: none; stroke: white; stroke-width: 5; stroke-linecap: round; }
    .map-bridge-arc { fill: none; stroke: #5c8490; stroke-width: 1.5; stroke-linecap: round; }
    .map-bridge.is-highlighted .map-bridge-arc { stroke: var(--orange); stroke-width: 2; }
    .map-node { fill: var(--white); stroke: #cfd9d0; stroke-width: 1.5; pointer-events: none; }
    .map-stack-frame { fill: var(--surface-subtle); stroke: #688878; stroke-width: 1.5; stroke-dasharray: 3 1.5; pointer-events: none; }
    .map-stack-title { fill: var(--green); font: 700 5.5px "Segoe UI", sans-serif; text-anchor: middle; }
    .map-stack-join { fill: none; stroke: #688878; stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
    .map-stack-member-node { fill: var(--white); stroke: #aebdb2; stroke-width: .8; }
    .map-vm-host-link { fill: none; stroke: #78918a; stroke-width: 1; stroke-dasharray: 2 1.5; }
    .map-vm-panel-frame { fill: var(--surface-subtle); stroke: #9bafaa; stroke-width: .8; }
    .map-vm-panel-title { fill: var(--muted); font: 700 5px "Segoe UI", sans-serif; }
    .map-vm-node { fill: var(--white); stroke: #75a49d; stroke-width: .8; }
    .map-vm-glyph { fill: #e2f0ed; stroke: #3c837c; stroke-width: .7; stroke-linejoin: round; }
    .map-vm-name { fill: var(--ink); font: 600 5.5px "Segoe UI", sans-serif; }
    .map-internet-cloud { fill: #e8f4f8; stroke: #4d899c; stroke-width: 1.5; }
    .map-internet-label { fill: #315e70; font: 700 5px "Segoe UI", sans-serif; text-anchor: middle; }
    .map-node-accent { fill: currentColor; pointer-events: none; }
    .map-device-glyph { fill: none; stroke: currentColor; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
    .map-device-glyph-fill { fill: #edf1e9; stroke: currentColor; stroke-width: .7; }
    .map-node-name { fill: var(--ink); font: 700 6px "Segoe UI", sans-serif; }
    .map-node-meta { fill: var(--muted); font: 5px "Segoe UI", sans-serif; }
    .map-node-access-point-name, .map-node-access-point-meta { text-anchor: middle; }
    .map-port { fill: #edf3e7; stroke: #9aab9e; stroke-width: .8; pointer-events: all; }
    .map-port.connected { fill: #315e49; stroke: #244936; }
    .map-port.connected.is-highlighted, [data-connection-id].is-highlighted .map-port.connected { fill: var(--orange); stroke: #a84d2a; stroke-width: 1.5; }
    .map-port-label { fill: #405248; font: 4px "Segoe UI", sans-serif; text-anchor: middle; pointer-events: none; }
    .map-port-label.connected { fill: white; }
    .connection-row.is-highlighted { background: #fcf0e6; }
    .connection-row:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
    .map-vlan-muted { opacity: .16; transition: opacity .15s ease; }
    .map-vlan-muted.is-highlighted { opacity: .7; }
    .map-link.map-vlan-active { stroke-width: 2.6; filter: drop-shadow(0 0 1.6px #d77348); }
    .map-bridge.map-vlan-active .map-bridge-arc { stroke-width: 2.6; filter: drop-shadow(0 0 1.6px #d77348); }
    .map-vlan-active .map-port { filter: drop-shadow(0 0 1px #d77348); }
    .network-map-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(600px, calc(100% - 12px))); align-items: start; }
    .map-topology-summary { min-width: 0; }
    .map-tools { display: grid; width: min(600px, 100%); max-width: 100%; justify-self: end; justify-items: end; gap: 8px; }
    .map-view-controls { display: flex; gap: 4px; }
    .map-view-controls .button.active { color: var(--green); border-color: #9ab2a0; background: #edf4ed; font-weight: 700; }
    .map-vlan-filter { display: flex; max-width: min(720px, 100%); max-height: 72px; overflow-y: auto; flex-wrap: wrap; align-content: flex-start; align-items: center; justify-content: flex-end; gap: 7px 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; }
    .map-vlan-filter[hidden] { display: none; }
    .map-vlan-filter strong { color: var(--ink); }
    .map-vlan-filter label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
    .map-vlan-filter input { accent-color: var(--green); }
    .map-vlan-hint { flex-basis: 100%; text-align: right; }
    .map-vlan-legend { color: var(--ink); }
    .map-vlan-swatch { width: 18px; border-top: 2px solid #527b8b; }
    .map-vlan-swatch-muted { opacity: .2; }
    .map-management-badge { fill: #8a4b1f; font: 800 3.8px "Segoe UI", sans-serif; pointer-events: auto; }
    .map-management-badge-access-point { text-anchor: middle; }
    .map-management-legend { padding: 1px 3px; border: 1px solid #d3a477; border-radius: 3px; color: #8a4b1f; font-size: 8px; font-weight: 800; }
    .map-zoom-controls { display: flex; align-items: center; gap: 7px; }
    .map-zoom-controls input[type="range"] { width: 112px; accent-color: var(--green); }
    .map-zoom-value { min-width: 42px; color: var(--muted); font-size: 12px; text-align: center; }
    @media (max-width: 1000px) {
      .network-map-toolbar { grid-template-columns: minmax(0, 1fr); }
      .map-tools { width: 100%; justify-self: stretch; justify-items: stretch; }
    }
    .modal-foot { padding: 13px 22px 18px; display: flex; justify-content: end; gap: 8px; border-top: 1px solid var(--line); }
    .toast { position: fixed; bottom: 22px; right: 22px; background: #20382b; color: white; padding: 11px 15px; border-radius: 4px; box-shadow: var(--shadow); z-index: 5; animation: appear .18s ease-out; }
    .auth-screen { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: var(--paper); }
    .auth-panel { width: min(420px, 100%); padding: 30px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
    .auth-panel h1 { margin: 5px 0 22px; }
    .auth-panel .field { margin-bottom: 14px; }
    .auth-panel .button { justify-content: center; width: 100%; margin-top: 5px; }
    .auth-error { min-height: 18px; margin: 0 0 10px; color: #a8582f; font-size: 12px; }
    :root[data-theme="ocean"] {
      --ink: #1d3140;
      --muted: #657c8a;
      --line: #dbe6ed;
      --paper: #f1f7fb;
      --green: #286487;
      --lime: #b9e4f2;
      --blue: #4a8099;
      --surface-subtle: #f6fafc;
      --surface-hover: #edf5f9;
      --sidebar: #203b4b;
      --sidebar-ink: #edf5f8;
      --sidebar-text: #c2d4dd;
      --sidebar-muted: #91b0be;
      --table-line: #dbe6ed;
      --control-line: #dbe6ed;
      --shadow: 0 18px 55px #203b4b12;
    }
    :root[data-theme="ocean"] th,
    :root[data-theme="ocean"] .field label { color: var(--muted); }
    :root[data-theme="ocean"] .button.primary:hover { background: #1f4e6a; }
    :root[data-theme="midnight"] {
      color-scheme: dark;
      --ink: #e2eae4;
      --muted: #a3b2a8;
      --line: #35483d;
      --paper: #111a15;
      --white: #19241e;
      --green: #7db392;
      --lime: #b4d982;
      --blue: #7cb6c5;
      --surface-subtle: #202d25;
      --surface-hover: #25342b;
      --sidebar: #0c130f;
      --sidebar-ink: #e2eae4;
      --sidebar-text: #bdc9c0;
      --sidebar-muted: #91a398;
      --primary-ink: #102017;
      --table-line: #35483d;
      --control-line: #35483d;
      --shadow: 0 18px 55px #00000055;
    }
    :root[data-theme="midnight"] th,
    :root[data-theme="midnight"] .field label { color: var(--muted); }
    :root[data-theme="midnight"] .metric-symbol,
    :root[data-theme="midnight"] .checkbox-field,
    :root[data-theme="midnight"] .lag-port-picker,
    :root[data-theme="midnight"] .lag-port-option,
    :root[data-theme="midnight"] .lag-port-option:has(input:checked),
    :root[data-theme="midnight"] .server-kind-icon,
    :root[data-theme="midnight"] .server-kind-icon.virtual::before,
    :root[data-theme="midnight"] .server-kind-icon.virtual::after {
      background-color: var(--surface-subtle);
      color: var(--ink);
    }
    :root[data-theme="midnight"] .metric-symbol,
    :root[data-theme="midnight"] .lag-port-option:has(input:checked) { color: var(--green); }
    :root[data-theme="midnight"] .button.primary:hover { background: #92c4a5; }
    :root[data-theme="midnight"] .row-actions button { color: #b6d4c2; }
    :root[data-theme="midnight"] .tag { color: #c8e5d0; background: #293e30; }
    :root[data-theme="midnight"] .tag.blue { color: #c1e5ed; background: #273c42; }
    :root[data-theme="midnight"] .user-create-panel { background: var(--surface-subtle); border-color: var(--line); }
    @keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 850px) { .shell { grid-template-columns: 190px minmax(0, 1fr); } main { padding: 24px 20px 40px; } .metrics { grid-template-columns: repeat(2, 1fr); } .content-grid { grid-template-columns: 1fr; } }
    @media (max-width: 600px) {
      .shell { display: block; }
      aside { padding: 12px 12px 9px; }
      .brand { padding: 0 4px 11px; }
      .brand-mark { width: 30px; height: 30px; }
      .nav-label, .side-bottom { display: none; }
      nav { display: flex; overflow-x: auto; gap: 5px; padding-bottom: 2px; }
      .nav-item { flex: 0 0 auto; padding: 8px 9px; font-size: 12px; gap: 6px; }
      .nav-item.active { box-shadow: inset 0 -2px var(--lime); }
      main { padding: 20px 14px 32px; }
      .topbar { align-items: start; flex-wrap: wrap; margin-bottom: 21px; }
      h1 { font-size: 23px; }
      .actions { flex-wrap: wrap; gap: 6px; }
      .actions .button { padding: 8px 9px; font-size: 12px; }
      .overview-intro { align-items: start; flex-direction: column; gap: 8px; }
      .sample-note { white-space: normal; }
      .metric { padding: 13px; min-height: 89px; }
      .metric-value { font-size: 23px; }
      .form-grid { grid-template-columns: 1fr; }
      .user-create-form { grid-template-columns: 1fr; }
      .user-create-actions { grid-column: auto; }
      .field.full { grid-column: auto; }
      .lag-port-grid { grid-template-columns: repeat(6, minmax(32px, 1fr)); }
      .list-toolbar { align-items: stretch; flex-direction: column; }
      .search { width: 100%; }
      .network-map-toolbar { grid-template-columns: minmax(0, 1fr); }
      .map-tools { width: 100%; justify-self: stretch; justify-items: stretch; }
      .map-view-controls { width: 100%; }
      .map-view-controls .button { flex: 1; }
      .map-vlan-filter { max-width: 100%; justify-content: flex-start; }
      .map-vlan-hint { text-align: left; }
      .map-zoom-controls { width: 100%; flex-wrap: wrap; }
      .map-zoom-controls input[type="range"] { flex: 1; }
      .port-row { grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1fr); gap: 3px; }
      .port-row > strong { grid-column: 1; grid-row: 1; }
      .port-row > .port-type-col { grid-column: 2; grid-row: 1; }
      .port-row > .port-speed-col { grid-column: 3; grid-row: 1; }
      .port-row > select { grid-column: 4; grid-row: 1; }
      .port-row > .port-to { grid-column: 1; grid-row: 2; }
      .port-row > input[type="number"] { grid-column: 2; grid-row: 2; }
      .port-row > .port-internet { grid-column: 3 / 5; grid-row: 2; }
      .port-row .port-internet { font-size: 10px; }
      .port-vlan-dialog { padding: 12px; }
      .port-vlan-table-heading, .port-vlan-row { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.25fr); gap: 5px; padding: 6px; }
    }

    .audit-log-modal { width: min(1500px, 100%); height: 92vh; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
    .audit-log-modal .modal-body { flex: 1; min-height: 0; overflow: auto; }
    .audit-log-modal .modal-head, .audit-log-modal .modal-foot { flex-shrink: 0; }
    .audit-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
    .audit-filter-actions { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
    .audit-retention { margin: 12px 0 18px; }
    .audit-retention summary { cursor: pointer; margin-bottom: 12px; }
    .audit-log-table td:nth-child(3) { min-width: 260px; white-space: normal; overflow-wrap: anywhere; }

    .nav-advanced { min-width: 0; }
    .nav-advanced summary { list-style: none; cursor: pointer; }
    .nav-advanced summary::-webkit-details-marker { display: none; }
    .nav-chevron { margin-left: auto; font-size: 12px; transform: rotate(-90deg); }
    .nav-advanced-items { position: fixed; z-index: 2; width: 240px; padding-left: 24px; }
    .nav-advanced-panel { display: grid; gap: 4px; padding: 8px; border: 1px solid #ffffff26; border-radius: 7px; background: var(--sidebar); box-shadow: var(--shadow); }
    .nav-advanced-items .nav-item { width: 100%; white-space: nowrap; }
    .nav-advanced summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
    @media (max-width: 600px) {
      .nav-advanced { flex: 0 0 auto; }
      .nav-advanced-items { width: min(240px, calc(100vw - 24px)); padding-left: 0; padding-top: 4px; }
      .nav-chevron { transform: none; }
    }

    .warranty-list { max-height: 300px; overflow-y: auto; }

    .permissions-manager-modal { width: min(1200px, 100%); max-height: 94vh; }
    .permissions-manager-modal .row-actions { flex-wrap: wrap; }
    .user-create-panel > summary { cursor: pointer; font-weight: 650; }
    .user-create-panel[open] > summary { margin-bottom: 14px; }
    .permissions-editor { margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: 6px; }
    .permissions-editor h3 { margin: 0 0 14px; }
    .permission-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
    .permission-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 210px); align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .permission-row .primary-cell { overflow-wrap: anywhere; }
    .permission-row select { width: 100%; }
    .permission-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; }
    .account-search { margin: 14px 0; }

    .network-map-stage { display: grid; justify-items: center; align-items: start; width: max-content; min-width: 100%; min-height: 100%; }
    .network-map-workspace.is-expanded { position: fixed; inset: 12px; z-index: 1000; padding: 18px; background: var(--paper); border-radius: 12px; box-shadow: 0 0 0 12px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow: auto; }
    .network-map-workspace.is-expanded > .network-map-toolbar { flex-shrink: 0; }
    .network-map-workspace.is-expanded > .panel { flex: 1; min-height: 180px; overflow: hidden; }
    .network-map-workspace.is-expanded .network-map-scroll { height: 100%; overscroll-behavior: contain; }
    @media (max-width: 640px) {
      .network-map-workspace.is-expanded { inset: 4px; padding: 10px; }
    }

.network-overlap-warning { color: #a35d00; font-size: 12px; margin-top: 5px; white-space: normal; max-width: 420px; }
.vlan-linked-network + .vlan-linked-network { margin-top: 10px; }
.vlan-linked-network { font-size: 12px; white-space: normal; min-width: 180px; }
    .network-map.has-link-focus .map-link:not(.is-highlighted),
    .network-map.has-link-focus .map-bridge:not(.is-highlighted),
    .map-magnified-copy.has-link-focus .map-link:not(.is-highlighted),
    .map-magnified-copy.has-link-focus .map-bridge:not(.is-highlighted) { opacity: .12; }
    .network-map.has-link-focus .map-link.is-highlighted,
    .map-magnified-copy.has-link-focus .map-link.is-highlighted { stroke-width: 2; }
    .connection-row.is-highlighted { background: var(--surface-hover); }
    .network-map .map-link, .map-magnified-copy .map-link { stroke-width: 1.1; vector-effect: non-scaling-stroke; }
    .map-bridge-arc { stroke-width: 1.1; vector-effect: non-scaling-stroke; }
    .map-bridge-gap { vector-effect: non-scaling-stroke; }
    .network-map-workspace { position: relative; }
    .map-magnify-button.active { color: var(--green); background: #edf4ed; border-color: #9ab2a0; }
    .network-map-scroll.is-magnifying { cursor: zoom-in; }
    .map-magnifying-lens { position: absolute; z-index: 5; overflow: hidden; border: 3px solid #527b8b; border-radius: 50%; background: var(--white); box-shadow: 0 4px 20px #20382b40; pointer-events: none; }
    .map-magnifying-lens > svg { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; }
    .map-magnifying-lens * { pointer-events: none !important; }
    .ai-settings-modal { width: min(980px, 100%); min-width: 0; }
    .ai-settings-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
    .ai-settings-toolbar .field { min-width: 200px; }
    .ai-row-actions, .ai-editor-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .ai-editor-actions { justify-content: flex-end; margin-top: 16px; }
    .ai-provider-editor { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; }
    .ai-environments { margin: 0; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; gap: 10px; }
    .ai-environments legend { padding: 0 5px; font-size: 12px; font-weight: 650; color: var(--ink); }
    .ai-environments-help { margin: 0; font-size: 12px; color: var(--muted); }
    .ai-environment-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
    .ai-environments label { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font-size: 12px; line-height: 1.5; }
    .ai-environments label span { min-width: 0; overflow-wrap: anywhere; }
    .ai-environments input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; margin: 1px 0 0; padding: 0; accent-color: var(--green); }
    .ai-environments label:has(input:checked) { border-color: var(--green); }
    .ai-environments label:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
    .ai-provider-table td { white-space: normal; overflow-wrap: anywhere; max-width: 230px; }
    .ai-test-result { color: var(--green); }
    .ai-model-controls { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .ai-model-controls select { flex: 1; width: 0; min-width: 0; }
    .ai-model-refresh { flex-shrink: 0; }

#assistant-root { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
#assistant-root[hidden], .assistant-panel[hidden] { display: none; }
.assistant-launcher { width: 46px; height: 46px; display: grid; place-items: center; margin-left: auto; border: 1px solid #0c706c; border-radius: 50%; background: #128782; box-shadow: 0 3px 12px #0003; cursor: pointer; }
.assistant-launcher img { width: 23px; height: 23px; filter: invert(1); }
.assistant-launcher:hover { background: #096d68; }
.assistant-panel { position: absolute; right: 0; bottom: 58px; width: min(420px, calc(100vw - 32px)); height: min(610px, calc(100dvh - 100px)); display: flex; flex-direction: column; border: 1px solid #cbdad8; border-radius: 8px; background: #fff; color: #253230; box-shadow: 0 8px 32px #0003; overflow: hidden; }
.assistant-header { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid #e0e8e7; flex-shrink: 0; }
.assistant-header > div { flex: 1; min-width: 0; }
.assistant-header strong { font-size: 14px; }
.assistant-scope { font-size: 11px; color: #637570; overflow-wrap: anywhere; margin-top: 3px; }
.assistant-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #dff2ef; flex-shrink: 0; }
.assistant-icon-button { width: 30px; height: 30px; padding: 6px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; flex-shrink: 0; }
.assistant-icon-button:hover { background: #edf3f1; }
.assistant-meta { font-size: 11px; padding: 9px 14px; color: #61716c; background: #f4f8f7; overflow-wrap: anywhere; flex-shrink: 0; }
.assistant-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.assistant-message { max-width: 100%; flex-shrink: 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.assistant-message > strong { display: block; font-size: 11px; color: #6a7773; margin-bottom: 5px; }
.assistant-message > div { white-space: pre-wrap; }
.assistant-message-user { align-self: flex-end; max-width: 90%; padding: 10px 13px; border-radius: 8px; background: #e3f3ef; }
.assistant-message-assistant { align-self: stretch; }
.assistant-pending { color: #13827c; }
.assistant-compose { display: flex; align-items: end; gap: 8px; padding: 10px; margin: 0 12px; border: 1px solid #bccfc9; border-radius: 8px; flex-shrink: 0; }
.assistant-compose textarea { flex: 1; width: 0; min-width: 0; resize: none; min-height: 42px; max-height: 110px; border: 0; padding: 2px; background: transparent; color: inherit; font: inherit; font-size: 13px; outline-offset: 2px; }
.assistant-send { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 6px; background: #ed7867; cursor: pointer; }
.assistant-send:disabled { opacity: .45; cursor: default; }
.assistant-footnote { font-size: 10px; text-align: center; color: #76847e; padding: 8px; flex-shrink: 0; }
.assistant-error { font-size: 12px; color: #a33228; padding: 8px 14px; overflow-wrap: anywhere; flex-shrink: 0; }
@media (max-width: 600px) { #assistant-root { right: 16px; bottom: 16px; } }
.assistant-write-controls { padding: 8px 14px; font-size: 11px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.assistant-write-controls[hidden] { display: none; }
.assistant-write-controls input[type="checkbox"] { width: auto; }
.assistant-write-controls input[type="file"] { width: 100%; font-size: 11px; }

/* Cabinet elevations: U1 at the bottom, multi-U devices span complete slots. */
.rack-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,340px)); gap:16px; align-items:start; }
.rack-card { background:var(--white); border:1px solid var(--line,#d8dee7); border-radius:10px; padding:10px; }
.rack-card h3,.rack-unassigned h3 { margin:0 0 8px; }
.rack-actions { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 14px; }
.rack-cabinet { display:grid; grid-template-columns:minmax(0,1fr); background:#172536; border:5px solid #26374a; border-radius:6px; position:relative; }
.rack-slot { grid-column:1; border-bottom:1px solid #526174; color:#c6d3e0; font-size:11px; display:flex; align-items:center; padding-left:6px; }
.rack-device { grid-column:1; z-index:1; margin:2px 5px 2px 0; background:#e2edf8; color:#172536; border:1px solid #83a4c2; border-radius:4px; min-height:0; padding:2px 8px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; text-align:left; font-size:12px; }
.rack-device strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rack-device span { font-size:10px; }
.rack-unassigned { margin-top:20px; padding:18px; }
.rack-unassigned .button,.rack-unassigned .tag { margin:4px; }
.rack-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
@media (max-width:650px) { .rack-fields { grid-template-columns:1fr; } .rack-grid { grid-template-columns:minmax(0,1fr); } }
.rack-device-with-ports { padding:0; margin:1px 3px 1px 0; border:0; background:transparent; }
.rack-device-face { display:block; width:100%; height:100%; overflow:visible; color:var(--green); }
.rack-device-face .map-node { stroke-width:.6; }
.rack-device-face .map-port { stroke-width:.35; }
.rack-device-face .map-port:hover, .rack-device-face .map-port.is-highlighted { stroke:var(--orange); stroke-width:1; }
.rack-face-name { fill:var(--ink); font:700 5px "Segoe UI",sans-serif; pointer-events:none; }

.rack-slot > span { display:none; }
.rack-view-compact .rack-grid { grid-template-columns:repeat(auto-fit,minmax(230px,280px)); gap:12px; }
.rack-view-compact .rack-card { padding:6px; }
.rack-view-compact .rack-card h3 { font-size:13px; margin-bottom:3px; }
.rack-view-compact .rack-actions { margin:4px 0 6px; }
.rack-view-compact .rack-cabinet { border-width:3px; }
.rack-view-compact .rack-device { margin-top:0; margin-bottom:0; }
.rack-view-compact .rack-unassigned { margin-top:10px; padding:10px; }
@media (max-width:650px) { .rack-view-compact .rack-grid { grid-template-columns:minmax(0,1fr); } }
.rack-magnifying-lens > .rack-view { position:absolute; left:0; top:0; transform-origin:0 0; max-width:none; }
.rack-room-filter { border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:8px 12px; margin:0 0 14px; }
.rack-room-filter legend { color:var(--muted); padding:0 5px; }
.rack-room-filter label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.rack-view-compact .rack-grid { grid-template-columns:repeat(auto-fit,minmax(260px,320px)); }
.rack-device-face .map-port-label { font-size:4.5px; }
.rack-face-name { font-size:6px; }
/* Leave more vertical space for maps while keeping environment switching handy. */
.map-page .topbar { margin-bottom:10px; gap:10px; align-items:center; }
.map-page .page-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
.map-page .page-heading > .eyebrow { display:none; }
.map-page h1 { font-size:22px; margin:0; }
.map-page .environment-control { margin-top:0; }
.map-page .actions { gap:6px; }
.map-page .button { padding:6px 10px; font-size:12px; }
.map-page .network-map-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.map-page .map-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; width:auto; gap:6px; margin-left:auto; }
.map-page .map-topology-summary .eyebrow,.map-page .map-legend { display:none; }
.map-page .map-summary { font-size:11px; }
.map-page .rack-view > .list-toolbar { margin:4px 0; }
.rack-room-filter { display:block; padding:5px 8px; margin-bottom:8px; }
.rack-room-filter summary { cursor:pointer; color:var(--ink); font-size:12px; }
.rack-room-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding-top:8px; }
@media (max-width:650px) { .map-page .topbar { flex-wrap:wrap; } .map-page .map-tools { margin-left:0; } }
/* Size the map from the remaining viewport, rather than a fixed header estimate. */
main.map-page { height:100dvh; display:flex; flex-direction:column; padding-bottom:12px; }
.map-page > .topbar { flex-shrink:0; }
.map-page > #view { flex:1; min-height:0; }
.map-page #view > .network-map-workspace:not(.is-expanded) { height:100%; display:flex; flex-direction:column; }
.map-page .network-map-workspace > .network-map-toolbar { flex-shrink:0; }
.map-page .network-map-workspace > .panel { flex:1; min-height:0; display:flex; flex-direction:column; }
.map-page .network-map-workspace > .panel > .network-map-scroll { flex:1; min-height:0; height:auto; overflow:auto; }
@media (max-width:600px) { main.map-page { height:calc(100dvh - 140px); min-height:360px; } }

[data-rack-settings], [data-power-settings] { padding:14px; border:1px solid var(--control-line); border-radius:6px; }
.rack-settings-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.field .rack-enable-toggle { display:flex; align-items:center; gap:8px; margin:0; }
.field .rack-enable-toggle input[type="checkbox"] { width:auto; margin:0; padding:0; accent-color:var(--green); }
.rack-fields[hidden], [data-rack-position-help][hidden] { display:none; }

.form-grid .map-visibility-field { grid-column:auto; align-self:start; display:grid; gap:5px; padding:8px 10px; }
.field.map-visibility-field input[type="checkbox"] { width:auto; padding:0; margin:0; }
.map-visibility-field .secondary-cell { font-size:11px; line-height:1.4; }

.power-supply-fields { display:grid; gap:12px; margin-top:12px; }
.power-supply-fields[hidden] { display:none; }

[data-power-highlight="true"] > g > .map-node,
[data-power-highlight="true"].map-stack-member > .map-node,
[data-power-highlight="true"].map-vm-card > .map-vm-node { fill:#fcf0e6; stroke:var(--orange); stroke-width:2; }

.power-view [data-power-highlight="false"] { opacity:.16; }
.power-view .map-link, .power-view .map-bridge, .power-view .map-lag-label,
.power-view .map-internet-node, .power-view .map-stack-frame, .power-view .map-stack-join { opacity:.16; }
.power-view [data-power-highlight="true"] { opacity:1; }

.map-backup-power path { fill:#ffd43b; stroke:#9a6b00; stroke-width:.6; stroke-linejoin:round; }

.rack-device.has-backup-power { position:relative; }
.rack-backup-power { position:absolute; right:3px; top:3px; width:7px; height:10px; overflow:visible; }

.port-row.patch-panel-port-row { grid-template-columns:48px minmax(120px,1fr) auto 70px auto; }
@media (max-width:650px) { .port-row.patch-panel-port-row { grid-template-columns:48px minmax(0,1fr) 70px; } .patch-panel-port-row > .port-internet { grid-column:2 / 4; grid-row:2; } }

@media (max-width:650px) { .patch-panel-port-row > select { grid-column:2 / 4; grid-row:1; } .patch-panel-port-row > .port-to { grid-column:1; grid-row:2; } .patch-panel-port-row > input[type="number"] { grid-column:2; grid-row:2; } .patch-panel-port-row > .port-internet { grid-column:3; grid-row:2; } }

.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.dashboard-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dashboard-grid .panel { min-width: 0; }
.dashboard-grid .panel-head { padding: 10px 12px 8px; gap: 8px; background: var(--surface-subtle); border-radius: 6px 6px 0 0; }
.dashboard-grid .panel-title { font-size: 14px; font-weight: 750; line-height: 1.3; color: var(--ink); }
.dashboard-grid .panel-sub { font-size: 10px; line-height: 1.3; }
.dashboard-grid .text-button { font-size: 11px; flex-shrink: 0; }
.dashboard-grid .license-row { padding: 5px 12px; gap: 8px; }
.dashboard-grid .license-row > div { min-width: 0; overflow-wrap: anywhere; }
.dashboard-grid .primary-cell { font-size: 11px; font-weight: 500; line-height: 1.3; }
.dashboard-grid .secondary-cell { font-size: 10px; line-height: 1.3; margin-top: 1px; }
.dashboard-grid .empty-state { padding: 16px 12px; font-size: 11px; }
.dashboard-warning { color: var(--warn, #a8582f); }
.dashboard-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.dashboard-choice label { display: flex; align-items: center; gap: 8px; }
.dashboard-choice input { width: auto; }
#dashboard-config-form fieldset { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 16px; }
@media (max-width: 850px) { .dashboard-grid { display: flex; flex-direction: column; } .dashboard-column { display: contents; } .dashboard-grid .panel { width: 100%; } }

.dashboard-summary-scroll { max-height: calc(var(--summary-rows, 6) * 40px); overflow-y: auto; scrollbar-gutter: stable; border-radius: 0 0 6px 6px; }
.dashboard-summary-scroll .license-row { min-height: 40px; box-sizing: border-box; }
.dashboard-summary-scroll:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.elk-map-scroll { height: 65vh; min-height: 300px; overflow: auto; }
[data-elk-canvas] { padding: 12px; width: max-content; min-width: 100%; }
.elk-map-svg { display: block; max-width: none; }
.elk-device { fill: var(--white); stroke: var(--green); stroke-width: 1.5; }
.elk-name { fill: var(--ink); font: 650 13px "Segoe UI", sans-serif; }
.elk-type { fill: var(--muted); font: 11px "Segoe UI", sans-serif; }
.elk-port { fill: var(--green); stroke: var(--white); }
.elk-port-label { fill: var(--ink); font: 10px "Segoe UI", sans-serif; }
.elk-cable { fill: none; stroke: var(--blue); stroke-width: 2; pointer-events: stroke; }
.elk-cable:hover { stroke: var(--orange); stroke-width: 4; }
.elk-lag { stroke-dasharray: 7 3; }

.network-map-stage { align-content: center; }

.network-map-stage { display: flex; justify-content: center; align-items: center; }
.network-map-stage > .network-map { flex-shrink: 0; }

.map-view-controls { flex-wrap: wrap; align-items: center; }
.map-layout-switch { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; color: var(--muted); font-size: 11px; cursor: pointer; }
.map-layout-switch input { appearance: none; width: 32px; height: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--muted); position: relative; margin: 0; cursor: pointer; }
.map-layout-switch input::before { content: ''; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; border-radius: 50%; background: var(--white); }
.map-layout-switch input:checked { background: var(--green); }
.map-layout-switch input:checked::before { left: 16px; }
.map-layout-switch input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Passive patch panels use a distinct accent in map and cabinet views. */
.map-patch-panel .map-node, .rack-patch-panel .map-node { fill:#d6dbe0; stroke:#858f99; }
.rack-device.rack-patch-panel, .rack-unassigned .rack-patch-panel { background:#d6dbe0; color:#29333d; border-color:#858f99; }
.rack-patch-panel .rack-device-face { color:#59636e; }
.rack-device-with-ports.rack-patch-panel { background:transparent; }

.administration-settings { display: grid; gap: 18px; }

.administration-settings > .panel { overflow: hidden; }
.administration-settings .panel-head { padding: 12px 16px; background: color-mix(in srgb, var(--green) 14%, var(--white)); border-bottom-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.administration-settings > .panel:nth-child(2) .panel-head { background: color-mix(in srgb, var(--blue) 16%, var(--white)); border-bottom-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.administration-settings .panel-title { font-size: 13px; color: var(--ink); }
.administration-settings .eyebrow { font-size: 9px; color: var(--ink); }
.administration-settings .panel-sub { margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--ink); }
.administration-settings .license-row { padding: 12px 16px; background: var(--surface-subtle); border-bottom-color: var(--line); }
.administration-settings .primary-cell { font-size: 12px; }
.administration-settings .secondary-cell { margin-top: 4px; font-size: 11px; line-height: 1.5; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
.administration-settings .button { font-size: 11px; padding: 8px 11px; }

.map-device-search { position: relative; display: grid; gap: 4px; min-width: 200px; width: min(300px, 100%); }
.map-device-search > label { font-size: 11px; font-weight: 650; color: var(--ink); }
.map-device-search > input { width: 100%; padding: 8px 10px; border: 1px solid var(--control-line); border-radius: 5px; background: var(--white); color: var(--ink); }
.map-device-search-results { position: absolute; top: 58px; left: 0; right: 0; z-index: 20; max-height: 240px; overflow: auto; background: var(--white); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.map-device-search-results[hidden] { display: none; }
.map-device-search-results button { display: block; width: 100%; padding: 10px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.map-device-search-results button:hover, .map-device-search-results button:focus { background: var(--surface-hover); outline: 2px solid var(--green); outline-offset: -2px; }
.map-device-search-results p { margin: 10px; font-size: 12px; color: var(--muted); }
.map-search-status { font-size: 11px; color: var(--ink); }
.map-search-highlight { opacity: 1 !important; }
.map-search-highlight .map-node, .map-search-highlight .map-stack-frame, .map-search-highlight .map-vm-node { stroke: var(--orange) !important; stroke-width: 3px !important; vector-effect: non-scaling-stroke; }
.rack-device.map-search-highlight, .rack-unassigned .map-search-highlight { outline: 3px solid var(--orange); outline-offset: 3px; }
.network-map [data-power-device]:has(.map-search-highlight) { opacity: 1 !important; }

.asset-column-filter-row th { padding: 6px 10px 10px; background: var(--surface-subtle); }
.asset-column-filter-row input, .asset-column-filter-row select { width: 100%; min-width: 100px; max-width: 240px; padding: 6px 8px; border: 1px solid var(--control-line); border-radius: 4px; background: var(--white); color: var(--ink); font-size: 11px; font-weight: 400; }
[data-asset-filter-table] tr[hidden] { display: none; }
.asset-filter-empty { padding: 24px; text-align: center; color: var(--muted); }

.tag.asset-status-in-service { background: #e3f3e8; color: #23613a; }
.tag.asset-status-maintenance { background: #fff0d6; color: #805012; }
.tag.asset-status-planned { background: #e5edff; color: #2d5097; }
.tag.asset-status-retired, .tag.asset-status-unknown { background: #e9ecef; color: #515c68; }
:root[data-theme="midnight"] .tag.asset-status-in-service { background: #233f30; color: #a6e4b9; }
:root[data-theme="midnight"] .tag.asset-status-maintenance { background: #493920; color: #f5d08d; }
:root[data-theme="midnight"] .tag.asset-status-planned { background: #253650; color: #b5cdff; }
:root[data-theme="midnight"] .tag.asset-status-retired, :root[data-theme="midnight"] .tag.asset-status-unknown { background: #353e46; color: #c7d0d9; }

.asset-trash-modal { width: min(1100px, 100%); }
.asset-trash-snapshot { max-height: 260px; max-width: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; padding: 10px; background: var(--surface-subtle); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; }
.asset-trash-snapshot dt { font-weight: 650; margin-top: 8px; }
.asset-trash-snapshot dd { margin: 3px 0 0; }

[data-rack-settings] { background: var(--surface-subtle); gap: 12px; }
.rack-settings-heading strong { font-size: 13px; color: var(--ink); }
.rack-settings-heading .panel-sub { margin-top: 4px; line-height: 1.5; }
.field .rack-enable-toggle { padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); align-items: flex-start; cursor: pointer; }
.field .rack-enable-toggle input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.rack-enable-toggle > span { display: grid; gap: 3px; }
.rack-field-hint { display: block; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--muted); }
[data-rack-settings] .rack-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; align-items: start; }
.rack-fields > label { display: grid; gap: 6px; min-width: 0; }
.rack-fields input, .rack-fields select { min-width: 0; }
.rack-fields input:disabled { background: var(--paper); color: var(--muted); }
.rack-position-note { padding: 9px 12px; margin: 0; background: var(--white); border-left: 3px solid var(--green); border-radius: 3px; line-height: 1.5; color: var(--ink); }
@media (max-width: 650px) { [data-rack-settings] .rack-fields { grid-template-columns: 1fr; } }

[data-rack-settings] { min-width: 0; width: 100%; grid-column: 1 / -1; }
.rack-fields .rack-cabinet-field { grid-column: 1 / -1; }
[data-rack-settings] .rack-fields > label { grid-template-rows: auto 36px auto; align-content: start; }
[data-rack-settings] .rack-fields input, [data-rack-settings] .rack-fields select { height: 36px; width: 100%; box-sizing: border-box; }


/* Cost estimates and net-price configuration. */
.cost-estimate-layout { display:grid; grid-template-columns:minmax(210px, .65fr) minmax(0, 2fr); gap:18px; align-items:start; }
.cost-estimate-choice { display:block; width:100%; border:0; border-bottom:1px solid var(--line); background:var(--white); color:var(--ink); text-align:left; padding:16px; cursor:pointer; }
.cost-estimate-choice:hover,.cost-estimate-choice.active { background:var(--surface-subtle); box-shadow:inset 3px 0 var(--green); }
.cost-estimate-choice strong,.cost-estimate-choice span,.cost-estimate-choice b { display:block; overflow-wrap:anywhere; }
.cost-estimate-choice span { font-size:11px; color:var(--muted); margin:5px 0; }
.cost-estimate-choice b { font-size:16px; }
.cost-estimate-detail .panel-head h2 { margin:0 0 5px; font-size:21px; overflow-wrap:anywhere; }
.cost-category-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:18px; }
.cost-category-totals>div { background:var(--surface-subtle); border:1px solid var(--line); padding:13px; border-radius:6px; }
.cost-category-totals span,.cost-category-totals strong { display:block; }
.cost-category-totals span { font-size:11px; color:var(--muted); }
.cost-category-totals strong { font-size:18px; margin-top:7px; overflow-wrap:anywhere; }
.cost-final-summary { margin:22px 18px 0 auto; width:min(360px,calc(100% - 36px)); }
.cost-final-summary>div { display:flex; justify-content:space-between; gap:18px; padding:10px 0; }
.cost-gross { border-top:2px solid var(--line); color:var(--green); font-size:18px; }
.cost-summary-note { margin:12px 18px 20px; color:var(--muted); font-size:11px; text-align:right; }
.cost-estimate-expired,.cost-excluded { background:#fcf0e6; color:#93522c; margin:16px 18px; padding:11px; border-radius:4px; font-size:12px; }
.cost-excluded p { margin:5px 0; }
.cost-pricing-fields { min-width:0; padding:16px; border:1px solid var(--line); border-radius:6px; background:var(--surface-subtle); }
.cost-pricing-fields legend { font-weight:650; padding:0 6px; }
.cost-estimate-modal { max-width:850px; }
.cost-custom-row { display:grid; grid-template-columns:minmax(150px,2fr) minmax(70px,.65fr) minmax(110px,1fr) 35px; gap:10px; align-items:end; padding:10px 0; border-top:1px solid var(--line); }
.cost-estimate-modal h3 { margin:24px 0 8px; }
@media(max-width:900px) { .cost-estimate-layout { grid-template-columns:1fr; }.cost-estimate-list { max-height:280px; overflow:auto; } }
@media(max-width:650px) { .cost-category-totals { grid-template-columns:1fr; }.cost-category-totals>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }.cost-category-totals strong { font-size:15px; margin:0; }.cost-custom-row { grid-template-columns:1fr 1fr 35px; }.cost-custom-row>.field:first-child { grid-column:1 / -1; }.cost-estimate-detail .panel-head { flex-wrap:wrap; }.cost-gross { font-size:16px; } }
.cost-pricing-fields.full { grid-column:1 / -1; }

.device-settings-group { grid-column:1 / -1; min-width:0; margin:0; padding:16px; border:1px solid var(--line); border-radius:6px; background:var(--white); }
.device-settings-group > legend { padding:0 6px; font-weight:650; font-size:13px; }

/* Keep asset actions available while inventory columns scroll. */
[data-asset-filter-table] > thead > tr > th:last-child,
[data-asset-filter-table] > tbody > tr[data-asset-row] > td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  box-shadow: -5px 0 8px -6px #20382b55;
}
[data-asset-filter-table] > thead > tr > th:last-child { background: var(--surface-subtle); z-index: 1; }
[data-asset-filter-table] > tbody > tr[data-asset-row] > td:last-child { background: var(--white); }
[data-asset-filter-table] > tbody > tr[data-asset-row]:hover > td:last-child { background: var(--surface-hover); }