/* ==========================================================================
   DJ DROP STUDIO — red / white / blue on black
   Palette: ink #08080D · panel #10101A · line #23233A
            red #FF2E44 · blue #2E6BFF · white #F5F7FF · muted #8A8FA8
   ========================================================================== */

.djds, .djds * { box-sizing: border-box; }

.djds {
	--djds-ink:   #08080D;
	--djds-panel: #10101A;
	--djds-line:  #23233A;
	--djds-red:   #FF2E44;
	--djds-blue:  #2E6BFF;
	--djds-white: #F5F7FF;
	--djds-muted: #8A8FA8;
	background: var(--djds-ink);
	color: var(--djds-white);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	border: 1px solid var(--djds-line);
	border-radius: 14px;
	padding: 26px;
	margin: 0 auto;
	max-width: 860px;
	position: relative;
	/* NOTE: no overflow:hidden here — it would silently disable the
	   floating (sticky) control dock inside the panel. */
}
/* Signature: tricolor racing stripe across the top of every console */
.djds::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 4px;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(90deg, var(--djds-red) 0 34%, var(--djds-white) 34% 66%, var(--djds-blue) 66% 100%);
}

.djds h3, .djds h4 { color: var(--djds-white); margin: 0 0 10px; }
.djds .djds-section-title {
	font-family: 'Anton', Impact, sans-serif;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 17px;
	margin: 26px 0 12px;
}
.djds-muted { color: var(--djds-muted); }
.djds-hint  { color: var(--djds-muted); font-size: 13px; margin: 8px 0 0; }

/* ---- Console top bar ---- */
.djds-console-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.djds-onair {
	font-family: 'Anton', Impact, sans-serif;
	letter-spacing: .14em;
	color: var(--djds-red);
	border: 1px solid var(--djds-red);
	border-radius: 6px;
	padding: 5px 12px;
	font-size: 14px;
	display: flex; align-items: center; gap: 8px;
}
.djds-onair-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--djds-red); animation: djds-blink 1.4s infinite; }
@keyframes djds-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .djds-onair-dot, .djds-meter i { animation: none !important; } }

.djds-meter { display: flex; gap: 3px; align-items: flex-end; height: 26px; flex: 1; min-width: 120px; }
.djds-meter i { width: 5px; border-radius: 2px 2px 0 0; background: var(--djds-blue); height: 30%; }
.djds-meter i:nth-child(3n)  { background: var(--djds-red);   height: 65%; }
.djds-meter i:nth-child(3n+1){ background: var(--djds-white); height: 45%; }
.djds.is-generating .djds-meter i { animation: djds-bounce .5s infinite alternate; }
.djds.is-generating .djds-meter i:nth-child(2n) { animation-delay: .15s; }
.djds.is-generating .djds-meter i:nth-child(3n) { animation-delay: .3s; }
@keyframes djds-bounce { from { transform: scaleY(.4); } to { transform: scaleY(1.6); } }

.djds-balance-wrap { display: flex; align-items: center; gap: 10px; }
.djds-chip {
	background: var(--djds-blue);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.djds-buy-link { color: var(--djds-red); font-weight: 700; font-size: 13px; text-decoration: none; }
.djds-buy-link:hover { text-decoration: underline; color: var(--djds-red); }

/* ---- Tabs ---- */
.djds-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--djds-line); margin-bottom: 18px; }
.djds-tab {
	background: none; border: none; cursor: pointer;
	color: var(--djds-muted);
	font: 700 14px 'Inter', sans-serif;
	padding: 10px 14px;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.djds-tab.is-active { color: var(--djds-white); border-bottom-color: var(--djds-red); }
.djds-tab:focus-visible { outline: 2px solid var(--djds-blue); outline-offset: 2px; }

/* ---- Fields ---- */
.djds-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.djds-field > span { font-weight: 700; font-size: 13px; letter-spacing: .02em; display: flex; justify-content: space-between; }
.djds-field > span em { color: var(--djds-muted); font-style: normal; font-weight: 400; }
.djds-field-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }

.djds input[type=text], .djds input[type=email], .djds select, .djds textarea {
	background: var(--djds-panel);
	border: 1px solid var(--djds-line);
	color: var(--djds-white);
	border-radius: 8px;
	padding: 11px 13px;
	font: 400 15px 'Inter', sans-serif;
	width: 100%;
}
.djds textarea { resize: vertical; font-size: 17px; line-height: 1.5; }
.djds input:focus, .djds select:focus, .djds textarea:focus {
	outline: none;
	border-color: var(--djds-blue);
	box-shadow: 0 0 0 3px rgba(46,107,255,.25);
}

