:root{
    --background-color:#0F1117;
    --background-item:#0F1320;
    --text-color:#EEF2FA;
    --secondary-background:#151822;
    --border:#283043;
    --muted-text-color:#9aa6b8;
    --accent-soft:#101D33;
    --accent:#2563eb;
    --color-accent:#60A4E0;
    --color-button:#93C4FC;
    --card:#151923;

    --danger-bg:#241818;
    --danger-text:#E18686;
    --danger-border:#E18686;
    --item-hover:#121826;
    --focus-shadow:rgba(37,99,235,.18);
    --danger-shadow:rgba(225,134,134,.16);
    --shadow:0 24px 80px rgba(0,0,0,.35);
}

html[data-theme="light"]{
    --background-color:#F3F6FB;
    --background-item:#FFFFFF;
    --text-color:#121826;
    --secondary-background:#FFFFFF;
    --border:#D8E0EC;
    --muted-text-color:#64748B;
    --accent-soft:#EAF2FF;
    --accent:#2563eb;
    --color-accent:#2563eb;
    --color-button:#2563eb;
    --card:#F8FAFC;

    --danger-bg:#FFF1F2;
    --danger-text:#B42318;
    --danger-border:#B42318;
    --item-hover:#F8FAFC;
    --focus-shadow:rgba(37,99,235,.18);
    --danger-shadow:rgba(180,35,24,.12);
    --shadow:0 24px 80px rgba(15,23,42,.12);
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

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

body{
    min-height:100dvh;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 32%),
        radial-gradient(circle at bottom right, rgba(96,164,224,.10), transparent 28%),
        var(--background-color);
    color:var(--text-color);
    transition:background-color .2s ease,color .2s ease;
}

button,
input{
    font:inherit;
}

button,
input{
    -webkit-tap-highlight-color:transparent;
}

.login-page{
    width:100%;
    min-height:100dvh;

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

    padding:24px;
}

.login-card{
    width:min(100%, 486px);

    background:var(--secondary-background);
    border:1px solid var(--border);
    border-radius:18px;

    padding:32px;

    box-shadow:var(--shadow);

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

.login-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    margin-bottom:26px;
}

.login-brand{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:6px;
}

.login-logo{
    width:50px;
    height:50px;
    object-fit:contain;
    flex-shrink:0;
}

.login-title{
    margin:0;
    font-size:1.75rem;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.03em;
}

.login-description{
    margin:0;
    color:var(--muted-text-color);
    font-size:1rem;
    line-height:1.5;
    max-width:360px;
}

.theme-toggle{
    width:42px;
    height:42px;

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

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

    background:var(--card);
    color:var(--muted-text-color);

    cursor:pointer;
    flex-shrink:0;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.theme-toggle:hover{
    background:var(--accent-soft);
    color:var(--accent);
    transform:translateY(-1px);
}

.theme-toggle i{
    font-size:15px;
}

html[data-theme="dark"] .moon-icon{
    display:none;
}

html[data-theme="dark"] .sun-icon{
    display:block;
}

html[data-theme="light"] .moon-icon{
    display:block;
}

html[data-theme="light"] .sun-icon{
    display:none;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.field{
    position:relative;
}

.field input{
    width:100%;
    min-height:46px;

    padding:12px 46px 12px 14px;

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

    background:var(--background-item);
    color:var(--text-color);

    outline:none;

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

.field input::placeholder{
    color:var(--muted-text-color);
}

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

.field.has-error input{
    border-color:var(--danger-border);
    box-shadow:0 0 0 4px var(--danger-shadow);
}

.field.has-error .field-icon{
    color:var(--danger-text);
}

.field-icon{
    position:absolute;
    top:23px;
    right:14px;
    transform:translateY(-50%);

    color:var(--muted-text-color);

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

    transition:color .2s ease;
}

.field-icon i{
    font-size:15px;
}

.field-toggle{
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:10px;
    background:transparent;
    cursor:pointer;
}

.field-toggle:hover{
    color:var(--accent);
    background:var(--accent-soft);
}

.field-toggle:focus{
    outline:none;
    box-shadow:0 0 0 3px var(--focus-shadow);
}

.field-error{
    display:none;
    margin:8px 0 0 0;

    color:var(--danger-text);
    font-size:.78rem;
    line-height:1.35;
}

.field.has-error .field-error{
    display:block;
}

.login-button{
    position:relative;

    width:100%;
    min-height:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border:1px solid var(--color-button);
    border-radius:14px;

    background:var(--color-button);
    color:#11151F;

    cursor:pointer;

    font-size:.95rem;
    font-weight:800;

    transition:
        opacity .2s ease,
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

html[data-theme="light"] .login-button{
    color:#FFFFFF;
}

.login-button:hover:not(:disabled){
    opacity:.92;
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(37,99,235,.22);
}

.login-button:active:not(:disabled){
    transform:translateY(0);
    box-shadow:none;
}

.login-button:disabled{
    cursor:not-allowed;
    opacity:.72;
    transform:none;
    box-shadow:none;
}

.button-spinner{
    width:16px;
    height:16px;

    border:2px solid currentColor;
    border-top-color:transparent;
    border-radius:50%;

    display:none;

    animation:spin .75s linear infinite;
}

.login-button.is-loading .button-spinner{
    display:inline-block;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}


.login-buy-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    margin-top:10px;

    color:#FFFFFF;
    text-decoration:none;

    font-size:.8rem;
    font-weight:700;
    line-height:1.3;

    opacity:.78;

    transition:
        opacity .2s ease,
        color .2s ease,
        text-decoration-color .2s ease;
}

.login-buy-link:hover{
    opacity:1;
    color:#FFFFFF;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.login-buy-link i{
    font-size:.72rem;
}

html[data-theme="light"] .login-buy-link{
    color:var(--text-color);
    opacity:.68;
}

html[data-theme="light"] .login-buy-link:hover{
    color:var(--accent);
    opacity:1;
}

.login-footer{
    margin-top:18px;
    text-align:center;
    color:var(--muted-text-color);
    font-size:.78rem;
    line-height:1.4;
}

@media (max-width:640px){

    .login-page{
        align-items:center;
        padding:18px;
    }

    .login-card{
        padding:24px;
        border-radius:18px;
    }

    .login-header{
        margin-bottom:24px;
    }

    .login-title{
        font-size:1.55rem;
    }

    .login-description{
        font-size:.95rem;
    }

}

@media (max-width:420px){

    .login-page{
        padding:14px;
    }

    .login-card{
        padding:22px 18px;
        border-radius:16px;
    }

    .login-header{
        gap:12px;
    }

    .login-title{
        font-size:1.45rem;
    }

    .login-description{
        font-size:.9rem;
    }

    .theme-toggle{
        width:40px;
        height:40px;
        border-radius:11px;
    }

    .field input,
    .login-button{
        min-height:48px;
        border-radius:13px;
    }

    .field-icon{
        top:24px;
    }

}

@media (max-width:340px){

    .login-header{
        flex-direction:column;
    }

    .theme-toggle{
        align-self:flex-end;
    }

}