*{box-sizing:border-box}

:root{
  --bg:#080a0f;
  --panel:#11151e;
  --panel2:#171c27;
  --panel3:#1d2330;
  --text:#f7f8fc;
  --muted:#8993a6;
  --dim:#596273;
  --line:rgba(255,255,255,.08);
  --accent:#D4AF37;
  --accent2:#F5D76E;
  --danger:#ef4444;
  --shadow:0 24px 70px rgba(0,0,0,.38);
}

*{scrollbar-width:thin;scrollbar-color:#303746 transparent}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 10% -10%,rgba(212,175,55,.16),transparent 60%),
    radial-gradient(800px 500px at 100% 0%,rgba(245,215,110,.08),transparent 55%),
    linear-gradient(180deg,#090b10 0%,#0b0e14 55%,#080a0f 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.hidden{display:none!important}
button,input,select{font:inherit}

.app{
  width:min(1180px,100%);
  min-height:100vh;
  margin:auto;
  padding:28px 30px 60px;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:30px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(17,21,30,.82);
  backdrop-filter:blur(18px);
  box-shadow:0 14px 45px rgba(0,0,0,.22);
}

.title{
  font-size:22px;
  font-weight:850;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.header-actions select{
  min-width:190px;
  background:var(--panel3);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:11px;
  padding:10px 34px 10px 12px;
  outline:none;
  cursor:pointer;
}

.header-actions select:focus{
  border-color:rgba(212,175,55,.65);
  box-shadow:0 0 0 3px rgba(212,175,55,.12);
}

.ghost,.primary{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:#dfe4ee;
  padding:10px 13px;
  border-radius:11px;
  cursor:pointer;
  font-size:13px;
  font-weight:650;
  transition:.18s ease;
}

.ghost:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
  border-color:rgba(212,175,55,.4);
  color:#fff;
}

.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  border:0;
  box-shadow:0 10px 28px rgba(212,175,55,.22);
}

.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(212,175,55,.32);
}

main{
  display:grid;
  gap:24px;
}

.player{
  text-align:center;
  margin:0;
  padding:34px 34px 28px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(500px 220px at 50% 0%,rgba(212,175,55,.14),transparent 70%),
    linear-gradient(145deg,rgba(25,30,42,.98),rgba(12,15,22,.98));
  box-shadow:var(--shadow);
}

.song-title{
  font-size:clamp(24px,4vw,38px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.04em;
  margin:0 auto 28px;
  max-width:850px;
  min-height:44px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.progress-row{
  display:flex;
  align-items:center;
  gap:13px;
  max-width:900px;
  margin:auto;
}

.time{
  color:var(--muted);
  font-size:12px;
  min-width:38px;
  font-variant-numeric:tabular-nums;
}

.progress-row .time:last-child{text-align:right}

#progress,#volumeControl{
  appearance:none;
  width:100%;
  height:6px;
  border-radius:99px;
  background:#2b3240;
  cursor:pointer;
}

#progress::-webkit-slider-thumb,#volumeControl::-webkit-slider-thumb{
  appearance:none;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(212,175,55,.16);
}

#progress::-moz-range-thumb,#volumeControl::-moz-range-thumb{
  width:15px;
  height:15px;
  border:0;
  border-radius:50%;
  background:#fff;
}

.controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:26px;
}

.control,.play{
  cursor:pointer;
  transition:.18s ease;
}

.control{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:#dce1eb;
  font-size:21px;
}

.control:hover{
  transform:translateY(-2px);
  background:rgba(212,175,55,.14);
  border-color:rgba(212,175,55,.5);
}

.play{
  width:64px;
  height:64px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  font-size:23px;
  box-shadow:0 14px 35px rgba(212,175,55,.35);
}

.play:hover{transform:scale(1.05)}

.skip-controls{
  margin-top:16px;
  display:flex;
  justify-content:center;
}

