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

:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --background: #0f0f23;
    --surface: #1a1a2e;
    --surface-light: #25253e;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b8;
    --accent: #f093fb;
    --success: #4ade80;
    --warning: #fb923c;
    --track1-color: #3b82f6;
    --track2-color: #ec4899;
    --shadow: rgba(0, 0, 0, 0.3);
    /* Custom viewport height for mobile browsers (fixes address bar issues) */
    --vh: 1vh;
    /* Safe area insets for iPhone notch/home indicator */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

@supports (height: 100svh) {
    body {
        min-height: 100svh;
        height: 100svh;
    }
}

.container {
    width: 100%;
    max-width: 500px;
    height: 100%;
    min-height: 100%;
    min-height: 100dvh;
    background: var(--surface);
    border-radius: 0;
    box-shadow: 0 20px 60px var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@supports (height: 100svh) {
    .container {
        min-height: 100svh;
    }
}

header {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    flex-shrink: 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.header-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.header-text {
    flex: 1;
    text-align: left;
    min-width: 0;
}

header h1 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.settings-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--surface-light);
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.settings-btn:hover,
.settings-btn:active {
    background: var(--primary-color);
    transform: scale(1.05);
}

.settings-btn svg {
    width: 20px;
    height: 20px;
}

main {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--background);
}

