:root{
    --blue:#0b3898;
    --blue-dark:#062669;
    --blue-light:#245ed0;

    --red:#d20a11;
    --red-dark:#a40a10;

    --white:#fff;
    --bg:#f4f7fc;
    --ink:#172033;
    --muted:#68758a;
    --border:#dce4f1;

    --shadow:
        0 28px 80px
        rgba(15, 42, 92, .16);
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    min-height:100vh;

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

    color:var(--ink);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(210,10,17,.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 88%,
            rgba(11,56,152,.15),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f1f5fb 100%
        );
}

a{
    color:inherit;
}

button,
input{
    font:inherit;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.auth-page{
    min-height:100vh;

    display:grid;

    grid-template-columns:
        minmax(430px, .95fr)
        minmax(520px, 1.05fr);
}

.auth-brand-panel{
    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    min-height:100vh;

    padding:
        54px
        clamp(38px, 6vw, 90px);

    color:#fff;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.14),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            var(--blue-dark),
            var(--blue)
        );
}

.auth-brand-panel::after{
    content:"";

    position:absolute;

    width:480px;
    height:480px;

    right:-220px;
    bottom:-220px;

    border-radius:50%;

    border:
        75px solid
        rgba(255,255,255,.06);
}

.brand-top{
    position:relative;
    z-index:1;
}

.brand-link{
    display:inline-flex;

    align-items:center;

    gap:16px;

    color:#fff;

    text-decoration:none;
}

.brand-logo-box{
    width:100px;
    height:82px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:5px;

    overflow:hidden;

    border-radius:16px;

    background:#fff;
}

.brand-logo{
    max-width:100%;
    max-height:100%;

    object-fit:contain;
}

.brand-fallback{
    font-size:26px;
    font-weight:900;

    color:var(--blue);
}

.brand-text{
    display:grid;
}

.brand-name{
    font-size:23px;

    font-weight:900;

    letter-spacing:-.5px;
}

.brand-location{
    margin-top:5px;

    color:#c9d7fa;

    font-size:13px;

    font-weight:700;
}


.brand-message{
    position:relative;
    z-index:1;

    max-width:620px;

    margin:
        90px
        0;
}

.brand-eyebrow{
    margin-bottom:16px;

    color:#bad0ff;

    font-size:12px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.2px;
}

.brand-message h1{
    margin:0;

    max-width:600px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            46px,
            5.3vw,
            78px
        );

    line-height:.98;

    letter-spacing:-2.4px;
}

.brand-message h1 span{
    color:#ff6268;
}

.brand-message p{
    max-width:580px;

    margin:
        25px
        0
        0;

    color:#dce6fc;

    font-size:17px;

    line-height:1.75;
}

.brand-footer{
    position:relative;
    z-index:1;

    color:#aebfe8;

    font-size:12px;
}


/* ============================================================
   FORM SIDE
   ============================================================ */

.auth-form-panel{
    min-height:100vh;

    display:grid;
    place-items:center;

    padding:
        40px
        28px;
}

.auth-box{
    width:
        min(
            470px,
            100%
        );
}

.auth-mobile-logo{
    display:none;
}

.auth-heading{
    margin-bottom:30px;
}

.auth-chip{
    display:inline-flex;

    margin-bottom:15px;

    padding:
        7px
        11px;

    border-radius:999px;

    color:var(--blue);

    background:
        rgba(11,56,152,.07);

    font-size:11px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.9px;
}

.auth-heading h2{
    margin:0;

    font-size:34px;

    line-height:1.1;

    letter-spacing:-1px;
}

.auth-heading p{
    margin:
        10px
        0
        0;

    color:var(--muted);

    font-size:15px;

    line-height:1.65;
}


/* ============================================================
   FORM
   ============================================================ */

.field{
    margin-bottom:19px;
}

.field label{
    display:block;

    margin-bottom:8px;

    color:#25344e;

    font-size:13px;

    font-weight:850;
}

.input-wrap{
    position:relative;
}

.input{
    width:100%;

    min-height:52px;

    padding:
        13px
        15px;

    border:
        1px solid
        var(--border);

    border-radius:13px;

    background:#fff;

    color:var(--ink);

    outline:none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.input:focus{
    border-color:var(--blue);

    box-shadow:
        0 0 0 4px
        rgba(11,56,152,.09);
}

.auth-button{
    width:100%;

    min-height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:8px;

    border:0;

    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--blue-dark)
        );

    box-shadow:
        0 12px 28px
        rgba(11,56,152,.20);

    cursor:pointer;

    font-weight:850;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.auth-button:hover{
    transform:
        translateY(-1px);

    opacity:.97;
}