.skip{
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 13px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  cursor:pointer;
  font-size:12px;
  transition:.18s ease;
}

.skip:hover,.skip[aria-pressed="true"]{
  color:#fff;
  border-color:rgba(212,175,55,.5);
  background:rgba(212,175,55,.12);
}

.volume-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:20px auto 0;
  max-width:300px;
}

.volume-controls button{
  width:40px;
  height:40px;
  border-radius:11px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
}

.volume-controls input[type=range]{width:170px}

.status{
  min-height:18px;
  margin-top:15px;
  color:var(--muted);
  font-size:12px;
}

.music-section{
  margin:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(17,21,30,.88);
  box-shadow:0 14px 45px rgba(0,0,0,.18);
}

.library-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:14px;
}

.library-heading .muted{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

.search-input{
  width:100%;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0c1017;
  color:#fff;
  outline:none;
}

.search-input::placeholder{color:#5f6878}
.search-input:focus{
  border-color:rgba(212,175,55,.62);
  box-shadow:0 0 0 3px rgba(212,175,55,.11);
}

.library{
  display:grid;
  gap:8px;
}

.song{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  cursor:pointer;
  transition:.16s ease;
}

.song:hover{
  transform:translateY(-1px);
  background:linear-gradient(90deg,rgba(212,175,55,.10),rgba(255,255,255,.04));
  border-color:rgba(212,175,55,.3);
  box-shadow:0 8px 25px rgba(0,0,0,.16);
}

.song.active{
  background:linear-gradient(90deg,rgba(212,175,55,.16),rgba(245,215,110,.07));
  border-color:rgba(212,175,55,.45);
}

.song-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:650;
}

.song-length{
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.song-actions,.shared-song-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}

.delete,.add-to-playlist{
  opacity:1;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:#9ca6b8;
  cursor:pointer;
  transition:.16s ease;
}

.delete:hover{
  color:#fff;
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.45);
}

.add-to-playlist:hover{
  color:#fff;
  background:rgba(212,175,55,.14);
  border-color:rgba(212,175,55,.45);
}

.empty{
  color:var(--dim);
  text-align:center;
  padding:45px 20px;
  border:1px dashed var(--line);
  border-radius:14px;
  font-size:13px;
}

.center-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
}

.auth-card{
  width:min(410px,100%);
  padding:32px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(145deg,#151a24,#0e1118);
  box-shadow:var(--shadow);
}

.brand{
  font-size:25px;
  font-weight:850;
  letter-spacing:-.04em;
}

.muted{color:var(--muted)}

.auth-card form{
  display:grid;
  gap:11px;
  margin-top:24px;
}

.auth-card input{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#0b0f15;
  color:#fff;
  outline:none;
}

.auth-card input:focus{
  border-color:rgba(212,175,55,.6);
  box-shadow:0 0 0 3px rgba(212,175,55,.1);
}

.text-button{
  display:block;
  margin:17px auto 0;
  border:0;
  background:none;
  color:var(--muted);
  cursor:pointer;
}

.text-button:hover{color:#fff}

.message{
  min-height:20px;
  margin-top:14px;
  font-size:13px;
  color:#b7bfcc;
}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(3,5,8,.72);
  backdrop-filter:blur(8px);
  z-index:1000;
}

.modal.hidden{display:none}

.modal-card{
  width:min(92vw,440px);
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#151a23;
  box-shadow:var(--shadow);
}

.modal-title{
  font-size:19px;
  font-weight:800;
  margin-bottom:14px;
}

.modal-card select{
  width:100%;
  padding:11px;
  margin-bottom:15px;
  background:#0c1017;
  color:#fff;
  border:1px solid var(--line);
  border-radius:11px;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

@media(max-width:850px){
  .app{padding:18px 16px 45px}
  header{align-items:flex-start;flex-direction:column}
  .header-actions{width:100%;justify-content:flex-start}
  .header-actions select{flex:1;min-width:160px}
}

@media(max-width:600px){
  .player{padding:25px 16px 22px;border-radius:20px}
  .song-title{font-size:24px}
  .music-section{padding:16px;border-radius:18px}
  .controls{gap:10px}
  .control{width:44px;height:44px}
  .play{width:58px;height:58px}
  .song{padding:11px}
  .song-actions{gap:5px}
}

/* Step 4.4 — Playlist sidebar */
.app-layout{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:22px;
  align-items:start;
}

.app-layout main{min-width:0}

.playlist-sidebar{
  position:sticky;
  top:20px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(17,21,30,.88);
  box-shadow:0 14px 45px rgba(0,0,0,.18);
  min-height:260px;
}

.sidebar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 14px;
  border-bottom:1px solid var(--line);
}

.sidebar-title{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
}

.sidebar-count{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}

.add-playlist{
  width:34px;
  height:34px;
  border:1px solid rgba(212,175,55,.35);
  border-radius:10px;
  background:rgba(212,175,55,.12);
  color:#fff;
  font-size:21px;
  line-height:1;
  cursor:pointer;
  transition:.18s ease;
}

.add-playlist:hover{
  transform:translateY(-1px) scale(1.03);
  background:rgba(212,175,55,.2);
  border-color:rgba(212,175,55,.6);
}

.playlist-list{
  display:grid;
  gap:6px;
  margin-top:12px;
  max-height:calc(100vh - 250px);
  overflow:auto;
  padding-right:2px;
}

.playlist-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#b9c1cf;
  text-align:left;
  cursor:pointer;
  transition:.16s ease;
}

