:root {
    color-scheme: dark;

    /* Color system */
    --color-page: #0d1016;
    --color-surface: #151922;
    --color-surface-raised: #1a1f2a;
    --color-surface-inset: #10141c;
    --color-surface-hover: #171d28;

    --color-border: #303746;
    --color-border-soft: #252d3a;
    --color-divider: #252b36;

    --color-text: #e8edf5;
    --color-text-strong: #f7f9fc;
    --color-text-muted: #9aa4b3;
    --color-text-dim: #737f90;

    --color-success: #7dff9b;
    --color-warning: #ffd166;
    --color-attention: #ff9f43;
    --color-danger: #ff5c5c;
    --color-info: #4db8ff;
    --color-special: #c77dff;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
    --font-size-meta: 0.75rem;
    --font-size-small: 0.8125rem;
    --font-size-body: 1rem;
    --font-size-value: 1.125rem;
    --font-size-status: clamp(1.15rem, 2.2vw, 1.45rem);
    --font-size-section: clamp(1.2rem, 2vw, 1.4rem);
    --font-size-title: clamp(1.75rem, 4vw, 2.2rem);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Shape and motion */
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.125rem;
    --radius-pill: 999px;

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.14);
    --shadow-focus: 0 0 0 3px rgba(77, 184, 255, 0.22);

    --transition-fast: 160ms ease;
    --transition-normal: 220ms ease;

    /* Layout */
    --content-max: 1120px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--color-page);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    line-height: 1.45;
    color: var(--color-text);
    background:
        radial-gradient(circle at top center, rgba(77, 184, 255, 0.05), transparent 34rem),
        var(--color-page);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
a {
    font: inherit;
}

a {
    color: inherit;
}

.container {
    width: min(var(--content-max), 100%);
    margin: 0 auto;
    padding: clamp(0.875rem, 2.4vw, 1.5rem);
}

/* Header */
.header {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-4);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent), var(--color-surface);
    border: 2px solid #374151;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.25;
}

.header-kicker {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.header h1 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--font-size-title);
    font-weight: 780;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--font-size-status);
    font-weight: 780;
    line-height: 1.2;
}

.status-indicator {
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.status-indicator-normal {
    background: var(--color-success);
    animation: statusPulse 2.2s ease-in-out infinite;
}

.status-indicator-failover {
    background: var(--color-attention);
    animation: statusPulse 1.5s ease-in-out infinite;
}

.status-indicator-tmobile,
.status-indicator-network {
    background: var(--color-info);
    animation: statusPulse 1.8s ease-in-out infinite;
}

.status-indicator-offline {
    background: var(--color-danger);
    animation: statusPulse 1s ease-in-out infinite;
}

.status-indicator-firmware {
    background: var(--color-special);
    animation: statusPulse 1.2s ease-in-out infinite;
}

.status-indicator-maintenance {
    background: #ffffff;
}

@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        opacity: 0.88;
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 0.42rem rgba(255, 255, 255, 0.03);
        opacity: 1;
    }
}

.header.banner-normal {
    color: var(--color-success);
    border-color: #2fd365;
    background: rgba(47, 211, 101, 0.055);
    box-shadow: 0 0 24px rgba(47, 211, 101, 0.08);
}

.header.banner-failover {
    color: var(--color-attention);
    border-color: var(--color-attention);
    background: rgba(255, 159, 67, 0.07);
}

.header.banner-tmobile,
.header.banner-network {
    color: var(--color-info);
    border-color: var(--color-info);
    background: rgba(77, 184, 255, 0.07);
}

.header.banner-offline {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: rgba(255, 92, 92, 0.08);
}

.header.banner-firmware {
    color: var(--color-special);
    border-color: var(--color-special);
    background: rgba(199, 125, 255, 0.07);
}

.header.banner-maintenance {
    color: #ffffff;
    border-color: #d7dce5;
    background: rgba(215, 220, 229, 0.06);
}

/* Health strip */
.health-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: var(--space-5);
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.health-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    row-gap: 0.18rem;
    align-items: center;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
}

.health-name {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
    font-weight: 650;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-dot {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 10px;
    height: 10px;
    margin: 0;
    border-radius: 50%;
}

.health-value {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-strong);
    font-size: 0.9rem;
    font-weight: 760;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-good { background: var(--color-success); }
.health-warning { background: var(--color-warning); }
.health-critical { background: var(--color-danger); }
.health-info { background: var(--color-info); }
.health-neutral { background: var(--color-text-muted); }

/* Shared card system */
.card {
    margin-bottom: var(--space-5);
    padding: clamp(1rem, 2.5vw, 1.25rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent), var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.compact-section-header {
    margin-bottom: var(--space-2);
}

.section-title {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    color: var(--color-text-strong);
    font-size: var(--font-size-section);
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--color-border);
}

.section-header .section-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.section-subtitle {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.result-link,
.telemetry-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-meta);
    font-weight: 750;
    white-space: nowrap;
}

.result-link {
    color: var(--color-info);
    text-decoration: none;
    background: rgba(77, 184, 255, 0.07);
    border: 1px solid rgba(77, 184, 255, 0.3);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.result-link:hover {
    background: rgba(77, 184, 255, 0.13);
    border-color: rgba(77, 184, 255, 0.55);
    transform: translateY(-1px);
}

.result-link:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.is-hidden {
    display: none !important;
}

/* Performance metrics */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.performance-item {
    display: flex;
    min-width: 0;
    min-height: 8.5rem;
    padding: var(--space-4);
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent), var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.performance-item:hover {
    background-color: var(--color-surface-hover);
    border-color: #3a4455;
    transform: translateY(-1px);
}

.performance-label {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 650;
    letter-spacing: 0.015em;
}

.performance-value {
    overflow-wrap: anywhere;
    color: var(--color-text-strong);
    font-size: clamp(1.45rem, 3.2vw, 1.85rem);
    font-weight: 790;
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.performance-value-text {
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    line-height: 1.25;
}

.performance-detail {
    min-height: 1rem;
    margin-top: var(--space-2);
    color: var(--color-text-dim);
    font-size: var(--font-size-meta);
}

.quality-label {
    min-height: 1rem;
    margin-top: var(--space-2);
    font-size: var(--font-size-meta);
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* WAN rows and telemetry */
.wan-row {
    padding: var(--space-2) 0 var(--space-4);
    border-bottom: 1px solid var(--color-divider);
}

.wan-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.row,
.wan-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(7.5rem, 1.15fr) minmax(5.5rem, 0.85fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) 0;
}

.wan-summary-row {
    padding-bottom: var(--space-2);
    border-bottom: 0;
}

.row:last-child,
.cabinet-row:last-child,
.event:last-child {
    border-bottom: 0;
}

.label {
    min-width: 0;
    color: var(--color-text);
    font-size: var(--font-size-value);
    font-weight: 650;
}

.value {
    min-width: 0;
    color: var(--color-text-strong);
    font-size: var(--font-size-value);
    font-weight: 740;
    text-align: right;
}

.wan-duration {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 600;
    white-space: nowrap;
}

.wan-route {
    grid-column: 1 / span 3;
    padding-left: 1.75rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    opacity: 0.72;
    letter-spacing: 0.01em;
}

.telemetry-badge {
    align-self: center;
}

.telemetry-live {
    color: var(--color-success);
    background: rgba(125, 255, 155, 0.08);
    border: 1px solid rgba(125, 255, 155, 0.28);
}

.telemetry-waiting {
    color: var(--color-warning);
    background: rgba(255, 209, 102, 0.08);
    border: 1px solid rgba(255, 209, 102, 0.28);
}

.telemetry-offline {
    color: var(--color-danger);
    background: rgba(255, 92, 92, 0.08);
    border: 1px solid rgba(255, 92, 92, 0.28);
}

.wan-telemetry {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.8fr) minmax(7.5rem, 0.8fr) minmax(13rem, 1.8fr);
    gap: var(--space-3);
    align-items: center;
    margin: 0 0 var(--space-1) 1.75rem;
    padding: var(--space-3) var(--space-4);
    background: rgba(16, 20, 28, 0.74);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
}

.wan-rate {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.wan-rate-label {
    color: var(--color-text-muted);
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wan-rate strong {
    color: var(--color-text-strong);
    font-size: 1rem;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
}

.wan-share {
    min-width: 0;
}

.wan-share-heading {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
}

.wan-share-heading strong {
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
}

.wan-share-track {
    height: 0.55rem;
    overflow: hidden;
    background: #242a36;
    border: 1px solid #303847;
    border-radius: var(--radius-pill);
}

.wan-share-fill {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    transition: width 700ms ease;
}

.wan-share-fill.connected { background: var(--color-success); }
.wan-share-fill.standby { background: var(--color-warning); }
.wan-share-fill.down { background: var(--color-danger); }

.wan-telemetry-unavailable {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

/* Environment */
.cabinet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider);
}

.environment-value {
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.section-divider {
    margin: var(--space-1) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.subtle {
    color: #aab2c0;
}

/* Status colors */
.normal,
.connected,
.latency-good,
.quality-excellent,
.jitter-excellent,
.system-good {
    color: var(--color-success);
}

.failover,
.quality-fair,
.jitter-variable {
    color: var(--color-attention);
}

.tmobile,
.network,
.system-info {
    color: var(--color-info);
}

.offline,
.down,
.latency-poor,
.quality-poor,
.jitter-poor,
.system-critical {
    color: var(--color-danger);
}

.firmware {
    color: var(--color-special);
}

.maintenance {
    color: #ffffff;
}

.standby,
.latency-warning,
.quality-good,
.speedtest-stale,
.jitter-good,
.system-warning {
    color: var(--color-warning);
}

.quality-unknown,
.system-neutral {
    color: #8b93a4;
}

/* Controls */
.lighting-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

button {
    min-height: 2.65rem;
    margin: 0;
    padding: 0.68rem 0.9rem;
    color: #eeeeee;
    font-weight: 670;
    background: #242a36;
    border: 1px solid #505869;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

button:hover {
    background: #343b4c;
    border-color: #687184;
    transform: translateY(-1px);
}

button:active {
    transform: translateY(0);
}

.button-secondary {
    color: var(--color-info);
    border-color: rgba(77, 184, 255, 0.45);
}

/* Event log */
.event {
    display: grid;
    grid-template-columns: 0.3rem 5rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider);
}

.event-marker {
    width: 0.25rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-text-muted);
}

.event-speedtest .event-marker { background: var(--color-info); }
.event-wan .event-marker { background: var(--color-attention); }
.event-lighting .event-marker { background: var(--color-special); }
.event-automation .event-marker { background: var(--color-warning); }
.event-status .event-marker { background: var(--color-success); }

.event-time {
    color: #8b93a4;
    font-size: var(--font-size-small);
    white-space: nowrap;
}

.event-message {
    overflow-wrap: anywhere;
    color: #d9dee8;
    font-size: 0.94rem;
}

/* System information */
.system-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-6);
}

.system-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider);
}

.system-label {
    color: var(--color-text-muted);
}

.system-value {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 740;
    text-align: right;
}

/* Footer */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    color: #8b93a4;
    font-size: var(--font-size-small);
    border-top: 1px solid #252d3a;
}

.footer-left {
    font-weight: 680;
}

.footer-center {
    text-align: right;
}

.separator {
    margin: 0 var(--space-2);
}

