/* =========================================================================
   Prime Virtual DJ — application design system
   Dark, high-contrast, restrained accents. Deck A / Deck B colours come from
   white-label settings (--brand-a / --brand-b).
   ========================================================================= */

:root {
	--brand-a: #a874ff;
	--brand-b: #ff56dc;
	--brand-bg: #090911;

	/* ---- Typography scale (Settings → Appearance → Text Size) ----
	   --dj-text-scale is the single source of truth (0.9 / 1 / 1.1 / 1.2). It sets the root font size,
	   and every font size below is rem-based (tokens), so all text scales together. */
	--dj-text-scale: 1;
	--dj-font-2xs: .62rem;
	--dj-font-xs: .72rem;
	--dj-font-sm: .78rem;
	--dj-font-md: .88rem;
	--dj-font-base: 1rem;
	--dj-font-lg: 1.2rem;
	--dj-font-xl: 1.5rem;
	/* Controls that contain text grow gently with larger text (never shrink below 100%). */
	--dj-ctl-scale: max(1, calc(1 + (var(--dj-text-scale) - 1) * .75));
	--dj-row-h: 34px;

	--bg: var(--brand-bg);
	--bg-1: #0e0d17;
	--bg-2: #14121e;
	--bg-3: #1b1828;
	--bg-4: #242033;
	--line: #252136;
	--line-2: #322c47;
	--text: #f0ecfa;
	--text-2: #a7a1bd;
	--text-3: #726b89;
	--accent: var(--brand-a);
	--deck-a: var(--brand-a);
	--deck-b: var(--brand-b);
	--ok: #4cd18a;
	--warn: #f2a13b;
	--err: #ff4d5e;
	--loop: #4cd18a;
	--rec: #ff4d5e;
	--focus: #9fd3ff;
	--shadow: 0 10px 30px rgba(0, 0, 0, .45);
	--radius: 8px;
	--radius-sm: 5px;
	--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	--top-h: 46px;
	--nav-w: 208px;
	--nav-mini: 56px;
	color-scheme: dark;
}

