:root {
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --muted: rgba(255,255,255,0.58);
    --green: #58ffb1;
    --blue: #52b7ff;
    --orange: #ffae58;
    --red: #ff4d6d;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
    background: #070913;
    color: #fff;
    overflow-x: hidden;
}

.blob-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(circle at top, #162033, #05060b 70%);
}

.blob {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .45;
    animation: float 13s ease-in-out infinite;
}

.blob-a {
    background: #1de9b6;
    top: -120px;
    left: -80px;
}

.blob-b {
    background: #5f6cff;
    right: -140px;
    top: 20%;
    animation-delay: -4s;
}

.blob-c {
    background: #ff7a3d;
    left: 35%;
    bottom: -220px;
    animation-delay: -7s;
}

@keyframes float {
    50% {
        transform: translate3d(60px, -35px, 0) scale(1.15);
    }
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: min(1440px, 96vw);
    margin: 0 auto;
    padding: 24px 0 0;
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    color: #ffffff;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.brand {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .12em;
}

.link-button {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.muted {
    color: var(--muted);
}

.eyebrow {
    display: block;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .16em;
    margin-bottom: 8px;
}

code {
    color: #b5f3ff;
}

.dashboard {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.provision-card {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
}

.add-device-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

input, select {
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 12px 14px;
    outline: none;
}

    input:focus {
        border-color: rgba(82,183,255,.65);
        box-shadow: 0 0 0 3px rgba(82,183,255,.12);
    }

.primary-btn, .secondary-btn, .mode-btn {
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(82,183,255,.9), rgba(88,255,177,.65));
}

.secondary-btn, .mode-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
}

.toast {
    padding: 12px 14px;
    border-radius: 12px;
}

    .toast.success {
        background: rgba(88,255,177,.12);
        border: 1px solid rgba(88,255,177,.32);
    }

    .toast.error, .validation {
        color: #ff9bad;
    }

.status-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.mode {
    margin: 0;
    font-size: clamp(28px, 5vw, 58px);
    line-height: 1;
    text-shadow: 0 0 26px currentColor;
}

    .mode.automatic {
        color: var(--green);
    }

    .mode.eco {
        color: var(--blue);
    }

    .mode.manual {
        color: var(--orange);
    }

.net-states {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chip {
    display: inline-flex;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--muted);
    border: 1px solid rgba(255,255,255,.1);
}

    .chip.ok {
        color: var(--green);
    }

    .chip.wait {
        color: var(--orange);
    }

    .chip.bad {
        color: var(--red);
    }

.grid-main {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
}

.iaq-node {
    padding: 26px;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-xl {
    font-size: clamp(64px, 12vw, 132px);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .9;
}

    .metric-xl small {
        font-size: .22em;
        letter-spacing: 0;
        color: var(--muted);
    }

.sub-metrics {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 17px;
}

    .sub-metrics strong {
        color: #fff;
    }

.quality {
    margin-top: 22px;
    padding: 12px 14px;
    border-radius: 14px;
    width: fit-content;
    font-weight: 800;
}

    .quality.excellent {
        background: rgba(88,255,177,.12);
        color: var(--green);
    }

    .quality.fair {
        background: rgba(255,174,88,.15);
        color: var(--orange);
    }

    .quality.poor {
        background: rgba(255,77,109,.14);
        color: var(--red);
        animation: pulse 1.2s infinite;
    }

    .quality.unknown {
        background: rgba(148,163,184,.16);
        color: #cbd5e1;
        border: 1px solid rgba(148,163,184,.24);
    }

.countdown {
    margin-top: 18px;
    color: var(--orange);
    font-weight: 800;
}

.hidden {
    display: none !important;
}

.zone-matrix, .controls-panel, .chart-panel, .settings-panel, .ai-panel {
    padding: 20px;
}

.zones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

    .zones div {
        padding: 18px;
        border-radius: 14px;
        background: rgba(255,255,255,.06);
    }

    .zones small {
        display: block;
        color: var(--muted);
        margin-bottom: 10px;
    }

    .zones strong {
        font-size: 24px;
    }

.controls-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.toggle-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

    .toggle-row input {
        display: none;
    }

.switch {
    width: 58px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    position: relative;
    transition: .22s;
    border: 1px solid rgba(255,255,255,.12);
}

    .switch::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        left: 4px;
        top: 3px;
        background: #fff;
        transition: .22s;
    }

.toggle-row input:checked + .switch {
    background: rgba(88,255,177,.42);
    box-shadow: 0 0 24px rgba(88,255,177,.22);
}

    .toggle-row input:checked + .switch::after {
        transform: translateX(25px);
    }

.toggle-row.disabled {
    opacity: .38;
    pointer-events: none;
}

.mode-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.critical-banner {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,77,109,.22);
    color: #fff;
    border: 1px solid rgba(255,77,109,.45);
    font-weight: 900;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 30px rgba(255,77,109,.35);
        transform: scale(1.01);
    }
}

.chart-panel, .settings-panel, .ai-panel {
    min-height: 280px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin: 12px 0;
}

    .settings-grid label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: var(--muted);
    }

.chat-log {
    height: 168px;
    overflow: auto;
    background: rgba(0,0,0,.18);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-bubble {
    padding: 10px 12px;
    border-radius: 14px;
    max-width: 88%;
}

    .chat-bubble.user {
        align-self: flex-end;
        background: rgba(82,183,255,.18);
    }

    .chat-bubble.ai {
        align-self: flex-start;
        background: rgba(255,255,255,.08);
    }

.chat-input {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

    .chat-input input {
        flex: 1;
    }

.duration-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.45);
    z-index: 10;
}

.duration-box {
    padding: 24px;
    width: min(420px, 92vw);
}

.duration-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .duration-chips button {
        padding: 12px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.08);
        color: #fff;
        cursor: pointer;
    }

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(430px, 94vw);
    padding: 34px;
}

    .login-card h1 {
        margin: 10px 0 4px;
    }

    .login-card label {
        display: block;
        margin-top: 16px;
        color: var(--muted);
    }

    .login-card input:not([type=checkbox]) {
        width: 100%;
        margin-top: 8px;
    }

/* Thay đổi ở đây: Bỏ style cũ, biến thành container cho ảnh */
.login-logo {
    display: block;
    margin-bottom: 12px;
}

    .login-logo img {
        max-height: 64px;
        width: auto;
        object-fit: contain;
    }

.remember-row {
    display: flex !important;
    gap: 10px;
    align-items: center;
}

.login-card .primary-btn {
    width: 100%;
    margin-top: 20px;
}

.hint {
    color: rgba(255,255,255,.36);
    font-size: 12px;
}

.login-copyright {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-top: 20px;
    text-align: center;
}

.dashboard-footer {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    width: 100%;
    margin-top: auto;
}

.empty-state {
    padding: 32px;
    text-align: center;
}

@media (max-width: 980px) {
    .provision-card, .status-header, .grid-main {
        grid-template-columns: 1fr;
    }

    .status-header {
        align-items: flex-start;
    }

    .net-states {
        justify-content: flex-start;
    }

    .zones {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   BMS VECTOR ICON SYSTEM - Bootstrap Icons Integration
   ========================================================= */

.icon-label-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bms-icon {
    font-size: 1.1rem;
    line-height: 1;
    vertical-align: middle;
    transition: all 0.3s ease;
}

.icon-green {
    color: var(--green);
    text-shadow: 0 0 12px rgba(88,255,177,.45);
}

.icon-blue {
    color: var(--blue);
    text-shadow: 0 0 12px rgba(82,183,255,.45);
}

.icon-orange {
    color: var(--orange);
    text-shadow: 0 0 12px rgba(255,174,88,.45);
}

.icon-red {
    color: var(--red);
    text-shadow: 0 0 12px rgba(255,77,109,.45);
}

.icon-muted {
    color: var(--muted);
}

/* Fan spinning effect */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spin-active {
    animation: spin 2.5s linear infinite;
}

/* Better alignment for metric icon groups */
.metric-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Make control labels look industrial and aligned */
.control-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Optional subtle hover glow */
.toggle-row:hover .bms-icon,
.mode-btn:hover .bms-icon,
.primary-btn:hover .bms-icon,
.secondary-btn:hover .bms-icon {
    filter: drop-shadow(0 0 8px currentColor);
}
/* =========================================================
   THRESHOLD SETTINGS 2-TAB PANEL
   Parameter Setup + System Configuration Profile
   ========================================================= */

.settings-tabs-header {
    margin-bottom: 18px;
}

.threshold-tabs-nav {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
}

.threshold-tab-btn {
    flex: 1;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 10px;
    padding: 10px 12px;
    background: transparent;
    color: #64748b;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.25s ease;
}

    .threshold-tab-btn:hover {
        color: #cbd5e1;
        background: rgba(255, 255, 255, 0.04);
    }

    .threshold-tab-btn.active {
        background: rgba(255, 255, 255, 0.08);
        color: #00f2fe;
        box-shadow: inset 0 0 0 1px rgba(0, 242, 254, 0.18), 0 0 18px rgba(0, 242, 254, 0.12);
    }

        .threshold-tab-btn.active .bms-icon {
            color: #00f2fe;
            text-shadow: 0 0 12px rgba(0, 242, 254, 0.55);
        }

.bms-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.25s ease;
}

    .bms-tab-content.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

/* Parameter Setup matrix */
.threshold-input-matrix {
    margin-top: 14px;
}

    .threshold-input-matrix label {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 12px;
        transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

        .threshold-input-matrix label:focus-within {
            border-color: rgba(0, 242, 254, 0.55);
            box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.08);
            background: rgba(255, 255, 255, 0.045);
        }

    .threshold-input-matrix input {
        margin-top: 8px;
    }

.apply-settings-btn {
    margin-top: 12px;
    min-width: 170px;
}

/* System Profile tab */
.profile-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.live-sync-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #58ffb1;
    box-shadow: 0 0 0 rgba(88, 255, 177, 0.7);
    animation: livePulse 1.6s ease-out infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(88, 255, 177, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(88, 255, 177, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(88, 255, 177, 0);
    }
}

.profile-map {
    display: grid;
    gap: 10px;
}

.profile-row {
    display: grid;
    gap: 5px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.profile-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    font-weight: 750;
}

.profile-value {
    color: #f1f5f9;
    font-weight: 700;
    font-size: 14px;
}

.neon-value {
    color: #00f2fe;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.36);
}

.mono-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    color: #cbd5e1;
}
/* =========================================================
   WEB ASSISTANT PANEL - EXPAND CHAT AREA
   ========================================================= */

.ai-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

    .ai-panel .eyebrow {
        flex: 0 0 auto;
    }

.chat-log {
    flex: 0 0 230px;
    min-height: 230px;
    max-height: 230px;
    overflow-y: auto;
    margin-top: 14px;
    margin-bottom: 14px;
}

.chat-input {
    flex: 0 0 auto;
    margin-top: 10px;
}

/* =========================================================
   FINAL MOBILE UI V3 - CLEAN STABLE
   Keep this block at the very end of site.css.
   This block replaces all previous mobile/color/add-device patches.
   ========================================================= */

/* Desktop defaults */
.mobile-app-home,
.mobile-bottom-nav,
.mobile-chat-overlay,
.chat-mobile-intro,
.mobile-chat-fab,
.chat-sheet-close {
    display: none;
}