.player-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Scrollable Content Area */
.player-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Fixed Controls Section */
.player-controls-fixed {
    flex-shrink: 0;
    background: linear-gradient(to bottom, rgba(15, 52, 96, 0.95) 0%, var(--surface) 10%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px;
    padding-top: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Scrollbar Styling */
main::-webkit-scrollbar,
.player-content::-webkit-scrollbar {
    width: 6px;
}

main::-webkit-scrollbar-track,
.player-content::-webkit-scrollbar-track {
    background: transparent;
}

main::-webkit-scrollbar-thumb,
.player-content::-webkit-scrollbar-thumb {
    background: var(--surface-light);
    border-radius: 3px;
}

main::-webkit-scrollbar-thumb:hover,
.player-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* File Selection */
.file-section {
    text-align: center;
}

/* Dual File Inputs */
.dual-file-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.file-input-wrapper {
    position: relative;
}

#fileInput1,
#fileInput2 {
    display: none;
}

.file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: var(--surface-light);
    border: 2px dashed var(--primary-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 180px;
}

.file-label:hover,
.file-label:active {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.track1-label {
    border-color: var(--track1-color);
}

.track1-label:hover,
.track1-label:active {
    background: rgba(59, 130, 246, 0.2);
}

.track2-label {
    border-color: var(--track2-color);
}

.track2-label:hover,
.track2-label:active {
    background: rgba(236, 72, 153, 0.2);
}

.file-label .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.track1-label .icon {
    color: var(--track1-color);
}

.track2-label .icon {
    color: var(--track2-color);
}

.file-label:hover .icon {
    color: var(--text-primary);
}

.label-text {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.label-hint {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.file-selected-indicator {
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--success);
    color: var(--background);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    animation: fadeInScale 0.3s ease;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.file-label.selected {
    border-color: var(--success);
    background: rgba(74, 222, 128, 0.1);
}

@keyframes pulse {
    0%, 100% {
        border-color: var(--warning);
        box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4);
    }
    50% {
        border-color: var(--accent);
        box-shadow: 0 0 0 8px rgba(251, 146, 60, 0);
    }
}

/* Player Section */
.player-section {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Waveform Display */
.waveform-display {
    padding: 8px;
    background: var(--surface-light);
    border-radius: 10px;
    margin-bottom: 0;
    border-left: 4px solid rgba(255, 255, 255, 0.5);
    border-right: 4px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 200px;
    overflow: hidden;
    box-shadow: inset -2px 0 10px rgba(255, 255, 255, 0.1), 
                inset 2px 0 10px rgba(255, 255, 255, 0.1);
    position: relative;
}

/* เมื่อซ่อน Waveform ให้แสดงโลโก้เป็นพื้นหลัง */
.waveform-display.waveform-hidden {
    background-image: url('../Logo/WaveformLogo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--surface-light);
    opacity: 0.3;
}

.waveform-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.waveform-title {
    display: flex;
    align-items: center;
    gap: 8px;
}


.waveform-lyrics {
    min-height: 24px;
    margin-top: 8px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    flex: 0 0 auto; /* ไม่ขยายตัว */
    white-space: nowrap; /* ข้อความบรรทัดเดียว */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.waveform-header svg {
    color: var(--accent);
}

.waveform-canvas {
    background: var(--background);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 120px;
    overflow: hidden;
}

.waveform-logo {
    max-width: 120px;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.6;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Dual Track Display */
.track-display {
    padding: 6px 8px;
    background: var(--surface-light);
    border-radius: 10px;
    margin-bottom: 0;
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.track-display.track1 {
    border-left-color: var(--track1-color);
    padding-bottom: 2px; /* ลด padding-bottom เพื่อให้ INS label ชิดขอบด้านล่าง */
}

.track-display.track2 {
    border-left-color: var(--track2-color);
    position: relative;
    padding-top: 2px; /* ลด padding-top เพื่อให้ VOC label ชิดขอบด้านบน */
}

/* Sync Seek Buttons - ดูเหมือนเป็นปุ่มเดียวกัน */
.sync-seek-btn {
    padding: 8px 16px;
    border: 2px solid var(--primary-color);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
}

.sync-seek-top {
    border-radius: 8px 8px 0 0;
    border-bottom: none; /* ลบเส้นขอบด้านล่างเพื่อให้ติดกับปุ่มด้านล่าง */
    margin-bottom: 0;
    margin-top: 4px; /* Track 1 button อยู่ด้านล่างของ track-display */
}

/* Track 1: sync-seek button อยู่ใน track-header แล้ว */
.track1 .sync-seek-top {
    margin-top: 0; /* ไม่ต้องมี margin เพราะอยู่ใน track-header แล้ว */
    margin-bottom: 0;
    border-radius: 8px 8px 0 0; /* มนเฉพาะมุมบนซ้ายและขวา */
    border: 2px solid var(--track1-color);
    border-bottom: none; /* เอาเส้นขอบล่างออก */
}

/* Track 2: sync-seek button อยู่ใน track-header แล้ว */
.track2 .sync-seek-bottom {
    margin-top: 0; /* ไม่ต้องมี margin เพราะอยู่ใน track-header แล้ว */
    margin-bottom: 0;
    border-radius: 0 0 8px 8px; /* มนเฉพาะมุมล่างซ้ายและขวา */
    border: 2px solid var(--track2-color);
    border-top: none; /* เอาเส้นขอบด้านบนออก */
}

/* Track 1 button: เมื่ออยู่ใน track-header ให้ width fit-content */
.track1 .track-header .sync-seek-btn {
    width: fit-content;
    margin: 0; /* ไม่ต้องมี margin เพราะอยู่ใน flex container แล้ว */
}

/* Track 2 button: เมื่ออยู่ใน track-header ให้ width fit-content */
.track2 .track-header .sync-seek-btn {
    width: fit-content;
    margin: 0; /* ไม่ต้องมี margin เพราะอยู่ใน flex container แล้ว */
}

.sync-seek-btn:hover {
    background: var(--surface-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.sync-seek-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.2);
}

.sync-seek-time {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Track 1 sync button styling */
.track1 .sync-seek-btn {
    border-color: var(--track1-color);
}

.track1 .sync-seek-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Track 2 sync button styling */
.track2 .sync-seek-btn {
    border-color: var(--track2-color);
}

.track2 .sync-seek-btn:hover {
    background: rgba(236, 72, 153, 0.1);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

.track-display.muted {
    opacity: 0.5;
}

.track-display.solo-active {
    border-left-width: 6px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* Row 1: Badge + Time + Solo Button */
.track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}

/* Track 2: ให้ VOC label ชิดขอบด้านบน */
.track2 .track-header {
    margin-top: 0;
    padding-top: 0; /* ลด padding-top เพื่อชิดขอบด้านบน */
    justify-content: space-between; /* กระจาย VOC badge, sync-seek button, และ SOLO 2 */
    align-items: center; /* จัดให้อยู่บรรทัดเดียวกัน */
}

/* Track 1: ให้ INS label ชิดขอบด้านล่าง */
.track1 .track-header {
    margin-top: 4px; /* เพิ่ม margin-top เล็กน้อยเพื่อให้ห่างจาก track-details */
    margin-bottom: 0;
    padding-bottom: 0; /* ลด padding-bottom เพื่อชิดขอบด้านล่าง */
    justify-content: space-between; /* กระจาย INS badge, sync-seek button, และ SOLO 1 */
    align-items: center; /* จัดให้อยู่บรรทัดเดียวกัน */
}

.track-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    min-width: 35px;
    text-align: center;
}

/* Row 2: Title + Volume Control */
.track-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.track-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    background: var(--primary-color);
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.track-badge svg {
    flex-shrink: 0;
}

.track1 .track-badge {
    background: var(--track1-color);
}

.track2 .track-badge {
    background: var(--track2-color);
}

.solo-btn {
    padding: 6px 14px;
    background: var(--background);
    border: 2px solid var(--surface-light);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.solo-btn:hover,
.solo-btn:active {
    border-color: var(--warning);
    color: var(--warning);
}

.solo-btn.active {
    background: var(--warning);
    border-color: var(--warning);
    color: var(--background);
}

.track-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Row 3: File Details */
.track-details {
    font-size: 10px;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Volume Control in Track Display */
.volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-shrink: 0;
    width: 200px; /* เพิ่มจาก 140px เป็น 200px */
}

.track-display .volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 5px; /* เพิ่มจาก 4px เป็น 5px */
    background: var(--background);
    border-radius: 3px;
    outline: none;
    min-width: 0;
}

.track-display .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; /* เพิ่มจาก 12px เป็น 20px */
    height: 20px; /* เพิ่มจาก 12px เป็น 20px */
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.track1 .volume-slider::-webkit-slider-thumb {
    background: var(--track1-color);
}

.track2 .volume-slider::-webkit-slider-thumb {
    background: var(--track2-color);
}

.track-display .volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2); /* เพิ่มจาก 1.15 เป็น 1.2 */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.track-display .volume-slider::-moz-range-thumb {
    width: 20px; /* เพิ่มจาก 12px เป็น 20px */
    height: 20px; /* เพิ่มจาก 12px เป็น 20px */
    background: var(--primary-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.track1 .volume-slider::-moz-range-thumb {
    background: var(--track1-color);
}

.track2 .volume-slider::-moz-range-thumb {
    background: var(--track2-color);
}

.track-display .volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2); /* เพิ่มจาก 1.15 เป็น 1.2 */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.volume-value {
    font-size: 10px;
    color: var(--text-secondary);
    min-width: 35px;
    text-align: right;
    flex-shrink: 0;
}

/* Progress Bar - Fixed in Controls */
.progress-section {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.progress-bar {
    position: relative;
    height: 6px;
    background: var(--surface-light);
    border-radius: 3px;
    margin-bottom: 12px;
    cursor: pointer;
    touch-action: none;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent) 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
}

.progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    left: 0%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.progress-bar:hover .progress-handle,
.progress-bar:active .progress-handle {
    opacity: 1;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Controls */
.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.control-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.control-btn.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.6);
}

.control-btn svg {
    width: 20px;
    height: 20px;
}

.control-btn.disabled {
    opacity: 0.45;
}

.control-btn:hover,
.control-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.control-btn svg {
    width: 20px;
    height: 20px;
}

.play-btn {
    width: 64px;
    height: 64px;
    background: var(--primary-color);
}

.play-btn:hover,
.play-btn:active {
    background: var(--secondary-color);
    transform: scale(1.1);
}

.play-btn svg {
    width: 32px;
    height: 32px;
}

/* Export button - สีเขียว */
#exportBtn {
    background: rgba(34, 197, 94, 0.2);
}

#exportBtn:hover,
#exportBtn:active {
    background: #22c55e;
}

/* Import button - สีน้ำเงิน */
#importBtn {
    background: rgba(59, 130, 246, 0.2);
}

#importBtn:hover,
#importBtn:active {
    background: #3b82f6;
}

/* Record button - สีแดง */
#recordBtn {
    background: rgba(239, 68, 68, 0.2);
}

#recordBtn:hover,
#recordBtn:active {
    background: #ef4444;
}

#recordBtn.recording {
    background: #ef4444;
    animation: record-pulse 1.5s ease-in-out infinite;
}

@keyframes record-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

/* Auto Play button - สีฟ้า */
#autoPlayBtn {
    background: rgba(59, 130, 246, 0.2);
}

