:is(:root, .export-capture-root) {
      color-scheme: dark;
      --bg:        #0f1117;
      --surface:   #1a1d26;
      --surface2:  #20243a;
      --border:    #2d3148;
      --text:      #e2e8f0;
      --dim:       #8892a4;
      --green:     #4ade80;
      --yellow:    #facc15;
      --red:       #f87171;
      --blue:      #60a5fa;
      --purple:    #a78bfa;
      --control-bg: #121522;
      --dialog-bg: #131722;
      --hover-bg: #171b2b;
      --border-strong: #3f4667;
      --border-subtle: #2d314866;
      --muted-strong: #9fb5d4;
      --backdrop: rgba(8, 10, 16, 0.7);
      --fg: var(--text);
      --on-accent: #04130a;
    }

    :is(:root, .export-capture-root)[data-theme="light"] {
      color-scheme: light;
      --bg: #f4f7fb;
      --surface: #ffffff;
      --surface2: #edf2f7;
      --border: #c8d2df;
      --text: #182235;
      --dim: #536176;
      --green: #08783f;
      --yellow: #9a5b00;
      --red: #b42318;
      --blue: #1d5fa7;
      --purple: #6842ad;
      --control-bg: #f8fafc;
      --dialog-bg: #ffffff;
      --hover-bg: #e8eef6;
      --border-strong: #8fa0b5;
      --border-subtle: #c8d2df99;
      --muted-strong: #40516a;
      --backdrop: rgba(24, 34, 53, 0.38);
      --on-accent: #ffffff;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      padding: 1rem;
    }

    /* ── Header ── */
    header {
      text-align: center;
      padding: 1.25rem 0 0.5rem;
      max-width: 1220px;
      margin: 0 auto;
      position: relative;
    }
    header h1 {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--green);
      letter-spacing: 0.3px;
    }
    header p {
      color: var(--dim);
      font-size: 0.82rem;
      margin-top: 0.2rem;
    }
    .header-actions {
      position: absolute;
      top: 1rem;
      right: 0;
      display: flex;
      gap: 0.4rem;
    }
    .icon-btn {
      width: 2.65rem;
      height: 2.65rem;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--surface);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      cursor: pointer;
    }
    .icon-btn:hover {
      border-color: var(--green);
      /* Thicker border on hover without shifting layout: 1px border + 1px ring = 2px. */
      box-shadow: 0 0 0 1px var(--green);
    }
    .icon-btn:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 2px;
    }

    /* ── Input ── */
    .notfound-banner {
      max-width: 1220px;
      margin: 0 auto 0.6rem;
      padding: 0.6rem 1rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--dim);
      font-size: 0.85rem;
      text-align: center;
    }
    .notfound-banner strong { color: var(--text); }
    .top-shell {
      display: grid;
      grid-template-columns: minmax(0, 780px);
      gap: 0.8rem;
      max-width: 1220px;
      margin: 1rem auto 0.4rem;
      align-items: start;
      justify-content: center;
    }
    .top-shell.has-league-bar {
      grid-template-columns: minmax(0, 780px) 420px;
      justify-content: space-between;
    }
    .input-row {
      min-width: 0;
    }
    .team-controls {
      display: flex;
      gap: 0.5rem;
      width: 100%;
      min-width: 0;
    }
    .team-controls > * { height: 2.65rem; }
    .input-row input {
      flex: 1;
      min-width: 0;
      padding: 0.6rem 1rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 1rem;
      outline: none;
      -moz-appearance: textfield;
    }
    .input-row input::-webkit-outer-spin-button,
    .input-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
    .input-row input:focus { border-color: var(--green); }
    .team-search-wrap {
      position: relative;
      flex: 1;
      min-width: 0;
    }
    .team-search-wrap input {
      width: 100%;
      height: 100%;
    }
    .team-search-results {
      position: absolute;
      top: calc(100% + 0.35rem);
      left: 0;
      right: 0;
      max-height: 320px;
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
      z-index: 30;
    }
    .team-search-item {
      display: flex;
      flex-direction: column;
      gap: 0.05rem;
      padding: 0.5rem 0.75rem;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
    }
    .team-search-item:last-child { border-bottom: none; }
    .team-search-item:hover,
    .team-search-item.active {
      background: var(--hover-bg);
    }
    .team-search-manager {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text);
    }
    .team-search-team {
      font-size: 0.74rem;
      color: var(--dim);
    }
    .team-search-empty {
      padding: 0.6rem 0.75rem;
      font-size: 0.78rem;
      color: var(--dim);
    }
    .input-row button {
      padding: 0.6rem 1.4rem;
      background: var(--green);
      color: var(--on-accent);
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity 0.15s;
      white-space: nowrap;
    }
    .input-row button:hover { opacity: 0.85; }
    .input-row button:disabled { opacity: 0.45; cursor: not-allowed; }
    .lang-select {
      padding: 0.6rem 0.5rem;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 0.86rem;
      font-weight: 700;
      width: 3.8rem;
      min-width: 3.8rem;
      outline: none;
      cursor: pointer;
    }
    .lang-select:focus { border-color: var(--green); }
    .help-btn {
      width: 2.65rem;
      min-width: 2.65rem;
      height: 2.65rem;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 0.95rem;
      font-weight: 800;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .help-btn:hover { border-color: var(--green); }
    .help-btn:focus-visible {
      outline: 2px solid #4ade8088;
      outline-offset: 1px;
    }
    .btn-nav {
      width: 2.65rem;
      min-width: 2.65rem;
      padding: 0;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      font-size: 1rem;
      font-weight: 400;
    }
    .input-row .btn-nav,
    .input-row .help-btn {
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .btn-nav:hover:not(:disabled) { border-color: var(--green); opacity: 1; }

    /* ── Status ── */
    #status {
      text-align: center;
      font-size: 0.82rem;
      color: var(--dim);
      min-height: 1.4rem;
      margin: 0.3rem 0;
    }
    #status.error { color: var(--red); }

    .app-update-toast {
      position: fixed;
      left: 50%;
      bottom: 1.2rem;
      transform: translateX(-50%);
      z-index: 1000;
      background: var(--surface2);
      border: 1px solid var(--border-strong);
      color: var(--text);
      font-size: 0.85rem;
      padding: 0.55rem 1rem;
      border-radius: 0.6rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }

    /* ── App container ── */
    #app { max-width: 1220px; margin: 0 auto; }

    .layout-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 420px;
      gap: 0.8rem;
      align-items: start;
    }
    .main-col {
      min-width: 0;
      max-width: 780px;
    }
    .side-col {
      min-width: 0;
      position: sticky;
      top: 0.8rem;
    }

    /* ── League dropdown ── */
    .league-bar { margin: 0; }
    .league-select {
      width: 100%;
      height: 2.65rem;
      padding: 0 0.8rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 0.85rem;
      cursor: pointer;
      outline: none;
    }
    .league-select:focus { border-color: var(--green); }
    .league-top-slot:empty { min-height: 0; }
    .league-stats-box {
      margin: 0 0 0.6rem;
      padding: 0.55rem 0.7rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface2);
    }
    .league-stats-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.7rem;
      color: var(--dim);
      letter-spacing: 0.4px;
      margin-bottom: 0.35rem;
    }
    .league-stats-head span {
      font-size: 0.62rem;
      color: var(--green);
      font-weight: 700;
    }
    .league-stats-ghost-row {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-bottom: 0.35rem;
      font-size: 0.62rem;
      color: var(--dim);
    }
    .league-stats-ghost-row span:last-child {
      color: var(--text);
    }
    .league-stats-list {
      display: grid;
      gap: 0.32rem;
    }
    .league-chip-head-row {
      display: grid;
      grid-template-columns: minmax(5.4rem, auto) minmax(4.8rem, auto) minmax(4.8rem, auto);
      column-gap: 0.5rem;
      align-items: baseline;
      font-size: 0.6rem;
      color: var(--dim);
      margin-bottom: 0.18rem;
      letter-spacing: 0.3px;
    }
    .league-chip-head-row span:nth-child(2),
    .league-chip-head-row span:nth-child(3) {
      text-align: right;
    }
    .league-chip-row {
      display: grid;
      grid-template-columns: minmax(5.4rem, auto) minmax(4.8rem, auto) minmax(4.8rem, auto);
      column-gap: 0.5rem;
      align-items: baseline;
      padding-top: 0.2rem;
      border-top: 1px solid var(--border-subtle);
    }
    .league-chip-row:first-child {
      border-top: 0;
      padding-top: 0;
    }
    .league-chip-row.league-chip-ghost-row {
      padding-top: 0.2rem;
      margin-top: 0;
    }
    .league-chip-name {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text);
    }
    .league-chip-cell {
      font-size: 0.7rem;
      font-weight: 700;
      text-align: right;
    }
    .league-chip-current {
      color: var(--blue);
    }
    .league-chip-total {
      color: var(--green);
    }
    .league-stats-foot {
      margin-top: 0.35rem;
      font-size: 0.62rem;
      color: #fca5a5;
    }
    .league-stats-foot.league-captains-foot {
      color: var(--dim);
    }
    .league-captain-row {
      display: grid;
      grid-template-columns: minmax(5.6rem, auto) 1fr minmax(2.6rem, auto);
      column-gap: 0.5rem;
      align-items: center;
      padding-top: 0.28rem;
      border-top: 1px solid var(--border-subtle);
    }
    .league-captain-row:first-child {
      border-top: 0;
      padding-top: 0;
    }
    .league-captain-name {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text);
      display: flex;
      flex-direction: column;
      line-height: 1.25;
    }
    .league-captain-sub {
      font-size: 0.6rem;
      font-weight: 500;
      color: var(--dim);
    }
    .league-captain-bar-wrap {
      display: flex;
      flex-direction: column;
      gap: 0.14rem;
    }
    .league-captain-bar-track {
      position: relative;
      height: 0.42rem;
      border-radius: 3px;
      background: var(--surface);
      border: 1px solid var(--border-subtle);
      overflow: hidden;
    }
    .league-captain-bar-fill {
      position: absolute;
      inset: 0 auto 0 0;
      height: 100%;
      background: var(--blue);
      border-radius: 3px 0 0 3px;
    }
    .league-captain-bar-fill-others {
      background: var(--dim);
    }
    .league-captain-bar-tick {
      position: absolute;
      top: -1px;
      bottom: -1px;
      width: 1px;
      background: var(--border-strong);
      z-index: 1;
    }
    .league-captain-bar-label {
      display: flex;
      align-items: baseline;
      gap: 0.3rem;
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--text);
    }
    .league-captain-pts {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--green);
      text-align: right;
    }
    .league-captain-others {
      cursor: pointer;
    }
    .league-captain-others:hover .league-captain-name {
      color: var(--blue);
    }
    .league-captain-others .league-captain-pts {
      color: var(--dim);
    }
    .availability-box {
      display: grid;
      gap: 0.35rem;
    }
    .availability-row {
      display: grid;
      gap: 0.08rem;
      padding-top: 0.24rem;
      border-top: 1px solid var(--border-subtle);
    }
    .availability-row:first-of-type {
      border-top: 0;
      padding-top: 0;
    }
    .availability-label {
      font-size: 0.62rem;
      color: var(--dim);
      letter-spacing: 0.35px;
      text-transform: uppercase;
      font-weight: 700;
    }
    .availability-values {
      font-size: 0.72rem;
      color: var(--text);
      font-weight: 600;
    }
    .availability-values b {
      color: var(--green);
      font-weight: 800;
    }
    .locked-feature {
      border: 1px dashed #f59e0b66;
      border-radius: 8px;
      padding: 0.6rem;
      background: #f59e0b12;
      text-align: center;
      display: grid;
      gap: 0.22rem;
    }
    .locked-feature-title {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.35px;
      color: #fbbf24;
      text-transform: uppercase;
    }
    .locked-feature-name {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text);
    }
    .locked-feature-meta {
      font-size: 0.67rem;
      color: var(--dim);
    }
    .locked-feature-link {
      justify-self: center;
      margin-top: 0.2rem;
      font-size: 0.72rem;
      font-weight: 800;
      color: #fbbf24;
      text-decoration: none;
      border: 1px solid #f59e0b66;
      border-radius: 999px;
      padding: 0.24rem 0.65rem;
      background: var(--surface);
    }
    .locked-feature-link:hover {
      border-color: #fbbf24;
      color: #fde68a;
    }
    .league-standings-summary {
      margin: 0.2rem 0 0.45rem;
      padding: 0.28rem 0.35rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface2);
    }
    .league-standings-summary-head,
    .league-standings-summary-row {
      display: grid;
      grid-template-columns: minmax(2.2rem, 0.9fr) repeat(5, minmax(2.05rem, 1fr));
      gap: 0.18rem;
      align-items: center;
    }
    .league-standings-summary-head {
      margin-bottom: 0.14rem;
      font-size: 0.55rem;
      color: var(--dim);
      letter-spacing: 0.15px;
    }
    .league-standings-summary-head span:not(:first-child) {
      text-align: right;
    }
    .league-standings-summary-body {
      display: grid;
      gap: 0.15rem;
    }
    .league-standings-summary-row {
      font-size: 0.58rem;
      line-height: 1.1;
    }
    .league-standings-summary-label {
      color: var(--text);
      font-weight: 700;
    }
    .league-standings-summary-value {
      text-align: right;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .league-players-box {
      margin: 0 0 0.6rem;
      padding: 0.55rem 0.7rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
    }
    .league-players-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.72rem;
      color: var(--dim);
      letter-spacing: 0.4px;
      margin-bottom: 0.4rem;
    }
    .league-players-head span {
      font-size: 0.62rem;
      color: var(--green);
      font-weight: 700;
    }
    .league-standings-since-gw {
      color: var(--dim);
      font-weight: 400;
    }
    .h2h-matches-list {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .h2h-match-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.5rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--control-bg);
    }
    .h2h-match-row-mine {
      border-color: var(--blue);
    }
    .h2h-match-side {
      min-width: 0;
      cursor: pointer;
      border-radius: 4px;
    }
    .h2h-match-side:hover {
      background: var(--hover-bg);
    }
    .h2h-match-side:last-child {
      text-align: right;
    }
    .h2h-match-team {
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .h2h-match-manager {
      font-size: 0.62rem;
      color: var(--dim);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .h2h-match-points {
      font-size: 0.9rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }
    .h2h-match-side-winner .h2h-match-points {
      color: var(--green);
    }
    .h2h-match-vs {
      font-size: 0.62rem;
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 0 0.2rem;
    }
    .league-players-toolbar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.35rem;
    }
    .league-players-size {
      display: inline-flex;
      gap: 0.2rem;
    }
    .league-players-size-btn,
    .league-players-page-btn {
      border: 1px solid var(--border);
      background: var(--control-bg);
      color: var(--dim);
      border-radius: 4px;
      font-size: 0.62rem;
      font-weight: 700;
      line-height: 1;
      padding: 0.18rem 0.34rem;
      cursor: pointer;
    }
    .league-players-size-btn:hover,
    .league-players-page-btn:hover {
      color: var(--text);
      border-color: var(--border-strong);
    }
    .league-players-size-btn.active {
      color: #04130a;
      background: var(--green);
      border-color: var(--green);
    }
    .league-players-page-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }
    .league-players-pager,
    .league-standings-pager {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.62rem;
      color: var(--dim);
    }
    .league-players-empty {
      font-size: 0.68rem;
      color: var(--dim);
    }
    .league-players-filters {
      display: grid;
      gap: 0.35rem;
      margin-bottom: 0.35rem;
    }
    .league-players-filters.league-standings-filters-row {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
    }
    .league-standings-search-wrap {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }
    .league-standings-phase-select,
    .league-standings-search-toggle {
      border: 1px solid var(--border);
      background: var(--control-bg);
      color: var(--dim);
      border-radius: 6px;
      font-size: 0.7rem;
      line-height: 1;
      padding: 0.3rem 0.4rem;
      cursor: pointer;
      flex: 0 0 auto;
    }
    .league-standings-phase-select {
      width: auto;
      height: auto;
      padding-right: 1.3rem;
    }
    .league-standings-phase-select:hover,
    .league-standings-search-toggle:hover {
      color: var(--text);
      border-color: var(--border-strong);
    }
    .league-standings-phase-select:focus {
      border-color: var(--green);
      outline: none;
    }
    .league-standings-search-wrap .league-players-search {
      width: 0;
      min-width: 0;
      padding: 0;
      border-width: 0;
      opacity: 0;
      margin-left: 0;
      transition: width 0.15s ease, opacity 0.15s ease, padding 0.15s ease, margin-left 0.15s ease;
    }
    .league-standings-search-wrap.expanded .league-players-search {
      width: 11rem;
      min-width: 6rem;
      padding: 0.32rem 0.45rem;
      border-width: 1px;
      opacity: 1;
      margin-left: 0.3rem;
    }
    .league-standings-chip-filter {
      flex: 1 1 auto;
      min-width: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
    }
    .league-players-search {
      width: 100%;
      padding: 0.32rem 0.45rem;
      background: var(--control-bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.66rem;
      outline: none;
    }
    .league-players-search:focus {
      border-color: var(--border-strong);
    }
    .league-players-pos-filter {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.2rem;
      flex: 1 1 auto;
      min-width: 0;
    }
    .league-players-pos-btn {
      border: 1px solid var(--border);
      background: var(--control-bg);
      color: var(--dim);
      border-radius: 4px;
      font-size: 0.62rem;
      font-weight: 700;
      line-height: 1;
      padding: 0.18rem 0.34rem;
      cursor: pointer;
    }
    .league-players-pos-btn:hover {
      color: var(--text);
      border-color: var(--border-strong);
    }
    .league-players-pos-btn.active {
      color: #04130a;
      background: var(--green);
      border-color: var(--green);
    }
    .league-players-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.66rem;
    }
    .league-players-table th,
    .league-players-table td {
      padding: 0.2rem 0.1rem;
      border-top: 1px solid var(--border-subtle);
      vertical-align: middle;
    }
    .league-players-table thead th {
      border-top: 0;
      color: var(--dim);
      font-weight: 700;
      text-align: left;
    }
    .league-players-table th.num,
    .league-players-table td.num {
      text-align: right;
      white-space: nowrap;
    }
    .league-standings-row {
      cursor: pointer;
    }
    .league-standings-row:hover td {
      background: var(--hover-bg);
    }
    /* The team currently on screen: green edge bar + faint tint; hover still shows. */
    .league-standings-row.is-selected td {
      background: color-mix(in srgb, var(--green) 10%, transparent);
    }
    .league-standings-row.is-selected td:first-child {
      box-shadow: inset 3px 0 0 var(--green);
    }
    .league-standings-row.is-selected:hover td {
      background: color-mix(in srgb, var(--green) 16%, var(--hover-bg));
    }
    .league-standings-move {
      display: inline-block;
      min-width: 1.6rem;
      text-align: right;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .league-standings-move-up {
      color: var(--green);
    }
    .league-standings-move-down {
      color: var(--red);
    }
    .league-standings-move-flat,
    .league-standings-move-missing {
      color: var(--dim);
    }
    .league-players-table td.name {
      max-width: 7rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .league-players-own-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 0.9rem;
      height: 0.9rem;
      margin-left: 0.3rem;
      border-radius: 50%;
      background: var(--green);
      color: var(--on-accent);
      font-size: 0.55rem;
      font-weight: 800;
      vertical-align: middle;
    }
    .league-players-ep-pos {
      color: var(--green);
      font-weight: 700;
    }
    .league-players-ep-neg {
      color: var(--red);
      font-weight: 700;
    }
    .league-players-tier-bad td {
      background: color-mix(in srgb, var(--red) 16%, transparent);
    }
    .league-players-tier-ok td {
      background: color-mix(in srgb, var(--yellow) 16%, transparent);
    }
    .league-players-tier-good td {
      background: color-mix(in srgb, var(--green) 14%, transparent);
    }
    .league-players-tier-great td {
      background: color-mix(in srgb, var(--green) 26%, transparent);
      font-weight: 700;
    }
    .league-standings-table {
      width: 100%;
      table-layout: fixed;
    }
    .league-standings-table col.lst-col-rank { width: 1.9rem; }
    .league-standings-table col.lst-col-move { width: 2.1rem; }
    .league-standings-table col.lst-col-stat { width: 2.6rem; }
    .league-standings-table col.lst-col-gw { width: 3.1rem; }
    .league-standings-table col.lst-col-total { width: 2.3rem; }
    .league-standings-table td.num,
    .league-standings-table th.num {
      overflow: hidden;
    }
    .league-standings-table td.name.league-standings-manager-cell {
      max-width: none;
      overflow: hidden;
      white-space: normal;
      position: relative;
    }
    .league-standings-team {
      font-weight: 650;
      color: var(--text);
      line-height: 1.1;
    }
    .league-standings-team-name {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .league-standings-team-badges {
      position: absolute;
      top: 0.05rem;
      right: 0.15rem;
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      flex-wrap: nowrap;
      pointer-events: none;
    }
    .league-standings-manager {
      color: var(--dim);
      line-height: 1.1;
      margin-top: 0.1rem;
    }
    .league-standings-manager-name {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.63rem;
      font-weight: 500;
      color: var(--muted-strong);
    }
    .team-card-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin: 0.28rem 0 0.35rem;
    }
    .chip-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.16rem 0.38rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--control-bg);
      color: var(--dim);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .chip-status-pill.active {
      color: #ede9fe;
      border-color: #8b5cf644;
      background: #3b1f78;
    }
    .chip-status-pill.used {
      color: #cbd5e1;
      border-color: #4b556344;
      background: #1f2937;
    }
    .chip-status-pill.remaining {
      color: #bfdbfe;
      border-color: #60a5fa44;
      background: #14243d;
    }
    .chip-status-pill.missed {
      color: #fecaca;
      border-color: #ef444444;
      background: #3f1111;
    }
    .chip-status-dot {
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.9;
    }
    .ghost-ship-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.22rem;
      color: #fef3c7;
      background: #5a2f00;
      border-color: #d97706;
    }
    .ghost-ship-badge.ghost-ship-badge-highlight {
      background: var(--purple);
      color: #fff;
      border-color: var(--purple);
    }
    .ghost-ship-badge-icon {
      font-size: 0.72rem;
      line-height: 1;
    }
    .ghost-ship-badge-label {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .ghost-ship-badge.compact {
      padding: 0.14rem 0.34rem;
      border-radius: 999px;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .league-players-table td.club {
      color: var(--dim);
      white-space: nowrap;
    }
    .league-players-table td.pos {
      color: var(--muted-strong);
      font-weight: 700;
      white-space: nowrap;
      /* Undo the unrelated .pos badge rule (team-card position badges) --
         same class name, but this is a plain table cell, not a badge. */
      display: table-cell;
      flex-direction: unset;
      align-items: unset;
      gap: 0;
      padding: 0.2rem 0.1rem;
      border-radius: 0;
    }
    .league-standings-row {
      cursor: pointer;
    }
    .league-standings-row:hover {
      background: var(--hover-bg);
    }
    .league-players-sort {
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
      padding: 0;
    }
    .league-players-sort:hover {
      color: var(--text);
    }

    @media (max-width: 920px) {
      .layout-grid {
        grid-template-columns: 1fr;
        gap: 0.55rem;
      }
      .main-col {
        max-width: none;
      }
      .top-shell,
      .top-shell.has-league-bar {
        grid-template-columns: 1fr;
        justify-content: stretch;
      }
      .league-top-slot {
        order: 2;
      }
      .side-col {
        position: static;
      }
      .side-col .league-bar,
      .side-col .league-stats-box,
      .side-col .league-players-box {
        margin-bottom: 0.45rem;
      }

      .gw-match-clubs {
        display: grid;
        gap: 0.35rem;
      }
      .gw-match-club-side {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        min-width: 0;
      }
      .gw-match-club-side > span:first-child {
        white-space: normal;
      }
      .gw-match-team-metrics {
        white-space: normal;
        max-width: 100%;
      }
      .gw-match-team-metrics .metric {
        display: inline-block;
      }
      .gw-match-club-separator {
        display: none;
      }

    }
    .own-pct {
      margin-left: 0.35rem;
      font-size: 0.68rem;
      color: var(--dim);
      font-weight: 600;
    }
    .eo-pct {
      margin-left: 0.35rem;
      font-size: 0.68rem;
      color: var(--muted-strong);
      font-weight: 600;
      opacity: 0.9;
    }
    .rank-delta {
      font-size: 0.75rem;
      margin-top: 0.2rem;
      display: flex;
      gap: 0.45rem;
      justify-content: flex-end;
    }
    .rd-up   { color: var(--green); }
    .rd-down { color: var(--red); }
    .rd-inline { font-size: 1rem; font-weight: 600; margin-left: 0.3rem; vertical-align: middle; }
    .rd-neu  { color: var(--dim); }

    /* ── Team header card ── */
    .team-card {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.8rem 1rem;
      margin-bottom: 0.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
    }
    .icon-btn-sm {
      width: 1.9rem;
      height: 1.9rem;
      font-size: 0.85rem;
    }
    .team-card-actions {
      position: absolute;
      top: 0.5rem;
      right: 0.6rem;
      display: flex;
      gap: 0.4rem;
    }
    .team-card-actions .icon-btn {
      text-decoration: none;
    }
    .export-capture-root {
      position: fixed;
      top: 0;
      left: -10000px;
      z-index: -1;
      pointer-events: none;
    }
    .export-card {
      width: 640px;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      padding: 1.1rem;
    }
    .export-card-header {
      text-align: center;
      padding-bottom: 0.7rem;
      margin-bottom: 0.7rem;
      border-bottom: 1px solid var(--border);
    }
    .export-card-title {
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--green);
      letter-spacing: 0.3px;
    }
    .export-card-subtitle {
      color: var(--dim);
      font-size: 0.82rem;
      margin-top: 0.2rem;
    }
    .export-card-body .team-card {
      margin-bottom: 0.7rem;
    }
    .export-card-footer {
      text-align: center;
      margin-top: 0.9rem;
      padding-top: 0.7rem;
      border-top: 1px solid var(--border);
      color: var(--dim);
      font-size: 0.75rem;
      font-weight: 700;
    }
    .export-card-footer.has-note {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      text-align: left;
    }
    .export-card-footer-note {
      font-size: 0.7rem;
      font-weight: 400;
    }
    .export-card-footer-cta {
      flex-shrink: 0;
    }
    .team-card h2 {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.3;
    }
    .team-manager-inline {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--dim);
      margin-left: 0.35rem;
    }
    .team-card .meta {
      font-size: 0.72rem;
      color: var(--dim);
      margin-top: 0.15rem;
    }
    .team-pts {
      text-align: right;
      flex-shrink: 0;
      margin-top: 1.6rem;
    }
    .team-pts .num {
      font-size: 2rem;
      font-weight: 800;
      color: var(--green);
      line-height: 1;
    }
    .team-pts .lbl {
      font-size: 0.7rem;
      color: var(--dim);
    }

    /* ── Section label ── */
    .section-lbl {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--dim);
      padding: 0.7rem 0 0.35rem;
    }

    .settings-dialog {
      border: 0;
      padding: 0;
      background: transparent;
      width: min(92vw, 420px);
      position: fixed;
      inset: 0;
      margin: auto;
    }
    .settings-dialog::backdrop {
      background: var(--backdrop);
      backdrop-filter: blur(2px);
    }
    .settings-dialog-card {
      background: var(--dialog-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
    }
    .settings-dialog-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.8rem 0.9rem;
      border-bottom: 1px solid var(--border);
    }
    .settings-dialog-head h3 {
      color: var(--text);
      font-size: 0.95rem;
      margin: 0;
    }
    .settings-dialog-body {
      display: grid;
      gap: 1rem;
      padding: 0.9rem;
    }
    .settings-field {
      display: grid;
      gap: 0.4rem;
    }
    .settings-field > label {
      color: var(--dim);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }
    .settings-segmented {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      background: var(--control-bg);
    }
    .settings-segmented button {
      min-height: 2.4rem;
      border: 0;
      border-right: 1px solid var(--border);
      background: transparent;
      color: var(--dim);
      font: inherit;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
    }
    .settings-segmented button:last-child { border-right: 0; }
    .settings-segmented button:hover { color: var(--text); }
    .settings-segmented button.active {
      background: var(--green);
      color: var(--on-accent);
    }
    .settings-segmented button:focus-visible,
    .settings-select:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: -2px;
    }
    .settings-select {
      width: 100%;
      min-height: 2.4rem;
      padding: 0 0.65rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--control-bg);
      color: var(--text);
      font-size: 0.82rem;
      cursor: pointer;
    }
    .settings-primary-btn {
      padding: 0.6rem 1.4rem;
      background: var(--green);
      color: var(--on-accent);
      border: none;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity 0.15s;
      width: 100%;
    }
    .settings-primary-btn:hover { opacity: 0.85; }
    .settings-primary-btn:disabled { opacity: 0.45; cursor: not-allowed; }

    /* Export preview dialog -- wider than the settings dialog to give the
       captured team-card image room; the toggle only offers light/dark
       (unlike settings' light/dark/system) since an export needs one
       concrete theme, not "whatever the system happens to be". */
    /* The dialog never grows past the viewport: the image area takes
       whatever height is left and scrolls, so the theme toggle and the
       Download button stay on screen on a low laptop screen too. */
    .export-preview-dialog {
      width: min(94vw, 480px);
      max-height: calc(100vh - 2rem);
      max-height: calc(100dvh - 2rem);
    }
    .export-preview-card {
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 2rem);
      max-height: calc(100dvh - 2rem);
    }
    .export-preview-card .settings-dialog-body {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    .export-preview-card .settings-dialog-body > :not(.export-preview-image-wrap) {
      flex-shrink: 0;
    }
    .export-preview-theme-toggle {
      grid-template-columns: repeat(2, 1fr);
    }
    /* Plain block, not a centering flex box: a flex item centred in a
       scroll container overflows upwards too, and that top part can't be
       scrolled to -- the image is usually taller than this box. */
    .export-preview-image-wrap {
      position: relative;
      flex: 1 1 auto;
      min-height: 8rem;
      overflow: auto;
      overscroll-behavior: contain;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--control-bg);
    }
    .export-preview-image-wrap.is-loading #exportPreviewImage { opacity: 0.35; }
    .export-preview-image-wrap-status {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--dim);
      font-size: 0.8rem;
      display: none;
    }
    .export-preview-image-wrap.is-loading .export-preview-image-wrap-status {
      display: block;
    }
    #exportPreviewImage {
      display: block;
      width: 100%;
      height: auto;
      transition: opacity 0.15s;
    }

    .help-dialog {
      border: 0;
      padding: 0;
      background: transparent;
      width: min(92vw, 560px);
      max-height: min(85vh, 720px);
      position: fixed;
      inset: 0;
      margin: auto;
    }
    .help-dialog::backdrop {
      background: var(--backdrop);
      backdrop-filter: blur(2px);
    }
    .help-dialog-card {
      background: var(--dialog-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }
    .help-dialog-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.7rem 0.85rem;
      border-bottom: 1px solid var(--border);
    }
    .help-dialog-head h3 {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text);
      margin: 0;
    }
    .help-close {
      border: 0;
      background: transparent;
      color: var(--dim);
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
      padding: 0.1rem 0.3rem;
    }
    .help-close:hover { color: var(--text); }
    .help-dialog-body {
      padding: 0.75rem 0.85rem 0.85rem;
      overflow-y: auto;
      max-height: min(70vh, 640px);
    }
    .help-section-title {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--muted-strong);
      margin: 0.1rem 0 0.42rem;
    }
    .legend-grid {
      display: grid;
      gap: 0.3rem;
      grid-template-columns: 1fr;
    }
    .legend-item {
      font-size: 0.67rem;
      color: var(--dim);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .legend-key {
      min-width: 2.5rem;
      color: var(--fg);
      font-weight: 700;
    }
    .help-indicator-grid {
      display: grid;
      gap: 0.35rem;
      grid-template-columns: 1fr;
      margin-bottom: 0.65rem;
    }
    .help-indicator-item {
      display: grid;
      grid-template-columns: minmax(5.5rem, auto) 1fr;
      align-items: center;
      gap: 0.45rem;
      color: var(--dim);
      font-size: 0.67rem;
      line-height: 1.3;
    }
    .help-indicator-key {
      color: var(--text);
      font-weight: 700;
      white-space: nowrap;
    }
    .help-copy {
      margin-top: 0.2rem;
      font-size: 0.74rem;
      color: var(--dim);
      line-height: 1.45;
    }

    .gw-matches-wrap {
      margin-bottom: 0.25rem;
    }
    .gw-matches-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      flex-wrap: wrap;
      /* Same gap below the label as a plain .section-lbl (its own padding-bottom is zeroed below). */
      padding-bottom: 0.35rem;
    }
    .gw-matches-header .section-lbl {
      padding-bottom: 0;
    }
    .gw-match-sort-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }
    .gw-match-sort-toggle-lbl {
      font-size: 0.62rem;
      color: var(--dim);
    }
    .gw-match-sort-btn {
      border: 1px solid var(--border);
      background: var(--control-bg);
      color: var(--dim);
      border-radius: 4px;
      font-size: 0.62rem;
      font-weight: 700;
      line-height: 1;
      padding: 0.18rem 0.34rem;
      cursor: pointer;
    }
    .gw-match-sort-btn:hover {
      color: var(--text);
      border-color: var(--border-strong);
    }
    .gw-match-sort-btn.active {
      color: #04130a;
      background: var(--green);
      border-color: var(--green);
    }
    .gw-matches-list {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 0.2rem;
    }
    .gw-match-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }
    .gw-match-card.open {
      border-color: #3b82f655;
      box-shadow: 0 0 0 1px #3b82f622 inset;
    }
    .gw-match-toggle {
      width: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0.5rem 0.7rem;
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 0.55rem;
      align-items: center;
      text-align: left;
      cursor: pointer;
      font: inherit;
    }
    .gw-match-toggle:hover {
      background: var(--surface2);
    }
    .gw-match-clubs {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.78rem;
      font-weight: 600;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .gw-match-score {
      font-size: 0.82rem;
      font-weight: 800;
      color: var(--yellow);
    }
    .gw-match-meta {
      font-size: 0.64rem;
      color: var(--dim);
      white-space: nowrap;
    }
    .gw-match-status {
      font-size: 0.64rem;
      color: var(--dim);
      letter-spacing: 0.4px;
      min-width: 2.5rem;
      text-align: right;
    }
    .gw-match-club-side {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      min-width: 0;
    }
    .gw-match-club-side > span:first-child {
      white-space: nowrap;
    }
    .gw-match-club-separator {
      color: var(--dim);
      flex: 0 0 auto;
    }
    .gw-match-details {
      border-top: 1px solid var(--border);
      padding: 0.45rem;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }
    .gw-match-team-block {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .gw-match-team-title {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--dim);
      padding: 0 0.2rem;
    }
    .gw-match-team-metrics {
      padding: 0.12rem 0.35rem;
      color: var(--dim);
      background: var(--control-bg);
      border-radius: 4px;
      font-size: inherit;
      font-weight: 600;
      white-space: nowrap;
    }
    .gw-match-team-metrics .metric + .metric::before {
      content: "\00a0·\00a0";
      color: var(--dim);
      font-weight: 700;
    }
    .gw-match-empty {
      font-size: 0.72rem;
      color: var(--dim);
      padding: 0.25rem 0.2rem 0.35rem;
    }

    /* ── Player row ── */
    .player-row {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.42rem 0.75rem;
      margin-bottom: 0.35rem;
      display: grid;
      grid-template-columns: 2.6rem 1.5fr 4fr auto;
      align-items: center;
      gap: 0.5rem;
    }
    .player-row.bench {
      background: var(--surface2);
      opacity: 0.68;
    }
    .player-row.sub-in {
      opacity: 1;
    }
    .player-row.subbed-out {
      background: var(--surface2);
      opacity: 0.68;
    }
    .player-row.bench-used {
      border-color: var(--green);
      opacity: 1;
    }
    .player-row.bench-boost {
      opacity: 1;
      background: var(--surface);
    }

    /* ── Position badge ── */
    .pos {
      font-size: 0.68rem;
      font-weight: 800;
      text-align: center;
      padding: 0.22rem 0.3rem;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.1rem;
    }
    .pos.bench-pos {
      flex-direction: row;
      align-items: baseline;
      gap: 0.18rem;
    }
    .pos.bench-pos .sub-num {
      font-size: 0.66rem;
      font-weight: 700;
      transform: translateY(-1px);
    }
    .sub-num {
      font-size: 0.6rem;
      font-weight: 500;
      color: var(--dim);
      line-height: 1;
    }
    .pos-GK  { background: #7c3aed28; color: #a78bfa; }
    .pos-DEF { background: #15803d28; color: #4ade80; }
    .pos-MID { background: #1d4ed828; color: #60a5fa; }
    .pos-FWD { background: #b91c1c28; color: #f87171; }

    /* ── Player info ── */
    .pname {
      font-size: 0.88rem;
      font-weight: 500;
      line-height: 1.05;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      min-width: 0;
    }
    .pname-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
    .pmeta {
      font-size: 0.68rem;
      color: var(--dim);
      margin-top: 0.02rem;
      line-height: 1.15;
    }
    .pmeta-inline {
      font-size: 0.7rem;
      color: var(--dim);
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      min-width: 0;
      white-space: nowrap;
    }

    /* ── Badges ── */
    .badges {
      display: flex;
      gap: 0.25rem;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top: 0.18rem;
    }
    .badge {
      font-size: 0.62rem;
      font-weight: 700;
      padding: 0.15rem 0.38rem;
      border-radius: 4px;
      white-space: nowrap;
    }
    .b-C        { background: var(--yellow); color: #000; }
    .b-TC       { background: var(--yellow); color: #000; }
    .b-VC       { border: 1px solid var(--yellow); color: var(--yellow); }
    .b-C,
    .b-VC {
      min-width: 1.45rem;
      height: 1.15rem;
      padding: 0 0.32rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .b-eC       { background: #facc1533; border: 1px solid var(--yellow); color: var(--yellow); }
    .b-in       { background: #4ade8022; color: var(--green); }
    .b-out      { background: #f8717122; color: var(--red); }
    .b-unselectable { background: #f59e0b22; color: #f59e0b; border: 1px solid #f59e0b55; }
    .b-transfer { background: linear-gradient(135deg, var(--green) 0%, var(--red) 100%); color: #fff; border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; padding: 0.12rem 0.28rem; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
    .b-xi       { background: #4ade8022; color: var(--green); }
    .b-n        { background: var(--border); color: var(--dim); }
    .b-chip     { background: var(--purple); color: #fff; border-radius: 20px; padding: 0.18rem 0.55rem; }
    .b-def      { background: #15803d55; color: var(--green); border: 1px solid var(--green); }

    /* ── Stats chips ── */
    .player-row.has-stats { align-items: start; }
    .player-row.has-stats > div:nth-child(2) { align-self: start; }
    .pstats-col {
      display: flex;
      flex-direction: column;
      gap: 0.18rem;
      min-width: 0;
      align-self: center;
    }
    .player-row.has-stats .pstats-col { align-self: start; }
    .pstats {
      display: flex;
      flex-wrap: wrap;
      gap: 0.2rem;
    }
    .sc {
      font-size: 0.72rem;
      font-weight: 600;
      padding: 0.1rem 0.32rem;
      border-radius: 3px;
      white-space: nowrap;
      line-height: 1.5;
    }
    .sc-min  {
      display: inline-block;
      min-width: 2.5rem;
      text-align: center;
      font-size: 0.78rem;
      font-weight: 800;
      padding: 0.1rem 0.2rem;
    }
    /* Minutes-badge state: pending (not on yet) / active (live now) /
       done (played, fixture over) / unused (never came on, fixture over) */
    .sc-min-pending { color: var(--dim); }
    .sc-min-active  { background: #4ade8022; color: var(--green); }
    .sc-min-done    { background: #a78bfa22; color: var(--purple); }
    .sc-min-unused  { background: #ef444422; color: #ef4444; }
    .sc-goal { background: #f59e0b22; color: #f59e0b; }
    .sc-ast  { background: #60a5fa22; color: var(--blue); }
    .sc-og   { background: #ef444422; color: #ef4444; }
    .sc-cs   { background: #4ade8022; color: var(--green); }
    .sc-cbi  { background: #a78bfa22; color: var(--purple); }
    .sc-kp   { background: #60a5fa22; color: var(--blue); }
    /* Fixed-width slot so short and long club codes both end flush against
       the same vertical line right before the minutes badge starts; the
       badge itself (.sc-gw) stays snug around its own text inside that
       slot rather than stretching its grey background to fill it. */
    .sc-gw-slot {
      display: inline-flex;
      justify-content: flex-end;
      min-width: 2.8rem;
    }
    .sc-gw   { background: var(--border); color: var(--dim); letter-spacing: 0.5px; }
    .sc-sv   { background: #fbbf2422; color: #fbbf24; }
    .sc-gc   { background: #f8717122; color: #f87171; }
    .sc b    { font-weight: 800; color: var(--yellow); }

    /* ── Points ── */
    .pts {
      font-size: 1.1rem;
      font-weight: 700;
      text-align: right;
      min-width: 2.4rem;
    }
    .pts.cap { color: var(--yellow); }
    .pts .raw {
      display: block;
      font-size: 0.65rem;
      color: var(--dim);
      font-weight: 400;
    }

    /* ── Refresh bar ── */
    .refresh-bar {
      text-align: center;
      font-size: 0.78rem;
      color: var(--dim);
      margin-top: 1.5rem;
      padding-bottom: 2.5rem;
    }

    :is(:root, .export-capture-root)[data-theme="light"] .chip-status-pill.active {
      color: #5b21b6;
      border-color: #c4b5fd;
      background: #ede9fe;
    }
    :is(:root, .export-capture-root)[data-theme="light"] .chip-status-pill.used {
      color: #475569;
      border-color: #cbd5e1;
      background: #e2e8f0;
    }
    :is(:root, .export-capture-root)[data-theme="light"] .chip-status-pill.remaining {
      color: #1d4ed8;
      border-color: #bfdbfe;
      background: #eff6ff;
    }
    :is(:root, .export-capture-root)[data-theme="light"] .chip-status-pill.missed {
      color: #b42318;
      border-color: #fecaca;
      background: #fef2f2;
    }
    :is(:root, .export-capture-root)[data-theme="light"] .ghost-ship-badge {
      color: #854d0e;
      background: #fef3c7;
      border-color: #d97706;
    }
    :is(:root, .export-capture-root)[data-theme="light"] .pos-GK { color: #6d28d9; background: #ede9fe; }
    :is(:root, .export-capture-root)[data-theme="light"] .pos-DEF { color: #08783f; background: #dcfce7; }
    :is(:root, .export-capture-root)[data-theme="light"] .pos-MID { color: #1d4ed8; background: #dbeafe; }
    :is(:root, .export-capture-root)[data-theme="light"] .pos-FWD { color: #b42318; background: #fee2e2; }
    :is(:root, .export-capture-root)[data-theme="light"] .sc-goal,
    :is(:root, .export-capture-root)[data-theme="light"] .sc-sv { color: #92400e; background: #fef3c7; }
    :is(:root, .export-capture-root)[data-theme="light"] .sc-ast,
    :is(:root, .export-capture-root)[data-theme="light"] .sc-kp { color: #1d4ed8; background: #dbeafe; }
    :is(:root, .export-capture-root)[data-theme="light"] .sc-og,
    :is(:root, .export-capture-root)[data-theme="light"] .sc-gc { color: #b42318; background: #fee2e2; }
    :is(:root, .export-capture-root)[data-theme="light"] .sc-cs { color: #08783f; background: #dcfce7; }
    :is(:root, .export-capture-root)[data-theme="light"] .sc-cbi { color: #6d28d9; background: #ede9fe; }
    :is(:root, .export-capture-root)[data-theme="light"] .sc-min-active { color: #08783f; background: #dcfce7; }
    :is(:root, .export-capture-root)[data-theme="light"] .sc-min-done { color: #6d28d9; background: #ede9fe; }
    :is(:root, .export-capture-root)[data-theme="light"] .sc-min-unused { color: #b42318; background: #fee2e2; }
    :is(:root, .export-capture-root)[data-theme="light"] .b-VC,
    :is(:root, .export-capture-root)[data-theme="light"] .b-eC { color: #854d0e; border-color: #ca8a04; }
    :is(:root, .export-capture-root)[data-theme="light"] .league-stats-foot { color: #b42318; }

    @media (max-width: 600px) {
      header { padding: 3.75rem 0 0.5rem; }
      .header-actions {
        top: 0.5rem;
        right: 0;
      }
      .settings-segmented button { font-size: 0.72rem; }
    }

    @media (max-width: 520px) {
      .gw-match-team-metrics {
        display: inline-grid;
        grid-template-columns: auto auto;
        gap: 0.18rem;
        align-items: center;
        max-width: 100%;
        padding: 0.1rem 0.22rem;
        white-space: nowrap;
      }
      .gw-match-team-metrics .ownership-metric {
        display: none;
      }
      .gw-match-team-metrics .eo-metric::before {
        display: none;
      }
    }

    @media (max-width: 380px) {
      .gw-match-toggle {
        gap: 0.28rem;
        padding-inline: 0.5rem;
      }
      .gw-match-team-metrics {
        gap: 0.12rem;
        padding: 0.08rem 0.14rem;
        font-size: 0.56rem;
      }
      .gw-match-meta,
      .gw-match-status {
        font-size: 0.56rem;
      }
      .gw-match-status { min-width: 1.7rem; }
    }

    /* ── Static about / FAQ content (crawlable without JS, and gives
       first-time visitors context the app UI alone doesn't) -- hidden once
       a team is loaded so it doesn't clutter the live-tracker view. ── */
    .about-section {
      max-width: 900px;
      margin: 2rem auto 0.5rem;
      padding: 1.4rem 1.2rem 0.5rem;
      border-top: 1px solid var(--border);
      color: var(--dim);
      font-size: 0.85rem;
      line-height: 1.6;
    }
    .about-section h2 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 0.6rem;
    }
    .about-section p { margin-bottom: 1rem; }
    .faq-item { margin-bottom: 1rem; }
    .faq-item h3 {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.25rem;
    }

    /* ═══ GW performance tracker (Patreon) ═══ */
    .gw-performance-page {
      max-width: 900px;
      margin: 0 auto;
      padding: 0.5rem 0.75rem 2rem;
    }
    .gw-performance-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 0.6rem;
    }
    .gw-performance-header h2 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text);
    }
    .gw-performance-back {
      font-size: 0.72rem;
      color: var(--blue);
      text-decoration: none;
    }
    .gw-performance-back:hover { text-decoration: underline; }
    .gw-performance-pending {
      font-size: 0.68rem;
      color: var(--dim);
      background: var(--surface);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      padding: 0.4rem 0.6rem;
      margin-bottom: 0.6rem;
    }
    .gw-performance-empty {
      color: var(--dim);
      font-size: 0.8rem;
    }
    .gw-performance-chart-wrap {
      margin-bottom: 0.75rem;
    }
    .gw-performance-chart {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .gw-chart-grid-line {
      stroke: var(--border-subtle);
      stroke-width: 1;
    }
    .gw-chart-zero-line {
      stroke: var(--border-strong);
      stroke-width: 1.2;
    }
    .gw-chart-axis-label {
      fill: var(--dim);
      font-size: 9px;
    }
    .gw-chart-axis-label.y {
      text-anchor: end;
    }
    .gw-chart-axis-label.x {
      text-anchor: middle;
    }
    .gw-chart-line {
      fill: none;
      stroke-width: 1.7;
    }
    .gw-chart-avg {
      fill: none;
      stroke-width: 1.3;
      stroke-dasharray: 4 3;
      opacity: 0.8;
    }
    .gw-chart-trend {
      fill: none;
      stroke-width: 1.3;
      stroke-dasharray: 1.5 3;
      opacity: 0.8;
    }
    .gw-chart-c-leader { stroke: var(--yellow); }
    .gw-chart-c-top100 { stroke: var(--red); }
    .gw-chart-c-top1000 { stroke: var(--blue); }
    .gw-chart-c-gap { stroke: var(--dim); }
    .gw-chart-dot {
      fill: var(--surface);
      stroke-width: 1.5;
    }
    .gw-chart-hit {
      fill: transparent;
      cursor: pointer;
    }
    .gw-chart-tooltip {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.1s ease;
    }
    .gw-chart-hit:hover + .gw-chart-tooltip {
      opacity: 1;
    }
    .gw-chart-tooltip rect {
      fill: var(--surface);
      stroke: var(--border-strong);
      stroke-width: 1;
    }
    .gw-chart-tooltip text {
      fill: var(--text);
      font-size: 9px;
    }
    .gw-performance-chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      font-size: 0.62rem;
      color: var(--dim);
      margin-top: 0.3rem;
      align-items: center;
    }
    .gw-chart-legend-item,
    .gw-chart-legend-style {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }
    .gw-chart-legend-swatch {
      display: inline-block;
      width: 0.8rem;
      height: 2px;
      border-radius: 1px;
    }
    .gw-chart-legend-swatch.gw-chart-c-leader { background: var(--yellow); }
    .gw-chart-legend-swatch.gw-chart-c-top100 { background: var(--red); }
    .gw-chart-legend-swatch.gw-chart-c-top1000 { background: var(--blue); }
    .gw-chart-legend-swatch.gw-chart-c-gap { background: var(--dim); }
    .gw-chart-legend-dash {
      display: inline-block;
      width: 0.9rem;
      height: 0;
      border-top: 2px dashed var(--dim);
    }
    .gw-chart-trend-sample {
      border-top-style: dotted;
    }
    .gw-performance-table-wrap {
      overflow-x: auto;
    }
    .gw-performance-table {
      min-width: 920px;
    }
    .gw-performance-row-pending td {
      color: var(--dim);
      font-style: italic;
    }
    .gw-performance-row-live td {
      background: color-mix(in srgb, var(--green) 10%, transparent);
    }
    .gw-performance-live-badge {
      display: inline-block;
      font-size: 0.55rem;
      font-weight: 800;
      color: var(--on-accent);
      background: var(--green);
      border-radius: 3px;
      padding: 0 0.25rem;
      margin-left: 0.2rem;
      vertical-align: middle;
    }
    .gw-performance-stat-row td {
      color: var(--dim);
      font-weight: 700;
      border-top: 1px solid var(--border-strong);
    }
    .gw-performance-stat-row td:first-child {
      text-align: left;
    }
    .gw-performance-locked p {
      color: var(--dim);
      font-size: 0.8rem;
    }
    .gw-perf-good {
      color: var(--green);
      font-weight: 700;
    }
    .gw-perf-bad {
      color: var(--red);
      font-weight: 700;
    }

    /* ═══ Squad history (Patreon) ═══ */
    .sqh-page { max-width: 1400px; }
    .sqh-filters { flex-wrap: wrap; gap: 0.35rem; }
    .sqh-filters .league-players-search { flex: 1 1 8rem; min-width: 6rem; max-width: 14rem; }
    .sqh-select { width: auto; max-width: 11rem; font-size: 0.66rem; padding: 0.18rem 0.3rem; }
    .sqh-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .sqh-count { font-size: 0.62rem; color: var(--dim); }
    .sqh-table-wrap { overflow-x: auto; }
    .sqh-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
    .sqh-table th, .sqh-table td { white-space: nowrap; }
    .sqh-name {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--surface);
      text-align: left;
      padding-right: 0.4rem;
      max-width: 9rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sqh-club { color: var(--dim); font-size: 0.55rem; }
    .sqh-stat { padding: 0.2rem 0.3rem; color: var(--muted-strong); }
    .sqh-cell {
      min-width: 1.7rem;
      text-align: center;
      padding: 0.2rem 0.1rem;
      border-left: 1px solid var(--border-subtle);
    }
    .sqh-summary-row th, .sqh-summary-row td { color: var(--dim); font-weight: 700; }
    .sqh-head-row th { border-top: 1px solid var(--border-strong); }
    .sqh-xi {
      background: color-mix(in srgb, var(--green) var(--sqh-tone, 20%), transparent);
      font-weight: 700;
    }
    .sqh-xi.sqh-neg { background: color-mix(in srgb, var(--red) 24%, transparent); }
    .sqh-bench { background: var(--surface2); color: var(--muted-strong); }
    .sqh-none { color: var(--dim); opacity: 0.6; }
    .sqh-bought { box-shadow: inset 3px 0 0 var(--blue); }
    .sqh-sold { box-shadow: inset 3px 0 0 var(--red); }
    .sqh-flag { font-size: 0.5rem; margin-left: 0.1rem; color: var(--yellow); font-weight: 800; }
    .sqh-flag-in { color: var(--green); }
    .sqh-flag-out { color: var(--red); }
    .sqh-live { color: var(--green); margin-left: 0.1rem; }
    .sqh-legend { margin-top: 0.5rem; font-size: 0.6rem; color: var(--dim); }
    .faq-item p { margin-bottom: 0; }