:root {
	--fs-bg: #0a0b0d;
	--fs-surface: #101216;
	--fs-surface-2: #15181d;
	--fs-raised: #1b1f25;
	--fs-well: #050608;
	--fs-line: #23272e;
	--fs-line-soft: #1a1e23;

	--fs-text: #e8eaed;
	--fs-dim: #99a0aa;
	--fs-faint: #626973;

	--fs-accent: #ff9d2e;
	--fs-accent-soft: rgba(255, 157, 46, 0.14);
	--fs-accent-line: rgba(255, 157, 46, 0.45);
	--fs-accent-ink: #12100a;

	--fs-cyan: #4fc3f7;
	--fs-cyan-soft: rgba(79, 195, 247, 0.14);
	--fs-live: #ff4d4f;
	--fs-live-soft: rgba(255, 77, 79, 0.15);
	--fs-ok: #3ddc84;
	--fs-ok-soft: rgba(61, 220, 132, 0.13);
	--fs-warn: #f5c542;
	--fs-warn-soft: rgba(245, 197, 66, 0.12);

	--fs-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	--fs-radius: 8px;
	--fs-radius-sm: 5px;

	--fs-rail-w: 52px;
	--fs-drawer-w: 244px;

	/* Hoehe der Aussteuerungsanzeige. Steht global (nicht am .fs-strip),
	   damit die dB-Skala neben den Zuegen dieselbe Hoehe erbt - sie ist
	   kein Kanalzug und bekaeme sie sonst nicht. Reihen duerfen sie
	   ueberschreiben, siehe .dj-mixer-row in station_dj.php. */
	--fs-vu-h: 176px;

	--nav-accent: #ff9d2e;
}

.fs-app {
	height: var(--app-vh, 100vh);
	display: flex;
	flex-direction: column;
	color: var(--fs-text);
	background: var(--fs-bg);
	font-size: 13px;

	overflow-y: auto;
}

.fs-mono {
	font-family: var(--fs-mono);
	font-variant-numeric: tabular-nums;
}

.fs-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.3px;
	color: var(--fs-faint);
}

.fs-scroll {
	overflow-y: auto;
	min-height: 0;
}

.fs-scroll::-webkit-scrollbar { width: 9px; }
.fs-scroll::-webkit-scrollbar-track { background: var(--fs-well); }
.fs-scroll::-webkit-scrollbar-thumb { background: #2b3038; border-radius: 5px; }
.fs-scroll::-webkit-scrollbar-thumb:hover { background: #383e47; }

.fs-well {
	background: var(--fs-well);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius-sm);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}

.fs-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 9px 14px;
	background: var(--fs-surface);
	border-bottom: 1px solid var(--fs-line);
}

.fs-bar__end {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--fs-dim);
}

.fs-chip {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--fs-accent);
	flex-shrink: 0;
}

.fs-sep {
	width: 1px;
	height: 14px;
	background: var(--fs-line);
	flex-shrink: 0;
}

.fs-statusbar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 14px;
	height: 32px;
	background: var(--fs-surface-2);
	border-top: 1px solid var(--fs-line);
	font-size: 11px;
	color: var(--fs-faint);
}

.fs-statusbar__end {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.fs-segment {
	display: flex;
	gap: 6px;
}

.fs-segment-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius-sm);
	color: var(--fs-dim);
	padding: 7px 18px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.fs-segment-btn:hover {
	color: var(--fs-text);
	border-color: var(--fs-faint);
}

.fs-segment-btn.is-active {
	border-color: var(--fs-accent);
	color: var(--fs-accent);
	background: var(--fs-accent-soft);
}

.fs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 34px;
	padding: 0 13px;
	border-radius: var(--fs-radius-sm);
	background: var(--fs-raised);
	border: 1px solid var(--fs-line);
	color: var(--fs-dim);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.1px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: all 0.15s ease;
}

.fs-btn:hover {
	color: var(--fs-text);
	border-color: var(--fs-faint);
	text-decoration: none;
}

.fs-btn:disabled,
.fs-btn.is-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.fs-btn--sm { height: 24px; padding: 0 11px; font-size: 10px; }

.fs-btn--accent {
	background: var(--fs-accent-soft);
	border-color: var(--fs-accent);
	color: var(--fs-accent);
}

.fs-btn--accent:hover {
	background: var(--fs-accent);
	border-color: var(--fs-accent);
	color: var(--fs-accent-ink);
}

.fs-btn--danger {
	background: transparent;
}