#autoPlayBtn:hover,
#autoPlayBtn:active {
    background: var(--track1-color);
}

#autoPlayBtn.active {
    background: var(--track1-color);
    animation: auto-pulse 2s ease-in-out infinite;
}

@keyframes auto-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}


/* Master Volume Standalone (moved outside the box) */
.master-volume-standalone {
    padding: 10px 12px;
    background: var(--surface);
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.master-volume-icon {
    flex-shrink: 0;
    color: var(--text-primary);
    opacity: 0.8;
}

.master-volume-standalone .master-volume-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.master-volume-standalone .volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--background);
    border-radius: 3px;
    outline: none;
}

.master-volume-standalone .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.master-volume-standalone .volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.master-volume-standalone .volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.master-volume-standalone .volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

.master-volume-standalone .volume-value {
    font-size: 14px;
    color: var(--text-primary);
    min-width: 45px;
    text-align: right;
    font-weight: 600;
}

/* Master Volume Section (now contains Vocal Controls) */
.master-volume-section {
    padding: 12px;
    background: var(--surface-light);
    border-radius: 10px;
    margin-bottom: 6px;
    border: 2px solid var(--primary-color);
    flex-shrink: 0;
    min-height: 90px;
}

.master-volume-wrapper {
    display: grid;
    grid-template-columns: 75% 25%;
    gap: 12px;
    height: 100%;
    align-items: center;
}

.master-volume-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    justify-content: center;
}

.master-volume-top {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.master-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.master-label svg {
    flex-shrink: 0;
}

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

.magic-button {
    width: 100%;
    aspect-ratio: 1;
    padding: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    flex-shrink: 0;
}

.magic-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.magic-button.pressed {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.6), 
                inset 0 0 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, var(--warning) 0%, var(--accent) 100%);
}

.magic-button.pressed::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    border: 3px solid var(--warning);
    animation: pulse-border 1s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.magic-button-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: transform 0.2s ease;
}

.magic-button.pressed .magic-button-img {
    transform: scale(0.9);
}

/* Master Volume Slider (larger) */
.master-volume-control .volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--background);
    border-radius: 3px;
    outline: none;
}

.master-volume-control .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.master-volume-control .volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.master-volume-control .volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.master-volume-control .volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

.master-volume-control .volume-value {
    font-size: 14px;
    color: var(--text-primary);
    min-width: 45px;
    text-align: right;
    font-weight: 600;
}

/* Vocal Control Buttons */
.vocal-control-buttons {
    display: flex;
    gap: 6px;
    flex: 1;
}

.vocal-control-btn {
    flex: 1;
    padding: 10px 8px;
    border: 2px solid var(--surface-light);
    background: var(--background);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.vocal-control-btn:hover {
    background: var(--surface-light);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.vocal-control-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
}

.vocal-control-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.vocal-control-btn.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
}

/* Solo Buttons Row (inside Master Volume) */
.solo-buttons-row {
    display: flex;
    gap: 6px;
    flex: 1;
    margin-top: 2px;
}

.solo-big-btn {
    flex: 1;
    padding: 8px 10px;
    border: 2px solid var(--surface-light);
    background: var(--background);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.solo-big-btn svg {
    flex-shrink: 0;
}

.solo1-btn {
    border-color: var(--track1-color);
}

.solo1-btn:hover,
.solo1-btn:active {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--track1-color);
}

.solo1-btn.active {
    background: var(--track1-color);
    border-color: var(--track1-color);
    color: var(--background);
}

.solo2-btn {
    border-color: var(--track2-color);
}

.solo2-btn:hover,
.solo2-btn:active {
    background: rgba(236, 72, 153, 0.2);
    border-color: var(--track2-color);
}

.solo2-btn.active {
    background: var(--track2-color);
    border-color: var(--track2-color);
    color: var(--background);
}

/* Action Buttons - Full Width Row */
.action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.playlist-btn,
.change-file-btn,
.waveform-btn {
    flex: 1;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.playlist-btn {
    background: rgba(236, 72, 153, 0.2);
    color: var(--track2-color);
}

.playlist-btn:hover,
.playlist-btn:active {
    background: rgba(236, 72, 153, 0.4);
    transform: scale(1.05);
}

.change-file-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.change-file-btn:hover,
.change-file-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.waveform-btn {
    background: rgba(255, 215, 0, 0.2);
    color: var(--accent);
}

.waveform-btn:hover,
.waveform-btn:active {
    background: rgba(255, 215, 0, 0.4);
    transform: scale(1.05);
}

.playlist-btn svg,
.change-file-btn svg,
.waveform-btn svg {
    width: 20px;
    height: 20px;
}

.playlist-btn .btn-text,
.change-file-btn .btn-text,
.waveform-btn .btn-text {
    display: none; /* Hidden in mobile-first design */
}

/* Waveform Display Styles */
.waveform-display {
    margin: 20px 0;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 20px;
}

.waveform-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.waveform-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #33ccff;
}

.waveform-controls {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 20;
}

.waveform-control-btn {
    background: var(--primary-color);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.waveform-control-btn:hover {
    background: var(--secondary-color);
    transform: translateY(-1px);
}

.waveform-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Waveform Logo Placeholder - แสดงเมื่อ waveform ว่าง (ยังไม่มีการเล่น) */
.waveform-logo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('Logo/WaveformLogo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
}

/* ซ่อน logo placeholder เมื่อ waveform มีข้อมูล */
.waveform-container.waveform-loaded .waveform-logo-placeholder {
    display: none;
}

/* Landscape layout: expand waveform to use full horizontal space without hiding DOM */
/* Apply on mobile devices (including emulators) */
@media screen and (max-width: 768px) {
    body.landscape .waveform-container {
        position: fixed;
        left: 0;
        right: 0;
        top: env(safe-area-inset-top, 0);
        bottom: 90px; /* leave room for controls */
        max-width: none;
        width: 100%;
        margin: 0;
        z-index: 9000;
        display: block !important; /* ensure visible during rotation */
    }

    body.landscape #waveform {
        height: 100%;
    }
}

/* Mobile emulators (large screen but mobile user agent) */
@media screen and (min-width: 769px) {
    /* Check if it's a mobile emulator by detecting mobile user agent */
    body.landscape .waveform-container {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 90px; /* leave room for controls */
        max-width: none;
        width: 100%;
        margin: 0;
        z-index: 9000;
        display: block !important;
    }

    body.landscape #waveform {
        height: calc(100vh - 90px);
    }
}

/* Pure Desktop (no mobile user agent): Disable landscape mode */
@media screen and (min-width: 769px) and not (pointer: coarse) {
    body.landscape .waveform-container {
        /* Reset any landscape styles on pure desktop */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        max-width: 1000px !important;
        width: 100% !important;
        margin: 0 auto !important;
        z-index: auto !important;
        display: block !important;
    }
    
    body.landscape #waveform {
        height: 200px !important;
    }
}

/* Desktop Testing Mode - Override pure desktop styles when testing */
body.landscape .waveform-container {
    /* This will be overridden by the media queries above for pure desktop */
    /* But will work for testing mode */
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 90px;
    max-width: none;
    width: 100%;
    margin: 0;
    z-index: 9000;
    display: block !important;
}

body.landscape #waveform {
    height: calc(100vh - 90px);
}

/* Landscape Mode Fullscreen Layout */
body.landscape .landscape-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Waveform Section */
body.landscape .landscape-waveform-section {
    flex: 1;
    position: relative;
    background: #222;
    margin: 20px;
    border-radius: 12px;
    overflow: visible; /* เปลี่ยนเป็น visible เพื่อให้ปุ่ม exit แสดง */
    min-height: 300px;
    max-height: calc(100vh - 200px); /* เพิ่มพื้นที่สำหรับ controls */
}

/* Exit FullScreen Button - Top Right */
body.landscape .landscape-exit-fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(248, 113, 113, 0.2);
    border: 2px solid #f87171;
    border-radius: 50%;
    color: #ffe5e5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

body.landscape .landscape-exit-fullscreen-btn:hover {
    background: rgba(248, 113, 113, 0.35);
    border-color: #ef4444;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.4);
}

body.landscape .landscape-exit-fullscreen-btn:active {
    transform: scale(0.95);
}

body.landscape #landscapeWaveform {
    width: 100%;
    height: 100%;
    min-height: 200px;
}

/* ปรับ waveform-container ในหน้าแนวนอน */
body.landscape .waveform-container {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    display: block !important;
    overflow: hidden !important; /* ป้องกันส่วนเกิน */
    box-sizing: border-box !important; /* รวม padding/border ในขนาด */
}

