*{box-sizing:border-box}body{margin:0;background:#0c120d;color:#f3f6f2;font:16px/1.5 system-ui,sans-serif}header{padding:18px max(18px,calc((100% - 850px)/2));border-bottom:1px solid #304032;font-weight:800}header small{float:right;color:#9cae9d;font-weight:400}main{max-width:850px;margin:28px auto;padding:0 16px;min-height:75vh}.card{background:#172019;border:1px solid #344638;border-radius:18px;padding:24px;margin-bottom:18px}.card:first-child{max-width:620px;margin:35px auto 18px}.tag{font-size:11px;letter-spacing:.17em;color:#1ed760;font-weight:800}h1{font-size:clamp(28px,5vw,42px);line-height:1.12;margin:8px 0 16px}em{color:#1ed760;font-style:normal}h2{font-size:21px;margin:0}p{color:#b6c2b7}label{display:block;margin:16px 0 6px;font-size:13px;font-weight:700}input{width:100%;padding:12px;background:#0c130d;color:#fff;border:1px solid #3b4b3d;border-radius:9px;font:inherit}button{padding:10px 14px;border:0;border-radius:9px;background:#1ed760;color:#071108;font-weight:800;cursor:pointer;font:inherit}button:disabled{opacity:.5}.secondary{background:#27382a;color:#fff;border:1px solid #3b4b3d}.danger{background:#6b2528;color:#fff}.card>button# create{width:100%}.row{display:flex;gap:9px;align-items:center}.row input{flex:1;min-width:0}.spread{justify-content:space-between;margin-bottom:12px}.hidden{display:none!important}.muted,small{color:#9eafa0;font-size:12px}.track{display:flex;align-items:center;gap:11px;border-top:1px solid #344638;padding:12px 0}.track img{width:52px;height:52px;object-fit:cover;border-radius:7px}.trackmain{flex:1;min-width:0}.tracktitle{font-weight:750;overflow-wrap:anywhere}.sub{color:#a9b6aa;font-size:12px}.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.actions button{font-size:12px;padding:8px}.votes{font-weight:800;color:#1ed760}.track a,a{color:#1ed760;font-size:12px}.qrrow{align-items:flex-start;margin:20px 0}.qrrow img{width:180px;height:180px;background:white;padding:7px;border-radius:10px}.err{color:#ff8787}.empty{text-align:center;padding:18px;color:#a9b6aa}footer{text-align:center;padding:24px;color:#9eafa0;font-size:12px}@media(max-width:600px){.card{padding:17px}.row{flex-wrap:wrap}.qrrow img{width:150px;height:150px}.track{flex-wrap:wrap}.trackmain{width:calc(100% - 65px);flex:none}.actions{margin-left:63px;width:100%}header small{display:none}}

/* QR Music Party: ranking, cola e historial */
.song-section {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #344638;
  border-radius: 14px;
  background: #101811;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.section-heading h3 {
  margin: 0;
  font-size: 17px;
}

.section-count {
  padding: 4px 9px;
  border-radius: 20px;
  background: #27382a;
  color: #dce8dd;
  font-size: 12px;
  font-weight: 700;
}

.section-help {
  margin: 7px 0 12px;
  font-size: 13px;
}

.track-top {
  margin: 5px -7px 0;
  padding: 14px 7px;
  border: 1px solid #416c4a;
  border-radius: 11px;
  background: #1b2b1e;
}

.priority {
  display: inline-block;
  margin-bottom: 4px;
  color: #1ed760;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.vote-count {
  margin: 3px 0;
  color: #1ed760;
  font-weight: 800;
  font-size: 13px;
}

.played-label {
  color: #9eafa0;
  font-size: 12px;
  font-weight: 700;
}

.history-section {
  background: #141b15;
}

.history-section .track {
  opacity: .8;
}

@media (max-width: 600px) {
  .song-section {
    padding: 11px;
  }

  .section-heading h3 {
    font-size: 15px;
  }
}