/* Milestones page. All rules scoped under .ms-page.
   Neutral tokens map to fankadobase custom properties; tier palette is
   page-specific. Buttons use fankadobase .primary-btn / .btn-link. */

.ms-page {
  --ms-silver: #b4b2a9;
  --ms-silver-bg: #f1efe8;
  --ms-silver-text: #5f5e5a;
  --ms-gold: #ef9f27;
  --ms-gold-bg: #faeeda;
  --ms-gold-text: #854f0b;
  --ms-diamond: #185fa5;
  --ms-diamond-bg: #e6f1fb;
  --ms-diamond-text: #0c447c;
  --ms-reddiamond: #a32d2d;
  --ms-reddiamond-bg: #fcebeb;
  --ms-reddiamond-text: #791f1f;
  --ms-blackdiamond: #1c1c21;
  --ms-blackdiamond-bg: #e9e9ee;
  --ms-blackdiamond-text: #ededf2;

  margin: 0 auto;
  margin-top: -16px;
  max-width: 720px;
  padding: 8px 15px 48px 15px;
}

/* Empty-state / landing is wider than the populated creator page */
.ms-page:has(.ms-infoboxes) {
  max-width: 760px;
  padding: 16px 15px 64px;
}

/* ---------- Header ---------- */

.ms-page .ms-header {
  text-align: center;
  margin-bottom: 20px;
}

.ms-page .ms-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 10px;
}

/* Landing eyebrow: brand-colored with trophy icon */
.ms-page .ms-header .ms-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
}

.ms-page .ms-eyebrow-icon {
  width: 15px;
  height: 15px;
}

.ms-page .ms-h1 {
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.ms-page .ms-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;
  border: 2px solid var(--line);
}

.ms-page .ms-disclaimer {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}

/* Landing disclaimer is larger + constrained */
.ms-page .ms-header .ms-disclaimer {
  max-width: 560px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.ms-page .ms-cta-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ms-page .ms-claim-line {
  font-size: 12px;
  color: #999;
  margin: 10px 0 0;
}

/* ---------- Top profile section ---------- */

.ms-page .ms-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ms-page .ms-profile-avatar img,
.ms-page .ms-profile-silhouette {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block;
}

.ms-page .ms-profile-avatar img {
  object-fit: cover;
  border: 2px solid var(--line);
}

.ms-page .ms-profile-silhouette {
  background: var(--panel);
  border: 2px solid var(--line);
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-page .ms-profile-silhouette svg {
  width: 30px;
  height: 30px;
}

.ms-page .ms-profile-info {
  flex: 1;
  min-width: 0;
}

.ms-page .ms-profile-info .ms-eyebrow {
  margin: 0 0 2px;
}

.ms-page .ms-profile-info h1 {
  margin: 0;
}

.ms-page .ms-profile-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ms-page .ms-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.ms-page .ms-notice-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #3a4051;
  margin-top: 1px;
}

.ms-page .ms-notice-icon svg {
  width: 22px;
  height: 22px;
}

.ms-page .ms-notice p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.ms-page .ms-notice p strong {
  color: var(--text);
  font-weight: 700;
}

.ms-page .ms-notice a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.ms-page .ms-notice a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .ms-page .ms-profile {
    flex-wrap: wrap;
  }

  .ms-page .ms-profile-actions {
    flex-basis: 100%;
  }

  .ms-page .ms-profile-actions .btn {
    flex: 1;
  }
}

/* ---------- Overall hero ---------- */

.ms-page .ms-hero {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  text-align: left;
}

.ms-page .ms-hero--gold {
  border-color: var(--ms-gold);
}
.ms-page .ms-hero--silver {
  border-color: var(--ms-silver);
}
.ms-page .ms-hero--diamond {
  border-color: var(--ms-diamond);
}
.ms-page .ms-hero--reddiamond {
  border-color: var(--ms-reddiamond);
}
.ms-page .ms-hero--blackdiamond {
  border-color: var(--ms-blackdiamond);
}

.ms-page .ms-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ms-page .ms-hero-info {
  flex: 1;
  min-width: 0;
}

