/* ===== VARIÁVEIS, RESET E BASE ===== */
:root {
    --font-family: 'Inter', sans-serif;
    --transition-fast: 0.2s ease-out;
    --transition-medium: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    
    --accent-primary: #e7a99b; /* Pêssego/Rosa suave */
    --accent-secondary: #36c7be; /* Turquesa/Verde água */

    --accent-gradient: linear-gradient(45deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary));
    --sidebar-width: 260px; /* Largura padrão da sidebar, será alterada por JS */
    --now-playing-width: 380px; /* Largura padrão do painel direito, será alterada por JS */
}

body.dark-theme {
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2f2f2f;
    --surface: #3a3a3a;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --stroke-primary: #4a4a4a;
    --gradient-bg: linear-gradient(180deg, #2b2b2b 0%, #1a1a1a 100%);
    --miniplayer-bg: rgba(20, 20, 20, 0.85);
}

body.light-theme {
    --bg-primary: #FAFAFA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F0F2F5;
    --surface: #FFFFFF;
    --text-primary: #121212;
    --text-secondary: #535353;
    --stroke-primary: #e0e0e0;
    --gradient-bg: linear-gradient(180deg, #F0F2F5 0%, #FAFAFA 100%);
    --miniplayer-bg: rgba(250, 250, 250, 0.85);
}

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

html { 
    font-size: 16px; 
    scroll-behavior: smooth; 
}

body {
    background: var(--gradient-bg);
    color: var(--text-primary);
    font-family: var(--font-family);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    transition: background var(--transition-fast), color var(--transition-fast);
    overflow: hidden;
    overflow-x: hidden;
}

/* Scrollbars Elegantes */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-tertiary); }
::-webkit-scrollbar-thumb { background: var(--accent-secondary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-secondary) 80%, #fff); }

/* Preloader */
@keyframes spin { to { transform: rotate(360deg); } }
#preloader { position: fixed; inset: 0; background: var(--bg-primary); z-index: 1000; display:flex; justify-content: center; align-items: center; transition: opacity 0.5s ease; }
.spinner { width: 40px; height: 40px; border: 4px solid var(--surface); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; }

/* ===== LAYOUT PRINCIPAL (DESKTOP) ===== */
.app-container { 
    width: 100%; 
    height: 100%; 
    display: grid; 
    grid-template-columns: var(--sidebar-width) 1fr; 
    grid-template-rows: 1fr; 
    transition: grid-template-columns var(--transition-medium); 
}
.app-container.panel-open { 
    grid-template-columns: var(--sidebar-width) 1fr var(--now-playing-width); 
}

/* ===== 1. BARRA LATERAL REDIMENSIONÁVEL ===== */
.sidebar-nav { 
    background-color: transparent; 
    border-right: 1px solid var(--stroke-primary); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    position: relative; 
    overflow: hidden; 
}
.sidebar-content { 
    padding: 1.5rem; 
    overflow-y: auto; 
    flex-grow: 1; 
}
.logo { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    margin-bottom: 2.5rem; 
    flex-wrap: wrap; 
}
.logo i { 
    font-size: 2rem; 
    color: var(--accent-primary); 
}
.logo h1 { 
    font-size: 1.5rem; 
    font-weight: 700; 
    word-break: break-word; 
}
.sidebar-footer { 
    padding: 1.5rem; 
    border-top: 1px solid var(--stroke-primary); 
    flex-shrink: 0; 
    min-height: 73px; 
}
.resize-handle { 
    position: absolute; 
    top: 0; 
    right: -2.5px; 
    bottom: 0; 
    width: 5px; 
    cursor: col-resize; 
    z-index: 10; 
}

/* ===== PUBLICIDADE E TAMANHOS PADRÃO ===== */
.sidebar-ad-placeholder { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 250px; 
}
.sidebar-ad-placeholder h2 { 
    width: 100%; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: var(--text-secondary); 
    margin-bottom: 0.75rem; 
}
.ad-container { 
    background-color: var(--bg-tertiary); 
    border: 1px dashed var(--stroke-primary); 
    border-radius: var(--radius-md); 
    transition: width 0.2s, height 0.2s; 
}
.ad-size-300x250 { width: 300px; height: 250px; }
.ad-size-336x280 { width: 336px; height: 280px; }
.ad-size-160x600 { width: 160px; height: 600px; }
.ad-size-120x600 { width: 120px; height: 600px; }
.ad-size-120x240 { width: 120px; height: 240px; }

.ad-box-main { 
    width: 100%; 
    height: 90px; 
    background: var(--bg-tertiary); 
    border: 1px dashed var(--stroke-primary); 
    border-radius: var(--radius-md); 
    display: grid; 
    place-items: center; 
    color: var(--text-secondary); 
    margin-bottom: 2rem; 
}

/* ===== 2. CONTEÚDO PRINCIPAL ===== */
.main-content { 
    background: transparent; 
    padding: 1.5rem 2rem; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
}

/* Header do Conteúdo Principal */
.main-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1rem; 
    gap: 1rem; 
}
.search-bar { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    background-color: var(--surface); 
    border-radius: var(--radius-lg); 
    padding: 0.75rem 1rem; 
    flex-grow: 1; 
    max-width: 480px; 
    border: 1px solid var(--stroke-primary); 
    transition: all var(--transition-fast); 
}
.search-bar:focus-within { 
    border-color: var(--accent-primary); 
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 30%, transparent); 
}
.search-bar i { 
    font-size: 1.25rem; 
    color: var(--text-secondary); 
}
#searchInput { 
    background: none; 
    border: none; 
    outline: none; 
    color: var(--text-primary); 
    font-size: 1rem; 
    width: 100%; 
}
#searchInput::placeholder { 
    color: var(--text-secondary); 
}
.header-controls { 
    display: flex; 
    gap: 0.75rem; 
}

