:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#17201d;--muted:#64706a;--paper:#eef2ef;--paper-strong:#fff;--moss:#237158;--moss-dark:#123f32;--clay:#b65a4b;--straw:#d9a63a;--line:#17201d24;--shadow:0 10px 28px #17201d14;--radius-lg:8px;--radius-md:8px;--radius-sm:6px;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(#f7f9f8 0%,#e8eeeb 100%);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button:disabled,input:disabled{cursor:wait;opacity:.62}.shell{width:min(1440px,100% - 32px);margin:0 auto;padding:32px 0 48px}.panel{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffeb}.auth-shell{place-items:center;min-height:100vh;padding:24px;display:grid}.auth-card{gap:28px;width:min(100%,460px);padding:clamp(28px,6vw,46px);display:grid}.auth-card h1{font-size:2.6rem}.auth-form{gap:14px;display:grid}.auth-form label{gap:8px;display:grid}.auth-form span{color:var(--muted);letter-spacing:0;text-transform:uppercase;font-size:.78rem;font-weight:800}.auth-form button{min-height:50px;margin-top:4px}.auth-error{border-radius:var(--radius-sm);color:#873d27;background:#ffebded1;border:1px solid #c86f4f5c;margin:0;padding:12px 14px;font-weight:800}.hero{background:linear-gradient(#fffffff5,#f9fbfaf0);grid-template-columns:minmax(0,1fr) minmax(220px,auto);align-items:center;gap:16px;min-height:auto;padding:20px 24px;display:grid;position:relative;overflow:visible}.hero:after{content:"";background:repeating-linear-gradient(45deg,#4f6f521c 0 10px,#0000 10px 20px);border-radius:8px;width:28rem;height:28rem;display:none;position:absolute;inset:auto -9rem -12rem auto;transform:rotate(-8deg)}.eyebrow{color:var(--moss-dark);letter-spacing:0;text-transform:uppercase;margin:0 0 8px;font-size:.75rem;font-weight:800}h1,h2{margin:0;font-family:inherit;font-weight:700;line-height:1.12}h1{letter-spacing:0;max-width:none;font-size:2.35rem}h2{letter-spacing:0;font-size:1.35rem}.hero-copy{max-width:780px;color:var(--muted);margin:8px 0 0;font-size:1rem;line-height:1.45}.status-card{z-index:1;background:var(--ink);min-width:250px;color:var(--paper-strong);border-radius:8px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;padding:14px;display:grid;position:relative}.status-card strong{letter-spacing:0;margin-top:0;font-size:1.45rem}.status-card small{color:#fffaf0b3;grid-column:2}.status-logout{width:100%;min-height:36px;color:var(--paper-strong);background:#fffaf014;border:1px solid #fffaf038;grid-column:1/-1;margin-top:10px}.main-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;padding:8px;display:grid}.main-nav button{border:1px solid var(--line);min-height:52px;color:var(--ink);text-align:center;background:#ffffff73;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;justify-content:center;align-items:center;gap:10px;display:grid}.main-nav button.active{background:var(--ink);color:var(--paper-strong);border-color:#0000}.main-nav span{text-align:center;min-width:0;font-weight:900}.main-nav b{background:#fff3;border-radius:6px;padding:6px 10px}.pulse{background:#87d78d;border-radius:999px;width:18px;height:18px;animation:1.8s infinite breathe;box-shadow:0 0 #87d78da6}.pulse.off{background:var(--clay);box-shadow:none;animation:none}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px;display:grid}.stat{padding:16px}.stat span{color:var(--muted);text-transform:uppercase;letter-spacing:0;font-size:.88rem;font-weight:700;display:block}.stat strong{letter-spacing:0;margin-top:8px;font-size:2.25rem;line-height:1;display:block}.workspace{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:12px;margin-top:12px;display:grid}.rooms{padding:16px;position:sticky;top:18px}.content-column{gap:12px;display:grid}.section-head,.section-toolbar,.device-topline,.device-footer,.room-edit-row,.slider-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.section-head h2{font-size:1.35rem}.section-toolbar{padding:16px}.section-toolbar p{max-width:680px;color:var(--muted);margin:10px 0 0;line-height:1.5}.section-toolbar span{color:var(--muted);font-weight:800}.view-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px;display:grid}.view-tabs button{border:1px solid var(--line);color:var(--ink);background:#ffffff6b;border-radius:8px}.view-tabs button.active{background:var(--ink);color:var(--paper-strong);border-color:#0000}.room-form{grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:22px 0;display:grid}input,select{border:1px solid var(--line);border-radius:var(--radius-sm);width:100%;min-height:40px;color:var(--ink);background:#ffffff9e;outline:none;padding:0 14px}input:focus,select:focus{border-color:#4f6f528c;box-shadow:0 0 0 4px #4f6f521f}button{background:var(--moss);color:#fff;text-align:center;border:0;border-radius:8px;justify-content:center;align-items:center;min-height:40px;padding:0 14px;font-weight:800;line-height:1.15;transition:transform .18s,box-shadow .18s,background .18s;display:inline-flex}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px #2f4a382e}button.ghost{border:1px solid var(--line);color:var(--ink);background:#ffffff94}.room-list{gap:8px;display:grid}.room-list button{width:100%;min-height:50px;color:var(--ink);text-align:center;background:#ffffff6b;border:1px solid #0000;grid-template-columns:minmax(0,1fr) auto;justify-content:center;align-items:center;gap:10px;display:grid}.room-list button.active{background:var(--moss-dark);color:var(--paper-strong);border-color:#4f6f5259}.room-actions{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}.notification-box{border-top:1px solid var(--line);gap:10px;margin-top:24px;padding-top:18px;display:grid}.notification-box h2{font-size:1.35rem}.notification-box p,.notification-box small{color:var(--muted);margin:0;font-weight:800}.notification-box small{color:var(--moss-dark)}.room-actions p{color:var(--muted);letter-spacing:0;text-transform:uppercase;margin:0 0 12px;font-size:.8rem;font-weight:800}.room-edit-row{margin-top:8px}.room-edit-row span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.room-edit-row button{min-height:34px;padding:0 12px;font-size:.82rem}.devices{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.camera-setup{gap:16px;padding:16px;display:grid}.camera-setup p{max-width:760px;color:var(--muted);margin:12px 0 0;line-height:1.55}.camera-form{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.camera-form button{min-height:40px}.media-settings{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:end;gap:10px;padding-top:16px;display:grid}.media-settings label{gap:8px;display:grid}.media-settings span{color:var(--muted);letter-spacing:0;text-transform:uppercase;font-size:.78rem;font-weight:800}.cameras-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.archive-grid{gap:12px;display:grid}.automation-builder{gap:16px;padding:16px;display:grid}.automation-builder small,.automation-builder-head span{color:var(--moss-dark);font-weight:900}.automation-builder-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.automation-form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;display:grid}.automation-form label{gap:8px;display:grid}.automation-form span{color:var(--muted);letter-spacing:0;text-transform:uppercase;font-size:.78rem;font-weight:800}.automation-form .wide-field{grid-column:span 2}.inline-check{grid-template-columns:auto minmax(0,1fr);align-items:center;min-height:40px}.inline-check input{width:18px;min-height:18px;accent-color:var(--moss)}.automations-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.automation-card{gap:14px;padding:16px;animation:.36s both cardIn;display:grid}.automation-main{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;display:grid}.automation-main h2{overflow-wrap:anywhere}.automation-main p{color:var(--muted);margin:10px 0 0;font-size:1rem;font-weight:800}.automation-toggle{width:72px;height:72px}.automation-actions{flex-wrap:wrap;gap:8px;display:flex}.automation-actions span{border:1px solid var(--line);color:var(--moss-dark);background:#ffffff7a;border-radius:6px;padding:8px 10px;font-size:.86rem;font-weight:900}.error,.empty{grid-column:1/-1;padding:28px}.error{color:#873d27;background:#ffebded1;border-color:#c86f4f5c;font-weight:800}.empty p{color:var(--muted);margin-bottom:0}.device-card{gap:14px;padding:16px;animation:.36s both cardIn;display:grid}.camera-card{gap:12px;padding:16px;animation:.36s both cardIn;display:grid;overflow:hidden}.camera-card.disabled{filter:saturate(.7)}.camera-frame{background:linear-gradient(135deg,#1d211bdb,#4f6f52c7),repeating-linear-gradient(45deg,#ffffff14 0 12px,#0000 12px 24px);border-radius:8px;min-height:260px;position:relative;overflow:hidden}.camera-frame img,.camera-player{object-fit:cover;border:0;width:100%;height:100%;min-height:260px;display:block}.camera-off{color:#fffaf0c7;place-items:center;min-height:260px;font-weight:900;display:grid}.camera-badge{max-width:calc(100% - 28px);color:var(--paper-strong);text-overflow:ellipsis;white-space:nowrap;background:#1d211bb8;border-radius:6px;padding:8px 12px;font-size:.82rem;font-weight:900;position:absolute;bottom:14px;left:14px;overflow:hidden}.camera-main{grid-template-columns:minmax(0,1fr) repeat(5,auto);align-items:center;gap:10px;display:grid}.camera-main p{color:var(--muted);margin:10px 0 0;font-weight:800}.recording-line{color:var(--moss-dark);margin:-4px 0 0;font-size:.88rem;font-weight:900;line-height:1.4}.live-camera-panel{gap:16px;padding:16px;display:grid}.live-camera-panel.disabled{filter:saturate(.75)}.live-camera-toolbar{grid-template-columns:minmax(0,1fr) minmax(280px,520px);align-items:end;gap:16px;display:grid}.live-camera-actions{grid-template-columns:minmax(220px,1fr) auto;align-items:end;gap:10px;display:grid}.camera-select{gap:6px;display:grid}.camera-select span{color:var(--muted);letter-spacing:0;text-transform:uppercase;font-size:.78rem;font-weight:800}.live-camera-frame{aspect-ratio:16/9;min-height:420px}.live-camera-frame .camera-player,.live-camera-frame .camera-off{min-height:420px}.action-link{background:var(--clay);color:#fff;border-radius:8px;justify-content:center;align-items:center;min-height:46px;padding:0 18px;font-weight:900;text-decoration:none;transition:transform .18s,box-shadow .18s;display:inline-flex}.action-link:hover{transform:translateY(-1px);box-shadow:0 12px 24px #c86f4f38}.action-link.secondary{border:1px solid var(--line);color:var(--ink);background:#ffffff7a}.action-link.secondary:hover{box-shadow:0 12px 24px #2f4a381f}.device-topline{color:var(--muted);letter-spacing:0;text-transform:uppercase;font-size:.82rem;font-weight:800}.device-type,.room-pill{border:1px solid var(--line);background:#ffffff80;border-radius:6px;padding:8px 10px}.room-pill{color:var(--moss-dark);text-transform:none;letter-spacing:0}.device-main{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;display:grid}.device-main h2{overflow-wrap:anywhere}.device-main p{color:var(--muted);margin:10px 0 0;font-size:1.1rem;font-weight:800}.power{width:82px;height:82px;color:var(--ink);background:#d9d0bd;border-radius:8px;font-size:1.05rem}.power.on{background:var(--straw);color:#4a3311;box-shadow:0 18px 34px #e5c46f59}.slider-row{color:var(--muted);grid-template-columns:auto minmax(0,1fr) 48px;font-weight:800;display:grid}input[type=range]{min-height:auto;accent-color:var(--moss)}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;display:grid}.metrics div{background:#ffffff7a;border-radius:8px;min-width:0;padding:12px}.metrics dt{color:var(--muted);letter-spacing:0;text-transform:uppercase;font-size:.74rem;font-weight:800}.metrics dd{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;margin:6px 0 0;font-weight:800;overflow:hidden}.notify-row{flex-wrap:wrap;gap:8px;padding-top:2px;display:flex}button.notify-chip{border:1px solid var(--line);min-height:34px;color:var(--ink);background:#ffffff7a;border-radius:8px;padding:0 12px;font-size:.82rem}button.notify-chip.active{background:var(--moss-dark);color:var(--paper-strong);border-color:#4f6f5257}.archive-panel{border:1px solid var(--line);background:linear-gradient(135deg,#ffffff80,#e5c46f29),#ffffff57;border-radius:8px;gap:12px;padding:14px;display:grid}.archive-card{gap:14px;padding:16px;display:grid}.archive-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.archive-head div{gap:4px;display:grid}.archive-head strong{letter-spacing:0;text-transform:uppercase;font-size:.9rem}.archive-head small,.archive-message{color:var(--muted);font-weight:800}.archive-head button{min-height:34px;padding:0 12px;font-size:.82rem}.archive-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.archive-player{background:var(--ink);border-radius:8px;width:100%;max-height:320px}.archive-player-large{max-height:560px}.archive-message{margin:0;line-height:1.45}.clip-list{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;display:grid}.clip-list button{border:1px solid var(--line);min-height:54px;color:var(--ink);text-align:center;background:#ffffff85;border-radius:8px;place-items:center;gap:4px;padding:8px 10px;display:grid}.clip-list button.active{background:var(--moss-dark);color:var(--paper-strong);border-color:#4f6f525c}.clip-list small{color:inherit;opacity:.7;font-size:.74rem;font-weight:800}.archive-clip-list{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.device-footer{align-items:stretch}.camera-controls{flex-wrap:wrap}.camera-controls button,.camera-controls .ghost{flex:auto}.ghost.danger{color:#873d27;border-color:#c86f4f5c}.device-footer select{max-width:230px}@keyframes breathe{70%{box-shadow:0 0 0 14px #87d78d00}to{box-shadow:0 0 #87d78d00}}@keyframes cardIn{0%{opacity:0;transform:translateY(10px)scale(.98)}}@media (width<=1080px){.hero,.workspace{grid-template-columns:1fr}.rooms{position:static}}@media (width<=760px){.shell{width:min(100% - 20px,1440px);padding-top:10px}.hero{padding:16px}h1{font-size:1.8rem}.stats-grid,.devices,.cameras-grid,.archive-grid,.automations-grid,.main-nav{grid-template-columns:1fr}.status-card{min-width:0}.room-form,.camera-form,.media-settings,.automation-form,.live-camera-toolbar,.live-camera-actions,.device-main,.automation-main,.camera-main,.device-footer,.metrics,.archive-head{grid-template-columns:1fr}.live-camera-actions button{width:100%}.live-camera-frame{aspect-ratio:4/3;min-height:240px}.live-camera-frame .camera-player,.live-camera-frame .camera-off{min-height:240px}.archive-head,.automation-builder-head{display:grid}.automation-form .wide-field{grid-column:auto}.device-footer select{max-width:none}}