/**
 * login.css - iDLock AuthN 2FA
 * Tela de acesso passwordless com foco em Passkey e Google.
 */

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

:root,
[data-theme="light"],
[data-theme="dark"]{
    --bg:#202020;
    --bg2:#252528;
    --surface:rgba(255,255,255,.055);
    --surface2:rgba(255,255,255,.08);
    --surface3:rgba(255,255,255,.12);
    --tx1:#dadada;
    --tx2:#8a8a8e;
    --tx3:#606065;
    --tx4:#404045;
    --brd:rgba(255,255,255,.1);
    --brd2:rgba(255,255,255,.16);
    --acc:#6b89b8;
    --acc2:#3b82f6;
    --acc-light:#8ba3c7;
    --acc-glow:rgba(59,130,246,.28);
    --err:#f87171;
    --err-bg:rgba(248,113,113,.1);
    --ok:#10b981;
    --rad:16px;
    --rad-sm:10px;
    --radfull:12px;
    --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --t:.18s ease;
}

[hidden]{display:none!important}
html,body{min-height:100%}
html{scrollbar-width:none}
body{
    min-height:100vh;
    font-family:var(--font);
    color:var(--tx1);
    background:
        radial-gradient(circle at 20% 18%,rgba(107,137,184,.18),transparent 30rem),
        radial-gradient(circle at 75% 20%,rgba(59,130,246,.16),transparent 28rem),
        radial-gradient(circle at 50% 90%,rgba(16,185,129,.08),transparent 24rem),
        #202020;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:76px 76px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 82%);
    pointer-events:none;
}
body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(32,32,32,.05),#202020 88%);
    pointer-events:none;
}

.skip-link{
    position:absolute;
    top:-9999px;
    left:0;
    z-index:10000;
    padding:8px 16px;
    border-radius:0 0 8px 0;
    background:var(--acc2);
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}
.skip-link:focus{top:0}

.nav-login{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 24px;
    background:linear-gradient(180deg,rgba(32,32,32,.9),rgba(32,32,32,.66));
    border-bottom:1px solid rgba(255,255,255,.055);
    backdrop-filter:blur(20px) saturate(1.35);
    -webkit-backdrop-filter:blur(20px) saturate(1.35);
}
.nav-login__logo{
    display:flex;
    align-items:center;
    gap:9px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    letter-spacing:-.03em;
}
.nav-login__logo img{
    width:34px;
    height:34px;
    border-radius:11px;
    object-fit:contain;
    box-shadow:0 0 24px rgba(107,137,184,.2);
}
.nav-login__logo span{
    background:linear-gradient(90deg,#fff,#a1a1aa);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.login{
    min-height:100vh;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,440px);
    align-items:center;
    gap:clamp(40px,7vw,96px);
    max-width:1180px;
    margin:0 auto;
    padding:112px 32px 48px;
}
.login-hero{
    max-width:640px;
}
.login-hero__badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
    padding:8px 14px;
    border:1px solid rgba(139,163,199,.24);
    border-radius:10px;
    background:rgba(107,137,184,.11);
    color:#cbd5e1;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.login-hero__badge span{
    color:var(--ok);
    text-shadow:0 0 16px rgba(16,185,129,.8);
}
.login-hero__title{
    max-width:680px;
    color:#fff;
    font-size:clamp(42px,6.6vw,76px);
    line-height:.98;
    letter-spacing:-.07em;
    text-wrap:balance;
}
.login-hero__text{
    margin-top:24px;
    max-width:580px;
    color:var(--tx2);
    font-size:clamp(16px,1.8vw,20px);
    line-height:1.75;
}
.login-hero__proof{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:30px;
}
.login-hero__proof span,
.login__security span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#a1a1aa;
    font-size:12px;
    font-weight:800;
}