.client-theme .auth-button{
    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );

    box-shadow:
        0 12px 28px
        rgba(210,10,17,.18);
}

.client-theme .auth-chip{
    color:var(--red);

    background:
        rgba(210,10,17,.08);
}


/* ============================================================
   ALERT
   ============================================================ */

.alert{
    margin-bottom:20px;

    padding:
        12px
        14px;

    border-radius:12px;

    font-size:13px;

    line-height:1.5;
}

.alert-error{
    color:#981b21;

    border:
        1px solid
        rgba(210,10,17,.20);

    background:
        rgba(210,10,17,.07);
}


/* ============================================================
   LINKS
   ============================================================ */

.auth-links{
    margin-top:24px;

    padding-top:22px;

    border-top:
        1px solid
        var(--border);

    text-align:center;
}

.auth-links p{
    margin:0;

    color:var(--muted);

    font-size:13px;
}

.auth-links a{
    color:var(--blue);

    font-weight:850;

    text-decoration:none;
}

.client-theme .auth-links a{
    color:var(--red);
}

.auth-links a:hover{
    text-decoration:underline;
}

.home-link{
    display:inline-flex;

    margin-top:18px;

    color:var(--muted);

    text-decoration:none;

    font-size:12px;

    font-weight:700;
}


/* ============================================================
   CLIENT PANEL
   ============================================================ */

.client-page{
    min-height:100vh;

    background:
        #f4f7fc;
}

.client-header{
    background:#fff;

    border-bottom:
        1px solid
        var(--border);
}

.client-header-inner{
    width:
        min(
            calc(100% - 36px),
            1180px
        );

    min-height:78px;

    margin:auto;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.client-brand{
    display:flex;
    align-items:center;

    gap:12px;

    text-decoration:none;
}

.client-logo{
    width:70px;
    height:55px;

    object-fit:contain;
}

.client-brand-copy{
    display:grid;
}

.client-brand-name{
    font-weight:900;
}

.client-brand-role{
    margin-top:3px;

    color:var(--muted);

    font-size:12px;
}

.client-user{
    display:flex;
    align-items:center;

    gap:16px;

    color:var(--muted);

    font-size:13px;
}

.logout-form{
    margin:0;
}

.logout-button{
    border:0;

    background:transparent;

    color:var(--red);

    cursor:pointer;

    font-weight:850;
}

.client-content{
    width:
        min(
            calc(100% - 36px),
            1180px
        );

    margin:auto;

    padding:
        44px
        0
        70px;
}

.client-welcome{
    padding:
        34px;

    border-radius:24px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--blue-dark),
            var(--blue)
        );

    box-shadow:
        var(--shadow);
}

.client-welcome small{
    color:#c9d8fb;

    font-weight:800;
}

.client-welcome h1{
    margin:
        8px
        0;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    letter-spacing:-1px;
}

.client-welcome p{
    margin:0;

    color:#dce6fb;
}

.client-grid{
    margin-top:24px;

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:18px;
}

.client-card{
    min-height:190px;

    padding:24px;

    border:
        1px solid
        var(--border);

    border-radius:19px;

    background:#fff;

    box-shadow:
        0 10px 30px
        rgba(15,42,92,.06);
}

.client-card-icon{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:
        rgba(11,56,152,.07);

    font-size:25px;
}

.client-card h3{
    margin:
        18px
        0
        7px;

    font-size:18px;
}

.client-card p{
    margin:0;

    color:var(--muted);

    font-size:13px;

    line-height:1.65;
}

.client-card-status{
    display:inline-flex;

    margin-top:15px;

    padding:
        5px
        9px;

    border-radius:999px;

    color:#95620c;

    background:#fff1d2;

    font-size:11px;

    font-weight:850;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:900px){

    .auth-page{
        grid-template-columns:1fr;
    }

    .auth-brand-panel{
        display:none;
    }

    .auth-form-panel{
        padding:
            35px
            22px;
    }

    .auth-mobile-logo{
        display:flex;

        align-items:center;

        gap:12px;

        margin-bottom:32px;
    }

    .auth-mobile-logo img{
        width:85px;
        max-height:65px;

        object-fit:contain;
    }

    .client-grid{
        grid-template-columns:1fr;
    }
}


@media (max-width:600px){

    .auth-heading h2{
        font-size:29px;
    }

    .client-header-inner{
        min-height:68px;
    }

    .client-user span{
        display:none;
    }

    .client-content{
        padding-top:25px;
    }

    .client-welcome{
        padding:25px;
    }
}