/* Tabs (Right panel) */
.tabs{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.tab{ padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08);
  font-weight:600; cursor:pointer; user-select:none; color: #ffffff; }
.tab[aria-selected="true"], .tab.is-active{ background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.55); color: rgb(var(--accent-rgb)); }
.tab-panels{
  height: clamp(420px, 50vh, 420px);
  overflow: auto;
  width: 380px;
  flex-shrink: 0;
}
[role="tabpanel"][hidden]{ display:none; }
:root{
  --bg: #0a0a0c;
  --card: rgba(255,255,255,0.08);
  --card-strong: rgba(255,255,255,0.14);
  --tint: rgba(255,255,255,0.65);
  --accent: #8ac6ff;
  --accent-2: #caa6ff;
  --accent-rgb: 138,198,255;
  --accent-2-rgb: 202,166,255;
  --ok: #38e08f;
  --warn: #ffd166;
  --danger: #ff6b6b;
  --bg-overlay: rgba(10,10,12,0.25);
  --bg-image: url('radio-background.jpg');
}
*, *::before, *::after{ box-sizing: border-box; }
html, body{
  height:100%;
  margin:0;
  background: var(--bg, #0a0a0c);
  color: #f3f5f7;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(0deg, var(--bg-overlay), var(--bg-overlay)), var(--bg-image);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  opacity: .5;
}

/* Theme picker grid: changed from 3 to 4 columns */
.theme-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
@media (max-width: 680px){
  .theme-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .theme-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* PowerPlay Button (Admin) */
/* --- PowerPlay Button (Admin) - ACTUALIZAT CU TEMA --- */
.pp-trigger-btn {
  margin-top: 16px;
  width: 100%;
  /* Folosim variabilele de temă pentru gradient */
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b0b0e; /* Text închis pentru contrast pe culorile neon ale temei */
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  /* Umbra folosește culoarea temei */
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
  transition: transform 0.1s, box-shadow 0.2s;
  display: none; 
}
.pp-trigger-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}
.pp-trigger-btn:active {
  transform: translateY(1px);
}

/* --- Butonul NOW din tabel (Queue) - ACTUALIZAT CU TEMA --- */
.pp-day-btn.queue-btn {
  /* Fundal transparent cu tenta culorii temei */
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: rgb(var(--accent-rgb));
  font-weight: 800; /* Un pic mai gros pentru evidențiere */
  flex: 1.2;
}

.pp-day-btn.queue-btn:hover {
  background: rgb(var(--accent-rgb));
  color: #0b0b0e; /* Text negru la hover */
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
  border-color: transparent;
}

/* PowerPlay Modal & Table - NEW GLASS DESIGN */
.pp-modal-content {
  width: min(950px, 95vw);
  height: 85vh;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(10,10,14,0.95));
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}

.pp-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.03);
}

.pp-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  color: #fff;
}

.pp-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.pp-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

.pp-search {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 12px 16px;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  transition: border-color 0.2s, background 0.2s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.pp-search:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0,0,0,0.5);
}

.pp-table-wrapper {
  flex: 1;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(0,0,0,0.2);
  margin-bottom: 8px;
}

/* În style.css */

.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  
  /* MODIFICARE: Forțăm layout fix pentru a preveni scroll orizontal */
  table-layout: fixed; 
}

/* În style.css */

/* Coloana 1: Artist - 25% */
.pp-table th:nth-child(1) { 
  width: 25%; 
}

/* Coloana 2: Titlu - 45% */
.pp-table th:nth-child(2) { 
  width: 45%; 
}

/* Coloana 3: Butoane - Restul (30%) */
.pp-table th:nth-child(3) { 
  width: 30%; /* 100% - 25% - 45% = 30% */
}
/* În style.css */

.pp-table th {
  /* MODIFICARE: Schimbăm background-ul din transparent în solid închis */
  background: #18181b; 
  
  /* Opțional: adăugăm o umbră pentru a delimita clar header-ul de lista care se derulează */
  box-shadow: 0 4px 20px rgba(0,0,0,0.6); 
  
  padding: 14px 12px;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
  
  /* Putem elimina backdrop-filter deoarece acum culoarea este solidă */
  /* backdrop-filter: blur(10px); */
}

/* Caută .pp-table td și ÎNLOCUIEȘTE-L cu acest bloc: */

.pp-table td {
padding: 8px 12px; /* Ajustează padding-ul dacă e nevoie */
  border-bottom: 1px solid rgba(255,255,255,0.15); /* Linia de jos */
  vertical-align: middle;
  
/* Setările pentru text wrap */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-wrap: break-word;
  line-height: 1.35;
}

