:root {
  --bg: #07110d;
  --bg-soft: #0c1813;
  --panel: #101e18;
  --panel-2: #15271f;
  --line: rgba(221, 255, 232, .1);
  --surface: var(--panel);
  --surface-soft: var(--panel-2);
  --border: var(--line);
  --primary: var(--green);
  --text: #f2f7f3;
  --muted: #92a39a;
  --muted-strong: #71877b;
  --green: #35e878;
  --green-dark: #1eb95b;
  --blue: #57a8ff;
  --orange: #ffb158;
  --red: #ff6b6b;
  --radius: 20px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Field onboarding: the map is the source of coordinates; people never type them. */
.field-map-modal { width: min(58rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
.field-map-modal form { display: grid; gap: 1rem; }
.field-minimum-copy { margin: 0; color: var(--muted); }
.field-map-picker {
  display: grid;
  gap: .8rem;
  min-width: 0;
  padding: clamp(.75rem, 2vw, 1rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-2) 86%, transparent);
}
.field-map-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: end; }
.field-map-toolbar label { min-width: 0; }
.field-map-canvas {
  position: relative;
  width: 100%;
  min-height: clamp(18rem, 48vh, 30rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--panel-2), var(--bg-soft));
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.field-map-canvas.is-dragging { cursor: grabbing; }
.field-map-tile-pane { position: absolute; inset: 0; overflow: hidden; }
.field-map-tile { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; pointer-events: none; }
.field-map-marker {
  position: absolute; z-index: 3; width: 2rem; height: 2rem;
  transform: translate(-50%, -100%); border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  background: var(--green); box-shadow: 0 3px 9px rgb(0 0 0 / .35); rotate: -45deg;
  pointer-events: none;
}
.field-map-marker::after { content: ''; position: absolute; inset: .38rem; border-radius: 50%; background: #fff; }
.field-map-controls { position: absolute; z-index: 5; inset-block-start: .65rem; inset-inline-end: .65rem; display: grid; gap: .3rem; }
.field-map-controls button {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid rgb(0 0 0 / .25); border-radius: 8px; background: #fff; color: #111827;
  font: 800 1.35rem/1 sans-serif; box-shadow: 0 2px 8px rgb(0 0 0 / .2); cursor: pointer;
}
.field-map-attribution {
  position: absolute; z-index: 6; inset-inline-end: 0; inset-block-end: 0;
  padding: .2rem .35rem; background: rgb(255 255 255 / .9); color: #0f172a;
  font-size: .7rem; line-height: 1.2; text-decoration: underline;
}
.field-map-results { display: grid; gap: .35rem; padding: .45rem; border: 1px solid var(--line); border-radius: 12px; }
.field-map-results[hidden] { display: none; }
.field-map-result { width: 100%; padding: .6rem .7rem; border: 0; border-radius: 8px; background: var(--bg-soft); color: var(--text); text-align: start; cursor: pointer; }
.field-map-result:hover, .field-map-result:focus-visible { outline: 2px solid var(--green); }
.field-osm-link { color: var(--muted); font-size: .74rem; }
.field-map-selection {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: .65rem .8rem;
  border-radius: 12px;
  color: var(--muted);
  background: var(--bg-soft);
  overflow-wrap: anywhere;
}
.field-map-picker.has-selection .field-map-selection { color: var(--text); border-inline-start: 3px solid var(--green); }
.field-optional-settings { border-top: 1px solid var(--line); }
.field-optional-settings > summary { padding: .85rem 0; color: var(--muted); cursor: pointer; font-weight: 750; }
.field-optional-settings[open] > summary { color: var(--text); }
.venue-body > small { color: var(--muted); }
.venue-body > .button { align-self: start; margin-top: .35rem; }

@media (max-width: 640px) {
  .field-map-modal { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .field-map-toolbar { grid-template-columns: minmax(0, 1fr); }
  .field-map-toolbar .button { width: 100%; }
  .field-map-canvas { min-height: 20rem; }
}

/* Self-managed match operations */
.unattended-heading { align-items: end; }
.unattended-guide {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
  margin: 0 0 1.5rem; padding: .75rem; border: 1px solid var(--border);
  border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.unattended-guide span { display: flex; align-items: center; gap: .65rem; min-width: 0; color: var(--muted); font-size: .84rem; font-weight: 700; }
.unattended-guide b { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: 50%; color: #052e16; background: #86efac; }
.unattended-card {
  margin-bottom: 1.35rem; padding: clamp(1rem, 2vw, 1.55rem);
  border: 1px solid var(--border); border-radius: 24px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--team-a) 4%), var(--surface));
  box-shadow: 0 16px 46px rgba(0,0,0,.08);
}
.unattended-card-head, .unattended-ownership, .unattended-summary, .unattended-invite-response,
.unattended-manager-grid, .unattended-danger-zone { display: flex; align-items: center; gap: 1rem; }
.unattended-card-head { justify-content: space-between; }
.unattended-card-head h2 { margin: .2rem 0; }
.unattended-card-head p { margin: 0; color: var(--muted); }
.unattended-read-only {
  margin: 1rem 0;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border));
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}
.unattended-read-only strong { color: color-mix(in srgb, var(--blue) 80%, white); }
.unattended-status-block { display: grid; justify-items: end; gap: .35rem; }
.unattended-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 1.25rem 0; }
.unattended-summary span, .unattended-ownership span { display: grid; gap: .15rem; }
.unattended-summary span { padding: .85rem; border-radius: 16px; background: var(--surface-soft); }
.unattended-summary strong { font-size: 1.35rem; }
.unattended-summary small, .unattended-ownership small { color: var(--muted); }
.unattended-ownership { flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.unattended-ownership span { min-width: min(100%, 12rem); }
.unattended-ownership em { color: var(--muted); font-style: normal; font-weight: 500; }
.unattended-invite-response { flex-wrap: wrap; margin: 1rem 0; padding: 1rem; border-radius: 16px; background: color-mix(in srgb, #22c55e 12%, var(--surface)); }
.unattended-teams { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.2rem 0; }
.unattended-team { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-soft); }
.unattended-team h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.unattended-team h3 i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--team-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--team-a) 18%, transparent); }
.unattended-team-b h3 i { background: var(--team-b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--team-b) 18%, transparent); }
.unattended-team h3 small { margin-left: auto; }
.unattended-player { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.unattended-player > span:last-child { display: grid; min-width: 0; }
.unattended-player small { color: var(--muted); overflow-wrap: anywhere; }
.unattended-reserves, .unattended-lists, .unattended-probability { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.unattended-reserves { margin: -.4rem 0 1rem; }
.unattended-reserves span, .unattended-lists span { padding: .35rem .6rem; border-radius: 999px; background: var(--surface-soft); }
.unattended-probability { justify-content: center; margin: 1rem 0; padding: .8rem; border-radius: 16px; background: var(--surface-soft); }
.unattended-probability span { display: grid; min-width: 7rem; text-align: center; }
.unattended-probability b { font-size: 1.25rem; }
.unattended-live-score { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1rem 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 18px; background: var(--surface-soft); }
.unattended-live-score span { display: grid; min-width: 5rem; text-align: center; }
.unattended-live-score strong { font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1; font-variant-numeric: tabular-nums; }
.unattended-live-score small { color: var(--muted); }
.unattended-live-score b { font-size: 1.6rem; }
.unattended-live-score em { padding: .3rem .55rem; border-radius: 999px; color: #fff; background: #dc2626; font-size: .75rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.unattended-manager { margin-top: 1rem; border-top: 1px solid var(--border); }
.unattended-manager > summary, .unattended-config-editor > summary { padding: 1rem 0; cursor: pointer; font-weight: 800; }
.unattended-manager-grid { flex-wrap: wrap; align-items: end; }
.unattended-manager-grid form { display: flex; flex: 1 1 16rem; flex-wrap: wrap; align-items: end; gap: .55rem; padding: .75rem; border-radius: 14px; background: var(--surface-soft); }
.unattended-manager-grid label { flex: 1 1 9rem; }
.unattended-lists { margin-top: 1rem; align-items: start; }
.unattended-lists > div { display: flex; flex: 1 1 15rem; flex-wrap: wrap; gap: .45rem; }
.unattended-lists strong { flex-basis: 100%; }
.unattended-audit { margin-top: 1rem; }
.unattended-audit p { display: grid; grid-template-columns: minmax(9rem,.7fr) 1fr 1fr; gap: .6rem; margin: 0; padding: .55rem 0; border-top: 1px solid var(--border); }
.unattended-audit time, .unattended-audit span { color: var(--muted); }
.unattended-config-editor { margin-bottom: 1rem; padding: 0 .85rem .85rem; border-radius: 16px; background: var(--surface-soft); }
.unattended-danger-zone { justify-content: space-between; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed color-mix(in srgb, #ef4444 45%, var(--border)); }
.status-teamsDraft { color: #92400e; background: #fef3c7; }
.status-published { color: #14532d; background: #dcfce7; }
.match-team-swap { margin: .8rem 0; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.match-team-swap summary { cursor: pointer; font-weight: 800; }
.match-team-swap form { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; padding-top: .75rem; }
.match-team-swap label { flex: 1 1 10rem; }
.match-roster-panel { margin: .8rem 0; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.match-roster-panel > summary, .match-team-editor > summary { cursor: pointer; font-weight: 800; }
.match-roster-form { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; padding-top: .8rem; }
.match-roster-form label { flex: 1 1 13rem; }
.match-roster-form label > span, .match-team-assignment > span { display: block; margin-bottom: .3rem; font-weight: 700; }
.match-roster-entries { display: grid; gap: .45rem; margin-top: .85rem; }
.match-roster-entry, .match-team-assignment { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 12px; }
.match-roster-entry > span { display: grid; gap: .15rem; }
.emergency-player-badge { display: block; color: #f59e0b; font-size: .72rem; font-weight: 800; }
.emergency-roster-readonly { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent); border-radius: .85rem; }
.emergency-roster-readonly ul { display: grid; gap: .6rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.match-team-editor { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.match-team-editor form { display: grid; gap: .55rem; padding-top: .75rem; }
.match-team-assignment select { width: min(12rem, 48%); }

@media (max-width: 760px) {
  .unattended-guide { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .unattended-card-head { align-items: start; }
  .unattended-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .unattended-teams { grid-template-columns: 1fr; }
  .unattended-audit p { grid-template-columns: 1fr; gap: .15rem; }
}
@media (max-width: 480px) {
  .unattended-guide { grid-template-columns: 1fr; }
  .unattended-card { border-radius: 18px; }
  .unattended-card-head { display: grid; }
  .unattended-status-block { justify-items: start; }
  .unattended-manager-grid form { display: grid; grid-template-columns: 1fr; }
}

/* Application shell v2: compact navigation and a content-first canvas. */
.app-shell {
  min-width: 320px;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: clamp(13rem, 15vw, 14.5rem) minmax(0, 1fr);
  align-items: start;
  overflow-x: clip;
}
.sidebar {
  position: sticky;
  inset-block-start: 0;
  width: auto;
  min-width: 0;
  height: auto;
  max-height: 100dvh;
  padding: 1rem .75rem .75rem;
  overflow: hidden auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sidebar .brand { min-width: 0; padding: .25rem; }
.sidebar .brand-mark { width: 2.4rem; height: 2.4rem; flex: 0 0 2.4rem; border-radius: .75rem; font-size: 1.1rem; }
.sidebar .brand-copy { min-width: 0; }
.sidebar .brand-copy strong { font-size: 1.05rem; }
.sidebar .brand-copy small { overflow-wrap: anywhere; font-size: .56rem; }
.sidebar-close { display: none; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--bg-soft); cursor: pointer; }
.main-nav { display: grid; gap: .2rem; margin: 1.1rem 0 auto; }
.main-nav > a, .nav-group a {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  min-height: 2.5rem;
  padding: .42rem .55rem;
  border-radius: .72rem;
  line-height: 1.25;
}
.main-nav .nav-glyph {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: .55rem;
  color: #b8c9c0;
  background: rgba(255,255,255,.045);
  font: 800 .68rem/1 ui-monospace, monospace;
}
.main-nav .nav-label { min-width: 0; color: inherit; font-size: .78rem; overflow-wrap: anywhere; }
.main-nav a.nav-priority { margin-bottom: .35rem; color: #06130b; background: var(--green); }
.main-nav a.nav-priority .nav-glyph, .main-nav a.is-active .nav-glyph { color: #06130b; background: rgba(6,19,11,.12); }
.nav-group { min-width: 0; margin-top: .3rem; border-top: 1px solid var(--line); }
.nav-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.25rem;
  padding: .55rem;
  color: #a9bbb1;
  cursor: pointer;
  list-style: none;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary span:last-child { transition: rotate .2s ease; }
.nav-group[open] > summary span:last-child { rotate: 45deg; }
.nav-group > div { display: grid; gap: .12rem; padding-bottom: .25rem; }
.sidebar-footer { margin-top: 1rem; padding: .7rem; }
.main-content { width: 100%; min-width: 0; min-height: 100dvh; overflow: clip visible; }
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 24;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: .65rem clamp(1rem, 2.5vw, 2rem);
}
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; min-width: 0; }
.topbar-play { min-height: 2.5rem; padding-inline: .9rem; font-size: .76rem; white-space: nowrap; }
.user-menu { position: relative; min-width: 0; }
.user-menu > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .25rem;
  border-radius: .8rem;
  cursor: pointer;
  list-style: none;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: rgba(255,255,255,.045); }
.user-menu-copy { min-width: 0; max-width: 10rem; }
.user-menu-copy strong, .user-menu-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-chevron { color: var(--muted); }
.user-popover {
  position: absolute;
  inset: calc(100% + .5rem) 0 auto auto;
  z-index: 60;
  width: min(19rem, calc(100vw - 2rem));
  display: grid;
  gap: .5rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #0d1b15;
  box-shadow: 0 1.25rem 3rem rgba(0,0,0,.38);
}
.user-popover-link { display: block; width: 100%; padding: .7rem .75rem; border: 0; border-radius: .65rem; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.user-popover-link:hover, .user-popover-link:focus-visible { background: rgba(255,255,255,.06); }
.user-popover-link.danger { color: var(--red); }
.user-popover .compact-locale-form { display: grid; grid-template-columns: 1fr auto; gap: .45rem; padding: .65rem .75rem; border-block: 1px solid var(--line); }
.user-popover .compact-locale-form label { grid-column: 1 / -1; color: var(--muted); font-size: .7rem; font-weight: 750; }
.user-popover .compact-locale-form select { width: 100%; max-width: none; }
.user-popover .ui-framework-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem;
  padding: .75rem;
  border-bottom: 1px solid var(--line);
}
.user-popover .ui-framework-form label,
.user-popover .ui-framework-form small { grid-column: 1 / -1; }
.user-popover .ui-framework-form label { color: var(--text); font-size: .75rem; font-weight: 800; }
.user-popover .ui-framework-form small { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.user-popover .ui-framework-form select { width: 100%; min-width: 0; max-width: none; }
.page-content { width: min(92rem, 100%); max-width: 100%; margin-inline: auto; padding: clamp(1rem, 2.5vw, 2.25rem); }
.page-content > * { max-width: 100%; }
.page-heading { min-width: 0; }
.page-heading > * { min-width: 0; }
.page-heading h1, .page-heading p { overflow-wrap: anywhere; }

@media (max-width: 1180px) and (min-width: 961px) {
  .app-shell { grid-template-columns: 12.25rem minmax(0, 1fr); }
  .sidebar { padding-inline: .55rem; }
  .main-nav > a, .nav-group a { grid-template-columns: 1.65rem minmax(0,1fr); gap: .4rem; padding-inline: .4rem; }
  .main-nav .nav-glyph { width: 1.65rem; height: 1.65rem; }
  .main-nav .nav-label { font-size: .72rem; }
  .sidebar-footer small { display: none; }
}

@media (max-width: 960px) {
  .app-shell { display: block; min-height: 100dvh; }
  .app-shell.nav-open { overflow: hidden; }
  .app-shell.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgba(1,8,5,.68); backdrop-filter: blur(2px); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(19rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    height: 100dvh;
    max-height: none;
    translate: -105% 0;
    padding: 1rem;
    transition: translate .22s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.is-open { translate: 0 0; }
  .sidebar-close, .mobile-menu { display: grid; place-items: center; }
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; min-height: 4.25rem; padding-inline: .85rem; }
  .topbar-context { min-width: 0; }
  .topbar-context strong, .topbar-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-play { display: none; }
  .user-menu-copy { display: none; }
  .user-menu > summary { grid-template-columns: auto auto; }
}

@media (max-width: 540px) {
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; gap: .45rem; }
  .topbar-context span { display: none; }
  .topbar-context strong { margin: 0; font-size: .76rem; }
  .page-content { padding: .85rem; }
  .page-heading { gap: 1rem; margin-bottom: 1.25rem; }
  .page-heading h1 { font-size: clamp(1.9rem, 11vw, 2.55rem); }
  .user-popover { position: fixed; inset: 4.5rem .75rem auto .75rem; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-group > summary span:last-child { transition: none; }
}

/* Superadministrator control centre */
.admin-console { display: grid; gap: 1.25rem; min-width: 0; }
.admin-console-heading { margin-bottom: 0; }
.admin-console-heading .text-link { display: block; width: fit-content; margin-bottom: .8rem; color: var(--green); font-size: .78rem; font-weight: 800; }
.admin-console-access, .admin-result-count {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  padding: .65rem .85rem; border: 1px solid rgba(53,232,120,.22);
  border-radius: 999px; color: #b8eacb; background: rgba(53,232,120,.07);
  font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.admin-console-access i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .3rem rgba(53,232,120,.1); }
.admin-resource-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .85rem; }
.admin-console-tools { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.admin-console-tools .button { min-height: 2.8rem; }
.admin-resource-card {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: .8rem;
  min-width: 0; min-height: 6.5rem; padding: 1rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: 1.1rem;
  background: linear-gradient(145deg, rgba(22,42,32,.96), rgba(10,23,17,.96));
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.1); transition: border-color .18s ease, transform .18s ease;
}
.admin-resource-card:hover { border-color: rgba(53,232,120,.38); transform: translateY(-2px); }
.admin-resource-glyph { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .85rem; color: #072011; background: var(--green); font-weight: 950; }
.admin-resource-card > span:nth-child(2) { min-width: 0; }
.admin-resource-card small, .admin-resource-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-resource-card small { margin-bottom: .28rem; color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-resource-card strong { color: var(--text); font-size: .92rem; }
.admin-resource-card b { color: var(--green); font-size: clamp(1.35rem, 2vw, 1.8rem); }
.admin-resource-card i { color: var(--green); font-style: normal; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.admin-kpi { min-height: 7rem; padding: 1rem; }
.admin-kpi strong { margin-top: .75rem; font-size: clamp(1.35rem,2.2vw,2rem); overflow-wrap: anywhere; }
.admin-filter-bar { display: grid; grid-template-columns: minmax(15rem,1fr) minmax(10rem,.35fr) auto auto; align-items: end; gap: .75rem; padding: 1rem; }
.admin-filter-bar label, .admin-command label { display: grid; gap: .4rem; min-width: 0; color: var(--muted); font-size: .72rem; font-weight: 750; }
.admin-filter-bar :where(input,select), .admin-command :where(input,select,textarea) { width: 100%; min-width: 0; }
.admin-data-table td { vertical-align: middle; max-width: 22rem; overflow-wrap: anywhere; }
.admin-data-table td > strong, .admin-data-table td > small { display: block; }
.admin-data-table td > small { margin-top: .25rem; color: var(--muted); }
.admin-data-table td:last-child { width: 1%; white-space: nowrap; }
.admin-detail-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(18rem,.65fr); gap: 1rem; align-items: start; }
.admin-record-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin: 0; }
.admin-record-grid > div { min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,255,255,.018); }
.admin-record-grid dt { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-record-grid dd { margin: .35rem 0 0; color: var(--text); font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }
.admin-command-panel { position: sticky; top: 5.5rem; max-height: calc(100dvh - 7rem); overflow-y: auto; }
.admin-command-panel > p { color: var(--muted); font-size: .75rem; line-height: 1.55; }
.admin-command { display: grid; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.admin-command textarea { min-height: 5rem; resize: vertical; }
.admin-command-danger { border-color: rgba(255,107,107,.24); }
.admin-confirm { grid-template-columns: auto minmax(0,1fr); align-items: start; }
.admin-confirm input { width: 1rem; height: 1rem; margin-top: .05rem; accent-color: var(--green); }
.button-danger { color: #fff; border-color: rgba(255,107,107,.34); background: #b63d47; }
.button-danger:hover { background: #cc4652; }
.admin-related-panel, .admin-audit-panel, .admin-inventory-panel { min-width: 0; }

@media (max-width: 1280px) {
  .admin-resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .admin-record-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .admin-filter-bar, .admin-detail-grid { grid-template-columns: 1fr; }
  .admin-command-panel { position: static; max-height: none; }
  .admin-filter-bar .button { width: 100%; }
}
@media (max-width: 560px) {
  .admin-resource-grid, .admin-kpi-grid, .admin-record-grid { grid-template-columns: 1fr; }
  .admin-resource-card { grid-template-columns: auto minmax(0,1fr) auto; }
  .admin-resource-card > i { display: none; }
  .admin-console-access, .admin-result-count { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-resource-card { transition: none; }
}

/* Phase 3 · Financial projection. Provider pages always open after a
   server-side POST; no checkout URL is accepted from browser input. */
.payment-heading { align-items: end; }
.payment-security-notice { display: grid; gap: .25rem; margin-bottom: 1.25rem; }
.payment-account-grid,
.payment-list { display: grid; gap: .85rem; }
.payment-account-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.payment-account,
.payment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--border, #dce5e0);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface, #fff) 94%, #22c55e 6%);
}
.payment-account { grid-template-columns: minmax(0, 1fr) auto; }
.payment-account strong,
.payment-row strong { display: block; }
.payment-account small,
.payment-row small { display: block; margin-top: .25rem; color: var(--muted, #63716a); }
.payment-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.payment-actions form,
.payment-row form { margin: 0; }
.payment-authority-note { color: var(--muted, #63716a); font-size: .9rem; line-height: 1.6; }
.payment-status-paid,
.payment-status-refunded { color: #08733f; background: #dff8ea; }
.payment-status-disputed,
.payment-status-chargeback,
.payment-status-failed { color: #9f1d2e; background: #ffe8eb; }
.payment-status-checkout_pending,
.payment-status-processing,
.payment-status-refund_pending { color: #8a5600; background: #fff2cf; }

@media (max-width: 720px) {
    .payment-row,
    .payment-account { grid-template-columns: 1fr; align-items: start; }
    .payment-actions { justify-content: flex-start; }
    .payment-row .button { width: 100%; }
}

/* Group and match chat */
.chat-hub-section { margin-top: 28px; }
.chat-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.chat-hub-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 88px; padding: 16px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(145deg, rgba(53, 232, 120, .07), var(--panel)); transition: .2s ease;
}
.chat-hub-card:hover { transform: translateY(-2px); border-color: rgba(53, 232, 120, .42); }
.chat-hub-card small, .chat-hub-card strong { display: block; }
.chat-hub-card small, .chat-hub-card em { color: var(--muted); font-size: 11px; font-style: normal; }
.chat-hub-card strong { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-hub-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--panel-2); color: var(--green); font-weight: 900; }
.chat-unread-badge { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: var(--green); color: #06130b; font-size: 11px; }
.chat-entry-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; width: fit-content; }
.chat-heading .text-link { display: inline-block; margin-bottom: 18px; color: var(--green); font-weight: 700; }
.chat-panel { max-width: 920px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.chat-live-status { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 34px; padding: 7px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.chat-live-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(53, 232, 120, .12); }
.chat-live-status.is-error span { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 177, 88, .12); }
.chat-messages { min-height: 320px; max-height: min(62vh, 680px); overflow-y: auto; padding: 24px; scroll-behavior: smooth; }
.chat-day-separator { display: flex; align-items: center; gap: 12px; width: 100%; margin: 20px 0 16px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chat-day-separator::before, .chat-day-separator::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.chat-day-separator span { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); }
.chat-message { width: min(78%, 680px); margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 6px 16px 16px 16px; background: var(--panel-2); }
.chat-message.is-own { margin-left: auto; border-radius: 16px 6px 16px 16px; background: rgba(53, 232, 120, .13); border-color: rgba(53, 232, 120, .24); }
.chat-message.is-deleted { opacity: .68; background: transparent; border-style: dashed; }
.chat-message header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.chat-message header strong { color: var(--green); font-size: 12px; }
.chat-message header time, .chat-message small { color: var(--muted); font-size: 10px; }
.chat-message p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-reply-preview { display: grid; gap: 3px; margin: 0 0 9px; padding: 8px 10px; border-left: 3px solid var(--green); border-radius: 0 8px 8px 0; background: rgba(0, 0, 0, .18); color: var(--muted); font-size: 11px; }
.chat-reply-preview strong { color: var(--text); }
.chat-compose-reply { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-left: 3px solid var(--green); border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 11px; }
.chat-heading-actions { display: grid; justify-items: end; gap: 8px; }
.chat-heading-actions form { display: flex; align-items: end; gap: 8px; }
.chat-heading-actions label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.chat-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.chat-actions details, .chat-moderation { font-size: 11px; }
.chat-actions summary, .chat-moderation summary { cursor: pointer; color: var(--muted); }
.chat-actions details[open], .chat-moderation[open] { margin-top: 10px; width: 100%; }
.chat-actions form, .chat-moderation form { display: grid; gap: 8px; margin-top: 8px; }
.chat-actions textarea { min-height: 90px; }
.text-button.danger { color: var(--red); }
.chat-empty { display: grid; place-items: center; min-height: 260px; text-align: center; color: var(--muted); }
.chat-empty strong { color: var(--text); }
.chat-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); }
.chat-pagination span { color: var(--muted); font-size: 12px; }
.vacancy-pagination { margin-top: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.vacancy-pagination > div { display: flex; flex-wrap: wrap; gap: 10px; }
.chat-compose { display: grid; gap: 10px; padding: 18px 22px 22px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.chat-compose label { font-size: 12px; font-weight: 750; }
.chat-compose textarea { width: 100%; min-height: 86px; max-height: 220px; resize: vertical; }
.chat-compose > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-compose small { color: var(--muted); }
.chat-compose[aria-busy="true"] button[type="submit"] { cursor: wait; opacity: .7; }
@media (max-width: 680px) {
  .chat-hub-grid { grid-template-columns: 1fr; }
  .chat-hub-card { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .chat-messages { min-height: 48vh; max-height: 60vh; padding: 14px 10px; }
  .chat-message { width: 90%; }
  .chat-pagination { flex-wrap: wrap; justify-content: center; }
  .chat-compose { padding: 14px 12px; }
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 80% -10%, rgba(53, 232, 120, .12), transparent 34%), var(--bg); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
:focus-visible { outline: 3px solid rgba(87, 168, 255, .9); outline-offset: 3px; }
::selection { color: #06130b; background: var(--green); }

.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 28px 20px; border-right: 1px solid var(--line);
  background: rgba(7, 17, 13, .88); backdrop-filter: blur(22px); z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
  background: var(--green); color: #06130b; font-weight: 950; font-size: 22px;
  box-shadow: 0 10px 28px rgba(53, 232, 120, .22);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 20px; letter-spacing: -.5px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.main-nav { display: grid; gap: 6px; margin: 52px 0 auto; }
.main-nav a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px;
  color: var(--muted); font-weight: 650; transition: .2s ease;
}
.main-nav a span { font: 700 10px/1 ui-monospace, monospace; color: var(--muted-strong); }
.main-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.main-nav a.is-active { color: #07110d; background: var(--green); }
.main-nav a.is-active span { color: rgba(7, 17, 13, .55); }
.sidebar-footer { display: flex; gap: 10px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }
.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer strong { font-size: 12px; }.sidebar-footer small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.presence-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(53, 232, 120, .12); }

.main-content { min-width: 0; }
.topbar {
  height: 88px; display: flex; justify-content: space-between; align-items: center;
  padding: 0 38px; border-bottom: 1px solid var(--line); background: rgba(7, 17, 13, .62); backdrop-filter: blur(20px);
}
.topbar-context span, .topbar-context strong { display: block; }
.topbar-context span { color: var(--green); font-size: 10px; letter-spacing: .12em; }
.topbar-context strong { margin-top: 4px; font-size: 14px; }
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-menu strong, .user-menu small { display: block; }
.user-menu strong { font-size: 13px; }.user-menu small { color: var(--muted); font-size: 10px; text-transform: capitalize; }
.compact-locale-form { display: flex; align-items: center; gap: 4px; }
.compact-locale-form select {
  max-width: 125px; min-height: 34px; padding: 0 28px 0 9px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: 11px;
}
.compact-locale-form .text-button { margin-left: 0; }
.avatar, .player-avatar {
  display: grid; place-items: center; border-radius: 50%; color: #07110d;
  background: linear-gradient(145deg, #c5f9d8, var(--green)); font-weight: 900;
}
.avatar { width: 38px; height: 38px; }
.text-button { margin-left: 8px; padding: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.mobile-menu { display: none; border: 1px solid var(--line); border-radius: 10px; background: transparent; padding: 8px 11px; }

.page-content { width: min(1460px, 100%); margin: auto; padding: 38px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.page-heading h1 { margin: 5px 0 6px; font-size: clamp(32px, 4vw, 52px); letter-spacing: -.055em; line-height: 1; }
.page-heading p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.button {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; justify-content: center; align-items: center; min-height: 44px;
  padding: 0 18px; border: 1px solid transparent; border-radius: 12px; font-weight: 800; cursor: pointer;
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.button::after {
  content: ""; position: absolute; z-index: -1; inset: -35% auto -35% -55%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-18deg); transition: left .45s ease; pointer-events: none;
}
.button:hover::after { left: 125%; }
.button:disabled { opacity: .4; pointer-events: none; }
.button-primary { background: var(--green); color: #06130b; }
.button-secondary { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.button-wide { width: 100%; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card, .panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(21, 39, 31, .88), rgba(12, 24, 19, .92));
  box-shadow: 0 15px 50px rgba(0, 0, 0, .08);
}
.metric-card { position: relative; overflow: hidden; min-height: 150px; padding: 24px; }
.metric-card::after {
  content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%;
  right: -28px; bottom: -46px; background: var(--metric-color, var(--green)); filter: blur(4px); opacity: .09;
}
.metric-card .metric-label, .metric-card strong, .metric-card small { display: block; }
.metric-card .metric-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-card > strong { margin: 15px 0 8px; font-size: 36px; letter-spacing: -.05em; }
.metric-card small { color: #657a6e; }
.metric-players { --metric-color: var(--green); }.metric-matches { --metric-color: var(--blue); }
.metric-groups { --metric-color: var(--orange); }.metric-fields { --metric-color: #bf8cff; }

.news-section {
  margin-top: 16px; padding: 24px; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--radius); background: linear-gradient(145deg, rgba(21, 39, 31, .88), rgba(12, 24, 19, .92));
}
.news-heading { margin-bottom: 16px; }
.news-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.news-controls { display: flex; align-items: center; gap: 10px; }
.news-controls button {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,.04); color: var(--text); cursor: pointer;
}
.news-controls span { min-width: 44px; color: var(--muted); text-align: center; font-size: 11px; }
.news-controls strong { color: var(--text); }
.news-track { min-height: 220px; }
.news-card {
  position: relative; display: block; width: 100%; min-height: 220px; padding: 22px; overflow: hidden; border-radius: 18px;
  color: #fff; text-decoration: none; background: linear-gradient(135deg, #86312e, #9e5710); box-shadow: 0 20px 45px rgba(0,0,0,.2);
}
.news-card[hidden] { display: none; }
.news-card::after {
  content: "⚽"; position: absolute; right: -14px; bottom: -40px; opacity: .09;
  font-size: 150px; transform: rotate(-12deg); pointer-events: none;
}
.news-country-it { background: linear-gradient(135deg, #146b46, #0b3d5c); }
.news-country-pt { background: linear-gradient(135deg, #136b49, #8e2c2c); }
.news-country-fr { background: linear-gradient(135deg, #164b88, #5d2b72); }
.news-country-de { background: linear-gradient(135deg, #343434, #8b5a12); }
.news-card-top, .news-card-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.news-card-top span { padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.2); font-size: 10px; font-weight: 900; }
.news-card-top strong { color: #fff; font-size: 11px; letter-spacing: .12em; }
.news-card h3 { position: relative; z-index: 1; max-width: 920px; margin: 42px 0; font-size: clamp(22px, 3vw, 36px); line-height: 1.08; letter-spacing: -.035em; }
.news-card-footer span { color: #fff; font-size: 11px; }
.news-card-footer strong { font-size: 11px; }
.news-dots { display: flex; justify-content: center; gap: 6px; margin-top: 13px; }
.news-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: .2s; }
.news-dots i.is-active { width: 22px; background: var(--green); }
.news-empty { min-height: 150px; display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--muted); }
.news-empty > span { font-size: 34px; }.news-empty strong, .news-empty p { display: block; }.news-empty p { margin: 5px 0 0; font-size: 12px; }

.content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr); gap: 16px; margin-top: 16px; }
.dashboard-agenda-grid { grid-template-columns: minmax(0, 1fr); }
.panel { padding: 24px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-header h2, .panel h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.03em; }
.panel-header > a, .panel-header > span { color: var(--muted); font-size: 12px; }
.match-list { display: grid; }
.match-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.date-block { width: 52px; height: 56px; display: grid; place-content: center; text-align: center; border-radius: 12px; background: var(--panel-2); }
.date-block strong { font-size: 19px; line-height: 1; }.date-block span { margin-top: 4px; color: var(--green); font-size: 9px; letter-spacing: .12em; }
.match-main strong, .match-main span { display: block; }.match-main span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.format-pill, .tag-row span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: #cce0d4; font-size: 10px; font-weight: 800; }
.status { display: inline-flex; align-items: center; width: fit-content; padding: 6px 9px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.05); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.status-open, .status-success, .status-completed { color: var(--green); background: rgba(53, 232, 120, .1); }
.status-failed, .status-cancelled { color: var(--red); background: rgba(255, 107, 107, .1); }
.search-bar { display: flex; gap: 8px; max-width: 720px; margin-bottom: 22px; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 11px; outline: 0;
  background: #0a1711; color: var(--text); padding: 12px 13px; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: rgba(53, 232, 120, .7); box-shadow: 0 0 0 3px rgba(53, 232, 120, .09); }
input::placeholder { color: #53675c; }
.search-bar input { min-height: 48px; }.search-bar button { border: 0; border-radius: 11px; background: var(--panel-2); color: var(--text); padding: 0 18px; cursor: pointer; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.player-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.player-card[hidden] { display: none; }
.player-avatar { width: 48px; height: 48px; font-size: 17px; }
.player-info strong, .player-info span, .player-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-info span { color: var(--green); font-size: 11px; }.player-info small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.rating-ring { width: 54px; height: 54px; display: grid; place-content: center; text-align: center; border: 3px solid rgba(53, 232, 120, .18); border-top-color: var(--green); border-radius: 50%; }
.rating-ring strong { font-size: 15px; }.rating-ring small { color: var(--muted); font-size: 7px; text-transform: uppercase; }

.venue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.venue-card { display: grid; grid-template-columns: 200px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.venue-pitch { position: relative; min-height: 210px; background: repeating-linear-gradient(90deg, #174c2f 0 32px, #1a5635 32px 64px); }
.venue-pitch::before { content: ""; position: absolute; inset: 18px; border: 2px solid rgba(255,255,255,.32); }
.venue-pitch span { position: absolute; inset: 18px 50%; width: 2px; background: rgba(255,255,255,.32); }
.venue-pitch i { position: absolute; width: 65px; height: 65px; left: 50%; top: 50%; translate: -50% -50%; border: 2px solid rgba(255,255,255,.32); border-radius: 50%; }
.venue-body { padding: 25px; }.venue-body h2 { margin: 8px 0; font-size: 23px; }.venue-body p { color: var(--muted); min-height: 40px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }

.field-heading-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.field-catalog-search { margin-bottom: 20px; }
.field-catalog-search .panel-header p { max-width: 760px; margin: 6px 0 0; color: var(--muted); }
.field-catalog-filters {
  display: grid;
  grid-template-columns: minmax(130px, .55fr) minmax(220px, 1.45fr) auto auto;
  align-items: end;
  gap: 12px;
}
.field-catalog-filters label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
.field-catalog-location-status { grid-column: 1 / -1; min-height: 1.2em; color: var(--muted); font-size: 11px; }
.field-catalog-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 22px 0 14px; }
.field-catalog-summary span { color: var(--muted); font-size: 12px; }
.field-catalog-country { margin-top: 24px; }
.field-catalog-country > h2 { margin: 0 0 12px; font-size: 20px; }
.field-catalog-card { grid-template-columns: 155px minmax(0, 1fr); }
.field-catalog-card .venue-pitch { min-height: 100%; }
.field-catalog-card .venue-body h3 { margin: 8px 0; font-size: 21px; overflow-wrap: anywhere; }
.field-catalog-card .venue-body p { min-height: 0; margin: 8px 0; font-size: 12px; line-height: 1.55; }
.field-distance { display: block; margin-top: 10px; color: var(--green); font-size: 12px; }
.field-catalog-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.field-catalog-details > div { min-width: 0; padding: 9px; border-radius: 9px; background: var(--bg-soft); }
.field-catalog-details dt { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.field-catalog-details dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 750; }
.field-catalog-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
.field-catalog-links a, .field-catalog-source a { color: var(--green); font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.field-catalog-source { padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .field-catalog-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .field-heading-actions, .field-heading-actions .button { width: 100%; }
  .field-catalog-filters { grid-template-columns: 1fr; }
  .field-catalog-location-status { grid-column: auto; }
  .field-catalog-details { grid-template-columns: 1fr; }
}

.group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.group-card { position: relative; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.group-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--group-color); }
.group-top { display: flex; align-items: center; justify-content: space-between; }
.group-badge { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #07110d; background: var(--group-color); font-weight: 900; text-transform: uppercase; }
.group-card h2 { margin: 20px 0 8px; font-size: 21px; }.group-card > p { min-height: 44px; color: var(--muted); font-size: 13px; }
.group-meta, .match-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.group-meta span, .match-data span { padding: 10px; border-radius: 10px; background: var(--bg-soft); }
.group-meta small, .group-meta strong, .match-data small, .match-data strong { display: block; }
.group-meta small, .match-data small { margin-bottom: 5px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.group-meta strong, .match-data strong { font-size: 10px; text-transform: capitalize; }
.match-attendance { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.match-attendance-confirmed { border-color: rgba(53,232,120,.3); background: rgba(53,232,120,.07); }
.match-attendance-declined { border-color: rgba(255,107,107,.25); background: rgba(255,107,107,.055); }
.match-attendance-copy { min-width: 0; display: grid; gap: 3px; }
.match-attendance-copy > strong { font-size: 14px; }
.match-attendance-copy > small { color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.match-attendance-copy .match-attendance-reason { color: var(--orange); }
.match-attendance-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.match-attendance-actions form { min-width: 0; margin: 0; }
.match-attendance-actions .button { min-height: 42px; line-height: 1.3; }

.timeline { position: relative; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 53px; top: 45px; bottom: 45px; width: 1px; background: var(--line); }
.timeline-section-title { position: relative; z-index: 2; margin: 22px 0 2px; padding: 0 0 8px 105px; color: var(--muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.timeline-card { position: relative; scroll-margin-top: 100px; display: grid; grid-template-columns: 105px minmax(0,1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.timeline-date { display: grid; place-content: center; text-align: center; border-right: 1px solid var(--line); background: var(--bg-soft); z-index: 1; }
.timeline-date strong { font-size: 30px; line-height: 1; }.timeline-date span { color: var(--green); font-size: 10px; letter-spacing: .1em; }.timeline-date small { margin-top: 8px; color: var(--muted); }
.timeline-content { padding: 22px; }.timeline-title { display: flex; justify-content: space-between; gap: 14px; }.timeline-title h2 { margin: 5px 0; }.timeline-content > p { margin: 4px 0; color: var(--muted); }
.timeline-outcome { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.match-card-score { min-width: 64px; padding: 7px 11px; border: 1px solid rgba(68,151,255,.38); border-radius: 10px; color: #69a9ff; background: rgba(68,151,255,.09); text-align: center; font-size: 17px; font-weight: 900; white-space: nowrap; }
.match-card-mvp { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--orange); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.match-card-mvp:hover, .match-card-mvp:focus-visible { color: var(--green); }
.team-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.team-color-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #d6e4dc; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 800; }
.team-color-pill i { width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: var(--team-color); box-shadow: 0 0 0 2px rgba(0,0,0,.18); }
.match-color-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.match-color-form > div { display: flex; flex-wrap: wrap; flex: 1; gap: 10px; }.match-color-form label { display: grid; grid-template-columns: 1fr 38px; align-items: center; min-width: 150px; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 750; }
.match-color-form input[type="color"], .team-color-fieldset input[type="color"] { width: 38px; min-height: 34px; padding: 2px; cursor: pointer; }
.match-weather { display: grid; gap: 11px; margin-top: 15px; padding: 14px; border: 1px solid rgba(68,151,255,.22); border-radius: 13px; background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,165,233,.045)); }
.match-weather-main { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; }.match-weather-main > span { font-size: 25px; }.match-weather-main small, .match-weather-main strong, .match-weather-main em { display: block; }.match-weather-main small { color: var(--muted); font-size: 9px; text-transform: uppercase; }.match-weather-main strong { margin-top: 2px; font-size: 13px; }.match-weather-main em { margin-top: 2px; color: var(--muted); font-size: 10px; font-style: normal; }.match-weather-main b { font-size: 27px; }
.match-weather-metrics { display: flex; gap: 8px; }.match-weather-metrics span { padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.045); color: var(--muted); font-size: 10px; }.match-weather-metrics strong { margin-left: 4px; color: var(--text); }.match-weather > small { color: var(--muted); font-size: 9px; }.match-weather a { color: #69a9ff; }.match-weather-empty { color: var(--muted); font-size: 11px; }
.calendar-actions { width: min(100%, 620px); margin-top: 14px; }
.calendar-actions > summary { width: fit-content; gap: 8px; list-style: none; }
.calendar-actions > summary::-webkit-details-marker { display: none; }
.calendar-actions > summary span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: #06130b; background: var(--green); font-size: 15px; line-height: 1; }
.calendar-actions[open] > summary { border-color: rgba(53,232,120,.35); background: rgba(53,232,120,.07); }
.calendar-actions-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.calendar-actions-menu a { min-height: 40px; display: grid; place-items: center; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: #d9e8df; background: var(--bg-soft); text-align: center; font-size: 10px; font-weight: 800; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.calendar-actions-menu a:hover, .calendar-actions-menu a:focus-visible { border-color: rgba(53,232,120,.42); color: var(--green); background: rgba(53,232,120,.07); }
.calendar-actions-menu small { grid-column: 1 / -1; padding: 2px 4px 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.calendar-actions-menu.is-ics-only { max-width: 430px; grid-template-columns: 1fr; }
.calendar-actions-menu.is-ics-only small { grid-column: auto; }
.calendar-actions-cancelled > summary span { color: #fff; background: var(--red); }
.calendar-actions-cancelled[open] > summary { border-color: rgba(255,107,107,.38); background: rgba(255,107,107,.08); }
.calendar-actions-cancelled .calendar-actions-menu a:hover, .calendar-actions-cancelled .calendar-actions-menu a:focus-visible { border-color: rgba(255,107,107,.42); color: var(--red); background: rgba(255,107,107,.07); }
.calendar-actions-standby > summary span { color: #06130b; background: var(--orange); }
.calendar-actions-standby[open] > summary { border-color: rgba(255,177,88,.38); background: rgba(255,177,88,.08); }
.team-color-fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 13px; }.team-color-fieldset label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.team-color-fieldset small { grid-column: 1 / -1; color: var(--muted); line-height: 1.45; }
.recurrence-fieldset { margin: 8px 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); transition: border-color .2s ease, background .2s ease; }
.recurrence-fieldset legend { padding: 0 8px; font-weight: 800; }
.recurrence-fieldset > small { display: block; margin-top: 10px; color: var(--muted); line-height: 1.45; }
.recurrence-fieldset.is-disabled { background: var(--surface); border-color: var(--line); }

.sync-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 16px; }
.settings-panel { display: grid; gap: 18px; }.settings-panel > label { display: grid; gap: 7px; color: #c7d6ce; font-size: 12px; font-weight: 700; }
.sync-policy-summary { display: grid; gap: 12px; margin: 0; }
.sync-policy-summary > div { display: grid; gap: 7px; }
.sync-policy-summary dt { color: #c7d6ce; font-size: 12px; font-weight: 700; }
.sync-policy-summary dd { min-height: 44px; display: flex; align-items: center; margin: 0; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--bg-soft); font-size: 12px; font-weight: 750; }
.sync-policy-help { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.sync-state { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.sync-state.is-on { color: var(--green); background: rgba(53,232,120,.1); }
.switch-row { display: flex !important; align-items: center; gap: 11px; cursor: pointer; }
.switch-row > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.switch-row > span { position: relative; flex: 0 0 42px; width: 42px; height: 24px; border-radius: 999px; background: #33443b; transition: .2s; }
.switch-row > span::after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .2s; }
.switch-row > input:checked + span { background: var(--green-dark); }.switch-row > input:checked + span::after { translate: 18px 0; }
.switch-large { padding: 16px; border-radius: 14px; background: var(--bg-soft); }
.switch-large div strong, .switch-large div small { display: block; }.switch-large div small { margin-top: 4px; color: var(--muted); font-weight: 400; }
.sync-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.sync-stats .metric-card { min-height: 130px; }.last-run { grid-column: 1 / -1; }
.last-run > strong { display: block; margin-top: 14px; text-transform: capitalize; }.last-run p { color: var(--muted); }
.mini-stats { display: flex; gap: 8px; }.mini-stats span { padding: 7px 10px; border-radius: 8px; background: var(--bg-soft); color: var(--muted); font-size: 11px; }
.log-panel { margin-top: 16px; }
.sync-run-workflow { margin-bottom: 30px; }
.sync-run-workflow > .page-heading { margin-bottom: 0; }
.sync-run-progress {
  display: grid; gap: 14px; margin-top: 16px; padding: 18px 20px; border: 1px solid rgba(53,232,120,.24);
  border-radius: 16px; background: linear-gradient(120deg, rgba(53,232,120,.08), rgba(12,24,19,.94));
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
}
.sync-run-progress[hidden] { display: none; }
.sync-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sync-progress-heading strong { font-size: 13px; }
.sync-progress-heading output { color: var(--green); font: 850 12px/1 ui-monospace, monospace; }
.sync-run-progress progress { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.07); accent-color: var(--green); }
.sync-run-progress progress::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.07); }
.sync-run-progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--green-dark), var(--green)); transition: width .35s ease; }
.sync-run-progress progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--green-dark), var(--green)); }
.sync-phase-list { counter-reset: sync-step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.sync-phase-list li {
  counter-increment: sync-step; min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.025);
  font-size: 10px; line-height: 1.35;
}
.sync-phase-list li::before { content: counter(sync-step); width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.055); font: 800 9px/1 ui-monospace, monospace; }
.sync-phase-list li.is-active { border-color: rgba(53,232,120,.38); color: var(--text); background: rgba(53,232,120,.075); }
.sync-phase-list li.is-active::before { color: #06130b; background: var(--green); box-shadow: 0 0 0 5px rgba(53,232,120,.09); }
.sync-phase-list li.is-complete { color: #a6b9ae; }
.sync-phase-list li.is-complete::before { content: "✓"; color: #06130b; background: var(--green); }
.sync-progress-message { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.sync-run-progress[data-state="success"] { border-color: rgba(53,232,120,.34); }
.sync-run-progress[data-state="warning"] { border-color: rgba(255,177,88,.35); background: linear-gradient(120deg, rgba(255,177,88,.08), rgba(12,24,19,.94)); }
.sync-run-progress[data-state="warning"] .sync-progress-heading output, .sync-run-progress[data-state="warning"] .sync-progress-message { color: var(--orange); }
.sync-run-progress[data-state="error"] { border-color: rgba(255,107,107,.38); background: linear-gradient(120deg, rgba(255,107,107,.08), rgba(12,24,19,.94)); }
.sync-run-progress[data-state="error"] .sync-progress-heading output, .sync-run-progress[data-state="error"] .sync-progress-message { color: var(--red); }
.data-table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }.data-table th { color: var(--muted); text-align: left; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }.data-table th, .data-table td { padding: 12px; border-top: 1px solid var(--line); }
.notice { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 15px 17px; border-radius: 13px; }.notice strong, .notice span { display: block; }.notice span { color: var(--muted); font-size: 12px; }
.notice-warning { border: 1px solid rgba(255,177,88,.2); background: rgba(255,177,88,.08); }.notice-warning strong { color: var(--orange); }
code { padding: 2px 5px; border-radius: 5px; background: rgba(0,0,0,.25); color: #b8f6cf; }

/* Administrator operations centre */
.operations-heading { align-items: center; }
.operations-heading-actions { display: flex; align-items: center; gap: 12px; }
.operations-updated { color: var(--muted); font-size: 11px; text-align: right; }
.operations-updated time { display: block; margin-top: 4px; color: var(--text); font-weight: 750; }
.operations-overall {
  display: grid; grid-template-columns: auto minmax(150px, auto) minmax(0, 1fr); align-items: center; gap: 15px;
  margin-bottom: 16px; padding: 19px 22px; border: 1px solid rgba(53,232,120,.2); border-radius: 17px;
  background: linear-gradient(100deg, rgba(53,232,120,.11), rgba(16,30,24,.8));
}
.operations-overall small, .operations-overall strong { display: block; }
.operations-overall small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.operations-overall strong { margin-top: 3px; color: var(--green); }
.operations-overall p { margin: 0; color: #b9c8c0; font-size: 12px; line-height: 1.55; }
.operations-pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(53,232,120,.12); }
.operations-overall-warning { border-color: rgba(255,177,88,.25); background: linear-gradient(100deg, rgba(255,177,88,.1), rgba(16,30,24,.8)); }
.operations-overall-warning strong { color: var(--orange); }.operations-overall-warning .operations-pulse { background: var(--orange); box-shadow: 0 0 0 7px rgba(255,177,88,.11); }
.operations-overall-incident { border-color: rgba(255,107,107,.3); background: linear-gradient(100deg, rgba(255,107,107,.1), rgba(16,30,24,.8)); }
.operations-overall-incident strong { color: var(--red); }.operations-overall-incident .operations-pulse { background: var(--red); box-shadow: 0 0 0 7px rgba(255,107,107,.11); }
.operations-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.operations-metric { min-height: 134px; padding: 19px; }.operations-metric > strong { margin: 12px 0 7px; font-size: 32px; }
.operations-tone-blue { --metric-color: var(--blue); }.operations-tone-orange { --metric-color: var(--orange); }.operations-tone-purple { --metric-color: #bf8cff; }
.operations-service-section { margin-top: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(10,24,17,.7); }
.operations-services { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.operations-service { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; min-height: 128px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.operations-service-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--green); background: rgba(53,232,120,.09); font: 850 10px/1 ui-monospace, monospace; }
.operations-service strong, .operations-service small, .operations-service time { display: block; }
.operations-service small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }.operations-service time { margin-top: 6px; color: #71877b; font-size: 9px; }
.operations-state { grid-column: 1 / -1; width: fit-content; padding: 5px 8px; border-radius: 999px; color: var(--green); background: rgba(53,232,120,.1); font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.operations-service[data-state="warning"] .operations-state { color: var(--orange); background: rgba(255,177,88,.1); }
.operations-service[data-state="incident"] .operations-state { color: var(--red); background: rgba(255,107,107,.1); }
.operations-service[data-state="paused"] .operations-state { color: var(--muted); background: rgba(255,255,255,.06); }
.operations-main-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 16px; margin-top: 16px; }
.operations-queue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.operations-queue-grid > div { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.operations-queue-grid strong, .operations-queue-grid span { display: block; }.operations-queue-grid strong { font-size: 24px; }.operations-queue-grid span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.operations-queue-age { display: flex; justify-content: space-between; gap: 15px; margin: 16px 0; color: var(--muted); font-size: 11px; }.operations-queue-age strong { color: var(--text); }
.operations-security-list { display: grid; gap: 8px; margin: 0; }
.operations-security-list > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--line); }
.operations-security-list dt { color: var(--muted); font-size: 11px; }.operations-security-list dd { margin: 0; font-size: 20px; font-weight: 850; }
.operations-security-panel > p { margin: 16px 0 0; color: #73877c; font-size: 10px; line-height: 1.55; }
.operations-activity-list { display: grid; margin: 0; padding: 0; list-style: none; }
.operations-activity-list li { display: grid; grid-template-columns: 12px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.operations-activity-mark { width: 8px; height: 8px; margin-top: 4px; border: 2px solid var(--green); border-radius: 50%; }
.operations-activity-list strong, .operations-activity-list time { display: block; }.operations-activity-list strong { font-size: 11px; }.operations-activity-list time { margin-top: 4px; color: var(--muted); font-size: 9px; }
.operations-all-clear { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--muted); }
.operations-all-clear > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #06130b; background: var(--green); font-size: 11px; font-weight: 950; }.operations-all-clear strong { color: var(--text); }.operations-all-clear p { max-width: 360px; margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
.operations-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.operations-action-card { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 88px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); transition: .2s ease; }
.operations-action-card:hover { border-color: rgba(53,232,120,.38); transform: translateY(-2px); }.operations-action-card > span { color: var(--green); font: 800 10px/1 ui-monospace, monospace; }.operations-action-card strong, .operations-action-card small { display: block; }.operations-action-card small { margin-top: 5px; color: var(--muted); font-size: 10px; }.operations-action-card b { color: var(--green); }
.operations-action-card button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--green); background: transparent; cursor: pointer; }.operations-action-card button:disabled { opacity: .35; cursor: not-allowed; }

.empty-state { padding: 52px 20px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); font-size: 18px; }.empty-state p { margin: 8px 0 0; }
.error-state { min-height: 50vh; display: grid; place-content: center; }.error-state .button { margin-top: 20px; }
.flash-stack { position: fixed; right: 24px; top: 100px; display: grid; gap: 8px; z-index: 100; }
.flash { max-width: 430px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 12px; background: #17261f; box-shadow: var(--shadow); transition: .4s; }
.flash-success { border-color: rgba(53,232,120,.3); }.flash-error { border-color: rgba(255,107,107,.38); }.flash-warning { border-color: rgba(255,177,88,.38); }
.flash.is-leaving { opacity: 0; translate: 0 -10px; pointer-events: none; }

.modal { width: min(680px, calc(100% - 30px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 22px; color: var(--text); background: #0d1b15; box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(2, 8, 5, .78); backdrop-filter: blur(6px); }
.modal form { display: grid; gap: 18px; padding: 25px; }.modal-header { display: flex; justify-content: space-between; align-items: start; }
.modal-header h2 { margin: 5px 0 0; font-size: 24px; }.modal-header button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.form-grid label, .modal > form > label { display: grid; gap: 7px; color: #c4d4cc; font-size: 11px; font-weight: 750; }.span-2 { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: 12px; } legend { padding: 0 7px; color: var(--muted); font-size: 10px; }.check-row { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px; }.check-row label { display: flex; gap: 6px; font-size: 11px; }.check-row input { width: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.guest-shell { overflow-x: hidden; }
.login-stage { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
.login-visual { position: relative; min-height: 720px; overflow: hidden; padding: 46px; background: #07110d; }
.login-visual::before { content: ""; position: absolute; width: 580px; height: 580px; right: -150px; bottom: -120px; border-radius: 50%; background: var(--green); filter: blur(2px); opacity: .1; }
.brand-large { position: relative; z-index: 2; }.brand-large .brand-mark { width: 50px; height: 50px; }.brand-large strong { font-size: 25px; }
.login-copy { position: absolute; left: 46px; bottom: 54px; z-index: 3; max-width: 560px; }.login-copy h1 { margin: 10px 0 18px; font-size: clamp(48px, 6vw, 78px); letter-spacing: -.07em; line-height: .94; }.login-copy p { max-width: 460px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.pitch-card { position: absolute; width: 480px; height: 280px; right: -50px; top: 150px; rotate: -9deg; border: 2px solid rgba(255,255,255,.17); border-radius: 140px 0 0 140px; background: repeating-linear-gradient(90deg, #153c28 0 60px, #18472e 60px 120px); box-shadow: var(--shadow); }
.pitch-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.2); }.pitch-circle { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; translate: -50% -50%; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; }
.pitch-box { position: absolute; width: 75px; height: 130px; top: 50%; translate: 0 -50%; border: 2px solid rgba(255,255,255,.2); }.pitch-box-left { left: 0; }.pitch-box-right { right: 0; }
.player-dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(53,232,120,.15); }.dot-1 { left: 17%; top: 24%; }.dot-2 { left: 31%; top: 66%; }.dot-3 { left: 43%; top: 32%; }.dot-4 { right: 17%; top: 24%; background: var(--orange); }.dot-5 { right: 31%; top: 66%; background: var(--orange); }.dot-6 { right: 43%; top: 32%; background: var(--orange); }
.login-panel { display: grid; place-items: center; padding: 40px; background: #0b1712; }
.auth-card { width: min(420px, 100%); display: grid; gap: 18px; }.auth-card h2 { margin: 2px 0 0; font-size: 34px; letter-spacing: -.045em; }.auth-card > p { margin: -8px 0 8px; color: var(--muted); }.auth-card label { display: grid; gap: 7px; color: #c8d8d0; font-size: 12px; font-weight: 700; }.auth-card input { min-height: 50px; }.auth-card .button { min-height: 52px; margin-top: 5px; }.security-note { text-align: center; color: var(--muted-strong); }
.guest-flash { top: 24px; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid, .group-grid { grid-template-columns: repeat(2, 1fr); }
  .content-grid { grid-template-columns: 1fr; }
  .venue-card { grid-template-columns: 150px 1fr; }
  .operations-metrics { grid-template-columns: repeat(3, 1fr); }
  .operations-services { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .app-shell.nav-open { overflow: hidden; }
  .app-shell.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgba(1, 8, 5, .66); backdrop-filter: blur(2px); }
  .sidebar { position: fixed; left: 0; translate: -105% 0; width: 270px; transition: translate .25s ease; box-shadow: var(--shadow); }
  .sidebar.is-open { translate: 0 0; }
  .mobile-menu { display: block; }
  .topbar { padding: 0 18px; }.topbar-context { display: none; }
  .page-content { padding: 25px 18px; }
  .sync-layout { grid-template-columns: 1fr; }
  .sync-phase-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-heading-actions { width: 100%; justify-content: space-between; }
  .operations-main-grid { grid-template-columns: 1fr; }
  .operations-services { grid-template-columns: repeat(2, 1fr); }
  .login-stage { grid-template-columns: 1fr; }.login-visual { min-height: 420px; }.login-panel { padding: 45px 22px; }
  .pitch-card { top: 100px; scale: .7; transform-origin: right top; }.login-copy { left: 24px; bottom: 25px; }.login-copy h1 { font-size: 46px; }.login-copy p { display: none; }.login-visual { padding: 24px; }
}
@media (max-width: 620px) {
  .topbar { padding-inline: 12px; }
  .user-menu { gap: 6px; }
  .user-menu .profile-link { display: none; }
  .user-menu .text-button { margin-left: 0; padding-inline: 6px; }
  .compact-locale-form select { max-width: 108px; }
  .page-heading { align-items: start; flex-direction: column; }.page-heading .button { width: 100%; }
  .sync-run-workflow .page-heading form { width: 100%; }
  .sync-run-progress { padding: 16px; }
  .sync-phase-list { grid-template-columns: 1fr; }
  .metric-grid, .card-grid, .group-grid, .venue-grid { grid-template-columns: 1fr; }
  .operations-overall { grid-template-columns: auto 1fr; }.operations-overall p { grid-column: 1 / -1; }
  .operations-metrics, .operations-services, .operations-actions { grid-template-columns: 1fr; }
  .operations-queue-grid { grid-template-columns: 1fr 1fr; }
  .operations-heading-actions { align-items: stretch; flex-direction: column; }.operations-updated { text-align: left; }
  .venue-card { grid-template-columns: 1fr; }.venue-pitch { min-height: 150px; }
  .match-row { grid-template-columns: 52px 1fr; }.match-row .format-pill, .match-row .status { grid-column: 2; }
  .timeline-card { grid-template-columns: 75px 1fr; }.timeline-date strong { font-size: 23px; }
  .calendar-actions, .calendar-actions > summary { width: 100%; }
  .calendar-actions-menu { grid-template-columns: 1fr; }
  .calendar-actions-menu small { grid-column: auto; }
  .match-attendance { align-items: stretch; flex-direction: column; }
  .match-attendance-actions, .match-attendance-actions form, .match-attendance-actions .button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }
  .team-color-fieldset { grid-template-columns: 1fr; }.team-color-fieldset small { grid-column: auto; }
  .user-menu > div:not(.avatar) { display: none; }
  .compact-locale-form .text-button { display: none; }
  .flash-stack { left: 14px; right: 14px; }.flash { max-width: none; }
  .news-section { padding: 18px; }.news-heading { align-items: end; }
  .news-card { min-height: 250px; padding: 18px; }.news-card h3 { margin: 42px 0 34px; font-size: 24px; }
  .news-card-footer { align-items: start; flex-direction: column; }.news-dots i:nth-child(n+9) { display: none; }
}

/* Public website */
.public-shell {
  --public-bg: #07110d;
  --public-surface: #0d1b15;
  --public-cream: #eef5ef;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 6%, rgba(53, 232, 120, .11), transparent 24%),
    var(--public-bg);
}
.public-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.public-header {
  position: sticky; top: 0; z-index: 80; border-bottom: 1px solid transparent;
  background: rgba(7, 17, 13, .72); backdrop-filter: blur(18px);
  transition: border-color .2s ease, background .2s ease;
}
.public-header.is-scrolled { border-color: var(--line); background: rgba(7, 17, 13, .94); }
.public-nav { min-height: 78px; display: flex; align-items: center; gap: 24px; }
.public-navigation { display: flex; align-items: center; gap: 24px; margin-left: auto; color: #b6c6bd; font-size: 13px; font-weight: 750; }
.public-navigation > a:not(.button) { transition: color .2s; }
.public-navigation > a:not(.button):hover { color: var(--text); }
.public-navigation .nav-login { color: var(--text); }
.public-navigation .nav-cta { min-height: 40px; padding-inline: 16px; color: #06130b; }
.public-menu-toggle { display: none; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.public-nav-actions { display: flex; align-items: center; gap: 8px; }
.locale-selector { position: relative; color: var(--text); font-size: 11px; }
.locale-selector summary { min-width: 45px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; list-style: none; text-align: center; font-weight: 850; }
.locale-selector summary::-webkit-details-marker { display: none; }
.locale-selector summary::after { content: "⌄"; color: var(--muted); font-size: 10px; }
.locale-selector[open] summary { border-color: rgba(53,232,120,.35); background: rgba(53,232,120,.06); }
.locale-icon { color: var(--green); font-size: 14px; }
.locale-current-name { max-width: 94px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.locale-selector > div { position: absolute; z-index: 100; top: calc(100% + 7px); right: 0; min-width: 150px; display: grid; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #0d1b15; box-shadow: var(--shadow); }
.locale-selector > div a { padding: 8px 10px; border-radius: 7px; color: var(--muted); white-space: nowrap; }
.locale-selector > div a:hover, .locale-selector > div a[aria-current="true"] { color: var(--text); background: rgba(53,232,120,.09); }
.guest-locale-selector { position: fixed; z-index: 100; top: 18px; right: 18px; }

.hero { position: relative; overflow: hidden; padding: 92px 0 110px; }
.hero::before {
  content: ""; position: absolute; width: 680px; height: 680px; right: -240px; top: -170px;
  border: 1px solid rgba(53, 232, 120, .08); border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(53,232,120,.018), 0 0 0 180px rgba(53,232,120,.012);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr); align-items: center; gap: 72px; }
.availability-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px;
  border: 1px solid rgba(53,232,120,.19); border-radius: 999px;
  color: #b8d8c4; background: rgba(53,232,120,.055); font-size: 11px; font-weight: 750;
}
.availability-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(53,232,120,.09); }
.hero h1 { max-width: 680px; margin: 25px 0 22px; font-size: clamp(48px, 6vw, 78px); line-height: .96; letter-spacing: -.065em; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-copy > p { max-width: 610px; margin: 0; color: #a5b6ad; font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.button-large { min-height: 54px; padding-inline: 23px; border-radius: 14px; }
.hero-primary-journeys { align-items: stretch; }
.hero-primary-journeys .button { flex: 1 1 154px; justify-content: center; text-align: center; }
.hero-primary-journeys .button-primary { flex-basis: 100%; font-size: 16px; }
.hero-explore-note { margin: 12px 0 0; color: #5f7469; font-size: 12px; line-height: 1.55; }
.hero-store-link { display: inline-flex; margin-top: 12px; color: #355247; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.025); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; color: #71857a; font-size: 11px; }
.hero-trust b { color: var(--green); }

.hero-product { position: relative; min-height: 565px; display: grid; place-items: center; }
.product-window {
  position: relative; z-index: 2; width: min(540px, 100%); padding: 16px;
  border: 1px solid rgba(229,255,237,.12); border-radius: 28px;
  background: rgba(12, 25, 19, .94); box-shadow: 0 45px 120px rgba(0,0,0,.42);
  transform: perspective(1200px) rotateY(calc(-4deg + var(--tilt-x, 0deg))) rotateX(calc(2deg + var(--tilt-y, 0deg)));
  transition: transform .24s ease-out, border-color .25s ease, box-shadow .25s ease;
}
.product-window:hover { border-color: rgba(53,232,120,.22); box-shadow: 0 50px 130px rgba(0,0,0,.48); }
.product-window-top { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; padding: 4px 3px 16px; }
.product-logo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #06130b; background: var(--green); font-weight: 950; }
.product-window-top small, .product-window-top strong { display: block; }
.product-window-top small { margin-bottom: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.product-window-top strong { font-size: 12px; }
.live-chip { padding: 6px 9px; border-radius: 999px; color: var(--green); background: rgba(53,232,120,.1); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.product-match { padding: 22px; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(145deg, #14271e, #0d1b15); }
.product-match-heading { display: flex; justify-content: space-between; gap: 15px; }
.product-match-heading small, .product-match-heading strong { display: block; }
.product-match-heading small { margin-bottom: 6px; color: var(--green); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.product-match-heading > span { height: fit-content; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; }
.product-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 13px; }
.product-stats div { padding: 13px; border-radius: 12px; background: rgba(255,255,255,.035); }
.product-stats strong, .product-stats small { display: block; }.product-stats strong { font-size: 23px; }.product-stats small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.product-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #25362e; }
.product-progress i { display: block; width: 87.5%; height: 100%; border-radius: inherit; background: var(--green); }
.product-timeline { display: grid; gap: 13px; margin-top: 24px; }
.product-timeline span { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 9px; color: #92a39a; }
.product-timeline i { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 9px; font-style: normal; }
.product-timeline b { color: #d8e5dc; font-size: 10px; }.product-timeline small { font-size: 8px; }
.product-timeline .is-done i { color: #06130b; border-color: var(--green); background: var(--green); }
.product-timeline .is-next i { color: var(--orange); border-color: rgba(255,177,88,.3); background: rgba(255,177,88,.08); }
.product-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.product-teams > span { display: flex; align-items: center; gap: 7px; padding: 12px; border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 9px; }
.product-teams i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }.team-white { background: #f8fafc; }.team-red { background: #dc2626; }
.product-teams b { margin-left: auto; color: var(--text); }
.floating-card {
  position: absolute; z-index: 3; min-width: 195px; padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 15px;
  background: rgba(22, 39, 31, .94); box-shadow: 0 18px 50px rgba(0,0,0,.32);
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform .24s ease-out;
}
.floating-card b, .floating-card small { display: block; }.floating-card b { font-size: 10px; }.floating-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.floating-alert { top: 74px; right: -28px; }.floating-ready { left: -17px; bottom: 57px; }

.proof-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.018); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid div { padding: 25px 18px; border-left: 1px solid var(--line); text-align: center; }
.proof-grid div:last-child { border-right: 1px solid var(--line); }
.proof-grid strong, .proof-grid span { display: block; }.proof-grid strong { font-size: 17px; }.proof-grid span { margin-top: 5px; color: var(--muted); font-size: 10px; }

.public-section { padding: 118px 0; }
.reveal-on-scroll {
  opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(4px);
  transition: opacity .7s cubic-bezier(.2,.75,.2,1), transform .7s cubic-bezier(.2,.75,.2,1), filter .7s ease;
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translate3d(0, 0, 0); filter: none; }
.feature-grid .reveal-on-scroll:nth-child(2), .mode-grid .reveal-on-scroll:nth-child(2), .proof-grid .reveal-on-scroll:nth-child(2) { transition-delay: .06s; }
.feature-grid .reveal-on-scroll:nth-child(3), .proof-grid .reveal-on-scroll:nth-child(3) { transition-delay: .12s; }
.feature-grid .reveal-on-scroll:nth-child(4), .proof-grid .reveal-on-scroll:nth-child(4) { transition-delay: .18s; }
.feature-grid .reveal-on-scroll:nth-child(5) { transition-delay: .24s; }
.feature-grid .reveal-on-scroll:nth-child(6) { transition-delay: .3s; }
.section-heading { max-width: 690px; margin-bottom: 52px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .security-grid h2, .final-cta h2 { margin: 11px 0 17px; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.055em; }
.section-heading p, .security-grid > div > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card {
  position: relative; min-height: 310px; overflow: hidden; padding: 26px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--public-surface);
  transition: transform .25s ease, border-color .25s ease;
}
.feature-card:hover { transform: translateY(-4px); border-color: rgba(53,232,120,.24); }
.feature-highlight { grid-column: span 2; background: linear-gradient(135deg, rgba(53,232,120,.13), #0d1b15 62%); }
.feature-number { position: absolute; right: 23px; top: 23px; color: #42554a; font: 700 10px/1 ui-monospace, monospace; }
.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #06130b; background: var(--green); font-weight: 950; }
.feature-card h3 { margin: 29px 0 12px; font-size: 23px; letter-spacing: -.035em; }
.feature-card p { max-width: 620px; margin: 0; color: var(--muted); line-height: 1.65; }
.mini-calendar { display: grid; grid-template-columns: repeat(7, 42px); gap: 7px; margin-top: 29px; }
.mini-calendar span { height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 9px; }
.mini-calendar .active { color: #06130b; border-color: var(--green); background: var(--green); font-weight: 900; }

.modes-section { background: #0a1611; border-block: 1px solid var(--line); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mode-card { position: relative; min-height: 585px; overflow: hidden; padding: 34px; border: 1px solid var(--line); border-radius: 25px; background: #101f18; }
.mode-card-alt { background: #f0f5f1; color: #0b1712; }
.mode-card-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.mode-card-alt .mode-card-top { color: #647269; }.mode-card-top strong { color: var(--green); }
.mode-card-alt .mode-card-top strong { color: #168c47; }
.mode-card h3 { max-width: 510px; margin: 50px 0 26px; font-size: clamp(30px, 4vw, 43px); line-height: 1.04; letter-spacing: -.05em; }
.mode-card ul { display: grid; gap: 12px; padding: 0; list-style: none; color: var(--muted); }
.mode-card-alt ul { color: #59685f; }.mode-card li::before { content: "✓"; margin-right: 9px; color: var(--green); font-weight: 900; }
.manager-visual { position: absolute; right: -28px; bottom: -35px; width: 335px; height: 170px; border: 1px solid var(--line); border-radius: 90px 0 0 0; background: repeating-linear-gradient(90deg,#174c2f 0 42px,#1a5635 42px 84px); }
.manager-visual > i { position: absolute; inset: 0 50%; width: 1px; background: rgba(255,255,255,.22); }
.manager-visual span { position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; margin: 50px 10px 0 25px; border-radius: 50%; color: #06130b; background: var(--green); font-size: 10px; font-weight: 900; box-shadow: 0 0 0 6px rgba(53,232,120,.12); }
.manager-visual span:last-child { color: white; background: #263a30; box-shadow: none; }
.captain-visual { position: absolute; left: 34px; right: 34px; bottom: 36px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.captain-visual > div { display: grid; justify-items: center; gap: 9px; padding: 20px; border: 1px solid #d8e2db; border-radius: 16px; background: white; }
.captain-visual b { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #e6eee8; }
.captain-visual > div:last-child b { color: white; background: #dc2626; }.captain-visual span { color: #536158; font-size: 10px; }.captain-visual > i { font-size: 10px; font-style: normal; font-weight: 900; }
.mode-card-unattended {
  grid-column: 1 / -1; min-height: 430px;
  background:
    radial-gradient(circle at 82% 24%, rgba(53,232,120,.15), transparent 31%),
    linear-gradient(135deg, #10241a, #0b1913 68%);
}
.mode-card-unattended h3, .mode-card-unattended ul { max-width: calc(100% - 29rem); }
.unattended-mode-visual {
  position: absolute; right: 34px; bottom: 38px; width: min(40%, 420px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.unattended-mode-visual span {
  position: relative; min-width: 0; display: grid; align-content: center; gap: 8px;
  min-height: 112px; padding: 15px 11px; border: 1px solid rgba(221,255,232,.13);
  border-radius: 16px; background: rgba(6,18,12,.72);
}
.unattended-mode-visual span:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; top: 50%; right: -9px;
  width: 9px; height: 1px; background: var(--green);
}
.unattended-mode-visual b { color: var(--green); font: 800 10px/1 ui-monospace, monospace; }
.unattended-mode-visual small { overflow-wrap: anywhere; color: #c5d5cc; font-size: 10px; line-height: 1.35; }

.workflow-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 110px; align-items: start; }
.sticky-heading { position: sticky; top: 130px; }
.workflow-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.workflow-list li { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 30px 0; border-top: 1px solid var(--line); }
.workflow-list > li > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--green); font: 750 10px/1 ui-monospace, monospace; }
.workflow-list strong { font-size: 21px; }.workflow-list p { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }

.security-section { color: #102018; background: var(--public-cream); }
.security-section .eyebrow { color: #178e49; }
.security-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
.security-grid > div > p { color: #617068; }
.security-points { display: grid; }
.security-points article { display: grid; grid-template-columns: 48px 1fr; gap: 17px; padding: 25px 0; border-top: 1px solid #d4ded6; }
.security-points article > span { color: #168c47; font: 750 10px/1 ui-monospace, monospace; }
.security-points strong { font-size: 18px; }.security-points p { margin: 7px 0 0; color: #617068; line-height: 1.6; }

.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 22px 44px 22px 0; cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; position: absolute; right: 5px; top: 20px; color: var(--green); font-size: 22px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { margin: -4px 0 23px; padding-right: 50px; color: var(--muted); line-height: 1.65; }

.final-cta { padding: 36px 0 100px; }
.final-cta-inner { position: relative; overflow: hidden; padding: 72px; border-radius: 30px; color: #07110d; background: var(--green); }
.final-cta-inner::after { content: "B"; position: absolute; right: 25px; bottom: -95px; color: rgba(7,17,13,.09); font-size: 310px; font-weight: 950; line-height: 1; }
.final-cta .eyebrow { color: #174f2b; }.final-cta h2 { position: relative; z-index: 1; max-width: 850px; }.final-cta p { position: relative; z-index: 1; font-size: 17px; }
.final-cta .hero-actions { position: relative; z-index: 1; }.button-dark { color: white; background: #07110d; }.button-light-outline { border-color: rgba(7,17,13,.28); color: #07110d; background: transparent; }

.public-footer { padding: 65px 0 25px; border-top: 1px solid var(--line); background: #050c09; }
.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 55px; }
.footer-grid > div { display: grid; align-content: start; justify-items: start; gap: 12px; }
.footer-grid > div:first-child p { max-width: 300px; margin: 14px 0 0; color: var(--muted); line-height: 1.6; }
.footer-grid > div > strong { margin-bottom: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.footer-grid > div > a:not(.brand) { color: var(--muted); font-size: 12px; }.footer-grid > div > a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 55px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted-strong); font-size: 10px; }

/* Consent-first, first-party analytics */
.analytics-consent {
  position: fixed; z-index: 220; left: 50%; bottom: 18px; width: min(980px, calc(100% - 32px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px;
  padding: 20px; border: 1px solid rgba(221,255,232,.16); border-radius: 20px;
  background: rgba(9, 21, 15, .96); box-shadow: 0 28px 90px rgba(0,0,0,.5);
  backdrop-filter: blur(22px); transform: translateX(-50%);
}
.analytics-consent[hidden], [data-analytics-manage][hidden] { display: none !important; }
.analytics-consent-copy { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.analytics-consent-mark {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  color: #06130b; background: var(--green); font-size: 18px; font-weight: 950;
  box-shadow: 0 10px 28px rgba(53,232,120,.18);
}
.analytics-consent-copy strong { display: block; margin: 1px 0 5px; font-size: 14px; }
.analytics-consent-copy p { max-width: 690px; margin: 0; color: #a9bbb0; font-size: 12px; line-height: 1.55; }
.analytics-consent-copy a { display: inline-block; margin-top: 7px; color: var(--green); font-size: 11px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.analytics-consent-actions { display: flex; gap: 8px; }
.analytics-consent-actions .button { min-width: 112px; }
.analytics-manage-button {
  position: fixed; z-index: 90; right: 17px; bottom: 17px; min-height: 36px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(9,21,15,.9);
  box-shadow: 0 12px 35px rgba(0,0,0,.25); backdrop-filter: blur(14px); cursor: pointer; font-size: 10px; font-weight: 750;
}
.analytics-manage-button:hover { color: var(--text); border-color: rgba(53,232,120,.28); }

/* Legal and help */
.legal-hero { padding: 82px 0 54px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 72% 20%, rgba(53,232,120,.09), transparent 30%); }
.legal-hero h1 { max-width: 900px; margin: 12px 0 14px; font-size: clamp(42px, 6vw, 70px); letter-spacing: -.06em; line-height: 1; }
.legal-hero p { margin: 0; color: var(--muted); }
.legal-document { max-width: 860px; padding-block: 66px 110px; }
.legal-document h2 { margin: 36px 0 12px; font-size: 21px; letter-spacing: -.02em; }
.legal-document p, .legal-document li { color: #a9bbb0; line-height: 1.75; }
.legal-document a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal-summary { padding: 22px 24px; border: 1px solid rgba(53,232,120,.2); border-radius: 16px; background: rgba(53,232,120,.06); }
.legal-summary strong { color: var(--green); }.legal-summary p { margin: 7px 0 0; }
.cookie-table-wrap { overflow-x: auto; }.cookie-table { width: 100%; border-collapse: collapse; color: #a9bbb0; font-size: 13px; }
.cookie-table th, .cookie-table td { padding: 14px; border: 1px solid var(--line); text-align: left; }.cookie-table th { color: var(--text); }
.numbered-steps { display: grid; gap: 12px; padding: 0; list-style: none; }
.numbered-steps li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; }
.numbered-steps li > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #06130b; background: var(--green); font-weight: 900; }
.numbered-steps strong { color: var(--text); }.numbered-steps p { margin: 4px 0 0; }
.help-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; padding-block: 50px 110px; align-items: start; }
.help-contact { position: sticky; top: 110px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.help-contact h2 { margin: 22px 0 10px; }.help-contact p { color: var(--muted); line-height: 1.6; }.help-contact small { display: block; margin-top: 12px; color: var(--muted); text-align: center; }
.help-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.help-topics article { padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.help-topics h2 { margin: 0 0 12px; font-size: 18px; }.help-topics p { margin: 0; color: var(--muted); line-height: 1.65; }

/* Account and profile */
.auth-inline-links { margin: -8px 0 2px; text-align: right; }.auth-inline-links a, .auth-switch a, .auth-back { color: var(--green); font-size: 11px; font-weight: 750; }
.auth-switch { margin: 0 !important; color: var(--muted); text-align: center; font-size: 12px; }
.auth-page { min-height: 100vh; padding: 30px max(24px, calc((100vw - 1180px) / 2)); background: radial-gradient(circle at 18% 25%, rgba(53,232,120,.09), transparent 25%), var(--bg); }
.auth-page-brand { width: fit-content; }
.auth-page-grid { min-height: calc(100vh - 105px); display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; padding-block: 40px; }
.auth-side-copy h1 { margin: 14px 0 18px; font-size: clamp(40px, 5vw, 65px); line-height: .98; letter-spacing: -.06em; }.auth-side-copy p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.auth-side-copy ul { display: grid; gap: 11px; padding: 0; list-style: none; color: #b4c5bb; }.auth-side-copy li::before { content: "✓"; margin-right: 9px; color: var(--green); }
.auth-card-wide { width: 100%; padding: 31px; border: 1px solid var(--line); border-radius: 24px; background: rgba(13,27,21,.94); box-shadow: var(--shadow); }
.handle-input { display: grid; grid-template-columns: auto 1fr; align-items: center; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
.handle-input b { padding-left: 13px; color: var(--green); }.handle-input input { min-height: 44px; border: 0; background: transparent; }
.consent-row { display: flex !important; align-items: flex-start; gap: 10px; color: var(--muted) !important; font-weight: 500 !important; line-height: 1.45; }
.consent-row input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--green); }
.consent-row a { color: var(--green); }
.registration-privacy-options {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  display: grid;
  gap: .75rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .025);
}
.registration-privacy-options legend { padding-inline: .35rem; color: var(--text); font-weight: 800; }
.registration-privacy-options > p { margin: 0 0 .15rem; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.password-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.password-strength i { height: 4px; border-radius: 99px; background: #2b3b33; }.password-strength i.is-active { background: var(--orange); }
.password-strength[data-score="3"] i.is-active, .password-strength[data-score="4"] i.is-active { background: var(--green); }
.password-strength span { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.auth-page-centered { display: grid; grid-template-rows: auto 1fr; }
.auth-recovery-card { align-self: center; justify-self: center; width: min(470px, 100%); padding: 31px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.auth-recovery-card h1 { margin: 8px 0 5px; font-size: 34px; letter-spacing: -.045em; }.auth-recovery-card .feature-icon { margin-bottom: 8px; }.auth-back { text-align: center; }
.avatar img, .player-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.profile-link { text-decoration: none; }
.profile-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; align-items: start; }
.profile-photo-panel { position: sticky; top: 110px; text-align: center; }
.profile-photo-preview { width: 170px; height: 205px; display: grid; place-items: center; margin: 0 auto 18px; overflow: hidden; border: 4px solid rgba(53,232,120,.18); border-radius: 50% / 44%; background: linear-gradient(145deg,#c5f9d8,var(--green)); color: #06130b; font-size: 52px; font-weight: 950; }
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.profile-photo-panel h2 { margin: 0; }.profile-photo-panel > p { margin: 6px 0 20px; color: var(--green); }
.avatar-upload-button { position: relative; overflow: hidden; }.avatar-upload-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.profile-photo-panel > small { display: block; margin-top: 12px; color: var(--muted); line-height: 1.5; }
.profile-form-panel > .button { margin-top: 20px; }
.profile-form-panel label > small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.profile-password-panel { margin-top: 16px; }
.profile-password-panel > p { color: var(--muted); max-width: 760px; }
.profile-password-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; align-items: end; }
.profile-password-form > small { grid-column: 1/-1; color: var(--muted); }
.profile-password-form > .button { justify-self: start; }
.profile-rating { display: grid; align-content: center; min-height: 102px; padding: 14px; border-radius: 12px; background: var(--bg-soft); }
.profile-rating span, .profile-rating small { color: var(--muted); font-size: 9px; }.profile-rating strong { margin: 4px 0; color: var(--green); font-size: 27px; }
.profile-statistics-panel { margin-top: 16px; }
.profile-statistics-panel > p { max-width: 760px; color: var(--muted); line-height: 1.55; }
.profile-statistics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 16px; }
.profile-statistics-grid article { display: grid; min-width: 0; min-height: 88px; align-content: space-between; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-soft); }
.profile-statistics-grid span { overflow-wrap: anywhere; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.35; }
.profile-statistics-grid strong { color: var(--green); font-size: clamp(21px, 2vw, 28px); line-height: 1; }
.preference-fieldset { display: grid; gap: 13px; margin-top: 20px; padding: 18px; }.preference-fieldset legend { padding-inline: 8px; }
.preference-fieldset .consent-row strong { display: block; color: var(--text); }

/* Clubs, competitions and families */
.marketplace-heading-actions, .marketplace-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.marketplace-search-card, .marketplace-publish-card { margin-bottom: 18px; }
.marketplace-location-picker { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }
.marketplace-location-picker .button { flex: 0 0 auto; }
.marketplace-location-picker p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.marketplace-results { margin-top: 25px; }
.marketplace-grid, .marketplace-operator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.marketplace-card { display: grid; gap: 18px; min-width: 0; padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(18,38,28,.95), rgba(9,21,15,.97)); box-shadow: var(--shadow); }
.marketplace-card h2, .marketplace-operator-grid h2 { margin: 5px 0 7px; font-size: 23px; }.marketplace-card p, .marketplace-operator-grid p { margin: 0; color: var(--muted); }
.marketplace-card-top, .marketplace-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.marketplace-distance { color: var(--green); font: 800 12px/1 ui-monospace, monospace; }
.marketplace-price { display: flex; align-items: baseline; gap: 8px; }.marketplace-price strong { font-size: 24px; }.marketplace-price small { color: var(--muted); }
.marketplace-card .marketplace-actions form { flex: 1; }.marketplace-card .marketplace-actions .button { width: 100%; }
.marketplace-more { display: block; width: fit-content; margin: 22px auto 0; }
.marketplace-authority-note, .marketplace-projection-note { margin-top: 20px; padding: 18px 20px; border: 1px solid rgba(53,232,120,.18); border-radius: 15px; background: rgba(53,232,120,.05); }
.marketplace-authority-note strong { color: var(--green); }.marketplace-authority-note p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.marketplace-detail-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; }.marketplace-detail-grid h2 { margin-top: 0; }
.marketplace-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; }.marketplace-facts div { padding: 13px; border-radius: 12px; background: var(--bg-soft); }.marketplace-facts dt { color: var(--muted); font-size: 10px; }.marketplace-facts dd { margin: 5px 0 0; font-weight: 800; }
.marketplace-unit-list, .marketplace-booking-list { display: grid; gap: 10px; margin-top: 17px; }
.marketplace-unit-row, .marketplace-booking-row { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }.marketplace-unit-row > div:first-child, .marketplace-booking-row > div:first-child { min-width: 0; flex: 1; }.marketplace-unit-row strong, .marketplace-unit-row small, .marketplace-booking-row strong, .marketplace-booking-row small { display: block; }.marketplace-unit-row small, .marketplace-booking-row small { margin-top: 4px; color: var(--muted); }
.marketplace-booking-row.is-focused { border-color: rgba(53,232,120,.45); box-shadow: 0 0 0 3px rgba(53,232,120,.08); }.marketplace-cancel-form { display: flex; gap: 8px; }.marketplace-cancel-form input { width: min(220px, 38vw); }
.marketplace-status-confirmed { color: var(--green); background: rgba(53,232,120,.1); }.marketplace-status-held, .marketplace-status-pending { color: var(--orange); background: rgba(255,184,77,.1); }.marketplace-status-cancelled, .marketplace-status-expired { color: var(--red); background: rgba(255,107,107,.1); }
.marketplace-operator-grid { margin-top: 18px; }.marketplace-operator-grid > .card { margin: 0; }.marketplace-projection-note { color: var(--muted); font-size: 12px; line-height: 1.55; }
.marketplace-schedule { display: grid; gap: 9px; margin: 8px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }.marketplace-schedule legend { padding-inline: 8px; font-weight: 800; }.marketplace-schedule > p { margin: 0 0 5px; color: var(--muted); font-size: 12px; }
.marketplace-opening-row { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(2, minmax(95px, .7fr)) minmax(95px, .7fr); gap: 9px; align-items: end; padding: 10px; border-radius: 12px; background: var(--bg-soft); }.marketplace-opening-row label { min-width: 0; }
.marketplace-closures { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }.marketplace-closures h3 { margin: 0; }.marketplace-closures > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.marketplace-closure-list { display: grid; gap: 8px; }.marketplace-closure-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }.marketplace-closure-row > span { min-width: 0; flex: 1; }.marketplace-closure-row small { display: block; margin-top: 3px; color: var(--muted); }
.marketplace-operator-bookings { margin-top: 18px; }.marketplace-operator-bookings .section-heading p { margin: 7px 0 0; color: var(--muted); }.marketplace-remote-booking { max-width: 220px; color: var(--muted); line-height: 1.45; }

.phase5-create-card { margin-bottom: 18px; }
.phase5-create-card h2, .phase5-columns h2 { margin-top: 0; }
.phase5-selector { display: flex; gap: 9px; margin: 0 0 18px; padding-bottom: 4px; overflow-x: auto; }
.phase5-selector .button { flex: 0 0 auto; }
.phase5-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.phase5-hero h2 { margin: 5px 0; font-size: 28px; }.phase5-hero p { margin: 0; color: var(--muted); }
.phase5-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.phase5-list { display: grid; gap: 9px; }
.phase5-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.phase5-row > div { min-width: 0; flex: 1; }.phase5-row strong, .phase5-row small { display: block; }.phase5-row small { margin-top: 3px; color: var(--muted); }
.phase5-colour { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--team-primary) 0 50%, var(--team-secondary) 50% 100%); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.phase5-score-form { display: flex; align-items: center; gap: 7px; }.phase5-score-form input { width: 54px; min-height: 36px; padding: 6px; text-align: center; }
.table-scroll { max-width: 100%; overflow-x: auto; }.table-scroll table { width: 100%; border-collapse: collapse; }.table-scroll th, .table-scroll td { padding: 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }


/* Social workspace: direct messages, contextual players and vacancy board */
.sidebar { overflow-y: auto; scrollbar-width: thin; }
.main-nav { gap: 4px; margin-block: 30px 24px; }
.main-nav a { min-height: 43px; }
.topbar { position: sticky; top: 0; z-index: 24; }
.page-heading-rich { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(53,232,120,.08), rgba(16,30,24,.82)); }
.page-heading-rich h1 { max-width: 880px; }
.button-compact { min-height: 36px; padding-inline: 12px; border-radius: 10px; font-size: 11px; }
.player-card { min-height: 116px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.player-card:hover, .player-card:focus-within { transform: translateY(-2px); border-color: rgba(53,232,120,.28); box-shadow: 0 18px 45px rgba(0,0,0,.16); }
.player-card-actions { display: grid; justify-items: end; gap: 10px; }
.player-message-action { margin: 0; }
.player-message-action .button { white-space: nowrap; }
.player-avatar img, .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.player-avatar-small { width: 38px; height: 38px; flex: 0 0 38px; font-size: 12px; }
.context-player-list, .vacancy-publish-panel { margin-top: 16px; border-top: 1px solid var(--line); }
.context-player-list > summary, .vacancy-publish-panel > summary, .vacancy-management > summary {
  padding: 14px 2px 2px; color: var(--green); cursor: pointer; font-size: 12px; font-weight: 800;
}
.context-player-list > summary::marker, .vacancy-publish-panel > summary::marker, .vacancy-management > summary::marker { color: var(--green); }
.context-player-grid { display: grid; gap: 8px; margin-top: 13px; }
.context-player {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px;
  min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
}
.context-player > span:nth-child(2) { min-width: 0; }
.context-player strong, .context-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-player small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.inline-empty { margin: 12px 0 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; }
.inline-empty strong, .inline-empty p { display: block; margin: 0; }
.inline-empty p { margin-top: 5px; }
.vacancy-publish-panel > form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 13px; padding: 14px; border-radius: 14px; background: var(--bg-soft); }
.vacancy-publish-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.vacancy-publish-panel .span-2 { grid-column: 1 / -1; }
.vacancy-board-link { display: inline-block; margin-top: 16px; color: var(--green); font-size: 12px; font-weight: 800; }

/* Direct inbox */
.direct-contacts { margin-bottom: 18px; padding: 22px; }
.direct-contacts-heading { align-items: flex-start; }
.direct-contacts-heading h2 { margin: 5px 0 0; }
.direct-contacts-heading p { margin: 8px 0 0; max-width: 68ch; color: var(--muted); line-height: 1.55; }
.direct-contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 10px;
  margin-top: 18px;
}
.direct-contact { align-content: start; min-height: 0; }
.direct-contact-groups { margin-top: 5px; color: var(--green) !important; overflow-wrap: anywhere; }
.direct-contact-list > .inline-empty { grid-column: 1 / -1; }
.direct-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.75fr); gap: 18px; align-items: start; }
.direct-layout > .panel { margin: 0; padding: 22px; }
.direct-discovery { position: sticky; top: 112px; }
.direct-discovery h2, .direct-inbox-panel h2 { margin: 5px 0 0; }
.direct-discovery > p { margin: 8px 0 18px; color: var(--muted); line-height: 1.55; }
.direct-inbox { display: grid; gap: 8px; margin-top: 16px; }
.direct-inbox-row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px;
  min-height: 78px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.direct-inbox-row:hover, .direct-inbox-row:focus-visible { transform: translateX(2px); border-color: rgba(53,232,120,.35); background: var(--panel-2); }
.direct-inbox-row.has-unread { border-color: rgba(53,232,120,.28); background: linear-gradient(100deg, rgba(53,232,120,.09), var(--bg-soft)); }
.direct-avatar { width: 48px; height: 48px; flex: 0 0 48px; }
.direct-inbox-copy, .direct-inbox-copy > span { min-width: 0; }
.direct-inbox-copy strong, .direct-inbox-copy small, .direct-inbox-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-inbox-copy small, .direct-inbox-copy em { color: var(--muted); font-size: 10px; font-style: normal; }
.direct-inbox-copy small { margin-top: 2px; }.direct-inbox-copy em { margin-top: 8px; font-size: 11px; }
.direct-inbox-meta { display: grid; justify-items: end; gap: 7px; color: var(--muted); font-size: 10px; }
.direct-search { max-width: none; margin: 0; }
.direct-search-results { display: grid; gap: 8px; margin-top: 14px; }
.direct-result { grid-template-columns: auto minmax(0,1fr); }
.direct-result .player-message-action { grid-column: 1 / -1; width: 100%; }
.direct-result .button { width: 100%; }
.direct-search-tip { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; margin-top: 18px; padding: 15px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); }
.direct-search-tip span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(53,232,120,.1); color: var(--green); font-weight: 900; }
.direct-search-tip p { margin: 0; font-size: 11px; line-height: 1.5; }
.direct-network { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.direct-network-heading { align-items: flex-start; }
.direct-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: .75rem;
}
.direct-network-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--bg-soft);
}
.direct-network-identity { display: grid; min-width: 0; gap: .16rem; }
.direct-network-identity > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-network-identity small { color: var(--muted); }
.network-affinity {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: .32rem .55rem;
  border: 1px solid rgba(75, 239, 145, .2);
  border-radius: 999px;
  background: rgba(75, 239, 145, .08);
  color: var(--green);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}
.network-affinity-community { border-color: var(--line); background: var(--panel-2); color: var(--muted-strong); }
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
  color: var(--muted);
}
.direct-network-pagination { margin-top: 0; }
.direct-empty { margin-top: 16px; }
.direct-thread-heading { align-items: center; }
.direct-thread-heading .text-link { display: inline-block; margin-bottom: 16px; color: var(--green); font-weight: 800; }
.direct-profile-heading { display: flex; align-items: center; gap: 14px; }
.direct-profile-heading h1 { margin-block: 4px; }
.direct-mute-form { display: flex; align-items: end; gap: 8px; }
.direct-mute-form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.direct-thread { max-width: 980px; }
.direct-thread .chat-message > small { display: block; margin-top: 7px; text-align: right; color: var(--muted); }
.direct-compose[aria-busy="true"] { opacity: .75; }

/* Vacancy board */
.segmented-nav { display: flex; width: fit-content; gap: 5px; margin: -10px 0 22px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-soft); }
.segmented-nav a { padding: 9px 15px; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 800; }
.segmented-nav a.is-active { background: var(--green); color: #06130b; }
.vacancy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.vacancy-card { position: relative; overflow: hidden; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(21,39,31,.92), rgba(12,24,19,.96)); box-shadow: 0 18px 50px rgba(0,0,0,.12); }
.vacancy-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--vacancy-team-color); }
.vacancy-card-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
.vacancy-card-header h2 { margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vacancy-team-mark { width: 42px; height: 42px; border-radius: 13px; background: var(--vacancy-team-color); box-shadow: 0 0 0 5px color-mix(in srgb, var(--vacancy-team-color) 18%, transparent); }
.vacancy-pill { align-self: start; }
.vacancy-pill-filled { color: var(--blue); }.vacancy-pill-closed, .vacancy-pill-expired, .vacancy-pill-cancelled { color: var(--muted); }
.vacancy-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 18px; }
.vacancy-facts span { padding: 11px; border-radius: 11px; background: var(--bg-soft); }
.vacancy-facts small, .vacancy-facts strong { display: block; }
.vacancy-facts small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.vacancy-facts strong { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.vacancy-capacity { display: grid; grid-template-columns: auto minmax(100px,1fr) auto; align-items: center; gap: 12px; margin-top: 16px; }
.vacancy-capacity span strong, .vacancy-capacity span small { display: block; }
.vacancy-capacity span strong { color: var(--green); font-size: 27px; line-height: 1; }.vacancy-capacity span small, .vacancy-capacity > small { color: var(--muted); font-size: 10px; }
.vacancy-capacity progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 99px; background: var(--bg); }
.vacancy-capacity progress::-webkit-progress-bar { background: var(--bg); }.vacancy-capacity progress::-webkit-progress-value { background: var(--green); }.vacancy-capacity progress::-moz-progress-bar { background: var(--green); }
.vacancy-note { margin: 16px 0 0; padding: 13px 15px; border-left: 3px solid var(--vacancy-team-color); border-radius: 0 11px 11px 0; background: rgba(0,0,0,.16); color: #cad8d0; font-size: 12px; line-height: 1.55; }
.vacancy-card-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.vacancy-card-footer > span:first-child { margin-right: auto; }.vacancy-card-footer small, .vacancy-card-footer strong { display: block; }.vacancy-card-footer small { color: var(--muted); font-size: 9px; }.vacancy-card-footer strong { margin-top: 3px; font-size: 11px; }
.application-state { padding: 6px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 10px; font-weight: 850; }
.application-state-accepted { background: rgba(53,232,120,.12); color: var(--green); }.application-state-pending { background: rgba(255,177,88,.12); color: var(--orange); }.application-state-rejected, .application-state-withdrawn { color: var(--muted); }
.vacancy-apply-panel { width: 100%; }.vacancy-apply-panel > summary { list-style: none; }.vacancy-apply-panel > summary::-webkit-details-marker { display: none; }
.vacancy-apply-panel > form { display: grid; gap: 10px; margin-top: 10px; padding: 13px; border-radius: 12px; background: var(--bg-soft); }
.vacancy-apply-panel label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.vacancy-management { margin-top: 16px; border-top: 1px solid var(--line); }
.vacancy-management-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 13px 0; }
.vacancy-management-toolbar .text-link { color: var(--green); font-size: 11px; }
.vacancy-applications { display: grid; gap: 8px; }
.vacancy-application-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.vacancy-application-row > span:nth-child(2) { min-width: 0; }.vacancy-application-row strong, .vacancy-application-row small, .vacancy-application-row em { display: block; }.vacancy-application-row small, .vacancy-application-row em { margin-top: 3px; color: var(--muted); font-size: 10px; }.vacancy-application-row em { white-space: normal; line-height: 1.4; }
.vacancy-application-row .player-message-action, .vacancy-decision-actions { grid-column: 2 / -1; }
.vacancy-decision-actions { display: flex; gap: 8px; }
.vacancy-empty .button { margin-top: 12px; }

@media (max-width: 1100px) {
  .direct-layout { grid-template-columns: 1fr; }
  .direct-discovery { position: static; }
  .vacancy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-heading-rich { padding: 18px; }
  .player-card { grid-template-columns: auto minmax(0,1fr); }
  .player-card-actions { grid-column: 1 / -1; width: 100%; grid-template-columns: auto minmax(0,1fr); align-items: center; }
  .player-message-action, .player-message-action .button { width: 100%; }
  .context-player { grid-template-columns: auto minmax(0,1fr); }
  .context-player .player-message-action { grid-column: 1 / -1; }
  .vacancy-publish-panel > form { grid-template-columns: 1fr; }
  .vacancy-publish-panel .span-2 { grid-column: auto; }
  .direct-thread-heading, .direct-mute-form { width: 100%; }
  .direct-mute-form { align-items: stretch; flex-direction: column; }
  .direct-inbox-row { grid-template-columns: auto minmax(0,1fr); }
  .direct-inbox-meta { grid-column: 2; grid-auto-flow: column; justify-content: end; align-items: center; }
  .vacancy-facts { grid-template-columns: 1fr; }
  .vacancy-capacity { grid-template-columns: auto minmax(80px,1fr); }.vacancy-capacity > small { grid-column: 1 / -1; }
  .vacancy-card-header { grid-template-columns: auto minmax(0,1fr); }.vacancy-card-header .status { grid-column: 2; justify-self: start; }
  .vacancy-application-row { grid-template-columns: auto minmax(0,1fr); }.vacancy-application-row > .application-state { grid-column: 2; justify-self: start; }
  .vacancy-application-row .player-message-action, .vacancy-decision-actions { grid-column: 1 / -1; }
  .vacancy-decision-actions .button { flex: 1; }
  .segmented-nav { width: 100%; overflow-x: auto; }.segmented-nav a { flex: 1 0 auto; text-align: center; }
}
@media (max-width: 680px) {
  .direct-network-card { grid-template-columns: auto minmax(0, 1fr); }
  .direct-network-card .network-affinity { grid-column: 2; }
  .direct-network-card .player-message-action { grid-column: 1 / -1; width: 100%; }
  .direct-network-card .button { width: 100%; }
}
@media (max-width: 480px) {
  .page-content { padding-inline: 12px; }
  .direct-layout > .panel, .direct-contacts, .vacancy-card { padding: 15px; }
  .direct-inbox-row { padding: 10px; }.direct-avatar { width: 42px; height: 42px; flex-basis: 42px; }
  .direct-inbox-copy em { max-width: 56vw; }
  .vacancy-management-toolbar { align-items: stretch; flex-direction: column; }
  .vacancy-management-toolbar form, .vacancy-management-toolbar .button { width: 100%; }
}
@media (forced-colors: active) {
  .vacancy-team-mark, .chat-unread-badge, .segmented-nav a.is-active { border: 1px solid ButtonText; }
}

/* Public professional-football data -------------------------------------- */
.home-football-summary { padding-block: clamp(2rem, 5vw, 4.5rem) 0; }
.football-summary {
  min-width: 0;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line));
  border-radius: 1.25rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--green) 6%), var(--panel));
  box-shadow: 0 1.25rem 3.5rem rgba(6, 20, 12, .08);
}
.football-summary-heading,
.football-panel-heading,
.football-page-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.football-summary-heading h2,
.football-panel-heading h2 { margin: .2rem 0 0; }
.football-summary-heading p { margin: .35rem 0 0; color: var(--muted); }
.football-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
.football-score-card,
.football-table-card,
.football-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
}
.football-score-card,
.football-table-card { padding: 1rem; }
.football-score-card h3,
.football-table-card h3 { margin: 0 0 .8rem; font-size: 1rem; }
.football-score-list,
.football-top-list,
.football-fixture-list { list-style: none; margin: 0; padding: 0; }
.football-score-list li,
.football-top-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .65rem 0;
  border-top: 1px solid var(--line);
}
.football-score-list li:first-child,
.football-top-list li:first-child { border-top: 0; }
.football-score-list li > span { display: grid; gap: .15rem; min-width: 0; }
.football-score-list li > span b,
.football-top-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.football-score-list li > strong { display: flex; align-items: center; gap: .35rem; font-size: 1.05rem; }
.football-score-list i,
.football-fixture-list i { color: var(--muted); font-style: normal; }
.football-top-list li span { display: flex; align-items: center; gap: .65rem; }
.football-top-list li span b {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--green) 15%, var(--panel-2));
  color: var(--green);
}
.football-attribution { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; }
.football-attribution a { color: inherit; }
.football-hero {
  padding: clamp(2.5rem, 7vw, 5rem) 0;
  background:
    radial-gradient(circle at 82% 25%, rgba(29, 185, 102, .15), transparent 34%),
    linear-gradient(135deg, #0c2519, #153b29);
  color: #fff;
}
.football-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: 2rem; align-items: end; }
.football-hero h1 { max-width: 15ch; margin: .35rem 0 .7rem; color: #fff; font-size: clamp(2.2rem, 6vw, 5.2rem); line-height: .95; }
.football-hero p { max-width: 48rem; margin: 0; color: rgba(255, 255, 255, .76); font-size: 1.05rem; }
.football-selector {
  display: grid;
  gap: .55rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(1rem);
}
.football-selector label { font-weight: 850; }
.football-selector > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.football-selector select { min-width: 0; width: 100%; background: #fff; color: #101c16; }
.football-selector small { color: rgba(255, 255, 255, .68); }
.football-page { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 7vw, 6rem); }
.football-page-status { margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.football-data-warning,
.football-provisional-note {
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  border-radius: .75rem;
  color: var(--muted);
  background: color-mix(in srgb, #f5b94f 9%, var(--panel));
  font-size: .85rem;
}
.football-data-warning { border: 1px solid color-mix(in srgb, #d89225 38%, var(--line)); color: var(--text); }
.football-provisional-note { border-left: 3px solid color-mix(in srgb, var(--green) 55%, var(--line)); }
.football-tabs {
  position: sticky;
  top: calc(78px + .5rem);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  margin: 0 0 1rem;
  padding: .4rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 .5rem 1.75rem rgba(6, 20, 12, .08);
  backdrop-filter: blur(1rem);
}
.football-tabs a {
  padding: .8rem .65rem;
  border-radius: .7rem;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}
.football-tabs a[aria-selected="true"] { background: var(--green); color: #06140c; }
.football-panel { margin-top: 1rem; padding: clamp(.8rem, 2vw, 1.4rem); scroll-margin-top: 6rem; }
.football-panel[hidden] { display: none; }
.football-panel-heading { margin-bottom: 1rem; }
.football-panel-heading > strong { color: var(--muted); }
.football-standings-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.football-standings-table :where(th, td) { padding: .75rem .65rem; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.football-standings-table th:nth-child(2) { min-width: 12rem; text-align: left; }
.football-standings-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
.football-standings-table .is-top-five { background: color-mix(in srgb, var(--green) 6%, transparent); }
.football-fixture-list { display: grid; gap: .65rem; }
.football-fixture-list li {
  display: grid;
  grid-template-columns: minmax(8rem, .55fr) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}
.football-fixture-list time { color: var(--muted); font-size: .85rem; }
.football-fixture-list li > span { display: grid; gap: .2rem; }
.football-fixture-list li > strong { display: flex; gap: .4rem; align-items: center; }
.football-unavailable {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid color-mix(in srgb, #d89225 46%, var(--line));
  border-radius: 1rem;
  background: color-mix(in srgb, #f5b94f 9%, var(--panel));
}
.football-unavailable > span { font-size: 2rem; color: #bd7612; }
.football-unavailable h2,
.football-unavailable p { margin: 0 0 .4rem; }
.football-unavailable small { color: var(--muted); }
.football-unavailable-compact { margin-top: 1rem; }
.football-empty { margin: 0; padding: 2rem 1rem; color: var(--muted); text-align: center; }
.football-page-attribution { padding-inline: .25rem; }

@media (max-width: 800px) {
  .football-summary-grid,
  .football-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .football-hero h1 { max-width: 12ch; }
  .football-fixture-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .football-fixture-list time { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .football-summary-heading .button { width: 100%; }
  .football-selector > div { grid-template-columns: minmax(0, 1fr); }
  .football-selector .button { width: 100%; }
  .football-tabs { overflow-x: auto; grid-template-columns: repeat(3, minmax(8.5rem, 1fr)); }
  .football-fixture-list li { gap: .65rem; padding: .8rem; }
  .football-standings-table :where(th, td) { padding: .65rem .5rem; }
}

@media (forced-colors: active) {
  .football-tabs a[aria-selected="true"],
  .football-standings-table .is-top-five { outline: 2px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; filter: none !important; }
  .product-window, .floating-card { transform: none !important; }
}
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 760px; }.hero-product { min-height: 540px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }.feature-highlight { grid-column: span 2; }
  .workflow-grid, .security-grid, .faq-grid { gap: 55px; }.footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 28px; }
  .auth-page-grid { grid-template-columns: 1fr; gap: 35px; }.auth-side-copy { max-width: 700px; }
  .locale-current-name { display: none; }
}
@media (max-width: 1120px) {
  .public-nav { position: relative; }
  .public-menu-toggle { display: block; }
  .public-navigation {
    position: absolute;
    top: calc(100% + .5rem);
    left: 20px;
    right: 20px;
    display: none;
    align-items: stretch;
    max-height: calc(100dvh - 6rem);
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #0d1b15;
    box-shadow: var(--shadow);
  }
  .public-navigation.is-open { display: grid; }
  .public-navigation a { padding: 9px; }
  .public-navigation .nav-cta { text-align: center; }
  .public-nav-actions { margin-left: auto; }
}
@media (max-width: 780px) {
  .public-menu-toggle { display: block; }
  .public-navigation {
    position: absolute; top: 70px; left: 20px; right: 20px; display: none; align-items: stretch;
    padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #0d1b15; box-shadow: var(--shadow);
  }
  .public-navigation.is-open { display: grid; }.public-navigation a { padding: 9px; }.public-navigation .nav-cta { text-align: center; }
  .public-nav-actions { margin-left: auto; }
  .hero { padding: 64px 0 75px; }.hero h1 { font-size: clamp(45px, 13vw, 69px); }.hero-grid { gap: 35px; }
  .floating-alert { right: 2px; }.floating-ready { left: 2px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }.proof-grid div:nth-child(3) { border-top: 1px solid var(--line); }
  .proof-grid div:nth-child(4) { border-top: 1px solid var(--line); }
  .public-section { padding: 82px 0; }.feature-grid, .mode-grid { grid-template-columns: 1fr; }.feature-highlight { grid-column: auto; }
  .mode-card { min-height: 560px; }.mode-card-unattended { grid-column: auto; min-height: auto; }
  .mode-card-unattended h3, .mode-card-unattended ul { max-width: none; }
  .unattended-mode-visual { position: static; width: 100%; margin-top: 2rem; }
  .workflow-grid, .security-grid, .faq-grid { grid-template-columns: 1fr; }.sticky-heading { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > div:first-child { grid-column: 1 / -1; }
  .help-layout { grid-template-columns: 1fr; }.help-contact { position: static; }.help-topics { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }.profile-photo-panel { position: static; }
  .analytics-consent { grid-template-columns: 1fr; gap: 16px; }
  .analytics-consent-actions { justify-content: flex-end; }
  .phase5-columns { grid-template-columns: 1fr; }
  .phase5-hero { align-items: flex-start; flex-direction: column; }
  .marketplace-grid, .marketplace-operator-grid, .marketplace-detail-grid { grid-template-columns: 1fr; }
  .marketplace-unit-row, .marketplace-booking-row { align-items: flex-start; flex-wrap: wrap; }
  .marketplace-opening-row { grid-template-columns: 1fr 1fr; }
  .marketplace-booking-row .marketplace-actions { width: 100%; }
}
@media (max-width: 560px) {
  .public-container { width: min(100% - 28px, 1180px); }.public-nav { min-height: 68px; }.public-nav .brand small { display: none; }
  .football-tabs { top: calc(68px + .5rem); }
  .hero h1 { font-size: 47px; }.hero-copy > p { font-size: 16px; }.hero-actions .button { width: 100%; }
  .hero-trust { display: grid; gap: 8px; }.hero-product { min-height: 465px; }
  .product-window { padding: 10px; transform: none; }.product-match { padding: 16px; }.product-stats div { padding: 10px; }
  .product-stats strong { font-size: 19px; }.product-timeline small { display: none; }.floating-card { display: none; }
  .proof-grid { grid-template-columns: 1fr 1fr; }.proof-grid div { padding: 20px 9px; }
  .section-heading h2, .security-grid h2, .final-cta h2 { font-size: 40px; }
  .feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: auto; }.mini-calendar { grid-template-columns: repeat(7, 1fr); }
  .mode-card { min-height: 620px; padding: 25px; }.manager-visual { width: 290px; }.captain-visual { left: 20px; right: 20px; grid-template-columns: 1fr; }.captain-visual > i { text-align: center; }
  .workflow-list li { grid-template-columns: 50px 1fr; }.security-grid { gap: 40px; }
  .final-cta-inner { padding: 45px 25px; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 20px; }.footer-bottom { flex-direction: column; }
  .legal-hero { padding-top: 58px; }.legal-document { padding-block: 45px 80px; }
  .auth-page { padding: 20px 15px; }.auth-page-grid { padding-top: 50px; }.auth-card-wide { padding: 21px; }.auth-side-copy h1 { font-size: 43px; }
  .profile-form-panel { padding: 18px; }
  .profile-password-form { grid-template-columns: 1fr; }
  .analytics-consent { bottom: 9px; width: calc(100% - 18px); padding: 16px; border-radius: 17px; }
  .analytics-consent-copy { grid-template-columns: 34px 1fr; gap: 11px; }
  .analytics-consent-mark { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
  .analytics-consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .analytics-consent-actions .button { min-width: 0; padding-inline: 10px; }
  .analytics-manage-button { right: 10px; bottom: 10px; }
  .phase5-row { align-items: flex-start; flex-wrap: wrap; }.phase5-score-form { width: 100%; }
  .marketplace-heading-actions { width: 100%; }.marketplace-heading-actions .button { flex: 1; }
  .marketplace-location-picker { align-items: stretch; flex-direction: column; }.marketplace-location-picker .button { width: 100%; }
  .marketplace-facts { grid-template-columns: 1fr; }.marketplace-cancel-form { width: 100%; flex-direction: column; }.marketplace-cancel-form input { width: 100%; }
  .marketplace-opening-row { grid-template-columns: 1fr; }.marketplace-closure-row { align-items: flex-start; flex-direction: column; }.marketplace-closure-row form, .marketplace-closure-row .button { width: 100%; }
}

/* Resilient reflow: 320 px viewports, long translations and 200-400% zoom. */
html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: var(--analytics-consent-offset, 0px);
}
body { max-width: 100%; line-height: 1.5; }
body.has-analytics-consent { padding-bottom: var(--analytics-consent-offset, 0px); }
img, video, canvas { max-width: 100%; height: auto; }
:where(main, section, article, aside, header, footer, nav, div, form, fieldset, label, dl, ol, ul, li) {
  min-width: 0;
}
fieldset { max-width: 100%; }
legend { max-width: 100%; white-space: normal; }
:where(h1, h2, h3, h4, p, li, dt, dd, strong, small, em, label, legend, summary, a, button) {
  overflow-wrap: break-word;
  word-break: normal;
}
:where(code, .breakable-text, a[href^="mailto:"]) { overflow-wrap: anywhere; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, dd) { text-wrap: pretty; }
small { line-height: 1.45; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  max-width: calc(100vw - 1.5rem);
  padding: .75rem 1rem;
  border: 2px solid #06130b;
  border-radius: .75rem;
  color: #06130b;
  background: var(--green);
  box-shadow: var(--shadow);
  font-weight: 850;
  line-height: 1.25;
  translate: 0 calc(-100% - 2rem);
  transition: translate .16s ease;
}
.skip-link:focus { translate: 0 0; }
#main-content:focus { outline: none; }

/* Several phase 3-5 views intentionally share this neutral MVC card. */
.card {
  min-width: 0;
  margin: 0 0 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(21, 39, 31, .88), rgba(12, 24, 19, .92));
  box-shadow: 0 15px 50px rgba(0, 0, 0, .08);
}

:where(.button, .text-button, .mobile-menu, .public-menu-toggle, .locale-selector summary, .calendar-actions > summary) {
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 44px;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}
.button { padding-block: .65rem; }
.button-compact { min-height: 44px; font-size: .8rem; }
.modal-header button, .news-controls button, .operations-action-card button {
  min-width: 44px;
  min-height: 44px;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  font-size: 1rem;
  line-height: 1.35;
}
textarea { resize: vertical; }
.logout-icon { display: none; font-size: 1.15rem; line-height: 1; }

.public-nav .brand,
.public-nav .brand > span:last-child,
.public-nav .brand strong,
.public-nav-actions,
.locale-selector summary,
.public-menu-toggle {
  flex: 0 0 auto;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}
.public-nav .brand strong { display: inline-block; }
.public-nav-actions { max-width: 100%; }
.hero-actions .button { scroll-margin-bottom: calc(var(--analytics-consent-offset, 0px) + 1rem); }

:where(.panel, .metric-card, .player-card, .group-card, .timeline-card, .venue-card,
  .news-card, .feature-card, .mode-card, .marketplace-card, .operations-service,
  .operations-action-card, .vacancy-card, .direct-inbox-row, .context-player) {
  min-width: 0;
}
:where(.panel-header, .timeline-title, .group-top, .news-card-top, .news-card-footer,
  .marketplace-card-top, .marketplace-detail-meta, .operations-heading-actions,
  .operations-queue-age, .operations-security-list > div, .chat-message header,
  .chat-compose > div, .vacancy-card-footer) {
  flex-wrap: wrap;
}
:where(.panel-header, .page-heading, .timeline-title, .news-card-top, .news-card-footer) > * {
  min-width: 0;
}
.notice { align-items: flex-start; }

.metric-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.card-grid, .group-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.chat-hub-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.payment-account-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.operations-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.operations-services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.operations-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.player-info strong, .player-info span, .player-info small,
.context-player strong, .context-player small,
.direct-inbox-copy strong, .direct-inbox-copy small, .direct-inbox-copy em,
.vacancy-card-header h2, .vacancy-facts strong, .chat-hub-card strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.player-message-action .button { white-space: normal; }
.format-pill, .status, .team-color-pill, .application-state, .operations-state {
  max-width: 100%;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
}
.match-main, .match-weather-main > div, .direct-inbox-copy { min-width: 0; }
.match-main span, .match-weather > small, .marketplace-remote-booking { overflow-wrap: anywhere; }
.match-weather-metrics { flex-wrap: wrap; }
.match-weather-metrics span { flex: 1 1 10rem; }

.data-table-wrap, .table-scroll, .cookie-table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.data-table-wrap.is-scrollable-region, .table-scroll.is-scrollable-region,
.cookie-table-wrap.is-scrollable-region {
  border-radius: .75rem;
  box-shadow: inset -1rem 0 1.25rem -1.3rem rgba(221, 255, 232, .5);
}
.data-table-wrap:focus-visible, .table-scroll:focus-visible, .cookie-table-wrap:focus-visible {
  outline: 3px solid rgba(87, 168, 255, .9);
  outline-offset: 3px;
}
.data-table, .table-scroll table, .cookie-table {
  width: max-content;
  min-width: 100%;
}
.data-table th, .data-table td, .table-scroll th, .table-scroll td,
.cookie-table th, .cookie-table td {
  max-width: 32rem;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.data-table th, .table-scroll th, .cookie-table th { white-space: nowrap; }

.segmented-nav, .phase5-selector {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
}
.segmented-nav a, .phase5-selector .button { flex: 1 1 10rem; }
.calendar-actions-menu a { line-height: 1.35; overflow-wrap: anywhere; }
.modal { overflow: auto; overscroll-behavior: contain; }
.modal form { min-width: 0; }
#unattended-dialog,
#unattended-dialog > form,
#unattended-dialog .form-grid,
#unattended-dialog .form-grid > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#unattended-dialog { overflow-x: hidden; overflow-y: auto; }
#unattended-dialog > form { overflow-x: clip; }
#unattended-dialog .modal-header { gap: .75rem; }
#unattended-dialog .modal-header > div { flex: 1 1 auto; min-width: 0; }
#unattended-dialog .modal-header h2 { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .sidebar {
    width: min(18rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    height: 100dvh;
    padding: 1.25rem 1rem;
  }
  .main-nav a { align-items: flex-start; line-height: 1.35; }
  .topbar {
    height: auto;
    min-height: 72px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    padding-block: .625rem;
  }
  .user-menu {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .compact-locale-form { min-width: 0; }
  .page-content { padding: clamp(.75rem, 4vw, 1.5rem); }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading > :last-child, .page-heading > :last-child.button { max-width: 100%; }
  .panel, .operations-service-section { padding: clamp(.9rem, 4vw, 1.5rem); }
  .public-nav {
    position: relative;
    min-height: 68px;
    flex-wrap: wrap;
    column-gap: .5rem;
    row-gap: .5rem;
    padding-block: .5rem;
  }
  .public-nav > .brand { margin-right: auto; }
  .public-nav-actions { margin-left: auto; }
  .public-navigation {
    top: calc(100% + .5rem);
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .locale-selector > div {
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
  }
  .modal {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    border-radius: 1rem;
  }
  .modal form { padding: clamp(1rem, 4vw, 1.5rem); }
}

@media (max-width: 620px) {
  .group-meta, .match-data, .sync-stats { grid-template-columns: 1fr; }
  .last-run { grid-column: auto; }
  .search-bar { max-width: none; flex-direction: column; }
  .search-bar button { width: 100%; min-height: 44px; padding: .65rem 1rem; }
  .marketplace-actions, .payment-actions { align-items: stretch; }
  .marketplace-actions > *, .payment-actions > * { flex: 1 1 100%; }
  .marketplace-actions .button, .payment-actions .button { width: 100%; }
  .marketplace-card-top, .marketplace-detail-meta { align-items: flex-start; flex-direction: column; }
  .chat-message { width: min(96%, 42rem); }
  .chat-compose > div { align-items: stretch; flex-direction: column; }
  .chat-compose .button { width: 100%; }
  .vacancy-decision-actions { flex-wrap: wrap; }
  .vacancy-decision-actions .button { flex: 1 1 12rem; }
  .auth-page-grid { min-height: auto; }
  .login-visual {
    min-height: auto;
    padding: 1.25rem;
  }
  .login-visual .pitch-card { display: none; }
  .login-copy {
    position: static;
    max-width: none;
    margin-top: 2rem;
  }
  .login-copy h1 { font-size: clamp(2.1rem, 12vw, 3rem); line-height: 1; }
  .login-copy p { display: block; font-size: 1rem; }
  .login-panel { padding: 1.25rem; }
  .auth-card h2, .auth-recovery-card h1 { font-size: clamp(1.75rem, 9vw, 2.15rem); }
  .auth-page { padding: 1rem; }
  .auth-page-grid { padding-block: 2rem; }
  .auth-card-wide, .auth-recovery-card { padding: clamp(1rem, 5vw, 1.5rem); }
  .analytics-consent {
    max-height: min(70dvh, 34rem);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .analytics-consent-copy {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .analytics-consent-actions {
    position: relative;
    z-index: 1;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
    background: rgba(9, 21, 15, .98);
  }
}

@media (max-width: 480px) {
  #unattended-dialog > form { padding-inline: .75rem; }
  .public-container { width: calc(100% - 1rem); }
  .public-nav { column-gap: .375rem; }
  .public-nav .brand { gap: .5rem; }
  .public-nav .brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 1.1rem; }
  .public-nav .brand strong { font-size: 1.1rem; letter-spacing: -.025em; }
  .public-nav-actions { gap: .25rem; }
  .locale-selector summary, .public-menu-toggle { min-width: 44px; padding-inline: .6rem; }
  .topbar { grid-template-columns: auto minmax(0, 1fr); }
  .mobile-menu { padding-inline: .7rem; }
  .user-menu {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .4rem;
  }
  .user-menu .avatar { width: 36px; height: 36px; }
  .compact-locale-form { width: 100%; }
  .compact-locale-form select { width: 100%; max-width: none; padding-inline: .5rem 1.5rem; }
  .logout-label { display: none; }
  .logout-icon { display: inline; }
  .logout-button { width: 44px; padding-inline: .5rem; }
  .page-heading h1 { font-size: clamp(2rem, 12vw, 2.75rem); line-height: 1.05; }
  .page-heading-rich { padding: 1rem; }
  .panel-header { align-items: flex-start; }
  .panel-header > a, .panel-header > span { width: 100%; }
  .timeline { gap: .75rem; }
  .timeline::before { display: none; }
  .timeline-section-title { margin-top: 1rem; padding-left: 0; }
  .timeline-card { grid-template-columns: 1fr; }
  .timeline-date {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: .5rem;
    padding: .75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  .timeline-date small { margin-top: 0; }
  .timeline-content { padding: 1rem; }
  .timeline-title { align-items: flex-start; flex-direction: column; }
  .timeline-outcome { width: 100%; justify-content: space-between; }
  .match-weather-main { grid-template-columns: 2rem minmax(0, 1fr); align-items: start; }
  .match-weather-main b { grid-column: 2; font-size: 1.4rem; }
  .match-weather-metrics { display: grid; grid-template-columns: 1fr; }
  .match-color-form, .match-color-form > div { align-items: stretch; flex-direction: column; }
  .match-color-form label { width: 100%; min-width: 0; }
  .match-color-form .button { width: 100%; }
  .player-card-actions { grid-template-columns: 1fr; justify-items: stretch; }
  .rating-ring { justify-self: start; }
  .context-player { grid-template-columns: auto minmax(0, 1fr); }
  .context-player .player-message-action { grid-column: 1 / -1; }
  .direct-inbox-meta { justify-content: start; justify-items: start; }
  .direct-profile-heading { align-items: flex-start; flex-direction: column; }
  .chat-message header { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .vacancy-capacity { grid-template-columns: 1fr; }
  .vacancy-capacity > small { grid-column: auto; }
  .vacancy-card-header { grid-template-columns: auto minmax(0, 1fr); }
  .vacancy-card-header .status { grid-column: 1 / -1; justify-self: start; }
  .operations-overall { grid-template-columns: 1fr; }
  .operations-overall p { grid-column: auto; }
  .operations-queue-grid { grid-template-columns: 1fr; }
  .operations-action-card { grid-template-columns: 2rem minmax(0, 1fr); }
  .operations-action-card > :last-child { grid-column: 2; justify-self: start; }
  .phase5-score-form { align-items: stretch; flex-direction: column; }
  .phase5-score-form input, .phase5-score-form .button { width: 100%; }
  .marketplace-unit-row, .marketplace-booking-row { align-items: stretch; flex-direction: column; }
  .marketplace-booking-row > form, .marketplace-booking-row .button { width: 100%; }
  .marketplace-location-picker { align-items: stretch; flex-direction: column; }
  .marketplace-location-picker .button { width: 100%; }
  .analytics-consent-actions { grid-template-columns: 1fr; }
  .analytics-manage-button {
    position: static;
    inset: auto;
    display: flex;
    width: fit-content;
    max-width: calc(100% - 1rem);
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin: 1rem auto calc(1rem + env(safe-area-inset-bottom, 0px));
    padding: .65rem 1rem;
    white-space: normal;
  }
  .hero { padding-block: 3.5rem; }
  .hero h1 { font-size: clamp(2.25rem, 13vw, 3rem); line-height: 1; }
  .hero-product { min-height: auto; }
  .product-window-top { grid-template-columns: 2.625rem minmax(0, 1fr); }
  .product-window-top .live-chip { grid-column: 2; justify-self: start; }
  .product-match-heading { align-items: flex-start; flex-direction: column; }
  .product-stats, .product-teams { grid-template-columns: 1fr; }
  .product-timeline span { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .product-timeline small { grid-column: 2; }
  .proof-grid, .footer-grid { grid-template-columns: 1fr; }
  .proof-grid div { border: 0; border-top: 1px solid var(--line); }
  .footer-grid > div:first-child { grid-column: auto; }
  .section-heading h2, .security-grid h2, .final-cta h2 {
    font-size: clamp(2rem, 11vw, 2.65rem);
    line-height: 1.05;
  }
  .mode-card { min-height: auto; padding: 1.25rem; }
  .mode-card h3 { margin-top: 2rem; }
  .unattended-mode-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unattended-mode-visual span:not(:last-child)::after { display: none; }
  .manager-visual, .captain-visual {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 2rem;
  }
  .manager-visual { height: 10rem; border-radius: 4rem 0 0 0; }
  .captain-visual { grid-template-columns: 1fr; }
  .workflow-list li, .security-points article, .numbered-steps li {
    grid-template-columns: 1fr;
  }
  .faq-list p { padding-right: 0; }
  .final-cta-inner { padding: 2rem 1.25rem; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(221, 255, 232, .28); --muted: #b8c8bf; --muted-strong: #d2ded6; }
  .button-secondary, input, select, textarea, .card, .panel { border-color: rgba(221, 255, 232, .34); }
}

/* Final shell cascade: keep this after legacy page rules. */
@media (min-width: 961px) {
  .app-shell { display: grid; grid-template-columns: clamp(13rem, 15vw, 14.5rem) minmax(0, 1fr); align-items: start; min-width: 320px; min-height: 100dvh; overflow-x: clip; }
  .sidebar { position: sticky; inset: 0 auto auto 0; width: auto; max-width: none; height: auto; max-height: 100dvh; padding: 1rem .75rem .75rem; overflow: hidden auto; translate: none; }
  .main-content { width: 100%; min-width: 0; min-height: 100dvh; overflow: clip visible; }
  .topbar { height: auto; min-height: 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: .65rem clamp(1rem, 2.5vw, 2rem); }
  .page-content { width: min(92rem, 100%); max-width: 100%; margin-inline: auto; padding: clamp(1rem, 2.5vw, 2.25rem); }
}
@media (max-width: 1180px) and (min-width: 961px) {
  .app-shell { grid-template-columns: 12.25rem minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .app-shell { display: block; min-width: 320px; min-height: 100dvh; overflow-x: clip; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(19rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); height: 100dvh; max-height: none; padding: 1rem; overflow: hidden auto; translate: -105% 0; }
  .sidebar.is-open { translate: 0 0; }
  .sidebar-close, .mobile-menu { display: grid; place-items: center; }
  .main-content { min-width: 0; min-height: 100dvh; }
  .topbar { height: auto; min-height: 4.25rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .75rem; padding: .625rem .85rem; }
  .topbar-context { display: block; min-width: 0; }
  .topbar-play, .user-menu-copy { display: none; }
  .page-content { width: 100%; max-width: 100%; padding: clamp(.85rem, 4vw, 1.5rem); }
}

/* Open-match discovery, public SEO pages and commercial console. */
.discovery-hero,
.discovery-detail-hero,
.commercial-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.35rem;
}
.discovery-hero h1,
.discovery-detail-hero h1 {
  max-width: 18ch;
  margin: .25rem 0 .55rem;
  font-size: clamp(2.15rem, 4.5vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.discovery-hero p,
.discovery-detail-hero p { max-width: 48rem; margin: 0; color: var(--muted-strong); }
.discovery-search-shell {
  margin-bottom: 1.75rem;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid rgba(75, 239, 145, .24);
  border-radius: 1.35rem;
  background: linear-gradient(145deg, rgba(36, 209, 113, .11), rgba(8, 24, 17, .9) 58%);
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .16);
}
.discovery-search-main {
  display: grid;
  grid-template-columns: auto minmax(10rem, 16rem) auto;
  align-items: end;
  gap: .8rem;
}
.discovery-search-main label { display: grid; gap: .35rem; color: var(--muted-strong); font-size: .82rem; }
.discovery-location-status { margin: .7rem 0 0; color: var(--muted); font-size: .82rem; }
.discovery-filters { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.discovery-filters summary { width: fit-content; cursor: pointer; color: var(--green); font-weight: 750; }
.discovery-filters > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.discovery-filters label { display: grid; gap: .35rem; min-width: 0; color: var(--muted-strong); font-size: .8rem; }
.discovery-weekdays {
  display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; margin: 1rem 0 0; padding: 0; border: 0;
}
.discovery-weekdays legend { width: 100%; margin-bottom: .1rem; color: var(--muted-strong); font-size: .8rem; }
.discovery-weekdays label {
  display: inline-flex; align-items: center; gap: .4rem; min-width: 0; padding: .45rem .65rem;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025);
  color: var(--muted-strong); font-size: .78rem; line-height: 1.25; cursor: pointer;
}
.discovery-weekdays input { width: 1rem; height: 1rem; flex: 0 0 auto; margin: 0; }
.discovery-results { min-width: 0; }
.discovery-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.discovery-card {
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: linear-gradient(155deg, rgba(20, 42, 31, .95), rgba(8, 20, 14, .98));
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .14);
}
.discovery-card > header,
.discovery-card > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
}
.discovery-card > header { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .018); }
.discovery-card > footer { border-top: 1px solid var(--line); }
.discovery-card-body { padding: 1.15rem 1rem; }
.discovery-card-body time { color: var(--green); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.discovery-card h2 { margin: .45rem 0 .3rem; font-size: clamp(1.25rem, 2.5vw, 1.55rem); letter-spacing: -.025em; overflow-wrap: anywhere; }
.discovery-location { margin: 0 0 .9rem; color: var(--muted); overflow-wrap: anywhere; }
.discovery-format,
.discovery-slots,
.discovery-tags span {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  min-height: 1.8rem;
  padding: .28rem .58rem;
  border: 1px solid rgba(75, 239, 145, .24);
  border-radius: 999px;
  color: #dfffea;
  background: rgba(36, 209, 113, .1);
  font-size: .75rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.discovery-slots { color: var(--green); }
.discovery-private-badge { color: #ffd28b; border-color: rgba(255, 176, 75, .38); background: rgba(255, 176, 75, .1); }
.discovery-private-group { margin: -.05rem 0 .85rem; color: #b9d5c6; font-weight: 750; }
.discovery-private-request {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: end;
}
.discovery-private-request label { display: grid; gap: .3rem; color: var(--muted-strong); font-size: .78rem; font-weight: 750; }
.discovery-private-request select { min-height: 2.75rem; }
.discovery-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.discovery-tags span { border-color: var(--line); color: var(--muted-strong); background: rgba(255, 255, 255, .025); }
.discovery-card-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; min-width: 0; margin: 1rem 0 0;
}
.discovery-card-facts div { min-width: 0; padding: .65rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(255,255,255,.02); }
.discovery-card-facts dt { color: var(--muted); font-size: .7rem; line-height: 1.35; text-transform: uppercase; letter-spacing: .035em; overflow-wrap: anywhere; }
.discovery-card-facts dd { margin: .25rem 0 0; color: var(--text); font-size: .8rem; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
.discovery-verified { display: inline-grid; width: 1.15rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--green); color: #04130b; font-size: .7rem; vertical-align: middle; }
.discovery-organizer,
.trust-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; margin-top: 1rem; }
.discovery-organizer span:last-child,
.trust-summary div { display: grid; min-width: 0; }
.discovery-organizer strong,
.trust-summary strong { overflow-wrap: anywhere; }
.discovery-organizer small,
.trust-summary p { margin: .1rem 0 0; color: var(--muted); }
.discovery-empty { min-height: 17rem; display: grid; place-items: center; align-content: center; gap: .55rem; text-align: center; }
.discovery-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: 1.25rem; color: var(--muted); text-align: center; }
.empty-state-icon { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--green); background: rgba(36, 209, 113, .12); font-size: 1.5rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; color: var(--muted); font-size: .85rem; }
.breadcrumb a { color: var(--green); }
.discovery-price { display: grid; flex: 0 0 auto; gap: .15rem; min-width: 10rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.discovery-price small,
.discovery-price span { color: var(--muted); }
.discovery-price strong { font-size: 1.35rem; }
.discovery-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); gap: 1rem; align-items: start; }
.discovery-detail-main { display: grid; gap: 1rem; min-width: 0; }
.discovery-reserve-card { position: sticky; top: 5.5rem; display: grid; gap: .85rem; }

@media (max-width: 540px) {
  .discovery-private-request { grid-template-columns: minmax(0, 1fr); }
  .discovery-private-request .button { width: 100%; }
}
.discovery-reserve-card h2,
.discovery-reserve-card p { margin: 0; }
.discovery-reserve-card small { color: var(--muted); line-height: 1.55; }
.discovery-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .8rem; margin: 0; }
.discovery-specs div { min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: .85rem; background: rgba(255,255,255,.02); }
.discovery-specs dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.discovery-specs dd { margin: .3rem 0 0; font-weight: 750; overflow-wrap: anywhere; }
.onboarding-shell { width: min(65rem, 100%); margin-inline: auto; }
.onboarding-shell > header { max-width: 45rem; margin-bottom: 1.5rem; }
.onboarding-shell h1 { margin: .3rem 0 .55rem; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.045em; }
.intent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .85rem; padding: 0; border: 0; }
.intent-grid legend { margin-bottom: .75rem; color: var(--muted-strong); font-weight: 750; }
.intent-card { position: relative; display: grid; min-width: 0; gap: .55rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); cursor: pointer; }
.intent-card:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 209, 113, .12); }
.intent-card input { position: absolute; inset: .85rem .85rem auto auto; width: 1.1rem; height: 1.1rem; }
.intent-card > span { display: grid; width: 2.5rem; aspect-ratio: 1; place-items: center; border-radius: .75rem; background: rgba(36,209,113,.12); color: var(--green); }
.intent-card small { color: var(--muted); line-height: 1.5; }
.onboarding-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.public-discovery-hero { padding: clamp(3.5rem, 8vw, 7rem) 0 2.5rem; background: radial-gradient(circle at 75% 15%, rgba(36,209,113,.17), transparent 40%); }
.public-discovery-hero h1 { max-width: 18ch; margin: .3rem 0 .6rem; font-size: clamp(2.25rem, 6vw, 5rem); line-height: .96; letter-spacing: -.055em; }
.public-discovery-hero p { max-width: 50rem; color: var(--muted-strong); }
.public-discovery-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 2rem; align-items: end; }
.public-match-cta { display: grid; gap: .7rem; padding: 1.2rem; border: 1px solid rgba(75,239,145,.3); border-radius: 1.2rem; background: rgba(8,20,14,.88); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.25); }
.public-match-cta strong { font-size: 1.75rem; }
.public-match-cta span,
.public-match-cta small { color: var(--muted); }
.public-discovery-content { display: grid; gap: 1rem; padding-block: 2rem 5rem; }
.public-match-list { min-width: 0; }
.public-field-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.public-field-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.public-field-list li > div { display: grid; min-width: 0; }
.public-field-list span { color: var(--muted); overflow-wrap: anywhere; }
.public-unavailable { min-height: 55vh; display: grid; place-items: center; align-content: center; gap: .7rem; padding-block: 4rem; text-align: center; }
.public-unavailable h1 { max-width: 18ch; margin: 0; font-size: clamp(2.1rem, 6vw, 4.5rem); line-height: 1; }
.public-unavailable p { max-width: 42rem; margin: 0; color: var(--muted-strong); }
.group-invite-landing { min-height: 68vh; display: grid; place-items: center; padding-block: clamp(2rem, 7vw, 6rem); }
.group-invite-card { width: min(42rem, 100%); min-width: 0; display: grid; gap: 1rem; padding: clamp(1.25rem, 5vw, 3rem); border: 1px solid rgba(75,239,145,.25); border-radius: clamp(1rem, 3vw, 1.6rem); background: linear-gradient(145deg, rgba(21,39,31,.94), rgba(9,20,14,.97)); box-shadow: 0 2rem 6rem rgba(0,0,0,.3); }
.group-invite-mark { width: 3.5rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 1rem; background: var(--green); color: #06130b; font-size: 1.5rem; font-weight: 950; }
.group-invite-card h1 { max-width: 17ch; margin: 0; font-size: clamp(2rem, 7vw, 4.2rem); line-height: 1; letter-spacing: -.055em; overflow-wrap: anywhere; }
.group-invite-copy { max-width: 40rem; margin: 0; color: var(--muted-strong); font-size: clamp(1rem, 2.5vw, 1.16rem); line-height: 1.65; }
.group-invite-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .7rem; margin-top: .4rem; }
.group-invite-actions .button { min-width: 0; min-height: 3rem; padding-block: .7rem; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.group-invite-testing { display: grid; gap: .35rem; padding: 1rem; border: 1px solid rgba(255,176,32,.28); border-radius: .9rem; background: rgba(255,176,32,.07); }
.group-invite-testing strong { color: #ffc766; }
.group-invite-testing p { margin: 0; color: var(--muted-strong); line-height: 1.55; }
.group-invite-steps { display: grid; gap: .65rem; margin: .2rem 0 0; padding-left: 1.4rem; color: var(--muted-strong); line-height: 1.5; }
.group-invite-steps li { padding-left: .25rem; overflow-wrap: anywhere; }
.group-invite-steps li::marker { color: var(--green); font-weight: 850; }
.group-invite-privacy { color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }
.commercial-status { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); }
.commercial-status > span { width: .7rem; aspect-ratio: 1; border-radius: 50%; background: #ffb020; box-shadow: 0 0 0 .25rem rgba(255,176,32,.12); }
.commercial-status[data-state="available"] > span { background: var(--green); box-shadow: 0 0 0 .25rem rgba(36,209,113,.12); }
.commercial-status[data-state="error"] > span { background: #ff5964; box-shadow: 0 0 0 .25rem rgba(255,89,100,.12); }
.commercial-status div { display: grid; }
.commercial-status small { color: var(--muted); }
.commercial-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .8rem; margin-bottom: 1rem; }
.commercial-kpi strong.is-unavailable { font-size: 1rem; color: var(--muted); }
.commercial-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.funnel-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: funnel; }
.funnel-list li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .75rem 0; border-bottom: 1px solid var(--line); counter-increment: funnel; }
.funnel-list li::before { content: counter(funnel); display: grid; width: 1.7rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: rgba(36,209,113,.12); color: var(--green); font-size: .75rem; font-weight: 800; }
.commercial-quality { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.commercial-quality div { padding: .75rem; border: 1px solid var(--line); border-radius: .75rem; }
.commercial-quality dt { color: var(--muted); font-size: .78rem; }
.commercial-quality dd { margin: .25rem 0 0; font-size: 1.25rem; font-weight: 800; }
.commercial-privacy { margin: 1rem 0 0; color: var(--muted); font-size: .82rem; }
.dashboard-onboarding,
.dashboard-play-first { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.dashboard-onboarding strong { display: block; margin: .15rem 0; font-size: 1.15rem; }
.dashboard-onboarding p,
.dashboard-play-first p { margin: 0; color: var(--muted); }
.dashboard-play-first { border-color: rgba(75,239,145,.28); background: linear-gradient(120deg, rgba(36,209,113,.13), rgba(8,20,14,.96)); }
.dashboard-play-first > div { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .8rem; min-width: 0; }
.dashboard-play-first > div > span { display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; border-radius: .8rem; color: var(--green); background: rgba(36,209,113,.14); font-size: 1.4rem; }

@media (max-width: 760px) {
  .discovery-hero,
  .discovery-detail-hero,
  .commercial-heading { align-items: stretch; flex-direction: column; }
  .discovery-search-main { grid-template-columns: 1fr; }
  .discovery-search-main .button { width: 100%; }
  .discovery-detail-layout,
  .public-discovery-hero-grid,
  .commercial-grid { grid-template-columns: 1fr; }
  .discovery-reserve-card { position: static; }
  .dashboard-onboarding,
  .dashboard-play-first { align-items: stretch; flex-direction: column; }
  .dashboard-onboarding .button,
  .dashboard-play-first .button { width: 100%; }
  .discovery-price { width: 100%; min-width: 0; }
}
@media (max-width: 420px) {
  .discovery-card > header,
  .discovery-card > footer,
  .public-field-list li { align-items: stretch; flex-direction: column; }
  .discovery-card > footer .button,
  .onboarding-actions .button { width: 100%; }
  .onboarding-actions { flex-direction: column-reverse; }
  .commercial-quality { grid-template-columns: 1fr; }
  .discovery-card-facts { grid-template-columns: 1fr; }
  .discovery-weekdays label { flex: 1 1 calc(50% - .5rem); border-radius: .75rem; }
}

@media (max-width: 640px) {
  .discovery-card-facts { grid-template-columns: 1fr; }
  .discovery-search input,
  .discovery-search select,
  .discovery-search button,
  .discovery-card .button { min-height: 2.75rem; white-space: normal; }
  .discovery-card > header,
  .discovery-card > footer { align-items: stretch; }
  .discovery-card > footer > * { min-width: 0; overflow-wrap: anywhere; }
}

.open-match-settings,
.safety-actions {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}
.open-match-settings > summary,
.safety-actions > summary { cursor: pointer; font-weight: 800; }
.open-match-settings[open] > summary,
.safety-actions[open] > summary { margin-bottom: .8rem; }
.safety-report-form { display: grid; gap: .7rem; margin-top: .75rem; }
.safety-report-form label { display: grid; gap: .35rem; }
.trust-attendance-panel,
.trust-review-panel {
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--surface) 94%, var(--green) 6%);
}
.trust-attendance-panel > summary,
.trust-review-panel > summary {
    cursor: pointer;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.trust-attendance-panel[open] > summary,
.trust-review-panel[open] > summary { margin-bottom: .8rem; }
.trust-attendance-panel > form,
.trust-review-panel { min-width: 0; }
.trust-attendance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .75rem;
    margin: .85rem 0;
}
.trust-attendance-grid label,
.trust-review-form label {
    display: grid;
    gap: .4rem;
    min-width: 0;
    color: var(--muted);
    font-size: .82rem;
}
.trust-attendance-grid label > span,
.trust-review-form > strong { color: var(--text); overflow-wrap: anywhere; }
.trust-attendance-grid select,
.trust-review-form select { width: 100%; min-width: 0; }
.trust-review-form {
    display: grid;
    grid-template-columns: minmax(8rem, 1.25fr) repeat(2, minmax(7rem, 1fr)) auto;
    align-items: end;
    gap: .75rem;
    margin-top: .75rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--bg-soft);
}
.trust-review-form .button { min-height: 2.75rem; white-space: normal; }
.commercial-sources { margin-top: 1rem; }
.source-count-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.source-count-grid > div { display: grid; gap: .25rem; padding: .8rem; border-radius: .85rem; background: var(--surface-soft); }
.source-count-grid span { color: var(--text-muted); font-size: .82rem; overflow-wrap: anywhere; }
.source-count-grid strong { font-size: clamp(1.15rem, 2vw, 1.6rem); }
@media (max-width: 760px) {
    .open-match-settings .form-grid { grid-template-columns: minmax(0, 1fr); }
    .open-match-settings .span-2 { grid-column: auto; }
    .source-count-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-review-form { grid-template-columns: minmax(0, 1fr); }
    .trust-review-form .button { width: 100%; }
}
@media (max-width: 360px) { .source-count-grid { grid-template-columns: minmax(0, 1fr); } }

/* Final compact-header guard: this must remain after the shell cascade above. */
@media (max-width: 480px) {
  .topbar-context { display: none; }
  .topbar { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
  .topbar-actions { grid-column: 2; width: auto; min-width: 0; max-width: 100%; justify-self: end; }
  .topbar-play, .user-menu-copy { display: none; }
  .user-menu { display: block; min-width: 0; max-width: 100%; }
  .user-menu > summary { grid-template-columns: auto auto; max-width: 100%; }
}

/* Authenticated workspace shell
   Keep the application grid isolated from global overlays and consent controls. */
body.app-shell {
  display: block;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: clip;
  background:
    radial-gradient(circle at 84% -8%, rgba(53, 232, 120, .1), transparent 30rem),
    var(--bg);
}

.app-frame {
  --workspace-sidebar: clamp(15.5rem, 16vw, 17rem);
  width: min(100%, 120rem);
  min-width: 0;
  min-height: 100dvh;
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--workspace-sidebar) minmax(0, 1fr);
  align-items: stretch;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 0 0 1px rgba(221, 255, 232, .035), 0 2rem 6rem rgba(0, 0, 0, .18);
}

.app-frame > .sidebar {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  position: sticky;
  inset: 0 auto auto 0;
  z-index: 30;
  width: 100%;
  min-width: 0;
  max-width: var(--workspace-sidebar);
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem 1rem;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-right: 1px solid var(--line);
  background: rgba(7, 17, 13, .94);
  backdrop-filter: blur(1.25rem);
  translate: none;
}

.app-frame > .main-content {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  overflow: clip visible;
}

.app-frame .sidebar-header {
  flex: 0 0 auto;
  min-width: 0;
}

.app-frame .sidebar .brand {
  min-width: 0;
  padding: .2rem;
}

.app-frame .sidebar .brand-copy {
  min-width: 0;
}

.app-frame .sidebar .brand-copy strong,
.app-frame .sidebar .brand-copy small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-frame .main-nav {
  width: 100%;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .25rem;
  margin: 1.5rem 0 auto;
}

.app-frame .main-nav > a,
.app-frame .nav-group a {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .48rem .6rem;
  border-radius: .75rem;
  line-height: 1.3;
}

.app-frame .main-nav .nav-glyph {
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
}

.app-frame .main-nav .nav-label {
  min-width: 0;
  font-family: inherit;
  font-size: clamp(.76rem, .7rem + .14vw, .88rem);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-frame .nav-group {
  width: 100%;
  min-width: 0;
}

.app-frame .nav-group > summary {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: .6rem;
  font-size: .7rem;
  line-height: 1.35;
}

.app-frame .nav-group > summary > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-frame .sidebar-footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 1rem;
  padding: .8rem;
}

.app-frame .topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 24;
  width: 100%;
  min-width: 0;
  min-height: 4.75rem;
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .75rem clamp(1rem, 2.4vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 13, .82);
  backdrop-filter: blur(1.25rem);
}

.app-frame .topbar-actions {
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.app-frame .topbar-play {
  max-width: 14rem;
  white-space: normal;
}

.app-frame .user-menu-copy strong,
.app-frame .user-menu-copy small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.app-frame .page-content {
  width: 100%;
  max-width: 96rem;
  min-width: 0;
  margin-inline: auto;
  padding: clamp(1rem, 2.4vw, 2.25rem);
}

.app-frame .page-content > * {
  min-width: 0;
  max-width: 100%;
}

.app-frame .page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.app-frame :where(.panel, .card, .metric-card, .operations-service, .operations-action-card) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.app-frame :where(.metric-grid, .card-grid, .group-grid, .operations-metrics,
  .operations-services, .operations-actions, .commercial-kpi-grid) {
  width: 100%;
  min-width: 0;
}

.app-frame :where(.data-table-wrap, .table-scroll) {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1180px) and (min-width: 961px) {
  .app-frame { --workspace-sidebar: 14rem; }
  .app-frame > .sidebar { padding-inline: .7rem; }
  .app-frame .main-nav > a,
  .app-frame .nav-group a {
    grid-template-columns: 1.7rem minmax(0, 1fr);
    gap: .45rem;
    padding-inline: .45rem;
  }
  .app-frame .main-nav .nav-glyph { width: 1.7rem; height: 1.7rem; }
}

@media (max-width: 960px) {
  .app-frame {
    width: 100%;
    min-height: 100dvh;
    display: block;
    box-shadow: none;
  }

  .app-frame > .sidebar {
    grid-column: auto;
    grid-row: auto;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(19rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    height: 100dvh;
    max-height: none;
    padding: 1rem;
    translate: -105% 0;
    transition: translate .22s ease;
    box-shadow: 1.5rem 0 4rem rgba(0, 0, 0, .42);
  }

  .app-frame > .sidebar.is-open { translate: 0 0; }

  .app-frame > .main-content {
    grid-column: auto;
    grid-row: auto;
    min-height: 100dvh;
  }

  .app-frame .topbar {
    min-height: 4.5rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    padding: .625rem .85rem;
  }

  .app-frame .page-content {
    width: 100%;
    padding: clamp(.9rem, 4vw, 1.5rem);
  }
}

@media (max-width: 540px) {
  body.app-shell { min-width: 320px; }
  .app-frame > .sidebar {
    width: calc(100vw - .5rem);
    max-width: calc(100vw - .5rem);
    padding: .65rem;
  }
  .app-frame .sidebar-header { gap: .35rem; }
  .app-frame .sidebar .brand { gap: .45rem; }
  .app-frame .sidebar .brand-copy strong {
    font-size: clamp(.8rem, 4vw, 1.05rem);
    overflow-wrap: normal;
    word-break: normal;
  }
  .app-frame .sidebar .brand-copy small {
    font-size: clamp(.45rem, 2.5vw, .56rem);
    overflow-wrap: normal;
    word-break: normal;
  }
  .app-frame .sidebar-close {
    min-width: 48px;
    min-height: 48px;
  }
  .app-frame .topbar { gap: .5rem; }
  .app-frame .topbar-context { display: none; }
  .app-frame .topbar-actions { grid-column: 2 / -1; justify-self: end; }
  .app-frame .page-content { padding: .85rem; }
  .app-frame .page-heading { align-items: stretch; }
  .app-frame .page-heading > * { width: 100%; }
  .app-frame .page-heading h1 { max-width: 100%; font-size: clamp(1.65rem, 9vw, 2.4rem); }
  .app-frame .page-heading :where(.operations-heading-actions, .marketplace-heading-actions) {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .app-frame .page-heading :where(.button, button, a) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-frame > .sidebar { transition: none; }
}

/* Help centre: long-form manual, local table of contents and FAQ. */
.help-layout {
  grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
}

.help-layout > div { min-width: 0; }

.help-contact {
  position: sticky;
  inset-block-start: 6rem;
  max-height: calc(100dvh - 7rem);
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(6rem, 1fr) auto auto;
  gap: .75rem;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: linear-gradient(155deg, rgba(21, 39, 31, .96), rgba(10, 23, 17, .98));
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .16);
}

.help-contact .feature-icon { margin-bottom: .15rem; }
.help-contact h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.help-contact p { margin: 0; color: var(--muted); line-height: 1.6; }
.help-contact small { margin: 0; overflow-wrap: anywhere; text-align: center; }

.help-contact nav {
  min-height: 0;
  max-height: min(48dvh, 32rem);
  padding: .75rem .35rem .75rem 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-block: 1px solid var(--line);
}

.help-contact nav ol {
  display: grid;
  gap: .2rem;
  margin: 0;
  padding-left: 1.4rem;
}

.help-contact nav li { padding-left: .15rem; color: var(--green); }
.help-contact nav li::marker { font: 800 .72rem/1 ui-monospace, monospace; }
.help-contact nav a {
  display: inline-block;
  width: 100%;
  padding: .42rem .5rem;
  border-radius: .55rem;
  color: #c3d2ca;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.help-contact nav a:hover,
.help-contact nav a:focus-visible { color: var(--text); background: rgba(255, 255, 255, .055); }
.help-contact .button-wide { width: 100%; margin-top: .1rem; }

.help-layout .search-bar { max-width: none; margin: 0 0 1rem; }
.help-layout .search-bar input { flex: 1 1 16rem; min-width: 0; }
.help-layout .search-bar button,
.help-layout .search-bar > .button {
  flex: 0 0 auto;
  min-width: 7rem;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: normal;
}
.help-layout .notice { margin-bottom: 1rem; }

.help-topics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  gap: 1rem;
}

.help-topics article {
  min-width: 0;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: .8rem;
  padding: clamp(1.15rem, 2.5vw, 1.65rem);
  scroll-margin-top: 6.5rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: linear-gradient(150deg, rgba(20, 38, 30, .96), rgba(12, 26, 19, .98));
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .08);
}

.help-topics article:target {
  border-color: rgba(53, 232, 120, .68);
  box-shadow: 0 0 0 3px rgba(53, 232, 120, .12), 0 1rem 2.5rem rgba(0, 0, 0, .12);
}

.help-topics h2 {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  line-height: 1.2;
}
.help-topics p { margin: 0; color: var(--muted); line-height: 1.65; }
.help-topics ol {
  display: grid;
  align-content: start;
  gap: .65rem;
  margin: .1rem 0 .25rem;
  padding-left: 1.35rem;
}
.help-topics li { padding-left: .2rem; color: #b7c8be; line-height: 1.55; }
.help-topics li::marker { color: var(--green); font-weight: 850; }
.help-topics article > a {
  width: fit-content;
  color: var(--green);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .25em;
}

#help-faq { scroll-margin-top: 5rem; }
#help-faq .faq-list details { scroll-margin-top: 6rem; }

@media (max-width: 860px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-contact {
    position: static;
    max-height: none;
    grid-template-rows: none;
    overflow: visible;
  }
  .help-contact nav { max-height: 20rem; }
}

@media (min-width: 961px) {
  .app-frame .operations-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr));
  }
}

@media (max-width: 620px) {
  .help-layout .search-bar input[type="search"] {
    flex: 0 0 auto;
    width: 100%;
    min-height: 3rem;
    height: auto;
  }
}

@media (max-width: 520px) {
  .help-layout { gap: 1rem; }
  .help-contact,
  .help-topics article { padding: 1rem; border-radius: 1rem; }
  .help-topics { grid-template-columns: minmax(0, 1fr); }
  .help-layout .search-bar button,
  .help-layout .search-bar > .button { width: 100%; min-width: 0; }
}

/* Final compact-header guard: keep after every authenticated-shell breakpoint. */
@media (max-width: 480px) {
  .app-frame .topbar-context { display: none; }
  .app-frame .topbar { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
  .topbar-actions { grid-column: 2; }
  .topbar-play, .user-menu-copy { display: none; }
  .app-frame .topbar-actions {
    grid-column: 2;
    width: auto;
    min-width: 0;
    max-width: 100%;
    justify-self: end;
  }
  .app-frame .topbar-play,
  .app-frame .user-menu-copy { display: none; }
  .app-frame .user-menu { display: block; min-width: 0; max-width: 100%; }
  .app-frame .user-menu > summary { grid-template-columns: auto auto; max-width: 100%; }
}

/* BookBall workspace v3
   One explicit navigation rail and one content-first canvas. These namespaced
   rules intentionally sit last so legacy component styles cannot rearrange the
   authenticated application shell. */
body.bb-app-page {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: #06100c;
}

.bb-workspace {
  --bb-rail-width: clamp(14.75rem, 15vw, 16.25rem);
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-columns: var(--bb-rail-width) minmax(0, 1fr);
  grid-template-areas: "navigation workspace";
  align-items: stretch;
  isolation: isolate;
  background: #07110d;
  box-shadow: none;
}

.bb-workspace > .bb-sidebar {
  grid-area: navigation;
  position: sticky;
  inset: 0 auto auto 0;
  z-index: 30;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  padding: 1.15rem .8rem .85rem;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 255, 154, .32) transparent;
  translate: none;
  transform: none;
  border-right: 1px solid rgba(153, 199, 171, .14);
  background:
    radial-gradient(circle at 50% -5%, rgba(53, 232, 120, .13), transparent 16rem),
    linear-gradient(180deg, #091812 0%, #07130e 55%, #06100c 100%);
  box-shadow: .9rem 0 2.8rem rgba(0, 0, 0, .12);
}

.bb-workspace > .bb-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 1rem auto;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(53, 232, 120, .9), transparent);
  pointer-events: none;
}

.bb-sidebar .sidebar-header {
  flex: 0 0 auto;
  min-width: 0;
  padding: .1rem .2rem .7rem;
}

.bb-sidebar .brand {
  min-width: 0;
  gap: .7rem;
  padding: .2rem;
}

.bb-sidebar .brand-mark {
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 2.55rem;
  border-radius: .8rem;
  box-shadow: 0 .7rem 1.8rem rgba(53, 232, 120, .2);
}

.bb-sidebar .brand-copy { min-width: 0; }
.bb-sidebar .brand-copy strong {
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.bb-sidebar .brand-copy small {
  margin-top: .22rem;
  color: #789587;
  font-size: .58rem;
  line-height: 1.35;
  letter-spacing: .1em;
  overflow-wrap: break-word;
}

.bb-sidebar-heading {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .55rem .55rem .35rem;
  color: #6f8e7e;
  font: 800 .6rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bb-sidebar-heading i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(153, 199, 171, .18), transparent);
}

.bb-sidebar .main-nav {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: .24rem;
  margin: 0;
  padding: .15rem 0;
}

.bb-sidebar .main-nav > a,
.bb-sidebar .nav-group a {
  width: 100%;
  min-width: 0;
  min-height: 2.65rem;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: .62rem;
  padding: .42rem .58rem;
  border: 1px solid transparent;
  border-radius: .72rem;
  color: #91a99d;
  line-height: 1.3;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.bb-sidebar .main-nav > a:hover,
.bb-sidebar .nav-group a:hover {
  color: #effbf4;
  border-color: rgba(153, 199, 171, .13);
  background: rgba(255, 255, 255, .045);
  transform: translateX(.12rem);
}

.bb-sidebar .main-nav a.is-active {
  color: #f2fff7;
  border-color: rgba(53, 232, 120, .28);
  background: linear-gradient(90deg, rgba(53, 232, 120, .18), rgba(53, 232, 120, .07));
  box-shadow: inset 3px 0 0 var(--green), 0 .55rem 1.4rem rgba(0, 0, 0, .08);
}

.bb-sidebar .main-nav a.nav-priority {
  margin-bottom: .2rem;
  color: #082013;
  border-color: rgba(111, 255, 164, .72);
  background: linear-gradient(135deg, #48ee87, #2ddc73);
  box-shadow: 0 .7rem 1.6rem rgba(53, 232, 120, .14);
}
.bb-sidebar .main-nav a.nav-priority:hover { color: #04160b; background: linear-gradient(135deg, #66f59a, #39e57e); }

.bb-sidebar .main-nav .nav-glyph {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(153, 199, 171, .1);
  border-radius: .55rem;
  color: #adc1b6;
  background: rgba(255, 255, 255, .045);
  font: 850 .65rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.bb-sidebar .main-nav a.is-active .nav-glyph { color: #7af5a8; border-color: rgba(53, 232, 120, .2); background: rgba(53, 232, 120, .1); }
.bb-sidebar .main-nav a.is-active .nav-label { color: #f2fff7; }
.bb-sidebar .main-nav a.nav-priority .nav-glyph { color: #082013; border-color: rgba(6, 36, 18, .14); background: rgba(6, 36, 18, .09); }
.bb-sidebar .main-nav a.nav-priority .nav-label { color: #082013; }

.bb-sidebar .main-nav .nav-label {
  min-width: 0;
  font: 720 clamp(.76rem, .72rem + .1vw, .84rem)/1.35 inherit;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.bb-sidebar .nav-group {
  width: 100%;
  min-width: 0;
  margin-top: .12rem;
  padding-top: .12rem;
  border-top: 1px solid rgba(153, 199, 171, .08);
}
.bb-sidebar .nav-group > summary {
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .48rem .58rem;
  border-radius: .65rem;
  color: #789587;
  font-size: .63rem;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.bb-sidebar .nav-group > summary:hover { color: #c7d8cf; background: rgba(255, 255, 255, .035); }
.bb-sidebar .nav-group > div { display: grid; gap: .18rem; padding-top: .12rem; }

.bb-sidebar .sidebar-footer {
  width: 100%;
  flex: 0 0 auto;
  margin: .75rem 0 0;
  padding: .72rem;
  border-color: rgba(153, 199, 171, .13);
  border-radius: .82rem;
  background: rgba(255, 255, 255, .025);
}
.bb-sidebar .sidebar-footer strong { color: #cadbd2; font-size: .7rem; }
.bb-sidebar .sidebar-footer small { color: #6f8e7e; font-size: .58rem; }

.bb-workspace > .bb-workspace-main {
  grid-area: workspace;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  overflow: visible;
  background-color: #09150f;
  background-image:
    radial-gradient(circle at 92% 0%, rgba(53, 232, 120, .09), transparent 28rem),
    radial-gradient(circle at 18% 85%, rgba(70, 139, 255, .05), transparent 30rem),
    linear-gradient(rgba(141, 181, 157, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 181, 157, .025) 1px, transparent 1px);
  background-size: auto, auto, 2.75rem 2.75rem, 2.75rem 2.75rem;
}

.bb-workspace .bb-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  width: 100%;
  min-width: 0;
  min-height: 4.65rem;
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .72rem clamp(1rem, 2.25vw, 2.2rem);
  border-bottom: 1px solid rgba(153, 199, 171, .12);
  background: rgba(9, 21, 15, .97);
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .09);
}
.bb-topbar .topbar-context span { color: #55ed8d; }
.bb-topbar .topbar-context strong { color: #d8e8df; }
.bb-topbar .topbar-actions { width: auto; min-width: 0; max-width: 100%; flex-wrap: wrap; }
.bb-topbar .user-menu { position: relative; display: block; min-width: 0; }

.bb-workspace .bb-workspace-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 112rem;
  min-width: 0;
  min-height: calc(100dvh - 4.65rem);
  margin-inline: auto;
  padding: clamp(1.15rem, 2.35vw, 2.5rem);
  animation: bb-canvas-enter .24s ease-out both;
}
.bb-workspace-canvas > * { min-width: 0; max-width: 100%; }
.bb-workspace-canvas :where(.panel, .card, .metric-card, .operations-service, .operations-action-card) {
  border-color: rgba(153, 199, 171, .14);
  background-color: rgba(14, 31, 23, .92);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.bb-workspace :where(button, .button, summary) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.bb-workspace :where(.metric-grid, .card-grid, .group-grid, .operations-metrics, .operations-services, .operations-actions, .commercial-kpi-grid) {
  width: 100%;
  min-width: 0;
}
.bb-workspace :where(.content-grid, .sync-layout, .operations-main-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.bb-workspace :where(.data-table-wrap, .table-scroll) { width: 100%; max-width: 100%; overflow-x: auto; }

.bb-nav-backdrop { display: none; }
.bb-mobile-nav { display: none; }

@keyframes bb-canvas-enter {
  from { opacity: 0; transform: translateY(.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) and (min-width: 961px) {
  .bb-workspace { --bb-rail-width: 14rem; }
  .bb-workspace > .bb-sidebar { padding-inline: .62rem; }
  .bb-sidebar .main-nav > a,
  .bb-sidebar .nav-group a { gap: .45rem; padding-inline: .45rem; }
}

@media (max-width: 960px) {
  .bb-workspace {
    width: 100%;
    min-height: 100dvh;
    display: block;
  }
  .bb-workspace > .bb-sidebar {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    translate: none;
    transform: none;
  }
  .js-enhanced .bb-workspace > .bb-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(19.5rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    height: 100dvh;
    max-height: 100dvh;
    padding: 1rem .75rem .8rem;
    transform: translateX(calc(-100% - 1.5rem));
    transition: transform .22s ease;
    box-shadow: 1.5rem 0 4rem rgba(0, 0, 0, .38);
  }
  .js-enhanced .bb-workspace > .bb-sidebar.is-open { transform: translateX(0); }
  .js-enhanced .bb-sidebar .bb-sidebar-close { display: grid; place-items: center; }
  .bb-workspace > .bb-workspace-main { width: 100%; min-height: 100dvh; }
  .bb-workspace .bb-topbar {
    min-height: 4.4rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .7rem;
    padding: .62rem .85rem;
  }
  .js-enhanced .bb-topbar .mobile-menu { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; }
  .bb-workspace .bb-workspace-canvas { min-height: calc(100dvh - 4.4rem); padding: clamp(.9rem, 3.8vw, 1.5rem); }
  body.bb-app-page.nav-open { overflow: hidden; }
  body.bb-app-page.nav-open .bb-nav-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(1, 8, 5, .72);
    box-shadow: none;
    cursor: pointer;
  }
}

@media (max-width: 540px) {
  .bb-workspace .bb-topbar { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
  .bb-topbar .topbar-context { display: none; }
  .bb-topbar .topbar-actions { grid-column: 2; justify-self: end; }
  .bb-topbar .topbar-play,
  .bb-topbar .user-menu-copy { display: none; }
  .bb-workspace .bb-workspace-canvas { padding: .85rem; }
  .bb-workspace-canvas .page-heading { align-items: stretch; }
  .bb-workspace-canvas .page-heading > * { width: 100%; }
}

@media (max-width: 720px) {
  .bb-workspace > .bb-workspace-main {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
  .bb-mobile-nav {
    position: fixed;
    z-index: 80;
    inset: auto .45rem var(--analytics-consent-offset, 0px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .2rem;
    min-height: 4.15rem;
    padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(153, 199, 171, .2);
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    background: rgba(7, 19, 13, .98);
    box-shadow: 0 -1rem 2.4rem rgba(0, 0, 0, .3);
  }
  .bb-mobile-nav a {
    min-width: 0;
    min-height: 3.25rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .18rem;
    padding: .3rem .15rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    color: #8ca99a;
    text-align: center;
    text-decoration: none;
  }
  .bb-mobile-nav a > span { font-size: 1.05rem; line-height: 1; }
  .bb-mobile-nav a > small {
    width: 100%;
    color: inherit;
    font-size: clamp(.55rem, 2.5vw, .68rem);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bb-mobile-nav a[aria-current="page"] {
    color: #eafff1;
    border-color: rgba(53, 232, 120, .3);
    background: rgba(53, 232, 120, .15);
  }
  body.bb-app-page.nav-open .bb-mobile-nav { visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-workspace > .bb-sidebar,
  .bb-workspace .bb-workspace-canvas,
  .bb-sidebar .main-nav a { animation: none; transition: none; }
}

/* Group access portal --------------------------------------------------- */
.group-access-tabs {
  display: flex;
  gap: .45rem;
  max-width: 100%;
  margin: 0 0 1.35rem;
  padding: .35rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  scrollbar-width: thin;
}
.group-heading-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.group-access-tabs a {
  flex: 1 0 max-content;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}
.group-access-tabs a[aria-current="page"] {
  color: var(--text);
  background: rgba(34, 197, 94, .16);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .35);
}
.group-access-section {
  min-width: 0;
  margin-block: 1.25rem 2rem;
  padding: clamp(1rem, 2.5vw, 1.55rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.group-access-section .section-heading { max-width: none; margin-bottom: 1.25rem; }
.group-access-section .section-heading h2 { font-size: clamp(1.65rem, 4vw, 2.35rem); }
.group-access-heading,
.group-access-card-heading,
.group-access-manager-picker,
.group-access-request-card > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.group-access-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, .35fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.25rem;
}
.group-access-search > *,
.group-access-request-form > *,
.group-access-decisions > * { min-width: 0; }
.group-access-search .span-2 { grid-column: 1 / -1; }
.group-access-search-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.group-access-search-actions .button { flex: 1 1 13rem; }
.group-access-search .form-feedback:empty { display: none; }
.privacy-chip {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 1rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(34, 197, 94, .1);
  overflow-wrap: anywhere;
}
.group-access-directory,
.group-access-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  min-width: 0;
  margin-block: 1rem;
}
.group-access-directory-card,
.group-access-request-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--group-color, var(--green));
  border-radius: var(--radius);
  background: var(--panel-2);
  overflow-wrap: anywhere;
}
.group-access-directory-card h3,
.group-access-request-card h3 { margin: 0; font-size: 1.15rem; }
.group-access-card-heading p,
.group-access-request-card > div:first-child p { margin: .2rem 0 0; color: var(--muted); }
.group-format-badge {
  flex: 0 0 auto;
  padding: .35rem .55rem;
  border-radius: .55rem;
  font-weight: 900;
  background: rgba(34, 197, 94, .13);
}
.group-access-facts {
  display: flex;
  gap: .45rem 1rem;
  flex-wrap: wrap;
  margin: .8rem 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}
.group-access-request-form,
.group-access-decisions,
.group-access-decisions form {
  display: grid;
  gap: .75rem;
  min-width: 0;
}
.group-access-role-choice {
  min-width: 0;
  margin: 0;
  padding: .75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
}
.group-access-role-choice legend { padding-inline: .25rem; font-weight: 800; }
.group-access-role-choice label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .5rem;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: rgba(255, 255, 255, .025);
}
.group-access-role-choice label > span { display: grid; gap: .12rem; }
.group-access-role-choice small { color: var(--muted); font-weight: 500; }
.group-access-decisions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.group-access-decisions form { padding: .8rem; border: 1px solid var(--line); border-radius: 12px; }
.group-access-manager-picker { align-items: end; justify-content: flex-start; }
.group-access-manager-picker label { flex: 1 1 18rem; min-width: 0; }
.group-access-manager-picker .button { flex: 0 1 auto; }
.group-access-settings {
  min-width: 0;
  margin-block: 1rem 1.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.group-access-settings fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.group-access-settings legend { font-size: 1.1rem; font-weight: 900; }
.group-access-settings p { color: var(--muted); overflow-wrap: anywhere; }
.group-access-settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1rem;
}
.group-access-settings-fields > * { min-width: 0; }
.group-access-status { flex: 0 0 auto; }
.status-pending { color: var(--orange); }
.status-accepted { color: var(--green); }
.status-rejected,
.status-cancelled { color: var(--muted); }
.empty-state.compact { padding: 1.25rem; }

@media (max-width: 620px) {
  .group-access-tabs { border-radius: 1rem; }
  .group-heading-actions,
  .group-heading-actions .button { width: 100%; }
  .group-access-search,
  .group-access-decisions,
  .group-access-settings-fields,
  .group-access-role-choice { grid-template-columns: minmax(0, 1fr); }
  .group-access-search .span-2 { grid-column: 1; }
  .group-access-manager-picker .button,
  .group-access-search-actions .button,
  .group-access-decisions .button { width: 100%; }
}

@media (forced-colors: active) {
  .group-access-tabs a[aria-current="page"],
  .group-access-directory-card,
  .group-access-request-card { border: 2px solid CanvasText; }
}

/* Responsive overflow guards verified by the PHP visual matrix. The body must
   follow the layout viewport after its vertical scrollbar is reserved. */
body.app-shell,
body.bb-app-page { min-width: 0; }

/* The legacy compact header hides direct user-menu div children. Keep the
   authenticated account popover (including the superadmin framework selector)
   available when its native details control is open on narrow screens. */
@media (max-width: 620px) {
  .bb-topbar .user-menu:not([open]) > .user-popover { display: none; }
  .bb-topbar .user-menu[open] > .user-popover { display: grid; }
}

/* Canonical add-player wizard. All selectors stay scoped so both selectable
   UI frameworks can provide their own surrounding shell without collisions. */
.group-invite-heading { align-items: end; }
.group-invite-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.group-invite-steps li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: .85rem;
  overflow-wrap: anywhere;
}
.group-invite-steps span {
  flex: 0 0 1.8rem;
  min-height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 900;
}
.group-invite-steps .is-active,
.group-invite-steps .is-complete { border-color: color-mix(in srgb, var(--green) 58%, var(--line)); color: var(--text); }
.group-invite-steps .is-active span,
.group-invite-steps .is-complete span { background: var(--green); color: #06140c; }
.group-invite-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .8fr);
  gap: 1.25rem;
  align-items: start;
}
.group-invite-layout > * { min-width: 0; }
.group-invite-panel .panel-header { align-items: start; }
.group-invite-panel .panel-header p,
.group-invite-result > p { margin-bottom: 0; color: var(--muted); }
.group-invite-form { display: grid; gap: 1rem; min-width: 0; }
.group-invite-field { min-width: 0; display: grid; gap: .45rem; font-weight: 800; }
.group-invite-field > :where(input, select) { min-width: 0; width: 100%; }
.group-invite-role-set { min-width: 0; margin: 0; padding: .8rem; }
.group-invite-role-set legend { padding-inline: .35rem; color: var(--text); font-size: .92rem; font-weight: 900; }
.group-invite-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.group-invite-choice,
.group-invite-captain {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  margin: 0;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
}
.group-invite-choice:has(input:checked),
.group-invite-captain:has(input:checked) { border-color: var(--green); }
.group-invite-choice input,
.group-invite-captain input { width: 1.1rem; min-width: 1.1rem; min-height: 1.1rem; margin: .12rem 0 0; }
.group-invite-choice span,
.group-invite-captain span { min-width: 0; display: grid; gap: .2rem; }
.group-invite-choice small,
.group-invite-captain small { color: var(--muted); font-weight: 500; line-height: 1.4; }
.group-invite-team-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: end; }
.group-invite-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: end; }
.group-invite-team-fields[hidden] { display: none; }
.group-invite-submit { justify-self: start; }
.group-invite-result { position: sticky; top: 1rem; }
.group-invite-link-field { display: grid; gap: .45rem; margin-top: 1rem; font-weight: 800; }
.group-invite-link-field input { min-width: 0; width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.group-invite-result-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.group-invite-result-actions .button { flex: 1 1 7rem; min-width: 0; }
.group-invite-result-empty { margin-top: 1rem; }

@media (max-width: 800px) {
  .group-invite-layout { grid-template-columns: minmax(0, 1fr); }
  .group-invite-result { position: static; }
}

@media (max-width: 440px) {
  .group-invite-steps { gap: .35rem; }
  .group-invite-steps li { min-height: 4.2rem; flex-direction: column; justify-content: center; gap: .3rem; padding: .45rem .25rem; text-align: center; font-size: .76rem; }
  .group-invite-role-grid,
  .group-invite-team-fields,
  .group-invite-limits { grid-template-columns: minmax(0, 1fr); }
  .group-invite-submit,
  .group-invite-result-actions .button { width: 100%; }
}

@media (forced-colors: active) {
  .group-invite-steps .is-active,
  .group-invite-steps .is-complete,
  .group-invite-choice:has(input:checked),
  .group-invite-captain:has(input:checked) { border: 2px solid Highlight; }
}

/* The support dashboard remains usable at 390px and with enlarged text. */
.control-dashboard { margin-block: 1.5rem; padding: clamp(1rem, 3vw, 2rem); }
.control-dashboard h3 { margin-block: 1.5rem .75rem; }
.control-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .75rem; }
.control-metrics .metric-card { min-width: 0; overflow-wrap: anywhere; }
.control-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin-block: 1rem; }
.control-panels > .panel { min-width: 0; padding: 1rem; }
.control-distribution > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; margin-block: .75rem; }
.control-distribution span { overflow-wrap: anywhere; }
.control-distribution meter { width: 100%; grid-column: 1 / -1; accent-color: var(--color-primary, #168a57); }
.control-dashboard .page-heading form { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }