/* Career mode */
    .career-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
    .career-team-card { position: relative; overflow: hidden; display: grid; gap: 3px; justify-items: start; text-align: left; background: rgba(var(--surface-rgb), 0.80); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; color: var(--text); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; box-shadow: none; white-space: normal; }
    .career-team-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); filter: none; transform: none; }
    .career-team-flag { position: absolute; top: -6px; right: -10px; width: 84px; height: 56px; opacity: 0.14; pointer-events: none; }
    .career-team-flag svg { width: 100%; height: 100%; border-radius: 6px; }
    .career-team-abbrev { font-size: 20px; font-weight: 900; color: var(--accent); letter-spacing: 0.04em; }
    .career-team-name { font-size: 14px; font-weight: 700; }
    .career-team-card small { color: var(--muted); font-size: 11px; line-height: 1.5; }
    .career-team-card .career-team-rating { color: var(--text); font-weight: 800; }
    .career-hub-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
    .career-standings-panel { grid-column: 1 / -1; }
    /* Season Calendar can list a dozen+ events; cap it to ~4 rows and scroll the
       rest so the panel stays compact instead of towering over the left column. */
    /* The thumb stays in the layout (fixed 6px gutter, no reflow) but is fully
       transparent until you hover/scroll the box, then fades in gently. */
    /* overflow-y:auto forces overflow-x to auto too, which would clip the
       result rows' -10px hover-box bleed (the highlight ends up flush against
       the text). Bleed the container out 10px and pad it back so the box keeps
       its inset without shifting the content, and pin overflow-x to `clip` so
       the bleed (and the vertical scrollbar gutter) never spawns a horizontal
       scrollbar - we only ever want vertical scrolling here. */
    #careerCalendar, #careerWorldResults, #careerRecent { max-height: 264px; overflow-y: auto; overflow-x: clip; margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.25s ease; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 14px), transparent 100%); }
    /* Recent Results sits taller than the calendar/world feeds: ~4.5 rows so the 5th peeks under the fade. */
    #careerRecent { max-height: 340px; }
    #careerCalendar:hover, #careerCalendar:focus-within, #careerWorldResults:hover, #careerWorldResults:focus-within, #careerRecent:hover, #careerRecent:focus-within { scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent; }
    #careerCalendar .result-row:last-child, #careerWorldResults .result-row:last-child, #careerRecent .result-row:last-child { border-bottom: none; }
    #careerCalendar::-webkit-scrollbar, #careerWorldResults::-webkit-scrollbar, #careerRecent::-webkit-scrollbar { width: 6px; }
    #careerCalendar::-webkit-scrollbar-thumb, #careerWorldResults::-webkit-scrollbar-thumb, #careerRecent::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.25s ease; }
    #careerCalendar:hover::-webkit-scrollbar-thumb, #careerCalendar:focus-within::-webkit-scrollbar-thumb, #careerWorldResults:hover::-webkit-scrollbar-thumb, #careerWorldResults:focus-within::-webkit-scrollbar-thumb, #careerRecent:hover::-webkit-scrollbar-thumb, #careerRecent:focus-within::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.35); }
    #careerCalendar::-webkit-scrollbar-track, #careerWorldResults::-webkit-scrollbar-track, #careerRecent::-webkit-scrollbar-track { background: transparent; }
    .fixture-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; background: rgba(var(--surface-rgb), 0.7); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .fixture-main { display: grid; gap: 4px; }
    .fixture-event { color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
    .fixture-vs { font-size: 18px; }
    .fixture-meta { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
    .fixture-countdown { flex: 0 0 auto; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
    .fixture-countdown.matchday { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); background: var(--accent-dim); }

    /* Advance-time popup: calendar ticking on the left, the day's world
       results feeding in on the right. */
    /* Fixed height (not max-height): the feed column scrolls inside it instead
       of growing and pushing the Skip/Play buttons past the clipped edge. */
    .career-time-dialog { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; width: min(720px, 94vw); height: min(560px, 88vh); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
    .career-time-left { padding: 22px 20px; border-right: 1px solid var(--line); background: rgba(var(--accent-rgb), 0.05); display: flex; flex-direction: column; gap: 10px; }
    .career-time-date { font-size: 26px; font-weight: 800; line-height: 1.15; }
    .career-time-sub { min-height: 34px; font-size: 13px; }
    .career-time-track { height: 6px; border-radius: 999px; background: rgba(var(--surface-rgb), 0.9); border: 1px solid var(--line); overflow: hidden; }
    .career-time-bar { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width 0.25s ease; }
    /* Indeterminate shimmer while the server computes the first chunk. It lives
       near the left and gently breathes so it reads as "loading", never as a
       bar that fills to completion and resets - real progress takes over from
       the left edge once playback starts. */
    .career-time-bar.is-working { width: 26% !important; background: linear-gradient(90deg, transparent, var(--accent), transparent); transition: none; animation: career-time-sweep 1.2s ease-in-out infinite; }
    @keyframes career-time-sweep { 0%, 100% { margin-left: 0; opacity: 0.55; } 50% { margin-left: 22%; opacity: 1; } }
    .career-time-matchday { margin-top: auto; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: var(--r-lg); background: var(--accent-dim); padding: 12px 14px; font-size: 15px; }
    .career-time-right { padding: 18px 20px; display: flex; flex-direction: column; min-height: 0; }
    .career-time-right h3 { margin: 0 0 10px; }
    .career-time-feed { flex: 1; overflow-y: auto; min-height: 0; }
    .career-time-result { padding: 8px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; animation: career-time-pop 0.3s ease; }
    .career-time-result small { display: block; }
    /* The popup auto-closes on matchday, so Skip is the only action; tuck it
       against the right edge under the feed. */
    .career-time-actions { margin-top: 12px; display: flex; align-items: center; justify-content: flex-end; }
    .career-time-actions button { flex: 0 0 auto; padding-top: 12px; padding-bottom: 12px; }
    @keyframes career-time-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    @media (max-width: 700px) {
      .career-time-dialog { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 92vh; }
      .career-time-left { border-right: 0; border-bottom: 1px solid var(--line); }
      .career-time-matchday { margin-top: 4px; }
    }

    /* Career exit confirmation */
    .career-exit-dialog { width: min(440px, 94vw); border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-strong); padding: 20px; }
    .career-exit-dialog .nav-row { margin-top: 0; }

    /* Squad-selection dialog carries up to four action buttons (Pick Squad /
       Send Last Squad / Auto-select / Remind me later), which overflow the
       default 440px app-dialog: right-aligned + no-shrink + no-wrap pushed the
       primary "Pick Squad" button off the left edge. Widen to fit the row,
       centre the buttons, and let them wrap on narrow screens (the base
       .app-dialog .nav-row supplies the wrap) so nothing is ever clipped. */
    #careerSquadOverlay .retro-dialog.app-dialog { width: min(660px, 94vw); }
    #careerSquadOverlay .app-dialog .nav-row { justify-content: center; }

    /* Persistent inline squad CTA in the Next Fixture panel: once the prompt has
       been shown (or dismissed via the box's close button), this stays put so the
       coach can still name the squad - like the Advance Time action, never a
       modal that nags. Turns red at the deadline (one day before the match). */
    .career-squad-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: var(--r-lg); background: var(--accent-dim); }
    .career-squad-cta.is-deadline { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.10); }
    .career-squad-cta-text { flex: 1 1 220px; font-size: 13px; }
    .career-squad-cta-btns { display: flex; flex: 0 0 auto; gap: 8px; }
    .career-squad-cta-btns button { padding: 8px 14px; font-size: 13px; }

    /* Career fixture calendar (month grid). The panel sizes itself to the
       viewport so a full month never needs scrolling. */
    .career-cal-panel { display: flex; flex-direction: column; height: calc(100vh - 165px); min-height: 460px; }
    .career-cal-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
    .career-cal-toolbar b { flex: 1; text-align: center; font-size: 17px; min-width: 140px; }
    .career-cal-toolbar .nav-button { flex: 0 0 auto; padding: 7px 14px; }
    #careerFixtureCalendar { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .career-cal-events { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .career-cal-event { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; background: rgba(var(--surface-rgb), 0.7); }
    .career-cal-event.cal-cup { border-color: rgba(250, 204, 21, 0.5); background: rgba(250, 204, 21, 0.1); }
    .career-cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4px; min-height: 0; }
    .career-cal-head { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 2px 6px; align-self: end; }
    /* Empty / between-series (resting) days get a gentle green wash so the future
       never looks dark; in-series days sit a clear step greener so series time
       still reads distinctly against resting time. Past days fade via opacity. */
    .career-cal-day { min-height: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 6px; display: flex; flex-direction: column; justify-content: center; background: rgba(var(--accent-rgb), 0.07); overflow: hidden; position: relative; }
    .career-cal-day .career-cal-daynum { position: absolute; top: 5px; left: 7px; }
    .career-cal-empty { border-color: transparent; background: transparent; }
    .career-cal-daynum { font-size: 11px; color: var(--muted); font-weight: 700; }
    /* Days inside an event window get a wash: gold for tournaments, soft
       accent for bilateral tours, so the Asia Cup fortnight pops at a glance. */
    .career-cal-tourday { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.34); }
    .career-cal-cupday { background: rgba(250, 204, 21, 0.13); border-color: rgba(250, 204, 21, 0.36); }
    .career-cal-cupday .career-cal-daynum { color: rgba(250, 204, 21, 0.85); }
    .career-cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-dim); }
    /* FIFA day-by-day advance: future/unplayed days are full-strength and bright;
       already-played (past) days fade right back (whole cell dimmed) so the grid
       reads bright-future | faded-past at a glance - a much stronger, simpler
       split than a translucent veil over already-dark cells. Event colours (tour
       tint, gold-ember cup, results) keep their identity, just faded once played.
       The fade drops on as the cursor passes a day. */
    .career-cal-past { opacity: 0.34; transition: opacity 0.45s ease; }
    .career-cal-cursor { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(var(--accent-rgb), 0.5); background: var(--accent-dim); opacity: 1; transition: box-shadow 0.2s ease; }
    #careerPage-calendar { position: relative; }
    /* Floating Stop pill during a walk. Centred with margin:auto (left/right:0),
       NOT a transform - so a global button-hover transform can never shift it
       sideways. A clean opaque dark pill with an accent outline: clearly visible
       without the garish solid-green fill. Hover just lifts/scales in place. */
    #careerHubScreen .career-cal-stop { position: absolute; bottom: 22px; left: 0; right: 0; margin: 0 auto; width: max-content; z-index: 6; padding: 11px 34px; font-size: 15px; font-weight: 800; letter-spacing: 0.05em; border-radius: 999px; border: 1.5px solid rgba(var(--accent-rgb), 0.85); color: var(--accent); background: rgb(var(--surface-rgb)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); white-space: nowrap; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; filter: none; }
    #careerHubScreen .career-cal-stop:hover { transform: scale(1.05); color: var(--accent); background: var(--accent-dim); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.66); filter: none; }
    #careerHubScreen .career-cal-stop:active { transform: scale(0.97); }
    /* Future days simulate-to-here on click; the world-match count badge
       shows the rest of the world playing that day. */
    .career-cal-simto { cursor: pointer; }
    .career-cal-simto:hover { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.1); }
    .cal-world-count { position: absolute; right: 6px; bottom: 4px; font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: 0.04em; }
    /* Trophy cabinet: a CSS-only "3D" display case - perspective on the room,
       layered gradients for wood depth, shelf boards with a lit front edge,
       and trophies sculpted from gradients with a glass sheen over it all. */
    .cab-room { display: flex; justify-content: center; padding: 8px 6px 4px; perspective: 1100px; }
    .cab-cabinet { position: relative; width: min(560px, 100%); padding: 16px 22px 12px; border-radius: 14px; transform: rotateX(4deg); transform-style: preserve-3d;
      background: linear-gradient(160deg, #5d3d20 0%, #4a2f17 28%, #3a2410 62%, #2c1a0a 100%);
      border: 10px solid #241307; border-bottom-width: 16px;
      box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.65), inset 0 2px 0 rgba(255, 214, 150, 0.18), 0 30px 60px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4); }
    .cab-glass { position: absolute; inset: 0; pointer-events: none; border-radius: 6px; z-index: 5;
      background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 28%, transparent 45%, transparent 62%, rgba(255, 255, 255, 0.06) 78%, transparent 92%); }
    .cab-shelf { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 26px; min-height: 106px; padding: 6px 8px 14px; }
    .cab-shelf-board { position: absolute; left: -8px; right: -8px; bottom: 0; height: 12px; border-radius: 2px;
      background: linear-gradient(180deg, #7a5226 0%, #5b3a18 35%, #3a240e 100%);
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 220, 160, 0.35); }
    .cab-empty-slot { height: 78px; }
    .cab-trophy { position: relative; display: grid; justify-items: center; padding-bottom: 4px; z-index: 2; transition: transform 0.18s ease; transform-style: preserve-3d; cursor: pointer; }
    .cab-trophy:hover { transform: translateY(-5px) scale(1.07); z-index: 4; }
    /* A soft spotlight halo behind each cup, tinted to its metal. */
    .cab-halo { position: absolute; top: -12px; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(closest-side, var(--cab-halo, rgba(255, 214, 120, 0.30)), transparent 70%); pointer-events: none; }
    .cab-trophy:hover .cab-halo { background: radial-gradient(closest-side, var(--cab-halo-hot, rgba(255, 224, 140, 0.45)), transparent 72%); }
    /* Contact shadow so the cup sits ON the shelf instead of floating. */
    .cab-ground-shadow { width: 44px; height: 7px; margin-top: 1px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent); }
    .cab-cup { position: relative; width: 44px; height: 34px; border-radius: 4px 4px 22px 22px; }
    /* Handles, grown from the cup's sides. */
    .cab-cup::before, .cab-cup::after { content: ''; position: absolute; top: 2px; width: 16px; height: 20px; border: 4px solid; border-radius: 50%; }
    .cab-cup::before { left: -14px; border-right-color: transparent; transform: rotate(-12deg); }
    .cab-cup::after { right: -14px; border-left-color: transparent; transform: rotate(12deg); }
    .cab-shine { position: absolute; left: 7px; top: 4px; width: 8px; height: 20px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.05)); transform: rotate(8deg); }
    .cab-stem { width: 9px; height: 13px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 40%, rgba(255, 255, 255, 0.25) 55%, rgba(0, 0, 0, 0.3)); }
    .cab-foot { width: 34px; height: 9px; border-radius: 3px 3px 5px 5px; }
    .cab-plaque { margin-top: 5px; display: grid; justify-items: center; gap: 0; padding: 3px 8px; border-radius: 3px; background: linear-gradient(180deg, #1d130a, #120b05); border: 1px solid rgba(255, 214, 150, 0.28); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); max-width: 110px; }
    .cab-plaque b { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #e8c98a; text-align: center; line-height: 1.25; }
    .cab-plaque small { font-size: 9px; color: #9c7c4a; font-weight: 700; }
    /* Metal tones. The cup body, handles, stem tint and foot share a palette. */
    .cab-gold .cab-cup { background: radial-gradient(120% 130% at 32% 18%, #fff3c4 0%, #f5ce64 30%, #d9a23c 60%, #8a5e14 100%); box-shadow: 0 10px 16px rgba(0, 0, 0, 0.5), inset 0 -6px 10px rgba(110, 70, 10, 0.55); }
    .cab-gold .cab-cup::before, .cab-gold .cab-cup::after { border-color: #d9a23c; }
    .cab-gold .cab-cup::before { border-right-color: transparent; } .cab-gold .cab-cup::after { border-left-color: transparent; }
    .cab-gold .cab-stem, .cab-gold .cab-foot { background-color: #c8922f; }
    .cab-gold .cab-foot { background-image: linear-gradient(180deg, #ecc066, #93621a); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); }
    .cab-silver .cab-cup { background: radial-gradient(120% 130% at 32% 18%, #ffffff 0%, #dfe6ee 30%, #aab6c4 60%, #5d6873 100%); box-shadow: 0 10px 16px rgba(0, 0, 0, 0.5), inset 0 -6px 10px rgba(60, 70, 80, 0.55); }
    .cab-silver .cab-cup::before, .cab-silver .cab-cup::after { border-color: #aab6c4; }
    .cab-silver .cab-cup::before { border-right-color: transparent; } .cab-silver .cab-cup::after { border-left-color: transparent; }
    .cab-silver .cab-foot { background-image: linear-gradient(180deg, #ccd6e0, #6f7b88); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); }
    .cab-silver .cab-stem { background-color: #97a4b2; }
    .cab-bronze .cab-cup { background: radial-gradient(120% 130% at 32% 18%, #ffd9b0 0%, #e29d5c 30%, #b8732f 60%, #6e3f12 100%); box-shadow: 0 10px 16px rgba(0, 0, 0, 0.5), inset 0 -6px 10px rgba(90, 50, 10, 0.55); }
    .cab-bronze .cab-cup::before, .cab-bronze .cab-cup::after { border-color: #b8732f; }
    .cab-bronze .cab-cup::before { border-right-color: transparent; } .cab-bronze .cab-cup::after { border-left-color: transparent; }
    .cab-bronze .cab-foot { background-image: linear-gradient(180deg, #d99a55, #7c4a17); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); }
    .cab-bronze .cab-stem { background-color: #a96a2c; }
    /* Halo tints + an engraved double band low on each cup. */
    .cab-gold { --cab-halo: rgba(255, 214, 120, 0.30); --cab-halo-hot: rgba(255, 224, 140, 0.45); }
    .cab-silver { --cab-halo: rgba(210, 226, 244, 0.26); --cab-halo-hot: rgba(228, 240, 252, 0.42); }
    .cab-bronze { --cab-halo: rgba(236, 160, 90, 0.26); --cab-halo-hot: rgba(248, 182, 116, 0.42); }
    .cab-gold .cab-cup, .cab-silver .cab-cup, .cab-bronze .cab-cup { box-shadow: 0 10px 16px rgba(0, 0, 0, 0.5), inset 0 -6px 10px rgba(0, 0, 0, 0.35), inset 0 -14px 0 -12px rgba(0, 0, 0, 0.28), inset 0 -18px 0 -16px rgba(255, 255, 255, 0.22); }
    .cab-note { text-align: center; margin-top: 10px; }
    @media (max-width: 700px) { .cab-shelf { gap: 14px; } .cab-cabinet { padding: 14px 10px 10px; } }

    /* Trophy story overlay: the final, the tournament's stars, the campaign. */
    .cab-story-dialog { width: min(620px, 94vw); max-height: 88vh; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-strong); overflow: hidden; }
    .cab-story-body { padding: 14px 18px 18px; overflow-y: auto; }
    .cab-final-card, .cab-pot-card { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--r-md); margin-bottom: 10px; }
    .cab-final-card { border: 1px solid rgba(250, 204, 21, 0.45); background: rgba(250, 204, 21, 0.08); }
    .cab-final-card b { font-size: 16px; }
    .cab-pot-card { border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.07); }
    .cab-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 6px; }
    .cab-boards h3 { margin: 8px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    .cab-campaign-h { margin: 12px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    .cab-final-row { background: rgba(250, 204, 21, 0.06); }
    @media (max-width: 560px) { .cab-boards { grid-template-columns: 1fr; } }

    /* World-event rows in the advance-time popup: accent strip + tinted card
       so they read as breaking news, not another scoreline. */
    .career-time-event { border-left: 3px solid rgba(var(--accent-rgb), 0.75); padding: 10px 10px 10px 11px; margin: 6px 0; background: rgba(var(--accent-rgb), 0.08); border-radius: 0 var(--r-md) var(--r-md) 0; border-bottom: none; }
    .career-time-event b { color: var(--accent); }
    .career-cal-today .career-cal-daynum { color: var(--accent); }
    /* Match days: the whole cell becomes the fixture card. */
    .career-cal-matchday { border-color: rgba(var(--accent-rgb), 0.55); background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.04) 70%); box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1); transition: transform 0.15s ease, box-shadow 0.15s ease; }
    .career-cal-matchday:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.22); }
    .cal-md-stage { position: absolute; top: 5px; right: 7px; max-width: 65%; font-size: 9px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(var(--accent-rgb), 0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cal-md-body { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 2px 8px; }
    .cal-md-vs { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
    /* Flag matches the cap height of the abbreviation so the row reads as one unit. */
    .cal-md-flag { flex: 0 0 auto; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12); }
    .cal-md-flag svg { display: block; width: 100%; height: 100%; }
    .cal-md-opp { font-size: 16px; font-weight: 900; letter-spacing: 0.01em; white-space: nowrap; }
    .cal-md-plane { flex: 0 0 auto; font-size: 13px; line-height: 1; color: var(--muted); }
    /* Away days: hollow dashed card + plane, so tours abroad read as a block. */
    /* Knockout slots that aren't the coach's match: dashed while the teams
       are still TBD, and a tighter pairing line once they're known. */
    .career-cal-matchday.cal-md-tbd { border-style: dashed; box-shadow: none; }
    .cal-md-tbd .cal-md-opp { color: var(--muted); letter-spacing: 0.12em; }
    .cal-md-ko-pair { font-size: 13px; }
    .career-cal-matchday.cal-md-away { border-style: dashed; box-shadow: none; }
    .career-cal-matchday.cal-md-away:not(.cal-win):not(.cal-loss):not(.cal-tie):not(.cal-md-cup) { background: rgba(var(--surface-rgb), 0.3); }
    .career-cal-matchday.cal-md-away:hover { box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.14); }
    .cal-md-result { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: 0.22em; text-indent: 0.22em; padding: 3px 0 2px; color: #04130a; }
    .cal-md-result.out-win { background: linear-gradient(90deg, rgba(74, 222, 128, 0.85), rgba(74, 222, 128, 0.65)); }
    .cal-md-result.out-loss { background: linear-gradient(90deg, rgba(248, 113, 113, 0.85), rgba(248, 113, 113, 0.65)); }
    .cal-md-result.out-tie { background: linear-gradient(90deg, rgba(250, 204, 21, 0.85), rgba(250, 204, 21, 0.65)); }
    .career-cal-matchday.cal-win { border-color: rgba(74, 222, 128, 0.55); background: linear-gradient(150deg, rgba(74, 222, 128, 0.16), rgba(74, 222, 128, 0.03) 70%); }
    .career-cal-matchday.cal-loss { border-color: rgba(248, 113, 113, 0.5); background: linear-gradient(150deg, rgba(248, 113, 113, 0.14), rgba(248, 113, 113, 0.03) 70%); }
    .career-cal-matchday.cal-tie { border-color: rgba(250, 204, 21, 0.5); background: linear-gradient(150deg, rgba(250, 204, 21, 0.14), rgba(250, 204, 21, 0.03) 70%); }
    /* Tournament match days glow gold so cup runs stand out at a glance. */
    .career-cal-matchday.cal-md-cup:not(.cal-win):not(.cal-loss):not(.cal-tie) { border-color: rgba(250, 204, 21, 0.55); background: linear-gradient(150deg, rgba(250, 204, 21, 0.16), rgba(250, 204, 21, 0.03) 70%); box-shadow: 0 4px 16px rgba(250, 204, 21, 0.1); }
    .career-cal-matchday.cal-md-cup .cal-md-stage { color: #facc15; }
    @media (max-width: 760px) {
      .career-cal-panel { height: auto; }
      .career-cal-day { min-height: 58px; padding: 3px 4px; }
      .cal-md-stage { display: none; }
      .cal-md-flag { width: 18px; height: 12px; }
      .cal-md-opp { font-size: 12px; }
      .cal-md-body { gap: 5px; padding: 8px 0 6px; }
    }

    .result-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
    .result-row .result-opp { font-weight: 700; }
    .result-row .result-outcome { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; align-items: center; margin-right: 6px; }
    .result-row small { grid-column: 1 / 2; }
    .series-details > summary { list-style: none; cursor: pointer; }
    .series-details > summary::-webkit-details-marker { display: none; }
    .series-details > summary .result-opp::after { content: ' ▸'; color: var(--accent); font-size: 11px; }
    .series-details[open] > summary .result-opp::after { content: ' ▾'; }
    .series-matches { padding: 0 0 6px 16px; }
    .series-matches .result-row .result-opp { font-weight: 600; font-size: 13px; }
    .result-clickable { cursor: pointer; border-radius: 8px; transition: background 0.12s; padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; }
    .result-clickable:hover, .result-clickable:focus-visible { background: rgba(var(--accent-rgb), 0.08); outline: none; }
    .result-view { font-style: normal; font-size: 11px; color: var(--accent); opacity: 0; margin-left: 8px; transition: opacity 0.12s; }
    .result-clickable:hover .result-view, .result-clickable:focus-visible .result-view { opacity: 1; }
    /* Last-result card under the Next Fixture actions (quick-sim outcome). */
    .career-last-result { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--surface-rgb), 0.7); color: var(--text); }
    .career-lr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .career-lr-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
    .career-lr-meta { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .career-lr-badge { margin-left: auto; }
    .career-lr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--muted); }
    .career-lr-row .career-lr-team { font-weight: 600; }
    .career-lr-row .career-lr-score { font-variant-numeric: tabular-nums; font-weight: 700; }
    .career-lr-winner { color: var(--text); }
    .career-lr-winner .career-lr-team { font-weight: 800; }
    .career-lr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--text); }
    /* A fresh injury out of the match just simmed, flagged under the card. */
    .career-lr-injury { margin-top: 8px; padding: 7px 12px; border: 1px solid rgba(248, 113, 113, 0.45); border-radius: 10px; background: rgba(248, 113, 113, 0.08); color: rgb(248, 113, 113); font-size: 12px; font-weight: 700; }
    .career-mom { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; padding: 8px 12px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 10px; background: rgba(var(--accent-rgb), 0.07); }
    .career-mom-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
    .career-card-note { margin: 0 0 8px; }
    .standings-self { background: var(--accent-dim); }
    .standings-self b { color: var(--accent); }
    .badge-win { background: var(--accent); color: #021a0e; }

    /* Season-calendar event popup (openCareerEventPopup): match rows lay each
       innings out as a chip with the verdict beneath, and a player-of-the-event
       banner + top run/wicket boards sit above. */
    .ev-matches { display: grid; gap: 8px; }
    .ev-match { display: grid; gap: 7px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(var(--surface-rgb), 0.45); }
    .ev-match.result-clickable:hover, .ev-match.result-clickable:focus-visible { background: rgba(var(--accent-rgb), 0.09); border-color: rgba(var(--accent-rgb), 0.3); }
    .ev-match-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .ev-match-title { font-weight: 700; }
    .ev-innings { display: flex; flex-wrap: wrap; gap: 6px; }
    .ev-inn { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); color: rgba(230,242,236,0.85); white-space: nowrap; }
    .ev-inn b { color: #f6fffa; font-weight: 700; margin-right: 3px; }
    .ev-result { font-size: 12.5px; font-weight: 600; color: var(--accent); }
    /* Event header: dates + format/status pills, then a bold result line. */
    .ev-head { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
    .ev-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .ev-dates { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; }
    .ev-pill { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
    .ev-pill-done { color: #9ee8bd; border-color: rgba(var(--accent-rgb), 0.45); background: var(--accent-dim); }
    .ev-pill-live { color: #ffd166; border-color: rgba(255, 209, 102, 0.45); background: rgba(255, 209, 102, 0.10); }
    .ev-note { margin: 8px 0 0; font-size: 12.5px; }
    .ev-result-line { margin: 8px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
    .ev-champ { display: inline-flex; align-items: center; gap: 6px; }
    .ev-champ b { color: var(--accent); }

    .ev-stats { display: grid; gap: 14px; }
    .ev-stats-loading { margin: 0; font-style: italic; }

    /* Player-of-the-event banner: medal chip, prominent name, stat pills. */
    .ev-pote { display: flex; align-items: center; gap: 13px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), 0.4); background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.04)); }
    .ev-pote-badge { font-size: 26px; line-height: 1; flex: none; }
    .ev-pote-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .ev-pote-label { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
    .ev-pote-name { font-size: 16px; font-weight: 800; color: #f6fffa; }
    .ev-pote-name small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 5px; }
    .ev-pote-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
    .ev-pote-stats span { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }

    /* Top run/wicket boards: ranked rows, leader highlighted, divider between. */
    .ev-stat-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 14px; column-gap: 24px; }
    .ev-stat-col h5 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
    .ev-stat-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .ev-stat-row:last-child { border-bottom: 0; }
    .ev-stat-rank { flex: none; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: var(--muted); background: rgba(255,255,255,0.06); }
    .ev-stat-lead .ev-stat-rank { color: #021a0e; background: var(--accent); }
    .ev-stat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
    .ev-stat-name small { font-size: 11px; }
    .ev-stat-val { margin-left: auto; font-variant-numeric: tabular-nums; color: #f6fffa; font-weight: 800; }
    .ev-stat-lead .ev-stat-val { color: var(--accent); }
    .ev-stat-grid > .ev-stat-col:nth-child(2) { position: relative; }
    .ev-stat-grid > .ev-stat-col:nth-child(2)::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 1px; background: var(--line); }
    @media (max-width: 520px) {
      .ev-stat-grid { grid-template-columns: 1fr; }
      .ev-stat-grid > .ev-stat-col:nth-child(2)::before { display: none; }
    }

    @media (max-width: 860px) { .career-hub-layout { grid-template-columns: 1fr; } }

    /* Career hub sidebar shell (Cricket Coach-style left menu + pages) */
    .career-shell { display: grid; grid-template-columns: 192px minmax(0, 1fr); gap: 16px; align-items: start; }
    /* Sticks below the page header (itself sticky, ~106px tall in the hub) -
       top: 12px alone slides the nav underneath it and hides Overview. */
    .career-sidebar { display: flex; flex-direction: column; gap: 2px; background: rgba(var(--surface-rgb), 0.80); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px; position: sticky; top: 118px; max-height: calc(100vh - 130px); overflow-y: auto; }
    .career-nav-item { display: flex; align-items: center; width: 100%; text-align: left; justify-content: flex-start; background: transparent; border: none; border-left: 3px solid transparent; border-radius: 0 var(--r-md) var(--r-md) 0; padding: 10px 12px; color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; box-shadow: none; transition: background 0.12s, color 0.12s; }
    .career-nav-item:hover { background: rgba(var(--accent-rgb), 0.08); color: var(--text); filter: none; transform: none; }
    .career-nav-item.active { background: var(--accent-dim); border-left-color: var(--accent); color: var(--accent); }
    .career-nav-soon { color: rgba(143,168,157,0.55); cursor: default; }
    .career-nav-soon:hover { background: transparent; color: rgba(143,168,157,0.55); }
    .career-nav-soon small { margin-left: auto; font-size: 9px; letter-spacing: 0.1em; border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; }
    .career-nav-bottom { margin-top: 12px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 12px; }
    .career-news-badge { margin-left: auto; background: var(--accent); color: #021a0e; font-size: 11px; font-weight: 900; border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
    /* Advanced settings on the choose screen (next to the manager name). */
    .career-name-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .career-name-row #careerManagerName { flex: 1 1 240px; margin-bottom: 0; }
    .career-adv-toggle { white-space: nowrap; }
    .career-adv { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 14px; }
    .career-adv-note { margin: 0; font-size: 12px; }
    .career-adv-row { display: grid; gap: 6px; }
    .career-adv-tabs { margin: 0; }
    .career-adv-soon { opacity: 0.7; }
    .career-adv-soon small { margin-left: 6px; font-size: 9px; letter-spacing: 0.1em; border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; }
    .career-adv-select { background: rgba(var(--surface-rgb), 0.85); border: 1px solid var(--line); border-radius: var(--r-md, 8px); color: var(--text); padding: 8px 10px; font: inherit; max-width: 320px; }
    .career-adv-select:focus { outline: none; border-color: var(--accent); }
    /* Team picker: league tabs + franchise club cards tinted by club colour. */
    .career-league-tabs { margin-bottom: 4px; }
    .career-club-card { border-left: 3px solid var(--club-color, var(--accent)); }
    .career-club-card .career-team-abbrev { color: var(--club-color, var(--accent)); }
    /* In-page sub-tabs (International, Legacy, Domestic) - manila-folder file
       tabs. The open tab merges into the panel below for a filing-cabinet look;
       the closed tabs sit behind it along one straight folder line.
       No gap, no left inset: the unselected tabs abut into one continuous
       recessed strip that lines up with the folder's left edge, so the first
       tab + body read as a single folder. */
    .career-subtabs { gap: 0; margin: 0; padding: 0; flex-wrap: wrap; position: relative; z-index: 2; align-items: flex-end; }
    /* Scoped under #careerHubScreen to outrank the global accent-fill button rule
       in 02-base.css, which would otherwise paint every tab a solid accent pill.
       The single folder line is the panel's own top border - the closed tabs sit
       on top of it (no border of their own), so there is never a second, slightly
       offset line. The open tab dips 1px over the panel border and hides it,
       breaking the line where it merges into the body. */
    #careerHubScreen .career-subtabs .scorecard-tab {
      border: 1px solid transparent;
      border-radius: 0;
      /* unselected tabs sit darker than the folder, like closed files behind it */
      background: rgba(var(--surface-rgb), 0.92);
      color: var(--muted);
      min-width: 116px;
      padding: 7px 18px 8px;
      box-shadow: none;
    }
    #careerHubScreen .career-subtabs .scorecard-tab:first-child { border-top-left-radius: 10px; }
    #careerHubScreen .career-subtabs .scorecard-tab:last-child { border-top-right-radius: 10px; }
    /* Hover only the closed tabs - lighten the fill above the line. The line is
       the panel border, untouched, so it never moves or changes colour. */
    #careerHubScreen .career-subtabs .scorecard-tab:not(.active):hover { color: var(--text); background: rgba(var(--surface-2-rgb), 0.85); }
    #careerHubScreen .career-subtabs .scorecard-tab.active {
      position: relative;
      z-index: 3;
      margin-bottom: -1px;
      color: #eafff2;
      border-color: var(--line-strong);
      border-bottom-color: transparent;
      border-radius: 10px 10px 0 0;
      /* fully opaque fill matching the panel's top so the open tab merges into
         the body and hides the folder line beneath it (no ghost line) */
      background: rgb(var(--surface-2-rgb));
      padding-top: 11px;
    }
    /* The selected tab ignores hover entirely - no background change, and no
       brightness/lift inherited from the global button rule in 02-base.css. */
    #careerHubScreen .career-subtabs .scorecard-tab.active:hover { filter: none; transform: none; cursor: default; }
    /* Straight top edge so the folder line stays flush under the tab strip; the
       first tab supplies the rounded top-left corner. Bottom stays rounded.
       Flat fill (not the default feature gradient) so the open tab's flat colour
       merges seamlessly into the body instead of stepping against the gradient. */
    .career-page .career-subpage > .panel.feature { border-top-left-radius: 0; border-top-right-radius: 0; background: rgb(var(--surface-2-rgb)); }
    .career-subpage { display: none; position: relative; z-index: 1; }
    .career-subpage.active { display: block; }
    /* Section toolbar: a title paired with a season/cycle dropdown */
    .career-section-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
    .career-section-toolbar h2 { margin: 0; }
    .career-season-picker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    .career-season-picker select { background: rgba(var(--surface-rgb), 0.85); border: 1px solid var(--line); border-radius: var(--r-md, 8px); color: var(--text); padding: 7px 10px; font: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .career-season-picker select:focus { outline: none; border-color: var(--accent); }
    /* Domestic (ICL) page */
    .career-dom-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .career-dom-champ { font-size: 15px; font-weight: 800; color: var(--accent); }
    .career-dom-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
    .career-dom-grid h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
    .career-dom-block { margin-bottom: 18px; }
    @media (max-width: 860px) { .career-dom-grid { grid-template-columns: 1fr; } }
    .career-page { display: none; }
    .career-page.active { display: block; }
    .career-news-item { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 10px; background: rgba(var(--surface-rgb), 0.7); }
    .career-news-item h3 { margin: 0 0 4px; font-size: 15px; }
    .career-news-item .news-meta { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
    .career-news-item p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
    /* An outstanding action (e.g. a squad still to name) stands out as a
       highlighted, obviously-tappable card with its CTA always visible. */
    .career-news-action { border-color: rgba(var(--accent-rgb), 0.55); background: var(--accent-dim); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18) inset; cursor: pointer; }
    /* The action card carries .result-clickable for its pointer/hover treatment,
       but that class's edge-bleed negative margins are meant for inline result
       rows - here they'd shove the card 10px past the other inbox items. Keep it
       flush with the rest of the feed. */
    .career-news-action.result-clickable { margin-left: 0; margin-right: 0; padding: 12px 14px; }
    .career-news-action .news-meta { color: var(--accent); }
    /* The CTA reads as a real button, not inline link text. The whole card is
       still the click target; this is the visible affordance. */
    .career-news-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; border-radius: var(--r-md, 8px); background: var(--accent); color: var(--accent-contrast, #06140c); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
    .career-news-action:hover .career-news-cta, .career-news-action:focus-visible .career-news-cta { background: var(--accent-strong, var(--accent)); filter: brightness(1.08); }
    .career-news-action:hover, .career-news-action:focus-visible { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); }
    .career-stat-line { color: var(--muted); font-size: 12px; }
    #careerSearchInput, #careerManagerName { width: min(420px, 100%); background: rgba(var(--surface-rgb), 0.85); border: 1px solid var(--line); border-radius: var(--r-md, 8px); color: var(--text); padding: 10px 12px; font: inherit; margin-bottom: 12px; }
    #careerSearchInput:focus, #careerManagerName:focus { outline: none; border-color: var(--accent); }
    .career-records-section { margin-bottom: 18px; }
    .career-records-section h3 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
    /* Options page: manager profile + save management cards */
    .career-opt-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--surface-rgb), 0.7); padding: 14px 16px; }
    .career-opt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .career-opt-chip { border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(var(--accent-rgb), 0.06); }
    .career-opt-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; }
    .career-opt-rename { display: flex; gap: 8px; flex-wrap: wrap; }
    .career-opt-rename input { flex: 1 1 220px; max-width: 360px; background: rgba(var(--surface-rgb), 0.85); border: 1px solid var(--line); border-radius: var(--r-md, 8px); color: var(--text); padding: 10px 12px; font: inherit; }
    .career-opt-rename input:focus { outline: none; border-color: var(--accent); }
    .career-opt-status { font-size: 12.5px; margin: 8px 0 0; min-height: 1em; }
    .career-opt-intro { font-size: 12.5px; margin: 0 0 14px; }
    .career-opt-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; max-width: 760px; }
    .career-opt-action { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 10px 12px; background: var(--panel-2) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-md); cursor: pointer; transition: transform .14s ease, border-color .14s ease; }
    .career-opt-action:hover { transform: translateY(-2px); border-color: var(--accent) !important; }
    .career-opt-action b { font-size: 13.5px; }
    .career-opt-action span { color: var(--muted); font-size: 12px; }
    .career-opt-danger:hover { border-color: var(--danger, #e4544a) !important; }
    .career-season-details { border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 8px; background: rgba(var(--surface-rgb), 0.7); }
    .career-season-details summary { cursor: pointer; padding: 10px 14px; font-weight: 700; }
    .career-season-details[open] summary { border-bottom: 1px solid var(--line); }
    .career-season-body { padding: 10px 14px; }
    @media (max-width: 860px) { .career-shell { grid-template-columns: 1fr; } .career-sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .career-nav-bottom { margin-top: 0; border-top: none; padding-top: 9px; } }