:root {
  --void: #07080b;
  --shell: #0d0f14;
  --panel: #171a21;
  --panel-top: #20242d;
  --line: #343944;
  --line-soft: #252a33;
  --text: #f3f4f7;
  --dim: #969daa;
  --uv: #a875ff;
  --uv-rgb: 168, 117, 255;
  --cyan: #63dbe3;
  --green: #68d391;
  --amber: #f2b84b;
  --red: #ff6b74;
  --shadow: rgba(0, 0, 0, .45);
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--void); color: var(--text); overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--uv); outline-offset: 2px; }
.connection-state { position: fixed; right: 14px; bottom: 8px; z-index: 20; color: var(--dim); font: 700 9px/1.2 ui-monospace, monospace; letter-spacing: .08em; pointer-events: none; }
.ha-offline .connection-state { color: var(--red); }
.ha-offline .status-dot { background: var(--red); box-shadow: 0 0 9px var(--red); }

.app-shell {
  width: 100vw;
  height: 100dvh;
  min-height: 560px;
  padding: 14px;
  display: grid;
  grid-template-rows: 64px 1fr;
  gap: 10px;
  background:
    linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px),
    radial-gradient(circle at 45% -20%, rgba(var(--uv-rgb), .08), transparent 38%),
    var(--shell);
  background-size: 27px 27px, 27px 27px, auto, auto;
  user-select: none;
}
.app-shell::before { content: ""; position: fixed; z-index: 0; inset: 5px; pointer-events: none; border: 1px solid rgba(255,255,255,.025); border-radius: 12px; }
.app-shell > * { position: relative; z-index: 1; }

.topbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 126px 145px 112px 46px 46px;
  gap: 8px;
}

.brand, .top-status, .icon-button {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(23, 26, 33, .96);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.brand { display: flex; align-items: center; gap: 10px; padding: 8px 11px; text-align: left; cursor: pointer; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--uv); border-radius: 8px; color: var(--uv); background: rgba(var(--uv-rgb), .12); box-shadow: 0 0 18px rgba(var(--uv-rgb), .13); font-size: 23px; }
.brand small, .top-status small, .settings-drawer small, .modal small, .page-heading small { display: block; color: var(--dim); font-size: 10px; letter-spacing: .16em; }
.brand strong, .top-status strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; }
.top-status { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 8px 11px; }
.status-meta { position: absolute; right: 9px; bottom: 7px; color: rgba(150,157,170,.62); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.top-clock strong { font-size: 20px; }
.icon-button { cursor: pointer; font-size: 19px; }
.update-beacon{position:relative;border:1px solid rgba(242,184,75,.6);border-radius:9px;background:rgba(242,184,75,.12);color:var(--amber);cursor:pointer;box-shadow:0 0 18px rgba(242,184,75,.15)}.update-beacon.critical{border-color:rgba(255,107,116,.75);background:rgba(255,107,116,.15);color:var(--red);box-shadow:0 0 20px rgba(255,107,116,.24)}.update-beacon span{display:grid;place-items:center;width:22px;height:22px;margin:auto;border:2px solid currentColor;border-radius:50%;font-weight:900}.update-beacon b{position:absolute;right:3px;top:3px;min-width:17px;padding:2px 4px;border-radius:8px;background:var(--amber);color:#111;font-size:10px}.update-beacon.critical b{background:var(--red);color:#fff}.update-beacon[hidden]{display:none}

.page-container, .page { min-height: 0; }
.page { display: none; height: 100%; animation: page-in .28s ease both; }
.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }

.home-grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr .76fr;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "scenes music travel"
    "scenes music travel"
    "scenes music energy"
    "rooms climate energy"
    "rooms climate tars"
    "rooms climate tars";
  gap: 10px;
  padding-bottom: 3px;
}

.panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--uv-rgb),.055), transparent 32%),
    linear-gradient(145deg, var(--panel-top), var(--panel));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.22);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.panel::before { content: ""; position: absolute; z-index: 0; left: 7px; top: 7px; width: 13px; height: 13px; border-left: 1px solid rgba(var(--uv-rgb),.42); border-top: 1px solid rgba(var(--uv-rgb),.42); opacity: .7; }
.panel::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--uv), transparent); opacity: .35; }
.panel > * { position: relative; z-index: 1; }
.panel:hover, .panel:focus-visible { transform: translateY(-2px); border-color: rgba(var(--uv-rgb), .72); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 0 2px rgba(var(--uv-rgb),.09), 0 15px 34px rgba(0,0,0,.28); }
.panel:active { transform: scale(.99); }
.panel-scenes { grid-area: scenes; }
.panel-music { grid-area: music; }
.panel-travel { grid-area: travel; }
.panel-rooms { grid-area: rooms; }
.panel-climate { grid-area: climate; }
.panel-energy { grid-area: energy; }
.panel-tars { grid-area: tars; }
.panel-scenes, .panel-music, .panel-rooms, .panel-climate { display: flex; flex-direction: column; }

.panel-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(52,57,68,.7); font-size: 14px; font-weight: 500; }
.panel-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 1px; background: var(--uv); box-shadow: 0 0 8px rgba(var(--uv-rgb),.65); }
.panel-head > span { display: flex; align-items: center; gap: 8px; }
.panel-head i { width: 22px; color: var(--uv); font-style: normal; font-size: 19px; text-align: center; }
.panel-head em { padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 9px; font-style: normal; font-weight: 500; letter-spacing: .09em; white-space: nowrap; }
.panel-head em.healthy { color: var(--green); border-color: rgba(104,211,145,.3); }

.scene-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.scene { min-height: 68px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px solid var(--line-soft); border-radius: 8px; background: linear-gradient(145deg,rgba(7,8,11,.42),rgba(20,23,29,.5)); color: var(--dim); font-size: 10px; }
.scene b { font-size: 17px; font-weight: 400; }
.scene.active { color: var(--text); border-color: rgba(var(--uv-rgb),.55); background: rgba(var(--uv-rgb),.12); }
.scene.active b { color: var(--uv); }
.presence-line { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid rgba(104,211,145,.15); border-radius: 9px; background: linear-gradient(90deg,rgba(104,211,145,.075),transparent); }
.presence-line > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(104,211,145,.35); background: rgba(104,211,145,.1); color: var(--green); font-style: normal; }
.presence-line strong, .presence-line small { display: block; }
.presence-line strong { font-size: 12px; font-weight: 500; }
.presence-line small { margin-top: 2px; color: var(--dim); font-size: 10px; }
.presence-line > b { color: var(--green); font-size: 10px; letter-spacing: .1em; }

.music-body { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 14px; margin-top: 20px; }
.album-art { width: 72px; aspect-ratio: 1; border-radius: 9px; background: radial-gradient(circle at 62% 35%, var(--uv), transparent 21%), radial-gradient(circle at 38% 68%, var(--cyan), transparent 19%), linear-gradient(135deg,#35214c,#0b0e14); box-shadow: 0 0 28px rgba(var(--uv-rgb),.22), inset 0 0 0 1px rgba(255,255,255,.08); }
.music-body strong, .music-body small { display: block; }
.music-body strong { font-size: 15px; font-weight: 500; }
.music-body small { margin-top: 3px; color: var(--dim); font-size: 11px; }
.equalizer { display: flex; align-items: end; gap: 3px; height: 18px; margin-top: 8px; }
.equalizer b { display: block; width: 3px; border-radius: 2px; background: var(--uv); animation: equalizer 1.15s ease-in-out infinite alternate; }
.equalizer b:nth-child(1) { height: 35%; }.equalizer b:nth-child(2) { height: 82%; animation-delay: -.4s; }.equalizer b:nth-child(3) { height: 52%; animation-delay: -.8s; }.equalizer b:nth-child(4) { height: 100%; animation-delay: -.2s; }.equalizer b:nth-child(5) { height: 44%; animation-delay: -.6s; }
@keyframes equalizer { to { height: 18%; opacity: .52; } }

.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.room { display: block; min-width: 0; padding: 11px 10px; border-left: 2px solid var(--line); border-radius: 0 7px 7px 0; background: linear-gradient(90deg,rgba(7,8,11,.4),rgba(7,8,11,.16)); }
.room.lit { border-color: var(--amber); }.room.uv { border-color: var(--uv); }
.room b, .room small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room b { font-size: 11px; font-weight: 500; }.room small { margin-top: 3px; color: var(--dim); font-size: 10px; }

.climate-main { display: flex; justify-content: space-between; align-items: end; margin: 21px 0 16px; padding: 13px; border: 1px solid rgba(99,219,227,.13); border-radius: 9px; background: linear-gradient(120deg,rgba(99,219,227,.07),transparent 68%); }
.climate-main small, .climate-main strong { display: block; }
.climate-main small { color: var(--dim); font-size: 10px; letter-spacing: .12em; }
.climate-main strong { margin-top: 4px; font-size: clamp(35px, 4vw, 49px); font-weight: 400; letter-spacing: -.06em; }
.climate-main sup { color: var(--dim); font-size: 14px; letter-spacing: 0; }.climate-main > b { color: var(--cyan); font-size: 31px; font-weight: 400; }
.large-number { display: block; margin: 19px 0 13px; font-size: clamp(34px, 4.2vw, 52px); font-weight: 300; letter-spacing: -.06em; }
.large-number small { color: var(--dim); font-size: 13px; letter-spacing: 0; }
.metric-line { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(52,57,68,.52); color: var(--dim); font-size: 10px; }
.metric-line b { color: var(--text); font-weight: 500; }.metric-line.good b { color: var(--green); }
.tars-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin: 18px 0 5px; }
.tars-summary strong { color: var(--green); font-size: 42px; font-weight: 300; text-shadow: 0 0 18px rgba(104,211,145,.25); }.tars-summary small { color: var(--dim); font-size: 10px; }
.panel-tail { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding: 9px 10px; border: 1px solid rgba(52,57,68,.56); border-radius: 7px; background: rgba(7,8,11,.22); }
.panel-tail small { color: var(--dim); font-size: 8px; letter-spacing: .12em; }.panel-tail b { color: var(--text); font-size: 9px; font-weight: 500; letter-spacing: .08em; }
.media-tail { display: grid; grid-template-columns: 27px 32px 27px 1fr auto; align-items: center; gap: 7px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(52,57,68,.52); }
.media-tail > i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--dim); font-style: normal; }.media-tail > i.playing { width: 32px; height: 32px; color: var(--text); border-color: rgba(var(--uv-rgb),.55); background: rgba(var(--uv-rgb),.12); }.media-tail > span { position: relative; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }.media-tail > span b { position: absolute; inset: 0 46% 0 0; background: var(--uv); box-shadow: 0 0 8px rgba(var(--uv-rgb),.62); }.media-tail small { color: var(--dim); font-size: 8px; }
.comfort-tail { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-top: auto; padding-top: 10px; }.comfort-tail small { color: var(--dim); font-size: 8px; letter-spacing: .1em; }.comfort-tail > span { position: relative; height: 4px; border-radius: 3px; background: linear-gradient(90deg,var(--cyan),var(--green),var(--amber)); opacity: .72; }.comfort-tail > span b { position: absolute; top: 50%; left: 52%; width: 10px; height: 10px; transform: translate(-50%,-50%); border: 2px solid var(--text); border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }.comfort-tail em { color: var(--green); font-size: 8px; font-style: normal; letter-spacing: .1em; }

.menu-trigger { position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); width: 190px; height: 44px; padding-top: 8px; border: 0; border-top: 2px solid rgba(var(--uv-rgb),.72); border-radius: 10px 10px 0 0; background: linear-gradient(180deg,rgba(23,26,33,.92),rgba(13,15,20,.96)); color: var(--dim); display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 -8px 24px rgba(var(--uv-rgb),.1); }
.menu-trigger i { width: 16px; height: 7px; border-top: 1px solid var(--uv); border-left: 1px solid var(--uv); transform: rotate(45deg) translate(3px,2px); }.menu-trigger span { font-size: 9px; letter-spacing: .18em; }

