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

:root {
  --background: #0e0f13;
  --foreground: #f2f0e9;
  --card: #16181f;
  --card-alt: #1c1f28;
  --border: #2b2e38;
  --muted-foreground: #9a9ba3;
  --primary: #d4af37;
  --primary-foreground: #16181f;
  --destructive: #e0554f;
  --success: #4caf78;
  --info: #4f9be0;
  --radius: 0.65rem;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.02em; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .container { padding: 0 2rem; } }

/* ---------- Header ---------- */
.topbar { border-bottom: 1px solid var(--border); background: var(--card); position: sticky; top: 0; z-index: 40; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; max-width: 1180px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.brand-mark { width: 2.2rem; height: 2.2rem; border-radius: 0.5rem; background: linear-gradient(135deg, var(--primary), #a9812a); display: flex; align-items: center; justify-content: center; color: #16181f; font-weight: 700; font-size: 1rem; }
.brand small { display: block; color: var(--muted-foreground); font-family: var(--font-body); font-size: 0.65rem; text-transform: none; letter-spacing: 0; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.nav-links a { color: var(--muted-foreground); padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a.active { color: var(--foreground); border-color: var(--primary); }
.nav-user { font-size: 0.8rem; color: var(--muted-foreground); display: flex; align-items: center; gap: 0.75rem; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: 0.4rem; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; border: 1px solid transparent; transition: opacity .15s; }
.btn:hover { opacity: 0.88; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-border { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-border:hover { border-color: var(--primary); color: var(--primary); opacity: 1; }
.btn-danger { background: transparent; border: none; color: var(--destructive); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; cursor: pointer; padding: 0.4rem 0.6rem; }
.btn-danger:hover { text-decoration: underline; }
.btn-link { color: var(--primary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
.btn-link:hover { text-decoration: underline; }
.btn-block { width: 100%; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.75rem; }

/* ---------- Formulários ---------- */
.field { margin-bottom: 1.1rem; }
.field-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); margin-bottom: 0.4rem; }
.input, select, textarea {
  width: 100%; padding: 0.7rem 0.9rem; border-radius: 0.4rem; border: 1px solid var(--border);
  background: var(--card-alt); color: var(--foreground); font-family: var(--font-body); font-size: 0.95rem;
}
.input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
.hint-text { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.35rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--muted-foreground); }

/* ---------- Cards / painéis ---------- */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.panel + .panel { margin-top: 1.25rem; }
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 26rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.stat-card .value { font-family: var(--font-display); font-size: 1.9rem; color: var(--primary); }
.stat-card .label { font-size: 0.78rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.25rem; }

/* ---------- Tabelas ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted-foreground); background: var(--card-alt); }
tr:last-child td { border-bottom: none; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; border: 1px solid var(--border); }
.badge-pendente, .badge-em_analise { color: #e0b84f; border-color: #e0b84f; }
.badge-aprovado, .badge-pago, .badge-ativo, .badge-ativa, .badge-quitada { color: var(--success); border-color: var(--success); }
.badge-reprovado, .badge-atrasado, .badge-bloqueado, .badge-cancelado, .badge-cancelada { color: var(--destructive); border-color: var(--destructive); }

/* ---------- Cartão virtual ---------- */
.credit-card { position: relative; width: 100%; max-width: 22rem; aspect-ratio: 1.586; border-radius: 1rem; padding: 1.5rem; color: #f2ead0; overflow: hidden; background: linear-gradient(135deg, #1c1f28 0%, #12131a 55%, #0b0c10 100%); border: 1px solid #33291a; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6); }
.credit-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(212,175,55,0.25), transparent 55%); }
.credit-card.blocked { filter: grayscale(1); opacity: 0.6; }
.credit-card-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.credit-card-brand { font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.credit-card-brand small { display: block; font-family: var(--font-body); font-size: 0.6rem; color: #cbbf94; letter-spacing: 0.1em; }
.credit-card-chip { width: 2.4rem; height: 1.8rem; border-radius: 0.3rem; background: linear-gradient(135deg, #d4af37, #8a6d1f); margin-top: 1.75rem; position: relative; z-index: 1; }
.credit-card-number { font-family: 'Oswald', monospace; font-size: 1.25rem; letter-spacing: 0.12em; margin-top: 1.25rem; position: relative; z-index: 1; }
.credit-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 1.25rem; position: relative; z-index: 1; }
.credit-card-name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.credit-card-expiry { font-size: 0.7rem; color: #cbbf94; text-align: right; }
.credit-card-expiry span { display: block; font-size: 0.6rem; letter-spacing: 0.08em; }

/* ---------- Limite disponível ---------- */
.limit-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.limit-bar-track { width: 100%; height: 0.55rem; border-radius: 999px; background: var(--card-alt); overflow: hidden; margin: 0.75rem 0; }
.limit-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #a9812a); border-radius: 999px; }
.limit-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted-foreground); }
.limit-row strong { color: var(--foreground); font-family: var(--font-display); font-size: 1.4rem; }

/* ---------- KYC: comparação de documentos ---------- */
.kyc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .kyc-grid { grid-template-columns: repeat(3, 1fr); } }
.kyc-doc { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card-alt); }
.kyc-doc img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.kyc-doc-label { padding: 0.6rem 0.8rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-foreground); }
.kyc-doc-empty { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); font-size: 0.8rem; }

/* ---------- Empty state / alerts ---------- */
.empty-box { text-align: center; padding: 3rem 1.5rem; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius); }
.alert { padding: 0.9rem 1.1rem; border-radius: 0.4rem; font-size: 0.88rem; margin-bottom: 1.25rem; border: 1px solid transparent; }
.alert-success { background: rgba(76,175,120,0.12); border-color: var(--success); color: var(--success); }
.alert-error { background: rgba(224,85,79,0.12); border-color: var(--destructive); color: var(--destructive); }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.72); padding: 1rem; }
.modal-box { width: 100%; max-width: 30rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); padding: 1.75rem; max-height: 90vh; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------- Progresso do cadastro (steps) ---------- */
.steps-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 2rem; }
.step-dot { width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; background: var(--card-alt); border: 1px solid var(--border); color: var(--muted-foreground); }
.step-dot.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.step-dot.done { background: var(--success); border-color: var(--success); color: #0e0f13; }
.step-line { flex: 1; height: 1px; background: var(--border); }

/* ---------- Landing pública ---------- */
.hero { padding: 5rem 0 4rem; text-align: center; }
.hero h1 { font-size: 2.75rem; text-transform: uppercase; }
.hero p { max-width: 34rem; margin: 1rem auto 0; color: var(--muted-foreground); }
.hero-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }

footer.site-footer { border-top: 1px solid var(--border); padding: 2rem 0; margin-top: 3rem; color: var(--muted-foreground); font-size: 0.8rem; text-align: center; }

@media (max-width: 640px) {
  .nav-links { display: none; }
}