/* Tablet */
@media (max-width: 900px) {
    .performance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .health-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wan-telemetry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 0;
    }

    .wan-share {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 680px) {
    .container {
        padding: var(--space-3);
    }

    .header {
        padding: var(--space-5) var(--space-4);
    }

    .status {
        align-items: flex-start;
        font-size: 1.05rem;
    }

    .status-indicator {
        margin-top: 0.22rem;
    }

    .health-strip {
        grid-template-columns: 1fr;
    }

    .health-item {
        padding: 0.7rem var(--space-4);
    }

    .section-header {
        flex-direction: column;
        gap: var(--space-3);
    }

    .result-link,
    .telemetry-badge {
        align-self: stretch;
        width: 100%;
    }

    .performance-grid {
        grid-template-columns: 1fr;
    }

    .performance-item {
        min-height: 7.25rem;
    }

    .row,
    .wan-summary-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-2) var(--space-3);
    }

    .row > .value.subtle,
    .wan-summary-row > .value.subtle {
        display: none;
    }

    .wan-route {
        grid-column: 1 / -1;
        padding-left: 1.65rem;
    }

    .wan-duration {
        grid-column: 1 / -1;
        padding-left: 1.65rem;
        white-space: normal;
    }

    .wan-telemetry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .wan-rate strong {
        font-size: 0.95rem;
    }

    .cabinet-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-3);
    }

    .value {
        text-align: right;
    }

    .lighting-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    button {
        width: 100%;
    }

    .event {
        grid-template-columns: 0.25rem minmax(0, 1fr);
        gap: var(--space-3);
    }

    .event-time {
        grid-column: 2;
        margin-bottom: -0.25rem;
        font-size: var(--font-size-meta);
    }

    .event-message {
        grid-column: 2;
    }

    .event-marker {
        grid-row: 1 / span 2;
        height: 100%;
        min-height: 2.4rem;
    }

    .system-grid {
        grid-template-columns: 1fr;
    }

    .footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .footer-center {
        text-align: left;
        line-height: 1.9;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .container {
        padding: var(--space-2);
    }

    .card {
        padding: var(--space-4);
        border-radius: var(--radius-sm);
    }

    .header {
        border-radius: var(--radius-md);
    }

    .header-kicker {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .lighting-controls {
        grid-template-columns: 1fr;
    }

    .cabinet-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .cabinet-row .value {
        padding-left: 1.65rem;
        text-align: left;
    }

    .footer-center .separator {
        display: none;
    }

    .footer-center span {
        display: block;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Cabinet Environment cards */
.environment-card .section-header {
    margin-bottom: var(--space-4);
}

.environment-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
}

.environment-item {
    grid-column: span 2;
    min-width: 0;
    min-height: 9.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
        var(--inner);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-inner);
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.environment-item-primary {
    grid-column: span 3;
    min-height: 10rem;
}

.environment-item:hover {
    background-color: var(--inner-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.environment-icon {
    min-height: 1.75rem;
    margin-bottom: var(--space-2);
    font-size: 1.45rem;
    line-height: 1;
}

.environment-reading {
    max-width: 100%;
    color: var(--text-strong);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 780;
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.environment-reading-text {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    letter-spacing: -0.02em;
}

.environment-label {
    margin-top: var(--space-2);
    color: var(--text);
    font-size: var(--font-size-body);
    font-weight: 720;
}

.environment-detail {
    min-height: 1rem;
    margin-top: var(--space-1);
    color: var(--muted-dark);
    font-size: var(--font-size-meta);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .environment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .environment-item,
    .environment-item-primary {
        grid-column: span 1;
        min-height: 8.75rem;
    }

    .environment-item:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .environment-grid {
        grid-template-columns: 1fr;
    }

    .environment-item,
    .environment-item-primary,
    .environment-item:last-child {
        grid-column: 1;
        min-height: 7.75rem;
        padding: var(--space-4);
    }

    .environment-reading {
        font-size: 2rem;
    }

    .environment-reading-text {
        font-size: 1.45rem;
    }
}


/* Sprint 3: professional icon system and lighting controls */
.icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-sm { width: 0.95rem; height: 0.95rem; }
.icon-lg { width: 1.7rem; height: 1.7rem; }
.icon-xl { width: 2rem; height: 2rem; }

.health-name-with-icon,
.performance-label-with-icon,
.footer-service {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.performance-label-with-icon {
    justify-content: center;
}

.environment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-info);
}

.wan-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: var(--space-2);
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(255,255,255,0.04);
    border: 1px solid currentColor;
}

.wan-status-icon.connected { color: var(--color-success); }
.wan-status-icon.standby { color: var(--color-warning); }
.wan-status-icon.down { color: var(--color-danger); }

/* Repair legacy environment aliases using the design-system tokens. */
.environment-item {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
        var(--color-surface-inset);
    border-color: var(--color-border-soft);
    border-radius: var(--radius-md);
}

.environment-item:hover {
    background-color: var(--color-surface-hover);
    border-color: #3a4455;
}

.environment-reading { color: var(--color-text-strong); }
.environment-label { color: var(--color-text); }
.environment-detail { color: var(--color-text-dim); }

/* Lighting control */
.lighting-card .section-header {
    align-items: center;
}

.control-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-meta);
    font-weight: 780;
    white-space: nowrap;
}

.control-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0.25rem rgba(255,255,255,0.025);
}

.control-status-auto {
    color: var(--color-success);
    background: rgba(125,255,155,0.08);
    border: 1px solid rgba(125,255,155,0.28);
}

.control-status-manual {
    color: var(--color-info);
    background: rgba(77,184,255,0.08);
    border: 1px solid rgba(77,184,255,0.3);
}

.lighting-auto-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: var(--space-4);
    align-items: center;
    width: 100%;
    min-height: 5.5rem;
    padding: var(--space-4) var(--space-5);
    color: var(--color-text);
    text-align: left;
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.lighting-auto-card:hover {
    background: var(--color-surface-hover);
    border-color: #3a4455;
}

.lighting-auto-card.is-active {
    color: var(--color-success);
    background: rgba(125,255,155,0.055);
    border-color: rgba(125,255,155,0.48);
    box-shadow: 0 0 0 1px rgba(125,255,155,0.08), 0 10px 26px rgba(0,0,0,0.1);
}

.lighting-auto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.35rem;
    height: 3.35rem;
    color: var(--color-info);
    background: rgba(77,184,255,0.08);
    border: 1px solid rgba(77,184,255,0.22);
    border-radius: var(--radius-md);
}

.lighting-auto-card.is-active .lighting-auto-icon {
    color: var(--color-success);
    background: rgba(125,255,155,0.08);
    border-color: rgba(125,255,155,0.24);
}

.lighting-auto-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.lighting-auto-copy strong {
    color: var(--color-text-strong);
    font-size: 1.05rem;
}

.lighting-auto-copy span {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.lighting-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 7rem;
    min-height: 2.2rem;
    padding: 0.45rem 0.75rem;
    color: var(--color-info);
    font-size: var(--font-size-meta);
    font-weight: 780;
    background: rgba(77,184,255,0.08);
    border: 1px solid rgba(77,184,255,0.28);
    border-radius: var(--radius-pill);
}

.lighting-auto-card.is-active .lighting-state-badge {
    color: var(--color-success);
    background: rgba(125,255,155,0.08);
    border-color: rgba(125,255,155,0.28);
}

.lighting-manual-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: var(--space-5) 0 var(--space-3);
}

.lighting-manual-header div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.lighting-manual-header strong {
    color: var(--color-text-strong);
}

.lighting-manual-header span {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.lighting-mode-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.lighting-mode-tile {
    display: flex;
    min-width: 0;
    min-height: 7.5rem;
    padding: var(--space-4);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    text-align: left;
    color: var(--color-text-muted);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.lighting-mode-tile:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
    border-color: #3a4455;
}

.lighting-mode-tile > span {
    color: var(--color-text-strong);
    font-size: 0.98rem;
    font-weight: 760;
}

.lighting-mode-tile small {
    color: var(--color-text-dim);
    font-size: 0.72rem;
    line-height: 1.35;
}

.lighting-mode-tile.is-active {
    color: var(--color-info);
    background: rgba(77,184,255,0.065);
    border-color: rgba(77,184,255,0.58);
    box-shadow: 0 0 0 1px rgba(77,184,255,0.08), 0 10px 24px rgba(0,0,0,0.1);
}

.lighting-mode-critical.is-active {
    color: var(--color-danger);
    background: rgba(255,92,92,0.07);
    border-color: rgba(255,92,92,0.58);
}

/* Event icons */
.event {
    grid-template-columns: 0.3rem 1.75rem 5rem minmax(0, 1fr);
}

.event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.event-speedtest .event-icon { color: var(--color-info); }
.event-wan .event-icon { color: var(--color-attention); }
.event-lighting .event-icon { color: var(--color-special); }
.event-automation .event-icon { color: var(--color-warning); }
.event-status .event-icon { color: var(--color-success); }

/* Footer services */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.footer-left strong {
    color: var(--color-text-strong);
    letter-spacing: 0.02em;
}

.footer-left span {
    color: var(--color-text-dim);
    font-size: var(--font-size-meta);
}

.footer-service {
    gap: 0.35rem;
    white-space: nowrap;
}

.service-indicator {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--color-text-muted);
}
.service-good { background: var(--color-success); }
.service-warning { background: var(--color-warning); }
.service-critical { background: var(--color-danger); }
.service-neutral { background: var(--color-text-muted); }

@media (max-width: 900px) {
    .lighting-mode-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 680px) {
    .control-status { align-self: stretch; justify-content: center; }
    .lighting-auto-card {
        grid-template-columns: auto minmax(0,1fr);
    }
    .lighting-state-badge {
        grid-column: 1 / -1;
        width: 100%;
    }
    .event {
        grid-template-columns: 0.25rem 1.5rem minmax(0,1fr);
    }
    .event-marker { grid-row: 1 / span 2; }
    .event-icon { grid-row: 1 / span 2; }
    .event-time { grid-column: 3; }
    .event-message { grid-column: 3; }
}

@media (max-width: 420px) {
    .lighting-auto-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .lighting-auto-icon { margin: 0 auto; }
    .lighting-mode-grid { grid-template-columns: 1fr; }
    .lighting-mode-tile { min-height: 6.4rem; align-items: center; text-align: center; }
}


/* RC-001 v1.2 AirNow AQI tile */
.air-quality-item {
    --aqi-color: #64748b;
    grid-column: span 2;
    align-items: stretch;
    border-left: 0.35rem solid var(--aqi-color);
    background: color-mix(
        in srgb,
        var(--aqi-color) 7%,
        var(--color-surface-inset)
    );
}