.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Add Device modal defaults */
.mobile-add-device-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(4, 10, 20, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.mobile-add-device-modal {
    position: fixed;
    inset: 0;
    z-index: 2201;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

    .mobile-add-device-backdrop.show,
    .mobile-add-device-modal.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.mobile-add-device-card {
    width: min(100%, 410px);
    border-radius: 26px;
    padding: 18px;
    color: #eaf4ff;
    background: radial-gradient(circle at top left, rgba(88, 255, 177, .16), transparent 36%), radial-gradient(circle at top right, rgba(82, 183, 255, .18), transparent 38%), rgba(17, 25, 42, .96);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .38);
}

.mobile-add-device-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.mobile-add-device-kicker {
    display: block;
    color: #8fffd0;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.mobile-add-device-head h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 20px;
    font-weight: 850;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-add-device-close {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #dbeafe;
    cursor: pointer;
}

.mobile-add-device-note {
    margin: 0 0 14px;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.45;
}

.mobile-add-device-form {
    display: grid;
    gap: 12px;
}

    .mobile-add-device-form label span {
        display: block;
        margin-bottom: 7px;
        color: #dbeafe;
        font-size: 13px;
        font-weight: 750;
    }

    .mobile-add-device-form input {
        width: 100%;
        min-height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.13);
        background: rgba(255,255,255,.065);
        color: #fff;
        padding: 0 14px;
        outline: none;
    }

        .mobile-add-device-form input::placeholder {
            color: rgba(226, 232, 240, .55);
        }

.mobile-add-device-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.mobile-add-device-cancel,
.mobile-add-device-submit {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.13);
    font-weight: 800;
    cursor: pointer;
}

.mobile-add-device-cancel {
    background: rgba(255,255,255,.06);
    color: #e2e8f0;
}

.mobile-add-device-submit {
    background: linear-gradient(135deg, rgba(88,255,177,.36), rgba(0,242,254,.26));
    color: #f8fffd;
}

body.modal-open {
    overflow: hidden;
}

/* Desktop settings: classic tab layout + readable text */
.settings-panel {
    display: block;
    width: 100%;
    overflow-x: hidden;
}

    .settings-panel .settings-main-title,
    .settings-panel .eyebrow {
        display: inline-flex;
        margin-bottom: 12px;
        color: #dbeafe;
    }

    .settings-panel .settings-tabs-header {
        width: 100%;
        margin-bottom: 12px;
    }

    .settings-panel .threshold-tabs-nav {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0;
        margin: 0 0 14px 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .settings-panel .threshold-tab-btn {
        width: 100%;
        min-height: 44px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        background: rgba(255, 255, 255, 0.045);
        color: #aebbd0;
        font-weight: 850;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: none;
    }

        .settings-panel .threshold-tab-btn .icon-label-group {
            width: 100%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }

        .settings-panel .threshold-tab-btn:hover {
            color: #e2e8f0;
            background: rgba(255, 255, 255, 0.065);
        }

        .settings-panel .threshold-tab-btn.active {
            color: #7df9ff;
            background: rgba(0, 242, 254, 0.09);
            border-color: rgba(0, 242, 254, 0.28);
            box-shadow: 0 0 18px rgba(0, 242, 254, 0.13);
        }

            .settings-panel .threshold-tab-btn.active .bms-icon {
                color: #00f2fe;
                text-shadow: 0 0 12px rgba(0, 242, 254, 0.45);
            }

    .settings-panel .bms-tab-content {
        display: none;
        opacity: 0;
        transform: translateY(4px);
        transition: all 0.25s ease;
    }

        .settings-panel .bms-tab-content.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

    .settings-panel .settings-tab-card,
    .settings-panel .bms-tab-content {
        width: 100%;
    }

    .settings-panel .settings-tab-card {
        border-radius: 20px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.075);
        overflow: hidden;
    }

    .settings-panel .settings-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

        .settings-panel .settings-card-head h3 {
            margin: 0;
            color: #f8fafc;
            font-size: 15px;
            font-weight: 850;
        }

        .settings-panel .settings-card-head p {
            margin: 5px 0 0;
            color: #b6c3d1;
            font-size: 12px;
            line-height: 1.35;
            font-weight: 650;
        }

    .settings-panel .threshold-input-matrix {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

        .settings-panel .threshold-input-matrix label {
            min-height: auto;
            padding: 10px;
            border-radius: 14px;
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.055);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

            .settings-panel .threshold-input-matrix label:focus-within {
                border-color: rgba(0, 242, 254, 0.55);
                box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.08);
                background: rgba(255, 255, 255, 0.065);
            }

            .settings-panel .threshold-input-matrix label .icon-label-group {
                gap: 5px;
                font-size: 11px;
                color: #d4e0ef;
                font-weight: 750;
            }

            .settings-panel .threshold-input-matrix label .bms-icon {
                color: #9fdcff;
                font-size: 0.9rem;
                opacity: 1;
            }

        .settings-panel .threshold-input-matrix input {
            width: 100%;
            height: 38px;
            margin-top: 7px;
            padding: 0 10px;
            border-radius: 11px;
            font-size: 13px;
        }

    .settings-panel .apply-settings-btn {
        width: 100%;
        margin-top: 12px;
        min-height: 44px;
        justify-content: center;
    }

    .settings-panel .validation {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.4;
    }

    .settings-panel .profile-map {
        display: grid;
        gap: 8px;
    }

    .settings-panel .profile-row {
        padding: 10px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.055);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .settings-panel .profile-key {
        color: #b8c7dc;
        font-size: 9px;
        letter-spacing: 0.07em;
        font-weight: 850;
    }

        .settings-panel .profile-key .bms-icon {
            color: #9fdcff;
            opacity: 1;
        }

    .settings-panel .profile-value {
        color: #ffffff;
        font-size: 12.5px;
        line-height: 1.35;
        word-break: break-word;
        font-weight: 850;
    }

    .settings-panel .mono-value {
        color: #e2e8f0;
    }

/* Tablet / small laptop */
@media (max-width: 1100px) {
    .grid-main {
        grid-template-columns: 1fr;
    }

    .status-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .net-states {
        justify-content: flex-start;
    }

    .provision-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .add-device-form {
        width: 100%;
    }
}

