/* Virtual DJ - Macintosh SE Edition */

/* Authentic Vintage Macintosh Bitmap-Style Fonts */
@font-face {
    font-family: 'Chicago';
    src: url('fonts/ChicagoFLF-ExtraCondensed.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Silkscreen';
    src: url('fonts/Silkscreen.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Silkscreen';
    src: url('fonts/Silkscreen-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'VT323';
    src: url('fonts/VT323.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Classic Mac SE Palette */
    --mac-white: #ffffff;
    --mac-light: #c0c0c0;
    --mac-medium: #808080;
    --mac-dark: #404040;
    --mac-black: #000000;
    --mac-bg: #a8a8a8;
    --mac-window-bg: #ffffff;
    --mac-title-bar: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%);
    --mac-inset: inset 1px 1px 0 var(--mac-black), inset -1px -1px 0 var(--mac-white);
    --mac-outset: inset -1px -1px 0 var(--mac-black), inset 1px 1px 0 var(--mac-white);
}

html, body {
    font-family: 'Silkscreen', 'Chicago', 'VT323', monospace;
    background: var(--mac-bg);
    min-height: 100vh;
    color: var(--mac-black);
    font-size: 12px;
    line-height: 1.2;
    /* Crisp pixel rendering for bitmap fonts */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    text-rendering: optimizeSpeed;
    /* Classic Mac dither pattern */
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23a8a8a8'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23a8a8a8'/%3E%3Crect x='2' y='0' width='2' height='2' fill='%23909090'/%3E%3Crect x='0' y='2' width='2' height='2' fill='%23909090'/%3E%3C/svg%3E");
}

/* Classic Mac Menu Bar */
.mac-menubar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: var(--mac-white);
    border-bottom: 2px solid var(--mac-black);
    display: flex;
    align-items: center;
    padding: 0 8px;
    z-index: 10001;
    gap: 0;
}

.menu-item {
    padding: 2px 12px;
    font-size: 12px;
    font-weight: bold;
    cursor: default;
    user-select: none;
    position: relative;
}

.menu-item:hover {
    background: var(--mac-black);
    color: var(--mac-white);
}

.apple-menu {
    font-family: 'Times New Roman', serif;
    font-size: 16px;
    padding: 0 10px;
    font-weight: normal;
}

/* Dropdown menus */
.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--mac-white);
    border: 2px solid var(--mac-black);
    min-width: 180px;
    box-shadow: 2px 2px 0 var(--mac-black);
    z-index: 10002;
}

.menu-item:hover > .menu-dropdown {
    display: block;
}

.menu-dropdown-item {
    padding: 5px 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: default;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--mac-black);
    background: var(--mac-white);
}

.menu-dropdown-item:hover {
    background: var(--mac-black);
    color: var(--mac-white);
}

.menu-dropdown-item.disabled {
    color: var(--mac-dark);
}

.menu-dropdown-item.disabled:hover {
    background: var(--mac-white);
    color: var(--mac-medium);
}

.menu-shortcut {
    font-size: 11px;
    margin-left: 20px;
}

.menu-divider {
    height: 1px;
    background: var(--mac-black);
    margin: 4px 0;
}

/* No pseudo elements for effects */
body::before, body::after {
    display: none;
}

/* Main Console - Mac Window Style - Draggable & Resizable */
.dj-console {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 1150px;
    min-width: 700px;
    min-height: 500px;
    padding: 0;
    background: var(--mac-window-bg);
    border: 2px solid var(--mac-black);
    box-shadow: 2px 2px 0 var(--mac-black);
    overflow: hidden;
}

/* Resize handle - Mac style grow box */
.dj-console::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 15px;
    height: 15px;
    background: 
        linear-gradient(135deg, 
            transparent 0%, transparent 30%,
            var(--mac-black) 30%, var(--mac-black) 35%,
            transparent 35%, transparent 45%,
            var(--mac-black) 45%, var(--mac-black) 50%,
            transparent 50%, transparent 60%,
            var(--mac-black) 60%, var(--mac-black) 65%,
            transparent 65%, transparent 100%);
    cursor: nwse-resize;
    z-index: 1000;
}

/* Header - Mac Title Bar - Draggable */
.console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px;
    background: var(--mac-white);
    border-bottom: 2px solid var(--mac-black);
    /* Classic Mac title bar stripes */
    background-image: repeating-linear-gradient(
        0deg,
        var(--mac-white) 0px,
        var(--mac-white) 1px,
        var(--mac-black) 1px,
        var(--mac-black) 2px
    );
    background-size: 100% 100%;
    height: 20px;
    position: relative;
    cursor: grab;
    user-select: none;
}

