@font-face { font-family: Manrope; src: url('/assets/manrope-regular.ttf') format('truetype'); font-style: normal; font-weight: 400 500; font-display: swap; }
@font-face { font-family: Manrope; src: url('/assets/manrope-bold.ttf') format('truetype'); font-style: normal; font-weight: 600 800; font-display: swap; }
:root { color-scheme: light; --bg:#f7f9f8; --surface:#fff; --ink:#202d29; --muted:#66766d; --line:#e2e8e4; --accent:#28795d; --accent-soft:#e7f3eb; --on:#e6f3e9; --on-border:#b4d5bd; --overview:#edf3ef; --bad:#a33d3b; --bad-bg:#fff0ec; --icon-bg:#f0f3f1; --shadow:0 8px 28px #23362b0a; }
:root[data-theme='dark'] { color-scheme:dark; --bg:#141b19; --surface:#1c2521; --ink:#e8f0eb; --muted:#9aaca1; --line:#334138; --accent:#8edab0; --accent-soft:#283f32; --on:#2c4736; --on-border:#536e55; --overview:#202e27; --bad:#ffaaa1; --bad-bg:#3a2423; --icon-bg:#2a3530; --shadow:0 8px 28px #0002; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; letter-spacing:0; }
html { background:var(--bg); scroll-behavior:smooth; scrollbar-gutter:stable; }
body { margin:0; color:var(--ink); font:14px/1.5 Manrope,system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; touch-action:manipulation; transition:background .2s,color .2s,border-color .2s,transform .16s; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button:active:not(:disabled) { transform:scale(.97); }
h1,h2,h3,p { margin:0; }
svg { width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
a { color:inherit; text-decoration:none; }
.accent { color:var(--accent); }
.eyebrow { font-size:10px; font-weight:700; color:var(--muted); line-height:1.6; }
.icon-btn { width:44px; height:44px; flex:none; display:inline-grid; place-items:center; border-radius:8px; color:var(--muted); }
.icon-btn:hover { background:var(--icon-bg); color:var(--ink); }
.icon-btn svg { width:20px; height:20px; }
.text-btn { display:inline-flex; gap:9px; align-items:center; color:var(--accent); font-weight:700; min-height:44px; }
.primary-btn { display:flex; gap:16px; align-items:center; justify-content:center; padding:13px 22px; min-height:50px; color:var(--surface); background:var(--accent); font-weight:700; border-radius:8px; }
.primary-btn:disabled { opacity:.65; }
.topbar { height:88px; max-width:1240px; margin:auto; padding:0 44px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; font-size:19px; font-weight:800; white-space:nowrap; }
.brand-symbol { width:39px; height:39px; border-radius:8px; display:inline-grid; place-items:center; background:var(--accent); color:var(--surface); flex:none; }
.brand-symbol svg { width:22px; height:22px; }
.main-nav { display:flex; gap:6px; align-items:center; }
.nav-item { min-height:44px; display:flex; gap:7px; align-items:center; padding:10px 13px; font-size:12px; font-weight:600; color:var(--muted); border-radius:8px; }
.nav-item svg { width:17px; height:17px; }
.nav-item.active { color:var(--accent); background:var(--accent-soft); }
.nav-item:hover { color:var(--accent); }
.top-actions { display:flex; align-items:center; gap:14px; }
.connection { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:11px; white-space:nowrap; }
.status-dot,.small-dot { width:6px; height:6px; flex:none; border-radius:50%; background:currentColor; }
.connection.live { color:var(--accent); } .connection.down { color:var(--bad); }
.overview { background:var(--overview); border-block:1px solid var(--line); overflow:hidden; }
.overview-inner { max-width:1152px; height:295px; margin:auto; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:24px; }
.overview-copy { position:relative; z-index:1; }
.overview h1 { font-size:35px; line-height:1.3; font-weight:700; margin-top:11px; }
.overview-sub { color:var(--muted); font-size:14px; margin-top:8px; }
.home-numbers { display:flex; align-items:center; gap:25px; margin-top:29px; }
.home-number { display:flex; align-items:center; gap:13px; }
.home-number > div { display:flex; flex-direction:column; }
.home-number strong { font-size:27px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.home-number div > span { font-size:11px; color:var(--muted); margin-top:3px; }
.number-icon { display:grid; place-items:center; width:42px; height:46px; color:var(--accent); }
.number-icon svg { width:30px; height:30px; stroke-width:1.4; }
.rooms-icon { color:#858169; } .number-divider { height:32px; width:1px; background:#cdd9d0; }
.home-art { height:100%; overflow:hidden; display:grid; align-items:center; justify-items:center; }
.home-art img { display:block; width:420px; max-width:100%; height:auto; mix-blend-mode:darken; transition:filter .4s; }
[data-theme='dark'] .home-art img { mix-blend-mode:lighten; }
.content { max-width:1240px; padding:34px 44px 0; margin:auto; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.section-heading h2 { font-size:26px; font-weight:700; line-height:1.4; margin-top:4px; }
.all-off { display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:12px 19px; background:var(--ink); color:var(--surface); border-radius:8px; font-weight:600; font-size:12px; white-space:nowrap; }
.all-off svg { width:18px; height:18px; }
.all-off:hover { background:var(--accent); } .all-off:disabled { opacity:.45; }
.command-spinner { display:none; width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin 1s linear infinite; }
.all-off.pending > svg { display:none; } .all-off.pending .command-spinner { display:inline-block; }
.filter-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.room-filters { display:flex; align-items:center; gap:5px; overflow-x:auto; scrollbar-width:none; padding:3px; margin:-3px; }
.room-filters::-webkit-scrollbar { display:none; }
.room-filter { display:flex; align-items:center; gap:8px; padding:10px 15px; min-height:42px; font-size:12px; white-space:nowrap; color:var(--muted); border:1px solid transparent; border-radius:6px; }
.room-filter.active { color:var(--ink); background:var(--surface); border-color:var(--line); box-shadow:0 2px 3px #00000003; font-weight:700; }
.filter-count { min-width:17px; text-align:center; font-size:10px; font-weight:500; color:var(--muted); }
.active-filter { display:flex; align-items:center; gap:8px; font-size:11px; white-space:nowrap; color:var(--muted); min-height:44px; cursor:pointer; }
.active-filter input,.setting-toggle input { position:absolute; opacity:0; width:1px; height:1px; }
.mini-toggle { position:relative; width:30px; height:18px; border-radius:20px; background:#d7e0da; display:inline-block; flex:none; transition:background .2s; }
.mini-toggle::after { content:''; position:absolute; top:3px; left:3px; width:12px; height:12px; background:white; border-radius:50%; transition:transform .2s; box-shadow:0 1px 2px #0001; }
input:checked + .mini-toggle { background:var(--accent); } input:checked + .mini-toggle::after { transform:translateX(12px); }
input:focus-visible + .mini-toggle { outline:3px solid var(--accent); outline-offset:4px; }
.lights-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.device { position:relative; min-width:0; height:198px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); transition:background .25s,border-color .25s,box-shadow .25s; overflow:hidden; }
.device.on { background:var(--on); border-color:var(--on-border); }
.device[data-kind='fan'].on { background:#e7eff5; border-color:#bed0df; }
[data-theme='dark'] .device[data-kind='fan'].on { background:#293b44; border-color:#456778; }
.device:hover { border-color:#a8bcb0; box-shadow:0 8px 25px #203f2910; }
.device-toggle { position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; width:100%; height:100%; text-align:left; padding:21px; }
.device-toggle:focus-visible { outline-offset:-5px; }
.device-glyph { position:absolute; top:19px; left:20px; width:42px; height:42px; display:grid; place-items:center; background:var(--icon-bg); border-radius:50%; color:#7d8982; transition:color .25s,background .25s; }
.device-glyph svg { width:23px; height:23px; stroke-width:1.6; }
.on .device-glyph { color:var(--accent); background:#ffffff90; }
[data-theme='dark'] .on .device-glyph { background:#ffffff12; }
.on[data-kind='fan'] .device-glyph { color:#467898; } .on[data-kind='fan'] .device-glyph svg { animation:spin 5s linear infinite; }
.device-room { font-size:10px; color:var(--muted); line-height:1.5; margin-bottom:3px; }
.device-name { font-size:15px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; padding-right:4px; }
.device-bottom { display:flex; justify-content:space-between; align-items:center; gap:6px; width:100%; margin-top:14px; }
.device-status { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.on .device-status { color:var(--accent); }
.device-status::before { content:''; width:5px; height:5px; flex:none; border-radius:50%; background:currentColor; }
.device-switch { width:34px; height:20px; flex:none; border-radius:22px; background:#dce3de; position:relative; transition:background .25s; }
.device-switch::after { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; border-radius:50%; background:white; box-shadow:0 1px 2px #0001; transition:transform .25s cubic-bezier(.2,.8,.3,1.4); }
.on .device-switch { background:#428467; } .on .device-switch::after { transform:translateX(14px); }
.favorite-btn { position:absolute; top:8px; right:8px; width:44px; height:44px; color:#89988d; display:grid; place-items:center; border-radius:50%; }
.favorite-btn svg { width:17px; height:17px; }
.favorite-btn:hover { color:#ad6671; background:#ffffff50; }
.favorite-btn.saved { color:#a85d6a; } .favorite-btn.saved svg { fill:#b6657325; }
.device.pending .device-status::before { width:9px; height:9px; background:transparent; border:1.5px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite; }
.device.unavailable { opacity:.65; }
.grid-caption { display:flex; align-items:center; gap:6px; margin-top:18px; color:var(--muted); font-size:10px; }
.grid-caption .small-dot { color:var(--accent); width:4px; height:4px; }
.rooms-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.room-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:24px; min-height:220px; text-align:left; border-radius:8px; border:1px solid var(--line); background:var(--surface); }
.room-card > svg:first-child { width:37px; height:37px; stroke-width:1.3; color:var(--accent); margin-bottom:25px; }
.room-card:nth-child(2) > svg:first-child { color:#758b9f; } .room-card:nth-child(3) > svg:first-child { color:#b17d67; } .room-card:nth-child(4) > svg:first-child { color:#80925f; }
.room-card strong { font-size:18px; } .room-card span { color:var(--muted); font-size:12px; }
.room-card .room-arrow { position:absolute; right:22px; top:28px; width:17px; color:var(--muted); }
.room-card:hover { border-color:var(--accent); } .section-count { font-size:12px; color:var(--muted); }
.empty-state { padding:44px 16px; text-align:center; min-height:225px; }
.empty-state > span > svg { width:32px; height:32px; color:var(--accent); margin-bottom:14px; stroke-width:1.4; }
.empty-state h3 { font-size:18px; margin-bottom:7px; } .empty-state p { font-size:12px; color:var(--muted); }
.empty-state .text-btn { margin-top:12px; }
.activity-row { display:flex; gap:14px; align-items:center; padding:19px 0; border-bottom:1px solid var(--line); }
.activity-row > svg { color:var(--accent); padding:9px; background:var(--accent-soft); width:40px; height:40px; border-radius:8px; }
.activity-row.failed > svg { color:var(--bad); background:var(--bad-bg); }
.activity-row div { flex:1; min-width:0; } .activity-row strong { font-size:13px; } .activity-row p { font-size:11px; color:var(--muted); margin-top:3px; }
.activity-row time { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.scenes-section { padding-top:26px; } .scenes-section h3 { font-size:16px; margin-bottom:12px; }
.scene-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.scene-button { border:1px solid var(--line); border-radius:8px; padding:12px 16px; display:flex; align-items:center; gap:12px; }
.scene-button:disabled { opacity:.5; }
.connection-banner { display:flex; align-items:center; gap:12px; background:var(--bad-bg); color:var(--bad); border-radius:8px; padding:7px 12px; font-size:12px; margin-bottom:22px; }
.connection-banner span { flex:1; }
.jarvis { margin-top:30px; border-top:1px solid var(--line); padding-top:20px; }
.jarvis form { display:flex; gap:12px; align-items:center; } .jarvis form > svg { color:var(--accent); }
.jarvis input { min-width:0; flex:1; border:0; background:transparent; padding:12px 0; outline-offset:1px; font-size:16px; }
.jarvis > p { padding-top:10px; color:var(--muted); font-size:12px; }
.footer { margin-top:40px; padding:22px 0 28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:11px; color:var(--muted); }
.footer > span:first-child { font-weight:700; }
#footer-status { display:flex; align-items:center; gap:5px; font-size:10px; } #footer-status svg { width:13px; height:13px; }
.settings-dialog { padding:28px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - 48px); box-shadow:0 25px 80px #10221835; }
.settings-dialog::backdrop { background:#0d231950; backdrop-filter:blur(4px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; } .dialog-heading h2 { font-size:23px; }
.settings-section h3 { font-size:12px; margin-bottom:12px; }
.theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:24px; }
.theme-options button { min-height:76px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:11px; }
.theme-options button[aria-pressed='true'] { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.setting-row { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:10px 0; font-size:12px; gap:12px; }
.setting-row > span { display:flex; gap:9px; align-items:center; } .setting-row svg { width:18px; height:18px; color:var(--muted); }
.setting-toggle { display:flex; align-items:center; justify-content:flex-end; width:44px; height:44px; cursor:pointer; }
.logout { margin-top:12px; color:var(--bad); }
.welcome-screen { min-height:100dvh; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.welcome-screen h1 { font-size:29px; } .welcome-screen > p { color:var(--muted); }
.login-content { width:min(360px,100%); } .login-content .eyebrow { margin-top:25px; } .login-content h1 { margin:6px 0 28px; }
#login-form { display:flex; flex-direction:column; gap:10px; } #login-form label { font-size:12px; color:var(--muted); }
#password { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:15px; font-size:16px; }
.error-text { color:var(--bad); font-size:12px; margin-top:14px; }
.toast { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:10px; padding:14px 18px; width:max-content; max-width:calc(100% - 32px); background:var(--ink); color:var(--surface); box-shadow:0 10px 40px #0002; border-radius:8px; font-size:12px; animation:toast-in .2s ease-out; }
.toast.bad { background:#853e36; color:white; } .toast svg { width:18px; height:18px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes toast-in { from { opacity:0; margin-bottom:-8px; } to { opacity:1; margin-bottom:0; } }
@media (min-width:1440px) { .overview-inner { height:310px; } }
@media (max-width:1239px) { .overview-inner { padding:0 44px; } }
@media (max-width:1000px) {
  .topbar { padding-inline:28px; gap:16px; } .top-actions { gap:5px; } .connection { font-size:10px; } .nav-item { padding-inline:9px; } .brand { font-size:17px; }
  .overview-inner { padding-inline:28px; height:265px; } .overview h1 { font-size:29px; }
  .content { padding-inline:28px; } .lights-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .rooms-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  html { scrollbar-gutter:auto; }
  .topbar { height:68px; padding:env(safe-area-inset-top) 22px 0; gap:10px; }
  .brand { font-size:17px; gap:8px; } .brand-symbol { width:33px; height:33px; } .brand-symbol svg { width:20px; }
  .connection { font-size:10px; gap:5px; } .top-actions { gap:3px; } .top-actions .icon-btn { width:38px; }
  .main-nav { position:fixed; bottom:0; left:0; right:0; z-index:10; height:calc(70px + env(safe-area-inset-bottom)); padding:6px max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)); justify-content:space-around; border-top:1px solid var(--line); background:var(--surface); box-shadow:0 -4px 22px #17362205; gap:0; }
  .nav-item { flex-direction:column; justify-content:center; gap:4px; width:25%; max-width:100px; padding:8px 5px; font-size:10px; min-height:54px; border-radius:8px; } .nav-item svg { width:20px; height:20px; }
  .overview-inner { height:180px; padding:15px 22px; grid-template-columns:1fr 135px; grid-template-rows:auto auto auto 1fr; gap:0; position:relative; align-items:start; }
  .overview-copy { display:contents; } .overview .eyebrow { grid-column:1/-1; font-size:10px; align-self:start; }
  .overview h1 { grid-column:1/-1; font-size:26px; margin-top:3px; } .overview-sub { grid-column:1/-1; font-size:12px; margin-top:3px; }
  .home-numbers { grid-column:1; margin-top:12px; gap:14px; align-self:end; padding-bottom:2px; }
  .home-number { gap:0; } .number-icon { display:none; } .home-number strong { font-size:26px; } .home-number div > span { font-size:10px; } .number-divider { height:29px; }
  .home-art { position:absolute; width:145px; height:96px; right:12px; bottom:6px; } .home-art img { width:145px; max-width:none; }
  .content { padding:20px 22px 75px; } .section-heading { margin-bottom:14px; gap:12px; } .section-heading h2 { font-size:23px; } .section-heading .eyebrow { font-size:9px; }
  .all-off { min-height:44px; font-size:11px; padding:10px 13px; gap:7px; }
  .filter-row { flex-wrap:wrap; gap:8px; margin-bottom:15px; } .room-filters { width:100%; } .room-filter { padding:10px 12px; gap:6px; font-size:11px; }
  .active-filter { margin-left:auto; min-height:34px; font-size:10px; }
  .lights-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .device { height:166px; } .device-toggle { padding:15px 17px; } .device-glyph { left:16px; top:14px; width:35px; height:35px; } .device-glyph svg { width:21px; height:21px; }
  .device-name { font-size:14px; } .device-bottom { margin-top:12px; } .device-status { font-size:10px; } .favorite-btn { top:5px; right:4px; } .device-room { font-size:9px; }
  .rooms-grid { gap:12px; } .room-card { padding:20px; min-height:200px; } .room-card strong { font-size:16px; } .room-card span { font-size:11px; } .room-card .room-arrow { right:15px; }
  .footer { margin-top:28px; padding:20px 0; font-size:10px; gap:12px; } #footer-status { font-size:9px; }
  .toast { bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width:359px) {
  .topbar { padding-inline:15px; } .brand { font-size:15px; } .connection { font-size:9px; }
  .overview-inner { padding-inline:16px; } .overview h1 { font-size:23px; } .home-art { width:134px; right:4px; } .home-art img { width:150px; }
  .home-numbers { gap:11px; } .content { padding-inline:16px; } .section-heading h2 { font-size:21px; } .all-off { padding-inline:10px; }
  .device-toggle { padding:13px; } .device-name { font-size:13px; } .device-glyph { left:12px; } .device { height:166px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }