:root{
  --bg:#0b0b10;
  --text:#f5f5fb;
  --muted:rgba(255,255,255,.65);
  --stroke:rgba(255,255,255,.16);
  --veil:rgba(255,255,255,.22);
  --white:#ffffff;
  --accent:#8b5cf6;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

.app{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:18px;
  padding:18px;
  align-items:start;
}

@media (max-width: 980px){
  .app{grid-template-columns:1fr}
}

/* --- “Phone” vertical 9:16 --- */
.phone{
  width: 390px;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  background:#111;
}

.bgVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.9);
  transform: scale(1.02);
}

.whiteVeil{
  position:absolute; inset:0;
  background: var(--veil);
  backdrop-filter: blur(1.5px);
}

.frame{
  position:absolute; inset:10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.20);
  pointer-events:none;
}

.ui{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  padding: 18px 18px 14px;
}

.header{
  margin-bottom: 10px;
}

.songTitle{
  line-height:1;
}

.artist{
  font-weight:800;
  letter-spacing: .12em;
  font-size: 12px;
  opacity: .85;
}

.song{
  font-weight:900;
  letter-spacing: .04em;
  font-size: 34px;
}

.list{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-top: 10px;
  padding-right: 6px;
}

.rowMember{
  display:grid;
  grid-template-columns: 42px 1fr 1.8fr;
  align-items:center;
  gap: 12px;
  transition: transform .18s ease;
}

/* avatar */
.avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);

  filter: grayscale(1);
  transition: filter .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.rowMember.active .avatar{
  filter: grayscale(0);
  border-color: rgba(139,92,246,.85);
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}

.meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.name{
  font-weight:900;
  letter-spacing:.04em;
  font-size:14px;
  opacity:.92;
}

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

/* barras */
.bar{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.07);
  overflow:hidden;
  position:relative;
}

.fill{
  height:100%;
  width:0%;
  background: rgba(255,255,255,.92);
  border-radius:999px;
  transition: width .12s linear;
}

.rowMember.active .fill{
  background: rgba(255,255,255,1);
}

.activeGlow{
  position:absolute;
  inset:0;
  width:0%;
  background: linear-gradient(
    90deg,
    rgba(139,92,246,0),
    rgba(139,92,246,.65)
  );
  opacity:0;
  transition: opacity .12s ease;
}

.rowMember.active .activeGlow{
  opacity:1;
}

.footer{
  margin-top:auto;
  display:flex;
  justify-content:flex-start;
  padding-top:12px;
}

.watermark{
  font-weight:900;
  opacity:.55;
  letter-spacing:.10em;
}

/* --- Controls panel --- */
.controls{
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px;
  background: rgba(18,18,26,.85);
}

.row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}

.field span{
  font-size:12px;
  color:var(--muted);
}

.field input,
.field textarea{
  background:#0f0f16;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
}

.field textarea{
  resize: vertical;
}

.grow{
  flex:1;
}

button{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.16);
  background:#1a1a25;
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
}

button.primary{
  border:none;
  background: linear-gradient(
    135deg,
    var(--accent),
    #3b82f6
  );
}

button.ghost{
  background:transparent;
}

.hint{
  color:var(--muted);
  font-size:12px;
}