:root {
  --fs-bg: #f6f9fc;
  --fs-surface: #ffffff;
  --fs-text: #16283c;
  --fs-heading: #04233b;
  --fs-muted: #516173;
  --fs-border: #c2d4e2;
  --fs-border-soft: #ebeef8;
  --fs-accent: #00d2c5;
  --fs-accent-dark: #00b9c8;
  --fs-shadow: 0 18px 50px rgba(4, 35, 59, 0.12);
}

html,
body,
#root {
  background: var(--fs-bg) !important;
  color: var(--fs-text) !important;
  font-family: LabGrotesque, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#root > div[class*="min-h-screen"][class*="bg-linear-to-tr"] {
  background:
    radial-gradient(circle at 22% 18%, rgba(0, 210, 197, 0.18), transparent 28rem),
    radial-gradient(circle at 78% 72%, rgba(194, 212, 226, 0.34), transparent 30rem),
    linear-gradient(135deg, #ffffff 0%, #f6f9fc 54%, #eef5fb 100%) !important;
}

#root > div[class*="min-h-screen"][class*="bg-linear-to-tr"] > div[class*="pointer-events-none"] svg {
  opacity: 0.16 !important;
}

#root > div[class*="min-h-screen"][class*="bg-linear-to-tr"] > div[class*="pointer-events-none"] svg * {
  stroke: #c2d4e2 !important;
  fill: #c2d4e2 !important;
}

header {
  padding-top: 24px !important;
  color: var(--fs-heading) !important;
}

header > a:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--fs-heading) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

header > a:first-child img {
  display: none !important;
}

header > a:first-child::before {
  content: "∞";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--fs-heading);
  color: var(--fs-accent);
  font-size: 25px;
  line-height: 1;
  font-weight: 700;
}

header > a:first-child::after {
  content: "FinSys Secrets";
  font-size: 16px;
  letter-spacing: 0;
}

header a[href="/signup"],
header a[href="/login"] {
  border: 1px solid var(--fs-border) !important;
  background: #ffffff !important;
  color: var(--fs-heading) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(4, 35, 59, 0.08) !important;
}

header a[href="/signup"]::before,
header a[href="/signup"]::after,
header a[href="/login"]::before,
header a[href="/login"]::after {
  content: none !important;
}

form div[class*="max-w-sm"][class*="p-6"] {
  position: relative !important;
  overflow: hidden !important;
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  border: 1px solid rgba(194, 212, 226, 0.9) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--fs-shadow) !important;
  color: var(--fs-text) !important;
  backdrop-filter: blur(18px);
}

form div[class*="max-w-sm"][class*="p-6"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--fs-accent), var(--fs-accent-dark));
}

form div[class*="max-w-sm"] [class*="text-transparent"] {
  background: none !important;
  -webkit-text-fill-color: var(--fs-heading) !important;
  color: var(--fs-heading) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

form input,
form [role="textbox"] {
  border: 1px solid var(--fs-border) !important;
  border-radius: 8px !important;
  background: #f8fbfd !important;
  color: var(--fs-heading) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  -webkit-text-fill-color: var(--fs-heading) !important;
  caret-color: var(--fs-heading) !important;
}

form input[type="password"],
form input[type="text"],
form input[type="email"],
form input[id="current-password"],
form input[name="password"],
form input[name="email"] {
  color: var(--fs-heading) !important;
  -webkit-text-fill-color: var(--fs-heading) !important;
  opacity: 1 !important;
}

form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fs-heading) !important;
  box-shadow: 0 0 0 1000px #f8fbfd inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

form [class*="InputGroup"],
form [class*="InputGroup"] *,
form div:has(> input[id="current-password"]),
form div:has(input[name="password"]) {
  color: var(--fs-heading) !important;
  -webkit-text-fill-color: var(--fs-heading) !important;
}

form input::placeholder {
  color: #7f8fa4 !important;
  -webkit-text-fill-color: #7f8fa4 !important;
  opacity: 1 !important;
}

form input:focus,
form input:focus-visible {
  border-color: var(--fs-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 210, 197, 0.18) !important;
  outline: none !important;
}

form button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

form button[type="submit"] {
  border-color: transparent !important;
  background: linear-gradient(90deg, var(--fs-accent), var(--fs-accent-dark)) !important;
  color: #04233b !important;
  box-shadow: 0 12px 26px rgba(0, 185, 200, 0.22) !important;
}

form button[type="submit"]:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

form button:not([type="submit"]) {
  border: 1px solid var(--fs-border-soft) !important;
  background: #ffffff !important;
  color: var(--fs-heading) !important;
}

form button:not([type="submit"]):hover {
  border-color: var(--fs-border) !important;
  background: #f6f9fc !important;
}

form button[data-finsys-gitlab-login="true"] {
  width: 100% !important;
  min-height: 44px !important;
  gap: 10px !important;
}

form button[data-finsys-gitlab-login="true"] .finsys-gitlab-login-label {
  display: inline-flex !important;
  color: var(--fs-heading) !important;
  -webkit-text-fill-color: var(--fs-heading) !important;
  font-weight: 600 !important;
}

form span,
form a,
footer,
footer p {
  color: var(--fs-muted) !important;
}

form a:hover,
footer a:hover {
  color: var(--fs-accent-dark) !important;
}

form [class*="border-t"] {
  border-color: var(--fs-border-soft) !important;
}

form [class*="text-mineshaft"] {
  color: #7f8fa4 !important;
}

footer svg,
footer path {
  color: #7f8fa4 !important;
}

[data-sonner-toaster],
[role="region"][aria-label*="Notifications"] {
  color: var(--fs-text) !important;
}

@media (max-width: 640px) {
  header {
    padding-top: 16px !important;
  }

  header a:first-child::after {
    content: "FinSys";
  }

  form div[class*="max-w-sm"][class*="p-6"] {
    max-width: 100% !important;
    padding: 22px !important;
  }
}