body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.hidden{display:none}:root,:host{--fa-font-solid:normal 900 1em/1 "Font Awesome 7 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 7 Free";--fa-font-light:normal 300 1em/1 "Font Awesome 7 Pro";--fa-font-thin:normal 100 1em/1 "Font Awesome 7 Pro";--fa-font-duotone:normal 900 1em/1 "Font Awesome 7 Duotone";--fa-font-duotone-regular:normal 400 1em/1 "Font Awesome 7 Duotone";--fa-font-duotone-light:normal 300 1em/1 "Font Awesome 7 Duotone";--fa-font-duotone-thin:normal 100 1em/1 "Font Awesome 7 Duotone";--fa-font-brands:normal 400 1em/1 "Font Awesome 7 Brands";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 7 Sharp";--fa-font-sharp-regular:normal 400 1em/1 "Font Awesome 7 Sharp";--fa-font-sharp-light:normal 300 1em/1 "Font Awesome 7 Sharp";--fa-font-sharp-thin:normal 100 1em/1 "Font Awesome 7 Sharp";--fa-font-sharp-duotone-solid:normal 900 1em/1 "Font Awesome 7 Sharp Duotone";--fa-font-sharp-duotone-regular:normal 400 1em/1 "Font Awesome 7 Sharp Duotone";--fa-font-sharp-duotone-light:normal 300 1em/1 "Font Awesome 7 Sharp Duotone";--fa-font-sharp-duotone-thin:normal 100 1em/1 "Font Awesome 7 Sharp Duotone";--fa-font-slab-regular:normal 400 1em/1 "Font Awesome 7 Slab";--fa-font-slab-press-regular:normal 400 1em/1 "Font Awesome 7 Slab Press";--fa-font-whiteboard-semibold:normal 600 1em/1 "Font Awesome 7 Whiteboard";--fa-font-thumbprint-light:normal 300 1em/1 "Font Awesome 7 Thumbprint";--fa-font-notdog-solid:normal 900 1em/1 "Font Awesome 7 Notdog";--fa-font-notdog-duo-solid:normal 900 1em/1 "Font Awesome 7 Notdog Duo";--fa-font-etch-solid:normal 900 1em/1 "Font Awesome 7 Etch";--fa-font-graphite-thin:normal 100 1em/1 "Font Awesome 7 Graphite";--fa-font-jelly-regular:normal 400 1em/1 "Font Awesome 7 Jelly";--fa-font-jelly-fill-regular:normal 400 1em/1 "Font Awesome 7 Jelly Fill";--fa-font-jelly-duo-regular:normal 400 1em/1 "Font Awesome 7 Jelly Duo";--fa-font-chisel-regular:normal 400 1em/1 "Font Awesome 7 Chisel";--fa-font-utility-semibold:normal 600 1em/1 "Font Awesome 7 Utility";--fa-font-utility-duo-semibold:normal 600 1em/1 "Font Awesome 7 Utility Duo";--fa-font-utility-fill-semibold:normal 600 1em/1 "Font Awesome 7 Utility Fill"}.svg-inline--fa{box-sizing:content-box;display:var(--fa-display,inline-block);vertical-align:-.125em;height:1em;width:var(--fa-width,1.25em);overflow:visible}.svg-inline--fa.fa-2xs{vertical-align:.1em}.svg-inline--fa.fa-xs{vertical-align:0}.svg-inline--fa.fa-sm{vertical-align:-.0714286em}.svg-inline--fa.fa-lg{vertical-align:-.2em}.svg-inline--fa.fa-xl{vertical-align:-.25em}.svg-inline--fa.fa-2xl{vertical-align:-.3125em}.svg-inline--fa.fa-pull-left,.svg-inline--fa .fa-pull-start{float:inline-start;margin-inline-end:var(--fa-pull-margin,.3em)}.svg-inline--fa.fa-pull-right,.svg-inline--fa .fa-pull-end{float:inline-end;margin-inline-start:var(--fa-pull-margin,.3em)}.svg-inline--fa.fa-li{width:var(--fa-li-width,2em);inset-block-start:.25em;inset-inline-start:calc(-1 * var(--fa-li-width,2em))}.fa-layers-counter,.fa-layers-text{text-align:center;display:inline-block;position:absolute}.fa-layers{text-align:center;vertical-align:-.125em;height:1em;width:var(--fa-width,1.25em);display:inline-block;position:relative}.fa-layers .svg-inline--fa{transform-origin:50%;margin:auto;position:absolute;inset:0}.fa-layers-text{transform-origin:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.fa-layers-counter{background-color:var(--fa-counter-background-color,#ff253a);border-radius:var(--fa-counter-border-radius,1em);box-sizing:border-box;color:var(--fa-inverse,#fff);line-height:var(--fa-counter-line-height,1);max-width:var(--fa-counter-max-width,5em);min-width:var(--fa-counter-min-width,1.5em);padding:var(--fa-counter-padding,.25em .5em);right:var(--fa-right,0);text-overflow:ellipsis;top:var(--fa-top,0);transform:scale(var(--fa-counter-scale,.25));transform-origin:100% 0;overflow:hidden}.fa-layers-bottom-right{bottom:var(--fa-bottom,0);right:var(--fa-right,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:100% 100%;top:auto}.fa-layers-bottom-left{bottom:var(--fa-bottom,0);left:var(--fa-left,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:0 100%;top:auto;right:auto}.fa-layers-top-right{top:var(--fa-top,0);right:var(--fa-right,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:100% 0}.fa-layers-top-left{left:var(--fa-left,0);right:auto;top:var(--fa-top,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:0 0}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{vertical-align:.225em;font-size:.625em;line-height:.1em}.fa-xs{vertical-align:.125em;font-size:.75em;line-height:.0833333em}.fa-sm{vertical-align:.0535715em;font-size:.875em;line-height:.0714286em}.fa-lg{vertical-align:-.075em;font-size:1.25em;line-height:.05em}.fa-xl{vertical-align:-.125em;font-size:1.5em;line-height:.0416667em}.fa-2xl{vertical-align:-.1875em;font-size:2em;line-height:.03125em}.fa-width-auto{--fa-width:auto}.fa-fw,.fa-width-fixed{--fa-width:1.25em}.fa-ul{margin-inline-start:var(--fa-li-margin,2.5em);padding-inline-start:0;list-style-type:none}.fa-ul>li{position:relative}.fa-li{text-align:center;width:var(--fa-li-width,2em);line-height:inherit;position:absolute;inset-inline-start:calc(-1 * var(--fa-li-width,2em))}.fa-border{border-color:var(--fa-border-color,#eee);border-radius:var(--fa-border-radius,.1em);border-style:var(--fa-border-style,solid);border-width:var(--fa-border-width,.0625em);box-sizing:var(--fa-border-box-sizing,content-box);padding:var(--fa-border-padding,.1875em .25em)}.fa-pull-left,.fa-pull-start{float:inline-start;margin-inline-end:var(--fa-pull-margin,.3em)}.fa-pull-right,.fa-pull-end{float:inline-end;margin-inline-start:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28, .84, .42, 1))}.fa-fade{animation-name:fa-fade;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4, 0, .6, 1))}.fa-beat-fade{animation-name:fa-beat-fade;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4, 0, .6, 1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin{animation-name:fa-spin;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-bounce,.fa-fade,.fa-beat-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{transition:none!important;animation:none!important}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1)translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1), var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9), var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05), var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1, 1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1)translateY(0)}to{transform:scale(1)translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0), var(--fa-flip-y,1), var(--fa-flip-z,0), var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0)}}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.svg-inline--fa .fa-primary{fill:var(--fa-primary-color,currentColor);opacity:var(--fa-primary-opacity,1)}.svg-inline--fa .fa-secondary{fill:var(--fa-secondary-color,currentColor);opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-primary{opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-secondary{opacity:var(--fa-primary-opacity,1)}.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary{fill:#000}.svg-inline--fa.fa-inverse{fill:var(--fa-inverse,#fff)}.fa-stack{vertical-align:middle;width:2.5em;height:2em;line-height:2em;display:inline-block;position:relative}.fa-inverse{color:var(--fa-inverse,#fff)}.svg-inline--fa.fa-stack-1x{--fa-width:1.25em;height:1em;width:var(--fa-width)}.svg-inline--fa.fa-stack-2x{--fa-width:2.5em;height:2em;width:var(--fa-width)}.fa-stack-1x,.fa-stack-2x{z-index:var(--fa-stack-z-index,auto);margin:auto;position:absolute;inset:0}


/* ==========================================================================
   RC Cloud Enterprise Auth Theme - ZERO SQUISH / ZERO OVERLAP GUARANTEE
   ========================================================================== */

:root {
  --rc-canvas-bg: #0B0F17;
  --rc-card-bg: rgba(15, 23, 42, 0.94);
  --rc-card-border: rgba(51, 65, 85, 0.7);
  --rc-text-primary: #F8FAFC;
  --rc-text-secondary: #94A3B8;
  --rc-brand-primary: #3B82F6;
  --rc-brand-glow: rgba(59, 130, 246, 0.25);
}

body {
  background-color: var(--rc-canvas-bg) !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(15, 23, 42, 0.95) 0%, transparent 60%) !important;
  color: var(--rc-text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
}

/* 1. Fluid Container */
.MuiContainer-root,
.MuiContainer-maxWidthXs,
div[class*="MuiContainer"] {
  max-width: 760px !important;
  width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* 2. Main Outer Card */
#root main > .MuiPaper-root:not(.MuiDialog-paper):not(.MuiMenu-paper):not(.MuiPopover-paper) {
  background: var(--rc-card-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--rc-card-border) !important;
  border-radius: 20px !important;
  padding: 36px 28px !important;
  max-width: 720px !important;
  width: 96% !important;
  margin: 1rem auto !important;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.85) !important;
  box-sizing: border-box !important;
}