.air-quality-item[data-aqi-level="good"] { --aqi-color: #00a63e; }
.air-quality-item[data-aqi-level="moderate"] { --aqi-color: #c9a800; }
.air-quality-item[data-aqi-level="sensitive"] { --aqi-color: #e76f00; }
.air-quality-item[data-aqi-level="unhealthy"] { --aqi-color: #d90000; }
.air-quality-item[data-aqi-level="very_unhealthy"] { --aqi-color: #8f3f97; }
.air-quality-item[data-aqi-level="hazardous"] { --aqi-color: #7e0023; }

.air-quality-topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
}

.air-quality-unit,
.air-quality-meta,
.air-quality-updated {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.air-quality-unit {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.air-quality-trend,
.air-quality-category {
    color: var(--aqi-color);
    font-weight: 760;
}

.air-quality-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.air-quality-meta span:not(:empty) + span:not(:empty)::before {
    content: "•";
    margin-right: var(--space-2);
}

.air-quality-advisory {
    margin-top: var(--space-3);
    color: var(--color-text);
    font-size: 0.9rem;
}

.air-quality-updated {
    margin-top: var(--space-2);
}

.aqi-sparkline {
    width: 100%;
    height: 42px;
    margin-top: var(--space-2);
    overflow: visible;
}

.aqi-sparkline-line {
    fill: none;
    stroke: var(--aqi-color);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.aqi-sparkline-empty {
    fill: var(--color-text-dim);
    font-size: 7px;
}

.event-environment .event-marker {
    background: var(--color-attention);
}

.event-environment .event-icon {
    color: var(--color-attention);
}

@media (max-width: 680px) {
    .air-quality-item {
        grid-column: span 1;
    }

    .air-quality-topline {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* RC-001 — Cunningham Home Operations Center */
.header-subtitle {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.92rem;
    letter-spacing: 0.06em;
}
.banner-environment {
    border-color: rgba(255,174,0,0.9);
    box-shadow: 0 0 0 1px rgba(255,174,0,0.08), 0 18px 55px rgba(255,174,0,0.08);
}
.status.environment { color: var(--color-warning); }
.status-indicator-environment {
    color: var(--color-warning);
    background: var(--color-warning);
    box-shadow: 0 0 14px rgba(255,174,0,0.65);
}
.health-strip { grid-template-columns: repeat(5, minmax(0,1fr)); }
.security-shield { color: var(--color-info); font-size: 0.75rem; }

.air-quality-item {
    grid-column: 1 / -1;
    min-height: 19rem;
    padding: clamp(1.25rem,2vw,2rem);
    background:
        linear-gradient(135deg, color-mix(in srgb,var(--aqi-color) 16%,transparent), transparent 58%),
        var(--color-surface-inset);
}
.air-quality-value {
    font-size: clamp(3.75rem,7vw,6.2rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
}
.air-quality-category {
    margin-top: var(--space-2);
    font-size: clamp(1.05rem,2vw,1.35rem);
}
.air-quality-advisory {
    max-width: 54rem;
    font-size: 1rem;
    line-height: 1.65;
}
.aqi-sparkline { height: 82px; margin-top: var(--space-4); }
.aqi-sparkline-line {
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.security-ready-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    color: var(--color-success);
    font-size: var(--font-size-small);
    font-weight: 760;
    background: rgba(89,255,145,0.07);
    border: 1px solid rgba(89,255,145,0.28);
    border-radius: 999px;
}
.security-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--space-3);
}
.security-item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0,1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 6rem;
    padding: var(--space-4);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}
.security-item-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: var(--color-info);
    background: rgba(77,184,255,0.08);
    border: 1px solid rgba(77,184,255,0.22);
    border-radius: 0.75rem;
}
.security-item-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.3rem;
}
.security-item-copy strong { color: var(--color-text-strong); }
.security-item-copy span {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    line-height: 1.45;
}
.security-state {
    padding: 0.3rem 0.55rem;
    font-size: var(--font-size-meta);
    font-weight: 760;
    border-radius: 999px;
}
.security-state-ready {
    color: var(--color-success);
    background: rgba(89,255,145,0.07);
}
.security-state-neutral {
    color: var(--color-text-muted);
    background: rgba(148,163,184,0.08);
}
@media (max-width:900px) {
    .health-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .security-grid { grid-template-columns: 1fr; }
}
@media (max-width:680px) {
    .health-strip { grid-template-columns: 1fr; }
    .air-quality-item { grid-column: 1 / -1; }
    .security-item { grid-template-columns: 2.25rem minmax(0,1fr); }
    .security-state { grid-column: 2; justify-self: start; }
}


/* RC-001 v1.3.1 — Outdoor temperature in AQI panel */
.air-quality-primary {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
}

.outdoor-temperature-block {
    min-width: 12.5rem;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    text-align: right;
    border-left: 1px solid color-mix(
        in srgb,
        var(--aqi-color) 28%,
        var(--color-border-soft)
    );
}

.outdoor-temperature-line {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.3rem;
}

.outdoor-temperature-value {
    color: var(--color-text-strong);
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.045em;
}

.outdoor-temperature-unit {
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 700;
}

.outdoor-temperature-label {
    margin-top: var(--space-2);
    color: var(--color-text-strong);
    font-size: var(--font-size-small);
    font-weight: 720;
}

.outdoor-feels-like {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

@media (max-width: 680px) {
    .air-quality-topline {
        gap: var(--space-5);
    }

    .outdoor-temperature-block {
        width: 100%;
        padding-top: var(--space-4);
        padding-left: 0;
        text-align: left;
        border-top: 1px solid color-mix(
            in srgb,
            var(--aqi-color) 28%,
            var(--color-border-soft)
        );
        border-left: 0;
    }

    .outdoor-temperature-line {
        justify-content: flex-start;
    }
}


/* RC-001 v1.3.2 — Visual Refinement Edition */
.header {
    transition:
        border-color 420ms ease,
        box-shadow 420ms ease,
        background-color 420ms ease;
}

.header-build {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    color: var(--color-text-dim);
    font-size: var(--font-size-meta);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.environment-domain-label {
    margin: 0 0 var(--space-3);
    color: var(--color-text-dim);
    font-size: var(--font-size-meta);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.environment-domain-label-outdoor {
    margin-top: var(--space-5);
}

.environment-grid-outdoor {
    grid-template-columns: 1fr;
}

.air-quality-item {
    min-height: 15.5rem;
    padding: clamp(1.1rem, 1.8vw, 1.65rem);
}

.air-quality-icon {
    color: var(--aqi-color);
    font-size: 1.7rem;
    filter: drop-shadow(
        0 0 8px color-mix(in srgb, var(--aqi-color) 45%, transparent)
    );
}

.air-quality-topline {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: clamp(1rem,3vw,2.5rem);
    width: 100%;
}

.environment-hero-metric {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.environment-hero-value-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
}

.environment-hero-label {
    margin-top: var(--space-2);
    color: var(--color-text-strong);
    font-size: 0.95rem;
    font-weight: 760;
}

.environment-hero-separator {
    width: 1px;
    height: 7.5rem;
    background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb,var(--aqi-color) 42%,var(--color-border-soft)) 18%,
        color-mix(in srgb,var(--aqi-color) 42%,var(--color-border-soft)) 82%,
        transparent
    );
    box-shadow: 0 0 18px color-mix(in srgb,var(--aqi-color) 20%,transparent);
}

.air-quality-value,
.outdoor-temperature-value {
    font-size: clamp(3.2rem,6vw,5.25rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.air-quality-category {
    margin-top: var(--space-2);
    color: var(--aqi-color);
    font-size: 1.15rem;
    font-weight: 800;
}

.air-quality-trend-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.air-quality-trend-label {
    color: var(--color-text-dim);
    font-size: var(--font-size-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.air-quality-advisory {
    max-width: 62rem;
    margin: var(--space-4) auto 0;
    font-size: 1.08rem;
    line-height: 1.65;
    text-align: center;
}

.air-quality-meta {
    justify-content: center;
}

.aqi-sparkline {
    height: 64px;
    margin-top: var(--space-3);
}

.air-quality-updated {
    text-align: center;
}

.air-quality-item[data-aqi-level="good"] { --aqi-color: #2ecb70; }
.air-quality-item[data-aqi-level="moderate"] { --aqi-color: #d7b700; }
.air-quality-item[data-aqi-level="sensitive"] { --aqi-color: #eb7a19; }
.air-quality-item[data-aqi-level="unhealthy"] { --aqi-color: #e34848; }
.air-quality-item[data-aqi-level="very_unhealthy"] { --aqi-color: #9a5bb0; }
.air-quality-item[data-aqi-level="hazardous"] { --aqi-color: #8f2947; }

/* RC-001 v3.3.0 — Local weather radar */
.weather-radar-card {
    overflow: hidden;
}

.weather-radar-header {
    align-items: center;
    margin-bottom: var(--space-4);
}

.weather-radar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.weather-radar-live,
.weather-radar-open {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: var(--font-size-meta);
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
}

.weather-radar-live {
    gap: 0.45rem;
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success) 42%, transparent);
}

.weather-radar-live-dot {
    width: 0.48rem;
    height: 0.48rem;
    background: var(--color-success);
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 45%, transparent);
    animation: weather-radar-pulse 2.4s ease-out infinite;
}

.weather-radar-open {
    color: var(--color-info);
    text-decoration: none;
    background: color-mix(in srgb, var(--color-info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-info) 38%, transparent);
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.weather-radar-open:hover {
    color: var(--color-text-strong);
    background: color-mix(in srgb, var(--color-info) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-info) 65%, transparent);
    transform: translateY(-1px);
}

.weather-radar-shell {
    position: relative;
    min-height: 28rem;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(77, 184, 255, 0.08), transparent 55%),
        var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-inner);
    isolation: isolate;
}

.weather-radar-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity 300ms ease;
}

.weather-radar-loading,
.weather-radar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    text-align: center;
}

.weather-radar-fallback {
    z-index: 2;
    display: none;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-surface-inset);
}

.weather-radar-fallback strong {
    color: var(--color-text-strong);
    font-size: 1.05rem;
}

.weather-radar-fallback a {
    margin-top: var(--space-2);
    color: var(--color-info);
    font-weight: 750;
    text-decoration: none;
}

.weather-radar-shell.is-loaded .weather-radar-frame {
    opacity: 1;
}

.weather-radar-shell.is-loaded .weather-radar-loading,
.weather-radar-shell.is-unavailable .weather-radar-loading {
    display: none;
}

.weather-radar-shell.is-unavailable .weather-radar-frame {
    visibility: hidden;
}

.weather-radar-shell.is-unavailable .weather-radar-fallback {
    display: flex;
}

.weather-radar-attribution {
    margin-top: var(--space-2);
    color: var(--color-text-dim);
    font-size: var(--font-size-meta);
    text-align: right;
}

@keyframes weather-radar-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 0.55rem transparent; }
}

@media (max-width: 900px) {
    .weather-radar-shell {
        min-height: 23rem;
    }
}

@media (max-width: 680px) {
    .weather-radar-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .weather-radar-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .weather-radar-shell {
        min-height: 19rem;
    }

    .weather-radar-attribution {
        text-align: left;
    }
}

.event-severity-info .event-marker { background: var(--color-info); }
.event-severity-advisory .event-marker { background: var(--color-warning); }
.event-severity-warning .event-marker { background: var(--color-attention); }
.event-severity-critical .event-marker {
    background: var(--color-critical);
    box-shadow: 0 0 10px rgba(255,76,76,0.55);
}

@media (max-width:900px) {
    .header-build {
        position: static;
        margin-top: var(--space-2);
    }
}

@media (max-width:680px) {
    .air-quality-topline {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .environment-hero-separator {
        width: 75%;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            color-mix(in srgb,var(--aqi-color) 42%,var(--color-border-soft)) 18%,
            color-mix(in srgb,var(--aqi-color) 42%,var(--color-border-soft)) 82%,
            transparent
        );
    }

    .air-quality-advisory { text-align: left; }
    .air-quality-meta { justify-content: flex-start; }
}


/* =========================================================
   RC-001 v2.0 Phase 1 — Multi-page Operations Console
   ========================================================= */

.operations-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
}

.operations-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 760;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal);
}

.operations-nav-link:hover {
    color: var(--color-text-strong);
    background: var(--color-surface-inset);
    border-color: var(--color-border-soft);
}

.operations-nav-link.is-active {
    color: var(--color-accent);
    background: rgba(77, 184, 255, 0.08);
    border-color: rgba(77, 184, 255, 0.32);
}

.page-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-1) 0;
}

.page-heading h2 {
    margin: 0.2rem 0 0;
    color: var(--color-text-strong);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
}

.page-heading p {
    max-width: 48rem;
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
}

.page-eyebrow {
    color: var(--color-accent);
    font-size: var(--font-size-meta);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-back-link {
    flex: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 720;
    text-decoration: none;
}

.page-back-link:hover {
    color: var(--color-accent);
}

.operations-launch-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.operations-launch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.operations-launch-card {
    position: relative;
    display: flex;
    min-height: 9.5rem;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    overflow: hidden;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    transition:
        border-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.operations-launch-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: 0.06;
    background: linear-gradient(
        135deg,
        var(--launch-color, var(--color-accent)),
        transparent 55%
    );
}

.operations-launch-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(
        in srgb,
        var(--launch-color, var(--color-accent)) 55%,
        var(--color-border-soft)
    );
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.operations-launch-environment {
    --launch-color: #d7b700;
}

.operations-launch-security {
    --launch-color: #4db8ff;
}

.operations-launch-lighting {
    --launch-color: #9a5bb0;
}

.operations-launch-logs {
    --launch-color: #2ecb70;
}

.operations-launch-heading,
.operations-launch-metrics {
    position: relative;
    z-index: 1;
}

.operations-launch-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.operations-launch-heading > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.operations-launch-heading strong {
    color: var(--color-text-strong);
    font-size: 1rem;
}

.operations-launch-heading small,
.operations-launch-metrics small {
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
}

.operations-launch-icon {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    flex: none;
    color: var(--launch-color, var(--color-accent));
    background: color-mix(
        in srgb,
        var(--launch-color, var(--color-accent)) 10%,
        transparent
    );
    border: 1px solid color-mix(
        in srgb,
        var(--launch-color, var(--color-accent)) 25%,
        transparent
    );
    border-radius: 0.85rem;
}

.operations-launch-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.operations-launch-metrics > span {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.operations-launch-metrics strong {
    color: var(--color-text-strong);
    font-size: 1.05rem;
}

.operations-launch-arrow {
    position: absolute;
    right: 1.1rem;
    bottom: 0.7rem;
    z-index: 1;
    color: var(--launch-color, var(--color-accent));
    font-size: 2rem;
    line-height: 1;
}

.phase-placeholder-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: 14rem;
}

.phase-placeholder-icon {
    display: grid;
    width: 5rem;
    height: 5rem;
    place-items: center;
    flex: none;
    color: var(--color-accent);
    font-size: 2rem;
    background: rgba(77, 184, 255, 0.08);
    border: 1px solid rgba(77, 184, 255, 0.22);
    border-radius: var(--radius-lg);
}

.phase-placeholder-card p {
    max-width: 48rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.phase-badge {
    display: inline-flex;
    padding: 0.35rem 0.65rem;
    color: var(--color-accent);
    font-size: var(--font-size-meta);
    font-weight: 800;
    background: rgba(77, 184, 255, 0.08);
    border: 1px solid rgba(77, 184, 255, 0.25);
    border-radius: 999px;
}

.page-main-home .card {
    margin: 0;
}

.home-performance-card .section-header,
.home-network-card .section-header {
    margin-bottom: var(--space-3);
}

.home-performance-grid .performance-item {
    min-height: 7.25rem;
}

@media (min-width: 1180px) {
    .page-main-home {
        gap: var(--space-3);
    }

    .home-performance-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .home-performance-grid .performance-item {
        min-height: 6.8rem;
        padding: var(--space-3);
    }

    .page-main-home .wan-telemetry {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .page-main-home .operations-launch-card {
        min-height: 8.25rem;
    }
}

@media (max-width: 900px) {
    .operations-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .operations-launch-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .operations-nav {
        grid-template-columns: 1fr 1fr;
    }

    .operations-nav-link {
        justify-content: flex-start;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .operations-launch-metrics {
        gap: var(--space-3);
    }

    .phase-placeholder-card {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   RC-001 v2.0 Phase 1.1 — Executive Home Refinement
   ========================================================= */

.operations-nav-minimal {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.75rem);
    margin: var(--space-3) 0 var(--space-4);
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    border-radius: 0;
}

.operations-nav-minimal .operations-nav-link {
    position: relative;
    min-height: 3rem;
    padding: 0.75rem 0.15rem;
    color: var(--color-text-dim);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.operations-nav-minimal .operations-nav-link::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    content: "";
    background: transparent;
    transition: background-color var(--transition-normal);
}

.operations-nav-minimal .operations-nav-link:hover {
    color: var(--color-text-strong);
    background: transparent;
    border-color: transparent;
}

.operations-nav-minimal .operations-nav-link.is-active {
    color: var(--color-text-strong);
    background: transparent;
    border-color: transparent;
}

.operations-nav-minimal .operations-nav-link.is-active::after {
    background: var(--color-accent);
}

.executive-domain-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.executive-domain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.executive-domain-card {
    --domain-color: var(--color-accent);

    position: relative;
    display: flex;
    min-height: 13rem;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    overflow: hidden;
    color: var(--color-text);
    text-decoration: none;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--domain-color) 8%, transparent),
            transparent 52%
        ),
        var(--color-surface);
    border: 1px solid color-mix(
        in srgb,
        var(--domain-color) 22%,
        var(--color-border-soft)
    );
    border-radius: calc(var(--radius-lg) - 0.1rem);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.executive-domain-card:hover {
    border-color: color-mix(
        in srgb,
        var(--domain-color) 45%,
        var(--color-border-soft)
    );
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.executive-domain-environment {
    --domain-color: #d7b700;
}

.executive-domain-security {
    --domain-color: #4db8ff;
}

.executive-domain-lighting {
    --domain-color: #9a5bb0;
}

.executive-domain-operations {
    --domain-color: #e58a33;
}

.executive-domain-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.executive-domain-title-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--space-3);
}

.executive-domain-title-wrap > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.executive-domain-title-wrap strong {
    color: var(--color-text-strong);
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.executive-domain-title-wrap small {
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
}

.executive-domain-icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    flex: none;
    color: var(--domain-color);
    background: color-mix(
        in srgb,
        var(--domain-color) 10%,
        transparent
    );
    border: 1px solid color-mix(
        in srgb,
        var(--domain-color) 26%,
        transparent
    );
    border-radius: 0.78rem;
}

.executive-domain-arrow {
    flex: none;
    color: var(--domain-color);
    font-size: 2rem;
    line-height: 1;
    transform: translateX(0);
    transition: transform 180ms ease;
}

.executive-domain-card:hover .executive-domain-arrow {
    transform: translateX(7px);
}

.executive-domain-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-strong);
    font-size: 0.95rem;
    font-weight: 760;
}

.executive-domain-status-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: var(--color-text-dim);
    box-shadow: 0 0 10px rgba(148, 163, 184, 0.24);
}

.executive-domain-status-good {
    background: var(--color-success);
    box-shadow: 0 0 10px rgba(89, 255, 145, 0.38);
}

.executive-domain-status-ready {
    background: var(--color-info);
    box-shadow: 0 0 10px rgba(77, 184, 255, 0.38);
}

.executive-domain-status-warning {
    background: var(--color-warning);
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.38);
}

