:root,
:root[data-theme="dark"] {
	color-scheme: dark;
	--cx-bg: #0b0b0c;
	--cx-surface: #111113;
	--cx-raised: #18181b;
	--cx-hover: rgba(255, 255, 255, .045);
	--cx-line: #222226;
	--cx-line-strong: #303036;
	--cx-text: #ededef;
	--cx-dim: #a0a0a8;
	--cx-faint: #8a8a93;
	--cx-primary: #ededef;
	--cx-primary-ink: #0b0b0c;
	--cx-primary-hover: #ffffff;
	--cx-accent: #ff9f2e;
	--cx-accent-ink: #ffb35c;
	--cx-accent-soft: rgba(255, 159, 46, .12);
	--cx-live: #f04438;
	--cx-live-ink: #ff6b5f;
	--cx-live-soft: rgba(240, 68, 56, .14);
	--cx-warn: #eab308;
	--cx-warn-ink: #f5c84a;
	--cx-warn-soft: rgba(234, 179, 8, .12);
	--cx-ok: #3fb950;
	--cx-ok-ink: #56d364;
	--cx-ok-soft: rgba(63, 185, 80, .12);
	--cx-off: #5c5c64;
	--cx-skeleton: #1c1c20;
	--cx-scrim: rgba(0, 0, 0, .6);
	--cx-shadow: 0 16px 48px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
	--cx-logo-filter: none;
}

:root.cx-themed[data-theme="light"] {
	color-scheme: light;
	--cx-bg: #fafaf9;
	--cx-surface: #ffffff;
	--cx-raised: #f4f4f3;
	--cx-hover: rgba(0, 0, 0, .04);
	--cx-line: #e7e7e4;
	--cx-line-strong: #d6d6d2;
	--cx-text: #18181b;
	--cx-dim: #55555d;
	--cx-faint: #6b6b73;
	--cx-primary: #18181b;
	--cx-primary-ink: #ffffff;
	--cx-primary-hover: #000000;
	--cx-accent: #ff9f2e;
	--cx-accent-ink: #b45f00;
	--cx-accent-soft: rgba(255, 159, 46, .14);
	--cx-live: #e5372b;
	--cx-live-ink: #c42b20;
	--cx-live-soft: rgba(229, 55, 43, .1);
	--cx-warn: #ca8a04;
	--cx-warn-ink: #8a5a00;
	--cx-warn-soft: rgba(202, 138, 4, .12);
	--cx-ok: #1a7f37;
	--cx-ok-ink: #1a7f37;
	--cx-ok-soft: rgba(26, 127, 55, .1);
	--cx-off: #a1a1a8;
	--cx-skeleton: #ededeb;
	--cx-scrim: rgba(24, 24, 27, .35);
	--cx-shadow: 0 16px 48px rgba(24, 24, 27, .14), 0 2px 6px rgba(24, 24, 27, .08);
	--cx-logo-filter: invert(1) hue-rotate(180deg) saturate(1.6) brightness(1.08);

	--fs-bg: var(--cx-bg);
	--fs-surface: var(--cx-surface);
	--fs-surface-2: var(--cx-raised);
	--fs-raised: var(--cx-raised);
	--fs-well: var(--cx-raised);
	--fs-line: var(--cx-line);
	--fs-line-soft: var(--cx-line);
	--fs-text: var(--cx-text);
	--fs-dim: var(--cx-dim);
	--fs-faint: var(--cx-faint);
}

.cx-themed body {
	background: var(--cx-bg);
	color: var(--cx-text);
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

.cx-themed .app-main-wrapper {
	background: var(--cx-bg);
}

.cx-themed ::selection {
	background: var(--cx-accent-soft);
	color: var(--cx-text);
}

.cx-themed * {
	scrollbar-color: var(--cx-line-strong) transparent;
}

.cx-themed ::-webkit-scrollbar-track { background: transparent; }
.cx-themed ::-webkit-scrollbar-thumb { background: var(--cx-line-strong); }

.cx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--cx-line-strong);
	border-radius: 8px;
	background: var(--cx-surface);
	color: var(--cx-text);
	font: 500 14px/1 inherit;
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cx-btn:hover {
	background: var(--cx-raised);
	color: var(--cx-text);
	text-decoration: none;
}

.cx-btn:focus-visible,
.cx-link:focus-visible,
.cx-input:focus-visible {
	outline: 2px solid var(--cx-accent);
	outline-offset: 2px;
}

.cx-btn:disabled {
	opacity: .5;
	cursor: default;
}

.cx-btn--primary {
	background: var(--cx-primary);
	border-color: var(--cx-primary);
	color: var(--cx-primary-ink);
}