.fs-btn--danger:hover {
	background: var(--fs-live-soft);
	border-color: var(--fs-live);
	color: var(--fs-live);
}

.fs-btn--on {
	background: var(--fs-live);
	border-color: var(--fs-live);
	color: #fff;
}

.fs-btn--on:hover {
	background: var(--fs-live);
	border-color: var(--fs-live);
	color: #fff;
}

.fs-icon-btn {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: var(--fs-radius-sm);
	background: var(--fs-raised);
	border: 1px solid var(--fs-line);
	color: var(--fs-dim);
	font-size: 12px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.fs-icon-btn:hover:not(:disabled) {
	color: var(--fs-text);
	border-color: var(--fs-faint);
}

.fs-icon-btn:disabled { opacity: 0.3; cursor: default; }

.fs-icon-btn--lg { width: 40px; height: 40px; font-size: 14px; }

.fs-icon-btn--accent {
	background: var(--fs-accent-soft);
	border-color: var(--fs-accent);
	color: var(--fs-accent);
}

.fs-icon-btn--accent:hover:not(:disabled) {
	background: var(--fs-accent);
	color: var(--fs-accent-ink);
}

.fs-icon-btn--danger:hover:not(:disabled) {
	border-color: var(--fs-live);
	color: var(--fs-live);
}

.fs-mini-btn {
	flex-shrink: 0;
	width: 25px;
	height: 25px;
	border-radius: 4px;
	border: 1px solid var(--fs-line);
	background: var(--fs-raised);
	color: var(--fs-dim);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.fs-mini-btn:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
.fs-mini-btn--danger:hover { border-color: var(--fs-live); color: var(--fs-live); }

.fs-panel {
	background: var(--fs-surface);
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

.fs-panel--framed {
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius);
	overflow: hidden;
}

.fs-panel-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var(--fs-surface-2);
	border-bottom: 1px solid var(--fs-line);
}

.fs-panel-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--fs-text);
}

.fs-panel-hint {
	font-size: 10px;
	color: var(--fs-faint);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.fs-panel-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.fs-panel-body::-webkit-scrollbar { width: 9px; }
.fs-panel-body::-webkit-scrollbar-track { background: var(--fs-well); }
.fs-panel-body::-webkit-scrollbar-thumb { background: #2b3038; border-radius: 5px; }
.fs-panel-body::-webkit-scrollbar-thumb:hover { background: #383e47; }

.fs-panel-foot {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 9px;
	border-top: 1px solid var(--fs-line);
	background: var(--fs-surface-2);
	font-family: var(--fs-mono);
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	color: var(--fs-dim);
}

.fs-table-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.fs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.fs-table th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--fs-surface);
	text-align: left;
	padding: 9px 12px;
	color: var(--fs-faint);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1.2px;
	border-bottom: 1px solid var(--fs-line);
}

.fs-table tbody tr {
	border-left: 3px solid var(--fs-line-soft);
}

.fs-table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--fs-line-soft);
	vertical-align: middle;
	color: var(--fs-text);
	white-space: nowrap;
}

.fs-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.fs-table tbody tr.is-live {
	border-left-color: var(--fs-live);
	background: rgba(255, 77, 79, 0.05);
}

.fs-table tbody tr.is-locked { border-left-color: var(--fs-accent); }

.fs-table tbody tr.is-selected {
	border-left-color: var(--fs-accent);
	background: var(--fs-accent-soft);
}

.fs-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--fs-line-soft);
	border-left: 3px solid transparent;
	color: var(--fs-text);
}

.fs-row:hover {
	background: rgba(255, 255, 255, 0.03);
	border-left-color: var(--fs-accent);
}

