/* Reset για conflicts */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100% );
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem; /* Χρήση rem αντί για px */
    }
    
    .main-container {
      width: 100%; /* Πιο ευέλικτο πλάτος */
      max-width: 1100px;
      margin: 1.25rem auto; /* Χρήση rem */
      padding: 1rem; /* Χρήση rem */
    }
    
    .player-wrapper {
      display: flex;
      flex-direction: row;
      width: 100%;
      /* Αφαίρεση σταθερού height, χρήση min/max-height */
      min-height: 400px; /* Ελάχιστο ύψος για desktop */
      max-height: 75vh;
      background: #fff;
      border: 2px solid #8B0000; 
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }
    
    .video-section {
      flex: 2;
      background-color: #000;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    
    .player-screen {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #111;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }
    
    #player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    .player-controls {
      background: linear-gradient(to right, #2c3e50, #4a6491);
      color: white;
      padding: 0.75rem 1rem; /* Χρήση rem */
      display: flex;
      justify-content: center;
      gap: 1.25rem; /* Χρήση rem */
      border-top: 3px solid #3498db;
      flex-shrink: 0;
      min-height: 3.75rem; /* Χρήση rem */
      flex-wrap: wrap; /* Προσθήκη flex-wrap για καλύτερη απόκριση */
    }
    
    .player-controls button {
      background: #2980b9;
      color: white;
      border: none;
      padding: 0.625rem 1.25rem; /* Χρήση rem */
      font-size: 1.3rem; /* Χρήση rem 0.9375 */
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 0.5rem; /* Χρήση rem */
      min-width: 8rem; /* Χρήση rem */
      justify-content: center;
      height: 2.8125rem; /* Χρήση rem */
    }
    
    .player-controls button:hover {
      background: #3498db;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
    }
    
    .playlist-section {
      flex: 1;
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      background: #f8f9fa;
      border-left: 3px solid #8B0000; 
      min-height: 0;
    }
    
    .playlist-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.625rem 1rem; /* Χρήση rem */
      background: linear-gradient(135deg, #1a2980, #26d0ce);
      color: white;
      border-bottom: 3px solid rgba(255, 255, 255, 0.2);
      min-height: 4rem; /* Χρήση rem */
      flex-shrink: 0;
      overflow: hidden;
    }
    
    .playlist-info {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 0.625rem; /* Χρήση rem */
        display: flex;
        align-items: center;
        gap: 0.9375rem; /* Χρήση rem */
    }

    .playlist-header-thumb {
        width: 3rem; /* Χρήση rem */
        height: 3rem; /* Χρήση rem */
        border-radius: 10px;
        object-fit: cover;
        flex-shrink: 0;
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    .playlist-info-text {
        overflow: hidden;
        flex: 1;
    }

    .playlist-info-text h2 {
      margin: 0 0 0.3125rem 0; /* Χρήση rem */
      font-size: clamp(1.3rem, 1.5vw, 1.4rem); /* 1rem, 1.5vw, 1.125rem */
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .playlist-info-text p {
      margin: 0;
      font-size: clamp(0.9rem, 1vw, 1.0rem); /* 0.75rem, 1vw, 0.8125rem */
      opacity: 0.9;
    }
    
    .playlist-header.full-title .playlist-info-text {
       white-space: normal;
      overflow: visible;
    }

    .playlist-header.full-title .playlist-info-text h2 {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      line-height: 1.3;
      max-height: 2.6em;
    }
    
    .songs-container {
      flex: 1;
      padding: 1rem; /* Χρήση rem */
      overflow-y: auto;
      background: white;
      -webkit-overflow-scrolling: touch !important;
      min-height: 0;
    }
    
    .songs-container h3 {
      margin: 0 0 0.9375rem 0; /* Χρήση rem */
      color: #2c3e50;
      font-size: 1.5rem; /* Χρήση rem */
      padding-bottom: 0.5rem; /* Χρήση rem */
      border-bottom: 2px solid #eee;
    }
    
    .songs-list {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    .song-item {
      display: flex;
      align-items: center;
      gap: 0.75rem; /* Χρήση rem */
      padding: 0.75rem; /* Χρήση rem */
      border-bottom: 1px solid #eee;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 8px;
      margin-bottom: 0.375rem; /* Χρήση rem */
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
    }
    
    .song-item:hover {
      background-color: #f8f9fa;
      transform: translateX(5px);
    }
    
    .song-item.active {
      background-color: #e3f2fd;
      border-left: 4px solid #2196f3;
      font-weight: bold;
      scroll-margin-top: 1.25rem; /* Χρήση rem */
    }
    
    .song-thumb {
      width: 5rem; /* Χρήση rem */
      height: 3.4375rem; /* Χρήση rem */
      object-fit: cover;
      border-radius: 6px;
      flex-shrink: 0;
      border: 2px solid #ddd;
    }
    
    .song-title {
      flex: 1;
      font-size: 1.2rem; /* Χρήση rem 0.8125 */
      color: #34495e;
      line-height: 1.4;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    
    /* Media Queries - Επανεξέταση και απλοποίηση */
    /* Προσπάθεια αποφυγής !important όπου είναι δυνατόν */

    @media (max-width: 1024px) {
      .player-wrapper {
        min-height: 350px; /* Προσαρμογή ελάχιστου ύψους */
      }
      .player-controls button {
        min-width: 7rem; /* Χρήση rem */
        padding: 0.625rem 1rem; /* Χρήση rem */
      }
    }
    
    @media (max-width: 768px) {
      body {
        padding: 0.5rem;
      }
      .main-container {
        padding: 0.5rem;
        height: 100vh; 
        max-height: -webkit-fill-available; 
      }
      .player-wrapper {
        flex-direction: column;
        height: 100%; 
        max-height: 100%; 
        min-height: 0; 
        overflow: hidden; 
      }
      .video-section {
        height: 40vh; /* Μείωση ύψους για πιο ισορροπημένη αναλογία */
        min-height: 250px; /* Ελάχιστο ύψος για να μην γίνει πολύ μικρό */
        max-height: 50vh; /* Μέγιστο ύψος για να μην γίνει υπερβολικά μεγάλο */
        flex-shrink: 0; 
      }
      .playlist-section {
        height: 60vh; /* Αύξηση ύψους για να καλύψει τον υπόλοιπο χώρο */
        min-height: 400px; /* Ελάχιστο ύψος */
        flex: 1; 
        overflow: hidden; 
        display: flex; 
        flex-direction: column; 
      }
      .playlist-header {
        padding: 0.75rem 1rem;
        min-height: 4rem;
        flex-shrink: 0;
      }
      .playlist-info-text h2 {
        font-size: clamp(1.2rem, 2vw, 1.3rem); /* 0.9rem, 2vw, 1rem */
      }
      .playlist-info-text p {
        font-size: clamp(0.9rem, 1.5vw, 1.0rem); /* 0.65rem, 1.5vw, 0.75rem */
      }
      .playlist-header-thumb {
        width: 2.5rem;
        height: 2.5rem;
      }
      .player-controls {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.625rem;
        padding: 0.625rem;
        min-height: 3.4375rem;
      }
      .player-controls button {
        min-width: 6rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        height: 2.375rem;
      }
      .song-item {
        padding: 0.625rem;
        gap: 0.625rem;
      }
      .song-thumb {
        width: 4rem;
        height: 2.8125rem;
      }
      .song-title {
        font-size: 1.4rem; /* Αύξηση μεγέθους γραμματοσειράς 0.875 */
      }
      .songs-container {
        overflow-y: scroll; 
        -webkit-overflow-scrolling: touch; 
        flex: 1; 
        min-height: 0; 
        padding: 0.75rem; 
      }
      .songs-container h3 {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
      }
    }
    
    @media (max-width: 480px) {
      .main-container {
        padding: 0.3rem; 
        margin: 0.3rem auto; 
      }
      .video-section {
        height: 40vh; 
      }
      .playlist-section {
        height: 60vh; 
      }
      .player-controls button {
        min-width: 5rem;
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
        height: 2.2rem;
      }
      .songs-container {
        padding: 0.625rem; 
      }
      .playlist-header-thumb {
        width: 1.8rem;
        height: 1.8rem;
      }
      .playlist-info-text h2 {
        font-size: clamp(1.0rem, 2.5vw, 1.2rem); /* 0.7rem, 2.5vw, 0.8rem */
        line-height: 1.3;
      }
      .playlist-info-text p {
        font-size: clamp(0.6rem, 2vw, 0.65rem); 
      }
      .playlist-info {
        gap: 0.5rem; 
      }
    }
    
    /* Media queries για ύψος οθόνης */
    /* Νέες media queries για tablets σε portrait mode */
    @media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
      .player-wrapper {
        flex-direction: column;
        min-height: 70vh;
        max-height: 80vh;
      }
      .video-section {
        height: 50vh;
        min-height: 400px;
        max-height: 50vh;
      }
      .playlist-section {
        height: 40vh;
        min-height: 300px;
        max-height: 45vh;
      }
      .player-controls {
        padding: 0.75rem 1rem;
        gap: 1rem;
      }
      .player-controls button {
        min-width: 7rem;
        padding: 0.625rem 1rem;
        font-size: 0.9375rem;
        height: 2.8125rem;
      }
      .song-title {
        font-size: 1.5rem;
      }
    }

    @media (min-height: 900px) { .player-wrapper { min-height: 600px; max-height: 80vh; } }
    @media (min-height: 1080px) { .player-wrapper { min-height: 650px; max-height: 85vh; } }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #555; }
    
    body { -webkit-text-size-adjust: 100%; touch-action: pan-y; }