/* 3. Top Banner Logo */
img[alt="Logo"],
img[src*="logo.png"] {
  width: 100% !important;
  max-width: 650px !important;
  height: 130px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
  margin: 0 auto 18px auto !important;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.75)) !important;
}

/* 4. Welcome Title */
#authenticated-stage .MuiTypography-h5,
#second-factor-stage .MuiTypography-h5 {
  font-size: 0 !important;
  line-height: 1.35 !important;
  margin: 8px auto 16px auto !important;
  text-align: center !important;
}

#authenticated-stage .MuiTypography-h5::after,
#second-factor-stage .MuiTypography-h5::after {
  content: "Willkommen im Authentication & Security Backend IAM für RC ENTRY" !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  letter-spacing: -0.015em !important;
  display: block !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* 5. Inner Stage Box */
div:has(> #2fa-container),
div[class*="MuiGrid-root"]:has(> #2fa-container) {
  background: rgba(11, 15, 23, 0.65) !important;
  border: 1px solid rgba(51, 65, 85, 0.8) !important;
  border-radius: 16px !important;
  padding: 24px 18px 20px 18px !important;
  margin: 12px auto !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
}

/* 6. Method Heading ("Einmal-Passwort") */
.MuiTypography-h6,
[id$="-stage"] > .MuiTypography-h6 {
  margin: 0 0 28px 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  position: static !important;
  display: block !important;
}

/* 7. ALL 2FA CONTAINERS & INNER MUI BOXES - UNCLAMP & ALIGN TOP */
html body #root main div#2fa-container,
div#2fa-container,
div#2fa-container *,
div#2fa-container > div,
div[class*="MuiBox-root"]:has(> .information-icon) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-content: flex-start !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

div#2fa-container {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

div#2fa-container > div {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
}

