:root{
  --bg0:#0b1220;
  --bg1:#0a1020;
  --card: rgba(255,255,255,.06);
  --card-strong: rgba(255,255,255,.08);
  --panel: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.10);
  --stroke-strong: rgba(255,255,255,.14);
  --text: #eaf1ff;
  --muted: rgba(234,241,255,.72);
  --accent: #22c55e;
  --accent2:#38bdf8;
  --accent-soft: rgba(34,197,94,.16);
  --accent2-soft: rgba(56,189,248,.16);
  --accent-glow: rgba(34,197,94,.32);
  --accent2-glow: rgba(56,189,248,.28);
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius: 22px;
  --volume-progress: 85%;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 20% 15%, var(--accent-soft), transparent 60%),
    radial-gradient(1000px 800px at 85% 20%, var(--accent2-soft), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
  transition: background .8s ease, color .5s ease;
}
.shield{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,6,12,.92);
  backdrop-filter:blur(14px);
}
.shield.is-visible{
  display:flex;
}
.shield__card{
  width:min(440px, 100%);
  padding:28px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(28,22,18,.96), rgba(14,12,18,.96));
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  text-align:center;
}
.shield__title{
  font-size:28px;
  font-weight:800;
}
.shield__text{
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}
body.is-locked{
  overflow:hidden;
  user-select:none;
}

/* Fundo */
.bg{position:fixed; inset:0; z-index:-3; overflow:hidden; background:#070b13}
.bg__grad{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 20% 30%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(900px 600px at 80% 60%, rgba(34,197,94,.14), transparent 60%),
    radial-gradient(700px 500px at 50% 10%, rgba(250,132,52,.10), transparent 60%);
  filter:saturate(1.1);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ from{transform:translate(-2%,-1%) scale(1.02)} to{transform:translate(2%,1%) scale(1.04)} }
.bg__noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.14;
  pointer-events:none;
}
#particles{position:absolute; inset:0; width:100%; height:100%; z-index:-2; opacity:.55}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px;
  background:color-mix(in srgb, var(--bg0) 72%, var(--accent) 10%, transparent);
  backdrop-filter: blur(18px);
  border-bottom:1px solid var(--stroke);
  transition: background .6s ease, border-color .6s ease;
}
.topbar__brand{display:flex; gap:12px; align-items:center}
.logo{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.brandname{font-weight:800; letter-spacing:.2px}
.brandtag{font-size:12px; color:var(--muted)}
.topbar__nav{display:flex; gap:14px; align-items:center}
.topbar__nav a{
  color:rgba(234,241,255,.88);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:10px 12px;
  border-radius:12px;
  transition:.2s;
}
.topbar__nav a:hover{background:rgba(255,255,255,.06)}

/* Layout */
.shell{padding:26px 22px 46px}
.grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr .72fr;
  grid-auto-rows: min-content;
  gap:18px;
  align-items:stretch;
}

/* Card */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(20px);
  height:100%;
  transition: background .6s ease, border-color .6s ease, box-shadow .6s ease;
}
.card__title{
  font-weight:800;
  padding:18px 18px 0;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:15px;
}
.card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:var(--accent);
  line-height:1;
  filter:drop-shadow(0 0 8px rgba(34,197,94,.18));
}
.card__icon svg{
  width:18px;
  height:18px;
  display:block;
}
.card__icon--accent2{
  color:var(--accent2);
  filter:drop-shadow(0 0 8px rgba(56,189,248,.18));
}

/* Player */
.player{
  padding:16px;
  background:
    linear-gradient(rgba(10,8,16,.30), rgba(10,8,16,.30)),
    var(--card);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--stroke));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 55px rgba(0,0,0,.42);
}
.player__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:2px 2px 10px;
}
.live{
  display:inline-flex; gap:8px; align-items:center;
  font-weight:800; font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,59,59,.16);
  border:1px solid rgba(255,59,59,.22);
}
.live__dot{
  width:8px; height:8px; border-radius:50%;
  background:#ff3b3b;
  box-shadow:0 0 0 0 rgba(255,59,59,.55);
  animation:pulse 1.5s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,59,.55)}
  70%{box-shadow:0 0 0 14px rgba(255,59,59,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}
}
.meta__item{color:var(--muted); font-weight:600; font-size:13px}

