:root{color-scheme:dark;--bg:#0c1720;--card:#152934;--soft:#1b3440;--ink:#e7f1f5;--mut:#a7bdc8;--line:#304f5d;--accent:#9de3cf;--accentink:#102f31;--shadow:0 12px 38px #0002}:root[data-theme=light]{color-scheme:light;--bg:#edf3f5;--card:#fff;--soft:#edf5f6;--ink:#18333d;--mut:#58717e;--line:#d6e3e8;--accent:#146c76;--accentink:#fff;--shadow:0 8px 30px #28414b0c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#5dc3b80d,transparent 50%),var(--bg);color:var(--ink);font:15px/1.7 system-ui}header{max-width:1500px;margin:auto;padding:22px 28px;display:flex;gap:20px;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;letter-spacing:1.5px}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent);color:var(--accentink);font-size:24px}.brand small{display:block;font-size:9px;letter-spacing:2px}.header-actions{display:flex;align-items:center;gap:14px}.connection{font-size:12px;color:var(--mut)}main{max-width:1500px;margin:auto;padding:20px 28px 60px}h1{font-size:clamp(30px,4vw,48px);margin:6px 0;line-height:1.3;letter-spacing:-1.5px}h2{margin:0;font-size:21px}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:2px;margin:0 0 8px;font-weight:750}.subtitle{color:var(--mut);margin:8px 0}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}small,.note{color:var(--mut)}button,input,select{font:inherit;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);padding:11px 14px;min-height:44px}button{cursor:pointer}button:hover{filter:brightness(1.08)}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--accent);color:var(--accentink);font-weight:700;border-color:transparent}.danger{color:#e5a47f}input{display:block;width:100%;margin:10px 0 20px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.summary-grid article,.control-group,.health-card,.car,.login-card,.admin-tools{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:20px}.summary-grid article{padding:20px 23px}.summary-grid span,.summary-grid small{display:block;color:var(--mut);font-size:12px}.summary-grid strong{display:block;font-size:29px;line-height:1.5;margin:5px 0;overflow-wrap:anywhere}.toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.control-group{padding:20px}.control-group label{display:block;color:var(--mut);font-size:13px;margin-bottom:8px}.control-group select{width:100%;margin-bottom:10px}.control-group button{width:100%}.control-group small{display:block;font-size:12px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 14px}.section-heading>span{font-size:12px;color:var(--mut)}.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.health-card{padding:20px}.health-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.health-title h3{margin:0;font-size:19px}.health-card p{font-size:13px;color:var(--mut);margin:12px 0}.chip{font-size:11px;border-radius:30px;background:var(--soft);padding:4px 10px}.chip.tx{background:#976823;color:#fff3cc}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}.map{background:#142b35;color:#d7e9ee;border:1px solid #385762;border-radius:22px;overflow:hidden}svg{width:100%;display:block;min-height:280px}.map-caption{padding:15px 20px;color:#abc1cb;font-size:12px}.car{padding:20px;margin-bottom:16px}.car h3{margin:0 0 12px}.badge{font-size:11px;padding:4px 9px;background:#775237;color:#fff4de;border-radius:10px}.stale{opacity:.58}.metric{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}.metric:last-child{border:0}.metric>span{color:var(--mut)}.metric>b{text-align:right;overflow-wrap:anywhere}.note{font-size:13px;margin-top:24px}.admin-tools{font-size:13px;margin-top:20px;padding:18px 22px}.admin-tools summary{cursor:pointer;font-weight:650}.button-row{display:flex;gap:10px;flex-wrap:wrap}.button-row button{flex:1 1 150px}#message{color:var(--accent);margin:12px 0}#message:empty{display:none}.login-card{max-width:620px;margin:45px auto;padding:36px}.login-card p{color:var(--mut)}.login-card button{width:100%}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dba84f;outline-offset:3px}[hidden]{display:none!important}@media(max-width:850px){main{padding:16px 16px 40px}header{padding:18px 16px;flex-wrap:wrap}.header-actions{margin-left:auto}.connection{font-size:11px}.summary-grid{grid-template-columns:repeat(2,1fr);gap:12px}.summary-grid article{padding:17px}.summary-grid strong{font-size:25px}.toolbar{grid-template-columns:1fr;gap:12px}.control-group{padding:18px}.layout{grid-template-columns:1fr}.section-heading>span{max-width:40%;text-align:right}aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.car{margin:0}.login-card{margin:20px auto;padding:25px}.heading{align-items:flex-start}}@media(max-width:450px){.health-grid{grid-template-columns:1fr}.header-actions{width:100%;justify-content:space-between}.summary-grid strong{font-size:23px}.heading>button{font-size:12px;padding:8px 10px}.section-heading h2{font-size:19px}}

#login-form { display: grid; gap: 10px; }
#login-form #group-search, #login-form #key { width: 100%; margin: 0; }
#group-count { margin: 0; font-size: .875rem; }
#group-list { display: grid; gap: 8px; max-height: 16rem; overflow-y: auto; }
#group-list label { display: flex; gap: 10px; align-items: center; border: 1px solid currentColor; border-radius: 10px; padding: 10px; cursor: pointer; }
#group-list input { width: auto; margin: 0; }
#group-list span { overflow-wrap: anywhere; }
#group-list small { margin-left: auto; white-space: nowrap; }
#group-open { margin-top: 14px; }

.assembly-guide { display: grid; gap: clamp(18px, 3vw, 28px); }
.assembly-guide > .health-card { padding: clamp(20px, 4vw, 32px); }
.assembly-guide li + li, .assembly-guide dd + dt { margin-top: .65em; }
.assembly-guide dd { margin-inline-start: 1em; }
.assembly-guide a.primary { display: inline-block; padding: .65em 1em; border-radius: 12px; text-decoration: none; }

main.assembly-guide { gap: clamp(28px, 4vw, 48px); }
main.assembly-guide > .health-card { padding: clamp(24px, 4vw, 42px); }

/* Group map uses the full content width; device details follow below it. */
#dashboard > .layout { grid-template-columns:minmax(0,1fr); }
#dashboard .map { width:100%; }
#dashboard #map { width:100%;height:clamp(320px,60vh,760px);min-height:0; }
#dashboard #devices { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px; }
#dashboard #devices:empty { display:none; }
#dashboard #devices .car { margin:0; }
#dashboard > .layout + .button-row { margin-top:48px; }
/* Device-owned day outing controls; same spacing as user settings cards. */
#outing{margin-top:32px;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface,var(--paper))}
#outing>label{display:block;margin:20px 0 8px}#outing input[type=checkbox]{width:auto;min-height:24px;margin-right:8px}#outing>input,#outing>select{width:100%;box-sizing:border-box}#outing button{min-height:48px;margin:12px 16px 12px 0}#outing-list article{padding:20px;margin:24px 0;border:1px solid var(--line);border-radius:16px}#outing-list h3{margin-top:0}#outing-expiry{font-weight:700;color:var(--ink)}