.executive-domain-status-critical {
    background: var(--color-danger);
    box-shadow: 0 0 10px rgba(255, 92, 92, 0.42);
}

.executive-domain-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(
        in srgb,
        var(--domain-color) 18%,
        var(--color-border-soft)
    );
}

.executive-domain-metrics-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.executive-domain-metric {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.executive-domain-metric-label {
    color: var(--color-text-dim);
    font-size: var(--font-size-meta);
    font-weight: 760;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.executive-domain-metric strong {
    overflow: hidden;
    color: var(--color-text-strong);
    font-size: 1.35rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.executive-domain-metric small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1180px) {
    .page-main-home .executive-domain-card {
        min-height: 11.5rem;
    }
}

@media (max-width: 900px) {
    .operations-nav-minimal {
        justify-content: flex-start;
        gap: 1.5rem;
        overflow-x: auto;
    }

    .operations-nav-minimal .operations-nav-link {
        flex: none;
    }

    .executive-domain-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .executive-domain-metrics-three {
        grid-template-columns: 1fr 1fr;
    }

    .executive-domain-metrics-three
    .executive-domain-metric:last-child {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   RC-001 v2.0 Phase 2 — Lighting and Security Operations
   ========================================================= */

.lighting-domain-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-4);
    align-items: start;
}

.lighting-state-badge,
.security-domain-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    font-size: var(--font-size-meta);
    font-weight: 800;
    border-radius: 999px;
}

.lighting-state-badge {
    color: var(--color-accent);
    background: rgba(77, 184, 255, 0.08);
    border: 1px solid rgba(77, 184, 255, 0.24);
}

.lighting-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.lighting-summary-metric {
    display: flex;
    min-height: 7rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: var(--space-4);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

.lighting-summary-label {
    color: var(--color-text-dim);
    font-size: var(--font-size-meta);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lighting-summary-metric strong {
    color: var(--color-text-strong);
    font-size: 1.25rem;
}

.lighting-summary-metric small {
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
}

.lighting-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.lighting-control-button {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-height: 5rem;
    padding: var(--space-3);
    color: var(--color-text);
    text-align: left;
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal);
}

.lighting-control-button:hover {
    border-color: rgba(154, 91, 176, 0.48);
    background: rgba(154, 91, 176, 0.06);
}

.lighting-control-button.is-active {
    border-color: rgba(154, 91, 176, 0.72);
    background: rgba(154, 91, 176, 0.11);
}

.lighting-control-button > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.lighting-control-button strong {
    color: var(--color-text-strong);
}

.lighting-control-button small {
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
}

.lighting-control-icon {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: #9a5bb0;
    background: rgba(154, 91, 176, 0.09);
    border: 1px solid rgba(154, 91, 176, 0.25);
    border-radius: 0.72rem;
}

.lighting-control-return {
    border-color: rgba(89, 255, 145, 0.26);
}

.lighting-control-return .lighting-control-icon {
    color: var(--color-success);
    background: rgba(89, 255, 145, 0.07);
    border-color: rgba(89, 255, 145, 0.24);
}

.lighting-control-note {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
    line-height: 1.55;
}

.security-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-4);
}

.security-domain-ready {
    color: var(--color-info);
    background: rgba(77, 184, 255, 0.08);
    border: 1px solid rgba(77, 184, 255, 0.24);
}

.security-overall-status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(77, 184, 255, 0.05);
    border: 1px solid rgba(77, 184, 255, 0.18);
    border-radius: var(--radius-md);
}

.security-overall-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    flex: none;
    color: var(--color-info);
    background: rgba(77, 184, 255, 0.08);
    border: 1px solid rgba(77, 184, 255, 0.24);
    border-radius: 0.85rem;
}

.security-overall-status strong {
    color: var(--color-text-strong);
    font-size: 1.1rem;
}

.security-overall-status p,
.security-handoff-card p {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.security-handoff-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

.security-handoff-flow span:nth-child(2) {
    color: var(--color-info);
    font-size: 1.2rem;
}

.security-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.security-health-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 6rem;
    padding: var(--space-3);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

.security-health-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: var(--color-info);
    background: rgba(77, 184, 255, 0.08);
    border: 1px solid rgba(77, 184, 255, 0.22);
    border-radius: 0.72rem;
}

.security-health-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.security-health-copy strong {
    color: var(--color-text-strong);
}

.security-health-copy span {
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
}

.security-health-state {
    padding: 0.3rem 0.55rem;
    font-size: var(--font-size-meta);
    font-weight: 800;
    border-radius: 999px;
    white-space: nowrap;
}

.security-health-pending {
    color: var(--color-text-muted);
    background: rgba(148, 163, 184, 0.08);
}

.security-health-ready {
    color: var(--color-success);
    background: rgba(89, 255, 145, 0.07);
}

