@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--ink:#0a2540;--green:#168957;--pale:#f5f8f7;--line:#e3e9e7;--muted:#71807d}*{box-sizing:border-box}body{margin:0;background:#f7faf9;color:var(--ink);font:14px 'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer;border:0}aside{width:258px;min-height:100vh;position:fixed;z-index:3;display:flex;flex-direction:column;padding:25px 16px;background:#f8fbfa;border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 34px;font:800 21px Manrope}.brand small{display:block;font:700 9px 'DM Sans';letter-spacing:1.6px;color:#7a8785;margin-top:1px}.logo{width:40px;height:40px;border-radius:13px;background:var(--ink);color:#b6f1d3;display:grid;place-items:center;font-size:24px}nav{display:grid;gap:5px}nav button{background:transparent;color:#65716f;text-align:left;padding:13px 14px;border-radius:10px;font-weight:600;font-size:14px}nav button:hover,nav .active{background:#fff;color:var(--ink);box-shadow:0 3px 12px #112c2510}.icon{display:inline-block;margin-right:12px;font-size:18px;vertical-align:-2px}.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding:17px 5px 2px}.support{padding:9px;color:#65716f;font-weight:600}.export{margin-top:14px;width:100%;padding:11px;background:var(--ink);border-radius:9px;color:#fff;font-weight:700}.export .icon{margin-right:7px}.shell{margin-left:258px;min-height:100vh}header{height:70px;background:#ffffffd9;border-bottom:1px solid var(--line);backdrop-filter:blur(14px);display:flex;align-items:center;padding:0 42px;gap:18px;position:sticky;top:0;z-index:2}.search{background:#f1f5f3;border-radius:8px;width:340px;padding:8px 13px;color:#8a9694}.search input{background:transparent;border:0;outline:none;width:90%;color:var(--ink);margin-left:6px}.live{margin-left:auto;color:#687573;font-size:12px;font-weight:600}.live i,.pill i,.hero-stat p i{display:inline-block;width:7px;height:7px;background:#28c573;border-radius:50%;margin-right:6px;box-shadow:0 0 0 3px #d8f6e6}.avatar{background:#d9efea;color:#17694c;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;font-size:11px;font-weight:800}main{max-width:1460px;margin:auto;padding:43px 48px 60px}.page-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:32px}.eyebrow{letter-spacing:1.45px;color:#78908a;font-size:10px;font-weight:800}.page-head h1,.detail-head h1{font:800 34px Manrope;margin:6px 0}.page-head p,.detail-head p{margin:0;color:#70807c;font-size:15px}.soft,.filter{padding:11px 15px;border-radius:9px;background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:700}.overview{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.55fr;gap:16px}.hero-stat,.mini,.insight,.device-card,.chart,.controls,.analysis-card,.empty{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 18px #173a2b08}.hero-stat{padding:24px;min-height:173px;position:relative;overflow:hidden}.hero-stat>span,.mini span,.chart>span{color:#80908c;font-size:10px;letter-spacing:1px;font-weight:800}.hero-stat strong{font:800 44px Manrope;display:block;margin-top:2px}.hero-stat em,strong em{font-size:15px;font-style:normal;color:#8a9895;font-weight:600}.hero-stat p{color:#227a52;font-size:12px;font-weight:700;margin:2px 0}.hero-symbol{position:absolute;right:-5px;bottom:-30px;color:#c5ead7;font-size:145px;opacity:.45}.mini{padding:23px;position:relative}.mini b{display:block;font:800 23px Manrope;margin-top:9px}.mini i{position:absolute;right:20px;bottom:19px;font-size:27px;color:#a9dfc7;font-style:normal}.insight{padding:21px;background:var(--ink);color:#fff;border-color:var(--ink)}.insight span{font-size:10px;color:#93d7b4;font-weight:800}.insight h3{font:700 16px/1.42 Manrope;margin:10px 0 13px}.insight button{background:transparent;color:#a7e5c3;padding:0;font-weight:700}.section-title{margin:48px 0 18px;display:flex;justify-content:space-between;align-items:end}.section-title h2,.controls h2{font:800 21px Manrope;margin:0}.section-title p{color:#7c8b87;margin:4px 0 0}.text-button,.back{color:var(--green);font-weight:700;background:transparent}.devices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.device-card{padding:19px;transition:.2s;cursor:pointer}.device-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px #173a2b14}.featured{border-color:#acd8bf}.card-head{display:flex;justify-content:space-between;gap:8px}.card-head h3{font:800 17px Manrope;margin:4px 0}.card-head p{font-size:11px;color:#7a8985;margin:0}.pill{white-space:nowrap;font-size:10px;color:#278058;background:#ecfaf1;border-radius:12px;padding:5px 7px;height:max-content;font-weight:800}.pill.demo{background:#f2f5f4;color:#73817d}.pill.demo i{background:#a5b1ae;box-shadow:none}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0 17px}.metrics div:first-child{grid-column:span 2;background:#f4faf6}.metrics div{background:#f7f9f9;padding:9px;border-radius:8px}.metrics small{display:block;text-transform:uppercase;font-size:9px;letter-spacing:.8px;color:#84928f;font-weight:700}.metrics strong{font:700 17px Manrope}.metrics em{font-size:11px}.health{border-top:1px solid #edf1ef;padding-top:13px;font-size:11px;color:#7c8985}.health b{float:right;color:#378260}.health div,.health-score>div{height:4px;background:#e6efeb;border-radius:9px;margin-top:7px;overflow:hidden}.health i,.health-score i{display:block;background:#36b876;height:100%;border-radius:9px}.detail-link{margin-top:17px;color:var(--green);font-size:12px;font-weight:800}.detail-head{display:flex;justify-content:space-between;align-items:end;margin:21px 0 27px}.detail-head .pill{display:inline-block}.dot{color:#a7b2af;margin:0 5px}.health-score{width:190px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:11px;color:#74837f}.health-score b{float:right;color:#33845e}.range{display:flex;gap:5px;margin:0 0 20px}.range button{padding:8px 12px;background:transparent;color:#73827e;border-radius:7px;font-size:12px;font-weight:700}.range .chosen{background:#ddf3e5;color:#176b45}.charts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.chart{padding:20px;height:250px}.chart strong{font:800 26px Manrope;display:block;margin:6px 0}.chart svg{height:155px;width:100%;overflow:visible}.controls{margin-top:20px;padding:24px}.control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:19px}.control-grid label{background:#f5f9f7;border-radius:9px;padding:13px;font-weight:700;position:relative}.control-grid input[type=checkbox]{opacity:0;position:absolute}.toggle{float:right;width:32px;height:18px;border-radius:15px;background:#b8c5c1;position:relative}.toggle:before{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:2px;left:2px;transition:.2s}.control-grid input:checked+.toggle{background:#27a76a}.control-grid input:checked+.toggle:before{left:16px}.slider input{display:block;width:100%;margin-top:13px;accent-color:#259c65}.analysis{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}.analysis-hero{background:var(--ink);padding:34px;border-radius:14px;color:#fff}.analysis-hero span{color:#9be1b9;font-size:10px;font-weight:800;letter-spacing:1px}.analysis-hero h2{font:800 26px/1.2 Manrope;margin:12px 0}.analysis-hero p{color:#bfd1c9;max-width:430px}.analysis-card{padding:24px}.analysis-card b{font:800 29px Manrope;display:block;color:#218156}.analysis-card span{font:700 13px Manrope}.analysis-card p{font-size:12px;color:#76837f;line-height:1.5}.empty{text-align:center;padding:60px}.empty div{font-size:34px;color:#25a56a}.mobile-menu{display:none}@media(max-width:1150px){.overview{grid-template-columns:repeat(2,1fr)}.devices{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){aside{transform:translateX(-100%);transition:.2s}.menu-open aside{transform:none}.shell{margin:0}header{padding:0 18px}.mobile-menu{display:block;background:transparent;font-size:20px}.search{width:auto;flex:1}.live{display:none}main{padding:30px 20px}.page-head{align-items:start}.overview,.analysis{grid-template-columns:1fr}.devices,.charts,.control-grid{grid-template-columns:repeat(2,1fr)}.detail-head{display:block}.health-score{margin-top:18px}}@media(max-width:520px){.page-head h1,.detail-head h1{font-size:27px}.devices,.charts,.control-grid{grid-template-columns:1fr}.overview{grid-template-columns:1fr}.page-head{display:block}.soft,.filter{margin-top:15px}.range{overflow:auto;white-space:nowrap}}