#login-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:2000;
background:
radial-gradient(
1200px 600px at 10% 20%,
rgba(255, 255, 255, 0.06),
transparent
),
linear-gradient(180deg, #0f4ef0 0%, #1c77ff 60%);
}#login-screen .login-wrap{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:32px;
}#login-screen .login-card{
width:100%;
max-width:1200px;
border-radius:20px;
padding:0;
overflow:visible;
display:flex;
background:transparent;
border:none;
color:#ffffff;
}#login-screen .login-left{
width:56%;
padding:48px 44px;
background:transparent;
}#login-screen .login-right{
width:44%;
background:transparent;
padding:40px;
display:flex;
flex-direction:column;
gap:18px;
align-items:center;
justify-content:center;
}#login-screen .login-logo{
display:flex;
align-items:center;
gap:12px;
font-size:0;
margin-bottom:6px;
}#login-screen .login-subtitle{
color:rgba(17, 24, 39, 0.9);
margin-bottom:18px;
font-size:15px;
}#login-screen .hero{
position:relative;
padding:6px 0 12px 0;
}#login-screen .hero-blob{
position:absolute;
left:-80px;
top:-80px;
width:420px;
height:420px;
background:radial-gradient(
circle at 30% 30%,
#ff5f5f 0%,
#1c77ff 35%,
transparent 60%
);
border-radius:48%;
filter:blur(16px);
opacity:0.95;
transform:rotate(-12deg);
pointer-events:none;
}#login-screen .hero-title{
font-size:64px;
line-height:0.95;
color:#ffffff;
font-weight:800;
margin:28px 0 12px 0;
}#login-screen .hero-sub{
font-size:20px;
color:rgba(255, 255, 255, 0.92);
margin-bottom:18px;
}#login-screen .hero-ctas{
display:flex;
gap:14px;
margin-top:6px;
}#login-screen .hero-btn{
padding:14px 22px;
border-radius:999px;
font-weight:800;
font-size:15px;
cursor:pointer;
border:2px solid rgba(255, 255, 255, 0.12);
}#login-screen .hero-btn-outline{
background:transparent;
color:#fff;
border:2px solid rgba(255, 255, 255, 0.18);
}#login-screen .hero-btn-solid{
background:#fff;
color:var(--primary-blue);
border:none;
}@media (max-width:900px){
#login-screen .hero-title{
font-size:34px;
}}#login-screen .form-group{
margin-top:10px;
text-align:left;
width:100%;
}#login-screen .form-label{
color:rgba(15, 23, 42, 0.7);
font-size:13px;
margin-bottom:6px;
display:block;
}#login-screen .input-icon{
display:flex;
align-items:center;
gap:12px;
background:#fbfdff;
padding:12px 14px;
border-radius:12px;
border:1px solid rgba(15, 23, 42, 0.06);
transition:
border-color 0.16s ease,
transform 0.12s ease;
}#login-screen .input-icon i{
color:rgba(15, 23, 42, 0.56);
width:20px;
text-align:center;
}#login-screen .input-icon input,
#login-screen select.login-select{
background:transparent;
border:none;
outline:none;
color:#0f172a;
font-size:15px;
width:100%;
}#login-screen .input-icon input::placeholder{
color:rgba(15, 23, 42, 0.45);
}#login-screen .login-hidden{
display:none !important;
}#login-screen .form-group:focus-within .input-icon{
border-color:var(--primary-blue);
transform:translateY(-2px);
}#login-screen select.login-select{
-webkit-appearance:none;
appearance:none;
}#login-screen .login-btn{
margin-top:16px;
padding:14px 18px;
border-radius:12px;
background:var(--primary-blue);
color:#ffffff;
font-weight:800;
border:none;
cursor:pointer;
transition:
transform 0.12s ease,
;
}#login-screen .login-btn:hover{
}#login-screen .login-note{
font-size:13px;
color:rgba(15, 23, 42, 0.6);
margin-top:8px;
}#login-screen #login-error{
color:#9b1111;
background:rgba(255, 235, 235, 0.8);
padding:8px 12px;
border-radius:10px;
margin-top:12px;
display:none;
border:1px solid rgba(155, 17, 17, 0.08);
}#login-screen .brand-tag{
font-weight:700;
color:rgba(15, 23, 42, 0.9);
font-size:13px;
}#login-screen .decor-circles{
position:absolute;
inset:-10% -10% auto auto;
pointer-events:none;
}#login-screen .login-left::before{
content:"";
position:absolute;
left:44px;
top:24px;
bottom:24px;
width:4px;
border-radius:4px;
background:linear-gradient(
180deg,
rgba(28, 119, 255, 0.12),
rgba(28, 119, 255, 0.04)
);
pointer-events:none;
}#login-screen .login-card{
position:relative;
overflow:visible;
}#login-screen .decor-circles span{
position:absolute;
border-radius:50%;
opacity:0.12;
filter:blur(16px);
}#login-screen .decor-circles .c1{
width:420px;
height:420px;
right:4%;
top:6%;
background:#fff;
}#login-screen .decor-circles .c2{
width:260px;
height:260px;
right:22%;
top:40%;
background:#ffd05b;
opacity:0.08;
}
#idgov-screen{
position:absolute;
inset:0;
z-index:5;
display:none;
background:#ffffff;
}#idgov-screen .wrap{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:32px;
}#idgov-screen .card{
width:100%;
max-width:920px;
background:rgba(255, 255, 255, 0.96);
border-radius:20px;
padding:22px;
color:#0f172a;
border:1px solid rgba(2, 6, 23, 0.06);
box-shadow:0 24px 60px rgba(2, 6, 23, 0.12);
}#idgov-screen .top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
}#idgov-screen .title{
font-weight:900;
font-size:18px;
}#idgov-screen .step{
display:none;
}#idgov-screen .step.active{
display:block;
}#idgov-screen .btnrow{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:14px;
}#idgov-screen .list{
display:flex;
flex-direction:column;
gap:8px;
max-height:340px;
overflow:auto;
padding-top:8px;
}#idgov-screen .list-item{
display:block;
width:100%;
text-align:left;
padding:12px 14px;
background:#f6f8fb;
border:1px solid rgba(15, 23, 42, 0.08);
border-radius:12px;
cursor:pointer;
font-weight:700;
color:#0f172a;
transition:background 0.15s ease, border-color 0.15s ease;
}#idgov-screen .list-item:hover{
border-color:rgba(28, 119, 255, 0.35);
background:rgba(28, 119, 255, 0.06);
}#idgov-screen .list-item.lite{
background:rgba(28, 119, 255, 0.06);
border:1px solid rgba(28, 119, 255, 0.25);
}#qr-screen{
position:absolute;
inset:0;
z-index:6;
display:none;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(15, 23, 42, 0.45);
}#qr-screen .wrap{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:32px;
}#qr-screen .card{
width:100%;
max-width:560px;
background:#ffffff;
border-radius:20px;
padding:22px;
color:#0f172a;
border:1px solid rgba(2, 6, 23, 0.06);
box-shadow:0 24px 60px rgba(2, 6, 23, 0.12);
}#qr-screen .top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
}#qr-screen .title{
font-weight:900;
font-size:18px;
}#qr-screen .qr-wrap{
display:flex;
justify-content:center;
padding:14px 0;
}#qr-screen .qr-wrap img,
#qr-screen .qr-wrap canvas{
width:200px;
height:200px;
border-radius:14px;
}#idgov-screen .idgov-close,
#qr-screen .idgov-close{
margin-left:auto;
background:transparent;
border:none;
color:#64748b;
font-size:20px;
cursor:pointer;
width:38px;
height:38px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
transition:background 0.15s ease, color 0.15s ease;
}#idgov-screen .idgov-close:hover,
#qr-screen .idgov-close:hover{
background:rgba(2, 6, 23, 0.05);
color:#0f172a;
}#idgov-screen .idgov-hint,
#qr-screen .idgov-hint{
color:#475569;
font-size:14px;
margin:6px 0 12px;
}#idgov-screen .idgov-input,
#qr-screen .idgov-input{
width:100%;
padding:13px 14px;
border:1px solid rgba(15, 23, 42, 0.12);
border-radius:12px;
font-size:15px;
outline:none;
background:#fbfdff;
color:#0f172a;
letter-spacing:0.04em;
box-sizing:border-box;
}#idgov-screen .idgov-input:focus,
#qr-screen .idgov-input:focus{
border-color:var(--primary-blue);
box-shadow:0 0 0 3px rgba(28, 119, 255, 0.15);
}#idgov-screen .idgov-input::placeholder,
#qr-screen .idgov-input::placeholder{
color:rgba(15, 23, 42, 0.45);
}#idgov-screen .idgov-btn,
#qr-screen .idgov-btn{
padding:12px 20px;
border-radius:999px;
font-weight:800;
font-size:14px;
cursor:pointer;
border:none;
}#idgov-screen .idgov-btn.ghost,
#qr-screen .idgov-btn.ghost{
background:transparent;
border:2px solid rgba(15, 23, 42, 0.15);
color:#0f172a;
}#idgov-screen .idgov-btn.solid,
#qr-screen .idgov-btn.solid{
background:var(--primary-blue);
color:#ffffff;
}#idgov-screen .idgov-profile,
#qr-screen .idgov-profile{
display:flex;
align-items:center;
gap:14px;
padding:14px;
background:#f6f8fb;
border:1px solid rgba(2, 6, 23, 0.06);
border-radius:14px;
margin-bottom:12px;
}#idgov-screen .idgov-profile-avatar,
#qr-screen .idgov-profile-avatar{
width:52px;
height:52px;
border-radius:50%;
background:var(--primary-blue);
color:#fff;
font-weight:900;
font-size:20px;
display:flex;
align-items:center;
justify-content:center;
}#idgov-screen .idgov-profile-name,
#qr-screen .idgov-profile-name{
font-weight:800;
color:#0f172a;
}#idgov-screen .idgov-profile-sub,
#qr-screen .idgov-profile-sub{
font-size:13px;
color:#64748b;
margin-top:2px;
}#idgov-screen .field-error,
#qr-screen .field-error{
display:none;
color:#9b1111;
background:rgba(255, 235, 235, 0.9);
padding:8px 12px;
border-radius:10px;
margin-top:10px;
font-size:13px;
}@media (max-width:900px){
#login-screen .login-card{
flex-direction:column;
width:92%;
}#login-screen .login-left,
#login-screen .login-right{
width:100%;
}#login-screen .login-left{
padding:28px;
}#login-screen .login-right{
padding:20px;
}
}@media (max-width:640px){
#idgov-screen .wrap,
#qr-screen .wrap{
padding:16px;
}
}#login-screen{
overflow-y:auto;
justify-content:safe center;
}#login-screen .login-eyebrow{
font-size:13px;
font-weight:800;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(255, 255, 255, 0.85);
margin:0;
}#login-screen .login-tabs{
display:flex;
gap:6px;
width:100%;
margin:2px 0 14px 0;
padding:5px;
border-radius:16px;
background:rgba(255, 255, 255, 0.12);
}#login-screen .login-tab{
flex:1;
padding:10px 8px;
border:none;
border-radius:12px;
background:transparent;
color:rgba(255, 255, 255, 0.88);
font-weight:800;
font-size:14px;
cursor:pointer;
transition:
background-color 0.16s ease,
color 0.16s ease;
}#login-screen .login-tab.active{
background:#fff;
color:var(--primary-blue);
box-shadow:0 4px 14px rgba(0, 0, 0, 0.12);
}#login-screen .login-panel{
display:none;
width:100%;
}#login-screen .login-panel.active{
display:block;
}#login-screen .login-step{
display:none;
}#login-screen .login-step.active{
display:block;
}#login-screen .panel-hint{
color:rgba(255, 255, 255, 0.95);
font-size:14px;
font-weight:700;
margin:2px 0 12px 0;
}#login-screen .login-method{
width:100%;
margin-top:8px;
padding:14px 16px;
border-radius:14px;
background:rgba(255, 255, 255, 0.96);
border:1px solid rgba(255, 255, 255, 0.2);
display:flex;
align-items:center;
gap:12px;
text-align:left;
cursor:pointer;
color:#0f172a;
font-weight:700;
font-size:15px;
transition:
transform 0.12s ease,
box-shadow 0.12s ease;
}#login-screen .login-method i{
color:var(--primary-blue);
font-size:17px;
}#login-screen .login-method i:last-child{
margin-left:auto;
color:#cbd5e1;
font-size:13px;
}#login-screen .login-method span{
flex:1;
}#login-screen .login-method:hover{
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(0, 0, 0, 0.18);
}#login-screen .login-method-lite{
background:rgba(255, 255, 255, 0.6);
font-weight:700;
color:#0f172a;
}#login-screen .login-btnrow{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:16px;
}#login-screen .login-btn-ghost{
padding:13px 18px;
border-radius:12px;
background:transparent;
color:#fff;
border:2px solid rgba(255, 255, 255, 0.4);
font-weight:800;
font-size:14px;
cursor:pointer;
}#login-screen .login-btn-solid{
padding:13px 18px;
border-radius:12px;
background:#fff;
color:var(--primary-blue);
border:none;
font-weight:800;
font-size:14px;
cursor:pointer;
transition:transform 0.12s ease;
}#login-screen .login-btn-solid:hover{
transform:translateY(-1px);
}#login-screen .login-block-btn{
width:100%;
margin-top:16px;
padding:14px 18px;
font-size:15px;
}#login-screen .login-profile{
display:flex;
align-items:center;
gap:14px;
background:rgba(255, 255, 255, 0.96);
border-radius:14px;
padding:14px 16px;
margin-top:4px;
}#login-screen .login-profile-avatar{
width:52px;
height:52px;
border-radius:50%;
background:rgba(28, 119, 255, 0.12);
color:var(--primary-blue);
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:22px;
flex-shrink:0;
}#login-screen .login-profile-name{
font-weight:900;
color:#0f172a;
font-size:16px;
}#login-screen .login-profile-sub{
color:#64748b;
font-size:13px;
font-weight:600;
margin-top:2px;
}#login-screen .qr-inline{
margin:0 auto 16px auto;
width:200px;
height:200px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
padding:12px;
}#login-screen .qr-inline img,
#login-screen .qr-inline canvas{
max-width:100%;
max-height:100%;
}#login-screen .login-panel .form-label{
color:rgba(255, 255, 255, 0.95);
}#login-screen .login-note{
color:rgba(255, 255, 255, 0.75);
}#login-screen .field-error{
margin-top:10px;
color:#9b1111;
background:rgba(255, 235, 235, 0.95);
padding:8px 12px;
border-radius:10px;
display:none;
border:1px solid rgba(155, 17, 17, 0.08);
font-weight:600;
font-size:13px;
}