* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 14px; }
body { display: flex; }

/* ---- side panels ---- */
.panel { display: flex; flex-direction: column; background: #1f2630; color: #e6e9ef; width: 300px; flex-shrink: 0; }
.panel.hidden { display: none; }
.panel header { padding: 12px 14px; border-bottom: 1px solid #343d4a; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel h1 { font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel label { font-size: 12px; color: #aab3c0; }
.panel footer { padding: 8px 14px; font-size: 12px; color: #aab3c0; border-top: 1px solid #343d4a; }

.icon-btn { background: none; border: 0; color: #aab3c0; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.icon-btn:hover { color: #fff; }

/* ---- login ---- */
.login-overlay { position: fixed; inset: 0; z-index: 5000; background: #1f2630; display: flex; align-items: center; justify-content: center; }
.login-overlay.hidden { display: none; }
.login-card { background: #2a323e; color: #e6e9ef; padding: 28px 30px; border-radius: 8px; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.login-card.hidden, .login-card .hidden, .login-card [hidden] { display: none !important; }
.login-card h1 { margin: 0; font-size: 20px; }
.login-sub { margin: -6px 0 6px; color: #aab3c0; font-size: 13px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #aab3c0; }
.login-card input { background: #1f2630; color: #e6e9ef; border: 1px solid #3a4452; border-radius: 4px; padding: 8px; font: inherit; }
.login-card button { background: #2f6fed; color: #fff; border: 0; border-radius: 4px; padding: 9px; font: inherit; font-weight: 600; cursor: pointer; margin-top: 4px; }
.login-card button:disabled { opacity: .6; cursor: default; }
.login-error { color: #ff7b72; font-size: 12px; min-height: 16px; }
.login-success { color: #8ee29b; }
.login-card .link-btn { background: none; color: #8db2ff; font-weight: 400; padding: 4px; }
.login-card .link-btn:hover { text-decoration: underline; }

.user-bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; font-size: 12px; color: #aab3c0; border-bottom: 1px solid #343d4a; }
.user-bar .cust { color: #8db2ff; }
.user-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.user-actions .link-btn { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 30px; padding: 5px 8px; border: 1px solid #3a4452; border-radius: 4px; background: #2a323e; color: #d5e2ff; text-decoration: none; white-space: nowrap; }
.user-actions .link-btn:hover { background: #343d4a; text-decoration: none; }
.user-actions .link-btn:focus-visible { outline: 2px solid #8db2ff; outline-offset: 2px; }
.user-actions .hidden { display: none; }

.notice-bar {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 1100;
  max-width: min(720px, calc(100% - 40px)); background: #fff3cd; color: #5c4400; border: 1px solid #e0c060;
  border-radius: 6px; padding: 8px 10px 8px 14px; display: flex; gap: 10px; align-items: flex-start;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); font-size: 13px; line-height: 1.4;
}
.notice-bar.hidden { display: none; }
.notice-bar .icon-btn { color: #5c4400; }
.notice-bar ul { margin: 4px 0 0; padding-left: 18px; }
.notice-bar code { background: rgba(0,0,0,.08); padding: 0 4px; border-radius: 3px; }
.link-btn { background: none; border: 0; color: #8db2ff; cursor: pointer; font: inherit; font-size: 12px; padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* ---- left: date range ---- */
.range-bar { padding: 10px 14px; border-bottom: 1px solid #343d4a; display: flex; flex-direction: column; gap: 6px; }
.range-bar > label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8b95a5; }
.range-bar select, .range-bar input { width: 100%; background: #2a323e; color: #e6e9ef; border: 1px solid #3a4452; border-radius: 4px; padding: 5px 6px; font: inherit; font-size: 13px; color-scheme: dark; }
.range-custom { display: flex; flex-direction: column; gap: 4px; }
.range-custom.hidden { display: none; }
.range-custom label { font-size: 11px; color: #aab3c0; display: flex; flex-direction: column; gap: 2px; }
.range-summary { font-size: 11px; color: #aab3c0; }

/* ---- left: device list ---- */
#deviceList { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#deviceList li { padding: 6px 14px; border-bottom: 1px solid #2a323e; cursor: pointer; }
#deviceList li:hover { background: #2a323e; }
#deviceList li.active { background: #2f6fed22; border-left: 3px solid #2f6fed; }
#deviceList .id { font-weight: 600; font-family: ui-monospace, Consolas, monospace; }
#deviceList .name { font-weight: 600; }
#deviceList .name + .id { font-weight: 400; font-size: 11px; color: #8b95a5; }
#deviceList .meta { color: #aab3c0; font-size: 12px; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
#deviceList .alarm { color: #ff7b72; }
#deviceList .stale { color: #d29922; }
#deviceList > .device-group { padding: 0; cursor: default; }
#deviceList > .device-group:hover { background: transparent; }
#deviceList .device-group-toggle { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 14px; border: 0; border-bottom: 1px solid #343d4a; background: #252d38; color: #e6e9ef; text-align: left; font: inherit; cursor: pointer; }
#deviceList .device-group-toggle:hover { background: #2a323e; }
#deviceList .group-chevron { color: #8b95a5; }
#deviceList .group-count { color: #aab3c0; font-size: 12px; }
#deviceList .device-group-items { list-style: none; margin: 0; padding: 0; }
#deviceList .device-group-items li { padding-left: 28px; }
#deviceList .device-group-items[hidden] { display: none; }

/* ---- right: tracking info ---- */
#infoPanel { width: 320px; }
#infoBody { flex: 1; overflow-y: auto; padding: 10px 14px; }
#infoBody.empty { color: #aab3c0; font-size: 13px; }
#infoBody h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8b95a5; margin: 0; display: inline; }
#infoBody details.sec { margin-top: 14px; }
#infoBody details.sec:first-of-type { margin-top: 6px; }
#infoBody details.sec summary { list-style: none; cursor: pointer; user-select: none; padding: 2px 0 6px; display: flex; align-items: center; gap: 6px; }
#infoBody details.sec summary::-webkit-details-marker { display: none; }
#infoBody details.sec summary::before { content: '▸'; font-size: 11px; color: #8b95a5; transition: transform .15s; }
#infoBody details.sec[open] summary::before { transform: rotate(90deg); }
#infoBody details.sec summary:hover h2 { color: #c6cdd8; }
#infoBody table { width: 100%; border-collapse: collapse; font-size: 13px; }
#infoBody td { padding: 2px 0; border-bottom: 1px solid #2a323e; vertical-align: top; }
#infoBody td:first-child { color: #aab3c0; width: 42%; }
#infoBody td:last-child { text-align: right; font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
#infoBody .alarm { color: #ff7b72; font-weight: 600; }
#infoBody .stale { color: #d29922; }

.point-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.point-nav button { background: #2a323e; color: #e6e9ef; border: 1px solid #3a4452; border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.point-nav button:hover:not(:disabled) { background: #343d4a; }
.point-nav button:disabled { opacity: .4; cursor: default; }
.point-nav .point-pos { flex: 1; text-align: center; font-size: 12px; color: #aab3c0; }
.point-nav .latest-btn { border-color: #2f6fed; color: #8db2ff; }

/* ---- map + floating toggles ---- */
#mapWrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; }
.map-controls { position: absolute; right: 10px; bottom: 30px; z-index: 1000; display: grid; grid-template-columns: max-content; grid-template-rows: 30px; }
.map-control-button { display: flex; align-items: center; justify-content: center; border: 2px solid rgba(0,0,0,.2); border-radius: 4px; background: #fff; color: #222; padding: 5px 10px; font-family: inherit; font-size: 13px; cursor: pointer; }
.map-control-button:hover { background: #f4f4f4; }
.map-type-control { position: relative; grid-column: 1; grid-row: 1; }
.map-type-button { height: 100%; gap: 7px; }
.map-type-menu { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 120px; padding: 4px; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.map-type-menu[hidden] { display: none; }
.map-type-menu button { border: 0; padding: 8px 10px; background: transparent; color: #222; text-align: left; font-family: inherit; font-size: 13px; cursor: pointer; }
.map-type-menu button:hover, .map-type-menu button[aria-checked="true"] { background: #e8f0fe; }

.panel-toggle {
  position: absolute; top: 10px; z-index: 1000;
  background: #fff; border: 2px solid rgba(0,0,0,.2); border-radius: 4px;
  padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; color: #222;
}
.panel-toggle:hover { background: #f4f4f4; }
.panel-toggle.left { left: 10px; }
.panel-toggle.right { right: 10px; }

.marker-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); cursor: pointer; }
.marker-dot.gps { background: #2f6fed; }
.marker-dot.geolocation { background: #d29922; }
.marker-dot.stale { opacity: .55; }
.marker-dot.selected { box-shadow: 0 0 0 3px #2f6fed, 0 0 0 5px rgba(255,255,255,.9); }

.track-dot { width: 9px; height: 9px; border-radius: 50%; background: #2f6fed; border: 1px solid #fff; cursor: pointer; }
.track-dot.selected { width: 15px; height: 15px; background: #ff7b72; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }

.map-notice {
  position: absolute; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: #e9ecef; color: #333; padding: 24px; text-align: center; line-height: 1.5;
}
.map-notice.hidden { display: none; }
.map-notice code { background: #fff; padding: 2px 6px; border-radius: 3px; }

.speed-legend {
  position: absolute; top: 52px; right: 10px; z-index: 1000;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; max-width: calc(100% - 20px);
  background: rgba(255,255,255,.92); border-radius: 4px; padding: 4px 8px;
  font-size: 11px; color: #333; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.speed-legend .band { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; white-space: nowrap; }
.speed-legend .swatch { width: 14px; height: 8px; border-radius: 2px; border: 1px solid rgba(0,0,0,.25); }
.speed-legend .unit { font-weight: 600; margin-left: 2px; }

/* ---- profile page ------------------------------------------------------- */
body.profile-page { display: block; min-height: 100%; height: auto; overflow-x: hidden; overflow-y: auto; background: #171d26; color: #e6e9ef; }
.profile-shell { width: min(560px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; }
.profile-back { display: inline-block; margin-bottom: 18px; color: #8db2ff; font-size: 13px; text-decoration: none; }
.profile-back:hover { text-decoration: underline; }
.profile-shell h1 { margin: 0 0 18px; font-size: 22px; }
.profile-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #1f2630; border: 1px solid #343d4a; border-radius: 4px; }
.profile-form[hidden] { display: none; }
.profile-form + .profile-form { margin-top: 16px; }
.mfa-subform { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mfa-subform[hidden] { display: none; }
.mfa-subform h3 { margin: 0; font-size: 14px; }
.mfa-qr { width: 192px; height: 192px; max-width: 100%; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.mfa-manual-key { margin: 0; overflow-wrap: anywhere; }
.mfa-recovery-codes { margin: 0; padding: 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 4px; font: 13px/1.7 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.profile-form h2 { margin: 0; font-size: 16px; }
.profile-form label { display: flex; flex-direction: column; gap: 6px; color: #aab3c0; font-size: 13px; }
.profile-form input, .profile-form textarea { width: 100%; background: #2a323e; color: #e6e9ef; border: 1px solid #3a4452; border-radius: 4px; padding: 9px 10px; font: inherit; color-scheme: dark; }
.profile-form fieldset { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 14px; border: 1px solid #3a4452; border-radius: 4px; }
.profile-form legend { padding: 0 5px; color: #e6e9ef; font-size: 13px; }
.profile-form fieldset:disabled { opacity: .55; }
.profile-note, .profile-status { margin: 0; color: #aab3c0; font-size: 13px; }
.profile-status.error { color: #ff7b72; }
.profile-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.profile-cancel { color: #aab3c0; font-size: 13px; text-decoration: none; }
.profile-cancel:hover { color: #fff; }
.profile-save { border: 0; border-radius: 4px; padding: 9px 14px; background: #2f6fed; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.profile-save:disabled { opacity: .6; cursor: wait; }

/* shared field-console theme */
:root {
  color-scheme: light;
  --canvas: #edf2ef;
  --surface: #fff;
  --surface-soft: #f6f9f7;
  --ink: #1c3029;
  --muted-ink: #5d7068;
  --line: #d6e0da;
  --teal: #087c67;
  --teal-hover: #066653;
  --teal-soft: #dcefe9;
  --orange: #a9521b;
  --orange-soft: #fff0df;
  --red: #a33332;
  --red-soft: #f9e6e3;
  --green: #216b4a;
  --green-soft: #e2f1e8;
  --ui-font: Aptos, "Segoe UI Variable", "Segoe UI", sans-serif;
  --ui-text-size: 14px;
  --ui-title-size: 16px;
  --ui-label-size: 12px;
  --ui-caption-size: 11px;
}
html, body { background: var(--canvas); color: var(--ink); font-family: var(--ui-font); font-size: var(--ui-text-size); }
.panel { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 4px 18px #19382c12; }
.panel header { min-height: 54px; padding: 12px 16px; background: var(--surface); border-color: var(--line); }
.panel h1 { color: var(--ink); }
.panel label, .panel footer, .user-bar, .range-custom label, .range-summary { color: var(--muted-ink); }
.panel h1 { font-size: var(--ui-title-size); font-weight: 700; line-height: 1.25; }
.panel label { font-size: var(--ui-label-size); }
.panel footer, .range-summary, .device-search span, #deviceSearchStatus { font-size: var(--ui-caption-size); }
.range-bar > label, .device-search label { font-size: var(--ui-caption-size); font-weight: 700; letter-spacing: .04em; }
.map-control-button, .panel-toggle { font-family: var(--ui-font); font-size: 13px; font-weight: 600; }
.map-type-menu button { font-family: var(--ui-font); font-size: 13px; }
.login-card { font-family: var(--ui-font); }
.login-card h1 { font-size: 20px; font-weight: 700; }
.login-card label, .profile-form label { font-size: var(--ui-label-size); }
.user-actions .link-btn { font-family: var(--ui-font); font-size: var(--ui-caption-size); }
#deviceList .name { font-size: 13px; line-height: 1.3; }
#deviceList .id, #deviceList .name + .id { font-size: var(--ui-caption-size); }
#deviceList .meta { font-size: var(--ui-caption-size); }
#infoBody { font-size: 13px; line-height: 1.45; }
#infoBody h2 { font-size: var(--ui-caption-size); font-weight: 700; }
.icon-btn { color: var(--muted-ink); }
.icon-btn:hover { color: var(--ink); }
.login-overlay { background: linear-gradient(145deg, #e2eee8, #f4f7f4 58%, #e8efe9); }
.login-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 48px #19382c1c; }
.login-card h1 { color: var(--ink); }
.login-sub, .login-card label { color: var(--muted-ink); }
.login-card input { background: var(--surface); color: var(--ink); border-color: #c6d3cc; color-scheme: light; }
.login-card button { background: var(--teal); color: #fff; border-radius: 4px; }
.login-card button:hover { background: var(--teal-hover); }
.login-error { color: var(--red); }
.login-success { color: var(--green); }
.login-card .link-btn, .link-btn, .user-bar .cust { color: var(--teal); }
.user-actions .link-btn { border-color: var(--line); background: var(--surface); color: var(--ink); }
.user-actions .link-btn:hover { background: var(--surface-soft); }
.range-bar { background: #f8faf8; border-color: var(--line); }
.range-bar > label { color: var(--muted-ink); }
.range-bar select, .range-bar input { background: var(--surface); color: var(--ink); border-color: #c6d3cc; color-scheme: light; }
#deviceList li { border-color: #e4ebe6; }
#deviceList li:hover, #deviceList .device-group-toggle:hover { background: #f4f8f5; }
#deviceList li.active { background: var(--teal-soft); border-left-color: var(--teal); }
#deviceList .name + .id, #deviceList .group-chevron { color: var(--muted-ink); }
#deviceList .meta, #deviceList .group-count { color: var(--muted-ink); }
#deviceList .alarm, #infoBody .alarm { color: var(--red); }
#deviceList .stale, #infoBody .stale { color: var(--orange); }
#deviceList .device-group-toggle { background: #f1f5f2; border-color: var(--line); color: var(--ink); }
#infoBody.empty, #infoBody td:first-child { color: var(--muted-ink); }
#infoBody h2 { color: #52665d; }
#infoBody td { border-color: #e4ebe6; }
#infoBody details.sec summary::before { color: var(--teal); }
#infoBody details.sec summary:hover h2 { color: var(--ink); }
.point-nav button { background: var(--surface); color: var(--ink); border-color: var(--line); }
.point-nav button:hover:not(:disabled) { background: var(--surface-soft); }
.point-nav .point-pos { color: var(--muted-ink); }
.point-nav .latest-btn { border-color: var(--teal); color: var(--teal); }
.map-control-button, .panel-toggle { background: var(--surface); color: var(--ink); border-color: #c5d2cb; box-shadow: 0 2px 8px #18372a1a; }
.map-control-button:hover, .panel-toggle:hover { background: var(--surface-soft); }
.map-type-menu { background: var(--surface); border-color: var(--line); box-shadow: 0 8px 24px #18372a20; }
.map-type-menu button { color: var(--ink); }
.map-type-menu button:hover, .map-type-menu button[aria-checked="true"] { background: var(--teal-soft); color: #075f50; }
.marker-dot.gps, .track-dot { background: var(--teal); }
.marker-dot.geolocation { background: #dc762e; }
.marker-dot.selected { box-shadow: 0 0 0 3px var(--teal), 0 0 0 5px #fff; }
.track-dot.selected { background: #d84f42; }
.map-notice { background: #f4f7f5; color: var(--ink); }
.speed-legend { background: #ffffffed; color: var(--ink); box-shadow: 0 2px 10px #18372a1a; }
body.profile-page { background: linear-gradient(145deg, #f4f7f4, var(--canvas)); color: var(--ink); }
.profile-back { color: var(--teal); }
.profile-form { background: var(--surface); border-color: var(--line); box-shadow: 0 10px 28px #19382c10; }
.profile-form h1, .profile-form h2, .profile-form legend { color: var(--ink); }
.profile-form label, .profile-note, .profile-status { color: var(--muted-ink); }
.profile-form input, .profile-form textarea { background: var(--surface); color: var(--ink); border-color: #c6d3cc; color-scheme: light; }
.profile-form fieldset { border-color: var(--line); }
.profile-status.error { color: var(--red); }
.profile-save { background: var(--teal); border-radius: 4px; }
.profile-save:hover { background: var(--teal-hover); }
.profile-save.danger { background: var(--red); }
.profile-save.danger:hover { filter: brightness(.92); }
.theme-toggle { flex: none; white-space: nowrap; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; padding: 6px 9px; cursor: pointer; }
.theme-toggle:hover { background: var(--surface-soft); }
.user-actions .theme-toggle { flex: 1 1 auto; }
.theme-toggle-floating { position: fixed; top: 12px; right: 12px; z-index: 10000; }
.login-overlay .theme-toggle-floating { z-index: 5001; }
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #171d26;
  --surface: #1f2630;
  --surface-soft: #2a323e;
  --ink: #e6e9ef;
  --muted-ink: #aab3c0;
  --line: #343d4a;
  --teal: #69c9ad;
  --teal-hover: #82ddc1;
  --teal-soft: #183b34;
  --orange: #ffb84d;
  --orange-soft: #4d3a1f;
  --red: #ff9187;
  --red-soft: #4d2627;
  --green: #8ee29b;
  --green-soft: #1f4d2a;
}
html[data-theme="dark"], html[data-theme="dark"] body { background: linear-gradient(145deg, #202a32, var(--canvas)); color: var(--ink); }
html[data-theme="dark"] .panel header, html[data-theme="dark"] .range-bar { background: #242b36; }
html[data-theme="dark"] .login-overlay { background: linear-gradient(145deg, #202a32, #171d26 58%, #20252d); }
html[data-theme="dark"] .login-card input, html[data-theme="dark"] .range-bar select, html[data-theme="dark"] .range-bar input,
html[data-theme="dark"] .profile-form input, html[data-theme="dark"] .profile-form textarea { color-scheme: dark; }
html[data-theme="dark"] .user-actions .link-btn { border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
html[data-theme="dark"] #deviceList li:hover, html[data-theme="dark"] #deviceList .device-group-toggle:hover { background: var(--surface-soft); }
html[data-theme="dark"] #deviceList .device-group-toggle { background: #252d38; }
html[data-theme="dark"] #infoBody h2 { color: #aab3c0; }
html[data-theme="dark"] #infoBody td { border-color: var(--surface-soft); }
html[data-theme="dark"] .map-control-button, html[data-theme="dark"] .panel-toggle { border-color: var(--line); }
html[data-theme="dark"] .map-type-menu button:hover, html[data-theme="dark"] .map-type-menu button[aria-checked="true"] { color: var(--ink); }
html[data-theme="dark"] .map-notice { background: #202a32; color: var(--ink); }
html[data-theme="dark"] .map-notice code { background: var(--surface-soft); color: var(--ink); }
html[data-theme="dark"] .speed-legend { background: #242b36ed; color: var(--ink); }
html[data-theme="dark"] body.profile-page { background: linear-gradient(145deg, #202a32, var(--canvas)); color: var(--ink); }
.device-search { display: grid; gap: 5px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.device-search label { color: var(--muted-ink); font-size: 11px; text-transform: uppercase; }
.device-search input { width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 7px 8px; font: inherit; color-scheme: light; }
.device-search span { color: var(--muted-ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.device-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.device-heading .name { min-width: 0; overflow-wrap: anywhere; }
.device-state { flex: none; padding: 2px 6px; border-radius: 3px; background: #edf0ee; color: #5d6963; font-size: 10px; font-weight: 600; }
.device-state.recent { background: var(--green-soft); color: var(--green); }
.device-state.stale { background: var(--orange-soft); color: var(--orange); }
.device-list-empty { color: var(--muted-ink); font-size: 13px; cursor: default !important; }
#deviceList li.active { box-shadow: inset 3px 0 var(--teal); background: var(--teal-soft); }
.marker-dot.selected { transform: scale(1.15); }
.track-dot.selected { transform: scale(1.15); }
html[data-theme="dark"] .device-search { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .device-search input { color-scheme: dark; }
html[data-theme="dark"] .device-state { background: var(--surface-soft); color: var(--muted-ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body { position: relative; overflow: hidden; }
#sidebar.panel { width: clamp(280px, 23vw, 340px); border-right: 1px solid var(--line); }
#infoPanel.panel { width: clamp(300px, 25vw, 390px); border-left: 1px solid var(--line); }
#sidebar.panel, #infoPanel.panel { min-width: 0; }
#mapWrap { min-width: 280px; }
.resize-handle { position: relative; z-index: 10; flex: 0 0 6px; cursor: col-resize; touch-action: none; background: var(--line); }
.resize-handle::after { position: absolute; top: 50%; left: 2px; width: 2px; height: 40px; border-radius: 2px; background: var(--muted-ink); content: ""; opacity: .55; transform: translateY(-50%); }
.resize-handle:hover, .resize-handle:focus-visible { background: var(--teal); }
.resize-handle:hover::after, .resize-handle:focus-visible::after { background: #fff; opacity: 1; }
.resize-handle[hidden] { display: none; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }
body.resizing #map { pointer-events: none; }
.panel { box-shadow: 0 5px 22px #19382c14; }
.panel header { min-height: 52px; }
.user-bar { padding: 9px 12px; }
.map-control-button, .panel-toggle { min-height: 36px; }
.map-controls { right: 14px; bottom: 20px; }
.speed-legend { top: 60px; right: 14px; }
@media (max-width: 860px) {
  body { display: block; }
  .resize-handle { display: none; }
  #mapWrap { position: absolute; inset: 0; min-width: 0; }
  #sidebar.panel, #infoPanel.panel { position: absolute; top: 54px; bottom: 10px; z-index: 1100; height: auto; max-height: none; width: min(350px, calc(100vw - 20px)); border: 1px solid var(--line); border-radius: 6px; }
  #sidebar.panel { left: 10px; }
  #infoPanel.panel { right: 10px; }
  .panel-toggle { top: 10px; z-index: 1250; }
  .panel-toggle.left { left: 10px; }
  .panel-toggle.right { right: 10px; }
  .map-controls { right: 10px; bottom: 16px; }
  .speed-legend { top: 60px; right: 10px; }
}