[hidden] { display: none !important; }

:root {
  --auth-bg: #0A0A0E;
  --auth-card-bg: #15161D;
  --auth-border: #262733;
  --auth-text: #F2F2F5;
  --auth-text-dim: #9B9BA8;
  --auth-placeholder: #5E5E6B;
  --auth-gold: #B8962F;
  --auth-gold-hover: #CDA93B;
  --auth-error: #E06565;
  --auth-success: #6FCF8F;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--auth-bg);
  color: var(--auth-text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 70px;
  position: relative;
  overflow: hidden;
}

.auth-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(184,150,47,0.16) 0%, rgba(184,150,47,0) 65%);
  pointer-events: none;
}

.auth-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--auth-card-bg);
  border: 1px solid var(--auth-border);
  border-radius: 20px;
  padding: 40px 34px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.auth-logo-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--auth-gold), #8f7a2e);
  color: #0A0A0E;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-weight: 800; font-size: 20px;
}
.auth-logo-text {
  font-family: 'Fraunces', serif; font-weight: 800; font-size: 20px;
  letter-spacing: 0.02em;
}

.auth-box h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  margin-bottom: 10px;
}
.auth-sub {
  color: var(--auth-text-dim);
  font-size: 14.5px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 32px;
}
.auth-sub strong { color: var(--auth-text); }

.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-form label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--auth-text-dim); font-weight: 500;
}
.auth-form input[type="email"],
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="date"] {
  width: 100%;
  font-family: inherit; font-size: 15px; color: var(--auth-text);
  background: var(--auth-bg);
  border: 1px solid var(--auth-border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color .15s;
}
.auth-pw-wrap { position: relative; display: flex; }
.auth-pw-wrap input { flex: 1; padding-right: 46px !important; }
.auth-pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: none; cursor: pointer;
  color: var(--auth-text-dim); display: grid; place-items: center; border-radius: 8px;
}
.auth-pw-toggle:hover { color: var(--auth-text); background: rgba(255,255,255,0.06); }
.auth-pw-toggle.is-visible { color: var(--auth-gold); }
.auth-form input::placeholder { color: var(--auth-placeholder); }
.auth-form input:focus { outline: none; border-color: var(--auth-gold); }
.auth-form input:disabled { opacity: 0.55; }

.auth-hint { font-size: 12.5px; color: var(--auth-placeholder); margin-top: -12px; }

.auth-checkbox {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  font-size: 14px;
  color: var(--auth-text-dim);
}
.auth-checkbox input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  accent-color: var(--auth-gold);
}
.auth-checkbox a { color: var(--auth-gold); font-weight: 600; }

.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  color: var(--auth-text-dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--auth-border); }

.auth-btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; border: 1.5px solid var(--auth-border); border-radius: 10px;
  background: #fff; color: var(--auth-text); font-weight: 600; font-size: 15px;
  text-decoration: none; transition: border-color .15s, background .15s, transform .15s;
}
.auth-btn-google:hover { border-color: var(--auth-gold); background: #fafafa; transform: translateY(-1px); }

.auth-btn-primary {
  margin-top: 8px;
  padding: 16px;
  border: none;
  border-radius: 10px;
  background: var(--auth-gold);
  color: #17150A;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.auth-btn-primary:hover { background: var(--auth-gold-hover); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(184,150,47,0.5); }

.auth-footnote {
  text-align: center;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--auth-text-dim);
}
.auth-footnote a { color: var(--auth-gold); font-weight: 600; }

.auth-page-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; font-size: 12px; color: var(--auth-text-dim);
  background: rgba(10,10,14,0.7); backdrop-filter: blur(6px);
}
.auth-page-footer a { color: var(--auth-text-dim); }
.auth-page-footer a:hover { color: var(--auth-gold); }

/* ---------- Páginas legais (Termos / Privacidade) ---------- */
.legal-page {
  max-width: 480px; margin: 0 auto 60px; text-align: left;
  max-height: 70vh; overflow-y: auto; padding-right: 6px;
}
.legal-page h1 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; margin-bottom: 4px; }
.legal-updated { font-size: 12px; color: var(--auth-text-dim); margin-bottom: 24px; }
.legal-page h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px; margin: 22px 0 8px; color: var(--auth-gold); }
.legal-page p, .legal-list { font-size: 13.5px; line-height: 1.6; color: var(--auth-text-dim); }
.legal-list { padding-left: 18px; margin-top: 6px; }
.legal-list li { margin-bottom: 6px; }
.legal-page strong { color: var(--auth-text); }
.legal-back { display: inline-block; margin-top: 26px; color: var(--auth-gold); font-weight: 600; font-size: 13.5px; }