.security-scope-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.security-scope-grid span {
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: center;
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

@media (max-width: 1000px) {
    .lighting-domain-grid,
    .security-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .lighting-summary-grid,
    .lighting-controls-grid,
    .security-health-grid,
    .security-scope-grid {
        grid-template-columns: 1fr;
    }

    .security-handoff-flow {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-health-item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .security-health-state {
        grid-column: 2;
        justify-self: start;
    }
}


/* =========================================================
   RC-001 v2.0 Phase 2.1 — Lighting panel height alignment
   ========================================================= */

.lighting-domain-grid {
    align-items: stretch;
}

.lighting-summary-card,
.lighting-control-card {
    height: 100%;
}

.lighting-summary-card {
    display: flex;
    flex-direction: column;
}

.lighting-summary-card .lighting-summary-grid {
    flex: 1;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.lighting-summary-card .lighting-summary-metric {
    min-height: 0;
}


/* =========================================================
   RC-001 v2.0 Phase 2.2 — Lighting state visual treatment
   ========================================================= */

.page-main-lighting .page-eyebrow {
    color: #b786f4;
}

.page-main-lighting .operations-nav-link.is-active::after {
    background: linear-gradient(90deg, #6cb8ff, #b46cf0);
}

.page-main-lighting .lighting-summary-card,
.page-main-lighting .lighting-control-card {
    border-color: rgba(180, 108, 240, 0.28);
}

.page-main-lighting .lighting-state-badge {
    color: var(--color-text-strong);
    background: rgba(180, 108, 240, 0.08);
    border-color: rgba(180, 108, 240, 0.5);
    box-shadow: 0 0 16px rgba(180, 108, 240, 0.08);
}

.lighting-summary-card .lighting-summary-grid {
    gap: var(--space-3);
}

.lighting-summary-card .lighting-summary-metric {
    display: grid;
    grid-template-columns: 3.15rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: clamp(1rem, 1.7vw, 1.35rem);
}

.lighting-summary-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
}

.lighting-summary-icon {
    --metric-color: var(--color-text-muted);

    display: grid;
    width: 3.15rem;
    height: 3.15rem;
    place-items: center;
    color: var(--metric-color);
    background: color-mix(
        in srgb,
        var(--metric-color) 10%,
        transparent
    );
    border: 1px solid color-mix(
        in srgb,
        var(--metric-color) 55%,
        transparent
    );
    border-radius: 999px;
    box-shadow: 0 0 18px color-mix(
        in srgb,
        var(--metric-color) 14%,
        transparent
    );
}

.lighting-summary-icon-symbol {
    font-size: 1.45rem;
}

.lighting-summary-metric strong {
    color: var(--metric-color, var(--color-text-strong));
    font-size: clamp(1.25rem, 2.1vw, 1.55rem);
    line-height: 1.1;
}

.lighting-summary-metric-good {
    --metric-color: #62ed7f;
}

.lighting-summary-metric-info {
    --metric-color: #64a9ff;
}

.lighting-summary-metric-warning {
    --metric-color: #ffc12e;
}

.lighting-summary-metric-critical {
    --metric-color: #ff5b63;
}

.lighting-summary-metric-neutral {
    --metric-color: #aab4c3;
}

.lighting-summary-metric {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--metric-color, #aab4c3) 5%,
                transparent
            ),
            transparent 58%
        ),
        var(--color-surface-inset);
    border-color: color-mix(
        in srgb,
        var(--metric-color, #aab4c3) 18%,
        var(--color-border-soft)
    );
    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal);
}

.lighting-summary-label {
    color: var(--color-text-muted);
}

.lighting-summary-metric small {
    line-height: 1.45;
}

.page-main-lighting .lighting-control-button.is-active,
.page-main-lighting .lighting-control-return {
    border-color: rgba(180, 108, 240, 0.58);
}

@media (max-width: 760px) {
    .lighting-summary-card .lighting-summary-metric {
        grid-template-columns: 2.75rem minmax(0, 1fr);
    }

    .lighting-summary-icon {
        width: 2.75rem;
        height: 2.75rem;
    }
}


/* =========================================================
   RC-001 v2.0 Phase 2.3 — Exact Lighting reference layout
   ========================================================= */

/*
 * Match the approved reference at the actual tablet/browser width:
 * two equal outer panels, enough width for all four status tiles,
 * and no clipped status values.
 */
.page-main-lighting .lighting-domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.page-main-lighting .lighting-summary-card,
.page-main-lighting .lighting-control-card {
    min-width: 0;
    height: 100%;
    border-color: rgba(183, 134, 244, 0.46);
    box-shadow:
        0 0 0 1px rgba(183, 134, 244, 0.025),
        0 16px 34px rgba(0, 0, 0, 0.12);
}

/* Match the tighter but balanced panel padding in the approved image. */
.page-main-lighting .lighting-summary-card,
.page-main-lighting .lighting-control-card {
    padding: clamp(1.2rem, 2vw, 1.55rem);
}

.page-main-lighting .lighting-summary-card .section-header,
.page-main-lighting .lighting-control-card .section-header {
    margin-bottom: 0.55rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.page-main-lighting .lighting-summary-card .section-title,
.page-main-lighting .lighting-control-card .section-title {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.page-main-lighting .lighting-summary-card .section-subtitle,
.page-main-lighting .lighting-control-card .section-subtitle {
    line-height: 1.45;
}

/*
 * Four equal tiles, exactly as the approved reference.
 * minmax(0, 1fr) is required so no text forces overflow.
 */
.page-main-lighting .lighting-summary-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.6rem;
}

.page-main-lighting .lighting-summary-metric {
    display: grid;
    grid-template-columns: 3.35rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-width: 0;
    min-height: 10.1rem;
    padding: 1.05rem;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--metric-color) 5%,
                transparent
            ),
            transparent 60%
        ),
        #0d131c;
    border: 1px solid color-mix(
        in srgb,
        var(--metric-color) 40%,
        var(--color-border-soft)
    );
    border-radius: 0.9rem;
}

/*
 * Do not redefine --metric-color on the icon.
 * It must inherit the live semantic color from its parent metric.
 */
.page-main-lighting .lighting-summary-icon {
    display: grid;
    width: 3.35rem;
    height: 3.35rem;
    place-items: center;
    color: var(--metric-color);
    background: color-mix(
        in srgb,
        var(--metric-color) 9%,
        transparent
    );
    border: 1px solid color-mix(
        in srgb,
        var(--metric-color) 70%,
        transparent
    );
    border-radius: 999px;
    box-shadow:
        0 0 0 1px color-mix(
            in srgb,
            var(--metric-color) 8%,
            transparent
        ),
        0 0 18px color-mix(
            in srgb,
            var(--metric-color) 13%,
            transparent
        );
}

.page-main-lighting .lighting-summary-icon .icon {
    width: 1.55rem;
    height: 1.55rem;
}

.page-main-lighting .lighting-summary-icon-symbol {
    font-size: 1.4rem;
}

.page-main-lighting .lighting-summary-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.38rem;
}

.page-main-lighting .lighting-summary-label {
    color: #9ba7ba;
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.11em;
    line-height: 1.35;
    text-transform: uppercase;
}

.page-main-lighting .lighting-summary-metric strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--metric-color);
    font-size: clamp(1.3rem, 2vw, 1.62rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-main-lighting .lighting-summary-metric small {
    max-width: 12rem;
    color: #a7b0bf;
    font-size: 0.79rem;
    line-height: 1.42;
}

/* Exact semantic palette from the approved reference. */
.page-main-lighting .lighting-summary-metric-good {
    --metric-color: #5cf178;
}

.page-main-lighting .lighting-summary-metric-info {
    --metric-color: #5ba3ff;
}

.page-main-lighting .lighting-summary-metric-warning {
    --metric-color: #ffc02b;
}

.page-main-lighting .lighting-summary-metric-critical {
    --metric-color: #ff5c65;
}

.page-main-lighting .lighting-summary-metric-neutral {
    --metric-color: #aab4c3;
}

/* Purple domain treatment visible in the reference. */
.page-main-lighting .page-eyebrow {
    color: #bd86ff;
}

.page-main-lighting .page-back-link {
    color: #b889f5;
}

.page-main-lighting .lighting-state-badge {
    min-width: 7rem;
    justify-content: center;
    color: #f1ebfa;
    background: rgba(166, 88, 220, 0.08);
    border-color: rgba(183, 110, 235, 0.72);
}

/* Manual controls: compact rows with the same proportions as reference. */
.page-main-lighting .control-status {
    width: max-content;
    margin: 0.5rem 0 0.85rem;
}

.page-main-lighting .lighting-controls-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0;
}

.page-main-lighting .lighting-control-button {
    grid-template-columns: 2.55rem minmax(0, 1fr);
    min-width: 0;
    min-height: 4.7rem;
    gap: 0.9rem;
    padding: 0.8rem;
    background: #0d131c;
    border-color: #293344;
    border-radius: 0.85rem;
}

.page-main-lighting .lighting-control-button > span:last-child {
    min-width: 0;
}

.page-main-lighting .lighting-control-button strong,
.page-main-lighting .lighting-control-button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-main-lighting .lighting-control-button strong {
    font-size: 1rem;
}

.page-main-lighting .lighting-control-button small {
    font-size: 0.76rem;
}

.page-main-lighting .lighting-control-icon {
    width: 2.55rem;
    height: 2.55rem;
    color: #b76ff0;
    background: rgba(142, 65, 170, 0.12);
    border-color: rgba(183, 111, 240, 0.3);
    border-radius: 0.72rem;
    font-size: 1.2rem;
}

.page-main-lighting .lighting-control-return {
    background:
        linear-gradient(
            135deg,
            rgba(169, 79, 207, 0.14),
            rgba(90, 43, 111, 0.14)
        ),
        #11151d;
    border-color: rgba(183, 105, 228, 0.72);
}

.page-main-lighting .lighting-control-return .lighting-control-icon {
    color: #5cf178;
    background: rgba(53, 161, 91, 0.14);
    border-color: rgba(74, 210, 116, 0.5);
    border-radius: 999px;
}

.page-main-lighting .lighting-control-note {
    margin-top: 0.9rem;
    font-size: 0.73rem;
}

/*
 * Keep the two-column composition at the user's 1192px screenshot width.
 * Collapse only when the content truly cannot fit.
 */
@media (max-width: 980px) {
    .page-main-lighting .lighting-domain-grid {
        grid-template-columns: 1fr;
    }

    .page-main-lighting .lighting-summary-metric {
        min-height: 8.5rem;
    }
}

@media (max-width: 620px) {
    .page-main-lighting .lighting-summary-grid,
    .page-main-lighting .lighting-controls-grid {
        grid-template-columns: 1fr;
    }

    .page-main-lighting .lighting-summary-metric {
        min-height: 7.5rem;
    }
}