/* ปรับ lyrics-overlay ในหน้าแนวนอน */
body.landscape .lyrics-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ปรับ zoom-controls-overlay ในหน้าแนวนอน */
body.landscape .zoom-controls-overlay {
    position: absolute !important;
    top: 10px !important;
    right: 56px !important; /* เพิ่มระยะห่างให้ exit button */
    z-index: 20 !important;
    max-width: calc(100% - 76px) !important; /* ปรับ max-width ให้รองรับ exit button */
    box-sizing: border-box !important;
}



/* Control Buttons Section */
body.landscape .landscape-controls-section {
    height: 180px; /* เพิ่มความสูงมากขึ้น */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px; /* เพิ่ม padding มากขึ้น */
    background: rgba(0, 0, 0, 0.2); /* เพิ่มพื้นหลังให้ชัดเจนขึ้น */
    border-top: 2px solid rgba(255, 255, 255, 0.2); /* เพิ่มเส้นแบ่งให้ชัดเจนขึ้น */
    flex-shrink: 0; /* ป้องกันการหดตัว */
    margin-top: 10px; /* เพิ่ม margin บน */
}

/* Left Controls */
body.landscape .landscape-controls-left {
    display: flex;
    gap: 25px; /* เพิ่ม gap */
    align-items: center;
    flex-shrink: 0; /* ป้องกันการหดตัว */
}

body.landscape .landscape-control-btn {
    width: 80px; /* เพิ่มขนาดเล็กน้อย */
    height: 80px; /* เพิ่มขนาดเล็กน้อย */
    background: linear-gradient(135deg, #1a1a2e 0%, #25253e 100%);
    border: 2px solid #667eea;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Vocal Control Buttons in Landscape Layout */
body.landscape .landscape-control-btn.vocal-control-btn {
    width: 80px;
    height: 80px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

body.landscape .landscape-control-btn.vocal-control-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}

body.landscape .landscape-control-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.landscape .landscape-control-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.landscape .landscape-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #333;
    border-color: #555;
}

body.landscape .landscape-control-btn:disabled:hover {
    background: #333;
    border-color: #555;
    transform: none;
    box-shadow: none;
}

body.landscape .landscape-control-btn.active {
    background: linear-gradient(135deg, var(--track1-color), #764ba2);
    border-color: var(--track1-color);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

body.landscape .landscape-control-btn.exit-btn {
    border-color: #f87171;
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.2), rgba(239, 68, 68, 0.3));
    color: #ffe5e5;
    width: auto;
    min-width: 80px;
    padding: 8px 12px;
    font-size: 11px;
}

body.landscape .landscape-control-btn.exit-btn:hover {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.35), rgba(239, 68, 68, 0.45));
}

/* Right Controls */
body.landscape .landscape-controls-right {
    display: flex;
    gap: 25px; /* เพิ่ม gap */
    align-items: center;
    flex-shrink: 0; /* ป้องกันการหดตัว */
}