/* Grid de Estações */
.section-title { 
    font-size: 1.25rem; 
    font-weight: 700; 
    margin-top: 2rem; 
    margin-bottom: 1.5rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 1px solid var(--stroke-primary); 
}
#stationsContainer > section:first-of-type > .section-title { 
    margin-top: 0; 
}
.station-grid-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 1.5rem; 
    align-content: start; 
}
.station-card { 
    background-color: var(--bg-tertiary); 
    border-radius: var(--radius-md); 
    transition: all var(--transition-fast); 
    display: flex; 
    border: 1px solid transparent; 
    position: relative; 
    overflow: hidden; 
}
.station-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
    border-color: var(--stroke-primary); 
}
.station-card-clickable { 
    display: block; 
    text-decoration: none; 
    color: inherit; 
    cursor: pointer; 
    flex-grow: 1; 
}
.card-image-wrapper { 
    position: relative; 
}
.card-image { 
    width: 100%; 
    padding-bottom: 100%; 
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; 
    background-size: cover; 
    background-position: center; 
}
.card-play-button { 
    position: absolute; 
    inset: 0; 
    background-color: rgba(0,0,0,0.5); 
    display: grid; 
    place-items: center; 
    opacity: 0; 
    transition: opacity var(--transition-fast); 
}
.station-card-clickable:hover .card-play-button { 
    opacity: 1; 
}
.card-play-button i { 
    font-size: 3rem; 
    color: white; 
}
.card-info-wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem; 
    gap: 0.5rem; 
}
.card-info { 
    flex-grow: 1; 
    min-width: 0; 
}
.card-info h3 { 
    font-size: 1rem; 
    font-weight: 700; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: var(--text-primary); 
}
.card-info p { 
    font-size: 0.875rem; 
    color: var(--text-secondary); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* ===== 3. PAINEL "TOCANDO AGORA" ===== */
.now-playing-panel { 
    background-color: var(--bg-secondary); 
    border-left: 1px solid var(--stroke-primary); 
    transform: translateX(100%); 
    transition: transform var(--transition-medium); 
    position: relative; /* Mudança para Desktop: parte do fluxo normal */
    width: var(--now-playing-width); 
    z-index: 50; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; /* Evita que o conteúdo vaze durante a animação */
}
.app-container.panel-open .now-playing-panel { 
    transform: translateX(0); 
    /* O painel se torna visível quando o grid do pai muda */
}
.resize-handle-left { 
    position: absolute; 
    top: 0; 
    left: -2.5px; 
    bottom: 0; 
    width: 5px; 
    cursor: col-resize; 
    z-index: 25; 
}
.panel-close-btn { 
    position: absolute; 
    top: 1.5rem; 
    right: 1.5rem; 
    background: var(--bg-secondary); 
    border: 1px solid var(--stroke-primary); 
    color: var(--text-primary); 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: grid; 
    place-items: center; 
    transition: all var(--transition-fast); 
    z-index: 110; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
}
.panel-close-btn:hover { 
    background-color: var(--bg-tertiary); 
    transform: scale(1.1); 
}
.panel-close-btn i { 
    font-size: 1.25rem; 
}

/* Conteúdo do Painel */
.panel-cover-container { 
    position: relative; 
    width: 100%; 
    height: 35vh; 
    max-height: 300px; 
    flex-shrink: 0; 
}
.panel-cover-container::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 50%; 
    background: linear-gradient(to top, var(--bg-secondary) 20%, transparent); 
    pointer-events: none; 
}
.panel-cover-image { 
    position: absolute; 
    inset: 0; 
    background-size: cover; 
    background-position: center; 
}
.info-on-cover-btn { 
    position: absolute; 
    top: 0.75rem; 
    left: 0.75rem; 
    z-index: 15; 
    background-color: rgba(0,0,0,0.3); 
    backdrop-filter: blur(5px); 
    border: 1px solid rgba(255,255,255,0.2); 
    color: white; 
    visibility: hidden; 
    opacity: 0; 
    transition: all var(--transition-fast); 
}
.info-on-cover-btn.visible { 
    visibility: visible; 
    opacity: 1; 
}
.info-on-cover-btn:hover { 
    background-color: rgba(0,0,0,0.6); 
}
.panel-content { 
    padding: 1.5rem; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    min-height: 0; 
    position: relative; 
}
.panel-view-wrapper { 
    flex-grow: 1; 
    display: grid; 
    min-height: 0; 
}
.panel-view { 
    grid-row: 1; 
    grid-column: 1; 
    transition: opacity 0.4s ease, transform 0.4s ease; 
    display: flex; 
    flex-direction: column; 
}

