/* OPENMATHUB custom styles */
:root {
  --bg-main: rgb(18 18 18 / 1);
  --card-bg: rgb(255 255 255 / 0.04);
  --card-border: rgb(255 255 255 / 0.1);
  --muted: rgb(255 255 255 / 0.75);
  --accent: #84cc16;
  --accent-hover: #65a30d;
}

html,
body {
  background: var(--bg-main);
  color: #fff;
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.premium-bg {
  background-color: var(--bg-main);
  background-image:
    radial-gradient(circle at top right, #2a2a2a 0%, transparent 42%),
    linear-gradient(160deg, #121212 0%, #1b1b1b 52%, #121212 100%);
}

.glass-card {
  background: #007791;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
}

.text-muted {
  color: var(--muted);
}

.hero-logo {
  max-width: 110px;
  width: 100%;
  height: auto;
}

.brand-wordmark {
  font-family: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.06em;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 1024px) {
  .hero-logo {
    max-width: 82px;
  }

  .brand-wordmark {
    font-size: 2.2rem;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 640px) {
  .hero-logo {
    max-width: 64px;
  }

  .brand-wordmark {
    font-size: 1.55rem;
    letter-spacing: 0.03em;
  }
}

.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(34 211 238 / 0.35);
  border-color: rgb(34 211 238 / 0.8);
}

.btn-premium {
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-premium:hover {
  transform: translateY(-1px);
  background: var(--accent-hover);
  filter: brightness(1.01);
}

.status-success {
  border: 1px solid rgb(34 197 94 / 0.4);
  background: rgb(22 101 52 / 0.25);
}

.status-error {
  border: 1px solid rgb(248 113 113 / 0.45);
  background: rgb(127 29 29 / 0.25);
}