.fs-row--drag { cursor: grab; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.fs-row--drag:active { cursor: grabbing; }
.fs-row--drag * { -webkit-user-drag: none; }

.fs-row-main { min-width: 0; flex: 1; }

.fs-row-title {
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fs-row-sub {
	font-size: 11.5px;
	color: var(--fs-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fs-row-meta {
	font-family: var(--fs-mono);
	font-size: 11.5px;
	color: var(--fs-faint);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.fs-cover {
	width: 30px;
	height: 30px;
	border-radius: 4px;
	object-fit: cover;
	background: var(--fs-well);
	border: 1px solid var(--fs-line-soft);
	flex-shrink: 0;
}

.fs-cover--md { width: 46px; height: 46px; border-radius: var(--fs-radius-sm); }
.fs-cover--lg { width: 64px; height: 64px; border-radius: var(--fs-radius-sm); }

.fs-empty {
	padding: 30px;
	text-align: center;
	color: var(--fs-faint);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.is-hidden {
	display: none !important;
}

.se-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.5;
}

.se-alert i {
	margin-top: 1px;
}

.se-alert.is-error {
	border: 1px solid var(--fs-live);
	background: var(--fs-live-soft);
	color: var(--fs-live);
}

.se-alert.is-ok {
	border: 1px solid var(--fs-ok);
	background: var(--fs-ok-soft);
	color: var(--fs-ok);
}

.se-alert.is-warning {
	border: 1px solid var(--fs-warn);
	background: var(--fs-warn-soft);
	color: var(--fs-warn);
}

.se-alert-actions {
	margin-left: auto;
	flex-shrink: 0;
}

.fs-dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px dashed var(--fs-line);
	border-radius: var(--fs-radius-sm);
	background: var(--fs-well);
	color: var(--fs-faint);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.fs-dropzone.is-over,
.is-drag-over {
	border-color: var(--fs-accent);
	background: var(--fs-accent-soft);
}

.fs-badge {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 3px 8px;
	border-radius: 3px;
	border: 1px solid var(--fs-line);
	background: transparent;
	color: var(--fs-dim);
}

.fs-badge--live { border-color: var(--fs-live); color: var(--fs-live); background: var(--fs-live-soft); }
.fs-badge--accent { border-color: var(--fs-accent); color: var(--fs-accent); background: var(--fs-accent-soft); }
.fs-badge--ok { border-color: var(--fs-ok); color: var(--fs-ok); background: var(--fs-ok-soft); }
.fs-badge--warn { border-color: var(--fs-warn); color: var(--fs-warn); background: var(--fs-warn-soft); }

.fs-letter-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1;
}

.fs-id {
	width: 38px;
	height: 38px;
	border-radius: 6px;
	background: var(--fs-accent-soft);
	border: 1px solid var(--fs-accent);
	color: var(--fs-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 800;
	flex-shrink: 0;
}

.fs-id.is-idle {
	background: transparent;
	border-color: var(--fs-line);
	color: var(--fs-faint);
}

.fs-lamp {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--fs-faint);
	transition: color 0.25s ease;
}

.fs-lamp::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2c3138;
	flex-shrink: 0;
}

.fs-lamp.is-on { color: var(--fs-live); }

.fs-lamp.is-on::before {
	background: var(--fs-live);
	box-shadow: 0 0 8px var(--fs-live);
	animation: fs-lamp-pulse 1.8s ease-in-out infinite;
}

@keyframes fs-lamp-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.fs-led {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2c3138;
	flex-shrink: 0;
	display: inline-block;
}

.fs-led.is-ok { background: var(--fs-ok); box-shadow: 0 0 6px rgba(61, 220, 132, 0.6); }
.fs-led.is-bad { background: var(--fs-live); }
.fs-led.is-warn { background: var(--fs-warn); }

.fs-counter {
	font-family: var(--fs-mono);
	font-size: 21px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.5px;
	font-variant-numeric: tabular-nums;
	color: var(--fs-counter-color, var(--fs-accent));
}

.fs-counter--lg { font-size: 30px; }

.fs-counter-sub {
	font-family: var(--fs-mono);
	font-size: 12px;
	color: var(--fs-faint);
	font-variant-numeric: tabular-nums;
}

.fs-counter.is-ending {
	animation: fs-counter-ending 1.1s ease-in-out infinite;
}

@keyframes fs-counter-ending {
	0%, 100% { color: var(--fs-counter-color, var(--fs-accent)); }
	50% { color: var(--fs-live); }
}

.fs-input {
	width: 100%;
	background: var(--fs-well);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius-sm);
	padding: 7px 11px;
	color: var(--fs-text);
	font-size: 12.5px;
}

.fs-input::placeholder { color: var(--fs-faint); }

.fs-input:focus {
	outline: none;
	border-color: var(--fs-accent);
}

.fs-search {
	position: relative;
	flex-shrink: 0;
	padding: 9px 12px;
	border-bottom: 1px solid var(--fs-line);
	background: var(--fs-surface-2);
}

.fs-search > i {
	position: absolute;
	left: 23px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--fs-faint);
	font-size: 11px;
	pointer-events: none;
}

.fs-search .fs-input { padding-left: 30px; }

.fs-slider { accent-color: var(--fs-accent); }
.fs-slider--live { accent-color: var(--fs-live); }

/* Kanalzug. Die Zuege TEILEN sich die Breite des Bedienfelds (flex-basis 0),
   statt feste Pixel zu beanspruchen - sonst laeuft die Reihe aus dem Drawer
   heraus und der letzte Zug (der Master) wird abgeschnitten. min-width haelt
   den Zug ueber der Breite seines Inhalts, flex-wrap am Bedienfeld faengt
   den Rest ab: lieber eine Zeile umbrechen als etwas verdecken.
   --fs-strip-accent faerbt Reglerfuellung und Namensschild durch. */
.fs-strip {
	--fs-strip-accent: var(--fs-faint);
	position: relative;
	flex: 1 1 0;
	min-width: 62px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 9px 5px 8px;
}

/* KEIN eigener Rahmen, kein eigener Hintergrund, keine Luecke zum Nachbarn:
   die Zuege stehen dicht an dicht auf einer gemeinsamen Flaeche und werden
   nur durch eine Haarlinie getrennt, wie auf einem echten Pult. Gibt man
   jedem Zug ein eigenes Kaestchen mit Abstand, sieht das Pult aus wie eine
   Pinnwand mit Zetteln darauf. */
.fs-strip + .fs-strip { border-left: 1px solid rgba(255, 255, 255, .05); }

.fs-strip-db {
	font-family: var(--fs-mono);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--fs-dim);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.3px;
	min-height: 13px;
	white-space: nowrap;
}

