:root {
  --brand-bg: #0d1118;
  --brand-surface: #151b24;
  --brand-surface-strong: #1b2330;
  --brand-border: rgba(139, 198, 255, 0.14);
  --brand-primary: #3e73ff;
  --brand-primary-strong: #2f5de5;
  --brand-accent: #8bc6ff;
  --brand-text: #f4f7fb;
  --brand-text-muted: #94a5bb;
}

body {
  background:
    radial-gradient(circle at top right, rgba(62, 115, 255, 0.22), transparent 24rem),
    radial-gradient(circle at bottom left, rgba(139, 198, 255, 0.12), transparent 26rem),
    linear-gradient(180deg, #0d1118 0%, #101720 100%);
  color: var(--brand-text);
}

#teams,
#features,
#sponsors,
#topSponsors,
#pastSponsors,
#advertisers,
#tryEasier,
#poweredBy,
#supportUs,
footer {
  display: none !important;
}

.hero,
.section,
.room-actions,
.join-room-wrapper,
.container {
  background: transparent !important;
}

.hero {
  padding-top: 3rem !important;
  padding-bottom: 1.5rem !important;
}

.hero h1,
.hero .title,
h1,
h2,
h3 {
  color: var(--brand-text) !important;
}

p,
span,
label,
small,
.subtitle {
  color: var(--brand-text-muted) !important;
}

.room-actions,
.join-room-wrapper,
.newroom-form,
.join-form,
.card,
.room-card {
  background: rgba(21, 27, 36, 0.88) !important;
  border: 1px solid var(--brand-border) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px);
}

button,
.btn,
.button,
input[type="submit"] {
  background: linear-gradient(135deg, var(--brand-primary) 0%, #6897ff 100%) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px rgba(62, 115, 255, 0.28) !important;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--brand-primary-strong) 0%, var(--brand-primary) 100%) !important;
}

input,
textarea,
select {
  background: rgba(13, 17, 24, 0.9) !important;
  border: 1px solid rgba(148, 165, 187, 0.18) !important;
  color: var(--brand-text) !important;
  border-radius: 12px !important;
}

input::placeholder,
textarea::placeholder {
  color: #7d8ea4 !important;
}

.header-logo-image,
.logo,
.app-logo {
  height: 42px !important;
  width: auto !important;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.25));
}

.hero-image,
.main-image,
.splash-image,
.floating-shapes {
  opacity: 0.38 !important;
  filter: saturate(0.72) hue-rotate(-8deg);
}

#roomHostOnlyRecording,
#roomRecordingServer {
  display: none !important;
}

#quandesQuickRecordButton {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 1200;
  min-width: 220px;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #d93535 0%, #ff5d5d 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 36px rgba(217, 53, 53, 0.28);
}

#quandesQuickRecordButton[data-state="stopped"] {
  background: linear-gradient(135deg, var(--brand-primary) 0%, #6897ff 100%);
  box-shadow: 0 18px 36px rgba(62, 115, 255, 0.28);
}

#quandesQuickRecordButton.hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .hero {
    padding-top: 1.5rem !important;
  }

  .room-actions,
  .join-room-wrapper {
    margin-top: 1rem !important;
  }

  #quandesQuickRecordButton {
    left: 16px;
    right: 16px;
    bottom: 84px;
    min-width: 0;
  }
}