.cx-btn--primary:hover {
	background: var(--cx-primary-hover);
	border-color: var(--cx-primary-hover);
	color: var(--cx-primary-ink);
}

.cx-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--cx-dim);
}

.cx-btn--ghost:hover {
	background: var(--cx-hover);
	color: var(--cx-text);
}

.cx-btn--icon {
	width: 36px;
	padding: 0;
}

.cx-btn svg,
.cx-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cx-link {
	color: var(--cx-dim);
	font-weight: 500;
	text-decoration: none;
	border-radius: 4px;
	transition: color .15s ease;
}

.cx-link:hover {
	color: var(--cx-text);
	text-decoration: none;
}

.cx-input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--cx-line-strong);
	border-radius: 8px;
	background: var(--cx-bg);
	color: var(--cx-text);
	font: 400 15px/1.4 inherit;
	font-family: inherit;
	transition: border-color .15s ease;
}

.cx-input:hover { border-color: var(--cx-faint); }
.cx-input::placeholder { color: var(--cx-faint); }

.cx-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--cx-dim);
	font-size: 13px;
	font-weight: 500;
}

.cx-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 14vh 16px 16px;
	background: var(--cx-scrim);
}

.cx-backdrop.is-open {
	display: flex;
	animation: cx-fade .18s cubic-bezier(.16, 1, .3, 1);
}

.cx-dialog {
	width: 100%;
	max-width: 440px;
	border: 1px solid var(--cx-line);
	border-radius: 12px;
	background: var(--cx-surface);
	box-shadow: var(--cx-shadow);
	color: var(--cx-text);
	animation: cx-rise .24s cubic-bezier(.16, 1, .3, 1);
}

.cx-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 6px;
}

.cx-dialog-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--cx-text);
}

.cx-dialog-body { padding: 12px 20px 20px; }

.cx-dialog-foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid var(--cx-line);
}

.cx-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--cx-line);
	border-radius: 10px;
	background: var(--cx-surface);
	color: var(--cx-text);
	font-size: 14px;
}

.cx-alert.is-hidden { display: none; }
.cx-alert .cx-icon { color: var(--cx-live-ink); }

@keyframes cx-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes cx-rise {
	from { opacity: 0; transform: translateY(8px) scale(.985); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cx-backdrop.is-open,
	.cx-dialog { animation: none; }
}

.cx-input--file {
	height: auto;
	padding: 8px;
	font-size: 14px;
	color: var(--cx-dim);
}

.cx-input--file::file-selector-button {
	margin-right: 12px;
	padding: 6px 12px;
	border: 1px solid var(--cx-line-strong);
	border-radius: 6px;
	background: var(--cx-raised);
	color: var(--cx-text);
	font: 500 13px/1.2 inherit;
	font-family: inherit;
	cursor: pointer;
}

@view-transition {
	navigation: auto;
}

.station-sidebar {
	view-transition-name: cx-sidebar;
}

.app-topbar {
	view-transition-name: cx-topbar;
}

.app-main-wrapper {
	view-transition-name: cx-main;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
}

::view-transition-group(cx-sidebar),
::view-transition-group(cx-topbar),
::view-transition-group(cx-main) {
	animation-duration: 0s;
}

::view-transition-image-pair(cx-main) {
	isolation: auto;
}

::view-transition-old(cx-main) {
	animation: cx-page-out 200ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(cx-main) {
	animation: cx-page-in 340ms cubic-bezier(.16, 1, .3, 1) 60ms both;
}

@keyframes cx-page-out {
	to { opacity: 0; transform: translateY(-6px); }
}

@keyframes cx-page-in {
	from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

.cx-backdrop {
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 600px) {
	.cx-backdrop {
		padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	}
	.cx-dialog-foot { flex-wrap: wrap; }
}

@media (max-width: 991px) {
	.app-main-wrapper {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}
}

@media (display-mode: standalone) {
	html:not(.dj-compact) body { padding-bottom: env(safe-area-inset-bottom); }
}

.cx-btn,
.cx-link { -webkit-tap-highlight-color: transparent; }

@media (pointer: coarse) {
	.cx-btn { min-height: 40px; }
	.cx-btn--icon { min-width: 40px; }
}

@supports (-webkit-touch-callout: none) {
	.cx-themed input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
	.cx-themed select,
	.cx-themed textarea { font-size: 16px !important; }
}

.app-main-wrapper:has(.cx-backdrop.is-open, .cx-backdrop:target, .fs-backdrop.is-open) {
	view-transition-name: none;
}