body.landscape .landscape-solo-btn {
    width: 80px; /* เพิ่มขนาดเล็กน้อย */
    height: 80px; /* เพิ่มขนาดเล็กน้อย */
    background: linear-gradient(135deg, #1a1a2e 0%, #25253e 100%);
    border: 2px solid #ec4899;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}

body.landscape .landscape-solo-btn:hover {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.landscape .landscape-solo-btn.active {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    border-color: #ec4899;
    color: white;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
}

body.landscape .landscape-magic-btn {
    width: 80px; /* เพิ่มขนาดเล็กน้อย */
    height: 80px; /* เพิ่มขนาดเล็กน้อย */
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: 2px solid #f093fb;
    border-radius: 12px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}

body.landscape .landscape-magic-btn:hover {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.landscape .landscape-magic-btn.active {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    border-color: #ff6b6b;
    animation: magicPulse 2s infinite;
}

/* Landscape Mode Responsive */
@media screen and (max-height: 600px) {
    body.landscape .landscape-waveform-section {
        min-height: 200px;
        max-height: calc(100vh - 220px); /* เพิ่มพื้นที่สำหรับ controls */
    }
    
    body.landscape .landscape-controls-section {
        height: 160px; /* ลดความสูงเล็กน้อย */
        padding: 25px 30px;
        margin-top: 5px;
    }
    
    body.landscape .landscape-control-btn,
    body.landscape .landscape-solo-btn,
    body.landscape .landscape-magic-btn {
        width: 75px; /* ลดขนาดเล็กน้อย */
        height: 75px;
        font-size: 11px;
    }
    
    body.landscape .landscape-controls-left,
    body.landscape .landscape-controls-right {
        gap: 20px; /* ลด gap เล็กน้อย */
    }
}

@media screen and (max-width: 600px) {
    body.landscape .landscape-controls-section {
        padding: 25px 25px;
        margin-top: 5px;
    }
    
    body.landscape .landscape-control-btn,
    body.landscape .landscape-solo-btn,
    body.landscape .landscape-magic-btn {
        width: 70px; /* ลดขนาดเล็กน้อย */
        height: 70px;
        font-size: 10px;
    }
    
    body.landscape .landscape-controls-left,
    body.landscape .landscape-controls-right {
        gap: 18px; /* ลด gap เล็กน้อย */
    }
}

/* Hide original controls in landscape mode */
body.landscape .main-container {
    display: none;
}

body.landscape .container {
    display: none;
}

#waveform {
    width: 100%;
    height: 200px;
    background: #222;
    border-radius: 10px;
}

.lyrics-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 20%;
    pointer-events: none;
    z-index: 10;
}

.lyrics-line {
    font-size: 28px;
    line-height: 1.6;
    margin: 8px 0;
    transition: all 0.3s ease;
    opacity: 0.3;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
    font-weight: 600;
}

.lyrics-line.active {
    opacity: 1;
    color: #ff66cc;
    font-weight: bold;
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(255, 102, 204, 0.6),
                 2px 2px 8px rgba(0,0,0,0.9);
}

.lyrics-line.prev {
    opacity: 0.4;
    font-size: 22px;
    color: #888;
}

.lyrics-line.next {
    opacity: 0.6;
    color: #33ccff;
    font-size: 24px;
}

/* Zoom Controls Overlay - ใช้พื้นที่ของ Waveform */
.zoom-controls-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 12px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    z-index: 20;
}

.zoom-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.zoom-level {
    color: #33ccff;
    font-weight: bold;
    font-size: 12px;
    min-width: 40px;
    text-align: center;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .lyrics-overlay {
        padding-left: 15%;
    }
    
    .lyrics-line {
        font-size: 20px;
    }
    
    .lyrics-line.active {
        font-size: 24px;
    }
    
    .lyrics-line.prev {
        font-size: 16px;
    }
    
    .zoom-controls-overlay {
        top: 8px;
        right: 8px;
        padding: 4px 8px;
        gap: 6px;
    }
    
    .zoom-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    .zoom-level {
        font-size: 11px;
        min-width: 35px;
    }
}

/* Loading */
.loading {
    text-align: center;
    padding: 48px 24px;
}

.spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border: 4px solid var(--surface-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Footer */
footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    background: linear-gradient(180deg, rgba(15, 15, 35, 0.85) 0%, rgba(15, 15, 35, 1) 60%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    z-index: 50;
    margin-top: auto;
}

.info-text {
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.4px;
    margin: 0;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.modal-content {
    background: var(--surface);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    opacity: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--surface-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--surface-light);
    color: var(--text-primary);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.modal-close:hover,
.modal-close:active {
    background: var(--primary-color);
    transform: scale(1.1);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--surface-light);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Policy Modal Styles */
.policy-modal-content {
    max-width: 600px;
    max-height: 80vh;
}

.policy-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.policy-content {
    line-height: 1.6;
}

.policy-intro {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(240, 147, 251, 0.1);
    border-radius: 8px;
    border-left: 4px solid var(--accent);
}

.policy-section {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid var(--surface-light);
}

.policy-section h3 {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.policy-section p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
}

.policy-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.policy-accept-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.policy-accept-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.policy-accept-btn:active {
    transform: translateY(0);
}

/* Playlist Header Actions */
.playlist-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.playlist-browse-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid var(--surface-light);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.playlist-browse-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.playlist-browse-btn:active {
    transform: scale(0.95);
}

/* Playlist Controls Row */
.playlist-controls-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.playlist-control-btn {
    flex: 1;
    background: var(--surface-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.playlist-control-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}

/* Loop icon display */
.loop-icon-none, .loop-icon-all, .loop-icon-single {
    display: inline-block;
}

.hidden {
    display: none !important;
}

.playlist-control-btn.active {
    background: var(--accent);
    color: var(--background);
    border-color: var(--accent);
}

.playlist-control-btn svg {
    flex-shrink: 0;
}

/* Full Screen Mode Styles */
.fullscreen-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* Use custom --vh for accurate mobile viewport height */
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
    background: var(--background);
    z-index: 9999;
    flex-direction: column;
    /* Use safe area insets for iPhone notch/home indicator */
    padding: 16px 16px calc(20px + var(--safe-bottom));
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    padding-top: calc(16px + var(--safe-top));
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Fallback for browsers that support svh but not --vh */
@supports (height: 100svh) {
    .fullscreen-container {
        height: calc(var(--vh, 1vh) * 100);
        min-height: calc(var(--vh, 1vh) * 100);
    }
}

.fullscreen-waveform {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--surface-dark);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: visible;
}

/* Logo Overlay - Top Left */
.fullscreen-logo-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 80px;
    height: 80px;
    opacity: 0.7;
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    object-fit: contain;
    display: block !important;
    visibility: visible !important;
}

/* Adjust for safe area on mobile */
@supports (padding: max(0px)) {
    .fullscreen-logo-overlay {
        top: max(16px, env(safe-area-inset-top, 16px));
        left: max(16px, env(safe-area-inset-left, 16px));
    }
}

/* Ensure logo is visible when fullscreen container is shown */
.fullscreen-container:not([style*="display: none"]) .fullscreen-logo-overlay {
    display: block !important;
    visibility: visible !important;
}

.fullscreen-logo {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.waveform-placeholder {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}


.current-position-marker {
    position: absolute;
    left: 20%;
    top: 50%;
    width: 3px;
    height: 60px;
    background: var(--accent);
    border-radius: 2px;
    transform: translateY(-50%);
    box-shadow: 0 0 10px var(--accent);
}

.next-lyrical-marker {
    position: absolute;
    right: 20%;
    top: 50%;
    width: 3px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 2px;
    transform: translateY(-50%);
    opacity: 0.7;
}

.fullscreen-lyrics {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding: 12px 20px;
    background: var(--surface-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.fullscreen-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    gap: 8px;
    padding: 0 8px 0;
    flex-shrink: 0;
    min-height: 0;
    overflow: visible;
}

.fullscreen-controls-left {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.fullscreen-controls-right {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
    max-width: 100%;
    min-width: 0;
    width: auto;
}

/* Landscape mode: reduce button size and gap to prevent overflow */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .fullscreen-controls {
        gap: 6px;
        padding: 0 6px 0;
    }
    
    .fullscreen-controls-left,
    .fullscreen-controls-right {
        gap: 6px;
    }
    
    .fullscreen-control-btn {
        width: 52px;
        height: 52px;
        font-size: 9px;
        padding: 4px;
    }
    
    .fullscreen-control-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Very small landscape screens (e.g., iPhone in landscape) */
@media screen and (orientation: landscape) and (max-height: 400px) {
    .fullscreen-controls {
        gap: 4px;
        padding: 0 4px 0;
    }
    
    .fullscreen-controls-left,
    .fullscreen-controls-right {
        gap: 4px;
    }
    
    .fullscreen-control-btn {
        width: 44px;
        height: 44px;
        font-size: 8px;
        padding: 3px;
    }
    
    .fullscreen-control-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .fullscreen-lyrics {
        font-size: 14px;
        padding: 8px 12px;
        margin-bottom: 12px;
    }
}

.fullscreen-control-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--surface-light);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 4px;
    flex-shrink: 0;
    min-width: 0;
}

.fullscreen-control-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fullscreen-control-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.fullscreen-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--surface-dark);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.fullscreen-control-btn:disabled:hover {
    background: var(--surface-dark);
    border-color: var(--border-color);
    color: var(--text-secondary);
    transform: none;
    box-shadow: none;
}

.fullscreen-control-btn svg,
.fullscreen-control-btn img {
    flex-shrink: 0;
}

.fullscreen-control-btn.magic-btn {
    background: linear-gradient(135deg, var(--accent), var(--primary-color));
    border-color: var(--accent);
    color: white;
}

.fullscreen-control-btn.magic-btn:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--accent));
    transform: translateY(-2px) scale(1.05);
}