/* Beschriftungsfeld unten - nachempfunden den kleinen Namensschildern
   ("scribble strip") an echten Pulten. margin-top:auto haelt sie in ALLEN
   Zuegen auf einer Linie, auch wenn Mikrofonzuege durch den Stumm-Knopf ein
   Element mehr haben als die uebrigen. */
.fs-strip-label {
	margin-top: auto;
	width: 100%;
	padding: 4px 2px;
	border: 1px solid var(--fs-line);
	border-radius: 3px;
	background: linear-gradient(180deg, #1c2027, #14171c);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
	text-align: center;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--fs-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Die Summe bekommt etwas mehr Anteil an der Breite und einen Hauch Akzent
   in der Flaeche - kein Kasten drumherum, das wuerde die durchgehende Flaeche
   wieder aufbrechen. Der Zug signalisiert ueber sein Namensschild. */
.fs-strip--master {
	--fs-strip-accent: var(--fs-accent);
	flex-grow: 1.35;
	background: linear-gradient(180deg, rgba(255, 157, 46, .05), transparent 70%);
}
.fs-strip--master .fs-strip-label {
	border-color: var(--fs-accent-line);
	background: linear-gradient(180deg, rgba(255, 157, 46, .2), rgba(255, 157, 46, .08));
	color: var(--fs-accent);
	font-size: 9.5px;
}
.fs-strip--mic { --fs-strip-accent: var(--fs-live); }
.fs-strip--cart { --fs-strip-accent: var(--fs-cyan); }
.fs-strip--cart .fs-strip-label { color: var(--fs-cyan); border-color: rgba(79, 195, 247, .32); }

.fs-meterrow {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 7px;
	width: 100%;
	height: var(--fs-vu-h);
}

/* Gemeinsame dB-Skala links am Bedienfeld statt im Master-Zug - gilt fuer
   alle Aussteuerungsanzeigen daneben, nicht nur fuer eine. Als einziges
   Element der Reihe fest breit: eine Skala, die mitschrumpft, waere sinnlos. */
.fs-mixer-scale {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	flex: 0 0 26px;
	padding: 9px 4px 8px 0;
}

.fs-mixer-scale .fs-strip-db,
.fs-mixer-scale .fs-strip-label {
	visibility: hidden;
	border-color: transparent;
	background: none;
}

.fs-vu-scale {
	position: relative;
	width: 22px;
	height: var(--fs-vu-h);
	flex-shrink: 0;
}

.fs-vu-scale span {
	position: absolute;
	right: 0;
	transform: translateY(50%);
	font-family: var(--fs-mono);
	font-size: 8.5px;
	line-height: 1;
	color: var(--fs-faint);
	font-variant-numeric: tabular-nums;
}

.fs-vu-scale span::before {
	content: '';
	position: absolute;
	right: -4px;
	top: 50%;
	width: 3px;
	height: 1px;
	background: var(--fs-line);
}

/* Aussteuerung. Das Bett zeigt die UNBELEUCHTETEN Dioden in der Farbe ihrer
   Zone - dadurch sind die Zonengrenzen auch bei Stille ablesbar, und ein
   leiser Pegel leuchtet sauber gruen, statt in einem Verlauf zu schwimmen.
   Darf mitschrumpfen (kein flex-shrink:0), sonst quillt der Inhalt aus dem
   Zug heraus und wird vom Bedienfeld abgeschnitten. */
.fs-vu {
	position: relative;
	width: 17px;
	min-width: 9px;
	height: 100%;
	border: 1px solid #262b33;
	border-radius: 2px;
	overflow: hidden;
	background-color: #030405;
	background-image: linear-gradient(to top,
		#0b1a13 0 60%,
		#181a0d 60% 78%,
		#1b1810 78% 88%,
		#1c1309 88% 95%,
		#1d0d0e 95% 100%);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, .9);
}

.fs-vu-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0%;
	background-image: linear-gradient(to top,
		#25b36a 0 60%,
		#a8c73c 60% 78%,
		#f5c542 78% 88%,
		#ff9d2e 88% 95%,
		#ff4d4f 95% 100%);
	background-size: 100% var(--fs-vu-h);
	background-position: bottom;
	background-repeat: no-repeat;
	transition: height 0.05s linear;
}

/* Dioden-Stege: 7px Segment, 2px Steg. Liegt ueber Bett UND Fuellung, darum
   wirken beide als dieselbe Diodenkette. */
.fs-vu::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: repeating-linear-gradient(to bottom,
		rgba(0, 0, 0, 0.9) 0 2px,
		transparent 2px 9px);
}

.fs-vu-peak {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	bottom: 0%;
	z-index: 3;
	background: #ffffff;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
	opacity: 0.9;
	pointer-events: none;
}

.fs-meter-h {
	position: relative;
	width: 96px;
	height: 7px;
	background: var(--fs-well);
	border: 1px solid var(--fs-line);
	border-radius: 2px;
	overflow: hidden;
	flex-shrink: 0;
}

.fs-meter-h-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	background-image: linear-gradient(to right,
		#1f9e5e 0%, var(--fs-ok) 62%,
		#f5c542 86%, var(--fs-live) 100%);
	background-size: 96px 100%;
	background-repeat: no-repeat;
	transition: width 0.06s linear;
}

/* Fader. --fs-fader-fill (0..1) wird per JS aus dem Reglerwert gesetzt, damit
   die Fuellung unterhalb des Griffs sichtbar ist - ein gedrehtes range-Element
   kann das von sich aus nicht. Faellt ohne JS auf voll zurueck.

   Griffweg, Bahn und Fuellung benutzen alle drei denselben Weg: der Griff ist
   32px lang, seine Mitte laeuft also von 16px bis (Hoehe - 16px). Frueher
   waren die drei 158/152/150px lang, wodurch der Griff bei Vollausschlag
   ueber seiner eigenen Fuellung stand. */
.fs-fader {
	--fs-fader-fill: 1;
	position: relative;
	width: 32px;
	min-width: 22px;
	height: 100%;
}

.fs-fader::before {
	content: '';
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 50%;
	width: 8px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, #000, #0c0e12 40%, #000);
	border-radius: 4px;
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 1),
		0 1px 0 rgba(255, 255, 255, .07);
}

.fs-fader::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 4px;
	height: calc((100% - 16px) * var(--fs-fader-fill));
	transform: translateX(-50%);
	border-radius: 2px;
	background: var(--fs-strip-accent, var(--fs-accent));
	opacity: .65;
	box-shadow: 0 0 8px -1px var(--fs-strip-accent, var(--fs-accent));
	pointer-events: none;
}

