/* ==========================================================================
   CAM-01 — portal Authelia (cam-auth) în stil Palantir.
   Se încarcă peste CSS-ul Authelia, din același origin (CSP: style-src 'self').
   Doar prezentare: nu atinge flow-ul de autentificare.
   ========================================================================== */

/* Authelia pune variabilele pe body[data-theme], nu pe html. Le suprascriem
   pe același element, altfel Tailwind-ul din interior rămâne pe albastru. */
html,
body,
[data-theme] {
    color-scheme: dark !important;
    --background: #0a0d12 !important;
    --foreground: #dbe2ec !important;
    --card: #10141b !important;
    --card-foreground: #eef3fa !important;
    --popover: #10141b !important;
    --popover-foreground: #eef3fa !important;
    --primary: #43e08a !important;
    --primary-foreground: #04120a !important;
    --secondary: #5eb8ff !important;
    --secondary-foreground: #04120a !important;
    --muted: #161b24 !important;
    --muted-foreground: #8d99ab !important;
    --accent: #1b2130 !important;
    --accent-foreground: #eef3fa !important;
    --destructive: #ff7373 !important;
    --destructive-foreground: #04120a !important;
    --success: #43e08a !important;
    --success-foreground: #04120a !important;
    --info: #5eb8ff !important;
    --info-foreground: #04120a !important;
    --border: rgba(160, 180, 210, .30) !important;
    --input: rgba(160, 180, 210, .30) !important;
    --ring: #43e08a !important;
    --divider: rgba(160, 180, 210, .16) !important;
    --radius: 0px !important;
    --custom-icon: #43e08a !important;
    --custom-loading-bar: #43e08a !important;
}

* { scrollbar-width: thin; scrollbar-color: #2b3442 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b3442; border: 2px solid #0a0d12; }

::selection { background: rgba(67, 224, 138, .28); color: #eef3fa; }

html,
body {
    min-height: 100%;
    background-color: #0a0d12 !important;
}

body {
    padding: 44px 0 26px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif !important;
    color: #dbe2ec !important;
    background-image:
        radial-gradient(900px 480px at 50% -18%, rgba(67, 224, 138, .06), transparent 62%),
        linear-gradient(rgba(160, 180, 210, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 180, 210, .026) 1px, transparent 1px) !important;
    background-size: auto, 44px 44px, 44px 44px !important;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "CAM-01   //   IDENTITY GATEWAY";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(160, 180, 210, .16);
    background:
        linear-gradient(90deg, #43e08a 0 3px, transparent 3px) left / 3px 100% no-repeat,
        rgba(10, 13, 18, .94);
    color: #dbe2ec;
    font: 500 9px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    letter-spacing: .16em;
    pointer-events: none;
}

body::after {
    content: "INTERNAL // 2FA // PRIVATE ACCESS";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 26px;
    padding: 0 16px;
    border-top: 1px solid rgba(160, 180, 210, .16);
    background: rgba(10, 13, 18, .94);
    color: #596477;
    font: 500 8px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    letter-spacing: .12em;
    pointer-events: none;
}

#cam-matrix {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #06090d;
    pointer-events: none;
    opacity: .6;
}

#root {
    position: relative;
    z-index: 50;
}

@media (prefers-reduced-motion: reduce) {
    #cam-matrix { display: none !important; }
}

/* ---------------------------- bara de limbă ---------------------------- */

header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: auto !important;
    z-index: 41;
    width: auto !important;
    height: 44px;
    padding: 0 !important;
    background: transparent !important;
}

header > div {
    height: 44px;
    padding: 0 12px !important;
}

#language-button {
    margin: 0 !important;
    height: 26px;
    padding: 0 8px !important;
    border: 1px solid rgba(160, 180, 210, .2);
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .015) !important;
    color: #dbe2ec !important;
    font: 500 8px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .13s, border-color .13s, background .13s;
}

#language-button:hover {
    color: #eef3fa !important;
    border-color: rgba(67, 224, 138, .4) !important;
    background: rgba(67, 224, 138, .12) !important;
}

#language-button svg {
    width: 13px !important;
    height: 13px !important;
    color: #43e08a;
}

#language-button .pl-2 {
    padding-left: 6px !important;
}

/* ---------------------------- panoul de login -------------------------- */

#first-factor-stage,
[id$="-stage"] {
    min-height: calc(100vh - 70px) !important;
    padding: 22px 16px !important;
    text-align: left !important;
}

#first-factor-stage > div,
[id$="-stage"] > .mx-auto {
    position: relative;
    max-width: 440px !important;
    padding: 27px 24px 22px !important;
    border: 1px solid rgba(160, 180, 210, .30) !important;
    background: rgba(16, 20, 27, .30) !important;
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .015) !important;
}

#first-factor-stage > div::before,
[id$="-stage"] > .mx-auto::before {
    content: "CAM-01 // IDENTITY GATE";
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 5px 8px 4px;
    border-right: 1px solid rgba(67, 224, 138, .35);
    border-bottom: 1px solid rgba(67, 224, 138, .35);
    background: rgba(67, 224, 138, .1);
    color: #43e08a;
    font: 500 7px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .16em;
}

#first-factor-stage > div::after,
[id$="-stage"] > .mx-auto::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(160, 180, 210, .42);
    border-bottom: 1px solid rgba(160, 180, 210, .42);
}

/* sigiliul CAM-01 în locul avatarului Authelia */
#UserSvg { display: none !important; }

#first-factor-stage > div > .flex.flex-col > .w-full.p-2,
[id$="-stage"] > .mx-auto > .flex.flex-col > .w-full.p-2 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0 18px !important;
}

#first-factor-stage > div > .flex.flex-col > .w-full.p-2::before,
[id$="-stage"] > .mx-auto > .flex.flex-col > .w-full.p-2::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(67, 224, 138, .45);
    background-color: rgba(67, 224, 138, .045);
    background-image:
        radial-gradient(circle at center, #43e08a 0 1.5px, transparent 1.5px 5px, #43e08a 5px 6px, transparent 6px 15px, #43e08a 15px 16px, transparent 16px),
        linear-gradient(#43e08a, #43e08a),
        linear-gradient(#43e08a, #43e08a);
    background-size: 100% 100%, 1px 100%, 100% 1px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 22px rgba(67, 224, 138, .12);
}

#first-factor-stage > div > .flex.flex-col > .w-full.p-2::after,
[id$="-stage"] > .mx-auto > .flex.flex-col > .w-full.p-2::after {
    content: "AUTH // 2FA";
    color: #43e08a;
    font: 500 7.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .18em;
}

#first-factor-stage h5,
[id$="-stage"] h5 {
    font: 500 12px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #eef3fa !important;
}

#first-factor-stage h5::after,
[id$="-stage"] h5::after {
    content: "SECURE AUTHENTICATION";
    display: block;
    margin-top: 7px;
    color: #596477;
    font: 500 7.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .16em;
}

/* ------------------------------ formular ------------------------------- */

#form-login {
    margin-top: 4px;
}

#form-login .grid {
    gap: 12px !important;
}

#root input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    height: 44px !important;
    padding: 16px 0 5px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(160, 180, 210, .30) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #eef3fa !important;
    caret-color: #43e08a;
    box-shadow: none !important;
    outline: none !important;
    font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}

#root #password-textfield {
    padding-right: 34px !important;
}

#root input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus {
    border-bottom-color: #43e08a !important;
    box-shadow: none !important;
}

#root input::placeholder {
    color: transparent !important;
}

#root label {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}

#root label[data-slot="label"] {
    margin-bottom: 6px;
    color: #8d99ab !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
}