/* RC-001 v2.0 Phase 3 — Operations Center */
.page-main-operations .operations-nav-link.is-active::after {
    background: linear-gradient(90deg, #e58a33, #ffb45f);
}
.operations-page-eyebrow { color: #e58a33; }
.operations-page-actions { display:flex; align-items:center; gap:var(--space-4); }
.operations-refresh-button {
    display:inline-flex; align-items:center; gap:var(--space-2);
    min-height:2.4rem; padding:.55rem .85rem;
    color:var(--color-text-strong); font:inherit; font-size:var(--font-size-small); font-weight:760;
    background:rgba(229,138,51,.08); border:1px solid rgba(229,138,51,.34);
    border-radius:999px; cursor:pointer;
}
.operations-refresh-button:hover { border-color:rgba(229,138,51,.62); }
.operations-refresh-button.is-refreshing .icon { animation:operations-spin 700ms linear infinite; }
@keyframes operations-spin { to { transform:rotate(360deg); } }

.operations-overview-grid {
    display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
    gap:var(--space-4);
}
.operations-domain-badge {
    display:inline-flex; min-height:2rem; align-items:center; padding:.35rem .7rem;
    font-size:var(--font-size-meta); font-weight:800; border-radius:999px;
}
.operations-domain-good { color:var(--color-success); background:rgba(89,255,145,.07); border:1px solid rgba(89,255,145,.28); }
.operations-domain-warning { color:var(--color-warning); background:rgba(255,193,46,.07); border:1px solid rgba(255,193,46,.28); }
.operations-domain-critical { color:var(--color-critical); background:rgba(255,91,99,.07); border:1px solid rgba(255,91,99,.3); }

.operations-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.operations-summary-metric {
    display:grid; grid-template-columns:2.8rem minmax(0,1fr); align-items:center; gap:var(--space-3);
    min-height:7rem; padding:var(--space-3);
    background:linear-gradient(135deg,rgba(229,138,51,.045),transparent 58%),var(--color-surface-inset);
    border:1px solid rgba(229,138,51,.16); border-radius:var(--radius-md);
}
.operations-summary-icon {
    display:grid; width:2.8rem; height:2.8rem; place-items:center; color:#e58a33;
    background:rgba(229,138,51,.08); border:1px solid rgba(229,138,51,.28); border-radius:.8rem;
}
.operations-summary-metric > div { display:flex; min-width:0; flex-direction:column; gap:.25rem; }
.operations-summary-label,.operations-activity-label,.operations-last-event-label {
    color:var(--color-text-dim); font-size:var(--font-size-meta); font-weight:800;
    letter-spacing:.08em; text-transform:uppercase;
}
.operations-summary-metric strong {
    overflow:hidden; color:var(--color-text-strong); font-size:1.2rem;
    text-overflow:ellipsis; white-space:nowrap;
}
.operations-summary-metric small { color:var(--color-text-muted); font-size:var(--font-size-meta); }

.operations-activity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.operations-activity-metric {
    display:flex; min-height:5.3rem; flex-direction:column; justify-content:center; gap:.3rem;
    padding:var(--space-3); background:var(--color-surface-inset);
    border:1px solid var(--color-border-soft); border-radius:var(--radius-md);
}
.operations-activity-metric strong { color:var(--color-text-strong); font-size:1.45rem; }
.operations-count-critical { color:var(--color-critical)!important; }
.operations-count-warning { color:var(--color-warning)!important; }
.operations-last-event {
    display:flex; flex-direction:column; gap:.35rem; margin-top:var(--space-3); padding:var(--space-3);
    background:rgba(229,138,51,.045); border:1px solid rgba(229,138,51,.16);
    border-radius:var(--radius-md);
}
.operations-last-event strong {
    overflow:hidden; color:var(--color-text-strong); font-size:.95rem;
    text-overflow:ellipsis; white-space:nowrap;
}

.operations-detail-grid {
    display:grid; grid-template-columns:minmax(0,1.4fr) minmax(20rem,.6fr);
    gap:var(--space-4); align-items:start;
}
.operations-alert-health-card { padding:var(--space-4); }
.operations-alert-health-grid {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3);
}
.operations-alert-health-item {
    display:flex; min-height:5.7rem; flex-direction:column; justify-content:center; gap:.3rem;
    padding:var(--space-3); background:var(--color-surface-inset);
    border:1px solid var(--color-border-soft); border-radius:var(--radius-md);
}
.operations-alert-health-item > span {
    color:var(--color-text-dim); font-size:var(--font-size-meta); font-weight:800;
    letter-spacing:.08em; text-transform:uppercase;
}
.operations-alert-health-item strong { color:var(--color-text-strong); font-size:1.12rem; }
.operations-alert-health-item small { color:var(--color-text-muted); font-size:var(--font-size-meta); }
.operations-active-alerts { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.operations-active-alerts-empty { color:var(--color-text-muted); font-size:var(--font-size-small); }
.operations-active-alert {
    display:flex; align-items:center; gap:var(--space-3); padding:.55rem .75rem;
    background:rgba(255,193,46,.055); border:1px solid rgba(255,193,46,.24);
    border-radius:999px; font-size:var(--font-size-meta);
}
.operations-active-alert strong { color:var(--color-text-strong); text-transform:capitalize; }
.operations-active-alert span { color:var(--color-warning); }
.operations-filter-bar { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.operations-filter-button {
    min-height:2.1rem; padding:.4rem .7rem; color:var(--color-text-muted);
    font:inherit; font-size:var(--font-size-meta); font-weight:760;
    background:var(--color-surface-inset); border:1px solid var(--color-border-soft);
    border-radius:999px; cursor:pointer;
}
.operations-filter-button:hover { color:var(--color-text-strong); border-color:rgba(229,138,51,.36); }
.operations-filter-button.is-active {
    color:#ffb45f; background:rgba(229,138,51,.08); border-color:rgba(229,138,51,.42);
}
.operations-events { display:flex; flex-direction:column; gap:var(--space-2); }
.operations-events .event {
    min-height:3.7rem; padding:.7rem .8rem; background:var(--color-surface-inset);
    border:1px solid var(--color-border-soft); border-radius:var(--radius-md);
}
.operations-log-empty {
    padding:var(--space-5); color:var(--color-text-muted); text-align:center;
    background:var(--color-surface-inset); border:1px dashed var(--color-border-soft);
    border-radius:var(--radius-md);
}
.infrastructure-health-card .system-information { display:flex; flex-direction:column; gap:var(--space-2); }
.infrastructure-health-card .system-row {
    padding:.75rem .85rem; background:var(--color-surface-inset);
    border:1px solid var(--color-border-soft); border-radius:var(--radius-md);
}
@media (max-width:1000px) {
    .operations-overview-grid,.operations-detail-grid { grid-template-columns:1fr; }
    .operations-alert-health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .operations-page-actions { align-items:flex-start; flex-direction:column; gap:var(--space-2); }
    .operations-summary-grid,.operations-activity-grid { grid-template-columns:1fr; }
    .operations-alert-health-grid { grid-template-columns:1fr; }
}


/* =========================================================
   RC-001 v2.0 Phase 3.1 — Operations corrections
   ========================================================= */

.page-main-operations .operations-detail-grid {
    align-items: stretch;
}

.page-main-operations .operations-log-card,
.page-main-operations .infrastructure-health-card {
    height: 100%;
}

.page-main-operations .infrastructure-health-card {
    display: flex;
    flex-direction: column;
}

.page-main-operations
.infrastructure-health-card
.system-information {
    flex: 1;
}

.page-main-operations
.infrastructure-health-card
.system-row {
    min-height: 4.25rem;
}


/* =========================================================
   RC-001 v2.0 Phase 3.2 — UI polish
   ========================================================= */

/* Fixed-width numerals keep operational measurements visually aligned. */
.performance-value,
.environment-reading,
.air-quality-value,
.outdoor-temperature-value,
.wan-metric-value,
.wan-speed,
.wan-share-value,
.lighting-summary-metric strong,
.executive-domain-metric strong,
.operations-summary-metric strong,
.operations-activity-metric strong,
.operations-last-event strong,
.health-value,
.system-value,
.event-time,
.telemetry-value,
[data-numeric-value] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/*
 * Network Performance values must remain centered and fully contained
 * at every supported dashboard width. The numeric value and unit are
 * rendered as separate inline elements by rc001.js so the unit can be
 * slightly smaller without forcing the complete measurement outside
 * its card.
 */
.home-performance-card .performance-item {
    min-width: 0;
    overflow: hidden;
    text-align: center;
}

.home-performance-card .performance-value {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: baseline;
    justify-content: center;
    gap: 0.28em;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    font-size: clamp(1.25rem, 1.65vw, 1.7rem);
    letter-spacing: -0.025em;
}

.home-performance-card .performance-number {
    min-width: 0;
    font: inherit;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.home-performance-card .performance-unit {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.58em;
    font-weight: 750;
    letter-spacing: 0;
}

/* Long Ookla provider names may exceed the narrow six-column server tile. */
.home-performance-card #speedServer {
    display: -webkit-box;
    width: 100%;
    min-height: 2.35em;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    align-content: center;
    font-size: clamp(0.82rem, 1.15vw, 1.12rem);
    line-height: 1.12;
    text-align: center;
}

@media (min-width: 1180px) {
    .home-performance-card .performance-value {
        font-size: clamp(1.2rem, 1.45vw, 1.6rem);
    }
}

/* =========================================================
   RC-001 v2.1.0 — Security Operations
   ========================================================= */
.security-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); }
.security-kpi { display:flex; min-height:8rem; flex-direction:column; justify-content:center; gap:.35rem; }
.security-kpi span { color:var(--color-text-muted); font-size:var(--font-size-meta); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.security-kpi strong { color:var(--color-text-strong); font-size:1.75rem; }
.security-kpi small { color:var(--color-text-muted); }
.security-domain-badge { padding:.38rem .65rem; font-size:var(--font-size-meta); font-weight:800; border-radius:999px; }
.security-domain-badge.is-healthy { color:var(--color-success); background:rgba(89,255,145,.07); border:1px solid rgba(89,255,145,.22); }
.security-domain-badge.is-warning { color:var(--color-warning); background:rgba(255,194,71,.08); border:1px solid rgba(255,194,71,.25); }
.security-domain-badge.is-critical { color:var(--color-danger); background:rgba(255,91,91,.08); border:1px solid rgba(255,91,91,.25); }
.security-camera-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.security-camera-card { padding:var(--space-4); background:var(--color-surface-inset); border:1px solid var(--color-border-soft); border-radius:var(--radius-md); }
.security-camera-card.is-critical { border-color:rgba(255,91,91,.38); }
.security-camera-card.is-warning { border-color:rgba(255,194,71,.32); }
.security-camera-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.security-camera-title { display:flex; align-items:center; gap:.6rem; color:var(--color-text-strong); font-size:1.05rem; font-weight:800; }
.security-camera-dot { width:.65rem; height:.65rem; border-radius:50%; background:var(--color-text-muted); box-shadow:0 0 0 4px rgba(148,163,184,.08); }
.security-camera-card.is-healthy .security-camera-dot { background:var(--color-success); box-shadow:0 0 0 4px rgba(89,255,145,.08); }
.security-camera-card.is-warning .security-camera-dot { background:var(--color-warning); box-shadow:0 0 0 4px rgba(255,194,71,.08); }
.security-camera-card.is-critical .security-camera-dot { background:var(--color-danger); box-shadow:0 0 0 4px rgba(255,91,91,.08); }
.security-camera-state { color:var(--color-text-muted); font-size:var(--font-size-meta); font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.security-camera-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem var(--space-4); }
.security-camera-metric { display:flex; justify-content:space-between; gap:var(--space-3); padding:.55rem 0; border-bottom:1px solid var(--color-border-soft); }
.security-camera-metric span { color:var(--color-text-muted); font-size:var(--font-size-meta); }
.security-camera-metric strong { color:var(--color-text-strong); font-size:var(--font-size-meta); text-align:right; }
.security-camera-issues { margin-top:var(--space-3); padding:.65rem .75rem; color:var(--color-warning); font-size:var(--font-size-meta); background:rgba(255,194,71,.06); border-radius:var(--radius-sm); }
.security-camera-card.is-critical .security-camera-issues { color:var(--color-danger); background:rgba(255,91,91,.06); }
.security-camera-snapshot { margin:0 0 var(--space-3); }
.security-camera-snapshot-button { position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; padding:0; color:var(--color-text-muted); background:rgba(5,10,18,.72); border:1px solid var(--color-border-soft); border-radius:var(--radius-sm); cursor:zoom-in; }
.security-camera-snapshot-button:hover { border-color:rgba(77,184,255,.45); }
.security-camera-snapshot-button:focus-visible { outline:2px solid var(--color-info); outline-offset:2px; }
.security-camera-snapshot-image { display:block; width:100%; height:100%; object-fit:cover; }
.security-camera-snapshot-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; color:var(--color-text-dim); font-size:var(--font-size-small); }
.security-camera-snapshot-icon { font-size:1.7rem; color:var(--color-info); }
.security-camera-snapshot-age { min-height:1rem; margin-top:.45rem; color:var(--color-text-dim); font-size:var(--font-size-meta); text-align:right; }
.security-camera-live-button { display:block; width:100%; margin-top:.55rem; padding:.55rem .75rem; color:var(--color-info); font-size:var(--font-size-meta); font-weight:800; background:rgba(77,184,255,.06); border:1px solid rgba(77,184,255,.24); border-radius:var(--radius-sm); cursor:pointer; }
.security-camera-live-button:hover { color:var(--color-text-strong); border-color:rgba(77,184,255,.5); }
.security-snapshot-dialog { width:min(68rem,calc(100vw - 2rem)); padding:0; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:0 24px 80px rgba(0,0,0,.68); }
.security-snapshot-dialog::backdrop { background:rgba(2,6,12,.82); backdrop-filter:blur(4px); }
.security-snapshot-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4); border-bottom:1px solid var(--color-border-soft); }
.security-snapshot-dialog-head>div { display:flex; flex-direction:column; gap:.2rem; }
.security-snapshot-dialog-head strong { color:var(--color-text-strong); font-size:1.25rem; }
.security-snapshot-dialog-actions { display:flex; align-items:center; gap:.7rem; }
.security-live-button { padding:.6rem .85rem; color:var(--color-info); font-weight:800; background:rgba(77,184,255,.08); border:1px solid rgba(77,184,255,.35); border-radius:999px; cursor:pointer; }
.security-live-button:disabled { opacity:.6; cursor:wait; }
.security-snapshot-dialog-close { width:2.3rem; height:2.3rem; padding:0; color:var(--color-text-muted); font-size:1.7rem; line-height:1; background:var(--color-surface-inset); border:1px solid var(--color-border-soft); border-radius:50%; cursor:pointer; }
.security-snapshot-dialog-close:hover { color:var(--color-text-strong); border-color:var(--color-border); }
.security-camera-viewer { position:relative; display:grid; place-items:center; min-height:min(62vh,38rem); background:#050a12; }
.security-camera-viewer img,.security-camera-viewer video { display:block; width:100%; max-height:72vh; object-fit:contain; background:#050a12; }
.security-live-status { position:absolute; inset:0; display:grid; place-items:center; padding:2rem; color:var(--color-text-muted); text-align:center; background:#050a12; }
.security-live-status.is-error { color:var(--color-danger); }
.security-snapshot-dialog-footer { display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); }
.security-snapshot-dialog-age { color:var(--color-text-muted); font-size:var(--font-size-small); }
.security-live-countdown { color:var(--color-info); font-size:var(--font-size-small); font-variant-numeric:tabular-nums; }

/* v3.5.1 — on-demand bandwidth consumer drill-down */
.wan-row-drilldown { display:block; width:100%; padding:0; color:inherit; text-align:left; background:transparent; border:0; border-radius:0; cursor:pointer; }
.wan-row-drilldown:hover { background:rgba(77,184,255,.025); }
.wan-row-drilldown:focus-visible { outline:2px solid var(--color-info); outline-offset:2px; }
.wan-drilldown-hint { display:block; margin:-.15rem var(--space-4) var(--space-3); color:var(--color-info); font-size:var(--font-size-meta); font-weight:700; text-align:right; }
.bandwidth-consumers-drawer { position:fixed; inset:0; z-index:320; visibility:hidden; pointer-events:none; }
.bandwidth-consumers-drawer.is-open { visibility:visible; pointer-events:auto; }
.bandwidth-consumers-backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; background:rgba(0,0,0,.68); border:0; border-radius:0; opacity:0; transition:opacity .22s ease; }
.bandwidth-consumers-drawer.is-open .bandwidth-consumers-backdrop { opacity:1; }
.bandwidth-consumers-panel { position:absolute; top:0; right:0; width:min(38rem,94vw); height:100%; overflow-y:auto; padding:var(--space-5); background:var(--color-surface); border-left:1px solid var(--color-border); box-shadow:-20px 0 50px rgba(0,0,0,.42); transform:translateX(102%); transition:transform .26s cubic-bezier(.22,.8,.25,1); }
.bandwidth-consumers-drawer.is-open .bandwidth-consumers-panel { transform:translateX(0); }
.bandwidth-consumers-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border); }
.bandwidth-consumers-header h3 { margin:.25rem 0;color:var(--color-text-strong);font-size:1.45rem; }
.bandwidth-consumers-header p { margin:0;color:var(--color-text-muted);font-size:var(--font-size-small); }
.bandwidth-consumers-close { width:2.4rem;height:2.4rem;min-height:0;padding:0;font-size:1.6rem;line-height:1; }
.bandwidth-consumers-wan-metrics { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0; }
.bandwidth-consumers-wan-metrics>div { display:flex;flex-direction:column;gap:.3rem;padding:.8rem;background:var(--color-surface-inset);border:1px solid var(--color-border-soft);border-radius:var(--radius-sm); }
.bandwidth-consumers-wan-metrics span { color:var(--color-text-dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em; }
.bandwidth-consumers-wan-metrics strong { color:var(--color-text-strong);font-size:1.05rem; }
.bandwidth-consumers-wan-metrics strong.connected { color:var(--color-success); }.bandwidth-consumers-wan-metrics strong.standby { color:var(--color-warning); }.bandwidth-consumers-wan-metrics strong.down { color:var(--color-danger); }
.bandwidth-consumers-scope { display:flex;flex-direction:column;gap:.35rem;padding:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-small);background:rgba(77,184,255,.045);border-left:3px solid var(--color-info); }
.bandwidth-consumers-scope strong { color:var(--color-info); }
.bandwidth-consumers-list-header { display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin:var(--space-5) 0 var(--space-3); }
.bandwidth-consumers-list-header h4 { margin:0;color:var(--color-text-strong);font-size:1.05rem; }
.bandwidth-consumers-list-header>div>span { color:var(--color-text-dim);font-size:var(--font-size-meta); }
.bandwidth-consumers-list { display:grid;gap:var(--space-2); }
.bandwidth-consumer { display:grid;grid-template-columns:2rem 1fr;gap:.75rem;padding:var(--space-3);background:var(--color-surface-inset);border:1px solid var(--color-border-soft);border-radius:var(--radius-sm); }
.bandwidth-consumer-rank { display:grid;place-items:center;width:2rem;height:2rem;color:var(--color-info);font-weight:900;background:rgba(77,184,255,.08);border-radius:50%; }
.bandwidth-consumer-main { min-width:0; }
.bandwidth-consumer-heading,.bandwidth-consumer-meta,.bandwidth-consumer-rates { display:flex;justify-content:space-between;gap:var(--space-2); }
.bandwidth-consumer-heading strong { overflow:hidden;color:var(--color-text-strong);text-overflow:ellipsis;white-space:nowrap; }.bandwidth-consumer-heading span { color:var(--color-info);font-size:var(--font-size-meta);font-weight:800; }
.bandwidth-consumer-meta { margin:.3rem 0;color:var(--color-text-dim);font-size:var(--font-size-meta); }
.bandwidth-consumer-rates { color:var(--color-text-muted);font-size:var(--font-size-meta); }.bandwidth-consumer-rates strong { color:var(--color-text-strong); }
.bandwidth-consumer-track { height:.35rem;margin-top:.55rem;overflow:hidden;background:var(--color-border-soft);border-radius:999px; }.bandwidth-consumer-track span { display:block;height:100%;background:var(--color-success);border-radius:inherit; }
body.bandwidth-consumers-open { overflow:hidden; }
@media(max-width:600px){.bandwidth-consumers-wan-metrics{grid-template-columns:1fr 1fr}.bandwidth-consumer-meta,.bandwidth-consumer-rates{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.bandwidth-consumers-backdrop,.bandwidth-consumers-panel{transition:none}}
.security-operating-note p { margin:.6rem 0 0; color:var(--color-text-muted); line-height:1.6; }
@media (max-width:1000px) { .security-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .security-kpi-grid,.security-camera-grid { grid-template-columns:1fr; } .security-camera-metrics { grid-template-columns:1fr; } }

/* RC-001 v2.1.0 RC2 Sprint 1 — Networking framework */
.page-main-networking { gap: var(--space-4); }
.networking-readonly-badge,.networking-phase-badge{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:.35rem .7rem;color:var(--color-info);font-size:var(--font-size-meta);font-weight:760;background:rgba(77,184,255,.08);border:1px solid rgba(77,184,255,.28);border-radius:var(--radius-pill);white-space:nowrap}
.networking-topology{display:flex;min-height:24rem;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:clamp(1rem,3vw,2rem);background:var(--color-surface-inset);border:1px solid var(--color-border-soft);border-radius:var(--radius-md)}
.networking-loading,.networking-framework-note,.networking-updated{color:var(--color-text-muted);font-size:var(--font-size-small)}
.networking-topology-label{color:var(--color-text-dim);font-size:var(--font-size-meta);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.networking-wan-row{display:grid;width:min(44rem,100%);grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.networking-node{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:0;min-height:3.75rem;padding:var(--space-3) var(--space-4);color:var(--color-text-strong);text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.networking-node-router,.networking-node-mesh{width:min(22rem,100%)}
.networking-node-dot{width:.58rem;height:.58rem;flex:none;background:var(--color-text-muted);border-radius:50%}
.networking-node.is-online .networking-node-dot{background:var(--color-success)} .networking-node.is-offline .networking-node-dot{background:var(--color-danger)} .networking-node.is-warning .networking-node-dot{background:var(--color-warning)} .networking-node.is-configured .networking-node-dot{background:var(--color-info)}
.networking-connector-merge{position:relative;width:min(34rem,76%);height:2.5rem;border-bottom:1px solid var(--color-border)}
.networking-connector-merge::after{position:absolute;bottom:-2.5rem;left:50%;width:1px;height:2.5rem;content:"";background:var(--color-border)}
.networking-connector-merge span{position:absolute;bottom:0;width:1px;height:2.5rem;background:var(--color-border)} .networking-connector-merge span:nth-child(1){left:8%}.networking-connector-merge span:nth-child(2){left:50%}.networking-connector-merge span:nth-child(3){right:8%}
.networking-connector-vertical{width:1px;height:2rem;background:var(--color-border)}
.networking-topology-groups{display:grid;width:min(38rem,100%);grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-2)}
.networking-topology-groups span{padding:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-small);font-weight:720;text-align:center;border-top:1px solid var(--color-border-soft)}
.networking-health-section{display:flex;flex-direction:column;gap:var(--space-3)}
.networking-summary-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}
.networking-summary-card{min-width:0;margin:0;text-align:center}.networking-summary-card span{display:block;color:var(--color-text-muted);font-size:var(--font-size-small);font-weight:680}.networking-summary-card strong{display:block;margin:var(--space-2) 0 var(--space-1);color:var(--color-text-strong);font-size:clamp(1.75rem,3vw,2.25rem);font-variant-numeric:tabular-nums}.networking-summary-card small{color:var(--color-text-dim);font-size:var(--font-size-meta)}
.networking-summary-card.has-warning{border-color:rgba(255,209,102,.55)}.networking-summary-card.has-warning strong{color:var(--color-warning)}.networking-summary-card.has-critical{border-color:rgba(255,92,92,.6)}.networking-summary-card.has-critical strong{color:var(--color-danger)}
.networking-placeholder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.networking-placeholder-card{display:flex;min-height:10rem;flex-direction:column;align-items:flex-start;margin:0}.networking-placeholder-card p{flex:1;margin:0 0 var(--space-4);color:var(--color-text-muted);line-height:1.6}
@media(max-width:1000px){.networking-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.networking-wan-row,.networking-topology-groups,.networking-summary-grid,.networking-placeholder-grid{grid-template-columns:1fr}.networking-connector-merge{width:1px;height:2rem;border:0;background:var(--color-border)}.networking-connector-merge::after,.networking-connector-merge span{display:none}.networking-topology-groups span{border-top:0;border-left:1px solid var(--color-border-soft)}.networking-readonly-badge{align-self:stretch}}

/* RC-001 v2.1.0 RC2 Sprint 2 — Infrastructure and Security */
.networking-device-section{display:flex;flex-direction:column;gap:var(--space-3)}
.networking-device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.networking-device-card{min-width:0;margin:0}
.networking-device-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.networking-device-head>div{display:flex;min-width:0;flex-direction:column;gap:.15rem}
.networking-device-head strong{overflow:hidden;color:var(--color-text-strong);text-overflow:ellipsis;white-space:nowrap}
.networking-device-head small{color:var(--color-text-muted);font-size:var(--font-size-meta)}
.networking-device-status-dot{width:.68rem;height:.68rem;flex:none;background:var(--color-text-muted);border-radius:50%}
.networking-device-card.is-online .networking-device-status-dot{background:var(--color-success)}
.networking-device-card.is-offline .networking-device-status-dot{background:var(--color-danger)}
.networking-device-card.is-warning .networking-device-status-dot{background:var(--color-warning)}
.networking-device-card.is-configured .networking-device-status-dot{background:var(--color-info)}
.networking-device-card.is-offline{border-color:rgba(255,92,92,.55)}
.networking-device-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.networking-device-fact{display:flex;min-width:0;flex-direction:column;gap:.15rem;padding:var(--space-2);background:var(--color-surface-inset);border:1px solid var(--color-border-soft);border-radius:var(--radius-sm)}
.networking-device-fact span{color:var(--color-text-dim);font-size:var(--font-size-meta)}
.networking-device-fact strong{overflow-wrap:anywhere;color:var(--color-text-strong);font-size:var(--font-size-small)}
.networking-device-notes{margin:var(--space-3) 0 0;color:var(--color-text-muted);font-size:var(--font-size-small);line-height:1.5}
.networking-device-issues{margin-top:var(--space-3);padding:var(--space-2);color:var(--color-danger);font-size:var(--font-size-small);background:rgba(255,92,92,.07);border:1px solid rgba(255,92,92,.25);border-radius:var(--radius-sm)}
@media(max-width:1000px){.networking-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.networking-device-grid{grid-template-columns:1fr}}

/* RC-001 v2.1.0 RC2 Sprint 3 — Device discovery and inventory */
.networking-category-summary{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.networking-category-summary>span{display:inline-flex;gap:.35rem;padding:.35rem .6rem;color:var(--color-text-muted);font-size:var(--font-size-meta);background:var(--color-surface-inset);border:1px solid var(--color-border-soft);border-radius:var(--radius-pill)}
.networking-category-summary strong{color:var(--color-text-strong)}
.networking-device-head .networking-new-badge{margin-left:auto}
.networking-new-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:.45rem;padding:.18rem .42rem;color:var(--color-warning);font-size:.62rem;font-weight:850;letter-spacing:.08em;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.35);border-radius:var(--radius-pill)}
.networking-device-category-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}
.networking-device-category-row small{color:var(--color-text-dim);font-size:var(--font-size-meta);text-transform:capitalize}
.networking-category-badge{display:inline-flex;align-items:center;padding:.25rem .5rem;color:var(--color-text-muted);font-size:var(--font-size-meta);font-weight:750;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.24);border-radius:var(--radius-pill)}
.networking-category-badge.is-infrastructure{color:var(--color-info);background:rgba(77,184,255,.08);border-color:rgba(77,184,255,.28)}
.networking-category-badge.is-security{color:var(--color-special);background:rgba(199,125,255,.08);border-color:rgba(199,125,255,.28)}
.networking-category-badge.is-entertainment{color:var(--color-attention);background:rgba(255,159,67,.08);border-color:rgba(255,159,67,.28)}
.networking-category-badge.is-computers,.networking-category-badge.is-mobile{color:var(--color-success);background:rgba(125,255,155,.08);border-color:rgba(125,255,155,.28)}
.networking-category-badge.is-iot{color:var(--color-warning);background:rgba(255,209,102,.08);border-color:rgba(255,209,102,.28)}
.networking-category-badge.is-unknown{color:var(--color-warning);background:rgba(255,209,102,.08);border-color:rgba(255,209,102,.4)}
.networking-inventory-section{margin:0}
.networking-table-wrap{width:100%;overflow-x:auto}
.networking-inventory-table{width:100%;border-collapse:collapse}
.networking-inventory-table th,.networking-inventory-table td{padding:.8rem .7rem;text-align:left;border-bottom:1px solid var(--color-divider);vertical-align:middle}
.networking-inventory-table th{color:var(--color-text-dim);font-size:var(--font-size-meta);font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.networking-inventory-table td{color:var(--color-text);font-size:var(--font-size-small)}
.networking-inventory-table td:first-child strong{display:inline}
.networking-inventory-table td:first-child small{display:block;margin-top:.18rem;color:var(--color-text-dim)}
.networking-inventory-table code{color:var(--color-text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;white-space:nowrap}
.networking-inventory-table tr.is-new{background:rgba(255,209,102,.025)}
.networking-table-status{display:inline-flex;align-items:center;gap:.35rem;font-weight:750}
.networking-table-status::before{width:.48rem;height:.48rem;content:"";background:var(--color-text-muted);border-radius:50%}
.networking-table-status.is-online::before{background:var(--color-success)}
.networking-table-status.is-offline::before{background:var(--color-danger)}
@media(max-width:680px){.networking-inventory-table th:nth-child(3),.networking-inventory-table td:nth-child(3){display:none}}

/* RC-001 v2.1.0 RC2 Sprint 4 — Search, filters, sorting, registry */
.networking-inventory-controls{display:grid;grid-template-columns:minmax(14rem,2fr) repeat(3,minmax(9rem,1fr)) auto;gap:var(--space-2);margin-bottom:var(--space-4)}
.networking-control-group{display:flex;min-width:0;flex-direction:column;gap:.35rem;color:var(--color-text-muted);font-size:var(--font-size-meta);font-weight:700}
.networking-control-group input,.networking-control-group select,.networking-control-group textarea{width:100%;min-width:0;min-height:2.55rem;padding:.55rem .7rem;color:var(--color-text);background:var(--color-surface-inset);border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.networking-clear-button{align-self:end;min-height:2.55rem}.networking-sort-button{display:inline-flex;min-height:auto;padding:0;color:inherit;background:transparent;border:0}.networking-sort-button:hover{color:var(--color-text-strong);background:transparent;transform:none}.networking-registry-button{min-height:2rem;padding:.35rem .55rem;color:var(--color-info);font-size:var(--font-size-meta);background:rgba(77,184,255,.07);border-color:rgba(77,184,255,.28)}
.networking-registry-dialog{width:min(34rem,calc(100% - 2rem));padding:0;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.networking-registry-dialog::backdrop{background:rgba(0,0,0,.68)}.networking-registry-dialog-inner{padding:var(--space-5)}.networking-registry-dialog-header{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}.networking-registry-dialog-header h3{margin:0;color:var(--color-text-strong)}.networking-registry-dialog-header p{margin:.35rem 0 0;color:var(--color-text-muted);font-size:var(--font-size-small)}.networking-registry-fields{display:grid;gap:var(--space-3)}.networking-registry-fields textarea{min-height:6rem;resize:vertical}.networking-registry-actions{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-4)}.networking-registry-actions>div{display:flex;gap:var(--space-2)}.networking-registry-delete{color:var(--color-danger);border-color:rgba(255,92,92,.4)}.networking-registry-feedback{min-height:1.25rem;margin-top:var(--space-3);color:var(--color-warning);font-size:var(--font-size-small)}
@media(max-width:1000px){.networking-inventory-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.networking-clear-button{align-self:stretch}}
@media(max-width:680px){.networking-inventory-controls{grid-template-columns:1fr}.networking-registry-actions{flex-direction:column}.networking-registry-actions>div{display:grid;grid-template-columns:1fr 1fr}.networking-registry-actions button{width:100%}.networking-inventory-table th:nth-child(5),.networking-inventory-table td:nth-child(5){display:none}}

/* RC-001 v2.1.0 RC2 Sprint 5.1-5.2 — Topology engine and infrastructure intelligence */
.networking-rich-node{display:flex;min-width:0;flex-direction:column;gap:var(--space-3);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.networking-rich-node-head{display:flex;align-items:center;gap:var(--space-2)}
.networking-rich-node-head>div{display:flex;min-width:0;flex-direction:column;gap:.15rem}
.networking-rich-node-head strong{overflow:hidden;color:var(--color-text-strong);text-overflow:ellipsis;white-space:nowrap}
.networking-rich-node-head small{color:var(--color-text-muted);font-size:var(--font-size-meta)}
.networking-rich-node.is-online .networking-device-status-dot{background:var(--color-success)}
.networking-rich-node.is-offline .networking-device-status-dot{background:var(--color-danger)}
.networking-rich-node.is-warning .networking-device-status-dot{background:var(--color-warning)}
.networking-rich-node.is-critical .networking-device-status-dot{background:var(--color-danger)}
.networking-rich-node.is-configured .networking-device-status-dot{background:var(--color-info)}
.networking-rich-node-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.networking-rich-node-metrics span{display:flex;min-width:0;flex-direction:column;gap:.15rem;padding:.45rem;background:var(--color-surface-inset);border:1px solid var(--color-border-soft);border-radius:var(--radius-sm)}
.networking-rich-node-metrics small{overflow:hidden;color:var(--color-text-dim);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}
.networking-rich-node-metrics strong{color:var(--color-text-strong);font-size:var(--font-size-small)}
.networking-topology-branch-grid{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-3)}
.networking-topology-branch-grid>section{display:flex;min-width:0;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:rgba(255,255,255,.015);border:1px solid var(--color-border-soft);border-radius:var(--radius-md)}
.networking-topology-branch-grid h3{margin:0;color:var(--color-text-muted);font-size:var(--font-size-small);text-align:center}
.networking-topology-child-list,.networking-topology-category-list{display:grid;gap:var(--space-2)}
.networking-topology-child-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.networking-topology-category-list{margin-top:var(--space-2)}
.networking-intelligent-card .networking-device-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.networking-topology-branch-grid{grid-template-columns:1fr}.networking-topology-child-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.networking-rich-node-metrics,.networking-topology-child-list{grid-template-columns:1fr}.networking-intelligent-card .networking-device-facts{grid-template-columns:1fr}}


/* RC-001 v2.1.0 RC2 Sprint 5 — device drawer and live status motion */
.networking-device-selectable,.networking-inventory-device-row{cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.networking-device-selectable:hover,.networking-device-selectable:focus-visible{transform:translateY(-2px);border-color:rgba(77,184,255,.5);box-shadow:0 12px 28px rgba(0,0,0,.24);outline:none}
.networking-inventory-device-row:hover,.networking-inventory-device-row:focus-visible{background:rgba(77,184,255,.055);outline:1px solid rgba(77,184,255,.35);outline-offset:-1px}
.networking-device-card.is-online .networking-device-status-dot,.networking-rich-node.is-online .networking-device-status-dot,.networking-table-status.is-online::before{animation:networking-status-pulse 2.4s ease-in-out infinite;box-shadow:0 0 0 0 rgba(125,255,155,.4)}
.networking-status-changed{animation:networking-status-change .8s ease both}
@keyframes networking-status-pulse{0%,100%{box-shadow:0 0 0 0 rgba(125,255,155,.32)}50%{box-shadow:0 0 0 .38rem rgba(125,255,155,0)}}
@keyframes networking-status-change{0%{filter:brightness(1)}35%{filter:brightness(1.55)}100%{filter:brightness(1)}}
.networking-device-drawer{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none}
.networking-device-drawer.is-open{visibility:visible;pointer-events:auto}
.networking-drawer-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;background:rgba(0,0,0,.62);border:0;border-radius:0;opacity:0;transition:opacity .22s ease}
.networking-device-drawer.is-open .networking-drawer-backdrop{opacity:1}
.networking-drawer-panel{position:absolute;top:0;right:0;width:min(30rem,92vw);height:100%;overflow-y:auto;padding:var(--space-5);background:var(--color-surface);border-left:1px solid var(--color-border);box-shadow:-20px 0 50px rgba(0,0,0,.35);transform:translateX(102%);transition:transform .26s cubic-bezier(.22,.8,.25,1)}
.networking-device-drawer.is-open .networking-drawer-panel{transform:translateX(0)}
.networking-drawer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}
.networking-drawer-header h3{margin:.25rem 0;color:var(--color-text-strong);font-size:1.45rem}.networking-drawer-header p{margin:0;color:var(--color-text-muted)}
.networking-drawer-close{width:2.4rem;height:2.4rem;min-height:0;padding:0;font-size:1.6rem;line-height:1}
.networking-drawer-status{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.65rem;margin:var(--space-4) 0;padding:var(--space-3);background:var(--color-surface-inset);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.networking-drawer-status small{grid-column:2;color:var(--color-text-muted)}.networking-live-orb{grid-row:1/3;width:.8rem;height:.8rem;background:var(--color-text-muted);border-radius:50%}
.networking-drawer-status.is-online .networking-live-orb{background:var(--color-success);animation:networking-status-pulse 2s ease-in-out infinite}.networking-drawer-status.is-offline .networking-live-orb,.networking-drawer-status.is-critical .networking-live-orb{background:var(--color-danger)}.networking-drawer-status.is-warning .networking-live-orb{background:var(--color-warning)}
.networking-drawer-facts,.networking-drawer-metrics>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.networking-drawer-facts>div,.networking-drawer-metrics>div>div{display:flex;min-width:0;flex-direction:column;gap:.25rem;padding:.75rem;background:var(--color-surface-inset);border:1px solid var(--color-border-soft);border-radius:var(--radius-sm)}
.networking-drawer-facts span,.networking-drawer-metrics span{color:var(--color-text-dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}.networking-drawer-facts strong,.networking-drawer-metrics strong{overflow-wrap:anywhere;color:var(--color-text-strong)}
.networking-drawer-metrics h4{margin:var(--space-5) 0 var(--space-2)}.networking-drawer-notes{padding:var(--space-3);color:var(--color-text-muted);background:rgba(77,184,255,.04);border-left:3px solid var(--color-info)}.networking-drawer-actions{display:flex;justify-content:flex-end;margin-top:var(--space-4)}
body.networking-drawer-open{overflow:hidden}
@media(max-width:600px){.networking-drawer-facts,.networking-drawer-metrics>div{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.networking-device-selectable,.networking-drawer-backdrop,.networking-drawer-panel{transition:none}.networking-device-status-dot,.networking-live-orb,.networking-status-changed{animation:none!important}}

/* RC-001 Networking — collapsible page sections */
.networking-collapsible{padding:0;overflow:hidden}
.networking-collapsible-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);cursor:pointer;list-style:none;user-select:none;transition:background-color .18s ease}
.networking-collapsible-summary::-webkit-details-marker{display:none}
.networking-collapsible-summary:hover{background:rgba(77,184,255,.035)}
.networking-collapsible-summary:focus-visible{outline:2px solid rgba(77,184,255,.55);outline-offset:-2px}
.networking-collapsible-summary>span:first-child{display:flex;min-width:0;flex-direction:column;gap:.25rem}
.networking-collapsible-summary strong{color:var(--color-text-strong);font-size:var(--font-size-section-title)}
.networking-collapsible-summary small{color:var(--color-text-muted);font-size:var(--font-size-small);font-weight:400}
.networking-summary-actions{display:flex;align-items:center;gap:var(--space-3);flex:0 0 auto}
.networking-chevron{width:.7rem;height:.7rem;border-right:2px solid var(--color-text-muted);border-bottom:2px solid var(--color-text-muted);transform:rotate(45deg);transition:transform .2s ease}
.networking-collapsible[open] .networking-chevron{transform:rotate(225deg)}
.networking-collapsible-content{padding:0 var(--space-5) var(--space-5);border-top:1px solid var(--color-border-soft)}
.networking-collapsible-content>.networking-topology,.networking-collapsible-content>.networking-device-grid,.networking-collapsible-content>.networking-category-summary{margin-top:var(--space-4)}
@media(max-width:680px){.networking-collapsible-summary{align-items:flex-start;padding:var(--space-4)}.networking-collapsible-content{padding:0 var(--space-4) var(--space-4)}.networking-summary-actions{gap:var(--space-2)}}
@media(prefers-reduced-motion:reduce){.networking-collapsible-summary,.networking-chevron{transition:none}}