:root{

    --ph-navy:#0b1d33;
    --ph-navy-2:#102943;
    --ph-navy-3:#163653;

    --ph-gold:#a88945;
    --ph-gold-dark:#80672e;

    --ph-paper:#f4f1e9;
    --ph-paper-2:#ebe6da;

    --ph-line:#d8d0bf;

    --ph-ink:#172436;
    --ph-muted:#6e6b64;

    --ph-white:rgba(255,255,255,.94);

}


.phoenix-login{

    margin:0;

    min-height:100vh;

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    background:var(--ph-navy);

    color:var(--ph-ink);

}


.phoenix-login *{
    box-sizing:border-box;
}


.ph-background{

    position:fixed;

    inset:0;

    z-index:0;

    background-color:#081a2e;

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

    transform:scale(1.02);

}


.ph-background-overlay{

    position:fixed;

    inset:0;

    z-index:1;

    background:rgba(4,15,28,.72);

}


.ph-shell{

    position:relative;

    z-index:2;

    width:min(
        900px,
        calc(100% - 34px)
    );

    min-height:590px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(310px,.82fr)
        minmax(420px,1.18fr);

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:24px;

    overflow:hidden;

    background:
        rgba(9,25,43,.88);

    box-shadow:
        0 28px 80px
        rgba(0,0,0,.42);

}


.ph-brand{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:590px;

    padding:48px 42px 30px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            rgba(8,27,46,.95),
            rgba(14,44,68,.86)
        );

}


.ph-brand-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(5,17,30,.16),
            rgba(5,17,30,.48)
        );

    pointer-events:none;

}


.ph-mark{

    position:absolute;

    width:430px;

    height:430px;

    right:-190px;

    bottom:-150px;

    color:
        rgba(168,137,69,.25);

    pointer-events:none;

}


.ph-brand-content,
.ph-brand-foot{

    position:relative;

    z-index:2;

}


.ph-brand-top{

    display:flex;

    align-items:center;

}


.ph-logo-wrap{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.ph-logo{

    width:100%;

    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 8px 20px
            rgba(0,0,0,.28)
        );

}


.ph-brand-copy{

    margin-top:110px;

    max-width:350px;

}


.ph-kicker,
.ph-section-label{

    margin:0 0 10px;

    font-size:.66rem;

    font-weight:700;

    letter-spacing:.16em;

}


.ph-kicker{
    color:#c4a65e;
}


.ph-brand-copy h1{

    margin:0 0 14px;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

    line-height:.98;

    font-weight:600;

    color:#f6f3eb;

}


.ph-tagline{

    margin:0;

    max-width:31ch;

    color:
        rgba(255,255,255,.66);

    font-size:.92rem;

    line-height:1.65;

}


/*
 * LEFT POWERED BY
 */

.ph-brand-foot{

    display:flex;

    align-items:center;

    gap:8px;

    color:
        rgba(255,255,255,.43);

    font-size:.66rem;

}


.ph-powered-brand{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#d0ad55 !important;

    font-weight:700;

    text-decoration:none;

    transition:
        color .18s ease,
        opacity .18s ease;

}


.ph-powered-brand:hover{

    color:#f0cf78 !important;

    text-decoration:none;

}


.ph-powered-brand img{

    width:auto;

    max-width:105px;

    max-height:22px;

    object-fit:contain;

    display:block;

}


.ph-powered-brand span{

    color:#d0ad55 !important;

    font-weight:700;

}


.ph-powered-brand:hover span{

    color:#f0cf78 !important;

}


.ph-form-pane{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:0;

    padding:42px 54px;

    background:
        rgb(212,212,212);

}


.ph-form-inner{

    width:100%;

    max-width:470px;

    position:relative;

}


.auth-panel{

    display:none;

    animation:
        phFade
        .3s
        ease
        both;

}


.auth-panel.is-active{
    display:block;
}


