/* KAI v3 — a vehicle-centered cockpit. Motion describes changes, never fake telemetry. */
:root{--bg:#090e13;--panel:#131c24;--panel-2:#1a2731;--panel-3:#22313d;--line:#293944;--gold:#e9b866;--cyan:#86dbe7;--muted:#b4c1cb;--muted-2:#92a6b4}
body{background:radial-gradient(ellipse at 80% 0,#13252f 0,transparent 45%),var(--bg);background-attachment:fixed}.desktop-rail{background:#0d151d}.mobile-header{background:#0c141bd9}.app-content{max-width:1480px}.brand-lockup span{letter-spacing:.03em}.primary-button{box-shadow:0 4px 18px #e9b86614}.primary-button svg{transition:transform .2s}.primary-button:hover svg{transform:scale(1.13)}.rail-item.active svg,.nav-item.active svg{animation:icon-settle .45s cubic-bezier(.2,.8,.2,1)}.sync-strip.syncing>div>svg{animation:sync-breathe 1.4s ease-in-out infinite}.cockpit-view{gap:22px}.cockpit-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:4px}.cockpit-heading h1{font-size:2.7rem;letter-spacing:-.05em;margin:0;font-weight:550}.cockpit-heading .eyebrow{color:var(--muted-2);font-size:.75rem}.add-charge-action{min-height:50px;border-radius:9px}.cockpit-hero{display:grid;grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:minmax(310px,auto) auto;position:relative;overflow:hidden;border:1px solid #405462;border-radius:22px;background:radial-gradient(ellipse at 40% 70%,#27445166,transparent 57%),linear-gradient(140deg,#172933 0%,#0c151d 68%);box-shadow:inset 0 1px #ffffff0d,0 20px 80px #0002}.cockpit-hero::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#91d8e166,transparent);pointer-events:none}.cockpit-car-copy{grid-column:1/3;grid-row:1;z-index:2;align-self:start;padding:28px 30px 0;pointer-events:none}.cockpit-car-copy button{pointer-events:auto}.car-model-line{display:flex;gap:12px;align-items:center;color:var(--muted-2);letter-spacing:.16em;font-size:.75rem;margin-bottom:12px}.car-model-year{color:var(--cyan);background:#86dbe711;border:1px solid #86dbe733;border-radius:4px;padding:4px 7px;font-size:.75rem;letter-spacing:.05em}.cockpit-car-copy h2{font-size:clamp(1.3rem,2.3vw,2rem);font-weight:550;letter-spacing:-.025em;max-width:460px}.cockpit-car-copy p{font-size:.8125rem;margin:7px 0 0;color:#96aebc}.cockpit-car-copy .text-action{font-size:.8125rem;color:var(--muted);margin-top:4px}.car-image-wrap{min-width:0;position:relative}.cockpit-hero>.car-image-wrap{grid-column:1/3;grid-row:1;align-self:end;padding:78px 5px 0 30px;pointer-events:none}.cockpit-car{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 24px 16px #0005);animation:car-arrive 1s cubic-bezier(.2,.8,.2,1) both}.cockpit-hero .cockpit-car{max-height:360px}.cockpit-dial{grid-column:3;grid-row:1;align-self:center;justify-self:center;width:min(100%,260px);aspect-ratio:1;position:relative;margin-top:30px;margin-right:20px}.cockpit-dial>svg{width:100%;height:100%;overflow:visible}.dial-outer{fill:none;stroke:#4d687629;stroke-width:1}.dial-tick{stroke:#425764;stroke-width:1;transition:stroke .7s}.dial-tick.lit{stroke:var(--gold)}.dial-track,.dial-fill{fill:none;stroke-width:3.5;stroke-linecap:round}.dial-track{stroke:#2c404d}.dial-fill{stroke:var(--cyan);filter:drop-shadow(0 0 4px #86dbe755);transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1)}.dial-reading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding-bottom:10px}.dial-reading>span{font-size:.75rem;letter-spacing:.13em;color:var(--muted);line-height:1.5}.dial-reading strong{font-size:3.5rem;line-height:1.1;letter-spacing:-.045em;font-weight:500;font-variant-numeric:tabular-nums}.dial-reading small{font-size:.75rem;color:var(--muted-2)}.dial-limits{position:absolute;bottom:22px;left:30px;right:27px;display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted-2)}.cockpit-instruments{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;border-top:1px solid #40566388;background:#0a141bc9;padding:20px 24px;gap:18px}.cockpit-instruments>div{display:grid;grid-template-columns:26px 1fr;column-gap:7px;row-gap:5px;align-items:center;min-width:0}.cockpit-instruments svg{grid-column:1;grid-row:1/3;color:var(--cyan)}.cockpit-instruments span{font-size:.75rem;color:var(--muted-2)}.cockpit-instruments strong{font-size:1rem;font-weight:550;letter-spacing:.01em;font-variant-numeric:tabular-nums}.cockpit-instruments>.instrument-action{display:flex;justify-content:flex-end}.instrument-action button{display:flex;align-items:center;gap:8px;background:#e9b8660c;color:var(--gold);border:1px solid #e9b86644;border-radius:8px;min-height:46px;padding:10px 14px;font-size:.8125rem;text-align:left}.instrument-action svg{color:var(--gold)}
.period-ribbon{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:4px 2px}.period-ribbon .eyebrow{font-size:.75rem;letter-spacing:.15em;color:var(--muted-2);margin-bottom:7px}.period-ribbon strong{font-size:.9375rem;font-weight:550;line-height:1.6}.period-ribbon p{font-size:.8125rem;margin:5px 0 0;color:var(--muted-2)}.period-ribbon .secondary-button{font-size:.8125rem;min-height:42px;padding:10px 16px;background:transparent}.telemetry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.telemetry-card{background:linear-gradient(145deg,#1b2b3544,transparent),var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}.telemetry-label{display:flex;align-items:center;gap:8px;font-size:.8125rem;line-height:1.5;color:var(--muted)}.telemetry-label svg{color:var(--gold)}.telemetry-card>strong{display:block;font-size:clamp(1.55rem,2.4vw,2.15rem);font-weight:550;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin:20px 0 8px;overflow-wrap:anywhere}.telemetry-card>strong small{font-size:.875rem;font-weight:400;letter-spacing:0;margin-left:6px;color:var(--muted-2)}.telemetry-card>span{display:block;font-size:.75rem;color:var(--muted-2);line-height:1.6}.telemetry-card.electric{border-color:#86dbe74d;background:linear-gradient(140deg,#86dbe711,transparent),var(--panel)}.telemetry-card.electric strong,.telemetry-card.electric svg{color:var(--cyan)}.calculation-note{font-size:.8125rem;line-height:1.7;color:var(--muted-2);margin:0}.cockpit-lower-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px}.panel.cockpit-chart,.panel.latest-charge{min-width:0}.chart-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.chart-heading .eyebrow{font-size:.75rem;margin-bottom:7px}.chart-heading h2{font-size:1.2rem}.chart-switch{display:flex;border:1px solid var(--line);padding:3px;border-radius:7px;background:#0d161d;flex-shrink:0}.chart-switch button{background:transparent;padding:8px 11px;min-height:38px;color:var(--muted-2);font-size:.75rem;border-radius:4px}.chart-switch button.active{color:var(--text);background:#2a3c49;box-shadow:0 1px 5px #0002}.chart-readout{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:26px 0 22px}.chart-readout strong{font-size:1.8rem;font-weight:550;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.chart-readout strong small{font-size:.875rem;color:var(--muted)}.chart-readout>span{font-size:.75rem;color:var(--muted-2);line-height:1.6;text-align:right;max-width:45%}.bars-scroll{overflow-x:auto;scrollbar-color:var(--line-strong) transparent}.bars-rack{display:grid;grid-template-columns:repeat(var(--bars),minmax(42px,1fr));gap:14px;background:repeating-linear-gradient(to top,transparent 0,transparent 45px,#334b5b38 45px,#334b5b38 46px);min-width:min-content;padding-top:8px}.chart-bar-button{display:flex;flex-direction:column;align-items:center;background:transparent;padding:0 2px 4px;color:var(--muted-2);min-width:42px;border-radius:5px}.bar-column{height:150px;width:100%;max-width:46px;display:flex;align-items:flex-end;position:relative}.bar-fill{width:100%;background:linear-gradient(to top,#365b6d,#78aebf);border-radius:4px 4px 0 0;display:block;transform-origin:bottom;animation:bar-rise .75s cubic-bezier(.2,.75,.2,1) both;transition:background .3s}.chart-bar-button.selected .bar-fill{background:linear-gradient(to top,#9b6932,#f0c77f);box-shadow:0 0 22px #edbd6f0c}.chart-bar-button:hover .bar-fill{filter:brightness(1.25)}.bar-month{margin-top:12px;font-size:.75rem;line-height:1.5}.chart-bar-button small{font-size:.75rem;line-height:1.5;color:#8ea2af}.chart-bar-button.selected .bar-month{color:var(--gold)}.latest-charge{display:flex;flex-direction:column}.latest-charge .section-title{margin-bottom:26px}.latest-charge .section-title .eyebrow{font-size:.75rem}.last-charge-provider{display:flex;align-items:center;gap:13px}.last-charge-provider>div{display:grid;gap:6px;min-width:0}.last-charge-provider strong{font-size:1.15rem;font-weight:550;overflow-wrap:anywhere}.last-charge-provider>div>span{font-size:.8125rem;color:var(--muted-2)}.last-charge-reading{display:flex;align-items:baseline;gap:8px;margin:24px 0 18px}.last-charge-reading strong{font-size:3rem;font-weight:450;letter-spacing:-.045em}.last-charge-reading>span{font-size:.875rem;color:var(--muted-2)}.last-charge-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:16px;margin-bottom:22px}.last-charge-footer>span{font-size:.8125rem;color:var(--muted-2)}.last-charge-footer>strong{font-size:1.1rem;font-weight:550}.latest-charge>.secondary-button{margin-top:auto;gap:8px;background:transparent}.cockpit-footnote{font-size:.75rem;color:var(--muted-2);margin:0;text-align:center}
.charge-actions{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);margin-top:18px;padding-top:8px}.edit-charge-button,.remove-charge-button{background:transparent;min-height:44px;display:flex;align-items:center;gap:8px;font-size:.8125rem;padding:8px 0}.edit-charge-button{color:var(--gold)}.remove-charge-button{margin-left:auto;color:var(--muted-2)}.remove-charge-button:hover{color:#f4b29e}.editable-charge .charge-heading{padding-right:0}.charge-form legend{color:var(--muted);font-size:.875rem;margin-bottom:9px;padding:0}.charge-form .radio-segment{margin-top:0}.period-settings{scroll-margin-top:24px}.period-settings>p{font-size:.875rem;line-height:1.75;max-width:790px;margin-bottom:24px}.period-form{display:grid;gap:22px}.period-distance-preview{display:flex;align-items:center;gap:12px;padding:17px;border:1px solid #86dbe733;border-radius:10px;background:#86dbe708;font-size:.875rem}.period-distance-preview svg{color:var(--cyan)}.period-distance-preview>span{color:var(--muted)}.period-distance-preview strong{margin-left:auto;color:var(--cyan);font-size:1.2rem;font-weight:550;font-variant-numeric:tabular-nums}.period-form .advanced-fields{background:#0d161d}.period-form .button-row{align-items:center}.garage-stage{background:radial-gradient(ellipse at 50% 50%,#31465366,transparent 65%),linear-gradient(150deg,#1b2a35,#0b131b);border:1px solid #3b515f;border-radius:20px;padding:24px;overflow:hidden}.garage-stage .car-image-wrap{max-width:850px;margin:auto}.garage-stage .cockpit-car{max-height:420px}.garage-photo-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:10px}.garage-photo-actions button{gap:8px;font-size:.8125rem}.garage-metrics,.analytics-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.calculation-method p{font-size:.875rem;line-height:1.8}.calculation-method p:last-child{margin-bottom:0}.energy-trend>svg{width:100%;height:auto;max-height:220px;overflow:visible}.trend-grid{stroke:#344c5b66;stroke-dasharray:3 5;stroke-width:1}.trend-line{fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:line-arrive 1s ease-out both}.trend-area{fill:#86dbe70c}.trend-dot{fill:var(--panel);stroke:var(--cyan);stroke-width:2}.trend-labels{display:flex;justify-content:space-between;gap:12px;color:var(--muted-2);font-size:.75rem}.provider-comparison .provider-track{height:6px}.provider-comparison .provider-track>span{transform-origin:left;animation:provider-arrive .8s ease-out both;background:linear-gradient(90deg,#3e6a7b,var(--cyan))}.charge-mix{display:grid;grid-template-columns:1fr 1fr;gap:20px}.charge-mix article{display:grid;grid-template-columns:30px 1fr;gap:10px;border:1px solid var(--line);background:var(--panel);padding:22px;border-radius:12px;align-items:center}.charge-mix article>svg{grid-row:1/3;color:var(--gold)}.charge-mix article>span{font-size:.8125rem;color:var(--muted)}.charge-mix article>strong{font-size:1.5rem;font-weight:550}.charge-mix article:nth-child(2)>svg{color:var(--cyan)}
@keyframes icon-settle{0%{transform:translateY(3px) scale(.8)}60%{transform:translateY(-2px) scale(1.08)}100%{transform:none}}@keyframes sync-breathe{50%{opacity:.5}}@keyframes car-arrive{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes bar-rise{from{transform:scaleY(0);opacity:.4}to{transform:scaleY(1);opacity:1}}@keyframes line-arrive{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes provider-arrive{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:1500px){.cockpit-hero{grid-template-rows:minmax(350px,auto) auto}.cockpit-hero .cockpit-car{max-height:380px}.cockpit-car-copy{padding:34px 36px 0}.cockpit-dial{width:285px}.telemetry-card{padding:24px}.bars-rack{gap:22px}.bar-column{height:170px}}
@media(max-width:1200px){.cockpit-hero{grid-template-columns:1fr 1fr 1.1fr;grid-template-rows:minmax(295px,auto) auto}.cockpit-car-copy h2{font-size:1.5rem}.cockpit-car-copy{padding:24px 24px 0}.cockpit-hero>.car-image-wrap{padding-left:12px;padding-top:120px}.cockpit-dial{width:210px;margin-right:12px}.dial-reading strong{font-size:3rem}.cockpit-instruments{gap:12px;padding:18px}.cockpit-instruments strong{font-size:.875rem}.instrument-action button{font-size:.75rem;padding:10px}.telemetry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.telemetry-card>strong{font-size:2rem}.cockpit-lower-grid{grid-template-columns:1fr}.bar-column{height:175px}.latest-charge{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.latest-charge>.section-title{grid-column:1/-1}.last-charge-reading{justify-self:end;margin:0}.last-charge-footer{grid-column:1/-1;margin-top:20px}.latest-charge>.secondary-button{grid-column:1/-1}.garage-metrics,.analytics-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.garage-metrics .telemetry-card>strong,.analytics-metrics .telemetry-card>strong{font-size:1.65rem}}
@media(max-width:760px){.cockpit-heading{gap:12px}.cockpit-heading h1{font-size:2rem}.cockpit-heading .eyebrow{font-size:.75rem;letter-spacing:.09em}.add-charge-action{font-size:.8125rem;min-height:46px;padding:12px 14px}.cockpit-view{gap:20px}.cockpit-hero{grid-template-columns:160px 1fr;grid-template-rows:auto auto auto;border-radius:16px}.cockpit-car-copy{grid-column:1/-1;grid-row:1;padding:20px 22px 0;position:relative}.car-model-line{font-size:.75rem;margin-bottom:9px}.cockpit-car-copy h2{font-size:1.45rem}.cockpit-car-copy p{font-size:.75rem;margin:6px 0 0}.cockpit-car-copy>.text-action{position:absolute;right:16px;top:14px;font-size:.75rem}.cockpit-hero>.car-image-wrap{grid-column:1/-1;grid-row:2;padding:0 7px;margin-top:-14px;margin-bottom:-10px}.cockpit-hero .cockpit-car{max-height:230px}.cockpit-dial{grid-column:1;grid-row:3;width:160px;align-self:center;margin:0 0 8px 3px}.dial-reading{padding-bottom:7px;gap:4px}.dial-reading>span{font-size:.75rem;letter-spacing:.055em}.dial-reading strong{font-size:2.6rem}.dial-reading small{font-size:.75rem}.dial-limits{font-size:.75rem;left:20px;right:19px;bottom:16px}.cockpit-instruments{grid-column:2;grid-row:3;background:transparent;border-top:0;border-left:1px solid #344d5c66;grid-template-columns:1fr;gap:12px;padding:12px 14px 16px 15px;margin-bottom:12px}.cockpit-instruments>div{grid-template-columns:21px 1fr;gap:3px 7px}.cockpit-instruments svg{width:16px;height:16px}.cockpit-instruments span{font-size:.75rem}.cockpit-instruments strong{font-size:.8125rem;line-height:1.5}.cockpit-instruments>.instrument-action{display:none}.period-ribbon{gap:14px}.period-ribbon .eyebrow{font-size:.75rem}.period-ribbon strong{font-size:.875rem;line-height:1.6}.period-ribbon p{font-size:.75rem}.period-ribbon .secondary-button{font-size:.75rem;white-space:nowrap;padding:9px 12px}.telemetry-grid{gap:10px}.telemetry-card{padding:15px}.telemetry-label{font-size:.75rem;gap:6px;min-height:36px;align-items:flex-start;line-height:1.5}.telemetry-label svg{width:15px;height:15px;margin-top:2px}.telemetry-card>strong{font-size:1.65rem;margin:12px 0 8px}.telemetry-card>strong small{font-size:.75rem;margin-left:4px}.telemetry-card>span{font-size:.75rem}.calculation-note{font-size:.75rem}.cockpit-lower-grid{gap:20px}.chart-heading{gap:10px}.chart-heading .eyebrow{font-size:.75rem}.chart-heading h2{font-size:1.05rem}.chart-switch{padding:2px}.chart-switch button{font-size:.75rem;padding:8px;min-height:36px}.chart-readout{margin:24px 0 18px}.chart-readout strong{font-size:1.65rem}.chart-readout>span{font-size:.75rem}.bars-rack{gap:12px;grid-template-columns:repeat(var(--bars),minmax(34px,1fr))}.chart-bar-button{min-width:34px;padding:0 1px 3px}.bar-column{height:145px;max-width:36px}.bar-month{font-size:.75rem}.chart-bar-button small{font-size:.75rem}.last-charge-provider strong{font-size:1rem}.last-charge-reading strong{font-size:2.5rem}.last-charge-provider>div>span{font-size:.75rem}.last-charge-footer>span{font-size:.75rem}.last-charge-footer>strong{font-size:1rem}.latest-charge .section-title{margin-bottom:24px}.cockpit-footnote{font-size:.75rem;line-height:1.6}.period-settings{scroll-margin-top:18px}.period-distance-preview{padding:14px;gap:8px;flex-wrap:wrap;font-size:.8125rem}.period-distance-preview strong{font-size:1.15rem}.period-form .button-row>.primary-button{width:100%}.period-form .button-row .text-action{font-size:.875rem}.garage-stage{padding:10px 12px 20px}.garage-stage .cockpit-car{max-height:265px}.garage-photo-actions{margin-top:5px;gap:6px}.garage-photo-actions button{font-size:.75rem}.garage-metrics,.analytics-metrics{grid-template-columns:1fr}.garage-metrics .telemetry-card,.analytics-metrics .telemetry-card{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center}.garage-metrics .telemetry-label,.analytics-metrics .telemetry-label{min-height:0;grid-column:1}.garage-metrics .telemetry-card>strong,.analytics-metrics .telemetry-card>strong{grid-column:2;grid-row:1/3;margin:0;font-size:1.65rem}.garage-metrics .telemetry-card>span,.analytics-metrics .telemetry-card>span{grid-column:1;margin-top:5px}.charge-mix{gap:12px}.charge-mix article{padding:16px;gap:7px;grid-template-columns:22px 1fr}.charge-mix article>span{font-size:.75rem}.charge-mix article>strong{font-size:1.25rem;overflow-wrap:anywhere}.charge-mix article>svg{width:18px}.trend-labels{font-size:.75rem}.editable-charge .charge-heading{padding-right:0}.charge-actions{gap:12px;padding-top:7px;margin-top:15px}.edit-charge-button,.remove-charge-button{font-size:.8125rem}.cockpit-chart .empty-state{padding:30px 8px}.period-settings .advanced-fields summary span{font-size:.8125rem}}
@media(max-width:370px){.cockpit-heading h1{font-size:1.85rem}.cockpit-heading .eyebrow{max-width:150px;line-height:1.5}.cockpit-hero{grid-template-columns:138px 1fr}.cockpit-car-copy{padding:18px 16px 0}.cockpit-car-copy h2{font-size:1.35rem}.cockpit-car-copy>.text-action{right:12px;top:12px}.cockpit-dial{width:138px}.dial-reading strong{font-size:2.25rem}.dial-reading>span{font-size:.75rem}.dial-limits{bottom:13px;left:19px;right:17px}.cockpit-instruments{padding-left:10px}.telemetry-card{padding:13px}.telemetry-card>strong{font-size:1.45rem}.telemetry-card>strong small{font-size:.75rem}.chart-heading{align-items:flex-start;flex-wrap:wrap}.latest-charge{grid-template-columns:1fr}.last-charge-reading{justify-self:start;margin-top:16px}.bar-column{height:125px}.period-ribbon{align-items:flex-start}.period-ribbon strong{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.cockpit-car{transform:none}.bar-fill{transform:none}.trend-line{stroke-dashoffset:0}.provider-track>span{transform:none}}

@media(max-width:760px){.dial-reading>span{max-width:100px;text-align:center;line-height:1.15;letter-spacing:0}.dial-reading{gap:4px}.dial-reading strong{font-size:2.35rem}.dial-limits{left:14px;right:13px;bottom:9px}}