/* Tesla-inspired visual system: restrained monochrome, precise type, generous space. */
:root{--bg:#fff;--paper:#fff;--ink:#171a20;--muted:#6c6f73;--line:#e9eaec;--accent:#e82127;--accent-light:#fff1f1;--nav:#fff;--green:#5e7d70;--shadow:none;--radius:4px;font-family:"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif}
body{background:#fff;color:#171a20;font-size:14px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#8d929a80}input,select{border-radius:4px;background:#f4f4f4;border-color:transparent;padding:11px 15px}input:focus{border-color:#5c5e62}.button{border-radius:4px;font-size:12px;letter-spacing:.4px;border-color:#d0d1d2;box-shadow:none}.button.primary{background:#171a20;border-color:#171a20}.button.primary:hover{background:#393c41}.icon-button{border-radius:4px;border:0;background:#f4f4f4}.icon-button:hover{background:#e8e8e8}.app-shell{display:block}.sidebar{position:relative;inset:auto;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:48px auto;align-items:center;padding:13px 48px 0;gap:8px 20px;background:#fff;color:#171a20;border-bottom:1px solid #eee;box-shadow:none;transform:none}.brand{grid-column:1;grid-row:1;margin:0;gap:19px;color:#171a20;justify-self:start}.brand-mark{width:auto;height:auto;display:block;border:0;border-radius:0;color:#171a20;font-size:19px;font-weight:650;letter-spacing:6px;line-height:1}.brand-caption{font-size:9px;font-weight:500;letter-spacing:2px;border-left:1px solid #d8d9da;padding-left:17px;color:#5c5e62}.brand small{font-size:9px;color:#888b8e;letter-spacing:1px;margin-top:4px}.sidebar-label{display:none}.vehicle-select-wrap{grid-row:1;grid-column:3;justify-self:end;width:180px;margin:0;border:0;border-radius:4px;background:#f4f4f4;padding-left:10px}.vehicle-icon{color:#7c7e80;font-size:20px}.vehicle-select-wrap select{color:#393c41;font-size:11px;padding:8px;background:transparent}.vehicle-select-wrap option{color:#171a20}.sidebar nav{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 0 11px;overflow-x:auto}.sidebar nav a{font-size:12px;font-weight:500;padding:8px 16px;border-radius:4px;white-space:nowrap;color:#5c5e62;gap:7px;letter-spacing:.3px}.sidebar nav a:hover,.sidebar nav a.active{background:#f0f0f0;color:#171a20}.sidebar .nav-icon{display:none}.nav-count{background:transparent;color:#a2a4a7;font-size:9px;margin:0;padding:0}.sidebar nav a.active .nav-count{color:#5c5e62}.sidebar-footer{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;gap:20px;padding:0;margin:0;white-space:nowrap;font-size:10px}.source-status{color:#74777b;font-size:10px}.sidebar-footer p{display:none}.sidebar-footer a{border:0;padding:0;gap:6px;color:#5c5e62;font-size:10px}.sidebar-footer button{padding:0;color:#888b8e;font-size:10px}.status-dot{height:5px;width:5px;background:#6a8b79;box-shadow:none}main{grid-column:auto}.topbar{height:44px;background:#fafafa;border-bottom:0;padding:0 48px}.breadcrumb{font-size:10px;color:#a1a3a5;gap:11px}.breadcrumb strong{color:#5c5e62;font-weight:400}.topbar-actions{gap:8px}.topbar .icon-button{background:transparent;font-size:22px;color:#5c5e62}.refresh-status{color:#888b8e;font-size:9px}.avatar{display:none}.page-content{max-width:1530px;padding:40px 48px 0}.page-heading{margin-bottom:33px;align-items:center}.page-heading .eyebrow{color:#909397;font-size:9px;font-weight:500;letter-spacing:2.6px}.page-heading h1{font-size:36px;line-height:1.25;font-weight:550;letter-spacing:-1px;margin:10px 0 11px}.page-heading p{font-size:12px;color:#777a7e;letter-spacing:.2px}.date-filter select{background:#f4f4f4;border:0;box-shadow:none;border-radius:4px;font-size:11px;padding:11px 15px;min-width:136px}.date-filter input{border-radius:4px;background:#f4f4f4}.panel{border-radius:4px;border-color:#ebebeb;box-shadow:none}.panel-head{padding:24px 26px 0}.panel-head h2{font-size:14px;color:#25282c;font-weight:550;letter-spacing:.2px}.panel-head p{font-size:10px;color:#989a9d}.panel-link{font-size:10px;color:#777a7e}.hero-grid{grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:25px;margin-bottom:25px}.vehicle-hero{min-height:310px;background:linear-gradient(130deg,#eeeef0 0%,#f6f6f7 58%,#e9eaec 100%);border-radius:4px;padding:28px 32px;color:#171a20}.vehicle-hero:before{display:none}.hero-meta .eyebrow{color:#888b8e;font-size:8px;letter-spacing:2px;font-weight:400}.state-badge{font-size:9px;border-radius:3px;background:#dfe7e1;color:#5c7164;padding:3px 8px}.state-badge.offline{background:#e5e5e7;color:#7c7e82}.hero-title{font-size:39px;letter-spacing:-1.3px;font-weight:500;margin-top:14px}.hero-subtitle{color:#84878a;font-size:10px;max-width:50%}.car-illustration{width:65%;top:55px;right:2%;filter:grayscale(1);opacity:1}.hero-bottom{bottom:25px;left:32px;right:32px}.hero-bottom-label{color:#7d8084;font-size:9px;margin-bottom:5px}.battery-reading{gap:12px}.battery-reading strong{font-size:36px;letter-spacing:-1.2px;font-weight:500}.battery-reading strong small{color:#5c5e62;font-size:13px}.battery-icon{border-color:#7b8085;width:28px;height:13px}.battery-icon:after{background:#7b8085}.battery-icon span{background:#5c6569}.hero-range{color:#5c5e62;font-size:10px}.hero-range strong{color:#171a20;font-size:27px;font-weight:450;letter-spacing:-.7px}.latest-panel{background:#fff;border:0;padding:26px 21px 20px 27px;border-left:1px solid #ededed;border-radius:0}.latest-title{margin-bottom:22px}.latest-title h2{font-size:12px;font-weight:500;letter-spacing:.3px}.live-label{font-size:8px;color:#95989a}.latest-metrics{gap:23px 20px}.metric-name{font-size:10px;color:#929497}.metric-value{font-size:29px;letter-spacing:-.9px;font-weight:450;color:#24272b;margin-top:5px;line-height:1.4}.metric-value small{color:#9a9c9f;font-size:10px;margin-left:5px}.latest-time{font-size:9px;border-color:#eee;padding-top:15px;color:#9b9da0}.latest-time a{color:#64676b}.stat-grid{gap:0;background:#fafafa;border-radius:4px;margin-bottom:30px;padding:6px 0}.stat-card{background:transparent;border:0;border-right:1px solid #e7e7e7;border-radius:0;padding:20px 28px;margin:10px 0}.stat-card:last-child{border-right:0}.stat-top{font-size:11px;color:#797c80}.stat-symbol,.stat-card:nth-child(n) .stat-symbol{background:transparent;color:#a1a4a8;border-radius:0;width:20px;height:20px}.stat-symbol svg{stroke-width:1.25}.stat-number{font-size:32px;line-height:1.25;font-weight:500;letter-spacing:-1px;margin:13px 0 8px;color:#24272b}.stat-number small{font-size:10px;font-weight:400;color:#9b9da0;margin-left:6px}.stat-note{font-size:9px;color:#9fa1a4}.chart-grid{gap:25px;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);margin-bottom:25px}.chart-panel{min-height:310px}.chart-tabs{background:#f4f4f4;border-radius:4px;padding:3px;gap:1px}.chart-tabs button{border-radius:3px;color:#8a8d90;font-size:9px;padding:5px 9px}.chart-tabs button.active{color:#171a20;box-shadow:none;background:#fff}.line-chart text{fill:#9b9da0}.line-chart .grid-line{stroke:#eee;stroke-dasharray:none}.legend-dot{background:#e82127}.chart-caption{font-size:9px;color:#a0a2a5;padding:0 25px 20px}.record-composition{padding:22px 26px}.composition-total strong{font-size:36px;font-weight:450;letter-spacing:-1.3px}.composition-total span{font-size:9px;color:#9b9da0}.composition-bar{height:5px;border-radius:0;gap:2px;margin:20px 0 22px;background:#f4f4f4}.composition-bar span{border-radius:0}.composition-list{gap:13px}.composition-item{font-size:10px;color:#8f9295}.composition-item strong{color:#55595e}.composition-item i{border-radius:0;width:5px;height:5px}.recent-grid{gap:25px}.recent-icon{border-radius:4px;background:#f4f4f4;color:#8b8f94}.recent-list{padding:10px 25px 20px}.recent-row{padding:16px 0;border-color:#efefef}.recent-main{color:#43464b}.recent-sub,.recent-value p{color:#9a9da0}.empty-state{padding:39px 20px;min-height:200px}.empty-state .empty-icon{border-radius:0;background:transparent;color:#b3b5b8;margin-bottom:4px}.empty-state h3{font-size:12px;font-weight:400;color:#777c81}.empty-state p{font-size:10px;color:#a0a3a6}.record-header{padding:23px 25px}.record-header h2{font-size:14px;font-weight:500}.record-header p{font-size:10px;color:#92969a}.search-input{background:#f4f4f4;border:0;border-radius:4px;padding:10px 13px;width:220px}.table-actions .button{border:0;background:#f4f4f4;font-size:11px}.table-actions .button:hover{background:#e9e9e9}thead{background:#fafafa;color:#989b9f}th{font-size:10px;font-weight:400;padding:14px 21px}td{color:#5c6066;border-color:#f0f0f0;padding:18px 21px;font-size:11px}tbody tr:hover{background:#fafafa}td .cell-primary{color:#30343a;font-weight:400}.row-index{color:#b1b3b6}.table-tag{border-radius:3px;background:#edf0ee;color:#6f8176;font-size:9px}.table-tag.gray{background:#f1f1f1;color:#94979b}.table-footer{font-size:10px;padding:18px 24px;color:#999ca0}.pagination button,.pagination select{border-radius:3px}.pagination button{color:#777c82}.summary-pill{border:0;background:#f4f4f4;border-radius:4px;padding:10px 15px;color:#8e9297;font-size:11px}.summary-pill strong{font-size:14px;font-weight:500;color:#393d43;margin-left:4px}.record-guide{background:#f5f5f5;border:0;border-radius:4px;color:#81858a;font-size:11px;padding:17px 21px}.route-chart{background:#f7f7f7;border-radius:2px}.route-chart .map-grid{stroke:#e8e8e8}.route-chart text{fill:#8a8d92}.route-note{color:#a0a3a7}.detail-dialog,dialog{border:0;border-radius:6px;box-shadow:0 25px 100px #0003;background:#fafafa}.dialog-heading{padding:27px 30px}.dialog-heading h2{font-size:24px;font-weight:450;letter-spacing:-.5px}.dialog-heading .eyebrow{color:#93969a;font-weight:400}.detail-overview{gap:1px;background:#eee;border-radius:4px;overflow:hidden}.detail-metric{border:0;border-radius:0;padding:19px 21px}.detail-metric .metric-value{font-size:27px}.detail-section-title{font-size:12px;font-weight:500;letter-spacing:.3px}.detail-grid{border:0;border-radius:4px;padding:10px 24px}.detail-field{padding:14px 0;font-size:11px}.detail-field dt{color:#999da1}.detail-field dd{color:#4c5259}.toast{background:#24272b;border-radius:4px;font-size:12px}.notice{border-radius:4px}.notice.error{color:#b83439;background:#fff4f4;border-color:#f1d3d4}.loading-panel{border-radius:4px;border:0;background:#fafafa;color:#969a9e}.page-footer{padding:32px 0 25px;font-size:9px;letter-spacing:.3px;color:#a6a8ab}.login-screen{background:#fff;grid-template-columns:1.15fr 1fr}.login-art{background:linear-gradient(140deg,#efefef,#fafafa 62%,#e6e7e8);padding:45px 60px;color:#171a20}.wordmark{font-size:21px;letter-spacing:7px;font-weight:550;color:#171a20}.wordmark span{color:#8e9297;letter-spacing:3px;font-size:9px}.login-copy .eyebrow{color:#94979c;font-size:9px;letter-spacing:2.5px}.login-copy h1{font-size:59px;line-height:1.38;letter-spacing:-2px;font-weight:450;margin:25px 0}.login-copy p{color:#95999e;font-size:12px}.login-note{font-size:9px;letter-spacing:2px;color:#a4a7ab}.orbit{border-color:#171a2007}.login-form-wrap{background:#fff;padding:60px}.login-badge{font-size:23px;font-weight:500;letter-spacing:3px;color:#171a20;margin-bottom:55px}.login-badge span{font-size:10px;font-weight:400;letter-spacing:2px;color:#9a9da1}.login-form-wrap h2{font-size:27px;letter-spacing:-.7px;font-weight:450;margin:13px 0}.login-form-wrap label{font-size:11px;font-weight:400;color:#72777d;margin-top:20px}.login-form-wrap input{background:#f4f4f4;border:1px solid transparent;padding:13px 15px;border-radius:4px}.login-form-wrap input:focus{border-color:#7b8189}.login-submit{font-size:12px;font-weight:400;letter-spacing:1px;padding:13px 16px;margin:18px 0 22px}.error-text{color:#e82127}.mobile-only{display:none}
@media(min-width:1600px){.page-content{padding-top:45px}.vehicle-hero{min-height:340px}.hero-title{font-size:44px}.car-illustration{width:64%;top:55px}.hero-bottom{bottom:30px}.latest-metrics{gap:30px}.metric-value{font-size:32px}.stat-card{padding:23px 31px}.chart-wrap{min-height:240px}}
@media(max-width:1200px){.sidebar{width:100%;padding-left:28px;padding-right:28px;grid-template-columns:1fr 1fr 1fr}.sidebar nav a{padding:8px 12px;font-size:11px}.brand-mark{font-size:17px;letter-spacing:5px}.brand-caption{font-size:8px;letter-spacing:1.5px;padding-left:12px}.brand{gap:13px}.sidebar-footer{gap:12px}.source-status{display:none}.topbar{padding:0 28px}.page-content{padding:32px 28px 0}.hero-grid,.chart-grid{grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr);gap:19px}.vehicle-hero{min-height:292px;padding:26px}.hero-title{font-size:34px}.hero-bottom{left:26px;right:26px}.car-illustration{width:64%;top:69px;right:0}.latest-panel{padding-left:21px}.metric-value{font-size:25px}.stat-card{padding:18px 23px}.stat-number{font-size:29px}.page-heading h1{font-size:32px}.chart-tabs button{padding:5px 7px}.panel-head{padding:22px 22px 0}.recent-grid{gap:19px}}
@media(max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.6fr) minmax(235px,1fr)}.chart-grid{grid-template-columns:1fr}.latest-metrics{grid-template-columns:1fr 1fr;gap:22px 15px}.latest-title{margin-bottom:22px;flex-wrap:wrap;gap:6px}.latest-time{margin-top:auto}.car-illustration{width:69%;top:91px;right:-7px}.hero-title{font-size:31px}.hero-range strong{font-size:24px}.battery-reading strong{font-size:32px}.hero-bottom{bottom:22px}.stat-card{padding:17px 20px}.stat-number{font-size:28px}.stat-symbol{display:none}.chart-grid>.panel:last-child .record-composition{display:grid;grid-template-columns:120px 1fr;gap:0 23px}.chart-grid>.panel:last-child .composition-bar{margin:5px 0}.composition-total{display:flex;flex-wrap:nowrap}.composition-total strong{font-size:34px}.composition-list{grid-template-columns:repeat(3,1fr);margin-top:18px;gap:14px 25px}.recent-grid{grid-template-columns:1fr 1fr}.recent-main{max-width:170px}.page-footer{font-size:8px}}
@media(max-width:760px){.sidebar{width:100%;padding:14px 18px 0;grid-template-columns:1fr 1fr;grid-template-rows:39px auto;gap:7px 12px;transform:none;box-shadow:none;position:relative}.sidebar.open{transform:none}.brand{gap:10px}.brand-mark{font-size:16px;letter-spacing:4px}.brand-caption{font-size:7px;letter-spacing:1px;padding-left:10px}.brand small{font-size:7px;margin-top:3px}.vehicle-select-wrap{grid-column:2;width:145px}.vehicle-select-wrap select{font-size:10px}.vehicle-icon{font-size:17px}.sidebar-footer{display:none}.sidebar nav{justify-content:flex-start;gap:3px;padding:7px 0 11px;scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}.sidebar nav a{font-size:11px;padding:8px 12px;flex-shrink:0}.nav-count{font-size:8px}.topbar{height:39px;padding:0 18px}.topbar .mobile-only{display:none}.breadcrumb{font-size:9px}.breadcrumb>span:first-of-type{display:inline}.breadcrumb .slash{display:inline}.refresh-status{font-size:8px}.topbar-actions{gap:3px}.page-content{padding:27px 18px 0}.page-heading{align-items:flex-start;margin-bottom:24px;gap:13px}.page-heading h1{font-size:29px;font-weight:450;margin:9px 0;letter-spacing:-.8px}.page-heading .eyebrow{font-size:7px;letter-spacing:1.4px}.page-heading p{font-size:10px;max-width:250px}.date-filter{padding-top:19px}.date-filter select{min-width:102px;font-size:10px;padding:9px 10px}.date-filter #custom-dates{top:241px;background:white;border-radius:4px;right:18px}.hero-grid{grid-template-columns:1fr;gap:0;margin-bottom:22px}.vehicle-hero{min-height:305px;padding:24px}.hero-title{font-size:35px;margin-top:12px}.hero-meta .eyebrow{font-size:8px;letter-spacing:1.4px}.hero-subtitle{max-width:55%;font-size:9px}.car-illustration{width:78%;top:83px;right:-4px}.hero-bottom{left:24px;right:24px;bottom:21px}.hero-bottom-label{font-size:9px}.battery-reading strong{font-size:33px}.hero-range strong{font-size:25px}.latest-panel{border:0;padding:24px 3px 0;gap:16px;background:white}.latest-title{margin-bottom:0;flex-wrap:nowrap}.latest-title h2{font-size:11px}.live-label{font-size:8px}.latest-metrics{grid-template-columns:repeat(4,1fr);gap:8px}.metric-name{font-size:8px}.metric-value{font-size:23px;line-height:1.3;margin-top:5px}.metric-value small{font-size:8px;display:block;margin:3px 0 0}.latest-time{margin-top:0;font-size:8px;padding-top:12px}.stat-grid{grid-template-columns:1fr 1fr;padding:0;gap:0;margin-bottom:22px;background:#f7f7f7}.stat-card{padding:19px 21px;margin:0;border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8}.stat-card:nth-child(2){border-right:0}.stat-card:nth-child(3),.stat-card:nth-child(4){border-bottom:0}.stat-number{font-size:29px;margin:11px 0 7px}.stat-number small{font-size:9px}.stat-top{font-size:10px}.stat-note{font-size:8px}.chart-grid{gap:19px;margin-bottom:19px}.panel-head{padding:21px 18px 0;gap:10px}.panel-head h2{font-size:13px;font-weight:500}.chart-tabs button{padding:5px 7px;font-size:8px}.chart-wrap{padding:13px 6px 6px}.chart-caption{padding:0 18px 18px;font-size:8px}.chart-grid>.panel:last-child .record-composition{padding:20px 18px;grid-template-columns:80px 1fr;gap:0 15px}.composition-total{flex-wrap:wrap;gap:0}.composition-total strong{font-size:31px}.composition-total span{font-size:8px}.composition-list{grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:14px}.composition-item{font-size:9px}.recent-grid{grid-template-columns:1fr;gap:19px}.recent-list{padding:8px 18px 18px}.recent-row{padding:14px 0}.recent-main{max-width:230px}.record-header{padding:18px}.record-header h2{font-size:13px}.search-input{width:calc(100% - 108px);font-size:10px}.table-actions .button{font-size:10px;padding:9px 12px}th,td{padding:14px 15px}.table-footer{padding:16px;font-size:9px}.summary-pills{gap:7px}.summary-pill{padding:9px 11px;font-size:9px}.summary-pill strong{font-size:12px}.record-guide{font-size:10px;padding:15px}.dialog-heading{padding:21px}.dialog-heading h2{font-size:21px}.detail-grid{padding:6px 17px}.detail-field{font-size:10px}.detail-metric{padding:15px}.detail-metric .metric-value{font-size:23px}.page-footer{padding:25px 0 20px;gap:5px;font-size:8px}.login-screen{display:block}.login-art{display:none}.login-form-wrap{min-height:100vh;padding:40px 30px;align-items:flex-start}.login-form-wrap form{margin:30px auto 0}.login-badge{margin-bottom:65px;font-size:24px;letter-spacing:5px}.login-form-wrap h2{font-size:27px}.login-form-wrap input{padding:14px}.login-submit{padding:14px 16px}.login-form-wrap .eyebrow{font-size:8px;letter-spacing:2px}.login-form-wrap .small{font-size:9px}.route-chart{height:220px}}
@media(max-width:390px){.brand-caption{display:none}.vehicle-select-wrap{width:135px}.hero-title{font-size:31px}.car-illustration{width:86%;right:-16px;top:95px}.latest-metrics .metric-value{font-size:20px}.page-heading h1{font-size:26px}.date-filter select{min-width:93px}.recent-main{max-width:180px}}
/* App cockpit / responsive touch layout */
:root{color-scheme:dark;--bg:#171717;--paper:#222;--ink:#f4f4f4;--muted:#a2a3a6;--line:#363636;--accent:#e82127;--nav:#171717;--radius:14px}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;font-size:15px}button,input,select,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #6aa8ff;outline-offset:4px}input,select,.date-filter select,.date-filter input{background:#303030;color:#f4f4f4;border-color:#424242;font-size:14px;min-height:44px}input::placeholder{color:#aaa}.icon-button,.button,.table-actions .button,.pagination button,.pagination select{background:#343434;color:#f0f0f0;border-color:#444;min-height:44px;min-width:44px;border-radius:8px}.button:hover,.icon-button:hover,.table-actions .button:hover{background:#454545}.button.primary{background:#3e6ae1;border-color:#3e6ae1;color:white}.button.primary:hover{background:#345bc4}.sidebar{background:#171717;color:#fff;border-color:#333;padding-top:18px}.brand-mark{color:#fff}.brand-caption,.brand small{color:#b2b2b2}.vehicle-select-wrap{background:#303030;width:210px}.vehicle-select-wrap select{color:#fff;font-size:14px}.sidebar-footer button,.sidebar-footer a{color:#bbb;font-size:12px;min-height:44px;display:flex;align-items:center}.sidebar nav a{font-size:14px;min-height:44px;color:#aaa}.sidebar nav a.active,.sidebar nav a:hover{background:#333;color:#fff}.sidebar nav a.active .nav-icon{color:white}.sidebar .nav-icon{display:inline-flex;color:inherit}.nav-count{color:#b6b6b6}.topbar{background:#171717;padding-top:5px;height:50px}.breadcrumb,.breadcrumb strong,.refresh-status,.topbar .icon-button{color:#aaa;font-size:12px}.page-content{max-width:1400px;padding-top:25px}.page-heading h1{color:#fff;font-size:30px;letter-spacing:0;font-weight:600}.page-heading p{color:#aaa;font-size:13px}.page-heading .eyebrow{display:none}.date-filter{max-width:100%}.panel{background:#222;border:1px solid #333;border-radius:14px}.hero-grid{gap:24px;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}.vehicle-hero{min-height:420px;background:radial-gradient(ellipse at 50% 55%,#353638 0%,#202122 45%,#1b1b1b 75%);border:1px solid #303030;border-radius:16px;padding:28px 30px;color:#fff}.hero-meta{justify-content:space-between}.hero-meta .eyebrow{font-size:10px;color:#aaa}.hero-title{color:#fff;font-size:36px;font-weight:600;letter-spacing:0;margin-top:14px}.hero-subtitle{color:#a4a4a4;max-width:100%;font-size:12px}.state-badge,.state-badge.offline{color:#c2c4c7;background:#ffffff0d;font-size:11px}.car-illustration{width:78%;right:9%;top:100px;filter:grayscale(1) drop-shadow(0 18px 18px #0008)}.hero-bottom{left:30px;right:30px;bottom:26px;align-items:center}.hero-bottom-label{color:#b2b2b2;font-size:12px}.battery-reading strong,.hero-range strong{color:#fff;font-size:34px}.battery-reading strong small,.hero-range{color:#aaa;font-size:14px}.battery-icon{border-color:#9ea3a3}.battery-icon span{background:#50b879}.hero-range{text-align:right}.latest-panel{padding:28px;border:1px solid #333;background:#222;border-radius:16px}.latest-title h2{color:#eee;font-size:15px}.live-label{color:#aaa;font-size:11px}.latest-metrics{grid-template-columns:1fr 1fr;gap:25px 15px;margin:15px 0 25px}.metric-name{font-size:13px;color:#aaa}.metric-value{color:#f4f4f4;font-size:29px}.metric-value small{color:#aaa;font-size:12px}.latest-time{font-size:12px;color:#aaa;border-color:#3b3b3b;flex-wrap:wrap}.latest-time a{color:#ddd}.stat-grid{background:#222;border-radius:14px;border:1px solid #333;padding:0}.stat-card{border-color:#3b3b3b;padding:20px 24px}.stat-top,.stat-note{color:#aaa;font-size:12px}.stat-number{color:#f4f4f4;font-size:32px}.stat-number small{font-size:13px;color:#aaa}.panel-head h2,.record-header h2{color:#eee;font-size:16px}.panel-head p,.record-header p,.chart-caption{color:#aaa;font-size:12px}.panel-link{color:#bbb;font-size:12px;min-height:44px;display:flex;align-items:center}.chart-tabs{background:#303030;max-width:100%;overflow-x:auto}.chart-tabs button{font-size:12px;min-height:40px;color:#bbb;padding:8px 12px}.chart-tabs button.active{background:#505050;color:white}.line-chart text{fill:#b2b2b2;font-size:11px}.line-chart .grid-line{stroke:#3c3c3c}.chart-tooltip{background:#eee;color:#171717}.composition-total strong,.composition-item strong{color:#eee}.composition-total span,.composition-item{font-size:13px;color:#aaa}.composition-item{min-height:36px}.composition-bar{background:#393939}.recent-icon{background:#333;color:#ddd;width:42px;height:42px}.recent-main{color:#eee;font-size:14px}.recent-sub,.recent-value p{font-size:12px;color:#aaa}.recent-row{border-color:#393939}.recent-value{font-size:16px}.recent-value small{font-size:12px}.empty-state h3{color:#ccc;font-size:14px}.empty-state p{color:#aaa;font-size:12px}.empty-state .empty-icon{color:#777}.record-header{border-color:#3a3a3a}.search-input{background:#303030;font-size:14px}.table-actions .button{font-size:13px}.table-footer{color:#aaa;font-size:13px}.pagination{flex-wrap:wrap}.pagination select{font-size:13px}.pagination button{font-size:20px}thead{background:#292929;color:#bbb}th{font-size:12px;border-color:#3b3b3b}td{color:#ccc;border-color:#383838;font-size:13px}td .cell-primary{color:#eee}.table-date{font-size:13px}.row-index{font-size:12px;color:#aaa}tbody tr:hover{background:#303030}.table-tag{background:#283e30;color:#a4d9b3;font-size:12px}.table-tag.gray{background:#363636;color:#ccc}.summary-pill{background:#292929;color:#aaa;font-size:13px}.summary-pill strong{color:#eee;font-size:14px}.record-guide{background:#292929;color:#bbb;font-size:13px}.route-chart{background:#292929}.route-chart .map-grid{stroke:#414141}.route-chart text{fill:#bbb}.route-note{color:#aaa;font-size:12px;gap:12px;flex-wrap:wrap}.dialog-heading{background:#222;border-color:#444}.dialog-heading h2{color:#eee}.detail-dialog,dialog{background:#171717;color:#eee;border-radius:16px;max-height:92dvh}.detail-grid,.detail-metric{background:#222}.detail-overview{background:#444}.detail-field{border-color:#383838;font-size:13px}.detail-field dt{color:#aaa;flex-shrink:1}.detail-field dd{color:#eee}.detail-field dd.null,.null{color:#888}.detail-section-title{font-size:14px}.detail-grid{gap:0 25px}.detail-samples{overflow:auto}.loading-panel{background:#222;color:#bbb}.page-footer{font-size:11px;color:#969696}.login-screen,.login-form-wrap{background:#171717}.login-art{background:radial-gradient(ellipse at 30% 40%,#36383b,#171717 75%);color:white}.wordmark,.login-copy h1,.login-badge{color:#fff}.login-copy p,.login-note,.login-desc,.login-form-wrap label{color:#aaa}.login-form-wrap input{background:#303030;color:#fff;font-size:16px;min-height:50px}.login-form-wrap h2{color:#fff}.login-submit{min-height:48px}.login-form-wrap .small{font-size:12px;color:#aaa}.mobile-dock{display:none}.toast{background:#eee;color:#171717}.notice.error{background:#432328;color:#ffd4d4;border-color:#77343c}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}.vehicle-hero{min-height:420px}.car-illustration{width:65%;right:17%;top:85px}.latest-metrics{grid-template-columns:repeat(4,1fr)}.chart-grid{grid-template-columns:1fr}.recent-grid{grid-template-columns:1fr}.sidebar-footer{display:none}.sidebar{grid-template-columns:1fr 1fr}.vehicle-select-wrap{grid-column:2}.stat-card{padding:18px}.composition-list{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
 .sidebar,.sidebar.open{position:relative;transform:none;box-shadow:none;width:100%;display:flex;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top)) 20px 8px;gap:14px;border:0}.brand-caption,.sidebar nav,.sidebar-footer,.vehicle-icon{display:none}.brand{margin:0}.brand-mark{font-size:17px;letter-spacing:4px}.vehicle-select-wrap{width:auto;max-width:55%;padding:0;background:transparent}.vehicle-select-wrap select{font-size:14px;padding:8px 0;text-align:right}.topbar{padding:0 20px;height:44px}.breadcrumb>span,.breadcrumb .slash,.breadcrumb strong,#menu-button{display:none}.topbar-actions{width:100%;justify-content:space-between}.topbar .icon-button{width:44px;height:44px}.refresh-status{font-size:12px}.page-content{padding:16px 16px calc(100px + env(safe-area-inset-bottom))}.page-heading{align-items:flex-start;flex-wrap:wrap;margin-bottom:20px;gap:12px}.page-heading>div:first-child{min-width:0;flex:1}.page-heading h1{font-size:26px;margin:0 0 6px}.page-heading p{font-size:12px;max-width:none}.date-filter{position:relative;align-items:flex-end;flex-direction:row;flex-wrap:wrap;width:100%}.date-filter select{width:100%;min-height:44px;font-size:14px;background:#262626}.date-filter #custom-dates{position:static;max-width:100%;width:100%;justify-content:flex-start;background:#242424;padding:10px;border-color:#444}.date-filter input{font-size:16px;flex:1;width:125px}.hero-grid{gap:14px}.vehicle-hero{min-height:370px;padding:22px 20px;border:0;background:radial-gradient(ellipse at 50% 55%,#333537,#1c1c1c 65%);border-radius:14px}.hero-meta .eyebrow{font-size:9px;letter-spacing:1px}.hero-title{font-size:30px;margin-top:10px}.hero-subtitle{font-size:11px;max-width:100%}.car-illustration{top:111px;right:-1%;width:102%;max-width:none}.hero-bottom{left:20px;right:20px;bottom:20px}.hero-bottom-label{font-size:11px}.battery-reading strong,.hero-range strong{font-size:30px}.hero-range{font-size:12px}.latest-panel{padding:20px;border-radius:14px}.latest-title{flex-wrap:wrap;gap:8px}.latest-title h2{font-size:14px}.latest-metrics{grid-template-columns:1fr 1fr;gap:20px;margin:6px 0 16px}.metric-name{font-size:12px}.metric-value{font-size:27px}.metric-value small{display:inline;font-size:12px;margin-left:5px}.latest-time{font-size:11px;gap:7px}.stat-grid{grid-template-columns:1fr 1fr;gap:0;margin:16px 0}.stat-card{margin:0;padding:19px 16px;border-right:1px solid #383838;border-bottom:1px solid #383838}.stat-card:nth-child(2n){border-right:0}.stat-card:nth-child(n+3){border-bottom:0}.stat-number{font-size:28px}.stat-top,.stat-note{font-size:11px}.stat-number small{font-size:11px}.panel-head{padding:20px 16px 0;gap:10px}.panel-head h2{font-size:15px}.panel-head p{font-size:11px}.chart-tabs{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.chart-tabs button{min-height:44px;font-size:11px;padding:7px 3px}.chart-wrap{padding:8px 3px;min-height:220px;touch-action:pan-y}.line-chart{height:220px}.chart-caption{font-size:10px;gap:10px;flex-wrap:wrap}.chart-grid>.panel:last-child .record-composition{display:block;padding:18px}.composition-total{display:flex;flex-wrap:nowrap}.composition-bar{margin:15px 0}.composition-list{grid-template-columns:1fr;gap:0;margin:0}.composition-item{font-size:13px;padding:8px 0;min-height:44px;border-bottom:1px solid #333}.composition-item:last-child{border:0}.recent-main{font-size:13px;max-width:150px}.recent-sub{font-size:11px}.recent-list{padding:8px 16px}.recent-row>div:nth-child(2){min-width:0}.recent-value{font-size:14px}.panel-link{font-size:12px}.summary-pills{display:grid;grid-template-columns:1fr;width:100%}.summary-pill{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;gap:8px}.summary-pill strong{font-size:13px}.record-header{padding:18px 16px;gap:14px}.table-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.search-input{width:100%;font-size:16px;min-width:0}.table-actions .button{padding:8px 10px;gap:5px;font-size:12px}.table-actions .icon{width:15px}.table-wrap:has(tr[data-record]){padding:0 12px;overflow:visible}.table-wrap:has(tr[data-record]) table,.table-wrap:has(tr[data-record]) tbody{display:block;white-space:normal}.table-wrap:has(tr[data-record]) thead{display:none}.table-wrap tr[data-record]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 18px;padding:18px 8px;border-bottom:1px solid #444;position:relative}.table-wrap tr[data-record]:active{background:#303030}.table-wrap tr[data-record] td{display:block;padding:0;border:0;font-size:13px;min-width:0;overflow-wrap:anywhere}.table-wrap tr[data-record] td:before{content:attr(data-label);display:block;color:#999;font-size:11px;margin-bottom:3px}.table-wrap tr[data-record] td:first-child{grid-column:1/-1}.table-wrap tr[data-record] td:first-child:before{display:none}.table-wrap tr[data-record] td:last-child{position:absolute;top:17px;right:10px;font-size:20px}.table-location{max-width:100%;white-space:normal}.table-date{font-size:13px}.table-footer{padding:16px;gap:14px;font-size:12px}.pagination{width:100%;justify-content:space-between;gap:4px}.pagination select{margin-left:0;font-size:12px;padding:6px}.table-tag{font-size:11px}.route-wrap{padding:0 12px 16px}.route-note{font-size:11px}.route-chart{height:210px}dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}.dialog-heading{padding:calc(16px + env(safe-area-inset-top)) 18px 16px}.dialog-heading h2{font-size:20px}.dialog-heading .eyebrow{font-size:9px}#detail-body{padding:16px 16px calc(30px + env(safe-area-inset-bottom))}.detail-grid{padding:4px 14px}.detail-field{font-size:13px;gap:15px;align-items:baseline}.detail-field dt{max-width:55%}.detail-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px}.detail-metric{min-width:0;padding:13px 9px}.detail-metric .metric-value{font-size:22px;white-space:normal}.detail-metric .metric-name{font-size:11px}.detail-metric .metric-value small{font-size:10px;display:block;margin:0}.detail-samples table{min-width:560px}.page-footer{font-size:10px;padding-bottom:5px}.mobile-dock{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);gap:0;bottom:0;left:0;right:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:40;background:#202020f5;border-top:1px solid #3b3b3b;backdrop-filter:blur(20px)}.mobile-dock>a,.mobile-dock summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:0;border-radius:8px;color:#999;font-size:11px;cursor:pointer;list-style:none}.mobile-dock>a>span,.mobile-dock summary>span{height:25px;line-height:25px;font-size:23px;font-weight:400}.mobile-dock>a.active,.mobile-dock details.active summary,.mobile-dock details[open] summary{color:#fff;background:#333}.mobile-dock summary::-webkit-details-marker{display:none}.more-sheet{position:absolute;bottom:calc(100% + 10px);right:12px;left:12px;border:1px solid #444;background:#282828;box-shadow:0 -10px 60px #0006;border-radius:18px;padding:18px}.more-sheet strong{font-size:15px;display:block;margin:2px 12px 10px}.more-sheet a{min-height:52px;padding:12px;font-size:15px;color:#eee;border-bottom:1px solid #3c3c3c;border-radius:0;display:flex;justify-content:space-between}.more-sheet button{width:100%;min-height:48px;margin-top:10px;border:0;border-radius:8px;background:#383838;color:#ddd;font-size:14px}.toast{bottom:calc(90px + env(safe-area-inset-bottom));width:max-content;max-width:90%}.login-form-wrap{min-height:100dvh;padding:calc(30px + env(safe-area-inset-top)) 26px calc(30px + env(safe-area-inset-bottom))}.login-form-wrap h2{font-size:25px}.login-form-wrap label{font-size:14px}.login-badge{margin-bottom:50px}.login-art{display:none}
}
@media(max-width:360px){.hero-title{font-size:26px}.vehicle-hero{min-height:350px}.car-illustration{top:115px}.hero-meta{gap:5px}.state-badge{font-size:10px}.hero-meta .eyebrow{font-size:8px}.hero-bottom{left:16px;right:16px}.battery-reading strong,.hero-range strong{font-size:26px}.page-content{padding-left:12px;padding-right:12px}.recent-main{max-width:115px}.table-actions{grid-template-columns:1fr}.table-actions .button{width:100%}}