.fullscreen-control-btn.auto-btn {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--track1-color);
}

.fullscreen-control-btn.auto-btn.active {
    background: var(--track1-color);
    color: #fff;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

/* Vocal Control Buttons in FullScreen */
.fullscreen-control-btn.vocal-control-btn {
    min-width: 50px;
    width: auto;
    max-width: 60px;
    padding: 4px 6px;
    font-size: 8px;
    height: 52px;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.fullscreen-control-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.fullscreen-control-btn.active:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Vocal Control Buttons in FullScreen */
.fullscreen-control-btn.vocal-control-btn {
    width: 64px;
    height: 64px;
    padding: 4px;
    font-size: 10px;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
}

.fullscreen-control-btn.vocal-control-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

/* Full Screen Mode Body Override */
body.fullscreen-mode {
    overflow: hidden;
}

body.fullscreen-mode .main-container {
    display: none;
}


/* File Selection Dialog Styles */
.file-selection {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.file-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-input-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.file-input-group input[type="file"] {
    padding: 8px;
    border: 2px dashed var(--surface-light);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-input-group input[type="file"]:hover {
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.1);
}

.file-info {
    font-size: 12px;
    color: var(--success);
    font-weight: 500;
    min-height: 20px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
    background: var(--surface-light);
    color: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid var(--surface-light);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-color);
}


/* File Selection Modal - File Labels */
.file-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--surface-light);
    border: 3px solid var(--surface-light);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-label:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.file-label.selected {
    background: rgba(102, 126, 234, 0.25);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.4);
}

/* Icon Wrapper */
.file-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.file-label:hover .file-icon-wrapper {
    background: rgba(102, 126, 234, 0.3);
    transform: scale(1.1);
}