.art{
  position:relative;
  width:min(232px, 62vw);
  aspect-ratio:1/1;
  margin:4px auto 18px;
  border-radius:50%;
  overflow:hidden;
  isolation:isolate;
  background:none;
}
.cover{
  position:absolute; inset:13px;
  width:calc(100% - 26px);
  height:calc(100% - 26px);
  border-radius:50%; /* Spotify-style */
  object-fit:cover;
  background:transparent;
  border:1px solid var(--stroke);
  box-shadow: 0 18px 60px rgba(0,0,0,.42);
  transition: border-color .6s ease, box-shadow .6s ease;
}
.ring{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform: rotate(-90deg);
}
.ring__track{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 4.8;
}
.ring__bar{
  fill:none;
  stroke: url(#ringGrad);
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 70%, transparent));
  transition: stroke-dashoffset .25s linear;
}

.now{padding:4px 8px 8px; text-align:center}
.now__label{font-size:11px; letter-spacing:.22em; color:rgba(234,241,255,.6); font-weight:800}
.now__title{
  max-width:22ch;
  margin:8px auto 0;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
  text-wrap:balance;
}
.now__artist{
  font-size:12px;
  color:rgba(234,241,255,.78);
  font-weight:600;
  margin-top:6px;
  text-transform:uppercase;
}
.now__meta{margin-top:8px; color:rgba(234,241,255,.65); font-size:12px; font-weight:600}

.eq{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:4px;
  height:26px;
  margin:14px auto 6px;
}
.eq span{
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent2) 55%, #ffe0a3), rgba(255,214,143,.28));
  opacity:.8;
  animation:eqPulse 1.35s ease-in-out infinite;
  transform-origin:center bottom;
}
.eq.is-playing span{
  animation-duration:.95s;
  opacity:.95;
}
.eq.is-paused span{
  animation-play-state:paused;
  opacity:.45;
}
.eq span:nth-child(1){height:14px; animation-delay:.05s}
.eq span:nth-child(2){height:28px; animation-delay:.12s}
.eq span:nth-child(3){height:18px; animation-delay:.22s}
.eq span:nth-child(4){height:24px; animation-delay:.31s}
.eq span:nth-child(5){height:12px; animation-delay:.18s}
.eq span:nth-child(6){height:30px; animation-delay:.28s}
.eq span:nth-child(7){height:16px; animation-delay:.08s}
.eq span:nth-child(8){height:26px; animation-delay:.34s}
.eq span:nth-child(9){height:12px; animation-delay:.26s}
.eq span:nth-child(10){height:22px; animation-delay:.15s}
.eq span:nth-child(11){height:27px; animation-delay:.24s}
.eq span:nth-child(12){height:17px; animation-delay:.1s}
@keyframes eqPulse{
  0%,100%{transform:scaleY(.72); opacity:.52}
  50%{transform:scaleY(1.05); opacity:.95}
}

.timeline{
  display:grid; grid-template-columns: 46px 1fr 46px;
  gap:10px; align-items:center;
  max-width:300px;
  margin:12px auto 0;
  color:rgba(234,241,255,.62);
  font-size:11px; font-weight:700;
}
.timeline__bar{
  height:5px; border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.timeline__fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:999px;
  transition: width .25s linear;
}

