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-pip .gx-settings__header, .gx-vasm .gx-settings__header { flex-direction: column;align-items: stretch;}
  .gx-pip .gx-settings__header > .gx-actions, .gx-vasm .gx-settings__header > .gx-actions { flex: 1 1 auto;width: 100%;}
}
@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-card.gx-plots__panel { min-width: 0;--card-inset: clamp(.85rem, 2vw, 1.25rem);padding: var(--card-inset);background: linear-gradient(var(--surface), var(--surface)), var(--background);backdrop-filter: none;}
/* Telemetry can change length without moving the chart or the next card. */
.gx-plots__source { min-height: 2.8em;}
.gx-plots__readout { display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: .75rem;margin: .85rem 0;}
.gx-plots__readout dt { color: var(--on-surface-variant);font-size: .8rem;}
.gx-plots__readout dd { margin: .2rem 0 0;min-height: 1.5em;font-variant-numeric: tabular-nums;white-space: nowrap;overflow: auto;}
.gx-plots__match { min-height: 4.5em;line-height: 1.5;}
.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%;}
.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);}
.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;}
.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-note--warning { color: var(--warning);}
.gx-sentry-busy { min-height: 1.5em;}
.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);}
.gx-starport-send__row { display: grid;gap: var(--sp-3);margin-top: var(--sp-3);}
.gx-starport-send__row .gx-field { width: 100%;box-sizing: border-box;}
.gx-starport-send__field { position: relative;}
.gx-starport-send__field .gx-field { padding-right: 4.5em;}
.gx-starport-send__count { position: absolute;top: 50%;right: 12px;transform: translateY(-50%);pointer-events: none;font-size: var(--fs-xs);opacity: .7;font-variant-numeric: tabular-nums;}
.gx-starport-send__row > .gx-btn { justify-self: start;}
@media (max-width: 600px) { .gx-starport-send__row > .gx-btn { justify-self: stretch;} }
@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;}
.gx-sentry-events { display: grid;grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));gap: var(--sp-3);}
.gx-sentry-event { display: flex;flex-direction: column;overflow: hidden;}
.gx-sentry-event .gx-row__info { display: grid;gap: var(--sp-1);}
.gx-sentry-event .gx-row__info small { word-break: break-all;}
.gx-sentry-event__media { display: grid;grid-auto-flow: column;grid-auto-columns: 1fr;grid-template-rows: minmax(0, 1fr);gap: 2px;aspect-ratio: 4 / 3;overflow: hidden;}
.gx-sentry-event__media .gx-media { width: 100%;height: 100%;object-fit: cover;}
.gx-sentry-events__bar { justify-content: space-between;}
.gx-sentry-events__bar p { margin: 0;}
.gx-sentry-relay { margin-top: var(--sp-3);}

