body { transition: background-color 0.3s, color 0.3s; padding-bottom: 220px; overflow-x: hidden; }
        @media (min-width: 768px) { body { padding-bottom: 160px; } }
        @media (min-width: 992px) { body { padding-bottom: 130px; } }
        
        .utwor-card { transition: transform 0.2s, background-color 0.3s; }
        .utwor-card:hover { transform: translateY(-2px); }
        .utwor-card.playing { border-left: 4px solid #1db954 !important; background-color: rgba(29, 185, 84, 0.05); }
        
        .miejsce-badge { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: bold; border-radius: 50%; }
        @media (min-width: 576px) { .miejsce-badge { min-width: 45px; height: 45px; font-size: 1.25rem; } }
        
        .miejsce-1 { background-color: #ffd700; color: #000 !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
        .btn-play { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.9rem; transition: 0.2s; flex-shrink: 0; }
        @media (min-width: 576px) { .btn-play { width: 45px; height: 45px; font-size: 1.1rem; } }
        
        .player-bar { position: fixed; bottom: 0; left: 0; width: 100%; box-shadow: 0 -5px 20px rgba(0,0,0,0.3); z-index: 1030; }
        .stat-badge { font-size: 0.68rem; padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.08); display: inline-block; }
        [data-bs-theme="dark"] .stat-badge { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
        .trend-badge { font-size: 0.75rem; font-weight: bold; display: inline-block; text-align: center; min-width: 20px; }

        .btn-vote .vote-text { display: inline; }

        #global-audio { max-width: 100%; height: 34px; }
        @media (max-width: 767.98px) {
            #global-audio::-webkit-media-controls-volume-control-container,
            #global-audio::-webkit-media-controls-volume-slider {
                display: none !important;
            }
        }

        .main-row-layout { display: block; width: 100%; }
        .left-tracks-column { width: 100%; }
        .tablet-progress-container { display: none; }

        .section-header { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-top: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid rgba(29, 185, 84, 0.3); }

        @media (max-width: 575.98px) {
            .utwor-card .card-body { padding: 10px !important; }
            .track-title { font-size: 0.88rem !important; white-space: normal !important; word-wrap: break-word; word-break: min-content; line-height: 1.3; margin-bottom: 4px !important; }
            .trend-container { width: 32px !important; text-align: center; display: flex; align-items: center; justify-content: center; }
            .btn-vote .vote-text { display: none !important; }
            .btn-vote { font-size: 1rem !important; padding: 4px 10px !important; width: auto !important; }
            .vote-zone { border-top: none !important; padding-top: 0 !important; padding-left: 8px !important; flex-direction: column !important; gap: 2px !important; min-width: 45px !important; align-items: center !important; justify-content: center !important; }
        }

        @media (min-width: 576px) and (max-width: 1024px) {
            body { padding-bottom: 0 !important; }
            .main-row-layout { display: flex; flex-direction: row; height: calc(100vh - 170px); overflow: hidden; }
            .left-tracks-column { flex: 1; overflow-y: auto; padding-right: 12px; width: auto; }
            .right-tablet-player-column { display: block !important; width: 320px; min-width: 320px; height: 100%; }
            .player-bar { position: relative !important; bottom: auto !important; left: auto !important; width: 100% !important; height: 100% !important; border-top: none !important; border-left: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 25px 15px !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 25px rgba(0,0,0,0.4) !important; }
            .player-bar .row { display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; gap: 25px 0 !important; }
            .player-bar .row > div { width: 100% !important; text-align: center !important; }
            #player-track-title { font-size: 1.4rem !important; max-width: 100% !important; color: #1db954 !important; margin-bottom: 10px; }
            #player-toggle { width: 80px !important; height: 80px !important; font-size: 2.2rem !important; }
            #player-prev, #player-next { width: 50px !important; height: 50px !important; font-size: 1.4rem !important; }
            #global-audio { display: none !important; }
            .tablet-progress-container { display: block !important; }
            .car-slider { height: 12px !important; cursor: pointer; }
            .track-title { font-size: 1.1rem !important; line-height: 1.4; margin-bottom: 6px !important; }
            .stat-badge { font-size: 0.78rem; padding: 3px 8px; }
            .vote-zone { min-width: 110px !important; justify-content: flex-end !important; gap: 8px !important; }
            .btn-vote .vote-text { display: inline !important; }
            .trend-container { width: 38px !important; text-align: center; display: flex; align-items: center; justify-content: center; }
        }