#root form label[for="username-textfield"],
#root form label[for="password-textfield"] {
    top: 6px !important;
    left: 0 !important;
    transform: none !important;
    color: #596477 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
}

#root form .relative:focus-within > label {
    color: #43e08a !important;
}

#root form .relative > button[aria-pressed] {
    right: 4px !important;
    padding: 4px !important;
    border-radius: 0 !important;
    color: #8d99ab !important;
}

#root form .relative > button[aria-pressed]:hover {
    color: #43e08a !important;
    background: transparent !important;
}

#root form .relative > button[aria-pressed] svg {
    width: 15px !important;
    height: 15px !important;
}

#root [role="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    border: 1px solid rgba(160, 180, 210, .28) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #04120a !important;
}

#root [role="checkbox"][data-checked],
#root [role="checkbox"][aria-checked="true"] {
    border-color: #43e08a !important;
    background: #43e08a !important;
}

#root [role="checkbox"] svg {
    width: 10px !important;
    height: 10px !important;
}

#root label[for="remember-checkbox"] {
    color: #8d99ab !important;
    font: 400 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#root form button[type="submit"] {
    display: flex !important;
    width: auto !important;
    min-width: 150px;
    margin-right: auto !important;
    height: 38px !important;
    border: 1px solid rgba(160, 180, 210, .30) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #dbe2ec !important;
    font: 600 9px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

#root form button[type="submit"]:hover {
    border-color: #dbe2ec !important;
    background: #dbe2ec !important;
    color: #000 !important;
}

#root [data-slot="button"] {
    height: 38px !important;
    border: 1px solid rgba(160, 180, 210, .30) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #dbe2ec !important;
    box-shadow: none !important;
    font: 600 9px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

#root [data-slot="button"][data-variant="default"],
#root [data-slot="button"][data-variant="primary"] {
    border-color: rgba(160, 180, 210, .30) !important;
    background: transparent !important;
    color: #dbe2ec !important;
}

#root [data-slot="button"][data-variant="default"]:hover,
#root [data-slot="button"][data-variant="primary"]:hover {
    border-color: #dbe2ec !important;
    background: #dbe2ec !important;
    color: #000 !important;
}

#root #reset-button {
    border-color: rgba(67, 224, 138, .5) !important;
    color: #43e08a !important;
}

#root #reset-button:hover {
    border-color: #43e08a !important;
    background: #43e08a !important;
    color: #04120a !important;
}

#root [data-slot="button"][id*="cancel"] {
    border-color: rgba(160, 180, 210, .30) !important;
    background: transparent !important;
    color: #8d99ab !important;
}

#root [data-slot="button"][id*="cancel"]:hover {
    border-color: rgba(160, 180, 210, .55) !important;
    background: rgba(255, 255, 255, .03) !important;
    color: #eef3fa !important;
}

#reset-password-button {
    color: #43e08a !important;
    font: 500 8px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}

#reset-password-button:hover {
    color: #71f0a9 !important;
    text-decoration: none !important;
}

/* Fără branding în UI: portalul se prezintă ca „CAM-01”. */
#root a[href*="authelia.com"],
[id$="-stage"] a[href*="authelia.com"],
#root p:has(> a[href*="authelia.com"]),
#root img[alt*="authelia" i],
#root svg[aria-label*="authelia" i] {
    display: none !important;
}

/* ---------------------- cont / 2FA / metode ---------------------------- */

#account-menu {
    margin-left: 6px !important;
    border-radius: 0 !important;
}

#account-menu [data-slot="avatar"],
#account-menu [data-slot="avatar-fallback"] {
    display: grid !important;
    place-items: center;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid rgba(67, 224, 138, .45) !important;
    border-radius: 0 !important;
    background: rgba(67, 224, 138, .12) !important;
    color: #43e08a !important;
    font: 600 10px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}

#root [data-slot="button"][data-variant="ghost"] {
    height: 26px !important;
    padding: 0 8px !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #8d99ab !important;
    font: 500 8px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

