/* DDJ — Discovery DJ */

:root {
    --dj-radius: 10px;
    --dj-font: 'Segoe UI', system-ui, sans-serif;
    --dj-deck-a: #5c6bc0;
    --dj-deck-b: #ec407a;
    --dj-danger: #ff5252;
}

html,
html[data-theme="dark"] {
    --dj-bg: #0a0a12;
    --dj-surface: #14141f;
    --dj-surface2: #1c1c2a;
    --dj-border: #2a2a3d;
    --dj-text: #e8e8f0;
    --dj-muted: #8888a0;
    --dj-accent: #7c4dff;
    --dj-accent2: #00e5c7;
    --dj-hover: #252535;
    --dj-shadow: rgba(0, 0, 0, 0.35);
    --dj-logo-ring: linear-gradient(145deg, rgba(124, 77, 255, 0.45), rgba(0, 229, 199, 0.28));
    --dj-waveform-bg: #1c1c2a;
    --dj-modal-overlay: rgba(0, 0, 0, 0.65);
}

html[data-theme="light"] {
    --pd-azul: #336699;
    --pd-rojo: #990000;
    --pd-azul-soft: #4a7fb3;
    --pd-rojo-soft: #b32424;
    --dj-bg: #d4e0ed;
    --dj-surface: #e8f0f8;
    --dj-surface2: #dce8f4;
    --dj-border: #a8bdd4;
    --dj-text: #1a2a3d;
    --dj-muted: #4a627a;
    --dj-accent: var(--pd-azul);
    --dj-accent2: var(--pd-rojo);
    --dj-hover: rgba(51, 102, 153, 0.14);
    --dj-shadow: rgba(26, 42, 61, 0.16);
    --dj-logo-ring: linear-gradient(145deg, rgba(51, 102, 153, 0.45), rgba(153, 0, 0, 0.35));
    --dj-waveform-bg: #c8d9ea;
    --dj-modal-overlay: rgba(26, 42, 61, 0.5);
    --dj-deck-a: #336699;
    --dj-deck-b: #990000;
}

html[data-theme="light"] body,
html[data-theme="light"] .dj-app {
    background: linear-gradient(160deg, #c9d9ea 0%, #dce8f4 42%, #e6dfe8 100%);
}

html[data-theme="light"] .dj-header,
html[data-theme="light"] .dj-library,
html[data-theme="light"] .dj-deck,
html[data-theme="light"] .dj-automix,
html[data-theme="light"] .dj-sampler-bar,
html[data-theme="light"] .dj-footer {
    background: rgba(232, 240, 248, 0.92);
    backdrop-filter: blur(6px);
}

html[data-theme="light"] .dj-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pd-azul), #285580);
    border-color: var(--pd-azul);
}

html[data-theme="light"] .dj-btn--primary:hover {
    background: linear-gradient(135deg, var(--pd-azul-soft), var(--pd-azul));
}

html[data-theme="light"] .dj-sync-btn {
    color: var(--pd-azul);
}

html[data-theme="light"] .dj-master-btn--active {
    color: #fff;
    background: var(--pd-rojo);
    border-color: var(--pd-rojo);
}

html[data-theme="light"] .dj-bpm,
html[data-theme="light"] .dj-automix-item--active {
    color: var(--pd-rojo);
}

html[data-theme="light"] .dj-automix-item--active {
    background: rgba(153, 0, 0, 0.08);
    border-left-color: var(--pd-rojo);
}

html[data-theme="light"] .dj-keylock-btn--active,
html[data-theme="light"] .dj-autocfade-btn--active,
html[data-theme="light"] .dj-precue-btn--active {
    border-color: var(--pd-azul);
    color: var(--pd-azul);
    background: rgba(51, 102, 153, 0.12);
}

html[data-theme="light"] .dj-crossfader-wrap--centered .dj-crossfader-center,
html[data-theme="light"] .dj-crossfader-wrap--centered .dj-crossfader-center::before {
    background: var(--pd-rojo);
    border-color: var(--pd-rojo);
    box-shadow: 0 0 6px rgba(153, 0, 0, 0.35);
}

html[data-theme="light"] .dj-brand-title {
    background: linear-gradient(135deg, var(--pd-azul) 30%, var(--pd-rojo) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--dj-bg);
    color: var(--dj-text);
    font-family: var(--dj-font);
    overflow: hidden;
}

.dj-app {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    overflow: hidden;
}

.dj-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--dj-surface);
    border-bottom: 1px solid var(--dj-border);
    flex-shrink: 0;
}

.dj-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.dj-logo-wrap {
    display: block;
    padding: 4px;
    border-radius: 16px;
    background: var(--dj-logo-ring);
    box-shadow: 0 6px 28px var(--dj-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dj-brand:hover .dj-logo-wrap {
    transform: translateY(-1px);
    box-shadow: 0 10px 32px var(--dj-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.dj-logo {
    display: block;
    height: 58px;
    width: auto;
    max-width: 200px;
    border-radius: 12px;
    object-fit: contain;
    image-rendering: auto;
}

.dj-brand-text {
    display: none;
}

.dj-subtitle {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--dj-muted);
}

.dj-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dj-btn--install {
    border-color: var(--dj-accent);
    color: var(--dj-accent);
}

.dj-btn--install-ready {
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.2), rgba(66, 165, 245, 0.15));
    border-color: var(--dj-accent);
    color: #fff;
    animation: ddj-install-pulse 2s ease-in-out infinite;
}

.dj-btn--install-ready .dj-btn-install-label {
    font-weight: 700;
}

@keyframes ddj-install-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(124, 77, 255, 0); }
}

.dj-install-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(124, 77, 255, 0.18), rgba(66, 165, 245, 0.12));
    border-bottom: 1px solid var(--dj-border);
    font-size: 0.86rem;
}

.dj-install-banner-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dj-text);
}

.dj-install-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.dj-install-actions {
    margin: 0 0 1rem;
}

.dj-ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--dj-surface);
    border: 1px dashed var(--dj-border);
    border-radius: 8px;
    min-height: 48px;
    text-align: center;
}

.dj-ad-slot-label {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dj-muted);
    opacity: 0.7;
}

.dj-ad-slot-body {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dj-ad-slot--header,
.dj-ad-slot--footer {
    margin: 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.dj-ad-slot--library {
    margin-top: 8px;
    flex-shrink: 0;
}

.dj-ad-slot--radio {
    margin: 6px 8px 8px;
    flex-shrink: 0;
}

.dj-ad-promo {
    color: var(--dj-accent);
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.35;
}

.dj-ad-promo:hover { text-decoration: underline; }

.dj-tier-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--dj-border);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dj-muted);
}

.dj-tier-tag--full {
    border-color: #ffd54f;
    color: #ffd54f;
    background: rgba(255, 213, 79, 0.1);
}

.dj-settings-actions--tier {
    margin-bottom: 0.5rem;
}

.dj-settings-actions--inline {
    margin: 0 0 1rem;
    justify-content: flex-start;
}

