:root {
  --bg: #0d0c10;
  --bg2: #16141c;
  --card: #1d1a25;
  --line: #2c2836;
  --text: #f4f1ea;
  --muted: #9a93a8;
  --accent: #ff5c39;
  --accent2: #ffc94d;
  --good: #4fd89a;
  --bad: #ff4d6d;
  --radius: 16px;
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; background: transparent; position: relative; }

/* Hintergrund: sanft wabernde Farbflächen (Standard) oder eigenes Bild (Host-Bereich -> Hintergrund) */
.wb-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wb-bg .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.wb-bg .b1 { width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(255,92,57,.55), transparent 65%); animation: drift1 28s ease-in-out infinite alternate; }
.wb-bg .b2 { width: 60vmax; height: 60vmax; right: -25vmax; top: 10vh; background: radial-gradient(circle, rgba(132,84,255,.45), transparent 65%); animation: drift2 34s ease-in-out infinite alternate; }
.wb-bg .b3 { width: 55vmax; height: 55vmax; left: 10vw; bottom: -30vmax; background: radial-gradient(circle, rgba(255,201,77,.35), transparent 65%); animation: drift3 40s ease-in-out infinite alternate; }
.wb-bg .grain { position: absolute; inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wb-bg .img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s; }
.wb-bg .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,12,16,.55), rgba(13,12,16,.82) 60%, rgba(13,12,16,.92)); }
.wb-bg.has-img .img { opacity: 1; }
.wb-bg.has-img .blob { opacity: 0; }
@keyframes drift1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-20vw, 18vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(14vw, -16vh) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .wb-bg .blob { animation: none; } }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
img { display: block; }
a { color: var(--accent2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px; font-weight: 600;
  background: var(--card); border: 1px solid var(--line); transition: transform .1s, background .2s;
  text-decoration: none; color: var(--text);
}
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.cover { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--line); flex: none; }
.cover.lg { width: 100%; aspect-ratio: 1; height: auto; border-radius: 14px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--muted); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--muted); }
.tag.hot { background: rgba(255,92,57,.18); color: var(--accent); }
.tag.gold { background: rgba(255,201,77,.15); color: var(--accent2); }
.explicit { display: inline-grid; place-items: center; width: 16px; height: 16px; font-size: 10px; font-weight: 800; border-radius: 3px; background: var(--muted); color: var(--bg); margin-right: 4px; vertical-align: 1px; }

.progress { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 4px; transition: width 1s linear; }

.toast-wrap { position: fixed; left: 0; right: 0; bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 100; padding: 0 16px; }
.toast { background: #2a2533; border: 1px solid var(--line); padding: 12px 18px; border-radius: 14px; max-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: pop .25s ease-out; }
.toast.err { border-color: rgba(255,77,109,.5); }
.toast.ok { border-color: rgba(79,216,154,.5); }
@keyframes pop { from { transform: translateY(10px); opacity: 0; } }

.banner { padding: 10px 16px; background: rgba(255,201,77,.12); color: var(--accent2); border-bottom: 1px solid rgba(255,201,77,.25); font-size: 14px; text-align: center; }
.banner:empty { display: none; }

.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; background: var(--accent); border-radius: 2px; animation: eq 1s infinite ease-in-out; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
.eq.paused i { animation-play-state: paused; height: 4px; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 14px; } }