/* Skip-to-content link for accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 100000;
  padding: 12px 24px;
  background: var(--mint, #58c79a);
  color: var(--ink, #07130f);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

:root{
  --bg: #07130f;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted2: rgba(255,255,255,.55);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.16);
  --shadow: 0 30px 70px rgba(0,0,0,.35);
  --forest: #0B3D2E;
  --forest2: #0E4A35;
  --mint: #58C79A;
  --mint2: #2FA579;
  --ink: #06120E;
  --white: #fff;
  --radius: 22px;
  --radius2: 28px;
  /* Shared public content column width. Page shells should use this instead of
     hardcoded 980–1100px caps that leave large empty gutters on desktop. */
  --container: 1400px;
  --page-footer-gap: 3rem;
  --ease: cubic-bezier(.2,.8,.2,1);
  --gradient-main: linear-gradient(135deg, var(--primary) 0%, var(--highlight-color) 100%);
  /* Legacy "purple" tokens: kept for back-compat but default to the CoachMate
     brand (mint) so nothing falls back to purple. org-init still overrides these
     per-org at runtime with the tenant's primary color. */
  --purple: var(--mint);
  --purple-soft: var(--mint);
  --accent-gold: #ffd15c;
  --mint-rgb: 88,199,154;
  --forest-rgb: 11,61,46;
  --purple-rgb: var(--mint-rgb);
  --accent-gold-rgb: 255,209,92;
  --primary: var(--mint);
  --primary-rgb: var(--mint-rgb);
  --secondary: var(--accent-gold);
  --secondary-rgb: var(--accent-gold-rgb);
  --accent: var(--forest);
  /* Canonical brand aliases. These `-color`-suffixed names are consumed by admin,
     my-account, CRM, sponsors, store and award components. They MUST resolve to the
     branded primary/secondary/accent so nothing falls back to a hardcoded default
     (previously undefined -> purple #7b4fff on any page that didn't set them). */
  --primary-color: var(--primary);
  --secondary-color: var(--secondary);
  --accent-color: var(--accent);
  /* Semantic brand contract. Raw palette values above remain compatibility aliases.
     Follow the org primary at runtime (previously frozen green regardless of branding). */
  --brand-color: var(--primary);
  --highlight-color: color-mix(in srgb, var(--primary) 82%, #000);
  --page-bg: #07130F;
  --surface: #13211C;
  --surface-muted: #0E1A16;
  --surface-elevated: #25322E;
  --text-muted: #AEB7B3;
  --border: #52605B;
  --focus-ring: var(--primary);
  --link: color-mix(in srgb, var(--primary) 70%, #fff);
  --button-primary-bg: var(--primary);
  --button-primary-text: var(--on-primary, #111827);
  --button-primary-bg-hover: color-mix(in srgb, var(--primary) 85%, #fff);
  --button-secondary-bg: #25322E;
  --button-secondary-text: #FFFFFF;
  --button-secondary-bg-hover: #343F3B;
  --on-success: #111827;
  --on-warning: #111827;
  --on-danger: #FFFFFF;
  --bg-start: #04110d;
  --bg-mid: #061611;
  --bg-end: #040e0b;
  --grid-line-rgb: 255,255,255;
  --grid-line-alpha: .02;
  --header-bg: rgba(5,14,11,.55);
  --header-border: rgba(255,255,255,.06);
  --header-link-hover-bg: rgba(255,255,255,.06);
  --header-toggle-bg: rgba(255,255,255,.03);
  --header-toggle-border: rgba(255,255,255,.08);
  --header-title-gradient-end: rgba(255,255,255,.72);
  --header-mobile-border: rgba(255,255,255,.06);
  --surface-1: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.02);
  --surface-3: rgba(255,255,255,.08);
  --surface-border: rgba(255,255,255,.10);
  --surface-border-strong: rgba(255,255,255,.16);
  --field-bg: rgba(255,255,255,.06);
  --field-bg-focus: rgba(255,255,255,.10);
  --field-border: rgba(255,255,255,.12);
  --field-border-strong: rgba(255,255,255,.20);
  --field-placeholder: rgba(255,255,255,.56);
  --field-arrow: rgba(255,255,255,.78);
  --btn-secondary-bg: rgba(255,255,255,.05);
  --btn-secondary-border: rgba(255,255,255,.12);
  --btn-secondary-text: var(--text);
  --btn-secondary-hover-bg: rgba(255,255,255,.10);
  --btn-secondary-hover-border: rgba(255,255,255,.20);
  --btn-primary-bg: rgba(var(--primary-rgb), .14);
  --btn-primary-border: rgba(var(--primary-rgb), .75);
  --btn-primary-hover-bg: rgba(var(--primary-rgb), .2);
  --btn-primary-text: var(--on-primary, var(--text));
  --btn-ghost-bg: rgba(255,255,255,.05);
  --btn-ghost-border: rgba(255,255,255,.12);
  --btn-ghost-hover-bg: rgba(255,255,255,.10);
  --btn-ghost-hover-border: rgba(255,255,255,.20);
  --field-backdrop-blur: 10px;
  --bg-gradient: radial-gradient(1200px 700px at 30% -10%, rgba(var(--mint-rgb),.24), transparent 60%),
    radial-gradient(900px 600px at 95% 20%, rgba(var(--forest-rgb),.55), transparent 55%),
    linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 40%, var(--bg-end) 100%);
  --pitch-grass-1: #1a5c3a;
  --pitch-grass-2: #2a7d4a;

  /* ── Status Colors (customizable via branding) ───────────── */
  --color-success: #22c55e;
  --color-success-rgb: 34,197,94;
  --color-warning: #eab308;
  --color-warning-rgb: 234,179,8;
  --color-error: #ef4444;
  --color-error-rgb: 239,68,68;

  /* ── Design Tokens ─────────────────────────────────────────── */

  /* Typography scale */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.8125rem;  /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md:  0.9375rem;  /* 15px */
  --text-lg:  1rem;       /* 16px */
  --text-xl:  1.125rem;   /* 18px */
  --text-2xl: 1.25rem;    /* 20px */
  --text-3xl: 1.5rem;     /* 24px */

  /* Border-radius scale */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 9999px;

  /* Transition tokens */
  --transition-fast: 0.15s var(--ease);
  --transition-base: 0.25s var(--ease);
  --transition-slow: 0.4s var(--ease);

  /* Shadow scale */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.12);
  --shadow-md: 0 8px 24px rgba(0,0,0,.22);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.32);
  --shadow-xl: 0 30px 70px rgba(0,0,0,.42);

  /* Semantic colors */
  --danger: #ef4444;
  --danger-light: #ff6b6b;
  --danger-rgb: 239,68,68;
  --warning: #fbbf24;
  --warning-dark: #f59e0b;
  --warning-rgb: 251,191,36;
  --success: var(--mint);
  --success-rgb: var(--mint-rgb);
  --info: var(--purple-soft);
  --info-rgb: var(--purple-rgb);

  /* Canonical breakpoints (for reference — CSS vars can't control @media)
     --bp-sm: 480px;   --bp-md: 640px;   --bp-lg: 768px;   --bp-xl: 1024px;
  */
}

*{box-sizing:border-box; min-width:0;}
html,body{min-height:100%; width:100%;}
html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
  max-width:100vw;
  position:relative;
  background-color: var(--bg-end);
}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  /* Fully customizable background - uses CSS variables that can be overridden */
  background: var(--bg-gradient);
  background-attachment: fixed;
  overflow-x:clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100vw;
  width:100%;
  min-height: 100dvh;
  position: relative;
  background-color: var(--bg-end);
  display: flex;
  flex-direction: column;
}
main, #main-content {
  flex: 1;
  /* Keep page content off the footer. Sticky-footer `margin-top: auto`
     collapses to 0 on tall pages, so this padding is the actual gap. */
  padding-bottom: var(--page-footer-gap);
}

html.tenant-branding-pending {
  background: #07130f;
}

html.tenant-branding-pending body {
  background: #000;
  overflow: hidden;
}

/* Keep tenant destinations covered until their final theme and visual assets
   are ready. The animated mascot belongs only to tenant-router.html; ordinary
   tenant page transitions use a neutral cover so the mascot does not replay. */
html.tenant-branding-pending body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: block;
  background-color: #000;
  pointer-events: all;
}

/* tenant-router.html renders its own accessible running-mascot scene. */
html.tenant-branding-pending.tenant-router-page body::after {
  display: none;
  pointer-events: none;
}

html.tenant-branding-pending header,
html.tenant-branding-pending .nav,
html.tenant-branding-pending .adm-header,
html.tenant-branding-pending .cm-nav-drawer,
html.tenant-branding-pending .cm-nav-drawer-backdrop,
html.tenant-branding-pending .hero,
html.tenant-branding-pending [class*="-hero"],
html.tenant-branding-pending [class*="hero-"],
html.tenant-branding-pending #org-background-overlay,
html.tenant-branding-pending #league-background-overlay {
  visibility: hidden;
}

html.tenant-branding-pending header,
html.tenant-branding-pending .nav,
html.tenant-branding-pending .adm-header,
html.tenant-branding-pending .hero,
html.tenant-branding-pending [class*="-hero"],
html.tenant-branding-pending [class*="hero-"] {
  opacity: 0;
}

html.tenant-branding-pending .brand-logo img,
html.tenant-branding-pending .adm-header__logo img,
html.tenant-branding-pending .org-logo,
html.tenant-branding-pending .league-logo,
html.tenant-branding-pending .hero-brand-logo {
  visibility: hidden;
}

html.tenant-branding-pending .btn-primary,
html.tenant-branding-pending .btn--primary,
html.tenant-branding-pending .button-primary,
html.tenant-branding-pending button.primary,
html.tenant-branding-pending a.primary,
html.tenant-branding-pending .stg-nav-btn.active,
html.tenant-branding-pending .tab-nav button.active,
html.tenant-branding-pending .admin-nav-tabs button.active {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* Optional full-page background mode: remove default color/gradient layer
   without mutating shared color variables used by components like toasts. */
body[data-bg-color-layer-disabled="true"] {
  background: none !important;
  background-color: transparent !important;
}

@supports (width: 100dvw) {
  html, body {
    width: 100dvw;
    max-width: 100dvw;
  }
}

@supports (height: 100dvh) {
  html, body {
    min-height: 100dvh;
  }
}

/* Grid effect for portal pages */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(var(--grid-line-rgb, 255,255,255), var(--grid-line-alpha, .02)),
      rgba(var(--grid-line-rgb, 255,255,255), var(--grid-line-alpha, .02)) 1px,
      transparent 1px,
      transparent 24px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(var(--grid-line-rgb, 255,255,255), var(--grid-line-alpha, .02)),
      rgba(var(--grid-line-rgb, 255,255,255), var(--grid-line-alpha, .02)) 1px,
      transparent 1px,
      transparent 24px
    );
  pointer-events: none;
  z-index: 0;
}

/* Grid can be disabled via data attribute */
body[data-grid-disabled="true"]::before {
  display: none;
}

/* Ensure content is above grid */
body > * {
  position: relative;
  z-index: 1;
}

a{color:inherit;text-decoration:none}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
  max-width:100%;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}

@media (max-width: 520px){
  .container{
    width:100%;
    padding-left:16px;
    padding-right:16px;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Progress */
.progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:1000; background:transparent}
.progress__bar{height:100%; width:0%; background: linear-gradient(90deg, var(--mint), rgba(var(--mint-rgb),.4)); box-shadow: 0 0 20px rgba(var(--mint-rgb),.45)}

/* Loading state - always centered (league-init/org-init may override .loading-spinner for custom logos) */
.loading-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}
.loading-spinner{
  width:48px;
  height:48px;
  border:3px solid rgba(var(--mint-rgb),.3);
  border-top-color:var(--mint);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:0 auto 16px;
  flex-shrink:0;
}
.loading-state.registration-loading-state{
  width:min(100%,360px);
  box-sizing:border-box;
  margin:clamp(32px,8vh,72px) auto;
  padding:24px;
  color:var(--text);
  background:var(--surface-elevated,var(--surface,var(--card,#111a17)));
  border:1px solid var(--surface-border-strong,var(--stroke2,var(--stroke,rgba(255,255,255,.18))));
  border-radius:var(--brand-radius-md,var(--radius,18px));
  box-shadow:var(--brand-card-shadow,0 18px 44px rgba(0,0,0,.22));
}
.loading-state.registration-loading-state p{
  margin:0;
  color:var(--text);
  font-weight:600;
  line-height:1.45;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Original Nav style for index.html landing page */
.nav{position:sticky; top:0; z-index:999; backdrop-filter: blur(14px); background: rgba(5,14,11,.55); border-bottom: 1px solid rgba(255,255,255,.06); width:100%; max-width:100vw; overflow-x:clip; flex-shrink:0;}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; max-width:100%; box-sizing:border-box;}

/* Unified Portal Header Styles - Only apply to portal pages (not index.html) */
/* Portal pages use header > .container > .nav structure, index.html uses header.nav */
header:not(.nav) {
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(14px);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    width: 100%;
    left: 0;
    right: 0;
}

header:not(.nav) .container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header:not(.nav) .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    padding-left: clamp(12px, 2.5vw, 24px);
    padding-right: clamp(12px, 2.5vw, 24px);
    flex-wrap: nowrap;
}

header:not(.nav) .brand,
header:not(.nav) .nav > a[href*="index.html"] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
    flex-shrink: 1;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

header:not(.nav) .brand:hover,
header:not(.nav) .nav > a[href*="index.html"]:hover {
    transform: translateX(2px);
}

/* Only apply brand-logo styles to portal pages (not index.html which uses brand__logo-wrapper) */
header:not(.nav) .brand-logo {
    max-width: clamp(56px, 7vw, 80px);
    max-height: clamp(56px, 7vw, 80px);
    min-width: 56px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    position: relative;
    /* Ambient light background effect */
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(var(--mint-rgb), 0.08) 40%,
        transparent 70%);
    border-radius: 50%;
    padding: 4px;
}

header:not(.nav) .brand:hover .brand-logo,
header:not(.nav) .nav > a[href*="index.html"]:hover .brand-logo {
    transform: scale(1.05) rotate(2deg);
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(var(--mint-rgb), 0.14) 40%,
        transparent 70%);
}

header:not(.nav) .brand-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
    transition: filter 0.3s ease;
    position: relative;
    z-index: 1;
}

header:not(.nav) .brand:hover .brand-logo img,
header:not(.nav) .nav > a[href*="index.html"]:hover .brand-logo img {
    filter: drop-shadow(0 4px 12px rgba(var(--mint-rgb), 0.24))
            drop-shadow(0 0 18px rgba(255, 255, 255, 0.14));
}

/* Only apply to portal pages - index.html uses .brand__text with .brand__name */
header:not(.nav) .brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    flex: 1 1 auto;
    overflow: hidden;
}

header:not(.nav) .brand-text span:first-child {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text) 0%, var(--header-title-gradient-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 0.6s ease;
    transition: all 0.3s ease;
}

/* Slogan/tagline styling - shown under organization name */
header:not(.nav) .brand-text span[data-org-slogan],
header:not(.nav) .brand-text .org-slogan,
header:not(.nav) .brand-text #org-tagline {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    opacity: 0.8;
    line-height: 1.2;
    display: block !important;
    margin-top: 2px;
    animation: fadeInUp 0.6s ease 0.1s both;
    transition: opacity 0.3s ease;
}

header:not(.nav) .brand:hover .brand-text span[data-org-slogan],
header:not(.nav) .brand:hover .brand-text .org-slogan,
header:not(.nav) .brand:hover .brand-text #org-tagline {
    opacity: 1;
    max-width: 100%;
}

header:not(.nav) .brand:hover .brand-text span:first-child,
header:not(.nav) .nav > a[href*="index.html"]:hover .brand-text span:first-child {
    background: linear-gradient(135deg, var(--text) 0%, var(--mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateY(-1px);
}

/* Only hide last child if it's NOT the slogan, org name, or team name */
header:not(.nav) .brand-text span:last-child:not([data-org-slogan]):not(.org-slogan):not(#org-tagline):not(#team-name):not([data-league-name]) {
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

header:not(.nav) .nav-links {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

header:not(.nav) .nav-links a {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 10px 18px;
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}

header:not(.nav) .nav-links a::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--purple);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 2px;
}

header:not(.nav) .nav-links a:hover {
    color: var(--text);
    background: var(--header-link-hover-bg);
}

header:not(.nav) .nav-links a:hover::before {
    transform: scaleX(1);
}

header:not(.nav) .cm-public-nav,
.adm-header__links.cm-public-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 1.2vw, 18px);
}

header:not(.nav) .cm-public-nav__home,
header:not(.nav) .cm-public-nav__primary,
header:not(.nav) .cm-public-nav__account,
.adm-header__links.cm-public-nav .cm-public-nav__home,
.adm-header__links.cm-public-nav .cm-public-nav__primary,
.adm-header__links.cm-public-nav .cm-public-nav__account {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

header:not(.nav) .cm-public-nav__primary,
.adm-header__links.cm-public-nav .cm-public-nav__primary {
    justify-content: center;
    overflow: hidden;
}

header:not(.nav) .cm-public-nav__account,
.adm-header__links.cm-public-nav .cm-public-nav__account {
    justify-content: flex-end;
}

header:not(.nav).cm-public-drawer-ready .nav-toggle,
.adm-header.cm-public-drawer-ready .nav-toggle {
    display: flex;
}

body.cm-nav-drawer-open {
    overflow: hidden;
}

.cm-nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: radial-gradient(130% 130% at 100% 0%, rgba(10, 14, 22, 0.55), rgba(2, 4, 8, 0.74));
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cm-nav-drawer-backdrop.is-open {
    opacity: 1;
}

.cm-nav-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1201;
    width: min(404px, 100vw);
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-nav-drawer.is-open {
    pointer-events: auto;
    transform: translateX(0);
}

.cm-nav-drawer__panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 18px;
    color: var(--text);
    background:
        radial-gradient(720px 340px at 0% 0%, rgba(var(--primary-rgb, var(--mint-rgb)), 0.20), transparent 60%),
        radial-gradient(560px 320px at 100% 6%, rgba(var(--secondary-rgb, var(--accent-gold-rgb)), 0.13), transparent 62%),
        linear-gradient(180deg, var(--drawer-bg, var(--surface, var(--bg))), var(--bg));
    border-left: 1px solid var(--surface-border-strong, var(--header-border));
    box-shadow: -32px 0 80px rgba(0,0,0,0.46), inset 1px 0 0 rgba(255,255,255,0.05);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.cm-nav-drawer__panel::-webkit-scrollbar { width: 8px; }
.cm-nav-drawer__panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

.cm-nav-drawer__header,
.cm-nav-drawer__context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cm-nav-drawer__header {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--surface-border, rgba(255,255,255,0.08));
}

.cm-nav-drawer__header h2 {
    margin: 3px 0 0;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.cm-nav-drawer__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary, var(--mint));
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cm-nav-drawer__close {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--text);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--surface-border, rgba(255,255,255,0.14));
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cm-nav-drawer__close:hover,
.cm-nav-drawer__close:focus-visible {
    background: rgba(255,255,255,0.1);
    border-color: rgba(var(--primary-rgb, var(--mint-rgb)), 0.5);
    transform: rotate(90deg);
    outline: none;
}

.cm-nav-drawer__context {
    display: block;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(var(--primary-rgb, var(--mint-rgb)), 0.08), rgba(255,255,255,0.02));
    border: 1px solid var(--surface-border, rgba(255,255,255,0.1));
    border-radius: 14px;
}

.cm-nav-drawer__context .cm-nav-drawer__eyebrow { color: var(--muted); }

.cm-nav-drawer__context strong {
    display: block;
    margin-top: 5px;
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}

.cm-nav-drawer__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Hybrid org↔league workspace switch — pinned to the bottom of the drawer. */
.cm-nav-drawer__workspace {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--surface-border, rgba(255,255,255,0.08));
}

.cm-nav-drawer__workspace-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 12px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cm-nav-drawer__workspace-link i {
    font-size: 1.05rem;
    opacity: 0.85;
}

.cm-nav-drawer__workspace-link:hover,
.cm-nav-drawer__workspace-link:focus-visible {
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border-color: var(--surface-border, rgba(255,255,255,0.1));
    outline: none;
}

body.theme-light .cm-nav-drawer__workspace {
    border-top-color: var(--surface-border-strong, rgba(17,24,39,0.12));
}

body.theme-light .cm-nav-drawer__workspace-link:hover,
body.theme-light .cm-nav-drawer__workspace-link:focus-visible {
    background: rgba(17,24,39,0.04);
}

.cm-nav-drawer__links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 11px 14px;
    color: var(--muted);
    font-weight: 650;
    text-decoration: none;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cm-nav-drawer__links a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    font-size: 1.1rem;
    border-radius: 10px;
    color: var(--muted);
    background: rgba(var(--primary-rgb, var(--mint-rgb)), 0.07);
    border: 1px solid var(--surface-border, rgba(255,255,255,0.08));
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cm-nav-drawer__links a:hover,
.cm-nav-drawer__links a:focus-visible {
    color: var(--text);
    background: rgba(255,255,255,0.05);
    border-color: var(--surface-border, rgba(255,255,255,0.12));
    transform: translateX(3px);
    outline: none;
}

.cm-nav-drawer__links a:hover i,
.cm-nav-drawer__links a:focus-visible i {
    color: var(--primary, var(--mint));
    border-color: rgba(var(--primary-rgb, var(--mint-rgb)), 0.4);
}

.cm-nav-drawer__links a.is-current,
.cm-nav-drawer__links a[aria-current="page"] {
    color: var(--text);
    background: linear-gradient(180deg, rgba(var(--primary-rgb, var(--mint-rgb)), 0.18), rgba(var(--primary-rgb, var(--mint-rgb)), 0.08));
    border-color: rgba(var(--primary-rgb, var(--mint-rgb)), 0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.cm-nav-drawer__links a.is-current::before,
.cm-nav-drawer__links a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px; border-radius: 0 3px 3px 0;
    background: var(--primary, var(--mint));
}

.cm-nav-drawer__links a.is-current i,
.cm-nav-drawer__links a[aria-current="page"] i {
    color: var(--primary, var(--mint));
    background: rgba(var(--primary-rgb, var(--mint-rgb)), 0.16);
    border-color: rgba(var(--primary-rgb, var(--mint-rgb)), 0.4);
}

/* Staggered entrance when the drawer opens */
.cm-nav-drawer.is-open .cm-nav-drawer__links a {
    animation: cm-drawer-link-in 0.34s ease both;
}
.cm-nav-drawer.is-open .cm-nav-drawer__links a:nth-child(1) { animation-delay: .03s; }
.cm-nav-drawer.is-open .cm-nav-drawer__links a:nth-child(2) { animation-delay: .06s; }
.cm-nav-drawer.is-open .cm-nav-drawer__links a:nth-child(3) { animation-delay: .09s; }
.cm-nav-drawer.is-open .cm-nav-drawer__links a:nth-child(4) { animation-delay: .12s; }
.cm-nav-drawer.is-open .cm-nav-drawer__links a:nth-child(5) { animation-delay: .15s; }
.cm-nav-drawer.is-open .cm-nav-drawer__links a:nth-child(6) { animation-delay: .18s; }
.cm-nav-drawer.is-open .cm-nav-drawer__links a:nth-child(n+7) { animation-delay: .21s; }
@keyframes cm-drawer-link-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
    .cm-nav-drawer.is-open .cm-nav-drawer__links a { animation: none; }
}

header:not(.nav) .cm-public-nav a.is-current,
header:not(.nav) .cm-public-nav a[aria-current="page"],
.adm-header__links.cm-public-nav a.is-current,
.adm-header__links.cm-public-nav a[aria-current="page"] {
    color: var(--text);
    background: var(--header-link-hover-bg);
}

/* Mobile Navigation - Portal pages only */
header:not(.nav) .nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    width: clamp(44px, 11vw, 52px);
    height: clamp(44px, 11vw, 52px);
    min-width: clamp(44px, 11vw, 52px);
    min-height: clamp(44px, 11vw, 52px);
    padding: 0;
    border-radius: clamp(12px, 3vw, 16px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    background: var(--header-toggle-bg);
    border: 1px solid var(--header-toggle-border);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    align-self: center;
    position: relative;
    z-index: 30;
    pointer-events: auto;
}

header:not(.nav) .nav-toggle:hover {
    background: var(--header-link-hover-bg);
    border-color: var(--header-toggle-border);
}

header:not(.nav) .nav-toggle span {
    width: clamp(20px, 5vw, 24px);
    height: 2.5px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
    flex: 0 0 auto;
}

header:not(.nav) .nav-links-mobile {
    display: none;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 12px clamp(12px, 2.5vw, 24px);
    border-top: 1px solid var(--header-mobile-border);
    box-sizing: border-box;
}

header:not(.nav) .nav-links-mobile.active {
    display: flex;
}

header:not(.nav) .nav-links-mobile a {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 12px 18px;
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    text-decoration: none;
}

header:not(.nav) .nav-links-mobile a:hover {
    color: var(--text);
    background: var(--header-link-hover-bg);
}

@media (max-width: 768px) {
    header:not(.nav) .nav-toggle {
        display: flex;
    }
    
    header:not(.nav) .nav-links {
        display: none;
    }
    
    header:not(.nav) .brand-text span:first-child {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
    }
    
    header:not(.nav) .brand,
    header:not(.nav) .nav > a[href*="index.html"] {
        gap: 10px;
        flex: 1 1 0;
        min-width: 0;
        max-width: calc(100% - clamp(80px, 14vw, 96px));
    }

    header:not(.nav) .brand-text {
        min-width: 0;
    }
    
    header:not(.nav) .brand-logo {
        max-width: 64px;
        max-height: 64px;
        flex-shrink: 0;
    }
    
    header:not(.nav) .container {
        padding: 0;
    }

    header:not(.nav) .brand-text span[data-org-slogan],
    header:not(.nav) .brand-text .org-slogan,
    header:not(.nav) .brand-text #org-tagline {
        opacity: 0.86;
        max-width: 100%;
    }
}

/* Keep desktop/laptop nav visible longer; switch to hamburger on narrower viewports */
@media (max-width: 1100px) {
    header:not(.nav) .nav-toggle {
        display: flex;
    }

    header:not(.nav) .nav-links {
        display: none;
    }

    header:not(.nav) .cm-public-nav,
    .adm-header__links.cm-public-nav {
        display: none !important;
    }

    header:not(.nav) .nav-links-mobile.active {
        display: flex;
    }
}

/* Touch devices can need extra space sooner due to UI chrome and larger tap targets */
@media (max-width: 1100px) and (hover: none) and (pointer: coarse) {
    header:not(.nav) .nav-toggle {
        display: flex;
    }

    header:not(.nav) .nav-links {
        display: none;
    }

    header:not(.nav) .nav-links-mobile.active {
        display: flex;
    }
}

/* iOS/Safari landscape rendering can show side gutters with fixed backgrounds */
@media (hover: none) and (pointer: coarse) {
    body {
        background-attachment: scroll;
    }
}

@media (max-width: 480px) {
    header:not(.nav) .brand-text span:first-child {
        font-size: clamp(0.85rem, 4vw, 1rem);
    }
    
    header:not(.nav) .brand,
    header:not(.nav) .nav > a[href*="index.html"] {
        gap: 8px;
        max-width: calc(100% - clamp(76px, 16vw, 88px));
    }
    
    header:not(.nav) .brand-logo {
        max-width: 56px;
        max-height: 56px;
    }
    
    header:not(.nav) .adm-header__logo {
        width: 56px;
        height: 56px;
    }
    
    header:not(.nav) .nav {
        padding: 12px 0;
        gap: 12px;
    }

    header:not(.nav) .brand-text span[data-org-slogan],
    header:not(.nav) .brand-text .org-slogan,
    header:not(.nav) .brand-text #org-tagline {
        display: none !important;
    }
}

