:root {
    color-scheme: dark;
    --bg: #061321;
    --surface: #0a1a2b;
    --surface-2: #0e2238;
    --surface-3: #153653;
    --panel: rgba(8, 25, 42, .95);
    --border: #245177;
    --border-soft: #173a57;
    --text: #f2f6fa;
    --muted: #a6bdd2;
    --faint: #7394b2;
    --cyan: #479ef5;
    --cyan-soft: rgba(0, 120, 212, .2);
    --blue: #62abf5;
    --blue-soft: rgba(0, 120, 212, .18);
    --orange: #ff9d45;
    --orange-soft: rgba(255, 157, 69, .13);
    --green: #54d68b;
    --red: #ff6b78;
    --yellow: #f0cc5d;
    --shadow: 0 18px 50px rgba(0, 0, 0, .28);
    --sidebar: 244px;
    --topbar: 66px;
    --radius: 12px;
    --radius-sm: 8px;
    --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.multiselect-field { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; min-width: 0; }
.multiselect-field legend { padding: 0 6px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.multiselect-field > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 8px; }
.multiselect-field label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--surface-2); cursor: pointer; }
.multiselect-field input { accent-color: var(--blue); }

html[data-theme="light"] {
    color-scheme: light;
    --bg: #eaf2f8;
    --surface: #ffffff;
    --surface-2: #f5f9fc;
    --surface-3: #e4f0f8;
    --panel: rgba(255, 255, 255, .97);
    --border: #9fc3dd;
    --border-soft: #cbdde9;
    --text: #102a43;
    --muted: #46657d;
    --faint: #5c768b;
    --cyan: #0067b8;
    --cyan-soft: rgba(0, 120, 212, .12);
    --blue: #0078d4;
    --blue-soft: rgba(0, 120, 212, .1);
    --orange: #d46f15;
    --orange-soft: rgba(212, 111, 21, .1);
    --shadow: 0 18px 44px rgba(24, 72, 108, .14);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

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

button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

[hidden] { display: none !important; }

.noscript { padding: 16px; background: var(--red); color: white; text-align: center; }

.boot-screen {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    gap: 16px;
    background: var(--bg);
    z-index: 9999;
}

.boot-mark, .brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(71, 158, 245, .55);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(0, 120, 212, .34), rgba(71, 158, 245, .16));
    color: var(--cyan);
    font-size: .875rem;
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: inset 0 0 18px rgba(71, 158, 245, .12), 0 0 24px rgba(0, 120, 212, .12);
}

.boot-screen div:last-child { display: grid; gap: 5px; align-content: center; }
.boot-screen span { color: var(--muted); font-size: .875rem; }

.project-launcher {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 32px 20px;
    background:
        radial-gradient(circle at 20% 15%, rgba(0, 120, 212, .18), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(71, 158, 245, .12), transparent 34%),
        var(--bg);
}

.launcher-grid {
    position: fixed;
    inset: 0;
    opacity: .28;
    background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black, transparent 78%);
    pointer-events: none;
}

.launcher-shell {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface), transparent 4%);
    box-shadow: 0 35px 100px rgba(0,0,0,.38);
    backdrop-filter: blur(22px);
}

.launcher-brand { display: flex; align-items: center; gap: 11px; padding-bottom: 23px; border-bottom: 1px solid var(--border-soft); }
.launcher-brand > span:last-child { display: grid; }
.launcher-brand strong { font-size: .875rem; }
.launcher-brand small { margin-top: 3px; color: var(--faint); font-size: .875rem; font-weight: 800; letter-spacing: .16em; }
.launcher-copy { padding: 38px 2px 25px; }
.launcher-copy h1 { max-width: 620px; margin: 8px 0 12px; font-size: clamp(26px, 4vw, 39px); line-height: 1.08; letter-spacing: -.05em; }
.launcher-copy p { max-width: 620px; margin: 0; color: var(--muted); line-height: 1.65; }
.launcher-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.project-action {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 11px;
    min-height: 88px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.project-action:hover { transform: translateY(-2px); border-color: var(--faint); background: var(--surface-3); }
.project-action.primary { border-color: color-mix(in srgb, var(--cyan), transparent 35%); background: var(--cyan-soft); }
.project-action.primary:hover { border-color: var(--cyan); }
.project-action-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--surface-3); color: var(--cyan); font-size: 20px; }
.project-action > span:nth-child(2) { display: grid; min-width: 0; }
.project-action strong { font-size: .875rem; }
.project-action small { margin-top: 5px; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.project-action b { color: var(--cyan); font-size: .875rem; }
.project-dropzone { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 70px; margin-top: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 11px; color: var(--faint); transition: border-color .18s ease, background .18s ease; }
.project-dropzone.dragover { border-color: var(--cyan); background: var(--cyan-soft); color: var(--text); }
.project-dropzone > span:first-child { color: var(--cyan); font-size: 22px; }
.project-dropzone > span:last-child { display: grid; }
.project-dropzone strong { color: var(--muted); font-size: .875rem; }
.project-dropzone small { margin-top: 3px; font-size: .875rem; }
.launcher-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--border-soft); color: var(--faint); font-size: .875rem; }
.launcher-footer span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.launcher-footer i { display: inline-block; }

.project-file-chip {
    display: grid;
    grid-template-columns: 24px minmax(0, 125px);
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    text-align: left;
    cursor: pointer;
}
.project-file-chip:hover { border-color: var(--cyan); }
.project-file-chip > span:first-child { color: var(--cyan); font-size: 15px; }
.project-file-chip > span:last-child { display: grid; min-width: 0; }
.project-file-chip small { color: var(--faint); font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; }
.project-file-chip strong { overflow: hidden; margin-top: 2px; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) 1fr; height: 100vh; }

.sidebar {
    position: relative;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--border-soft);
    background: var(--surface);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    height: var(--topbar);
    padding: 0 18px;
    border-bottom: 1px solid var(--border-soft);
}

.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: .875rem; letter-spacing: -.02em; white-space: nowrap; }
.brand-copy small { margin-top: 4px; color: var(--faint); font-size: .875rem; letter-spacing: .18em; font-weight: 800; }

.tenant-switcher {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 14px 12px 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: left;
    cursor: pointer;
}

.tenant-switcher:hover { border-color: color-mix(in srgb, var(--border), var(--cyan) 35%); }
.tenant-switcher > span:nth-child(2) { display: grid; min-width: 0; }
.tenant-switcher small { color: var(--faint); font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; }
.tenant-switcher strong { overflow: hidden; margin-top: 3px; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.tenant-avatar, .profile-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cyan-soft);
    color: var(--cyan);
    font-size: .875rem;
    font-weight: 900;
}
.chevron { color: var(--faint); }

.tenant-menu {
    position: absolute;
    top: 126px;
    left: 12px;
    right: 12px;
    z-index: 80;
    overflow: hidden;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    box-shadow: var(--shadow);
}

.tenant-option {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.tenant-option:hover, .tenant-option.active { background: var(--surface-3); }
.tenant-option small { display: block; color: var(--muted); }

.main-nav { overflow: auto; padding: 6px 10px 14px; scrollbar-width: thin; }
.nav-label { padding: 20px 10px 7px; color: var(--faint); font-size: .875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
}
.nav-item span { width: 18px; color: var(--faint); text-align: center; font-size: 15px; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--cyan-soft); color: var(--text); font-weight: 700; }
.nav-item.active span { color: var(--cyan); }

.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border-soft); }
.health-line { display: flex; align-items: center; gap: 7px; padding: 0 5px 10px; color: var(--faint); font-size: .875rem; }
.health-dot, .save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px color-mix(in srgb, var(--green), transparent 35%); }
.profile-chip { display: grid; grid-template-columns: 32px 1fr; gap: 9px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.profile-chip:hover { background: var(--surface-2); }
.profile-chip span:last-child { display: grid; min-width: 0; }
.profile-chip strong { overflow: hidden; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip small { color: var(--faint); font-size: .875rem; }
.app-legal-notice { display: grid; gap: 2px; margin: 7px 5px 0; padding-top: 9px; border-top: 1px solid var(--border-soft); color: var(--faint); font-size: .875rem; line-height: 1.45; }
.app-legal-notice strong { color: var(--muted); font-size: .875rem; }
.app-legal-notice span { overflow-wrap: anywhere; }
.auth-legal-notice { margin: 12px 0 0; text-align: center; }

.page-column { display: grid; grid-template-rows: var(--topbar) 1fr; min-width: 0; min-height: 0; }
.topbar {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 22px;
    border-bottom: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--surface), transparent 8%);
    backdrop-filter: blur(16px);
}
.breadcrumbs { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .875rem; }
.breadcrumbs span { color: var(--faint); }
.breadcrumbs span::after { content: '/'; margin-left: 9px; color: var(--border); }
.breadcrumbs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.global-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 250px;
    padding: 0 9px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--faint);
}
.global-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .875rem; }
kbd { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-3); color: var(--muted); font: 9px var(--font); }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.icon-button:hover { border-color: var(--faint); background: var(--surface-3); }
.save-state { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); font-size: .875rem; cursor: pointer; }
.save-state.saving .save-dot { background: var(--yellow); animation: pulse 1s infinite; }
.save-state.error .save-dot { background: var(--red); }
@keyframes pulse { 50% { opacity: .35; } }

.app-content { overflow: auto; min-width: 0; min-height: 0; background: var(--bg); }
.page { min-height: 100%; padding: 24px; }
.page.editor-page { display: grid; grid-template-rows: auto 1fr; height: 100%; padding: 0; overflow: hidden; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-header h1 { margin: 3px 0 6px; font-size: clamp(22px, 2.3vw, 31px); letter-spacing: -.045em; }
.page-header p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.55; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.eyebrow { color: var(--cyan); font-size: .875rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: .875rem; font-weight: 700; cursor: pointer; }
.button:hover { transform: translateY(-1px); border-color: var(--faint); }
.button.primary { border-color: var(--cyan); background: linear-gradient(135deg,#0078d4,#2899f5); color: #fff; box-shadow: 0 7px 20px rgba(0,120,212,.22); }
.button.primary:hover { border-color: #62abf5; filter: brightness(1.08); }
.button.danger { border-color: color-mix(in srgb, var(--red), transparent 45%); color: var(--red); }
.button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.button.small { min-height: 30px; padding: 0 9px; font-size: .875rem; }
.button:disabled { opacity: .45; pointer-events: none; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }
.stat-card, .panel, .location-card, .network-card, .template-card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 0 rgba(255,255,255,.015);
}
.stat-card { position: relative; overflow: hidden; min-height: 130px; padding: 17px; }
.stat-card::after { content: ''; position: absolute; width: 92px; height: 92px; right: -34px; top: -35px; border-radius: 50%; background: var(--accent, var(--cyan)); opacity: .06; }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .875rem; }
.stat-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--accent, var(--cyan)), transparent 86%); color: var(--accent, var(--cyan)); font-size: 15px; }
.stat-value { display: block; margin: 18px 0 6px; font-size: 29px; line-height: 1; letter-spacing: -.05em; }
.stat-foot { color: var(--faint); font-size: .875rem; }
.stat-foot b { color: var(--green); font-weight: 700; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .8fr); gap: 14px; }
.dashboard-stack { display: grid; gap: 14px; align-content: start; }
.dashboard-topology-panel { margin-bottom: 14px; overflow: hidden; }
.topology-head-actions { display: flex; align-items: center; gap: 7px; }
.panel { min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 17px; border-bottom: 1px solid var(--border-soft); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: .875rem; letter-spacing: -.01em; }
.panel-head p { margin: 4px 0 0; color: var(--faint); font-size: .875rem; }
.panel-body { padding: 17px; }

.topology-overview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 17px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); color: var(--muted); font-size: .875rem; }
.topology-overview > span { display: inline-flex; align-items: baseline; gap: 4px; }
.topology-overview b { color: var(--text); font-size: .875rem; }
.topology-overview .muted b { color: var(--faint); }
.topology-key { display: flex; align-items: center; gap: 5px; margin-left: auto; color: var(--faint); }
.topology-key i { width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.topology-key i.rack { background: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.topology-key i.outlet { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.topology-view-shell { position: relative; }
.topology-viewport { position: relative; width: 100%; height: clamp(500px,60vh,680px); overflow: auto; overscroll-behavior: contain; background: var(--surface); cursor: grab; scrollbar-color: color-mix(in srgb,var(--blue),transparent 35%) var(--surface-2); scrollbar-width: thin; }
.topology-viewport.dragging { cursor: grabbing; user-select: none; }
.topology-viewport::-webkit-scrollbar { width: 10px; height: 10px; }.topology-viewport::-webkit-scrollbar-track { background: var(--surface-2); }.topology-viewport::-webkit-scrollbar-thumb { border: 2px solid var(--surface-2); border-radius: 999px; background: color-mix(in srgb,var(--blue),transparent 35%); }
.topology { position: relative; min-width: 100%; min-height: 560px; overflow: hidden; background-image: radial-gradient(var(--border) .8px, transparent .8px); background-size: 20px 20px; transition: width .2s ease,height .2s ease; }
.topology::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0, var(--surface) 75%); pointer-events: none; }
.topology-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.topology-node { position: absolute; z-index: 2; display: grid; grid-template-columns: 39px minmax(0,1fr); align-items: center; gap: 10px; width: 178px; min-height: 74px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb,var(--surface-2),transparent 2%); box-shadow: 0 8px 18px rgba(0,0,0,.16); transform: translate(-50%,-50%); cursor: pointer; transition: border-color .15s ease,box-shadow .15s ease,transform .15s ease; backdrop-filter: blur(10px); }
.topology-node:hover { z-index: 4; border-color: var(--blue); box-shadow: 0 12px 30px rgba(0,0,0,.25),0 0 0 3px var(--blue-soft); transform: translate(-50%,-50%) scale(1.04); }
.topology-node.rack-center { width: 204px; min-height: 82px; border: 2px solid color-mix(in srgb,var(--cyan),transparent 20%); background: color-mix(in srgb,var(--cyan-soft),var(--surface-2) 66%); box-shadow: 0 13px 32px rgba(0,0,0,.24),0 0 0 5px color-mix(in srgb,var(--cyan-soft),transparent 45%); }
.topology-node.outlet-node { border-color: color-mix(in srgb,var(--orange),transparent 44%); }
.topology-node i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--cyan-soft); color: var(--cyan); font-size: 16px; font-style: normal; }
.topology-node.outlet-node i { background: var(--orange-soft); color: var(--orange); }
.topology-node.device-node i { background: var(--blue-soft); color: var(--blue); }
.topology-node span { min-width: 0; text-align: left; }
.topology-node strong,.topology-node b,.topology-node small,.topology-node em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topology-node strong { color: var(--blue); font-size: .875rem; letter-spacing: .04em; }
.topology-node b { margin-top: 1px; color: var(--text); font-size: .875rem; }
.topology-node small { margin-top: 2px; color: var(--muted); font-size: .875rem; }
.topology-node em { margin-top: 2px; color: var(--faint); font-size: .875rem; font-style: normal; }
.topology-node > u { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 1px solid var(--surface-2); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb,var(--green),transparent 78%); text-decoration: none; }.topology-node.status-warning > u { background: var(--orange); }.topology-node.status-offline > u { background: var(--red); }
.topology-pan-hint { position: absolute; left: 50%; bottom: 13px; z-index: 5; padding: 7px 11px; border: 1px solid color-mix(in srgb,var(--blue),transparent 55%); border-radius: 999px; background: color-mix(in srgb,var(--panel),transparent 4%); color: var(--muted); box-shadow: 0 7px 18px rgba(0,0,0,.2); font-size: .875rem; font-weight: 700; transform: translateX(-50%); pointer-events: none; backdrop-filter: blur(10px); }
.topology-empty { display: grid; place-items: center; min-height: 310px; padding: 40px; text-align: center; }
.topology-empty span { color: var(--cyan); font-size: 38px; }.topology-empty strong { margin-top: 8px; font-size: .875rem; }.topology-empty p { max-width: 430px; margin: 5px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.55; }

.alert-list, .activity-list { display: grid; }
.alert-item, .activity-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.alert-item:last-child, .activity-item:last-child { border-bottom: 0; }
.alert-icon, .activity-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--orange-soft); color: var(--orange); font-size: .875rem; }
.alert-item strong, .activity-item strong { display: block; margin-bottom: 3px; font-size: .875rem; }
.alert-item small, .activity-item small { color: var(--faint); font-size: .875rem; }
.alert-item time, .activity-item time { color: var(--faint); font-size: .875rem; }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.quick-action { min-height: 75px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); text-align: left; cursor: pointer; }
.quick-action:hover { border-color: var(--cyan); background: var(--cyan-soft); }
.quick-action span { display: block; margin-bottom: 12px; color: var(--cyan); font-size: 17px; }
.quick-action strong { display: block; font-size: .875rem; }
.quick-action small { color: var(--faint); font-size: .875rem; }

