@layer career-theme {
  :where(.app-shell, .match-playback, .boot-screen, .error-page, dialog, .toast) {
    --route-ink: var(--signal-red);
    --route: var(--route-ink);
    --route-dark: color-mix(in srgb, var(--route-ink) 82%, #15181b);
    --route-pale: color-mix(in srgb, var(--route-ink) 8%, #fff);
    --concrete: #dfe3e4;
    --paper: #f4f5f3;
    --ink: #15181b;
    --muted: #526066;
    --line: #d6dbdc;
    --navy: var(--ink);
    --navy-deep: #22282b;
    --blue: var(--route-ink);
    --blue-pale: var(--route-pale);
    --gold: var(--route);
    --green: #23644b;
    --red: #a81922;
    color: var(--ink);
  }

  .app-shell :is(.nav-link, .button[data-tab], .text-button[data-tab], .button[data-action="quick-train"]) {
    --route: var(--route-ink);
    --route-dark: color-mix(in srgb, var(--route-ink) 82%, #15181b);
    --route-pale: color-mix(in srgb, var(--route-ink) 8%, #fff);
    --blue: var(--route-ink);
  }
  .app-shell [data-tab="career"] { --route-ink: var(--signal-red); }
  .app-shell:has(.nav-link[data-tab="training"][aria-current="page"]),
  .app-shell :is([data-tab="training"], [data-action="quick-train"]) { --route-ink: var(--signal-cobalt); }
  .app-shell:has(.nav-link[data-tab="club"][aria-current="page"]),
  .app-shell [data-tab="club"] { --route-ink: var(--signal-teal); }
  .app-shell:has(.nav-link[data-tab="contract"][aria-current="page"]),
  .app-shell [data-tab="contract"] { --route-ink: var(--signal-orange); }
  .app-shell:has(.nav-link[data-tab="league"][aria-current="page"]),
  .app-shell [data-tab="league"] { --route-ink: var(--signal-violet); }
  .app-shell:has(.nav-link[data-tab="settings"][aria-current="page"]),
  .app-shell [data-tab="settings"] { --route-ink: #36424b; }

  body:has(.app-shell, .match-playback, .boot-screen) { min-width: 320px; background: #f4f5f3; }
  :where(.app-shell, .match-playback, dialog) :focus-visible { outline-color: var(--route-ink); }

  .app-shell .sidebar {
    background: #fff;
    color: var(--ink);
    border-inline-end: 1px solid var(--concrete);
  }
  .app-shell .sidebar-player { border-color: var(--line); }
  .app-shell .sidebar-player p,
  .app-shell .sidebar-bottom { color: var(--muted); }
  .app-shell .sidebar-bottom { font-weight: 500; }
  .app-shell .sidebar-bottom .icon { color: var(--route-ink); }
  .app-shell .sidebar-portrait .player-portrait { border-radius: 2px; }
  .app-shell .player-monogram {
    background: var(--concrete);
    border: 0;
    border-radius: 1px;
    box-shadow: inset 3px 0 var(--route);
    font-weight: 700;
  }
  .app-shell .nav-link {
    border-radius: 1px;
    color: var(--muted);
    font-weight: 600;
  }
  .app-shell .nav-link .icon {
    box-sizing: content-box;
    padding: 3px;
    color: var(--route-ink);
    background: var(--route-pale);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
  }
  .app-shell .nav-link:hover { color: var(--ink); background: var(--route-pale); }
  .app-shell .nav-link[aria-current="page"] {
    color: #fff;
    background: linear-gradient(122deg, var(--route-ink) 88%, var(--route-dark) 88%);
    box-shadow: none;
  }
  .app-shell .nav-link[aria-current="page"] .icon { color: inherit; background: #ffffff16; }

  .app-shell .workspace { background: var(--paper); }
  .app-shell .topbar {
    background: linear-gradient(125deg, #fff 78%, #edf0ef 78% 87%, var(--route) 87% 87.65%, var(--concrete) 87.65%);
    border-color: var(--line);
  }
  .app-shell .topbar-date { font-weight: 600; }
  .app-shell .topbar-date .icon { color: var(--route-ink); }
  .app-shell .save-dot { border-radius: 1px; }
  .app-shell .page-heading h1, .match-playback .playback-heading h1 {
    font-weight: 700;
    letter-spacing: -.055em;
  }
  .app-shell .week-badge {
    border-radius: 1px;
    border-inline-start: 3px solid var(--route);
    font-weight: 600;
  }
  .app-shell .panel {
    border-radius: 2px;
    box-shadow: 0 2px 0 #15181b08;
  }
  .app-shell .panel-heading h2 { font-weight: 700; }

  :where(.app-shell, .match-playback, dialog, .error-page) .button {
    background: var(--route-ink);
    border-radius: 2px;
  }
  :where(.app-shell, .match-playback, dialog, .error-page) .button:hover { background: var(--route-dark); }
  :where(.app-shell, .match-playback, dialog, .error-page) .button.gold {
    color: #fff;
    background: var(--route-ink);
  }
  :where(.app-shell, .match-playback, dialog, .error-page) .button.gold:hover { background: var(--route-dark); }
  :where(.app-shell, .match-playback, dialog, .error-page) .button.secondary {
    border-color: #bfc6c8;
    color: var(--ink);
    background: #fff;
  }
  :where(.app-shell, .match-playback, dialog, .error-page) .button.secondary:hover { background: var(--paper); }
  .app-shell .button.soft { color: var(--route-ink); background: var(--route-pale); }
  .app-shell .button.soft:hover { color: var(--route-dark); background: color-mix(in srgb, var(--route-ink) 10%, #fff); }
  .app-shell .button.danger { color: var(--red); background: #fff; border-color: #e0b0b5; }
  .app-shell .button.danger:hover { background: #fff0f0; }
  :where(.app-shell, dialog) :is(select, input[type="text"], input[type="number"]) {
    border-radius: 2px;
    border-color: #bfc6c8;
  }
  :where(.app-shell, dialog) input::placeholder { color: #667279; }

  .app-shell .fixture-card {
    border: 1px solid var(--line);
    border-top: 3px solid var(--route);
    border-radius: 2px;
    background: #fff;
    color: var(--ink);
  }
  .app-shell .fixture-card::before {
    inset: 0 0 auto auto;
    width: 60%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #edf0ef;
    clip-path: polygon(82% 0, 100% 0, 100% 100%, 36% 100%);
  }
  .app-shell :is(.fixture-meta, .match-team > span, .match-caption, .fixture-footer p, .result-strip, .fixture-appearance) { color: var(--muted); }
  .app-shell :is(.fixture-meta strong, .result-strip b, .fixture-appearance strong, .fixture-footer strong) { color: var(--ink); }
  .app-shell .match-time { color: var(--route-ink); }
  .app-shell .match-score > span:not(.match-caption) { color: var(--route-ink) !important; }
  .app-shell .match-team strong { font-weight: 650; }
  .app-shell .fixture-footer { border-color: var(--line); }
  .app-shell .fixture-footer .record-actions { margin-top: 0; justify-content: flex-end; }

  .app-shell :is(.player-ribbon, .rest-block, .club-overview, .club-level-card, .club-benefit, .activity-symbol,
    .player-life-actions article, .player-position-item, .player-traits > span, .fixture-row-score,
    .pes-category, .pes-drill, .pes-trait-event, .pes-trait-empty, .pes-unlocked-trait, .contract-hint,
    .football-warnings) { border-radius: 2px; }
  .app-shell :is(.mini-table th, .club-level-card, .club-benefit.inactive, .player-position-item, .rest-block,
    .football-note) { background: var(--paper); }
  .app-shell .mini-table .my-team td {
    color: var(--signal-violet);
    background: color-mix(in srgb, var(--signal-violet) 8%, #fff);
  }
  .app-shell .activity-item,
  .app-shell .mini-table td { border-color: #e7ebea; }
  .app-shell :is(.meter-track, .preparation-slot, .club-level-meter span, .club-project-progress) { background: var(--concrete); }
  .app-shell :is(.meter-track, .meter-fill, .preparation-slot, .club-level-meter span, .club-project-progress) { border-radius: 1px; }
  .app-shell .preparation-slot.available { background: var(--signal-cobalt); }
  .app-shell .meter-fill.green { background: var(--signal-green); }
  .app-shell .meter-fill.gold { background: var(--signal-orange); }
  .app-shell .relationship:nth-child(1) { --relationship-ink: var(--signal-cobalt); }
  .app-shell .relationship:nth-child(2) { --relationship-ink: var(--signal-teal); }
  .app-shell .relationship:nth-child(3) { --relationship-ink: var(--signal-violet); }
  .app-shell .relationship > .icon { color: var(--relationship-ink); }
  .app-shell .relationship .meter-fill { background: var(--relationship-ink); }
  .app-shell .club-overview { border-inline-start: 3px solid var(--signal-teal); }
  .app-shell .club-level-meter .filled { background: var(--signal-teal); }
  .app-shell .finance-amount { color: var(--signal-orange); }

  .app-shell .club-visual-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 24px;
  }
  .app-shell .club-visual-grid > :only-child { grid-column: 1 / -1; }
  .app-shell .club-visual-heading {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px clamp(13px, 2vw, 22px);
    border-top: 3px solid var(--signal-teal);
  }
  .app-shell .club-visual-heading p { color: var(--signal-teal); font-size: 12px; font-weight: 650; }
  .app-shell .club-visual-heading h2 { font-size: clamp(21px, 2.2vw, 28px); overflow-wrap: anywhere; }
  .app-shell .club-stadium-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    max-height: 320px;
    background: var(--concrete);
  }
  .app-shell .club-stadium-frame > :is(svg, img) {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .app-shell .club-stadium-frame > img { object-fit: cover; }
  .app-shell .club-stadium-schematic {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-end: 10px;
    padding: 3px 7px;
    color: var(--ink);
    background: #fff;
    font-size: 10px;
  }
  .app-shell .club-stadium-frame:has(.club-stadium-image:not([hidden])) .club-stadium-schematic { display: none; }
  .app-shell .club-stadium-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-bottom: 1px solid var(--line);
  }
  .app-shell .club-stadium-metrics .club-data-line {
    display: block;
    padding: 12px clamp(8px, 1.5vw, 16px);
    border-top: 0;
  }
  .app-shell .club-stadium-metrics .club-data-line + .club-data-line { border-inline-start: 1px solid var(--line); }
  .app-shell .club-stadium-metrics dd { margin-top: 4px; color: var(--ink); font-size: 13px; text-align: start; }
  .app-shell .club-stadium-caption { padding: 12px clamp(13px, 2vw, 22px) 15px; }
  .app-shell .club-stadium-model { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
  .app-shell .club-stadium-model strong { margin-inline-start: 5px; color: var(--ink); }

  .app-shell .club-kits-card { display: grid; grid-template-rows: auto 1fr; }
  .app-shell .club-wardrobe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
  }
  .app-shell .club-wardrobe-kit {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: clamp(9px, 1.5vw, 18px);
    background: linear-gradient(125deg, #f4f5f3 75%, #e7ebeb 75%);
  }
  .app-shell .club-wardrobe-kit + .club-wardrobe-kit { border-inline-start: 1px solid var(--line); }
  .app-shell .club-wardrobe-kit > .club-kit { display: block; width: min(100%, 180px); height: auto; }
  .app-shell .club-wardrobe-kit figcaption {
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
    text-align: center;
  }
  .app-shell .club-project-progress::-webkit-progress-bar { background: var(--concrete); }
  .app-shell .club-project-progress::-webkit-progress-value { border-radius: 0; }
  .app-shell .club-project-progress::-moz-progress-bar { border-radius: 0; }
  .app-shell .quote-card { border-radius: 0 2px 2px 0; }
  .app-shell .football-note { border-color: #b5bfc0; }
  .app-shell :is(.pes-drill[aria-pressed="true"], .pes-trait-event, .training-focus-note) { background: var(--route-pale); }
  .app-shell .training-focus-note { border-color: color-mix(in srgb, var(--route-ink) 20%, #fff); border-radius: 2px; }
  .app-shell :is(.pes-trait-target, .pes-trait-choice) { border-color: color-mix(in srgb, var(--route-ink) 14%, #fff); }

  .match-playback { background: var(--paper); }
  .match-playback .playback-kicker, .match-playback .playback-minute { color: var(--muted); }
  .match-playback .playback-scoreboard {
    color: var(--ink);
    border: 1px solid var(--line);
    border-top: 3px solid var(--route);
    border-radius: 2px 2px 0 0;
    background: linear-gradient(125deg, #fff 74%, #edf0ef 74%);
  }
  .match-playback .playback-clock { color: var(--route-ink); }
  .match-playback .playback-progress { background: var(--concrete); }
  .match-playback .playback-progress::-webkit-progress-bar { background: var(--concrete); }
  .match-playback .playback-feed { border-color: var(--line); border-radius: 0 0 2px 2px; }
  .match-playback .playback-event { border-top-color: var(--line); }
  .match-playback .playback-goal { background: var(--route-pale); border-inline-start-color: var(--route-ink); }
  .match-playback .playback-goal .playback-copy { color: #811319; }
  .match-playback .playback-player { background: #e7f1eb; }
  .match-playback .playback-period { color: var(--ink); background: #edf0ef; }

  .boot-screen { background: var(--paper); color: var(--muted); }
  .boot-ball {
    border-color: var(--route-ink);
    background: conic-gradient(from 30deg, transparent 0 15%, #d821281f 15% 35%, transparent 35% 70%, #d821281f 70% 90%, transparent 90%);
  }
  .error-page { border-top: 3px solid var(--route); border-radius: 2px; }
  .toast { background: var(--ink); color: #fff; border-inline-start: 4px solid var(--route); border-radius: 2px; box-shadow: 0 8px 26px #15181b30; }
  .toast.error { background: #8f141b; border-inline-start-color: #eeadb1; }
  dialog { border-top: 3px solid var(--route); border-radius: 2px; box-shadow: 0 24px 80px #15181b3d; }
  dialog::backdrop { background: #15181b7a; }
  dialog .icon-button { border-radius: 2px; }

  @media (max-width: 960px) {
    .app-shell .club-visual-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 720px) {
    .app-shell .sidebar { border-inline-end: 0; }
    .app-shell .club-visual-grid { gap: 18px; margin-bottom: 18px; }
    .app-shell .club-visual-heading { min-height: 60px; }
    .app-shell .topbar {
      background: linear-gradient(125deg, #fff 63%, #edf0ef 63% 68%, var(--route) 68% 68.65%, var(--concrete) 68.65%);
    }
    .app-shell .nav-links {
      grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.18fr) minmax(0, .7fr) minmax(0, 1.18fr) minmax(0, 1fr);
      overflow: visible;
    }
    .app-shell .nav-link {
      min-width: 0;
      padding-inline: 1px;
      text-align: center;
      font-size: clamp(9px, 2.7vw, 11px);
    }
    .app-shell .nav-link[aria-current="page"] {
      color: var(--route-ink);
      background: var(--route-pale);
      box-shadow: inset 0 -3px var(--route);
    }
    .app-shell .nav-link[aria-current="page"] .icon { background: transparent; }
    .app-shell .matchup { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .app-shell .match-team strong { overflow-wrap: anywhere; }
    .app-shell .fixture-footer { flex-direction: column; align-items: stretch; }
    .app-shell .fixture-footer .record-actions > .button { flex: 1; }
  }
}