:root{--bg:#0a0a0f;--bg-card:#141419;--bg-card-hover:#1a1a22;--bg-elevated:#1e1e28;--bg-input:#1a1a22;--text:#f0f0f5;--text-secondary:#8888a0;--text-dim:#555570;--accent:#6366f1;--accent-glow:#6366f126;--green:#22c55e;--red:#ef4444;--amber:#f59e0b;--blue:#3b82f6;--on:#22c55e;--off:#555570;--radius:16px;--radius-sm:10px;--radius-xs:6px;--shadow:0 2px 12px #0000004d;--transition:.2s cubic-bezier(.4, 0, .2, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#f5f5f7;--bg-card:#fff;--bg-card-hover:#f0f0f5;--bg-elevated:#fff;--bg-input:#f0f0f5;--text:#1a1a2e;--text-secondary:#666680;--text-dim:#999;--accent:#6366f1;--accent-glow:#6366f11a;--shadow:0 2px 12px #00000014;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}:root[data-theme=dark]{--bg:#0a0a0f;--bg-card:#141419;--bg-card-hover:#1a1a22;--bg-elevated:#1e1e28;--bg-input:#1a1a22;--text:#f0f0f5;--text-secondary:#8888a0;--text-dim:#555570;--shadow:0 2px 12px #0000004d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif}button{cursor:pointer;color:inherit;font-family:inherit;font-size:inherit;background:0 0;border:none}input{font-family:inherit;font-size:inherit}.app{max-width:500px;min-height:100%;padding-bottom:env(safe-area-inset-bottom,0);flex-direction:column;margin:0 auto;display:flex}.page{-webkit-overflow-scrolling:touch;flex:1;padding:16px 16px 80px;overflow-y:auto}.page-title{letter-spacing:-.5px;margin-bottom:20px;font-size:28px;font-weight:700}.section-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin:24px 0 10px;font-size:13px;font-weight:600}.section-title:first-child{margin-top:0}.card{background:var(--bg-card);border-radius:var(--radius);transition:background var(--transition);margin-bottom:10px;padding:16px}.card:active{background:var(--bg-card-hover)}.card-row{align-items:center;gap:12px;display:flex}.card-icon{background:var(--bg-elevated);border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:24px;display:flex}.card-icon.on{background:var(--accent-glow)}.card-body{flex:1;min-width:0}.card-name{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.card-state{color:var(--text-secondary);margin-top:2px;font-size:13px}.toggle{background:var(--off);width:52px;height:30px;transition:background var(--transition);border-radius:15px;flex-shrink:0;position:relative}.toggle.on{background:var(--accent)}.toggle:after{content:"";width:24px;height:24px;transition:transform var(--transition);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px}.toggle.on:after{transform:translate(22px)}.slider-wrap{margin-top:12px;padding:0 4px}.slider{appearance:none;background:var(--bg-elevated);border-radius:3px;outline:none;width:100%;height:6px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:22px;height:22px;box-shadow:0 2px 6px #0000004d}.grid-2{grid-template-columns:1fr 1fr;gap:10px;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.scene-btn{background:var(--bg-card);border-radius:var(--radius);text-align:center;transition:all var(--transition);padding:14px 12px;font-size:14px;font-weight:500}.scene-btn:active{background:var(--accent);color:#fff;transform:scale(.96)}.scene-btn .scene-icon{margin-bottom:6px;font-size:24px}.nav-bar{background:var(--bg-card);border-top:1px solid var(--bg-elevated);padding:8px 0;padding-bottom:calc(8px + env(safe-area-inset-bottom,0));z-index:100;-webkit-backdrop-filter:blur(20px);justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}.nav-btn{color:var(--text-dim);transition:color var(--transition);flex-direction:column;align-items:center;gap:2px;padding:4px 16px;font-size:11px;display:flex}.nav-btn.active{color:var(--accent)}.nav-btn .nav-icon{font-size:22px}.status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot.green{background:var(--green)}.status-dot.red{background:var(--red)}.status-dot.amber{background:var(--amber)}.greeting{letter-spacing:-.5px;margin-bottom:4px;font-size:26px;font-weight:700}.weather-line{color:var(--text-secondary);margin-bottom:20px;font-size:15px}.alarm-bar{background:var(--bg-card);border-radius:var(--radius);justify-content:space-between;align-items:center;margin-bottom:16px;padding:14px 16px;display:flex}.alarm-state{align-items:center;gap:10px;font-size:15px;font-weight:600;display:flex}.alarm-actions{gap:8px;display:flex}.alarm-btn{border-radius:var(--radius-xs);transition:all var(--transition);padding:8px 16px;font-size:13px;font-weight:600}.alarm-btn.arm{background:var(--red);color:#fff}.alarm-btn.disarm{background:var(--green);color:#fff}.alarm-btn:active{transform:scale(.95)}.presence-row{gap:8px;margin-bottom:16px;display:flex}.presence-chip{background:var(--bg-card);border-radius:20px;align-items:center;gap:6px;padding:8px 14px;font-size:14px;display:flex}.camera-grid{gap:10px;display:grid}.camera-card{background:var(--bg-card);border-radius:var(--radius);overflow:hidden}.camera-card img{aspect-ratio:16/9;object-fit:cover;background:var(--bg-elevated);width:100%;display:block}.camera-label{padding:10px 14px;font-size:14px;font-weight:500}.setup-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.setup-logo{margin-bottom:16px;font-size:48px}.setup-title{margin-bottom:8px;font-size:28px;font-weight:700}.setup-subtitle{color:var(--text-secondary);max-width:320px;margin-bottom:32px;font-size:15px}.setup-form{width:100%;max-width:400px}.input-group{text-align:left;margin-bottom:16px}.input-label{color:var(--text-secondary);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.input-field{background:var(--bg-input);border:1px solid var(--bg-elevated);border-radius:var(--radius-sm);width:100%;color:var(--text);transition:border-color var(--transition);outline:none;padding:14px 16px;font-size:15px}.input-field:focus{border-color:var(--accent)}.input-hint{color:var(--text-dim);margin-top:4px;font-size:12px}.btn-primary{background:var(--accent);color:#fff;border-radius:var(--radius-sm);width:100%;transition:all var(--transition);margin-top:8px;padding:16px;font-size:16px;font-weight:600}.btn-primary:active{opacity:.9;transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.error-text{color:var(--red);margin-top:12px;font-size:14px}.connection-bar{background:var(--amber);color:#1a1a1a;text-align:center;z-index:200;padding:6px 16px;font-size:13px;font-weight:600;position:fixed;top:0;left:0;right:0}.room-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.room-card{background:var(--bg-card);border-radius:var(--radius);transition:all var(--transition);padding:20px 16px}.room-card:active{background:var(--bg-card-hover);transform:scale(.98)}.room-icon{margin-bottom:8px;font-size:28px}.room-name{margin-bottom:4px;font-size:15px;font-weight:600}.room-count{color:var(--text-secondary);font-size:12px}.back-btn{color:var(--accent);align-items:center;gap:4px;margin-bottom:16px;padding:4px 0;font-size:15px;display:flex}.empty-state{text-align:center;color:var(--text-secondary);padding:48px 24px}.empty-icon{margin-bottom:12px;font-size:48px}.settings-item{background:var(--bg-card);border-radius:var(--radius);justify-content:space-between;align-items:center;margin-bottom:8px;padding:16px;display:flex}.settings-label{font-size:15px;font-weight:500}.settings-value{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:14px;overflow:hidden}.btn-danger{background:var(--red);color:#fff;border-radius:var(--radius-sm);width:100%;margin-top:24px;padding:16px;font-size:16px;font-weight:600}.btn-danger:active{opacity:.9;transform:scale(.98)}