/* În style.css */

/* Permitem textului să treacă pe rând nou (wrap) DOAR pentru Artist și Titlu */
.pp-table td:nth-child(1),
.pp-table td:nth-child(2) {
  white-space: normal;       /* Permite textului să coboare pe rândul următor */
  overflow: visible;         /* Asigură vizibilitatea întregului text */
  text-overflow: clip;       /* Scoate punctele de suspensie (...) */
  word-wrap: break-word;     /* Rupe cuvintele foarte lungi dacă e necesar */
  line-height: 1.35;         /* O spațiere puțin mai aerisită între rânduri */
  padding-top: 8px;          /* Ajustare fină pentru aspect */
  padding-bottom: 8px;
}

.pp-table tr:last-child td { border-bottom: none; }
.pp-table tr:hover {
  background: rgba(255,255,255,0.06);
}

/* Day Buttons in Table */
.pp-days-row {
  display: flex;
  justify-content: center; /* Centrează butoanele orizontal */
  align-items: center;
  gap: 4px; /* Spațiu mic între butoane */
  width: 100%;
  height: 100%;
}

.pp-day-btn {
  
  width: auto;
  flex: 1;
  min-width: 26px; /* Lățime minimă mai mică */
  padding: 6px 0;  /* Padding lateral zero pentru a încăpea textul */
  font-size: 11px;
  
  padding: 6px 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: 42px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);

  width: auto;    /* Scoate lățimea fixă de 42px */
  flex: 1;        /* Le face să ocupe spațiul disponibil egal */
  min-width: 34px; /* Lățime minimă de siguranță */
  padding: 6px 2px; /* Padding lateral mai mic */
}
.pp-day-btn:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(var(--accent-rgb),0.4);
}
.pp-day-btn:active {
  transform: translateY(0);
}
.pp-day-btn.is-loading {
  opacity: 0.6;
  cursor: wait;
  animation: pulse 1s infinite;
}

.pp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 14px;
}
.pp-page-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 16px;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}
.pp-page-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.25);
}
.pp-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Top 10 Likes styles */
.top10-list{ display:block; margin-top:8px; border:1px solid rgba(255,255,255,0.22); border-radius:14px; overflow:hidden; background: rgba(255,255,255,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.top10-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 14px;
}
.top10-rank{ flex:0 0 auto; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; font-weight:700; background: rgba(var(--accent-rgb),0.18); border:1px solid rgba(var(--accent-rgb),0.55); color: rgb(var(--accent-rgb)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); }
.top10-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.top10-count{ flex:0 0 auto; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); font-weight:700; }
.top10-sep{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); opacity:.8; margin:0; border:none; }

/* Evolution badge for Top list */
.top10-evo{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); min-width:44px; justify-content:center; }
.top10-evo svg{ width:14px; height:14px; display:block; }
.top10-evo.up{ background: rgba(56,224,143,0.18); border-color: rgba(56,224,143,0.45); color:#38e08f; }
.top10-evo.down{ background: rgba(255,107,107,0.18); border-color: rgba(255,107,107,0.45); color:#ff6b6b; }
.top10-evo.same{ background: rgba(255,209,102,0.18); border-color: rgba(255,209,102,0.45); color:#ffd166; }
.top10-evo.new{ background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.55); color: rgb(var(--accent-rgb)); }

/* Glass cards for themes */
.theme-card{
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  border-radius: 16px; padding: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px rgba(0,0,0,0.18);
  cursor: pointer; user-select: none;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  text-align: center;
  outline: none;
  --chip-accent: rgba(255,255,255,0.55);
}
.theme-card:hover{ transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 24px rgba(0,0,0,0.25); }
.theme-card:focus-visible{ box-shadow: 0 0 0 2px var(--chip-accent, #7aa2ff), 0 6px 18px rgba(0,0,0,0.18); }
.theme-card.is-active{ border-color: var(--chip-accent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--chip-accent), transparent 70%), 0 10px 26px rgba(0,0,0,0.26); }
.theme-thumb{
  width: 100%; height: 28px; border-radius: 12px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #222; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.theme-label{
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .01em;
  opacity: .96;
  text-shadow: 0 1px 0 rgba(0,0,0,0.14);
}
.theme-card.is-active .theme-label {
  color: var(--accent);
}
.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: clamp(20px, 5vw, 60px);
}

.glass {
  width: min(900px, 92vw);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.03), transparent 35%),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-2-rgb), 0.03)),
    rgba(5, 5, 8, 0.75); /* Valoare de bază mai întunecată pentru Dark Energy */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-right-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  box-shadow:
    0 12px 50px -10px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,255,255,0.1);
  overflow: hidden;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.glass::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  z-index: 0;
}
.glass > *{ position: relative; z-index: 1; }
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-bottom: 1px solid rgba(255,255,255,0.28);
}
.brand{ display:flex; gap:14px; align-items:center; }
.logo{
  width:42px; height:42px; border-radius:12px; display:block; object-fit:cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 6px 20px rgba(0,0,0,0.25);
}
.brand-logo{ position:relative; width:42px; height:42px; }
.brand-logo .logo{ position:absolute; inset:0; width:100%; height:100%; transition: opacity 1s ease; }

