/* Alteriom presentation for Authelia 4.39.19. Use stable IDs and component
   classes; never generated Emotion class names. All controls remain native. */
:root {
  color-scheme: dark;
  --brand-bg: #0a101b;
  --brand-panel: #121d2d;
  --brand-border: #34465e;
  --brand-text: #eff5fc;
  --brand-muted: #b6c5d8;
  --brand-accent: #67d5ee;
}
html body {
  min-height: 100dvh;
  background: radial-gradient(ellipse at 15% 10%, #13334a 0, transparent 48%), var(--brand-bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--brand-text);
}
.alteriom-masthead {
  position: absolute; top: 24px; left: clamp(20px, 5vw, 72px);
  display: flex; align-items: center; gap: 12px; pointer-events: none;
}
.alteriom-masthead img { width: 36px; height: 36px; }
.alteriom-masthead span {
  color: var(--brand-text);
  font: 650 18px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .16em;
}
#root .MuiAppBar-root { background: transparent; padding: 12px 20px; }
#root .MuiContainer-root {
  background: var(--brand-panel); border: 1px solid var(--brand-border);
  border-radius: 20px; padding: 36px; margin-block: 28px;
  box-shadow: 0 24px 80px #0004;
}
/* Replace only the decorative silhouette with the existing corporate wordmark. */
#root .MuiContainer-root > .MuiGrid-container::before {
  content: ""; display: block; width: 216px; height: 108px; margin: 0 auto 24px;
  background: #f5f7fb url("./logo.png") center / 200px 100px no-repeat;
  border-radius: 12px;
}
#root #UserSvg { display: none; }
#root .MuiTypography-h5 { font-weight: 600; font-size: 26px; letter-spacing: -.025em; }
#root .MuiInputBase-root { color: var(--brand-text); background: #0c1523; border-radius: 8px; }
#root .MuiOutlinedInput-root:not(.Mui-error) .MuiOutlinedInput-notchedOutline { border-color: #61738c; }
#root .MuiInputLabel-root:not(.Mui-error) { color: var(--brand-muted); }
#root .MuiInputLabel-root.Mui-focused:not(.Mui-error) { color: var(--brand-accent); }
#root .MuiOutlinedInput-root.Mui-focused:not(.Mui-error) .MuiOutlinedInput-notchedOutline { border-color: var(--brand-accent); }
#root .MuiButton-containedPrimary:not(.Mui-disabled) { color: #071b28; background: var(--brand-accent); box-shadow: none; }
#root .MuiButton-containedPrimary:not(.Mui-disabled):hover { background: #92e4f5; }
#root .MuiButton-root { min-height: 46px; border-radius: 8px; text-transform: none; font-weight: 600; }
#root .MuiLink-root { color: #8cdef1; }
#root .MuiButton-outlinedPrimary { color: #8cdef1; border-color: #6198ac; }
#root .MuiCheckbox-root.Mui-checked { color: var(--brand-accent); }
#root .MuiIconButton-root { color: var(--brand-muted); }
#root a:focus-visible, #root button:focus-visible, #root .Mui-focusVisible { outline: 3px solid var(--brand-accent); outline-offset: 4px; }
#root .MuiLink-root:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .alteriom-masthead { top: 19px; left: 16px; gap: 8px; }
  .alteriom-masthead img { width: 28px; height: 28px; }
  .alteriom-masthead span { font-size: 14px; letter-spacing: .1em; }
  #root .MuiAppBar-root { padding: 4px 0; }
  #root .MuiContainer-root { width: calc(100% - 32px); padding: 28px 22px; border-radius: 16px; margin-block: 20px; }
  #root .MuiContainer-root > .MuiGrid-container::before { width: 184px; height: 92px; background-size: 176px 88px; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #root *, #root *::before, #root *::after { transition: none !important; scroll-behavior: auto !important; }
}

#root a[href="https://www.authelia.com"] { white-space: nowrap; }
/* MFA has a nested panel; let its six native code inputs fit narrow phones. */
#root .MuiBox-root:has(> #one-time-password-method) {
  min-width: 0; width: 100%; padding: 24px 12px; border-color: var(--brand-border); border-radius: 12px;
}
#root #otp-input > div { justify-content: center; }
#root #otp-input input { background: #0c1523; color: var(--brand-text); border: 1px solid #61738c; border-radius: 6px; }
#root #otp-input input:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
#root .MuiButton-textSecondary { color: #8cdef1; }
@media (max-width: 380px) {
  #root #otp-input input { width: 25px !important; margin-inline: 3px; font-size: 20px; }
  #root .MuiContainer-root { padding-inline: 18px; }
}