/* AFTER Entry — preview sem conta + entrada em etapas */

/* ---------- etapas dentro do cartão de acesso ---------- */
.auth-form .ae-step{display:none;flex-direction:column;gap:12px}
.auth-form[data-ae-step="1"] .ae-step[data-ae="1"],
.auth-form[data-ae-step="2"] .ae-step[data-ae="2"],
.auth-form[data-ae-step="3"] .ae-step[data-ae="3"],
.auth-form[data-ae-step="4"] .ae-step[data-ae="4"],
.auth-form[data-ae-step="5"] .ae-step[data-ae="5"],
.auth-form[data-ae-step="6"] .ae-step[data-ae="6"]{display:flex;animation:aeStepIn .26s ease both}
@keyframes aeStepIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

#loginForm>.ae-submit,
#registerForm>.ae-submit{display:none}
#loginForm[data-ae-step="2"]>.ae-submit,
#registerForm[data-ae-step="6"]>.ae-submit{display:block}

.ae-label{align-self:flex-start;color:#e7ddff;font-size:12px;font-weight:750;letter-spacing:.02em;margin-bottom:-5px}
.ae-step-note{color:#a29ec0;font-size:11.5px;line-height:1.5;text-align:left;margin:-2px 0 0}
.ae-next{margin-top:5px;padding:15px;border:none;border-radius:12px;background:linear-gradient(135deg,#755cff,#5940e8);color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s}
.ae-next:hover{transform:translateY(-1px);box-shadow:0 10px 25px #755cff40}
.ae-next:active{transform:scale(.98)}
.ae-alt-line{margin:2px 0 0;text-align:center;color:#9d99b6;font-size:12px}
.ae-inline{border:0;background:none;padding:0;color:#c0b5ff;font:inherit;font-size:inherit;font-weight:650;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ae-inline:hover{color:#e4dcff}

.ae-flow{display:flex;align-items:center;gap:11px;margin:0 0 18px}
.ae-flow[hidden]{display:none}
.ae-flow-back{flex:0 0 auto;width:34px;height:34px;border-radius:11px;border:1px solid #ffffff26;background:#ffffff0d;color:#efe6ff;font-size:15px;line-height:1;cursor:pointer}
.ae-flow-back:hover{background:#ffffff18}
.ae-flow-main{flex:1;min-width:0}
.ae-flow-label{color:#b9b2d6;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.ae-flow-bar{height:5px;border-radius:999px;background:#ffffff1a;overflow:hidden}
.ae-flow-bar i{display:block;height:100%;width:16%;border-radius:999px;background:linear-gradient(90deg,#8272ff,#c46cff);transition:width .3s ease}

.ae-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:11px;background:#ffffff0d;border:1px solid #ffffff1f}
.ae-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ded4f7;font-size:12.5px;font-weight:650}
.ae-chip-x{flex:0 0 auto;border:0;background:none;color:#b3a6e6;font-size:11.5px;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

.ae-strength{display:flex;align-items:center;gap:9px;margin:-4px 0 0}
.ae-strength i{flex:1;height:4px;border-radius:999px;background:#ffffff17;overflow:hidden;position:relative}
.ae-strength i::after{content:"";position:absolute;inset:0;width:0;background:#5c6bff;transition:width .25s ease,background .25s ease}
.ae-strength[data-nivel="1"] i::after{width:33%;background:#ff6b7a}
.ae-strength[data-nivel="2"] i::after{width:66%;background:#ffb45c}
.ae-strength[data-nivel="3"] i::after{width:100%;background:#4fd98a}
.ae-strength b{flex:0 0 auto;color:#9d99b6;font-size:11px;font-weight:650}

.ae-oauth{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.ae-oauth[hidden]{display:none}
.ae-oauth button{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:12px;border:1px solid #ffffff24;background:#ffffff0f;color:#efe9ff;font-size:13.5px;font-weight:700;cursor:pointer}
.ae-oauth button:hover{background:#ffffff1a}

.ae-switch{margin:17px 0 0;text-align:center;color:#9d99b6;font-size:12.5px}
.ae-switch[hidden]{display:none}
.ae-visitor-line{margin:9px 0 0;text-align:center;font-size:12.5px;color:#9d99b6}

/* ---------- tela de visitante ---------- */
.ae-screen{position:fixed;inset:0;z-index:9998;display:flex;flex-direction:column;overflow-y:auto;background:radial-gradient(circle at 15% 8%,rgba(124,92,255,.2),transparent 38%),radial-gradient(circle at 88% 80%,rgba(89,55,255,.14),transparent 40%),#07080d;color:#f5f5f7}
.ae-screen.hidden{display:none}
.ae-screen::-webkit-scrollbar{width:9px}
.ae-screen::-webkit-scrollbar-thumb{background:#2a2740;border-radius:9px}

.ae-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px clamp(16px,4vw,42px);border-bottom:1px solid #ffffff14;background:#07080dd8;backdrop-filter:blur(14px)}
.ae-brand{display:flex;align-items:center;gap:11px;min-width:0}
.ae-brand .after-mark{width:34px;height:34px;border-radius:10px;object-fit:cover}
.ae-brand .after-wordmark-art{height:19px;width:auto}
.ae-top-actions{display:flex;align-items:center;gap:9px}

.ae-btn{padding:10px 17px;border-radius:11px;border:1px solid #ffffff2a;background:#ffffff10;color:#efe9ff;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.ae-btn:hover{background:#ffffff1c;transform:translateY(-1px)}
.ae-btn-primary{border-color:transparent;background:linear-gradient(135deg,#8272ff,#5940e8);color:#fff;box-shadow:0 12px 26px #5b3fe045}
.ae-btn-primary:hover{background:linear-gradient(135deg,#9186ff,#6549f2)}

.ae-body{width:min(1180px,100%);margin:0 auto;padding:clamp(22px,5vw,52px) clamp(16px,4vw,42px) 40px;display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:clamp(26px,5vw,58px);align-items:start}

.ae-intro{position:sticky;top:96px}
.ae-intro h1{font-family:Unbounded,Plus Jakarta Sans,sans-serif;font-size:clamp(31px,4.4vw,46px);line-height:1.06;font-weight:800;letter-spacing:-.6px}
.ae-intro h1 span{color:#8272ff}
.ae-intro p{margin:17px 0 0;max-width:390px;color:#c9c4e2;font-size:15px;line-height:1.65}
.ae-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ae-cta .ae-btn{padding:13px 20px;font-size:14px}
.ae-note{margin-top:16px;color:#8e88ab!important;font-size:11.5px!important;max-width:340px}

.ae-column{min-width:0}
.ae-column-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid #ffffff12}
.ae-column-head strong{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#d9d2f5}
.ae-status{margin:0 0 12px;min-height:16px;color:#a29ec0;font-size:12.5px}
.ae-status.is-error{color:#ff8ea0}
.ae-feed{display:flex;flex-direction:column;gap:13px}
.ae-empty{padding:30px 22px;border:1px dashed #ffffff24;border-radius:18px;text-align:center;color:#a29ec0;font-size:13.5px;line-height:1.6}

.ae-card{position:relative;padding:17px 18px 15px;border:1px solid #ffffff14;border-radius:19px;background:#12121deb;box-shadow:0 16px 34px #00000040}
.ae-card-head{display:flex;align-items:center;gap:11px}
.ae-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#5b3fe0,#8b6cff);color:#fff;font-weight:800;font-size:16px;text-decoration:none}
.ae-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ae-card-who{min-width:0;flex:1}
.ae-card-who strong{display:block;font-size:14px;font-weight:750;color:#f3f0ff;overflow-wrap:anywhere}
.ae-card-who small{display:block;color:#9a95b8;font-size:12px;margin-top:1px}
.ae-vibe{flex:0 0 auto;max-width:44%;padding:5px 10px;border-radius:999px;background:#8272ff1f;border:1px solid #8272ff4d;color:#c9bdff;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-card-text{margin:12px 0 0;color:#eae7f7;font-size:15px;line-height:1.58;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.ae-card-text.is-cut::after{content:"…"}
.ae-card-media{display:flex;align-items:center;gap:9px;margin-top:12px;padding:12px 14px;border-radius:14px;background:linear-gradient(120deg,#1b1730,#121a2e);border:1px solid #ffffff12;color:#b7aede;font-size:12.5px;font-weight:650}
.ae-card-media span{font-size:15px}

.ae-lock{margin-top:16px;padding:22px;border-radius:19px;text-align:center;background:linear-gradient(150deg,#260b57e8,#140829f5);border:1px solid #ffffff22}
.ae-lock strong{display:block;font-size:16px;font-weight:800}
.ae-lock p{margin:8px 0 15px;color:#cfc6e8;font-size:13px;line-height:1.55}

.ae-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:22px 16px max(24px,env(safe-area-inset-bottom));border-top:1px solid #ffffff12;font-size:11.5px}
.ae-foot a{color:#a9a3c6;text-decoration:none}
.ae-foot a:hover{color:#e6dfff}
.ae-foot span{color:#6f6a8c}
.ae-foot small{color:#6f6a8c;letter-spacing:.08em}

/* ---------- celular ---------- */
@media (max-width:900px){
  .ae-body{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:20px}
  .ae-intro{position:static;text-align:center}
  .ae-intro p{margin-inline:auto}
  .ae-cta,.ae-note{justify-content:center}
  .ae-note{margin-inline:auto}
  .ae-brand .after-wordmark-art{height:17px}
  .ae-top{padding:12px 14px}
  .ae-btn{padding:9px 14px;font-size:12.5px}
  .ae-card{padding:15px 15px 13px;border-radius:17px}
  .ae-vibe{max-width:38%}
}
@media (max-width:430px){
  .ae-top-actions .ae-btn:not(.ae-btn-primary){display:none}
  .ae-intro h1{font-size:29px}
}
@media (prefers-reduced-motion:reduce){
  .auth-form .ae-step{animation:none}
  .ae-flow-bar i{transition:none}
}
