/* Community foundation
   Public participation is intentionally opt-in. This first layer establishes
   the visual hierarchy without exposing account data or creating public state. */

.otl-community-content {
  display: grid;
  gap: 16px;
}

.otl-community-body {
  display: grid;
  gap: 16px;
}

.otl-community-body[hidden] {
  display: none !important;
}

.otl-community-access {
  margin: 0;
}

.otl-community-hero {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(250px, .8fr);
  gap: 22px;
  align-items: stretch;
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(129, 140, 248, .20);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 86% 14%,
      rgba(192, 132, 252, .15),
      transparent 27%
    ),
    radial-gradient(
      circle at 58% 100%,
      rgba(34, 211, 238, .065),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(30, 41, 59, .74),
      rgba(13, 20, 38, .88)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 14px 36px rgba(2, 6, 23, .20);
}

.otl-community-hero::before,
.otl-community-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(165, 180, 252, .08);
  border-radius: 999px;
}

.otl-community-hero::before {
  width: 210px;
  height: 210px;
  right: -75px;
  top: -82px;
}

.otl-community-hero::after {
  width: 125px;
  height: 125px;
  right: 54px;
  top: 28px;
}

.otl-community-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
}

.otl-community-kicker,
.otl-community-preview-label,
.otl-community-feature-meta {
  font-size: .64rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.otl-community-kicker {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 5px 8px;
  border: 1px solid rgba(165, 180, 252, .24);
  border-radius: 999px;
  color: #c7d2fe;
  background: rgba(79, 70, 229, .10);
}

.otl-community-hero h3 {
  max-width: 640px;
  margin: 0;
  color: #f8fafc;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 880;
  line-height: 1.06;
  letter-spacing: -.035em;
}

.otl-community-hero-copy > p:not(.otl-community-privacy-copy) {
  max-width: 650px;
  margin: 13px 0 0;
  color: #aab8ca;
  font-size: .89rem;
  line-height: 1.58;
}

.otl-community-privacy-copy {
  max-width: 640px;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(148, 163, 184, .11);
  color: #7f90a6;
  font-size: .73rem;
  line-height: 1.48;
}

.otl-community-profile-preview {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(196, 181, 253, .20);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(129, 140, 248, .10),
      transparent 38%
    ),
    rgba(7, 12, 24, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 14px 28px rgba(2, 6, 23, .24);
}

.otl-community-profile-topline,
.otl-community-palette {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.otl-community-preview-label {
  color: #7f90a6;
}

.otl-community-privacy-pill {
  display: inline-flex;
  padding: 4px 7px;
  border: 1px solid rgba(52, 211, 153, .22);
  border-radius: 999px;
  color: #86efac;
  background: rgba(16, 185, 129, .07);
  font-size: .57rem;
  font-weight: 850;
  letter-spacing: .07em;
  white-space: nowrap;
}

.otl-community-preview-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 11px 0;
}

.otl-community-preview-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(165, 180, 252, .28);
  border-radius: 50%;
  color: #e0e7ff;
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, .10),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(99, 102, 241, .34),
      rgba(76, 29, 149, .26)
    );
  box-shadow:
    0 0 24px rgba(99, 102, 241, .12);
  font-size: 1.15rem;
  font-weight: 900;
}

.otl-community-preview-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.otl-community-preview-username {
  color: #e5e7eb;
  font-size: 1.06rem;
  font-weight: 850;
  letter-spacing: -.015em;
}

.otl-community-preview-title {
  color: #aab8ca;
  font-size: .78rem;
  font-weight: 700;
}

.otl-community-palette {
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .10);
  color: #718198;
  font-size: .66rem;
  font-weight: 700;
}

.otl-community-preview-theme-value {
  color: #aab8ca;
  font-weight: 820;
}

.otl-community-preview-username[data-theme="bronze"],
.otl-community-preview-theme-value[data-theme="bronze"] {
  color: #c88755;
}

.otl-community-preview-username[data-theme="silver"],
.otl-community-preview-theme-value[data-theme="silver"] {
  color: #d2d7de;
}

.otl-community-preview-username[data-theme="gold"],
.otl-community-preview-theme-value[data-theme="gold"] {
  color: #e4bd4f;
  text-shadow: 0 0 12px rgba(228, 189, 79, .13);
}

.otl-community-preview-username[data-theme="diamond"],
.otl-community-preview-theme-value[data-theme="diamond"] {
  color: #d9f5ff;
  text-shadow: 0 0 12px rgba(125, 211, 252, .16);
}

.otl-community-preview-username[data-theme="sapphire"],
.otl-community-preview-theme-value[data-theme="sapphire"] {
  color: #8db8ff;
}

.otl-community-preview-username[data-theme="emerald"],
.otl-community-preview-theme-value[data-theme="emerald"] {
  color: #79e0ae;
}

.otl-community-preview-username[data-theme="amethyst"],
.otl-community-preview-theme-value[data-theme="amethyst"] {
  color: #c5a3ff;
}

.otl-community-preview-username[data-theme="ruby"],
.otl-community-preview-theme-value[data-theme="ruby"] {
  color: #ff8f9d;
}

.otl-community-preview-username[data-theme="prismatic"],
.otl-community-preview-theme-value[data-theme="prismatic"] {
  color: transparent;
  background:
    linear-gradient(
      90deg,
      #f9a8d4,
      #c4b5fd,
      #7dd3fc,
      #86efac,
      #fde68a
    );
  -webkit-background-clip: text;
  background-clip: text;
}

.otl-community-preview-username[data-theme="spectral"],
.otl-community-preview-theme-value[data-theme="spectral"] {
  color: transparent;
  background:
    linear-gradient(
      90deg,
      #f8fafc,
      #a5f3fc,
      #c4b5fd,
      #f8fafc
    );
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(
      0 0 5px
      rgba(196, 181, 253, .16)
    );
}

.otl-community-participation {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(129, 140, 248, .16);
  background:
    linear-gradient(
      115deg,
      rgba(18, 27, 48, .76),
      rgba(8, 14, 27, .82)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

.otl-community-participation::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -72px;
  bottom: -92px;
  border: 1px solid rgba(129, 140, 248, .06);
  border-radius: 50%;
  pointer-events: none;
}

.otl-community-participation-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.otl-community-participation-heading-copy {
  min-width: 0;
}

.otl-community-participation-heading h4 {
  margin: 7px 0 0;
  color: #eef2ff;
  font-size: 1rem;
  font-weight: 840;
  line-height: 1.25;
  letter-spacing: -.012em;
}

.otl-community-membership-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  color: #a6b4c7;
  background: rgba(15, 23, 42, .58);
  font-size: .58rem;
  font-weight: 880;
  letter-spacing: .07em;
  white-space: nowrap;
}

.otl-community-membership-pill[data-state="private"] {
  border-color: rgba(52, 211, 153, .19);
  color: #86efac;
  background: rgba(16, 185, 129, .06);
}

.otl-community-membership-pill[data-state="member"] {
  border-color: rgba(129, 140, 248, .34);
  color: #c7d2fe;
  background: rgba(79, 70, 229, .14);
  box-shadow: 0 0 18px rgba(99, 102, 241, .08);
}

.otl-community-membership-pill[data-state="required"] {
  border-color: rgba(245, 158, 11, .26);
  color: #fcd34d;
  background: rgba(245, 158, 11, .07);
}

.otl-community-membership-pill[data-state="error"] {
  border-color: rgba(248, 113, 113, .26);
  color: #fca5a5;
  background: rgba(239, 68, 68, .07);
}

.otl-community-membership-pill[data-state="loading"],
.otl-community-membership-pill[data-state="signed-out"] {
  color: #94a3b8;
}

.otl-community-participation-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 9px 0 0;
  color: #8493a8;
  font-size: .75rem;
  line-height: 1.5;
}

.otl-community-public-profile-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  margin-top: 11px;
  color: #a5b4fc;
  font-size: .69rem;
  font-weight: 800;
  text-decoration: none;
}

.otl-community-public-profile-link[hidden] {
  display: none !important;
}

.otl-community-public-profile-link:hover {
  color: #c7d2fe;
  text-decoration: underline;
  text-underline-offset: 3px;
}


.otl-community-participation-gate {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .10);
}

.otl-community-primary-action,
.otl-community-secondary-action {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 820;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.otl-community-primary-action {
  border: 1px solid rgba(129, 140, 248, .38);
  color: #eef2ff;
  background:
    linear-gradient(
      135deg,
      rgba(79, 70, 229, .55),
      rgba(67, 56, 202, .42)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 7px 20px rgba(49, 46, 129, .14);
}

.otl-community-secondary-action {
  border: 1px solid rgba(148, 163, 184, .20);
  color: #9aa9bc;
  background: rgba(15, 23, 42, .46);
}

.otl-community-primary-action:disabled,
.otl-community-secondary-action:disabled,
.otl-community-setting select:disabled,
.otl-community-toggle input:disabled + .otl-community-toggle-track {
  opacity: .54;
  cursor: wait;
}

.otl-community-gate-note {
  color: #6f8096;
  font-size: .68rem;
  line-height: 1.45;
}

.otl-community-settings {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .10);
}

.otl-community-settings[hidden],
.otl-community-participation-gate[hidden] {
  display: none !important;
}

.otl-community-settings-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 5px;
  padding: 8px 2px 1px;
  border-top: 1px solid rgba(148, 163, 184, .075);
}

.otl-community-settings-subhead:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.otl-community-settings-subhead small {
  max-width: 520px;
  color: #69798f;
  font-size: .63rem;
  line-height: 1.42;
  text-align: right;
}

.otl-community-setting {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(145px, auto);
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(148, 163, 184, .10);
  border-radius: 12px;
  background: rgba(2, 6, 23, .20);
}

.otl-community-setting-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.otl-community-setting-copy strong {
  color: #dbe4f1;
  font-size: .77rem;
  font-weight: 800;
}

.otl-community-setting-copy small {
  color: #74849a;
  font-size: .66rem;
  line-height: 1.45;
}

.otl-community-setting select {
  min-width: 145px;
  min-height: 34px;
  padding: 6px 30px 6px 9px;
  border: 1px solid rgba(129, 140, 248, .20);
  border-radius: 9px;
  color: #dbeafe;
  background: rgba(15, 23, 42, .82);
  font: inherit;
  font-size: .7rem;
  font-weight: 760;
  cursor: pointer;
}

.otl-community-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-self: end;
}

.otl-community-toggle input {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 0 !important;

  opacity: 0 !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
  pointer-events: none;
}


.otl-community-toggle input::before,
.otl-community-toggle input::after {
  content: none !important;
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  border: 0 !important;
  background: none !important;
  box-shadow: none !important;

  -webkit-mask: none !important;
  mask: none !important;

  transform: none !important;
}

.otl-community-toggle-track {
  position: relative;
  display: block;
  width: 39px;
  height: 22px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 999px;
  background: rgba(30, 41, 59, .82);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

.otl-community-toggle-track::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.otl-community-toggle input:checked + .otl-community-toggle-track {
  border-color: rgba(129, 140, 248, .48);
  background: rgba(79, 70, 229, .32);
}

.otl-community-toggle input:checked + .otl-community-toggle-track::after {
  transform: translateX(17px);
  background: #c7d2fe;
}

.otl-community-toggle input:focus-visible + .otl-community-toggle-track {
  outline: 2px solid rgba(165, 180, 252, .72);
  outline-offset: 3px;
}

.otl-community-cosmetic-action {
  justify-self: end;
  margin-bottom: 4px;
}

.otl-community-settings-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
}

.otl-community-settings-message {
  position: relative;
  z-index: 1;
  min-height: 1.15em;
  margin: 10px 0 0;
  color: #718198;
  font-size: .67rem;
  line-height: 1.45;
}

.otl-community-settings-message[data-tone="good"] {
  color: #86efac;
}

.otl-community-settings-message[data-tone="bad"] {
  color: #fca5a5;
}

@media (hover: hover) {
  .otl-community-primary-action:not(:disabled):hover,
  .otl-community-secondary-action:not(:disabled):hover {
    transform: translateY(-1px);
  }

  .otl-community-primary-action:not(:disabled):hover {
    border-color: rgba(165, 180, 252, .56);
    background:
      linear-gradient(
        135deg,
        rgba(79, 70, 229, .68),
        rgba(67, 56, 202, .52)
      );
  }

  .otl-community-secondary-action:not(:disabled):hover {
    border-color: rgba(148, 163, 184, .32);
    color: #cbd5e1;
  }
}