/* Vistas do Painel (Estação vs Player) */
#panelStationView { 
    opacity: 1; 
    transform: translateY(0); 
    text-align: center; 
    justify-content: center; 
}
#panelStationView h2 { 
    font-size: 1.5rem; 
    font-weight: 700; 
    margin-bottom: 0.75rem; 
}
#viewStationDescription { 
    font-size: 0.9rem; 
    color: var(--text-secondary); 
    line-height: 1.5; 
    margin-bottom: 2rem; 
    max-height: none; 
    overflow-y: visible; 
}
.initial-play-btn { 
    border: none; 
    border-radius: var(--radius-lg); 
    padding: 1rem 1.5rem; 
    font-size: 1rem; 
    font-weight: 700; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.75rem; 
    align-self: center; 
    transition: all var(--transition-fast); 
    position: relative; 
}
.initial-play-btn .btn-content { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    transition: opacity var(--transition-fast); 
}
.initial-play-btn .loading-spinner { 
    position: absolute; 
    width: 24px; 
    height: 24px; 
    border: 3px solid rgba(255,255,255,0.3); 
    border-top-color: white; 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
    opacity: 0; 
    transition: opacity var(--transition-fast); 
}
.initial-play-btn.loading .btn-content { 
    opacity: 0; 
}
.initial-play-btn.loading .loading-spinner { 
    opacity: 1; 
}

#panelPlayerView { 
    opacity: 0; 
    transform: translateY(20px); 
    pointer-events: none; 
    justify-content: space-between; 
    height: 100%; 
}
.now-playing-panel.view-player #panelStationView { 
    opacity: 0; 
    transform: translateY(-20px); 
    pointer-events: none; 
}
.now-playing-panel.view-player #panelPlayerView { 
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: auto; 
}