.ms-page .ms-hero-label {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.ms-page .ms-hero-count {
  font-size: 22px;
  font-weight: 600;
  margin: 2px 0 0;
}

.ms-page .ms-ready-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--ms-gold-text);
  margin: 8px 0 0;
}

/* ---------- Tier pills ---------- */

.ms-page .ms-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 6px;
  white-space: nowrap;
}

.ms-page .ms-tier-bronze {
  background: #f3e2d0;
  color: #7a4a1e;
}
.ms-page .ms-tier-silver {
  background: var(--ms-silver-bg);
  color: var(--ms-silver-text);
}
.ms-page .ms-tier-gold {
  background: var(--ms-gold-bg);
  color: var(--ms-gold-text);
}
.ms-page .ms-tier-diamond {
  background: var(--ms-diamond-bg);
  color: var(--ms-diamond-text);
}
.ms-page .ms-tier-reddiamond {
  background: var(--ms-reddiamond-bg);
  color: var(--ms-reddiamond-text);
}
/* Black Diamond inverts: dark pill, light text — the apex tier breaks the pattern */
.ms-page .ms-tier-blackdiamond {
  background: var(--ms-blackdiamond);
  color: var(--ms-blackdiamond-text);
}

/* ---------- Card tiles ---------- */

.ms-page .ms-cardcol {
  width: 92px;
  flex-shrink: 0;
  text-align: center;
}

.ms-page .ms-card {
  aspect-ratio: 2.5 / 3.5;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
}

.ms-page .ms-card--ready.ms-card--silver {
  border-color: var(--ms-silver);
  box-shadow: 0 0 0 3px var(--ms-silver-bg);
}
.ms-page .ms-card--ready.ms-card--gold {
  border-color: var(--ms-gold);
  box-shadow: 0 0 0 3px var(--ms-gold-bg);
}
.ms-page .ms-card--ready.ms-card--diamond {
  border-color: var(--ms-diamond);
  box-shadow: 0 0 0 3px var(--ms-diamond-bg);
}
.ms-page .ms-card--ready.ms-card--reddiamond {
  border-color: var(--ms-reddiamond);
  box-shadow: 0 0 0 3px var(--ms-reddiamond-bg);
}
.ms-page .ms-card--ready.ms-card--blackdiamond {
  border-color: var(--ms-blackdiamond);
  box-shadow: 0 0 0 3px var(--ms-blackdiamond-bg);
}

.ms-page .ms-card--locked {
  border-style: dashed;
}

.ms-page .ms-card--locked .ms-card-threshold,
.ms-page .ms-card--locked .ms-card-tier {
  color: #999;
}

.ms-page .ms-card-scope {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin: 0;
}

.ms-page .ms-card-threshold {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.ms-page .ms-card-tier {
  font-size: 10px;
  font-weight: 600;
  margin: 0;
}

.ms-page .ms-card--ready.ms-card--silver .ms-card-tier {
  color: var(--ms-silver-text);
}
.ms-page .ms-card--ready.ms-card--gold .ms-card-tier {
  color: var(--ms-gold-text);
}
.ms-page .ms-card--ready.ms-card--diamond .ms-card-tier {
  color: var(--ms-diamond-text);
}
.ms-page .ms-card--ready.ms-card--reddiamond .ms-card-tier {
  color: var(--ms-reddiamond-text);
}
.ms-page .ms-card--ready.ms-card--blackdiamond .ms-card-tier {
  color: var(--ms-blackdiamond);
}

.ms-page .ms-card-caption {
  font-size: 10px;
  color: #999;
  margin: 4px 0 0;
}

.ms-page .ms-card-caption--ready {
  color: var(--ms-gold-text);
  font-weight: 600;
}

/* ---------- Progress ---------- */

.ms-page .ms-progress {
  height: 7px;
  background: var(--panel);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
}

.ms-page .ms-progress-fill {
  height: 100%;
  background: var(--ms-gold);
}

.ms-page .ms-fill-silver {
  background: var(--ms-silver);
}
.ms-page .ms-fill-gold {
  background: var(--ms-gold);
}
.ms-page .ms-fill-diamond {
  background: var(--ms-diamond);
}
.ms-page .ms-fill-reddiamond {
  background: var(--ms-reddiamond);
}
.ms-page .ms-fill-blackdiamond {
  background: var(--ms-blackdiamond);
}

.ms-page .ms-progress-note {
  font-size: 12px;
  color: #999;
  margin: 6px 0 0;
}

/* ---------- Platform rows ---------- */

.ms-page .ms-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 8px;
}

.ms-page .ms-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.ms-page .ms-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ms-page .ms-row-info {
  flex: 1;
  min-width: 0;
}

.ms-page .ms-row-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ms-page .ms-picon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #999;
}

.ms-page .ms-picon svg {
  width: 100%;
  height: 100%;
}

.ms-page .ms-row-count {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0;
}

/* ---------- Below-minimum note ---------- */

.ms-page .ms-belowmin {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 20px;
}

.ms-page .ms-belowmin p {
  font-size: 13px;
  color: #999;
  margin: 0;
}

/* ---------- Follow box ---------- */

.ms-page .ms-followbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
}

.ms-page .ms-followbox-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.ms-page .ms-followbox-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}

.ms-page .ms-legal {
  font-size: 11px;
  color: #999;
  margin: 12px 0 0;
}

/* ============================================================
   Empty-state calculator / landing
   ============================================================ */

.ms-page .ms-calc {
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px rgba(12, 18, 34, 0.06);
  padding: 28px;
}

/* Lookup input + button as one pill */
.ms-page .ms-lookup {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 6px 6px 6px 18px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ms-page .ms-lookup:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ms-page .ms-lookup-at {
  color: #9aa3b2;
  font-size: 16px;
  flex-shrink: 0;
}

.ms-page .ms-lookup-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  padding: 8px 0;
}

.ms-page .ms-lookup-input::placeholder {
  color: #9aa3b2;
}

.ms-page .ms-lookup-btn {
  gap: 7px;
  flex-shrink: 0;
  padding: 10px 18px;
}

.ms-page .ms-lookup-btn-icon {
  width: 16px;
  height: 16px;
}

/* Manual-calculator results header (title + edit/search-again) */
.ms-page .ms-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ms-page .ms-results-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
}

.ms-page .ms-results-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 0;
}

.ms-page .ms-results-edit {
  flex-shrink: 0;
}

/* Milestones-specific: Fankado status badge (profile-* classes come from profile.css) */
.ms-page .ms-status-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  vertical-align: middle;
}

.ms-page .ms-status-badge--on {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.ms-page .ms-status-badge--off {
  background: var(--bg-elevated, #eef1f8);
  color: var(--muted);
}

/* Not-found notice, inline above the lookup field */
.ms-page .ms-construction {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff4d6;
  border: 1px solid #f0cf7a;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: -16px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #7a5a12;
}

.ms-page .ms-construction-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #d9a51c;
}

.ms-page .ms-construction-icon svg {
  width: 20px;
  height: 20px;
}

.ms-page .ms-lookup-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff8e6;
  border: 1px solid #f5d98a;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #7a5a12;
}

.ms-page .ms-lookup-notice svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #d9a51c;
}

.ms-page .ms-lookup-notice strong {
  font-weight: 700;
}

/* Try chips */
.ms-page .ms-try {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.ms-page .ms-try-chip {
  font-weight: 600;
}

/* "or enter manually" divider with centered label */
.ms-page .ms-or {
  position: relative;
  text-align: center;
  font-size: 13px;
  color: #999;
  margin: 24px 0 20px;
}

.ms-page .ms-or::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.ms-page .ms-or span {
  position: relative;
  background: #fff;
  padding: 0 12px;
}

/* Manual platform grid — two columns to match the screenshot */
.ms-page .ms-calc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}

.ms-page .ms-calc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.ms-page .ms-calc-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ms-page .ms-calc-label .ms-picon {
  width: 22px;
  height: 22px;
  color: inherit;
}

.ms-page .ms-calc-label .ms-picon svg,
.ms-page .ms-calc-label .ms-picon img {
  border-radius: 5px;
}