/* Smartphone app layout */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        min-width: 0;
    }

    .app-shell {
        width: min(430px, 100vw);
        max-width: 430px;
        min-width: 0;
        margin: 0 auto;
        padding: 10px 10px 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        gap: 12px;
        padding: 0 0 122px;
        align-items: stretch;
        flex: 1 1 auto;
    }

    .top-nav {
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 18px;
        margin-bottom: 12px;
    }

    .brand {
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .provision-card,
    .status-header,
    .grid-main > .iaq-node {
        display: none !important;
    }

    .glass-card {
        border-radius: 20px;
    }

    /* Mobile page routing */
    .mobile-app-home.mobile-panel {
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

        .mobile-app-home.mobile-panel.mobile-active {
            display: block !important;
        }

    .grid-main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

        .grid-main > .mobile-panel {
            display: none !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            margin: 0 0 14px 0 !important;
            align-self: stretch !important;
        }

            .grid-main > .mobile-panel.mobile-active {
                display: block !important;
            }

        .grid-main > .settings-panel.mobile-panel {
            display: none !important;
        }

            .grid-main > .settings-panel.mobile-panel.mobile-active {
                display: block !important;
            }

    /* Full-width mobile home */
    .mobile-app-home > *,
    .mobile-home-top,
    .mobile-hero-card,
    .mobile-metric-grid,
    .mobile-device-cards {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-home-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin: 14px 0 12px;
    }

    .mobile-kicker {
        display: block;
        color: var(--muted);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-weight: 800;
        margin-bottom: 3px;
    }

    .mobile-home-top h2 {
        margin: 0;
        color: #f8fafc;
        font-size: 24px;
        font-weight: 850;
        letter-spacing: -0.03em;
    }

    .mobile-home-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto;
    }

    .mobile-add-device-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        border-radius: 12px;
        outline: none;
        display: inline-grid;
        place-items: center;
        cursor: pointer;
        background: linear-gradient(135deg, rgba(88,255,177,.20), rgba(0,242,254,.16));
        border: 1px solid rgba(255,255,255,.14);
        color: #e8fff5;
        box-shadow: 0 8px 20px rgba(0,0,0,.18);
        transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
        padding: 0;
    }

        .mobile-add-device-btn:hover {
            transform: translateY(-1px);
            background: linear-gradient(135deg, rgba(88,255,177,.30), rgba(0,242,254,.22));
        }

        .mobile-add-device-btn i {
            font-size: 15px;
            color: #8fffd0;
        }

    .mobile-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 32px;
        padding: 0 11px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.08);
        color: #cbd5e1;
        font-size: 12px;
        font-weight: 750;
        white-space: nowrap;
    }

    .mobile-live-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--green);
        box-shadow: 0 0 14px rgba(88,255,177,.7);
    }

        .mobile-live-dot.offline {
            background: var(--red);
            box-shadow: 0 0 14px rgba(255,77,109,.55);
        }

    .mobile-hero-card {
        border-radius: 28px;
        padding: 22px 20px;
        background: radial-gradient(circle at top right, rgba(82,183,255,.20), transparent 34%), radial-gradient(circle at bottom left, rgba(88,255,177,.16), transparent 38%), rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.09);
        box-shadow: 0 22px 55px rgba(0,0,0,.22);
    }

    .mobile-hero-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: 10px;
        font-weight: 850;
    }

        .mobile-hero-head strong {
            color: var(--green);
            text-shadow: 0 0 14px rgba(88,255,177,.35);
        }

    .mobile-air-quality {
        display: inline-flex;
        align-items: center;
        margin-top: 18px;
        padding: 8px 13px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 850;
        letter-spacing: .08em;
    }

        .mobile-air-quality.excellent {
            color: var(--green);
            background: rgba(88,255,177,.11);
            border: 1px solid rgba(88,255,177,.20);
        }

        .mobile-air-quality.fair {
            color: var(--orange);
            background: rgba(255,174,88,.12);
            border: 1px solid rgba(255,174,88,.20);
        }

        .mobile-air-quality.poor {
            color: var(--red);
            background: rgba(255,77,109,.13);
            border: 1px solid rgba(255,77,109,.23);
        }

        .mobile-air-quality.unknown {
            color: #cbd5e1;
            background: rgba(148,163,184,.13);
            border: 1px solid rgba(148,163,184,.18);
        }

    .mobile-temp-row {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin-top: 10px;
    }

        .mobile-temp-row strong {
            color: #fff;
            font-size: 64px;
            line-height: .95;
            font-weight: 900;
            letter-spacing: -0.08em;
        }

        .mobile-temp-row span {
            color: #cbd5e1;
            font-size: 22px;
            font-weight: 800;
            margin-top: 9px;
        }

    .mobile-device-token {
        margin-top: 14px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
    }

        .mobile-device-token strong {
            color: #e2e8f0;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

    .mobile-metric-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 12px;
    }

    .mobile-metric-card {
        min-height: 82px;
        border-radius: 22px;
        padding: 14px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.08);
    }

        .mobile-metric-card span {
            display: block;
            color: var(--muted);
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 10px;
        }

        .mobile-metric-card strong {
            color: #f8fafc;
            font-size: 17px;
            font-weight: 850;
        }

    .mobile-device-cards {
        display: grid;
        gap: 10px;
        margin-top: 12px;
    }

    .mobile-device-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 68px;
        border-radius: 22px;
        padding: 14px 16px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.08);
    }

        .mobile-device-card span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            font-weight: 760;
            margin-bottom: 4px;
        }

        .mobile-device-card strong {
            color: #e2e8f0;
            font-size: 15px;
            font-weight: 850;
        }

        .mobile-device-card.on strong,
        .mobile-device-card.on i {
            color: var(--green);
        }

        .mobile-device-card i {
            color: #94a3b8;
            font-size: 22px;
        }

    /* Control / Analytics / Settings pages */
    .controls-panel,
    .zone-matrix,
    .chart-panel,
    .settings-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    .controls-panel {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .toggle-list,
    .mode-buttons {
        width: 100%;
    }

    .toggle-row {
        min-height: 50px;
    }

    .mode-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mode-btn,
    .secondary-btn,
    .primary-btn,
    .threshold-tab-btn,
    .duration-chips button {
        min-height: 46px;
        touch-action: manipulation;
    }

    .zones {
        grid-template-columns: 1fr !important;
    }

    .chart-panel canvas {
        max-height: 180px;
    }

    /* Settings page */
    .settings-panel.mobile-panel.mobile-active {
        max-height: calc(100dvh - 135px);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px !important;
        padding-bottom: 96px !important;
        border-radius: 22px !important;
    }

    .settings-panel .settings-main-title {
        display: inline-flex !important;
        margin-bottom: 12px !important;
    }

    .settings-panel .threshold-tabs-nav {
        position: sticky;
        top: 0;
        z-index: 10;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 4px !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .settings-panel .threshold-tab-btn {
        min-height: 40px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        padding: 8px 6px !important;
        background: rgba(255,255,255,.06) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        color: #b8c7dc !important;
    }

        .settings-panel .threshold-tab-btn:hover {
            background: rgba(255,255,255,.095) !important;
            color: #e2e8f0 !important;
        }

        .settings-panel .threshold-tab-btn.active {
            color: #eaffff !important;
            background: linear-gradient(135deg, rgba(0,242,254,.18), rgba(88,255,177,.12)) !important;
            border-color: rgba(0,242,254,.34) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 20px rgba(0,242,254,.16) !important;
        }

            .settings-panel .threshold-tab-btn.active .bms-icon {
                color: #7df9ff !important;
                text-shadow: 0 0 12px rgba(0,242,254,.55) !important;
            }

    .settings-panel .settings-tab-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .settings-panel .settings-card-head h3 {
        font-size: 14px !important;
    }

    .settings-panel .settings-card-head p {
        font-size: 11px !important;
    }

    /* Bottom navigation */
    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 1800;
        max-width: 410px;
        margin: 0 auto;
        padding: 8px;
        border-radius: 24px;
        background: linear-gradient(135deg, rgba(38,64,82,.86), rgba(25,31,58,.86)) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(255,255,255,.16) !important;
        box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    .mobile-section-btn {
        min-height: 48px;
        border: 0;
        border-radius: 18px;
        background: rgba(255,255,255,.035) !important;
        color: #aebbd0 !important;
        display: grid;
        place-items: center;
        gap: 3px;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
    }

        .mobile-section-btn i {
            color: #9fb2ca !important;
            font-size: 18px;
        }

        .mobile-section-btn.active {
            color: #dfffee !important;
            background: linear-gradient(135deg, rgba(88,255,177,.22), rgba(82,183,255,.16)) !important;
            box-shadow: inset 0 0 0 1px rgba(88,255,177,.24), 0 0 18px rgba(88,255,177,.16) !important;
        }

            .mobile-section-btn.active i {
                color: var(--green) !important;
                text-shadow: 0 0 12px rgba(88,255,177,.55) !important;
            }

    /* Web Assistant bottom sheet */
    .mobile-chat-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1980;
        background: rgba(4,7,18,.58);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease;
    }

        .mobile-chat-overlay.chat-open {
            opacity: 1;
            pointer-events: auto;
        }

    .ai-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 72dvh;
        max-height: 88dvh;
        padding: 22px 20px 18px;
        border-radius: 30px 30px 0 0;
        background: radial-gradient(circle at top left, rgba(88,255,177,.14), transparent 34%), radial-gradient(circle at top right, rgba(82,183,255,.16), transparent 36%), rgba(12,17,30,.96);
        border: 1px solid rgba(255,255,255,.10);
        border-bottom: 0;
        box-shadow: 0 -26px 80px rgba(0,0,0,.55);
        transform: translateY(105%);
        opacity: 1;
        pointer-events: none;
        transition: transform .28s cubic-bezier(.2,.8,.2,1);
    }

        .ai-panel::before {
            content: "";
            width: 42px;
            height: 5px;
            border-radius: 999px;
            background: rgba(255,255,255,.28);
            align-self: center;
            margin-bottom: 16px;
        }

        .ai-panel.chat-open {
            transform: translateY(0);
            pointer-events: auto;
        }

    .ai-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .chat-sheet-close {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        color: #f1f5f9;
        cursor: pointer;
    }

    .chat-mobile-intro {
        display: block;
        margin-bottom: 14px;
    }

        .chat-mobile-intro h3 {
            margin: 0 0 8px;
            color: #f8fafc;
            font-size: 22px;
            font-weight: 850;
            letter-spacing: -0.02em;
        }

        .chat-mobile-intro p {
            margin: 0;
            color: #94a3b8;
            font-size: 13px;
            line-height: 1.45;
        }

    .chat-suggestions {
        display: grid;
        gap: 10px;
        margin-top: 18px;
    }

        .chat-suggestions button {
            min-height: 46px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(255,255,255,.055);
            color: #e2e8f0;
            font-weight: 760;
            text-align: center;
            cursor: pointer;
            padding: 0 14px;
        }

    .chat-log {
        flex: 1 1 auto;
        min-height: 160px;
        max-height: none;
        margin: 8px 0 14px;
        padding: 14px;
        overflow-y: auto;
        border-radius: 22px;
        background: rgba(4,7,18,.38);
        border: 1px solid rgba(255,255,255,.08);
    }

    .chat-input {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: auto;
        padding-top: 10px;
        background: linear-gradient(to top, rgba(12,17,30,.96), rgba(12,17,30,0));
    }

        .chat-input input {
            width: 100%;
            height: 52px;
            border-radius: 18px;
            font-size: 15px;
        }

        .chat-input button {
            width: 100%;
            height: 50px;
            border-radius: 18px;
        }

    .mobile-chat-fab {
        display: grid;
        place-items: center;
        position: fixed;
        right: 18px;
        bottom: 88px;
        z-index: 1900;
        width: 54px;
        height: 54px;
        border-radius: 999px;
        border: 1px solid rgba(88,255,177,.28);
        background: linear-gradient(135deg, #58ffb1, #52b7ff);
        color: #07111f;
        font-size: 23px;
        box-shadow: 0 18px 45px rgba(88,255,177,.25);
        cursor: pointer;
        touch-action: manipulation;
    }

        .mobile-chat-fab.chat-open {
            opacity: 0;
            transform: scale(.72);
            pointer-events: none;
        }

    /* Footer safe area */
    .dashboard-footer,
    footer,
    .footer,
    .site-footer {
        position: relative;
        z-index: 1;
        padding-bottom: 96px !important;
        text-align: center;
        font-size: 11px;
        color: rgba(226,232,240,.58);
    }

    /* Login page */
    body:has(input[type="password"]) main,
    body:has(input[type="password"]) .container,
    body:has(input[type="password"]) .auth-page,
    body:has(input[type="password"]) .login-page {
        min-height: calc(100dvh - 40px);
        display: grid;
        place-items: center;
        padding: 22px 14px;
    }

    body:has(input[type="password"]) form {
        width: min(100%, 390px);
        margin-left: auto;
        margin-right: auto;
    }

    body:has(input[type="password"]) .glass-card,
    body:has(input[type="password"]) .auth-card,
    body:has(input[type="password"]) .login-card {
        width: min(100%, 410px);
        margin-left: auto;
        margin-right: auto;
        border-radius: 26px;
    }

    body:has(input[type="password"]) input:not([type="checkbox"]):not([type="radio"]) {
        width: 100%;
        min-height: 46px;
    }

    body:has(input[type="password"]) button {
        width: 100%;
        min-height: 46px;
    }

    body:has(input[type="password"]) input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        accent-color: #58ffb1;
        flex: 0 0 18px;
        display: inline-block;
    }

    body:has(input[type="password"]) .form-check,
    body:has(input[type="password"]) .remember-me,
    body:has(input[type="password"]) label:has(input[type="checkbox"]) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 14px 0 16px !important;
        color: #cbd5e1;
        font-size: 13px;
        line-height: 1.3;
    }

        body:has(input[type="password"]) .form-check label,
        body:has(input[type="password"]) .remember-me label {
            display: inline-flex !important;
            align-items: center !important;
            gap: 10px !important;
            margin: 0 !important;
            width: auto !important;
        }

    body:has(input[type="password"]) .form-check-input {
        position: static !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    body:has(input[type="password"]) .form-check-label {
        margin-left: 0 !important;
        color: #cbd5e1;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .app-shell {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .dashboard {
        width: 100%;
        max-width: 100%;
    }

    .mobile-temp-row strong {
        font-size: 58px;
    }

    .mobile-hero-card {
        border-radius: 24px;
        padding: 20px 18px;
    }

    .mobile-metric-card {
        min-height: 76px;
        border-radius: 20px;
    }

    .mobile-device-card {
        border-radius: 20px;
    }

    .ai-panel {
        min-height: 76dvh;
        max-height: 90dvh;
        padding: 20px 16px 16px;
        border-radius: 28px 28px 0 0;
    }

    .chat-mobile-intro h3 {
        font-size: 20px;
    }

    .chat-log {
        min-height: 145px;
    }
}

@media (max-width: 380px) {
    .settings-panel .threshold-input-matrix {
        grid-template-columns: 1fr !important;
    }

    .settings-panel .threshold-tab-btn {
        font-size: 10px !important;
    }

    .mobile-home-top h2 {
        font-size: 22px;
    }

    .mobile-status-pill {
        padding: 0 9px;
    }

    .mobile-home-actions {
        gap: 6px;
    }

    .mobile-add-device-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }
}

/* =========================================================
   MOBILE LANGUAGE + ADD DEVICE FIX - NO DUPLICATE
   Keep this block at the very end of site.css.
   Required DOM order in Index.cshtml:
   [#btnOpenAddDevice] [#langToggle] [.mobile-status-pill]
   ========================================================= */

.mobile-home-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

    /* Make sure Add Device button is always the small plus button */
    .mobile-home-actions > #btnOpenAddDevice.mobile-add-device-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 36px !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, rgba(88,255,177,.20), rgba(0,242,254,.16)) !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        color: #e8fff5 !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
    }

        .mobile-home-actions > #btnOpenAddDevice.mobile-add-device-btn i {
            display: inline-block !important;
            font-size: 15px !important;
            color: #8fffd0 !important;
            line-height: 1 !important;
        }

        .mobile-home-actions > #btnOpenAddDevice.mobile-add-device-btn img,
        .mobile-home-actions > #btnOpenAddDevice.mobile-add-device-btn .mobile-lang-text,
        .mobile-home-actions > #btnOpenAddDevice.mobile-add-device-btn .mobile-lang-flag,
        .mobile-home-actions > #btnOpenAddDevice.mobile-add-device-btn .mobile-lang-flag-img {
            display: none !important;
        }

    /* Language pill: real flag image + VIE / ENG */
    .mobile-home-actions > #langToggle.mobile-lang-toggle {
        height: 36px !important;
        min-width: 88px !important;
        max-width: 96px !important;
        padding: 0 12px 0 7px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,.92) !important;
        outline: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        flex: 0 0 auto !important;
        cursor: pointer !important;
        background: rgba(255,255,255,.90) !important;
        color: #111827 !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
        transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important;
        overflow: hidden !important;
    }

        .mobile-home-actions > #langToggle.mobile-lang-toggle:hover {
            transform: translateY(-1px) !important;
            background: rgba(255,255,255,.96) !important;
            box-shadow: 0 10px 26px rgba(0,0,0,.16) !important;
        }

.mobile-lang-flag-img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    flex: 0 0 26px !important;
    background: transparent !important;
}

/* Hide the legacy emoji flag span if it still exists */
.mobile-lang-flag:not(.mobile-lang-flag-img) {
    display: none !important;
}

.mobile-lang-text {
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: .03em !important;
    color: #111827 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.mobile-home-actions > .mobile-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
}