/* Interface do Player */
.track-info { 
    padding: 0.5rem 0; 
    min-width: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 0.25rem; 
}
.track-info-expandable-wrapper { 
    display: flex; 
    align-items: flex-start; 
    gap: 0.5rem; 
}
.track-texts { 
    flex-grow: 1; 
    min-width: 0; 
}
.expandable-text { 
    text-align: left; 
    white-space: normal; 
    word-break: break-word; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 1; 
    transition: -webkit-line-clamp 0.3s ease; 
}
.track-info-expandable-wrapper.expanded .expandable-text { 
    -webkit-line-clamp: unset; 
}
.expandable-toggle { 
    flex-shrink: 0; 
    background: none; 
    border: none; 
    color: var(--text-secondary); 
    cursor: pointer; 
    padding: 0; 
    width: 24px; 
    height: 24px; 
    display: none; 
    place-items: center; 
    transition: transform var(--transition-fast); 
}
.expandable-toggle:hover { 
    color: var(--text-primary); 
}
.expandable-toggle i { 
    font-size: 1.25rem; 
}
.track-info-expandable-wrapper.expanded .expandable-toggle i { 
    transform: rotate(180deg); 
}
#panelTrackTitle { 
    font-size: 1.1rem; 
    font-weight: 500; 
}
#panelTrackArtist { 
    font-size: 0.9rem; 
    color: var(--text-secondary); 
    margin-top: 0.25rem;
}

.player-interface { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    padding-top: 1rem; 
    flex-shrink: 0; 
}
#waveformCanvas { 
    width: 100%; 
    height: 50px; 
    margin-bottom: 0.5rem; 
}
.player-controls { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 1rem; 
}
.player-actions { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 0.5rem; 
}

.volume-control-container { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    flex-grow: 1; 
}
#volumeSlider { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 100%; 
    height: 3px; 
    background: linear-gradient(to right, var(--accent-primary) var(--volume-progress, 75%), var(--stroke-primary) var(--volume-progress, 75%)); 
    outline: none; 
    border-radius: 3px; 
    cursor: pointer; 
    transition: all var(--transition-fast); 
}
#volumeSlider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 14px; 
    height: 14px; 
    background: white; 
    border-radius: 50%; 
    border: 1px solid var(--stroke-primary); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    transition: transform 0.2s ease; 
}
#volumeSlider:hover::-webkit-slider-thumb { 
    transform: scale(1.2); 
}

/* ===== COMPONENTES GERAIS: BOTÕES ===== */
.icon-button { 
    background: none; 
    border: 1px solid var(--stroke-primary); 
    color: var(--text-secondary); 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: grid; 
    place-items: center; 
    transition: all var(--transition-fast); 
}
.icon-button:hover { 
    background-color: var(--bg-tertiary); 
    color: var(--text-primary); 
}
.icon-button i { 
    font-size: 1.25rem; 
}

#themeToggleBtn .ph-sun { display: none; }
.dark-theme #themeToggleBtn .ph-moon { display: none; }
.dark-theme #themeToggleBtn .ph-sun { display: block; }

#trackLikeBtn, #shareStationBtn, .station-like-btn { 
    border: none; 
    background: transparent; 
}
#trackLikeBtn .ph-fill, .station-like-btn .ph-fill { display: none; }
#trackLikeBtn.liked .ph-fill, .station-like-btn.liked .ph-fill { display: block; color: var(--accent-primary); }
#trackLikeBtn.liked .ph:not(.ph-fill), .station-like-btn.liked .ph:not(.ph-fill) { display: none; }

