/* v96 — player development / seasonal football card */
.sx-player-tabs{position:sticky;top:86px;z-index:2;display:flex;gap:6px;padding:10px 22px;border-bottom:1px solid rgba(148,163,184,.16);background:color-mix(in srgb,var(--bg-card) 94%,transparent);backdrop-filter:blur(16px)}
.sx-player-tabs button{min-height:36px;padding:7px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-muted);font-size:12px;font-weight:800;cursor:pointer}.sx-player-tabs button:hover{background:rgba(148,163,184,.08);color:var(--text-main)}.sx-player-tabs button.is-active{border-color:color-mix(in srgb,var(--primary) 32%,var(--border-subtle));background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.sx-tab-hidden{display:none!important}.sx-player-input,.sx-player-field .sx-player-input{width:100%;box-sizing:border-box;min-height:42px;padding:9px 11px;border:1px solid var(--border-subtle)!important;border-radius:11px!important;outline:0!important;background:var(--input-bg,var(--bg-card))!important;color:var(--text-main)!important;font:inherit!important;font-size:13px!important;font-weight:500!important;appearance:auto}.sx-player-input:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)!important}.sx-player-input[type=file]{padding:7px}.sx-player-input::file-selector-button{margin-right:10px;padding:7px 10px;border:0;border-radius:8px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-weight:800;cursor:pointer}
.sx-warning-explainer{grid-column:1/-1;display:flex;gap:10px;padding:12px 13px;border:1px solid rgba(245,158,11,.22);border-radius:13px;background:rgba(245,158,11,.07);color:var(--text-muted)}.sx-warning-explainer>span svg{width:18px;height:18px;color:#d97706}.sx-warning-explainer strong{display:block;color:var(--text-main);font-size:12px}.sx-warning-explainer p{margin:3px 0 0;font-size:11px;line-height:1.45}
.sx-evaluation-section{padding-top:16px}.sx-eval-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:18px;padding:17px;border:1px solid var(--border-subtle);border-radius:18px;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--primary) 10%,transparent),transparent 42%),color-mix(in srgb,var(--bg-card) 97%,white 3%)}.sx-eval-intro>div:first-child>span{display:block;color:var(--primary);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.sx-eval-intro h3{margin:4px 0!important;font-size:18px!important}.sx-eval-intro p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.5}.sx-eval-intro>div:first-child>strong{display:block;margin-top:10px;font-size:12px;line-height:1.45}.sx-eval-season{display:grid;grid-template-columns:1fr;gap:9px}.sx-eval-season label,.sx-eval-summary>label{display:flex;flex-direction:column;gap:5px;color:var(--text-muted);font-size:10px;font-weight:800}.sx-eval-season select,.sx-eval-season input,.sx-eval-summary textarea{width:100%;box-sizing:border-box;min-height:40px;padding:8px 10px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--input-bg,var(--bg-card));color:var(--text-main);font:inherit;font-size:12px;outline:0}.sx-eval-season select:focus,.sx-eval-season input:focus,.sx-eval-summary textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}
.sx-eval-group,.sx-eval-summary,.sx-eval-optional{margin-top:14px;border:1px solid var(--border-subtle);border-radius:17px;background:var(--bg-card);overflow:hidden}.sx-eval-group>h4,.sx-eval-summary>h4{margin:0;padding:12px 15px;border-bottom:1px solid var(--border-subtle);background:color-mix(in srgb,var(--bg-card) 95%,var(--primary) 5%);font-size:12px}.sx-eval-row{padding:12px 15px;border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 72%,transparent)}.sx-eval-row:last-child{border-bottom:0}.sx-eval-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.sx-eval-row-head>span{display:flex;align-items:center;gap:7px;color:var(--text-main);font-size:12px;font-weight:750}.sx-eval-row-head em{padding:2px 6px;border-radius:99px;background:rgba(148,163,184,.1);color:var(--text-muted);font-size:9px;font-style:normal;font-weight:800}.sx-eval-row-head strong{font-size:11px}.sx-eval-control{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.sx-eval-control>input[type=range]{grid-column:2;width:100%;height:7px;margin:0;appearance:none;border-radius:99px;background:linear-gradient(90deg,#ef4444 0%,#f97316 25%,#eab308 50%,#84cc16 75%,#16a34a 100%);outline:none}.sx-eval-control>input[type=range]::-webkit-slider-thumb{width:20px;height:20px;appearance:none;border:3px solid var(--bg-card);border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.28);cursor:pointer}.sx-eval-control>input[type=range]::-moz-range-thumb{width:15px;height:15px;border:3px solid var(--bg-card);border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.28);cursor:pointer}.sx-eval-row.is-disabled .sx-eval-control>input[type=range]{filter:grayscale(1);opacity:.28}.sx-eval-toggle{grid-row:1/3;display:flex;align-items:center;gap:5px;color:var(--text-muted);font-size:9px;font-weight:800;white-space:nowrap}.sx-eval-toggle input{accent-color:var(--primary)}.sx-eval-scale{grid-column:2;display:flex;justify-content:space-between;color:var(--text-muted);font-size:8px;font-weight:800}.sx-eval-optional>summary{padding:12px 15px;cursor:pointer;color:var(--text-main);font-size:12px;font-weight:800;list-style:none}.sx-eval-optional>summary::-webkit-details-marker{display:none}.sx-eval-optional>summary:after{content:'+';float:right;color:var(--primary);font-size:16px}.sx-eval-optional[open]>summary:after{content:'−'}.sx-eval-optional[open]>summary{border-bottom:1px solid var(--border-subtle)}.sx-eval-summary{padding-bottom:13px}.sx-eval-summary>.sx-eval-row{padding-inline:15px}.sx-eval-summary>label{margin:12px 15px 0}.sx-eval-history{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:11px 13px;border-radius:12px;background:color-mix(in srgb,var(--primary) 7%,transparent);font-size:10px}.sx-eval-history span{color:var(--text-muted)}
.players-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:11px 13px;border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:11px;font-weight:700}.players-pagination>div{display:flex;align-items:center;gap:8px}.players-pagination strong{min-width:100px;text-align:center;color:var(--text-main);font-size:11px}.players-pagination button:disabled{opacity:.42;cursor:not-allowed}

/* v96 football player card modal */
.sx-player-stats-modal{width:min(940px,calc(100vw - 28px))}.sx-player-stats-body{overflow-y:auto}.sx-pc-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:15px}.sx-pc-toolbar label{display:flex;min-width:210px;flex-direction:column;gap:5px;color:var(--text-muted);font-size:10px;font-weight:850}.sx-pc-toolbar select{min-height:40px;padding:8px 10px;border:1px solid var(--border-subtle);border-radius:11px;background:var(--input-bg,var(--bg-card));color:var(--text-main);font-weight:700}.sx-pc-export{display:flex;gap:6px}.sx-pc-export button{min-height:36px;padding:7px 11px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-card);color:var(--text-main);font-size:10px;font-weight:900;cursor:pointer}.sx-pc-export button:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border-subtle));color:var(--primary)}.sx-pc-export button:disabled{opacity:.45}
.sx-football-player-card{position:relative;overflow:hidden;padding:22px 24px 18px;border:1px solid rgba(255,255,255,.2);border-radius:25px;background:radial-gradient(circle at 82% 14%,rgba(110,175,245,.38),transparent 30%),linear-gradient(145deg,#0a1a31 0%,#21477e 48%,#0d1b30 100%);box-shadow:0 22px 52px rgba(2,6,23,.2);color:#fff}.sx-football-player-card:before{content:'';position:absolute;inset:-80px auto auto -40px;width:430px;height:220px;border:46px solid rgba(255,255,255,.045);border-radius:50%;transform:rotate(-10deg)}.sx-fpc-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}.sx-fpc-club-logo{position:absolute;left:50%;top:2px;display:grid;width:54px;height:54px;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.46);border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(2,6,23,.14);transform:translateX(-50%)}.sx-fpc-club-logo img{width:100%;height:100%;object-fit:cover}.sx-fpc-rating strong{display:block;font-size:68px;line-height:.9;font-weight:950;letter-spacing:-.06em}.sx-fpc-rating span{display:block;margin-top:7px;color:#b7c8e4;font-size:9px;font-weight:900;letter-spacing:.14em}.sx-fpc-avatar{display:grid;width:132px;height:132px;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.12)}.sx-fpc-avatar img{width:100%;height:100%;object-fit:cover}.sx-fpc-avatar span{font-size:42px;font-weight:950}.sx-fpc-name{position:relative;z-index:1;margin-top:8px;text-align:center}.sx-fpc-name h3{margin:0;font-size:31px;line-height:1.1;letter-spacing:-.035em}.sx-fpc-name p{margin:5px 0 0;color:#b7c8e4;font-size:11px;font-weight:700}.sx-fpc-gradient{height:6px;margin:18px 0 14px;border-radius:99px;background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#84cc16,#16a34a)}.sx-fpc-core{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.sx-fpc-core span{display:grid;min-height:66px;place-items:center;padding:8px;border-radius:13px;background:rgba(255,255,255,.09)}.sx-fpc-core small{color:#9fb2d2;font-size:8px;font-weight:900;letter-spacing:.12em}.sx-fpc-core b{font-size:22px;line-height:1;font-weight:950}.sx-pc-season-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:20px 2px 8px}.sx-pc-season-title span,.sx-pc-evaluation header span{display:block;color:var(--primary);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.sx-pc-season-title h3,.sx-pc-evaluation h3{margin:3px 0 0;font-size:16px}.sx-pc-season-title p{margin:0;color:var(--text-muted);font-size:10px}.sx-player-metrics strong i{font-size:10px;font-style:normal;font-weight:800;color:var(--text-muted)}.sx-pc-delta{display:inline-flex;width:max-content;margin-top:4px;padding:2px 6px;border-radius:99px;font-size:8px!important;font-style:normal!important;font-weight:900!important}.sx-pc-delta.is-up{background:rgba(34,197,94,.11);color:#16a34a!important}.sx-pc-delta.is-down{background:rgba(239,68,68,.1);color:#dc2626!important}.sx-pc-delta.is-flat{background:rgba(148,163,184,.11);color:var(--text-muted)!important}.sx-pc-evaluation{margin-top:16px;padding:16px;border:1px solid var(--border-subtle);border-radius:19px;background:var(--bg-card)}.sx-pc-evaluation>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.sx-pc-evaluation>header>strong{font-size:11px}.sx-pc-summary-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:13px}.sx-pc-summary-scores>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px;padding:11px;border:1px solid var(--border-subtle);border-radius:13px;background:color-mix(in srgb,var(--bg-card) 97%,var(--primary) 3%)}.sx-pc-summary-scores span{color:var(--text-muted);font-size:9px;font-weight:800}.sx-pc-summary-scores b{grid-row:1/3;grid-column:2;font-size:24px}.sx-pc-skill-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:14px}.sx-pc-skill-bars>div>span{display:flex;justify-content:space-between;margin-bottom:5px;color:var(--text-muted);font-size:9px;font-weight:800}.sx-pc-skill-bars>div>span b{color:var(--text-main)}.sx-pc-skill-bars i{display:block;height:6px;overflow:hidden;border-radius:99px;background:rgba(148,163,184,.13)}.sx-pc-skill-bars em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ef4444 0%,#eab308 52%,#16a34a 100%)}.sx-pc-evaluation blockquote{margin:14px 0 0;padding:11px 13px;border-left:3px solid var(--primary);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--primary) 6%,transparent);color:var(--text-muted);font-size:11px;line-height:1.5}.sx-pc-history{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.sx-pc-history b{width:100%;font-size:10px}.sx-pc-history span{padding:5px 7px;border-radius:8px;background:rgba(148,163,184,.08);color:var(--text-muted);font-size:9px}
@media(max-width:700px){.sx-player-tabs{top:83px;overflow-x:auto;padding-inline:13px}.sx-player-tabs button{white-space:nowrap}.sx-eval-intro{grid-template-columns:1fr;padding:13px}.sx-eval-control{grid-template-columns:1fr}.sx-eval-control>input[type=range],.sx-eval-scale{grid-column:1}.sx-eval-toggle{grid-row:auto}.sx-eval-history{align-items:flex-start;flex-direction:column}.players-pagination{align-items:stretch;flex-direction:column}.players-pagination>div{justify-content:space-between}.sx-pc-toolbar{align-items:stretch;flex-direction:column}.sx-pc-toolbar label{min-width:0}.sx-pc-export{display:grid;grid-template-columns:repeat(3,1fr)}.sx-fpc-avatar{width:100px;height:100px}.sx-fpc-club-logo{top:1px;width:44px;height:44px}.sx-fpc-rating strong{font-size:55px}.sx-fpc-name h3{font-size:25px}.sx-fpc-core{grid-template-columns:repeat(3,1fr)}.sx-pc-season-title{align-items:flex-start;flex-direction:column}.sx-player-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.sx-pc-summary-scores{grid-template-columns:1fr}.sx-pc-skill-bars{grid-template-columns:1fr}}

/* v97 — mobile player edit + player card as app screens */
@media (max-width:700px){
  body:has(.v96-player-layer),body:has(.v96-stats-layer){overflow:hidden!important;overscroll-behavior:none!important}
  .v96-player-layer,.v96-stats-layer{
    inset:0!important;display:block!important;padding:0!important;overflow:hidden!important;
    background:var(--bg-card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .v96-player-layer>.sx-player-modal,.v96-stats-layer>.sx-player-stats-modal{
    position:absolute!important;inset:0!important;width:100vw!important;height:100dvh!important;
    max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;background:var(--bg-card)!important;
    animation:v97PlayerScreenIn 280ms cubic-bezier(.22,1,.36,1) both!important;
  }
  @keyframes v97PlayerScreenIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
  @media (prefers-reduced-motion:reduce){.v96-player-layer>.sx-player-modal,.v96-stats-layer>.sx-player-stats-modal{animation:none!important}}

  /* Speler aanpassen voelt als een echte app-pagina. */
  .v96-player-layer>.sx-player-modal{display:flex!important;flex-direction:column!important;overflow:hidden!important}
  .v96-player-layer .sx-player-modal-head{
    position:relative!important;top:auto!important;z-index:5!important;flex:0 0 auto!important;
    min-height:72px!important;padding:calc(12px + env(safe-area-inset-top)) 14px 11px!important;
    border-bottom:1px solid var(--border-subtle)!important;background:var(--bg-card)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .v96-player-layer .sx-player-modal-head h2{margin:2px 0 0!important;font-size:20px!important;letter-spacing:-.02em!important}
  .v96-player-layer .sx-player-modal-head p{display:none!important}
  .v96-player-layer .sx-player-modal-head .sx-icon-btn,
  .v96-stats-layer .sx-modal-head .sx-icon-btn{
    display:grid!important;width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;
    place-items:center!important;padding:0!important;border:1px solid var(--border-subtle)!important;border-radius:50%!important;
    background:var(--bg-subtle)!important;color:var(--text-main)!important;font-size:24px!important;line-height:1!important;
  }
  .v96-player-layer .sx-player-tabs{
    position:relative!important;top:auto!important;z-index:4!important;flex:0 0 auto!important;
    margin:0!important;padding:8px 12px!important;overflow-x:auto!important;border-bottom:1px solid var(--border-subtle)!important;
    background:var(--bg-card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;scrollbar-width:none!important;
  }
  .v96-player-layer .sx-player-tabs::-webkit-scrollbar{display:none!important}
  .v96-player-layer .sx-player-tabs button{white-space:nowrap!important}
  .v96-player-layer .sx-player-modal>form{
    display:flex!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;flex-direction:column!important;overflow:hidden!important;
  }
  .v96-player-layer .sx-player-modal>form>[data-pane]:not(.sx-tab-hidden){
    display:block!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;padding-bottom:16px!important;
  }
  .v96-player-layer .sx-player-section{padding:14px 13px!important}
  .v96-player-layer .sx-player-grid{grid-template-columns:1fr!important;gap:11px!important}
  .v96-player-layer .sx-player-field.is-wide{grid-column:auto!important}
  .v96-player-layer .sx-player-modal-actions{
    position:relative!important;bottom:auto!important;z-index:6!important;flex:0 0 auto!important;
    display:grid!important;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;gap:8px!important;
    margin:0!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
    border-top:1px solid var(--border-subtle)!important;background:var(--bg-card)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 -8px 22px rgba(15,23,42,.06)!important;
  }
  .v96-player-layer .sx-player-modal-actions .sx-fs-tool{width:100%!important;min-height:46px!important;justify-content:center!important}

  /* Spelerkaart/statistieken krijgt exact dezelfde mobiele schermopbouw. */
  .v96-stats-layer>.sx-player-stats-modal{display:flex!important;flex-direction:column!important;overflow:hidden!important}
  .v96-stats-layer>.sx-player-stats-modal>.sx-modal-head{
    position:relative!important;top:auto!important;z-index:5!important;flex:0 0 auto!important;
    min-height:72px!important;padding:calc(12px + env(safe-area-inset-top)) 14px 11px!important;
    border-bottom:1px solid var(--border-subtle)!important;background:var(--bg-card)!important;
  }
  .v96-stats-layer>.sx-player-stats-modal>.sx-modal-head h2{margin:2px 0 0!important;font-size:20px!important;letter-spacing:-.02em!important}
  .v96-stats-layer>.sx-player-stats-modal>.sx-modal-head p{display:none!important}
  .v96-stats-layer .sx-player-stats-body{
    flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;padding:13px 12px 18px!important;
  }
  .v96-stats-layer>.sx-player-stats-modal>.sx-modal-actions{
    position:relative!important;bottom:auto!important;z-index:6!important;flex:0 0 auto!important;
    display:grid!important;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;gap:8px!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;border-top:1px solid var(--border-subtle)!important;
    background:var(--bg-card)!important;box-shadow:0 -8px 22px rgba(15,23,42,.06)!important;
  }
  .v96-stats-layer>.sx-player-stats-modal>.sx-modal-actions .sx-btn{width:100%!important;min-height:46px!important}
  .v96-stats-layer .sx-football-player-card{padding:18px 16px 15px!important;border-radius:20px!important}
}

/* =====================================================================
   v112 — speler- en statistiekpaneel schuiven uit, net als de rest
   =====================================================================
   Deze twee dialogen gaan niet door de gedeelde Modal uit ui.jsx en dragen
   dus ook geen .is-sheet; sheet.css raakte ze nooit. Gemeten op 1440x900
   stond .sx-player-modal als 920x860 gecentreerd in beeld.

   Hieronder dezelfde geometrie als sheet.css: rechts op desktop over de volle
   schermhoogte, van onderen op de telefoon. De binnenkant blijft ongemoeid;
   alleen kop, tabbalk en voetregel worden vastgezet zodat het middenstuk
   scrolt in plaats van de hele kaart.
   ===================================================================== */

@keyframes v112SheetInUp    { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (min-width: 701px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-player-layer,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-stats-layer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
    background: rgba(2, 6, 23, .45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-player-layer > .sx-player-modal,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-stats-layer > .sx-player-stats-modal {
    max-width: 96vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    /* Alleen links afgerond: de rechterkant sluit op de schermrand aan. */
    border-radius: 0 !important;
    box-shadow: -24px 0 60px -24px rgba(2, 6, 23, .45) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: sxSheetInRight .34s cubic-bezier(.22, 1, .36, 1) both !important;
  }

  /* Kop en tabbalk blijven staan, het formulier eronder scrolt. De tabbalk
     stond op position:sticky met top:86px; in een paneel is dat een gat. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-player-layer > .sx-player-modal > .sx-player-modal-head,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-player-layer > .sx-player-modal > .sx-player-tabs,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-stats-layer > .sx-player-stats-modal > .sx-modal-head { flex: 0 0 auto !important; position: relative !important; top: auto !important; }

  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-player-layer > .sx-player-modal > form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-player-layer > .sx-player-modal > form > [data-pane]:not(.sx-tab-hidden),
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-stats-layer > .sx-player-stats-modal > .sx-player-stats-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-player-layer .sx-player-modal-actions,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .v96-stats-layer .sx-modal-actions {
    flex: 0 0 auto !important;
    border-top: 1px solid var(--border-subtle) !important;
    background: var(--bg-card) !important;
  }
}

/* --- Telefoon: precies zoals het Meer-menu ---------------------------
   Het Meer-menu is de maatstaf: .sx-mobile-more is fixed inset:0 met
   z-index 320, en .sx-mobile-more-panel staat absolute op bottom:0 met
   height:min(94dvh,900px) en padding-bottom:env(safe-area-inset-bottom).
   Het paneel loopt dus tot de schermrand en ligt over de onderbalk heen; de
   veilige zone onderaan wordt met padding opgevangen, niet met een gat.

   De React-panelen (sheet.css) doen hetzelfde en gebruiken z-index 2147482600.
   Alleen dit paneel week af: het was een flex-item met height:100dvh binnen de
   laag. Op iOS rekent Safari 100dvh en flex-end anders zodra de adresbalk
   meebeweegt, en dan zakt de voetregel achter de onderbalk. Vandaar hier
   dezelfde absolute/bottom-constructie en dezelfde z-index als de rest.
   ------------------------------------------------------------------- */
@media (max-width: 700px) {
  html .sx-modal-layer.v96-player-layer,
  html .sx-modal-layer.v96-stats-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482600 !important;
    display: block !important;
    padding: 0 !important;
    background: rgba(2, 6, 23, .45) !important;
  }
  html .sx-modal-layer.v96-player-layer > .sx-player-modal,
  html .sx-modal-layer.v96-stats-layer > .sx-player-stats-modal {
    position: absolute !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Dezelfde maten als .sx-mobile-more-panel en .sx-modal.is-sheet. */
    height: min(94dvh, 900px) !important;
    max-height: 94dvh !important;
    margin: 0 !important;
    /* Geen env(safe-area-inset-bottom) hier: .sx-player-modal-actions heeft
       die al in zijn padding staan (calc(10px + env(...))). Twee keer zou op
       iOS een dubbele marge onder de knoppen geven. */
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -18px 50px -18px rgba(2, 6, 23, .5) !important;
    animation: v112SheetInUp .30s cubic-bezier(.22, 1, .36, 1) both !important;
  }
  /* Greepje, zodat zichtbaar is dat het paneel van onderen komt. */
  html .sx-modal-layer.v96-player-layer > .sx-player-modal::before,
  html .sx-modal-layer.v96-stats-layer > .sx-player-stats-modal::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-subtle);
    z-index: 6;
  }
  .v96-player-layer .sx-player-modal-head,
  .v96-stats-layer .sx-player-stats-modal > .sx-modal-head { padding-top: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .v96-player-layer > .sx-player-modal,
  .v96-stats-layer > .sx-player-stats-modal { animation: none !important; }
}

/* v112 — mobiele tabellen: kolommen liepen niet door
   styles.css zet onder 820px thead, tbody en tr allemaal op display:table.
   Elke rij werd daardoor een eigen tabel die zijn kolombreedtes zelf berekent.
   Gemeten op /spelers bij 375px: kolom Team begon op 157 in rij 1 en op 149 in
   rij 2, en de koppen weer ergens anders. Met de normale tabelrollen terug
   staan kop en alle rijen op 37 / 149 / 218 / 257 / 325. */
@media (max-width: 820px) {
  .sx-mobile-table-scroll table.table { display: table !important; width: 100% !important; }
  .sx-mobile-table-scroll table.table thead { display: table-header-group !important; }
  .sx-mobile-table-scroll table.table tbody { display: table-row-group !important; }
  .sx-mobile-table-scroll table.table tr { display: table-row !important; }
  .sx-mobile-table-scroll table.table th,
  .sx-mobile-table-scroll table.table td { display: table-cell !important; text-align: left !important; vertical-align: middle !important; }
}

/* v112 — /spelers: alles in de tabel links uitlijnen. De kolom Acties stond
   op text-align:right terwijl de kop erboven links stond. */
.sx-view .table.sx-table th,
.sx-view .table.sx-table td,
#players-view .table th,
#players-view .table td { text-align: left !important; }
.sx-view .table.sx-table td:last-child > * { justify-content: flex-start !important; }

/* v112 — de 17 legacy dialogen sloten op desktop niet op de rechterrand aan
   Ze schuiven al uit (justify-content:flex-end, volle hoogte, radius 0), maar
   de .modal-backdrop houdt padding:32px aan uit de tijd dat hij gecentreerd
   was. Gemeten op 1440px: kaart right 1408 in plaats van 1440. Zonder die
   padding staat hij op 1440 en is de hoogte gelijk aan innerHeight.
   Op de telefoon klopte het al: backdrop align-items:end, kaart 375 breed,
   onderkant op 812, radius 28px bovenaan - die kant blijft ongemoeid. */
@media (min-width: 701px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-backdrop > .modal-card {
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* ------------------------------------------------------------------ *
 * v115 — op desktop schuift élk paneel uit, geen fade
 *
 * De React-panelen en de legacy dialogen kwamen met sxModalIn binnen:
 *   from { opacity: 0; transform: translateY(16px) scale(.985) }
 * dus omhoog vervagen in plaats van inschuiven. Daarnaast draait motion.js
 * er met GSAP een tweede fade overheen (opacity 0 -> 1, y 14, scale .98).
 *
 * Hieronder één keyframe voor alles. Opacity staat in beide stops op 1: een
 * CSS-animatie wint in de cascade van inline stijl, dus daarmee is de
 * GSAP-fade tijdens het inschuiven ook uitgeschakeld zonder aan motion.js te
 * komen. Gemeten bij openen: op t=0 staat het paneel op translateX(760px)
 * met opacity 1, en de animatie die op het element draait heet sxSheetInRight
 * met een looptijd van 340ms.
 *
 * De selectorvorm is die van desktop-v84-ui.css, want daar staat
 *   html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-modal { animation: sxModalIn ... !important }
 * op (0,3,1). Minder gewicht verliest daarvan, ook met !important.
 * ------------------------------------------------------------------ */
@keyframes sxSheetInRight {
  from { transform: translateX(100%); opacity: 1; }
  to   { transform: none; opacity: 1; }
}

@media (min-width: 701px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-card,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-modal,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-player-modal,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-player-stats-modal {
    animation: sxSheetInRight .34s cubic-bezier(.22, 1, .36, 1) both !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .modal-card,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-modal,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-player-modal,
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-player-stats-modal { animation: none !important; }
}

/* v116 — afgelasting in Wedstrijd aanpassen */
.sx-match-cancel-toggle { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: 11px; background: var(--input-bg, var(--bg-card)); cursor: pointer; }
.sx-match-cancel-toggle input { width: 18px; height: 18px; accent-color: #dc2626; cursor: pointer; }
.sx-match-cancel-toggle span { font-size: 13px; font-weight: 600; color: var(--text-main); }
.sx-match-cancel-reason { width: 100%; box-sizing: border-box; min-height: 42px; margin-top: 8px; padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: 11px; background: var(--input-bg, var(--bg-card)); color: var(--text-main); font: inherit; font-size: 13px; }
.sx-match-cancel-reason:focus { outline: 0; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }

/* ------------------------------------------------------------------ *
 * v117 — afgelaste wedstrijden
 * De aftraptijd zegt niets meer zodra een wedstrijd is afgelast, dus het
 * statuslabel wordt vervangen door AFGELAST en de kaart krijgt een rode
 * rand in plaats van de gewone. De reden staat als chip bij de andere
 * wedstrijdgegevens.
 * ------------------------------------------------------------------ */
.sx-match-cancelled-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 3px 9px;
  border-radius: 999px;
  background: rgba(220, 38, 38, .12);
  color: #dc2626;
  font-size: 9px; font-weight: 900; letter-spacing: .07em;
}
.sx-when-chip.is-cancelled { background: rgba(220, 38, 38, .12) !important; color: #dc2626 !important; }
.sx-when-chip.is-cancelled svg { color: #dc2626 !important; }

.sx-mobile-fixture-card.is-cancelled,
.sx-match-compact-row.is-cancelled,
.sx-parent-overview-match.is-cancelled {
  border-color: rgba(220, 38, 38, .34) !important;
}
/* De uitslag of aftraptijd doorstrepen: in één oogopslag zichtbaar dat er
   niet gespeeld wordt, zonder de tijd te verbergen. */
.sx-mobile-fixture-card.is-cancelled .sx-parent-fixture-time > strong,
.sx-match-compact-row.is-cancelled .sx-match-compact-date > span,
.sx-parent-overview-match.is-cancelled .sx-overview-center > strong {
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, .7);
  opacity: .72;
}
.sx-mobile-fixture-card.is-cancelled .sx-parent-fixture-time > small,
.sx-parent-overview-match.is-cancelled .sx-overview-center > small { color: #dc2626 !important; }
[data-theme="dark"] .sx-match-cancelled-badge,
[data-theme="dark"] .sx-when-chip.is-cancelled { background: rgba(248, 113, 113, .16) !important; color: #f87171 !important; }
[data-theme="dark"] .sx-when-chip.is-cancelled svg { color: #f87171 !important; }

/* ------------------------------------------------------------------ *
 * v117 — tactiekbord op desktop compacter
 *
 * Gemeten op 1440x900 stond de bovenkant van het veld op y=900: precies
 * onder de vouw, je zag het veld pas na scrollen. Wat erboven stond:
 *   card-header              89px
 *   .tactics-standalone-bar  67px
 *   .tactics-toolbar        553px
 * De toolbar was een raster van drie kolommen waarvan er in rij 1 maar twee
 * gevuld waren; .tactics-tools stond als volle breedte in een tweede rij.
 * Die derde kolom stond dus leeg terwijl er eronder 154px werd bijgezet.
 *
 * Nu staat .tactics-tools in die lege derde kolom, met zijn eigen groepen
 * twee naast elkaar, en is de kop krapper. Gemeten na de wijziging:
 *   card-header  51px, toolbar 377px, bovenkant veld y=674.
 * Dat is 226px minder en het veld begint boven de vouw.
 * ------------------------------------------------------------------ */
@media (min-width: 821px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-topbar.tactics-toolbar {
    grid-template-columns: 1fr 1fr 1.9fr !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .tactics-topbar.tactics-toolbar > .tactics-tools {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) #tactics-view .card > .card-header {
    padding: 12px 16px !important;
    min-height: 0 !important;
  }
  /* De ondertitel herhaalt wat de knoppen eronder al laten zien. */
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) #tactics-view .card > .card-header .card-subtitle { display: none !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) #tactics-view .card > .card-body { padding-top: 10px !important; }
}

/* v118 — sidebar een tint lichter.
   Was linear-gradient(168deg, rgba(9,22,46,.98), rgba(6,16,36,.984) 52%,
   rgba(4,11,26,.99)); elke stop is ongeveer 10 punten opgetild. De twee
   radiale gloeden erboven blijven ongewijzigd, anders verschuift het accent. */
@media (min-width: 821px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-sidebar {
    background-image:
      radial-gradient(520px 340px at 10% -4%, rgba(96, 132, 255, .26), rgba(0, 0, 0, 0) 66%),
      radial-gradient(420px 300px at 92% 104%, rgba(56, 168, 219, .14), rgba(0, 0, 0, 0) 70%),
      linear-gradient(168deg, rgba(20, 36, 64, .98), rgba(16, 29, 54, .984) 52%, rgba(13, 23, 44, .99)) !important;
  }
}

/* ------------------------------------------------------------------ *
 * v119 — trainings- en wedstrijdkaarten op de telefoon
 *
 * De knoppenrij .li-actions stond op flex met nowrap en overflow-x:auto.
 * Gemeten op 375px: zeven knoppen (Bekijk, Aanwezigheid, Aanpassen, PNG, PDF,
 * Template, Verwijder) in een rij van 299px breed, waarvan de derde al op
 * x=347 eindigde terwijl de rij op 337 ophoudt. Aanpassen viel dus af en de
 * rest stond achter een zijwaartse scroll die je niet ziet.
 *
 * Nu een raster van twee kolommen met de eerste knop over de volle breedte.
 * Alle zeven staan in beeld, niets loopt meer buiten de kaart.
 *
 * De kop stond op een enkele regel waarin datum en aanwezigheidsteller om de
 * ruimte vochten; de datum brak daardoor over twee regels. De datum krijgt nu
 * de volle breedte en de teller staat als compacte pil daaronder.
 * ------------------------------------------------------------------ */
@media (max-width: 820px) {
  html.sx-phone-webapp .li-actions,
  html.sx-tablet-webapp .li-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    width: 100% !important;
  }
  html.sx-phone-webapp .li-actions > *:first-child,
  html.sx-tablet-webapp .li-actions > *:first-child { grid-column: 1 / -1 !important; }
  html.sx-phone-webapp .li-actions > button,
  html.sx-phone-webapp .li-actions > a,
  html.sx-tablet-webapp .li-actions > button,
  html.sx-tablet-webapp .li-actions > a {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  html.sx-phone-webapp .li-title,
  html.sx-tablet-webapp .li-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
  }
  html.sx-phone-webapp .li-title > :first-child,
  html.sx-tablet-webapp .li-title > :first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  html.sx-phone-webapp .li-title .att-badge,
  html.sx-tablet-webapp .li-title .att-badge {
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
    font-size: 11.5px !important;
  }
  html.sx-phone-webapp .li-title .att-badge .att-text,
  html.sx-tablet-webapp .li-title .att-badge .att-text {
    white-space: nowrap !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }
  html.sx-phone-webapp .li-title .att-badge svg,
  html.sx-tablet-webapp .li-title .att-badge svg { width: 14px !important; height: 14px !important; }
}

/* ------------------------------------------------------------------ *
 * v121 — "Teams opnieuw ontdekken" was onzichtbaar
 *
 * .sx-fs-tool is getekend voor de donkere fullscreen-balk van het
 * tactiekbord: color #f8fafc, rand rgba(255,255,255,.14) en achtergrond
 * rgba(255,255,255,.08). Op de lichte kaart bij Opties is dat wit op wit.
 *
 * De tweede knop viel niet op omdat hij .is-active draagt en daardoor een
 * blauw verloop krijgt; de eerste knop heeft dat niet en verdween dus.
 * Er bestond al een uitzondering voor .sx-settings-actions, maar deze rij
 * heet .sx-dem-sync-actions en viel daarbuiten.
 * ------------------------------------------------------------------ */
.sx-dem-sync-actions .sx-fs-tool {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  font-size: 12.5px;
  font-weight: 700;
}
.sx-dem-sync-actions .sx-fs-tool:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-subtle)) !important;
  background: color-mix(in srgb, var(--primary) 7%, var(--bg-card)) !important;
  color: var(--primary) !important;
}
.sx-dem-sync-actions .sx-fs-tool.is-active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
}
.sx-dem-sync-actions .sx-fs-tool.is-active:hover { color: #fff !important; }

/* ------------------------------------------------------------------ *
 * v121 — verwijderen in een contextmenu leest als verwijderen
 * Subtiel: rode tekst en een licht rood vlak bij aanwijzen, geen volvlak
 * rode knop. Dat onderscheidt hem van de rest zonder te schreeuwen.
 * ------------------------------------------------------------------ */
.dropdown-item[data-club-delete],
.dropdown-item[data-coach-delete],
.dropdown-item[data-del-player],
.dropdown-item[data-delete-match],
.dropdown-item[data-delete-player],
.dropdown-item[data-delete-team] { color: #dc2626 !important; }
.dropdown-item[data-club-delete] svg,
.dropdown-item[data-coach-delete] svg,
.dropdown-item[data-del-player] svg,
.dropdown-item[data-delete-match] svg,
.dropdown-item[data-delete-player] svg,
.dropdown-item[data-delete-team] svg { color: #dc2626 !important; }
.dropdown-item[data-club-delete]:hover,
.dropdown-item[data-coach-delete]:hover,
.dropdown-item[data-del-player]:hover,
.dropdown-item[data-delete-match]:hover,
.dropdown-item[data-delete-player]:hover,
.dropdown-item[data-delete-team]:hover { background: rgba(220, 38, 38, .09) !important; color: #b91c1c !important; }
[data-theme="dark"] .dropdown-item[data-club-delete],
[data-theme="dark"] .dropdown-item[data-coach-delete],
[data-theme="dark"] .dropdown-item[data-del-player],
[data-theme="dark"] .dropdown-item[data-delete-match],
[data-theme="dark"] .dropdown-item[data-delete-player],
[data-theme="dark"] .dropdown-item[data-delete-team] { color: #f87171 !important; }

/* ------------------------------------------------------------------ *
 * v121 — oefeningenraster in dezelfde taal als het wedstrijdenraster
 *
 * De kaarten waren vlak wit met 20px ronding en gecentreerde tekst. Het
 * wedstrijdenraster gebruikt een licht verloop, 24px ronding en een diepere
 * schaduw. Hier hetzelfde, plus: titel en tekst links (leest rustiger dan
 * gecentreerd bij wisselende lengtes), de veldminiatuur over de volle breedte
 * en een afgescheiden voetband met de materiaaltelling en twee even brede
 * knoppen naast elkaar.
 * ------------------------------------------------------------------ */
@media (min-width: 821px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card {
    text-align: left !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--primary) 8%, var(--border-subtle)) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 4%, var(--bg-card)), var(--bg-card)) !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .055) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border-subtle)) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .09) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .ex-title {
    padding: 16px 18px 0 !important;
    text-align: left !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .ex-badges { padding: 8px 18px 0 !important; justify-content: flex-start !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .ex-sub { padding: 6px 18px 0 !important; text-align: left !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .ex-thumb { width: 100% !important; margin: 12px 0 0 !important; border-radius: 0 !important; }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .ex-bottom {
    padding: 12px 18px 16px !important;
    border-top: 1px solid color-mix(in srgb, var(--primary) 8%, var(--border-subtle)) !important;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .ex-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .ex-actions > * {
    width: 100% !important;
    min-height: 38px !important;
    justify-content: center !important;
    border-radius: 11px !important;
  }
}

/* ------------------------------------------------------------------ *
 * v122 — kleur per oefeningcategorie
 * Zachte vlakken met een leesbare tekstkleur, geen felle blokken: de kaart
 * blijft rustig terwijl je de categorie in één oogopslag herkent. Een
 * categorie die hier niet in staat houdt de neutrale opmaak.
 *
 * WAAROM ELKE REGEL TWEE SELECTORS HEEFT
 * In css/desktop-v84-ui.css staat een regel die op desktop ELKE badge de
 * huisstijlkleur geeft, met !important en een flink specifiekere selector dan
 * een kale `.ex-badge.cat-aanval`. Bij twee !important-regels wint de
 * specifiekste, dus de categoriekleur verloor daar altijd van. De tweede
 * selector hieronder is diezelfde desktopselector plus de categorieklasse, en
 * wint dus wel. De kale selector blijft staan voor telefoon en tablet.
 *
 * En let op de plaats van [data-theme="dark"]: die hoort VOOR .ex-badges en
 * NA html. Eerder stond er `[data-theme="dark"] html:not(...)`, en `html` kan
 * nooit een afstammeling van het thema-element zijn -- die regel raakte dus
 * niets, waardoor de badges in donkere modus de lichte kleuren hielden:
 * donkerrood en donkergroen op een donkere kaart.
 * ------------------------------------------------------------------ */
.ex-badge.cat-aanval,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-aanval:not(.ex-badge--duration) { background: rgba(239, 68, 68, .12) !important; color: #b91c1c !important; }
.ex-badge.cat-verdediging,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-verdediging:not(.ex-badge--duration) { background: rgba(37, 99, 235, .12) !important; color: #1d4ed8 !important; }
.ex-badge.cat-conditie,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-conditie:not(.ex-badge--duration) { background: rgba(249, 115, 22, .14) !important; color: #c2410c !important; }
.ex-badge.cat-partijvorm,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-partijvorm:not(.ex-badge--duration) { background: rgba(168, 85, 247, .13) !important; color: #7e22ce !important; }
.ex-badge.cat-positie-spel,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-positie-spel:not(.ex-badge--duration) { background: rgba(20, 184, 166, .14) !important; color: #0f766e !important; }
.ex-badge.cat-tactiek,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-tactiek:not(.ex-badge--duration) { background: rgba(234, 179, 8, .16) !important; color: #a16207 !important; }
.ex-badge.cat-techniek,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-techniek:not(.ex-badge--duration) { background: rgba(6, 182, 212, .14) !important; color: #0e7490 !important; }
.ex-badge.cat-warming-up,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-warming-up:not(.ex-badge--duration) { background: rgba(132, 204, 22, .16) !important; color: #4d7c0f !important; }
.ex-badge.cat-keeper,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .ex-badges .ex-badge.cat-keeper:not(.ex-badge--duration) { background: rgba(236, 72, 153, .12) !important; color: #be185d !important; }

[data-theme="dark"] .ex-badge.cat-aanval,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-aanval:not(.ex-badge--duration) { background: rgba(248, 113, 113, .18) !important; color: #fca5a5 !important; }
[data-theme="dark"] .ex-badge.cat-verdediging,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-verdediging:not(.ex-badge--duration) { background: rgba(96, 165, 250, .18) !important; color: #93c5fd !important; }
[data-theme="dark"] .ex-badge.cat-conditie,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-conditie:not(.ex-badge--duration) { background: rgba(251, 146, 60, .18) !important; color: #fdba74 !important; }
[data-theme="dark"] .ex-badge.cat-partijvorm,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-partijvorm:not(.ex-badge--duration) { background: rgba(192, 132, 252, .18) !important; color: #d8b4fe !important; }
[data-theme="dark"] .ex-badge.cat-positie-spel,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-positie-spel:not(.ex-badge--duration) { background: rgba(45, 212, 191, .18) !important; color: #5eead4 !important; }
[data-theme="dark"] .ex-badge.cat-tactiek,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-tactiek:not(.ex-badge--duration) { background: rgba(250, 204, 21, .18) !important; color: #fde047 !important; }
[data-theme="dark"] .ex-badge.cat-techniek,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-techniek:not(.ex-badge--duration) { background: rgba(34, 211, 238, .18) !important; color: #67e8f9 !important; }
[data-theme="dark"] .ex-badge.cat-warming-up,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-warming-up:not(.ex-badge--duration) { background: rgba(163, 230, 53, .18) !important; color: #bef264 !important; }
[data-theme="dark"] .ex-badge.cat-keeper,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .ex-badges .ex-badge.cat-keeper:not(.ex-badge--duration) { background: rgba(244, 114, 182, .18) !important; color: #f9a8d4 !important; }

/* ------------------------------------------------------------------ *
 * v122 — draaiend cirkeltje op een knop die bezig is
 * De knop houdt zijn opschrift en zijn maat; er komt alleen een ring voor.
 * Zo verspringt de layout niet en blijft duidelijk wat je hebt aangeklikt.
 * ------------------------------------------------------------------ */
@keyframes mkvcBusySpin { to { transform: rotate(360deg); } }

button.is-busy {
  position: relative;
  pointer-events: none;
  cursor: progress;
}
button.is-busy > * { opacity: .55; }
button.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .95;
  animation: mkvcBusySpin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  button.is-busy::after { animation-duration: 2.4s; }
}

/* ------------------------------------------------------------------ *
 * Gereedschap bij de oefeningeditor — keuzelijsten op hun eigen maat
 *
 * In css/desktop-v84-ui.css staat één brede regel die ELKE select, input en
 * textarea binnen de weergave op width:100% !important zet. Die selector is
 * fors specifieker dan een gewone `.acc-body select`, dus de keuzelijsten van
 * het tekengereedschap namen stuk voor stuk de volle regel: Pijl, Wit en Geen
 * stap kwamen daardoor als drie brede stroken onder elkaar te staan in plaats
 * van naast de knoppen.
 *
 * Deze selector is één stap specifieker dan die regel en wint dus wel. Hij
 * raakt uitsluitend het gereedschap binnen de trainingseditor; elke andere
 * select in de app blijft gewoon over de volle breedte.
 * ------------------------------------------------------------------ */
html:not(.sx-phone-webapp):not(.sx-tablet-webapp)
  .training-tools .tool-accordion .acc-body
  :is(select, .select):not([multiple]):not([size]):not([hidden]) {
  width: auto !important;
  min-width: 118px !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
}

/* ------------------------------------------------------------------ *
 * Oefeningkaarten — wat rustiger en met meer diepte
 *
 * De kaart was een vlak wit blok met de tekening er los in. Nu ligt er een
 * zachte verloop achter, krijgt de tekening een eigen omlijsting en staat de
 * materiaalstrip op een eigen vlakje. Bij het aanwijzen komt de kaart een
 * fractie omhoog -- genoeg om te merken, te weinig om af te leiden.
 * ------------------------------------------------------------------ */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 4%, transparent) 0%,
        transparent 42%),
      var(--bg-card) !important;
    border-color: color-mix(in srgb, var(--primary) 12%, var(--border-subtle)) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .ex-thumb {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .01)),
      var(--bg-subtle) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5) !important;
  }
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .exercise-card .need-mini {
    background: color-mix(in srgb, var(--primary) 5%, var(--bg-subtle)) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 9%, transparent) !important;
  }
}
/* Deze drie hadden dezelfde valkuil als de badges hierboven: een kale
   `[data-theme="dark"] .exercise-card` is minder specifiek dan de lichte
   desktopregel erboven, dus in donkere modus bleven de LICHTE waarden staan.
   Het opvallendst was de binnenrand van de tekening: die stond op 50% wit en
   trok dus een lichte lijn om elk veldje op een donkere kaart. Met dezelfde
   desktopselector plus het thema-attribuut winnen ze wel. */
[data-theme="dark"] .exercise-card,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .exercise-card {
  background:
    linear-gradient(180deg, rgba(96, 165, 250, .07) 0%, transparent 42%),
    var(--bg-card) !important;
  border-color: rgba(148, 163, 184, .16) !important;
}
[data-theme="dark"] .exercise-card .ex-thumb,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .exercise-card .ex-thumb {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
    var(--bg-subtle) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .exercise-card .need-mini {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
}

/* ------------------------------------------------------------------ *
 * Hoofdachtergrond — iets meer diepte
 *
 * Er lag al een verloop achter de weergave, maar zo licht (10% en 9%) dat het
 * op een gewoon scherm nauwelijks te zien was en het geheel vlak aanvoelde.
 * Dit zijn dezelfde drie lagen, alleen wat sterker aangezet, met een derde
 * accent linksonder zodat de kleur niet alleen bovenin hangt.
 *
 * Bewust nog steeds zacht: de kaarten en het veld moeten de aandacht houden,
 * de achtergrond geeft er alleen ruimte omheen.
 * ------------------------------------------------------------------ */
@media (min-width: 1025px) {
  html:not(.sx-phone-webapp):not(.sx-tablet-webapp) .sx-main {
    background:
      radial-gradient(1200px 700px at 4% -8%,  rgba(83, 98, 213, .20), transparent 60%),
      radial-gradient(1000px 600px at 100% -2%, rgba(56, 189, 248, .17), transparent 58%),
      radial-gradient(900px 700px at 12% 108%, rgba(129, 140, 248, .13), transparent 62%),
      linear-gradient(160deg, #f4f8ff 0%, #e8eefb 46%, #f3f7fd 100%) !important;
    background-attachment: fixed !important;
  }
}
/* Ook hier het thema-attribuut NA html, en met dezelfde desktopselector als de
   lichte variant -- anders wint die lichte in donkere modus. */
[data-theme="dark"] .sx-main,
html:not(.sx-phone-webapp):not(.sx-tablet-webapp) [data-theme="dark"] .sx-main {
  background:
    radial-gradient(1200px 700px at 4% -8%,  rgba(99, 116, 232, .30), transparent 60%),
    radial-gradient(1000px 600px at 100% -2%, rgba(56, 189, 248, .18), transparent 58%),
    radial-gradient(900px 700px at 12% 108%, rgba(129, 140, 248, .16), transparent 62%),
    linear-gradient(160deg, #0b1020 0%, #0d1426 46%, #0a0f1e 100%) !important;
  background-attachment: fixed !important;
}