@media (max-width: 380px) {
    header:not(.nav) .container {
        padding: 0;
    }

    header:not(.nav) .nav {
        gap: 10px;
    }

    header:not(.nav) .brand-logo {
        max-width: 48px;
        max-height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    header:not(.nav) .adm-header__logo {
        width: 48px;
        height: 48px;
    }
}

/* Global responsive foundation for portal/dashboard/content pages */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  .signup-card,
  .account-card,
  .summary-box,
  .account-section,
  .portal-section {
    padding: clamp(16px, 2.8vw, 28px) !important;
  }

  .dashboard-quick-links {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .hero,
  .section,
  .cta {
    padding-top: clamp(36px, 8vw, 56px);
    padding-bottom: clamp(28px, 7vw, 42px);
  }

  .hero__inner,
  .preview__grid,
  .featureGrid,
  .pricing,
  .how,
  .customize,
  .termGrid,
  .cta__inner {
    grid-template-columns: 1fr !important;
  }

  .hero__inner,
  .customize,
  .how,
  .cta__inner {
    gap: 16px !important;
  }

  .preview__chips,
  .hero__cta,
  .hero__trust,
  .strip__inner,
  .strip__items,
  .toggle,
  .actions,
  .admin-header-row,
  .admin-header-controls,
  .dashboard-quick-links,
  .portal-footer__legal {
    width: 100%;
  }

  .hero__cta > *,
  .cta__actions > *,
  .actions > *,
  .admin-header-controls > *,
  .dashboard-quick-links > * {
    max-width: 100%;
  }

  .cta__inner,
  .footer__inner,
  .portal-footer .container,
  .admin-header-row,
  .admin-header-controls {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .admin-header-row,
  .admin-header-controls,
  .welcome-header {
    gap: 12px !important;
  }

  .dashboard-quick-links {
    grid-template-columns: 1fr !important;
  }

  .dashboard-quick-link,
  .portal-footer__legal a,
  .footer__right a {
    width: 100%;
    justify-content: center;
  }

  .dashboard-table {
    min-width: 640px;
  }

  .dashboard-table th,
  .dashboard-table td {
    padding: 10px 12px;
  }

  .signup-card [style*="display:flex"],
  .account-card [style*="display:flex"],
  .account-section [style*="display:flex"],
  .portal-section [style*="display:flex"],
  .summary-box [style*="display:flex"],
  .register-card [style*="display:flex"],
  form [style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  .signup-card [style*="min-width"],
  .account-card [style*="min-width"],
  .account-section [style*="min-width"],
  .portal-section [style*="min-width"],
  .summary-box [style*="min-width"],
  .signup-card [style*="max-width"],
  .account-card [style*="max-width"],
  .account-section [style*="max-width"],
  .portal-section [style*="max-width"],
  .summary-box [style*="max-width"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  select,
  textarea,
  .input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .signup-card input,
  .signup-card select,
  .signup-card textarea,
  .account-card input,
  .account-card select,
  .account-card textarea,
  .account-section input,
  .account-section select,
  .account-section textarea,
  .portal-section input,
  .portal-section select,
  .portal-section textarea,
  .summary-box input,
  .summary-box select,
  .summary-box textarea,
  .signup-card button,
  .account-card button,
  .account-section button,
  .portal-section button,
  .summary-box button {
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  input[style*="min-width"],
  select[style*="min-width"],
  textarea[style*="min-width"],
  input[style*="max-width"],
  select[style*="max-width"],
  textarea[style*="max-width"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  [style*="min-width"] {
    min-width: 0 !important;
  }

  input[style*="width"],
  select[style*="width"],
  textarea[style*="width"],
  button[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-title,
  .h1,
  .h2 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .signup-card,
  .account-card,
  .summary-box,
  .account-section,
  .portal-section {
    border-radius: 18px !important;
    padding: 16px !important;
  }

  .dashboard-quick-link {
    padding: 0.9rem 1rem;
    gap: 12px;
  }

  .dashboard-quick-link i {
    font-size: 1.25rem;
  }

  .hero__trust,
  .preview__bottom,
  .cta__actions,
  .actions {
    gap: 10px !important;
  }

  .hero__cta > *,
  .cta__actions > *,
  .actions > * {
    width: 100%;
    justify-content: center;
  }

  .trustItem,
  .pillBtn,
  .btn,
  .btn--ghost,
  .btn-ghost,
  .btn-primary,
  .btn-secondary {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  .platform-legal-gate__panel,
  .modal__panel {
    padding: 16px;
    border-radius: 16px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  select,
  textarea,
  .input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]) {
    padding: 12px 14px;
    border-radius: var(--radius-lg);
  }

  /* Electronic signature section – mobile friendly */
  .signature-section {
    padding: 14px 12px !important;
    margin-left: 0;
    margin-right: 0;
  }
  .signature-section__details,
  .signature-section__ack {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .signature-participant-block {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .signature-method-btns {
    flex-direction: column;
  }
  .signature-method-btns .signature-method-btn {
    flex: 1 1 auto !important;
    width: 100%;
    min-height: 48px !important;
  }
  .signature-draw-area canvas#signaturePad {
    height: 140px;
    touch-action: none;
  }
  .signature-section__input {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  .signature-action-btn {
    min-height: 44px !important;
  }
  #signatureStatus,
  #typedSignatureStatus {
    min-width: 0 !important;
  }
}

/* Signature section: tablet and small viewports */
@media (max-width: 768px) {
  .signature-section {
    max-width: 100%;
    overflow: hidden;
  }
  .signature-method-btns {
    flex-wrap: wrap;
  }
  .signature-method-btns .signature-method-btn {
    min-height: 44px;
  }
  .signature-section__details {
    padding: 10px !important;
  }
}

/* Shared responsive shell for landing and marketing pages */
@media (max-width: 980px) {
  .nav__inner {
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  .brand--enhanced,
  .brand {
    min-width: 0;
    flex: 1 1 auto;
    max-width: calc(100% - 56px);
  }

  .brand__text,
  .brand__name,
  .brand__tagline {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav__actions {
    gap: 8px !important;
    flex: 0 0 auto;
    min-width: fit-content;
  }

  .nav__mobileInner,
  .nav__mobileCtas {
    width: 100%;
  }

  .nav__mobileCtas {
    flex-wrap: wrap;
  }

  .nav__mobileCtas > * {
    flex: 1 1 220px;
    max-width: 100%;
  }

  .hero__copy,
  .hero__visual,
  .section__head,
  .cta__inner > * {
    min-width: 0;
  }

  .preview,
  .cta__inner,
  .modal__panel,
  .platform-legal-gate__panel {
    width: 100%;
    max-width: 100%;
  }

  .preview__top,
  .miniCard,
  .mockRow {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .nav__inner {
    align-items: center;
  }

  .brand--enhanced {
    padding: 4px 6px;
    gap: 8px;
  }

  .brand__logo-wrapper {
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    max-height: 36px;
  }

  .brand__logo {
    max-width: 36px;
    max-height: 36px;
  }

  .brand__name {
    font-size: clamp(0.95rem, 5vw, 1.05rem);
  }

  .hero__trust > *,
  .preview__bottom > *,
  .cta__actions > * {
    flex: 1 1 100%;
  }

  .preview__chips {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .nav__actions {
    gap: 6px !important;
  }

  .iconbtn,
  .nav__burger {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .platform-legal-gate,
  .modal {
    padding: 14px;
  }

  .platform-legal-gate__panel,
  .modal__panel {
    border-radius: var(--radius-lg);
    padding: 14px;
  }
}

/* Responsive adjustments for medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
    header:not(.nav) .brand-text span:first-child {
        font-size: clamp(1rem, 2vw, 1.2rem);
    }
    
    header:not(.nav) .nav-links a {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Header Styles - Portal pages only */
header:not(.nav) ~ section .section-header {
    text-align: center;
    margin-bottom: 48px;
    animation: fadeInUp 0.8s ease;
}

header:not(.nav) ~ section .section-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--text) 0%, var(--purple-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

header:not(.nav) ~ section .section-subtitle {
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

header:not(.nav) ~ section .section-header.cm-live-hero-row,
header:not(.nav) ~ section .section-header.cm-score-hero-row {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  header:not(.nav) ~ section .section-header.cm-live-hero-row,
  header:not(.nav) ~ section .section-header.cm-score-hero-row {
    margin-bottom: 22px;
  }
}

.brand{display:flex; align-items:center; gap:12px; transition: all 0.3s var(--ease); min-width:0; flex-shrink:1;}
.brand--enhanced{gap:16px; padding:8px 12px; border-radius:16px; position:relative;}
.brand--enhanced::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(var(--mint-rgb),0.05);
  border-radius:16px;
  opacity:0;
  transition: opacity 0.3s var(--ease);
}
.brand--enhanced:hover::before{opacity:1;}
.brand__logo-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:50px;
  max-width:50px;
  height:50px;
  max-height:50px;
  overflow:visible;
}
.brand__logo{
  height:auto;
  max-height:50px;
  max-width:50px;
  width:auto;
  transition: all 0.4s var(--ease);
  position:relative;
  z-index:2;
  object-fit:contain;
}
.brand--enhanced:hover .brand__logo{ transform: scale(1.08) rotate(-3deg); }

.brand__glow{
  position:absolute;
  inset:-8px;
  background: radial-gradient(circle, rgba(var(--mint-rgb),0.4), transparent 70%);
  border-radius:50%;
  opacity:0;
  transition: opacity 0.4s var(--ease);
  z-index:1;
  filter:blur(12px);
}
.brand--enhanced:hover .brand__glow{ opacity:1; animation: pulse-glow 2s ease-in-out infinite; }
@keyframes pulse-glow{
  0%, 100% {transform: scale(1); opacity:0.6;}
  50% {transform: scale(1.1); opacity:0.8;}
}

.brand__text{display:flex; flex-direction:column; gap:2px; transition: transform 0.3s var(--ease);}
.brand--enhanced:hover .brand__text{ transform: translateX(3px); }

.brand__name{
  font-size:22px;
  font-weight:900;
  color:var(--text);
  line-height:1.1;
  letter-spacing:-0.02em;
  background: linear-gradient(135deg, #fff 0%, var(--mint) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Full brand lockup (mascot + wordmark in one image) */
.brand__lockup{ display:none; }
.brand--has-lockup{ flex-direction:column; align-items:flex-start; gap:3px; padding:2px 0; }
.brand--has-lockup .brand__lockup{
  display:block;
  height:64px;
  width:auto;
  max-width:420px;
  margin:-8px 0;                 /* let it grow without inflating the nav bar */
  object-fit:contain;
  filter: drop-shadow(0 0 12px rgba(46,213,115,.45));
}
.brand--has-lockup .brand__logo-wrapper,
.brand--has-lockup .brand__name,
.brand--has-lockup .brand__tagline{ display:none; }
.brand--has-lockup:hover .brand__lockup{ transform: scale(1.03); }
.brand--has-lockup .brand__lockup{ transition: transform 0.3s var(--ease); }
.brand__tagline{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:0.02em;
}

.nav__links{display:flex; gap:20px; align-items:center}
.nav__links a{color:var(--muted); font-weight:700; font-size:14px; padding:10px 10px; border-radius: var(--radius-lg); transition: all .2s var(--ease)}
.nav__links a:hover{color:var(--text); background: rgba(255,255,255,.06)}

.nav__actions{display:flex; gap:10px; align-items:center; flex-shrink:0;}

.iconbtn{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius: var(--radius-lg);
  cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.iconbtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)}
.nav__burger{display:none}

.nav__mobile{border-top:1px solid rgba(255,255,255,.06); padding:8px 0; background: rgba(5,14,11,.72)}
.nav__mobileInner{display:flex; flex-direction:column; gap:10px; padding:12px 0}
.nav__mobileInner a{padding:12px 12px; border-radius: var(--radius-lg); background: rgba(255,255,255,.04)}
.nav__mobileCtas{display:flex; gap:10px}

/* Buttons - Modern & Sleek */
.btn{
  appearance:none; border:1px solid var(--field-border-strong, rgba(255,255,255,.24)); cursor:pointer;
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint2) 100%);
  color: var(--bg-start);
  font-weight:700;
  padding:12px 20px;
  border-radius: var(--radius-lg);
  display:inline-flex; align-items:center; gap:8px;
  box-shadow: 0 4px 12px rgba(var(--mint-rgb), .25), 0 2px 4px rgba(0,0,0,.1);
  transition: all .2s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .2s ease;
}

.btn:hover::before {
  opacity: 1;
}

.btn:hover{
  transform: translateY(-2px); 
  box-shadow: 0 8px 20px rgba(var(--mint-rgb), .35), 0 4px 8px rgba(0,0,0,.15);
}

.btn:active{
  transform: translateY(0px) scale(.98);
  box-shadow: 0 2px 8px rgba(var(--mint-rgb), .25);
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none !important;
  box-shadow: none !important;
}

.btn--ghost,
.btn-ghost {
  background: var(--btn-ghost-bg, rgba(255,255,255,.05));
  color: var(--text);
  border: 1px solid var(--btn-ghost-border, rgba(255,255,255,.12));
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--ghost:hover,
.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg, rgba(255,255,255,.1));
  border-color: var(--btn-ghost-hover-border, rgba(255,255,255,.2));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* Primary & secondary buttons - tighter radius for a cleaner portal UI */
.btn-primary,
.btn-secondary {
  border-radius: var(--radius-lg) !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint2) 100%) !important;
  color: var(--on-primary, #111827) !important;
  border: 1px solid rgba(var(--mint-rgb), .58) !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--mint-rgb), 0.35);
}
.btn-secondary {
  background: var(--btn-secondary-bg, rgba(255,255,255,.05)) !important;
  color: var(--text) !important;
  border: 1px solid var(--btn-secondary-border, rgba(255,255,255,.2)) !important;
}
.btn-secondary:hover {
  background: var(--btn-secondary-hover-bg, rgba(255,255,255,.1)) !important;
  border-color: var(--btn-secondary-hover-border, rgba(255,255,255,.2)) !important;
  transform: translateY(-2px);
}

/* Public/member tenant UI consumes semantic roles; back-office pages retain their
   existing presentation while the Brand Studio foundation rolls out incrementally. */
body.cm-semantic-theme .skip-link,
body.cm-semantic-theme .btn:not(.btn-ghost):not(.btn--ghost):not(.btn-secondary) {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-color: var(--button-primary-bg);
}
body.cm-semantic-theme .btn:not(.btn-ghost):not(.btn--ghost):not(.btn-secondary):hover {
  background: var(--button-primary-bg-hover);
}
body.cm-semantic-theme .btn-primary {
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-bg) !important;
}
body.cm-semantic-theme .btn-primary:hover {
  background: var(--button-primary-bg-hover) !important;
}
body.cm-semantic-theme .btn-secondary {
  background: var(--button-secondary-bg) !important;
  color: var(--button-secondary-text) !important;
  border-color: var(--button-secondary-border) !important;
}
body.cm-semantic-theme .btn-secondary:hover {
  background: var(--button-secondary-bg-hover) !important;
}
body.cm-semantic-theme .btn-ghost,
body.cm-semantic-theme .btn--ghost {
  background: var(--surface-muted);
  color: var(--text);
  border-color: var(--border);
}
body.cm-semantic-theme .btn-ghost:hover,
body.cm-semantic-theme .btn--ghost:hover {
  background: var(--surface-elevated);
}

.btn--lg{padding:14px 24px; border-radius: var(--radius-lg); font-size:15px; font-weight:700}
.btn--block{width:100%; justify-content:center}

/* ========== PORTAL UI: Sleek & Animated ========== */
/* Shared portal tabs, stat cards, and action buttons */

.adm-reg-scope-groups {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.adm-reg-scope-group {
  min-width: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.025);
}

.adm-reg-scope-group__label {
  display: block;
  margin: 0 0 8px 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adm-reg-scope-group__options {
  display: flex;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

/* Keep registration locations inside the panel, even with many locations. */
#registrations-tab .adm-reg-scope-groups {
  grid-template-columns: minmax(0, 1fr);
}

#submission-location-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* overflow-x:auto makes overflow-y compute to auto too, so this box clips
     vertically. Pad top/bottom (and a little side) so the selected pill's lift
     (translateY) and mint glow (box-shadow) aren't cut off. */
  padding: 7px 4px 9px;
  scroll-snap-type: x proximity;
}

#submission-location-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  .adm-reg-scope-groups { grid-template-columns: 1fr; }
  .adm-reg-scope-group__options {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Same clip caveat as #submission-location-tabs: pad so the active pill's
       lift + glow show inside the horizontal scroller. */
    padding: 7px 4px 9px;
    scroll-snap-type: x mandatory;
  }
  .adm-reg-scope-group__options button {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

#assignment-location-tabs button,
#assignment-type-tabs button,
#submission-response-tabs button,
#submission-location-tabs button,
#org-responses-scope-tabs button,
.admin-nav-tabs button,
.config-subtab,
.branding-subtab,
.tab-nav button,
.location-tabs button {
  border-radius: var(--radius-lg) !important;
  padding: 10px 20px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.22)) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#assignment-location-tabs button:hover,
#assignment-type-tabs button:hover,
#submission-response-tabs button:hover,
#submission-location-tabs button:hover,
#org-responses-scope-tabs button:hover,
.admin-nav-tabs button:hover,
.config-subtab:hover,
.branding-subtab:hover,
.tab-nav button:hover,
.location-tabs button:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: var(--surface-border-strong, rgba(255,255,255,0.34)) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

#assignment-location-tabs button.active-location-tab,
#assignment-type-tabs button.active-location-tab,
#assignment-mode-tabs button.active-location-tab,
#submission-response-tabs button.active-location-tab,
#submission-location-tabs button.active-location-tab,
#org-responses-scope-tabs button.active-location-tab,
.admin-nav-tabs button.active,
.config-subtab.active,
.branding-subtab.active,
.tab-nav button.active,
.location-tabs button.active {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint2) 100%) !important;
  border-color: rgba(var(--mint-rgb), .58) !important;
  color: var(--on-primary, #111827) !important;
  box-shadow: 0 4px 16px rgba(var(--mint-rgb), 0.4), 0 2px 8px rgba(0,0,0,0.15) !important;
  transform: translateY(-1px);
}

#admin-day-filter-tabs button {
  border-radius: var(--radius-lg) !important;
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.22)) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
  backdrop-filter: blur(10px);
}

#admin-day-filter-tabs button:hover {
  background: rgba(255,255,255,0.1) !important;
  transform: translateY(-1px);
}

#admin-day-filter-tabs button.active {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint2) 100%) !important;
  border-color: rgba(var(--mint-rgb), .58) !important;
  color: var(--on-primary, #111827) !important;
  box-shadow: 0 2px 12px rgba(var(--mint-rgb), 0.35);
}

.view-toggle-btn {
  border-radius: var(--radius-lg) !important;
  padding: 10px 18px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1.5px solid var(--surface-border, rgba(255,255,255,0.24)) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.9) !important;
  cursor: pointer;
}

.view-toggle-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: var(--surface-border-strong, rgba(255,255,255,0.34)) !important;
  transform: translateY(-1px);
}

.view-toggle-btn.active {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint2) 100%) !important;
  border-color: rgba(var(--mint-rgb), .62) !important;
  color: var(--bg-start) !important;
  box-shadow: 0 2px 12px rgba(var(--mint-rgb), 0.35);
}

/* Stat cards - sleek with subtle glow */
.portal-stat-card,
.stats-grid .stat-card {
  border-radius: var(--radius-xl) !important;
  padding: 20px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.portal-stat-card:hover,
.stats-grid .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(var(--mint-rgb), 0.15);
  border-color: rgba(var(--mint-rgb), 0.2) !important;
}

/* Action buttons (Make Admin, Make Coach) - high visibility */
.btn-action-admin,
.btn-action-coach {
  border-radius: var(--radius-lg) !important;
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid var(--surface-border, rgba(255,255,255,.22)) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  cursor: pointer;
}

.btn-action-admin {
  background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%) !important;
  color: #1c1917 !important;
}

.btn-action-admin:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251,191,36,0.4);
}

.btn-action-coach {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint2) 100%) !important;
  color: var(--bg-start) !important;
}

.btn-action-coach:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--mint-rgb), 0.4);
}

/* Summary boxes & account cards - sleek, animated */
.summary-box {
  background: linear-gradient(145deg, var(--surface-1, rgba(255,255,255,.06)) 0%, var(--surface-2, rgba(255,255,255,.02)) 100%);
  border: 1px solid var(--surface-border, rgba(255,255,255,.1));
  border-radius: 24px;
  padding: 1.5rem;
  backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.summary-box:hover {
  border-color: rgba(var(--mint-rgb), 0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(var(--mint-rgb), 0.08);
}

.account-card {
  background: linear-gradient(145deg, var(--surface-1, rgba(255,255,255,.06)) 0%, var(--surface-2, rgba(255,255,255,.02)) 100%);
  border: 1px solid var(--surface-border, rgba(255,255,255,.1));
  border-radius: 24px;
  padding: 2rem;
  backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.account-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--mint-rgb), 0.2);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 0 0 1px rgba(var(--mint-rgb), 0.1);
}

@keyframes portalFadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.summary-box,
.account-card {
  animation: portalFadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Signup/dashboard cards - portal main content */
.signup-card {
  background: linear-gradient(145deg, var(--surface-1, rgba(255,255,255,.06)) 0%, var(--surface-2, rgba(255,255,255,.02)) 100%);
  border: 1px solid var(--surface-border, rgba(255,255,255,.1));
  border-radius: 24px;
  padding: 2rem;
  backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.signup-card:hover {
  border-color: rgba(var(--mint-rgb), 0.15);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 0 1px rgba(var(--mint-rgb), 0.06);
}
.signup-card .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  margin: 1rem 0;
}
.signup-card .section-mini {
  font-size: 1rem;
  font-weight: 600;
  color: var(--purple-soft);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.signup-card .section-mini i { color: var(--mint); }

/* Dashboard quick links grid */
.dashboard-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 1rem;
}
.dashboard-quick-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.25rem;
  background: rgba(var(--accent-rgb), 0.4);
  border: 1px solid rgba(var(--purple-soft-rgb), 0.2);
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashboard-quick-link:hover {
  background: rgba(var(--accent-rgb), 0.6);
  border-color: rgba(var(--mint-rgb), 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.dashboard-quick-link i {
  font-size: 1.5rem;
  color: var(--mint);
  flex-shrink: 0;
}
.dashboard-quick-link span { flex: 1; }

/* Dashboard table styling */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
}
.dashboard-table th,
.dashboard-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dashboard-table th {
  color: var(--purple-soft);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dashboard-table td { color: var(--text); font-size: 0.9rem; }
.dashboard-table tr:hover td { background: rgba(255,255,255,0.03); }
.dashboard-table .input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.9rem;
}
.dashboard-table .input:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(var(--mint-rgb), 0.2);
}

.hidden { display: none !important; }

.account-section,
.portal-section {
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 24px;
  backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.account-section:hover,
.portal-section:hover {
  border-color: rgba(var(--mint-rgb), 0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 0 1px rgba(var(--mint-rgb), 0.08);
}

/* Search & inputs in portals - ensure visibility */
.search-box .input,
input[type="search"],
input[placeholder*="Search"],
input[placeholder*="search"] {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  color: rgba(255,255,255,0.95);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-box .input::placeholder,
input[placeholder*="Search"]::placeholder,
input[placeholder*="search"]::placeholder {
  color: rgba(255,255,255,0.5);
}

.search-box .input:focus,
input[type="search"]:focus,
input[placeholder*="Search"]:focus {
  background: rgba(255,255,255,0.12);
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(var(--mint-rgb), 0.2);
}

/* Hero */
.hero{position:relative; padding:64px 0 42px}
.hero__inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center}
.hero__bg{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.grid{position:absolute; inset:-1px; background:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(closest-side at 40% 30%, rgba(0,0,0,.9), transparent 68%);
  opacity:.35;
}
.blob{position:absolute; width:560px; height:560px; filter: blur(30px); opacity:.35; transform: translate3d(0,0,0)}
.blob--1{left:-160px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(var(--mint-rgb),.55), rgba(var(--forest-rgb, 11,61,46),.25), transparent 60%)}
.blob--2{right:-220px; top:0; background: radial-gradient(circle at 30% 30%, rgba(var(--forest-rgb, 11,61,46),.85), rgba(var(--mint-rgb),.15), transparent 62%)}

.pill{display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: var(--muted); font-weight:800; font-size:13px}
.dot{width:8px; height:8px; border-radius: 999px; background: var(--mint); box-shadow: 0 0 16px rgba(var(--mint-rgb),.55)}

.h1{font-size: clamp(36px, 4.2vw, 60px); line-height:1.03; margin:14px 0 12px; letter-spacing: -0.03em}
.lead{color:var(--muted); font-size: 16.5px; line-height:1.7; margin:0 0 18px; max-width: 52ch}

.hero__cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:18px 0}
.hero__trust{display:flex; gap:16px; flex-wrap:wrap; margin-top:16px}
.trustItem{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius: var(--radius-lg); background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color: var(--muted); font-weight:750; font-size:13px}
.trustItem i{color: var(--mint)}

.card{background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius2); box-shadow: var(--shadow)}
body.cm-semantic-theme .card{background:var(--surface);border-color:var(--border)}
.preview{padding:16px; position:relative; overflow:hidden}
.preview::before{content:""; position:absolute; inset:-2px; background: radial-gradient(600px 260px at 20% 0%, rgba(var(--mint-rgb),.18), transparent 55%), radial-gradient(520px 260px at 100% 10%, rgba(var(--forest-rgb, 11,61,46),.35), transparent 60%); pointer-events:none}
.preview__top{position:relative; display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.miniBrand{display:flex; gap:10px; align-items:center; color: var(--muted); font-weight:800; font-size:13px}
.miniDot{width:10px; height:10px; border-radius:999px; background: var(--mint2)}
.preview__chips{display:flex; gap:8px; align-items:center}
.chip{padding:7px 10px; border-radius:999px; background: rgba(var(--mint-rgb),.14); border: 1px solid rgba(var(--mint-rgb),.25); color: rgba(255,255,255,.90); font-weight:900; font-size:12px}
.chip--soft{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: var(--muted)}

.preview__grid{position:relative; display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.kpi{background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius: 18px; padding:12px}
.kpi--wide{grid-column:1/-1}
.kpi__label{color: var(--muted2); font-weight:800; font-size:12px}
.kpi__value{font-size: 18px; font-weight:1000; margin-top:6px}
.kpi__sub{color: var(--muted); font-size:12.5px; margin-top:6px}
.timeline{margin-top:10px; display:flex; flex-direction:column; gap:10px}
.titem{display:flex; gap:10px; align-items:flex-start}
.t{width:9px; height:9px; border-radius:999px; background: rgba(var(--mint-rgb),.7); margin-top:6px; box-shadow: 0 0 18px rgba(var(--mint-rgb),.3)}
.muted{color: var(--muted)}
body.cm-semantic-theme .muted{color:var(--text-muted)}

.preview__bottom{position:relative; display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pillBtn{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); border-radius: 999px; padding:10px 12px; font-weight:900; cursor:pointer; transition: transform .18s var(--ease), background .18s var(--ease)}
.pillBtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)}

.floating{position:absolute; right:-18px; bottom:22px; transform: translate3d(0,0,0)}
.floating--2{right:auto; left:-18px; bottom:88px}
.miniCard{display:flex; gap:10px; align-items:flex-start; padding:12px 12px; border-radius:18px; background: rgba(5,14,11,.72); border:1px solid rgba(255,255,255,.10); box-shadow: 0 24px 60px rgba(0,0,0,.35)}
.miniCard i{color: var(--mint); font-size:18px; margin-top:2px}

/* Strip */
.strip{padding:18px 0; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02)}
.strip__inner{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.strip__title{color: var(--muted2); font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px}
.strip__items{display:flex; gap:10px; flex-wrap:wrap}
.tag{padding:9px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--muted); font-weight:800; font-size:13px}

/* Sections */
.section{padding:76px 0}
.section--alt{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05)}
.section__head{display:flex; flex-direction:column; gap:10px; margin-bottom:26px}
.h2{font-size: clamp(26px, 2.7vw, 40px); letter-spacing: -0.02em; margin:0; font-weight:1000}
.h3{font-size: 22px; margin:0; font-weight:1000}
.sub{color: var(--muted); margin:0; line-height:1.6; max-width: 70ch}

/* Features */
.featureGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.fcard{padding:18px; border-radius: var(--radius); background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); will-change: transform}
.fcard:hover{transform: translateY(-6px) scale(1.02); background: rgba(255,255,255,.08); border-color: rgba(var(--mint-rgb),.35); box-shadow: 0 20px 40px rgba(var(--mint-rgb),.15)}
.ficon{width:46px; height:46px; border-radius: 16px; display:grid; place-items:center; background: rgba(var(--mint-rgb),.14); border:1px solid rgba(var(--mint-rgb),.25); color: rgba(255,255,255,.92); margin-bottom:12px}
.fcard h3{margin:0 0 8px; font-size:16px; font-weight:1000}
.fcard p{margin:0 0 12px; color: var(--muted); line-height:1.6; font-size:14px}
.fmeta{color: var(--muted2); font-weight:800; font-size:12.5px}

.customize{margin-top:18px; display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start; padding:18px; border-radius: var(--radius2); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08)}
.term{grid-column: 1 / -1; padding:14px; border-radius: 18px; background: rgba(5,14,11,.65); border:1px solid rgba(255,255,255,.10)}
.termGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
.termCell{padding:12px; border-radius: 16px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.termCell .k{color: var(--muted2); font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.termCell .v{margin-top:6px; font-weight:1000}

/* How */
.how{display:grid; grid-template-columns: .9fr 1.1fr; gap:14px; align-items:stretch}
.how__steps{display:flex; flex-direction:column; gap:10px}
.step{display:grid; gap:4px; text-align:left; padding:14px; border-radius: var(--radius-xl); border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); cursor:pointer; transition: all .18s var(--ease)}
.step:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}
.step.is-active{border-color: rgba(var(--mint-rgb),.28); background: rgba(var(--mint-rgb),.10)}
.step__num{color: var(--muted2); font-weight:1000; letter-spacing:.08em}
.step__title{font-weight:1000}
.step__desc{color: var(--muted); font-weight:700; font-size:13px}

.how__panel{padding:16px}
.how__panelTop{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.how__panelBody{display:grid; gap:12px}
.mockRow{display:flex; justify-content:space-between; gap:12px; padding:12px; border-radius: 16px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.mockRow strong{font-weight:1000}

/* Pricing */
.toggle{display:flex; gap:10px; align-items:center; margin-top:12px}
.toggle__btn{width:52px; height:30px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); position:relative; cursor:pointer}
.toggle__knob{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:999px; background: linear-gradient(180deg, var(--mint) 0%, var(--mint2) 100%); transition: transform .22s var(--ease)}
.toggle__btn[aria-pressed="true"] .toggle__knob{transform: translateX(22px)}
.badge{padding:3px 8px; border-radius:999px; background: rgba(var(--mint-rgb),.12); border:1px solid rgba(var(--mint-rgb),.22); color: rgba(255,255,255,.88); font-weight:900; font-size:11px}
body.cm-semantic-theme .badge{background:var(--surface-muted);border-color:var(--border);color:var(--text)}

.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.pcard{padding:18px; border-radius: var(--radius2); background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); position:relative; overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); will-change: transform}
.pcard:hover{transform: translateY(-8px) scale(1.03); box-shadow: 0 25px 50px rgba(var(--mint-rgb),.2)}
.pcard--featured{border-color: rgba(var(--mint-rgb),.35); background: rgba(var(--mint-rgb),.08)}
.pcard--featured::before{content:""; position:absolute; inset:-2px; background: radial-gradient(520px 220px at 20% 0%, rgba(var(--mint-rgb),.20), transparent 55%); pointer-events:none}
.most{position:absolute; top:14px; right:14px; padding:7px 10px; border-radius:999px; background: rgba(var(--mint-rgb),.18); border:1px solid rgba(var(--mint-rgb),.28); font-weight:1000; font-size:12px}
.phead h3{margin:0 0 6px; font-weight:1000}
.price{display:flex; align-items:baseline; gap:6px; margin:12px 0 10px; position:relative}
.pval{font-size: 38px; font-weight:1100; letter-spacing: -0.03em}
.psub{color: var(--muted)}
.plist{list-style:none; padding:0; margin:0 0 14px; display:grid; gap:10px}
.plist li{display:flex; gap:10px; align-items:flex-start; color: var(--muted); font-weight:700}
.plist i{color: var(--mint); margin-top:2px}

.note{margin-top:14px; display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius: 18px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color: var(--muted)}
.note i{color: var(--mint); margin-top:2px}

/* Pricing Comparison Tables */
.compareBlock{
  margin-top: 1.25rem;
  padding: 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.compareHead{margin-bottom: 12px}
.compareTitle{
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 1000;
  letter-spacing: -0.01em;
}
.compareIntro{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}
.compareScrollWrap{position: relative}
.compareScrollWrap::before,
.compareScrollWrap::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
}
.compareScrollWrap::before{
  left: 0;
  background: linear-gradient(90deg, rgba(8,12,10,.92), transparent);
}
.compareScrollWrap::after{
  right: 0;
  background: linear-gradient(270deg, rgba(8,12,10,.92), transparent);
}
.compareScroll{
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(5,14,11,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-overflow-scrolling: touch;
}
.compareScroll:focus-visible{
  outline: 2px solid rgba(var(--mint-rgb), .55);
  outline-offset: 2px;
}
.compareTable{
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
.compareTable thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(17,27,22,.96);
  backdrop-filter: blur(7px);
}
.compareTable th,
.compareTable td{
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  vertical-align: middle;
  font-size: 13.5px;
}
.compareTable th{
  font-weight: 900;
  color: rgba(245,255,250,.95);
}
.compareTable tbody th{
  color: rgba(224,236,230,.92);
  width: 28%;
}
.compareTable tbody tr:nth-child(even) td,
.compareTable tbody tr:nth-child(even) th{
  background: rgba(255,255,255,.015);
}
.compareTable tbody tr:last-child td,
.compareTable tbody tr:last-child th{
  border-bottom: 0;
}
.cmpYes{
  color: var(--mint);
  font-weight: 900;
}
.cmpNo{
  color: rgba(255,255,255,.45);
  font-weight: 800;
}
.cmpLimited{
  color: var(--color-warning);
  font-weight: 900;
}
.cmpCustom{
  color: var(--purple-soft);
  font-weight: 900;
}
.compareFine{
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.compareSales{
  margin: 7px 2px 0;
  color: rgba(245,255,250,.86);
  font-size: 13px;
  font-weight: 800;
}

/* FAQ */
.faq{display:grid; gap:12px}
.faq details{background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius: 18px; padding:12px 14px}
.faq summary{cursor:pointer; font-weight:1000}
.faq__body{color: var(--muted); margin-top:10px; line-height:1.7}

/* CTA */
.cta{padding:56px 0; background: radial-gradient(900px 480px at 40% 20%, rgba(var(--mint-rgb),.18), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.cta__inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px; border-radius: var(--radius2); background: rgba(5,14,11,.65); border:1px solid rgba(255,255,255,.10)}
.cta__actions{display:flex; gap:12px; flex-wrap:wrap}

/* Footer */
.footer{padding:22px 0 26px; border-top:1px solid rgba(255,255,255,.06)}
.footer__inner{display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap}
.footer__logo{height:34px; width:auto; border-radius:var(--radius-md)}
.footer__right{display:flex; gap:14px; flex-wrap:wrap}
.footer__right a{color: var(--muted); font-weight:800}
.footer__right a:hover{color: var(--text)}

/* Portal footer - Powered by CoachMate (all dashboards/portals).
   The :has() selector covers explicit footers across legacy/auth templates;
   the class is the fallback applied by the shared tenant footer renderer. */
body:where(:has(> footer.portal-footer)),
.cm-page-with-sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body:where(:has(> footer.portal-footer)) > footer.portal-footer,
.cm-page-with-sticky-footer > .portal-footer {
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
}
/* Several auth/waiver templates historically claimed a full viewport before
   their footer, which forced an otherwise short page to scroll by one footer. */
body:where(:has(> footer.portal-footer)) > :is(.auth-wrapper, .waiver-wrapper) {
  flex: 1 0 auto;
  min-height: 0;
}
.portal-footer {
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  /* Used when the sticky-footer auto margin does not apply. Tall pages
     get their gap from `main` / `#main-content` padding instead. */
  margin-top: var(--page-footer-gap);
}
.portal-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.portal-footer__org {
  color: var(--muted);
  font-size: 0.875rem;
}
.portal-footer__powered {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.portal-footer__powered-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.portal-footer__powered-link:hover {
  color: var(--mint);
}
.portal-footer__logo {
  height: 20px;
  width: auto;
  border-radius: 6px;
  vertical-align: middle;
}
.portal-footer__legal {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}
.portal-footer__legal a {
  color: var(--muted2);
  font-size: 0.8rem;
  text-decoration: none;
}
.portal-footer__legal a:hover {
  color: var(--mint);
}
.portal-footer--minimal .portal-footer__org {
  display: none;
}

@media (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer__right {
    width: 100%;
    gap: 8px;
  }
  .footer__right a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    backdrop-filter: blur(10px);
    font-size: 0.82rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  }
  .footer__right a:hover {
    color: var(--text);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(0,0,0,0.24);
  }
  .footer__right a:active {
    transform: translateY(0);
  }
  .portal-footer .container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
  }
  .portal-footer {
    padding: 14px 0 16px;
  }
  .portal-footer .pp-links,
  .portal-footer .container > [data-sponsor-zone="footer_bar"] {
    flex: 0 0 100%;
    width: 100%;
  }
  .portal-footer .pp-links {
    margin-bottom: 2px;
  }
  .portal-footer__org,
  .portal-footer__powered {
    width: auto;
    max-width: 100%;
    font-size: 0.78rem;
  }
  .portal-footer__org {
    flex: 0 1 auto;
  }
  .portal-footer__powered {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .portal-footer__legal {
    flex: 0 0 100%;
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .portal-footer__legal a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    backdrop-filter: blur(10px);
    font-size: 0.8rem;
    line-height: 1.2;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  }
  .portal-footer__legal a:hover {
    color: var(--text);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(0,0,0,0.24);
  }
  .portal-footer__legal a:active {
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  .portal-footer__legal {
    grid-template-columns: 1fr;
  }
}

.platform-legal-gate {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: var(--overlay-bg, rgba(0, 0, 0, 0.72));
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.platform-legal-gate__panel {
  width: min(760px, 100%);
  background: var(--surface-3, rgba(8, 18, 16, 0.94));
  border: 1px solid var(--surface-border-strong, rgba(255, 255, 255, 0.2));
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  padding: 20px;
  color: var(--text);
}
.platform-legal-gate__panel h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: var(--text);
}
.platform-legal-gate__sub {
  margin: 0 0 4px;
  color: var(--muted);
}
.platform-legal-gate__version {
  margin: 0 0 14px;
  color: var(--mint);
  font-size: 0.85rem;
  font-weight: 700;
}
.platform-legal-gate__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}
.platform-legal-gate__check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  border-radius: 7px;
  border: 1.5px solid var(--field-border-strong, rgba(255,255,255,.28));
  background: var(--field-bg, rgba(255,255,255,.06));
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.platform-legal-gate__check input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .15s ease;
  box-shadow: inset 1em 1em var(--btn-primary-text, #04110d);
  clip-path: polygon(14% 44%, 0 58%, 50% 100%, 100% 18%, 84% 4%, 43% 62%);
}
.platform-legal-gate__check input[type="checkbox"]:checked {
  background: var(--btn-primary-bg, linear-gradient(135deg, var(--mint), var(--mint2)));
  border-color: var(--btn-primary-border, rgba(var(--mint-rgb), .8));
}
.platform-legal-gate__check input[type="checkbox"]:checked::before {
  transform: scale(1);
}
.platform-legal-gate__check a {
  color: var(--mint);
}
.platform-legal-gate__links {
  margin: 10px 0 14px;
  font-size: 0.85rem;
}
.platform-legal-gate__links a {
  color: var(--muted);
}
.platform-legal-gate__links a:hover {
  color: var(--mint);
}
.platform-legal-gate__error {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--danger-light);
  font-size: 0.85rem;
}

body.theme-light .platform-legal-gate {
  background: rgba(15, 23, 42, 0.35);
}
body.theme-light .platform-legal-gate__panel {
  background:
    radial-gradient(900px 320px at -15% -45%, rgba(var(--primary-rgb, var(--purple-rgb)), 0.1), transparent 70%),
    radial-gradient(860px 300px at 115% 10%, rgba(var(--secondary-rgb, var(--accent-gold-rgb)), 0.1), transparent 74%),
    var(--surface-2, rgba(255,255,255,.98));
  border-color: var(--surface-border-strong, rgba(17,24,39,.24));
  box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
}
body.theme-light .platform-legal-gate__sub {
  color: var(--muted, #475569);
}
body.theme-light .platform-legal-gate__version {
  color: var(--primary, var(--purple));
}
body.theme-light .platform-legal-gate__check {
  color: var(--text, #1e293b);
}
body.theme-light .platform-legal-gate__links a {
  color: var(--muted, #475569);
}
body.theme-light .platform-legal-gate__links a:hover {
  color: var(--primary, var(--purple));
}

/* Light-theme safety net for portal controls/pages with legacy inline styles */
body.theme-light .btn,
body.theme-light .btn-primary,
body.theme-light .register-btn,
body.theme-light .check-in-btn,
body.theme-light .btn-action-admin,
body.theme-light .btn-action-coach {
  color: var(--btn-primary-text, #111827) !important;
}
body.theme-light .btn-ghost,
body.theme-light .btn-secondary,
body.theme-light .pillBtn,
body.theme-light .view-toggle-btn,
body.theme-light .tab-nav button {
  color: var(--text, #1f2937) !important;
  border-color: var(--field-border-strong, rgba(17,24,39,.24)) !important;
  background: var(--field-bg, rgba(255,255,255,.98)) !important;
}
body.theme-light .tab-nav button.active,
body.theme-light .view-toggle-btn.active {
  color: var(--btn-primary-text, #111827) !important;
  border-color: var(--btn-primary-border, rgba(var(--primary-rgb, var(--purple-rgb)), .75)) !important;
  background: var(--btn-primary-bg, rgba(var(--primary-rgb, var(--purple-rgb)), .14)) !important;
}
body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.theme-light select,
body.theme-light textarea,
body.theme-light .input {
  color: var(--text, #1f2937);
  background: var(--field-bg, rgba(255,255,255,.98));
  border-color: var(--field-border-strong, rgba(17,24,39,.24));
}
body.theme-light button,
body.theme-light [role="button"],
body.theme-light .dropdown-toggle,
body.theme-light .select-trigger,
body.theme-light .toggle__btn {
  border: 1px solid var(--field-border-strong, rgba(17,24,39,.24));
}
body.theme-light .modal,
body.theme-light .modal__panel,
body.theme-light .adm-modal,
body.theme-light .interest-modal-panel,
body.theme-light .day-modal-content {
  color: var(--text, #1f2937);
}

/* Shared tenant checkbox skin. org-init/league-init attach this class to static
   and dynamically-rendered checkboxes, so this must be the only glyph renderer. */
.cm-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 7px;
  border: 2px solid var(--button-secondary-border, var(--border, rgba(255,255,255,.55)));
  background: var(--surface, var(--field-bg, rgba(255,255,255,.05)));
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
}

.cm-checkbox::before {
  content: '';
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform 0.15s ease-in-out;
  clip-path: polygon(14% 51%, 0 65%, 42% 100%, 100% 21%, 86% 8%, 41% 66%);
  background: var(--button-primary-text, #ffffff);
}

/* Some older feature styles drew a second check with ::after. Suppress that
   layer whenever the canonical checkbox skin is present. */
.cm-checkbox::after { content: none !important; }

.cm-checkbox:hover {
  border-color: var(--highlight-color, var(--button-secondary-border));
  background: var(--highlight-soft, var(--surface-elevated, rgba(255,255,255,.1)));
}

.cm-checkbox:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--focus-ring, var(--highlight-color)) 24%, transparent);
}

.cm-checkbox:checked {
  background: var(--button-primary-bg, var(--brand-color, var(--primary)));
  border-color: var(--button-primary-bg, var(--brand-color, var(--primary)));
}

.cm-checkbox:checked::before {
  transform: scale(1);
}

.cm-checkbox:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Modal */
:root {
  --cm-modal-z: 25000;
  --cm-modal-pad: 20px;
}

@media (max-width: 520px) {
  :root {
    --cm-modal-pad: 12px;
  }
}
body.cm-modal-open {
  overflow: hidden !important;
  padding-right: var(--cm-scrollbar-comp, 0px);
}
.modal:not(.cm-modal__dialog){
  position: fixed;
  inset: 0;
  z-index: var(--cm-modal-z);
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(var(--cm-modal-pad) + env(safe-area-inset-top, 0px))
           calc(var(--cm-modal-pad) + env(safe-area-inset-right, 0px))
           calc(var(--cm-modal-pad) + env(safe-area-inset-bottom, 0px))
           calc(var(--cm-modal-pad) + env(safe-area-inset-left, 0px));
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.modal:not(.cm-modal__dialog)[aria-hidden="false"]{display:flex; opacity:1; visibility:visible; pointer-events:auto}
.cm-modal--open{display:flex !important; opacity:1; visibility:visible; pointer-events:auto}
.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px)}
.modal__panel{position:relative; width:min(520px, calc(100% - 26px)); margin:0; padding:16px; border-radius: 20px; background: linear-gradient(180deg, rgba(22,28,40,.98) 0%, rgba(15,20,30,.99) 100%); border:1px solid rgba(255,255,255,.12); box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); max-height:calc(100dvh - (var(--cm-modal-pad) * 2)); overflow:auto; transform: translateY(10px) scale(.98); opacity:0; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s ease}
body.cm-semantic-theme .modal__panel{background:var(--surface-elevated);border-color:var(--border);color:var(--text)}
.modal.cm-modal--open .modal__panel,
.modal[aria-hidden="false"] .modal__panel{transform:translateY(0) scale(1); opacity:1}
.modal__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.form{display:grid; gap:10px; margin-top:12px}
label span{display:block; font-size:12px; color: var(--muted2); font-weight:900; margin-bottom:6px}
input, textarea, select{
  width:100%;
  padding:12px 16px;
  border-radius: var(--radius-lg);
  border:1px solid var(--field-border, rgba(255,255,255,.12));
  background: var(--field-bg, rgba(255,255,255,.06));
  color: var(--text);
  outline:none;
  font-family:inherit;
  font-size:14px;
  box-sizing:border-box;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(var(--field-backdrop-blur, 10px));
}
input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder, var(--muted));
}
/* Universal select/dropdown styling - Modern & Visible */
select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--field-arrow, var(--muted)) 50%),
    linear-gradient(135deg, var(--field-arrow, var(--muted)) 50%, transparent 50%);
  background-repeat: no-repeat, no-repeat;
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  padding-right: 40px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

select:hover, select:focus{
  border-color: var(--mint);
  background-color: var(--field-bg-focus, rgba(255,255,255,.08));
  box-shadow: 0 0 0 3px rgba(var(--mint-rgb), .15);
}

/* Dropdown options - High contrast and visible */
select option{
  background: var(--bg-start, #0a1f1a) !important;
  color: var(--text-main, #ffffff) !important;
  padding: 12px 16px !important;
  border: none !important;
  font-size: 14px !important;
}

select option:hover, 
select option:focus, 
select option:checked{
  background: var(--mint) !important;
  color: var(--bg-start) !important;
  font-weight: 600 !important;
}

/* Ensure dropdowns appear above other content */
select {
  z-index: 100;
}

/* For browsers that support it, style the dropdown list */
select:focus {
  z-index: 1000;
}
textarea{ resize:vertical; min-height:80px; line-height:1.5; }
input:focus, textarea:focus, select:focus{
  border-color: var(--mint);
  background: var(--field-bg-focus, rgba(255,255,255,.1));
  box-shadow: 0 0 0 3px rgba(var(--mint-rgb),.15), 0 4px 12px rgba(0,0,0,.1);
  transform: translateY(-1px);
}

body.theme-light .summary-box,
body.theme-light .account-card,
body.theme-light .signup-card {
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
}

body.theme-light #org-background-overlay,
body.theme-light #league-background-overlay {
  mix-blend-mode: normal;
  opacity: 1;
}

/* Always-visible control borders for discoverability */
button,
.config-subtab,
.branding-subtab,
.stg-nav-btn,
.location-tabs button,
#admin-day-filter-tabs button {
  border: 1px solid var(--surface-border, rgba(255,255,255,.18));
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
select,
textarea,
.input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]) {
  border-width: 1.5px;
}