h1 {
  margin: 0;
  font-size: clamp(18px, 2.3vw, 26px);
  font-weight: 700;
  letter-spacing: -0.5px;
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.65), 0 0 15px rgba(var(--accent-rgb), 0.35);
}
.subtitle{ opacity:0.8; font-size:12px; letter-spacing:0.20em; }

.body{
  display:grid; gap: 22px; padding: 22px;
  grid-template-columns: auto auto;
  overflow: auto;
  overflow-x:hidden;
}

.panel {
  background: rgba(20, 20, 22, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 18px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  max-width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.now-playing-panel{
  width: 420px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.reactions{ position:absolute; top:12px; right:16px; display:flex; gap:10px; z-index:3; }
.react-btn{ display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); cursor:pointer; user-select:none; font-weight:600; color: #f3f5f7; }
.react-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.react-btn svg{ width:16px; height:16px; display:block; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)); }
.react-btn.active{ background: rgba(56,224,143,0.18); border-color: rgba(56,224,143,0.45); }
.react-like.active{ background: rgba(var(--accent-rgb), 0.28); border-color: rgba(var(--accent-rgb), 0.65); color: rgb(var(--accent-rgb)); }
.react-dislike.active{ background: rgba(var(--accent-rgb), 0.36); border-color: rgba(var(--accent-rgb), 0.75); color: rgb(var(--accent-rgb)); }
.react-count{ min-width: 1.5em; text-align:right; }
.reactions[hidden]{ display:none; }

.controls{ display:flex; align-items:center; gap:16px; flex-wrap: nowrap; min-width:0; position:relative; z-index:1; }
.play{
  --size: 84px;
  width: var(--size) !important;
  height: var(--size) !important;
  min-width: var(--size) !important;
  min-height: var(--size) !important;
  max-width: var(--size) !important;
  max-height: var(--size) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.28);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(140% 140% at 30% 25%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.30) 22%, rgba(255,255,255,0.15) 38%, rgba(0,0,0,0.40) 72%, rgba(0,0,0,0.75) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.15));
  box-shadow:
    0 10px 30px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255,255,255,0.25),
    inset 0 -5px 10px rgba(0,0,0,0.2);
  transition: transform .08s ease, box-shadow .20s ease, filter .20s ease;
}
.play:hover{
  box-shadow:
    0 10px 30px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255,255,255,0.25),
    inset 0 -5px 10px rgba(0,0,0,0.2),
    0 0 18px rgba(255,255,255,0.10);
}
.play:active{ transform: translateY(1px) scale(.992); }
.play svg{ width: 28px; height: 28px; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)); }
.play::before{
  content: "";
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--accent-rgb),0.00) 0deg,
    rgba(var(--accent-rgb),0.20) 120deg,
    rgba(var(--accent-rgb),0.95) 160deg,
    rgba(var(--accent-rgb),0.20) 200deg,
    rgba(var(--accent-rgb),0.00) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 16px), #000 calc(50% - 12px));
          mask: radial-gradient(circle, transparent calc(50% - 16px), #000 calc(50% - 12px));
  filter: blur(0.8px);
  pointer-events: none;
  opacity: 0;
  transform: rotate(0deg);
}
.play::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,0.55), rgba(255,255,255,0.12) 34%, rgba(255,255,255,0.04) 52%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  mix-blend-mode: screen;
}
@keyframes rotate360 { to { transform: rotate(360deg); } }
.play.is-playing::before{ opacity: 1; animation: rotate360 6s linear infinite; }
#iconPlay, #iconPause{ filter: drop-shadow(0 1px 0 rgba(255,255,255,0.9)); }
#iconPlay path, #iconPause path{ fill:#ffffff; opacity: 1; }