@keyframes liquid-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.liquid-gradient-btn { 
    background: var(--accent-gradient); 
    background-size: 200% 200%; 
    color: white; 
    animation: liquid-gradient 5s ease infinite; 
    transition: transform var(--transition-fast); 
}
.liquid-gradient-btn:hover { 
    transform: scale(1.05); 
}
.play-pause-btn { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    border: none; 
    cursor: pointer; 
    display: grid; 
    place-items: center; 
    flex-shrink: 0; 
}
.play-pause-btn i { 
    font-size: 1.75rem; 
    grid-column: 1; 
    grid-row: 1; 
    transition: opacity 0.2s, transform 0.2s; 
}
.play-pause-btn .ph-pause { 
    opacity: 0; 
    transform: scale(0.5); 
}
.play-pause-btn.playing .ph-play { 
    opacity: 0; 
    transform: scale(0.5); 
}
.play-pause-btn.playing .ph-pause { 
    opacity: 1; 
    transform: scale(1); 
}
.play-pause-btn .loading-spinner { 
    width: 32px; 
    height: 32px; 
    border: 4px solid rgba(255,255,255,0.2); 
    border-top-color: white; 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
    display: none; 
}
.play-pause-btn.loading .loading-spinner { display: block; }
.play-pause-btn.loading i { display: none; }
.small-control i { font-size: 1.5rem; }


/* ===== MINI-PLAYER ===== */
.mini-player { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 70px; 
    background-color: var(--miniplayer-bg); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border-top: 1px solid var(--stroke-primary); 
    padding: 0 1rem; 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    z-index: 999; 
    transform: translateY(100%); 
    opacity: 0; 
    transition: transform 0.4s ease, opacity 0.4s ease; 
    cursor: pointer; 
}
.mini-player.visible { 
    transform: translateY(0); 
    opacity: 1; 
}
.mini-player-cover { 
    width: 48px; 
    height: 48px; 
    border-radius: var(--radius-sm); 
    background-size: cover; 
    background-position: center; 
    flex-shrink: 0; 
}
.mini-player-info { 
    flex-grow: 1; 
    min-width: 0; 
}
.mini-player-info h4, .mini-player-info p { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.mini-player-info h4 { font-weight: 500; }
.mini-player-info p { font-size: 0.875rem; color: var(--text-secondary); }
.mini-player-controls { display: flex; gap: 0.5rem; }
.mini-player-controls .icon-button { width: 44px; height: 44px; background: transparent; border-color: transparent; cursor: pointer; z-index: 1; }
.mini-player-controls .icon-button:hover { background-color: rgba(255,255,255,0.1); }
#miniPlayerPlayPauseBtn .ph-pause { display: none; }
#miniPlayerPlayPauseBtn.playing .ph-play { display: none; }
#miniPlayerPlayPauseBtn.playing .ph-pause { display: block; }

/* ===== MODAIS ===== */
.modal-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(10, 10, 20, 0.6); 
    display: none; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000; 
    opacity: 0; 
    transition: opacity var(--transition-fast); 
    backdrop-filter: blur(10px); 
}
.modal-overlay.visible { 
    display: flex; 
    opacity: 1; 
}
.modal-content { 
    background: var(--bg-secondary); 
    border: 1px solid var(--stroke-primary); 
    border-radius: var(--radius-lg); 
    padding: 1.5rem; 
    width: 95vw; 
    max-width: 500px; 
    max-height: 90vh; 
    transform: scale(0.95); 
    transition: transform var(--transition-medium); 
    display: flex; 
    flex-direction: column; 
}
.modal-overlay.visible .modal-content { 
    transform: scale(1); 
}
.modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1rem; 
}
.modal-header h2 { 
    font-size: 1.5rem; 
}
.modal-body { 
    flex: 1; 
    overflow-y: auto; 
    padding-right: 0.5rem; 
}
.settings-subtitle { 
    font-size: 0.875rem; 
    text-transform: uppercase; 
    color: var(--text-secondary); 
    margin-top: 1.5rem; 
    margin-bottom: 0.5rem; 
    letter-spacing: 0.5px; 
}
.settings-subtitle:first-of-type { margin-top: 0; }
.setting-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 0; 
    border-bottom: 1px solid var(--stroke-primary); 
}
.setting-item:last-child { border-bottom: none; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--surface); transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: var(--text-secondary); transition: .4s; border-radius: 50%; }
input:checked + .slider { background-image: var(--accent-gradient); background-size: 200% auto; }
input:checked + .slider:before { background-color: white; transform: translateX(22px); }