.modal-overlay .input,
.modal .input,
.modal__panel .input,
.adm-modal .input,
.scw-modal .input {
  border-color: var(--field-border-strong, rgba(255,255,255,.24));
}
/* Logo size constraints - global (for pages that don't use brand__logo-wrapper) */
.brand-logo{
  max-width: 80px;
  max-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-logo img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Toast */
#toast-container{
  position: fixed;
  inset: 0;
  z-index: 13001;
  pointer-events: none;
}

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 13001;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: rgba(5,14,11,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  color: var(--text);
  pointer-events: auto;
}
.toast[hidden]{display:none;}
.toast i{color: var(--mint); font-size: 18px;}
body.cm-semantic-theme .toast{background:var(--surface-elevated);border-color:var(--border);color:var(--text)}
@media (max-width: 980px){
  .toast{
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
  }
}

/* Reveal animations: visible by default for safety */
[data-reveal], .fcard, .pcard, .h2, .h3 {
  opacity: 1;
  visibility: visible;
}

/* Reveal-ready mode hides items until they enter the viewport */
html.js.reveal-ready [data-reveal],
html.js.reveal-ready .fcard,
html.js.reveal-ready .pcard,
html.js.reveal-ready .h2,
html.js.reveal-ready .h3 {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

html.js.reveal-ready [data-reveal].is-revealed,
html.js.reveal-ready .fcard.is-revealed,
html.js.reveal-ready .pcard.is-revealed,
html.js.reveal-ready .h2.is-revealed,
html.js.reveal-ready .h3.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  [data-reveal], .fcard, .pcard, .h2, .h3{
    opacity: 1 !important; 
    transform: none !important; 
    transition: none !important;
  }
}

/* ✅ Tap-to-hover (mobile): emulate hover glow/lift on tap */
@media (hover: none) and (pointer: coarse){
  .fcard.is-tapped,
  .pcard.is-tapped,
  .step.is-tapped,
  .platformTab.is-tapped{
    transform: translateY(-2px);
    background: rgba(255,255,255,.07);
    border-color: rgba(var(--mint-rgb),.22);
  }

  .pcard--featured.is-tapped{
    border-color: rgba(var(--mint-rgb),.45);
    background: rgba(var(--mint-rgb),.10);
  }

  .fcard.is-tapped .ficon{
    background: rgba(var(--mint-rgb),.18);
    border-color: rgba(var(--mint-rgb),.32);
  }
}

/* =========================
   Platform showcase (realistic product previews)
   ========================= */

.platformShowcase{
  display:grid;
  grid-template-columns: .42fr .58fr;
  gap:14px;
  align-items:stretch;
}
.platformShowcase__copy{
  padding:16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.platformTabs{display:grid; gap:10px}
.platformTab{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:12px 13px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight:900;
  cursor:pointer;
  transition: all .18s var(--ease);
}
.platformTab i{font-size:18px; color: rgba(255,255,255,.9)}
.platformTab:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}
.platformTab.is-active{
  border-color: rgba(var(--mint-rgb),.30);
  background: rgba(var(--mint-rgb),.10);
}
.platformFacts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.platformFacts li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color: var(--muted);
  font-weight:700;
  line-height:1.45;
}
.platformFacts i{color: var(--mint); margin-top:2px}
.platformShowcase__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.platformShowcase__preview{
  border-radius: var(--radius2);
  padding:16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.platformShowcase__preview::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(640px 260px at 20% 0%, rgba(var(--mint-rgb),.14), transparent 60%);
  pointer-events:none;
}
.platformPreviewTop{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.platformPreviewTop strong{
  font-size:15px;
  letter-spacing:-0.01em;
}
.platformPreviewGrid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.platformPane{
  border-radius: var(--radius-lg);
  padding:12px;
  background: rgba(5,14,11,.66);
  border:1px solid rgba(255,255,255,.10);
  min-height: 260px;
}
.platformPane h4{
  margin:0 0 10px;
  font-size:13px;
  font-weight:1000;
  color: rgba(245,255,250,.92);
}
.platformPaneBody{
  display:grid;
  gap:10px;
}
.platformMetricRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.platformMetric{
  padding:9px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
}
.platformMetric span{
  display:block;
  color: var(--muted2);
  font-size:11px;
  font-weight:800;
}
.platformMetric strong{
  display:block;
  margin-top:4px;
  color: var(--mint);
  font-size:16px;
  font-weight:1000;
}
.platformListCard{
  padding:10px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
}
.platformListCard > strong{
  display:block;
  margin-bottom:8px;
  font-size:12px;
}
.platformListItem{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:12px;
  color: rgba(235,245,239,.92);
}
.platformListItem:first-of-type{border-top:0; padding-top:0}
.platformListItem em{
  color: var(--muted2);
  font-style:normal;
  font-weight:800;
  white-space:nowrap;
}
.platformActions{
  display:grid;
  gap:8px;
}
.platformActionBtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-radius: var(--radius-md);
  padding:9px 10px;
  text-align:left;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
}
.platformActionBtn:hover{
  background: rgba(255,255,255,.08);
}

@media (max-width: 980px){
  .platformShowcase{
    grid-template-columns: 1fr;
  }
  .platformShowcase__copy,
  .platformShowcase__preview{
    padding:14px;
  }
  .platformPreviewGrid{
    grid-template-columns:1fr;
  }
  .platformPane{
    min-height: 0;
  }
}

@media (max-width: 640px){
  .platformTab{
    padding:10px 11px;
    font-size:13px;
  }
  .platformPreviewTop{
    flex-direction:column;
    align-items:flex-start;
  }
  .platformMetricRow{
    grid-template-columns:1fr 1fr;
  }
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr; gap:28px;}
  .hero{padding-top:32px; padding-bottom:24px;}
  .h1{line-height:1.1;}
  .featureGrid{grid-template-columns: 1fr 1fr}
  .pricing{grid-template-columns: 1fr}
  .how{grid-template-columns: 1fr}
  .customize{grid-template-columns: 1fr}
  .floating{display:none}
  .nav__links{display:none}
  .nav__burger{display:grid}

  .nav__inner{gap:8px; padding:12px 0;}
  .nav__actions{gap:6px;}

  /* Hide demo button on tablet/mobile — it's in the mobile menu */
  #openDemo{ display:none !important; }

  .brand__logo-wrapper{min-width:42px; max-width:42px; height:42px; max-height:42px;}
  .brand__logo{height:auto; max-height:42px; max-width:42px;}
  .brand__name{font-size:18px;}
  .brand--has-lockup .brand__lockup{height:52px; max-width:320px;}
  .brand__tagline{font-size:9px; max-width:120px;}
  .brand--enhanced{gap:8px; padding:4px 8px;}

  .nav__actions .btn{
    font-size:13px;
    padding:0 16px;
    min-height:38px;
  }
  .nav__actions .btn--ghost{
    padding:0 12px;
    min-height:38px;
  }
  .iconbtn{ width:38px; height:38px; }

  .h1{font-size:38px;}
  .h2{font-size:32px;}
  .h3{font-size:22px;}

  .compareBlock{padding: 12px}
  .compareTable{min-width: 760px}
  .compareTable th,
  .compareTable td{padding: 10px 10px}
}

@media (max-width: 640px){
  /* On small mobile, hide secondary nav buttons — auth buttons remain JS-controlled */
  .nav__actions > .btn:not(#navSignIn):not(#navMyAccount),
  .nav__actions > a.btn:not(#navSignIn):not(#navMyAccount){ display:none !important; }
  #navSignIn { font-size:13px; padding:0 14px; min-height:36px; }
  #navMyAccount { font-size:13px; padding:0 14px; min-height:36px; }
  .brand__tagline{ display:none; }
  .compareTitle{font-size: 16px}
  .compareIntro{font-size: 13px}
  .compareFine{font-size: 12px}
  .compareSales{font-size: 12.5px}
  .compareTable{
    min-width: 640px;
    font-size: 12.5px;
  }
  .compareTable th,
  .compareTable td{
    padding: 9px 9px;
  }
}

@media (max-width: 520px){
  .featureGrid{grid-template-columns: 1fr}
  .termGrid{grid-template-columns: 1fr}
  .cta__inner{flex-direction:column; align-items:flex-start}

  .brand__logo-wrapper{min-width:36px; max-width:36px; height:36px; max-height:36px;}
  .brand__logo{height:auto; max-height:36px; max-width:36px;}
  .brand__name{font-size:16px;}
  .brand--has-lockup .brand__lockup{height:44px; max-width:270px;}
  .brand__tagline{display:none;}

  /* Only show phone mockup on very small screens */
  .mockup-device--desktop{ display:none; }
  .mockup-device--phone{ max-width:100%; flex:1 1 100%; }
}

/* ============================================================================
   ADMIN PORTAL — Shared Design System
   Unified component library for admin.html and league-admin.html.
   Uses existing CoachMate design tokens (--mint, --purple-soft, --muted, etc.)
   ============================================================================ */

/* ---- Layout ---- */
.adm-page { --adm-gap: 20px; }
.adm-section {
  margin-bottom: var(--adm-gap);
  animation: portalFadeInUp .35s var(--ease) backwards;
}

/* ---- Page header ---- */
.adm-page-hdr {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--surface-border, rgba(255,255,255,.08));
}
.adm-page-hdr__left h3 { margin: 0 0 2px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.adm-page-hdr__left p  { margin: 0; color: var(--muted); font-size: 0.85rem; }
.adm-page-hdr__actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

/* Contextual help → Admin Help Center (subtle, inline with headers) */
a.adm-context-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
a.adm-context-help:hover {
  color: var(--mint);
  background: rgba(var(--mint-rgb), 0.08);
  border-color: rgba(var(--mint-rgb), 0.22);
}
a.adm-context-help .ti {
  font-size: 0.88rem;
  opacity: 0.9;
}
body.theme-light a.adm-context-help:hover {
  background: rgba(var(--mint-rgb), 0.12);
  border-color: rgba(var(--mint-rgb), 0.28);
}

/* ---- Section header ---- */
.adm-section-hdr {
  font-size: .98rem; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}
.adm-section-hdr i { color: var(--mint); font-size: 1.1em; }
.adm-section-desc {
  color: var(--muted); font-size: 0.84rem; margin: -8px 0 14px; line-height: 1.45;
}

/* ---- Divider ---- */
.adm-divider {
  height: 1px; border: 0; margin: 20px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}

/* ---- KPI / metric cards ---- */
/* ─── Payment Plan Tracker card ─────────────────────────────────────────── */
.ppt-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(var(--mint-rgb),.18);
  border-radius: var(--radius-lg);
  padding: 20px 22px 16px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.ppt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--mint-rgb),.04) 0%, transparent 60%);
  pointer-events: none;
}
.ppt-card--loading {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppt-card__spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: var(--mint);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ppt-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ppt-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ppt-card__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(var(--mint-rgb),.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--mint);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ppt-card__title {
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.ppt-card__subtitle {
  font-size: .72rem;
  color: var(--muted);
  margin: 1px 0 0;
}
.ppt-card__pct-badge {
  font-size: .75rem;
  font-weight: 700;
  color: var(--mint);
  background: rgba(var(--mint-rgb),.1);
  border: 1px solid rgba(var(--mint-rgb),.2);
  border-radius: 9999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.ppt-card__progress-wrap {
  margin-bottom: 16px;
}
.ppt-card__progress-bg {
  height: 7px;
  background: rgba(255,255,255,.06);
  border-radius: 9999px;
  overflow: hidden;
}
.ppt-card__progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width .6s cubic-bezier(.25,.8,.25,1);
}
.ppt-card__progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: .7rem;
  color: var(--muted);
}
.ppt-card__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.ppt-card__kpi {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.ppt-card__kpi-val {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.ppt-card__kpi-of {
  font-size: .85rem;
  font-weight: 400;
  color: var(--muted);
}
.ppt-card__kpi-label {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ppt-card__kpi--green .ppt-card__kpi-val { color: var(--color-success, #58c79a); }
.ppt-card__kpi--muted .ppt-card__kpi-val { color: var(--accent-gold); }
.ppt-card__legacy-note {
  margin: 12px 0 0;
  font-size: .73rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ppt-card__footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
a.ppt-card__cta {
  text-decoration: none;
}
/* ─────────────────────────────────────────────────────────────────────────── */

.adm-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.adm-kpi {
  background: var(--surface-2, rgba(255,255,255,.03));
  border: 1px solid var(--surface-border, rgba(255,255,255,.08));
  border-radius: 14px; padding: 14px 18px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .2s var(--ease); position: relative; overflow: hidden;
}
.adm-kpi:hover {
  border-color: rgba(var(--primary-rgb, var(--mint-rgb)),.4);
}
.adm-kpi__val {
  font-size: 1.55rem; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.adm-kpi__label {
  order: -1;
  font-size: .7rem; font-weight: 700; color: var(--muted); margin-top: 0;
  text-transform: uppercase; letter-spacing: .07em;
}
.adm-kpi--mint   { border-color: rgba(var(--mint-rgb),.22); background: rgba(var(--mint-rgb),.06); }
.adm-kpi--mint .adm-kpi__val   { color: var(--mint); }
.adm-kpi--purple { border-color: rgba(var(--purple-rgb),.22); background: rgba(var(--purple-rgb),.06); }
.adm-kpi--purple .adm-kpi__val { color: var(--purple-soft); }
.adm-kpi--gold   { border-color: rgba(var(--accent-gold-rgb),.22); background: rgba(var(--accent-gold-rgb),.06); }
.adm-kpi--gold .adm-kpi__val   { color: var(--accent-gold); }
.adm-kpi--red    { border-color: rgba(255,107,107,.22); background: rgba(255,107,107,.06); }
.adm-kpi--red .adm-kpi__val    { color: var(--danger-light); }
.adm-kpi--clickable {
  cursor: pointer; font: inherit; width: 100%; text-align: center;
}
.adm-kpi--clickable .adm-kpi__label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center;
}
.adm-kpi--clickable.adm-kpi--red:hover { border-color: rgba(255,107,107,.55); background: rgba(255,107,107,.1); }
.adm-kpi--clickable.is-active { box-shadow: inset 0 0 0 1.5px rgba(255,107,107,.65); }
.adm-kpi--clickable.adm-kpi--gold:hover { border-color: rgba(255,209,92,.55); background: rgba(255,209,92,.1); }
.adm-kpi--clickable.adm-kpi--gold.is-active { box-shadow: inset 0 0 0 1.5px rgba(255,209,92,.7); }

/* ---- Controls / toolbar bar ---- */
.adm-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.adm-toolbar__left  { display: flex; gap: 10px; align-items: center; flex: 1; flex-wrap: wrap; min-width: 0; }
.adm-toolbar__right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- Filter bar ---- */
/* Even, horizontal, responsive grid of filters. Using a grid (rather than the
   old flex row) keeps the controls evenly sized and aligned, and counters the
   global `select{width:100%}` rule that would otherwise push each control onto
   its own line. Wraps gracefully on narrow screens. */
.adm-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; align-items: center;
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--surface-2, rgba(255,255,255,.025));
  border: 1px solid var(--surface-border, rgba(255,255,255,.07));
  border-radius: var(--radius-lg);
}
.adm-filter-bar select,
.adm-filter-bar input[type="date"],
.adm-filter-bar input[type="text"] {
  padding: 8px 12px;
  background: var(--field-bg, rgba(255,255,255,.05));
  border: 1px solid var(--field-border, rgba(255,255,255,.1));
  border-radius: var(--radius-sm);
  color: var(--text); font-size: .84rem; width: 100%; min-width: 0;
  transition: border-color .2s;
}
.adm-filter-bar select:focus,
.adm-filter-bar input:focus {
  border-color: rgba(var(--primary-rgb, var(--mint-rgb)),.5); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, var(--mint-rgb)),.14);
}

/* ---- Search field ---- */
.adm-search {
  position: relative; flex: 1; min-width: 180px; max-width: 400px;
}
.adm-search input {
  width: 100%; padding: 10px 12px 10px 36px;
  background: var(--field-bg, rgba(255,255,255,.05));
  border: 1px solid var(--field-border, rgba(255,255,255,.1));
  border-radius: var(--radius-md); color: var(--text); font-size: .88rem;
  transition: border-color .2s;
}
.adm-search input:focus {
  border-color: rgba(var(--primary-rgb, var(--mint-rgb)),.5); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, var(--mint-rgb)),.14);
}
.adm-search__icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .88rem; pointer-events: none;
}

/* ---- Buttons (standardized) ---- */
.adm-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .85rem; border-radius: var(--radius-md);
  padding: 10px 18px; border: 1px solid transparent; cursor: pointer;
  transition: all .2s var(--ease); white-space: nowrap; line-height: 1.3;
}
.adm-btn:active { transform: scale(.97); }

.adm-btn--primary {
  background: linear-gradient(135deg, var(--mint), var(--mint2));
  color: var(--bg-start); font-weight: 700;
  border-color: rgba(var(--mint-rgb),.58);
  box-shadow: 0 4px 14px rgba(var(--mint-rgb),.25);
}
.adm-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--mint-rgb),.35);
}

.adm-btn--secondary {
  background: rgba(255,255,255,.06); color: var(--text);
  border: 1px solid var(--btn-secondary-border, rgba(255,255,255,.2));
}
.adm-btn--secondary:hover {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);
}

.adm-btn--ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--btn-ghost-border, rgba(255,255,255,.2)); padding: 8px 14px;
}
.adm-btn--ghost:hover { background: rgba(255,255,255,.06); color: var(--text); }

.adm-btn--danger {
  background: rgba(255,107,107,.12); color: var(--danger-light);
  border: 1px solid rgba(255,107,107,.3);
}
.adm-btn--danger:hover { background: rgba(255,107,107,.22); }

.adm-btn--sm { padding: 6px 12px; font-size: .78rem; border-radius: var(--radius-sm); }
.adm-btn--xs { padding: 4px 9px; font-size: .73rem; border-radius: 7px; }
.adm-btn--pill { border-radius: var(--radius-pill); }

/* ---- View toggle group ---- */
.adm-view-toggle {
  display: inline-flex; background: rgba(255,255,255,.04);
  border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
.adm-view-toggle button {
  padding: 8px 14px; background: none; border: 1px solid var(--surface-border, rgba(255,255,255,.2)); color: var(--muted);
  font-size: .82rem; font-weight: 500; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.adm-view-toggle button.active { background: rgba(var(--mint-rgb),.15); color: var(--mint); border-color: rgba(var(--mint-rgb),.58); }
.adm-view-toggle button:hover:not(.active) { background: rgba(255,255,255,.06); border-color: var(--surface-border-strong, rgba(255,255,255,.34)); }

/* ---- Cards ---- */
.adm-card {
  background: var(--surface-2, rgba(255,255,255,.035));
  border: 1px solid var(--surface-border, rgba(255,255,255,.08));
  border-radius: var(--radius-lg); padding: 18px 20px;
  transition: all .2s var(--ease);
}
.adm-card:hover {
  background: var(--surface-1, rgba(255,255,255,.055));
  border-color: var(--surface-border-strong, rgba(255,255,255,.14));
  transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.adm-card.adm-card--filter-menu-open,
.adm-card.adm-card--filter-menu-open:hover {
  transform: none;
  transition-property: background-color, border-color, box-shadow;
}
/* A position:fixed floating filter menu is anchored to the nearest ancestor
   that has transform/filter/backdrop-filter/perspective (it becomes the
   containing block). While such a menu floats we neutralize those properties on
   the offending ancestors so the menu stays pinned to the viewport/trigger. */
.cm-filter-menu-cb-freeze {
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  perspective: none !important;
  transition-property: background-color, border-color, box-shadow !important;
}
.adm-card__title { font-weight: 600; font-size: .95rem; color: var(--text); margin-bottom: 4px; }
.adm-card__meta  { font-size: .8rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.adm-card__actions {
  display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap;
}

.adm-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* ---- Compact list row ---- */
.adm-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.02); border: 1px solid transparent;
  border-radius: var(--radius-md); transition: all .15s; cursor: default;
}
.adm-row:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); }
.adm-row--clickable { cursor: pointer; }
.adm-row__primary   { flex: 1; min-width: 0; }
.adm-row__primary .name  { font-weight: 600; font-size: .9rem; color: var(--text); }
.adm-row__primary .sub   { font-size: .78rem; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row__secondary { font-size: .82rem; color: rgba(255,255,255,.55); }
.adm-row__actions   { display: flex; gap: 5px; opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.adm-row:hover .adm-row__actions { opacity: 1; }
@media (hover: none) { .adm-row__actions { opacity: 1; } }

/* ---- Badges & status pills ---- */
.adm-badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--radius-pill); font-size: .73rem; font-weight: 600;
  text-transform: capitalize; white-space: nowrap;
}
.adm-badge--mint   { background: rgba(var(--mint-rgb),.15); color: var(--mint); border: 1px solid rgba(var(--mint-rgb),.3); }
.adm-badge--purple { background: rgba(var(--purple-rgb),.15); color: var(--purple-soft); border: 1px solid rgba(var(--purple-rgb),.3); }
.adm-badge--gold   { background: rgba(var(--accent-gold-rgb),.15); color: var(--accent-gold); border: 1px solid rgba(var(--accent-gold-rgb),.3); }
.adm-badge--red    { background: rgba(var(--color-error-rgb),.12); color: var(--color-error); border: 1px solid rgba(var(--color-error-rgb),.25); }
.adm-badge--green  { background: rgba(var(--color-success-rgb),.12); color: var(--color-success); border: 1px solid rgba(var(--color-success-rgb),.25); }
.adm-badge--yellow { background: rgba(var(--color-warning-rgb),.12); color: var(--color-warning); border: 1px solid rgba(var(--color-warning-rgb),.25); }
.adm-badge--muted  { background: rgba(255,255,255,.08); color: var(--muted); border: 1px solid rgba(255,255,255,.12); }
.adm-badge--sm     { padding: 2px 8px; font-size: .7rem; }

.adm-source-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: .72rem; background: rgba(255,255,255,.06);
  color: var(--muted); border: 1px solid rgba(255,255,255,.08);
}

/* ---- Admin: Registrations / form submissions table ---- */
.adm-submissions-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.adm-pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}
.adm-pay-badge--venmo {
  background: rgba(76, 175, 80, 0.16);
  color: #77dd77;
  border-color: rgba(119, 221, 119, 0.35);
}
.adm-pay-badge--zelle {
  background: rgba(33, 150, 243, 0.16);
  color: #7fc8ff;
  border-color: rgba(127, 200, 255, 0.35);
}
.adm-pay-badge--cashapp {
  background: rgba(0, 200, 83, 0.16);
  color: #8ff7b3;
  border-color: rgba(143, 247, 179, 0.35);
}
/* On light backgrounds the pastel badge text colors are invisible — use darker equivalents */
.theme-light .adm-pay-badge--venmo  { color: #15803d; border-color: rgba(22, 163, 74, 0.4); }
.theme-light .adm-pay-badge--zelle  { color: #1d4ed8; border-color: rgba(29, 78, 216, 0.4); }
.theme-light .adm-pay-badge--cashapp{ color: #0a6e35; border-color: rgba(10, 110, 53, 0.4); }
.adm-pay-badge--offline {
  background: rgba(var(--secondary-rgb,255,209,92), 0.18);
  color: var(--accent-gold);
  border-color: rgba(var(--secondary-rgb,255,209,92), 0.34);
}
.adm-pay-badge--stripe {
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.35);
}
.adm-pay-badge--free {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}
.theme-light .adm-pay-badge--free { color: #065f46; border-color: rgba(6, 95, 70, 0.4); }
.adm-pay-badge--unknown {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Billing V2 payment plan summary (admin registrations) */
.adm-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  border: 1px solid transparent;
}
.adm-plan-badge--past-due {
  background: rgba(var(--color-error-rgb,239,68,68), 0.18);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
}
.adm-plan-badge--paid {
  background: rgba(var(--color-success-rgb,34,197,94), 0.18);
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.45);
}
.adm-plan-badge--active {
  background: rgba(var(--primary-rgb,88,199,154), 0.15);
  color: var(--primary, #58C79A);
  border-color: rgba(var(--primary-rgb,88,199,154), 0.4);
}
.adm-plan-badge--muted {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.12);
}
.adm-plan-remaining {
  font-weight: 600;
  color: var(--text, #e8edf7);
}

.adm-reg-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.adm-reg-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.adm-offline-link-badge {
  flex-shrink: 0;
}

.adm-status-select {
  width: auto;
  min-width: 7.25rem;
  max-width: min(100%, 12rem);
  min-height: 40px;
  padding: 8px 44px 8px 12px; /* ensure label isn't clipped by arrow */
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.adm-reg-action-icon {
  font-size: 1rem;
  line-height: 1;
  margin-right: 5px;
  vertical-align: -0.12em;
}

/* ==========================================================================
   Premium Registrations Workspace — shared visual system (org + league)
   Compact header → search-first toolbar → collapsible advanced filters →
   active-filter chips → compact KPI strip → card/row list with details.
   ========================================================================== */
.adm-reg-workspace {
  --adm-reg-gap: 14px;
}

/* Toolbar: header actions + primary filters */
.adm-reg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-bottom: var(--adm-reg-gap);
  overflow: visible;
}
.adm-reg-toolbar__search {
  flex: 1 1 240px;
  min-width: 200px;
}
.adm-reg-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.adm-reg-toolbar__field > label,
.adm-reg-advanced__field > label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.adm-reg-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.price-season-multi {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  z-index: 2;
}
.price-season-multi.open {
  z-index: 1200;
}
.price-season-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 10px 12px 10px 16px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1.5px solid var(--field-border-strong, rgba(255,255,255,.24));
  transform: none;
}
.price-season-trigger:hover,
.price-season-trigger:focus,
.price-season-multi.open .price-season-trigger {
  transform: none;
}
.price-season-trigger .label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 500;
}
.price-season-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(360px, 80vw);
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--surface-border-strong, rgba(255, 255, 255, 0.26));
  border-radius: 12px;
  background: var(--surface-3, rgba(var(--accent-rgb), 0.96));
  backdrop-filter: blur(10px);
  padding: 6px;
  z-index: 1200;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  display: none;
}
.price-season-multi.open .price-season-menu {
  display: block;
}
.price-season-multi.open .price-season-menu.is-floating {
  display: block;
  position: fixed !important;
  z-index: 10050;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.price-season-multi:not(.open) .price-season-menu {
  display: none !important;
}
.price-season-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}
.price-season-option:hover {
  background: rgba(255, 255, 255, 0.08);
}
.price-season-option input {
  width: 16px;
  height: 16px;
  min-width: 16px !important;
  max-width: 16px !important;
  margin: 0;
  flex: 0 0 16px !important;
  accent-color: var(--mint);
}
.price-season-option span {
  color: var(--text-main, var(--text));
  font-weight: 500;
}

/* Generic filter bar used for primary + segmented controls */
.adm-reg-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-bottom: var(--adm-reg-gap);
}

/* Advanced filters (collapsible) */
.adm-reg-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.32);
  color: var(--text);
}
.adm-reg-advanced-toggle .ti {
  transition: transform 0.18s ease;
}
.adm-reg-advanced-toggle.is-open .ti-chevron-down {
  transform: rotate(180deg);
}
.adm-reg-advanced {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-bottom: var(--adm-reg-gap);
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--surface-border);
}
.adm-reg-advanced__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

/* Active filter chips */
.adm-reg-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--adm-reg-gap);
}
.adm-reg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  background: rgba(var(--primary-rgb,88,199,154), 0.12);
  border: 1px solid rgba(var(--primary-rgb,88,199,154), 0.3);
  line-height: 1.2;
}
.adm-reg-chip__val {
  color: var(--mint);
  font-weight: 700;
}
.adm-reg-chip__x {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}
.adm-reg-chip:hover { opacity: 0.85; }
.adm-reg-chip--clear-all {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--muted);
}

/* Compact KPI strip (reuses .adm-kpi tokens, tighter) */
.adm-reg-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--adm-reg-gap);
}
.adm-reg-stat-strip .adm-kpi {
  flex: 1 1 120px;
  min-width: 96px;
  justify-content: center;
  padding: 12px 14px;
  gap: 6px;
}
/* Reserve two lines for every label so single- and double-line labels
   (e.g. "Total" vs "Failed Payments") keep their numbers on one baseline. */
.adm-reg-stat-strip .adm-kpi__label {
  min-height: 2.1em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  line-height: 1.05;
}
/* Clickable KPIs put the icon inline with the label instead of stacked above it. */
.adm-reg-stat-strip .adm-kpi--clickable .adm-kpi__label {
  flex-direction: row;
}
.adm-reg-stat-strip .adm-kpi__val {
  line-height: 1;
}

/* Density toggle */
.adm-reg-density-toggle {
  display: inline-flex;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.adm-reg-density-toggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}
.adm-reg-density-toggle button.is-active {
  background: rgba(var(--primary-rgb), 0.28);
  color: var(--text);
}

