* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f0f1a; color: #f0f0f8; min-height: 100vh; }

/* HEADER */
.header { background: #1a1a2e; border-bottom: 1px solid #2a2a3a; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }
.header h1 { font-size: 18px; font-weight: 600; }
.header-sub { font-size: 12px; color: #888; margin-top: 2px; }
.btn-add { background: #6c63ff; color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* METRICS */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px; }
.metric { background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 12px; padding: 16px; }
.metric-label { font-size: 12px; color: #888; margin-bottom: 6px; }
.metric-value { font-size: 28px; font-weight: 700; }
.metric-value.purple { color: #6c63ff; }
.metric-value.green  { color: #22cc88; }
.metric-value.amber  { color: #ffaa33; }
.metric-value.teal   { color: #00d4aa; }

/* CONTROLS */
.controls { padding: 0 20px 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search { background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 8px; padding: 9px 14px; color: #f0f0f8; font-size: 14px; width: 240px; }
.search:focus { outline: none; border-color: #6c63ff; }
.filter-sel { background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 8px; padding: 9px 14px; color: #f0f0f8; font-size: 13px; cursor: pointer; }

/* ── TABELA (desktop) ── */
.table-wrap { padding: 0 20px 30px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #1a1a2e; color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 14px; text-align: left; border-bottom: 1px solid #2a2a3a; }
td { padding: 11px 14px; border-bottom: 1px solid #1e1e2e; vertical-align: middle; }
tr:hover td { background: #1a1a2e88; }
tr.fechado td { background: #0d2018; }

/* ── CARDS (mobile) — ocultos no desktop ── */
.cards-wrap { display: none; padding: 0 12px 30px; }
.card { background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.card.fechado { border-color: #22cc88; background: #0d2018; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 8px; }
.card-nome { font-size: 15px; font-weight: 600; flex: 1; }
.card-body { display: flex; flex-direction: column; gap: 6px; }
.card-row { display: flex; justify-content: space-between; font-size: 13px; }
.card-key { color: #888; }
.card-val { font-weight: 500; text-align: right; }
.card-actions { display: flex; gap: 8px; margin-top: 12px; }
.card-btn { flex: 1; padding: 9px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; }
.card-btn-edit { background: #1e1e3a; color: #6c63ff; border: 1px solid #2a2a3a; }
.card-btn-zap  { background: #25d366; color: white; }

/* BADGES */
.badge { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.b-pendente    { background: #2a1f0a; color: #ffaa33; }
.b-contatado   { background: #0a1a2a; color: #66aaff; }
.b-interessado { background: #0a1f18; color: #22cc88; }
.b-proposta    { background: #1a0a2a; color: #a088ff; }
.b-fechado     { background: #0a2a18; color: #00d4aa; }
.b-semresposta { background: #1a1a1a; color: #888; }
.b-seminteresse{ background: #2a0a0a; color: #ff6677; }

/* MODAL */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 200; display: none; justify-content: center; align-items: center; padding: 20px; }
.overlay.open { display: flex; }
.modal { background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 16px; padding: 24px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal h2 { font-size: 17px; margin-bottom: 20px; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; color: #888; margin-bottom: 6px; }
.form-input, .form-select { width: 100%; background: #0f0f1a; border: 1px solid #2a2a3a; border-radius: 8px; padding: 10px 14px; color: #f0f0f8; font-size: 14px; }
.form-input:focus, .form-select:focus { outline: none; border-color: #6c63ff; }
.btn-primary { background: #6c63ff; color: white; border: none; border-radius: 8px; padding: 12px; width: 100%; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 6px; }
.btn-danger  { background: #cc2233; color: white; border: none; border-radius: 8px; padding: 10px; width: 100%; font-size: 13px; cursor: pointer; margin-top: 8px; }
.btn-ghost   { background: transparent; color: #888; border: 1px solid #2a2a3a; border-radius: 8px; padding: 10px; width: 100%; font-size: 13px; cursor: pointer; margin-top: 6px; }
.btn-zap     { background: #25d366; color: white; border: none; border-radius: 8px; padding: 10px; width: 100%; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.action-btn  { background: none; border: none; color: #6c63ff; cursor: pointer; font-size: 12px; text-decoration: underline; margin-right: 8px; }
.empty { text-align: center; padding: 40px; color: #888; }

/* ── RESPONSIVO ── */
@media(max-width:600px){
  .metrics   { grid-template-columns: repeat(2,1fr); padding: 12px; }
  .controls  { padding: 0 12px 12px; }
  .search    { width: 100%; }
  .header    { padding: 12px 16px; }

  /* esconde tabela, mostra cards */
  .table-wrap  { display: none; }
  .cards-wrap  { display: block; }
}