@keyframes phFade{

    from{

        opacity:0;

        transform:
            translateY(6px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


.ph-panel-head{
    margin-bottom:28px;
}


.ph-section-label{
    color:var(--ph-gold-dark);
}


.ph-panel-head h2{

    margin:0 0 7px;

    color:var(--ph-ink);

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size:2.25rem;

    line-height:1;

    font-weight:600;

}


.ph-panel-head p{

    margin:0;

    max-width:44ch;

    color:var(--ph-muted);

    font-size:.84rem;

    line-height:1.55;

}


.ph-grid-2{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:17px 16px;

}


.ph-field{
    margin-bottom:17px;
}


.ph-field label{

    display:block;

    margin:0 0 7px;

    color:#55544f;

    font-size:.71rem;

    font-weight:700;

}


.login-error{

    display:none;

    margin:
        -8px
        0
        18px;

    padding:
        11px
        13px;

    border:
        1px solid
        rgba(198,63,63,.42);

    border-left:
        3px solid
        #b53a3a;

    border-radius:8px;

    background:#2a0f12;

    color:#ffd9d9;

    font-size:.75rem;

    font-weight:600;

    line-height:1.45;

}


.login-error.is-visible{

    display:block;

    animation:
        phErrorIn
        .18s
        ease
        both;

}


@keyframes phErrorIn{

    from{

        opacity:0;

        transform:
            translateY(-3px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


.ph-input{

    display:flex;

    align-items:center;

    width:100%;

    height:46px;

    overflow:hidden;

    border:
        1px solid
        #d5cec0;

    border-radius:9px;

    background:
        rgba(255,255,255,.52);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.ph-input:focus-within{

    border-color:
        var(--ph-gold);

    background:#fffdf8;

    box-shadow:
        0 0 0 3px
        rgba(168,137,69,.10);

}


.ph-input-icon{

    width:40px;

    flex:
        0 0 40px;

    text-align:center;

    color:
        var(--ph-gold-dark);

    font-size:.75rem;

}


.ph-input input,
.ph-input select{

    min-width:0;

    width:100%;

    height:100%;

    padding:
        0
        10px
        0
        0;

    border:0;

    outline:0;

    background:transparent;

    color:
        var(--ph-ink);

    font:
        500
        .78rem
        'Inter',
        sans-serif;

}


.ph-input input::placeholder{
    color:#9a968d;
}


.ph-input select{

    cursor:pointer;

    appearance:auto;

}


.ph-input select option{

    background:#fff;

    color:#172436;

}


.auth-login-panel .ph-input{

    background:#050505;

    border-color:#050505;

}


.auth-login-panel .ph-input:focus-within{

    background:#000;

    border-color:
        var(--ph-gold);

    box-shadow:
        0 0 0 3px
        rgba(168,137,69,.13);

}


.auth-login-panel .ph-input input{

    color:#fff;

    caret-color:#fff;

}


.auth-login-panel .ph-input input::placeholder{

    color:#8d8d8d;

}


.auth-login-panel .ph-input-icon{

    color:#c4a65e;

}


.auth-login-panel .ph-input.has-error{

    border-color:#b53a3a;

    box-shadow:
        0 0 0 2px
        rgba(181,58,58,.12);

}


.auth-login-panel .ph-input:has(
    input.has-error
){

    border-color:#b53a3a;

    box-shadow:
        0 0 0 2px
        rgba(181,58,58,.12);

}


.auth-login-panel input:-webkit-autofill,
.auth-login-panel input:-webkit-autofill:hover,
.auth-login-panel input:-webkit-autofill:focus{

    -webkit-text-fill-color:#fff;

    -webkit-box-shadow:
        0 0 0 1000px
        #050505
        inset;

    box-shadow:
        0 0 0 1000px
        #050505
        inset;

    caret-color:#fff;

    transition:
        background-color
        99999s
        ease-out
        0s;

}


.auth-demo-panel .ph-input{

    background:#050505;

    border-color:#050505;

}


.auth-demo-panel .ph-input:focus-within{

    background:#000;

    border-color:
        var(--ph-gold);

    box-shadow:
        0 0 0 3px
        rgba(168,137,69,.13);

}


.auth-demo-panel .ph-input input,
.auth-demo-panel .ph-input select{

    color:#fff;

    caret-color:#fff;

}


.auth-demo-panel .ph-input input::placeholder{

    color:#8d8d8d;

}


.auth-demo-panel .ph-input-icon{

    color:#c4a65e;

}


.auth-demo-panel .ph-input select option{

    background:#050505;

    color:#fff;

}


.auth-demo-panel .ph-input input:-webkit-autofill,
.auth-demo-panel .ph-input input:-webkit-autofill:hover,
.auth-demo-panel .ph-input input:-webkit-autofill:focus{

    -webkit-text-fill-color:#fff;

    -webkit-box-shadow:
        0 0 0 1000px
        #050505
        inset;

    box-shadow:
        0 0 0 1000px
        #050505
        inset;

    caret-color:#fff;

    transition:
        background-color
        99999s
        ease-out
        0s;

}


.ph-business-type{
    margin-top:1px;
}


.ph-btn{

    width:100%;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    margin-top:7px;

    border:0;

    border-radius:9px;

    cursor:pointer;

    font:
        700
        .78rem
        'Inter',
        sans-serif;

    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;

}


.ph-btn:hover{

    transform:
        translateY(-1px);

}


.ph-btn-primary{

    background:#152b43;

    color:#fff;

    box-shadow:
        0 9px 20px
        rgba(11,29,51,.15);

}


.ph-btn-primary:hover{

    background:#10243a;

}


.ph-btn-gold{

    background:#927735;

    color:#fff;

    box-shadow:
        0 9px 20px
        rgba(96,77,30,.14);

}


.ph-btn-gold:hover{

    background:#80672e;

}


.ph-switch{

    margin-top:21px;

    text-align:center;

    color:#77736a;

    font-size:.71rem;

}


.ph-switch button{

    padding:
        0
        0
        0
        4px;

    border:0;

    background:transparent;

    color:
        var(--ph-gold-dark);

    cursor:pointer;

    font:
        700
        .71rem
        'Inter',
        sans-serif;

}


.ph-switch button:hover{
    text-decoration:underline;
}


/*
 * BOTTOM POWERED BY
 */

.ph-powered{

    margin-top:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    color:#969187;

    font-size:.62rem;

}


.ph-powered .ph-powered-brand{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#d0ad55 !important;

    font-size:.62rem;

    font-weight:700;

    text-decoration:none;

}


.ph-powered .ph-powered-brand img{

    width:auto;

    max-width:100px;

    max-height:20px;

    object-fit:contain;

    display:block;

}


.ph-powered .ph-powered-brand span{

    color:#d0ad55 !important;

    font-weight:700;

}


.ph-powered .ph-powered-brand:hover{

    color:#f0cf78 !important;

}


.ph-powered .ph-powered-brand:hover span{

    color:#f0cf78 !important;

    text-decoration:underline;

}


.demo-success,
.demo-error{

    margin:
        0
        0
        15px;

    padding:
        9px
        11px;

    border-radius:7px;

    font-size:.7rem;

    line-height:1.4;

}


.demo-success{

    background:#edf5ef;

    color:#315b40;

    border:
        1px solid
        #cddfce;

}


.demo-error{

    background:#f8eeee;

    color:#7b342d;

    border:
        1px solid
        #e4c9c5;

}


button:focus-visible,
input:focus-visible,
select:focus-visible{

    outline:
        2px solid
        var(--ph-gold);

    outline-offset:2px;

}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:850px){

    .ph-shell{

        width:
            min(
                620px,
                calc(100% - 24px)
            );

        min-height:0;

        grid-template-columns:1fr;

    }


    .ph-brand{

        min-height:245px;

        padding:
            30px
            30px
            22px;

    }


    .ph-brand-copy{

        margin-top:42px;

    }


    .ph-brand-copy h1{

        font-size:2.45rem;

    }


    .ph-mark{

        width:300px;

        height:300px;

        right:-130px;

        bottom:-130px;

    }


    .ph-form-pane{

        padding:
            36px
            30px;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:520px){

    .ph-shell{

        width:
            calc(100% - 14px);

        border-radius:17px;

    }


    .ph-brand{

        min-height:215px;

        padding:
            24px
            22px
            18px;

    }


    .ph-logo-wrap{

        width:56px;

        height:56px;

    }


    .ph-brand-copy{

        margin-top:28px;

    }


    .ph-brand-copy h1{

        font-size:2rem;

    }


    .ph-tagline{

        font-size:.78rem;

    }


    .ph-form-pane{

        padding:
            28px
            20px
            24px;

    }


    .ph-grid-2{

        grid-template-columns:1fr;

        gap:0;

    }


    .ph-field{

        margin-bottom:15px;

    }


    .ph-panel-head{

        margin-bottom:22px;

    }


    .ph-panel-head h2{

        font-size:2rem;

    }


    .ph-brand-foot{

        flex-wrap:wrap;

    }


    .ph-powered{

        flex-wrap:wrap;

    }


    .ph-powered-brand{

        flex-wrap:nowrap;

    }

}



/* ============================================================
   DEMO MOBILE — COMPACT BRAND + SHORTER FORM
   This applies ONLY while the Demo panel is active.
============================================================ */

@media(max-width:520px){

    body.demo-active .ph-brand{
        min-height:92px;
        padding:10px 14px;
        justify-content:center;
    }

    /* Real two-column row: logo | secure-access + system name */
    body.demo-active .ph-brand-content{
        width:100%;
        display:grid;
        grid-template-columns:48px minmax(0,1fr);
        column-gap:10px;
        align-items:center;
    }

    body.demo-active .ph-brand-top{
        grid-column:1;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    body.demo-active .ph-logo-wrap{
        width:48px;
        height:48px;
        flex:0 0 48px;
    }

    body.demo-active .ph-brand-copy{
        grid-column:2;
        margin:0;
        max-width:none;
        min-width:0;
    }

    body.demo-active .ph-brand-copy .ph-kicker{
        margin:0 0 2px;
        font-size:.50rem;
        line-height:1.1;
        letter-spacing:.10em;
        white-space:nowrap;
    }

    body.demo-active .ph-brand-copy h1{
        margin:0;
        font-size:1.35rem;
        line-height:1;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.demo-active .ph-tagline,
    body.demo-active .ph-brand-foot{
        display:none;
    }

    body.demo-active .ph-form-pane{
        padding:16px 16px 18px;
    }

    body.demo-active .ph-panel-head{
        margin-bottom:12px;
    }

    body.demo-active .ph-panel-head h2{
        margin-bottom:4px;
        font-size:1.65rem;
    }

    body.demo-active .ph-panel-head p{
        font-size:.68rem;
        line-height:1.35;
    }

    /* Keep the demo fields compact on small screens too. */
    body.demo-active .ph-grid-2{
        grid-template-columns:1fr 1fr;
        column-gap:9px;
        row-gap:0;
    }

    body.demo-active .ph-field{
        margin-bottom:9px;
    }

    body.demo-active .ph-field label{
        margin-bottom:4px;
        font-size:.64rem;
    }

    body.demo-active .ph-input{
        min-height:38px;
    }

    body.demo-active .ph-input input,
    body.demo-active .ph-input select{
        height:38px;
        font-size:.72rem;
    }

    body.demo-active .ph-business-type{
        margin-bottom:9px;
    }

    body.demo-active .ph-btn{
        min-height:40px;
        margin-top:2px;
    }

    body.demo-active .ph-switch{
        margin-top:10px;
        font-size:.65rem;
    }

    body.demo-active .ph-switch button{
        font-size:.65rem;
    }

    body.demo-active .ph-powered{
        margin-top:12px;
    }

}