/* List + groups */
.adm-reg-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-reg-group {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 12px;
}
.adm-reg-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--surface-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  user-select: none;
}
.adm-reg-group-header__title {
  font-weight: 700;
  color: var(--text);
}
.adm-reg-group-header__count {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.adm-reg-group-header__summary {
  margin-left: auto;
  display: flex;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--muted);
}
.adm-reg-group-header [data-reg-group-toggle] {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

/* Per-location installment payment tracker (always visible, even when collapsed) */
.adm-reg-plan-track {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 16px 11px;
  background: rgba(var(--primary-rgb, var(--mint-rgb)), 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.adm-reg-plan-track__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.adm-reg-plan-track__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--mint2));
  transition: width 0.4s ease;
}
.adm-reg-plan-track__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}
.adm-reg-plan-track__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-weight: 700;
}
.adm-reg-plan-track__count i { color: var(--mint); font-size: 0.95rem; }
.adm-reg-plan-track__plans { color: var(--muted); }
.adm-reg-plan-track__refunded {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.28);
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.adm-reg-plan-track__flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f87171;
  background: rgba(var(--color-error-rgb, 248, 113, 113), 0.12);
  border: 1px solid rgba(var(--color-error-rgb, 248, 113, 113), 0.3);
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.adm-reg-plan-track__pct {
  margin-left: auto;
  color: var(--mint);
  font-weight: 800;
}
body.theme-light .adm-reg-plan-track__bar { background: rgba(17, 24, 39, 0.1); }
.adm-reg-group__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.adm-reg-group.is-collapsed .adm-reg-group__body { display: none; }
.adm-reg-group.is-collapsed [data-reg-group-toggle] { transform: rotate(-90deg); }
.adm-reg-group-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.adm-reg-group-controls button {
  background: none;
  border: 0;
  color: var(--purple-soft, #b9a4ff);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
/* Per-location group "load more" reveal controls */
.adm-reg-group-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.adm-reg-group-pager__meta {
  font-size: 0.78rem;
  color: var(--muted);
}
.adm-reg-group-pager__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Organization registration links: roomy form sections with a mobile stack. */
#create-registration-link-modal .modal-shell {
  width: 100%; max-width: 960px; padding: 28px 30px; border-radius: 24px;
}
#create-registration-link-modal .modal-header-row { margin-bottom: 18px; gap: 16px; }
#create-registration-link-modal .modal-header-row h3 { display: flex; align-items: center; gap: 12px; margin: 0; }
#create-registration-link-modal .modal-header-row h3 i { color: var(--primary); }
#create-registration-link-modal .modal-close-icon-btn { flex-shrink: 0; width: 40px; height: 40px; }
#create-registration-link-modal .org-rll-intro { margin: 0 0 24px; max-width: 72ch; line-height: 1.6; font-size: .9rem; }
#create-registration-link-modal .org-rll-section { padding: 22px; margin-bottom: 20px; border: 1px solid var(--surface-border, var(--border)); border-radius: 16px; background: var(--surface-1, rgba(255,255,255,.025)); }
#create-registration-link-modal .org-rll-section h4,
#create-registration-link-modal .org-rll-recent-header h4 { margin: 0; font-size: 1rem; }
#create-registration-link-modal .org-rll-hint { margin: 6px 0 18px; font-size: .85rem; line-height: 1.5; }
#create-registration-link-modal .org-rll-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#create-registration-link-modal .modal-field { min-width: 0; margin: 0; }
#create-registration-link-modal .org-rll-full { grid-column: 1 / -1; }
#create-registration-link-modal .modal-field > label > span { display: inline; }
#create-registration-link-modal .modal-field > label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .82rem; }
#create-registration-link-modal .input { width: 100%; min-width: 0; min-height: 46px; border-radius: 10px; }
#create-registration-link-modal select.input { padding-right: 32px; }
#create-registration-link-modal .reg-link-session { margin: 20px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--surface-border, var(--border)); border-radius: 0; background: transparent; }
#create-registration-link-modal .reg-link-session__grid { gap: 20px; }
#create-registration-link-modal #reg-link-prefill-section .reg-link-session__row { display: flex; gap: 10px; align-items: flex-start; }
#create-registration-link-modal #reg-link-prefill-section .reg-link-session__row-meta { white-space: normal; text-align: left; line-height: 1.5; }
#create-registration-link-modal .modal-actions-row { gap: 12px; }
#create-registration-link-modal .modal-actions-row button { min-height: 44px; padding: 10px 24px; border-radius: 12px; }
#create-registration-link-modal .org-rll-recent-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#create-registration-link-modal .org-rll-recent-header h4 { margin-right: auto; }
#create-registration-link-modal #reg-link-status-filter { width: 140px; }
#create-registration-link-modal #reg-link-list { max-height: 280px; overflow: auto; padding: 16px; border: 1px solid var(--surface-border, var(--border)); border-radius: 14px; background: var(--bg-sub); }
@media (max-width: 600px) {
  #create-registration-link-modal { padding: 12px; }
  #create-registration-link-modal .modal-shell { padding: 20px; border-radius: 20px; max-height: calc(100dvh - 24px); }
  #create-registration-link-modal .org-rll-section { padding: 16px; }
  #create-registration-link-modal .org-rll-grid,
  #create-registration-link-modal .reg-link-session__grid { grid-template-columns: 1fr; gap: 16px; }
  #create-registration-link-modal .modal-header-row h3 { font-size: 1.2rem; }
  #create-registration-link-modal .modal-actions-row button { flex: 1; }
}

/* Drop-in session registration link builder (admin Registration Links modal) */
.reg-link-session {
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.reg-link-session__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.reg-link-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.reg-link-field > label,
.reg-link-session__header > label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #9aa3b2);
  letter-spacing: 0.01em;
}
.reg-link-field .input {
  width: 100%;
  box-sizing: border-box;
}
.reg-link-field select.input {
  text-overflow: ellipsis;
}
.reg-link-field select.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.reg-link-field > label .reg-link-req,
.reg-link-field > label .reg-link-count,
.reg-link-session__header > label .reg-link-req,
.reg-link-session__header > label .reg-link-count {
  display: inline;
  margin: 0;
  font-weight: 400;
}
.reg-link-req { color: var(--color-error, #ef4444); }
.reg-link-count { color: var(--muted, #9aa3b2); font-size: 0.8rem; }
.reg-link-session__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.reg-link-session__header > label { min-width: 0; }
.reg-link-session__select-all {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid var(--field-border-strong, var(--field-border, rgba(255,255,255,0.26)));
  border-radius: 999px;
  background: var(--field-bg, rgba(255,255,255,0.04));
  color: var(--primary, #8b5cf6);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.reg-link-session__select-all:hover:not(:disabled) { background: rgba(var(--primary-rgb), 0.12); }
.reg-link-session__select-all:focus-visible { outline: 2px solid var(--highlight-color, var(--primary, #8b5cf6)); outline-offset: 2px; }
.reg-link-session__select-all:disabled { opacity: 0.45; cursor: not-allowed; }
.reg-link-session__list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.15);
}
.reg-link-session__hint {
  padding: 10px 8px;
  font-size: 0.82rem;
  color: var(--muted, #9aa3b2);
}
.reg-link-session__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.12s ease;
}
.reg-link-session__row:hover { background: rgba(255, 255, 255, 0.05); }
.reg-link-session__row + .reg-link-session__row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.reg-link-session__row input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--primary, #7c5cff); }
.reg-link-session__row-date { font-weight: 600; color: var(--text, #e8eaf0); white-space: nowrap; }
.reg-link-session__row-meta { color: var(--muted, #9aa3b2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .reg-link-session__grid { grid-template-columns: 1fr; }
  .reg-link-session__row { grid-template-columns: auto minmax(0, 1fr); }
  .reg-link-session__row-meta { grid-column: 2; text-align: left; }
}

/* Row / card */
.adm-reg-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 12px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.adm-reg-row:hover { border-color: var(--surface-border-strong); }
.adm-reg-row-main {
  display: grid;
  /* Fixed-width payment + actions columns so every row lines up, regardless of
     how many action buttons a given registration has. */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.5fr) minmax(150px, 0.9fr) 232px;
  gap: 10px 18px;
  align-items: start;
}
.adm-reg-row-id {
  min-width: 0;
}
.adm-reg-row-id__primary {
  font-weight: 700;
  color: var(--text);
  font-size: 0.92rem;
  word-break: break-word;
}
.adm-reg-row-id__secondary {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}
.adm-reg-role {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.4;
}
.adm-reg-role--participant {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
}
.adm-reg-role--parent {
  color: var(--muted);
  background: rgba(148, 163, 184, 0.16);
}
.adm-reg-row-id__name {
  vertical-align: middle;
}

/* View submission modal body */
.adm-view-sub {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.adm-view-sub__block {
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
}
.adm-view-sub__block-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.adm-view-sub__row {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.88rem;
}
.adm-view-sub__label {
  flex: 0 0 110px;
  color: var(--muted);
  font-weight: 600;
}
.adm-view-sub__value {
  flex: 1 1 auto;
  color: var(--text);
  word-break: break-word;
}
.adm-view-sub__text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
  white-space: normal;
}
.adm-view-sub__qa {
  padding: 6px 0;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.14));
}
.adm-view-sub__qa:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.adm-view-sub__q {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.adm-view-sub__a {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
  word-break: break-word;
}
.adm-reg-row-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 0;
}
.adm-reg-row-meta strong { color: var(--text); font-weight: 600; }
.adm-reg-row-pay {
  font-size: 0.82rem;
  min-width: 0;
}
.adm-reg-row-pay__amount {
  font-weight: 700;
  color: var(--text);
}
.adm-reg-row-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.adm-reg-row-actions .btn-primary,
.adm-reg-row-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  padding: 0 12px !important;
  min-height: 32px;
  box-sizing: border-box;
  vertical-align: middle;
}
.adm-reg-row-actions .btn-primary .ti,
.adm-reg-row-actions .btn-secondary .ti {
  line-height: 1;
  font-size: 0.85rem;
}
/* Status select + action buttons sit in a fixed-width column; keep them tidy,
   uniform, and right-aligned so rows read as a clean grid. */
.adm-reg-row .adm-reg-status-stack {
  width: 100%;
  gap: 8px;
}
.adm-reg-row .adm-status-select {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 36px;
  padding: 7px 36px 7px 12px;
}
.adm-reg-row .adm-reg-secondary-actions {
  justify-content: flex-end;
  gap: 6px;
}
.adm-reg-row .adm-reg-secondary-actions > * {
  margin: 0;
}
.adm-reg-row .adm-reg-secondary-actions .btn-refund,
.adm-reg-row .adm-reg-secondary-actions .btn-ghost,
.adm-reg-row .adm-reg-secondary-actions .btn-download-waiver {
  flex: 1 1 auto;
  min-width: 84px;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 11px;
  font-size: 0.76rem;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* "Refund + Cancel Plan" is long — let it take a full row of its own so the
   shorter buttons below it stay balanced. */
.adm-reg-row .adm-reg-secondary-actions .btn-refund-plan { flex-basis: 100%; }
/* Partial-refund summary sits as a right-aligned caption beneath the buttons,
   never breaking the button row. */
.adm-reg-refund-note {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  margin-top: 2px;
}
.adm-reg-refund-note .adm-partial-refund-detail {
  font-size: 0.7rem;
  color: var(--muted);
}
.adm-reg-row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  color: var(--purple-soft, #b9a4ff);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 8px;
}
.adm-reg-row-toggle .ti { transition: transform 0.18s ease; }
.adm-reg-row.is-open .adm-reg-row-toggle .ti-chevron-down { transform: rotate(180deg); }

/* Expandable details */
.adm-reg-details {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px;
}
.adm-reg-row.is-open .adm-reg-details { display: grid; }
.adm-reg-details__item { font-size: 0.8rem; min-width: 0; }
.adm-reg-details__label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 2px;
}
.adm-reg-details__value { color: var(--text); word-break: break-word; }
.adm-reg-details__full { grid-column: 1 / -1; }

/* Status + payment pills */
.adm-reg-status-pill,
.adm-reg-payment-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}
.adm-reg-status-pill { background: rgba(255,255,255,0.1); color: var(--muted); }
.adm-reg-status-pill--active,
.adm-reg-status-pill--paid,
.adm-reg-status-pill--converted { background: rgba(var(--primary-rgb,88,199,154),0.18); color: var(--mint); }
.adm-reg-status-pill--pending,
.adm-reg-status-pill--new,
.adm-reg-status-pill--waitlisted { background: rgba(var(--secondary-rgb,255,209,92),0.16); color: var(--accent-gold); }
.adm-reg-status-pill--refunded,
.adm-reg-status-pill--canceled,
.adm-reg-status-pill--failed { background: rgba(var(--color-error-rgb, 239,68,68),0.18); color: var(--color-error, #ef4444); }
.adm-reg-payment-pill--paid { background: rgba(var(--primary-rgb,88,199,154),0.16); color: var(--mint); }
.adm-reg-payment-pill--pending { background: rgba(var(--secondary-rgb,255,209,92),0.16); color: var(--accent-gold); }
.adm-reg-payment-pill--failed,
.adm-reg-payment-pill--refunded { background: rgba(var(--color-error-rgb, 239,68,68),0.18); color: var(--color-error, #ef4444); }

/* Collapsible share / tracker cards */
.adm-reg-collapsible {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  margin-bottom: var(--adm-reg-gap);
  overflow: hidden;
}
.adm-reg-collapsible__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  user-select: none;
  font-weight: 600;
  color: var(--text);
}
.adm-reg-collapsible__header [data-reg-collapse-caret] {
  margin-left: auto;
  transition: transform 0.18s ease;
}
.adm-reg-collapsible.is-collapsed .adm-reg-collapsible__body { display: none; }
.adm-reg-collapsible.is-collapsed [data-reg-collapse-caret] { transform: rotate(-90deg); }
.adm-reg-collapsible__body { padding: 14px 16px; }

/* Loading skeleton + empty states */
.adm-reg-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-reg-skeleton__row {
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: admRegShimmer 1.3s ease infinite;
}
@keyframes admRegShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.adm-reg-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.adm-reg-empty__icon { font-size: 2rem; opacity: 0.5; margin-bottom: 8px; }
.adm-reg-empty__title { font-size: 1.05rem; color: var(--text); margin-bottom: 4px; font-weight: 600; }

/* Compact density: noticeably tighter rows, gaps, controls + fonts.
   Comfortable (no class) keeps the roomier default spacing above. */
.adm-reg-density-compact .adm-reg-list { gap: 6px; }
.adm-reg-density-compact .adm-reg-group__body { gap: 6px; padding: 8px; }
.adm-reg-density-compact .adm-reg-row { padding: 7px 12px; border-radius: 10px; }
.adm-reg-density-compact .adm-reg-row-main { gap: 4px 14px; }
.adm-reg-density-compact .adm-reg-row-id__primary { font-size: 0.84rem; }
.adm-reg-density-compact .adm-reg-row-id__secondary { font-size: 0.74rem; margin-top: 1px; }
.adm-reg-density-compact .adm-reg-row-meta,
.adm-reg-density-compact .adm-reg-row-pay { font-size: 0.74rem; }
.adm-reg-density-compact .adm-reg-row-meta { gap: 1px; }
.adm-reg-density-compact .adm-reg-row .adm-status-select { min-height: 30px; padding: 4px 32px 4px 10px; font-size: 0.76rem; }
.adm-reg-density-compact .adm-reg-row .adm-reg-secondary-actions .btn-refund,
.adm-reg-density-compact .adm-reg-row .adm-reg-secondary-actions .btn-ghost,
.adm-reg-density-compact .adm-reg-row .adm-reg-secondary-actions .btn-download-waiver { min-height: 28px; padding: 4px 9px; font-size: 0.72rem; }
.adm-reg-density-compact .adm-reg-row-actions .btn-primary,
.adm-reg-density-compact .adm-reg-row-actions .btn-secondary {
  min-height: 28px;
  padding: 0 9px !important;
  font-size: 0.72rem;
}
.adm-reg-density-compact .adm-reg-row-toggle { margin-top: 5px; padding: 2px 0; font-size: 0.72rem; }
/* In compact mode the player/child line is enough at a glance — drop the
   tertiary meta lines (schedule + email) until the row is expanded. */
.adm-reg-density-compact .adm-reg-row-meta > :nth-child(n+3) { display: none; }

/* Comfortable density: extra breathing room so the contrast with compact is clear. */
.adm-reg-workspace:not(.adm-reg-density-compact) .adm-reg-list { gap: 12px; }
.adm-reg-workspace:not(.adm-reg-density-compact) .adm-reg-row { padding: 16px 16px; }
.adm-reg-workspace:not(.adm-reg-density-compact) .adm-reg-row-main { gap: 12px 18px; }

/* Responsive: stack so there is never a giant horizontal table */
@media (max-width: 720px) {
  .adm-reg-row-main { grid-template-columns: 1fr; }
  .adm-reg-row-actions { align-items: flex-start; }
  .adm-reg-toolbar__actions { margin-left: 0; width: 100%; }
  .adm-reg-group-header__summary { display: none; }
}

/* ==========================================================================
   Premium Schedule Workspace — shared visual system (org + league)
   Modern operations calendar, premium cells, clean filters, a polished
   day-detail surface. Built on existing CoachMate tokens + glass patterns.
   ========================================================================== */
.adm-schedule-workspace { --adm-sch-gap: 14px; }

/* Toolbar (header) + filterbar */
.adm-schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: var(--adm-sch-gap);
}
.adm-schedule-toolbar__title { min-width: 200px; }
.adm-schedule-toolbar__title h4 { margin: 0 0 2px; font-size: 1.05rem; color: var(--text); }
.adm-schedule-toolbar__title p { margin: 0; font-size: 0.82rem; color: var(--muted); }
.adm-schedule-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.adm-schedule-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--mint);
  background: rgba(var(--primary-rgb,88,199,154), 0.14);
  border: 1px solid rgba(var(--primary-rgb,88,199,154), 0.3);
}
.adm-schedule-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--adm-sch-gap);
}
.adm-schedule-filterbar .price-season-multi {
  /* Override global .price-season-multi { width:100% } so filters sit in a row on desktop */
  width: auto;
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 260px;
}
.adm-schedule-filterbar .input,
.adm-schedule-filterbar .filter-select,
.adm-schedule-filterbar .price-season-trigger {
  min-height: 38px;
}
@media (max-width: 700px) {
  .adm-schedule-filterbar .price-season-multi {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
}

/* Calendar / Table view toggle (segmented) */
.adm-schedule-view-toggle {
  display: inline-flex;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  background: var(--surface-2);
}
.adm-schedule-view-toggle button,
.adm-schedule-view-toggle .view-toggle-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
}
.adm-schedule-view-toggle button.active,
.adm-schedule-view-toggle .view-toggle-btn.active {
  background: rgba(var(--primary-rgb), 0.32);
  color: var(--text);
}

/* Month navigation */
.adm-schedule-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.adm-schedule-calendar-nav h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.adm-schedule-calendar-nav .btn-ghost { padding: 7px 14px; border-radius: 9999px; }

/* Calendar grid + cells */
.adm-schedule-calendar { width: 100%; }
.adm-schedule-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.adm-schedule-weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
}
.adm-schedule-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: default;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.adm-schedule-day--other { opacity: 0.32; }
.adm-schedule-day--has-events { cursor: pointer; background: var(--card); border-color: var(--surface-border); }
.adm-schedule-day--has-events:hover { border-color: var(--surface-border-strong); transform: translateY(-1px); }
.adm-schedule-day--today { box-shadow: inset 0 0 0 1.5px var(--mint); }
.adm-schedule-day--active { box-shadow: inset 0 0 0 2px var(--primary); border-color: var(--primary); background: rgba(var(--primary-rgb), 0.16); }
.adm-schedule-day--past.adm-schedule-day--has-events { opacity: 0.78; }
.adm-schedule-day__num {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.adm-schedule-day__top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.adm-schedule-day-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--purple-soft, #c9b6ff);
  background: rgba(var(--primary-rgb), 0.28);
}
.adm-schedule-day__done { color: var(--mint); font-size: 0.72rem; font-weight: 700; }
.adm-schedule-event-pill {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 7px;
  border-radius: 6px;
  /* Blend the brand hue into the dark surface rather than laying a flat tint of
     the raw primary over the cell. A 16% tint of a bright/light tenant primary
     (e.g. lime-green) produced a mid-tone chip that washed out the light pill
     text; mixing into --surface keeps the chip dark enough for --text to stay
     legible whatever hue the tenant picked, while the border carries the brand. */
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-schedule-event-pill--more { background: transparent; border: 0; color: var(--muted); font-weight: 600; padding: 1px 6px; }
.adm-schedule-event-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.adm-schedule-event-dots i,
.adm-schedule-event-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); display: inline-block;
}
.adm-schedule-legend {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin-top: 14px; font-size: 0.8rem; color: var(--muted);
}
.adm-schedule-legend span { display: inline-flex; align-items: center; gap: 6px; }
.adm-schedule-legend__swatch { width: 12px; height: 12px; border-radius: 4px; background: rgba(var(--primary-rgb),0.16); border: 1px solid rgba(var(--primary-rgb),0.5); }

/* List / row (table replacement) */
.adm-schedule-list { display: flex; flex-direction: column; gap: 10px; }
.adm-schedule-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 12px 14px;
  transition: border-color 0.15s ease;
}
.adm-schedule-row:hover { border-color: var(--surface-border-strong); }
.adm-schedule-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(120px, 0.8fr) 200px;
  gap: 8px 16px;
  align-items: center;
}
.adm-schedule-row-date { min-width: 0; }
.adm-schedule-row-date__day { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.adm-schedule-row-date__time { font-size: 0.8rem; color: var(--muted); }
.adm-schedule-row-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--muted); min-width: 0; }
.adm-schedule-row-meta strong { color: var(--text); font-weight: 600; }
.adm-schedule-row-meta .adm-schedule-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 1px 8px;
  border-radius: 9999px; background: rgba(var(--primary-rgb),0.16); color: var(--purple-soft, #c9b6ff);
}
.adm-schedule-row-count { font-size: 0.82rem; color: var(--text); }
.adm-schedule-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.adm-schedule-row-actions .btn-ghost { padding: 6px 11px; font-size: 0.76rem; border-radius: 8px; }

/* Day-detail modal (org) + shared day surface */
.adm-schedule-day-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 6, 16, 0.66);
  backdrop-filter: blur(4px);
}
.adm-schedule-day-modal-card {
  width: 100%;
  max-width: 960px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--surface-border-strong);
  background: var(--card, #14152a);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.adm-schedule-day-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface-2);
}
.adm-schedule-day-modal-header h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.adm-schedule-day-modal-header .adm-schedule-count { margin-left: 4px; }
.adm-schedule-day-modal-close {
  margin-left: auto;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1.5rem; line-height: 1; padding: 2px 6px;
}
.adm-schedule-day-modal-close:hover { color: var(--text); }
.adm-schedule-day-modal-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.adm-schedule-day-modal-toolbar__filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.adm-schedule-day-modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The day-details modal opts into the canonical CMModal system (for the body
   scroll-lock + Escape/backdrop/focus handling). These descendant rules (0,2,0)
   outrank the generic .cm-modal / .cm-modal__dialog defaults (0,1,0) so the
   overlay keeps its own wider card and backdrop rather than the 760px default. */
.adm-schedule-day-modal.cm-modal {
  background: rgba(5, 6, 16, 0.66);
  padding: 24px;
}
.adm-schedule-day-modal .adm-schedule-day-modal-card {
  width: 100%;
  max-width: 960px;
  max-height: 88vh;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card, #14152a);
}

.adm-schedule-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-schedule-chip,
.day-location-chip.adm-schedule-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 9999px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  color: var(--text); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
}
.adm-schedule-chip.is-active,
.day-location-chip.is-active { background: rgba(var(--primary-rgb,88,199,154),0.18); border-color: rgba(var(--primary-rgb,88,199,154),0.5); color: var(--mint); }

/* Day event card (used by org modal + league day panel) */
.adm-schedule-day-event-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  padding: 14px 16px;
}
.adm-schedule-day-event-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.adm-schedule-day-event-card__time { font-size: 1.02rem; font-weight: 700; color: var(--text); }
.adm-schedule-day-event-card__matchup { font-size: 1rem; font-weight: 700; color: var(--text); }
.adm-schedule-day-event-card__info {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px;
  font-size: 0.8rem; color: var(--muted);
}
.adm-schedule-day-event-card__info .adm-schedule-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 9999px;
  background: rgba(var(--primary-rgb),0.16); color: var(--purple-soft, #c9b6ff); font-weight: 600; font-size: 0.72rem;
}
.adm-schedule-day-event-card details { margin-top: 10px; }
.adm-schedule-day-event-card details > summary {
  cursor: pointer; list-style: none; font-size: 0.82rem; font-weight: 600;
  color: var(--purple-soft, #c9b6ff); padding: 6px 0; display: flex; align-items: center; gap: 6px;
}
.adm-schedule-day-event-card details > summary::-webkit-details-marker { display: none; }
.adm-schedule-day-event-card details > summary::after { content: '▾'; transition: transform 0.15s ease; }
.adm-schedule-day-event-card details[open] > summary::after { transform: rotate(180deg); }
.adm-schedule-day-event-card__actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08);
}
.adm-schedule-day-event-card__actions .btn-ghost,
.adm-schedule-day-event-card__actions .btn-primary { padding: 6px 12px; font-size: 0.82rem; border-radius: 9px; }

/* RSVP strip */
.adm-schedule-rsvp-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.adm-schedule-rsvp-strip__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 9px; font-size: 0.8rem; font-weight: 600;
}
.adm-schedule-rsvp-strip__item--yes { background: rgba(var(--primary-rgb,88,199,154),0.16); color: var(--mint); }
.adm-schedule-rsvp-strip__item--no { background: rgba(var(--color-error-rgb, 239,68,68),0.16); color: var(--color-error, #ef4444); }
.adm-schedule-rsvp-strip__item--wait { background: rgba(var(--secondary-rgb,255,209,92),0.16); color: var(--accent-gold); }
.adm-schedule-player-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adm-schedule-player-chip {
  padding: 3px 10px; border-radius: 9999px; font-size: 0.78rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--text);
}

/* Empty + skeleton states */
.adm-schedule-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.adm-schedule-empty__icon { font-size: 2rem; opacity: 0.5; margin-bottom: 8px; }
.adm-schedule-empty__title { font-size: 1.05rem; color: var(--text); margin-bottom: 4px; font-weight: 600; }
.adm-schedule-skeleton-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.adm-schedule-skeleton-cell, .adm-schedule-skeleton-row {
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: admSchedShimmer 1.3s ease infinite;
}
.adm-schedule-skeleton-cell { min-height: 96px; }
.adm-schedule-skeleton-row { height: 60px; margin-bottom: 10px; }
@keyframes admSchedShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Density toggle (shared chip style with schedule scope) */
.adm-schedule-density-toggle {
  display: inline-flex; border-radius: 9999px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
}
.adm-schedule-density-toggle button {
  border: 0; background: transparent; color: var(--muted);
  font-size: 0.75rem; font-weight: 600; padding: 6px 12px; cursor: pointer;
}
.adm-schedule-density-toggle button.is-active { background: rgba(var(--primary-rgb),0.28); color: var(--text); }

/* Compact density: tighter calendar cells + rows */
.adm-schedule-density-compact .adm-schedule-day { min-height: 74px; padding: 6px; gap: 3px; }
.adm-schedule-density-compact .adm-schedule-event-pill { font-size: 0.62rem; }
.adm-schedule-density-compact .adm-schedule-row { padding: 8px 12px; }
.adm-schedule-density-compact .adm-schedule-calendar-grid { gap: 6px; }

/* Premium shell for the league Games-tab table (CSS-only restyle) */
#games-list .adm-table,
#games-list table.data-table {
  border-collapse: separate;
  border-spacing: 0;
}
#games-list .adm-table thead th,
#games-list table.data-table thead th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); font-weight: 700;
}

/* Responsive: calendar stays a grid; rows + modal adapt; no horizontal spill */
@media (max-width: 760px) {
  .adm-schedule-calendar-grid { gap: 5px; }
  .adm-schedule-day { min-height: 64px; padding: 5px; }
  .adm-schedule-event-pill { display: none; }
  .adm-schedule-row-main { grid-template-columns: 1fr; }
  .adm-schedule-row-actions { justify-content: flex-start; }
  .adm-schedule-toolbar__actions { margin-left: 0; }
  /* Day modal becomes a full-height bottom sheet */
  .adm-schedule-day-modal { padding: 0; align-items: flex-end; }
  .adm-schedule-day-modal-card {
    max-width: 100%; width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
  .adm-schedule-day-modal-toolbar__filters { grid-template-columns: 1fr; }
}

.adm-submissions-pagination-host {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.adm-pager-meta {
  white-space: nowrap;
}

.adm-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.85rem;
  line-height: 1;
}

.cm-nav-auth-pending header a[data-nav="league-admin"],
.cm-nav-auth-pending header a[href*="league-admin"]:not(.adm-header__brand):not(.brand),
.cm-nav-auth-pending header a[data-nav="team-admin"],
.cm-nav-auth-pending header a[data-nav="score-portal"],
.cm-nav-auth-pending header a[data-nav="player-portal"] {
  display: none !important;
}

.adm-installment-method-select {
  min-height: 36px;
  padding: 4px 8px;
  font-size: 0.75rem;
}

/* Amounts column — registration submissions table */
.adm-reg-amounts-cell {
  vertical-align: top;
  min-width: 0;
  max-width: 19rem;
}

.adm-amount-breakdown {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.adm-amount-breakdown__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  font-size: 0.75rem;
  line-height: 1.45;
}

.adm-amount-breakdown__row--hero {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.08));
  margin-bottom: 1px;
}

.adm-amount-breakdown__row--hero .adm-amount-breakdown__value {
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--text, rgba(248, 250, 252, 0.96));
}

.adm-amount-breakdown__row--accent .adm-amount-breakdown__value {
  color: var(--primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.adm-amount-breakdown__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.adm-amount-breakdown__row--hero .adm-amount-breakdown__label {
  font-size: 0.62rem;
  padding-top: 2px;
}

.adm-amount-breakdown__value {
  flex: 0 1 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.adm-amount-breakdown__value--muted {
  color: var(--muted, rgba(226, 232, 240, 0.78));
  font-weight: 600;
}

.adm-amount-breakdown__note {
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.adm-amount-breakdown__strike {
  text-decoration: line-through;
  opacity: 0.85;
}

.adm-amount-breakdown__callout {
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--accent-gold);
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(var(--accent-gold-rgb), 0.08);
  border: 1px solid rgba(var(--accent-gold-rgb), 0.2);
}

/* Installment cards inside registration status cell */
.adm-installments-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.adm-reg-status-cell {
  vertical-align: top;
  min-width: 0;
  max-width: 22rem;
}

.adm-installment-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
    rgba(0, 0, 0, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.adm-installment-card__head {
  width: 100%;
  min-width: 0;
}

.adm-installment-card__head-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.adm-installment-card__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  width: 100%;
  min-width: 0;
}

.adm-installment-card__title {
  flex: 1 1 8rem;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(248, 250, 252, 0.94);
}

.adm-installment-card__subtitle {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
  padding-right: 2px;
}

.adm-installment-card__pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
  border: 1px solid transparent;
  white-space: normal;
  text-align: center;
}

.adm-installment-card__pill--paid {
  color: var(--primary);
  background: rgba(var(--purple-rgb), 0.14);
  border-color: rgba(var(--purple-soft-rgb), 0.35);
}

.adm-installment-card__pill--pending {
  color: var(--accent-gold);
  background: rgba(var(--accent-gold-rgb), 0.1);
  border-color: rgba(var(--accent-gold-rgb), 0.28);
}

.adm-installment-card__pill--failed {
  color: #fecaca;
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(248, 113, 113, 0.35);
}

.adm-installment-card__pill--refunded {
  color: #fecaca;
  background: rgba(185, 28, 28, 0.2);
  border-color: rgba(252, 165, 165, 0.35);
}

.adm-installment-card .installment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.adm-installment-card__amount {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(248, 250, 252, 0.95);
}

.adm-installment-open-stripe {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.adm-installment-open-stripe:hover {
  text-decoration: underline;
}

.adm-installment-manual-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 980px) {
  .adm-submissions-table-wrap .adm-table thead {
    display: none;
  }
  .adm-submissions-table-wrap .adm-table {
    min-width: 0 !important;
  }
  .adm-submissions-table-wrap .adm-table tbody tr {
    display: block;
    margin-bottom: 16px;
    padding: 14px 12px 10px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .adm-submissions-table-wrap .adm-table tbody tr > td {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
  }
  .adm-submissions-table-wrap .adm-table tbody tr > td:last-child {
    border-bottom: none;
    padding-bottom: 2px;
  }
  .adm-submissions-table-wrap .adm-table tbody tr > td::before {
    content: attr(data-label);
    flex: 0 0 96px;
    max-width: 96px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
    padding-top: 3px;
  }
  .adm-reg-status-cell > .adm-reg-status-stack,
  .adm-reg-status-cell > .adm-installments-wrap {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .adm-reg-status-cell::before {
    align-self: flex-start;
  }
  .adm-status-select {
    max-width: 100%;
    width: 100%;
  }
  .adm-reg-secondary-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .adm-reg-secondary-actions .btn-refund,
  .adm-reg-secondary-actions .btn-download-waiver,
  .adm-reg-secondary-actions .source-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    min-height: 46px;
  }
  .adm-installments-wrap .installment-actions {
    flex-direction: column;
    align-items: stretch !important;
  }
  .adm-installments-wrap .installment-actions .btn-ghost,
  .adm-installments-wrap .installment-actions .btn-refund-installment {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .adm-installments-wrap .installment-actions select {
    width: 100%;
    max-width: none;
  }
  .adm-installment-open-stripe,
  .adm-installment-manual-actions {
    margin-left: 0;
    width: 100%;
  }
  .adm-installment-manual-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .adm-reg-amounts-cell,
  .adm-reg-status-cell {
    max-width: none;
  }

  .adm-installment-card__pill {
    font-size: 0.66rem;
    padding: 6px 10px;
  }
}

@media (max-width: 520px) {
  .adm-submissions-table-wrap .adm-table tbody tr {
    padding: 12px 10px 8px;
  }
  .adm-submissions-table-wrap .adm-table tbody tr > td {
    gap: 8px;
    padding: 7px 0;
  }
  .adm-submissions-table-wrap .adm-table tbody tr > td::before {
    flex: 0 0 82px;
    max-width: 82px;
    font-size: 0.64rem;
  }
  .adm-installment-card {
    padding: 11px 12px;
    border-radius: 12px;
  }
  .adm-installment-card__amount {
    font-size: 1rem;
  }
  .adm-installment-card__title {
    font-size: 0.78rem;
  }
  .adm-amount-breakdown__row--hero .adm-amount-breakdown__value {
    font-size: 0.875rem;
  }
}

/* ---- Sports UI primitives (live score, score portal, playoffs) ---- */
.cm-score-hero {
  border: 1px solid rgba(var(--mint-rgb), .24);
  border-radius: 20px;
  padding: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--mint-rgb), .18) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(var(--purple-rgb), .2) 0%, transparent 60%),
    linear-gradient(160deg, rgba(9, 17, 32, .94), rgba(19, 12, 33, .96));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 16px 42px rgba(0,0,0,.34);
  color: rgba(248, 250, 252, 0.94);
}
.cm-score-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.cm-score-team {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  min-width: 0;
}
.cm-score-logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.07);
  padding: 5px;
}
.cm-team-name {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(248, 250, 252, 0.94);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cm-team-score {
  font-size: clamp(2.3rem, 4.8vw, 3.4rem);
  line-height: 1;
  font-weight: 800;
  color: var(--mint);
  text-shadow: 0 0 20px rgba(var(--mint-rgb), .2);
}
.cm-score-center {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
  min-width: 0;
}
.cm-clock {
  font-size: clamp(1.5rem, 3.3vw, 2.4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(248, 250, 252, 0.97);
}
.cm-period {
  font-size: .85rem;
  color: rgba(248, 250, 252, 0.72);
}
.cm-timeout-banner {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffb347;
  text-align: center;
}
.cm-chip-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.cm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--text);
  background: rgba(255,255,255,.06);
}
.cm-chip--status,
.cm-chip--live { border-color: rgba(var(--mint-rgb), .4); color: var(--mint); background: rgba(var(--mint-rgb), .12); }
.cm-chip--final {
  border-color: rgba(100, 116, 139, .4);
  color: var(--text);
  background: rgba(148, 163, 184, .16);
}
.cm-chip--scheduled {
  border-color: rgba(255,255,255,.16);
  color: var(--muted);
  background: rgba(255,255,255,.06);
}
.cm-chip--warning { border-color: rgba(var(--accent-gold-rgb), .44); color: var(--accent-gold); background: rgba(var(--accent-gold-rgb), .14); }
.cm-chip i {
  font-size: .85rem;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: .95;
}

/* Scoreboard is always a dark shell, even when the rest of the page is light.
   Brand --mint/--text can be too dark here (e.g. a deep red), so chips use
   high-contrast colors that stay readable on navy. */
.cm-score-hero .cm-chip {
  color: rgba(248, 250, 252, 0.92);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.cm-score-hero .cm-chip--status,
.cm-score-hero .cm-chip--live {
  border-color: rgba(125, 255, 196, .42);
  color: #b8ffdf;
  background: rgba(125, 255, 196, .14);
}
.cm-score-hero .cm-chip--final {
  border-color: rgba(186, 198, 214, .5);
  color: #e2e8f0;
  background: rgba(148, 163, 184, .2);
}
.cm-score-hero .cm-chip--scheduled {
  border-color: rgba(255,255,255,.2);
  color: rgba(226, 232, 240, .82);
  background: rgba(255,255,255,.07);
}
.cm-score-hero .cm-chip--warning {
  border-color: rgba(250, 204, 21, .5);
  color: #fde68a;
  background: rgba(250, 204, 21, .14);
}

.cm-panel {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  padding: 14px;
}
.cm-panel-title {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 8px;
}
.cm-panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cm-timeline-list { display: grid; gap: 8px; }
.cm-timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cm-timeline-item:hover {
  border-color: rgba(var(--primary-rgb), .34);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.cm-timeline-minute {
  min-width: 52px;
  text-align: center;
  border-radius: 8px;
  padding: 4px 6px;
  font-size: .73rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: rgba(var(--primary-rgb), .15);
  border: 1px solid rgba(var(--primary-rgb), .28);
}
.cm-timeline-body {
  display: grid;
  gap: 2px;
}
.cm-timeline-main {
  font-size: .84rem;
  color: var(--text);
  line-height: 1.42;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cm-timeline-meta {
  font-size: .74rem;
  color: var(--muted);
}
.cm-timeline-icon {
  color: var(--muted);
  font-size: .88rem;
  opacity: .86;
}
.cm-timeline-item--latest {
  border-color: rgba(var(--primary-rgb), .42);
  background: rgba(var(--primary-rgb), .09);
}

.cm-flash {
  animation: cmPulse 1.05s ease;
}
@keyframes cmPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--mint-rgb), .48); }
  100% { box-shadow: 0 0 0 14px rgba(var(--mint-rgb), 0); }
}

.cm-bracket-shell {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  min-width: max-content;
}
.cm-bracket-round {
  min-width: 250px;
  display: grid;
  gap: 12px;
  position: relative;
}
.cm-bracket-round-title {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple-soft);
  font-weight: 700;
  text-align: center;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
.cm-bracket-match {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cm-bracket-match:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--mint-rgb), .34);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.cm-bracket-match-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cm-bracket-status {
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cm-bracket-status--final {
  color: var(--mint);
  border-color: rgba(var(--mint-rgb), .4);
  background: rgba(var(--mint-rgb), .14);
}
.cm-bracket-status--live {
  color: var(--purple-soft);
  border-color: rgba(var(--purple-rgb), .42);
  background: rgba(var(--purple-rgb), .16);
}
.cm-bracket-status--bye {
  color: var(--accent-gold);
  border-color: rgba(var(--accent-gold-rgb), .42);
  background: rgba(var(--accent-gold-rgb), .16);
}
.cm-bracket-status--scheduled {
  color: var(--muted);
}
.cm-bracket-link-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  color: var(--muted);
}
.cm-bracket-link-state--linked { color: rgba(var(--mint-rgb), .9); }
.cm-bracket-link-state--unlinked { color: var(--muted); }
.cm-bracket-team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cm-bracket-team-row:last-child { border-bottom: none; }
.cm-bracket-team-row--winner {
  background: rgba(var(--mint-rgb), .14);
  box-shadow: inset 3px 0 0 rgba(var(--mint-rgb), .55);
}
.cm-bracket-team-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  font-weight: 600;
}
.cm-bracket-team-name--tbd {
  color: var(--muted);
  font-style: italic;
}
.cm-seed {
  color: var(--muted);
  font-size: .72rem;
  min-width: 24px;
}
.cm-bracket-logo {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: contain;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 1px;
}
.cm-bracket-score {
  font-size: 1rem;
  font-weight: 800;
  color: var(--mint);
  min-width: 20px;
  text-align: right;
}

