:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,sans-serif; background:#0b0d10; color:#f5f7fa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% 0,#24364a 0,transparent 38%),#0b0d10; }
a { color:inherit; }
main { width:min(1080px,calc(100% - 32px)); margin:auto; padding:28px 0 48px; }
.site-header { display:flex; align-items:center; gap:26px; min-height:58px; margin-bottom:64px; }
.brand { margin-right:auto; color:#f8fafc; font-size:clamp(1.55rem,3.2vw,2.5rem); font-weight:850; letter-spacing:-.04em; text-decoration:none; }
.site-header nav,footer nav { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.site-header nav a,footer nav a { color:#cbd5e1; font-size:.84rem; text-decoration:none; }
.site-header nav a:hover,footer nav a:hover,.text-link:hover { color:#7dd3fc; }
h1 { max-width:850px; margin:10px 0 24px; font-size:clamp(2.8rem,7vw,5.7rem); line-height:.97; letter-spacing:-.065em; }
h2 { font-size:clamp(1.55rem,3.2vw,2.5rem); letter-spacing:-.035em; }
h3 { margin:0 0 10px; font-size:1.1rem; }
p { color:#cbd5e1; line-height:1.7; }
.eyebrow { color:#7dd3fc; font-size:.72rem; font-weight:800; letter-spacing:.18em; }
.hero { max-width:900px; padding:22px 0 76px; }
.hero>p { max-width:710px; margin:0 0 26px; font-size:1.2rem; }
.button,button { border:0; border-radius:999px; padding:12px 20px; background:#e82127; color:white; font:inherit; font-weight:750; cursor:pointer; text-decoration:none; display:inline-block; }
.button:hover,button:hover { filter:brightness(1.08); }
.hero small { display:block; margin-top:18px; color:#9ca3af; font-size:.82rem; }
.subtle { color:#cbd5e1; }
.hidden { display:none!important; }
.toolbar,.actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.tabs { display:flex; gap:10px; margin-bottom:16px; }
.data-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 12px; }
.data-tab { padding:9px 14px; font-size:.9rem; }
.vehicle-section h2 { margin-top:0; text-transform:capitalize; }
.table-scroll { overflow:auto; max-height:680px; }
.data-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.data-table th,.data-table td { padding:10px 12px; border-bottom:1px solid #303945; vertical-align:top; text-align:left; }
.data-table th { width:38%; color:#aeb8c5; font-weight:650; text-transform:capitalize; }
.data-table td { color:#f3f6f9; overflow-wrap:anywhere; }
.data-table code { white-space:normal; color:#d9e2ec; }
.empty-state { color:#aeb8c5; }
.history-heading,.history-controls { display:flex; align-items:end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.history-heading p { margin:6px 0 0; }
.history-controls { justify-content:flex-start; margin-top:18px; }
.history-metrics { grid-template-columns:repeat(4,1fr); margin-top:18px; }
.history-charts { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
.history-chart { padding:16px; background:#0f1318; border:1px solid #29313b; border-radius:14px; }
.history-chart svg { display:block; width:100%; height:auto; margin-top:10px; }
.history-chart line { stroke:#425064; stroke-width:1; }
.history-chart polyline { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.history-chart text { fill:#aeb8c5; font-size:11px; }
.energy-totals { grid-template-columns:repeat(3,1fr); margin-top:18px; }
.energy-charts { display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px; }
.energy-chart { padding:18px; background:#0f1318; border:1px solid #29313b; border-radius:14px; }
.energy-chart h3 { margin-bottom:4px; }
.energy-chart .legend { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0; color:#cbd5e1; font-size:.78rem; }
.energy-chart .legend span::before { content:""; display:inline-block; width:10px; height:3px; margin:0 5px 2px 0; background:var(--series); }
.energy-chart svg { display:block; width:100%; height:auto; }
.energy-chart .axis { stroke:#425064; stroke-width:1; }
.energy-chart .gridline { stroke:#263140; stroke-width:1; }
.energy-chart polyline { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.energy-chart text { fill:#aeb8c5; font-size:11px; }
.history-table { margin-top:18px; min-width:720px; }
.history-table th { width:auto; }
.tab.active { background:#e82127; }
.actions.compact { margin-top:0; }
.panel>.notice { margin:16px 0; }
.toolbar,.card,.metric { background:#14181e; border:1px solid #29313b; border-radius:20px; padding:20px; }
select,input { display:block; margin-top:7px; padding:10px 12px; color:white; background:#0b0d10; border:1px solid #3b4653; border-radius:9px; }
.section-title { margin:22px 0 10px; font-size:1.25rem; }
.metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 16px; }
.metric span { display:block; color:#94a3b8; font-size:.8rem; }
.metric strong { display:block; margin-top:8px; font-size:1.4rem; }
.card { margin-top:16px; }
.card h2 { margin:0; font-size:1.35rem; letter-spacing:-.02em; }
.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.actions { justify-content:flex-start; margin-top:20px; }
button.secondary { background:#334155; }
button.danger { color:#fecaca; border:1px solid #7f1d1d; }
details summary { cursor:pointer; font-size:1rem; font-weight:700; }
details[open] summary { margin-bottom:14px; }
pre { overflow:auto; max-height:420px; padding:16px; background:#090b0e; border-radius:12px; color:#bae6fd; }
.error { padding:14px; background:#4c1114; border-radius:12px; }
.content-section { margin-top:72px; padding:54px 0; border-top:1px solid #29313b; }
.content-section>h2 { max-width:760px; margin:10px 0 30px; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.feature-grid article { padding:24px; background:rgba(20,24,30,.78); border:1px solid #29313b; border-radius:18px; }
.feature-grid p { margin:0; }
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.split h2 { margin:10px 0; }
.split p:first-child { margin-top:0; }
.text-link { color:#7dd3fc; font-weight:700; }
.callout { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:32px; background:#14181e; border:1px solid #29313b; border-radius:22px; }
.callout h2 { margin:0; }
.callout p { margin-bottom:0; }
.page { max-width:860px; }
.page .eyebrow { display:block; margin-bottom:10px; }
.page h1 { font-size:clamp(2.5rem,6vw,4.7rem); }
.page h2 { margin-top:42px; }
.page h3 { margin-top:28px; }
.page li { margin:.6em 0; color:#cbd5e1; line-height:1.6; }
.notice { padding:18px 20px; background:#14181e; border:1px solid #29313b; border-left:3px solid #7dd3fc; border-radius:12px; }
footer { margin-top:72px; padding-top:28px; border-top:1px solid #29313b; color:#94a3b8; font-size:.76rem; line-height:1.5; }
footer p { color:#94a3b8; }
@media(max-width:800px){
  .site-header { align-items:flex-start; flex-wrap:wrap; margin-bottom:38px; }
  .site-header nav { order:3; width:100%; gap:14px; }
  .toolbar { align-items:stretch; flex-direction:column; }
  .actions.compact { align-items:stretch; flex-direction:column; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .history-charts { grid-template-columns:1fr; }
  .form-grid,.feature-grid { grid-template-columns:1fr 1fr; }
  .split { grid-template-columns:1fr; gap:12px; }
  .callout { align-items:flex-start; flex-direction:column; }
}
@media(max-width:520px){
  main { padding-top:18px; }
  .form-grid,.feature-grid { grid-template-columns:1fr; }
  .actions { align-items:stretch; flex-direction:column; }
  .actions button { width:100%; }
}