@media (max-width: 380px) {
    .mobile-home-actions {
        gap: 5px !important;
    }

        .mobile-home-actions > #btnOpenAddDevice.mobile-add-device-btn {
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
            min-height: 34px !important;
            max-width: 34px !important;
            max-height: 34px !important;
            flex-basis: 34px !important;
        }

        .mobile-home-actions > #langToggle.mobile-lang-toggle {
            height: 34px !important;
            min-width: 78px !important;
            max-width: 86px !important;
            padding: 0 10px 0 6px !important;
            gap: 8px !important;
        }

    .mobile-lang-flag-img {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        flex-basis: 24px !important;
    }

    .mobile-lang-text {
        font-size: 11px !important;
    }

    .mobile-home-actions > .mobile-status-pill {
        min-height: 31px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
    }
}

/* =========================================================
   MOBILE AIR QUALITY SYNC - FINAL
   Sync smartphone Air Quality icon + color with live quality state.
   Keep this block at the very end of site.css.
   ========================================================= */
@media (max-width: 768px) {
    .mobile-air-quality {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: 34px !important;
        padding: 8px 13px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
        transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
    }

        .mobile-air-quality i {
            font-size: 14px !important;
            line-height: 1 !important;
            color: currentColor !important;
        }

        .mobile-air-quality span {
            color: currentColor !important;
            line-height: 1 !important;
        }

        .mobile-air-quality.excellent {
            color: var(--green) !important;
            background: rgba(88, 255, 177, .12) !important;
            border: 1px solid rgba(88, 255, 177, .26) !important;
            box-shadow: 0 0 18px rgba(88, 255, 177, .12) !important;
        }

        .mobile-air-quality.fair {
            color: var(--orange) !important;
            background: rgba(255, 174, 88, .13) !important;
            border: 1px solid rgba(255, 174, 88, .28) !important;
            box-shadow: 0 0 18px rgba(255, 174, 88, .12) !important;
        }

        .mobile-air-quality.poor {
            color: var(--red) !important;
            background: rgba(255, 77, 109, .14) !important;
            border: 1px solid rgba(255, 77, 109, .32) !important;
            box-shadow: 0 0 20px rgba(255, 77, 109, .16) !important;
        }

        .mobile-air-quality.unknown {
            color: #cbd5e1 !important;
            background: rgba(148, 163, 184, .13) !important;
            border: 1px solid rgba(148, 163, 184, .24) !important;
            box-shadow: none !important;
        }

    .mobile-metric-card.good strong,
    .mobile-metric-card.good b {
        color: var(--green) !important;
        text-shadow: 0 0 10px rgba(88, 255, 177, .22) !important;
    }

    .mobile-metric-card.warn strong,
    .mobile-metric-card.warn b {
        color: var(--orange) !important;
        text-shadow: 0 0 10px rgba(255, 174, 88, .20) !important;
    }

    .mobile-metric-card.bad strong,
    .mobile-metric-card.bad b {
        color: var(--red) !important;
        text-shadow: 0 0 10px rgba(255, 77, 109, .22) !important;
    }

    .mobile-metric-card.unknown strong,
    .mobile-metric-card.unknown b {
        color: #cbd5e1 !important;
        text-shadow: none !important;
    }
}

/* =========================================================
   MOBILE LANGUAGE PILL ALIGNMENT PATCH
   Put this at the very end of site.css.
   ========================================================= */
@media (max-width: 768px) {
    .mobile-home-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    #btnOpenAddDevice.mobile-add-device-btn {
        display: inline-grid !important;
        place-items: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        flex: 0 0 36px !important;
    }

    #langToggle.mobile-lang-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 36px !important;
        min-width: 74px !important;
        padding: 0 10px 0 7px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.90) !important;
        border: 1px solid rgba(255,255,255,.92) !important;
        overflow: hidden !important;
        flex: 0 0 auto !important;
    }

    #langToggle .mobile-lang-flag-img {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center !important;
        flex: 0 0 26px !important;
    }

    #langToggle .mobile-lang-text {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #111827 !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: .02em !important;
        white-space: nowrap !important;
    }

    .mobile-status-pill {
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   MOBILE MANUAL MODE + COUNTDOWN SYNC PATCH
   Keep at the very end of site.css.
   ========================================================= */

@media (max-width: 768px) {
    .mobile-hero-head strong {
        transition: color .22s ease, text-shadow .22s ease;
    }

        .mobile-hero-head strong.auto {
            color: var(--green) !important;
            text-shadow: 0 0 14px rgba(88,255,177,.42) !important;
        }

        .mobile-hero-head strong.eco {
            color: var(--blue) !important;
            text-shadow: 0 0 14px rgba(82,183,255,.42) !important;
        }

        .mobile-hero-head strong.manual {
            color: var(--orange) !important;
            text-shadow: 0 0 16px rgba(255,174,88,.55) !important;
        }

    .mobile-countdown {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 14px;
        padding: 9px 12px;
        border-radius: 999px;
        color: var(--orange);
        background: rgba(255,174,88,.12);
        border: 1px solid rgba(255,174,88,.24);
        font-size: 12px;
        font-weight: 850;
        line-height: 1.2;
        box-shadow: 0 0 18px rgba(255,174,88,.10);
    }

        .mobile-countdown i {
            font-size: 14px;
            color: var(--orange);
            text-shadow: 0 0 12px rgba(255,174,88,.45);
        }

        .mobile-countdown strong {
            color: #ffd596;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-weight: 900;
            letter-spacing: .02em;
        }

        .mobile-countdown.hidden {
            display: none !important;
        }
}
/* =========================================================
   DEVICE PAIRING CODE UI PATCH
   Add this block at the very end of wwwroot/css/site.css
   ========================================================= */

/* Desktop pairing result panel */
.pairing-result-panel {
    padding: 18px;
    display: grid;
    gap: 12px;
    border-color: rgba(255, 174, 88, .28);
    background: radial-gradient(circle at top left, rgba(255, 174, 88, .13), transparent 34%), rgba(255, 255, 255, .05);
}

.pairing-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

    .pairing-result-head strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 18px;
        border-radius: 16px;
        color: var(--orange);
        background: rgba(255, 174, 88, .13);
        border: 1px solid rgba(255, 174, 88, .28);
        font-size: clamp(22px, 4vw, 34px);
        font-weight: 950;
        letter-spacing: .08em;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
        text-shadow: 0 0 18px rgba(255, 174, 88, .25);
    }

.pairing-steps {
    margin: 0;
    padding-left: 22px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.65;
}

    .pairing-steps strong {
        color: #f8fafc;
    }

/* Mobile modal pairing result */
.pairing-generate-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pairing-result {
    margin-top: 4px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

    .pairing-result.hidden {
        display: none !important;
    }

.pairing-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 15px;
    color: var(--orange);
    background: rgba(255, 174, 88, .14);
    border: 1px solid rgba(255, 174, 88, .28);
}

    .pairing-code-box span {
        color: rgba(255, 255, 255, .72);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .10em;
        text-transform: uppercase;
        margin: 0 !important;
    }

    .pairing-code-box strong {
        color: var(--orange);
        font-size: 22px;
        font-weight: 950;
        letter-spacing: .08em;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
        text-shadow: 0 0 14px rgba(255, 174, 88, .24);
    }

.pairing-instruction {
    margin-top: 12px;
    display: grid;
    gap: 5px;
    color: rgba(226, 232, 240, .74);
    font-size: 12px;
    line-height: 1.45;
}

    .pairing-instruction p {
        margin: 0;
    }

    .pairing-instruction strong {
        color: #f8fafc;
    }

.pairing-status {
    margin-top: 12px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(88, 255, 177, .10);
    border: 1px solid rgba(88, 255, 177, .20);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

@media (max-width: 768px) {
    .pairing-result-panel {
        display: none !important;
    }

    .pairing-code-box {
        flex-direction: column;
        align-items: flex-start;
    }

        .pairing-code-box strong {
            font-size: 24px;
        }
}
/* Pairing Code countdown + centered cancel button */
.pairing-status {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(88, 255, 177, .10);
    border: 1px solid rgba(88, 255, 177, .20);
    color: var(--green);
    font-size: 12px;
    font-weight: 850;
}

    .pairing-status strong {
        min-width: 52px;
        text-align: center;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .22);
        color: #ffffff;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        letter-spacing: .04em;
    }

.mobile-add-device-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 14px !important;
}

.mobile-add-device-cancel {
    width: min(180px, 100%) !important;
    justify-self: center !important;
    text-align: center !important;
}

.pairing-code-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.pairing-code-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.pairing-copy-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    color: #ffd18a;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

    .pairing-copy-btn:hover {
        transform: translateY(-1px);
        background: rgba(255, 174, 88, .16);
        color: #ffffff;
    }

    .pairing-copy-btn.copied {
        background: rgba(88, 255, 177, .18);
        color: var(--green);
        border-color: rgba(88, 255, 177, .35);
    }
/* =========================================================
   Pairing Code: same-row copy button + preserve modal layout
   Put this at the very end of wwwroot/css/site.css
   ========================================================= */
.pairing-code-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-align: left !important;
}

.pairing-code-main {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

    .pairing-code-main span,
    .pairing-code-box > span {
        display: block !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .pairing-code-main strong,
    .pairing-code-box > strong,
    #pairingCodeText {
        display: block !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

.pairing-copy-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #ffd18a !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    cursor: pointer !important;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease !important;
}

    .pairing-copy-btn:hover {
        transform: translateY(-1px) !important;
        background: rgba(255, 174, 88, .16) !important;
        color: #ffffff !important;
    }

    .pairing-copy-btn.copied {
        background: rgba(88, 255, 177, .18) !important;
        color: var(--green) !important;
        border-color: rgba(88, 255, 177, .35) !important;
    }

.pairing-status {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

    .pairing-status strong {
        flex: 0 0 auto !important;
    }
/* =========================================================
   COMPACT PAIRING CODE ROW - FINAL OVERRIDE
   Pairing code + copy icon on the same row
   ========================================================= */

.pairing-code-box-compact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    min-height: unset !important;
    border-radius: 16px !important;
}

    .pairing-code-box-compact .pairing-code-label {
        display: block !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .12em !important;
        color: rgba(255, 255, 255, .72) !important;
    }

.pairing-code-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

    .pairing-code-row #pairingCodeText {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
        letter-spacing: .12em !important;
        color: #ffd18a !important;
        white-space: nowrap !important;
    }

    .pairing-code-row .pairing-copy-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 11px !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 34px !important;
        background: rgba(255, 255, 255, .08) !important;
        border: 1px solid rgba(255, 255, 255, .14) !important;
        color: #ffd18a !important;
    }

        .pairing-code-row .pairing-copy-btn i {
            font-size: 14px !important;
            line-height: 1 !important;
        }

        .pairing-code-row .pairing-copy-btn.copied {
            background: rgba(88, 255, 177, .16) !important;
            color: var(--green) !important;
            border-color: rgba(88, 255, 177, .35) !important;
        }

/* =========================================================
   DESKTOP DASHBOARD REDESIGN + DEVICE MANAGEMENT FINAL
   This is the single source of truth for the desktop layout
   and the Device Management card. Keep it at the end.
   ========================================================= */

/* Shared Device Management component */
.device-management-card {
    width: 100%;
    margin: 0;
    padding: 20px;
    border-radius: 24px;
    background: radial-gradient(circle at top left, rgba(88, 255, 177, .09), transparent 34%), radial-gradient(circle at top right, rgba(82, 183, 255, .10), transparent 36%), rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .10);
    overflow: hidden;
}