@media (min-width: 981px) {
  .cm-bracket-round:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 52%;
    right: -18px;
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.06));
  }
}

@media (max-width: 980px) {
  .cm-score-top { grid-template-columns: 1fr; }
  .cm-bracket-round { min-width: 215px; }
}

/* Live Match Center + Scorekeeper Portal: scoreboard shell on small / touch screens */
@media (max-width: 768px) {
  .cm-score-hero {
    padding: 14px;
    border-radius: 16px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cm-score-top {
    gap: 12px;
  }
  .cm-score-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .cm-team-name {
    font-size: 0.98rem;
    line-height: 1.25;
  }
  .cm-chip-row {
    margin-top: 10px;
    gap: 6px;
    justify-content: center;
  }
  .cm-chip {
    padding: 6px 12px;
    min-height: 36px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
  }
  .cm-panel {
    padding: 12px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cm-panel-title-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

@media (max-width: 430px) {
  .cm-team-score {
    font-size: clamp(1.85rem, 11vw, 2.6rem);
  }
  .cm-clock {
    font-size: clamp(1.35rem, 7vw, 1.95rem);
  }
}

/* ---- Chip / tag ---- */
.adm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 500;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--text); transition: all .15s;
}
.adm-chip--active {
  background: rgba(var(--mint-rgb),.12); border-color: rgba(var(--mint-rgb),.3);
  color: var(--mint);
}
.adm-chip__remove {
  cursor: pointer; opacity: .6; font-size: .7rem; margin-left: 2px;
  transition: opacity .15s;
}
.adm-chip__remove:hover { opacity: 1; }

/* ---- Tables (enhanced) ---- */
.adm-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.015);
}
.adm-table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
.adm-table th {
  padding: 12px 14px; text-align: left; font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; z-index: 1;
}
.adm-table td {
  padding: 12px 14px; color: var(--text); font-size: .88rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.adm-table tbody tr { transition: background .12s; }
.adm-table tbody tr:hover { background: rgba(var(--primary-rgb, var(--mint-rgb)),.05); }
.adm-table tbody tr:last-child td { border-bottom: none; }
#org-responses-list .org-responses-table-scroll .adm-table thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface, #1b1927);
}
#org-responses-list .org-responses-table-scroll .adm-table tbody td {
  position: relative; z-index: 1;
}
#org-responses-list .org-responses-pagination { flex-wrap: wrap; }
#org-responses-list .org-responses-pagination__controls { flex-wrap: wrap; justify-content: flex-end; }
#org-responses-list #org-responses-page-size { width: auto; min-width: 76px; }
#org-responses-list .org-responses-pagination .adm-btn { white-space: nowrap; }
@media (max-width: 640px) {
  #org-responses-list .org-responses-page-info { flex: 1 0 100%; }
  #org-responses-list .org-responses-pagination__controls { justify-content: flex-start; }
}
body.cm-semantic-theme .adm-table-wrap{background:var(--surface-muted);border-color:var(--border)}
body.cm-semantic-theme .adm-table th{background:var(--surface);border-color:var(--border);color:var(--text-muted)}
body.cm-semantic-theme .adm-table td{border-color:var(--border)}

/* ─── League public stat pages (standings / player-stats / teams) ─────────── */
.lgp-page { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem 4rem; }
.lgp-toolbar-row { display: flex; justify-content: flex-end; margin: 0 0 14px; }

/* Standings stay as a sortable table at every viewport width. On narrow
   screens the wrapper provides native horizontal touch scrolling. */
.standings-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.standings-table { min-width: 720px; }

/* sortable table headers */
.adm-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s; }
.adm-table th.is-sortable:hover { color: var(--text); }
.adm-table th.is-sorted { color: var(--mint); }
.lgp-sort-arrow { display: inline-block; font-size: .58rem; margin-left: .25rem; opacity: .4; vertical-align: middle; }
.adm-table th.is-sorted .lgp-sort-arrow { opacity: 1; }

/* numeric emphasis */
.adm-table td.lgp-num { font-variant-numeric: tabular-nums; }
.lgp-pts { color: var(--mint); font-weight: 800; font-variant-numeric: tabular-nums; }
.lgp-strong { font-weight: 700; }

/* rank + medals */
.lgp-rank { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.lgp-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .8rem; font-weight: 800; color: #1a1205;
}
.lgp-medal--gold   { background: linear-gradient(135deg, #ffe08a, #f5b528); }
.lgp-medal--silver { background: linear-gradient(135deg, #e6ebf2, #aab4c4); }
.lgp-medal--bronze { background: linear-gradient(135deg, #f0b483, #bd7842); color: #fff; }

/* team cell with logo */
.lgp-team { display: flex; align-items: center; gap: .6rem; min-width: 150px; text-align: left; }
.lgp-team-logo {
  width: 34px; height: 34px; border-radius: 50%; object-fit: contain; flex-shrink: 0;
  background: rgba(255,255,255,.06); padding: 2px; box-sizing: border-box;
  background: rgba(255,255,255,.04); border: 1px solid rgba(var(--mint-rgb),.4);
}
.lgp-team-logo--ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 800; color: var(--mint);
  background: rgba(var(--mint-rgb),.12);
}
.lgp-team-name { font-weight: 600; color: var(--text); }

/* stat legend (collapsible abbreviations key) */
.lgp-legend {
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  background: var(--surface-2, rgba(255,255,255,.02));
  border: 1px solid var(--surface-border, rgba(255,255,255,.08));
  border-radius: var(--radius-lg, 14px);
}
.lgp-legend__toggle {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none;
  width: 100%; text-align: left;
  font-size: .82rem; font-weight: 700; color: var(--muted);
  background: none; border: none; padding: 0; text-transform: uppercase; letter-spacing: .05em;
}
.lgp-legend__toggle i { transition: transform .2s; font-size: 1rem; }
.lgp-legend__toggle.open i { transform: rotate(180deg); }
.lgp-legend__grid {
  display: none; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .35rem 1.25rem; margin-top: .75rem; padding-top: .75rem;
  border-top: 1px solid var(--surface-border, rgba(255,255,255,.07));
}
.lgp-legend__grid.open { display: grid; }
.lgp-legend__item { font-size: .8rem; color: var(--muted); padding: .15rem 0; }
.lgp-legend__abbr { font-weight: 700; color: var(--text); margin-right: .35rem; }

/* responsive: collapse wide stat tables into stacked cards */
@media (max-width: 760px) {
  .adm-table-wrap--cards { border: none; background: none; overflow: visible; }
  .adm-table-wrap--cards .adm-table { min-width: 0 !important; }
  .adm-table-wrap--cards .adm-table thead { display: none; }
  .adm-table-wrap--cards .adm-table tbody tr {
    display: block; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px;
    background: var(--surface-2, rgba(255,255,255,.03));
    border: 1px solid var(--surface-border, rgba(255,255,255,.1));
  }
  .adm-table-wrap--cards .adm-table tbody tr:hover { background: var(--surface-2, rgba(255,255,255,.03)); }
  .adm-table-wrap--cards .adm-table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 7px 0; border: none; text-align: right;
    border-bottom: 1px solid var(--surface-border, rgba(255,255,255,.05));
  }
  .adm-table-wrap--cards .adm-table tbody td:last-child { border-bottom: none; }
  .adm-table-wrap--cards .adm-table tbody td::before {
    content: attr(data-label); text-align: left;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); flex-shrink: 0;
  }
  /* header cell of each card (rank + team) spans full width, no label */
  .adm-table-wrap--cards .adm-table tbody td.lgp-card-head {
    justify-content: flex-start; gap: .6rem; padding-bottom: 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--surface-border, rgba(255,255,255,.12));
  }
  .adm-table-wrap--cards .adm-table tbody td.lgp-card-head::before { content: none; }
}

/* ── Surveys section premium polish (scoped) ───────────────────────────── */
#surveys-tab .adm-card {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--primary-rgb, var(--mint-rgb)),.05), rgba(255,255,255,.02));
  overflow: hidden;
}
#surveys-tab .adm-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgba(var(--mint-rgb),.9), rgba(var(--purple-rgb),.7));
}
#surveys-tab .adm-card > h4,
#surveys-tab .adm-card > h5 { letter-spacing: .01em; }
#surveys-tab .adm-kpi-row { gap: 10px; }
#surveys-tab .adm-table { border-radius: 14px; overflow: hidden; }
#surveys-tab .adm-table thead th {
  text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--muted);
}
#surveys-tab .adm-pager-btn {
  border-radius: 9px; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#surveys-tab .adm-pager-btn:hover { transform: translateY(-1px); border-color: rgba(var(--mint-rgb),.45); }
#surveys-tab .survey-empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--muted);
  border: 1px dashed var(--surface-border, rgba(255,255,255,.14)); border-radius: 16px;
  background: rgba(255,255,255,.02);
}
#surveys-tab .survey-empty i { font-size: 2.25rem; display: block; margin-bottom: .5rem; opacity: .55; }

.adm-game-matchup {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 600;
}
.adm-game-score strong {
  color: var(--mint);
  font-size: .97rem;
}
.adm-game-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.adm-games-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.adm-games-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-playoff-list {
  display: grid;
  gap: 12px;
}
.adm-playoff-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.adm-playoff-card__main {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.adm-playoff-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adm-playoff-card__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.adm-playoff-card__hint {
  font-size: .78rem;
  color: var(--muted);
  border-left: 2px solid rgba(var(--mint-rgb), .35);
  padding-left: 8px;
}
.adm-playoff-card__kpis {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.adm-playoff-card__matches {
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  padding: 8px;
}

.adm-playoff-context {
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  padding: 10px 12px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.adm-playoff-context__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.adm-playoff-context__feedback {
  margin-top: 8px;
  font-size: .8rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  padding: 7px 9px;
  color: var(--text);
  background: rgba(255,255,255,.03);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.adm-playoff-context--pulse {
  border-color: rgba(var(--mint-rgb), .4);
  box-shadow: 0 0 0 1px rgba(var(--mint-rgb), .2), 0 0 22px rgba(var(--mint-rgb), .12);
  background: rgba(var(--mint-rgb), .05);
}

.adm-playoff-matches {
  display: grid;
  gap: 8px;
}
.adm-playoff-match-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 8px 9px;
  background: rgba(0,0,0,.16);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.adm-playoff-match-row:hover {
  border-color: rgba(var(--mint-rgb), .35);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}
.adm-playoff-match-row__main {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.adm-playoff-match-row__title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--purple-soft);
  letter-spacing: .02em;
}
.adm-playoff-match-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .8rem;
  color: var(--text);
}
.adm-playoff-match-row__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.adm-playoff-match-row__actions .adm-badge i,
.adm-playoff-context__feedback i {
  font-size: .8rem;
  opacity: .9;
}

/* ---- Bulk action bar ---- */
.adm-bulk-bar {
  display: none; padding: 10px 16px; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(var(--mint-rgb),.08); border: 1px solid rgba(var(--mint-rgb),.2);
  border-radius: var(--radius-md); margin-bottom: 12px;
  animation: admSlideDown .2s ease;
}
.adm-bulk-bar.visible { display: flex; }
.adm-bulk-bar__count { font-size: .85rem; font-weight: 600; color: var(--mint); white-space: nowrap; }
.adm-bulk-bar__actions { display: flex; gap: 6px; flex-wrap: wrap; }
@keyframes admSlideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* ---- Pagination ---- */
.adm-pager {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 16px; flex-wrap: wrap;
}
.adm-pager button {
  padding: 7px 14px; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: var(--text); cursor: pointer; transition: all .15s;
}
.adm-pager button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.adm-pager button:disabled { opacity: .35; cursor: not-allowed; }
.adm-pager button.active { background: rgba(var(--mint-rgb),.15); color: var(--mint); border-color: rgba(var(--mint-rgb),.3); }
.adm-pager__info { font-size: .8rem; color: var(--muted); padding: 0 8px; }

/* ---- Empty state ---- */
.adm-empty {
  text-align: center; padding: 44px 24px; color: var(--muted);
  border: 1px dashed var(--surface-border-strong, rgba(255,255,255,.14));
  border-radius: var(--radius-lg);
  background: var(--surface-2, rgba(255,255,255,.015));
}
.adm-empty__icon {
  font-size: 2.5rem; margin-bottom: 10px; opacity: .5; display: block;
}
.adm-empty__title {
  font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 4px;
}
.adm-empty__desc { font-size: .85rem; max-width: 360px; margin: 0 auto 16px; line-height: 1.45; }

/* ---- Loading state ---- */
.adm-loading {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.adm-loading__spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(var(--mint-rgb),.2);
  border-top-color: var(--mint);
  border-radius: 50%; animation: spin .8s linear infinite;
  margin: 0 auto 12px;
}
.adm-loading__text { font-size: .85rem; }

/* ---- Error state ---- */
.adm-error {
  text-align: center; padding: 32px 20px;
  background: rgba(255,107,107,.06); border: 1px solid rgba(255,107,107,.15);
  border-radius: var(--radius-lg); color: #ff8a8a;
}
.adm-error__icon { font-size: 1.8rem; margin-bottom: 8px; display: block; }

/* ---- Player assignments workspace ---- */
.assignment-workspace {
  display: grid;
  gap: 14px;
}

/* --- Assignment mode switch (Season Roster vs By Day) ---
   Uses the same chip-tab pill markup + active treatment as the location
   filter on this page, so the two toggles match the location pills exactly. */
.assignment-mode-tabs { margin-bottom: 14px; }
.assignment-mode-tabs button { display: inline-flex; align-items: center; gap: 7px; }

/* --- Roster hint --- */
.adm-link-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--mint);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.adm-link-btn:hover { opacity: .85; }

/* --- By Day mode: month calendar --- */
.assignment-cal { padding: 16px; }
.assignment-cal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.assignment-cal__nav { display: flex; align-items: center; gap: 8px; }
.assignment-cal__title {
  min-width: 168px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.assignment-cal__location { max-width: 220px; }
.assignment-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.assignment-cal__weekdays span {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.assignment-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.assignment-cal__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255,255,255,.05);
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 54px;
}
.assignment-cal__cell--empty { border: none; background: transparent; }
.assignment-cal__cell--muted { background: rgba(255,255,255,.015); color: var(--muted); }
.assignment-cal__cell--active {
  background: rgba(var(--mint-rgb), .10);
  border-color: rgba(var(--mint-rgb), .35);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.assignment-cal__cell--active:hover { background: rgba(var(--mint-rgb), .18); transform: translateY(-1px); }
.assignment-cal__cell--active:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.assignment-cal__cell--today { box-shadow: inset 0 0 0 1px var(--mint); }
.assignment-cal__daynum { font-size: .82rem; font-weight: 600; color: var(--text); }
.assignment-cal__cell--muted .assignment-cal__daynum { color: var(--muted); }
.assignment-cal__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--mint);
  background: rgba(var(--mint-rgb), .16);
  border-radius: 999px;
  padding: 1px 6px;
}
.assignment-cal__legend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .78rem;
  color: var(--muted);
}
.assignment-cal__legend-dot {
  width: 12px; height: 12px; border-radius: 3px;
  background: rgba(var(--mint-rgb), .18);
  border: 1px solid rgba(var(--mint-rgb), .35);
  display: inline-block;
}

