/* ============================================================
   Charlie — Design System
   Identidade: cream + ink + petróleo. Estilo industrial/oficina.
   Tom: irmão mais velho/mentor. Manual de manutenção da própria vida.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Cores base (cream/light V7 Industrial) */
  --bg:        #F0EEE8;  /* cream warm — papel/parede de oficina */
  --sf:        #FFFFFF;  /* surface card */
  --sf2:       #E2E0D9;  /* surface input/hover */
  --bd:        #CCC9C0;  /* bordas */
  --bd-soft:   rgba(28,42,58,0.06);

  /* Texto (ink coffee + ink secundário) */
  --t1:        #1A2233;  /* texto principal — ink navy */
  --t2:        #324158;
  --t3:        #6B7585;
  --t4:        #A4ACB8;

  /* Acentos (petróleo / navy mecânico) */
  --gold:      #2A3F5F;  /* primary action */
  --gold-d:    #1B2D45;
  --gold-l:    #3F567A;
  --gdim:      rgba(42,63,95,0.10);
  --gdim-2:    rgba(42,63,95,0.18);

  /* Status */
  --grn:       #2A8C5A;
  --red:       #B33A3A;
  --red-muted: rgba(179,58,58,0.7);
  --yel:       #B07F2A;

  /* Geometria — bordas pequenas (industrial) */
  --r:         4px;
  --r-sm:      3px;
  --r-lg:      6px;
  --r-xl:      8px;
  --r-pill:    999px;

  /* Sombras */
  --sh-card:    0 4px 20px rgba(28,42,58,0.06);
  --sh-gold:    0 0 30px rgba(42,63,95,0.18);
  --sh-modal:   0 20px 60px rgba(28,42,58,0.20);
  --sh-press:   0 2px 0 var(--gold-d);

  /* Tipografia */
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
}

/* ── Background grain industrial ──────────────────────────── */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(42,63,95,0.04) 1px, transparent 1px),
    radial-gradient(rgba(42,63,95,0.03) 1px, transparent 1px);
  background-size: 16px 16px, 8px 8px;
  background-position: 0 0, 4px 4px;
}

/* ── Reset + base ──────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Tipografia ────────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--t1); font-weight: 800; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
a  { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-l); text-decoration: underline; }

.gold       { color: var(--gold); }
.muted      { color: var(--t3); }
.gradient-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-l) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Containers ────────────────────────────────────────────── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 16px 18px;
}
.card-tap { cursor: pointer; transition: border-color 0.2s; }
.card-tap:active { border-color: var(--gold); }
.card-featured {
  border-color: var(--gold);
  box-shadow: var(--sh-gold);
}
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--bd);
  box-shadow: var(--sh-card);
}

/* ── Botões ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: none;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.05s;
  line-height: 1;
}
.btn:hover  { opacity: 0.92; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-gold     { background: var(--gold); color: #FFF; box-shadow: var(--sh-press); font-weight: 700; }
.btn-gold:hover { background: var(--gold-d); opacity: 1; }
.btn-gold:active { box-shadow: 0 1px 0 var(--gold-d); transform: translateY(1px); }

.btn-outline  { background: transparent; border: 1px solid var(--bd); color: var(--t1); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); opacity: 1; }

.btn-ghost    { background: transparent; color: var(--t3); }
.btn-ghost:hover { color: var(--t1); }

.btn-block    { width: 100%; padding: 14px 22px; }
.btn-sm       { padding: 8px 14px; font-size: 0.82rem; }

/* OAuth providers buttons */
.btn-oauth {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  color: var(--t1);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.15s, background 0.15s;
}
.btn-oauth:hover { border-color: var(--gold); background: var(--bg); }
.btn-oauth svg, .btn-oauth img { width: 18px; height: 18px; flex-shrink: 0; }
.btn-oauth-label { flex: 1; text-align: left; }

/* ── Inputs ────────────────────────────────────────────────── */
.input {
  width: 100%;
  padding: 12px 16px;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  color: var(--t1);
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--t4); }
.input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gdim);
}
.input-otp {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding: 16px;
}

label {
  display: block;
  font-size: 0.78rem;
  color: var(--t3);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Badges + Chips (estilo industrial — quadrados/mono) ───── */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--sf);
  border: 1px solid var(--gold);
  color: var(--gold);
}
.badge::before { content: '◆ '; }
.badge-grn { background: var(--sf); border-color: var(--grn); color: var(--grn); }
.badge-red { background: var(--sf); border-color: var(--red); color: var(--red); }
.badge-yel { background: var(--sf); border-color: var(--yel); color: var(--yel); }

/* ── Divisor com texto no meio ─────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--t3);
  font-size: 0.78rem;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* ── Mensagens ──────────────────────────────────────────────── */
.msg {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  margin-top: 12px;
}
.msg.hidden { display: none; }
.msg-ok    { background: rgba(46,204,113,0.10);  color: var(--grn); border: 1px solid rgba(46,204,113,0.20); }
.msg-err   { background: rgba(231,76,60,0.10);   color: var(--red); border: 1px solid rgba(231,76,60,0.20); }
.msg-info  { background: var(--gdim);            color: var(--gold); border: 1px solid var(--gdim-2); }

/* ── Layout helpers ────────────────────────────────────────── */
.row    { display: flex; align-items: center; gap: 8px; }
.col    { display: flex; flex-direction: column; gap: 8px; }
.spread { display: flex; justify-content: space-between; align-items: center; }
.center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }

.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}

/* ── Lang picker (compartilhado) ───────────────────────────── */
.lang-picker { position: relative; display: inline-flex; align-items: center; }
.lang-picker .lang-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  background: var(--sf2);
  color: var(--t2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.lang-picker .lang-btn:hover { border-color: var(--gold); color: var(--gold); }
.lang-picker .lang-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-modal);
  overflow: hidden;
  min-width: 140px;
  z-index: 999;
}
.lang-picker .lang-menu.open { display: block; }
.lang-picker .lang-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 14px;
  border: none; background: none;
  color: var(--t2);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  font-family: inherit;
}
.lang-picker .lang-menu button:hover { background: var(--sf2); color: var(--gold); }

/* ── Topbar fixa (auth pages) ──────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  z-index: 50;
}
.topbar .logo {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--t1);
  letter-spacing: 0.02em;
}
.topbar .logo .gold { color: var(--gold); }

/* ── Animações ──────────────────────────────────────────────── */
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.fade-in { animation: fadeIn 0.5s ease-out forwards; }
.fade-up { animation: fadeInUp 0.5s ease-out forwards; }

/* ── Background orbs (subtle gold glow) ────────────────────── */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.bg-orb-gold { background: rgba(42, 63, 95, 0.08); }

/* ── Tipografia industrial — números/dados em mono ─────────── */
.mono { font-family: var(--font-mono); }
.section-label.mono-label {
  font-family: var(--font-mono); font-size: 0.65rem; padding: 4px 10px;
  background: var(--sf); border: 1px solid var(--gold); color: var(--gold);
  border-radius: var(--r-sm); letter-spacing: 0.18em;
}

/* ── Utilitários responsivos ───────────────────────────────── */
@media (max-width: 640px) {
  h1 { font-size: 1.4rem; }
  .wrap, .wrap-narrow { padding: 0 18px; }
}