.fs-fader input[type="range"] {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--fs-vu-h);
	height: 32px;
	margin: 0;
	transform: translate(-50%, -50%) rotate(-90deg);
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.fs-fader input[type="range"]::-webkit-slider-runnable-track {
	height: 32px;
	background: transparent;
}

/* Der helle Streifen in der Mitte des Verlaufs wird durch die Drehung zur
   Ablesekante quer ueber die Faderkappe. */
.fs-fader input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 32px;
	border-radius: 3px;
	border: 1px solid #5b636f;
	background: linear-gradient(180deg,
		#5a626d 0 20%, #3c434d 20% 44%,
		#eef2f7 44% 56%, #2a2f37 56% 80%, #1c2027 80% 100%);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.fs-fader input[type="range"]:focus-visible::-webkit-slider-thumb {
	border-color: var(--fs-accent);
	box-shadow: 0 0 0 2px var(--fs-accent-soft), 0 3px 8px rgba(0, 0, 0, .85);
}

.fs-fader input[type="range"]::-moz-range-track {
	height: 32px;
	background: transparent;
	border: none;
}

.fs-fader input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 32px;
	border-radius: 3px;
	border: 1px solid #5b636f;
	background: linear-gradient(180deg,
		#5a626d 0 20%, #3c434d 20% 44%,
		#eef2f7 44% 56%, #2a2f37 56% 80%, #1c2027 80% 100%);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .85);
}