.flash-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.flash {
  padding: 13px 16px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  border: 1px solid transparent;
}
.flash-success { background: rgba(111,207,143,0.1); color: var(--auth-success); border-color: rgba(111,207,143,0.25); }
.flash-error { background: rgba(224,101,101,0.1); color: var(--auth-error); border-color: rgba(224,101,101,0.25); }

/* ---------- Landing Dex CSC ---------- */
:root { --auth-bg:#f7f7ff; --auth-card-bg:#fff; --auth-border:#dfe1ef; --auth-text:#10152d; --auth-text-dim:#666b82; --auth-placeholder:#969aad; --auth-gold:#5b35f5; --auth-gold-hover:#4826df; }
body { background:var(--auth-bg); }
.auth-screen { align-items:center; gap:clamp(34px,6vw,90px); padding:52px max(24px,5vw) 110px; background:radial-gradient(circle at 80% 10%,rgba(91,53,245,.16),transparent 32rem); }
.auth-glow { top:-30%; left:80%; background:radial-gradient(circle,rgba(139,120,255,.18),transparent 66%); }
.auth-hero { position:relative; z-index:1; width:min(620px,52vw); }
.auth-brand { display:flex; align-items:center; gap:13px; margin-bottom:44px; }
.auth-brand,.auth-brand:hover,.auth-brand:visited { color:inherit; text-decoration:none; }
.auth-brand:active { color:inherit; text-decoration:none; }
.auth-brand:focus-visible { outline:3px solid #8b78ff; outline-offset:5px; border-radius:15px; }
.auth-brand img { border-radius:14px; box-shadow:0 14px 28px -17px rgba(8,13,36,.7); }
.auth-brand span,.auth-brand small { display:block; }
.auth-brand strong { font-size:29px; letter-spacing:-.05em; }
.auth-brand strong b,.auth-logo-text b { color:#5b35f5; }
.auth-brand small { color:var(--auth-text-dim); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.auth-kicker { display:inline-flex; margin-bottom:20px; padding:8px 13px; border:1px solid #ddd8ff; border-radius:999px; color:#5b35f5; background:#fff; font-size:11px; font-weight:700; text-decoration:none; }
.auth-hero h1 { max-width:580px; margin:0 0 18px; font-family:Inter,sans-serif; font-size:clamp(42px,5vw,68px); line-height:1.02; letter-spacing:-.065em; }
.auth-hero h1 em { display:block; color:#5b35f5; font-style:normal; }
.auth-hero>p { max-width:560px; color:var(--auth-text-dim); font-size:16px; line-height:1.7; }
.auth-features { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:32px; }
.auth-features span { padding:14px 11px; border:1px solid var(--auth-border); border-radius:13px; background:rgba(255,255,255,.74); color:var(--auth-text-dim); font-size:10px; line-height:1.4; }
.auth-features b { display:block; margin-bottom:4px; color:#5b35f5; font-size:11px; }
.auth-box { max-width:400px; flex:none; border-radius:22px; box-shadow:0 30px 70px -36px rgba(8,13,36,.55); }
.auth-logo { margin-bottom:30px; }
.auth-logo-mark { border-radius:10px; background:none; }
.auth-logo-text { font-family:Inter,sans-serif; letter-spacing:-.03em; }
.auth-box h1 { font-family:Inter,sans-serif; letter-spacing:-.04em; }
.auth-form input[type="email"],.auth-form input[type="text"],.auth-form input[type="password"],.auth-form input[type="date"] { background:#f7f7fb; }
.auth-btn-primary { color:#fff; box-shadow:0 14px 28px -16px rgba(91,53,245,.75); }
.auth-page-footer { flex-wrap:wrap; background:rgba(247,247,255,.88); }
/* ---------- Hero ao lado do formulário (telas de login/cadastro/etc) ----------
   Em telas pequenas mostramos só o card de login, compacto, sem o hero —
   isso é o que resolve o corte no celular. Em telas largas (desktop), o hero
   volta a aparecer ao lado do formulário, como no design original. */
.auth-hero-side { display:none; }
@media (min-width:901px) {
  .auth-hero-side { display:block; }
}

/* ---------- Landing standalone (só hero + CTAs, sem card de login) ----------
   Usa seletor duplo (.auth-screen.auth-screen-landing) de propósito: garante
   especificidade maior que as regras `.auth-screen { display:block }` dos
   media queries abaixo, então a landing continua centralizada no mobile
   independente da ordem das regras no arquivo. */
.auth-screen.auth-screen-landing { display:flex; align-items:center; justify-content:center; padding:52px max(24px,5vw) 90px; }
.auth-hero.auth-hero-standalone { width:min(640px,100%); text-align:center; margin:0 auto; }
.auth-hero-standalone .auth-brand { justify-content:center; }
.auth-hero-standalone h1 { max-width:none; margin-left:auto; margin-right:auto; }
.auth-hero-standalone > p { margin-left:auto; margin-right:auto; }
.landing-actions { display:flex; flex-direction:column; gap:12px; max-width:360px; margin:36px auto 0; }
.landing-btn-primary, .landing-btn-secondary {
  display:block; text-align:center; padding:16px; border-radius:12px;
  font-weight:700; font-size:15.5px; text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s;
}
.landing-btn-primary { background:var(--auth-gold); color:#fff; box-shadow:0 14px 28px -16px rgba(91,53,245,.75); }
.landing-btn-primary:hover { background:var(--auth-gold-hover); transform:translateY(-1px); }
.landing-btn-secondary { background:#fff; color:var(--auth-text); border:1.5px solid var(--auth-border); }
.landing-btn-secondary:hover { border-color:var(--auth-gold); color:var(--auth-gold); }
@media (max-width:900px) {
  .auth-screen.auth-screen-landing { display:flex; padding-top:44px; }
  .auth-hero.auth-hero-standalone { margin:0 auto; }
  .auth-hero-standalone .auth-features { grid-template-columns:repeat(2,1fr); text-align:left; }
}
@media (max-width:520px) {
  .auth-screen.auth-screen-landing { padding:32px 20px 56px; }
  .auth-hero-standalone .auth-features { display:grid; }
  .landing-actions { max-width:none; }
}

/* Painel de login embutido na home (só existe no DOM, visibilidade por breakpoint) */
.landing-desktop-form { display:none; }

/* ---------- Desktop (≥901px): a própria home vira o combo hero + formulário
   lado a lado, igual ao design original — sem precisar clicar em "Entrar". ---------- */
@media (min-width:901px) {
  .auth-screen.auth-screen-landing { gap:clamp(34px,6vw,90px); padding:52px max(24px,5vw) 110px; }
  .auth-hero.auth-hero-standalone { text-align:left; margin:0; width:min(620px,52vw); }
  .auth-hero-standalone .auth-brand { justify-content:flex-start; }
  .auth-hero-standalone h1,
  .auth-hero-standalone > p { margin-left:0; margin-right:0; }
  .landing-actions { display:none; }
  .landing-desktop-form { display:block; }
}

.pwa-install { position:fixed; right:18px; bottom:70px; z-index:10; width:min(430px,calc(100vw - 32px)); display:grid; grid-template-columns:48px 1fr auto auto; align-items:center; gap:12px; padding:13px; border:1px solid rgba(139,120,255,.35); border-radius:16px; background:#080d24; color:#fff; box-shadow:0 22px 60px -22px rgba(8,13,36,.8); }
.pwa-install img { border-radius:12px; }.pwa-install strong,.pwa-install span { display:block; }.pwa-install strong { font-size:13px; }.pwa-install span { margin-top:3px;color:#b8bdd3;font-size:11px;line-height:1.35; }.pwa-install-action { padding:9px 13px;border:0;border-radius:9px;background:#5b35f5;color:#fff;font-weight:700;cursor:pointer; }.pwa-dismiss { width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#aeb3c9;font-size:20px;cursor:pointer; }
@media (max-width:900px) { .auth-screen { display:block; padding-top:28px; }.auth-hero { width:100%; max-width:620px; margin:0 auto 28px; }.auth-brand { margin-bottom:24px; }.auth-hero h1 { font-size:clamp(38px,10vw,55px); }.auth-features { grid-template-columns:repeat(2,1fr); }.auth-box { margin:0 auto; } }
@media (max-width:520px) { .auth-screen { padding:20px 16px 150px; }.auth-brand img { width:44px;height:44px; }.auth-brand strong { font-size:24px; }.auth-hero h1 { font-size:38px; }.auth-hero>p { font-size:14px; }.auth-features { display:none; }.auth-box { padding:28px 20px; }.auth-page-footer { position:absolute; }.pwa-install { right:12px;bottom:92px;grid-template-columns:42px 1fr auto; }.pwa-install img { width:42px;height:42px; }.pwa-install-action { grid-column:2;justify-self:start; }.pwa-dismiss { grid-column:3;grid-row:1; } }