/* Desktop presentation layer (v84).
 * ---------------------------------------------------------------------------
 * The phone and tablet app own their own design language and are untouched
 * here: every rule sits behind a desktop width AND an explicit
 * html:not(.sx-phone-webapp):not(.sx-tablet-webapp) guard, because the app
 * shell keeps those classes for the lifetime of a tab even when an iPad is
 * wider than this breakpoint.
 *
 * What this file does: it takes the mobile app's visual vocabulary — soft
 * cards, one accent per state, a clear "what/when/where" reading order on a
 * fixture — and re-sizes it for a mouse and a wide window, instead of leaving
 * the desktop with phone-sized type in a narrow column.
 */

@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) {
    --sx-d-gap: 22px;
    --sx-d-radius: 20px;
    --sx-d-radius-lg: 24px;
    --sx-d-pad: 26px;
    --sx-d-shadow: 0 10px 30px rgba(15, 23, 42, .07);
    --sx-d-shadow-hover: 0 16px 42px rgba(15, 23, 42, .12);
  }

  /* ---- Canvas -------------------------------------------------------- */
  /* The workspace used a phone's column width on a 2560px monitor. Content
     now spans the window with a comfortable reading cap only where long text
     actually lives. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view {
    padding: 30px 36px 56px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view > .page-content > .grid,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view .page-content {
    width: 100%;
    max-width: none;
  }
  @media (min-width: 1600px) {
    html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view { padding: 34px 48px 64px; }
  }

  /* ---- Type scale ---------------------------------------------------- */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-page-header h1,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .page-title { font-size: 30px; letter-spacing: -.02em; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-page-header p,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .page-subtitle { font-size: 14.5px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .card .card-title { font-size: 17px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .card .card-subtitle { font-size: 13.5px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .card.card-list .list-item .li-title { font-size: 15px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .card.card-list .list-item .li-sub,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .card.card-list .list-item .li-meta { font-size: 13px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .table th,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .table td { font-size: 14px; padding-block: 13px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .btn { min-height: 40px; font-size: 14px; border-radius: 12px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .btn.small,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .btn.btn-sm { min-height: 34px; font-size: 13px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .form-control,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .form-select { min-height: 42px; font-size: 14px; border-radius: 12px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .card { border-radius: var(--sx-d-radius); }

  /* ---- Sidebar ------------------------------------------------------- */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-sidebar-head { padding: 22px 18px 14px; gap: 13px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-brand-name { font-size: 14.5px; letter-spacing: -.01em; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav { padding: 6px 0 14px; scrollbar-width: thin; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-grouplabel {
    padding: 14px 20px 7px;
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    opacity: .62;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item {
    min-height: 44px;
    margin-inline: 13px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    gap: 12px;
    /* The sliding marker paints the active background, so the item itself only
       animates colour and a small nudge. Two backgrounds cross-fading looked
       muddy while the marker travelled. */
    transition: color .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1), background .18s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item:hover { transform: translateX(2px); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item:active { transform: translateX(1px) scale(.99); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item.is-active { color: #fff; font-weight: 650; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item.is-active::before { opacity: 0; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-ico {
    width: 30px; height: 30px; border-radius: 10px;
    transition: background .2s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item:hover .sx-nav-ico { transform: scale(1.06); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item.is-active .sx-nav-ico { transform: none; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-native-nav-marker {
    /* GSAP drives y/height; the shadow and sheen are static so the marker reads
       as one moving object rather than a fading rectangle. */
    background: linear-gradient(100deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .10));
    box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 8px 20px rgba(3, 12, 30, .28);
    will-change: transform, height;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-sidebar-foot { padding: 14px 13px max(14px, env(safe-area-inset-bottom)); gap: 8px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-user {
    border-radius: 14px; padding: 10px; gap: 11px;
    transition: background .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-user:hover { transform: translateY(-1px); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-badge { font-size: 11px; min-width: 20px; height: 20px; }

  /* ---- Team search type-ahead ---------------------------------------- */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search-wrap { position: relative; z-index: 30; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search.is-main {
    min-height: 52px; padding: 8px 16px; border-radius: 15px;
    border: 1px solid var(--border-subtle); background: var(--bg-card);
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search-wrap.is-open .sx-dem-search.is-main {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search.is-main input { font-size: 15.5px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    max-height: min(58vh, 460px); overflow: auto;
    padding: 6px;
    border: 1px solid var(--border-subtle); border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--sx-d-shadow-hover);
    animation: sxDemSuggestIn .18s cubic-bezier(.22, 1, .36, 1) both;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search-results > button {
    width: 100%; min-height: 56px; padding: 10px 12px;
    border: 0; border-radius: 13px; background: transparent; text-align: left;
    transition: background .14s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search-results > button.is-cursor,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search-results > button:hover { background: var(--bg-subtle); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search-results > button.is-active { background: color-mix(in srgb, var(--primary) 12%, transparent); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-search-results > button b { font-size: 15px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-current-team { padding: 18px 20px; border-radius: 18px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-current-team strong { font-size: 20px; }

  /* ---- Wedstrijden --------------------------------------------------- */
  /* Same card anatomy as the phone (date strip, the two clubs facing a score
     block, a meta footer), sized so a wide window shows three per row without
     the club names collapsing to two characters. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixtures {
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: var(--sx-d-gap);
    align-items: start;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-match-view.is-list .sx-dem-fixtures { grid-template-columns: 1fr; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture {
    display: flex; flex-direction: column; gap: 16px;
    padding: var(--sx-d-pad);
    border: 1px solid var(--border-subtle); border-radius: var(--sx-d-radius-lg);
    background: var(--bg-card);
    box-shadow: var(--sx-d-shadow);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle));
    box-shadow: var(--sx-d-shadow-hover);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-date {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-right: 0;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-date small { font-size: 13.5px; font-weight: 650; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-date > span {
    padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 750;
    letter-spacing: .04em; text-transform: uppercase;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-date > span.is-home { background: #e4f4ec; color: #0a7a52; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-date > span.is-away { background: #eaf0ff; color: #2c4fb0; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-clubs {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 14px;
    padding: 16px 12px;
    border-radius: 18px;
    background: var(--bg-subtle);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-side {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    min-width: 0; text-align: center;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-side strong {
    font-size: 15px; line-height: 1.3; font-weight: 700;
    overflow-wrap: anywhere; /* club names get long; a card must not clip one */
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-club-logo { width: 54px; height: 54px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-club-logo img { width: 100%; height: 100%; object-fit: contain; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-club-logo svg { width: 30px; height: 30px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-score {
    display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 88px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-score small {
    font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-score b { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-meta > span {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto;
    align-items: center; column-gap: 8px;
    min-width: 0;
    padding: 10px 12px; border-radius: 13px; background: var(--bg-subtle);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-meta > span svg { grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--primary); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-meta > span small { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-meta > span b { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-fixture-meta > span.is-location { grid-column: 1 / -1; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-match-tools {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-segment {
    display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--bg-subtle);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-segment button {
    min-height: 40px; padding: 0 16px; border: 0; border-radius: 11px; background: transparent;
    font-size: 14px; font-weight: 650; color: var(--text-muted); cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-segment button.is-active {
    background: var(--bg-card); color: var(--text-main); box-shadow: 0 2px 8px rgba(15, 23, 42, .09);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dem-view-toggle button { width: 40px; height: 40px; border-radius: 11px; }

  /* ---- Parent "Mijn wedstrijden" ------------------------------------- */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event.is-match .sx-when-chip,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event.is-training .sx-when-chip {
    min-height: 32px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-when-place {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--text-muted);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-attendance button { font-size: 13px; }

  /* ---- Dashboard ----------------------------------------------------- */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-grid { gap: var(--sx-d-gap); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-card {
    border-radius: var(--sx-d-radius-lg);
    box-shadow: var(--sx-d-shadow);
    transition: box-shadow .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-card:hover { transform: translateY(-2px); box-shadow: var(--sx-d-shadow-hover); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-card-head h2 { font-size: 17px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-quicknav { gap: 12px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-quicknav button { min-height: 46px; font-size: 14px; border-radius: 14px; }
  @media (min-width: 1700px) {
    html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-grid { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
  }

  @keyframes sxDemSuggestIn {
    from { opacity: 0; transform: translateY(-6px) scale(.99); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-nav-item, .sx-nav-ico, .sx-user, .sx-dem-fixture, .sx-dash-card { transition: none !important; }
  .sx-nav-item:hover, .sx-user:hover, .sx-dem-fixture:hover, .sx-dash-card:hover { transform: none !important; }
  .sx-dem-search-results { animation: none !important; }
}

/* ===========================================================================
 * Dark mode corrections (all viewports).
 * ---------------------------------------------------------------------------
 * The shell's competition, parent and dashboard components were written with
 * literal light surfaces (#fff, #eef2f7, #f1f5f9) and with fallback-only
 * tokens (var(--sx-card,#fff)) that were never actually defined. In light mode
 * that is invisible; in dark mode every one of them stayed white, which is the
 * patchwork the app showed. Defining the missing tokens fixes the fallback
 * cases everywhere at once; the rules below cover the literals.
 * Club crests keep their white tile on purpose — a crest is printed for a
 * light background and disappears on a dark one.
 * ========================================================================= */
:root {
  --sx-card: var(--bg-card);
  --sx-surface: var(--bg-card);
  --sx-border: var(--border-subtle);
  --sx-muted: var(--text-muted);
}

[data-theme="dark"] {
  --sx-card: var(--bg-card);
  --sx-surface: var(--bg-card);
  --sx-border: var(--border-subtle);
  --sx-muted: var(--text-muted);
}

[data-theme="dark"] :is(.sx-dem-search, .sx-dem-search-results, .sx-dem-team-card, .sx-dem-fixture, .sx-dem-followed button, .sx-standings-card, .dem71-fixture, .dem71-team-card, .dem71-current, .dem71-search, .dem71-picker-results, .dem71-standing-card, .dem71-team-search-accordion) {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-main);
}
[data-theme="dark"] :is(.sx-dem-segment, .dem71-segment, .sx-dem-view-toggle, .dem71-view-toggle) {
  background: color-mix(in srgb, var(--text-main) 8%, transparent);
}
[data-theme="dark"] :is(.sx-dem-segment button.is-active, .dem71-segment button.is-active, .sx-dem-view-toggle button.is-active, .dem71-view-toggle button.is-active) {
  background: var(--bg-card);
  color: var(--text-main);
}
[data-theme="dark"] :is(.sx-dem-follow-badge, .dem71-standing-card > header > b, .dem71-standing-head) {
  background: color-mix(in srgb, var(--text-main) 10%, transparent);
  color: var(--text-muted);
}
[data-theme="dark"] :is(.sx-dem-error, .dem71-error) {
  background: rgba(239, 68, 68, .16);
  color: #fca5a5;
}
[data-theme="dark"] :is(.sx-dem-team-copy small, .sx-dem-team-copy > span, .sx-dem-team-copy em, .sx-dem-fixture-date span, .sx-dem-segment span, .sx-dem-loading, .dem71-loading) {
  color: var(--text-muted);
}
[data-theme="dark"] .sx-dem-segment button { color: var(--text-muted); }
[data-theme="dark"] :is(.sx-announcement-list img, .sx-announcement-image) { background: color-mix(in srgb, var(--text-main) 10%, transparent); }

/* Attendance and duty pills: the light pastels read as bright patches on a
   dark canvas, so dark mode keeps the same hue at low alpha with a legible
   foreground instead of the pastel fill. */
[data-theme="dark"] .sx-parent-attendance button.is-active.yes,
[data-theme="dark"] .sx-parent-event.is-training .sx-parent-attendance button.is-active.yes { background: rgba(16, 185, 129, .20); color: #6ee7b7; }
[data-theme="dark"] .sx-parent-attendance button.is-active.maybe,
[data-theme="dark"] .sx-parent-event.is-training .sx-parent-attendance button.is-active.maybe { background: rgba(245, 158, 11, .20); color: #fcd34d; }
[data-theme="dark"] .sx-parent-attendance button.is-active.no,
[data-theme="dark"] .sx-parent-event.is-training .sx-parent-attendance button.is-active.no { background: rgba(244, 63, 94, .20); color: #fda4af; }
[data-theme="dark"] .sx-parent-wash,
[data-theme="dark"] .sx-parent-match-browser .sx-parent-event .sx-parent-wash { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
[data-theme="dark"] .sx-wash-duty { background: rgba(139, 92, 246, .16); color: #ddd6fe; }

@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .sx-dem-fixture-clubs,
  [data-theme="dark"] .sx-dem-fixture-clubs { background: color-mix(in srgb, var(--text-main) 7%, transparent); }
  [data-theme="dark"] .sx-dem-fixture-meta > span { background: color-mix(in srgb, var(--text-main) 7%, transparent); }
  [data-theme="dark"] .sx-dem-fixture-date > span.is-home { background: rgba(16, 185, 129, .20); color: #6ee7b7; }
  [data-theme="dark"] .sx-dem-fixture-date > span.is-away { background: rgba(96, 165, 250, .20); color: #bfdbfe; }
  [data-theme="dark"] .sx-dem-search-results > button.is-cursor,
  [data-theme="dark"] .sx-dem-search-results > button:hover { background: color-mix(in srgb, var(--text-main) 9%, transparent); }
}

/* ===========================================================================
 * Competition screens on desktop (dem71-* components).
 * ---------------------------------------------------------------------------
 * Verified in the running app: the teams/matches/results/standings screens are
 * rendered by app.js with dem71-* classes, while the earlier desktop pass was
 * written against the React sx-dem-* classes that are not on the page. That is
 * why these screens kept their 9–11px phone typography inside a 1040px column
 * on a 1500px monitor. Same anatomy as the phone card, desktop proportions.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-hub {
    max-width: none !important;
    gap: 22px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-page-head h1 { font-size: 30px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-page-head small { font-size: 11.5px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-page-head > svg,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-page-head .btn-ico { width: 26px; height: 26px; }

  /* Team picker: the selected team and the search sit side by side instead of
     stacking, which is what left the top of the page mostly empty. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-chooser {
    grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr);
    align-items: start;
    gap: 16px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-chooser .dem71-followed { grid-column: 1 / -1; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-current { padding: 18px 20px; border-radius: 20px; gap: 14px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-current .dem71-logo { width: 54px; height: 54px; border-radius: 16px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-current small { font-size: 11px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-current strong { font-size: 21px; margin-top: 3px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-current span { font-size: 13px; margin-top: 4px; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-search-accordion {
    border: 1px solid var(--border-subtle); border-radius: 20px; padding: 4px 6px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-search-accordion summary { min-height: 58px; padding: 10px 14px; font-size: 14px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-search-accordion summary b { font-size: 15px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-search-accordion summary small { font-size: 12px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-search { min-height: 50px; padding: 8px 15px; border-radius: 15px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-search input { font-size: 15px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-search > svg { width: 19px; height: 19px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-picker-results {
    max-height: min(52vh, 420px); padding: 7px; border-radius: 18px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-picker-results button {
    min-height: 54px; padding: 9px 11px; gap: 12px;
    transition: background .14s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-picker-results button:hover,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-picker-results button.is-cursor { background: var(--bg-subtle); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-picker-results b { font-size: 14.5px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-picker-results small { font-size: 12px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-picker-results .dem71-logo { width: 36px; height: 36px; border-radius: 11px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-picker-empty { display: block; padding: 18px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

  /* Teams overview */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-teams-tools { margin-bottom: 18px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)) !important;
    gap: 16px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-card {
    min-height: 112px; padding: 18px; gap: 16px; border-radius: 20px;
    box-shadow: var(--sx-d-shadow);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle));
    box-shadow: var(--sx-d-shadow-hover);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-card .dem71-logo { width: 54px; height: 54px; border-radius: 16px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-copy small { font-size: 11px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-copy strong { font-size: 18px; margin-top: 4px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-copy > span { font-size: 13.5px; margin-top: 4px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-copy em { font-size: 12.5px; margin-top: 8px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-follow-badge { font-size: 11px; padding: 6px 11px; }

  /* Match tools */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-tools { gap: 16px; margin-bottom: 4px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-segment { max-width: 560px; padding: 5px; border-radius: 15px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-segment button { min-height: 42px; font-size: 14px; border-radius: 12px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-segment span { font-size: 13px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-view-toggle button { width: 42px; height: 42px; border-radius: 12px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-tools-label { font-size: 14px; }

  /* Fixtures */
  /* 340px is deliberate: at 1512px it yields three columns inside the actual
     content width, where 380px fell 9px short and dropped to two. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-grid .dem71-fixtures {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)) !important;
    gap: 18px !important;
    align-items: start;
  }
  /* The date/location header stacks instead of competing for one line, which
     is what made the date wrap and the address clip mid-word. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-grid .dem71-fixture-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    justify-items: start;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-grid .dem71-fixture-meta b { white-space: nowrap; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-grid .dem71-fixture-meta span { max-width: 100%; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture {
    padding: 20px !important;
    gap: 16px !important;
    border-radius: 22px;
    box-shadow: var(--sx-d-shadow);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle));
    box-shadow: var(--sx-d-shadow-hover);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture-meta b { font-size: 13px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture-meta span { font-size: 12.5px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture-teams {
    padding: 16px 12px; border-radius: 18px; background: var(--bg-subtle); gap: 12px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture-teams > span { flex-direction: column; text-align: center; gap: 10px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture-teams > span:last-child { justify-content: center; text-align: center; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture-teams .dem71-logo { width: 48px; height: 48px; border-radius: 14px; padding: 5px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture-teams b {
    font-size: 14.5px; line-height: 1.3;
    white-space: normal; overflow: visible; overflow-wrap: anywhere;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-fixture-teams strong { font-size: 24px; font-weight: 800; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-list .dem71-fixture {
    grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr) !important;
    padding: 16px 20px !important;
    gap: 20px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-list .dem71-fixture-teams { background: transparent; padding: 0; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-list .dem71-fixture-teams > span { flex-direction: row; text-align: left; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-list .dem71-fixture-teams > span:last-child { justify-content: flex-end; text-align: right; }

  /* Standings */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-card { border-radius: 22px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-card > header { padding: 22px 24px 18px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-card > header h2 { font-size: 20px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-card > header small { font-size: 11px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-card > header span { font-size: 13px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-card > header > b { font-size: 12px; padding: 7px 12px; }
  /* Desktop has the room for the whole record, so gespeeld/winst/gelijk/verlies
     and the goal columns sit in the table itself; the per-row dropdown stays
     for the phone, where those columns cannot fit. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-head,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > summary {
    grid-template-columns: 46px minmax(0, 1fr) repeat(7, 52px) 62px;
    gap: 10px;
    padding: 12px 24px;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.dem71-standing-head, .dem71-standing-row > summary) > span:nth-child(n+3),
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > summary > strong { text-align: center; font-variant-numeric: tabular-nums; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-col-extra { color: var(--text-muted); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > summary > strong { font-weight: 800; }
  /* With the columns on screen the dropdown would only repeat them. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > .dem71-stats { display: none !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > summary { list-style: none; cursor: default; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > summary::-webkit-details-marker { display: none; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-head { font-size: 11px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > summary { min-height: 58px; font-size: 14.5px; }

  /* Empty and loading states should not be a small box in a large window. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.dem71-empty, .dem71-loading, .sx-empty-state) {
    display: grid; justify-items: center; gap: 8px;
    width: 100%; padding: 56px 24px;
    border: 1px dashed var(--border-subtle); border-radius: 22px;
    background: var(--bg-card);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-empty h3 { font-size: 18px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-empty p { font-size: 14px; color: var(--text-muted); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-empty > svg { width: 34px; height: 34px; color: var(--text-muted); }
}

/* ---------------------------------------------------------------------------
 * Desktop dark mode.
 * The earlier desktop pass paints the workspace, topbar and cards with fixed
 * light gradients and !important, so in dark mode the sidebar went dark while
 * everything around it stayed white. These restate the same surfaces in the
 * theme's own tokens.
 * ------------------------------------------------------------------------- */
@media (min-width: 821px) {
  [data-theme="dark"] .sx-layout,
  html[data-theme="dark"] .sx-layout { background: var(--bg-body) !important; }
  [data-theme="dark"] .sx-main {
    background:
      radial-gradient(920px 560px at 8% 0%, rgba(83, 98, 213, .16), transparent 64%),
      linear-gradient(145deg, #0b1020 0%, #0d1426 52%, #0a0f1e 100%) !important;
  }
  [data-theme="dark"] .sx-topbar {
    background: color-mix(in srgb, var(--bg-card) 88%, transparent) !important;
    border-color: rgba(148, 163, 184, .16) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .35) !important;
  }
  [data-theme="dark"] :is(.sx-view .card, .sx-dash-card, .sx-settings-card, .sx-dem-team-card, .sx-dem-fixture, .sx-parent-welcome, .sx-parent-kpis article, .sx-parent-kpis button) {
    background: linear-gradient(150deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 88%, #000)) !important;
    border-color: rgba(148, 163, 184, .14) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35) !important;
  }
  [data-theme="dark"] :is(.dem71-fixture, .dem71-team-card, .dem71-current, .dem71-search, .dem71-picker-results, .dem71-standing-card, .dem71-team-search-accordion, .dem71-empty, .dem71-loading) {
    background: var(--bg-card) !important;
    border-color: rgba(148, 163, 184, .14) !important;
  }
  [data-theme="dark"] .dem71-fixture-teams { background: color-mix(in srgb, var(--text-main) 7%, transparent) !important; }
  [data-theme="dark"] .dem71-standing-head { background: color-mix(in srgb, var(--text-main) 8%, transparent) !important; color: var(--text-muted) !important; }
  [data-theme="dark"] .dem71-segment { background: color-mix(in srgb, var(--text-main) 9%, transparent) !important; }
  [data-theme="dark"] .dem71-segment button.is-active { background: var(--bg-card) !important; color: var(--text-main) !important; }
  [data-theme="dark"] .dem71-logo { background: rgba(255, 255, 255, .92) !important; }
  [data-theme="dark"] :is(.sx-dem-team-logo, .sx-dem-team-logo-fallback) { background: rgba(255, 255, 255, .92) !important; }
}

@media (min-width: 1700px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-match-view.is-grid .dem71-fixtures {
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)) !important;
  }
}

/* Result verdict colouring, mirroring the phone app: the score block carries
   the outcome, so a list of results is scannable without reading each number.
   Applies on every viewport — app.js renders these classes everywhere. */
.dem71-fixture.has-result .dem71-fixture-teams strong {
  padding: 4px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.dem71-fixture.is-win .dem71-fixture-teams strong { background: rgba(16, 185, 129, .14); color: #047857; }
.dem71-fixture.is-draw .dem71-fixture-teams strong { background: rgba(100, 116, 139, .14); color: #475569; }
.dem71-fixture.is-loss .dem71-fixture-teams strong { background: rgba(244, 63, 94, .13); color: #be123c; }
[data-theme="dark"] .dem71-fixture.is-win .dem71-fixture-teams strong { background: rgba(16, 185, 129, .20); color: #6ee7b7; }
[data-theme="dark"] .dem71-fixture.is-draw .dem71-fixture-teams strong { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
[data-theme="dark"] .dem71-fixture.is-loss .dem71-fixture-teams strong { background: rgba(244, 63, 94, .20); color: #fda4af; }

/* Sidebar sits flush against the window on desktop — no floating card margins
   top, bottom or left — so the navigation reads as part of the app frame. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-sidebar {
    margin: 0 !important;
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: inset -1px 0 rgba(255, 255, 255, .04) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-main { padding-left: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar { margin: 14px 18px 0 !important; }
}

/* ===========================================================================
 * Coach match browser (/wedstrijden) on desktop.
 * ---------------------------------------------------------------------------
 * These cards are the phone components (sx-mobile-fixture-card,
 * sx-parent-fixture-*) reused on desktop, but their sizing lived behind
 * html.sx-phone-webapp. Without it the club crests rendered at their natural
 * size — measured 314px wide inside a 316px card, pushing one card to 1112px
 * tall and overlapping the text. Same anatomy as the phone card, desktop
 * proportions, and every card in a row the same height.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-list.sx-match-view-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 22px !important;
    background: var(--bg-card) !important;
    box-shadow: var(--sx-d-shadow) !important;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle));
    box-shadow: var(--sx-d-shadow-hover) !important;
  }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-summary {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start;
    gap: 12px !important;
    padding: 20px 20px 16px !important;
    min-width: 0 !important;
  }
  /* The "next match" flag is positioned rather than flowed: as a grid item the
     phone rules kept centring it, and this way the row below keeps its own
     alignment. Only a card that carries the flag reserves room for it. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-summary:has(.sx-match-next-label) { padding-top: 54px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-next-label {
    position: absolute !important;
    top: 18px !important;
    left: 20px !important;
    right: auto !important;
    margin: 0 !important;
    width: max-content !important;
    max-width: calc(100% - 40px) !important;
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-date { display: flex !important; align-items: baseline; gap: 8px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-date b { font-size: 13px; font-weight: 800; color: var(--primary); text-transform: uppercase; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-date span { font-size: 13px; font-weight: 650; color: var(--text-muted); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-story { margin: 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--text-muted) !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-versus {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 12px !important;
    border-radius: 18px !important;
    background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-team {
    display: grid !important; justify-items: center !important; gap: 9px !important;
    min-width: 0 !important; text-align: center !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-team img {
    width: 52px !important; height: 52px !important;
    max-width: 52px !important; max-height: 52px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    padding: 4px !important;
    border: 1px solid rgba(15, 23, 42, .06) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-team strong { font-size: 13.5px !important; line-height: 1.3 !important; overflow-wrap: anywhere !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-time { display: grid; justify-items: center; gap: 2px; min-width: 74px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-time strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-time small { font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info {
    position: relative !important;
    height: 172px !important;
    min-height: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    color: #fff !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info .sx-weather-proxy { display: none !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info .sx-overview-weather-rich {
    position: relative; z-index: 2;
    display: grid; gap: 6px; align-content: start;
    width: 100% !important; max-width: 100% !important; height: 100%;
    box-sizing: border-box !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info .sx-overview-weather-head {
    display: flex !important; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; width: 100% !important; min-width: 0; box-sizing: border-box !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info .sx-overview-weather-head small { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .85; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info .sx-overview-weather-head span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18);
    font-size: 11px; font-weight: 700;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info .sx-overview-weather-city { display: block !important; margin-top: 2px; font-size: 16px !important; font-weight: 750 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info .sx-overview-weather-tempbox { display: flex !important; align-items: flex-start; margin: 2px 0 4px; font-size: 38px !important; line-height: 1 !important; font-weight: 800 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info .sx-overview-weather-tempbox em { font-style: normal !important; font-size: 22px !important; line-height: 1.1; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info :is(.sx-overview-weather-meta, .sx-overview-weather-details) { display: flex !important; flex-wrap: wrap !important; gap: 6px 12px !important; font-size: 11.5px !important; opacity: .95; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-info p { margin: 4px 0 0 !important; font-size: 12px !important; opacity: .92; }

  /* Chips carry the practical detail; the address gets its own full-width row
     because it is the one that never fits beside the others. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    margin-top: auto; padding: 0 20px 16px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; min-width: 0; max-width: 100%;
    padding: 6px 12px; border-radius: 999px;
    background: var(--bg-subtle); color: var(--text-muted);
    font-size: 12.5px; font-weight: 650;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip.is-place { flex: 1 1 100%; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip.is-place span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-actions {
    display: flex !important; align-items: center !important; gap: 9px !important;
    padding: 14px 20px !important;
    border-top: 1px solid var(--border-subtle) !important;
    background: color-mix(in srgb, var(--bg-subtle) 60%, transparent) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-actions > * { min-height: 40px !important; border-radius: 12px !important; font-size: 13.5px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-open { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-more { width: 40px !important; flex: 0 0 auto; }
}

[data-theme="dark"] .sx-mobile-fixture-card { background: var(--bg-card) !important; border-color: rgba(148, 163, 184, .14) !important; }
[data-theme="dark"] .sx-parent-fixture-versus { background: color-mix(in srgb, var(--text-main) 7%, transparent) !important; }
[data-theme="dark"] .sx-coach-fixture-pills .sx-when-chip { background: color-mix(in srgb, var(--text-main) 9%, transparent); }

/* ===========================================================================
 * Sidebar: liquid glass.
 * The moving marker paints the active state, so an item only animates its own
 * sheen and a small nudge — two backgrounds cross-fading under a travelling
 * marker read as smearing rather than motion.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-sidebar {
    background:
      radial-gradient(520px 340px at 10% -4%, rgba(120, 150, 255, .30), transparent 66%),
      radial-gradient(420px 300px at 92% 104%, rgba(80, 190, 235, .16), transparent 70%),
      linear-gradient(168deg, rgba(12, 29, 58, .96), rgba(9, 23, 48, .97) 52%, rgba(7, 18, 40, .98)) !important;
    backdrop-filter: blur(30px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
    box-shadow: inset -1px 0 rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-sidebar-head { border-bottom: 1px solid rgba(255, 255, 255, .07) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item {
    position: relative;
    isolation: isolate;
    transition: color .22s ease, transform .34s cubic-bezier(.22, 1, .36, 1), background .22s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(105deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
    opacity: 0;
    transform: scale(.97);
    transition: opacity .26s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item:hover::after { opacity: 1; transform: none; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item:hover { transform: translateX(3px); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item:active { transform: translateX(2px) scale(.985); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-native-nav-marker {
    background: linear-gradient(105deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .09) 58%, rgba(140, 175, 255, .16)) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .28), inset 0 -1px rgba(0, 0, 0, .10), 0 10px 24px rgba(3, 12, 30, .32) !important;
    will-change: transform, height;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-ico {
    background: rgba(255, 255, 255, .07) !important;
    transition: background .24s ease, transform .38s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item:hover .sx-nav-ico { background: rgba(255, 255, 255, .14) !important; transform: scale(1.07); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav-item.is-active .sx-nav-ico { background: rgba(255, 255, 255, .20) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .28); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-user {
    background: rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(14px);
    transition: background .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-user:hover { background: rgba(255, 255, 255, .11) !important; transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-nav-item::after { transition: none !important; }
}

/* ===========================================================================
 * Tactiekbord — toolbar, timer and segmented controls.
 * The toolbar was a fixed three-column grid (330px 520px 250px = 1100px) in a
 * container measured at 984px, so the "Weergave" group hung off the right edge
 * and its checkbox labels wrapped one letter per line. Columns now flex, every
 * group is a card of the same shape, and the controls share one sizing scale.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-toolbar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 20px !important;
    background: var(--bg-card) !important;
    box-shadow: var(--sx-d-shadow) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-toolbar-group,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-tool-group {
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-tool-group { background: var(--bg-card) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-group-label {
    font-size: 10.5px !important; font-weight: 800 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
    color: var(--text-muted) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-group-content { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-group-content .form-group { display: grid !important; flex: 1 1 150px !important; gap: 5px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-group-content .form-group > label { font-size: 11.5px !important; font-weight: 700 !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-toolbar :is(select, input[type=text], input[type=number], .form-select, .form-control) {
    width: 100% !important; min-width: 0 !important; min-height: 40px !important;
    box-sizing: border-box !important; border-radius: 12px !important; font-size: 13.5px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-toolbar button:not(.btn-group button) { min-height: 38px !important; border-radius: 11px !important; font-size: 13px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-tools {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
    gap: 16px !important; margin-top: 16px !important; width: 100% !important; box-sizing: border-box !important;
  }

  /* Toggles read as chips instead of stacked checkbox rows. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-display { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-display > span { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-display > label {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    width: auto !important; min-width: 0 !important; margin: 0 !important;
    padding: 7px 12px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 999px !important;
    background: var(--bg-card) !important;
    font-size: 12.5px !important; font-weight: 650 !important; white-space: nowrap !important;
    cursor: pointer;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-display > label input { width: 16px !important; height: 16px !important; min-height: 0 !important; margin: 0 !important; flex: 0 0 auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-range { display: grid !important; flex: 1 1 100% !important; gap: 6px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-range .form-label { font-size: 11.5px !important; font-weight: 700 !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-range input[type=range] { width: 100% !important; min-height: 0 !important; }

  /* Timer reads as a scoreboard rather than three loose controls. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-timer { display: grid !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-timer-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-timer-label {
    display: block !important; padding: 8px 14px !important; border-radius: 12px !important;
    background: #0f172a !important; color: #fff !important;
    font-size: 22px !important; font-weight: 800 !important; text-align: center !important;
    font-variant-numeric: tabular-nums !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-timer-copy small { font-size: 11.5px !important; text-align: center !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-timer-controls { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-timer-controls .btn { flex: 1 1 auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-phase { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-score { display: flex !important; align-items: center !important; gap: 8px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-score input { width: 64px !important; text-align: center !important; font-weight: 800 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-phase > span, .tactics-score > span) { font-size: 11.5px !important; font-weight: 700 !important; color: var(--text-muted) !important; }

  /* One segmented-control language for every tab strip in the workspace. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-standalone-switch, .tactics-phase .btn-group) {
    display: inline-flex !important; gap: 4px !important; padding: 5px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 14px !important;
    background: var(--bg-subtle) !important;
    box-shadow: inset 0 1px rgba(15, 23, 42, .03) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-switch { margin-bottom: 16px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-standalone-switch, .tactics-phase .btn-group) > button {
    min-height: 38px !important; padding: 0 16px !important;
    border: 0 !important; border-radius: 10px !important;
    background: transparent !important; color: var(--text-muted) !important;
    font-size: 13.5px !important; font-weight: 650 !important; box-shadow: none !important;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-standalone-switch, .tactics-phase .btn-group) > button:hover {
    color: var(--text-main) !important;
    background: color-mix(in srgb, var(--text-main) 5%, transparent) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-phase .btn-group > button:is(.primary, .btn-primary, .is-active, .active, [aria-pressed="true"]) {
    background: var(--primary) !important; color: #fff !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-switch > button[aria-selected="true"] {
    background: var(--bg-card) !important; color: var(--text-main) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10) !important;
  }
}
[data-theme="dark"] .tactics-timer-label { background: #050a16 !important; }

/* ===========================================================================
 * Oefeningen grid.
 * Cards of equal height, the drawing framed as the card's subject, and the
 * equipment counters grouped into one strip instead of a loose row of zeros
 * (the zeros themselves are dropped by the UI layer).
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
    /* align-items:stretch maakte de kaarten binnen ÉÉN rij even hoog, maar
       elke rij hield zijn eigen hoogte -- en een kaart met twee categorieën of
       een langere omschrijving maakte zijn rij meteen een stuk hoger dan de
       rij eronder. grid-auto-rows:1fr geeft alle rijen dezelfde hoogte, dus
       elke kaart in het overzicht wordt precies even hoog. */
    grid-auto-rows: 1fr !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card {
    display: flex !important; flex-direction: column !important; gap: 12px !important;
    height: 100% !important; padding: 18px !important; overflow: hidden !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 20px !important;
    background: var(--bg-card) !important; box-shadow: var(--sx-d-shadow) !important;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle)) !important;
    box-shadow: var(--sx-d-shadow-hover) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-title { margin: 0 !important; font-size: 16px !important; font-weight: 750 !important; line-height: 1.3 !important; text-align: left !important; color: var(--text-main) !important; }
  /* Een vaste minimumhoogte voor de labelrij: zonder dat begon de tekening op
     elke kaart op een andere hoogte, afhankelijk van het aantal categorieën.
     26px is precies één labelregel; met twee regels groeit hij gewoon mee. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; justify-content: flex-start !important; gap: 7px !important; margin: 0 !important; min-height: 26px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badge,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .chip {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    min-height: 26px !important; padding: 4px 11px !important; border-radius: 999px !important;
    background: var(--bg-subtle) !important; color: var(--text-muted) !important;
    font-size: 11.5px !important; font-weight: 700 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-thumb {
    aspect-ratio: 16 / 10 !important; overflow: hidden !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 14px !important;
    background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-thumb svg { display: block !important; width: 100% !important; height: 100% !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-sub { margin: 0 !important; font-size: 13px !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-sub:empty { display: none !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-bottom { display: grid !important; gap: 12px !important; margin-top: auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .need-mini { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 10px !important; border-radius: 12px !important; background: var(--bg-subtle) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .need-mini .n {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 3px 9px !important; border: 1px solid var(--border-subtle) !important; border-radius: 999px !important;
    background: var(--bg-card) !important; color: var(--text-muted) !important;
    font-size: 11.5px !important; font-weight: 750 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .need-mini .mini-ico { width: 15px !important; height: 15px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .btn { min-height: 38px !important; border-radius: 11px !important; font-size: 13px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .btn.primary { flex: 1 1 auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .btn.danger {
    flex: 0 0 auto !important; background: transparent !important;
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent) !important;
    color: #dc2626 !important; box-shadow: none !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .btn.danger:hover { background: rgba(239, 68, 68, .10) !important; }
}
[data-theme="dark"] .exercise-card { background: var(--bg-card) !important; border-color: rgba(148, 163, 184, .14) !important; }
[data-theme="dark"] .ex-thumb, [data-theme="dark"] .need-mini { background: color-mix(in srgb, var(--text-main) 7%, transparent) !important; }
[data-theme="dark"] .exercise-card .btn.danger { color: #fda4af !important; }

/* ===========================================================================
 * Team page: segmented tabs and a laid-out settings pane.
 * The pane was a flat stack of form rows in one card body; on a wide screen it
 * became a very long ribbon of controls. Each setting is now a labelled panel
 * in a responsive grid, with forms and tables spanning the full width.
 * The tab strips share one segmented-control language app-wide, with a marker
 * that travels between tabs (positioned by the UI layer, GSAP when present).
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tabs-card {
    border: 0 !important; border-radius: 18px !important;
    background: transparent !important; box-shadow: none !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tabs-card .card-body { padding: 0 !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.segmented, .tactics-standalone-switch) { position: relative !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .segmented {
    display: flex !important; flex-wrap: wrap !important; gap: 4px !important;
    padding: 6px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 16px !important;
    background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.segmented, .tactics-standalone-switch) > button { position: relative; z-index: 1; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .segmented .seg-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    min-height: 40px !important; padding: 0 16px !important;
    border: 0 !important; border-radius: 11px !important;
    background: transparent !important; color: var(--text-muted) !important;
    font-size: 13.5px !important; font-weight: 650 !important; box-shadow: none !important;
    transition: color .2s ease, background .2s ease, transform .24s cubic-bezier(.22, 1, .36, 1) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .segmented .seg-btn .tab-icon { width: 17px !important; height: 17px !important; opacity: .85; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .segmented .seg-btn:hover { color: var(--text-main) !important; background: color-mix(in srgb, var(--text-main) 5%, transparent) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .segmented .seg-btn:is(.active, [aria-selected="true"]) {
    background: var(--bg-card) !important; color: var(--text-main) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .10) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .segmented .seg-btn:is(.active, [aria-selected="true"]) .tab-icon { color: var(--primary) !important; opacity: 1; }
  /* Once the marker exists it paints the active pill, so the button itself
     stops drawing one — otherwise the two slide apart during the tween. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-seg-marker {
    position: absolute !important; top: 0; left: 0; z-index: 0;
    border-radius: 11px;
    background: var(--bg-card);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .10), inset 0 1px rgba(255, 255, 255, .6);
    opacity: 0; pointer-events: none;
    will-change: transform, width, height;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.segmented, .tactics-standalone-switch):has(.sx-seg-marker) > button:is(.active, [aria-selected="true"], .is-active) {
    background: transparent !important; box-shadow: none !important;
  }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-context-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(240px, auto) !important;
    align-items: center !important; gap: 16px !important;
    padding: 20px 22px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 20px !important;
    background: var(--bg-card) !important; box-shadow: var(--sx-d-shadow) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-context-head h1 { margin: 2px 0 0 !important; font-size: 26px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-context-mark {
    display: grid; place-items: center; width: 54px; height: 54px;
    border-radius: 17px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-context-mark svg { width: 26px; height: 26px; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)) !important;
    gap: 16px !important; align-items: start !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > :is(.sx-inline-primary, .form-group, .muted) {
    margin: 0 !important; padding: 16px !important; box-sizing: border-box !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 16px !important;
    background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .form-group { display: grid !important; gap: 8px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .form-group > label {
    font-size: 11.5px !important; font-weight: 800 !important;
    letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--text-muted) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .sx-inline-primary { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > :is(form, .card, table, .table-responsive) { grid-column: 1 / -1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane .form-inline {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
    gap: 12px !important; align-items: end !important; padding: 16px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 16px !important;
    background: var(--bg-card) !important;
  }
}
[data-theme="dark"] .sx-seg-marker { background: var(--bg-card); box-shadow: 0 2px 10px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .10); }
[data-theme="dark"] .team-context-head { background: var(--bg-card) !important; border-color: rgba(148, 163, 184, .14) !important; }

/* ===========================================================================
 * Modals.
 * The legacy dialogs were a 16px-radius card on a flat scrim with 14px
 * padding and a left-aligned button row — visibly older than the rest of the
 * workspace. They now share the app's card language: centred on desktop,
 * blurred scrim, sticky header and footer so long forms stay operable, and a
 * two-column field grid on the wide variants.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-backdrop {
    align-items: center !important;
    padding: 32px !important;
    background: rgba(8, 15, 31, .58) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    animation: sxModalScrim .22s ease-out both !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-card {
    max-height: calc(100dvh - 64px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 24px !important;
    background: var(--bg-card) !important;
    box-shadow: 0 40px 100px rgba(2, 6, 23, .34), 0 2px 8px rgba(2, 6, 23, .10) !important;
    animation: sxModalIn .34s cubic-bezier(.22, 1, .36, 1) both !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-card > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-header {
    position: sticky; top: 0; z-index: 2;
    flex: 0 0 auto;
    align-items: flex-start !important;
    gap: 16px;
    padding: 22px 26px 18px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent) !important;
    backdrop-filter: blur(14px);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-title { font-size: 19px !important; font-weight: 780 !important; letter-spacing: -.02em; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.modal-subtitle, .modal-sub) { font-size: 13.5px !important; line-height: 1.5; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    padding: 22px 26px !important;
    overflow: auto;
    scrollbar-width: thin;
  }
  /* Fields pair up on a wide dialog; anything that needs the full row keeps it. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.modal-card.modal-xl, .modal-card.modal-lg, .modal-card.modal-wide) .modal-body > form,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.modal-card.modal-xl, .modal-card.modal-lg, .modal-card.modal-wide) .modal-body > .form-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-body :is(textarea, .table-responsive, .full-row, .modal-section) { grid-column: 1 / -1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-body .form-group { display: grid; gap: 6px; min-width: 0; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-body .form-group > label {
    font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-body :is(input, select, textarea) { min-height: 42px; border-radius: 12px; font-size: 14px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-body textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-actions {
    position: sticky; bottom: 0; z-index: 2;
    flex: 0 0 auto;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 16px 26px !important;
    border-top: 1px solid var(--border-subtle) !important;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent) !important;
    backdrop-filter: blur(14px);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-actions .btn { min-height: 42px !important; padding-inline: 18px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-actions.ms-auto { justify-content: flex-end !important; }

  /* React dialogs get the same entrance and depth. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-modal {
    border-radius: 24px !important;
    box-shadow: 0 40px 100px rgba(2, 6, 23, .34), 0 2px 8px rgba(2, 6, 23, .10) !important;
    animation: sxModalIn .34s cubic-bezier(.22, 1, .36, 1) both !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-modal-head { padding: 22px 26px 18px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-modal-head h2 { font-size: 20px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-modal-actions { padding: 16px 26px !important; gap: 10px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-compose-body { padding: 22px 26px !important; }
}

@keyframes sxModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes sxModalScrim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .modal-card, .sx-modal, .modal-backdrop { animation: none !important; }
}

[data-theme="dark"] .modal-card { background: var(--bg-card) !important; border-color: rgba(148, 163, 184, .16) !important; }
[data-theme="dark"] .modal-backdrop { background: rgba(2, 6, 18, .68) !important; }

/* Tactiekbord, second pass: the groups were cards with ragged empty corners
   because each control kept its natural width. Buttons now share the row they
   sit in, so a group is filled rather than padded out, and the whole toolbar
   sizes to its content instead of a fixed three-column split. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-toolbar { align-items: stretch !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-tools { align-items: stretch !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-tool-group .tactics-group-content { align-content: start !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-tool-group .tactics-group-content > .btn,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-tool-group .tactics-group-content > button {
    flex: 1 1 120px !important;
    justify-content: center !important;
  }
  /* The match group carries the most controls, so it earns the wider column on
     a roomy screen instead of everything splitting evenly. */
  @media (min-width: 1500px) {
    html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-toolbar { grid-template-columns: minmax(300px, .9fr) minmax(340px, 1.15fr) minmax(300px, .95fr) !important; }
    html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-tools { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-context-group .tactics-group-content { align-content: start !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-view-group .tactics-group-content { align-content: start !important; }
}

/* ===========================================================================
 * Match browser, follow-up pass.
 * - The chips carry meaning again: the layout rule above set one flat grey for
 *   every chip and, being more specific than the shared colour rules, it won.
 * - The "next match" flag moves onto the card's top border, so the date row
 *   starts at the top of the card and lines up with the other cards.
 * - Grid and list are mutually exclusive: the grid rule forced display:grid
 *   regardless of the chosen mode, so switching to list simply appended the
 *   list underneath the grid.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip.is-home { background: rgba(16, 185, 129, .13) !important; color: #067a52 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip.is-away { background: rgba(100, 116, 139, .15) !important; color: #475569 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip.is-kick { background: rgba(59, 130, 246, .14) !important; color: #1d4ed8 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip.is-arrive { background: rgba(16, 185, 129, .14) !important; color: #047857 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-coach-fixture-pills .sx-when-chip.is-place { background: var(--bg-subtle) !important; color: var(--text-muted) !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-card { overflow: visible !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-card > *:first-child { border-top-left-radius: 22px; border-top-right-radius: 22px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-summary:has(.sx-match-next-label) { padding-top: 20px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-next-label {
    top: -11px !important; left: 18px !important;
    background: var(--bg-card) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border-subtle)) !important;
    color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06) !important;
  }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-match-views.is-list .sx-match-view-grid { display: none !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-match-views.is-grid .sx-match-view-list { display: none !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-match-compact-list { display: grid !important; gap: 10px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-row {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 16px !important;
    background: var(--bg-card) !important; box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-row:hover {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border-subtle)) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .09) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-main {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) auto !important;
    align-items: center !important; gap: 18px !important;
    flex: 1 1 auto !important; min-width: 0 !important;
    color: inherit !important; text-decoration: none !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-date { display: flex !important; align-items: baseline !important; gap: 6px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-date b { font-size: 12px !important; color: var(--primary) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-date strong { font-size: 13.5px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-date span { font-size: 12.5px !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-clubs { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-logo { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-copy strong { font-size: 14px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-copy span { font-size: 12.5px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-compact-score > strong { font-size: 17px !important; font-weight: 800 !important; }

  /* One active treatment in the sidebar: the earlier desktop pass painted an
     indigo gradient on the item itself while the marker painted its own pill,
     so the active row carried two overlays in a colour that was not the app's
     blue. The marker wins; the item stops painting. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-nav:has(.sx-native-nav-marker) .sx-nav-item.is-active {
    background: none !important; background-image: none !important; box-shadow: none !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-native-nav-marker {
    background: linear-gradient(105deg, color-mix(in srgb, #3b82f6 42%, transparent), color-mix(in srgb, #3b82f6 22%, transparent)) !important;
    border: 1px solid rgba(147, 197, 253, .34) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .26), 0 10px 24px rgba(29, 78, 216, .30) !important;
  }
}
[data-theme="dark"] .sx-match-compact-row { background: var(--bg-card) !important; border-color: rgba(148, 163, 184, .14) !important; }
[data-theme="dark"] .sx-match-next-label { background: var(--bg-card) !important; }

/* The desktop chip rule above is more specific than the shared [hidden] rule,
   so without this the zero counters kept their display and stayed on screen. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .need-mini > .n[hidden],
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .need-mini[hidden] { display: none !important; }
}

/* ===========================================================================
 * Training · planning cards.
 * The rows were plain list items with an unreadable weather strip (dark text
 * on a dark scene, the temperature colliding with the cloud art) and seven
 * identical text buttons. Now: cards in a grid, a weather band with a scrim
 * and glass pills so location and temperature read over any scene, and an
 * action row where the primary action leads and the rest are icon pills.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .list:has(.sx-training-plan-weather-card) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr)) !important;
    gap: 18px !important; padding: 0 !important; align-items: stretch !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .list-item.sx-training-plan-weather-card {
    display: flex !important; flex-direction: column !important; gap: 12px !important;
    height: 100% !important; padding: 18px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 20px !important;
    background: var(--bg-card) !important; box-shadow: var(--sx-d-shadow) !important;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .list-item.sx-training-plan-weather-card:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle)) !important;
    box-shadow: var(--sx-d-shadow-hover) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .li-title {
    display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
    gap: 12px !important; font-size: 15.5px !important; font-weight: 750 !important; line-height: 1.35 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .att-badge {
    padding: 5px 11px !important; border-radius: 999px !important;
    background: rgba(16, 185, 129, .13) !important; color: #047857 !important;
    font-size: 11.5px !important; font-weight: 750 !important; white-space: nowrap !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .att-badge svg { width: 14px !important; height: 14px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .min-badge { border-color: var(--border-subtle) !important; color: var(--text-muted) !important; font-size: 11.5px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .li-sub { font-size: 13px !important; color: var(--text-muted) !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-training-weather-row {
    position: relative !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 14px !important; min-height: 92px !important; margin: 0 !important; padding: 16px 20px !important;
    border: 0 !important; border-radius: 16px !important;
    overflow: hidden !important; isolation: isolate !important; color: #fff !important;
  }
  /* A scrim under the text: the scenes range from bright noon to storm grey,
     and the location was invisible on half of them. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-training-weather-row::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(4, 12, 28, .55), rgba(4, 12, 28, .22) 55%, rgba(4, 12, 28, .30));
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-training-weather-row > * { position: relative; z-index: 2; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-weather-scene { z-index: 1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-training-weather-place {
    display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important;
    padding: 7px 12px !important; border-radius: 999px !important;
    background: rgba(6, 14, 30, .28) !important;
    -webkit-backdrop-filter: blur(9px) !important; backdrop-filter: blur(9px) !important;
    color: #fff !important; font-size: 13px !important; font-weight: 650 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-training-weather-place .btn-ico { width: 17px !important; height: 17px !important; color: #fff !important; opacity: .95; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-training-weather-place > span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-training-weather-row .sx-mobile-weather {
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    flex: 0 0 auto !important; min-width: 150px !important;
    padding: 8px 14px !important; border-radius: 15px !important;
    background: rgba(6, 14, 30, .30) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    -webkit-backdrop-filter: blur(9px) saturate(140%) !important; backdrop-filter: blur(9px) saturate(140%) !important;
    gap: 10px !important; color: #fff !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-training-weather-row .sx-mobile-weather > span { display: grid !important; gap: 2px !important; justify-items: end !important; text-align: right !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-weather-icon { width: 34px !important; height: 34px !important; color: #fff !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-mobile-weather strong { font-size: 26px !important; font-weight: 800 !important; line-height: 1 !important; color: #fff !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .sx-mobile-weather small { display: block !important; max-width: none !important; overflow: visible !important; white-space: nowrap !important; font-size: 11.5px !important; color: #fff !important; opacity: .95 !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .li-actions {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    margin-top: auto !important; padding-top: 4px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .li-actions .btn {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    min-height: 36px !important; border-radius: 999px !important; font-size: 12.5px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .li-actions .btn .btn-ico { width: 15px !important; height: 15px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .li-actions .btn.is-plan-primary {
    flex: 1 1 130px !important; justify-content: center !important;
    background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-training-plan-weather-card .li-actions .btn.danger {
    margin-left: auto !important; background: transparent !important;
    border: 1px solid rgba(239, 68, 68, .3) !important; color: #dc2626 !important;
  }
}
[data-theme="dark"] .list-item.sx-training-plan-weather-card { background: var(--bg-card) !important; border-color: rgba(148, 163, 184, .14) !important; }
[data-theme="dark"] .sx-training-plan-weather-card .att-badge { background: rgba(16, 185, 129, .20) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .sx-training-plan-weather-card .li-actions .btn.danger { color: #fda4af !important; }

/* ===========================================================================
 * Tactiekbord: standalone bar, bench and player tokens.
 * ========================================================================= */
@media (min-width: 1025px) {
  /* The standalone board has no match to choose, so the lineup picker moved up
     beside the mode tabs and the empty "Wedstrijd & opstelling" card is gone. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-bar {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex-wrap: wrap !important; gap: 14px !important; margin-bottom: 16px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-bar .tactics-standalone-switch { margin-bottom: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-lineup {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    padding: 7px 8px 7px 16px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 16px !important;
    background: var(--bg-card) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-lineup > span {
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-lineup select { min-width: 190px; min-height: 38px; border-radius: 11px; font-size: 13.5px; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-lineup .btn { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; border-radius: 11px; }

  /* Bench / team roster: a strip of small player cards rather than loose tiles
     floating in a dark band. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-bench {
    padding: 16px 18px !important;
    border-radius: 0 0 20px 20px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-bench-heading {
    display: flex !important; align-items: baseline !important; gap: 10px !important;
    margin-bottom: 12px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-bench-heading strong { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-bench-heading span { font-size: 12.5px; color: rgba(226, 235, 247, .62); }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-bench .marker-list {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .marker-tile.team-roster-tile {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    width: auto !important; min-width: 0 !important; max-width: 220px !important;
    padding: 7px 14px 7px 7px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 999px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 6px 16px rgba(2, 10, 26, .28) !important;
    cursor: grab;
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .marker-tile.team-roster-tile:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(2, 10, 26, .34) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .marker-tile.team-roster-tile:active { cursor: grabbing; transform: scale(.98) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .marker-tile-photo {
    display: grid !important; place-items: center !important;
    width: 34px !important; height: 34px !important; flex: 0 0 auto !important;
    overflow: hidden !important; border-radius: 50% !important;
    background: linear-gradient(150deg, #dbeafe, #c7d2fe) !important;
    color: #3730a3 !important; font-size: 12.5px !important; font-weight: 800 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .marker-tile-photo img { width: 100%; height: 100%; object-fit: cover; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .marker-tile-name {
    min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    color: #0f172a !important; font-size: 13px !important; font-weight: 700 !important;
  }

  /* Player tokens: the lock sat in the middle of the badge, on top of the
     initials. It moves to the rim and only shows on hover or when the player
     really is locked, so the token reads as a shirt number first. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token { overflow: visible !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token-inner {
    width: 100% !important; height: 100% !important;
    overflow: hidden !important; border-radius: 50% !important;
    border: 2.5px solid rgba(255, 255, 255, .95) !important;
    background: linear-gradient(155deg, #3b82f6, #1d4ed8) !important;
    box-shadow: 0 8px 20px rgba(2, 12, 30, .35), inset 0 1px rgba(255, 255, 255, .25) !important;
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token:hover .player-token-inner { transform: scale(1.05) !important; box-shadow: 0 12px 26px rgba(2, 12, 30, .42) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token-photo { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token-initials {
    display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important;
    color: #fff !important; font-weight: 800 !important; letter-spacing: .01em !important;
    text-shadow: 0 1px 2px rgba(2, 12, 30, .35) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token-label {
    margin-top: 7px !important;
    max-width: 150px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    padding: 4px 10px !important; border-radius: 999px !important;
    background: rgba(8, 15, 31, .78) !important;
    -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: #fff !important; font-size: 12px !important; font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(2, 12, 30, .28) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.player-token .token-lock, .player-token .token-remove) {
    position: absolute !important;
    display: grid !important; place-items: center !important;
    width: 22px !important; height: 22px !important;
    padding: 0 !important; border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    background: rgba(8, 15, 31, .82) !important;
    color: #fff !important; font-size: 11px !important; line-height: 1 !important;
    opacity: 0; transform: scale(.85);
    transition: opacity .16s ease, transform .16s cubic-bezier(.22, 1, .36, 1) !important;
    z-index: 3 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token .token-lock { top: -4px !important; left: -4px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token .token-remove { top: -4px !important; right: -4px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token .token-lock svg { width: 12px !important; height: 12px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token:hover :is(.token-lock, .token-remove),
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token:focus-within :is(.token-lock, .token-remove) { opacity: 1; transform: none; }
  /* A locked player keeps its badge visible — that is the whole point of it. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token.locked .token-lock { opacity: 1; transform: none; background: rgba(245, 158, 11, .92) !important; color: #1f1300 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .player-token.locked .player-token-inner { border-color: rgba(253, 224, 71, .95) !important; }
}

/* ===========================================================================
 * Topbar as glass, sidebar a shade deeper, and the workspace cards borrowing
 * the phone app's softer card language (more radius, lighter border, a shadow
 * that lifts on hover rather than a flat outline).
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar {
    min-height: 68px !important;
    padding: 12px 20px !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 22px !important;
    background: linear-gradient(120deg, color-mix(in srgb, var(--bg-card) 72%, transparent), color-mix(in srgb, var(--bg-card) 58%, transparent)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(165%) !important;
    backdrop-filter: blur(26px) saturate(165%) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .65), 0 10px 30px rgba(15, 23, 42, .08) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar-left { gap: 12px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-page-title { font-size: 17px !important; font-weight: 750 !important; letter-spacing: -.015em !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-page-ico {
    display: grid !important; place-items: center !important;
    width: 38px !important; height: 38px !important;
    border-radius: 13px !important;
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 8%, transparent)) !important;
    color: var(--primary) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .6) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-page-ico svg { width: 19px !important; height: 19px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar .sx-icon-btn {
    width: 40px !important; height: 40px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 13px !important;
    background: color-mix(in srgb, var(--bg-card) 70%, transparent) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--text-muted) !important;
    transition: color .18s ease, background .18s ease, transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar .sx-icon-btn:hover {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .10) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar .sx-icon-btn svg { width: 19px !important; height: 19px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-season, .sx-season-btn) {
    min-height: 40px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 13px !important;
    background: color-mix(in srgb, var(--bg-card) 70%, transparent) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif .sx-notif-dot,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-badge { box-shadow: 0 0 0 2px var(--bg-card) !important; }

  /* A shade deeper, so the glass in the navigation has something to sit on. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-sidebar {
    background:
      radial-gradient(520px 340px at 10% -4%, rgba(96, 132, 255, .26), transparent 66%),
      radial-gradient(420px 300px at 92% 104%, rgba(56, 168, 219, .14), transparent 70%),
      linear-gradient(168deg, rgba(9, 22, 46, .98), rgba(6, 16, 36, .985) 52%, rgba(4, 11, 26, .99)) !important;
  }

  /* Workspace cards, in the phone app's language. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view .card {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 24px !important;
    background: var(--bg-card) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
    transition: box-shadow .22s ease, border-color .22s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view .card:hover { box-shadow: 0 16px 40px rgba(15, 23, 42, .09) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view .card-header { padding: 22px 24px 18px !important; border-bottom: 1px solid var(--border-subtle) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view .card-body { padding: 22px 24px 24px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view .card-list .list-item { padding: 16px 24px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view .badge { padding: 5px 11px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 750 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view .empty-card {
    padding: 48px 24px !important; border: 1px dashed var(--border-subtle) !important;
    border-radius: 20px !important; background: var(--bg-subtle) !important; text-align: center !important;
  }
}
[data-theme="dark"] .sx-topbar {
  border-color: rgba(148, 163, 184, .16) !important;
  background: linear-gradient(120deg, color-mix(in srgb, var(--bg-card) 82%, transparent), color-mix(in srgb, var(--bg-card) 66%, transparent)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .38) !important;
}
[data-theme="dark"] .sx-view .card { background: var(--bg-card) !important; border-color: rgba(148, 163, 184, .14) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, .34) !important; }
[data-theme="dark"] .marker-tile.team-roster-tile { background: rgba(226, 232, 240, .96) !important; }

/* ===========================================================================
 * Tactiekbord field toolbar.
 * The fullscreen controls render inline on the board as well, but their menus
 * were only hidden by the fullscreen stylesheet: on the normal page both
 * dropdowns stood permanently open as a dark slab above the pitch, listing the
 * whole roster. They honour aria-hidden now and read as a glass toolbar with
 * two real dropdowns.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-fs-options-menu, .tactics-fs-players-menu)[aria-hidden="true"] { display: none !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-fs-options, .tactics-fs-players) { position: relative !important; display: inline-block !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-fs-options-toggle, .tactics-fs-players-toggle, .tactics-exit-focus) {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    min-height: 38px !important; padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 12px !important;
    background: rgba(255, 255, 255, .10) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    color: #fff !important; font-size: 13px !important; font-weight: 650 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-fs-options-toggle, .tactics-fs-players-toggle):hover { background: rgba(255, 255, 255, .18) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-fs-options-toggle, .tactics-fs-players-toggle) svg { width: 16px !important; height: 16px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-fs-options-menu, .tactics-fs-players-menu) {
    position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; z-index: 40 !important;
    display: grid !important; gap: 3px !important;
    min-width: 250px !important; max-height: min(58vh, 420px) !important; overflow: auto !important;
    padding: 7px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 18px !important;
    background: var(--bg-card) !important;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .30) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-fs-options-menu, .tactics-fs-players-menu) button {
    display: flex !important; align-items: center !important; gap: 10px !important;
    width: 100% !important; min-height: 42px !important; padding: 8px 12px !important;
    border: 0 !important; border-radius: 12px !important; background: transparent !important;
    color: var(--text-main) !important; font-size: 13.5px !important; font-weight: 600 !important; text-align: left !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.tactics-fs-options-menu, .tactics-fs-players-menu) button:hover { background: var(--bg-subtle) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-fs-options-menu button.is-danger { color: #dc2626 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-fs-player-avatar {
    display: grid !important; place-items: center !important;
    width: 32px !important; height: 32px !important; flex: 0 0 auto !important;
    overflow: hidden !important; border-radius: 50% !important;
    background: linear-gradient(150deg, #dbeafe, #c7d2fe) !important;
    color: #3730a3 !important; font-size: 12px !important; font-weight: 800 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-fs-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-fs-player-copy { display: grid !important; flex: 1 1 auto !important; gap: 1px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-fs-player-copy strong { font-size: 13.5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-fs-player-copy small { font-size: 11.5px !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-fs-players-menu button.is-on-field { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-fs-players-menu button.is-on-field small { color: var(--primary) !important; }
}

/* Oefeningen, one notch further: the drawing gets a framed stage with a soft
   inner edge and a slow zoom on hover, the title sits over a hairline, and the
   category chips take the accent so a card is scannable by category alone. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card { position: relative !important; padding-top: 20px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 75%, transparent), color-mix(in srgb, #22d3ee 55%, transparent));
    opacity: 0; transition: opacity .22s ease;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card:hover::before { opacity: 1; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-thumb {
    position: relative !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04), inset 0 8px 20px rgba(15, 23, 42, .06) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-thumb svg { transition: transform .45s cubic-bezier(.22, 1, .36, 1) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card:hover .ex-thumb svg { transform: scale(1.035) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge:not(.ex-badge--duration) {
    background: color-mix(in srgb, var(--primary) 11%, transparent) !important;
    color: var(--primary) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badge--duration .chip-duration { color: var(--text-muted) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-thumb svg { transition: none !important; }
  .exercise-card:hover .ex-thumb svg { transform: none !important; }
}

/* ===========================================================================
 * Workspace chrome: the topbar sits flush against the top of the window and
 * runs the full width from the sidebar to the right edge, as glass, and the
 * canvas behind it carries a soft gradient instead of a flat fill.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar {
    position: sticky !important; top: 0 !important; z-index: 60 !important;
    width: 100% !important; max-width: none !important;
    margin: 0 !important; min-height: 66px !important; padding: 12px 28px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 82%, transparent), color-mix(in srgb, var(--bg-card) 62%, transparent)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 24px rgba(15, 23, 42, .05) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-main {
    background:
      radial-gradient(1100px 620px at 6% -6%, rgba(83, 98, 213, .10), transparent 62%),
      radial-gradient(900px 520px at 100% 0%, rgba(56, 189, 248, .09), transparent 58%),
      linear-gradient(160deg, #f7faff 0%, #eef3fb 46%, #f6f8fc 100%) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view { padding: 28px 28px 56px !important; }
  @media (min-width: 1600px) {
    html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view { padding: 32px 44px 64px !important; }
    html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar { padding-inline: 44px !important; }
  }
}
[data-theme="dark"] .sx-topbar {
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, transparent), color-mix(in srgb, var(--bg-card) 70%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .34) !important;
}

/* Oefeningen toolbar: search and duration on one line, the categories as
   pills under a hairline, so filtering reads as one control panel. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .table-toolbar {
    display: block !important;
    margin-bottom: 20px !important; padding: 18px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 20px !important;
    background: var(--bg-card) !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .04) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .table-toolbar > div { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 14px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .table-toolbar label.meta { display: grid !important; flex: 0 1 240px !important; gap: 6px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .table-toolbar label.meta:first-child { flex: 1 1 320px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .table-toolbar label.meta > span {
    font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em !important;
    text-transform: uppercase !important; color: var(--text-muted) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .table-toolbar label.meta :is(input, select) {
    width: 100% !important; min-width: 0 !important; min-height: 42px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 12px !important;
    background: var(--bg-subtle) !important; font-size: 14px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .cat-tags {
    display: flex !important; flex: 1 1 100% !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 8px !important; margin-top: 2px !important; padding-top: 12px !important;
    border-top: 1px solid var(--border-subtle) !important;
  }
  /* Each chip is wrapped in a label; letting the wrapper disappear puts the
     chips themselves in the flex row instead of one per line. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .cat-tags label.meta { display: contents !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .cat-tags > * { flex: 0 0 auto !important; width: auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .cat-tag {
    width: auto !important; min-height: 34px !important; padding: 0 14px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 999px !important;
    background: var(--bg-card) !important; color: var(--text-muted) !important;
    font-size: 12.5px !important; font-weight: 700 !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .cat-tag:hover {
    color: var(--text-main) !important; transform: translateY(-1px) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle)) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .cat-tag.active {
    background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 32%, transparent) !important;
  }
}
[data-theme="dark"] .sx-main {
  background:
    radial-gradient(1100px 620px at 6% -6%, rgba(83, 98, 213, .18), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, rgba(56, 189, 248, .10), transparent 58%),
    linear-gradient(160deg, #0b1020 0%, #0d1426 46%, #0a0f1e 100%) !important;
}

/* Notification centre: glass panel, segmented filter, quiet rows. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-panel {
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--text-main) 9%, transparent) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, transparent), color-mix(in srgb, var(--bg-card) 76%, transparent)) !important;
    -webkit-backdrop-filter: blur(28px) saturate(175%) !important;
    backdrop-filter: blur(28px) saturate(175%) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .6), 0 28px 70px rgba(15, 23, 42, .20) !important;
    animation: sxNotifIn .22s cubic-bezier(.22, 1, .36, 1) both !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-head {
    padding: 16px 18px 12px !important; background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-main) 7%, transparent) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-title { font-size: 15px !important; font-weight: 780 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-sub { font-size: 12px !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-markall {
    min-height: 32px !important; padding: 0 12px !important; border-radius: 999px !important;
    border: 1px solid var(--border-subtle) !important;
    background: color-mix(in srgb, var(--bg-card) 70%, transparent) !important;
    font-size: 12px !important; font-weight: 700 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-tabs {
    gap: 4px !important; margin: 10px 12px 0 !important; padding: 5px !important;
    border-radius: 14px !important; background: color-mix(in srgb, var(--text-main) 6%, transparent) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-tab { min-height: 34px !important; border-radius: 10px !important; background: transparent !important; font-size: 12.5px !important; font-weight: 650 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-tab.is-active { background: var(--bg-card) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, .10) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-tabcount {
    padding: 1px 7px !important; border-radius: 999px !important;
    background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
    color: var(--primary) !important; font-size: 11px !important; font-weight: 800 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-list { padding: 8px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-row { border-radius: 14px !important; transition: background .16s ease !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-row:hover { background: color-mix(in srgb, var(--text-main) 5%, transparent) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-notif-item { padding: 11px 12px !important; border-radius: 14px !important; background: transparent !important; }
}
@keyframes sxNotifIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sx-notif-panel { animation: none !important; } }
[data-theme="dark"] .sx-notif-panel {
  border-color: rgba(148, 163, 184, .16) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 28px 70px rgba(0, 0, 0, .45) !important;
}

/* ===========================================================================
 * Berichten, in the language of a mail client: the list is a glass panel, the
 * type carries the state instead of everything shouting — a read thread is
 * quiet, an unread one takes the weight and a dot.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-layout { gap: 20px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-list {
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 84%, transparent), color-mix(in srgb, var(--bg-card) 72%, transparent)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .55), 0 10px 30px rgba(15, 23, 42, .06) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-list > button {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important; gap: 12px !important;
    width: 100% !important; padding: 12px 13px !important;
    border: 0 !important; border-radius: 15px !important;
    background: transparent !important; text-align: left !important;
    transition: background .16s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-list > button + button { margin-top: 2px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-list > button:hover { background: color-mix(in srgb, var(--text-main) 5%, transparent) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-list > button.is-selected { background: color-mix(in srgb, var(--primary) 11%, transparent) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-avatar { width: 38px !important; height: 38px !important; border-radius: 50% !important; object-fit: cover !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-copy > span:first-child { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-sender { display: flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-sender strong { font-size: 13.5px !important; font-weight: 600 !important; color: var(--text-main) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-copy time { flex: 0 0 auto !important; font-size: 11.5px !important; font-weight: 500 !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-copy b { display: block; font-size: 13.5px !important; font-weight: 500 !important; color: var(--text-main) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-copy small {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--text-muted) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-msg-role {
    padding: 2px 8px !important; border-radius: 999px !important;
    background: color-mix(in srgb, var(--text-main) 7%, transparent) !important;
    color: var(--text-muted) !important; font-size: 10.5px !important; font-weight: 700 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-list > button.is-unread { position: relative !important; padding-left: 26px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-list > button.is-unread::before {
    content: ""; position: absolute; left: 10px; top: 22px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-message-list > button.is-unread :is(.sx-msg-copy b, .sx-msg-sender strong) { font-weight: 750 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-filterbar { gap: 10px !important; margin-bottom: 16px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-search, .sx-filter-chip) {
    min-height: 44px !important; border-radius: 14px !important;
    border: 1px solid var(--border-subtle) !important;
    background: color-mix(in srgb, var(--bg-card) 76%, transparent) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
}
[data-theme="dark"] .sx-message-list { border-color: rgba(148, 163, 184, .16) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 12px 34px rgba(0, 0, 0, .35) !important; }

/* Match cards borrow the phone card's tint rather than a flat white. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-mobile-fixture-card {
    background: linear-gradient(158deg, color-mix(in srgb, var(--primary) 5%, var(--bg-card)), var(--bg-card) 46%, color-mix(in srgb, #22d3ee 4%, var(--bg-card))) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-fixture-versus {
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-subtle)) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 8%, transparent) !important;
  }
}
[data-theme="dark"] .sx-mobile-fixture-card {
  background: linear-gradient(158deg, color-mix(in srgb, var(--primary) 12%, var(--bg-card)), var(--bg-card) 52%) !important;
}

/* ===========================================================================
 * Icons: the bare outline glyphs sitting loose in headers and empty states
 * read like a stock admin template. Everywhere one stands alone it becomes a
 * tinted tile, which is the same language the phone app uses.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-page-head-icon, .sx-empty > svg:first-child, .sx-empty-state > svg:first-child, .dem71-empty > svg:first-child, .empty-card > svg:first-child) {
    display: grid !important; place-items: center !important;
    width: 48px !important; height: 48px !important;
    box-sizing: border-box !important; padding: 12px !important;
    border-radius: 16px !important;
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--primary) 7%, transparent)) !important;
    color: var(--primary) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .55) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-page-head-icon svg { width: 22px !important; height: 22px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-empty, .sx-empty-state, .dem71-empty) { gap: 10px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-empty strong, .sx-empty-state h3, .dem71-empty h3) { font-size: 17px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-empty span, .sx-empty-state p, .dem71-empty p) { font-size: 13.5px !important; color: var(--text-muted) !important; }
  /* GSAP drives the press scale; the transition must not fight it. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-view .btn, .sx-btn, .cat-tag, .seg-btn) { will-change: transform; }
}
[data-theme="dark"] :is(.sx-page-head-icon, .sx-empty > svg:first-child, .sx-empty-state > svg:first-child, .dem71-empty > svg:first-child) {
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
}

/* ===========================================================================
 * Ouderportaal · Mijn wedstrijden en Trainingen op desktop.
 * The cards inherited a grid built for a phone column: the attendance buttons
 * ran off the right edge, the wash-schema block was squeezed into a narrow
 * column and every card had a different height. Now: one card per fixture with
 * a logo/date header, the practical detail as chips, and the attendance as a
 * three-way segmented control with the squad pinned to the bottom.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)) !important;
    gap: 20px !important; align-items: stretch !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-content: start !important; align-items: center !important;
    column-gap: 14px !important; row-gap: 14px !important;
    height: 100% !important; padding: 20px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 22px !important;
    background: linear-gradient(158deg, color-mix(in srgb, var(--primary) 5%, var(--bg-card)), var(--bg-card) 48%) !important;
    box-shadow: var(--sx-d-shadow) !important;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border-subtle)) !important;
    box-shadow: var(--sx-d-shadow-hover) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event > * { min-width: 0 !important; box-sizing: border-box !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-event-logo {
    grid-column: 1 !important; grid-row: 1 !important;
    display: grid !important; place-items: center !important;
    width: 52px !important; height: 52px !important; flex: 0 0 auto !important;
    overflow: hidden !important; border: 1px solid var(--border-subtle) !important;
    border-radius: 15px !important; background: #fff !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-event-logo img { width: 100% !important; height: 100% !important; padding: 4px !important; box-sizing: border-box !important; object-fit: contain !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-date {
    grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important;
    display: flex !important; align-items: center !important; gap: 8px !important; width: auto !important;
    font-size: 13px !important; font-weight: 750 !important; color: var(--primary) !important; text-transform: none !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-date svg { width: 16px !important; height: 16px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event > div:not([class]),
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event :is(.sx-parent-attendance, .sx-squad, .sx-squad-empty, .sx-training-parent-note, .sx-parent-training-weather-row, .sx-saved-absence) { grid-column: 1 / -1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event > div:not([class]) { display: grid !important; gap: 10px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event h3 { margin: 0 !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 750 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-when { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-wash-duty {
    display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important;
    padding: 12px 14px !important; border-radius: 14px !important;
    background: rgba(139, 92, 246, .10) !important; color: #5b21b6 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-wash-duty svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-wash-duty span { display: grid !important; gap: 2px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-wash-duty small { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; opacity: .8; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-wash-duty strong { font-size: 13px !important; font-weight: 650 !important; line-height: 1.35 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-attendance {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important; margin: 0 !important; padding: 5px !important;
    border-radius: 16px !important; background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-attendance button {
    min-height: 42px !important; padding: 8px 6px !important;
    border: 0 !important; border-radius: 12px !important; background: transparent !important;
    color: var(--text-muted) !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: none !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-attendance button.is-active.yes { background: rgba(16, 185, 129, .16) !important; color: #047857 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-attendance button.is-active.maybe { background: rgba(245, 158, 11, .18) !important; color: #a16207 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-attendance button.is-active.no { background: rgba(244, 63, 94, .16) !important; color: #be123c !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event :is(.sx-squad, .sx-squad-empty) { margin-top: auto !important; align-self: end !important; }
}
[data-theme="dark"] .sx-parent-event { background: linear-gradient(158deg, color-mix(in srgb, var(--primary) 12%, var(--bg-card)), var(--bg-card) 52%) !important; border-color: rgba(148, 163, 184, .14) !important; }
[data-theme="dark"] .sx-wash-duty { background: rgba(139, 92, 246, .18) !important; color: #ddd6fe !important; }
[data-theme="dark"] .sx-parent-event .sx-parent-event-logo { background: rgba(255, 255, 255, .92) !important; }

/* Parent training card: the weather band gets the same scrim-and-glass reading
   as the planning cards, and the pieces are ordered explicitly — the phone
   grid placed the band above the title once the card became a two-column
   layout. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-event-logo { order: 0 !important; grid-row: auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-date { order: 1 !important; grid-row: auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event > div:not([class]) { order: 2 !important; grid-row: auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-training-weather-row { order: 3 !important; grid-row: auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-parent-attendance { order: 4 !important; grid-row: auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event .sx-training-parent-note { order: 5 !important; grid-row: auto !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-event :is(.sx-squad, .sx-squad-empty) { order: 6 !important; grid-row: auto !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row {
    position: relative !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 14px !important; min-height: 88px !important;
    margin: 0 !important; padding: 14px 16px !important;
    border: 0 !important; border-radius: 16px !important;
    overflow: hidden !important; isolation: isolate !important; color: #fff !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(4, 12, 28, .55), rgba(4, 12, 28, .22) 55%, rgba(4, 12, 28, .30));
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row > * { position: relative; z-index: 2; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row .sx-weather-scene { z-index: 1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-place {
    display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important;
    padding: 7px 12px !important; border-radius: 999px !important;
    background: rgba(6, 14, 30, .28) !important;
    -webkit-backdrop-filter: blur(9px) !important; backdrop-filter: blur(9px) !important;
    color: #fff !important; font-size: 13px !important; font-weight: 650 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-place > span:last-child { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-place :is(svg, .sx-ios-icon) { width: 16px !important; height: 16px !important; color: #fff !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row .sx-mobile-weather {
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    flex: 0 0 auto !important; min-width: 140px !important; gap: 10px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 15px !important;
    background: rgba(6, 14, 30, .30) !important;
    -webkit-backdrop-filter: blur(9px) saturate(140%) !important; backdrop-filter: blur(9px) saturate(140%) !important;
    color: #fff !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row .sx-mobile-weather > span { display: grid !important; gap: 1px !important; justify-items: end !important; text-align: right !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row .sx-mobile-weather strong { font-size: 24px !important; font-weight: 800 !important; line-height: 1 !important; color: #fff !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row .sx-mobile-weather small { max-width: none !important; white-space: nowrap !important; font-size: 11.5px !important; color: #fff !important; opacity: .95 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-weather-row .sx-weather-icon { width: 30px !important; height: 30px !important; color: #fff !important; }
}

/* ===========================================================================
 * Ouderportaal dashboard.
 * The two columns were the wrong way round: the announcements — the column
 * with the photos and the text — were pinned to the 300px rail while the two
 * count tiles had 838px to spread across. Announcements take the wide column
 * now, the counts became compact tiles in a sticky rail, and the quick links
 * use the phone app's coloured icon tiles.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr) !important;
    gap: 20px !important; align-items: start !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-dashboard > .sx-announcement-list { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-dashboard > .sx-parent-kpis {
    grid-column: 2 !important; grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    position: sticky !important; top: 96px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-announcement-list > article { overflow: hidden !important; border-radius: 20px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-announcement-list img { width: 100% !important; max-height: 280px !important; object-fit: cover !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-announcement-list article > div { padding: 20px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-announcement-list h3 { font-size: 17px !important; line-height: 1.35 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-announcement-list p { font-size: 14px !important; line-height: 1.6 !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks {
    padding: 20px 22px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 22px !important;
    background: var(--bg-card) !important; box-shadow: var(--sx-d-shadow) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-head small { display: block !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--primary) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-head strong { display: block !important; margin-top: 2px !important; font-size: 17px !important; font-weight: 780 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
    gap: 14px !important; margin-top: 14px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid > button {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important; gap: 14px !important;
    min-height: 86px !important; padding: 16px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 18px !important;
    background: var(--bg-card) !important; text-align: left !important;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid > button:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border-subtle)) !important;
    box-shadow: var(--sx-d-shadow-hover) !important;
  }
  /* The phone app's quick-pick tiles: a filled gradient square per destination. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quick-icon {
    display: grid !important; place-items: center !important;
    width: 52px !important; height: 52px !important; border-radius: 17px !important;
    background: linear-gradient(150deg, #60a5fa, #3b82f6 55%, #4f46e5) !important;
    box-shadow: 0 10px 22px rgba(59, 130, 246, .30), inset 0 1px rgba(255, 255, 255, .35) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quick-icon svg { width: 24px !important; height: 24px !important; color: #fff !important; stroke: #fff !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid > button.is-standings .sx-parent-quick-icon { background: linear-gradient(150deg, #34d399, #10b981 55%, #059669) !important; box-shadow: 0 10px 22px rgba(16, 185, 129, .28), inset 0 1px rgba(255, 255, 255, .35) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid > button.is-training .sx-parent-quick-icon { background: linear-gradient(150deg, #fbbf24, #f59e0b 55%, #d97706) !important; box-shadow: 0 10px 22px rgba(245, 158, 11, .28), inset 0 1px rgba(255, 255, 255, .35) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid > button.is-matches .sx-parent-quick-icon { background: linear-gradient(150deg, #818cf8, #6366f1 55%, #4338ca) !important; box-shadow: 0 10px 22px rgba(99, 102, 241, .28), inset 0 1px rgba(255, 255, 255, .35) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid > button > span:nth-child(2) { display: grid !important; gap: 3px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid strong { font-size: 15.5px !important; font-weight: 750 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quicklinks-grid small { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px !important; color: var(--text-muted) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-quick-position { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 14px !important; font-weight: 800 !important; color: var(--primary) !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-kpis :is(article, button) {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important; gap: 6px 14px !important;
    min-height: 92px !important; padding: 18px !important; border-radius: 18px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-kpis svg {
    grid-row: 1 / 3 !important; width: 46px !important; height: 46px !important;
    box-sizing: border-box !important; padding: 12px !important; border-radius: 15px !important;
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 8%, transparent)) !important;
    color: var(--primary) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-kpis strong { font-size: 28px !important; line-height: 1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-kpis span { font-size: 12.5px !important; color: var(--text-muted) !important; }
}

/* ===========================================================================
 * Form controls, one language for the whole workspace.
 * Inputs were inheriting three different legacy styles depending on the page.
 * Search fields that live inside a pill keep their borderless look — they are
 * styled by the pill around them — and controls with a deliberate width (the
 * tactics score boxes) keep it, right below.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea),
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-modal, .modal-card) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    appearance: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--bg-subtle) 70%, var(--bg-card)) !important;
    color: var(--text-main) !important;
    font-family: inherit !important; font-size: 14px !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-view, .sx-modal, .modal-card) select {
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--primary) 26%, var(--border-subtle)) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-view, .sx-modal, .modal-card) :is(input, select, textarea):focus,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-view, .sx-modal, .modal-card) :is(input, select, textarea):focus-visible {
    outline: 0 !important;
    border-color: var(--primary) !important;
    background: var(--bg-card) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view :is(input, select, textarea):disabled { opacity: .6 !important; cursor: not-allowed !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view textarea { min-height: 120px !important; line-height: 1.55 !important; resize: vertical !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view ::placeholder { color: color-mix(in srgb, var(--text-muted) 75%, transparent) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-view :is(.form-label, label.meta > span) {
    font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .05em !important;
    text-transform: uppercase !important; color: var(--text-muted) !important;
  }

  /* Fields that are part of a pill keep the pill's own look. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-dem-search, .dem71-search, .sx-search, .sx-table-search, .plan-ex-filters label, .sx-dem-search-wrap label) input {
    min-height: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
  }
  /* Controls with a deliberate size keep it. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-score input { width: 64px !important; text-align: center !important; font-weight: 800 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-standalone-lineup select { width: auto !important; min-width: 190px !important; min-height: 38px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-topbar :is(select, input) { min-height: 38px !important; }

  /* Profile page: avatar as its own panel, fields in two columns. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-grid { grid-template-columns: 260px minmax(0, 1fr) !important; gap: 24px !important; align-items: start !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-avatar-block {
    display: grid !important; justify-items: center !important; gap: 12px !important;
    padding: 18px !important; border: 1px solid var(--border-subtle) !important;
    border-radius: 20px !important; background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.profile-avatar-wrap, .profile-avatar-wrap img) { width: 104px !important; height: 104px !important; overflow: hidden !important; border-radius: 50% !important; object-fit: cover !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-avatar-actions { display: grid !important; width: 100% !important; gap: 8px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-avatar-actions .btn { width: 100% !important; min-height: 40px !important; border-radius: 12px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-fields .row.g-3 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
    gap: 16px !important; align-items: start !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-fields .row.g-3 > * { flex: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-fields .row.g-3 > *:has(textarea) { grid-column: 1 / -1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-section-title { margin: 0 0 4px !important; font-size: 15.5px !important; font-weight: 780 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-fields hr { margin: 22px 0 18px !important; border: 0 !important; border-top: 1px solid var(--border-subtle) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .profile-fields .d-flex.justify-content-end {
    gap: 10px !important; margin-top: 18px !important; padding-top: 16px !important;
    border-top: 1px solid var(--border-subtle) !important;
  }
}
[data-theme="dark"] .sx-view :is(input, select, textarea) { background: color-mix(in srgb, var(--text-main) 6%, transparent) !important; box-shadow: none !important; }
[data-theme="dark"] .profile-avatar-block { background: color-mix(in srgb, var(--text-main) 6%, transparent) !important; border-color: rgba(148, 163, 184, .14) !important; }

/* ===========================================================================
 * Dashboard: quick actions as the phone app's filled tiles, and the chart
 * controls on one line (Week/Maand sat stacked because the segmented control
 * was allowed to wrap inside a narrow controls box).
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
    gap: 16px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important; gap: 14px !important;
    min-height: 92px !important; padding: 18px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 20px !important;
    background: var(--bg-card) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
    text-align: left !important;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-subtle)) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .10) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action-ico {
    display: grid !important; place-items: center !important;
    width: 54px !important; height: 54px !important; padding: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(150deg, #60a5fa, #3b82f6 55%, #4f46e5) !important;
    box-shadow: 0 10px 22px rgba(59, 130, 246, .28), inset 0 1px rgba(255, 255, 255, .35) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action-ico svg { width: 25px !important; height: 25px !important; color: #fff !important; stroke: #fff !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action.tone-blue .sx-dash-action-ico { background: linear-gradient(150deg, #60a5fa, #3b82f6 55%, #4f46e5) !important; box-shadow: 0 10px 22px rgba(59, 130, 246, .28), inset 0 1px rgba(255, 255, 255, .35) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action:is(.tone-green, .tone-emerald) .sx-dash-action-ico { background: linear-gradient(150deg, #34d399, #10b981 55%, #059669) !important; box-shadow: 0 10px 22px rgba(16, 185, 129, .28), inset 0 1px rgba(255, 255, 255, .35) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action:is(.tone-purple, .tone-indigo, .tone-violet) .sx-dash-action-ico { background: linear-gradient(150deg, #a78bfa, #7c3aed 55%, #5b21b6) !important; box-shadow: 0 10px 22px rgba(124, 58, 237, .28), inset 0 1px rgba(255, 255, 255, .35) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action.tone-amber .sx-dash-action-ico { background: linear-gradient(150deg, #fbbf24, #f59e0b 55%, #d97706) !important; box-shadow: 0 10px 22px rgba(245, 158, 11, .28), inset 0 1px rgba(255, 255, 255, .35) !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action strong { font-size: 16px !important; font-weight: 750 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-dash-action small { font-size: 12.5px !important; color: var(--text-muted) !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-charts-head { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 16px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-charts-controls { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 12px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-charts-controls .segmented { display: inline-flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-charts-controls .seg-btn { white-space: nowrap !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-charts-limit { width: auto !important; min-width: 150px !important; flex: 0 0 auto !important; }
}

/* Standings read as a real table on desktop: bigger rows and crests, and the
   own team is marked by the row rather than by a subtle text colour. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > summary { min-height: 66px !important; font-size: 16px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-head { padding-block: 14px !important; font-size: 12px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row .dem71-logo { width: 40px !important; height: 40px !important; padding: 4px !important; border-radius: 12px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-club { gap: 14px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-club b { font-size: 16px !important; font-weight: 700 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-pos { font-size: 15px !important; font-weight: 800 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row > summary > strong { font-size: 18px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-standing-row.is-own > summary { background: color-mix(in srgb, var(--primary) 9%, transparent) !important; }
}

/* ===========================================================================
 * Teampagina.
 * The pane was a single stack in which "kies een team", "seizoen", "nieuw team"
 * and the roster all had equal weight, so nothing read as a group. The three
 * settings sit in one row of equal panels, and creating a team is one panel of
 * its own: the intro row and the form joined into a single block. Elements are
 * addressed by the control they contain — they are all plain divs, so
 * :nth-of-type() counted the wrong things.
 * ========================================================================= */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important; align-items: start !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .form-group:has(#team-select) { order: 1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .form-group:has(#season-select) { order: 2 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .muted {
    order: 3 !important;
    display: grid !important; align-content: center !important; gap: 4px !important;
    min-height: 100% !important; font-size: 13px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .muted strong { font-size: 16px !important; color: var(--text-main) !important; }
  /* Creating a team: intro row and form as one panel. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .sx-inline-primary:has(#team-add) {
    order: 4 !important; grid-column: 1 / -1 !important;
    margin-bottom: -16px !important;
    border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important;
    background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane .form-inline {
    order: 5 !important; grid-column: 1 / -1 !important;
    border-top: 0 !important; border-radius: 0 0 16px 16px !important;
    background: var(--bg-subtle) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane .form-inline > .btn { grid-column: 1 / -1 !important; justify-self: end !important; min-width: 180px !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane > .card > .card-body > .card { order: 6 !important; grid-column: 1 / -1 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .team-tab-pane .form-inline input[type="hidden"] { display: none !important; }
}

/* When the UI layer animates dialogs with GSAP it owns the entrance; the CSS
   keyframe would otherwise play the same move a second time. */
html.sx-gsap-dialogs .modal-card,
html.sx-gsap-dialogs .sx-modal,
html.sx-gsap-dialogs .modal-backdrop { animation: none !important; }

/* The page badge in the topbar is a filled tile in the app's blue, matching
   the quick-action tiles, instead of a flat outline glyph. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-page-ico {
    width: 40px !important; height: 40px !important; border-radius: 14px !important;
    background: linear-gradient(150deg, #60a5fa, #3b82f6 58%, #4f46e5) !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, .30), inset 0 1px rgba(255, 255, 255, .4) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-page-ico svg { width: 20px !important; height: 20px !important; color: #fff !important; stroke: #fff !important; stroke-width: 1.9 !important; }
}


/* v92: desktop dark theme must paint the complete viewport, including the
   document/root behind the app shell. Kept desktop-only so mobile is untouched. */
@media (min-width:1025px) {
  html[data-theme="dark"]:not(.sx-phone-webapp):not(.sx-tablet-webapp),
  html[data-theme="dark"]:not(.sx-phone-webapp):not(.sx-tablet-webapp) body,
  body[data-theme="dark"]:not(.sx-phone-webapp):not(.sx-tablet-webapp),
  [data-theme="dark"] .sx-layout,
  [data-theme="dark"] .sx-main,
  [data-theme="dark"] .sx-view {
    background-color:#0a0f1e !important;
  }
  html[data-theme="dark"]:not(.sx-phone-webapp):not(.sx-tablet-webapp) body {
    min-height:100vh;
  }
}

/* ------------------------------------------------------------------ *
 * v109 — wedstrijdenraster ouderomgeving op desktop
 *
 * 1. De "Aankomende wedstrijd"-vlag hing buiten de kaart. shell.css zet
 *    left:50% met transform:translateX(-50%); de override hierboven (regel
 *    ~1248) zet daarna left:18px maar liet de transform staan. Gemeten op
 *    1440px: kaart left 320, vlag left 250 - 70px naast de kaart, en 11px
 *    erboven. Met transform:none staat de vlag op left 338, dus netjes
 *    binnen de kaart.
 *
 * 2. De kolommen waren ongelijk hoog: .sx-parent-match-grid stond op
 *    align-items:start en de wrap op align-self:start. Gemeten rij 1:
 *    1081 / 989 / 1004 px. Met stretch en een kaart die de wrap vult:
 *    1081 / 1081 / 1081.
 * ------------------------------------------------------------------ */
@media (min-width: 821px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-match-next-label { transform: none !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-grid { align-items: stretch !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-wrap {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-wrap > .sx-parent-event {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }
}

/* ------------------------------------------------------------------ *
 * v109 — gespeelde wedstrijdkaart op desktop
 *
 * De wedstrijdmomenten waren op desktop volledig ongestyled: gemeten op
 * de kaart van de gespeelde wedstrijd stond .sx-parent-match-moments op
 * display:block, padding 0, geen rand en geen achtergrond. Twee oorzaken:
 * de opmaak stond alleen achter html.sx-phone-webapp, en de --sx-ios-*
 * tokens die die opmaak gebruikt zijn op desktop leeg (alle acht).
 *
 * Hieronder staan dezelfde regels als op de telefoon, met de tokens op de
 * desktopvarianten gezet zodat licht en donker meelopen. De twee-koloms
 * variant van de momentenlijst is bewust weggelaten: in een kaart van
 * ~300px breed is dat te smal.
 * ------------------------------------------------------------------ */
@media (min-width: 821px) {
  /* De mobiele regels gebruiken --sx-ios-* tokens; die zijn op desktop leeg
     (gemeten: alle acht leeg), waardoor het blok kleurloos werd. Hier worden ze
     op de eigen desktoptokens gezet, zodat licht en donker meelopen. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(.sx-parent-match-wrap, .sx-parent-overview-match, .sx-mobile-fixture-card){
    --sx-ios-label: var(--text-main);
    --sx-ios-secondary: var(--text-muted);
    --sx-ios-tertiary: var(--text-muted);
    --sx-ios-separator: var(--border-subtle);
    --sx-ios-surface: var(--bg-card);
    --sx-ios-fill: var(--bg-subtle);
    --sx-ios-blue: var(--primary);
    --sx-ios-green: #16a34a;
  }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments{margin-top:13px;
  padding-top:12px;
  border-top:1px solid color-mix(in srgb,var(--sx-ios-separator) 58%,transparent);
  color:var(--sx-ios-label);}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments>header{display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 1px 8px;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments>header>strong{color:var(--sx-ios-label)!important;
  font-size:11.5px;
  line-height:1.2;
  font-weight:790;
  letter-spacing:-.018em;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments>header>small{color:var(--sx-ios-tertiary)!important;
  font-size:8.5px;
  line-height:1.2;
  font-weight:650;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moment-list{display:grid;gap:6px}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment{display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:8px 9px;
  border:1px solid color-mix(in srgb,var(--sx-ios-separator) 48%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--sx-ios-fill) 46%,transparent);}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-icon{display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:10px;
  background:color-mix(in srgb,var(--sx-ios-surface) 82%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sx-ios-separator) 42%,transparent);}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment.is-goal .sx-parent-moment-icon{background:color-mix(in srgb,var(--sx-ios-green) 11%,var(--sx-ios-surface));}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-ball{font-size:16px;line-height:1;filter:none}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-card{display:block;
  width:12px;
  height:17px;
  border-radius:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 0 0 1px rgba(0,0,0,.08);}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment.is-yellow .sx-parent-moment-card{background:#ffd60a}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment.is-red .sx-parent-moment-card{background:#ff453a}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-copy{display:block;min-width:0}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-copy>strong{display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--sx-ios-label)!important;
  font-size:11px;
  line-height:1.2;
  font-weight:770;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-copy>small{display:block;
  margin-top:1px;
  color:var(--sx-ios-tertiary)!important;
  font-size:8px;
  line-height:1.2;
  font-weight:620;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-copy>em{display:flex;
  flex-wrap:wrap;
  gap:4px 5px;
  margin-top:5px;
  font-style:normal;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-detail,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-assist,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-note{display:inline-flex;
  align-items:center;
  min-height:19px;
  max-width:100%;
  padding:3px 6px;
  border-radius:999px;
  background:color-mix(in srgb,var(--sx-ios-fill) 70%,transparent);
  color:var(--sx-ios-secondary)!important;
  font-size:8px;
  line-height:1.15;
  font-weight:680;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment.is-goal .sx-parent-moment-detail{background:color-mix(in srgb,var(--sx-ios-green) 10%,transparent);
  color:color-mix(in srgb,var(--sx-ios-green) 76%,var(--sx-ios-label))!important;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-assist{background:color-mix(in srgb,var(--sx-ios-blue) 10%,transparent);
  color:var(--sx-ios-blue)!important;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-minute{align-self:start;
  min-width:28px;
  padding-top:2px;
  color:var(--sx-ios-secondary)!important;
  font-size:10px;
  line-height:1.2;
  font-weight:830;
  font-variant-numeric:tabular-nums;
  text-align:right;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-overview-match[class*="sx-result-"] .sx-parent-match-moments,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-overview-match[class*="sx-result-"] .sx-parent-match-moments strong,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-overview-match[class*="sx-result-"] .sx-parent-match-moments small,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-overview-match[class*="sx-result-"] .sx-parent-match-moments em,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-overview-match[class*="sx-result-"] .sx-parent-match-moments b{color:var(--sx-result-ink)!important;}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-red-ball-svg,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-moment-ball.is-against svg{width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:#dc2626;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
     existing always-visible timeline exactly as before. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-ios .sx-parent-match-moments-accordion{
    margin-top:14px!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--sx-ios-separator) 48%,transparent)!important;
    border-radius:17px!important;
    background:color-mix(in srgb,var(--sx-ios-fill) 40%,transparent)!important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-toggle{
    width:100%!important;
    min-height:52px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:10px 12px!important;
    border:0!important;
    background:transparent!important;
    color:var(--sx-ios-label)!important;
    text-align:left!important;
    font-family:inherit!important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-toggle>span{display:grid!important;gap:2px!important}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-toggle strong{font-size:12px!important;font-weight:700!important;letter-spacing:-.015em!important}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-toggle small{font-size:9px!important;font-weight:550!important;color:var(--sx-ios-secondary)!important}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-toggle>.sx-ios-icon{
    width:27px!important;height:27px!important;padding:7px!important;flex:0 0 27px!important;
    border-radius:50%!important;background:color-mix(in srgb,var(--sx-ios-surface) 80%,transparent)!important;
    color:var(--sx-ios-secondary)!important;
    transition:transform .32s cubic-bezier(.2,.85,.2,1),background .2s ease,color .2s ease!important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-accordion.is-open .sx-parent-match-moments-toggle>.sx-ios-icon{
    transform:rotate(180deg)!important;color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 11%,transparent)!important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-panel{
    display:grid!important;
    grid-template-rows:0fr!important;
    opacity:0!important;
    transition:grid-template-rows .34s cubic-bezier(.2,.82,.2,1),opacity .22s ease!important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-panel>.sx-parent-match-moment-list{
    min-height:0!important;overflow:hidden!important;padding:0 10px!important;
    transition:padding .34s cubic-bezier(.2,.82,.2,1)!important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-accordion.is-open .sx-parent-match-moments-panel{grid-template-rows:1fr!important;opacity:1!important}
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-moments-accordion.is-open .sx-parent-match-moments-panel>.sx-parent-match-moment-list{padding:0 10px 10px!important}
}
}

/* ------------------------------------------------------------------ *
 * v110 — één Inter-stack op desktop
 *
 * Gemeten in de ouderomgeving op 1440px: 210 elementen gebruikten
 * Inter, "Segoe UI Variable", ... en 5 elementen (de koppen) een tweede
 * stack met "Inter Var" voorop, uit rsms.me/inter/inter.css. Beide zijn
 * Inter, maar Inter Var rendert gewichten net anders, waardoor koppen
 * afwijken van de rest. Hier loopt alles op dezelfde stack.
 * ------------------------------------------------------------------ */
@media (min-width: 821px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp),
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) body,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .sx-page-title, .card-title) {
    font-family: "Inter", "Segoe UI Variable", "SF Pro Display", "Segoe UI", sans-serif !important;
  }
}

/* v110 — "Wedstrijdverslag beschikbaar" hoort niet in de gespeelde kaart in het
   wedstrijdenraster op desktop; het verslag staat daar al bij Mededelingen. */
@media (min-width: 821px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-wrap .sx-parent-report-bottom,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-wrap .sx-parent-report-link { display: none !important; }
}

/* ------------------------------------------------------------------ *
 * v111 — drie losse desktopcorrecties in de ouderomgeving
 * ------------------------------------------------------------------ */
@media (min-width: 821px) {
  /* 1. "Ander DEM-team zoeken" duwde de standentabel omlaag: de <details>
        stond op position:static met overflow:hidden, dus het resultatenpaneel
        liep gewoon mee in de flow. Gemeten op 1440px groeide het blok van 73
        naar 143px en zakte de standenkaart mee. Nu zweeft het paneel eroverheen
        en blijft de kaart eronder op zijn plek (gemeten top 398 in beide
        gevallen). */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-search-accordion {
    position: relative !important;
    overflow: visible !important;
    z-index: 40 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-search-accordion[open] { z-index: 60 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .dem71-team-search-accordion > .dem71-team-search-body {
    position: absolute !important;
    top: calc(100% - 4px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    max-height: min(60vh, 480px) !important;
    overflow: auto !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    background: var(--bg-card) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .16) !important;
  }

  /* 2. Het trainingstijdenblok kreeg de basisregel met
        grid-template-columns:34px minmax(0,1fr), bedoeld voor een icoonkolom.
        De JS bouwt dat icoon niet, dus het enige kind belandde in die 34px en
        de tekst viel in een smalle toren uiteen. Gemeten: kolommen "34px 0px",
        breedte 63px, hoogte 57px. Na de wijziging: één kolom, breedte 230px,
        hoogte 54px, tekst op één regel. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-times {
    grid-template-columns: minmax(0, auto) !important;
    width: max-content !important;
    max-width: 320px !important;
    margin: 0 12px 0 auto !important;
    padding: 9px 14px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border-subtle)) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-card)) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-times-icon { display: none !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-times > div { display: grid !important; gap: 2px !important; min-width: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-times small {
    font-size: 10px !important; font-weight: 750 !important;
    letter-spacing: .06em !important; text-transform: uppercase !important;
    color: var(--primary) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-training-times strong {
    font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important;
    white-space: nowrap !important; color: var(--text-main) !important;
  }

  /* 3. De spelersfoto en de datum stonden dubbel in de wedstrijdkaart: de
        samenvatting bovenaan toont datum en clublogo's al, en daaronder kwam
        de oorspronkelijke .sx-parent-event-logo met .sx-parent-date opnieuw.
        Op de telefoon zijn die twee al verborgen (shell.css); hier gebeurt
        hetzelfde. De titel en de chips eronder blijven staan. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-wrap .sx-parent-match-ios > .sx-parent-event-logo,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-parent-match-wrap .sx-parent-match-ios > .sx-parent-date { display: none !important; }
}

/* v122 — coach toevoegen/bewerken blijft op desktop bewust één kolom. */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) #coach-modal-form {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) #coach-modal-form > * {
    grid-column:1!important;
  }
}