/* ============================================================
   SuplixIA — Auth (login + cadastro)
   Reaproveita os tokens de styles.css
   ============================================================ */

.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 100vh;
  background: var(--bg);
}

/* ---------------- FORM SIDE ---------------- */
.auth-form-side {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 4vw, 48px);
  position: relative;
}
.auth-top { display: flex; align-items: center; justify-content: space-between; }
.auth-top .logo { color: var(--text); }
.auth-top .logo .mark { color: #04140e; }
.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--text-mut);
  transition: color .15s;
}
.back-link:hover { color: var(--text); }
.back-link svg { width: 16px; height: 16px; }

.auth-card {
  width: 100%; max-width: 408px;
  margin: auto;
  padding: clamp(20px, 3vw, 8px) 0;
}
.auth-head { margin-bottom: 26px; }
.auth-head h1 { font-family: "Sora"; font-weight: 700; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.02em; margin: 0; }
.auth-head p { color: var(--text-soft); font-size: 15.5px; line-height: 1.55; margin: 10px 0 0; }

/* segmented toggle */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--bg-cool); padding: 5px; border-radius: 13px;
  margin-bottom: 28px;
}
.seg button {
  font-family: "Sora"; font-weight: 600; font-size: 15px; color: var(--text-mut);
  padding: 11px 0; border-radius: 9px; transition: all .2s var(--ease);
}
.seg button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }

/* fields */
.field { margin-bottom: 17px; position: relative; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.field .ctrl { position: relative; display: flex; align-items: center; }
.field .ctrl > svg.lead { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-mut); pointer-events: none; }
.input {
  width: 100%; font-family: "Manrope"; font-size: 15px; color: var(--text);
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px;
  padding: 14px 15px 14px 42px;
  transition: border-color .16s, box-shadow .16s;
}
.input::placeholder { color: var(--text-mut); }
.input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(20,184,102,.13); }
.field.invalid .input { border-color: #d96a4f; box-shadow: 0 0 0 4px rgba(217,106,79,.12); }
.field .err { font-size: 12.5px; color: #c2553f; margin-top: 6px; display: none; }
.field.invalid .err { display: block; }
.toggle-eye {
  position: absolute; right: 12px; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; color: var(--text-mut);
  transition: color .15s, background .15s;
}
.toggle-eye:hover { color: var(--text); background: var(--bg-cool); }
.toggle-eye svg { width: 18px; height: 18px; }

.row-between { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 22px; }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-soft); cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line-2);
  display: grid; place-items: center; transition: all .15s; flex: none;
}
.check .box svg { width: 12px; height: 12px; color: #04140e; opacity: 0; transform: scale(.6); transition: all .15s; }
.check input:checked + .box { background: var(--green); border-color: var(--green); }
.check input:checked + .box svg { opacity: 1; transform: none; }
.check input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(20,184,102,.18); }
.link { font-size: 14px; font-weight: 600; color: var(--green-ink); transition: opacity .15s; }
.link:hover { opacity: .75; }