.device-management-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

    .device-management-head h3 {
        margin: 0;
        color: #f8fafc;
        font-size: 18px;
        font-weight: 900;
        letter-spacing: -.01em;
    }

    .device-management-head p {
        margin: 10px 0 0;
        max-width: 620px;
        color: rgba(226, 232, 240, .72);
        font-size: 13px;
        line-height: 1.55;
        font-weight: 620;
    }

.device-refresh-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .07);
    color: #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

    .device-refresh-btn:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, .11);
        border-color: rgba(82, 183, 255, .30);
    }

.device-management-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

.device-summary-chip {
    min-height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    color: rgba(226, 232, 240, .78);
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .045);
}

    .device-summary-chip.online {
        color: var(--green);
        border-color: rgba(88, 255, 177, .22);
        background: rgba(88, 255, 177, .08);
    }

    .device-summary-chip.offline {
        color: var(--red);
        border-color: rgba(255, 77, 109, .20);
        background: rgba(255, 77, 109, .075);
    }

    .device-summary-chip.waiting {
        color: #ffd18a;
        border-color: rgba(255, 209, 138, .22);
        background: rgba(255, 209, 138, .075);
    }

.device-management-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 14px;
}

.device-empty-state {
    grid-column: 1 / -1;
    min-height: 74px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .045);
    color: rgba(226, 232, 240, .70);
    border-radius: 18px;
    padding: 18px;
    font-size: 13px;
    font-weight: 760;
    text-align: center;
}

    .device-empty-state.error {
        color: #ff9bad;
        border-color: rgba(255, 77, 109, .28);
        background: rgba(255, 77, 109, .075);
    }

.device-registry-item {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, .8fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .105);
    background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)), radial-gradient(circle at top left, rgba(88, 255, 177, .075), transparent 42%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.device-registry-main {
    min-width: 0;
}

.device-registry-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.device-alias {
    color: #f8fafc;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-id {
    margin-top: 5px;
    color: rgba(226, 232, 240, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    word-break: break-all;
}

.device-status-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .device-status-badge.online {
        color: var(--green);
        background: rgba(88, 255, 177, .12);
        border: 1px solid rgba(88, 255, 177, .28);
        box-shadow: 0 0 16px rgba(88, 255, 177, .08);
    }

    .device-status-badge.offline {
        color: var(--red);
        background: rgba(255, 77, 109, .105);
        border: 1px solid rgba(255, 77, 109, .25);
    }

    .device-status-badge.waiting {
        color: #ffd18a;
        background: rgba(255, 209, 138, .105);
        border: 1px solid rgba(255, 209, 138, .24);
    }

.device-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

    .device-meta-grid > div {
        min-width: 0;
        padding: 10px 11px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .085);
        background: rgba(0, 0, 0, .14);
    }

    .device-meta-grid span {
        display: block;
        margin-bottom: 5px;
        color: rgba(226, 232, 240, .50);
        font-size: 9px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

    .device-meta-grid strong {
        display: block;
        color: rgba(255, 255, 255, .90);
        font-size: 12px;
        font-weight: 900;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .device-meta-grid strong.good {
            color: var(--green);
        }

        .device-meta-grid strong.warn {
            color: #ffd18a;
        }

.device-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-self: stretch;
    align-content: center;
}

.device-action-btn {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .115);
    background: rgba(255, 255, 255, .065);
    color: rgba(226, 232, 240, .84);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

    .device-action-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, .105);
    }

    .device-action-btn.view {
        grid-column: 1 / -1;
        color: var(--green);
        background: rgba(88, 255, 177, .085);
        border-color: rgba(88, 255, 177, .24);
    }

    .device-action-btn.pair {
        grid-column: 1 / -1;
        color: #ffd18a;
        background: rgba(255, 209, 138, .075);
        border-color: rgba(255, 209, 138, .22);
    }

    .device-action-btn.reset {
        color: #8fd3ff;
        border-color: rgba(143, 211, 255, .18);
    }

    .device-action-btn.remove {
        color: var(--red);
        border-color: rgba(255, 77, 109, .20);
    }

    .device-action-btn:disabled {
        display: none !important;
    }

/* Laptop/Desktop layout: dashboard is an operations console, not a stretched mobile app */
@media (min-width: 1101px) {
    .app-shell {
        width: min(1480px, calc(100vw - 56px));
        padding-top: 22px;
    }

    .dashboard {
        gap: 20px;
    }

    .provision-card {
        min-height: 88px;
        padding: 18px 20px;
        display: grid;
        grid-template-columns: minmax(360px, 1fr) minmax(620px, auto);
        gap: 24px;
        align-items: center;
    }

        .provision-card h2 {
            margin: 0 0 8px;
            font-size: 24px;
            letter-spacing: -.02em;
        }

        .provision-card .muted {
            margin: 0;
            max-width: 680px;
            line-height: 1.55;
        }

    .add-device-form {
        display: grid;
        grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

        .add-device-form input {
            min-width: 0;
            height: 48px;
        }

        .add-device-form button {
            height: 48px;
            white-space: nowrap;
        }

    .status-header {
        min-height: 108px;
        padding: 24px 28px;
        align-items: center;
        background: radial-gradient(circle at top left, rgba(88, 255, 177, .10), transparent 34%), radial-gradient(circle at top right, rgba(82, 183, 255, .13), transparent 40%), rgba(255, 255, 255, .05);
    }

        .status-header .eyebrow {
            margin-bottom: 10px;
        }

    .mode {
        font-size: clamp(46px, 4vw, 70px);
        letter-spacing: -.045em;
    }

    .net-states {
        gap: 12px;
    }

        .net-states .chip {
            min-height: 46px;
            padding: 0 17px;
            align-items: center;
            font-size: 14px;
            font-weight: 780;
        }

    .grid-main {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(420px, 2fr);
        grid-template-areas:
            "iaq zones"
            "controls chart"
            "settings devices";
        gap: 20px;
        align-items: stretch;
    }

        .grid-main > .iaq-node {
            grid-area: iaq;
            min-height: 350px;
        }

        .grid-main > .zone-matrix {
            grid-area: zones;
            min-height: 350px;
        }

        .grid-main > .controls-panel {
            grid-area: controls;
            min-height: 300px;
        }

        .grid-main > .chart-panel {
            grid-area: chart;
            min-height: 300px;
        }

        .grid-main > .settings-panel {
            grid-area: settings;
            min-height: 420px;
        }

        .grid-main > .device-management-card {
            grid-area: devices;
            min-height: 420px;
            display: flex;
            flex-direction: column;
        }

    .iaq-node {
        justify-content: center;
        padding: 28px;
    }

    .metric-xl {
        font-size: clamp(82px, 8.5vw, 132px);
    }

    .sub-metrics {
        gap: 20px;
        font-size: 16px;
    }

    .zone-matrix .zones {
        height: calc(100% - 34px);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: start;
    }

    .controls-panel,
    .chart-panel,
    .settings-panel,
    .device-management-card,
    .zone-matrix {
        padding: 22px;
        border-radius: 22px;
    }

    .toggle-row {
        min-height: 54px;
        padding: 0 2px;
    }

    .mode-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .chart-panel canvas {
        max-height: 245px;
    }

    .settings-panel .threshold-input-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-panel .settings-tab-card {
        min-height: 330px;
    }

    .ai-panel .chat-log {
        flex: 1 1 auto;
        min-height: 250px;
        max-height: none;
    }

    .ai-panel .chat-input {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 120px;
        align-items: center;
    }

    .desktop-admin-panel {
        display: block;
    }
}

/* Tablet: keep the desktop visual hierarchy, but stack safely */
@media (min-width: 769px) and (max-width: 1100px) {
    .app-shell {
        width: min(1000px, 94vw);
    }

    .provision-card {
        grid-template-columns: 1fr;
    }

    .add-device-form {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
    }

    .grid-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

        .grid-main > .iaq-node,
        .grid-main > .settings-panel {
            grid-column: 1 / -1;
        }

    .device-registry-item {
        grid-template-columns: 1fr;
    }
}

/* Mobile integration: Device Management joins the Settings page */
@media (max-width: 768px) {
    .dashboard > .desktop-admin-panel.mobile-panel {
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 14px 0 !important;
        align-self: stretch !important;
    }

        .dashboard > .desktop-admin-panel.mobile-panel.mobile-active {
            display: block !important;
        }

    .device-management-card {
        padding: 16px !important;
        border-radius: 22px !important;
    }

    .device-management-head {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px;
    }

        .device-management-head h3 {
            font-size: 16px;
        }

        .device-management-head p {
            font-size: 12px;
            line-height: 1.5;
            margin-top: 8px;
        }

    .device-refresh-btn {
        width: 100%;
        min-height: 38px;
    }

    .device-management-summary {
        gap: 8px;
        margin-bottom: 14px;
    }

    .device-summary-chip {
        min-height: 28px;
        padding: 0 9px;
        font-size: 10px;
    }

    .device-management-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .device-registry-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
    }

    .device-registry-title-row {
        align-items: center;
    }

    .device-alias {
        font-size: 14px;
    }

    .device-id {
        font-size: 10px;
    }

    .device-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

        .device-meta-grid > div {
            padding: 9px;
            border-radius: 12px;
        }

        .device-meta-grid span {
            font-size: 8px;
        }

        .device-meta-grid strong {
            font-size: 10px;
        }

    .device-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .device-action-btn {
        min-height: 36px;
        font-size: 10px;
        border-radius: 12px;
    }
}

