:root{color-scheme:dark;--bg:#0b1120;--panel:#121b2c;--line:#243249;--text:#f4f7fb;--muted:#8f9db3;--blue:#62a8ff;--green:#55d6a0;--amber:#ffbf69;--violet:#aa8cff;--shadow:0 22px 60px rgba(0,0,0,.25)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% -10%,#162947 0,transparent 38%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}.app-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px 22px;background:rgba(10,17,30,.86);border-right:1px solid rgba(255,255,255,.06);backdrop-filter:blur(20px);display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:0 9px 30px;color:var(--text);font-size:17px;font-weight:750;text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#6bb4ff,#416cff);box-shadow:0 8px 24px rgba(77,130,255,.35)}.brand-mark svg{width:19px;fill:white}.sidebar nav{display:grid;gap:6px}.nav-item{display:flex;align-items:center;gap:12px;color:#8492a8;text-decoration:none;padding:11px 13px;border-radius:11px;font-size:14px;font-weight:600;transition:.2s}.nav-item:hover,.nav-item.active{color:#fff;background:#172337}.nav-item.active{box-shadow:inset 3px 0 var(--blue)}.nav-icon{font-size:19px;width:21px;text-align:center}.sidebar-footer{margin-top:auto;padding:15px 10px 0;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#273956;color:#b9d9ff;font-size:11px;font-weight:800}.sidebar-footer strong,.sidebar-footer small{display:block;font-size:12px}.sidebar-footer small{color:var(--muted);margin-top:2px}main{width:100%;max-width:1500px;margin:0 auto;padding:32px 38px 22px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.topbar h1{font-size:25px;letter-spacing:-.03em;margin:3px 0 0}.eyebrow{margin:0;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.top-actions{display:flex;align-items:center;gap:12px}.status-pill{display:flex;align-items:center;gap:8px;padding:9px 13px;background:rgba(85,214,160,.08);border:1px solid rgba(85,214,160,.15);border-radius:99px;color:#a7e8ca;font-size:12px}.status-pill i{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}button{font:inherit}.icon-button,.menu-button{position:relative;width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);cursor:pointer}.menu-button{display:none}.notification-dot{position:absolute;right:8px;top:7px;width:5px;height:5px;border-radius:50%;background:#ff758f}.hero{min-height:164px;border-radius:22px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(115deg,rgba(38,76,128,.86),rgba(27,47,78,.72));box-shadow:var(--shadow);overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:250px;height:250px;border:45px solid rgba(255,255,255,.025);border-radius:50%;right:-20px;top:-100px}.hero h2{font-size:48px;line-height:1;margin:14px 0 8px;letter-spacing:-.06em}.hero h2 sup{font-size:20px;color:#b7c6da;margin-left:3px}.muted{color:var(--muted)}.hero .muted{font-size:13px}.weather{position:relative;z-index:1;display:flex;align-items:center;gap:15px;padding-right:25px}.weather-icon{font-size:52px;color:#dceaff;text-shadow:0 0 35px rgba(210,230,255,.35)}.weather strong,.weather small{display:block}.weather strong{font-size:25px}.weather small{color:#b8c7db;font-size:12px;margin-top:4px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:17px 0}.metric-card{display:flex;align-items:center;gap:14px;padding:18px;background:linear-gradient(145deg,rgba(24,35,54,.94),rgba(16,25,41,.94));border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.12)}.metric-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:20px}.accent-blue .metric-icon{background:rgba(98,168,255,.12);color:var(--blue)}.accent-amber .metric-icon{background:rgba(255,191,105,.12);color:var(--amber)}.accent-violet .metric-icon{background:rgba(170,140,255,.12);color:var(--violet)}.accent-green .metric-icon{background:rgba(85,214,160,.12);color:var(--green)}.metric-card small,.metric-card strong,.metric-card p{display:block}.metric-card small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.metric-card strong{font-size:18px;margin:4px 0 1px}.metric-card p{font-size:11px;color:var(--muted);margin:0}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);gap:17px}.panel{background:linear-gradient(145deg,rgba(19,29,47,.96),rgba(14,23,38,.96));border:1px solid rgba(255,255,255,.065);border-radius:18px;padding:22px;box-shadow:0 12px 30px rgba(0,0,0,.13)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:19px}.panel-heading h3{margin:5px 0 0;font-size:19px;letter-spacing:-.02em}.panel-heading h3 small{color:var(--muted);font-size:11px;font-weight:500}.segmented{display:flex;padding:3px;border-radius:9px;background:#0d1524}.segmented button{border:0;border-radius:7px;padding:6px 10px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}.segmented button.active{background:#25344c;color:#fff}.chart-wrap{position:relative;padding-left:36px}.chart-scale{position:absolute;left:0;top:2px;bottom:19px;display:flex;flex-direction:column;justify-content:space-between;color:#66758a;font-size:9px}.line-chart{width:100%;height:190px;overflow:visible}.grid-lines line{stroke:#26344a;stroke-width:1;stroke-dasharray:4 5}.area{fill:url(#chartFill)}.line{fill:none;stroke:var(--blue);stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 4px 6px rgba(71,150,255,.28))}.chart-dot{fill:#101a2b;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}.chart-labels{display:flex;justify-content:space-between;color:#66758a;font-size:9px;margin-top:5px}.energy-summary{border-top:1px solid var(--line);padding-top:15px;margin-top:14px;display:flex;gap:22px;align-items:center;font-size:11px;color:var(--muted)}.energy-summary strong{color:var(--text);margin-left:5px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}.dot.blue{background:var(--blue)}.dot.yellow{background:var(--amber)}.saving{margin-left:auto;color:var(--green)}.text-button{border:0;background:none;color:var(--blue);font-size:11px;cursor:pointer}.room-list{display:grid}.room-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px;padding:12px 0;border-top:1px solid rgba(255,255,255,.055)}.room-row:first-child{border-top:0}.room-icon{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;background:#1c2b42;color:var(--blue)}.room-icon.bedroom{color:var(--violet)}.room-icon.kitchen{color:var(--amber)}.room-icon.office{color:var(--green)}.room-row strong,.room-row small{display:block}.room-row strong{font-size:12px}.room-row small{color:var(--muted);font-size:10px;margin-top:3px}.room-value{font-size:18px}.devices-panel{grid-column:1}.device-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.device{min-height:66px;border:1px solid var(--line);background:#10192a;color:var(--text);border-radius:13px;padding:12px;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:left;cursor:pointer;transition:.2s}.device:hover{transform:translateY(-1px);border-color:#385176}.device-symbol{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#202b3d;color:#6d7b90}.device strong,.device small{display:block;font-size:11px}.device small{color:var(--muted);margin-top:3px}.switch{width:28px;height:16px;border-radius:99px;background:#303b4e;position:relative}.switch:after{content:"";position:absolute;width:11px;height:11px;top:2.5px;left:3px;background:#8894a6;border-radius:50%;transition:.2s}.device.active .switch{background:rgba(255,191,105,.35)}.device.active .switch:after{left:14px;background:var(--amber)}.device.active .device-symbol{background:rgba(255,191,105,.14);color:var(--amber)}.device.active.cool .switch{background:rgba(98,168,255,.35)}.device.active.cool .switch:after{background:var(--blue)}.device.active.cool .device-symbol{color:var(--blue);background:rgba(98,168,255,.14)}.device.active.violet .switch{background:rgba(170,140,255,.35)}.device.active.violet .switch:after{background:var(--violet)}.device.active.violet .device-symbol{color:var(--violet);background:rgba(170,140,255,.14)}.security-panel{grid-column:2}.shield{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(85,214,160,.12);color:var(--green)}.security-state{display:flex;align-items:center;gap:13px;padding:13px;background:rgba(85,214,160,.06);border-radius:12px;margin-bottom:11px}.security-state strong,.security-state small{display:block;font-size:11px}.security-state small{color:var(--muted);margin-top:3px}.pulse-ring{width:30px;height:30px;border:1px solid rgba(85,214,160,.3);border-radius:50%;display:grid;place-items:center}.pulse-ring i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(85,214,160,.09)}.sensor-row{display:flex;justify-content:space-between;padding:10px 2px;border-top:1px solid rgba(255,255,255,.055);font-size:10px;color:var(--muted)}.sensor-row strong{color:#cbd5e4}footer{display:flex;justify-content:space-between;color:#5f6d82;font-size:10px;padding:20px 4px 0}
@media(max-width:1050px){.app-shell{grid-template-columns:78px 1fr}.sidebar{padding-inline:12px}.brand span:last-child,.nav-item span:last-child,.sidebar-footer>span:last-child{display:none}.brand,.nav-item{justify-content:center}.sidebar-footer{justify-content:center}.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;z-index:20;left:0;transform:translateX(-100%);width:230px;transition:.25s}.sidebar.open{transform:none}.sidebar.open .brand span:last-child,.sidebar.open .nav-item span:last-child,.sidebar.open .sidebar-footer>span:last-child{display:block}.sidebar.open .brand,.sidebar.open .nav-item{justify-content:flex-start}main{padding:22px 16px}.menu-button{display:block}.topbar{justify-content:flex-start;gap:13px}.top-actions{margin-left:auto}.status-pill{display:none}.hero{padding:24px;min-height:150px}.weather{padding:0}.weather-icon{font-size:38px}.dashboard-grid{grid-template-columns:1fr}.devices-panel,.security-panel{grid-column:1}.energy-summary{flex-wrap:wrap}.saving{margin-left:0}.line-chart{height:160px}}
@media(max-width:480px){.quick-grid,.device-grid{grid-template-columns:1fr}.hero h2{font-size:40px}.weather small{max-width:90px}.panel{padding:18px}.chart-wrap{padding-left:28px}.chart-labels span:nth-child(even){display:none}footer{display:block;line-height:1.8}}
@media(prefers-reduced-motion:no-preference){.metric-card,.panel{animation:rise .5s both}.quick-grid article:nth-child(2){animation-delay:.05s}.quick-grid article:nth-child(3){animation-delay:.1s}.quick-grid article:nth-child(4){animation-delay:.15s}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}