:root { color-scheme: dark; font: 16px/1.6 system-ui, sans-serif; background: #101318; color: #edf0f5; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { max-width: 960px; margin: auto; padding: 28px; }
header { padding-top: 36px; font-size: .8rem; font-weight: 700; letter-spacing: .18em; }
header a { color: inherit; text-decoration: none; } header span { color: #778495; }
main { min-height: 72vh; padding-top: 50px; }
h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1.08; letter-spacing: -.05em; margin: 28px 0 18px; font-weight: 600; }
h2 { font-size: 1.4rem; margin: 0; letter-spacing: -.025em; }
p { color: #aeb9c8; max-width: 640px; }
a { color: #a6caf8; }
.badge { color: #a4e5c0; background: #192b25; padding: 5px 11px; border-radius: 30px; font-size: .8rem; }
.muted { background: #252e3a; color: #bdc9d9; }
button, .link { font: inherit; border: 1px solid transparent; border-radius: 9px; padding: 11px 19px; background: #d5e6fa; color: #182334; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; }
button:hover, .link:hover { filter: brightness(1.13); } button:focus-visible, a:focus-visible { outline: 3px solid #8dc4ff; outline-offset: 4px; }
.secondary { background: #202935; border-color: #344154; color: #d3ddeb; }
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.toolbar form { margin: 0; }
.small { font-size: .85rem; margin: 20px 0; }
.cars { display: grid; gap: 22px; margin-top: 34px; }
article { background: #171e28; border: 1px solid #293240; border-radius: 15px; padding: 26px; }
.vin { font: .8rem ui-monospace, monospace; color: #8794a7; letter-spacing: .09em; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 25px 0; border-bottom: 1px solid #2a3442; }
.metrics span { display: block; font-size: .8rem; color: #9eacc0; }
.metrics strong { display: block; margin-top: 5px; font-size: 1.8rem; font-weight: 500; }
.metrics strong.text { font-size: 1.1rem; padding-top: 10px; }
.notice { border: 1px solid #81632e; background: #322a1c; padding: 16px; border-radius: 10px; margin-bottom: 24px; }
details { margin-top: 24px; color: #9fadc1; font-size: .85rem; } summary { cursor: pointer; }
pre { overflow: auto; max-height: 420px; font-size: .75rem; background: #10151d; padding: 14px; border-radius: 8px; }
footer { font-size: .75rem; color: #778495; padding-bottom: 36px; }
.automation { margin-top: 28px; padding-top: 12px; border-top: 1px solid #2a3442; }
.automation h3 { font-size: 1.1rem; font-weight: 500; }
.control-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.control-buttons form { margin: 0; }
.charging-specs { margin-top: 10px; line-height: 1.65; }
.metrics .charging-specs span { font-size: .76rem; color: #b3c1d4; }
@media (max-width: 600px) { main { padding-top: 24px; } .metrics { grid-template-columns: repeat(2, 1fr); } article { padding: 20px; } header, main, footer { padding-left: 20px; padding-right: 20px; } }

.mcp-panel { margin: 24px 0; padding: 20px; border: 1px solid #344154; border-radius: 12px; }
.mcp-secret { white-space: pre-wrap; overflow-wrap: anywhere; }

.extra-controls { margin-top: 16px; display: grid; gap: 14px; }
.control-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.control-form label { font-size: .85rem; color: #b3c1d4; }
.control-form input { display: block; box-sizing: border-box; width: 150px; max-width: 100%; margin-top: 6px; padding: 11px; border: 1px solid #344154; border-radius: 8px; background: #10151d; color: #edf0f5; font: inherit; }
.control-form .destination { flex: 1; min-width: 180px; }
.control-form .destination input { width: 100%; }