/* ===== Botões ===== */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--border); font-weight:700; text-decoration:none }
.btn-primary{ background:var(--brand); color:#0b0f14; border-color:transparent }
.btn-primary:hover{ background:var(--brand-ink) }
.btn-outline{ background:var(--panel); color:var(--text) }
.btn-outline:hover{ background:#0f1622 }

/* ===== Cards / Tabela / KPI ===== */
.card{ border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text) }
.table{ width:100%; border-collapse:collapse }
.table th,.table td{ padding:10px; border-bottom:1px solid var(--border); color:var(--text) }
.kpi{ border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--panel) }
.kpi span{ color:var(--muted) } .kpi strong{ font-size:20px; display:block }

/* ===== Modal (bottom-sheet mobile, central desktop) ===== */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:flex-end; justify-content:center; z-index:200;
}
.modal[aria-hidden="false"]{ display:flex }
.modal-card{
  width:min(720px, 96vw); background:var(--panel); border:1px solid var(--border);
  border-radius:16px 16px 0 0; box-shadow:0 12px 40px rgba(0,0,0,.35); padding:12px 12px 16px;
}
@media (min-width:720px){
  .modal{ align-items:center }
  .modal-card{ border-radius:16px }
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:8px; border-bottom:1px dashed var(--border);
}
.modal-head .title{ font-size:1.25rem; font-weight:800 }
.modal-head .close{
  background:transparent; border:0; color:var(--text);
  width:34px; height:34px; border-radius:8px; cursor:pointer;
}
.modal-head .close:hover{ background:#0f1622 }
.modal-sub{ color:var(--muted); margin:8px 0 12px }