.playlist-item:hover{
  background:rgba(255,255,255,.045);
  color:#fff;
}

.playlist-item.active{
  background:linear-gradient(90deg,rgba(212,175,55,.2),rgba(245,215,110,.08));
  border-color:rgba(212,175,55,.38);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.playlist-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#F5D76E;
  font-size:13px;
}

.playlist-item.active .playlist-icon{
  background:rgba(212,175,55,.22);
  color:#fff;
}

.playlist-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:650;
}

.sidebar-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.sidebar-action{
  min-width:0;
  padding:9px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  cursor:pointer;
  font-size:12px;
  font-weight:650;
  transition:.16s ease;
}

.sidebar-action:hover{
  color:#fff;
  background:rgba(255,255,255,.07);
  border-color:rgba(212,175,55,.4);
}

.sidebar-action.danger-action:hover{
  border-color:rgba(239,68,68,.4);
  background:rgba(239,68,68,.1);
}

@media(max-width:850px){
  .app-layout{grid-template-columns:1fr}
  .playlist-sidebar{position:static;min-height:0}
  .playlist-list{
    display:flex;
    gap:7px;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:3px;
  }
  .playlist-item{
    width:auto;
    min-width:max-content;
  }
  .sidebar-actions{max-width:360px}
}


/* Favorites */
.favorite {
  border: 0;
  background: transparent;
  color: var(--muted, #8b8fa3);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 7px;
  transition: transform .15s ease, color .15s ease;
}
.favorite:hover { transform: scale(1.12); color: #fff; }
.favorite.is-favorite { color: #D4AF37; }
.song-actions { gap: 8px; }


.recently-played-btn {
  width: 100%;
  margin: 10px 0 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: .18s ease;
}
.recently-played-btn:hover { background: rgba(255,255,255,.07); }
.recently-played-btn.active {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}


/* Step 4.7 — Queue / Up Next */
.queue-heading-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.queue-clear{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  padding:6px 9px;
  border-radius:9px;
  cursor:pointer;
  font-size:11px;
  font-weight:650;
}

.queue-clear:hover{
  color:#fff;
  border-color:rgba(239,68,68,.4);
  background:rgba(239,68,68,.1);
}

.add-to-queue,.queue-remove{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:#9ca6b8;
  cursor:pointer;
  transition:.16s ease;
}

.add-to-queue:hover{
  color:#fff;
  background:rgba(212,175,55,.14);
  border-color:rgba(212,175,55,.45);
}

.queue-remove:hover{
  color:#fff;
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.45);
}

.queue-song{
  cursor:pointer;
}

.queue-position{
  width:24px;
  flex:0 0 24px;
  color:var(--dim);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

@media(max-width:600px){
  .queue-heading-actions{gap:7px}
  .add-to-queue,.queue-remove{width:32px;height:32px}
}

.keyboard-hint {
  margin-top: 12px;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted, #8f98a8);
  opacity: 0.9;
}

/* Step 4.9 — Library sorting */
.library-tools{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 12px;
}
.library-tools .search-input{
  flex:1;
  margin:0;
}
.sort-select{
  min-width:165px;
  padding:10px 34px 10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:var(--text,#fff);
  font:inherit;
  font-size:12px;
  cursor:pointer;
  outline:none;
}
.sort-select:hover{background:rgba(255,255,255,.07)}
.sort-select:focus{border-color:rgba(212,175,55,.55)}
.sort-select option{background:#171923;color:#fff}
.sort-select:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:650px){
  .library-tools{flex-direction:column;align-items:stretch}
  .sort-select{width:100%;min-width:0}
}

/* Step 5.0: repeat + sleep timer */
.timer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.timer-controls label {
  font-size: 0.85rem;
  font-weight: 600;
}
.timer-controls .sort-select {
  min-width: 120px;
}

/* Step 5.1 — Now Playing / Mini Player polish */
.player-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.player-card::before{
  content:"";
  position:absolute;
  inset:-80px -30% auto;
  height:210px;
  background:radial-gradient(circle at 50% 0,rgba(212,175,55,.20),transparent 68%);
  pointer-events:none;
  z-index:-1;
}
.now-playing-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.now-playing-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
}
.playing-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(212,175,55,.12);
}
.player-favorite{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:1.35rem;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.player-favorite:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.player-favorite.active{
  color:#ff6ba8;
  border-color:rgba(245,215,110,.35);
  background:rgba(245,215,110,.08);
}
.now-playing-info{
  min-width:0;
  padding:2px 52px 8px 0;
}
.song-title{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.player-subtitle{
  margin-top:6px;
  color:var(--muted);
  font-size:.8rem;
}
.player-quick-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}
.player-quick-btn{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.player-quick-btn:hover{
  color:var(--text);
  background:rgba(255,255,255,.07);
  transform:translateY(-1px);
}
@media (max-width:640px){
  .player-quick-btn span{display:none}
  .player-quick-btn{min-width:42px}
  .now-playing-info{padding-right:0}
}


/* Step 5.3 — Music Library Polish */
.song{
  position:relative;
  min-height:58px;
}

.song.active{
  box-shadow:inset 3px 0 0 var(--accent), 0 8px 28px rgba(0,0,0,.18);
}

.song.active .song-name{
  color:var(--accent2);
}

.song.active .song-name::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin:0 9px 2px 0;
  border-radius:50%;
  background:var(--accent2);
  box-shadow:0 0 12px rgba(245,215,110,.65);
}

.song-more{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:#9ca6b8;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  transition:.16s ease;
}

.song-more:hover,
.song-more:focus-visible{
  color:#fff;
  background:rgba(212,175,55,.14);
  border-color:rgba(212,175,55,.45);
  outline:none;
}

.song-menu{
  position:fixed;
  z-index:1200;
  width:220px;
  padding:7px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(17,21,30,.97);
  box-shadow:0 22px 50px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}

.song-menu button{
  width:100%;
  border:0;
  background:transparent;
  color:#e8ebf2;
  text-align:left;
  padding:10px 11px;
  border-radius:9px;
  cursor:pointer;
  font-size:13px;
  transition:.15s ease;
}

.song-menu button:hover,
.song-menu button:focus-visible{
  background:rgba(212,175,55,.13);
  color:#fff;
  outline:none;
}

.song-menu.hidden{
  display:none!important;
}

.modal-subtitle{
  margin:-6px 0 15px;
  color:var(--muted);
  font-size:12px;
}

#addToPlaylistSelect{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0d1118;
  color:var(--text);
  outline:none;
}

#addToPlaylistSelect:focus{
  border-color:rgba(212,175,55,.6);
  box-shadow:0 0 0 3px rgba(212,175,55,.1);
}

.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:1400;
  max-width:min(90vw,460px);
  padding:11px 15px;
  border:1px solid rgba(212,175,55,.38);
  border-radius:12px;
  background:rgba(17,21,30,.96);
  color:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.35);
  font-size:13px;
  font-weight:650;
}

