:root{
  --bg:#111;
  --panel:#1a1a1a;
  --accent:#ff8c00;
  --accent-strong:#ff0080;
  --muted:#bbb;
  --text:#fff;
  --player-bg:#222;
  --gap:1rem;
  --radius:0.5rem;
  --btn-bg:#ff0080;
  --btn-color:#fff;
  --request-btn-bg:#ff8c00;
  --request-btn-color:#000;
  --max-width:1100px;
  --base-font:16px;
}

html{font-size:var(--base-font);box-sizing:border-box;height:100%}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  text-align:center;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

header{
  padding:1.0rem 1.25rem;
  background:linear-gradient(135deg,var(--accent-strong),var(--accent));
  color:var(--text);
  text-shadow:2px 2px 4px rgba(0,0,0,0.6);
}

.top-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  padding:0.75rem 1.125rem;
  background:#0f0f0f;
  border-bottom:2px solid #222;
  position:sticky;
  top:0;
  z-index:10000;
}
.nav-side{display:flex;gap:0.75rem;align-items:center}
.brand{font-weight:700;color:var(--text);font-size:1.125rem;text-align:center;padding:0 0.75rem;flex:0 0 auto}
.nav-item{
  color:#ddd;
  text-decoration:none;
  padding:0.5rem 0.625rem;
  border-radius:0.375rem;
  background:transparent;
  transition:background .15s,color .15s;
}
.nav-item:hover,.nav-item:focus{background:#1a1a1a;color:#fff;outline:none}
.nav-item:focus{box-shadow:0 0 0 3px rgba(255,140,0,0.12)}

#main-content{
  padding:1.25rem;
  padding-bottom:8rem;
  max-width:var(--max-width);
  margin:0 auto;
  box-sizing:border-box;
  text-align:left;
}

.button-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:1.25rem 0}
.button-container button{
  margin:0;
  padding:1rem 2.5rem;
  font-size:1.125rem;
  border:none;
  border-radius:var(--radius);
  background:var(--btn-bg);
  color:var(--btn-color);
  cursor:pointer;
  transition:transform .12s ease,background .12s ease;
}
.button-container button:hover{transform:translateY(-2px);background:#ff4db8}
.button-container button:focus{outline:none;box-shadow:0 0 0 3px rgba(255,0,128,0.12)}

.search-container{max-width:700px;margin:0 auto 0.75rem}
.search-container label{color:var(--accent);font-weight:600;display:block;margin-bottom:0.375rem}
.search-container input{
  width:100%;
  padding:0.625rem;
  border-radius:0.375rem;
  border:1px solid #333;
  background:#0d0d0d;
  color:var(--text);
  box-sizing:border-box;
  font-size:1rem;
}

#request-list{margin:1.875rem auto;max-width:700px}
.song{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.75rem;
  padding:0.875rem;
  margin:0.625rem 0;
  background:var(--panel);
  border-left:4px solid var(--accent-strong);
  border-radius:0.25rem;
}
.song .meta{flex:1 1 auto;min-width:0}
.song .title{font-weight:700}
.song .artist{color:#ccc;font-size:0.95rem;margin-top:0.25rem}
.song .controls{flex:0 0 auto;margin-left:0.75rem}
.btn-request{
  padding:0.5rem 0.75rem;
  border-radius:0.375rem;
  border:none;
  background:var(--request-btn-bg);
  color:var(--request-btn-color);
  cursor:pointer;
  font-weight:600;
}
.btn-request:focus{outline:none;box-shadow:0 0 0 3px rgba(255,140,0,0.12)}

#recently-played{margin:1.875rem auto;max-width:700px}
.recent-item{
  padding:0.75rem;
  margin:0.5rem 0;
  background:var(--panel);
  border-left:4px solid var(--accent);
  border-radius:0.25rem;
}

.pagination{margin:1.25rem 0;display:flex;justify-content:center;gap:0.75rem}
.pagination button{
  padding:0.5rem 0.75rem;border-radius:0.375rem;border:none;background:var(--btn-bg);color:var(--btn-color);cursor:pointer;
}
.pagination button:focus{outline:none;box-shadow:0 0 0 3px rgba(255,0,128,0.12)}

#player-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:var(--player-bg);
  padding:0.625rem 0.75rem;
  display:flex;
  align-items:center;
  gap:0.75rem;
  border-top:2px solid var(--accent-strong);
  z-index:9999;
  flex-wrap:wrap;
  min-height:3.5rem;
}
.player-controls{display:flex;gap:0.5rem;align-items:center}
#player-bar button{
  padding:0.375rem 0.625rem;
  font-size:0.875rem;
  border-radius:0.375rem;
  background:var(--btn-bg);
  color:var(--btn-color);
  border:none;
  cursor:pointer;
}
#player-bar button:focus{outline:none;box-shadow:0 0 0 3px rgba(255,0,128,0.12)}
#now-playing{
  font-size:1.125rem;
  color:var(--accent);
  width:100%;
  text-align:center;
  font-weight:600;
  padding:0.375rem 0;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

@media (max-width:800px){
  .top-nav{padding:0.5rem 0.75rem}
  .brand{font-size:1rem}
  #main-content{padding:1rem;padding-bottom:10rem}
  #now-playing{font-size:1rem}
}
@media (max-width:600px){
  .button-container{flex-direction:column;gap:0.75rem}
  .button-container button{width:90%;font-size:1rem;padding:0.75rem 1rem}
  .song{flex-direction:column;align-items:flex-start}
  .song .controls{width:100%;display:flex;justify-content:flex-end;margin-top:0.5rem}
  #player-bar{flex-direction:column;align-items:stretch;padding:0.75rem;min-height:5.5rem}
  #player-bar button{width:48%;margin:0 auto}
  #now-playing{text-align:center;font-size:1rem;padding:0.5rem 0}
}