/* --- Day assignment modal --- */
.assignment-day-modal-shell {
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the inner list scrolls, not the shell */
}
.assignment-day-modal-shell .modal-header-row,
.assignment-day-modal-shell .assignment-day-modal__search { flex: 0 0 auto; }
.assignment-day-modal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 12px;
}
.assignment-day-modal__search i { color: var(--muted); }
.assignment-day-modal__search .input { flex: 1; }
.assignment-day-modal-shell .assignment-day-filter { flex: 0 0 auto; }
.assignment-day-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.assignment-day-filter:empty { display: none; margin: 0; }
.assignment-day-filter__chip { padding: 5px 12px; font-size: 0.82rem; border-radius: 9999px; }
.assignment-day-modal-shell .assignment-day-list {
  display: block; /* block scroll container — children keep natural height */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.assignment-day-modal-shell .assignment-day-event { margin-bottom: 12px; }
.assignment-day-modal-shell .assignment-day-event:last-child { margin-bottom: 0; }

.assignment-day-list { display: grid; gap: 12px; }
.assignment-day-event { padding: 0; overflow: hidden; }
.assignment-day-event__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
}
.assignment-day-event__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
}
.assignment-day-event__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--muted);
}
.assignment-day-event__meta i { margin-right: 3px; }
.assignment-day-event__note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--muted);
  padding: 10px 16px;
  background: rgba(var(--gold-rgb, 240,180,41), .06);
}
.assignment-day-event__note i { color: var(--gold, #f0b429); }

.assignment-day-participants { display: grid; gap: 2px; }
.assignment-day-participant {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.assignment-day-participant:last-child { border-bottom: none; }
.assignment-day-participant__info { flex: 1 1 auto; min-width: 0; }
.assignment-day-participant__name {
  font-weight: 600;
  color: var(--text);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assignment-day-participant__hint { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.assignment-day-participant__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.assignment-day-tag {
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 1px 8px;
}
.assignment-day-participant__control {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.assignment-day-participant__control .input {
  min-width: 0;
  width: 210px;
  max-width: 46vw;
}
.assignment-day-coach-select.is-override {
  border-color: rgba(var(--mint-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--mint-rgb), .35);
}

.assignment-day-participants--readonly { padding: 4px 0; }
.assignment-day-participants--readonly li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  list-style: none;
  font-size: .86rem;
}
.assignment-day-participant__coach { color: var(--muted); }

@media (max-width: 640px) {
  .assignment-day-toolbar { flex-direction: column; align-items: stretch; }
  .assignment-day-toolbar__filters .input,
  .assignment-day-toolbar__nav .input { max-width: none; }
  .assignment-day-participant { flex-direction: column; align-items: stretch; }
  .assignment-day-participant__control .input { min-width: 0; width: 100%; }
}

.assignment-context-summary {
  font-size: .84rem;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.assignment-context-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.assignment-context-row__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.assignment-primary-filters,
.assignment-advanced {
  padding: 14px;
}

.assignment-primary-filters__top {
  display: grid;
  grid-template-columns: 180px minmax(220px, 1fr);
  gap: 12px;
}

.assignment-filter-group {
  min-width: 0;
}

.assignment-filter-group .input,
.assignment-filter-group .filter-select {
  width: 100%;
}

.assignment-filter-section {
  margin-top: 12px;
}

.assignment-filter-section__label {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.assignment-chip-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.assignment-chip-tabs--compact button {
  padding-inline: 14px !important;
}

.assignment-advanced__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.assignment-advanced__toggle i {
  font-size: 1rem;
}

.assignment-advanced__body {
  margin-top: 12px;
}

.assignment-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.assignment-days-filter {
  margin-top: 12px;
}

.assignment-days-filter__row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

#admin-day-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.assignment-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px;
}

.assignment-results {
  display: grid;
  gap: 14px;
}

.assignment-location-group {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  padding: 14px;
}

.assignment-location-group__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.assignment-location-group__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.assignment-location-group__title {
  margin: 0;
  font-size: 1rem;
  color: var(--accent-gold);
}

.assignment-age-group {
  border-left: 3px solid rgba(var(--purple-rgb),.38);
  margin-top: 10px;
  padding-left: 12px;
}

.assignment-age-group__title {
  margin: 0 0 8px 0;
  font-size: .86rem;
  color: var(--purple-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.assignment-players-table {
  width: 100%;
}

.assignment-players-table th,
.assignment-players-table td {
  vertical-align: top;
}

.assignment-select-cell {
  width: 42px;
  text-align: center;
}

.assignment-select-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--mint);
  cursor: pointer;
}

.assignment-player-ident {
  display: grid;
  gap: 5px;
}

.assignment-player-name {
  font-weight: 650;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.assignment-player-meta {
  font-size: .78rem;
  color: var(--muted);
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.assignment-days {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.assignment-day-chip {
  background: rgba(var(--accent-gold-rgb), 0.16);
  color: var(--accent-gold);
  border: 1px solid rgba(var(--accent-gold-rgb), 0.24);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
}

.assignment-coach-cell {
  min-width: 230px;
  display: grid;
  gap: 5px;
}

.assignment-coach-select {
  width: 100%;
}

.assignment-coach-note {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.4;
}

.assignment-row-unassigned {
  background: rgba(var(--accent-gold-rgb), .05);
}

.assignment-row-blocked {
  background: rgba(255, 107, 107, .05);
}

.assignment-source-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.assignment-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.assignment-status-pill--assigned {
  color: var(--color-success, var(--mint));
  background: rgba(var(--color-success-rgb, var(--mint-rgb)), .14);
  border-color: rgba(var(--color-success-rgb, var(--mint-rgb)), .24);
}

.assignment-status-pill--unassigned {
  color: var(--color-warning, var(--accent-gold));
  background: rgba(var(--color-warning-rgb, var(--accent-gold-rgb)), .12);
  border-color: rgba(var(--color-warning-rgb, var(--accent-gold-rgb)), .24);
}

.assignment-status-pill--blocked {
  color: var(--color-error, #ff9a9a);
  background: rgba(var(--color-error-rgb, 239,68,68), .1);
  border-color: rgba(var(--color-error-rgb, 239,68,68), .24);
}

.assignment-bulk-coach {
  min-width: 180px;
}

.assignment-mobile-card {
  border: 1px solid rgba(var(--purple-soft-rgb), 0.24);
  background: rgba(var(--accent-rgb), 0.6);
  border-radius: 14px;
  padding: 12px;
}

.assignment-mobile-card__top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.assignment-mobile-card__select {
  padding-top: 2px;
}

.assignment-mobile-card__select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--mint);
}

.assignment-mobile-card__body {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  .assignment-context-row {
    flex-direction: column;
    align-items: stretch;
  }

  .assignment-context-row__actions {
    width: 100%;
  }

  .assignment-primary-filters__top {
    grid-template-columns: 1fr;
  }

  .assignment-location-group {
    padding: 12px;
  }

  .assignment-location-group__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .assignment-days-filter__row {
    align-items: flex-start;
    flex-direction: column;
  }
}
.adm-error__msg  { font-size: .88rem; max-width: 400px; margin: 0 auto; }

/* ---- Modal (standardized) ---- */
.adm-modal-overlay {
  position: fixed; inset: 0; z-index: var(--cm-modal-z);
  background: rgba(0,0,0,.58); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: var(--cm-modal-pad);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.adm-modal-overlay.cm-modal--open,
.adm-modal-overlay[aria-hidden="false"] { display: flex !important; opacity: 1; visibility: visible; pointer-events: auto; }
.adm-modal {
  background: var(--surface-3, var(--card, rgba(14, 32, 28, 0.98)));
  border: 1.5px solid var(--surface-border, rgba(var(--mint-rgb),.2));
  border-radius: 18px; max-width: 600px; width: 100%;
  max-height: calc(100dvh - (var(--cm-modal-pad) * 2)); overflow-y: auto;
  box-shadow: 0 0 0 1px var(--surface-border, rgba(255,255,255,.1)), 0 32px 64px rgba(0,0,0,.5),
              0 0 60px rgba(var(--mint-rgb),.06);
  transform: translateY(8px) scale(.985);
  opacity: 0;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.adm-modal-overlay.cm-modal--open .adm-modal,
.adm-modal-overlay[aria-hidden="false"] .adm-modal { transform: translateY(0) scale(1); opacity: 1; }
.adm-modal--wide  { max-width: 800px; }
.adm-modal--narrow { max-width: 440px; }
.adm-modal__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--surface-border, rgba(255,255,255,.08));
}
.adm-modal__header h3 { margin: 0; font-size: 1.15rem; }
.adm-modal__close {
  background: none; border: 1px solid var(--surface-border, rgba(255,255,255,.16)); color: var(--muted); font-size: 1.5rem;
  cursor: pointer; width: 36px; height: 36px; display: flex;
  align-items: center; justify-content: center; border-radius: var(--radius-md);
  transition: background .15s;
}
.adm-modal__close:hover { background: var(--surface-1, rgba(255,255,255,.08)); color: var(--text); border-color: var(--surface-border-strong, rgba(255,255,255,.24)); }
.adm-modal__body   { padding: 20px 22px; }
.adm-modal__footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--surface-border, rgba(255,255,255,.08));
}

/* ---- Individual registration admin ---- */
.ir-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ir-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.ir-select-all-label:has(input:disabled) { color: var(--muted); cursor: default; }
.ir-select-all-label input,
.ir-select-cell input {
  width: 18px;
  height: 18px;
  accent-color: var(--mint, var(--primary));
}
.ir-list-total { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.ir-registration-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ir-registration-row {
  display: grid;
  grid-template-columns: 34px minmax(210px, 1.2fr) minmax(260px, 1.35fr) minmax(130px, .7fr) minmax(190px, .9fr);
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--surface-border, rgba(255,255,255,.08));
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.ir-registration-row--with-payment {
  grid-template-columns: 34px minmax(190px, 1.15fr) minmax(230px, 1.3fr) minmax(110px, .65fr) minmax(145px, .8fr) minmax(180px, .9fr);
}
.ir-registration-row:hover {
  border-color: var(--surface-border-strong, rgba(255,255,255,.14));
  background: rgba(255,255,255,.03);
}
.ir-data-block { min-width: 0; }
.ir-data-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
}
.ir-select-cell { align-self: start; padding-top: 18px; text-align: center; }
.ir-player-cell { min-width: 0; }
.ir-player-name {
  display: block;
  color: var(--text);
  font-size: .9rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ir-player-badges,
.ir-intake-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
}
.ir-player-badges:empty { display: none; }
.ir-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 9px;
  color: var(--muted);
  font-size: .78rem;
}
.ir-contact-stack span {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ir-contact-stack i { flex: 0 0 auto; margin-top: 2px; }
.ir-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.ir-data-grid > div { min-width: 0; }
.ir-data-grid span,
.ir-data-grid strong,
.ir-data-grid small { display: block; }
.ir-data-grid span { margin-bottom: 2px; color: var(--muted); font-size: .68rem; }
.ir-data-grid strong { color: var(--text); font-size: .82rem; line-height: 1.25; overflow-wrap: anywhere; }
.ir-data-grid small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.ir-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.ir-status-pill--success { color: var(--color-success); background: rgba(var(--color-success-rgb),.12); border-color: rgba(var(--color-success-rgb),.2); }
.ir-status-pill--warning { color: var(--color-warning); background: rgba(var(--color-warning-rgb),.12); border-color: rgba(var(--color-warning-rgb),.2); }
.ir-status-pill--danger { color: var(--color-error); background: rgba(var(--color-error-rgb),.1); border-color: rgba(var(--color-error-rgb),.18); }
.ir-status-pill--neutral { color: var(--muted); background: rgba(255,255,255,.045); border-color: var(--surface-border, rgba(255,255,255,.08)); }
.ir-intake-cell,
.ir-payment-cell,
.ir-actions-cell { align-self: stretch; }
.ir-payment-state { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ir-payment-meta { color: var(--muted); font-size: .71rem; line-height: 1.3; overflow-wrap: anywhere; }
.ir-row-actions { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ir-row-actions .adm-btn {
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding-inline: 10px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.ir-info-btn { color: var(--muted); }
.ir-row--payment-required { background: rgba(var(--color-warning-rgb),.018); }
.ir-row--payment-required .ir-select-cell input { opacity: .4; cursor: not-allowed; }

@media (max-width: 1180px) {
  .ir-registration-row,
  .ir-registration-row--with-payment {
    grid-template-columns: 34px minmax(0, 1fr) minmax(230px, .8fr);
    align-items: start;
  }
  .ir-player-cell { grid-column: 2; }
  .ir-registration-cell { grid-column: 3; }
  .ir-intake-cell { grid-column: 2; }
  .ir-payment-cell { grid-column: 3; }
  .ir-actions-cell { grid-column: 2 / -1; }
  .ir-row-actions { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

.ir-detail-overlay { z-index: calc(var(--cm-modal-z) + 20); }
.ir-detail-dialog { max-width: 620px; }
.ir-detail-dialog__content { padding: 22px 24px; }
.ir-detail-body { font-size: .88rem; line-height: 1.55; }
.ir-detail-section { margin-bottom: 18px; }
.ir-detail-section:last-child { margin-bottom: 0; }
.ir-detail-section__title {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ir-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-border, rgba(255,255,255,.06));
}
.ir-detail-row__label { color: var(--muted); }
.ir-detail-row__value { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .ir-list-toolbar { align-items: flex-start; flex-direction: column; }
  .ir-registration-row,
  .ir-registration-row--with-payment {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px 10px;
    padding: 14px 12px;
  }
  .ir-select-cell { grid-column: 1; grid-row: 1; }
  .ir-player-cell,
  .ir-registration-cell,
  .ir-intake-cell,
  .ir-payment-cell,
  .ir-actions-cell { grid-column: 2; }
  .ir-data-grid { grid-template-columns: 1fr; }
  .ir-row-actions { grid-template-columns: 1fr; }
  .ir-detail-dialog__content { padding: 18px; }
  .ir-detail-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ---- Canonical modal family aliases (legacy class compatibility) ---- */
.cm-modal,
.modal-overlay,
.day-modal,
.assist-modal,
.interest-modal,
.ew-tpl-modal-overlay,
.scw-modal,
.import-preview-modal,
.merge-modal {
  position: fixed;
  inset: 0;
  z-index: var(--cm-modal-z);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--cm-modal-pad);
  overflow: auto;
  background: radial-gradient(130% 130% at 50% -10%, rgba(10, 14, 22, 0.74), rgba(2, 4, 8, 0.86));
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal-overlay.show,
.interest-modal[aria-hidden="false"],
.cm-modal.cm-modal--open,
.modal-overlay.cm-modal--open,
.day-modal.cm-modal--open,
.assist-modal.cm-modal--open,
.interest-modal.cm-modal--open,
.ew-tpl-modal-overlay.cm-modal--open,
.scw-modal.cm-modal--open,
.import-preview-modal.cm-modal--open,
.merge-modal.cm-modal--open {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cm-modal__dialog,
.adm-modal,
.modal-content,
.modal-overlay > .modal,
.day-modal-content,
.assist-modal-card,
.interest-modal-panel,
.scw-modal-inner,
.merge-modal-body,
.lineup-modal-inner,
.league-modal-inner,
#upgradeModal > div,
#terms-modal > div {
  width: min(var(--cm-modal-width, 760px), 100%);
  max-height: calc(100dvh - (var(--cm-modal-pad) * 2));
  overflow: auto;
  margin: 0;
  /* Unified premium modal surface (panels may override per-context). */
  background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.07), rgba(var(--primary-rgb), 0) 55%), linear-gradient(180deg, rgba(22, 28, 40, 0.98) 0%, rgba(15, 20, 30, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.cm-modal__dialog::-webkit-scrollbar,
.adm-modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.day-modal-content::-webkit-scrollbar,
.assist-modal-card::-webkit-scrollbar,
.scw-modal-inner::-webkit-scrollbar { width: 9px; height: 9px; }
.cm-modal__dialog::-webkit-scrollbar-thumb,
.adm-modal::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.day-modal-content::-webkit-scrollbar-thumb,
.assist-modal-card::-webkit-scrollbar-thumb,
.scw-modal-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.cm-modal__dialog::-webkit-scrollbar-thumb:hover,
.adm-modal::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
.day-modal-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); background-clip: padding-box; }

/* Light-theme modal surface (clean elevated white card over the dark scrim). */
body.theme-light .cm-modal__dialog,
body.theme-light .adm-modal,
body.theme-light .modal-content,
body.theme-light .modal-overlay > .modal,
body.theme-light .day-modal-content,
body.theme-light .assist-modal-card,
body.theme-light .interest-modal-panel,
body.theme-light .scw-modal-inner,
body.theme-light .merge-modal-body,
body.theme-light .lineup-modal-inner,
body.theme-light .league-modal-inner,
body.theme-light .modal__panel {
  background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.05), rgba(var(--primary-rgb), 0) 60%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--surface-border-strong, rgba(17,24,39,0.14));
  box-shadow: 0 24px 64px rgba(15,23,42,0.22), 0 8px 20px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}

.cm-modal.cm-modal--open > .cm-modal__dialog,
.modal-overlay.cm-modal--open > .modal-content,
.day-modal.cm-modal--open > .day-modal-content,
.assist-modal.cm-modal--open > .assist-modal-card,
.interest-modal.cm-modal--open > .interest-modal-panel,
.ew-tpl-modal-overlay.cm-modal--open > .ew-tpl-modal,
.scw-modal.cm-modal--open > .scw-modal-inner,
.import-preview-modal.cm-modal--open > .import-preview-modal__content,
.merge-modal.cm-modal--open > .merge-modal-body,
.cm-modal[aria-hidden="false"] > .cm-modal__dialog,
.modal-overlay[aria-hidden="false"] > .modal-content,
.day-modal[aria-hidden="false"] > .day-modal-content,
.assist-modal[aria-hidden="false"] > .assist-modal-card,
.interest-modal[aria-hidden="false"] > .interest-modal-panel,
.ew-tpl-modal-overlay[aria-hidden="false"] > .ew-tpl-modal,
.scw-modal[aria-hidden="false"] > .scw-modal-inner,
.import-preview-modal[aria-hidden="false"] > .import-preview-modal__content,
.merge-modal[aria-hidden="false"] > .merge-modal-body {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---- Drawer ---- */
.adm-drawer-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: all .25s ease;
}
.adm-drawer-overlay.open { opacity: 1; visibility: visible; }
.adm-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 10000;
  width: min(560px, 94vw); background: var(--bg, #0a1f18);
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(100%); transition: transform .3s var(--ease);
  display: none; flex-direction: column; overflow: hidden;
}
.adm-drawer.open   { display: flex; transform: translateX(0); }
.adm-drawer.closing { display: flex; transform: translateX(100%); }
.adm-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0; gap: 10px;
}
.adm-drawer__header h3 { margin: 0; font-size: 1.05rem; flex: 1; min-width: 0; }
.adm-drawer__header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.adm-drawer__close {
  padding: 6px 10px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; transition: all .15s;
}
.adm-drawer__close:hover { background: rgba(255,255,255,.12); color: var(--text); }
.adm-drawer__body { flex: 1; overflow-y: auto; padding: 20px; }
.adm-drawer__footer {
  padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.adm-drawer__section { margin-bottom: 20px; }
.adm-drawer__section h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--purple-soft, var(--muted)); margin: 0 0 10px 0;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.adm-drawer__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-drawer__field .field-label {
  font-size: .71rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 2px;
}
.adm-drawer__field .field-value { font-size: .88rem; color: var(--text); word-break: break-word; }
.adm-drawer__field .field-value.empty { color: var(--muted); font-style: italic; opacity: .5; }
.adm-drawer__field.full-width { grid-column: 1 / -1; }
.adm-drawer__notes textarea {
  width: 100%; min-height: 80px; padding: 10px 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm); color: var(--text); font-size: .85rem; font-family: inherit;
  resize: vertical; transition: border-color .2s; box-sizing: border-box;
}
.adm-drawer__notes textarea:focus { border-color: rgba(var(--primary-rgb,88,199,154),.4); outline: none; }
.adm-drawer__notes-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
@media (max-width: 900px) {
  .adm-drawer { width: 100vw; }
  .adm-drawer__fields { grid-template-columns: 1fr; }
}

/* ---- Form groups ---- */
.adm-form-group { margin-bottom: 16px; }
.adm-form-group label {
  display: block; margin-bottom: 6px; color: var(--text);
  font-weight: 500; font-size: .88rem;
}
.adm-form-group input,
.adm-form-group select,
.adm-form-group textarea {
  width: 100%; padding: 10px 14px;
  background: var(--field-bg, rgba(255,255,255,.06));
  border: 1px solid var(--field-border, rgba(255,255,255,.12));
  border-radius: var(--radius-md); color: var(--text); font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.adm-form-group input:focus,
.adm-form-group select:focus,
.adm-form-group textarea:focus {
  outline: none; border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(var(--mint-rgb),.12);
}
.adm-form-row {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.adm-form-row > * { flex: 1; min-width: 140px; }
.adm-form-hint { font-size: .78rem; color: var(--muted); margin-top: 4px; }

/* ---- Inline add form (coaches, admins, teams, etc.) ---- */
.adm-add-form {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--surface-2, rgba(255,255,255,.025));
  border: 1px solid var(--surface-border, rgba(255,255,255,.07));
  border-radius: var(--radius-lg);
}
.adm-add-form input,
.adm-add-form select {
  padding: 10px 14px;
  background: var(--field-bg, rgba(255,255,255,.06));
  border: 1px solid var(--field-border, rgba(255,255,255,.12));
  border-radius: var(--radius-md);
  color: var(--text); font-size: .88rem; flex: 1; min-width: 160px;
  transition: border-color .2s;
}
.adm-add-form input:focus,
.adm-add-form select:focus { border-color: var(--mint); outline: none; }

/* ---- Toast (standardized) ---- */
.adm-toast {
  position: fixed; bottom: 24px; right: 24px; padding: 12px 20px;
  border-radius: var(--radius-lg); color: #fff; font-weight: 500; font-size: .9rem;
  z-index: 30000; max-width: min(400px, calc(100vw - 40px));
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
  animation: admToastIn .3s var(--ease);
}
.adm-toast--success { background: linear-gradient(135deg, var(--mint), var(--mint2)); color: var(--bg-start); }
.adm-toast--error   { background: linear-gradient(135deg, var(--danger), var(--danger)); }
.adm-toast--info    { background: linear-gradient(135deg, rgba(var(--purple-rgb),.9), var(--purple-soft)); }
.adm-toast--warning { background: linear-gradient(135deg, var(--warning), var(--warning)); color: var(--bg-start); }
body.cm-semantic-theme .adm-toast--success{background:var(--success);color:var(--on-success)}
body.cm-semantic-theme .adm-toast--warning{background:var(--warning);color:var(--on-warning)}
body.cm-semantic-theme .adm-toast--error{background:var(--danger);color:var(--on-danger)}
@keyframes admToastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---- Nav tabs (admin) ---- */
.adm-tabs {
  display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
  padding: 6px; background: rgba(255,255,255,.025); border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.06);
}
.adm-tabs button {
  padding: 9px 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-weight: 600; font-size: .84rem;
  cursor: pointer; transition: all .18s var(--ease); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.adm-tabs button:hover {
  background: rgba(255,255,255,.06); color: var(--text);
}
.adm-tabs button.active {
  background: linear-gradient(135deg, var(--mint), var(--mint2));
  color: var(--bg-start); border-color: transparent;
  box-shadow: 0 2px 10px rgba(var(--mint-rgb),.25);
}

/* ── Premium section-tab bar (org + league admin main nav) ──────────────
   Higher specificity + !important to override the shared .admin-nav-tabs
   pill rules; scoped to the main nav so config/branding sub-tabs are untouched. */
.adm-shell .adm-tabs.admin-nav-tabs {
  gap: 4px;
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--surface-border, rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
body.theme-light .adm-shell .adm-tabs.admin-nav-tabs {
  background: linear-gradient(180deg, rgba(17,24,39,.04), rgba(17,24,39,.015));
  border-color: var(--surface-border-strong, rgba(17,24,39,.14));
}
.adm-tabs.admin-nav-tabs button {
  border-radius: 11px !important;
  padding: 9px 15px !important;
  font-size: .85rem !important;
  font-weight: 650 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
.adm-tabs.admin-nav-tabs button i { font-size: 1.05rem; opacity: .92; }
.adm-tabs.admin-nav-tabs button:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border-color: var(--surface-border, rgba(255,255,255,.1)) !important;
  transform: none !important;
}
body.theme-light .adm-tabs.admin-nav-tabs button:hover { background: rgba(17,24,39,.05) !important; }
.adm-tabs.admin-nav-tabs button.active {
  background: linear-gradient(180deg, var(--mint), var(--mint2)) !important;
  color: var(--on-primary, #06251a) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(var(--mint-rgb),.35), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform: none !important;
}

/* ---- Stats grid (top of dashboard) ---- */
.adm-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.adm-stat {
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  padding: 18px 20px; text-align: center;
  transition: all .25s var(--ease);
}
.adm-stat:hover {
  transform: translateY(-3px); border-color: rgba(var(--mint-rgb),.2);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.adm-stat__val {
  font-size: 2.2rem; font-weight: 700;
  background: linear-gradient(135deg, var(--mint), var(--mint2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.adm-stat__label {
  color: var(--muted); font-size: .72rem; margin-top: 6px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}

/* ---- Confirm-danger wrapper ---- */
.adm-confirm-danger {
  padding: 16px; background: rgba(255,107,107,.06);
  border: 1px solid rgba(255,107,107,.18); border-radius: var(--radius-lg);
  margin-top: 12px;
}
.adm-confirm-danger__msg {
  font-size: .88rem; color: #ff8a8a; margin-bottom: 12px; line-height: 1.4;
}

/* ---- Header (admin portal header) ---- */
.adm-header {
  position: sticky; top: 0; z-index: 999;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: var(--header-bg); border-bottom: 1px solid var(--header-border);
  width: 100%;
}
header:not(.nav).adm-header .container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 clamp(18px, 2.4vw, 32px);
  box-sizing: border-box;
}
.adm-header__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0;
}
.adm-header__brand {
  display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1;
  text-decoration: none;
}
.adm-header__logo {
  width: clamp(52px, 6.5vw, 72px);
  height: clamp(52px, 6.5vw, 72px);
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.adm-header__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Optional tenant wordmark artwork (uploaded in Brand Studio) replaces the
   logo + name + slogan block; injected by org-init/league-init only when a
   header_wordmark brand asset exists. Sized like the text block it replaces. */
.adm-header__wordmark {
  display: block;
  height: clamp(48px, 6.5vw, 72px);
  width: auto;
  max-width: min(64vw, 440px);
  object-fit: contain;
}
/* A complete header wordmark already carries the tenant's identity. Suppress
   decorative repeats in page heroes while retaining them for tenants whose
   header uses the standard logo + live name/slogan treatment. */
body.cm-has-header-wordmark [data-hide-when-header-wordmark] {
  display: none !important;
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-compact .adm-header__wordmark { height: 40px; }
@media (max-width: 640px) {
  .adm-header__wordmark { height: clamp(38px, 10vw, 48px); max-width: 56vw; }
}
.adm-header__brand-text {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.adm-header__brand-name {
  font-size: clamp(1.2rem, 1.7vw, 1.6rem); font-weight: 700; color: var(--text);
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-header__brand-sub {
  font-size: clamp(.8rem, 1vw, .95rem); color: var(--muted);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Header wordmark font (org/league name + slogan) is tenant-adjustable via the
   brand-style `headerFont` option. Falls back to the theme heading, then inherit,
   so pages with no brand style applied render exactly as before. */
.adm-header__brand-name,
.adm-header__brand-sub,
.brand__name,
.brand__tagline {
  font-family: var(--brand-header-font, var(--brand-font-heading, inherit));
}
.adm-header__links {
  display: flex; gap: 4px; align-items: center; flex-shrink: 1; min-width: 0;
  overflow: hidden;
}
.adm-header__links a {
  color: var(--muted); font-weight: 600; font-size: .88rem;
  padding: 8px 14px; border-radius: var(--radius-md); transition: all .2s;
  text-decoration: none; white-space: nowrap;
  /* Transparent border so active/current rules that set border-color (the brand
     highlight ring, matching .adm-tabs pills) actually render — without it the
     ring silently collapses to 0px and only the bottom inset shadow shows. */
  border: 1px solid transparent;
}
.adm-header__links a:hover { color: var(--text); background: var(--header-link-hover-bg); }

/* ---- Summary card (config entities) ---- */
.adm-summary-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
  margin-bottom: 16px;
}
.adm-summary-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg); padding: 14px 16px;
  transition: all .2s var(--ease);
}
.adm-summary-card:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.adm-summary-card__val  { font-size: 1.3rem; font-weight: 700; color: var(--mint); }
.adm-summary-card__label { font-size: .76rem; color: var(--muted); margin-top: 2px; }

/* ---- Progress / usage bar ---- */
.adm-progress {
  height: 8px; background: rgba(255,255,255,.08); border-radius: 99px;
  overflow: hidden; margin-top: 8px;
}
.adm-progress__bar {
  height: 100%; border-radius: 99px; transition: width .4s var(--ease);
  background: linear-gradient(90deg, var(--mint), var(--mint2));
}
.adm-progress__bar--warn { background: linear-gradient(90deg, var(--accent-gold), var(--warning-dark)); }
.adm-progress__bar--danger { background: linear-gradient(90deg, var(--danger), var(--danger)); }

/* ---- Config sub-tabs ---- */
.adm-sub-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px;
}
.adm-sub-tabs button {
  padding: 7px 14px; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--muted); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.adm-sub-tabs button:hover { background: rgba(255,255,255,.08); color: var(--text); }
.adm-sub-tabs button.active {
  background: rgba(var(--mint-rgb),.12); color: var(--mint);
  border-color: rgba(var(--mint-rgb),.3);
}

/* Config sub-tabs: compact grid, all buttons in one flow */
.config-sub-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.config-sub-tabs .config-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: .84rem; white-space: nowrap;
}

/* ---- Utility classes (replace common inline styles) ---- */
.u-text-danger { color: var(--danger-light); }
.u-text-mint   { color: var(--mint, #58c79a); }
.u-text-purple { color: var(--purple-soft); }
.u-text-gold   { color: var(--secondary, #ffd15c); }
.u-text-muted  { color: var(--muted); }
.u-text-sm     { font-size: .85rem; }
.u-text-xs     { font-size: .8rem; }
.u-text-xxs    { font-size: .75rem; }
.u-meta        { font-size: .82rem; color: var(--muted); }
.u-bold        { font-weight: 600; }
.u-w-full      { width: 100%; }
.u-scroll-x    { overflow-x: auto; }
.u-gap-sm      { display: flex; gap: 6px; }
.u-gap-md      { display: flex; gap: 10px; }
.u-gap-col     { display: flex; flex-direction: column; gap: 8px; }
.u-text-right  { text-align: right; }
.u-text-center { text-align: center; }
.u-mt-sm       { margin-top: 8px; }
.u-mt-md       { margin-top: 12px; }
.u-mb-sm       { margin-bottom: 8px; }
.u-mb-md       { margin-bottom: 12px; }
.u-mb-lg       { margin-bottom: 18px; }
.adm-label {
  display: block; margin-bottom: 6px; color: var(--purple-soft); font-size: .85rem;
}
.adm-label--sm { display: block; font-size: .76rem; margin-bottom: 3px; }
.adm-hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.adm-th { padding: 10px 8px; text-align: left; color: var(--purple-soft); }
.adm-td { padding: 10px 8px; }

/* ---- Admin nav: compact mode at medium widths ---- */
@media (max-width: 1280px) {
  .adm-header__links { gap: 2px; }
  .adm-header__links a { font-size: .8rem; padding: 7px 10px; }
}

/* ---- Admin mobile responsive ---- */
@media (max-width: 1100px) {
  .adm-tabs {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding: 4px;
    scrollbar-width: none;
  }
  .adm-tabs::-webkit-scrollbar { display: none; }
  .adm-tabs button { flex-shrink: 0; font-size: .78rem; padding: 8px 12px; }
  .config-sub-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; scrollbar-width: none; gap: 6px;
  }
  .config-sub-tabs::-webkit-scrollbar { display: none; }
  .config-sub-tabs .config-subtab { flex-shrink: 0; font-size: .8rem; padding: 8px 12px; }

  .adm-page-hdr { flex-direction: column; }
  .adm-card-grid { grid-template-columns: 1fr; }
  .adm-kpi-row   { grid-template-columns: repeat(2, 1fr); }
  .adm-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .adm-add-form  { flex-direction: column; }
  .adm-add-form input,
  .adm-add-form select { min-width: 0; width: 100%; }
  .adm-form-row  { flex-direction: column; }
  .adm-toolbar    { flex-direction: column; align-items: stretch; }
  .adm-header__links { display: none !important; }
  .adm-header .nav-toggle { display: flex; }
  .adm-header .nav-links-mobile.active { display: flex; }

  .adm-modal { max-width: 100%; border-radius: var(--radius-lg); }
  .adm-row__actions { opacity: 1; }
}

@media (max-width: 820px) {
  .adm-kpi-row   { grid-template-columns: 1fr; }
  .adm-stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .adm-kpi-row    { grid-template-columns: 1fr; }
  .adm-stats-grid { grid-template-columns: 1fr; }
  .adm-table { font-size: .8rem; }
  .adm-table th, .adm-table td { padding: 8px 10px; }
  .adm-summary-cards { grid-template-columns: 1fr; }
}

/* ============================================================================
   Shared responsive table styles
   ============================================================================ */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

@media (max-width: 768px) {
  table {
    font-size: 0.85rem;
  }
  table th, table td {
    padding: 8px 6px;
  }
}

@media (max-width: 480px) {
  table {
    font-size: 0.78rem;
  }
  table th, table td {
    padding: 6px 4px;
  }
}

/* ============================================================================
   Popup / Modal visibility
   Makes overlays and modals stand out clearly on dark backgrounds.
   Add .popup-visible-overlay / .popup-visible-content to any modal for consistency.
   ============================================================================ */
.address-validation-overlay,
.popup-visible-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(8px);
}
.address-validation-modal,
.popup-visible-content {
  background: var(--surface-3, var(--card, rgba(14, 32, 28, 0.98))) !important;
  border: 2px solid var(--surface-border-strong, rgba(var(--mint-rgb), 0.25)) !important;
  box-shadow: 0 0 0 1px var(--surface-border, rgba(255,255,255,0.12)), 0 32px 64px rgba(0,0,0,0.6), 0 0 80px rgba(var(--mint-rgb), 0.08) !important;
}

/* Birthday / DOB inputs (used in registration and My Account participant forms) */
input[type="date"].birthday-input,
input[type="date"].p_birthday,
input[type="date"].player-dob,
input[type="date"]#p_add_birthday {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  height: 46px;
  line-height: 1.25;
  padding: 10px 14px;
  box-sizing: border-box;
  text-align: left;
  text-align-last: left;
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"].birthday-input::-webkit-date-and-time-value,
input[type="date"].p_birthday::-webkit-date-and-time-value,
input[type="date"].player-dob::-webkit-date-and-time-value,
input[type="date"]#p_add_birthday::-webkit-date-and-time-value {
  text-align: left;
}

input[type="date"].birthday-input::-webkit-datetime-edit,
input[type="date"].p_birthday::-webkit-datetime-edit,
input[type="date"].player-dob::-webkit-datetime-edit,
input[type="date"]#p_add_birthday::-webkit-datetime-edit {
  padding: 0;
}

@media (max-width: 768px) {
  input[type="date"].birthday-input,
  input[type="date"].p_birthday,
  input[type="date"].player-dob,
  input[type="date"]#p_add_birthday {
    min-height: 48px;
    height: 48px;
    font-size: 16px;
  }
}

/* Mobile overflow guard for native date/time controls.
   iOS (and some Android) date/time inputs keep their intrinsic content width and
   ignore width:100% unless the native appearance is reset — which makes them spill
   out of their cards (e.g. the Season Config "Create New Season" date fields and
   the league schedule date filters). Resetting appearance + clamping width fixes it
   without changing desktop styling. */
@media (max-width: 768px) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"] {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* ========================================================
   Settings Workspace — Branding & Settings redesign
   ======================================================== */

/* --- Settings Nav --- */
.stg-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 4px;
  background: rgba(255,255,255,0.03);
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.06);
}
.stg-nav-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-lg);
  font-size: 0.84rem; font-weight: 600;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.22));
  background: transparent; color: rgba(255,255,255,0.7);
  cursor: pointer; transition: all 0.2s ease;
  white-space: nowrap;
}
.stg-nav-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.stg-nav-btn.active {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint2) 100%);
  color: var(--bg-start); border-color: rgba(var(--mint-rgb), .58);
  box-shadow: 0 4px 14px rgba(var(--mint-rgb), 0.35);
}
.stg-nav-btn .stg-nav-icon { font-size: 1rem; line-height: 1; }

/* --- Section card --- */
.stg-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg); padding: 22px 24px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.stg-card:hover { border-color: rgba(255,255,255,0.13); }
.stg-card--flush { padding: 0; overflow: hidden; }
.stg-card--narrow { max-width: 800px; }
/* Team Settings: two cards side-by-side, then a full-width card below. */
.stg-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.stg-settings-row > .stg-card { margin-bottom: 0; height: 100%; }
@media (max-width: 720px) {
  .stg-settings-row { grid-template-columns: 1fr; }
}
.stg-btn-sm { font-size: 0.82rem; padding: 7px 14px; }
.stg-btn-xs { font-size: 0.78rem; padding: 5px 10px; }
.stg-callout--warn {
  padding: 14px; border-radius: 10px; margin-bottom: 14px;
  background: rgba(var(--color-warning-rgb, 251,191,36), 0.08);
  border: 1px solid rgba(var(--color-warning-rgb, 251,191,36), 0.25);
}
.stg-callout--warn strong { color: var(--color-warning, #fbbf24); font-size: 0.88rem; }
.stg-guide-panel { margin-bottom:16px; padding:15px 16px; border:1px solid rgba(var(--mint-rgb,88,199,154),.3); border-radius:12px; background:rgba(var(--mint-rgb,88,199,154),.055); }
.stg-guide-panel summary { display:flex; align-items:center; gap:8px; color:var(--text); font-size:.88rem; font-weight:800; cursor:pointer; }
.stg-guide-panel summary::marker { color:var(--mint); }
.stg-guide-panel__body { margin-top:12px; color:var(--muted); font-size:.78rem; line-height:1.55; }
.stg-guide-panel__body > p { margin:0 0 10px; }
.stg-guide-panel__steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 0 11px; padding:0; list-style:none; counter-reset:brand-guide; }
.stg-guide-panel__steps li { counter-increment:brand-guide; min-width:0; padding:9px; border:1px solid var(--surface-border,rgba(255,255,255,.11)); border-radius:9px; background:var(--surface-1,rgba(255,255,255,.025)); }
.stg-guide-panel__steps li::before { content:counter(brand-guide); display:grid; place-items:center; width:20px; height:20px; margin-bottom:6px; border-radius:50%; color:#052e16; background:var(--mint); font-size:.66rem; font-weight:850; }
.stg-guide-panel__steps strong { display:block; margin-bottom:2px; color:var(--text); font-size:.73rem; }
.stg-guide-panel__notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.stg-guide-panel__note { padding:9px 10px; border-radius:9px; background:rgba(0,0,0,.13); }
.stg-guide-panel__note strong { color:var(--text); }
.stg-guide-panel__link { display:inline-flex; align-items:center; gap:5px; margin-top:11px; color:var(--mint); font-weight:750; text-decoration:none; }
@media(max-width:900px){.stg-guide-panel__steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.stg-guide-panel__steps,.stg-guide-panel__notes{grid-template-columns:1fr}}

/* --- Section header --- */
.stg-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.stg-hdr__text { flex: 1; min-width: 0; }
.stg-hdr__title {
  margin: 0 0 4px; font-size: 1rem; font-weight: 700;
  color: var(--text);
}
.stg-hdr__desc {
  margin: 0; font-size: 0.83rem; color: var(--muted);
  line-height: 1.45;
}
.stg-hdr__actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

/* --- Status summary row --- */
.stg-summary {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 18px;
}
.stg-summary-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
}
.stg-summary-pill .stg-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.stg-summary-pill .ti { font-size: 0.85rem; line-height: 1; flex-shrink: 0; }
.stg-summary-pill--ok .ti { color: var(--mint); }
.stg-summary-pill--off .ti { color: rgba(var(--text-rgb, 255,255,255), 0.35); }
.stg-summary-pill--warn .ti { color: var(--warning, #fbbf24); }
.stg-pill-swatch {
  width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid rgba(var(--text-rgb, 255,255,255), 0.18);
}

/* --- Public profile links (tenant footer contact + socials) --- */
.pp-links {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: center; align-items: center;
  margin-bottom: 12px;
}
.pp-links[hidden] { display: none; }
.pp-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none;
  font-size: 0.84rem; transition: color 0.15s ease;
}
.pp-link:hover, .pp-link:focus-visible { color: var(--text); }
.pp-link .ti { font-size: 1rem; line-height: 1; }
@media (max-width: 560px) {
  .pp-links { gap: 8px 14px; }
  .pp-link { font-size: 0.8rem; }
}
.stg-dot--on  { background: var(--mint); box-shadow: 0 0 6px rgba(var(--mint-rgb),0.5); }
.stg-dot--off { background: rgba(255,255,255,0.2); }
.stg-dot--warn { background: var(--warning); box-shadow: 0 0 6px rgba(251,191,36,0.4); }

/* --- Toggle row --- */
.stg-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stg-toggle-row:last-child { border-bottom: none; }
.stg-toggle-info { flex: 1; min-width: 0; }
.stg-toggle-label {
  display: block; font-size: 0.88rem; font-weight: 600;
  color: var(--text); margin-bottom: 2px;
}
.stg-toggle-hint {
  font-size: 0.78rem; color: var(--muted); line-height: 1.4;
}
.stg-toggle-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* --- Toggle switch (replaces plain checkboxes) --- */
.stg-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 24px;
  line-height: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
.stg-switch input {
  opacity: 0; width: 0; height: 0; position: absolute;
}
.stg-switch-track {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  overflow: hidden;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--purple-rgb), 0.42);
  background: rgba(11, 8, 26, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.stg-switch-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.97);
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.stg-switch input:checked + .stg-switch-track {
  background: rgba(var(--mint-rgb), .78);
  border-color: rgba(var(--mint-rgb), .82);
  box-shadow: 0 0 0 2px rgba(var(--mint-rgb), .16);
}
.stg-switch input:checked + .stg-switch-track::after {
  transform: translate(18px, -50%);
}
.stg-switch input:disabled + .stg-switch-track {
  cursor: not-allowed;
  opacity: .62;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.stg-switch input:focus-visible + .stg-switch-track {
  outline: 2px solid rgba(var(--mint-rgb), .5);
  outline-offset: 2px;
}

/* --- Form field --- */
.stg-field { margin-bottom: 16px; }
.stg-field:last-child { margin-bottom: 0; }
.stg-field-label {
  display: block; margin-bottom: 5px;
  font-size: 0.84rem; font-weight: 600;
  color: var(--purple-soft);
}
.stg-field-hint {
  font-size: 0.78rem; color: var(--muted);
  margin-top: 4px; line-height: 1.4;
}

/* --- Image preview --- */
.stg-img-preview {
  width: 100%; max-width: 140px; aspect-ratio: 1;
  object-fit: contain; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px;
}
.stg-img-preview--wide {
  max-width: 240px; aspect-ratio: 16/9;
  object-fit: cover; padding: 0;
}
.stg-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 140px; aspect-ratio: 1;
  border-radius: var(--radius-md); font-size: 0.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.12);
  color: var(--muted); text-align: center; padding: 12px;
}
.stg-img-placeholder--wide { max-width: 240px; aspect-ratio: 16/9; }

/* --- Asset row (image + actions) --- */
.stg-asset {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stg-asset:last-child { border-bottom: none; }
.stg-asset__info { flex: 1; min-width: 0; }
.stg-asset__title {
  font-size: 0.88rem; font-weight: 600;
  color: var(--text); margin-bottom: 3px;
}
.stg-asset__hint {
  font-size: 0.78rem; color: var(--muted);
  line-height: 1.4; margin-bottom: 8px;
}
.stg-asset__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Save bar --- */
.stg-save-bar {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.stg-save-bar--sticky {
  position: sticky; bottom: 0;
  background: rgba(var(--bg-dark-rgb,19,13,36),0.95);
  backdrop-filter: blur(10px);
  padding: 14px 24px; margin: 16px -24px -22px;
  border-radius: 0 0 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 5;
}
.stg-save-status {
  font-size: 0.82rem; color: var(--muted);
  transition: color 0.2s;
}
.stg-save-status--ok  { color: var(--mint); }
.stg-save-status--err { color: var(--danger-light); }
.stg-save-status--dirty { color: var(--warning, #fbbf24); }
.stg-save-status--dirty .ti { margin-right: 3px; }

/* --- Divider --- */
.stg-divider {
  height: 1px; border: 0;
  background: rgba(255,255,255,0.06);
  margin: 20px 0;
}

/* --- Grid helpers --- */
.stg-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.stg-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* --- Coupon create form --- */
.stg-promo-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.stg-promo-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
}
.stg-promo-row .stg-field { margin-bottom: 0; min-width: 0; }
.stg-promo-row--emails {
  grid-template-columns: 1fr;
}
.stg-promo-row--limits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stg-promo-months { margin-top: 8px; }
.stg-promo-count {
  margin-left: 8px;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.78rem;
}
.stg-promo-emails textarea {
  min-height: 84px;
  resize: vertical;
}
.stg-promo-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.stg-promo-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-height: 168px;
  overflow: auto;
  padding: 6px;
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.promo-product-pill,
.league-promo-product-pill {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
  appearance: none;
}
.promo-product-pill:hover,
.league-promo-product-pill:hover {
  background: rgba(255,255,255,0.04);
}
.promo-product-pill.selected,
.league-promo-product-pill.selected {
  border-color: rgba(var(--primary-rgb), 0.65);
  background: rgba(var(--primary-rgb), 0.16);
}
.promo-product-check,
.league-promo-product-check {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid rgba(var(--primary-rgb), 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: transparent;
  line-height: 1;
}
.promo-product-pill.selected .promo-product-check,
.league-promo-product-pill.selected .league-promo-product-check {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.36);
}
.promo-product-name {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (min-width: 900px) {
  .stg-promo-products { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .stg-promo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stg-promo-row,
  .stg-promo-row--emails,
  .stg-promo-row--limits { grid-template-columns: 1fr; }
}

/* --- Color swatch --- */
.stg-swatch {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* --- Color picker row --- */
.stg-color-row {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 16px;
}
.stg-color-row:last-child { margin-bottom: 0; }
.stg-color-picker {
  width: 48px; height: 48px; padding: 2px;
  border-radius: var(--radius-md); border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer; flex-shrink: 0;
}
.stg-color-hex {
  font-family: monospace; font-size: 0.88rem;
  font-weight: 600; width: 100px;
}

/* --- Danger zone --- */
.stg-danger-zone {
  border: 1px solid rgba(var(--color-error-rgb,239,68,68),0.25);
  border-radius: var(--radius-lg); padding: 16px 20px;
  background: rgba(var(--color-error-rgb,239,68,68),0.04);
}
.stg-danger-zone .stg-hdr__title { color: #fca5a5; }

/* --- Connected-status badge --- */
.stg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.stg-badge--ok {
  background: rgba(var(--mint-rgb),0.15);
  color: var(--mint); border: 1px solid rgba(var(--mint-rgb),0.3);
}
.stg-badge--warn {
  background: rgba(251,191,36,0.12);
  color: var(--warning); border: 1px solid rgba(251,191,36,0.3);
}
.stg-badge--off {
  background: rgba(255,255,255,0.05);
  color: var(--muted); border: 1px solid rgba(255,255,255,0.1);
}

/* --- Preset buttons grid --- */
.stg-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin-bottom: 20px;
}
.stg-preset-btn {
  padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text); transition: all 0.2s; text-align: left;
}
.stg-preset-btn:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}
.stg-preset-swatch {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-block; vertical-align: middle; margin-right: 6px;
}

/* Brand Studio background controls. */
.stg-asset-kit-notice { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--secondary,#a3e635) 34%,var(--surface-border)); border-radius:9px; background:color-mix(in srgb,var(--secondary,#a3e635) 8%,var(--surface-1)); color:var(--muted); font-size:.72rem; line-height:1.4; }
.stg-asset-kit-notice strong { flex:0 0 auto; color:var(--text); }
.stg-asset-kit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.stg-asset-kit-card { display:flex; flex-direction:column; min-width:0; padding:12px; border:1px solid var(--surface-border,rgba(255,255,255,.12)); border-radius:11px; background:var(--surface-1,rgba(255,255,255,.025)); }
.stg-asset-kit-preview { display:grid; place-items:center; height:104px; padding:8px; overflow:hidden; border:1px dashed var(--surface-border,rgba(255,255,255,.15)); border-radius:9px; background:var(--field-bg,rgba(255,255,255,.035)); color:var(--muted); font-size:.72rem; }
.stg-asset-kit-preview.is-wide { height:82px; }
.stg-asset-kit-preview img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.stg-asset-kit-copy { flex:1; padding:10px 1px 8px; }
.stg-asset-kit-copy strong { color:var(--text); font-size:.82rem; }
.stg-asset-kit-copy p { margin:4px 0 0; color:var(--muted); font-size:.71rem; line-height:1.35; }
.stg-asset-kit-actions { display:flex; gap:6px; }
.stg-asset-kit-actions button { flex:1; padding:6px 8px; font-size:.72rem; }
.stg-asset-kit-status { min-height:30px; padding-top:6px; color:var(--warning,#eab308); font-size:.67rem; line-height:1.3; }
@media (max-width:980px) { .stg-asset-kit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .stg-asset-kit-grid { grid-template-columns:1fr; } }

.stg-background-editor { margin-top:18px; }
.stg-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 12px; margin-top:12px; }
.stg-check-grid label { display:flex; align-items:center; gap:8px; min-width:0; padding:9px 10px; border:1px solid var(--surface-border,rgba(255,255,255,.12)); border-radius:9px; color:var(--text); background:var(--surface-1,rgba(255,255,255,.025)); font-size:.76rem; font-weight:650; }
.stg-check-grid input { flex:0 0 auto; accent-color:var(--brand-color,var(--mint)); }
@media (max-width:820px) { .stg-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .stg-check-grid { grid-template-columns:1fr; } }
.stg-background-editor .stg-hdr { margin-bottom:12px; }
.stg-background-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.stg-background-viewport-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.stg-background-viewport-grid fieldset { min-width:0; margin:0; padding:12px; border:1px solid var(--surface-border,rgba(255,255,255,.12)); border-radius:10px; background:var(--surface-1,rgba(255,255,255,.025)); }
.stg-background-viewport-grid legend { padding:0 5px; color:var(--text); font-size:.78rem; font-weight:700; }
.stg-range-field, .stg-color-field { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 10px; color:var(--text); font-size:.78rem; font-weight:650; }
.stg-range-field + .stg-range-field { margin-top:10px; }
.stg-range-field output { color:var(--muted); font-size:.7rem; font-variant-numeric:tabular-nums; }
.stg-range-field input[type="range"] { grid-column:1 / -1; width:100%; accent-color:var(--brand-color,var(--mint)); }
.stg-color-field input[type="color"] { width:42px; height:30px; padding:2px; border:1px solid var(--surface-border,rgba(255,255,255,.16)); border-radius:7px; background:transparent; }
.stg-background-warning { min-height:20px; margin-top:10px; color:var(--warning,#eab308); font-size:.74rem; }
@media (max-width:700px) {
  .stg-background-grid, .stg-background-viewport-grid { grid-template-columns:1fr; }
}

/* Shared branded public-page background layer. */
.cm-tenant-background { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cm-tenant-background::before, .cm-tenant-background::after { content:""; position:absolute; inset:-24px; pointer-events:none; }
.cm-tenant-background::before { background-image:var(--brand-bg-image-desktop); background-repeat:no-repeat; background-size:var(--brand-bg-size,cover); background-position:var(--brand-bg-position-x-desktop,50%) var(--brand-bg-position-y-desktop,50%); opacity:var(--brand-bg-image-opacity,1); filter:blur(var(--brand-bg-blur,0)) saturate(var(--brand-bg-saturation,1)) contrast(var(--brand-bg-contrast,1)); transform:scale(var(--brand-bg-zoom-desktop,1)); transform-origin:var(--brand-bg-position-x-desktop,50%) var(--brand-bg-position-y-desktop,50%); }
.cm-tenant-background::after { inset:0; background:var(--brand-bg-overlay-color,#050508); opacity:var(--brand-bg-overlay-strength,.35); }
@media (max-width:900px) {
  .cm-tenant-background::before { background-image:var(--brand-bg-image-mobile,var(--brand-bg-image-desktop)); background-position:var(--brand-bg-position-x-mobile,50%) var(--brand-bg-position-y-mobile,50%); transform:scale(var(--brand-bg-zoom-mobile,1)); transform-origin:var(--brand-bg-position-x-mobile,50%) var(--brand-bg-position-y-mobile,50%); }
}

/* ── Brand Studio real-page preview ─────────────────────────────────── */
.cm-brand-preview { padding:14px !important; min-height:520px !important; overflow:hidden; isolation:isolate; }
.cm-bp-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; padding:6px; flex-wrap:wrap; border:1px solid #334155; border-radius:11px; background:#111827; }
.cm-bp-page-tabs, .cm-bp-viewport-toggle { display:flex; gap:4px; padding:4px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); overflow-x:auto; }
.cm-bp-page-tabs button, .cm-bp-viewport-toggle button { appearance:none; border:0; border-radius:7px; padding:6px 10px; background:transparent; color:rgba(255,255,255,.72); font:600 .72rem/1.2 Inter,system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
.cm-bp-page-tabs button.active, .cm-bp-viewport-toggle button.active { background:rgba(255,255,255,.15); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.cm-bp-safety { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 10px; padding:6px; border-radius:9px; background:#111827; }
.cm-bp-safety span { display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border-radius:999px; font-size:.64rem; font-weight:600; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.76); background:rgba(255,255,255,.04); }
.cm-bp-safety i { display:grid; place-items:center; width:14px; height:14px; border-radius:50%; font-style:normal; font-size:.58rem; }
.cm-bp-safety .is-safe i { color:#052e16; background:#86efac; }
.cm-bp-safety .is-unsafe { color:#fecaca; border-color:rgba(var(--color-error-rgb,239,68,68),.45); background:rgba(var(--color-error-rgb,239,68,68),.12); }
.cm-bp-safety .is-unsafe i { color:#fff; background:#ef4444; }
.cm-bp-canvas { display:flex; justify-content:center; align-items:flex-start; min-height:440px; padding:10px; border-radius:12px; overflow:auto; background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 8px,transparent 8px 16px); }
.cm-bp-device { width:min(760px,100%); min-width:0; border:1px solid var(--border); border-radius:13px; overflow:hidden; background:var(--page-bg); box-shadow:0 18px 45px rgba(0,0,0,.35); transition:width .25s ease; }
.cm-bp-device.is-mobile { width:min(390px,100%); }
.cm-bp-browser-bar { height:24px; padding:0 8px; display:flex; align-items:center; gap:4px; background:var(--surface-elevated); border-bottom:1px solid var(--border); color:var(--text-muted); font-size:.56rem; }
.cm-bp-browser-bar i { width:5px; height:5px; border-radius:50%; background:var(--text-muted); opacity:.45; }
.cm-bp-browser-bar span { margin-left:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-bp-document { position:relative; min-height:390px; background:radial-gradient(420px 240px at 100% 0,color-mix(in srgb,var(--highlight-color) 16%,transparent),transparent 68%),radial-gradient(380px 220px at 0 100%,color-mix(in srgb,var(--brand-accent-color) 18%,transparent),transparent 70%),var(--page-bg); color:var(--text); font:500 10px/1.45 Inter,system-ui,sans-serif; overflow:hidden; }
.cm-bp-document.has-brand-background::before, .cm-bp-document.has-brand-background::after { content:""; position:absolute; inset:0; pointer-events:none; }
.cm-bp-document.has-brand-background::before { z-index:0; background-image:var(--brand-bg-image-desktop); background-position:var(--brand-bg-position-x-desktop,50%) var(--brand-bg-position-y-desktop,50%); background-size:cover; background-repeat:no-repeat; opacity:var(--brand-bg-image-opacity,1); filter:blur(var(--brand-bg-blur,0)) saturate(var(--brand-bg-saturation,1)); transform:scale(var(--brand-bg-zoom-desktop,1)); transform-origin:var(--brand-bg-position-x-desktop,50%) var(--brand-bg-position-y-desktop,50%); }
.cm-bp-document.has-brand-background::after { z-index:0; inset:0; background:var(--brand-bg-overlay-color,#050508); opacity:var(--brand-bg-overlay-strength,.35); }
.cm-bp-document.has-brand-background > * { position:relative; z-index:1; }
.cm-bp-device.is-mobile .cm-bp-document.has-brand-background::before { background-image:var(--brand-bg-image-mobile,var(--brand-bg-image-desktop)); background-position:var(--brand-bg-position-x-mobile,50%) var(--brand-bg-position-y-mobile,50%); transform:scale(var(--brand-bg-zoom-mobile,1)); transform-origin:var(--brand-bg-position-x-mobile,50%) var(--brand-bg-position-y-mobile,50%); }
.cm-bp-header { min-height:48px; padding:8px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:color-mix(in srgb,var(--surface) 92%,var(--brand-accent-color)); border-bottom:1px solid color-mix(in srgb,var(--highlight-color) 34%,var(--border)); }
.cm-bp-document.cm-header-transparent .cm-bp-header { background:transparent; box-shadow:none; backdrop-filter:none; }
.cm-bp-brand { display:flex; align-items:center; gap:7px; min-width:0; color:var(--text); font-weight:750; }
.cm-bp-brand-logo { display:block; width:auto; max-width:105px; height:28px; object-fit:contain; object-position:left center; }
.cm-bp-brand-logo--mobile { display:none; width:28px; }
.cm-bp-brand > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-bp-mark { display:inline-grid; place-items:center; width:25px; height:25px; flex:0 0 auto; border-radius:8px; color:var(--button-primary-text); background:var(--button-primary-bg); font-size:.52rem; font-weight:800; letter-spacing:.03em; }
.cm-bp-mark--large { width:38px; height:38px; margin-bottom:7px; border-radius:11px; }
.cm-bp-signin-logo { display:block; width:auto; max-width:150px; height:46px; margin:0 auto 9px; object-fit:contain; }
.cm-bp-header nav { display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:.64rem; }
.cm-bp-page { padding:18px; }
.cm-bp-page h2, .cm-bp-page h3, .cm-bp-page p { margin-top:0; }
.cm-bp-page h2 { margin-bottom:6px; color:var(--text); font-size:1.35rem; line-height:1.12; letter-spacing:-.025em; }
.cm-bp-page h3 { margin-bottom:8px; font-size:.78rem; color:var(--text); }
.cm-bp-page p { margin-bottom:10px; color:var(--text-muted); }
.cm-bp-kicker { margin-bottom:5px; color:var(--link); font-size:.58rem; font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
.cm-bp-hero { max-width:590px; padding:20px; border:1px solid color-mix(in srgb,var(--highlight-color) 28%,var(--border)); border-radius:14px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface-elevated) 94%,var(--brand-color)),color-mix(in srgb,var(--surface) 92%,var(--brand-accent-color))); }
.cm-bp-hero h2 { max-width:370px; margin-top:8px; font-size:1.65rem; }
.cm-bp-hero p { max-width:480px; }
.cm-bp-actions { display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.cm-bp-btn { appearance:none; border:1px solid transparent; border-radius:8px; padding:7px 11px; font:700 .65rem/1.2 Inter,system-ui,sans-serif; cursor:default; }
.cm-bp-btn--primary { color:var(--button-primary-text); background:var(--button-primary-bg); border-color:var(--button-primary-bg); }
.cm-bp-btn--secondary { color:var(--button-secondary-text); background:var(--button-secondary-bg); border-color:var(--button-secondary-border); }
.cm-bp-full-button { width:100%; justify-content:center; margin-top:4px; }
.cm-bp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px; }
.cm-bp-asset-examples { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin-top:9px; }
.cm-bp-social-card { display:grid; grid-template-columns:110px minmax(0,1fr); overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.cm-bp-social-card img { width:100%; height:70px; object-fit:cover; }
.cm-bp-social-card div { display:flex; flex-direction:column; justify-content:center; padding:8px; }
.cm-bp-social-card small, .cm-bp-social-card span, .cm-bp-loading-preview span { color:var(--text-muted); font-size:.55rem; }
.cm-bp-loading-preview { display:grid; place-items:center; min-width:105px; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.cm-bp-loading-preview img { width:32px; height:32px; object-fit:contain; }
.cm-bp-card { padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); }
.cm-bp-card p { margin:4px 0 7px; color:var(--text-muted); font-size:.65rem; }
.cm-bp-card a, .cm-bp-page a { color:var(--link); font-weight:700; text-decoration:none; }
.cm-bp-badge { display:inline-flex; width:max-content; align-items:center; padding:3px 6px; border:1px solid var(--border); border-radius:999px; color:var(--text); background:var(--surface-elevated); font-size:.55rem; font-weight:750; }
.cm-bp-badge--success { color:var(--on-success); border-color:var(--success); background:var(--success); }
.cm-bp-form-card { max-width:610px; }
.cm-bp-form-card > label, .cm-bp-auth-card label { display:block; margin-top:8px; color:var(--text-muted); font-size:.58rem; font-weight:700; }
.cm-bp-form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cm-bp-form-row label { color:var(--text-muted); font-size:.58rem; font-weight:700; }
.cm-bp-document input, .cm-bp-document select { box-sizing:border-box; width:100%; min-height:30px; margin-top:4px; padding:6px 8px; border:1px solid var(--border); border-radius:7px; outline:0; color:var(--text); background:var(--surface-muted); font:600 .62rem Inter,system-ui,sans-serif; }
.cm-bp-document .cm-bp-is-focused { border-color:var(--focus-ring); box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring) 25%,transparent); }
.cm-bp-alert { display:flex; gap:7px; align-items:flex-start; margin-top:10px; padding:7px 9px; border-radius:8px; font-size:.6rem; }
.cm-bp-alert span { opacity:.84; }
.cm-bp-alert--warning { color:var(--on-warning); background:var(--warning); }
.cm-bp-alert--success { color:var(--on-success); background:var(--success); }
.cm-bp-page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cm-bp-filter-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:9px 0; max-width:450px; }
.cm-bp-schedule { padding:0; overflow:hidden; }
.cm-bp-schedule-head { display:flex; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text-muted); background:var(--surface-elevated); }
.cm-bp-schedule-row { display:grid; grid-template-columns:65px minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px 10px; border-bottom:1px solid var(--border); }
.cm-bp-schedule-row:last-child { border-bottom:0; }
.cm-bp-schedule-row small { display:block; margin-top:2px; color:var(--text-muted); }
.cm-bp-time { color:var(--link); font-weight:750; }
.cm-bp-empty { display:flex; flex-direction:column; align-items:center; margin-top:9px; padding:12px; border:1px dashed var(--border); border-radius:10px; color:var(--text); background:var(--surface-muted); }
.cm-bp-empty span { color:var(--text-muted); font-size:.62rem; }
.cm-bp-auth-page { display:grid; place-items:center; min-height:330px; }
.cm-bp-auth-card { width:min(300px,100%); text-align:center; }
.cm-bp-auth-card label { text-align:left; }
.cm-bp-auth-card > a { display:inline-block; margin-top:9px; font-size:.6rem; }
.cm-bp-checkout-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr); gap:10px; }
.cm-bp-summary > div { display:flex; justify-content:space-between; gap:10px; margin:7px 0; color:var(--text-muted); }
.cm-bp-payment-logo { display:block; max-width:100px; height:28px; margin-bottom:8px; object-fit:contain; object-position:left center; }
.cm-bp-summary hr { border:0; border-top:1px solid var(--border); }
.cm-bp-summary .cm-bp-total { color:var(--text); font-size:.72rem; }
.cm-bp-summary .cm-bp-btn { width:100%; margin-top:8px; }
.cm-bp-contrast-score { margin-top:10px; padding:8px; border-radius:8px; font-size:.72rem; }
.cm-bp-contrast-matrix { max-height:260px; overflow:auto; }
.cm-bp-device.is-mobile .cm-bp-header { padding:8px 10px; }
.cm-bp-device.is-mobile .cm-bp-brand-logo--desktop { display:none; }
.cm-bp-device.is-mobile .cm-bp-brand-logo--mobile { display:block; }
.cm-bp-device.is-mobile .cm-bp-header nav span:not(:last-child) { display:none; }
.cm-bp-device.is-mobile .cm-bp-page { padding:12px; }
.cm-bp-device.is-mobile .cm-bp-hero { padding:14px; }
.cm-bp-device.is-mobile .cm-bp-hero h2 { font-size:1.3rem; }
.cm-bp-device.is-mobile .cm-bp-grid, .cm-bp-device.is-mobile .cm-bp-form-row, .cm-bp-device.is-mobile .cm-bp-checkout-grid, .cm-bp-device.is-mobile .cm-bp-asset-examples { grid-template-columns:1fr; }
.cm-bp-device.is-mobile .cm-bp-page-heading { align-items:flex-end; }
.cm-bp-device.is-mobile .cm-bp-schedule-row { grid-template-columns:55px minmax(0,1fr); }
.cm-bp-device.is-mobile .cm-bp-schedule-row .cm-bp-badge { grid-column:2; }
.cm-bp-device.is-mobile .cm-bp-auth-page { min-height:350px; }
@media (max-width:640px) {
  .cm-bp-page-tabs { width:100%; }
  .cm-bp-page-tabs button { flex:1 0 auto; }
  .cm-bp-canvas { padding:6px; }
}

/* ── Brand Studio visual-style system ──────────────────────────────── */
.stg-publish-workflow { padding:16px; border:1px solid var(--surface-border,rgba(255,255,255,.13)); border-radius:12px; background:var(--surface-1,rgba(255,255,255,.025)); }
.stg-publish-workflow.has-draft { border-color:rgba(245,158,11,.48); background:rgba(245,158,11,.04); }
.stg-publish-status { display:flex; justify-content:space-between; gap:18px; }
.stg-publish-status h4 { margin:8px 0 4px; color:var(--text); }
.stg-publish-status p { margin:0; color:var(--muted); font-size:.78rem; }
.stg-publish-badge { display:inline-flex; padding:4px 8px; border-radius:999px; color:#052e16; background:#86efac; font-size:.68rem; font-weight:800; }
.stg-publish-badge.is-draft { color:#451a03; background:#fcd34d; }
.stg-publish-status dl { display:grid; min-width:230px; margin:0; gap:6px; }
.stg-publish-status dl div { display:flex; justify-content:space-between; gap:12px; }
.stg-publish-status dt { color:var(--muted); font-size:.68rem; }.stg-publish-status dd { margin:0;color:var(--text);font-size:.7rem;font-weight:650; }
.stg-publish-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.stg-publish-actions [role=status] { min-width:70px; color:var(--muted); font-size:.72rem; }
.stg-version-history { margin-top:14px; border-top:1px solid var(--surface-border,rgba(255,255,255,.12)); padding-top:12px; }
.stg-version-history summary { color:var(--text); font-size:.8rem; font-weight:750; cursor:pointer; }.stg-version-history summary span { color:var(--muted); }
.stg-version-history article { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--surface-border,rgba(255,255,255,.08)); }
.stg-version-history article > div { display:flex; gap:8px; align-items:center; }.stg-version-history article span,.stg-version-history article small { color:var(--muted); font-size:.68rem; }
@media(max-width:700px){.stg-publish-status{flex-direction:column}.stg-publish-status dl{min-width:0}.stg-version-history article{align-items:flex-start;flex-direction:column}}
.stg-style-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.stg-style-preset { appearance:none; display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto 1fr; gap:2px 10px; min-width:0; padding:10px; text-align:left; border:1px solid var(--surface-border,rgba(255,255,255,.13)); border-radius:11px; color:var(--text); background:var(--surface-1,rgba(255,255,255,.025)); cursor:pointer; }
.stg-style-preset:hover, .stg-style-preset:focus-visible { border-color:var(--brand-color,#58c79a); outline:2px solid transparent; }
.stg-style-preset.is-selected { border-color:var(--brand-color,#58c79a); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-color,#58c79a) 18%,transparent); background:color-mix(in srgb,var(--brand-color,#58c79a) 7%,transparent); }
.stg-style-preset__sample { grid-row:1 / 3; display:grid; align-content:center; gap:4px; width:52px; height:46px; padding:6px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:#172033; }
.stg-style-preset__sample i, .stg-style-preset__sample b, .stg-style-preset__sample em { display:block; height:5px; border-radius:4px; background:#f8fafc; opacity:.85; }
.stg-style-preset__sample b { width:70%; background:var(--brand-color,#58c79a); }
.stg-style-preset__sample em { width:45%; height:8px; opacity:1; }
.stg-style-preset__sample.cm-style-preset-classic-club, .stg-style-preset__sample.cm-style-preset-minimal-light { background:#f8fafc; }
.stg-style-preset__sample.cm-style-preset-classic-club i, .stg-style-preset__sample.cm-style-preset-minimal-light i { background:#334155; }
.stg-style-preset__sample.cm-style-preset-minimal-light { border-radius:2px; }
.stg-style-preset__sample.cm-style-preset-bold-academy em, .stg-style-preset__sample.cm-style-preset-youthful-energy em { border-radius:999px; }
.stg-style-preset strong { font-size:.8rem; }
.stg-style-preset small { color:var(--muted); font-size:.68rem; line-height:1.3; }
.stg-style-live { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr); gap:14px; align-items:center; margin-top:14px; padding:14px; border:1px dashed var(--surface-border,rgba(255,255,255,.16)); border-radius:10px; background:rgba(0,0,0,.12); font-family:var(--brand-font-body); }
.stg-style-live__copy strong { display:block; color:var(--text); font-family:var(--brand-font-heading); font-size:.82rem; }
.stg-style-live__copy small { display:block; margin-top:4px; color:var(--muted); font-size:.69rem; line-height:1.45; }
.stg-style-live__wordmark { margin-bottom:8px; }
.stg-style-live__wordmark strong { display:block; color:var(--text); font-size:1.15rem; font-weight:800; line-height:1.15; letter-spacing:var(--brand-heading-tracking,-0.02em); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stg-style-live__wordmark small { display:block; margin-top:1px; color:var(--muted); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stg-style-live__card { padding:calc(12px * var(--brand-space-scale)); border:1px solid var(--button-secondary-border,var(--surface-border)); border-radius:var(--brand-radius-md); background:var(--surface-1,rgba(255,255,255,.04)); box-shadow:var(--brand-card-shadow); backdrop-filter:blur(var(--brand-surface-blur)); }
.stg-style-live__card > strong { display:block; color:var(--text); font-family:var(--brand-font-heading); font-size:.82rem; }
.stg-style-live__card > span { display:block; margin:3px 0 9px; color:var(--muted); font-size:.68rem; }
.stg-style-live__card > div { display:flex; gap:7px; flex-wrap:wrap; }
.stg-style-live__card button { padding:7px 10px !important; font-size:.68rem !important; }
.stg-style-advanced { margin-top:14px; padding:12px; border:1px solid var(--surface-border,rgba(255,255,255,.12)); border-radius:10px; }
.stg-style-advanced summary { color:var(--text); font-size:.82rem; font-weight:700; cursor:pointer; }
.stg-style-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.stg-style-controls label { min-width:0; color:var(--muted); font-size:.72rem; font-weight:650; }
.stg-style-controls select { width:100%; margin-top:5px; }
.stg-style-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:12px; }
.stg-style-actions .stg-save-status { min-width:48px; }
/* Visual pickers: wordmark font previews rendered in their real faces and
   effect swatches rendered with the tenant's semantic colors. */
.stg-style-pickers { display:grid; gap:12px; margin-top:14px; }
.stg-style-picker > span { display:block; color:var(--muted); font-size:.72rem; font-weight:650; margin-bottom:6px; }
.stg-style-picker__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.stg-style-picker__option {
  appearance:none; cursor:pointer; padding:8px 6px 7px; text-align:center;
  background:var(--surface); color:var(--text);
  border:1px solid var(--surface-border,rgba(255,255,255,.12)); border-radius:10px;
  transition:border-color .15s, background .15s, transform .15s;
}
.stg-style-picker__option:hover { border-color:color-mix(in srgb,var(--highlight-color) 45%,var(--surface-border,rgba(255,255,255,.12))); transform:translateY(-1px); }
.stg-style-picker__option.is-selected { border-color:var(--highlight-color); background:color-mix(in srgb,var(--highlight-color) 10%,var(--surface)); box-shadow:inset 0 -2px 0 var(--highlight-color); }
.stg-style-picker__option small { display:block; margin-top:4px; color:var(--muted); font-size:.66rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stg-style-picker__sample { display:block; font-size:1.35rem; font-weight:800; line-height:1.25; }
/* Wordmark effect swatches mirror the real header treatments at small scale. */
.stg-wm--gradient { background:linear-gradient(100deg,color-mix(in srgb,var(--highlight-color) 60%,var(--text)),color-mix(in srgb,var(--brand-color) 72%,var(--text))); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
@supports (-webkit-text-stroke: 1px black) {
  .stg-wm--outline { -webkit-text-stroke:1.2px color-mix(in srgb,var(--highlight-color) 70%,var(--text)); color:transparent; }
}
.stg-wm--glow { text-shadow:0 0 10px color-mix(in srgb,var(--brand-color) 75%,transparent),0 0 22px color-mix(in srgb,var(--highlight-color) 45%,transparent); }
.stg-wm--varsity { text-transform:uppercase; letter-spacing:.05em; text-shadow:2px 2px 0 color-mix(in srgb,var(--brand-accent-color,var(--highlight-color)) 62%,transparent); }
.stg-wm--two-tone { color:color-mix(in srgb,var(--highlight-color) 55%,var(--text)); }
@media (max-width:900px) { .stg-style-presets, .stg-style-controls { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .stg-style-live { grid-template-columns:1fr; } }
@media (max-width:560px) { .stg-style-presets, .stg-style-controls { grid-template-columns:1fr; } }

.cm-brand-style { color-scheme:dark; font-family:var(--brand-font-body); }
.cm-brand-style.cm-style-theme-mode-light { color-scheme:light; }
body.cm-brand-style.cm-semantic-theme { background:var(--page-bg) !important; color:var(--text); }
.cm-brand-style h1, .cm-brand-style h2, .cm-brand-style h3, .cm-brand-style h4 { font-family:var(--brand-font-heading); }
.cm-brand-style :is(button,.btn,.btn-primary,.btn-secondary,input:not([type="checkbox"]):not([type="radio"]),select,textarea) { border-radius:var(--brand-radius-sm) !important; transition-duration:var(--brand-transition-speed) !important; }
.cm-brand-style.cm-style-control-shape-pill :is(button,.btn,.btn-primary,.btn-secondary,input:not([type="checkbox"]):not([type="radio"]),select) { border-radius:var(--brand-radius-pill) !important; }
.cm-brand-style :is(.adm-kpi, .adm-kpi--clickable) { border-radius:14px !important; }
/* Under the pill brand shape, admin KPI cards follow the theme like buttons/
   inputs (capsule), instead of staying locked to the 14px rounded rectangle. */
.cm-brand-style.cm-style-control-shape-pill :is(.adm-kpi, .adm-kpi--clickable) { border-radius:var(--brand-radius-pill) !important; }
/* Registrations/assignment filter tabs (location, type, response, day) are styled
   by ID-scoped rules that pin them to --radius-lg, so their ID specificity beats
   the class-based control-shape rule above and they stayed rounded rectangles even
   under the pill brand shape. Re-assert the pill radius with matching ID specificity
   so these filter chips go capsule like the rest of the themed controls. */
.cm-brand-style.cm-style-control-shape-pill :is(#assignment-location-tabs,#assignment-type-tabs,#assignment-mode-tabs,#submission-response-tabs,#submission-location-tabs,#org-responses-scope-tabs,#admin-day-filter-tabs) button { border-radius:var(--brand-radius-pill) !important; }
.cm-brand-style.cm-style-control-shape-square :is(button,.btn,.btn-primary,.btn-secondary,input:not([type="checkbox"]):not([type="radio"]),select,textarea) { border-radius:var(--brand-radius-sm) !important; }
/* Calendar month-grid day cells render as <button>, so the brand control-shape
   rules above reshape them into full stadiums — the huge radius clips the top-left
   date number against the rounded corner (cells use overflow:hidden). Calendars are
   grid tiles, never pill controls: pin every calendar day cell to a fixed tile
   radius under ANY brand style, whatever control shape (pill/rounded/square) — or
   none — the tenant picked.
   Specificity note: the control-shape rules match these cells via :is(button, …,
   input:not([type=checkbox]):not([type=radio]), …). Per spec an :is() carries the
   specificity of its MOST specific argument, so that input:not():not() branch
   inflates those rules to (0,4,1) — out-ranking any ordinary class pin (which is
   why the earlier attempts never took). :not(#_) adds an ID-level weight (#_ never
   matches anything) so this pin lands at (1,2,0) and wins outright, independent of
   source order. */
.cm-brand-style :is(.adm-schedule-day,.training-calendar-day,.calendar-day):not(#_) { border-radius:12px !important; }

/* Real public pages use several generations of component names. This shared map is
   deliberately scoped to body.cm-brand-style so Brand Studio affects public tenant
   experiences without restyling the back office. */
.cm-brand-style :is(.card,.portal-card,.summary-box,.stat-card,.empty-state,.alert,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap) {
  border-radius:var(--brand-radius-md);
  transition:transform var(--brand-transition-speed),box-shadow var(--brand-transition-speed),background var(--brand-transition-speed),border-color var(--brand-transition-speed);
}
.cm-brand-style.cm-style-card-style-elevated :is(.card,.portal-card,.summary-box,.stat-card,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap),
.cm-brand-style.cm-style-surface-style-elevated :is(.card,.portal-card,.summary-box,.stat-card,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap) { background:var(--surface-elevated); box-shadow:var(--brand-card-shadow); }
.cm-brand-style.cm-style-card-style-simple :is(.card,.portal-card,.summary-box,.stat-card,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap),
.cm-brand-style.cm-style-surface-style-flat :is(.card,.portal-card,.summary-box,.stat-card,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap) { box-shadow:none; background:var(--surface); }
.cm-brand-style.cm-style-card-style-bordered :is(.card,.portal-card,.summary-box,.stat-card,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap) { border:2px solid color-mix(in srgb,var(--highlight-color) 62%,var(--border)); box-shadow:none; }
.cm-brand-style.cm-style-card-style-glass :is(.card,.portal-card,.summary-box,.stat-card,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap),
.cm-brand-style.cm-style-surface-style-glass :is(.card,.portal-card,.summary-box,.stat-card,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap) { background:color-mix(in srgb,var(--surface) 76%,transparent); backdrop-filter:blur(var(--brand-surface-blur)); box-shadow:var(--brand-card-shadow); }
.cm-brand-style.cm-style-button-style-gradient :is(.btn-primary,button.primary,[data-primary-action]) { color:var(--button-primary-text) !important; background:linear-gradient(135deg,var(--button-primary-bg),color-mix(in srgb,var(--highlight-color) 34%,var(--button-primary-bg))) !important; border-color:color-mix(in srgb,var(--highlight-color) 42%,var(--button-primary-bg)) !important; box-shadow:var(--brand-button-shadow); }
.cm-brand-style.cm-style-button-style-outline-accent :is(.btn-primary,button.primary,[data-primary-action]) { color:var(--button-secondary-text) !important; background:color-mix(in srgb,var(--highlight-color) 9%,transparent) !important; border-color:var(--button-secondary-border) !important; box-shadow:none; }
.cm-brand-style :is(.btn-secondary,.adm-btn--secondary) { background:var(--button-secondary-bg) !important; color:var(--button-secondary-text) !important; border-color:var(--button-secondary-border) !important; }
.cm-brand-style :is(.btn-secondary,.adm-btn--secondary):hover { background:var(--button-secondary-bg-hover) !important; }

/* Secondary is the highlight role on controls and structured component states.
   Avoid generated title decorations: shared title classes have incompatible
   alignment and layout rules across public pages. */
.cm-brand-style :is(.section-title,.home-title,.hero-title,.register-header h1) { text-wrap:balance; }
.cm-brand-style :is(.highlight,.hero-chip,.game-date-badge,.badge,.chip) { color:var(--highlight-color); border-color:color-mix(in srgb,var(--highlight-color) 62%,var(--border)); }
.cm-brand-style :is(a:not(.btn):not(.adm-btn),button.link) { text-decoration-color:color-mix(in srgb,var(--highlight-color) 70%,transparent); }
.stg-style-live.cm-style-card-style-simple .stg-style-live__card,.stg-style-live.cm-style-surface-style-flat .stg-style-live__card { border-color:transparent; background:var(--surface); box-shadow:none; }
.stg-style-live.cm-style-card-style-bordered .stg-style-live__card { border:2px solid var(--button-secondary-border); box-shadow:none; }
.stg-style-live.cm-style-card-style-elevated .stg-style-live__card,.stg-style-live.cm-style-surface-style-elevated .stg-style-live__card { background:var(--surface-elevated); box-shadow:var(--brand-card-shadow); }
.stg-style-live.cm-style-card-style-glass .stg-style-live__card,.stg-style-live.cm-style-surface-style-glass .stg-style-live__card { background:color-mix(in srgb,var(--surface) 76%,transparent); backdrop-filter:blur(var(--brand-surface-blur)); box-shadow:var(--brand-card-shadow); }
.cm-brand-style.cm-style-density-compact { --brand-section-space:14px; }
.cm-brand-style.cm-style-density-comfortable { --brand-section-space:20px; }
.cm-brand-style.cm-style-density-spacious { --brand-section-space:28px; }
body.cm-brand-style .adm-header__nav { min-height:var(--brand-header-height); }
/* Centered layout mirrors the Brand Studio preview (.cm-bp-document rules below):
   the brand block sits centered on its own row with the nav links centered beneath
   it, instead of the old 3-column grid (brand left / links middle) which did not
   match what admins saw in the Live Preview. */
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__nav { flex-direction:column; justify-content:center; align-items:center; gap:4px; text-align:center; }
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__brand { justify-content:center; text-align:center; }
/* Centered headers have a dedicated brand row, so wide wordmark artwork can
   be substantially larger than it is beside navigation in the default layout. */
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__wordmark {
  height: clamp(64px, 8vw, 104px);
  max-width: min(76vw, 600px);
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__brand-text { align-items:center; }
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__brand-name,
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__brand-sub { text-align:center; }
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__links { justify-content:center; flex-wrap:wrap; overflow:visible; }
/* Portal pages keep the nav-drawer hamburger visible on desktop
   (.cm-public-drawer-ready). In the stacked centered layout it would land on its
   own row under the nav, so pin it to the header's right edge instead. */
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__nav { position:relative; }
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__nav .nav-toggle { position:absolute; top:50%; right:0; transform:translateY(-50%); }

/* Store cart + menu stay grouped in the upper-right of the centered header,
   matching the hamburger placement on other public pages. */
.store-nav-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex:0 0 auto;
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__nav .store-nav-actions {
  position:absolute;
  top:12px;
  right:0;
  justify-content:flex-end;
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__nav .store-nav-actions .nav-toggle {
  position:static;
  inset:auto;
  transform:none;
}
/* On mobile the nav links are hidden (display:none) and the hamburger toggle takes
   over, so a stacked/centered header would strand the toggle under the title.
   Revert to the base flex row so brand stays left and the hamburger pins right.
   Placed after the layout rules above so it wins the cascade (media queries add
   no specificity). */
@media (max-width: 1100px) {
  body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__nav { flex-direction:row; justify-content:space-between; align-items:center; text-align:left; }
  body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__brand { justify-content:flex-start; text-align:left; }
  body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__brand-text { align-items:flex-start; }
  body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__brand-name,
  body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__brand-sub { text-align:left; }
  body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__nav .nav-toggle { position:static; transform:none; }
  body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-centered .adm-header__nav .store-nav-actions { position:static; top:auto; right:auto; }
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-compact .adm-header__nav { min-height:var(--brand-header-height); }
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-compact .adm-header__logo { width:38px; height:38px; }
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-header-layout-compact .adm-header__brand-sub { display:none !important; }
.cm-brand-style.cm-style-animation-level-none *, .cm-brand-style.cm-style-animation-level-none *::before, .cm-brand-style.cm-style-animation-level-none *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
/* Animation tiers. `subtle` (the default in most presets) gets restrained hover
   elevation and press feedback; `lively` layers a stronger lift, ambient badge
   breathing, and the scroll-reveal driven by js/brand-motion.js (which adds
   .cm-reveal itself, so content is never hidden without JS or on other levels).
   `buttonStyle:solid` and `headerLayout:left` are intentional defaults: base CSS
   already IS the solid/left rendering, so they need no rules here. */
.cm-brand-style:not(.cm-style-animation-level-none) :is(button,.btn,.btn-primary,.btn-secondary):not(:disabled):active { transform:translateY(1px); }
.cm-brand-style:is(.cm-style-animation-level-subtle,.cm-style-animation-level-lively) :is(.btn-primary,.card,.portal-card,.home-content-card,.register-card,.signup-card,.game-card,.team-card):hover { transform:translateY(-2px); }
.cm-brand-style.cm-style-animation-level-lively :is(.btn-primary,.card,.portal-card,.home-content-card,.register-card,.signup-card,.game-card,.team-card):hover { transform:translateY(-3px) scale(1.005); }
body.cm-brand-style.cm-style-animation-level-lively :is(.hero-chip,.game-date-badge) { animation:cm-brand-breathe 1.8s ease-in-out infinite alternate; }
body.cm-brand-style.cm-style-animation-level-lively .cm-reveal { opacity:0; }
body.cm-brand-style.cm-style-animation-level-lively .cm-reveal.cm-reveal-in { animation:cm-reveal-up .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes cm-reveal-up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .cm-brand-style *, .cm-brand-style *::before, .cm-brand-style *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; } .cm-brand-style .cm-reveal { opacity:1 !important; } }

/* Premium public theme contract. This deliberately targets the component families
   used across every generation of organization and league portal. Admin pages never
   receive .cm-brand-style, so their workspace remains stable and readable. */
body.cm-brand-style.cm-semantic-theme:not([data-bg-color-layer-disabled="true"]) {
  background-color:var(--page-bg) !important;
  background-image:
    radial-gradient(900px 520px at -8% -12%,color-mix(in srgb,var(--brand-color) 18%,transparent),transparent 68%),
    radial-gradient(760px 480px at 108% 8%,color-mix(in srgb,var(--highlight-color) 16%,transparent),transparent 66%),
    radial-gradient(620px 420px at 50% 112%,color-mix(in srgb,var(--brand-accent-color) 20%,transparent),transparent 70%),
    linear-gradient(145deg,var(--page-bg),color-mix(in srgb,var(--page-bg) 88%,var(--brand-accent-color))) !important;
  background-attachment:fixed !important;
}
.cm-brand-style.cm-semantic-theme :is(h1,h2,h3,.section-title,.hero-title,.portal-hero__title) {
  font-weight:var(--brand-heading-weight);
  letter-spacing:var(--brand-heading-tracking);
}
.cm-brand-style.cm-semantic-theme :is(header,.nav,.adm-header) {
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand-color) 8%,transparent),transparent 72%),color-mix(in srgb,var(--surface) 88%,transparent) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 38%,var(--border)) !important;
  box-shadow:0 12px 38px color-mix(in srgb,var(--brand-accent-color) 15%,transparent) !important;
  backdrop-filter:blur(18px) saturate(1.15);
}
html.cm-header-transparent body:is(.cm-brand-style.cm-semantic-theme,.cm-backoffice-brand) :is(header,.adm-header,header .nav),
html.cm-header-transparent body :is(header,.adm-header,header .nav) {
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.cm-header-transparent body .adm-header::after { content:none !important; }
/* Branded header polish: a highlight hairline across the top of the bar, refined
   nav link states, and a hamburger that follows the tenant controlShape. Applies
   to both public portals and back-office headers (which share .adm-header). */
body:is(.cm-brand-style.cm-semantic-theme,.cm-backoffice-brand) .adm-header::after {
  content:""; position:absolute; inset:0 0 auto 0; height:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--highlight-color,var(--brand-color)) 55%,transparent) 50%,transparent 96%);
}
body.cm-backoffice-brand .adm-header {
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand-color,#58C79A) 6%,transparent),transparent 72%),var(--header-bg);
}
.cm-brand-style .adm-header__brand-name { letter-spacing:var(--brand-heading-tracking); }
body:is(.cm-style-preset-night-match,.cm-style-preset-bold-academy) .adm-header__brand-name {
  text-shadow:0 0 22px color-mix(in srgb,var(--brand-color) 30%,transparent);
}
/* Wordmark styles: designable text treatments for the header name + slogan,
   rendered purely from the tenant's semantic colors. `classic` is the plain
   default and deliberately has no rule. Selectors cover public portals,
   back-office headers (class mirrored by init scripts), and the Brand Studio
   live sample so admins see the exact treatment while editing. */
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-wordmark-style-gradient .adm-header__brand-name,
.stg-style-live.cm-style-wordmark-style-gradient .stg-style-live__wordmark strong {
  background:linear-gradient(100deg,color-mix(in srgb,var(--highlight-color) 60%,var(--text)),color-mix(in srgb,var(--brand-color) 72%,var(--text)));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none;
}
@supports (-webkit-text-stroke: 1px black) {
  body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-wordmark-style-outline .adm-header__brand-name,
  .stg-style-live.cm-style-wordmark-style-outline .stg-style-live__wordmark strong {
    -webkit-text-stroke:1.5px color-mix(in srgb,var(--highlight-color) 70%,var(--text));
    color:transparent;
    letter-spacing:calc(var(--brand-heading-tracking, -0.02em) + 0.035em);
    text-shadow:none;
  }
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-wordmark-style-glow .adm-header__brand-name,
.stg-style-live.cm-style-wordmark-style-glow .stg-style-live__wordmark strong {
  text-shadow:0 0 16px color-mix(in srgb,var(--brand-color) 70%,transparent),0 0 42px color-mix(in srgb,var(--highlight-color) 42%,transparent);
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-wordmark-style-varsity .adm-header__brand-name,
.stg-style-live.cm-style-wordmark-style-varsity .stg-style-live__wordmark strong {
  text-transform:uppercase;
  letter-spacing:.05em;
  text-shadow:3px 3px 0 color-mix(in srgb,var(--brand-accent-color,var(--highlight-color)) 62%,transparent);
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-wordmark-style-varsity .adm-header__brand-sub,
.stg-style-live.cm-style-wordmark-style-varsity .stg-style-live__wordmark small {
  text-transform:uppercase; letter-spacing:.14em;
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-wordmark-style-two-tone .adm-header__brand-name,
.stg-style-live.cm-style-wordmark-style-two-tone .stg-style-live__wordmark strong {
  color:color-mix(in srgb,var(--highlight-color) 55%,var(--text));
}
body:is(.cm-brand-style,.cm-backoffice-brand).cm-style-wordmark-style-two-tone .adm-header__brand-sub,
.stg-style-live.cm-style-wordmark-style-two-tone .stg-style-live__wordmark small {
  color:color-mix(in srgb,var(--brand-color) 55%,var(--muted));
}
.cm-brand-style .adm-header__links a { position:relative; }
.cm-brand-style .adm-header__links a::after {
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px;
  background:color-mix(in srgb,var(--highlight-color) 78%,transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--brand-transition-speed,.18s) ease;
}
.cm-brand-style .adm-header__links a:hover::after { transform:scaleX(1); }
.cm-brand-style .adm-header__links a:is(.is-current,[aria-current="page"])::after { display:none; }
.cm-brand-style .adm-header__links a:hover {
  color:var(--text);
  background:color-mix(in srgb,var(--highlight-color) 10%,transparent);
}
.cm-brand-style .adm-header__links a:is(.is-current,[aria-current="page"]) {
  color:var(--text);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-elevated) 86%,var(--brand-color)),color-mix(in srgb,var(--surface) 90%,var(--brand-color)));
  border-color:color-mix(in srgb,var(--highlight-color) 44%,var(--border));
  box-shadow:inset 0 -2px 0 var(--highlight-color);
}
body:is(.cm-brand-style,.cm-backoffice-brand) .adm-header .nav-toggle {
  border-radius:var(--brand-radius-sm,14px);
  border-color:color-mix(in srgb,var(--highlight-color,var(--brand-color)) 30%,var(--header-toggle-border,rgba(255,255,255,.08)));
}
body:is(.cm-brand-style,.cm-backoffice-brand) .adm-header .nav-toggle:hover {
  background:color-mix(in srgb,var(--highlight-color,var(--brand-color)) 12%,transparent);
  border-color:color-mix(in srgb,var(--highlight-color,var(--brand-color)) 48%,transparent);
}
body:is(.cm-brand-style,.cm-backoffice-brand) .adm-header .nav-toggle span {
  background:color-mix(in srgb,var(--highlight-color,var(--brand-color)) 55%,var(--text));
}
.cm-brand-style.cm-semantic-theme :is([class$="-hero"],[class*="-hero "],.portal-hero) {
  position:relative;
  /* Density finally reaches layout: hero breathing room and the gap to the next
     section follow the tenant's density choice (vars set by styleVariables()). */
  padding-block:var(--brand-hero-space,34px);
  margin-bottom:var(--brand-section-space,20px);
  border-color:color-mix(in srgb,var(--highlight-color) 32%,var(--border));
  background:
    radial-gradient(480px 220px at 90% 5%,color-mix(in srgb,var(--highlight-color) 18%,transparent),transparent 70%),
    linear-gradient(135deg,color-mix(in srgb,var(--surface-elevated) 88%,var(--brand-color)),color-mix(in srgb,var(--surface) 90%,var(--brand-accent-color))) !important;
  box-shadow:var(--brand-card-shadow);
}
.cm-brand-style.cm-semantic-theme :is(
  .card,.portal-card,.summary-box,.stat-card,.empty-state,.home-content-card,.register-card,.signup-card,.game-card,.player-card,.team-card,.schedule-card,.event-card,.rule-card,.rules-content-card,.store-card,.product-card,.fee-summary,.adm-kpi,.adm-table-wrap,
  [class$="-card"],[class*="-card "],[class$="-panel"],[class*="-panel "]
) {
  border-width:var(--brand-border-width);
  border-style:solid;
  border-color:color-mix(in srgb,var(--highlight-color) 22%,var(--border));
  border-radius:var(--brand-radius-md);
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-elevated) 96%,var(--brand-color)),color-mix(in srgb,var(--surface) 96%,var(--brand-accent-color)));
  box-shadow:var(--brand-card-shadow);
}
/* Alerts are status banners, not cards. Brand surface rules were painting them
   the same dark fill as the sign-in card, which made --on-success / --on-danger
   (chosen for solid success/danger fills) unreadable. */
.cm-brand-style.cm-semantic-theme .alert {
  font-weight:600;
  line-height:1.45;
  box-shadow:none;
}
.cm-brand-style.cm-semantic-theme .alert-success {
  background:var(--success);
  color:var(--on-success);
  border:1px solid var(--success);
}
.cm-brand-style.cm-semantic-theme .alert-error {
  background:var(--danger);
  color:var(--on-danger);
  border:1px solid var(--danger);
}
.cm-brand-style.cm-semantic-theme .alert .alert-action {
  display:inline;
  margin-left:.35rem;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.cm-brand-style.cm-semantic-theme :is(
  .modal-content,.cm-modal__dialog,[class$="-modal__panel"],[class*="-modal__panel "],[class$="-modal-inner"],[class*="-modal-inner "]
) {
  border:var(--brand-border-width) solid color-mix(in srgb,var(--highlight-color) 30%,var(--border));
  border-radius:var(--brand-radius-lg);
  color:var(--text);
  background:color-mix(in srgb,var(--surface-elevated) 94%,var(--brand-accent-color));
  box-shadow:0 28px 80px color-mix(in srgb,var(--brand-accent-color) 30%,rgba(0,0,0,.42));
}
.cm-brand-style.cm-semantic-theme :is(input,select,textarea,.input,.filter-select) {
  color:var(--text) !important;
  background:color-mix(in srgb,var(--surface) 92%,var(--brand-accent-color)) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 24%,var(--border)) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent);
}
.cm-brand-style.cm-semantic-theme :is(input,select,textarea,.input,.filter-select):focus {
  border-color:var(--highlight-color) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--highlight-color) 20%,transparent) !important;
}
.cm-brand-style.cm-semantic-theme :is(.tabs,.tab-nav,.adm-tabs,.adm-sub-tabs,.step-nav,[class$="-tabs"],[class*="-tabs "]) {
  border-color:color-mix(in srgb,var(--highlight-color) 20%,var(--border));
  background:color-mix(in srgb,var(--surface-muted) 90%,var(--brand-accent-color));
}
/* Registration progress is one segmented control, not loose pills on a rule.
   Its track and segments intentionally inherit the selected control geometry. */
.cm-brand-style.cm-semantic-theme .step-nav {
  display:flex;
  gap:4px;
  margin-bottom:2rem;
  padding:4px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--highlight-color) 22%,var(--border));
  border-radius:var(--brand-radius-md);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent);
}
.cm-brand-style.cm-semantic-theme .step-nav button {
  flex:1 1 0;
  min-width:0;
  border:1px solid transparent;
  border-radius:var(--brand-radius-sm) !important;
  text-align:center;
}
.cm-brand-style.cm-semantic-theme.cm-style-control-shape-pill .step-nav,
.cm-brand-style.cm-semantic-theme.cm-style-control-shape-pill .step-nav button { border-radius:var(--brand-radius-pill) !important; }
.cm-brand-style.cm-semantic-theme.cm-style-control-shape-square .step-nav,
.cm-brand-style.cm-semantic-theme.cm-style-control-shape-square .step-nav button { border-radius:0 !important; }
.cm-brand-style.cm-semantic-theme .step-nav button.active {
  color:var(--text) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-elevated) 88%,var(--brand-color)),color-mix(in srgb,var(--surface) 92%,var(--brand-color))) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 44%,var(--border)) !important;
  box-shadow:inset 0 -2px 0 var(--highlight-color) !important;
}
/* Modal and portal filter tracks use the same geometry contract as their pills. */
.cm-brand-style.cm-semantic-theme .location-tabs {
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  width:max-content;
  max-width:100%;
  margin-bottom:18px;
  padding:4px;
  overflow-x:auto;
  border:1px solid color-mix(in srgb,var(--highlight-color) 22%,var(--border));
  border-radius:var(--brand-radius-md);
  background:color-mix(in srgb,var(--surface-muted) 90%,var(--brand-accent-color));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent);
}
.cm-brand-style.cm-semantic-theme .location-tabs button {
  flex:0 0 auto;
  border-radius:var(--brand-radius-sm) !important;
}
.cm-brand-style.cm-semantic-theme.cm-style-control-shape-pill .location-tabs,
.cm-brand-style.cm-semantic-theme.cm-style-control-shape-pill .location-tabs button { border-radius:var(--brand-radius-pill) !important; }
.cm-brand-style.cm-semantic-theme.cm-style-control-shape-square .location-tabs,
.cm-brand-style.cm-semantic-theme.cm-style-control-shape-square .location-tabs button { border-radius:0 !important; }
.cm-brand-style.cm-semantic-theme .location-tabs button.active {
  color:var(--text) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-elevated) 88%,var(--brand-color)),color-mix(in srgb,var(--surface) 92%,var(--brand-color))) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 44%,var(--border)) !important;
  box-shadow:inset 0 -2px 0 var(--highlight-color) !important;
  transform:none;
}
.cm-brand-style.cm-semantic-theme :is(.active,[aria-selected="true"],[aria-current="page"],[data-active="true"]):is(button,a,.tab,.chip,.pill,[class*="tab"],[class*="chip"],[class*="pill"]) {
  color:var(--text) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-elevated) 88%,var(--brand-color)),color-mix(in srgb,var(--surface) 92%,var(--brand-color))) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 44%,var(--border)) !important;
  box-shadow:inset 0 -2px 0 var(--highlight-color),0 6px 18px color-mix(in srgb,var(--brand-color) 16%,transparent) !important;
}
.cm-brand-style.cm-semantic-theme :is(table,.adm-table,.admin-table,.game-stats-table,.live-stat-table) {
  border-color:color-mix(in srgb,var(--highlight-color) 18%,var(--border));
  background:color-mix(in srgb,var(--surface) 96%,var(--brand-accent-color));
}
.cm-brand-style.cm-semantic-theme :is(th,thead td) {
  color:var(--text);
  background:linear-gradient(180deg,var(--highlight-soft),color-mix(in srgb,var(--surface) 96%,var(--highlight-color))) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 26%,var(--border)) !important;
}
.cm-brand-style.cm-semantic-theme :is(td,tr) { border-color:color-mix(in srgb,var(--highlight-color) 12%,var(--border)); }
.cm-brand-style.cm-semantic-theme :is(.badge,.chip,.pill,[class$="-badge"],[class*="-badge "],[class$="-chip"],[class*="-chip "],[class$="-pill"],[class*="-pill "]) {
  border-color:color-mix(in srgb,var(--highlight-color) 50%,var(--border));
  background:var(--highlight-soft);
}
.cm-brand-style.cm-semantic-theme :is(progress,[role="progressbar"]) { accent-color:var(--highlight-color); }
.cm-brand-style.cm-semantic-theme :is(input[type="checkbox"],input[type="radio"]) { accent-color:var(--highlight-color); }
.cm-brand-style.cm-semantic-theme :is(.portal-footer,footer) {
  border-color:color-mix(in srgb,var(--highlight-color) 22%,var(--border));
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(14px);
}
@media (max-width:480px) {
  .cm-brand-style.cm-semantic-theme .step-nav { overflow-x:auto; }
  .cm-brand-style.cm-semantic-theme .step-nav button { flex:1 0 auto; min-width:max-content; }
}

/* Operational portals stay structurally neutral while using the tenant's
   secondary color for clear selection, navigation, and secondary actions. */
.cm-backoffice-brand :is(.adm-btn--secondary,.btn-secondary) {
  color:var(--button-secondary-text);
  background:var(--button-secondary-bg);
  border-color:var(--button-secondary-border);
}
.cm-backoffice-brand :is(.adm-btn--secondary,.btn-secondary):hover { background:var(--button-secondary-bg-hover); border-color:var(--button-secondary-border); }
.cm-backoffice-brand :is(
  #assignment-location-tabs button.active-location-tab,
  #assignment-type-tabs button.active-location-tab,
  #assignment-mode-tabs button.active-location-tab,
  #submission-response-tabs button.active-location-tab,
  #submission-location-tabs button.active-location-tab,
  #org-responses-scope-tabs button.active-location-tab,
  .admin-nav-tabs button.active,
  .config-subtab.active,
  .branding-subtab.active,
  .stg-nav-btn.active,
  [role="tab"][aria-selected="true"]
) {
  color:var(--text) !important;
  background:var(--backoffice-selection-bg,var(--highlight-soft)) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 44%,var(--surface-border,rgba(255,255,255,.16))) !important;
  box-shadow:inset 0 -2px 0 var(--highlight-color),0 4px 14px color-mix(in srgb,var(--brand-color,var(--purple,#7B4FFF)) 14%,transparent) !important;
}
.cm-backoffice-brand :is(.adm-header__links a.is-current,.adm-header__links a[aria-current="page"],.ah-toc a.ah-toc-active) {
  color:var(--text) !important;
  background:var(--backoffice-selection-bg,var(--highlight-soft)) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 44%,var(--surface-border,rgba(255,255,255,.16))) !important;
  box-shadow:inset 0 -2px 0 var(--highlight-color) !important;
}

/* Preset personalities: the same brand palette, materially different art direction. */
.cm-style-preset-night-match :is([class$="-card"],[class*="-card "],[class$="-panel"],[class*="-panel "]) { border-color:color-mix(in srgb,var(--highlight-color) 34%,var(--border)); }
.cm-style-preset-night-match :is(h1,h2,.section-title,.hero-title) { text-shadow:0 0 28px color-mix(in srgb,var(--brand-color) 28%,transparent); }
.cm-style-preset-classic-club :is([class$="-card"],[class*="-card "]) { border-inline-width:3px; border-inline-color:color-mix(in srgb,var(--highlight-color) 44%,var(--border)); }
.cm-style-preset-bold-academy :is(h1,h2,.section-title,.hero-title) { text-transform:uppercase; line-height:.96; }
.cm-style-preset-bold-academy :is([class$="-card"],[class*="-card "]) { box-shadow:8px 8px 0 color-mix(in srgb,var(--brand-accent-color) 36%,transparent); }
.cm-style-preset-clean-professional :is([class$="-card"],[class*="-card "],[class$="-panel"],[class*="-panel "]) { background:color-mix(in srgb,var(--surface-elevated) 98%,var(--brand-color)); }
.cm-style-preset-youthful-energy :is([class$="-card"],[class*="-card "]) { border-color:color-mix(in srgb,var(--highlight-color) 40%,var(--border)); }
.cm-style-preset-minimal-light :is([class$="-card"],[class*="-card "],[class$="-panel"],[class*="-panel "]) { background:var(--surface); box-shadow:none; }

.cm-bp-document.cm-brand-style { font-family:var(--brand-font-body); }
.cm-bp-document.cm-brand-style .cm-bp-header { min-height:var(--brand-header-height); padding:calc(8px * var(--brand-space-scale)) calc(14px * var(--brand-space-scale)); }
.cm-bp-document.cm-style-header-layout-centered .cm-bp-header { flex-direction:column; justify-content:center; gap:5px; text-align:center; }
.cm-bp-document.cm-style-header-layout-centered .cm-bp-brand { justify-content:center; }
.cm-bp-document.cm-style-header-layout-compact .cm-bp-header { min-height:var(--brand-header-height); padding:5px 10px; }
.cm-bp-document.cm-brand-style .cm-bp-page { padding:calc(18px * var(--brand-space-scale)); }
.cm-bp-document.cm-brand-style :is(.cm-bp-page h2,.cm-bp-page h3,.cm-bp-brand) { font-family:var(--brand-font-heading); }
.cm-bp-document.cm-brand-style :is(.cm-bp-card,.cm-bp-hero,.cm-bp-empty,.cm-bp-social-card,.cm-bp-loading-preview) { border-radius:var(--brand-radius-md); }
.cm-bp-document.cm-brand-style :is(.cm-bp-card,.cm-bp-hero) { padding:calc(12px * var(--brand-space-scale)); }
.cm-bp-document.cm-brand-style :is(.cm-bp-btn,input,select) { border-radius:var(--brand-radius-sm); }
.cm-bp-document.cm-style-control-shape-pill :is(.cm-bp-btn,input,select) { border-radius:var(--brand-radius-pill); }
.cm-bp-document.cm-style-card-style-simple .cm-bp-card { border-color:transparent; box-shadow:none; }
.cm-bp-document.cm-style-card-style-bordered .cm-bp-card { border-width:2px; box-shadow:none; }
.cm-bp-document.cm-style-card-style-elevated .cm-bp-card { box-shadow:var(--brand-card-shadow); }
.cm-bp-document.cm-style-card-style-glass .cm-bp-card, .cm-bp-document.cm-style-surface-style-glass :is(.cm-bp-card,.cm-bp-hero) { background:color-mix(in srgb,var(--surface) 74%,transparent); backdrop-filter:blur(var(--brand-surface-blur)); box-shadow:var(--brand-card-shadow); }
.cm-bp-document.cm-style-button-style-gradient .cm-bp-btn--primary { background:linear-gradient(135deg,var(--button-primary-bg),var(--highlight-color)); box-shadow:var(--brand-button-shadow); }
.cm-bp-document.cm-style-button-style-outline-accent .cm-bp-btn--primary { color:var(--link); background:transparent; border-color:var(--button-primary-bg); }
.cm-bp-document.cm-style-animation-level-lively .cm-bp-badge { animation:cm-brand-breathe 1.8s ease-in-out infinite alternate; }
@keyframes cm-brand-breathe { to { transform:translateY(-1px) scale(1.025); } }

/* --- Fee display --- */
.stg-fee-card {
  padding: 16px; border-radius: var(--radius-lg);
  background: rgba(var(--purple-rgb), 0.06);
  border: 1px solid rgba(var(--purple-rgb), 0.18);
}

/* --- Waiver section toggles --- */
.stg-waiver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.stg-waiver-btn {
  padding: 10px 14px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--text); cursor: pointer;
  font-size: 0.82rem; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.2s;
}
.stg-waiver-btn:hover { border-color: rgba(255,255,255,0.2); }
.stg-waiver-btn.active {
  background: rgba(var(--mint-rgb),0.12);
  border-color: rgba(var(--mint-rgb),0.35);
  color: var(--mint);
}
.stg-waiver-btn .stg-waiver-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.2); flex-shrink: 0;
}
.stg-waiver-btn.active .stg-waiver-dot {
  background: var(--mint);
  box-shadow: 0 0 6px rgba(var(--mint-rgb),0.5);
}