.console-header:active {
    cursor: grabbing;
}

/* Close box */
.console-header::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
}

.console-header h1 {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    background: var(--mac-white);
    padding: 0 10px;
    margin: 0 auto;
    pointer-events: none;
}

.master-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.master-volume {
    display: flex;
    align-items: center;
    gap: 5px;
}

.master-volume label {
    font-size: 10px;
    font-weight: bold;
}

.master-volume input[type="range"] {
    width: 60px;
    height: 4px;
}

.record-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.record-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--mac-white);
    border: 2px solid var(--mac-black);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
}

.record-btn:hover {
    background: var(--mac-light-gray);
}

.record-btn:active {
    background: var(--mac-dark-gray);
}

.record-btn.recording {
    background: var(--mac-black);
    color: var(--mac-white);
}

.record-btn.recording .record-icon {
    color: #ff4444;
    animation: pulse-record 1s ease-in-out infinite;
}

@keyframes pulse-record {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.record-icon {
    font-size: 12px;
    color: #cc0000;
}

.record-time {
    font-size: 11px;
    font-family: 'Chicago', monospace;
    min-width: 35px;
}

.export-buttons {
    display: flex;
    gap: 4px;
}

.export-btn {
    padding: 3px 6px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 9px;
    font-weight: bold;
}

.export-btn:hover {
    background: var(--mac-light-gray);
}

.export-btn:active {
    background: var(--mac-dark-gray);
}

.export-cancel {
    color: #cc0000;
}

/* Main Layout - Two column for larger turntables */
.console-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 5px;
    background: var(--mac-white);
}

/* Deck Styling - Mac Group Box */
.deck {
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    padding: 8px;
    margin: 3px;
    position: relative;
}

.deck::before {
    display: none;
}

.deck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--mac-black);
}

.deck-label {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.track-info {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 8px;
}

.track-name {
    font-size: 10px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-time {
    font-size: 14px;
    font-weight: bold;
    font-family: 'Monaco', 'Courier New', monospace;
    letter-spacing: 1px;
}

.bpm-display {
    font-size: 10px;
}

/* Turntable Container - holds platter and tonearm */
.turntable-container {
    position: relative;
    width: 280px;
    height: 250px;
    margin: 0 auto 5px;
}

/* Turntable - Large size with controls around it */
.turntable {
    position: absolute;
    left: 0;
    top: 5px;
    width: 240px;
    height: 240px;
    background: var(--mac-light);
    border-radius: 50%;
    border: 3px solid var(--mac-black);
    box-shadow: var(--mac-inset);
}

.platter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--mac-dark);
    border: 2px solid var(--mac-black);
}

.vinyl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    cursor: grab;
    width: 210px !important;
    height: 210px !important;
    /* Enable touch manipulation for scratching */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.vinyl:active {
    cursor: grabbing;
}

.spindle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: var(--mac-medium);
    border-radius: 50%;
    border: 2px solid var(--mac-black);
    pointer-events: none;
}

/* Tonearm */
/* Tonearm - base in top-right corner of turntable */
.tonearm-mount {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 50px;
    height: 50px;
    z-index: 10;
}

.tonearm {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: rotate(70deg);
    transform-origin: 25px 25px; /* Pivot at center of tonearm-base */
    transition: transform 0.6s ease;
    pointer-events: none;
}

/* Playing state is now controlled dynamically via JS for accurate needle tracking */
/* Fallback for when JS hasn't set position yet */
.tonearm.playing {
    transform: rotate(100deg);
}

.tonearm-base {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 40px;
    background: var(--mac-light);
    border-radius: 50%;
    border: 2px solid var(--mac-black);
    box-shadow: 1px 1px 0 var(--mac-black);
    z-index: 2;
}

/* Small dot in center of base */
.tonearm-base::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--mac-dark);
    border-radius: 50%;
}

.tonearm-arm {
    position: absolute;
    top: 20px;
    left: 25px;
    width: 130px;
    height: 5px;
    background: var(--mac-medium);
    transform-origin: left center;
    border: 1px solid var(--mac-black);
    z-index: 1;
}

.tonearm-head {
    position: absolute;
    top: -4px;
    right: -2px;
    width: 18px;
    height: 12px;
    background: var(--mac-dark);
    border: 1px solid var(--mac-black);
}

/* Cartridge/stylus detail */
.tonearm-head::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 6px;
    background: var(--mac-black);
}

/* Deck Controls - Horizontal layout */
.deck-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.pitch-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: var(--mac-light);
    border: 1px solid var(--mac-black);
}

