:root{
  --black:#000000;
  --panel:#0c0c0c;
  --panel-2:#131313;
  --line:#232323;
  --lime:#a4d92f;
  --lime-2:#c3f24a;
  --cyan:#22cfe0;
  --white:#f5f6f5;
  --muted:#8b8f88;
  --radius:14px;
  --radius-lg:22px;
}

*{box-sizing:border-box;}
/* L'attributo hidden deve sempre vincere sulle regole display delle classi (evita elementi "fantasma" visibili) */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  position:relative;
}

.bg-glow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(600px 300px at 15% -5%, rgba(164,217,47,0.14), transparent 60%),
    radial-gradient(600px 300px at 100% 10%, rgba(34,207,224,0.12), transparent 60%);
}

/* ---------------- Topbar ---------------- */
.topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 28px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}

.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{width:38px;height:auto;flex-shrink:0;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{
  font-family:'Segoe UI',sans-serif;
  font-weight:800;
  letter-spacing:1px;
  font-size:20px;
  color:#fff;
}
.brand-accent{color:var(--lime-2);margin-left:6px;font-weight:800;}
.brand-tagline{
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
}
.brand-tagline .lime{color:var(--lime-2);}

.mode-switch{
  position:relative;
  display:flex;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  gap:2px;
}
.mode-btn{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  letter-spacing:1px;
  border-radius:999px;
  cursor:pointer;
  transition:color .25s ease;
}
.mode-btn svg{width:17px;height:17px;}
.mode-btn.active{color:#000;}
.mode-thumb{
  position:absolute;
  top:4px;
  left:4px;
  height:calc(100% - 8px);
  width:calc(50% - 4px);
  background:linear-gradient(120deg,var(--lime-2),var(--cyan));
  border-radius:999px;
  transition:transform .3s cubic-bezier(.65,0,.35,1);
  box-shadow:0 0 18px rgba(164,217,47,0.35);
}

.privacy-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.privacy-btn svg{width:15px;height:15px;}
.privacy-btn:hover{color:var(--white);border-color:#3a3a3a;}

.radio-btn{position:relative;}
.radio-btn .radio-dot{
  width:7px;height:7px;border-radius:50%;
  background:#555;
  flex-shrink:0;
}
.radio-btn.playing{color:var(--white);border-color:rgba(255,92,92,0.4);}
.radio-btn.playing .radio-dot{
  background:#ff5c5c;
  box-shadow:0 0 6px rgba(255,92,92,0.8);
  animation:radioPulse 1.4s ease-in-out infinite;
}
.radio-btn.loading .radio-dot{
  background:#e0b022;
  animation:radioPulse 0.8s ease-in-out infinite;
}
@keyframes radioPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.4;transform:scale(0.75);}
}

/* ---------------- Privacy modal ---------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(4px);
}
.modal-overlay[hidden]{
  display:none;
}
.modal-card{
  width:100%;
  max-width:460px;
  max-height:85vh;
  overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 26px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  animation:fadeUp .25s ease;
}
.modal-icon{
  width:44px;height:44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(120deg, rgba(164,217,47,0.18), rgba(34,207,224,0.1));
  color:var(--lime-2);
  margin-bottom:14px;
}
.modal-icon svg{width:22px;height:22px;}
.modal-card h2{
  margin:0 0 14px;
  font-size:17px;
  color:#fff;
}
.modal-list{
  margin:0 0 22px;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.modal-list li{
  font-size:12.5px;
  line-height:1.55;
  color:var(--muted);
}
.modal-list b{color:var(--white);}
.modal-actions{
  display:flex;
  justify-content:flex-end;
}
.modal-actions .pill-btn{padding:11px 24px;}
.mode-thumb.right{transform:translateX(100%);}

/* ---------------- Main / panels ---------------- */
.main{
  position:relative;
  z-index:1;
  flex:1;
  padding:24px 28px 140px;
  max-width:960px;
  width:100%;
  margin:0 auto;
}
.panel{display:none;}
.panel.active{display:block;animation:fadeUp .35s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.panel-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
  position:sticky;
  top:0;
  z-index:6;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(10px);
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.4px;
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--white);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.pill-btn svg{width:16px;height:16px;}
.pill-btn:hover{transform:translateY(-1px);border-color:#3a3a3a;}
.pill-btn.primary{
  background:linear-gradient(120deg,var(--lime-2),var(--cyan));
  color:#000;
  border:none;
}
.pill-btn.ghost{background:transparent;}

.search-input{
  flex:1;
  min-width:180px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--white);
  padding:11px 16px;
  border-radius:999px;
  font-size:13px;
  outline:none;
}
.search-input:focus{border-color:var(--lime);}
.search-input::placeholder{color:var(--muted);}

.count-badge{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.count-badge.scan-status{
  color:var(--lime-2);
  border-color:rgba(164,217,47,0.4);
}

.stop-btn{
  background:transparent;
  color:#ff6b6b;
  border-color:rgba(255,107,107,0.4);
  padding:9px 16px;
}
.stop-btn:hover{background:rgba(255,107,107,0.1);border-color:rgba(255,107,107,0.6);}

.min-duration-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
.min-duration-select{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--white);
  font-size:12px;
  padding:5px 8px;
  border-radius:8px;
  cursor:pointer;
  outline:none;
}
.min-duration-select:focus{border-color:var(--lime);}

.scan-hint{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 18px;
  padding:10px 14px;
  border-radius:10px;
  background:var(--panel);
  border:1px solid var(--line);
}
.scan-hint[hidden]{
  display:none;
}
.scan-hint p{margin:0;flex:1;}
.scan-hint b{color:var(--lime-2);font-weight:700;}
.scan-hint button{
  flex-shrink:0;
  width:22px;height:22px;
  border:none;background:transparent;color:var(--muted);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.scan-hint button svg{width:13px;height:13px;}
.scan-hint button:hover{color:var(--white);background:rgba(255,255,255,0.08);}

.saved-folders{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.saved-folders[hidden]{
  display:none;
}
.saved-folder-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 8px 7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  font-size:12px;
  color:var(--muted);
}
.saved-folder-chip.synced{
  border-color:rgba(164,217,47,0.35);
  color:var(--white);
}
.saved-folder-chip .dot{
  width:7px;height:7px;border-radius:50%;
  background:#555;
  flex-shrink:0;
}
.saved-folder-chip.synced .dot{background:var(--lime-2);box-shadow:0 0 6px rgba(164,217,47,0.7);}
.saved-folder-chip.pending .dot{background:#e0b022;}
.saved-folder-chip button{
  border:none;background:transparent;color:inherit;
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  cursor:pointer;
  opacity:0.75;
}
.saved-folder-chip button:hover{opacity:1;background:rgba(255,255,255,0.08);}
.saved-folder-chip button svg{width:12px;height:12px;}
.saved-folder-chip .reconnect-btn{
  font-size:11px;font-weight:700;letter-spacing:.3px;
  color:#e0b022;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(224,176,34,0.4);
  width:auto;height:auto;
  opacity:1;
}
.saved-folder-chip .reconnect-btn:hover{background:rgba(224,176,34,0.12);}

.link-form{display:flex;flex:1;gap:10px;min-width:260px;}

/* ---------------- Empty state ---------------- */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  color:var(--muted);
  padding:60px 20px;
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
}
.empty-state svg{color:#3d3d3d;}
.empty-state p{max-width:340px;font-size:13.5px;line-height:1.5;margin:0;}

/* ---------------- Track list ---------------- */
.track-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}

.track-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.track-item:hover{background:var(--panel-2);border-color:var(--line);}
.track-item.playing{
  background:linear-gradient(90deg, rgba(164,217,47,0.14), rgba(34,207,224,0.06));
  border-color:rgba(164,217,47,0.4);
}

.track-icon{
  width:36px;height:36px;flex-shrink:0;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:#1a1a1a;
  color:var(--muted);
  overflow:hidden;
}
.track-icon img{width:100%;height:100%;object-fit:cover;}
.track-item.playing .track-icon{color:var(--lime-2);}
.track-icon svg{width:17px;height:17px;}

.track-meta{flex:1;min-width:0;display:flex;flex-direction:column;}
.track-title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.track-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.track-badge{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.5px;
  padding:4px 8px;
  border-radius:999px;
  color:#000;
  flex-shrink:0;
}
.badge-yt{background:#ff4444;color:#fff;}
.badge-sp{background:#1db954;color:#fff;}
.badge-local{background:var(--lime-2);}

.track-remove{
  width:28px;height:28px;flex-shrink:0;
  border:none;background:transparent;color:var(--muted);
  border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s ease, color .15s ease, background .15s ease;
}
.track-item:hover .track-remove{opacity:1;}
.track-remove:hover{color:#ff5c5c;background:rgba(255,92,92,0.1);}
.track-remove svg{width:15px;height:15px;}

/* ---------------- Player bar ---------------- */
.player-bar{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:5;
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto minmax(220px,1fr) auto;
  align-items:center;
  gap:22px;
  padding:12px 26px;
  background:rgba(8,8,8,0.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}

.np-info{display:flex;align-items:center;gap:12px;min-width:0;}
.np-art{
  width:44px;height:44px;flex-shrink:0;border-radius:10px;
  background:#161616;
  display:flex;align-items:center;justify-content:center;
  color:var(--lime-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.np-art svg{width:20px;height:20px;}
.np-art img{width:100%;height:100%;object-fit:cover;}
.np-text{display:flex;flex-direction:column;min-width:0;}
.np-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.np-subtitle{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.np-controls{display:flex;align-items:center;gap:6px;}
.ctrl-btn{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--white);
  border-radius:999px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.ctrl-btn svg{width:18px;height:18px;}
.ctrl-btn:hover{background:var(--panel-2);}
.ctrl-btn.play{
  width:42px;height:42px;
  background:linear-gradient(120deg,var(--lime-2),var(--cyan));
  color:#000;
}
.ctrl-btn.play:hover{filter:brightness(1.08);}
.ctrl-btn.toggle.active{color:var(--lime-2);}

.np-progress{display:flex;align-items:center;gap:10px;min-width:0;}
.np-time{font-size:10.5px;color:var(--muted);width:32px;flex-shrink:0;}
.np-time:last-child{text-align:right;}

.seek-bar{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  height:4px;
  border-radius:999px;
  background:var(--line);
  outline:none;
  cursor:pointer;
}
.seek-bar::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--lime-2);
  box-shadow:0 0 8px rgba(164,217,47,0.6);
  cursor:pointer;
  margin-top:-4px;
}
.seek-bar::-moz-range-thumb{
  width:12px;height:12px;border:none;border-radius:50%;
  background:var(--lime-2);cursor:pointer;
}
.seek-bar::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--line);}

.np-volume{display:flex;align-items:center;gap:8px;color:var(--muted);}
.np-volume svg{width:16px;height:16px;flex-shrink:0;}
.volume-bar{width:80px;}

.yt-mount{position:fixed;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;bottom:0;right:0;}

/* ---------------- Responsive ---------------- */
@media (max-width:760px){
  .topbar{padding:14px 16px;gap:14px;}
  .brand-tagline{display:none;}
  .main{padding:18px 16px 190px;}
  .player-bar{
    grid-template-columns:1fr;
    grid-template-areas:"info" "controls" "progress" "volume";
    row-gap:10px;
    padding:14px 18px 18px;
  }
  .np-info{grid-area:info;}
  .np-controls{grid-area:controls;justify-content:center;}
  .np-progress{grid-area:progress;}
  .np-volume{grid-area:volume;justify-content:center;}
}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#222;border-radius:999px;}
::-webkit-scrollbar-track{background:transparent;}