:root{
  --void:#050507;
  --glow-blue: rgba(10,132,255,0.36);
  --glow-purple: rgba(191,90,242,0.30);
  --glow-teal: rgba(60,220,200,0.14);
  --glass: rgba(255,255,255,0.05);
  --glass-strong: rgba(255,255,255,0.09);
  --stroke: rgba(255,255,255,0.14);
  --stroke-soft: rgba(255,255,255,0.07);
  --t1:#f5f5f7;
  --t2:rgba(245,245,247,0.62);
  --t3:rgba(245,245,247,0.36);
  --blue:#0a84ff;
  --spectrum: linear-gradient(120deg,#0a84ff 0%, #bf5af2 55%, #ff6482 100%);
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 15px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:auto; min-height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(760px 620px at 8% -4%, rgba(10,132,255,0.22), transparent 55%),
    radial-gradient(640px 620px at 100% 12%, rgba(191,90,242,0.16), transparent 58%),
    radial-gradient(680px 620px at 46% 104%, rgba(255,100,130,0.1), transparent 60%),
    var(--void);
  color:var(--t1); -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; align-items:flex-start; justify-content:center;
  padding:24px clamp(16px, 2.4vw, 32px) 32px; position:relative; overflow-x:hidden; overflow-y:auto;
}
.bg-atmo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 620px at 6% 8%, rgba(10,132,255,0.22), transparent 55%),
    radial-gradient(680px 640px at 96% 22%, rgba(191,90,242,0.16), transparent 58%),
    radial-gradient(820px 700px at 46% 105%, rgba(255,100,130,0.1), transparent 60%),
    var(--void);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stage{ position:relative; z-index:2; width:100%; max-width:1080px; padding-bottom:24px; margin:auto 0; }
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), var(--glass);
  backdrop-filter: blur(42px) saturate(170%);
  -webkit-backdrop-filter: blur(42px) saturate(170%);
  border:1px solid var(--stroke);
  border-top-color: rgba(255,255,255,0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 70px rgba(0,0,0,0.5);
}
.panel{
  border-radius:var(--r-xl);
  display:grid; grid-template-columns: 1.1fr 0.9fr;
  min-height:620px; overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}
