:root {
  --f9-red:  #ee1c25;  /* arrow / primary action */
  --f9-teal: #12996e;  /* orbit ring / links & focus */
  --card-bg: #111111;  /* card surface */
  --page-bg: #1f2733;  /* page behind card */
  --text:    #e6e6e6;  /* primary text */
  --text-muted: #9ca3af;
}

/* Page background */
html, html.bg-blue-100, body {
  background-color: var(--page-bg) !important;
  color: var(--text) !important;
}

/* The card — the ONLY element that gets a box */
.app-container {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid #262626 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55) !important;
  padding: 2rem !important;
}

/* Text inside the card — no boxes, just readable text */
.app-container .logo-txt,
.app-container label,
.app-container .text-primary-700 {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

/* Text input */
.app-inp-txt {
  color: #111111 !important;
}
.app-inp-txt::placeholder {
  color: var(--text-muted) !important;
}

/* Input prefix icon */
.app-inp-prf-img {
  color: var(--f9-teal) !important;
}

/* Focus state */
.app-inp-txt:focus,
input:focus,
.input:focus {
  border-color: var(--f9-teal) !important;
  box-shadow: 0 0 0 0.125em rgba(18, 153, 110, 0.4) !important;
}

/* Links → teal */
a,
.text-primary-600 {
  color: var(--f9-teal) !important;
}
a:hover,
.text-primary-600:hover {
  color: #0e7d5a !important;
}

/* Primary button → F9 red */
.app-btn-pri,
button[type="submit"] {
  background-color: var(--f9-red) !important;
  border-color: var(--f9-red) !important;
  color: #ffffff !important;
  transition: background-color 0.15s ease;
}
.app-btn-pri:hover,
button[type="submit"]:hover {
  background-color: #c81119 !important;
  border-color: #c81119 !important;
}

/* Error text keeps brand red */
.notification.is-danger,
.help.is-danger {
  color: var(--f9-red) !important;
}