:root{
    --navy:#0d2236;
    --navy-2:#12334f;
    --navy-3:#173f60;
    --gold:#bf9752;
    --gold-soft:#dbc394;
    --gold-pale:#f0e5cf;
    --ink:#10253c;
    --muted:#758092;
    --paper:#f7f3ec;
    --paper-2:#fbfaf7;
    --white:#fff;
    --line:#e7ddce;
    --danger:#a6473f;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
body{min-height:100vh}
button,input{font:inherit}

.login-page{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(440px,1.08fr) minmax(480px,.92fr);
    background:var(--paper);
}

.login-brand-panel{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding:54px 66px 46px;
    color:#fff;
    background:
        radial-gradient(circle at 12% 16%,rgba(191,151,82,.22),transparent 22%),
        radial-gradient(circle at 83% 70%,rgba(101,148,184,.14),transparent 30%),
        linear-gradient(145deg,#0a1d2e 0%,#0d2b45 58%,#10283c 100%);
}

.login-brand-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 90%);
    pointer-events:none;
}

.login-brand-panel::after{
    content:"";
    position:absolute;
    right:-110px;
    bottom:-150px;
    width:520px;
    height:520px;
    border:1px solid rgba(219,195,148,.18);
    border-radius:50%;
    box-shadow:0 0 0 45px rgba(219,195,148,.03),0 0 0 90px rgba(219,195,148,.02);
    pointer-events:none;
}

.brand-glow{position:absolute;border-radius:50%;filter:blur(6px);pointer-events:none}
.brand-glow-one{width:230px;height:230px;right:12%;top:14%;background:rgba(191,151,82,.07)}
.brand-glow-two{width:300px;height:300px;left:-10%;bottom:9%;background:rgba(50,114,161,.07)}

.brand-top,.brand-message,.brand-services{position:relative;z-index:2}
.brand-top{display:flex;align-items:flex-start}
.login-logo{width:min(360px,62vw);height:auto;display:block;object-fit:contain;filter:drop-shadow(0 12px 30px rgba(0,0,0,.18))}

.brand-message{margin:auto 0;max-width:690px;padding:64px 0 70px}
.brand-eyebrow,.access-eyebrow{
    letter-spacing:.28em;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}
.brand-eyebrow{color:var(--gold-soft);margin-bottom:22px}
.brand-message h1{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(46px,5.2vw,78px);
    line-height:.98;
    font-weight:500;
    letter-spacing:-.035em;
    color:#fffdf8;
}
.brand-message p{
    max-width:600px;
    margin:28px 0 0;
    font-size:17px;
    line-height:1.7;
    color:rgba(255,255,255,.72);
}
.brand-quote{
    margin-top:34px;
    padding-left:20px;
    border-left:2px solid var(--gold);
    font-family:Georgia,"Times New Roman",serif;
    font-style:italic;
    font-size:21px;
    line-height:1.4;
    color:#f1dfbc;
}
.brand-services{
    display:flex;
    flex-wrap:wrap;
    gap:10px 28px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.16);
    color:rgba(255,255,255,.58);
    font-size:11px;
    letter-spacing:.24em;
    font-weight:700;
}
.brand-services span:not(:last-child)::after{content:"·";margin-left:28px;color:var(--gold)}

