/* =========================================================
   PizzaX — tela de login (standalone, tema escuro)
   Depende de px-core.css (tokens). Use junto.
   ========================================================= */
.px-login{
    --ink:#0c0d08;
    --ink-2:#14160d;
    --line:rgba(196,224,0,.16);
    --white:#f6f7ef;
    --muted:var(--px-muted-dark);
    --danger:#ff5a47;
}
.px-login *{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body.px-login{
    font-family:var(--px-body);
    background:var(--ink);
    color:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
}
.stage{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}

/* ---------- Painel da marca ---------- */
.brand{
    position:relative;
    background:
        radial-gradient(120% 90% at 12% 8%, rgba(196,224,0,.14), transparent 46%),
        radial-gradient(80% 70% at 88% 92%, rgba(196,224,0,.10), transparent 52%),
        linear-gradient(155deg,#101108 0%, #0a0b06 60%, #07080430 100%);
    padding:54px 56px;
    display:flex;flex-direction:column;justify-content:space-between;
    overflow:hidden;
}
.brand::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.brand::before{
    content:"";position:absolute;width:520px;height:520px;right:-160px;bottom:-180px;border-radius:50%;
    background:repeating-conic-gradient(from 0deg, rgba(196,224,0,.05) 0deg 12deg, transparent 12deg 24deg);
    border:1px dashed rgba(196,224,0,.18);
    animation:spin 60s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.logo{
    width:168px;height:42px;position:relative;z-index:2;
    background:var(--px-login-logo) left center / auto 38px no-repeat;
    animation:px-rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.brand__copy{position:relative;z-index:2;max-width:430px}
.kicker{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--px-lime);font-weight:700;margin-bottom:22px;
    animation:px-rise .7s .05s cubic-bezier(.2,.8,.2,1) both;
}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--px-lime);box-shadow:0 0 12px var(--px-lime)}
.brand h1{
    font-family:var(--px-display);font-weight:800;font-size:clamp(34px,4vw,52px);
    line-height:1.02;letter-spacing:-.02em;margin-bottom:18px;
    animation:px-rise .7s .12s cubic-bezier(.2,.8,.2,1) both;
}
.brand h1 em{font-style:normal;color:var(--px-lime)}
.brand p{color:var(--muted);font-size:16px;line-height:1.6;animation:px-rise .7s .2s cubic-bezier(.2,.8,.2,1) both}
.brand__foot{
    position:relative;z-index:2;display:flex;gap:26px;color:var(--muted);font-size:13px;
    animation:px-rise .7s .28s cubic-bezier(.2,.8,.2,1) both;
}
.brand__foot b{color:var(--white);font-weight:600;display:block;font-size:20px;font-family:var(--px-display)}

/* ---------- Painel do formulario ---------- */
.auth{
    background:linear-gradient(180deg,var(--ink-2),var(--ink));
    display:flex;align-items:center;justify-content:center;padding:40px;
    border-left:1px solid var(--line);
}
.card{width:100%;max-width:392px;animation:px-rise .7s .15s cubic-bezier(.2,.8,.2,1) both}
.card__head{margin-bottom:30px}
.card__head h2{font-family:var(--px-display);font-weight:700;font-size:27px;letter-spacing:-.01em;margin-bottom:7px}
.card__head span{color:var(--muted);font-size:14.5px}

.alert{
    display:flex;gap:10px;align-items:flex-start;
    background:rgba(255,90,71,.09);border:1px solid rgba(255,90,71,.34);color:#ffb3a8;
    padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.45;margin-bottom:20px;
}
.alert svg{flex:0 0 auto;margin-top:1px}
.alert a{color:#fff;text-decoration:underline}

.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#cdd3bd;margin-bottom:8px}
.field input{
    width:100%;background:#0d0f08;border:1px solid rgba(255,255,255,.10);border-radius:12px;color:var(--white);
    font-family:var(--px-body);font-size:15px;padding:14px 15px;
    transition:border-color .18s, box-shadow .18s, background .18s;
}
.field input::placeholder{color:#5d6350}
.field input:focus{outline:none;border-color:var(--px-lime);background:#0f1109;box-shadow:0 0 0 4px rgba(196,224,0,.14)}

.row{display:flex;align-items:center;justify-content:space-between;margin:6px 0 22px}
.remember{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px;cursor:pointer;user-select:none}
.remember input{
    appearance:none;width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.22);background:#0d0f08;
    cursor:pointer;display:grid;place-content:center;transition:.15s;
}
.remember input:checked{background:var(--px-lime);border-color:var(--px-lime)}
.remember input:checked::after{content:"";width:5px;height:9px;border:solid #0c0d08;border-width:0 2px 2px 0;transform:rotate(43deg);margin-top:-2px}
.link{color:var(--px-lime);font-size:13.5px;font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}

/* botao login = px-btn--lime com largura cheia + fonte um tico maior */
.card .px-btn{width:100%;font-size:16px;padding:15px}
.card .px-btn svg{transition:transform .2s}
.card .px-btn:hover svg{transform:translateX(4px)}

.sep{display:flex;align-items:center;gap:14px;margin:24px 0;color:#54593f;font-size:12px}
.sep::before,.sep::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.08)}
.cta{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--muted);font-size:14px}
.cta a{color:var(--white);font-weight:700;text-decoration:none;border-bottom:2px solid var(--px-lime);padding-bottom:1px}
.cta a:hover{color:var(--px-lime)}
.back{margin-top:26px;text-align:center}
.back a{color:#6a6f57;font-size:13px;text-decoration:none}
.back a:hover{color:var(--white)}

@media (max-width:880px){
    body.px-login{overflow:auto}
    .stage{grid-template-columns:1fr}
    .brand{display:none}
    .auth{border-left:none;min-height:100vh}
}