.pitch-control label {
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
}

.pitch-control input[type="range"] {
    width: 60px;
    height: 16px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
}

.pitch-control input[type="range"]::-webkit-slider-runnable-track {
    background: var(--mac-white);
    border: none;
}

.pitch-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 18px;
    background: var(--mac-light);
    border: 1px solid var(--mac-black);
    cursor: pointer;
}

.pitch-control input[type="range"]::-moz-range-track {
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
}

.pitch-control input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 18px;
    background: var(--mac-light);
    border: 1px solid var(--mac-black);
    cursor: pointer;
    border-radius: 0;
}

.pitch-value {
    font-size: 9px;
    font-weight: bold;
    font-family: 'Monaco', 'Courier New', monospace;
    min-width: 28px;
}

/* Transport Controls - Horizontal Mac Buttons */
.transport-controls {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.transport-controls button {
    font-family: inherit;
    width: 50px;
    height: 24px;
    border: 2px solid var(--mac-black);
    border-radius: 4px;
    font-weight: bold;
    font-size: 9px;
    letter-spacing: 1px;
    cursor: pointer;
    background: var(--mac-white);
    color: var(--mac-black);
    box-shadow: var(--mac-outset);
}

.transport-controls button:hover {
    background: var(--mac-light);
}

.transport-controls button:active, 
.transport-controls button.active,
.transport-controls button.playing {
    box-shadow: var(--mac-inset);
    background: var(--mac-dark);
    color: var(--mac-white);
}

.btn-cue, .btn-play, .btn-sync, .btn-mode {
    background: var(--mac-white) !important;
    color: var(--mac-black) !important;
    box-shadow: var(--mac-outset) !important;
}

.btn-cue:active, .btn-play:active, .btn-sync:active, .btn-mode:active,
.btn-cue.active, .btn-play.active, .btn-sync.active, .btn-mode.active,
.btn-play.playing {
    background: var(--mac-dark) !important;
    color: var(--mac-white) !important;
    box-shadow: var(--mac-inset) !important;
}

.btn-mode {
    font-size: 7px !important;
    width: 36px !important;
    letter-spacing: 0 !important;
}

/* Key Lock button - special highlight when active */
#keylock-a.active, #keylock-b.active {
    background: #2e8b57 !important; /* Sea green to indicate pitch-locked */
    color: var(--mac-white) !important;
    box-shadow: var(--mac-inset) !important;
}

/* Loop Controls - Horizontal */
.loop-controls {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
}

.loop-controls button {
    font-family: inherit;
    width: 32px;
    height: 20px;
    border: 1px solid var(--mac-black);
    border-radius: 3px;
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
    background: var(--mac-white);
    color: var(--mac-black);
    box-shadow: var(--mac-outset);
}

.loop-controls button:hover {
    background: var(--mac-light);
}

.loop-controls button:active, .loop-controls button.active {
    box-shadow: var(--mac-inset);
    background: var(--mac-dark);
    color: var(--mac-white);
}

.loop-controls select {
    font-family: inherit;
    width: 36px;
    height: 20px;
    background: var(--mac-white);
    color: var(--mac-black);
    border: 1px solid var(--mac-black);
    font-size: 9px;
    padding: 0 2px;
    cursor: pointer;
}

/* Beat Jump Controls */
.beat-jump-controls {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
}

.btn-jump {
    font-family: inherit;
    width: 32px;
    height: 20px;
    border: 1px solid var(--mac-black);
    border-radius: 3px;
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
    background: var(--mac-white);
    color: var(--mac-black);
    box-shadow: var(--mac-outset);
}

.btn-jump:hover {
    background: var(--mac-light);
}

.btn-jump:active {
    box-shadow: var(--mac-inset);
    background: var(--mac-dark);
    color: var(--mac-white);
}

.beat-jump-controls select {
    font-family: inherit;
    width: 32px;
    height: 20px;
    background: var(--mac-white);
    color: var(--mac-black);
    border: 1px solid var(--mac-black);
    font-size: 9px;
    padding: 0 2px;
    cursor: pointer;
    text-align: center;
}

/* Waveform */
.waveform-container {
    position: relative;
    width: 100%;
    height: 32px;
    background: var(--mac-white);
    border: 2px solid var(--mac-black);
    box-shadow: var(--mac-inset);
    overflow: hidden;
    margin-bottom: 4px;
}

.waveform {
    width: 100%;
    height: 100%;
}

.playhead {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--mac-black);
    pointer-events: none;
}

/* Load Controls */
.load-controls {
    display: flex;
    gap: 4px;
}

