: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, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
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; } }