.login__card{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:34px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035)),
        rgba(37,37,40,.82);
    box-shadow:
        0 1px 0 rgba(255,255,255,.08) inset,
        0 34px 100px rgba(0,0,0,.58);
    backdrop-filter:blur(28px) saturate(1.35);
    -webkit-backdrop-filter:blur(28px) saturate(1.35);
}
.login__card::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg,rgba(139,163,199,.34),transparent 32%,rgba(59,130,246,.2));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.login__shine{
    position:absolute;
    top:-24%;
    right:-26%;
    width:230px;
    height:230px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(59,130,246,.24),transparent 68%);
    filter:blur(8px);
    pointer-events:none;
}
.login__header{
    position:relative;
    text-align:center;
    margin-bottom:30px;
}
.login__mark{
    width:66px;
    height:66px;
    display:grid;
    place-items:center;
    margin:0 auto 18px;
    border-radius:14px;
    background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 16px 44px rgba(0,0,0,.32),0 0 30px rgba(107,137,184,.14);
}
.login__mark img{
    width:38px;
    height:38px;
    border-radius:10px;
}
.login__title{
    color:#fff;
    font-size:25px;
    line-height:1.1;
    font-weight:850;
    letter-spacing:-.045em;
}
.login__subtitle{
    margin:9px auto 0;
    max-width:300px;
    color:var(--tx2);
    font-size:14px;
    line-height:1.55;
}
.login__actions{
    position:relative;
}
.passkey-login-area,
.google-btn-area{
    width:100%;
}
.login__divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:16px 0;
}
.login__divider::before,
.login__divider::after{
    content:'';
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
.login__divider span{
    color:var(--tx3);
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.btn-google-custom{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    min-height:56px;
    padding:14px 20px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.055);
    color:#e5e7eb;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 30px rgba(0,0,0,.24);
    font-family:var(--font);
    font-size:15px;
    font-weight:800;
    text-decoration:none;
    transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t);
}
.btn-google-custom svg{
    flex-shrink:0;
}
.login .btn-passkey{
    min-height:56px;
    margin:0;
    padding:14px 20px;
    border-radius:12px;
    border:1px solid rgba(139,163,199,.28);
    background:linear-gradient(135deg,rgba(107,137,184,.2),rgba(59,130,246,.16));
    color:#fff;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 16px 44px rgba(59,130,246,.18);
    font-size:15px;
    font-weight:850;
    transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),opacity var(--t);
}
.login .btn-passkey:hover{
    background:linear-gradient(135deg,rgba(139,163,199,.28),rgba(59,130,246,.22));
    border-color:rgba(139,163,199,.5);
    box-shadow:0 22px 58px rgba(59,130,246,.24);
    transform:translateY(-1px);
}
.login .btn-passkey--loading{
    opacity:.72;
    pointer-events:none;
}
.btn-google-custom:hover{
    color:#fff;
    background:rgba(255,255,255,.085);
    border-color:rgba(139,163,199,.42);
    box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 24px rgba(107,137,184,.12);
    transform:translateY(-1px);
}

.login__security{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:24px;
}
.login__security span{
    min-height:30px;
    padding:7px 10px;
    font-size:11px;
    color:#8a8a8e;
}

.alert{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    padding:13px 14px;
    border-radius:10px;
    font-size:13px;
    line-height:1.4;
    animation:slideDown .3s ease;
}
.alert--error{
    background:var(--err-bg);
    color:var(--err);
    border:1px solid rgba(248,113,113,.28);
}
.alert__icon{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    flex-shrink:0;
    border-radius:50%;
    border:1px solid currentColor;
    font-size:13px;
    font-weight:900;
}
@keyframes slideDown{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:translateY(0)}
}

@media(max-width:920px){
    .login{
        grid-template-columns:1fr;
        justify-items:center;
        gap:36px;
        padding:104px 20px 40px;
    }
    .login-hero{
        max-width:680px;
        text-align:center;
    }
    .login-hero__proof{
        justify-content:center;
    }
}

@media(max-width:560px){
    .nav-login{
        height:62px;
    }
    .login{
        padding:88px 16px 28px;
        align-items:start;
    }
    .login-hero__badge{
        margin-bottom:14px;
        font-size:10px;
    }
    .login-hero__title{
        font-size:clamp(34px,11vw,48px);
    }
    .login-hero__text{
        margin-top:16px;
        font-size:15px;
    }
    .login-hero__proof{
        display:none;
    }
    .login__card{
        padding:26px 20px 22px;
        border-radius:16px;
    }
    .login__mark{
        width:58px;
        height:58px;
        margin-bottom:14px;
        border-radius:14px;
    }
    .login__title{
        font-size:22px;
    }
    .btn-google-custom,
    .btn-passkey{
        min-height:54px;
        border-radius:12px;
    }
    .login__security span{
        font-size:10px;
    }
}