.btn-load {
    font-family: inherit;
    flex: 1;
    padding: 4px 8px;
    background: var(--mac-white);
    color: var(--mac-black);
    border: 1px solid var(--mac-black);
    border-radius: 4px;
    font-weight: bold;
    font-size: 9px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: var(--mac-outset);
}

.btn-load:hover {
    background: var(--mac-light);
}

.btn-load:active {
    box-shadow: var(--mac-inset);
}

/* Mixer Section - Horizontal bar below decks */
.mixer {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--mac-light);
    border: 2px solid var(--mac-black);
    padding: 6px;
    margin: 3px;
    gap: 12px;
    box-shadow: var(--mac-inset);
}

.channel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.eq-section {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 4px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
}

.eq-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.eq-knob label {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Knob styling - Mac style */
input.knob {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--mac-light);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--mac-black);
}

input.knob::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 4px;
    height: 14px;
    background: var(--mac-black);
    cursor: pointer;
}

/* Channel Strip */
.channel-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 4px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
}

.channel-strip label {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* VU Meters - Simple Mac style */
.vu-meter {
    display: flex;
    gap: 2px;
    height: 40px;
    padding: 3px;
    background: var(--mac-white);
    border: 2px solid var(--mac-black);
    box-shadow: var(--mac-inset);
}

.vu-bar {
    width: 8px;
    height: 100%;
    background: linear-gradient(to top, 
        var(--mac-black) 0%, 
        var(--mac-black) 60%, 
        var(--mac-medium) 60%, 
        var(--mac-medium) 80%, 
        var(--mac-dark) 80%, 
        var(--mac-dark) 100%);
    position: relative;
    overflow: hidden;
}

.vu-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: var(--mac-white);
    transition: height 0.05s ease;
}

.master-vu {
    height: 80px;
}

/* Fader */
.fader {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 20px;
    background: var(--mac-white);
    border: 2px solid var(--mac-black);
    box-shadow: var(--mac-inset);
}

.fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 28px;
    background: var(--mac-light);
    border: 1px solid var(--mac-black);
    cursor: pointer;
}

/* Crossfader Section */
.crossfader-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-left: 1px solid var(--mac-black);
    border-right: 1px solid var(--mac-black);
    margin: 0 10px;
}

.effects-sends {
    display: flex;
    gap: 20px;
}

.effect-send {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.effect-send label {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
}

.crossfader-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.crossfader-container label {
    font-size: 12px;
    font-weight: bold;
}

#crossfader {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    background: var(--mac-white);
    border: 2px solid var(--mac-black);
    box-shadow: var(--mac-inset);
}

#crossfader::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 40px;
    height: 32px;
    background: var(--mac-light);
    border: 2px solid var(--mac-black);
    cursor: pointer;
}

/* Mini Visualizer */
.mini-visualizer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--mac-black);
    border: 2px solid var(--mac-dark);
    border-radius: 4px;
}

#mini-visualizer-canvas {
    background: #000;
    border: 1px solid var(--mac-dark);
}

.mini-viz-select {
    font-family: 'Chicago', 'Charcoal', 'Lucida Grande', sans-serif;
    font-size: 9px;
    padding: 2px 4px;
    background: var(--mac-light);
    border: 1px solid var(--mac-black);
    cursor: pointer;
}

/* Sample Pads Section */
.sample-pads-section {
    background: var(--mac-white);
    padding: 6px;
    border-top: 2px solid var(--mac-black);
}

.sample-pads-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 2px 5px;
    user-select: none;
}

.sample-pads-section .section-header:hover {
    background: var(--mac-light);
}

.sample-pads-section h2 {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
}

.sample-pads-section .collapse-indicator {
    font-size: 10px;
    transition: transform 0.2s;
}

.sample-pads-section.collapsed .collapse-indicator {
    transform: rotate(-90deg);
}

.sample-pads-section.collapsed .section-content {
    display: none;
}

.sample-pads-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 8px 5px;
    border-bottom: 1px solid var(--mac-medium);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.sample-record-controls,
.sample-range-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sample-record-controls label,
.sample-range-info {
    font-size: 9px;
    color: var(--mac-dark);
}

.sample-record-controls select {
    font-size: 9px;
    padding: 2px 4px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
}

.sample-record-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: bold;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    box-shadow: var(--mac-outset);
    cursor: pointer;
}

.sample-record-btn:hover {
    background: var(--mac-light);
}

.sample-record-btn:active,
.sample-record-btn.recording {
    background: #cc0000;
    color: white;
    box-shadow: var(--mac-inset);
}