#root [data-slot="button"][data-variant="ghost"]:hover {
    border-color: rgba(160, 180, 210, .18) !important;
    background: rgba(255, 255, 255, .03) !important;
    color: #eef3fa !important;
}

#logout-button { color: #ff7373 !important; }

#second-factor-stage .my-4 {
    padding: 22px !important;
    border: 1px solid rgba(160, 180, 210, .20) !important;
    border-radius: 0 !important;
    background: rgba(13, 17, 23, .45) !important;
}

#one-time-password-method h6 {
    color: #eef3fa !important;
    font: 500 10px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#one-time-password-method .information-icon {
    width: 30px !important;
    height: 30px !important;
    color: #43e08a !important;
}

#one-time-password-method [id="2fa-container"] p {
    color: #8d99ab !important;
    font: 400 11px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

#register-link {
    display: inline-flex !important;
    align-items: center;
    height: 34px;
    padding: 0 12px !important;
    border: 1px solid rgba(160, 180, 210, .30);
    background: transparent;
    color: #dbe2ec !important;
    font: 600 9px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none !important;
}

#register-link:hover {
    border-color: #dbe2ec !important;
    background: #dbe2ec !important;
    color: #000 !important;
}

#first-factor-stage > div > .flex > div:last-child {
    padding-top: 12px;
    border-top: 1px solid rgba(160, 180, 210, .1);
    margin-top: 16px;
    justify-content: flex-start !important;
}

/* ------------------------- toasts / popup-uri -------------------------- */

[data-slot="toast-viewport"] {
    top: 56px !important;
    right: 12px !important;
    width: min(356px, calc(100vw - 24px)) !important;
}

[data-slot="toast-viewport"] > * {
    border: 1px solid rgba(160, 180, 210, .22) !important;
    border-left: 2px solid #ffc247 !important;
    border-radius: 0 !important;
    background: #10141b !important;
    color: #dbe2ec !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6) !important;
}

[data-slot="toast-viewport"] * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

[data-slot="dialog-content"],
[data-slot="popover-content"],
[data-slot="menu-content"],
[data-slot="select-content"],
[role="menu"],
[role="dialog"] {
    border: 1px solid rgba(160, 180, 210, .22) !important;
    border-radius: 0 !important;
    background: #10141b !important;
    color: #dbe2ec !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65) !important;
}

[role="menuitem"],
[data-slot="menu-item"],
[data-slot="select-item"] {
    border-radius: 0 !important;
    font: 500 9px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

[role="menuitem"]:hover,
[data-slot="menu-item"]:hover,
[data-slot="select-item"]:hover {
    background: rgba(67, 224, 138, .12) !important;
    color: #eef3fa !important;
}

/* ------------------- Settings / dialoguri (Authelia 4.39) --------------- */

/* Bara de sus din Settings. Authelia o desenează cu bg-primary (albastru);
   o facem bară CAM, înaltă cât banda portalului. */
#root nav.fixed {
    background: rgba(10, 13, 18, .96) !important;
    border-bottom: 1px solid rgba(160, 180, 210, .16) !important;
    color: #dbe2ec !important;
}

#root nav.fixed > div {
    height: 44px;
    padding: 0 12px !important;
}

#root nav.fixed h6 {
    font: 500 10px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #dbe2ec !important;
}

#root nav.fixed h6::before {
    content: "CAM-01 // ";
    color: #43e08a;
}

#root nav.fixed button {
    width: 28px !important;
    height: 28px !important;
    border-radius: 0 !important;
    color: #8d99ab !important;
}

#root nav.fixed button:hover {
    background: rgba(67, 224, 138, .12) !important;
    color: #eef3fa !important;
}

#root main {
    width: 100%;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px !important;
}

#root main .h-screen {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 8px !important;
}

