:root {
  color-scheme: dark;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #071b25;
  color: #f4fbff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: #071b25; }
body { min-width: 320px; min-height: 100dvh; margin: 0; background: radial-gradient(circle at 100% -10%, rgba(41, 169, 190, .25), transparent 30rem), radial-gradient(circle at -15% 30%, rgba(77, 220, 183, .10), transparent 27rem), #071b25; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100% - 32px, 980px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 0 max(36px, env(safe-area-inset-bottom)); }
.topbar, .brand-lockup, .unit-header, .actions, .connection-copy, .connection-actions, .power-state, .temperature-slider-row, .temperature-panel-heading, .install-tip { display: flex; align-items: center; }
.topbar, .unit-header, .temperature-panel-heading { justify-content: space-between; }
.brand-lockup, .connection-copy { gap: 12px; }
.brand-mark { width: 48px; height: 48px; border-radius: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.eyebrow, .unit-building { margin: 0 0 3px; color: #91b9c7; font-size: .73rem; font-weight: 750; letter-spacing: .095em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.7rem; letter-spacing: -.045em; line-height: 1; }
h2 { margin-bottom: 0; font-size: 1.3rem; letter-spacing: -.025em; }
.icon-button, .dismiss-tip, .temperature-step { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 14px; cursor: pointer; }
.icon-button { color: #c8e8f2; background: rgba(139, 201, 218, .12); }
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.icon-button:disabled { cursor: wait; opacity: .45; }
.connection, .unit-card, .install-tip { border: 1px solid rgba(183, 225, 235, .14); background: linear-gradient(145deg, rgba(16, 49, 62, .92), rgba(10, 34, 45, .88)); box-shadow: 0 18px 48px rgba(0, 0, 0, .2); backdrop-filter: blur(18px); }
.connection { display: grid; gap: 18px; margin: 27px 0 12px; padding: 17px; border-radius: 20px; }
.connection-copy { align-items: flex-start; }
.connection-icon { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: #89ead0; background: rgba(78, 211, 176, .13); }
.connection-icon svg { width: 18px; fill: currentColor; }
.connection h2 { font-size: 1rem; }
.connection p { margin: 4px 0 0; color: #a8c1cb; font-size: .82rem; line-height: 1.35; }
.connection-form { display: grid; gap: 10px; }
.connection-actions { flex-wrap: wrap; gap: 10px; }
input, select { width: 100%; min-height: 46px; border: 1px solid rgba(193, 231, 239, .2); border-radius: 13px; outline: none; background: rgba(4, 23, 32, .72); color: #f4fbff; font-size: 16px; padding: 0 12px; }
input:focus, select:focus, button:focus-visible { outline: 3px solid rgba(105, 225, 197, .55); outline-offset: 2px; }
.remember-token { display: inline-flex; align-items: center; gap: 7px; color: #b9d0d8; font-size: .78rem; cursor: pointer; }
.remember-token input { width: 17px; min-height: 17px; accent-color: #5cddbb; }
.button { min-height: 46px; border: 0; border-radius: 13px; cursor: pointer; font-weight: 780; padding: 0 15px; transition: transform .14s ease, filter .14s ease, opacity .14s ease; -webkit-tap-highlight-color: transparent; }
.button:active, .icon-button:active, .temperature-step:active { transform: scale(.97); }
.button:hover { filter: brightness(1.07); }
.button:disabled { cursor: wait; opacity: .52; }
.button-primary { background: linear-gradient(135deg, #77e6c9, #56c5de); color: #04231f; }
.button-secondary { color: #d9eff5; background: rgba(173, 221, 234, .13); }
.button-danger { color: #ffdbdc; background: rgba(229, 105, 111, .22); }
.text-button { min-height: 42px; border: 0; background: transparent; color: #9fc7d2; cursor: pointer; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.notice { min-height: 23px; margin: 14px 2px 18px; color: #aac3cc; font-size: .86rem; line-height: 1.4; }
.notice.is-error, .unit-result.is-error { color: #ffaaa7; }
.notice.is-ok, .unit-result.is-ok { color: #84e3c9; }
.units { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.unit-card { overflow: hidden; padding: 18px; border-radius: 23px; }
.connection-state { border-radius: 999px; color: #c5d6dc; background: rgba(177, 218, 229, .12); font-size: .72rem; font-weight: 800; padding: 7px 10px; }
.connection-state.is-online { color: #9aefd9; background: rgba(46, 181, 139, .19); }
.climate-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0 12px; }
.reading { min-height: 92px; padding: 14px; border-radius: 17px; background: rgba(7, 26, 36, .5); }
.reading span { display: block; margin-bottom: 8px; color: #aac2cb; font-size: .74rem; font-weight: 650; }
.reading strong { font-size: 1.7rem; letter-spacing: -.055em; }
.reading-target { background: linear-gradient(135deg, rgba(35, 129, 142, .33), rgba(42, 86, 114, .23)); }
.power-state { grid-column: 1 / -1; gap: 8px; min-height: 34px; color: #b7cbd2; font-size: .78rem; font-weight: 700; }
.power-dot { width: 8px; height: 8px; border-radius: 50%; background: #758c95; box-shadow: 0 0 0 4px rgba(117, 140, 149, .12); }
.power-state.is-on { color: #8de9cf; }
.power-state.is-on .power-dot { background: #65dfbc; box-shadow: 0 0 0 4px rgba(101, 223, 188, .13); }
.temperature-panel { margin: 2px 0 16px; padding: 14px; border: 1px solid rgba(180, 221, 231, .12); border-radius: 18px; background: rgba(3, 25, 34, .34); }
.temperature-panel-heading { gap: 8px; color: #b6d0d9; font-size: .78rem; font-weight: 700; }
.temperature-value { color: #f4fbff; font-size: 1.18rem; font-weight: 800; letter-spacing: -.035em; }
.temperature-slider-row { gap: 9px; margin-top: 11px; }
.temperature-step { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(187, 230, 239, .17); color: #e4f5f8; background: rgba(142, 208, 221, .11); font-size: 1.28rem; font-weight: 500; line-height: 1; }
.temperature { min-height: auto; height: 28px; padding: 0; border: 0; border-radius: 0; accent-color: #6be1c3; background: transparent; cursor: pointer; }
.temperature-limits { display: flex; justify-content: space-between; margin: 3px 45px 0; color: #7fa3af; font-size: .68rem; font-weight: 700; }
.controls { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.controls label { display: grid; gap: 6px; color: #b0c8d1; font-size: .73rem; font-weight: 680; }
.controls select { min-height: 42px; padding: 0 8px; font-size: .87rem; }
.actions { gap: 8px; margin-top: 17px; }
.actions .button { flex: 1; padding: 0 8px; font-size: .83rem; }
.unit-result { min-height: 18px; margin: 13px 2px 0; color: #abc2ca; font-size: .77rem; line-height: 1.38; }
.install-tip { gap: 11px; margin-top: 24px; padding: 14px; border-radius: 18px; color: #b7d0d9; font-size: .79rem; line-height: 1.4; }
.install-tip[hidden] { display: none; }
.install-tip-icon { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: rgba(110, 224, 195, .14); color: #89e5cc; font-size: 1.3rem; }
.install-tip strong { color: #e2f5f8; }
.install-tip p { margin: 2px 0 0; }
.install-tip em { color: #8de5cd; font-style: normal; }
.dismiss-tip { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; color: #a6c3cc; background: transparent; font-size: 1.3rem; }
.visually-hidden { width: 1px; height: 1px; position: absolute; overflow: hidden; margin: -1px; clip: rect(0 0 0 0); }
@media (min-width: 690px) { .app-shell { padding-top: 40px; } h1 { font-size: 2rem; } .connection { grid-template-columns: minmax(0, 1fr) minmax(410px, 1.15fr); align-items: center; padding: 19px; } .connection-form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .connection-actions { justify-content: flex-end; } .connection-actions .button { order: 2; } .connection-actions .text-button { order: 3; } }
@media (max-width: 380px) { .app-shell { width: min(100% - 22px, 980px); } .connection-actions .button-primary { width: 100%; } .controls { grid-template-columns: 1fr; } .actions { flex-wrap: wrap; } .actions .button { min-width: calc(50% - 4px); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }