/* ── PickleHub base styles (colors → css/themes.css) ── */
:root {
  --pb: rgba(0,0,0,0.08);
  --pr: 12px;
  --prs: 8px;
  /* Responsive layout tokens — see docs/RESPONSIVE_DESIGN_PLAN.md */
  --app-gutter: 12px;
  --app-max: 100%;
  --app-max-wide: min(1800px, 100vw);
  --bottom-nav-h: 56px;
  --sidebar-w: 210px;
  /* Chrome (topbar, bottom nav) vs modal overlays — panels must sit above chrome */
  --z-chrome: 1200;
  --z-modal-overlay: 1300;
  --z-modal-panel: 1301;
  /* Nested modal opened from another modal (e.g. full results from event detail) */
  --z-modal-stack-overlay: 1320;
  --z-modal-stack-panel: 1321;
  /* Full-screen TD console — above sidebar/topbar chrome */
  --z-live-session: 1330;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--body-bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--app-gutter);
  overflow: hidden;
}
#app-shell {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  overflow: hidden;
}
.shell {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 760px;
  background: var(--psu);
  border-radius: 16px;
  overflow: hidden;
  border: 0.5px solid rgba(0,0,0,0.1);
  position: relative;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--prs);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
}
.btn-y  { background: var(--py);  color: var(--pn); font-weight: 600; }
.btn-y:hover { filter: brightness(0.94); }
.btn-o  { background: white; color: var(--ps); border: 0.5px solid var(--pb); }
.btn-o:hover { background: #ECEFF1; }
.btn-g  { background: var(--pg); color: white; }
.btn-g:hover { background: var(--pgd); }
.btn-r  { background: #FFEBEE; color: #C62828; border: 0.5px solid #FFCDD2; }
.btn-r:hover { background: #FFCDD2; }

/* ── Main layout ── */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.topbar {
  background: white;
  border-bottom: 0.5px solid var(--pb);
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-chrome);
}
.tb-head { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }
.tb-head-text { min-width: 0; flex: 1 1 auto; }
.tb-module-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 0.5px solid #C5CAE9;
  background: #EEF2FF;
  color: #3949AB;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  max-width: min(200px, 42vw);
}
.tb-module-back[hidden] { display: none !important; }
.tb-module-back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-module-back:hover { background: #E8EAF6; border-color: #7986CB; }
.tb-module-back .ti { font-size: 14px; flex-shrink: 0; }
.tb-title { font-size: 15px; font-weight: 600; color: var(--pn); }
.tb-sub   { font-size: 10px; color: #546E7A; margin-top: 1px; }

/* Contextual module headers (Players-style subtitle) */
.tb-head-text--module .tb-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tb-sub.tb-sub--module,
.tb-sub.tb-sub--players {
  font-size: 12px;
  font-weight: 600;
  color: #455a64;
  line-height: 1.4;
  margin-top: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: min(100%, 36rem);
}
@media (min-width: 721px) {
  .tb-head-text--module .tb-title { font-size: 17px; }
  .tb-sub.tb-sub--module,
  .tb-sub.tb-sub--players {
    font-size: 14px;
    color: #37474f;
  }
}
.tb-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: 12px;
}
.tb-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 0.5px solid var(--pb);
  border-radius: 999px;
  background: #F7F9F7;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  max-width: min(220px, 34vw);
}
.tb-user-chip:hover { background: #ECEFF1; }
.tb-user-chip:focus-visible { outline: 2px solid var(--pg); outline-offset: 2px; }
.tb-user-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pg);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tb-user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}
.tb-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--pn);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.tb-user-role {
  font-size: 10px;
  color: #90A4AE;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.tb-user-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* Dev-only MLP UAT user switcher (localhost) */
html.dink-hosted .dev-skip-auth,
html.dink-hosted .tb-dev-switch-wrap,
html.dink-hosted .mlp-uat-login-banner {
  display: none !important;
  visibility: hidden !important;
}
.tb-dev-switch-wrap {
  display: none;
  align-items: center;
}
.tb-dev-switch-wrap.is-visible {
  display: flex;
}
.tb-dev-switch-sel {
  max-width: 132px;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px dashed #FFB74D;
  background: #FFF8E1;
  color: #9A3400;
  cursor: pointer;
}
.tb-dev-switch-sel:focus-visible {
  outline: 2px solid var(--pg);
  outline-offset: 2px;
}
@media (min-width: 1024px) {
  .tb-dev-switch-sel { max-width: 180px; font-size: 12px; }
}
.tb-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #607D8B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.tb-icon-btn:hover { background: #ECEFF1; color: var(--pn); }
.tb-icon-btn:focus-visible { outline: 2px solid var(--pg); outline-offset: 2px; }
.tb-edit-profile-btn {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.tb-edit-profile-btn i { font-size: 13px; }

/* Top-right module CTAs should stand out more than inline utility buttons. */
.tb-actions,
#tb-actions {
  display: flex;
  gap: 9px;
}
#tb-actions .btn {
  min-height: 36px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
#tb-actions .btn i {
  font-size: 14px;
}
#tb-actions .btn-o {
  border-width: 1px;
}
#tb-actions .btn:focus-visible {
  outline: 2px solid var(--pg);
  outline-offset: 2px;
}
.view { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; -webkit-overflow-scrolling: touch; }

