@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --canvas: #f3f5f0;
  --paper: #fff;
  --ink: #25342d;
  --muted: #748179;
  --faint: #9aa49d;
  --line: #e5e9e3;
  --forest: #203b31;
  --forest-2: #2b4d3e;
  --moss: #71966e;
  --lime: #d2e780;
  --pale-green: #eef4e8;
  --blue: #6a9eb0;
  --amber: #d39355;
  --coral: #ce735d;
  --radius: 5px;
  font-family: 'DM Sans', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); color: var(--ink); }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #9bb786; outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; width: 244px; flex-direction: column; padding: 25px 17px 16px; background: var(--forest); color: #eef4ec; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 26px 5px; color: #f5f7f1; font: 600 19px 'Space Grotesk', sans-serif; text-decoration: none; }
.brand-id { color: var(--lime); font-weight: 500; }
.brand-mark { display: flex; align-items: center; gap: 3px; height: 20px; }
.brand-mark i { display: block; width: 4px; border-radius: 4px; background: var(--lime); transform: skew(-15deg); }
.brand-mark i:nth-child(1) { height: 10px; opacity: .65; }.brand-mark i:nth-child(2) { height: 20px; }.brand-mark i:nth-child(3) { height: 15px; opacity: .8; }
.brand-logo { display: block; width: 190px; max-width: 100%; height: auto; }
.property-switcher { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 9px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius); background: rgba(255,255,255,.055); }
.property-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 3px; background: var(--lime); color: #30452d; font: 700 10px 'Space Grotesk', sans-serif; }
.property-name { display: grid; min-width: 0; gap: 3px; }
.property-name strong { overflow: hidden; color: #f4f7f1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.property-name small { color: #a5b7a9; font-size: 9px; }
.chevron { margin-left: auto; color: #92a795; font-size: 14px; }
.sidebar-label { margin: 27px 0 10px 9px; color: #89a091; font-size: 9px; font-weight: 700; }
.primary-nav { display: grid; gap: 3px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 3px; background: transparent; color: #b7c5bb; font-size: 11px; text-align: left; cursor: pointer; transition: background .16s, color .16s; }
.nav-link:hover { background: rgba(255,255,255,.07); color: white; }
.nav-link.active { background: #ffffff15; color: #fff; }
.nav-link.active::before { position: absolute; inset: 8px auto 8px 0; width: 2px; border-radius: 2px; background: var(--lime); content: ''; }
.nav-icon { position: relative; display: block; width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid #92a99a; border-radius: 3px; opacity: .9; }
.icon-overview::before { position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 1px; content: ''; }
.icon-rooms::before { position: absolute; inset: 3px 2px; background: linear-gradient(90deg,transparent 43%,currentColor 44%,currentColor 54%,transparent 55%),linear-gradient(0deg,transparent 43%,currentColor 44%,currentColor 54%,transparent 55%); content: ''; }
.icon-systems { border-radius: 50%; }.icon-systems::before { position: absolute; inset: 4px; border: 1px solid currentColor; border-radius: 50%; content: ''; }
.icon-scenes { border-radius: 50% 50% 2px 50%; transform: rotate(-45deg) scale(.8); }.icon-catalog::before { position: absolute; inset: 3px 4px; border-right: 1px solid currentColor; border-left: 1px solid currentColor; content: ''; }
.nav-count { margin-left: auto; padding: 2px 6px; border-radius: 8px; background: #ffffff12; color: #b7c5bb; font: 500 9px 'Space Grotesk', sans-serif; }
.sidebar-label-lower { margin-top: 31px; }
.offline-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 9px; border: 1px solid rgba(210,231,128,.16); border-radius: 3px; background: rgba(210,231,128,.055); }
.offline-symbol { color: var(--lime); font-size: 15px; }.offline-note span:last-child { display: grid; gap: 4px; }.offline-note strong { color: #d9e6d7; font-size: 9px; }.offline-note small { color: #8fa397; font-size: 8px; line-height: 1.5; }
.sidebar-spacer { flex: 1; min-height: 20px; }
.sidebar-bottom { display: grid; gap: 16px; }
.gateway-status { display: flex; align-items: center; gap: 9px; padding: 12px 9px 0; border-top: 1px solid rgba(255,255,255,.12); }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #a9cf79; box-shadow: 0 0 0 3px #a9cf791c; }
.gateway-status > span:nth-child(2) { display: grid; flex: 1; gap: 3px; }.gateway-status strong { color: #e8f0e8; font-size: 10px; font-weight: 600; }.gateway-status small { color: #8ea195; font-size: 8px; }
.icon-button { width: 25px; height: 25px; border: 0; border-radius: 3px; background: transparent; color: #9aac9f; cursor: pointer; }
.sidebar-brand-foot { display: flex; align-items: center; gap: 8px; color: #8fa295; font-size: 8px; font-weight: 700; }
.foot-mark { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #688471; border-radius: 50%; color: var(--lime); font: 600 9px 'Space Grotesk', sans-serif; }

.main-content { width: calc(100% - 244px); max-width: 1700px; min-height: 100vh; margin-left: 244px; padding: 0 36px 25px; }
.topbar { display: flex; min-height: 61px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e6df; }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: #87928a; font-size: 8px; font-weight: 700; }.breadcrumbs span:last-child { color: #47584d; }.crumb-divider { color: #b7c0b8; }
.topbar-right { display: flex; align-items: center; gap: 15px; }.demo-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #dce5d8; border-radius: 3px; color: #6a8260; font-size: 8px; font-weight: 700; }.demo-pill i,.updated-stamp i,.live-label i,.gateway-live i,.sync-state i { width: 5px; height: 5px; border-radius: 50%; background: #82a66f; }
.topbar-date,.topbar-time { color: #77847b; font-size: 9px; font-weight: 600; }.topbar-time { font: 500 11px 'Space Grotesk',sans-serif; font-variant-numeric: tabular-nums; }.avatar-button { width: 27px; height: 27px; border: 1px solid #d5dfd3; border-radius: 50%; background: #e5eddf; color: #587054; font-size: 8px; font-weight: 700; }
.view { display: none; padding-top: 27px; animation: view-in .32s ease both; }.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }.eyebrow { display: flex; align-items: center; gap: 8px; color: #859189; font-size: 8px; font-weight: 700; }.eyebrow-rule { width: 19px; height: 1px; background: #c5cec5; }
h1,h2,h3,p { margin-top: 0; } h1 { margin: 7px 0 4px; font: 600 27px 'Space Grotesk',sans-serif; letter-spacing: 0; }.page-subtitle { margin: 0; color: #7c8980; font-size: 11px; line-height: 1.55; }.heading-actions { display: flex; align-items: center; gap: 10px; }
.button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 9px; padding: 0 11px; border: 1px solid transparent; border-radius: 3px; font-size: 9px; font-weight: 700; cursor: pointer; transition: background .16s, transform .16s, border-color .16s; }.button:hover { transform: translateY(-1px); }.button-primary { background: var(--forest); color: white; }.button-primary:hover,.button-dark:hover { background: var(--forest-2); }.button-primary span,.button-dark span { color: var(--lime); font-size: 13px; }.button-secondary { border-color: #dce3da; background: #fff; color: #526258; }.button-secondary:hover { background: #f7f9f5; }
.updated-stamp { display: inline-flex; align-items: center; gap: 6px; color: #87958b; font-size: 8px; font-weight: 700; }
.kpi-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr .95fr; gap: 10px; }.kpi-card { min-width: 0; min-height: 112px; padding: 13px 14px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #69776e; font-size: 9px; font-weight: 600; }.kpi-mark { color: #a2aba3; font-size: 7px; font-weight: 700; }.kpi-main { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 7px; }.kpi-main>strong { color: #293a30; font: 500 25px 'Space Grotesk',sans-serif; font-variant-numeric: tabular-nums; }.kpi-main>span { color: #929c94; font-size: 9px; }.kpi-side-value { margin-left: auto; color: #668b60 !important; font: 500 17px 'Space Grotesk',sans-serif !important; }.value-kpi .kpi-main>strong { font-size: 22px; }.attention-kpi .kpi-main>strong { color: #c47552; }.attention-mark { color: #d39057; font-size: 8px; }.kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #8a948d; font-size: 8px; }.kpi-foot b { color: #65766b; font-weight: 600; }.occupancy-track { height: 4px; overflow: hidden; margin: 7px 0 8px; border-radius: 4px; background: #edf0e9; }.occupancy-track span { display: block; width: 68.3%; height: 100%; border-radius: inherit; background: #72966b; transition: width .25s; }.occupancy-kpi .kpi-foot { flex-wrap: wrap; justify-content: flex-start; column-gap: 10px; row-gap: 4px; }.kpi-foot>span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }.kpi-foot i,.room-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }.legend-occupied { background: #739d6e; }.legend-vacant { background: #97b9c0; }.legend-turnover { background: #d9a35d; }.legend-maintenance { background: #c77a65; }.positive-note { color: #668a5f; font-weight: 700; }.positive-note i { color: #739b67; font-size: 12px; font-style: normal; }.text-button { padding: 0; border: 0; background: transparent; color: #63815f; font-size: 8px; font-weight: 700; cursor: pointer; }.text-button:hover { color: #39563f; text-decoration: underline; }

.main-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(240px,.85fr); gap: 10px; margin-top: 10px; }.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }.energy-panel,.day-panel { min-width: 0; padding: 15px 16px 12px; }.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.panel-heading h2,.system-section-heading h2 { margin: 4px 0 0; color: #2d3e34; font: 600 15px 'Space Grotesk',sans-serif; letter-spacing: 0; }.demo-inline { padding: 3px 5px; border: 1px solid #e3e9d9; border-radius: 2px; color: #7b936c; font-size: 7px; }
.tariff-control { display: grid; gap: 4px; color: #89958b; font-size: 7px; font-weight: 700; }.tariff-input-wrap { display: flex; min-height: 27px; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid #e1e7df; border-radius: 3px; background: #fbfcfa; color: #79877c; font-size: 9px; }.tariff-input-wrap input { width: 57px; padding: 0; border: 0; outline: 0; background: transparent; color: #364b3b; font: 500 11px 'Space Grotesk',sans-serif; }.tariff-input-wrap input:focus-visible { outline: 0; }.tariff-input-wrap small { color: #9ba59c; font-size: 8px; }
.energy-summary { position: relative; display: flex; align-items: center; gap: 19px; margin-top: 14px; }.energy-summary>div:first-child,.energy-summary>div:nth-child(3) { display: grid; gap: 3px; }.energy-summary>div>span { color: #98a198; font-size: 7px; font-weight: 700; }.energy-summary>div>strong { color: #426c51; font: 500 20px 'Space Grotesk',sans-serif; }.energy-summary>div>strong small { color: #8b978d; font: 500 9px 'DM Sans',sans-serif; }.energy-summary>div>small { color: #919b93; font-size: 8px; }.energy-summary>div>small b { color: #5d7960; font-weight: 700; }.energy-summary-divider { width: 1px; height: 36px; background: #e7ebe4; }.energy-spark-label { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; align-self: flex-start; color: #7d9680; font-size: 8px; }.energy-spark-label i { width: 6px; height: 6px; border-radius: 50%; background: #80a56f; }
.energy-chart { display: grid; height: 94px; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: end; gap: 10px; margin-top: 9px; padding: 0 6px; border-bottom: 1px solid #ebeee8; background: repeating-linear-gradient(to bottom,transparent 0,transparent 30px,#edf0ea 31px); }.energy-day { position: relative; display: flex; height: 100%; align-items: end; justify-content: center; gap: 3px; }.energy-bar { width: min(13px,40%); min-height: 5px; border-radius: 2px 2px 0 0; }.energy-bar.baseline { background: #dfe7da; }.energy-bar.managed { background: #7ca078; }.chart-axis { display: flex; justify-content: space-between; margin: 5px 3px 0; color: #a1aaa2; font-size: 7px; }.estimate-note { display: flex; align-items: flex-start; gap: 7px; margin: 9px 0 0; color: #8c968e; font-size: 8px; line-height: 1.5; }.estimate-note>span { display: grid; width: 12px; height: 12px; flex: 0 0 auto; place-items: center; border: 1px solid #d8e1d5; border-radius: 50%; color: #7d9377; font: 600 8px 'Space Grotesk',sans-serif; }
.today-tag { color: #8b978c; font-size: 8px; font-weight: 700; }.flow-stat { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; min-height: 49px; border-bottom: 1px solid #eff1ed; }.flow-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 3px; background: #eef4e9; color: #6c8f63; font: 500 13px 'Space Grotesk',sans-serif; }.flow-icon.departures { background: #edf3f5; color: #6d99a1; }.flow-icon.service { background: #f8f1e7; color: #bb8951; }.flow-stat>div { display: flex; align-items: baseline; gap: 7px; }.flow-stat>div strong { color: #34473a; font: 500 18px 'Space Grotesk',sans-serif; }.flow-stat>div span,.flow-stat>small { color: #7d8980; font-size: 8px; }.flow-stat>small { color: #9ba49c; }.day-footer { display: flex; justify-content: space-between; gap: 7px; margin-top: 10px; color: #929c94; font-size: 7px; }.sync-state { display: inline-flex; align-items: center; gap: 4px; color: #7c9474; font-size: 7px; font-weight: 700; }

.room-pulse-panel { margin-top: 10px; padding: 14px 16px 15px; }.room-panel-heading { align-items: center; }.floor-tabs { display: flex; align-items: center; gap: 3px; }.floor-tab { min-width: 30px; min-height: 25px; padding: 0 7px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #7e8b82; font: 500 8px 'Space Grotesk',sans-serif; cursor: pointer; }.floor-tab:hover { background: #f4f7f2; }.floor-tab.active { border-color: #dfe8d9; background: #eef4e8; color: #58764e; font-weight: 700; }.view-rooms-button { white-space: nowrap; }.room-legend { display: flex; flex-wrap: wrap; gap: 13px; margin: 10px 0 8px; color: #8a948d; font-size: 8px; }.room-legend span { display: inline-flex; align-items: center; gap: 5px; }.room-preview-grid { display: grid; grid-template-columns: repeat(15,minmax(22px,1fr)); gap: 5px; }.room-tile { position: relative; display: grid; min-width: 0; min-height: 27px; place-items: center; padding: 0 2px; border: 1px solid #e5e9e3; border-radius: 2px; background: #f7f9f6; color: #66756b; font: 500 8px 'Space Grotesk',sans-serif; cursor: pointer; transition: border-color .15s,transform .15s,background .15s; }.room-tile:hover { z-index: 1; border-color: #9fb996; transform: translateY(-1px); }.room-tile.occupied { border-color: #d9e5d5; background: #edf4e9; color: #55734f; }.room-tile.vacant { border-color: #dce8e9; background: #eef5f5; color: #5d8088; }.room-tile.turnover { border-color: #f1e4cc; background: #fcf5e8; color: #9b784a; }.room-tile.maintenance { border-color: #efdcd5; background: #fbefeb; color: #9b6456; }.room-tile.preview-room { min-height: 34px; font-size: 9px; }
.bottom-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,1fr); gap: 10px; margin-top: 10px; }.activity-panel,.gateway-panel { padding: 14px 16px; }.live-label,.gateway-live { display: inline-flex; align-items: center; gap: 5px; color: #88958b; font-size: 7px; font-weight: 700; }.activity-list { display: grid; margin-top: 8px; }.activity-row { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 8px; min-height: 28px; border-top: 1px solid #f0f2ee; }.activity-row>i { width: 6px; height: 6px; border-radius: 50%; background: #8cac7b; }.activity-row.warning>i { background: #d39857; }.activity-row>span { color: #738077; font-size: 8px; }.activity-row>span strong { color: #53655a; font-weight: 600; }.activity-row time { color: #a1aaa2; font: 500 8px 'Space Grotesk',sans-serif; }.gateway-description { margin: 10px 0 11px; color: #87938a; font-size: 8px; line-height: 1.6; }.protocol-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }.protocol-chip { padding: 4px 6px; border: 1px solid #e7ebe5; border-radius: 2px; background: #fafbf9; color: #738078; font-size: 7px; font-weight: 600; }.protocol-zigbee { color: #72874e; }.protocol-wifi { color: #6687a0; }.protocol-ble { color: #8a76a0; }.protocol-lan { color: #698b83; }

.page-footer { display: flex; justify-content: space-between; gap: 12px; margin: 15px 0 0; color: #9aa39b; font-size: 7px; font-weight: 700; }.page-footer>span:first-child span { padding: 0 5px; color: #c0c9c0; }
.room-summary-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 10px; }.summary-cell { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.summary-cell span { color: #7e8a81; font-size: 8px; }.summary-cell strong { color: #435c48; font: 500 17px 'Space Grotesk',sans-serif; }.all-rooms-panel { padding: 13px 15px 16px; }.room-toolbar,.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }.search-wrap { display: flex; min-width: 150px; min-height: 32px; flex: 1; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #e2e7e0; border-radius: 3px; background: #fbfcfa; color: #8a968c; }.search-wrap>span { font-size: 17px; }.search-wrap input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #425249; font-size: 9px; }.search-wrap input:focus-visible { outline: 0; }.select-wrap { display: flex; min-height: 32px; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid #e2e7e0; border-radius: 3px; background: #fbfcfa; }.select-wrap>span { color: #99a39b; font-size: 7px; font-weight: 700; }.select-wrap select { max-width: 120px; border: 0; background: transparent; color: #56665b; font-size: 8px; outline: 0; }.room-floor-tabs { margin-left: auto; }.room-results-count { margin: 13px 0 9px; color: #8e9991; font-size: 8px; font-weight: 700; }.room-grid { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 6px; }.room-grid .room-tile { min-height: 47px; font-size: 9px; }.room-grid .room-tile::after { position: absolute; right: 5px; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ''; opacity: .65; }

.gateway-banner { position: relative; display: grid; min-height: 151px; grid-template-columns: 115px minmax(220px,1fr) minmax(270px,1.05fr); align-items: center; gap: 18px; overflow: hidden; padding: 18px 22px; border-radius: var(--radius); background: var(--forest); color: #eff4eb; }.gateway-orbit { position: relative; display: grid; width: 92px; height: 92px; place-items: center; justify-self: center; border: 1px solid #7690786b; border-radius: 50%; background: repeating-radial-gradient(circle,#ffffff00 0,#ffffff00 19px,#ffffff12 20px,#ffffff12 21px); }.gateway-orbit span { width: 23px; height: 23px; border: 1px solid #d2e780; border-radius: 50%; background: #d2e78026; box-shadow: 0 0 21px #d2e78033; }.gateway-orbit i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #d2e780; }.gateway-orbit i:nth-of-type(1) { top: 9px; left: 42px; }.gateway-orbit i:nth-of-type(2) { right: 9px; bottom: 25px; background: #81b6bd; }.gateway-orbit i:nth-of-type(3) { bottom: 11px; left: 18px; background: #d39c5d; }.gateway-copy .eyebrow { color: #a5bba9; }.gateway-copy h2 { margin: 6px 0; color: #f4f6ef; font: 500 20px 'Space Grotesk',sans-serif; }.gateway-copy p { max-width: 480px; margin: 0; color: #bac9bc; font-size: 9px; line-height: 1.6; }.gateway-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 15px; padding-left: 18px; border-left: 1px solid #ffffff25; }.gateway-meta span { display: grid; gap: 5px; color: #91aa98; font-size: 7px; font-weight: 700; }.gateway-meta strong { color: #e2eadf; font-size: 9px; font-weight: 500; }.gateway-meta strong i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--lime); }.system-section-heading { display: flex; align-items: end; justify-content: space-between; margin: 21px 0 11px; }.system-total { color: #929d94; font-size: 7px; font-weight: 700; }.systems-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }.system-card { padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.system-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }.system-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #e5ebe1; border-radius: 4px; background: #f4f7f1; color: #68865f; font: 500 12px 'Space Grotesk',sans-serif; }.system-status { color: #7c9873; font-size: 7px; font-weight: 700; }.system-status.attention { color: #bd8351; }.system-card h3 { margin: 10px 0 4px; color: #405147; font: 600 12px 'Space Grotesk',sans-serif; }.system-card p { min-height: 27px; margin: 0; color: #89948c; font-size: 8px; line-height: 1.5; }.system-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #edf0eb; color: #849087; font-size: 7px; }.system-card-meta strong { color: #607260; font-weight: 600; }.system-card .protocol-chip { font-size: 7px; }.note-band { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 13px; border: 1px solid #e9e7dc; border-radius: 3px; background: #faf9f4; }.note-icon { display: grid; width: 14px; height: 14px; flex: 0 0 auto; place-items: center; border: 1px solid #d9d2b8; border-radius: 50%; color: #978759; font-size: 8px; }.note-band p { margin: 0; color: #8b8879; font-size: 8px; line-height: 1.55; }.note-band strong { color: #6e6c5c; }

.scene-intro { display: flex; min-height: 128px; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-radius: var(--radius); background: var(--forest); color: white; }.scene-intro .eyebrow { color: #a9bbaa; }.scene-intro h2 { margin: 8px 0 5px; color: #f1f4ed; font: 500 22px 'Space Grotesk',sans-serif; }.scene-intro p { max-width: 600px; margin: 0; color: #b6c6b8; font-size: 9px; line-height: 1.5; }.scene-intro-mark { display: grid; width: 68px; height: 68px; flex: 0 0 auto; place-items: center; border: 1px solid #aebf9c55; border-radius: 50%; color: var(--lime); font: 500 24px 'Space Grotesk',sans-serif; }.scene-intro-mark span { color: #aabbaa; font: 600 6px 'DM Sans',sans-serif; }.scene-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin: 10px 0; }.scene-card { display: flex; min-height: 146px; flex-direction: column; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }.scene-card-top { display: flex; align-items: center; justify-content: space-between; }.scene-number { color: #abb5aa; font: 500 9px 'Space Grotesk',sans-serif; }.scene-card h3 { margin: 12px 0 4px; color: #405148; font: 600 12px 'Space Grotesk',sans-serif; }.scene-card p { min-height: 25px; margin: 0; color: #8b968e; font-size: 8px; line-height: 1.5; }.scene-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 11px; }.scene-run { min-height: 26px; padding: 0 8px; border: 1px solid #dfe7da; border-radius: 3px; background: #f4f7f1; color: #5c7656; font-size: 8px; font-weight: 700; cursor: pointer; }.scene-run:hover { background: #eaf1e5; }.scene-support { color: #a0aaa1; font-size: 7px; }.automation-panel { padding: 14px 16px; }.automation-list { margin-top: 9px; }.automation-row { display: grid; grid-template-columns: minmax(160px,1.1fr) 1.4fr minmax(130px,1fr) auto; align-items: center; gap: 12px; min-height: 47px; border-top: 1px solid #edf0eb; }.automation-name { display: grid; gap: 3px; }.automation-name strong { color: #526258; font-size: 9px; }.automation-name small { color: #9ba49c; font-size: 7px; }.automation-flow { color: #859188; font-size: 8px; }.automation-flow b { color: #687a6d; font-weight: 600; }.automation-trigger { color: #88938a; font-size: 8px; }.switch { position: relative; display: inline-block; width: 30px; height: 17px; }.switch input { width: 0; height: 0; opacity: 0; }.switch-track { position: absolute; inset: 0; border-radius: 10px; background: #d4dbd3; cursor: pointer; transition: .2s; }.switch-track::before { position: absolute; bottom: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: white; content: ''; transition: .2s; box-shadow: 0 1px 3px #0002; }.switch input:checked+.switch-track { background: #82a675; }.switch input:checked+.switch-track::before { transform: translateX(13px); }.switch input:focus-visible+.switch-track { outline: 3px solid #9bb786; outline-offset: 2px; }

.catalog-badge { padding: 6px 8px; border: 1px solid #eadfc9; border-radius: 3px; background: #fbf7ed; color: #a0824f; font-size: 7px; font-weight: 700; }.catalog-callout { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; padding: 11px 13px; border: 1px solid #e7eade; border-radius: 3px; background: #f9faf6; }.callout-mark { color: #728b6d; font-size: 14px; }.catalog-callout p { margin: 0; color: #7f8b81; font-size: 9px; line-height: 1.5; }.catalog-panel { overflow: hidden; }.catalog-toolbar { padding: 12px; border-bottom: 1px solid var(--line); }.catalog-table-wrap { overflow-x: auto; }.catalog-table { width: 100%; border-collapse: collapse; white-space: nowrap; }.catalog-table th { padding: 10px 12px; background: #f8faf7; color: #98a29a; font-size: 7px; font-weight: 700; text-align: left; }.catalog-table td { padding: 11px 12px; border-top: 1px solid #eef1ed; color: #748178; font-size: 8px; }.catalog-table td:first-child { color: #4e6054; font-weight: 600; }.product-main { display: flex; align-items: center; gap: 8px; }.product-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border: 1px solid #e6ebe4; border-radius: 3px; background: #f6f8f4; color: #78916e; font: 500 9px 'Space Grotesk',sans-serif; }.product-main div { display: grid; gap: 3px; }.product-main small { color: #9aa39b; font-size: 7px; font-weight: 400; }.vendor-tag { color: #617b5d; font-size: 8px; font-weight: 600; }.model-pending { display: inline-block; padding: 4px 6px; border: 1px solid #ece5d4; border-radius: 2px; background: #fbf8ef; color: #9e8658; font-size: 7px; font-weight: 700; }.catalog-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); color: #929c94; font-size: 7px; }.catalog-foot span:first-child { font-weight: 700; }

.room-dialog,.automation-dialog { position: fixed; inset: 50% auto auto 50%; width: min(440px,calc(100vw - 28px)); max-height: min(88vh,760px); overflow: auto; padding: 23px; border: 1px solid #dfe6dc; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 20px 70px #15261c38; transform: translate(-50%,-50%); }.room-dialog::backdrop,.automation-dialog::backdrop { background: #14251d77; backdrop-filter: blur(3px); }.dialog-close { position: absolute; top: 11px; right: 12px; width: 28px; height: 28px; border: 1px solid #e7ebe5; border-radius: 50%; background: #fff; color: #738077; font-size: 17px; cursor: pointer; }.dialog-kicker { color: #87958b; font-size: 8px; font-weight: 700; }.dialog-title-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }.dialog-title-row h2,.automation-dialog h2 { margin: 0; color: #304238; font: 600 20px 'Space Grotesk',sans-serif; }.room-status { padding: 5px 7px; border-radius: 2px; background: #edf4e8; color: #64805b; font-size: 7px; font-weight: 700; }.room-status.vacant { background: #eef5f5; color: #648b92; }.room-status.turnover { background: #fbf3e5; color: #a4814d; }.room-status.maintenance { background: #faeeea; color: #a66c5c; }.dialog-disclaimer { margin: 8px 0 15px; color: #909a91; font-size: 8px; line-height: 1.5; }.dialog-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.dialog-metric { display: grid; gap: 4px; padding: 9px; border: 1px solid #e9ede7; border-radius: 3px; background: #fafbf9; }.dialog-metric span { color: #9aa39b; font-size: 7px; }.dialog-metric strong { color: #516957; font: 500 13px 'Space Grotesk',sans-serif; }.dialog-controls { margin-top: 14px; border-top: 1px solid #edf0eb; }.dialog-control-row { display: flex; min-height: 42px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0eb; color: #59685e; font-size: 9px; }.control-toggle { min-width: 65px; min-height: 25px; border: 1px solid #dfe7da; border-radius: 3px; background: #f3f7f0; color: #637d5d; font-size: 8px; font-weight: 700; cursor: pointer; }.stepper { display: flex; align-items: center; gap: 8px; }.stepper button { width: 23px; height: 23px; border: 1px solid #e0e6de; border-radius: 3px; background: #f8faf7; color: #657a68; cursor: pointer; }.stepper output { min-width: 34px; color: #4d6552; font: 500 10px 'Space Grotesk',sans-serif; text-align: center; }.dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; color: #9aa39b; font-size: 7px; font-weight: 700; }.dialog-footer .button { min-width: 76px; }.automation-dialog h2 { margin-top: 10px; font-size: 18px; }.automation-dialog .field-label { display: block; margin: 14px 0 6px; color: #66756a; font-size: 8px; font-weight: 700; }.automation-dialog input,.automation-dialog select { width: 100%; min-height: 34px; padding: 0 9px; border: 1px solid #e0e6de; border-radius: 3px; background: #fbfcfa; color: #526257; font-size: 9px; }
.toast { position: fixed; right: 22px; bottom: 20px; z-index: 25; max-width: min(360px,calc(100vw - 28px)); padding: 11px 14px; border: 1px solid #dbe5d7; border-radius: 4px; background: white; color: #4e6253; box-shadow: 0 10px 30px #1c30231f; font-size: 9px; opacity: 0; pointer-events: none; transform: translateY(7px); transition: .2s; }.toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width:1250px) { .main-content { padding-right: 23px; padding-left: 23px; }.kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.main-grid { grid-template-columns: minmax(0,1.5fr) minmax(225px,.85fr); }.room-preview-grid { grid-template-columns: repeat(10,minmax(22px,1fr)); }.room-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }.scene-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.systems-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:850px) { .sidebar { width: 205px; }.main-content { width: calc(100% - 205px); margin-left: 205px; padding-right: 17px; padding-left: 17px; }.topbar-right { gap: 9px; }.topbar-date { display: none; }.main-grid,.bottom-grid { grid-template-columns: 1fr; }.day-panel { display: grid; grid-template-columns: repeat(3,1fr); column-gap: 10px; }.day-panel .panel-heading,.day-footer { grid-column: 1/-1; }.flow-stat { grid-template-columns: 26px 1fr; }.flow-stat>small { display: none; }.gateway-banner { grid-template-columns: 82px 1fr; }.gateway-orbit { width: 70px; height: 70px; }.gateway-meta { grid-column: 1/-1; grid-template-columns: repeat(3,1fr); padding: 10px 0 0; border-top: 1px solid #ffffff25; border-left: 0; }.gateway-meta strong { font-size: 8px; }.room-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }.automation-row { grid-template-columns: minmax(130px,1fr) 1.2fr auto; }.automation-trigger { display: none; } }
@media (max-width:650px) { .sidebar { position: sticky; inset: 0 0 auto; width: 100%; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; }.brand { margin: 0 auto 0 0; font-size: 16px; }.property-switcher { display: none; }.sidebar-label,.sidebar-label-lower,.offline-note,.sidebar-spacer,.sidebar-bottom { display: none; }.primary-nav { display: flex; gap: 2px; }.nav-link { width: auto; min-height: 32px; gap: 6px; padding: 0 8px; font-size: 9px; }.nav-icon { display: none; }.nav-link.active::before { inset: auto 8px 0; width: auto; height: 2px; }.nav-count { display: none; }.main-content { width: 100%; margin: 0; padding: 0 13px 18px; }.topbar { min-height: 45px; }.demo-pill { font-size: 7px; }.avatar-button { width: 24px; height: 24px; }.view { padding-top: 19px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 14px; }.page-heading h1 { font-size: 25px; }.heading-actions { width: 100%; justify-content: space-between; }.updated-stamp { font-size: 7px; }.kpi-grid { gap: 7px; }.kpi-card { min-height: 103px; padding: 10px; }.kpi-top { font-size: 8px; }.kpi-main>strong { font-size: 22px; }.value-kpi .kpi-main>strong { font-size: 19px; }.kpi-foot { font-size: 7px; }.occupancy-kpi .kpi-foot { column-gap: 7px; }.main-grid,.bottom-grid { gap: 7px; margin-top: 7px; }.energy-panel,.day-panel,.room-pulse-panel,.activity-panel,.gateway-panel { padding: 12px; }.energy-summary { gap: 10px; }.energy-summary>div>strong { font-size: 17px; }.energy-chart { height: 78px; }.room-pulse-panel { margin-top: 7px; }.room-panel-heading { flex-wrap: wrap; }.room-panel-heading>.floor-tabs { margin-left: auto; }.view-rooms-button { width: 100%; text-align: left; }.room-preview-grid { grid-template-columns: repeat(6,minmax(22px,1fr)); }.room-preview-grid .room-tile { min-height: 31px; }.room-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.room-toolbar { align-items: stretch; }.search-wrap { flex-basis: 100%; }.select-wrap { flex: 1; }.room-floor-tabs { width: 100%; justify-content: space-between; margin-left: 0; }.room-floor-tabs .floor-tab { flex: 1; }.room-summary-strip { grid-template-columns: repeat(2,1fr); gap: 6px; }.summary-cell { min-height: 46px; padding: 8px 10px; }.gateway-banner { grid-template-columns: 55px 1fr; gap: 11px; padding: 15px; }.gateway-orbit { width: 52px; height: 52px; }.gateway-copy h2 { font-size: 17px; }.gateway-meta { gap: 8px; }.gateway-meta span { font-size: 6px; }.gateway-meta strong { font-size: 7px; }.systems-grid { grid-template-columns: 1fr; }.system-card { padding: 12px; }.scene-intro { min-height: 112px; padding: 16px; }.scene-intro h2 { font-size: 18px; }.scene-intro-mark { width: 53px; height: 53px; font-size: 19px; }.scene-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.scene-card { min-height: 137px; padding: 10px; }.automation-row { grid-template-columns: 1fr auto; gap: 6px; padding: 8px 0; }.automation-flow { grid-column: 1; grid-row: 2; }.automation-row .switch { grid-column: 2; grid-row: 1; }.automation-name { grid-column: 1; }.catalog-toolbar .search-wrap { flex-basis: 100%; }.catalog-toolbar .select-wrap { min-width: 0; }.catalog-toolbar .select-wrap select { max-width: 95px; }.catalog-table { min-width: 700px; }.catalog-foot { flex-direction: column; gap: 5px; }.page-footer { flex-direction: column; gap: 5px; }.dialog-metrics { gap: 5px; } }
@media (max-width:390px) { .sidebar { gap: 4px; padding-right: 8px; padding-left: 9px; }.brand { gap: 7px; font-size: 14px; }.nav-link { padding: 0 6px; font-size: 8px; }.topbar-right { gap: 6px; }.breadcrumbs { gap: 5px; font-size: 7px; }.demo-pill { padding: 5px; font-size: 6px; }.main-content { padding-right: 10px; padding-left: 10px; }.kpi-card { padding: 9px 8px; }.kpi-foot { flex-wrap: wrap; }.energy-summary { gap: 8px; }.energy-summary>div>strong { font-size: 15px; }.room-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.scene-grid { grid-template-columns: 1fr 1fr; }.room-preview-grid { grid-template-columns: repeat(5,minmax(22px,1fr)); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.device-monitor-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.device-monitor-heading > div { display: flex; align-items: baseline; gap: 8px; }
.device-monitor-heading h3 { margin: 0; color: #405248; font: 600 11px 'Space Grotesk',sans-serif; }
.device-monitor-heading > div > span,.simulated-tag { color: #96a197; font-size: 7px; font-weight: 700; }
.simulated-tag { padding: 4px 6px; border: 1px solid #e5ebdf; border-radius: 2px; color: #738a6d; }
.equipment-list { display: grid; border-top: 1px solid #edf0eb; }
.equipment-row { display: grid; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 43px; border-bottom: 1px solid #edf0eb; }
.equipment-icon { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #e4eae1; border-radius: 3px; background: #f5f8f2; color: #70866c; font: 600 7px 'Space Grotesk',sans-serif; }
.equipment-copy { display: grid; min-width: 0; gap: 3px; }
.equipment-copy strong { overflow: hidden; color: #536359; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.equipment-copy small { overflow: hidden; color: #9aa49c; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.equipment-toggle { min-width: 47px; min-height: 24px; border: 1px solid #e4e9e2; border-radius: 3px; background: #f7f8f6; color: #8a948c; font-size: 8px; font-weight: 700; cursor: pointer; }
.equipment-toggle.is-on { border-color: #d9e6d3; background: #edf5e8; color: #64835b; }
.device-monitor-note { margin: 8px 0 10px; color: #929c94; font-size: 7px; line-height: 1.5; }
.climate-setpoint { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 1px; color: #69776d; font-size: 8px; }
.climate-setpoint .stepper { gap: 6px; }
.climate-setpoint .stepper button { width: 21px; height: 21px; }
.climate-setpoint .setpoint-value { min-width: 34px; color: #4d6552; font: 500 9px 'Space Grotesk',sans-serif; text-align: center; }
.room-controls-divider { height: 1px; margin: 3px 0; background: #edf0eb; }
@media (max-width:390px) { .equipment-row { grid-template-columns: 25px minmax(0,1fr) auto; gap: 6px; }.equipment-icon { width: 23px; height: 23px; }.equipment-toggle { min-width: 42px; } }
@media (max-width:650px) { .brand-logo { width: 156px; } }
@media (max-width:390px) { .brand-logo { width: 136px; } }
.equipment-toggle,.control-toggle { display: inline-flex; min-height: 28px; align-items: center; justify-content: center; padding: 0 9px; border-radius: 3px; font-size: 8px; font-weight: 600; line-height: 1; vertical-align: middle; }
.equipment-toggle { min-width: 50px; }
.equipment-toggle:disabled { cursor: not-allowed; opacity: .56; }
.equipment-toggle:hover:not(:disabled),.control-toggle:hover,.breaker-switch:hover { filter: brightness(.97); }
.equipment-toggle:active:not(:disabled),.control-toggle:active,.breaker-switch:active { transform: translateY(1px); }
.switch { display: inline-flex; width: 32px; height: 18px; flex: 0 0 32px; align-items: center; vertical-align: middle; }
.switch-track { position: relative; display: block; width: 32px; height: 18px; flex: 0 0 auto; }
.switch-track::before { bottom: 3px; left: 3px; width: 12px; height: 12px; }
.switch input:checked+.switch-track::before { transform: translateX(14px); }
.equipment-toggle:focus-visible,.control-toggle:focus-visible,.breaker-switch:focus-visible,.switch input:focus-visible+.switch-track { outline: 2px solid #8cae7e; outline-offset: 2px; }
.breaker-control-row { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #edf0eb; }
.breaker-label { display: grid; min-width: 0; gap: 3px; }
.breaker-label strong { color: #56665b; font-size: 9px; font-weight: 600; }
.breaker-label small { color: #98a29a; font-size: 7px; }
.breaker-switch { display: inline-flex; width: 72px; height: 30px; flex: 0 0 72px; align-items: center; justify-content: space-between; gap: 6px; padding: 0 7px; border: 1px solid #dfe6dc; border-radius: 3px; background: #f7f9f6; color: #89948c; cursor: pointer; transition: border-color .16s,background .16s; }
.breaker-switch-track { position: relative; display: block; width: 26px; height: 15px; flex: 0 0 26px; border-radius: 10px; background: #cbd3cb; transition: background .16s; }
.breaker-switch-track i { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: white; box-shadow: 0 1px 2px #18251c33; transition: transform .16s; }
.breaker-switch-state { min-width: 18px; color: inherit; font-size: 7px; font-weight: 700; text-align: center; }
.breaker-switch.is-on { border-color: #d5e4d0; background: #f2f7ef; color: #5d7957; }
.breaker-switch.is-on .breaker-switch-track { background: #83a878; }
.breaker-switch.is-on .breaker-switch-track i { transform: translateX(11px); }
.breaker-switch.is-off { border-color: #eadbd5; background: #fbf5f2; color: #9b6959; }
.breaker-switch.is-off .breaker-switch-track { background: #ca8d79; }