/* ═══════════════════════════════════════════════════════════════════════
   Cockpit DREG1 — telas de acesso (login · cadastro · redefinição de senha)
   Estilo único compartilhado. Identidade verde Vibra + Manrope.
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --brand-deep:#002315; --brand-mid:#00472E; --brand-soft:#016b45;
  --accent:#00A859; --accent-2:#37d07f;
  --ink:#0e1a13; --ink-2:#5b6a61; --line:#e6ece8;
  --surface:#ffffff; --surface-2:#f3f7f4;
  --danger:#b3261e; --danger-bg:#fdeceb; --danger-bd:#f3c9c6;
  --ok:#0f7a4f; --ok-bg:#e7f5ee; --ok-bd:#bfe6d2;
  --info:#0b6b57; --info-bg:#e9f6f1; --info-bd:#c3e6da;
  --ring:rgba(0,168,89,.28);
  --shadow:0 26px 70px -28px rgba(0,45,28,.45);
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e9f1ec; --ink-2:#9bafa4; --line:#213029;
    --surface:#0c1611; --surface-2:#080f0b;
    --danger:#ff746a; --danger-bg:#241210; --danger-bd:#3a1d19;
    --ok:#4fd39a; --ok-bg:#0d2017; --ok-bd:#173a2a;
    --info:#6fe0c2; --info-bg:#0c1f19; --info-bd:#183a30;
    --shadow:0 26px 70px -28px rgba(0,0,0,.7);
  }
}
html,body{ height:100%; }
body{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink); background:var(--surface-2); letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; }
.auth{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.06fr .94fr; }

/* ─────────── Painel de marca ─────────── */
.brand{
  position:relative; overflow:hidden; isolation:isolate; color:#e9fff4;
  display:flex; flex-direction:column; justify-content:flex-start; padding:clamp(30px,4vw,60px);
  background:radial-gradient(125% 120% at 86% 8%, var(--brand-soft) 0%, var(--brand-mid) 42%, var(--brand-deep) 100%);
}
.brand::before{ content:''; position:absolute; z-index:-1; width:560px; height:560px; right:-140px; top:-160px;
  background:radial-gradient(circle, rgba(55,208,127,.5), rgba(55,208,127,0) 62%); animation:drift 16s ease-in-out infinite; }
.brand::after{ content:''; position:absolute; z-index:-1; inset:0; opacity:.7; pointer-events:none;
  background:
    repeating-radial-gradient(circle at 84% 13%, rgba(255,255,255,.05) 0 1px, transparent 1px 50px),
    linear-gradient(118deg, transparent 38%, rgba(0,0,0,.22) 100%); }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-26px,34px) scale(1.08); } }