.controls{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  justify-content:center;
  width:min(100%, 300px);
  margin:14px auto 0;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:10px 12px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  border:1px solid var(--stroke);
  background:var(--card-strong);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:transform .2s ease, background .4s ease, border-color .4s ease;
}
.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.09)}
.btn--round{
  position:relative;
  overflow:hidden;
  width:64px;
  height:64px;
  border-radius:999px;
  padding:0;
  border:1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.12));
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.2), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.08)), color-mix(in srgb, var(--accent2) 54%, rgba(5,9,18,.72)));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -8px 18px rgba(0,0,0,.18),
    0 12px 28px color-mix(in srgb, var(--accent) 26%, rgba(0,0,0,.28));
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}
.btn--round::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}
.btn--round::after{
  content:"";
  position:absolute;
  inset:auto 13px 7px;
  height:10px;
  border-radius:999px;
  background:rgba(0,0,0,.14);
  filter:blur(7px);
  pointer-events:none;
}
.btn--round svg{
  position:relative;
  z-index:1;
  width:24px;
  height:24px;
  display:block;
  margin:auto;
  fill:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.24));
}
.btn--round:hover{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.24), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 48%, rgba(255,255,255,.1)), color-mix(in srgb, var(--accent2) 58%, rgba(5,9,18,.68)));
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -8px 18px rgba(0,0,0,.16),
    0 16px 34px color-mix(in srgb, var(--accent) 30%, rgba(0,0,0,.3));
}
.btn--round:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -6px 14px rgba(0,0,0,.2),
    0 8px 18px color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.24));
}
.btn--primary{
  background:
    linear-gradient(rgba(6,10,18,.26), rgba(6,10,18,.26)),
    linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: var(--stroke-strong);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.btn--primary:hover{filter:saturate(1.08) brightness(1.04)}
.btn--ghost{background:var(--panel)}
.w100{width:100%}
.volume{
  display:grid;
  grid-template-columns: 20px 1fr 42px;
  gap:10px;
  align-items:center;
  width:100%;
  padding:8px 10px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.volume__icon,
.volume__pct{
  color:rgba(234,241,255,.72);
  font-weight:700;
  font-size:12px;
}
.volume__pct{text-align:right}
.vol{
  flex:1;
  width:auto;
  min-width:0;
  height:18px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
}
.vol:focus{outline:none}
.vol::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--accent) 0%,
      var(--accent2) var(--volume-progress),
      rgba(255,255,255,.14) var(--volume-progress),
      rgba(255,255,255,.14) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 3px rgba(255,255,255,.02);
}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  margin-top:-6px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.3) 35%, transparent 36%),
    linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:
    0 0 0 4px rgba(255,255,255,.05),
    0 8px 20px rgba(0,0,0,.3);
}
.vol::-moz-range-track{
  height:6px;
  border:none;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--accent) 0%,
      var(--accent2) var(--volume-progress),
      rgba(255,255,255,.14) var(--volume-progress),
      rgba(255,255,255,.14) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 3px rgba(255,255,255,.02);
}
.vol::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:
    0 0 0 4px rgba(255,255,255,.05),
    0 8px 20px rgba(0,0,0,.3);
}

/* Programação */
.prog{padding-bottom:14px}
.prog__hint{padding:10px 16px 6px; display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:8px 10px;
  cursor:pointer;
  user-select:none;
  border:none;
  outline:none;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--panel);
  font-weight:800;
  font-size:12px;
  color:rgba(234,241,255,.85);
}
.chip.is-on{background:var(--accent-soft); border-color: var(--accent-glow)}
.prog__grid{
  padding:12px 16px 0;
  display:grid;
  gap:10px;
}
.slot{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--panel);
}
.slot__time{font-weight:900; font-size:13px}
.slot__name{font-weight:900; font-size:15px; margin-top:4px}
.slot__sub{color:rgba(234,241,255,.65); font-weight:600; font-size:12px; margin-top:2px}
.prog__note{padding:10px 16px 0; color:rgba(234,241,255,.6); font-size:12px; font-weight:600}

