:root {
    color-scheme: light;
    --ink: #1d2926;
    --muted: #64736d;
    --line: #d7dfd9;
    --paper: #f5f7f3;
    --white: #fff;
    --green: #196b55;
    --green-pale: #dcece4;
    --amber: #a45b20;
    --temperature: #117b8d;
    --temperature-pale: #e6f4f5;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Aptos", "Segoe UI", sans-serif;
    font-size: 15px;
}

a { color: inherit; text-decoration: none; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--line); background: var(--white); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.brand-mark { display: grid; width: 36px; aspect-ratio: 1; place-items: center; background: var(--green); color: var(--white); font-family: Georgia, serif; font-size: 20px; }
.account-link { padding: 9px 0 9px 16px; color: var(--green); font-size: 13px; font-weight: 700; }
.content { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0; flex: 1; }
.shell:has(.apartment-detail-page) > footer { display: none; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 36px; font-weight: 500; }
.empty-state { margin-top: 30px; padding: 30px 0; max-width: 560px; border-top: 3px solid var(--green); animation: arrive 300ms ease-out both; }
.empty-state h2 { margin: 0 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 500; }
.empty-state p:last-child { margin: 0; color: var(--muted); line-height: 1.6; }
.apartment-list { margin-top: 18px; border-top: 1px solid var(--line); }
.apartment-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(180px, 240px) 20px; align-items: center; gap: 16px; min-height: 82px; padding: 12px 8px; border-bottom: 1px solid var(--line); animation: arrive 300ms ease-out both; }
.apartment-row:hover { background: var(--white); }
.apartment-order { color: #8a9690; font-family: Georgia, serif; font-size: 18px; }
.apartment-name strong, .apartment-name small { display: block; }
.apartment-name strong { font-size: 16px; }
.apartment-name small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.apartment-row > .device-count { justify-self: end; }
.row-arrow { color: var(--green); font-size: 20px; }
.back-link { display: inline-block; margin-bottom: 24px; color: var(--green); font-size: 12px; font-weight: 700; }
.apartment-heading { margin-top: 0; padding-bottom: 18px; }
.apartment-live-status { display: flex; align-items: center; gap: 12px; }
.apartment-live-status .quiet-button { padding: 7px 10px; }
.device-count { color: var(--muted); font-size: 12px; }
.apartment-detail-page > .muted { margin-top: 20px; }
.live-sensor-group { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 3px 14px #1d29260b; }
.area-overview { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(230px, 1fr); align-items: center; gap: 14px; padding: 14px; border-left: 4px solid var(--green); background: #f7faf8; }
.area-current-reading { display: grid; justify-items: start; gap: 6px; }
.area-current-heading { display: grid; gap: 4px; }
.area-current-heading .eyebrow { margin: 0; }
.area-current-heading > span { color: var(--muted); font-size: 11px; }
.area-current-reading strong { color: var(--temperature); font-family: Georgia, "Times New Roman", serif; font-size: 32px; font-weight: 500; line-height: 1; white-space: nowrap; }
.live-connection { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.live-connection::before { width: 8px; height: 8px; border-radius: 50%; background: #899690; content: ""; }
.live-connection.connected { border-radius: 20px; background: var(--green-pale); color: var(--green); font-weight: 700; }
.live-connection.connected::before { background: var(--green); }
.live-connection.connecting::before { background: var(--amber); }
.live-connection.disconnected::before { background: #a53d2d; }
.live-sensor-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 0; }
.live-sensor-values > div { display: grid; gap: 5px; padding: 10px 12px; border-left: 3px solid #9bcbd0; background: var(--white); }
.live-sensor-values dt { color: var(--muted); font-size: 10px; }
.live-sensor-values dd { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; }
.area-setpoint { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.area-setpoint-label { color: var(--ink); font-size: 11px; font-weight: 700; }
.area-setpoint-controls { display: flex; align-items: center; gap: 6px; }
.stepper-button { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: var(--green); font: inherit; font-size: 20px; font-weight: 500; line-height: 1; cursor: pointer; }
.stepper-button:hover:not(:disabled) { border-color: var(--green); background: var(--green-pale); }
.stepper-button:disabled { opacity: .4; cursor: not-allowed; }
.area-target-value { display: flex; min-width: 66px; align-items: baseline; justify-content: center; gap: 4px; color: var(--ink); font-size: 18px; font-weight: 700; white-space: nowrap; }
.area-target-value small { color: var(--muted); font-size: 11px; font-weight: 500; }
.area-setpoint .quiet-button { min-height: 34px; padding: 0 11px; border-color: var(--green); border-radius: 4px; background: var(--green); color: var(--white); white-space: nowrap; }
.area-setpoint .quiet-button:hover:not(:disabled) { background: #125844; }
.area-setpoint .quiet-button:disabled { opacity: .48; cursor: not-allowed; }
.area-target-message { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.live-entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 6px; padding: 8px 10px 10px; background: var(--white); }
.live-entity { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-top: 2px solid var(--green); border-radius: 5px; background: var(--white); color: var(--ink); font: inherit; text-align: left; box-shadow: 0 2px 8px #1d292608; animation: arrive 300ms ease-out both; cursor: pointer; }
.live-entity.disabled { border-color: #d2d8d4; border-top-color: #aeb7b2; background: #eef0ee; color: #68736d; box-shadow: none; }
.live-entity:disabled { cursor: not-allowed; opacity: .7; }
.live-entity:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.thermostat-card-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; }
.thermostat-name { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.thermostat-command-message { display: block; margin-top: 6px; color: #a94830; font-size: 11px; }
.thermostat-indicators { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.thermostat-indicator { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; font-family: "Segoe UI Symbol", sans-serif; font-size: 15px; line-height: 1; }
.thermostat-indicator.power.enabled { background: var(--green-pale); color: var(--green); }
.thermostat-indicator.power.disabled, .thermostat-indicator.unavailable, .thermostat-indicator.heat.inactive { background: #dce1dd; color: #647069; }
.thermostat-indicator.heat.active { background: var(--temperature-pale); color: var(--temperature); }
.thermostat-indicator.heat.heating { background: #fff0e3; color: #874515; animation: heat-icon 1.2s ease-in-out infinite; }
.loading { color: var(--muted); }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: linear-gradient(135deg, #edf2ec 0%, #f8f8f4 52%, #e1ece6 100%); }
.login-form { display: grid; width: min(420px, 100%); gap: 12px; padding: 32px; border-top: 3px solid var(--green); background: var(--white); box-shadow: 0 18px 50px #1d292614; }
.login-form .brand { margin-bottom: 24px; }
.login-form h1 { margin: 0 0 10px; }
.login-form label { margin-top: 5px; font-size: 12px; font-weight: 700; }
.login-form input:not([type="checkbox"]) { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; }
.login-form .remember { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 400; }
.login-form button { min-height: 44px; margin-top: 8px; border: 0; background: var(--green); color: var(--white); font: inherit; font-weight: 700; cursor: pointer; }
.validation-summary, .field-error { color: #a53d2d; font-size: 12px; }
.cancel-link { margin-top: 10px; color: var(--green); text-align: center; font-size: 13px; }
.text-action { display: inline-block; margin-top: 18px; color: var(--green); font-size: 13px; font-weight: 700; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.admin-section { min-width: 0; padding: 22px 0; border-top: 2px solid var(--ink); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; }
.section-heading > span { color: var(--muted); font-size: 12px; }
.section-heading .eyebrow { margin-bottom: 6px; }
.quiet-button { padding: 10px 12px; border: 1px solid var(--line); background: var(--white); color: var(--green); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.quiet-button:disabled { opacity: .6; cursor: progress; }
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 14px; }
.admin-toolbar .primary-action { border: 0; font: inherit; cursor: pointer; }
.danger-button { min-height: 40px; padding: 0 12px; border: 1px solid #a53d2d; background: var(--white); color: #a53d2d; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.danger-button:disabled { opacity: .5; cursor: not-allowed; }
.user-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.admin-table th { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.admin-table th:first-child, .admin-table td:first-child { width: 88px; }
.admin-table tr.selected { background: var(--green-pale); }
.admin-table input { accent-color: var(--green); }
.admin-hub { margin-top: 22px; border-top: 1px solid var(--line); }
.admin-hub-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 10px; border-bottom: 1px solid var(--line); }
.admin-hub-row:hover { background: var(--white); }
.admin-hub-row strong, .admin-hub-row small { display: block; }
.admin-hub-row strong { font-size: 15px; }
.admin-hub-row small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.admin-hub-row > span:last-child { color: var(--green); font-size: 20px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: #13221dcc; }
.admin-modal { width: min(520px, 100%); max-height: min(90vh, 820px); overflow-y: auto; padding: 22px; border-top: 3px solid var(--green); background: var(--white); box-shadow: 0 18px 50px #101a1640; }
.device-modal { width: min(760px, 100%); }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.modal-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; }
.modal-close { display: grid; width: 36px; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 22px; cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-actions button { min-height: 40px; }
.access-list { display: grid; border-top: 1px solid var(--line); }
.access-option { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 13px; }
.access-option input { width: 16px; height: 16px; accent-color: var(--green); }
.admin-form { display: grid; gap: 8px; margin: 18px 0 24px; }
.device-registration-form { grid-template-columns: minmax(0, 1fr); }
.form-hint { margin: 2px 0 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.admin-form label { margin-top: 5px; font-size: 12px; font-weight: 700; }
.admin-form input, .admin-form select { width: 100%; min-height: 39px; padding: 7px 9px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; }
.admin-form button { min-height: 40px; margin-top: 8px; border: 0; background: var(--green); color: var(--white); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-pair > div { display: grid; gap: 8px; }
.compact-list { border-top: 1px solid var(--line); }
.compact-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.compact-row strong, .compact-row small { display: block; }
.compact-row strong { color: var(--ink); font-size: 13px; }
.compact-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.access-form { padding-top: 18px; border-top: 1px solid var(--line); }
.discovery-section { margin-top: 22px; }
.candidate-table { overflow-x: auto; border-top: 1px solid var(--line); }
.candidate-head, .candidate-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 1fr) minmax(120px, 1fr) 55px 85px 90px; align-items: center; gap: 12px; min-width: 790px; padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; }
.candidate-head { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.candidate-row strong { overflow-wrap: anywhere; }
.row-action { border: 0; background: transparent; color: var(--green); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.inspection-form { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); align-items: center; max-width: 720px; }
.inspection-form button, .inspection-form .validation-message { grid-column: 1 / -1; }
.inspection-result { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.inspection-result h3, .enrollment-form h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 500; }
.identity-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; max-width: 680px; margin: 18px 0 28px; font-size: 12px; }
.identity-grid dt { color: var(--muted); }
.identity-grid dd { margin: 0; overflow-wrap: anywhere; }
.entity-review { border-top: 1px solid var(--line); padding-top: 18px; }
.entity-review h3 { margin-bottom: 12px; }
.entity-row { display: grid; grid-template-columns: 100px minmax(140px, 1fr) minmax(100px, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 11px; }
.entity-type { color: var(--green); font-weight: 700; }
.enrollment-form { max-width: 680px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.enrollment-form select { min-height: 39px; padding: 7px 9px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; }
.confirm-identity { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.confirm-identity input { width: 16px; height: 16px; accent-color: var(--green); }
.muted { color: var(--muted); font-size: 13px; }
.registry-heading { align-items: center; }
.primary-action { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: var(--green); color: var(--white); font-size: 12px; font-weight: 700; }
.primary-action span { font-size: 18px; line-height: 1; }
.registry-empty { display: grid; min-height: 48vh; align-content: center; justify-items: center; padding: 30px 20px; text-align: center; }
.registry-empty h2 { margin: 18px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 500; }
.registry-empty p { max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.empty-mark { display: grid; width: 44px; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); color: var(--green); font-size: 25px; }
.registry-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 10px; margin-top: 20px; }
.registry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 7px 10px; min-height: 68px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); font-size: 11px; }
.registry-row:hover { border-color: var(--green); }
.registry-apartment { grid-column: 1; }
.registry-apartment strong, .registry-apartment small { display: block; }
.registry-apartment strong { color: var(--ink); font-size: 14px; }
.registry-apartment small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.registry-row > span:nth-child(2) { grid-column: 1; color: var(--muted); font-size: 10px; }
.registry-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 10px; text-align: right; }
.registry-device { grid-column: 1 / -1; display: grid; gap: 3px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.registry-device strong { color: var(--ink); font-size: 11px; }
.registry-device small { color: var(--muted); font-size: 10px; }
.registry-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 9px; border-top: 1px solid var(--line); }
.registry-actions a { color: var(--green); font-size: 11px; font-weight: 700; }
.device-edit-layout { width: min(760px, 100%); margin: 24px auto 0; }
.edit-complete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.apartment-create-layout { width: min(760px, 100%); margin: 0 auto; }
.apartment-create-form { gap: 0; }
.create-section { display: grid; gap: 9px; padding: 22px 0; border-top: 1px solid var(--line); }
.create-section h2 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 500; }
.create-section label:not(.candidate-option) { margin-top: 6px; font-size: 12px; font-weight: 700; }
.device-choice-section .section-heading { margin: 0 0 8px; }
.candidate-options { display: grid; gap: 8px; margin: 6px 0; }
.candidate-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.device-discovery-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.device-discovery-heading h3 { margin: 0; font-size: 13px; }
.manual-address-toggle { margin-top: 12px; }
.step-action { margin-top: 12px; border: 0; font: inherit; cursor: pointer; }
.selected-endpoint { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 12px; margin: 10px 0 18px; padding: 12px; border-left: 3px solid var(--green); background: var(--green-pale); }
.selected-endpoint span { color: var(--muted); font-size: 11px; }
.selected-endpoint strong { overflow-wrap: anywhere; font-size: 13px; }
.selected-endpoint .text-action { grid-column: 2; grid-row: 1 / span 2; }
.device-confirmation { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.verification-success { margin: 0 0 14px; color: var(--green); font-size: 13px; font-weight: 700; }
.verified-device { display: grid; gap: 8px; margin: 0; }
.verified-device > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: 12px; }
.verified-device dt { color: var(--muted); }
.verified-device dd { margin: 0; overflow-wrap: anywhere; }
.device-confirmation .save-device-button { min-height: 40px; margin-top: 16px; padding: 0 14px; border: 0; background: var(--green); color: var(--white); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.device-confirmation .save-device-button:disabled { opacity: .55; cursor: not-allowed; }
.candidate-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.candidate-option:has(input:checked) { border-color: var(--green); box-shadow: inset 3px 0 var(--green); }
.candidate-option input { margin-top: 3px; accent-color: var(--green); }
.candidate-option-copy { display: grid; gap: 4px; min-width: 0; }
.candidate-option-copy strong { font-size: 12px; overflow-wrap: anywhere; }
.candidate-option-copy small { color: var(--muted); font-size: 11px; }
.manual-option { margin-top: 10px; }
.device-endpoint-fields { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); align-items: center; gap: 9px 14px; margin-top: 14px; }
.device-endpoint-fields input { min-width: 0; min-height: 39px; padding: 7px 9px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; }
.device-endpoint-fields .validation-message { grid-column: 2; }
.create-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.create-actions .cancel-link { margin: 0; }
.create-actions button { min-height: 42px; padding: 0 16px; border: 0; background: var(--green); color: var(--white); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.create-actions button:disabled { opacity: .55; cursor: not-allowed; }
.notice { padding: 11px 14px; border-left: 3px solid var(--green); background: var(--green-pale); color: var(--ink); font-size: 13px; }
.notice.error { border-left-color: #a53d2d; background: #f7e6e1; }
footer { display: flex; justify-content: space-between; gap: 18px; padding: 18px clamp(20px, 5vw, 72px); border-top: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 700; }
footer span { color: var(--muted); font-weight: 400; }

@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heat-icon { 50% { opacity: .55; transform: translateY(-2px); } }

@media (max-width: 640px) {
    .content { padding-top: 32px; }
    .area-overview { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
    .area-setpoint { grid-template-columns: minmax(0, 1fr); }
    .area-setpoint-controls { flex-wrap: wrap; }
    .live-entity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 7px; }
    .live-entity { padding: 7px; }
    .thermostat-card-heading { gap: 4px; }
    .thermostat-card-heading h3 { font-size: 11px; }
    .thermostat-indicators { gap: 3px; }
    .thermostat-indicator { width: 22px; height: 22px; font-size: 14px; }
    .page-heading { align-items: center; }
    h1 { font-size: 30px; }
    .admin-grid { grid-template-columns: 1fr; gap: 0; }
    .page-heading .quiet-button { max-width: 160px; }
    .registry-list { grid-template-columns: 1fr; }
    .device-endpoint-fields { grid-template-columns: 1fr; gap: 6px; }
    .device-endpoint-fields .validation-message { grid-column: 1; }
    .candidate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .create-actions { align-items: stretch; flex-direction: column-reverse; }
    .modal-backdrop { align-items: end; padding: 0; }
    .admin-modal { max-height: 92vh; padding: 18px 20px 24px; }
    .admin-toolbar > button { flex: 1 1 140px; }
    .apartment-row { grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 10px; }
    .apartment-row > .device-count { grid-column: 2; grid-row: 2; justify-self: start; margin-top: -12px; }
    .row-arrow { grid-column: 3; grid-row: 1 / span 2; }
    .live-panel-heading { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .thermostat-indicator.heat.heating { animation: none; }
}

@media (min-width: 641px) and (max-width: 960px) {
    .candidate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.shell:not(:has(.apartment-detail-page)) {
    --ink: #18332f;
    --muted: #60736d;
    --line: #cfdbd4;
    --paper: #edf4ef;
    --white: #ffffff;
    --green: #155e4e;
    --green-pale: #dcece2;
    --amber: #a94830;
    --accent: #f16d50;
    --accent-pale: #ffebe3;
    --lime: #d9ef7b;
    min-height: 100vh;
    background-color: var(--paper);
    background-image: radial-gradient(#155e4e12 .7px, transparent .7px);
    background-size: 15px 15px;
    color: var(--ink);
}

.shell:not(:has(.apartment-detail-page)) .topbar {
    height: 78px;
    border: 0;
    border-bottom: 4px solid var(--accent);
    background: var(--ink);
    color: var(--white);
}

.shell:not(:has(.apartment-detail-page)) .brand-mark {
    background: var(--accent);
    color: var(--ink);
    font-weight: 700;
}

.shell:not(:has(.apartment-detail-page)) .brand small { color: #b6ccc3; }
.shell:not(:has(.apartment-detail-page)) .account-link { color: var(--lime); }
.shell:not(:has(.apartment-detail-page)) .account-link:hover { color: var(--white); }
.shell:not(:has(.apartment-detail-page)) .content { width: min(1240px, calc(100% - 56px)); padding: 46px 0 64px; }

.shell:not(:has(.apartment-detail-page)) .page-heading {
    align-items: flex-end;
    padding: 0 0 26px;
    border: 0;
}

.shell:not(:has(.apartment-detail-page)) .page-heading h1 {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.02;
}

.shell:not(:has(.apartment-detail-page)) .eyebrow { color: var(--amber); }
.shell:not(:has(.apartment-detail-page)) .back-link { margin-bottom: 22px; color: var(--green); }
.shell:not(:has(.apartment-detail-page)) .back-link:hover { color: var(--amber); }

.shell:not(:has(.apartment-detail-page)) .primary-action,
.shell:not(:has(.apartment-detail-page)) .admin-form button,
.shell:not(:has(.apartment-detail-page)) .create-actions button,
.shell:not(:has(.apartment-detail-page)) .device-confirmation .save-device-button {
    border: 0;
    border-radius: 4px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 800;
    transition: background-color 140ms ease, transform 140ms ease;
}

.shell:not(:has(.apartment-detail-page)) .primary-action:hover,
.shell:not(:has(.apartment-detail-page)) .admin-form button:hover:not(:disabled),
.shell:not(:has(.apartment-detail-page)) .create-actions button:hover:not(:disabled),
.shell:not(:has(.apartment-detail-page)) .device-confirmation .save-device-button:hover:not(:disabled) {
    background: var(--lime);
    transform: translateY(-1px);
}

.shell:not(:has(.apartment-detail-page)) .quiet-button {
    border-color: var(--line);
    border-radius: 4px;
    background: var(--white);
    color: var(--green);
    transition: border-color 140ms ease, background-color 140ms ease;
}

.shell:not(:has(.apartment-detail-page)) .quiet-button:hover:not(:disabled) {
    border-color: var(--green);
    background: var(--green-pale);
}

.shell:not(:has(.apartment-detail-page)) .text-action { color: var(--green); }
.shell:not(:has(.apartment-detail-page)) .text-action:hover { color: var(--amber); }

.shell:not(:has(.apartment-detail-page)) .apartment-list {
    display: grid;
    gap: 9px;
    margin-top: 6px;
    border: 0;
}

.shell:not(:has(.apartment-detail-page)) .apartment-row {
    grid-template-columns: 58px minmax(0, 1fr) minmax(120px, 190px) 26px;
    min-height: 88px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--green);
    border-radius: 5px;
    background: var(--white);
    box-shadow: 0 3px 12px #18332f0a;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.shell:not(:has(.apartment-detail-page)) .apartment-row:hover {
    transform: translateX(3px);
    border-color: var(--green);
    border-left-color: var(--accent);
    background: var(--white);
    box-shadow: 0 7px 20px #18332f12;
}

.shell:not(:has(.apartment-detail-page)) .apartment-order {
    color: var(--amber);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
}

.shell:not(:has(.apartment-detail-page)) .apartment-name strong { font-size: 18px; }
.shell:not(:has(.apartment-detail-page)) .apartment-name small { color: var(--muted); }
.shell:not(:has(.apartment-detail-page)) .apartment-row > .device-count { color: var(--green); font-weight: 700; }
.shell:not(:has(.apartment-detail-page)) .row-arrow { color: var(--accent); font-size: 24px; }

.shell:not(:has(.apartment-detail-page)) .empty-state {
    max-width: 720px;
    margin-top: 14px;
    padding: 30px;
    border: 1px solid var(--line);
    border-top: 5px solid var(--accent);
    border-radius: 6px;
    background: var(--white);
}

.shell:not(:has(.apartment-detail-page)) .empty-state h2,
.shell:not(:has(.apartment-detail-page)) .registry-empty h2 {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
}

.shell:not(:has(.apartment-detail-page)) .empty-state p:last-child { color: var(--muted); }

.shell:not(:has(.apartment-detail-page)) .admin-hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
    border: 0;
}

.shell:not(:has(.apartment-detail-page)) .admin-hub-row {
    min-height: 145px;
    align-items: flex-end;
    padding: 22px;
    border: 1px solid var(--line);
    border-top: 5px solid var(--green);
    border-radius: 6px;
    background: var(--white);
    box-shadow: 0 4px 16px #18332f0b;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.shell:not(:has(.apartment-detail-page)) .admin-hub-row:hover {
    transform: translateY(-3px);
    border-top-color: var(--accent);
    background: var(--white);
    box-shadow: 0 10px 24px #18332f16;
}

.shell:not(:has(.apartment-detail-page)) .admin-hub-row strong { font-size: 20px; }
.shell:not(:has(.apartment-detail-page)) .admin-hub-row small { color: var(--muted); }
.shell:not(:has(.apartment-detail-page)) .admin-hub-row > span:last-child { color: var(--accent); font-size: 28px; }

.shell:not(:has(.apartment-detail-page)) .registry-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
    margin-top: 8px;
}

.shell:not(:has(.apartment-detail-page)) .registry-row {
    gap: 9px 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--green);
    border-radius: 6px;
    background: var(--white);
    box-shadow: 0 3px 12px #18332f0a;
    transition: border-color 140ms ease, transform 140ms ease;
}

.shell:not(:has(.apartment-detail-page)) .registry-row:hover { transform: translateY(-2px); border-color: var(--green); }
.shell:not(:has(.apartment-detail-page)) .registry-apartment strong { font-size: 17px; }
.shell:not(:has(.apartment-detail-page)) .registry-row > span:nth-child(2) { color: var(--muted); font-size: 11px; }
.shell:not(:has(.apartment-detail-page)) .registry-status { color: var(--amber); font-weight: 800; }
.shell:not(:has(.apartment-detail-page)) .registry-device { border-color: var(--line); }

.shell:not(:has(.apartment-detail-page)) .registry-actions a {
    padding: 6px 9px;
    border-radius: 3px;
    background: var(--green-pale);
    color: var(--green);
}

.shell:not(:has(.apartment-detail-page)) .registry-actions a:hover { background: var(--lime); }
.shell:not(:has(.apartment-detail-page)) .registry-empty { border: 1px dashed #9caea5; border-radius: 6px; background: #ffffffa8; }
.shell:not(:has(.apartment-detail-page)) .empty-mark { border: 0; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 700; }

.shell:not(:has(.apartment-detail-page)) .admin-toolbar {
    gap: 9px;
    margin: 4px 0 20px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #ffffffb8;
}

.shell:not(:has(.apartment-detail-page)) .danger-button { border-radius: 4px; }
.shell:not(:has(.apartment-detail-page)) .user-table-wrap { border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.shell:not(:has(.apartment-detail-page)) .admin-table th { background: var(--ink); color: var(--lime); }
.shell:not(:has(.apartment-detail-page)) .admin-table th, .shell:not(:has(.apartment-detail-page)) .admin-table td { padding: 14px 12px; }
.shell:not(:has(.apartment-detail-page)) .admin-table tr.selected { background: var(--green-pale); }
.shell:not(:has(.apartment-detail-page)) .admin-table input { accent-color: var(--amber); }

.shell:not(:has(.apartment-detail-page)) .apartment-create-layout,
.shell:not(:has(.apartment-detail-page)) .device-edit-layout { width: min(820px, 100%); }

.shell:not(:has(.apartment-detail-page)) .create-section {
    margin: 12px 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--green);
    border-radius: 5px;
    background: var(--white);
    box-shadow: 0 3px 12px #18332f09;
}

.shell:not(:has(.apartment-detail-page)) .create-section h2,
.shell:not(:has(.apartment-detail-page)) .inspection-result h3,
.shell:not(:has(.apartment-detail-page)) .enrollment-form h3 { color: var(--ink); }

.shell:not(:has(.apartment-detail-page)) .admin-form input,
.shell:not(:has(.apartment-detail-page)) .admin-form select,
.shell:not(:has(.apartment-detail-page)) .device-endpoint-fields input,
.shell:not(:has(.apartment-detail-page)) .enrollment-form select {
    border-color: #b8c9c0;
    border-radius: 3px;
    background: #fbfdfb;
}

.shell:not(:has(.apartment-detail-page)) .admin-form input:focus,
.shell:not(:has(.apartment-detail-page)) .admin-form select:focus,
.shell:not(:has(.apartment-detail-page)) .device-endpoint-fields input:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

.shell:not(:has(.apartment-detail-page)) .candidate-option { border-color: var(--line); border-radius: 4px; }
.shell:not(:has(.apartment-detail-page)) .candidate-option:hover { border-color: var(--green); }
.shell:not(:has(.apartment-detail-page)) .candidate-option:has(input:checked) { border-color: var(--green); background: var(--green-pale); box-shadow: inset 4px 0 var(--accent); }
.shell:not(:has(.apartment-detail-page)) .candidate-option input { accent-color: var(--green); }
.shell:not(:has(.apartment-detail-page)) .selected-endpoint { border-left-color: var(--accent); border-radius: 4px; background: var(--green-pale); }
.shell:not(:has(.apartment-detail-page)) .create-actions { margin-top: 12px; padding-top: 16px; }
.shell:not(:has(.apartment-detail-page)) .notice { border-left-color: var(--green); border-radius: 3px; background: var(--green-pale); }
.shell:not(:has(.apartment-detail-page)) .notice.error { border-left-color: #b4422f; background: var(--accent-pale); }
.shell:not(:has(.apartment-detail-page)) footer { border-color: var(--line); background: var(--ink); color: var(--white); }
.shell:not(:has(.apartment-detail-page)) footer span { color: #b6ccc3; }

.shell:not(:has(.apartment-detail-page)) .modal-backdrop { background: #102623d9; }
.shell:not(:has(.apartment-detail-page)) .admin-modal { border-top: 5px solid var(--accent); border-radius: 6px; box-shadow: 0 24px 70px #0e201d55; }
.shell:not(:has(.apartment-detail-page)) .modal-close { border-radius: 50%; }

.login-page {
    --ink: #18332f;
    --muted: #60736d;
    --line: #cfdbd4;
    --white: #fff;
    --green: #155e4e;
    --green-pale: #dcece2;
    --accent: #f16d50;
    --lime: #d9ef7b;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #18332f;
    background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
    background-size: 34px 34px;
}

.login-page::before {
    position: absolute;
    z-index: -1;
    top: -18vh;
    right: -10vw;
    width: 52vw;
    height: 136vh;
    border: 1px solid #d9ef7b44;
    background: #f16d5014;
    content: "";
    transform: rotate(18deg);
}

.login-form {
    width: min(440px, 100%);
    padding: 38px;
    border: 1px solid #ffffff36;
    border-top: 5px solid var(--accent);
    border-radius: 7px;
    background: var(--white);
    box-shadow: 0 28px 80px #081c194d;
}

.login-form .brand-mark { background: var(--accent); color: var(--ink); }
.login-form .eyebrow { color: var(--green); }
.login-form h1 { margin-bottom: 14px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 40px; }
.login-form input:not([type="checkbox"]) { border-color: var(--line); border-radius: 3px; background: #fbfdfb; }
.login-form input:not([type="checkbox"]):focus { outline: 2px solid var(--green); outline-offset: 1px; }
.login-form button { border-radius: 4px; background: var(--accent); color: var(--ink); font-weight: 800; transition: background-color 140ms ease, transform 140ms ease; }
.login-form button:hover { transform: translateY(-1px); background: var(--lime); }

@media (max-width: 640px) {
    .shell:not(:has(.apartment-detail-page)) .content { width: min(100% - 32px, 560px); padding: 32px 0 44px; }
    .shell:not(:has(.apartment-detail-page)) .topbar { height: 66px; padding: 0 16px; }
    .shell:not(:has(.apartment-detail-page)) .brand { gap: 8px; font-size: 14px; }
    .shell:not(:has(.apartment-detail-page)) .brand small { font-size: 8px; letter-spacing: .5px; }
    .shell:not(:has(.apartment-detail-page)) .account-link { padding-left: 9px; font-size: 11px; }
    .shell:not(:has(.apartment-detail-page)) .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; padding-bottom: 18px; }
    .shell:not(:has(.apartment-detail-page)) .page-heading h1 { font-size: 36px; }
    .shell:not(:has(.apartment-detail-page)) .apartment-row { grid-template-columns: 42px minmax(0, 1fr) 22px; gap: 10px; padding: 12px; }
    .shell:not(:has(.apartment-detail-page)) .apartment-order { font-size: 20px; }
    .shell:not(:has(.apartment-detail-page)) .apartment-row > .device-count { grid-column: 2; grid-row: 2; justify-self: start; margin-top: -6px; font-size: 11px; }
    .shell:not(:has(.apartment-detail-page)) .row-arrow { grid-column: 3; grid-row: 1 / span 2; }
    .shell:not(:has(.apartment-detail-page)) .admin-hub { grid-template-columns: 1fr; gap: 9px; }
    .shell:not(:has(.apartment-detail-page)) .admin-hub-row { min-height: 104px; padding: 16px; }
    .shell:not(:has(.apartment-detail-page)) .registry-row { padding: 12px; }
    .shell:not(:has(.apartment-detail-page)) .create-section { padding: 16px; }
    .shell:not(:has(.apartment-detail-page)) .admin-toolbar { padding: 8px; }
    .login-page { padding: 18px; }
    .login-form { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .shell:not(:has(.apartment-detail-page)) *, .login-page *, .login-page::before {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

.shell:has(.apartment-detail-page) {
    --ink: #18332f;
    --muted: #60736d;
    --line: #cfdbd4;
    --paper: #edf4ef;
    --white: #fff;
    --green: #155e4e;
    --green-pale: #dcece2;
    --amber: #a94830;
    --temperature: #f16d50;
    --temperature-pale: #ffebe3;
    --accent: #f16d50;
    --lime: #d9ef7b;
    background-color: var(--paper);
    background-image: radial-gradient(#155e4e12 .7px, transparent .7px);
    background-size: 15px 15px;
    color: var(--ink);
}

.shell:has(.apartment-detail-page) .topbar {
    height: 78px;
    border: 0;
    border-bottom: 4px solid var(--accent);
    background: var(--ink);
    color: var(--white);
}

.shell:has(.apartment-detail-page) .brand-mark { background: var(--accent); color: var(--ink); font-weight: 700; }
.shell:has(.apartment-detail-page) .brand small { color: #b6ccc3; }
.shell:has(.apartment-detail-page) .account-link { color: var(--lime); }
.shell:has(.apartment-detail-page) .account-link:hover { color: var(--white); }
.shell:has(.apartment-detail-page) .content { width: min(1240px, calc(100% - 56px)); padding: 46px 0 64px; }

.shell:has(.apartment-detail-page) .page-heading {
    align-items: flex-end;
    padding: 0 0 24px;
    border: 0;
}

.shell:has(.apartment-detail-page) .page-heading h1 {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.02;
}

.shell:has(.apartment-detail-page) .eyebrow { color: var(--amber); }
.shell:has(.apartment-detail-page) .apartment-heading .eyebrow { margin-bottom: 10px; }
.shell:has(.apartment-detail-page) .apartment-live-status { gap: 10px; }
.shell:has(.apartment-detail-page) .live-connection { padding: 8px 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); }
.shell:has(.apartment-detail-page) .live-connection.connected { border-color: #c9d99a; background: var(--lime); color: var(--ink); }
.shell:has(.apartment-detail-page) .live-connection.connecting { color: var(--amber); }
.shell:has(.apartment-detail-page) .live-connection.disconnected { color: #9e3f31; }
.shell:has(.apartment-detail-page) .apartment-live-status .quiet-button { border-color: var(--accent); background: var(--accent); color: var(--ink); font-weight: 800; }

.shell:has(.apartment-detail-page) .live-sensor-group {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--green);
    border-radius: 5px;
    background: var(--white);
    box-shadow: 0 4px 16px #18332f0b;
}

.shell:has(.apartment-detail-page) .area-overview {
    grid-template-columns: minmax(0, .9fr) minmax(280px, 1fr);
    gap: 22px;
    padding: 20px 22px;
    border: 0;
    background: #e4eee8;
    color: var(--ink);
}

.shell:has(.apartment-detail-page) .area-current-heading .eyebrow { color: var(--amber); }
.shell:has(.apartment-detail-page) .area-current-heading > span { color: var(--muted); font-size: 12px; }
.shell:has(.apartment-detail-page) .area-current-reading strong { color: var(--green); font-size: 40px; }

.shell:has(.apartment-detail-page) .area-setpoint {
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #ffffff36;
    border-radius: 4px;
    background: #ffffff;
}

.shell:has(.apartment-detail-page) .area-setpoint-label { color: var(--muted); font-size: 12px; }
.shell:has(.apartment-detail-page) .area-setpoint-controls { gap: 10px; }

.shell:has(.apartment-detail-page) .stepper-button {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border: 0;
    border-radius: 3px;
    background: var(--accent);
    color: var(--ink);
    font-size: 23px;
    font-weight: 700;
    transition: background-color 140ms ease, transform 140ms ease;
}

.shell:has(.apartment-detail-page) .stepper-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--lime); }
.shell:has(.apartment-detail-page) .stepper-button:disabled { background: #e4e9e5; color: var(--muted); }
.shell:has(.apartment-detail-page) .area-target-value { min-width: 76px; color: var(--ink); font-size: 22px; }
.shell:has(.apartment-detail-page) .area-target-message { color: var(--muted); }

.shell:has(.apartment-detail-page) .live-entity-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 185px), 1fr));
    gap: 9px;
    padding: 14px;
    background: #f6f9f6;
}

.shell:has(.apartment-detail-page) .live-entity {
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--green);
    border-radius: 3px;
    background: var(--white);
    box-shadow: none;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.shell:has(.apartment-detail-page) .live-entity:hover:not(:disabled) { border-color: var(--green); }
.shell:has(.apartment-detail-page) .live-entity.disabled { border-color: #d2d8d4; border-top-color: #aeb7b2; background: #eef0ee; }
.shell:has(.apartment-detail-page) .thermostat-name { font-size: 14px; }
.shell:has(.apartment-detail-page) .thermostat-indicator { width: 28px; height: 28px; font-size: 16px; }
.shell:has(.apartment-detail-page) .thermostat-indicator.power.enabled { background: var(--green-pale); color: var(--green); }
.shell:has(.apartment-detail-page) .thermostat-indicator.heat.heating { background: var(--temperature-pale); color: #a94830; }

@media (max-width: 640px) {
    .shell:has(.apartment-detail-page) .topbar { height: 66px; padding: 0 16px; }
    .shell:has(.apartment-detail-page) .brand { gap: 8px; font-size: 14px; }
    .shell:has(.apartment-detail-page) .brand small { font-size: 8px; letter-spacing: .5px; }
    .shell:has(.apartment-detail-page) .account-link { padding-left: 9px; font-size: 11px; }
    .shell:has(.apartment-detail-page) .content { width: min(100% - 32px, 560px); padding: 32px 0 44px; }
    .shell:has(.apartment-detail-page) .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 18px; }
    .shell:has(.apartment-detail-page) .page-heading h1 { font-size: 36px; }
    .shell:has(.apartment-detail-page) .area-overview { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
    .shell:has(.apartment-detail-page) .area-current-reading strong { font-size: 36px; }
    .shell:has(.apartment-detail-page) .area-setpoint { padding: 12px; }
    .shell:has(.apartment-detail-page) .area-setpoint-controls { flex-wrap: nowrap; }
    .shell:has(.apartment-detail-page) .live-entity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px; }
    .shell:has(.apartment-detail-page) .live-entity { padding: 9px; }
    .shell:has(.apartment-detail-page) .thermostat-card-heading { gap: 5px; }
    .shell:has(.apartment-detail-page) .thermostat-name { font-size: 12px; }
    .shell:has(.apartment-detail-page) .thermostat-indicators { gap: 3px; }
    .shell:has(.apartment-detail-page) .thermostat-indicator { width: 24px; height: 24px; font-size: 14px; }
}

.home-map-page .page-heading { padding-bottom: 18px; }
.building-map { display: grid; justify-items: center; }
.house-illustration { position: relative; width: min(100%, 560px); margin: 22px auto 0; padding: 34px 14px 0; --house-wall: #ffffff; --house-wall-edge: #c4d0c8; }
.house-illustration::before { position: absolute; top: 4px; right: 36%; width: 23px; height: 57px; border: 2px solid #60756a; border-bottom: 0; background: linear-gradient(90deg, #edf2ee 0 28%, #ffffff 29% 65%, #dfe7e1 66%); content: ""; }
.house-roof { position: relative; z-index: 1; width: 100%; height: 82px; background: repeating-linear-gradient(157deg, transparent 0 12px, #ffffff12 13px 15px), linear-gradient(155deg, #245846, #123c33); clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 5px 0 #0f332d); }
.house-side-labels { display: grid; grid-template-columns: 24px repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 8px 9px; border-bottom: 1px solid #d5e0d8; background: #f7faf6; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.house-side-labels > span:not(:first-child) { display: flex; align-items: center; gap: 6px; }
.house-side-labels b { display: grid; width: 22px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 9px; }
.house-side-labels > span:last-child b { background: var(--accent); }
.house-facade { display: grid; gap: 8px; padding: 12px 9px; border: 4px solid var(--house-wall-edge); border-top: 5px solid var(--green); border-right-width: 16px; border-left-width: 16px; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(0deg, transparent 0 25px, #687d7022 26px 27px), repeating-linear-gradient(90deg, transparent 0 76px, #687d7018 77px 78px), linear-gradient(90deg, #dfe6e1, var(--house-wall) 8%, var(--house-wall) 92%, #dfe6e1); box-shadow: 0 12px 24px #18332f1c; }
.house-floor { position: relative; display: grid; grid-template-columns: 24px repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 7px; min-height: 82px; }
.house-floor::before, .house-floor::after { position: absolute; z-index: 2; bottom: 0; width: 28px; height: 10px; border: 1px solid #52695b; border-bottom: 3px solid #8b9b90; background: linear-gradient(#52695b, #52695b) top / 100% 2px no-repeat, repeating-linear-gradient(90deg, transparent 0 6px, #62796a 6px 8px) center / 100% 100%, linear-gradient(#e9eeea, #e9eeea) bottom / 100% 3px no-repeat; content: ""; pointer-events: none; }
.house-floor::before { left: -37px; }
.house-floor::after { right: -37px; }
.house-floor-index { display: grid; place-items: center; align-self: center; width: 22px; aspect-ratio: 1; border: 1px solid #ddcda9; border-radius: 50%; background: #fffaf0; color: var(--amber); font-family: Georgia, "Times New Roman", serif; font-size: 12px; }
.house-apartment { position: relative; display: grid; min-width: 0; min-height: 68px; margin-bottom: 12px; place-items: center; padding: 8px; border: 1px solid #9fb6a8; border-left: 3px solid var(--green); border-radius: 2px; background: linear-gradient(135deg, #fff 0%, #f5f8f3 100%); box-shadow: inset 0 0 0 4px #edf2ec, 0 2px 5px #18332f0d; color: var(--ink); text-align: center; text-decoration: none; transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
.house-apartment::after { position: absolute; z-index: 1; right: -7px; bottom: -12px; left: -7px; height: 10px; border: 1px solid #52695b; border-bottom: 3px solid var(--house-wall-edge); background: linear-gradient(#52695b, #52695b) top / 100% 2px no-repeat, repeating-linear-gradient(90deg, transparent 0 12px, #62796a 12px 14px) center / 100% 100%, linear-gradient(var(--house-wall), var(--house-wall)) bottom / 100% 3px no-repeat; box-shadow: 0 2px 3px #18332f20; content: ""; pointer-events: none; }
.house-apartment:not(.empty):hover { transform: translateY(-2px); border-color: var(--green); border-left-color: var(--accent); background: var(--lime); box-shadow: inset 0 0 0 4px #e4efd7, 0 5px 12px #18332f1a; }
.house-apartment.empty { border: 1px dashed #a9beb0; background: repeating-linear-gradient(135deg, #f1f5f0 0 10px, #eaf0eb 10px 20px); box-shadow: inset 0 0 0 4px #e8eee8; }
.house-attic-floor .house-apartment { background: linear-gradient(135deg, #fffaf0, #f7f0df); }
.house-attic-floor .house-apartment:not(.empty):hover { background: var(--lime); }
.house-apartment-copy { display: block; min-width: 0; max-width: 100%; }
.house-apartment-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.house-ground { position: relative; display: grid; width: 80%; height: 58px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 0 auto; border-bottom: 5px solid var(--green); }
.house-ground span { position: relative; display: block; height: 48px; border: 2px solid #60756a; border-bottom: 0; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(0deg, #dce5df 0 5px, #aab9af 6px 7px); box-shadow: inset 0 0 0 4px #f4f7f4, 0 2px 5px #18332f14; }
.house-ground span::after { position: absolute; top: 50%; right: 8px; width: 4px; height: 4px; border-radius: 50%; background: #60756a; content: ""; }

.unplaced-apartments { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.unplaced-apartments .section-heading { margin-bottom: 12px; }
.unplaced-apartments .section-heading h2 { margin: 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; }
.unplaced-apartments .section-heading > span { display: grid; min-width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; }
.unplaced-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 7px; }
.unplaced-apartment { display: grid; min-height: 54px; place-items: center start; padding: 10px 12px; border-left: 3px solid #9caea5; border-radius: 3px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; }
.unplaced-apartment:hover { border-left-color: var(--accent); background: var(--lime); }
.location-pair { margin-top: 14px; }

@media (max-width: 480px) {
    .house-illustration { padding-right: 7px; padding-left: 7px; }
    .house-roof { height: 68px; }
    .house-facade { gap: 5px; padding: 7px 5px; border-width: 3px 10px; }
    .house-floor { grid-template-columns: 18px repeat(2, minmax(0, 1fr)); gap: 5px; min-height: 74px; }
    .house-floor::before { left: -27px; }
    .house-floor::after { right: -27px; }
    .house-apartment { min-height: 60px; margin-bottom: 11px; padding: 6px 4px; }
    .house-apartment::after { right: -5px; bottom: -11px; left: -5px; height: 9px; }
    .house-apartment-copy strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .house-apartment { transition: none; }
}