/* 8. Animated Fingerprint Icon */
div[class*="MuiBox-root"]:has(> .information-icon),
div:has(> .information-icon) {
  flex: 0 0 auto !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 0 14px 0 !important;
}

.information-icon,
svg.information-icon,
[class*="information-icon"] {
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  box-sizing: border-box !important;
  background-image: url("/fingerprint.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.6)) !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
}

.information-icon path,
svg.information-icon path {
  display: none !important;
  visibility: hidden !important;
}

/* 9. ADJUSTED BLUE TEXT ("Die Ressource...") */
html body #root .MuiPaper-root p,
html body #root .MuiPaper-root span,
html body #root .MuiPaper-root .MuiTypography-body1,
html body #root .MuiPaper-root .MuiTypography-body2,
html body #root .MuiPaper-root .MuiTypography-root:not(.MuiTypography-h5):not(.MuiTypography-h6):not(.MuiTypography-h4) {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  max-width: 520px !important;
  margin: 0 auto 12px auto !important;
  color: #93C5FD !important;
  height: auto !important;
}
html body #root .MuiPaper-root p:last-of-type,
html body #root .MuiPaper-root span:last-of-type,
html body #root .MuiPaper-root .MuiTypography-body1:last-of-type,
html body #root .MuiPaper-root .MuiTypography-body2:last-of-type,
html body #root .MuiPaper-root .MuiTypography-root:not(.MuiTypography-h5):not(.MuiTypography-h6):not(.MuiTypography-h4):last-of-type {
  margin-bottom: 0 !important;
}

/* 10. Action Button (Gerät registrieren) */
html body #root main button#register-link,
html body #root main button#selection-link,
button#register-link,
#register-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 33px auto 0 auto !important;
  padding: 10px 24px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%) !important;
  border: 1px solid #60A5FA !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: static !important;
  clear: both !important;
}

button#register-link:hover,
#register-link:hover {
  background: linear-gradient(180deg, #60A5FA 0%, #1D4ED8 100%) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55) !important;
  transform: translateY(-1px) !important;
}