.ms-page .ms-calc-input {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ms-page .ms-calc-input::placeholder {
  color: #9aa3b2;
}

.ms-page .ms-calc-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ms-page .ms-calc-actions {
  margin-top: 22px;
}

.ms-page .ms-calc-actions .full-width-btn {
  padding: 13px;
  font-size: 15px;
}

/* ---------- Landing info boxes ---------- */

.ms-page .ms-infoboxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.ms-page .ms-infobox {
  background: #fff !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 40px rgba(12, 18, 34, 0.06);
}

.ms-page .ms-infobox-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand);
}

.ms-page .ms-infobox-icon svg {
  width: 22px;
  height: 22px;
}

.ms-page .ms-infobox-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}

.ms-page .ms-infobox-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .ms-page .ms-h1 {
    font-size: 26px;
  }

  .ms-page .ms-header .ms-disclaimer {
    font-size: 15px;
  }

  .ms-page .ms-calc {
    padding: 20px;
  }

  .ms-page .ms-calc-grid {
    grid-template-columns: 1fr;
  }

  .ms-page .ms-infoboxes {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  @media (max-width: 768px) {
    .ms-page .ms-level-num {
      font-size: 20px;
    }
  }
}

@media (max-width: 480px) {
  .ms-page .ms-hero-main,
  .ms-page .ms-row {
    flex-wrap: wrap;
  }

  .ms-page .ms-hero-info,
  .ms-page .ms-row-info {
    flex-basis: 100%;
    margin-bottom: 10px;
  }

  .ms-page .ms-cardcol {
    width: calc(50% - 7px);
  }

  .ms-page .ms-lookup {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
  }

  .ms-page .ms-lookup-btn {
    width: 100%;
  }
}

/* ---------- Full level ladder (tile grid) ---------- */

.ms-page .ms-ladder-panel {
  padding: 20px;
}

.ms-page .ms-ladder-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ms-page .ms-rung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid transparent;
  flex: 1 1 auto;
  min-width: 0;
}

.ms-page .ms-rung-tier {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}

.ms-page .ms-rung-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* Current rung — solid brand fill */
.ms-page .ms-rung.is-current {
  background: var(--brand);
  border-color: var(--brand);
}

.ms-page .ms-rung.is-current .ms-rung-tier,
.ms-page .ms-rung.is-current .ms-rung-value {
  color: #fff;
}

/* Locked rungs read slightly muted */
.ms-page .ms-rung.is-locked {
  background: rgba(59, 130, 246, 0.04);
}

.ms-page .ms-rung.is-locked .ms-rung-value {
  color: var(--muted);
}

/* Tier-colored labels (not current, which is white).
   Values matched to the designer's ladder palette. */
.ms-page .ms-rung--silver:not(.is-current) .ms-rung-tier {
  color: #8b93a5;
}
.ms-page .ms-rung--gold:not(.is-current) .ms-rung-tier {
  color: #d99a1c;
}
.ms-page .ms-rung--diamond:not(.is-current) .ms-rung-tier {
  color: #4a90d9;
}
.ms-page .ms-rung--reddiamond:not(.is-current) .ms-rung-tier,
.ms-page .ms-rung--red_diamond:not(.is-current) .ms-rung-tier {
  color: #d0605f;
}
.ms-page .ms-rung--blackdiamond:not(.is-current) .ms-rung-tier,
.ms-page .ms-rung--black_diamond:not(.is-current) .ms-rung-tier {
  color: #4a4a52;
}
.ms-page .ms-rung--bronze:not(.is-current) .ms-rung-tier {
  color: #1a1a1a;
}

@media (max-width: 600px) {
  .ms-page .ms-ladder-grid {
    gap: 8px;
  }
  .ms-page .ms-rung {
    padding: 10px 14px;
  }
}

/* ============================================================
   Results page (populated creator) — designer's richer layout,
   rebuilt on fankadobase tokens. Full-width via .container.
   Empty-state block above is untouched.
   ============================================================ */

/* Full-width results state. Empty state keeps its 900px cap (rule above). */
.ms-page:has(.ms-levels) {
  max-width: 1200px;
  padding: 20px 15px 56px;
}

/* ---------- Identity header ---------- */

.ms-page .ms-identity {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 16px;
}