.sample-record-btn .record-icon {
    color: #cc0000;
}

.sample-record-btn.recording .record-icon {
    color: white;
    animation: pulse 0.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.sample-record-time {
    font-size: 10px;
    font-family: 'VT323', monospace;
    min-width: 35px;
}

.sample-range-btn {
    padding: 4px 8px;
    font-size: 9px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    box-shadow: var(--mac-outset);
    cursor: pointer;
}

.sample-range-btn:hover {
    background: var(--mac-light);
}

.sample-range-btn:active {
    box-shadow: var(--mac-inset);
}

.sample-pads-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    padding: 5px;
}

.sample-pad {
    background: var(--mac-light);
    border: 2px solid var(--mac-black);
    box-shadow: var(--mac-outset);
    padding: 4px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.05s, box-shadow 0.05s;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 80px;
}

.sample-pad:hover {
    background: var(--mac-white);
}

.sample-pad:active,
.sample-pad.playing {
    transform: scale(0.95);
    box-shadow: var(--mac-inset);
    background: var(--mac-medium);
}

.sample-pad.loaded {
    background: #d4edda;
}

.sample-pad.loaded:hover {
    background: #c3e6cb;
}

.sample-pad.loaded:active,
.sample-pad.loaded.playing {
    background: #a8d5b1;
}

.pad-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2px;
}

.pad-number {
    font-size: 10px;
    font-weight: bold;
}

.pad-key {
    font-size: 8px;
    background: var(--mac-dark);
    color: var(--mac-white);
    padding: 1px 3px;
    border-radius: 2px;
}

.pad-waveform {
    width: 100%;
    height: 30px;
    background: var(--mac-white);
    border: 1px solid var(--mac-medium);
    margin: 2px 0;
}

.pad-name {
    font-size: 8px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin: 2px 0;
}

.pad-controls {
    display: flex;
    gap: 4px;
    margin-top: auto;
}

.pad-load-btn,
.pad-clear-btn {
    font-size: 10px;
    padding: 2px 4px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    cursor: pointer;
    line-height: 1;
}

.pad-load-btn:hover,
.pad-clear-btn:hover {
    background: var(--mac-light);
}

.pad-clear-btn {
    color: #cc0000;
}

/* Effects Section - Mac Group Box */
.effects-section {
    background: var(--mac-white);
    padding: 6px;
    border-top: 2px solid var(--mac-black);
}

.effects-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 2px 5px;
    user-select: none;
}

.effects-section .section-header:hover {
    background: var(--mac-light);
}

.effects-section h2 {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
}

.effects-section .collapse-indicator {
    font-size: 10px;
    transition: transform 0.2s;
}

.effects-section.collapsed .collapse-indicator {
    transform: rotate(-90deg);
}

.effects-section.collapsed .section-content {
    display: none;
}

.effects-rack {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.effect-unit {
    background: var(--mac-light);
    border: 1px solid var(--mac-black);
    padding: 5px;
}

.effect-unit h3 {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-align: center;
    border-bottom: 1px solid var(--mac-black);
    padding-bottom: 3px;
}

.effect-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.effect-param {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.effect-param label {
    font-size: 7px;
    font-weight: bold;
    letter-spacing: 1px;
}

.effect-param input[type="range"] {
    width: 24px;
    height: 24px;
}

.effect-param select {
    font-family: inherit;
    width: 70px;
    padding: 2px;
    background: var(--mac-white);
    color: var(--mac-black);
    border: 1px solid var(--mac-black);
    font-size: 8px;
}

.btn-effect-toggle {
    font-family: inherit;
    padding: 4px 10px;
    background: var(--mac-white);
    color: var(--mac-black);
    border: 2px solid var(--mac-black);
    border-radius: 4px;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: var(--mac-outset);
}

.btn-effect-toggle:hover {
    background: var(--mac-light);
}

.btn-effect-toggle.active {
    background: var(--mac-dark);
    color: var(--mac-white);
    box-shadow: var(--mac-inset);
}

/* Mac Window Style (for visualizer and other floating windows) */
.mac-window {
    position: absolute;
    background: var(--mac-window-bg);
    border: 2px solid var(--mac-black);
    box-shadow: 2px 2px 0 var(--mac-black);
    min-width: 200px;
    min-height: 150px;
    z-index: 100;
}

.mac-window.hidden {
    display: none;
}

.mac-window-titlebar {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    background: var(--mac-white);
    border-bottom: 2px solid var(--mac-black);
    background-image: repeating-linear-gradient(
        0deg,
        var(--mac-white) 0px,
        var(--mac-white) 1px,
        var(--mac-black) 1px,
        var(--mac-black) 2px
    );
    height: 20px;
    cursor: grab;
    user-select: none;
}

.mac-window-titlebar:active {
    cursor: grabbing;
}

.mac-window-close {
    width: 12px;
    height: 12px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    margin-right: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.mac-window-close:hover {
    background: var(--mac-light);
}

.mac-window-title {
    font-size: 12px;
    font-weight: bold;
    background: var(--mac-white);
    padding: 0 8px;
    flex-grow: 1;
    text-align: center;
    pointer-events: none;
}

.mac-window-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100% - 36px);
}

.mac-window-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 15px;
    height: 15px;
    background: 
        linear-gradient(135deg, 
            transparent 0%, transparent 30%,
            var(--mac-black) 30%, var(--mac-black) 35%,
            transparent 35%, transparent 45%,
            var(--mac-black) 45%, var(--mac-black) 50%,
            transparent 50%, transparent 60%,
            var(--mac-black) 60%, var(--mac-black) 65%,
            transparent 65%, transparent 100%);
    cursor: nwse-resize;
}