/* 11. Footer */
a[href*="authelia.com"],
a[href*="authelia"] {
  font-size: 0 !important;
  color: var(--rc-text-secondary) !important;
  display: inline-block !important;
  margin-top: 16px !important;
  text-decoration: none !important;
  text-align: center !important;
}

a[href*="authelia.com"]::after,
a[href*="authelia"]::after {
  content: "Betrieben bei Hybridlabor BDB - DEV with authelia custom fork" !important;
  font-size: 0.78rem !important;
  color: #64748B !important;
  letter-spacing: 0.02em !important;
  display: inline-block !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

/* ==========================================================================
   12. UNIVERSAL BRANDING & TOP APP BAR (ALL PAGES & SUBPAGES)
   ========================================================================== */

/* Top App Bar Header Navigation */
.MuiAppBar-root,
header.MuiAppBar-root,
div[class*="MuiAppBar-root"] {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.6) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.MuiToolbar-root,
div[class*="MuiToolbar-root"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Inject Cyber-Rabbit Logo into Header */
.MuiToolbar-root::after {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  background-image: url("/brand/rc-rabbit-mark.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.65)) !important;
}

.MuiAppBar-root .MuiTypography-root,
.MuiAppBar-root .MuiIconButton-root,
.MuiAppBar-root svg {
  color: #F8FAFC !important;
}

/* ==========================================================================
   13. SETTINGS CONTAINER & FACTOR HEADERS
   ========================================================================== */

/* Main Settings Cards */
#root main .MuiCard-root,
#root main > .MuiPaper-root {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(51, 65, 85, 0.7) !important;
  border-radius: 18px !important;
  padding: 30px 24px !important;
  margin: 20px auto !important;
  max-width: 620px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6) !important;
}

/* Factor Headings ("Einmal-Passwort", "WebAuthn Zugangsdaten") */
#root main .MuiCardHeader-title,
#root main .MuiCard-root .MuiTypography-h5,
#root main .MuiCard-root .MuiTypography-h6 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  text-align: center !important;
  margin: 0 auto 16px auto !important;
  width: 100% !important;
  letter-spacing: -0.01em !important;
}

/* Grid Wrapper for Centered Add Button */
.MuiGrid-root.MuiGrid-item:has(#webauthn-credential-add),
.MuiGrid-root.MuiGrid-item:has(#one-time-password-add) {
  flex-basis: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

/* Symmetrical Primary "HINZUFÜGEN" Buttons */
#webauthn-credential-add,
#one-time-password-add,
button[id*="-add"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 8px auto 16px auto !important;
  padding: 9px 28px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #60A5FA !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#webauthn-credential-add:hover,
#one-time-password-add:hover,
button[id*="-add"]:hover {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  border-color: #60A5FA !important;
  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.55) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   14. REGISTERED CREDENTIAL CARDS (TOTP & WEBAUTHN TILES)
   ========================================================================== */

/* Outer Registered Credential Box */
#root main .MuiPaper-outlined,
#root main [id^="webauthn-credential-"],
#root main [id*="one-time-password-"] {
  background: rgba(30, 41, 59, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin: 16px auto !important;
  width: 100% !important;
  max-width: 520px !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

#root main [id^="webauthn-credential-"]:hover,
#root main [id*="one-time-password-"]:hover {
  border-color: rgba(59, 130, 246, 0.7) !important;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25) !important;
}

/* Ensure Internal Grid inside Credential Card stays wide and horizontal */
#root main [id^="webauthn-credential-"] .MuiGrid-root,
#root main [id*="one-time-password-"] .MuiGrid-root {
  width: 100% !important;
}

/* Small Action Icon Buttons (Info, Edit, Delete) */
#root button[id$="-information"],
#root button[id$="-edit"],
#root button[id$="-delete"],
#root .MuiCardActions-root .MuiIconButton-root {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  margin: 0 4px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: unset !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.7) !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

#root button[id$="-information"]:hover,
#root button[id$="-edit"]:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60A5FA !important;
  border-color: #3B82F6 !important;
}

#root button[id$="-delete"]:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #EF4444 !important;
  border-color: #EF4444 !important;
}

/* Action Icons (SVG inside buttons) */
#root button[id$="-information"] svg,
#root button[id$="-edit"] svg,
#root button[id$="-delete"] svg {
  width: 18px !important;
  height: 18px !important;
}

/* ==========================================================================
   15. SECURITY / PROFILE PAGE & DIALOGS
   ========================================================================== */