/* ---- Buttons ---- */
.djds-btn {
	display: inline-block;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 11px 20px;
	font: 700 14px 'Inter', sans-serif;
	letter-spacing: .02em;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center;
	transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
	color: #fff;
}
.djds-btn:active { transform: translateY(1px); }
.djds-btn:focus-visible { outline: 2px solid var(--djds-white); outline-offset: 2px; }
.djds-btn-red  { background: var(--djds-red); }
.djds-btn-red:hover  { background: #ff4a5d; box-shadow: 0 0 22px rgba(255,46,68,.4); color:#fff; }
.djds-btn-blue { background: var(--djds-blue); }
.djds-btn-blue:hover { background: #4a7dff; box-shadow: 0 0 22px rgba(46,107,255,.4); color:#fff; }
.djds-btn-ghost { background: none; border-color: var(--djds-line); color: var(--djds-white); }
.djds-btn-ghost:hover { border-color: var(--djds-white); color: var(--djds-white); }
.djds-btn-xl { font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; padding: 16px 34px; }
.djds-btn-sm { padding: 7px 14px; font-size: 13px; }
.djds-btn[disabled] { opacity: .5; cursor: wait; box-shadow: none !important; }

/* ---- Voice grid ---- */
.djds-voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.djds-voice {
	background: var(--djds-panel);
	border: 1px solid var(--djds-line);
	border-radius: 10px;
	padding: 12px 14px;
	cursor: pointer;
	text-align: left;
	color: var(--djds-white);
	font-family: 'Inter', sans-serif;
	display: flex; flex-direction: column; gap: 4px;
	transition: border-color .15s;
	position: relative;
}
.djds-voice:hover { border-color: var(--djds-blue); }
.djds-voice.is-selected { border-color: var(--djds-red); box-shadow: 0 0 0 1px var(--djds-red), 0 0 18px rgba(255,46,68,.25); }
.djds-voice.is-selected::after { content: '● SELECTED'; color: var(--djds-red); font-size: 10px; font-weight: 800; letter-spacing: .1em; position: absolute; top: 10px; right: 12px; }
.djds-voice-name { font-weight: 700; font-size: 15px; }
.djds-voice-desc { color: var(--djds-muted); font-size: 12px; }
.djds-voice-preview { align-self: flex-start; margin-top: 6px; background: none; border: none; color: var(--djds-blue); font: 700 12px 'Inter', sans-serif; cursor: pointer; padding: 0; }
.djds-voice-preview:hover { text-decoration: underline; }

/* ---- Sliders ---- */
.djds-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.djds-slider span { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.djds-slider b[data-out] { color: var(--djds-blue); }
.djds-slider small { color: var(--djds-muted); font-size: 12px; display: block; margin-top: 4px; }
.djds input[type=range] { width: 100%; accent-color: var(--djds-red); background: transparent; }
.djds-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.djds-check input { accent-color: var(--djds-red); width: 16px; height: 16px; }

/* ---- Generate + status ---- */
.djds-generate-bar { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.djds-status { font-size: 14px; color: var(--djds-muted); min-height: 1.4em; }
.djds-status.is-error { color: var(--djds-red); font-weight: 600; }
.djds-status.is-busy { color: var(--djds-blue); font-weight: 600; }

/* ---- Result ---- */
.djds-result { margin-top: 24px; border-top: 1px solid var(--djds-line); padding-top: 20px; }
.djds-result audio { width: 100%; margin: 6px 0 14px; }
.djds-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Script generator ---- */
.djds-script-list { display: flex; flex-direction: column; gap: 10px; }
.djds-script-card {
	background: var(--djds-panel);
	border: 1px solid var(--djds-line);
	border-left: 4px solid var(--djds-blue);
	border-radius: 8px;
	padding: 14px 16px;
	cursor: pointer;
	text-align: left;
	color: var(--djds-white);
	font: 400 15px/1.5 'Inter', sans-serif;
	transition: border-color .15s;
}
.djds-script-card:hover { border-color: var(--djds-red); border-left-color: var(--djds-red); }
.djds-script-card small { display: block; color: var(--djds-muted); margin-top: 6px; font-weight: 700; font-size: 11px; letter-spacing: .08em; }

/* ---- Storefront ---- */
.djds-store-head { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.djds-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: stretch; }
.djds-pack {
	background: var(--djds-panel);
	border: 1px solid var(--djds-line);
	border-radius: 12px;
	padding: 24px 20px;
	text-align: center;
	display: flex; flex-direction: column; gap: 8px;
	position: relative;
}
.djds-pack.is-featured { border-color: var(--djds-red); box-shadow: 0 0 26px rgba(255,46,68,.22); }
.djds-pack-flag {
	position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
	background: var(--djds-red); color: #fff;
	font: 800 10px 'Inter', sans-serif; letter-spacing: .12em;
	padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.djds-pack h3 { font-family: 'Anton', Impact, sans-serif; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; font-size: 18px; }
.djds-pack-credits { font-family: 'Anton', Impact, sans-serif; font-size: 52px; line-height: 1; color: var(--djds-white); }
.djds-pack-credits small { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--djds-blue); text-transform: uppercase; margin-top: 4px; }
.djds-pack-price { font-size: 24px; font-weight: 800; }
.djds-pack-per { color: var(--djds-muted); font-size: 13px; margin-bottom: 8px; }
.djds-fineprint { color: var(--djds-muted); font-size: 12px; text-align: center; margin-top: 18px; }

/* ---- Notices ---- */
.djds-notice { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-weight: 600; }
.djds-notice-ok   { background: rgba(46,107,255,.15); border: 1px solid var(--djds-blue); color: var(--djds-white); }
.djds-notice-warn { background: rgba(255,46,68,.12);  border: 1px solid var(--djds-red);  color: var(--djds-white); }

/* ---- History ---- */
.djds-history { display: flex; flex-direction: column; gap: 14px; }
.djds-history-item { background: var(--djds-panel); border: 1px solid var(--djds-line); border-radius: 10px; padding: 16px 18px; }
.djds-history-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.djds-tag { background: var(--djds-blue); color: #fff; font: 800 10px 'Inter', sans-serif; letter-spacing: .1em; padding: 3px 8px; border-radius: 4px; }
.djds-history-script { margin: 0 0 10px; font-style: italic; }
.djds-history-audio { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.djds-history-audio audio { flex: 1; min-width: 220px; }

/* ---- Login wall ---- */
.djds-wall { text-align: center; padding: 40px 20px; }
.djds-wall-badge { font-family: 'Anton', Impact, sans-serif; letter-spacing: .16em; color: var(--djds-red); margin-bottom: 12px; }
.djds-wall .djds-btn { margin: 12px 6px 0; }

@media (max-width: 560px) {
	.djds { padding: 18px; }
	.djds-btn-xl { width: 100%; }
	.djds-generate-bar { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   WAVEFORM · WORD FX · EFFECT RACK · PURCHASE  (v1.1)
   ========================================================================== */

/* ---- Waveform ---- */
.djds-wave-wrap {
	background: var(--djds-panel);
	border: 1px solid var(--djds-line);
	border-radius: 10px;
	padding: 14px 14px 10px;
	margin-bottom: 14px;
}
#djds-wave { display: block; width: 100%; height: 120px; cursor: pointer; }
.djds-wave-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; color: var(--djds-muted); font-size: 12px; }
.djds-wave-legend span { display: flex; align-items: center; gap: 6px; }
.djds-lg { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.djds-lg-blue  { background: var(--djds-blue); }
.djds-lg-red   { background: var(--djds-red); }
.djds-lg-white { background: var(--djds-white); }

/* ---- Transport ---- */
.djds-transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.djds-time { color: var(--djds-muted); font-size: 13px; font-variant-numeric: tabular-nums; margin-left: auto; }

/* ---- Word readout / chips ---- */
.djds-words { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.djds-word {
	position: relative;
	background: var(--djds-panel);
	border: 1px solid var(--djds-line);
	color: var(--djds-white);
	border-radius: 8px;
	padding: 8px 14px;
	font: 700 15px 'Inter', sans-serif;
	letter-spacing: .02em;
	cursor: pointer;
	transition: border-color .12s, box-shadow .12s, transform .08s;
}
.djds-word:hover { border-color: var(--djds-blue); }
.djds-word:active { transform: translateY(1px); }
.djds-word:focus-visible { outline: 2px solid var(--djds-blue); outline-offset: 2px; }
.djds-word.is-selected {
	border-color: var(--djds-white);
	box-shadow: 0 0 0 1px var(--djds-white), 0 0 14px rgba(245,247,255,.25);
	background: #181828;
}
.djds-word.has-fx { border-color: var(--djds-red); }
.djds-word.is-selected.has-fx { box-shadow: 0 0 0 1px var(--djds-white), 0 0 14px rgba(255,46,68,.35); }
.djds-fx-count, .djds-fx-count-demo {
	position: absolute; top: -8px; right: -8px;
	background: var(--djds-red); color: #fff;
	min-width: 18px; height: 18px; border-radius: 999px;
	font: 800 11px/18px 'Inter', sans-serif; text-align: center;
	padding: 0 4px;
}
.djds-fx-count-demo { position: static; display: inline-block; vertical-align: 1px; }
.djds-word-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---- Effect rack ---- */
.djds-rack {
	background: var(--djds-panel);
	border: 1px solid var(--djds-line);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 22px;
}
.djds-rack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.djds-rack-title { font-family: 'Anton', Impact, sans-serif; letter-spacing: .14em; font-size: 15px; color: var(--djds-white); }
.djds-rack-target { color: var(--djds-blue); font-size: 13px; font-weight: 700; }

.djds-fx-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.djds-fx-btn {
	background: var(--djds-ink);
	border: 1px solid var(--djds-line);
	color: var(--djds-muted);
	border-radius: 999px;
	padding: 8px 16px;
	font: 700 13px 'Inter', sans-serif;
	cursor: pointer;
	transition: all .12s;
}
.djds-fx-btn:hover { border-color: var(--djds-blue); color: var(--djds-white); }
.djds-fx-btn.is-on {
	background: var(--djds-blue);
	border-color: var(--djds-blue);
	color: #fff;
	box-shadow: 0 0 14px rgba(46,107,255,.4);
}
.djds-fx-btn:focus-visible { outline: 2px solid var(--djds-white); outline-offset: 2px; }

.djds-fx-chain { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.djds-fx-module {
	background: var(--djds-ink);
	border: 1px solid var(--djds-line);
	border-top: 3px solid var(--djds-red);
	border-radius: 10px;
	padding: 14px;
	display: flex; flex-direction: column; gap: 12px;
}
.djds-fx-module-head { display: flex; justify-content: space-between; align-items: center; font: 800 13px 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.djds-fx-remove {
	background: none; border: 1px solid var(--djds-line); color: var(--djds-muted);
	border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; line-height: 1;
}
.djds-fx-remove:hover { border-color: var(--djds-red); color: var(--djds-red); }
.djds-rack-apply { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- Purchase / downloads ---- */
.djds-purchase { border-top: 1px solid var(--djds-line); padding-top: 20px; }
.djds-dl-links { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- History: locked previews ---- */
.djds-locked-note { color: var(--djds-muted); font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.djds-tag-preview { background: var(--djds-red); }

/* ==========================================================================
   SOUND DESIGN (legacy timeline styles, retained for engine stubs) (v1.4)
   ========================================================================== */
.djds-sfx-pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 16px; }
.djds-sfx-picker { display: flex; gap: 6px; align-items: center; }
.djds-sfx-picker select { flex: 1; min-width: 0; }

.djds-timeline-wrap { margin-bottom: 14px; }
.djds-timeline {
	position: relative;
	height: 448px; /* 2 voice lanes + 3 sound lanes x 88px (double height) + padding */
	background: var(--djds-ink);
	border: 1px solid var(--djds-line);
	border-radius: 8px;
	overflow: hidden;
	cursor: crosshair;
	background-image: repeating-linear-gradient(to bottom, transparent 0 87px, var(--djds-line) 87px 88px);
	background-position: 0 4px;
}
.djds-timeline-playhead {
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 2px; background: var(--djds-white);
	pointer-events: none; z-index: 3;
}
.djds-clip {
	position: absolute;
	height: 26px;
	line-height: 26px;
	background: linear-gradient(180deg, #3b76ff, #2E6BFF);
	border: 1px solid #6b97ff;
	border-radius: 5px;
	color: #fff;
	font: 700 11px/24px 'Inter', sans-serif;
	padding: 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: grab;
	user-select: none;
	touch-action: none;
	z-index: 2;
	min-width: 34px;
	box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.djds-clip:active { cursor: grabbing; }
.djds-clip.is-selected {
	background: linear-gradient(180deg, #ff4a5d, #FF2E44);
	border-color: #ff8b98;
	box-shadow: 0 0 12px rgba(255,46,68,.5);
}
.djds-timeline-ruler { position: relative; height: 18px; margin-top: 4px; }
.djds-timeline-ruler span {
	position: absolute; transform: translateX(-50%);
	color: var(--djds-muted); font-size: 10px; font-variant-numeric: tabular-nums;
}
.djds-timeline-ruler span::before {
	content: ''; position: absolute; left: 50%; top: -6px;
	width: 1px; height: 5px; background: var(--djds-line);
}

.djds-clip-inspector {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	background: var(--djds-ink);
	border: 1px solid var(--djds-line);
	border-left: 4px solid var(--djds-red);
	border-radius: 8px;
	padding: 12px 16px;
}
.djds-clip-name { font-weight: 800; }
.djds-clip-inspector label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin: 0; }
.djds-clip-inspector input[type=number] { width: 90px; padding: 7px 9px; }
.djds-clip-vol { min-width: 180px; }
.djds-clip-vol input[type=range] { width: 110px; }


/* ==========================================================================
   VOICE CLIP LANE + TOOLBAR  (v1.5)
   ========================================================================== */
.djds-lane-label {
	position: absolute; left: 6px;
	color: var(--djds-muted);
	font: 800 9px 'Inter', sans-serif;
	letter-spacing: .12em;
	z-index: 1; pointer-events: none; line-height: 26px;
}
.djds-clip-voice {
	background: linear-gradient(180deg, #f8fafc, #d9dde8);
	border: 1px solid #ffffff;
	color: #10101A;
	font-weight: 800;
}
.djds-clip-voice.has-fx {
	background: linear-gradient(180deg, #ffd7dc, #ffb3bc);
	border-color: var(--djds-red);
}
.djds-clip-voice.is-selected {
	background: linear-gradient(180deg, #ff4a5d, #FF2E44);
	border-color: #ff8b98;
	color: #fff;
}
.djds-tl-toolbar {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-bottom: 14px;
}
.djds-tl-gapwrap { display: flex; align-items: center; gap: 6px; color: var(--djds-muted); font-size: 13px; }
.djds-tl-gapwrap input[type=number] { width: 70px; padding: 7px 8px; }

#djds-clip-lane { width: auto; padding: 7px 9px; }
#djds-clip-lane-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin: 0; }

/* ==========================================================================
   CLIP WAVEFORMS · TRIM HANDLES · TIMELINE TRANSPORT  (v1.7)
   ========================================================================== */
.djds-clip { padding: 0; overflow: hidden; border-radius: 4px; }
.djds-clip-wave {
	position: absolute; inset: 1px;
	width: calc(100% - 2px); height: calc(100% - 2px);
	pointer-events: none;
	border-radius: 4px;
	overflow: hidden;
}
.djds-clip-label {
	position: absolute; left: 0; right: 0; top: 0;
	height: 17px; line-height: 17px;
	padding: 0 8px;
	font: 700 10px/17px 'Inter', sans-serif;
	font-style: normal;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	pointer-events: auto;
	background: rgba(0, 0, 0, .45);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	border-radius: 4px 4px 0 0;
	cursor: grab;
	user-select: none;
	touch-action: none;
	z-index: 3;
}
.djds-clip-label::before { content: '⠿ '; opacity: .7; margin-right: 2px; }
.djds-clip-label:active { cursor: grabbing; }
.djds-clip-voice .djds-clip-label { color: #10101A; text-shadow: 0 0 4px rgba(255,255,255,.5); }
.djds-clip-voice.is-selected .djds-clip-label { color: #fff; text-shadow: 0 0 4px rgba(0,0,0,.45); }
.djds-trim {
	position: absolute; top: -2px; bottom: -2px;
	width: 9px;
	cursor: ew-resize;
	z-index: 4;
	touch-action: none;
}
.djds-trim::after {
	content: '';
	position: absolute; top: 5px; bottom: 5px; width: 3px;
	background: rgba(255,255,255,.55);
	border-radius: 2px;
	opacity: 0;
	transition: opacity .12s;
}
.djds-trim-l { left: -3px; }
.djds-trim-l::after { left: 3px; }
.djds-trim-r { right: -3px; }
.djds-trim-r::after { right: 3px; }
.djds-clip:hover .djds-trim::after,
.djds-clip.is-selected .djds-trim::after { opacity: 1; }
.djds-clip-voice .djds-trim::after { background: rgba(16,16,26,.55); }
.djds-clip-voice.is-selected .djds-trim::after { background: rgba(255,255,255,.75); }

.djds-tl-transport {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 12px 0 16px;
}


/* ==========================================================================
   BIG LANES · ZOOM/SCROLL · FADE · FULLSCREEN  (v1.8)
   ========================================================================== */
.djds-clip { height: 40px; line-height: 40px; }
.djds-clip-label { height: 17px !important; line-height: 17px !important; font-size: 11px !important; }
.djds-lane-label { line-height: 40px; }
.djds-clip-voice .djds-clip-label { font-size: 12px !important; }

.djds-timeline-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	border-radius: 8px;
	scrollbar-color: var(--djds-blue) var(--djds-ink);
}
.djds-timeline-inner { position: relative; min-width: 100%; }
.djds-timeline-inner .djds-timeline { border-radius: 8px 8px 0 0; }
.djds-timeline-inner .djds-timeline-ruler { margin-top: 2px; height: 20px; }

.djds-tl-zoom { display: inline-flex; align-items: center; gap: 6px; }
.djds-tl-zoom small { color: var(--djds-muted); font-size: 11px; }
#djds-zoom-in, #djds-zoom-out { padding: 7px 12px; font-size: 15px; line-height: 1; }

/* Full-screen editor */
.djds-sfx.djds-fullscreen {
	position: fixed;
	inset: 10px;
	z-index: 999999;
	overflow-y: auto;
	background: var(--djds-panel);
	box-shadow: 0 0 80px rgba(0,0,0,.85);
	margin: 0;
}


/* ==========================================================================
   DOUBLE-HEIGHT LANES · GUIDE BAR · BIG HANDLES · PHRASE CHIPS  (v1.9)
   ========================================================================== */
.djds-clip { height: 84px; line-height: 84px; border-radius: 7px; }
.djds-clip-label {
	height: 19px !important;
	line-height: 19px !important;
	font-size: 12px !important;
	text-align: left;
}
.djds-clip-voice .djds-clip-label { font-size: 13px !important; font-weight: 800; }
.djds-lane-label { line-height: 18px; opacity: .8; }

/* Bigger, easier trim handles */
.djds-trim { width: 16px; }
.djds-trim-l { left: -5px; }
.djds-trim-l::after { left: 6px; }
.djds-trim-r { right: -5px; }
.djds-trim-r::after { right: 6px; }
.djds-trim::after { top: 20px; bottom: 20px; width: 4px; }

/* Phrase chips can be longer — keep them tidy */
.djds-word { max-width: 300px; }
.djds-word > span { display: inline-block; max-width: 268px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Friendly step-by-step guide bar */
.djds-guide {
	display: flex; align-items: center; gap: 14px;
	background: linear-gradient(90deg, rgba(46,107,255,.16), rgba(255,46,68,.10));
	border: 1px solid var(--djds-blue);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 18px;
}
.djds-guide-num {
	flex: none;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--djds-blue); color: #fff;
	font: 800 17px/34px 'Inter', sans-serif; text-align: center;
	box-shadow: 0 0 14px rgba(46,107,255,.5);
}
.djds-guide-text { font-size: 15px; font-weight: 600; line-height: 1.45; }

/* ==========================================================================
   HIGHLIGHT-AND-APPLY EFFECTS  (v2.0)
   ========================================================================== */
#djds-wave { cursor: crosshair; touch-action: none; }

.djds-fxbar-empty {
	border: 1px dashed var(--djds-line);
	border-radius: 10px;
	padding: 18px;
	text-align: center;
	color: var(--djds-muted);
	font-size: 15px;
	margin-bottom: 14px;
}
.djds-fxbar {
	background: var(--djds-panel);
	border: 1px solid var(--djds-blue);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 14px;
	box-shadow: 0 0 22px rgba(46,107,255,.18);
}
.djds-fxbar-sel {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin-bottom: 12px; font-size: 14px;
}
.djds-fxbar-sel b { color: var(--djds-white); font-variant-numeric: tabular-nums; }
.djds-fxbar .djds-fx-buttons { margin-bottom: 12px; }
.djds-fxbar .djds-fx-btn { font-size: 14px; padding: 10px 18px; }
.djds-fxbar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.djds-fx-amt { min-width: 220px; flex: 1; max-width: 320px; }

.djds-fx-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.djds-fx-row {
	display: flex; align-items: center; gap: 12px;
	background: var(--djds-panel);
	border: 1px solid var(--djds-line);
	border-left: 4px solid var(--djds-red);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
}
.djds-fx-row-name { font-weight: 800; min-width: 110px; }
.djds-fx-row-x {
	margin-left: auto;
	background: none; border: 1px solid var(--djds-line); color: var(--djds-muted);
	border-radius: 6px; width: 26px; height: 26px; cursor: pointer;
}
.djds-fx-row-x:hover { border-color: var(--djds-red); color: var(--djds-red); }

/* ==========================================================================
   FLOATING CONTROL DOCK · ROTARY KNOB · ACCESSIBILITY  (v2.1)
   ========================================================================== */
.djds-dock {
	position: sticky;
	top: 10px;
	z-index: 600;
	background: rgba(13, 13, 22, .97);
	border: 1px solid var(--djds-blue);
	border-radius: 14px;
	padding: 12px 16px 4px;
	margin-bottom: 18px;
	box-shadow: 0 8px 34px rgba(0, 0, 0, .65), 0 0 18px rgba(46, 107, 255, .22);
	backdrop-filter: blur(6px);
}
.djds-dock-row { margin-bottom: 8px; }
.djds-dock .djds-fxbar { margin-bottom: 8px; box-shadow: none; background: rgba(46,107,255,.06); }
.djds-dock .djds-fxbar-empty { margin-bottom: 8px; padding: 10px; font-size: 13px; }
.djds-sfx.djds-fullscreen .djds-dock { top: 0; border-radius: 0 0 14px 14px; margin: -1px -1px 14px; }

/* Rotary knob */
.djds-knob-wrap { display: inline-flex; align-items: center; gap: 10px; }
.djds-knob {
	--rot: -135deg;
	position: relative;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #2a2a3e, #14141f 70%);
	border: 2px solid var(--djds-blue);
	box-shadow: inset 0 2px 8px rgba(0,0,0,.7), 0 0 10px rgba(46,107,255,.25);
	cursor: ns-resize;
	touch-action: none;
	flex: none;
}
.djds-knob-dot {
	position: absolute;
	left: 50%; top: 50%;
	width: 4px; height: 21px;
	margin: -25px 0 0 -2px;
	border-radius: 3px;
	background: var(--djds-red);
	box-shadow: 0 0 8px rgba(255,46,68,.7);
	transform-origin: 50% 25px;
	transform: rotate(var(--rot));
	pointer-events: none;
}
.djds-knob::after {
	content: '';
	position: absolute; inset: 6px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.08);
	pointer-events: none;
}
.djds-knob-out { font-size: 12px; line-height: 1.3; color: var(--djds-muted); min-width: 110px; }
.djds-knob-out b { color: var(--djds-white); font-size: 16px; font-variant-numeric: tabular-nums; }

/* Accessibility: clear focus for keyboard users, everywhere */
.djds button:focus-visible,
.djds a:focus-visible,
.djds input:focus-visible,
.djds select:focus-visible,
.djds textarea:focus-visible,
.djds [tabindex]:focus-visible,
.djds .djds-knob:focus-visible {
	outline: 3px solid var(--djds-white);
	outline-offset: 2px;
	border-radius: 6px;
}
.djds .djds-knob:focus-visible { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
	.djds * { animation: none !important; transition: none !important; }
}


/* JS-driven floating fallback for the dock (used when a theme wrapper's
   overflow defeats position:sticky). The element is measured and pinned. */
.djds-dock.is-floating {
	position: fixed !important;
	top: 10px;
	margin: 0;
}

/* ==========================================================================
   WORD-PICK ROW · 12-EFFECT GRID · POP-OUT EDITOR  (v2.3)
   ========================================================================== */
.djds-wordpick-hint { margin-bottom: 8px; }
.djds-wordpick {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-bottom: 18px;
}
.djds-wordpick .djds-word {
	max-width: none;
	font-size: 14px;
	padding: 9px 14px;
}
.djds-wordpick .djds-word.is-selected {
	background: var(--djds-red);
	border-color: #ff8b98;
	color: #fff;
	box-shadow: 0 0 12px rgba(255,46,68,.45);
}

/* 12 effects: a tidy grid instead of one long row */
.djds-fxbar .djds-fx-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
	gap: 8px;
}
.djds-fxbar .djds-fx-btn { width: 100%; text-align: center; padding: 10px 6px; font-size: 13px; }

/* Legacy editor container — kept for engine stubs, never rendered */
.djds-popout[hidden] { display: none !important; }

/* ==========================================================================
   MAIN-PAGE SOUNDS SECTION  (v2.4)
   ========================================================================== */
.djds-sounds-list .djds-fx-row { border-left-color: var(--djds-blue); }
.djds-sound-at { display: inline-flex; align-items: center; gap: 6px; color: var(--djds-muted); font-size: 13px; }
.djds-sound-at input[type=number] { width: 84px; padding: 6px 8px; }
#djds-sounds-pickers .djds-sfx-picker { margin-bottom: 8px; }

/* ==========================================================================
   TIMELINE SELECTION + RAZOR DELETE  (v2.5)
   ========================================================================== */
.djds-timeline { cursor: crosshair; }
.djds-tl-selband {
	position: absolute;
	top: 0; bottom: 0;
	background: rgba(245, 247, 255, .16);
	border-left: 2px solid var(--djds-white);
	border-right: 2px solid var(--djds-white);
	z-index: 3;
	pointer-events: none;
}
.djds-tl-selbar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: rgba(255, 46, 68, .10);
	border: 1px solid var(--djds-red);
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 10px;
	font-size: 13px;
}
.djds-tl-selbar b { font-variant-numeric: tabular-nums; }
.djds-timeline-ruler { cursor: crosshair; user-select: none; }

/* ==========================================================================
   THREE-STEP FLOW · FOLDED HELPERS  (v3.0)
   ========================================================================== */
.djds-steps {
	display: flex; gap: 10px;
	margin-bottom: 20px;
}
.djds-step-btn {
	flex: 1;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--djds-ink);
	border: 1px solid var(--djds-line);
	border-radius: 12px;
	color: var(--djds-muted);
	font: 800 13px 'Inter', sans-serif;
	letter-spacing: .06em;
	padding: 13px 8px;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.djds-step-btn b {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--djds-line); color: var(--djds-white);
	font-size: 14px; line-height: 26px; text-align: center;
	flex: none;
}
.djds-step-btn.is-active {
	color: var(--djds-white);
	border-color: var(--djds-red);
	box-shadow: 0 0 16px rgba(255,46,68,.25);
}
.djds-step-btn.is-active b { background: var(--djds-red); }
.djds-step-btn.is-done { color: var(--djds-white); }
.djds-step-btn.is-done b { background: var(--djds-blue); }
.djds-step-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) {
	.djds-step-btn { flex-direction: column; gap: 6px; font-size: 11px; padding: 10px 4px; }
}

.djds-details {
	border: 1px solid var(--djds-line);
	border-radius: 10px;
	margin: 14px 0 18px;
	background: var(--djds-ink);
}
.djds-details > summary {
	cursor: pointer;
	padding: 13px 16px;
	font-weight: 700;
	font-size: 14px;
	color: var(--djds-white);
	list-style: none;
	user-select: none;
}
.djds-details > summary::-webkit-details-marker { display: none; }
.djds-details > summary::after { content: ' ▾'; color: var(--djds-muted); }
.djds-details[open] > summary::after { content: ' ▴'; }
.djds-details[open] > summary { border-bottom: 1px solid var(--djds-line); }
.djds-details > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.djds-details > *:last-child { margin-bottom: 16px; }
.djds-details .djds-field-row { margin-top: 14px; }

.djds-step-cta { text-align: center; margin: 26px 0 6px; }

/* ==========================================================================
   CHANGE-VOICE SWITCHER  (v3.2)
   ========================================================================== */
.djds-voice-switch {
	background: var(--djds-panel);
	border: 1px solid var(--djds-blue);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 18px;
	box-shadow: 0 0 22px rgba(46,107,255,.18);
}
.djds-voice-switch .djds-voice-grid { margin-top: 4px; }
.djds-voice-switch-actions {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-top: 8px;
}
.djds-voice-current {
	color: var(--djds-blue);
	font-weight: 800;
	font-size: 13px;
}

/* Compact synced speed controls in the transport + voice picker (v3.5.1) */
.djds-speed-mini { min-width: 210px; max-width: 260px; }
.djds-speed-mini small { display: block; font-size: 11px; color: var(--djds-muted); }

/* Visible purchase status in step 3 (v3.5.4) */
.djds-buy-status { display: block; margin: 10px 0 4px; min-height: 1em; }
.djds-buy-status a { color: var(--djds-blue); font-weight: 700; margin-left: 4px; }

/* Traveling Advanced Voice Settings panel (v3.5.5) */
.djds-advanced-slot:empty { display: none; }
#djds-adv-slot-2 .djds-details, #djds-adv-slot-3 .djds-details { margin-top: 0; }

/* Console-top quick actions: My Drops + Buy credits (v3.7) */
.djds-top-actions { display: inline-flex; gap: 8px; margin-left: auto; align-items: center; }
.djds-console-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   CLIP BODY = SELECT · NAME STRIP = MOVE · BROADCAST CHAIN  (v3.8)
   ========================================================================== */
.djds-clip { cursor: crosshair; }
.djds-clip .djds-clip-label {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 17px;
	line-height: 17px;
	padding: 0 8px;
	background: rgba(0, 0, 0, .45);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	cursor: grab;
	z-index: 2;
	font-style: normal;
}
.djds-clip .djds-clip-label:active { cursor: grabbing; }
.djds-clip .djds-clip-label::before { content: '⠿ '; opacity: .6; }

/* ==========================================================================
   SOUND-EFFECTS PICKER — scrollable listbox with per-row ▶ + Add  (v4.2)
   ========================================================================== */
.djds-sfx-picker { margin-bottom: 14px; }
.djds-sfx-picker-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.djds-sfx-cat-label {
	font: 700 11px/1 'Inter', system-ui, sans-serif;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--djds-muted);
}
.djds-sfx-list-box {
	border: 1px solid var(--djds-line);
	border-radius: 8px;
	background: var(--djds-ink);
	max-height: 210px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--djds-line) transparent;
}
.djds-sfx-list-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--djds-line);
	cursor: pointer;
	transition: background .1s;
}
.djds-sfx-list-row:last-child { border-bottom: none; }
.djds-sfx-list-row:hover { background: rgba(255,255,255,.04); }
.djds-sfx-list-row.is-selected { background: rgba(46,107,255,.14); border-left: 3px solid var(--djds-blue); padding-left: 7px; }
.djds-sfx-list-row:focus-visible { outline: 2px solid var(--djds-white); outline-offset: -2px; border-radius: 4px; }

.djds-sfx-list-name {
	flex: 1;
	font-size: 13px;
	color: var(--djds-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: baseline;
	gap: 6px;
	pointer-events: none;
}
.djds-sfx-item-dur {
	font-size: 11px;
	color: var(--djds-muted);
	font-variant-numeric: tabular-nums;
	flex: none;
}
.djds-sfx-row-prev {
	flex: none;
	width: 30px;
	height: 26px;
	padding: 0;
	font-size: 11px;
	border: 1px solid var(--djds-line);
	border-radius: 6px;
	background: rgba(255,255,255,.05);
	color: var(--djds-white);
	cursor: pointer;
	transition: background .12s, border-color .12s;
}
.djds-sfx-row-prev:hover { background: rgba(255,255,255,.12); border-color: var(--djds-white); }
.djds-sfx-row-prev.is-playing { background: var(--djds-red); border-color: var(--djds-red); }
.djds-sfx-row-add { flex: none; font-size: 11px; padding: 5px 9px; }

/* ==========================================================================
   PRO VIEW · MULTITRACK (v4.3)
   The core timeline/clip/selection/inspector styles from the v3.9 editor are
   still present above; these are the small additions that wrap Pro view as
   an opt-in surface with a compact tools row.
   ========================================================================== */
.djds-pro-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: rgba(46, 107, 255, .06);
	border: 1px solid var(--djds-line);
	border-radius: 8px;
	margin-bottom: 10px;
}
.djds-pro-tools .djds-btn { padding: 6px 12px; font-size: 12px; }
.djds-pro-time { margin-left: auto; font: 700 12px/1 'Inter', monospace; letter-spacing: .04em; }
.djds-pro-time span { font-variant-numeric: tabular-nums; }

.djds-inspector-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px 14px;
	align-items: end;
}
.djds-inspector-grid label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--djds-muted);
	text-transform: uppercase;
}
.djds-inspector-grid input[type=number],
.djds-inspector-grid input[type=range],
.djds-inspector-grid select { margin-top: 2px; }
.djds-clip-inspector {
	background: var(--djds-ink);
	border: 1px solid var(--djds-line);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
}
.djds-clip-inspector h4 { margin: 0 0 8px; font-size: 13px; color: var(--djds-white); }

/* ==========================================================================
   MIXER PANEL — Pro view (v4.4)
   Five lane strips + master, docked above the timeline.  Audition-style:
   fader on the right, meter left of it, S/M above pan.
   ========================================================================== */
.djds-mixer {
	display: flex;
	gap: 8px;
	padding: 12px;
	background: rgba(16, 16, 26, .55);
	border: 1px solid var(--djds-line);
	border-radius: 10px;
	margin-bottom: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.djds-mixer-strips {
	display: flex;
	gap: 8px;
	flex: 1;
}
.djds-mixer-strip {
	flex: 0 0 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--djds-ink);
	border: 1px solid var(--djds-line);
	border-radius: 8px;
	padding: 8px 6px;
	position: relative;
	transition: opacity .12s;
}
.djds-mixer-strip.is-solo-dimmed { opacity: .4; }
.djds-mixer-strip.djds-mixer-master {
	flex: 0 0 90px;
	border-color: var(--djds-red);
	background: rgba(255, 46, 68, .06);
}
.djds-mixer-strip-name {
	font: 800 10px/1.2 'Inter', system-ui, sans-serif;
	letter-spacing: .06em;
	color: var(--djds-white);
	text-transform: uppercase;
	text-align: center;
	width: 100%;
}
.djds-mixer-strip-name small {
	display: block;
	font-weight: 500;
	font-size: 9px;
	color: var(--djds-muted);
	margin-top: 2px;
}
.djds-mixer-solomute { display: flex; gap: 4px; }
.djds-mixer-mini {
	width: 22px; height: 22px;
	padding: 0;
	font: 800 10px/1 'Inter', sans-serif;
	background: transparent;
	color: var(--djds-muted);
	border: 1px solid var(--djds-line);
	border-radius: 4px;
	cursor: pointer;
	transition: background .1s, color .1s, border-color .1s;
}
.djds-mixer-mini:hover { border-color: var(--djds-white); color: var(--djds-white); }
.djds-mixer-solo.is-on { background: #ffdb4a; color: #10101A; border-color: #ffdb4a; }
.djds-mixer-mute.is-on { background: var(--djds-red); color: #fff; border-color: var(--djds-red); }

.djds-mixer-pan-wrap {
	width: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.djds-mixer-pan {
	width: 100%;
	height: 4px;
	appearance: none;
	background: linear-gradient(90deg, var(--djds-blue) 0%, var(--djds-line) 48% 52%, var(--djds-red) 100%);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}
.djds-mixer-pan::-webkit-slider-thumb {
	appearance: none;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--djds-white);
	border: 1px solid var(--djds-line);
	cursor: pointer;
}
.djds-mixer-pan-wrap small {
	font: 700 9px/1 'Inter', monospace;
	color: var(--djds-muted);
	letter-spacing: .05em;
}

.djds-mixer-meter {
	position: relative;
	display: flex;
	gap: 2px;
	width: 20px;
	height: 100px;
	background: rgba(0, 0, 0, .55);
	border-radius: 3px;
	overflow: hidden;
}
.djds-mixer-meter-fill {
	flex: 1;
	background: linear-gradient(to top, var(--djds-blue) 0%, #ffdb4a 70%, var(--djds-red) 92%);
	height: 0;
	align-self: flex-end;
	transition: height 40ms linear;
}

.djds-mixer-fader {
	appearance: slider-vertical;
	writing-mode: bt-lr;
	-webkit-appearance: slider-vertical;
	width: 22px;
	height: 100px;
	background: transparent;
}
.djds-mixer-fader-out {
	font: 700 10px/1 'Inter', monospace;
	color: var(--djds-white);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TRACK & MASTER FX RACKS  (v4.5)
   ========================================================================== */
.djds-mixer-fx {
	width: 42px;
	padding: 4px 6px;
	font: 800 10px/1 'Inter', sans-serif;
	background: transparent;
	color: var(--djds-muted);
	border: 1px solid var(--djds-line);
	border-radius: 4px;
	cursor: pointer;
	transition: background .1s, border-color .1s, color .1s;
	letter-spacing: .05em;
}
.djds-mixer-fx:hover:not(.is-disabled) { border-color: var(--djds-blue); color: var(--djds-white); }
.djds-mixer-fx.has-fx { background: rgba(46,107,255,.16); color: var(--djds-white); border-color: var(--djds-blue); }
.djds-mixer-fx.is-disabled { opacity: .35; cursor: help; }

.djds-rack-panel {
	background: rgba(16, 16, 26, .8);
	border: 1px solid var(--djds-blue);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 12px;
	box-shadow: 0 0 20px rgba(46, 107, 255, .18);
}
.djds-rack-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--djds-line);
}
.djds-rack-panel-head h4 {
	margin: 0;
	font: 800 13px/1 'Inter', sans-serif;
	letter-spacing: .06em;
	color: var(--djds-white);
}
.djds-rack-add {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 12px;
}
.djds-rack-add label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--djds-muted);
}
.djds-rack-add select {
	padding: 5px 8px;
	background: var(--djds-ink);
	color: var(--djds-white);
	border: 1px solid var(--djds-line);
	border-radius: 4px;
}
.djds-rack-entry {
	background: var(--djds-ink);
	border: 1px solid var(--djds-line);
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 8px;
	transition: opacity .12s;
}
.djds-rack-entry.is-off { opacity: .5; }
.djds-rack-entry-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.djds-rack-entry-head b {
	flex: 1;
	color: var(--djds-white);
	font-size: 13px;
}
.djds-rack-onoff {
	width: 22px; height: 22px;
	padding: 0;
	background: transparent;
	color: var(--djds-muted);
	border: 1px solid var(--djds-line);
	border-radius: 50%;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
}
.djds-rack-onoff.is-on { background: var(--djds-blue); color: #fff; border-color: var(--djds-blue); }
.djds-rack-entry-controls { display: flex; gap: 4px; }
.djds-rack-entry-controls button {
	width: 24px; height: 22px;
	padding: 0;
	background: transparent;
	color: var(--djds-muted);
	border: 1px solid var(--djds-line);
	border-radius: 3px;
	cursor: pointer;
	font-size: 10px;
}
.djds-rack-entry-controls button:hover { border-color: var(--djds-white); color: var(--djds-white); }
.djds-rack-entry-controls-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.djds-rack-entry-controls-row label {
	flex: 1;
	min-width: 180px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--djds-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.djds-rack-entry-controls-row input[type=range] { flex: 1; }
.djds-rack-entry-controls-row b {
	min-width: 55px;
	color: var(--djds-white);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}