/* Login-Seite (Authelia) im Lintegra-Design. Authelia nutzt MUI mit festen Klassennamen. */
:root { --bg: #12151b; --card: #1a1f27; --fg: #e8eaed; --muted: #9aa4b2; --accent: #4c9eff; --line: #2f3744; }
html, body, #root, #root > div { background: var(--bg) !important; color: var(--fg); }
body { font-family: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif !important; }
.MuiTypography-root, .MuiInputBase-input, .MuiButton-root, .MuiFormLabel-root {
  font-family: inherit !important;
}

/* Jede Anmelde-Stufe als Karte mit Akzentbalken, wie die Toasts in der App */
[id$="-stage"] > .MuiContainer-root {
  background: var(--card); border-radius: 16px; padding: 36px 32px 28px !important;
  border-left: 4px solid var(--accent); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  max-width: 420px !important;
}
[id$="-stage"] > .MuiContainer-root::before {
  content: "Lintegra Downloads"; display: block; text-align: center;
  color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px;
  margin-bottom: 14px;
}
[id$="-stage"] img { width: 88px; height: 88px; border-radius: 20px; }
.MuiTypography-h5, .MuiTypography-h6 { font-weight: 700 !important; letter-spacing: 0 !important; }

/* Eingabefelder */
.MuiOutlinedInput-root { background: var(--bg); border-radius: 10px !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--line) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #46505f !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--accent) !important; }
.MuiInputLabel-root { color: var(--muted) !important; }
.MuiInputLabel-root.Mui-focused { color: var(--accent) !important; }

/* Knöpfe, Checkboxen, Links */
.MuiButton-containedPrimary {
  background: var(--accent) !important; color: #fff !important; border-radius: 10px !important;
  text-transform: none !important; font-weight: 600 !important; font-size: 15px !important;
  box-shadow: none !important; padding: 10px 16px !important;
}
.MuiButton-containedPrimary:hover { background: #3d8ef0 !important; }
.MuiButton-textPrimary, .MuiButton-outlinedPrimary, .MuiLink-root, a { color: var(--accent) !important; }
.MuiCheckbox-root.Mui-checked, .MuiCircularProgress-root, .MuiTab-root.Mui-selected { color: var(--accent) !important; }
.MuiTabs-indicator { background-color: var(--accent) !important; }
.MuiPaper-root:not(.MuiAppBar-root) { background-color: var(--card) !important; background-image: none !important; }

/* Einmalcode-Felder (6 Ziffern) */
input[inputmode="numeric"], .otp-input input {
  background: var(--bg) !important; color: var(--fg) !important;
  border: 1px solid var(--line) !important; border-radius: 10px !important;
}
input[inputmode="numeric"]:focus, .otp-input input:focus { border-color: var(--accent) !important; outline: none; }

/* "Powered by Authelia" dezent lassen */
[id$="-stage"] ~ * , .MuiContainer-root + * { color: var(--muted); }