.otl-community-trainings {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(129, 140, 248, .14);
  background:
    linear-gradient(
      135deg,
      rgba(13, 20, 36, .88),
      rgba(7, 12, 23, .92)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

.otl-community-trainings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.otl-community-trainings-header-copy {
  min-width: 0;
}

.otl-community-trainings-header h4 {
  margin: 7px 0 5px;
  color: #eef2ff;
  font-size: 1.08rem;
  font-weight: 880;
  letter-spacing: -.02em;
}

.otl-community-trainings-header p {
  max-width: 680px;
  margin: 0;
  color: #7e8da2;
  font-size: .72rem;
  line-height: 1.52;
}

.otl-community-training-count {
  display: grid;
  justify-items: end;
  min-width: 60px;
  line-height: 1;
}

.otl-community-training-count strong {
  color: #eef2ff;
  font-size: 1.22rem;
  font-weight: 950;
}

.otl-community-training-count span {
  margin-top: 4px;
  color: #65758a;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.otl-community-training-controls {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(130px, auto);
  gap: 8px;
  margin-top: 15px;
}

.otl-community-training-controls input,
.otl-community-training-controls select {
  min-height: 35px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 10px;
  color: #dce5f1;
  background: rgba(2, 6, 23, .34);
  font: inherit;
  font-size: .68rem;
}

.otl-community-training-controls input {
  padding: 7px 10px;
}

.otl-community-training-controls select {
  padding: 7px 30px 7px 9px;
  cursor: pointer;
}

.otl-community-training-controls input::placeholder {
  color: #627187;
}

.otl-community-training-controls input:focus,
.otl-community-training-controls select:focus {
  outline: 2px solid rgba(129, 140, 248, .34);
  outline-offset: 1px;
}

.otl-community-training-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.otl-community-training-grid:empty {
  display: none;
}

.otl-community-training-card {
  --otl-community-training-accent:
    129, 140, 248;

  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  min-height: 205px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(
    var(--otl-community-training-accent),
    .14
  );
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(
      150deg,
      rgba(
        var(--otl-community-training-accent),
        .055
      ),
      rgba(7, 12, 23, .78) 42%,
      rgba(4, 8, 17, .84)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .02);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.otl-community-training-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background:
    rgba(
      var(--otl-community-training-accent),
      .72
    );
}

.otl-community-training-card[data-accent="blue"] {
  --otl-community-training-accent:
    96, 165, 250;
}

.otl-community-training-card[data-accent="sky"] {
  --otl-community-training-accent:
    56, 189, 248;
}

.otl-community-training-card[data-accent="cyan"] {
  --otl-community-training-accent:
    34, 211, 238;
}

.otl-community-training-card[data-accent="teal"] {
  --otl-community-training-accent:
    45, 212, 191;
}

.otl-community-training-card[data-accent="emerald"] {
  --otl-community-training-accent:
    52, 211, 153;
}

.otl-community-training-card[data-accent="green"] {
  --otl-community-training-accent:
    34, 197, 94;
}

.otl-community-training-card[data-accent="mint"] {
  --otl-community-training-accent:
    110, 231, 183;
}

.otl-community-training-card[data-accent="lime"] {
  --otl-community-training-accent:
    163, 230, 53;
}

.otl-community-training-card[data-accent="yellow"] {
  --otl-community-training-accent:
    250, 204, 21;
}

.otl-community-training-card[data-accent="amber"] {
  --otl-community-training-accent:
    251, 191, 36;
}

.otl-community-training-card[data-accent="orange"] {
  --otl-community-training-accent:
    251, 146, 60;
}

.otl-community-training-card[data-accent="red"] {
  --otl-community-training-accent:
    239, 68, 68;
}

.otl-community-training-card[data-accent="rose"] {
  --otl-community-training-accent:
    251, 113, 133;
}

.otl-community-training-card[data-accent="pink"] {
  --otl-community-training-accent:
    244, 114, 182;
}

.otl-community-training-card[data-accent="fuchsia"] {
  --otl-community-training-accent:
    232, 121, 249;
}

.otl-community-training-card[data-accent="purple"] {
  --otl-community-training-accent:
    139, 92, 246;
}

.otl-community-training-card[data-accent="violet"] {
  --otl-community-training-accent:
    167, 139, 250;
}

.otl-community-training-card[data-accent="lavender"] {
  --otl-community-training-accent:
    196, 181, 253;
}

.otl-community-training-card[data-accent="slate"] {
  --otl-community-training-accent:
    148, 163, 184;
}

.otl-community-training-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.otl-community-training-card-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border: 1px solid rgba(
    var(--otl-community-training-accent),
    .22
  );
  border-radius: 8px;
  color:
    rgb(
      var(--otl-community-training-accent)
    );
  background:
    rgba(
      var(--otl-community-training-accent),
      .07
    );
  font-size: .73rem;
}

.otl-community-training-author {
  min-width: 0;
  overflow: hidden;
  color: #7b8da4;
  font-size: .6rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-community-training-premium {
  margin-left: auto;
  padding: 3px 6px;
  border: 1px solid rgba(196, 181, 253, .20);
  border-radius: 999px;
  color: #c4b5fd;
  background: rgba(91, 33, 182, .09);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.otl-community-training-name {
  overflow: hidden;
  color: #e9eff8;
  font-size: .82rem;
  font-weight: 860;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-community-training-note {
  display: -webkit-box;
  min-height: 2.9em;
  margin: 0;
  overflow: hidden;
  color: #75869c;
  font-size: .62rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.otl-community-training-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.otl-community-training-meta span {
  padding: 4px 6px;
  border: 1px solid rgba(148, 163, 184, .09);
  border-radius: 7px;
  color: #718299;
  background: rgba(2, 6, 23, .24);
  font-size: .51rem;
  font-weight: 730;
}

.otl-community-training-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid rgba(148, 163, 184, .065);
}

.otl-community-training-tag {
  max-width: 60%;
  overflow: hidden;
  color:
    rgb(
      var(--otl-community-training-accent)
    );
  font-size: .52rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-community-training-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.otl-community-training-report,
.otl-community-training-open {
  border: 0;
  padding: 0;
  color: #9daac0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .54rem;
  font-weight: 820;
  text-decoration: none;
  white-space: nowrap;
}

.otl-community-training-report {
  color: #687a91;
}

.otl-community-training-report:hover,
.otl-community-training-open:hover {
  color: #c5cfdd;
}

.otl-community-training-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin-top: 11px;
  padding: 28px 16px;
  border: 1px dashed rgba(129, 140, 248, .16);
  border-radius: 13px;
  text-align: center;
  background: rgba(2, 6, 23, .18);
}

.otl-community-training-empty[hidden] {
  display: none !important;
}

.otl-community-training-empty > span {
  color: #7c83e8;
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.otl-community-training-empty > strong {
  color: #e5ebf5;
  font-size: .81rem;
}

.otl-community-training-empty p {
  max-width: 500px;
  margin: 0;
  color: #687a91;
  font-size: .62rem;
  line-height: 1.48;
}

.otl-community-training-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, .07);
}

.otl-community-training-footer span {
  color: #5d6e84;
  font-size: .57rem;
  line-height: 1.45;
}

.otl-community-training-refresh {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 8px;
  color: #9caac0;
  background: rgba(15, 23, 42, .34);
  cursor: pointer;
  font: inherit;
  font-size: .58rem;
  font-weight: 820;
}

.otl-community-trainings[data-state="loading"]
  .otl-community-training-grid {
  opacity: .48;
}

.otl-community-trainings[data-state="error"] {
  border-color: rgba(248, 113, 113, .13);
}

@media (hover: hover) {
  .otl-community-training-card:hover {
    transform: translateY(-2px);
    border-color:
      rgba(
        var(--otl-community-training-accent),
        .28
      );
    background:
      linear-gradient(
        150deg,
        rgba(
          var(--otl-community-training-accent),
          .085
        ),
        rgba(10, 16, 29, .84) 44%,
        rgba(4, 8, 17, .88)
      );
  }

  .otl-community-training-refresh:hover {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .24);
  }
}


.otl-community-report-backdrop {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(9px);
}

.otl-community-report-dialog {
  width: min(520px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(129, 140, 248, .18);
  border-radius: 18px;
  color: #e5ebf5;
  background:
    linear-gradient(
      145deg,
      rgba(15, 23, 42, .98),
      rgba(5, 10, 20, .99)
    );
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(255, 255, 255, .03);
}

.otl-community-report-dialog h3 {
  margin: 0 0 14px;
  color: #f3f6fb;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}

.otl-community-report-form {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.otl-community-report-field {
  display: grid;
  gap: 6px;
}

.otl-community-report-field > span {
  color: #aeb9c8;
  font-size: .64rem;
  font-weight: 800;
}

.otl-community-report-field select,
.otl-community-report-field textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 10px;
  color: #dce5f1;
  background: rgba(2, 6, 23, .42);
  font: inherit;
  font-size: .7rem;
}

.otl-community-report-field select {
  min-height: 37px;
  padding: 7px 10px;
}

.otl-community-report-field textarea {
  min-height: 100px;
  resize: vertical;
  padding: 9px 10px;
  line-height: 1.5;
}

.otl-community-report-field select:focus,
.otl-community-report-field textarea:focus {
  outline: 2px solid rgba(129, 140, 248, .34);
  outline-offset: 1px;
}

.otl-community-report-counter {
  justify-self: end;
  color: #58697f;
  font-size: .54rem;
}

.otl-community-report-status {
  min-height: 1.2em;
  margin: 0;
  color: #7d8da2;
  font-size: .64rem;
  line-height: 1.45;
}

.otl-community-report-status.is-success {
  color: #86d7aa;
}

.otl-community-report-status.is-error {
  color: #f3a0a8;
}

.otl-community-report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.otl-community-report-actions button {
  min-height: 35px;
  padding: 7px 11px;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: .64rem;
  font-weight: 820;
}

.otl-community-report-actions button:disabled {
  opacity: .54;
  cursor: wait;
}

.otl-community-report-secondary {
  border: 1px solid rgba(148, 163, 184, .14);
  color: #a8b4c4;
  background: rgba(15, 23, 42, .42);
}

.otl-community-report-primary {
  border: 1px solid rgba(129, 140, 248, .34);
  color: #eef2ff;
  background:
    linear-gradient(
      135deg,
      rgba(79, 70, 229, .82),
      rgba(67, 56, 202, .78)
    );
}

.otl-community-leaderboard {
  position: relative;
  overflow: hidden;
  padding: 19px;
  border: 1px solid rgba(129, 140, 248, .17);
  background:
    linear-gradient(
      135deg,
      rgba(11, 18, 34, .92),
      rgba(5, 10, 20, .95)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .028),
    0 20px 44px rgba(0, 0, 0, .13);
}

.otl-community-leaderboard-halo {
  position: absolute;
  width: 280px;
  height: 280px;
  top: -205px;
  left: 50%;
  border: 1px solid rgba(165, 180, 252, .08);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(99, 102, 241, .10),
      transparent 64%
    );
  transform: translateX(-50%);
  pointer-events: none;
}

.otl-community-leaderboard-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.otl-community-leaderboard-header-copy {
  min-width: 0;
}

.otl-community-leaderboard-header h4 {
  margin: 7px 0 5px;
  color: #f3f6fb;
  font-size: 1.16rem;
  font-weight: 900;
  letter-spacing: -.025em;
}

.otl-community-leaderboard-header p {
  max-width: 670px;
  margin: 0;
  color: #7d8ca1;
  font-size: .72rem;
  line-height: 1.52;
}

.otl-community-leaderboard-count {
  display: grid;
  justify-items: end;
  min-width: 52px;
  line-height: 1;
}

.otl-community-leaderboard-count strong {
  color: #eef2ff;
  font-size: 1.3rem;
  font-weight: 950;
  letter-spacing: -.04em;
}

.otl-community-leaderboard-count span {
  margin-top: 4px;
  color: #66768c;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.otl-community-podium {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
  margin-top: 17px;
}

.otl-community-podium-slot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 176px;
  padding: 13px 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 15px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  background:
    linear-gradient(
      180deg,
      rgba(20, 30, 50, .72),
      rgba(7, 13, 25, .82)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.otl-community-podium-slot[hidden] {
  display: none !important;
}

.otl-community-podium-slot[data-place="1"] {
  min-height: 194px;
  padding-top: 11px;
  border-color: rgba(250, 204, 21, .25);
  background:
    linear-gradient(
      180deg,
      rgba(82, 58, 14, .24),
      rgba(20, 22, 32, .84) 38%,
      rgba(7, 12, 23, .90)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 16px 35px rgba(250, 204, 21, .035);
}

.otl-community-podium-slot[data-place="1"]::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  top: -88px;
  border-radius: 50%;
  border: 1px solid rgba(250, 204, 21, .09);
  box-shadow:
    0 0 34px rgba(250, 204, 21, .055);
}

.otl-community-podium-crown {
  color: #77879d;
  font-size: .72rem;
  line-height: 1;
}

[data-place="1"] .otl-community-podium-crown {
  color: #fde68a;
  text-shadow:
    0 0 10px rgba(250, 204, 21, .28);
}

[data-place="2"] .otl-community-podium-crown {
  color: #d6dde5;
}

[data-place="3"] .otl-community-podium-crown {
  color: #c88755;
}

.otl-community-podium-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(165, 180, 252, .18);
  border-radius: 50%;
  color: #dbe4f1;
  background:
    linear-gradient(
      145deg,
      rgba(99, 102, 241, .20),
      rgba(30, 41, 59, .42)
    );
  font-size: .84rem;
  font-weight: 950;
}

[data-place="1"] .otl-community-podium-avatar {
  width: 48px;
  height: 48px;
  border-color: rgba(250, 204, 21, .26);
  color: #fff7d6;
  background:
    linear-gradient(
      145deg,
      rgba(250, 204, 21, .14),
      rgba(88, 60, 13, .18)
    );
}

.otl-community-podium-identity {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.otl-community-podium-username,
.otl-community-leaderboard-username {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  color: #e6edf7;
  font-weight: 900;
  letter-spacing: -.013em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-community-podium-username {
  justify-self: center;
  font-size: .79rem;
}

.otl-community-podium-title {
  overflow: hidden;
  color: #697a90;
  font-size: .58rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-community-podium-score {
  display: grid;
  justify-items: center;
  line-height: 1;
}

.otl-community-podium-score strong {
  color: #f8fafc;
  font-size: 1.18rem;
  font-weight: 950;
  letter-spacing: -.04em;
}

[data-place="1"] .otl-community-podium-score strong {
  color: #fff5bd;
  font-size: 1.34rem;
  text-shadow:
    0 0 16px rgba(250, 204, 21, .12);
}

.otl-community-podium-score small {
  margin-top: 3px;
  color: #5f7188;
  font-size: .43rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.otl-community-light-meter {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .09);
}

.otl-community-light-meter-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #6366f1,
      #8b5cf6,
      #d946ef
    );
  box-shadow:
    0 0 9px rgba(139, 92, 246, .22);
  transition:
    width 380ms cubic-bezier(.2, .8, .2, 1);
}

[data-place="1"] .otl-community-light-meter-fill {
  background:
    linear-gradient(
      90deg,
      #c084fc,
      #e879f9,
      #facc15
    );
  box-shadow:
    0 0 11px rgba(232, 121, 249, .24);
}

.otl-community-podium-prestige {
  color: #617188;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .07em;
}

[data-place="1"] .otl-community-podium-prestige {
  color: #a78b70;
}

.otl-community-leaderboard-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  margin-top: 9px;
}

.otl-community-leaderboard-list:empty {
  display: none;
}

.otl-community-leaderboard-row {
  display: grid;
  grid-template-columns:
    34px
    minmax(0, 1fr)
    minmax(90px, .8fr)
    62px;
  gap: 10px;
  align-items: center;
  min-height: 49px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .085);
  border-radius: 11px;
  color: inherit;
  text-decoration: none;
  background: rgba(5, 10, 20, .42);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.otl-community-leaderboard-place {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(148, 163, 184, .10);
  border-radius: 8px;
  color: #697a90;
  background: rgba(15, 23, 42, .44);
  font-size: .6rem;
  font-weight: 900;
}

.otl-community-leaderboard-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.otl-community-leaderboard-username {
  font-size: .7rem;
}

.otl-community-leaderboard-identity small {
  overflow: hidden;
  color: #5f7086;
  font-size: .55rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-community-leaderboard-row-score {
  display: grid;
  justify-items: end;
  line-height: 1;
}

.otl-community-leaderboard-row-score strong {
  color: #e9eff8;
  font-size: .78rem;
  font-weight: 950;
}

.otl-community-leaderboard-row-score small {
  margin-top: 3px;
  color: #596b82;
  font-size: .43rem;
  font-weight: 900;
  letter-spacing: .055em;
}

.otl-community-leaderboard-empty {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 28px 16px;
  border: 1px dashed rgba(129, 140, 248, .16);
  border-radius: 14px;
  text-align: center;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(99, 102, 241, .07),
      transparent 68%
    );
}

.otl-community-leaderboard-empty[hidden] {
  display: none !important;
}

.otl-community-leaderboard-empty > span {
  color: #767ee8;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.otl-community-leaderboard-empty > strong {
  color: #e8eef8;
  font-size: .85rem;
}

.otl-community-leaderboard-empty p {
  max-width: 520px;
  margin: 0;
  color: #687a91;
  font-size: .65rem;
  line-height: 1.5;
}

.otl-community-leaderboard-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(148, 163, 184, .075);
}

.otl-community-leaderboard-footer span {
  color: #596a80;
  font-size: .57rem;
  line-height: 1.45;
}

.otl-community-leaderboard-footer a {
  flex: 0 0 auto;
  color: #a5b4fc;
  font-size: .62rem;
  font-weight: 850;
  text-decoration: none;
}

.otl-community-leaderboard[data-state="loading"] .otl-community-podium {
  opacity: .46;
}

.otl-community-leaderboard[data-state="error"] {
  border-color: rgba(248, 113, 113, .14);
}

.otl-community-podium-username[data-theme="bronze"],
.otl-community-leaderboard-username[data-theme="bronze"] {
  color: #c88755;
}

.otl-community-podium-username[data-theme="silver"],
.otl-community-leaderboard-username[data-theme="silver"] {
  color: #d2d7de;
}

.otl-community-podium-username[data-theme="gold"],
.otl-community-leaderboard-username[data-theme="gold"] {
  color: #e4bd4f;
}

.otl-community-podium-username[data-theme="diamond"],
.otl-community-leaderboard-username[data-theme="diamond"] {
  color: #d9f5ff;
}

.otl-community-podium-username[data-theme="sapphire"],
.otl-community-leaderboard-username[data-theme="sapphire"] {
  color: #8db8ff;
}

.otl-community-podium-username[data-theme="emerald"],
.otl-community-leaderboard-username[data-theme="emerald"] {
  color: #79e0ae;
}

.otl-community-podium-username[data-theme="amethyst"],
.otl-community-leaderboard-username[data-theme="amethyst"] {
  color: #c5a3ff;
}

.otl-community-podium-username[data-theme="ruby"],
.otl-community-leaderboard-username[data-theme="ruby"] {
  color: #ff8f9d;
}

.otl-community-podium-username[data-theme="prismatic"],
.otl-community-podium-username[data-theme="spectral"],
.otl-community-leaderboard-username[data-theme="prismatic"],
.otl-community-leaderboard-username[data-theme="spectral"] {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.otl-community-podium-username[data-theme="prismatic"],
.otl-community-leaderboard-username[data-theme="prismatic"] {
  background-image:
    linear-gradient(
      90deg,
      #f9a8d4,
      #c4b5fd,
      #7dd3fc,
      #86efac,
      #fde68a
    );
}

.otl-community-podium-username[data-theme="spectral"],
.otl-community-leaderboard-username[data-theme="spectral"] {
  background-image:
    linear-gradient(
      90deg,
      #f8fafc,
      #a5f3fc,
      #c4b5fd,
      #f8fafc
    );
  filter:
    drop-shadow(
      0 0 4px
      rgba(196, 181, 253, .14)
    );
}

@media (hover: hover) {
  .otl-community-training-card:hover,
  .otl-community-podium-slot:hover,
  .otl-community-leaderboard-row:hover {
    transform: translateY(-1px);
    border-color: rgba(129, 140, 248, .24);
  }

  .otl-community-podium-slot[data-place="1"]:hover {
    border-color: rgba(250, 204, 21, .34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .04),
      0 16px 42px rgba(250, 204, 21, .06);
  }

  .otl-community-leaderboard-row:hover {
    background: rgba(15, 23, 42, .52);
  }

  .otl-community-leaderboard-footer a:hover {
    color: #c7d2fe;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}



.otl-community-feature-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.otl-community-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, .13);
  background:
    linear-gradient(
      145deg,
      rgba(30, 41, 59, .54),
      rgba(10, 16, 29, .62)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.otl-community-feature-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(165, 180, 252, .18);
  border-radius: 11px;
  background:
    rgba(79, 70, 229, .08);
}

.otl-community-feature-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background: #a5b4fc;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.otl-community-feature-icon[data-icon="profile"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.7-4 2.9-6 7-6s6.3 2 7 6'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.7-4 2.9-6 7-6s6.3 2 7 6'/%3E%3C/g%3E%3C/svg%3E");
}

.otl-community-feature-icon[data-icon="trainings"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h14v13H5zM8 9h8M8 12h8M8 15h5'/%3E%3Cpath d='M9 3.5h6'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h14v13H5zM8 9h8M8 12h8M8 15h5'/%3E%3Cpath d='M9 3.5h6'/%3E%3C/g%3E%3C/svg%3E");
}

.otl-community-feature-icon[data-icon="leaderboard"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-6h4v6M10 20V7h4v13M16 20v-9h4v9M3 20h18'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-6h4v6M10 20V7h4v13M16 20v-9h4v9M3 20h18'/%3E%3C/g%3E%3C/svg%3E");
}

.otl-community-feature-copy {
  min-width: 0;
}

.otl-community-feature-copy strong {
  display: block;
  color: #e9eff8;
  font-size: .88rem;
  font-weight: 820;
  line-height: 1.2;
}

.otl-community-feature-copy p {
  margin: 6px 0 10px;
  color: #8796aa;
  font-size: .72rem;
  line-height: 1.48;
}

.otl-community-feature-meta {
  color: #818cf8;
}

@media (hover: hover) {
  .otl-community-feature:hover {
    transform: translateY(-2px);
    border-color:
      rgba(165, 180, 252, .22);
    background:
      linear-gradient(
        145deg,
        rgba(37, 47, 70, .60),
        rgba(11, 17, 31, .68)
      );
  }
}

@media (max-width: 760px) {
  .otl-community-hero {
    grid-template-columns: 1fr;
  }

  .otl-community-feature-grid {
    grid-template-columns: 1fr;
  }

  .otl-community-training-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .otl-community-podium {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .otl-community-podium-slot {
    min-height: 164px;
    padding-inline: 8px;
  }

  .otl-community-podium-slot[data-place="1"] {
    min-height: 178px;
  }

  .otl-community-leaderboard-row {
    grid-template-columns:
      30px
      minmax(0, 1fr)
      55px;
  }

  .otl-community-leaderboard-row
    > .otl-community-light-meter {
    grid-column:
      2 / -1;
  }
}

@media (max-width: 560px) {
  .otl-community-trainings-header,
  .otl-community-training-footer,
  .otl-community-leaderboard-header,
  .otl-community-leaderboard-footer,
  .otl-community-participation-heading,
  .otl-community-participation-gate,
  .otl-community-settings-actions,
  .otl-community-settings-subhead {
    align-items: flex-start;
    flex-direction: column;
  }

  .otl-community-setting {
    grid-template-columns: 1fr;
  }

  .otl-community-setting select,
  .otl-community-toggle,
  .otl-community-cosmetic-action {
    justify-self: start;
  }

  .otl-community-training-count,
  .otl-community-leaderboard-count {
    justify-items: start;
  }

  .otl-community-training-controls {
    grid-template-columns: 1fr;
  }

  .otl-community-training-grid {
    grid-template-columns: 1fr;
  }

  .otl-community-leaderboard-footer {
    align-items: flex-start;
  }

  .otl-community-settings-subhead small {
    text-align: left;
  }

  .otl-community-primary-action,
  .otl-community-secondary-action {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .otl-community-hero {
    padding: 16px;
  }

  .otl-community-profile-topline,
  .otl-community-palette {
    align-items: flex-start;
    flex-direction: column;
  }

  .otl-community-leaderboard {
    padding: 15px;
  }

  .otl-community-podium {
    grid-template-columns: 1fr;
  }

  .otl-community-podium-slot,
  .otl-community-podium-slot[data-place="1"] {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    justify-items: start;
    min-height: 0;
    text-align: left;
  }

  .otl-community-podium-slot[data-place="1"] {
    order: -1;
  }

  .otl-community-podium-crown {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .otl-community-podium-avatar {
    grid-row:
      1 / span 2;
  }

  .otl-community-podium-identity {
    align-self: center;
  }

  .otl-community-podium-username {
    justify-self: start;
  }

  .otl-community-podium-score {
    align-self: center;
    justify-items: end;
  }

  .otl-community-podium-slot
    > .otl-community-light-meter {
    grid-column:
      2 / -1;
  }

  .otl-community-podium-prestige {
    grid-column:
      2 / -1;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .otl-community-feature,
  .otl-community-primary-action,
  .otl-community-secondary-action,
  .otl-community-toggle-track,
  .otl-community-toggle-track::after,
  .otl-community-report-backdrop,
  .otl-community-training-card,
  .otl-community-podium-slot,
  .otl-community-leaderboard-row,
  .otl-community-light-meter-fill {
    transition: none;
  }

  .otl-community-feature:hover,
  .otl-community-primary-action:hover,
  .otl-community-secondary-action:hover,
  .otl-community-podium-slot:hover,
  .otl-community-leaderboard-row:hover {
    transform: none;
  }
}


/* ==========================================================
   Community information architecture — three focused views
   ========================================================== */

.otl-community-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 12px;
  background: rgba(2, 6, 23, .24);
  scrollbar-width: none;
}

.otl-community-tabs::-webkit-scrollbar {
  display: none;
}

.otl-community-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  color: #7f8fa5;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 820;
  white-space: nowrap;
  transition:
    color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.otl-community-tab[aria-selected="true"] {
  color: #eef2f7;
  background: rgba(51, 65, 85, .58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.otl-community-tab:focus-visible {
  outline: 2px solid rgba(96, 165, 250, .62);
  outline-offset: 1px;
}

.otl-community-views,
.otl-community-view {
  min-width: 0;
}

.otl-community-view[hidden] {
  display: none !important;
}

.otl-community-profile-panel {
  display: grid;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 2px 4px 4px;
}

.otl-community-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 4px 12px;
}

.otl-community-profile-header h4 {
  margin: 0;
  color: #eef2f7;
  font-size: 1rem;
  font-weight: 850;
}

.otl-community-profile-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.otl-community-restriction-status {
  padding: 4px 7px;
  border: 1px solid rgba(248, 113, 113, .24);
  border-radius: 999px;
  color: #fca5a5;
  background: rgba(127, 29, 29, .14);
  font-size: .58rem;
  font-weight: 800;
}

.otl-community-restriction-status[hidden] {
  display: none !important;
}

.otl-community-profile-header
.otl-community-public-profile-link {
  margin: 0;
  color: #93c5fd;
  font-size: .68rem;
}

.otl-community-profile-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(130px, auto);
  gap: 18px;
  align-items: center;
  min-height: 54px;
  padding: 11px 4px;
  border-top: 1px solid rgba(148, 163, 184, .09);
}

.otl-community-profile-row > strong,
.otl-community-profile-row-copy > strong {
  color: #dce5f1;
  font-size: .76rem;
  font-weight: 800;
}

.otl-community-profile-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.otl-community-profile-row-copy > small {
  color: #69798f;
  font-size: .61rem;
  font-weight: 680;
}

.otl-community-profile-row > select {
  min-width: 145px;
  min-height: 35px;
  padding: 6px 30px 6px 9px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 9px;
  color: #dbe4f1;
  background: rgba(15, 23, 42, .68);
  font: inherit;
  font-size: .7rem;
  font-weight: 730;
  cursor: pointer;
}

.otl-community-profile-row > select:focus-visible {
  outline: 2px solid rgba(96, 165, 250, .48);
  outline-offset: 1px;
}

.otl-community-profile-row--toggle
.otl-community-toggle {
  justify-self: end;
}

.otl-community-profile-settings {
  display: grid;
}

.otl-community-profile-row[hidden],
.otl-community-profile-settings[hidden] {
  display: none !important;
}

.otl-community-profile-panel
.otl-community-settings-message {
  min-height: 0;
  margin: 8px 4px 0;
}

.otl-community-profile-panel
.otl-community-settings-message:empty {
  display: none;
}

/*
  Community Trainings and Leaderboard are the visually rich destinations.
  Their headers stay direct instead of explaining the feature.
*/
.otl-community-trainings-header h4,
.otl-community-leaderboard-header h4 {
  margin: 0;
}

.otl-community-training-footer,
.otl-community-leaderboard-footer {
  justify-content: flex-end;
}

.otl-community-training-footer-actions {
  margin-left: auto;
}

@media (hover: hover) {
  .otl-community-tab:hover:not([aria-selected="true"]) {
    color: #cbd5e1;
    background: rgba(30, 41, 59, .34);
  }
}

@media (max-width: 620px) {
  .otl-community-tabs {
    padding: 3px;
  }

  .otl-community-tab {
    padding-inline: 11px;
  }

  .otl-community-profile-row {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
    gap: 12px;
  }

  .otl-community-profile-row > select {
    min-width: 128px;
  }
}

@media (max-width: 430px) {
  .otl-community-profile-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .otl-community-profile-row > select,
  .otl-community-profile-row--toggle
  .otl-community-toggle {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .otl-community-tab {
    transition: none;
  }
}


/* ==========================================================
   In-app Community profile modal
   ========================================================== */

.otl-community-training-author {
  color: inherit;
  text-decoration: none;
}

.otl-community-profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  background: rgba(2, 6, 23, .74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.otl-community-profile-modal {
  display: grid;
  gap: 18px;
  box-sizing: border-box;
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(17, 27, 45, .99),
      rgba(8, 15, 29, .99)
    );
  box-shadow:
    0 30px 76px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.otl-community-profile-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.otl-community-profile-modal-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.otl-community-profile-modal-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 50%;
  color: #dbeafe;
  background:
    linear-gradient(
      145deg,
      rgba(79, 70, 229, .30),
      rgba(14, 116, 144, .18)
    );
  font-size: 1.05rem;
  font-weight: 900;
  overflow: hidden;
}

.otl-community-profile-modal-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.otl-community-profile-modal-username-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.otl-community-profile-modal-identity h3 {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #eef2f7;
  font-size: 1rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.otl-community-profile-modal-identity p {
  margin: 4px 0 0;
  color: #718096;
  font-size: .7rem;
  font-weight: 700;
}

.otl-community-profile-modal-level {
  display: inline-grid;
  place-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border:
    1px solid rgba(
      var(--otl-level-rgb),
      var(--otl-level-border-alpha)
    );
  border-radius: 999px;
  background:
    rgba(
      var(--otl-level-rgb),
      var(--otl-level-fill-alpha)
    );
  box-shadow:
    0 0 10px
      rgba(
        var(--otl-level-rgb),
        var(--otl-level-glow-alpha)
      ),
    inset 0 1px 0
      rgba(255, 255, 255, .025);
  font-size: .60rem;
  font-weight: 900;
  line-height: 1;
}

.otl-community-profile-modal-identity h3[data-theme="bronze"] { color: #c88755; }
.otl-community-profile-modal-identity h3[data-theme="silver"] { color: #d2d7de; }
.otl-community-profile-modal-identity h3[data-theme="gold"] { color: #e4bd4f; }
.otl-community-profile-modal-identity h3[data-theme="diamond"] { color: #d9f5ff; }
.otl-community-profile-modal-identity h3[data-theme="sapphire"] { color: #8db8ff; }
.otl-community-profile-modal-identity h3[data-theme="emerald"] { color: #79e0ae; }
.otl-community-profile-modal-identity h3[data-theme="amethyst"] { color: #c5a3ff; }
.otl-community-profile-modal-identity h3[data-theme="ruby"] { color: #ff8f9d; }

.otl-community-profile-modal-identity h3[data-theme="prismatic"],
.otl-community-profile-modal-identity h3[data-theme="spectral"] {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.otl-community-profile-modal-identity h3[data-theme="prismatic"] {
  background-image:
    linear-gradient(
      90deg,
      #f9a8d4,
      #c4b5fd,
      #7dd3fc,
      #86efac,
      #fde68a
    );
}

.otl-community-profile-modal-identity h3[data-theme="spectral"] {
  background-image:
    linear-gradient(
      90deg,
      #f8fafc,
      #a5f3fc,
      #c4b5fd,
      #f8fafc
    );
}

.otl-community-profile-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 9px;
  color: #94a3b8;
  background: rgba(30, 41, 59, .34);
  cursor: pointer;
  font: inherit;
  font-size: 1.12rem;
}

.otl-community-profile-modal-progression {
  display: grid;
  gap: 14px;
}

.otl-community-profile-modal-metrics {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(130px, 1fr)
    );
  gap: 8px;
}

.otl-community-profile-modal-metric {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, .10);
  border-radius: 10px;
  background: rgba(15, 23, 42, .42);
}

.otl-community-profile-modal-metric strong {
  color: #e2e8f0;
  font-size: .88rem;
  font-weight: 900;
}

.otl-community-profile-modal-metric span {
  color: #69798f;
  font-size: .58rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.otl-community-profile-modal-achievements {
  display: grid;
  max-height: 260px;
  overflow: auto;
  border-top: 1px solid rgba(148, 163, 184, .10);
}

.otl-community-profile-modal-achievement {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.otl-community-profile-modal-achievement strong {
  color: #cbd5e1;
  font-size: .68rem;
  font-weight: 760;
}

.otl-community-profile-modal-achievement span {
  color: #718096;
  font-size: .66rem;
  font-weight: 700;
}

.otl-community-profile-modal-private,
.otl-community-profile-modal-loading {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .10);
  border-radius: 10px;
  color: #8797ab;
  background: rgba(15, 23, 42, .36);
  font-size: .72rem;
  text-align: center;
}

.otl-community-profile-modal-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.otl-community-profile-modal-report {
  padding: 7px 10px;
  border: 0;
  color: #6f7f93;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .64rem;
  font-weight: 750;
}

@media (hover: hover) {
  .otl-community-training-author:hover,
  .otl-community-profile-modal-report:hover {
    color: #bfdbfe;
  }

  .otl-community-profile-modal-close:hover {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, .30);
    background: rgba(51, 65, 85, .42);
  }
}

@media (max-width: 560px) {
  .otl-community-profile-backdrop {
    padding: 10px;
  }

  .otl-community-profile-modal {
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .otl-community-profile-modal-metrics {
    grid-template-columns: 1fr;
  }
}

/* ---------- End in-app Community profile modal ---------- */


/* ==========================================================
   Community Training directory — restrained discovery layout
   ========================================================== */

.otl-community-tabs {
  justify-content:
    center;

  gap:
    10px;

  padding:
    0 0 14px;

  overflow-x:
    auto;

  border:
    0;

  border-bottom:
    1px solid rgba(148, 163, 184, .12);

  border-radius:
    0;

  background:
    transparent;
}

.otl-community-tab {
  flex:
    0 1 220px;

  min-width:
    150px;

  min-height:
    50px;

  padding:
    12px 20px;

  border:
    1px solid transparent;

  border-radius:
    10px;

  color:
    #7f8fa5;

  font-size:
    .86rem;

  font-weight:
    840;

  text-align:
    center;
}

.otl-community-tab[aria-selected="true"] {
  color:
    #f3f6fb;

  border-color:
    rgba(96, 165, 250, .18);

  background:
    rgba(30, 41, 59, .42);

  box-shadow:
    inset 0 -2px 0 rgba(96, 165, 250, .76);
}

.otl-community-trainings {
  overflow:
    visible;

  padding:
    2px 0 0;

  border:
    0;

  background:
    transparent;

  box-shadow:
    none;
}

.otl-community-training-controls {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(150px, 190px);

  gap:
    10px;

  margin:
    0;
}

.otl-community-training-controls input,
.otl-community-training-controls select {
  min-height:
    48px;

  border:
    1px solid rgba(148, 163, 184, .20);

  border-radius:
    11px;

  color:
    #dce5f1;

  background:
    rgba(2, 6, 23, .42);

  font:
    inherit;

  font-size:
    .78rem;
}

.otl-community-training-controls input {
  padding:
    10px 14px;
}

.otl-community-training-controls select {
  padding:
    10px 34px 10px 12px;

  cursor:
    pointer;
}

.otl-community-training-controls input::placeholder {
  color:
    #6f7f95;
}

.otl-community-training-results-meta {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    20px;

  margin:
    13px 0 7px;

  color:
    #72839a;

  font-size:
    .66rem;
}

.otl-community-training-results-meta strong {
  color:
    #cbd5e1;

  font-size:
    .72rem;

  font-weight:
    850;
}

.otl-community-training-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    12px;

  margin:
    0;
}

.otl-community-training-card {
  position:
    relative;

  display:
    grid;

  align-content:
    start;

  gap:
    11px;

  min-width:
    0;

  min-height:
    0;

  padding:
    15px 16px 13px;

  overflow:
    hidden;

  border:
    1px solid rgba(
      var(--otl-community-training-accent),
      .48
    );

  border-radius:
    13px;

  color:
    inherit;

  background:
    linear-gradient(
      135deg,
      rgba(
        var(--otl-community-training-accent),
        .10
      ) 0%,
      rgba(11, 18, 33, .86) 40%,
      rgba(6, 11, 22, .76) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 8px 24px rgba(0, 0, 0, .08);

  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.otl-community-training-card::before {
  display:
    none;
}

.otl-community-training-card-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  min-width:
    0;
}

.otl-community-training-identity {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}

.otl-community-training-card-icon {
  display:
    inline-block;

  width:
    auto;

  height:
    auto;

  flex:
    0 0 auto;

  border:
    0;

  border-radius:
    0;

  color:
    inherit;

  background:
    transparent;

  box-shadow:
    none;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;

  font-size:
    1.52rem;

  line-height:
    1;
}

.otl-community-training-identity-copy {
  display:
    grid;

  gap:
    3px;

  min-width:
    0;
}

.otl-community-training-name {
  overflow:
    hidden;

  color:
    #edf2f8;

  font-size:
    .96rem;

  font-weight:
    870;

  line-height:
    1.22;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.otl-community-training-author {
  min-width:
    0;

  overflow:
    hidden;

  color:
    #8393a8;

  font-size:
    .66rem;

  font-weight:
    730;

  text-decoration:
    none;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.otl-community-training-premium {
  flex:
    0 0 auto;

  margin:
    2px 0 0;

  padding:
    4px 7px;

  border:
    1px solid rgba(196, 181, 253, .18);

  border-radius:
    7px;

  color:
    #b9aed5;

  background:
    rgba(91, 33, 182, .07);

  font-size:
    .56rem;

  font-weight:
    850;

  letter-spacing:
    .02em;
}

.otl-community-training-note {
  display:
    block;

  min-height:
    0;

  margin:
    0;

  overflow:
    visible;

  color:
    #8797aa;

  font-size:
    .70rem;

  line-height:
    1.48;

  -webkit-line-clamp:
    unset;
}

.otl-community-training-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.otl-community-training-meta span {
  padding:
    3px 6px;

  border:
    0;

  border-radius:
    6px;

  color:
    #7d8da2;

  background:
    rgba(30, 41, 59, .34);

  font-size:
    .58rem;

  font-weight:
    720;
}

.otl-community-training-disclosures {
  display:
    grid;

  border-top:
    1px solid rgba(148, 163, 184, .08);

  border-bottom:
    1px solid rgba(148, 163, 184, .08);
}

.otl-community-training-disclosure {
  margin:
    0;

  padding:
    0;

  border-bottom:
    1px solid rgba(148, 163, 184, .07);
}

.otl-community-training-disclosure:last-child {
  border-bottom:
    0;
}

.otl-community-training-disclosure summary {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    34px;

  padding:
    6px 2px;

  color:
    #9aa9bb;

  cursor:
    pointer;

  font-size:
    .66rem;

  font-weight:
    790;

  list-style:
    none;
}

.otl-community-training-disclosure summary::-webkit-details-marker {
  display:
    none;
}

.otl-community-training-disclosure summary::before {
  content:
    "›";

  flex:
    0 0 auto;

  margin-right:
    2px;

  color:
    #68798f;

  font-size:
    .88rem;

  transform:
    rotate(0deg);

  transition:
    transform 120ms ease;
}

.otl-community-training-disclosure[open] summary::before {
  transform:
    rotate(90deg);
}

.otl-community-training-disclosure summary > span:first-child {
  margin-right:
    auto;
}

.otl-community-training-disclosure-count {
  display:
    inline-grid;

  place-items:
    center;

  min-width:
    24px;

  height:
    20px;

  padding:
    0 6px;

  border-radius:
    999px;

  color:
    #718198;

  background:
    rgba(30, 41, 59, .40);

  font-size:
    .56rem;

  font-variant-numeric:
    tabular-nums;
}

.otl-community-training-disclosure-body {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  padding:
    0 2px 10px 20px;
}

.otl-community-training-chip {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    24px;

  padding:
    4px 7px;

  border:
    1px solid rgba(148, 163, 184, .12);

  border-radius:
    7px;

  color:
    #a7b3c3;

  background:
    rgba(15, 23, 42, .34);

  font-size:
    .58rem;

  font-weight:
    710;
}

.otl-community-training-disclosure[data-tone="red"]
.otl-community-training-chip {
  border-color:
    rgba(248, 113, 113, .16);

  color:
    #dca2a2;

  background:
    rgba(127, 29, 29, .07);
}

.otl-community-training-disclosure[data-tone="green"]
.otl-community-training-chip {
  border-color:
    rgba(74, 222, 128, .15);

  color:
    #9acbaa;

  background:
    rgba(20, 83, 45, .07);
}

.otl-community-training-disclosure[data-tone="yellow"]
.otl-community-training-chip {
  border-color:
    rgba(250, 204, 21, .15);

  color:
    #d2bd79;

  background:
    rgba(113, 63, 18, .07);
}

.otl-community-training-card-bottom {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin:
    0;

  padding:
    3px 0 0;

  border:
    0;
}

.otl-community-training-card-actions {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-left:
    auto;
}

.otl-community-training-rating {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  color:
    #7c8ba0;

  font-size:
    .61rem;

  font-weight:
    780;

  font-variant-numeric:
    tabular-nums;
}

.otl-community-training-hearts {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    2px;
}

.otl-community-training-heart {
  appearance:
    none;

  display:
    inline-grid;

  place-items:
    center;

  width:
    14px;

  height:
    18px;

  margin:
    0;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    linear-gradient(
      90deg,
      var(--otl-community-rating-color)
        var(--otl-heart-fill),
      #39475a
        var(--otl-heart-fill)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  cursor:
    default;

  font:
    inherit;

  font-family:
    Arial,
    sans-serif;

  font-size:
    .88rem;

  line-height:
    1;

  transition:
    transform 120ms ease,
    filter 120ms ease;
}

button.otl-community-training-heart {
  position:
    relative;

  cursor:
    pointer;
}

button.otl-community-training-heart[data-user-rating="true"]::after {
  content:
    '';

  position:
    absolute;

  right:
    0;

  bottom:
    0;

  width:
    4px;

  height:
    4px;

  border:
    1px solid rgba(4,8,17,.95);

  border-radius:
    999px;

  background:
    var(--otl-community-rating-color);

  box-shadow:
    0 0 6px
      color-mix(
        in srgb,
        var(--otl-community-rating-color) 58%,
        transparent
      );
}

button.otl-community-training-heart:focus-visible {
  border-radius:
    4px;

  box-shadow:
    0 0 0 2px rgba(167,139,250,.30);
}

.otl-community-training-rating[data-busy="true"] {
  opacity:
    .56;
}

.otl-community-training-rating-score {
  overflow:
    hidden;

  color:
    #7f8ea3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.otl-community-training-report,
.otl-community-training-open,
.otl-community-training-unlock {
  font:
    inherit;

  font-size:
    .64rem;

  font-weight:
    810;

  white-space:
    nowrap;
}

.otl-community-training-report {
  display:
    inline-grid;

  place-items:
    center;

  flex:
    0 0 30px;

  box-sizing:
    border-box;

  width:
    30px;

  min-width:
    30px;

  height:
    30px;

  min-height:
    30px;

  aspect-ratio:
    1;

  padding:
    0;

  border:
    1px solid transparent;

  border-radius:
    8px;

  color:
    #64758b;

  background:
    transparent;

  cursor:
    pointer;
}

.otl-community-training-report svg {
  display:
    block;

  width:
    17px;

  height:
    17px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.otl-community-training-open,
.otl-community-training-unlock {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  box-sizing:
    border-box;

  height:
    30px;

  min-height:
    30px;

  padding:
    6px 11px;

  border-radius:
    8px;
}

.otl-community-training-open {
  border:
    1px solid rgba(
      var(--otl-community-training-accent),
      .48
    );

  color:
    #edf4ff;

  background:
    rgba(
      var(--otl-community-training-accent),
      .16
    );

  text-decoration:
    none;
}

.otl-community-training-unlock {
  gap:
    6px;

  border:
    1px solid rgba(167,139,250,.34);

  color:
    #ddd6fe;

  background:
    rgba(91,33,182,.12);

  cursor:
    pointer;
}

.otl-community-training-unlock svg {
  width:
    14px;

  height:
    14px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.otl-community-training-empty {
  display:
    grid;

  justify-items:
    center;

  gap:
    6px;

  margin:
    8px 0 0;

  padding:
    26px 12px;

  border:
    0;

  border-radius:
    0;

  text-align:
    center;

  background:
    transparent;
}

.otl-community-training-empty > span {
  display:
    none;
}

.otl-community-training-empty > strong {
  color:
    #cbd5e1;

  font-size:
    .80rem;
}

.otl-community-training-empty p {
  margin:
    0;

  color:
    #6f8095;

  font-size:
    .66rem;
}

.otl-community-training-footer {
  display:
    flex;

  justify-content:
    center;

  margin:
    8px 0 0;

  padding:
    0;

  border:
    0;
}

.otl-community-training-load-more {
  padding:
    7px 12px;

  border:
    1px solid rgba(148, 163, 184, .15);

  border-radius:
    8px;

  color:
    #9ba9ba;

  background:
    rgba(15, 23, 42, .30);

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    .64rem;

  font-weight:
    780;
}

.otl-community-trainings[data-state="loading"]
.otl-community-training-grid {
  opacity:
    .50;
}

.otl-community-trainings[data-state="error"] {
  border:
    0;
}

@media (hover: hover) {
  .otl-community-training-card:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(
        var(--otl-community-training-accent),
        .76
      );

    background:
      linear-gradient(
        135deg,
        rgba(
          var(--otl-community-training-accent),
          .15
        ) 0%,
        rgba(15, 24, 42, .90) 42%,
        rgba(8, 14, 27, .82) 100%
      );

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .035),
      0 12px 30px rgba(
        var(--otl-community-training-accent),
        .08
      );
  }

  .otl-community-training-author:hover {
    color:
      #d0d8e3;
  }

  .otl-community-training-report:hover {
    border-color:
      rgba(148,163,184,.18);

    color:
      #cbd5e1;

    background:
      rgba(30,41,59,.28);
  }

  button.otl-community-training-heart:hover {
    transform:
      translateY(-1px);

    filter:
      brightness(1.16);
  }

  .otl-community-training-open:hover {
    color:
      #fff;

    border-color:
      rgba(
        var(--otl-community-training-accent),
        .78
      );

    background:
      rgba(
        var(--otl-community-training-accent),
        .25
      );
  }

  .otl-community-training-unlock:hover {
    border-color:
      rgba(196,181,253,.58);

    color:
      #f5f3ff;

    background:
      rgba(109,40,217,.20);
  }

  .otl-community-training-disclosure summary:hover {
    color:
      #c3cedb;
  }

  .otl-community-training-load-more:hover {
    color:
      #cbd5e1;

    border-color:
      rgba(148, 163, 184, .26);
  }
}

@media (max-width: 1280px) {
  .otl-community-training-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 760px) {
  .otl-community-training-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .otl-community-tabs {
    justify-content:
      flex-start;
  }

  .otl-community-tab {
    flex:
      0 0 auto;

    min-width:
      150px;
  }

  .otl-community-training-controls {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .otl-community-training-card-bottom {
    align-items:
      flex-end;
  }

  .otl-community-training-rating {
    gap:
      5px;
  }

  .otl-community-training-hearts {
    gap:
      1px;
  }

  .otl-community-training-heart {
    width:
      12px;

    font-size:
      .80rem;
  }

  .otl-community-training-rating-score {
    max-width:
      72px;
  }

  .otl-community-tab {
    min-height:
      46px;

    padding-inline:
      14px;

    font-size:
      .78rem;
  }

  .otl-community-training-card {
    padding:
      13px 13px 12px;
  }

  .otl-community-training-card-header {
    align-items:
      center;
  }

  .otl-community-training-name {
    font-size:
      .90rem;
  }
}


/* ---------- Community Training inspector — October update ---------- */

html.otl-community-training-inspector-open {
  overflow:
    hidden;
}

.otl-community-training-inspector-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    190;

  display:
    grid;

  place-items:
    center;

  padding:
    22px;

  overflow-y:
    auto;

  background:
    rgba(2, 6, 23, .78);

  backdrop-filter:
    blur(8px);
}

.otl-community-training-inspector {
  width:
    min(820px, 100%);

  max-height:
    min(820px, calc(100vh - 44px));

  padding:
    20px;

  overflow-y:
    auto;

  border:
    1px solid rgba(
      var(--otl-community-training-accent),
      .52
    );

  border-radius:
    16px;

  color:
    #dbe5f1;

  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 31, .985),
      rgba(5, 10, 20, .985)
    );

  box-shadow:
    inset 0 0 48px rgba(
      var(--otl-community-training-accent),
      .065
    ),
    0 28px 80px rgba(0, 0, 0, .48);
}

.otl-community-training-inspector-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;
}

.otl-community-training-inspector-identity {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;
}

.otl-community-training-inspector-icon {
  display:
    inline-grid;

  place-items:
    center;

  width:
    2rem;

  height:
    2rem;

  flex:
    0 0 2rem;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;

  font-size:
    1.72rem;
}

.otl-community-training-inspector-kicker {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #718197;

  font-size:
    .56rem;

  font-weight:
    850;

  letter-spacing:
    .08em;
}

.otl-community-training-inspector h3 {
  margin:
    0;

  color:
    #f5f7fb;

  font-size:
    1.14rem;

  line-height:
    1.25;
}

.otl-community-training-inspector-identity a {
  display:
    inline-block;

  margin-top:
    3px;

  color:
    #8494a9;

  font-size:
    .68rem;

  font-weight:
    740;

  text-decoration:
    none;
}

.otl-community-training-inspector-header-actions {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;
}

.otl-community-training-inspector-close {
  display:
    inline-grid;

  place-items:
    center;

  width:
    32px;

  height:
    32px;

  padding:
    0;

  border:
    1px solid rgba(148, 163, 184, .16);

  border-radius:
    9px;

  color:
    #9aa9bc;

  background:
    rgba(15, 23, 42, .42);

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    1.16rem;
}

.otl-community-training-inspector-note {
  margin:
    16px 0 0;

  color:
    #8b9aad;

  font-size:
    .72rem;

  line-height:
    1.5;
}

.otl-community-training-inspector-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    14px;
}

.otl-community-training-inspector-meta span {
  padding:
    4px 8px;

  border-radius:
    7px;

  color:
    #94a4b8;

  background:
    rgba(30, 41, 59, .36);

  font-size:
    .62rem;

  font-weight:
    760;
}

.otl-community-training-inspector-quick {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    10px;

  margin-top:
    16px;
}

.otl-community-training-inspector-group {
  min-width:
    0;

  padding:
    11px;

  border:
    1px solid rgba(148, 163, 184, .09);

  border-radius:
    10px;

  background:
    rgba(15, 23, 42, .24);
}

.otl-community-training-inspector-group > strong {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #9eacbd;

  font-size:
    .65rem;

  font-weight:
    820;
}

.otl-community-training-inspector-chips {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.otl-community-training-inspector-chip {
  padding:
    4px 7px;

  border:
    1px solid rgba(148, 163, 184, .10);

  border-radius:
    999px;

  color:
    #aab6c5;

  background:
    rgba(2, 6, 23, .30);

  font-size:
    .58rem;

  font-weight:
    710;
}

.otl-community-training-inspector-chip[data-tone="red"] {
  border-color:
    rgba(248, 113, 113, .16);
}

.otl-community-training-inspector-chip[data-tone="yellow"] {
  border-color:
    rgba(250, 204, 21, .16);
}

.otl-community-training-inspector-chip[data-tone="green"] {
  border-color:
    rgba(74, 222, 128, .16);
}

.otl-community-training-inspector-chip[data-tone="tasks"] {
  border-color:
    rgba(129, 140, 248, .16);
}

.otl-community-training-inspector-review {
  display:
    grid;

  gap:
    0;

  margin-top:
    16px;

  border-top:
    1px solid rgba(148, 163, 184, .10);

  border-bottom:
    1px solid rgba(148, 163, 184, .10);
}

.otl-community-training-inspector-row {
  display:
    grid;

  grid-template-columns:
    minmax(115px, .34fr)
    minmax(0, 1fr);

  gap:
    16px;

  padding:
    12px 2px;

  border-bottom:
    1px solid rgba(148, 163, 184, .08);
}

.otl-community-training-inspector-row:last-child {
  border-bottom:
    0;
}

.otl-community-training-inspector-row > strong {
  color:
    #9aa9bb;

  font-size:
    .66rem;

  font-weight:
    820;
}

.otl-community-training-inspector-row-value {
  min-width:
    0;

  color:
    #c6d0dc;

  font-size:
    .66rem;

  line-height:
    1.55;
}

.otl-community-training-inspector-status {
  margin:
    0;

  padding:
    14px 2px;

  color:
    #8090a5;

  font-size:
    .66rem;
}

.otl-community-training-inspector-status.is-error {
  color:
    #fca5a5;
}

.otl-community-training-inspector-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin-top:
    16px;
}

.otl-community-training-inspector-footer > span {
  color:
    #74859b;

  font-size:
    .62rem;

  line-height:
    1.4;
}

.otl-community-training-inspector-primary {
  flex:
    0 0 auto;
}

/* ==========================================================
   Community Training directory — restrained discovery layout
   October Community refresh
   ========================================================== */

.otl-community-tabs {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    0;

  padding:
    0;

  overflow:
    visible;

  border:
    1px solid rgba(148, 163, 184, .15);

  border-radius:
    12px;

  background:
    rgba(2, 6, 23, .28);
}

.otl-community-tab {
  min-width:
    0;

  min-height:
    60px;

  padding:
    14px 18px;

  border:
    0;

  border-right:
    1px solid rgba(148, 163, 184, .11);

  border-radius:
    0;

  color:
    #a8b5c6;

  background:
    transparent;

  font-size:
    1rem;

  font-weight:
    850;

  text-align:
    center;

  transform:
    none !important;
}

.otl-community-tab:last-child {
  border-right:
    0;
}

.otl-community-tab:hover {
  color:
    #dce5f1;

  background:
    rgba(30, 41, 59, .20);
}

.otl-community-tab[aria-selected="true"] {
  color:
    #f8fafc;

  background:
    rgba(30, 41, 59, .48);

  box-shadow:
    inset 0 -3px 0 rgba(96, 165, 250, .82),
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

.otl-community-trainings {
  overflow:
    visible;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  box-shadow:
    none;
}

.otl-community-training-controls {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(150px, 190px);

  gap:
    10px;

  margin:
    0;
}

.otl-community-training-controls input,
.otl-community-training-controls select {
  min-height:
    48px;

  border:
    1px solid rgba(148, 163, 184, .20);

  border-radius:
    11px;

  color:
    #dce5f1;

  background:
    #0b1220;

  font:
    inherit;

  font-size:
    .78rem;
}

.otl-community-training-controls input {
  padding:
    10px 14px;
}

.otl-community-training-controls select {
  padding:
    10px 40px 10px 12px;

  cursor:
    pointer;
}

.otl-community-training-controls input::placeholder {
  color:
    #6f7f95;
}

.otl-community-training-results-meta {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    flex-start;

  gap:
    5px;

  min-height:
    20px;

  margin:
    12px 0 8px 2px;

  color:
    #72839a;

  font-size:
    .66rem;
}

.otl-community-training-results-meta strong {
  color:
    #cbd5e1;

  font-size:
    .72rem;

  font-weight:
    850;
}

.otl-community-training-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 360px),
        1fr
      )
    );

  align-items:
    stretch;

  grid-auto-rows:
    1fr;

  gap:
    14px;

  margin:
    0;
}

.otl-community-training-card {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    11px;

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  box-sizing:
    border-box;

  align-self:
    stretch;

  padding:
    16px 16px 74px;

  overflow:
    visible;

  border:
    1px solid rgba(
      var(--otl-community-training-accent),
      .50
    );

  border-radius:
    13px;

  color:
    inherit;

  background:
    linear-gradient(
      180deg,
      rgba(11, 18, 33, .93),
      rgba(6, 11, 22, .86)
    );

  box-shadow:
    inset 0 0 34px rgba(
      var(--otl-community-training-accent),
      .055
    ),
    inset 0 0 0 1px rgba(
      var(--otl-community-training-accent),
      .035
    ),
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 8px 24px rgba(0, 0, 0, .08);

  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.otl-community-training-card::before {
  display:
    none;
}

.otl-community-training-card-icon {
  display:
    inline-grid;

  place-items:
    center;

  width:
    1.72rem;

  height:
    1.72rem;

  flex:
    0 0 1.72rem;

  border:
    0;

  border-radius:
    0;

  color:
    inherit;

  background:
    transparent;

  box-shadow:
    none;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;

  font-size:
    1.52rem;

  line-height:
    1;
}

.otl-community-training-premium-star {
  display:
    inline-grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    24px;

  height:
    24px;

  color:
    #c4b5fd;

  font-size:
    1rem;

  line-height:
    1;

  text-shadow:
    0 0 10px rgba(167, 139, 250, .28);
}

.otl-community-training-summary {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    nowrap;

  gap:
    6px;

  min-width:
    0;

  min-height:
    27px;

  white-space:
    nowrap;
}

.otl-community-training-summary-chip {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  min-height:
    26px;

  padding:
    4px 8px;

  border:
    1px solid rgba(148, 163, 184, .10);

  border-radius:
    999px;

  color:
    #8fa0b5;

  background:
    rgba(15, 23, 42, .42);

  font-size:
    .58rem;

  font-weight:
    780;
}

.otl-community-training-summary-chip strong {
  color:
    #c7d2df;

  font-size:
    .60rem;

  font-variant-numeric:
    tabular-nums;
}

.otl-community-training-summary-chip[data-tone="red"] {
  border-color:
    rgba(248, 113, 113, .14);

  background:
    rgba(127, 29, 29, .07);
}

.otl-community-training-summary-chip[data-tone="yellow"] {
  border-color:
    rgba(250, 204, 21, .14);

  background:
    rgba(113, 63, 18, .07);
}

.otl-community-training-summary-chip[data-tone="green"] {
  border-color:
    rgba(74, 222, 128, .14);

  background:
    rgba(20, 83, 45, .07);
}

.otl-community-training-summary-chip[data-tone="tasks"] {
  border-color:
    rgba(129, 140, 248, .14);

  background:
    rgba(49, 46, 129, .07);
}

.otl-community-training-summary-chip[data-tone="duration"] {
  border-color:
    rgba(96, 165, 250, .22);

  color:
    #b7d4fb;

  background:
    rgba(30, 64, 175, .10);
}

.otl-community-training-summary-chip[data-tone="trainer"] {
  border-color:
    rgba(45, 212, 191, .20);

  color:
    #a7d9d2;

  background:
    rgba(19, 78, 74, .10);
}

.otl-community-training-summary-chip[data-tone="red"] {
  color:
    #dca4a4;
}

.otl-community-training-summary-chip[data-tone="yellow"] {
  color:
    #d9c48a;
}

.otl-community-training-summary-chip[data-tone="green"] {
  color:
    #9dceb0;
}

.otl-community-training-summary-chip[data-tone="tasks"] {
  color:
    #b4b8e8;
}

.otl-community-training-summary-chip[data-tone="effects"] {
  border-color:
    rgba(232, 121, 249, .20);

  color:
    #d9abe2;

  background:
    rgba(112, 26, 117, .09);
}

.otl-community-training-summary-chip.has-tooltip {
  cursor:
    help;
}

.otl-community-training-summary-chip.has-tooltip:focus-visible {
  outline:
    2px solid rgba(148, 163, 184, .28);

  outline-offset:
    2px;
}

.otl-community-training-summary-tooltip {
  position:
    absolute;

  left:
    50%;

  top:
    calc(100% + 8px);

  bottom:
    auto;

  z-index:
    12;

  display:
    none;

  width:
    max-content;

  max-width:
    min(280px, calc(100vw - 56px));

  padding:
    8px 10px;

  border:
    1px solid rgba(148, 163, 184, .18);

  border-radius:
    9px;

  color:
    #cbd5e1;

  background:
    rgba(7, 12, 23, .98);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, .34);

  transform:
    translateX(-50%);

  white-space:
    normal;

  font-size:
    .61rem;

  font-weight:
    700;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;
}

/*
  Keep long tag lists inside the Training card. Earlier tag groups
  open to the right; later groups open back toward the left.
*/
.otl-community-training-summary-chip[data-tone="red"]
  .otl-community-training-summary-tooltip,
.otl-community-training-summary-chip[data-tone="yellow"]
  .otl-community-training-summary-tooltip {
  left:
    0;

  right:
    auto;

  transform:
    none;
}

.otl-community-training-summary-chip[data-tone="green"]
  .otl-community-training-summary-tooltip,
.otl-community-training-summary-chip[data-tone="tasks"]
  .otl-community-training-summary-tooltip,
.otl-community-training-summary-chip[data-tone="effects"]
  .otl-community-training-summary-tooltip {
  left:
    auto;

  right:
    0;

  transform:
    none;
}

.otl-community-training-summary-chip.has-tooltip:hover
  .otl-community-training-summary-tooltip,
.otl-community-training-summary-chip.has-tooltip:focus-visible
  .otl-community-training-summary-tooltip {
  display:
    block;
}

.otl-community-training-card:hover,
.otl-community-training-card:focus-within {
  z-index:
    3;
}

.otl-community-training-card-bottom {
  position:
    absolute;

  left:
    16px;

  right:
    16px;

  bottom:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  height:
    32px;

  min-height:
    32px;

  max-height:
    32px;

  margin:
    0;

  padding:
    0;

  border:
    0;
}

button.otl-community-training-heart[data-user-rating="true"]::after {
  content:
    none !important;

  display:
    none !important;
}

button.otl-community-training-heart[data-user-rating="true"] {
  filter:
    brightness(1.08);
}

.otl-community-training-card-actions {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  height:
    32px;

  min-height:
    32px;

  max-height:
    32px;

  margin-left:
    auto;
}

.otl-community-training-rating {
  height:
    32px;

  min-height:
    32px;

  max-height:
    32px;
}

.otl-community-training-report,
.otl-community-training-inspect,
.otl-community-training-open,
.otl-community-training-unlock {
  font:
    inherit;

  font-size:
    .64rem;

  font-weight:
    810;

  white-space:
    nowrap;
}

.otl-community-training-report,
.otl-community-training-inspect {
  display:
    inline-grid;

  place-items:
    center;

  flex:
    0 0 32px;

  box-sizing:
    border-box;

  width:
    32px;

  min-width:
    32px;

  height:
    32px;

  min-height:
    32px;

  aspect-ratio:
    1;

  padding:
    0;

  border:
    1px solid transparent;

  border-radius:
    8px;

  color:
    #64758b;

  background:
    transparent;

  cursor:
    pointer;
}

.otl-community-training-inspect {
  color:
    #8190a4;

  background:
    rgba(15, 23, 42, .16);
}

.otl-community-training-report svg,
.otl-community-training-inspect svg {
  display:
    block;

  width:
    17px;

  height:
    17px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.otl-community-training-open,
.otl-community-training-unlock {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  box-sizing:
    border-box;

  height:
    32px;

  min-height:
    32px;

  padding:
    6px 11px;

  border-radius:
    8px;
}

.otl-community-training-unlock {
  gap:
    6px;

  border:
    1px solid rgba(167, 139, 250, .34);

  color:
    #ddd6fe;

  background:
    rgba(91, 33, 182, .12);

  cursor:
    pointer;
}

@media (hover: hover) {
  .otl-community-training-card:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(
        var(--otl-community-training-accent),
        .76
      );

    background:
      linear-gradient(
        180deg,
        rgba(13, 21, 37, .95),
        rgba(7, 13, 24, .89)
      );

    box-shadow:
      inset 0 0 40px rgba(
        var(--otl-community-training-accent),
        .085
      ),
      inset 0 0 0 1px rgba(
        var(--otl-community-training-accent),
        .055
      ),
      inset 0 1px 0 rgba(255, 255, 255, .035),
      0 12px 30px rgba(
        var(--otl-community-training-accent),
        .06
      );
  }

  .otl-community-training-report:hover,
  .otl-community-training-inspect:hover {
    border-color:
      rgba(148, 163, 184, .18);

    color:
      #cbd5e1;

    background:
      rgba(30, 41, 59, .28);
  }
}

@media (max-width: 1280px) {
  .otl-community-training-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .otl-community-training-controls {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .otl-community-training-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .otl-community-training-summary {
    overflow-x:
      auto;

    padding-bottom:
      2px;

    scrollbar-width:
      none;
  }

  .otl-community-training-summary::-webkit-scrollbar {
    display:
      none;
  }
}

@media (max-width: 520px) {
  .otl-community-tab {
    min-height:
      50px;

    padding-inline:
      8px;

    font-size:
      .72rem;
  }

  .otl-community-training-card {
    padding:
      13px 13px 68px;
  }

  .otl-community-training-card-bottom {
    left:
      13px;

    right:
      13px;

    bottom:
      13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .otl-community-training-card {
    transition:
      none;
  }

  .otl-community-training-card:hover {
    transform:
      none;
  }
}


/* Footer controls must ignore broader button sizing rules. */
.otl-community-training-card-bottom
.otl-community-training-report,
.otl-community-training-card-bottom
.otl-community-training-inspect,
.otl-community-training-card-bottom
.otl-community-training-open,
.otl-community-training-card-bottom
.otl-community-training-unlock {
  box-sizing:
    border-box !important;

  height:
    32px !important;

  min-height:
    32px !important;

  max-height:
    32px !important;

  margin:
    0 !important;

  vertical-align:
    middle;
}

.otl-community-training-card-bottom
.otl-community-training-report,
.otl-community-training-card-bottom
.otl-community-training-inspect {
  width:
    32px !important;

  min-width:
    32px !important;

  max-width:
    32px !important;

  padding:
    0 !important;
}

.otl-community-training-card-bottom
.otl-community-training-open,
.otl-community-training-card-bottom
.otl-community-training-unlock {
  padding:
    0 11px !important;

  line-height:
    1 !important;
}

/* ==========================================================
   Community navigation + leaderboard — October polish
   ========================================================== */

.otl-community-tabs {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    10px;

  padding:
    0 0 16px;

  overflow:
    visible;

  border:
    0;

  border-bottom:
    1px solid rgba(148, 163, 184, .11);

  border-radius:
    0;

  background:
    transparent;
}

.otl-community-tab {
  --otl-community-tab-accent:
    148, 163, 184;

  position:
    relative;

  flex:
    initial;

  min-width:
    0;

  min-height:
    60px;

  padding:
    13px 18px;

  border:
    1px solid rgba(
      var(--otl-community-tab-accent),
      .11
    );

  border-radius:
    11px;

  color:
    rgba(
      var(--otl-community-tab-accent),
      .72
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        var(--otl-community-tab-accent),
        .035
      ),
      rgba(2, 6, 23, .14)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .018);

  font-size:
    .92rem;

  font-weight:
    850;

  text-align:
    center;

  transform:
    none !important;
}

.otl-community-tab[data-community-tab="trainings"] {
  --otl-community-tab-accent:
    45, 212, 191;
}

.otl-community-tab[data-community-tab="leaderboard"] {
  --otl-community-tab-accent:
    250, 204, 21;
}

.otl-community-tab[data-community-tab="profile"] {
  --otl-community-tab-accent:
    167, 139, 250;
}

.otl-community-tab[aria-selected="true"] {
  color:
    #f8fafc;

  border-color:
    rgba(
      var(--otl-community-tab-accent),
      .34
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        var(--otl-community-tab-accent),
        .13
      ),
      rgba(
        var(--otl-community-tab-accent),
        .045
      )
    );

  box-shadow:
    inset 0 -3px 0 rgba(
      var(--otl-community-tab-accent),
      .82
    ),
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 8px 24px rgba(
      var(--otl-community-tab-accent),
      .035
    );
}

.otl-community-tab:focus-visible {
  outline:
    2px solid rgba(
      var(--otl-community-tab-accent),
      .62
    );

  outline-offset:
    2px;
}

@media (hover: hover) {
  .otl-community-tab:hover:not([aria-selected="true"]) {
    color:
      rgba(
        var(--otl-community-tab-accent),
        .94
      );

    border-color:
      rgba(
        var(--otl-community-tab-accent),
        .22
      );

    background:
      rgba(
        var(--otl-community-tab-accent),
        .07
      );
  }
}


/* Leaderboard */

.otl-community-leaderboard {
  position:
    relative;

  overflow:
    hidden;

  padding:
    18px;

  border:
    1px solid rgba(250, 204, 21, .12);

  border-radius:
    15px;

  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 31, .92),
      rgba(5, 10, 20, .95)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 16px 36px rgba(0, 0, 0, .10);
}

.otl-community-leaderboard-halo {
  display:
    none;
}

.otl-community-leaderboard-header {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;
}

.otl-community-leaderboard-header h4 {
  margin:
    0;

  color:
    #f5f7fb;

  font-size:
    1.08rem;

  font-weight:
    900;

  letter-spacing:
    -.02em;
}

.otl-community-leaderboard-count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-width:
    0;

  padding:
    7px 10px;

  border:
    1px solid rgba(250, 204, 21, .16);

  border-radius:
    999px;

  color:
    #b8a66a;

  background:
    rgba(113, 63, 18, .08);

  line-height:
    1;
}

.otl-community-leaderboard-count strong {
  color:
    #f5e6a7;

  font-size:
    .8rem;

  font-weight:
    900;

  letter-spacing:
    -.02em;
}

.otl-community-leaderboard-count span {
  margin:
    0;

  color:
    #8f835c;

  font-size:
    .55rem;

  font-weight:
    820;

  letter-spacing:
    .02em;

  text-transform:
    lowercase;
}


/* Empty state */

.otl-community-leaderboard[data-state="empty"]
.otl-community-podium,
.otl-community-leaderboard[data-state="empty"]
.otl-community-leaderboard-list {
  display:
    none;
}

.otl-community-leaderboard-empty {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  justify-items:
    center;

  gap:
    7px;

  min-height:
    150px;

  margin:
    8px 0 0;

  padding:
    26px 16px 22px;

  border:
    0;

  border-radius:
    12px;

  text-align:
    center;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(250, 204, 21, .055),
      transparent 48%
    );
}

.otl-community-leaderboard-empty[hidden] {
  display:
    none !important;
}

.otl-community-leaderboard-empty
> .otl-community-leaderboard-empty-icon {
  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

  margin-bottom:
    2px;

  border:
    1px solid rgba(250, 204, 21, .18);

  border-radius:
    50%;

  color:
    #e7c85a;

  background:
    rgba(113, 63, 18, .09);

  box-shadow:
    0 0 22px rgba(250, 204, 21, .045);

  font-size:
    .9rem;

  line-height:
    1;
}

.otl-community-leaderboard-empty > strong {
  color:
    #eef2f7;

  font-size:
    .9rem;

  font-weight:
    860;
}

.otl-community-leaderboard-empty p {
  max-width:
    360px;

  margin:
    0;

  color:
    #6f7f93;

  font-size:
    .65rem;

  line-height:
    1.5;
}


/* Top three */

.otl-community-podium {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items:
    end;

  gap:
    12px;

  margin-top:
    20px;
}

.otl-community-leaderboard[data-count="1"]
.otl-community-podium {
  grid-template-columns:
    minmax(220px, 360px);

  justify-content:
    center;
}

.otl-community-leaderboard[data-count="2"]
.otl-community-podium {
  grid-template-columns:
    repeat(2, minmax(220px, 1fr));

  width:
    min(760px, 100%);

  margin-inline:
    auto;
}

.otl-community-podium-slot {
  position:
    relative;

  display:
    grid;

  justify-items:
    center;

  gap:
    7px;

  min-width:
    0;

  min-height:
    158px;

  padding:
    15px 12px 13px;

  overflow:
    hidden;

  border:
    1px solid rgba(148, 163, 184, .14);

  border-radius:
    14px;

  color:
    inherit;

  text-align:
    center;

  text-decoration:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(17, 25, 41, .78),
      rgba(7, 12, 23, .88)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.otl-community-podium-slot[data-place="1"] {
  min-height:
    178px;

  border-color:
    rgba(250, 204, 21, .34);

  background:
    linear-gradient(
      180deg,
      rgba(113, 63, 18, .18),
      rgba(20, 18, 14, .42) 42%,
      rgba(7, 12, 23, .91)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 12px 28px rgba(250, 204, 21, .035);
}

.otl-community-podium-slot[data-place="2"] {
  border-color:
    rgba(203, 213, 225, .24);

  background:
    linear-gradient(
      180deg,
      rgba(100, 116, 139, .11),
      rgba(7, 12, 23, .90)
    );
}

.otl-community-podium-slot[data-place="3"] {
  border-color:
    rgba(200, 135, 85, .27);

  background:
    linear-gradient(
      180deg,
      rgba(120, 71, 38, .12),
      rgba(7, 12, 23, .90)
    );
}

.otl-community-podium-slot[data-place="1"]::before {
  display:
    none;
}

.otl-community-podium-crown {
  display:
    grid;

  place-items:
    center;

  width:
    25px;

  height:
    25px;

  border:
    1px solid rgba(148, 163, 184, .14);

  border-radius:
    999px;

  color:
    #7d8da2;

  background:
    rgba(15, 23, 42, .34);

  font-size:
    .58rem;

  font-weight:
    900;

  line-height:
    1;
}

[data-place="1"] .otl-community-podium-crown {
  border-color:
    rgba(250, 204, 21, .28);

  color:
    #fde68a;

  background:
    rgba(113, 63, 18, .13);

  text-shadow:
    none;
}

[data-place="2"] .otl-community-podium-crown {
  border-color:
    rgba(203, 213, 225, .24);

  color:
    #d7dee7;

  background:
    rgba(71, 85, 105, .12);
}

[data-place="3"] .otl-community-podium-crown {
  border-color:
    rgba(200, 135, 85, .25);

  color:
    #d59a6d;

  background:
    rgba(120, 71, 38, .12);
}

.otl-community-podium-avatar {
  width:
    46px;

  height:
    46px;

  border:
    1px solid rgba(148, 163, 184, .18);

  color:
    #e0e7f0;

  background:
    rgba(30, 41, 59, .40);
}

[data-place="1"] .otl-community-podium-avatar {
  width:
    54px;

  height:
    54px;

  border-color:
    rgba(250, 204, 21, .30);

  color:
    #fff4c2;

  background:
    rgba(113, 63, 18, .15);
}

[data-place="2"] .otl-community-podium-avatar {
  border-color:
    rgba(203, 213, 225, .25);

  background:
    rgba(71, 85, 105, .15);
}

[data-place="3"] .otl-community-podium-avatar {
  border-color:
    rgba(200, 135, 85, .25);

  background:
    rgba(120, 71, 38, .14);
}

.otl-community-podium-score strong {
  color:
    #eef2f7;

  font-size:
    1.08rem;
}

[data-place="1"] .otl-community-podium-score strong {
  color:
    #fff0aa;

  font-size:
    1.24rem;

  text-shadow:
    none;
}

.otl-community-podium-score small {
  color:
    #66768a;

  letter-spacing:
    .08em;
}

[data-place="1"] .otl-community-light-meter-fill {
  background:
    linear-gradient(
      90deg,
      #b78b17,
      #facc15,
      #fde68a
    );

  box-shadow:
    0 0 8px rgba(250, 204, 21, .16);
}

[data-place="2"] .otl-community-light-meter-fill {
  background:
    linear-gradient(
      90deg,
      #64748b,
      #cbd5e1,
      #f1f5f9
    );

  box-shadow:
    0 0 7px rgba(203, 213, 225, .12);
}

[data-place="3"] .otl-community-light-meter-fill {
  background:
    linear-gradient(
      90deg,
      #7c4a2d,
      #c88755,
      #e7ad78
    );

  box-shadow:
    0 0 7px rgba(200, 135, 85, .12);
}

@media (hover: hover) {
  .otl-community-podium-slot:hover {
    transform:
      translateY(-2px);
  }

  .otl-community-podium-slot[data-place="1"]:hover {
    border-color:
      rgba(250, 204, 21, .48);
  }

  .otl-community-podium-slot[data-place="2"]:hover {
    border-color:
      rgba(203, 213, 225, .36);
  }

  .otl-community-podium-slot[data-place="3"]:hover {
    border-color:
      rgba(200, 135, 85, .40);
  }
}


/* Rank 4+ */

.otl-community-leaderboard-list {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  gap:
    0;

  margin-top:
    16px;

  border-top:
    1px solid rgba(148, 163, 184, .10);
}

.otl-community-leaderboard-row {
  display:
    grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    minmax(110px, .7fr)
    64px;

  gap:
    12px;

  align-items:
    center;

  min-height:
    56px;

  padding:
    9px 4px;

  border:
    0;

  border-bottom:
    1px solid rgba(148, 163, 184, .085);

  border-radius:
    0;

  color:
    inherit;

  background:
    transparent;

  text-decoration:
    none;

  transform:
    none;
}

.otl-community-leaderboard-place {
  display:
    block;

  width:
    auto;

  height:
    auto;

  border:
    0;

  border-radius:
    0;

  color:
    #728197;

  background:
    transparent;

  font-size:
    .64rem;

  font-weight:
    900;

  text-align:
    center;
}

.otl-community-leaderboard-row
.otl-community-light-meter {
  height:
    3px;

  background:
    rgba(148, 163, 184, .075);
}

.otl-community-leaderboard-row
.otl-community-light-meter-fill {
  background:
    linear-gradient(
      90deg,
      #6366f1,
      #8b5cf6
    );

  box-shadow:
    none;
}

@media (hover: hover) {
  .otl-community-leaderboard-row:hover {
    transform:
      none;

    border-color:
      rgba(148, 163, 184, .085);

    background:
      rgba(250, 204, 21, .025);
  }
}


@media (max-width: 760px) {
  .otl-community-tabs {
    gap:
      7px;
  }

  .otl-community-tab {
    min-height:
      52px;

    padding:
      11px 10px;

    font-size:
      .78rem;
  }

  .otl-community-leaderboard-row {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      58px;
  }

  .otl-community-leaderboard-row
  > .otl-community-light-meter {
    grid-column:
      2 / -1;
  }
}

@media (max-width: 560px) {
  .otl-community-leaderboard {
    padding:
      14px;
  }

  .otl-community-leaderboard-header {
    align-items:
      center;

    flex-direction:
      row;
  }

  .otl-community-podium {
    grid-template-columns:
      minmax(0, 1fr);

    align-items:
      stretch;

    gap:
      8px;
  }

  .otl-community-podium-slot,
  .otl-community-podium-slot[data-place="1"] {
    min-height:
      0;

    padding:
      12px;

    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    justify-items:
      start;

    text-align:
      left;
  }

  .otl-community-podium-slot[data-place="1"] {
    order:
      -1;
  }

  .otl-community-podium-crown {
    position:
      absolute;

    top:
      10px;

    right:
      10px;
  }

  .otl-community-podium-avatar {
    grid-row:
      1 / span 2;
  }

  .otl-community-podium-identity {
    align-self:
      center;
  }

  .otl-community-podium-username {
    justify-self:
      start;
  }

  .otl-community-podium-score {
    align-self:
      center;

    justify-items:
      end;
  }

  .otl-community-podium-slot
  > .otl-community-light-meter {
    grid-column:
      2 / -1;
  }

  .otl-community-podium-prestige {
    grid-column:
      2 / -1;

    justify-self:
      start;
  }
}

@media (max-width: 430px) {
  .otl-community-tab {
    min-height:
      48px;

    padding-inline:
      7px;

    font-size:
      .7rem;
  }

  .otl-community-leaderboard-header {
    gap:
      10px;
  }

  .otl-community-leaderboard-count {
    padding:
      6px 8px;
  }
}

/* ==========================================================
   Community discovery + compact profile — October refinement
   ========================================================== */

/* Neutral navigation; only the selected destination owns color. */
.otl-community-tab {
  color:
    #9aa8ba;

  border-color:
    rgba(148, 163, 184, .11);

  background:
    linear-gradient(
      180deg,
      rgba(30, 41, 59, .18),
      rgba(2, 6, 23, .10)
    );
}

.otl-community-tab[aria-selected="true"] {
  color:
    #f8fafc;

  border-color:
    rgba(
      var(--otl-community-tab-accent),
      .34
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        var(--otl-community-tab-accent),
        .10
      ),
      rgba(
        var(--otl-community-tab-accent),
        .035
      )
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    inset 0 0 22px rgba(
      var(--otl-community-tab-accent),
      .035
    ),
    0 8px 24px rgba(
      var(--otl-community-tab-accent),
      .025
    );
}

@media (hover: hover) {
  .otl-community-tab:hover:not([aria-selected="true"]) {
    color:
      #d7e0eb;

    border-color:
      rgba(148, 163, 184, .18);

    background:
      rgba(30, 41, 59, .25);
  }
}


/* Discovery toolbar */
.otl-community-training-controls {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    160px
    112px;

  gap:
    9px;

  margin:
    0;
}

.otl-community-training-controls
> input,
.otl-community-training-controls
> select,
.otl-community-filter-button {
  box-sizing:
    border-box;

  min-height:
    46px;

  border:
    1px solid rgba(148, 163, 184, .18);

  border-radius:
    10px;

  color:
    #dce5f1;

  background:
    #0b1220;

  font:
    inherit;

  font-size:
    .74rem;
}

.otl-community-training-controls
> input {
  padding:
    10px 13px;
}

.otl-community-training-controls
> input::placeholder {
  color:
    #75859a;
}

.otl-community-training-controls
> select {
  padding:
    10px 38px 10px 12px;

  cursor:
    pointer;
}

.otl-community-filter-shell {
  position:
    relative;

  min-width:
    0;
}

.otl-community-filter-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  width:
    100%;

  padding:
    9px 12px;

  cursor:
    pointer;

  font-weight:
    820;
}

.otl-community-filter-popover {
  position:
    absolute;

  top:
    calc(100% + 8px);

  right:
    0;

  z-index:
    40;

  width:
    min(610px, calc(100vw - 42px));

  padding:
    14px;

  border:
    1px solid rgba(148, 163, 184, .18);

  border-radius:
    13px;

  color:
    #d7e0eb;

  background:
    rgba(7, 12, 23, .985);

  box-shadow:
    0 22px 54px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .025);

  backdrop-filter:
    blur(10px);
}

.otl-community-filter-popover[hidden] {
  display:
    none !important;
}

.otl-community-filter-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    11px;
}

.otl-community-filter-header > strong {
  color:
    #f1f5f9;

  font-size:
    .74rem;

  font-weight:
    900;
}

.otl-community-filter-reset {
  padding:
    0;

  border:
    0;

  color:
    #718197;

  background:
    transparent;

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    .62rem;

  font-weight:
    800;
}

.otl-community-filter-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    10px 12px;
}

.otl-community-filter-field {
  position:
    relative;

  min-width:
    0;
}

.otl-community-filter-field
> strong {
  display:
    block;

  margin:
    0 0 5px;

  color:
    #718197;

  font-size:
    .52rem;

  font-weight:
    900;

  letter-spacing:
    .075em;
}

.otl-community-filter-segments {
  display:
    flex;

  min-width:
    0;

  gap:
    4px;

  padding:
    3px;

  border:
    1px solid rgba(148, 163, 184, .10);

  border-radius:
    9px;

  background:
    rgba(15, 23, 42, .30);
}

.otl-community-filter-segments button,
.otl-community-filter-feature {
  min-width:
    0;

  min-height:
    29px;

  padding:
    5px 8px;

  border:
    1px solid transparent;

  border-radius:
    7px;

  color:
    #8494a9;

  background:
    transparent;

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    .57rem;

  font-weight:
    800;

  white-space:
    nowrap;
}

.otl-community-filter-segments button {
  flex:
    1 1 0;
}

.otl-community-filter-segments button[aria-pressed="true"],
.otl-community-filter-feature[aria-pressed="true"] {
  border-color:
    rgba(45, 212, 191, .22);

  color:
    #b8eee6;

  background:
    rgba(13, 148, 136, .11);
}

.otl-community-filter-feature {
  width:
    100%;

  border-color:
    rgba(148, 163, 184, .10);

  color:
    #9b88c8;

  background:
    rgba(76, 29, 149, .08);
}

.otl-community-filter-feature[aria-pressed="true"] {
  border-color:
    rgba(192, 132, 252, .24);

  color:
    #d6bcfa;

  background:
    rgba(107, 33, 168, .15);
}


/* Compact searchable multi-selects */
.otl-community-filter-multiselect {
  position:
    relative;
}

.otl-community-filter-multiselect summary {
  display:
    flex;

  align-items:
    center;

  min-height:
    35px;

  padding:
    7px 28px 7px 9px;

  overflow:
    hidden;

  border:
    1px solid rgba(148, 163, 184, .13);

  border-radius:
    9px;

  color:
    #a8b4c4;

  background:
    #0b1220;

  cursor:
    pointer;

  font-size:
    .61rem;

  font-weight:
    760;

  list-style:
    none;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.otl-community-filter-multiselect summary::-webkit-details-marker {
  display:
    none;
}

.otl-community-filter-multiselect summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 7.25 10 12.75l5.5-5.5' fill='none' stroke='%2374859a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

.otl-community-filter-multiselect[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.otl-community-filter-multiselect-menu {
  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    calc(100% + 5px);

  z-index:
    50;

  padding:
    7px;

  border:
    1px solid rgba(148, 163, 184, .18);

  border-radius:
    9px;

  background:
    #080e1b;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, .36);
}

.otl-community-filter-multiselect-menu
input {
  box-sizing:
    border-box;

  width:
    100%;

  min-height:
    32px;

  padding:
    6px 8px;

  border:
    1px solid rgba(148, 163, 184, .14);

  border-radius:
    7px;

  color:
    #d4deea;

  background:
    #0b1220;

  font:
    inherit;

  font-size:
    .61rem;
}

.otl-community-filter-options {
  display:
    grid;

  gap:
    2px;

  max-height:
    154px;

  margin-top:
    6px;

  overflow-y:
    auto;

  scrollbar-width:
    thin;
}

.otl-community-filter-option {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-height:
    29px;

  padding:
    5px 6px;

  border-radius:
    6px;

  color:
    #9aa9ba;

  cursor:
    pointer;

  font-size:
    .59rem;

  font-weight:
    700;
}

.otl-community-filter-option:hover {
  color:
    #d7e0eb;

  background:
    rgba(30, 41, 59, .40);
}

.otl-community-filter-option input {
  width:
    13px;

  height:
    13px;

  margin:
    0;

  accent-color:
    #2dd4bf;
}

.otl-community-filter-option-empty {
  padding:
    7px 6px;

  color:
    #66768a;

  font-size:
    .58rem;
}

.otl-community-filter-footer {
  display:
    flex;

  justify-content:
    flex-end;

  margin-top:
    12px;

  padding-top:
    10px;

  border-top:
    1px solid rgba(148, 163, 184, .09);
}

.otl-community-filter-done {
  min-height:
    34px;

  padding:
    7px 11px;

  border:
    1px solid rgba(45, 212, 191, .25);

  border-radius:
    8px;

  color:
    #d2f5ef;

  background:
    rgba(13, 148, 136, .13);

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    .62rem;

  font-weight:
    850;
}


/* Active filter strip */
.otl-community-active-filters {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;

  margin:
    8px 0 0;

  overflow:
    hidden;

  white-space:
    nowrap;
}

.otl-community-active-filters[hidden] {
  display:
    none !important;
}

.otl-community-active-filter,
.otl-community-active-filter-clear {
  flex:
    0 0 auto;

  min-height:
    25px;

  padding:
    4px 8px;

  border:
    1px solid rgba(148, 163, 184, .12);

  border-radius:
    999px;

  color:
    #9cadbf;

  background:
    rgba(15, 23, 42, .30);

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    .55rem;

  font-weight:
    760;
}

.otl-community-active-filter-more {
  flex:
    0 0 auto;

  color:
    #718197;

  font-size:
    .56rem;

  font-weight:
    760;
}

.otl-community-active-filter-clear {
  margin-left:
    2px;

  border-color:
    transparent;

  color:
    #718197;

  background:
    transparent;
}


/* Compact My Profile */
.otl-community-profile-panel {
  max-width:
    980px;

  margin-inline:
    auto;
}

.otl-community-profile-header {
  padding:
    0 2px 12px;
}

.otl-community-profile-header h4 {
  margin:
    0;

  font-size:
    1.05rem;
}

.otl-community-profile-settings {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    10px;

  padding:
    0;

  border:
    0;
}

.otl-community-profile-group {
  overflow:
    hidden;

  border:
    1px solid rgba(148, 163, 184, .11);

  border-radius:
    11px;

  background:
    rgba(9, 15, 28, .48);
}

.otl-community-profile-group:last-child {
  grid-column:
    1 / -1;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.otl-community-profile-group-label {
  grid-column:
    1 / -1;

  display:
    block;

  padding:
    9px 11px 7px;

  color:
    #68798f;

  font-size:
    .48rem;

  font-weight:
    900;

  letter-spacing:
    .105em;
}

.otl-community-profile-row {
  min-height:
    54px;

  padding:
    9px 11px;

  border-top:
    1px solid rgba(148, 163, 184, .08);
}

.otl-community-profile-row strong {
  font-size:
    .7rem;
}

.otl-community-profile-row select {
  min-width:
    150px;

  min-height:
    36px;

  font-size:
    .66rem;
}

.otl-community-profile-group:last-child
.otl-community-profile-row
+ .otl-community-profile-row {
  border-left:
    1px solid rgba(148, 163, 184, .08);
}


/* Tighten the empty leaderboard further. */
.otl-community-leaderboard-empty {
  min-height:
    112px;

  padding:
    18px 14px 16px;
}


@media (max-width: 760px) {
  .otl-community-training-controls {
    grid-template-columns:
      minmax(0, 1fr)
      138px
      102px;
  }

  .otl-community-filter-popover {
    position:
      fixed;

    left:
      10px;

    right:
      10px;

    top:
      auto;

    bottom:
      10px;

    width:
      auto;

    max-height:
      calc(100vh - 20px);

    overflow-y:
      auto;
  }
}

@media (max-width: 620px) {
  .otl-community-training-controls {
    grid-template-columns:
      minmax(0, 1fr)
      105px;
  }

  .otl-community-filter-shell {
    grid-column:
      1 / -1;
  }

  .otl-community-filter-grid,
  .otl-community-profile-settings,
  .otl-community-profile-group:last-child {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .otl-community-profile-group:last-child {
    grid-column:
      auto;
  }

  .otl-community-profile-group:last-child
  .otl-community-profile-row
  + .otl-community-profile-row {
    border-left:
      0;
  }
}

.otl-community-leaderboard-join {
  min-height:
    34px;

  margin-top:
    5px;

  padding:
    7px 12px;

  border:
    1px solid rgba(250, 204, 21, .25);

  border-radius:
    8px;

  color:
    #f3df88;

  background:
    rgba(113, 63, 18, .12);

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    .62rem;

  font-weight:
    850;
}

.otl-community-leaderboard-join[hidden] {
  display:
    none !important;
}

@media (hover: hover) {
  .otl-community-leaderboard-join:hover {
    border-color:
      rgba(250, 204, 21, .40);

    background:
      rgba(113, 63, 18, .18);
  }
}

/* Keep the three Community tabs clear of the container's clipped edges. */
.otl-community-tabs {
  box-sizing:
    border-box;

  width:
    calc(100% - 8px);

  margin-inline:
    4px;
}

/* Restore the right edge removed by the legacy segmented-tab rule. */
.otl-community-tab:last-child {
  border-right:
    1px solid rgba(
      var(--otl-community-tab-accent),
      .11
    );
}

.otl-community-tab:last-child[aria-selected="true"] {
  border-right-color:
    rgba(
      var(--otl-community-tab-accent),
      .34
    );
}

/* Community now contains only discovery and rankings. */
.otl-community-tabs {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

/* Profile settings now live in the global Profile / Account hub. */
#otlAccountPlayerProfileHost
.otl-community-profile-panel {
  width:
    100%;

  max-width:
    none;

  margin:
    0;

  padding:
    0;
}

#otlAccountPlayerProfileHost
.otl-community-profile-header {
  padding:
    0 2px 12px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-header h4 {
  font-size:
    .9rem;
}

#otlAccountPlayerProfileHost
.otl-community-public-profile-link {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    32px;

  padding:
    6px 10px;

  border:
    1px solid rgba(96, 165, 250, .18);

  border-radius:
    8px;

  color:
    #9cc9ff;

  background:
    rgba(30, 64, 175, .08);

  text-decoration:
    none;

  font-weight:
    800;
}

@media (hover: hover) {
  #otlAccountPlayerProfileHost
  .otl-community-public-profile-link:hover {
    border-color:
      rgba(96, 165, 250, .34);

    background:
      rgba(30, 64, 175, .14);
  }
}

@media (max-width: 620px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}

/* ==========================================================
   Global Profile hub — identity-first layout
   ========================================================== */

#otlAccountPlayerProfileHost
.otl-community-profile-preview {
  display:
    grid;

  grid-template-columns:
    56px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    13px;

  margin-bottom:
    12px;

  padding:
    14px;

  border:
    1px solid rgba(129, 140, 248, .16);

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      rgba(79, 70, 229, .10),
      rgba(14, 116, 144, .055) 48%,
      rgba(7, 13, 25, .50)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar {
  display:
    grid;

  place-items:
    center;

  width:
    56px;

  height:
    56px;

  border:
    1px solid rgba(129, 140, 248, .25);

  border-radius:
    50%;

  color:
    #e0e7ff;

  background:
    linear-gradient(
      145deg,
      rgba(79, 70, 229, .30),
      rgba(14, 116, 144, .18)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 8px 22px rgba(0, 0, 0, .16);

  font-size:
    1.15rem;

  font-weight:
    900;

  overflow:
    hidden;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  border-radius:
    inherit;

  object-fit:
    cover;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-identity {
  display:
    grid;

  gap:
    4px;

  min-width:
    0;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername {
  width:
    fit-content;

  max-width:
    100%;

  overflow:
    hidden;

  color:
    #f1f5f9;

  font-size:
    1.05rem;

  font-weight:
    900;

  letter-spacing:
    -.018em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

#otlAccountPlayerProfileHost .otl-community-profile-username-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#otlAccountPlayerProfileHost .otl-community-profile-username-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #93c5fd;
  cursor: pointer;
}

#otlAccountPlayerProfileHost .otl-community-profile-username-edit[hidden] {
  display: none;
}

#otlAccountPlayerProfileHost .otl-community-profile-username-edit svg {
  width: 16px;
  height: 16px;
}

#otlAccountPlayerProfileHost .otl-community-profile-username-edit:hover {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(147, 197, 253, .25);
}

#otlAccountPlayerProfileHost .otl-community-profile-username-edit:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewTitle {
  color:
    #718198;

  font-size:
    .68rem;

  font-weight:
    720;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-actions {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-settings {
  grid-template-columns:
    minmax(0, 1fr);

  gap:
    0;

  min-width:
    0;
}

#otlAccountPlayerProfileHost
.otl-community-profile-group,
#otlAccountPlayerProfileHost
.otl-community-profile-group:last-child {
  grid-column:
    1 / -1;

  display:
    block;

  width:
    100%;

  min-width:
    0;

  box-sizing:
    border-box;

  overflow:
    hidden;

  border:
    1px solid rgba(148, 163, 184, .11);

  border-radius:
    12px;

  background:
    rgba(7, 13, 25, .44);
}

#otlAccountPlayerProfileHost
.otl-community-profile-group-label {
  padding:
    10px 12px 8px;

  color:
    #718198;

  font-size:
    .5rem;

  letter-spacing:
    .105em;
}

#otlAccountPlayerProfileHost
.otl-community-profile-group-label--divider {
  margin-top:
    2px;

  padding-top:
    12px;

  border-top:
    1px solid rgba(148, 163, 184, .10);
}

#otlAccountPlayerProfileHost
.otl-community-profile-row {
  min-height:
    58px;

  padding:
    10px 12px;

  border-top:
    1px solid rgba(148, 163, 184, .075);
}

#otlAccountPlayerProfileHost
.otl-community-profile-row + .otl-community-profile-row {
  border-left:
    0;
}

#otlAccountPlayerProfileHost
.otl-community-profile-row > strong {
  font-size:
    .72rem;
}

#otlAccountPlayerProfileHost
.otl-community-profile-row select {
  min-width:
    142px;

  max-width:
    190px;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="bronze"] {
  color: #c88755;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="silver"] {
  color: #d2d7de;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="gold"] {
  color: #e4bd4f;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="sapphire"] {
  color: #8db8ff;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="ruby"] {
  color: #ff8f9d;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="emerald"] {
  color: #79e0ae;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="amethyst"] {
  color: #c5a3ff;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="diamond"] {
  color: #d9f5ff;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="prismatic"],
#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="spectral"] {
  color:
    transparent;

  -webkit-background-clip:
    text;

  background-clip:
    text;
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="prismatic"] {
  background-image:
    linear-gradient(
      90deg,
      #f9a8d4,
      #c4b5fd,
      #7dd3fc,
      #86efac,
      #fde68a
    );
}

#otlAccountPlayerProfileHost
#otlCommunityProfilePreviewUsername[data-theme="spectral"] {
  background-image:
    linear-gradient(
      90deg,
      #f8fafc,
      #a5f3fc,
      #c4b5fd,
      #f8fafc
    );
}

@media (max-width: 620px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-preview {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    gap:
      11px;

    padding:
      12px;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-preview-avatar {
    width:
      48px;

    height:
      48px;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-preview-actions {
    grid-column:
      1 / -1;

    justify-content:
      flex-start;

    padding-left:
      59px;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-settings {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* Player level is part of identity, not another settings card. */
#otlAccountPlayerProfileHost
.otl-community-profile-level {
  grid-column:
    1 / -1;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    7px 12px;

  padding:
    12px 1px 0;

  border-top:
    1px solid rgba(129, 140, 248, .10);
}

#otlAccountPlayerProfileHost
.otl-community-profile-level-heading {
  grid-column:
    1 / -1;

  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    12px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-level-heading strong {
  color:
    #eef2ff;

  font-size:
    .82rem;

  font-weight:
    900;
}

#otlAccountPlayerProfileHost
.otl-community-profile-level-heading span {
  color:
    #a5b4fc;

  font-size:
    .68rem;

  font-weight:
    850;
}

#otlAccountPlayerProfileHost
.otl-community-profile-xp-bar {
  display:
    block;

  height:
    6px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(148, 163, 184, .10);

  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .22);
}

#otlAccountPlayerProfileHost
.otl-community-profile-xp-fill {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #6366f1,
      #8b5cf6,
      #c084fc
    );

  box-shadow:
    0 0 12px rgba(139, 92, 246, .20);

  transition:
    width 220ms ease;
}

#otlAccountPlayerProfileHost
.otl-community-profile-level > small {
  color:
    #718198;

  font-size:
    .59rem;

  font-weight:
    720;

  white-space:
    nowrap;
}

@media (max-width: 620px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-level {
    grid-template-columns:
      minmax(0, 1fr);
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-level > small {
    white-space:
      normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-xp-fill {
    transition:
      none;
  }
}

#otlAccountPlayerProfileHost
#otlCommunityProfileLevel.is-level-up {
  animation:
    otl-profile-level-up
    1.35s
    cubic-bezier(.2,.8,.2,1)
    both;
}

@keyframes otl-profile-level-up {
  0%,
  100% {
    color:
      #eef2ff;

    text-shadow:
      none;
  }

  30% {
    color:
      #f5d0fe;

    text-shadow:
      0 0 18px rgba(192, 132, 252, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  #otlAccountPlayerProfileHost
  #otlCommunityProfileLevel.is-level-up {
    animation:
      none;
  }
}

/* Keep Profile controls compact and stop labels from collapsing into narrow columns. */
#otlAccountPlayerProfileHost
.otl-community-profile-row {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(170px, 220px);

  gap:
    18px;

  min-width:
    0;
}

#otlAccountPlayerProfileHost
.otl-community-profile-row > strong {
  min-width:
    0;

  line-height:
    1.25;
}

#otlAccountPlayerProfileHost
.otl-community-profile-row select {
  width:
    100%;

  min-width:
    0;

  max-width:
    220px;

  justify-self:
    end;
}

#otlAccountPlayerProfileHost
.otl-community-profile-row--avatar {
  grid-template-columns:
    minmax(0, 1fr);

  gap:
    10px;

  padding-top:
    13px;

  padding-bottom:
    14px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-row--avatar > strong {
  width:
    100%;
}

#otlAccountPlayerProfileHost
.otl-community-avatar-grid {
  display:
    grid;

  grid-template-columns:
    repeat(auto-fill, 52px);

  gap:
    9px;

  width:
    100%;

  justify-content:
    start;
}

#otlAccountPlayerProfileHost
.otl-community-avatar-option {
  display:
    block;

  width:
    52px;

  height:
    52px;

  padding:
    2px;

  overflow:
    hidden;

  border:
    1px solid rgba(148, 163, 184, .18);

  border-radius:
    50%;

  background:
    rgba(15, 23, 42, .58);

  box-shadow:
    0 3px 10px rgba(0, 0, 0, .16);

  cursor:
    pointer;

  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease;
}

#otlAccountPlayerProfileHost
.otl-community-avatar-option:hover:not(:disabled) {
  border-color:
    rgba(148, 163, 184, .40);

  transform:
    translateY(-1px);
}

#otlAccountPlayerProfileHost
.otl-community-avatar-option[aria-pressed="true"] {
  border-color:
    rgba(96, 165, 250, .92);

  box-shadow:
    0 0 0 2px rgba(96, 165, 250, .20),
    0 5px 14px rgba(0, 0, 0, .22);
}

#otlAccountPlayerProfileHost
.otl-community-avatar-option:focus-visible {
  outline:
    2px solid rgba(96, 165, 250, .92);

  outline-offset:
    3px;
}

#otlAccountPlayerProfileHost
.otl-community-avatar-option:disabled {
  cursor:
    not-allowed;

  opacity:
    .48;
}

#otlAccountPlayerProfileHost
.otl-community-avatar-option img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  border-radius:
    inherit;

  object-fit:
    cover;
}

#otlAccountPlayerProfileHost
.otl-community-profile-row--toggle
.otl-community-toggle {
  justify-self:
    end;
}

.otl-community-profile-modal-metric.is-obsidian {
  border-color:
    rgba(196, 181, 253, .16);

  background:
    rgba(0, 0, 0, .20);
}

@media (max-width: 760px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-settings {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-row {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      8px;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-row select,
  #otlAccountPlayerProfileHost
  .otl-community-profile-row--toggle
  .otl-community-toggle {
    justify-self:
      stretch;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-row--toggle
  .otl-community-toggle {
    justify-self:
      start;
  }
}

/* ==========================================================
   Player Level cycle — hue every 10 levels, prestige every 100
   ========================================================== */

.otl-community-profile-level,
.otl-level-label,
.otl-community-profile-modal-level {
  --otl-level-rgb: 148, 163, 184;
  --otl-level-border-alpha: .22;
  --otl-level-fill-alpha: .08;
  --otl-level-glow-alpha: .05;
}

.otl-community-profile-level[data-level-color="red"],
.otl-level-label[data-level-color="red"],
.otl-community-profile-modal-level[data-level-color="red"] {
  --otl-level-rgb: 248, 113, 113;
}

.otl-community-profile-level[data-level-color="orange"],
.otl-level-label[data-level-color="orange"],
.otl-community-profile-modal-level[data-level-color="orange"] {
  --otl-level-rgb: 251, 146, 60;
}

.otl-community-profile-level[data-level-color="amber"],
.otl-level-label[data-level-color="amber"],
.otl-community-profile-modal-level[data-level-color="amber"] {
  --otl-level-rgb: 251, 191, 36;
}

.otl-community-profile-level[data-level-color="green"],
.otl-level-label[data-level-color="green"],
.otl-community-profile-modal-level[data-level-color="green"] {
  --otl-level-rgb: 74, 222, 128;
}

.otl-community-profile-level[data-level-color="teal"],
.otl-level-label[data-level-color="teal"],
.otl-community-profile-modal-level[data-level-color="teal"] {
  --otl-level-rgb: 45, 212, 191;
}

.otl-community-profile-level[data-level-color="cyan"],
.otl-level-label[data-level-color="cyan"],
.otl-community-profile-modal-level[data-level-color="cyan"] {
  --otl-level-rgb: 34, 211, 238;
}

.otl-community-profile-level[data-level-color="blue"],
.otl-level-label[data-level-color="blue"],
.otl-community-profile-modal-level[data-level-color="blue"] {
  --otl-level-rgb: 96, 165, 250;
}

.otl-community-profile-level[data-level-color="violet"],
.otl-level-label[data-level-color="violet"],
.otl-community-profile-modal-level[data-level-color="violet"] {
  --otl-level-rgb: 167, 139, 250;
}

.otl-community-profile-level[data-level-color="magenta"],
.otl-level-label[data-level-color="magenta"],
.otl-community-profile-modal-level[data-level-color="magenta"] {
  --otl-level-rgb: 232, 121, 249;
}

.otl-community-profile-level[data-level-generation="1"],
.otl-level-label[data-level-generation="1"],
.otl-community-profile-modal-level[data-level-generation="1"] {
  --otl-level-border-alpha: .28;
  --otl-level-fill-alpha: .10;
  --otl-level-glow-alpha: .08;
}

.otl-community-profile-level[data-level-generation="2"],
.otl-level-label[data-level-generation="2"],
.otl-community-profile-modal-level[data-level-generation="2"] {
  --otl-level-border-alpha: .34;
  --otl-level-fill-alpha: .11;
  --otl-level-glow-alpha: .11;
}

.otl-community-profile-level[data-level-generation="3"],
.otl-level-label[data-level-generation="3"],
.otl-community-profile-modal-level[data-level-generation="3"] {
  --otl-level-border-alpha: .39;
  --otl-level-fill-alpha: .12;
  --otl-level-glow-alpha: .14;
}

.otl-community-profile-level[data-level-generation="4"],
.otl-level-label[data-level-generation="4"],
.otl-community-profile-modal-level[data-level-generation="4"] {
  --otl-level-border-alpha: .44;
  --otl-level-fill-alpha: .14;
  --otl-level-glow-alpha: .17;
}

.otl-community-profile-level[data-level-generation="5"],
.otl-level-label[data-level-generation="5"],
.otl-community-profile-modal-level[data-level-generation="5"] {
  --otl-level-border-alpha: .49;
  --otl-level-fill-alpha: .15;
  --otl-level-glow-alpha: .20;
}

.otl-community-profile-level[data-level-generation="6"],
.otl-level-label[data-level-generation="6"],
.otl-community-profile-modal-level[data-level-generation="6"] {
  --otl-level-border-alpha: .54;
  --otl-level-fill-alpha: .17;
  --otl-level-glow-alpha: .23;
}

.otl-community-profile-level[data-level-generation="7"],
.otl-level-label[data-level-generation="7"],
.otl-community-profile-modal-level[data-level-generation="7"] {
  --otl-level-border-alpha: .59;
  --otl-level-fill-alpha: .18;
  --otl-level-glow-alpha: .26;
}

.otl-community-profile-level[data-level-generation="8"],
.otl-level-label[data-level-generation="8"],
.otl-community-profile-modal-level[data-level-generation="8"] {
  --otl-level-border-alpha: .65;
  --otl-level-fill-alpha: .20;
  --otl-level-glow-alpha: .29;
}

.otl-community-profile-level[data-level-generation="9"],
.otl-level-label[data-level-generation="9"],
.otl-community-profile-modal-level[data-level-generation="9"] {
  --otl-level-border-alpha: .72;
  --otl-level-fill-alpha: .22;
  --otl-level-glow-alpha: .34;
}

#otlAccountPlayerProfileHost
.otl-community-profile-level {
  border-top-color:
    rgba(
      var(--otl-level-rgb),
      var(--otl-level-border-alpha)
    );
}

#otlAccountPlayerProfileHost
.otl-community-profile-level-heading strong,
.otl-level-label,
.otl-community-profile-modal-level {
  color:
    rgb(
      var(--otl-level-rgb)
    );

  text-shadow:
    0 0 10px
    rgba(
      var(--otl-level-rgb),
      var(--otl-level-glow-alpha)
    );
}

#otlAccountPlayerProfileHost
.otl-community-profile-level-heading span {
  color:
    rgba(
      var(--otl-level-rgb),
      .86
    );
}

#otlAccountPlayerProfileHost
.otl-community-profile-xp-fill {
  background:
    linear-gradient(
      90deg,
      rgba(var(--otl-level-rgb), .72),
      rgb(var(--otl-level-rgb))
    );

  box-shadow:
    0 0 14px
    rgba(
      var(--otl-level-rgb),
      var(--otl-level-glow-alpha)
    );
}

.otl-community-profile-level[data-level-special="millennium"],
.otl-level-label[data-level-special="millennium"],
.otl-community-profile-modal-level[data-level-special="millennium"] {
  --otl-level-rgb: 248, 250, 252;
}

.otl-level-label[data-level-special="millennium"],
.otl-community-profile-modal-level[data-level-special="millennium"],
#otlAccountPlayerProfileHost
.otl-community-profile-level[data-level-special="millennium"]
.otl-community-profile-level-heading strong {
  color:
    #f8fafc;

  text-shadow:
    0 0 10px rgba(244, 114, 182, .24),
    0 0 16px rgba(167, 139, 250, .28),
    0 0 22px rgba(56, 189, 248, .18);
}

#otlAccountPlayerProfileHost
.otl-community-profile-level[data-level-special="millennium"]
.otl-community-profile-xp-fill {
  background:
    linear-gradient(
      90deg,
      #f472b6,
      #a78bfa,
      #38bdf8,
      #4ade80,
      #facc15
    );

  box-shadow:
    0 0 18px rgba(167, 139, 250, .28);
}

/* XP leaderboard — all-time / rolling activity views */
.otl-community-leaderboard-periods {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 11px;
  background: rgba(7, 12, 23, .48);
}

.otl-community-leaderboard-period {
  min-height: 32px;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  color: #7f8ea2;
  background: transparent;
  font: inherit;
  font-size: .62rem;
  font-weight: 850;
  cursor: pointer;
}

.otl-community-leaderboard-period[aria-pressed="true"] {
  color: #eef2ff;
  background: rgba(99, 102, 241, .16);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .20);
}

.otl-community-leaderboard-identity-top {
  display: flex;
  align-items: center;
  justify-content: inherit;
  gap: 6px;
  min-width: 0;
}

.otl-community-podium-identity
.otl-community-leaderboard-identity-top {
  justify-content: center;
}

.otl-community-level-pill {
  --otl-level-rgb: 148, 163, 184;
  --otl-level-border-alpha: .22;
  --otl-level-fill-alpha: .08;
  --otl-level-glow-alpha: 0;
  display: inline-grid;
  place-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 25px;
  height: 21px;
  padding: 0 6px;
  border: 1px solid rgba(
    var(--otl-level-rgb),
    var(--otl-level-border-alpha)
  );
  border-radius: 999px;
  color: rgb(var(--otl-level-rgb));
  background: rgba(
    var(--otl-level-rgb),
    var(--otl-level-fill-alpha)
  );
  box-shadow:
    0 0 8px rgba(
      var(--otl-level-rgb),
      var(--otl-level-glow-alpha)
    );
  font-size: .56rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.otl-community-level-pill[data-level-color="red"] { --otl-level-rgb: 239, 68, 68; }
.otl-community-level-pill[data-level-color="orange"] { --otl-level-rgb: 249, 115, 22; }
.otl-community-level-pill[data-level-color="amber"] { --otl-level-rgb: 245, 158, 11; }
.otl-community-level-pill[data-level-color="green"] { --otl-level-rgb: 34, 197, 94; }
.otl-community-level-pill[data-level-color="teal"] { --otl-level-rgb: 20, 184, 166; }
.otl-community-level-pill[data-level-color="cyan"] { --otl-level-rgb: 6, 182, 212; }
.otl-community-level-pill[data-level-color="blue"] { --otl-level-rgb: 59, 130, 246; }
.otl-community-level-pill[data-level-color="violet"] { --otl-level-rgb: 139, 92, 246; }
.otl-community-level-pill[data-level-color="magenta"] { --otl-level-rgb: 217, 70, 239; }
.otl-community-level-pill[data-level-color="prismatic"] { --otl-level-rgb: 168, 85, 247; }

.otl-community-podium-score strong {
  font-size: .94rem;
  letter-spacing: -.025em;
}

[data-place="1"] .otl-community-podium-score strong {
  font-size: 1.08rem;
}

.otl-community-podium-prestige {
  letter-spacing: .055em;
}

.otl-community-leaderboard-row {
  grid-template-columns:
    48px
    minmax(0, 1fr)
    minmax(110px, auto);
}

.otl-community-leaderboard-row-score strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.otl-community-leaderboard-viewer {
  position: sticky;
  bottom: 8px;
  z-index: 8;
  margin-top: 12px;
  padding: 5px 8px;
  border: 1px solid rgba(129, 140, 248, .24);
  border-radius: 12px;
  background: rgba(7, 12, 23, .94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
  backdrop-filter: blur(10px);
}

.otl-community-leaderboard-viewer[hidden] {
  display: none !important;
}

.otl-community-leaderboard-row.is-viewer {
  grid-template-columns:
    70px
    minmax(0, 1fr)
    minmax(110px, auto);
  border-bottom: 0;
}

.otl-community-leaderboard-row.is-viewer
.otl-community-leaderboard-place {
  color: #a5b4fc;
  font-size: .55rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .otl-community-leaderboard-periods {
    width: 100%;
  }

  .otl-community-leaderboard-period {
    flex: 1 1 0;
  }

  .otl-community-leaderboard-row,
  .otl-community-leaderboard-row.is-viewer {
    grid-template-columns:
      45px
      minmax(0, 1fr)
      minmax(92px, auto);
  }
}

@media (max-width: 560px) {
  .otl-community-podium-identity
  .otl-community-leaderboard-identity-top {
    justify-content: flex-start;
  }

  .otl-community-podium-prestige {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

/* ==========================================================
   Leaderboard list — compact ranked table
   ========================================================== */

.otl-community-leaderboard-columns,
.otl-community-leaderboard-row {
  grid-template-columns:
    68px
    minmax(0, 1fr)
    minmax(150px, 190px)
    minmax(120px, 150px);
}

.otl-community-leaderboard-columns {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  gap:
    14px;

  align-items:
    center;

  margin-top:
    16px;

  padding:
    0 8px 8px;

  border-bottom:
    1px solid rgba(148, 163, 184, .11);

  color:
    #6f7f94;

  font-size:
    .53rem;

  font-weight:
    900;

  letter-spacing:
    .075em;

  text-transform:
    uppercase;
}

.otl-community-leaderboard-column--xp {
  text-align:
    right;
}

.otl-community-leaderboard-list {
  margin-top:
    0;

  border-top:
    0;
}

.otl-community-leaderboard-row {
  gap:
    14px;

  min-height:
    62px;

  padding:
    8px;

  border-bottom-color:
    rgba(148, 163, 184, .085);
}

.otl-community-leaderboard-player {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}

.otl-community-leaderboard-avatar {
  display:
    inline-grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    36px;

  height:
    36px;

  border:
    1px solid rgba(148, 163, 184, .15);

  border-radius:
    50%;

  color:
    #aab6c7;

  background:
    rgba(30, 41, 59, .48);

  font-size:
    .68rem;

  font-weight:
    900;

  overflow:
    hidden;
}

.otl-community-leaderboard-avatar img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  border-radius:
    inherit;

  object-fit:
    cover;
}

.otl-community-leaderboard-identity-top {
  min-width:
    0;
}

.otl-community-leaderboard-username {
  font-size:
    .88rem;

  line-height:
    1.1;
}

.otl-community-level-pill {
  min-width:
    31px;

  height:
    25px;

  padding:
    0 8px;

  font-size:
    .64rem;
}

.otl-community-leaderboard-username {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.otl-community-leaderboard-highest-rank {
  color:
    #77879b;

  font-size:
    .66rem;

  font-weight:
    850;

  white-space:
    nowrap;
}

.otl-community-leaderboard-highest-rank[data-rank="bronze"] {
  color:
    #c88755;
}

.otl-community-leaderboard-highest-rank[data-rank="silver"] {
  color:
    #d2d7de;
}

.otl-community-leaderboard-highest-rank[data-rank="gold"] {
  color:
    #e4bd4f;
}

.otl-community-leaderboard-highest-rank[data-rank="diamond"] {
  color:
    #d9f5ff;
}

.otl-community-leaderboard-highest-rank[data-rank="sapphire"] {
  color:
    #8db8ff;
}

.otl-community-leaderboard-highest-rank[data-rank="emerald"] {
  color:
    #79e0ae;
}

.otl-community-leaderboard-highest-rank[data-rank="amethyst"] {
  color:
    #c5a3ff;
}

.otl-community-leaderboard-highest-rank[data-rank="ruby"] {
  color:
    #ff8f9d;
}

.otl-community-leaderboard-highest-rank[data-rank="prismatic"] {
  color:
    #e9d5ff;

  text-shadow:
    0 0 9px rgba(167, 139, 250, .22);
}

.otl-community-leaderboard-highest-rank[data-rank="spectral"] {
  color:
    #e6fbff;

  text-shadow:
    0 0 10px rgba(165, 243, 252, .18);
}

.otl-community-leaderboard-row-score {
  justify-self:
    end;

  color:
    #e7edf5;

  font-size:
    .72rem;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}

.otl-community-leaderboard-row[data-place="1"]
.otl-community-leaderboard-place {
  color:
    #e7c24f;

  font-size:
    .76rem;
}

.otl-community-leaderboard-row[data-place="2"]
.otl-community-leaderboard-place {
  color:
    #cbd5e1;

  font-size:
    .74rem;
}

.otl-community-leaderboard-row[data-place="3"]
.otl-community-leaderboard-place {
  color:
    #c88755;

  font-size:
    .74rem;
}

.otl-community-leaderboard-row[data-place="1"]
.otl-community-leaderboard-avatar {
  border-color:
    rgba(228, 189, 79, .28);
}

.otl-community-leaderboard-row[data-place="2"]
.otl-community-leaderboard-avatar {
  border-color:
    rgba(203, 213, 225, .23);
}

.otl-community-leaderboard-row[data-place="3"]
.otl-community-leaderboard-avatar {
  border-color:
    rgba(200, 135, 85, .25);
}

.otl-community-leaderboard-row.is-viewer {
  grid-template-columns:
    74px
    minmax(0, 1fr)
    minmax(112px, 150px)
    minmax(100px, 126px);
}

@media (hover: hover) {
  .otl-community-leaderboard-row:hover {
    background:
      rgba(148, 163, 184, .035);
  }
}

@media (max-width: 760px) {
  .otl-community-leaderboard-columns,
  .otl-community-leaderboard-row,
  .otl-community-leaderboard-row.is-viewer {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      104px
      92px;

    gap:
      9px;
  }

  .otl-community-leaderboard-avatar {
    width:
      38px;

    height:
      38px;
  }

  .otl-community-leaderboard-username {
    font-size:
      .78rem;
  }

  .otl-community-level-pill {
    min-width:
      27px;

    height:
      22px;

    padding-inline:
      6px;

    font-size:
      .58rem;
  }
}

@media (max-width: 560px) {
  .otl-community-leaderboard-columns {
    grid-template-columns:
      36px
      minmax(0, 1fr)
      88px;
  }

  .otl-community-leaderboard-column--highest-rank {
    display:
      none;
  }

  .otl-community-leaderboard-row,
  .otl-community-leaderboard-row.is-viewer {
    grid-template-columns:
      36px
      minmax(0, 1fr)
      88px;

    grid-template-rows:
      auto
      auto;

    gap:
      2px 8px;

    padding-block:
      10px;
  }

  .otl-community-leaderboard-place {
    grid-column:
      1;

    grid-row:
      1 / span 2;
  }

  .otl-community-leaderboard-player {
    grid-column:
      2;

    grid-row:
      1;
  }

  .otl-community-leaderboard-highest-rank {
    grid-column:
      2;

    grid-row:
      2;

    padding-left:
      42px;

    font-size:
      .58rem;
  }

  .otl-community-leaderboard-row-score {
    grid-column:
      3;

    grid-row:
      1 / span 2;

    align-self:
      center;
  }
}

/* Leaderboard scale pass — use the available width instead of a miniature table. */
@media (min-width: 761px) {
  .otl-community-leaderboard-columns,
  .otl-community-leaderboard-row {
    grid-template-columns:
      68px
      minmax(0, 1fr)
      minmax(150px, 190px)
      minmax(120px, 150px);
    gap: 18px;
  }

  .otl-community-leaderboard-columns {
    padding: 0 12px 12px;
    font-size: .68rem;
  }

  .otl-community-leaderboard-row {
    min-height: 82px;
    padding: 12px;
  }

  .otl-community-leaderboard-player {
    gap: 13px;
  }

  .otl-community-leaderboard-avatar {
    width: 48px;
    height: 48px;
    font-size: .82rem;
  }

  .otl-community-leaderboard-username {
    font-size: .94rem;
  }

  .otl-community-level-pill {
    min-width: 32px;
    height: 26px;
    padding: 0 8px;
    font-size: .65rem;
  }

  .otl-community-leaderboard-highest-rank {
    font-size: .82rem;
  }

  .otl-community-leaderboard-row-score {
    font-size: .92rem;
  }

  .otl-community-leaderboard-row[data-place="1"]
  .otl-community-leaderboard-place {
    font-size: 1rem;
  }

  .otl-community-leaderboard-row[data-place="2"]
  .otl-community-leaderboard-place,
  .otl-community-leaderboard-row[data-place="3"]
  .otl-community-leaderboard-place {
    font-size: .95rem;
  }
}

/* Community tabs share one selected-state accent. */
.otl-community-tab,
.otl-community-tab[data-community-tab="trainings"],
.otl-community-tab[data-community-tab="leaderboard"],
.otl-community-tab[data-community-tab="profile"] {
  --otl-community-tab-accent:
    96, 165, 250;
}

.otl-community-tab {
  color:
    #9aa8ba;

  border-color:
    rgba(148, 163, 184, .11);

  background:
    linear-gradient(
      180deg,
      rgba(30, 41, 59, .18),
      rgba(2, 6, 23, .10)
    );

  box-shadow:
    none;
}

.otl-community-tab[aria-selected="true"] {
  color:
    #f8fafc;

  border-color:
    rgba(96, 165, 250, .30);

  background:
    linear-gradient(
      180deg,
      rgba(96, 165, 250, .12),
      rgba(96, 165, 250, .035)
    );

  box-shadow:
    inset 0 -3px 0 rgba(96, 165, 250, .78),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.otl-community-tab:focus-visible {
  outline:
    2px solid rgba(96, 165, 250, .62);
}

@media (hover: hover) {
  .otl-community-tab:hover:not([aria-selected="true"]) {
    color:
      #d7e0eb;

    border-color:
      rgba(148, 163, 184, .18);

    background:
      rgba(30, 41, 59, .25);
  }
}

/* Community navigation — selected fill + border only, no underline. */
.otl-community-tab[aria-selected="true"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* Leaderboards typography scale pass. */
.otl-community-leaderboard-header h4 {
  font-size:
    1.36rem;

  letter-spacing:
    -.025em;
}

.otl-community-leaderboard-periods {
  margin-top:
    17px;

  padding:
    5px;

  border-radius:
    12px;
}

.otl-community-leaderboard-period {
  min-height:
    38px;

  padding:
    8px 14px;

  font-size:
    .76rem;
}

.otl-community-leaderboard-columns {
  padding-bottom:
    13px;

  font-size:
    .72rem;

  letter-spacing:
    .065em;
}

@media (min-width: 761px) {
  .otl-community-leaderboard-row {
    min-height:
      88px;
  }

  .otl-community-leaderboard-place {
    font-size:
      .98rem;
  }

  .otl-community-leaderboard-avatar {
    width:
      52px;

    height:
      52px;

    font-size:
      .9rem;
  }

  .otl-community-leaderboard-username {
    font-size:
      1.06rem;
  }

  .otl-community-level-pill {
    min-width:
      34px;

    height:
      28px;

    padding:
      0 9px;

    font-size:
      .72rem;
  }

  .otl-community-leaderboard-highest-rank {
    font-size:
      .96rem;
  }

  .otl-community-leaderboard-row-score {
    font-size:
      1.04rem;
  }

  .otl-community-leaderboard-row[data-place="1"]
  .otl-community-leaderboard-place {
    font-size:
      1.14rem;
  }

  .otl-community-leaderboard-row[data-place="2"]
  .otl-community-leaderboard-place,
  .otl-community-leaderboard-row[data-place="3"]
  .otl-community-leaderboard-place {
    font-size:
      1.08rem;
  }
}

/* Leaderboards tab already names the view; period controls start the panel. */
.otl-community-leaderboard-periods {
  margin-top:
    0;
}

/* Leaderboards focus on placement, player identity, and XP. */
.otl-community-leaderboard-columns,
.otl-community-leaderboard-row,
.otl-community-leaderboard-row.is-viewer {
  grid-template-columns:
    74px
    minmax(0, 1fr)
    minmax(120px, 150px);
}

.otl-community-leaderboard-column--rank,
.otl-community-leaderboard-place {
  justify-self:
    center;

  text-align:
    center;
}

.otl-community-leaderboard-column--xp {
  justify-self:
    end;
}

@media (max-width: 760px) {
  .otl-community-leaderboard-columns,
  .otl-community-leaderboard-row,
  .otl-community-leaderboard-row.is-viewer {
    grid-template-columns:
      48px
      minmax(0, 1fr)
      94px;

    gap:
      10px;
  }
}

@media (max-width: 560px) {
  .otl-community-leaderboard-columns,
  .otl-community-leaderboard-row,
  .otl-community-leaderboard-row.is-viewer {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      88px;

    grid-template-rows:
      auto;
  }

  .otl-community-leaderboard-place,
  .otl-community-leaderboard-player,
  .otl-community-leaderboard-row-score {
    grid-row:
      1;

    align-self:
      center;
  }

  .otl-community-leaderboard-place {
    grid-column:
      1;
  }

  .otl-community-leaderboard-player {
    grid-column:
      2;
  }

  .otl-community-leaderboard-row-score {
    grid-column:
      3;
  }
}


/* ==========================================================
   Profile hub refinement — identity-led editing
   ========================================================== */

html.otl-community-avatar-picker-open {
  overflow:
    hidden;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview {
  grid-template-columns:
    64px
    minmax(0, 1fr);

  gap:
    14px 16px;

  padding:
    18px 20px;

  border-color:
    rgba(129, 140, 248, .19);

  background:
    linear-gradient(
      135deg,
      rgba(79, 70, 229, .12),
      rgba(24, 46, 72, .34) 48%,
      rgba(11, 22, 39, .72)
    );
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar {
  position:
    relative;

  width:
    64px;

  height:
    64px;

  padding:
    0;

  appearance:
    none;

  -webkit-appearance:
    none;

  cursor:
    pointer;

  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar::after {
  content:
    '✎';

  position:
    absolute;

  right:
    -2px;

  bottom:
    -2px;

  display:
    grid;

  place-items:
    center;

  width:
    20px;

  height:
    20px;

  border:
    2px solid #0d1728;

  border-radius:
    50%;

  color:
    #dbeafe;

  background:
    #285d9c;

  box-shadow:
    0 3px 10px rgba(0, 0, 0, .28);

  font-size:
    .67rem;

  line-height:
    1;

  opacity:
    .92;

  pointer-events:
    none;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar:hover:not(:disabled) {
  border-color:
    rgba(96, 165, 250, .72);

  box-shadow:
    0 0 0 3px rgba(96, 165, 250, .10),
    0 9px 24px rgba(0, 0, 0, .20);

  transform:
    translateY(-1px);
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar:focus-visible {
  outline:
    2px solid rgba(96, 165, 250, .92);

  outline-offset:
    4px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar:disabled {
  cursor:
    default;

  opacity:
    .58;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-identity {
  align-self:
    center;

  gap:
    3px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  min-height:
    20px;

  margin-top:
    2px;
}

#otlAccountPlayerProfileHost
.otl-community-public-profile-link {
  min-height:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    0;

  color:
    #76b7f8;

  background:
    transparent;

  font-size:
    .64rem;

  font-weight:
    760;

  line-height:
    1.35;

  text-decoration:
    none;
}

@media (hover: hover) {
  #otlAccountPlayerProfileHost
  .otl-community-public-profile-link:hover {
    border-color:
      transparent;

    color:
      #b7d9ff;

    background:
      transparent;

    text-decoration:
      underline;

    text-underline-offset:
      2px;
  }
}

#otlAccountPlayerProfileHost
.otl-community-profile-level {
  grid-column:
    1 / -1;

  margin-top:
    8px;

  padding-top:
    14px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-settings {
  display:
    block;
}

#otlAccountPlayerProfileHost
.otl-community-profile-group--settings {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    16px 26px;

  padding:
    18px 20px;

  overflow:
    visible;

  border:
    1px solid rgba(110, 139, 178, .15);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 38, 60, .78),
      rgba(17, 30, 49, .70)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .018);
}

#otlAccountPlayerProfileHost
.otl-community-profile-group--settings
.otl-community-profile-row {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(130px, 190px);

  align-items:
    center;

  gap:
    14px;

  min-height:
    46px;

  padding:
    0;

  border:
    0;

  background:
    transparent;
}

#otlAccountPlayerProfileHost
.otl-community-profile-group--settings
.otl-community-profile-row + .otl-community-profile-row {
  border:
    0;
}

#otlAccountPlayerProfileHost
.otl-community-profile-group--settings
.otl-community-profile-row > strong {
  color:
    #dce5f2;

  font-size:
    .75rem;

  font-weight:
    760;
}

#otlAccountPlayerProfileHost
.otl-community-profile-group--settings
.otl-community-profile-row select {
  width:
    100%;

  min-width:
    0;

  max-width:
    190px;

  justify-self:
    end;
}

#otlAccountPlayerProfileHost
.otl-community-profile-group--settings
.otl-community-profile-row--toggle
.otl-community-toggle {
  justify-self:
    end;
}

.otl-community-avatar-picker-backdrop[hidden] {
  display:
    none !important;
}

.otl-community-avatar-picker-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    10045;

  display:
    grid;

  place-items:
    center;

  box-sizing:
    border-box;

  padding:
    20px;

  background:
    rgba(3, 8, 17, .76);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

.otl-community-avatar-picker {
  width:
    min(540px, 100%);

  max-height:
    min(680px, calc(100vh - 40px));

  box-sizing:
    border-box;

  overflow:
    auto;

  padding:
    18px;

  border:
    1px solid rgba(96, 165, 250, .22);

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 38, 60, .99),
      rgba(12, 22, 38, .99)
    );

  box-shadow:
    0 28px 80px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

.otl-community-avatar-picker-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    16px;
}

.otl-community-avatar-picker-header > strong {
  color:
    #edf4ff;

  font-size:
    .92rem;

  font-weight:
    850;
}

.otl-community-avatar-picker-close {
  display:
    grid;

  place-items:
    center;

  width:
    32px;

  height:
    32px;

  padding:
    0;

  border:
    1px solid rgba(148, 163, 184, .18);

  border-radius:
    8px;

  color:
    #cbd5e1;

  background:
    rgba(15, 23, 42, .52);

  cursor:
    pointer;

  font-size:
    1.25rem;

  line-height:
    1;
}

.otl-community-avatar-picker
.otl-community-avatar-grid {
  display:
    grid;

  grid-template-columns:
    repeat(7, 58px);

  justify-content:
    center;

  gap:
    11px;
}

.otl-community-avatar-picker
.otl-community-avatar-option {
  display:
    block;

  width:
    58px;

  height:
    58px;

  padding:
    2px;

  overflow:
    hidden;

  border:
    1px solid rgba(148, 163, 184, .22);

  border-radius:
    50%;

  background:
    rgba(15, 23, 42, .62);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, .18);

  cursor:
    pointer;

  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease;
}

.otl-community-avatar-picker
.otl-community-avatar-option img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  border-radius:
    inherit;

  object-fit:
    cover;
}

.otl-community-avatar-picker
.otl-community-avatar-option[aria-pressed="true"] {
  border-color:
    rgba(96, 165, 250, .96);

  box-shadow:
    0 0 0 3px rgba(96, 165, 250, .18),
    0 6px 18px rgba(0, 0, 0, .25);
}

@media (hover: hover) {
  .otl-community-avatar-picker
  .otl-community-avatar-option:hover:not(:disabled) {
    border-color:
      rgba(147, 197, 253, .70);

    transform:
      translateY(-1px);
  }

  .otl-community-avatar-picker-close:hover {
    border-color:
      rgba(148, 163, 184, .34);

    background:
      rgba(30, 41, 59, .80);
  }
}

.otl-community-avatar-picker
.otl-community-avatar-option:focus-visible,
.otl-community-avatar-picker-close:focus-visible {
  outline:
    2px solid rgba(96, 165, 250, .92);

  outline-offset:
    3px;
}

.otl-community-avatar-picker
.otl-community-avatar-option:disabled {
  cursor:
    not-allowed;

  opacity:
    .48;
}

@media (max-width: 720px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-group--settings {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      14px;

    padding:
      16px;
  }
}

@media (max-width: 520px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-preview {
    grid-template-columns:
      58px
      minmax(0, 1fr);

    padding:
      16px;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-preview-avatar {
    width:
      58px;

    height:
      58px;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-group--settings
  .otl-community-profile-row {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      8px;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-group--settings
  .otl-community-profile-row select,
  #otlAccountPlayerProfileHost
  .otl-community-profile-group--settings
  .otl-community-profile-row--toggle
  .otl-community-toggle {
    justify-self:
      stretch;

    max-width:
      none;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-group--settings
  .otl-community-profile-row--toggle
  .otl-community-toggle {
    justify-self:
      start;
  }

  .otl-community-avatar-picker
  .otl-community-avatar-grid {
    grid-template-columns:
      repeat(auto-fit, minmax(52px, 1fr));

    gap:
      10px;
  }

  .otl-community-avatar-picker
  .otl-community-avatar-option {
    width:
      52px;

    height:
      52px;

    justify-self:
      center;
  }
}


/* ==========================================================
   Profile hub refinement — appearance belongs to identity
   ========================================================== */

#otlAccountPlayerProfileHost
.otl-community-profile-preview {
  grid-template-columns:
    64px
    minmax(0, 1fr)
    auto;

  background:
    linear-gradient(
      135deg,
      rgba(79, 70, 229, .12),
      rgba(24, 46, 72, .34) 48%,
      rgba(11, 22, 39, .72)
    );
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar {
  overflow:
    visible;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-avatar img {
  overflow:
    hidden;

  border-radius:
    50%;
}

#otlAccountPlayerProfileHost
.otl-community-profile-preview-actions {
  grid-column:
    3;

  grid-row:
    1;

  align-self:
    start;

  justify-self:
    end;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding-top:
    4px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-title-row {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  width:
    fit-content;
}

#otlAccountPlayerProfileHost
.otl-community-profile-appearance-edit {
  display:
    grid;

  place-items:
    center;

  width:
    20px;

  height:
    20px;

  padding:
    0;

  border:
    0;

  border-radius:
    6px;

  color:
    #718198;

  background:
    transparent;

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    .62rem;

  line-height:
    1;

  opacity:
    .72;

  transition:
    color .14s ease,
    background .14s ease,
    opacity .14s ease;
}

#otlAccountPlayerProfileHost
.otl-community-profile-appearance-edit[aria-expanded="true"] {
  color:
    #9cc9ff;

  background:
    rgba(96, 165, 250, .10);

  opacity:
    1;
}

@media (hover: hover) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-appearance-edit:hover:not(:disabled) {
    color:
      #c9e2ff;

    background:
      rgba(96, 165, 250, .09);

    opacity:
      1;
  }
}

#otlAccountPlayerProfileHost
.otl-community-profile-appearance-edit:focus-visible {
  outline:
    2px solid rgba(96, 165, 250, .75);

  outline-offset:
    2px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-appearance-editor[hidden] {
  display:
    none !important;
}

#otlAccountPlayerProfileHost
.otl-community-profile-appearance-editor {
  grid-column:
    2 / -1;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;

  margin-top:
    1px;

  padding:
    10px 0 1px;
}

#otlAccountPlayerProfileHost
.otl-community-profile-appearance-editor
.otl-community-profile-row {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    6px;

  min-height:
    0;

  padding:
    0;

  border:
    0;

  background:
    transparent;
}

#otlAccountPlayerProfileHost
.otl-community-profile-appearance-editor
.otl-community-profile-row > strong {
  color:
    #91a0b5;

  font-size:
    .62rem;

  font-weight:
    760;
}

#otlAccountPlayerProfileHost
.otl-community-profile-appearance-editor
.otl-community-profile-row select {
  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  justify-self:
    stretch;
}

#otlAccountPlayerProfileHost
.otl-community-profile-level {
  grid-column:
    1 / -1;
}

/* Privacy controls should feel like the same card family as the profile itself. */
#otlAccountPlayerProfileHost
.otl-community-profile-group--settings {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    18px 28px;

  padding:
    18px 20px;

  border-color:
    rgba(129, 140, 248, .19);

  background:
    linear-gradient(
      135deg,
      rgba(79, 70, 229, .12),
      rgba(24, 46, 72, .34) 48%,
      rgba(11, 22, 39, .72)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

#otlAccountPlayerProfileHost
.otl-community-profile-group--settings
.otl-community-profile-row {
  min-height:
    44px;
}

@media (max-width: 720px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-preview {
    grid-template-columns:
      58px
      minmax(0, 1fr);
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-preview-actions {
    grid-column:
      2;

    grid-row:
      auto;

    justify-self:
      start;

    padding-top:
      0;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-appearance-editor {
    grid-column:
      1 / -1;
  }

  #otlAccountPlayerProfileHost
  .otl-community-profile-group--settings {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  #otlAccountPlayerProfileHost
  .otl-community-profile-appearance-editor {
    grid-template-columns:
      minmax(0, 1fr);
  }
}


/* ==========================================================
   Profile hub final surface alignment
   ========================================================== */

#otlAccountPlayerProfileHost
.otl-community-public-profile-link {
  display:
    grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  min-height:
    34px;

  padding:
    0;

  border:
    1px solid rgba(96, 165, 250, .22);

  border-radius:
    9px;

  color:
    #8dc7ff;

  background:
    rgba(30, 64, 175, .10);

  font-size:
    1rem;

  font-weight:
    800;

  line-height:
    1;

  text-decoration:
    none;
}

@media (hover: hover) {
  #otlAccountPlayerProfileHost
  .otl-community-public-profile-link:hover {
    border-color:
      rgba(96, 165, 250, .42);

    color:
      #c6e3ff;

    background:
      rgba(37, 99, 235, .16);

    text-decoration:
      none;
  }
}

#otlAccountPlayerProfileHost
.otl-community-profile-group--settings {
  border-color:
    rgba(87, 111, 190, .34);

  background:
    linear-gradient(
      135deg,
      #17213f 0%,
      #14263e 48%,
      #111f35 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

/* Title and username style live in the settings card again. */
#otlAccountPlayerProfileHost
.otl-community-profile-appearance-editor,
#otlAccountPlayerProfileHost
.otl-community-profile-appearance-edit,
#otlAccountPlayerProfileHost
.otl-community-profile-title-row {
  display:
    none !important;
}

/* Keep joining discoverable alongside the leaderboard period controls. */
.otl-community-leaderboard-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.otl-community-leaderboard-toolbar .otl-community-leaderboard-join {
  flex: 0 0 auto;
  margin-top: 0;
  margin-inline-start: auto;
  min-height: 40px;
  padding: 8px 14px;
  font-size: .76rem;
}

.otl-community-leaderboard-join-message {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  color: #fda4af;
  font-size: .76rem;
  line-height: 1.45;
  text-align: right;
}

.otl-community-leaderboard-join-message[hidden] {
  display: none !important;
}

.otl-community-leaderboard-join-retry {
  border: 0;
  padding: 4px 0;
  color: #f3df88;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.otl-community-leaderboard-join-retry[hidden] {
  display: none !important;
}