.song .song-more{
  opacity:.78;
}

.song:hover .song-more,
.song-more:focus-visible{
  opacity:1;
}

@media(max-width:700px){
  .song-actions{gap:5px}
  .song-more,.favorite,.add-to-queue,.add-to-playlist,.delete{width:32px;height:32px}
  .song-menu{width:min(220px,calc(100vw - 20px))}
}


/* Step 5.4 search polish */
.search-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.8;
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.search-match {
  color: inherit;
  background: rgba(212, 175, 55, 0.18);
  border-radius: 4px;
  padding: 0 2px;
}

.song-menu button[data-action="delete-owned"]{
  color:#fca5a5;
}

.song-menu button[data-action="delete-owned"]:hover,
.song-menu button[data-action="delete-owned"]:focus-visible{
  background:rgba(239,68,68,.13);
  color:#fecaca;
}


/* Step 5.7 — Account & Settings */
.settings-btn{margin-top:6px}
.settings-card{width:min(560px,calc(100vw - 32px));max-height:86vh;overflow:auto}
.settings-section{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.settings-section:first-of-type{margin-top:8px;padding-top:0;border-top:0}
.settings-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent2);
  margin-bottom:8px;
}
.settings-email{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  overflow-wrap:anywhere;
}
.settings-field{
  display:grid;
  gap:7px;
  margin:10px 0;
  color:var(--muted);
  font-size:14px;
}
.settings-field input[type="password"]{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 12px;
  background:var(--panel2);
  color:var(--text);
  outline:none;
}
.settings-field input[type="password"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
.settings-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
  color:var(--text);
  font-size:14px;
}
.settings-check input{accent-color:var(--accent)}
.settings-data-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.settings-data-buttons .ghost{flex:1 1 190px}
.settings-card .message{
  min-height:22px;
  margin-top:12px;
}
@media (max-width:680px){
  .settings-card{padding:18px}
}