/* Side */
.side{
  padding:12px 18px 18px;
  background:
    linear-gradient(rgba(6,10,18,.16), rgba(6,10,18,.16)),
    var(--card);
}
.side--wide{
  grid-column:1 / -1;
}
.side__block{margin-top:14px; padding:14px; border-radius:20px; background:var(--panel); border:1px solid var(--stroke)}
.side__block--social{
  width:100%;
}
.side__label{font-weight:900; font-size:13px; color:rgba(234,241,255,.86); margin-bottom:12px}
.side__text{
  margin:0;
  color:rgba(234,241,255,.74);
  font-size:13px;
  line-height:1.7;
}
.store{display:flex; gap:10px}
.store__btn{
  flex:1;
  padding:10px 10px;
  border-radius:14px;
  text-decoration:none;
  text-align:center;
  font-weight:900;
  font-size:13px;
  background:var(--card-strong);
  border:1px solid var(--stroke);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:.2s;
}
.store__btn:hover{background:rgba(255,255,255,.10); transform: translateY(-1px)}
.social{display:flex; gap:10px; flex-wrap:wrap}
.social__btn{
  flex:1;
  min-width:120px;
  padding:10px 10px;
  border-radius:14px;
  text-decoration:none;
  text-align:center;
  font-weight:900;
  font-size:13px;
  background:var(--card-strong);
  border:1px solid var(--stroke);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:.2s;
}
.social__btn:hover{background:rgba(255,255,255,.10); transform: translateY(-1px)}

/* Histórico */
.hist{
  grid-column:auto;
  padding:12px 18px 18px;
  background:
    linear-gradient(rgba(6,10,18,.16), rgba(6,10,18,.16)),
    var(--card);
}
.hist__list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding-top:14px;
}
.hitem{
  display:flex;
  gap:12px;
  align-items:center;
  min-height:76px;
  padding:12px;
  border-radius:20px;
  border:1px solid var(--stroke);
  background:var(--panel);
}
.hitem__img{
  width:54px; height:54px; border-radius:14px;
  object-fit:cover;
  background:var(--card-strong);
  border:1px solid var(--stroke);
}
.hitem__t{font-weight:900; font-size:13px; line-height:1.25}
.hitem__a{color:rgba(234,241,255,.72); font-weight:700; font-size:12px; margin-top:4px}

/* Galeria */
.gallery{
  grid-column:1 / -1;
  padding:12px 18px 18px;
  background:
    linear-gradient(rgba(6,10,18,.16), rgba(6,10,18,.16)),
    var(--card);
}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, 192px);
  justify-content:start;
  gap:12px;
  padding-top:14px;
}
.gallery__item{
  display:block;
  width:192px;
  height:192px;
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--stroke);
  background:var(--panel);
  box-shadow:0 16px 28px rgba(0,0,0,.2);
}
.gallery__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease, filter .25s ease;
}
.gallery__item:hover img{
  transform:scale(1.04);
  filter:saturate(1.05);
}
.gallery__empty{
  margin-top:14px;
  padding:18px;
  border-radius:18px;
  border:1px dashed var(--stroke);
  background:var(--panel);
  color:rgba(234,241,255,.72);
  font-size:13px;
  font-weight:600;
}