/* --- Modular waiver packet editor --- */
.wp-sections { display: flex; flex-direction: column; gap: 10px; }
.wp-section {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.wp-section.is-off { opacity: 0.62; }
.wp-section__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
}
.wp-section__toggle {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.wp-section__toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.55); transition: transform 0.2s, background 0.2s;
}
.wp-section.is-on .wp-section__toggle {
  background: rgba(var(--mint-rgb),0.25); border-color: rgba(var(--mint-rgb),0.5);
}
.wp-section.is-on .wp-section__toggle::after { transform: translateX(16px); background: var(--mint); }
.wp-section__toggle[aria-disabled="true"] { cursor: not-allowed; opacity: 0.85; }
.wp-section__title { font-size: 0.9rem; font-weight: 600; color: var(--text); flex: 1; }
.wp-section__req {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--mint); background: rgba(var(--mint-rgb),0.12);
  padding: 2px 7px; border-radius: 999px;
}
.wp-section__caret { color: var(--muted); font-size: 0.75rem; transition: transform 0.2s; }
.wp-section.is-expanded .wp-section__caret { transform: rotate(90deg); }
.wp-section__body { padding: 0 14px 14px; display: none; }
.wp-section.is-expanded .wp-section__body { display: block; }
.wp-source-row { display: flex; gap: 8px; margin-bottom: 10px; }
.wp-source-btn {
  flex: 1; padding: 7px 10px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03);
  color: var(--muted); cursor: pointer; font-size: 0.78rem; font-weight: 600;
}
.wp-source-btn.active { background: rgba(var(--mint-rgb),0.12); border-color: rgba(var(--mint-rgb),0.35); color: var(--mint); }
.wp-section__custom { display: none; }
.wp-section.is-custom .wp-section__custom { display: block; }
.wp-section__custom textarea {
  width: 100%; resize: vertical; font-family: monospace; font-size: 0.8rem; min-height: 120px;
}
.wp-section__preview {
  white-space: pre-wrap; font-size: 0.8rem; line-height: 1.5; color: var(--muted);
  background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm); padding: 10px 12px; max-height: 220px; overflow: auto;
}
.wp-section.is-custom .wp-section__preview { display: none; }

