/* =========================================================
   BULBUL OS — LOGIN
========================================================= */

:root{
    --login-accent:#5b5bd6;
    --login-accent-hover:#4f46c7;
    --login-danger:#be3144;
    --login-ease:cubic-bezier(.22,1,.36,1);
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body.login-page{
    min-height:100vh;
    min-height:100svh;
    margin:0;
    display:grid;
    place-items:center;
    overflow-x:hidden;
    opacity:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    transition:opacity 120ms ease,background 280ms var(--login-ease),color 200ms var(--login-ease);
}

body.login-page.login-light,
body.login-page.login-dark{
    opacity:1;
}

/* =========================
   AUTOMATIC TIME MODES
========================= */

body.login-light{
    --login-background:#f6f7fb;
    --login-background-alt:#eef1f8;
    --login-surface:rgba(255,255,255,.94);
    --login-border:rgba(30,41,59,.08);
    --login-text:#171d2b;
    --login-muted:#6f7a8d;
    --login-input:#ffffff;
    --login-input-border:#dce2ec;
    --login-accent-border:rgba(91,91,214,.38);
    --login-focus-ring:rgba(91,91,214,.14);
    --login-button-shadow:rgba(79,70,199,.20);
    --login-button-shadow-hover:rgba(79,70,199,.25);
    --login-shadow:0 24px 64px rgba(28,39,60,.11),0 3px 12px rgba(28,39,60,.04);
    color-scheme:light;
    color:var(--login-text);
    background:
        radial-gradient(circle at 78% 12%,rgba(91,91,214,.075),transparent 29%),
        radial-gradient(circle at 14% 88%,rgba(6,182,212,.045),transparent 27%),
        linear-gradient(145deg,var(--login-background),var(--login-background-alt));
}

body.login-dark{
    --login-accent:#7c80ee;
    --login-accent-hover:#8c90f4;
    --login-background:#0d121d;
    --login-background-alt:#121a29;
    --login-surface:rgba(20,27,41,.96);
    --login-border:rgba(189,201,224,.11);
    --login-text:#f0f3f9;
    --login-muted:#9ba8bd;
    --login-input:rgba(255,255,255,.045);
    --login-input-border:rgba(189,201,224,.14);
    --login-accent-border:rgba(124,128,238,.46);
    --login-focus-ring:rgba(124,128,238,.18);
    --login-button-shadow:rgba(80,84,210,.24);
    --login-button-shadow-hover:rgba(100,104,230,.30);
    --login-shadow:0 28px 72px rgba(0,0,0,.34),0 4px 14px rgba(0,0,0,.16);
    color-scheme:dark;
    color:var(--login-text);
    background:
        radial-gradient(circle at 78% 12%,rgba(124,128,238,.09),transparent 30%),
        radial-gradient(circle at 14% 88%,rgba(6,182,212,.035),transparent 28%),
        linear-gradient(145deg,var(--login-background),var(--login-background-alt));
}

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

.login-stage{
    width:100%;
    padding:24px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-card{
    width:min(100%,500px);
    padding:32px 52px 36px;
    border:1px solid var(--login-border);
    border-radius:24px;
    background:var(--login-surface);
    box-shadow:var(--login-shadow);
    animation:loginEnter 440ms var(--login-ease) both;
}

/* =========================
   BRAND
========================= */

.login-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.login-logo{
    width:160px;
    height:auto;
    display:block;
    margin:0 auto 2px;
    object-fit:contain;
}

.login-company{
    margin:0 0 3px;
    color:var(--login-muted);
    font-size:11px;
    font-weight:680;
    line-height:1.3;
    letter-spacing:.35px;
    direction:ltr;
}

.login-brand h1{
    margin:0;
    color:var(--login-text);
    font-size:27px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.55px;
    direction:ltr;
}

.login-brand p{
    margin:4px 0 0;
    color:var(--login-muted);
    font-size:12px;
    font-weight:520;
    line-height:1.6;
}

#login-greeting{
    margin:22px 0 18px;
    color:var(--login-text);
    text-align:center;
    font-size:31px;
    font-weight:850;
    line-height:1.25;
    letter-spacing:-.7px;
}

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

.login-form{
    width:100%;
}

.login-field{
    margin-bottom:13px;
}

.login-field label{
    display:block;
    margin-bottom:6px;
    color:var(--login-text);
    font-size:12px;
    font-weight:680;
}

.login-field input{
    width:100%;
    height:48px;
    padding:0 14px;
    color:var(--login-text);
    border:1px solid var(--login-input-border);
    border-radius:12px;
    outline:none;
    background:linear-gradient(180deg,var(--login-input),var(--login-input));
    font-family:inherit;
    font-size:14px;
    font-weight:560;
    caret-color:var(--login-accent);
    transition:border-color 170ms var(--login-ease),box-shadow 170ms var(--login-ease),background 170ms var(--login-ease);
}

.login-field input:hover{
    border-color:var(--login-accent-border);
}

.login-field input:focus{
    border-color:var(--login-accent);
    box-shadow:0 0 0 3px var(--login-focus-ring);
}

.login-field input:focus-visible{
    outline:2px solid var(--login-accent);
    outline-offset:2px;
}

.login-submit{
    width:100%;
    height:48px;
    margin-top:3px;
    color:#fff;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,var(--login-accent),var(--login-accent-hover));
    box-shadow:0 8px 20px var(--login-button-shadow),inset 0 1px 0 rgba(255,255,255,.16);
    font-family:inherit;
    font-size:14px;
    font-weight:760;
    cursor:pointer;
    transition:transform 170ms var(--login-ease),background 170ms var(--login-ease),box-shadow 170ms var(--login-ease);
}

.login-submit:hover{
    transform:translateY(-1px);
    background:var(--login-accent-hover);
    box-shadow:0 11px 25px var(--login-button-shadow-hover);
}

.login-submit:active{
    transform:translateY(0);
}

.login-submit:focus-visible{
    outline:2px solid var(--login-accent);
    outline-offset:3px;
    box-shadow:0 0 0 4px var(--login-focus-ring);
}

/* =========================
   VALIDATION
========================= */

.login-error{
    margin:0 0 14px;
    padding:10px 12px;
    color:var(--login-danger);
    border:1px solid rgba(190,49,68,.15);
    border-radius:11px;
    background:rgba(255,228,232,.64);
    text-align:center;
    font-size:12px;
    font-weight:650;
}

.login-dark .login-error{
    color:#fda4af;
    border-color:rgba(253,164,175,.15);
    background:rgba(159,18,57,.15);
}

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

@media(max-width:560px){
    .login-field input{
        font-size:16px;
    }

    .login-stage{
        padding:14px 10px;
    }

    .login-card{
        width:min(100%,460px);
        padding:26px 22px 28px;
        border-radius:21px;
    }

    .login-logo{
        width:143px;
    }

    .login-brand h1{
        font-size:25px;
    }

    #login-greeting{
        margin:20px 0 16px;
        font-size:28px;
    }

    .login-field input,
    .login-submit{
        height:47px;
    }
}

@media(max-height:680px) and (min-width:561px){
    .login-stage{
        padding:12px 18px;
    }

    .login-card{
        padding:22px 52px 25px;
    }

    .login-logo{
        width:124px;
        margin-bottom:3px;
    }

    #login-greeting{
        margin:16px 0 13px;
        font-size:27px;
    }

    .login-field{
        margin-bottom:10px;
    }

    .login-field input,
    .login-submit{
        height:45px;
    }
}

@media(prefers-reduced-motion:reduce){
    .login-card{
        animation:none;
    }
}

@keyframes loginEnter{
    from{opacity:0;transform:translateY(10px) scale(.99)}
    to{opacity:1;transform:translateY(0) scale(1)}
}