body.light-theme .slider { background-color: #ccc; }
body.light-theme .slider:before { background-color: #f0f0f0; }
body.light-theme input:checked + .slider:before { background-color: white; }

.info-item { 
    padding: 0.75rem 0; 
    font-size: 0.9rem; 
    border-bottom: 1px solid var(--stroke-primary); 
}
.info-item:last-child { border-bottom: none; }
.info-item strong { 
    color: var(--text-secondary); 
    display: block; 
    margin-bottom: 0.25rem; 
    font-weight: 500;
}
.info-item a { color: var(--accent-primary); }

/* ===== RESPONSIVIDADE (MOBILE) ===== */
@media (max-width: 1024px) {
    .app-container { 
        display: flex; 
        flex-direction: column; 
        height: 100dvh; 
    }
    .sidebar-nav { 
        display: none; 
    }

    /* Otimização do Painel "Tocando Agora" para Mobile */
    .now-playing-panel {
        /* ▼▼▼▼▼ CORREÇÃO APLICADA AQUI ▼▼▼▼▼ */
        position: fixed;
        inset: 0; /* Define top, right, bottom, left como 0, preenchendo o ecrã */
        width: auto; /* Remove a largura fixa para permitir que 'inset' funcione */
        height: auto; /* Remove a altura fixa */
        max-width: 100vw;
        z-index: 100;
        border-radius: 0;
        border-left: none;
        transform: translateY(100%); /* Começa fora da tela */
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        /* ▲▲▲▲▲ FIM DA CORREÇÃO ▲▲▲▲▲ */
    }
    
    .app-container.panel-open .now-playing-panel { 
        transform: translateY(0); /* Desliza para a visão */
    }
    
    /* Esta regra não afeta mais o grid em mobile, pois ele é flexbox. */
    .app-container.panel-open { 
        grid-template-columns: 1fr; 
    }
    .resize-handle, .resize-handle-left { 
        display: none; 
    }
    
    .now-playing-panel .panel-content {
        overflow-y: auto;
        padding-bottom: 3rem; /* Espaço extra na rolagem */
    }

    .main-content { 
        padding: 1rem; 
        padding-bottom: 80px; /* Espaço para o mini-player */ 
    }
    .main-header { 
        flex-wrap: wrap; 
    }
    .search-bar { 
        min-width: 100%; 
        order: 2; 
    }
    .header-controls { 
        order: 1; 
        flex-grow: 1; 
        justify-content: flex-end; 
    }
    .dark-theme .header-controls .theme-toggle-btn .ph-moon,
    .light-theme .header-controls .theme-toggle-btn .ph-moon { 
        display: block; 
    }

    .station-grid-container { 
        grid-template-columns: 1fr; 
        gap: 0.75rem; 
    }
    .station-card { 
        flex-direction: row; 
        align-items: center; 
        padding: 0.75rem; 
    }
    .station-card:hover { 
        transform: none; 
    }
    .station-card-clickable { 
        display: flex; 
        flex-grow: 1; 
        align-items: center; 
        min-width: 0; 
    }
    .card-image-wrapper { 
        width: 60px; 
        height: 60px; 
        flex-shrink: 0; 
    }
    .card-image { 
        border-radius: var(--radius-sm); 
        padding-bottom: 0; 
        height: 100%; 
    }
    .card-play-button { 
        display: none; 
    }
    .card-info-wrapper { 
        flex-grow: 1; 
        padding: 0 1rem; 
        align-items: center; 
    }

    /* AJUSTES DE MODAL PARA MOBILE (BOTTOM SHEET) */
    .modal-overlay {
        align-items: flex-end; /* Alinha o modal na parte inferior */
    }
    
    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Arredonda só os cantos superiores */
        border-bottom: none;
        transform: translateY(100%); /* Posição inicial fora da tela */
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .modal-overlay.visible .modal-content {
        transform: translateY(0); /* Posição final na tela */
    }
}