.icon{ width:16px; height:16px; display:inline-block; vertical-align:-2px; margin-right:8px; opacity:.9; }
.icon--lg{ width:24px; height:24px; }
.truncate{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn{ --size: 48px; width:var(--size); height:var(--size); border-radius: 14px; border:1px solid rgba(255,255,255,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
  display:grid; place-items:center; cursor:pointer; user-select:none; transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease; }
.btn:active{ transform: translateY(1px) scale(.995); }
.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn svg{ width:20px; height:20px; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)); }

.titles{ min-width:0; flex:1 1 auto; margin-top:18px; overflow:hidden; }

.song {
  font-weight: 700;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7);
}
.artist{ opacity:0.85; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.song-year{
    position:absolute; right:22px; top:18px; font-size:102px;
    font-weight:800; line-height:1; color: rgba(255,255,255,0.10);
    filter: blur(2px); text-shadow: none; letter-spacing: 0.04em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    pointer-events:none; z-index:0; max-width: 40vw; text-align:right;
}



.login-button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(10,10,12,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  font-size: 12px;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
  transition: background .18s ease, border-color .18s ease, transform .1s ease, box-shadow .18s ease, opacity .15s ease;
}

.reactions .login-button{
  display: inline-flex;
  align-items: center;
}

.login-button:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.75);
  box-shadow: 0 0 14px rgba(var(--accent-rgb),0.4);
  opacity: 1;
}

.login-button:active{
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px rgba(0,0,0,0.55) inset;
}

.login-button.is-logged-in{
  background: rgba(var(--accent-rgb),0.2);
  border-color: rgba(var(--accent-rgb),0.7);
}

.login-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-label{
  white-space: nowrap;
  color: #ffffff;
}

.progress{ margin-top: 14px; position:relative; z-index:1; }
/* === LOGIN MODAL STYLES === */
.login-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.login-modal.active{
  opacity: 1;
  pointer-events: auto;
}

.login-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.login-modal-content{
  position: relative;
  z-index: 1;
  width: min(360px, 92vw);
  border-radius: 22px;
  padding: 20px 20px 18px;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(10,10,14,0.85));
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-modal-content h2{
  margin: 0 0 4px;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(var(--accent-rgb),0.5);
}

.login-message{
  margin: 0 0 6px;
  font-size: 13px;
  opacity: .9;
}

.login-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-field label{
  font-size: 12px;
  opacity: .9;
}

.login-field input{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(12,12,16,0.65);
  padding: 8px 10px;
  color: #fff;
  font-size: 13px;
}

.login-field input:focus{
  outline: none;
  border-color: rgba(var(--accent-rgb),0.8);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.75);
}

.login-error{
  min-height: 16px;
  font-size: 12px;
  color: #ff4d4f;
}

.login-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.login-submit,
.login-cancel,
.login-logout{
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
}

.login-submit{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b0b0e;
}

.login-cancel{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

.login-logout{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
}

.login-logged-in{
  margin-top: 4px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(0,0,0,0.25);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.login-modal-close:hover{
  background: rgba(0,0,0,0.45);
}

.login-form.is-busy{
  opacity: 0.7;
  pointer-events: none;
}
.bar{ position:relative; height: 10px; border-radius: 8px; background: rgba(var(--accent-rgb),0.18);
  border:1px solid rgba(255,255,255,0.35); overflow:hidden; }
.fill{ position:absolute; inset:0 auto 0 0; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); filter: saturate(140%); }
.times{ display:flex; justify-content:space-between; margin-top:6px; font-variant-numeric: tabular-nums; opacity:.9; }

.qr-block{ margin-top:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.qr-caption{ font-size:12px; opacity:.9; letter-spacing:.08em; text-transform:uppercase; }
.qr-img{ width: clamp(105px, 26vw, 174px); max-width: 100%; height:auto; border-radius:12px; padding:8px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 24px rgba(0,0,0,0.25); }

.qr-row{ display:flex; gap:16px; justify-content:center; align-items:flex-start; }
.qr-card{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.qr-label{ font-size:12px; font-weight:700; letter-spacing:.08em; opacity:.9; text-transform:uppercase; }
.qr-small{ width: 120px; }

.viz{
  margin-top:12px;
  height: 90px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  overflow: hidden;
  position: relative;
}
.viz canvas{ display:block; width:105%; height:100%; }

/* === Visualizer clickable and modal styles === */
.viz {
  cursor: pointer;
}
.viz:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.9);
  outline-offset: 3px;
}

.viz-settings-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2200;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.viz-settings-modal.active{
  opacity: 1;
  pointer-events: auto;
}

.viz-settings-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.viz-settings-content{
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  border-radius: 22px;
  padding: 20px 20px 18px;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(10,10,14,0.9));
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.viz-settings-content h2{
  margin: 0 0 6px;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(var(--accent-rgb),0.5);
}

.viz-settings-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 8px;
}