/* 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;}
.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;} }
.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;}
/* A section title inside a settings page: a label only, never dimmed like an unavailable control. */
.gx-row.gx-row--heading, .gx-row.gx-row--heading.disabled { opacity: 1;padding-top: var(--sp-5);}
.gx-row--heading .gx-row__label { font-weight: 700;letter-spacing: .04em;text-transform: uppercase;opacity: .75;}
.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;}
.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));}
/* StarPilot Tuner shares Galaxy surfaces, spacing and source-aware state colors. */
.gx-tuner { display: grid;gap: var(--sp-5);min-width: 0;padding-bottom: var(--sp-4);}
.gx-tuner h2, .gx-tuner h3, .gx-tuner h4, .gx-tuner p { margin: 0;}
.gx-tuner__heading h2 { font-size: clamp(1.8rem, 4vw, 2.3rem);letter-spacing: -.04em;margin: 5px 0;}
.gx-tuner__heading > div > p:last-child { color: var(--on-surface-variant);}
.gx-tuner__eyebrow { display: flex;align-items: center;gap: 8px;font-size: .66rem;line-height: 1.5;font-weight: 600;letter-spacing: .13em;color: var(--on-surface-variant);}
.gx-card.gx-tuner__hero { --tuner-accent: var(--text-muted);display: grid;grid-template-columns: 78px minmax(0, 1fr) auto;align-items: center;gap: var(--sp-5);padding: clamp(20px, 3vw, 32px);background: linear-gradient(115deg, var(--primary-container), transparent 65%), var(--surface);border-color: color-mix(in srgb, var(--primary) 25%, var(--glass-border));}
.gx-tuner__hero[data-tone="active"] { --tuner-accent: var(--primary);}
.gx-tuner__hero[data-tone="success"], .gx-tuner__hero[data-tone="ready"] { --tuner-accent: var(--secondary);}
.gx-tuner__hero[data-tone="warning"] { --tuner-accent: var(--warning);}
.gx-tuner__hero-icon { display: grid;place-items: center;width: 78px;height: 78px;border: 1px solid var(--glass-border);border-radius: 24px;color: var(--tuner-accent);background: var(--surface-container);font-size: 2rem;}
.gx-tuner__hero-copy { display: grid;gap: 8px;}
.gx-tuner__hero-copy h3 { font-size: clamp(1.3rem, 2.7vw, 1.8rem);line-height: 1.2;letter-spacing: -.03em;}
.gx-tuner__hero-copy > p { max-width: 65ch;color: var(--on-surface-variant);font-size: .88rem;line-height: 1.6;}
.gx-tuner__status-dot { width: 6px;height: 6px;border-radius: 50%;background: var(--tuner-accent);box-shadow: 0 0 12px color-mix(in srgb, var(--tuner-accent) 35%, transparent);}
.gx-tuner__hero-meta { display: grid;gap: 7px;max-width: 170px;border-left: 1px solid var(--glass-border);padding-left: 24px;font-size: .75rem;line-height: 1.5;}
.gx-tuner__hero-meta small { color: var(--text-muted);}
.gx-tuner__current-job { display: flex;gap: 8px;color: var(--on-primary-container);}
.gx-tuner__tabs { overflow-x: auto;display: flex;align-items: center;gap: 4px;border-bottom: 1px solid var(--glass-border);}
.gx-tuner__tabs > button { position: relative;min-height: 48px;padding: 0 16px 14px;border: 0;background: transparent;color: var(--on-surface-variant);font: inherit;font-size: .86rem;cursor: pointer;white-space: nowrap;}
.gx-tuner__tabs > button[aria-selected="true"] { color: var(--on-surface);font-weight: 600;}
.gx-tuner__tabs > button[aria-selected="true"]::after { position: absolute;content: "";bottom: -1px;left: 15px;right: 15px;height: 3px;border-radius: 3px 3px 0 0;background: var(--primary);}
.gx-tuner__tabs > button:focus-visible, .gx-tuner__groups > button:focus-visible { outline: 2px solid var(--primary);outline-offset: 3px;border-radius: var(--radius-sm);}
.gx-tuner__count { display: inline-block;margin-left: 7px;padding: 1px 6px;border: 1px solid var(--glass-border);border-radius: var(--radius-full);font-size: .62rem;color: var(--on-surface-variant);vertical-align: middle;}
.gx-tuner__panel { display: grid;gap: var(--sp-5);min-width: 0;}
.gx-tuner__metrics { display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: var(--sp-4);}
.gx-card.gx-tuner__metric { display: grid;gap: 9px;padding: 20px 24px;min-width: 0;}
.gx-tuner__metric > span { font-size: .77rem;color: var(--on-surface-variant);}
.gx-tuner__metric > strong { font-size: 1.9rem;line-height: 1.15;font-weight: 500;letter-spacing: -.04em;font-variant-numeric: tabular-nums;}
.gx-tuner__metric > strong small { font-size: .8rem;color: var(--text-muted);}
.gx-tuner__metric p { color: var(--text-muted);font-size: .68rem;line-height: 1.5;}
.gx-tuner__overview-grid { display: grid;grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);gap: var(--sp-4);}
.gx-card.gx-tuner__section { padding: clamp(18px, 2.5vw, 24px);min-width: 0;}
.gx-tuner__section > p { color: var(--on-surface-variant);font-size: .82rem;line-height: 1.6;margin: 16px 0;}
.gx-tuner__section-heading { display: flex;align-items: start;justify-content: space-between;gap: var(--sp-4);margin-bottom: 18px;}
.gx-tuner__section-heading h3 { font-size: 1.02rem;font-weight: 600;letter-spacing: -.02em;margin-top: 3px;}
.gx-tuner__section-heading p:not(.gx-tuner__eyebrow) { font-size: .8rem;color: var(--on-surface-variant);margin-top: 6px;line-height: 1.5;}
.gx-tuner__pill { flex: 0 0 auto;display: inline-flex;align-items: center;padding: 5px 8px;font-size: .6rem;color: var(--on-surface-variant);border: 1px solid var(--glass-border);border-radius: var(--radius-full);white-space: nowrap;}
.gx-tuner__response svg, .gx-tuner__disclosure svg { width: 100%;height: auto;min-height: 150px;display: block;margin: 20px 0;}
.gx-tuner svg polyline { fill: none;stroke-width: 2.5;vector-effect: non-scaling-stroke;stroke-linejoin: round;stroke-linecap: round;}
.gx-tuner .gx-plot-axis { stroke: var(--on-surface-variant);opacity: .35;stroke-width: 1;}
.gx-tuner .gx-plot-zero { stroke: var(--on-surface-variant);opacity: .2;stroke-width: 1;stroke-dasharray: 4 4;}
.gx-tuner .gx-plot-label { fill: var(--on-surface-variant);font-size: 11px;}
.gx-tuner__legend { display: flex;flex-wrap: wrap;align-items: center;gap: 16px;font-size: .73rem;color: var(--on-surface-variant);}
.gx-tuner__legend > span::before { content: "";width: 14px;height: 3px;display: inline-block;border-radius: 2px;margin-right: 7px;vertical-align: middle;}
.gx-tuner__requested::before { background: #45a9ff;}
.gx-tuner__measured::before { background: #ffa352;}
.gx-tuner__legend small { margin-left: auto;color: var(--text-muted);font-size: .65rem;}
.gx-tuner p.gx-tuner__caption, .gx-tuner__caption { color: var(--text-muted);font-size: .68rem;line-height: 1.6;margin-top: 13px;}
.gx-tuner__empty { display: grid;justify-items: center;align-content: center;gap: 10px;text-align: center;min-height: 215px;padding: 24px;}
.gx-tuner__empty > i { font-size: 1.6rem;color: var(--primary);padding-bottom: 6px;}
.gx-tuner__empty > h4 { font-size: .88rem;font-weight: 500;}
.gx-tuner__empty > p { color: var(--text-muted);font-size: .76rem;line-height: 1.65;max-width: 37ch;}
.gx-tuner__comparison { display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;gap: 18px;margin: 25px 0 0;}
.gx-tuner__comparison > div { display: grid;gap: 8px;}
.gx-tuner__comparison span { color: var(--text-muted);font-size: .7rem;}
.gx-tuner__comparison strong { font-size: 1.15rem;font-weight: 500;font-variant-numeric: tabular-nums;}
.gx-tuner__comparison > i { color: var(--text-muted);font-size: .85rem;}
.gx-tuner p.gx-tuner__observed { font-size: .9rem;color: var(--on-surface);}
.gx-tuner__observed small { display: block;margin-top: 4px;font-size: .65rem;color: var(--text-muted);}
.gx-tuner__quota { margin-top: 20px;}
.gx-tuner__quota > div:first-child { display: flex;justify-content: space-between;gap: 10px;font-size: .7rem;}
.gx-tuner__quota strong { font-weight: 500;font-variant-numeric: tabular-nums;}
.gx-tuner__progress { margin-top: 10px;height: 5px;border-radius: 5px;background: var(--outline);overflow: hidden;}
.gx-tuner__progress > span { display: block;height: 100%;background: var(--primary);border-radius: inherit;}
.gx-tuner__tune-layout { display: grid;grid-template-columns: 250px minmax(0, 1fr);gap: var(--sp-4);align-items: start;}
.gx-tuner__groups { display: grid;gap: 8px;}
.gx-tuner__groups > button { display: flex;align-items: center;gap: 13px;min-height: 70px;padding: 14px;border: 1px solid var(--glass-border);border-radius: var(--radius-sm);background: var(--surface);color: var(--on-surface-variant);text-align: left;cursor: pointer;font: inherit;font-size: .78rem;}
.gx-tuner__groups > button[aria-pressed="true"] { background: var(--primary-container);border-color: var(--primary);color: var(--on-surface);}
.gx-tuner__groups > button > i:first-child { width: 22px;text-align: center;font-size: 1rem;color: var(--primary);}
.gx-tuner__groups > button > i:last-child { margin-left: auto;font-size: .65rem;}
.gx-tuner__groups small { display: block;margin-top: 5px;font-size: .61rem;color: var(--text-muted);}
.gx-tuner__parameter-head, .gx-tuner__parameter { display: grid;grid-template-columns: minmax(140px, 1.5fr) repeat(3, minmax(75px, .75fr));gap: 10px;align-items: center;}
.gx-tuner__parameter-head { color: var(--text-muted);font-size: .61rem;padding: 0 0 12px;}
.gx-tuner__parameter-head > span:not(:first-child), .gx-tuner__parameter > div:not(:first-child) { text-align: right;}
.gx-tuner__parameter { padding: 17px 0;border-top: 1px solid var(--outline-variant);}
.gx-tuner__parameter h4 { font-size: .77rem;line-height: 1.5;font-weight: 500;}
.gx-tuner__parameter strong { font-size: .72rem;font-weight: 500;font-variant-numeric: tabular-nums;}
.gx-tuner__parameter small { display: block;font-size: .6rem;color: var(--text-muted);margin-top: 5px;}
.gx-tuner__mobile-label { display: none;}
.gx-tuner__pending { color: var(--warning);}
.gx-tuner__applied { color: var(--secondary);}
.gx-tuner__disclosure { margin-top: 16px;color: var(--on-surface-variant);font-size: .77rem;}
.gx-tuner__disclosure > summary { padding: 8px 0;min-height: 36px;cursor: pointer;color: var(--on-surface);}
.gx-tuner__disclosure > p { margin-top: 12px;font-size: .74rem;line-height: 1.7;}
.gx-tuner__timeline { list-style: none;margin: 8px 0 18px;padding: 0;}
.gx-tuner__timeline li { position: relative;display: grid;grid-template-columns: 12px 1fr;gap: 18px;padding: 13px 0 20px;}
.gx-tuner__timeline li:not(:last-child)::before { content: "";position: absolute;top: 22px;left: 4px;bottom: -13px;width: 1px;background: var(--glass-border);}
.gx-tuner__timeline-dot { position: relative;width: 9px;height: 9px;border-radius: 50%;border: 2px solid var(--primary);margin-top: 4px;background: var(--background);}
.gx-tuner__timeline-dot--applied { border-color: var(--secondary);background: var(--secondary);}
.gx-tuner__timeline strong { font-size: .85rem;font-weight: 500;}
.gx-tuner__timeline p { margin-top: 6px;color: var(--on-surface-variant);font-size: .77rem;line-height: 1.5;}
.gx-tuner__timeline small { display: block;margin-top: 7px;color: var(--text-muted);font-size: .64rem;}
.gx-tuner__diagnostics { display: grid;grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);gap: 10px 20px;overflow-wrap: anywhere;margin-top: 16px;}
.gx-tuner__diagnostics dt { color: var(--text-muted);}
.gx-tuner__diagnostics dd { margin: 0;font-variant-numeric: tabular-nums;}
@media (max-width: 900px) {
.gx-card.gx-tuner__hero { grid-template-columns: 62px minmax(0, 1fr);gap: 18px;}
.gx-tuner__hero-icon { width: 62px;height: 62px;border-radius: 20px;font-size: 1.7rem;}
.gx-tuner__hero-meta { grid-column: 2;border: 0;padding: 0;max-width: none;display: flex;flex-wrap: wrap;gap: 8px 16px;}
.gx-tuner__overview-grid { grid-template-columns: 1fr;}
.gx-tuner__tune-layout { grid-template-columns: 1fr;}
.gx-tuner__groups { grid-template-columns: repeat(3, minmax(0, 1fr));}
.gx-tuner__groups > button { padding: 12px;gap: 9px;}
.gx-tuner__groups > button > i:last-child { display: none;}
}
@media (max-width: 560px) {
.gx-tuner { gap: 18px;}
.gx-tuner__heading { gap: 12px;}
.gx-tuner__heading > button { padding: 9px 12px;font-size: .72rem;min-width: 44px;}
.gx-tuner__heading > button > i { display: none;}
.gx-card.gx-tuner__hero { grid-template-columns: minmax(0, 1fr);}
.gx-tuner__hero-icon { display: none;}
.gx-tuner__hero-meta { grid-column: 1;font-size: .64rem;}
.gx-tuner__tabs > button { padding: 0 11px 12px;font-size: .76rem;}
.gx-tuner__count { font-size: .56rem;margin-left: 4px;padding: 1px 4px;}
.gx-tuner__metrics { gap: 8px;}
.gx-card.gx-tuner__metric { padding: 15px 11px;gap: 8px;}
.gx-tuner__metric > span { font-size: .75rem;}
.gx-tuner__metric > strong { font-size: 1.5rem;}
.gx-tuner__metric > strong small { font-size: .6rem;}
.gx-tuner__metric p { font-size: .7rem;}
.gx-tuner__pill { font-size: .54rem;padding: 4px 6px;}
.gx-tuner__groups { grid-template-columns: repeat(2, minmax(0, 1fr));}
.gx-tuner__parameter-head { display: none;}
.gx-tuner__parameter { grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px 8px;padding: 15px 0;}
.gx-tuner__parameter > div:first-child { grid-column: 1 / -1;}
.gx-tuner__parameter > div:not(:first-child) { text-align: left;}
.gx-tuner__mobile-label { display: block;color: var(--text-muted);font-size: .59rem;margin-bottom: 6px;}
.gx-tuner__parameter strong { font-size: .72rem;}
.gx-tuner__diagnostics { grid-template-columns: 1fr;gap: 5px;}
.gx-tuner__diagnostics dd { margin-bottom: 12px;}
}
.gx-tuner__manual .gx-row { padding-inline: 0;}
/* Guided setup layout and emphasis; shared rows, buttons, fields and notices keep Galaxy defaults. */
.gx-card.gx-guided { display: grid;gap: var(--sp-5);padding: var(--panel-padding);background-image: radial-gradient(120% 38% at 50% 0, var(--primary-container), transparent 72%);}
.gx-guided__steps { list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(3, 1fr);}
.gx-guided__step { position: relative;display: grid;justify-items: center;gap: var(--sp-2);text-align: center;}
.gx-guided__step::before, .gx-guided__step::after { content: "";position: absolute;top: 15px;height: 2px;width: calc(50% - 8px);background: var(--outline);}
.gx-guided__step::before { left: 0;}
.gx-guided__step::after { right: 0;}
.gx-guided__step:first-child::before, .gx-guided__step:last-child::after { display: none;}
.gx-guided__step.is-done::before, .gx-guided__step.is-done::after, .gx-guided__step.is-current::before,
.gx-guided__step.is-done + .gx-guided__step::before { background: var(--success);}
.gx-guided__node { position: relative;display: grid;place-items: center;width: 32px;height: 32px;border-radius: var(--radius-full);background: var(--surface-container-high);color: var(--on-surface-variant);font-weight: var(--fw-bold);}
.gx-guided__step.is-current .gx-guided__node { background: var(--primary);color: var(--on-primary);box-shadow: 0 0 0 var(--sp-1) var(--primary-container), 0 var(--sp-1) var(--sp-4) var(--primary-glow);}
.gx-guided__step.is-done .gx-guided__node { background: var(--success);color: var(--background);}
.gx-guided__step-label, .gx-guided__hint { font-size: var(--fs-sm);color: var(--on-surface-variant);}
.gx-guided__header, .gx-guided__section, .gx-guided__body { display: grid;gap: var(--sp-3);min-width: 0;}
.gx-guided__header > *, .gx-guided__subhead, .gx-guided__hint { margin: 0;}
.gx-guided__header { max-width: 34rem;gap: var(--sp-2);}
.gx-guided__title { font-size: clamp(1.625rem, 2.5vw, 1.875rem);line-height: 1.15;letter-spacing: -.02em;text-wrap: balance;}
.gx-guided__lede { color: var(--on-surface-variant);font-size: var(--fs-base);line-height: 1.5;}
.gx-guided__subhead { font-size: var(--fs-base);color: var(--on-surface-variant);}
.gx-guided__body:empty { display: none;}
.gx-guided__option { display: flex;align-items: center;gap: var(--sp-3);min-height: var(--touch-target);padding: var(--sp-3) var(--sp-4);cursor: pointer;}
.gx-guided__option:hover:not(:has(:disabled)) { background: var(--glass-bg-hover);}
.gx-guided__option:has(:checked) { background: var(--primary-container);color: var(--on-primary-container);}
.gx-guided__option:has(:disabled), .gx-guided__choice:has(:disabled) { opacity: .6;cursor: default;}
.gx-guided__option:focus-within, .gx-guided__choice:focus-within { outline: 2px solid var(--primary);outline-offset: -2px;}
.gx-guided__options { background: var(--surface-container);}
.gx-guided__options > li + li { border-top: 1px solid var(--outline);}
.gx-guided__option input { flex: none;order: 1;width: var(--sp-5);height: var(--sp-5);margin: 0;accent-color: var(--primary);}
.gx-guided__option:has(:checked) .gx-guided__tile { background: var(--primary);color: var(--on-primary);}
.gx-guided__segmented { display: flex;flex-wrap: wrap;gap: var(--sp-1);padding: var(--sp-1);border-radius: var(--radius-sm);background: var(--surface-container-high);}
.gx-guided__choice { flex: 1 1 7rem;min-width: 0;min-height: var(--touch-target);padding: var(--sp-2);border-radius: calc(var(--radius-sm) - var(--sp-1));text-align: center;text-wrap: balance;box-shadow: none;background: transparent;color: var(--on-surface-variant);}
.gx-guided__choice:has(:checked) { background: var(--primary);color: var(--on-primary);}
.gx-guided__choice:has(:checked):hover { background: var(--primary-hover);}
.gx-guided__tile { flex: none;display: grid;place-items: center;width: 40px;height: 40px;border-radius: var(--radius-sm);background: var(--primary-container);color: var(--primary);font-size: var(--fs-lg);}
.gx-guided__checklist > .gx-starport-row { flex-wrap: nowrap;}
.gx-guided__mark { flex: none;display: grid;place-items: center;width: 28px;font-size: var(--fs-lg);color: var(--on-surface-variant);}
.gx-guided__checklist > li.is-done .gx-guided__mark, .gx-guided__checklist > li.is-worked .gx-guided__mark { color: var(--success);}
.gx-guided__checklist > li.is-active .gx-guided__mark, .gx-guided__checklist > li.is-current .gx-guided__mark, .gx-guided__checklist > li.is-retry .gx-guided__mark { color: var(--primary);}
.gx-guided__checklist > li.is-failed .gx-guided__mark { color: var(--error);}
.gx-guided__callout { display: flex;align-items: center;justify-content: space-between;gap: var(--sp-3);flex-wrap: wrap;margin: 0;padding: var(--sp-4);border-radius: var(--radius-sm);background: var(--primary-container);}
.gx-guided__callout--quiet { background: var(--surface-container);color: var(--on-surface-variant);}
.gx-guided__footer { display: grid;gap: var(--sp-3);}
.gx-guided .gx-starport-cta { min-height: calc(var(--touch-target) + var(--sp-2));border-radius: var(--radius-md);font-size: var(--fs-base);}
.gx-guided__footer .gx-guided__hint { text-align: center;}
.gx-guided__link { justify-self: center;padding: var(--sp-2) var(--sp-3);border: 0;border-radius: var(--radius-sm);background: none;color: var(--primary);font: inherit;cursor: pointer;}
.gx-guided__link:hover:not(:disabled) { text-decoration: underline;}
.gx-guided__link:focus-visible { outline: 2px solid var(--primary);outline-offset: 2px;}
.gx-guided__link:disabled { opacity: .5;cursor: default;}

.gx-slider-actions { display: inline-flex;align-items: center;justify-content: flex-end;gap: 8px;flex-wrap: wrap;margin-left: auto;}
.gx-alert-preview { min-width: 118px;min-height: 44px;gap: 8px;white-space: nowrap;}
.gx-alert-preview[aria-busy="true"] .bi { animation: gx-preview-pulse .7s ease-in-out infinite alternate;}
.gx-alert-preview-note { margin: 0;font-size: var(--fs-xs);color: var(--on-surface-variant);line-height: 1.4;}
@keyframes gx-preview-pulse { to { opacity: .35;} }
@media (prefers-reduced-motion: reduce) { .gx-alert-preview[aria-busy="true"] .bi { animation: none;} }
.gx-slider-header--preview { align-items: center;flex-wrap: wrap;}
.gx-slider-header .gx-slider-actions .gx-setting-default { margin: 0;}