StarPilot/openpilot/starpilot/galaxy/web/css/galaxy.css

/* Focused extract of frozen StarPilot Galaxy material.css, commit 678af78347d9656bc2f5dacd4204b012db861fa7. See ../LICENSE and README.md. */
.gx-settings { display: grid; gap: var(--sp-4); width: 100%; min-width: 0; margin: 0 auto; }
.gx-page-header { align-items: flex-start; }
.gx-page-header > div:first-child { flex: 1; min-width: 0; }
.gx-settings__header, .gx-settings__subhead, .gx-favorites__status { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gx-card.gx-settings__header, .gx-card.gx-settings__row, .gx-card.gx-settings__dialog { padding: var(--panel-padding); }
.gx-settings__header h2, .gx-settings__subhead h3, .gx-settings__row h4 { margin: 0 0 8px; }
.gx-settings__body { display: grid; gap: var(--sp-4); }
.gx-settings__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.gx-settings__row { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.gx-settings__row p { margin: 4px 0; }
.gx-settings__controls { justify-content: flex-end; }
.gx-card.gx-dialog { margin: auto; color: var(--on-surface); border: 1px solid var(--glass-border); }
.gx-dialog:not([open]) { display: none; }
.gx-dialog h3, .gx-dialog p { margin: 0; }
.gx-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.gx-card.gx-settings__dialog { width: min(calc(100% - 40px), 560px); max-height: calc(100dvh - 40px); overflow-y: auto; display: grid; gap: 18px; }
.gx-card.gx-vasm__editor { padding: var(--panel-padding); display: grid; gap: 16px; min-width: 0; }
.gx-card.gx-vasm__editor > .gx-section__header { margin: calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) 0; }
.gx-vasm__editor h3, .gx-vasm__editor p { margin: 0; }
.gx-vasm__editor label { display: grid; gap: 8px; }
.gx-vasm__editor input[type=file] { max-width: 100%; }
.gx-vasm__canvas { display: block; width: 100%; height: auto; min-width: 0; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); touch-action: none; }
.gx-map-manager { padding: var(--panel-padding); }
.gx-map-manager > .gx-section__header { margin: calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) 0; }
.gx-map-manager__body { display: grid; gap: 14px; }
.gx-map-manager__picker { display: grid; gap: 8px; }
.gx-map-manager__regions { max-height: 420px; overflow-y: auto; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.gx-map-manager__region { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--glass-border); }
.gx-map-manager__region:last-child { border-bottom: 0; }
.gx-map-manager__region small { display: block; margin-top: 4px; color: var(--on-surface-variant); }
.gx-map-manager__region .gx-btn { flex-shrink: 0; }
@media (max-width: 520px) {
  .gx-card.gx-settings__header, .gx-card.gx-settings__row, .gx-card.gx-settings__dialog { padding: 16px; }
  .gx-card.gx-vasm__editor { padding: 16px; }
  .gx-map-manager { padding: 16px; }
  .gx-map-manager__region { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) { .gx-settings__header { align-items: flex-start; } .gx-settings__subhead { align-items: flex-start; flex-direction: column; } }
:root {
  color-scheme: dark;
  --primary: #9d72ff;
  --primary-hover: #b38fff;
  --primary-glow: rgba(157, 114, 255, 0.35);
  --on-primary: #ffffff;
  --primary-container: rgba(157, 114, 255, 0.18);
  --on-primary-container: #ede4ff;

  --secondary: #4de8e8;
  --secondary-glow: rgba(77, 232, 232, 0.3);
  --error: #ff5277;
  --on-error: #ffffff;
  --warning: #ffb865;
  --success: #4de8e8;
  --bluetooth: #60a5fa;

  --background: #070712;
  --surface: rgba(18, 15, 32, 0.65);
  --surface-container: rgba(26, 21, 46, 0.55);
  --surface-container-high: rgba(36, 30, 62, 0.7);

  --on-surface: #f3f2f8;
  --on-surface-variant: #9d9bb8;
  --text-muted: #8b88a8;

  --glass-bg: rgba(22, 18, 38, 0.7);
  --glass-bg-hover: rgba(35, 29, 60, 0.8);
  --glass-active-bg: rgba(157, 114, 255, 0.22);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.35);
  --glass-blur: blur(4px);
  --glass-text: #f3f2f8;

  --outline: rgba(255, 255, 255, 0.08);
  --outline-variant: rgba(255, 255, 255, 0.05);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --elev-1: 0 4px 12px rgba(0, 0, 0, 0.2);
  --elev-2: 0 6px 18px rgba(0, 0, 0, 0.28);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.4);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem;
  --fs-lg: 1.2rem;  --fs-xl: 1.45rem;
  --fw-medium: 500; --fw-bold: 600;

  --motion-fast: 150ms cubic-bezier(0.2, 0.9, 0.3, 1);
  --motion-base: 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
  --motion-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --bottomnav-height: 72px;
  --bottomnav-clearance: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px) + var(--sp-5));
  --touch-target: 44px;
  --z-appbar: 100;
  --z-drawer: 200;
  --z-snackbar: 1300;

  --scrollbar-track: rgba(255, 255, 255, 0.03);
  --scrollbar-thumb: rgba(157, 114, 255, 0.4);
  --scrollbar-thumb-hover: rgba(157, 114, 255, 0.7);
  --scrollbar-border: rgba(157, 114, 255, 0.3);

  --content-width: 1200px;
    --panel-padding: var(--sp-5);
}

[data-theme="light"] {
  color-scheme: light;
  --primary: #7849e8;
  --primary-hover: #6737d9;
  --primary-glow: rgba(120, 73, 232, 0.25);
  --on-primary: #ffffff;
  --primary-container: rgba(120, 73, 232, 0.12);
  --on-primary-container: #471fa8;

  --secondary: #0c9b9b;
  --secondary-glow: rgba(12, 155, 155, 0.25);
  --error: #d63a62;
  --on-error: #ffffff;
  --warning: #c9821f;
  --success: #0c9b9b;
  --bluetooth: #2563eb;

  --background: #f2f4fc;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-container: rgba(255, 255, 255, 0.75);
  --surface-container-high: rgba(255, 255, 255, 0.95);

  --on-surface: #171526;
  --on-surface-variant: #5f5b7d;
  --text-muted: #6f6a8f;

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-hover: rgba(255, 255, 255, 0.95);
  --glass-active-bg: rgba(120, 73, 232, 0.15);
  --glass-border: rgba(120, 73, 232, 0.28);
  --glass-shadow: 0 8px 24px 0 rgba(80, 60, 140, 0.08);
  --glass-text: #171526;

  --outline: rgba(120, 73, 232, 0.14);
  --outline-variant: rgba(120, 73, 232, 0.08);

  --scrollbar-track: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb: #7849e8;
  --scrollbar-thumb-hover: #5d31ca;
  --scrollbar-border: #471fa8;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 1px solid var(--scrollbar-border);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Galaxy is a touch-first PWA: hide scrollbars everywhere, scrolling stays fully functional. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

html, body {
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  margin: 0;
  min-height: 100dvh;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeSpeed;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html { cursor: default; }

body {
  overscroll-behavior-y: contain;
  padding-bottom: env(safe-area-inset-bottom);
}

#galaxy-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background-color: var(--background);
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(157, 114, 255, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(85, 45, 180, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 75% 15%, rgba(77, 232, 232, 0.12) 0%, transparent 48%);
  pointer-events: none;
  isolation: isolate;
  contain: strict;
}

#galaxy-bg::before,
#galaxy-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

#galaxy-bg::before {
  background-image:
    radial-gradient(1px 1px at 30px 40px, #ffffff, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 110px 220px, rgba(220, 200, 255, 0.8), rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 200px 90px, #ffffff, rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 310px 340px, rgba(160, 240, 255, 0.9), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 410px 150px, #ffffff, rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 640px 110px, #ffffff, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 890px 180px, #ffffff, rgba(255,255,255,0));
  background-size: 800px 400px;
  opacity: 0.5;
}

#galaxy-bg::after {
  background-image:
    radial-gradient(1.5px 1.5px at 80px 140px, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 240px 390px, rgba(190, 235, 255, 0.9), rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 380px 60px, rgba(230, 195, 255, 0.85), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 560px 480px, #ffffff, rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 730px 220px, rgba(255, 255, 255, 0.9), rgba(255,255,255,0));
  background-size: 900px 450px;
  opacity: 0.6;
}

#galaxy-bg .galaxy-hero {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: calc((var(--galaxy-star-core) - 8px) / 2);
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0 calc(var(--galaxy-star-core) / 2),
    rgba(255, 255, 255, 0.15) calc(var(--galaxy-star-core) / 2 + 0.3px),
    rgba(255, 255, 255, 0.04) calc(var(--galaxy-star-core) / 2 + 1.5px),
    transparent 4px);
  animation: galaxy-twinkle 6s ease-in-out infinite alternate;
}

@keyframes galaxy-twinkle {
  0%, 100% { opacity: 0.3; transform: rotateZ(0.05deg) scale(0.9); }
  50% { opacity: 1; transform: rotateZ(0.05deg) scale(1.2); }
}

#galaxy-bg.galaxy-stars-paused .galaxy-hero { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #galaxy-bg .galaxy-hero { animation: none !important; }
}

/* Keep decorative animation out of route viewers, modal backdrops and drawer content. */
body:has(.gx-dialog[open], .gx-underlay, .gx-drawer.open, .gx-route-workspace) #galaxy-bg .galaxy-hero {
  display: none;
}

[data-theme="light"] #galaxy-bg {
  background-color: #eef1fb;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(180, 145, 255, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(120, 220, 235, 0.22) 0%, transparent 60%),
    radial-gradient(circle at 70% 15%, rgba(255, 170, 210, 0.18) 0%, transparent 48%);
}

[data-theme="light"] #galaxy-bg::before,
[data-theme="light"] #galaxy-bg::after,
[data-theme="light"] #galaxy-bg .galaxy-hero {
  opacity: 0.12;
}

