:root{
  --bg:#0b1220;
  --panel: rgba(20,33,58,.72);
  --panel2: rgba(39,53,86,.50);
  --line: rgba(141,197,216,.22);
  --text:#f5f7ed;
  --muted: rgba(245,247,237,.72);
  --accent:#8dc5d8;
  --shadow: 0 16px 50px rgba(0,0,0,.42);
  --r: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 80% 20%, rgba(141,197,216,.10), transparent 55%),
              radial-gradient(900px 600px at 20% 80%, rgba(39,53,86,.30), transparent 60%),
              var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

.container{
  max-width: 1180px;
  margin: 28px auto;
  padding: 0 18px;
}

.panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel__head{
  padding: 18px 18px 10px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hgroup h1{
  margin:0;
  font-size: 22px;
  letter-spacing:.4px;
  text-transform: uppercase;
}
.hgroup p{
  margin: 6px 0 0;
  color: var(--muted);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 700;
  cursor:pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background: rgba(255,255,255,.12); border-color: rgba(141,197,216,.35); }
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: var(--accent);
  color: #0b1220;
  border-color: transparent;
}
.btn--primary:hover{ filter: brightness(1.03); }
.btn--danger{
  background: rgba(255,70,70,.14);
  border-color: rgba(255,70,70,.22);
}

.panel__body{
  padding: 18px;
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 16px;
}

.card{
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  min-width: 0;
}

.card h2{
  margin:0 0 10px;
  font-size: 14px;
  letter-spacing:.35px;
  color: var(--muted);
  text-transform: uppercase;
}

.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field{
  display:flex;
  flex-direction: column;
  gap: 7px;
  min-width:0;
}

.label{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.input, .file{
  width:100%;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  color: var(--text);
  padding: 11px 12px;
  outline:none;
}
.input:focus, .file:focus{
  border-color: rgba(141,197,216,.45);
  box-shadow: 0 0 0 3px rgba(141,197,216,.12);
}

.small{
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}

.full{ grid-column: 1 / -1; }

#status{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
  word-break: break-word;
}
#status a{ color: var(--accent); text-decoration: none; }
#status a:hover{ text-decoration: underline; }

@media (max-width: 1060px){
  .panel__body{ grid-template-columns: 1fr; }
  .form{ grid-template-columns: 1fr; }
}

/* ===================================================================== */
/* public release page layout (lanzamiento) + linkfire style buttons      */
/* ===================================================================== */

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 600px at 20% 20%, rgba(141,197,216,.10), transparent 55%),
              radial-gradient(900px 600px at 80% 80%, rgba(39,53,86,.34), transparent 60%);
  opacity: 1;
}

.wrap{
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 18px;
}

.wrap .card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.left, .right{min-width:0}

.cover{
  width:100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.15);
}
.cover img{
  width:100%;
  height:auto;
  display:block;
}

.track_panel{
  margin-top: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 14px;
}

.track_header{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 10px;
}

.track_title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.track_sub{
  color: var(--muted);
  font-weight: 700;
}

.tracks, .track_list ol{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.right h1{
  margin:0;
  font-size: 28px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.right p{
  margin: 8px 0 0;
  color: var(--muted);
}

.players .frame{
  width:100%;
  height: 152px;
  border: 0;
  margin-top: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.12);
}

/* botones tipo linkfire */
.platforms{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:18px 0 18px;
}

.pbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:16px 18px;
  border-radius:14px;
  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  transition:transform .06s ease, filter .15s ease;
  user-select:none;
}

.pbtn:hover{filter:brightness(1.04)}
.pbtn:active{transform:translateY(1px)}

.pbtn .ico{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.pbtn .ico svg{
  width:26px;
  height:26px;
  display:block;
}

.pbtn.spotify{background:#1db954;color:#0b1220;border-color:rgba(0,0,0,.08)}
.pbtn.apple{background:#fc2d55;color:#fff;border-color:rgba(255,255,255,.18)}
.pbtn.deezer{background:#fff;color:#0b1220;border-color:rgba(0,0,0,.08)}
.pbtn.youtube{background:#ff0033;color:#fff;border-color:rgba(255,255,255,.18)}

@media (max-width: 980px){
  .wrap .card{ grid-template-columns: 1fr; }
  .right h1{ font-size: 24px; }
}

/* ===========================
   SMARTLINK BUTTONS
=========================== */

.pl-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:14px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  color:#fff;
  transition: transform .08s ease, filter .15s ease;
}

.pl-btn:hover{ filter:brightness(1.05); }
.pl-btn:active{ transform:translateY(1px); }

.pl-icon{
  width:26px;
  height:26px;
  background-size:contain;
  background-repeat:no-repeat;
}

/* Spotify */
.pl-btn.spotify{
  background:#1db954;
}
.pl-btn.spotify .pl-icon{
  background-image:url("https://cdn-icons-png.flaticon.com/512/174/174872.png");
}

/* Apple Music */
.pl-btn.apple{
  background:#fa243c;
}
.pl-btn.apple .pl-icon{
  background-image:url("https://cdn-icons-png.flaticon.com/512/179/179309.png");
}

/* Deezer */
.pl-btn.deezer{
  background:#ffffff;
  color:#000;
}
.pl-btn.deezer .pl-icon{
  background-image:url("https://cdn-icons-png.flaticon.com/512/5968/5968841.png");
}

/* YouTube */
.pl-btn.youtube{
  background:#ff0000;
}
.pl-btn.youtube .pl-icon{
  background-image:url("https://cdn-icons-png.flaticon.com/512/1384/1384060.png");
}

/* ===================================================================== */