#cpTop30PageModule {
    --ink: #141414;
    --muted: #6f6a5f;
    --line: rgba(0, 0, 0, 0.14);
    --line-soft: rgba(0, 0, 0, 0.08);
    --sky: #89CFF0;
    --sky-light: #d8f3ff;
    --sky-mid: #aee4fa;
    --red: #c41e3a;
    --red-dark: #8f1529;

    /* HOST-SURFACE tokens -- for elements rendering directly on the host page
       rather than inside one of this module's own panels. The host is LIGHT,
       so these resolve to the ordinary dark palette; they exist as their own
       names so all of them can be re-pointed from one place. */
    --on-host: #141414;
    --on-host-muted: #6f6a5f;
    --on-host-accent: #8f1529;
    --on-host-line: rgba(0, 0, 0, 0.14);

    --serif: Georgia, "Times New Roman", serif;
    --sans: Arial, Helvetica, sans-serif;

    /* ---- TYPE SCALE ---------------------------------------------------
       Every font-size in this module resolves from here. Before August 2026
       the modules used THIRTY ad-hoc sizes starting at 7.5px, 342 of them
       under 11px, which is the main reason the site read as dense and
       illegible on a phone. Dense stat tables genuinely want small text --
       Savant and FanGraphs sit around 12px -- so the floor is 11.5px, not a
       comfortable reading size, but nothing below it. The narrow-screen block
       at the end of this stylesheet lifts the bottom of the scale again. */
    --fs-micro: 11.5px;  /* dense table cells, chips, superscripts */
    --fs-xs: 12px;       /* column headers, meta lines, labels */
    --fs-sm: 13px;       /* secondary text */
    --fs-base: 14px;     /* body */
    --fs-md: 15px;       /* emphasis, player names in lists */
    --fs-lg: 17px;       /* sub-headings */
    --fs-xl: 20px;       /* headings */
    --fs-2xl: 24px;      /* section titles */
    --fs-3xl: clamp(26px, 3.4vw, 34px);  /* page titles */

    /* ---- SPACING (4px base) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* ---- RADIUS + ELEVATION ---- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.07), 0 8px 20px -12px rgba(0, 0, 0, 0.18);
    --shadow-3: 0 4px 14px rgba(0, 0, 0, 0.10), 0 18px 40px -20px rgba(0, 0, 0, 0.25);

    /* ---- MOTION ---- */
    --ease: cubic-bezier(0.4, 0.1, 0.2, 1);
    --dur-1: 0.16s;
    --dur-2: 0.28s;

    max-width: 1040px;
    margin: -18px auto 0;
    padding: 0 18px;
  }

  #cpTop30PageModule .cp-top30-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    perspective: 1400px;
  }

  #cpTop30PageModule .cp-prospect {
    text-align: center;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition:
      opacity 0.26s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

    /* Keep visual overflow uncontained so card shadows and rank glows can
       render behind the full card, matching the carousel. */
    overflow: visible;
  }

  #cpTop30PageModule .cp-prospect:nth-child(2) {
    transition-delay: 35ms;
  }

  #cpTop30PageModule .cp-prospect:nth-child(3) {
    transition-delay: 70ms;
  }

  #cpTop30PageModule .cp-player-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  /* ---------- The card ----------
     The updated card stock, hover lift, and rank-edge treatments remain.
     The original one-pass full-card light streak and original flip motion
     are restored below from Old_Top30. */
  #cpTop30PageModule .cp-card {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    --tier-glow: rgba(137, 207, 240, 0.5);
    --tier-edge: rgba(137, 207, 240, 0.85);
    --sweep-color: rgba(255, 255, 255, 0.52);

    position: relative;
    height: 334px;
    padding: 11px;
    overflow: hidden;
    border-radius: 16px;
    background:
      linear-gradient(180deg, #ffffff 0%, #fdfbf6 42%, #f0ece4 100%);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow:
      0 12px 24px rgba(0, 0, 0, 0.09),
      0 2px 5px rgba(0, 0, 0, 0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    /* NO scale here. A scale on this element is an ancestor transform over a
       preserve-3d subtree, which distorts the flip and was the main reason the
       flip felt worse than before. Translate only. */
    transform:
      translateY(var(--lift))
      rotateX(var(--rx))
      rotateY(var(--ry));
    transform-style: preserve-3d;
    transition:
      transform 0.24s ease,
      box-shadow 0.24s ease,
      border-color 0.24s ease;
  }

  #cpTop30PageModule .cp-player-link:hover .cp-card {
    --lift: -5px;
    box-shadow:
      0 22px 38px rgba(0, 0, 0, 0.16),
      0 4px 10px rgba(0, 0, 0, 0.06),
      0 0 0 1px var(--tier-glow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.85);
    border-color: var(--tier-edge);
  }


  #cpTop30PageModule .cp-player-link:focus-visible .cp-card {
    --lift: -5px;
    outline: 2px solid #c41e3a;
    outline-offset: 4px;
  }

  /* Rank tier only tints the hover edge — the top three read as a set without
     a permanent decoration competing with the photo. */
  #cpTop30PageModule .cp-card[data-rank="1"] { --tier-glow: rgba(214, 168, 55, 0.6); --tier-edge: rgba(198, 152, 40, 0.95); --sweep-color: rgba(255, 236, 160, 0.68); }
  #cpTop30PageModule .cp-card[data-rank="2"] { --tier-glow: rgba(166, 173, 183, 0.6); --tier-edge: rgba(148, 156, 167, 0.95); --sweep-color: rgba(240, 247, 255, 0.70); }
  #cpTop30PageModule .cp-card[data-rank="3"] { --tier-glow: rgba(190, 128, 70, 0.6); --tier-edge: rgba(170, 110, 55, 0.95); --sweep-color: rgba(245, 181, 126, 0.66); }

  /* A fixed sheen across the top third of the stock. It does not animate and
     it does not follow the pointer; it is there so the card catches light the
     way a printed card does. */
  #cpTop30PageModule .cp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 24;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      168deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.13) 22%,
      rgba(255, 255, 255, 0) 46%
    );
    opacity: 0.75;
    transition: opacity 0.24s ease;
  }

  #cpTop30PageModule .cp-player-link:hover .cp-card::before { opacity: 1; }
  #cpTop30PageModule .cp-card.is-flipped::before { opacity: 0.5; }

  /* Restored from Old_Top30: a soft diagonal streak crosses the full card
     once when the card is hovered or keyboard-focused. */
  #cpTop30PageModule .cp-card::after {
    content: "";
    position: absolute;
    top: -42%;
    left: -78%;
    width: 48%;
    height: 190%;
    z-index: 25;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.015) 24%,
      rgba(255, 255, 255, 0.10) 39%,
      var(--sweep-color) 50%,
      rgba(255, 255, 255, 0.12) 61%,
      rgba(255, 255, 255, 0.02) 76%,
      transparent 100%
    );
    filter: blur(8px);
    opacity: 0;
    transform: rotate(12deg) translate3d(-8%, 0, 0);
    transform-origin: center;
  }

  @keyframes cpHoloSweepV5 {
    0% {
      opacity: 0;
      transform: rotate(12deg) translate3d(-8%, 0, 0);
    }

    16% { opacity: 0.30; }
    48% { opacity: 0.68; }
    78% { opacity: 0.42; }

    100% {
      opacity: 0;
      transform: rotate(12deg) translate3d(430%, 0, 0);
    }
  }

  #cpTop30PageModule .cp-player-link:hover .cp-card:not(.is-flipped)::after,
  #cpTop30PageModule .cp-player-link:focus-visible .cp-card:not(.is-flipped)::after {
    animation: cpHoloSweepV5 2.05s cubic-bezier(0.30, 0.08, 0.22, 1) both;
  }

  /* Restored from Old_Top30: the face rotates in the card's existing 3D
     context, using the original reversible easing for smooth rapid flips. */
  #cpTop30PageModule .cp-card-face {
    position: absolute;
    inset: 11px;
    transform: rotateY(0deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
  }

  #cpTop30PageModule .cp-card.is-flipped .cp-card-face {
    transform: rotateY(180deg);
  }

  /* Deal-in — on first load the cards drop onto the table with a slight
     spin, staggered like being dealt from a deck. */
  @keyframes cpDealIn {
    from {
      opacity: 0;
      transform: translateY(34px) rotate(3deg) scale(0.955);
      filter: blur(3px);
    }

    to {
      opacity: 1;
      transform: translateY(0) rotate(0deg) scale(1);
      filter: blur(0);
    }
  }

  #cpTop30PageModule .cp-top30-grid.cp-deal .cp-prospect {
    animation: cpDealIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  #cpTop30PageModule .cp-top30-grid.cp-deal .cp-prospect:nth-child(2) {
    animation-delay: 110ms;
  }

  #cpTop30PageModule .cp-top30-grid.cp-deal .cp-prospect:nth-child(3) {
    animation-delay: 220ms;
  }

  #cpTop30PageModule .cp-card-front,
  #cpTop30PageModule .cp-card-back {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
  }

  #cpTop30PageModule .cp-card-front {
    transform: rotateY(0deg);
  }

  #cpTop30PageModule .cp-card-back {
    transform: rotateY(180deg);
  }

  /* box-sizing MATTERS here. This is `width/height: 100%` with a 1px border, so
     under the default content-box it measured 2px WIDER and TALLER than the
     `.cp-card-front` that clips it — the right and bottom borders were cropped
     away by that parent's `overflow: hidden` while the left and top ones showed.
     The result was a card with a visible blue-tinted edge down the left side and
     nothing on the right. border-box makes all four edges identical. */
  #cpTop30PageModule .cp-card-inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background:
      linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
      repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.040) 0,
        rgba(255, 255, 255, 0.040) 2px,
        rgba(0, 0, 0, 0.012) 2px,
        rgba(0, 0, 0, 0.012) 4px
      ),
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.48), transparent 28%),
      radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 26%),
      linear-gradient(145deg, #d8f3ff 0%, #aee4fa 43%, #89CFF0 100%);
    background-size:
      18px 18px,
      18px 18px,
      auto,
      auto,
      auto,
      auto;
    border: 1px solid rgba(0, 0, 0, 0.13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  #cpTop30PageModule .cp-card-back {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.48), transparent 28%),
      radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 26%),
      linear-gradient(145deg, #d8f3ff 0%, #aee4fa 43%, #89CFF0 100%);
    border: 1px solid rgba(0, 0, 0, 0.13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  #cpTop30PageModule .cp-card-back::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
      repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.035) 0,
        rgba(255, 255, 255, 0.035) 2px,
        rgba(0, 0, 0, 0.01) 2px,
        rgba(0, 0, 0, 0.01) 4px
      );
    background-size: 18px 18px, 18px 18px, auto;
    opacity: 0.22;
    pointer-events: none;
  }

  /* Frosted rather than flat white: the chips sit over the card's sky panel,
     and a translucent blur reads as glass on top of it instead of two paper
     stickers. They ease outward on hover so the top of the card opens up as
     the photo pushes forward. */
  #cpTop30PageModule .cp-card-level-chip,
  #cpTop30PageModule .cp-card-fv-chip {
    position: absolute;
    top: 16px;
    z-index: 8;
    padding: 5px 9px 6px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(6px) saturate(1.3);
    backdrop-filter: blur(6px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
      0 3px 9px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #cpTop30PageModule .cp-card-level-chip { left: 15px; }
  #cpTop30PageModule .cp-card-fv-chip { right: 15px; }

  #cpTop30PageModule .cp-photo-window {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 42px;
    bottom: 78px;
    overflow: hidden;
    border-radius: 18px 18px 6px 6px;
    background:
      radial-gradient(circle at 22% 14%, rgba(255, 255, 255, 0.40), transparent 28%),
      linear-gradient(180deg, #dff5ff 0%, #b6e5fa 54%, #89CFF0 100%);
    border: 5px solid rgba(255, 255, 255, 0.96);
    box-shadow:
      0 12px 18px rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 6;
    isolation: isolate;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  #cpTop30PageModule .cp-player-link:hover .cp-photo-window {
    box-shadow:
      0 16px 28px rgba(0, 0, 0, 0.14),
      0 0 24px rgba(137, 207, 240, 0.30),
      inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  #cpTop30PageModule .cp-photo-window::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 22% 14%, rgba(255, 255, 255, 0.40), transparent 28%),
      linear-gradient(180deg, #dff5ff 0%, #b6e5fa 54%, #89CFF0 100%);
    z-index: 0;
    pointer-events: none;
  }

  #cpTop30PageModule .cp-photo-window::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.06), transparent 36%),
      radial-gradient(circle at 50% 106%, rgba(255, 255, 255, 0.10), transparent 40%);
    z-index: 2;
    pointer-events: none;
  }

  #cpTop30PageModule .cp-headshot,
  #cpTop30PageModule .cp-default-headshot {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter:
      saturate(1.02)
      contrast(1.01)
      drop-shadow(0 12px 10px rgba(0, 0, 0, 0.18));
    transition: transform 0.22s ease, filter 0.22s ease;
  }

  #cpTop30PageModule .cp-default-headshot {
    width: auto;
    max-width: none;
  }

  #cpTop30PageModule .cp-player-link:hover .cp-headshot,
  #cpTop30PageModule .cp-player-link:hover .cp-default-headshot {
    transform: scale(1.035);
    filter:
      saturate(1.05)
      contrast(1.03)
      drop-shadow(0 15px 12px rgba(0, 0, 0, 0.21));
  }

  #cpTop30PageModule .cp-card-nameplate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    z-index: 7;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 246, 244, 0.99));
    border-top: 1px solid rgba(137, 207, 240, 0.65);
    box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.065);
  }

  #cpTop30PageModule .cp-card-nameplate::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(137, 207, 240, 0.16), transparent 26%, transparent 74%, rgba(137, 207, 240, 0.16));
    pointer-events: none;
  }


  #cpTop30PageModule .cp-card-logo-badge {
    position: absolute;
    left: 13px;
    bottom: 13px;
    width: 42px;
    height: 42px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #cpTop30PageModule .cp-card-logo-badge img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    display: block;
  }

  #cpTop30PageModule .cp-card-rank-badge {
    position: absolute;
    right: 13px;
    bottom: 13px;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  /* 3px of breathing room either side was not enough: at the grid's card width
     the longest names ("Rainiel Rodríguez") filled the block edge to edge and
     read as though they were running under the logo and the rank badge. The
     block is inset past both, and long names step down a size rather than
     touching their neighbours. */
  #cpTop30PageModule .cp-card-nameblock {
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 8px;
    height: 52px;
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #cpTop30PageModule .cp-card-name {
    width: 100%;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.04;
    color: #141414;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Set by JS on the cards whose name overruns its block. */
  #cpTop30PageModule .cp-card-name.is-long { font-size: 13.5px; }
  #cpTop30PageModule .cp-card-name.is-verylong { font-size: 12.5px; letter-spacing: -0.01em; }

  #cpTop30PageModule .cp-card-position {
    margin-top: 3px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  #cpTop30PageModule .cp-back-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 11px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  #cpTop30PageModule .cp-back-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }

  #cpTop30PageModule .cp-back-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px 6px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #cpTop30PageModule .cp-back-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 34px;
    padding: 0 9px;
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
  }

  #cpTop30PageModule .cp-back-name {
    margin: 0 auto 2px;
    max-width: 95%;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.04;
    color: #141414;
    text-align: center;
    text-wrap: balance;
  }

  #cpTop30PageModule .cp-back-sub {
    margin-bottom: 8px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
  }

  #cpTop30PageModule .cp-stats-box {
    min-height: 112px;
    padding: 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 7px 16px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }

  #cpTop30PageModule .cp-stats-loading,
  #cpTop30PageModule .cp-stats-error,
  #cpTop30PageModule .cp-stats-empty {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 700;
    color: #222;
    text-align: center;
  }

  #cpTop30PageModule .cp-stats-error {
    flex-direction: column;
    gap: 6px;
  }

  #cpTop30PageModule .cp-stats-empty {
    color: #333;
  }

  #cpTop30PageModule .cp-stats-title {
    margin-bottom: 7px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    color: #555;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
  }

  #cpTop30PageModule .cp-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  #cpTop30PageModule .cp-stat {
    padding: 7px 4px 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 244, 0.98));
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    text-align: center;
  }

  #cpTop30PageModule .cp-stat-value {
    display: block;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    color: #141414;
    white-space: nowrap;
  }

  #cpTop30PageModule .cp-stat-label {
    display: block;
    margin-top: 4px;
    font-family: var(--sans);
    font-size: 7.5px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  #cpTop30PageModule .cp-back-footer {
    margin-top: auto;
    padding-top: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 26px;
  }

  #cpTop30PageModule .cp-back-hint {
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    color: rgba(20, 20, 20, 0.58);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #cpTop30PageModule .cp-back-profile-link {
    position: relative;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #b91c35;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  }

  #cpTop30PageModule .cp-back-profile-link:hover {
    background: #ffffff;
    color: #8f1529;
  }

  /* Parallel treatments — the top 3 prospects get gold, silver, and bronze
     rank badges plus a matching card edge, like numbered parallels. */
  #cpTop30PageModule .cp-card[data-rank="1"] .cp-card-rank-badge,
  #cpTop30PageModule .cp-card[data-rank="1"] .cp-back-rank {
    background: linear-gradient(180deg, #f7dd7f 0%, #e3b94a 45%, #c9962a 100%);
    color: #402e06;
    border-color: rgba(122, 88, 12, 0.45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  }


  #cpTop30PageModule .cp-card[data-rank="2"] .cp-card-rank-badge,
  #cpTop30PageModule .cp-card[data-rank="2"] .cp-back-rank {
    background: linear-gradient(180deg, #f0f1f5 0%, #c8ccd6 45%, #a4a9b6 100%);
    color: #2b2e36;
    border-color: rgba(90, 96, 110, 0.4);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }


  #cpTop30PageModule .cp-card[data-rank="3"] .cp-card-rank-badge,
  #cpTop30PageModule .cp-card[data-rank="3"] .cp-back-rank {
    background: linear-gradient(180deg, #ecb27e 0%, #cd8144 45%, #a8642f 100%);
    color: #3a2008;
    border-color: rgba(110, 62, 22, 0.45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  }


  /* Stats pop in one by one when the back of the card loads. */
  @keyframes cpStatPop {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.94);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  #cpTop30PageModule .cp-stat {
    animation: cpStatPop 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  #cpTop30PageModule .cp-stat:nth-child(2) { animation-delay: 45ms; }
  #cpTop30PageModule .cp-stat:nth-child(3) { animation-delay: 90ms; }
  #cpTop30PageModule .cp-stat:nth-child(4) { animation-delay: 135ms; }
  #cpTop30PageModule .cp-stat:nth-child(5) { animation-delay: 180ms; }
  #cpTop30PageModule .cp-stat:nth-child(6) { animation-delay: 225ms; }

  #cpTop30PageModule .cp-top30-loading,
  #cpTop30PageModule .cp-top30-error {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--serif);
    font-size: 18px;
    padding: 40px 0;
  }

  #cpTop30PageModule.cp-is-mobile {
    max-width: 100%;
    margin-top: 8px;
    padding: 0 14px;
  }

  /* Cards only — the list view needs the full column width, and this rule's
     min(80vw, 305px) would squeeze it to a third of the screen. */
  #cpTop30PageModule.cp-is-mobile .cp-top30-grid:not(.is-list) {
    grid-template-columns: 1fr;
    gap: 0;
    width: min(80vw, 305px);
    margin: 0 auto;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card {
    height: clamp(246px, 75vw, 292px);
    padding: 9px;
    border-radius: 15px;
    box-shadow:
      0 12px 24px rgba(0, 0, 0, 0.095),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-face {
    inset: 9px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-front,
  #cpTop30PageModule.cp-is-mobile .cp-card-back,
  #cpTop30PageModule.cp-is-mobile .cp-card-inner {
    border-radius: 11px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-photo-window {
    left: 18px;
    right: 18px;
    top: 38px;
    bottom: 68px;
    border-width: 4px;
    border-radius: 15px 15px 5px 5px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-level-chip,
  #cpTop30PageModule.cp-is-mobile .cp-card-fv-chip {
    top: 13px;
    padding: 4px 8px 5px;
    font-size: 9px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-level-chip { left: 13px; }
  #cpTop30PageModule.cp-is-mobile .cp-card-fv-chip { right: 13px; }

  #cpTop30PageModule.cp-is-mobile .cp-card-nameplate {
    height: 62px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-logo-badge {
    left: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-rank-badge {
    right: 10px;
    bottom: 10px;
    min-width: 38px;
    height: 38px;
    font-size: 15px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-nameblock {
    left: 52px;
    right: 52px;
    bottom: 7px;
    height: 47px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-name {
    font-size: 13.5px;
    line-height: 1.04;
  }

  #cpTop30PageModule.cp-is-mobile .cp-card-position {
    margin-top: 3px;
    font-size: 8px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-headshot,
  #cpTop30PageModule.cp-is-mobile .cp-default-headshot {
    filter:
      saturate(1.02)
      contrast(1.01)
      drop-shadow(0 9px 8px rgba(0, 0, 0, 0.16));
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-content {
    padding: 9px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-top {
    margin-bottom: 4px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-label {
    padding: 4px 8px 5px;
    font-size: 9px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-rank {
    min-width: 36px;
    height: 30px;
    font-size: 13px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-name {
    font-size: 14px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-sub {
    margin-bottom: 5px;
    font-size: 8px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-stats-box {
    min-height: 96px;
    padding: 7px;
    border-radius: 10px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-stats-loading,
  #cpTop30PageModule.cp-is-mobile .cp-stats-error,
  #cpTop30PageModule.cp-is-mobile .cp-stats-empty {
    min-height: 80px;
    font-size: 12px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-stats-title {
    margin-bottom: 5px;
    font-size: 8px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-stats-grid {
    gap: 5px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-stat {
    padding: 5px 3px 4px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-stat-value {
    font-size: 12px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-stat-label {
    margin-top: 3px;
    font-size: 7.5px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-footer {
    padding-top: 5px;
    min-height: 22px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-hint,
  #cpTop30PageModule.cp-is-mobile .cp-back-profile-link {
    font-size: 7.5px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-back-profile-link {
    padding: 5px 6px;
  }


  /* ---------- Dedicated page: controls bar and full grid ---------- */
  #cpTop30PageModule .cp-top30-grid {
    row-gap: 30px;
    padding-bottom: 26px;
  }

  /* ---------- Toolbar ----------
     One framed control block, the same shape the Players tab uses for its
     leaders toolbar and the Transactions tab for its filters: a segmented
     control for the primary switch, then labelled chip/select groups. Five
     free-floating pills of equal weight gave the eye no hierarchy. The fill is
     opaque because the panel sits directly on the host page. */
  #cpTop30PageModule .cp-page-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 14px;
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: linear-gradient(180deg, #f4f9fd, #fffdf8);
  }

  #cpTop30PageModule .cp-page-bar-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  #cpTop30PageModule .cp-page-tabs,
  #cpTop30PageModule .cp-page-viewtabs {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: rgba(255, 255, 255, 0.85);
    gap: 2px;
  }

  #cpTop30PageModule .cp-page-tabs button,
  #cpTop30PageModule .cp-page-viewtabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    /* 12px, not 15: the primary row carries four clusters (group switch,
       search, view switch, export) and at 15 they add up to just past a
       ~900px module, which dropped Export onto a row of its own. */
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6b6459;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  #cpTop30PageModule .cp-page-tabs button:hover,
  #cpTop30PageModule .cp-page-viewtabs button:hover { color: #8f1529; }

  #cpTop30PageModule .cp-page-tabs button.is-active,
  #cpTop30PageModule .cp-page-viewtabs button.is-active {
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.28);
  }

  #cpTop30PageModule .cp-page-viewtabs { margin-left: auto; }

  /* Same treatment as .cp-tx-tabcount on Transactions. */
  #cpTop30PageModule .cp-page-tabcount {
    font-size: var(--fs-micro);
    font-weight: 900;
    letter-spacing: 0.04em;
    opacity: 0.62;
    font-variant-numeric: tabular-nums;
  }

  #cpTop30PageModule .cp-page-tabs button.is-active .cp-page-tabcount { opacity: 0.8; }
  #cpTop30PageModule .cp-page-tabs button:disabled { opacity: 0.4; cursor: default; }
  #cpTop30PageModule .cp-page-tabs button:disabled:hover { color: #6b6459; }

  #cpTop30PageModule .cp-page-searchfield {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 170px;
    min-width: 150px;
    max-width: 300px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: rgba(255, 255, 255, 0.92);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
  }

  #cpTop30PageModule .cp-page-searchfield:focus-within {
    border-color: rgba(196, 30, 58, 0.55);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.12);
  }

  #cpTop30PageModule .cp-page-searchicon {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: #b3ada1;
    pointer-events: none;
    transition: color 0.16s ease;
  }

  #cpTop30PageModule .cp-page-searchfield:focus-within .cp-page-searchicon { color: #c41e3a; }

  #cpTop30PageModule .cp-page-search {
    width: 100%;
    height: 34px;
    padding: 0 32px 0 33px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--serif);
    font-size: 13.5px;
    color: #141414;
    outline: none;
  }

  #cpTop30PageModule .cp-page-search::placeholder { color: #a8a296; }
  #cpTop30PageModule .cp-page-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

  #cpTop30PageModule .cp-page-searchclear {
    position: absolute;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 0;
    background: rgba(0, 0, 0, 0.06);
    color: #6f6a5f;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #cpTop30PageModule .cp-page-searchclear[hidden] { display: none; }
  #cpTop30PageModule .cp-page-searchclear:hover { background: rgba(196, 30, 58, 0.12); color: #8f1529; }

  #cpTop30PageModule .cp-page-bar-filters {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
  }

  #cpTop30PageModule .cp-page-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  #cpTop30PageModule .cp-page-filter > span {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6f6a5f;
  }

  #cpTop30PageModule .cp-page-select {
    height: 26px;
    padding: 0 28px 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b91c35' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center,
      rgba(255, 255, 255, 0.8);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5d574d;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
  }

  #cpTop30PageModule .cp-page-select:hover { border-color: rgba(196, 30, 58, 0.45); color: #8f1529; }

  #cpTop30PageModule .cp-page-select.is-filtering {
    background-color: rgba(196, 30, 58, 0.12);
    border-color: rgba(196, 30, 58, 0.45);
    color: #8f1529;
  }

  #cpTop30PageModule .cp-page-select:disabled { opacity: 0.45; cursor: default; }

  #cpTop30PageModule .cp-page-bar-secondary {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    flex-wrap: wrap;
  }

  #cpTop30PageModule .cp-page-count {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6f6a5f;
    white-space: nowrap;
  }

  /* ---------- Rank movement ---------- */
  #cpTop30PageModule .cp-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
  }

  #cpTop30PageModule .cp-move-up { color: #1c7a45; }
  #cpTop30PageModule .cp-move-down { color: #b91c35; }
  #cpTop30PageModule .cp-move-flat { color: #9a9388; }
  #cpTop30PageModule .cp-move-new { color: #0f3d57; }

  /* On the card it rides above the rank badge, in the plate's dead space. */
  #cpTop30PageModule .cp-move-card {
    position: absolute;
    right: 13px;
    bottom: 56px;
    z-index: 9;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* NEW is a state, not a direction, so it gets the sky tint rather than the
     plain white pill the arrows use — legible as "arrived" at a glance. */
  #cpTop30PageModule .cp-move-card.cp-move-new {
    background: rgba(137, 207, 240, 0.92);
    border-color: rgba(15, 61, 87, 0.28);
    color: #0d3247;
  }

  /* In the list it sits under the rank pill. */
  #cpTop30PageModule .cp-move-list {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translateX(-50%);
  }

  #cpTop30PageModule .cp-listrank { position: relative; overflow: visible; }

  /* ---------- History view ----------
     The List answers "who is where"; this answers "where has he been". One row
     per prospect, a step line of his rank across every published list, and the
     move since the list before. Hidden entirely until the sheet has been
     published twice — a trend of one point is not a trend. */
  #cpTop30PageModule .cp-top30-grid.is-history {
    display: block;
    perspective: none;
    padding-bottom: 26px;
  }

  #cpTop30PageModule .cp-histsummary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  #cpTop30PageModule .cp-histstat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.72);
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 800;
    color: #141414;
  }

  #cpTop30PageModule .cp-histstat b {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #6f6a5f;
  }

  #cpTop30PageModule .cp-histhead,
  #cpTop30PageModule .cp-histrow {
    display: grid;
    grid-template-columns: 38px 42px minmax(0, 1fr) 132px 52px 58px;
    gap: 12px;
    align-items: center;
  }

  #cpTop30PageModule .cp-histhead {
    padding: 0 14px 7px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #6f6a5f;
  }

  #cpTop30PageModule .cp-histlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #cpTop30PageModule .cp-histrow {
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: linear-gradient(180deg, #fffdf8, #f6f3ec);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.045);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  }

  #cpTop30PageModule a.cp-histrow:hover {
    border-color: rgba(196, 30, 58, 0.34);
    transform: translateY(-1px);
    box-shadow: 0 5px 13px rgba(196, 30, 58, 0.1);
  }

  #cpTop30PageModule .cp-histrank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: 8px;
    background: rgba(196, 30, 58, 0.1);
    color: #8f1529;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 900;
  }

  #cpTop30PageModule .cp-histavatar {
    position: relative;
    width: 42px;
    height: 63px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
  }

  #cpTop30PageModule .cp-histavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

  #cpTop30PageModule .cp-histname {
    display: block;
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 900;
    color: #141414;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #cpTop30PageModule .cp-histsub {
    display: block;
    margin-top: 2px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6f6a5f;
  }

  #cpTop30PageModule .cp-histspark { display: block; width: 132px; height: 34px; overflow: visible; }
  #cpTop30PageModule .cp-histspark .cp-histline { fill: none; stroke: #c41e3a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #cpTop30PageModule .cp-histspark .cp-histgap { fill: none; stroke: rgba(0, 0, 0, 0.22); stroke-width: 1.5; stroke-dasharray: 3 3; }
  #cpTop30PageModule .cp-histspark .cp-histdot { fill: #ffffff; stroke: #c41e3a; stroke-width: 1.5; }
  #cpTop30PageModule .cp-histspark .cp-histdot.is-now { fill: #c41e3a; }
  #cpTop30PageModule .cp-histspark .cp-histbase { stroke: rgba(0, 0, 0, 0.09); stroke-width: 1; }

  #cpTop30PageModule .cp-histcell {
    text-align: center;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 900;
    color: #141414;
    font-variant-numeric: tabular-nums;
  }

  #cpTop30PageModule .cp-histcell.is-empty { color: #6f6a5f; font-weight: 800; }
  #cpTop30PageModule .cp-histmove { display: flex; justify-content: center; }
  #cpTop30PageModule .cp-histempty {
    padding: 26px 18px;
    text-align: center;
    font-family: var(--sans);
    font-size: 13px;
    color: #6f6a5f;
    border: 2px dashed rgba(0, 0, 0, 0.16);
    border-radius: 14px;
  }

  /* Phone: the peak column goes (it is in the row's own subtitle) and the
     sparkline narrows, so the name still gets a readable share of the width. */
  #cpTop30PageModule.cp-is-mobile .cp-histhead { display: none; }

  #cpTop30PageModule.cp-is-mobile .cp-histrow {
    grid-template-columns: 28px 32px minmax(0, 1fr) 74px 34px;
    gap: 7px;
    padding: 7px 9px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-histavatar { width: 32px; height: 48px; }
  #cpTop30PageModule.cp-is-mobile .cp-histname { font-size: 14px; }
  #cpTop30PageModule.cp-is-mobile .cp-histsub { font-size: 8.5px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Position, level and peak fit one phone line; the appearance count is the
     piece that pushed it onto two, and the sparkline already says it. */
  #cpTop30PageModule.cp-is-mobile .cp-histcount { display: none; }
  #cpTop30PageModule.cp-is-mobile .cp-histspark { width: 74px; height: 26px; }
  #cpTop30PageModule.cp-is-mobile .cp-histpeak { display: none; }
  #cpTop30PageModule.cp-is-mobile .cp-histrank { height: 24px; font-size: 11.5px; }
  #cpTop30PageModule.cp-is-mobile .cp-histstat { font-size: 10.5px; padding: 6px 10px; }

  /* ---------- List view ----------
     Thirty flip cards are a browsing surface, not a comparing one. The list is
     the same roster as rows: one line per prospect with the season line
     already on it, so the whole board can be read without a single click. */
  #cpTop30PageModule .cp-top30-grid.is-list {
    display: block;
    perspective: none;
    padding-bottom: 26px;
  }

  #cpTop30PageModule .cp-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  #cpTop30PageModule .cp-listhead {
    display: grid;
    grid-template-columns: 38px 44px minmax(0, 1fr) 48px 46px 50px 44px 54px minmax(0, 1.15fr);
    gap: 12px;
    align-items: center;
    padding: 0 14px 7px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #6f6a5f;
    border-bottom: 2px dashed rgba(0, 0, 0, 0.18);
    margin-bottom: 9px;
    /* Sticky so the column labels survive a 30-row scroll. It needs its own
       surface or the list rows show through: a near-opaque light fill plus a
       blur, matching the light host page. */
    position: sticky;
    top: 0;
    z-index: 5;
    padding-top: 9px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  #cpTop30PageModule .cp-listrow {
    display: grid;
    /* MUST match .cp-listhead above, column for column. The row carries nine
       cells now that Prev exists; leaving this at eight pushed the season line
       onto an implicit second row at column one, where it rendered outside the
       card entirely. */
    grid-template-columns: 38px 44px minmax(0, 1fr) 48px 46px 50px 44px 54px minmax(0, 1.15fr);
    gap: 12px;
    align-items: center;
    padding: 8px 14px;
    border-radius: 13px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: linear-gradient(180deg, #fffdf8 0%, #f1eee7 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    color: #141414;
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  }

  #cpTop30PageModule .cp-listrow:hover {
    border-color: rgba(137, 207, 240, 0.9);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(137, 207, 240, 0.34);
    transform: translateY(-1px);
  }

  #cpTop30PageModule .cp-listrank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #ffffff;
    font-family: var(--sans);
    font-size: var(--fs-base);
    font-weight: 900;
    letter-spacing: -0.03em;
  }

  #cpTop30PageModule .cp-listrow[data-rank="1"] .cp-listrank { background: linear-gradient(180deg, #e3bd53, #c2921c); color: #3a2a02; }
  #cpTop30PageModule .cp-listrow[data-rank="2"] .cp-listrank { background: linear-gradient(180deg, #d8dade, #adb2b8); color: #2b2f33; }
  #cpTop30PageModule .cp-listrow[data-rank="3"] .cp-listrank { background: linear-gradient(180deg, #d09a63, #b0763c); color: #341f08; }

  /* Full 2:3 portrait, never cropped square — the subject sits at a different
     height in every asset, so a square window clips someone's chin. */
  #cpTop30PageModule .cp-listavatar {
    position: relative;
    width: 44px;
    height: 66px;
    overflow: hidden;
    border-radius: 9px;
    background: linear-gradient(180deg, #eef6fb, #dfeaf3);
    border: 1px solid rgba(0, 0, 0, 0.10);
  }

  #cpTop30PageModule .cp-listavatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  #cpTop30PageModule .cp-listavatar-logo {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #cpTop30PageModule .cp-listavatar-logo img { width: 84%; height: 84%; object-fit: contain; }

  #cpTop30PageModule .cp-listname {
    display: block;
    min-width: 0;
    font-family: var(--serif);
    font-size: 14.5px;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The wide layout already has Pos / Level / Age / FV as their own columns,
     so the subline would just repeat them; it exists for the narrow layout
     below, where those columns are dropped. */
  #cpTop30PageModule .cp-listsub {
    display: none;
    margin-top: 2px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6f6a5f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #cpTop30PageModule .cp-listcell {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #4a453c;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  #cpTop30PageModule .cp-listcell.is-empty { color: #b3ada1; }

  #cpTop30PageModule .cp-listfv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, #d8f3ff, #aee4fa);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #0f3d57;
    font-size: 10px;
  }

  /* The season line: label-over-value pairs so the row reads as a stat strip
     rather than a comma-separated sentence. */
  #cpTop30PageModule .cp-listline {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    min-width: 0;
  }

  #cpTop30PageModule .cp-liststat { display: flex; flex-direction: column; align-items: center; gap: 1px; }

  #cpTop30PageModule .cp-liststat-value {
    font-family: var(--serif);
    font-size: var(--fs-base);
    font-weight: 900;
    line-height: 1;
    color: #141414;
    font-variant-numeric: tabular-nums;
  }

  #cpTop30PageModule .cp-liststat-label {
    font-family: var(--sans);
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #b91c35;
  }

  #cpTop30PageModule .cp-listline-note {
    font-family: var(--sans);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b3ada1;
    align-self: center;
  }

  #cpTop30PageModule .cp-listline-skel {
    width: 130px;
    height: 15px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.07);
    position: relative;
    overflow: hidden;
    align-self: center;
  }

  #cpTop30PageModule .cp-listline-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: cpListSkel 1.4s ease-in-out infinite;
  }

  @keyframes cpListSkel { to { transform: translateX(100%); } }

  @media (max-width: 900px) {
    #cpTop30PageModule .cp-top30-grid:not(.is-list) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* ---------- Narrow list ----------
     The nine-column row needs ~820px, so below that the numeric columns fold
     into the subline and the season line moves under the name.

     THE WASTE WAS A GRID ROW NOBODY OWNED. `.cp-listline` sits in column
     three, which is already taken in row one by the name — so it landed in an
     implicit SECOND row, stacked under a first row whose height was set by the
     60px portrait. The name block only needs ~30px of that, so the row came to
     60 + 30 + padding ~= 104px with half of it air, and the space beside the
     photo in row two went unused.

     Spanning the rank and the photo across BOTH rows is what fixes it: the
     text stack (name 17 + meta 13) and the stat strip (24) then add up to the
     portrait's own 60px, so nothing is left over. The strip also stops
     wrapping — bunched left with flex-wrap it took a second line at 375px,
     which is where the last of the height went. Measured on a 375px phone:
     row 115 -> 78, the whole board 3511 -> 2485. */
  #cpTop30PageModule.cp-is-narrowlist .cp-listhead { display: none; }

  #cpTop30PageModule.cp-is-narrowlist .cp-list { gap: 5px; }

  #cpTop30PageModule.cp-is-narrowlist .cp-listrow {
    grid-template-columns: 28px 40px minmax(0, 1fr);
    gap: 0 9px;
    padding: 7px 10px;
    align-items: start;
    border-radius: 11px;
  }

  /* Both left cells span the text row AND the stat row. */
  #cpTop30PageModule.cp-is-narrowlist .cp-listavatar {
    width: 40px;
    height: 60px;
    grid-row: 1 / span 2;
    align-self: center;
  }

  #cpTop30PageModule.cp-is-narrowlist .cp-listrank {
    height: 26px;
    font-size: var(--fs-sm);
    grid-row: 1 / span 2;
    align-self: center;
  }

  /* Name and meta as one block, hugging its own content. */
  #cpTop30PageModule.cp-is-narrowlist .cp-listid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  #cpTop30PageModule.cp-is-narrowlist .cp-listname { font-size: var(--fs-md); }
  #cpTop30PageModule.cp-is-narrowlist .cp-listsub {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-micro);
    letter-spacing: 0.05em;
  }

  #cpTop30PageModule.cp-is-narrowlist .cp-listcell.cp-listpos,
  #cpTop30PageModule.cp-is-narrowlist .cp-listcell.cp-listlevel,
  #cpTop30PageModule.cp-is-narrowlist .cp-listcell.cp-listage,
  #cpTop30PageModule.cp-is-narrowlist .cp-listcell.cp-listprev,
  #cpTop30PageModule.cp-is-narrowlist .cp-listcell.cp-listfvcell { display: none; }

  /* Beside the photo, in the row the span above opened up. Equal-width stats
     spread across the column instead of bunching left and leaving a hole. */
  #cpTop30PageModule.cp-is-narrowlist .cp-listline {
    grid-column: 3;
    justify-content: space-between;
    margin-top: 4px;
    flex-wrap: nowrap;
    gap: 6px;
  }

  #cpTop30PageModule.cp-is-narrowlist .cp-liststat { flex: 1 1 0; min-width: 0; }
  #cpTop30PageModule.cp-is-narrowlist .cp-liststat-value { font-size: var(--fs-base); }
  #cpTop30PageModule.cp-is-narrowlist .cp-liststat-label { font-size: var(--fs-micro); }
  #cpTop30PageModule.cp-is-narrowlist .cp-listline-note { font-size: var(--fs-micro); }
  #cpTop30PageModule.cp-is-narrowlist .cp-listline-skel { width: 100%; }

  #cpTop30PageModule.cp-is-mobile .cp-top30-grid:not(.is-list) {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-bar { padding: 10px; gap: 9px; }
  #cpTop30PageModule.cp-is-mobile .cp-page-bar-primary { display: block; }

  #cpTop30PageModule.cp-is-mobile .cp-page-tabs,
  #cpTop30PageModule.cp-is-mobile .cp-page-viewtabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 100%;
    margin: 0;
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-viewtabs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-top: 8px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-tabs button,
  #cpTop30PageModule.cp-is-mobile .cp-page-viewtabs button {
    width: 100%;
    padding: 0 6px;
    font-size: 11px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-searchfield {
    margin: 8px 0 0;
    max-width: none;
    width: 100%;
  }

  /* ---------- Mobile filter disclosure ----------
     Matches the block in TransactionsTab / AlertsTab. Literal colours: this
     file deliberately defines no custom properties. */
  #cpTop30PageModule .cp-page-filtertoggle { display: none; }

  #cpTop30PageModule.cp-is-mobile .cp-page-filtertoggle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #ffffff;
    font-family: var(--sans);
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #141414;
    cursor: pointer;
  }

  #cpTop30PageModule .cp-page-filtercount {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: #c41e3a;
    color: #ffffff;
    font-size: var(--fs-micro);
    line-height: 17px;
    text-align: center;
  }

  #cpTop30PageModule .cp-page-filtercaret {
    margin-left: auto;
    font-size: var(--fs-md);
    line-height: 1;
    transition: transform 0.18s ease;
  }

  #cpTop30PageModule .cp-page-filtertoggle[aria-expanded="true"] .cp-page-filtercaret {
    transform: rotate(90deg);
  }

  @media (prefers-reduced-motion: reduce) {
    #cpTop30PageModule .cp-page-filtercaret { transition: none; }
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-bar-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-bar-filters[hidden] { display: none; }

  #cpTop30PageModule.cp-is-mobile .cp-page-filter { justify-content: center; }

  #cpTop30PageModule.cp-is-mobile .cp-page-bar-secondary {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-count {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }


  /* ---------- Export graphic ----------
     Same 1080 x 1350 canvas and preview-modal shape as the farm report's two
     exports, so the site produces one family of shareable graphics. */
  #cpTop30PageModule .cp-page-export {
    height: 32px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    color: #ffffff;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.28);
    transition: filter 0.15s ease, opacity 0.15s ease;
  }

  #cpTop30PageModule .cp-page-export:hover:not(:disabled) { filter: brightness(1.07); }
  #cpTop30PageModule .cp-page-export:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

  #cpTop30PageModule .cp-exp-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  #cpTop30PageModule .cp-exp-modal[hidden] { display: none; }

  #cpTop30PageModule .cp-exp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 10, 12, 0.62);
  }

  #cpTop30PageModule .cp-exp-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(980px, 100%);
    max-height: min(92vh, 900px);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: #fffdf8;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  #cpTop30PageModule .cp-exp-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  #cpTop30PageModule .cp-exp-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 900;
    color: #141414;
  }

  #cpTop30PageModule .cp-exp-sub {
    margin: 4px 0 0;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.45;
    color: #6f6a5f;
  }

  #cpTop30PageModule .cp-exp-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    font-size: 19px;
    line-height: 1;
    color: #6f6a5f;
    cursor: pointer;
  }

  #cpTop30PageModule .cp-exp-close:hover { background: rgba(196, 30, 58, 0.12); color: #8f1529; }

  #cpTop30PageModule .cp-exp-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    padding: 18px 20px;
    overflow: auto;
  }

  #cpTop30PageModule .cp-exp-stage {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
  }

  /* The canvas is 4:5, so in a wide-ish column it is taller than the dialog.
     Sizing it by HEIGHT keeps the whole graphic visible at once — a preview
     you have to scroll cannot be judged as a composition. */
  #cpTop30PageModule .cp-exp-canvaswrap {
    position: relative;
    display: flex;
    justify-content: center;
    border-radius: 14px;
    overflow: hidden;
    background: #f2eee7;
    border: 1px solid rgba(0, 0, 0, 0.12);
  }

  #cpTop30PageModule .cp-exp-canvas {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(58vh, 620px);
  }

  #cpTop30PageModule .cp-exp-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 253, 248, 0.86);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8f1529;
  }

  #cpTop30PageModule .cp-exp-loading[hidden] { display: none; }

  #cpTop30PageModule .cp-exp-note {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #6f6a5f;
  }

  #cpTop30PageModule .cp-exp-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  #cpTop30PageModule .cp-exp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  #cpTop30PageModule .cp-exp-field > span {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6f6a5f;
  }

  #cpTop30PageModule .cp-exp-field select,
  #cpTop30PageModule .cp-exp-field input {
    height: 34px;
    padding: 0 11px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: #ffffff;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    color: #141414;
    outline: none;
  }

  #cpTop30PageModule .cp-exp-hint {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #6f6a5f;
    padding: 10px 11px;
    border-radius: 11px;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    background: rgba(137, 207, 240, 0.12);
  }

  #cpTop30PageModule .cp-exp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 13px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
  }

  #cpTop30PageModule .cp-exp-action {
    height: 36px;
    padding: 0 17px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #ffffff;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #444;
    cursor: pointer;
  }

  #cpTop30PageModule .cp-exp-action:hover { border-color: rgba(196, 30, 58, 0.5); color: #8f1529; }

  #cpTop30PageModule .cp-exp-action.is-primary {
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    border-color: rgba(0, 0, 0, 0.14);
    color: #ffffff;
  }

  #cpTop30PageModule .cp-exp-action.is-primary:hover { filter: brightness(1.07); color: #ffffff; }
  #cpTop30PageModule .cp-exp-action:disabled { opacity: 0.5; cursor: default; }

  @media (max-width: 780px) {
    #cpTop30PageModule .cp-exp-body { grid-template-columns: minmax(0, 1fr); }
  }



  /* ---------- Mobile refinements ----------
     Three things were wrong on a phone across every toolbar: controls were
     26px tall (well under a comfortable touch target), a lone action button
     sat orphaned at the left of its own row, and the filter groups centred
     their label above a shrink-to-fit control, which wasted the width and made
     each row a different shape. Here the label sits left at a fixed width and
     the control fills the rest, so the rows line up as a column of full-width
     fields — the same shape the farm report already had. */
  #cpTop30PageModule.cp-is-mobile .cp-page-tabs button,
  #cpTop30PageModule.cp-is-mobile .cp-page-viewtabs button { height: 38px; font-size: 11px; }

  #cpTop30PageModule.cp-is-mobile .cp-page-search { height: 40px; font-size: 14.5px; }
  #cpTop30PageModule.cp-is-mobile .cp-page-searchfield { border-radius: 12px; }
  #cpTop30PageModule.cp-is-mobile .cp-page-tabs,
  #cpTop30PageModule.cp-is-mobile .cp-page-viewtabs { border-radius: 12px; padding: 3px; }
  #cpTop30PageModule.cp-is-mobile .cp-page-tabs button,
  #cpTop30PageModule.cp-is-mobile .cp-page-viewtabs button { border-radius: 10px; }

  #cpTop30PageModule.cp-is-mobile .cp-page-filter {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-filter > span { text-align: left; }

  #cpTop30PageModule.cp-is-mobile .cp-page-select {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    font-size: 11px;
    background-position: right 12px center;
  }

  /* Full width, not stranded at the left of an empty row. */
  #cpTop30PageModule.cp-is-mobile .cp-page-export {
    width: 100%;
    height: 40px;
    margin-top: 8px;
    border-radius: 12px;
    font-size: 11.5px;
  }

  #cpTop30PageModule.cp-is-mobile .cp-page-count {
    padding-top: 2px;
    font-size: 10.5px;
  }

  /* 8px type is legible on a desktop card at arm's length and not on a phone. */
  #cpTop30PageModule.cp-is-mobile .cp-card-position,
  #cpTop30PageModule.cp-is-mobile .cp-back-sub { font-size: 9px; }
  #cpTop30PageModule.cp-is-mobile .cp-move { font-size: 9.5px; }

  /* 94vw is measured against the VIEWPORT, but this grid sits inside the
     module's 18px padding — so the track was wider than its container and the
     card sat pushed to the right instead of centred. A percentage of the
     container is the right unit here. */
  #cpTop30PageModule.cp-is-mobile .cp-top30-grid:not(.is-list) {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  #cpTop30PageModule.cp-is-mobile .cp-exp-dialog { max-height: 92vh; }
  #cpTop30PageModule.cp-is-mobile .cp-exp-action { height: 40px; flex: 1 1 auto; }

  @media (prefers-reduced-motion: reduce) {
    #cpTop30PageModule .cp-card::after {
      animation: none !important;
    }
  }


  /* ---------- Reliability, accessibility, and lighter rendering ---------- */
  #cpTop30PageModule .cp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #cpTop30PageModule .cp-top30-loading,
  #cpTop30PageModule .cp-top30-error {
    width: 100%;
    box-sizing: border-box;
  }

  #cpTop30PageModule .cp-loading-copy {
    display: block;
    margin-bottom: 18px;
    color: #333;
  }

  #cpTop30PageModule .cp-loading-skeletons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
  }

  #cpTop30PageModule .cp-skeleton-card {
    position: relative;
    display: block;
    height: 334px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(110deg, #f0eee9 8%, #faf9f5 18%, #f0eee9 33%);
    background-size: 220% 100%;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    animation: cpTop30SkeletonPulse 1.25s linear infinite;
  }

  #cpTop30PageModule .cp-skeleton-card::before,
  #cpTop30PageModule .cp-skeleton-card::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.58);
  }

  #cpTop30PageModule .cp-skeleton-card::before {
    top: 42px;
    bottom: 78px;
  }

  #cpTop30PageModule .cp-skeleton-card::after {
    left: 52px;
    right: 52px;
    bottom: 25px;
    height: 20px;
  }

  @keyframes cpTop30SkeletonPulse {
    to { background-position-x: -220%; }
  }

  #cpTop30PageModule .cp-top30-error {
    color: #292929;
  }

  #cpTop30PageModule .cp-error-title {
    display: block;
    margin-bottom: 6px;
    font-weight: 900;
  }

  #cpTop30PageModule .cp-error-detail {
    display: block;
    margin: 0 auto 16px;
    max-width: 440px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    color: #666;
  }

  #cpTop30PageModule .cp-retry-button,
  #cpTop30PageModule .cp-stats-retry {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.10);
  }

  #cpTop30PageModule .cp-stats-retry {
    min-height: 34px;
    margin-top: 8px;
    padding: 0 12px;
    font-size: 9px;
  }

  #cpTop30PageModule .cp-retry-button:hover,
  #cpTop30PageModule .cp-stats-retry:hover {
    background: linear-gradient(180deg, #d33a54, #99162c);
  }

  #cpTop30PageModule .cp-retry-button:focus-visible,
  #cpTop30PageModule .cp-stats-retry:focus-visible,
  #cpTop30PageModule .cp-page-search:focus-visible,
  #cpTop30PageModule .cp-page-select:focus-visible,
  #cpTop30PageModule .cp-back-profile-link:focus-visible {
    outline: 3px solid rgba(196, 30, 58, 0.38);
    outline-offset: 3px;
  }

  #cpTop30PageModule .cp-card-logo-badge,
  #cpTop30PageModule .cp-card-rank-badge,
  #cpTop30PageModule .cp-back-label,
  #cpTop30PageModule .cp-back-rank,
  #cpTop30PageModule .cp-stat,
  #cpTop30PageModule .cp-back-profile-link {
    border-radius: 9px;
  }

  #cpTop30PageModule .cp-player-link:hover .cp-card,
  #cpTop30PageModule .cp-player-link:focus-visible .cp-card,
  #cpTop30PageModule .cp-card.is-flipped {
    will-change: transform;
  }

  #cpTop30PageModule .cp-stats-error {
    flex-direction: column;
  }

  #cpTop30PageModule .cp-player-link[aria-pressed="true"] .cp-card {
    border-color: rgba(196, 30, 58, 0.34);
  }

  #cpTop30PageModule .cp-back-profile-link {
    min-height: 34px;
    box-sizing: border-box;
  }

  @media (max-width: 640px) {
    #cpTop30PageModule .cp-loading-skeletons {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    #cpTop30PageModule .cp-loading-skeletons .cp-skeleton-card:nth-child(n+2) {
      display: none;
    }
  }


  /* Narrow screens lift the bottom of the type scale: the same chip that can
     sit at 11.5px on a desktop table is being read at arm's length on a phone.
     Only the small end moves -- headings are already large enough. */
  @media (max-width: 640px) {
    #cpTop30PageModule {
      --fs-micro: 12px;
      --fs-xs: 12.5px;
      --fs-sm: 13.5px;
      --fs-base: 14.5px;
      --fs-md: 15.5px;
    }
  }


  /* iOS holds a tap for ~300ms waiting to see whether a double-tap-zoom is
     coming. `manipulation` releases it, which is the single cheapest
     responsiveness win on a phone. Applied to everything interactive rather
     than per-control, so a new button cannot forget it. */
  #cpTop30PageModule button,
  #cpTop30PageModule a,
  #cpTop30PageModule select,
  #cpTop30PageModule input,
  #cpTop30PageModule [role="button"],
  #cpTop30PageModule [role="tab"] { touch-action: manipulation; }

  /* Phones with a home indicator overlay the bottom of the viewport. A spacer
     rather than a padding override: every module sets its own padding under
     `.cp-is-mobile`, which is more specific than this bare id, so an override
     silently lost. This ADDS to whatever padding is already there. */
  @media (max-width: 640px) {
    #cpTop30PageModule::after {
      content: "";
      display: block;
      height: env(safe-area-inset-bottom, 0px);
    }
  }

  /* ---- MOBILE SELECTOR, matched to the Transactions toolbar ---------------
     The primary row was `repeat(3, 1fr)`, so ALL / HITTERS / PITCHERS were
     squeezed onto one line -- each carries a count badge, so three across
     leaves no room and the labels crowd their numbers. Transactions solves
     this by giving the "All" tab the full width and letting the rest fall into
     a 2-up grid beneath it, which is the layout this now uses.

     .cp-page-viewtabs (CARDS / LIST / HISTORY) deliberately KEEPS three across:
     those are peer views with no counts and no primary, so they fit. */
  #cpTop30PageModule.cp-is-mobile .cp-page-tabs {
    grid-template-columns: 1fr 1fr;
  }
  #cpTop30PageModule.cp-is-mobile .cp-page-tabs button:first-child {
    grid-column: 1 / -1;
  }

  /* ---- MOBILE TOOLBAR ALIGNMENT ------------------------------------------
     Every control in the Transactions toolbar is exactly the same width, which
     is most of why it reads as one tidy stack. Top 30's edges were ragged --
     288 / 282 / 288 / 280 / 280 at a 375px viewport -- because this file has NO
     universal `box-sizing: border-box` reset (Transactions, Alerts, Players and
     Leaderboards all do; here it is set on five card elements only). So a
     `width: 100%` control ADDED its 3px padding and 1px border on top of the
     parent: 280 + 6 + 2 = 288, overflowing by exactly 8px.

     Scoped to the toolbar rather than added as a universal reset, because this
     stylesheet was authored without one and its card geometry compensates for
     that in places -- a blanket reset here would move things that are correct. */
  #cpTop30PageModule .cp-page-tabs,
  #cpTop30PageModule .cp-page-viewtabs,
  #cpTop30PageModule .cp-page-searchfield,
  #cpTop30PageModule .cp-page-export,
  #cpTop30PageModule .cp-page-filtertoggle {
    box-sizing: border-box;
  }

  /* The export button was a solid red gradient at 40px -- the heaviest thing on
     the page, louder than the rankings it sits above. Transactions' equivalent
     (.cp-tx-action, "Promotion Graphic") is a tinted outline: it still reads as
     the primary action without shouting. Matched to it exactly. */
  #cpTop30PageModule .cp-page-export {
    height: 38px;
    border-radius: 10px;
    background: rgba(196, 30, 58, 0.1);
    border: 1px solid rgba(196, 30, 58, 0.45);
    color: var(--red-dark);
    box-shadow: none;
  }
  #cpTop30PageModule .cp-page-export:hover {
    background: rgba(196, 30, 58, 0.16);
    border-color: rgba(196, 30, 58, 0.6);
  }

  /* The labels sat hard against the left edge of their buttons. The buttons are
     `display: inline-flex` and go to `width: 100%` on mobile, but nothing ever
     centred their content -- Transactions' equivalent rule carries
     `justify-content: center` and this one did not, which is the whole reason
     "ALL 30" and "HITTERS 15" read as shifted left against the same control on
     Transactions. `.cp-page-viewtabs` also drops its desktop `margin-left: auto`
     here, so it cannot pull itself off the shared left edge. */
  #cpTop30PageModule.cp-is-mobile .cp-page-tabs button,
  #cpTop30PageModule.cp-is-mobile .cp-page-viewtabs button {
    justify-content: center;
  }
  #cpTop30PageModule.cp-is-mobile .cp-page-viewtabs {
    margin-left: 0;
  }

  /* ---- CUSTOM LIST BUILDER -------------------------------------------------
     Deliberately borrows the export modal's shell so the page has one dialog
     vocabulary rather than two. */
  #cpTop30PageModule .cp-bld-modal { position: fixed; inset: 0; z-index: 1000; display: flex;
    align-items: center; justify-content: center; padding: 16px; }
  #cpTop30PageModule .cp-bld-modal[hidden] { display: none; }
  #cpTop30PageModule .cp-bld-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 16, 0.55); }
  #cpTop30PageModule .cp-bld-dialog { position: relative; width: min(760px, 100%); max-height: 90vh;
    overflow: auto; background: #fffdf8; border-radius: 16px; border: 1px solid var(--line);
    box-shadow: var(--shadow-3); padding: 20px; }
  #cpTop30PageModule .cp-bld-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  #cpTop30PageModule .cp-bld-head h2 { margin: 0; font-family: var(--serif); font-size: var(--fs-xl); color: var(--ink); }
  #cpTop30PageModule .cp-bld-head p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); }
  #cpTop30PageModule .cp-bld-close { margin-left: auto; border: 0; background: transparent; cursor: pointer;
    font-size: var(--fs-xl); line-height: 1; color: var(--muted); }
  #cpTop30PageModule .cp-bld-field { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-size: var(--fs-sm);
    color: var(--ink); margin-bottom: 12px; box-sizing: border-box; }
  #cpTop30PageModule .cp-bld-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  #cpTop30PageModule .cp-bld-colhead { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  #cpTop30PageModule .cp-bld-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto;
    border: 1px solid var(--line-soft); border-radius: var(--r-md); background: #fff; }
  #cpTop30PageModule .cp-bld-list li { border-bottom: 1px solid var(--line-soft); }
  #cpTop30PageModule .cp-bld-list li:last-child { border-bottom: 0; }
  #cpTop30PageModule .cp-bld-empty { padding: 14px; font-size: var(--fs-sm); color: var(--muted); }
  #cpTop30PageModule .cp-bld-add, #cpTop30PageModule .cp-bld-open { display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 9px 12px; border: 0; background: transparent; cursor: pointer; text-align: left;
    font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink); }
  #cpTop30PageModule .cp-bld-add:hover, #cpTop30PageModule .cp-bld-open:hover { background: var(--sky-light); }
  #cpTop30PageModule .cp-bld-name { font-weight: 700; }
  #cpTop30PageModule .cp-bld-meta { font-size: var(--fs-micro); color: var(--muted); letter-spacing: 0.04em; }
  #cpTop30PageModule .cp-bld-plus { margin-left: auto; color: var(--red); font-weight: 900; }
  #cpTop30PageModule .cp-bld-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
  #cpTop30PageModule .cp-bld-rank { min-width: 22px; font-family: var(--sans); font-weight: 900;
    font-size: var(--fs-micro); color: var(--red-dark); }
  #cpTop30PageModule .cp-bld-fv { width: 44px; height: 26px; text-align: center; border-radius: var(--r-sm);
    border: 1px solid var(--line); font-family: var(--sans); font-size: var(--fs-micro); box-sizing: border-box; }
  #cpTop30PageModule .cp-bld-moves { margin-left: auto; display: flex; gap: 2px; }
  #cpTop30PageModule .cp-bld-moves button { width: 24px; height: 24px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); line-height: 1; }
  #cpTop30PageModule .cp-bld-moves button:disabled { opacity: 0.35; cursor: default; }
  #cpTop30PageModule .cp-bld-del { border: 0; background: transparent; color: var(--muted); cursor: pointer;
    padding: 0 10px; font-size: var(--fs-md); }
  #cpTop30PageModule .cp-bld-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
  #cpTop30PageModule .cp-bld-status { font-size: var(--fs-sm); color: var(--red-dark); flex: 1 1 100%; }
  #cpTop30PageModule .cp-bld-note { font-size: var(--fs-micro); color: var(--muted); flex: 1 1 100%; }
  #cpTop30PageModule .cp-bld-save { height: 38px; padding: 0 18px; border-radius: var(--r-md); border: 0;
    background: linear-gradient(180deg, #cc314b, #ad1b34); color: #fff; font-family: var(--sans);
    font-weight: 800; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
  #cpTop30PageModule .cp-bld-secondary { height: 38px; padding: 0 14px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-weight: 800;
    font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
  #cpTop30PageModule .cp-page-mylists { height: 38px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-weight: 800;
    font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
    color: var(--ink); box-sizing: border-box; }
  #cpTop30PageModule .cp-page-mylists:hover { border-color: rgba(196, 30, 58, 0.45); color: var(--red-dark); }
  #cpTop30PageModule.cp-is-mobile .cp-page-mylists { width: 100%; }

  /* The dialog is position:fixed and sized by the VIEWPORT, so it keys off a
     media query rather than `.cp-is-mobile` -- that class is toggled from JS and
     partly reflects the MODULE's width, which is the wrong signal for a modal
     that spans the screen (and is not set at all until the layout pass runs). */
  @media (max-width: 640px) {
    #cpTop30PageModule .cp-bld-cols { grid-template-columns: 1fr; }
    #cpTop30PageModule .cp-bld-dialog { padding: 14px; max-height: 94vh; }
    #cpTop30PageModule .cp-bld-list { max-height: 210px; }
    #cpTop30PageModule .cp-bld-foot > button { flex: 1 1 auto; }
  }