.viz-settings-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.viz-settings-label{
  opacity: .9;
  font-weight: 600;
}

.viz-settings-field select,
.viz-settings-field input[type="range"]{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(12,12,16,0.65);
  padding: 6px 8px;
  color: #fff;
  font-size: 13px;
}

.viz-settings-toggles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12px;
}

.viz-settings-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
}

.viz-settings-toggle input[type="checkbox"]{
  width: 14px;
  height: 14px;
}

.viz-settings-footer{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.viz-settings-btn{
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
}

.viz-settings-btn-reset{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

.viz-settings-btn-close{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b0b0e;
}

.viz-settings-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(0,0,0,0.25);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.viz-settings-close:hover{
  background: rgba(0,0,0,0.45);
}
.qr-media{ position: relative; display: inline-block; }
.qr-media .qr-link{ display:block; transition: opacity 1s ease; }
.qr-video{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:12px; padding:8px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 24px rgba(0,0,0,0.25);
  opacity:0; transition: opacity 1s ease; pointer-events:none; object-fit: cover;
}
.fade-in{ opacity:1 !important; }
.fade-out{ opacity:0 !important; }

.grid{ display:grid; gap:8px; min-width:0; }
.row{ display:flex; gap:12px; align-items:center; min-width:0; }
.art{ width:48px; height:48px; border-radius:12px; background: rgba(255,255,255,0.15); flex:0 0 auto; overflow:hidden;
  border: 1px solid rgba(255,255,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.art img{ width:100%; height:100%; object-fit:cover; display:block; }
.meta{ min-width:0; }
.meta .title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta .sub{ font-size:12px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.likes-list{ display:grid; gap:8px; }
.likes-item{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); }
.likes-item .title{ flex:1 1 auto; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.likes-item .sub{ font-size:10px; opacity:0.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.likepill{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:700; border:1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); }
.likepill svg{ width:16px; height:16px; display:block; }
.likepill.is-like{ background: rgba(var(--accent-rgb),0.22); border-color: rgba(var(--accent-rgb),0.55); color: rgb(var(--accent-rgb)); }
.likepill.is-dislike{ background: rgba(var(--accent-rgb),0.45); border-color: rgba(var(--accent-rgb),0.75); color: #0b0b0e; }

.staff-photo{ position:relative; width:100px; height:100px; border-radius:14px; flex:0 0 auto; padding:2px;
  border:1px solid rgba(255,255,255,0.55);
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08));
  box-shadow: 0 6px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.60);
  overflow:hidden; }
.staff-photo::before{ content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.65), rgba(255,255,255,0.25) 40%, rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  mix-blend-mode: screen; }
.staff-photo::after{ content:""; position:absolute; inset:2px; border-radius:10px; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
              radial-gradient(40% 80% at 0% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%),
              radial-gradient(40% 80% at 100% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%); }
.staff-photo > img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }

.contact-row{ display:flex; align-items:center; gap:8px; font-size:14px; line-height:1.4; margin:2px 0; opacity:.95; }
.contact-row svg{ width:16px; height:16px; flex:0 0 auto; opacity:.9; }
.contact-row a{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,0.35); }
.contact-row a:hover{ border-bottom-color: rgba(var(--accent-rgb),0.65); }

.staff-scroll{
  height: auto;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.staff-scroll::-webkit-scrollbar{ width: 8px; }
.staff-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.25); border-radius: 8px; }
.staff-scroll::-webkit-scrollbar-track{ background: transparent; }

.footer{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 16px 22px; border-top: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(0deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); font-size:12px; opacity:0.9; }
.badge{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.10); }

.volume{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.volume svg{ width:16px; height:16px; opacity:.9; }
.volume input[type="range"]{ -webkit-appearance: none; appearance:none; width:120px; height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) var(--p,50%), rgba(255,255,255,0.18) var(--p,50%)) no-repeat, rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.35); }
.volume input[type="range"]:focus{ outline: none; }
.volume input[type="range"]::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background: transparent; border:none; }
.volume input[type="range"]::-webkit-slider-thumb{ -webkit-appearance: none; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4); margin-top:-5px; }
.volume input[type="range"]::-moz-range-track{ height:6px; border-radius:999px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35); }
.volume input[type="range"]::-moz-range-progress{ height:6px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border:1px solid rgba(255,255,255,0.35); }
.volume input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border:none; }
@media (max-width: 820px), (pointer: coarse){ .volume{ display:none !important; } }

