:root {
  color-scheme: dark;
  --bg: #0f0b16;
  --surface: #151021;
  --card: #1b1529;
  --card-elevated: #221a32;
  --card-border: rgba(167, 139, 215, 0.12);
  --card-glow: rgba(155, 89, 246, 0.06);
  --text: #ece8f4;
  --text-soft: #d4cce6;
  --muted: #9d93b0;
  --muted-2: #7a7190;
  --accent: #e879f9;
  --accent-2: #f9a8d4;
  --accent-soft: rgba(232, 121, 249, 0.14);
  --accent-glow: rgba(224, 86, 253, 0.4);
  --suno-orange: #ffb347;
  --suno-pink: #ff6b81;
  --suno-tab-active: #e056fd;
  --violet-glow: rgba(155, 89, 246, 0.18);
  --danger: #f87171;
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar-w: 260px;
  --mobile-nav-h: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

#root {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Scroll hanya di .main__scroll; header/sidebar + player bar tidak ikut. */
body {
  overflow: hidden;
}

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* Layar kecil: hindari zoom otomatis iOS saat fokus input (minimal 16px) */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 1rem;
  }
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}