:root {
  --background: #0b0b0f;
  --surface: #15151b;
  --surface-2: #1d1d25;
  --border: #2c2c36;
  --primary: #dc2626;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --radius: 14px;
}

* { box-sizing: border-box; }
body.app-body, body.app-auth {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--background);
  color: var(--text);
}
.app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border); background: rgba(11,11,15,.92); position: sticky; top: 0; z-index: 5;
}
.app-brand { display: flex; gap: .7rem; align-items: center; }
.brand-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--primary), #7f1d1d);
}
.brand-icon.large { width: 64px; height: 64px; font-size: 1.6rem; margin: 0 auto 1rem; border-radius: 18px; }
.app-brand small { display: block; color: var(--muted); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.icon-btn.primary { background: var(--primary); border-color: transparent; }
.app-tabs {
  display: flex; gap: .35rem; padding: .5rem; overflow: auto; border-bottom: 1px solid var(--border);
}
.tab {
  flex: 1; min-width: 90px; border: 0; background: transparent; color: var(--muted);
  padding: .55rem .4rem; border-radius: 999px; font-weight: 600; cursor: pointer;
}
.tab.active { background: var(--surface-2); color: var(--text); }
.app-main { padding: 1rem 1rem 7rem; }
.panel { display: none; }
.panel.active { display: block; }
.track-list { display: grid; gap: .55rem; }
.track-item {
  display: grid; grid-template-columns: 52px 1fr auto; gap: .7rem; align-items: center;
  padding: .55rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}
.track-item img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #222; }
.track-actions { display: flex; gap: .25rem; }
.player-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center;
  padding: .65rem .85rem; background: rgba(10,10,14,.96); border-top: 1px solid var(--border);
}
.player-meta { display: flex; gap: .65rem; align-items: center; min-width: 0; }
.player-meta strong, .player-meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-controls { display: flex; gap: .35rem; }
#playerCover { border-radius: 8px; object-fit: cover; background: #222; }
.app-banner { margin: .5rem 1rem 0; padding: .6rem .75rem; border-radius: 10px; background: #1a1a22; border: 1px dashed var(--border); color: var(--muted); }
.hidden { display: none !important; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 5.5rem;
  background: #111; border: 1px solid var(--border); padding: .55rem .8rem; border-radius: 999px; z-index: 30;
}
.loading-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 40;
}
.spinner {
  width: 36px; height: 36px; border: 3px solid #333; border-top-color: var(--primary);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.app-auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-shell { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; }
.auth-shell.wide { width: min(520px, 100%); }
.form-grid { display: grid; gap: .75rem; }
.form-grid label { display: grid; gap: .35rem; color: var(--muted); font-size: .92rem; }
.form-grid input, .form-grid textarea {
  background: #0f1016; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: .65rem .75rem;
}
.btn { border: 0; border-radius: 10px; padding: .65rem .9rem; font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { background: #222; color: #fff; }
.btn-danger { background: #7f1d1d; color: #fff; }
.btn-block { width: 100%; }
.password-wrap { display: flex; gap: .35rem; }
.password-wrap input { flex: 1; }
.toggle-pass { border: 1px solid var(--border); background: #111; color: #fff; border-radius: 8px; padding: 0 .6rem; cursor: pointer; }
.alert { padding: .65rem .75rem; border-radius: 10px; margin: .5rem 0; }
.alert-danger { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); }
.alert-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); }
.muted { color: var(--muted); }
.center { text-align: center; }
.back-link { color: #fca5a5; text-decoration: none; display: inline-block; margin-bottom: .75rem; }
.inline-form { display: flex; gap: .5rem; margin-bottom: .75rem; }
.inline-form input { flex: 1; }
.card-list { display: grid; gap: .5rem; }
.card-list .card-row {
  padding: .65rem .75rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  cursor: pointer;
}
.search-row input {
  width: 100%; padding: .65rem .75rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); margin-bottom: .75rem;
}