.btn-submit { width: 100%; }
.btn-submit .spin { width: 18px; height: 18px; border: 2.5px solid rgba(4,20,14,.3); border-top-color: #04140e; border-radius: 50%; animation: spin .7s linear infinite; display: none; }
.btn-submit.loading .label, .btn-submit.loading svg.arr { display: none; }
.btn-submit.loading .spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.reassure { text-align: center; font-size: 13px; color: var(--text-mut); margin-top: 14px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.reassure span { display: inline-flex; align-items: center; gap: 6px; }
.reassure svg { width: 14px; height: 14px; color: var(--green-ink); }

.divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--text-mut); font-size: 13px; font-weight: 600; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px;
  font-family: "Sora"; font-weight: 600; font-size: 15px; color: var(--text);
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 14px;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn-google:hover { background: var(--bg-warm); transform: translateY(-1px); }
.btn-google svg { width: 19px; height: 19px; }

.switch-line { text-align: center; font-size: 14.5px; color: var(--text-soft); margin-top: 24px; }
.switch-line button { font-weight: 700; color: var(--green-ink); }
.switch-line button:hover { text-decoration: underline; }

/* segments visibility */
.pane { display: none; }
.pane.active { display: block; animation: fadeUp .35s var(--ease); }
@keyframes fadeUp { from { transform: translateY(8px); } to { transform: none; } }

/* password strength */
.pw-strength { display: flex; gap: 5px; margin-top: 9px; }
.pw-strength i { height: 4px; flex: 1; border-radius: 4px; background: var(--bg-cool); transition: background .25s; }
.pw-strength.s1 i:nth-child(1) { background: #d96a4f; }
.pw-strength.s2 i:nth-child(-n+2) { background: #e3993a; }
.pw-strength.s3 i:nth-child(-n+3) { background: #5bbf7a; }
.pw-strength.s4 i { background: var(--green); }
.pw-hint { font-size: 12px; color: var(--text-mut); margin-top: 6px; }

.auth-foot-legal { text-align: center; font-size: 12.5px; color: var(--text-mut); margin-top: 30px; line-height: 1.5; }
.auth-foot-legal a { color: var(--text-soft); font-weight: 600; }

/* ---------------- BRAND SIDE ---------------- */
.auth-brand {
  background: var(--ink); color: var(--on-dark);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(34px, 4vw, 60px);
}
.auth-brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 45% at 78% 18%, rgba(32,205,122,.22), transparent 70%),
    radial-gradient(50% 45% at 25% 92%, rgba(15,165,142,.20), transparent 72%);
}
.auth-brand > * { position: relative; z-index: 2; }
.brand-pill { align-self: flex-start; }
.brand-mid { margin: auto 0; width: 100%; }
.brand-mid h2 { font-family: "Sora"; font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.02em; line-height: 1.08; margin: 0 0 28px; max-width: 16ch; }
.brand-mid h2 .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* mini chat */
.mini-chat {
  background: rgba(255,255,255,.04); border: 1px solid var(--line-dark);
  border-radius: 22px; padding: 20px; backdrop-filter: blur(6px);
  max-width: 400px;
}
.mini-chat .mc-head { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid var(--line-dark); }
.mini-chat .av { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #04140e; flex: none; }
.mini-chat .av svg { width: 19px; height: 19px; }
.mini-chat .n { font-family: "Sora"; font-weight: 700; font-size: 14.5px; color: var(--on-dark); }
.mini-chat .s { font-size: 12px; color: var(--green-bright); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.mini-chat .bubbles { display: flex; flex-direction: column; gap: 8px; padding-top: 15px; }
.mini-chat .b { max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.mini-chat .b.them { align-self: flex-start; background: #1a2723; color: #e7efeb; border-radius: 14px 14px 14px 4px; }
.mini-chat .b.me { align-self: flex-end; background: #115e43; color: #eafff4; border-radius: 14px 14px 4px 14px; }
.mini-chat .stamp { align-self: flex-end; margin-top: 4px; }

.brand-stats { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.brand-stats .bs .v { font-family: "Sora"; font-weight: 800; font-size: 26px; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-stats .bs .l { font-size: 12.5px; color: var(--on-dark-soft); margin-top: 3px; }

.brand-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--on-dark-soft); }
.brand-foot .stars { color: #ffcf5c; letter-spacing: 1.5px; }
.brand-foot .seal { display: inline-flex; align-items: center; gap: 7px; }
.brand-foot .seal svg { width: 14px; height: 14px; color: var(--green-bright); }
.brand-foot .sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.25); }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand {
    order: -1; min-height: auto; padding: 22px clamp(20px, 5vw, 34px) 26px;
    flex-direction: row; align-items: center; justify-content: space-between; gap: 16px;
  }
  .brand-mid, .mini-chat, .brand-stats, .brand-foot, .brand-pill { display: none; }
  .auth-brand .brand-mobile { display: flex; align-items: center; gap: 12px; }
  .auth-form-side { padding-top: 30px; }
}
@media (min-width: 901px) { .brand-mobile { display: none; } }
@media (max-width: 460px) {
  .auth-card { padding: 8px 0; }
  .row-between { flex-wrap: wrap; gap: 10px; }
}