@media (max-width: 390px) {
    .device-management-summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .device-meta-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   DESKTOP HEADER + LANGUAGE V2
   Purpose:
   - Keep desktop different from mobile, not a stretched mobile UI.
   - Move Add Device and Language into the desktop status strip.
   - Make Running Mode compact and operational.
   ========================================================= */

@media (min-width: 769px) {
    .top-nav {
        min-height: 52px;
        padding: 0 18px;
        margin-bottom: 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.095);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

        .top-nav .brand {
            font-size: 13px;
            letter-spacing: .18em;
            color: rgba(255, 255, 255, .88);
        }

        .top-nav .link-button {
            min-height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            color: rgba(255,255,255,.70);
            border: 1px solid rgba(255,255,255,.10);
            background: rgba(255,255,255,.045);
        }

            .top-nav .link-button:hover {
                color: #fff;
                background: rgba(255,255,255,.075);
            }

    .dashboard {
        gap: 22px;
    }

    .status-header {
        min-height: 112px;
        padding: 22px 24px;
        display: grid;
        grid-template-columns: minmax(360px, 1fr) auto;
        align-items: center;
        gap: 22px;
        border-radius: 22px;
        background: radial-gradient(circle at left, rgba(88,255,177,.10), transparent 36%), radial-gradient(circle at right, rgba(82,183,255,.12), transparent 34%), rgba(255,255,255,.05);
    }

        .status-header .eyebrow {
            margin-bottom: 8px;
            font-size: 10px;
            letter-spacing: .18em;
            color: rgba(226,232,240,.62);
        }

        .status-header .mode {
            font-size: clamp(34px, 4vw, 56px);
            line-height: .95;
            letter-spacing: -.045em;
            white-space: nowrap;
        }

        .status-header .net-states {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
            max-width: 760px;
        }

        .status-header .chip {
            min-height: 42px;
            padding: 0 15px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            background: rgba(255,255,255,.075);
            border: 1px solid rgba(255,255,255,.12);
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

    .desktop-header-btn,
    .desktop-lang-toggle {
        min-height: 42px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.13);
        background: rgba(255,255,255,.075);
        color: rgba(255,255,255,.86);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
        font-size: 13px;
        font-weight: 850;
        cursor: pointer;
        white-space: nowrap;
        transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

        .desktop-header-btn:hover,
        .desktop-lang-toggle:hover {
            transform: translateY(-1px);
            background: rgba(255,255,255,.11);
            border-color: rgba(255,255,255,.20);
        }

    .desktop-add-device-btn {
        color: #eafff5;
        background: linear-gradient(135deg, rgba(88,255,177,.16), rgba(82,183,255,.12));
        border-color: rgba(88,255,177,.24);
    }

        .desktop-add-device-btn i {
            color: var(--green);
        }

    .desktop-lang-toggle {
        min-width: 92px;
        padding: 0 13px 0 8px;
        background: rgba(255,255,255,.90);
        border-color: rgba(255,255,255,.85);
        color: #111827;
        gap: 9px;
    }

        .desktop-lang-toggle:hover {
            background: rgba(255,255,255,.98);
            border-color: rgba(255,255,255,.98);
        }

    .desktop-lang-flag-img {
        width: 25px;
        height: 25px;
        min-width: 25px;
        min-height: 25px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        flex: 0 0 25px;
    }

    .desktop-lang-text {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .035em;
        line-height: 1;
        color: #111827;
    }

    /* Keep the old full-width provisioning form only for the no-device state. */
    .provision-card {
        min-height: 112px;
        border-radius: 22px;
    }

        .provision-card .add-device-form input {
            min-width: 220px;
        }
}

@media (min-width: 769px) and (max-width: 1160px) {
    .status-header {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

        .status-header .net-states {
            justify-content: flex-start;
            max-width: 100%;
        }
}

@media (max-width: 768px) {
    .desktop-header-btn,
    .desktop-lang-toggle {
        display: none !important;
    }
}


/* =========================================================
   FINAL DESKTOP REWORK: Assistant Floating Drawer + Devices Panel
   Assistant no longer consumes a desktop grid card.
   Device Management replaces the old assistant panel area.
   Keep this block at the very end of site.css.
   ========================================================= */

/* Device Management as the right-side admin panel on desktop */
@media (min-width: 1101px) {
    .grid-main {
        grid-template-areas:
            "iaq zones"
            "controls chart"
            "settings devices" !important;
    }

        .grid-main > #deviceManagementCard.device-management-card {
            grid-area: devices !important;
            display: flex !important;
            flex-direction: column !important;
            min-height: 420px !important;
            max-height: 560px !important;
            padding: 22px !important;
            overflow: hidden !important;
        }

    #deviceManagementCard .device-management-head {
        flex: 0 0 auto !important;
        margin-bottom: 14px !important;
    }

    #deviceManagementCard .device-management-summary {
        flex: 0 0 auto !important;
        margin-bottom: 12px !important;
    }

    #deviceManagementCard .device-management-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        padding-right: 4px !important;
    }

    #deviceManagementCard .device-registry-item {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    #deviceManagementCard .device-actions {
        grid-template-columns: 1fr 1fr !important;
    }

    #deviceManagementCard .device-action-btn.view {
        grid-column: 1 / -1 !important;
    }
}

/* Floating assistant launcher is available on both laptop and mobile */
.mobile-chat-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1980 !important;
    background: rgba(3, 7, 18, .54) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility .22s ease !important;
}

    .mobile-chat-overlay.chat-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

.mobile-chat-fab {
    display: grid !important;
    place-items: center !important;
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 1990 !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(88, 255, 177, .34) !important;
    background: linear-gradient(135deg, #58ffb1, #52b7ff) !important;
    color: #07111f !important;
    font-size: 24px !important;
    cursor: pointer !important;
    box-shadow: 0 18px 48px rgba(88, 255, 177, .25), 0 8px 24px rgba(0, 0, 0, .28) !important;
    transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease !important;
    touch-action: manipulation !important;
}

    .mobile-chat-fab:hover {
        transform: translateY(-2px) scale(1.03) !important;
        box-shadow: 0 22px 56px rgba(88, 255, 177, .32), 0 10px 28px rgba(0, 0, 0, .32) !important;
    }

    .mobile-chat-fab.chat-open {
        opacity: 0 !important;
        transform: scale(.78) !important;
        pointer-events: none !important;
    }

.ai-panel {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    left: auto !important;
    z-index: 2000 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(430px, calc(100vw - 36px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 22px !important;
    border-radius: 28px !important;
    background: radial-gradient(circle at top left, rgba(88, 255, 177, .14), transparent 34%), radial-gradient(circle at top right, rgba(82, 183, 255, .18), transparent 36%), rgba(12, 17, 30, .96) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: -24px 0 72px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    transform: translateX(calc(100% + 42px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .22s ease !important;
}

    .ai-panel.chat-open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .ai-panel::before {
        display: none !important;
    }

.ai-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    flex: 0 0 auto !important;
}

.chat-sheet-close {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .065) !important;
    color: #f1f5f9 !important;
    cursor: pointer !important;
}

.chat-mobile-intro {
    display: block !important;
    margin-bottom: 14px !important;
    flex: 0 0 auto !important;
}

    .chat-mobile-intro h3 {
        margin: 0 0 8px !important;
        color: #f8fafc !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        letter-spacing: -.025em !important;
    }

    .chat-mobile-intro p {
        margin: 0 !important;
        color: #aebbd0 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

.chat-suggestions {
    display: grid !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

    .chat-suggestions button {
        min-height: 42px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        background: rgba(255, 255, 255, .055) !important;
        color: #e2e8f0 !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        padding: 0 14px !important;
    }

.ai-panel .chat-log {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 14px !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
    background: rgba(4, 7, 18, .38) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

.ai-panel .chat-input {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    gap: 10px !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    background: linear-gradient(to top, rgba(12, 17, 30, .96), rgba(12, 17, 30, 0)) !important;
}

    .ai-panel .chat-input input {
        width: 100% !important;
        height: 50px !important;
        border-radius: 17px !important;
    }

    .ai-panel .chat-input button {
        width: 100% !important;
        height: 50px !important;
        border-radius: 17px !important;
    }

@media (max-width: 768px) {
    .mobile-chat-fab {
        right: 18px !important;
        bottom: 88px !important;
        width: 54px !important;
        height: 54px !important;
        font-size: 23px !important;
    }

    .ai-panel {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: 72dvh !important;
        max-height: 88dvh !important;
        height: auto !important;
        border-radius: 30px 30px 0 0 !important;
        padding: 22px 20px 18px !important;
        transform: translateY(105%) !important;
        box-shadow: 0 -26px 80px rgba(0, 0, 0, .55) !important;
    }

        .ai-panel::before {
            content: "" !important;
            display: block !important;
            width: 42px !important;
            height: 5px !important;
            border-radius: 999px !important;
            background: rgba(255, 255, 255, .28) !important;
            align-self: center !important;
            margin-bottom: 16px !important;
            flex: 0 0 auto !important;
        }

        .ai-panel.chat-open {
            transform: translateY(0) !important;
        }

        .ai-panel .chat-input {
            grid-template-columns: 1fr !important;
        }

    .chat-suggestions button {
        min-height: 46px !important;
    }

    .grid-main > #deviceManagementCard.device-management-card {
        display: none !important;
    }

        .grid-main > #deviceManagementCard.device-management-card.mobile-active {
            display: block !important;
        }
}
/* =========================================================
   LD240 PRESENCE + ECO CARD
   ========================================================= */

.presence-eco-card {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .presence-eco-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .28;
        background: radial-gradient(circle at 12% 10%, rgba(125, 211, 252, .16), transparent 34%), radial-gradient(circle at 88% 16%, rgba(34, 197, 94, .10), transparent 36%);
    }

.presence-status-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

    .presence-status-row > div,
    .presence-eco-action {
        border: 1px solid rgba(148, 163, 184, .18);
        background: rgba(15, 23, 42, .36);
        border-radius: 18px;
        padding: 12px 14px;
    }

        .presence-status-row small,
        .presence-eco-action small {
            display: block;
            color: rgba(226, 232, 240, .62);
            font-size: .72rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .presence-status-row strong,
        .presence-eco-action strong {
            color: #e2e8f0;
            font-size: .98rem;
            letter-spacing: .04em;
        }

.presence-eco-action {
    position: relative;
    z-index: 1;
    margin-top: 12px;
}

.presence-eco-reason {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    color: rgba(226, 232, 240, .76);
    font-size: .86rem;
    line-height: 1.45;
}

.presence-eco-flush {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    color: #fbbf24;
    background: rgba(251, 191, 36, .10);
    border: 1px solid rgba(251, 191, 36, .22);
}

.presence-eco-card.auto-muted {
    opacity: .76;
}

    .presence-eco-card.auto-muted #ecoActionValue {
        color: #93c5fd;
    }

.presence-eco-card.eco-active {
    border-color: rgba(34, 197, 94, .38);
    box-shadow: 0 0 28px rgba(34, 197, 94, .10);
}

    .presence-eco-card.eco-active #occupancyStateValue,
    .presence-eco-card.eco-active #radarAliveValue,
    .presence-eco-card.eco-active #ecoActionValue {
        color: #86efac;
    }

.presence-eco-card.radar-offline {
    border-color: rgba(248, 113, 113, .45);
    box-shadow: 0 0 30px rgba(248, 113, 113, .12);
}

    .presence-eco-card.radar-offline #radarAliveValue,
    .presence-eco-card.radar-offline #ecoActionValue {
        color: #fca5a5;
    }

    .presence-eco-card.radar-offline .presence-eco-reason {
        color: #fecaca;
    }

@media (max-width: 768px) {
    .presence-status-row {
        grid-template-columns: 1fr;
    }

    .presence-eco-card {
        min-height: auto;
    }
}

.presence-card {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(33,41,68,0.88), rgba(20,23,40,0.92));
    box-shadow: 0 10px 24px rgba(0,0,0,0.24);
}

.presence-card--eco-active {
    border-color: rgba(108, 255, 169, 0.28);
    box-shadow: 0 0 0 1px rgba(108,255,169,0.10), 0 12px 28px rgba(0,0,0,0.28);
}

.presence-card--radar-offline {
    border-color: rgba(255, 123, 123, 0.32);
    box-shadow: 0 0 0 1px rgba(255,123,123,0.10), 0 12px 28px rgba(0,0,0,0.28);
}

.presence-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.presence-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(222, 233, 255, 0.92);
}

    .presence-card__title i {
        color: #74b9ff;
        font-size: 14px;
    }

.presence-card__mode-badge {
    min-width: 64px;
    text-align: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(255,255,255,0.08);
    color: #dfe8ff;
    border: 1px solid rgba(255,255,255,0.08);
}

    .presence-card__mode-badge.is-auto {
        background: rgba(125, 140, 180, 0.16);
        color: #d6e1ff;
    }

    .presence-card__mode-badge.is-eco {
        background: rgba(87, 214, 123, 0.16);
        color: #8effa8;
    }

.presence-card__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.presence-status {
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
}

.presence-status__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(210, 220, 245, 0.72);
}

.presence-status__value {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

/* Occupancy colors */
.presence-status.is-occupied {
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.24);
}

    .presence-status.is-occupied .presence-status__value {
        color: #96ffb0;
    }

.presence-status.is-vacant {
    background: rgba(124, 141, 181, 0.10);
    border-color: rgba(124, 141, 181, 0.18);
}

    .presence-status.is-vacant .presence-status__value {
        color: #d9e2ff;
    }

/* Radar */
.presence-status.is-online {
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.24);
}

    .presence-status.is-online .presence-status__value {
        color: #96ffb0;
    }

.presence-status.is-offline {
    background: rgba(255, 107, 107, 0.10);
    border-color: rgba(255, 107, 107, 0.22);
}

    .presence-status.is-offline .presence-status__value {
        color: #ff9f9f;
    }

/* ECO action */
.presence-status.is-comfort .presence-status__value {
    color: #9fe8ff;
}

.presence-status.is-saving {
    background: rgba(255, 193, 7, 0.10);
    border-color: rgba(255, 193, 7, 0.22);
}

    .presence-status.is-saving .presence-status__value {
        color: #ffd66e;
    }

