/* =========================================
   MOBILE RESPONSIVE OVERRIDE (FINAL REFINED)
   ========================================= */

@media screen and (max-width: 768px) {

    body:not([data-mobile-chrome-ready="true"]) #mobile-header,
    body:not([data-mobile-chrome-ready="true"]) #mobile-drawer,
    body:not([data-mobile-chrome-ready="true"]) #drawer-backdrop,
    body:not([data-mobile-chrome-ready="true"]) #mini-player {
        display: none !important;
    }

    /* --- 0. MOBILE HEADER & DRAWER --- */
    #mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 50px !important;
        background: rgba(10, 10, 20, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 15px !important;
        z-index: 100000 !important;
        border-bottom: 2px solid var(--primary, #00ffcc) !important;
    }

    .hamburger-btn {
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: 2px solid var(--primary, #00ffcc) !important;
        border-radius: 8px !important;
        color: var(--primary, #00ffcc) !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }

    .hamburger-btn:active {
        background: rgba(0, 255, 204, 0.2) !important;
        transform: scale(0.95) !important;
    }

    .mobile-brand {
        margin-left: 15px !important;
        font-family: var(--font-heading, 'Orbitron', sans-serif) !important;
        font-size: 1.2rem !important;
        color: #fff !important;
        text-shadow: 0 0 10px var(--primary, #00ffcc) !important;
    }

    /* Side Drawer */
    .mobile-drawer {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 260px !important;
        height: 100vh !important;
        background: linear-gradient(180deg, #0a0a15 0%, #151525 100%) !important;
        z-index: 100001 !important;
        transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        box-shadow: 5px 0 30px rgba(0, 0, 0, 0.8) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mobile-drawer.open {
        left: 0 !important;
    }

    .drawer-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        background: rgba(0, 255, 204, 0.1) !important;
        border-bottom: 1px solid rgba(0, 255, 204, 0.3) !important;
    }

    .drawer-title {
        font-family: var(--font-heading, 'Orbitron', sans-serif) !important;
        font-size: 1.1rem !important;
        color: var(--primary, #00ffcc) !important;
        letter-spacing: 2px !important;
    }

    .drawer-close-btn {
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        border: 1px solid #666 !important;
        border-radius: 50% !important;
        color: #fff !important;
        font-size: 1.2rem !important;
        cursor: pointer !important;
    }

    .drawer-nav {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 0 !important;
    }

    .drawer-item {
        display: flex !important;
        align-items: center !important;
        padding: 15px 20px !important;
        background: transparent !important;
        border: none !important;
        color: #aaa !important;
        font-size: 1rem !important;
        text-align: left !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .drawer-item:hover,
    .drawer-item:active {
        background: rgba(0, 255, 204, 0.1) !important;
        color: #fff !important;
    }

    .drawer-item.active {
        color: var(--primary, #00ffcc) !important;
        background: rgba(0, 255, 204, 0.15) !important;
        border-left: 3px solid var(--primary, #00ffcc) !important;
    }

    .drawer-icon {
        margin-right: 12px !important;
        font-size: 1.2rem !important;
    }

    .drawer-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 99999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }

    .drawer-backdrop.visible {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* --- 1. GLOBAL RESET & LAYOUT --- */
    #app-container {
        display: block !important;
        height: 100vh !important;
        overflow-y: scroll !important;
        padding-bottom: 220px !important;
        padding-top: 55px !important;
        /* ヘッダー分のスペース確保 */
        background: #050510 !important;
    }

    #sidebar {
        display: none !important;
    }

    #content-area {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        min-height: 100vh !important;
    }

    /* --- 2. HEADER & DASHBOARD --- */
    #view-dashboard .section-header {
        display: block !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    #view-dashboard .section-header h2 {
        display: block !important;
        font-size: 1.4rem !important;
        color: #fff !important;
        text-shadow: 0 0 10px rgba(0, 255, 204, 0.3) !important;
    }

    .song-status-card,
    .song-status-card.compact-header {
        display: none !important;
    }

    .playlist-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 10px !important;
        padding-bottom: 150px !important;
    }

    .playlist-grid .song-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 30px 10px 10px !important;
        /* ★FIX: 右パディングを拡張し、中身を左にずらす */
        background: rgba(20, 20, 30, 0.8) !important;
        border: 1px solid #333 !important;
        border-radius: 8px !important;
        min-height: 60px !important;
    }

    /* ★FIX: 再生中のカードはレインボー枠があるため、右側に大きな余白を持たせる (Mobile) */
    /* ★FIX: 再生中のカードはレインボー枠があるため、右側に大きな余白を持たせる (Mobile) */
    .playlist-grid .song-card.is-playing {
        padding: 8px 12px !important;
        /* style.css の基本設定と一致させる */
        box-sizing: border-box !important;
        min-height: 90px !important;
        /* 再生中はビジュアルアイザー分だけ高さを確保 */
    }

    /* ★FIX: [全カード共通] テキスト情報を柔軟に広げ、左右バランスを確保 */
    .playlist-grid .song-card .card-info {
        max-width: none !important;
        /* 固定幅制限を解除 */
        width: 100% !important;
        flex: 1 !important;
        margin-right: 0 !important;
        /* 折り返し禁止＆スクロール */
        white-space: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    /* スクロールバー非表示 (Webkit) */
    .playlist-grid .song-card .card-info::-webkit-scrollbar {
        display: none !important;
    }

    /* ★FIX: [全カード共通] メタデータも横並び維持し、はみ出たらスクロール */
    .playlist-grid .song-card .card-meta {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* Scroll if container itself overflows, though inner constraints should prevent it */
        overflow-x: auto !important;
        gap: 6px !important;
        align-items: center !important;
        scrollbar-width: none !important;
    }

    .playlist-grid .song-card .card-meta::-webkit-scrollbar {
        display: none !important;
    }

    /* メタデータ個別の制御: テーマ（1つ目）は省略可能、他（BPM等）は死守 */
    .playlist-grid .song-card .card-meta span {
        white-space: nowrap !important;
    }

    /* テーマ: 幅制限し、はみ出たら...で省略 */
    .playlist-grid .song-card .card-meta span:first-child {
        display: inline-block !important;
        /* ellipsisに必要 */
        max-width: 80px !important;
        /* モバイルでの安全圏 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.75rem !important;
        /* 少し小さくして収納力UP */
        flex-shrink: 1 !important;
        /* 必要なら縮む */
    }

    /* BPMと時間: 絶対に情報を隠さない */
    .playlist-grid .song-card .card-meta span:not(:first-child) {
        flex-shrink: 0 !important;
        font-weight: bold !important;
    }

    /* ★FIX: Canvasが固定幅(340px)だとパディングを無視してはみ出すため、強制的に親幅に収める */
    .playlist-grid .song-card .card-visualizer {
        position: relative !important;
        /* 絶対配置を解除してグリッドエリアに収める */
        grid-area: viz;
        /* style.cssで定義されたareaに配置 */
        max-width: 100% !important;
        width: 100% !important;
        height: 25px !important;
        /* 少し細くして文字空間を広げる */
        /* 高さを固定して安定させる */
        margin-top: 8px !important;
        /* 上部要素とのマージンを明確化 */
        border-top: none !important;
        /* 不要な境界線を除去 */
        left: 0 !important;
        right: 0 !important;
    }

    /* --- 3. CONTROLS --- */
    .action-panel.suno-layout {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ai-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .control-toolbar {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .toolbar-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .retro-select.compact {
        width: 48% !important;
        height: 48px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        background-color: #111 !important;
        color: #ddd !important;
    }

    .time-sig-control {
        width: 100% !important;
        height: 48px !important;
        margin-top: 5px !important;
        align-items: center !important;
        box-sizing: border-box !important;
        background: #111 !important;
        border: 2px solid #444 !important;
    }

    /* --- AI MODE BUTTON ADJUSTMENT (MOBILE) --- */
    .ai-mode-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 15px !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Button width restricted to look like a button, not a banner */
    .ai-mode-btn {
        width: 60% !important;
        /* Not 100%! */
        min-width: 200px !important;
        max-width: 300px !important;
        height: 48px !important;
        font-size: 0.9rem !important;
        margin: 0 auto !important;
    }

    /* --- PROMPT & GENERATE --- */
    .prompt-bar-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 10px !important;
        gap: 15px !important;
    }

    .prompt-input-area {
        width: 100% !important;
        display: block !important;
    }

    #ai-prompt-input {
        width: 100% !important;
        min-height: 120px !important;
        padding: 12px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        background: #000 !important;
        color: #fff !important;
        border: 2px solid #555 !important;
        border-radius: 8px !important;
    }

    .prompt-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #btn-generate-main {
        width: 100% !important;
        height: 60px !important;
        font-size: 1.2rem !important;
        margin: 0 !important;
        background: linear-gradient(118deg, #22ffe0 0%, #1ec7ff 50%, #2e89ff 100%) !important;
        color: #02131d !important;
        border: 1px solid rgba(255, 255, 255, 0.38) !important;
        box-shadow:
            0 10px 24px rgba(0, 151, 255, 0.34) !important,
            0 0 22px rgba(0, 255, 212, 0.28) !important,
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 1.8px !important;
        border-radius: 12px !important;
        position: relative !important;
        z-index: 100 !important;
        overflow: hidden !important;
        cursor: pointer !important;
        animation: mobileGeneratePulse 2s ease-in-out infinite !important;
    }

    #btn-generate-main::before {
        content: "" !important;
        position: absolute !important;
        inset: -44% !important;
        background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.88) 50%, transparent 80%) !important;
        transform: translateX(-88%) rotate(8deg) !important;
        animation: mobileGenerateSweep 1.9s linear infinite !important;
        pointer-events: none !important;
        z-index: 1 !important;
        opacity: 0.72 !important;
    }

    #btn-generate-main .btn-text {
        position: relative !important;
        z-index: 2 !important;
        font-weight: 900 !important;
    }

    #btn-generate-main:active {
        box-shadow: 0 4px 10px rgba(0, 255, 204, 0.24) !important;
        transform: scale(0.98) !important;
    }

    #btn-generate-main:disabled {
        cursor: wait !important;
        filter: saturate(1.12) brightness(1.02) !important;
    }

    #btn-generate-main.is-generating {
        animation: mobileGeneratePulse 0.75s ease-in-out infinite !important;
    }

    .action-toggles {
        width: 100% !important;
        display: flex !important;
        justify-content: space-around !important;
        height: 40px !important;
        align-items: center !important;
    }

    /* =========================================
       ★NEW: SPOTIFY-STYLE MINI PLAYER
       ========================================= */
    .mini-player {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 60px !important;
        padding: 8px 12px !important;
        background: linear-gradient(180deg, rgba(30, 30, 40, 0.98) 0%, rgba(20, 20, 30, 0.98) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 12px !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        --mini-viz-amp: 0.42 !important;
    }

    .mini-player.is-playing {
        --mini-viz-amp: 1 !important;
        box-shadow: 0 0 0 1px rgba(56, 255, 209, 0.3) inset, 0 8px 18px rgba(0, 255, 193, 0.16) !important;
    }

    .mini-player-info {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 1 !important;
        overflow: hidden !important;
        cursor: pointer !important;
    }

    .mini-player-visualizer {
        width: 52px !important;
        height: 28px !important;
        margin: 0 8px 0 4px !important;
        position: relative !important;
        display: block !important;
        flex-shrink: 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(0, 14, 24, 0.9), rgba(0, 7, 15, 0.76)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(85, 255, 217, 0.14) !important,
            0 0 14px rgba(0, 255, 183, 0.12) !important;
    }

    .mini-player-visualizer::before {
        content: "" !important;
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        top: 50% !important;
        height: 1px !important;
        background: linear-gradient(90deg, rgba(0, 255, 200, 0.06), rgba(53, 230, 255, 0.42), rgba(0, 255, 200, 0.06)) !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

    .mini-player-visualizer::after {
        content: "" !important;
        position: absolute !important;
        inset: 4px !important;
        border-radius: 999px !important;
        background: radial-gradient(circle at 50% 50%, rgba(63, 255, 219, 0.12), transparent 72%) !important;
        pointer-events: none !important;
    }

    .mini-player-canvas {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .mini-player-thumb {
        width: 44px !important;
        height: 44px !important;
        background: linear-gradient(135deg, #1DB954, #191414) !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.4rem !important;
        flex-shrink: 0 !important;
    }

    .mini-player-text {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        gap: 2px !important;
    }

    .mini-player-title {
        color: #fff !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mini-player-artist {
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mini-player-btn {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: #1DB954 !important;
        border: none !important;
        color: #000 !important;
        font-size: 1.4rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        margin-left: 12px !important;
        transition: transform 0.1s ease, background 0.2s ease !important;
    }

    .mini-player-btn:active {
        transform: scale(0.95) !important;
        background: #1ed760 !important;
    }

    @keyframes mobileGeneratePulse {
        0%,
        100% {
            transform: translateY(0) scale(1);
            filter: brightness(1);
        }

        50% {
            transform: translateY(-1px) scale(1.012);
            filter: brightness(1.1);
        }
    }

    @keyframes mobileGenerateSweep {
        from {
            transform: translateX(-88%) rotate(8deg);
        }

        to {
            transform: translateX(88%) rotate(8deg);
        }
    }

    /* --- 4. PLAYER BAR (COMPACT SPOTIFY STYLE) --- */
    #player-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 8px 12px 20px 12px !important;
        background: #121212 !important;
        border-top: none !important;
        backdrop-filter: blur(10px) !important;
        z-index: 999999 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    /* Hide desktop controls on mobile - use mini player instead */
    .player-controls {
        display: none !important;
    }

    /* Hide visualizer/seek bar on mobile mini player */
    .visualizer-bar {
        display: none !important;
    }

    /* ★KEEP: メタ表示はユーザー要望により維持 */

    /* REMOVED: Duplicate visualizer-bar styles that override display:none */
    /* See L529-531 for hide rule */

    #seek-bar {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        /* 標準プロパティを追加 */
        background: transparent !important;
    }

    /* Track Style (Thin Line) */
    #seek-bar::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #333, #555);
        border-radius: 2px;
    }

    /* Thumb Style (Visible & Touchable) */
    #seek-bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.8);
        margin-top: -8px;
        /* Center */
        position: relative;
        z-index: 101;
    }

    /* ★RESTORED: メタ表示を維持（コンパクト版） */
    .mobile-meta-display {
        width: 100% !important;
        order: 2 !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 4px 8px !important;
        height: auto !important;
        display: block !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 6px !important;
        font-size: 0.75rem !important;
    }

    .track-info {
        font-size: 0.85rem !important;
        font-weight: bold !important;
        margin-bottom: 0 !important;
    }

    .section-info {
        font-size: 0.7rem !important;
        opacity: 0.8 !important;
    }

    /* ★REMOVED: 重複.track-info/.section-info（L589-598で定義済み） */

    /* REMOVED: Duplicate .player-controls styles that override display:none */
    /* See L523-526 for hide rule on mobile mini player mode */

    .player-btn {
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        border: none !important;
        color: #fff !important;
        /* Icon color */
        font-size: 1.2rem !important;
    }

    /* Force show mobile vol btn */
    #mobile-vol-btn,
    .mobile-vol-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .player-btn.main-play {
        width: 64px !important;
        height: 64px !important;
        background: var(--primary) !important;
        border: 3px solid rgba(255, 255, 255, 0.8) !important;
        box-shadow: 0 0 15px var(--primary) !important;
    }

    .controls-right,
    #mixer-btn,
    .global-gen-indicator,
    .volume-control {
        display: none !important;
    }

    .compose-progress-toast {
        top: auto !important;
        right: 12px !important;
        left: 12px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
        width: auto !important;
        z-index: 12050 !important;
    }

    .compose-progress-toast-panel {
        padding: 15px 15px 14px !important;
        border-radius: 18px !important;
        backdrop-filter: blur(18px) saturate(1.22) !important;
    }

    .compose-progress-toast-title {
        padding-right: 28px !important;
        font-size: 0.98rem !important;
    }

    .compose-progress-toast-detail {
        font-size: 0.82rem !important;
    }

    .compose-progress-toast-ops {
        gap: 6px !important;
    }

    .compose-progress-toast .loading-ops-pill {
        padding: 5px 9px !important;
        font-size: 0.7rem !important;
    }

    .compose-progress-toast-footer {
        gap: 10px !important;
    }

    /* --- Mobile Sliding Structure Display --- */
    #marquee-section-text {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 20px !important;
        padding: 0 45% !important;
        /* Center active item */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
        align-items: center !important;
        height: 30px !important;
    }

    #marquee-section-text::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-section-item {
        color: #666 !important;
        font-size: 0.9rem !important;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        opacity: 0.5 !important;
        flex: 0 0 auto !important;
    }

    .mobile-section-item.active {
        color: var(--primary) !important;
        font-size: 1.1rem !important;
        font-weight: bold !important;
        transform: scale(1.1) !important;
        opacity: 1 !important;
        text-shadow: 0 0 10px var(--primary) !important;
    }

    /* =========================================
       全画面プレイヤー（現行DOM向けモバイル最適化）
       ========================================= */
    .fullscreen-player {
        padding:
            max(env(safe-area-inset-top, 0px), 8px)
            8px
            max(env(safe-area-inset-bottom, 0px), 8px) !important;
        align-items: stretch !important;
    }

    body.fp-open #player-bar {
        display: none !important;
    }

    .fp-shell {
        width: 100% !important;
    }

    .fp-container.fp-rebuild-layout {
        width: 100% !important;
        min-height: 100% !important;
        padding: 14px !important;
        gap: 14px !important;
        border-radius: 22px !important;
    }

    .fp-topbar {
        gap: 10px !important;
    }

    .fp-topbar-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .fp-topbar-label {
        font-size: 0.62rem !important;
        letter-spacing: 0.12em !important;
    }

    .fp-topbar-value {
        font-size: 0.84rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .fp-hero {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .fp-artwork {
        width: min(100%, 260px) !important;
        margin: 0 auto !important;
        border-radius: 20px !important;
    }

    .fp-hero-copy {
        gap: 12px !important;
    }

    .fp-overline {
        margin-bottom: 0 !important;
        font-size: 0.66rem !important;
    }

    .fp-title-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .fp-title-marquee {
        overflow: hidden !important;
    }

    .fp-title-marquee-track {
        min-width: 100% !important;
    }

    .fp-title-marquee.marquee-active {
        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
    }

    .fp-title-marquee.marquee-active .fp-title-marquee-track {
        display: flex !important;
        align-items: center !important;
        gap: 38px !important;
        width: max-content !important;
        animation: fp-title-marquee-scroll var(--fp-title-duration, 12s) linear infinite !important;
    }

    .fp-title-marquee.marquee-active h2,
    .fp-title-marquee.marquee-active #fp-title-ghost {
        display: block !important;
        white-space: nowrap !important;
        word-break: normal !important;
        flex: 0 0 auto !important;
    }

    .fp-hero-copy h2 {
        font-size: clamp(1.55rem, 8vw, 2.15rem) !important;
        line-height: 1 !important;
    }

    .fp-like-button {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
    }

    .fp-artist-link {
        font-size: 0.94rem !important;
    }

    .fp-meta-strip {
        gap: 6px !important;
        align-items: center !important;
    }

    .fp-meta-strip .meta-badge {
        min-height: 34px !important;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        gap: 4px !important;
    }

    #fp-genre {
        max-width: min(100%, 220px) !important;
        font-size: 0.68rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .fp-playback-card,
    .fp-drawer-shell,
    .fp-panel-card {
        border-radius: 20px !important;
    }

    .fp-playback-card,
    .fp-drawer-shell,
    .fp-panel-card {
        padding: 14px !important;
    }

    .fp-icon-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .fp-icon-btn.medium {
        width: 52px !important;
        height: 52px !important;
    }

    .fp-icon-btn.large {
        width: 68px !important;
        height: 68px !important;
    }

    .fp-title-row {
        padding-right: 58px !important;
    }

    .fp-like-button {
        width: 48px !important;
        height: 48px !important;
        top: 0 !important;
        right: 0 !important;
    }

    .fp-hero-copy h2 {
        font-size: clamp(1.75rem, 8.6vw, 2.8rem) !important;
    }

    .fp-artwork-aura {
        left: 10% !important;
        right: 10% !important;
        bottom: 10% !important;
        height: 22% !important;
    }

    .fp-stage-visualizer {
        opacity: 0.8 !important;
    }

    .fp-energy-strip {
        grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
        min-height: 34px !important;
        gap: 4px !important;
    }

    .fp-energy-bar {
        height: calc(7px + var(--fp-bar-level, 0.16) * 22px) !important;
    }

    .fp-primary-btn,
    .fp-secondary-btn,
    .fp-chip {
        min-height: 42px !important;
        padding: 0 12px !important;
        font-size: 0.88rem !important;
    }

    .fp-action-row {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .fp-mode-toggle {
        min-height: 58px !important;
        gap: 0 !important;
    }

    .fp-mode-label {
        display: none !important;
    }

    .fp-panel-toggle-row {
        padding-top: 0 !important;
    }

    .fp-panel-toggle {
        min-width: 76px !important;
        min-height: 34px !important;
        padding: 0 12px !important;
    }

    .fp-drawer-shell {
        padding: 10px 12px 12px !important;
        border-radius: 20px !important;
    }

    .fp-drawer-header {
        min-height: 0 !important;
        margin-bottom: 2px !important;
    }

    .fp-drawer-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .fp-drawer-tab {
        min-height: 40px !important;
        border-radius: 14px !important;
        font-size: 0.8rem !important;
    }

    .fp-drawer-close {
        width: 30px !important;
        height: 30px !important;
    }

    .fp-drawer-shell .fp-side-panel-content {
        min-height: 0 !important;
    }

    .fp-panel-card {
        gap: 12px !important;
        padding: 0 !important;
    }

    .fp-panel-heading h4 {
        font-size: 0.9rem !important;
    }

    .fp-panel-hint {
        font-size: 0.68rem !important;
    }

    .fp-inline-toggle {
        align-items: center !important;
        gap: 10px !important;
    }

    .fp-switch-btn {
        min-width: 72px !important;
        min-height: 42px !important;
    }

    .fp-pill-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .fp-pill-btn {
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 0.8rem !important;
    }

    .fp-levels-panel {
        padding: 12px !important;
        gap: 12px !important;
    }

    .fp-field {
        gap: 8px !important;
    }

    .fp-field span {
        font-size: 0.8rem !important;
    }

    .fp-field-stack {
        gap: 6px !important;
    }

    .fp-select {
        min-height: 44px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        font-size: 0.95rem !important;
    }

    .fp-slider,
    .fp-slider-block input {
        height: 5px !important;
    }

    .fp-slider::-webkit-slider-thumb,
    .fp-slider-block input::-webkit-slider-thumb {
        width: 16px !important;
        height: 16px !important;
    }

    .fp-slider-block {
        gap: 8px !important;
    }

    .fp-time-labels {
        margin-top: 8px !important;
        font-size: 0.76rem !important;
    }

    .fp-toggle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .fp-inline-form {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .fp-primary-btn,
    .fp-secondary-btn {
        width: 100% !important;
    }

    .fp-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .meta-item {
        padding: 10px !important;
        border-radius: 14px !important;
        gap: 4px !important;
    }

    .meta-item span {
        font-size: 0.64rem !important;
    }

    .meta-item strong {
        font-size: 0.9rem !important;
        word-break: break-word !important;
    }

    .fp-detail-box {
        padding: 12px 14px !important;
        border-radius: 14px !important;
        font-size: 0.82rem !important;
    }

    #fp-progression {
        font-size: 0.84rem !important;
        line-height: 1.5 !important;
    }

    .fullscreen-player .fp-container.fp-rebuild-layout.fp-art-fusion-layout {
        height: min(100%, calc(100dvh - 12px)) !important;
        max-height: calc(100dvh - 12px) !important;
        padding:
            max(env(safe-area-inset-top, 0px), 10px)
            10px
            max(env(safe-area-inset-bottom, 0px), 10px) !important;
        gap: 10px !important;
        grid-template-rows: auto minmax(0, 1.42fr) auto auto auto minmax(0, 0.98fr) !important;
        overflow: hidden !important;
    }

    .fullscreen-player .fp-visual-stage {
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 24px !important;
    }

    .fullscreen-player .fp-stage-main {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .fullscreen-player .fp-stage-copy {
        gap: 10px !important;
    }

    .fullscreen-player .fp-topbar .fp-like-button {
        position: static !important;
        margin-left: auto !important;
    }

    .fullscreen-player .fp-stage-artwork {
        order: -1 !important;
        gap: 10px !important;
    }

    .fullscreen-player .fp-stage-artwork .fp-artwork {
        width: min(100%, min(43vh, 268px)) !important;
        border-radius: 24px !important;
    }

    .fullscreen-player .fp-stage-visualizer {
        opacity: 0.92 !important;
    }

    .fullscreen-player .fp-structure-lane {
        overflow: hidden !important;
        isolation: isolate !important;
        contain: layout paint !important;
    }

    .fullscreen-player .fp-structure-track {
        padding-inline: 38% !important;
        scroll-padding-inline: 38% !important;
        contain: layout paint !important;
    }

    .fullscreen-player .fp-stage-copy #fp-title,
    .fullscreen-player .fp-stage-copy #fp-title-ghost {
        font-size: clamp(1.85rem, 10vw, 3.1rem) !important;
        line-height: 0.96 !important;
    }

    .fullscreen-player .fp-lyrics-inline {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .fullscreen-player .fp-lyrics-line {
        font-size: 0.84rem !important;
    }

    .fullscreen-player .fp-lyrics-subcopy {
        font-size: 0.7rem !important;
    }

    .fullscreen-player .fp-progress-stage,
    .fullscreen-player .fp-main-controls-stage {
        padding: 12px 14px !important;
    }

    .fullscreen-player .fp-main-controls-stage .fp-controls-main {
        width: 100% !important;
        gap: 6px !important;
    }

    .fullscreen-player .fp-icon-btn.medium {
        width: 46px !important;
        height: 46px !important;
    }

    .fullscreen-player .fp-icon-btn.large {
        width: 64px !important;
        height: 64px !important;
    }

    .fullscreen-player .fp-icon-btn.large .fp-icon-glyph {
        width: 1.35rem !important;
        height: 1.35rem !important;
    }

    .fullscreen-player .fp-fx-dock {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .fullscreen-player .fp-chip {
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 0.76rem !important;
    }

    .fullscreen-player .fp-fx-status {
        justify-self: start !important;
        font-size: 0.64rem !important;
    }

    .fullscreen-player .fp-levels-popover {
        inset: auto 0 calc(100% + 8px) 0 !important;
        padding: 12px !important;
    }

    .fullscreen-player .fp-structure-track {
        min-height: 30px !important;
        height: 30px !important;
        gap: 20px !important;
        padding: 0 45% !important;
        scroll-padding-inline: 45% !important;
    }

    .fullscreen-player .fp-structure-caption {
        display: none !important;
    }

    .fullscreen-player .fp-structure-track .mobile-section-item {
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        color: #666 !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        opacity: 0.5 !important;
    }

    .fullscreen-player .fp-structure-track .mobile-section-item.active {
        color: var(--primary) !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        transform: scale(1.1) !important;
        opacity: 1 !important;
        text-shadow: 0 0 10px var(--primary) !important;
    }

    .fullscreen-player .fp-structure-track .mobile-section-item.waiting {
        color: #888 !important;
        font-size: 0.82rem !important;
        opacity: 0.7 !important;
        text-shadow: none !important;
    }

    .fullscreen-player .fp-drawer-shell {
        grid-template-rows: auto minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .fullscreen-player .fp-side-panel-content,
    .fullscreen-player .fp-panel-stack.active {
        min-height: 0 !important;
        overflow: auto !important;
    }

    .fullscreen-player .fp-lyrics-panel-line {
        font-size: 0.98rem !important;
    }

    .fullscreen-player .fp-lyrics-panel-copy,
    .fullscreen-player .fp-queue-status {
        font-size: 0.78rem !important;
    }

    /* ═══════════════════════════════════════════════════════════ */
    /* 🎛️ PHASE 2: MIXER MOBILE REDESIGN                          */
    /* ═══════════════════════════════════════════════════════════ */

    #view-mixer {
        padding: 12px !important;
        padding-bottom: 220px !important;
        background:
            radial-gradient(circle at top, rgba(0, 255, 204, 0.08), transparent 42%),
            linear-gradient(180deg, rgba(6, 9, 17, 0.98), rgba(5, 6, 12, 0.98)) !important;
    }

    #view-mixer .mixer-board-layout {
        flex-direction: column !important;
        gap: 16px !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }

    .mixer-mobile-overview {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(86, 239, 216, 0.18) !important;
        background:
            linear-gradient(145deg, rgba(13, 25, 35, 0.96), rgba(8, 10, 18, 0.98)) !important;
        box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

    .mixer-mobile-hero {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .mixer-mobile-kicker {
        font-size: 0.64rem !important;
        letter-spacing: 0.22em !important;
        text-transform: uppercase !important;
        color: rgba(125, 246, 229, 0.76) !important;
    }

    .mixer-mobile-heading {
        margin: 0 !important;
        font-size: 1.34rem !important;
        color: #f5fbff !important;
        letter-spacing: 0.02em !important;
    }

    .mixer-mobile-copy {
        margin: 0 !important;
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
        color: rgba(215, 227, 236, 0.72) !important;
    }

    .mixer-mobile-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 6px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .mixer-mobile-nav-btn {
        min-height: 46px !important;
        border: 1px solid transparent !important;
        border-radius: 14px !important;
        background: transparent !important;
        color: rgba(210, 220, 228, 0.74) !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
    }

    .mixer-mobile-nav-btn.is-active {
        background: linear-gradient(135deg, rgba(52, 225, 204, 0.28), rgba(0, 122, 255, 0.2)) !important;
        border-color: rgba(95, 244, 224, 0.45) !important;
        color: #f7ffff !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
    }

    .mixer-mobile-summary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .mixer-mobile-summary-block {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        min-width: 0 !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .mixer-mobile-summary-label {
        font-size: 0.62rem !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.42) !important;
    }

    .mixer-mobile-summary strong {
        display: block !important;
        min-width: 0 !important;
        font-size: 0.82rem !important;
        color: #f4fcff !important;
        overflow-wrap: anywhere !important;
    }

    .fx-rack-container {
        order: 2 !important;
        width: 100% !important;
        gap: 14px !important;
        padding: 14px !important;
        border-width: 1px !important;
        border-radius: 20px !important;
        background:
            linear-gradient(180deg, rgba(11, 14, 24, 0.98), rgba(7, 8, 15, 0.98)) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 16px 32px rgba(0, 0, 0, 0.24) !important;
    }

    .global-toggles {
        display: flex !important;
        justify-content: stretch !important;
    }

    .global-toggles .toggle-switch-label {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .snapshot-section {
        gap: 10px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .snapshot-section .ctrl-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .snapshot-card {
        padding: 14px !important;
        border-radius: 18px !important;
        gap: 12px !important;
    }

    .snapshot-card-head {
        gap: 4px !important;
    }

    .snapshot-kicker {
        font-size: 0.6rem !important;
        letter-spacing: 0.18em !important;
    }

    .snapshot-section .panel-label {
        font-size: 0.94rem !important;
    }

    .snapshot-copy {
        font-size: 0.74rem !important;
        line-height: 1.5 !important;
    }

    .snapshot-divider {
        margin: 0 !important;
    }

    .snapshot-section .btn-retro {
        min-height: 44px !important;
        padding: 0 10px !important;
        font-size: 0.78rem !important;
    }

    .mixer-channels-wrapper {
        order: 1 !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    .console-strips-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .console-group {
        border-radius: 20px !important;
        border: 1px solid rgba(94, 116, 138, 0.22) !important;
        overflow: hidden !important;
        background:
            linear-gradient(180deg, rgba(12, 14, 22, 0.95), rgba(7, 8, 14, 0.98)) !important;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
    }

    .group-label {
        padding: 12px 14px !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.16em !important;
        background: rgba(255, 255, 255, 0.045) !important;
        color: rgba(226, 235, 241, 0.82) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .strip-pair,
    .strip-pair.width-auto {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .console-strip {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 368px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 10px 8px 8px !important;
        border: 1px solid rgba(41, 92, 196, 0.34) !important;
        border-right: 1px solid rgba(41, 92, 196, 0.34) !important;
        border-radius: 16px !important;
        background:
            linear-gradient(180deg, rgba(16, 29, 68, 0.96), rgba(10, 18, 42, 0.98)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 12px 24px rgba(0, 0, 0, 0.18) !important;
    }

    .console-strip:last-child {
        border-right: 1px solid rgba(41, 92, 196, 0.34) !important;
    }

    .console-strip.selected-strip {
        border-color: rgba(76, 239, 224, 0.72) !important;
        box-shadow:
            0 0 0 1px rgba(76, 239, 224, 0.18),
            0 16px 28px rgba(0, 0, 0, 0.24) !important;
    }

    .strip-name {
        width: 100% !important;
        min-width: 0 !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        padding: 8px 0 !important;
        border-top: 2px solid #12eff2 !important;
        border-radius: 0 0 12px 12px !important;
        background: #05070d !important;
        text-align: center !important;
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.1 !important;
    }

    .pan-pot-area {
        width: 100% !important;
        min-height: 100px !important;
        margin-bottom: 10px !important;
        padding: 10px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: #090c13 !important;
        border-radius: 10px !important;
        border: 1px solid rgba(74, 92, 128, 0.42) !important;
    }

    .pan-value-disp {
        min-width: 72px !important;
        margin-bottom: 0 !important;
        padding: 4px 8px !important;
        font-size: 0.76rem !important;
        text-align: center !important;
        background: rgba(18, 20, 26, 0.92) !important;
        border: 1px solid rgba(92, 105, 128, 0.36) !important;
        border-radius: 6px !important;
    }

    .pan-slider {
        -webkit-appearance: none !important;
        appearance: none !important;
        flex: 0 0 auto !important;
        width: 82px !important;
        height: 4px !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .pan-slider::-webkit-slider-runnable-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, rgba(26, 91, 143, 0.8), rgba(60, 207, 197, 0.8)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(80, 108, 136, 0.28),
            0 0 0 1px rgba(5, 10, 18, 0.26) !important;
    }

    .pan-slider::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(14, 28, 39, 0.95) !important;
        background: #20d9ff !important;
        margin-top: -6px !important;
        box-shadow: 0 0 0 4px rgba(32, 217, 255, 0.16), 0 0 12px rgba(32, 217, 255, 0.4) !important;
    }

    .pan-slider::-moz-range-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, rgba(26, 91, 143, 0.8), rgba(60, 207, 197, 0.8)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(80, 108, 136, 0.28),
            0 0 0 1px rgba(5, 10, 18, 0.26) !important;
    }

    .pan-slider::-moz-range-thumb {
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(14, 28, 39, 0.95) !important;
        background: #20d9ff !important;
        box-shadow: 0 0 0 4px rgba(32, 217, 255, 0.16), 0 0 12px rgba(32, 217, 255, 0.4) !important;
    }

    .pan-label {
        margin-top: 0 !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
    }

    .strip-fader {
        width: 100% !important;
        height: 178px !important;
        margin-bottom: 8px !important;
        padding: 10px 0 !important;
        border-radius: 10px !important;
        background: #090c13 !important;
        border: 1px solid rgba(74, 92, 128, 0.42) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
    }

    .strip-fader::before {
        content: "" !important;
        position: absolute !important;
        top: 16px !important;
        bottom: 16px !important;
        left: 50% !important;
        width: 8px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(34, 58, 82, 0.96), rgba(8, 11, 18, 0.96)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(87, 107, 132, 0.3),
            inset 0 8px 12px rgba(0, 0, 0, 0.32) !important;
        pointer-events: none !important;
    }

    input[type=range].v-fader {
        -webkit-appearance: slider-vertical !important;
        appearance: slider-vertical !important;
        writing-mode: vertical-lr !important;
        direction: rtl !important;
        width: 28px !important;
        height: 100% !important;
        margin: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    input[type=range].v-fader::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        border: 2px solid #072436 !important;
        background: radial-gradient(circle at 35% 35%, #67f7ff, #11b7ff) !important;
        box-shadow: 0 0 0 5px rgba(17, 183, 255, 0.12), 0 0 16px rgba(17, 183, 255, 0.42) !important;
    }

    input[type=range].v-fader::-moz-range-thumb {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        border: 2px solid #072436 !important;
        background: radial-gradient(circle at 35% 35%, #67f7ff, #11b7ff) !important;
        box-shadow: 0 0 0 5px rgba(17, 183, 255, 0.12), 0 0 16px rgba(17, 183, 255, 0.42) !important;
    }

    .vol-value-disp {
        align-self: center !important;
        min-width: 64px !important;
        margin-bottom: 10px !important;
        padding: 6px 8px !important;
        font-size: 0.82rem !important;
        text-align: center !important;
    }

    .strip-btns {
        display: grid !important;
        grid-template-columns: repeat(3, 36px) !important;
        justify-content: center !important;
        justify-items: center !important;
        column-gap: 6px !important;
        row-gap: 6px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .strip-btns button {
        width: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 9px !important;
        border: 1px solid rgba(126, 140, 166, 0.18) !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: rgba(220, 228, 235, 0.76) !important;
        font-size: 0.84rem !important;
    }

    .strip-btns button:active {
        border-color: rgba(255, 255, 255, 0.14) !important;
        transform: translateY(1px) !important;
    }

    .strip-btns .ch-midi-btn {
        grid-column: 2 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .strip-btns .btn-send.off {
        background: rgba(255, 255, 255, 0.04) !important;
        color: rgba(220, 228, 235, 0.42) !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    .strip-btns .btn-send.active {
        background: linear-gradient(135deg, rgba(86, 244, 208, 0.92), rgba(39, 185, 142, 0.86)) !important;
        color: #071015 !important;
        border-color: rgba(122, 255, 226, 0.44) !important;
        box-shadow: 0 0 12px rgba(86, 244, 208, 0.22) !important;
    }

    .strip-btns .btn-solo.active {
        background: linear-gradient(135deg, rgba(255, 200, 94, 0.92), rgba(231, 146, 46, 0.84)) !important;
        color: #1a1205 !important;
        border-color: rgba(255, 210, 122, 0.42) !important;
        box-shadow: 0 0 10px rgba(255, 200, 94, 0.18) !important;
    }

    .strip-btns .btn-mute.active {
        background: linear-gradient(135deg, rgba(255, 124, 124, 0.92), rgba(206, 48, 72, 0.84)) !important;
        color: #fff !important;
        border-color: rgba(255, 164, 164, 0.42) !important;
        box-shadow: 0 0 10px rgba(255, 112, 112, 0.2) !important;
    }

    .master-strip {
        min-height: 330px !important;
        border-color: rgba(255, 214, 102, 0.45) !important;
        background: linear-gradient(180deg, rgba(56, 40, 16, 0.96), rgba(24, 18, 10, 0.98)) !important;
    }

    .master-strip .pan-pot-area {
        display: flex !important;
        visibility: hidden !important;
        min-height: 74px !important;
    }

    .master-strip .strip-name {
        background: linear-gradient(135deg, rgba(255, 215, 92, 0.92), rgba(255, 188, 58, 0.9)) !important;
        color: #1a1105 !important;
    }

    .send-slider-area {
        width: 100% !important;
        margin-top: 0 !important;
        padding: 8px 6px 12px !important;
        border-radius: 10px !important;
        background: rgba(7, 10, 16, 0.82) !important;
        border: 1px solid rgba(74, 92, 128, 0.42) !important;
    }

    .send-slider {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        height: 8px !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .send-slider::-webkit-slider-runnable-track {
        height: 8px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, rgba(18, 34, 54, 0.96), rgba(25, 76, 103, 0.96)) !important;
        border: 1px solid rgba(69, 122, 150, 0.34) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    }

    .send-slider::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        width: 16px !important;
        height: 16px !important;
        margin-top: -5px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(14, 28, 39, 0.92) !important;
        background: radial-gradient(circle at 35% 35%, #69f8ff, #18d2e9) !important;
        box-shadow: 0 0 0 4px rgba(24, 210, 233, 0.14), 0 0 12px rgba(24, 210, 233, 0.3) !important;
    }

    .send-slider::-moz-range-track {
        height: 8px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, rgba(18, 34, 54, 0.96), rgba(25, 76, 103, 0.96)) !important;
        border: 1px solid rgba(69, 122, 150, 0.34) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    }

    .send-slider::-moz-range-thumb {
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(14, 28, 39, 0.92) !important;
        background: radial-gradient(circle at 35% 35%, #69f8ff, #18d2e9) !important;
        box-shadow: 0 0 0 4px rgba(24, 210, 233, 0.14), 0 0 12px rgba(24, 210, 233, 0.3) !important;
    }

    #view-mixer:not(.is-mobile-routing-active) .routing-bay {
        display: none !important;
    }

    #view-mixer.is-mobile-routing-active .fx-rack-container,
    #view-mixer.is-mobile-routing-active .console-strips-container {
        display: none !important;
    }

    #view-mixer.is-mobile-routing-active .routing-bay {
        display: flex !important;
        margin-top: 0 !important;
        min-height: calc(100vh - 330px) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        animation: mixer-mobile-routing-in 220ms ease !important;
    }

    .routing-bay-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        padding: 14px !important;
        background:
            linear-gradient(180deg, rgba(9, 17, 24, 0.98), rgba(7, 10, 18, 0.94)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .rb-title-area {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .inspector-badge {
        font-size: 0.62rem !important;
        letter-spacing: 0.18em !important;
    }

    #rb-main-title {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    .inspector-close-btn {
        width: 40px !important;
        height: 40px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: #dfe9ef !important;
        display: grid !important;
        place-items: center !important;
        font-size: 1.35rem !important;
    }

    .routing-bay-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        overflow-y: auto !important;
    }

    .rb-pane {
        min-width: 0 !important;
        min-height: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.025) !important;
        box-shadow: none !important;
    }

    .pane-header {
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .pane-content {
        padding: 12px !important;
        gap: 12px !important;
        min-height: 0 !important;
    }

    .pane-assignments .pane-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .rb-assignment-row {
        padding: 12px 10px !important;
        border-radius: 14px !important;
        min-height: 100% !important;
    }

    .rb-assignment-main {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .rb-card,
    .rb-bus-card {
        padding: 12px !important;
        border-radius: 16px !important;
        gap: 12px !important;
    }

    .rb-card-head,
    .rb-bus-card-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .rb-grid.two-cols,
    .rb-bus-grid {
        grid-template-columns: 1fr !important;
    }

    .rb-chip-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .rb-detail-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 42px !important;
        font-size: 0.76rem !important;
    }

    .rb-control {
        gap: 9px !important;
    }

    .rb-range {
        -webkit-appearance: none !important;
        appearance: none !important;
        height: 10px !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .rb-range::-webkit-slider-runnable-track {
        height: 10px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, rgba(11, 36, 56, 0.96), rgba(18, 102, 128, 0.94)) !important;
        border: 1px solid rgba(80, 153, 178, 0.32) !important;
        box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.38),
            0 0 0 1px rgba(8, 13, 22, 0.24) !important;
    }

    .rb-range::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        width: 20px !important;
        height: 20px !important;
        margin-top: -6px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(8, 19, 28, 0.94) !important;
        background: radial-gradient(circle at 35% 35%, #f6fffc, #7ef6df) !important;
        box-shadow: 0 0 0 4px rgba(126, 246, 223, 0.18), 0 0 14px rgba(126, 246, 223, 0.28) !important;
    }

    .rb-range::-moz-range-track {
        height: 10px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, rgba(11, 36, 56, 0.96), rgba(18, 102, 128, 0.94)) !important;
        border: 1px solid rgba(80, 153, 178, 0.32) !important;
        box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.38),
            0 0 0 1px rgba(8, 13, 22, 0.24) !important;
    }

    .rb-range::-moz-range-thumb {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(8, 19, 28, 0.94) !important;
        background: radial-gradient(circle at 35% 35%, #f6fffc, #7ef6df) !important;
        box-shadow: 0 0 0 4px rgba(126, 246, 223, 0.18), 0 0 14px rgba(126, 246, 223, 0.28) !important;
    }

    .rb-number,
    .rb-select {
        min-height: 44px !important;
        font-size: 0.86rem !important;
    }

    .pane-detail .pane-content {
        min-height: 220px !important;
    }

    @keyframes mixer-mobile-routing-in {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Profile View (Mobile) */
    .profile-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding-bottom: 80px !important;
    }

    .profile-card {
        padding: 20px !important;
        text-align: center !important;
        background: rgba(20, 20, 20, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
    }

    .profile-avatar-img {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 3px solid #1DB954 !important;
        margin-bottom: 15px !important;
    }

    .profile-name {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
        color: #fff !important;
    }

    .profile-bio {
        font-size: 0.9rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-bottom: 20px !important;
        white-space: pre-wrap !important;
    }

    .profile-stats {
        display: flex !important;
        justify-content: center !important;
        gap: 30px !important;
        margin-bottom: 20px !important;
    }

    .stat-box {
        display: flex !important;
        flex-direction: column !important;
    }

    .stat-num {
        font-size: 1.2rem !important;
        font-weight: bold !important;
        color: #fff !important;
    }

    .stat-label {
        font-size: 0.7rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        text-transform: uppercase !important;
    }

    .profile-actions-area {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    /* --- COMPOSER MOBILE REWORK --- */
    #view-dashboard .composer-section-header {
        max-width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 0 12px !important;
        border-bottom: 1px solid rgba(0, 255, 204, 0.16) !important;
        text-align: left !important;
    }

    #view-dashboard .composer-title-stack {
        gap: 8px !important;
    }

    #view-dashboard .composer-kicker {
        font-size: 0.62rem !important;
        letter-spacing: 0.22em !important;
        color: rgba(0, 255, 204, 0.72) !important;
    }

    #view-dashboard .composer-section-header h2 {
        text-align: left !important;
        font-size: clamp(2.1rem, 11vw, 2.9rem) !important;
        line-height: 0.94 !important;
    }

    #view-dashboard .composer-section-header p {
        display: block !important;
        text-align: left !important;
        max-width: none !important;
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.68) !important;
    }

    .composer-studio-shell {
        gap: 14px !important;
        margin: 0 0 18px !important;
    }

    .song-status-card.composer-status-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
        border-radius: 20px !important;
    }

    .song-status-card.composer-status-card .status-indicator {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        font-size: 0.78rem !important;
    }

    .song-status-card.composer-status-card .composer-info-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .song-status-card.composer-status-card .composer-info-cell {
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    .song-status-card.composer-status-card .composer-info-cell .label {
        font-size: 0.62rem !important;
        letter-spacing: 0.14em !important;
    }

    .song-status-card.composer-status-card .composer-info-cell .value {
        font-size: 0.82rem !important;
    }

    .action-panel.suno-layout.composer-action-panel {
        display: block !important;
        width: 100% !important;
        padding: 16px !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
    }

    .action-panel.suno-layout.composer-action-panel .ai-controls {
        gap: 16px !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-control-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-field {
        grid-column: auto !important;
        width: 100% !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-field .retro-select.compact,
    .action-panel.suno-layout.composer-action-panel .composer-field .retro-input.compact-num {
        width: 100% !important;
        height: 54px !important;
        font-size: 15px !important;
        margin: 0 !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-model-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 50px !important;
        gap: 8px !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-config-btn {
        width: 50px !important;
        height: 54px !important;
        min-width: 50px !important;
        border-radius: 14px !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-time-control {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 12px !important;
        min-height: 0 !important;
        height: auto !important;
        align-items: center !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-time-caption,
    .action-panel.suno-layout.composer-action-panel .composer-time-manual {
        grid-column: 1 / -1 !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-time-manual {
        width: 100% !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-time-manual .compact-num,
    .action-panel.suno-layout.composer-action-panel .composer-time-manual .retro-select.compact {
        flex: 1 1 auto !important;
        width: auto !important;
    }

    .action-panel.suno-layout.composer-action-panel .composer-time-toggle {
        width: 100% !important;
        justify-content: center !important;
    }

    .composer-toggle-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .composer-toggle-wrap {
        width: 100% !important;
        margin: 0 !important;
    }

    .composer-toggle-wrap .ai-mode-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 58px !important;
        height: 58px !important;
        font-size: 0.95rem !important;
        letter-spacing: 0.14em !important;
        margin: 0 !important;
    }

    .composer-prompt-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-top: 0 !important;
    }

    .composer-prompt-panel,
    .composer-prompt-actions {
        width: 100% !important;
        padding: 14px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }

    .composer-prompt-head {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .composer-prompt-head p {
        max-width: none !important;
        font-size: 0.85rem !important;
    }

    .action-panel.suno-layout.composer-action-panel #ai-prompt-input {
        width: 100% !important;
        min-height: 168px !important;
        padding: 16px !important;
        font-size: 15px !important;
        border-radius: 16px !important;
    }

    .composer-prompt-actions {
        display: grid !important;
        gap: 12px !important;
    }

    .composer-prompt-actions #btn-generate-main {
        width: 100% !important;
        min-height: 64px !important;
        font-size: 1rem !important;
        letter-spacing: 0.12em !important;
        margin: 0 !important;
    }

    .composer-action-toggles {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        justify-content: stretch !important;
        height: auto !important;
    }

    .composer-action-toggles .check-box-input.compact {
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
    }

    .action-panel.suno-layout.composer-action-panel #btn-generate-classic-nes {
        width: 100% !important;
        min-height: 46px !important;
        margin-top: 12px !important;
    }
}


/* =========================================
   MY SONGS LOCAL PROJECT BRIDGE (MOBILE)
   ========================================= */
@media (max-width: 768px) {
    .playlist-header-controls {
        gap: 10px !important;
        align-items: stretch !important;
    }

    .playlist-inline-actions {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .playlist-inline-actions .playlist-action-btn {
        flex: 1 1 160px !important;
        justify-content: center !important;
    }

    .public-toggle-wrapper.local-project {
        display: flex !important;
        width: 100% !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-top: 6px !important;
    }

    .public-status-text.local-project-badge {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
    }
}