[v-cloak] { display: none !important; }
a { color: inherit; text-decoration: none; }
.gx-link { color: #60a5fa; }
[data-theme="light"] .gx-link { color: #2563eb; }
.gx-link:hover { text-decoration: underline; }
button { font-family: var(--font-body); }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.gx-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
  animation: gx-app-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.gx-appbar {
  container: galaxy-header / inline-size;
  align-items: center;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  padding-top: calc(env(safe-area-inset-top) + var(--sp-2));
  position: sticky;
  top: 0;
  z-index: var(--z-appbar);
  transform: translateZ(0);
  isolation: isolate;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}

.gx-appbar__pill {
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  box-shadow: var(--glass-shadow);
  color: var(--glass-text);
  display: flex;
  flex: 1;
  gap: var(--sp-2);
  min-width: 0;
  padding: 6px 12px;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}

.gx-appbar .gx-appbar__back,
.gx-appbar .gx-theme-toggle,
.gx-appbar .gx-appbar__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 1;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  box-shadow: var(--glass-shadow);
  color: var(--glass-text);
  flex: none;
  height: var(--touch-target);
  width: var(--touch-target);
  transition: transform var(--motion-fast), background-color var(--motion-fast);
}

.gx-appbar .gx-appbar__back:active,
.gx-appbar .gx-theme-toggle:active,
.gx-appbar .gx-appbar__menu:active { transform: scale(0.92); }

.gx-appbar__title {
  background: linear-gradient(135deg, #8b6cc5 0%, #5ec8c8 55%, #d4789c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.gx-appbar__home {
  flex: none;
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 2px 12px 2px 8px;
  margin-right: 4px;
  border-radius: var(--radius-full);
  transition: background-color var(--motion-fast), transform var(--motion-fast);
}

.gx-brand { display: block; width: 28px; height: 28px; flex: none; background: currentColor; mask: url("../assets/starpilot-logo.svg") center / contain no-repeat; }
[data-theme="light"] .gx-brand { color: #6f42a6; }
.gx-drawer__header .gx-brand { width: 44px; height: 44px; }

.gx-appbar__home:hover { background-color: var(--glass-bg-hover); }

.gx-appbar__home:active { transform: scale(0.96); }

.gx-appbar__home:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.gx-appbar__right {
  flex: none;
  align-items: center;
  display: flex;
  gap: var(--sp-2);
  /* Nudge the status cluster off the pill edge so it reads balanced with the search gap. */
  margin-left: auto;
  margin-right: 4px;
}

.gx-search {
  background: var(--surface-container);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--on-surface);
  font-size: max(16px, var(--fs-sm));
  height: 40px;
  outline: none;
  padding: 0 var(--sp-4);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.gx-search:focus {
  background: var(--surface-container-high);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

[data-theme="light"] .gx-search {
  border-color: rgba(120, 73, 232, 0.3);
}

.gx-icon-btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: var(--touch-target);
  justify-content: center;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: 0;
  margin: 0;
  line-height: 1;
  position: relative;
  transition: background-color var(--motion-fast), transform var(--motion-fast);
  width: var(--touch-target);
}

.gx-icon-btn:hover { background: var(--glass-bg-hover); }
.gx-icon-btn:active { transform: scale(0.9); }
.gx-icon-btn i,
.gx-appbar .bi,
.gx-appbar i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 1em;
  width: 1em;
  font-size: 1.3rem;
  vertical-align: middle;
}
.gx-back-btn { display: none; }
.gx-appbar__menu { display: inline-flex; }

.gx-searchbox {
  align-items: center;
  display: flex;
  flex: 1;
  gap: var(--sp-1);
  min-width: 0;
  position: relative;
}

.gx-search-toggle { display: none; }

.gx-searchwrap {
  align-items: center;
  display: flex;
  flex: 1;
  gap: var(--sp-2);
  min-width: 0;
  padding-left: var(--sp-4);
  position: relative;
}

.gx-search__icon { color: var(--text-muted); flex: none; font-size: 1rem; width: 1rem; text-align: center; }

.gx-searchwrap .gx-search {
  padding-left: var(--sp-3);
  padding-right: var(--sp-5);
  width: 100%;
}

.gx-search-results {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  animation: gx-fade-in var(--motion-fast) ease-out;
  box-sizing: border-box;
  max-height: min(60vh, 420px);
  overscroll-behavior: contain;
  overflow-y: auto;
  position: fixed;
  z-index: 1100;
}

.gx-search-results__item {
  background: transparent;
  border: 0;
  color: var(--on-surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}
.gx-search-results__item:hover, .gx-search-results__item.active { background: var(--glass-bg-hover); }
.gx-search-results__item span, .gx-search-results__status { color: var(--text-muted); font-size: var(--fs-xs); }
.gx-search-results__status { margin: 0; padding: 12px 14px; }

@keyframes gx-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gx-app-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gx-status-pill {
  align-items: center;
  background: var(--surface-container);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  gap: var(--sp-2);
  padding: 6px 12px;
}

[data-theme="light"] .gx-status-pill {
  border: 1px solid rgba(120, 73, 232, 0.3);
}

.gx-status-dot {
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.gx-status-dot.offline {
  background: var(--error);
  box-shadow: 0 0 8px var(--error);
}

.gx-content {
  contain: layout style;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0 auto;
  max-width: var(--content-width);
  padding: var(--sp-4) var(--sp-4) calc(var(--bottomnav-height) + var(--sp-5));
  width: 100%;
}

.blur-nav {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  will-change: transform;
  isolation: isolate;
  contain: layout style;
  z-index: 1000;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  width: min(420px, calc(100vw - 32px));
  padding: 6px;

  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);

  transition: transform var(--motion-slow), opacity var(--motion-base), background-color var(--motion-fast);
  max-width: calc(100vw - 32px);
}

.gx-nav-indicator { position: absolute; inset: 6px auto 6px 6px; width: calc((100% - 12px) / 4); border-radius: var(--radius-full); background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 60%), var(--glass-active-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), 0 3px 12px rgba(0, 0, 0, .15); transform: translateX(calc(var(--active-tab, 0) * 100%)); transition: transform 420ms cubic-bezier(.22, 1, .36, 1), scale 180ms ease; pointer-events: none; }
.blur-nav:has(.nav-item:active) .gx-nav-indicator { scale: 1.035 1.06; }
.blur-nav .nav-item i { transition: transform var(--motion-base); }

[data-theme="light"] .blur-nav {
  border: 1.5px solid var(--primary);
}

.blur-nav .nav-item {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: var(--touch-target);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: var(--radius-full);
  color: var(--on-surface-variant);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  transition: color var(--motion-fast), background-color var(--motion-fast);
  background: transparent;
  border: none;
  cursor: pointer;
}

.blur-nav .nav-item i {
  font-size: 1.3rem;
  margin-bottom: 2px;
  transition: transform var(--motion-fast);
}

.blur-nav .nav-item:disabled { opacity: .4; cursor: not-allowed; }

.blur-nav .nav-item:hover:not(:disabled) {
  color: var(--on-surface);
  background: rgba(255, 255, 255, 0.08);
}

.blur-nav .nav-item:active i {
  transform: scale(0.88);
}

.blur-nav .nav-item.active {
  background: transparent;
  color: var(--primary);
  font-weight: var(--fw-bold);
}

.blur-nav .nav-item.active i {
  transform: translateY(-2px);
}

.gx-card {
  contain: layout style;
  background: var(--surface-container);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  margin-bottom: var(--sp-4);
  overflow: hidden;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), background-color 0.15s ease-out;
}

.gx-btn {
  align-items: center;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px var(--primary-glow);
  color: var(--on-primary);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  gap: var(--sp-2);
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  position: relative;
  transition: transform var(--motion-fast), background-color var(--motion-fast);
}

.gx-btn:hover:not(:disabled) { background: var(--primary-hover); }
.gx-btn:active:not(:disabled) { transform: scale(0.96); }
.gx-btn:disabled { opacity: 0.4; box-shadow: none; cursor: not-allowed; }
.gx-btn.gx-btn--danger { background: var(--error); color: var(--on-error); }

.gx-grid {
  display: grid;
  gap: var(--sp-3);
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.gx-card-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.gx-card-grid .gx-card { margin-bottom: 0; }

.gx-plots__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.gx-plots__status { flex: 0 0 100%; min-height: 2.8em; display: flex; align-items: center; }
.gx-plots__hint { min-height: 2.8em; }
.gx-plots__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 1rem; }
.gx-plots__panel { min-width: 0; --card-inset: clamp(.85rem, 2vw, 1.25rem); padding: var(--card-inset); }
.gx-plots__panel svg { display: block; width: 100%; height: auto; min-height: 8rem; background: rgba(127,127,127,.06); border-radius: .6rem; }
.gx-plots__panel polyline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.gx-plots__panel .gx-plot-axis { stroke: var(--on-surface-variant); opacity: .5; stroke-width: 1; }
.gx-plots__panel .gx-plot-zero { stroke: var(--on-surface-variant); opacity: .35; stroke-width: 1; stroke-dasharray: 4 4; }
.gx-plots__panel .gx-plot-label { fill: var(--on-surface-variant); font-size: 11px; }
.gx-flm__panel { --card-inset: clamp(.85rem, 2vw, 1.25rem); padding: var(--card-inset); overflow-wrap: anywhere; }
.gx-flm__panel > .gx-section__header, .gx-plots__panel > .gx-section__header { margin: calc(-1 * var(--card-inset)) calc(-1 * var(--card-inset)) var(--sp-3); }
.gx-flm__choice { padding: .45rem 0; border-bottom: 1px solid var(--outline-variant); }
.gx-flm__choice label { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.gx-flm__choice input { margin-top: .25rem; }
.gx-flm__legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: .35rem 0; }
.gx-flm__legend span::before { content: ''; display: inline-block; width: 1.2rem; height: .2rem; margin: 0 .4rem .2rem 0; vertical-align: middle; }
.gx-flm__legend-desired::before { background: #45a9ff; }
.gx-flm__legend-actual::before { background: #ffa352; }
.gx-plot-desired, .gx-plot-term-0 { stroke: #45a9ff; }
.gx-plot-actual, .gx-plot-term-1 { stroke: #ffa352; }
.gx-plot-term-2 { stroke: #ad8cff; }
.gx-plot-term-3 { stroke: #58c9a3; }

button.gx-crash-row:active { transform: scale(0.97); }
button.gx-crash-row:hover { background: var(--glass-bg-hover); transform: translateY(-2px); }

.gx-underlay {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  inset: 0;
  position: fixed;
  z-index: var(--z-drawer);
}

.gx-drawer {
  background: var(--surface-container-high);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--elev-3);
  height: 100dvh;
  left: 0;
  max-width: 320px;
  overflow-y: auto;
  padding: env(safe-area-inset-top) var(--sp-3) var(--sp-5);
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  transition: transform var(--motion-slow);
  width: 84vw;
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .gx-drawer {
  border-right: 1.5px solid var(--primary);
}

.gx-drawer.open { transform: translateX(0); }

.gx-drawer.open ~ .blur-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px) translateZ(0);
}

.gx-drawer__header {
  align-items: center;
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
}

.gx-drawer__header img { height: 44px; width: 44px; }

.gx-drawer__header .gx-drawer-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.gx-drawer__pin {
  color: var(--text-muted);
  margin-left: auto;
}

.gx-drawer__pin:hover,
.gx-drawer__pin[aria-pressed="true"] {
  color: var(--primary);
}

@media (min-width: 768px) {
  .gx-app.gx-nav-pinned { padding-left: 320px; }
}

.gx-nav-section { margin-bottom: var(--sp-3); }

.gx-nav-section__title {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  padding: var(--sp-2);
  text-transform: uppercase;
}

.gx-nav-item {
  align-items: center;
  border-radius: var(--radius-full);
  color: var(--on-surface);
  cursor: pointer;
  display: flex;
  font-weight: var(--fw-medium);
  gap: var(--sp-3);
  min-height: 46px;
  padding: 0 var(--sp-4);
  position: relative;
  transition: background-color var(--motion-fast);
}

.gx-nav-item:hover { background: rgba(255, 255, 255, 0.08); }

.gx-nav-item.active {
  background: var(--glass-active-bg);
  color: var(--primary);
  font-weight: var(--fw-bold);
}

[data-theme="light"] .gx-nav-item.active {
  border: 1px solid rgba(120, 73, 232, 0.35);
}

.gx-nav-item i { font-size: 1.3rem; width: 24px; }

@container galaxy-header (max-width: 743px) {
  .gx-appbar__pill { padding-inline: 12px; gap: var(--sp-2); }
  /* A real, filling search field instead of a lone icon; the status sits after it. */
  .gx-searchbox { flex: 1 1 auto; justify-content: flex-start; min-width: 0; }
  .gx-appbar__right { margin-left: 0; }
  .gx-searchbox.open { flex: 1; justify-content: stretch; }
  .gx-searchbox.open .gx-searchwrap { flex: 1; }
  /* While searching, the field takes over the whole floating bar. */
  .gx-appbar:has(.gx-searchbox.open) .gx-appbar__home,
  .gx-appbar:has(.gx-searchbox.open) .gx-appbar__right,
  .gx-appbar:has(.gx-searchbox.open) .gx-back-btn,
  .gx-appbar:has(.gx-searchbox.open) .gx-theme-toggle,
  .gx-appbar:has(.gx-searchbox.open) .gx-appbar__menu { display: none; }
  .gx-back-btn { display: inline-flex; }
  .gx-appbar__search { flex: 1; min-width: 0; }
  .gx-status-pill { display: none; }
  .gx-status-pill.gx-device-state { display: inline-flex; flex: none; width: 24px; height: 32px; padding: 0; justify-content: center; border: 0; background: none; }
  .gx-device-state__label { display: none; }
}

@container galaxy-header (max-width: 743px) {
  .gx-searchwrap { display: none; }
  .gx-searchbox { container: galaxy-search / inline-size; }
  .gx-search-toggle {
    display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: var(--sp-2);
    width: auto; min-width: 0; height: 40px; padding: 0 var(--sp-3);
    background: var(--surface-container); border: 1px solid var(--glass-border);
    border-radius: var(--radius-full); color: var(--text-muted);
  }
  .gx-search-toggle i { flex: none; font-size: 1rem; }
  .gx-search-toggle__label { display: inline; font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gx-searchbox.open .gx-searchwrap { display: flex; }
  .gx-searchbox.open .gx-search-toggle { flex: none; order: 2; width: var(--touch-target); padding: 0; background: none; border: 0; color: inherit; }
}

@container galaxy-search (max-width: 100px) {
  .gx-searchbox:not(.open) .gx-search-toggle { flex: none; width: var(--touch-target); height: var(--touch-target); padding: 0; justify-content: center; }
  .gx-search-toggle__label { display: none; }
}

@container galaxy-header (max-width: 380px) {
  .gx-appbar__title { display: none; }
  /* Without the label, keep the logo centered in its clickable circle. */
  .gx-appbar__home { padding: 2px 8px; margin-right: 0; }
}

@media (max-width: 767px) {
  .blur-nav { display: grid; }
  /* The bottom nav replaces the drawer, so never show both entry points. */
  .gx-appbar .gx-appbar__menu { display: none; }
  .gx-drawer { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
  .gx-content { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

@media (min-width: 768px) {
  .blur-nav { display: none; }
  .gx-back-btn { display: none; }
  .gx-appbar .gx-appbar__menu { display: inline-flex; }
  .gx-content { padding-bottom: var(--sp-6); }
}

.gx-appbar__home { border: 1px solid transparent; background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; }
[data-theme="light"] .gx-appbar__home { background: rgba(120, 73, 232, 0.08); }
.gx-appbar__home:hover { border-color: var(--glass-border); background: var(--glass-bg-hover); }
.gx-search:disabled { cursor: not-allowed; opacity: .58; }
.gx-nav-item { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; }

.gx-message { padding: var(--sp-6) var(--panel-padding); width: 100%; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: var(--sp-3); }
.gx-message h3, .gx-message p { margin: 0; }
.gx-message__body { color: var(--on-surface-variant); line-height: 1.5; min-width: 0; }
.gx-message__actions { justify-content: center; }
.gx-auth { max-width: 460px; margin: var(--sp-6) auto; padding: var(--sp-6); }

.gx-auth form { display: grid; gap: var(--sp-3); }
.gx-auth form .gx-btn { justify-self: start; }

/* Focused System Monitor adaptation from frozen Galaxy material.css:2424-2443. */
.gx-view, .gx-monitor { min-width: 0; max-width: 100%; }
/* Every tool page shares the Colors & Layout rhythm: one grid, one gap. */
.gx-view, .gx-driving, .gx-long-curves, .gx-vehicle { display: grid; gap: var(--sp-4); align-content: start; }
.gx-view > *, .gx-driving > *, .gx-long-curves > *, .gx-vehicle > * { margin-block: 0; }
.gx-view h2, .gx-monitor h2 { margin-top: 0; }
.gx-note { color: var(--text-muted); font-size: var(--fs-sm); }

/* Shared banners: message first, optional actions on their own row. */
.gx-alert { --notice-accent: var(--primary); align-items: center; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-left: 4px solid var(--notice-accent); border-radius: var(--radius-md); display: flex; gap: var(--sp-3); width: 100%; margin: 0 0 var(--sp-4); padding: var(--sp-4); background: color-mix(in srgb, var(--notice-accent) 12%, transparent); }
.gx-alert--warn { --notice-accent: var(--warning); }
.gx-alert--danger { --notice-accent: var(--error); }
.gx-alert--success { --notice-accent: var(--success); }
.gx-alert--bluetooth { --notice-accent: var(--bluetooth); }
.gx-alert__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; font-size: 1.25rem; line-height: 1; color: var(--notice-accent); }
.gx-alert__body { flex: 1; min-width: 0; display: grid; gap: var(--sp-2); overflow-wrap: anywhere; }
.gx-alert__body > strong { display: block; font-weight: var(--fw-bold); margin: 0; line-height: 1.5; }
.gx-alert__text { color: var(--on-surface); font-size: var(--fs-sm); line-height: 1.5; }
.gx-alert__text > :first-child { margin-top: 0; }
.gx-alert__text > :last-child { margin-bottom: 0; }
.gx-alert__text p { margin: 0; }
.gx-alert__text > p + p { margin-top: var(--sp-2); }
.gx-alert__actions { margin: 0; justify-content: flex-start; }
.gx-alert__actions .gx-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding-block: var(--sp-2); box-shadow: none; }
.gx-alert .gx-spinner { border-top-color: var(--notice-accent); }
.gx-settings > .gx-card, .gx-settings > .gx-alert, .gx-stack > .gx-card, .gx-stack > .gx-alert { margin-bottom: 0; }

/* Shared submenu cube so Tools, Logs and Plots render identically. */
.gx-menu-tile {
  align-items: center;
  background: var(--surface-container);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  color: var(--on-surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 118px;
  padding: var(--sp-4);
  text-align: center;
  transition: transform var(--motion-fast), background-color var(--motion-fast);
}
[data-theme="light"] .gx-menu-tile { border: 1px solid rgba(120, 73, 232, 0.25); }
.gx-menu-tile i { color: var(--primary); font-size: 1.75rem; }
.gx-menu-tile span { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.gx-menu-tile small { color: var(--text-muted); font-size: var(--fs-xs); }
.gx-menu-tile__availability { color: var(--warning); }
.gx-menu-tile:hover { background: var(--glass-bg-hover); transform: translateY(-2px); }
.gx-menu-tile:active { transform: scale(0.96); }
.gx-menu-tile:disabled { cursor: default; opacity: .65; }
.gx-menu-tile:disabled:hover { background: var(--surface-container); transform: none; }
.gx-note--danger { color: var(--error); }
.gx-empty { padding: var(--sp-4); color: var(--text-muted); }
.gx-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 4px 9px;
  line-height: 1.2;
  vertical-align: middle;
}

button.gx-chip {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-container-high);
  border: 1px solid var(--glass-border);
  color: var(--on-surface-variant);
  cursor: pointer;
  font-family: var(--font-body);
}

button.gx-chip:hover {
  background: var(--glass-bg-hover);
}


.gx-field { min-width: 0; max-width: 100%; min-height: var(--touch-target); padding: 9px 12px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--surface-container-high); color: var(--on-surface); font: inherit; font-size: max(16px, 1em); }
.gx-btn--tonal:hover:not(:disabled) { background: var(--glass-active-bg); }
.gx-btn--tonal { background: var(--primary-container); color: var(--on-primary-container); box-shadow: none; }
.gx-crash-controls { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gx-crash-controls .gx-field { flex: 1; min-width: 0; }
.gx-crash-list { display: grid; gap: var(--sp-2); }
.gx-crash-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); text-align: left; color: var(--on-surface); font: inherit; cursor: pointer; }
.gx-crash-row strong { overflow-wrap: anywhere; }
.gx-crash-row span { flex: 0 0 auto; color: var(--text-muted); font-size: var(--fs-sm); }
.gx-crash-preview { margin-top: var(--sp-3); }
.gx-crash-preview__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); overflow-wrap: anywhere; }
.gx-starport-logs { width: min(100%, 960px); margin-inline: auto; }
.gx-starport-logs__format { padding: 2px 7px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .16); font-size: var(--fs-xs); letter-spacing: .04em; }
.gx-starport-log-list { display: grid; gap: var(--sp-3); }
.gx-starport-log { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); margin: 0; padding: var(--sp-4); cursor: default; }
.gx-starport-log__body { display: grid; gap: var(--sp-1); min-width: 0; }
.gx-starport-log__body strong { line-height: 1.35; overflow-wrap: anywhere; }
.gx-starport-log__body span { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.gx-starport-log__download { flex: none; width: var(--touch-target); height: var(--touch-target); border: 1px solid var(--glass-border); background: var(--primary-container); color: var(--on-primary-container); }
.gx-starport-log__download:hover { background: var(--primary); color: var(--on-primary); }
.gx-starport-logs__section-title { margin: var(--sp-6) 0 var(--sp-3); }

@media (max-width: 700px) {
  .gx-starport-log { gap: var(--sp-3); padding: var(--sp-3); }
}
.gx-crash-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; font-size: var(--fs-sm); }
.gx-panel.gx-stack > h3, .gx-panel.gx-stack > p, .gx-software-card h3, .gx-software-card > p { margin: 0; }
.gx-software-card details p { margin: var(--sp-3) 0; }
.gx-software-branch { margin: var(--sp-3) 0; display: flex; align-items: flex-end; gap: var(--sp-3); }
.gx-software-branch .gx-field { min-width: min(100%, 260px); flex: 1; }
.gx-software-other-branches { margin: var(--sp-3) 0; padding-left: var(--sp-3); border-left: 2px solid var(--outline-variant); display: grid; gap: var(--sp-2); }
.gx-software-other-branches p { margin: 0; }
@media (max-width: 600px) { .gx-crash-row, .gx-crash-preview__head { align-items: flex-start; flex-direction: column; } }
@media (max-width: 600px) { .gx-starport-log { flex-direction: row; align-items: center; } }
.gx-monitor__toolbar, .gx-monitor__filters { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; }
.gx-monitor__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gx-monitor__metric { padding: 16px; margin: 0; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.gx-monitor__metric > span, .gx-monitor__metric small { color: var(--text-muted); }
.gx-monitor__metric strong { font-size: 26px; overflow-wrap: anywhere; }
.gx-monitor progress { width: 100%; height: 6px; accent-color: var(--primary); }
.gx-monitor__cores { padding: 14px; margin: 12px 0; }
.gx-monitor__cores summary { cursor: pointer; }
.gx-monitor__cores > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; padding-top: 12px; }
.gx-monitor__cores span { font-size: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.gx-monitor__filters input { flex: 1; min-width: 180px; }
.gx-monitor__table { overflow: auto; max-height: 65vh; }
.gx-monitor table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.gx-monitor th { position: sticky; top: 0; background: var(--surface-container-high); z-index: 1; text-align: left; }
.gx-monitor th button { background: transparent; color: inherit; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: 12px; white-space: nowrap; }
.gx-monitor td { padding: 10px 12px; border-top: 1px solid var(--outline); white-space: nowrap; }
.gx-monitor td:first-child { min-width: 180px; max-width: 350px; white-space: normal; overflow-wrap: anywhere; }
.gx-monitor tbody tr:hover { background: var(--surface); }
.gx-monitor__feature { color: var(--primary); font-weight: 500; }
@media(max-width:600px) { .gx-monitor__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gx-monitor__metric { min-width: 0; padding: 12px; } .gx-monitor__metric strong { font-size: 22px; } }

/* Dashboard */
.gx-home { width: 100%; margin: 0 auto; }
.gx-home__hero { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.gx-home__hero h1 { margin: 0 0 var(--sp-1); font-size: clamp(1.7rem, 3vw, 2.4rem); }
.gx-home__hero .gx-note { margin: 0; }
.gx-home__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.gx-home__card { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--panel-padding); }
.gx-home__card > .gx-section__header, .gx-auth > .gx-section__header, .gx-home__week > .gx-section__header, .gx-home__records > .gx-section__header, .gx-home__recent > .gx-section__header, .gx-home__models > .gx-section__header { margin: calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) var(--sp-2); }
.gx-home__card p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.gx-home__card small { color: var(--text-muted); overflow-wrap: anywhere; }
.gx-recordings { min-width: 0; }
.gx-recordings__browse { display: grid; gap: var(--sp-4); }
.gx-recordings__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-3); }
.gx-recordings__metrics > div { display: grid; gap: var(--sp-1); }
.gx-recordings__metrics strong { font-size: 1.25rem; }
.gx-recordings__metrics span { color: var(--text-muted); }
.gx-home__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.gx-home__metrics div { display: grid; gap: var(--sp-1); }
.gx-home__metrics strong { font-size: var(--fs-xl); }
.gx-home__metrics span { color: var(--text-muted); font-size: var(--fs-sm); }
.gx-home__link { align-self: flex-start; margin-top: auto; padding: var(--sp-2) 0 0; border: 0; background: none; color: var(--primary); font: inherit; cursor: pointer; text-align: left; }
.gx-home__link:hover { text-decoration: underline; }
.gx-home__last { padding: var(--panel-padding); display: grid; gap: var(--sp-4); min-height: 180px; }
.gx-home__last h2 { margin: 0; font-size: var(--fs-lg); }
.gx-home__last p { margin: 0; }
.gx-home__kicker, .gx-home__section-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--primary); }
.gx-home__kicker { width: fit-content; font-size: var(--fs-sm); }
.gx-home__kicker span, .gx-home__section-title span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.gx-home__section-title { margin: var(--sp-6) 0 var(--sp-3); }
.gx-home__subtle { color: var(--text-muted); }
.gx-home__four, .gx-home__totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.gx-home__four > div, .gx-home__totals > section { min-width: 0; display: grid; gap: var(--sp-1); }
.gx-home__four strong, .gx-home__totals strong { font-size: clamp(1.2rem, 2.2vw, 1.9rem); color: var(--on-surface); overflow-wrap: anywhere; }
.gx-home__four span, .gx-home__totals span { color: var(--text-muted); font-size: var(--fs-sm); }
.gx-home__attention { display: flex; flex-wrap: wrap; gap: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); }
.gx-home__attention i { margin-right: var(--sp-1); }
.gx-home__analysis { width: fit-content; margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-container-high); color: var(--text-muted); }
.gx-home__totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gx-home__totals > section, .gx-home__week, .gx-home__records, .gx-home__recent, .gx-home__models { padding: var(--panel-padding); }
.gx-home__totals h2 { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.gx-home__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.gx-home__week, .gx-home__records { min-width: 0; }
.gx-home__week-top { display: flex; align-items: center; gap: var(--sp-5); margin: var(--sp-4) 0; }
.gx-home__week-top > div:last-child { display: grid; gap: var(--sp-1); }
.gx-home__week-top > div:last-child strong { font-size: var(--fs-xl); }
.gx-home__week-top span, .gx-home__week h3 { color: var(--text-muted); font-size: var(--fs-sm); }
.gx-home__week h3 { margin: var(--sp-4) 0 var(--sp-2); }
.gx-home__donut, .gx-home__model-donut { width: 112px; height: 112px; flex: 0 0 auto; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative; }
.gx-home__donut::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--primary) var(--gx-home-progress, 0%), rgba(157, 114, 255, .18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px)); }
.gx-home__donut strong, .gx-home__donut span { position: relative; z-index: 1; }
.gx-home__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: var(--sp-2); }
.gx-home__bars > div { min-width: 0; display: grid; justify-items: center; gap: var(--sp-1); }
.gx-home__bar-track { width: 100%; height: 82px; display: flex; align-items: end; justify-content: center; border-bottom: 1px solid var(--outline-variant); overflow: hidden; }
.gx-home__bar-track span { width: 100%; background: linear-gradient(180deg, var(--primary), var(--secondary)); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.gx-home__bars small { max-width: 100%; color: var(--text-muted); text-align: center; font-size: .7rem; overflow-wrap: anywhere; }
.gx-home__bars small:last-child { min-height: 2.8em; }
.gx-home__record { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--outline); }
.gx-home__record:last-child { border-bottom: 0; }
.gx-home__record span { color: var(--text-muted); }
.gx-home__record strong { text-align: right; overflow-wrap: anywhere; }
.gx-home__recent, .gx-home__models { margin-top: var(--sp-4); }
.gx-home__drive { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--outline); }
.gx-home__drive:last-child { border-bottom: 0; }
.gx-home__drive > div { min-width: 0; display: grid; align-content: start; gap: var(--sp-1); }
.gx-home__drive strong, .gx-home__drive small { overflow-wrap: anywhere; }
.gx-home__drive small { color: var(--text-muted); }
.gx-home__drive.is-ignored { opacity: .75; }
.gx-home__drive .gx-home__link { margin: 0; padding: 0; }
.gx-home__drive .gx-home__link:disabled { opacity: .5; cursor: wait; }
.gx-home__model-layout { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-4); }
.gx-home__model-donut { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 22px), #000 calc(100% - 21px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 22px), #000 calc(100% - 21px)); }
.gx-home__model-layout > div:last-child { display: grid; gap: var(--sp-3); }
.gx-home__model-row { display: flex; align-items: start; gap: var(--sp-2); }
.gx-home__model-row > div { display: grid; gap: var(--sp-1); }
.gx-home__model-row small { color: var(--text-muted); }
.gx-home__swatch { width: 12px; height: 12px; margin-top: 4px; flex: 0 0 auto; border-radius: 50%; }
@media (max-width: 850px) { .gx-home__grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .gx-home__pair, .gx-home__totals { grid-template-columns: 1fr; } .gx-home__drive { grid-template-columns: 1fr 1fr; } .gx-home__drive > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .gx-home__hero { align-items: flex-start; flex-direction: column; } .gx-home__four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gx-driving { width: 100%; margin: 0 auto; min-width: 0; }
.gx-driving__intro { padding: var(--panel-padding); }
.gx-driving__intro h2 { margin: 0 0 var(--sp-2); }
.gx-driving__intro p:last-child { margin-bottom: 0; color: var(--text-muted); }
.gx-driving__actions { margin-block: var(--sp-3); }
.gx-driving__group { margin-top: var(--sp-5); }
.gx-bluetooth__device-icon { color: var(--primary); }
.gx-driving__group h3 { margin: 0 0 var(--sp-3); }
.gx-driving__extras { margin-top: var(--sp-5); }
.gx-card.gx-long-curves__body { padding: var(--panel-padding); }
.gx-long-curves__body > .gx-section__header { margin: calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) var(--sp-4); }
.gx-long-curves__tabs { margin: var(--sp-3) 0; text-transform: capitalize; }
.gx-long-curves__body { display: grid; gap: var(--sp-4); }
.gx-long-curves__graph { width: 100%; max-width: 680px; height: auto; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .15); }
.gx-long-curves__graph text { fill: var(--on-surface-variant); font-size: 11px; }
.gx-long-curves__axis { stroke: var(--on-surface-variant); stroke-width: 1; }
.gx-long-curves__line { fill: none; stroke: var(--primary); stroke-width: 2.5; }
.gx-long-curves__point { fill: var(--primary); }
.gx-long-curves__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.gx-vehicle__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.gx-vehicle__summary > div { display: grid; align-content: start; gap: var(--sp-1); min-width: 0; }
.gx-vehicle__summary small, .gx-vehicle__summary p { color: var(--on-surface-variant); }
.gx-vehicle__summary strong { overflow-wrap: anywhere; }
.gx-vehicle__summary p { margin: 0; }
.gx-vehicle__filters .gx-field { flex: 1 1 220px; min-width: 0; }
.gx-vehicle__models { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--sp-2); max-height: 440px; overflow-y: auto; }
.gx-vehicle__models button { justify-content: flex-start; border-radius: var(--radius-sm); text-align: left; overflow-wrap: anywhere; }
.gx-vehicle__models button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
@media (max-width: 700px) { .gx-long-curves__points { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .gx-vehicle__summary { grid-template-columns: 1fr; } }

/* Navigation shares the same route and preferences as the onroad display. */
.gx-navigation__search{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.gx-navigation__section{padding:24px;margin:0 0 20px}
.gx-navigation__section > .gx-section__header{margin:-24px -24px var(--sp-4)}
.gx-navigation__search{margin:20px 0}
.gx-navigation__search .gx-field{flex:1;min-width:180px}
.gx-navigation__places{list-style:none;padding:0;display:grid;gap:12px}
.gx-navigation__places>li{padding:18px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.gx-navigation__places>li>span{min-width:0;overflow-wrap:anywhere}
.gx-navigation__actions{flex-shrink:0}
.gx-navigation__instruction{font-size:clamp(20px,3vw,30px);font-weight:650}
.gx-navigation__route{display:block;width:100%;height:220px;border-radius:16px;background:rgba(161,112,244,.06);margin:16px 0}
.gx-navigation--stale .gx-navigation__route{opacity:.45}
@media(max-width:540px){.gx-navigation__places>li{align-items:flex-start;flex-direction:column}.gx-navigation__section{padding:18px}.gx-navigation__section > .gx-section__header{margin:-18px -18px var(--sp-4)}}

.gx-navigation__route-actions{padding-bottom:calc(var(--sp-4) + 56px)}

.gx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.gx-release-notes{white-space:pre-wrap;font:inherit;line-height:1.6;overflow-wrap:anywhere}
.gx-software-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--sp-3); margin: 0; }
.gx-software-summary dt { font-size: var(--fs-sm); color: var(--on-surface-variant); }
.gx-software-summary dd { margin: var(--sp-1) 0 0; font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.gx-software-options { border-top: 1px solid var(--glass-border); }
.gx-software-options > .gx-stack { padding-top: var(--sp-4); }
.gx-software-card details{padding:12px 0}.gx-software-card summary{cursor:pointer;font-weight:600}
.gx-version-action--pending { animation: gx-version-heartbeat 1.8s ease-in-out infinite; }
@keyframes gx-version-heartbeat {
  0%, 45%, 100% { box-shadow: 0 0 0 0 transparent; }
  12%, 32% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent), 0 0 20px color-mix(in srgb, var(--primary) 55%, transparent); }
  22% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent), 0 0 10px color-mix(in srgb, var(--primary) 30%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-version-action--pending { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
}
.gx-restart-cron { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(180px, 2fr); gap: var(--sp-3); }
@media (max-width: 800px) { .gx-restart-cron { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gx-version-scroll { max-height: min(760px, 65dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 3px; }
.gx-version-list { display: grid; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.gx-version-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-3); border: 2px solid var(--outline-variant); border-radius: var(--radius-sm); cursor: pointer; }
.gx-version-row:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.gx-version-row--installed { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.gx-version-row--selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.gx-version-row:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.gx-version-row input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--primary); }
.gx-version-content { min-width: 0; display: grid; gap: var(--sp-1); overflow-wrap: anywhere; }
.gx-version-content small { color: var(--on-surface-variant); }
.gx-version-meta .gx-version-badge { display: inline-block; margin-inline-start: var(--sp-2); white-space: nowrap; }
.gx-version-badge { padding: 2px 8px; border-radius: 999px; font-size: var(--fs-sm); color: var(--on-surface-variant); background: var(--surface-container-high); }
.gx-version-badge--installed, .gx-version-badge--downloaded { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.gx-version-gap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-2); }

.gx-navigation-map { position:relative; border-radius:12px; overflow:hidden; background:#20303b; margin-bottom:16px; }
.gx-navigation-map canvas { display:block; width:100%; height:360px; touch-action:none; cursor:grab; }
.gx-navigation-map__controls { position:absolute; top:12px; right:12px; display:flex; gap:6px; }
.gx-navigation-map__credits { position:absolute; bottom:0; right:0; background:#fff; color:#222; padding:3px 7px; font-size:11px; }
.gx-navigation-map__credits a { color:#2563eb; }
.gx-navigation-map > p { padding:8px; }

.gx-navigation-map__logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}
.gx-navigation-map__logo { position:absolute; bottom:20px; left:8px; }

/* Original record motifs, adapted to Galaxy's purple accent without image assets. */
.gx-home__record .gx-home__record-art { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.gx-home__record-art svg { width: 25px; height: 25px; }
.gx-home__record-label { min-width: 0; overflow-wrap: anywhere; }
.gx-home__record strong { min-width: 0; }
.gx-force-drive__actions { margin-top: var(--sp-3); }
.gx-force-drive__actions .gx-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 2px var(--primary) inset; }
@media (max-width: 600px) {
  .gx-home__record { grid-template-columns: 36px minmax(0, 1fr); }
  .gx-home__record .gx-home__record-art { width: 36px; height: 36px; grid-row: span 2; }
  .gx-home__record strong { grid-column: 2; text-align: left; }
}

.gx-sentry-channel__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.gx-sentry-channel__fields .gx-field { width: 100%; min-width: 0; box-sizing: border-box; }

/* Recording library follows the shared section/row control hierarchy. */
.gx-recordings__library, .gx-recordings__list, .gx-recordings__delete { overflow: hidden; }
.gx-recordings__heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.gx-recordings__heading h2, .gx-recordings__heading .gx-note { margin: 0; }
.gx-recordings__filters { display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto; align-items: center; gap: var(--sp-2); padding: var(--sp-3); }
.gx-recordings__filters > .gx-field { width: 100%; min-width: 0; }
.gx-recordings__name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.gx-route-workspace .gx-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.gx-recordings__row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); }
.gx-recordings__row + .gx-recordings__row { border-top: 1px solid var(--outline-variant); }
.gx-recordings__row--preserved { box-shadow: inset 3px 0 var(--primary); }
.gx-recordings__drive { flex: 1; min-width: 0; display: grid; justify-items: start; gap: var(--sp-1); border: 0; padding: 0; background: transparent; color: var(--on-surface); text-align: left; cursor: pointer; font: inherit; }
.gx-recordings__drive .gx-row__label { overflow-wrap: anywhere; }
.gx-recordings__drive:focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; border-radius: var(--radius-sm); }
.gx-recordings__drive:disabled { cursor: default; }
.gx-recordings__row .gx-recordings__actions { flex-shrink: 0; gap: var(--sp-1); }
.gx-recordings__danger { color: var(--error); }
.gx-recordings__empty, .gx-recordings__delete > .gx-recordings__actions { padding: var(--sp-4); margin: 0; }
.gx-recordings__delete > summary { cursor: pointer; padding: var(--sp-4); color: var(--text-muted); }
.gx-route-workspace { container-type: inline-size; display: grid; gap: var(--sp-3); min-width: 0; }
.gx-route-workspace__header { display: grid; grid-template-columns: var(--touch-target) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); }
.gx-route-workspace__header h2, .gx-route-workspace__header p, .gx-route-workspace h3, .gx-route-workspace__downloads p, .gx-route-workspace__files p { margin: 0; }
.gx-route-workspace__identity { min-width: 0; overflow-wrap: anywhere; }
.gx-route-workspace__body { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-3); }
.gx-route-workspace__viewer { min-width: 0; overflow: hidden; }
.gx-route-workspace__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); }
.gx-route-workspace__modes { flex: 1 1 auto; flex-wrap: nowrap; }
.gx-route-workspace__modes > button { white-space: nowrap; padding-inline: var(--sp-3); }
.gx-route-workspace__camera-select { flex: 0 1 8rem; width: 8rem; min-width: 0; }
.gx-route-workspace__shortcuts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gx-route-workspace__camera video { width: 100%; display: block; max-height: 65dvh; aspect-ratio: 16/9; object-fit: contain; background: #000; }
.gx-route-workspace__empty { min-height: clamp(9rem, 25cqi, 20rem); margin: 0; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); text-align: center; padding: var(--sp-4); border-radius: 0; background: var(--surface-container-high); }
.gx-route-workspace__segment { flex: 0 1 17rem; display: grid; grid-template-columns: var(--touch-target) minmax(0, 1fr) var(--touch-target); gap: var(--sp-1); align-items: center; min-width: 0; }
.gx-route-workspace__segment .gx-field { width: 100%; min-width: 0; }
.gx-route-workspace__downloads { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--outline-variant); }
.gx-route-workspace__download-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.gx-route-workspace__download-context { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.gx-route-workspace__download-actions { flex-wrap: nowrap; }
.gx-route-workspace__download-actions .gx-btn { padding-inline: var(--sp-3); }
.gx-route-workspace__help { min-width: 0; font-size: var(--fs-sm); }
.gx-route-workspace__help > summary { cursor: pointer; color: var(--text-muted); min-height: var(--touch-target); display: flex; align-items: center; gap: var(--sp-2); list-style: none; }
.gx-route-workspace__help > summary::-webkit-details-marker { display: none; }
.gx-route-workspace__help > summary::before { content: ""; width: .4rem; height: .4rem; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); flex: none; }
.gx-route-workspace__help[open] > summary::before { transform: rotate(45deg); }
.gx-route-workspace__help > p { max-width: 75ch; padding-bottom: var(--sp-2); }
.gx-route-workspace__help > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.gx-route-workspace__files { display: grid; gap: var(--sp-3); min-width: 0; padding: var(--sp-3); }
.gx-route-workspace__file-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.gx-route-workspace__file-group { display: grid; gap: var(--sp-2); }
.gx-route-workspace__file-group h3 { font-size: var(--fs-base); }
.gx-route-workspace__route-files { padding-top: var(--sp-3); border-top: 1px solid var(--outline-variant); }
.gx-route-workspace__metadata { display: grid; gap: var(--sp-1); margin: 0; }
.gx-route-workspace__metadata dt { color: var(--text-muted); font-size: var(--fs-sm); }
.gx-route-workspace__metadata dd { margin: 0; overflow-wrap: anywhere; }
.gx-route-workspace__files .gx-recordings__metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.gx-route-workspace__job { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.gx-route-workspace__job progress { flex: 1 1 8rem; max-width: 16rem; accent-color: var(--primary); }
.gx-route-workspace .gx-replay { display: grid; gap: var(--sp-2); }
.gx-route-workspace .gx-replay > .gx-notice, .gx-route-workspace .gx-replay > .gx-note, .gx-route-workspace .gx-replay > .gx-btn, .gx-route-workspace .gx-replay__gaps { margin-inline: var(--sp-3); }
.gx-route-workspace .gx-replay__media-controls { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.gx-route-workspace .gx-replay__controls { gap: var(--sp-1); }
.gx-route-workspace .gx-replay__controls .gx-btn { font-size: var(--fs-sm); }
.gx-route-workspace .gx-replay__video { aspect-ratio: 2 / 1; max-height: 50dvh; object-fit: contain; }
.gx-route-workspace .gx-replay__player:fullscreen .gx-replay__screen { flex: 1; min-height: 0; display: flex; align-items: center; }
.gx-route-workspace .gx-replay__player:fullscreen .gx-replay__video { height: 100%; max-height: 100%; }
@container (min-width: 1100px) {
  .gx-route-workspace__body { grid-template-columns: minmax(0, 1fr) 17rem; }
  .gx-route-workspace__files .gx-route-workspace__route-files .gx-actions { align-items: stretch; flex-direction: column; }
}
@container (max-width: 700px) {
  .gx-route-workspace__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem); }
  .gx-route-workspace__modes { grid-column: 1 / -1; }
  .gx-route-workspace__modes > button { flex: 1; }
  .gx-route-workspace__segment { grid-column: 1; grid-row: 2; }
  .gx-route-workspace__camera-select { grid-column: 2; grid-row: 2; width: 100%; }
  .gx-route-workspace__toolbar:not(:has(.gx-route-workspace__camera-select)) .gx-route-workspace__segment { grid-column: 1 / -1; }
}
@container (max-width: 340px) {
  .gx-route-workspace__toolbar .gx-route-workspace__segment { grid-column: 1 / -1; }
  .gx-route-workspace__camera-select { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 700px) {
  .gx-recordings__filters { grid-template-columns: minmax(0, 1fr) auto; }
  .gx-recordings__filters > input { grid-column: 1 / -1; }
  .gx-recordings__filters .gx-btn { padding-inline: var(--sp-3); }
}
@media (max-width: 560px) {
  .gx-recordings__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); }
  .gx-recordings__row > .gx-recordings__drive { grid-column: 1; }
  .gx-recordings__row > .gx-note { grid-column: 1; grid-row: 2; margin: 0; }
  .gx-recordings__row > .gx-recordings__actions { grid-column: 2; grid-row: 1 / 3; }
  .gx-recordings__row > .gx-route-workspace__shortcuts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .gx-route-workspace__shortcuts .gx-btn { min-width: 0; white-space: nowrap; padding-inline: var(--sp-2); }
  .gx-route-workspace__header { align-items: center; }
  .gx-route-workspace__identity { display: contents; }
  .gx-route-workspace__identity h2 { grid-column: 2; grid-row: 1; }
  .gx-route-workspace__identity p { grid-column: 2 / -1; grid-row: 2; }
  .gx-route-workspace__back { grid-column: 1; grid-row: 1 / 3; }
  .gx-route-workspace__header h2 { font-size: 1.125rem; }
  .gx-route-workspace__header > .gx-recordings__actions { grid-column: 3; grid-row: 1; justify-content: flex-end; max-width: 6rem; }
  .gx-route-workspace__download-row { align-items: stretch; flex-direction: column; }
  .gx-route-workspace__download-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-route-workspace__download-actions .gx-btn { padding-inline: var(--sp-2); }
}
@media (max-width: 380px) {
  .gx-recordings__filters { grid-template-columns: minmax(0, 1fr); }
}