.overlay { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(4,5,8,.91); animation: overlay-in .2s ease both; }
.overlay[hidden] { display: none; }
@keyframes overlay-in { from { opacity: 0; } }
.modal { width: min(720px, 92vw); max-height: 82vh; overflow: auto; padding: 20px; border: 1px solid var(--uv); border-radius: 13px; background: radial-gradient(circle at 100% 0,rgba(var(--uv-rgb),.09),transparent 36%),var(--panel); box-shadow: 0 0 45px rgba(var(--uv-rgb),.16), 0 26px 70px var(--shadow); animation: modal-in .24s cubic-bezier(.2,.8,.2,1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal header, .settings-drawer header, .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal h2, .settings-drawer h2, .page-heading h1 { margin: 3px 0 0; font-size: 22px; font-weight: 500; }
.close-button, .back-button { border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.close-button { width: 38px; height: 38px; font-size: 24px; }.back-button { padding: 9px 13px; }
.modal-content { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.quick-control, .detail-card { border: 1px solid var(--line-soft); border-radius: 9px; background: #12151b; }
.quick-control { min-height: 112px; padding: 14px; display: grid; place-items: center; align-content: center; gap: 7px; text-align: center; color: var(--text); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.quick-control:hover, .quick-control:focus-visible { border-color: rgba(var(--uv-rgb),.58); background: rgba(var(--uv-rgb),.07); transform: translateY(-2px); }
.quick-control b { color: var(--uv); font-size: 22px; font-weight: 400; }.quick-control span { font-size: 11px; }.quick-control small { color: var(--dim); font-size: 10px; }

.nav-overlay { align-items: end; padding-bottom: 44px; background: linear-gradient(transparent 25%, rgba(4,5,8,.82)); }
.nav-dock { width: min(1100px, 96vw); display: grid; grid-template-columns: repeat(9,1fr); gap: 6px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: rgba(17,19,25,.98); box-shadow: 0 18px 50px var(--shadow); }
.nav-dock button { min-height: 68px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--dim); display: grid; place-items: center; align-content: center; gap: 5px; cursor: pointer; }
.nav-dock button:hover, .nav-dock button.active { color: var(--text); border-color: rgba(var(--uv-rgb),.38); background: rgba(var(--uv-rgb),.14); }.nav-dock b { color: var(--uv); font-size: 21px; font-weight: 400; }.nav-dock span { font-size: 10px; letter-spacing: .08em; }

.page-heading { height: 68px; padding: 0 4px 9px; border-bottom: 1px solid var(--line-soft); }
.detail-grid { height: calc(100% - 68px); display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0,1fr); gap: 10px; padding-top: 10px; padding-bottom: 32px; }
.media-heading-actions { display:flex; align-items:center; gap:8px; }
.ma-embed-shell { position:relative; height:calc(100% - 78px); margin-top:10px; overflow:hidden; border:1px solid var(--line-soft); border-radius:12px; background:#0b0d10; box-shadow:0 18px 42px rgba(0,0,0,.28); }
.ma-embed-shell iframe { position:absolute; z-index:2; inset:0; width:100%; height:100%; border:0; background:#0b0d10; opacity:0; transition:opacity .22s ease; }
.ma-embed-shell.loaded iframe { opacity:1; }
.ma-embed-loading { position:absolute; z-index:1; inset:0; display:grid; place-content:center; gap:7px; text-align:center; color:var(--text); }
.ma-embed-loading:before { content:'♫'; width:54px; height:54px; margin:0 auto 6px; display:grid; place-items:center; border:1px solid #1ed760; border-radius:50%; background:rgba(30,215,96,.11); color:#1ed760; font-size:29px; animation:ma-pulse 1.2s ease-in-out infinite alternate; }
.ma-embed-loading small { color:var(--dim); }
@keyframes ma-pulse { to { box-shadow:0 0 26px rgba(30,215,96,.34); transform:scale(1.04); } }
.detail-card { position: relative; overflow: hidden; padding: 17px; display: grid; grid-template-rows: auto 1fr auto; cursor: pointer; color: var(--text); box-shadow: 0 12px 28px rgba(0,0,0,.2); transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.detail-card:hover, .detail-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb,var(--card-accent) 62%,var(--line)); background: linear-gradient(145deg,rgba(32,36,45,.97),rgba(17,20,26,.99)); }
.detail-card::after { content: ""; position: absolute; inset: auto 20% 0; height: 2px; background: var(--card-accent, var(--uv)); opacity: .58; }
.detail-card header { display: flex; justify-content: space-between; gap: 10px; }.detail-card header b { font-size: 14px; font-weight: 500; }.detail-card header i { color: var(--card-accent, var(--uv)); font-style: normal; font-size: 21px; }.detail-card p { align-self: center; margin: 10px 0; color: var(--dim); font-size: 12px; line-height: 1.5; }.detail-card footer { color: var(--dim); font-size: 9px; letter-spacing: .12em; }

.settings-drawer { position: fixed; z-index: 60; top: 0; right: 0; width: min(390px, 92vw); height: 100dvh; padding: 20px; border-left: 1px solid var(--line); background: #11141a; box-shadow: -24px 0 60px rgba(0,0,0,.5); transform: translateX(105%); transition: transform .28s ease; }
.settings-drawer.open { transform: translateX(0); }.setting-row, .setting-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }.setting-row strong, .setting-row small { display: block; }.setting-row strong { font-size: 13px; font-weight: 500; }.setting-row small { margin-top: 4px; }.setting-row input { width: 21px; height: 21px; accent-color: var(--uv); }.setting-field select { min-width: 140px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); }.settings-action { width: 100%; margin-top: 18px; padding: 12px; border: 1px solid var(--uv); border-radius: 8px; background: rgba(var(--uv-rgb),.14); color: var(--text); cursor: pointer; }.settings-action.subtle { margin-top: 9px; border-color: var(--line); background: transparent; }.settings-drawer p { margin-top: 24px; color: var(--dim); font-size: 11px; line-height: 1.6; }

.screensaver { position: fixed; z-index: 100; inset: 0; overflow: hidden; padding: 27px; display: grid; grid-template-rows: auto 1fr auto auto; background: #05060a url('assets/cosmos.svg') center/cover no-repeat; cursor: pointer; animation: saver-in .75s ease both; }
.screensaver[hidden] { display: none; }.saver-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,4,8,.86), rgba(3,4,8,.11) 68%, rgba(3,4,8,.56)); }.screensaver > *:not(.saver-shade) { position: relative; z-index: 1; }
@keyframes saver-in { from { opacity: 0; transform: scale(1.015); } }
.screensaver header, .screensaver footer { display: flex; justify-content: space-between; gap: 18px; color: rgba(243,244,247,.72); font-size: 10px; letter-spacing: .15em; }.saver-weather { text-align: right; }.saver-weather b, .saver-weather small { display: block; }.saver-weather b { color: var(--text); font-size: 28px; font-weight: 400; letter-spacing: 0; }.saver-weather small { margin-top: 3px; letter-spacing: 0; }.saver-clock { align-self: center; }.saver-clock strong, .saver-clock span { display: block; }.saver-clock strong { font-size: clamp(76px, 11vw, 132px); font-weight: 300; line-height: .88; letter-spacing: -.08em; }.saver-clock span { margin-top: 16px; color: rgba(243,244,247,.74); font-size: 15px; letter-spacing: .15em; text-transform: uppercase; }.saver-data { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.22); }.saver-data > span { padding: 8px 10px; border-left: 2px solid var(--uv); background: rgba(8,9,12,.54); }.saver-data small, .saver-data b { display: block; }.saver-data small { color: rgba(243,244,247,.61); font-size: 9px; letter-spacing: .11em; }.saver-data b { margin-top: 3px; font-size: 14px; font-weight: 500; }.screensaver footer { padding-top: 9px; border-top: 1px solid rgba(255,255,255,.13); letter-spacing: .05em; }

.toast { position: fixed; z-index: 120; left: 50%; bottom: 46px; transform: translate(-50%,20px); opacity: 0; pointer-events: none; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); font-size: 11px; box-shadow: 0 14px 36px var(--shadow); transition: opacity .2s ease, transform .2s ease; }.toast.show { opacity: 1; transform: translate(-50%,0); }
.touch-ripple { position: fixed; z-index: 200; width: 12px; height: 12px; margin: -6px; border: 1px solid rgba(var(--uv-rgb),.85); border-radius: 50%; pointer-events: none; animation: ripple-out .55s ease-out forwards; }
@keyframes ripple-out { to { opacity: 0; transform: scale(5); } }

@media (max-width: 900px) {
  .topbar { grid-template-columns: minmax(230px,1fr) 120px 110px 45px; }.top-status:nth-of-type(2) { display: none; }
  .home-grid { grid-template-columns: 1.15fr 1fr .72fr; }.panel { padding: 10px; }.scene { min-height: 54px; }.presence-line { margin-top: 9px; padding: 9px; }.room-grid { gap: 5px; }.room { padding: 7px; }.album-art { width: 60px; }.music-body { grid-template-columns: 60px 1fr; }
}
@media (min-width: 1180px) and (max-width: 1320px) and (min-height: 720px) and (max-height: 840px) {
  .app-shell { min-height: 0; padding: 12px 12px 10px; grid-template-rows: 62px minmax(0,1fr); gap: 9px; }
  .topbar { grid-template-columns: minmax(260px,1fr) 128px 146px 122px 48px 48px; gap: 8px; }
  .brand, .top-status, .icon-button, .update-beacon { min-height: 62px; }
  .brand-mark { width: 34px; height: 34px; }
  .home-grid { gap: 9px; padding-bottom: 34px; }
  .panel { padding: 12px; }
  .panel-head { padding-bottom: 8px; }
  .scene-row { margin-top: 13px; }
  .scene { min-height: 62px; }
  .presence-line { margin-top: 12px; padding: 10px; }
  .music-body { margin-top: 16px; }
  .room-grid { margin-top: 12px; }
  .room { padding: 9px; }
  .panel-tail { padding: 7px 9px; }
  .media-tail { padding-top: 8px; }
  .climate-main { margin: 16px 0 12px; padding: 11px; }
  .large-number { margin: 15px 0 9px; }
  .tars-summary { margin: 14px 0 3px; }
  .menu-trigger { height: 40px; width: 184px; }
  .detail-grid { padding-bottom: 42px; }
  .nav-dock button { min-height: 74px; }
  .modal { max-height: 760px; }
  .quick-control { min-height: 118px; }
  .screensaver { padding: 24px; }
  .saver-clock strong { font-size: 116px; }
}
@media (max-width: 700px) {
  html, body { overflow: auto; }.app-shell { min-height: 100dvh; height: auto; }.topbar { grid-template-columns: 1fr 110px 44px; }.top-status:nth-of-type(1), .top-status:nth-of-type(2) { display: none; }
  .home-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "scenes" "music" "travel" "rooms" "climate" "energy" "tars"; }.panel { min-height: 170px; }.panel-tars { min-height: 130px; }.detail-grid { grid-template-columns: 1fr; height: auto; }.detail-card { min-height: 150px; }.nav-dock { grid-template-columns: repeat(7,1fr); }.nav-dock span { display: none; }.saver-data { grid-template-columns: 1fr 1fr; }.screensaver footer span:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* 10.1-inch Home Studio · Demo information layout */
.home-grid-v2 {
  grid-template-columns: 1.18fr 1fr .94fr;
  grid-template-rows: repeat(3,minmax(0,1fr));
  grid-template-areas: "weather rooms climate" "weather rooms energy" "music status energy";
}
.panel-weather { grid-area: weather; }
.panel-status { grid-area: status; }
.panel-static { cursor: default; }
.panel-static:hover { transform: none; border-color: var(--line); box-shadow: inset 0 1px rgba(255,255,255,.035),0 12px 30px rgba(0,0,0,.22); }
.brand small,.top-status small,.settings-drawer small,.modal small,.page-heading small { font-size: 11px; }
.brand strong,.top-status strong { font-size: 16px; }
.panel-head { font-size: 16px; }
.panel-head em { font-size: 10px; }

.weather-now { display:flex; align-items:center; gap:18px; margin:17px 0 13px; }
.weather-now > b { width:72px; color:var(--amber); font-size:54px; font-weight:400; text-align:center; filter:drop-shadow(0 0 15px rgba(242,184,75,.22)); }
.weather-now strong,.weather-now small { display:block; }
.weather-now strong { font-size:48px; font-weight:350; line-height:1; letter-spacing:-.05em; }
.weather-now small { margin-top:5px; color:var(--dim); font-size:14px; text-transform:capitalize; }
.weather-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.weather-meta > span,.temperature-row > span,.status-grid > span { padding:10px; border:1px solid var(--line-soft); border-radius:8px; background:rgba(7,8,11,.28); }
.weather-meta small,.weather-meta b,.temperature-row small,.temperature-row b,.status-grid small,.status-grid b { display:block; }
.weather-meta small,.temperature-row small,.status-grid small { color:var(--dim); font-size:10px; letter-spacing:.09em; }
.weather-meta b { margin-top:4px; font-size:15px; font-weight:500; }
.forecast-row { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:12px; }
.forecast-row > span,.saver-forecast > span { min-width:0; padding:9px 5px; border:1px solid var(--line-soft); border-radius:8px; background:linear-gradient(160deg,rgba(var(--uv-rgb),.07),rgba(7,8,11,.3)); text-align:center; }
.forecast-row small,.forecast-row b,.forecast-row strong,.forecast-row em,.saver-forecast small,.saver-forecast b,.saver-forecast strong,.saver-forecast em { display:block; }
.forecast-row small { color:var(--dim); font-size:10px; letter-spacing:.08em; }
.forecast-row b { margin:5px 0 2px; font-size:21px; font-weight:400; }
.forecast-row strong { font-size:15px; }.forecast-row em { margin-top:2px; color:var(--dim); font-size:9px; font-style:normal; }
.empty-data { grid-column:1/-1; color:var(--dim); }

.room-launcher-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.room-launcher { min-height:61px; padding:8px; border:1px solid var(--line-soft); border-left:3px solid var(--line); border-radius:8px; background:rgba(7,8,11,.32); color:var(--text); text-align:left; cursor:pointer; }
.room-launcher.lit { border-left-color:var(--amber); background:linear-gradient(90deg,rgba(242,184,75,.09),rgba(7,8,11,.28)); }
.room-launcher b,.room-launcher small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-launcher b { font-size:13px; font-weight:550; }.room-launcher small { margin-top:5px; color:var(--dim); font-size:11px; }

.temperature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; height:calc(100% - 43px); align-items:stretch; padding-top:10px; }
.temperature-row > span { display:flex; flex-direction:column; justify-content:center; }
.temperature-row b { margin-top:7px; font-size:28px; font-weight:350; color:var(--cyan); }
.energy-head { display:flex; justify-content:space-between; align-items:end; margin-top:12px; }
.energy-head strong { font-size:30px; font-weight:350; }.energy-head small { color:var(--dim); font-size:11px; }
.energy-chart { width:100%; height:calc(100% - 100px); min-height:95px; margin-top:5px; overflow:visible; }
.chart-line { fill:none; stroke:var(--uv); stroke-width:3; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px rgba(var(--uv-rgb),.4)); }
.chart-fill { fill:url(#energyFill); stroke:none; }
.chart-axis { display:flex; justify-content:space-between; color:var(--dim); font-size:9px; }
.status-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-top:12px; }
.status-grid > span { padding:8px; }.status-grid b { margin-top:3px; font-size:14px; }

.home-grid-v2 .panel-music .music-body { margin-top:12px; grid-template-columns:52px 1fr; gap:11px; }
.home-grid-v2 .panel-music .album-art { width:52px; }.home-grid-v2 .panel-music .equalizer { display:none; }
.home-grid-v2 .panel-music .media-tail { display:none; }.home-grid-v2 .panel-music .metric-line { margin-top:7px; }

.modal { width:min(1040px,95vw); max-height:88vh; }
.modal-content { grid-template-columns:repeat(3,1fr); }
.room-master { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.device-list { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.device-control { padding:12px; border:1px solid var(--line-soft); border-left:3px solid var(--line); border-radius:9px; background:#12151b; }
.device-control.active { border-left-color:var(--amber); }
.device-control header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.device-control header b,.device-control header small { display:block; }.device-control header b { font-size:13px; font-weight:550; }.device-control header small { margin-top:4px; color:var(--dim); font-size:11px; }
.device-control header button { min-width:68px; min-height:42px; border:1px solid var(--uv); border-radius:8px; background:rgba(var(--uv-rgb),.12); }
.device-control label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; margin-top:11px; color:var(--dim); font-size:11px; }
.device-control input[type=range] { width:100%; accent-color:var(--uv); }
.room-media { grid-column:1/-1; min-height:58px; padding:11px 14px; border:1px solid var(--line-soft); border-radius:9px; background:rgba(var(--uv-rgb),.08); color:var(--text); text-align:left; }
.room-media b,.room-media small { display:block; }.room-media small { margin-top:4px; color:var(--dim); }

.weather-screensaver { background:radial-gradient(circle at 75% 22%,rgba(99,219,227,.13),transparent 28%),radial-gradient(circle at 18% 78%,rgba(var(--uv-rgb),.14),transparent 34%),linear-gradient(145deg,#080b12,#111824 58%,#090b11); grid-template-rows:auto 1fr auto auto auto; }
.weather-screensaver .saver-shade { background:linear-gradient(90deg,rgba(3,4,8,.42),transparent 62%,rgba(3,4,8,.25)); }
.saver-forecast { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
.saver-forecast > span { padding:12px; background:rgba(8,11,18,.62); }
.saver-forecast small { color:rgba(243,244,247,.65); font-size:11px; letter-spacing:.12em; }.saver-forecast b { margin:6px 0; font-size:29px; }.saver-forecast strong { font-size:20px; }.saver-forecast em { margin-top:4px; color:rgba(243,244,247,.64); font-size:11px; font-style:normal; }
.saver-data b { font-size:16px; }.saver-data small { font-size:10px; }
.saver-notifications{display:flex;gap:10px;flex-wrap:wrap}.saver-notifications:empty{display:none}.saver-notice{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-left:3px solid var(--cyan);border-radius:9px;background:rgba(8,9,12,.68);font-size:14px}.saver-notice i{font-style:normal;font-size:23px}.saver-notice b,.saver-notice small{display:block}.saver-notice small{color:var(--dim);margin-top:2px}.energy-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.energy-summary-grid article{padding:18px;border:1px solid var(--line-soft);border-radius:11px;background:#12151b}.energy-summary-grid small,.energy-summary-grid strong{display:block}.energy-summary-grid strong{font-size:30px;margin-top:8px}.energy-appliances{display:grid;gap:12px}.energy-appliance{cursor:pointer}

/* Dedicated weather, climate, data and energy layers */
#weatherGrid,#climateGrid,#dataGrid,#energyGrid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:11px}
.weather-hero,.weather-chart,.week-forecast,.data-section,.climate-room,.valve-placeholder,.energy-overview,.energy-month,.energy-devices,.energy-laundry{border:1px solid var(--line-soft);border-radius:12px;background:radial-gradient(circle at 100% 0,rgba(var(--uv-rgb),.1),transparent 36%),#12151b;box-shadow:0 12px 28px rgba(0,0,0,.22);overflow:hidden}
.weather-hero{grid-column:span 4;padding:20px}.weather-hero>div{display:flex;align-items:center;gap:18px}.weather-hero .weather-glyph{width:92px;height:92px}.weather-hero strong,.weather-hero b,.weather-hero small{display:block}.weather-hero strong{font-size:58px;font-weight:300;line-height:.9}.weather-hero b{margin-top:8px;color:var(--dim);font-size:18px;text-transform:capitalize}.weather-hero dl{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0 0}.weather-hero dl span{padding:10px;border:1px solid var(--line-soft);border-radius:8px;background:#090b0f}.weather-hero dt{color:var(--dim);font-size:10px;letter-spacing:.1em}.weather-hero dd{margin:4px 0 0;font-size:17px;font-weight:650}
.weather-chart{grid-column:span 8;padding:18px}.weather-chart header,.week-forecast header,.data-section>header,.energy-overview>header,.energy-month>header,.energy-devices>header,.energy-laundry>header,.climate-room header,.valve-placeholder header{display:flex;align-items:center;justify-content:space-between}.weather-chart small,.week-forecast small,.data-section small,.energy-overview small,.energy-month small,.energy-devices small,.energy-laundry small,.climate-room small,.valve-placeholder small{color:var(--dim);font-size:10px;letter-spacing:.11em}.weather-chart h2,.week-forecast h2,.data-section h2,.energy-overview h2,.energy-month h2,.energy-devices h2,.energy-laundry h2,.climate-room h2,.valve-placeholder h2{margin:3px 0 0;font-size:19px}.weather-chart header em,.week-forecast header em,.data-section>header>em,.energy-overview header em,.energy-month header em,.energy-devices header em,.energy-laundry header em,.climate-room header em,.valve-placeholder header em{color:var(--cyan);font-size:11px;font-style:normal;letter-spacing:.08em}.weather-chart svg{width:100%;height:145px;margin-top:8px}.weather-chart-grid{fill:none;stroke:#2b303a;stroke-width:1}.weather-chart-line{fill:none;stroke:var(--amber);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(242,184,75,.35))}.weather-chart>div{display:flex;justify-content:space-between}.weather-chart>div span{text-align:center}.weather-chart>div b{display:block;margin-top:2px}.week-forecast{grid-column:1/-1;padding:17px}.week-forecast>div{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:12px}.week-forecast article{padding:10px 6px;border:1px solid var(--line-soft);border-radius:9px;background:#090b0f;text-align:center}.week-forecast article>*{display:block}.week-forecast .weather-glyph{width:39px;height:39px;margin:5px auto}.week-forecast article b{font-size:14px}.week-forecast article b strong{color:var(--amber)}.week-forecast article em{margin-top:4px;color:var(--cyan);font-size:10px;font-style:normal}
.climate-room-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.climate-room{padding:18px;border-top:3px solid var(--room-color)}.climate-room>div{display:flex;align-items:end;justify-content:space-between;margin-top:24px}.climate-room>div>strong{font-size:54px;font-weight:300}.climate-room>div span{text-align:right}.climate-room>div b{display:block;margin-top:5px;font-size:23px}.valve-grid{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:11px}.valve-placeholder{padding:18px;border-style:dashed}.valve-placeholder>div{display:flex;align-items:center;gap:16px;margin-top:18px}.valve-placeholder>div span{font-size:36px;color:var(--amber)}.valve-placeholder>div strong{font-size:38px}.valve-placeholder p{color:var(--dim);font-size:12px;line-height:1.45}
.data-section{padding:15px}.data-doors{grid-column:span 7}.data-appliances{grid-column:span 5}.data-house{grid-column:span 5}.data-lux{grid-column:span 7}.state-tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:11px}.state-tile-grid.appliances{grid-template-columns:repeat(3,1fr)}.state-tile{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line-soft);border-left:3px solid var(--green);border-radius:9px;background:#090b0f}.state-tile-grid.appliances .state-tile{min-width:0;align-items:flex-start}.state-tile-grid.appliances .state-tile>i{font-size:19px}.state-tile.warning{border-left-color:var(--amber);background:rgba(242,184,75,.08)}.state-tile.active{border-left-color:var(--cyan)}.state-tile.finished{border-left-color:var(--uv)}.state-tile>i{font-size:24px;font-style:normal}.state-tile small,.state-tile b,.state-tile em{display:block}.state-tile b{margin-top:3px;font-size:15px}.state-tile em{color:var(--dim);font-size:10px;font-style:normal}.house-logic{display:grid;grid-template-columns:1fr;gap:8px;margin-top:11px}.house-logic article,.master-toggle{padding:10px;border:1px solid var(--line-soft);border-radius:9px;background:#090b0f;text-align:left}.house-logic article b{display:block;margin-top:3px;font-size:17px}.master-toggle{display:grid;grid-template-columns:30px 1fr auto;align-items:center;color:var(--text);cursor:pointer}.master-toggle>span{color:var(--dim);font-size:20px}.master-toggle.active{border-color:rgba(104,211,145,.55);background:rgba(104,211,145,.09)}.master-toggle.active>span{color:var(--green)}.master-toggle small{font-size:12px}.lux-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}.lux-tile{display:grid;grid-template-columns:1fr 54px;align-items:center;padding:9px 10px;border:1px solid var(--line-soft);border-radius:8px;background:#090b0f}.lux-tile small,.lux-tile b{display:block}.lux-tile b{margin-top:3px;font-size:16px}.lux-tile b em{color:var(--dim);font-size:10px;font-style:normal}.lux-tile>i{height:7px;border-radius:5px;background:linear-gradient(90deg,var(--amber) var(--lux),#272c35 var(--lux))}
.energy-overview{grid-column:span 8;padding:18px}.energy-overview svg{width:100%;height:185px;margin-top:3px}.energy-live{display:flex;gap:30px;margin-top:13px}.energy-live span>*{display:inline}.energy-live strong{margin-left:8px;font-size:30px}.energy-live strong b{font-size:13px;color:var(--dim)}.energy-page-grid{fill:none;stroke:#2b303a}.energy-page-fill{fill:url(#energyPageFill)}.energy-page-line{fill:none;stroke:var(--uv);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.energy-overview .chart-axis{grid-template-columns:repeat(4,1fr)}.energy-month{grid-column:span 4;padding:18px}.energy-month>div{display:grid;gap:9px;margin-top:16px}.energy-month article{padding:13px;border-left:3px solid var(--uv);border-radius:0 8px 8px 0;background:#090b0f}.energy-month article>*{display:block}.energy-month article strong{margin-top:4px;font-size:25px}.energy-month article strong b{font-size:12px;color:var(--dim)}.energy-month footer,.energy-devices footer{margin-top:10px;color:var(--dim);font-size:10px;line-height:1.35}.energy-devices{grid-column:span 7;padding:17px}.energy-devices>div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:13px}.energy-device{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line-soft);border-radius:9px;background:#090b0f;text-align:left;cursor:pointer}.energy-device>i{width:7px;height:46px;border-radius:5px;background:var(--device-color);box-shadow:0 0 10px var(--device-color)}.energy-device span>*{display:block}.energy-device span b{margin-top:3px;font-size:20px}.energy-device span em{margin-top:3px;color:var(--dim);font-size:10px;font-style:normal}.energy-laundry{grid-column:span 5;padding:17px}.energy-laundry>div{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.energy-laundry article{display:flex;gap:11px;padding:12px;border:1px solid var(--line-soft);border-radius:9px;background:#090b0f}.energy-laundry article>i{font-size:26px;color:var(--cyan);font-style:normal}.energy-laundry article span>*{display:block}.energy-laundry article b{margin-top:3px}.energy-laundry article em{margin-top:3px;color:var(--dim);font-size:10px;font-style:normal}

/* Music Assistant screensaver — active only while Kitchen or Studio plays. */
.saver-media[hidden]{display:none}.media-screensaver{padding:30px 38px;background:radial-gradient(circle at 18% 50%,rgba(30,215,96,.13),transparent 32%),linear-gradient(130deg,#070908,#171b19 60%,#090b0a);grid-template-rows:auto 1fr auto}.media-screensaver .saver-clock,.media-screensaver .saver-forecast,.media-screensaver .saver-data{display:none}.media-screensaver>header .saver-weather{display:none}.media-screensaver>footer span:first-child{font-size:0}.media-screensaver>footer span:first-child:after{content:'LIVE VIA MUSIC ASSISTANT';font-size:10px}.media-screensaver .saver-media{display:grid;grid-template-columns:minmax(300px,42vh) minmax(0,1fr);align-items:center;justify-content:center;gap:52px;width:min(1040px,90vw);margin:auto}.saver-album-art{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#27302b,#49345b);box-shadow:0 28px 70px #000b,0 0 0 1px rgba(255,255,255,.12)}.saver-album-art:after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);border-radius:inherit;pointer-events:none}.saver-album-art img,.saver-album-art>.music-placeholder{width:100%;height:100%;object-fit:cover;display:grid;place-items:center;font-size:90px}.saver-media-copy{min-width:0}.saver-media-copy>small{color:#1ed760;font-size:12px;font-weight:800;letter-spacing:.15em}.saver-media-copy h2{margin:12px 0 4px;font-size:clamp(38px,5vw,66px);line-height:.98;letter-spacing:-.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saver-media-copy>p{margin:0;color:#b8bfbb;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saver-media-controls{display:flex;align-items:center;gap:15px;margin:28px 0}.saver-media-controls button{width:62px;height:62px;border:1px solid #555d58;border-radius:50%;background:#242a26;color:white;font-size:31px;box-shadow:0 7px 24px #0007}.saver-media-controls button.primary{width:76px;height:76px;border-color:#1ed760;background:#1ed760;color:#071108;font-size:25px}.saver-next{max-width:520px;padding:15px 18px;border-left:3px solid #1ed760;border-radius:0 10px 10px 0;background:rgba(255,255,255,.055)}.saver-next small,.saver-next b,.saver-next span{display:block}.saver-next small{color:#8e9792;font-size:10px;font-weight:800;letter-spacing:.15em}.saver-next b{margin-top:5px;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saver-next span{margin-top:2px;color:#aeb5b1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-height:740px){.media-screensaver .saver-media{grid-template-columns:300px minmax(0,1fr);gap:40px}.saver-media-copy h2{font-size:42px}.saver-media-controls{margin:18px 0}.saver-media-controls button{width:54px;height:54px}.saver-media-controls button.primary{width:66px;height:66px}}
.saver-media-controls button.clear-queue{margin-left:8px;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#dce4df;font-size:36px}.saver-clear-label{margin:-14px 0 18px;padding:8px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.07);color:#9ea8a2;font-size:10px;font-weight:800;letter-spacing:.11em}.saver-clear-label:active,.saver-media-controls button.clear-queue:active{background:#e8efeb;color:#101411}

/* Media screensaver volume and live song timeline. */
.media-screensaver .saver-media{grid-template-columns:minmax(300px,42vh) minmax(0,1fr) 74px;grid-template-rows:minmax(0,1fr) auto;gap:18px 40px;width:min(1120px,92vw)}.saver-volume{height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:13px 8px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.045)}.saver-volume small{color:#8e9792;font-size:9px;font-weight:800;letter-spacing:.12em}.saver-volume b{font-size:15px}.saver-volume input{width:230px;height:24px;writing-mode:vertical-lr;direction:rtl;accent-color:#1ed760;touch-action:none}.saver-volume span{font-size:17px}.saver-timeline{grid-column:1/-1;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:11px;width:100%;padding:3px 0}.saver-timeline small{color:#b7bdb9;font-size:11px;font-variant-numeric:tabular-nums}.saver-timeline small:last-child{text-align:right}.saver-timeline>i{position:relative;height:7px;border-radius:7px;background:#424844;overflow:hidden}.saver-timeline>i>b{position:absolute;inset:0 auto 0 0;width:var(--song-progress);border-radius:inherit;background:linear-gradient(90deg,#1ed760,#63dbe3);box-shadow:0 0 13px rgba(30,215,96,.45)}
@media(max-height:740px){.media-screensaver .saver-media{grid-template-columns:300px minmax(0,1fr) 66px;grid-template-rows:minmax(0,1fr) auto;gap:12px 30px}.saver-volume{height:280px}.saver-volume input{width:185px}}
.saver-volume input{width:24px;height:230px}@media(max-height:740px){.saver-volume input{width:24px;height:185px}}

/* Home now-playing controls and scrollable Music Assistant queue. */
.panel-music{cursor:pointer}.home-music-main{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:12px;margin-top:11px;min-width:0}.home-music-main .album-art,.home-music-main .album-art img,.home-music-main .album-art>.music-placeholder{width:66px;height:66px;border-radius:8px;object-fit:cover;display:grid;place-items:center;background:#282e2a;overflow:hidden}.home-track-copy{min-width:0}.home-track-copy strong,.home-track-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-track-copy strong{font-size:15px}.home-track-copy small{margin-top:5px;color:var(--dim);font-size:11px}.home-music-controls{display:grid;grid-template-columns:36px 42px 36px minmax(0,1fr);align-items:center;gap:6px;margin-top:9px}.home-music-controls>button{width:36px;height:34px;border:1px solid var(--line);border-radius:50%;background:#171b18;color:var(--text);font-size:19px}.home-music-controls>button.playing{width:42px;height:42px;border-color:#1ed760;background:#1ed760;color:#071108;font-size:15px}.home-music-controls>button:disabled{opacity:.3}.home-music-controls label{display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:center;min-width:0;margin-left:7px}.home-music-controls label small{color:var(--dim);font-size:8px;letter-spacing:.1em}.home-music-controls label b{justify-self:end;font-size:11px}.home-music-controls input{grid-column:1/-1;width:100%;accent-color:#1ed760}.queue-browser{grid-column:1/-1;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:min(620px,72vh);min-height:320px}.queue-browser>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:4px 5px 12px;border-bottom:1px solid var(--line)}.queue-browser>header b,.queue-browser>header small{display:block}.queue-browser>header small{margin-top:4px;color:var(--dim);font-size:11px}.queue-browser>header em{color:#1ed760;font-size:10px;font-style:normal}.queue-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 4px 18px;scrollbar-color:#59615c #171a18}.queue-row{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) 50px;align-items:center;gap:12px;padding:8px 10px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:var(--text);text-align:left}.queue-row:hover,.queue-row:focus-visible{background:rgba(255,255,255,.055)}.queue-row.current{border-left:3px solid #1ed760;background:rgba(30,215,96,.09)}.queue-row>span:first-child,.queue-row img,.queue-row .music-placeholder{width:52px;height:52px;border-radius:5px;object-fit:cover;display:grid;place-items:center;background:#2d332f;overflow:hidden}.queue-row b,.queue-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-row b{font-size:13px}.queue-row small{margin-top:4px;color:var(--dim);font-size:10px}.queue-row em{color:var(--dim);font-size:10px;font-style:normal;text-align:right}.queue-row.current em{color:#1ed760;font-weight:700}

/* Keep the practical weather screensaver context visible while music is active. */
.media-screensaver .saver-media{grid-template-columns:minmax(250px,34vh) minmax(0,1fr) 70px;grid-template-rows:minmax(0,1fr) auto auto;gap:12px 34px;width:min(1160px,94vw)}
.saver-media-left{align-self:stretch;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-height:0}
.media-context-clock{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 3px}
.media-context-clock b{font-size:40px;line-height:1;font-weight:760;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.media-context-clock small{color:#aeb5b1;font-size:12px;text-transform:capitalize;text-align:right}
.saver-media-left .saver-album-art{height:100%;min-height:0;aspect-ratio:auto}
.saver-media-context{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(410px,1fr);gap:16px;padding:9px 12px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.04)}
.media-context-weather,.media-context-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.media-context-weather>span,.media-context-stats>span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 8px;min-width:0;padding:3px 7px;border-right:1px solid rgba(255,255,255,.08)}
.media-context-weather>span:last-child,.media-context-stats>span:last-child{border-right:0}
.media-context-weather small,.media-context-stats small{grid-column:1/-1;color:#8e9792;font-size:8px;font-weight:800;letter-spacing:.1em;white-space:nowrap}
.media-context-weather svg{width:22px;height:22px;color:#63dbe3}.media-context-weather b,.media-context-stats b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saver-timeline{padding-bottom:1px}
@media(max-height:740px){.media-screensaver{padding:20px 34px}.media-screensaver .saver-media{grid-template-columns:230px minmax(0,1fr) 64px;grid-template-rows:minmax(0,1fr) auto auto;gap:9px 28px}.media-context-clock b{font-size:32px}.media-context-clock small{font-size:10px}.saver-media-context{padding:6px 9px}.saver-volume{height:230px}.saver-volume input{height:145px}.media-context-weather b,.media-context-stats b{font-size:13px}}

@media (min-width:1180px) and (max-width:1320px) and (min-height:720px) and (max-height:840px) {
  .home-grid-v2 { grid-template-columns:1.18fr 1fr .94fr; }
  .weather-now { margin:12px 0 9px; }.weather-now > b { font-size:45px; }.weather-now strong { font-size:42px; }
  .forecast-row { margin-top:9px; }.forecast-row > span { padding:7px 4px; }
  .room-launcher-grid { gap:6px; margin-top:9px; }.room-launcher { min-height:55px; padding:7px; }
  .energy-chart { min-height:88px; }.temperature-row b { font-size:25px; }
}

#serviceGrid { grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:none; }
.top-status small { font-size:9px;line-height:1.05; }
.top-status strong { margin-top:2px;font-size:14px;line-height:1.1; }
.top-status .status-meta { margin-top:2px;font-size:8px;line-height:1.05; }
.room-scenes>div { flex-wrap:wrap; }
.room-scenes .scene-control { flex:1 1 150px; }

/* Upgrade package 17/08/2026 — layered modes and security. */
.mode-status-trigger{width:100%;color:var(--text);text-align:left;cursor:pointer}.mode-status-trigger:hover,.mode-status-trigger:focus-visible{border-color:rgba(var(--uv-rgb),.55);background:rgba(var(--uv-rgb),.12)}
.mode-page-grid,.security-page-grid{height:calc(100% - 72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;overflow:auto;padding:4px 2px 38px}
.mode-summary-card,.occupancy-controls,.mode-card-grid,.mode-notifications,.security-hero,.security-controls,.security-evidence,.security-warning{border:1px solid var(--line-soft);border-radius:12px;background:#12151b;padding:15px}
.mode-summary-card{grid-column:span 7}.mode-summary-card small,.occupancy-controls>small,.mode-card small,.mode-notifications small,.security-hero small,.security-evidence small{color:var(--dim);font-size:9px;letter-spacing:.13em}.mode-summary-card h2{margin:8px 0 6px;font-size:24px}.mode-summary-card p{margin:0;color:var(--dim);font-size:11px}
.occupancy-controls{grid-column:span 5;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.occupancy-controls>small{grid-column:1/-1}.occupancy-controls button,.mode-card button,.mode-notifications button,.security-controls button,.mode-popup-footer button{min-height:42px;border:1px solid var(--line);border-radius:8px;background:#1a1e26;color:var(--text)}.occupancy-controls button.active,.mode-card.active button{border-color:var(--green);background:rgba(104,211,145,.12)}
.mode-card-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.mode-card{display:grid;grid-template-rows:auto auto auto 1fr;gap:5px;min-height:122px;padding:10px;border:1px solid var(--line-soft);border-radius:9px;background:#181b22}.mode-card h2{margin:0;font-size:15px}.mode-card>b{color:var(--dim);font-size:9px}.mode-card.active{border-color:rgba(104,211,145,.5);background:rgba(104,211,145,.08)}.mode-card.disabled{opacity:.56}.mode-card button{align-self:end;min-height:34px}.mode-card button:disabled{cursor:not-allowed}
.mode-notifications{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.mode-notifications b{display:block;margin-top:4px}.mode-notifications button{min-width:170px}
.security-hero{grid-column:span 7;border-left:5px solid var(--green)}.security-hero.state-alarm{border-left-color:var(--red);box-shadow:inset 0 0 35px rgba(232,93,117,.09)}.security-hero.state-armed,.security-hero.state-armed-away{border-left-color:var(--amber)}.security-hero h2{margin:8px 0;font-size:34px}.security-hero p{margin:0;color:var(--dim)}
.security-controls{grid-column:span 5;display:grid;grid-template-columns:1fr 1fr;gap:8px}.security-controls button.alarm{border-color:rgba(232,93,117,.7);color:#ff9caf}.security-evidence{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.security-evidence article{padding:10px;border:1px solid var(--line-soft);border-radius:8px;background:#090b0f}.security-evidence b{display:block;margin-top:5px;font-size:13px}.security-warning{grid-column:1/-1;display:flex;gap:16px;align-items:center;border-left:4px solid var(--amber)}.security-warning span{color:var(--dim);font-size:11px}
.security-controls button:disabled{opacity:.38;cursor:not-allowed}
.mode-popup-summary{padding:5px 5px 8px}.mode-popup-summary small,.mode-popup-occupancy>small{color:var(--dim);font-size:9px;letter-spacing:.14em}.mode-popup-summary h2{margin:6px 0 0;font-size:21px}.mode-popup-occupancy{display:grid;grid-template-columns:auto repeat(3,1fr);align-items:center;gap:7px;margin-bottom:8px}.mode-popup-occupancy button{min-height:34px;border:1px solid var(--line);border-radius:8px;background:#1a1e26;color:var(--text)}.mode-popup-occupancy button.active{border-color:var(--green);background:rgba(104,211,145,.12)}.mode-popup-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.mode-popup-grid .mode-card{min-height:112px}.mode-popup-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.mode-popup-footer button{min-height:45px}
@media(max-height:740px){.mode-page-grid,.security-page-grid{height:calc(100% - 62px)}.mode-card{min-height:103px}.mode-card-grid{grid-template-columns:repeat(5,1fr)}.security-hero h2{font-size:28px}}

/* HMI 1.6: compact top status, graphical room controls and richer detail layers */
.top-status { min-width:0; overflow:hidden; }
.top-status strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.status-meta { position:static; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }

#lightsGrid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:8px; }
.light-room-card { min-width:0; overflow:hidden; padding:9px; border:1px solid var(--line-soft); border-left:3px solid var(--line); border-radius:10px; background:radial-gradient(circle at 0 0,rgba(var(--uv-rgb),.06),transparent 45%),#12151b; }
.light-room-card.lit { border-left-color:var(--amber); background:radial-gradient(circle at 0 0,rgba(242,184,75,.11),transparent 48%),#12151b; }
.light-room-card header { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.room-graphic { min-width:0; flex:1; display:flex; align-items:center; gap:9px; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; }
.room-graphic>span b,.room-graphic>span small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.room-graphic>span b { font-size:14px; }.room-graphic>span small { margin-top:2px;color:var(--dim);font-size:10px; }
.bulb-icon { width:26px;height:26px;flex:0 0 auto;fill:none;stroke:#737b89;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }.bulb-icon.lit { fill:rgba(242,184,75,.24);stroke:var(--amber);filter:drop-shadow(0 0 6px rgba(242,184,75,.45)); }
.light-room-content { min-height:46px; display:flex; align-items:center; gap:7px; margin-top:7px; overflow:hidden; }
.overview-scene { min-width:104px; max-width:132px; flex:0 1 auto; padding:6px 8px; border:1px solid rgba(104,211,145,.4); border-radius:7px; background:rgba(104,211,145,.07); overflow:hidden; }
.overview-scene small,.overview-scene b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.overview-scene small { color:var(--green);font-size:7px;letter-spacing:.08em; }.overview-scene b { margin-top:2px;font-size:10px; }
.room-profile-start { width:100%; min-height:46px; display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid rgba(99,219,227,.35); border-radius:8px; background:linear-gradient(90deg,rgba(99,219,227,.08),#171a21); text-align:left; }
.room-profile-start .bulb-icon { width:22px;height:22px; }.room-profile-start span { min-width:0; }.room-profile-start b,.room-profile-start small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.room-profile-start b { font-size:11px; }.room-profile-start small { margin-top:2px;color:var(--dim);font-size:8px; }
.mini-light-grid { min-width:0; flex:1; display:flex; gap:5px; overflow:hidden; }
.mini-light { min-width:0; flex:1; height:43px; display:grid; place-items:center; align-content:center; gap:1px; padding:3px; border:1px solid var(--line-soft); border-radius:7px; background:#181b22; color:var(--dim); }
.mini-light .bulb-icon { width:17px;height:17px; }.mini-light span { width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px; }.mini-light.active { border-color:rgba(242,184,75,.45);color:var(--text);background:rgba(242,184,75,.07); }

#mediaGrid { display:block; height:calc(100% - 68px); padding-top:10px; padding-bottom:38px; }
.media-shell { height:100%; display:grid; grid-template-rows:auto auto 1fr; gap:10px; }
.media-hero,.media-transport,.music-library { border:1px solid var(--line-soft);border-radius:11px;background:radial-gradient(circle at 100% 0,rgba(var(--uv-rgb),.12),transparent 42%),#12151b; }
.media-hero { display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:15px;padding:14px; }.media-art { width:68px;height:68px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,var(--uv),#3e72d9);font-size:31px;box-shadow:0 0 24px rgba(var(--uv-rgb),.22); }.media-hero small { color:var(--dim);font-size:10px;letter-spacing:.14em; }.media-hero h2 { margin:4px 0 2px;font-size:25px;font-weight:450; }.media-hero p { margin:0;color:var(--dim);font-size:13px; }.target-switch { display:flex;gap:7px; }.target-switch button { min-width:106px;padding:11px;border:1px solid var(--line);border-radius:999px;background:#1b1f28;color:var(--dim); }.target-switch button.active { border-color:var(--cyan);background:rgba(99,219,227,.1);color:var(--text); }
.media-transport { display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding:10px; }.player-strip { display:grid;grid-template-columns:35px auto 1fr;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:8px;background:#181b22;text-align:left; }.player-strip>span { width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(var(--uv-rgb),.14);color:var(--uv); }.player-strip b { font-size:14px; }.player-strip small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:11px; }.player-strip.playing { border-color:rgba(104,211,145,.5); }.transport-buttons { position:relative;display:flex;gap:5px;padding-bottom:14px; }.transport-buttons button { width:46px;border:1px solid var(--line);border-radius:8px;background:#1a1e26;font-size:23px; }.transport-buttons>small { position:absolute;left:0;right:0;bottom:0;color:var(--dim);font-size:7px;text-align:center;white-space:nowrap; }.transport-buttons.unavailable button { opacity:.35; }
.music-library { min-height:0;padding:12px;overflow:hidden; }.music-library>header { display:flex;justify-content:space-between;align-items:center;margin-bottom:9px; }.music-library>header b { font-size:17px; }.music-library>header small { color:var(--dim);font-size:11px; }.music-library>div { height:calc(100% - 30px);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:8px; }.music-tile { min-width:0;display:grid;grid-template-columns:43px 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:0 9px;padding:9px;border:1px solid var(--line-soft);border-radius:9px;background:linear-gradient(135deg,rgba(var(--tile-rgb,168,117,255),.2),#171a21 64%);text-align:left; }.music-tile>span { grid-row:1/3;width:43px;height:43px;display:grid;place-items:center;border-radius:8px;background:rgba(var(--tile-rgb,168,117,255),.25);color:rgb(var(--tile-rgb,168,117,255));font-size:22px; }.music-tile b,.music-tile small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.music-tile b { align-self:end;font-size:13px; }.music-tile small { align-self:start;margin-top:2px;color:var(--dim);font-size:8px;letter-spacing:.06em; }.music-tile.hue-1{--tile-rgb:99,219,227}.music-tile.hue-2{--tile-rgb:242,184,75}.music-tile.hue-3{--tile-rgb:104,211,145}.music-tile.hue-4{--tile-rgb:232,93,117}

#serviceGrid { grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));grid-template-areas:none;gap:11px; }
.service-panel { min-width:0;padding:14px;border:1px solid var(--line-soft);border-radius:11px;background:radial-gradient(circle at 100% 0,rgba(var(--uv-rgb),.08),transparent 42%),#12151b;overflow:hidden; }.service-panel header { display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--line-soft); }.service-panel header span { display:flex;align-items:center;gap:8px; }.service-panel header i { color:var(--uv);font-size:20px;font-style:normal; }.service-panel header b { font-size:16px; }.service-panel header em { color:var(--cyan);font-size:10px;font-style:normal;letter-spacing:.07em; }.service-panel header em.bad { color:var(--red); }.service-automations { grid-area:auto;display:grid;grid-template-columns:145px 1fr;grid-template-rows:auto 1fr;gap:10px 15px; }.service-automations>header { grid-column:1/-1; }.automation-dial { width:126px;height:126px;align-self:center;justify-self:center;padding:10px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--dial)*1%),#2a2f39 0); }.automation-dial>span { width:100%;height:100%;display:grid;place-items:center;align-content:center;border-radius:50%;background:#12151b; }.automation-dial b,.automation-dial small { display:block; }.automation-dial b { font-size:28px; }.automation-dial small { color:var(--dim);font-size:10px; }.automation-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }.automation-stats span { padding:7px;border-radius:7px;background:#191d25;text-align:center; }.automation-stats b,.automation-stats small { display:block; }.automation-stats b { font-size:18px; }.automation-stats small { margin-top:2px;color:var(--dim);font-size:8px; }.recent-list { margin-top:8px; }.recent-list>span { display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:7px;padding:5px 0;border-top:1px solid var(--line-soft); }.recent-list i { width:6px;height:6px;border-radius:50%;background:var(--green); }.recent-list b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px; }.recent-list small { color:var(--dim);font-size:9px; }.service-health { grid-area:health; }.health-bars { display:grid;gap:18px;margin-top:18px; }.health-bars>span { display:grid;grid-template-columns:1fr auto;gap:5px; }.health-bars b,.health-bars em { font-size:11px;font-style:normal; }.health-bars em { color:var(--dim); }.health-bars i { grid-column:1/-1;height:9px;border-radius:5px;background:#292e38;overflow:hidden; }.health-bars u { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#487b68,var(--green));text-decoration:none; }.service-tile { display:flex;flex-direction:column; }.service-tile>strong { margin-top:auto;font-size:20px;font-weight:450;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.service-tile>small { margin-top:6px;color:var(--dim);font-size:11px; }.service-tile:nth-of-type(3){grid-area:tars}.service-tile:nth-of-type(4){grid-area:updates}.service-tile:nth-of-type(5){grid-area:maintenance}.service-tile:nth-of-type(6){display:none}

.service-automations{grid-area:auto!important;grid-column:span 6!important;grid-template-rows:auto auto 1fr}.service-automations .automation-dial{grid-column:1;grid-row:2/4}.service-automations .automation-stats{grid-column:2;grid-row:2}.service-automations .recent-list{grid-column:2;grid-row:3}.service-health{grid-area:auto!important;grid-column:span 6!important}.service-batteries,.service-updates,.service-other{grid-column:span 4}.service-updates,.service-other{display:block;width:100%;text-align:left;cursor:pointer}.service-panel.healthy{border-color:rgba(104,211,145,.32);background:radial-gradient(circle at 100% 0,rgba(104,211,145,.1),transparent 42%),#12151b}.service-panel.attention{border-color:rgba(242,184,75,.38)}.service-panel header em.ok{color:var(--green)}.service-panel header em.warning{color:var(--amber)}
.battery-list,.service-preview{display:grid;gap:8px;margin-top:12px}.battery-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px}.battery-row b,.battery-row em{font-size:10px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battery-row em{color:var(--dim)}.battery-row>i{grid-column:1/-1;height:7px;border-radius:4px;background:#292e38;overflow:hidden}.battery-row>i>u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#487b68,var(--green));text-decoration:none}.battery-row.warning>i>u{background:linear-gradient(90deg,#745d2e,var(--amber))}.battery-row.critical>i>u{background:linear-gradient(90deg,#74343a,var(--red))}.battery-row.warning em{color:var(--amber)}.battery-row.critical em{color:var(--red)}
.service-preview-row{display:grid;grid-template-columns:25px 1fr;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--line-soft);border-radius:7px;background:#0b0d11}.service-preview-row>i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(242,184,75,.12);color:var(--amber);font-style:normal}.service-preview-row b,.service-preview-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.service-preview-row b{font-size:10px}.service-preview-row small{margin-top:2px;color:var(--dim);font-size:8px}.service-more{color:var(--amber);font-size:10px;text-align:center}.service-empty{height:calc(100% - 44px);display:grid;place-items:center;align-content:center;gap:5px;text-align:center}.service-empty>i{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(104,211,145,.45);border-radius:50%;background:rgba(104,211,145,.1);color:var(--green);font-size:25px;font-style:normal}.service-empty b,.service-empty small{display:block}.service-empty small{color:var(--dim)}
.service-detail-modal>header{display:flex;justify-content:space-between;padding:4px 2px 12px;border-bottom:1px solid var(--line-soft)}.service-detail-modal>header small{color:var(--dim);letter-spacing:.12em}.service-detail-modal>div{max-height:58vh;display:grid;gap:8px;margin-top:12px;overflow:auto}.service-detail-row{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px;padding:13px;border:1px solid var(--line-soft);border-radius:9px;background:#12151b}.service-detail-row>i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(242,184,75,.12);color:var(--amber);font-size:20px;font-style:normal}.service-detail-row b,.service-detail-row small{display:block}.service-detail-row small{margin-top:4px;color:var(--dim)}

.modal-content { display:block; }.room-overview { display:grid;grid-template-columns:220px 1fr;gap:10px;margin-bottom:10px; }.scene-now { padding:13px;border:1px solid var(--line-soft);border-left:3px solid var(--line);border-radius:9px;background:#12151b; }.scene-now.active { border-left-color:var(--green);background:linear-gradient(90deg,rgba(104,211,145,.09),#12151b); }.scene-now small,.scene-now b,.scene-now em { display:block; }.scene-now small { color:var(--dim);font-size:9px;letter-spacing:.1em; }.scene-now b { margin-top:6px;font-size:16px; }.scene-now em { margin-top:4px;color:var(--dim);font-size:10px;font-style:normal; }.room-metrics { display:flex;gap:7px;overflow:auto; }.room-metrics>span { min-width:125px;flex:1;padding:11px;border:1px solid var(--line-soft);border-radius:8px;background:#12151b; }.room-metrics small,.room-metrics b { display:block; }.room-metrics small { color:var(--dim);font-size:9px;letter-spacing:.07em; }.room-metrics b { margin-top:6px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.room-section { margin-top:10px;padding:11px;border:1px solid var(--line-soft);border-radius:9px;background:rgba(9,11,15,.28); }.room-section>header { display:flex;justify-content:space-between;margin-bottom:8px; }.room-section>header b { font-size:14px; }.room-section>header small { color:var(--dim);font-size:10px; }.room-scenes>div,.room-helpers>div { display:flex;gap:7px; }.scene-control,.helper-control,.master-state { min-height:61px;flex:1;display:grid;grid-template-columns:28px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:8px;border:1px solid var(--line-soft);border-radius:8px;background:#151920;text-align:left; }.scene-control>span,.helper-control>span { grid-row:1/3;color:var(--dim);font-size:18px; }.scene-control b,.helper-control b { align-self:end;font-size:12px; }.scene-control small,.helper-control small { align-self:start;color:var(--dim);font-size:8px; }.scene-control.active,.helper-control.active { border-color:rgba(104,211,145,.5);background:rgba(104,211,145,.08); }.scene-control.active>span,.helper-control.active>span { color:var(--green); }.master-state { display:flex;flex-direction:column;justify-content:center; }.master-state small,.master-state b { display:block; }.master-state small { color:var(--dim);font-size:8px; }.master-state b { margin-top:4px;font-size:13px; }.room-lights .device-list { display:grid;grid-template-columns:repeat(2,1fr); }.device-name { display:flex;align-items:center;gap:8px; }.device-name .bulb-icon { width:25px;height:25px; }.quick-control .bulb-icon { width:30px;height:30px; }
.mode-popup-summary p{margin:7px 0 0;color:var(--dim);font-size:11px;line-height:1.35}.mode-diagnostics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}.mode-diagnostics article{min-width:0;padding:9px;border:1px solid var(--line-soft);border-radius:8px;background:#12151b}.mode-diagnostics small,.mode-diagnostics b,.mode-diagnostics span{display:block}.mode-diagnostics small{color:var(--cyan);font-size:8px;letter-spacing:.08em}.mode-diagnostics b{margin-top:4px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-diagnostics span{margin-top:4px;color:var(--dim);font-size:8px;line-height:1.25;max-height:30px;overflow:hidden}

@media (min-width:1180px) and (max-width:1320px) and (min-height:720px) and (max-height:840px) {
  .topbar { grid-template-columns:minmax(255px,1fr) 260px 190px 118px 48px 48px; }
  .mode-status-trigger strong { white-space:normal;overflow:visible;text-overflow:clip;font-size:14px;line-height:1.05; }
  .mode-status-trigger .status-meta { white-space:normal;overflow:visible;text-overflow:clip; }
  #lightsGrid { padding-bottom:38px; }
  .light-room-card { padding:7px; }.mini-light { height:39px; }.mini-light-grid { margin-top:6px; }
  .media-hero { padding:10px; }.media-art { width:58px;height:58px; }.media-hero h2 { font-size:21px; }.music-library { padding:9px; }
  .service-panel { padding:11px; }.automation-dial { width:112px;height:112px; }.health-bars { gap:13px;margin-top:13px; }
  .modal { max-height:92vh; }.room-overview { grid-template-columns:200px 1fr; }.room-section { margin-top:8px;padding:9px; }
}

/* 10.1-inch readability and reliable code-native weather symbols */
body { font-size:15px; }
:root { --dim:#b0b6c2; }
.brand small,.top-status small,.settings-drawer small,.modal small,.page-heading small { font-size:12px; }
.brand strong,.top-status strong { font-size:17px; }
.status-meta { font-size:10px; }
.panel-head { font-size:17px; }
.panel-head em,.weather-meta small,.temperature-row small,.status-grid small { font-size:11px; }
.room-launcher b { font-size:14px; }.room-launcher small { font-size:12px; }
.detail-card header b { font-size:17px; }.detail-card p { font-size:15px; }.detail-card footer { font-size:11px; }
.detail-card-static { cursor:default; }
.detail-card-static:hover { transform:none; border-color:var(--line-soft); background:#12151b; }
.nav-dock span { font-size:12px; }.quick-control span { font-size:14px; }.quick-control small { font-size:12px; }
.device-control header b { font-size:15px; }.device-control header small,.device-control label { font-size:13px; }
.back-button,.settings-action,.setting-field select { font-size:14px; }
.settings-drawer p { font-size:13px; }

.weather-glyph { width:1em; height:1em; overflow:visible; vertical-align:middle; }
.weather-glyph path,.weather-glyph circle { vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.weather-glyph .sun-core { fill:#ffd35a; stroke:#ffbd38; stroke-width:2; }
.weather-glyph .sun-rays { fill:none; stroke:#ffd35a; stroke-width:3; }
.weather-glyph .cloud { fill:#b8d7ef; stroke:#e2f2ff; stroke-width:2; }
.weather-glyph .rain { fill:none; stroke:#5bbcf5; stroke-width:4; }
.weather-glyph .snow { fill:none; stroke:#dff7ff; stroke-width:7; }
.weather-glyph .bolt { fill:#ffd24a; stroke:#ffb72c; stroke-width:1.5; }
.weather-glyph.fog path { fill:none; stroke:#c4d1dc; stroke-width:5; }
.weather-glyph.wind path { fill:none; stroke:#73d9e2; stroke-width:4; }
.weather-glyph.night path { fill:#b897ff; stroke:#ded0ff; stroke-width:2; }
.weather-now > b { display:grid; place-items:center; }
.weather-now > b .weather-glyph { width:64px; height:64px; }
.forecast-row b .weather-glyph { width:29px; height:29px; }
.forecast-row > span { border-top:2px solid rgba(99,219,227,.35); }
.forecast-row .forecast-sunny,.forecast-row .forecast-clear { border-top-color:#ffd35a; }
.forecast-row .forecast-rainy,.forecast-row .forecast-pouring { border-top-color:#5bbcf5; }

.color-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.color-chip { min-height:36px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#1b1e25; color:var(--text); font-size:12px; }
.color-chip.warm { border-color:#f4a94e; }.color-chip.natural { border-color:#e9eef4; }.color-chip.red { border-color:#ef4b57; }.color-chip.pink { border-color:#f178bd; }.color-chip.purple { border-color:var(--uv); }

/* Legacy data widgets retained for older renderers; the current status page uses the 12-column grid above. */
#dataGrid { grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); grid-template-areas:none; }
.data-panel { min-width:0; padding:17px; border:1px solid var(--line-soft); border-radius:11px; background:radial-gradient(circle at 100% 0,rgba(var(--uv-rgb),.08),transparent 38%),#12151b; box-shadow:0 12px 28px rgba(0,0,0,.2); overflow:hidden; }
.data-panel header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
.data-panel header span { display:flex; align-items:center; gap:9px; }.data-panel header .weather-glyph { width:31px;height:31px; }
.data-panel header b { font-size:17px; }.data-panel header em { color:var(--cyan); font-size:12px; font-style:normal; text-transform:capitalize; }
.data-panel footer { margin-top:10px; color:var(--dim); font-size:12px; }
.data-weather { grid-area:data-weather; }.data-climate { grid-area:data-climate; }.data-energy { grid-area:data-energy; }.data-loads { grid-area:data-loads; }
.data-weather-main { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px; margin:12px 0; }.data-weather-main>strong { color:#ffd35a; font-size:47px; font-weight:350; }.data-weather-main>span { color:var(--dim); font-size:13px; line-height:1.55; }
.data-forecast-mini { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.data-forecast-mini>span { display:grid; place-items:center; gap:3px; padding:7px 4px; border-radius:7px; background:rgba(7,8,11,.34); }.data-forecast-mini small { font-size:11px; }.data-forecast-mini .weather-glyph { width:25px;height:25px; }.data-forecast-mini b { font-size:14px; }
.gauge-grid { height:calc(100% - 42px); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:center; }.climate-gauge { display:grid; place-items:center; gap:9px; }.gauge-ring { width:138px; height:138px; padding:13px; border-radius:50%; background:conic-gradient(var(--gauge-color) calc(var(--gauge)*1%),rgba(50,55,67,.55) 0); box-shadow:0 0 24px color-mix(in srgb,var(--gauge-color) 18%,transparent); }.gauge-ring>span { width:100%;height:100%;display:grid;place-items:center;align-content:center;border-radius:50%;background:#12151b; }.gauge-ring b,.gauge-ring small { display:block; }.gauge-ring b { font-size:29px;font-weight:400; }.gauge-ring small { margin-top:3px;color:var(--dim);font-size:12px; }.climate-gauge>strong { font-size:14px; }
.data-energy { position:relative; }.data-energy-value { position:absolute;z-index:2;top:58px;left:18px;font-size:30px;font-weight:350; }.data-energy-chart { width:100%;height:calc(100% - 55px);margin-top:7px;overflow:visible; }.chart-grid { fill:none;stroke:rgba(99,219,227,.13);stroke-width:1;vector-effect:non-scaling-stroke; }
.data-energy .chart-line { stroke:#63dbe3;filter:drop-shadow(0 0 5px rgba(99,219,227,.4)); }.data-energy .chart-fill { fill:url(#energyFill);opacity:.72; }
.power-meter { margin-top:16px; }.power-meter>span { display:flex;justify-content:space-between;gap:12px;font-size:13px; }.power-meter>span strong { color:var(--meter-color); }.power-meter>i { display:block;height:10px;margin-top:7px;border-radius:6px;background:#252a34;overflow:hidden; }.power-meter>i>b { display:block;width:var(--meter);height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--meter-color) 55%,#1a1d25),var(--meter-color));box-shadow:0 0 10px var(--meter-color); }

@media (min-width:1180px) and (max-width:1320px) and (min-height:720px) and (max-height:840px) {
  .detail-grid { height:calc(100% - 68px); }
  .data-panel { padding:14px; }
  .gauge-ring { width:124px;height:124px; }
  .data-weather-main { margin:8px 0; }.data-weather-main>strong { font-size:41px; }
}

.service-tile:nth-of-type(6) { display:flex;grid-area:washer; }
/* HMI 1.7 — Spotify-achtige Music Assistant interface */
.spotify-shell{height:100%;display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 76px;gap:8px;color:#f7f7f7;background:#070908;border-radius:18px;overflow:hidden}
.spotify-sidebar{padding:18px 12px;background:#101312;display:flex;flex-direction:column;min-height:0}.spotify-sidebar h2{margin:0;font-size:25px}.spotify-sidebar h2 i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1ed760;color:#071108;font-style:normal}.spotify-sidebar>small{font-size:10px;color:#9ca3a0;margin:4px 0 14px}.spotify-sidebar nav{display:grid;gap:3px}.spotify-sidebar button{border:0;background:transparent;color:#b9bfbc;text-align:left;border-radius:8px;padding:9px;font-weight:700;font-size:13px}.spotify-sidebar button.active,.spotify-sidebar button:hover{background:#242826;color:white}.spotify-target{margin-top:auto;display:grid;gap:3px}.spotify-target small{font-size:9px;color:#8f9692;padding:8px}.spotify-target button.active{background:#1ed760;color:#071108}
.spotify-main{min-width:0;min-height:0;padding:15px 17px;background:linear-gradient(145deg,#202824 0,#111412 55%);overflow:hidden}.spotify-main>header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.spotify-main>header form{display:flex;gap:5px;flex:1}.spotify-main input{min-width:0;flex:1;border:1px solid #444a47;background:#242826;color:white;border-radius:18px;padding:9px 14px;font-size:13px}.spotify-main form button{border:0;border-radius:18px;padding:8px 13px;background:#f1f4f2;color:#101210;font-weight:800}.spotify-main>header>span{text-align:right;white-space:nowrap}.spotify-main>header b{display:block;font-size:18px}.spotify-main>header small{color:#aeb4b0;font-size:10px}.spotify-grid{height:calc(100% - 50px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:9px}.spotify-card{position:relative;min-width:0;min-height:0;border:0;border-radius:10px;padding:9px;background:#1b1e1c;color:white;text-align:left;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;overflow:hidden}.spotify-card:hover{background:#292e2b}.spotify-card>img,.spotify-card>.music-placeholder{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:7px;background:linear-gradient(135deg,#317856,#43315d);display:grid;place-items:center;font-size:34px}.spotify-card.type-artist>img{border-radius:50%}.spotify-card>span b,.spotify-card>span small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-card>span b{font-size:12px}.spotify-card>span small{font-size:9px;color:#aeb4b0;margin-top:2px}.spotify-card>i{position:absolute;right:12px;bottom:34px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#1ed760;color:#071108;font-style:normal;box-shadow:0 5px 12px #0008}
.spotify-player{grid-column:1/-1;display:grid;grid-template-columns:minmax(190px,1fr) 240px minmax(210px,1fr);align-items:center;gap:12px;padding:8px 14px;background:#171a18}.now-playing{display:flex;align-items:center;gap:9px;min-width:0}.now-playing img,.now-playing>.music-placeholder{width:56px;height:56px;flex:0 0 56px;object-fit:cover;border-radius:5px;background:#313733;display:grid;place-items:center}.now-playing span{min-width:0}.now-playing b,.now-playing small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-playing b{font-size:13px}.now-playing small{color:#aeb4b0;font-size:10px}.player-controls{display:flex;justify-content:center;align-items:center;gap:7px}.player-controls button{border:0;background:transparent;color:#c9cecb;font-size:19px;width:32px;height:32px;border-radius:50%}.player-controls button.active{color:#1ed760}.player-controls .play-main{background:white;color:#111;font-size:14px}.player-controls button:disabled{opacity:.28}.player-volume{display:flex;justify-content:flex-end;align-items:center;gap:8px}.player-volume button{border:0;background:transparent;color:#c9cecb;font-size:11px}.player-volume input{width:min(125px,45%);accent-color:#1ed760}.queue-list{display:grid;gap:12px}.queue-list header{display:flex;justify-content:space-between}.queue-list .spotify-card{height:105px;grid-template-columns:90px 1fr;grid-template-rows:1fr}.queue-list .spotify-card>i{display:none}
@media(max-width:950px){.spotify-shell{grid-template-columns:145px minmax(0,1fr)}.spotify-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.spotify-card:nth-child(n+7){display:none}.spotify-player{grid-template-columns:1fr 210px 1fr}}

/* Contextueel schermtoetsenbord: uitsluitend zichtbaar bij tekstinvoer. */
.touch-keyboard[hidden]{display:none}.touch-keyboard{position:fixed;z-index:120;left:50%;bottom:8px;transform:translateX(-50%);width:min(920px,calc(100vw - 24px));padding:8px 10px 10px;border:1px solid #4b514e;border-radius:14px;background:#111513f5;box-shadow:0 18px 60px #000c;backdrop-filter:blur(12px)}.touch-keyboard header{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 5px;color:#b8bfbb;font-size:11px}.touch-keyboard header button{width:38px;height:26px}.keyboard-keys{display:grid;gap:5px}.keyboard-keys>div{display:flex;justify-content:center;gap:5px}.touch-keyboard button{min-width:55px;height:45px;border:1px solid #474d49;border-radius:7px;background:#282d2a;color:#fff;font-size:17px;font-weight:750;box-shadow:0 2px 0 #090b0a}.touch-keyboard button:active,.touch-keyboard button.active{transform:translateY(1px);background:#3d4541}.touch-keyboard .wide{min-width:82px}.touch-keyboard .space{width:330px}.touch-keyboard .enter{min-width:116px;background:#1ed760;color:#071108;border-color:#1ed760}.keyboard-open .spotify-player{opacity:.2;pointer-events:none}
@media(max-width:950px){.touch-keyboard{width:calc(100vw - 16px)}.touch-keyboard button{min-width:48px;height:42px}.touch-keyboard .space{width:260px}}

/* HMI navigation and data controls */
.topbar{grid-template-columns:minmax(180px,1fr) 148px minmax(130px,220px) 155px 112px 46px 46px}
.presence-top{display:flex;flex-direction:column;justify-content:center;text-align:left;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.presence-top small{font-size:9px;letter-spacing:.09em;color:var(--dim)}.presence-top strong{font-size:14px;margin-top:5px}
[data-presence-toggle]{cursor:pointer}[data-presence-toggle].active{border-color:var(--uv);background:rgba(var(--uv-rgb),.12)}[data-presence-toggle].active strong,[data-presence-toggle].active b{color:var(--uv)}[data-presence-toggle]:disabled{opacity:.5;cursor:default}
.data-heading{padding:0;border:0;background:none;text-align:left;font-weight:700;font-size:inherit;cursor:pointer}.data-heading>span{color:var(--dim);font-size:12px}
.status-grid>button{padding:10px;text-align:left;border:1px solid var(--line-soft);border-radius:8px;background:rgba(8,10,14,.3)}.status-grid>button small,.status-grid>button b{display:block}.status-grid>button small{font-size:9px;color:var(--dim);letter-spacing:.06em}.status-grid>button b{margin-top:5px;font-size:13px}
.data-shortcuts{display:flex;gap:8px;margin-top:10px}.data-shortcuts button{flex:1;padding:9px;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-size:12px;cursor:pointer}
.storage-grid,.aquarium-grid{height:calc(100% - 76px);overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;padding:0 2px 22px}
.storage-card,.aquarium-card{padding:22px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,var(--panel-top),var(--panel));min-width:0}
.storage-card header{display:flex;justify-content:space-between;align-items:center;gap:12px}.storage-card h2,.aquarium-card h2{margin:0 0 5px;font-size:22px}.storage-card small,.aquarium-card small{color:var(--dim)}.storage-total{text-align:right;font-size:24px}.storage-total small{display:block;font-size:11px}
.storage-body{display:flex;align-items:center;justify-content:space-around;gap:22px;margin:25px 0}.storage-ring{width:168px;height:168px;flex-shrink:0;border-radius:50%;padding:17px}.storage-hole{height:100%;border-radius:50%;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center}.storage-hole b{font-size:29px}.storage-hole small{margin-top:5px;font-size:11px}.storage-legend{flex:1;max-width:290px}.storage-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:12px}.storage-row span{color:var(--dim)}.storage-row i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px}.storage-row b{white-space:nowrap}
.storage-footer{border-top:1px solid var(--line);padding-top:15px}.storage-free{display:flex;justify-content:space-between;font-size:13px}.storage-track{height:7px;background:var(--line);border-radius:8px;overflow:hidden;margin:12px 0}.storage-track i{display:block;height:100%;background:var(--green)}.storage-measured{grid-column:1/-1;color:var(--dim);font-size:12px;padding:3px}
.aquarium-card{border-top:3px solid var(--amber)}.aquarium-card.dry{border-top-color:var(--green)}.aquarium-card.wet{border-top-color:var(--red)}.aquarium-reading{font-size:30px;color:var(--amber);margin:30px 0 12px}.dry .aquarium-reading{color:var(--green)}.wet .aquarium-reading{color:var(--red)}.aquarium-card p{color:var(--dim);line-height:1.6}.aquarium-meta{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between}
.weather-screensaver{grid-template-rows:auto minmax(0,1fr) auto auto auto auto;gap:10px}.weather-screensaver>header{grid-row:1}.weather-screensaver>.saver-clock{grid-row:2}.weather-screensaver>.saver-forecast{grid-row:3}.weather-screensaver>.saver-notifications{grid-row:4}.weather-screensaver>.saver-data{grid-row:5}.weather-screensaver>footer{grid-row:6}
.media-screensaver{grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px}.media-screensaver>.saver-media{grid-row:2;height:100%;min-height:0;margin:0 auto;grid-template-columns:minmax(190px,30vh) minmax(0,1fr) 70px;grid-template-rows:minmax(0,1fr) auto auto}.media-screensaver>.saver-notifications{grid-row:3}.media-screensaver>footer{grid-row:4}.saver-media-left{align-self:center;height:min(100%,380px)}.saver-media-left .saver-album-art{aspect-ratio:1;height:auto;max-height:100%}.saver-media-context{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.saver-volume{height:min(330px,100%);min-height:0}.saver-volume input{min-height:40px;max-height:230px;flex:1;width:24px}.saver-media-copy h2{font-size:clamp(28px,4vw,58px)}
@media(max-width:1100px){.topbar{grid-template-columns:minmax(170px,1fr) 140px minmax(120px,1fr) 100px 44px 44px}.topbar>.top-status:not(.mode-status-trigger):not(.top-clock){display:none}.topbar>.mode-status-trigger,.topbar>.top-clock{display:flex}.storage-body{flex-direction:column}.storage-legend{width:100%;max-width:none}}
@media(max-width:700px){.topbar{grid-template-columns:1fr 120px 110px 44px}.topbar>.top-clock,.topbar>.update-beacon{display:none}.brand{min-width:0}.brand strong{font-size:11px}.brand small{font-size:8px}.brand-mark{display:none}.presence-top{padding:6px}.presence-top small{font-size:8px}.storage-grid,.aquarium-grid{grid-template-columns:1fr;height:auto}.storage-body{flex-direction:row}.media-screensaver>.saver-media{grid-template-columns:120px minmax(0,1fr) 48px;gap:10px;width:100%}.saver-media-context{grid-template-columns:1fr}.saver-media-controls{gap:6px}.saver-media-controls button{width:38px;height:38px}.saver-media-controls button.primary{width:46px;height:46px}.saver-clear-label{font-size:8px}.saver-media-copy h2{font-size:26px}.saver-media-copy>p{font-size:14px}.media-context-clock{flex-direction:column;gap:5px}.media-context-clock b{font-size:28px}}

.panel-status .status-grid{margin-top:8px;gap:6px}.panel-status .status-grid>span,.panel-status .status-grid>button{padding:6px 8px}.panel-status .status-grid b{margin-top:3px}.panel-status .data-shortcuts{margin-top:7px}.panel-status .data-shortcuts button{padding:7px}

/* Audit: let chart and totals fit their actual card height. */
.energy-overview{display:grid;grid-template-rows:auto auto minmax(70px,1fr) auto;gap:7px;min-height:0}.energy-overview svg{height:100%;min-height:0;margin:0}.energy-overview .energy-live{margin-top:0}.energy-overview .chart-axis{margin:0}.energy-month{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:9px}.energy-month>div{margin:0;gap:6px;grid-template-columns:1fr 1fr;align-content:start}.energy-month article{padding:9px}.energy-month article:last-child{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.energy-month article strong{font-size:21px}.energy-month footer{margin:0}.week-forecast>div{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
/* Keep Music Assistant's screensaver in the same panel palette. */
.media-screensaver{background:radial-gradient(circle at 18% 50%,rgba(var(--uv-rgb),.14),transparent 40%),linear-gradient(130deg,#090b0f,var(--panel) 60%,#090b0f)}.saver-media-copy>small{color:var(--uv)}.saver-media-controls button.primary{background:var(--uv);color:var(--shell);box-shadow:0 0 28px rgba(var(--uv-rgb),.2)}.saver-volume input{accent-color:var(--uv)}.saver-timeline>i>b{background:linear-gradient(90deg,var(--uv),var(--cyan));box-shadow:0 0 13px rgba(var(--uv-rgb),.3)}
.saver-next{border-left-color:var(--uv)}.saver-media-controls button.primary{border-color:var(--uv)}
.touch-keyboard{border-color:var(--line);background:var(--panel)}.touch-keyboard button{background:var(--panel-top);border-color:var(--line);color:var(--text)}.touch-keyboard button:active,.touch-keyboard button.active{background:rgba(var(--uv-rgb),.2)}.touch-keyboard .enter{background:var(--uv);border-color:var(--uv);color:var(--shell)}

/* Contract-backed energy data, within the existing panel theme. */
.energy-month .contract-month-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.energy-month .contract-month-grid article{padding:10px 8px;min-width:0}
.energy-month .contract-month-grid article small{font-size:8px;line-height:1.4;min-height:24px}
.energy-month .contract-month-grid strong{font-size:21px}.contract-month-grid article span{margin-top:5px;color:var(--uv);font-size:16px}
.energy-comparison{font-size:11px;color:var(--dim);margin:10px 0 0}
.energy-contract-button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:42px;margin-top:10px;border:1px solid var(--line-soft);border-radius:8px;padding:8px 12px;background:rgba(var(--uv-rgb),.12);color:var(--text);cursor:pointer}
.energy-contract-detail>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.energy-contract-detail article{padding:12px;border:1px solid var(--line-soft);border-radius:10px;background:#12151b}.energy-contract-detail article>*{display:block}.energy-contract-detail small{color:var(--dim);font-size:10px;letter-spacing:.06em}.energy-contract-detail strong{font-size:24px;margin-top:6px;color:var(--uv)}.energy-contract-detail p{color:var(--dim);font-size:12px;line-height:1.55}
.energy-month{display:flex;flex-direction:column;gap:5px;padding:14px;min-height:0}
.energy-month .contract-month-grid{margin:0;flex:1;align-content:center}
.energy-month .contract-month-grid article{grid-column:auto;display:block;padding:6px 8px}
.energy-month .contract-month-grid article small{min-height:18px;letter-spacing:.03em}
.energy-month .contract-month-grid article span{font-size:14px;margin-top:2px}
.energy-month .energy-comparison,.energy-month footer{margin:0;font-size:10px}
.energy-month .energy-contract-button{margin:0;min-height:34px;padding:6px 10px}

/* Better Thermostat and HA mode profiles. */
#climateGrid{display:flex;flex-direction:column;gap:12px;overflow:auto;min-height:0}
#climateGrid .climate-room-grid{flex:1;min-height:135px}#climateGrid .valve-grid{flex:1.2;min-height:208px}
.bt-card{padding:15px}.bt-card header em{max-width:45%;text-align:right;font-size:9px}.bt-card p{font-size:10px;margin:8px 0 0;color:var(--dim)}
.heating-auto-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.heating-auto-row span>*{display:block}.heating-auto-row b{font-size:11px;color:var(--uv)}.heating-auto-row small{font-size:9px;color:var(--dim);margin-top:4px}
.heating-auto-row button,.heating-profile-button{border:1px solid var(--line);border-radius:8px;background:rgba(var(--uv-rgb),.1);padding:9px 12px;min-height:38px;color:var(--text);cursor:pointer;font-size:12px}
.heating-profile-button{display:flex;align-items:center;justify-content:space-between;flex:none}
.heating-profile-detail p{color:var(--dim);font-size:13px;line-height:1.5}.heating-profile-detail>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.heating-profile-detail article{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:14px}.heating-profile-detail article>span{font-size:12px}.heating-profile-detail article>div{display:flex;align-items:center;justify-content:space-between;margin-top:13px;gap:12px}.heating-profile-detail button{min-width:46px;min-height:42px;border:1px solid var(--line);background:rgba(var(--uv-rgb),.12);border-radius:7px;color:var(--text);font-size:22px}.heating-profile-detail b{font-size:24px;color:var(--uv)}

/* Live explanation card, sharing the panel theme. */
.why-launch{width:100%;padding:12px;border:1px solid #695091;border-radius:12px;background:#30243f;color:#eee4ff;display:flex;justify-content:space-between;text-align:left;margin-bottom:10px;cursor:pointer}
.why-panel{display:flex;flex-direction:column;min-height:0;max-height:68vh;gap:12px}.why-panel>p{margin:0;color:#bcb0cd;font-size:13px}.why-filters{display:flex;gap:8px;flex-wrap:wrap}.why-filters button{border:1px solid #5b466f;background:#201a2c;color:#d7cde3;border-radius:10px;padding:10px 16px;cursor:pointer}.why-filters button.active{background:#62418b;color:white}.why-scroll{overflow-y:auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:2px 8px 10px 0;overscroll-behavior:contain}.why-card{background:linear-gradient(135deg,#292035,#1b1826);border:1px solid #51415f;border-radius:16px;padding:16px;min-width:0}.why-card h3{margin:5px 0 12px}.why-card p{font-size:13px;line-height:1.5;overflow-wrap:anywhere}.why-card small{font-size:11px;color:#bcb0cd;line-height:1.5}.why-row{display:flex;gap:12px;justify-content:space-between;padding:7px 0;border-bottom:1px solid #ffffff0d;font-size:12px}.why-row span{color:#bcb0cd}.why-row b{text-align:right;overflow-wrap:anywhere;max-width:60%}.why-history{border-top:1px solid #51415f;padding-top:10px;color:#bcb0cd}@media(max-width:700px){.why-scroll{grid-template-columns:1fr}}

.why-card small{letter-spacing:normal;text-transform:none}.why-card>small:first-child{letter-spacing:.08em}

/* One bounded, touch-friendly notification lane on both screensavers. */
.saver-notifications{display:block;min-width:0;width:100%;margin:0}.notice-strip{--notice-accent:var(--cyan);display:flex;align-items:center;gap:18px;min-height:106px;padding:14px 18px;border:1px solid color-mix(in srgb,var(--notice-accent) 38%,transparent);border-left:4px solid var(--notice-accent);border-radius:16px;background:linear-gradient(110deg,color-mix(in srgb,var(--notice-accent) 10%,#171720),#12141deF);box-shadow:0 8px 28px #0003;cursor:default}.notice-critical{--notice-accent:#ff888e}.notice-warning{--notice-accent:#f2c16b}.notice-success{--notice-accent:#87dcb3}.notice-info{--notice-accent:var(--uv)}.notice-icon{flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--notice-accent) 12%,transparent);color:var(--notice-accent);font-size:30px}.notice-copy{flex:1;min-width:0}.notice-copy small{display:block;color:var(--notice-accent);font-size:11px;letter-spacing:.07em;text-transform:uppercase}.notice-copy h2{font-size:24px;font-weight:650;line-height:1.15;margin:5px 0;color:#f5f1fb;letter-spacing:-.02em}.notice-copy p{font-size:14px;line-height:1.35;margin:0;color:#c1bdce;overflow-wrap:anywhere}.notice-actions{display:flex;gap:8px;flex-shrink:0}.notice-actions button,.notice-pager button{min-height:46px;min-width:46px;padding:0 16px;border:1px solid #ffffff26;border-radius:11px;background:#ffffff08;color:#f0eaf8;font-size:14px;cursor:pointer;touch-action:manipulation}.notice-actions button:active,.notice-pager button:active{background:#ffffff20}.notice-pager{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid #ffffff20;flex-shrink:0}.notice-pager span{font-size:12px;color:#c1bdce;white-space:nowrap}.notice-pager button{font-size:27px;padding:0}.screensaver.has-notices .saver-media-left{max-height:100%}.media-screensaver.has-notices .saver-media-copy h2{font-size:clamp(26px,3.4vw,46px)}.media-screensaver.has-notices .saver-media-controls{margin:12px 0}.media-screensaver.has-notices .saver-next{padding:8px 14px}.media-screensaver.has-notices .saver-media-left{height:min(100%,260px)}.weather-screensaver.has-notices .saver-forecast{margin-bottom:0}.weather-screensaver.has-notices .saver-clock strong{font-size:clamp(66px,9vw,110px)}
@media(max-height:740px){.screensaver.has-notices{padding-top:18px;padding-bottom:18px;gap:8px}.notice-strip{min-height:96px;padding:12px 16px}.notice-copy h2{font-size:22px}.media-screensaver.has-notices .saver-media{gap:8px 24px;grid-template-columns:180px minmax(0,1fr) 62px}.media-screensaver.has-notices .saver-media-left{height:210px}.media-screensaver.has-notices .saver-volume{height:210px}.media-screensaver.has-notices .saver-media-controls button{height:44px;width:44px}.media-screensaver.has-notices .saver-media-controls button.primary{height:52px;width:52px}.media-screensaver.has-notices .saver-media-copy>p{font-size:16px}}
@media(max-width:760px){.notice-strip{gap:10px;flex-wrap:wrap}.notice-icon{flex-basis:36px;height:36px}.notice-copy{flex-basis:calc(100% - 50px)}.notice-actions{margin-left:46px}.notice-pager{margin-left:auto}.notice-copy h2{font-size:20px}}

body:has(#screensaver:not([hidden]))>.toast,body:has(#screensaver:not([hidden])) #toast{display:none}

/* Shared weather shell: music is a central card, not a separate dashboard. */
.screensaver.media-screensaver{padding:20px 27px;gap:8px;background:radial-gradient(circle at 75% 22%,rgba(99,219,227,.13),transparent 28%),radial-gradient(circle at 18% 78%,rgba(var(--uv-rgb),.14),transparent 34%),linear-gradient(145deg,#080b12,#111824 58%,#090b11);grid-template-rows:auto auto minmax(180px,1fr) auto auto auto auto}
.media-screensaver>.saver-clock{display:block;grid-row:2;align-self:center}.media-screensaver>.saver-clock strong,.media-screensaver.has-notices>.saver-clock strong{font-size:56px;line-height:.95;letter-spacing:-.06em}.media-screensaver>.saver-clock span{font-size:11px;margin-top:7px;letter-spacing:.12em}.media-screensaver>header{grid-row:1;align-items:center}.media-screensaver>header .saver-weather{display:flex;align-items:center;gap:10px}.media-screensaver>header .saver-weather b{font-size:22px}.media-screensaver>header .saver-weather small{margin:0}
.media-screensaver>.saver-forecast{display:grid;grid-row:4;margin:0;gap:10px}.media-screensaver>.saver-forecast>span{padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.media-screensaver>.saver-forecast b{font-size:24px;margin:0}.media-screensaver>.saver-forecast strong{font-size:18px}.media-screensaver>.saver-forecast em{font-size:10px;margin:0}.media-screensaver>.saver-notifications{grid-row:5}.media-screensaver>.saver-data{display:grid;grid-row:6;padding:8px 0}.media-screensaver>footer{grid-row:7}.media-screensaver>footer span:first-child{font-size:10px}.media-screensaver>footer span:first-child:after{content:none}
.screensaver.media-screensaver>.saver-media{display:grid;grid-row:3;align-self:center;width:100%;max-width:1160px;height:auto;min-height:0;max-height:100%;margin:0 auto;padding:18px 20px 12px;grid-template-columns:140px minmax(0,1fr) 150px;grid-template-rows:minmax(0,1fr) 18px;gap:12px 22px;background:linear-gradient(125deg,#ffffff08,#ffffff03);border:1px solid #ffffff20;border-radius:20px;box-shadow:0 18px 50px #0002;align-items:center}
.media-screensaver .saver-media>.saver-album-art{width:140px;height:140px;border-radius:14px}.media-screensaver .saver-media-copy h2,.media-screensaver.has-notices .saver-media-copy h2{font-size:clamp(24px,3vw,40px);line-height:1.08;margin:7px 0 5px}.media-screensaver .saver-media-copy>small{font-size:10px}.media-screensaver .saver-media-copy>p,.media-screensaver.has-notices .saver-media-copy>p{font-size:15px}.saver-player-bottom{display:flex;align-items:center;gap:20px;margin-top:14px;min-width:0}.media-screensaver .saver-media-controls,.media-screensaver.has-notices .saver-media-controls{margin:0;gap:9px;flex-shrink:0}.media-screensaver .saver-media-controls button,.media-screensaver.has-notices .saver-media-controls button{width:44px;height:44px;font-size:25px}.media-screensaver .saver-media-controls button.primary,.media-screensaver.has-notices .saver-media-controls button.primary{width:52px;height:52px;font-size:22px}.media-screensaver .saver-next,.media-screensaver.has-notices .saver-next{min-width:0;flex:1;padding:5px 12px;background:none;border-color:var(--uv)}.media-screensaver .saver-next b{font-size:14px;margin-top:3px}.media-screensaver .saver-next small{font-size:9px}.media-screensaver .saver-next span{font-size:11px}.saver-player-side{display:flex;flex-direction:column;gap:14px;min-width:0}.media-screensaver .saver-volume,.media-screensaver.has-notices .saver-volume{height:auto;min-height:0;display:block;padding:0;border:0;background:none}.media-screensaver .saver-volume small{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--dim)}.media-screensaver .saver-volume b{color:var(--text);font-size:16px}.media-screensaver .saver-volume input{writing-mode:horizontal-tb;direction:ltr;width:100%;height:44px;max-height:none;min-height:44px;margin:0;accent-color:var(--uv)}.media-screensaver .saver-clear-label{width:100%;min-height:44px;padding:7px 10px;border:1px solid #ffffff20;background:#ffffff05;color:#e1d9ec;font-size:11px;letter-spacing:normal;text-align:center;margin:0}.media-screensaver .saver-clear-label span{color:var(--dim);font-size:10px}.media-screensaver .saver-timeline{grid-row:2;padding:0;gap:10px}.media-screensaver .saver-timeline small{font-size:10px}
@media(max-height:740px){.screensaver.media-screensaver{padding:16px 24px;gap:7px}.media-screensaver>.saver-clock strong,.media-screensaver.has-notices>.saver-clock strong{font-size:46px}.screensaver.media-screensaver>.saver-media{padding:14px 16px 10px;grid-template-columns:120px minmax(0,1fr) 140px;gap:8px 18px}.media-screensaver .saver-media>.saver-album-art{width:120px;height:120px}.media-screensaver .saver-media-copy h2,.media-screensaver.has-notices .saver-media-copy h2{font-size:30px}.saver-player-bottom{margin-top:9px}.media-screensaver>.saver-data{padding:6px 0}.media-screensaver>.saver-forecast>span{padding:8px 10px}.media-screensaver>.saver-forecast em{display:none}}
@media(max-width:760px){.screensaver.media-screensaver>.saver-media{grid-template-columns:80px minmax(0,1fr);gap:10px;padding:12px}.media-screensaver .saver-media>.saver-album-art{width:80px;height:80px}.saver-player-side{grid-column:1/-1;flex-direction:row;align-items:center}.saver-player-side>*{flex:1}.media-screensaver .saver-timeline{grid-row:3}.saver-player-bottom{flex-wrap:wrap;gap:8px}.media-screensaver>.saver-forecast>span{flex-wrap:wrap}.media-screensaver .saver-media-copy h2,.media-screensaver.has-notices .saver-media-copy h2{font-size:23px}}

#saverMedia{cursor:pointer}#saverMedia [data-saver-media-control]{cursor:pointer}#saverMedia input[type=range]{cursor:ew-resize}

/* Same full weather forecast in both screensaver modes. */
.media-screensaver>.saver-forecast{gap:12px}
.media-screensaver>.saver-forecast>span{display:block;padding:12px}
.media-screensaver>.saver-forecast b{font-size:29px;margin:6px 0}
.media-screensaver>.saver-forecast strong{font-size:20px}
.media-screensaver>.saver-forecast em{display:block;font-size:11px;margin-top:4px}
.media-screensaver>header .saver-weather{display:block}
.media-screensaver>header .saver-weather b{font-size:28px}
.media-screensaver>header .saver-weather small{margin-top:3px}
.temperature-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.temperature-row>span{min-width:0;padding:10px 8px}
.aquarium-temperature em{display:block;margin-top:4px;font-size:10px;line-height:1.3;font-style:normal;color:var(--dim);letter-spacing:0}
.saver-data{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:700px){.temperature-row{grid-template-columns:repeat(2,minmax(0,1fr))}.saver-data{grid-template-columns:repeat(3,minmax(0,1fr))}}
.temperature-row small{font-size:9px;letter-spacing:.04em}
/* Aquarium: a quiet, living scene around the existing HMI controls. */
.aquarium-grid.aquarium-dashboard{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:190px minmax(275px,1fr);gap:16px;padding-bottom:16px}
.aq-tank{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffff20;border-radius:16px;background:linear-gradient(160deg,#132634,#101620 75%);min-height:190px}
.aq-lit .aq-tank{background:radial-gradient(ellipse at 40% -20%,#4db7ba35,transparent 75%),linear-gradient(160deg,#183449,#101e2b 75%)}
.aq-water{position:absolute;inset:0;z-index:-1;pointer-events:none}
.aq-tank-copy{padding:20px 22px}.aq-tank-copy small{font-size:9px;letter-spacing:.16em;color:var(--cyan)}.aq-tank-copy h2{font-size:27px;font-weight:500;letter-spacing:-.03em;margin:8px 0}.aq-tank-copy p{font-size:12px;color:#b9c8d2;margin:0}
.aq-tank-status{position:absolute;bottom:17px;left:22px;right:22px;display:flex;gap:8px;flex-wrap:wrap}.aq-tank-status span{font-size:11px;padding:7px 10px;border:1px solid #ffffff20;background:#0a1626c9;border-radius:20px;color:#c3dbdf}.aq-tank-status .aq-alert{color:#ff9297;border-color:#ff929780}
.aq-fish{position:absolute;top:var(--depth);left:0;width:54px;opacity:.55;animation:aq-swim var(--trip) linear infinite;animation-delay:var(--delay);color:#b39bea}.aq-fish svg{width:100%;fill:currentColor}.aq-fish-1{width:38px;color:#7acbd1}.aq-fish-2{width:44px;color:#e8bd82}
@keyframes aq-swim{0%{left:-12%;transform:scaleX(1)}48%{left:105%;transform:scaleX(1)}50%{left:105%;transform:scaleX(-1)}98%{left:-12%;transform:scaleX(-1)}100%{left:-12%;transform:scaleX(1)}}
.aq-bubble{position:absolute;left:var(--left);bottom:-20px;width:var(--size);height:var(--size);border:1px solid #8ad3df60;border-radius:50%;animation:aq-rise var(--trip) linear infinite;animation-delay:var(--delay)}@keyframes aq-rise{0%{transform:translate(0,0);opacity:0}15%{opacity:.65}80%{opacity:.25}100%{transform:translate(20px,-230px);opacity:0}}
.aq-plants{position:absolute;bottom:0;right:18px;display:flex;align-items:flex-end;gap:8px;opacity:.4}.aq-plants i{display:block;width:12px;height:var(--height);border-radius:100% 0 0 0;background:linear-gradient(#63ada3,#204b5d);transform-origin:bottom;animation:aq-sway 6s ease-in-out infinite alternate;transform:rotate(var(--lean))}@keyframes aq-sway{to{transform:rotate(calc(var(--lean) + 9deg))}}
.aq-sand{position:absolute;bottom:-14px;left:-10%;width:120%;height:32px;border-radius:50%;background:#78899922}
.aq-light-card{grid-column:2;grid-row:1/3;border-top-color:var(--uv);display:flex;flex-direction:column;padding:22px}.aq-light-card header{display:flex;justify-content:space-between;align-items:center;gap:12px}.aq-light-card header small,.aq-readings>article>small{font-size:10px;letter-spacing:.1em}.aq-light-card h2{font-size:25px;margin-top:7px}.aq-light-card header>span{white-space:nowrap;font-size:12px;border-radius:20px;padding:8px 12px;background:#ffffff08;color:var(--dim)}.aq-lit #aqLampState{color:var(--cyan);background:#63dbe312}
.aq-mode{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;border:1px solid var(--line);border-radius:13px;background:#090c1380;margin-top:20px}.aq-mode button{min-height:48px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--dim);font:inherit;font-size:15px;cursor:pointer}.aq-mode button[aria-pressed=true]{color:#f6f0ff;border-color:rgba(var(--uv-rgb),0.502);background:linear-gradient(140deg,rgba(var(--uv-rgb),0.188),rgba(var(--uv-rgb),0.071));box-shadow:0 0 16px rgba(var(--uv-rgb),0.063)}.aq-mode button:disabled{opacity:.4;cursor:default}.aq-mode button:focus-visible,#aqScheduleForm input:focus-visible,#aqSave:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.aq-light-card .aq-mode-description{font-size:12px;line-height:1.5;margin:12px 0 18px;min-height:36px}
.aq-clock-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,.85fr);gap:24px;align-items:center;flex:1}
.aq-clock{aspect-ratio:1;max-width:240px;width:100%;justify-self:center;border-radius:50%;padding:9px;background:conic-gradient(from var(--aq-start,105deg),#8bd9d9 0deg,var(--uv) var(--aq-arc,232.5deg),#ffffff0b var(--aq-arc,232.5deg) 360deg);box-shadow:0 0 35px #63dbe30b}
.aq-clock-face{height:100%;border:1px solid #ffffff10;border-radius:50%;background:#131923;position:relative;display:grid;place-items:center}.aq-clock-face>div{text-align:center}.aq-clock-face>div small{font-size:8px;letter-spacing:.07em}.aq-clock-face strong{display:block;margin:5px 0;font-size:27px;font-weight:400;color:var(--cyan)}.aq-clock-face>div>span{font-size:10px;color:var(--dim)}.aq-hour{position:absolute;color:#898797;font-size:10px}.aq-hour-0{top:10px;left:50%;transform:translateX(-50%)}.aq-hour-6{right:10px;top:50%;transform:translateY(-50%)}.aq-hour-12{bottom:10px;left:50%;transform:translateX(-50%)}.aq-hour-18{left:10px;top:50%;transform:translateY(-50%)}
#aqScheduleForm{display:grid;gap:12px}#aqScheduleForm label{font-size:12px;color:var(--dim);display:grid;gap:6px}#aqScheduleForm input{color-scheme:dark;min-width:0;width:100%;box-sizing:border-box;font:inherit;font-size:22px;color:var(--text);background:#0d111b;border:1px solid var(--line);border-radius:9px;padding:10px;min-height:48px}#aqSave{font:inherit;font-size:13px;min-height:44px;padding:9px;border-radius:9px;border:1px solid rgba(var(--uv-rgb),0.439);background:rgba(var(--uv-rgb),0.125);color:#e6d5ff;cursor:pointer}#aqSave:disabled{opacity:.45}#aqScheduleNote{font-size:10px;line-height:1.4}
.aq-light-card .aq-next{font-size:12px;border-top:1px solid var(--line);padding-top:14px;margin:18px 0 0;color:#c4c7d4}
.aq-readings{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}.aq-readings .aquarium-card{padding:20px 16px;display:flex;flex-direction:column;border-top-width:2px}.aq-readings .aquarium-card h2{font-size:18px;margin-top:8px}.aq-readings .aquarium-reading{font-size:27px;margin:22px 0 4px}.aq-readings .aquarium-card p{font-size:12px;margin:7px 0 18px}.aq-readings .aquarium-meta{margin-top:auto;flex-wrap:wrap;gap:8px;font-size:11px;padding-top:12px}.aq-readings .aquarium-temperature{border-top-color:var(--cyan)}.aq-readings .aquarium-temperature .aquarium-reading{color:var(--cyan)}
@media(prefers-reduced-motion:reduce){.aq-fish,.aq-bubble,.aq-plants i{animation:none}.aq-fish-0{left:55%}.aq-fish-1{left:72%}.aq-fish-2{left:40%}.aq-bubble{display:none}}
@media(max-width:950px){.aquarium-grid.aquarium-dashboard{height:auto;grid-template-columns:1fr;grid-template-rows:190px auto auto}.aq-light-card{grid-column:1;grid-row:2}.aq-readings{grid-row:3}.aq-clock-layout{grid-template-columns:1fr 1fr}.aq-clock{max-width:220px}}
@media(max-width:480px){.aq-readings{grid-template-columns:1fr}.aq-clock-layout{gap:14px;grid-template-columns:minmax(120px,1fr) minmax(120px,1fr)}.aq-clock-face strong{font-size:20px}.aq-light-card{padding:16px}.aq-light-card h2{font-size:20px}}
.aq-light-card{padding:18px 20px}.aq-mode{margin-top:12px}.aq-light-card .aq-mode-description{min-height:0;margin:10px 0 12px}.aq-clock-layout{gap:18px}.aq-clock{max-width:210px}.aq-light-card .aq-next{margin-top:10px;padding-top:10px}#aqScheduleForm{gap:8px}#aqScheduleForm input{min-height:44px;padding:8px}
/* Agenda: a day overview and chronological appointments, without a month grid. */
.agenda-heading-actions{display:flex;align-items:center;gap:14px}.agenda-demo{font-size:11px;letter-spacing:.04em;color:#cbb8ec;background:rgba(var(--uv-rgb),0.063);border:1px solid rgba(var(--uv-rgb),0.188);border-radius:20px;padding:7px 12px;white-space:nowrap}.agenda-view{height:calc(100% - 82px);display:flex;flex-direction:column;gap:14px;padding-top:12px;min-height:0}.agenda-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0}.agenda-toolbar p{font-size:11px;color:var(--dim);margin:0 3px}.agenda-filter,.agenda-range{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:11px;background:#0b0e1580}.agenda-filter button,.agenda-range button{min-height:38px;padding:0 18px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--dim);font:inherit;font-size:12px;cursor:pointer}.agenda-filter button[aria-pressed=true],.agenda-range button[aria-pressed=true]{color:var(--text);border-color:rgba(var(--uv-rgb),0.314);background:rgba(var(--uv-rgb),0.125)}.agenda-filter button:focus-visible,.agenda-range button:focus-visible,.agenda-event:focus-visible,.agenda-next button:focus-visible,.agenda-upcoming-scroll:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.agenda-columns{flex:1;min-height:0;display:grid;grid-template-columns:minmax(310px,.78fr) minmax(0,1.5fr);gap:18px}.agenda-today,.agenda-upcoming{min-height:0;min-width:0;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--panel-top),var(--panel));overflow:hidden;display:flex;flex-direction:column}.agenda-today{background:radial-gradient(ellipse at 100% 0%,rgba(var(--uv-rgb),0.09),transparent 65%),linear-gradient(145deg,#22232d,#171a22);border-top:2px solid var(--uv)}.agenda-today>header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 22px 17px;gap:10px}.agenda-today header small,.agenda-upcoming header small{color:var(--uv);font-size:9px;letter-spacing:.15em}.agenda-today header h2{font-size:29px;font-weight:500;letter-spacing:-.035em;text-transform:capitalize;margin:6px 0}.agenda-today header span{font-size:12px;color:#bbb6c7}.agenda-date-number{font-size:76px;font-weight:300;line-height:1;color:#b895e04a;letter-spacing:-.07em}.agenda-today-summary{display:flex;justify-content:space-between;gap:8px;padding:0 22px 14px;border-bottom:1px solid #ffffff0a}.agenda-today-summary>span{color:#d7c7ea;font-size:11px}.agenda-today-summary>small{color:var(--dim);font-size:10px}.agenda-today-list{padding:8px 12px;min-height:0;overflow:auto;flex:1}.agenda-event{--event-color:var(--uv);display:flex;align-items:center;gap:15px;width:100%;min-height:72px;padding:13px 16px;border:1px solid transparent;border-bottom-color:#ffffff09;background:transparent;text-align:left;color:var(--text);font:inherit;cursor:pointer;border-radius:8px}.agenda-event:hover{background:#ffffff04;border-color:#ffffff12}.agenda-private{--event-color:var(--cyan)}.agenda-event-time{min-width:61px;width:61px;flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-right:2px solid var(--event-color)}.agenda-event-time b{font-size:14px;font-weight:500}.agenda-event-time small{font-size:11px;color:var(--dim);margin-top:4px}.agenda-event-copy{flex:1;min-width:0}.agenda-event-copy strong{display:block;font-size:15px;font-weight:500;line-height:1.35}.agenda-event-copy small{display:block;font-size:11px;color:var(--dim);margin-top:6px}.agenda-event-copy i{font-style:normal;color:#ffffff40;padding:0 5px}.agenda-event-arrow{color:#8a8299;font-size:16px}.agenda-today-event{gap:12px;padding:12px 9px;min-height:73px}.agenda-today-event .agenda-event-copy strong{font-size:13px}.agenda-today-event .agenda-event-copy small{font-size:10px}.agenda-today-event .agenda-event-time{min-width:54px;width:54px}.agenda-next{margin:6px 16px 16px;padding:12px 14px;border:1px solid rgba(var(--uv-rgb),0.145);border-radius:10px;background:rgba(var(--uv-rgb),0.031)}.agenda-next>small{font-size:8px;letter-spacing:.1em;color:#bca2df}.agenda-next button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 0;background:none;border:0;color:var(--text);text-align:left;font:inherit;cursor:pointer}.agenda-next strong{display:block;font-size:13px;font-weight:500}.agenda-next button small{display:block;font-size:10px;color:var(--dim);margin-top:5px}.agenda-next button>b{font-weight:400;color:var(--uv)}
.agenda-upcoming>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line-soft);flex-shrink:0}.agenda-upcoming h2{font-size:22px;font-weight:500;margin:5px 0 0;letter-spacing:-.02em}.agenda-range button{padding:0 13px;min-height:36px;font-size:11px}.agenda-upcoming-scroll{overflow:auto;min-height:0;flex:1;padding:5px 16px 16px;overscroll-behavior:contain;scrollbar-color:#63547b #15171f;scrollbar-width:thin}.agenda-day-group h3{display:flex;align-items:center;gap:10px;color:#d6d3df;font-size:12px;font-weight:500;padding:15px 12px 9px;margin:0}.agenda-day-group h3>span:first-child:first-letter{text-transform:uppercase}.agenda-day-group h3 small{color:var(--dim);font-size:10px;font-weight:400}.agenda-day-group h3>b{margin-left:auto;display:grid;place-items:center;font-size:10px;font-weight:400;min-width:21px;height:21px;border:1px solid #ffffff10;border-radius:50%;color:var(--dim)}.agenda-upcoming>footer{display:flex;align-items:center;gap:8px;padding:13px 24px;border-top:1px solid var(--line-soft);font-size:10px;color:var(--dim);flex-shrink:0}.agenda-legend-dot{width:6px;height:6px;background:var(--uv);border-radius:50%}.agenda-legend-dot.private{background:var(--cyan);margin-left:10px}.agenda-upcoming footer>span:last-child{margin-left:auto}.agenda-list-end{font-size:10px;text-align:center;color:var(--dim);padding:14px 0 3px;margin:0}.agenda-empty{padding:25px;color:var(--dim);font-size:13px;line-height:1.6}.agenda-detail{grid-column:1/-1;padding:10px 8px;max-width:700px;width:100%;margin:auto}.agenda-detail h2{font-size:30px!important;font-weight:500;margin:23px 0 9px!important}.agenda-detail-date{font-size:15px;color:#c6bbd7;text-transform:capitalize}.agenda-detail dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.agenda-detail dl>div{padding:15px;background:#ffffff04;border:1px solid var(--line);border-radius:10px}.agenda-detail dt{font-size:11px;color:var(--dim);margin-bottom:7px}.agenda-detail dd{margin:0;font-size:15px}.agenda-detail>p:not(.agenda-detail-date){color:#bcb6c8;font-size:14px;line-height:1.7}.agenda-detail footer{font-size:11px;color:var(--dim);padding-top:18px;border-top:1px solid var(--line);margin-top:24px}
.nav-dock{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:800px){.agenda-toolbar{align-items:flex-start;flex-direction:column;gap:8px}.agenda-columns{grid-template-columns:1fr;flex:none}.agenda-view{height:calc(100% - 82px);overflow:auto;padding-bottom:25px}.agenda-today-list{overflow:visible}.agenda-upcoming-scroll{max-height:500px}.agenda-heading-actions .agenda-demo{display:none}.agenda-upcoming>header{padding:16px}.agenda-today header{padding:18px}.agenda-detail dl{grid-template-columns:1fr}.nav-dock{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-height:680px) and (min-width:801px){.agenda-today>header{padding:12px 18px}.agenda-date-number{font-size:54px}.agenda-today header h2{font-size:24px}.agenda-next{margin-bottom:10px}.agenda-today-list{min-height:130px}}
.agenda-view{height:calc(100% - 100px)}.agenda-today>header{padding:14px 20px 12px}.agenda-today header h2{font-size:26px;margin:4px 0}.agenda-date-number{font-size:62px}.agenda-today-summary{padding:0 20px 10px}.agenda-today-event{min-height:68px;padding:10px 9px}.agenda-next{padding:10px 12px;margin:4px 14px 12px}.agenda-today-list{scrollbar-width:thin;scrollbar-color:#63547b #15171f}.agenda-filter button,.agenda-range button{min-height:42px}
.agenda-today>header{padding:10px 20px 8px}.agenda-today-summary{padding-bottom:6px}
.agenda-source-tools{display:flex;gap:6px;align-items:center;min-width:0}.agenda-source-tools button{min-height:40px;padding:6px 10px;border:1px solid #ffffff12;border-radius:8px;background:#ffffff03;color:var(--dim);font:inherit;font-size:11px;text-align:left;cursor:pointer}.agenda-source-tools [data-agenda-refresh]{font-size:22px;min-width:42px;text-align:center}.agenda-source-tools button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.agenda-empty strong{font-weight:500;color:#d3cddd}.agenda-empty p{font-size:12px}.agenda-detail dd{overflow-wrap:anywhere}
/* Printer dashboard: live job focus, clear offline state, independent room climate. */
.printer-view{height:calc(100% - 94px);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:minmax(285px,1fr) 180px;gap:16px;padding-top:14px;min-height:0;overflow:auto}
.printer-card{border:1px solid var(--line);border-radius:16px;padding:22px;background:linear-gradient(140deg,var(--panel-top),var(--panel));min-width:0}.printer-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.printer-card>header small{font-size:10px;letter-spacing:.1em;color:#b8abc8}.printer-card>header>span{font-size:10px;color:var(--dim)}
.printer-hero{display:flex;align-items:center;gap:12px;background:radial-gradient(ellipse at 100% 20%,rgba(var(--uv-rgb),0.082),transparent 70%),linear-gradient(145deg,#242530,#171b25);border-top:2px solid var(--uv);padding:25px}.printer-hero-copy{flex:1;min-width:0}.printer-eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.printer-eyebrow>span{font-size:10px;letter-spacing:.15em;color:var(--dim)}.printer-status{font-size:10px;font-weight:500;padding:5px 8px;border:1px solid rgba(var(--uv-rgb),0.251);border-radius:18px;background:rgba(var(--uv-rgb),0.063);color:#c5a3ef}.printer-hero h2{font-size:30px;font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:15px 0 10px}.printer-hero-copy>p{font-size:12px;color:#b9b5c5;line-height:1.6;max-width:380px}.printer-illustration{flex:0 0 38%;max-width:235px;text-align:center}.printer-drawing{width:100%;height:auto;filter:drop-shadow(0 12px 20px #0005)}.printer-illustration>small{font-size:8px;color:#817791;letter-spacing:.22em}.printer-job{margin-top:18px}.printer-job small{font-size:8px;letter-spacing:.13em;color:var(--dim)}.printer-job strong{display:block;overflow-wrap:anywhere;font-size:14px;font-weight:500;margin-top:6px}.printer-progress{margin-top:15px}.printer-progress>span{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--dim)}.printer-progress b{color:var(--text);font-size:22px;font-weight:400}.printer-progress [role=progressbar]{height:7px;border-radius:6px;background:#ffffff0a;margin-top:8px;overflow:hidden}.printer-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--uv),var(--cyan));border-radius:inherit;transition:width .6s}.printer-idle-note{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid #ffffff0b}.printer-idle-note>span{font-size:26px;color:var(--uv)}.printer-idle-note p{font-size:11px;line-height:1.5;color:var(--dim);margin:0}
.printer-details{display:flex;flex-direction:column}.printer-metrics{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;flex:1;padding:24px 0 20px}.printer-metric{min-width:0}.printer-metric>small{display:block;color:var(--dim);font-size:9px;letter-spacing:.08em}.printer-metric strong{display:block;font-size:23px;font-weight:400;color:var(--text);line-height:1.2;margin-top:7px;overflow-wrap:anywhere}.printer-metric>span{display:block;margin-top:5px;color:var(--dim);font-size:10px}.printer-spool{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:14px}.printer-spool small{font-size:8px;letter-spacing:.07em;color:var(--dim)}.printer-spool b{font-size:11px;font-weight:500;text-align:right;overflow-wrap:anywhere}
.printer-bottom{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1.18fr;gap:16px}.printer-bottom .printer-card{padding:18px 22px}.printer-bottom strong{display:block;font-size:38px;font-weight:300;margin:12px 0 10px;line-height:1;letter-spacing:-.04em;color:var(--cyan)}.printer-bottom p{font-size:10px;color:var(--dim);margin:10px 0 0;line-height:1.4}.printer-temp-track{height:4px;background:#ffffff0a;border-radius:4px;overflow:hidden}.printer-temp-track i{height:100%;display:block;background:linear-gradient(90deg,var(--uv),var(--cyan))}.printer-humidity{border-top:2px solid var(--cyan)}.printer-humidity-track{height:4px;background:linear-gradient(90deg,rgba(var(--uv-rgb),0.251),#63dbe360);border-radius:4px;position:relative;margin-right:5px}.printer-humidity-track i{position:absolute;top:-3px;width:10px;height:10px;border:2px solid #b7efed;border-radius:50%;background:#172a32;transform:translateX(-50%)}.printer-mode-offline .printer-hero,.printer-mode-unknown .printer-hero{border-top-color:#888095}.printer-mode-offline .printer-drawing{opacity:.5}.printer-mode-offline .printer-status,.printer-mode-unknown .printer-status{color:#c1b6cf;border-color:#ffffff20;background:#ffffff05}.printer-mode-error .printer-status{color:#ff9199;border-color:#ff919960;background:#ff919915}.printer-mode-error .printer-hero{border-top-color:#ff9199}.printer-mode-paused .printer-status{color:var(--amber);border-color:#f2b84b50}.printer-mode-printing .printer-head{animation:printer-travel 4s ease-in-out infinite alternate}@keyframes printer-travel{to{transform:translate(28px,-4px)}}@media(prefers-reduced-motion:reduce){.printer-head{animation:none!important}}
.nav-dock{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:850px){.printer-view{grid-template-columns:1fr;grid-template-rows:auto auto auto}.printer-bottom{grid-column:1;grid-template-columns:1fr 1fr}.printer-humidity{grid-column:1/-1}.printer-hero{min-height:290px}.printer-metrics{gap:20px}.nav-dock{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:500px){.printer-illustration{display:none}.printer-bottom{grid-template-columns:1fr}.printer-hero{min-height:260px}.printer-hero h2{font-size:27px}.printer-humidity{grid-column:1}.printer-card{padding:18px}}

/* Outlook: rolling calendar and ISO week numbers. */
.agenda-week-badge{display:inline-block;margin-left:8px;padding:3px 7px;border:1px solid rgba(var(--uv-rgb),0.208);border-radius:6px;color:#cdb2ee;font-size:10px;font-weight:500;white-space:nowrap}
.agenda-calendar-mode .agenda-columns{grid-template-columns:1fr}.agenda-calendar-mode .agenda-today{display:none}.agenda-calendar-mode .agenda-upcoming-scroll{padding:14px 18px;display:flex}.agenda-calendar-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:22px;width:100%;min-height:0}.agenda-calendar-grid{display:grid;grid-template-columns:25px repeat(7,minmax(0,1fr));grid-template-rows:20px;grid-auto-rows:minmax(48px,1fr);gap:6px;align-content:stretch;min-width:0}.calendar-week-label,.calendar-weekday,.calendar-week{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--dim)}.calendar-week{color:#a899be}.calendar-day{position:relative;display:flex;flex-direction:column;gap:5px;min-height:48px;min-width:0;padding:6px 9px;background:#ffffff03;border:1px solid #ffffff0c;border-radius:9px;color:var(--text);text-align:left;font:inherit;cursor:pointer;overflow:auto}.calendar-day:hover{background:rgba(var(--uv-rgb),0.075);border-color:rgba(var(--uv-rgb),0.376)}.calendar-day[aria-pressed=true]{background:linear-gradient(135deg,rgba(var(--uv-rgb),0.161),rgba(var(--uv-rgb),0.047));border-color:var(--uv);box-shadow:inset 0 0 0 1px rgba(var(--uv-rgb),0.125)}.calendar-day:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}.calendar-day.is-today .calendar-day-number{color:var(--cyan)}.calendar-day-number{font-size:17px;line-height:1.1;display:flex;align-items:baseline;gap:5px}.calendar-day-number small{font-size:9px;color:var(--dim)}.calendar-dots{display:flex;flex-wrap:wrap;gap:4px;min-height:6px}.calendar-dots i{width:5px;height:5px;border-radius:50%;background:var(--uv);flex-shrink:0}.calendar-dots i.private{background:var(--cyan)}.calendar-today-label{font-size:8px;color:var(--cyan)}.calendar-outside{border-radius:9px;background:#ffffff01}.calendar-selected{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-left:1px solid var(--line);padding-left:20px}.calendar-selected>header{padding:5px 0 13px;border-bottom:1px solid var(--line)}.calendar-selected header small{font-size:9px;letter-spacing:.08em;color:#c6a9ed}.calendar-selected h3{font-size:21px;font-weight:500;margin:8px 0;text-transform:capitalize}.calendar-selected header>span{font-size:11px;color:var(--dim)}.calendar-day-events{overflow:auto;min-height:0;flex:1;scrollbar-width:thin}.calendar-day-events .agenda-event{padding:13px 5px;gap:10px}.calendar-day-events .agenda-event-copy strong{font-size:14px}.calendar-selected>p{font-size:10px;color:var(--dim);margin:10px 0 0}
@media(max-width:800px){.agenda-calendar-layout{grid-template-columns:1fr;gap:18px}.agenda-calendar-grid{grid-auto-rows:minmax(60px,auto);gap:4px;grid-template-columns:20px repeat(7,minmax(0,1fr))}.agenda-calendar-mode .agenda-upcoming-scroll{max-height:none;overflow:visible;padding:12px}.calendar-selected{border-left:0;border-top:1px solid var(--line);padding:15px 0 0}.calendar-day-events{max-height:300px}.calendar-day{padding:6px}.calendar-selected h3{font-size:19px}.agenda-week-badge{margin-left:4px}}

.agenda-calendar-mode .agenda-upcoming>header{padding:12px 22px}.agenda-calendar-layout{height:100%}.calendar-day{min-height:44px}.calendar-today-label{position:absolute;right:6px;bottom:5px}.calendar-selected h3{text-transform:none}.calendar-selected h3::first-letter{text-transform:uppercase}@media(max-width:800px){.agenda-calendar-layout{height:auto}.agenda-calendar-grid{min-height:340px}}

/* Spacious, touch-first lighting workspace. */
#lightsGrid.lighting-workspace{height:calc(100% - 100px);display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;padding:14px 0 0;overflow:hidden;min-height:0}.lighting-rooms,.lighting-main{border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--panel-top),var(--panel));min-height:0;min-width:0;overflow:hidden}.lighting-rooms{display:flex;flex-direction:column}.lighting-rooms>header{padding:18px 18px 14px;border-bottom:1px solid var(--line)}.lighting-rooms header small,.lighting-room-header small{font-size:11px;letter-spacing:.1em;color:#b99ada}.lighting-rooms h2{font-size:24px;margin:5px 0}.lighting-rooms header>span{font-size:14px;color:var(--dim)}.lighting-room-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px;overflow:auto;align-content:start;scrollbar-width:thin}.lighting-room-list button{position:relative;min-height:65px;border:1px solid #ffffff0c;border-radius:10px;background:#ffffff03;text-align:left;padding:9px 9px 9px 18px;color:var(--text);font:inherit;cursor:pointer}.lighting-room-list button[aria-pressed=true]{background:rgba(var(--uv-rgb),0.114);border-color:rgba(var(--uv-rgb),0.502)}.lighting-room-list b{display:block;font-size:15px;font-weight:500}.lighting-room-list small{display:block;font-size:12px;color:var(--dim);margin-top:6px}.lighting-room-list i{position:absolute;left:6px;top:16px;width:5px;height:5px;border-radius:50%;background:#60616d}.lighting-room-list i.lit{background:#f2b84b;box-shadow:0 0 9px #f2b84b70}.lighting-main{display:flex;flex-direction:column}.lighting-room-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 22px}.lighting-room-header h2{font-size:28px;font-weight:500;margin:5px 0}.lighting-room-header p{font-size:14px;color:#beb7cc;margin:5px 0 0}.lighting-master{display:flex;gap:9px;flex-shrink:0}.lighting-master button{min-width:120px;min-height:62px;border:1px solid rgba(var(--uv-rgb),0.271);background:rgba(var(--uv-rgb),0.071);color:var(--text);border-radius:10px;font:inherit;font-size:17px;cursor:pointer}.lighting-master button:last-child{border-color:#ffffff20;background:#ffffff04}.lighting-master small{display:block;font-size:11px;letter-spacing:0;color:var(--dim);margin-top:5px}.lighting-tabs{display:flex;gap:6px;padding:0 18px 12px;border-bottom:1px solid var(--line)}.lighting-tabs button{flex:1;min-height:50px;border:1px solid transparent;border-radius:9px;background:#ffffff03;color:#c8c1d5;font:inherit;font-size:17px;cursor:pointer}.lighting-tabs button[aria-pressed=true]{color:#eee5ff;border-color:rgba(var(--uv-rgb),0.376);background:rgba(var(--uv-rgb),0.125)}.lighting-tabs small{margin-left:5px;font-size:12px;color:var(--dim)}.lighting-scroll{flex:1;min-height:0;overflow:auto;padding:16px 18px 20px;scrollbar-width:thin;scrollbar-color:#79638f #181921;overscroll-behavior:contain}.lighting-lamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.lighting-lamp{border:1px solid #ffffff14;border-radius:12px;background:#11151c66;overflow:hidden}.lighting-lamp.is-on{border-color:#f2b84b40;background:linear-gradient(145deg,#f2b84b0b,#14171f)}.lighting-lamp>header{display:flex;align-items:center;gap:10px;padding:15px}.lighting-lamp-icon svg{width:26px;height:32px}.lighting-lamp-icon{color:#858391;flex-shrink:0}.is-on .lighting-lamp-icon{color:#f2b84b}.lighting-lamp header>div{flex:1;min-width:0}.lighting-lamp h3{font-size:17px;font-weight:500;line-height:1.3;margin:0;overflow-wrap:anywhere}.lighting-lamp header div>span{display:block;font-size:13px;color:var(--dim);margin-top:5px}.lighting-power{min-width:64px;min-height:54px;font:inherit;font-size:18px;border:1px solid rgba(var(--uv-rgb),0.396);border-radius:10px;background:rgba(var(--uv-rgb),0.09);color:var(--text);cursor:pointer;flex-shrink:0}.is-on .lighting-power{background:#f2b84b13;border-color:#f2b84b55}.lighting-dimmer{display:block;padding:0 16px 6px}.lighting-dimmer>span{display:flex;justify-content:space-between;font-size:14px;color:#bbb6c7}.lighting-dimmer output{font-size:16px;color:var(--text)}.lighting-dimmer input{display:block;width:100%;height:44px;margin:0;accent-color:var(--uv);cursor:pointer;touch-action:pan-y}.lighting-dimmer input::-webkit-slider-thumb{width:28px;height:28px}.lighting-lamp details{border-top:1px solid #ffffff0c}.lighting-lamp summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:15px;cursor:pointer;list-style:none}.lighting-lamp summary::-webkit-details-marker{display:none}.lighting-lamp details[open] summary>span{transform:rotate(45deg)}.lighting-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 14px 14px}.lighting-colors .color-chip{min-height:50px;font-size:15px;min-width:0}.lighting-switch-only{font-size:14px;color:var(--dim);margin:0;padding:0 16px 16px}.lighting-scene-grid,.lighting-helper-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lighting-scene,.lighting-helper,.lighting-why{border:1px solid #ffffff18;border-radius:12px;background:#ffffff04;color:var(--text);font:inherit;text-align:left;cursor:pointer}.lighting-scene{min-height:96px;display:grid;grid-template-columns:30px 1fr;align-content:center;gap:7px;padding:16px}.lighting-scene>span{grid-row:span 2;font-size:26px;color:var(--uv)}.lighting-scene b{font-size:20px;font-weight:500}.lighting-scene small{font-size:13px;color:var(--dim)}.lighting-helper{min-height:80px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:14px}.lighting-helper b{font-size:17px;font-weight:500}.lighting-helper>span{font-size:16px;white-space:nowrap;color:var(--dim)}.lighting-helper.selected,.lighting-scene.selected{border-color:rgba(var(--uv-rgb),0.439);background:rgba(var(--uv-rgb),0.086)}.lighting-helper.selected>span{color:var(--cyan)}.lighting-explanation{font-size:15px;line-height:1.55;color:#bdb7c9;margin:0 0 16px}.lighting-why{display:flex;align-items:center;justify-content:space-between;min-height:58px;width:100%;padding:15px 18px;font-size:17px;margin-top:16px}.lighting-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.lighting-metrics article{padding:18px;border:1px solid var(--line);border-radius:12px;background:#ffffff03}.lighting-metrics small{font-size:14px;color:var(--dim);display:block}.lighting-metrics strong{display:block;font-size:26px;font-weight:400;margin-top:12px}.lighting-info-note{font-size:15px;color:var(--dim);line-height:1.5}.lighting-info-note h3{color:var(--text);font-size:18px}.lighting-empty{padding:24px;font-size:18px;color:var(--dim);grid-column:1/-1}#lightsGrid button:disabled{opacity:.4;cursor:not-allowed}#lightsGrid button:focus-visible,#lightsGrid summary:focus-visible,#lightsGrid input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media(max-width:1000px){#lightsGrid.lighting-workspace{grid-template-columns:220px minmax(0,1fr);gap:12px}.lighting-room-list{grid-template-columns:1fr}.lighting-lamp-grid{grid-template-columns:1fr}.lighting-room-header{padding:14px}.lighting-master button{min-width:90px}.lighting-tabs{padding:0 10px 10px}.lighting-tabs button{font-size:15px}}
@media(max-width:700px){#lightsGrid.lighting-workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.lighting-rooms>header{display:none}.lighting-room-list{display:flex;overflow:auto;padding:8px}.lighting-room-list button{min-width:115px;min-height:60px}.lighting-room-header h2{font-size:24px}.lighting-room-header p{font-size:12px}.lighting-room-header small{display:none}.lighting-master button{min-width:80px;min-height:52px;font-size:14px}.lighting-scene-grid,.lighting-helper-grid{grid-template-columns:1fr}.lighting-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.lighting-scroll{padding:12px}}
#lightsGrid.lighting-workspace{grid-template-rows:minmax(0,1fr)}.lighting-rooms>header,.lighting-room-header,.lighting-tabs{flex-shrink:0}.lighting-room-list{min-height:0}.lighting-dimmer input{-webkit-appearance:none;appearance:none;background:transparent}.lighting-dimmer input::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:#756188}.lighting-dimmer input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-10px;width:28px;height:28px;border-radius:50%;background:#c9a5ff;border:3px solid #ede0ff;box-shadow:0 0 0 5px rgba(var(--uv-rgb),0.082)}.lighting-dimmer input::-moz-range-track{height:8px;border-radius:8px;background:#756188}.lighting-dimmer input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#c9a5ff;border:3px solid #ede0ff}@media(max-width:700px){#lightsGrid.lighting-workspace{grid-template-rows:auto minmax(0,1fr)}}
.lighting-metrics strong{overflow-wrap:anywhere;line-height:1.35}.lighting-metrics article:last-child:nth-child(4){grid-column:1/-1}.lighting-metrics article:last-child:nth-child(4) strong{font-size:18px}

/* Crisp energy traces without glow or scale-dependent thickness. */
.energy-page-line{stroke-width:1.25;vector-effect:non-scaling-stroke;filter:none}
.energy-page-grid{stroke-width:.6;vector-effect:non-scaling-stroke;opacity:.6}
.energy-page-fill{opacity:.25}
.panel-energy .chart-line,.data-energy .chart-line{stroke-width:1.25;filter:none}
.panel-energy .chart-fill,.data-energy .chart-fill{opacity:.25}

/* Data: a dedicated chronological column, future above the present. */
#dataGrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(330px,1.2fr)}
#dataGrid>.data-doors{grid-column:1;grid-row:1}#dataGrid>.data-appliances{grid-column:2;grid-row:1}
#dataGrid>.data-house{grid-column:1;grid-row:2}#dataGrid>.data-lux{grid-column:2;grid-row:2}
#dataGrid>.house-timeline{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:15px;background:radial-gradient(ellipse at top right,rgba(var(--uv-rgb),.1),transparent 60%),var(--panel)}
#dataGrid .state-tile-grid.appliances{grid-template-columns:1fr;gap:6px}#dataGrid .state-tile-grid.appliances .state-tile{padding:7px 10px;align-items:center}#dataGrid .state-tile-grid.appliances .state-tile>span{display:grid;grid-template-columns:1fr auto;gap:2px 12px;flex:1}#dataGrid .state-tile-grid.appliances .state-tile em{grid-column:2}#dataGrid .state-tile-grid.appliances .state-tile b{margin:0}
#dataGrid .lux-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#dataGrid .lux-tile{grid-template-columns:1fr 35px;padding:7px}
.house-timeline h2{display:flex;align-items:center;gap:8px}.house-timeline h2 svg{width:20px;height:20px;color:var(--uv)}.house-timeline header em{font-size:10px;white-space:nowrap}.timeline-explainer{color:var(--dim);font-size:12px;margin:8px 0 10px}.house-timeline-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin}.house-timeline-list:focus-visible{outline:1px solid var(--uv);border-radius:8px}.house-timeline-list ol{list-style:none;margin:0;padding:0}.timeline-event{display:grid;grid-template-columns:43px 26px minmax(0,1fr);gap:8px;padding:0 0 16px;position:relative}.timeline-event:before{content:'';position:absolute;left:63px;top:24px;bottom:0;width:1px;background:var(--line)}.timeline-event>time{font-size:12px;color:var(--dim);padding-top:6px;font-variant-numeric:tabular-nums}.timeline-event>i{display:grid;place-items:center;height:26px;border:1px solid var(--line);border-radius:50%;color:var(--cyan);background:var(--panel);z-index:1}.timeline-event>i svg{width:15px;height:15px}.timeline-event>div{min-width:0;padding:8px 10px;border:1px solid var(--line-soft);border-radius:9px;background:#ffffff03}.timeline-event small{font-size:8px;letter-spacing:.1em;color:var(--dim)}.timeline-event b{display:block;font-size:13px;margin-top:3px;line-height:1.3}.timeline-event p{margin:5px 0 0;color:var(--dim);font-size:11px;line-height:1.45;overflow-wrap:anywhere}.timeline-event.is-future>i{color:var(--uv);border-style:dashed}.timeline-event.is-future>div{border-style:dashed;background:rgba(var(--uv-rgb),.045)}.timeline-event.is-future small{color:var(--uv)}.timeline-now{display:flex;align-items:center;gap:10px;color:var(--uv);padding:10px 8px;margin:0 0 16px;border-block:1px solid rgba(var(--uv-rgb),.35);background:rgba(var(--uv-rgb),.09);font-size:13px}.timeline-now>span{width:8px;height:8px;border-radius:50%;background:var(--uv);box-shadow:0 0 10px rgba(var(--uv-rgb),.3)}.timeline-now>time{margin-left:auto;font-variant-numeric:tabular-nums}.timeline-boundary{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;padding:7px 0 13px}.timeline-empty,.timeline-message{font-size:12px;line-height:1.5;color:var(--dim);padding:12px 8px}.timeline-message{padding:8px;border:1px solid var(--amber);border-radius:8px;color:var(--amber);margin:0 0 8px}.house-timeline footer{font-size:10px;color:var(--dim);line-height:1.45;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
@media(max-width:950px){#dataGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;overflow:auto;align-content:start}#dataGrid>.house-timeline{grid-column:1/-1;grid-row:3;height:520px}#dataGrid>.data-section{min-height:240px}}
#dataGrid>.data-section:not(.house-timeline){overflow:auto;min-height:0}#dataGrid>.data-section:not(.house-timeline)>header{min-height:36px;margin:0}#dataGrid>.data-section:not(.house-timeline)>header h2{font-size:18px;margin:2px 0}#dataGrid>.data-section:not(.house-timeline)>header em{font-size:9px}#dataGrid .lux-grid{margin-top:8px}#dataGrid .lux-tile{padding:5px 8px}#dataGrid .lux-tile b{font-size:14px;margin-top:1px}#dataGrid .lux-tile small{font-size:10px}#dataGrid .house-logic{gap:6px;margin-top:8px}#dataGrid .house-logic article{padding:7px 10px}#dataGrid .house-logic article b{font-size:15px;margin-top:2px}#dataGrid .why-launch{min-height:42px;margin-top:8px;padding:9px;font-size:13px}
#dataGrid>.data-section:not(.house-timeline)>header{padding:0;min-height:36px}#dataGrid .lux-grid{grid-auto-rows:36px}#dataGrid .lux-tile{min-height:0;height:36px;box-sizing:border-box}#dataGrid .why-launch{margin-bottom:0}#dataGrid .house-logic article{min-height:0;padding:5px 10px}#dataGrid>.data-section:not(.house-timeline){scrollbar-width:thin}
#dataGrid>.data-section:not(.house-timeline){padding:12px}#dataGrid .lux-tile>span{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0}#dataGrid .lux-tile small{line-height:14px}#dataGrid .lux-tile b{line-height:16px;white-space:nowrap;margin:0}#dataGrid .lux-tile{grid-template-columns:1fr 24px;gap:6px}