.location-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr); gap: 14px; }
.site-map { position: relative; min-height: 510px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius); background-color: #0b1721; background-image: linear-gradient(rgba(69, 106, 129, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(69, 106, 129, .09) 1px, transparent 1px); background-size: 44px 44px; }
html[data-theme="light"] .site-map { background-color: #dbe8ed; }
.site-map::before, .site-map::after { content: ''; position: absolute; border: 22px solid rgba(49, 125, 143, .12); border-radius: 42% 58% 56% 44%; transform: rotate(-13deg); }
.site-map::before { width: 46%; height: 24%; left: -8%; bottom: 7%; }
.site-map::after { width: 42%; height: 18%; right: -10%; top: 9%; }
.map-road { position: absolute; height: 12px; background: rgba(135, 155, 169, .1); border: 1px solid rgba(135, 155, 169, .08); transform-origin: left center; }
.map-pin { position: absolute; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid color-mix(in srgb, var(--surface-2), transparent 10%); border-radius: 50% 50% 50% 8px; background: linear-gradient(135deg,#0078d4,#2899f5); color: #fff; font-size: .875rem; font-weight: 900; box-shadow: 0 7px 20px rgba(0,120,212,.28); transform: rotate(-45deg); cursor: pointer; }
.map-pin span { transform: rotate(45deg); }
.map-pin.active { background: var(--orange); scale: 1.12; }
.map-legend { position: absolute; left: 15px; bottom: 15px; z-index: 4; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--muted); font-size: .875rem; backdrop-filter: blur(10px); }
.location-cards { display: grid; gap: 10px; align-content: start; }
.location-card { padding: 15px; cursor: pointer; }
.location-card.active { border-color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
.location-card-head { display: flex; justify-content: space-between; gap: 12px; }
.location-code { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 5px; background: var(--cyan-soft); color: var(--cyan); font-size: .875rem; font-weight: 900; }
.location-card h3 { margin: 10px 0 4px; font-size: 14px; }
.location-card p { margin: 0; color: var(--muted); font-size: .875rem; }
.location-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.location-meta span { display: grid; gap: 3px; color: var(--faint); font-size: .875rem; }
.location-meta b { color: var(--text); font-size: .875rem; }

.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface); }
.editor-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.editor-title div { min-width: 0; }
.editor-title h1 { overflow: hidden; margin: 2px 0 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.editor-tabs, .segmented { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.editor-tabs button, .segmented button { min-height: 27px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: .875rem; cursor: pointer; }
.editor-tabs button.active, .segmented button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.editor-body { display: grid; grid-template-columns: 190px minmax(0, 1fr) 268px; min-height: 0; }
.tool-panel, .inspector { min-width: 0; overflow: auto; background: var(--surface); }
.tool-panel { border-right: 1px solid var(--border-soft); }
.inspector { border-left: 1px solid var(--border-soft); }
.tool-section { padding: 14px; border-bottom: 1px solid var(--border-soft); }
.tool-section h3 { margin: 0 0 10px; color: var(--faint); font-size: .875rem; text-transform: uppercase; letter-spacing: .12em; }
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.editor-tool { display: grid; place-items: center; gap: 5px; min-height: 58px; padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: .875rem; cursor: pointer; }
.editor-tool span { color: var(--text); font-size: 17px; }
.editor-tool:hover, .editor-tool.active { border-color: var(--cyan); background: var(--cyan-soft); color: var(--text); }
.floor-snap-picker { display: grid; gap: 8px; margin-top: 11px; padding: 10px; border: 1px solid color-mix(in srgb,var(--cyan),transparent 48%); border-radius: 9px; background: color-mix(in srgb,var(--surface-2),transparent 18%); box-shadow: inset 0 0 18px var(--cyan-soft); }
.floor-snap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.floor-snap-head strong { color: var(--text); font-size: .875rem; }
.floor-snap-head small { color: var(--faint); font-size: .875rem; text-transform: uppercase; letter-spacing: .07em; }
.floor-snap-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.floor-snap-options button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: .875rem; cursor: pointer; }
.floor-snap-options button:hover,.floor-snap-options button:focus-visible,.floor-snap-options button.active { border-color: var(--cyan); background: var(--cyan-soft); color: var(--text); outline: none; }
.floor-snap-options button span { color: var(--cyan); font-size: .875rem; }
.floor-snap-picker p { margin: 0; color: var(--faint); font-size: .875rem; line-height: 1.45; }
.palette-list { display: grid; gap: 6px; }
.palette-section-label { margin-top: 16px; }
.library-section { display: grid; gap: 14px; margin-top: 22px; }
.palette-item { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); cursor: grab; }
.palette-item:active { cursor: grabbing; }
.palette-item:hover { border-color: var(--faint); }
.palette-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font-size: 14px; }
.palette-item strong { display: block; font-size: .875rem; }
.palette-item small { color: var(--faint); font-size: .875rem; }

