:root{
  --bg:#111111;
  --card:#1C1C1C;
  --accent:#FF2E2E;
  --alert:#FFA500;
  --text:#FFFFFF;
  --muted:#B3B3B3;
  --border:#2A2A2A;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:auto;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,46,46,0.18), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(255,165,0,0.16), transparent 50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.container{max-width:1100px;margin:0 auto;padding:12px;min-height:100vh;display:flex;flex-direction:column;overflow:visible}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
h1{font-weight:800;font-size:20px;margin:0}
.nick{display:flex;gap:8px}
.nick input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#151515;color:var(--text)}
.nick button{background:var(--accent);border:0;color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.grid{display:grid;grid-template-columns:1fr;gap:10px;flex:1;min-height:0;height:100%;}
@media(min-width:900px){.grid{grid-template-columns:1.2fr .8fr;height:100%;}}
.card{background:var(--card);border-radius:12px;padding:10px;box-shadow:0 10px 26px rgba(0,0,0,0.35);border:1px solid var(--border)}
.now-playing{display:flex;flex-direction:column;gap:12px}
.now-playing-content{display:flex;flex-direction:column;align-items:center;gap:16px;flex:1;justify-content:center}
.cover-large{width:220px;height:220px;border-radius:12px;background:#151515;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,0.4)}
.cover-large img{width:100%;height:100%;object-fit:cover}
.now-playing .meta{width:100%;text-align:center}
.np-title{font-size:18px;margin:0;font-weight:600;display:inline;color:var(--text)}
.np-artist{font-size:15px;color:var(--muted);margin-left:8px}

.progress-container{width:100%;margin-top:16px}
.progress-bar{width:100%;height:6px;background:#2A2A2A;border-radius:3px;overflow:hidden;margin-bottom:8px;position:relative}
.progress-fill{height:100%;background:linear-gradient(90deg, var(--accent), #FF5E5E);border-radius:3px;transition:width 0.5s linear;width:0%;box-shadow:0 0 10px rgba(255,46,46,0.4)}
.progress-time{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:500}

.countdown{margin-top:16px;text-align:center;padding:16px;background:rgba(255,46,46,0.15);border:2px solid var(--accent);border-radius:12px;animation:pulse 1s ease-in-out infinite}
.countdown-text{font-size:14px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.countdown-number{font-size:48px;font-weight:800;color:var(--accent);line-height:1;text-shadow:0 0 20px rgba(255,46,46,0.6)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.9}}

.songs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  min-height:180px;
  max-height:260px;
  overflow-y:auto;
  margin-bottom:8px;
}
.song-card{display:flex;flex-direction:column;gap:6px;min-height:210px;justify-content:space-between;}
.song-card .cover{width:100%;aspect-ratio:1;border-radius:8px;background:#151515;overflow:hidden;border:1px solid var(--border)}
.song-card .cover img{width:100%;height:100%;object-fit:cover}
.song-card .highest{font-size:12px;color:var(--alert);font-weight:600}
.song-card button{align-self:flex-start;background:var(--accent);color:var(--text);border:0;border-radius:8px;padding:6px 10px;cursor:pointer}
.auction h3{margin-top:0}
#auctionBody .highest{font-weight:600;color:var(--alert)}
small.muted{color:var(--muted)}
.joined-as{font-size:14px}
#bidHistory h3{margin-top:0}
#auctionBody{max-height:120px; overflow:auto}
#bidList{max-height:120px; overflow:auto; border-top:1px dashed var(--border); padding-top:8px}
.bid-item{display:flex;justify-content:space-between;border-bottom:1px solid #202020;padding:4px 0}
.bid-item strong{color:var(--alert)}

.bid-inline input{
  background:#141414;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:6px 8px;
}

.player-shell{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#141414;
}

.player-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:8px;
}

.player-dot{
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 10px rgba(255,46,46,0.6);
}

.player-media{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.yt-player{
  width:100%;
  height:180px;
  border-radius:10px;
  overflow:hidden;
  background:#0b0b0b;
  border:1px solid #262626;
}

.yt-player iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

.audio-player{
  width:100%;
  filter:invert(1) hue-rotate(180deg) saturate(0.8);
}

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

.song-card strong{color:var(--text)}

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

#auctionBody div[style*="border:1px solid"]{
  border-color:var(--border) !important;
  background:#151515;
}

#auctionBody span[style*="color:#64748b"]{
  color:var(--muted) !important;
}

#auctionBody div[style*="border:2px solid"]{
  border-color:var(--alert) !important;
  background:rgba(255,165,0,0.12) !important;
}

@media (max-width:900px){
  .songs{grid-template-columns:repeat(2,1fr);max-height:360px}
  .cover-large{width:180px;height:180px}
  .yt-player{height:160px}
}