/* Security Settings Profile & Password Card */
#root main form,
#root main div[class*="MuiGrid-root"]:has(#old-password),
#root main div[class*="MuiPaper-root"]:has(button[id*="password"]) {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(51, 65, 85, 0.7) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  max-width: 600px !important;
  margin: 20px auto !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6) !important;
}

/* Primary Action Buttons (PASSWORT ÄNDERN etc.) */
button#change-password-button,
button[id*="password-change"],
button[id*="change-password"] {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  border-radius: 10px !important;
  padding: 12px 28px !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4) !important;
  border: 1px solid #60A5FA !important;
  margin: 16px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 320px !important;
  transition: all 0.2s ease !important;
}

button#change-password-button:hover,
button[id*="password-change"]:hover {
  background: linear-gradient(180deg, #60A5FA 0%, #1D4ED8 100%) !important;
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.6) !important;
  transform: translateY(-1px) !important;
}

/* Material-UI Dialogs & Popups */
.MuiDialog-paper {
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(51, 65, 85, 0.8) !important;
  border-radius: 20px !important;
  padding: 24px 20px !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85) !important;
  color: #F8FAFC !important;
}

.MuiDialogTitle-root {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  text-align: center !important;
  padding-bottom: 12px !important;
}

.MuiOutlinedInput-root {
  border-radius: 10px !important;
  background: rgba(11, 15, 23, 0.7) !important;
  color: #F8FAFC !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(51, 65, 85, 0.8) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4) !important;
}

.MuiInputLabel-root {
  color: #94A3B8 !important;
}

.MuiInputLabel-root.Mui-focused {
  color: #60A5FA !important;
}

/* Alert Notification Banners (Error, Warning, Success) */
.MuiAlert-root {
  border-radius: 12px !important;
  margin: 16px auto !important;
  max-width: 600px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.MuiAlert-standardError {
  background: rgba(239, 68, 68, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(248, 113, 113, 0.6) !important;
  color: #FFFFFF !important;
}

/* MOBILE BREAKPOINT (< 600px) */
@media (max-width: 600px) {
  #root main > .MuiPaper-root:not(.MuiDialog-paper) {
    padding: 16px 8px !important;
    width: 98% !important;
  }

  div:has(> #2fa-container) {
    padding: 16px 8px 14px 8px !important;
  }

  img[alt="Logo"],
  img[src*="logo.png"] {
    max-width: 95% !important;
    height: auto !important;
    max-height: 64px !important;
    margin: 0 auto 8px auto !important;
  }

  #authenticated-stage .MuiTypography-h5::after,
  #second-factor-stage .MuiTypography-h5::after {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    max-width: 95% !important;
    margin: 0 auto 8px auto !important;
  }

  .MuiTypography-h6 {
    font-size: 1.1rem !important;
    margin: 0 0 20px 0 !important;
  }

  .information-icon,
  svg.information-icon,
  [class*="information-icon"] {
    width: 58px !important;
    height: 58px !important;
  }

  div[class*="MuiBox-root"]:has(> .information-icon),
  div:has(> .information-icon) {
    margin: 0 0 8px 0 !important;
  }

  html body #root .MuiPaper-root p,
  html body #root .MuiPaper-root span,
  html body #root .MuiPaper-root .MuiTypography-body1,
  html body #root .MuiPaper-root .MuiTypography-body2,
  html body #root .MuiPaper-root .MuiTypography-root:not(.MuiTypography-h5):not(.MuiTypography-h6):not(.MuiTypography-h4) {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin: 0 auto 10px auto !important;
  }
  html body #root .MuiPaper-root p:last-of-type,
html body #root .MuiPaper-root span:last-of-type,
html body #root .MuiPaper-root .MuiTypography-body1:last-of-type,
html body #root .MuiPaper-root .MuiTypography-body2:last-of-type,
html body #root .MuiPaper-root .MuiTypography-root:not(.MuiTypography-h5):not(.MuiTypography-h6):not(.MuiTypography-h4):last-of-type {
    margin-bottom: 0 !important;
  }

  button#register-link,
  #register-link {
    margin-top: 25px !important;
    padding: 8px 16px !important;
    font-size: 0.86rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .MuiCard-root,
  div[class*="MuiCard-root"],
  #root main .MuiPaper-root:not(#root main > .MuiPaper-root) {
    padding: 18px 12px !important;
    margin: 12px auto !important;
  }

  .MuiCard-root button,
  .MuiCardActions-root button,
  button[id*="add-"],
  button[id*="register-"] {
    width: 100% !important;
    max-width: 280px !important;
  }

  a[href*="authelia.com"]::after,
  a[href*="authelia"]::after {
    font-size: 0.7rem !important;
    max-width: 95vw !important;
  }
}