:root,
.dark {
  --background: #0d1219;
  --foreground: #e5eaf2;
  --card: #151e2b;
  --card-foreground: #e5eaf2;
  --popover: #151e2b;
  --popover-foreground: #e5eaf2;
  --primary: #d8bb78;
  --primary-foreground: #101722;
  --secondary: #1d2a3a;
  --secondary-foreground: #e5eaf2;
  --muted: #1b2635;
  --muted-foreground: #9aa9bd;
  --accent: #26364b;
  --accent-foreground: #f2d58a;
  --destructive: #9b3c47;
  --border: #344258;
  --input: #344258;
  --ring: #d8bb78;
  --custom-icon: #d8bb78;
}

html,
body,
#root {
  min-height: 100%;
  background: #0d1219 !important;
  color: #e5eaf2 !important;
}

body {
  background:
    radial-gradient(circle at 15% 18%, rgba(216, 187, 120, .10), transparent 28rem),
    radial-gradient(circle at 85% 82%, rgba(67, 96, 135, .16), transparent 34rem),
    linear-gradient(145deg, #0d1219 0%, #111a26 48%, #0b1017 100%) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "GOLD TRADING INTELLIGENCE";
  position: fixed;
  top: 30px;
  left: 38px;
  z-index: 10;
  color: #d8bb78;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  pointer-events: none;
}

[id$="-stage"] > .mx-auto {
  position: relative;
  padding: 34px 32px !important;
  border: 1px solid #344258;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(23, 33, 48, .98), rgba(17, 26, 38, .98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .025);
}

[id$="-stage"] > .mx-auto::before {
  content: "ACCÈS SÉCURISÉ · TOTP";
  display: block;
  margin-bottom: 20px;
  color: #8fa0b7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

[id$="-stage"] img[src*="logo.png"],
#UserSvg {
  width: 92px !important;
  height: 92px !important;
  margin: 8px auto 14px !important;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(216, 187, 120, .18));
}

#UserSvg {
  background: url("/auth/gti-logo.png") center / contain no-repeat;
}

#UserSvg path {
  opacity: 0;
}

h5,
h4,
h3,
h2,
h1 {
  color: #f0f3f8 !important;
  letter-spacing: -.02em;
}

input,
[data-slot="floating-input"] {
  color: #edf1f7 !important;
  border-color: #3a4a61 !important;
  background: #101925 !important;
}

input:focus,
[data-slot="floating-input"]:focus {
  border-color: #d8bb78 !important;
  box-shadow: 0 0 0 3px rgba(216, 187, 120, .16) !important;
}

label,
.text-primary {
  color: #d8bb78 !important;
}

#sign-in-button,
button.bg-primary {
  min-height: 46px;
  border: 1px solid #e4ca8c;
  background: linear-gradient(135deg, #e3c77f, #c9a85c) !important;
  color: #111827 !important;
  font-weight: 900;
  letter-spacing: .05em;
  box-shadow: 0 10px 30px rgba(189, 150, 68, .18);
}

#sign-in-button:hover,
button.bg-primary:hover {
  background: linear-gradient(135deg, #efd795, #d3b46b) !important;
}

a:not([href="https://www.authelia.com"]) {
  color: #e1c77f !important;
}

a[href="https://www.authelia.com"] {
  display: none !important;
}

button[aria-label*="langue" i],
button[aria-label*="language" i] {
  color: #aab7c9 !important;
}

@media (max-width: 640px) {
  body::before {
    top: 20px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 9px;
  }

  [id$="-stage"] > .mx-auto {
    margin: 72px 16px 24px !important;
    padding: 28px 20px !important;
  }
}