/* Step 5.8 — Visual polish + micro-interactions */
:root{
  --accent-glow:rgba(212,175,55,.22);
  --accent-soft:rgba(212,175,55,.10);
}

html{scroll-behavior:smooth}

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

button,input,select{transition:box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease,opacity .18s ease}

button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid rgba(245,215,110,.85);
  outline-offset:2px;
}

.app{animation:app-enter .38s ease both}
header,.playlist-sidebar,.player,.music-section,.auth-card{
  animation:surface-enter .4s ease both;
}

header{animation-delay:.02s}
.playlist-sidebar{animation-delay:.05s}
.player{animation-delay:.08s}
.music-section:nth-of-type(1){animation-delay:.11s}
.music-section:nth-of-type(2){animation-delay:.14s}

.song,.playlist-item{
  animation:row-enter .24s ease both;
}

.song:nth-child(2){animation-delay:.015s}
.song:nth-child(3){animation-delay:.03s}
.song:nth-child(4){animation-delay:.045s}
.song:nth-child(5){animation-delay:.06s}
.song:nth-child(6){animation-delay:.075s}
.song:nth-child(7){animation-delay:.09s}
.song:nth-child(8){animation-delay:.105s}

.playing-dot{
  animation:playing-pulse 1.8s ease-in-out infinite;
}