#root [data-slot="card"] {
    border: 1px solid rgba(160, 180, 210, .22) !important;
    border-radius: 0 !important;
    background: rgba(16, 20, 27, .58) !important;
    color: #dbe2ec !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .015) !important;
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

#root h5,
#root h6 {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#root [data-slot="card"] p {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    font-size: 10.5px !important;
    letter-spacing: .05em;
}

/* Cardul îngust din Security nu are nevoie să stea într-o coloană de 300px. */
#root main [data-slot="card"]:has(#change-password-button) {
    width: min(440px, calc(100vw - 32px)) !important;
}

#root [class*="border-muted-foreground"] {
    border-color: rgba(160, 180, 210, .22) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .015) !important;
}

#one-time-password,
[id^="webauthn-credential-"] {
    border: 1px solid rgba(160, 180, 210, .22) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .02) !important;
}

/* Dialogurile sunt randate în portal, în afara #root. De aceea regulile
   de input/buton de mai sus nu le prind; le stilizăm separat. */
[data-slot="dialog-content"] {
    max-width: 480px !important;
    padding: 26px 24px 22px !important;
    border: 1px solid rgba(160, 180, 210, .30) !important;
    border-radius: 0 !important;
    background: rgba(16, 20, 27, .92) !important;
    color: #dbe2ec !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .015) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

[data-slot="dialog-content"]::before {
    content: "CAM-01 // SECURE ACTION";
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 5px 8px 4px;
    border-right: 1px solid rgba(67, 224, 138, .35);
    border-bottom: 1px solid rgba(67, 224, 138, .35);
    background: rgba(67, 224, 138, .1);
    color: #43e08a;
    font: 500 7px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .16em;
}

#dialog-verify-one-time-code::before {
    content: "CAM-01 // IDENTITY CHECK";
}

[data-slot="dialog-title"] {
    padding-right: 22px;
    color: #eef3fa !important;
    font: 500 12px/1.2 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .16em;
    text-transform: uppercase;
}

[data-slot="dialog-description"] {
    color: #8d99ab !important;
    font: 400 11.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

[data-slot="dialog-content"] [data-slot="label"] {
    color: #8d99ab !important;
    font: 500 9px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}

[data-slot="stepper"] .rounded-full {
    border-radius: 0 !important;
}

[data-slot="stepper"] [data-slot="step-label"] {
    color: #8d99ab !important;
    font: 500 8px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}

[data-slot="dialog-content"] [data-slot="button"] {
    height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(160, 180, 210, .30) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #dbe2ec !important;
    box-shadow: none !important;
    font: 600 9px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

[data-slot="dialog-content"] [data-slot="button"]:hover {
    border-color: #dbe2ec !important;
    background: #dbe2ec !important;
    color: #000 !important;
}

#dialog-verify,
#dialog-next,
#dialog-update,
#password-change-dialog-submit {
    border-color: rgba(67, 224, 138, .55) !important;
    color: #43e08a !important;
}

#dialog-verify:hover,
#dialog-next:hover,
#dialog-update:hover,
#password-change-dialog-submit:hover {
    border-color: #43e08a !important;
    background: #43e08a !important;
    color: #04120a !important;
}

#dialog-cancel,
#dialog-delete,
#password-change-dialog-cancel {
    border-color: rgba(255, 115, 115, .35) !important;
    color: #ff7373 !important;
}

#dialog-cancel:hover,
#dialog-delete:hover,
#password-change-dialog-cancel:hover {
    border-color: #ff7373 !important;
    background: rgba(255, 115, 115, .14) !important;
    color: #ffd7d7 !important;
}

[data-slot="input"] {
    height: 48px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(160, 180, 210, .30) !important;
    border-radius: 0 !important;
    background: rgba(10, 13, 18, .55) !important;
    color: #eef3fa !important;
    caret-color: #43e08a;
    box-shadow: none !important;
    outline: none !important;
    font: 500 12px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
}

