/*
 * Wooshin Tutor profile reference layer.
 * Load after tutor-redesign.css, campus-design.css, and ui-polish.css.
 * This file intentionally changes presentation only; routes and controls stay intact.
 */

.profile-page,
.profile-page *,
.activity-page,
.activity-page * {
  box-sizing: border-box;
}

.profile-page {
  --profile-ref-brand: var(--brand, #087454);
  --profile-ref-brand-strong: #066247;
  --profile-ref-brand-soft: #edf7f3;
  --profile-ref-ink: var(--text, #18211d);
  --profile-ref-muted: var(--text-2, #66736d);
  --profile-ref-line: var(--border, #dfe7e3);
  --profile-ref-surface: var(--surface, #fff);
  --profile-ref-subtle: var(--surface-subtle, #f5f7f6);
  width: min(100%, 760px);
  min-width: 0;
  margin-inline: auto;
  gap: 14px;
}

.profile-page > *,
.profile-page :where(.profile-cover-main, .profile-identity, .profile-navigation-shell, .profile-primary-tabs, .profile-overview-layout, .profile-overview-side, .profile-section-card) {
  min-width: 0;
  max-width: 100%;
}

/* Identity: one quiet header instead of a card nested inside another card. */
.profile-page > .profile-cover {
  display: block;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--profile-ref-line);
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.profile-page > .profile-cover::before,
.profile-page > .profile-cover::after,
.profile-page .profile-cover-main::before,
.profile-page .profile-cover-main::after {
  display: none !important;
}

.profile-page .profile-cover-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: visible;
  border: 0;
  background: transparent;
  padding: 18px 4px 16px;
}

.profile-page .profile-identity {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.profile-page .profile-identity .avatar,
.profile-page .profile-cover .avatar,
.profile-page .profile-avatar-xl {
  width: 62px;
  height: 62px;
  min-width: 62px;
  flex: 0 0 62px;
  border: 1px solid #d9e5df;
  border-radius: 50%;
  background: var(--profile-ref-brand-soft);
  box-shadow: none;
  object-fit: cover;
}

.profile-page .profile-identity .badges {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 4px;
}

.profile-page .profile-identity .badge {
  min-height: 22px;
  border: 0;
  border-radius: 999px;
  background: var(--profile-ref-brand-soft);
  padding: 2px 7px;
  color: var(--profile-ref-brand-strong);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
}

.profile-page .profile-identity h1 {
  margin: 0;
  color: var(--profile-ref-ink);
  font-size: 23px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.profile-page .profile-identity p {
  margin: 4px 0 0;
  color: var(--profile-ref-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.profile-page .profile-identity .meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
  color: var(--profile-ref-muted);
  font-size: 12px;
  line-height: 1.4;
}

.profile-page .profile-edit-button {
  align-self: start;
  justify-self: end;
  min-height: 34px;
  border: 1px solid #cfe1d8;
  border-radius: 8px;
  background: var(--profile-ref-surface);
  padding: 6px 10px;
  color: var(--profile-ref-brand-strong);
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
  white-space: nowrap;
}

.profile-page .profile-edit-button:hover,
.profile-page .profile-edit-button:focus-visible {
  border-color: var(--profile-ref-brand);
  background: var(--profile-ref-brand-soft);
}

.profile-page .profile-banner-design {
  min-height: 88px;
  max-height: 120px;
  overflow: hidden;
  border: 1px solid var(--profile-ref-line);
  border-radius: 12px;
  box-shadow: none;
}

.profile-page > .profile-cover.has-profile-banner {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--profile-ref-line);
  padding: 0;
}

.profile-page > .profile-cover.has-profile-banner .profile-cover-main {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px 4px;
}

/* Three current values and a future fourth value share the width automatically. */
.profile-page .profile-stat-grid {
  display: grid;
  width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--profile-ref-line);
  border-radius: 0;
  background: transparent;
}

.profile-page .profile-stat-grid > div {
  display: grid;
  min-width: 0;
  min-height: 66px;
  place-content: center;
  justify-items: center;
  gap: 4px;
  border: 0;
  border-right: 1px solid var(--profile-ref-line);
  border-radius: 0;
  background: transparent;
  padding: 9px 6px;
  text-align: center;
}

.profile-page .profile-stat-grid > div:last-child {
  border-right: 0;
}

.profile-page .profile-stat-grid strong {
  max-width: 100%;
  color: var(--profile-ref-ink);
  font-size: 18px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profile-page .profile-stat-grid span {
  width: auto;
  color: var(--profile-ref-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

/* Navigation: compact account rows, while every existing destination remains available. */
.profile-page .profile-navigation-shell {
  position: relative;
  z-index: 6;
  display: block;
  overflow: visible;
  border: 1px solid var(--profile-ref-line);
  border-radius: 12px;
  background: var(--profile-ref-surface);
  padding: 0 14px;
  box-shadow: none;
}

.profile-page .profile-primary-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.profile-page .profile-primary-tabs button,
.profile-page .profile-more-menu > summary {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  align-items: center;
  justify-content: stretch;
  gap: 11px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--profile-ref-line);
  border-radius: 0;
  background: transparent;
  padding: 8px 2px;
  color: var(--profile-ref-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  list-style: none;
  box-shadow: none;
}

.profile-page .profile-primary-tabs button::after,
.profile-page .profile-more-menu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  justify-self: end;
  border-top: 1.5px solid #8b9891;
  border-right: 1.5px solid #8b9891;
  transform: rotate(45deg);
}

.profile-page .profile-primary-tabs button:last-child {
  border-bottom: 1px solid var(--profile-ref-line);
}

.profile-page .profile-more-menu > summary {
  cursor: pointer;
}

.profile-page .profile-more-menu > summary::-webkit-details-marker {
  display: none;
}

.profile-page .profile-primary-tabs button > .icon,
.profile-page .profile-more-menu > summary > .icon {
  width: 20px;
  height: 20px;
  color: #66736d;
  stroke-width: 1.8;
}

.profile-page .profile-primary-tabs button > span,
.profile-page .profile-more-menu > summary > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .profile-primary-tabs button:hover,
.profile-page .profile-more-menu > summary:hover {
  background: transparent;
  color: var(--profile-ref-brand);
}

.profile-page .profile-primary-tabs button.active,
.profile-page .profile-more-menu.active > summary,
.profile-page .profile-more-menu[open] > summary {
  background: transparent;
  color: var(--profile-ref-brand-strong);
  box-shadow: none;
}

.profile-page .profile-primary-tabs button.active > .icon,
.profile-page .profile-more-menu.active > summary > .icon,
.profile-page .profile-more-menu[open] > summary > .icon {
  color: var(--profile-ref-brand);
}

.profile-page .profile-more-menu {
  position: relative;
  display: block;
  min-width: 0;
}

.profile-page .profile-more-popover {
  position: absolute;
  z-index: 1301;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(360px, calc(100vw - 28px));
  max-height: min(620px, calc(100dvh - 110px));
  overflow: auto;
  gap: 0;
  border: 1px solid var(--profile-ref-line);
  border-radius: 12px;
  background: var(--profile-ref-surface);
  padding: 10px 14px;
  box-shadow: 0 14px 34px rgb(24 33 29 / 14%);
  overscroll-behavior: contain;
}

.profile-page .profile-more-menu[open] > .profile-more-backdrop {
  z-index: 1290;
}

.profile-page .profile-more-sheet-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 10px;
}

.profile-page .profile-more-sheet-head > div {
  min-width: 0;
}

.profile-page .profile-more-sheet-head strong,
.profile-page .profile-more-sheet-head span {
  display: block;
  overflow-wrap: anywhere;
}

.profile-page .profile-more-sheet-head strong {
  color: var(--profile-ref-ink);
  font-size: 16px;
}

.profile-page .profile-more-sheet-head span {
  margin-top: 2px;
  color: var(--profile-ref-muted);
  font-size: 11px;
}

.profile-page .profile-more-group {
  display: grid;
  gap: 0;
  padding: 5px 0;
}

.profile-page .profile-more-group + .profile-more-group {
  border-top: 1px solid var(--profile-ref-line);
}

.profile-page .profile-more-group > strong {
  padding: 7px 2px 5px;
  color: var(--profile-ref-muted);
  font-size: 11px;
  font-weight: 600;
}

.profile-page .profile-more-group > div {
  display: grid;
  gap: 0;
}

.profile-page .profile-more-group button {
  display: grid;
  min-width: 0;
  min-height: 46px;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 7px 4px;
  color: var(--profile-ref-ink);
  font-size: 13px;
  text-align: left;
}

.profile-page .profile-more-group button:hover,
.profile-page .profile-more-group button.active,
.profile-page .profile-more-group button:focus-visible {
  background: var(--profile-ref-brand-soft);
  color: var(--profile-ref-brand-strong);
}

/* Overview content stays useful but no longer competes with the identity and menu. */
.profile-page .profile-overview-stack,
.profile-page .profile-overview-layout,
.profile-page .profile-overview-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.profile-page .profile-section-card {
  overflow: hidden;
  border: 1px solid var(--profile-ref-line);
  border-radius: 12px;
  background: var(--profile-ref-surface);
  padding: 16px;
  box-shadow: none;
}

.profile-page .profile-section-card .workspace-section-head {
  min-width: 0;
  margin-bottom: 10px;
}

.profile-page .profile-section-card .workspace-section-head h2 {
  margin: 0;
  color: var(--profile-ref-ink);
  font-size: 17px;
  line-height: 1.35;
}

.profile-page .profile-section-card .workspace-section-head p {
  margin: 3px 0 0;
  color: var(--profile-ref-muted);
  font-size: 12px;
  line-height: 1.45;
}

.profile-page .profile-activity-list {
  display: grid;
  gap: 0;
}

.profile-page .profile-activity-row {
  display: grid;
  min-width: 0;
  min-height: 55px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-top: 1px solid var(--profile-ref-line);
  border-radius: 0;
  background: transparent;
  padding: 9px 0;
  color: var(--profile-ref-ink);
  text-align: left;
  box-shadow: none;
}

.profile-page .profile-activity-row:first-child {
  border-top: 0;
}

.profile-page .profile-activity-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: var(--profile-ref-brand-soft);
  color: var(--profile-ref-brand);
}

.profile-page .profile-activity-copy,
.profile-page .profile-activity-meta {
  min-width: 0;
}

.profile-page .profile-activity-copy strong,
.profile-page .profile-activity-copy small,
.profile-page .profile-activity-meta b,
.profile-page .profile-activity-meta small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .profile-activity-copy strong {
  font-size: 13px;
  font-weight: 650;
}

.profile-page .profile-activity-copy small,
.profile-page .profile-activity-meta {
  color: var(--profile-ref-muted);
  font-size: 11px;
}

.profile-page .profile-activity-meta {
  justify-items: end;
  text-align: right;
}

.profile-page .profile-achievement-art {
  width: 66px;
  min-width: 66px;
  height: 66px;
  object-fit: contain;
}

.profile-page .profile-shop-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--profile-ref-line);
  border-radius: 10px;
}

.profile-page .profile-shop-summary > div {
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--profile-ref-line);
  border-radius: 0;
  background: transparent;
  padding: 10px 6px;
  text-align: center;
}

.profile-page .profile-shop-summary > div:last-child {
  border-right: 0;
}

.profile-page .profile-shop-summary strong {
  font-size: 16px;
}

.profile-page .profile-shop-summary span {
  font-size: 10px;
}

/* Account rows, including logout, follow the same compact profile language. */
.profile-page .account-setting-links {
  overflow: hidden;
  border: 1px solid var(--profile-ref-line);
  border-radius: 12px;
  background: var(--profile-ref-surface);
}

.profile-page .account-setting-link {
  min-height: 54px;
  border: 0;
  border-bottom: 1px solid var(--profile-ref-line);
  border-radius: 0;
  background: transparent;
  padding: 9px 12px;
  box-shadow: none;
}

.profile-page .account-setting-link:last-child {
  border-bottom: 0;
}

.profile-page .account-logout-row {
  margin-top: 14px;
  border: 1px solid #f0d2cf;
  border-radius: 10px;
  background: #fff;
  color: #c23b34;
}

/* Activity summary: dense 2-up data on mobile, calm progress surface. */
.activity-page {
  width: min(100%, 760px);
  min-width: 0;
  margin-inline: auto;
  gap: 16px;
}

.activity-page > *,
.activity-page :where(.activity-overview-card, .activity-progress-panel, .activity-latest-achievement, .activity-stat-section, .activity-stat-grid, .activity-stat-card) {
  min-width: 0;
  max-width: 100%;
}

.activity-page > .workspace-section-head:first-child {
  margin-bottom: 0;
}

.activity-page > .workspace-section-head:first-child .eyebrow {
  color: var(--profile-ref-brand, #087454);
}

.activity-page .activity-overview-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(170px, .55fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border, #dfe7e3);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 0;
  box-shadow: none;
}

.activity-page .activity-level-mark {
  display: grid;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 118px;
  place-content: center;
  justify-items: center;
  gap: 1px;
  border: 0;
  border-right: 1px solid var(--border, #dfe7e3);
  border-radius: 0;
  background: var(--brand-soft, #edf7f3);
  color: var(--brand, #087454);
  box-shadow: none;
}

.activity-page .activity-level-mark > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.activity-page .activity-level-mark > strong {
  font-size: 29px;
  font-weight: 800;
  line-height: 1;
}

.activity-page .activity-level-mark > em {
  color: var(--text-2, #66736d);
  font-size: 11px;
  font-style: normal;
}

.activity-page .activity-progress-panel {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 18px;
}

.activity-page .activity-score-heading,
.activity-page .activity-progress-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.activity-page .activity-score-heading strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.activity-page .activity-live-state {
  min-height: 24px;
  border-radius: 999px;
  background: var(--brand-soft, #edf7f3);
  padding: 3px 8px;
  color: var(--brand, #087454);
  font-size: 10px;
}

.activity-page .level-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eeeb;
}

.activity-page .level-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand, #087454);
}

.activity-page .activity-progress-meta {
  color: var(--text-2, #66736d);
  font-size: 11px;
}

.activity-page .activity-latest-achievement {
  display: grid;
  align-content: center;
  gap: 8px;
  border-left: 1px solid var(--border, #dfe7e3);
  padding: 16px;
}

.activity-page .activity-latest-achievement > span {
  color: var(--text-2, #66736d);
  font-size: 10px;
  font-weight: 600;
}

.activity-page .activity-latest-trophy {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.activity-page .activity-latest-trophy .activity-trophy-art {
  width: 44px;
  height: 44px;
}

.activity-page .activity-latest-trophy strong,
.activity-page .activity-latest-trophy small,
.activity-page .activity-no-trophy strong,
.activity-page .activity-no-trophy span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-page .activity-latest-trophy strong,
.activity-page .activity-no-trophy strong {
  color: var(--text, #18211d);
  font-size: 12px;
}

.activity-page .activity-latest-trophy small,
.activity-page .activity-no-trophy span {
  margin-top: 2px;
  color: var(--text-2, #66736d);
  font-size: 10px;
}

.activity-page .activity-stat-section {
  overflow: hidden;
  border: 1px solid var(--border, #dfe7e3);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 16px;
  box-shadow: none;
}

.activity-page .activity-stat-head {
  margin-bottom: 10px;
}

.activity-page .activity-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border, #dfe7e3);
  border-radius: 10px;
}

.activity-page .activity-stat-card,
.activity-page .activity-stat-card:nth-child(4n),
.activity-page .activity-stat-card:nth-last-child(-n + 4) {
  display: grid;
  min-width: 0;
  min-height: 78px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-right: 1px solid var(--border, #dfe7e3);
  border-bottom: 1px solid var(--border, #dfe7e3);
  border-radius: 0;
  background: transparent;
  padding: 11px;
  box-shadow: none;
}

.activity-page .activity-stat-card:nth-child(4n) {
  border-right: 0;
}

.activity-page .activity-stat-card:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.activity-page .activity-stat-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--brand-soft, #edf7f3);
  color: var(--brand, #087454);
}

.activity-page .activity-stat-icon .icon {
  width: 16px;
  height: 16px;
}

.activity-page .activity-stat-card > div {
  min-width: 0;
}

.activity-page .activity-stat-card > div strong,
.activity-page .activity-stat-card > div span {
  display: block;
  max-width: 100%;
}

.activity-page .activity-stat-card > div strong {
  color: var(--text, #18211d);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.activity-page .activity-stat-card > div span {
  margin-top: 2px;
  color: var(--text-2, #66736d);
  font-size: 10px;
  line-height: 1.25;
}

@media (max-width: 700px) {
  .profile-page {
    gap: 12px;
  }

  .profile-page .profile-cover-main {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: 12px 2px 14px;
  }

  .profile-page .profile-identity {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 11px;
  }

  .profile-page .profile-identity .avatar,
  .profile-page .profile-cover .avatar,
  .profile-page .profile-avatar-xl {
    width: 54px;
    height: 54px;
    min-width: 54px;
    flex-basis: 54px;
  }

  .profile-page .profile-identity h1 {
    font-size: 20px;
  }

  .profile-page .profile-edit-button {
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .profile-page .profile-stat-grid > div {
    min-height: 60px;
    padding: 8px 4px;
  }

  .profile-page .profile-stat-grid strong {
    font-size: 17px;
  }

  .profile-page .profile-navigation-shell {
    grid-template-columns: none;
    padding: 0 12px;
  }

  .profile-page .profile-primary-tabs button,
  .profile-page .profile-more-menu > summary {
    min-height: 50px;
    flex-direction: initial;
    padding: 7px 2px;
    font-size: 13px;
  }

  .profile-page .profile-more-popover {
    position: fixed;
    z-index: 1301;
    top: auto;
    right: 10px;
    bottom: calc(var(--polish-mobile-tab-h, 60px) + env(safe-area-inset-bottom) + 8px);
    left: 10px;
    width: auto;
    max-height: min(72dvh, 560px);
    border-radius: 14px;
    padding: 12px 14px;
  }

  .profile-page .profile-more-menu[open] > .profile-more-backdrop {
    position: fixed;
    z-index: 1290;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: rgb(15 25 20 / 34%);
  }

  .profile-page .profile-section-card {
    padding: 14px;
  }

  .profile-page .profile-activity-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .profile-page .profile-activity-meta {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .activity-page .activity-overview-card {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .activity-page .activity-level-mark {
    min-height: 108px;
  }

  .activity-page .activity-progress-panel {
    padding: 14px;
  }

  .activity-page .activity-latest-achievement {
    grid-column: 1 / -1;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    border-top: 1px solid var(--border, #dfe7e3);
    border-left: 0;
    padding: 12px 14px;
  }

  .activity-page .activity-stat-section {
    padding: 14px;
  }

  .activity-page .activity-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-page .activity-stat-card,
  .activity-page .activity-stat-card:nth-child(4n),
  .activity-page .activity-stat-card:nth-last-child(-n + 4) {
    min-height: 72px;
    border-right: 1px solid var(--border, #dfe7e3);
    border-bottom: 1px solid var(--border, #dfe7e3);
    padding: 10px;
  }

  .activity-page .activity-stat-card:nth-child(2n) {
    border-right: 0;
  }

  .activity-page .activity-stat-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 380px) {
  .profile-page .profile-cover-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-page .profile-edit-button {
    position: absolute;
    top: 12px;
    right: 2px;
  }

  .profile-page .profile-identity > div:last-child {
    padding-right: 74px;
  }

  .profile-page .profile-identity .badges {
    padding-right: 0;
  }

  .profile-page .profile-stat-grid strong {
    font-size: 15px;
  }

  .profile-page .profile-stat-grid span {
    font-size: 9px;
  }

  .activity-page .activity-score-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .activity-page .activity-live-state {
    align-self: flex-start;
  }

  .activity-page .activity-stat-card {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    padding: 9px 7px;
  }

.activity-page .activity-stat-icon {
    width: 24px;
    height: 24px;
  }
}

/* Equipped banners use a clear foreground and the same art as a soft backdrop. */
.profile-page > .profile-cover.has-profile-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--profile-ref-line);
  border-radius: 12px;
  background: #eef3f0;
  padding: 0;
}

.profile-page > .profile-cover.has-profile-banner > .profile-equipped-banner-backdrop {
  position: absolute;
  inset: -36px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.profile-page .profile-equipped-banner-backdrop .profile-banner-design {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  filter: blur(30px) saturate(0.82);
  opacity: 0.62;
  transform: scale(1.18);
}

.profile-page .profile-equipped-banner-backdrop .profile-banner-design strong {
  display: none;
}

.profile-page > .profile-cover.has-profile-banner > .profile-equipped-banner-showcase {
  position: relative;
  z-index: 2;
  min-width: 0;
  margin: 12px 12px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(24, 54, 43, 0.16);
}

.profile-page .profile-equipped-banner-showcase .profile-banner-design {
  width: 100%;
  height: clamp(96px, 19vw, 150px);
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.profile-page > .profile-cover.has-profile-banner .profile-cover-main {
  position: relative;
  z-index: 2;
  margin: 10px 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.86);
  padding: 13px;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.profile-page > .profile-cover.has-profile-banner .profile-stat-grid {
  position: relative;
  z-index: 2;
  width: auto;
  margin: 0 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-top-color: var(--profile-ref-line);
  border-radius: 0 0 10px 10px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

@media (max-width: 700px) {
  .profile-page > .profile-cover.has-profile-banner > .profile-equipped-banner-showcase {
    margin: 8px 8px 0;
  }

  .profile-page .profile-equipped-banner-showcase .profile-banner-design {
    height: clamp(92px, 29vw, 120px);
  }

  .profile-page > .profile-cover.has-profile-banner .profile-cover-main {
    margin: 8px 8px 0;
    padding: 11px;
  }

  .profile-page > .profile-cover.has-profile-banner .profile-stat-grid {
    margin: 0 8px 8px;
  }
}

@media (min-width: 900px) {
  .profile-page .profile-overview-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    align-items: start;
  }

  .profile-page .profile-more-popover {
    right: -1px;
  }
}

@media (hover: none) {
  .profile-page .profile-primary-tabs button:hover,
  .profile-page .profile-more-menu > summary:hover,
  .profile-page .profile-more-group button:hover {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-page *,
  .activity-page * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}