/* Proxy Management presentation layer. Authelia 4.39.28. */
:root, body[data-theme] {
  color-scheme: dark;
  --background: #111111; --foreground: #f5f5f5;
  --card: #1a1a1a; --card-foreground: #f5f5f5;
  --popover: #242424; --popover-foreground: #f5f5f5;
  --primary: #66aaff; --primary-foreground: #07182e;
  --secondary: #66aaff; --secondary-foreground: #111111;
  --muted: #242424; --muted-foreground: #66aaff;
  --accent: #303030; --accent-foreground: #f5f5f5;
  --border: #383838; --input: #383838; --ring: #66aaff;
  --custom-icon: #66aaff; --divider: #383838;
  --info: #66aaff; --info-foreground: #111111;
  --radius: .8rem;
}
body {
  background: radial-gradient(ellipse at 15% 12%, #242424 0, transparent 48%),
              radial-gradient(ellipse at 90% 90%, #242424 0, transparent 50%), #111111;
  background-attachment: fixed;
  font-family: 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#first-factor-stage, #second-factor-stage {
  min-height: 95svh; padding: 40px 16px;
}
#first-factor-stage > .mx-auto, #second-factor-stage > .mx-auto {
  width: 100%; max-width: 490px; padding: 30px 34px 24px;
  background: #1a1a1a;
  border: 1px solid #383838; border-radius: 24px;
  box-shadow: 0 24px 80px #00000040, inset 0 1px 0 #ffffff05;
}
#second-factor-stage > .mx-auto { max-width: 540px; }
#first-factor-stage > .mx-auto::before, #second-factor-stage > .mx-auto::before {
  content: 'PROXY MANAGEMENT'; display: block;
  color: #a3a3a3; font-size: 11px; font-weight: 600;
  letter-spacing: .19em; margin: 0 0 18px;
}
#first-factor-stage .items-stretch > .p-2,
#second-factor-stage .items-stretch > .p-2 {
  width: 56px; height: 56px; margin: 0 auto 18px; padding: 0;
  background: #242424; border: 1px solid #383838; border-radius: 17px;
  display: grid; place-items: center;
}
#first-factor-stage .items-stretch > .p-2 > *,
#second-factor-stage .items-stretch > .p-2 > * { display: none; }
#first-factor-stage .items-stretch > .p-2::after,
#second-factor-stage .items-stretch > .p-2::after {
  content: ''; width: 29px; height: 29px; background: #66aaff;
  mask: url('/auth/pm-theme/shield.svg') center / contain no-repeat;
}
#first-factor-stage h1, #first-factor-stage h5,
#second-factor-stage h1, #second-factor-stage h5 {
  font-size: 25px; font-weight: 600; letter-spacing: -.025em; line-height: 1.3;
}
#form-login { margin-top: 16px; }
#form-login input { border-radius: 11px; }
#sign-in-button { min-height: 48px; border-radius: 11px; font-weight: 650; text-transform: none; font-size: 16px; }
#second-factor-stage div:has(> #logout-button) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 7px; font-size: 0; margin: 8px 0 14px;
}
#logout-button, #switch-user-button, #methods-button {
  font-size: 13px; line-height: 20px; letter-spacing: 0;
  text-transform: none; white-space: nowrap; min-height: 36px;
  padding: 8px 12px; border: 1px solid #383838; border-radius: 9px;
  color: #f5f5f5; background: #242424;
}
#logout-button:hover, #switch-user-button:hover, #methods-button:hover {
  background: #303030; border-color: #66aaff; color: #f5f5f5;
}
#second-factor-stage .my-4.border {
  min-width: 0; width: 100%; margin: 0 0 16px;
  padding: 24px 20px; border-radius: 16px; background: #1a1a1a;
}
#second-factor-stage a, #second-factor-stage button { transition: background-color .15s, border-color .15s; }
#one-time-password-method [id="2fa-container"] { height: auto; min-height: 210px; }
#one-time-password-method [id="2fa-container"] > div { flex-direction: column; flex-wrap: nowrap; gap: 14px; padding: 18px 0; }
#otp-input [role="group"] { display: flex; flex-wrap: nowrap; justify-content: center; gap: 7px; }
#otp-input [role="group"] input {
  width: 39px; height: 46px; margin: 0; border: 1px solid #383838;
  border-radius: 8px; background: #242424; color: #f5f5f5;
}
#otp-input [role="group"] input:focus { outline: 2px solid #66aaff; outline-offset: 2px; border-color: #66aaff; }
#one-time-password-method circle[stroke="#000"] { stroke: #66aaff; }
#one-time-password-method circle[fill="#000"] { fill: #555555; }
#one-time-password-method circle[stroke="#FFFFFF"] { stroke: #66aaff; }
@media (max-width: 520px) {
  #first-factor-stage, #second-factor-stage { padding: 28px 12px; }
  #first-factor-stage > .mx-auto, #second-factor-stage > .mx-auto { padding: 26px 18px 20px; border-radius: 19px; }
  #logout-button, #switch-user-button, #methods-button { font-size: 12px; padding: 7px 9px; }
  #otp-input [role="group"] { gap: 6px; }
  #otp-input [role="group"] input { width: 33px; height: 43px; }
}