a{ color:inherit; }

#bgParticles{
  position: fixed;
  inset: 0;
  width: 105%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.staff-modal{ position:fixed; inset:0; background:rgba(0,0,0,0.65); display:flex; align-items:center; justify-content:center;
  z-index:2000; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.staff-modal.active{ opacity:1; pointer-events:auto; }
.staff-modal-content{ position:relative; max-width:90vw; max-height:90vh; border-radius:24px; overflow:hidden;
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05));
  border:1px solid rgba(255,255,255,0.35);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.45);
}
.staff-modal-content img{ display:block; max-width:100%; max-height:100%; border-radius:20px; }
.staff-modal-close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.25); backdrop-filter: blur(8px); display:grid; place-items:center; font-size:18px; }
.staff-modal-close:hover{ background:rgba(255,255,255,0.35); }

.switch{ position:relative; width:52px; height:30px; display:inline-block; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; border-radius:999px; background: rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); transition: background .18s ease, border-color .18s ease; }
.switch .slider::before{ content:""; position:absolute; width:26px; height:26px; left:2px; top:1px; border-radius:50%; background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.65); transition: transform .18s ease; }
.switch input:checked + .slider{ background: #34c759; border-color: #34c759; }
.switch input:checked + .slider::before{ transform: translateX(22px); }

.panel h2, .panel .subtitle {
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}
.tab.is-active {
  box-shadow: 0 0 10px -2px rgba(var(--accent-rgb), 0.5);
}
.theme-card.is-active {
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--chip-accent), transparent 70%),
    0 0 12px -2px var(--chip-accent),
    0 10px 26px rgba(0,0,0,0.26);
}
.play.is-playing {
  box-shadow:
    0 10px 30px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255,255,255,0.25),
    inset 0 -5px 10px rgba(0,0,0,0.2),
    0 0 15px rgba(var(--accent-rgb), 0.7),
    0 0 25px rgba(var(--accent-2-rgb), 0.5);
}
.progress .fill {
  box-shadow: 0 0 8px 1px rgba(var(--accent-rgb), 0.5), 0 0 12px 1px rgba(var(--accent-2-rgb), 0.4);
}

.wrap {
  perspective: 1500px;
}

/* Disable the floating/parallax effect globally when the <html> has .no-float */
.no-float .wrap { 
  perspective: none !important;
}
.no-float .glass { 
  transition: none !important; 
  transform: none !important; 
  will-change: auto !important;
}

@keyframes slideFadeInRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInListItem { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.rpanel-anim > * { opacity: 0; transform: translateX(18px); }

.panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-transition {
  transition: opacity 0.3s ease-in-out;
}
.fade-transition.is-fading {
  opacity: 0;
}

@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}
.skeleton {
  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(to right,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.1) 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  animation: shimmer 1.5s linear infinite;
  border-radius: 8px;
  color: transparent !important;
  user-select: none;
}
.skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}
.skeleton-rank { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; }
.skeleton-title { flex: 1; height: 20px; }
.skeleton-count { width: 50px; height: 26px; border-radius: 999px; flex-shrink: 0; }