[data-slot="input"]:focus {
    border-color: #43e08a !important;
    box-shadow: 0 0 0 1px rgba(67, 224, 138, .35) !important;
}

#one-time-code {
    width: 300px !important;
    height: 56px !important;
    padding: 0 8px 0 22px !important;
    border-color: rgba(67, 224, 138, .45) !important;
    background: rgba(10, 13, 18, .72) !important;
    font: 600 20px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .42em !important;
    text-align: center !important;
    text-transform: uppercase;
}

/* Pe acest server notifierul scrie codul într-un fișier, nu îl trimite
   prin email. Nota apare doar în dialogul de verificare (vezi JS). */
.cam-otc-hint {
    margin-top: 9px;
    padding: 6px 9px;
    border-left: 2px solid #ffc247;
    background: rgba(255, 194, 71, .08);
    color: #ffc247 !important;
    font: 500 9px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .04em;
}

.cam-otc-hint code {
    padding: 1px 4px;
    background: rgba(255, 194, 71, .12);
    color: #ffd98a;
    font: inherit;
}

/* ------------------ 2FA: codul din Google Authenticator ----------------- */

#one-time-password-method h6 {
    color: #eef3fa !important;
    font: 500 11px/1.2 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#one-time-password-method [id="2fa-container"] {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 4px;
}

[id="2fa-container"] > div.flex {
    height: auto !important;
    min-height: 190px;
}

#otp-input {
    display: block !important;
    margin: 14px 0 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(160, 180, 210, .22) !important;
    background: rgba(10, 13, 18, .45) !important;
}

#otp-input > label {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    color: #8d99ab !important;
    font: 500 9px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
}

#otp-input [role="group"] {
    display: flex !important;
    justify-content: center;
    gap: 6px;
}

#root #otp-input input[data-length] {
    width: 44px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(160, 180, 210, .30) !important;
    border-radius: 0 !important;
    background: rgba(10, 13, 18, .72) !important;
    color: #eef3fa !important;
    font: 600 24px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
    text-align: center !important;
    caret-color: #43e08a;
    box-shadow: none !important;
    outline: none !important;
}

#root #otp-input input[data-length]:focus {
    border-color: #43e08a !important;
    background: rgba(67, 224, 138, .07) !important;
    box-shadow: 0 0 0 1px rgba(67, 224, 138, .35) !important;
}

