/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 1920px) {
    .tracks { grid-template-columns: repeat(6, 1fr); }
    .main   { max-width: 1680px; }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .tracks { grid-template-columns: repeat(5, 1fr); }
    .main   { max-width: 1400px; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .tracks { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tracks  { grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .hero    { padding: 60px 32px; }
    .header  { padding: 15px 28px; }
    .player  { padding: 18px 28px; gap: 24px; }
    .main    { padding: 30px 28px; padding-bottom: 130px; }
}

@media (min-width: 481px) and (max-width: 767px) {
    .tracks        { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .header        { padding: 14px 18px; flex-direction: column; }
    .search-box    { margin: 0; max-width: none; order: 2; width: 100%; }
    .logo          { order: 1; }
    .admin-btn     { order: 3; }
    .hero          { padding: 44px 20px; margin-bottom: 36px; }
    .controls      { flex-direction: column; align-items: center; }
    .controls select { width: 100%; max-width: 280px; }
    .player        { padding: 14px 18px; flex-direction: column; gap: 14px; }
    .player-info, .player-controls,
    .player-progress, .player-volume { width: 100%; justify-content: center; min-width: auto; }
    .main          { padding: 18px; padding-bottom: 200px; }
    .disclaimer-content { flex-direction: column; }
}

@media (max-width: 480px) {
    .tracks        { grid-template-columns: 1fr; gap: 18px; }
    .main          { padding: 14px; padding-bottom: 220px; }
    .header        { padding: 14px; }
    .hero          { padding: 36px 18px; margin-bottom: 28px; }
    .track-cover, .track-cover-placeholder { height: 180px; }
    .track-info    { padding: 18px; }
    .player        { padding: 14px; }
    .player-thumb img { width: 50px; height: 50px; }
    .ctrl-btn      { width: 40px; height: 40px; }
    #playBtn       { width: 48px; height: 48px; }
    .controls select { font-size: 16px; }
    .player-volume input { width: 70px; }
    .player-track-title,
    .player-track-artist { max-width: 140px; }
    .auth-modal    { padding: 24px 18px; }
    .playlist-grid { grid-template-columns: repeat(2, 1fr); }
    .playlist-detail-modal { max-height: 90vh; }
}

@media (max-width: 767px) and (orientation: landscape) {
    .hero   { padding: 28px 20px; }
    .hero h1 { font-size: 1.8rem; }
    .player { flex-direction: row; padding: 10px 20px; }
    .main   { padding-bottom: 90px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .track-card:hover { transform: none; }
    .bg-gradient { animation: none; }
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    .track-overlay { opacity: 0.85; background: rgba(0,0,0,0.35); }
    .track-card:hover { transform: none; box-shadow: var(--shadow); }
    .ctrl-btn { min-width: 44px; min-height: 44px; }
}

/* Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .track-cover, .player-thumb img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print */
@media print {
    .player, .header, .controls, .toast, .share-toast { display: none; }
    .main { padding: 0; }
    .tracks { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .track-card {
        background: white; color: black;
        border: 1px solid #ccc; break-inside: avoid;
    }
}