:root{
    --navy:#102c49;
    --navy-deep:#091e34;
    --gold:#edb541;
    --ink:#19334c;
    --muted:#718092;
    --line:#dce3e9;
    --paper:#fff;
    --font:"Trebuchet MS","Segoe UI",sans-serif
}

*{
    box-sizing:border-box
}
body{
    margin:0;
    min-width:280px;
    background:radial-gradient(ellipse at 10% 10%,#e3eaf0,transparent 55%),#f2f4f6;
    color:var(--ink);
    font-family:var(--font);
    min-height:100vh;
    padding:40px 32px;
    display:grid;
    place-items:center
}
button,input{
    font:inherit
}
button{
    cursor:pointer
}
svg{
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    width:21px;
    height:21px;
    flex-shrink:0
}
.login-shell{
    width:100%;
    max-width:1120px;
    min-height:730px;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--paper);
    border-radius:26px;
    box-shadow:0 25px 80px #18334a14;
    overflow:hidden;
    animation:arrive .65s ease both
}
.brand-panel{
    background:radial-gradient(ellipse at 60% 38%,#295275 0,transparent 59%),linear-gradient(145deg,var(--navy),var(--navy-deep));
    color:white;
    padding:42px 40px 30px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.brand-panel:after{
    content:"";
    position:absolute;
    width:660px;
    height:660px;
    border:1px solid #ffffff0d;
    border-radius:50%;
    left:-300px;
    bottom:-460px;
    box-shadow:0 0 0 50px #ffffff03,0 0 0 100px #ffffff03;
    pointer-events:none
}
.government{
    display:flex;
    align-items:center;
    gap:11px;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.8px;
    line-height:1.7;
    position:relative;
    z-index:1
}
.gold-mark{
    width:6px;
    height:23px;
    display:block;
    background:var(--gold);
    border-radius:4px;
    flex-shrink:0
}
.brand-content{
    text-align:center;
    position:relative;
    z-index:1
}
.logo-halo{
    position:relative;
    max-width:340px;
    margin:8px auto 12px
}
.logo-halo:before{
    content:"";
    position:absolute;
    inset:12%;
    border-radius:50%;
    box-shadow:0 0 90px #f2b82d12
}
.brand-logo{
    display:block;
    width:100%;
    height:auto;
    position:relative;
    filter:drop-shadow(0 15px 15px #0003)
}
.eyebrow{
    color:#e7bd69;
    font-size:9px;
    font-weight:700;
    letter-spacing:2px
}
.brand-caption h2{
    font-size:29px;
    line-height:1.35;
    letter-spacing:-.6px;
    margin:16px 0 14px
}
.brand-caption p{
    font-size:13px;
    line-height:1.8;
    color:#bac9d8;
    margin:0
}
.brand-bottom{
    display:flex;
    align-items:center;
    gap:13px;
    font-size:9px;
    letter-spacing:1.7px;
    color:#a8bbce;
    margin-top:32px;
    position:relative;
    z-index:1
}
.small-line{
    width:24px;
    height:2px;
    background:var(--gold)
}
.form-panel{
    padding:64px 58px 28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.form-content{
    margin:auto 0
}
.welcome-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#64748a;
    font-size:9px;
    letter-spacing:1.6px;
    font-weight:700
}
.welcome-tag>span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#c28b20
}
h1{
    font-size:36px;
    line-height:1.25;
    margin:20px 0 15px;
    letter-spacing:-1.2px;
    font-weight:700
}
h1 span{
    color:#173e63
}
.subtitle{
    font-size:14px;
    color:var(--muted);
    line-height:1.8;
    max-width:330px;
    margin:0
}
.form-divider{
    width:44px;
    height:3px;
    background:var(--gold);
    margin:26px 0
}
.form-intro{
    font-size:12px;
    color:var(--muted);
    margin:0 0 26px
}
.field-group{
    margin-bottom:22px
}
label{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:10px
}
.input-wrap{
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fafbfc;
    padding:0 15px;
    color:#8492a2;
    transition:border-color .2s,box-shadow .2s
}
.input-wrap:focus-within{
    border-color:#3f688d;
    box-shadow:0 0 0 3px #29527515;
    background:white
}
.input-wrap input{
    width:100%;
    min-width:0;
    height:53px;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    font-size:14px;
    color:var(--ink)
}
input::placeholder{
    color:#929ca8;
    opacity:1
}
.password-toggle{
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:42px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    color:#7b8a99;
    margin-right:-10px;
    border-radius:6px
}
.password-toggle[hidden]{
    display:none
}
.password-toggle[aria-pressed=true]{
    color:#183e63;
    background:#e9eff5
}
button:focus-visible,a:focus-visible{
    outline:3px solid #cc931f;
    outline-offset:4px
}
.submit-button{
    width:100%;
    height:54px;
    border:0;
    border-radius:10px;
    color:#fff;
    background:var(--navy);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    font-size:12px;
    letter-spacing:1.7px;
    font-weight:700;
    box-shadow:0 7px 14px #102c4918;
    transition:background .2s,transform .2s;
    margin-top:29px
}
.submit-button:hover{
    background:#21496e;
    transform:translateY(-1px)
}
.submit-button:disabled{
    opacity:.7;
    cursor:wait
}
.help-text{
    text-align:center;
    color:#87929f;
    font-size:11px;
    line-height:1.8;
    margin:23px 0 0
}
footer{
    text-align:center;
    font-size:10px;
    color:#98a1ad;
    line-height:1.9;
    margin-top:38px
}
footer strong{
    font-weight:400;
    color:#6e7c8c
}
.alert{
    background:#fff4f2;
    border:1px solid #efd3cb;
    border-radius:9px;
    padding:12px 14px;
    color:#9f3e2b;
    font-size:13px;
    line-height:1.6;
    margin-bottom:20px
}
.dashboard-card{
    background:white;
    padding:40px;
    border-radius:20px;
    max-width:580px;
    width:100%;
    box-shadow:0 20px 70px #18334a12
}
.dashboard-logo{
    width:120px;
    height:auto
}
.dashboard-card h1{
    font-size:29px
}
.dashboard-card p{
    line-height:1.7;
    color:var(--muted)
}
.account-details{
    background:#f4f7fa;
    padding:16px;
    border-radius:10px;
    overflow-wrap:anywhere
}
.dashboard-card .submit-button{
    max-width:180px
}
@keyframes arrive{
    from{
    opacity:0;
    transform:translateY(14px)
}
to{
    opacity:1;
    transform:translateY(0)
}

}
@media(min-width:1500px){
    .login-shell{
    min-height:780px
}

}
@media(max-width:1000px){
    body{
    padding:24px
}
.form-panel{
    padding:48px 34px 26px
}
.brand-panel{
    padding:36px 28px 26px
}
.government{
    font-size:10px;
    letter-spacing:1.2px
}
h1{
    font-size:32px
}
.brand-caption h2{
    font-size:25px
}

}
@media(max-width:700px){
    body{
    display:block;
    padding:0;
    background:#fff
}
.login-shell{
    display:block;
    min-height:100vh;
    border-radius:0;
    box-shadow:none
}
.brand-panel{
    padding:24px 22px 15px;
    align-items:center;
    background:radial-gradient(ellipse at 50% 90%,#285476,transparent 75%),var(--navy)
}
.government{
    font-size:10px;
    letter-spacing:1.5px;
    gap:9px
}
.gold-mark{
    height:17px;
    width:4px
}
.logo-halo{
    width:165px;
    margin:12px auto 0
}
.brand-caption,.brand-bottom{
    display:none
}
.form-panel{
    padding:29px 26px 22px;
    max-width:480px;
    margin:auto
}
.welcome-tag{
    font-size:9px
}
h1{
    font-size:30px;
    margin:15px 0 10px
}
h1 br{
    display:none
}
.subtitle{
    font-size:13px;
    max-width:330px
}
.form-divider{
    margin:20px 0;
    height:3px;
    width:36px
}
.form-intro{
    margin-bottom:22px;
    font-size:12px
}
.input-wrap input{
    font-size:16px;
    height:54px
}
.field-group{
    margin-bottom:20px
}
.submit-button{
    margin-top:25px
}
.help-text{
    font-size:11px;
    margin-top:20px
}
footer{
    margin-top:30px;
    font-size:10px
}
.dashboard-card{
    border-radius:0;
    padding:30px 24px;
    min-height:100vh
}

}
@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
    animation:none!important;
    transition:none!important
}

}