/* Visualizer Window */
/* ============================================
   RESPONSIVE STYLES FOR MOBILE
   ============================================ */

/* Tablet Breakpoint (900px) */
@media (max-width: 900px) {
    .dj-console {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        min-width: unset;
        margin-top: 22px;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
    
    /* Disable window dragging on tablet/mobile */
    .console-header {
        cursor: default;
    }
    
    .console-header:active {
        cursor: default;
    }
    
    /* Hide the resize handle */
    .dj-console::after {
        display: none;
    }
    
    .console-main {
        grid-template-columns: 1fr;
    }
    
    .mixer {
        flex-wrap: wrap;
        padding: 8px;
    }
    
    .effects-rack {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .turntable-container {
        width: 260px;
        height: 230px;
    }
    
    .turntable {
        width: 220px;
        height: 220px;
    }
    
    .platter {
        width: 200px;
        height: 200px;
    }
    
    .vinyl {
        width: 190px !important;
        height: 190px !important;
    }
    
    .tonearm-mount {
        right: -15px;
    }
    
    .tonearm-arm {
        width: 130px;
    }
}

/* Mobile Breakpoint (768px) - Side by side compact layout */
@media (max-width: 768px) {
    /* Menu bar - simplified for mobile */
    .mac-menubar {
        height: 22px;
        padding: 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .menu-item {
        padding: 2px 6px;
        font-size: 10px;
        white-space: nowrap;
    }
    
    .apple-menu {
        padding: 0 6px;
        font-size: 14px;
    }
    
    .menu-dropdown {
        position: fixed;
        left: 4px;
        right: 4px;
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .menu-dropdown-item {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .dj-console {
        margin-top: 24px;
    }
    
    /* Console header */
    .console-header {
        height: 18px;
        padding: 1px 4px;
    }
    
    .console-header h1 {
        font-size: 9px;
    }
    
    /* SIDE BY SIDE DECKS */
    .console-main {
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        padding: 2px;
    }
    
    /* Deck styling - compact */
    .deck {
        padding: 4px;
        margin: 1px;
    }
    
    .deck-header {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-bottom: 2px;
        margin-bottom: 2px;
    }
    
    .deck-label {
        font-size: 9px;
    }
    
    .track-info {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    
    .track-name {
        font-size: 8px;
        max-width: 100%;
        text-align: center;
    }
    
    .track-time {
        font-size: 11px;
    }
    
    .bpm-display {
        font-size: 8px;
    }
    
    /* Larger turntables on mobile */
    .turntable-container {
        width: 140px;
        height: 130px;
        margin: 0 auto 4px;
    }
    
    .turntable {
        width: 125px;
        height: 125px;
    }
    
    .platter {
        width: 115px;
        height: 115px;
    }
    
    .vinyl {
        width: 108px !important;
        height: 108px !important;
    }
    
    .spindle {
        width: 20px;
        height: 20px;
    }
    
    /* Hide tonearm on mobile - too small */
    .tonearm-mount {
        display: none;
    }
    
    /* Compact deck controls */
    .deck-controls {
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    
    /* Hide pitch control on mobile */
    .pitch-control {
        display: none;
    }
    
    /* Transport controls - minimal */
    .transport-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px;
    }
    
    .transport-controls button {
        width: 36px;
        height: 28px;
        font-size: 8px;
        padding: 2px;
    }
    
    /* Hide REV and SLIP on mobile */
    .btn-mode {
        display: none !important;
    }
    
    /* Hide loop controls on mobile */
    .loop-controls {
        display: none;
    }
    
    /* Hide beat jump on mobile */
    .beat-jump-controls {
        display: none;
    }
    
    /* Compact waveform */
    .waveform-container {
        height: 24px;
        margin-bottom: 3px;
    }
    
    /* Compact load controls */
    .load-controls {
        flex-direction: column;
        gap: 3px;
    }
    
    .btn-load {
        padding: 6px 8px;
        font-size: 8px;
    }
    
    /* Mixer section - horizontal compact bar */
    .mixer {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 4px;
        justify-content: center;
        align-items: center;
    }
    
    .channel {
        flex-direction: row;
        gap: 4px;
    }
    
    /* Simplified EQ - just show knobs inline */
    .eq-section {
        flex-direction: row;
        gap: 2px;
        padding: 2px;
    }
    
    .eq-knob {
        gap: 1px;
    }
    
    .eq-knob label {
        font-size: 6px;
    }
    
    input.knob {
        width: 20px;
        height: 20px;
    }
    
    /* Hide channel strip faders, just show crossfader */
    .channel-strip {
        display: none;
    }
    
    .crossfader-section {
        flex: 1;
        max-width: 150px;
        border: none;
        margin: 0;
        padding: 4px;
    }
    
    .effects-sends {
        display: none;
    }
    
    .crossfader-container label {
        font-size: 10px;
    }
    
    #crossfader {
        height: 24px;
    }
    
    #crossfader::-webkit-slider-thumb {
        width: 30px;
        height: 28px;
    }
    
    /* Hide effects section on mobile */
    .effects-section {
        display: none;
    }
    
    .mac-window-titlebar {
        cursor: default;
    }
    
    .mac-window-resize {
        display: none;
    }
}

/* Small Mobile Breakpoint (480px) - Extra compact */
@media (max-width: 480px) {
    /* Even more compact menu */
    .mac-menubar {
        height: 20px;
    }
    
    .menu-item {
        padding: 2px 5px;
        font-size: 9px;
    }
    
    /* Hide some menu items on very small screens */
    .menu-item[data-menu="edit"],
    .menu-item[data-menu="windows"] {
        display: none;
    }
    
    .dj-console {
        margin-top: 22px;
    }
    
    .console-header {
        height: 16px;
    }
    
    .console-header h1 {
        font-size: 8px;
        letter-spacing: 0;
    }
    
    /* Slightly smaller turntables for very small screens */
    .turntable-container {
        width: 115px;
        height: 110px;
    }
    
    .turntable {
        width: 100px;
        height: 100px;
    }
    
    .platter {
        width: 90px;
        height: 90px;
    }
    
    .vinyl {
        width: 85px !important;
        height: 85px !important;
    }
    
    .spindle {
        width: 16px;
        height: 16px;
    }
    
    /* Transport - just CUE, PLAY, SYNC */
    .transport-controls button {
        width: 32px;
        height: 24px;
        font-size: 7px;
    }
    
    /* Waveform */
    .waveform-container {
        height: 20px;
    }
    
    /* Load controls */
    .btn-load {
        padding: 5px 6px;
        font-size: 7px;
    }
    
    /* Mixer even more compact */
    .eq-section {
        display: none;
    }
    
    .crossfader-section {
        max-width: 120px;
    }
    
    .crossfader-container label {
        font-size: 9px;
    }
    
    /* Sample pads */
    .sample-pad {
        min-width: 35px;
        min-height: 35px;
    }
    
    .pad-label {
        font-size: 6px;
    }
    
    .pad-key {
        font-size: 8px;
        padding: 0 2px;
    }
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
    /* Larger touch targets for sliders */
    input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }
    
    input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
    
    /* Bigger buttons */
    button {
        min-height: 32px;
    }
    
    select {
        min-height: 28px;
        font-size: 14px;
    }
    
    /* Prevent zooming on input focus */
    input, select, textarea {
        font-size: 16px;
    }
    
    /* Disable vinyl scratch on touch (too finicky) */
    .vinyl {
        touch-action: none;
    }
}

/* Landscape mobile - side by side decks */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .dj-console {
        margin-top: 22px;
    }
    
    .console-main {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Smaller turntables in landscape */
    .turntable-container {
        width: 140px;
        height: 130px;
    }
    
    .turntable {
        width: 120px;
        height: 120px;
    }
    
    .platter {
        width: 100px;
        height: 100px;
    }
    
    .vinyl {
        width: 90px !important;
        height: 90px !important;
    }
    
    .tonearm-mount {
        right: -5px;
        top: 5px;
        width: 35px;
        height: 35px;
    }
    
    .tonearm {
        width: 35px;
        height: 35px;
        transform-origin: 17.5px 17.5px;
    }
    
    .tonearm-base {
        width: 25px;
        height: 25px;
        top: 5px;
        left: 5px;
    }
    
    .tonearm-arm {
        width: 65px;
        height: 3px;
        top: 14px;
        left: 17.5px;
    }
    
    .tonearm-head {
        width: 12px;
        height: 8px;
        top: -2.5px;
    }
    
    /* Hide some controls in landscape mobile */
    .beat-jump-controls {
        display: none;
    }
    
    /* Compact mixer */
    .mixer {
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 4px;
        gap: 8px;
    }
    
    .channel {
        flex-direction: row;
    }
    
    .eq-section {
        flex-direction: column;
        gap: 2px;
        padding: 2px;
    }
    
    .eq-knob label {
        font-size: 7px;
    }
    
    input.knob {
        width: 20px;
        height: 20px;
    }
    
    .crossfader-section {
        padding: 4px;
        margin: 0 4px;
        border-left: 1px solid var(--mac-black);
        border-right: 1px solid var(--mac-black);
        border-top: none;
        border-bottom: none;
    }
    
    /* Hide effects in landscape mobile */
    .effects-section {
        display: none;
    }
}

/* About Window */
.about-window {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: auto;
    z-index: 250;
}

.about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    gap: 8px;
}

.about-icon {
    margin-bottom: 8px;
}

.about-icon svg {
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3));
}

