/* DOM Forms, sistema de design (IDV DOM) */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #0e1213;
  --bg-2: #0a0e0f;
  --panel: #161c1d;
  --card: #1a2122;
  --card-hover: #1f2829;
  --ink: #f2f6f5;
  --mut: #9fb0ae;
  --faint: #6b7b79;
  --teal: #2BD9C7;
  --teal-ink: #06201d;
  --teal-soft: rgba(43, 217, 199, 0.12);
  --teal-line: rgba(43, 217, 199, 0.34);
  --bordo: #ef5568;
  --bordo-soft: rgba(239, 85, 104, 0.12);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.06);
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --disp: 'Clash Display', system-ui, sans-serif;
  --body: 'Satoshi', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; }
body {
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(43, 217, 199, 0.10), transparent 60%),
    radial-gradient(900px 520px at 0% 108%, rgba(43, 217, 199, 0.05), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--disp); font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; margin: 0; }
a { color: var(--teal); text-decoration: none; }
.mono { font-family: var(--mono); }
.mut { color: var(--mut); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }

/* Layout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 12px; }
.marca .simbolo { width: 34px; height: 34px; }
.marca .nome { font-family: var(--disp); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.marca .nome b { color: var(--teal); font-weight: 700; }

/* Cartao */
.card {
  background: linear-gradient(180deg, var(--card), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* Botoes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 700; font-size: 15px;
  padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), opacity .2s;
  text-decoration: none; line-height: 1;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--teal); color: var(--teal-ink); }
.btn-primary:hover { background: #34f0dc; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal-line); background: var(--teal-soft); }
.btn-full { width: 100%; }
.btn-perigo { color: var(--mut); }
.btn-perigo:hover { color: var(--bordo); border-color: var(--bordo); background: var(--bordo-soft); }

/* Campos */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 13px; color: var(--mut); margin-bottom: 7px; font-weight: 500; }
.input {
  width: 100%; padding: 13px 15px; font-size: 16px; font-family: var(--body);
  color: var(--ink); background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line); border-radius: var(--r); outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--teal-line); box-shadow: 0 0 0 4px var(--teal-soft); background: rgba(0, 0, 0, 0.36); }

/* Avisos */
.alerta { padding: 11px 14px; border-radius: var(--r); font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.alerta-erro { background: var(--bordo-soft); border-color: var(--bordo); color: #ffd8dd; }

/* Toast (compartilhado) */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; }
.toast { background: var(--card); border: 1px solid var(--line); color: var(--ink); padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow); animation: toast-entra .3s var(--ease) both; display: flex; align-items: center; gap: 10px; }
.toast.ok { border-color: var(--teal-line); } .toast.ok::before { content: '✓'; color: var(--teal); font-weight: 700; }
.toast.erro { border-color: var(--bordo); } .toast.erro::before { content: '!'; color: var(--bordo); font-weight: 700; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(10px); } }

/* Utilidades */
.stack { display: grid; gap: 14px; }
.muted-note { font-size: 12.5px; color: var(--faint); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }