:root {
  color-scheme: dark;
  --bg: #07101d;
  --card: rgba(17, 28, 46, .86);
  --text: #f7f9ff;
  --muted: #aab8cc;
  --line: rgba(255,255,255,.13);
  --accent: #73dfc4;
  --accent-2: #67c4f4;
  --danger: #ff7f93;
}

* { box-sizing: border-box; }

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

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(115,223,196,.16), transparent 28rem),
    radial-gradient(circle at 90% 10%, rgba(103,196,244,.13), transparent 30rem),
    linear-gradient(180deg, #08111f, #050913);
}

button, input { font: inherit; }

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}

.auth-card {
  width: min(100%, 390px);
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}

.brand-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: #06111b;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 0;
  font-weight: 950;
}

h1 {
  margin: 0;
  font-size: clamp(2.3rem, 8vw, 3rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.muted {
  margin: 12px 0 22px;
  color: var(--muted);
  line-height: 1.45;
}

form {
  display: grid;
  gap: 10px;
}

label {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 850;
}

input {
  width: 100%;
  min-height: 46px;
  color: var(--text);
  background: rgba(255,255,255,.055);
  border: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  padding: 0 14px;
}

input:focus {
  border-color: rgba(115,223,196,.72);
  box-shadow: 0 0 0 4px rgba(115,223,196,.1);
}

button {
  min-height: 48px;
  margin-top: 6px;
  color: #06111b;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 0;
  border-radius: 0;
  font-weight: 950;
  cursor: pointer;
}

button:disabled {
  opacity: .65;
  cursor: wait;
}

.error-message,
.error {
  color: var(--danger);
  font-weight: 800;
}

.hidden,
[hidden] {
  display: none !important;
}

/* DARK GREY THEME START */
:root {
  color-scheme: dark;
  --bg: #111315;
  --card: rgba(28, 30, 33, 0.92);
  --panel: rgba(28, 30, 33, 0.88);
  --panel-2: rgba(39, 41, 45, 0.9);
  --text: #f1f3f5;
  --muted: #aeb4bb;
  --line: rgba(255,255,255,0.12);
  --accent: #d4d7dc;
  --accent-2: #aeb4bb;
  --danger: #ff8a9a;
}

html,
body {
  color: #f1f3f5;
  background: #111315 !important;
}

body {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.045), transparent 28rem),
    radial-gradient(circle at top right, rgba(255,255,255,0.035), transparent 32rem),
    linear-gradient(180deg, #15171a, #0f1012 78%) !important;
}

.topbar,
.auth-card,
.home-card,
.music-hero,
.collections-card,
.tracks-card,
.toolbar,
.content-section,
.collection-panel,
.collection-column,
.chat-sidebar,
.chat-panel,
.settings-panel,
.card,
.player {
  background-color: rgba(28, 30, 33, 0.88) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35) !important;
}

input,
textarea,
select,
.search-input,
.chat-title-input,
.message-input,
.collection-card,
.song-row,
.ghost-btn,
.icon-control,
.mini-control,
.logout-btn,
.nav-links a {
  background-color: rgba(39, 41, 45, 0.9) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #f1f3f5 !important;
}

input::placeholder,
textarea::placeholder {
  color: #9299a1 !important;
}

button,
.primary,
.home-button,
.send-btn,
.primary-small,
.play-control {
  background: linear-gradient(135deg, #d4d7dc, #9ea4ab) !important;
  color: #111315 !important;
}

.nav-links a.active,
.nav-links a[aria-current="page"],
.collection-card.active,
.song-row.active,
.mode-control.active,
.repeat-control.active {
  background-color: rgba(212, 215, 220, 0.16) !important;
  border-color: rgba(212, 215, 220, 0.38) !important;
  color: #ffffff !important;
}

.eyebrow,
.collection-type,
.code {
  color: #d4d7dc !important;
}

.muted,
.now-subtitle,
.collection-subtitle,
.collection-stats,
.song-artist,
.duration,
.time-text,
.panel-title p {
  color: #aeb4bb !important;
}

.brand-mark,
.brand-badge {
  background: linear-gradient(135deg, #d4d7dc, #8f969f) !important;
  color: #111315 !important;
}
/* DARK GREY THEME END */

/* DARK GREY CLEANUP START */
:root {
  --bg: #101214;
  --card: rgba(24, 26, 29, 0.94);
  --panel: rgba(24, 26, 29, 0.90);
  --panel-2: rgba(31, 34, 38, 0.92);
  --text: #f2f4f6;
  --muted: #a7adb5;
  --line: rgba(255,255,255,0.13);
  --accent: #8f969f;
  --accent-2: #c7ccd2;
}

html,
body {
  background: #101214 !important;
  color: #f2f4f6 !important;
}

body {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.035), transparent 30rem),
    radial-gradient(circle at top right, rgba(255,255,255,0.025), transparent 34rem),
    linear-gradient(180deg, #151719, #0e0f11 78%) !important;
}

.topbar,
.auth-card,
.home-card,
.music-hero,
.collections-card,
.tracks-card,
.toolbar,
.content-section,
.collection-panel,
.collection-column,
.chat-sidebar,
.chat-panel,
.settings-panel,
.card,
.player {
  background: rgba(24, 26, 29, 0.90) !important;
  border-color: rgba(255,255,255,0.13) !important;
}

input,
textarea,
select,
.search-input,
.chat-title-input,
.message-input,
.collection-card,
.song-row,
.ghost-btn,
.icon-control,
.mini-control,
.logout-btn,
.nav-links a {
  background: rgba(31, 34, 38, 0.92) !important;
  border-color: rgba(255,255,255,0.13) !important;
  color: #f2f4f6 !important;
}

button,
.primary,
.home-button,
.send-btn,
.primary-small,
.play-control {
  background: rgba(45, 49, 54, 0.96) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #f2f4f6 !important;
}

button:hover,
.ghost-btn:hover,
.icon-control:hover,
.nav-links a:hover,
.collection-card:hover,
.song-row:hover {
  background: rgba(55, 59, 65, 0.98) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

.play-control {
  background: rgba(70, 76, 84, 0.98) !important;
  color: #ffffff !important;
}

.nav-links a.active,
.nav-links a[aria-current="page"],
.collection-card.active,
.song-row.active,
.mode-control.active,
.repeat-control.active {
  background: rgba(78, 84, 92, 0.72) !important;
  border-color: rgba(210,215,221,0.28) !important;
  color: #ffffff !important;
}

.logout-btn {
  background: rgba(54, 36, 42, 0.92) !important;
  color: #ffd7df !important;
}

.eyebrow,
.collection-type,
.code {
  color: #c7ccd2 !important;
}

.muted,
.now-subtitle,
.collection-subtitle,
.collection-stats,
.song-artist,
.duration,
.time-text,
.panel-title p {
  color: #a7adb5 !important;
}

.brand-mark,
.brand-badge {
  background: rgba(70, 76, 84, 0.98) !important;
  color: #ffffff !important;
}
/* DARK GREY CLEANUP END */