body {
  background: linear-gradient(to bottom, #121212, #1e1e1e);
  color: #f5f5f5;
  font-family: Arial, sans-serif;
  margin: 0;
}

/* Centered card layout belongs to the SHORT auth/onboarding pages only.
   Globally it broke scrollable pages (profile, subscriptions): a body-level
   flex centering a TALLER-than-viewport column overflows BOTH directions,
   so the top of the content rode up behind the fixed top bar (the pt-*
   spacer was eaten by the centering). overflow-y:auto keeps the viewport
   exactly content-height for those pages (no double scrollbar). */
body.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow-y: auto;
}

.card {
  background: linear-gradient(to bottom, #1e1e1e, #2a2a2a);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: slideDown 0.5s ease-out;
  width: 300px;
}

/* Onboarding step indicator (interest/language/feed forms) - shared across
   the 3-stage wizard so progress looks consistent regardless of step. */
.onboarding-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
}

.onboarding-step .step-dot {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #374151;
  color: #d1d5db;
  flex-shrink: 0;
}

.onboarding-step.is-done .step-dot {
  background: #059669;
  color: #fff;
}

.onboarding-step.is-current {
  color: #fff;
}

.onboarding-step.is-current .step-dot {
  background: #10b981;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
}

.onboarding-step-connector {
  flex: 1;
  height: 2px;
  background: #374151;
  min-width: 16px;
}

h1 {
  margin-bottom: 20px;
}

label {
  display: block;
  margin: 10px 0 5px;
}

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
}

h1 {
  font-size: 2em; /* Increase the font size */
  margin-bottom: 20px;
}

/* Removed: was a bare `button` selector forcing width:100%/margin-top/a
   fixed bg color onto EVERY button in the app (segmented feed-mode tabs,
   card icon buttons, the Refresh button, ...), since none of them declare
   their own width and a plain element selector beats nothing. Every button
   template in the app already carries its own Tailwind bg/padding/rounded
   classes (login, register, onboarding submits, card action buttons), so
   nothing needed it. */

a {
  color: #34d399; /* emerald-400 - unified brand green accent */
  text-decoration: none;
}

a:hover {
  color: #6ee7b7; /* emerald-300 */
}

@keyframes slideDown {
  from {
      transform: translateY(-20px);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}


/* background-color itself now comes from the bg-emerald-600 Tailwind class
   on the element (navbar.html) - a background SHORTHAND here (which also
   sets background-image) would paint over that opaque gradient regardless
   of the utility class, same specificity or not. Just the shadow + a subtle
   depth gradient using the brand green stays here. */
.top-bar {
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Keyboard-navigated card focus (arrow keys - see index.html/index_guest.html).
   Deliberately not relying on :focus-visible, since the card div itself isn't
   a natively focusable element - this is a JS-driven visual state, not
   actual DOM focus. */
.recommendation-card.card-kbd-focus {
  outline: 2px solid #10b981;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.18);
}