/* Enquete */
.poll{
  grid-column:1 / -1;
  padding:12px 18px 18px;
  background:
    linear-gradient(rgba(6,10,18,.16), rgba(6,10,18,.16)),
    var(--card);
}
.poll__body{
  display:grid;
  grid-template-columns:minmax(220px, 280px) minmax(0, 1fr);
  gap:14px;
  align-items:center;
  padding-top:14px;
}
.poll__intro{
  display:grid;
  gap:8px;
}
.poll__question{
  font-size:18px;
  font-weight:900;
  line-height:1.35;
}
.poll__status{
  margin-top:8px;
  color:rgba(234,241,255,.72);
  font-size:13px;
  font-weight:700;
}
.poll__options{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.poll-option{
  display:grid;
  gap:8px;
  flex:1;
  min-width:160px;
  padding:12px 14px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:var(--card-strong);
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.poll-option[disabled]{
  cursor:default;
}
.poll-option__top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.poll-option__label{
  font-weight:800;
  font-size:14px;
}
.poll-option__meta,
.poll-option__votes{
  color:rgba(234,241,255,.72);
  font-size:12px;
  font-weight:700;
}
.poll-option__bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.poll-option__fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Pedidos */
.requests{
  grid-column:auto;
  padding:12px 18px 18px;
  background:
    linear-gradient(rgba(6,10,18,.16), rgba(6,10,18,.16)),
    var(--card);
}
.requests__body{padding-top:14px}
.requests__search{
  width:100%;
  height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--panel);
  color:#fff;
  font:inherit;
}
.requests__search::placeholder{color:rgba(234,241,255,.54)}
.requests__search:focus{
  outline:none;
  border-color:var(--stroke-strong);
  box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
.requests__status{
  margin-top:12px;
  color:rgba(234,241,255,.72);
  font-size:13px;
  font-weight:600;
}
.requests__list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.requests__pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.requests__pageinfo{
  color:rgba(234,241,255,.72);
  font-size:12px;
  font-weight:700;
}
.requests__pagebtn{
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:8px 12px;
  background:var(--panel);
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.requests__pagebtn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
.request-item{
  display:grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--panel);
}
.request-item__img{
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:cover;
  background:var(--card-strong);
  border:1px solid var(--stroke);
}
.request-item__title{
  font-size:13px;
  font-weight:900;
  line-height:1.25;
}
.request-item__artist{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color:rgba(234,241,255,.72);
}
.request-item__btn{
  min-width:102px;
  border:none;
  border-radius:14px;
  padding:10px 14px;
  background:
    linear-gradient(rgba(6,10,18,.22), rgba(6,10,18,.22)),
    linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.request-item__btn[disabled]{
  opacity:.55;
  cursor:wait;
}

/* Responsivo */
@media (max-width: 1280px){
  .grid{grid-template-columns:1fr;}
  .player,
  .requests,
  .hist,
  .gallery,
  .side{
    grid-column:1 / -1;
  }
}
@media (max-width: 780px){
  .topbar__nav{display:none}
  .shell{padding:18px 14px 30px}
  .grid{grid-template-columns: 1fr;}
  .player{padding:14px}
  .card__title{padding:14px 14px 0}
  .controls{flex-wrap:wrap}
  .volume{
    grid-template-columns: 16px minmax(0, 1fr) 36px;
    gap:6px;
    width:100%;
  }
  .vol{width:100%}
  .request-item{
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .request-item__img{
    width:48px;
    height:48px;
  }
  .request-item__btn{
    grid-column:1 / -1;
    width:100%;
  }
  .requests__pagination{
    justify-content:center;
  }
}

@media (min-width: 1101px){
  .side--wide{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    align-items:start;
  }
  .side--wide .card__title{
    grid-column:1 / -1;
  }
  .side--wide .side__block{
    margin-top:0;
    height:100%;
  }
  .side--wide .side__block--social{
    grid-column:auto;
    max-width:none;
    justify-self:stretch;
  }
}
@media (max-width: 560px){
  .requests{
    padding:10px 14px 14px;
  }
  .gallery{
    padding:10px 14px 14px;
  }
  .poll{
    padding:10px 14px 14px;
  }
  .poll__body{
    grid-template-columns:1fr;
    gap:14px;
    align-items:start;
  }
  .requests__body{
    padding-top:12px;
  }
  .gallery__grid{
    grid-template-columns:repeat(auto-fit, 192px);
    justify-content:center;
    gap:10px;
  }
  .requests__search{
    height:40px;
    padding:0 12px;
  }
  .requests__status{
    font-size:12px;
    line-height:1.4;
  }
  .request-item{
    gap:10px;
    padding:10px;
    border-radius:16px;
  }
  .request-item__title{
    font-size:12px;
  }
  .request-item__artist{
    font-size:11px;
  }
  .requests__pagebtn{
    flex:1 1 120px;
    text-align:center;
  }
}


.chip:focus-visible{box-shadow:0 0 0 3px rgba(56,189,248,.28);}


/* Histórico no lugar da Programação */
.hist--mid{grid-column:auto; padding:10px 16px 16px}