.dj-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    background: var(--dj-surface2);
    color: var(--dj-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.dj-btn:hover { background: var(--dj-hover); border-color: var(--dj-border); }
.dj-btn--primary { background: var(--dj-accent); border-color: var(--dj-accent); color: #fff; }
.dj-btn--primary:hover { background: #6a3de8; }
.dj-btn--ghost { background: transparent; }
.dj-btn--icon {
    padding: 10px 12px;
    min-width: 44px;
    justify-content: center;
}

.dj-icon {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.dj-btn--icon .dj-icon {
    width: 1.25em;
    height: 1.25em;
    display: block;
}

.dj-file-btn { cursor: pointer; }

.dj-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.dj-decks {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.dj-library {
    grid-column: 1;
    grid-row: 1 / span 3;
    min-width: 0;
}

.dj-automix {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(28vh, 220px);
    padding: 8px 12px;
    background: var(--dj-surface);
    border-top: 1px solid var(--dj-border);
    flex-shrink: 0;
}

.dj-automix.dj-drop--over {
    outline: 2px dashed var(--dj-accent2);
    outline-offset: -2px;
}

.dj-automix-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.dj-automix-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.dj-automix-title h2 {
    margin: 0;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dj-automix-status {
    font-size: 0.72rem;
    color: var(--dj-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.dj-automix-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dj-automix-repeat-btn--active {
    background: rgba(124, 77, 255, 0.22);
    border-color: var(--dj-accent);
    color: var(--dj-accent2);
}

html[data-theme="light"] .dj-automix-repeat-btn--active {
    background: rgba(51, 102, 153, 0.15);
    border-color: #336699;
    color: #336699;
}

.dj-automix-item--repeat .dj-automix-num::after {
    content: '↻';
    margin-left: 2px;
    font-size: 0.65rem;
    color: var(--dj-accent2);
}

.dj-btn--small {
    padding: 6px 10px;
    font-size: 0.75rem;
}

.dj-automix-hint {
    margin: 4px 0 6px;
    font-size: 0.68rem;
    color: var(--dj-muted);
    flex-shrink: 0;
}

.dj-automix-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    background: var(--dj-surface2);
}

.dj-automix-empty {
    padding: 12px;
    font-size: 0.75rem;
    color: var(--dj-muted);
    text-align: center;
}

.dj-automix-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--dj-border);
    font-size: 0.78rem;
}

.dj-automix-item--active {
    background: rgba(0, 229, 199, 0.08);
    border-left: 3px solid var(--dj-accent2);
}

.dj-automix-num {
    font-weight: 700;
    color: var(--dj-muted);
    min-width: 1.2em;
    font-variant-numeric: tabular-nums;
}

.dj-automix-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-automix-actions {
    display: flex;
    gap: 2px;
}

.dj-automix-actions button {
    padding: 4px 6px;
    border: 1px solid var(--dj-border);
    border-radius: 5px;
    background: var(--dj-surface);
    color: var(--dj-muted);
    cursor: pointer;
    font-size: 0.68rem;
}

.dj-automix-actions button:hover:not(:disabled) {
    border-color: var(--dj-accent);
    color: var(--dj-text);
}

.dj-automix-actions button:disabled {
    opacity: 0.35;
    cursor: default;
}

.dj-sampler-bar {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    background: var(--dj-surface);
    border-top: 1px solid var(--dj-border);
    min-width: 0;
    flex-shrink: 0;
}

/* Tablet estrecho / ventana pequeña (no móvil landscape) */
@media (max-width: 1100px) and (not ((orientation: landscape) and (max-height: 520px))) {
    .dj-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
    .dj-library {
        grid-column: 1;
        grid-row: 1;
        max-height: min(36vh, 280px);
        border-right: none;
        border-bottom: 1px solid var(--dj-border);
    }
    .dj-decks { grid-column: 1; grid-row: 2; }
    .dj-automix { grid-column: 1; grid-row: 3; max-height: min(24vh, 180px); }
    .dj-sampler-bar { grid-column: 1; grid-row: 4; }
}

.dj-library {
    background: var(--dj-surface);
    border-right: 1px solid var(--dj-border);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.dj-library-panel {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    background: var(--dj-surface2);
    margin-bottom: 6px;
}

.dj-library-panel--folder {
    flex: 3 1 0;
}

.dj-library-panel--recent {
    flex: 1 1 0;
    max-height: 96px;
}

.dj-library-panel--session {
    flex: 1 1 0;
    max-height: 96px;
}

.dj-library-panel .dj-browser-list,
.dj-library-panel .dj-track-list {
    margin: 0;
    max-height: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

.dj-library-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dj-library-head h2 {
    margin: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dj-library-count {
    background: var(--dj-surface2);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--dj-muted);
}

.dj-library-hint {
    font-size: 0.72rem;
    color: var(--dj-muted);
    line-height: 1.35;
    margin: 0 0 6px;
    flex-shrink: 0;
}

.dj-btn--block {
    width: 100%;
    justify-content: center;
}

.dj-browser-toolbar {
    margin-bottom: 10px;
}

.dj-folder-path {
    font-size: 0.78rem;
    color: var(--dj-accent2);
    margin: 0 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-browser-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-bottom: 8px;
    min-height: 24px;
}

.dj-crumb-btn {
    border: none;
    background: var(--dj-surface2);
    color: var(--dj-text);
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-crumb-btn:hover { background: var(--dj-hover); color: var(--dj-accent2); }

.dj-crumb-sep {
    color: var(--dj-muted);
    font-size: 0.72rem;
}

.dj-browser-empty {
    font-size: 0.78rem;
    color: var(--dj-muted);
    margin: 0 0 8px;
    line-height: 1.4;
}

.dj-browser-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dj-browser-item {
    border-bottom: 1px solid var(--dj-border);
}

.dj-browser-item:last-child { border-bottom: none; }

.dj-browser-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    color: var(--dj-text);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
}

.dj-browser-row:hover { background: rgba(124, 77, 255, 0.08); }

.dj-browser-row--file {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    padding: 4px 6px 4px 0;
}

.dj-browser-file-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--dj-text);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.dj-browser-file-btn:hover { color: var(--dj-accent2); }

.dj-browser-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-browser-item--folder .dj-browser-name { font-weight: 600; }
.dj-browser-item--folder i.fa-folder { color: #ffb74d; }
.dj-browser-item--file { cursor: grab; }
.dj-browser-item--file:active { cursor: grabbing; }
.dj-browser-enter { margin-left: auto; color: var(--dj-muted); font-size: 0.7rem; }

.dj-browser-quick {
    display: flex;
    gap: 4px;
    padding-right: 6px;
}

.dj-browser-quick button {
    padding: 4px 7px;
    border: none;
    border-radius: 4px;
    background: var(--dj-surface);
    color: var(--dj-text);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.dj-browser-quick button:hover {
    background: var(--dj-accent);
    color: #fff;
}

.dj-library-queue-head {
    margin: 8px 0 8px;
    padding-top: 10px;
    border-top: 1px solid var(--dj-border);
}

.dj-library-queue-head {
    margin: 4px 0 2px;
    flex-shrink: 0;
}

.dj-library-queue-head h3 {
    margin: 0;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dj-muted);
}

.dj-recent-empty {
    padding: 6px 10px;
    font-size: 0.72rem;
    color: var(--dj-muted);
    list-style: none;
}

.dj-dropzone {
    border: 2px dashed var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 20px 12px;
    text-align: center;
    color: var(--dj-muted);
    font-size: 0.85rem;
    margin-bottom: 12px;
    transition: border-color 0.15s, background 0.15s;
}

.dj-dropzone i { display: block; font-size: 1.5rem; margin-bottom: 8px; }
.dj-dropzone--over { border-color: var(--dj-accent2); background: rgba(0, 229, 199, 0.06); }

.dj-track-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dj-track-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: grab;
    border: 1px solid transparent;
}

.dj-track-item:active { cursor: grabbing; }

.dj-track-item:hover { background: var(--dj-surface2); }
.dj-track-item--video .dj-track-icon { color: #ffb74d; }
.dj-track-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-track-bpm {
    font-size: 0.75rem;
    color: var(--dj-accent2);
    font-weight: 600;
}

.dj-track-actions {
    display: flex;
    gap: 4px;
}

.dj-track-actions button[data-action="mix"] {
    font-weight: 800;
    color: var(--dj-accent2);
}

.dj-track-actions button {
    padding: 4px 6px;
    border: none;
    border-radius: 4px;
    background: var(--dj-surface2);
    color: var(--dj-text);
    font-size: 0.7rem;
    cursor: pointer;
}

.dj-track-actions button:hover { background: var(--dj-accent); color: #fff; }

.dj-decks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dj-mix-wave-panel {
    flex-shrink: 0;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: 10px;
    padding: 6px 10px 8px;
}

.dj-mix-wave-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.7rem;
    min-width: 0;
}

.dj-mix-wave-tag {
    flex-shrink: 0;
    max-width: 28%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s;
}

.dj-mix-wave-tag:hover { opacity: 1; }

.dj-mix-wave-tag--a { color: #42a5f5; }
.dj-mix-wave-tag--b { color: #ef5350; text-align: right; }

.dj-mix-wave-tag--active {
    opacity: 1;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dj-mix-wave-hint {
    flex: 1;
    text-align: center;
    color: var(--dj-muted);
    font-size: 0.62rem;
    line-height: 1.2;
}

.dj-mix-waveform {
    width: 100%;
    height: 112px;
    display: block;
    border-radius: 6px;
    cursor: grab;
    touch-action: none;
    background: #12121c;
}

.dj-mix-waveform:active,
.dj-mix-waveform.dj-mix-waveform--dragging {
    cursor: grabbing;
}

.dj-decks-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
}

.dj-waveform--hidden {
    display: none !important;
}

.dj-deck--mix-focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.dj-deck {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dj-deck[data-deck="a"] { border-top: 3px solid var(--dj-deck-a); }
.dj-deck[data-deck="b"] { border-top: 3px solid var(--dj-deck-b); }

.dj-deck-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dj-deck-label {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.dj-master-btn {
    padding: 4px 10px;
    border: 1px solid var(--dj-border);
    border-radius: 6px;
    background: transparent;
    color: var(--dj-muted);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.04em;
}

.dj-master-btn--active {
    background: var(--dj-accent2);
    border-color: var(--dj-accent2);
    color: #0a0a12;
}

.dj-deck-track {
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 1.2em;
}

.dj-deck-empty { color: var(--dj-muted); font-weight: 400; }

.dj-video-preview {
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    max-height: 100px;
}

.dj-video-preview video {
    width: 100%;
    max-height: 100px;
    object-fit: contain;
    display: block;
}

.dj-waveform {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    background: var(--dj-waveform-bg);
    display: block;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
}

.dj-cue-time {
    color: #ffb020;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dj-cue-time.hidden { display: none; }

.dj-deck-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    font-size: 0.82rem;
}

.dj-bpm {
    color: var(--dj-accent2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dj-time { color: var(--dj-muted); font-variant-numeric: tabular-nums; }

.dj-seek {
    width: 100%;
    accent-color: var(--dj-accent);
}

.dj-cue-btn, .dj-sync-btn, .dj-beatloop-btn, .dj-precue-btn, .dj-reset-sync-btn {
    padding: 10px 16px;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: var(--dj-surface2);
    color: var(--dj-text);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.dj-cue-btn:hover, .dj-sync-btn:hover, .dj-beatloop-btn:hover, .dj-precue-btn:hover, .dj-reset-sync-btn:hover { border-color: var(--dj-accent); }

.dj-beatloop-btn {
    min-width: 42px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dj-beatloop-btn--active {
    background: rgba(99, 102, 241, 0.25);
    border-color: var(--dj-accent);
    color: var(--dj-accent);
}

.dj-radio-tab--add {
    min-width: 32px;
    padding: 4px 8px !important;
    opacity: 0.85;
}

.dj-radio-tab--add:hover {
    opacity: 1;
    background: rgba(99, 102, 241, 0.15);
}
.dj-sync-btn { color: var(--dj-accent2); }

.dj-reset-sync-btn {
    padding: 10px 12px;
    min-width: 40px;
    color: var(--dj-muted);
    font-size: 1rem;
    line-height: 1;
}

.dj-precue-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dj-muted);
}

.dj-precue-btn--active {
    background: rgba(0, 229, 199, 0.15);
    border-color: var(--dj-accent2);
    color: var(--dj-accent2);
    box-shadow: 0 0 12px rgba(0, 229, 199, 0.2);
}

.dj-deck-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.dj-cue-panel {
    width: 100%;
    padding: 12px;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    text-align: center;
}

.dj-cue-panel-label {
    display: block;
    font-size: 0.78rem;
    color: var(--dj-muted);
    margin-bottom: 8px;
}

.dj-cue-deck-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

.dj-precue-btn--mixer {
    min-width: 44px;
    padding: 10px 14px;
}

.dj-cue-vol-label {
    display: block;
    font-size: 0.72rem;
    color: var(--dj-muted);
    margin-bottom: 4px;
}

.dj-cue-panel input[type="range"] {
    width: 100%;
    accent-color: var(--dj-accent2);
}

.dj-settings-modal {
    max-width: 480px;
    width: 100%;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overflow-x: visible;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.dj-modal:has(.dj-settings-modal) {
    align-items: flex-start;
    overflow: visible;
    padding-top: 20px;
    padding-bottom: 20px;
}

.dj-settings-field select {
    position: relative;
    z-index: 2;
    cursor: pointer;
    pointer-events: auto;
}

.dj-settings-note {
    font-size: 0.85rem;
    color: var(--dj-muted);
    line-height: 1.5;
    margin: 0 0 16px;
}

.dj-settings-field {
    margin-bottom: 16px;
}

.dj-settings-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.dj-settings-field select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--dj-border);
    background: var(--dj-surface2);
    color: var(--dj-text);
    font-size: 0.9rem;
}

.dj-settings-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dj-settings-range-row input { flex: 1; accent-color: var(--dj-accent2); }

.dj-settings-status {
    font-size: 0.82rem;
    color: var(--dj-accent2);
    margin: 12px 0;
}

.dj-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.dj-play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--dj-accent), #5e35b1);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(124, 77, 255, 0.35);
    flex-shrink: 0;
}

.dj-play-btn .fa-play,
.dj-play-btn .fa-pause {
    font-size: 1.15rem;
    line-height: 1;
    pointer-events: none;
}

.dj-play-btn .fa-play {
    margin-left: 2px;
}

.dj-play-btn .fa-pause {
    display: none;
}

.dj-play-btn--playing .fa-play {
    display: none;
}

.dj-play-btn--playing .fa-pause {
    display: inline-block;
}

.dj-play-btn:hover { transform: scale(1.04); }
.dj-play-btn--playing { background: linear-gradient(135deg, var(--dj-accent2), #00bfa5); }

.dj-pitch-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--dj-muted);
    flex-shrink: 0;
}

.dj-volume-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--dj-muted);
    flex-shrink: 0;
}

.dj-volume-row--vu-end {
    grid-template-columns: auto 1fr auto;
}

.dj-volume-row--vu-start {
    grid-template-columns: auto auto 1fr;
}

.dj-keylock-btn {
    padding: 4px 10px;
    border: 1px solid var(--dj-border);
    border-radius: 6px;
    background: var(--dj-surface2);
    color: var(--dj-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.dj-keylock-btn:hover { border-color: var(--dj-accent); color: var(--dj-text); }

.dj-keylock-btn--active {
    border-color: var(--dj-accent2);
    background: rgba(0, 229, 199, 0.12);
    color: var(--dj-accent2);
}

.dj-vu {
    width: 28px;
    height: 56px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45);
}

.dj-autocfade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    background: var(--dj-surface);
    color: var(--dj-muted);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.dj-autocfade-btn--active {
    border-color: var(--dj-accent2);
    background: rgba(0, 229, 199, 0.1);
    color: var(--dj-accent2);
}

.dj-autocfade-btn:hover {
    border-color: var(--dj-accent);
    color: var(--dj-text);
}

.dj-crossfade-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.dj-fade-btn {
    padding: 8px 10px;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: var(--dj-surface);
    color: var(--dj-text);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.dj-fade-btn:hover {
    border-color: var(--dj-accent2);
    color: var(--dj-accent2);
}

.dj-pitch, .dj-volume, .dj-eq {
    width: 100%;
    accent-color: var(--dj-accent2);
}

.dj-pitch-val {
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: right;
    color: var(--dj-text);
}

.dj-eq-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
}

.dj-eq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: 118px;
    margin-bottom: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--dj-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dj-eq-reset-btn {
    padding: 2px 6px;
    border: 1px solid var(--dj-border);
    border-radius: 5px;
    background: var(--dj-surface2);
    color: var(--dj-muted);
    font-size: 0.58rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
    transition: border-color 0.15s, color 0.15s;
}

.dj-eq-reset-btn:hover {
    border-color: var(--dj-accent);
    color: var(--dj-text);
}

.dj-eq-row {
    display: grid;
    grid-template-columns: repeat(3, 32px);
    gap: 8px;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.dj-eq-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32px;
    font-size: 0.62rem;
    color: var(--dj-muted);
}

.dj-eq-knob label {
    display: block;
    margin-bottom: 3px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.dj-eq-slider-wrap {
    width: 32px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.dj-eq-knob input,
.dj-eq-slider-wrap .dj-eq {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 56px;
    margin: 0;
    padding: 0;
    writing-mode: vertical-lr;
    direction: rtl;
    accent-color: var(--dj-accent2);
}

.dj-mixer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 6px;
    min-width: 0;
    width: min(120px, 18vw);
    flex-shrink: 0;
    overflow: hidden;
}

.dj-crossfader-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
}

.dj-crossfader-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 1px;
}

.dj-crossfader-deck {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
}

.dj-crossfader-deck--a { color: var(--dj-deck-a); }
.dj-crossfader-deck--b { color: var(--dj-deck-b); }

.dj-crossfader-rail {
    position: relative;
    width: 100%;
}

.dj-crossfader-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 16px;
    background: var(--dj-muted);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
    transition: background 0.12s, opacity 0.12s, box-shadow 0.12s;
}

.dj-crossfader-center::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -3px;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dj-border);
    border: 1px solid var(--dj-muted);
}

.dj-crossfader-wrap--centered .dj-crossfader-center {
    background: var(--dj-accent2);
    opacity: 1;
    box-shadow: 0 0 6px rgba(0, 229, 199, 0.55);
}

.dj-crossfader-wrap--centered .dj-crossfader-center::before {
    background: var(--dj-accent2);
    border-color: var(--dj-accent2);
}

.dj-crossfader {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    accent-color: var(--dj-accent);
    background: transparent;
}

.dj-master-vol {
    width: 100%;
    text-align: center;
    font-size: 0.78rem;
    color: var(--dj-muted);
}

.dj-master-vol input { width: 100%; margin-top: 6px; accent-color: var(--dj-accent); }

.dj-master-bpm {
    text-align: center;
    padding: 12px;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    font-size: 0.78rem;
    color: var(--dj-muted);
}

.dj-master-bpm strong {
    display: block;
    font-size: 1.6rem;
    color: var(--dj-accent2);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.dj-master-bpm--tap {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.dj-master-bpm--tap:hover {
    border-color: var(--dj-accent2);
    background: rgba(0, 229, 199, 0.06);
}

.dj-swap-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    background: var(--dj-surface);
    color: var(--dj-text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.dj-swap-btn:hover {
    border-color: var(--dj-accent);
    color: var(--dj-accent2);
}

.dj-recent-list {
    margin-bottom: 0;
}

.dj-build-tag {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--dj-muted);
    opacity: 0.85;
    flex-shrink: 0;
}

.dj-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: var(--dj-surface);
    border-top: 1px solid var(--dj-border);
    font-size: 0.72rem;
    color: var(--dj-muted);
    flex-shrink: 0;
}

.dj-footer #statusBar {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dj-surface2);
    border: 1px solid var(--dj-border);
    padding: 12px 20px;
    border-radius: var(--dj-radius);
    font-size: 0.88rem;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    max-width: min(92vw, 480px);
    text-align: center;
}

.dj-sw-update-btn {
    margin-left: 8px;
    padding: 4px 12px;
    border: 1px solid var(--dj-accent);
    border-radius: 6px;
    background: var(--dj-accent);
    color: #fff;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

.dj-sw-update-btn:hover {
    filter: brightness(1.1);
}

.dj-modal {
    position: fixed;
    inset: 0;
    background: var(--dj-modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    pointer-events: auto;
}

.dj-modal:not(.hidden) {
    display: flex !important;
}

.dj-modal-content {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 100%;
}

.dj-modal-content header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dj-modal-content h3 { margin: 0; font-size: 1rem; }

.dj-modal-close {
    background: none;
    border: none;
    color: var(--dj-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

.dj-confirm-modal {
    max-width: 420px;
}

.dj-confirm-message {
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--dj-text);
}

.dj-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.dj-shortcuts {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    font-size: 0.88rem;
    margin: 0;
}

.dj-shortcuts dt { color: var(--dj-muted); margin: 0; }
.dj-shortcuts dd { margin: 0; font-weight: 600; text-align: right; }

.dj-install-intro {
    margin: 0 0 1rem;
    color: var(--dj-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.dj-install-browser-hint {
    margin: 0 0 1rem;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--dj-surface2);
    border: 1px solid var(--dj-accent);
    color: var(--dj-text);
    font-size: 0.88rem;
    line-height: 1.45;
}

.dj-install-browser-hint.hidden {
    display: none !important;
}

.dj-install-steps h4 {
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
    color: var(--dj-text);
}

.dj-install-steps h4:not(:first-child) {
    margin-top: 1rem;
}

.dj-install-steps ol {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--dj-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.dj-install-steps li + li { margin-top: 0.35rem; }

.dj-loading {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 18, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.dj-loading.hidden {
    display: none !important;
    pointer-events: none;
}

.dj-stream-modal {
    max-width: 480px;
}

.dj-stream-intro {
    margin: 0 0 14px;
    font-size: 0.82rem;
    color: var(--dj-muted);
    line-height: 1.4;
}

.dj-stream-modal input[type="url"],
.dj-stream-modal input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--dj-border);
    border-radius: 6px;
    background: var(--dj-surface2);
    color: var(--dj-text);
    font: inherit;
}

.dj-track-item--stream .dj-track-bpm {
    color: #42a5f5;
    font-weight: 600;
    font-size: 0.72rem;
}

.dj-radio-folder-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.74rem;
    border-bottom: 1px solid var(--dj-border);
    background: var(--dj-surface2);
}

.dj-radio-folder-path {
    margin: 0;
    padding: 3px 10px;
    font-size: 0.72rem;
    color: var(--dj-muted);
    border-bottom: 1px solid var(--dj-border);
}

.dj-radio-row--folder {
    cursor: pointer;
    font-weight: 600;
}

.dj-radio-row--folder:hover td {
    background: var(--dj-hover);
}

.dj-radio-enter-btn,
.dj-radio-playnow-btn {
    margin-left: 4px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--dj-border);
    border-radius: 3px;
    background: var(--dj-surface2);
    color: var(--dj-text);
    cursor: pointer;
    font-size: 0.68rem;
    line-height: 1;
}

.dj-radio-playnow-btn {
    color: #66bb6a;
}

.dj-radio-log-actions {
    display: flex;
    gap: 2px;
    white-space: nowrap;
}

.dj-radio-log-btn {
    width: 22px;
    height: 22px;
    border: 1px solid var(--dj-border);
    border-radius: 3px;
    background: var(--dj-surface2);
    color: var(--dj-muted);
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0;
}

.dj-radio-log-btn:hover:not(:disabled) {
    color: var(--dj-text);
    border-color: var(--dj-accent);
}

.dj-radio-log-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dj-radio-cart-btn--hidden-bank {
    display: none !important;
}

.dj-radio-cart-assign {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.55rem;
    opacity: 0.6;
    cursor: pointer;
}

.dj-radio-cart-btn {
    position: relative;
}

.dj-radio-cart-assign:hover {
    opacity: 1;
    color: var(--dj-accent2);
}

.dj-radio-library.dj-drop--over,
.dj-radio-log.dj-drop--over {
    outline: 2px dashed var(--dj-accent2);
    outline-offset: -2px;
}

.dj-loading-box {
    text-align: center;
    padding: 32px;
}

.dj-loading-box i {
    font-size: 2rem;
    color: var(--dj-accent2);
    margin-bottom: 12px;
}

.hidden { display: none !important; }

.dj-sampler-hint { font-size: 0.78rem; color: var(--dj-muted); }

.dj-sampler-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--dj-muted);
}

.dj-sampler-controls input[type="range"] {
    width: 100px;
    accent-color: var(--dj-accent2);
}

.dj-btn--small { padding: 6px 12px; font-size: 0.78rem; }

.dj-pad-bank {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--dj-border);
    flex-shrink: 0;
}

.dj-pad-bank-head {
    font-size: 0.65rem;
    color: var(--dj-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dj-pads {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.dj-pad {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 3px 2px;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: var(--dj-surface2);
    color: var(--dj-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}

.dj-pad:hover { border-color: var(--dj-accent); }
.dj-pad:active { transform: scale(0.96); }
.dj-pad--loaded { border-color: #5c6bc0; background: rgba(92, 107, 192, 0.12); }
.dj-pad--playing {
    border-color: var(--dj-accent2);
    background: rgba(0, 229, 199, 0.18);
    box-shadow: 0 0 10px rgba(0, 229, 199, 0.25);
}

.dj-pad-label { font-size: 0.7rem; font-weight: 700; color: var(--dj-muted); }
.dj-pad-sub {
    font-size: 0.62rem;
    color: var(--dj-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.dj-pad--loaded .dj-pad-sub { color: var(--dj-text); }

.dj-pad-assign {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 0.6rem;
    color: var(--dj-muted);
    padding: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.dj-pad:hover .dj-pad-assign { opacity: 1; }

.dj-pad-badges {
    position: absolute;
    bottom: 2px;
    left: 3px;
    font-size: 0.5rem;
    color: var(--dj-accent2);
    line-height: 1;
    pointer-events: none;
}

.dj-pad--loop {
    box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.45);
}

.dj-pad-menu {
    position: fixed;
    z-index: 10050;
    min-width: 220px;
    max-width: 280px;
    padding: 8px;
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    background: var(--dj-surface);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.dj-pad-menu-head {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--dj-muted);
    padding: 4px 8px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dj-pad-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--dj-text);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.dj-pad-menu-item:hover:not(:disabled) {
    background: var(--dj-hover);
}

.dj-pad-menu-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.dj-pad-menu-item--danger:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.15);
    color: #ef5350;
}

.dj-pad-menu-item i {
    width: 1em;
    color: var(--dj-muted);
}

.dj-pad-menu-vol {
    padding: 6px 10px 8px;
}

.dj-pad-menu-vol label {
    display: block;
    font-size: 0.78rem;
    color: var(--dj-muted);
    margin-bottom: 6px;
}

.dj-pad-menu-vol input[type="range"] {
    width: 100%;
    accent-color: var(--dj-accent2);
}

.dj-pad-menu-sep {
    border: none;
    border-top: 1px solid var(--dj-border);
    margin: 6px 0;
}

.dj-normalize-badge {
    font-size: 0.68rem;
    color: #81c784;
    background: rgba(129, 199, 132, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.dj-settings-check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.4;
}
.dj-settings-check input { margin-top: 3px; accent-color: var(--dj-accent2); }

.dj-settings-section {
    margin: 16px 0 8px;
    font-size: 0.9rem;
    color: var(--dj-accent2);
    border-bottom: 1px solid var(--dj-border);
    padding-bottom: 6px;
}

.dj-drop-target.dj-drop--over {
    outline: 2px dashed var(--dj-accent2);
    outline-offset: 2px;
    background: rgba(0, 229, 199, 0.06);
}

.dj-mic-panel {
    width: 100%;
    padding: 12px;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    text-align: center;
}

.dj-mic-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: var(--dj-surface2);
    color: var(--dj-muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

.dj-mic-btn--on {
    background: rgba(244, 67, 54, 0.15);
    border-color: #ef5350;
    color: #ff8a80;
}

.dj-mic-vol-label {
    display: block;
    font-size: 0.72rem;
    color: var(--dj-muted);
    margin-bottom: 4px;
}

.dj-mic-panel input[type="range"] {
    width: 100%;
    accent-color: #ef5350;
}

.dj-analyzing { opacity: 0.6; pointer-events: none; }

/* ============================================================
   MÓVIL — scroll y contenedor flexible
   ============================================================ */
@media (max-width: 900px) {
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100dvh;
        -webkit-overflow-scrolling: touch;
    }

    .dj-app {
        height: auto;
        min-height: 100dvh;
        max-height: none;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .dj-main {
        overflow: visible;
        flex: 1 0 auto;
    }
}

/* ============================================================
   MÓVIL — Portrait: apilado ordenado (A → mixer → B)
   ============================================================ */
@media (max-width: 900px) and (orientation: portrait) {
    .dj-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .dj-logo { height: 46px; max-width: 168px; width: auto; }
    .dj-logo-wrap { padding: 3px; border-radius: 14px; }

    .dj-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .dj-header-actions .dj-btn {
        padding: 8px 10px;
        font-size: 0.78rem;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    .dj-header-actions .dj-file-btn {
        flex: 1 1 100%;
    }

    .dj-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    .dj-library {
        grid-column: 1;
        grid-row: 1;
        max-height: min(28vh, 220px);
        padding: 10px;
    }

    .dj-browser-list {
        max-height: min(20vh, 140px);
    }

    .dj-decks {
        display: grid;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr;
        grid-template-areas:
            "mixWave"
            "deckA"
            "mixer"
            "deckB";
        padding: 8px;
        gap: 8px;
        overflow: visible;
        min-height: 0;
    }

    .dj-mix-wave-panel { grid-area: mixWave; }
    .dj-decks-row { display: contents; }
    .dj-deck[data-deck="a"] { grid-area: deckA; min-width: 0; }
    .dj-deck[data-deck="b"] { grid-area: deckB; min-width: 0; }

    .dj-mixer {
        grid-area: mixer;
        order: unset;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
        padding: 10px;
        background: var(--dj-surface);
        border: 1px solid var(--dj-border);
        border-radius: var(--dj-radius);
    }

    .dj-crossfader-wrap,
    .dj-crossfade-actions,
    .dj-autocfade-btn,
    .dj-swap-btn {
        grid-column: 1 / -1;
    }

    .dj-crossfader-wrap,
    .dj-master-vol,
    .dj-cue-panel,
    .dj-mic-panel,
    .dj-master-bpm {
        flex: unset;
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .dj-swap-btn {
        width: 100%;
        margin: 0;
    }

    .dj-deck {
        padding: 10px;
        gap: 8px;
        overflow: visible;
    }

    .dj-deck-controls {
        gap: 6px;
    }

    .dj-cue-btn, .dj-sync-btn, .dj-beatloop-btn, .dj-precue-btn, .dj-reset-sync-btn {
        padding: 8px 10px;
        font-size: 0.72rem;
    }

    .dj-play-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .dj-eq-head {
        max-width: 160px;
    }

    .dj-eq-row {
        grid-template-columns: repeat(3, 48px);
        gap: 6px;
    }

    .dj-eq-knob {
        width: 48px;
    }

    .dj-eq-slider-wrap {
        width: 48px;
        height: auto;
    }

    .dj-eq-knob input,
    .dj-eq-slider-wrap .dj-eq {
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        writing-mode: horizontal-tb;
        direction: ltr;
        height: auto;
    }

    .dj-pitch-row {
        grid-template-columns: 72px 1fr 44px;
        gap: 6px;
    }

    .dj-volume-row--vu-end {
        grid-template-columns: 72px 1fr auto;
        gap: 6px;
    }

    .dj-volume-row--vu-start {
        grid-template-columns: 72px auto 1fr;
        gap: 6px;
    }

    .dj-pitch-val { min-width: 40px; font-size: 0.72rem; }

    .dj-automix {
        grid-column: 1;
        grid-row: 3;
        max-height: min(22vh, 160px);
    }

    .dj-sampler-bar {
        grid-column: 1;
        grid-row: 4;
        flex-direction: column;
        align-items: stretch;
        padding: 8px 10px;
        gap: 8px;
    }

    .dj-sampler-hint {
        font-size: 0.72rem;
        text-align: center;
    }

    .dj-sampler-controls {
        width: 100%;
        justify-content: space-between;
    }

    .dj-sampler-controls input[type="range"] {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .dj-footer {
        padding: 8px 10px;
        font-size: 0.72rem;
    }

    .dj-modal-content {
        max-height: 90dvh;
        overflow-y: auto;
    }
}

/* ============================================================
   MÓVIL — Landscape: layout tipo PC (sidebar + 2 decks + mixer)
   ============================================================ */
@media (orientation: landscape) and (max-height: 520px) {
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100dvh;
        -webkit-overflow-scrolling: touch;
    }

    .dj-app {
        height: auto;
        min-height: 100dvh;
        max-height: none;
        overflow: visible;
    }

    .dj-header {
        padding: 6px 12px;
        gap: 8px;
    }

    .dj-logo { height: 40px; max-width: 148px; width: auto; }

    .dj-header-actions .dj-btn {
        padding: 6px 10px;
        font-size: 0.72rem;
    }

    .dj-header-actions .dj-btn .fa-keyboard { display: none; }
    .dj-header-actions .dj-btn#btnHelp {
        padding: 6px 8px;
    }

    .dj-main {
        grid-template-columns: minmax(160px, 22vw) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        overflow: visible;
        min-height: 0;
    }

    .dj-library {
        grid-column: 1;
        grid-row: 1 / span 3;
        max-height: none;
        padding: 8px;
        border-right: 1px solid var(--dj-border);
        border-bottom: none;
    }

    .dj-library-head h2 { font-size: 0.82rem; }
    .dj-browser-list { max-height: none; flex: 1; }
    .dj-library-queue-head { display: none; }
    .dj-track-list { max-height: 80px; overflow-y: auto; }

    .dj-decks {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        padding: 6px 8px;
        gap: 6px;
        overflow: visible;
        align-items: start;
        min-height: min-content;
    }

    .dj-deck {
        padding: 6px;
        gap: 4px;
        font-size: 0.85rem;
        overflow: visible;
    }

    .dj-mixer {
        order: unset;
        width: min(100px, 14vw);
        gap: 8px;
        padding: 4px;
        align-self: start;
        position: sticky;
        top: 0;
    }

    .dj-master-bpm strong { font-size: 1.1rem; }
    .dj-master-bpm { padding: 6px; font-size: 0.68rem; }
    .dj-cue-panel, .dj-mic-panel { padding: 6px; }
    .dj-cue-panel-label, .dj-mic-vol-label { font-size: 0.65rem; margin-bottom: 4px; }

    .dj-deck-label { font-size: 0.85rem; }
    .dj-waveform { height: 36px; }
    .dj-video-preview, .dj-video-preview video { max-height: 48px; }

    .dj-deck-meta { font-size: 0.68rem; gap: 4px; }
    .dj-normalize-badge { display: none; }

    .dj-deck-controls { gap: 4px; }
    .dj-cue-btn, .dj-sync-btn, .dj-beatloop-btn, .dj-precue-btn, .dj-reset-sync-btn {
        padding: 4px 6px;
        font-size: 0.62rem;
    }
    .dj-precue-btn .fa-headphones + span,
    .dj-precue-btn { font-size: 0.62rem; }

    .dj-play-btn {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .dj-pitch-row {
        grid-template-columns: 52px 1fr 36px;
        font-size: 0.65rem;
        gap: 4px;
    }

    .dj-volume-row--vu-end {
        grid-template-columns: 52px 1fr auto;
        font-size: 0.65rem;
        gap: 4px;
    }

    .dj-volume-row--vu-start {
        grid-template-columns: 52px auto 1fr;
        font-size: 0.65rem;
        gap: 4px;
    }

    .dj-eq-row { gap: 4px; grid-template-columns: repeat(3, 28px); }
    .dj-eq-knob { width: 28px; font-size: 0.62rem; }
    .dj-eq-slider-wrap { width: 28px; height: 40px; }
    .dj-eq-knob input,
    .dj-eq-slider-wrap .dj-eq { width: 28px; min-width: 28px; max-width: 28px; height: 40px; }

    .dj-pad-bank-head { margin-bottom: 4px; }
    .dj-pads { gap: 4px; }
    .dj-pad { min-height: 36px; padding: 4px 2px; }
    .dj-pad-sub { font-size: 0.55rem; }

    .dj-automix {
        grid-column: 2;
        grid-row: 2;
        max-height: min(22vh, 140px);
        padding: 4px 8px;
    }

    .dj-automix-title h2 { font-size: 0.75rem; }
    .dj-automix-hint { display: none; }

    .dj-sampler-bar {
        grid-column: 2;
        grid-row: 3;
        padding: 4px 8px;
        gap: 6px;
    }

    .dj-sampler-hint { font-size: 0.65rem; }
    .dj-sampler-controls { font-size: 0.65rem; }
    .dj-sampler-controls input[type="range"] { width: 72px; }

    .dj-footer { display: none; }
}

/* Landscape en tablets / pantallas más altas */
@media (orientation: landscape) and (min-height: 521px) and (max-width: 1200px) {
    .dj-main {
        grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    }

    .dj-library {
        max-height: none;
        grid-row: 1 / span 2;
        border-right: 1px solid var(--dj-border);
    }

    .dj-decks {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .dj-mixer { order: unset; }
}

/* —— Selector de modo DJ / Radio —— */
.dj-mode-switch {
    display: flex;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.dj-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    background: var(--dj-surface2);
    color: var(--dj-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dj-mode-btn:hover {
    background: var(--dj-hover);
    color: var(--dj-text);
}

.dj-mode-btn--active {
    background: var(--dj-accent);
    color: #fff;
}

html[data-theme="light"] .dj-mode-btn--active {
    background: var(--pd-azul);
}

/* —— Vista Radio (layout 2×2) —— */
.dj-view-dj:not(.hidden) {
    display: contents;
}

.dj-view-radio:not(.hidden) {
    display: contents;
}

.dj-view.hidden {
    display: none !important;
}

.dj-app--radio .dj-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    background: var(--dj-border);
    min-height: 0;
}

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

.dj-radio-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--dj-surface2);
    border-bottom: 1px solid var(--dj-border);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.dj-radio-tab {
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.dj-radio-transport {
    display: flex;
    gap: 4px;
}

.dj-radio-tbtn {
    width: 36px;
    height: 32px;
    border: 1px solid var(--dj-border);
    border-radius: 4px;
    background: linear-gradient(180deg, #3a3a50 0%, #2a2a3a 100%);
    color: var(--dj-text);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-theme="light"] .dj-radio-tbtn {
    background: linear-gradient(180deg, #dce8f4 0%, #c8d9ea 100%);
}

.dj-radio-tbtn:hover {
    border-color: var(--dj-accent);
}

.dj-radio-tbtn--play { color: #66bb6a; }
.dj-radio-tbtn--stop { color: #ef5350; }
.dj-radio-tbtn--skip { color: #42a5f5; }

.dj-radio-timing {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    text-align: right;
    font-size: 0.78rem;
    color: var(--dj-muted);
}

.dj-radio-next-break strong {
    color: var(--dj-text);
}

.dj-radio-clock {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.35rem;
    font-weight: 700;
    color: #42a5f5;
    letter-spacing: 0.05em;
}

html[data-theme="light"] .dj-radio-clock {
    color: var(--pd-azul);
}

.dj-radio-log-controls {
    display: flex;
    gap: 4px;
}

.dj-radio-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.dj-radio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.dj-radio-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--dj-surface2);
}

.dj-radio-table th {
    padding: 5px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--dj-muted);
    border-bottom: 1px solid var(--dj-border);
    white-space: nowrap;
}

.dj-radio-table td {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(42, 42, 61, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.dj-radio-title-cell {
    max-width: 220px;
}

.dj-radio-row--onair td {
    background: #c62828 !important;
    color: #fff !important;
    font-weight: 600;
}

.dj-radio-row--onair-live td {
    background: #b71c1c !important;
    color: #fff !important;
    font-weight: 600;
}

.dj-radio-row--onair-live .dj-radio-remaining {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.dj-radio-onair-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.dj-radio-title-cell--onair {
    font-weight: 700;
}

.dj-radio-dur-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dj-radio-row--next td {
    background: rgba(198, 40, 40, 0.35) !important;
    color: var(--dj-text) !important;
    font-weight: 600;
}

.dj-radio-row--dragging td {
    opacity: 0.45;
}

.dj-radio-row--drop-before td {
    box-shadow: inset 0 3px 0 var(--dj-accent);
}

.dj-radio-row--empty td {
    text-align: center;
    color: var(--dj-muted);
    padding: 24px 8px;
    font-style: italic;
}

.dj-radio-row--lib {
    cursor: pointer;
}

.dj-radio-row--lib:hover td {
    background: var(--dj-hover);
}

.dj-radio-log-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 5px 10px;
    font-size: 0.75rem;
    color: var(--dj-muted);
    border-top: 1px solid var(--dj-border);
    background: var(--dj-surface2);
    flex-shrink: 0;
}

.dj-radio-onair {
    margin-left: auto;
    font-weight: 600;
}

.dj-radio-onair--live {
    color: #ef5350;
}

html[data-theme="light"] .dj-radio-onair--live {
    color: var(--pd-rojo);
}

/* Biblioteca radio */
.dj-radio-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.dj-radio-tab {
    padding: 4px 10px;
    border: 1px solid var(--dj-border);
    border-radius: 3px;
    background: var(--dj-surface);
    color: var(--dj-muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
}

.dj-radio-tab:hover {
    background: var(--dj-hover);
    color: var(--dj-text);
}

.dj-radio-tab--active {
    background: #1565c0;
    border-color: #1565c0;
    color: #fff;
}

html[data-theme="light"] .dj-radio-tab--active {
    background: var(--pd-azul);
    border-color: var(--pd-azul);
}

.dj-radio-lib-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.dj-radio-search {
    padding: 4px 8px;
    border: 1px solid var(--dj-border);
    border-radius: 4px;
    background: var(--dj-surface);
    color: var(--dj-text);
    font: inherit;
    font-size: 0.78rem;
    width: min(160px, 100%);
}

.dj-radio-lib-hint {
    margin: 0;
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--dj-muted);
    border-top: 1px solid var(--dj-border);
    flex-shrink: 0;
}

.dj-radio-add-btn {
    margin-left: 6px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--dj-border);
    border-radius: 3px;
    background: var(--dj-surface2);
    color: var(--dj-accent2);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}

.dj-radio-add-btn:hover {
    background: var(--dj-accent);
    color: #fff;
}

/* Botonera / cartwall */
.dj-radio-cart-bank {
    padding: 4px 8px;
    border: 1px solid var(--dj-border);
    border-radius: 4px;
    background: var(--dj-surface);
    color: var(--dj-text);
    font: inherit;
    font-size: 0.78rem;
}

.dj-radio-cart-options {
    display: flex;
    gap: 10px;
    font-size: 0.74rem;
    color: var(--dj-muted);
}

.dj-radio-cart-options label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.dj-radio-cart-body {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 8px;
    gap: 8px;
}

.dj-radio-cart-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-height: 0;
}

.dj-radio-mic-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.dj-radio-mic-btn {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 84px;
    min-height: 108px;
    padding: 10px 8px;
    border: 2px solid var(--dj-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #3d3d55 0%, #2a2a3d 100%);
    color: var(--dj-text);
    cursor: pointer;
    font: inherit;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.12s;
    --mic-level: 0;
}

.dj-radio-mic-vu-fill {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: calc(var(--mic-level) * 100%);
    max-height: calc(100% - 12px);
    border-radius: 8px;
    background: linear-gradient(to top, #2e7d32 0%, #66bb6a 55%, #fdd835 82%, #e53935 100%);
    opacity: calc(0.25 + var(--mic-level) * 0.55);
    pointer-events: none;
    z-index: 0;
    transition: height 0.08s linear, opacity 0.08s linear;
}

.dj-radio-mic-btn > i,
.dj-radio-mic-btn > .dj-radio-mic-label,
.dj-radio-mic-btn > .dj-radio-mic-state {
    position: relative;
    z-index: 1;
}

.dj-radio-mic-btn--vu-hot {
    box-shadow: 0 0 12px rgba(229, 83, 80, 0.45);
}

.dj-radio-mic-btn i {
    font-size: 1.75rem;
    line-height: 1;
}

.dj-radio-mic-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dj-muted);
}

.dj-radio-mic-state {
    font-size: 0.82rem;
    font-weight: 700;
}

.dj-radio-mic-btn:hover {
    border-color: var(--dj-accent);
    transform: scale(1.02);
}

.dj-radio-mic-btn--on {
    background: linear-gradient(180deg, #c62828 0%, #8e0000 100%) !important;
    border-color: #ef5350 !important;
    color: #fff;
    box-shadow: 0 0 16px rgba(229, 83, 80, 0.35);
}

.dj-radio-mic-btn--on .dj-radio-mic-label {
    color: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .dj-radio-mic-btn {
    background: linear-gradient(180deg, #e8eef5 0%, #d4dce8 100%);
}

.dj-radio-search--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dj-radio-cart-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--dj-border);
    border-radius: 4px;
    background: linear-gradient(180deg, #3d3d55 0%, #2d2d40 100%);
    color: var(--dj-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    text-align: center;
    min-height: 52px;
    overflow: hidden;
}

html[data-theme="light"] .dj-radio-cart-btn {
    background: linear-gradient(180deg, #e0eaf4 0%, #d0dce8 100%);
}

.dj-radio-cart-btn:hover:not(:disabled) {
    border-color: var(--dj-accent);
}

.dj-radio-cart-btn--loaded {
    border-color: #5c6bc0;
}

.dj-radio-cart-btn--playing {
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%) !important;
    color: #fff;
    border-color: #66bb6a;
}

.dj-radio-cart-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dj-radio-cart-artist {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-radio-cart-title {
    color: var(--dj-muted);
    font-size: 0.62rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-radio-cart-btn--playing .dj-radio-cart-title {
    color: rgba(255, 255, 255, 0.85);
}

.dj-radio-meters {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.dj-radio-vu {
    border: 1px solid var(--dj-border);
    border-radius: 2px;
    background: #111;
}

/* Comandos */
.dj-radio-cmd-pane {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px 10px;
}

.dj-radio-cmd-hint {
    margin: 0 0 8px;
    font-size: 0.72rem;
    color: var(--dj-muted);
    line-height: 1.35;
}

.dj-radio-cmd-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(42, 42, 61, 0.4);
    font-size: 0.78rem;
}

.dj-radio-cmd-row--draggable {
    cursor: grab;
    border-radius: 4px;
    padding-left: 4px;
    padding-right: 4px;
}

.dj-radio-cmd-row--draggable:hover {
    background: rgba(99, 102, 241, 0.08);
}

.dj-radio-cmd-row--draggable:active {
    cursor: grabbing;
}

.dj-radio-row--cmd {
    background: rgba(251, 191, 36, 0.08);
}

.dj-radio-row--cmd.dj-radio-row--onair {
    background: rgba(251, 191, 36, 0.2);
}

.dj-radio-cmd-cell {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: #fbbf24;
}

.dj-radio-cmd-drag {
    width: 18px;
    color: var(--dj-muted);
    text-align: center;
    cursor: grab;
    opacity: 0.65;
    flex-shrink: 0;
}

.dj-radio-cmd-drag:active {
    cursor: grabbing;
}

.dj-radio-cmd-row--draggable .dj-radio-cmd-drag {
    opacity: 1;
    color: #a5b4fc;
}

.dj-radio-cmd-icon {
    width: 24px;
    color: var(--dj-muted);
    text-align: center;
}

.dj-radio-cmd-label {
    font-weight: 700;
    min-width: 100px;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.dj-radio-cmd-time,
.dj-radio-cmd-num {
    padding: 3px 6px;
    border: 1px solid var(--dj-border);
    border-radius: 3px;
    background: var(--dj-surface);
    color: var(--dj-text);
    font: inherit;
    font-size: 0.78rem;
}

.dj-radio-mixer-row--audio {
    margin-bottom: 10px;
}

.dj-radio-mixer-row--audio .dj-btn--block {
    width: 100%;
    justify-content: center;
}

.dj-radio-mixer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.8rem;
}

.dj-radio-mixer-row label {
    min-width: 80px;
    font-weight: 600;
}

.dj-radio-mixer-row input[type="range"] {
    flex: 1;
}

.dj-radio-history {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.76rem;
}

.dj-radio-history li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(42, 42, 61, 0.3);
}

.dj-radio-history-time {
    color: var(--dj-muted);
    margin-right: 8px;
    font-family: monospace;
}

.dj-radio-history-empty {
    color: var(--dj-muted);
    font-style: italic;
    padding: 16px 0;
}

.dj-radio-log.dj-drop--over {
    outline: 2px dashed var(--dj-accent2);
    outline-offset: -2px;
}

@media (max-width: 900px) {
    .dj-app--radio .dj-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .dj-radio-cart-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .dj-radio-mic-btn {
        width: 72px;
        min-height: 96px;
    }

    .dj-mode-switch {
        order: -1;
        width: 100%;
        justify-content: center;
    }
}

/* Evitar desborde horizontal global en pantallas estrechas */
@media (max-width: 900px) {
    .dj-deck,
    .dj-decks,
    .dj-library,
    .dj-sampler-bar,
    .dj-browser-row--file {
        max-width: 100%;
    }

    .dj-browser-row--file {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dj-track-item {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .dj-track-actions {
        flex-shrink: 0;
    }
}