.ms-page .ms-identity-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(12, 18, 34, 0.08);
  flex-shrink: 0;
}

.ms-page .ms-identity-silhouette {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  background: #e8ecf5;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(12, 18, 34, 0.08);
  flex-shrink: 0;
}

.ms-page .ms-identity-silhouette svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ms-page .ms-identity-main {
  flex: 1;
  min-width: 0;
}

.ms-page .ms-identity-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ms-page .ms-identity-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.ms-page .ms-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ms-page .ms-status svg {
  width: 13px;
  height: 13px;
}

.ms-page .ms-status--on {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.ms-page .ms-status--off {
  background: var(--bg-elevated, #eef1f8);
  color: var(--muted);
}

.ms-page .ms-identity-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0;
}

.ms-page .ms-identity-profilelink {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
}

.ms-page .ms-identity-stats {
  display: flex;
  gap: 40px;
  margin-top: 18px;
}

.ms-page .ms-istat-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.ms-page .ms-istat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.ms-page .ms-identity-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.ms-page .ms-identity-actions .ms-actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ms-page .ms-want-count-top {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.ms-page .ms-want-count-top b {
  color: var(--text);
}

/* Want button — heart CTA built on fankadobase .btn-primary */
.ms-page .ms-want-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ms-page .ms-want-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ms-page .ms-want-btn.is-wanted {
  background: var(--brand-strong);
}

/* ---------- Off-platform disclaimer ---------- */

.ms-page .ms-disclaimer-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 24px;
}

.ms-page .ms-disclaimer-box svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 1px;
}

.ms-page .ms-disclaimer-box p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.ms-page .ms-disclaimer-box strong {
  color: var(--text);
}

/* ---------- Section headers ---------- */

.ms-page .ms-section {
  margin-bottom: 28px;
}

.ms-page .ms-section-head {
  margin-bottom: 14px;
}

.ms-page .ms-section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
}

.ms-page .ms-section-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 0;
}

/* ---------- Level rows (overall + per-platform) ---------- */

.ms-page .ms-levels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ms-page .ms-level {
  display: flex;
  align-items: stretch;
  gap: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}

.ms-page .ms-level-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ms-page .ms-level-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ms-page .ms-level-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ms-page .ms-level-ico svg {
  width: 22px;
  height: 22px;
}

.ms-page .ms-level-ico--overall {
  background: linear-gradient(135deg, var(--ms-gold), #b8860b);
  color: #fff;
}

.ms-page .ms-level-id {
  flex: 1;
  min-width: 0;
}

.ms-page .ms-level-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ms-page .ms-level-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.ms-page .ms-level-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.ms-page .ms-level-unit {
  font-size: 14px;
  color: var(--muted);
}

.ms-page .ms-level-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  align-self: flex-start;
}

/* Progress bar sits at the bottom of the info column */
.ms-page .ms-level-bar-wrap {
  margin-top: auto;
  padding-top: 22px;
}

