:root{
  --brand:#5b1b2a;
  --brand2:#8b2a3f;
  --bg:#0f0f12;
}
body{ background:#f6f6f8; }
.brand-nav{ background: linear-gradient(90deg,var(--brand),var(--brand2)); }
.brand-logo{ width:34px; height:34px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,.1); padding:4px; }
.logo-lg{ width:64px; height:64px; object-fit:contain; }
.btn-brand{ background: var(--brand); color:#fff; border:none; }
.btn-brand:hover{ background: var(--brand2); color:#fff; }
.kpi .kpi-label{ font-size:.85rem; color:#6c757d; }
.kpi .kpi-value{ font-size:1.6rem; font-weight:700; }

/* ===== Cards futuristas (Atalhos da Home) ===== */
.quick-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.quick-card{
  position:relative;
  display:block;
  padding: 16px 16px 14px 16px;
  border-radius: 18px;
  text-decoration:none;
  color:#1d1d22;
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(139,42,63,.15), transparent 45%),
    radial-gradient(700px 200px at 95% 10%, rgba(91,27,42,.18), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
  border: 1px solid rgba(91,27,42,.14);
  box-shadow: 0 10px 24px rgba(15,15,18,.08);
  backdrop-filter: blur(10px);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.quick-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(15,15,18,.12);
  border-color: rgba(139,42,63,.30);
  color:#1d1d22;
}

.quick-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 10px 20px rgba(91,27,42,.24);
}

.quick-title{
  margin-top: 10px;
  font-weight: 800;
  letter-spacing: .2px;
}

.quick-sub{
  margin-top: 2px;
  font-size: .9rem;
  color:#5b5b66;
}

.quick-badge{
  position:absolute;
  top: 12px;
  right: 12px;
  font-size: .75rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(91,27,42,.12);
  color: var(--brand);
  border: 1px solid rgba(91,27,42,.18);
}

@media (max-width: 576px){
  .quick-grid{ grid-template-columns: 1fr; }
}
