/* CAS-Jartpoint V36 — professionele, rustige en consistente UI */
:root {
  --cj36-bg: #f2f0ea;
  --cj36-bg-deep: #e9e5dc;
  --cj36-surface: #fffdfa;
  --cj36-surface-soft: #f8f5ee;
  --cj36-surface-green: #f0f5f1;
  --cj36-green-1000: #031710;
  --cj36-green-950: #052119;
  --cj36-green-900: #082d21;
  --cj36-green-850: #0b3828;
  --cj36-green-800: #104631;
  --cj36-green-700: #176044;
  --cj36-green-600: #1b7550;
  --cj36-gold-700: #8e5f18;
  --cj36-gold-600: #b27b28;
  --cj36-gold-500: #cf9f43;
  --cj36-gold-300: #ead18b;
  --cj36-ink: #12251c;
  --cj36-ink-soft: #314238;
  --cj36-muted: #68726c;
  --cj36-line: #ddd7cc;
  --cj36-line-strong: #cbbfa9;
  --cj36-danger: #a63c41;
  --cj36-danger-dark: #812b30;
  --cj36-shadow-xs: 0 2px 8px rgba(10, 25, 18, .05);
  --cj36-shadow-sm: 0 8px 22px rgba(10, 25, 18, .07);
  --cj36-shadow: 0 16px 38px rgba(10, 25, 18, .10);
  --cj36-shadow-deep: 0 24px 58px rgba(3, 18, 12, .18);
  --cj36-radius-sm: 9px;
  --cj36-radius: 14px;
  --cj36-radius-lg: 20px;
  --cj36-content: 1280px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  color: var(--cj36-ink);
  font-family: Inter, Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { max-width: 100%; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Navigatieshell
   -------------------------------------------------------------------------- */
.cj-shell {
  --shell-width: 258px !important;
  width: 258px !important;
  color: #edf3ef !important;
  background:
    radial-gradient(circle at 5% 0, rgba(207,159,67,.11), transparent 17rem),
    linear-gradient(180deg, #031710 0%, #06251b 55%, #0a3426 100%) !important;
  border-right: 1px solid rgba(234,209,139,.18) !important;
  box-shadow: 14px 0 36px rgba(3,18,12,.13) !important;
}
.cj-shell::after {
  width: 1px !important;
  opacity: .7 !important;
  background: linear-gradient(180deg, transparent, var(--cj36-gold-500) 24%, var(--cj36-gold-300) 52%, var(--cj36-gold-500) 78%, transparent) !important;
}
.cj-shell__panel {
  gap: 14px !important;
  padding: 18px 14px 15px !important;
}
.cj-shell__brand {
  gap: 10px !important;
  padding: 2px 4px 10px !important;
}
.cj-shell__brandmark {
  width: 44px !important;
  height: 44px !important;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.23));
}
.cj-shell__brand b {
  color: #fffaf0 !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
}
.cj-shell__brand small {
  color: #d7c58d !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}
.cj-shell__home {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  color: #e9ddbd !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(234,209,139,.13) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}
.cj-shell__home:hover { background: rgba(255,255,255,.065) !important; }
.cj-shell__section { gap: 6px !important; }
.cj-shell__section--context {
  padding-top: 12px !important;
  border-top-color: rgba(255,255,255,.07) !important;
}
.cj-shell__eyebrow {
  padding-inline: 9px !important;
  color: #9eaaa2 !important;
  font-size: 9px !important;
  letter-spacing: .15em !important;
}
.cj-shell__nav, .cj-shell__subnav { gap: 4px !important; }
.cj-shell__link,
.cj-shell__sublink {
  min-height: 43px !important;
  padding: 0 10px !important;
  color: #dfe7e1 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  transform: none !important;
}
.cj-shell__sublink {
  min-height: 38px !important;
  color: #c7d0ca !important;
  font-size: 12px !important;
}
.cj-shell__link:hover,
.cj-shell__sublink:hover {
  color: #fff !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.055) !important;
}
.cj-shell__link.is-active,
.cj-shell__sublink.is-active {
  position: relative;
  color: #fffaf0 !important;
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(234,209,139,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.14) !important;
}
.cj-shell__link.is-active::before,
.cj-shell__sublink.is-active::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px -1px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cj36-gold-300), var(--cj36-gold-500));
}
.cj-shell__link.is-active .cj-shell__chevron { color: #ead18b !important; opacity: 1 !important; }
.cj-shell__account {
  padding-top: 12px !important;
  border-top-color: rgba(255,255,255,.07) !important;
}
.cj-shell__account a {
  min-height: 38px !important;
  padding-inline: 11px !important;
  color: #221704 !important;
  background: linear-gradient(135deg, #ead18b, #c99439) !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.16) !important;
}
body.cj-has-admin-shell,
body.cj-has-public-shell { padding-left: 258px !important; }

/* --------------------------------------------------------------------------
   Algemene pagina-opbouw
   -------------------------------------------------------------------------- */
body.cj-has-admin-shell,
body.cj-has-public-shell {
  color: var(--cj36-ink) !important;
  background:
    radial-gradient(circle at 92% -8rem, rgba(207,159,67,.075), transparent 27rem),
    linear-gradient(180deg, #efede7 0%, #f7f5f0 23rem, var(--cj36-bg) 100%) !important;
}
body.cj-has-admin-shell > .header,
body.cj-has-public-shell > .header,
body.cj-has-admin-shell > .top,
body.cj-has-public-shell > .top,
body.cj-has-admin-shell > .topbar,
body.cj-has-public-shell > .topbar,
body.cj-has-admin-shell > .cj-top-brand-banner,
body.cj-has-public-shell > .cj-top-brand-banner,
body.cj-has-admin-shell > .public-header,
body.cj-has-public-shell > .public-header { display: none !important; }

body.cj-has-admin-shell .container,
body.cj-has-public-shell .container,
body.cj-has-admin-shell .wrap,
body.cj-has-public-shell .wrap,
body.cj-has-admin-shell .manage-wrap,
body.cj-has-public-shell .manage-wrap,
body.cj-has-admin-shell main.container,
body.cj-has-public-shell main.container {
  width: min(var(--cj36-content), calc(100% - 38px)) !important;
  max-width: var(--cj36-content) !important;
  margin-inline: auto !important;
  padding: 24px 0 50px !important;
}

body.cj-has-admin-shell .cj-page-hero,
body.cj-has-public-shell .cj-page-hero,
body.cj-has-admin-shell .overview-hero,
body.cj-has-public-shell .overview-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px !important;
  padding: clamp(22px, 3vw, 34px) !important;
  color: #fffaf0 !important;
  border: 1px solid rgba(234,209,139,.24) !important;
  border-radius: var(--cj36-radius-lg) !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(234,209,139,.15), transparent 18rem),
    linear-gradient(135deg, #041a12 0%, #083226 54%, #11523a 100%) !important;
  box-shadow: var(--cj36-shadow-deep) !important;
}
body.cj-has-admin-shell .cj-page-hero::before,
body.cj-has-public-shell .cj-page-hero::before,
body.cj-has-admin-shell .overview-hero::before,
body.cj-has-public-shell .overview-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cj36-gold-500) 20%, var(--cj36-gold-300) 50%, var(--cj36-gold-500) 80%, transparent);
}
body.cj-has-admin-shell .cj-page-hero h1,
body.cj-has-admin-shell .cj-page-hero h2,
body.cj-has-public-shell .cj-page-hero h1,
body.cj-has-public-shell .cj-page-hero h2,
body.cj-has-admin-shell .overview-hero h1,
body.cj-has-public-shell .overview-hero h1 {
  color: #fffaf0 !important;
  font-size: clamp(30px, 3.4vw, 48px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.20);
}
body.cj-has-admin-shell .cj-page-hero p,
body.cj-has-public-shell .cj-page-hero p,
body.cj-has-admin-shell .overview-hero p,
body.cj-has-public-shell .overview-hero p {
  max-width: 790px;
  color: rgba(255,250,240,.82) !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

body.cj-has-admin-shell .card,
body.cj-has-public-shell .card,
body.cj-has-admin-shell .section,
body.cj-has-public-shell .section,
body.cj-has-admin-shell .section-card,
body.cj-has-public-shell .section-card,
body.cj-has-admin-shell .panel,
body.cj-has-public-shell .panel,
body.cj-has-admin-shell .competition-card,
body.cj-has-public-shell .competition-card,
body.cj-has-admin-shell .wedstrijd-card,
body.cj-has-public-shell .wedstrijd-card,
body.cj-has-admin-shell .wedstrijd-item,
body.cj-has-public-shell .wedstrijd-item,
body.cj-has-admin-shell .match-item,
body.cj-has-public-shell .match-item,
body.cj-has-admin-shell .item,
body.cj-has-public-shell .item,
body.cj-has-admin-shell .info-box,
body.cj-has-public-shell .info-box {
  color: var(--cj36-ink) !important;
  background: var(--cj36-surface) !important;
  border: 1px solid var(--cj36-line) !important;
  border-radius: var(--cj36-radius) !important;
  box-shadow: var(--cj36-shadow-sm) !important;
}
body.cj-has-admin-shell .card,
body.cj-has-public-shell .card,
body.cj-has-admin-shell .section,
body.cj-has-public-shell .section,
body.cj-has-admin-shell .section-card,
body.cj-has-public-shell .section-card,
body.cj-has-admin-shell .panel,
body.cj-has-public-shell .panel { padding: clamp(18px, 2.2vw, 26px) !important; }
body.cj-has-admin-shell .card + .card,
body.cj-has-public-shell .card + .card,
body.cj-has-admin-shell .section + .section,
body.cj-has-public-shell .section + .section,
body.cj-has-admin-shell .section-card + .section-card,
body.cj-has-public-shell .section-card + .section-card { margin-top: 16px !important; }

body.cj-has-admin-shell h1,
body.cj-has-admin-shell h2,
body.cj-has-admin-shell h3,
body.cj-has-public-shell h1,
body.cj-has-public-shell h2,
body.cj-has-public-shell h3 {
  color: var(--cj36-ink) !important;
  font-weight: 820 !important;
  line-height: 1.12;
  letter-spacing: -.035em;
}
body.cj-has-admin-shell p,
body.cj-has-public-shell p,
body.cj-has-admin-shell .small,
body.cj-has-public-shell .small,
body.cj-has-admin-shell .muted,
body.cj-has-public-shell .muted,
body.cj-has-admin-shell .meta,
body.cj-has-public-shell .meta,
body.cj-has-admin-shell .hint,
body.cj-has-public-shell .hint {
  color: var(--cj36-muted) !important;
}
.section-head {
  align-items: center !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid #ece7de !important;
}
.section-head h2 { font-size: clamp(24px, 2.5vw, 34px) !important; }

/* Formulieren */
body.cj-has-admin-shell label,
body.cj-has-public-shell label {
  color: var(--cj36-ink-soft) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}
body.cj-has-admin-shell input,
body.cj-has-admin-shell select,
body.cj-has-admin-shell textarea,
body.cj-has-public-shell input,
body.cj-has-public-shell select,
body.cj-has-public-shell textarea {
  min-height: 44px !important;
  padding: 10px 12px !important;
  color: var(--cj36-ink) !important;
  background: #fff !important;
  border: 1px solid #cec7bc !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 2px rgba(10,25,18,.025) !important;
}
body.cj-has-admin-shell input:focus,
body.cj-has-admin-shell select:focus,
body.cj-has-admin-shell textarea:focus,
body.cj-has-public-shell input:focus,
body.cj-has-public-shell select:focus,
body.cj-has-public-shell textarea:focus {
  outline: none !important;
  border-color: var(--cj36-green-600) !important;
  box-shadow: 0 0 0 3px rgba(27,117,80,.12) !important;
}
body.cj-has-admin-shell textarea,
body.cj-has-public-shell textarea { min-height: 110px !important; }

/* Knoppen */
body.cj-has-admin-shell button,
body.cj-has-public-shell button,
body.cj-has-admin-shell .button,
body.cj-has-public-shell .button,
body.cj-has-admin-shell .btn,
body.cj-has-public-shell .btn,
body.cj-has-admin-shell .back-btn,
body.cj-has-public-shell .back-btn,
body.cj-has-admin-shell input[type="submit"],
body.cj-has-public-shell input[type="submit"] {
  display: inline-flex;
  min-height: 42px !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1.1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
body.cj-has-admin-shell button:hover,
body.cj-has-public-shell button:hover,
body.cj-has-admin-shell .button:hover,
body.cj-has-public-shell .button:hover,
body.cj-has-admin-shell .btn:hover,
body.cj-has-public-shell .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(10,25,18,.12) !important;
}
body.cj-has-admin-shell .button-primary,
body.cj-has-public-shell .button-primary,
body.cj-has-admin-shell .primary,
body.cj-has-public-shell .primary,
body.cj-has-admin-shell .btn.green,
body.cj-has-public-shell .btn.green {
  color: #fff !important;
  background: linear-gradient(135deg, var(--cj36-green-700), var(--cj36-green-850)) !important;
  border-color: rgba(5,50,34,.16) !important;
}
body.cj-has-admin-shell .button-secondary,
body.cj-has-public-shell .button-secondary,
body.cj-has-admin-shell .secondary,
body.cj-has-public-shell .secondary,
body.cj-has-admin-shell .btn.dark,
body.cj-has-public-shell .btn.dark {
  color: #fff !important;
  background: #344a3e !important;
  border-color: #344a3e !important;
}
body.cj-has-admin-shell .button-light,
body.cj-has-public-shell .button-light,
body.cj-has-admin-shell .button.light,
body.cj-has-public-shell .button.light,
body.cj-has-admin-shell .back,
body.cj-has-public-shell .back {
  color: var(--cj36-ink-soft) !important;
  background: #fff !important;
  border-color: #d3ccbf !important;
}
body.cj-has-admin-shell .gold,
body.cj-has-public-shell .gold,
body.cj-has-admin-shell .btn.gold,
body.cj-has-public-shell .btn.gold {
  color: #291d0a !important;
  background: linear-gradient(135deg, #ead18b, #c99539) !important;
  border-color: rgba(142,95,24,.15) !important;
}
body.cj-has-admin-shell .danger,
body.cj-has-public-shell .danger,
body.cj-has-admin-shell .button-danger,
body.cj-has-public-shell .button-danger,
body.cj-has-admin-shell .btn.red,
body.cj-has-public-shell .btn.red {
  color: #fff !important;
  background: linear-gradient(135deg, var(--cj36-danger), var(--cj36-danger-dark)) !important;
  border-color: rgba(129,43,48,.18) !important;
}

/* Chips */
.cj-chip, .badge, .status, .competition-type, .competition-open, .result-count, .chip {
  color: #533b14 !important;
  background: #f5e9c9 !important;
  border: 1px solid #dec58c !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Tabellen */
table, .stand-table {
  width: 100%;
  border: 1px solid var(--cj36-line) !important;
  border-radius: 11px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}
th {
  color: #fffaf0 !important;
  background: var(--cj36-green-850) !important;
  font-size: 11px !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}
th, td { padding: 11px 12px !important; }
tbody tr:nth-child(even) { background: #faf8f3 !important; }
tbody tr:hover { background: #f3f6f3 !important; }

/* --------------------------------------------------------------------------
   Hoofdpagina
   -------------------------------------------------------------------------- */
body.portal-page {
  background:
    radial-gradient(circle at 94% -8rem, rgba(207,159,67,.10), transparent 27rem),
    linear-gradient(180deg, #ece9e2 0%, #f8f6f1 52%, #efede7 100%) !important;
}
.portal-v36-page .portal-v30 {
  width: min(1420px, calc(100% - 32px));
  padding: 10px 0 16px;
}
.portal-v36-page .portal-v30__top {
  min-height: 78px;
  padding: 12px 16px;
  margin: 0;
  border: 1px solid rgba(234,209,139,.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 10%, rgba(234,209,139,.12), transparent 18rem),
    linear-gradient(135deg, #031b13 0%, #073126 58%, #104b37 100%);
  box-shadow: 0 14px 30px rgba(4,20,14,.13);
}
.portal-v36-page .portal-v34__brand { gap: 13px; }
.portal-v36-page .portal-v34__brand-mark,
.portal-v36-page .portal-v34__brand-mark img {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}
.portal-v36-page .portal-v34__brand-copy { gap: 4px; }
.portal-v36-page .portal-v34__brand-copy strong {
  color: #fffaf0;
  font-family: Inter, Aptos, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(28px, 2.7vw, 42px);
  font-weight: 850;
  letter-spacing: -.04em;
}
.portal-v36-page .portal-v34__brand-copy small {
  color: #dec88e;
  font-size: clamp(9px, .78vw, 12px);
  letter-spacing: .22em;
}
.portal-v36-page .portal-v30__account-link {
  min-height: 40px;
  border-radius: 9px;
  font-size: 12px;
}
.portal-v36-page .portal-v30__account-link--soft {
  color: #eff5f1;
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.10);
}
.portal-v36-page .portal-v30__account-link--gold {
  color: #261a07;
  background: linear-gradient(135deg, #ead18b, #c99539);
  box-shadow: 0 8px 18px rgba(0,0,0,.13);
}
.portal-v36-page .portal-v30__heading {
  min-height: 72px;
  margin: 12px 0;
  padding: 14px 20px;
  align-items: center;
  border: 1px solid var(--cj36-line);
  border-radius: 16px;
  background: rgba(255,253,250,.96);
  box-shadow: var(--cj36-shadow-xs);
}
.portal-v36-page .portal-v30__eyebrow {
  margin-bottom: 3px;
  color: var(--cj36-gold-700);
  font-size: 9px;
}
.portal-v36-page .portal-v30__heading h1 {
  color: var(--cj36-ink) !important;
  font-family: Inter, Aptos, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(26px, 2.7vw, 40px);
  font-weight: 850;
  letter-spacing: -.045em !important;
}
.portal-v36-page .portal-v30__heading-line { background: linear-gradient(90deg, var(--cj36-gold-500), transparent); }
.portal-v36-page .portal-v30__modules {
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
  gap: 12px;
}
.portal-v36-page .portal-main-card {
  min-height: 386px;
  padding: 22px;
  border-radius: 18px;
  border-color: rgba(207,159,67,.34);
  background:
    linear-gradient(120deg, rgba(255,255,255,.025), transparent 45%),
    radial-gradient(circle at 84% 17%, rgba(234,209,139,.11), transparent 13rem),
    linear-gradient(145deg, #031910 0%, #063326 56%, #11553c 100%);
  box-shadow: 0 18px 42px rgba(3,18,12,.18);
}
.portal-v36-page .portal-main-card::before { height: 2px; }
.portal-v36-page .portal-main-card__visual { opacity: .45; }
.portal-v36-page .portal-main-card__icon {
  width: 48px;
  height: 48px;
  color: #2a1c07;
  border-radius: 11px;
  box-shadow: 0 9px 18px rgba(0,0,0,.18);
}
.portal-v36-page .portal-main-card__icon .cj-icon { width: 25px; height: 25px; }
.portal-v36-page .portal-main-card__number { color: rgba(255,250,240,.58); }
.portal-v36-page .portal-main-card__content { padding: 22px 0 18px; }
.portal-v36-page .portal-main-card__kicker { color: #e5ce91; font-size: 10px; }
.portal-v36-page .portal-main-card h2 {
  font-size: clamp(52px, 5.2vw, 78px);
  font-weight: 850 !important;
  letter-spacing: -.065em !important;
  text-shadow: 0 9px 22px rgba(0,0,0,.25);
}
.portal-v36-page .portal-main-card__open {
  min-width: 176px;
  min-height: 43px;
  border-radius: 9px;
  font-size: 12px;
  box-shadow: 0 9px 18px rgba(0,0,0,.18);
}
.portal-v36-page .portal-main-card__quick {
  min-height: 43px;
  border-radius: 9px;
  background: rgba(0,0,0,.12);
}
.portal-v36-page .portal-main-card__quick a {
  min-width: 78px;
  color: #f4ead0;
  font-size: 11px;
}
.portal-v36-page .portal-module-grid { gap: 12px; }
.portal-v36-page .portal-module-card {
  min-height: 187px;
  padding: 17px;
  border-radius: 16px;
  background: #fffdfa;
  border-color: var(--cj36-line);
  box-shadow: var(--cj36-shadow-sm);
}
.portal-v36-page .portal-module-card::before { height: 2px; }
.portal-v36-page .portal-module-card::after { opacity: .35; }
.portal-v36-page .portal-module-card:hover {
  transform: translateY(-2px);
  border-color: #c9b787;
  box-shadow: var(--cj36-shadow);
}
.portal-v36-page .portal-module-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 7px 15px rgba(10,60,40,.15);
}
.portal-v36-page .portal-module-card__icon .cj-icon { width: 22px; height: 22px; }
.portal-v36-page .portal-module-card__number { color: #948a78; font-size: 10px; }
.portal-v36-page .portal-module-card__name,
.portal-v36-page .portal-module-card--wide .portal-module-card__name {
  color: var(--cj36-ink);
  font-size: clamp(23px, 1.8vw, 31px);
  font-weight: 840;
  letter-spacing: -.045em;
}
.portal-v36-page .portal-module-card__arrow {
  width: 36px;
  height: 36px;
  right: 15px;
  bottom: 15px;
  color: var(--cj36-green-850);
  background: #edf3ef;
  border-color: #dce7df;
}
.portal-v36-page .portal-v30__footer { padding-top: 12px; color: #737b75; }

/* --------------------------------------------------------------------------
   Biljart
   -------------------------------------------------------------------------- */
.cj-page-biljart .overview-hero-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr) !important;
  gap: 22px !important;
}
.cj-page-biljart .overview-kicker { color: #e5ca85 !important; }
.cj-page-biljart .overview-hero h1 { color: #fffaf0 !important; }
.cj-page-biljart .hero-actions { gap: 8px !important; }
.cj-page-biljart .hero-action {
  min-height: 52px !important;
  padding: 11px 13px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.cj-page-biljart .hero-action strong { font-size: 13px; }
.cj-page-biljart .hero-action span { color: #5a451c !important; font-size: 10px; }
.cj-page-biljart .hero-action.alt {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.15) !important;
}
.cj-page-biljart .hero-action.alt span { color: #dacda9 !important; }
.cj-page-biljart .overview-stats {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.cj-page-biljart .overview-stat {
  min-height: 98px;
  padding: 15px 16px !important;
  border-radius: 13px !important;
  background: #fffdfa !important;
  border: 1px solid var(--cj36-line) !important;
  box-shadow: var(--cj36-shadow-xs) !important;
}
.cj-page-biljart .overview-stat::after { display: none; }
.cj-page-biljart .overview-stat small {
  color: #707973 !important;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cj-page-biljart .overview-stat strong {
  margin-top: 8px;
  color: var(--cj36-green-800) !important;
  font-size: 30px;
}
.cj-page-biljart .competition-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr)) !important;
  gap: 12px !important;
}
.cj-page-biljart .competition-card {
  position: relative;
  overflow: hidden;
  padding: 18px !important;
  border-radius: 13px !important;
  box-shadow: var(--cj36-shadow-xs) !important;
}
.cj-page-biljart .competition-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cj36-green-700), var(--cj36-gold-500));
}
.cj-page-biljart .competition-card h3 { margin: 13px 0 6px !important; font-size: 22px !important; }
.cj-page-biljart .competition-card p { min-height: 0 !important; }
.cj-page-biljart .competition-progress { height: 6px !important; margin: 14px 0 12px !important; }
.cj-page-biljart .competition-metrics { gap: 6px !important; }
.cj-page-biljart .competition-metrics span {
  padding: 9px 6px !important;
  background: var(--cj36-surface-soft) !important;
  border-color: #e8e1d6 !important;
  border-radius: 9px !important;
}
.cj-page-biljart .competition-metrics b { font-size: 18px !important; }
.cj-page-biljart .competition-actions { gap: 6px !important; margin-top: 13px !important; }
.cj-page-biljart .competition-actions .button { min-height: 39px !important; padding: 8px 11px !important; }
.cj-page-biljart .create-panel { border-radius: 13px !important; }
.cj-page-biljart .create-panel > summary { padding: 17px 19px !important; }

/* --------------------------------------------------------------------------
   Pubquiz
   -------------------------------------------------------------------------- */
.cj-page-pubquiz .wrap { max-width: 1180px !important; }
.cj-page-pubquiz .cards {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
}
.cj-page-pubquiz .card.hero {
  display: grid !important;
  grid-template-columns: 90px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  color: #fffaf0 !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(234,209,139,.12), transparent 12rem),
    linear-gradient(135deg, #06231a, #0d4934) !important;
  border-color: rgba(234,209,139,.22) !important;
  box-shadow: var(--cj36-shadow) !important;
}
.cj-page-pubquiz .card.hero img {
  width: 82px !important;
  height: 92px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.23));
}
.cj-page-pubquiz .card.hero h2 { color: #fffaf0 !important; font-size: 25px !important; }
.cj-page-pubquiz .card.hero .small { color: rgba(255,250,240,.78) !important; }
.cj-page-pubquiz .card.hero .badge { color: #4e3812 !important; background: #f0dda7 !important; }
.cj-page-pubquiz .toolbar {
  align-items: center !important;
  padding-bottom: 11px;
  border-bottom: 1px solid #ece6dc;
}
.cj-page-pubquiz .grid2 { gap: 12px !important; }
.cj-page-pubquiz .check {
  padding: 12px !important;
  background: var(--cj36-surface-soft) !important;
  border: 1px solid #e5ded2 !important;
  border-radius: 10px !important;
}
.cj-page-pubquiz .checks { gap: 8px !important; }
.cj-page-pubquiz .item {
  padding: 15px !important;
  margin-top: 10px !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}
.cj-page-pubquiz .item h3 { font-size: 20px !important; }
.cj-page-pubquiz .item .btn { min-height: 38px !important; padding: 8px 11px !important; }

/* --------------------------------------------------------------------------
   Klaverjas, Dart en overige modules
   -------------------------------------------------------------------------- */
.cj-page-klaverjas .planner-grid {
  grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr) !important;
  gap: 16px !important;
}
.cj-page-klaverjas .planner > summary,
.cj-page-klaverjas .create-panel > summary { padding: 17px 19px !important; }
.cj-page-klaverjas .duo-row {
  padding: 12px !important;
  border: 1px solid #e4ddd2 !important;
  border-radius: 10px !important;
  background: var(--cj36-surface-soft) !important;
}
.cj-page-klaverjas .kj-grid,
.cj-page-dart .grid,
.cj-page-dart-dashboard .grid,
.cj-page-dart-dashboard .round-grid {
  grid-template-columns: repeat(auto-fit, minmax(285px,1fr)) !important;
  gap: 12px !important;
}
.cj-page-klaverjas .kj-card,
.cj-page-dart .item,
.cj-page-dart-dashboard .item {
  position: relative;
  overflow: hidden;
  padding: 17px !important;
  border-radius: 12px !important;
  box-shadow: var(--cj36-shadow-xs) !important;
}
.cj-page-klaverjas .kj-card::before,
.cj-page-dart .item::before,
.cj-page-dart-dashboard .item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cj36-green-700), var(--cj36-gold-500));
}
.cj-page-klaverjas .kj-actions,
.cj-page-dart .inline-form,
.cj-page-dart-dashboard .actions {
  gap: 7px !important;
}

/* Dashboard- en beheerkaarten */
.cj-page-beheer .quick-stats,
.cj-page-biljart .overview-stats,
.cj-page-competitie-dashboard .stats-grid,
.cj-page-klaverjas-dashboard .overview-stats {
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr)) !important;
  gap: 10px !important;
}
.cj-page-beheer .competition-list,
.cj-page-oude-competities .grid,
.cj-page-scorebord-beheer .grid,
.cj-page-tafelborden-beheer .settings {
  gap: 12px !important;
}
.cj-page-competitie-dashboard .grid-two,
.cj-page-speler-gemiddeldes .grid-two,
.cj-page-teampagina .team-grid {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 14px !important;
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.cj-page-login .login-shell {
  width: min(920px,100%) !important;
  border-radius: 20px !important;
  border-color: rgba(234,209,139,.24) !important;
  box-shadow: 0 28px 64px rgba(0,0,0,.28) !important;
}
.cj-page-login .login-brand {
  padding: 42px !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(234,209,139,.15), transparent 18rem),
    linear-gradient(145deg, #041c14, #0b3e2c 64%, #11513a) !important;
}
.cj-page-login .login-logo {
  display: flex !important;
  width: auto !important;
  align-items: center;
  gap: 13px;
  margin-bottom: 44px !important;
}
.cj-page-login .login-logo img {
  width: 64px !important;
  height: 64px !important;
  filter: drop-shadow(0 9px 16px rgba(0,0,0,.25)) !important;
}
.cj-page-login .login-logo b { display: block; color: #fffaf0; font-size: 23px; letter-spacing: -.03em; }
.cj-page-login .login-logo small { display: block; margin-top: 3px; color: #ddc98f; font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.cj-page-login .login-form-panel { padding: 42px !important; }
.cj-page-login .login-form-panel button { width: 100% !important; }

/* --------------------------------------------------------------------------
   Scorebordbeheer en mobiele bediening
   -------------------------------------------------------------------------- */
.cj-page-scorebord-mobiel {
  background: linear-gradient(180deg, #eae7df, #f5f3ee) !important;
}
.cj-page-scorebord-mobiel .head {
  padding: 10px 12px !important;
  background: linear-gradient(135deg, #031b13, #0b3c2b) !important;
  border-bottom: 2px solid var(--cj36-gold-500) !important;
  box-shadow: 0 8px 18px rgba(3,18,12,.18) !important;
}
.cj-page-scorebord-mobiel .mobile-score-brand {
  gap: 9px !important;
  margin-bottom: 8px !important;
}
.cj-page-scorebord-mobiel .mobile-score-brand img { width: 40px !important; height: 40px !important; }
.cj-page-scorebord-mobiel .mobile-score-brand b { font-size: 16px !important; }
.cj-page-scorebord-mobiel .mobile-score-brand small { font-size: 9px !important; }
.cj-page-scorebord-mobiel .headline { gap: 6px !important; }
.cj-page-scorebord-mobiel .head a {
  min-height: 38px;
  padding: 8px 10px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px !important;
  font-size: 11px !important;
}
.cj-page-scorebord-mobiel .wrap { max-width: 920px !important; padding: 12px !important; }
.cj-page-scorebord-mobiel .card {
  margin-bottom: 10px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: #fffdfa !important;
  box-shadow: var(--cj36-shadow-sm) !important;
}
.cj-page-scorebord-mobiel .btn { min-height: 42px !important; border-radius: 9px !important; }

/* --------------------------------------------------------------------------
   TV-scoreborden
   -------------------------------------------------------------------------- */
.cj-page-poule-scorebord {
  --green: #052319 !important;
  --green2: #115039 !important;
  --gold: #d0a347 !important;
  --cream: #fff8e8 !important;
  background: radial-gradient(circle at 50% -10%, #27664a 0%, #07291e 46%, #03110c 100%) !important;
}
.cj-page-poule-scorebord .hero {
  border: 1px solid rgba(234,209,139,.22) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(3,25,18,.92), rgba(14,65,46,.86)) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.23) !important;
}
.cj-page-poule-scorebord .score-brand { color: #ead18b !important; }
.cj-page-poule-scorebord .score-brand img { width: 38px !important; height: 38px !important; }
.cj-page-poule-scorebord .title { color: #fffaf0 !important; }
.cj-page-poule-scorebord .subtitle,
.cj-page-poule-scorebord .clock span,
.cj-page-poule-scorebord .stat span { color: #d9cfb5 !important; }
.cj-page-poule-scorebord .clock strong,
.cj-page-poule-scorebord .stat b { color: #ead18b !important; }
.cj-page-poule-scorebord .stat {
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}
.cj-page-poule-scorebord .card {
  color: var(--cj36-ink) !important;
  background: #fffdfa !important;
  border: 1px solid rgba(207,159,67,.65) !important;
  border-radius: 13px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}
.cj-page-poule-scorebord .card h2 {
  color: #fffaf0 !important;
  background: var(--cj36-green-850) !important;
  border-bottom: 1px solid rgba(234,209,139,.22);
}
.cj-page-poule-scorebord .leader,
.cj-page-poule-scorebord .poule-card,
.cj-page-poule-scorebord .ko-round,
.cj-page-poule-scorebord .feed-item {
  color: var(--cj36-ink) !important;
  background: #fff !important;
  border-color: #e5ddd0 !important;
  box-shadow: none !important;
}
.cj-page-poule-scorebord .petra-commentator {
  border: 1px solid rgba(234,209,139,.20) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(3,24,17,.88), rgba(10,52,37,.82)) !important;
}

.cj-page-pubquiz-scorebord {
  background: radial-gradient(circle at 50% -18%, #2a6d50, #07291d 54%, #03110c) !important;
}
.cj-page-pubquiz-scorebord .bulbs { opacity: .42; border-width: 1px !important; }
.cj-page-pubquiz-scorebord .header {
  padding: 9px 12px !important;
  border: 1px solid rgba(234,209,139,.20) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(3,25,18,.88), rgba(12,57,41,.82)) !important;
}
.cj-page-pubquiz-scorebord .brand .cj-show-logo { width: 50px !important; height: 50px !important; flex-basis: 50px !important; }
.cj-page-pubquiz-scorebord .brand #hostimg { width: 60px !important; height: 60px !important; }
.cj-page-pubquiz-scorebord .brand h1 {
  color: #fffaf0 !important;
  font-family: Inter, Aptos, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(28px,3vw,48px) !important;
  letter-spacing: -.04em;
}
.cj-page-pubquiz-scorebord .panel {
  border: 1px solid rgba(207,159,67,.75) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.22) !important;
}
.cj-page-pubquiz-scorebord .main { background: #fffdfa !important; }
.cj-page-pubquiz-scorebord .side { background: linear-gradient(155deg, #0b3a29, #041b13) !important; }
.cj-page-pubquiz-scorebord .question,
.cj-page-pubquiz-scorebord .big { color: var(--cj36-ink) !important; }
.cj-page-pubquiz-scorebord .option { border-radius: 10px !important; border-width: 1px !important; box-shadow: none !important; }
.cj-page-pubquiz-scorebord .qr { border-width: 1px !important; border-radius: 10px !important; }

.cj-page-kale-kop-scorebord .tv-head {
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(3,25,18,.94), rgba(13,61,43,.88)) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .portal-v36-page .portal-v30__modules { grid-template-columns: 1fr; }
  .portal-v36-page .portal-main-card { min-height: 340px; }
  .portal-v36-page .portal-module-card { min-height: 155px; }
  .cj-page-biljart .overview-hero-grid,
  .cj-page-klaverjas .planner-grid,
  .cj-page-competitie-dashboard .grid-two,
  .cj-page-speler-gemiddeldes .grid-two,
  .cj-page-teampagina .team-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 980px) {
  .cj-shell {
    position: sticky !important;
    inset: 0 auto auto !important;
    width: 100% !important;
    height: 58px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(234,209,139,.19) !important;
    box-shadow: 0 8px 22px rgba(3,18,12,.20) !important;
  }
  .cj-shell::after { inset: auto 0 0 !important; width: auto !important; height: 2px !important; }
  .cj-shell__mobilebar {
    display: flex !important;
    height: 58px !important;
    gap: 10px !important;
    padding: 7px 10px !important;
  }
  .cj-shell__mobile-brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: 9px !important;
  }
  .cj-shell__mobile-brandmark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }
  .cj-shell__mobile-brand b {
    max-width: min(56vw, 360px);
    overflow: hidden;
    color: #fffaf0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cj-shell__toggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #251906 !important;
    background: linear-gradient(135deg, #ead18b, #c99539) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.16) !important;
  }
  .cj-shell__toggle span { display: none !important; }
  .cj-shell__panel {
    position: fixed !important;
    inset: 58px 0 0 !important;
    height: calc(100dvh - 58px) !important;
    padding: 13px 11px 16px !important;
    background: linear-gradient(180deg, #031710, #082d21) !important;
    border-bottom: 0 !important;
    box-shadow: 0 20px 45px rgba(3,18,12,.36) !important;
  }
  .cj-shell__nav,
  .cj-shell__subnav { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
  .cj-shell__link,
  .cj-shell__sublink { min-height: 44px !important; }
  body.cj-has-admin-shell,
  body.cj-has-public-shell { padding-left: 0 !important; }
  body.cj-has-admin-shell .container,
  body.cj-has-public-shell .container,
  body.cj-has-admin-shell .wrap,
  body.cj-has-public-shell .wrap,
  body.cj-has-admin-shell .manage-wrap,
  body.cj-has-public-shell .manage-wrap,
  body.cj-has-admin-shell main.container,
  body.cj-has-public-shell main.container {
    width: min(100% - 22px, var(--cj36-content)) !important;
    padding-top: 14px !important;
  }
  .cj-page-pubquiz .cards { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  body.cj-has-admin-shell .card,
  body.cj-has-public-shell .card,
  body.cj-has-admin-shell .section,
  body.cj-has-public-shell .section,
  body.cj-has-admin-shell .section-card,
  body.cj-has-public-shell .section-card,
  body.cj-has-admin-shell .panel,
  body.cj-has-public-shell .panel { padding: 15px !important; border-radius: 12px !important; }
  body.cj-has-admin-shell .cj-page-hero,
  body.cj-has-public-shell .cj-page-hero,
  body.cj-has-admin-shell .overview-hero,
  body.cj-has-public-shell .overview-hero { padding: 18px !important; border-radius: 14px !important; }
  body.cj-has-admin-shell .row,
  body.cj-has-public-shell .row,
  body.cj-has-admin-shell .grid2,
  body.cj-has-public-shell .grid2,
  body.cj-has-admin-shell .grid-two,
  body.cj-has-public-shell .grid-two,
  body.cj-has-admin-shell .planner-grid,
  body.cj-has-public-shell .planner-grid { grid-template-columns: 1fr !important; }
  body.cj-has-admin-shell .row,
  body.cj-has-public-shell .row { flex-direction: column !important; }
  body.cj-has-admin-shell .row > div,
  body.cj-has-public-shell .row > div { width: 100%; min-width: 0; }
  body.cj-has-admin-shell .button-row,
  body.cj-has-public-shell .button-row,
  body.cj-has-admin-shell .actions,
  body.cj-has-public-shell .actions,
  body.cj-has-admin-shell .action-row,
  body.cj-has-public-shell .action-row,
  body.cj-has-admin-shell .start-actions,
  body.cj-has-public-shell .start-actions,
  body.cj-has-admin-shell .form-actions,
  body.cj-has-public-shell .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.cj-has-admin-shell .button-row .button,
  body.cj-has-public-shell .button-row .button,
  body.cj-has-admin-shell .actions .button,
  body.cj-has-public-shell .actions .button,
  body.cj-has-admin-shell .action-row .button,
  body.cj-has-public-shell .action-row .button,
  body.cj-has-admin-shell .start-actions .button,
  body.cj-has-public-shell .start-actions .button,
  body.cj-has-admin-shell .form-actions .button,
  body.cj-has-public-shell .form-actions .button { width: 100%; }
  table { min-width: 620px; }
  .card:has(table), .section:has(table), .section-card:has(table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  .portal-v36-page .portal-v30 { width: min(100% - 14px, 1420px); padding-top: 7px; }
  .portal-v36-page .portal-v30__top {
    min-height: 62px;
    padding: 9px 10px;
    border-radius: 13px;
  }
  .portal-v36-page .portal-v34__brand { gap: 9px; }
  .portal-v36-page .portal-v34__brand-mark,
  .portal-v36-page .portal-v34__brand-mark img { width: 43px; height: 43px; flex-basis: 43px; }
  .portal-v36-page .portal-v34__brand-copy strong { font-size: 22px; }
  .portal-v36-page .portal-v34__brand-copy small { max-width: 205px; font-size: 8px; letter-spacing: .11em; white-space: normal; }
  .portal-v36-page .portal-v30__account-link { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .portal-v36-page .portal-v30__account-link span { display: none; }
  .portal-v36-page .portal-v30__heading {
    min-height: 62px;
    margin: 9px 0;
    padding: 11px 14px;
    border-radius: 12px;
  }
  .portal-v36-page .portal-v30__heading-line { display: none; }
  .portal-v36-page .portal-v30__heading h1 { font-size: 25px; }
  .portal-v36-page .portal-main-card {
    min-height: 284px;
    padding: 17px;
    border-radius: 14px;
  }
  .portal-v36-page .portal-main-card__content { padding: 15px 0 13px; }
  .portal-v36-page .portal-main-card h2 { font-size: clamp(44px, 15vw, 62px); }
  .portal-v36-page .portal-main-card__bottom { display: grid; grid-template-columns: 1fr; }
  .portal-v36-page .portal-main-card__open { width: 100%; }
  .portal-v36-page .portal-main-card__quick { width: 100%; }
  .portal-v36-page .portal-main-card__quick a { flex: 1; min-width: 0; }
  .portal-v36-page .portal-module-grid { grid-template-columns: 1fr; gap: 8px; }
  .portal-v36-page .portal-module-card,
  .portal-v36-page .portal-module-card--wide {
    min-height: 92px;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border-radius: 12px;
  }
  .portal-v36-page .portal-module-card__top { display: contents; }
  .portal-v36-page .portal-module-card__icon { flex: 0 0 43px; }
  .portal-v36-page .portal-module-card__number {
    position: absolute;
    right: 14px;
    top: 10px;
  }
  .portal-v36-page .portal-module-card__name,
  .portal-v36-page .portal-module-card--wide .portal-module-card__name {
    max-width: calc(100% - 92px);
    margin: 0;
    font-size: 23px;
  }
  .portal-v36-page .portal-module-card__arrow {
    position: static;
    flex: 0 0 34px;
    margin-left: auto;
    width: 34px;
    height: 34px;
  }

  .cj-page-biljart .overview-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .cj-page-biljart .overview-stat { min-height: 84px; padding: 12px !important; }
  .cj-page-biljart .overview-stat strong { font-size: 25px; }
  .cj-page-biljart .competition-grid,
  .cj-page-klaverjas .kj-grid,
  .cj-page-dart .grid,
  .cj-page-dart-dashboard .grid,
  .cj-page-scorebord-beheer .grid,
  .cj-page-tafelborden-beheer .settings { grid-template-columns: 1fr !important; }
  .cj-page-biljart .competition-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .cj-page-biljart .competition-actions .button-primary { grid-column: 1 / -1; }
  .cj-page-pubquiz .card.hero { grid-template-columns: 66px minmax(0,1fr) !important; gap: 12px !important; }
  .cj-page-pubquiz .card.hero img { width: 62px !important; height: 72px !important; }
  .cj-page-pubquiz .card.hero h2 { font-size: 21px !important; }
  .cj-page-pubquiz .toolbar { align-items: flex-start !important; }
  .cj-page-pubquiz .toolbar .btn { width: auto !important; }
  .cj-page-pubquiz .item > div:last-child { gap: 6px !important; }
  .cj-page-pubquiz .item .btn { flex: 1 1 140px; }

  .cj-page-scorebord-mobiel .headline { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .cj-page-scorebord-mobiel .head a { width: 100%; justify-content: center; text-align: center; }
  .cj-page-pubquiz-scorebord .stage { min-height: 100dvh !important; height: auto !important; padding: 8px !important; }
  .cj-page-pubquiz-scorebord .header { align-items: flex-start !important; }
  .cj-page-pubquiz-scorebord .brand { gap: 7px !important; }
  .cj-page-pubquiz-scorebord .brand .cj-show-logo { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .cj-page-pubquiz-scorebord .brand #hostimg { width: 45px !important; height: 45px !important; }
  .cj-page-pubquiz-scorebord .brand h1 { font-size: 23px !important; }
  .cj-page-pubquiz-scorebord .grid,
  .cj-page-pubquiz-scorebord .side,
  .cj-page-pubquiz-scorebord .options { grid-template-columns: 1fr !important; }
}

@media (max-width: 520px) {
  .cj-shell__nav, .cj-shell__subnav { grid-template-columns: 1fr !important; }
  .cj-shell__mobile-brand b { max-width: 56vw; }
  .cj-page-scorebord-mobiel .headline { grid-template-columns: 1fr !important; }
  .cj-page-login .login-shell { border-radius: 14px !important; }
  .cj-page-login .login-brand, .cj-page-login .login-form-panel { padding: 24px !important; }
  .cj-page-login .login-logo { margin-bottom: 28px !important; }
  .cj-page-login .login-logo img { width: 52px !important; height: 52px !important; }
  .cj-page-login .login-logo b { font-size: 20px; }
}