@import url("https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

:root {
  --primary: #3713ec;
  --background-light: #f6f6f8;
  --background-dark: #131022;
  --surface-dark: #1e1933;
  --border-dark: #3b3267;
  --text-muted: #9b92c9;
}

body {
  font-family: "Spline Sans", "Noto Sans", system-ui, sans-serif;
  background-color: var(--background-light);
  color: #1f2345;
  min-height: 100vh;
}

.dark body {
  background-color: var(--background-dark);
  color: #f5f5f5;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
}

button {
  font-family: inherit;
}

.size-8 {
  width: 48px;
  height: 48px;
}

.size-10 {
  width: 56px;
  height: 56px;
}

.surface-dark {
  background-color: var(--surface-dark);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-primary\/20 {
  background-color: rgba(55, 19, 236, 0.2);
}

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

.border-border-dark\/30 {
  border-color: rgba(59, 50, 103, 0.3);
}

.form-control::placeholder {
  color: #b0b0c6;
}

.dark .border-border-dark {
  border-color: var(--border-dark);
}

.btn-shadow {
  box-shadow: 0 12px 30px rgba(55, 19, 236, 0.25);
}

.gradient-card {
  background: linear-gradient(180deg, rgba(19, 16, 34, 0.9), rgba(19, 16, 34, 0.65) 40%, rgba(19, 16, 34, 0.1));
}

.hero-overlay {
  background: linear-gradient(180deg, var(--background-dark), rgba(19, 16, 34, 0.1));
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
}

.alert-success {
  background-color: #dcfce7;
  color: #065f46;
  border: 1px solid #86efac;
}

.alert-danger {
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

@media (max-width: 1023px) {
  .lg\:flex-row {
    flex-direction: column;
  }

  .lg\:flex-1 {
    flex: 1;
  }

  .hidden.lg\:flex {
    display: none;
  }
}