.fs-rail {
	order: 3;
	flex-shrink: 0;
	width: var(--fs-rail-w);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
	background: var(--fs-surface-2);
	border-left: 1px solid var(--fs-line);
}

.fs-rail-btn {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--fs-faint);
	font-size: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.fs-rail-btn:hover {
	color: var(--fs-text);
	background: rgba(255, 255, 255, 0.04);
}

.fs-rail-btn.is-active {
	color: var(--fs-accent);
	border-color: var(--fs-accent);
	background: var(--fs-accent-soft);
}

.fs-drawer {
	order: 2;
	flex-shrink: 0;
	width: 0;
	overflow: hidden;
	background: var(--fs-surface-2);
	border-left: 1px solid var(--fs-line);
	transition: width 0.18s ease;
}

.fs-drawer.is-open { width: var(--fs-drawer-w); }

.fs-drawer-inner {
	width: var(--fs-drawer-w);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.fs-drawer-head {
	flex-shrink: 0;
	padding: 10px 14px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--fs-text);
	border-bottom: 1px solid var(--fs-line);
	background: var(--fs-surface);
}

.fs-drawer-view {
	display: none;
	flex: 1;
	min-height: 0;
	flex-direction: column;
}

.fs-drawer-view.is-active { display: flex; }

.fs-drawer-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 14px 10px;
}

.fs-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(5, 6, 8, 0.78);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}

.fs-backdrop.is-open { display: flex; }

.fs-dialog {
	background: var(--fs-surface);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
	color: var(--fs-text);
	max-width: 520px;
	width: 100%;
	min-width: 0;
}

.fs-dialog-head,
.fs-dialog-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

.fs-dialog-head { justify-content: space-between; border-bottom: 1px solid var(--fs-line); }
.fs-dialog-foot { justify-content: flex-end; border-top: 1px solid var(--fs-line); }
.fs-dialog-body { padding: 16px; }

.fs-loading > *:not(.fs-loader) { visibility: hidden; }

.fs-loader {
	position: absolute;
	inset: 0;
	background: var(--fs-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	z-index: 1000;
	transition: opacity 0.3s ease;
}

.fs-loader.is-done { opacity: 0; pointer-events: none; }

.fs-loader-spinner {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid var(--fs-line);
	border-top-color: var(--fs-accent);
	animation: fs-spin 0.8s linear infinite;
}

@keyframes fs-spin { to { transform: rotate(360deg); } }

.fs-loader-text {
	font-size: 11px;
	color: var(--fs-dim);
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ===================== Mobile (<=768px) ===================== */
@media (max-width: 768px) {
	.fs-btn {
		height: 40px;
		padding: 0 14px;
	}

	.fs-btn--sm {
		height: 34px;
	}

	.fs-icon-btn {
		width: 40px;
		height: 40px;
	}

	.fs-icon-btn--lg {
		width: 44px;
		height: 44px;
	}

	.fs-mini-btn {
		width: 32px;
		height: 32px;
	}

	.fs-rail-btn {
		width: 40px;
		height: 40px;
	}

	.fs-segment-btn {
		padding: 9px 14px;
	}

	.fs-input,
	.fs-search .fs-input {
		font-size: 16px;
	}

	.fs-drawer.is-open {
		width: 100vw;
		position: fixed;
		inset: 0;
		right: var(--fs-rail-w);
		z-index: 500;
	}

	.fs-drawer-inner {
		width: 100%;
	}

	.fs-drawer.is-open .fs-drawer-close {
		display: inline-flex;
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 10;
	}
}

.fs-drawer-close {
	display: none;
}

/* ===================== Kleine Screens (<=480px) ===================== */
@media (max-width: 480px) {
	:root { --fs-vu-h: 130px; }

	.fs-strip {
		min-width: 54px;
		padding: 7px 3px 6px;
	}

	.fs-vu {
		width: 12px;
	}

	.fs-fader {
		width: 26px;
	}

	.fs-strip-label { font-size: 8px; }
	.fs-strip-db { font-size: 9.5px; }

	.fs-meter-h {
		width: 72px;
	}
}