.presence-status.is-flush {
    background: rgba(56, 189, 248, 0.10);
    border-color: rgba(56, 189, 248, 0.22);
}

    .presence-status.is-flush .presence-status__value {
        color: #7ddfff;
    }

.presence-card__footer {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(214, 222, 245, 0.72);
    line-height: 1.45;
}

/* =========================================================
   LD240 PRESENCE & ECO - FINAL STATE COLOR FIX
   This block intentionally stays at the VERY END of site.css.
   It matches the current Index.cshtml + dashboard.js classes:
   presence-smart-card, presence-smart-metric, is-occupied,
   is-online, is-monitor, is-comfort, etc.
   ========================================================= */

.zone-matrix {
    overflow: hidden;
}

    .zone-matrix .zones {
        height: auto !important;
        align-content: start !important;
    }

    .zone-matrix .presence-smart-card,
    #presenceEcoCard.presence-smart-card {
        position: relative !important;
        overflow: hidden !important;
        margin-top: 18px !important;
        padding: 16px !important;
        border-radius: 24px !important;
        min-height: auto !important;
        opacity: 1 !important;
        border: 1px solid rgba(148, 163, 184, .18) !important;
        background: radial-gradient(circle at 8% 0%, rgba(82, 183, 255, .22), transparent 30%), radial-gradient(circle at 94% 15%, rgba(88, 255, 177, .14), transparent 32%), radial-gradient(circle at 50% 100%, rgba(255, 174, 88, .14), transparent 36%), linear-gradient(145deg, rgba(15, 23, 42, .84), rgba(30, 41, 59, .68)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 42px rgba(0, 0, 0, .26) !important;
    }

#presenceEcoCard .presence-smart-bg,
#presenceEcoCard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .72;
    background: linear-gradient(110deg, rgba(255,255,255,.05), transparent 34%), radial-gradient(circle at 16% 18%, rgba(125, 211, 252, .12), transparent 28%), radial-gradient(circle at 86% 76%, rgba(251, 146, 60, .12), transparent 32%);
}

#presenceEcoCard > *:not(.presence-smart-bg) {
    position: relative;
    z-index: 1;
}

.presence-smart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.presence-smart-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.presence-smart-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #7dd3fc;
    background: rgba(56, 189, 248, .12);
    border: 1px solid rgba(125, 211, 252, .22);
    box-shadow: 0 0 20px rgba(56, 189, 248, .12);
}

.presence-smart-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    color: rgba(203, 213, 225, .66);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.presence-smart-title {
    margin: 0;
    color: #f8fafc;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.presence-mode-hint,
.presence-mode-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 112px;
    max-width: 150px;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    text-align: center;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, .16) !important;
    border: 1px solid rgba(147, 197, 253, .30) !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, .12) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

    .presence-mode-hint.is-auto,
    .presence-mode-badge.is-auto {
        color: #7dd3fc !important;
        background: rgba(14, 165, 233, .18) !important;
        border-color: rgba(125, 211, 252, .36) !important;
        box-shadow: 0 0 24px rgba(14, 165, 233, .18) !important;
    }

    .presence-mode-hint.is-eco,
    .presence-mode-badge.is-eco {
        color: #86efac !important;
        background: rgba(34, 197, 94, .18) !important;
        border-color: rgba(134, 239, 172, .38) !important;
        box-shadow: 0 0 24px rgba(34, 197, 94, .18) !important;
    }

    .presence-mode-hint.is-manual,
    .presence-mode-badge.is-manual {
        color: #fdba74 !important;
        background: rgba(249, 115, 22, .18) !important;
        border-color: rgba(251, 146, 60, .38) !important;
        box-shadow: 0 0 24px rgba(249, 115, 22, .18) !important;
    }

    .presence-mode-hint.is-failsafe,
    .presence-mode-badge.is-failsafe {
        color: #fca5a5 !important;
        background: rgba(239, 68, 68, .18) !important;
        border-color: rgba(252, 165, 165, .42) !important;
        box-shadow: 0 0 28px rgba(239, 68, 68, .20) !important;
    }

.presence-smart-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.presence-smart-metric {
    position: relative;
    overflow: hidden;
    min-height: 122px;
    padding: 16px 14px !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, .42) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}

    .presence-smart-metric::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .55;
        pointer-events: none;
        background: radial-gradient(circle at 18% 14%, rgba(255,255,255,.10), transparent 28%);
    }

    .presence-smart-label,
    .presence-smart-metric small {
        position: relative;
        z-index: 1;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        color: rgba(203, 213, 225, .76) !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        letter-spacing: .13em !important;
        text-transform: uppercase !important;
    }

.presence-mini-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #cbd5e1;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
}

.presence-smart-metric strong {
    position: relative;
    z-index: 1;
    display: block !important;
    color: #f8fafc !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: .015em !important;
    text-shadow: 0 0 14px rgba(255,255,255,.10);
}

.presence-smart-caption,
.presence-smart-metric > span:last-child {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    color: rgba(226, 232, 240, .64) !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    line-height: 1.25;
}

/* Occupancy states */
.presence-smart-metric.is-occupied {
    background: linear-gradient(145deg, rgba(34, 197, 94, .18), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(134, 239, 172, .42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(34, 197, 94, .13) !important;
}

    .presence-smart-metric.is-occupied strong,
    #presenceEcoCard.presence-smart-occupied #occupancyStateValue {
        color: #86efac !important;
        text-shadow: 0 0 16px rgba(34, 197, 94, .35) !important;
    }

    .presence-smart-metric.is-occupied .presence-mini-icon {
        color: #86efac !important;
        background: rgba(34, 197, 94, .20) !important;
        border-color: rgba(134, 239, 172, .40) !important;
    }

.presence-smart-metric.is-vacant {
    background: linear-gradient(145deg, rgba(59, 130, 246, .16), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(147, 197, 253, .34) !important;
}

    .presence-smart-metric.is-vacant strong,
    #presenceEcoCard.presence-smart-vacant #occupancyStateValue {
        color: #93c5fd !important;
        text-shadow: 0 0 14px rgba(59, 130, 246, .28) !important;
    }

    .presence-smart-metric.is-vacant .presence-mini-icon {
        color: #93c5fd !important;
        background: rgba(59, 130, 246, .18) !important;
        border-color: rgba(147, 197, 253, .34) !important;
    }

.presence-smart-metric.is-unknown {
    background: linear-gradient(145deg, rgba(148, 163, 184, .12), rgba(15, 23, 42, .48)) !important;
    border-color: rgba(203, 213, 225, .22) !important;
}

    .presence-smart-metric.is-unknown strong,
    #presenceEcoCard.presence-smart-unknown #occupancyStateValue {
        color: #cbd5e1 !important;
    }

/* Radar states */
.presence-smart-metric.is-online {
    background: linear-gradient(145deg, rgba(34, 197, 94, .18), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(134, 239, 172, .42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(34, 197, 94, .13) !important;
}

    .presence-smart-metric.is-online strong,
    #presenceEcoCard #radarAliveValue {
        color: #86efac !important;
        text-shadow: 0 0 16px rgba(34, 197, 94, .35) !important;
    }

    .presence-smart-metric.is-online .presence-mini-icon {
        color: #86efac !important;
        background: rgba(34, 197, 94, .20) !important;
        border-color: rgba(134, 239, 172, .40) !important;
    }

.presence-smart-metric.is-offline {
    background: linear-gradient(145deg, rgba(239, 68, 68, .18), rgba(15, 23, 42, .48)) !important;
    border-color: rgba(252, 165, 165, .42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 30px rgba(239, 68, 68, .16) !important;
}

    .presence-smart-metric.is-offline strong,
    #presenceEcoCard.presence-smart-radar-offline #radarAliveValue {
        color: #fca5a5 !important;
        text-shadow: 0 0 16px rgba(239, 68, 68, .35) !important;
    }

    .presence-smart-metric.is-offline .presence-mini-icon {
        color: #fca5a5 !important;
        background: rgba(239, 68, 68, .20) !important;
        border-color: rgba(252, 165, 165, .40) !important;
    }

/* ECO action states */
.presence-smart-metric.is-monitor {
    background: linear-gradient(145deg, rgba(14, 165, 233, .18), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(125, 211, 252, .40) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px rgba(14, 165, 233, .14) !important;
}

    .presence-smart-metric.is-monitor strong,
    #presenceEcoCard.presence-smart-auto #ecoActionValue {
        color: #7dd3fc !important;
        text-shadow: 0 0 16px rgba(14, 165, 233, .35) !important;
    }

    .presence-smart-metric.is-monitor .presence-mini-icon {
        color: #7dd3fc !important;
        background: rgba(14, 165, 233, .20) !important;
        border-color: rgba(125, 211, 252, .40) !important;
    }

.presence-smart-metric.is-comfort {
    background: linear-gradient(145deg, rgba(34, 197, 94, .18), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(134, 239, 172, .42) !important;
}

    .presence-smart-metric.is-comfort strong,
    #presenceEcoCard.presence-smart-comfort #ecoActionValue {
        color: #86efac !important;
        text-shadow: 0 0 16px rgba(34, 197, 94, .35) !important;
    }

    .presence-smart-metric.is-comfort .presence-mini-icon {
        color: #86efac !important;
        background: rgba(34, 197, 94, .20) !important;
        border-color: rgba(134, 239, 172, .40) !important;
    }

.presence-smart-metric.is-saving {
    background: linear-gradient(145deg, rgba(245, 158, 11, .20), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(251, 191, 36, .44) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(245, 158, 11, .15) !important;
}

    .presence-smart-metric.is-saving strong,
    #presenceEcoCard.presence-smart-saving #ecoActionValue {
        color: #facc15 !important;
        text-shadow: 0 0 16px rgba(245, 158, 11, .34) !important;
    }

    .presence-smart-metric.is-saving .presence-mini-icon {
        color: #facc15 !important;
        background: rgba(245, 158, 11, .20) !important;
        border-color: rgba(251, 191, 36, .42) !important;
    }

.presence-smart-metric.is-flush {
    background: linear-gradient(145deg, rgba(6, 182, 212, .20), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(103, 232, 249, .44) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(6, 182, 212, .16) !important;
}

    .presence-smart-metric.is-flush strong,
    #presenceEcoCard.presence-smart-flush #ecoActionValue {
        color: #67e8f9 !important;
        text-shadow: 0 0 16px rgba(6, 182, 212, .36) !important;
    }

    .presence-smart-metric.is-flush .presence-mini-icon {
        color: #67e8f9 !important;
        background: rgba(6, 182, 212, .20) !important;
        border-color: rgba(103, 232, 249, .42) !important;
    }

.presence-smart-metric.is-manual {
    background: linear-gradient(145deg, rgba(249, 115, 22, .20), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(251, 146, 60, .44) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(249, 115, 22, .16) !important;
}

    .presence-smart-metric.is-manual strong,
    #presenceEcoCard.presence-smart-manual #ecoActionValue {
        color: #fdba74 !important;
        text-shadow: 0 0 16px rgba(249, 115, 22, .36) !important;
    }

    .presence-smart-metric.is-manual .presence-mini-icon {
        color: #fdba74 !important;
        background: rgba(249, 115, 22, .20) !important;
        border-color: rgba(251, 146, 60, .42) !important;
    }

.presence-smart-metric.is-failsafe {
    background: linear-gradient(145deg, rgba(239, 68, 68, .20), rgba(15, 23, 42, .46)) !important;
    border-color: rgba(252, 165, 165, .44) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 32px rgba(239, 68, 68, .18) !important;
}

    .presence-smart-metric.is-failsafe strong,
    #presenceEcoCard.presence-smart-failsafe #ecoActionValue {
        color: #fca5a5 !important;
        text-shadow: 0 0 16px rgba(239, 68, 68, .38) !important;
    }

    .presence-smart-metric.is-failsafe .presence-mini-icon {
        color: #fca5a5 !important;
        background: rgba(239, 68, 68, .20) !important;
        border-color: rgba(252, 165, 165, .42) !important;
    }