.about-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 1px;
}

.about-version {
    font-size: 11px;
    margin: 0;
    color: var(--mac-dark);
}

.about-copyright {
    font-size: 10px;
    margin: 0;
    color: var(--mac-medium);
}

.about-description {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mac-medium);
}

.about-description p {
    font-size: 10px;
    margin: 4px 0;
    line-height: 1.4;
}

.about-credits {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mac-medium);
}

.about-credits p {
    font-size: 9px;
    margin: 0;
    color: var(--mac-medium);
    font-style: italic;
}

/* Help Window */
.help-window {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 500px;
    z-index: 200;
}

.help-content {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    height: calc(100% - 24px);
    overflow: hidden;
}

.help-sidebar {
    width: 150px;
    background: var(--mac-light);
    border-right: 2px solid var(--mac-black);
    padding: 8px 0;
    flex-shrink: 0;
    overflow-y: auto;
}

.help-nav-item {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid var(--mac-medium);
}

.help-nav-item:hover {
    background: var(--mac-white);
}

.help-nav-item.active {
    background: var(--mac-dark);
    color: var(--mac-white);
}

.help-main {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: var(--mac-white);
}

.help-section {
    display: none;
}

.help-section.active {
    display: block;
}

.help-section h2 {
    font-size: 16px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mac-black);
}