.login-access-panel{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:54px;
    background:
        radial-gradient(circle at 85% 10%,rgba(191,151,82,.13),transparent 25%),
        linear-gradient(180deg,#fbfaf7 0%,#f4efe6 100%);
}

.access-shell{
    width:min(520px,100%);
    padding:50px 52px 40px;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(208,188,153,.55);
    border-radius:28px;
    box-shadow:0 28px 80px rgba(48,54,62,.12),0 5px 16px rgba(48,54,62,.04);
    backdrop-filter:blur(18px);
}
.access-mobile-logo{display:none}
.access-eyebrow{color:var(--gold);margin-bottom:13px}
.access-heading h2{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:40px;
    line-height:1.07;
    font-weight:500;
    letter-spacing:-.025em;
    color:var(--navy);
}
.access-heading p{margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.6}

.login-error{
    display:flex;
    align-items:center;
    gap:11px;
    margin:28px 0 -4px;
    padding:13px 15px;
    border-radius:12px;
    background:#fff5f3;
    border:1px solid #eed0cc;
    color:#8b3d36;
    font-size:14px;
    font-weight:650;
}
.login-error-icon{
    width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
    background:#a94c44;color:#fff;font-weight:900;font-size:13px;
}

.login-form{margin-top:32px}
.field-group{margin-bottom:22px}
.field-group label{display:block;margin:0 0 8px;color:#23364b;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.field-control{position:relative;display:flex;align-items:center}
.field-icon{
    position:absolute;
    left:17px;
    top:50%;
    transform:translateY(-50%);
    color:#aa8a53;
    font-size:18px;
    pointer-events:none;
}
.field-control input{
    width:100%;
    height:58px;
    padding:0 18px 0 48px;
    border:1px solid #ddd2c2;
    border-radius:14px;
    background:#fffdf9;
    color:#14283e;
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.field-control input::placeholder{color:#a6adb6}
.field-control input:focus{
    border-color:#c29b59;
    background:#fff;
    box-shadow:0 0 0 4px rgba(191,151,82,.13);
}
.password-control input{padding-right:78px}
.password-toggle{
    position:absolute;
    right:10px;
    height:38px;
    padding:0 11px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#8c6d3b;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}
.password-toggle:hover{background:#f5ead7}

.login-submit{
    width:100%;
    height:60px;
    margin-top:8px;
    border:1px solid #ae8440;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    background:linear-gradient(135deg,#c6a15e 0%,#b88e49 100%);
    color:#fff;
    font-size:13px;
    letter-spacing:.1em;
    font-weight:850;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(177,132,65,.24);
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(177,132,65,.29);filter:saturate(1.04)}
.login-submit:active{transform:translateY(0)}
.login-arrow{font-size:20px;line-height:1;margin-top:-1px}

.access-footer{
    margin-top:32px;
    padding-top:24px;
    border-top:1px solid #ebe2d4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    color:#8b929b;
    font-size:11px;
}
.secure-chip{display:flex;align-items:center;gap:8px;font-weight:750;color:#526170}
.secure-dot{width:7px;height:7px;border-radius:50%;background:#5e9272;box-shadow:0 0 0 4px rgba(94,146,114,.11)}
.access-version{text-align:right}

@media (max-width:1050px){
    .login-page{grid-template-columns:.95fr 1.05fr}
    .login-brand-panel{padding:44px}
    .brand-message h1{font-size:54px}
    .login-access-panel{padding:36px}
}

@media (max-width:820px){
    .login-page{display:block;background:linear-gradient(180deg,#0c2338 0,#0c2338 29%,#f5f0e7 29%,#f5f0e7 100%)}
    .login-brand-panel{display:none}
    .login-access-panel{min-height:100vh;padding:34px 20px;background:transparent;align-items:center}
    .access-shell{padding:32px 24px 28px;border-radius:22px;margin-top:20px}
    .access-mobile-logo{display:block;margin:-105px auto 46px;width:min(290px,78vw);padding:22px 25px;border-radius:18px;background:#0d2943;box-shadow:0 15px 40px rgba(0,0,0,.19)}
    .access-mobile-logo img{display:block;width:100%;height:auto}
    .access-heading h2{font-size:34px}
    .access-footer{align-items:flex-start;flex-direction:column}
    .access-version{text-align:left}
}

@media (max-width:480px){
    .login-access-panel{padding-left:14px;padding-right:14px}
    .access-shell{padding:28px 18px 24px}
    .access-heading h2{font-size:31px}
    .field-control input{height:55px}
    .login-submit{height:57px}
}

@media (prefers-reduced-motion:no-preference){
    .access-shell{animation:loginIn .5s ease-out both}
    .brand-message{animation:brandIn .65s ease-out both}
    @keyframes loginIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    @keyframes brandIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
}