:root{
  --bg:#0b0020; --grad1:#8a00ff; --grad2:#00e5ff; --text:#f6f6ff; --muted:#a9a9c8;
}
html, body {
  margin:0; padding:0; min-height:100%;
  background: radial-gradient(1200px 600px at 30% 0%, rgba(138,0,255,0.25), transparent 60%),
              radial-gradient(1200px 600px at 70% 0%, rgba(0,229,255,0.25), transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
}

#taluma-app{
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tl-card{
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.tl-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.tl-title{ font-weight:800; letter-spacing:.2px; font-size:1.05rem }
.tl-btn{
  cursor:pointer; border:1px solid rgba(255,255,255,.2);
  padding:10px 14px; border-radius:12px;
  background:linear-gradient(90deg,var(--grad1),var(--grad2)); color:#000; font-weight:700
}
.small{ opacity:.9; color:var(--muted); }
audio{ width:100%; margin-top:6px }

/* Header */
.tl-header{ align-items:center }
.tl-logo{ width:34px; height:34px; object-fit:contain; border-radius:6px; box-shadow:0 1px 6px rgba(0,0,0,.25) }

/* Liste */
.tl-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px }
.tl-item{
  display:flex; gap:12px; align-items:center;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
}
.tl-item:hover{ background:rgba(255,255,255,.09) }
.tl-thumb{ width:56px; height:56px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.14) }
.tl-item-meta{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.tl-item-title{ font-weight:700; line-height:1.25; text-wrap:balance }
.tl-badges{ display:flex; gap:8px; flex-wrap:wrap }
.tl-badge{ padding:2px 8px; border-radius:999px; font-size:.82rem; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08) }
.tl-badge.tl-muted{ opacity:.85 }

/* Player */
.tl-player-row{ display:flex; gap:14px; align-items:flex-start }
.tl-cover-large{ width:96px; height:96px; border-radius:14px; object-fit:cover; box-shadow:0 4px 16px rgba(0,0,0,.35) }
.tl-player-meta{ display:flex; flex-direction:column; gap:6px }
.tl-now{ font-weight:800; margin-bottom:2px }
.tl-now-sub{ color:var(--muted) }

/* Aktionen */
.tl-actions{ gap:12px }
.tl-actions .tl-btn{ min-width:120px }
.tl-disabled{ opacity:.5; cursor:not-allowed; filter:grayscale(0.2) }

/* Debug Box ausblenden */
#tl-debug{ display:none }