:root{--bg:#070d18;--panel:#0f1828;--panel2:#131f32;--line:#22314a;--text:#f5f7fb;--muted:#91a0b7;--blue:#6ea8fe;--green:#34d399;--red:#fb7185;--amber:#f59e0b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button,input{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:248px;background:#09111f;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;gap:11px;align-items:center;margin:0 8px 35px}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#6ea8fe,#34d399);display:grid;place-items:center;color:#07101d;font-weight:900}.brand strong{display:block;font-size:17px}.brand span{display:block;font-size:11px;color:var(--muted);margin-top:2px}.nav-btn{width:100%;border:0;background:transparent;color:#9aa8bc;text-align:left;padding:12px 14px;border-radius:11px;margin:3px 0;cursor:pointer;display:flex;gap:12px;align-items:center}.nav-btn:hover,.nav-btn.active{background:#152239;color:white}.side-footer{margin-top:auto;color:#5f718d;font-size:11px;line-height:1.7;padding:10px}.main{flex:1;max-width:1450px;margin:0 auto;width:100%;padding:0 34px 50px}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:26px}.topbar h1{font-size:22px;margin:0 0 3px}.topbar p,.section-title p,.panel p{color:var(--muted);margin:0;font-size:13px}.top-actions{display:flex;gap:9px}.primary,.secondary,.danger-btn,.text-btn,.icon-btn{border:1px solid transparent;border-radius:10px;padding:10px 15px;cursor:pointer}.primary{background:#2563eb;color:white}.primary:hover{background:#3b82f6}.primary.connected{background:#059669}.secondary{background:#142036;color:#dce5f2;border-color:#263754}.secondary:hover{background:#1a2a44}.wide{width:100%;margin-top:16px}.icon-btn{background:#142036;color:white}.mobile-only{display:none}.view{display:none}.view.active{display:block}.hero-status{min-height:190px;border:1px solid;border-radius:20px;padding:28px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;transition:.25s}.hero-status.good{background:linear-gradient(120deg,rgba(16,185,129,.12),rgba(15,24,40,.8));border-color:rgba(52,211,153,.38)}.hero-status.bad{background:linear-gradient(120deg,rgba(244,63,94,.15),rgba(15,24,40,.8));border-color:rgba(251,113,133,.55);animation:pulse 1.8s infinite}.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--muted)}.hero-status h2{font-size:30px;margin:8px 0}.hero-status.good h2{color:var(--green)}.hero-status.bad h2{color:var(--red)}.hero-status p{color:var(--muted);max-width:620px}.posture-ring{--p:0%;width:125px;height:125px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) var(--p),#24324a 0);position:relative;box-shadow:inset 0 0 0 9px #0e1726}.posture-ring:after{content:"";position:absolute;inset:17px;background:#0c1524;border-radius:50%}.posture-ring span,.posture-ring small{z-index:1}.posture-ring span{font-size:23px;font-weight:800}.posture-ring small{margin-top:-43px;color:var(--muted);font-size:9px}.metrics-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}.metric,.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px}.metric{padding:17px}.metric span,.metric small{display:block;color:var(--muted);font-size:11px}.metric strong{display:block;font-size:25px;margin:9px 0 5px}.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:18px}.panel{padding:20px;margin-bottom:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel h3{margin:0 0 4px;font-size:16px}.live-dot{font-size:10px;color:var(--green);letter-spacing:.08em}.live-dot:first-letter{font-size:14px}.panel canvas{width:100%;display:block}.donut-wrap{display:flex;justify-content:center;align-items:center;gap:10px}.donut-wrap>div{text-align:left}.donut-wrap strong{font-size:25px;display:block}.donut-wrap span,.legend{color:var(--muted);font-size:11px}.legend{display:flex;justify-content:space-around;margin-top:10px}.legend span{display:flex;gap:6px;align-items:center}.legend b{color:white}.good-dot,.bad-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.good-dot{background:var(--green)}.bad-dot{background:var(--red)}.events.empty,.empty{text-align:center;color:#63738b;padding:22px}.event{display:flex;gap:12px;align-items:center;padding:11px;border-bottom:1px solid #1c2a40}.event>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800}.event.good>span{background:rgba(52,211,153,.13);color:var(--green)}.event.warning>span{background:rgba(251,113,133,.13);color:var(--red)}.event small,.history-row small{display:block;color:var(--muted);margin-top:3px;font-size:11px}.text-btn{background:transparent;color:#7ea9e8;padding:5px}.section-title{margin:8px 0 20px}.section-title h2{margin:0 0 4px}.device-grid,.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.device-grid .panel,.settings-grid .panel{margin:0}.device-icon{font-size:32px;color:var(--blue);margin-bottom:10px}.device-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:11px 0;color:var(--muted);font-size:12px}.device-row b{color:white}.panel label{display:block;color:#d9e1ed;font-size:12px;margin:15px 0}.panel label output{float:right;color:var(--blue)}input[type=text],input:not([type]),.panel input[type=url],.panel input[type=range]{width:100%;margin-top:8px}.panel input[type=url],.panel input:not([type]){background:#0a1322;color:white;border:1px solid var(--line);padding:11px;border-radius:9px;outline:0}.panel input[type=range]{accent-color:#6ea8fe}.muted{color:var(--muted);font-size:12px;line-height:1.55}.calibration-box{background:#0a1322;border:1px dashed #2a3b58;border-radius:10px;padding:14px}.calibration-box span{display:block;color:var(--muted);font-size:11px;margin-top:5px}.switch-row{display:flex!important;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}.switch-row input{display:none}.switch-row i{width:42px;height:23px;border-radius:30px;background:#263650;position:relative}.switch-row i:after{content:"";width:17px;height:17px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;transition:.2s}.switch-row input:checked+i{background:#2563eb}.switch-row input:checked+i:after{left:22px}.danger{border-color:rgba(251,113,133,.25)}.danger-btn{background:rgba(251,113,133,.1);border-color:rgba(251,113,133,.3);color:var(--red)}.history-row{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line)}.history-row>strong{font-size:20px;color:var(--green)}.insight{background:#0b1525;border-left:3px solid var(--blue);padding:16px;border-radius:9px;color:#cbd5e1;line-height:1.55;font-size:13px}.connection-help{margin-top:12px;color:var(--muted);font-size:11px;line-height:1.5}.toast{position:fixed;right:22px;bottom:22px;background:#18263c;color:white;border:1px solid #304461;border-radius:10px;padding:12px 15px;opacity:0;transform:translateY(12px);transition:.25s;pointer-events:none;z-index:20}.toast.show{opacity:1;transform:translateY(0)}@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(251,113,133,.05)}}@media(max-width:1050px){.metrics-grid{grid-template-columns:repeat(3,1fr)}.device-grid,.settings-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{position:fixed;left:-270px;top:0;bottom:0;z-index:10;transition:.2s}.sidebar.open{left:0}.main{padding:0 14px 35px}.topbar{height:74px}.mobile-only{display:block}.top-actions .secondary{display:none}.metrics-grid{grid-template-columns:repeat(2,1fr)}.device-grid,.settings-grid{grid-template-columns:1fr}.hero-status{padding:20px}.hero-status h2{font-size:22px}.posture-ring{width:95px;height:95px}.hero-status p{font-size:11px}.metric strong{font-size:20px}.panel{padding:15px}}