.gx-recordings .gx-section__header { cursor: default; }

.gx-field[type="file"] { max-width: 100%; min-width: 0; font: inherit; }
.gx-field[type="file"]::file-selector-button { border: 0; border-radius: var(--radius-full); background: var(--primary-container); color: var(--on-primary-container); font: inherit; font-weight: var(--fw-bold); padding: .65rem 1rem; margin-right: var(--sp-3); cursor: pointer; }
.gx-field[type="file"]::file-selector-button:hover { background: var(--primary); color: var(--on-primary); }
input[type="checkbox"]:not(.gx-switch input) { appearance: none; flex: none; width: 1.15rem; height: 1.15rem; margin: 0 .35rem 0 0; border: 2px solid var(--outline); border-radius: .25rem; background: var(--surface-container); vertical-align: middle; cursor: pointer; }
input[type="checkbox"]:not(.gx-switch input):checked { background: var(--primary); border-color: var(--primary); }
input[type="checkbox"]:not(.gx-switch input):checked::after { content: ""; display: block; width: .3rem; height: .6rem; border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: translate(.3rem, .08rem) rotate(45deg); }
input[type="checkbox"]:not(.gx-switch input):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }

/* Shared action groups wrap while keeping their controls within the page. */
.gx-btn { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.gx-actions, .gx-tabs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.gx-actions > * { max-width: 100%; }
.gx-driving__actions > .gx-field { flex: 1 1 14rem; min-width: 0; }
.gx-action-icon { flex: none; background: var(--primary-container); color: var(--primary); }
.gx-action-icon:disabled { opacity: .4; cursor: default; }
.gx-actions [aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.gx-sentry-channel__fields label, .gx-field-group, label:has(> .gx-select), label:has(> select) { display: grid; gap: var(--sp-2); min-width: 0; }
.gx-field-group > .gx-select { width: 100%; }
.gx-info-card { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.gx-info-card > h3, .gx-info-card > p { margin: 0; }
.gx-install-app { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.gx-install-app > .gx-note { flex-basis: 100%; margin: 0; }
.gx-install-benefits { display: grid; gap: var(--sp-3); color: var(--text-muted); }
.gx-install-benefits li { display: flex; align-items: center; gap: var(--sp-3); }
.gx-install-benefits i { color: var(--primary); }
.gx-home__last .gx-home__date { font-size: var(--fs-sm); color: var(--text-muted); margin-block: var(--sp-2) var(--sp-4); }
.gx-home__model-tag { min-width: 0; overflow-wrap: anywhere; }
.gx-camera-status, .gx-tool-footer { font-size: var(--fs-xs); color: var(--text-muted); }

.gx-boot { position: fixed; inset: 0; z-index: 1000; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--panel-padding); text-align: center; background: url("../assets/restart-background.webp") center 42% / cover no-repeat #0c0a14; color: #f5edff; transition: opacity 460ms cubic-bezier(0.16, 1, 0.3, 1); }
.gx-boot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, #38205499 0%, #151020c7 65%, #0c0a14f2 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.gx-boot--arriving { animation: gx-boot-arrive 460ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes gx-boot-arrive { from { opacity: 0; } to { opacity: 1; } }
.gx-boot--done { opacity: 0; }
.gx-boot[hidden] { display: none; }
.gx-boot h1, .gx-boot p { margin: 0; }
.gx-boot h1 { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: .08em; }
.gx-boot p { max-width: 30rem; color: #c9b6e3; }
.gx-boot__logo { width: clamp(120px, 28vw, 180px); height: auto; filter: drop-shadow(0 0 35px #b37cff66); }
.gx-boot__orbit { width: 36px; height: 36px; border: 2px solid #cba3ff33; border-top-color: #cba3ff; border-radius: 50%; animation: gx-spin 1.2s linear infinite; }
.gx-boot--failed .gx-boot__orbit { display: none; }
.gx-boot [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .gx-boot__orbit, .gx-boot--arriving { animation: none; } }
@keyframes gx-spin { to { transform: rotate(360deg); } }

.gx-device-state__icon { color: var(--secondary); flex: none; }
.gx-device-state__icon.is-stale { color: var(--text-muted); }

.gx-route-stage { display: grid; min-width: 0; overflow-x: clip; }
.gx-route { grid-area: 1 / 1; align-self: start; width: 100%; min-width: 0; }
.gx-route > *, .gx-settings__body > * { min-width: 0; max-width: 100%; }
.gx-route .gx-card { min-width: 0; overflow-wrap: anywhere; }
.gx-route-enter-active, .gx-route-leave-active { transition: opacity 320ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1); }
.gx-route-leave-active { pointer-events: none; }
.gx-route-enter-from { opacity: 0; transform: translateX(calc(var(--route-direction, 1) * 100%)); }
.gx-route-leave-to { opacity: 0; transform: translateX(calc(var(--route-direction, 1) * -100%)); }

/* Reusable nested-panel transition: a seamless directional crossfade used inside pages. */
.gx-panel-stage { display: grid; min-width: 0; }
.gx-panel-stage > * { grid-area: 1 / 1; align-self: start; width: 100%; min-width: 0; }
.gx-panel-enter-active, .gx-panel-leave-active { transition: opacity var(--motion-base), transform var(--motion-slow); }
.gx-panel-leave-active { pointer-events: none; }
.gx-panel-enter-from { opacity: 0; transform: translateX(calc(var(--panel-direction, 1) * 28px)); }
.gx-panel-leave-to { opacity: 0; transform: translateX(calc(var(--panel-direction, 1) * -28px)); }

.gx-nav-footer { margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .gx-route-enter-active, .gx-route-leave-active, .gx-nav-indicator, .blur-nav .nav-item i { transition: none; } .gx-app { animation: none; } .gx-panel-enter-active, .gx-panel-leave-active { transition: none; } }

.gx-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-4); }
.gx-summary > div { display: flex; flex-direction: column; min-width: 0; text-align: center; }
.gx-summary dt { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.35; overflow-wrap: anywhere; }
.gx-summary dd { order: -1; margin: 0 0 var(--sp-1); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--primary); overflow-wrap: anywhere; }

/* Android Auto setup layout; controls reuse shared Galaxy styles. */
.gx-starport__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.gx-starport__steps > .gx-card { margin-bottom: 0; }
.gx-starport-step { padding: var(--panel-padding); display: grid; gap: var(--sp-4); min-width: 0; }
.gx-starport-step__head { display: flex; align-items: flex-start; gap: var(--sp-4); min-width: 0; }
.gx-starport-step__head h3 { margin: 2px 0 var(--sp-1); font-size: var(--fs-lg); }
.gx-starport-step__head p { margin: 0; color: var(--text-muted); line-height: 1.45; }
.gx-starport-step__head > .gx-btn { margin-left: auto; flex: none; }
.gx-starport-step__num { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--primary-container); color: var(--on-primary-container); font-weight: var(--fw-bold); }
.gx-starport-step--done .gx-starport-step__num { background: var(--success); color: var(--background); }
.gx-starport-home { margin-bottom: 0; }
.gx-starport-step__num.gx-starport-home__icon--live { background: var(--success); color: var(--background); }
.gx-starport-step__body { display: grid; gap: var(--sp-3); min-width: 0; padding-left: calc(36px + var(--sp-4)); }
.gx-starport-step__body > p { margin: 0; line-height: 1.45; }
.gx-starport-step__body > p:has(> .gx-spinner) { display: flex; align-items: center; gap: var(--sp-2); }
.gx-starport-step__body > .gx-driving__actions { margin-block: 0; }
.gx-starport-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.gx-starport-status__actions { margin-left: auto; }
.gx-starport-pill { display: inline-flex; align-items: center; gap: var(--sp-2); width: fit-content; max-width: 100%; margin: 0; padding: 6px 14px;
  border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow-wrap: anywhere;
  background: var(--surface-container-high); color: var(--on-surface-variant); border: 1px solid var(--outline); }
.gx-starport-pill::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gx-starport-pill:has(> i)::before { display: none; }
.gx-starport-pill--ready { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); }
.gx-starport-pill--soon { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.gx-starport-pill--expired, .gx-starport-pill--broken { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); background: color-mix(in srgb, var(--error) 12%, transparent); }
.gx-starport-list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--outline); border-radius: var(--radius-md); overflow: hidden; }
.gx-starport-list > .gx-starport-row + .gx-starport-row { border-top: 1px solid var(--outline); }
.gx-starport-row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; margin: 0; padding: var(--sp-3) var(--sp-4); }
.gx-starport-list .gx-starport-row { background: var(--surface-container); }
.gx-starport-row > i { flex: 0 0 auto; font-size: 1.3rem; color: var(--primary); }
.gx-starport-row__text { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; text-align: left; }
.gx-starport-row__text strong { overflow-wrap: anywhere; }
.gx-starport-row__text small { color: var(--text-muted); }
.gx-starport-row > .gx-btn, .gx-starport-row > .gx-starport-pill { flex: 0 0 auto; }
.gx-starport-ok { color: var(--success); }
.gx-starport-bad { color: var(--error); }
.gx-spinner { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--outline); border-top-color: var(--primary); animation: gx-spin .9s linear infinite; }
.gx-starport-prompt { display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius-md); background: var(--primary-container); min-width: 0; }
.gx-starport-prompt p { margin: 0; }
.gx-starport-prompt__code { font-size: 1.6rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.gx-starport-cta { width: 100%; }
.gx-starport-wiki { border-top: 1px solid var(--outline); padding-top: var(--sp-3); color: var(--on-surface-variant); line-height: 1.5; }
.gx-starport-wiki > summary { cursor: pointer; color: var(--primary); font-weight: var(--fw-medium); list-style: none; display: flex; align-items: center; gap: 0.25em; }
.gx-starport-wiki > summary::-webkit-details-marker { display: none; }
.gx-starport-wiki > summary::before { content: "›"; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1em; height: 1em; line-height: 1; transform-origin: 50% 50%; transition: transform var(--motion-fast); }
.gx-starport-wiki[open] > summary::before { transform: rotate(90deg); }
.gx-starport-wiki > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-sm); }
.gx-starport-wiki p, .gx-starport-wiki ol, .gx-starport-wiki ul { margin: var(--sp-3) 0 0; }
.gx-starport-wiki ol, .gx-starport-wiki ul, .gx-starport-mirror-steps { padding-left: 1.3em; display: grid; gap: var(--sp-1); }
.gx-starport-wiki ul { list-style: disc; }
.gx-starport-mirror-steps { margin: 0; }
.gx-card.gx-starport-sheet__dialog {
  position: fixed;
  inset: max(20px, env(safe-area-inset-top, 0px)) 0 max(20px, env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - max(20px, env(safe-area-inset-bottom, 0px)));
  width: min(calc(100% - 32px), 560px);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
@media (max-width: 767px) {
  .gx-card.gx-starport-sheet__dialog {
    bottom: var(--bottomnav-clearance);
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - var(--bottomnav-clearance));
    width: min(calc(100% - 24px), 560px);
    border-radius: var(--radius-md);
  }
}
.gx-starport-sheet__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--sp-3) var(--sp-4) 0;
  min-height: 48px;
}
.gx-starport-sheet__body {
  display: grid;
  gap: var(--sp-4);
  padding: 0 var(--sp-5) var(--sp-5);
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 500px) {
  .gx-starport-sheet__body { padding: 0 var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .gx-starport-sheet__toolbar { padding: var(--sp-2) var(--sp-3) 0; }
}
.gx-starport-sheet__head {
  gap: var(--sp-1);
}
.gx-starport-sheet__lead {
  align-items: center;
}
.gx-starport-sheet__dialog h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
.gx-starport-sheet__dialog .gx-note {
  line-height: 1.45;
}

.gx-starport-sheet__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.gx-starport-step-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-container);
  border: 1px solid var(--outline);
  transition: border-color var(--motion-fast);
}
.gx-starport-step-card:focus-within {
  border-color: var(--primary);
}
.gx-starport-step-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.gx-starport-step-card__num {
  width: 28px;
  height: 28px;
  font-size: var(--fs-sm);
}
.gx-starport-step-card__title {
  display: grid;
  gap: 1px;
}
.gx-starport-step-card__title strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--on-surface);
}
.gx-starport-step-card__title small {
  font-size: var(--fs-xs);
  color: var(--on-surface-variant);
}
.gx-starport-step-card__body {
  display: grid;
  gap: var(--sp-2);
  padding-left: 40px;
}
@media (max-width: 500px) {
  .gx-starport-step-card__body { padding-left: 0; }
  .gx-starport-step-card { padding: var(--sp-3); }
}
.gx-starport-sheet__step--muted { opacity: .7; }

