:root{
--bg:#04152e;
--grid:rgba(130,173,235,.12);
--text:#d9e8ff;
--muted:#9fb9dc;
--field-bg:rgba(9,29,58,.42);
--field-border:rgba(121,167,233,.24);
--field-border-focus:rgba(84,178,255,.75);
--button-bg:rgba(70,170,243,.88);
--button-bg-hover:rgba(84,186,255,.94);
--button-text:#061a33;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body.login_page{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:var(--text);
background:
radial-gradient(circle at 50% 42%, rgba(36,104,203,.22), transparent 26%),
linear-gradient(180deg, #08224a 0%, #031329 100%);
overflow:hidden;
}

.login_scene{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
position:relative;
padding:20px 16px 28px;
}

.login_grid{
position:absolute;
inset:0;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(circle at center, rgba(0,0,0,1), rgba(0,0,0,.88) 58%, rgba(0,0,0,.45) 100%);
pointer-events:none;
}

.login_orbit{
--orbit-size:min(90vw, 670px);
position:relative;
width:var(--orbit-size);
height:var(--orbit-size);
display:grid;
place-items:center;
filter:drop-shadow(0 0 22px rgba(42,134,255,.18));
}

.login_orbit__logo{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
transform:rotate(-90deg);
transform-origin:center center;
transition:transform 10s linear, filter 1.2s ease;
user-select:none;
pointer-events:none;
}

.login_orbit.is-success .login_orbit__logo{
transform:rotate(0deg);
filter:drop-shadow(0 0 26px rgba(88,178,255,.22));
}

.login_orbit__center{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
width:42%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.login_form,
.login_success{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.login_form{gap:16px;}

.login_form input,
.login_form button{
width:100%;
max-width:100%;
border-radius:18px;
font-size:18px;
line-height:1.2;
text-align:center;
outline:none;
}

.login_form input{
height:56px;
padding:0 22px;
background:var(--field-bg);
border:1px solid var(--field-border);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 rgba(0,0,0,0);
color:#eef6ff;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
appearance:none;
-webkit-appearance:none;
}

.login_form input::placeholder{
color:rgba(226,238,255,.72);
text-align:center;
}

.login_form input:focus{
background:rgba(9,29,58,.56);
border-color:var(--field-border-focus);
box-shadow:0 0 0 3px rgba(74,171,255,.16), 0 10px 24px rgba(0,0,0,.18);
color:#eef6ff;
}

.login_form input:-webkit-autofill,
.login_form input:-webkit-autofill:hover,
.login_form input:-webkit-autofill:focus,
.login_form input:-webkit-autofill:active{
-webkit-text-fill-color:#eef6ff !important;
-webkit-box-shadow:0 0 0 1000px rgba(9,29,58,.42) inset !important;
box-shadow:0 0 0 1000px rgba(9,29,58,.42) inset !important;
transition:background-color 9999s ease-in-out 0s;
border:1px solid rgba(121,167,233,.24) !important;
}

.login_form button{
height:52px;
border:1px solid rgba(134,211,255,.14);
background:linear-gradient(90deg, rgba(82,179,246,.82), rgba(62,155,226,.86));
color:var(--button-text);
font-weight:700;
letter-spacing:.01em;
cursor:pointer;
box-shadow:0 10px 24px rgba(35,125,213,.18);
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.login_form button:hover,
.login_form button:focus-visible{
background:linear-gradient(90deg, rgba(92,189,255,.9), rgba(72,165,236,.92));
box-shadow:0 12px 28px rgba(35,125,213,.22);
transform:translateY(-1px);
}

.error{
width:100%;
padding:10px 14px;
border-radius:14px;
background:rgba(123,20,20,.72);
border:1px solid rgba(255,144,144,.22);
color:#ffe5e5;
font-size:14px;
text-align:center;
}

.login_success{
gap:10px;
color:#e6f2ff;
text-shadow:0 2px 10px rgba(0,0,0,.35);
opacity:0;
transform:translateY(8px);
transition:opacity 1.2s ease, transform 1.2s ease;
}

.login_orbit.show-success-text .login_success{
opacity:1;
transform:translateY(0);
}

.login_success__eyebrow{
font-size:18px;
font-weight:500;
color:rgba(225,238,255,.9);
}

.login_success__name{
font-size:clamp(40px, 8vw, 66px);
line-height:.95;
font-weight:700;
color:#46aaf3;
text-shadow:0 0 12px rgba(70,170,243,.38);
}

.login_success__subline{
font-size:16px;
color:rgba(225,238,255,.82);
}

.login_meta{
position:relative;
z-index:1;
margin-top:-152px;
text-align:center;
transition:opacity .5s ease, transform .5s ease;
}

body.login_success_state .login_meta{
opacity:0;
pointer-events:none;
transform:translateY(10px);
}

.login_links{margin-top:10px;}
.login_links a{
color:#c7dcff;
text-decoration:none;
font-size:14px;
}
.login_links a:hover{text-decoration:underline;}

@media (max-width: 700px){
  .login_orbit{--orbit-size:min(86vw, 420px);}  
  .login_orbit__center{width:68%;}
  .login_form{gap:14px;}
  .login_form input{height:54px; font-size:17px;}
  .login_form button{height:50px; font-size:16px;}
  .login_success__eyebrow{font-size:17px;}
  .login_success__subline{font-size:15px;}
}

@media (max-width: 480px){
  .login_scene{padding-top:12px;}
  .login_orbit{--orbit-size:min(92vw, 380px);}  
  .login_orbit__center{width:70%;}
  .login_form input{height:50px; font-size:16px; border-radius:16px;}
  .login_form button{height:48px; border-radius:16px;}
  .login_success__name{font-size:clamp(34px, 12vw, 54px);}
}


.tenant_badge{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 14px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;}