:root{
  --navy:#001f3f;
  --navy2:#00162e;
  --green:#0d4d4d;
  --cream:#faf8f5;
}

.volunteer-page .vol-hero{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 55%, var(--green) 100%);
  border-bottom: 3px solid #1a5f5f;
}

.volunteer-page .shell{
  background:#fff;
  border:1px solid rgba(0,31,63,0.12);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.06);
}

.volunteer-page .soft{
  background: rgba(248,250,252,0.9);
  border: 1px solid rgba(0,31,63,0.10);
  border-radius: 14px;
}

.volunteer-page .kpi{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.volunteer-page .kpi .ic{
  width:44px;
  height:44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(13,77,77,0.12);
  border: 1px solid rgba(13,77,77,0.22);
  color: var(--green);
  flex: 0 0 auto;
}

.volunteer-page .kpi h6{
  margin:0;
  font-weight: 900;
  color: var(--navy);
}

.volunteer-page .kpi p{
  margin:0;
  color:#475569;
}

.volunteer-page .btn-primary{
  background: linear-gradient(135deg, var(--green), #1a5f5f);
  border: none;
  font-weight: 900;
  border-radius: 12px;
}

.volunteer-page .status-card{
  border-radius: 16px;
  border: 1px solid rgba(0,31,63,0.12);
  background: #fff;
  overflow:hidden;
}

.volunteer-page .status-head{
  background: rgba(0,31,63,0.04);
  padding: 14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.volunteer-page .status-body{
  padding: 16px;
}