.presence-smart-reason-wrap,
.presence-eco-reason {
    position: relative !important;
    z-index: 1 !important;
}

.presence-smart-reason-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 17px;
    color: rgba(226, 232, 240, .82);
    background: rgba(15, 23, 42, .40);
    border: 1px solid rgba(148, 163, 184, .16);
}

    .presence-smart-reason-wrap > i {
        color: #93c5fd;
        margin-top: 1px;
    }

    .presence-smart-reason-wrap .presence-eco-reason,
    .presence-eco-reason {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: inherit !important;
        font-size: 12.5px !important;
        font-weight: 720 !important;
        line-height: 1.42 !important;
    }

#presenceEcoCard.presence-smart-eco {
    border-color: rgba(134, 239, 172, .38) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.28), 0 0 34px rgba(34, 197, 94, .13) !important;
}

#presenceEcoCard.presence-smart-manual {
    border-color: rgba(251, 146, 60, .38) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.28), 0 0 34px rgba(249, 115, 22, .13) !important;
}

#presenceEcoCard.presence-smart-radar-offline {
    border-color: rgba(252, 165, 165, .48) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.30), 0 0 38px rgba(239, 68, 68, .18) !important;
}

    #presenceEcoCard.presence-smart-radar-offline .presence-smart-reason-wrap {
        color: #fecaca !important;
        background: rgba(127, 29, 29, .24) !important;
        border-color: rgba(252, 165, 165, .28) !important;
    }

.presence-smart-flush,
.presence-eco-flush {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px !important;
    padding: 11px 13px !important;
    border-radius: 16px !important;
    color: #67e8f9 !important;
    background: rgba(6, 182, 212, .14) !important;
    border: 1px solid rgba(103, 232, 249, .30) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    box-shadow: 0 0 22px rgba(6, 182, 212, .12) !important;
}

/* Compact mode when card is inside Multi-Zone Overview */
.zone-matrix #presenceEcoCard.presence-compact-card {
    margin-top: 18px !important;
    padding: 16px !important;
}

.zone-matrix #presenceEcoCard .presence-smart-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.zone-matrix #presenceEcoCard .presence-smart-metric {
    min-height: 122px;
}

@media (max-width: 1180px) {
    .presence-smart-grid,
    .zone-matrix #presenceEcoCard .presence-smart-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    #presenceEcoCard.presence-smart-card {
        margin-top: 12px !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .presence-smart-head {
        gap: 10px;
    }

    .presence-smart-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 14px;
    }

    .presence-smart-title {
        font-size: 15px;
    }

    .presence-smart-kicker {
        font-size: 9px;
        letter-spacing: .13em;
    }

    .presence-mode-hint,
    .presence-mode-badge {
        min-width: 96px;
        max-width: 118px;
        padding: 7px 9px !important;
        font-size: 9px !important;
    }

    .presence-smart-grid,
    .zone-matrix #presenceEcoCard .presence-smart-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .presence-smart-metric {
        min-height: 88px;
        padding: 12px !important;
        border-radius: 18px !important;
    }

        .presence-smart-metric strong {
            font-size: 17px !important;
        }

        .presence-smart-caption,
        .presence-smart-metric > span:last-child {
            font-size: 11px !important;
        }
}
/* =========================================================
   MOBILE LD240 PRESENCE CARD - COMPACT APP STYLE
   Keep this block at the very end of site.css
   ========================================================= */
@media (max-width: 768px) {
    .zone-matrix .presence-smart-card,
    .presence-smart-card.presence-compact-card {
        margin-top: 12px !important;
        padding: 13px !important;
        border-radius: 22px !important;
        background: radial-gradient(circle at top left, rgba(88, 255, 177, .13), transparent 34%), radial-gradient(circle at top right, rgba(82, 183, 255, .14), transparent 36%), rgba(255, 255, 255, .055) !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 0 14px 36px rgba(0, 0, 0, .22) !important;
    }

    .presence-smart-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .presence-smart-title {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        min-width: 0 !important;
    }

        .presence-smart-title .eyebrow {
            margin-bottom: 2px !important;
            font-size: 8.5px !important;
            letter-spacing: .12em !important;
            white-space: nowrap !important;
        }

        .presence-smart-title h3 {
            margin: 0 !important;
            font-size: 13px !important;
            line-height: 1.1 !important;
            white-space: nowrap !important;
        }

    .presence-smart-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 13px !important;
    }

        .presence-smart-icon i {
            font-size: 14px !important;
        }

    .presence-mode-badge,
    #presenceModeHint {
        min-width: 76px !important;
        max-width: 88px !important;
        padding: 5px 8px !important;
        border-radius: 999px !important;
        font-size: 8.5px !important;
        line-height: 1.05 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .presence-smart-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .presence-smart-metric {
        min-height: 72px !important;
        padding: 10px !important;
        border-radius: 17px !important;
    }

        .presence-smart-metric:nth-child(3) {
            grid-column: 1 / -1 !important;
            min-height: 68px !important;
        }

        .presence-smart-metric small {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            margin-bottom: 7px !important;
            font-size: 9px !important;
            letter-spacing: .08em !important;
        }

            .presence-smart-metric small i {
                font-size: 12px !important;
            }

        .presence-smart-metric strong {
            font-size: 14px !important;
            line-height: 1.1 !important;
        }

        .presence-smart-metric span {
            margin-top: 3px !important;
            font-size: 10px !important;
            line-height: 1.25 !important;
            opacity: .78 !important;
        }

    .presence-smart-reason,
    #ecoReasonValue {
        margin-top: 9px !important;
        padding: 9px 10px !important;
        border-radius: 15px !important;
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }

    .presence-smart-flush,
    #ecoFlushValue {
        margin-top: 8px !important;
        padding: 8px 10px !important;
        font-size: 10.5px !important;
        border-radius: 14px !important;
    }
}
/* =========================================================
   LD240 MOBILE COMPACT FIX - STRONG OVERRIDE
   Put this block at the VERY END of site.css
   ========================================================= */

@media (max-width: 768px) {
    .zone-matrix #presenceEcoCard.presence-smart-card,
    #presenceEcoCard.presence-smart-card.presence-compact-card {
        margin-top: 12px !important;
        padding: 13px !important;
        border-radius: 22px !important;
    }

    .zone-matrix #presenceEcoCard .presence-smart-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .zone-matrix #presenceEcoCard .presence-smart-title {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        min-width: 0 !important;
    }

        .zone-matrix #presenceEcoCard .presence-smart-title .eyebrow {
            font-size: 8.5px !important;
            letter-spacing: .12em !important;
            margin-bottom: 2px !important;
        }

        .zone-matrix #presenceEcoCard .presence-smart-title h3 {
            font-size: 13px !important;
            line-height: 1.1 !important;
            margin: 0 !important;
        }

    .zone-matrix #presenceEcoCard .presence-smart-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 13px !important;
    }

    .zone-matrix #presenceEcoCard #presenceModeHint,
    .zone-matrix #presenceEcoCard .presence-mode-badge {
        min-width: 76px !important;
        max-width: 88px !important;
        padding: 5px 8px !important;
        font-size: 8.5px !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .zone-matrix #presenceEcoCard .presence-smart-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .zone-matrix #presenceEcoCard .presence-smart-metric {
        min-height: 72px !important;
        padding: 10px !important;
        border-radius: 17px !important;
    }

        .zone-matrix #presenceEcoCard .presence-smart-metric:nth-child(3) {
            grid-column: 1 / -1 !important;
            min-height: 68px !important;
        }

        .zone-matrix #presenceEcoCard .presence-smart-metric small {
            font-size: 9px !important;
            letter-spacing: .08em !important;
            margin-bottom: 7px !important;
        }

        .zone-matrix #presenceEcoCard .presence-smart-metric strong {
            font-size: 14px !important;
            line-height: 1.1 !important;
        }

        .zone-matrix #presenceEcoCard .presence-smart-metric span {
            font-size: 10px !important;
            line-height: 1.25 !important;
            margin-top: 3px !important;
        }

    .zone-matrix #presenceEcoCard #ecoReasonValue,
    .zone-matrix #presenceEcoCard .presence-smart-reason {
        margin-top: 9px !important;
        padding: 9px 10px !important;
        border-radius: 15px !important;
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }
}
/* =========================================================
   DESKTOP IAQ HERO - FILL EMPTY SPACE
   ========================================================= */

@media (min-width: 1101px) {
    .iaq-node {
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

        .iaq-node::after {
            content: "";
            position: absolute;
            right: -80px;
            bottom: -80px;
            width: 260px;
            height: 260px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(82,183,255,.13), transparent 68%);
            pointer-events: none;
        }

    .iaq-insight-card {
        position: relative;
        z-index: 1;
        margin-top: 26px;
        padding: 16px 18px;
        border-radius: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        background: linear-gradient(135deg, rgba(88,255,177,.10), rgba(82,183,255,.08));
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

        .iaq-insight-card strong {
            display: block;
            color: #f8fafc;
            font-size: 18px;
            font-weight: 900;
            margin-bottom: 6px;
        }

        .iaq-insight-card p {
            margin: 0;
            color: rgba(226,232,240,.72);
            font-size: 13px;
            line-height: 1.45;
        }

        .iaq-insight-card i {
            width: 46px;
            height: 46px;
            min-width: 46px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            color: var(--green);
            background: rgba(88,255,177,.12);
            border: 1px solid rgba(88,255,177,.20);
            font-size: 20px;
        }

    .iaq-mini-strip {
        position: relative;
        z-index: 1;
        margin-top: 14px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

        .iaq-mini-strip > div {
            min-height: 76px;
            padding: 13px 14px;
            border-radius: 18px;
            background: rgba(255,255,255,.045);
            border: 1px solid rgba(255,255,255,.08);
        }

        .iaq-mini-strip small {
            display: block;
            color: rgba(226,232,240,.56);
            font-size: 10px;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: .10em;
            margin-bottom: 9px;
        }

        .iaq-mini-strip strong {
            color: #dfffee;
            font-size: 16px;
            font-weight: 900;
        }
}
/* IAQ insight live state colors */
.iaq-mini-strip > div.good strong {
    color: var(--green) !important;
}

.iaq-mini-strip > div.warn strong {
    color: var(--orange) !important;
}

.iaq-mini-strip > div.danger strong {
    color: var(--red) !important;
}

.iaq-mini-strip > div.unknown strong {
    color: #cbd5e1 !important;
}

.iaq-insight-card.good {
    border-color: rgba(88,255,177,.20) !important;
}

    .iaq-insight-card.good i {
        color: var(--green) !important;
        background: rgba(88,255,177,.12) !important;
    }

.iaq-insight-card.warn {
    border-color: rgba(255,174,88,.28) !important;
    background: linear-gradient(135deg, rgba(255,174,88,.12), rgba(82,183,255,.06)) !important;
}

    .iaq-insight-card.warn i {
        color: var(--orange) !important;
        background: rgba(255,174,88,.13) !important;
        border-color: rgba(255,174,88,.22) !important;
    }

.iaq-insight-card.danger {
    border-color: rgba(255,77,109,.32) !important;
    background: linear-gradient(135deg, rgba(255,77,109,.13), rgba(255,174,88,.07)) !important;
}

    .iaq-insight-card.danger i {
        color: var(--red) !important;
        background: rgba(255,77,109,.14) !important;
        border-color: rgba(255,77,109,.26) !important;
    }