.player-card:has(.playing-dot)::after{
  content:"";
  position:absolute;
  inset:auto 18% -80px;
  height:130px;
  background:radial-gradient(circle,rgba(212,175,55,.08),transparent 68%);
  filter:blur(8px);
  pointer-events:none;
  z-index:-1;
}

.play:hover{box-shadow:0 16px 40px rgba(212,175,55,.42)}
.play:active,.control:active,.ghost:active,.primary:active,.skip:active,.player-quick-btn:active,.add-playlist:active,.song-more:active,.favorite:active,.add-to-queue:active,.delete:active{transform:scale(.97)}

.playlist-item.active .playlist-icon{box-shadow:0 0 0 3px rgba(212,175,55,.08),0 0 18px rgba(212,175,55,.18)}

.song-actions button,.shared-song-actions button{transition:transform .15s ease,background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.favorite.is-favorite{color:var(--accent2);text-shadow:0 0 14px rgba(245,215,110,.32)}
.favorite.is-favorite:hover{color:#fff;text-shadow:0 0 18px rgba(245,215,110,.45)}

.progress-row #progress:hover,.volume-controls #volumeControl:hover{filter:brightness(1.08)}

#progress::-webkit-slider-thumb,#volumeControl::-webkit-slider-thumb{transition:transform .15s ease,box-shadow .15s ease}
#progress:hover::-webkit-slider-thumb,#volumeControl:hover::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 0 0 5px rgba(212,175,55,.18),0 0 18px rgba(212,175,55,.26)}

#progress::-moz-range-thumb,#volumeControl::-moz-range-thumb{transition:transform .15s ease,box-shadow .15s ease}
#progress:hover::-moz-range-thumb,#volumeControl:hover::-moz-range-thumb{transform:scale(1.18)}

.library-heading .muted{transition:color .18s ease}

.search-input::selection{background:rgba(212,175,55,.34);color:#fff}

.modal{animation:modal-backdrop-in .18s ease both}
.modal:not(.hidden) .modal-card{animation:modal-card-in .22s cubic-bezier(.2,.75,.25,1) both}

.toast{animation:toast-in .22s cubic-bezier(.2,.75,.25,1) both;box-shadow:0 16px 40px rgba(0,0,0,.34),0 0 0 1px rgba(212,175,55,.10)}

.status[aria-live="polite"]{transition:color .18s ease}

.disabled,.ghost:disabled,.primary:disabled,.skip:disabled,.control:disabled,.play:disabled,.player-quick-btn:disabled,.sidebar-action:disabled,.add-playlist:disabled{cursor:not-allowed;opacity:.48;transform:none!important;box-shadow:none}

.song.active .song-more,.song.active .add-to-queue,.song.active .favorite{border-color:rgba(212,175,55,.24)}

.empty{transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.empty:hover{border-color:rgba(212,175,55,.22);background:rgba(212,175,55,.025);transform:translateY(-1px)}

.player-quick-btn:hover,.skip:hover,.secondary-btn:hover{box-shadow:0 8px 24px rgba(0,0,0,.16)}

.header-actions .ghost:first-child:hover{background:rgba(212,175,55,.10)}

@keyframes app-enter{from{opacity:0}to{opacity:1}}
@keyframes surface-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes row-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes playing-pulse{0%,100%{box-shadow:0 0 0 4px rgba(212,175,55,.10),0 0 0 rgba(212,175,55,0)}50%{box-shadow:0 0 0 7px rgba(212,175,55,.05),0 0 18px rgba(212,175,55,.20)}}
@keyframes modal-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes modal-card-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.playback-status {
  min-height: 1.1em;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #b8b8b8;
  transition: opacity 180ms ease, transform 180ms ease;
}
.playback-status:empty { opacity: 0; transform: translateY(-2px); }