/* ===== Alap konténer – középre, 3D hatás ===== */
.pdr-tsv-wrap,
.pdr-tsv-list-wrap {
  --bg: #0b0b0f;
  --fg: #f2f2f2;
  --accent: orangered;
  --muted: #a0a0a0;
  max-width: 980px;
  margin: 30px auto;
  padding: 26px;
  color: var(--fg);
  background:
    radial-gradient(900px 400px at 50% -10%, rgba(255,69,0,0.18), transparent 60%),
    linear-gradient(180deg, #0f0f12, #0a0a0d 60%);
  border-radius: 22px;
  box-shadow:
    0 18px 36px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ===== Fejlécek ===== */
.pdr-tsv-head,
.pdr-tsv-list-title {
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 #000, 0 0 22px rgba(255,69,0,.25);
}
.pdr-tsv-list-title { margin-top: 8px; }

/* ===== Bejelentkezett user sáv ===== */
.pdr-tsv-userbar{
  display:flex; align-items:center; gap:10px;
  justify-content:center;
  margin-bottom: 12px;
}
.pdr-tsv-ava{
  width:42px; height:42px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 6px 12px rgba(0,0,0,.35);
}
.pdr-tsv-usr{ color:var(--muted); font-size:14px; }

/* ===== Vízszintes űrlap-rács ===== */
.pdr-tsv-form{ display:block; }
.pdr-tsv-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  align-items:end;
  justify-items:stretch;
}
.pdr-tsv-field{ display:grid; gap:6px; }
.pdr-tsv-field label{
  font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted);
}
.pdr-tsv-field input[type="text"]{
  background:#111317; color:#fff; border:1px solid #1b1e23;
  padding:12px 14px; border-radius:14px; outline:none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}
.pdr-tsv-field input[type="text"]:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,69,0,.18), inset 0 2px 6px rgba(0,0,0,.7);
}

/* ===== Akciósáv (gomb alul) ===== */
.pdr-tsv-actions{
  display:grid; justify-items:center; gap:8px; margin-top:14px;
}

/* Orangered → black gradiens gomb, fehér felirat */
.pdr-tsv-btn, .pdr-tsv-del{
  appearance:none; border:0; cursor:pointer; color:#fff;
  font-weight:800; letter-spacing:.6px;
  padding:12px 22px; border-radius:16px;
  background: linear-gradient(180deg, #ff6a33 0%, #ff4500 48%, #000 100%);
  box-shadow:
    0 12px 20px rgba(255,69,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(0);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.pdr-tsv-btn:hover, .pdr-tsv-del:hover{ filter: brightness(1.06); }
.pdr-tsv-btn:active, .pdr-tsv-del:active{
  transform: translateY(1px);
  box-shadow: 0 6px 12px rgba(255,69,0,.18), inset 0 1px 0 rgba(0,0,0,.3);
}

.pdr-tsv-hint{ color:var(--muted); font-size:12px; margin:0; }
.pdr-tsv-alert{ min-height:18px; font-weight:700; }
.pdr-tsv-alert.ok{ color:#7CFFB0; }
.pdr-tsv-alert.err{ color:#ff7b7b; }

/* ===== Lista – kártyarács, középre igazítva ===== */
.pdr-tsv-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:14px;
  justify-items:center;
  align-items:stretch;
}
.pdr-tsv-card{
  width:100%;
  background: #0f1116;
  border:1px solid #1a1d23;
  border-radius:18px;
  padding:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 20px rgba(0,0,0,.35);
}
.pdr-tsv-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pdr-tsv-card-ava{
  width:48px; height:48px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.06);
}
.pdr-tsv-card-ava--stub{
  display:inline-grid; place-items:center; font-weight:900;
  width:48px; height:48px; border-radius:50%;
  background:#191c22; color:#eee; box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}
.pdr-tsv-card-meta{ display:grid; line-height:1.1; }
.pdr-tsv-card-name{ font-weight:800; }
.pdr-tsv-card-time{ color:var(--muted); font-size:12px; }

.pdr-tsv-card-song{
  margin:6px 0 10px;
  font-size:15px;
}
.pdr-tsv-artist{ font-weight:800; }
.pdr-tsv-title{ color:#ddd; }

.pdr-tsv-card-actions{ display:flex; justify-content:flex-end; }
.pdr-tsv-empty{ text-align:center; color:var(--muted); padding:10px 0; }

@media (max-width: 980px){
  .pdr-tsv-cards{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .pdr-tsv-grid{ grid-template-columns: 1fr; }
  .pdr-tsv-cards{ grid-template-columns: 1fr; }
}
/* ===== PC layout finomhangolás ===== */
@media (min-width: 992px) {
  /* Fél-átlátszó panel, középre húzva */
  .pdr-tsv-wrap{
    max-width: 980px;
    margin: 0 auto;
    padding: 22px 26px;
    background: rgba(0,0,0,.5);           /* 50% átlátszó */
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }

  /* A teljes űrlap egy 3 oszlopos grid: Előadó | Cím | Küldés */
  .pdr-tsv-form{
    display: grid;
    grid-template-columns: 1fr 1fr 160px;
    grid-column-gap: 16px;
    grid-row-gap: 12px;
    align-items: end;
  }
  /* A belső konténerek tartalomként viselkednek, hogy a gyerekeik a fő gridbe kerüljenek */
  .pdr-tsv-grid,
  .pdr-tsv-actions{ display: contents; }

  /* Ha vendég beküldés van, a "Beküldő neve" teljes szélességű sor legyen felül */
  .pdr-tsv-field:has(#pdr_tsv_submitter){ grid-column: 1 / -1; }

  /* Gomb a 3. oszlopba, fix magassággal */
  .pdr-tsv-btn{
    height: 44px;
    padding: 0 18px;
    white-space: nowrap;
    grid-column: 3;
  }

  /* Hint és üzenetek a gombsor alatt, teljes szélességben és középre igazítva */
  .pdr-tsv-hint{
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 4px;
    opacity: .9;
  }
  .pdr-tsv-alert{ grid-column: 1 / -1; }

  /* Esztétikai apróságok */
  .pdr-tsv-head{ text-align:center; margin-bottom:12px; }
  .pdr-tsv-userbar{ justify-content:center; margin-bottom:14px; }
}