.sp-page {
  --sp-ink:#133c39;
  --sp-green:#007f6b;
  --sp-gold:#edba50;
  display:grid;
  gap:28px;
  max-width:1280px;
  margin:0 auto;
  padding:28px 20px 60px;
  color:var(--sp-ink)}
.sp-page * {
  box-sizing:border-box}
.sp-page h1,.sp-page h2,.sp-page h3,.sp-page p {
  margin-top:0}
.sp-page h1 {
  font-size:clamp(1.8rem,4vw,2.8rem);
  letter-spacing:-.04em;
  margin-bottom:12px}
.sp-page h2 {
  font-size:1.5rem}
.sp-page h3 {
  font-size:1.12rem}
.sp-page p {
  line-height:1.65;
  color:#56706b}
.sp-hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:36px;
  border-radius:24px;
  background:linear-gradient(130deg,#073c38,#006f60);
  color:white;
  position:relative;
  overflow:hidden}
.sp-hero p,.sp-hero .sp-eyebrow {
  color:#cfede5}
.sp-hero p {
  margin-bottom:0;
  max-width:650px}
.sp-eyebrow {
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:block;
  margin-bottom:8px}
.sp-brand {
  display:grid;
  gap:8px;
  text-align:center;
  font-weight:700}
.sp-brand b {
  display:grid;
  place-items:center;
  border:2px solid #edba50;
  border-radius:50%;
  font-size:2.1rem;
  width:88px;
  height:88px;
  color:#f9d583}
.sp-card {
  background:white;
  border:1px solid #dfebe6;
  border-radius:18px;
  padding:24px;
  box-shadow:0 6px 22px #0c493b06;
  min-width:0}
.sp-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px}
.sp-stats strong {
  display:block;
  font-size:clamp(1.8rem,3vw,2.5rem);
  margin:9px 0;
  line-height:1.2}
.sp-stats small {
  font-size:1rem}
.sp-stats p {
  font-size:.86rem;
  margin-bottom:0}
.sp-balance {
  background:#f1faf5;
  border-color:#c5e8d8}
.sp-page progress {
  accent-color:var(--sp-green);
  width:100%;
  height:9px}
.sp-ranking-emblem {
  display:grid;
  place-items:center;
  flex:0 0 104px;
  height:104px;
  border:1px solid #edba5066;
  border-radius:30px;
  background:#ffffff0d;
  color:var(--sp-gold);
  font-size:60px;
  transform:rotate(-8deg)}
.sp-ranking-list {
  list-style:none;
  padding:0;
  margin:24px 0;
  display:grid;
  gap:12px}
.sp-ranking-row {
  display:grid;
  grid-template-columns:54px minmax(150px,1fr) minmax(100px,260px) 130px;
  align-items:center;
  gap:18px;
  padding:22px;
  border:1px solid #dce8e3;
  border-radius:18px;
  background:white}
.sp-ranking-top {
  background:linear-gradient(110deg,#fff8e7,white 65%);
  border-color:#ead8aa}
.sp-ranking-you {outline:2px solid var(--sp-green);outline-offset:2px}
.sp-ranking-position {font-size:1.65rem;font-weight:850;color:#6c817b}
.sp-ranking-top .sp-ranking-position {color:#936b19}
.sp-ranking-person {min-width:0}
.sp-ranking-person a {color:var(--sp-ink);font-size:1.1rem;font-weight:800;text-decoration:none;overflow-wrap:anywhere}
.sp-ranking-person a:hover {text-decoration:underline}
.sp-ranking-person small {display:block;margin-top:6px;color:#56706b;overflow-wrap:anywhere}
.sp-ranking-person .sp-tag {margin-left:8px}
.sp-ranking-medals {display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sp-ranking-medals img {object-fit:contain}
.sp-ranking-medals small {color:#6c817b;line-height:1.5}
.sp-ranking-xp {text-align:right;overflow-wrap:anywhere}
.sp-ranking-xp strong {font-size:1.6rem;display:block;letter-spacing:-.04em}
.sp-ranking-xp span {font-size:.75rem;font-weight:800;color:var(--sp-green)}
.sp-ranking-pagination {display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}
.sp-ranking-scopes {display:flex;flex-wrap:wrap;gap:10px}
.sp-monthly-note {border-left:4px solid var(--sp-gold);margin:16px 0 24px}
.sp-monthly-note p {margin:8px 0 0}
.sp-ranking-empty {text-align:center;padding:40px 24px}
.sp-ranking-empty > span {color:#b98822;font-size:48px}
@media(max-width:700px) {
  .sp-ranking-emblem {display:none}
  .sp-ranking-row {grid-template-columns:34px minmax(0,1fr) 82px;gap:12px;padding:18px 14px}
  .sp-ranking-position {font-size:1.2rem}
  .sp-ranking-medals {grid-column:2 / 4;grid-row:2}
  .sp-ranking-xp {grid-column:3;grid-row:1}
  .sp-ranking-xp strong {font-size:1.25rem}
}
.sp-program-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:16px 0 24px}
.sp-tabs {
  display:flex;
  gap:10px;
  flex-wrap:wrap}
.sp-tabs a,.sp-button {
  border-radius:10px;
  padding:10px 16px;
  font-weight:750;
  font-size:.88rem;
  text-decoration:none}
.sp-tabs a {
  color:var(--sp-green);
  background:#edf6f2}
.sp-button {
  border:1px solid var(--sp-green);
  background:var(--sp-green);
  color:white;
  cursor:pointer;
  display:inline-block;
  line-height:1.4}
.sp-button:disabled {
  opacity:.48;
  cursor:not-allowed}
.sp-secondary {
  color:var(--sp-green);
  background:white}
.sp-section-title {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:15px}
.sp-section-title h2 {
  margin-bottom:0}
.sp-section-title p {
  font-size:.86rem;
  max-width:320px;
  margin-bottom:0}
.sp-medals {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px}
.sp-medal {
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px}
.sp-medal img {
  object-fit:contain;
  max-width:100%}
.sp-medal.is-locked img {
  filter:grayscale(1);
  opacity:.36}
.sp-medal h3,.sp-medal p {
  margin:0}
.sp-medal p {
  font-size:.84rem}
.sp-medal small {
  font-size:.72rem;
  color:#69817a}
.sp-medal form {
  margin-top:auto}
.sp-tag {
  display:inline-block;
  padding:5px 10px;
  border-radius:30px;
  background:#e0f6e8;
  color:#18613d;
  font-size:.75rem;
  font-weight:750}
.sp-tag-muted {
  background:#eff2f1;
  color:#6f7e79}
.sp-rewards,.sp-redemptions {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:18px}
.sp-reward {
  display:flex;
  flex-direction:column;
  gap:10px}
.sp-reward>img {
  width:100%;
  height:200px;
  object-fit:contain;
  border-radius:12px;
  background:#f2f7f5}
.sp-reward p,.sp-reward h3 {
  margin:0}
.sp-reward form {
  margin-top:auto;
  display:grid;
  gap:12px}
.sp-price {
  font-size:1.6rem;
  color:var(--sp-green)}
.sp-page small {
  line-height:1.5}
.sp-page label {
  display:grid;
  gap:6px;
  font-size:.85rem;
  font-weight:700}
.sp-page input:not([type=checkbox]),.sp-page select,.sp-page textarea {
  font:inherit;
  border:1px solid #cbded5;
  border-radius:9px;
  padding:10px 12px;
  width:100%;
  min-width:0;
  background:white;
  color:var(--sp-ink)}
.sp-page textarea {
  min-height:80px}
.sp-page input[type=checkbox] {
  width:18px;
  height:18px;
  accent-color:var(--sp-green)}
.sp-code {
  display:block;
  font-size:1rem;
  color:#15483f;
  overflow-wrap:anywhere;
  padding:12px;
  background:#f0f6f3;
  margin-top:6px}
.sp-table-wrap {
  overflow:auto;
  border:1px solid #dfebe6;
  border-radius:14px;
  background:white}
.sp-page table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:.86rem}
.sp-page th,.sp-page td {
  padding:13px 16px;
  border-bottom:1px solid #edf2ef;
  vertical-align:top}
.sp-page th {
  background:#f1f7f3;
  color:#41665a;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.03em}
.sp-page tbody tr:last-child td {
  border:0}
.sp-notice {
  background:#e5f6ee;
  color:#165c43!important;
  border:1px solid #bde0cc;
  border-radius:12px;
  padding:15px 20px;
  margin:0}
.sp-error {
  background:#fff0ea;
  border-color:#f1c5b3;
  color:#883e22!important}
.sp-error:empty {
  display:none}
.sp-levels {
  display:grid;
  gap:9px;
  padding-left:25px}
.sp-levels li span {
  float:right;
  color:#638075}
.sp-form {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
  align-items:end}
.sp-form .sp-wide {
  grid-column:1/-1}
.sp-check {
  display:flex!important;
  align-items:center;
  gap:8px!important;
  min-height:42px}
.sp-admin-section {
  scroll-margin-top:30px}
.sp-admin-section>details {
  margin-bottom:12px}
.sp-page summary {
  font-weight:800;
  cursor:pointer;
  padding:4px 0}
.sp-admin-section summary {
  display:flex;
  align-items:center;
  gap:12px}
.sp-admin-section summary img {
  width:46px;
  height:54px;
  object-fit:contain}
.sp-badge-preview {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0}
.sp-admin-section summary .sp-badge-preview__ribbon {
  width:96px;
  height:32px}
.sp-admin-section summary>span:last-child {
  min-width:0}
.sp-admin-section details[open]>.sp-form {
  margin-top:20px}
.sp-page pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:.75rem;
  max-height:250px;
  overflow:auto}
.sp-page section[id] {
  scroll-margin-top:24px}
.sp-page a:focus-visible,.sp-page button:focus-visible,.sp-page input:focus-visible,.sp-page summary:focus-visible {
  outline:3px solid #e7b844;
  outline-offset:3px}
@media(max-width:740px) {
  .sp-page {
  padding:18px 12px 40px;
  gap:22px}
.sp-hero {
  padding:25px;
  align-items:start}
.sp-brand {
  display:none}
.sp-stats {
  grid-template-columns:1fr}
.sp-stats .sp-card {
  padding:20px}
.sp-section-title {
  display:block}
.sp-section-title p {
  margin-top:10px}
.sp-medals {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px}
.sp-medal {
  padding:16px 10px}
.sp-medal img {
  width:100px;
  height:118px}
.sp-medal p {
  font-size:.78rem}
.sp-medal .sp-button {
  font-size:.75rem;
  padding:8px}
.sp-rewards,.sp-redemptions {
  grid-template-columns:1fr}
.sp-form {
  grid-template-columns:1fr}
.sp-page th,.sp-page td {
  padding:12px;
  white-space:normal}
.sp-page section>h2 {
  font-size:1.3rem}
}

.sp-page>section,.sp-page>header,.sp-page>nav {
  min-width:0}
.sp-hero {
  flex-wrap:wrap}
.sp-hero>div {
  min-width:0}
.sp-admin-section summary {
  overflow-wrap:anywhere}
.sp-page code {
  overflow-wrap:anywhere}


.sp-xp-link{color:inherit;text-decoration:none;display:inline-block;border-radius:4px}.sp-xp-link:hover{text-decoration:underline}.sp-xp-link:focus-visible{outline:2px solid #19765b;outline-offset:4px}