.gx-starport-file { position: relative; }
.gx-starport-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gx-starport-file:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.gx-starport-file--disabled { opacity: .4; pointer-events: none; }
.gx-starport-file-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.gx-starport-file-chip small {
  color: var(--text-muted);
}

.gx-starport-checks { display: grid; gap: var(--sp-2); width: 100%; }
.gx-starport-checks li { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); }
.gx-starport-checks li::before {
  flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: var(--fw-bold);
  content: ""; border: 2px solid var(--outline); box-sizing: border-box;
}
.gx-starport-checks .gx-starport-check--done, .gx-starport-checks .gx-starport-check--active { color: var(--on-surface); }
.gx-starport-checks .gx-starport-check--done::before { content: "✓"; border: 0; background: var(--success); color: var(--background); }
.gx-starport-checks .gx-starport-check--active::before { border-top-color: var(--primary); animation: gx-spin .9s linear infinite; }
.gx-starport-checks .gx-starport-check--failed { color: var(--error); }
.gx-starport-checks .gx-starport-check--failed::before { content: "✕"; border: 0; background: var(--error); color: var(--on-error); }

.gx-starport-sheet__done {
  padding: var(--sp-4) var(--sp-2);
}
.gx-starport-done-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  box-shadow: 0 0 24px var(--primary-glow);
}

