/* TNT MIXER - Virtual DJ / Traktor Style */
.tnt-mixer-overlay { position: fixed; inset: 0; z-index: 999999; background: #0a0a0f; overflow: hidden; display: flex; flex-direction: column; font-family: 'Space Grotesk', 'Segoe UI', sans-serif; }
.tnt-mixer { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }

/* Top bar */
.mx-topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; background: linear-gradient(180deg, #1a1a2e, #0d0d1a); border-bottom: 1px solid #222; height: 32px; flex-shrink: 0; }
.mx-topbar-left { display: flex; align-items: center; gap: 12px; }
.mx-logo { font-size: 14px; font-weight: 900; color: #ff6b1a; letter-spacing: 1px; }
.mx-cpu { font-size: 10px; color: #0f0; }
.mx-topbar-center { display: flex; align-items: center; gap: 6px; }
.mx-master-vu { display: flex; gap: 1px; align-items: flex-end; height: 16px; }
.mx-vu-bar { width: 4px; background: #0f0; border-radius: 1px; transition: height .1s; }
.mx-topbar-right { display: flex; align-items: center; gap: 8px; }
.mx-close-btn { background: #c0392b; border: none; color: #fff; width: 22px; height: 22px; border-radius: 3px; font-size: 12px; cursor: pointer; font-weight: 700; }

/* Waveform strip (top full width) */
.mx-waveforms { display: flex; height: 60px; flex-shrink: 0; border-bottom: 1px solid #222; position: relative; }
.mx-wave-deck { flex: 1; position: relative; overflow: hidden; }
.mx-wave-deck canvas { width: 100%; height: 100%; display: block; }
.mx-wave-divider { width: 2px; background: #ff6b1a; position: relative; z-index: 2; }
.mx-wave-time { position: absolute; bottom: 2px; font-size: 9px; color: rgba(255,255,255,.7); font-family: monospace; }
.mx-wave-deck:first-child .mx-wave-time { left: 8px; }
.mx-wave-deck:last-child .mx-wave-time { right: 8px; }

/* Main area: decks + center mixer */
.mx-main { flex: 1; display: grid; grid-template-columns: 1fr 160px 1fr; min-height: 0; }

/* Deck panel */
.mx-deck { display: flex; flex-direction: column; padding: 8px; background: linear-gradient(180deg, #111118, #0a0a12); }
.mx-deck-b { background: linear-gradient(180deg, #111118, #0a0a12); }
.mx-deck-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mx-deck-id { font-size: 24px; font-weight: 900; }
.mx-deck-a .mx-deck-id { color: #00bfff; }
.mx-deck-b .mx-deck-id { color: #ff4444; }
.mx-deck-bpm { font-size: 20px; font-weight: 700; color: #0f0; font-family: monospace; }
.mx-deck-bpm small { font-size: 9px; color: #666; display: block; }
.mx-deck-track { margin-bottom: 6px; }
.mx-deck-title { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-deck-artist { font-size: 11px; color: #00bfff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-deck-b .mx-deck-artist { color: #ff6666; }

/* Platter */
.mx-platter-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto 8px; }
.mx-platter { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #111 40%, #222 41%, #111 42%, #222 43%, #111 60%, #0a0a0f 100%); border: 3px solid #333; position: relative; animation: spin 2s linear infinite paused; }
.mx-platter.spinning { animation-play-state: running; }
.mx-platter-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, #ff6b1a 0%, #c0392b 100%); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 900; color: #fff; text-align: center; letter-spacing: .5px; }
.mx-deck-b .mx-platter-label { background: radial-gradient(circle, #ff4444 0%, #8b0000 100%); }
.mx-platter-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.05); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Hot cues */
.mx-hotcues { display: flex; gap: 4px; margin-bottom: 6px; justify-content: center; }
.mx-hotcue { width: 28px; height: 22px; border-radius: 4px; border: 1px solid #444; background: #1a1a2e; color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }
.mx-hotcue.active { background: #00bfff; border-color: #00bfff; color: #000; }
.mx-deck-b .mx-hotcue.active { background: #ff4444; border-color: #ff4444; }

/* Transport */
.mx-transport { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; }
.mx-tbtn { padding: 6px 14px; border-radius: 4px; border: 1px solid #444; background: #1a1a2e; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; }
.mx-tbtn:hover { background: #222; }
.mx-tbtn-cue { border-color: #ff6b1a; color: #ff6b1a; }
.mx-tbtn-play { border-color: #0f0; color: #0f0; min-width: 44px; font-size: 16px; }
.mx-tbtn-play.active { background: #0f0; color: #000; }
.mx-tbtn-sync { border-color: #00bfff; color: #00bfff; }
.mx-deck-b .mx-tbtn-sync { border-color: #ff4444; color: #ff4444; }

/* Loop */
.mx-loop { display: flex; gap: 4px; align-items: center; justify-content: center; margin-bottom: 6px; }
.mx-loop-btn { padding: 3px 8px; border-radius: 3px; border: 1px solid #333; background: #111; color: #aaa; font-size: 9px; cursor: pointer; }
.mx-loop-btn.active { border-color: #0f0; color: #0f0; }
.mx-loop-size { color: #0f0; font-size: 11px; font-weight: 700; font-family: monospace; min-width: 30px; text-align: center; }

/* EQ section (vertical) */
.mx-eq-wrap { display: flex; gap: 8px; justify-content: center; margin-top: auto; }
.mx-eq-ch { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mx-eq-ch span { font-size: 8px; color: #666; font-weight: 700; }
.mx-eq-ch input[type="range"] { writing-mode: vertical-lr; direction: rtl; height: 50px; width: 16px; accent-color: #00bfff; }
.mx-deck-b .mx-eq-ch input[type="range"] { accent-color: #ff4444; }

/* FX row */
.mx-fx-row { display: flex; gap: 4px; justify-content: center; margin: 4px 0; flex-wrap: wrap; }
.mx-fx-btn { padding: 3px 8px; border-radius: 4px; border: 1px solid #333; background: #111; color: #888; font-size: 9px; cursor: pointer; font-weight: 600; }
.mx-fx-btn.active { border-color: #ff6b1a; color: #ff6b1a; background: rgba(255,107,26,.1); }

/* Center mixer column */
.mx-center { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; background: linear-gradient(180deg, #0d0d1a, #080810); border-left: 1px solid #222; border-right: 1px solid #222; }
.mx-center-label { font-size: 9px; color: #666; font-weight: 700; margin-bottom: 4px; letter-spacing: 1px; }
.mx-gain-wrap { display: flex; gap: 8px; margin-bottom: 8px; }
.mx-gain-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mx-gain-col span { font-size: 8px; color: #666; }
.mx-gain-col input[type="range"] { writing-mode: vertical-lr; direction: rtl; height: 60px; width: 14px; }
.mx-vu-meters { display: flex; gap: 6px; margin: 8px 0; height: 100px; }
.mx-vu-col { display: flex; flex-direction: column-reverse; gap: 1px; width: 8px; }
.mx-vu-seg { width: 100%; height: 4px; background: #1a1a2e; border-radius: 1px; }
.mx-vu-seg.lit-green { background: #0f0; }
.mx-vu-seg.lit-yellow { background: #ff0; }
.mx-vu-seg.lit-red { background: #f00; }
.mx-cf-section { margin-top: auto; width: 100%; }
.mx-cf-label { display: flex; justify-content: space-between; font-size: 10px; color: #666; font-weight: 700; margin-bottom: 2px; }
.mx-cf-slider { width: 100%; height: 10px; accent-color: #fff; cursor: pointer; }

/* Filter/FX sliders in center */
.mx-filter-section { width: 100%; margin: 8px 0; }
.mx-filter-row { display: flex; align-items: center; gap: 4px; margin: 3px 0; }
.mx-filter-row span { font-size: 8px; color: #666; width: 28px; }
.mx-filter-row input { flex: 1; height: 3px; accent-color: #ff6b1a; }

/* Browser / track list */
.mx-browser { flex-shrink: 0; height: 180px; border-top: 1px solid #222; display: flex; flex-direction: column; background: #0d0d15; }
.mx-browser-head { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: #111; border-bottom: 1px solid #222; }
.mx-browser-search { flex: 1; padding: 4px 10px; border-radius: 4px; border: 1px solid #333; background: #0a0a12; color: #fff; font-size: 12px; outline: none; }
.mx-browser-search:focus { border-color: #ff6b1a; }
.mx-browser-list { flex: 1; overflow-y: auto; padding: 0 8px; }
.mx-browser-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; cursor: pointer; transition: background .1s; border-bottom: 1px solid rgba(255,255,255,.03); }
.mx-browser-row:hover { background: rgba(255,255,255,.05); }
.mx-browser-row img { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; }
.mx-browser-row .br-info { flex: 1; min-width: 0; }
.mx-browser-row .br-title { font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-browser-row .br-artist { font-size: 10px; color: #666; }
.mx-browser-row .br-dur { font-size: 10px; color: #444; font-family: monospace; width: 36px; }
.mx-load-deck { padding: 3px 8px; border-radius: 4px; border: 1px solid; font-size: 10px; font-weight: 700; cursor: pointer; background: transparent; }
.mx-load-deck[data-deck="A"] { border-color: #00bfff; color: #00bfff; }
.mx-load-deck[data-deck="B"] { border-color: #ff4444; color: #ff4444; }
.mx-load-deck:hover { opacity: .7; }

/* Use button */
.mx-use-wrap { display: flex; gap: 8px; padding: 4px 12px; background: #111; border-top: 1px solid #222; flex-shrink: 0; }
.mx-use-btn { flex: 1; padding: 8px; border-radius: 6px; border: none; background: linear-gradient(135deg, #ff6b1a, #ff3366); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }

/* REC button */
.mx-rec-btn { padding: 4px 12px; border-radius: 4px; border: 2px solid #c0392b; background: #1a1a2e; color: #ff4444; font-size: 11px; font-weight: 700; cursor: pointer; margin-left: 12px; transition: all .2s; }
.mx-rec-btn:hover { background: #2a1a1a; }
.mx-rec-btn.recording { background: #c0392b; color: #fff; animation: recPulse 1s ease infinite; border-color: #ff0000; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 4px #f00; } 50% { box-shadow: 0 0 16px #f00; } }
.mx-rec-timer { font-size: 11px; color: #ff4444; font-family: monospace; font-weight: 700; margin-left: 6px; }

/* Load file button */
.mx-load-file-wrap { display: flex; justify-content: center; margin: 4px 0; }
.mx-load-file-btn { padding: 5px 12px; border-radius: 6px; border: 1px dashed #ff6b1a; background: rgba(255,107,26,.05); color: #ff6b1a; font-size: 10px; font-weight: 700; cursor: pointer; transition: all .2s; }
.mx-load-file-btn:hover { background: rgba(255,107,26,.15); border-style: solid; }

/* Pitch slider */
.mx-pitch-wrap { display: flex; flex-direction: column; align-items: center; margin: 6px 0; }
.mx-pitch-slider { writing-mode: vertical-lr; direction: rtl; height: 60px; width: 18px; accent-color: #ff6b1a; cursor: pointer; }
.mx-pitch-val { font-size: 10px; color: #ff6b1a; font-family: monospace; font-weight: 700; margin-top: 2px; }

/* Deck BPM / time */
.mx-deck-bpm-wrap { display: flex; align-items: center; gap: 8px; }
.mx-bpm-val { font-size: 20px; font-weight: 700; color: #0f0; font-family: monospace; }
.mx-deck-time { font-size: 12px; color: #aaa; font-family: monospace; }
.mx-remain { font-size: 11px; color: #ff6b1a; font-family: monospace; }
.mx-deck-id-wrap { display: flex; align-items: center; gap: 8px; }
.mx-deck-meta { display: flex; flex-direction: column; gap: 2px; }
.mx-mode { font-size: 9px; color: #666; font-weight: 700; letter-spacing: 1px; }

/* Platter groove lines */
.mx-platter-groove { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.05); }

/* Browser enhancements */
.mx-browser-cols { display: flex; gap: 8px; align-items: center; }
.mx-browser-count { font-size: 10px; color: #666; white-space: nowrap; }
.mx-browser-icon { font-size: 14px; }

/* VU meter deck labels */
.mx-vu-a, .mx-vu-b { font-size: 8px; font-weight: 700; text-align: center; }
.mx-vu-a { color: #00bfff; }
.mx-vu-b { color: #ff4444; }

/* Close / Use area */
.mx-close { display: flex; align-items: center; }
.mx-use { display: flex; align-items: center; gap: 8px; }

/* Tablet responsive */
@media (max-width: 900px) {
    .mx-main { grid-template-columns: 1fr 100px 1fr; }
    .mx-platter-wrap { width: 120px; height: 120px; }
    .mx-bpm-val { font-size: 14px; }
    .mx-deck-title { font-size: 12px; }
    .mx-pitch-slider { height: 45px; }
}

/* Mobile - full redesign for phones */
@media (max-width: 600px) {
    .tnt-mixer-overlay { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    .tnt-mixer { height: auto; min-height: 100vh; overflow: visible; }

    /* Topbar compact */
    .mx-topbar { height: 40px; padding: 4px 8px; position: sticky; top: 0; z-index: 10; }
    .mx-logo { font-size: 12px; }
    .mx-mode { font-size: 8px; }
    .mx-rec-btn { padding: 4px 8px; font-size: 9px; margin-left: 6px; }
    .mx-rec-timer { font-size: 9px; }
    .mx-close-btn { width: 28px; height: 28px; font-size: 14px; }

    /* Waveforms - keep visible but shorter */
    .mx-waveforms { height: 50px; }

    /* Main area - vertical stack on mobile */
    .mx-main { display: flex; flex-direction: column; }

    /* Deck panels side by side in compact mode */
    .mx-deck { padding: 6px; }
    .mx-deck-header { margin-bottom: 4px; flex-wrap: wrap; gap: 4px; }
    .mx-deck-id { font-size: 18px; }
    .mx-deck-id-wrap { gap: 4px; }
    .mx-deck-time { font-size: 10px; }
    .mx-bpm-val { font-size: 14px; }
    .mx-remain { font-size: 9px; }
    .mx-deck-track { margin-bottom: 4px; }
    .mx-deck-title { font-size: 12px; }
    .mx-deck-artist { font-size: 10px; }

    /* Platters - smaller but visible */
    .mx-platter-wrap { width: 100px; height: 100px; margin: 4px auto; }
    .mx-platter-label { width: 36px; height: 36px; font-size: 7px; }

    /* Pitch slider horizontal on mobile */
    .mx-pitch-wrap { flex-direction: row; gap: 6px; align-items: center; margin: 4px 0; }
    .mx-pitch-slider { writing-mode: horizontal-tb; direction: ltr; height: auto; width: 100%; max-width: 160px; }
    .mx-pitch-val { margin-top: 0; font-size: 9px; }

    /* Hotcues - bigger touch targets */
    .mx-hotcues { gap: 4px; margin-bottom: 4px; }
    .mx-hotcue { width: 36px; height: 30px; font-size: 11px; border-radius: 6px; }

    /* Transport buttons - large touch */
    .mx-transport { gap: 6px; margin-bottom: 4px; }
    .mx-tbtn { padding: 8px 14px; font-size: 11px; border-radius: 6px; min-height: 36px; }
    .mx-tbtn-play { min-width: 50px; font-size: 18px; }

    /* Loop buttons */
    .mx-loop { gap: 3px; margin-bottom: 4px; flex-wrap: wrap; }
    .mx-loop-btn { padding: 6px 10px; font-size: 10px; min-height: 28px; border-radius: 4px; }
    .mx-loop-size { font-size: 12px; }

    /* FX row */
    .mx-fx-row { gap: 4px; margin: 4px 0; }
    .mx-fx-btn { padding: 6px 10px; font-size: 10px; min-height: 28px; border-radius: 5px; }

    /* Load file button */
    .mx-load-file-wrap { margin: 4px 0; }
    .mx-load-file-btn { padding: 8px 14px; font-size: 11px; width: 100%; }

    /* EQ - horizontal layout on mobile */
    .mx-eq-wrap { flex-direction: row; gap: 6px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
    .mx-eq-ch { flex-direction: row; gap: 4px; align-items: center; }
    .mx-eq-ch span { font-size: 9px; min-width: 22px; }
    .mx-eq-ch input[type="range"] { writing-mode: horizontal-tb; direction: ltr; height: auto; width: 60px; }

    /* Center mixer - full width between decks */
    .mx-center { flex-direction: row; flex-wrap: wrap; padding: 8px; border-left: none; border-right: none; border-top: 1px solid #333; border-bottom: 1px solid #333; gap: 8px; justify-content: center; }

    /* VU meters horizontal on mobile */
    .mx-vu-meters { height: 50px; flex-direction: row; gap: 2px; }
    .mx-vu-col { flex-direction: row; width: auto; height: 8px; gap: 1px; }
    .mx-vu-seg { width: 6px; height: 100%; }

    /* Filter section */
    .mx-filter-section { width: auto; flex: 1; min-width: 120px; margin: 0; }
    .mx-filter-row { margin: 2px 0; }
    .mx-filter-row span { font-size: 9px; }
    .mx-filter-row input { height: 6px; }

    /* Crossfader - prominent on mobile */
    .mx-cf-section { width: 100%; margin-top: 4px; padding: 4px 0; }
    .mx-cf-label { font-size: 12px; }
    .mx-cf-slider { height: 16px; }

    /* Browser - taller on mobile for scrolling */
    .mx-browser { height: 200px; }
    .mx-browser-head { padding: 6px 8px; gap: 4px; flex-wrap: wrap; }
    .mx-browser-search { font-size: 14px; padding: 8px 10px; min-height: 36px; }
    .mx-browser-count { font-size: 9px; width: 100%; }
    .mx-browser-cols { display: none; }
    .mx-browser-row { padding: 8px 6px; gap: 6px; min-height: 44px; }
    .mx-browser-row img { width: 36px; height: 36px; }
    .mx-browser-row .br-title { font-size: 12px; }
    .mx-browser-row .br-artist { font-size: 11px; }
    .mx-browser-row .br-dur { font-size: 9px; }
    .mx-load-deck { padding: 6px 10px; font-size: 11px; min-height: 30px; border-radius: 5px; }

    /* Use button - big touch target */
    .mx-use-wrap { padding: 8px; position: sticky; bottom: 0; z-index: 10; background: #111; }
    .mx-use-btn { padding: 14px; font-size: 15px; border-radius: 8px; }
}

/* Extra small phones (under 380px) */
@media (max-width: 380px) {
    .mx-platter-wrap { width: 70px; height: 70px; }
    .mx-platter-label { width: 26px; height: 26px; font-size: 6px; }
    .mx-tbtn { padding: 6px 10px; font-size: 10px; }
    .mx-hotcue { width: 30px; height: 26px; }
    .mx-eq-ch input[type="range"] { width: 45px; }
    .mx-deck-id { font-size: 16px; }
    .mx-bpm-val { font-size: 12px; }
}