/* ZEILI / Authelia 4.39 — presentation only; native forms and security remain intact. */
:root, :root.dark, :root.light, [data-theme] {
  color-scheme: dark;
  --background: #090a10; --foreground: #f4f0fa;
  --card: #15151f; --card-foreground: #f4f0fa;
  --popover: #1b1b28; --popover-foreground: #f4f0fa;
  --primary: #e8c780; --primary-foreground: #17131b;
  --secondary: #b6a0ef; --secondary-foreground: #15111d;
  --muted: #20202e; --muted-foreground: #b1adbf;
  --accent: #2b253b; --accent-foreground: #eee6ff;
  --border: #393545; --input: #494253; --ring: #c6adf4;
  --destructive: #ff8f9e; --destructive-foreground: #240d13;
  --custom-icon: #e8c780; --custom-loading-bar: #c6adf4;
}
html { min-height: 100%; background: #090a10; }
body {
  margin: 0; min-height: 100vh; color: #f4f0fa;
  background: radial-gradient(ellipse at 13% 26%, #71613b21, transparent 42%),
    radial-gradient(ellipse at 87% 59%, #8d57d82b, transparent 44%), #090a10;
  background-attachment: fixed;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(#9791b21c 1px, transparent 1px), linear-gradient(90deg, #9791b21c 1px, transparent 1px);
  background-size: 64px 64px; mask-image: linear-gradient(black, transparent 85%);
}
.zeili-brand { position: absolute; top: 30px; left: max(32px, calc((100vw - 1240px)/2)); display: flex; gap: 13px; align-items: center; }
.zeili-brand svg { width: 40px; height: 40px; color: #e8c780; }
.zeili-brand strong { display: block; font-size: 15px; font-weight: 650; letter-spacing: .25em; }
.zeili-brand small { display: block; margin-top: 3px; font-size: 11px; color: #aca6ba; letter-spacing: .12em; }
.zeili-intro { display: none; }
#root > div > header { position: relative; z-index: 3; padding: 26px 28px 0; }
#language-button { color: #c3bdcf; font-size: 13px; min-height: 44px; border: 1px solid #ffffff12; background: #16151d99; padding: 10px 14px; }
#first-factor-stage { min-height: calc(100svh - 100px); padding: 38px 20px 58px; position: relative; }
#first-factor-stage > div {
  max-width: 448px; padding: 34px 38px 28px; width: 100%;
  background: linear-gradient(145deg, #1d1c29e8, #12121ce8);
  border: 1px solid #c9b6ef28; border-radius: 28px;
  box-shadow: 0 28px 90px #0008, 0 0 65px #b595ee0b, inset 0 1px #ffffff09;
  backdrop-filter: blur(18px); animation: zeili-arrive .5s ease-out both;
}
#first-factor-stage #UserSvg { width: 58px; height: 58px; padding: 13px; box-sizing: content-box; border: 1px solid #e8c78038; border-radius: 24px; background: linear-gradient(135deg, #e8c78013, #b898ed13); filter: drop-shadow(0 0 15px #e8c78012); margin: 0 auto 14px; }
#first-factor-stage h5 { font-size: 28px; font-weight: 600; letter-spacing: -.035em; margin-bottom: 12px; }
#form-login input[data-slot="floating-input"] { border-radius: 12px; background: #0a0a1280; min-height: 58px; }
#form-login input:focus { border-color: #c6adf4; --tw-ring-color: #c6adf426; }
#form-login input[aria-invalid="true"] { border-color: var(--destructive); }
#form-login input:-webkit-autofill { -webkit-text-fill-color: #f4f0fa; box-shadow: 0 0 0 100px #15121f inset; caret-color: #f4f0fa; }
#form-login label[for="remember-checkbox"] { font-size: 14px; font-weight: 400; color: #bbb4c9; }
#remember-checkbox { width: 19px; height: 19px; }
#sign-in-button { min-height: 50px; border-radius: 12px; margin-top: 4px; background: linear-gradient(110deg, #eed49b, #dcb674); color: #1a1420; text-transform: none; font-size: 16px; font-weight: 650; box-shadow: 0 5px 22px #dfbd7018; }
#sign-in-button:hover:not(:disabled) { background: linear-gradient(110deg, #f5dfb0, #ebc68c); transform: translateY(-1px); box-shadow: 0 8px 26px #dfbd7028; }
#reset-password-button { color: #c8b3f2; font-size: 13px; min-height: 44px; }
#first-factor-stage a[href="https://www.authelia.com"] { color: #a69caf; margin-top: 12px; font-size: 11px; }
button:focus-visible, a:focus-visible { outline: 2px solid #d1bafa; outline-offset: 4px; }
[role="dialog"], [role="menu"], [data-slot="toast"] { --background: #191722; --foreground: #f4f0fa; }
@keyframes zeili-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1100px) {
  body:has(#first-factor-stage) .zeili-intro { display: block; position: absolute; top: 50%; left: max(60px, calc((100vw - 1120px)/2)); width: 460px; transform: translateY(-43%); }
  .zeili-intro .eyebrow { display: flex; align-items: center; gap: 10px; color: #dbc18d; font-size: 11px; letter-spacing: .24em; font-weight: 600; }
  .zeili-intro .eyebrow::before { content: ""; width: 26px; height: 1px; background: #dbc18d; }
  .zeili-intro h1 { margin: 26px 0 22px; font-size: clamp(48px, 4.6vw, 66px); line-height: 1.09; font-weight: 600; letter-spacing: -.055em; }
  .zeili-intro h1 span { color: #c5adef; }
  .zeili-intro p { color: #aca6ba; font-size: 16px; line-height: 1.8; max-width: 330px; }
  .zeili-intro .signature { margin-top: 44px; padding-top: 22px; border-top: 1px solid #c6adf41c; max-width: 320px; font-size: 12px; letter-spacing: .04em; color: #8e869f; }
  #first-factor-stage { margin-left: 48%; margin-right: max(30px, calc((100vw - 1240px)/2)); }
}
@media (max-width: 599px) {
  .zeili-brand { top: 23px; left: 21px; gap: 9px; }
  .zeili-brand svg { width: 32px; height: 32px; }
  .zeili-brand strong { font-size: 12px; }
  .zeili-brand small { font-size: 9px; }
  #root > div > header { padding: 15px 7px 0; }
  #language-button { font-size: 12px; padding: 9px 10px; }
  #first-factor-stage { min-height: calc(100svh - 80px); padding: 30px 16px 34px; }
  #first-factor-stage > div { padding: 26px 24px 23px; border-radius: 24px; }
  #first-factor-stage h5 { font-size: 26px; }
  #first-factor-stage #UserSvg { width: 45px; height: 45px; padding: 12px; margin-bottom: 10px; border-radius: 21px; }
}
@media (max-height: 650px) { #first-factor-stage { padding-top: 18px; } .zeili-intro { top: 54% !important; } }
@media (prefers-reduced-motion: reduce) { #first-factor-stage > div { animation: none; } #sign-in-button { transition: none; transform: none !important; } }