.gx-starport-sheet__footer {
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--outline-variant);
}
.gx-starport-trademark { display: block; font-size: var(--fs-xs); opacity: .75; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .gx-spinner, .gx-starport-checks .gx-starport-check--active::before { animation: none; } }
@media (max-width: 600px) {
  .gx-starport-step { padding: var(--sp-4); }
  .gx-starport-step__body { padding-left: 0; }
  .gx-starport-status__actions { margin-left: 0; width: 100%; }
  .gx-starport-status__actions .gx-btn { flex: 1 1 auto; }
  .gx-starport-row { flex-wrap: wrap; }
}
.gx-update-progress { margin: var(--sp-4) 0; }
.gx-update-progress__heading { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.gx-update-progress__track { height: 10px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-container-high); }
.gx-update-progress__fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--secondary), var(--primary)); transition: width .3s ease; }
.gx-update-progress__fill--indeterminate { width: 35%; animation: gx-update-progress 1.6s ease-in-out infinite; }
@keyframes gx-update-progress { from { transform: translateX(-100%); } to { transform: translateX(385%); } }
@media (prefers-reduced-motion: reduce) { .gx-update-progress__fill--indeterminate { width: 100%; animation: none; opacity: .6; } }

/* Composition utilities: shared page chrome and controls need no inline styles. */
.gx-panel { padding: var(--panel-padding); min-width: 0; }
.gx-card.gx-panel > .gx-section__header { margin: calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) var(--sp-4); }
.gx-panel > :first-child { margin-top: 0; }
.gx-panel > :last-child { margin-bottom: 0; }
.gx-panel-footer { padding: 0 var(--panel-padding) var(--panel-padding); }
.gx-model-card .gx-panel-footer > .gx-row { flex: 1 1 100%; }
.gx-stack { display: grid; gap: var(--sp-3); min-width: 0; }
.gx-cluster { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.gx-grow { flex: 1; min-width: 0; }
.gx-wrap { overflow-wrap: anywhere; }
.gx-tags { margin-top: var(--sp-2); }
.gx-inset { margin: var(--sp-4); max-width: calc(100% - 2 * var(--sp-4)); }
.gx-text-danger { color: var(--error); }
.gx-row.gx-row--borderless { border-top: 0; }
.gx-row--wrap { flex-wrap: wrap; }
.gx-row__info.gx-row__info--wide { flex: 1 1 180px; }
.gx-filter-field { flex: 1 1 14rem; min-width: 0; }
.gx-media { display: block; max-width: 100%; height: auto; }
.gx-media--spaced { margin-top: var(--sp-4); }
.gx-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.gx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-device-picker__row { display: flex; align-items: center; gap: var(--sp-1); }
.gx-device-picker__form { padding: var(--sp-2); display: grid; gap: var(--sp-2); }
.gx-tunnel__qr { display: block; width: min(250px, 100%); background: white; padding: var(--sp-2); border-radius: var(--radius-sm); }

.gx-plots__hint { min-height: 2.8em; }
.gx-tabs > button { min-height: var(--touch-target); padding: var(--sp-2) var(--sp-4); }
.gx-tabs > button[aria-pressed="true"], .gx-tabs > button[aria-selected="true"], .gx-chip--selected { background: var(--primary); color: var(--on-primary); }
.gx-field:disabled, .gx-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.gx-icon-btn:disabled:hover { background: transparent; }
.gx-field:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gx-note { line-height: 1.5; }
progress { max-width: 100%; accent-color: var(--primary); }
@media (max-width: 600px) { :root { --panel-padding: var(--sp-4); } }

.gx-page-header h2, .gx-view > h2, .gx-tunnel > h2, .gx-monitor h2 { font-size: var(--fs-xl); line-height: 1.3; margin: 0 0 var(--sp-2); }
.gx-page-header p, .gx-page-description { margin: 0; color: var(--on-surface-variant); font-size: var(--fs-sm); line-height: 1.5; }
.gx-details { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 2fr); gap: var(--sp-2) var(--sp-3); margin: 0; }
.gx-details dt { color: var(--on-surface-variant); }
.gx-details dd { margin: 0; overflow-wrap: anywhere; }
.gx-driving .gx-row { flex-wrap: wrap; }
.gx-driving .gx-row > strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gx-bt-card > h3 { margin: 0 0 var(--sp-2); }
.gx-bt-adapter__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.gx-bt-adapter__actions > .gx-btn { padding-inline: var(--sp-2); white-space: nowrap; }
.gx-row__desc.gx-bt-device__state { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.gx-bt-device__state > .gx-status-dot { border: 1.5px solid currentColor; box-sizing: border-box; }
.gx-bt-device__state.is-connected { color: var(--success); }
.gx-bt-device__state.is-connected > .gx-status-dot { background: currentColor; }
.gx-bt-device__actions { display: grid; grid-template-columns: repeat(2, 7.5rem); gap: var(--sp-2); }
.gx-bt-device__actions > .gx-btn { padding-inline: var(--sp-2); }
@media (max-width: 520px) {
  .gx-bt-device__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; }
}
.gx-card-grid > .gx-card, .gx-settings__grid > .gx-card, .gx-favorites__slots > .gx-card, .gx-home__grid > .gx-card, .gx-home__pair > .gx-card { margin-bottom: 0; }
@media (max-width: 600px) {
  .gx-details { grid-template-columns: 1fr; gap: var(--sp-1); }
  .gx-details dd { margin-bottom: var(--sp-2); }
}