.skeleton-likes-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    margin-bottom: 8px;
}
.skeleton-likes-main { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skeleton-likes-title { width: 80%; height: 18px; }
.skeleton-likes-sub { width: 50%; height: 12px; }
.skeleton-likepill { width: 40px; height: 28px; border-radius: 999px; flex-shrink: 0; }

.top30-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.top30-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.top30-modal-content {
  position: relative;
  width: min(600px, 95vw);
  max-height: 85vh;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.top30-modal-content h2 {
  margin: 0;
  padding: 18px 22px;
  font-size: clamp(18px, 2.3vw, 22px);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-bottom: 1px solid rgba(255,255,255,0.22);
}

.top30-list-container {
  padding: 12px;
  overflow-y: auto;
}

.top30-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
  color: white;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  transition: background .2s ease;
  z-index: 10;
}

.top30-modal-close:hover {
  background: rgba(0, 0, 0, 0.45);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 10, 12, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.loading-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgb(var(--accent-rgb));
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.qr-row {
  justify-content: center;
  margin-top: auto;
  margin-bottom: auto;
}

.viz {
  align-self: stretch;
  margin-top: auto;
  margin-bottom: 0px;
}

/* === MEDIA QUERIES === */

@media (max-width: 820px) {
  /* Previne derularea întregii pagini */
  html, body {
    overflow: hidden;
  }
  
  /* Containerul principal ocupă tot ecranul, fără margini */
  .wrap {
    padding: 0;
    height: 100vh; /* Ocupă 100% din înălțimea vizibilă */
    perspective: none !important;
  }
  
  /* Cardul de sticlă se extinde pe tot ecranul */
  .glass {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Antetul și subsolul nu se micșorează */
  .header, .footer {
    flex-shrink: 0;
  }

  /* **FIXUL PRINCIPAL**: Corpul devine zona derulabilă */
  .body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    flex-grow: 1;      /* Ocupă tot spațiul rămas */
    overflow-y: auto;  /* Permite derulare DOAR pe verticală */
    min-height: 0;     /* Necesar pentru a preveni bug-uri de overflow în flexbox */
  }

  .panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .now-playing-panel {
    min-height: 420px;
    flex-shrink: 0; /* Previne micșorarea panoului de player */
  }
  
  /* Panoul cu tab-uri nu mai are propria derulare, lasă părintele (.body) să o facă */
  .tab-panels {
    width: 100% !important;
    height: auto;
    max-height: none;
    overflow: visible; 
  }

  .controls{ flex-wrap: wrap; gap: 12px; }
  .titles{ flex: 1 1 220px; min-width: 0; }
  .song-year{ font-size:64px; right:18px; top:16px; max-width: 90vw; }
  img{ max-width:100%; height:auto; }

  .no-float .wrap { perspective: none !important; }
  .no-float .glass { transition: none !important; transform: none !important; will-change: auto !important; }
}

@media (max-width: 480px) {
  .qr-small{ width: 100px; }
}

@media (max-width: 820px), (pointer: coarse) {
  .song-year{ font-size:64px; right:18px; top:16px; max-width: 56vw; }
  .volume{ display:none !important; }
}


/* === IMPLEMENTARE FINALĂ ȘI CORECTĂ PENTRU FUNDALUL CU ARTA ALBUMULUI === */

/* 1. Panoul player-ului (containerul principal din stânga) */
.now-playing-panel {
  position: relative;
  overflow: hidden;
}

/* 2. Fundalul cu arta albumului */
#album-art-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(0.7);
  transform: scale(1.15);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

/* 3. Wrapper-ul pentru conținut (controale, bară, QR etc.) */
.player-content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

/* 4. Butoanele Like/Dislike */
.reactions {
  z-index: 3;
}

/* 5. Vizualizer Preview Styles (NOU) */
.viz-preview-wrapper {
  position: relative;
  width: 100%;
  height: 120px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.viz-preview {
  width: 100%;
  height: 100%;
  display: block;
}

.viz-preview-label {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 10;
  background: rgba(0,0,0,0.3);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Apply Button Styling */
.viz-settings-btn-apply {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b0b0e;
  border: none;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.viz-settings-btn-apply:hover {
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.6);
}
.viz-settings-btn-apply:active {
  transform: translateY(1px);
}

/* === DARK ENERGY EXCLUSIVE STYLES === */
[data-theme="dark-energy"] .play {
  /* Eliminăm gradientele albe vechi și punem un negru "brushed metal" */
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent 40%),
    linear-gradient(145deg, #1a1a1c, #050505);
  
  /* Margine fină, metalică */
  border-color: rgba(255, 255, 255, 0.15);
  
  /* Umbre interioare și exterioare pentru volum (3D dark look) */
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.1), 
    0 10px 30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(0,0,0,1);
}

/* Când e activ, să aibă un inel fin de lumină, nu o explozie */
[data-theme="dark-energy"] .play.is-playing {
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.1),
    0 15px 35px rgba(0,0,0,0.9),
    0 0 20px rgba(var(--accent-rgb), 0.2); /* Glow discret colorat */
}

/* Iconița de play să fie ușor gri, nu alb pur (pentru eleganță) */
[data-theme="dark-energy"] .play svg path {
  fill: #e0e0e0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* === DARK ENERGY: PROGRESS BAR & VOLUME (Stealth Edition) === */

/* 1. Bara de progres (linia care se umple) */
[data-theme="dark-energy"] .fill {
  /* Gradient metalic: pornește dark și devine "steel grey" spre capăt */
  background: linear-gradient(90deg, #2b2b2b 0%, #546e7a 60%, #b0bec5 100%);
  
  /* Umbră fină albă pentru efectul de "fum" (smoke glow) */
  box-shadow: 0 0 12px rgba(176, 190, 197, 0.25);
}

/* 2. Slider-ul de Volum (Track-ul și Fill-ul) */
[data-theme="dark-energy"] .volume input[type="range"] {
  /* Track-ul (partea goală) să fie foarte închisă */
  background-color: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.1);

  /* Fill-ul (partea plină): suprascriem gradientul standard cu unul gri-fumuriu */
  /* Nota: Folosim var(--p) care este actualizat de JS pentru poziție */
  background-image: linear-gradient(90deg, #2b2b2b 0%, #78909c var(--p, 50%), transparent var(--p, 50%));
}

/* 3. Butonul Slider-ului de Volum (Bila de tragere - Thumb) - Webkit (Chrome/Safari) */
[data-theme="dark-energy"] .volume input[type="range"]::-webkit-slider-thumb {
  background: #1a1a1c; /* Negru mat în interior */
  border: 1px solid #607d8b; /* Inel fin de oțel */
  box-shadow: 0 2px 6px rgba(0,0,0,0.9); /* Umbră puternică */
}

/* 4. Butonul Slider-ului de Volum - Mozilla (Firefox) */
[data-theme="dark-energy"] .volume input[type="range"]::-moz-range-thumb {
  background: #1a1a1c;
  border: 1px solid #607d8b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

/* 5. Ajustare fină la hover pentru Progress Bar */
[data-theme="dark-energy"] .progress:hover .fill {
  filter: brightness(1.2); /* Se luminează puțin la hover, ca un metal lustruit */
}


/* === DARK ENERGY: NO ALBUM ART (Smoke Glass Morph) === */
[data-theme="dark-energy"] #album-art-bg {
  /* Anulăm imaginea (important, ca să suprascriem orice ar rămâne agățat) */
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 45%), /* Lumină difuză sus */
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 1), transparent 60%),       /* Întuneric jos */
    linear-gradient(180deg, #1c1c1f 0%, #000000 100%) !important;                  /* Baza: Negru Cărbune */
  
  /* Setăm opacitatea la 1 ca să se vadă gradientul */
  opacity: 1 !important;
  
  /* Blur puternic pentru a combina layerele într-un "fum" omogen */
  filter: blur(40px) contrast(1.1) !important;
  
  /* Eliminăm efectele vechi de mascare */
  mask-image: none !important;
  -webkit-mask-image: none !important;
  transform: scale(1.1) !important; /* Zoom mic pentru a ascunde marginile blurate */
}

/* === VOLUME & CURSOR TWEAKS === */

/* Mânuță pe sliderul de volum */
.volume input[type="range"] {
  cursor: pointer;
}

/* Mânuță și efect pe iconița de difuzor (pentru Mute) */
.volume svg {
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.volume svg:hover {
  opacity: 1;
  transform: scale(1.1);
}
.volume svg:active {
  transform: scale(0.95);
}

/* === GLOBAL MODAL CLOSE FIX & ANIMATION === */

/* 1. Asigurăm că toate butoanele de închidere sunt deasupra oricărui element (z-index) */
.login-modal-close,
.staff-modal-close,
.top30-modal-close,
.viz-settings-close {
  z-index: 200 !important; /* Strat superior */
  cursor: pointer;
  transition: all 0.3s ease; /* Tranziție fluidă pentru toate */
}

/* 2. Stilul specific pentru tema DARK ENERGY (Mat + Animație Roșie) */
[data-theme="dark-energy"] .login-modal-close,
[data-theme="dark-energy"] .staff-modal-close,
[data-theme="dark-energy"] .top30-modal-close,
[data-theme="dark-energy"] .viz-settings-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(4px);
}

/* 3. Efectul Hover (Roșu + Rotire) pe Dark Energy */
[data-theme="dark-energy"] .login-modal-close:hover,
[data-theme="dark-energy"] .staff-modal-close:hover,
[data-theme="dark-energy"] .top30-modal-close:hover,
[data-theme="dark-energy"] .viz-settings-close:hover {
  background: rgba(220, 20, 60, 0.5); /* Crimson Red translucid */
  border-color: rgba(220, 20, 60, 0.8);
  transform: rotate(90deg); /* Rotirea fancy */
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.4); /* Glow roșu */
}