/* ── Toast (global — use showToast() for all in-app messages) ── */
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: calc(var(--z-modal-stack-overlay, 1320) + 40);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: min(480px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(145deg, #1a3a8f 0%, var(--pn) 55%, #2a4fad 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  box-shadow:
    0 16px 48px rgba(15, 30, 74, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% + 12px)) scale(0.97);
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.toast-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--py);
}
.toast-msg {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}
.toast--error {
  background: linear-gradient(145deg, #3d1f28 0%, #5c1a33 45%, var(--pn) 100%);
  box-shadow:
    0 16px 48px rgba(61, 31, 40, 0.32),
    0 4px 12px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.toast--error .toast-icon { color: #FFE082; }
.toast--warn {
  background: linear-gradient(145deg, #E65100 0%, #FF6D00 55%, #FF9100 100%);
  color: #fff;
  box-shadow:
    0 16px 48px rgba(230, 81, 0, 0.32),
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.toast--warn .toast-icon { color: #FFF8E1; }
.toast--info { /* default navy */ }
@media (max-width: 767px) {
  .toast {
    max-width: min(480px, calc(100vw - 24px));
    padding: 13px 18px;
    font-size: 12px;
  }
}

/* ── Slide-in panel ── */
.panel-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--overlay);
  z-index: 40;
}
.panel-overlay.open { display: block; }
.panel {
  position: absolute;
  top: 0; right: 0;
  width: 440px;
  height: 100%;
  background: white;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 41;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.panel.open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .panel,
  .toast,
  .ec,
  .btn {
    transition: none !important;
  }
  .toast {
    transform: translate(-50%, -50%);
  }
  .toast.show {
    transform: translate(-50%, -50%);
  }
}
.panel-hd {
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--pb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.panel-title  { font-size: 14px; font-weight: 600; color: var(--pn); }
.panel-close  {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #90A4AE;
  font-size: 16px;
  border: none;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
  font-family: inherit;
}
.panel-close:hover { background: #F7F9F7; color: var(--ps); }
.panel-close:focus-visible { outline: 2px solid var(--pg); outline-offset: 2px; }
.panel-body   { flex: 1; overflow-y: auto; padding: 16px; }
.panel-actions {
  padding: 12px 16px;
  border-top: 0.5px solid var(--pb);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Overlay / modal shell ── */
.overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(26,35,126,0.4);
  z-index: 1300;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
}
.overlay.open { display: flex; }
.overlay.overlay--viewport {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-stack-overlay);
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.modal {
  background: white;
  border-radius: 14px;
  width: 500px;
  max-height: 84vh;
  overflow-y: auto;
  padding: 22px;
  position: relative;
}
.modal-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.modal-hd-text { flex: 1; min-width: 0; }
.modal-hd-text .m-sub { margin-bottom: 0; }

/* Back navigation */
.ph-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 16px 10px 12px;
  border: 1.5px solid rgba(46, 125, 50, 0.4);
  border-radius: 999px;
  background: linear-gradient(180deg, #F1F8F2 0%, #E8F5E9 100%);
  color: #1B5E20;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(46, 125, 50, 0.14);
  transition: border-color 0.12s, color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.12s;
}
.ph-back-btn i { font-size: 18px; line-height: 1; }
.ph-back-btn:hover {
  border-color: var(--pg);
  color: #fff;
  background: linear-gradient(180deg, #66BB6A, var(--pg));
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.28);
  transform: translateY(-1px);
}
.ph-back-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
}
.ph-back-btn:focus-visible {
  outline: 2px solid var(--pg);
  outline-offset: 2px;
}
.ph-back-btn--overlay { margin-right: 8px; }
.ph-back-btn--from-group {
  background: #EEF2FF;
  border: 0.5px solid #7986CB;
  color: #3949AB;
  font-weight: 600;
}
.ph-back-btn--from-group:hover { background: #E8EAF6; }
.ph-panel-hd {
  gap: 10px;
}
.ph-panel-hd .panel-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #90A4AE;
  font-size: 18px;
  line-height: 1;
}
.modal-close:hover { background: #F7F9F7; color: var(--ps); }
.modal-close:focus-visible { outline: 2px solid var(--pg); outline-offset: 2px; }

.create-capacity-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.create-capacity-unit { flex: 1; min-width: 160px; max-width: 220px; }
.create-capacity-unit .seg-b { flex: 1; font-size: 11px; padding: 6px 8px; }
.create-capacity-unit .seg-b.cap-unit-disabled,
.create-capacity-unit .seg-b:disabled { opacity: 0.45; cursor: not-allowed; }
.create-capacity-hint {
  font-size: 12px;
  font-weight: 500;
  color: #546E7A;
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ── Form elements ── */
.fl {
  font-size: 10px;
  font-weight: 600;
  color: var(--ps);
  margin-bottom: 4px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fi {
  width: 100%;
  padding: 8px 10px;
  border: 0.5px solid #CFD8DC;
  border-radius: var(--prs);
  font-size: 12px;
  color: var(--ps);
  outline: none;
  font-family: 'Outfit', sans-serif;
}
.fi:focus { border-color: var(--pg); }
.field-hint {
  font-size: 11px;
  color: #546E7A;
  margin: 5px 0 0;
  line-height: 1.5;
}

/* Create event — type panels & tooltips */
.cfg-format-section {
  background: #F7F9F7;
  border-radius: var(--prs);
  padding: 12px;
  margin-bottom: 8px;
}
.cfg-format-basic {
  margin-bottom: 10px;
}
.cfg-format-advanced {
  margin-top: 0;
  background: #fff;
  border: 0.5px solid var(--pb);
}
.cfg-scoring-options {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 0.5px solid var(--pb);
}
.cfg-scoring-trow {
  margin-bottom: 0;
  padding: 8px 0;
}
.cfg-scoring-trow:last-of-type {
  margin-bottom: 2px;
}

.cfg-block-white {
  background: #fff;
  border-radius: var(--prs);
  padding: 10px;
  border: 0.5px solid var(--pb);
}
.type-intro-short {
  margin-bottom: 8px;
}

.cfg-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  background: #F7F9F7;
  border: 0.5px solid var(--pb);
  border-radius: var(--prs);
  margin: 12px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.cfg-advanced-toggle:hover {
  background: #EEF2EE;
  border-color: #B0BEC5;
}
.cfg-advanced-toggle.expanded {
  background: var(--pnl);
  border-color: #9FA8DA;
  border-radius: var(--prs) var(--prs) 0 0;
  margin-bottom: 0;
}
.cfg-adv-toggle-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.cfg-adv-icon {
  color: var(--pn);
  font-size: 18px;
  margin-top: 1px;
  flex-shrink: 0;
}
.cfg-adv-chevron {
  color: #90A4AE;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.cfg-advanced-toggle.expanded .cfg-adv-chevron {
  color: var(--pn);
}

.cfg-advanced-wrap {
  display: none;
  border: 0.5px solid #9FA8DA;
  border-top: none;
  border-radius: 0 0 var(--prs) var(--prs);
  margin-bottom: 12px;
  overflow: hidden;
}
.cfg-advanced-wrap.open {
  display: block;
}

/* Create event — Tournament advanced (eye-catching) */
.cfg-advanced-toggle--tournament {
  background: linear-gradient(135deg, #EDE7F6 0%, #FFF8E1 100%);
  border-color: #B39DDB;
}
.cfg-advanced-toggle--tournament:hover {
  background: linear-gradient(135deg, #E1BEE7 0%, #FFF9C4 100%);
  border-color: #9575CD;
}
.cfg-advanced-toggle--tournament.expanded {
  background: linear-gradient(135deg, #D1C4E9 0%, #FFE082 55%, #FFFDE7 100%);
  border-color: #7E57C2;
}
.cfg-advanced-wrap--tournament.open {
  border-color: #B39DDB;
  background: linear-gradient(180deg, #FAF8FC 0%, #FFFBF0 100%);
}
.cfg-format-advanced--tournament {
  background: transparent;
  border: none;
  padding: 12px 10px 14px;
}
.cfg-format-advanced--tournament .cfg-format-hd {
  font-size: 11px;
  color: #5E35B1;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #D1C4E9;
}

.cfg-tournament-panel {
  margin: 0 -4px;
  padding: 0;
  border: none;
  background: transparent;
}
.cfg-tn-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EDE7F6 0%, #E8EAF6 40%, #FFF8E1 100%);
  border: 1px solid #CE93D8;
  box-shadow: 0 2px 12px rgba(94, 53, 177, 0.08);
}
.cfg-tn-hero-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(145deg, #7E57C2, #5E35B1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(94, 53, 177, 0.25);
}
.cfg-tn-hero-title {
  font-size: 14px;
  font-weight: 700;
  color: #4527A0;
  margin: 0 0 4px;
}
.cfg-tn-hero-lead {
  margin: 0;
  font-size: 11px;
  color: #5C6BC0;
  line-height: 1.45;
  max-width: 280px;
}
.cfg-tn-hero-tip {
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
}

.cfg-tn-section {
  border-radius: 10px;
  border: 1px solid #E1BEE7;
  background: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(94, 53, 177, 0.06);
}
.cfg-tn-section-divisions {
  border-color: #CE93D8;
  background: linear-gradient(180deg, #FDFAFF 0%, #FFF 100%);
}
.cfg-tn-section-draws {
  border-color: #FFD54F;
  background: linear-gradient(180deg, #FFFDE7 0%, #FFF 100%);
}
.cfg-tn-section-hd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(206, 147, 216, 0.25);
}
.cfg-tn-section-hd-static {
  border-bottom-color: rgba(255, 213, 79, 0.35);
}
.cfg-tn-section-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #7E57C2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cfg-tn-section-draws .cfg-tn-section-num {
  background: #F9A825;
  color: #3E2723;
}
.cfg-tn-section-titles { flex: 1; min-width: 0; }
.cfg-tn-section-title {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pn);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.cfg-tn-section-sub {
  margin: 0;
  font-size: 10px;
  color: #78909C;
  line-height: 1.4;
}
.cfg-tn-section-body {
  padding: 10px 12px 12px;
}
.cfg-tn-hint { margin: 4px 0 10px !important; }
.cfg-tn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.btn-sm-tn { font-size: 10px; padding: 5px 10px; }
.cfg-tn-rules-hd {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #90A4AE;
  margin: 4px 0 8px;
}
.cfg-tn-rules-grid { margin-top: 6px; }
.cfg-tn-rule-row-compact { margin-top: 4px; }
.cfg-draw-row-tn {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 8px 8px 8px 10px;
  margin-bottom: 6px;
  border: 1px solid #ECEFF1;
}
.cfg-draw-lbl {
  font-size: 9px;
  color: #90A4AE;
  align-self: center;
  white-space: nowrap;
}
.cfg-tn-preview-btn { margin-top: 6px; font-size: 10px; }
.cfg-bracket-preview,
.cfg-tn-bracket-preview {
  margin: 8px 0 10px;
  padding: 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #CE93D8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.cfg-bracket-preview:not(.open),
.cfg-tn-bracket-preview:not(.open) {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}
.cfg-bracket-preview-hint,
.cfg-bracket-preview .ls-hint,
.cfg-tn-bracket-preview .ls-hint {
  color: #455A64 !important;
  font-size: 11px;
  margin: 0 0 12px;
  line-height: 1.45;
}
.cfg-bracket-preview .mrr-bracket-wrap,
.cfg-tn-bracket-preview .mrr-bracket-wrap {
  margin-top: 0;
}
.cfg-bracket-preview .mrr-bracket-title,
.cfg-tn-bracket-preview .mrr-bracket-title {
  color: #4527A0 !important;
  font-size: 13px;
  margin-bottom: 10px;
}
.cfg-bracket-preview .mrr-bracket-seeds-block,
.cfg-tn-bracket-preview .mrr-bracket-seeds-block {
  margin-bottom: 12px;
}
.cfg-bracket-preview .mrr-bracket-seeds-toggle,
.cfg-tn-bracket-preview .mrr-bracket-seeds-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #E1BEE7;
  background: #F3E5F5;
  color: #4527A0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cfg-bracket-preview .mrr-bracket-seeds-toggle:hover,
.cfg-tn-bracket-preview .mrr-bracket-seeds-toggle:hover {
  background: #EDE7F6;
  border-color: #CE93D8;
}
.cfg-bracket-preview .mrr-bracket-seeds-block.is-open .mrr-bracket-seeds-toggle,
.cfg-tn-bracket-preview .mrr-bracket-seeds-block.is-open .mrr-bracket-seeds-toggle {
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
  border-bottom: none;
}
.cfg-bracket-preview .mrr-bracket-seeds-block .mrr-bracket-seeds,
.cfg-tn-bracket-preview .mrr-bracket-seeds-block .mrr-bracket-seeds {
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid #E1BEE7;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #FDFAFF;
}
.cfg-bracket-preview .mrr-bracket-seeds-block .mrr-bracket-seeds[hidden],
.cfg-tn-bracket-preview .mrr-bracket-seeds-block .mrr-bracket-seeds[hidden] {
  display: none !important;
}
.cfg-bracket-preview .mrr-seed-chip,
.cfg-tn-bracket-preview .mrr-seed-chip {
  background: #F3E5F5 !important;
  color: #37474F !important;
  border: 1px solid #E1BEE7;
}
.cfg-bracket-preview .mrr-seed-num,
.cfg-tn-bracket-preview .mrr-seed-num {
  color: #5E35B1 !important;
}
.cfg-bracket-preview .mrr-round-lbl,
.cfg-tn-bracket-preview .mrr-round-lbl {
  color: #607D8B !important;
  letter-spacing: 0.04em;
}
.cfg-bracket-preview .mrr-bracket-match,
.cfg-tn-bracket-preview .mrr-bracket-match {
  background: #F7F9F7 !important;
  border: 1px solid #E0E0E0;
}
.cfg-bracket-preview .mrr-bracket-match.mrr-bye,
.cfg-tn-bracket-preview .mrr-bracket-match.mrr-bye {
  opacity: 0.65;
}
.cfg-bracket-preview .mrr-bracket-team,
.cfg-tn-bracket-preview .mrr-bracket-team {
  color: #263238 !important;
  font-weight: 600;
}
.cfg-bracket-preview .mrr-bracket-score,
.cfg-tn-bracket-preview .mrr-bracket-score {
  color: #5E35B1 !important;
}
.cfg-bracket-preview .mrr-bronze-round,
.cfg-tn-bracket-preview .mrr-bronze-round {
  border-left-color: #8D6E63;
}
.cfg-bracket-preview .mrr-bronze-match,
.cfg-tn-bracket-preview .mrr-bronze-match {
  background: #EFEBE9 !important;
  border-color: #D7CCC8;
}
.cfg-bracket-preview .mrr-bronze-sub,
.cfg-tn-bracket-preview .mrr-bronze-sub {
  color: #5D4037 !important;
}
.cfg-bracket-preview .mrr-bracket-note,
.cfg-tn-bracket-preview .mrr-bracket-note {
  color: #78909C !important;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Create event — standings ranking section (advanced) */
.cfg-standings-ranking-section {
  margin: 12px 0 14px;
  padding: 14px 15px 15px;
  border-radius: 14px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  background: linear-gradient(158deg, #fcfdff 0%, #f3f5ff 42%, #f8fafc 100%);
  box-shadow:
    0 2px 14px rgba(99, 102, 241, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.cfg-standings-ranking-hd {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
}
.cfg-standings-ranking-hd-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.32);
}
.cfg-standings-ranking-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.cfg-standings-ranking-sub {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}
.cfg-standings-ranking-lead {
  margin: 0 0 12px !important;
  padding: 8px 10px;
  border-radius: 9px;
  border: 0.5px solid rgba(99, 102, 241, 0.14);
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.45;
  color: #475569;
}
.cfg-standings-ranking-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cfg-standings-ranking-body .cfg-standings-ranking-panel {
  margin-bottom: 0;
}
.cfg-standings-ranking-body .cfg-court-weight-card {
  margin: 0;
}
.cfg-standings-columns {
  margin-top: 12px;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, 0.16);
  background: rgba(255, 255, 255, 0.78);
}
.cfg-standings-columns-lead {
  margin: 0 0 10px !important;
  font-size: 11px;
  line-height: 1.45;
  color: #475569;
}
.cfg-standings-columns-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
@media (min-width: 520px) {
  .cfg-standings-columns-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .cfg-standings-columns-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cfg-standings-col-lbl {
  margin-bottom: 3px !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #6366f1;
}
.cfg-standings-columns-preview {
  margin: 8px 0 0 !important;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}
.cfg-standings-columns-tools {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(99, 102, 241, 0.25);
}
.cfg-standings-columns-tuning-lead {
  margin: 0 0 8px !important;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}
.cfg-standings-col-tuning-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cfg-standings-col-tuning-row:last-child {
  margin-bottom: 0;
}
.cfg-standings-slot-mini--column {
  flex: 1 1 220px;
  min-width: 0;
}
.cfg-standings-col-tuning-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6366f1;
  margin-left: 4px;
}
.cfg-standings-pipeline {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(99, 102, 241, 0.14);
}
.cfg-standings-pipeline-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: #4f46e5;
}
.cfg-standings-pipeline-hd i {
  font-size: 14px;
}
.cfg-standings-pipeline-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cfg-standings-pipeline-track::-webkit-scrollbar {
  height: 5px;
}
.cfg-standings-pipeline-track::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.35);
  border-radius: 4px;
}
.cfg-pipe-step {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.cfg-pipe-node {
  position: relative;
  min-width: 78px;
  max-width: 96px;
  padding: 6px 5px 5px;
  border-radius: 10px;
  border: 2px solid #a5b4fc;
  background: linear-gradient(160deg, #ffffff 0%, #f1f5ff 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
  text-align: center;
}
.cfg-pipe-step--primary .cfg-pipe-node {
  border-color: #6366f1;
  background: linear-gradient(155deg, #eef2ff 0%, #e0e7ff 55%, #f8fafc 100%);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.18);
}
.cfg-pipe-step--tiebreak .cfg-pipe-node {
  border-color: #818cf8;
  background: linear-gradient(155deg, #f8fafc 0%, #f1f5ff 100%);
}
.cfg-pipe-step--tiebreak .cfg-pipe-node-icon {
  background: linear-gradient(145deg, #818cf8, #6366f1);
}
.cfg-pipe-step--final .cfg-pipe-node {
  min-width: 72px;
  border-color: #4ade80;
  background: linear-gradient(155deg, #f0fdf4 0%, #dcfce7 100%);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}
.cfg-pipe-step--open .cfg-pipe-node {
  border-style: dashed;
  border-color: #94a3b8;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
  opacity: 1;
}
.cfg-pipe-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 auto 3px;
  border-radius: 6px;
  background: #6366f1;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 2px 5px rgba(99, 102, 241, 0.28);
}
.cfg-pipe-step--primary .cfg-pipe-node-icon {
  background: linear-gradient(145deg, #6366f1, #4f46e5);
}
.cfg-pipe-step--final .cfg-pipe-node-icon {
  background: linear-gradient(145deg, #22c55e, #16a34a);
  box-shadow: 0 2px 5px rgba(34, 197, 94, 0.28);
}
.cfg-pipe-step--open .cfg-pipe-node-icon {
  background: #94a3b8;
  box-shadow: none;
}
.cfg-pipe-step-num {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #4f46e5;
  line-height: 1.2;
}
.cfg-pipe-step--final .cfg-pipe-step-num {
  color: #15803d;
}
.cfg-pipe-step--open .cfg-pipe-step-num {
  color: #64748b;
}
.cfg-pipe-step-role {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  line-height: 1.2;
}
.cfg-pipe-step-label {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}
.cfg-pipe-step--open .cfg-pipe-step-role {
  color: #64748b;
}
.cfg-pipe-step--open .cfg-pipe-step-label {
  font-weight: 700;
  color: #475569;
}
.cfg-pipe-connector {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 10px;
  margin: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #818cf8 0%, #a5b4fc 55%, #c7d2fe 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(79, 70, 229, 0.2);
}
.cfg-pipe-connector::before,
.cfg-pipe-connector::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #c7d2fe;
  border: 1px solid #818cf8;
}
.cfg-pipe-connector::before {
  left: -1px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
}
.cfg-pipe-connector::after {
  right: -2px;
  width: 0;
  height: 0;
  margin-top: -4px;
  border-radius: 0;
  background: transparent;
  border: 4px solid transparent;
  border-left: 5px solid #818cf8;
  border-right: none;
}
.cfg-pipe-connector--dim {
  background: linear-gradient(90deg, #e2e8f0, #f1f5f9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.cfg-pipe-connector--dim::before {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.cfg-pipe-connector--dim::after {
  border-left-color: #cbd5e1;
}
.cfg-standings-pipeline-note {
  margin: 2px 0 0 !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  color: #475569;
}
@media (min-width: 520px) {
  .cfg-standings-pipeline-track {
    overflow-x: hidden;
    justify-content: space-between;
    gap: 0;
    padding-bottom: 4px;
  }
  .cfg-pipe-step {
    flex: 1 1 0;
    min-width: 0;
    max-width: 88px;
  }
  .cfg-pipe-node {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 5px 3px 4px;
  }
  .cfg-pipe-step--final .cfg-pipe-node {
    min-width: 0;
  }
  .cfg-pipe-node-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
    font-size: 11px;
  }
  .cfg-pipe-step-num {
    font-size: 8px;
    font-weight: 800;
  }
  .cfg-pipe-step-role {
    font-size: 10px;
    font-weight: 700;
    color: #1e293b;
  }
  .cfg-pipe-step-label {
    font-size: 11px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
  }
  .cfg-pipe-connector {
    flex: 0 0 8px;
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin: 0 -1px;
  }
  .cfg-pipe-connector::before {
    display: none;
  }
  .cfg-pipe-connector::after {
    right: -1px;
    margin-top: -3px;
    border-width: 3px;
    border-left-width: 4px;
  }
}

/* Create event — court weight (prominent, after pairing style) */
.cfg-court-weight-card {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: var(--prs);
  border: 1.5px solid #A5D6A7;
  background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 55%, #fff 100%);
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.1);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.cfg-court-weight-card--active {
  border-color: var(--pg);
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 40%, #F1F8E9 100%);
  box-shadow: 0 3px 12px rgba(46, 125, 50, 0.18);
}
.cfg-ladder-preset-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
  color: #fff;
  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
  border: none;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(13, 71, 161, 0.35);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.cfg-ladder-preset-btn > span:not(.cfg-ladder-preset-badge) {
  flex: 1 1 10rem;
  min-width: 0;
  text-align: center;
  line-height: 1.3;
}
.cfg-ladder-preset-btn:hover {
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.45);
}
.cfg-ladder-preset-btn:active {
  transform: scale(0.99);
}
.cfg-ladder-preset-btn i {
  font-size: 18px;
}
.cfg-ladder-preset-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
}
.cfg-ladder-preset-row {
  min-width: 0;
  max-width: 100%;
}
.cfg-ladder-preset-hint {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #455A64;
}
.cfg-ladder-field--inactive {
  position: relative;
  padding: 6px 8px 8px;
  border-radius: 8px;
  background: rgba(236, 239, 241, 0.45);
  outline: 1px dashed rgba(144, 164, 174, 0.45);
  outline-offset: 4px;
}
#cfg-ladder-shootout-core.cfg-ladder-field--inactive {
  padding: 8px 10px 10px;
}
.cfg-ladder-field--inactive .fl,
.cfg-ladder-field--inactive .tn,
.cfg-ladder-field--inactive .cfg-block-label {
  color: #90A4AE;
}
.cfg-ladder-field--inactive .fi,
.cfg-ladder-field--inactive select.fi,
.cfg-ladder-field--inactive input.fi {
  background: #F5F7F8;
  color: #90A4AE;
  border-color: #CFD8DC;
  cursor: not-allowed;
}
.cfg-ladder-field--inactive .tog,
.cfg-ladder-field--inactive .cfg-ladder-tog--inactive {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
.cfg-ladder-field--inactive .tip-btn {
  opacity: 1;
  pointer-events: auto;
  cursor: help;
}
.cfg-ladder-inactive-reason {
  margin: 6px 0 0 !important;
  color: #78909C !important;
  font-style: italic;
}
.field-tip-inactive-banner {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FFF8E1;
  border: 1px solid rgba(249, 168, 37, 0.35);
  color: #5D4037;
  font-size: 11px;
  line-height: 1.45;
}
.field-tip-inactive-banner strong {
  color: #E65100;
}
.cfg-court-weight-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cfg-court-weight-hd-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.cfg-court-weight-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pg);
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.35);
}
.cfg-court-weight-title {
  font-size: 13px;
  font-weight: 700;
  color: #1B5E20;
  line-height: 1.3;
}
.cfg-court-weight-badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #2E7D32;
  background: rgba(255, 255, 255, 0.75);
  border: 0.5px solid #A5D6A7;
  padding: 2px 6px;
  border-radius: 6px;
}
.cfg-court-weight-lead {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.45;
  color: #455A64;
}
.cfg-court-weight-scheme-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #A5D6A7;
}
.cfg-court-weight-scheme-wrap .fi {
  border-color: #81C784;
  background: #fff;
}
.cfg-court-weight-start-wrap {
  margin-top: 10px;
}
.cfg-court-weight-start-wrap .fl {
  margin-bottom: 4px;
}
.cfg-court-weight-exempt-hint {
  margin: 6px 0 0 !important;
  padding: 8px 10px;
  background: #FFF8E1;
  border-radius: 8px;
  border: 0.5px solid #FFE082;
  font-size: 11px;
  line-height: 1.45;
  color: #5D4037;
}
.cfg-court-weight-exempt-hint--active {
  background: #FFF3E0;
  border-color: #FFB74D;
}
.cfg-court-weight-live-hint {
  margin: 8px 0 0 !important;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  border: 0.5px solid #C8E6C9;
  font-size: 11px;
  font-weight: 500;
  color: #2E7D32;
}
.cfg-standings-tuning-card .cfg-format-hd {
  color: #1B5E20;
}
.cfg-standings-tuning-card .fi {
  border-color: #81C784;
  background: #fff;
}
.cfg-standings-tuning-modal {
  display: block !important;
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  z-index: 1210;
  margin: 0 !important;
  border: 1px solid rgba(99, 102, 241, 0.28) !important;
  background: linear-gradient(150deg, #fbfdff 0%, #f7f9ff 52%, #f5f7fb 100%) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), 0 6px 16px rgba(99, 102, 241, 0.16) !important;
}
.cfg-court-weight-modal {
  display: block !important;
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  z-index: 1210;
  margin: 0 !important;
  border: 1px solid rgba(99, 102, 241, 0.28) !important;
  background: linear-gradient(150deg, #fbfdff 0%, #f7f9ff 52%, #f5f7fb 100%) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), 0 6px 16px rgba(99, 102, 241, 0.16) !important;
}
.cfg-court-weight-modal .cfg-court-weight-title,
.cfg-court-weight-modal .cfg-format-hd {
  color: #374151 !important;
}
.cfg-court-weight-modal .cfg-court-weight-badge {
  color: #4f46e5;
  border-color: #c7d2fe;
}
.cfg-court-weight-modal .cfg-court-weight-icon-wrap {
  background: #6366f1;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}
.cfg-court-weight-modal .cfg-court-weight-hd .tog {
  display: none !important;
}
.cfg-court-weight-modal .cfg-court-weight-lead,
.cfg-court-weight-modal .field-hint {
  color: #64748b;
}
.cfg-court-weight-modal .fi {
  border-color: #c7d2fe !important;
  background: #ffffff !important;
}
.cfg-court-weight-modal .fi:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.16);
}
.cfg-standings-tuning-modal .cfg-format-hd {
  color: #374151 !important;
}
.cfg-standings-tuning-modal #cfg-standings-tuning-sub {
  margin-top: 2px !important;
  color: #64748b;
}
.cfg-standings-tuning-modal .cfg-court-weight-badge {
  color: #4f46e5;
  border-color: #c7d2fe;
}
.cfg-standings-tuning-modal .cfg-court-weight-icon-wrap {
  background: #6366f1;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}
.cfg-standings-tuning-modal .field-hint {
  color: #64748b;
}
.cfg-standings-tuning-modal .fi {
  border-color: #c7d2fe !important;
  background: #ffffff !important;
}
.cfg-standings-tuning-modal .fi:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.16);
}
.cfg-standings-slot-mini {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(150deg, #fbfdff 0%, #f7f9ff 60%, #f5f7fb 100%);
}
.cfg-standings-slot-mini-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cfg-standings-slot-mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  background: #6366f1;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}
.cfg-standings-slot-mini-text {
  min-width: 0;
}
.cfg-standings-slot-mini-title {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  line-height: 1.2;
}
.cfg-standings-slot-mini-badge {
  margin-top: 2px;
  font-size: 9px;
  color: #4f46e5;
  border-color: #c7d2fe;
}
.cfg-standings-slot-mini-summary {
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}
.cfg-standings-edit-btn {
  margin-left: 10px;
  font-size: 11px !important;
  font-weight: 700;
  padding: 6px 10px !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cfg-standings-edit-btn i {
  font-size: 13px;
}
.cfg-court-weight-standings-row {
  margin: 10px 0 4px;
}
.cfg-court-weight-standings-row .fl {
  margin-bottom: 4px;
}
.cfg-play-format-block,
.cfg-scoring-details-block {
  margin-top: 12px;
  padding-top: 10px;
}
.cfg-play-format-divider,
.cfg-scoring-details-divider {
  border-top: 0.5px solid var(--pb);
  margin-bottom: 10px;
}
.cfg-scoring-details-block .fl {
  margin-bottom: 4px;
}

.type-intro {
  font-size: 11px;
  color: #607D8B;
  line-height: 1.5;
  margin: 0 0 10px;
}
.type-intro-ref {
  display: block;
  font-size: 10px;
  color: #90A4AE;
  margin-top: 4px;
}
.cfg-format-hd {
  font-size: 10px;
  font-weight: 600;
  color: #90A4AE;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.cfg-block { margin-bottom: 10px; }
.cfg-block-muted {
  background: #fff;
  border-radius: var(--prs);
  padding: 10px;
  border: 0.5px solid var(--pb);
}
.cfg-block-label {
  font-size: 9px;
  font-weight: 600;
  color: #90A4AE;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.cfg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cfg-simulator-wrap { margin-top: 4px; }

.fl-with-tip { display: inline-flex; align-items: center; gap: 4px; }
.tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: #90A4AE;
  cursor: pointer;
  border-radius: 50%;
  vertical-align: middle;
}
.tip-btn:hover { color: #1976D2; background: #E3F2FD; }
.tip-btn-inline { margin-left: 4px; }

.field-tip-popover {
  display: none;
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 0.5px solid #CFD8DC;
  border-radius: 10px;
  padding: 12px 14px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  font-size: 12px;
  line-height: 1.5;
  color: #455A64;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.field-tip-popover.open { display: block; }
.field-tip-title {
  font-weight: 600;
  color: var(--pn);
  font-size: 12px;
  margin-bottom: 6px;
  padding-right: 20px;
}
.field-tip-body { font-size: 11px; color: #607D8B; }
.field-tip-body strong { color: var(--pn); }
.field-tip-lead { margin: 0 0 8px; }
.field-tip-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #F1F8E9;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.45;
  color: #33691E;
}
.field-tip-list {
  margin: 0;
  padding-left: 16px;
}
.field-tip-list li {
  margin-bottom: 8px;
  line-height: 1.45;
}
.field-tip-list li:last-child { margin-bottom: 0; }
.field-tip-body code {
  font-size: 10px;
  background: #ECEFF1;
  padding: 1px 4px;
  border-radius: 3px;
}
.field-tip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  color: #90A4AE;
  cursor: pointer;
  padding: 2px;
}
.field-tip-close:hover { color: var(--pn); }

/* Sponsor tier guide (Create Event → Registration & fees) */
.field-tip-popover--sponsor-tiers {
  border-radius: 14px;
  padding: 14px 16px 16px;
  box-shadow: 0 12px 40px rgba(38, 50, 56, 0.14), 0 2px 8px rgba(38, 50, 56, 0.06);
}
.field-tip-popover--sponsor-tiers .field-tip-title {
  font-size: 13px;
  margin-bottom: 10px;
}
.field-tip-popover--sponsor-tiers .field-tip-body {
  font-size: 11px;
  color: #37474F;
}
.sponsor-tier-tip-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
}
.sponsor-tier-tip-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ECEFF1;
  background: linear-gradient(145deg, #fff 0%, #FAFBFC 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sponsor-tier-tip-card--title {
  border-color: rgba(106, 27, 154, 0.22);
  background: linear-gradient(145deg, #FDFAFF 0%, #F3E5F5 100%);
}
.sponsor-tier-tip-card--gold {
  border-color: rgba(245, 127, 23, 0.22);
  background: linear-gradient(145deg, #FFFDF5 0%, #FFF8E1 100%);
}
.sponsor-tier-tip-card--silver {
  border-color: rgba(84, 110, 122, 0.22);
  background: linear-gradient(145deg, #FAFBFC 0%, #ECEFF1 100%);
}
.sponsor-tier-tip-card--bronze {
  border-color: rgba(141, 110, 99, 0.22);
  background: linear-gradient(145deg, #FFFBF7 0%, #EFEBE9 100%);
}
.sponsor-tier-tip-card--partner {
  border-color: rgba(57, 73, 171, 0.18);
  background: linear-gradient(145deg, #FAFBFF 0%, #E8EAF6 100%);
}
.sponsor-tier-tip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sponsor-tier-tip-chip {
  flex-shrink: 0;
  font-size: 9px;
  padding: 3px 9px;
}
.sponsor-tier-tip-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--pn);
}
.sponsor-tier-tip-desc {
  margin: 0 0 6px;
  line-height: 1.45;
  color: #37474F;
}
.sponsor-tier-tip-player {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: #455A64;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(69, 90, 100, 0.18);
}
.sponsor-tier-tip-player i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 12px;
  color: #1976D2;
}

/* Standings use metric list (Create Event → Advanced) */
.field-tip-popover--standings-mode {
  width: min(520px, calc(100vw - 24px));
}
.field-tip-popover--standings-mode .field-tip-body {
  color: #455A64;
}
.standings-mode-tip-row {
  margin: 0 0 10px;
  line-height: 1.55;
}
.standings-mode-tip-row:last-child {
  margin-bottom: 0;
}
.standings-tip-metric {
  color: #1565C0;
  font-weight: 700;
}
.standings-tip-advanced,
.er-metric-tip-title-advanced {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 6px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: #fff;
  background: #800000;
  border: 1px solid #6d0000;
  box-shadow: 0 1px 4px rgba(128, 0, 0, 0.28);
  line-height: 1.35;
}
.er-metric-tip-float--prominent .er-metric-tip-title-advanced {
  font-size: 12px;
  padding: 4px 11px;
}
.standings-tip-featured-icon,
.er-metric-tip-title-fire {
  color: #E65100;
  font-size: 13px;
  vertical-align: -1px;
  margin-left: 2px;
}
.er-metric-tip-float--prominent .er-metric-tip-title-fire {
  font-size: 17px;
  vertical-align: -2px;
}
.standings-tip-dink-special,
.er-metric-tip-title-dink-special {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #5D4037;
  background: linear-gradient(135deg, #FFE082 0%, #FFCA28 55%, #FFB300 100%);
  border: 1px solid #F9A825;
  box-shadow: 0 1px 4px rgba(255, 167, 38, 0.35);
  line-height: 1.35;
}
.er-metric-tip-float--prominent .er-metric-tip-title-dink-special {
  font-size: 11px;
  padding: 4px 11px;
}
.standings-tip-lead {
  color: #1B5E20;
  font-weight: 600;
}
.standings-tip-detail {
  color: #37474F;
  font-weight: 400;
}
.standings-tip-monamir-origin,
.er-metric-tip-monamir-origin {
  display: block;
  margin-top: 10px;
  color: #E65100;
  font-weight: 500;
  line-height: 1.45;
}
.standings-mode-tip-row .standings-tip-monamir-origin {
  margin-top: 8px;
}
.field-tip-popover--standings-mode .standings-tip-monamir-origin {
  font-size: inherit;
}
.er-metric-tip-float-body .er-metric-tip-monamir-origin {
  margin-top: 12px;
  font-size: inherit;
}
.er-metric-tip-float--prominent .er-metric-tip-monamir-origin {
  font-size: inherit;
}
.er-metric-tip-monamir-origin strong,
.standings-tip-monamir-origin strong {
  color: #BF360C;
  font-weight: 700;
}
.field-tip-popover--standings-mode .standings-tip-detail strong {
  color: #37474F;
  font-weight: 600;
}
.field-tip-popover--standings-mode .standings-tip-detail em {
  color: #455A64;
}
.field-tip-popover--standings-mode code {
  font-size: 10px;
  background: #FFF9C4;
  color: #5D4037;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.standings-mode-tip-divider {
  border: none;
  border-top: 1px solid #E0E0E0;
  margin: 10px 0;
}

.mdiv { height: 0.5px; background: var(--pb); margin: 12px 0; }
.trow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  background: #F7F9F7;
  border-radius: var(--prs);
  margin-bottom: 6px;
}
.tn { font-size: 11px; font-weight: 500; color: var(--ps); }
.td { font-size: 10px; color: #546E7A; margin-top: 2px; line-height: 1.45; }
.tog {
  width: 36px; height: 19px;
  background: #CFD8DC;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tog.on { background: var(--pg); }
.tog::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: white;
  top: 2px; left: 2px;
  transition: left 0.2s;
}
.tog.on::after { left: 19px; }

/* ── Segment control ── */
.seg { display: flex; background: #ECEFF1; border-radius: 8px; padding: 3px; gap: 2px; }
.seg-b {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  color: #607D8B;
  border: none;
  background: transparent;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Outfit', sans-serif;
}
.seg-b.on { background: white; color: var(--pn); font-weight: 600; }
.seg-b .ct { font-size: 9px; background: #CFD8DC; color: #607D8B; padding: 1px 5px; border-radius: 8px; }
.seg-b.on .ct { background: var(--pnl); color: var(--pn); }

/* ── Stat cards ── */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.sc { background: white; border-radius: var(--pr); padding: 11px 13px; border: 0.5px solid var(--pb); }
.sc-hd { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.sc-lbl { font-size: 9px; color: #90A4AE; text-transform: uppercase; letter-spacing: 0.7px; line-height: 1; }
.sc-tip {
  border: none;
  background: transparent;
  color: #90A4AE;
  padding: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  border-radius: 50%;
  flex-shrink: 0;
}
.sc-tip i { font-size: 12px; }
.sc-tip:hover,
.sc-tip:focus-visible {
  color: var(--pg);
  background: #E3F2FD;
  outline: none;
}
.sc-val { font-size: 20px; font-weight: 700; color: var(--pn); line-height: 1; }
.sc-sub { font-size: 9px; margin-top: 2px; }

/* ── Shared DUPR tier chip colours (used in both modules) ── */
.tc { padding: 5px 11px; border-radius: 20px; font-size: 10px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: all 0.15s; white-space: nowrap; }
.tc-all { background: #ECEFF1; color: #607D8B; border-color: #ECEFF1; }
.tc-all.on { background: #455A64; color: white; border-color: #455A64; }
.tc-beg { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.tc-beg.on { background: var(--success-fg); color: white; }
.tc-int { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.tc-int.on { background: #3949AB; color: white; }
.tc-adv { background: #FFF3E0; color: #E65100; border-color: #FFE0B2; }
.tc-adv.on { background: #E65100; color: white; }
.tc-pro { background: #FCE4EC; color: #AD1457; border-color: #F8BBD0; }
.tc-pro.on { background: #AD1457; color: white; }