/* Descriptions are ordinary page content; notices communicate changing state. */
.gx-settings-tabs > button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

.gx-replay__player { --replay-accent: var(--primary); position: relative; background: #000; border-radius: 0; overflow: hidden; }
.gx-replay__screen { position: relative; }
.gx-replay__video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 65dvh; background: #000; }
.gx-replay__loading { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: 0; color: #fff; }
.gx-replay__media-controls { position: absolute; inset: auto 0 0; padding: var(--sp-2) clamp(8px, 4.6%, 48px); background: rgb(8 8 10 / 75%); color: #ecf2fa; }
.gx-replay__controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1.8vw, 20px); }
.gx-replay__controls .gx-btn, .gx-replay__fullscreen { min-width: 0; min-height: var(--touch-target); padding: 8px 2px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 9px; background: rgb(255 255 255 / 4%); color: #ecf2fa; box-shadow: none; font-size: clamp(12px, 1.8vw, 20px); font-weight: 500; }
.gx-replay__controls .gx-btn:hover:not(:disabled) { background: rgb(255 255 255 / 8%); }
.gx-replay__controls .gx-btn:active:not(:disabled), .gx-replay__fullscreen:active { background: #2f2151; border-color: var(--replay-accent); }
.gx-replay__controls .gx-btn:disabled { color: #a0aab9; }
.gx-replay__controls .gx-btn:focus-visible, .gx-replay__fullscreen:focus-visible { outline: 2px solid var(--replay-accent); outline-offset: 2px; }
.gx-replay__fullscreen { position: absolute; top: 8px; right: 8px; width: var(--touch-target); background: rgb(8 8 10 / 82%); }
.gx-replay__timeline { display: grid; gap: 0; font-size: clamp(12px, 1.3vw, 16px); }
.gx-replay__track { position: relative; display: block; height: 48px; --replay-thumb: 16px; --replay-rail: 24px; --replay-tick: 5px; --replay-gap: 2px; }
.gx-replay__rail { position: absolute; left: calc(var(--replay-thumb) / 2); right: calc(var(--replay-thumb) / 2); height: calc(var(--replay-rail) + var(--replay-tick) + var(--replay-gap)); top: 50%; transform: translateY(-50%); pointer-events: none; }
.gx-replay__rail canvas { display: block; width: 100%; height: 100%; }
.gx-replay__playhead { position: absolute; left: var(--replay-position); top: calc(var(--replay-tick) + var(--replay-gap) - 1px); width: 2px; height: calc(var(--replay-rail) + 2px); transform: translateX(-50%); background: #fff; }
.gx-replay__playhead::after { content: ""; position: absolute; left: -3px; bottom: -6px; width: 8px; height: 3px; background: #fff; }
.gx-replay__preview { --preview-half: min(130px, 50%); position: absolute; left: clamp(var(--preview-half), var(--replay-position), calc(100% - var(--preview-half))); bottom: calc(100% + 50px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: 260px; max-width: 100%; min-height: 42px; padding: 10px 14px; border: 1px solid #626d7e; border-radius: 10px; background: #101318; color: #ecf2fa; font-size: 14px; line-height: 20px; }
.gx-replay__preview-line { position: absolute; bottom: calc(100% + 34px); left: var(--replay-position); width: 1px; height: 12px; background: #a0aab9; }
.gx-replay__preview i { flex: 0 0 10px; height: 10px; background: #a0aab9; }
.gx-replay__preview > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-replay__timeline input { appearance: none; -webkit-appearance: none; position: relative; display: block; width: 100%; height: 100%; min-height: var(--touch-target); background: transparent; color-scheme: dark; margin: 0; padding: 0; border: 0; touch-action: none; }
.gx-replay__timeline input::-webkit-slider-runnable-track { height: 10px; background: transparent; }
.gx-replay__timeline input::-moz-range-track, .gx-replay__timeline input::-moz-range-progress { height: 10px; background: transparent; }
.gx-replay__timeline input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--replay-thumb); height: var(--replay-thumb); margin-top: -3px; background: transparent; border: 0; }
.gx-replay__timeline input::-moz-range-thumb { width: var(--replay-thumb); height: var(--replay-thumb); background: transparent; border: 0; }
.gx-replay__timeline input:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 4px; }
.gx-replay__timeline input:disabled { opacity: .65; }
.gx-replay__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.gx-replay__legend span { display: inline-flex; align-items: center; gap: 6px; }
.gx-replay__legend i { display: inline-block; width: 8px; height: 12px; }
.gx-replay__player:fullscreen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; }
.gx-replay__player:fullscreen .gx-replay__video { max-height: 100dvh; }
@media (max-width: 600px) {
  .gx-replay__track { --replay-rail: 20px; --replay-tick: 4px; }
  .gx-replay__media-controls { position: static; padding-inline: 4px; }
  .gx-replay__controls { gap: 4px; }
  .gx-replay__player:fullscreen .gx-replay__video { min-height: 0; flex: 1; }
}

.gx-spotify-now { display: grid; gap: var(--sp-3); }
.gx-spotify > .gx-starport-step > h3 { margin: 0; font-size: var(--fs-lg); }
.gx-spotify-now__main { display: flex; gap: var(--sp-3); align-items: center; justify-content: center; min-width: 0; }
.gx-spotify-now__text { min-width: 0; }
.gx-spotify-now__text h3, .gx-spotify-now__text p { margin: 0; }
.gx-spotify-now__progress { display: grid; gap: 2px; }
.gx-spotify-now__controls { align-items: center; justify-content: center; flex-wrap: wrap; }
.gx-spotify-now__play { min-width: 64px; font-size: 1.4rem; }
/* Auto Learn results use existing cards and plot colors. */
.gx-flm__facts { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.gx-flm__facts dd { margin: .3rem 0 0; }
.gx-flm__table-wrap { overflow-x: auto; max-width: 100%; }
.gx-flm__table { width: 100%; border-collapse: collapse; text-align: left; }
.gx-flm__table th, .gx-flm__table td { padding: .65rem; border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
.gx-flm__table td:nth-child(2), .gx-flm__table td:nth-child(3), .gx-flm__table td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-flm__table tbody th { font-weight: 500; min-width: 12rem; }
@media (max-width: 700px) {
  .gx-flm__table-wrap { overflow: visible; }
  .gx-flm__table, .gx-flm__table tbody, .gx-flm__table tr { display: block; }
  .gx-flm__table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gx-flm__table tbody tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--outline-variant); }
  .gx-flm__table tbody th { display: block; min-width: 0; padding: 0 0 var(--sp-2); border: 0; font-weight: 600; }
  .gx-flm__table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-1) 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .gx-flm__table td:nth-child(n) { white-space: normal; }
  .gx-flm__table td::before { content: attr(data-label); color: var(--text-muted); }
  .gx-monitor table { min-width: 42rem; }
}
@media (max-width: 380px) {
  .gx-flm__table td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.gx-starport-progress { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--outline)); border-radius: var(--radius-md); background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 12%, var(--surface-container)), var(--surface-container)); min-width: 0; }
.gx-starport-progress__heading { display: flex; align-items: center; gap: var(--sp-3); }
.gx-starport-progress__heading > div { display: grid; gap: var(--sp-1); min-width: 0; }
.gx-starport-progress__heading small { color: var(--primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; }
.gx-starport-progress__heading strong { font-size: var(--fs-lg); line-height: 1.35; overflow-wrap: anywhere; }
.gx-starport-progress__heading > i { color: var(--primary); font-size: 1.8rem; }
.gx-starport-progress p { margin: 0; color: var(--on-surface-variant); line-height: 1.5; overflow-wrap: anywhere; }
.gx-starport-progress--success { border-color: var(--success); }
.gx-starport-progress--success .gx-starport-progress__heading > i, .gx-starport-progress--success small { color: var(--success); }
.gx-starport-progress--warning { border-color: var(--warning); }
.gx-starport-progress--warning small, .gx-starport-progress--warning .gx-starport-progress__heading > i { color: var(--warning); }
.gx-starport-orbit { width: 34px; height: 34px; border-width: 3px; border-color: color-mix(in srgb, var(--primary) 20%, transparent); border-top-color: var(--primary); border-right-color: var(--secondary, var(--primary)); }
.gx-starport-orbit--small { width: 22px; height: 22px; }
.gx-starport-progress__track { height: 4px; overflow: hidden; border-radius: var(--radius-full); background: color-mix(in srgb, var(--primary) 15%, transparent); }
.gx-starport-progress__track > span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary, var(--primary))); animation: gx-starport-travel 1.8s ease-in-out infinite alternate; }
@keyframes gx-starport-travel { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.gx-starport-list .gx-starport-row--active { background: color-mix(in srgb, var(--primary) 12%, var(--surface-container)); box-shadow: inset 3px 0 var(--primary); }
.gx-starport-row--active strong { color: var(--primary); }
.gx-starport-list .gx-starport-row--done > i { color: var(--success); }
.gx-starport-row--failed strong { color: var(--error); }
.gx-starport-guide { padding: var(--sp-4); border-radius: var(--radius-md); background: var(--surface-container); border: 1px solid var(--outline); line-height: 1.5; }
.gx-starport-guide > strong { color: var(--primary); }
.gx-starport-guide ol { display: grid; gap: var(--sp-3); padding-left: 1.5em; margin-bottom: 0; }
.gx-starport-guide li::marker { color: var(--primary); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .gx-starport-progress__track > span { animation: none; }
  .gx-starport-progress__track > span { width: 100%; opacity: .6; }
}
.gx-starport-checks .gx-starport-check--active { padding: var(--sp-3); border-radius: var(--radius-sm); color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); font-weight: var(--fw-bold); }
.gx-starport-checks .gx-starport-check--active::before { border-right-color: var(--secondary, var(--primary)); }