.gender-dashboard{
  width:100%;
  max-width:100%;
  margin:auto;
  padding:12px;
  box-sizing:border-box;
}

.gender-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.gender-card{
  border-radius:14px;
  padding:14px;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

.gender-card-one{
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
}

.gender-card-two{
  background:linear-gradient(135deg,#f5f3ff,#ede9fe);
}

.gender-heading{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
  color:#111827;
  text-align:center;
}

.gender-table{
  width:100%;
  border-collapse:collapse;
}

.gender-td{
  padding:9px 4px;
  border-bottom:1px solid rgba(255,255,255,0.7);
  font-size:14px;
  color:#334155;
  line-height:1.2;
}

.gender-table tbody tr:last-child .gender-td{
  border-bottom:none;
}

.gender-value{
  text-align:right;
  font-weight:700;
  color:#111827;
  white-space:nowrap;
}

/* desktop auto back to 2 column */
@media (min-width:768px){
  .gender-dashboard{
    max-width:1100px;
    padding:24px 16px;
  }

  .gender-grid{
    grid-template-columns:repeat(2,1fr);
    gap:22px;
  }

  .gender-card{
    border-radius:18px;
    padding:18px 20px;
  }

  .gender-heading{
    font-size:22px;
    margin-bottom:10px;
  }

  .gender-td{
    padding:10px 8px;
    font-size:15px;
  }
}