.file-label.selected .file-icon-wrapper {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

/* Track Icon (Piano/Microphone) */
.track-icon {
    width: 44px;
    height: 44px;
    color: var(--text-primary);
}

.file-label.selected .track-icon {
    color: white;
}

/* Lyrics Editor Modal */
.lyrics-modal-content {
    max-width: 480px;
}

.lyric-info {
    display: flex;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 12px;
}

.lyric-text-input-wrapper {
    width: 100%;
}

.lyric-textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #333);
    background: var(--surface, #1e1e1e);
    color: var(--text-primary, #fff);
    font-size: 14px;
    line-height: 1.6;
}

.lyrics-modal-footer,
.lyrics-time-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.modal-footer-left,
.modal-footer-right {
    display: flex;
    align-items: center;
}

.modal-footer-center {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.modal-nav-btn,
.modal-play-btn,
.modal-save-btn,
.modal-edit-time-btn,
.modal-delete-btn,
.modal-cancel-btn {
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background: var(--primary-color, #3f51b5);
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.modal-delete-btn {
    background: #d84315;
}

.modal-edit-time-btn {
    background: #009688;
}

.modal-cancel-btn {
    background: #616161;
}

.lyrics-time-modal-content {
    max-width: 320px;
}

.time-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.time-input-group input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #333);
    background: var(--surface, #1e1e1e);
    color: var(--text-primary, #fff);
}

/* Upload Icon */
.upload-icon {
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    margin: 8px 0;
}

.file-label.selected .upload-icon {
    color: var(--accent);
}

/* Text */
.file-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.track-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.file-label.selected .track-label {
    color: var(--accent);
}

.hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.file-selected-indicator {
    display: none;
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--accent);
    color: var(--background);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.file-label.selected .file-selected-indicator {
    display: block;
    animation: fadeInScale 0.3s ease;
}

/* Playlist Modal Specific */
.playlist-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.playlist-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.playlist-item {
    padding: 12px 16px;
    background: var(--surface-light);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.playlist-item:hover,
.playlist-item:active {
    background: var(--primary-color);
    transform: translateX(4px);
}

.playlist-item.active {
    background: var(--accent);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.playlist-item-number {
    width: 32px;
    height: 32px;
    background: var(--background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.playlist-item-info {
    flex: 1;
    min-width: 0;
}

.playlist-item-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item-artist {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item-time {
    font-size: 11px;
    color: var(--accent);
    margin-top: 2px;
    font-weight: 500;
}

.playlist-item-duration {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.playlist-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.playlist-action-btn {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.playlist-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
    transform: scale(1.1);
}

.playlist-action-btn.edit-btn:hover {
    border-color: #4CAF50;
}

.playlist-action-btn.delete-btn:hover {
    border-color: #f44336;
}

.playlist-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--surface-light);
}

.pagination-btn {
    padding: 10px 16px;
    background: var(--surface-light);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled),
.pagination-btn:active:not(:disabled) {
    background: var(--primary-color);
    transform: scale(1.05);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-info {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 600px) {
    .dual-file-inputs {
        grid-template-columns: 1fr;
    }
    
    .file-label {
        padding: 24px 16px;
        min-height: 140px;
    }
    
    .file-label .icon {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .container {
        border-radius: 0;
        min-height: 100vh;
    }

    .header-logo {
        width: 48px;
        height: 48px;
    }

    header h1 {
        font-size: 22px;
    }

    .subtitle {
        font-size: 11px;
    }

    .track-title {
        font-size: 14px;
    }

    .control-btn {
        width: 44px;
        height: 44px;
    }
    
    .control-btn svg {
        width: 18px;
        height: 18px;
    }

    .play-btn {
        width: 56px;
        height: 56px;
    }
    
    .play-btn svg {
        width: 24px;
        height: 24px;
    }
    
    .track-display {
        padding: 12px;
    }
    
    .master-volume-section {
        padding: 10px;
        min-height: 80px;
    }
    
    .master-volume-wrapper {
        grid-template-columns: 70% 30%;
        gap: 8px;
    }
    
    .magic-button {
        padding: 6px;
    }
    
    .solo-big-btn {
        padding: 6px 8px;
        font-size: 11px;
    }
    
    .action-buttons {
        gap: 12px;
    }
    
    .playlist-btn,
    .change-file-btn,
    .waveform-btn {
        height: 44px;
    }
    
    .playlist-btn svg,
    .change-file-btn svg,
    .waveform-btn svg {
        width: 24px;
        height: 24px;
    }
}

/* Full Screen Mode Enhancements */
#fullscreenWaveformDisplay {
    width: 100%;
    height: 100%;
    background: #222;
}

.fullscreen-lyrics-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    pointer-events: none;
}

.fullscreen-lyrics-line {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    margin: 10px 0;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.fullscreen-lyrics-line.active {
    opacity: 1;
    color: #ff66cc;
    text-shadow: 0 0 10px rgba(255, 102, 204, 0.5);
}

.fullscreen-lyrics-line.prev {
    opacity: 0.5;
    color: #33ccff;
}

.fullscreen-lyrics-line.next {
    opacity: 0.3;
    color: #fff;
}

.fullscreen-zoom-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 20;
}

.fullscreen-zoom-btn {
    width: 35px;
    height: 35px;
    border: 2px solid #33ccff;
    background: rgba(51, 204, 255, 0.1);
    color: #33ccff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-zoom-btn:hover {
    background: rgba(51, 204, 255, 0.3);
    transform: scale(1.1);
}

.fullscreen-zoom-level {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    min-width: 45px;
    text-align: center;
}

/* Full Screen Mobile Responsive */
@media (max-width: 768px) {
    .fullscreen-lyrics-line {
        font-size: 1.8rem;
    }
    
    .fullscreen-zoom-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    .fullscreen-zoom-level {
        font-size: 10px;
        min-width: 40px;
    }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
}

.settings-modal-content {
    max-width: 420px;
    width: 92%;
    padding: 0;
}

.settings-modal-body {
    padding: 20px 24px 12px;
    color: var(--text-primary);
}

.settings-modal-body h3 {
    font-size: 1rem;
    margin-bottom: 12px;
}

.favorite-summary {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.favorite-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
}

.favorite-label {
    color: var(--text-muted);
    min-width: 110px;
}

.favorite-value {
    flex: 1;
    text-align: right;
}

.favorite-empty {
    text-align: center;
    color: var(--text-muted);
    margin: 0;
}

.favorite-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 12px;
}

.settings-modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-action-btn {
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-action-btn.primary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
    color: #fff;
}

.settings-action-btn.primary:hover,
.settings-action-btn.primary:active {
    filter: brightness(1.05);
}

.settings-action-btn.danger {
    background: rgba(234, 102, 118, 0.15);
    color: #ff7b93;
}

.settings-action-btn.danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-action-btn.danger:not(:disabled):hover,
.settings-action-btn.danger:not(:disabled):active {
    background: rgba(234, 102, 118, 0.25);
}

.settings-action-btn.disabled {
    opacity: 0.6;
    cursor: wait;
}

.modal.show .modal-content {
    pointer-events: auto;
    opacity: 1;
    z-index: 1001;
}