.auth-body{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:var(--body-gradient);
    color:var(--text);
}

.auth-body:after{
    content:"";
    position:fixed;
    inset:18px;
    z-index:-1;
    pointer-events:none;
    border:1px solid var(--line);
    border-radius:30px;
    background:
        linear-gradient(90deg,transparent,rgba(var(--accent-rgb,6,182,212),.12),transparent),
        linear-gradient(180deg,rgba(255,255,255,.05),transparent);
    opacity:.8;
}

.auth-shell{
    width:min(100%,520px);
}

.auth-card{
    position:relative;
    overflow:hidden;
    padding:36px;
    border:1px solid var(--line);
    border-radius:28px;
    color:var(--text);
    background:
        linear-gradient(145deg,var(--panel-soft),color-mix(in srgb,var(--surface-2) 86%,var(--accent))),
        var(--surface);
    box-shadow:var(--shadow);
    backdrop-filter:blur(22px);
}

.auth-card:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:linear-gradient(135deg,black,transparent 70%);
    opacity:.32;
}

body[data-theme="light"] .auth-card:before{
    background:
        linear-gradient(90deg,rgba(20,28,42,.05) 1px,transparent 1px),
        linear-gradient(rgba(20,28,42,.04) 1px,transparent 1px);
}

.auth-brand,
.auth-card h1,
.auth-card p,
.auth-form,
.auth-security-note,
.auth-links,
.auth-actions{
    position:relative;
    z-index:1;
}

.auth-brand{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:26px;
}

.auth-brand span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:17px;
    color:var(--on-primary,#fff);
    background:linear-gradient(135deg,var(--primary),var(--accent));
    box-shadow:0 18px 42px rgba(var(--accent-rgb,6,182,212),.22);
    font-weight:950;
}

.auth-brand strong{
    color:var(--heading);
    font-size:18px;
    font-weight:950;
}

.auth-card h1{
    margin:0 0 12px;
    color:var(--heading);
    font-size:34px;
    line-height:1.05;
    letter-spacing:0;
}

.auth-card p{
    margin:0 0 26px;
    color:var(--muted);
    line-height:1.7;
}

.auth-form{
    display:grid;
    gap:15px;
}

.auth-form label{
    display:grid;
    gap:8px;
    color:var(--heading);
    font-size:13px;
    font-weight:880;
}

.auth-form input{
    min-height:50px;
}

.auth-form button[type="submit"]{
    width:100%;
    min-height:52px;
}

.auth-option-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}

.auth-remember-toggle{
    display:inline-flex!important;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:13px;
    font-weight:850;
    cursor:pointer;
}

.auth-remember-input{
    width:18px!important;
    height:18px!important;
    min-height:auto!important;
}

.auth-forgot-link,
.auth-links a{
    color:var(--accent);
    font-size:13px;
    font-weight:920;
}

.auth-forgot-link:hover,
.auth-links a:hover{
    text-decoration:underline;
    text-underline-offset:3px;
}

.auth-security-note{
    margin-top:16px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:color-mix(in srgb,var(--surface) 72%,transparent);
    color:var(--muted);
    font-size:12px;
    font-weight:760;
    line-height:1.55;
    text-align:center;
}

.auth-links{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:20px;
}

.auth-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.auth-actions .auth-button,
.auth-actions .soft-btn{
    flex:1;
    min-width:180px;
}

.auth-theme-toggle{
    position:fixed;
    top:22px;
    right:22px;
    z-index:80;
}

.error-card .eyebrow{
    margin-bottom:12px;
}

@media (max-width:560px){
    .auth-body{
        padding:18px 14px;
        place-items:start center;
    }

    .auth-body:after{
        inset:8px;
        border-radius:22px;
    }

    .auth-theme-toggle{
        position:relative;
        top:auto;
        right:auto;
        justify-self:end;
        margin-bottom:14px;
    }

    .auth-card{
        padding:26px 20px;
        border-radius:24px;
    }

    .auth-card h1{
        font-size:29px;
    }

    .auth-option-row{
        align-items:flex-start;
        flex-direction:column;
    }
}