/* ===== pankot · Stark Tower — Authelia portal ===== */
:root{
  --void:#0A0D14; --ink:#EAEEF8; --muted:#828FAA;
  --accent:#6E8BFF; --accent2:#36E0C2;
  --line:rgba(124,140,255,.16); --field:rgba(255,255,255,.035);
  --glow:rgba(110,139,255,.45);
  --mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html,body,#root{min-height:100%;}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(1200px 620px at 50% -12%, #18233f 0%, rgba(24,35,63,0) 60%),
    radial-gradient(900px 520px at 88% 116%, #0f2a24 0%, rgba(15,42,36,0) 55%),
    var(--void);
  background-attachment:fixed;
}
body::before{
  content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:radial-gradient(600px 380px at 30% 20%, rgba(110,139,255,.10), transparent 60%),
             radial-gradient(520px 340px at 75% 70%, rgba(54,224,194,.07), transparent 60%);
  animation:drift 24s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 36%, #000 0%, transparent 70%);
  mask-image:radial-gradient(circle at 50% 36%, #000 0%, transparent 70%);
  opacity:.55;
}
@keyframes drift{to{transform:translate3d(3%,-2%,0) scale(1.06)}}
#root{position:relative; z-index:1;}

.MuiContainer-maxWidthXs{
  position:relative;
  max-width:400px!important; margin:0 auto!important;
  padding:42px 36px 30px!important;
  background:linear-gradient(180deg, rgba(22,28,44,.80), rgba(13,17,28,.88))!important;
  border:1px solid var(--line)!important; border-radius:20px!important;
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 40px 90px -36px #000, inset 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.06), 0 0 60px -20px var(--glow)!important;
  animation:rise .9s cubic-bezier(.16,1,.3,1) both; overflow:visible;
}
@keyframes rise{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
.MuiContainer-maxWidthXs::before,.MuiContainer-maxWidthXs::after{
  content:""; position:absolute; width:18px; height:18px; pointer-events:none; border-color:var(--accent); opacity:.7;
}
.MuiContainer-maxWidthXs::before{top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; border-top-left-radius:20px;}
.MuiContainer-maxWidthXs::after{bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; border-bottom-right-radius:20px;}

#UserSvg{display:none!important;}

.MuiTypography-h5{
  font-weight:800!important; letter-spacing:-.02em!important; font-size:1.5rem!important;
  color:var(--ink)!important; text-align:center; position:relative;
}
.MuiTypography-h5::before{
  content:"\25C7  SECURE GATEWAY"; display:block;
  font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.24em;
  color:var(--accent); margin-bottom:.6rem; opacity:.9;
}

.MuiOutlinedInput-root{background:var(--field)!important; border-radius:12px!important; color:var(--ink)!important;}
.MuiOutlinedInput-input{color:var(--ink)!important;}
.MuiOutlinedInput-notchedOutline{border-color:rgba(255,255,255,.10)!important; border-radius:12px!important;}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:rgba(255,255,255,.18)!important;}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:var(--accent)!important;}
.MuiOutlinedInput-root.Mui-focused{box-shadow:0 0 0 3px rgba(110,139,255,.16);}
.MuiInputLabel-root{color:var(--muted)!important;}
.MuiInputLabel-root.Mui-focused{color:var(--accent)!important;}
.MuiIconButton-root{color:var(--muted)!important;}

#sign-in-button{
  background:linear-gradient(180deg,#83A0FF,#6E8BFF)!important; color:#0A0D14!important;
  font-weight:800!important; letter-spacing:.06em!important; border-radius:12px!important;
  padding:11px 0!important; margin-top:8px!important;
  box-shadow:0 10px 30px -10px var(--glow)!important;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, filter .18s!important;
}
#sign-in-button:hover{transform:translateY(-2px)!important; box-shadow:0 16px 42px -10px var(--glow)!important; filter:brightness(1.06);}
#sign-in-button:active{transform:translateY(0)!important;}

.MuiCheckbox-root.Mui-checked{color:var(--accent)!important;}
.MuiFormControlLabel-label{color:var(--muted)!important;}
#reset-password-button{color:var(--muted)!important; text-transform:none!important; font-weight:500!important;}
#reset-password-button:hover{color:var(--accent)!important; background:transparent!important;}
a[href*="authelia.com"]{color:rgba(130,143,170,.45)!important; font-family:var(--mono); font-size:.58rem!important; letter-spacing:.1em;}
#language-button{color:var(--muted)!important;}

#form-login{position:relative;}
#form-login::after{
  content:"\25CF  node 45.9.116.238 \00B7 all systems nominal";
  display:block; margin-top:20px; text-align:center;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; color:rgba(54,224,194,.5);
}

@media (max-width:480px){ .MuiContainer-maxWidthXs{max-width:92%!important; padding:34px 22px 26px!important;} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

/* ---- 2FA OTP boxes + method container ---- */
input[type=tel]{
  background:var(--field)!important; color:var(--ink)!important;
  border:1px solid rgba(255,255,255,.12)!important; border-radius:10px!important;
  caret-color:var(--accent); font-weight:700!important;
}
input[type=tel]:focus{ border-color:var(--accent)!important; box-shadow:0 0 0 3px rgba(110,139,255,.18)!important; outline:none!important; }
/* inner method card */
.MuiContainer-maxWidthXs > div > div,
[class*="method"]{ border-radius:14px!important; }
/* method action links (ВЫХОД / МЕТОДЫ / Регистрация) */
.MuiButton-text{ color:var(--accent)!important; text-transform:none!important; }
.MuiButton-text:hover{ background:rgba(110,139,255,.08)!important; }
/* the blue info circle on register step */
.MuiAvatar-root{ background:rgba(110,139,255,.16)!important; color:var(--accent)!important; }
/* informational text accent -> softer */
.MuiTypography-body1, .MuiTypography-body2{ color:var(--muted)!important; }