.brand-top{ display:flex; align-items:center; gap:13px; }
.mark{ width:46px; height:46px; flex:none; filter:drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.wordmark{ font-size:20px; font-weight:700; letter-spacing:-.02em; color:#fff; }
.wordmark b{ font-weight:800; color:var(--accent-2); }
.brand-hero{ max-width:30rem; margin:auto 0; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#8fe9bd; padding:6px 12px;
  border:1px solid rgba(143,233,189,.28); border-radius:999px; margin-bottom:22px; }
.brand-hero h1{ font-size:clamp(30px,3.4vw,45px); font-weight:800; line-height:1.06; letter-spacing:-.03em; color:#fff; text-wrap:balance; }
.brand-hero h1 em{ font-style:normal; color:var(--accent-2); }
.lede{ margin-top:18px; font-size:15.5px; line-height:1.6; color:#bfe6d1; max-width:27rem; }
.feats{ list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:13px; }
.feats li{ display:flex; align-items:center; gap:12px; font-size:14px; font-weight:500; color:#dcefe4; }
.feats svg{ width:19px; height:19px; flex:none; color:var(--accent-2); }

/* ─────────── Painel do formulário ─────────── */
.panel{ background:var(--surface); display:flex; justify-content:center; overflow-y:auto; padding:clamp(26px,4vw,48px); }
.panel-inner{ width:100%; max-width:400px; margin:auto; }
.panel-head{ margin-bottom:24px; }
.panel-head h2{ font-size:26px; font-weight:800; letter-spacing:-.025em; }
.panel-head .sub{ margin-top:7px; font-size:14.5px; color:var(--ink-2); line-height:1.5; }

.note{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:500; line-height:1.45;
  border-radius:11px; padding:12px 13px; margin-bottom:18px; border:1px solid; }
.note svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.note p{ flex:1; }
.note.ok{ color:var(--ok); background:var(--ok-bg); border-color:var(--ok-bd); }
.note.err{ color:var(--danger); background:var(--danger-bg); border-color:var(--danger-bd); }
.note.info{ color:var(--info); background:var(--info-bg); border-color:var(--info-bd); }
.note button{ background:none; border:0; color:inherit; opacity:.6; cursor:pointer; font-size:18px; line-height:1; padding:0 2px; }
.note button:hover{ opacity:1; }

.form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:block; }
.lab{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:7px; letter-spacing:-.005em; }
.lab-row{ display:flex; align-items:baseline; justify-content:space-between; }
.mini-link{ font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; margin-bottom:7px; }
.mini-link:hover{ text-decoration:underline; }
.hint{ margin-top:6px; font-size:11.5px; color:var(--ink-2); }

.input{ position:relative; display:flex; align-items:center; }
.input > svg.lead{ position:absolute; left:14px; width:18px; height:18px; color:var(--ink-2); pointer-events:none; }
.input input{ width:100%; font-family:inherit; font-size:15px; color:var(--ink); font-weight:500;
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:11px;
  padding:13px 15px 13px 43px; letter-spacing:-.01em; transition:border-color .15s, box-shadow .15s, background .15s; }
.input input::placeholder{ color:var(--ink-2); opacity:.6; }
.input input:focus{ outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 4px var(--ring); }
.input input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); transition:background-color 9999s; }
.input input.code{ letter-spacing:.32em; font-weight:700; font-size:16.5px; }
.eye{ position:absolute; right:6px; display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  background:none; border:0; border-radius:8px; color:var(--ink-2); cursor:pointer; }
.eye:hover{ color:var(--ink); background:var(--surface-2); }
.eye svg{ width:19px; height:19px; }

.cta{ margin-top:6px; display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  font-family:inherit; font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:#fff; cursor:pointer;
  border:0; border-radius:11px; padding:14px 18px;
  background:linear-gradient(180deg,#00b862 0%, var(--accent) 55%, #008f4b 100%);
  box-shadow:0 12px 26px -10px rgba(0,168,89,.6), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .12s, box-shadow .15s, filter .15s; }
.cta svg{ width:18px; height:18px; transition:transform .15s; }
.cta:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -10px rgba(0,168,89,.66), inset 0 1px 0 rgba(255,255,255,.3); }
.cta:hover svg{ transform:translateX(3px); }
.cta:active{ transform:translateY(0); filter:brightness(.97); }

.btn-ghost{ margin-top:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:inherit; font-size:14.5px; font-weight:700; color:var(--accent); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:11px; padding:12px 16px; text-decoration:none;
  transition:border-color .15s, background .15s; }
.btn-ghost:hover{ border-color:var(--accent); background:var(--surface-2); }
.btn-ghost svg{ width:17px; height:17px; }

.divider{ display:flex; align-items:center; gap:14px; margin:22px 0 16px; color:var(--ink-2); font-size:12px; font-weight:600; }
.divider::before,.divider::after{ content:''; height:1px; flex:1; background:var(--line); }
.alt{ text-align:center; font-size:14px; color:var(--ink-2); }
.alt a{ color:var(--accent); font-weight:700; text-decoration:none; }
.alt a:hover{ text-decoration:underline; }
.backlinks{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px; font-size:13px; }
.backlinks a{ display:inline-flex; align-items:center; gap:5px; color:var(--ink-2); text-decoration:none; font-weight:600; }
.backlinks a:hover{ color:var(--accent); }
.backlinks a svg{ width:15px; height:15px; }
.backlinks .sep{ width:3px; height:3px; border-radius:50%; background:var(--line); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ─────────── Responsivo ─────────── */
@media (max-width:920px){
  .auth{ display:block; }
  .brand{ padding:26px 24px 30px; }
  .brand::before{ width:340px; height:340px; right:-120px; top:-150px; }
  .brand-hero{ margin:22px 0 0; }
  .brand-hero h1{ font-size:clamp(24px,7vw,32px); }
  .lede, .feats{ display:none; }
  .panel{ display:block; padding:30px 24px 42px; }
  .panel-inner{ margin:0 auto; }
}
@media (max-width:520px){
  .brand-hero{ display:none; }
  .brand{ padding:22px 24px; }
  .brand::before{ opacity:.6; }
}
@media (prefers-reduced-motion:reduce){
  .brand::before{ animation:none; }
  .cta,.cta svg,.input input{ transition:none; }
}