[id="2fa-container"] svg circle:nth-child(1) { stroke: #2b3442 !important; }
[id="2fa-container"] svg circle:nth-child(2) { fill: #10141b !important; }
[id="2fa-container"] svg circle:nth-child(3) { stroke: #43e08a !important; }

[id="2fa-container"] .cam-2fa-hint {
    margin-top: 14px !important;
    color: #8d99ab !important;
    font: 400 11px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

#register-link {
    border-color: rgba(67, 224, 138, .45) !important;
    color: #43e08a !important;
}

#register-link:hover {
    border-color: #43e08a !important;
    background: #43e08a !important;
    color: #04120a !important;
}

/* ---------------------- Manage devices (Settings → 2FA) ----------------- */

.cam-devices-hero {
    position: relative;
    margin-bottom: 16px;
    padding: 18px 20px 16px;
    overflow: hidden;
    border: 1px solid rgba(160, 180, 210, .22);
    border-left: 3px solid #43e08a;
    background:
        linear-gradient(90deg, rgba(67, 224, 138, .06), transparent 45%),
        rgba(16, 20, 27, .55);
    backdrop-filter: blur(8px) saturate(1.15);
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
}

.cam-devices-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(160, 180, 210, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 180, 210, .025) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.cam-devices-kicker {
    position: relative;
    z-index: 1;
    color: #43e08a;
    font: 500 8px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cam-devices-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cam-devices-hero h1 {
    margin: 0 0 6px;
    color: #eef3fa;
    font: 500 18px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cam-devices-hero p {
    margin: 0;
    max-width: 620px;
    color: #8d99ab;
    font: 400 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

.cam-devices-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cam-stat {
    padding: 5px 8px;
    border: 1px solid rgba(160, 180, 210, .22);
    color: #8d99ab;
    font: 500 8px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cam-stat b { color: #eef3fa; font-weight: 600; }
.cam-stat.ok { border-color: rgba(67, 224, 138, .4); color: #43e08a; }
.cam-stat.ok b { color: #43e08a; }
.cam-stat.warn { border-color: rgba(255, 194, 71, .4); color: #ffc247; }
.cam-stat.warn b { color: #ffc247; }

#one-time-password-panel,
#webauthn-credentials-panel {
    position: relative;
}

#one-time-password-panel h5,
#webauthn-credentials-panel h5 {
    padding-right: 84px;
}

#one-time-password-panel::after,
#webauthn-credentials-panel::after {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 4px 7px;
    border: 1px solid rgba(160, 180, 210, .3);
    background: rgba(10, 13, 18, .55);
    color: #8d99ab;
    font: 600 7.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#one-time-password-panel[data-cam-status="active"]::after {
    content: "ACTIV";
    color: #43e08a;
    border-color: rgba(67, 224, 138, .4);
}

#one-time-password-panel[data-cam-status="empty"]::after {
    content: "NEÎNROLAT";
    color: #ffc247;
    border-color: rgba(255, 194, 71, .4);
}

#webauthn-credentials-panel[data-cam-status="active"]::after {
    content: "ACTIV";
    color: #43e08a;
    border-color: rgba(67, 224, 138, .4);
}

#webauthn-credentials-panel[data-cam-status="empty"]::after {
    content: "OPȚIONAL";
    color: #8d99ab;
    border-color: rgba(160, 180, 210, .3);
}

#one-time-password-panel[data-cam-status="active"],
#webauthn-credentials-panel[data-cam-status="active"] {
    border-left: 2px solid rgba(67, 224, 138, .55) !important;
}

#webauthn-credentials-panel[data-cam-status="empty"] {
    border-left: 2px solid rgba(160, 180, 210, .22) !important;
}

#one-time-password {
    width: min(420px, 100%) !important;
    min-width: 360px;
    border-left: 2px solid rgba(67, 224, 138, .45) !important;
}

#root [data-slot="button"]:disabled,
#root [data-slot="button"][data-disabled] {
    opacity: .35 !important;
    cursor: not-allowed !important;
}

/* Pe ecranul de login, „Powered by …” nu mai are ce căuta. */
#first-factor-stage > div > .flex > div:last-child:has(a[href*="authelia.com"]) {
    display: none !important;
}

#form-login .-my-2 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* ------------------------------- mobil --------------------------------- */

@media (max-width: 560px) {
    body::before { content: "CAM-01 // IDENTITY"; padding-left: 12px; }
    body::after { content: "INTERNAL · 2FA · SECURE"; padding-right: 12px; }

    #first-factor-stage,
    [id$="-stage"] {
        padding: 16px 10px !important;
        min-height: calc(100vh - 70px) !important;
    }

    #first-factor-stage > div,
    [id$="-stage"] > .mx-auto {
        max-width: 100% !important;
        padding: 23px 16px 16px !important;
    }

    #language-button {
        padding: 0 6px !important;
        font-size: 7px !important;
    }

    #language-button .pl-2 { display: none !important; }

    #first-factor-stage h5,
    [id$="-stage"] h5 { font-size: 11px !important; }

    #otp-input { padding: 8px !important; }

    #root #otp-input input[data-length] {
        width: 40px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    #otp-input [role="group"] { gap: 4px; }

    .cam-devices-hero {
        padding: 14px 14px 12px;
    }

    .cam-devices-hero h1 { font-size: 15px; }

    .cam-stat {
        padding: 4px 6px;
        font-size: 7px;
    }

    #one-time-password {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}