.sp-page {
  --sp-ink:#133c39;
  --sp-green:#007f6b;
  --sp-gold:#edba50;
  display:grid;
  gap:28px;
  color:var(--sp-ink)}
.sp-page:not(.cb2-page-main) {
  max-width:1280px;
  margin:0 auto;
  padding:28px 20px 60px}
.sp-page * {
  box-sizing:border-box}
.sp-page h1,.sp-page h2,.sp-page h3,.sp-page p {
  margin-top:0}
.sp-page h1:where(:not(.hpj-page-head *)) {
  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 {gap:22px}
  .sp-page:not(.cb2-page-main) {padding:18px 12px 40px}
.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}

.sp-activity-explanation{font-size:.85rem;line-height:1.5;margin:.5rem 0 0;min-width:180px;max-width:620px;color:#526864}
.sp-activity-details > summary{display:flex;align-items:center;gap:10px;list-style:none}
.sp-activity-details > summary::-webkit-details-marker{display:none}
.sp-activity-details > summary strong{min-width:0;overflow-wrap:anywhere}
.sp-activity-details[open] > summary .hpj-details-card__chevron{transform:rotate(90deg)}

.sp-entry-expiry-mobile{display:none}
.sp-dashboard-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:6px;background:#e7f1ed;border:1px solid #d5e7df;border-radius:14px}
.sp-dashboard-tabs a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;background:transparent;line-height:1.35;padding:10px 12px}
.sp-dashboard-tabs a[aria-selected="true"],.sp-dashboard-tabs a[aria-current="page"]{background:var(--sp-green);color:white;box-shadow:0 2px 5px #133c391a}
.sp-dashboard-tabs a:focus-visible{outline:3px solid var(--sp-gold);outline-offset:2px}
[data-sp-panel][hidden]{display:none!important}
@media(max-width:950px){.sp-dashboard-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:550px){.sp-dashboard-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-dashboard-tabs.sp-period-tabs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px;margin:16px 0 24px}
@media(max-width:600px){.sp-expiry-column{display:none}.sp-entry-expiry-mobile{display:block;font-size:.75rem;line-height:1.4;margin-top:6px;color:#526864}}

/* Shared earning guide: separate the explanation, activities and bonus card. */
.sp-earning-guide {display:grid;gap:24px;min-width:0}
.sp-earning-intro p:last-child,.sp-earning-guide .sp-card p:last-child {margin-bottom:0}
.sp-earning-guide .sp-table-wrap {border-radius:18px;border:1px solid #dfebe6;background:white}
.sp-rules > h2 {margin-bottom:12px}
.sp-rules > .sp-earning-guide {margin-top:24px}
.sp-guide-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;margin:24px 0}
.sp-guide-actions .sp-button {display:inline-flex;align-items:center;justify-content:center;gap:12px;line-height:1.4;text-decoration:none}
.sp-rules > details summary {cursor:pointer;line-height:1.5}
.sp-rules > details[open] summary {margin-bottom:20px}
.sp-action-icon {width:20px;height:20px;flex:0 0 20px;vertical-align:middle}
.sp-ranking-person {display:flex;align-items:center;gap:12px}
.sp-ranking-identity {min-width:0}
.sp-ranking-avatar {display:grid;place-items:center;position:relative;flex:0 0 48px;width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid white;box-shadow:0 0 0 1px #dce8e3;background:#e1f0ea}
.sp-ranking-avatar .sp-ranking-initials {color:var(--sp-green);font-size:.95rem;font-weight:800;line-height:1}
.sp-ranking-avatar img {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-ranking-avatar img[hidden] {display:none}
@media(max-width:700px) {
 .sp-ranking-person {gap:8px;flex-wrap:wrap}
 .sp-ranking-avatar {flex-basis:40px;width:40px;height:40px}
 .sp-ranking-identity {flex:1 1 90px}
 .sp-earning-guide {gap:18px}
 .sp-guide-actions .sp-button {width:100%}
}

.sp-program-actions .sp-button {display:inline-flex;align-items:center;justify-content:center;gap:8px}

/* Administrative reward catalog. */
.sp-admin-rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;margin-bottom:18px;align-items:start}
.sp-admin-reward{min-width:0}
.sp-admin-reward-photo{display:block;width:100%;height:180px;object-fit:contain;border-radius:12px;background:#f4f8f6}
.sp-admin-reward-placeholder{display:grid;place-items:center;color:#526864}
.sp-admin-reward h3{margin:16px 0 8px;overflow-wrap:anywhere}
.sp-admin-reward .sp-form{grid-template-columns:minmax(0,1fr)}
[data-sp-pagination][hidden]{display:none!important}

/* Compact tabs in the program administration. */
.sp-page[data-sp-default-tab] .sp-dashboard-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;margin:12px 0 14px;border-radius:10px}
.sp-page[data-sp-default-tab] .sp-dashboard-tabs a{flex:0 0 auto;min-height:36px;padding:7px 12px;border-radius:7px;line-height:1.25}

.sp-reward-description p,.sp-reward-conditions{white-space:pre-line;overflow-wrap:anywhere}
.sp-reward-description p[data-collapsed="true"]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.sp-description-toggle{border:0;padding:4px 0;background:transparent;color:var(--sp-green);font:inherit;font-weight:750;cursor:pointer;text-decoration:underline}
.sp-description-toggle[hidden]{display:none}
.sp-description-toggle:focus-visible{outline:2px solid var(--sp-green);outline-offset:3px}

.sp-badge-artwork{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;min-width:0}
.sp-badge-artwork__item{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.sp-badge-artwork__item h3{margin:0}
.sp-badge-artwork__item label{width:100%}
.sp-badge-artwork__preview{width:100%;max-width:100%;overflow:auto;border:1px solid #d8e5df;border-radius:10px;background:#f4f8f6}
.sp-badge-artwork__preview img{display:block;max-width:none;height:auto}