.ms-page .ms-level-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.ms-page .ms-bar {
  height: 8px;
  background: var(--bg-elevated, #eef1f8);
  border-radius: 999px;
  overflow: hidden;
}

.ms-page .ms-bar-fill {
  height: 100%;
  border-radius: 999px;
  width: 0;
  transition: width 0.8s var(--ease, ease);
}

.ms-page .ms-bar--gold .ms-bar-fill {
  background: linear-gradient(90deg, var(--ms-gold), #f5c563);
}
.ms-page .ms-bar--silver .ms-bar-fill {
  background: linear-gradient(90deg, var(--ms-silver), #d8d6cf);
}
.ms-page .ms-bar--diamond .ms-bar-fill {
  background: linear-gradient(90deg, var(--ms-diamond), #5a9bd8);
}
.ms-page .ms-bar--reddiamond .ms-bar-fill,
.ms-page .ms-bar--red_diamond .ms-bar-fill {
  background: linear-gradient(90deg, var(--ms-reddiamond), #d46a6a);
}
.ms-page .ms-bar--blackdiamond .ms-bar-fill,
.ms-page .ms-bar--black_diamond .ms-bar-fill {
  background: linear-gradient(90deg, var(--ms-blackdiamond), #4a4a52);
}

.ms-page .ms-level-togo {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0;
}

.ms-page .ms-level-togo b {
  color: var(--text);
  font-weight: 700;
}

/* ---------- Milestone cards (current + next) ---------- */

.ms-page .ms-level-cards {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  justify-content: flex-end;
}

.ms-page .ms-mcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 132px;
}

.ms-page .ms-mcard-frame {
  position: relative;
  aspect-ratio: 2.5 / 3.5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-page .ms-mcard-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Next/locked cards have no tier field in the API data, so no tier-frame-*
   class matches. Give them a neutral dark frame so they always render. */
.ms-page .ms-mcard.is-next .ms-mcard-frame {
  background: linear-gradient(160deg, #9aa1ad, #5f6673);
}

/* Tier frames — gradient tint over the card */
.ms-page .tier-frame-bronze {
  background: linear-gradient(160deg, #c88a4a, #7a4a1e);
}
.ms-page .tier-frame-gold {
  background: linear-gradient(160deg, #d9a441, #7a5410);
}
.ms-page .tier-frame-silver {
  background: linear-gradient(160deg, #c3c1b8, #6f6e69);
}
.ms-page .tier-frame-diamond {
  background: linear-gradient(160deg, #4a90d9, #14487e);
}
.ms-page .tier-frame-reddiamond,
.ms-page .tier-frame-red_diamond {
  background: linear-gradient(160deg, #c04a4a, #7a1f1f);
}
.ms-page .tier-frame-blackdiamond,
.ms-page .tier-frame-black_diamond {
  background: linear-gradient(160deg, #3a3a42, #121216);
}

/* Placeholder face shown when there's no card art */
.ms-page .ms-mcard-noart {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}

.ms-page .ms-mcard-noart-medal {
  width: 30px;
  height: 30px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.ms-page .ms-mcard-noart-mono {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

.ms-page .ms-mcard-noart-tier {
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}

.ms-page .ms-mcard-noart-hint {
  font-size: 10px;
  opacity: 0.75;
}

/* Next (locked) card is dimmed with a lock overlay */
.ms-page .ms-mcard.is-next .ms-mcard-frame {
  opacity: 0.55;
  filter: saturate(0.7);
}

.ms-page .ms-mcard-lock {
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ms-page .ms-mcard-lock svg {
  width: 16px;
  height: 16px;
}

.ms-page .ms-mcard-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.ms-page .ms-mcard-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.ms-page .ms-mcard-status {
  font-size: 12px;
  color: var(--muted);
}

.ms-page .ms-mcard-status.is-togo {
  font-weight: 600;
}

/* Claim reward — green action on your button base */
.ms-page .ms-mcard-claim {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: #12946a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.ms-page .ms-mcard-claim:hover {
  background: #0f7d5a;
}

.ms-page .ms-mcard-claim svg {
  width: 13px;
  height: 13px;
}

.ms-page .ms-mcard-claim--wait {
  background: var(--bg-elevated, #eef1f8);
  color: var(--muted);
  cursor: default;
}

/* ---------- Tier badge colors (reuse tier palette) ---------- */

.ms-page .tier-badge-bronze {
  background: #f3e2d0;
  color: #7a4a1e;
}
.ms-page .tier-badge-silver {
  background: var(--ms-silver-bg);
  color: var(--ms-silver-text);
}
.ms-page .tier-badge-gold {
  background: var(--ms-gold-bg);
  color: var(--ms-gold-text);
}
.ms-page .tier-badge-diamond {
  background: var(--ms-diamond-bg);
  color: var(--ms-diamond-text);
}
.ms-page .tier-badge-reddiamond,
.ms-page .tier-badge-red_diamond {
  background: var(--ms-reddiamond-bg);
  color: var(--ms-reddiamond-text);
}
.ms-page .tier-badge-blackdiamond,
.ms-page .tier-badge-black_diamond {
  background: var(--ms-blackdiamond);
  color: var(--ms-blackdiamond-text);
}

/* ---------- Brand icon colors (platform level icons) ---------- */

.ms-page .ms-level-ico.pf-youtube {
  background: rgba(255, 0, 0, 0.1);
  color: #ff0000;
}
.ms-page .ms-level-ico.pf-tiktok {
  background: rgba(0, 0, 0, 0.06);
  color: #010101;
}
.ms-page .ms-level-ico.pf-instagram {
  background: rgba(228, 64, 95, 0.1);
  color: #e4405f;
}
.ms-page .ms-level-ico.pf-twitch {
  background: rgba(145, 70, 255, 0.1);
  color: #9146ff;
}
.ms-page .ms-level-ico.pf-facebook {
  background: rgba(24, 119, 242, 0.1);
  color: #1877f2;
}
.ms-page .ms-level-ico.pf-x {
  background: rgba(0, 0, 0, 0.06);
  color: #000;
}

.ms-page .ms-level-ico.pf-youtube svg,
.ms-page .ms-level-ico.pf-tiktok svg,
.ms-page .ms-level-ico.pf-instagram svg,
.ms-page .ms-level-ico.pf-twitch svg,
.ms-page .ms-level-ico.pf-facebook svg,
.ms-page .ms-level-ico.pf-x svg {
  width: 22px;
  height: 22px;
}

/* ---------- Below-min note (reused, ensure spacing in results) ---------- */

.ms-page .ms-section .ms-belowmin {
  margin-bottom: 0;
}

/* ---------- CTA block ---------- */

.ms-page .ms-cta {
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  margin-top: 4px;
}

.ms-page .ms-cta h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
}

.ms-page .ms-cta > p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 18px;
}

.ms-page .ms-cta-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.ms-page .ms-cta-fine {
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 0;
}

/* Want-count under the buttons */
.ms-page .ms-want-count {
  font-size: 14px;
  color: var(--muted);
  margin: 12px 0 0;
}

.ms-page .ms-want-count b {
  color: var(--text);
  font-weight: 700;
}

/* "Are you @handle?" line above the Claim button */
.ms-page .ms-cta-claim-line {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 28px 0 12px;
}

.ms-page .ms-claim-btn {
  display: inline-flex;
}

/* "Check another creator" bar */
.ms-page .ms-checkanother {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 20px 28px;
  margin-top: 24px;
}

.ms-page .ms-checkanother-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.ms-page .ms-checkanother-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 0;
}

.ms-page .ms-checkanother-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 6px 6px 6px 18px;
  flex: 1 1 320px;
  max-width: 440px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ms-page .ms-checkanother-form:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ms-page .ms-checkanother-at {
  color: #9aa3b2;
  font-size: 16px;
  flex-shrink: 0;
}

.ms-page .ms-checkanother-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  padding: 8px 0;
}

.ms-page .ms-checkanother-input::placeholder {
  color: #9aa3b2;
}

.ms-page .ms-checkanother-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 10px 18px;
}

.ms-page .ms-checkanother-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- Results responsive ---------- */

@media (max-width: 900px) {
  .ms-page .ms-level {
    flex-direction: column;
    gap: 18px;
  }

  .ms-page .ms-level-bar-wrap {
    padding-top: 16px;
  }

  .ms-page .ms-level-cards {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .ms-page .ms-identity {
    flex-direction: column;
    align-items: stretch;
  }

  .ms-page .ms-identity-actions {
    align-items: stretch;
  }

  .ms-page .ms-identity-actions .ms-actions-row {
    flex-wrap: wrap;
  }

  .ms-page .ms-identity-actions .btn {
    flex: 1;
  }

  .ms-page .ms-identity-stats {
    gap: 24px;
  }

  .ms-page .ms-section-title {
    font-size: 19px;
  }
  .ms-page .profile-actions {
    flex-wrap: nowrap;
  }

  .ms-page .profile-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ms-page .profile-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .ms-page .ms-identity-avatar {
    width: 72px;
    height: 72px;
  }

  .ms-page .ms-identity-name {
    font-size: 22px;
  }

  .ms-page .ms-identity-stats {
    flex-wrap: wrap;
    gap: 18px 28px;
  }

  .ms-page .ms-mcard {
    width: calc(50% - 6px);
  }

  .ms-page .ms-level-cards {
    width: 100%;
  }
}