*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{color:#fff;background:#0a0a0a;min-height:100vh;transition:background .25s}body.light{background:#ecfdf5}#root{justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}*{-webkit-user-select:none;user-select:none;cursor:default}input,textarea{-webkit-user-select:text;user-select:text;cursor:text}button,[role=button]{cursor:pointer}.dashboard{--bg:#141414;--bg-deep:#0a0a0a;--surface:#222;--surface-hover:#2e2e2e;--surface-deep:#1a1a1a;--accent:#10b981;--accent-bright:#34d399;--accent-deep:#047857;--accent-deeper:#065f46;--text-1:#f4f4f5;--text-2:#a1a1aa;--text-3:#6b7280;--text-4:#d4d4d8;--shadow:#0009;--backdrop:#000000bf;--hero-grad:linear-gradient(135deg, #0d2818 0%, #064e3b 100%);--card-on-text:#fff9;--card-on-dots:#fff6;--card-on-bar:#ffffff26;--input-bg:#2e2e2e;--input-border:#6b7280;--badge-warn-bg:#f59e0b26;--badge-warn-text:#34d399;--scrollbar:#2e2e2e;--toast-border:#222;--transition:background .25s ease, color .25s ease, box-shadow .25s ease}.dashboard.light{--bg:#fff;--bg-deep:#f0fdf4;--surface:#f0fdf4;--surface-hover:#dcfce7;--surface-deep:#e8f5ee;--accent:#10b981;--accent-bright:#059669;--accent-deep:#059669;--accent-deeper:#047857;--text-1:#111827;--text-2:#374151;--text-3:#6b7280;--text-4:#4b5563;--shadow:#10b9811f;--backdrop:#00000080;--hero-grad:linear-gradient(135deg, #064e3b 0%, #065f46 100%);--card-on-text:#ffffffbf;--card-on-dots:#ffffff80;--card-on-bar:#ffffff40;--input-bg:#fff;--input-border:#a7f3d0;--badge-warn-bg:#f59e0b1f;--badge-warn-text:#d97706;--scrollbar:#a7f3d0;--toast-border:#d1fae5;--transition:background .25s ease, color .25s ease, box-shadow .25s ease}.dashboard{background:var(--bg);width:100%;max-width:900px;box-shadow:0 25px 60px var(--shadow);transition:var(--transition);border-radius:24px;padding:20px;position:relative}.top-nav{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;display:flex}.nav-tab{cursor:pointer;white-space:nowrap;border:none;border-radius:20px;padding:8px 18px;font-size:14px;font-weight:500;transition:all .2s}.nav-tab.home-tab{background:var(--accent);color:#fff;align-items:center;gap:6px;display:flex}.nav-tab.tab-active{background:var(--text-1);color:var(--bg)}.nav-tab.tab-inactive{background:var(--surface);color:var(--text-2)}.nav-tab.tab-inactive:hover{background:var(--surface-hover);color:var(--text-4)}.nav-tab.add-tab{background:var(--surface);color:var(--accent-bright);border:1.5px dashed var(--surface-hover);margin-left:auto;padding:6px 14px;font-size:18px;font-weight:400}.nav-tab.add-tab:hover{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep)}.theme-toggle{background:var(--surface);cursor:pointer;border:none;border-radius:20px;flex-shrink:0;align-items:center;gap:6px;padding:5px 10px 5px 6px;transition:background .2s;display:flex}.theme-toggle:hover{background:var(--surface-hover)}.toggle-track{background:var(--surface-hover);border-radius:9px;flex-shrink:0;width:32px;height:18px;transition:background .25s;position:relative}.toggle-track.on{background:var(--accent)}.toggle-thumb{background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .25s cubic-bezier(.4,0,.2,1);position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #0000004d}.toggle-track.on .toggle-thumb{transform:translate(14px)}.toggle-icon{font-size:13px;line-height:1}.tab-body{min-height:220px}.tab-content{flex-direction:column;gap:14px;display:flex}.tab-subtitle{color:var(--text-3);letter-spacing:.3px;text-transform:uppercase;font-size:12px}.main-layout{grid-template-columns:155px 1fr;gap:14px;display:grid}.room-panel{flex-direction:column;gap:10px;display:flex}.room-info{background:var(--surface);border-radius:16px;padding:14px}.room-info h3{color:var(--text-1);margin-bottom:3px;font-size:15px;font-weight:600}.device-count{color:var(--text-2);font-size:12px}.active-count{color:var(--accent);margin-top:3px;font-size:11px}.room-btn{background:var(--surface);color:var(--text-4);cursor:pointer;text-align:center;border:none;border-radius:12px;width:100%;padding:12px 14px;font-size:14px;font-weight:500;transition:background .2s}.room-btn:hover{background:var(--surface-hover)}.device-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.device-card{cursor:pointer;border-radius:16px;flex-direction:column;gap:6px;min-height:110px;padding:14px;transition:transform .15s,filter .2s;display:flex;position:relative}.device-card:hover{filter:brightness(1.08);transform:scale(1.02)}.device-card.card-active{background:var(--accent-deep)}.device-card.card-inactive{background:var(--surface)}.card-header{justify-content:space-between;align-items:flex-start;display:flex}.card-title h4{color:var(--text-1);font-size:14px;font-weight:600;line-height:1.2}.device-card.card-active .card-title h4{color:#fff}.card-status{color:var(--card-on-text);margin-top:2px;font-size:12px}.device-card.card-inactive .card-status{color:var(--text-3)}.card-icon{margin-top:auto;font-size:26px;line-height:1}.fav-btn{cursor:pointer;opacity:.7;background:0 0;border:none;padding:0;font-size:14px;line-height:1;transition:opacity .15s,transform .15s}.fav-btn:hover{opacity:1;transform:scale(1.2)}.mini-bar-wrap{background:var(--card-on-bar);border-radius:2px;height:2px;overflow:hidden}.mini-bar{background:var(--accent-bright);border-radius:2px;height:100%;transition:width .3s}.lock-badge{letter-spacing:.5px;color:var(--card-on-text);text-transform:uppercase;margin-top:auto;font-size:10px;font-weight:600}.device-card.card-inactive .lock-badge{color:var(--text-3)}.more-btn{cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:3px;padding:2px 4px;display:flex}.more-btn span{background:var(--card-on-dots);border-radius:50%;width:3px;height:3px;display:block}.device-card.card-inactive .more-btn span{background:var(--text-3)}.camera-card{cursor:pointer;border-radius:16px;min-height:110px;transition:transform .15s;position:relative;overflow:hidden}.camera-card:hover{transform:scale(1.02)}.cam-garden{background:linear-gradient(135deg,#166534 0%,#15803d 50%,#4d7c0f 100%);justify-content:center;align-items:center;width:100%;min-height:110px;display:flex}.cam-overlay{background:linear-gradient(#0000008c 0%,#0000 60%);padding:12px;position:absolute;inset:0}.cam-name{color:#fff;font-size:14px;font-weight:600}.cam-time{color:#ffffffbf;margin-top:2px;font-size:12px}.empty-state{color:var(--text-3);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:48px 20px;display:flex}.empty-icon{font-size:36px}.empty-state p{color:var(--text-2);font-size:15px;font-weight:500}.empty-state span{font-size:13px}.modal-backdrop{background:var(--backdrop);z-index:100;justify-content:center;align-items:flex-end;padding:16px;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@media (width>=500px){.modal-backdrop{align-items:center}}.modal{background:var(--bg);border-radius:20px;width:100%;max-width:520px;max-height:90vh;padding:20px;animation:.2s modalUp;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-header h3{color:var(--text-1);font-size:17px;font-weight:600}.modal-close{background:var(--surface);cursor:pointer;width:30px;height:30px;color:var(--text-2);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:13px;transition:background .15s;display:flex}.modal-close:hover{background:var(--surface-hover);color:var(--text-1)}.modal-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.add-option{background:var(--surface);cursor:pointer;text-align:left;border:1.5px solid #0000;border-radius:14px;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 12px;transition:all .15s;display:flex}.add-option:hover{background:var(--surface-hover);border-color:var(--accent-bright);transform:scale(1.02)}.add-opt-icon{font-size:22px}.add-opt-label{color:var(--text-1);font-size:14px;font-weight:600}.add-opt-desc{color:var(--text-3);font-size:11px;line-height:1.3}.toast{background:var(--bg);color:var(--text-1);border:1px solid var(--toast-border);box-shadow:0 8px 24px var(--shadow);z-index:200;white-space:nowrap;border-radius:20px;padding:10px 20px;font-size:14px;animation:.2s slideUp;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)translate(-50%)}to{opacity:1;transform:translateY(0)translate(-50%)}}@keyframes modalUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fan-spin{animation:1.2s linear infinite spin;display:inline-block}@media (width<=700px){.device-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=560px){.main-layout{grid-template-columns:1fr}.room-panel{flex-flow:wrap}.room-info{flex:100%}.room-btn{flex:calc(50% - 5px)}.modal-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=420px){.dashboard{border-radius:18px;padding:14px}.nav-tab{padding:6px 12px;font-size:13px}.device-grid{gap:8px}.device-card{min-height:90px;padding:10px}.modal-grid{grid-template-columns:1fr 1fr;gap:8px}}.home-tab{flex-direction:column;gap:14px;display:flex}.hero-bar{background:var(--hero-grad);border-radius:16px;align-items:center;padding:14px 18px;display:flex}.hero-left{flex:1;min-width:0}.hero-right{text-align:right;flex:none}.hero-divider{background:#ffffff26;flex-shrink:0;width:1px;height:52px;margin:0 16px}.hero-greeting{color:#fff9;margin-bottom:3px;font-size:11px;font-weight:500}.hero-time{color:#fff;font-variant-numeric:tabular-nums;font-size:clamp(18px,4vw,24px);font-weight:700;line-height:1.1}.hero-date{color:#fff9;margin-top:3px;font-size:12px}.weather-main{justify-content:flex-end;align-items:center;gap:6px;display:flex}.weather-icon{font-size:22px;line-height:1}.weather-temp{color:#fff;font-size:22px;font-weight:700}.weather-sub{color:#fff9;text-align:right;margin-top:2px;font-size:11px}.home-section-row{justify-content:space-between;align-items:center;display:flex}.home-section-label{color:var(--text-1);font-size:13px;font-weight:600}.home-section-badge{background:var(--surface);color:var(--text-2);border-radius:20px;padding:2px 9px;font-size:11px}.badge-warn{background:var(--badge-warn-bg);color:var(--badge-warn-text)}.active-scroll{scrollbar-width:none;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.active-scroll::-webkit-scrollbar{display:none}.active-chip{background:var(--accent-deep);color:#fff;white-space:nowrap;border-radius:20px;flex-shrink:0;align-items:center;gap:5px;padding:5px 11px;font-size:12px;display:flex}.no-active{color:var(--text-3);padding:5px 0;font-size:12px}.reminders-card{background:var(--surface-deep);border-radius:16px;flex-direction:column;gap:10px;padding:14px;display:flex}.reminders-card-header{justify-content:space-between;align-items:center;display:flex}.reminder-add-toggle{background:var(--accent-deep);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-size:16px;line-height:1;transition:background .15s,transform .15s;display:flex}.reminder-add-toggle:hover{background:var(--accent-deeper)}.reminder-add-toggle-open{background:var(--surface);transform:rotate(45deg)}.inline-form{background:var(--surface);border-radius:12px;flex-direction:column;gap:8px;padding:10px;animation:.15s fadeSlideIn;display:flex}.inline-form-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.inline-form-actions{justify-content:flex-end;gap:8px;display:flex}.inline-cancel{color:var(--text-3);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:5px 10px;font-size:13px;transition:color .15s}.inline-cancel:hover{color:var(--text-2)}.inline-save{background:var(--accent-deep);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:5px 14px;font-size:13px;font-weight:600;transition:background .15s,opacity .15s}.inline-save:hover:not(:disabled){background:var(--accent-deeper)}.inline-save:disabled{opacity:.35;cursor:not-allowed}.form-input{background:var(--input-bg);border:1.5px solid var(--input-border);color:var(--text-1);border-radius:8px;outline:none;width:100%;padding:7px 10px;font-family:inherit;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--accent)}.form-input-sm{flex:90px;width:auto;min-width:80px}.priority-pills{gap:4px;display:flex}.priority-pill{background:var(--surface-hover);cursor:pointer;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-size:13px;transition:border-color .15s,background .15s;display:flex}.priority-pill:hover{border-color:var(--p-color)}.priority-pill.priority-pill-active{border-color:var(--p-color);background:color-mix(in srgb, var(--p-color) 20%, transparent)}.reminder-scroll{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;flex-direction:column;gap:6px;max-height:190px;display:flex;overflow-y:auto}.reminder-scroll::-webkit-scrollbar{width:4px}.reminder-scroll::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:2px}.reminder-group-label{color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;padding:2px 0;font-size:10px;font-weight:600}.reminder-row{background:var(--surface);border-radius:10px;align-items:center;gap:10px;padding:9px 10px;transition:opacity .2s;display:flex}.reminder-row.reminder-done{opacity:.4}.reminder-check{border:2px solid var(--p-color,#6b7280);cursor:pointer;color:#fff;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:11px;transition:background .15s;display:flex}.reminder-check:hover,.reminder-done .reminder-check{background:var(--p-color)}.reminder-body{flex:1;min-width:0}.reminder-text{color:var(--text-1);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;display:block;overflow:hidden}.reminder-done .reminder-text{color:var(--text-3);text-decoration:line-through}.reminder-meta{color:var(--text-3);margin-top:1px;font-size:11px;display:block}.reminder-priority-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.reminder-delete{cursor:pointer;color:var(--surface-hover);background:0 0;border:none;border-radius:6px;flex-shrink:0;padding:3px;font-size:11px;transition:color .15s,background .15s}.reminder-delete:hover{color:#ef4444;background:#ef44441a}.reminder-empty{text-align:center;color:var(--text-3);padding:16px 0;font-size:13px}.home-tab-active{box-shadow:0 0 0 2px var(--accent)}