.hero{
  padding:52px 48px; display:flex; flex-direction:column; justify-content:center;
  position:relative; border-right:1px solid var(--stroke-soft);
  overflow:hidden;
  background: radial-gradient(circle at 18% 18%, rgba(10,132,255,0.18), transparent 30%),
              radial-gradient(circle at 92% 10%, rgba(191,90,242,0.18), transparent 28%);
}
.hero::before{
  content:''; position:absolute; top:-100px; left:-100px; width:320px;height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(10,132,255,0.28), transparent 65%); pointer-events:none;
}
.hero::after{
  content:''; position:absolute; top:16px; right:-40px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(191,90,242,0.22), transparent 58%); pointer-events:none;
  filter: blur(2px);
}
.hero-mark{
  width:58px;height:58px;border-radius:18px; margin-bottom:22px;
  background:var(--spectrum); display:flex;align-items:center;justify-content:center;
  font-size:26px; box-shadow:0 10px 28px rgba(191,90,242,0.35); position:relative;
}
.hero-title{ font-size:32px; font-weight:800; letter-spacing:-0.025em; position:relative; }
.hero-sub{ font-size:14.5px; color:var(--t2); margin-top:12px; line-height:1.65; max-width:400px; position:relative;}
.hero-sub .desktop-only{ display:inline; }
.hero-sub .mobile-only{ display:none; }
.feat-list{ margin-top:36px; display:flex; flex-direction:column; gap:16px; position:relative; }
.feat{ display:flex; gap:14px; align-items:flex-start; }
.feat-ic{
  width:42px;height:42px;border-radius:13px; flex-shrink:0; display:flex;align-items:center;justify-content:center;
}
.feat-ic svg{ width:19px;height:19px; }
.feat-t{ font-size:13.5px; font-weight:700; color:var(--t1); }
.feat-d{ font-size:12px; color:var(--t3); margin-top:2px; line-height:1.5; }
.ic-blue{ background:rgba(10,132,255,0.16); color:#63b3ff;}
.ic-teal{ background:rgba(95,227,210,0.16); color:#8ef0e2;}
.ic-purple{ background:rgba(191,90,242,0.16); color:#d69bff;}
.ic-orange{ background:rgba(255,159,10,0.16); color:#ffc069;}
.form-side{ padding:56px 48px; display:flex; flex-direction:column; justify-content:center; align-items:stretch; }
.form-side form{ width:100%; }
.form-hdr{ margin-bottom:26px; position:relative; z-index:1; }
.form-title{ font-size:22px; font-weight:800; letter-spacing:-0.02em; }
.form-sub{ font-size:13px; color:var(--t3); margin-top:6px; line-height:1.65; }
.field{ margin-bottom:16px; }
.field-lbl{ font-size:12px; font-weight:600; color:var(--t2); margin-bottom:8px; display:flex; align-items:center; gap:7px;}
.field-lbl svg{ width:14px;height:14px; opacity:.8; }
.field-input{
  width:100%; padding:15px 16px; border-radius:16px; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12); color:var(--t1); font-size:14px; outline:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field-input::placeholder{ color:rgba(245,245,247,0.36); }
.field-input:focus{ border-color:rgba(10,132,255,0.7); background:rgba(10,132,255,0.08); box-shadow: 0 0 0 4px rgba(10,132,255,0.12); }
.row-opts{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 22px; font-size:12.5px; }
.remember{ display:flex; align-items:center; gap:12px; color:var(--t2); cursor:pointer; position:relative; font-size:12.5px; }
.remember input.remember-checkbox{ position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; clip:rect(0 0 0 0); clip-path: inset(50%); overflow:hidden; border:0; }
.switch{ width:44px; height:24px; border-radius:999px; background:rgba(255,255,255,0.14); position:relative; flex-shrink:0; transition: background .18s ease, border-color .18s ease, transform .18s ease; border:1px solid rgba(255,255,255,0.18); }
.switch .knob{ display:block; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 10px 18px rgba(0,0,0,0.15); transform: translateX(2px); transition: transform .18s ease, box-shadow .18s ease; }
.remember input.remember-checkbox:checked + .switch .knob{ transform: translateX(20px); }
.remember input.remember-checkbox:checked + .switch{ background: linear-gradient(135deg, #4d7cff 0%, #bf5af2 45%, #ff6482 100%); border-color: transparent; }
.remember input.remember-checkbox:focus + .switch{ box-shadow: 0 0 0 3px rgba(10,132,255,0.18); }
.forgot{ color:var(--blue); font-weight:600; cursor:pointer; }
.forgot:hover{ text-decoration:underline; }
.btn-primary{
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  width:100%; max-width:100%; background-image: linear-gradient(135deg, #4d7cff 0%, #bf5af2 45%, #ff6482 100%);
  color:#fff; font-size:15px; font-weight:700;
  min-height:56px; padding:0 30px; border-radius:20px; box-shadow:0 18px 46px rgba(83,55,183,0.28);
  border:none; outline:none;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.btn-primary svg{ stroke: #fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 48px rgba(83,55,183,0.34); }
.divider{ display:flex; align-items:center; gap:12px; margin:22px 0; font-size:11.5px; color:var(--t3); }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--stroke-soft); }
.btn-ghost{
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  width:100%; max-width:100%; background:rgba(255,255,255,0.03); color:var(--t1); font-size:13.5px; font-weight:600;
  min-height:48px; padding:0 28px; border-radius:16px; border:1px solid rgba(255,255,255,0.12);
  transition:background .18s ease, border-color .18s ease;
}
.btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.16); }
.support-line{ text-align:center; font-size:12px; color:var(--t3); margin-top:22px; }
.support-line a{ color:var(--blue); font-weight:600; text-decoration:none; }
.support-line a:hover{ text-decoration:underline; }
.mobile-chips{ display:none; margin-top:18px; gap:10px; justify-content:center; flex-wrap:wrap; }
.mobile-chips .chip{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--t2); font-size:12px; }
.mobile-chips .chip-icon{ display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); border-radius:50%; color:#fff; font-size:11px; }
.success-card{ margin-top:22px; padding:22px; border-radius:22px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#d7e5ff; line-height:1.7; }
.success-card p{ margin:0 0 10px; }
.note-text{ margin:12px 0 18px; font-size:13px; color:var(--t2); }
.flashes{ display:flex; flex-direction:column; gap:8px; }
.flash{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:15px; font-size:13.5px; font-weight:500; }
.flash-success{ background:rgba(50,215,75,0.12); color:#6ee888; border:1px solid rgba(50,215,75,0.3); }
.flash-danger{ background:rgba(255,69,58,0.12); color:#ff8079; border:1px solid rgba(255,69,58,0.3); }
.flash-warning{ background:rgba(255,159,10,0.12); color:#ffc069; border:1px solid rgba(255,159,10,0.3); }
.flash-info{ background:rgba(10,132,255,0.12); color:#63b3ff; border:1px solid rgba(10,132,255,0.3); }
.flash-dismiss{ margin-left:auto; cursor:pointer; opacity:0.7; font-size:16px; line-height:1; }
.flash-dismiss:hover{ opacity:1; }
@media (max-width:900px){
  body{ padding:16px; align-items:flex-start; }
  .stage{ width:100%; display:flex; justify-content:center; }
  .panel{ grid-template-columns:1fr; min-height:auto; max-width:440px; border-radius:28px; }
  .hero{ border-right:none; border-bottom:none; padding:28px 24px 24px; }
  .form-side{ padding:28px 24px 36px; min-height:auto; }
  .form-side form{ max-width:100%; }
  .form-side.login-page .form-hdr{ display:none; }
  .form-side.cadastro-page .form-hdr{ display:block; }
  .form-sub{ margin-left:auto; margin-right:auto; max-width:320px; }
  .row-opts{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
  .btn-primary, .btn-ghost{ min-height:56px; border-radius:20px; }
  .feat-list{ display:none; }
  .hero-sub .desktop-only{ display:none; }
  .hero-sub .mobile-only{ display:inline; }
  .mobile-chips{ display:flex; }
}

@media (max-width:560px){
  body{ padding:14px; }
  .panel{ border-radius:26px; overflow:visible; }
  .hero{ padding:24px 18px 18px; }
  .hero-title{ font-size:28px; }
  .hero-sub{ font-size:13px; line-height:1.55; }
  .hero-mark{ width:52px; height:52px; margin-bottom:18px; border-radius:18px; font-size:24px; }
  .feat-list{ display:none; }
  .form-side{ padding:24px 18px 34px; min-height:auto; }
  .form-title{ font-size:22px; }
  .field-input{ padding:14px 15px; border-radius:16px; }
  .row-opts{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
  .btn-primary, .btn-ghost{ min-height:56px; }
  .support-line{ margin-top:16px; }
  .support-line a{ white-space:nowrap; }
  .hero-sub .desktop-only{ display:none; }
  .hero-sub .mobile-only{ display:inline; }
  .mobile-chips{ display:flex; }
  .form-side.login-page .form-hdr{ display:none; }
  .form-side.cadastro-page .form-hdr{ display:block; }
}

/* Toggle vertical centering when content fits viewport -- also removes
   top/bottom padding so the panel truly centers */
body.v-centered {
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure stage uses auto margin to center both axes when possible and add smooth transition */
.stage { transition: margin 220ms ease, transform 220ms ease; }
body.v-centered .stage { margin: 12px auto; }