.help-section h3 {
    font-size: 12px;
    margin: 16px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.help-section p {
    font-size: 11px;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.help-section ul,
.help-section ol {
    font-size: 11px;
    line-height: 1.6;
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.help-section li {
    margin-bottom: 4px;
}

.help-section strong {
    font-weight: bold;
}

.shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: 8px 0;
}

.shortcuts-table th,
.shortcuts-table td {
    padding: 6px 10px;
    text-align: left;
    border: 1px solid var(--mac-black);
}

.shortcuts-table th {
    background: var(--mac-light);
    font-weight: bold;
}

.shortcuts-table td:first-child {
    width: 80px;
    text-align: center;
}

kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    background: var(--mac-light);
    border: 1px solid var(--mac-black);
    border-radius: 3px;
    box-shadow: 1px 1px 0 var(--mac-dark);
}

/* Help window responsive */
@media (max-width: 768px) {
    .help-window {
        width: 95%;
        height: 80%;
        left: 2.5%;
        top: 10%;
        transform: none;
    }
    
    .help-sidebar {
        width: 120px;
    }
    
    .help-nav-item {
        font-size: 10px;
        padding: 5px 8px;
    }
}

/* Animations */
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vinyl.spinning {
    animation: spin 1.8s linear infinite;
}

/* No fancy glow animations for Mac style */
@keyframes playGlow {
    0%, 100% { }
}

@keyframes titlePulse {
    0%, 100% { }
}

/* Custom scrollbar - Mac style */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: var(--mac-light);
    border: 1px solid var(--mac-black);
}

::-webkit-scrollbar-thumb {
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mac-light);
}

/* Selection */
::selection {
    background: var(--mac-black);
    color: var(--mac-white);
}