:root {
  --ssf-primary: #2F7575;
  --ssf-secondary: #7BA2A1;
  --ssf-soft: #B4D3D3;
  --ssf-white: #FFFFFF;
  --ssf-text: #123333;
  --ssf-muted: #5F7777;
  --ssf-border: rgba(47, 117, 117, 0.18);
  --ssf-bg: #F6F8F8;
}

.ssf-rankings {
  direction: rtl;
  font-family: "Saudi", "Tajawal", "IBM Plex Sans Arabic", Arial, sans-serif;
  background: var(--ssf-bg);
  color: var(--ssf-text);
}

.ssf-rankings__hero {
  background: linear-gradient(135deg, var(--ssf-primary), #244f4f);
  color: var(--ssf-white);
  border-radius: 28px;
  padding: 42px;
  position: relative;
  overflow: hidden;
}

.ssf-rankings__hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border: 28px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.ssf-card {
  background: var(--ssf-white);
  border: 1px solid var(--ssf-border);
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(18, 51, 51, 0.07);
}

.ssf-btn,
.ssf-filter.is-active,
.ssf-rank-badge {
  background: var(--ssf-primary);
  color: var(--ssf-white);
}

.ssf-btn:hover {
  background: #244f4f;
}

.ssf-table th {
  background: rgba(180, 211, 211, 0.34);
  color: var(--ssf-primary);
}

.ssf-table td {
  border-bottom: 1px solid var(--ssf-border);
}

.ssf-muted {
  color: var(--ssf-muted);
}