:root{font-family:'DM Sans',Arial,sans-serif;color:#ecf2f4;background:#101820;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 70% 45% at 80% -10%,#1d4040 0,transparent 70%),#101820}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #bdfb7a;outline-offset:3px}.topbar{height:86px;border-bottom:1px solid #2b3840;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px)}.brand{display:flex;gap:13px;align-items:center}.brand-icon{width:37px;height:37px;display:grid;place-items:center;background:#c8f68c;border-radius:11px;color:#15302a;font:700 27px 'Space Grotesk'}.brand strong{font:700 17px 'Space Grotesk';letter-spacing:-.04em;display:block}.brand small{color:#8fa1a9;font-size:11px;letter-spacing:.19em}.top-actions{display:flex;gap:20px;align-items:center}.connection{font-size:12px;color:#b2c0c3}.connection:before{content:'';display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#77868a}.connection.live:before{background:#bdfb7a;box-shadow:0 0 10px #bdfb7a}.connection.warning:before{background:#f6c872}.ghost{border:1px solid #46545b;border-radius:8px;color:#c9d4d7;background:transparent;padding:8px 11px;font-size:12px}main{max-width:1200px;margin:0 auto;padding:50px 30px 80px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;color:#a2ed80}.separator{color:#5c7677;padding:0 5px}.hero{min-height:310px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:45px 56px;background:linear-gradient(110deg,#1b3540,#183c39 70%,#2b4834);border:1px solid #40605a;border-radius:22px;box-shadow:0 28px 70px #06101560}.hero h1{font:600 clamp(34px,5vw,64px)/1.03 'Space Grotesk';letter-spacing:-.065em;margin:23px 0 19px;max-width:650px}.hero p{color:#b9c9c7;line-height:1.65;max-width:540px;margin:0}.battery-visual{width:158px;flex:none;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 15px 25px #07191590)}.battery-top{width:55px;height:11px;border-radius:7px 7px 0 0;background:#c8eabc}.battery-shell{height:181px;width:145px;border:4px solid #d0ecce;border-radius:15px;padding:9px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden}.battery-fill{position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(#c5f883,#8fd962);opacity:.9;transition:height .5s}.battery-shell span,.battery-shell small{position:relative;z-index:1;color:#e9ffde;text-shadow:0 2px 8px #0a211b}.battery-shell span{font:700 48px 'Space Grotesk';letter-spacing:-.08em}.battery-shell small{font-size:10px;font-weight:700;letter-spacing:.25em}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:22px 0 54px}.metric{background:#19252e;border:1px solid #2c3d44;border-radius:16px;padding:22px 24px;min-height:176px}.metric-head{display:flex;justify-content:space-between;align-items:center;color:#a8b8b9;font-size:10px;font-weight:700;letter-spacing:.16em}.metric-icon{color:#addd9b;font-size:22px;font-weight:400}.metric-number{font:600 41px 'Space Grotesk';letter-spacing:-.06em;margin:20px 0 4px;white-space:nowrap}.metric-number small{color:#7f9a9a;font-size:19px;letter-spacing:0;margin-left:5px}.metric-number.time{font-size:32px}.metric-number.word{font-size:29px}.metric p{color:#81999c;font-size:12px;margin:0}.history-panel{padding:31px 34px 25px;background:#19252e;border:1px solid #2c3d44;border-radius:17px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:15px}.section-heading h2{font:600 25px 'Space Grotesk';letter-spacing:-.045em;margin:8px 0 0}.range{display:flex;background:#101c24;border:1px solid #2d4145;border-radius:9px;padding:4px}.range button{background:transparent;border:0;color:#92a5a6;border-radius:6px;padding:7px 11px;font-size:11px;font-weight:700}.range button.selected{background:#3e5e53;color:#dcf4d4}.chart-wrap{height:275px;display:flex;position:relative;margin-top:32px}.chart-axis{display:flex;flex-direction:column;justify-content:space-between;color:#7d9495;font-size:11px;width:42px;flex:none;padding:0 0 4px}.chart-wrap svg{height:240px;width:calc(100% - 42px);overflow:visible}.grid-line{stroke:#30464a;stroke-width:1;stroke-dasharray:4 5;fill:none;vector-effect:non-scaling-stroke}.chart-line{fill:none;stroke:#bdfb7a;stroke-width:3;vector-effect:non-scaling-stroke}.chart-area{fill:#a4e8731d}.chart-empty{position:absolute;top:38%;left:50%;transform:translateX(-50%);text-align:center;color:#8ca5a5;font-size:13px;width:80%}.chart-footer{display:flex;justify-content:space-between;margin-left:42px;color:#768e90;font-size:11px}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.footer-grid article{border:1px solid #2c3d44;border-radius:15px;padding:25px 28px}.footer-grid h3{font:600 19px 'Space Grotesk';margin:12px 0 8px}.footer-grid p{color:#91a6a8;font-size:13px;line-height:1.6;margin:0}footer{border-top:1px solid #24343c;padding:27px 30px;color:#667f83;text-align:center;font-size:11px}footer span{margin:0 8px}.login-panel{max-width:620px;margin:80px auto 150px;padding:48px;background:#192a32;border:1px solid #3c5758;border-radius:22px}.login-panel h1{font:600 49px/1.08 'Space Grotesk';letter-spacing:-.06em;margin:20px 0}.login-panel p{color:#a3b8b9}.login-panel label{display:block;font-size:12px;font-weight:700;margin:35px 0 10px}.login-row{display:flex;gap:9px}.login-row input{min-width:0;flex:1;border-radius:9px;border:1px solid #58716d;background:#0f1d24;color:white;padding:13px}.login-row button{border:0;border-radius:9px;background:#bdfb7a;color:#163023;font-weight:700;padding:0 20px}.error{color:#f6a7a2!important;min-height:20px;font-size:12px}
@media(max-width:850px){.metrics{grid-template-columns:repeat(2,1fr)}.hero{padding:35px}.battery-visual{transform:scale(.8);margin:-15px}.hero h1{font-size:42px}}@media(max-width:600px){.topbar{height:72px;padding:0 18px}.top-actions{gap:8px}.connection{max-width:105px;line-height:1.3;font-size:10px}.brand strong{font-size:14px}main{padding:25px 16px 60px}.hero{padding:30px 25px;display:block}.hero h1{font-size:38px}.battery-visual{margin:30px auto -10px}.metrics{gap:10px;margin-bottom:35px}.metric{padding:16px;min-height:145px}.metric-number{font-size:34px}.metric-number.time,.metric-number.word{font-size:25px}.metric-head{font-size:9px}.history-panel{padding:24px 17px}.section-heading{display:block}.range{width:max-content;margin-top:18px}.footer-grid{grid-template-columns:1fr}.login-panel{margin:30px auto 80px;padding:28px}.login-panel h1{font-size:38px}}
.readings-panel{border:1px solid #2c3d44;border-radius:15px;margin-top:20px;padding:0 25px;background:#19252e}.readings-panel summary{cursor:pointer;list-style:none;padding:21px 0;font:600 15px 'Space Grotesk',Arial,sans-serif}.readings-panel summary::-webkit-details-marker{display:none}.readings-panel summary span{float:right;color:#a5d78f;font:500 11px 'DM Sans',Arial,sans-serif}.readings-list{border-top:1px solid #30434a;padding:15px 0 22px;color:#9db2b4;font-size:12px}.readings-list div{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #293b41;padding:9px 0}.readings-list strong{color:#e8f3ed;font-weight:500;text-align:right;overflow-wrap:anywhere}