@layer components {
html[data-route="/projections"]{

  /* ============ PAGE HEADER ============ */
  .page-header {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 50%, #0d0d0d 100%);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    padding: 24px 20px 20px;
    margin-top: 8px;
  }
  .page-eyebrow {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: var(--sns-fs-11, 11px);
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--red-primary, #FF1A1A);
    text-transform: uppercase;
  }
  .page-title {
    font-family: var(--f-display, 'Graduate', sans-serif);
    font-size: 32px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin: 6px 0 0;
  }
  .page-subtitle {
    font-size: 15px;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    margin: 8px 0 0;
    max-width: 72ch;
    line-height: 1.5;
  }
  .page-body { padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }

  /* ============ INTRO COPY ============ */
  .pj-intro {
    font-size: 15px;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    line-height: 1.6;
    max-width: 80ch;
  }
  .pj-intro p { margin: 0; }

  /* ============ POSITION TABS ============ */
  .pj-controls { display: flex; }
  .pj-pos-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .pj-pos-tab {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }
  .pj-pos-tab:hover { color: var(--white-bright, #F5F5F5); border-color: var(--accent, #FF2D2D); }
  .pj-pos-tab.is-active {
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(135deg, rgba(255,26,26,.16), rgba(255,45,45,.04));
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: inset 0 0 0 1px rgba(255,26,26,.42), 0 0 12px rgba(255,26,26,.18);
  }
  .pj-pos-tab[data-pos="QB"].is-active { border-color: var(--sns-pos-qb-text, #FF3B30); }
  .pj-pos-tab[data-pos="RB"].is-active { border-color: var(--sns-pos-rb-text, #FF6A00); }
  .pj-pos-tab[data-pos="WR"].is-active { border-color: var(--sns-pos-wr-text, #6aa9d7); }
  .pj-pos-tab[data-pos="TE"].is-active { border-color: var(--sns-pos-te-text, #7fc89a); }
  .pj-pos-tab[data-pos="K"].is-active  { border-color: var(--sns-pos-k-text, #b58cd6); }

  /* ============ TABLE CARD ============ */
  .pj-table-wrap .card { padding: 0; overflow: hidden; }
  .pj-player-count {
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--white-bright, #F5F5F5);
  }
  .pj-table-scroll { overflow-x: auto; }
  .pj-loading {
    padding: 24px 20px;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    font-size: 15px;
  }
  .pj-loading[hidden] { display: none; }
  .pj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .pj-table thead th {
    text-align: left;
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-border, #2A2A2A);
    white-space: nowrap;
  }
  .pj-table .th-pts, .pj-table .th-range, .pj-table .th-adp, .pj-table .th-rank { text-align: right; }
  .pj-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: middle;
  }
  .pj-table tbody tr:hover { background: rgba(255,26,26,.04); }
  .pj-table .td-rank, .pj-table .td-pts, .pj-table .td-range, .pj-table .td-adp { text-align: right; font-variant-numeric: tabular-nums; }
  .pj-table .td-player { font-weight: 700; color: var(--white-bright, #F5F5F5); }
  .pj-table .td-school { color: var(--text-muted, var(--gray-light,#C2C2C2)); font-size: 13px; }
  .pj-pos-chip {
    display: inline-block;
    font-family: var(--f-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
  }
  .pj-pos-chip[data-pos="QB"] { color: var(--sns-pos-qb-text, #FF3B30); background: var(--sns-pos-qb-bg, rgba(255,26,26,.18)); }
  .pj-pos-chip[data-pos="RB"] { color: var(--sns-pos-rb-text, #FF6A00); background: var(--sns-pos-rb-bg, rgba(255,106,0,.18)); }
  .pj-pos-chip[data-pos="WR"] { color: var(--sns-pos-wr-text, #6aa9d7); background: var(--sns-pos-wr-bg, rgba(90,170,220,.15)); }
  .pj-pos-chip[data-pos="TE"] { color: var(--sns-pos-te-text, #7fc89a); background: var(--sns-pos-te-bg, rgba(120,200,150,.14)); }
  .pj-pos-chip[data-pos="K"]  { color: var(--sns-pos-k-text, #b58cd6);  background: var(--sns-pos-k-bg, rgba(180,140,220,.14)); }

  /* ============ MOBILE ============ */
  @media (max-width: 880px) {
    .page-header { padding: 18px 14px 16px; }
    .page-title { font-size: 24px; }
    .pj-table { font-size: 13px; }
    .pj-table thead th, .pj-table tbody td { padding: 7px 8px; }
    .th-range { display: none; }
    .pj-table td:nth-child(7) { display: none; }
  }
}
}