.workspace { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #070c12; }
html[data-theme="light"] .workspace { background: #dfe5e9; }
.workspace-toolbar { position: absolute; top: 12px; left: 50%; z-index: 20; display: flex; gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); box-shadow: var(--shadow); transform: translateX(-50%); backdrop-filter: blur(12px); }
.workspace-toolbar button { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: .875rem; cursor: pointer; }
.workspace-toolbar button:hover, .workspace-toolbar button.active { background: var(--surface-3); color: var(--text); }
.layout-lock-state { display: inline-flex; align-items: center; padding: 0 8px; border-right: 1px solid var(--border); color: var(--faint); font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.layout-lock-state.unlocked { color: var(--orange); }
.floor-snap-indicator { display: inline-flex; align-items: center; padding: 0 8px; border-right: 1px solid var(--border); color: var(--cyan); font-size: .875rem; font-weight: 800; white-space: nowrap; }
.floor-viewport { position: absolute; inset: 0; overflow: auto; padding: 78px 55px 90px; }
.floor-canvas { --floor-grid-size: 20px; position: relative; width: 1000px; height: 600px; min-width: 500px; overflow: hidden; border: 1px solid #324357; border-radius: 4px; background-color: #101922; background-image: linear-gradient(rgba(139, 161, 178, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 161, 178, .06) 1px, transparent 1px); background-size: var(--floor-grid-size) var(--floor-grid-size); box-shadow: 0 26px 65px rgba(0,0,0,.32); transform-origin: top left; }
.floor-canvas.layout-locked::after { content: 'LAYOUT GESPERRT'; position: absolute; right: 14px; top: 14px; z-index: 13; padding: 5px 8px; border: 1px solid rgba(150,166,180,.28); border-radius: 6px; background: rgba(5,10,16,.72); color: #8fa0af; font-size: .875rem; font-weight: 900; letter-spacing: .12em; pointer-events: none; }
.floor-canvas.layout-unlocked { border-color: color-mix(in srgb,var(--orange),transparent 25%); box-shadow: 0 26px 65px rgba(0,0,0,.32),0 0 0 2px color-mix(in srgb,var(--orange),transparent 78%); }
.floor-canvas.drawing-mode { cursor: crosshair; }
.floor-canvas.snap-grid-mode::before { content: ''; position: absolute; inset: 0; z-index: 6; background-image: linear-gradient(color-mix(in srgb,var(--cyan),transparent 72%) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--cyan),transparent 72%) 1px,transparent 1px); background-size: var(--floor-grid-size) var(--floor-grid-size); pointer-events: none; }
html[data-theme="light"] .floor-canvas { background-color: #f1f3f4; border-color: #a6b0b8; }
.floor-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: .66; pointer-events: none; }
.wiring-canvas, .rack-wire-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.wiring-canvas.user-wiring-layer { z-index: 7; }
.wiring-canvas.building-wiring-layer { z-index: 1; }
.room-shape { position: absolute; z-index: 2; overflow: hidden; border: 1px solid rgba(107, 139, 165, .72); background: rgba(54, 84, 105, .18); cursor: pointer; touch-action: none; user-select: none; }
.room-shape.movable { cursor: move; }
.room-shape.dragging { cursor: grabbing; }
.room-shape:hover, .room-shape.selected { border-color: var(--cyan); background: var(--cyan-soft); }
.room-shape.polygon { overflow: visible; border: 0; border-radius: 0; }
.room-polygon-outline { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.room-polygon-outline polygon { fill: none; stroke: hsla(var(--room-hue),65%,68%,.72); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; transition: stroke .18s ease,stroke-width .18s ease; }
.room-shape.polygon:hover + .room-polygon-outline polygon,.room-shape.polygon.selected + .room-polygon-outline polygon { stroke: hsl(var(--room-hue),80%,68%); stroke-width: 1.8; }
.room-shape strong { position: absolute; top: 7px; left: 8px; padding: 3px 5px; border-radius: 4px; background: rgba(5,10,16,.72); color: #d9e4ed; font-size: 8px; letter-spacing: .08em; }
.room-preview { position: absolute; z-index: 9; border: 1px dashed var(--cyan); background: var(--cyan-soft); pointer-events: none; }
.room-preview.grid { border-color: var(--orange); background: color-mix(in srgb,var(--orange),transparent 84%); box-shadow: 0 0 0 2px color-mix(in srgb,var(--orange),transparent 84%); }
.polygon-point { position: absolute; z-index: 12; width: 9px; height: 9px; border: 2px solid #061321; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); transform: translate(-50%,-50%); pointer-events: none; }
.polygon-point.grid { border-radius: 2px; background: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb,var(--orange),transparent 72%); transform: translate(-50%,-50%) rotate(45deg); }
.floor-snap-preview { position: absolute; z-index: 17; width: 17px; height: 17px; border: 1px solid var(--cyan); border-radius: 50%; background: color-mix(in srgb,var(--cyan),transparent 84%); box-shadow: 0 0 0 4px color-mix(in srgb,var(--cyan),transparent 90%); transform: translate(-50%,-50%); pointer-events: none; }
.floor-snap-preview.grid { width: 21px; height: 21px; border-color: var(--orange); border-radius: 3px; background: color-mix(in srgb,var(--orange),transparent 90%); box-shadow: 0 0 0 4px color-mix(in srgb,var(--orange),transparent 90%); }
.floor-snap-preview.grid::before,.floor-snap-preview.grid::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--orange); transform: translate(-50%,-50%); }
.floor-snap-preview.grid::before { width: 29px; height: 1px; }
.floor-snap-preview.grid::after { width: 1px; height: 29px; }
.room-resize-handle, .room-vertex-handle { position: absolute; z-index: 14; width: 13px; height: 13px; padding: 0; border: 2px solid #071018; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px rgba(255,157,69,.28); transform: translate(-50%,-50%); touch-action: none; }
.room-vertex-handle { background: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-soft); cursor: move; }
.room-resize-handle.direction-n, .room-resize-handle.direction-s { cursor: ns-resize; }
.room-resize-handle.direction-e, .room-resize-handle.direction-w { cursor: ew-resize; }
.room-resize-handle.direction-ne, .room-resize-handle.direction-sw { cursor: nesw-resize; }
.room-resize-handle.direction-nw, .room-resize-handle.direction-se { cursor: nwse-resize; }
.floor-resize-handle { position: absolute; top: 12px; right: 8px; z-index: 16; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,157,69,.42); border-radius: 9px; background-color: rgba(8,15,22,.86); background-image: linear-gradient(135deg,transparent 42%,var(--orange) 44% 51%,transparent 53% 61%,var(--orange) 63% 70%,transparent 72%); box-shadow: 0 5px 18px rgba(0,0,0,.32); cursor: nwse-resize; touch-action: none; }
.floor-resize-handle:hover { background-color: rgba(255,157,69,.12); }
.floor-device { position: absolute; z-index: 8; display: grid; place-items: center; box-sizing: border-box; width: var(--device-width,var(--device-size,38px)); height: var(--device-height,var(--device-size,38px)); padding: 0; border: 1px solid #49627a; border-radius: 9px; background: #111e2a; color: #b8d2e8; box-shadow: 0 7px 15px rgba(0,0,0,.27); cursor: grab; transform: translate(-50%, -50%); user-select: none; }
.floor-device.locked { cursor: pointer; }
.floor-device.dragging { cursor: grabbing; }
.floor-device:active { cursor: grabbing; }
.floor-device:hover, .floor-device.selected { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft), 0 7px 15px rgba(0,0,0,.27); }
.floor-device.rack { width: var(--device-width,var(--device-size,45px)); height: var(--device-height,var(--device-size,45px)); border-radius: 6px; background: #1e2935; }
.floor-device.outlet { width: var(--device-width,var(--device-size,30px)); height: var(--device-height,var(--device-size,30px)); border-radius: 50%; }
.room-svg-face { position: relative; overflow: hidden; border: 1px solid rgba(126,164,195,.52); border-radius: 4px; background: #050a0f; box-shadow: inset 0 0 12px rgba(0,0,0,.38); }
.room-svg-face.detail { width: 100%; min-height: 48px; margin-top: 10px; }
.room-svg-face > img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.room-svg-ports { position: absolute; inset: 0; }
.floor-inline-port { position: absolute; z-index: 4; display: grid; place-items: center; min-width: 5px; min-height: 5px; padding: 0; border: 1px solid #8aabc6; border-radius: 2px; background: rgba(4,13,20,.9); color: #d9e9f6; box-shadow: 0 0 0 1px rgba(0,0,0,.62); cursor: pointer; translate: -50% -50%; touch-action: none; }
.floor-inline-port span { overflow: hidden; max-width: 100%; padding-inline: 1px; font-size: .875rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.floor-inline-port:hover,.floor-inline-port:focus-visible { z-index: 9; border-color: #fff; background: #075fa8; box-shadow: 0 0 0 3px rgba(71,158,245,.36); scale: 1.2; outline: 0; }
.floor-inline-port.connected { border-color: var(--blue); background: #075fa8; box-shadow: 0 0 0 2px color-mix(in srgb,var(--blue),transparent 60%); }
.floor-inline-port.building { border-color: var(--orange); background: #7c3e0b; box-shadow: 0 0 0 2px color-mix(in srgb,var(--orange),transparent 62%); }
.room-svg-face.detail .floor-inline-port { min-width: 8px; min-height: 8px; }
.room-svg-face.detail .floor-inline-port span { font-size: .875rem; }
.room-outlet-ports { position: absolute; z-index: 5; left: 50%; bottom: -8px; display: flex; gap: 3px; transform: translateX(-50%); }
.room-outlet-ports .floor-inline-port.outlet { position: relative; width: 10px; height: 10px; min-width: 10px; min-height: 10px; translate: none; border-radius: 3px; }
.room-outlet-ports .floor-inline-port.outlet span { font-size: .875rem; }
.floor-device.micro .room-outlet-ports { bottom: -6px; gap: 1px; }.floor-device.micro .room-outlet-ports .floor-inline-port.outlet { width: 7px; height: 7px; min-width: 7px; min-height: 7px; }
.floor-device .device-icon { font-size: 15px; pointer-events: none; }
.floor-device .device-label { position: absolute; top: calc(100% + 3px); left: 50%; max-width: 90px; overflow: hidden; padding: 2px 4px; border-radius: 4px; background: rgba(5,10,16,.76); color: #cfd9e2; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.floor-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; color: var(--faint); text-align: center; pointer-events: none; }
.floor-empty span { font-size: 30px; }
.workspace-status { position: absolute; left: 12px; bottom: 12px; z-index: 15; display: flex; gap: 12px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--faint); font-size: .875rem; }
.workspace-status b { color: var(--text); }
.bottom-drawer { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 14; max-height: 160px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.bottom-drawer summary { padding: 9px 12px; color: var(--muted); font-size: .875rem; font-weight: 700; cursor: pointer; }
.bottom-drawer[open] summary { border-bottom: 1px solid var(--border-soft); }
.drawer-content { max-height: 115px; overflow: auto; }

.inspector-empty { display: grid; place-content: center; min-height: 65%; padding: 25px; color: var(--faint); text-align: center; }
.inspector-empty span { margin-bottom: 12px; font-size: 28px; }
.inspector-empty p { margin: 7px 0 0; font-size: .875rem; line-height: 1.5; }
.inspector-head { padding: 17px; border-bottom: 1px solid var(--border-soft); }
.inspector-head h2 { margin: 4px 0 0; font-size: 15px; }
.inspector-section { padding: 15px 17px; border-bottom: 1px solid var(--border-soft); }
.inspector-section > h3 { margin: 0 0 12px; color: var(--faint); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
.inspector-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.inspector-section-head h3 { margin: 0; color: var(--faint); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
.room-device-svg-section .dialog-note { margin: 0; }
.room-svg-caption { display: grid; gap: 2px; margin-top: 7px; }
.room-svg-caption strong { font-size: .875rem; }.room-svg-caption small { color: var(--muted); font-size: .875rem; line-height: 1.45; }
.svg-device-palette .palette-item { border-color: color-mix(in srgb,var(--blue),transparent 55%); }
.svg-template-item .palette-symbol { color: var(--blue); background: var(--blue-soft); }
.field { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; min-width: 0; gap: 5px; margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }
.field label, label.field > span { color: var(--muted); font-size: .875rem; }
.field input, .field select, .field textarea, .filter-input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: 0;
    background: var(--surface-2);
    color: var(--text);
    font-size: .875rem;
}
.field textarea { min-height: 68px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .filter-input:focus { border-color: var(--cyan); }
.field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 8px; margin-bottom: 10px; }
.field-row > .field { grid-template-rows: minmax(18px,1fr) auto; margin-bottom: 0; }
.field-row > .field > :is(span,label) { align-self: start; }
.port-list { display: grid; gap: 6px; }
.port-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; min-height: 34px; padding: 6px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); font-size: .875rem; }
.port-state { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--faint); }
.port-row.connected { border-color: color-mix(in srgb, var(--blue), transparent 40%); }
.port-row.connected .port-state { border: 0; background: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb,var(--green),transparent 76%),0 0 8px color-mix(in srgb,var(--green),transparent 36%); }
.port-row.building { border-color: color-mix(in srgb,var(--orange),transparent 38%); }
.port-row.building .port-state { background: var(--green); border: 0; }
.port-actions { display: flex; gap: 3px; }
.mini-icon { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 5px; background: var(--surface-3); color: var(--muted); font-size: .875rem; cursor: pointer; }
.mini-icon:hover { color: var(--text); }

.rack-workspace { display: grid; place-items: start center; overflow: auto; padding: 65px 40px 80px; }
.rack-stage { position: relative; display: grid; grid-template-columns: 36px 390px; gap: 8px; }
.rack-units { display: grid; color: var(--faint); font-size: .875rem; text-align: right; }
.rack-unit-label { display: flex; align-items: center; justify-content: flex-end; height: 34px; }
.rack-frame { position: relative; width: 390px; border: 8px solid #263241; border-radius: 7px; background: #0a0f15; box-shadow: 0 25px 65px rgba(0,0,0,.36); }
.rack-frame::before, .rack-frame::after { content: ''; position: absolute; z-index: 8; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(to bottom, #4c5a68 0 2px, #17202a 2px 8px); pointer-events: none; }
.rack-frame::before { left: 5px; }.rack-frame::after { right: 5px; }
.rack-grid { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 33px, #1e2b38 33px 34px); pointer-events: none; }
.rack-device { position: absolute; left: 17px; right: 17px; z-index: 4; overflow: hidden; border: 1px solid #536476; border-radius: 3px; background: linear-gradient(#283543, #18222d); color: #dce5ec; cursor: grab; }
.rack-device.selected { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-soft); }
.rack-device-head { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 8px; font-weight: 800; }
.rack-device-head small { color: #94a5b5; font-size: 7px; }
.rack-ports { display: flex; flex-wrap: wrap; align-content: center; gap: 3px; min-height: calc(100% - 22px); padding: 5px 8px; }
.rack-port { display: grid; place-items: center; width: 17px; height: 14px; border: 1px solid #627588; border-radius: 2px; background: #111922; color: #8fa2b4; font-size: 5px; cursor: crosshair; }
.rack-port:hover, .rack-port.selected { border-color: var(--cyan); background: #0f4773; color: white; scale: 1.2; }
.rack-port.connected { border-color: var(--blue); background: #17304e; color: #bfd7ff; }
.rack-port.building { border-color: #ffc184; background: var(--orange); color: #261304; box-shadow: 0 0 0 1px color-mix(in srgb,var(--orange),transparent 55%); }
.rack-port.vlan-highlight { box-shadow: 0 0 0 2px var(--yellow); }
.rack-drop-target { position: absolute; left: 17px; right: 17px; z-index: 9; border: 1px dashed var(--cyan); background: var(--cyan-soft); pointer-events: none; }

.status-pill, .type-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.status-pill.warning::before { background: var(--orange); }
.status-pill.offline::before { background: var(--red); }
.type-pill.building { background: var(--orange-soft); color: var(--orange); }
.type-pill.user { background: var(--blue-soft); color: var(--blue); }

.data-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.activity-bulk-actions { display: flex; align-items: center; gap: 8px; }
.activity-select-all { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: .875rem; font-weight: 700; cursor: pointer; }
.activity-select-all input,.activity-check-column input { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; }
.activity-check-column { width: 38px; min-width: 38px; padding-inline: 10px !important; text-align: center; }
.activity-table tbody tr.selected td { background: color-mix(in srgb,var(--blue-soft),var(--surface) 38%); }
.activity-table tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.activity-bulk-actions .button:disabled { opacity: .42; cursor: not-allowed; }
.tab-bar { display: flex; gap: 4px; overflow: auto; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.tab-bar button { min-height: 31px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: .875rem; white-space: nowrap; cursor: pointer; }
.tab-bar button.active { background: var(--surface-3); color: var(--text); font-weight: 700; }
.filter-group { display: flex; align-items: center; gap: 7px; }
.filter-input { width: 220px; }
.data-table-wrap { overflow: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table th { position: sticky; top: 0; z-index: 2; padding: 11px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--faint); font-size: .875rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); color: var(--muted); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2), transparent 25%); color: var(--text); }
.data-table .resource-link { border: 0; background: transparent; color: var(--cyan); font-weight: 800; cursor: pointer; }
.empty-table { padding: 45px !important; color: var(--faint) !important; text-align: center; }

.connection-chain { display: flex; align-items: center; gap: 7px; }
.chain-node { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: var(--text); font-size: .875rem; }
.chain-line { width: 18px; height: 1px; background: var(--blue); }
.connection-row { cursor: pointer; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.network-card, .template-card { padding: 15px; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-top h3 { margin: 3px 0 4px; font-size: .875rem; }
.card-top p { margin: 0; color: var(--faint); font-size: .875rem; }
.vlan-badge { display: grid; place-items: center; min-width: 38px; height: 38px; border-radius: 9px; background: var(--vlan-color, var(--blue-soft)); color: white; font-size: .875rem; font-weight: 900; }
.network-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.network-stats div { padding: 9px; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--surface-2); }
.network-stats small { display: block; color: var(--faint); font-size: .875rem; }
.network-stats strong { display: block; margin-top: 4px; font-size: .875rem; }
.card-actions { display: flex; gap: 6px; margin-top: 12px; }
.template-face { display: flex; align-items: center; gap: 3px; min-height: 60px; margin: 14px 0; padding: 9px; border: 5px solid #283543; border-radius: 4px; background: #111922; }
.template-port { width: 12px; height: 10px; border: 1px solid #617488; border-radius: 2px; }
.template-info { display: flex; justify-content: space-between; color: var(--faint); font-size: .875rem; }

.admin-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; }
.update-console .panel-head { align-items: flex-start; }
.update-version-card { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.update-version-card > div { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.update-version-card small,.update-rollback-row small { display: block; color: var(--faint); margin-bottom: 5px; }
.update-version-card strong { color: var(--text); font-size: 14px; }
.update-drop-zone { display: grid; justify-items: center; gap: 8px; padding: 28px 20px; border: 1px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb,var(--accent) 7%,var(--surface)); text-align: center; }
.update-drop-zone > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 25px; }
.update-drop-zone p { max-width: 680px; margin: 0 0 8px; color: var(--muted); line-height: 1.55; }
.update-rollback-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
@media (max-width: 900px) { .update-version-card { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .update-version-card { grid-template-columns: 1fr; } .update-rollback-row { align-items: stretch; flex-direction: column; } }
.settings-nav { padding: 8px; align-self: start; }
.settings-nav button { display: flex; width: 100%; min-height: 37px; align-items: center; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: .875rem; text-align: left; cursor: pointer; }
.settings-nav button:hover, .settings-nav button.active { background: var(--surface-3); color: var(--text); }
.settings-content { min-width: 0; }
.settings-section { margin-bottom: 14px; }
.settings-section .panel-body { max-width: 760px; }
.drop-zone { display: grid; place-content: center; min-height: 150px; padding: 20px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); color: var(--muted); text-align: center; }
.drop-zone span { margin-bottom: 8px; color: var(--cyan); font-size: 24px; }
.drop-zone strong { font-size: .875rem; }
.drop-zone small { margin-top: 5px; color: var(--faint); font-size: .875rem; }

.app-dialog, .command-dialog { padding: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.app-dialog { width: min(570px, calc(100vw - 30px)); }
.app-dialog::backdrop, .command-dialog::backdrop { background: rgba(0, 5, 10, .7); backdrop-filter: blur(4px); }
.app-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 19px; border-bottom: 1px solid var(--border-soft); }
.app-dialog header h2 { margin: 3px 0 0; font-size: 17px; }
.dialog-body { max-height: min(65vh, 650px); overflow: auto; padding: 18px 19px; }
.app-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 19px; border-top: 1px solid var(--border-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.dialog-note { padding: 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: .875rem; line-height: 1.5; }
.danger-note { border-color: color-mix(in srgb, var(--red), transparent 55%); background: color-mix(in srgb, var(--red), transparent 92%); color: var(--red); }

.command-dialog { width: min(660px, calc(100vw - 24px)); margin-top: 12vh; }
.command-head { display: flex; align-items: center; gap: 11px; padding: 14px; border-bottom: 1px solid var(--border); }
.command-head span { color: var(--cyan); font-size: 20px; }
.command-head input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.command-results { max-height: 440px; overflow: auto; padding: 7px; }
.command-result { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.command-result:hover, .command-result.active { background: var(--surface-3); }
.command-result > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--cyan-soft); color: var(--cyan); }
.command-result strong { display: block; font-size: .875rem; }
.command-result small { color: var(--faint); font-size: .875rem; }
.command-result > small { padding: 3px 6px; border-radius: 5px; background: var(--surface-2); }
.command-dialog footer { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--border); color: var(--faint); font-size: .875rem; }

.toast-stack { position: fixed; right: 17px; bottom: 17px; z-index: 999; display: grid; gap: 8px; width: min(340px, calc(100vw - 34px)); }
.toast { display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); animation: toast-in .22s ease; backdrop-filter: blur(14px); }
.toast > span:first-child { color: var(--green); }
.toast.error > span:first-child { color: var(--red); }
.toast strong { display: block; font-size: .875rem; }
.toast small { display: block; margin-top: 3px; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.toast button { border: 0; background: transparent; color: var(--faint); cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.color-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: -1px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.text-right { text-align: right; }
.mobile-only { display: none; }

@media (max-width: 1180px) {
    .editor-body { grid-template-columns: 172px minmax(0, 1fr) 240px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    :root { --sidebar: 245px; }
    .mobile-only { display: grid; }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); box-shadow: var(--shadow); transform: translateX(-102%); transition: transform .22s ease; }
    .sidebar.open { transform: translateX(0); }
    .brand .icon-button { margin-left: auto; }
    .global-search { width: 170px; }
    .save-state span:last-child { display: none; }
    .project-file-chip { grid-template-columns: 20px; width: 38px; padding: 0 8px; }
    .project-file-chip > span:last-child { display: none; }
    .page { padding: 18px; }
    .location-layout { grid-template-columns: 1fr; }
    .site-map { min-height: 350px; }
    .editor-body { grid-template-columns: 160px minmax(600px, 1fr); overflow: auto; }
    .inspector { position: absolute; top: 59px; right: 0; bottom: 0; z-index: 25; width: 270px; box-shadow: -12px 0 35px rgba(0,0,0,.24); transform: translateX(calc(100% - 8px)); transition: transform .2s ease; }
    .inspector:hover, .inspector:focus-within, .inspector.pinned { transform: translateX(0); }
    .admin-layout { grid-template-columns: 1fr; }
    .settings-nav { display: flex; overflow: auto; }
    .settings-nav button { width: auto; white-space: nowrap; }
}

@media (max-width: 620px) {
    .project-launcher { place-items: start center; padding: 13px; }
    .launcher-shell { padding: 18px; border-radius: 14px; }
    .launcher-copy { padding: 28px 0 20px; }
    .launcher-actions { grid-template-columns: 1fr; }
    .project-action { min-height: 78px; }
    .project-dropzone { display: none; }
    .launcher-footer { align-items: flex-start; flex-direction: column; }
    .topbar { padding: 0 11px; }
    .breadcrumbs span { display: none; }
    .global-search { width: 38px; justify-content: center; cursor: pointer; }
    .global-search input, .global-search kbd { display: none; }
    .page-header { display: grid; }
    .page-actions { justify-content: flex-start; }
    .stat-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 112px; }
    .card-grid { grid-template-columns: 1fr; }
    .data-toolbar { align-items: stretch; }
    .filter-group, .filter-input { width: 100%; }
    .form-grid, .field-row { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
    .command-dialog footer { display: none; }
    .editor-head { align-items: flex-start; }
    .editor-tabs { max-width: 180px; overflow: auto; }
}

/* MySQL login and project selection */
.auth-screen {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 28px 18px;
    background: #dcebf5;
}
.auth-cinematic { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #dcebf5; pointer-events: none; }
.auth-cinematic-poster,.auth-cinematic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.auth-cinematic-poster { filter: saturate(1.18) contrast(1.07) brightness(1.04); transform: scale(1.035); }
.auth-cinematic video { z-index: 1; opacity: 0; filter: saturate(1.18) contrast(1.07) brightness(1.04); transition: opacity .42s ease; }
.auth-cinematic video.is-ready { opacity: 1; }
.auth-cinematic-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg,rgba(224,240,250,.18),rgba(239,248,253,.04) 38%,rgba(238,248,253,.05) 62%,rgba(220,237,248,.2)),linear-gradient(180deg,rgba(243,249,253,.08),transparent 42%,rgba(201,225,241,.16)); box-shadow: inset 0 0 150px rgba(19,68,103,.18); }
.auth-screen .launcher-grid { display: none; }
.auth-card { position: relative; z-index: 2; width: min(560px,100%); padding: 27px; border: 1px solid rgba(82,143,185,.38); border-radius: 18px; background: rgba(250,253,255,.9); color: #102a3c; box-shadow: 0 38px 100px rgba(31,75,105,.25),0 0 0 1px rgba(255,255,255,.72) inset; backdrop-filter: blur(24px) saturate(1.12); }
.auth-card :is(input,select,textarea) { border-color: #9ebed5; background: rgba(255,255,255,.94); color: #102a3c; }
.auth-card :is(input,select,textarea)::placeholder { color: #6c8799; }
.auth-card :is(.auth-copy p,.field small,.launcher-footer,.app-legal-notice) { color: #526f82; }
.auth-card :is(.launcher-brand strong,.auth-copy h1) { color: #102a3c; }
.auth-card .launcher-brand { border-bottom-color: rgba(76,126,160,.24); }
.auth-card .launcher-footer { border-top-color: rgba(76,126,160,.24); }
.auth-card .field > span { color: #294b62; }
.auth-card .auth-submit { box-shadow: 0 10px 28px rgba(0,120,212,.24); }
.auth-copy { padding: 32px 0 23px; }
.auth-copy h1 { margin: 7px 0 9px; font-size: 31px; letter-spacing: -.04em; }
.auth-copy p { margin: 0; color: var(--muted); line-height: 1.6; }
.auth-form { display: grid; gap: 4px; }
.auth-submit { width: 100%; min-height: 43px; margin-top: 5px; }
.auth-error { margin: 0 0 5px; padding: 9px 10px; border: 1px solid color-mix(in srgb,var(--red),transparent 50%); border-radius: 7px; background: color-mix(in srgb,var(--red),transparent 91%); color: var(--red); font-size: .875rem; }
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
    .auth-cinematic video { display: none; }
    .auth-cinematic-poster { transform: none; }
}
.project-list { display: grid; gap: 8px; max-height: 270px; margin-top: 12px; overflow: auto; }
.project-list-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; width: 100%; min-height: 68px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); text-align: left; cursor: pointer; }
.project-list-item:hover { border-color: var(--cyan); background: var(--cyan-soft); }
.project-list-item > span:nth-child(2) { display: grid; gap: 4px; }
.project-list-item strong { font-size: .875rem; }
.project-list-item small { color: var(--muted); font-size: .875rem; }
.project-list-item b { color: var(--cyan); font-size: .875rem; }
.project-empty { display: grid; place-items: center; gap: 5px; min-height: 80px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); }
.project-empty small { color: var(--faint); font-size: .875rem; }
.project-dropzone.compact { min-height: 55px; cursor: pointer; }
.launcher-actions { grid-template-columns: 1fr; }
.launcher-actions .project-action { min-height: 66px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--cyan); font-size: .875rem; cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .48; cursor: not-allowed !important; }

/* Richer floor and location plans */
.site-map { background-color: #071a2b; background-image: radial-gradient(circle at 72% 26%,rgba(0,120,212,.2),transparent 20%), linear-gradient(rgba(71,158,245,.11) 1px,transparent 1px), linear-gradient(90deg,rgba(71,158,245,.11) 1px,transparent 1px); background-size: auto,44px 44px,44px 44px; box-shadow: inset 0 0 80px rgba(0,84,150,.28); }
.site-map::before { border-color: rgba(0,120,212,.22); box-shadow: 0 0 0 30px rgba(0,120,212,.04); }
.site-map::after { border-color: rgba(71,158,245,.2); box-shadow: 0 0 0 34px rgba(71,158,245,.04); }
.map-pin { transition: scale .18s ease,filter .18s ease; }
.map-pin:hover { scale: 1.16; filter: brightness(1.15); }
.site-map.osm-map { min-height: 0; aspect-ratio: 64 / 51; overflow: hidden; background: #dbe1dc; background-image: none; box-shadow: 0 22px 65px rgba(0,0,0,.28); }
.site-map.osm-map::before,.site-map.osm-map::after { display: none; }
.osm-tile-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.osm-map-tile { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; }
.osm-map-status { position: absolute; inset: 0; z-index: 0; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 30px; color: #43515b; text-align: center; }
.osm-map-status[hidden] { display: none; }
.osm-map-status strong { color: #18272e; font-size: .875rem; }
.osm-map-status small { max-width: 360px; color: #596970; font-size: .875rem; line-height: 1.55; }
.osm-location-marker { position: absolute; left: 50%; top: 50%; z-index: 4; width: 28px; height: 28px; border: 4px solid #fff; border-radius: 50% 50% 50% 0; background: #e64a35; box-shadow: 0 5px 18px rgba(0,0,0,.38); transform: translate(-50%,-100%) rotate(-45deg); }
.osm-location-marker[hidden] { display: none; }
.osm-location-marker span { position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.osm-map-badge { position: absolute; top: 14px; left: 14px; z-index: 5; display: grid; gap: 3px; max-width: calc(100% - 90px); padding: 9px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: rgba(5,12,17,.86); color: #f1f6f8; box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(10px); }
.osm-map-badge span { color: #6ee9df; font-size: .875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.osm-map-badge strong { overflow: hidden; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.osm-map-controls { position: absolute; top: 14px; right: 14px; z-index: 6; display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.osm-map-controls button { width: 34px; height: 34px; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); background: rgba(5,12,17,.88); color: #fff; font: 700 18px/1 system-ui; cursor: pointer; }
.osm-map-controls button:last-child { border-bottom: 0; }
.osm-map-controls button:hover { background: #162c34; color: #6ee9df; }
.osm-attribution { position: absolute; right: 7px; bottom: 7px; z-index: 6; padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.9); color: #26363d; font-size: .875rem; line-height: 1.35; }
.osm-attribution a { color: #1769aa; text-decoration: none; }
.quality-score { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 7px; min-width: 112px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.quality-score strong { color: var(--green); font-size: 28px; }
.quality-score.warning strong { color: var(--orange); }
.quality-score.critical strong { color: var(--red); }
.quality-score span { color: var(--faint); font-size: .875rem; }
.quality-pill { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: .875rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.quality-pill.error { background: var(--red-soft); color: var(--red); }
.quality-pill.warning { background: var(--orange-soft); color: var(--orange); }
.quality-pill.info { background: var(--blue-soft); color: var(--blue); }
.row-warning { background: color-mix(in srgb,var(--red),transparent 94%); }
.validation-inline { display: inline-flex; margin-left: 7px; padding: 2px 5px; border-radius: 4px; background: var(--red-soft); color: var(--red); font-size: .875rem; font-weight: 900; text-transform: uppercase; }
.change-board { display: grid; grid-template-columns: repeat(5,minmax(245px,1fr)); gap: 12px; min-width: 1260px; }
.page:has(.change-board) { overflow-x: auto; }
.change-column { min-height: 440px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 12px; background: color-mix(in srgb,var(--surface-2),transparent 18%); }
.change-column > header { display: flex; align-items: center; justify-content: space-between; padding: 5px 3px 12px; color: var(--muted); font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.change-column > header b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--surface-3); color: var(--text); }
.change-card { margin-bottom: 9px; padding: 12px; border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: 9px; background: var(--surface); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.change-card.risk-low { border-left-color: var(--green); }.change-card.risk-high { border-left-color: var(--red); }.change-card.risk-critical { border-left-color: #ff3f6c; box-shadow: 0 0 0 1px rgba(255,63,108,.15); }
.change-card h3 { margin: 7px 0 6px; font-size: .875rem; }.change-card p { min-height: 32px; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.change-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--faint); font-size: .875rem; }
.change-empty { display: grid; place-items: center; min-height: 90px; border: 1px dashed var(--border); border-radius: 8px; color: var(--faint); font-size: .875rem; }
.label-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(285px,1fr)); gap: 12px; }
.asset-label { display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: center; gap: 14px; min-height: 132px; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: #101820; break-inside: avoid; }
.asset-label .qr-code { width: 104px; height: 104px; image-rendering: pixelated; }
.asset-label > div { display: grid; min-width: 0; gap: 4px; }.asset-label .eyebrow { color: #247f78; }.asset-label strong { overflow: hidden; font-size: 22px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }.asset-label b { overflow: hidden; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }.asset-label small { overflow: hidden; color: #5a6874; font-size: .875rem; line-height: 1.35; text-overflow: ellipsis; }
.floor-glance { display: flex; gap: 6px; margin-left: auto; }
.floor-glance span { display: grid; min-width: 55px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--faint); font-size: .875rem; }
.floor-glance b { color: var(--text); font-size: .875rem; }
.floor-canvas { border-radius: 12px; background-color: #0c1822; background-image: linear-gradient(rgba(139,161,178,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(139,161,178,.055) 1px,transparent 1px),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--tenant-accent),transparent 89%),transparent 45%); background-size: var(--floor-grid-size) var(--floor-grid-size),var(--floor-grid-size) var(--floor-grid-size),auto; box-shadow: 0 32px 90px rgba(0,0,0,.42),inset 0 0 70px rgba(0,0,0,.18); }
.floor-ambience { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.floor-ambience span { position: absolute; width: 240px; height: 240px; border: 1px solid color-mix(in srgb,var(--tenant-accent),transparent 80%); border-radius: 50%; opacity: .22; }
.floor-ambience span:nth-child(1) { left: -120px; top: 12%; }
.floor-ambience span:nth-child(2) { right: -90px; top: -80px; width: 190px; height: 190px; }
.floor-ambience span:nth-child(3) { right: 18%; bottom: -150px; width: 300px; height: 300px; }
.floor-background { z-index: 1; opacity: .52; filter: saturate(.75) contrast(1.05); }
.room-shape { border: 1px solid hsla(var(--room-hue),65%,68%,.55); border-radius: 8px; background: linear-gradient(145deg,hsla(var(--room-hue),55%,52%,.15),hsla(var(--room-hue),50%,32%,.06)); box-shadow: inset 0 0 25px hsla(var(--room-hue),60%,55%,.035); transition: background .18s ease,border-color .18s ease,box-shadow .18s ease; }
.room-shape:hover,.room-shape.selected { border-color: hsl(var(--room-hue),80%,68%); background: linear-gradient(145deg,hsla(var(--room-hue),62%,54%,.25),hsla(var(--room-hue),55%,38%,.1)); box-shadow: inset 0 0 35px hsla(var(--room-hue),70%,60%,.08),0 0 0 2px hsla(var(--room-hue),70%,60%,.1); }
.room-shape strong { display: grid; gap: 3px; min-width: 95px; padding: 6px 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: rgba(5,10,16,.78); text-align: left; letter-spacing: 0; backdrop-filter: blur(8px); }
.room-shape strong > span { display: flex; align-items: baseline; gap: 5px; }
.room-shape strong b { color: hsl(var(--room-hue),78%,72%); font-size: 8px; letter-spacing: .08em; }
.room-shape strong em { overflow: hidden; max-width: 120px; color: #e1e8ee; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.room-shape strong small { color: #8194a5; font-size: 6px; font-weight: 600; }
.room-corner { position: absolute; right: 6px; bottom: 6px; width: 14px; height: 14px; border-right: 2px solid hsla(var(--room-hue),70%,70%,.35); border-bottom: 2px solid hsla(var(--room-hue),70%,70%,.35); }
.floor-device { border-color: color-mix(in srgb,var(--blue),transparent 45%); background: linear-gradient(145deg,#163a5a,#0b2034); box-shadow: 0 9px 24px rgba(0,0,0,.36),inset 0 0 15px rgba(71,158,245,.1); }
.floor-device.rack { width: var(--device-width,var(--device-size,51px)); height: var(--device-height,var(--device-size,51px)); border-color: color-mix(in srgb,var(--cyan),transparent 30%); background: linear-gradient(145deg,#17466e,#0a2740); }
.floor-device .device-status { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border: 1px solid #08121b; border-radius: 50%; background: var(--green); }
.floor-device.status-warning .device-status { background: var(--orange); }
.floor-device.status-offline .device-status { background: var(--red); }
.floor-device .device-label { display: grid; gap: 1px; min-width: max-content; padding: 3px 5px; border: 1px solid rgba(255,255,255,.07); }
.floor-device .device-label i { color: var(--cyan); font-size: 6px; font-style: normal; font-weight: 600; }

/* Rack geometry, ports and connection overview */
.editor-body { grid-template-columns: 180px minmax(0,1fr) 340px; }
.rack-workspace { display: grid; place-items: start center; height: 100%; overflow: auto; padding: 65px 50px 100px; }
.rack-stage { position: relative; display: grid; grid-template-columns: 44px 620px 32px; gap: 8px; padding-inline: 420px; }
.rack-units { display: grid; padding-block: 9px; color: var(--faint); text-align: right; }
.rack-units.right { text-align: left; }
.rack-unit-label { display: flex; align-items: center; justify-content: flex-end; gap: 3px; height: var(--rack-u,56px); border-bottom: 1px solid rgba(98,114,134,.16); }
.rack-units.right .rack-unit-label { justify-content: flex-start; }
.rack-unit-label b { color: #8fa0b2; font-size: 9px; font-variant-numeric: tabular-nums; }
.rack-unit-label small { color: #4f6072; font-size: 6px; }
.rack-frame { position: relative; box-sizing: content-box; width: 602px; border: 9px solid #273442; border-radius: 9px; background: #080d13; box-shadow: 0 30px 80px rgba(0,0,0,.48),inset 0 0 30px rgba(0,0,0,.25); }
.rack-frame::before,.rack-frame::after { width: 10px; background: repeating-linear-gradient(to bottom,#73808b 0 2px,#202a33 2px 7px,#111820 7px 14px); opacity: .82; }
.rack-frame::before { left: 5px; }.rack-frame::after { right: 5px; }
.rack-grid { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom,transparent 0 calc(var(--rack-u) / 2 - 1px),rgba(91,119,142,.18) calc(var(--rack-u) / 2 - 1px) calc(var(--rack-u) / 2),transparent calc(var(--rack-u) / 2) calc(var(--rack-u) - 1px),#293846 calc(var(--rack-u) - 1px) var(--rack-u)); pointer-events: none; }
.rack-device { left: 20px; right: 20px; z-index: 4; border-color: #566a7d; border-radius: 4px; background: linear-gradient(180deg,#2b3947,#18222d); box-shadow: inset 0 0 20px rgba(0,0,0,.2); }
.rack-device-head { position: relative; z-index: 4; height: 18px; padding: 0 8px; background: rgba(8,13,19,.56); border-bottom: 1px solid rgba(255,255,255,.08); font-size: 8px; }
.rack-device-head small { font-size: 7px; }
.rack-ports { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(var(--port-columns,24),minmax(0,22px)); justify-content: center; align-content: center; gap: 2px; min-height: calc(100% - 18px); padding: 4px 9px; }
.rack-port { display: grid; place-items: center; width: auto; min-width: 0; height: var(--port-height,18px); padding: 0 1px; border-color: #61778c; border-radius: 3px; background: #0d1720; font-size: clamp(4px,calc(6px * var(--port-scale,1)),6px); font-variant-numeric: tabular-nums; }
.rack-port span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
.rack-port:hover,.rack-port.selected { z-index: 8; scale: 1.18; }
.rack-wire-canvas { z-index: 10; overflow: visible; max-width: none; }
.rack-empty-side { grid-column: 1/-1; color: #718293; font-size: 8px; text-align: center; }
.rack-device.custom-face { background: #101820; }
.rack-svg-surface { position: absolute; z-index: 1; top: 50%; left: 50%; overflow: hidden; translate: -50% -50%; }
.rack-device-svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: .92; pointer-events: none; }
.rack-device.custom-face .rack-device-head { position: absolute; top: 2px; left: 5px; right: 5px; height: 15px; border: 0; border-radius: 3px; background: rgba(3,8,12,.72); }
.rack-ports.positioned { position: absolute; inset: 0; display: block; min-height: 0; padding: 0; }
.rack-port.positioned { position: absolute; width: clamp(10px,calc(22px * var(--port-scale,1)),22px); min-width: 0; height: clamp(8px,calc(16px * var(--port-scale,1)),16px); translate: -50% -50%; box-shadow: 0 0 0 1px rgba(0,0,0,.65); }
.rack-health { display: flex; align-items: center; gap: 5px; padding: 0 5px; color: var(--faint); font-size: .875rem; white-space: nowrap; }
.rack-health .capacity-alert { color: var(--red); }
.rack-health b { color: var(--text); }
.rack-health i { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.rack-overview-head p { margin: 7px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.rack-settings-compact details > summary { color: var(--muted); font-size: .875rem; font-weight: 700; cursor: pointer; }
.rack-settings-compact details > div { padding-top: 12px; }
.rack-port-matrix { padding: 9px; }
.matrix-device { margin-bottom: 9px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.matrix-device-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--border-soft); background: var(--surface-3); text-align: left; cursor: pointer; }
.matrix-device-head span { display: grid; gap: 2px; }
.matrix-device-head b { font-size: .875rem; }.matrix-device-head small { color: var(--muted); font-size: .875rem; }.matrix-device-head em { color: var(--cyan); font-size: .875rem; font-style: normal; }
.matrix-ports { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; }
.matrix-port { display: grid; grid-template-columns: auto 1fr; gap: 4px 7px; min-width: 0; min-height: 58px; padding: 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); text-align: left; cursor: pointer; }
.matrix-port b { color: var(--text); font-size: .875rem; }.matrix-port span { overflow: hidden; color: var(--muted); font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }.matrix-port small { grid-column: 1/-1; overflow: hidden; color: var(--faint); font-size: .875rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.matrix-port.connected { border-color: color-mix(in srgb,var(--blue),transparent 48%); background: var(--blue-soft); }.matrix-port.building { border-color: color-mix(in srgb,var(--orange),transparent 35%); background: var(--orange-soft); }.matrix-port.selected { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan),0 0 0 2px var(--cyan-soft); }
.port-row.detailed { align-items: start; }
.port-row.detailed .filter-input { min-height: 27px; padding: 4px 6px; }
.port-vlan,.port-connections,.port-free { grid-column: 2/-1; }
.port-vlan { margin: 0; }.port-vlan select { min-height: 28px; padding: 4px 6px; }
.port-connections { display: grid; gap: 4px; }
.connection-target { display: grid; grid-template-columns: auto 1fr; gap: 2px 5px; padding: 5px; border: 0; border-radius: 5px; background: var(--surface-3); text-align: left; cursor: pointer; }
.connection-target b { color: var(--blue); font-size: .875rem; }.connection-target span { overflow: hidden; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }.connection-target small { grid-column: 1/-1; color: var(--faint); font-size: .875rem; }
.room-port-row .port-connections { margin-top: 1px; }
.room-port-row .connection-target { border: 1px solid color-mix(in srgb,var(--green),transparent 72%); background: color-mix(in srgb,var(--surface-3),var(--green) 5%); }
.room-port-row .connection-target:hover,.room-port-row .connection-target:focus-visible { border-color: color-mix(in srgb,var(--green),transparent 32%); outline: 0; }
.port-free { color: var(--faint); font-size: .875rem; }

/* SVG device designer */
.device-designer-dialog { width: min(1050px,calc(100vw - 30px)); max-height: min(820px,calc(100vh - 30px)); padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.device-designer-dialog::backdrop { background: rgba(0,5,10,.76); backdrop-filter: blur(5px); }
.device-designer-dialog header,.device-designer-dialog footer { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.device-designer-dialog header h2 { margin: 3px 0 0; font-size: 17px; }
.device-designer-dialog footer { justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); border-bottom: 0; }
.designer-layout { display: grid; grid-template-columns: 270px minmax(0,1fr); min-height: 540px; max-height: calc(100vh - 170px); }
.designer-settings { overflow: auto; padding: 16px; border-right: 1px solid var(--border); background: var(--surface-2); }
.designer-file-button { display: grid; place-items: center; min-height: 38px; margin-bottom: 11px; cursor: pointer; }
.designer-detection-actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 11px 0 8px; }
.designer-detection-actions .button { width: 100%; }
.designer-detection-status { min-height: 54px; margin-bottom: 12px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: .875rem; line-height: 1.45; }
.designer-detection-status.success { border-color: color-mix(in srgb,var(--green),transparent 46%); background: color-mix(in srgb,var(--green),transparent 90%); color: var(--text); }
.designer-detection-status.warning { border-color: color-mix(in srgb,var(--orange),transparent 42%); background: var(--orange-soft); color: var(--text); }
.designer-detection-status.working { border-color: color-mix(in srgb,var(--cyan),transparent 42%); background: var(--cyan-soft); color: var(--text); }
.designer-workspace { display: grid; grid-template-rows: auto minmax(300px,1fr) auto; gap: 12px; min-width: 0; overflow: hidden; padding: 16px; background: #080e14; }
.designer-zoom-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); font-size: .875rem; }
.designer-zoom-toolbar > span { margin-right: 3px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.designer-zoom-toolbar > strong { min-width: 46px; color: var(--text); text-align: center; }
.designer-zoom-toolbar .button { min-width: 32px; padding: 5px 8px; }
.designer-canvas-viewport { min-width: 0; min-height: 300px; overflow: auto; padding: 12px; border: 1px solid color-mix(in srgb,var(--border),transparent 28%); border-radius: 9px; background: #050a0f; }
.designer-canvas { position: relative; width: 100%; aspect-ratio: 6/1; min-height: 180px; overflow: hidden; border: 1px solid #3d5060; border-radius: 8px; background: #101820; box-shadow: 0 25px 55px rgba(0,0,0,.35); cursor: crosshair; transform-origin: top left; }
.designer-canvas.has-svg { min-height: 0; }
.designer-canvas > img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.designer-empty { display: grid; place-content: center; gap: 5px; height: 100%; min-height: 90px; color: var(--faint); text-align: center; }
.designer-empty > span { font-size: 25px; }.designer-empty small { font-size: .875rem; }.designer-empty.compact { min-height: 60px; }
.designer-marker { position: absolute; display: grid; place-items: center; min-width: 5px; min-height: 5px; padding: 0; overflow: visible; touch-action: none; border: 2px solid var(--cyan); border-radius: 3px; background: rgba(5,25,42,.5); color: white; translate: -50% -50%; cursor: grab; box-shadow: 0 0 0 2px rgba(0,120,212,.18); }
.designer-marker:hover,.designer-marker:focus-visible { z-index: 3; box-shadow: 0 0 0 4px rgba(71,158,245,.3); }
.designer-marker.dragging { cursor: grabbing; }
.designer-marker.suggested { border-color: var(--orange); border-style: dashed; background: rgba(88,47,12,.88); box-shadow: 0 0 0 3px var(--orange-soft); }
.designer-marker.reference { z-index: 2; border-color: #fff; border-style: solid; background: #075fa8; box-shadow: 0 0 0 3px var(--blue),0 0 0 6px rgba(71,158,245,.24); }
.designer-marker span { overflow: hidden; max-width: 100%; padding: 0 2px; font-size: 5.5px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.designer-resize-handle { position: absolute; z-index: 4; width: 8px; height: 8px; border: 1px solid #fff; border-radius: 2px; background: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,.55); }
.designer-resize-handle.nw { top: -5px; left: -5px; cursor: nwse-resize; }.designer-resize-handle.ne { top: -5px; right: -5px; cursor: nesw-resize; }.designer-resize-handle.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }.designer-resize-handle.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.designer-draw-preview { position: absolute; z-index: 5; border: 2px dashed #fff; border-radius: 3px; background: rgba(0,120,212,.2); pointer-events: none; }
.designer-port-table { display: grid; gap: 4px; max-height: 190px; overflow: auto; }
.designer-port-row { display: grid; grid-template-columns: 22px minmax(110px,1.15fr) minmax(92px,.85fr) 80px minmax(100px,auto) 30px; align-items: end; gap: 7px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: .875rem; }
.designer-port-row.suggested { border-color: color-mix(in srgb,var(--orange),transparent 38%); background: color-mix(in srgb,var(--surface),var(--orange) 8%); }
.designer-port-row.reference { border-color: color-mix(in srgb,var(--blue),transparent 22%); box-shadow: inset 3px 0 0 var(--blue); }
.designer-port-row > .port-state { align-self: center; background: var(--cyan); border: 0; }
.designer-port-row.suggested > .port-state { background: var(--orange); }
.designer-port-row > .reference-picker { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); background: var(--surface-3); color: var(--faint); font-size: .875rem; cursor: pointer; }
.designer-port-row > .reference-picker:hover,.designer-port-row > .reference-picker:focus-visible { border-color: var(--blue); color: var(--blue); outline: 0; }
.designer-port-row.reference > .reference-picker { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }
.designer-port-row > label { display: grid; min-width: 0; gap: 4px; }
.designer-port-row > label small { overflow: hidden; color: var(--faint); font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.designer-port-row input,.designer-port-row select { width: 100%; min-width: 0; height: 32px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; outline: 0; background: var(--surface-2); color: var(--text); font-size: .875rem; }
.designer-port-row input:focus,.designer-port-row select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-soft); }
.designer-port-coordinates { align-self: center; color: var(--muted); font-size: .875rem; white-space: nowrap; }
.designer-port-row > .mini-icon { align-self: end; width: 30px; height: 32px; }
.template-face.svg-face { position: relative; display: grid; place-items: center; overflow: hidden; padding: 8px; }
.template-svg-surface { position: relative; width: 100%; max-height: 58px; }
.template-face.svg-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.template-port.positioned { position: absolute; width: clamp(4px,calc(8px * var(--port-scale,1)),8px); height: clamp(3px,calc(6px * var(--port-scale,1)),6px); translate: -50% -50%; border-color: var(--cyan); background: rgba(0,120,212,.3); }
.checkbox-field { grid-template-columns: 20px 1fr; align-items: start; }
.checkbox-field input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--cyan); }
.checkbox-field > span,.checkbox-field > small { grid-column: 2; }
.permission-pill { display: inline-flex; padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; font-size: .875rem; font-weight: 800; white-space: nowrap; }
.permission-pill.granted { border-color: color-mix(in srgb,var(--green),transparent 55%); background: color-mix(in srgb,var(--green),transparent 88%); color: var(--green); }
.permission-pill.denied { color: var(--faint); }
.role-explainer { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 12px; border-bottom: 1px solid var(--border); }
.role-explainer span { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--faint); font-size: .875rem; }.role-explainer b { color: var(--text); font-size: .875rem; }

/* Printable network plan */
.print-plan-page { background: #d9dde1; color: #17212a; }
.print-sheet { width: min(1040px,100%); margin: 0 auto; padding: 38px 42px; background: #fff; color: #1b2731; box-shadow: 0 18px 55px rgba(0,0,0,.18); }
.print-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 3px solid #172d3d; }
.print-title > div:first-child { display: flex; align-items: center; gap: 9px; }.print-brand { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 8px; background: #0078d4; color: #fff; font-size: 11px; font-weight: 900; }
.print-title > div:first-child > span:last-child { display: grid; }.print-title small { color: #71808b; font-size: 7px; letter-spacing: .18em; }.print-title h1 { margin: 0; font-size: 25px; text-align: right; }.print-title p { margin: 5px 0 0; color: #65727d; font-size: 9px; text-align: right; }
.print-summary { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin: 20px 0; }.print-summary div { display: grid; gap: 5px; padding: 11px; border: 1px solid #dce2e7; border-radius: 6px; background: #f4f7f8; }.print-summary small { color: #6c7882; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.print-summary b { color: #172d3d; font-size: 17px; }
.print-section { margin-top: 24px; }.print-section h2 { margin: 0 0 9px; padding-bottom: 6px; border-bottom: 1px solid #bdc9d1; color: #173344; font-size: 13px; }
.print-sheet table { width: 100%; border-collapse: collapse; font-size: 8px; }.print-sheet th { padding: 6px; border-bottom: 2px solid #81929e; color: #51616d; text-align: left; text-transform: uppercase; letter-spacing: .05em; }.print-sheet td { padding: 6px; border-bottom: 1px solid #dfe4e8; vertical-align: top; }.print-sheet tbody tr:nth-child(even) { background: #f6f8f9; }
.print-racks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.print-rack { break-inside: avoid; border: 1px solid #bdc9d1; border-radius: 6px; overflow: hidden; }.print-rack > header { display: flex; justify-content: space-between; gap: 10px; padding: 9px; background: #e8eef1; }.print-rack header div { display: grid; gap: 2px; }.print-rack header small { color: #697781; font-size: 7px; }.print-rack header span { color: #167a73; font-size: 8px; font-weight: 800; }
.print-footer { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 9px; border-top: 1px solid #bdc9d1; color: #7b8790; font-size: 7px; }

/* Context help, field tooltips and guided next steps */
.field > span,.multiselect-field legend { display: inline-flex; align-items: center; gap: 5px; }
.field-help { position: relative; display: inline-grid; flex: 0 0 auto; place-items: center; width: 15px; height: 15px; border: 1px solid color-mix(in srgb,var(--blue),transparent 45%); border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: .875rem; font-weight: 900; line-height: 1; cursor: help; }
.field-help-popover { position: fixed; z-index: 2147483647; width: min(270px,calc(100vw - 20px)); padding: 10px 11px; border: 1px solid color-mix(in srgb,var(--blue),transparent 42%); border-radius: 8px; background: var(--surface-3); color: var(--text); box-shadow: 0 18px 55px rgba(0,0,0,.48); font-size: .875rem; font-weight: 500; line-height: 1.45; pointer-events: none; }
.field-help-popover[hidden] { display: none; }
.next-guide-dock { position: fixed; left: 50%; bottom: 0; z-index: 650; width: min(440px,calc(100vw - 24px)); height: 31px; transform: translateX(-50%); }
.next-guide-dock.rack-context { left: 76px; width: min(440px,calc((100vw - 88px)/3)); transform: none; }
.next-guide-tab { position: absolute; left: 50%; bottom: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 176px; height: 31px; padding: 0 16px; border: 1px solid color-mix(in srgb,var(--blue),transparent 42%); border-bottom: 0; border-radius: 11px 11px 0 0; background: color-mix(in srgb,var(--panel),transparent 2%); color: var(--blue); box-shadow: 0 -8px 25px rgba(0,0,0,.2); font-size: .875rem; cursor: pointer; transform: translateX(-50%); backdrop-filter: blur(16px); }
.next-guide-tab span { font-size: .875rem; transition: transform .18s ease; }
.next-guide-tab b { font-size: .875rem; letter-spacing: .03em; }
.next-guide-dock:hover .next-guide-tab,.next-guide-dock:focus-within .next-guide-tab,.next-guide-dock.open .next-guide-tab { border-color: var(--blue); background: var(--blue-soft); }
.next-guide-dock:hover .next-guide-tab span,.next-guide-dock:focus-within .next-guide-tab span,.next-guide-dock.open .next-guide-tab span { transform: rotate(180deg); }
.next-guide { position: absolute; left: 50%; bottom: 30px; width: 100%; max-height: min(520px,calc(100vh - 78px)); overflow: auto; visibility: hidden; border: 1px solid color-mix(in srgb,var(--blue),transparent 45%); border-radius: 13px 13px 8px 8px; background: var(--panel); box-shadow: 0 22px 60px rgba(0,0,0,.38); opacity: 0; transform: translate(-50%,14px) scale(.98); transform-origin: bottom center; pointer-events: none; backdrop-filter: blur(18px); transition: opacity .18s ease,transform .18s ease,visibility 0s linear .18s; }
.next-guide-dock:hover .next-guide,.next-guide-dock:focus-within .next-guide,.next-guide-dock.open .next-guide { visibility: visible; opacity: 1; transform: translate(-50%,0) scale(1); pointer-events: auto; transition-delay: 0s; }
.next-guide header,.rack-topology-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--border-soft); }
.next-guide header span,.rack-topology-card header span { display: grid; gap: 2px; }
.next-guide header small,.rack-topology-card header small { color: var(--faint); font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.next-guide header strong,.rack-topology-card header strong { font-size: .875rem; }
.next-guide header button,.rack-topology-card header button { display: grid; place-items: center; width: 27px; height: 27px; border: 0; border-radius: 7px; background: var(--surface-3); color: var(--muted); cursor: pointer; }
.next-guide > div { display: grid; gap: 6px; padding: 10px; }
.next-guide > div > button { display: grid; grid-template-columns: 1fr auto; gap: 3px 9px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); text-align: left; cursor: pointer; }
.next-guide > div > button:hover { border-color: var(--blue); background: var(--blue-soft); }
.next-guide b { font-size: .875rem; }.next-guide small { grid-column: 1; color: var(--muted); font-size: .875rem; line-height: 1.4; }.next-guide button span { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--blue); font-size: .875rem; }

/* Managed rack cabling and connection topology */
.rack-cable-list { display: grid; gap: 7px; }
.rack-cable-choice { display: grid; grid-template-columns: 5px minmax(0,1fr); gap: 10px; align-items: stretch; min-width: 0; min-height: 58px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); text-align: left; cursor: pointer; }
.rack-cable-choice:hover,.rack-cable-choice.active { border-color: var(--blue); background: var(--blue-soft); }
.rack-cable-choice i { width: 5px; border-radius: 5px; background: var(--cable); box-shadow: 0 0 8px color-mix(in srgb,var(--cable),transparent 25%); }
.rack-cable-choice span { display: grid; align-content: center; min-width: 0; gap: 5px; }.rack-cable-choice b { color: var(--text); font-size: .875rem; line-height: 1.3; }.rack-cable-choice small { overflow: hidden; color: var(--faint); font-size: .875rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.rack-wire-canvas { pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); }
.rack-wire-hit-layer { position: absolute; top: 0; z-index: 3; height: 100%; overflow: visible; pointer-events: none; }
.rack-wire-hit-layer path { fill: none; stroke: transparent; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; cursor: pointer; }
.rack-wire-hit-layer.editing { z-index: 12; }
.rack-wire-hit-layer.editing path { stroke-width: 12; }
.rack-route-empty { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 8px; align-items: center; padding: 9px; border: 1px dashed var(--border); border-radius: 9px; background: var(--surface-2); color: var(--muted); }
.rack-route-empty span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-3); color: var(--blue); font-size: 18px; }
.rack-route-empty p { margin: 0; font-size: .875rem; line-height: 1.45; }
.rack-route-editor { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.rack-route-editor.editing { border-color: color-mix(in srgb,var(--blue),transparent 32%); background: color-mix(in srgb,var(--blue-soft),var(--surface-2) 48%); box-shadow: inset 3px 0 0 var(--blue); }
.rack-route-editor-head { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 8px; align-items: center; }
.rack-route-editor-head > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-3); font-size: .875rem; }
.rack-route-editor-head > div { display: grid; gap: 2px; min-width: 0; }
.rack-route-editor-head strong { color: var(--text); font-size: .875rem; }
.rack-route-editor-head small { overflow: hidden; color: var(--muted); font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.rack-route-editor p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.55; }
.rack-route-style { display: grid; gap: 5px; }
.rack-route-style > small { color: var(--faint); font-size: .875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.rack-route-style .segmented { display: grid; grid-template-columns: 1fr 1fr; }
.rack-route-style button { min-height: 27px; font-size: .875rem; }
.rack-route-style button:disabled { opacity: .42; cursor: not-allowed; }
.rack-route-visibility { padding: 7px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-3); }
.rack-route-points { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--surface-3); }
.rack-route-point-chip { display: inline-grid; grid-template-columns: 23px 16px; height: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.rack-route-point-chip button { display: grid; place-items: center; width: auto; height: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: .875rem; cursor: pointer; }
.rack-route-point-chip button:hover,.rack-route-point-chip button.active { background: var(--cyan-soft); color: var(--cyan); box-shadow: none; }
.rack-route-point-chip .rack-route-point-delete { border-left: 1px solid var(--border-soft); color: var(--orange); font-size: .875rem; }
.rack-route-point-chip .rack-route-point-delete:hover { background: color-mix(in srgb,var(--orange),transparent 86%); color: var(--orange); }
.rack-route-point-chip .rack-route-point-delete:disabled { opacity: .28; cursor: not-allowed; }
.rack-route-remove { justify-content: center; width: 100%; min-height: 28px; color: var(--orange); font-size: .875rem; }
.rack-route-remove:disabled { opacity: .38; color: var(--faint); cursor: not-allowed; }
.rack-route-delete-note { display: block; margin-top: -3px; color: var(--faint); font-size: .875rem; text-align: center; }
.rack-port-side-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; }
.rack-port-side-grid button { min-width: 0; padding: 0 3px; }
.rack-route-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rack-route-actions .button:first-child { grid-column: 1/-1; }
.rack-route-actions .button { justify-content: center; min-height: 28px; padding-inline: 7px; font-size: .875rem; }
.rack-route-actions .button:disabled { opacity: .42; cursor: not-allowed; }
.rack-route-save-note { color: var(--faint); font-size: .875rem; line-height: 1.45; }
.rack-route-mode { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid color-mix(in srgb,var(--blue),transparent 42%); border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .875rem; font-weight: 800; white-space: nowrap; }
.rack-route-handle { fill: transparent; stroke: var(--cyan); stroke-width: 2; pointer-events: all; cursor: grab; touch-action: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)); transition: r .12s ease,filter .12s ease; }
.rack-route-handle.start { fill: transparent; stroke: var(--cyan); }
.rack-route-handle.end { fill: transparent; stroke: var(--orange); }
.rack-route-handle.corner { fill: transparent; stroke: #ff3131; stroke-width: 2; }
.rack-route-handle.fixed { pointer-events: none; cursor: default; stroke-width: 2; opacity: .95; }
.rack-route-handle:hover { r: 6px; filter: drop-shadow(0 0 5px var(--cyan)); }
.rack-route-handle.fixed:hover { r: 4.5px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.62)); }
.rack-route-handle.focused { r: 6.5px; stroke-width: 2; filter: drop-shadow(0 0 6px var(--cyan)); }
.rack-route-handle.dragging,.rack-route-handle:active { cursor: grabbing; }
.rack-route-insert circle { fill: var(--blue); stroke: #fff; stroke-width: 1.2; pointer-events: all; cursor: copy; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.rack-route-insert text { fill: #fff; font-size: 8px; font-weight: 900; text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; }
.rack-route-insert:hover circle { fill: var(--cyan); r: 6px; }
.rack-route-snap-guide { stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .82; pointer-events: none; filter: drop-shadow(0 0 4px var(--cyan)); }
html[data-theme="light"] .rack-route-handle { fill: transparent; filter: drop-shadow(0 1px 2px rgba(24,49,83,.38)); }
html[data-theme="light"] .rack-route-handle.start { fill: transparent; }
html[data-theme="light"] .rack-route-handle.end { fill: transparent; }
.rack-topology-card { position: absolute; top: 58px; right: 13px; z-index: 35; width: min(345px,calc(100% - 26px)); max-height: calc(100% - 116px); overflow: auto; border: 1px solid color-mix(in srgb,var(--active-cable),transparent 42%); border-top: 3px solid var(--active-cable); border-radius: 12px; background: color-mix(in srgb,var(--panel),transparent 3%); box-shadow: 0 18px 55px rgba(0,0,0,.4); backdrop-filter: blur(17px); }
.rack-topology-summary { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); }
.rack-topology-summary span { padding: 4px 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: .875rem; }
.rack-topology-ends { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 10px; }
.rack-topology-endpoint { min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.rack-topology-endpoint > span { color: var(--active-cable); font-size: .875rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.rack-topology-endpoint > b { display: block; overflow: hidden; margin: 4px 0 2px; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }.rack-topology-endpoint > small { color: var(--muted); font-size: .875rem; }
.rack-topology-endpoint dl { display: grid; gap: 4px; margin: 8px 0 0; }.rack-topology-endpoint dl div { display: grid; gap: 1px; padding-top: 4px; border-top: 1px solid var(--border-soft); }.rack-topology-endpoint dt { color: var(--faint); font-size: .875rem; }.rack-topology-endpoint dd { overflow-wrap: anywhere; margin: 0; color: var(--text); font-size: .875rem; line-height: 1.35; }
.rack-topology-path { padding: 0 11px 12px; }.rack-topology-path > small { color: var(--faint); font-size: .875rem; font-weight: 800; text-transform: uppercase; }.rack-topology-path > div { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 8px 0 5px; }.rack-topology-path > div span { display: grid; flex: 0 0 auto; gap: 1px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }.rack-topology-path b { font-size: .875rem; }.rack-topology-path em { color: var(--cyan); font-size: .875rem; font-style: normal; }.rack-topology-path i { color: var(--active-cable); font-style: normal; }.rack-topology-path p { margin: 0; color: var(--muted); font-size: .875rem; }

/* Readable quality cards */
.quality-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 14px; }
.quality-stat-card { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 11px; background: var(--surface-2); }
.quality-stat-card.error { border-top-color: var(--red); }.quality-stat-card.warning { border-top-color: var(--orange); }.quality-stat-card.info { border-top-color: var(--blue); }.quality-stat-card.good { border-top-color: var(--green); }
.quality-stat-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--surface-3); color: var(--text); font-size: 15px; font-weight: 900; }.quality-stat-card > div { display: grid; min-width: 0; gap: 2px; }.quality-stat-card small { color: var(--faint); font-size: .875rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.quality-stat-card strong { font-size: 20px; line-height: 1.1; }.quality-stat-card p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.quality-table td { vertical-align: top; line-height: 1.5; }.quality-title { display: block; min-width: 130px; font-size: .875rem; }.quality-detail { min-width: 260px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.quality-resource-link { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 2px 0 !important; text-align: left; }
.quality-resource-link strong { overflow-wrap: anywhere; }
.quality-resource-link span { flex: 0 0 auto; color: var(--faint); font-size: .875rem; font-weight: 700; }
.quality-resource-link:hover span,.quality-resource-link:focus-visible span { color: var(--cyan); }
.shared-library-badge { display: inline-flex; vertical-align: middle; padding: 4px 7px; border: 1px solid color-mix(in srgb,var(--cyan),transparent 55%); border-radius: 999px; background: var(--cyan-soft); color: var(--cyan); font-size: .875rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.shared-library-note { margin-bottom: 14px; }.library-grid { margin-top: 0; }

@media (max-width: 1280px) {
    .editor-body { grid-template-columns: 170px minmax(0,1fr) 300px; }
    .rack-stage { grid-template-columns: 40px 540px 28px; }
    .rack-frame { width: 522px; }
    .floor-glance { display: none; }
    .quality-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .editor-body { grid-template-columns: 160px minmax(620px,1fr); }
    .designer-layout { grid-template-columns: 220px minmax(520px,1fr); }
    .device-designer-dialog { overflow: auto; }
    .activity-toolbar,.activity-bulk-actions { align-items: stretch; }
    .activity-bulk-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 620px) {
    .auth-card { padding: 20px; }.auth-copy { padding: 25px 0 18px; }.auth-copy h1 { font-size: 25px; }
    .project-list-item { grid-template-columns: 38px 1fr; }.project-list-item > b { display: none; }
    .role-explainer { grid-template-columns: 1fr; }
    .quality-stat-grid,.rack-topology-ends { grid-template-columns: 1fr; }
    .next-guide-dock,.next-guide-dock.rack-context { left: 50%; width: min(390px,calc(100vw - 16px)); transform: translateX(-50%); }
    .next-guide-tab { min-width: 156px; }
    .topology-overview { gap: 7px 10px; }.topology-key { width: 100%; margin-left: 0; padding-top: 4px; }
    .topology-head-actions { width: 100%; justify-content: flex-end; }.dashboard-topology-panel .panel-head { flex-wrap: wrap; }
    .topology-viewport { height: 520px; }.topology-node { width: 158px; grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding: 8px; }.topology-node.rack-center { width: 180px; }.topology-node i { width: 31px; height: 31px; }.topology-pan-hint { width: max-content; max-width: calc(100% - 28px); text-align: center; }
}

/* Resource-scoped document library */
.document-category-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(138px,1fr)); gap: 10px; margin-bottom: 18px; }
.document-category-card { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; grid-template-rows: 30px auto; gap: 5px 8px; min-height: 76px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s ease,background .15s ease,transform .15s ease; }
.document-category-card:hover,.document-category-card:focus-visible { border-color: var(--cyan); outline: none; transform: translateY(-1px); }
.document-category-card.active { border-color: color-mix(in srgb,var(--cyan),transparent 22%); background: var(--cyan-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--cyan),transparent 74%); }
.document-category-card > span { grid-column: 1; grid-row: 1; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--cyan); font-size: 16px; }
.document-category-card small { grid-column: 2; grid-row: 1; align-self: center; color: var(--faint); font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.document-category-card strong { grid-column: 1 / 4; grid-row: 2; font-size: .875rem; line-height: 1.2; }
.document-category-card > b { grid-column: 3; grid-row: 1; align-self: center; min-width: 24px; padding: 4px 7px; border-radius: 999px; background: var(--surface-2); color: var(--faint); font-size: .875rem; text-align: center; }
.document-category-card.active > b { background: var(--cyan); color: #071318; }
.document-category-pill,.document-kind { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface-2); font-size: .875rem; font-weight: 800; white-space: nowrap; }
.document-category-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.document-custom-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; padding: 4px 8px; border: 1px solid color-mix(in srgb,var(--document-category-color),transparent 55%); border-radius: 999px; background: color-mix(in srgb,var(--document-category-color),transparent 88%); color: var(--text); font-size: .875rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.document-custom-pill i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--document-category-color); box-shadow: 0 0 0 3px color-mix(in srgb,var(--document-category-color),transparent 80%); }
.document-custom-empty { color: var(--faint); font-size: .875rem; white-space: nowrap; }
.document-kind { margin-bottom: 3px; color: var(--text); }
.document-table td:last-child { min-width: 172px; }
.document-table td:first-child > small,.document-table td:nth-child(4) > small { display: block; margin-top: 4px; }
.document-file-link { display: block; overflow: hidden; max-width: 280px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.document-file-link:hover,.document-file-link:focus-visible { color: var(--cyan); outline: none; text-decoration: underline; text-underline-offset: 3px; }
.document-hover-preview { position: fixed; z-index: 12000; width: min(420px,calc(100vw - 24px)); overflow: hidden; border: 1px solid color-mix(in srgb,var(--cyan),transparent 42%); border-radius: 13px; background: var(--surface); box-shadow: 0 22px 70px rgba(0,0,0,.52); opacity: 0; transform: translateY(5px) scale(.985); transition: opacity .12s ease,transform .12s ease; }
.document-hover-preview.visible { opacity: 1; transform: translateY(0) scale(1); }
.document-hover-preview > header { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); }
.document-hover-preview > header > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--cyan-soft); color: var(--cyan); font-size: 17px; }
.document-hover-preview > header strong,.document-hover-preview > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-hover-preview > header strong { font-size: .875rem; }
.document-hover-preview > header small { margin-top: 3px; color: var(--faint); font-size: .875rem; }
.document-preview-content { height: 260px; background: #f4f6f8; }
.document-preview-content iframe,.document-preview-content img { display: block; width: 100%; height: 100%; border: 0; }
.document-preview-content img { object-fit: contain; }
.document-preview-fallback { display: grid; place-content: center; justify-items: center; height: 100%; padding: 25px; color: #263847; text-align: center; }
.document-preview-fallback > span { margin-bottom: 9px; font-size: 34px; }
.document-preview-fallback small { max-width: 260px; margin-top: 7px; color: #657789; font-size: .875rem; line-height: 1.45; }
.document-hover-preview > footer { padding: 7px 12px; border-top: 1px solid var(--border-soft); color: var(--faint); font-size: .875rem; text-align: center; }
.document-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.document-custom-filter { display: grid; grid-template-columns: minmax(155px,.35fr) minmax(0,1fr); align-items: center; gap: 14px; margin: -5px 0 18px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.document-custom-filter p { margin: 3px 0 0; color: var(--faint); font-size: .875rem; }
.document-custom-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.document-custom-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 5px 9px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface-2); color: var(--faint); font: inherit; font-size: .875rem; font-weight: 800; cursor: pointer; }
.document-custom-chip:hover,.document-custom-chip:focus-visible,.document-custom-chip.active { border-color: var(--cyan); color: var(--text); outline: none; }
.document-custom-chip.active { background: var(--cyan-soft); }
.document-custom-chip i { width: 8px; height: 8px; border-radius: 50%; }
.document-custom-chip i.neutral { border: 1px solid var(--faint); background: transparent; }
.document-custom-chip b { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: var(--surface); color: var(--faint); font-size: .875rem; text-align: center; }
.document-category-manager { margin-bottom: 18px; padding: 17px; border: 1px solid color-mix(in srgb,var(--cyan),transparent 52%); border-radius: 14px; background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--cyan),var(--surface) 96%)); box-shadow: 0 12px 35px rgba(0,0,0,.12); }
.document-category-manager > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.document-category-manager h2 { margin: 3px 0 4px; font-size: 17px; }
.document-category-manager p { margin: 0; color: var(--faint); font-size: .875rem; }
.document-system-note { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 3px 12px; margin-bottom: 12px; padding: 11px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); font-size: .875rem; }
.document-system-note strong { grid-row: 1 / 3; align-self: center; }
.document-system-note span { color: var(--text); line-height: 1.55; }
.document-system-note small { color: var(--faint); }
.document-category-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 8px; }
.document-category-row { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); }
.document-category-swatch { width: 10px; height: 34px; border-radius: 999px; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor,transparent 85%); }
.document-category-row strong,.document-category-row small { display: block; }
.document-category-row strong { font-size: .875rem; }
.document-category-row small { margin-top: 3px; color: var(--faint); font-size: .875rem; }
.document-category-row .document-actions { justify-content: flex-end; }
.document-category-empty { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--border); border-radius: 10px; color: var(--faint); font-size: .875rem; text-align: center; }
.resource-documents { margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.inspector .resource-documents { margin: 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.resource-document-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.resource-document-head > span { min-width: 0; }
.resource-document-head strong,.resource-document-head small { display: block; }
.resource-document-head strong { font-size: .875rem; }
.resource-document-head small { overflow: hidden; margin-top: 2px; color: var(--faint); font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.resource-document-head > b,.resource-documents.compact > summary b { min-width: 24px; padding: 4px 7px; border-radius: 999px; background: var(--cyan-soft); color: var(--cyan); font-size: .875rem; text-align: center; }
.resource-document-list { display: grid; gap: 7px; }
.resource-document-item { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2); }
.resource-document-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--cyan-soft); color: var(--cyan); font-size: 15px; }
.resource-document-item > span:nth-child(2) { min-width: 0; }
.resource-document-item > span:nth-child(2) > a { display: block; overflow: hidden; max-width: 100%; color: var(--text); font-size: .875rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.resource-document-item > span:nth-child(2) > a:hover { color: var(--cyan); }
.resource-document-item small { display: block; overflow: hidden; margin-top: 2px; color: var(--faint); font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.resource-document-category { display: block; margin-top: 5px; }
.resource-document-item .document-actions { justify-content: flex-end; }
.resource-document-item .button.small { min-height: 28px; padding: 4px 7px; font-size: .875rem; }
.resource-document-empty { padding: 14px 10px; border: 1px dashed var(--border); border-radius: 10px; color: var(--faint); font-size: .875rem; text-align: center; }
.resource-document-upload { width: 100%; margin-top: 9px; }
.resource-documents.compact { margin-top: 10px; padding: 0; background: var(--surface-2); }
.resource-documents.compact > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; color: var(--faint); font-size: .875rem; font-weight: 800; cursor: pointer; }
.resource-documents.compact[open] > summary { border-bottom: 1px solid var(--border-soft); color: var(--text); }
.resource-documents.compact .resource-document-head { display: none; }
.resource-documents.compact .resource-document-list { padding: 8px; }
.resource-documents.compact .resource-document-upload { width: calc(100% - 16px); margin: 0 8px 8px; }

@media (max-width: 900px) {
    .document-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .document-custom-filter { grid-template-columns: 1fr; }
    .document-custom-chips { justify-content: flex-start; }
    .document-category-manager > header { align-items: stretch; flex-direction: column; }
    .document-system-note { grid-template-columns: 1fr; }
    .document-system-note strong { grid-row: auto; }
    .resource-document-item { grid-template-columns: 32px minmax(0,1fr); }
    .resource-document-item .document-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Accessible peek sidebars and balanced readability */
body { font-size: 15px; }
.page-header p { font-size: .875rem; }
.eyebrow { font-size: .875rem; }
.button { min-height: 39px; font-size: .875rem; }
.button.small { min-height: 33px; font-size: .875rem; }
.nav-item { min-height: 42px; font-size: .875rem; }
.nav-item span { font-size: 17px; }
.nav-label { font-size: .875rem; }
.panel-head h2,.panel-head h3 { font-size: 15px; }
.panel-head p,.stat-foot { font-size: .875rem; }
.topology-node strong,.alert-item strong,.activity-item strong,.quick-action strong { font-size: .875rem; }
.topology-node small,.alert-item small,.activity-item small,.quick-action small { font-size: .875rem; }
.editor-title h1 { font-size: 16px; }
.editor-tabs button,.segmented button { min-height: 31px; font-size: .875rem; }
.tool-section h3,.inspector-section > h3 { font-size: .875rem; }
.editor-tool { min-height: 64px; font-size: .875rem; }
.editor-tool span { font-size: 19px; }
.floor-snap-head strong { font-size: .875rem; }
.floor-snap-head small { font-size: .875rem; }
.floor-snap-options button { min-height: 37px; font-size: .875rem; }
.floor-snap-picker p { font-size: .875rem; }
.floor-snap-indicator { font-size: .875rem; }
.palette-item { min-height: 47px; }
.palette-item strong { font-size: .875rem; }
.palette-item small { font-size: .875rem; }
.palette-symbol { width: 32px; height: 32px; font-size: 16px; }
.inspector-head h2 { font-size: 17px; }
.field label,label.field > span { font-size: .875rem; }
.field input,.field select,.field textarea,.filter-input { min-height: 38px; font-size: .875rem; }
.port-row { min-height: 39px; font-size: .875rem; }
.mini-icon { width: 29px; height: 29px; font-size: .875rem; }
.data-table { font-size: .875rem; }
.data-table th { padding: 13px 14px; font-size: .875rem; }
.data-table td { padding: 13px 14px; }
.tab-bar button { min-height: 35px; font-size: .875rem; }
.workspace-toolbar button { min-width: 32px; height: 32px; font-size: .875rem; }
.layout-lock-state { font-size: .875rem; }
.bottom-drawer summary { font-size: .875rem; }
.room-shape strong { min-width: 112px; padding: 7px 9px; }
.room-shape strong b,.room-shape strong em { font-size: 10px; }
.room-shape strong small { font-size: 8px; }
.floor-device { width: var(--device-width,var(--device-size,44px)); height: var(--device-height,var(--device-size,44px)); }
.floor-device.rack { width: var(--device-width,var(--device-size,58px)); height: var(--device-height,var(--device-size,58px)); }
.floor-device .device-icon { font-size: var(--device-icon-size,18px); }
.floor-device .device-label { max-width: var(--device-label-width,130px); padding: 3px; font-size: var(--device-label-size,10px); }
.floor-device .device-label i { font-size: var(--device-label-detail-size,8px); }
.floor-device.adaptive-size .device-status { top: var(--device-status-offset,4px); right: var(--device-status-offset,4px); width: var(--device-status-size,6px); height: var(--device-status-size,6px); }
.floor-device.adaptive-size.compact::before { position: absolute; inset: -6px; content: ''; }
.floor-device.adaptive-size.compact .device-label i { display: none; }
.floor-device.adaptive-size.micro .device-label { min-width: 0; padding: 2px 3px; border-radius: 3px; }
.room-resize-handle,.room-vertex-handle { width: 15px; height: 15px; }
.field-help { width: 18px; height: 18px; font-size: .875rem; }
.field-help-popover { font-size: .875rem; }
.next-guide header small,.rack-topology-card header small { font-size: .875rem; }
.next-guide header strong,.rack-topology-card header strong { font-size: .875rem; }
.next-guide b { font-size: .875rem; }
.next-guide small { font-size: .875rem; }
.quality-stat-card small { font-size: .875rem; }
.quality-stat-card p,.quality-title,.quality-detail { font-size: .875rem; }
.quality-pill { font-size: .875rem; }
.sidebar-pin-button,.panel-pin-button { display: none; }

/* Precisely aligned forms in tool and inspector sidebars */
:is(.tool-panel,.inspector) .field {
    width: 100%;
    min-width: 0;
    gap: 6px;
    margin-bottom: 12px;
}

:is(.tool-panel,.inspector) .field > span {
    width: 100%;
    min-height: 20px;
    line-height: 18px;
}

:is(.tool-panel,.inspector) .field-row {
    width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: stretch;
    gap: 10px;
    margin: 0 0 12px;
}

:is(.tool-panel,.inspector) .field-row > .field {
    grid-template-rows: minmax(20px,1fr) auto;
    align-self: stretch;
    margin-bottom: 0;
}

:is(.tool-panel,.inspector) .field input,
:is(.tool-panel,.inspector) .field select {
    height: 40px;
    min-height: 40px;
    margin: 0;
}

:is(.tool-panel,.inspector) .field textarea {
    min-height: 78px;
    margin: 0;
}

:is(.tool-panel,.inspector) .field-help {
    align-self: center;
}

.inspector .port-row.detailed {
    grid-template-columns: 8px minmax(0,1fr) auto;
    row-gap: 8px;
    padding: 9px;
}

.inspector .port-row.detailed > span:nth-child(2),
.inspector .port-vlan,
.inspector .port-connections,
.inspector .port-free {
    min-width: 0;
}

.inspector .port-row.detailed .filter-input,
.inspector .port-row.detailed .mini-icon,
.inspector .port-row.detailed .port-vlan select {
    height: 36px;
    min-height: 36px;
}

.inspector .port-row.detailed .mini-icon {
    width: 36px;
}

.inspector .port-row.detailed .port-actions {
    align-items: stretch;
}

.inspector .port-row.detailed .port-state {
    margin-top: 14px;
}

.inspector .port-row.detailed .port-vlan {
    gap: 6px;
}

@media (max-width: 900px) {
    :is(.tool-panel,.inspector) .field-row {
        grid-template-columns: 1fr;
    }

    :is(.tool-panel,.inspector) .field-row > .field {
        grid-template-rows: auto auto;
    }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    :root { --nav-rail: 64px; --nav-expanded: 262px; --tool-rail: 44px; --tool-expanded: 268px; --inspector-rail: 44px; --inspector-expanded: 370px; }
    .app-shell { grid-template-columns: var(--nav-rail) minmax(0,1fr); transition: grid-template-columns .22s ease; }
    .app-shell.nav-pinned { grid-template-columns: var(--nav-expanded) minmax(0,1fr); }
    .sidebar { width: var(--nav-rail); overflow: hidden; box-shadow: 7px 0 24px rgba(0,0,0,.14); transition: width .22s ease,box-shadow .22s ease; }
    .sidebar:hover,.sidebar:focus-within { width: var(--nav-expanded); box-shadow: 18px 0 48px rgba(0,0,0,.34); }
    .app-shell.nav-pinned .sidebar { width: var(--nav-expanded); box-shadow: 7px 0 24px rgba(0,0,0,.14); }
    .sidebar::after { content: '›'; position: absolute; top: 50%; right: 4px; z-index: 90; display: grid; place-items: center; width: 16px; height: 44px; border: 1px solid color-mix(in srgb,var(--cyan),transparent 58%); border-radius: 8px; background: var(--surface-2); color: var(--cyan); font-size: 15px; transform: translateY(-50%); pointer-events: none; }
    .sidebar:hover::after,.sidebar:focus-within::after { content: '‹'; opacity: .55; }
    .app-shell.nav-pinned .sidebar::after { display: none; }
    .sidebar .brand,.sidebar .main-nav,.sidebar .sidebar-footer { width: var(--nav-expanded); }
    .sidebar .tenant-switcher { width: calc(var(--nav-expanded) - 24px); }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .brand-copy,
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .nav-label,
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .health-line span:last-child,
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .profile-chip span:last-child,
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .app-legal-notice { display: none; }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .brand { padding-inline: 15px; }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .tenant-switcher { grid-template-columns: 32px; width: 44px; margin-inline: 10px; padding: 5px; }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .tenant-switcher > span:nth-child(2),
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .tenant-switcher .chevron { display: none; }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .main-nav { padding-inline: 10px; }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .nav-item { gap: 18px; color: transparent; }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .nav-item span { color: var(--faint); }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .nav-item.active span { color: var(--cyan); }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .sidebar-footer { padding: 9px 10px; }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .health-line { padding-inline: 17px; }
    .app-shell:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .profile-chip { grid-template-columns: 32px; width: 44px; padding: 6px; }
    .sidebar-pin-button,.panel-pin-button { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--faint); font: inherit; cursor: pointer; transition: border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease,opacity .12s ease; }
    .sidebar-pin-button:hover,.sidebar-pin-button:focus-visible,.panel-pin-button:hover,.panel-pin-button:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none; transform: translateY(-1px); }
    .sidebar-pin-button.active,.panel-pin-button.active { border-color: color-mix(in srgb,var(--cyan),transparent 30%); background: var(--cyan-soft); color: var(--cyan); }
    .sidebar-pin-button span,.panel-pin-button span { font-size: .875rem; filter: grayscale(1); }
    .sidebar-pin-button.active span,.panel-pin-button.active span { filter: none; }
    .sidebar-pin-button { flex: 0 0 auto; margin-left: auto; }

    .editor-body { position: relative; grid-template-columns: var(--tool-rail) minmax(0,1fr) var(--inspector-rail); overflow: hidden; }
    .editor-body.tool-pinned { grid-template-columns: var(--tool-expanded) minmax(0,1fr) var(--inspector-rail); }
    .editor-body.inspector-pinned { grid-template-columns: var(--tool-rail) minmax(0,1fr) var(--inspector-expanded); }
    .editor-body.tool-pinned.inspector-pinned { grid-template-columns: var(--tool-expanded) minmax(0,1fr) var(--inspector-expanded); }
    .tool-panel,.inspector { position: relative; z-index: 45; width: var(--tool-rail); overflow-x: hidden; overflow-y: auto; box-shadow: none; transition: width .22s ease,box-shadow .22s ease; }
    .tool-panel { justify-self: start; }
    .inspector { justify-self: end; width: var(--inspector-rail); }
    .tool-panel:hover,.tool-panel:focus-within { width: var(--tool-expanded); box-shadow: 16px 0 42px rgba(0,0,0,.34); }
    .inspector:hover,.inspector:focus-within { width: var(--inspector-expanded); box-shadow: -16px 0 42px rgba(0,0,0,.34); }
    .editor-body.tool-pinned .tool-panel { width: var(--tool-expanded); box-shadow: none; }
    .editor-body.inspector-pinned .inspector { width: var(--inspector-expanded); box-shadow: none; }
    .tool-panel > * { width: var(--tool-expanded); }
    .inspector > * { width: var(--inspector-expanded); }
    .tool-panel > *,.inspector > * { transition: opacity .12s ease; }
    .editor-body:not(.tool-pinned) .tool-panel:not(:hover):not(:focus-within) > *,
    .editor-body:not(.inspector-pinned) .inspector:not(:hover):not(:focus-within) > * { opacity: 0; pointer-events: none; }
    .tool-panel::after,.inspector::after { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg,var(--surface),var(--surface-2)); color: var(--cyan); font-size: .875rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; writing-mode: vertical-rl; pointer-events: none; transition: opacity .12s ease; }
    .tool-panel::after { content: '›  Werkzeuge'; border-right: 1px solid var(--border-soft); }
    .inspector::after { content: 'Details  ‹'; border-left: 1px solid var(--border-soft); }
    .tool-panel:hover::after,.tool-panel:focus-within::after,.inspector:hover::after,.inspector:focus-within::after,.editor-body.tool-pinned .tool-panel::after,.editor-body.inspector-pinned .inspector::after { opacity: 0; }
    .tool-panel > .panel-pin-button,.inspector > .panel-pin-button { position: absolute; top: 9px; right: 9px; z-index: 8; width: 31px; }
    .tool-panel > .panel-pin-button + *,.inspector > .panel-pin-button + * { padding-top: 50px; }
    .workspace { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,.tool-panel,.inspector,.tool-panel > *,.inspector > * { transition: none !important; }
}

/* Refined Fluent light theme */
html[data-theme="light"] body {
    background: #eaf2f8;
}

html[data-theme="light"] .app-content {
    background:
        radial-gradient(circle at 12% -8%, rgba(0,120,212,.095), transparent 31%),
        linear-gradient(180deg,#edf5fb 0%,#f4f8fb 52%,#eef4f8 100%);
}

html[data-theme="light"] .sidebar {
    border-right-color: #aecbe0;
    background: linear-gradient(180deg,#fbfdff 0%,#f4f9fc 100%);
    box-shadow: 8px 0 28px rgba(35,88,126,.09);
}

html[data-theme="light"] .brand,
html[data-theme="light"] .sidebar-footer {
    border-color: #c4d9e7;
    background: rgba(255,255,255,.6);
}

html[data-theme="light"] .tenant-switcher {
    border-color: #adcae0;
    background: #fff;
    box-shadow: 0 3px 12px rgba(30,78,113,.07);
}

html[data-theme="light"] .tenant-switcher:hover {
    border-color: #5b9fd0;
    box-shadow: 0 5px 16px rgba(0,103,184,.12);
}

html[data-theme="light"] .nav-item {
    border: 1px solid transparent;
}

html[data-theme="light"] .nav-item:hover {
    border-color: #c4dceb;
    background: #eef6fb;
}

html[data-theme="light"] .nav-item.active {
    border-color: #a6cee9;
    background: linear-gradient(90deg,rgba(0,120,212,.16),rgba(0,120,212,.07));
    box-shadow: inset 3px 0 0 #0078d4,0 2px 7px rgba(0,103,184,.07);
}

html[data-theme="light"] .topbar,
html[data-theme="light"] .editor-head {
    border-bottom-color: #b8d2e4;
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 18px rgba(30,78,113,.075);
}

html[data-theme="light"] :is(.global-search,.icon-button,.save-state,.sidebar-pin-button,.panel-pin-button) {
    border-color: #a9c8de;
    background: #fff;
    box-shadow: 0 2px 7px rgba(28,73,107,.07);
}

html[data-theme="light"] :is(.icon-button,.save-state,.sidebar-pin-button,.panel-pin-button):hover {
    border-color: #5e9fce;
    background: #f1f8fd;
}

html[data-theme="light"] .button:not(.primary):not(.ghost) {
    border-color: #a9c8de;
    background: linear-gradient(180deg,#fff,#f4f9fc);
    box-shadow: 0 2px 7px rgba(28,73,107,.07);
}

html[data-theme="light"] .button:not(.primary):not(.ghost):hover {
    border-color: #5e9fce;
    background: #eef7fd;
    box-shadow: 0 5px 14px rgba(0,103,184,.11);
}

html[data-theme="light"] :is(.stat-card,.panel,.location-card,.network-card,.template-card,.quality-stat-card,.document-category-card,.document-custom-filter,.document-category-manager,.resource-documents) {
    border-color: #bfd6e6;
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 2px rgba(20,55,80,.07),0 10px 27px rgba(29,75,108,.075);
}

html[data-theme="light"] .stat-card {
    border-color: #b3d1e5;
}

html[data-theme="light"] .stat-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--accent,var(--cyan));
    content: '';
    opacity: .78;
}

html[data-theme="light"] .panel-head {
    border-bottom-color: #c4dae8;
    background: linear-gradient(180deg,#fff,#f5f9fc);
}

html[data-theme="light"] .quick-action,
html[data-theme="light"] .network-stats div,
html[data-theme="light"] .resource-document-item,
html[data-theme="light"] .document-category-row,
html[data-theme="light"] .dialog-note,
html[data-theme="light"] .port-row,
html[data-theme="light"] .palette-item,
html[data-theme="light"] .editor-tool {
    border-color: #bfd6e6;
    background: #f8fbfd;
    box-shadow: 0 1px 3px rgba(29,75,108,.045);
}

html[data-theme="light"] :is(.quick-action,.location-card,.network-card,.template-card,.document-category-card):hover {
    border-color: #6fa9d1;
    box-shadow: 0 8px 22px rgba(0,103,184,.11);
}

html[data-theme="light"] .topology {
    background-color: #fbfdff;
    background-image: radial-gradient(#a9c8de .8px,transparent .8px);
}

html[data-theme="light"] .topology::before {
    background: radial-gradient(circle at center,transparent 0,rgba(255,255,255,.88) 78%);
}

html[data-theme="light"] .topology-node {
    border-color: #a9c8de;
    background: #fff;
    box-shadow: 0 8px 20px rgba(28,73,107,.13);
}

html[data-theme="light"] :is(.field input,.field select,.field textarea,.filter-input) {
    border-color: #9fbed5;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(25,65,95,.045),0 1px 2px rgba(25,65,95,.035);
}

html[data-theme="light"] :is(.field input,.field select,.field textarea,.filter-input):hover {
    border-color: #6f9fbe;
}

html[data-theme="light"] :is(.field input,.field select,.field textarea,.filter-input):focus {
    border-color: #0078d4;
    box-shadow: 0 0 0 3px rgba(0,120,212,.13);
}

html[data-theme="light"] :is(.tab-bar,.editor-tabs,.segmented) {
    border-color: #adc9dc;
    background: #edf5fa;
    box-shadow: inset 0 1px 2px rgba(31,74,105,.055);
}

html[data-theme="light"] :is(.tab-bar button,.editor-tabs button,.segmented button).active {
    background: #fff;
    color: #005a9e;
    box-shadow: 0 2px 8px rgba(30,78,113,.14);
}

html[data-theme="light"] .data-table-wrap {
    border-color: #b6d0e2;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20,55,80,.06),0 10px 26px rgba(29,75,108,.07);
}

html[data-theme="light"] .data-table th {
    border-bottom-color: #a9c7dc;
    background: #e9f2f8;
    color: #4c6b82;
}

html[data-theme="light"] .data-table td {
    border-bottom-color: #d6e4ed;
}

html[data-theme="light"] .data-table tbody tr:nth-child(even) td {
    background: #fbfdfe;
}

html[data-theme="light"] .data-table tbody tr:hover td {
    background: #eaf5fc;
    color: #102a43;
}

html[data-theme="light"] :is(.tool-panel,.inspector) {
    border-color: #b9d2e3;
    background: linear-gradient(180deg,#fff 0%,#f7fafc 100%);
}

html[data-theme="light"] .workspace {
    background: #d5e2ea;
}

html[data-theme="light"] .rack-workspace {
    background: linear-gradient(180deg,#eef5f9 0%,#dce9f1 100%);
}

html[data-theme="light"] .rack-frame {
    border-color: #8ba7ba;
    background: #edf4f8;
    box-shadow: 0 24px 58px rgba(30,70,98,.18),inset 0 0 26px rgba(75,119,148,.08);
}

html[data-theme="light"] .rack-frame::before,
html[data-theme="light"] .rack-frame::after {
    background: repeating-linear-gradient(to bottom,#c8d8e3 0 2px,#8fa9bb 2px 7px,#e8f0f5 7px 14px);
    opacity: 1;
}

html[data-theme="light"] .rack-grid {
    background: repeating-linear-gradient(to bottom,transparent 0 calc(var(--rack-u) / 2 - 1px),rgba(105,145,172,.16) calc(var(--rack-u) / 2 - 1px) calc(var(--rack-u) / 2),transparent calc(var(--rack-u) / 2) calc(var(--rack-u) - 1px),#a9c2d3 calc(var(--rack-u) - 1px) var(--rack-u));
}

html[data-theme="light"] .rack-unit-label { border-bottom-color: rgba(93,133,160,.28); }
html[data-theme="light"] .rack-unit-label b { color: #385d76; }
html[data-theme="light"] .rack-unit-label small { color: #6b879a; }

html[data-theme="light"] .rack-device {
    border-color: #87a8bf;
    background: linear-gradient(180deg,#ffffff,#dfeaf1);
    color: #17364e;
    box-shadow: inset 0 0 16px rgba(52,98,129,.1),0 3px 8px rgba(40,83,111,.1);
}

html[data-theme="light"] .rack-device-head {
    border-bottom-color: rgba(80,121,148,.24);
    background: rgba(240,247,251,.9);
    color: #17364e;
}

html[data-theme="light"] .rack-device-head small { color: #54738a; }
html[data-theme="light"] .rack-port { border-color: #7da4bf; background: #f9fcfe; color: #17364e; }
html[data-theme="light"] .rack-port.connected { background: #dcefff; color: #005a9e; }
html[data-theme="light"] .rack-port.building { border-color: #b85c00; background: #f59a45; color: #341700; box-shadow: 0 0 0 1px rgba(184,92,0,.22); }
html[data-theme="light"] .rack-device.custom-face { background: #e3edf3; }
html[data-theme="light"] .rack-device.custom-face .rack-device-head { background: rgba(255,255,255,.86); }
html[data-theme="light"] .rack-wire-canvas { filter: drop-shadow(0 1px 1px rgba(44,76,98,.32)); }

html[data-theme="light"] :is(.workspace-toolbar,.workspace-status,.map-legend) {
    border-color: #9fbfd6;
    background: rgba(255,255,255,.95);
    box-shadow: 0 9px 24px rgba(28,73,107,.15);
}

html[data-theme="light"] .room-shape strong {
    border-color: rgba(92,139,171,.34);
    background: rgba(255,255,255,.92);
    box-shadow: 0 5px 13px rgba(24,61,88,.13);
}

html[data-theme="light"] .room-shape strong b { color: hsl(var(--room-hue),68%,35%); }
html[data-theme="light"] .room-shape strong em { color: #17364e; }
html[data-theme="light"] .room-shape strong small { color: #5b778d; }

/* Light room planner components */
html[data-theme="light"] .floor-canvas {
    border-color: #8fb2ca;
    background-color: #f8fbfd;
    background-image: linear-gradient(rgba(77,126,159,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(77,126,159,.11) 1px,transparent 1px);
    box-shadow: 0 24px 55px rgba(34,79,110,.14);
}

html[data-theme="light"] .floor-canvas.layout-locked::after {
    border-color: #a6c3d6;
    background: rgba(255,255,255,.92);
    color: #496b83;
    box-shadow: 0 4px 12px rgba(31,77,109,.1);
}

html[data-theme="light"] .floor-resize-handle {
    border-color: rgba(186,87,0,.5);
    background-color: rgba(255,255,255,.96);
    box-shadow: 0 5px 15px rgba(39,79,106,.16);
}

html[data-theme="light"] .floor-resize-handle:hover { background-color: #fff3e7; }

html[data-theme="light"] .floor-device {
    border-color: #77a9cd;
    background: linear-gradient(145deg,#ffffff,#e9f4fb);
    color: #0067b8;
    box-shadow: 0 7px 18px rgba(28,73,107,.17),inset 0 0 0 1px rgba(255,255,255,.75);
}

html[data-theme="light"] .floor-device.rack {
    border-color: #2786c5;
    background: linear-gradient(145deg,#eaf6fd,#d5ebf8);
    color: #005a9e;
    box-shadow: 0 8px 20px rgba(0,103,184,.18),inset 0 0 0 1px rgba(255,255,255,.8);
}

html[data-theme="light"] .floor-device.outlet {
    border-color: #5b9dc9;
    background: linear-gradient(145deg,#fff,#edf6fb);
}

html[data-theme="light"] .floor-device:hover,
html[data-theme="light"] .floor-device.selected {
    border-color: #0067b8;
    background: linear-gradient(145deg,#fff,#e4f2fb);
    box-shadow: 0 0 0 4px rgba(0,120,212,.13),0 9px 22px rgba(28,73,107,.2);
}

html[data-theme="light"] .floor-device .device-icon {
    color: #0067b8;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.9));
}

html[data-theme="light"] .floor-device .device-status {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(25,66,94,.18),0 1px 4px rgba(25,66,94,.2);
}

html[data-theme="light"] .floor-device .device-label {
    border-color: #b5cedf;
    background: rgba(255,255,255,.96);
    color: #17364e;
    box-shadow: 0 4px 12px rgba(24,61,88,.14);
}

html[data-theme="light"] .floor-device .device-label i { color: #0067b8; }

html[data-theme="light"] .room-svg-face {
    border-color: #91b5ce;
    background: #fff;
    box-shadow: inset 0 0 12px rgba(35,80,111,.08);
}

html[data-theme="light"] .floor-inline-port {
    border-color: #4f86ad;
    background: rgba(255,255,255,.94);
    color: #17364e;
    box-shadow: 0 0 0 1px rgba(255,255,255,.8),0 1px 3px rgba(28,73,107,.18);
}

html[data-theme="light"] .floor-inline-port:hover,
html[data-theme="light"] .floor-inline-port:focus-visible,
html[data-theme="light"] .floor-inline-port.connected {
    border-color: #005a9e;
    background: #d9edfa;
    color: #004578;
}

html[data-theme="light"] .floor-inline-port.building {
    border-color: #b85c00;
    background: #ffead6;
    color: #7a3d00;
}

html[data-theme="light"] :is(.app-dialog,.command-dialog,.device-designer-dialog) {
    border-color: #9ebed5;
    background: #fff;
    box-shadow: 0 24px 70px rgba(20,58,86,.22);
}

html[data-theme="light"] :is(.app-dialog,.command-dialog,.device-designer-dialog)::backdrop {
    background: rgba(22,50,70,.42);
}

html[data-theme="light"] :is(.app-dialog,.device-designer-dialog) header,
html[data-theme="light"] :is(.app-dialog,.device-designer-dialog) footer,
html[data-theme="light"] .command-head {
    background: #f5f9fc;
}

/* Complete light treatment for the SVG component designer */
html[data-theme="light"] .device-designer-dialog header {
    border-bottom-color: #b8d1e2;
    background: linear-gradient(180deg,#fff,#f2f8fc);
}

html[data-theme="light"] .device-designer-dialog footer {
    border-top-color: #b8d1e2;
    background: #f5f9fc;
}

html[data-theme="light"] .designer-settings {
    border-right-color: #b8d1e2;
    background: linear-gradient(180deg,#f8fbfd,#eef5fa);
}

html[data-theme="light"] .designer-workspace {
    background: linear-gradient(145deg,#edf5fa,#dceaf3);
}

html[data-theme="light"] .designer-zoom-toolbar {
    padding: 6px 8px;
    border: 1px solid #b6cfdf;
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    color: #496b83;
    box-shadow: 0 3px 10px rgba(31,77,109,.08);
}

html[data-theme="light"] .designer-zoom-toolbar > strong { color: #17364e; }

html[data-theme="light"] .designer-canvas-viewport {
    border-color: #92b5cd;
    background-color: #e6f0f6;
    background-image: linear-gradient(45deg,rgba(91,137,168,.09) 25%,transparent 25%),linear-gradient(-45deg,rgba(91,137,168,.09) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(91,137,168,.09) 75%),linear-gradient(-45deg,transparent 75%,rgba(91,137,168,.09) 75%);
    background-position: 0 0,0 8px,8px -8px,-8px 0;
    background-size: 16px 16px;
    box-shadow: inset 0 1px 4px rgba(34,79,110,.09);
}

html[data-theme="light"] .designer-canvas {
    border-color: #739fbd;
    background: #fff;
    box-shadow: 0 18px 38px rgba(32,75,104,.18);
}

html[data-theme="light"] .designer-empty { color: #5b778d; }
html[data-theme="light"] .designer-empty > span { color: #0078d4; }

html[data-theme="light"] .designer-marker {
    border-color: #0067b8;
    background: rgba(220,239,251,.78);
    color: #003e6b;
    box-shadow: 0 0 0 2px rgba(0,120,212,.15),0 2px 6px rgba(25,66,94,.16);
}

html[data-theme="light"] .designer-marker:hover,
html[data-theme="light"] .designer-marker:focus-visible {
    background: rgba(207,234,250,.94);
    box-shadow: 0 0 0 4px rgba(0,120,212,.2),0 3px 9px rgba(25,66,94,.18);
}

html[data-theme="light"] .designer-marker.suggested {
    border-color: #b85c00;
    background: rgba(255,231,207,.9);
    color: #6f3800;
}

html[data-theme="light"] .designer-marker.reference {
    border-color: #004578;
    background: #0078d4;
    color: #fff;
    box-shadow: 0 0 0 3px #d7ecfa,0 0 0 6px rgba(0,120,212,.3);
}

html[data-theme="light"] .designer-resize-handle {
    border-color: #fff;
    background: #005a9e;
    box-shadow: 0 0 0 1px #004578,0 2px 5px rgba(25,66,94,.3);
}

html[data-theme="light"] .designer-draw-preview {
    border-color: #0067b8;
    background: rgba(0,120,212,.12);
}

html[data-theme="light"] .designer-detection-status {
    border-color: #b3ccdd;
    background: #fff;
    box-shadow: 0 2px 7px rgba(28,73,107,.06);
}

html[data-theme="light"] .designer-port-row {
    border-color: #b6cfdf;
    background: #fff;
    box-shadow: 0 2px 6px rgba(28,73,107,.055);
}

html[data-theme="light"] .designer-port-row.suggested { background: #fff8f1; }
html[data-theme="light"] .designer-port-row.reference { background: #f1f8fd; }

html[data-theme="light"] .designer-port-row input,
html[data-theme="light"] .designer-port-row select {
    border-color: #a9c7dc;
    background: #f8fbfd;
    color: #17364e;
}

html[data-theme="light"] .field-help-popover,
html[data-theme="light"] .document-hover-preview,
html[data-theme="light"] .toast,
html[data-theme="light"] .tenant-menu {
    border-color: #9ebed5;
    background: #fff;
    box-shadow: 0 20px 55px rgba(20,58,86,.2);
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    html[data-theme="light"] .sidebar:hover,
    html[data-theme="light"] .sidebar:focus-within {
        box-shadow: 18px 0 46px rgba(27,73,106,.18);
    }

    html[data-theme="light"] .tool-panel:hover,
    html[data-theme="light"] .tool-panel:focus-within {
        box-shadow: 16px 0 40px rgba(27,73,106,.18);
    }

    html[data-theme="light"] .inspector:hover,
    html[data-theme="light"] .inspector:focus-within {
        box-shadow: -16px 0 40px rgba(27,73,106,.18);
    }
}

html[data-theme] .auth-card :is(.field input,.field select,.field textarea) {
    border-color: #9ebed5;
    background: rgba(255,255,255,.94);
    color: #102a3c;
    box-shadow: inset 0 1px 2px rgba(22,64,92,.06);
}

@page { size: A4 portrait; margin: 12mm; }
@media print {
    html,body { height: auto !important; overflow: visible !important; background: #fff !important; color: #111 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .sidebar,.topbar,.toast-stack,.no-print { display: none !important; }
    .app-shell,.page-column,.app-content { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
    .page-column { grid-column: auto; }.app-content { padding: 0 !important; }
    .print-plan-page { display: block !important; min-height: 0; padding: 0 !important; background: #fff !important; }
    .label-page { padding: 0 !important; background: #fff !important; }
    .label-grid { grid-template-columns: repeat(2,1fr); gap: 6mm; }
    .asset-label { min-height: 38mm; padding: 4mm; border: .3mm solid #5f6870; border-radius: 2mm; }
    .print-sheet { width: 100%; margin: 0; padding: 0; box-shadow: none; }
    .print-title { padding-bottom: 5mm; }.print-summary { margin: 5mm 0; }
    .print-section { margin-top: 5mm; }.print-section.page-break { break-before: page; }
    .print-sheet thead { display: table-header-group; }.print-sheet tr,.print-rack { break-inside: avoid; }
    .print-footer { position: running(footer); }
}