/* --- Loading skeleton --- */
.stg-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: stg-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes stg-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .stg-nav { gap: 4px; padding: 3px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .stg-nav::-webkit-scrollbar { display: none; }
  .stg-nav-btn { padding: 8px 12px; font-size: 0.78rem; flex-shrink: 0; }
  .stg-card { padding: 16px; }
  .stg-grid-2 { grid-template-columns: 1fr; }
  .stg-grid-3 { grid-template-columns: 1fr 1fr; }
  .stg-asset { flex-direction: column; }
  .stg-img-preview, .stg-img-placeholder { max-width: 100px; }
  .stg-img-preview--wide, .stg-img-placeholder--wide { max-width: 180px; }
  .stg-save-bar--sticky { padding: 12px 16px; margin: 16px -16px -16px; }
  .stg-hdr { flex-direction: column; }
  .stg-presets { grid-template-columns: repeat(3, 1fr); }
  .stg-waiver-grid { grid-template-columns: 1fr; }
  .stg-color-row { flex-wrap: wrap; }
}

/* ── Admin: Refund button (moved from admin.html inline <style>) ── */
.btn-refund {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 500;
  min-width: 68px;
  min-height: 34px;
  flex-shrink: 0;
  background: rgba(var(--danger-rgb), 0.25);
  border: 1px solid rgba(var(--danger-rgb), 0.5);
  border-radius: var(--radius-sm);
  color: var(--danger-light);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-refund:hover {
  background: rgba(var(--danger-rgb), 0.4);
  border-color: rgba(var(--danger-rgb), 0.7);
}

/* ── Admin: Waiver evidence download button ── */
.btn-download-waiver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 500;
  min-width: 58px;
  min-height: 34px;
  flex-shrink: 0;
  background: rgba(var(--mint-rgb), 0.15);
  border: 1px solid rgba(var(--mint-rgb), 0.4);
  border-radius: var(--radius-sm);
  color: var(--mint, #58c79a);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-download-waiver:hover {
  background: rgba(var(--mint-rgb), 0.35);
  border-color: rgba(var(--mint-rgb), 0.7);
}
.btn-download-waiver:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ── Admin: Mobile nav toggle (moved from admin.html inline <style>) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  width: 52px; height: 52px; min-width: 52px; min-height: 52px;
  padding: 0;
  border-radius: 16px;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
}
.nav-toggle:hover { background: var(--header-link-hover-bg); border-color: var(--header-toggle-border); }
.nav-toggle span { width: 24px; height: 2.5px; background: var(--text); border-radius: 2px; transition: all 0.3s ease; display: block; flex: 0 0 auto; }
.nav-links-mobile { display: none; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(5,14,11,0.72); }
.nav-links-mobile a { color: var(--muted); font-weight: 600; font-size: var(--text-md); padding: 12px 16px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); text-decoration: none; transition: all var(--transition-base); }
.nav-links-mobile a:hover { color: var(--text); background: rgba(255,255,255,0.08); }
@media (max-width: 1100px) {
  header .nav-links,
  .adm-header__links { display: none !important; }
  .nav-toggle { display: flex; }
  .nav-links-mobile.active { display: flex; }
  .brand-text span:first-child { font-size: 1rem; }
  .brand-text span:last-child { font-size: 0.7rem; }
}

/* ── Focus visible ── */
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
body.cm-semantic-theme :focus-visible { outline-color: var(--focus-ring); }
body.cm-semantic-theme input:focus,
body.cm-semantic-theme textarea:focus,
body.cm-semantic-theme select:focus { border-color:var(--focus-ring); }
body.cm-semantic-theme select option:checked {
  background:var(--button-primary-bg) !important;
  color:var(--button-primary-text) !important;
}
:focus:not(:focus-visible) { outline: none; }

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM PUBLIC PHOTO GALLERY  (org-gallery.html + league-gallery.html)
   Branding/theme-aware via tokens. Shared by both portals.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Plain gallery heading ────────────────────────────────────────────── */
.gallery-heading {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}
.gallery-heading__logo {
  box-sizing: content-box;
  display: block;
  height: 92px; width: auto; max-width: min(240px, calc(100vw - 84px));
  border-radius: 16px; object-fit: contain;
  margin: 0 auto 1.25rem;
  padding: 12px 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
.gallery-heading h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .5rem; color: var(--text, #fff); line-height: 1.1;
}
.gallery-heading p { font-size: 1rem; color: var(--muted, rgba(255,255,255,.72)); margin: 0; }
.gallery-heading__stats {
  display: inline-flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  margin-top: 1.15rem;
}
.gallery-stat {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--surface-border, rgba(255,255,255,.12));
  color: var(--text, #fff); font-size: .82rem; font-weight: 700;
  backdrop-filter: blur(6px);
}
.gallery-stat i { color: var(--mint); font-size: 1rem; }
.gallery-stat span { color: var(--muted); font-weight: 600; }

/* ── Category filter chips (sticky segmented bar) ─────────────────────── */
.gallery-filters {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  padding: .9rem 1.5rem;
  max-width: var(--container); margin: 0 auto;
  background: linear-gradient(180deg, rgba(8,12,18,.55), rgba(8,12,18,0));
  backdrop-filter: blur(10px);
}
body.theme-light .gallery-filters { background: linear-gradient(180deg, rgba(248,250,252,.7), rgba(248,250,252,0)); }
.gallery-filter-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--surface-border, rgba(255,255,255,.16));
  background: rgba(255,255,255,.04);
  color: var(--muted, rgba(255,255,255,.8));
  font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gallery-filter-chip:hover { color: var(--text); border-color: rgba(var(--mint-rgb), .5); transform: translateY(-1px); }
.gallery-filter-chip.active {
  color: #06251a; border-color: transparent;
  background: linear-gradient(180deg, var(--mint, #34d399), var(--mint2, #16a34a));
  box-shadow: 0 4px 14px rgba(var(--mint-rgb), .35);
}
body.theme-light .gallery-filter-chip.active { color: #fff; }
.gallery-filter-chip__count {
  font-size: .72rem; font-weight: 800; line-height: 1;
  padding: .15rem .42rem; border-radius: 999px;
  background: rgba(255,255,255,.16); color: inherit;
}
.gallery-filter-chip.active .gallery-filter-chip__count { background: rgba(0,0,0,.16); }

/* ── Grid + premium cards ─────────────────────────────────────────────── */
.gallery-section { max-width: var(--container); margin: 0 auto; padding: .5rem 1.5rem 3.5rem; }
.gallery-category-heading {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em;
  margin: 2rem 0 .9rem; color: var(--text, rgba(255,255,255,.9));
}
.gallery-category-heading::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--surface-border, rgba(255,255,255,.14)), transparent);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.gallery-card {
  position: relative; border-radius: 16px; overflow: hidden;
  cursor: zoom-in; aspect-ratio: 4 / 3;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--surface-border, rgba(255,255,255,.1));
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  animation: gallery-card-in .45s ease both;
}
.gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--mint-rgb), .5);
  box-shadow: 0 18px 38px rgba(0,0,0,.32);
}
.gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gallery-card:hover img { transform: scale(1.07); }
.gallery-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55));
  opacity: 0; transition: opacity .22s ease; pointer-events: none;
}
.gallery-card:hover::after, .gallery-card:focus-visible::after { opacity: 1; }
.gallery-card__view {
  position: absolute; top: .65rem; right: .65rem; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1rem;
  border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px);
  opacity: 0; transform: scale(.8) translateY(-4px); transition: opacity .2s ease, transform .2s ease;
}
.gallery-card:hover .gallery-card__view, .gallery-card:focus-visible .gallery-card__view { opacity: 1; transform: scale(1) translateY(0); }
.gallery-card__caption {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  color: #fff; font-size: .85rem; font-weight: 600;
  padding: .85rem .8rem .7rem;
  opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease;
}
.gallery-card:hover .gallery-card__caption, .gallery-card:focus-visible .gallery-card__caption { opacity: 1; transform: translateY(0); }
@keyframes gallery-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Skeletons ────────────────────────────────────────────────────────── */
.gallery-skeletons { padding-top: 1rem; }
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.06) 75%);
  background-size: 200% 100%; animation: gallery-shimmer 1.4s infinite;
  border-radius: 16px; aspect-ratio: 4 / 3;
}
@keyframes gallery-shimmer { to { background-position: -200% 0; } }

/* ── Empty state ──────────────────────────────────────────────────────── */
.gallery-empty {
  text-align: center; padding: 4rem 2rem; color: var(--muted, rgba(255,255,255,.5));
  max-width: 460px; margin: 1rem auto; border-radius: 20px;
  border: 1px dashed var(--surface-border, rgba(255,255,255,.16));
  background: rgba(255,255,255,.02);
}
.gallery-empty i { font-size: 3rem; display: block; margin-bottom: .85rem; opacity: .45; }
.gallery-empty h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .4rem; color: var(--text, rgba(255,255,255,.78)); }
.gallery-empty p { font-size: .92rem; margin: 0; }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lb-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(130% 130% at 50% -10%, rgba(10,14,22,.92), rgba(2,4,8,.96));
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
.lb-overlay.open { display: flex; animation: lb-fade .22s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lb-inner { position: relative; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.lb-inner img {
  max-width: 100%; max-height: 78vh; border-radius: 14px; object-fit: contain; display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  animation: lb-zoom .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes lb-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.lb-caption { color: var(--text, rgba(255,255,255,.9)); font-size: .92rem; font-weight: 600; margin-top: .9rem; text-align: center; max-width: 60ch; }
.lb-counter {
  position: fixed; top: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 9001;
  padding: .35rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  backdrop-filter: blur(8px);
}
.lb-close, .lb-nav {
  position: fixed; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 9001;
  backdrop-filter: blur(8px); transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.lb-close:hover, .lb-nav:hover:not(:disabled) { background: rgba(255,255,255,.22); transform: scale(1.08); border-color: rgba(var(--mint-rgb), .6); }
.lb-close { top: 1rem; right: 1.25rem; width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.5rem; }
.lb-nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-nav:disabled { opacity: .25; cursor: default; }

@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .gallery-card__caption, .gallery-card__view { opacity: 1; transform: none; }
  .lb-nav { display: none; }
  .gallery-filters { gap: .4rem; padding: .75rem 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM EMAIL COMMUNICATIONS WORKSPACE  (#email-tab — org + league admin)
   Scoped layer that elevates the shared .ew-* styles. Higher specificity than
   the per-page single-class rules, so it wins regardless of source order.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Header band ──────────────────────────────────────────────────────── */
#email-tab .ew-header {
  position: relative;
  align-items: center;
  padding: 20px 22px;
  margin-bottom: 20px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(620px 220px at 0% 0%, rgba(var(--primary-rgb, var(--mint-rgb)), 0.14), transparent 70%),
    radial-gradient(520px 200px at 100% 0%, rgba(var(--purple-rgb), 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--surface-border, rgba(255,255,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#email-tab .ew-header-left h3 { display: flex; align-items: center; gap: 9px; font-size: 1.2rem; letter-spacing: -.01em; }
#email-tab .ew-header-left h3 i { color: var(--mint); }
#email-tab .ew-draft-indicator {
  border-radius: 999px; border: 1px solid var(--surface-border, rgba(255,255,255,.1));
  background: rgba(var(--mint-rgb), .08); color: var(--mint);
}

/* ── KPI cards ────────────────────────────────────────────────────────── */
#email-tab .ew-kpi-grid { gap: 12px; margin-bottom: 22px; }
#email-tab .ew-kpi-card {
  position: relative;
  padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--surface-border, rgba(255,255,255,.09));
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
#email-tab .ew-kpi-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--mint), var(--mint2)); opacity: .9;
}
#email-tab .ew-kpi-card.ew-kpi-purple::before { background: linear-gradient(180deg, var(--purple-soft), var(--purple)); }
#email-tab .ew-kpi-card.ew-kpi-gold::before { background: linear-gradient(180deg, #f6d365, #f0b429); }
#email-tab .ew-kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--mint-rgb), .3);
  box-shadow: 0 14px 32px rgba(0,0,0,.24);
}
#email-tab .ew-kpi-num { font-size: 1.7rem; }
#email-tab .ew-kpi-label { letter-spacing: .05em; }

/* ── Panels ───────────────────────────────────────────────────────────── */
#email-tab .ew-panel {
  padding: 20px 22px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--surface-border, rgba(255,255,255,.09));
  box-shadow: 0 6px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
#email-tab .ew-panel-title {
  font-size: .95rem; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--surface-border, rgba(255,255,255,.07));
}
#email-tab .ew-panel-title::before {
  content: ""; width: 4px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, var(--mint), var(--mint2)); flex: 0 0 auto;
}
#email-tab #email-compose-panel .ew-panel-title::before { background: linear-gradient(180deg, var(--purple-soft), var(--purple)); }
#email-tab .ew-panel-subtitle { margin: -8px 0 16px 0; }
#email-tab .ew-field-label { color: var(--text); font-weight: 700; letter-spacing: .01em; }

/* ── Preference / view pills (segmented) ──────────────────────────────── */
#email-tab .ew-pill {
  padding: 6px 14px; font-weight: 650;
  border-radius: 999px; border: 1px solid var(--surface-border, rgba(255,255,255,.12));
  background: rgba(255,255,255,.04); transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
#email-tab .ew-pill:hover { transform: translateY(-1px); }
#email-tab .ew-pill.active {
  color: var(--on-primary, #06251a);
  background: linear-gradient(180deg, var(--mint), var(--mint2));
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(var(--mint-rgb), .32);
}

/* ── Template tiles ───────────────────────────────────────────────────── */
#email-tab .ew-template-cards { gap: 10px; }
#email-tab .ew-template-card {
  padding: 14px 12px; border-radius: 14px;
  border: 1px solid var(--surface-border, rgba(255,255,255,.1));
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#email-tab .ew-template-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--purple-rgb), .4);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
#email-tab .ew-template-card.active {
  border-color: rgba(var(--purple-rgb), .6);
  background: linear-gradient(180deg, rgba(var(--purple-rgb), .16), rgba(var(--purple-rgb), .06));
  box-shadow: 0 4px 16px rgba(var(--purple-rgb), .22), inset 0 1px 0 rgba(255,255,255,.06);
}
#email-tab .ew-template-card .ew-tc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 auto 8px; font-size: 1.25rem;
  border-radius: 12px; background: rgba(var(--purple-rgb), .1);
  border: 1px solid rgba(var(--purple-rgb), .2);
}
#email-tab .ew-template-card.active .ew-tc-icon { background: rgba(var(--purple-rgb), .2); border-color: rgba(var(--purple-rgb), .4); }
#email-tab .ew-template-card .ew-tc-name { font-size: .82rem; }

/* ── Subject + editor + merge tags ────────────────────────────────────── */
#email-tab .ew-subject-input { border-radius: 12px; padding: 12px 16px; }
#email-tab .ew-editor-wrap { border-radius: 14px; }
#email-tab .ew-merge-tag { border-radius: 999px; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
#email-tab .ew-merge-tag:hover { transform: translateY(-1px); }

/* ── Recipient picker ─────────────────────────────────────────────────── */
#email-tab .ew-rcpt { border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
#email-tab .ew-rcpt-row { border-radius: 10px; }
#email-tab .ew-rcpt-row.is-selected { background: rgba(var(--mint-rgb), .12); }
#email-tab .ew-rcpt-list { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
#email-tab .ew-rcpt-list::-webkit-scrollbar { width: 8px; }
#email-tab .ew-rcpt-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* ── Review + preview ─────────────────────────────────────────────────── */
#email-tab .ew-review-panel {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(var(--purple-rgb), .07), rgba(255,255,255,.02));
  border: 1px solid rgba(var(--purple-rgb), .18);
}
#email-tab .ew-preview-frame { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }

/* ── Send bar ─────────────────────────────────────────────────────────── */
#email-tab .ew-send-bar {
  padding: 16px 18px; border-radius: 16px; margin-top: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--surface-border, rgba(255,255,255,.09));
}
#email-tab .ew-send-bar .btn-primary { box-shadow: 0 6px 18px rgba(var(--mint-rgb), .3); }

/* ── History table ────────────────────────────────────────────────────── */
#email-tab .ew-history-panel { border-radius: 18px; }
#email-tab .ew-history-table th { letter-spacing: .05em; }
#email-tab .ew-history-table tr:hover td { background: rgba(var(--primary-rgb, var(--mint-rgb)), .05); }
#email-tab .ew-history-badge { font-weight: 700; letter-spacing: .02em; }

/* ── Light-theme surface overrides ────────────────────────────────────── */
body.theme-light #email-tab .ew-header,
body.theme-light #email-tab .ew-kpi-card,
body.theme-light #email-tab .ew-panel,
body.theme-light #email-tab .ew-send-bar {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-color: var(--surface-border-strong, rgba(17,24,39,.12));
  box-shadow: 0 8px 22px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
body.theme-light #email-tab .ew-template-card { background: linear-gradient(180deg, #ffffff, #f8fafc); }
body.theme-light #email-tab .ew-template-card.active { background: linear-gradient(180deg, rgba(var(--purple-rgb), .1), rgba(var(--purple-rgb), .03)); }

@media (max-width: 600px) {
  #email-tab .ew-header { padding: 16px; }
  #email-tab .ew-panel { padding: 16px; }
}

/* Final semantic guardrails for operational workspaces. These rules live after
   feature-specific CSS so older modules cannot silently fall back to primary
   aliases for selection and focus states. */
.cm-backoffice-brand :is(
  .view-toggles button.active,
  .adm-view-toggle button.active,
  .view-toggle-btn.active,
  .adm-reg-density-toggle button.is-active,
  .adm-schedule-density-toggle button.is-active,
  .adm-pager button.active,
  .day-location-chip.is-active,
  .stg-waiver-btn.active,
  .wp-source-btn.active,
  .report-col-pill.active,
  .report-preset-card.active,
  .rev-period-btn.rev-active,
  .rev-chart-toggle button.rev-active,
  .rev-chart-toggle-btn.rev-active,
  .rev-breakdown-toggle button.rev-active,
  #email-tab .ew-pill.active,
  #email-tab .ew-template-card.active,
  #email-tab .ew-rcpt-row.is-selected
) {
  color:var(--text) !important;
  background:var(--backoffice-selection-bg,var(--highlight-soft)) !important;
  border-color:color-mix(in srgb,var(--highlight-color) 44%,var(--surface-border,rgba(255,255,255,.16))) !important;
  box-shadow:inset 0 -2px 0 var(--highlight-color),0 4px 14px color-mix(in srgb,var(--brand-color,var(--purple,#7B4FFF)) 14%,transparent) !important;
}
.cm-backoffice-brand :is(input,select,textarea,.input,.filter-select):focus {
  border-color:var(--highlight-color) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--highlight-color) 20%,transparent) !important;
}
.cm-backoffice-brand :focus-visible { outline-color:var(--highlight-color) !important; }

/* Segmented controls are one component. Bright secondary colors act as a slim
   selection indicator instead of turning each selected option into a neon pill. */
.cm-backoffice-brand :is(.adm-schedule-density-toggle,.adm-schedule-view-toggle) {
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--highlight-color) 22%,var(--surface-border,rgba(255,255,255,.14)));
  border-radius:12px;
  background:var(--field-bg,var(--surface-1,rgba(255,255,255,.05)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.cm-backoffice-brand :is(.adm-schedule-density-toggle,.adm-schedule-view-toggle) button {
  min-height:32px;
  margin:0 !important;
  padding:6px 14px !important;
  border:0 !important;
  border-radius:8px !important;
  color:var(--muted) !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
.cm-backoffice-brand :is(.adm-schedule-density-toggle button.is-active,.adm-schedule-view-toggle .view-toggle-btn.active) {
  color:var(--text) !important;
  background:var(--backoffice-selection-bg,var(--highlight-soft)) !important;
  box-shadow:inset 0 -2px 0 var(--highlight-color) !important;
}