:root[data-theme="light"] {
	--bg: #eef0f4; --bg-1: #f6f7fa; --bg-2: #ffffff; --bg-3: #f1f3f7; --bg-4: #e5e8ef;
	--line: #dde1e8; --line-2: #c9cfd9; --text: #151820; --text-2: #525a6b; --text-3: #7c8495;
	--shadow: 0 10px 30px rgba(20, 24, 32, .15);
	color-scheme: light;
}
@media (prefers-color-scheme: light) {
	:root[data-theme="auto"] {
		--bg: #eef0f4; --bg-1: #f6f7fa; --bg-2: #ffffff; --bg-3: #f1f3f7; --bg-4: #e5e8ef;
		--line: #dde1e8; --line-2: #c9cfd9; --text: #151820; --text-2: #525a6b; --text-3: #7c8495;
		--shadow: 0 10px 30px rgba(20, 24, 32, .15);
		color-scheme: light;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: calc(14px * var(--dj-text-scale)); -webkit-text-size-adjust: 100%; }
body.pvdj {
	margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--dj-font-base); line-height: 1.4;
	-webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
}
body.pvdj.pvdj-login { overflow: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.error { color: var(--err); }
.center { text-align: center; }
.spacer { flex: 1; }
.padded { padding: 12px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
kbd { font-family: var(--mono); font-size: .78em; padding: 1px 5px; border-radius: 4px; background: var(--bg-4); border: 1px solid var(--line-2); color: var(--text); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- Boot / login ---------------- */
.boot { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--accent); }
.boot__name { color: var(--text); font-size: 1.25rem; letter-spacing: .04em; }
.boot__bar { width: 180px; height: 3px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.boot__bar span { display: block; height: 100%; width: 40%; background: var(--accent); animation: boot 1.1s ease-in-out infinite; }
@keyframes boot { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.boot__err { color: var(--err); max-width: 420px; text-align: center; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1000px 500px at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent), var(--bg); }
.login__card { width: min(400px, 100%); background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px; box-shadow: var(--shadow); text-align: center; }
.login__logo { color: var(--accent); margin-bottom: 8px; }
.login__logo img { max-height: 64px; }
.login__title { font-size: 1.4rem; margin: 4px 0; letter-spacing: .02em; }
.login__sub { color: var(--text-2); margin: 0 0 18px; }
.login__msg { background: var(--bg-3); border-radius: 8px; padding: 10px 12px; }
.login__msg--error { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.login__form { text-align: left; display: grid; gap: 12px; }
.login__link { display: block; margin-top: 12px; color: var(--text-2); font-size: .9rem; }

/* ---------------- Buttons ---------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: calc(34px * var(--dj-ctl-scale)); padding: 0 14px; border-radius: var(--radius);
	border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text); font-weight: 550; white-space: nowrap; transition: background .12s, border-color .12s, transform .06s;
	text-decoration: none;
}
.btn:hover { background: var(--bg-4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--bg-3); }
.btn--ghost.is-on { border-color: var(--accent); color: var(--accent); }
.btn--danger { background: transparent; border-color: color-mix(in srgb, var(--err) 55%, transparent); color: var(--err); }
.btn--danger:hover { background: color-mix(in srgb, var(--err) 14%, transparent); }
.btn--sm { height: calc(28px * var(--dj-ctl-scale)); padding: 0 10px; font-size: .86rem; }
.btn--xs { height: calc(24px * var(--dj-ctl-scale)); padding: 0 8px; font-size: .8rem; }
.btn--xl { height: calc(52px * var(--dj-ctl-scale)); padding: 0 28px; font-size: 1.1rem; border-radius: 12px; }
.btn--block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); border: 0; background: transparent; color: var(--text-2); }
.icon-btn:hover { background: var(--bg-3); color: var(--text); }
.icon-btn:disabled { opacity: .4; }

/* DJ control buttons */
.btn-ctl {
	display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 34px; height: calc(30px * var(--dj-ctl-scale)); padding: 0 9px; border-radius: 6px;
	background: linear-gradient(#1a1e28, #13161e); border: 1px solid #262c3a; color: var(--text-2); font-weight: 650; font-size: var(--dj-font-sm); letter-spacing: .04em;
	user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: color .08s, border-color .08s, box-shadow .08s, background .08s;
}
.btn-ctl:hover { color: var(--text); border-color: #343b4d; }
.btn-ctl.is-down { transform: translateY(1px); background: #0f1218; }
.btn-ctl.is-on { color: #0b0b0b; background: var(--deck); border-color: var(--deck); box-shadow: 0 0 12px color-mix(in srgb, var(--deck) 45%, transparent); }
.btn-ctl:disabled { opacity: .35; }
.btn-ctl--sm { height: calc(26px * var(--dj-ctl-scale)); padding: 0 8px; font-size: var(--dj-font-xs); }
.btn-ctl--xs { height: calc(22px * var(--dj-ctl-scale)); min-width: 26px; padding: 0 6px; font-size: .68rem; }
.btn-ctl--mode.is-on { background: color-mix(in srgb, var(--deck) 22%, #10131a); color: var(--deck); box-shadow: none; }
.btn-ctl--loop.is-on { background: var(--loop); border-color: var(--loop); box-shadow: 0 0 12px color-mix(in srgb, var(--loop) 45%, transparent); }
.btn-ctl.is-flash { background: var(--deck); color: #000; }
.btn-ctl--transport { height: 48px; min-width: 64px; font-size: .86rem; border-radius: 10px; }
.btn-ctl--play .icon--pause { display: none; }
.btn-ctl--play.is-on .icon--pause { display: block; }
.btn-ctl--play.is-on .icon--play { display: none; }
.btn-ctl--play.is-on { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 40%, transparent); }
.btn-ctl--cue.is-on { background: #f0ede6; border-color: #f0ede6; color: #111; box-shadow: none; }
.btn-ctl--cue.is-blink { border-color: #f0ede6; color: #f0ede6; }
.btn-ctl--sync.is-on { background: var(--deck); }
.btn-ctl--pfl { width: 42px; height: 30px; }
.btn-ctl--pfl.is-on { background: var(--warn); border-color: var(--warn); color: #111; box-shadow: 0 0 12px color-mix(in srgb, var(--warn) 45%, transparent); }
.btn-ctl--mic.is-on { background: var(--err); border-color: var(--err); color: #fff; }
.btn-ctl--fx.is-on { background: var(--deck); }

/* ---------------- Forms ---------------- */
.input {
	width: 100%; height: calc(36px * var(--dj-ctl-scale)); padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--text);
	transition: border-color .12s, box-shadow .12s;
}
textarea.input { height: auto; padding: 8px 12px; resize: vertical; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.input[readonly] { opacity: .7; }
.input--sm { height: calc(28px * var(--dj-ctl-scale)); padding: 0 8px; font-size: var(--dj-font-md); width: auto; }
.input--color { width: 60px; padding: 2px; height: 32px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 12px; min-width: 0; }
.field__label { font-size: var(--dj-font-sm); font-weight: 600; color: var(--text-2); letter-spacing: .03em; text-transform: uppercase; }
.field__help { font-size: .82rem; color: var(--text-3); }
.field--inline { display: flex; align-items: center; gap: 8px; }
.field--grow { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 4px 0; }
.switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 36px; height: 20px; border-radius: 20px; background: var(--bg-4); border: 1px solid var(--line-2); position: relative; transition: background .15s; flex: none; }
.switch__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: transform .15s, background .15s; }
.switch__input:checked + .switch__track { background: color-mix(in srgb, var(--accent) 35%, var(--bg-3)); border-color: var(--accent); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(16px); background: var(--accent); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.select {
	display: inline-flex; align-items: center; gap: 6px; height: calc(34px * var(--dj-ctl-scale)); padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--line-2);
	background: var(--bg-1); color: var(--text); max-width: 100%;
}
.select:hover { border-color: var(--text-3); }
.select__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.field > .select { max-width: 100%; justify-self: start; }
.select--sm { height: calc(28px * var(--dj-ctl-scale)); font-size: .85rem; padding: 0 8px; }
.select--xs { height: calc(22px * var(--dj-ctl-scale)); font-size: var(--dj-font-xs); padding: 0 6px; gap: 3px; border-radius: 5px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--bg-1); flex-wrap: wrap; }
.seg__btn { border: 0; background: transparent; padding: calc(6px * var(--dj-ctl-scale)) 12px; color: var(--text-2); font-size: var(--dj-font-md); }
.seg__btn + .seg__btn { border-left: 1px solid var(--line-2); }
.seg__btn.is-on { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-weight: 600; }

/* ---------------- Knobs & faders ---------------- */
.knob { --knob-color: var(--deck, var(--accent)); display: inline-flex; flex-direction: column; align-items: center; gap: 1px; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; border-radius: 8px; padding: 1px 2px; }
.knob:focus-visible { outline: 2px solid var(--focus); }
.knob__track { fill: none; stroke: #232836; stroke-width: 3.2; stroke-linecap: round; }
.knob__value { fill: none; stroke: var(--knob-color); stroke-width: 3.2; stroke-linecap: round; }
.knob__cap { fill: #1c212c; stroke: #2e3546; stroke-width: 1; }
.knob.is-active .knob__cap { fill: #232937; }
.knob__ind { stroke: #eceae5; stroke-width: 2.2; stroke-linecap: round; }
.knob__label { font-size: var(--dj-font-2xs); font-weight: 650; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; white-space: nowrap; }
.knob.is-kill .knob__ind { stroke: var(--err); }
.knob.is-kill .knob__label { color: var(--err); }
.knob--filter .knob__value { stroke: var(--brand-b); }

.fader { --fader-color: var(--deck, var(--accent)); position: relative; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: pointer; }
.fader__track { position: absolute; background: #0a0c10; border: 1px solid #222837; border-radius: 4px; }
.fader--v { width: 36px; height: 100%; min-height: 90px; }
.fader--v .fader__track { left: 50%; top: 8px; bottom: 8px; width: 6px; transform: translateX(-50%); }
.fader--h { height: 34px; width: 100%; }
.fader--h .fader__track { top: 50%; left: 10px; right: 10px; height: 6px; transform: translateY(-50%); }
.fader__fill { position: absolute; background: color-mix(in srgb, var(--fader-color) 55%, transparent); border-radius: 3px; }
.fader--v .fader__fill { left: 0; right: 0; bottom: 0; }
.fader--h .fader__fill { top: 0; bottom: 0; left: 0; }
.fader__thumb { position: absolute; background: linear-gradient(#e9e6df, #a8a49c); border: 1px solid #00000080; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.fader--v .fader__thumb { left: 50%; width: 34px; height: 18px; transform: translate(-50%, 50%); }
.fader--v .fader__thumb::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; background: #111; }
.fader--h .fader__thumb { top: 50%; width: 18px; height: 30px; transform: translate(-50%, -50%); }
.fader--h .fader__thumb::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 8px; width: 2px; background: #111; }
.fader__tick { position: absolute; background: #2a3141; }
.fader--v .fader__tick { left: -8px; width: 5px; height: 1px; }
.fader--h .fader__tick { top: -8px; height: 5px; width: 1px; }
.fader:focus-visible .fader__thumb { outline: 2px solid var(--focus); }
.fader.is-active .fader__thumb { background: linear-gradient(#fff, #c4c0b8); }
.fader--pitch .fader__fill { background: color-mix(in srgb, var(--deck) 40%, transparent); }
.fader--xf { --fader-color: transparent; }
.fader--xf .fader__fill { display: none; }

/* ---------------- Menus / tooltips / toasts / modals ---------------- */
.menu { position: fixed; z-index: 1000; min-width: 200px; max-height: 70vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 5px; box-shadow: var(--shadow); }
.menu--sub { position: absolute; left: calc(100% - 4px); top: -5px; display: none; max-height: 60vh; }
.menu__sub { position: relative; }
.menu__sub--open > .menu--sub { display: block; }
.menu__item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: calc(7px * var(--dj-ctl-scale)) 10px; border-radius: 6px; color: var(--text); text-align: left; font-size: .9rem; }
.menu__item:hover, .menu__item:focus { background: var(--bg-4); outline: none; }
.menu__item:disabled { opacity: .4; cursor: default; background: transparent; }
.menu__item--danger { color: var(--err); }
.menu__label { flex: 1; white-space: nowrap; }
.menu__spacer { width: 15px; }
.menu__kbd { font-family: var(--mono); font-size: .75rem; color: var(--text-3); }
.menu__sep { height: 1px; background: var(--line); margin: 4px 6px; }

.tooltip { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; background: #05060a; color: #eceae5; border: 1px solid #2b3140; padding: 5px 8px; border-radius: 6px; font-size: var(--dj-font-sm); max-width: 280px; opacity: 0; transition: opacity .12s; display: flex; gap: 8px; align-items: center; }
.tooltip--in { opacity: 1; }
.tooltip kbd { background: #1d222d; }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1500; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--text-2); padding: 10px 10px 10px 12px; border-radius: 8px; box-shadow: var(--shadow); max-width: 440px; transform: translateY(8px); opacity: 0; transition: transform .18s, opacity .18s; }
.toast--in { transform: none; opacity: 1; }
.toast--out { opacity: 0; transform: translateX(20px); }
.toast--success { border-left-color: var(--ok); } .toast--success .icon { color: var(--ok); }
.toast--warning { border-left-color: var(--warn); } .toast--warning .icon { color: var(--warn); }
.toast--error { border-left-color: var(--err); } .toast--error .icon { color: var(--err); }
.toast__msg { flex: 1; font-size: .9rem; }
.toast__action { border: 0; background: transparent; color: var(--accent); font-weight: 600; }
.toast__close { border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center; }

.modal-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(3, 4, 7, .65); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .15s; }
.modal-backdrop--in { opacity: 1; }
.modal-backdrop--out { opacity: 0; }
.modal { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal--sm { max-width: 420px; } .modal--md { max-width: 620px; } .modal--lg { max-width: 900px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(16px * var(--dj-ctl-scale)) 18px 8px; }
.modal__title { margin: 0; font-size: 1.1rem; }
.modal__body { padding: 8px 18px 16px; overflow: auto; }
.modal__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: calc(12px * var(--dj-ctl-scale)) 18px; border-top: 1px solid var(--line); }

/* ---------------- Shell ---------------- */
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.top { height: var(--top-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--bg-1); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .02em; }
.brand__logo { height: 26px; }
.brand__mark { color: var(--accent); }
.top__status { display: flex; align-items: center; gap: 14px; margin-left: 12px; color: var(--text-2); font-size: .82rem; }
.top__clock { color: var(--text); font-size: .92rem; }
.top__stat { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); }
.top__stat.is-warn { color: var(--warn); }
.top__spacer { flex: 1; }
.top__meter { width: 90px; display: grid; gap: 2px; }
.top__meter span { display: block; height: 4px; background: linear-gradient(90deg, var(--ok) 0 70%, var(--warn) 70% 88%, var(--err) 88%); transform-origin: left; transform: scaleX(0); border-radius: 2px; }
.top__meter.is-clip { box-shadow: 0 0 0 1px var(--err); border-radius: 2px; }
.top__rec { display: inline-flex; align-items: center; gap: 6px; height: calc(30px * var(--dj-ctl-scale)); padding: 0 12px; border-radius: 16px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-weight: 650; font-size: .8rem; font-family: var(--mono); }
.top__rec .icon { color: var(--rec); }
.top__rec.is-rec { background: color-mix(in srgb, var(--rec) 20%, transparent); border-color: var(--rec); color: #fff; animation: recpulse 1.2s ease-in-out infinite; }
.top__rec.is-paused { border-color: var(--warn); color: var(--warn); }
@keyframes recpulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rec) 25%, transparent); } }
.top__midi { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-3); border-radius: 8px; }
.top__midi .dot { position: absolute; right: 5px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.top__midi.is-on { color: var(--text); } .top__midi.is-on .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.top__ana { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--bg-3); color: var(--text-2); height: 28px; padding: 0 10px; border-radius: 14px; font-size: var(--dj-font-sm); }
.top__user { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 3px 8px 3px 3px; border-radius: 20px; color: var(--text); }
.top__user:hover { background: var(--bg-3); }
.top__user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.top__user-name { font-size: .85rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app__body { flex: 1; display: flex; min-height: 0; }
.nav { width: var(--nav-w); flex: none; background: var(--bg-1); border-right: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; transition: width .18s; }
.nav__item { display: flex; align-items: center; gap: 12px; padding: calc(9px * var(--dj-ctl-scale)) 11px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-weight: 550; white-space: nowrap; }
.nav__item:hover { background: var(--bg-3); color: var(--text); }
.nav__item.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.nav__sep { height: 1px; background: var(--line); margin: 8px 6px; }
.nav__collapse { margin-top: auto; border: 0; background: transparent; color: var(--text-3); padding: 8px; border-radius: 8px; display: flex; justify-content: flex-end; }
.nav-mini .nav { width: var(--nav-mini); }
.nav-mini .nav__label { display: none; }
.nav-mini .nav__item { justify-content: center; padding: 10px 0; }
.nav-mini .nav__collapse { justify-content: center; transform: scaleX(-1); }

.view { flex: 1; min-width: 0; min-height: 0; position: relative; outline: none; }
.view__dj, .view__page { position: absolute; inset: 0; }
.view__page { overflow: auto; }
.page-loading { display: grid; place-items: center; height: 60%; }

.spinner { width: 22px; height: 22px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
.spinner--sm { width: 12px; height: 12px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mini DJ bar */
.minibar { flex: none; display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: var(--bg-1); border-top: 1px solid var(--line); }
.minibar__deck { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 4px 8px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.minibar__deck--a { --deck: var(--deck-a); } .minibar__deck--b { --deck: var(--deck-b); }
.minibar__deck.is-playing { border-color: color-mix(in srgb, var(--deck) 60%, transparent); }
.minibar__id { font-weight: 800; color: var(--deck); width: 16px; }
.minibar__art { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; }
.minibar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.minibar__title { font-weight: 600; font-size: var(--dj-font-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minibar__artist { font-size: var(--dj-font-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minibar__play { color: var(--deck); }
.minibar__time { font-size: .82rem; color: var(--text-2); }
.minibar__master { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 110px; }
.minibar__mlabel { font-size: var(--dj-font-2xs); letter-spacing: .1em; color: var(--text-3); font-weight: 700; }
.minibar__meter { width: 100%; display: grid; gap: 2px; }
.minibar__meter span { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ok) 0 70%, var(--warn) 70% 88%, var(--err) 88%); transform-origin: left; transform: scaleX(0); }

/* Upload tray */
.tray { position: fixed; right: 16px; bottom: 70px; width: 340px; max-height: 50vh; z-index: 800; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tray__head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.tray__head strong { flex: 1; font-size: .9rem; }
.tray__list { overflow: auto; padding: 6px; }
.tray__item { position: relative; padding: 8px 32px 8px 8px; border-radius: 8px; }
.tray__item + .tray__item { border-top: 1px solid var(--line); }
.tray__name { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray__meta { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-2); margin: 2px 0 5px; }
.tray__item.is-ready .tray__meta span:first-child { color: var(--ok); }
.tray__item.is-failed .tray__meta span:first-child { color: var(--err); }
.tray__err { font-size: var(--dj-font-sm); color: var(--err); }
.tray__cancel { position: absolute; right: 2px; top: 6px; width: 24px; height: 24px; }

.progress { height: 6px; background: var(--bg-4); border-radius: 6px; overflow: hidden; }
.progress--thin { height: 3px; }
.progress__fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* Power-on */
.power { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(900px 500px at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
.power__card { text-align: center; display: grid; justify-items: center; gap: 14px; color: var(--accent); padding: 24px; }
.power__logo { max-height: 72px; }
.power__title { color: var(--text); margin: 0; font-size: 1.6rem; letter-spacing: .03em; }
.power__msg { color: var(--text-2); max-width: 420px; margin: 0; }
.power__links { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.power__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-size: .9rem; }
.power__links a:hover { color: var(--text); }

/* MIDI learn */
.learnbar { position: fixed; top: calc(var(--top-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 950; display: flex; align-items: center; gap: 12px; background: #1b1405; color: var(--accent); border: 1px solid var(--accent); border-radius: 12px; padding: 8px 10px 8px 14px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.learnbar span { color: var(--text); font-size: .9rem; }
body.is-learning [data-action] { outline: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; cursor: crosshair; }
body.is-learning .is-learn-target { outline: 2px solid var(--accent); animation: recpulse 1s infinite; }

/* ---------------- DJ workspace ---------------- */
.workspace { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.workspace__wave { position: relative; flex: none; height: 136px; background: #06070a; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.detail { width: 100%; height: 100%; display: block; cursor: ew-resize; }
.detail__zoom { position: absolute; right: 8px; top: 6px; font-family: var(--mono); font-size: var(--dj-font-xs); color: var(--text-3); background: #0a0c10cc; padding: 1px 6px; border-radius: 4px; }
.workspace__decks { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
.workspace__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workspace__top { flex: none; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.workspace.has-lower-h .workspace__top { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.workspace__split { flex: none; height: 8px; margin: -3px 0; display: grid; place-items: center; cursor: row-resize; touch-action: none; border-radius: 4px; }
.workspace__split span { width: 56px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background .15s; }
.workspace__split:hover span, .workspace__split.is-active span, .workspace__split:focus-visible span { background: var(--accent); }
.workspace__split:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
body.is-resizing-y, body.is-resizing-y * { cursor: row-resize !important; user-select: none; }
body.is-resizing-x, body.is-resizing-x * { cursor: col-resize !important; user-select: none; }
/* Lower workspace: Browser | AutoMix | Sampler side by side, resizable. */
.workspace__lower { flex: 1 1 auto; min-height: 200px; display: flex; gap: 0; }
.workspace.has-lower-h .workspace__lower { flex: 0 0 var(--lower-h); }
.wpane { flex: 1 1 0; flex-basis: 0; min-width: 200px; min-height: 0; display: flex; flex-direction: column; }
.wpane > * { flex: 1; min-height: 0; }
.wpane__divider { flex: none; width: 10px; display: grid; place-items: center; cursor: col-resize; touch-action: none; border-radius: 4px; }
.wpane__divider span { width: 3px; height: 48px; border-radius: 2px; background: var(--line-2); transition: background .15s; }
.wpane__divider:hover span, .wpane__divider.is-active span, .wpane__divider:focus-visible span { background: var(--accent); }
.wpane__divider:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.workspace__toggles .icon-btn { width: 28px; height: 28px; }
.workspace[data-layout="performance"] .workspace__wave { height: 170px; }
.workspace[data-layout="browse"] .workspace__wave { height: 96px; }
.workspace[data-layout="browse"] .deck__fx, .workspace[data-layout="browse"] .pads { display: none; }
/* Mix layout: compact decks, large lower workspace. */
.workspace[data-layout="mix"] .workspace__wave { height: 92px; }
.workspace[data-layout="mix"] .deck__fx, .workspace[data-layout="mix"] .pads, .workspace[data-layout="mix"] .deck__jog { display: none; }
.workspace[data-layout="mix"] .deck__main { grid-template-columns: minmax(0, 1fr) auto; }
.workspace[data-layout="mix"] .deck--b .deck__pitch { order: 3; }
.workspace[data-layout="mix"] .deck__pitch .fader { min-height: 70px; }
.workspace[data-layout="mix"] .deck__overview { height: 30px; }
.workspace[data-layout="mix"] .mixer { gap: 4px; padding: 6px; }
.workspace[data-layout="mix"] .mixer .knob__label { display: none; }
.workspace[data-layout="mix"] .mixer .knob__svg { width: 26px; height: 26px; }
.workspace[data-layout="mix"] .channel { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; align-content: start; gap: 2px 4px; padding: 4px 2px; }
.workspace[data-layout="mix"] .channel__id { grid-column: 1 / -1; }
.workspace[data-layout="mix"] .channel__fader { grid-column: 1 / -1; min-height: 72px; height: 72px; }
.workspace[data-layout="mix"] .master { gap: 4px; }
.workspace[data-layout="mix"] .master__mic, .workspace[data-layout="mix"] .master__cue, .workspace[data-layout="mix"] .master__nocue, .workspace[data-layout="mix"] .mixer__xfopts { display: none; }
.workspace[data-layout="mix"] .master__meterwrap { min-height: 50px; }
.wpane > .sampler, .wpane > .amp, .wpane > .library { flex: 1 1 auto; min-height: 0; }
.wpane .sampler__pads { flex: 1; }
.wpane--sampler, .wpane--automix { container-type: inline-size; }
@container (max-width: 340px) { .sampler__pads { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@container (max-width: 420px) { .amp .amq__bpm { display: none; } .amp .amq__row { grid-template-columns: 34px auto minmax(0, 1fr) minmax(0, max-content) 30px; } }

/* Deck */
.deck { --deck: var(--deck-a); --beat: 0; position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.deck--b { --deck: var(--deck-b); }
.deck.is-selected { border-color: color-mix(in srgb, var(--deck) 45%, var(--line)); }
.deck.is-drop { border-color: var(--deck); box-shadow: 0 0 0 2px color-mix(in srgb, var(--deck) 40%, transparent), inset 0 0 40px color-mix(in srgb, var(--deck) 12%, transparent); }
.deck__head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; position: relative; }
.deck__id { font-weight: 800; font-size: 1.3rem; color: var(--deck); width: 20px; text-align: center; }
.deck__art { width: 44px; height: 44px; border-radius: 6px; background: var(--bg-4); display: grid; place-items: center; color: var(--text-3); overflow: hidden; }
.deck__art img { width: 100%; height: 100%; object-fit: cover; }
.deck__meta { min-width: 0; }
.deck__title { font-weight: 700; font-size: var(--dj-font-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck__artist { color: var(--text-2); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck.is-empty .deck__title { color: var(--text-3); font-weight: 600; }
.deck__badges { display: flex; gap: 6px; margin-top: 3px; }
.deck__tempo { text-align: right; }
.deck__bpm { font-family: var(--mono); font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--text); }
.deck__bpm-orig { font-family: var(--mono); font-size: var(--dj-font-xs); color: var(--text-2); margin-top: 3px; }
.deck__clock { text-align: right; }
.deck__time { border: 0; background: transparent; font-family: var(--mono); font-size: var(--dj-font-lg); font-weight: 700; color: var(--text); padding: 0; }
.deck__time.is-warn { color: var(--warn); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
.deck__dur { font-family: var(--mono); font-size: var(--dj-font-xs); color: var(--text-3); }
.deck__tools { display: flex; }
.deck__loadbar { position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--bg-4); }
.deck__loadbar span { display: block; height: 100%; width: 0; background: var(--deck); transition: width .1s; }
.deck__overview { width: 100%; height: 38px; display: block; background: #07080b; border-radius: 6px; cursor: pointer; }
.deck.is-analyzing .deck__overview { background: repeating-linear-gradient(90deg, #07080b 0 12px, #0c0e13 12px 24px); animation: slide 1s linear infinite; }
@keyframes slide { to { background-position: 24px 0; } }
.deck__main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.deck--b .deck__main { grid-template-columns: auto minmax(0, 1fr) auto; }
.deck--b .deck__jog { order: 3; }
.deck--b .deck__pitch { order: 1; }
.deck--b .deck__center { order: 2; }
.deck__jog { display: grid; place-items: center; }
.jog { width: 160px; height: 160px; cursor: grab; touch-action: none; border-radius: 50%; }
.jog.is-touched { cursor: grabbing; }
.deck__center { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.deck__row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.deck__spacer { flex: 1; }
.loop__sizer { display: inline-flex; align-items: center; gap: 2px; background: #0a0c10; border-radius: 7px; padding: 2px; }
.loop__size { min-width: 30px; text-align: center; font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--loop); }
.deck.is-looping .deck__overview { box-shadow: 0 0 0 1px var(--loop); }
.pads { display: flex; flex-direction: column; gap: 4px; }
.pads__tabs { display: flex; gap: 2px; background: #0a0c10; border-radius: 7px; padding: 2px; }
.pads__tab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; border: 0; background: transparent; color: var(--text-3); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 2px; border-radius: 5px; white-space: nowrap; }
.pads__tab.is-on { background: var(--bg-4); color: var(--deck); }
.pads__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pad { --pad: transparent; position: relative; height: calc(38px * var(--dj-ctl-scale)); border-radius: 7px; border: 1px solid #262c3a; background: #11141b; color: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.pad::before { content: ""; position: absolute; inset: 0; background: var(--pad); opacity: .16; }
.pad.is-set { border-color: var(--pad); color: var(--text); }
.pad.is-set::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pad); }
.pad.is-active { background: var(--pad); color: #0b0b0b; box-shadow: 0 0 14px color-mix(in srgb, var(--pad) 50%, transparent); }
.pad.is-active::before { opacity: 0; }
.pad:active { transform: translateY(1px); }
.pad__label { position: relative; font-weight: 700; font-size: .82rem; max-width: 100%; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad__sub { position: relative; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.deck__transport { display: flex; gap: 6px; align-items: stretch; }
.deck__transport .btn-ctl--transport { flex: 1; }
.sync { display: flex; flex-direction: column; gap: 3px; flex: 1.2; }
.sync .btn-ctl--sync { height: 29px; flex: none; }
.sync__opts { display: flex; gap: 3px; }
.sync__opts .btn-ctl { flex: 1; height: 16px; font-size: .6rem; }
.deck__pitch { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; }
.deck__pitch .fader { flex: 1; min-height: 120px; }
.pitch__value { font-family: var(--mono); font-size: .76rem; color: var(--text); }
.pitch__bend { display: flex; gap: 2px; }
.deck__fx { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fx { background: #0c0e13; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; min-width: 0; }
.fx__head { display: flex; align-items: center; gap: 5px; }
.fx__head .select { flex: 1; min-width: 0; }
.fx__num { font-size: .66rem; font-weight: 800; color: var(--text-3); letter-spacing: .06em; }
.fx__body { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 42px; }
.fx__params { display: flex; gap: 6px; }
.fx__hint { font-size: .75rem; color: var(--text-3); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 10px; background: var(--bg-4); color: var(--text-2); font-size: .7rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.badge--sync { background: var(--deck); color: #0b0b0b; }
.badge--match { background: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ok); }
.badge--compat { background: color-mix(in srgb, var(--ok) 12%, transparent); color: color-mix(in srgb, var(--ok) 80%, white); }
.badge--deck { background: var(--bg-4); color: var(--accent); }
.badge--ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge--warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.badge--err { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }

/* Mixer */
.mixer { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; width: 290px; }
.mixer__channels { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; flex: 1; }
.channel { --deck: var(--deck-a); display: flex; flex-direction: column; align-items: center; gap: 3px; background: #0c0e13; border-radius: 8px; padding: 6px 2px; }
.channel--b { --deck: var(--deck-b); }
.channel__id { font-weight: 800; color: var(--deck); font-size: .9rem; }
.channel__fader { display: flex; gap: 4px; align-items: stretch; flex: 1; min-height: 110px; margin-top: 2px; }
.meter { display: block; }
.meter--ch { width: 8px; }
.meter--master { width: 22px; height: 100%; }
.master { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; width: 82px; }
.master__head { font-size: var(--dj-font-2xs); font-weight: 800; letter-spacing: .1em; color: var(--text-3); }
.master__meterwrap { flex: 1; min-height: 70px; display: flex; justify-content: center; }
.master__cue { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.master__nocue { border: 1px dashed var(--line-2); background: transparent; color: var(--text-3); font-size: .66rem; border-radius: 6px; padding: 3px 5px; display: inline-flex; gap: 3px; align-items: center; }
.master__mic { display: flex; flex-direction: column; align-items: center; gap: 3px; border-top: 1px solid var(--line); padding-top: 5px; width: 100%; }
.mic__level { width: 60px; height: 4px; background: var(--bg-4); border-radius: 2px; overflow: hidden; }
.mic__level span { display: block; height: 100%; width: 0; background: var(--ok); }
.mic__level--wide { width: 220px; margin-top: 8px; height: 6px; }
.mixer__xf { display: flex; align-items: center; gap: 6px; }
.mixer__xf-l { color: var(--deck-a); font-weight: 800; } .mixer__xf-r { color: var(--deck-b); font-weight: 800; }
.mixer__xfopts { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--dj-font-sm); }
.mixer.xf-off .fader--xf { opacity: .35; }

/* Sampler */
.sampler { flex: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; display: flex; align-items: center; gap: 10px; }
.sampler__head { display: flex; align-items: center; gap: 8px; }
.sampler__title { font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--text-3); }
.sampler__pads { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.spad { --pad: transparent; position: relative; height: calc(40px * var(--dj-ctl-scale)); border-radius: 7px; border: 1px solid #262c3a; background: #11141b; color: var(--text-2); display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; text-align: left; padding: 3px 7px; column-gap: 6px; touch-action: none; overflow: hidden; }
.spad.is-set { border-color: var(--pad); color: var(--text); }
.spad.is-active { background: var(--pad); color: #0b0b0b; }
.spad__n { grid-row: span 2; font-weight: 800; font-size: .8rem; color: var(--pad); }
.spad.is-active .spad__n { color: #0b0b0b; }
.spad__name { font-size: var(--dj-font-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spad__mode { font-size: .56rem; letter-spacing: .08em; opacity: .7; }
.wpane .sampler { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; }
.wpane .sampler__head { flex-wrap: wrap; }
.wpane .sampler__pads { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(calc(44px * var(--dj-ctl-scale)), 104px); align-content: start; }
.wpane .spad { height: auto; min-height: calc(40px * var(--dj-ctl-scale)); align-content: center; }
.wpane .library { height: 100%; }

/* ---------------- Library ---------------- */
.library { height: 100%; display: grid; grid-template-columns: 220px minmax(0, 1fr); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.library--compact { grid-template-columns: 190px minmax(0, 1fr); }
.library__side { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg-1); }
.library__side-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px 12px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }
.tree { overflow-y: auto; padding: 0 6px 10px; flex: 1; }
.tree__section { display: flex; align-items: center; justify-content: space-between; margin: 12px 6px 4px; font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; border-radius: 6px; }
.tree__section.is-drop { outline: 1px dashed var(--accent); }
.tree__add { border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; }
.tree__add:hover { background: var(--bg-3); color: var(--text); }
.tree__item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--text-2); padding: calc(6px * var(--dj-ctl-scale)) 10px; border-radius: 7px; text-align: left; font-size: var(--dj-font-md); }
.tree__item:hover { background: var(--bg-3); color: var(--text); }
.tree__item.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tree__item.is-drop { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.tree__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree__count { font-size: var(--dj-font-xs); color: var(--text-3); font-family: var(--mono); }
.tree__toggle { display: grid; place-items: center; width: 14px; }
.tree__empty { font-size: var(--dj-font-sm); color: var(--text-3); margin: 2px 12px; }
.library__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.library__toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.library__heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin-right: auto; }
.library__title { margin: 0; font-size: var(--dj-font-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library__count { color: var(--text-3); font-size: .8rem; white-space: nowrap; }
.library__search { position: relative; display: flex; align-items: center; width: min(320px, 40%); }
.library__search .icon { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.input--search { height: calc(30px * var(--dj-ctl-scale)); padding-left: 32px; }
.filters { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--bg-1); }
.filters .input--sm { width: 84px; }
.filters__label { font-size: .75rem; color: var(--text-2); font-weight: 600; }
.bulk { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); flex-wrap: wrap; }
.bulk__count { font-weight: 700; margin-right: 6px; }
.library__table { flex: 1; min-height: 0; position: relative; }
.dropzone { position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); display: grid; place-content: center; justify-items: center; color: var(--accent); z-index: 5; pointer-events: none; }
.preview { display: flex; align-items: center; gap: 8px; background: var(--bg-3); border-radius: 16px; padding: 2px 10px 2px 2px; }
.preview__title { font-size: .8rem; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview__bar { width: 90px; height: 4px; background: var(--bg-4); border-radius: 2px; cursor: pointer; }
.preview__bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.preview__route { font-size: .68rem; color: var(--text-3); }
.picklist { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.picklist__row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 7px 10px; cursor: pointer; }
.picklist__row + .picklist__row { border-top: 1px solid var(--line); }
.picklist__row:hover { background: var(--bg-3); }
.picklist__t { font-weight: 600; }

/* Virtual table */
.vtable { --cols: 1fr; height: 100%; display: flex; flex-direction: column; min-height: 0; position: relative; }
.vtable__head { display: grid; grid-template-columns: var(--cols); gap: 0; border-bottom: 1px solid var(--line); background: var(--bg-2); padding-right: 10px; flex: none; }
.vtable__th { padding: 7px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.vtable__th.is-right { text-align: right; }
.vtable__sort { border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; display: inline-flex; align-items: center; gap: 3px; }
.vtable__sort:hover { color: var(--text); }
.vtable__viewport { flex: 1; overflow: auto; position: relative; outline: none; min-height: 0; }
.vtable__viewport:focus-visible { box-shadow: inset 0 0 0 1px var(--focus); }
.vtable__rows { position: absolute; left: 0; right: 0; top: 0; }
.vtable__row { position: absolute; left: 0; right: 0; height: var(--dj-row-h); display: grid; grid-template-columns: var(--cols); align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: default; user-select: none; -webkit-user-select: none; font-size: var(--dj-font-md); }
.vtable__row:hover { background: var(--bg-3); }
.vtable__row.is-selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.vtable__row.is-focus { box-shadow: inset 2px 0 0 var(--accent); }
.vtable__td { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vtable__td.is-right { text-align: right; }
.vtable__td.muted { color: var(--text-3); font-size: .8rem; }
.vtable__overlay { position: absolute; inset: 40px 0 0 0; display: grid; place-items: center; pointer-events: none; }
.vtable__overlay > * { pointer-events: auto; }
.vtable__loading { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.vtable__dropline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); z-index: 3; pointer-events: none; }
.skel { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--bg-3), var(--bg-4), var(--bg-3)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; width: 70%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.thumb { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; object-fit: cover; background: var(--bg-4); color: var(--text-3); }
.fav { border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center; padding: 3px; opacity: .5; }
.vtable__row:hover .fav, .fav.is-on { opacity: 1; }
.fav.is-on { color: var(--err); }
.fav.is-on svg path { fill: currentColor; }
.stars { display: inline-flex; }
.star { border: 0; background: transparent; padding: 0 1px; color: var(--text-3); opacity: .5; display: grid; place-items: center; }
.star.is-on { color: var(--accent); opacity: 1; }
.star.is-on svg path { fill: currentColor; }
.vtable__row:hover .star { opacity: 1; }
.cell-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cell-title__t { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.key { font-family: var(--mono); font-size: .82rem; }
.key--match { color: var(--ok); font-weight: 700; }
.key--compat { color: color-mix(in srgb, var(--ok) 75%, var(--text)); }
.status { font-size: .74rem; padding: 1px 7px; border-radius: 10px; background: var(--bg-4); color: var(--text-2); }
.status--done { background: transparent; color: var(--text-3); }
.status--queued, .status--analyzing { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.status--failed { color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); }
.drag-ghost { position: fixed; top: -100px; left: -100px; padding: 6px 12px; background: var(--accent); color: #0b0b0b; border-radius: 8px; font-weight: 700; font-size: .85rem; }

/* ---------------- Pages ---------------- */
.page { max-width: 1280px; margin: 0 auto; padding: 22px 26px 60px; }
.page--library { max-width: none; height: 100%; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.page--library .library { flex: 1; min-height: 0; }
.page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--dj-font-xl); letter-spacing: .01em; }
.page__title .icon { color: var(--accent); }
.page__sub { margin: 6px 0 0; color: var(--text-2); max-width: 680px; }
.page__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.card__title { margin: 0 0 12px; font-size: var(--dj-font-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat__label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.stat__value { font-size: var(--dj-font-xl); font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat__sub { font-size: var(--dj-font-sm); color: var(--text-2); }
.dtable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.dtable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dtable th { text-align: left; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; padding: 9px 12px; background: var(--bg-1); border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtable td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--bg-3); }
.dtable tr.is-current td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dtable--compact td { padding: 6px 10px; }
.dtable--matrix th, .dtable--matrix td { text-align: center; }
.dtable--matrix tbody th { text-align: left; background: transparent; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text); }
.dtable__actions { text-align: right; white-space: nowrap; }
.dtable__actions > * { margin-left: 2px; }
.dtable__group td { background: var(--bg-1); font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }
.empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 30px 16px; color: var(--text-3); }
.empty__title { margin: 6px 0 0; font-size: var(--dj-font-base); color: var(--text); }
.empty__text { margin: 0 0 8px; max-width: 380px; color: var(--text-2); }
.skeleton { display: grid; gap: 8px; }
.skeleton__row { height: 36px; border-radius: 8px; background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.hint { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .85rem; padding: 0 4px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line-2); }
.notice p { margin: 4px 0 0; color: var(--text-2); }
.notice--warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); } .notice--warn .icon { color: var(--warn); }
.notice--err { border-color: color-mix(in srgb, var(--err) 50%, transparent); } .notice--err .icon { color: var(--err); }
.notice--ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); } .notice--ok .icon { color: var(--ok); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { border: 0; background: transparent; padding: calc(9px * var(--dj-ctl-scale)) 14px; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.settings { display: grid; gap: 16px; }
.settings__body { display: grid; gap: 16px; max-width: 900px; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.keycap { font-family: var(--mono); min-width: 58px; height: calc(28px * var(--dj-ctl-scale)); padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 3px; background: var(--bg-3); color: var(--text); font-size: .85rem; }
.keycap--empty { color: var(--text-3); font-family: var(--font); font-size: var(--dj-font-sm); }
.keycap.is-capturing { border-color: var(--accent); color: var(--accent); animation: blink 1s steps(2) infinite; }
.quota { display: grid; gap: 6px; margin-bottom: 14px; color: var(--text-2); font-size: var(--dj-font-md); max-width: 420px; }
.rec-player { width: 100%; margin-bottom: 8px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.cleanup { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }

/* Smart playlists */
.smart { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.smart__list { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: grid; gap: 2px; }
.smart__item { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--text-2); padding: 8px 10px; border-radius: 8px; text-align: left; }
.smart__item span:nth-child(2) { flex: 1; }
.smart__item:hover { background: var(--bg-3); color: var(--text); }
.smart__item.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.smart__main { display: grid; gap: 16px; min-width: 0; }
.smart__editor { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
.smart__row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.smart__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.smart__between { display: inline-flex; align-items: center; gap: 6px; }
.smart__between .input--sm { width: 80px; }
.smart__results { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; height: 420px; display: flex; flex-direction: column; overflow: hidden; }
.smart__results-head { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rules { display: grid; gap: 6px; }
.rule { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--bg-1); border: 1px solid var(--line); padding: 6px; border-radius: 8px; }
.rule .input--sm { width: 160px; }

/* History */
.history { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.history__sets { display: grid; gap: 4px; max-height: 70vh; overflow: auto; }
.history__set { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); border-radius: 10px; padding: 10px 12px; }
.history__set.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); }
.history__set .muted { font-size: .8rem; }
.history__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.history__head h2 { margin: 0 auto 0 0; font-size: 1.05rem; }

/* MIDI */
.midi__mapbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.midi__monitor { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 240px; overflow: auto; font-size: .85rem; }
.midi__monitor li { padding: 3px 8px; background: var(--bg-1); border-radius: 5px; }

/* Profile */
.profile { display: grid; gap: 16px; max-width: 900px; }
.profile__id { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profile__id h2 { margin: 0; }
.profile__id p { margin: 3px 0; }
.profile__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line-2); }

/* Track editor */
.editor { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
.editor__side { display: grid; gap: 8px; align-content: start; }
.editor__art { width: 180px; height: 180px; border-radius: 10px; overflow: hidden; background: var(--bg-4); display: grid; place-items: center; }
.editor__art img { width: 100%; height: 100%; object-fit: cover; }
.editor__noart { color: var(--text-3); }
.editor__h { margin: 8px 0 6px; font-size: var(--dj-font-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.editor__dj { background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 10px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; font-size: var(--dj-font-md); }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; }

/* Onboarding */
.wizard { min-height: 280px; display: grid; gap: 12px; align-content: start; }
.wizard h3 { margin: 4px 0 0; font-size: var(--dj-font-lg); }
.wizard p { margin: 0; }
.wizard__hero { color: var(--accent); }
.wizard__foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.wizard__dots { display: flex; gap: 6px; }
.wizard__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-4); }
.wizard__dots span.is-on { background: var(--accent); }
.wizard__drop { border: 2px dashed var(--line-2); border-radius: 12px; padding: 26px; display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer; color: var(--text-2); }
.wizard__drop.is-drop, .wizard__drop:hover { border-color: var(--accent); color: var(--accent); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--dj-font-md); }
.checklist li { display: flex; gap: 8px; align-items: baseline; }
.checklist li.is-ok .icon { color: var(--ok); }
.checklist li.is-no .icon { color: var(--warn); }
.tour { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.analysis__text { margin: 12px 0 6px; font-family: var(--mono); }
.analysis__current { display: grid; gap: 4px; margin-top: 12px; }

/* ---------------- Text size (Settings → Appearance) ---------------- */
.textsize { display: flex; align-items: center; gap: 8px; padding: calc(6px * var(--dj-ctl-scale)) 10px; font-size: var(--dj-font-md); }
.textsize__icon { color: var(--text-2); flex: none; }
.textsize__label { flex: 1; white-space: nowrap; }
.textsize__btn { display: grid; place-items: center; width: calc(26px * var(--dj-ctl-scale)); height: calc(26px * var(--dj-ctl-scale)); border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text); }
.textsize__btn:hover:not(:disabled) { background: var(--bg-4); }
.textsize__btn:disabled { opacity: .35; cursor: default; }
.textsize__value { min-width: 3.4em; text-align: center; font-family: var(--mono); font-weight: 700; }
.seg--textsize { margin: 4px 0; }
.textsize-current { margin: 8px 0 12px; color: var(--text-2); font-size: var(--dj-font-md); }
.textsize-preview { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); padding: 12px; display: grid; gap: 10px; margin-bottom: 10px; max-width: 640px; }
.textsize-preview__deck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.textsize-preview__id { font-weight: 800; font-size: var(--dj-font-lg); color: var(--deck-a); }
.textsize-preview__meta { min-width: 0; }
.textsize-preview__bpm { text-align: right; }
.textsize-preview__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.textsize-preview__row .btn-ctl { --deck: var(--deck-a); }
.textsize-preview__table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.textsize-preview__th, .textsize-preview__tr { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 8px; padding: 0 10px; align-items: center; }
.textsize-preview__th { font-size: var(--dj-font-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); padding-top: 6px; padding-bottom: 6px; }
.textsize-preview__tr { height: var(--dj-row-h); font-size: var(--dj-font-md); }
.textsize-preview__th span, .textsize-preview__tr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Larger text sizes: protect layouts (text wraps or truncates; controls keep usable sizes). */
html[data-text-size="large"], html[data-text-size="xl"] {
	--nav-w: calc(208px * var(--dj-ctl-scale));
}
html[data-text-size="large"] .page__title, html[data-text-size="xl"] .page__title { flex-wrap: wrap; }
html[data-text-size="large"] .seg, html[data-text-size="xl"] .seg { max-width: 100%; }
html[data-text-size="large"] .modal__title, html[data-text-size="xl"] .modal__title { overflow-wrap: anywhere; }
html[data-text-size="large"] .dtable td, html[data-text-size="xl"] .dtable td { overflow-wrap: anywhere; }
html[data-text-size="large"] .field__label, html[data-text-size="xl"] .field__label { white-space: normal; }
html[data-text-size="large"] .library__heading, html[data-text-size="xl"] .library__heading { flex-wrap: wrap; }
html[data-text-size="large"] .vtable__th, html[data-text-size="xl"] .vtable__th { text-overflow: ellipsis; }
html[data-text-size="large"] .vtable__sort, html[data-text-size="xl"] .vtable__sort { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
/* DJ workspace: waveform and mixer keep their space; secondary metadata collapses into tooltips. */
html[data-text-size="xl"] .deck__dur,
html[data-text-size="xl"] .top__stat { display: none; }
html[data-text-size="large"] .deck__head, html[data-text-size="xl"] .deck__head { gap: 8px; }
html[data-text-size="xl"] .deck__badges { flex-wrap: wrap; }
html[data-text-size="large"] .knob__label, html[data-text-size="xl"] .knob__label { letter-spacing: .02em; }
html[data-text-size="large"] .pads__tab, html[data-text-size="xl"] .pads__tab { letter-spacing: 0; white-space: normal; line-height: 1.1; overflow-wrap: normal; }
html[data-text-size="large"] .mixer, html[data-text-size="xl"] .mixer { width: 300px; }
html[data-text-size="compact"] .pitch__bend .btn-ctl, html[data-text-size="large"] .pitch__bend .btn-ctl, html[data-text-size="xl"] .pitch__bend .btn-ctl { min-width: 0; width: 21px; padding: 0; }
html[data-text-size="large"] .deck__pitch, html[data-text-size="xl"] .deck__pitch { width: 68px; }
html[data-text-size="large"] .master, html[data-text-size="xl"] .master { width: 88px; }

/* ---------------- AutoMix ---------------- */
:root { --automix: #9d7be6; --automix-2: #bba5ff; }
.page--automix { max-width: none; height: 100%; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.am-head { flex: none; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.am-head .page__title { font-size: var(--dj-font-lg); }
.am-head .page__title .icon { color: var(--automix); }
.am-head__spacer { flex: 1; }
.am-status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 14px; font-size: var(--dj-font-xs); font-weight: 800; letter-spacing: .08em; white-space: nowrap; background: var(--bg-3); color: var(--text-3); border: 1px solid var(--line-2); }
.am-status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.am-status.is-active { color: #fff; background: color-mix(in srgb, var(--automix) 26%, transparent); border-color: var(--automix); }
.am-status.is-active .am-status__dot { background: var(--automix-2); box-shadow: 0 0 8px var(--automix-2); animation: ampulse 1.4s ease-in-out infinite; }
.am-status.is-paused { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.am-status.is-manual { color: #ffb36b; border-color: color-mix(in srgb, #ffb36b 60%, transparent); }
@keyframes ampulse { 50% { opacity: .35; } }
.am-transport { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.am-transport .btn { white-space: nowrap; }
.am-transport--compact { gap: 4px; }
.am-transport--compact .btn:not(.btn--primary) .am-tr__label { display: none; }
.am-transport--compact .btn:not(.btn--primary) { width: calc(28px * var(--dj-ctl-scale)); padding: 0; justify-content: center; }
.am-addtoggle { display: none; }
.am-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); gap: 10px; }
.am-main { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.am-side { min-height: 0; display: flex; flex-direction: column; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.am-side__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.am-side__head .card__title { margin: 0; }
.am-side .library { flex: 1; min-height: 0; }
.library--automix { grid-template-columns: 158px minmax(0, 1fr); }
.library--automix .library__search { flex: 1 1 140px; }

/* Now / transition / next. */
.am-nn { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; }
.am-card, .am-tx { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.am-card--now { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.am-card--next { border-color: color-mix(in srgb, var(--automix) 35%, var(--line)); }
.am-card__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--dj-font-2xs); font-weight: 800; letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.am-deckid { color: var(--accent); letter-spacing: .06em; }
.am-card--next .am-deckid { color: var(--automix-2); }
.am-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.am-card__meta { min-width: 0; }
.am-card__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-card__artist { color: var(--text-2); font-size: var(--dj-font-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.am-card__foot { display: flex; justify-content: flex-end; margin-top: auto; }
.am-card__body:has(> :nth-child(2):last-child) { grid-template-columns: auto minmax(0, 1fr); }
.am-card__empty { margin: 0; color: var(--text-3); font-size: var(--dj-font-sm); }
.am-art { width: 34px; height: 34px; border-radius: 5px; background: var(--bg-4); display: inline-grid; place-items: center; color: var(--text-3); overflow: hidden; flex: none; }
.am-art img { width: 100%; height: 100%; object-fit: cover; }
.am-art--lg { width: 54px; height: 54px; border-radius: 7px; }
.am-nn__time { font-size: var(--dj-font-lg); font-weight: 700; }
.am-nn__bar { position: relative; height: 6px; border-radius: 3px; background: var(--bg-4); overflow: hidden; }
.am-nn__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.am-nn__zone { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--automix) 70%, transparent); }
.am-tx { border-style: dashed; border-color: color-mix(in srgb, var(--automix) 45%, var(--line)); }
.am-tx__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.am-tx__state { font-size: var(--dj-font-xs); font-weight: 700; color: var(--text-2); }
.am-tx__state.is-ok { color: var(--ok); }
.am-tx__state.is-warn { color: var(--warn); }
.am-tx__state.is-mixing { color: var(--automix-2); }
.am-tx__row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.am-tx__small { font-size: var(--dj-font-2xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.am-tx__count { font-size: var(--dj-font-xl); font-weight: 700; line-height: 1.1; }
.am-tx__label { font-weight: 700; color: var(--automix-2); font-size: var(--dj-font-sm); }
.am-tx__prog { height: 4px; border-radius: 2px; background: var(--bg-4); overflow: hidden; }
.am-tx__prog span { display: block; height: 100%; background: var(--automix); transform-origin: left; transform: scaleX(0); }
.am-tx__why summary { cursor: pointer; font-size: var(--dj-font-xs); color: var(--text-2); }
.am-tx__reasons { margin: 6px 0 0; padding-left: 18px; font-size: var(--dj-font-xs); color: var(--text-2); display: grid; gap: 3px; }
.am-tx__reasons .is-warn { color: var(--warn); }

/* Queue. */
.am-queue { display: flex; flex-direction: column; min-height: 0; padding: 12px 12px 6px; }
.am-queue__head { display: flex; align-items: baseline; gap: 10px; }
.am-queue__head .card__title { margin: 0; }
.am-queue__count { color: var(--text-3); font-size: var(--dj-font-sm); }
.am-queue__tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.am-smartnote { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; background: color-mix(in srgb, var(--automix) 14%, transparent); color: var(--automix-2); font-size: var(--dj-font-sm); }
.amq-wrap { position: relative; flex: 1; min-height: 120px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); }
.amq-wrap.is-drop { border-color: var(--automix); }
.amq-wrap--compact { min-height: 0; }
.amq { list-style: none; margin: 0; padding: 0; }
.amq__row { display: grid; grid-template-columns: 34px 14px auto minmax(0, 1fr) 50px 58px 46px minmax(110px, max-content) 30px; align-items: center; gap: 8px; min-height: calc(var(--dj-row-h) + 8px); padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: var(--dj-font-sm); cursor: default; }
.amq-wrap--compact .amq__row { grid-template-columns: 34px auto minmax(0, 1fr) 46px minmax(90px, max-content) 30px; }
.amq__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.amq__row:hover { background: var(--bg-3); }
.amq__row[draggable="true"] { cursor: grab; }
.amq__row.is-dragging { opacity: .4; }
.amq__row.is-current { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.amq__row.is-next { box-shadow: inset 3px 0 0 var(--automix); }
.amq__row.is-played { opacity: .6; }
.amq__row.is-failed .amq__title { color: var(--err); text-decoration: line-through; }
.amq__row.is-loading .amq__chip { animation: ampulse 1s ease-in-out infinite; }
.amq__num { text-align: center; font-family: var(--mono); color: var(--text-3); font-size: var(--dj-font-xs); }
.amq__row.is-next .amq__num { color: var(--automix-2); font-weight: 800; font-family: var(--font); font-size: var(--dj-font-2xs); letter-spacing: .06em; }
.amq__row.is-current .amq__num { color: var(--accent); }
.amq__handle { color: var(--text-3); display: grid; place-items: center; }
.amq__meta { display: flex; flex-direction: column; min-width: 0; }
.amq__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amq__artist { color: var(--text-2); font-size: var(--dj-font-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amq__bpm, .amq__dur { text-align: right; color: var(--text-2); font-size: var(--dj-font-xs); }
.amq__chip { display: inline-flex; align-items: center; gap: 4px; justify-self: start; max-width: 100%; min-height: calc(22px * var(--dj-ctl-scale)); padding: 2px 9px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text-2); font-size: var(--dj-font-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amq__chip:not(:disabled) { cursor: pointer; }
.amq__chip:not(:disabled):hover { border-color: var(--automix); color: var(--text); }
.amq__chip.is-beatmix { color: var(--automix-2); border-color: color-mix(in srgb, var(--automix) 45%, transparent); }
.amq__chip.is-fade { color: #8fc9ee; border-color: color-mix(in srgb, #5bb8e0 40%, transparent); }
.amq__chip.is-cut { color: #ffb36b; border-color: color-mix(in srgb, #ffb36b 40%, transparent); }
.amq__chip.is-now { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.amq__chip.is-failed { color: var(--err); }
.amq__chip.is-custom { border-style: dashed; }
.amq__dropline { position: absolute; left: 6px; right: 6px; height: 2px; background: var(--automix); pointer-events: none; }
.amq__empty { display: flex; align-items: center; gap: 10px; padding: 18px; color: var(--text-3); font-size: var(--dj-font-sm); }
.amq__more-note { padding: 6px 12px; color: var(--text-3); font-size: var(--dj-font-xs); }

/* Quick panel (DJ console) + top bar status. */
.amp { flex: none; background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--automix) 30%, var(--line)); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.amp__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amp__spacer { flex: 1; }
.amp .am-transport { flex-wrap: wrap; }
.amp__tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.amp__count { font-size: var(--dj-font-xs); color: var(--text-3); }
.amp__queue { flex: 1; min-height: 80px; display: flex; flex-direction: column; }
.amp__queue .amq-wrap { flex: 1; max-height: none; min-height: 0; }
.amq__sep { padding: 5px 10px 3px; font-size: var(--dj-font-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.amq__sep--now { color: var(--accent); }
.amq__sep--up { color: var(--automix-2); }
.amq__row.is-played:hover, .amq__row.is-played:focus-visible { opacity: .9; }
.amp__bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.amp__title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--dj-font-2xs); font-weight: 800; letter-spacing: .12em; color: var(--automix-2); }
.amp .am-status { font-size: var(--dj-font-2xs); padding: 2px 8px; }
.amp__info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.amp__row { display: flex; gap: 6px; min-width: 0; align-items: baseline; }
.amp__k { flex: none; font-size: var(--dj-font-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); min-width: 52px; }
.amp__track { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--dj-font-sm); }
.amp__tx { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.amp__cd { font-weight: 700; }
.amp__plan { font-size: var(--dj-font-xs); color: var(--automix-2); }
.amp__qbtn .icon { margin-left: 2px; }
.workspace__toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.top__automix { display: inline-flex; align-items: center; gap: 6px; height: calc(28px * var(--dj-ctl-scale)); padding: 0 11px; border-radius: 14px; border: 1px solid var(--automix); background: color-mix(in srgb, var(--automix) 20%, transparent); color: #fff; font-size: var(--dj-font-xs); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.top__automix[hidden] { display: none; }
.top__automix .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--automix-2); box-shadow: 0 0 6px var(--automix-2); animation: ampulse 1.4s ease-in-out infinite; }
.top__automix.is-paused { border-color: var(--warn); background: transparent; color: var(--warn); }
.top__automix.is-paused .dot, .top__automix.is-takeover .dot { animation: none; background: currentColor; box-shadow: none; }
.top__automix.is-takeover { border-color: #ffb36b; background: transparent; color: #ffb36b; }
.library__plactions { display: inline-flex; gap: 4px; align-self: center; }
.btn--automix .icon { color: var(--automix-2); }
.badge--automix { background: color-mix(in srgb, var(--automix) 22%, transparent); color: var(--automix-2); }
.history__prev, .history__trans { font-size: var(--dj-font-xs); color: var(--text-3); margin-top: 2px; }

/* Transition editor. */
.am-ed { display: grid; gap: 12px; }
.am-ed__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.am-ed__pair > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.am-ed__pair .am-card__label { width: 100%; }
.am-ed__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.am-ed__controls .field { margin: 0; }
.am-ed__waves { display: grid; gap: 10px; }
.am-ed__lane { display: grid; gap: 6px; }
.am-ed__lanehead { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.am-ed__nudge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--dj-font-xs); color: var(--text-2); }
.am-ed__cv { display: block; width: 100%; height: 110px; border-radius: 8px; border: 1px solid var(--line); cursor: ew-resize; touch-action: none; }
.am-ed__summary { margin: 0; font-size: var(--dj-font-sm); color: var(--text); }
.am-set__custom { display: grid; gap: 0; padding-left: 12px; border-left: 2px solid var(--automix); margin-bottom: 8px; }

html[data-text-size="large"] .amq__chip, html[data-text-size="xl"] .amq__chip { white-space: normal; text-align: left; line-height: 1.2; }
html[data-text-size="xl"] .amq__row { grid-template-columns: 34px 14px auto minmax(0, 1fr) 52px 46px minmax(96px, max-content) 30px; }
html[data-text-size="xl"] .amq__dur { display: none; }
html[data-text-size="xl"] .amq-wrap--compact .amq__row { grid-template-columns: 34px auto minmax(0, 1fr) 46px minmax(90px, max-content) 30px; }
@media (max-width: 1500px) {
	.am-nn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.am-nn .am-tx { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 1280px) {
	.am-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); }
	.amq__row { grid-template-columns: 34px 14px auto minmax(0, 1fr) 50px 46px minmax(100px, max-content) 30px; }
	.amq__key { display: none; }
	.amq-wrap--compact .amq__row { grid-template-columns: 34px auto minmax(0, 1fr) 46px minmax(90px, max-content) 30px; }
}
@media (max-width: 1024px) {
	.page--automix { height: auto; min-height: 100%; }
	.am-grid { grid-template-columns: minmax(0, 1fr); }
	.am-main { grid-template-rows: auto auto; }
	.amq-wrap { max-height: 60vh; }
	.am-side { display: none; }
	.am-side.is-open { display: flex; height: 70vh; }
	.am-addtoggle { display: inline-flex; }
	.am-side .library { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	/* Mobile: simplified queue management. */
	.am-nn { grid-template-columns: minmax(0, 1fr); }
	.am-transport .btn--ghost .am-tr__label { display: none; }
	.am-transport .btn--ghost { width: calc(34px * var(--dj-ctl-scale)); padding: 0; justify-content: center; }
	.amq__row, html[data-text-size] .amq__row, .amq-wrap--compact .amq__row { grid-template-columns: minmax(28px, max-content) auto minmax(0, 1fr) minmax(0, max-content) 28px; gap: 6px; }
	.amq__handle, .amq__key, .amq__dur, .amq__bpm { display: none; }
	.amq__chip { max-width: 34vw; }
	.am-ed__pair { grid-template-columns: 1fr; }
	.amp__info { flex-basis: 100%; }
	.page--automix { padding: 8px; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1500px) {
	.jog { width: 130px; height: 130px; }
	.mixer { width: 262px; }
}
@media (max-width: 1280px) {
	.workspace__decks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.workspace__decks .mixer { grid-column: 1 / -1; grid-row: 2; width: auto; flex-direction: row; flex-wrap: wrap; }
	.workspace__decks .mixer__channels { flex: 1 1 520px; }
	.mixer__xf { flex: 1 1 260px; }
	.jog { width: 110px; height: 110px; }
	.workspace__wave { height: 110px; }
	.top__status .top__stat { display: none; }
	.view__dj { overflow-y: auto; }
	.workspace { height: auto; min-height: 100%; }
	.workspace__browser, .workspace__lower, .workspace.has-lower-h .workspace__lower { min-height: 460px; flex: none; }
	.workspace__split { display: none; }
	.workspace.has-lower-h .workspace__top { overflow: visible; flex: none; }
}
@media (max-width: 1024px) {
	:root { --nav-w: 64px; }
	.nav__label { display: none; }
	.nav__item { justify-content: center; }
	.workspace__decks { grid-template-columns: 1fr; }
	.workspace__decks .mixer { grid-row: auto; }
	.deck__fx { grid-template-columns: 1fr; }
	.library { grid-template-columns: 1fr; }
	.library__side { display: none; }
	.smart, .history, .editor { grid-template-columns: minmax(0, 1fr); }
	.top__user-name, .brand__name { display: none; }
	.sampler__pads { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
	/* Mobile: simplified but usable — no jog, FX or full pad console. */
	.top { gap: 4px; }
	.top__meter, .top__status { display: none; }
	.nav { position: fixed; left: 0; top: var(--top-h); bottom: 0; z-index: 700; transform: translateX(-100%); transition: transform .2s; width: 220px; }
	.nav__label { display: inline; }
	.nav__item { justify-content: flex-start; }
	.nav-open .nav { transform: none; }
	.nav__collapse { display: none; }
	.deck__jog, .deck__fx, .pads__tabs, .deck__loops .loop__sizer ~ *, .sync__opts, .workspace__bar .seg { display: none !important; }
	.deck__main { grid-template-columns: minmax(0, 1fr) auto; }
	.deck__head { grid-template-columns: auto minmax(0, 1fr) auto; }
	.deck__art, .deck__tools, .deck__tempo .deck__bpm-orig { display: none; }
	.deck__pitch { width: 48px; }
	.workspace__wave { height: 90px; }
	.pads__grid { grid-template-columns: repeat(4, 1fr); }
	.pad { height: 34px; }
	.page { padding: 16px 12px 60px; }
	.pitch__bend .btn-ctl, html[data-text-size] .pitch__bend .btn-ctl { min-width: 0; width: 20px; padding: 0; }
	.smart__row > *, .rule > * { min-width: 0; max-width: 100%; }
	.rule .input--sm { width: 100%; }
	.grid2, .grid3 { grid-template-columns: 1fr; }
	.minibar { flex-wrap: wrap; }
	.minibar__master { display: none; }
	.tray { left: 12px; right: 12px; width: auto; }
	.library__search { width: 100%; order: 5; }
}
@media (min-width: 721px) {
	.top > .icon-btn:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}
@media (max-width: 1024px) {
	/* Tablet / phone: the lower panels stack instead of sitting side by side. */
	.workspace__lower, .workspace.has-lower-h .workspace__lower { flex-direction: column; gap: 8px; min-height: 0; }
	.wpane { flex: none !important; min-width: 0; min-height: 340px; }
	.wpane--sampler { min-height: 0; }
	.wpane__divider { display: none; }
}